/* DirectFellas Design System — tema CLARO por padrão (área operacional). Fundo branco, texto de alto contraste (AA), vermelho sangue como acento. Toggle escuro: . Fonte display: Lency (OPTILency.otf). */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); @font-face { font-family: 'Lency'; src: url('/assets/optilency.otf') format('opentype'); font-weight: 400 900; font-display: swap; } :root { /* marca — constantes nos dois temas */ --vermelho: #cc0000; --vermelho-vivo: #e10600; --verde: #1f8a4c; /* AA em texto sobre branco */ --display: 'Lency', 'Cinzel', serif; --mono: 'IBM Plex Mono', monospace; /* tema claro (default) — contraste AA */ --bg: #ffffff; --superficie: #ffffff; --superficie-alta: #f5f5f6; --texto: #16161a; /* ~15:1 no branco */ --texto-medio: #4a4a52; /* ~8:1 */ --texto-fraco: #6b6b73; /* ~5.2:1 */ --hairline: rgba(16,16,20,0.10); --hairline-alta: rgba(16,16,20,0.18); --sombra-card: 0 1px 2px rgba(16,16,20,0.05); --scheme: light; /* aliases retrocompatíveis (HTML inline antigo) — resolvem no tema ativo */ --preto: var(--bg); --gelo: var(--texto); --cinza-rosado: var(--texto-medio); --off-white: #f3f6f4; --grain-blend: multiply; --grain-opacity: 0.035; --vinheta: radial-gradient(120% 80% at 50% -10%, rgba(204,0,0,0.05) 0%, rgba(0,0,0,0) 45%); --on-vermelho: #ffffff; } :root[data-tema="escuro"] { --bg: #050505; --superficie: #0a0a0b; --superficie-alta: #0e0e0f; --texto: #eeeeee; --texto-medio: #dbd4d4; --texto-fraco: rgba(238,238,238,0.55); --hairline: rgba(238,238,238,0.10); --hairline-alta: rgba(238,238,238,0.18); --sombra-card: none; --scheme: dark; --grain-blend: screen; --grain-opacity: 0.05; --vinheta: radial-gradient(120% 80% at 50% -10%, rgba(204,0,0,0.07) 0%, rgba(0,0,0,0) 45%); --verde: #8fd694; --on-vermelho: #f3f6f4; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--texto); min-height: 100vh; } a { color: var(--vermelho); text-decoration: none; } a:hover { color: var(--vermelho-vivo); } ::selection { background: var(--vermelho); color: #fff; } input, select, textarea { color-scheme: var(--scheme); } input::placeholder, textarea::placeholder { color: var(--texto-fraco); } @keyframes df-spin { to { transform: rotate(360deg); } } @keyframes df-toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes df-flicker { 0%,100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .72; } 94% { opacity: 1; } 96% { opacity: .85; } 97% { opacity: 1; } } /* atmosfera de cinema (discreta no claro) */ .df-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url('data:image/svg+xml;utf8,'); background-size: 200px 200px; } .df-vinheta { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--vinheta); } .df-conteudo { position: relative; z-index: 2; } /* tipografia */ .df-display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.95; } .df-mono { font-family: var(--mono); } .df-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vermelho); } .df-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-fraco); } .df-wordmark { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto); filter: drop-shadow(0 0 16px rgba(204,0,0,0.28)); animation: df-flicker 6s infinite; } .df-wordmark b { color: var(--vermelho); font-weight: inherit; } /* nav */ .df-nav { padding: 18px 24px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* botões — 1 primário vermelho por tela */ .df-btn, .df-btn-sec, .df-btn-ghost { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; padding: 12px 22px; cursor: pointer; transition: all .18s; border: none; } .df-btn { background: var(--vermelho); color: var(--on-vermelho); } .df-btn:hover { background: var(--vermelho-vivo); box-shadow: 0 0 26px rgba(204,0,0,0.35); } .df-btn-sec { background: transparent; color: var(--texto); border: 1px solid var(--hairline-alta); } .df-btn-sec:hover { border-color: var(--vermelho); color: var(--vermelho); } .df-btn-ghost { background: transparent; color: var(--texto-medio); } .df-btn-ghost:hover { color: var(--texto); } .df-btn:disabled, .df-btn-sec:disabled { background: var(--superficie-alta); color: var(--texto-fraco); border: none; cursor: not-allowed; box-shadow: none; } .df-btn-mini { padding: 7px 12px; font-size: 10px; letter-spacing: 0.1em; } /* campos */ .df-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 8px; } .df-input, .df-select, .df-textarea { width: 100%; background: var(--bg); border: 1px solid var(--hairline-alta); color: var(--texto); padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 14px; border-radius: 2px; outline: none; transition: all .18s; } .df-input:focus, .df-select:focus, .df-textarea:focus { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(204,0,0,0.15); } .df-textarea { resize: vertical; min-height: 80px; } .df-erro-campo { font-size: 11px; color: var(--vermelho); margin-top: 6px; } /* cards */ .df-card { background: var(--superficie); border: 1px solid var(--hairline); border-radius: 2px; padding: 20px; box-shadow: var(--sombra-card); transition: all .18s; } a.df-card, a.df-card:hover { color: var(--texto); } .df-card:hover { border-color: var(--hairline-alta); } .df-card-destaque { border-color: rgba(204,0,0,0.5); box-shadow: 0 0 28px rgba(204,0,0,0.14); position: relative; } .df-card-destaque::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--vermelho); } .df-card-apagada { background: var(--superficie-alta); opacity: 0.7; } /* tags pill */ .df-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hairline-alta); color: var(--texto-medio); background: transparent; white-space: nowrap; } .df-tag .pt { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-fraco); flex: none; } .df-tag-vermelha { border-color: rgba(204,0,0,0.5); background: rgba(204,0,0,0.07); color: var(--vermelho); } .df-tag-vermelha .pt { background: var(--vermelho); } .df-tag-verde { border-color: rgba(31,138,76,0.4); background: rgba(31,138,76,0.08); color: var(--verde); } .df-tag-verde .pt { background: var(--verde); } .df-tag-amarela { border-color: rgba(180,120,0,0.45); background: rgba(230,160,0,0.10); color: #9a6700; } .df-tag-amarela .pt { background: #c98a00; } /* colunas do kanban */ .df-col { border: 1px solid var(--hairline); border-radius: 2px; padding: 14px; min-height: 320px; display: flex; flex-direction: column; background: var(--superficie); transition: all .15s; } .df-col.ativa { border-color: rgba(204,0,0,0.6); background: rgba(204,0,0,0.05); } .df-col-cab { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; } .df-col-cab h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; } .df-col-vazia { font-size: 12px; color: var(--texto-fraco); text-align: center; padding: 26px 10px; border: 1px dashed var(--hairline-alta); border-radius: 2px; } .df-ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; } /* tarefa no board */ .df-tarefa { border: 1px solid var(--hairline); border-radius: 2px; padding: 13px 15px; cursor: grab; background: var(--superficie-alta); transition: border-color .15s; position: relative; } .df-tarefa:hover { border-color: var(--hairline-alta); } .df-tarefa.andamento { border-color: rgba(204,0,0,0.45); box-shadow: 0 0 22px rgba(204,0,0,0.10); } .df-tarefa.andamento::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--vermelho); } .df-tarefa.feita { opacity: 0.6; } .df-tarefa.feita .titulo { text-decoration: line-through; color: var(--texto-fraco); } /* toast */ .df-toast { position: fixed; z-index: 90; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; border-radius: 2px; padding: 13px 24px; color: var(--texto); font-size: 13px; white-space: nowrap; max-width: 90vw; background: var(--superficie); border: 1px solid var(--hairline-alta); border-left: 3px solid var(--texto-fraco); box-shadow: 0 12px 40px rgba(16,16,20,0.18); animation: df-toast-in .3s ease; } .df-toast.erro { border-color: rgba(204,0,0,0.5); border-left-color: var(--vermelho); } .df-toast.sucesso { border-color: rgba(31,138,76,0.4); border-left-color: var(--verde); } .df-spinner { width: 14px; height: 14px; border: 2px solid var(--hairline-alta); border-top-color: var(--vermelho); border-radius: 50%; animation: df-spin .8s linear infinite; flex: none; } /* modal */ .df-modal-fundo { position: fixed; inset: 0; z-index: 70; background: rgba(16,16,20,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; } :root[data-tema="escuro"] .df-modal-fundo { background: rgba(0,0,0,0.75); } .df-modal { background: var(--superficie); border: 1px solid var(--hairline-alta); border-radius: 2px; width: 100%; max-width: 560px; padding: 28px; box-shadow: 0 24px 60px rgba(16,16,20,0.22); } .df-modal h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 22px; margin: 0 0 20px; } /* tabs */ .df-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; } .df-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--texto-fraco); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 16px; cursor: pointer; transition: all .15s; } .df-tab:hover { color: var(--texto); } .df-tab.ativa { color: var(--texto); border-bottom-color: var(--vermelho); } /* tabela (a planilha) */ .df-tabela-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 2px; } .df-tabela { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; } .df-tabela th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-fraco); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline-alta); background: var(--superficie-alta); position: sticky; top: 0; } .df-tabela td { padding: 10px 14px; border-bottom: 1px solid var(--hairline); color: var(--texto-medio); } .df-tabela tr:hover td { background: var(--superficie-alta); color: var(--texto); } .df-tabela td:first-child { color: var(--texto); font-weight: 500; } /* avatar do membro */ .df-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; text-transform: uppercase; } /* toggle de tema */ .df-tema-btn { background: transparent; border: 1px solid var(--hairline-alta); color: var(--texto-medio); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .df-tema-btn:hover { border-color: var(--vermelho); color: var(--vermelho); } /* helpers */ .df-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .df-grade { display: grid; gap: 16px; } .df-secao { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .df-oculto { display: none !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--superficie-alta); } ::-webkit-scrollbar-thumb { background: var(--hairline-alta); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: rgba(204,0,0,0.5); } @media (max-width: 680px) { .df-nav { padding: 14px 16px; } .df-secao { padding: 0 14px; } .df-modal { padding: 20px; } } /* ══════════════════════════════════════════════════════════════════════════ Shell all-in-one (estilo ClickUp): sidebar à esquerda + área de trabalho. z-scale: conteúdo 2 · topbar 30 · scrim 44 · sidebar-mobile 46 · modal 70 · toast 90 ═════════════════════════════════════════════════════════════════════════ */ .df-app { display: flex; min-height: 100vh; position: relative; z-index: 2; } .df-side { width: 256px; flex: none; position: sticky; top: 0; align-self: flex-start; height: 100vh; display: flex; flex-direction: column; gap: 4px; background: var(--superficie); border-right: 1px solid var(--hairline); padding: 16px 12px; overflow-y: auto; } .df-side-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; } .df-side-sec { margin-top: 14px; } .df-side-sec > .df-side-tit { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-fraco); padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; } .df-side-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 8px; border: none; background: transparent; color: var(--texto-medio); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; transition: background .15s, color .15s; min-height: 40px; } .df-side-link:hover { background: var(--superficie-alta); color: var(--texto); } .df-side-link.ativo { background: rgba(204,0,0,0.10); color: var(--vermelho); font-weight: 600; } .df-side-link svg { width: 18px; height: 18px; flex: none; } .df-side-link .df-pill-n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--texto-fraco); background: var(--superficie-alta); padding: 1px 7px; border-radius: 999px; } .df-side-link.ativo .df-pill-n { color: var(--vermelho); background: rgba(204,0,0,0.12); } .df-side-ponto { width: 8px; height: 8px; border-radius: 3px; flex: none; } .df-side-esticar { flex: 1; } .df-side-user { border-top: 1px solid var(--hairline); padding-top: 12px; margin-top: 8px; display: flex; align-items: center; gap: 10px; } .df-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .df-work { padding: 26px 28px 90px; max-width: 1180px; width: 100%; margin: 0 auto; } /* topbar mobile (hamburger) */ .df-topbar { display: none; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 30; background: var(--bg); } .df-burger { width: 40px; height: 40px; border: 1px solid var(--hairline-alta); border-radius: 8px; background: transparent; color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .df-burger svg { width: 20px; height: 20px; } .df-scrim { display: none; position: fixed; inset: 0; z-index: 44; background: rgba(16,16,20,0.4); } /* cabeçalho da view */ .df-viewhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .df-viewtit { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(24px, 3.4vw, 34px); margin: 0; line-height: 1; } /* segmented control (List / Board) */ .df-seg { display: inline-flex; background: var(--superficie-alta); border: 1px solid var(--hairline); border-radius: 8px; padding: 3px; gap: 2px; } .df-seg button { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--texto-medio); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 6px; cursor: pointer; transition: all .15s; } .df-seg button svg { width: 15px; height: 15px; } .df-seg button.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-card); } /* chips de agrupamento/filtro */ .df-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hairline-alta); background: transparent; color: var(--texto-medio); border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; } .df-chip:hover { border-color: var(--vermelho); color: var(--vermelho); } .df-chip.ativo { background: rgba(204,0,0,0.08); border-color: rgba(204,0,0,0.45); color: var(--vermelho); } /* ── List view estilo ClickUp: grupos + linhas ── */ .df-lgroup { margin-bottom: 22px; } .df-lgrouphead { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px; } .df-lgrouphead .nome { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; } .df-lgrouphead .n { font-family: var(--mono); font-size: 11px; color: var(--texto-fraco); } .df-rows { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: var(--superficie); } .df-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background .12s; min-height: 46px; } .df-row:last-child { border-bottom: none; } .df-row:hover { background: var(--superficie-alta); } .df-row .check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hairline-alta); flex: none; display: inline-flex; align-items: center; justify-content: center; } .df-row .check.feito { border-color: var(--verde); background: var(--verde); color: #fff; } .df-row .check svg { width: 11px; height: 11px; } .df-row .titulo { font-size: 13.5px; font-weight: 500; color: var(--texto); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .df-row.feito .titulo { color: var(--texto-fraco); text-decoration: line-through; } .df-row .cel { flex: none; display: flex; align-items: center; gap: 6px; } .df-row .prazo { font-family: var(--mono); font-size: 11px; color: var(--texto-fraco); } .df-row .prazo.venc { color: var(--vermelho); } .df-flag { width: 14px; height: 14px; color: var(--texto-fraco); } .df-flag.alta { color: var(--vermelho); } .df-empbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--texto-medio); } .df-empbadge .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; } /* ── Célula editável inline (planilha/lista estilo ClickUp) ── */ .df-cel { width: 100%; min-width: 60px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 7px; font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--texto); outline: none; transition: border-color .12s, background .12s; } .df-cel:hover { border-color: var(--hairline-alta); background: var(--superficie-alta); } .df-cel:focus { border-color: var(--vermelho); background: var(--bg); box-shadow: 0 0 0 2px rgba(204,0,0,0.12); } select.df-cel { cursor: pointer; } .df-cel.df-mono { font-family: var(--mono); font-size: 12px; } .df-cel-salvo { border-color: var(--verde) !important; background: rgba(31,138,76,0.06) !important; } /* multi-seleção: célula com chips + popover que fica aberto */ .df-multi { min-height: 30px; min-width: 90px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; } .df-multi:hover { border-color: var(--hairline-alta); background: var(--superficie-alta); } #multiPop { position: fixed; z-index: 85; background: var(--superficie); border: 1px solid var(--hairline-alta); border-radius: 10px; box-shadow: 0 12px 40px rgba(16,16,20,0.22); padding: 6px; min-width: 190px; max-height: 280px; overflow-y: auto; } #multiPop label:hover { background: var(--superficie-alta); border-radius: 6px; } /* pílula de status como gatilho de dropdown */ .df-cel-status { position: relative; } .df-flag-btn { border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; color: var(--texto-fraco); } .df-flag-btn:hover { background: var(--superficie-alta); } .df-flag-btn.alta { color: var(--vermelho); } /* linha da lista com controles inline */ .df-row .df-cel { flex: none; } .df-row select.df-cel { max-width: 150px; } /* ── Lista aninhada (master: empresa → status → linhas), estilo ClickUp ── */ .df-lgroup-outer { border: 1px solid var(--hairline); border-radius: 12px; margin-bottom: 14px; overflow: hidden; background: var(--superficie); box-shadow: var(--sombra-card); } .df-outer { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; user-select: none; background: var(--superficie-alta); border-bottom: 1px solid var(--hairline); } .df-outer:hover { background: var(--superficie-alta); filter: brightness(0.99); } .df-outer .nome { font-size: 14.5px; font-weight: 700; } .df-outer .n { font-family: var(--mono); font-size: 11px; color: var(--texto-fraco); } .df-caret { font-size: 11px; color: var(--texto-fraco); width: 12px; text-align: center; } .df-subgroup { padding: 4px 12px 10px; } .df-subhead { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--texto-medio); padding: 10px 4px 6px; text-transform: uppercase; letter-spacing: 0.1em; } .df-subhead .n { color: var(--texto-fraco); } .df-lgroup-outer .df-rows { border: 1px solid var(--hairline); border-radius: 8px; } /* ── Equipe: cartões de pessoas ── */ .df-people { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .df-person { background: var(--superficie); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; box-shadow: var(--sombra-card); } .df-person:hover { border-color: var(--vermelho); } .df-person.ativo { border-color: rgba(204,0,0,0.5); box-shadow: 0 0 0 3px rgba(204,0,0,0.10); } .df-person .agora { font-size: 12px; color: var(--texto-medio); margin-top: 12px; line-height: 1.5; } .df-person .contadores { display: flex; gap: 8px; margin-top: 12px; } .df-mini { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--superficie-alta); } .df-mini .num { font-family: var(--display); font-size: 18px; font-weight: 800; display: block; line-height: 1; } .df-mini .lab { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-fraco); } @media (max-width: 900px) { .df-topbar { display: flex; } .df-side { position: fixed; left: 0; top: 0; z-index: 46; width: 82vw; max-width: 300px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 20px 60px rgba(16,16,20,0.28); } .df-app.side-aberta .df-side { transform: translateX(0); } .df-app.side-aberta .df-scrim { display: block; } .df-work { padding: 18px 16px 90px; } .df-rows .df-row { flex-wrap: wrap; } }