/* ============================================================================
GERADO — NÃO EDITE ESTE ARQUIVO.
Cópia dos tokens do produto (app/assets-nexta/css/nexta-vars.css), que é a
fonte única das cores da marca. Editar aqui faz o site divergir do produto em
silêncio, que é exatamente o que este arquivo existe pra impedir.
Regenere com: php scripts/sync-site-tokens.php
O deploy roda `--check` e falha se este arquivo sair de sincronia.
A camada do site (tipografia Manrope, componentes de marketing) vive em
site.css, ao lado — essa sim é escrita à mão.
============================================================================ */
/* ============================================================================
NEXTA Design System — Variables (Dual theme: light | dark | system)
----------------------------------------------------------------------------
Identidade visual extraída do briefing "Três Deslocamentos no ESG"
(Pavlov et al., Nature Reviews Earth & Environment, 2024)
Premium · Editorial · Decision-grade
Tema controlado via:
- → paleta dark editorial
- → paleta light off-white
- sem attribute → segue prefers-color-scheme do OS
FOUC prevention: theme-switcher.js inline no seta o data-theme
ANTES do primeiro paint. Carrega de localStorage["nexta-theme"].
============================================================================ */
/* ─── Paleta DARK (default) ─────────────────────────────────────── */
:root,
:root[data-theme="dark"],
[data-bs-theme="nexta-dark"] {
/* ── Paleta primária (Verde Profundo · identidade Nexta 2025) ──── */
--nx-bg-base: #072A20;
--nx-bg-elevated: #0A3A2C;
--nx-bg-elevated-2: #0F4634;
--nx-bg-sunken: #05201A;
--nx-border: #1A4E3C;
--nx-border-soft: #123A2C;
--nx-border-strong: #26705A;
--nx-text: #E4F4EA;
--nx-text-secondary: #A8CDBB;
--nx-text-muted: #7FA795;
--nx-text-faint: #5C6B63;
--nx-text-on-accent: #ffffff;
--nx-accent: #17C55F;
--nx-accent-hover: #3FD37B;
--nx-accent-active: #0E9C4B;
--nx-accent-text: #5FE09A;
--nx-accent-soft: rgba(8, 162, 76, 0.14);
--nx-accent-glow: rgba(8, 162, 76, 0.25);
--nx-grad-accent: linear-gradient(135deg, #0E9C4B 0%, #17C55F 50%, #5FE09A 100%);
--nx-grad-accent-soft: linear-gradient(135deg, rgba(8, 162, 76,0.12) 0%, rgba(23, 197, 95,0.05) 100%);
--nx-success: #34d399;
--nx-success-soft: rgba(52, 211, 153, 0.12);
--nx-warning: #fbbf24;
--nx-warning-soft: rgba(251, 191, 36, 0.12);
--nx-danger: #ef4444;
--nx-danger-soft: rgba(239, 68, 68, 0.14);
--nx-info: #60a5fa;
--nx-info-soft: rgba(96, 165, 250, 0.12);
--nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--nx-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
--nx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
--nx-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
--nx-shadow-glow: 0 0 24px rgba(8, 162, 76, 0.15);
--nx-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.25);
color-scheme: dark;
}
/* ─── Paleta LIGHT (off-white editorial) ────────────────────────── */
:root[data-theme="light"],
[data-bs-theme="nexta-light"] {
--nx-bg-base: #F3F7F4;
--nx-bg-elevated: #ffffff;
--nx-bg-elevated-2: #E4F4EA;
--nx-bg-sunken: #D8EFE0;
--nx-border: #D3E7DA;
--nx-border-soft: #E4F4EA;
--nx-border-strong: #AFCDBB;
--nx-text: #17251F;
--nx-text-secondary: #5C6B63;
--nx-text-muted: #6E7C74;
--nx-text-faint: #9BA9A2;
--nx-text-on-accent: #ffffff;
--nx-accent: #08A24C;
--nx-accent-hover: #07873F;
--nx-accent-active: #066A31;
--nx-accent-text: #07873F;
--nx-accent-soft: rgba(8, 162, 76, 0.10);
--nx-accent-glow: rgba(8, 162, 76, 0.18);
--nx-grad-accent: linear-gradient(135deg, #17251F 0%, #08A24C 60%, #17C55F 100%);
--nx-grad-accent-soft: linear-gradient(135deg, rgba(8, 162, 76,0.08) 0%, rgba(23, 197, 95,0.04) 100%);
--nx-success: #07873F;
--nx-success-soft: rgba(21, 128, 61, 0.10);
--nx-warning: #b45309;
--nx-warning-soft: rgba(180, 83, 9, 0.10);
--nx-danger: #b91c1c;
--nx-danger-soft: rgba(185, 28, 28, 0.10);
--nx-info: #1d4ed8;
--nx-info-soft: rgba(29, 78, 216, 0.10);
--nx-shadow-sm: 0 1px 2px rgba(10, 58, 44, 0.06);
--nx-shadow: 0 4px 12px rgba(10, 58, 44, 0.08);
--nx-shadow-md: 0 8px 24px rgba(10, 58, 44, 0.10);
--nx-shadow-lg: 0 16px 40px rgba(10, 58, 44, 0.12);
--nx-shadow-glow: 0 0 24px rgba(8, 162, 76, 0.18);
--nx-shadow-card: 0 1px 0 rgba(0,0,0,0.02) inset, 0 2px 8px rgba(10, 58, 44, 0.06);
color-scheme: light;
}
/* ─── SYSTEM mode: sem data-theme → segue prefers-color-scheme ── */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--nx-bg-base: #F3F7F4;
--nx-bg-elevated: #ffffff;
--nx-bg-elevated-2: #E4F4EA;
--nx-bg-sunken: #D8EFE0;
--nx-border: #D3E7DA;
--nx-border-soft: #E4F4EA;
--nx-border-strong: #AFCDBB;
--nx-text: #17251F;
--nx-text-secondary: #5C6B63;
--nx-text-muted: #6E7C74;
--nx-text-faint: #9BA9A2;
--nx-accent: #08A24C;
--nx-accent-hover: #07873F;
--nx-accent-active: #066A31;
--nx-accent-text: #07873F;
--nx-accent-soft: rgba(8, 162, 76, 0.10);
--nx-accent-glow: rgba(8, 162, 76, 0.18);
--nx-grad-accent: linear-gradient(135deg, #17251F 0%, #08A24C 60%, #17C55F 100%);
--nx-success: #07873F;
--nx-warning: #b45309;
--nx-danger: #b91c1c;
--nx-info: #1d4ed8;
--nx-shadow-sm: 0 1px 2px rgba(10, 58, 44, 0.06);
--nx-shadow: 0 4px 12px rgba(10, 58, 44, 0.08);
--nx-shadow-md: 0 8px 24px rgba(10, 58, 44, 0.10);
--nx-shadow-lg: 0 16px 40px rgba(10, 58, 44, 0.12);
--nx-shadow-card: 0 1px 0 rgba(0,0,0,0.02) inset, 0 2px 8px rgba(10, 58, 44, 0.06);
color-scheme: light;
}
}
/* ─── Tokens partilhados entre temas (não mudam com light/dark) ── */
:root {
/* ── Superfície escura da marca ──────────────────────────────────
Verde Noite e Verde Profundo como tokens PRÓPRIOS, e não derivados
do tema. O site usava --nx-text como fundo escuro, apostando que no
tema claro ele fosse o verde profundo; com Ink (#17251F) essa aposta
vira quase-preto. Cor de fundo precisa de nome de cor de fundo. */
--nx-surface-deep: #072A20; /* Verde Noite · superfície escura */
--nx-surface-deep-2: #0A3A2C; /* Verde Profundo · primário */
--nx-on-deep: #E4F4EA; /* Verde Suave · texto sobre o escuro */
--nx-accent-on-deep: #17C55F; /* Verde Vivo · accent legível no escuro */
/* ── Categorias ESG (cores semânticas — funcionam em ambos temas) ── */
--nx-cat-I: #38bdf8;
--nx-cat-II: #818cf8;
--nx-cat-III: #4ade80;
--nx-cat-IV: #fbbf24;
--nx-cat-V: #f87171;
--nx-cat-VI: #c084fc;
--nx-cat-VII: #fb7185;
--nx-cat-VIII: #22d3ee;
--nx-cat-IX: #94a3b8;
/* ── Tier de credibilidade T1-T6 ─────────────────────────────── */
--nx-tier-T1: #34d399;
--nx-tier-T2: #4ade80;
--nx-tier-T3: #fbbf24;
--nx-tier-T4: #fb923c;
--nx-tier-T5: #f87171;
--nx-tier-T6: #ef4444;
/* ── Tipografia ──────────────────────────────────────────────── */
--nx-font-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--nx-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
--nx-font-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, "Cascadia Code", Consolas, monospace;
--nx-fs-xs: 11px;
--nx-fs-sm: 12px;
--nx-fs-base: 14px;
--nx-fs-md: 15px;
--nx-fs-lg: 18px;
--nx-fs-xl: 22px;
--nx-fs-2xl: 28px;
--nx-fs-3xl: 36px;
--nx-fs-stat: 56px;
--nx-fs-hero: 72px;
--nx-fw-regular: 400;
--nx-fw-medium: 500;
--nx-fw-semibold: 600;
--nx-fw-bold: 700;
--nx-fw-display: 800;
--nx-lh-tight: 1.15;
--nx-lh-snug: 1.3;
--nx-lh-base: 1.5;
--nx-lh-loose: 1.7;
--nx-track-display: -0.02em;
--nx-track-tight: -0.015em;
--nx-track-normal: 0;
--nx-track-wide: 0.06em;
--nx-track-wider: 0.12em;
/* ── Espaçamento (8pt grid) ──────────────────────────────────── */
--nx-sp-1: 4px;
--nx-sp-2: 8px;
--nx-sp-3: 12px;
--nx-sp-4: 16px;
--nx-sp-5: 20px;
--nx-sp-6: 24px;
--nx-sp-8: 32px;
--nx-sp-10: 40px;
--nx-sp-12: 48px;
--nx-sp-16: 64px;
--nx-sp-20: 80px;
/* ── Radius ──────────────────────────────────────────────────── */
--nx-rad-sm: 4px;
--nx-rad-md: 8px;
--nx-rad-lg: 12px;
--nx-rad-xl: 16px;
--nx-rad-2xl: 24px;
--nx-rad-pill: 999px;
/* ── Layout ──────────────────────────────────────────────────── */
--nx-sidebar-w: 72px;
--nx-sidebar-w-expanded: 240px;
--nx-header-h: 64px;
--nx-content-max: 1440px;
/* ── Transitions ─────────────────────────────────────────────── */
--nx-trans-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--nx-trans: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--nx-trans-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ─── Smooth transition entre temas (evita flash ao trocar) ────── */
html.nx-theme-transition,
html.nx-theme-transition *,
html.nx-theme-transition *:before,
html.nx-theme-transition *:after {
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
transition-delay: 0 !important;
}
/* ============================================================================
MODAL FLUTUANTE (.modalF) — usado pelo init.js pattern AJAX
----------------------------------------------------------------------------
Padrão do projeto: data-toggle="modal" data-target="modal-gg" carrega
conteúdo via AJAX dentro de .modalF .modal-body.
============================================================================ */
/* Tamanhos do dialog (modal-gg = grande, modal-md = médio, modal-xs = pequeno) */
.modalF .modal-dialog.modal-gg { max-width: min(1100px, 95vw); }
.modalF .modal-dialog.modal-lg { max-width: min(900px, 92vw); }
.modalF .modal-dialog.modal-md { max-width: min(640px, 92vw); }
.modalF .modal-dialog.modal-xs { max-width: min(420px, 92vw); }
/* Conteúdo do modal — bg dark Nexta */
.modalF .modal-content {
background: var(--nx-bg-elevated);
border: 1px solid var(--nx-border);
border-radius: var(--nx-rad-lg);
color: var(--nx-text);
box-shadow: var(--nx-shadow-lg);
}
.modalF .modal-header {
border-bottom: 1px solid var(--nx-border-soft);
padding: 16px 22px;
}
.modalF .modal-title {
color: var(--nx-text);
font-family: var(--nx-font-display);
font-weight: 600;
font-size: 16px;
}
.modalF .modal-body {
color: var(--nx-text);
padding: 20px 22px;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.modalF .modal-footer {
border-top: 1px solid var(--nx-border-soft);
padding: 14px 22px;
}
/* Botão de fechar custom (substitui o btn-close Bootstrap que fica
invisível no dark theme) */
.modalF .nx-modal-close {
background: var(--nx-bg-sunken);
border: 1px solid var(--nx-border);
color: var(--nx-text-secondary);
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
transition: var(--nx-trans-fast);
padding: 0;
flex-shrink: 0;
}
.modalF .nx-modal-close:hover {
background: var(--nx-danger-soft);
border-color: var(--nx-danger);
color: var(--nx-danger);
}
.modalF .nx-modal-close:focus {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
}
/* Mantém compat com .btn-close antigo se aparecer em outros lugares */
.modalF .btn-close {
filter: invert(1) brightness(1.2);
opacity: 0.85;
}
.modalF .btn-close:hover { opacity: 1; }
/* Backdrop: leve tint dark */
.modal-backdrop.show {
opacity: 0.6;
background: #000;
}
/* Hover/click feedback nos cards .ev-card[data-toggle="modal"] */
.ev-card[data-toggle="modal"] {
cursor: pointer;
user-select: none;
}
.ev-card[data-toggle="modal"]:focus {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
}
/* ============================================================================
THEMED LOGOS — troca automática de variante dark/light
----------------------------------------------------------------------------
HTML pattern (helper PHP NxLogo::render):
Default: dark-themed-logo visível, light escondida.
data-theme="light" inverte. system mode usa @media prefers-color-scheme.
============================================================================ */
/* Por padrão, ambas escondidas — só uma se mostra */
.nx-themed-logo {
display: none;
}
/* DARK theme explícito → mostra .--dark */
:root[data-theme="dark"] .nx-themed-logo--dark {
display: inline-block;
}
/* LIGHT theme explícito → mostra .--light */
:root[data-theme="light"] .nx-themed-logo--light {
display: inline-block;
}
/* SYSTEM mode (sem data-theme) → segue prefers-color-scheme */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .nx-themed-logo--dark {
display: inline-block;
}
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) .nx-themed-logo--light {
display: inline-block;
}
}
/* Fallback: se não há prefers-color-scheme suportado E sem data-theme,
mostra a versão dark (default da identidade Nexta) */
@media (prefers-color-scheme: no-preference) {
:root:not([data-theme]) .nx-themed-logo--dark {
display: inline-block;
}
}