/* Aurelis — design tokens compartilhados */ /* Fontes carregadas via no de cada página (ver index.html/metodologia.html) */ :root { /* Base neutra, tingida de grafite (não azulada) */ --paper: #f6f5f1; --card: #ffffff; --ink: #14161c; --ink-soft: #2b2e37; --muted: #5c606b; --soft: #6d7077; --line: #e6e4dd; --line-strong: #d5d2c8; /* Grafite escuro — header, hero, footer */ --graphite-950: #0e0f13; --graphite-900: #15171d; --graphite-800: #1f222b; --on-dark-ink: #f6f5f1; --on-dark-muted: #a9aeb9; --on-dark-line: rgba(255, 255, 255, 0.12); --on-dark-card: #1a1d24; /* Esmeralda — ação primária */ --emerald: #12805f; --emerald-dark: #0d6449; --emerald-ink: #0a4d38; --emerald-soft: #e8f3ee; --emerald-line: #c6e1d4; --emerald-bright: #23c58c; /* Cobre — acento pontual */ --copper: #b1652f; --copper-dark: #8f4f22; --copper-soft: #faf0e5; --copper-line: #edd4b7; --red: #a94a3f; --red-soft: #fbeeec; --red-line: #f0d4cf; /* --red calibrado pra fundo claro (~3.3:1 num fundo grafite — abaixo do WCAG AA); versão mais clara pro mesmo uso ("negativo") em painéis de fundo escuro, mesmo padrão do --emerald-bright abaixo. ~5.2:1 contra --graphite-950/o gradiente do .paywall-card. */ --red-bright: #e2584a; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --shadow-card: 0 20px 60px rgba(14, 15, 19, 0.08); --shadow-soft: 0 10px 30px rgba(14, 15, 19, 0.06); --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --container: 880px; --container-wide: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } img, svg { display: block; max-width: 100%; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; } .shell { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; } .shell-wide { width: min(var(--container-wide), calc(100% - 32px)); margin: 0 auto; } .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 2.5px solid var(--emerald); outline-offset: 2px; border-radius: 4px; } /* --- Header (fundo grafite) --- */ .site-header { background: var(--graphite-950); color: var(--on-dark-ink); } .site-header .shell { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-dark-ink); font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; } .site-nav { display: flex; align-items: center; gap: 4px; } .nav-link { font-size: 13px; font-weight: 600; color: var(--on-dark-muted); text-decoration: none; padding: 9px 12px; border-radius: 10px; transition: 0.15s ease; } .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-dark-ink); } /* --- Botões --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; font-weight: 700; font-size: 13px; padding: 12px 19px; text-decoration: none; transition: 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--emerald); color: #fff; box-shadow: 0 10px 22px rgba(18, 128, 95, 0.28); } .btn-primary:hover { background: var(--emerald-dark); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-secondary { background: transparent; color: var(--on-dark-ink); border: 1px solid rgba(255, 255, 255, 0.22); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.34); } .btn-secondary.on-light { color: var(--ink-soft); border-color: var(--line-strong); } .btn-secondary.on-light:hover { background: #f6f8fc; border-color: #c7d0e0; } .btn-text { background: transparent; color: var(--muted); font-weight: 700; padding: 10px 4px; } .btn-text:hover { color: var(--emerald-dark); } .eyebrow { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: rgba(35, 197, 140, 0.12); color: var(--emerald-bright); padding: 7px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald-bright); } .eyebrow.on-light { background: var(--emerald-soft); color: var(--emerald-ink); } .eyebrow.on-light i { background: var(--emerald); } /* --- Footer --- */ .site-footer { background: var(--graphite-950); color: var(--on-dark-muted); margin-top: 64px; padding: 44px 0 30px; } .site-footer .brand { margin-bottom: 6px; } .site-footer p { font-size: 12px; line-height: 1.65; max-width: 640px; margin: 12px 0 0; } .site-footer a { color: var(--emerald-bright); text-decoration: none; font-weight: 600; } .site-footer a:hover { text-decoration: underline; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 11px; color: #757d8a; } .footer-links { display: flex; gap: 16px; } .footer-links a { color: #757d8a; font-weight: 600; } .footer-links a:hover { color: var(--emerald-bright); text-decoration: underline; } @media (max-width: 440px) { .shell, .shell-wide { width: min(100% - 24px, 1080px); } .site-header .shell { height: 64px; } }