/* ========================================================================== 01 · BASE — fontes locais, tokens, reset e tipografia Identidade "tech editorial": linhas finas, cantos sutis, zero sombra pesada. ========================================================================== */ /* ------------------------------ Fontes ---------------------------------- */ @font-face { font-family: "Inter"; src: url("/assets/fontes/inter-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fontes/inter-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fontes/inter-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fontes/inter-800.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Base Serif"; src: url("/assets/fontes/serif-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Base Serif"; src: url("/assets/fontes/serif-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* ------------------------------ Tokens ---------------------------------- */ /* As variáveis de cor, raio e largura chegam do config.php pelo . Aqui ficam apenas as camadas derivadas: fontes, escala e superfícies. */ :root { /* Famílias */ --fonte-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-serif: "Base Serif", "Iowan Old Style", Georgia, "Times New Roman", serif; /* Escala de espaçamento — grade de 4px */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px; /* Ritmo vertical: compacto e constante em todo o site */ --secao-y: 40px; --secao-y-fina: 22px; --bloco-y: 26px; --caixa-x: 24px; /* Raios derivados do --raio do config (3px → 3 / 6 / 9px) */ --raio-sm: var(--raio); --raio-md: calc(var(--raio) * 2); --raio-lg: calc(var(--raio) * 3); /* Superfícies e tintas derivadas da marca */ --marca-4: color-mix(in srgb, var(--marca) 4%, var(--fundo)); --marca-8: color-mix(in srgb, var(--marca) 8%, var(--fundo)); --link-8: color-mix(in srgb, var(--link) 8%, var(--fundo)); --link-16: color-mix(in srgb, var(--link) 16%, var(--fundo)); --sobre-marca-70: color-mix(in srgb, var(--contraste) 70%, transparent); --sobre-marca-45: color-mix(in srgb, var(--contraste) 45%, transparent); --sobre-marca-18: color-mix(in srgb, var(--contraste) 18%, transparent); /* Elevação discreta — usada só onde o cartão precisa descolar do fundo */ --sombra-1: 0 1px 2px rgba(15, 42, 61, .04); --sombra-2: 0 10px 24px -18px rgba(15, 42, 61, .45); --transicao: .16s ease; } /* ------------------------------- Reset ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--e8); } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte-ui); font-size: 17px; line-height: 1.62; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; } a:hover, a:focus { color: var(--link-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--raio-sm); } ::selection { background: var(--link-16); color: var(--marca); } hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e6) 0; } /* ----------------------------- Tipografia -------------------------------- */ h1, h2, h3, h4 { color: var(--marca); font-family: var(--fonte-ui); font-weight: 800; letter-spacing: -0.018em; line-height: 1.16; text-wrap: balance; margin: 0 0 var(--e3); } h1 { font-size: clamp(1.95rem, 1.5rem + 1.6vw, 2.5rem); } h2 { font-size: clamp(1.28rem, 1.15rem + 0.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.014em; } h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; } h4 { font-size: 0.98rem; font-weight: 700; } p { margin: 0 0 var(--e3); text-wrap: pretty; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } small { font-size: 0.82em; } /* ------------------------------ Estrutura -------------------------------- */ .caixa { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--caixa-x); } main { display: block; } /* ------------------------------ Utilitários ------------------------------ */ .oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pular { position: absolute; left: -9999px; top: 0; background: var(--marca); color: var(--contraste); padding: var(--e3) var(--e4); z-index: 60; font-weight: 700; font-size: 0.86rem; border-radius: 0 0 var(--raio-md) 0; } .pular:focus { left: 0; text-decoration: none; color: var(--contraste); } /* Sobrelinha: rótulo curto acima de um título */ .olho { display: block; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 var(--e2); } .sep { color: var(--linha-forte); padding: 0 var(--e1); } .vazio { padding: var(--e5) var(--e6); border: 1px dashed var(--linha-forte); border-radius: var(--raio-md); background: var(--fundo-alt); color: var(--texto-suave); font-size: 0.95rem; }