/* C&S v4 — tokens e reset. Nada de estilo de seção aqui. */ /* Fontes servidas na própria origem. Subconjunto latin, woff2. font-display:optional impede troca de fonte depois da primeira pintura, que era a causa medida do CLS de 0,21 em /services e 0,32 em /areas. As duas fontes da dobra vão com no . */ @font-face{ font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900; font-display:optional;src:url(../fonts/schibsted-grotesk-var.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; } @font-face{ font-family:'Spectral';font-style:normal;font-weight:300; font-display:optional;src:url(../fonts/spectral-300.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; } @font-face{ font-family:'Spectral';font-style:normal;font-weight:400; font-display:optional;src:url(../fonts/spectral-400.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; } @font-face{ font-family:'Spectral';font-style:italic;font-weight:300; font-display:optional;src:url(../fonts/spectral-300-italic.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; } :root{ --ink:#0a0a0a; --ink-2:#16181a; --ink-3:#1f2326; --paper:#ffffff; --paper-2:#f4f5f6; --paper-3:#e8eaec; --rule:#dcdee0; --rule-dark:#2e3438; --muted:#5c6166; --muted-dark:#98a0a8; --blue:#1979C7; --blue-dark:#4D96DE; --blue-deep:#1466ad; --steel-filter:contrast(1.14) saturate(.96) brightness(.82); --ease-out:cubic-bezier(.16,1,.3,1); /* vocabulário de movimento, fechado. Ver o bloco MOVIMENTO mais abaixo. */ --mov-corte:cubic-bezier(.2,.8,.2,1); --mov-estado:cubic-bezier(.4,0,.2,1); --mov-1:.16s; --mov-2:.38s; --mov-3:.6s; --ease-inout:cubic-bezier(.65,0,.35,1); } /* ============================================================================ ESCALA TIPOGRÁFICA E ESCALA DE TEXTO NO ESCURO ---------------------------------------------------------------------------- Por que este bloco mora aqui e não em assets/d/d.css: d.css é editado por outra frente. Como o carrega core antes de d.css e os links de folha de estilo nascem do template do build, não existe caminho para uma folha posterior. Então a escala vive no arquivo de tokens e vence a folha seguinte por especificidade, com prefixo :root declarado. Nenhum !important novo, exceto onde o próprio d.css já usa !important (Leaflet). O que este bloco resolve, medido antes em 1440x900 e 393x852: fonte mínima de 10px em 53 elementos da home, 25 tamanhos distintos no desktop e contraste mínimo de 4,93:1, que aprova no AA por 0,43 de margem e por isso parece apagado. A casca escura não muda: o que muda é o texto. OITO DEGRAUS. Razão ~1,22 a partir de 17px. Nada abaixo de 12px. ---------------------------------------------------------------------------- */ html:root{ /* micro: rótulo caixa alta, crédito, legenda técnica. Piso da escala. */ --t-mark:.75rem; /* 12px */ /* utilitário: navegação, botão, link de ação, campo de arquivo */ --t-tag:.8125rem; /* 13px */ /* prosa terciária: descrição de cartão, rodapé, nota lateral */ --t-note:.9375rem; /* 15px */ /* corpo */ --t-body:1.0625rem; /* 17px */ /* corpo destacado: abertura, citação, lista de cidade, pergunta */ --t-lead:clamp(1.15rem,1.5vw,1.32rem); /* 18,4 → 21,1px */ /* subtítulo: cartão, chamada do meio, número da nota */ --t-sub:clamp(1.4rem,2.1vw,1.72rem); /* 22,4 → 27,5px */ /* título de seção */ --t-head:clamp(2rem,4.1vw,3.3rem); /* 32 → 52,8px */ /* título de página */ --t-hero:clamp(2.7rem,6.4vw,5rem); /* 43,2 → 80px */ /* ---- escala de texto: quatro degraus, todos com folga sobre o fundo ---- Medido sobre #0b0c0d. O caminho é clarear o texto, nunca o fundo. --d-ink #ece7df 15,91:1 título e corpo primário (#cbc7c0 do d.css) 11,63:1 abertura e citação, degrau já existente --d-ink-2 #bab6ae 9,69:1 corpo secundário, AAA com margem --d-ink-3 #969a9f 6,92:1 rótulo caixa alta de 12px O degrau novo é o ink-2 subindo de 7,88 para 9,69, que abre espaço para o ink-3 sair de 4,93 para 6,92 sem encostar no corpo. */ --d-ink-2:#bab6ae; --d-ink-3:#969a9f; /* ---- hierarquia de superfície ---- A queixa de escuro sem detalhe é falta de degrau entre fundo e cartão. Antes: L* 3,28 → 5,36 → 8,01, com o primeiro salto de 2,08, invisível. Agora: L* 3,28 → 7,55 → 12,54, saltos de 4,27 e 4,99. O filete de 1px carrega mais separação que sombra em fundo escuro, então as duas réguas sobem junto: .14 → .20 e .07 → .11 de opacidade do osso. */ --d-bg-2:#14171a; --d-bg-3:#1d2126; --d-rule:rgba(236,231,223,.20); --d-rule-2:rgba(236,231,223,.11); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--blue-dark);outline-offset:3px} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .steel{filter:var(--steel-filter)} /* --------------------------------------------------------------------------- MOVIMENTO · vocabulário fechado, "precisão de máquina" (15/08/2026) O que havia antes: UMA entrada (fade + translateY 22px, 500ms) aplicada a 85 elementos na home, zero @keyframes, e hover mexendo só em cor. Tecnicamente impecável e expressivamente vazio, num site cujo argumento é velocidade. O vocabulário agora é fechado de propósito. Duas curvas, três durações. Toda peça de movimento do site sai daqui e nada mais entra sem sair outra coisa. --mov-corte curva decisiva, sem volta e sem elástico. É o gesto de ferramenta: começa rápido, para seco. --mov-estado curva de estado, para hover e foco. Não chama atenção. --mov-1 160ms estado frequente (hover, foco). Emil: o que acontece centenas de vezes por sessão não anima, ou anima invisível. --mov-2 380ms entrada de elemento. --mov-3 600ms o que acontece uma vez só na sessão (contagem da nota). HIERARQUIA DE ENTRADA. Antes os 85 elementos entravam iguais, o que é a definição de stagger sem informação. Agora são três níveis, e o nível diz o que a coisa é: .cs-reveal apoio. Só opacidade. Não desloca nada. .cs-reveal--corte título e rótulo de seção. Entra por corte lateral, como chapa saindo da guilhotina. .shot a peça. Entra por máscara que abre de baixo. Escada: só dentro de grupo, nunca item a item ao longo da página. O teto de 6 degraus continua, e 80ms virou 60ms porque a entrada encurtou. --------------------------------------------------------------------------- */ .cs-reveal{transition:opacity var(--mov-2) var(--mov-corte)} html.cs-anim .cs-reveal{opacity:0} html.cs-anim .cs-reveal.is-in{opacity:1} /* NÍVEL 2 DESLIGADO EM 15/08/2026, no mesmo dia em que entrou. Fica aqui escrito para ninguém tentar de novo do mesmo jeito. A ideia era o título entrar por corte lateral (`clip-path:inset(0 100% 0 0)` abrindo para `inset(0 0 0 0)`), como chapa saindo da guilhotina. Ela se autodestrói: o `reveal.js` observa com `threshold: 0.08`, que exige 8% da ÁREA do elemento visível, e o Chrome aplica o clip ao calcular o retângulo de interseção. Elemento cortado tem área ~0, nunca atinge o limiar, nunca recebe `is-in`, e fica cortado para sempre. Medido: 17 títulos invisíveis na home, entre eles "Eight pieces we built." e "What customers say". Só apareciam os que a rede de segurança de 2500ms alcançava acima da dobra. Baixar o corte para 99% não resolve: 1% continua abaixo dos 8%. Para fazer certo, o corte tem que morar num filho, e quem é observado tem que ser o pai sem clip. Isso é mudança de marcação em todo título e não cabia hoje. Enquanto isso o nível 2 se comporta como o nível 1. Bônus: um revisor de tipografia disse no mesmo dia que o corte repetido em toda seção virava maneirismo na quarta. Então o débito é menor do que parece. */ .cs-reveal--corte{transition:opacity var(--mov-2) var(--mov-corte)} /* nível 3: a peça. Máscara que abre de baixo para cima, que é como a chapa aparece quando sobe na mesa. Sem escala e sem deslocamento: foto de produto que cresce no scroll é o clichê que este site não vai ter. */ html.cs-anim .shot.cs-reveal, html.cs-anim .cs-reveal .shot{ clip-path:inset(14% 0 0 0); transition:clip-path var(--mov-2) var(--mov-corte); } html.cs-anim .shot.cs-reveal.is-in, html.cs-anim .cs-reveal.is-in .shot{clip-path:inset(0 0 0 0)} html.cs-anim .cs-reveal[data-delay="1"]{transition-delay:.06s} html.cs-anim .cs-reveal[data-delay="2"]{transition-delay:.12s} html.cs-anim .cs-reveal[data-delay="3"]{transition-delay:.18s} html.cs-anim .cs-reveal[data-delay="4"]{transition-delay:.24s} html.cs-anim .cs-reveal[data-delay="5"]{transition-delay:.30s} html.cs-anim .cs-reveal[data-delay="6"]{transition-delay:.36s} @media (prefers-reduced-motion:reduce){ html.cs-anim .cs-reveal{opacity:1!important;transform:none!important;transition:none!important} *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ============================================================================ APLICAÇÃO DA ESCALA ---------------------------------------------------------------------------- Cada peça do modelo D entra em um dos oito degraus. Família não muda: Spectral onde já era Spectral, Schibsted Grotesk onde já era grotesca. Peso, caixa alta e entreletra ficam como estão, salvo onde o tamanho maior exigiu apertar a entreletra para o rótulo continuar cabendo no celular. O prefixo :root existe só para vencer a folha seguinte; não é decoração. ============================================================================ */ /* --- corpo e títulos ------------------------------------------------------ */ :root body{font-size:var(--t-body);line-height:1.62} /* :root:root porque .phero h1 do d.css tem o mesmo peso de especificidade que :root h1, e empate resolve pela ordem do arquivo, que não está do meu lado. Herói de página interna passa a usar o mesmo degrau do herói da home: era a diferença de 65,6px contra 80px que sozinha custava um degrau da escala. */ :root:root h1,:root:root .phero h1{font-size:var(--t-hero)} :root:root h2{font-size:var(--t-head)} /* --- degrau 1: micro, caixa alta, 12px ------------------------------------ */ :root .lbl{font-size:var(--t-mark);line-height:1.5} :root .pl-n,:root .pl-l{font-size:var(--t-mark);line-height:1.45} :root .cred b{font-size:var(--t-mark)} :root .cred--rate .rate-n,:root .says-rate .rate-n{font-size:var(--t-mark)} :root .hero-foot{font-size:var(--t-mark);line-height:1.85} :root .say cite{font-size:var(--t-mark);line-height:1.5;margin-top:22px} :root .county h3{font-size:var(--t-mark)} :root .crumb ol{font-size:var(--t-mark);line-height:1.6} :root .beat-h{font-size:var(--t-mark);line-height:1.2} :root .card-go{font-size:var(--t-mark);line-height:1.2} :root .f-lbl{font-size:var(--t-mark);line-height:1.2} :root .leaflet-tooltip.pin-say{font-size:var(--t-mark);line-height:1.2} :root .f-file input[type=file]::file-selector-button{font-size:var(--t-mark);line-height:1.2} /* o crédito do mapa nasce com !important dentro do d.css; empatar em !important e vencer por especificidade é o único jeito de tirá-lo dos 10px */ :root .leaflet-control-attribution{font-size:var(--t-mark)!important} /* --- degrau 2: utilitário, 13px ------------------------------------------- */ :root .skip{font-size:var(--t-tag)} :root .lnk{font-size:var(--t-tag)} :root .tel{font-size:var(--t-tag)} :root .send{font-size:var(--t-tag)} :root .lens-btn{font-size:var(--t-tag)} :root .f-file input[type=file]{font-size:var(--t-tag)} /* :root:root porque o d.css desce a navegação para 11px abaixo de 400px. O piso de 12px não abre exceção; quem cede é a entreletra, mais abaixo. */ :root:root .nav a{font-size:var(--t-tag)} /* --- degrau 3: prosa terciária, 15px -------------------------------------- */ :root .pl-s{font-size:var(--t-note);line-height:1.6} :root .card-p{font-size:var(--t-note);line-height:1.62} :root .ftr-col{font-size:var(--t-note);line-height:1.95} :root .ftr .addr{font-size:var(--t-note);line-height:1.6} :root .ftr-brand p{font-size:var(--t-note);line-height:1.6} :root .cover .note{font-size:var(--t-note);line-height:1.65} :root .also-say{font-size:var(--t-note);line-height:1.62} /* --- degrau 4: corpo, 17px ------------------------------------------------ */ :root .chunk p{font-size:var(--t-body);line-height:1.7;margin-top:18px} :root .chunk p+p{margin-top:18px} :root .qa p{font-size:var(--t-body);line-height:1.68;margin-top:14px} :root .creed-p{font-size:var(--t-body);line-height:1.7} :root .cred span,:root .cred a{font-size:var(--t-body)} :root .cred--rate .stars,:root .says-rate .stars{font-size:var(--t-body)} :root form input,:root form textarea{font-size:var(--t-body)} :root .direct{font-size:var(--t-body);line-height:1.8} /* --- degrau 5: corpo destacado, 18,4 → 21,1px ----------------------------- */ :root .lead{font-size:var(--t-lead);line-height:1.62} :root .say p{font-size:var(--t-lead);line-height:1.58} :root .cover-tail{font-size:var(--t-lead);line-height:1.5} :root .beat-p{font-size:var(--t-lead);line-height:1.35} :root .towns li{font-size:var(--t-lead)} :root .cred--rate .rate{font-size:var(--t-lead)} /* a citação do rodapé estava em 13,1px: .ftr-brand p vencia .ftr-say no d.css. Aqui ela volta ao degrau de fala que o desenho pedia. */ :root .ftr-say{font-size:var(--t-lead);line-height:1.45} :root:root .pl-t{font-size:var(--t-lead);line-height:1.35} /* grotesca de instrução: título de bloco na prosa e pergunta do FAQ. Continuam títulos, agora com um degrau real de distância do corpo. */ /* O titulo de bloco usava `--t-lead`, o mesmo degrau da linha de apoio: 21,1px contra 17px de corpo, uma diferenca de 1,24. Titulo que mal cresce sobre filete fino le como coluna de jornal, e foi essa a critica do Jose em 15/08/2026: "parece coluna de blog, nao parece site". O degrau agora e de verdade, e a familia serifada vem do proprio sistema desta casa, a mesma das h1 e h2. Bricolage Grotesque, que e a fonte da Athena, nao entra aqui: o site e do cliente e tem tipografia propria. */ :root:root .chunk h2{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.25} :root:root .qa h3{font-size:var(--t-lead);line-height:1.35} /* --- degrau 6: subtítulo, 22,4 → 27,5px ----------------------------------- */ :root .card-h{font-size:var(--t-sub);line-height:1.2} :root .midcta p{font-size:var(--t-sub);line-height:1.32} :root .says-rate .rate{font-size:var(--t-sub)} :root:root .reel .pl-t{font-size:var(--t-sub)} /* --- degrau 7: título de seção -------------------------------------------- */ :root .creed-say{font-size:var(--t-head)} @media (min-width:1081px){ /* a peça de abertura da lente carrega o degrau de subtítulo. A cadeia do d.css soma cinco classes, então esta precisa somar sete. */ :root:root .hang[data-view="architect"] .plate[data-feat~="architect"] .pl-t, :root:root .hang[data-view="contractor"] .plate[data-feat~="contractor"] .pl-t, :root:root .hang[data-view="kitchen"] .plate[data-feat~="kitchen"] .pl-t{font-size:var(--t-sub)} } /* --- citações escritas com style inline pelo build ------------------------ Doze páginas trazem a citação de review com o tamanho no atributo style, que nasce do gerador de conteúdo. Atributo inline vence qualquer folha, então estes quatro são os únicos !important novos do arquivo. O casamento é pelo valor exato que o build escreve, não por tag solta, para não pegar nenhum outro elemento com style: eram os últimos tamanhos fora da escala, 24px na home, 17,6px nas páginas de cidade e 11px na assinatura da citação. */ :root [style*="font-size:clamp(1.15rem,2vw,1.5rem)"]{font-size:var(--t-sub)!important} :root [style*="font-size:1.1rem"]{font-size:var(--t-lead)!important} :root [style*="font-size:1.08rem"]{font-size:var(--t-lead)!important} :root cite[style]{font-size:var(--t-mark)!important;line-height:1.5!important} /* --- prosa sai do degrau de rótulo ---------------------------------------- */ /* O ink-3 é cor de rótulo caixa alta, não de frase. Duas peças de prosa corrida estavam nele e por isso mediam 4,93:1. Passam para o degrau de corpo secundário, que mede 9,69:1. Nenhuma cor nova entra: são os mesmos tokens. */ :root .card-p{color:var(--d-ink-2)} :root .ftr-brand p{color:var(--d-ink-2)} :root .ftr .addr{color:var(--d-ink-2)} /* o crédito do mapa fica sobre azulejo, então o piso do contraste depende da opacidade da tarja, não só da cor do texto */ :root .leaflet-control-attribution{background:rgba(11,12,13,.92)!important} /* --- ritmo vertical depois do aumento ------------------------------------- */ /* texto maior com o mesmo respiro fica pior, não melhor. Só os blocos onde a distância entre peças foi calculada contra o corpo de 16px. */ :root .card{gap:12px} :root .beat{gap:14px} :root .cover .note{padding-bottom:8px} /* --- entreletra no celular ------------------------------------------------ O rótulo caixa alta subiu de 10px para 12px e ficou 20% mais largo. Abaixo de 600px a entreletra cede o que o corpo ganhou, para a linha continuar cabendo sem rolagem horizontal. Nenhuma dessas peças perde legibilidade: caixa alta com .16em ainda é caixa alta espaçada. */ @media (max-width:600px){ :root .lbl{letter-spacing:.16em} :root .hero-foot{letter-spacing:.15em} :root .pl-n,:root .pl-l{letter-spacing:.17em} :root .cred b,:root .cred--rate .rate-n,:root .says-rate .rate-n{letter-spacing:.16em} :root .f-lbl{letter-spacing:.16em} :root .crumb ol{letter-spacing:.12em} } @media (max-width:400px){ /* o d.css apertava a navegação baixando a fonte para 11px. Mesma folga, tirada da entreletra, com o corpo intacto em 13px. */ :root:root .nav a{letter-spacing:.06em} :root .lens-btn{letter-spacing:.08em} }