/* ========================================================================== BPC — Relatório & Contas 2025 tokens.css — sistema extraído da maquete Adobe XD (artboard 1920 × 8309) Nenhuma cor, tamanho de fonte ou espaçamento deve ser escrito fora deste ficheiro. Verificável com audit_tokens.py. ========================================================================== */ :root { /* ---- Unidade de escala ------------------------------------------------- 1 --u == 1 pixel da maquete XD. A 1920px de viewport --u == 1px → a página é pixel-perfect ao XD. Abaixo de 1920px escala proporcionalmente; acima fica travada no tamanho de desenho (a maquete é uma composição fixa de 1920). Nota: usa-se cqw (container query unit) para excluir a largura da scrollbar — 100vw incluiria-a e provocaria overflow horizontal. ------------------------------------------------------------------------ */ --design-width: 1920; --u: min(1px, 100vw / 1920); /* ---- Cor (por função, não por matiz) ---------------------------------- */ --color-primary: #27348A; /* colapsa #273487 / #27348A / #27348B */ --color-accent: #00ABE7; --color-blue-mid: #4495D1; --color-blue-light: #B4D4EC; --color-blue-pale: #E5F6FC; --color-white: #FFFFFF; --color-grey: #707070; /* variantes a 60% de opacidade (XD: #00ABE799 / #4495D199 / #27348A99) */ --color-accent-60: rgb(0 171 231 / 0.6); --color-blue-mid-60: rgb(68 149 209 / 0.6); --color-primary-60: rgb(39 52 138 / 0.6); --color-scrim: rgb(112 112 112 / 0.55); --color-shadow-panel: rgb(0 0 0 / 0.2); --color-shadow-card: rgb(39 52 138 / 0.14); --color-blue-pale-2: #DCEEF9; /* topo do gradiente do hero em mobile */ --color-print-ink: #000000; --color-print-paper: #FFFFFF; /* gradientes */ --gradient-header: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%); --gradient-rule-light: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%); --gradient-rule-dark: linear-gradient(90deg, var(--color-accent) 0%, var(--color-white) 100%); /* ---- Tipografia ------------------------------------------------------- */ --font-sans: "Lato", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-menu: "Roboto", "Lato", "Segoe UI", system-ui, Arial, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-bold: 700; --fw-black: 900; /* escala tipográfica — valores em "unidades de maquete" (× --u) */ --fs-display: 96; /* h1 hero / rodapé 96/115 */ --fs-display-alt: 88; /* h2 secção Mensagem CA 88/106 */ --fs-h2: 60; /* títulos de secção 60/72 */ --fs-kpi: 100; /* números grandes 100/108 */ --fs-kpi-unit: 50; /* "Kz" / "mM" / "%" 50/60 */ --fs-lead: 40; /* títulos de card / labels 40/48 */ --fs-quote: 40; /* citação (Light) 40/50 */ --fs-pill: 40; /* valor dentro da pill 40/48 */ --fs-pill-unit: 30; /* unidade dentro da pill 30/48 */ --fs-card-title: 30; /* título card indicador 30/36 */ --fs-kicker: 36; /* "Relatório & Contas 2025" 36/44 */ --fs-body-lg: 26; /* parágrafo rodapé 26/34 */ --fs-body: 24; /* corpo principal 24/35 */ --fs-name: 24; /* nomes / cargos 24/40 */ --fs-sig: 25; /* assinatura pág. mensagem 25/40 */ --fs-body-sm: 22; /* corpo cards O BPC 22/32 */ --fs-body-xs: 20; /* corpo cards Plano/execução 20/24 20/31 */ --fs-btn: 28; /* label botão outline (bbox XD 178) */ --fs-btn-sm: 20; /* label botão PDF (bbox XD 383) */ --fs-plano-title: 24; /* título card Plano (Heavy) 24/28 */ --fs-plano-body: 20; /* corpo card Plano 20/24 */ --fs-menu: 35; /* item de menu (Roboto) 35/45 */ /* line-heights (unitless, escalam com o font-size) */ --lh-display: 1.198; /* 115/96 */ --lh-display-alt: 1.205; /* 106/88 */ --lh-h2: 1.2; /* 72/60 */ --lh-kpi: 1.08; /* 108/100 */ --lh-kpi-tall: 1.2; /* 120/100 */ --lh-lead: 1.2; /* 48/40 */ --lh-quote: 1.25; /* 50/40 */ --lh-kicker: 1.222; /* 44/36 */ --lh-body: 1.458; /* 35/24 */ --lh-body-lg: 1.308; /* 34/26 */ --lh-name: 1.667; /* 40/24 */ --lh-sig: 1.6; /* 40/25 */ --lh-body-sm: 1.455; /* 32/22 */ --lh-body-xs: 1.2; /* 24/20 */ --lh-body-xs-l: 1.55; /* 31/20 */ --lh-menu: 1.286; /* 45/35 */ --lh-plano-title: 1.167; /* 28/24 */ --lh-plano-body: 1.2; /* 24/20 */ /* ---- Layout ----------------------------------------------------------- */ --page-w: 1920; --container-w: 1640; /* 1920 − 2 × 140 */ --gutter: 140; --gutter-hero: 70; /* texto do hero */ --gutter-footer: 106; /* texto do rodapé */ --text-col-w: 1088; /* coluna de texto corrido (centrada) */ --header-h: 96; --logo-w: 171; --logo-h: 61; /* Lado do quadrado do hero (Group 253.svg do cliente, nativo 1380×1380). 1080 = altura do hero → losango inteiro, com azul acima e abaixo. Aumentar aproxima o losango e deixa o brilho sangrar pelas margens. Todo o hero — texto incluído — escala a partir deste número. */ --hero-shape: 1080; /* ---- Raios ------------------------------------------------------------ */ --radius-card: 20; --radius-kpi: 30; --radius-pill: 44; --radius-rule: 3; --radius-focus: 2; /* ---- Camadas ---------------------------------------------------------- */ --z-header: 100; --z-overlay: 200; /* ---- Movimento -------------------------------------------------------- */ --dur: 300ms; /* XD: 0.3 s em todas as transições */ --ease: cubic-bezier(0.42, 0, 0.58, 1); /* Ease In-Out */ --ease-out: cubic-bezier(0, 0, 0.58, 1); /* Ease Out */ --dot-shift: 29; /* deslocamento do ponto no hover (dos SVG) */ } /* cqw exclui a scrollbar; 100vw não. Ver #page em layout.css */ @supports (width: 1cqw) { #page { --u: min(1px, 100cqw / 1920); } } /* -------------------------------------------------------------------------- Decisões de normalização (quase-duplicados colapsados da maquete) -------------------------------------------------------------------------- 1. #273487 / #27348A / #27348B → --color-primary (#27348A). Três valores a 1 unidade de distância, indistinguíveis no ecrã. 2. Padding superior dos cards "O BPC": 16px em dois cards e 25px nos outros dois → unificado em 20px. 3. Ícones do Plano Estratégico: left 188/183 e top 5553/5935/5937 → unificados (48px do bordo do card, −55px do topo). 4. Rodapé: texto a left 106 e botão a left 102 → mantidos como no XD (a diferença é visível no alinhamento do bloco). 5. "Medium 26px" e "Heavy 24px" não existem no Lato do Google Fonts (100/300/400/700/900). Medium → 400, Heavy → 700. 6. Overlay do menu desenhado em Roboto Bold 35px, todo o resto em Lato. Mantido fiel ao XD — ver nota de entrega. ------------------------------------------------------------------------ */