/*
Sem framework, de propósito: o site é o produto e a velocidade dele é fator de
ranqueamento. Carregar 200 KB de CSS para usar uma grade trabalha contra a fatia.
Pele "Aconchego" — portada de docs/atys-modulo-imobiliario-site-template.html
(linhas 11-826). --brand, --brand-ink, --on-brand, --brand-wash, --brand-soft e
--brand-line NÃO estão aqui: são inline, por site, em partials/tema.blade.php
(BrandPalette::from()) — este arquivo só os consome.
A animação de entrada por rolagem do protótipo (.reveal, regra no fim deste arquivo) é
opcional na spec (§7) e só existe condicionada a `.js-reveal` no — classe que o
script do fim do (S5d) só acrescenta depois que o IntersectionObserver que ele cria
está de pé. Sem isso, um elemento marcado `.reveal` ficaria invisível para sempre em vez de
só sem entrada suave.
*/
:root {
color-scheme: light;
--bg: #F7F4EF;
--surface: #FFFFFF;
--surface-2: #F2EDE5;
--surface-3: #E9E2D7;
--ink: #2B2621;
--ink-2: #574F46;
--muted: #8A8176;
--line: #E6DFD4;
--line-2: #D5CBBC;
--serif: "Fraunces", Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--r: 4px;
--r-sm: 2px;
--sh-1: 0 1px 2px rgba(58, 44, 30, .04), 0 3px 10px rgba(58, 44, 30, .05);
--sh-2: 0 2px 4px rgba(58, 44, 30, .05), 0 14px 32px rgba(58, 44, 30, .11);
--sh-3: 0 24px 60px rgba(40, 30, 20, .20);
--ease: cubic-bezier(.2, .7, .2, 1);
--hdr: 68px;
}
/*
Fraunces, self-hosted (S5b-D4): nada de fonts.googleapis.com/fonts.gstatic.com na página
servida — só um WOFF2 em public/fonts/, subset latino, da distribuição oficial do Google
Fonts (repositório google/fonts, licença SIL OFL — LICENSE-fraunces.txt ao lado).
Um arquivo só, não dois: esta versão da Fraunces (v38) é uma fonte VARIÁVEL — o próprio
Google serve o mesmo WOFF2 pros pesos 600 e 700 (testado: os quatro pesos 400/600/700/900
do css2 apontam pro mesmo arquivo), com o eixo `wght` resolvido pelo navegador a partir do
`font-weight` de cada @font-face. `font-weight: 600 700` é o range que cobre os dois pesos
que este CSS usa (h1/h2/h3 em 500 caem no peso mais próximo do range, 600).
font-display: swap para o texto aparecer com a fonte do sistema antes da @font-face
chegar, em vez de invisível (FOIT).
*/
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 600 700;
font-display: swap;
src: url("/fonts/fraunces-latin-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;
}
* { box-sizing: border-box; }
/*
Fix (revisão final): `scroll-padding-top` sem par era um `scroll-behavior` que levava o alvo
para debaixo do cabeçalho. Esta fatia introduziu os ÚNICOS links de âncora do site (`/#sobre`
e `/#contato`, no `.nav` e no `.mnav`); numa home mais longa que a do demo — a partir do
momento em que o alvo fica abaixo da dobra — o navegador encosta o topo da seção em y=0, e o
`.site-header` (sticky, `--hdr` de altura) cobre o começo dela. Em `#contato` é pior: a seção
é `.section-colada` (`padding-top: 0`), então o card inteiro some sob o cabeçalho.
`--hdr` muda dentro do @media do cabeçalho (68px → 60px) e o cálculo acompanha sozinho. Os
16px são a folga para o alvo não nascer colado na borda de baixo do cabeçalho.
*/
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 15px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
/*
Revisão final: o anel era `var(--brand)` cru. Marca clara sobre o fundo creme (o caso que a
S5a documentou) dava um foco que não se via — e o indicador de foco tem piso de contraste
próprio na WCAG (1.4.11, 3:1). `--focus` é a marca já escurecida até cruzar esse piso
(BrandPalette::foco), então o anel continua sendo a cor do cliente.
O `box-shadow` branco preenche a folga do `outline-offset`: sobre fundo escuro — hero com
foto, lightbox — quem garante o contraste é ele, porque ali é o `--focus` (escuro) que
desaparece. Os dois juntos funcionam nos dois fundos, sem o CSS precisar saber em qual está.
*/
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* Ícone consumido via . */
.i {
width: 18px; height: 18px; flex: none;
stroke: currentColor; fill: none; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- legado que sobrevive à pele ----------
Cinco classes de fora do protótipo Aconchego, usadas pelo formulário de contato e pelo
Alpine da galeria — nada aqui mudou de nome ou de regra. */
/* Honeypot: fora do fluxo de leitura de tela, sem depender de display:none (padrão que bots já detectam). */
.fora-da-tela { position: absolute; left: -9999px; }
.consentimento { flex-direction: row !important; align-items: flex-start; gap: .5rem !important; }
.consentimento input { width: auto; }
.sucesso { color: #1a7f37; font-weight: 600; }
.erro { color: #c0392b; }
[x-cloak] { display: none !important; }
/* ---------- botões, chips, links ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 42px; padding: 0 18px;
border: 1px solid var(--line-2); border-radius: var(--r);
background: var(--surface); color: var(--ink);
font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background .2s, border-color .2s, color .2s, box-shadow .25s, transform .2s var(--ease);
}
.btn:hover { border-color: var(--ink-2); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-brand:hover {
background: var(--brand-ink); border-color: var(--brand-ink);
box-shadow: 0 6px 18px color-mix(in oklab, var(--brand) 30%, transparent);
}
.btn-lg { height: 50px; padding: 0 22px; font-size: 15px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-icon { width: 42px; padding: 0; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 12px;
border: 1px solid var(--line-2); border-radius: 6px;
background: var(--surface); color: var(--ink-2);
font: 500 13px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip .i { width: 14px; height: 14px; }
.chip[aria-pressed="true"] {
border-color: var(--brand); background: var(--brand-wash); color: var(--brand-ink);
}
.chip[aria-pressed="true"] small { color: var(--brand-ink); }
.chip:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line-2); color: var(--ink-2); }
.chip-x .i { transition: transform .25s var(--ease); }
.chip-x:hover .i { transform: rotate(90deg); }
@keyframes chipIn { from { opacity: 0; transform: scale(.85); } }
select.chip {
appearance: none; padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8176' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.link-more {
display: inline-flex; align-items: center; gap: 6px;
color: var(--brand-ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.link-more .i { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-more:hover .i { transform: translateX(4px); }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--brand); }
/* ---------- foto placeholder ---------- */
.ph {
--wx: 58%;
position: relative; overflow: hidden;
background: radial-gradient(50% 60% at var(--wx) 30%, rgba(255, 245, 225, .45), transparent 70%), var(--g);
}
.ph::before {
content: ""; position: absolute; left: var(--wx); top: 16%; width: 22%; height: 44%;
transform: translateX(-50%);
background:
linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .55) 50%, transparent calc(50% + .5px)),
linear-gradient(180deg, rgba(255, 250, 240, .72), rgba(255, 250, 240, .22));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.ph::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
background: linear-gradient(180deg, rgba(60, 40, 20, .10), rgba(60, 40, 20, .24));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ph-1 { --g: linear-gradient(160deg, #E9DCC8 0%, #CBB293 55%, #9C7F60 100%); --wx: 62%; }
.ph-2 { --g: linear-gradient(155deg, #DDE3D6 0%, #AFBBA2 55%, #7C8A72 100%); --wx: 24%; }
.ph-3 { --g: linear-gradient(165deg, #F0D9C4 0%, #D7A785 50%, #A56B4E 100%); --wx: 68%; }
.ph-4 { --g: linear-gradient(160deg, #E4E1DA 0%, #BDB6AA 55%, #8B8275 100%); --wx: 34%; }
.ph-5 { --g: linear-gradient(170deg, #D6E0E6 0%, #A9BAC4 50%, #6F8290 100%); --wx: 52%; }
.ph-6 { --g: linear-gradient(160deg, #EFE3CF 0%, #D9C09A 55%, #AD8B5E 100%); --wx: 20%; }
.ph-7 { --g: linear-gradient(175deg, #C9D6DE 0%, #E8D9C2 45%, #B79A78 100%); --wx: 64%; }
.ph-8 { --g: linear-gradient(160deg, #E8D6CF 0%, #C7A79B 55%, #946F63 100%); --wx: 40%; }
/* ---------- cabeçalho ---------- */
.site-header {
position: sticky; top: 0; z-index: 40;
background: color-mix(in srgb, var(--bg) 88%, transparent);
border-bottom: 1px solid transparent;
transition: border-color .25s, box-shadow .25s, transform .35s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
.site-header { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 18px rgba(58, 44, 30, .05); }
/*
Fix (fechamento S5d): resíduo da decisão que fez a flutuação do `.mnav` depender do script
(comentário do `.mnav` abaixo) — o `.site-header` continuava `position: sticky` mesmo sem
JavaScript, com o `.mnav` em fluxo empurrando a própria altura do cabeçalho para 290px (375,
quatro links + WhatsApp). Sticky e 290px juntos grudavam isso no topo pra sempre: medido a
375 sem script, cabeçalho (0..290) mais a barra fixa (743..812) tomavam 359 dos 812px da
tela, o botão "Buscar" do hero caía inteiro debaixo da barra fixa (y=750..800), e a âncora
`/#sobre` — que só existe por causa desta fatia — parava em y=76 com o cabeçalho cobrindo
até 290: 214px do começo da seção ficavam enterrados. `position: static` sem `.js-menu` tira
o cabeçalho da equação: ele rola para fora como conteúdo normal, e os três sintomas somem
juntos. Com `.js-menu` (script rodando) nada muda — o cabeçalho segue ~68px/60px e sticky
como sempre foi.
`#menu-btn` some junto: sem script aquele `