/* * Modelo "alto padrão" — FASE 1: reset próprio, tokens e esqueleto. * * Esta folha é a ÚNICA do modelo: ela não carrega o `estilo.css` de 2016 (5.886 linhas de float * e altura fixa), nem o `temas.css` que repinta aquele markup por cima, nem o font-awesome * (26 KB de CSS + 141 KB de fonte). Começar do zero é o que permite a folha inteira ficar dentro * da meta de 60 KB. * * A Fase 2 traz o desenho: escala tipográfica, as fontes próprias (Newsreader / Instrument Sans / * IBM Plex Mono em woff2 variável), a escala de cor calculada em OKLab a partir da marca da conta * e os componentes desenhados. O que está aqui é o mínimo para o modelo responder de pé. * * Multi-tenant: nenhuma cor de marca aparece escrita. Tudo sai de `--primary`/`--secondary`, que o * Layout põe no `` a partir da conta. Uma imobiliária com marca amarela não pode receber * texto branco sobre amarelo — a decisão por luminância entra na Fase 2. */ /* A ordem manda mais que a especificidade: `paginas` vem depois de `componentes` porque repinta marcação herdada, e `utilidades` no fim para poder vencer as duas. */ @layer reset, tokens, base, componentes, paginas, utilidades; /* ------------------------------------------------------------------ reset */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } fieldset { margin: 0; padding: 0; border: 0; } legend { padding: 0; } /* Quem pediu menos movimento recebe menos movimento — não é opcional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ----------------------------------------------------------------- tokens */ @layer tokens { :root { /* Cor da marca: a ESCALA vem calculada da conta (EscalaDeCor, em OKLab), injetada no como --ap-marca-50..950 + as decisões derivadas. Os fallbacks abaixo são o vermelho da Vini, para a folha nunca ficar sem cor se a API não mandar a escala. `--ap-marca-fundo` é o preenchimento de botão (primeiro degrau que passa AA com a tinta escolhida) e `--ap-marca-texto` é o degrau para texto em corpo — que NÃO é o mesmo: o 600 do vermelho da Vini passa o WCAG (5,21) e fica um ponto abaixo de confortável para ler, então o texto usa o 700. Ver docs/site-novo/DECISOES_DESIGN.md. */ --ap-marca: var(--ap-marca-600, var(--primary, #dc1921)); --ap-marca-escura: var(--ap-marca-700, var(--secondary, #ba1319)); --ap-marca-fundo: var(--ap-marca-600, #d50619); --ap-marca-tinta: #fff; /* tinta sobre o preenchimento, escolhida por medição */ --ap-marca-texto: var(--ap-marca-700, #ad0011); --ap-marca-fraca: var(--ap-marca-100, #ffe4e0); --ap-marca-fio: var(--ap-marca-200, #ffc6bf); /* Papel e tinta quentes, em H = 75 (OKLCH). A geometria decidiu, não o gosto: o vermelho da marca está em H = 26,9°, e um neutro a H = 35 fica a 8° dele — sairia rosado, lendo como tinta desbotada da marca. Um cinza a H = 250 fica a 43° do complemento exato, que é onde o contraste simultâneo maximiza tensão: vibra ao lado de tijolo. H = 60–80 é longe dos dois. E croma 0 não serve: é a única cor que NÃO pode existir numa fotografia, então lê como chrome de sistema; pior, ao lado de céu e mar ele deriva perceptualmente para o quente-amarelado SEM ninguém ter escolhido — e derivar sem intenção é o que se lê como encardido. Croma pequeno e deliberado faz a família ler como estável. */ --ap-papel: #fdfaf6; --ap-papel-2: #f3efed; --ap-tinta: #211c18; /* Piso de leitura MEDIDO: o cinza de legenda a #76706C passa o WCAG AA (4,66) e reprova o limiar de leitura confortável (Lc 70,7 < 75). É a armadilha do "cinza discreto" para m², referência e condomínio. Nada que o cliente precise ler desce abaixo deste valor. */ --ap-tinta-fraca: #5c5753; /* DUAS linhas, de propósito. A decorativa separa bloco e pode ser sutil; a de campo é o LIMITE DE UM COMPONENTE DE INTERFACE e o WCAG 1.4.11 exige 3:1 contra o fundo — abaixo disso a pessoa não vê onde o campo começa. `#e3dfdc` dá 1,27 sobre o papel; `#968d86` dá 3,12. Medido por scripts/verificar-contraste.mjs, que falha o processo se cair. */ --ap-linha: #e6e4e0; --ap-linha-campo: #968d86; /* Topo cinemático escuro, na mesma temperatura do corpo (quente). Medido: branco por cima dá Lc -107 e 18,8:1 — os três candidatos de temperatura empatam na medida, então a escolha é de coerência com o papel. */ --ap-escuro: #16100c; --ap-escuro-tinta: #f7f5f3; /* Scrim: degradê sobre a foto para o texto ter contraste garantido. É contraste tipográfico, não tratamento de imagem — `filter: saturate()/contrast()` na foto lê como 2017 e some do arquivo o que deveria estar nele (medido: nos três sites de referência o `filter` computado de TODA imagem é `none`). */ /* MEDIDO 24/09/2026: o gradiente estava de cabeça para baixo. Ele escurecia o RODAPÉ da foto (0,92 embaixo, 0,25 em cima) enquanto o `h1` fica em y=137 — no topo, ou seja, sobre a faixa mais clara. Por isso o título branco caía numa cortina clara e numa janela estourada, e o botão, que nunca teve problema, ficava sobre a parte escura. */ --ap-scrim: linear-gradient(to bottom, rgb(22 16 12 / 0.88) 0%, rgb(22 16 12 / 0.55) 55%, rgb(22 16 12 / 0.25) 100%); /* Tipografia: serifada editorial de display + grotesca neutra + mono só para número. É a gramática do topo do mercado, verificada arquivo por arquivo (Inigo usa Big Caslon + Söhne; Knight Frank, Tiempos Headline + Suisse Int'l; Aucoot, Copernicus + Maison Neue). Newsreader é a alternativa OFL honesta para esse papel — e tem eixo óptico, que nenhuma delas expõe na web. Os fallbacks têm métrica casada via @font-face mais abaixo, para o texto não pular quando a fonte chega (CLS). */ --ap-fonte-titulo: 'Newsreader', 'Newsreader fallback', ui-serif, Georgia, serif; --ap-fonte-texto: 'Instrument Sans', 'Instrument Sans fallback', system-ui, -apple-system, sans-serif; --ap-fonte-numero: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Escala fluida: o mesmo valor serve de 390px a 1440px, sem media query por tamanho. */ --ap-t-xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); --ap-t-lg: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); --ap-t-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --ap-t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --ap-t-sm: 0.875rem; --ap-t-xs: 0.75rem; /** * Raio ZERO como padrão — e UM raio reservado para o CTA. * * É a decisão do `DECISOES_DESIGN.md`, com a medição junto: em themodernhouse.com o * `border-radius` computado é `0px` em **todos** os ~400 elementos. O modelo novo estava * herdando `--tn-raio` dos temas "moderno"/"compacto" e saía com 12px em **100 elementos** * (mais 75 pílulas, 2 de 8px e 1 de 50%): quatro raios diferentes, 178 cantos arredondados. * Canto arredondado em tudo é o que faz a página ler como painel de sistema, não como * editorial — e some justamente o contraste que faria o botão principal parecer uma decisão. * * A pílula dos chips (999px) fica: vem da barra segmentada e é deliberada. */ --ap-raio: 0px; --ap-raio-cta: 0.75rem; --ap-gutter: 1rem; /* respiro lateral no celular */ --ap-largura: 1200px; /* Altura do logotipo TRAVADA aqui: a queixa do dono sobre o site atual foi "esse logo tá ficando grande demais". No clássico a imagem sai no tamanho natural do arquivo que a imobiliária subiu, então cada conta tem um logo de um tamanho. */ --ap-logo-h: 2.25rem; } @media (min-width: 600px) { :root { --ap-gutter: 1.5rem; } } } /* ------------------------------------------------------------------- base */ @layer base { body { background: var(--ap-papel); color: var(--ap-tinta); font-family: var(--ap-fonte-texto); font-size: var(--ap-t-base); line-height: 1.6; /* Nenhuma página pode rolar de lado: é o defeito que escondia o agendador de visita. `clip` e não `hidden`: `hidden` transforma o elemento em CONTAINER DE ROLAGEM, o que (a) permite rolar por script mesmo sem barra e (b) quebra a busca de posição das animações guiadas por rolagem em CSS, que é como a Fase 2 vai fazer movimento sem um byte de JS. `clip` corta igual e não cria container. */ overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--ap-fonte-titulo); font-weight: 600; line-height: 1.15; text-wrap: balance; } h1 { font-size: var(--ap-t-xl); } h2 { font-size: var(--ap-t-lg); } h3 { font-size: var(--ap-t-md); } p { text-wrap: pretty; } a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ap-marca); outline-offset: 2px; border-radius: 2px; } main { display: block; } } /* ------------------------------------------------------------ componentes */ @layer componentes { .ap-topo-in, .ap-hero-in, .ap-rodape-in { max-width: var(--ap-largura); margin-inline: auto; padding-inline: var(--ap-gutter); } /* --- cabeçalho --- */ .ap-topo { background: var(--ap-papel); border-bottom: 1px solid var(--ap-linha); } .ap-topo-in { display: flex; align-items: center; gap: 1rem; min-height: 4rem; } .ap-marca { display: flex; align-items: center; text-decoration: none; } /** * A caixa do logo é RESERVADA pelo CSS, e a imagem desenha dentro dela. * * Antes: `height` fixo + `width: auto`, com `width`/`height` chutados na marcação (200×56 no * topo, 180×50 no rodapé). O arquivo real da Vini é 408×160 — proporção 2,55 contra 3,57 * declarada —, então antes de carregar o navegador reservava 128,6px e depois reduzia para * 91,8px: **36,6px de deslocamento no cabeçalho, em todas as páginas, acima da dobra**. * * E não há como "corrigir os números": o logo é de cada conta, e a API manda só a URL. Com * `aspect-ratio` + `object-fit: contain` a largura fica conhecida desde o primeiro paint e * qualquer proporção de arquivo cabe dentro sem distorcer — logo estreito sobra espaço à * direita, que é infinitamente melhor que a página pular. */ .ap-logo { block-size: var(--ap-logo-h); inline-size: auto; aspect-ratio: 3 / 1; max-inline-size: 11rem; object-fit: contain; object-position: left center; } .ap-marca-texto { font-family: var(--ap-fonte-titulo); font-size: var(--ap-t-md); font-weight: 600; } /** * Toda lista da casca perde o marcador — não só a da gaveta. * * O reset é `ul[class] { list-style: none }`, de propósito (lista de conteúdo editorial mantém * o marcador). Quando a gaveta foi corrigida, as outras nove `