/* site/assets/css/base.css Reset, tokens de design e utilitários — Régua de Leitura. Temas: o claro é o padrão. O escuro entra por duas vias: 1. preferência do sistema (prefers-color-scheme), a menos que o visitante tenha escolhido "claro" explicitamente; 2. escolha manual no botão, gravada como data-tema no . Os tokens escuros aparecem duas vezes de propósito — CSS puro não permite reaproveitar um bloco de declarações entre seletores. */ :root { color-scheme: light; /* Cor — mundo azul do produto, guia âmbar quente */ --papel: #fbfaf7; /* fundo padrão */ --papel-fundo: #f2efe7; /* seções alternadas, bem discreto */ --tinta: #14243d; /* texto: azul-tinta, não preto */ --tinta-suave: #55637a; /* texto secundário — 5.8:1 no papel */ --azul: #1d5fd6; /* ação primária / links */ --azul-hover: #0c1e3a; /* hover da ação primária */ --azul-escuro: #0c1e3a; /* fundo das seções escuras */ --guia: #ffd24a; /* âmbar sólido: botões e realces */ --guia-marca: #ffd24a; /* âmbar da faixa-guia (atrás do texto) */ --guia-forte: #b26a00; /* âmbar acessível p/ texto e foco */ --traco: #e4e0d6; /* filetes sobre o papel */ --branco: #ffffff; /* Texto sobre fundos escuros (rodapé, seção final) — precisa ser claro nos DOIS temas, por isso não usa --tinta nem --papel. */ --sobre-escuro: #dfe9fb; /* Texto dentro do botão primário — inverte no tema escuro. */ --botao-texto: #ffffff; /* Tipografia — pilha do sistema, sem fontes externas */ --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --f-0: 0.8rem; --f-1: 0.9rem; --f-2: 1rem; --f-3: 1.15rem; --f-4: 1.5rem; --f-5: 2rem; --f-6: 2.6rem; --f-hero: clamp(2.5rem, 6vw, 4.4rem); /* Layout */ --col-texto: 62ch; --col-larga: 1120px; --gutter: 1.25rem; --ritmo: 1.5rem; --raio: 10px; --altura-cabecalho: 64px; /* Escala de z-index (sem valores arbitrários) */ --z-cabecalho: 1000; --z-menu: 1100; --z-modal: 1200; } /* Tema escuro por preferência do sistema (salvo escolha manual por "claro") */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --papel: #0d1522; --papel-fundo: #152033; --tinta: #f1f5f9; --tinta-suave: #a4b2c6; --azul: #4c8cf5; --azul-hover: #7aa9f8; --azul-escuro: #080d16; --guia: #f59e0b; --guia-marca: #7a4e00; --guia-forte: #fbbf24; --traco: #22324b; --branco: #ffffff; --sobre-escuro: #cbd5e1; --botao-texto: #080d16; } } /* Tema escuro por escolha manual */ :root[data-tema="escuro"] { color-scheme: dark; --papel: #0d1522; --papel-fundo: #152033; --tinta: #f1f5f9; --tinta-suave: #a4b2c6; --azul: #4c8cf5; --azul-hover: #7aa9f8; --azul-escuro: #080d16; --guia: #f59e0b; --guia-marca: #7a4e00; --guia-forte: #fbbf24; --traco: #22324b; --branco: #ffffff; --sobre-escuro: #cbd5e1; --botao-texto: #080d16; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Compensação para o cabeçalho fixo (sticky) ao navegar por âncoras */ [id] { scroll-margin-top: calc(var(--altura-cabecalho) + 1.5rem); } body { font-family: var(--fonte); font-size: 16px; line-height: 1.65; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Trava a rolagem do fundo enquanto o diálogo está aberto (classe em vez de style inline, para manter o CSS fora do JS). */ body.sem-rolagem { overflow: hidden; } #conteudo:focus { outline: none; } img, video { display: block; max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--tinta); text-wrap: balance; } a { color: var(--azul); text-underline-offset: 0.15em; } a:hover { color: var(--azul-hover); } :focus-visible { outline: 3px solid var(--guia-forte); outline-offset: 2px; border-radius: 2px; } /* Faixa-guia: o elemento visual central do site. Marca a "linha atual" atrás de um trecho, como o app faz na tela. A faixa cobre só a parte de baixo do texto, então o âmbar escurece no tema escuro para o texto claro continuar legível por cima dela. */ .marca-guia { background-image: linear-gradient(var(--guia-marca), var(--guia-marca)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.34em; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.06em; } /* Utilitários */ .container { width: 100%; max-width: var(--col-larga); margin-inline: auto; padding-inline: var(--gutter); } .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .pular-link { position: absolute; left: 0.75rem; top: -3rem; z-index: var(--z-menu); padding: 0.6rem 1rem; background: var(--tinta); color: var(--papel); border-radius: 0 0 var(--raio) var(--raio); transition: top 0.15s ease; } .pular-link:focus { top: 0; color: var(--papel); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }