/* ============================================================ Portal IBRFÉ — tokens de design Fonte única de verdade para cor, tipografia, espaço e movimento. Nenhum componente deve usar hex cru: sempre var(--*). ============================================================ */ /* ── Fontes ──────────────────────────────────────────────────── Self-hosted para não pagar RTT de CDN em hospedagem compartilhada. Os arquivos .woff2 vão em assets/fonts/ (ver ASSETS.md). Enquanto não existirem, a cadeia de fallback abaixo mantém o site com aparência correta — Inter cai para a fonte de sistema, que é visualmente próxima; Playfair cai para Georgia. ------------------------------------------------------------ */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ── PALETA OFICIAL DA MARCA ─────────────────────────────────── Extraída do "MANUAL IDENTIDADE VISUAL IBRFE.pdf", página "Cores e códigos". Estes quatro valores são a marca e NÃO devem ser alterados: PENDÃO #C58749 R197 G135 B73 MAR SEM-FIM #31586D R49 G88 B109 NAVAL #2F3D4D R47 G61 B77 AZEITONA #45483D R69 G72 B61 As variantes abaixo (--accent-soft, --accent-dim, --bg) são derivadas por ajuste de LUMINOSIDADE mantendo matiz e saturação, exclusivamente para atingir contraste WCAG onde a cor pura não atinge. O manual define cores de marca, não pares de contraste de interface. ------------------------------------------------------------ */ :root { /* Cores da marca, puras (use para blocos, faixas e superfícies) */ --brand-pendao: #C58749; --brand-mar: #31586D; --brand-naval: #2F3D4D; --brand-azeitona: #45483D; /* ── Superfícies escuras (hero e seções institucionais) ── */ /* --bg é o NAVAL escurecido (mesmo matiz/saturação, L=14%): o hero com vídeo precisa de uma base mais profunda que o NAVAL puro para o texto sobreviver a qualquer quadro do vídeo. */ --bg: #1B232C; /* 15.9:1 com branco */ --surface: var(--brand-naval); /* 11.1:1 com branco */ --surface-2: var(--brand-azeitona); /* 9.3:1 com branco */ --surface-3: var(--brand-mar); /* 7.6:1 com branco */ --fg: #FFFFFF; --fg-muted: #C7CDD4; /* >=4.8:1 sobre TODOS os fundos escuros acima */ --border-dark: #33404E; /* ── Superfícies claras (leitura do blog e formulários) ── */ --bg-light: #FAF8F5; --surface-light: #FFFFFF; --fg-light: var(--brand-naval); /* 10.5:1 sobre --bg-light */ --fg-light-muted: #5A6875; /* 5.6:1 sobre --bg-light */ --border-light: #E0DCD5; /* ── Acento (PENDÃO) ── O Pendão puro é de tom médio: branco sobre ele dá só 3.0:1, e ele sobre os fundos escuros dá 3.1–3.7:1. Serve para elementos gráficos grandes (como o logo, que o manual aplica em branco sobre Pendão), mas não para texto pequeno. Daí as duas variantes. */ --accent: var(--brand-pendao); --accent-hover: #D39A63; --accent-soft: #D7AD83; /* texto pequeno sobre fundo ESCURO: >=4.5:1 */ --accent-dim: #9A6631; /* texto sobre fundo CLARO: 4.6:1 */ --on-accent: #1A1206; /* 6.1:1 sobre --accent (branco daria 3.0:1) */ /* ── Estados ── */ --danger: #DC2626; --danger-light: #FEE2E2; --danger-fg: #991B1B; /* 6.4:1 sobre --danger-light */ --success: #16A34A; --success-light: #DCFCE7; --success-fg: #15803D; /* Vermelho do botão "Assistir no YouTube": o vermelho oficial da marca (#FF0000) dá só 4.0:1 com texto branco, abaixo do mínimo de 4.5:1 para texto de botão. Escurecido o mínimo necessário para passar, mantendo o vermelho reconhecível como identidade do YouTube. */ --youtube-red: #CC0000; /* 5.89:1 com branco */ --youtube-red-hover: #B30000; /* ── Tipografia ── */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-quote: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Escala: 12 / 16 / 22 / 32 / 40 / 56 / 72 */ --fs-label: 0.75rem; /* 12px */ --fs-body: 1.125rem; /* 18px */ --fs-body-sm: 1rem; /* 16px — mínimo em mobile, evita zoom no iOS */ --fs-lead: 1.375rem; /* 22px */ --fs-h3: 1.5rem; /* 24px */ --fs-h2: 2rem; /* 32px */ --fs-h1: 2.5rem; /* 40px */ --fs-display: 3.5rem; /* 56px */ --fs-hero: 4.5rem; /* 72px */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.65; --measure: 68ch; /* medida máxima de leitura */ /* ── Espaçamento (densidade 4/10 — respiro institucional) ── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 128px; --container: 1200px; --container-narrow: 760px; --gutter: var(--space-3); /* ── Raios ── */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* ── Movimento ── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 160ms; --dur-mid: 240ms; --dur-slow: 320ms; /* ── Elevação (usada com parcimônia; o estilo é flat) ── */ --sh-sm: 0 1px 2px rgba(15, 15, 17, .06), 0 1px 3px rgba(15, 15, 17, .10); --sh-md: 0 4px 6px rgba(15, 15, 17, .05), 0 10px 20px rgba(15, 15, 17, .08); --sh-lg: 0 10px 24px rgba(15, 15, 17, .10), 0 20px 48px rgba(15, 15, 17, .12); /* ── Camadas ── */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100; --z-modal: 1000; /* Altura do cabeçalho fixo — usada para offset de âncora e do hero */ --header-h: 72px; } @media (min-width: 768px) { :root { --gutter: var(--space-4); --header-h: 80px; } } /* Tipografia fluida nos tamanhos grandes: evita títulos gigantes em telas pequenas sem precisar de breakpoints em cada componente. */ @media (max-width: 767px) { :root { --fs-hero: 2.25rem; /* 36px */ --fs-display: 2rem; /* 32px */ --fs-h1: 1.75rem; /* 28px */ --fs-h2: 1.5rem; /* 24px */ --fs-lead: 1.125rem; /* 18px */ --fs-body: 1.0625rem;/* 17px */ } }