/* ============================================================ PADRÕES DE PÁGINA (leitura longa) — Coronel Lenise / AGIR ============================================================ Consolidados do site institucional (lenisedurao.com.br). A camada de apresentação (`brand.css` + `motion.css`) resolve o slide: uma tela, um argumento, palco fixo. Esta resolve a PÁGINA: várias seções, rolagem longa, leitor que precisa saber onde está e onde acaba. Tudo aqui consome os papéis `--sf-*`, então funciona em seção escura (default) e clara (`data-theme="light"`) sem regra extra. ============================================================ */ :root { /* Medida do site: a mesma para nav, seção e rodapé. É o que faz a marca da barra alinhar com o título da seção lá embaixo — por isso é UMA medida e não uma por bloco. Cresce em tela grande. Fixa em 1180 ela vira uma ilha no meio de um monitor de 1920/2560: sobra faixa morta dos dois lados e qualquer fundo sangrado descola do conteúdo, porque o fundo acompanha a viewport e o conteúdo não. O piso é o valor antigo e `82vw` só passa dele acima de ~1440px, então nada muda de 1440 para baixo. O teto de 1520 existe porque acima disso a linha de texto fica larga demais para leitura. */ --page-w: clamp(1180px, 82vw, 1520px); /* Respiro vertical entre seções. Cresce com a tela porque em desktop a seção precisa de ar para não virar parede de texto. */ --page-gap: clamp(64px, 9vw, 128px); } /* ---------- ESCALA DE PÁGINA ---------- A escala `--t-*` do sistema serve ao deck e às apresentações, lidos a 3m. Na página, lida a 50cm, ela fica pesada — cada degrau cai ~2px. É opt-in (classe no ``) e não um override global de `:root` porque uma peça de slide gerada com este mesmo bundle precisa da escala grande intacta. */ .lenise-page-scale { --t-heading: 1.375rem; /* 24 → 22 */ --t-subhead: 1.125rem; /* 20 → 18 */ --t-body-lg: 1rem; /* 18 → 16 */ --t-body: 0.875rem; /* 16 → 14 */ --t-small: 0.8125rem; /* 14 → 13 */ --t-caption: 0.625rem; /* 12 → 10 */ } /* O kicker acompanha a escala menor — no tamanho de palco ele era o texto que mais chamava atenção sem ser título. O fio também afina; a cor continua vindo de `currentColor` (brand.css), então segue o rótulo em qualquer tema. `flex-wrap` porque o kicker é inline-flex: sem ele o rótulo é um item só e estoura em 320px. */ .lenise-page-scale .lenise-kicker { font-size: 0.6875rem; gap: 10px; flex-wrap: wrap; } .lenise-page-scale .lenise-kicker::before { width: 24px; height: 1.5px; } /* Medida de conteúdo. Usar no wrapper de toda seção. */ .lenise-page { width: min(var(--page-w), 100% - 2 * var(--sp-5)); margin-inline: auto; } /* Seção de página: pinta fundo e texto pelo tema vigente e traz o respiro. Alternar `data-theme` entre seções é o ritmo do site — ver o readme. */ .lenise-page-section { background: var(--sf-bg-grad); color: var(--sf-text); padding: var(--page-gap) 0; } /* ---------- PROVA ---------- A regra do sistema é "dado sem fonte não entra". Na apresentação a fonte é uma linha em `--st-micro` no rodapé do slide; na página ela é este selo, colado no dado que sustenta. Discreto o bastante para não competir, presente o bastante para ser clicado. */ .lenise-source { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-3); font-family: var(--font-label); font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sf-text-dim); text-decoration: none; } a.lenise-source:hover { color: var(--sf-accent); } .lenise-source svg { width: 14px; height: 14px; stroke-width: 2; } /* ---------- ORIENTAÇÃO ---------- Três peças que respondem "onde estou" numa página longa: quanto falta (progresso), em que seção estou (link ativo) e como volto (ao topo). Elas só fazem sentido juntas — meia orientação confunde mais que nenhuma. O JS que as alimenta tem duas armadilhas conhecidas, documentadas no readme: throttle por TEMPO (nunca uma flag de requestAnimationFrame, que trava para sempre se o quadro não dispara) e IntersectionObserver para a seção ativa (nunca cálculo de posição no evento de scroll). */ /* Barra de progresso de leitura. Vive colada na base da barra fixa. */ .lenise-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; background: transparent; } /* O filho é escalado em X pelo JS (`transform: scaleX(p)`), propriedade de composição — não força layout, pode ser escrita a cada quadro. O estado inicial é `scaleX(0)` e NÃO `width: 0`: sem isso a barra pisca cheia no primeiro paint, antes do JS assumir. */ .lenise-progress > * { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); } /* Barra fixa da página: véu do próprio fundo do tema + hairline. `color-mix` mantém o véu correto no claro e no escuro sem segunda regra. */ .lenise-topbar { position: sticky; top: 0; z-index: 90; padding: var(--sp-3) 0; background: color-mix(in srgb, var(--sf-bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sf-card-border); } /* Link de seção na barra. O estado ativo é sublinhado dourado desenhado em `::after` — e não `border-bottom` — para não empurrar o layout 2px quando liga e desliga durante a rolagem. */ .lenise-navlink { position: relative; padding-bottom: 4px; font-family: var(--font-label); font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sf-text-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .lenise-navlink:hover { color: var(--sf-accent); } .lenise-navlink[data-ativo="true"] { color: var(--sf-accent); } .lenise-navlink[data-ativo="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--sf-accent); } /* Voltar ao topo. Só existe DEPOIS que há o que voltar (o site monta o botão a partir de ~400px de rolagem) — botão parado no topo da página é ruído. Fica à ESQUERDA: a direita inferior é onde mora o botão de WhatsApp. */ .lenise-to-top { position: fixed; z-index: 140; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--sf-bg) 86%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border-gold); color: var(--sf-accent); transition: transform var(--dur-fast) var(--ease-out); } .lenise-to-top:hover { transform: translateY(-2px); } .lenise-to-top svg { width: 20px; height: 20px; stroke-width: 2.2; } /* Salto para a próxima seção, no fim de um bloco longo — a saída explícita de quem chegou ao fim do assunto e não quer rolar de volta. */ .lenise-next { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--sp-6); padding: 11px 20px; border-radius: var(--r-pill); background: var(--sf-card); border: 1px solid var(--sf-card-border); color: var(--sf-text); text-decoration: none; font-family: var(--font-label); font-weight: 700; font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.08em; } .lenise-next:hover { border-color: var(--border-gold); color: var(--sf-accent); } .lenise-next svg { width: 16px; height: 16px; stroke-width: 2.2; } /* ---------- FILTRO ---------- Pílula de recorte de lista. O estado é `aria-pressed`, não uma classe: o atributo que o leitor de tela anuncia é o mesmo que pinta o botão, então os dois não têm como divergir. Sem contador no rótulo — o número muda com o conteúdo e envelhece sozinho. */ .lenise-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer; background: var(--sf-card); border: 1px solid var(--sf-card-border); color: var(--sf-text-soft); font-family: var(--font-label); font-weight: 700; font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.08em; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .lenise-chip:hover { background: var(--sf-card-hi); color: var(--sf-text); } .lenise-chip[aria-pressed="true"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); } /* ---------- DADO EM CARD ---------- O número é o herói também na página, só que em escala de tela. A unidade acompanha o numeral na linha de base, mas com `flex-wrap` + `min-width: 0`: sem isso ela vira o min-content do card, estica a coluna e sangra pela borda em telas estreitas. */ .lenise-stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 0.9; letter-spacing: var(--ls-mega); color: var(--sf-accent); } .lenise-stat-unit { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-label); font-weight: 700; font-size: 0.34em; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--sf-text-soft); } .lenise-stat-label { margin-top: var(--sp-3); font-family: var(--font-display); font-weight: 800; font-size: var(--t-body); line-height: 1.15; text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--sf-text); } /* ---------- CARD QUE ABRE ---------- Card clicável (registro que abre detalhe). É `