/* GERADO POR scripts/build-css.mjs — NÃO EDITE ESTE ARQUIVO. Edite fonts.css, tokens.css, base.css, components.css, sections.css e o pacote é refeito no build. As url() continuam relativas a /css/, então ../assets/ segue resolvendo. */ /* ===== fonts.css ===== */ /* ========================================================================== fonts.css — DM Sans e DM Mono servidas pelo próprio domínio. Por que não o CDN do Google: o elemento de LCP desta página é o

, ou seja, o LCP espera a fonte. Pelo CDN isso custava três idas à rede em série antes do primeiro byte de fonte — DNS/TLS de fonts.googleapis.com, o CSS, e só então DNS/TLS de fonts.gstatic.com e o woff2. Servidas daqui, elas saem na mesma conexão do HTML, e as duas faces do primeiro paint entram em no . Bônus: um terceiro a menos vendo o IP de quem visita, o que ajuda no capítulo de LGPD da política de privacidade. Os blocos abaixo são os que o próprio Google serve (mesmos unicode-range, mesmo font-display: swap) — só a URL mudou. DM Sans e DM Mono são SIL Open Font License 1.1, que permite hospedar e redistribuir. Para atualizar: baixe de novo do css2 e troque os arquivos em assets/fonts. ========================================================================== */ /* latin-ext */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/dm-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/dm-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/dm-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/dm-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/dm-sans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/dm-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/dm-sans-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/dm-sans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/dm-sans-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/dm-sans-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== tokens.css ===== */ /* ========================================================================== tokens.css — variáveis da marca @dregermkt v2 — creme e preto. Fonte da verdade: DESIGN.md §10 (base), §2.2 (paleta), §3.2 (tipografia), §4 (grid/espaço/raio), §7 (movimento) e §13 (adições). NENHUM valor visual fora do DESIGN.md. Não existe cor de acento. ========================================================================== */ :root { /* --- Creme: fundo dominante (DESIGN.md §2.2) ------------------------- */ --paper-100: #FCF9EF; --paper-200: #F4EFE0; --paper-300: #E7E1CE; /* --- Preto: texto sobre creme e fundo dos blocos invertidos ---------- */ --ink-900: #0B0B0B; --ink-800: #161615; --ink-700: #242422; /* --- Texto sobre creme ----------------------------------------------- */ --graphite: #3B3B38; --muted: #6E6C64; --muted-dim: #97948A; /* --- Texto dentro do bloco preto (o creme inverte de papel) ---------- */ --paper-on-dark: #DBD6C6; --dim-on-dark: #8B877C; /* --- Linhas ----------------------------------------------------------- */ --line-dark: rgba(11, 11, 11, .14); --line-dark-strong: rgba(11, 11, 11, .28); --line-light: rgba(252, 249, 239, .16); /* --- Funcional: só mensagem de erro de formulário -------------------- */ --danger: #B3261E; /* --- Acento ciano (DESIGN.md §13) ------------------------------------- A única exceção à regra de duas cores. REGRA QUE MANDA (§13.1): #5FE0F0 sobre creme dá ~1,4:1 — reprova qualquer texto, e é ainda mais severa que o âmbar que veio antes. Sobre creme, ciano só existe como PREENCHIMENTO com texto --ink-900 por cima, ou como borda/filete. Para texto ciano sobre creme, use --cyan-ink. Dentro de bloco preto, --cyan-500 em texto é permitido (~11:1) e fica ótimo. */ --cyan-500: #5FE0F0; /* o acento. Preenchimento sobre creme, texto sobre preto */ --cyan-600: #3FC9DB; /* hover e pressed */ --cyan-ink: #0B6C7A; /* a única forma de ciano em texto sobre creme */ /* aresta do destaque de card (DESIGN.md §13.2 item 3) — trocada por contexto: preta em card claro, ciano em card escuro */ --edge: var(--ink-900); /* --- Tipografia (DESIGN.md §3) ---------------------------------------- */ --font-display: 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace; --fs-display: clamp(2.25rem, 10.5vw, 8rem); /* min menor que 11vw@360, senão trava e corta */ --fs-h1: clamp(2.25rem, 7vw, 5rem); --fs-h2: clamp(1.85rem, 5vw, 3.25rem); --fs-h3: clamp(1.25rem, 2.6vw, 1.75rem); --fs-lg: clamp(1.05rem, 2vw, 1.3rem); --fs-body: clamp(1rem, 1.5vw, 1.0625rem); --fs-sm: 0.875rem; --fs-eyebrow: 0.75rem; /* --- Espaço (DESIGN.md §4.3) ------------------------------------------ */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 10rem; /* padding vertical de seção — valor literal do DESIGN.md §4.3. Fundo claro pede mais respiro que fundo escuro. */ --sec-pad: clamp(5rem, 13vw, 11rem); /* --- Container e grid (DESIGN.md §4.1) -------------------------------- */ --container: 1200px; --container-wide: 1440px; --gutter: clamp(1.25rem, 5vw, 3rem); /* --- Raio (DESIGN.md §4.4) -------------------------------------------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* --- Movimento (DESIGN.md §7) ----------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, .05, .36, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 620ms; /* --- Camadas (DESIGN.md §13) ------------------------------------------ */ --z-base: 1; --z-nav: 80; --z-fab: 90; --z-modal: 100; /* --- Altura da navbar (DESIGN.md §6: 64px, encolhe para 56px) --------- */ --nav-h: 64px; /* --- Área segura do aparelho ------------------------------------------ O tem `viewport-fit=cover`: a página é desenhada de ponta a ponta da tela, inclusive DEBAIXO da barra de status e do indicador de home. Quem tem a barra de endereço em cima (Safari e Chrome no iPhone) nunca sente isso, porque a própria barra do navegador ocupa a faixa do notch e sobra zero. Já o Brave no iPhone põe a barra de endereço EMBAIXO por padrão: o topo da página vai para debaixo do relógio, e aí qualquer coisa fixada a 12px do topo nasce escondida atrás da barra de status. Estes dois valores são a folga que o aparelho pede. O fallback 0px vale para todo mundo que não tem notch — desktop incluso, onde somam nada. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ===== base.css ===== */ /* ========================================================================== base.css — reset, tipografia e primitivas de layout Mobile-first: tudo aqui é escrito para 360–430px. ========================================================================== */ /* --- Reset enxuto ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* o scroll suave é do Lenis, não do browser */ } body { min-height: 100svh; background: var(--paper-100); color: var(--graphite); font-family: var(--font-display); font-size: var(--fs-body); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* trava de scroll enquanto um modal está aberto */ body.is-locked { overflow: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } /* --- Foco visível (DESIGN.md §2.4) ------------------------------------- */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } /* pula para o conteúdo — acessibilidade de teclado */ .skip-link { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: calc(var(--z-modal) + 1); padding: var(--sp-3) var(--sp-4); background: var(--ink-900); color: var(--paper-100); border-radius: var(--r-pill); font-weight: 500; transform: translateY(-160%); } .skip-link:focus-visible { transform: translateY(0); } /* --- Tipografia (DESIGN.md §3.3) --------------------------------------- */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: var(--ink-900); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.2; } p { max-width: 62ch; } strong { font-weight: 500; } ::selection { background: var(--ink-900); color: var(--paper-100); } /* --- Primitivas de layout ---------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } .section { position: relative; padding-block: var(--sec-pad); } .section--alt { background: var(--paper-200); } /* bloco invertido — é ele que faz as vezes de cor de destaque (DESIGN.md §2.1) */ .section--dark { background: var(--ink-900); color: var(--paper-on-dark); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--paper-100); } .section--dark .eyebrow { color: var(--dim-on-dark); } .section--dark .section__head p { color: var(--dim-on-dark); } /* cabeçalho de seção: eyebrow + h2 + lead */ .section__head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-7); } .section__head p { color: var(--muted); } /* linha de apoio abaixo do divisor de seção (DESIGN.md §12.5) */ .section__intro { margin-bottom: var(--sp-7); font-size: var(--fs-lg); color: var(--graphite); max-width: 46ch; } .section--dark .section__intro { color: var(--paper-on-dark); } /* --- Eyebrow com traço (DESIGN.md §12.1) ------------------------------- */ .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .eyebrow::before { content: ''; width: 24px; height: 2px; background: currentColor; flex: none; } /* --- Marca-texto do título (DESIGN.md §12.2 + §13.2) ------------------- CIANO 2: traço de marca-texto, como caneta em papel. A cor cobre só a parte de baixo da linha e o texto continua preto por cima — por isso passa no contraste, ao contrário de texto ciano sobre creme (1,4:1). Máximo UMA marcação por título. Gradiente em texto é proibido (§11). box-decoration-break: clone é obrigatório: sem ele o traço quebra errado ao passar para a segunda linha no mobile. */ .mark { background-image: linear-gradient(var(--cyan-500), var(--cyan-500)); background-repeat: no-repeat; background-size: 100% .62em; background-position: 0 88%; color: var(--ink-900); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Dentro de bloco preto o traço vira preenchimento cheio. Motivo: com o traço parcial, a parte da letra que fica ACIMA da faixa ciano cairia sobre o fundo preto — texto --ink-900 sumiria ali, e texto --paper-100 sobre a faixa ciano dá 1,2:1. Cobrindo a linha inteira, o --ink-900 fica legível do topo à base (~11:1). */ .section--dark .mark { background-size: 100% 100%; background-position: 0 0; color: var(--ink-900); } /* --- Divisor de seção com rótulo (DESIGN.md §12.5) --------------------- */ .divider { display: flex; align-items: center; gap: 20px; margin-bottom: var(--sp-6); } .divider > :first-child { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); flex: none; } .divider::after { content: ''; height: 1px; background: var(--line-dark); flex: 1; } .section--dark .divider > :first-child { color: var(--dim-on-dark); } .section--dark .divider::after { background: var(--line-light); } /* --- Pill outline em mono (DESIGN.md §12.3) ---------------------------- */ /* Não é clicável. Se precisar ser, vira botão secundário. */ .pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-dark-strong); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; line-height: 1; color: var(--graphite); } .section--dark .pill { border-color: var(--line-light); color: var(--paper-on-dark); } /* --- Mono utilitário ---------------------------------------------------- */ .mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .04em; } /* --muted-dim reprova AA sobre creme (2.9:1); no bloco preto o par é outro */ .mono-dim { color: var(--muted); } .section--dark .mono-dim, .navmenu .mono-dim { color: var(--dim-on-dark); } /* --- Placeholder de imagem ainda inexistente (assets/ASSETS.md §5) ------ */ .ph { position: relative; width: 100%; background: var(--paper-300); border: 1px solid var(--line-dark); border-radius: var(--r-md); overflow: hidden; } .ph::after { content: attr(data-label); position: absolute; inset: auto var(--sp-3) var(--sp-3) var(--sp-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* --- Grão sobre a hero e seções escuras (assets/ASSETS.md §1) ---------- */ .noise { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: url('../assets/svg/noise.svg'); background-size: 300px 300px; mix-blend-mode: multiply; opacity: .05; } /* --- Fundo de grid ------------------------------------------------------ */ .gridbg { position: absolute; inset: -10% 0 -10% 0; background-image: url('../assets/svg/grid-pattern.svg'); background-size: 80px 80px; opacity: .5; pointer-events: none; } /* --- Estado inicial dos reveals (JS remove ao animar) ------------------- */ .js .reveal { opacity: 0; } /* o padding dá espaço para o acento de maiúscula (Ê, Ã); a margem negativa devolve a posição original, então a máscara continua colada na linha */ .js .line-mask { overflow: hidden; padding-top: .2em; margin-top: -.2em; } .js .line-mask > span { display: block; } /* --- Ícone do sprite ---------------------------------------------------- */ .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .icon--lg { width: 28px; height: 28px; } /* ========================================================================== Breakpoints (só sobem a partir daqui — DESIGN.md §4.2) ========================================================================== */ @media (min-width: 640px) { .section__head { max-width: 46rem; } } @media (min-width: 1024px) { .section__head { margin-bottom: var(--sp-8); } } /* ========================================================================== prefers-reduced-motion (DESIGN.md §7) — desliga tudo que se mexe ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; } } /* ===== components.css ===== */ /* ========================================================================== components.css — componentes reutilizáveis (DESIGN.md §5 e §6) Mobile-first: base para 360–430px, breakpoints só para cima. ========================================================================== */ /* ========================================================================== 1. Superfícies (DESIGN.md §5) Não existe mais .glass no projeto: backdrop-filter sobre creme virava borrão acinzentado, e dentro do bloco preto o especular não pagava o custo. Sobre creme use .paper; dentro do bloco preto, .surface-dark. ========================================================================== */ /* --- superfície dentro do bloco preto ---------------------------------- */ .surface-dark { position: relative; background: var(--ink-800); border: 1px solid var(--line-light); border-radius: var(--r-lg); } /* --- .paper: o oposto do glass (DESIGN.md §5.2) ------------------------ */ .paper { position: relative; background: var(--paper-200); border: 1px solid var(--line-dark); border-radius: var(--r-lg); box-shadow: 0 1px 0 var(--line-dark); /* linha, não sombra */ } /* --- Salto no hover (DESIGN.md §12.8) ---------------------------------- Interação padrão de card: é resposta a uma ação do usuário, não movimento ambiente. Sobre creme a sombra é preta suave; dentro de bloco preto ela não aparece, então entra um filete ciano para o card se destacar. */ .card-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card-lift:hover, .card-lift:focus-within { transform: translateY(-8px); box-shadow: 0 24px 40px -18px rgba(11, 11, 11, .30); } .card-lift--dark:hover, .card-lift--dark:focus-within { box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .6), 0 0 0 1px var(--cyan-500); } /* --- Destaque de aresta (DESIGN.md §13.2) ------------------------------ Sombra dura deslocada, sem blur. Coexiste com o salto nos cards de serviço e no de atendimento. Nunca no marquee de portfólio (item 2). */ .card { --edge: var(--ink-900); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card:hover, .card:focus-within { transform: translateY(-8px); box-shadow: 6px 6px 0 var(--edge); } /* aresta + salto na mesma sombra: as duas camadas convivem sem uma apagar a outra na cascata (item 10). Vale para card de servico e de atendimento. */ .card.card-lift:hover, .card.card-lift:focus-within { box-shadow: 6px 6px 0 var(--edge), 0 24px 40px -18px rgba(11, 11, 11, .30); } .card.card-lift--dark:hover, .card.card-lift--dark:focus-within { box-shadow: 6px 6px 0 var(--edge), 0 24px 40px -18px rgba(0, 0, 0, .6), 0 0 0 1px var(--cyan-500); } .card--cyan { --edge: var(--cyan-500); } /* ========================================================================== 2. Botões (DESIGN.md §6) ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; /* alvo de toque ≥ 44px — DESIGN.md §9 */ padding: var(--sp-4) 28px; border-radius: var(--r-pill); font-size: var(--fs-body); font-weight: 500; letter-spacing: -.01em; text-align: center; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .btn .icon { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); } .btn:hover .icon { transform: translateX(4px); } /* CIANO 1 (DESIGN.md §13.2) — botão primário sobre creme. Preenchimento ciano com texto --ink-900 por cima (~11:1). É o principal motivo de o acento existir. Dentro do bloco preto ele volta a ser creme: ciano ali competiria com o rótulo/CTA do card invertido. */ .btn--primary { background: var(--cyan-500); color: var(--ink-900); } .btn--primary:hover { background: var(--cyan-600); transform: translateY(-2px); } .btn--primary:active { background: var(--cyan-600); transform: translateY(0); } .section--dark .btn--primary, .navmenu .btn--primary, .nav.is-over-dark .btn--primary { background: var(--paper-100); color: var(--ink-900); } .section--dark .btn--primary:hover, .navmenu .btn--primary:hover, .nav.is-over-dark .btn--primary:hover { background: var(--paper-200); } /* CIANO 1b (DESIGN.md §13.2) — o CTA final é o ponto mais brilhante da página. Sobre o bloco preto o ciano tem contraste de sobra (~11:1) e nenhum outro elemento ciano divide a dobra com ele. */ .cta .btn--primary { background: var(--cyan-500); color: var(--ink-900); } .cta .btn--primary:hover { background: var(--cyan-600); } .btn--lg { min-height: 60px; padding: var(--sp-5) var(--sp-7); font-size: var(--fs-lg); } /* secundário: só borda, na cor do contexto. No hover preenche e inverte. */ .btn--ghost { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: var(--r-pill); } .btn--ghost:hover { background: var(--ink-900); color: var(--paper-100); } .section--dark .btn--ghost:hover, .navmenu .btn--ghost:hover { background: var(--paper-100); color: var(--ink-900); } /* mobile: CTA único da dobra ocupa a largura toda (DESIGN.md §6) */ .btn--block { width: 100%; } @media (min-width: 640px) { .btn--block { width: auto; } } /* ========================================================================== 3. Navbar (DESIGN.md §6) ========================================================================== */ .nav { position: fixed; /* --safe-top, e não zero: com viewport-fit=cover o topo do viewport fica DEBAIXO da barra de status em quem põe a barra de endereço embaixo (o Brave no iPhone faz isso por padrão). Sem esta folga a navbar nasce atrás do relógio: some, ou aparece colada no topo cortada pela metade. */ inset: calc(var(--safe-top) + var(--sp-3)) var(--gutter) auto; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: var(--nav-h); padding-inline: var(--sp-4); border-radius: var(--r-pill); transition: height var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* após 80px de scroll: encolhe para 56px */ .nav.is-scrolled { --nav-h: 56px; } /* ao entrar num bloco preto a navbar inverte (ScrollTrigger em js/animations.js) */ .nav.is-over-dark { background: var(--ink-900); border-color: var(--line-light); color: var(--paper-100); } .nav.is-over-dark .nav__links a { color: var(--dim-on-dark); } .nav.is-over-dark .nav__links a:hover { color: var(--paper-100); } /* item 1: o wordmark era a única área do header cuja altura não vinha do conteúdo. min-height + align-items:baseline empurravam o texto para o topo da caixa e o tiravam do eixo das âncoras. Agora a altura vem de padding simétrico, então o inteiro centraliza junto com os irmãos. Herda currentColor, então inverte sozinho sobre bloco preto. */ .nav__logo { display: inline-flex; align-items: baseline; gap: .18em; margin: 0; padding-block: 13px; /* 19px de texto + 26px = 45px de alvo de toque */ color: inherit; font-size: 19px; /* mobile */ line-height: 1; letter-spacing: -.02em; white-space: nowrap; } .nav__word { font-weight: 700; } /* item 1: medido no browser, `align-items: baseline` já assenta DM Mono e DM Sans exatamente na MESMA baseline (51px / 51px em 1280x800). O nudge de -1px que existia aqui era o que tirava o `mkt` do eixo — saiu. O `position: relative` fica, sem deslocamento, só como ponto de ajuste. */ .nav__word-mono { position: relative; top: 0; font-family: var(--font-mono); font-weight: 500; /* Medido: --graphite a .6 sobre --paper-200 dá 3,3:1, e este texto tem 22px em peso 500 — abaixo do limite de "texto grande", então o piso é 4,5:1. .73 é onde ele passa; .75 deixa margem para o antialiasing. O tom continua secundário em relação a "dreger", que é o que o desenho pede. */ opacity: .75; } .nav__links { display: none; } .nav__cta { display: none; } .nav__actions { display: flex; align-items: center; gap: var(--sp-2); } /* item 5: o CTA nunca estica na altura do header. Quem encolhe no scroll é o padding do header; o botão mantém o padding interno e só reduz a fonte, com no mínimo 8px de folga acima e abaixo. */ .nav .btn { align-self: center; height: auto; min-height: 44px; /* alvo de toque — DESIGN.md §9 */ padding-block: 11px; padding-inline: var(--sp-5); font-size: var(--fs-sm); line-height: 1.1; transition: padding var(--dur-base) var(--ease-out), font-size var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .nav.is-scrolled .btn { min-height: 40px; /* header de 56px: 44 não caberia com folga */ padding-block: 9px; font-size: 13px; } /* botão hambúrguer */ .nav__burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: inherit; } .nav__burger span { display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear; } .nav__burger span + span { margin-top: 5px; } .nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* menu fullscreen mobile — abre com clipPath circular a partir do botão */ .navmenu { position: fixed; inset: 0; /* acima do botão flutuante, senão o WhatsApp fica por cima do menu */ z-index: calc(var(--z-fab) + 1); height: 100dvh; /* dvh, não vh: a barra do iOS come o vh */ overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-2); padding: calc(var(--sp-8) + var(--safe-top)) var(--gutter) calc(var(--sp-7) + var(--safe-bottom)); border-radius: 0; background: var(--ink-900); color: var(--paper-on-dark); visibility: hidden; clip-path: circle(0% at var(--cx, 88%) var(--cy, 40px)); } /* fechar: fica colado no topo do painel enquanto a lista rola */ .navmenu__close { position: sticky; top: 0; align-self: flex-end; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--line-light); background: var(--ink-900); color: var(--paper-100); z-index: 2; } .navmenu__close:hover { background: var(--ink-700); } .navmenu[data-open='true'] { visibility: visible; } /* menor que antes: com 5 âncoras + CTA + linha de contato, o tamanho anterior estourava a tela em 360x800 e cortava os últimos itens */ .navmenu__link { font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--paper-100); padding-block: var(--sp-3); /* alvo de toque ≥ 44px */ min-height: 44px; display: flex; align-items: center; } .navmenu__link:hover { text-decoration: underline; text-underline-offset: 6px; } .navmenu__meta { margin-top: auto; padding-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); } @media (min-width: 1024px) { .nav { padding-inline: var(--sp-5); } .nav__logo { font-size: 22px; } .nav__links { display: flex; align-items: center; gap: var(--sp-5); } .nav__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* alvo de toque — DESIGN.md §9 */ min-width: 44px; /* “FAQ” e “Sobre” são curtos demais sem isto */ font-size: var(--fs-sm); color: var(--muted); transition: color var(--dur-fast) var(--ease-out); } .nav__links a:hover { color: var(--ink-900); } .nav__cta { display: inline-flex; } .nav__burger { display: none; } .navmenu { display: none; } } /* ========================================================================== 4. Card de pilar (DESIGN.md §6) ========================================================================== */ .pillar { padding: var(--sp-6); transform-style: preserve-3d; /* precisa listar transform: esta regra vem depois de .card-lift no arquivo e, sem o transform aqui, o salto do item 10 acontecia sem easing. */ transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .pillar__icon { color: var(--paper-100); margin-bottom: var(--sp-5); } .pillar h3 { margin-bottom: var(--sp-3); color: var(--paper-100); } .pillar p { color: var(--paper-on-dark); } /* ========================================================================== 5. Card de serviço (DESIGN.md §6) ========================================================================== */ /* rótulo mono → título em caps → descrição → CTA colado na base. Todos os cards do grid com a mesma altura. */ .service { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); text-align: left; width: 100%; height: 100%; color: inherit; } .service__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); } .service__thumb { aspect-ratio: 1 / 1; /* as imagens de serviço são quadradas (1200x1200) */ border-radius: var(--r-md); overflow: hidden; background: var(--paper-300); } .service__thumb img { width: 100%; height: 100%; object-fit: cover; } .service__thumb.ph { border-radius: var(--r-md); } .service h3 { text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; } .service p { color: var(--graphite); font-size: var(--fs-sm); } .service__more { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line-dark); width: 100%; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-900); } .service__more .icon { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .service:hover .service__more .icon { transform: translateX(4px); } } /* UM card invertido por grid — o serviço principal (DESIGN.md §12.6) */ .service--invert { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-on-dark); box-shadow: 0 1px 0 var(--line-dark); } .service--invert h3 { color: var(--paper-100); } .service--invert p { color: var(--paper-on-dark); } .service--invert .service__thumb { background: var(--ink-700); } /* CIANO 4 (DESIGN.md §13.2) — rótulo e CTA do card invertido. Texto ciano só é permitido porque o fundo aqui é preto (~10:1). */ .service--invert .service__label { color: var(--cyan-500); } .service--invert .service__more { color: var(--cyan-500); border-top-color: var(--line-light); } /* ========================================================================== 6. Modal (DESIGN.md §6 · acessibilidade §9) ========================================================================== */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: end center; visibility: hidden; } .modal[data-open='true'] { visibility: visible; } .modal__backdrop { position: absolute; inset: 0; background: rgba(11, 11, 11, .55); opacity: 0; } .modal__card { position: relative; display: flex; /* cabeçalho fixo · corpo rolável · CTA fixo */ flex-direction: column; width: 100%; max-width: 720px; max-height: min(88dvh, 900px); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--paper-100); border: 1px solid var(--line-dark-strong); opacity: 0; overflow: hidden; /* o scroll é do .modal__body, não do card */ } /* --- banner (item 4): UMA imagem no topo, largura total do painel ------- Fica fora da área rolável, junto do cabeçalho. No mobile ganha um teto de altura para não comer a tela toda; o object-fit: cover corta em vez de deformar. Vazio (modais de projeto) ele some por completo. */ .modal__banner { flex: none; /* `width: 100%` é obrigatório junto do max-height abaixo. Com aspect-ratio e largura automática, quando o max-height corta a altura o CSS preserva a proporção ENCOLHENDO A LARGURA — a imagem ficava estreita e sobrava uma faixa do fundo à direita. Com a largura fixada, a proporção cede e o object-fit: cover faz o corte, que é o comportamento desejado. */ width: 100%; aspect-ratio: 16 / 9; /* teto de altura: em painel largo o 16/9 puro comia quase toda a altura útil do card e sobrava um corpo rolável de ~30px. O object-fit: cover corta em vez de deformar. */ max-height: min(30dvh, 260px); overflow: hidden; background: var(--paper-300); border-radius: var(--r-lg) var(--r-lg) 0 0; } .modal__banner:empty { display: none; } .modal__banner img { width: 100%; height: 100%; object-fit: cover; } /* --- cabeçalho fixo ---------------------------------------------------- */ .modal__head { flex: none; position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line-dark); } .modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--paper-300); border: 1px solid var(--line-dark); color: var(--ink-900); z-index: 2; } .modal__close:hover { background: var(--ink-900); color: var(--paper-100); } .modal__eyebrow { margin-bottom: var(--sp-3); } .modal__title { padding-right: 52px; font-size: var(--fs-h3); } /* --- corpo rolável ----------------------------------------------------- */ /* item 3: ÚNICO elemento rolável do modal. O `data-lenis-prevent` no HTML tira o Lenis do caminho da roda do mouse - sem ele o `lenis.stop()` comia o evento antes de chegar aqui e o painel não rolava. */ .modal__body { flex: 1 1 auto; min-height: 0; /* sem isto o flex não deixa o filho rolar */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: var(--sp-5); } /* --- CTA fixo ---------------------------------------------------------- */ .modal__foot { flex: none; padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + var(--safe-bottom)); border-top: 1px solid var(--line-dark); background: var(--paper-100); } .modal__lead { color: var(--muted); margin-bottom: var(--sp-5); } /* --- galeria ------------------------------------------------------------ Com uma imagem só ela ocupa a largura toda; com duas ou mais vira faixa com scroll horizontal e snap. Altura sempre por aspect-ratio, nunca livre — senão o card cresce sem limite. */ .modal__gallery { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); } .modal__gallery:empty { display: none; margin: 0; } .modal__gallery > * { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-dark); background: var(--paper-300); aspect-ratio: 16 / 10; /* padrão; as variantes abaixo sobrescrevem */ } .modal__gallery img, .modal__gallery video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; /* o raio também na mídia: o clip do pai pode se perder enquanto o card do modal escala na abertura, e aí o canto voltava a ser vivo */ border-radius: inherit; } /* Modal de projeto: a gravação do celular, sozinha e centralizada. Peça vertical (9/16) em largura total viraria uma coluna de ~1280px de altura, então ela é limitada pela ALTURA e a largura vem do aspect-ratio. */ .modal__gallery--phone { justify-items: center; } .modal__gallery--phone > * { aspect-ratio: 9 / 16; height: min(46dvh, 420px); width: auto; max-width: 100%; } .modal__gallery--phone video, .modal__gallery--phone img { object-position: top center; } /* proporções fixas — valem para ,
  • . O que sobra aqui é só o que muda por a pill ser e não
  • . */ .erro__links a.pill { min-height: 44px; /* alvo de toque (DESIGN.md §9) */ text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .erro__links a.pill:hover { border-color: var(--ink-900); color: var(--ink-900); } /* ========================================================================== PÁGINAS LEGAIS (politica-de-privacidade.html) Texto corrido é o oposto do resto do site, que é feito de blocos. Aqui o que manda é a leitura: uma coluna estreita, entrelinha maior e hierarquia clara. Nenhum token novo — só a composição muda. ========================================================================== */ /* Primeira seção da página. A navbar é fixa, e a home só não sofre com isso porque a .hero tem padding-top próprio (--nav-h + --sp-10). Numa .section comum sobra só o --sec-pad, que no celular cai para 5rem — menos que a altura da navbar, e o texto encosta nela. */ .section--topo { padding-top: calc(var(--safe-top) + var(--nav-h) + var(--sec-pad)); } .legal { /* ~68 caracteres por linha: acima disso o olho perde a volta da linha, e uma política é justamente o texto que ninguém quer reler. */ max-width: 68ch; } .legal__meta { margin-bottom: var(--sp-7); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line-dark); } .legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-8); margin-bottom: var(--sp-4); } /* o primeiro h2 já vem depois do bloco de meta, que tem a linha e o respiro */ .legal h2:first-of-type { margin-top: 0; } .legal h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); margin-bottom: var(--sp-3); } .legal p, .legal li { color: var(--graphite); line-height: 1.75; /* mais que o 1.65 do corpo: bloco longo pede mais ar */ } .legal p { margin-bottom: var(--sp-4); } .legal ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); list-style: disc; } .legal li { margin-bottom: var(--sp-2); } .legal a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .legal a:hover { text-decoration-thickness: 2px; } /* Destaque para o que o leitor mais procura numa política: o canal para exercer os direitos. Bloco claro, sem cor nova — o mesmo papel dos cards. */ .legal__box { margin: var(--sp-6) 0; padding: var(--sp-5); border: 1px solid var(--line-dark); border-radius: var(--r-md); background: var(--paper-200); } .legal__box p:last-child { margin-bottom: 0; }