/* ========================================================================== CIMO — Design Tokens -------------------------------------------------------------------------- Fonte de verdade cromática do site público. Carrega depois de skins/skin-corporate-9.css, por isso as redefinições de :root abaixo ganham a cascata e re-tingem o template Porto inteiro sem o editar. Toda a paleta deriva do logo: public/template/img/CIMO.svg .cls-2 #007447 montanha -> primary .cls-3 #68ad45 folha -> leaf accent .cls-1 #c7eafb céu -> sky accent .cls-5 #231f20 wordmark -> fica no SVG, é arte, não UI Regra do sistema: "Use color to communicate, not to decorate." Na dúvida entre primary e neutro, é neutro. ========================================================================== */ :root { /* ---------------------------------------------------------------------- PRIMARY — hue 157° constante em toda a escala. O hex da marca (#007447) é o passo 500. Contraste sobre branco em comentário; nenhum token usado para texto desce abaixo de 4.5:1. ---------------------------------------------------------------------- */ --cimo-primary-50: #f1f9f6; /* 1.07 — fundo subtil de callout */ --cimo-primary-100: #d6ebe3; /* 1.25 — superfície clara, chip */ --cimo-primary-200: #a0cfbd; /* 1.73 — borda / accent subtil */ --cimo-primary-300: #54b690; /* 2.48 — decorativo, só gráfico */ --cimo-primary-400: #22815d; /* 4.81 — estados interativos claros */ --cimo-primary-500: #007447; /* 5.85 — MARCA: link, botão, ativo */ --cimo-primary-600: #00613c; /* 7.57 — hover / pressed */ --cimo-primary-700: #025032; /* 9.56 — interação forte */ --cimo-primary-800: #023b25; /* 12.69 — superfície de marca escura */ --cimo-primary-900: #032b1c; /* 15.37 — footer, âncora escura */ --cimo-primary-950: #021d13; /* 17.68 — tom mais profundo */ /* Alphas do primary — substituem os 13 rgba(0,116,71,…) avulsos */ --cimo-primary-a04: rgba(0, 116, 71, 0.04); --cimo-primary-a08: rgba(0, 116, 71, 0.08); --cimo-primary-a12: rgba(0, 116, 71, 0.12); --cimo-primary-a20: rgba(0, 116, 71, 0.20); --cimo-primary-a35: rgba(0, 116, 71, 0.35); /* ---------------------------------------------------------------------- NEUTRAL — hue ~155°, saturação 7–20%. Afinidade com o verde da marca sem se ler como verde. É sobre estes que a maioria da interface assenta. ---------------------------------------------------------------------- */ --cimo-neutral-50: #f9fbfa; /* 1.04 — FUNDO DE PÁGINA */ --cimo-neutral-100: #f3f6f5; /* 1.09 — superfície recuada, thead */ --cimo-neutral-200: #e5ebe9; /* 1.21 — BORDAS, separadores */ --cimo-neutral-300: #d2dad7; /* 1.42 — borda forte, divisores */ --cimo-neutral-400: #a1afa9; /* 2.28 — placeholders, ícones inativos */ --cimo-neutral-500: #778880; /* 3.74 — ícones decorativos (não texto) */ --cimo-neutral-600: #5e6e67; /* 5.38 — TEXTO SECUNDÁRIO / meta */ --cimo-neutral-700: #45544d; /* 7.99 — texto terciário, labels */ --cimo-neutral-800: #2f3c36; /* 11.54 — headings */ --cimo-neutral-900: #1f2925; /* 14.98 — TEXTO DE CORPO */ --cimo-neutral-950: #111815; /* 18.02 — máximo contraste */ --cimo-surface: #ffffff; --cimo-bg: var(--cimo-neutral-50); /* ---------------------------------------------------------------------- ACCENTS — as outras duas cores do logo. Ambas têm um par claro (só superfície) e um par escuro (texto/fundo). ---------------------------------------------------------------------- */ --cimo-leaf: #68ad45; /* 2.74 — SÓ GRÁFICO, nunca texto s/branco */ --cimo-leaf-text: #457a2b; /* 5.16 — versão utilizável em texto */ --cimo-leaf-light: #eef6e9; --cimo-sky: #c7eafb; /* 1.17 — SÓ SUPERFÍCIE */ --cimo-sky-text: #1b6b8f; /* 5.92 — versão utilizável em texto */ --cimo-sky-light: #e5f3fa; /* ---------------------------------------------------------------------- SEMÂNTICAS — significado, não marca. Success usa o verde-folha do logo (hue 100°), distinto dos 157° do primary. A cor nunca é o único portador: vai sempre com ícone/texto. ---------------------------------------------------------------------- */ --cimo-success: #457a2b; /* 5.16 */ --cimo-success-light: #eef6e9; --cimo-warning: #9a5b00; /* 5.43 — substitui #ffc107 (1.63) */ --cimo-warning-light: #faf3e5; --cimo-error: #b3261e; /* 6.54 */ --cimo-error-light: #fbebe9; --cimo-info: #1b6b8f; /* 5.92 — substitui #0dcaf0 (1.96) */ --cimo-info-light: #e5f3fa; /* ---------------------------------------------------------------------- DATA VISUALIZATION — 7 hues a luminância semelhante. Lê-se como família, distingue datasets, primary lidera a série 1. Todas ≥5.2:1 sobre branco. Consumidas por JS via getComputedStyle. ---------------------------------------------------------------------- */ --cimo-viz-1: #1f7a57; /* pine 5.28 — série principal */ --cimo-viz-2: #216883; /* sky 6.23 */ --cimo-viz-3: #597326; /* leaf 5.38 */ --cimo-viz-4: #936310; /* ochre 5.21 */ --cimo-viz-5: #405a96; /* indigo 6.73 */ --cimo-viz-6: #94384f; /* crimson 7.15 */ --cimo-viz-7: #654691; /* violet 7.40 */ --cimo-viz-other: var(--cimo-neutral-500); --cimo-viz-grid: var(--cimo-neutral-200); --cimo-viz-axis: var(--cimo-neutral-600); /* ---------------------------------------------------------------------- TIPOGRAFIA — Poppins mantém-se (já carregada, coerente com a marca). Escala fluida: substitui as ~29 medidas de fonte avulsas. ---------------------------------------------------------------------- */ --cimo-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cimo-fs-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); --cimo-fs-h1: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); --cimo-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); --cimo-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --cimo-fs-h4: 1.125rem; --cimo-fs-h5: 1rem; --cimo-fs-h6: 0.875rem; --cimo-fs-body: 1rem; --cimo-fs-sm: 0.875rem; --cimo-fs-xs: 0.75rem; --cimo-fs-label: 0.75rem; --cimo-fs-btn: 0.9375rem; --cimo-lh-tight: 1.18; --cimo-lh-heading: 1.25; --cimo-lh-body: 1.65; --cimo-lh-snug: 1.45; --cimo-ls-display: -0.02em; --cimo-ls-heading: -0.015em; --cimo-ls-label: 0.08em; --cimo-measure: 68ch; /* ---------------------------------------------------------------------- ESPAÇAMENTO — escala de 4px. Substitui os valores arbitrários. ---------------------------------------------------------------------- */ --cimo-space-1: 0.25rem; /* 4px */ --cimo-space-2: 0.5rem; /* 8px */ --cimo-space-3: 0.75rem; /* 12px */ --cimo-space-4: 1rem; /* 16px */ --cimo-space-5: 1.5rem; /* 24px */ --cimo-space-6: 2rem; /* 32px */ --cimo-space-7: 3rem; /* 48px */ --cimo-space-8: 4rem; /* 64px */ --cimo-space-9: 6rem; /* 96px */ --cimo-section-y: clamp(3rem, 6vw, 6rem); --cimo-section-y-sm: clamp(2rem, 4vw, 3.5rem); /* ---------------------------------------------------------------------- RAIO — substitui os 8 valores encontrados (15px 33×, 12, 20, 10, 25…). ---------------------------------------------------------------------- */ --cimo-radius-sm: 4px; /* inputs, badges pequenas */ --cimo-radius-md: 8px; /* botões, inputs grandes */ --cimo-radius-lg: 12px; /* cards, painéis */ --cimo-radius-pill: 999px; /* chips, filtros */ --cimo-radius-circle: 50%; /* avatares */ /* ---------------------------------------------------------------------- ELEVAÇÃO — tingida com o primary-900 (3,43,28), não preto puro. Discreta: é um centro de investigação, não um template SaaS. ---------------------------------------------------------------------- */ --cimo-shadow-xs: 0 1px 2px rgba(3, 43, 28, 0.06); --cimo-shadow-sm: 0 2px 8px rgba(3, 43, 28, 0.08); --cimo-shadow-md: 0 8px 24px rgba(3, 43, 28, 0.10); --cimo-shadow-lg: 0 16px 40px rgba(3, 43, 28, 0.12); /* ---------------------------------------------------------------------- MOVIMENTO — substitui as 13 variantes e os 48 `transition: all 0.3s`. Um único lift no hover (havia 6: -1 a -10px). ---------------------------------------------------------------------- */ --cimo-dur-fast: 150ms; --cimo-dur: 200ms; --cimo-dur-slow: 300ms; --cimo-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --cimo-lift: -3px; --cimo-focus-ring: 0 0 0 3px var(--cimo-primary-a35); } /* ========================================================================== REMAP DO TEMPLATE PORTO -------------------------------------------------------------------------- theme.css + theme-elements.css consomem estas variáveis ~1.600 vezes. Redefini-las aqui re-tinge o template inteiro sem tocar em 1 MB de CSS. Convenção do Porto: --x-100..-300 = progressivamente mais ESCURO --x--100..--300 = progressivamente mais CLARO ========================================================================== */ :root { /* --- PRIMARY: mantém-se. É a marca. ---------------------------------- */ --primary: var(--cimo-primary-500); --primary-100: var(--cimo-primary-600); --primary-200: var(--cimo-primary-700); --primary-300: var(--cimo-primary-800); --primary--100: var(--cimo-primary-400); --primary--200: var(--cimo-primary-300); --primary--300: var(--cimo-primary-200); --primary-rgba-0: rgba(0, 116, 71, 0); --primary-rgba-10: rgba(0, 116, 71, 0.1); --primary-rgba-20: rgba(0, 116, 71, 0.2); --primary-rgba-30: rgba(0, 116, 71, 0.3); --primary-rgba-40: rgba(0, 116, 71, 0.4); --primary-rgba-50: rgba(0, 116, 71, 0.5); --primary-rgba-60: rgba(0, 116, 71, 0.6); --primary-rgba-70: rgba(0, 116, 71, 0.7); --primary-rgba-80: rgba(0, 116, 71, 0.8); --primary-rgba-90: rgba(0, 116, 71, 0.9); /* --- SECONDARY: era #009e5d (verde). Passa a NEUTRO. ----------------- Isto tira o verde de `badge bg-secondary`, `btn-secondary`, `btn-outline-secondary` e de ~180 pontos do Porto. Também corrige o contraste: #009e5d com texto branco dava 3.47:1. ------------------- */ --secondary: var(--cimo-neutral-600); /* 5.38 c/ branco */ --secondary-100: var(--cimo-neutral-700); --secondary-200: var(--cimo-neutral-800); --secondary-300: var(--cimo-neutral-900); --secondary--100: var(--cimo-neutral-500); --secondary--200: var(--cimo-neutral-400); --secondary--300: var(--cimo-neutral-300); --secondary-rgba-0: rgba(94, 110, 103, 0); --secondary-rgba-10: rgba(94, 110, 103, 0.1); --secondary-rgba-20: rgba(94, 110, 103, 0.2); --secondary-rgba-30: rgba(94, 110, 103, 0.3); --secondary-rgba-40: rgba(94, 110, 103, 0.4); --secondary-rgba-50: rgba(94, 110, 103, 0.5); --secondary-rgba-60: rgba(94, 110, 103, 0.6); --secondary-rgba-70: rgba(94, 110, 103, 0.7); --secondary-rgba-80: rgba(94, 110, 103, 0.8); --secondary-rgba-90: rgba(94, 110, 103, 0.9); /* --- TERTIARY: era #00b36e (verde). Passa ao SKY do logo. ----------- */ --tertiary: var(--cimo-sky-text); /* #1b6b8f, 5.92 c/ branco */ --tertiary-100: #175b79; --tertiary-200: #134b63; --tertiary-300: #0f3b4e; --tertiary--100: #2b83aa; --tertiary--200: #4d9cc0; --tertiary--300: #8cc0d8; --tertiary-rgba-0: rgba(27, 107, 143, 0); --tertiary-rgba-10: rgba(27, 107, 143, 0.1); --tertiary-rgba-20: rgba(27, 107, 143, 0.2); --tertiary-rgba-30: rgba(27, 107, 143, 0.3); --tertiary-rgba-40: rgba(27, 107, 143, 0.4); --tertiary-rgba-50: rgba(27, 107, 143, 0.5); --tertiary-rgba-60: rgba(27, 107, 143, 0.6); --tertiary-rgba-70: rgba(27, 107, 143, 0.7); --tertiary-rgba-80: rgba(27, 107, 143, 0.8); --tertiary-rgba-90: rgba(27, 107, 143, 0.9); /* --- QUATERNARY: era #004d2c (verde). Passa à FOLHA do logo. -------- */ --quaternary: var(--cimo-leaf-text); /* #457a2b, 5.16 c/ branco */ --quaternary-100: #3a6724; --quaternary-200: #2f541d; --quaternary-300: #244116; --quaternary--100: #558f36; --quaternary--200: #68ad45; --quaternary--300: #90c576; --quaternary-rgba-0: rgba(69, 122, 43, 0); --quaternary-rgba-10: rgba(69, 122, 43, 0.1); --quaternary-rgba-20: rgba(69, 122, 43, 0.2); --quaternary-rgba-30: rgba(69, 122, 43, 0.3); --quaternary-rgba-40: rgba(69, 122, 43, 0.4); --quaternary-rgba-50: rgba(69, 122, 43, 0.5); --quaternary-rgba-60: rgba(69, 122, 43, 0.6); --quaternary-rgba-70: rgba(69, 122, 43, 0.7); --quaternary-rgba-80: rgba(69, 122, 43, 0.8); --quaternary-rgba-90: rgba(69, 122, 43, 0.9); /* --- DARK: âncora escura da marca (footer, bandas). ----------------- */ --dark: var(--cimo-primary-900); --dark-100: var(--cimo-primary-950); --dark-200: #01150e; --dark-300: #010e09; --dark--100: var(--cimo-primary-800); --dark--200: var(--cimo-primary-700); --dark--300: var(--cimo-primary-600); --dark-rgba-0: rgba(3, 43, 28, 0); --dark-rgba-10: rgba(3, 43, 28, 0.1); --dark-rgba-20: rgba(3, 43, 28, 0.2); --dark-rgba-30: rgba(3, 43, 28, 0.3); --dark-rgba-40: rgba(3, 43, 28, 0.4); --dark-rgba-50: rgba(3, 43, 28, 0.5); --dark-rgba-60: rgba(3, 43, 28, 0.6); --dark-rgba-70: rgba(3, 43, 28, 0.7); --dark-rgba-80: rgba(3, 43, 28, 0.8); --dark-rgba-90: rgba(3, 43, 28, 0.9); /* --- LIGHT: era #f5fffa (menta). 423 superfícies deixam de ser verdes. */ --light: var(--cimo-neutral-50); --light-100: var(--cimo-neutral-100); --light-200: var(--cimo-neutral-200); --light-300: var(--cimo-neutral-300); --light--100: #ffffff; --light--200: #ffffff; --light--300: #ffffff; --light-rgba-0: rgba(249, 251, 250, 0); --light-rgba-10: rgba(249, 251, 250, 0.1); --light-rgba-20: rgba(249, 251, 250, 0.2); --light-rgba-30: rgba(249, 251, 250, 0.3); --light-rgba-40: rgba(249, 251, 250, 0.4); --light-rgba-50: rgba(249, 251, 250, 0.5); --light-rgba-60: rgba(249, 251, 250, 0.6); --light-rgba-70: rgba(249, 251, 250, 0.7); --light-rgba-80: rgba(249, 251, 250, 0.8); --light-rgba-90: rgba(249, 251, 250, 0.9); /* --- INVERSE: cor do texto por cima de cada superfície. ------------- */ --primary-inverse: #ffffff; --secondary-inverse: #ffffff; --tertiary-inverse: #ffffff; --quaternary-inverse: #ffffff; --dark-inverse: #ffffff; --light-inverse: var(--cimo-neutral-900); /* --- GREY: era verde-tingido (#a6b1a6, #f0f5f0…). `.bg-color-grey` = var(--grey-100) e é o fundo dos 25 page-headers do site — é esta linha que os deixa de pintar de verde. ----------- */ --grey: var(--cimo-neutral-400); --grey-100: var(--cimo-neutral-100); --grey-200: var(--cimo-neutral-200); --grey-300: var(--cimo-neutral-300); --grey-400: var(--cimo-neutral-400); --grey-500: var(--cimo-neutral-500); --grey-600: var(--cimo-neutral-600); --grey-700: var(--cimo-neutral-700); --grey-800: var(--cimo-neutral-800); --grey-900: var(--cimo-neutral-900); --grey-1000: var(--cimo-neutral-950); /* --- Geral --- */ --default: var(--cimo-neutral-600); --border-radius: var(--cimo-radius-sm); --border-radius2x: var(--cimo-radius-md); } /* ========================================================================== REMAP DO BOOTSTRAP -------------------------------------------------------------------------- O Porto sobrepõe .bg-primary/-secondary/-dark/-light mas NÃO sobrepõe .bg-success/-info/-warning/-danger — esses ficaram nos valores de fábrica. Os utilitários .bg-* e .text-* leem `var(--bs-*-rgb)`, por isso remapear aqui corrige também as badges geradas em PHP no FrontController, sem editar uma linha de PHP. Corrige três falhas de contraste que estavam em produção: .bg-info #0dcaf0 + texto branco = 1.96:1 -> #1b6b8f = 5.92:1 .bg-warning #ffc107 + texto branco = 1.63:1 -> #9a5b00 = 5.43:1 .bg-secondary (Porto) #009e5d = 3.47:1 -> #5e6e67 = 5.38:1 ========================================================================== */ :root { --bs-primary: var(--cimo-primary-500); --bs-primary-rgb: 0, 116, 71; --bs-secondary: var(--cimo-neutral-600); --bs-secondary-rgb: 94, 110, 103; --bs-success: var(--cimo-success); --bs-success-rgb: 69, 122, 43; --bs-info: var(--cimo-info); --bs-info-rgb: 27, 107, 143; --bs-warning: var(--cimo-warning); --bs-warning-rgb: 154, 91, 0; --bs-danger: var(--cimo-error); --bs-danger-rgb: 179, 38, 30; --bs-light: var(--cimo-neutral-100); --bs-light-rgb: 243, 246, 245; --bs-dark: var(--cimo-neutral-900); --bs-dark-rgb: 31, 41, 37; --bs-body-color: var(--cimo-neutral-900); --bs-body-color-rgb: 31, 41, 37; --bs-body-bg: var(--cimo-neutral-50); --bs-body-bg-rgb: 249, 251, 250; --bs-border-color: var(--cimo-neutral-200); --bs-border-radius: var(--cimo-radius-md); --bs-link-color: var(--cimo-primary-500); --bs-link-hover-color: var(--cimo-primary-600); --bs-emphasis-color: var(--cimo-neutral-950); --bs-secondary-color: var(--cimo-neutral-600); --bs-tertiary-bg: var(--cimo-neutral-100); /* Os .alert-* do Bootstrap 5.3 leem estas três variáveis por variante. Remapear aqui chega para todos os alerts do site. */ --bs-primary-text-emphasis: var(--cimo-primary-700); --bs-primary-bg-subtle: var(--cimo-primary-50); --bs-primary-border-subtle: var(--cimo-primary-200); --bs-secondary-text-emphasis: var(--cimo-neutral-700); --bs-secondary-bg-subtle: var(--cimo-neutral-100); --bs-secondary-border-subtle: var(--cimo-neutral-300); --bs-success-text-emphasis: #2f541d; --bs-success-bg-subtle: var(--cimo-success-light); --bs-success-border-subtle: #cfe3c2; --bs-info-text-emphasis: #134b63; --bs-info-bg-subtle: var(--cimo-info-light); --bs-info-border-subtle: #bcdcea; --bs-warning-text-emphasis: #6b3f00; --bs-warning-bg-subtle: var(--cimo-warning-light); --bs-warning-border-subtle: #ecd9b4; --bs-danger-text-emphasis: #7d1a15; --bs-danger-bg-subtle: var(--cimo-error-light); --bs-danger-border-subtle: #f0c5c2; --bs-light-bg-subtle: var(--cimo-neutral-50); --bs-dark-bg-subtle: var(--cimo-neutral-300); }