/* ============================================================================ QIM — ponte de tokens para as superfícies legadas ---------------------------------------------------------------------------- Movimento 0 do plano em docs/QIM-MIGRACAO-IDENTIDADE.md. O portal ainda tem dois sistemas visuais da GX no ar: 1. GX Brutalist — app/Views/marketing/_shared_styles.php (inline) 2. GX Nexus — colors_and_type.css (raiz), usado por newsletter e cursos As CORES desses dois já vêm certas: brandCssVars() injeta a paleta do brand_settings sobre --gx-primary / --gx-gold / --gx-secondary-*. O que continua errado é a FORMA e a TIPOGRAFIA — raio 0, sombra dura deslocada, Inter + JetBrains Mono. Esta folha remapeia esses nomes para os tokens QIM. ORDEM DE CARGA (obrigatória): qim-tokens.css → CSS legado da página → esta folha Emitida por app/Views/common/_qim_bridge.php, que já garante a ordem e carrega as webfonts (sem elas o remap de família cai no fallback). NÃO toca em cor de marca: isso é território do brandCssVars(). Se um valor precisa mudar, mude no brand_settings, não aqui. Isto é um PISO, não a migração. Composição — hierarquia, ar, medida de leitura de 68ch, ordem risco→CTA — só sai com a reescrita de cada superfície. Conforme cada uma migrar para as classes .qim-*, remova a inclusão desta folha da view correspondente; quando ninguém mais incluir, apague o arquivo. ========================================================================= */ :root { /* ---- Tipografia: Inter/JetBrains → Manrope/Source Serif/IBM Plex ---- */ --font-sans: var(--qim-font-sans); --font-display: var(--qim-font-sans); --font-serif: var(--qim-font-serif); --font-mono: var(--qim-font-data); --gx-font-heading: var(--qim-font-sans); --gx-font-body: var(--qim-font-sans); /* ---- Forma: brutalismo (raio 0, sombra dura) → forma QIM ---- */ --radius: var(--qim-radius-button); --gx-radius: var(--qim-radius-button); --gx-radius-md: var(--qim-radius-input); --gx-radius-lg: var(--qim-radius-card); --shadow-card: var(--qim-shadow-card); --shadow-card-hover: var(--qim-shadow-lifted); /* ---- Superfícies e texto neutros ---- */ --gx-bg: var(--qim-surface-card); --gx-bg-muted: var(--qim-surface-page); --gx-bg-warm: var(--qim-surface-page); --gx-bg-cool: var(--qim-surface-sunken); --bg3: var(--qim-surface-sunken); --gx-fg: var(--qim-text-strong); --gx-text: var(--qim-text-strong); --gx-fg-muted: var(--qim-text-body); --gx-text-secondary: var(--qim-text-body); --gx-text-tertiary: var(--qim-text-muted); --fg3: var(--qim-text-muted); --gx-border: var(--qim-border-subtle); --gx-border-light: var(--qim-divider); /* ---- Movimento: easing e durações da marca ---- */ --gx-ease: var(--qim-ease); --ease: var(--qim-ease); --duration-fast: var(--qim-duration-fast); --duration-base: var(--qim-duration-base); /* ---- Medida ---- */ --gx-max: var(--qim-content-max); /* ---- Namespace do colors_and_type.css (newsletter e cursos) ---- Escala de tamanho, peso, tracking e espaço do sistema antigo, remapeada. O tracking "widest" do brutalismo (0.2em) desce para o 0.08em da marca: caixa alta com tracking exagerado era assinatura da identidade anterior. */ --fs-xs: var(--qim-text-xs); --fs-sm: var(--qim-text-sm); --fs-base: var(--qim-text-md); --fs-lg: var(--qim-text-lg); --fs-xl: var(--qim-text-xl); --fs-2xl: var(--qim-text-2xl); --fs-3xl: var(--qim-text-3xl); --fw-regular: var(--qim-weight-regular); --fw-medium: var(--qim-weight-medium); --fw-semibold: var(--qim-weight-semibold); --fw-bold: var(--qim-weight-bold); --fw-black: var(--qim-weight-black); --ls-tighter: var(--qim-tracking-tight); --ls-tight: var(--qim-tracking-tight); --ls-normal: var(--qim-tracking-normal); --ls-wide: var(--qim-tracking-wide); --ls-widest: var(--qim-tracking-wide); --space-1: var(--qim-space-1); --space-2: var(--qim-space-2); --space-3: var(--qim-space-3); --space-4: var(--qim-space-4); --space-5: var(--qim-space-5); --space-6: var(--qim-space-6); --space-8: var(--qim-space-7); --space-12: var(--qim-space-8); --space-16: var(--qim-space-9); --space-20: var(--qim-space-10); --bg1: var(--qim-surface-card); --bg2: var(--qim-surface-page); --fg1: var(--qim-text-strong); --fg2: var(--qim-text-body); --fg-on-dark: var(--qim-text-on-inverse); --transition-smooth: var(--qim-transition-ui); } /* ---- Módulo Cursos: namespace --ac-* de assets/courses/academy.css ---- O academy.css deriva suas superfícies do primário e do dourado da marca de origem. As cores já chegam certas via brandCssVars(), mas a composição assume "escuro + dourado": superfície = primário misturado com preto, linhas em dourado translúcido, acento dourado. Traduzido para a QIM: superfícies em Tinta e Grafito, linhas em branco a 20%, acento Decisión com texto Tinta. Enquanto o módulo não for reescrito (Movimento 1.3), isto é o piso. */ :root { --ac-bg: var(--qim-ink); --ac-surface: var(--qim-graphite); --ac-surface-deep: var(--qim-ink-dark); --ac-surface-hi: var(--qim-graphite); --ac-hairline: rgba(255, 255, 255, .2); --ac-hairline-soft: rgba(255, 255, 255, .08); --ac-hairline-hi: rgba(255, 255, 255, .4); --ac-veil: var(--qim-decision-wash); --ac-text: var(--qim-white); --ac-text-2: rgba(255, 255, 255, .9); --ac-text-3: rgba(255, 255, 255, .8); --ac-text-muted: rgba(255, 255, 255, .72); --ac-text-dim: rgba(255, 255, 255, .6); --ac-accent: var(--qim-decision); --ac-accent-soft: var(--qim-clarity); --ac-on-accent: var(--qim-ink); --ac-ease: var(--qim-ease); --ac-fast: var(--qim-duration-fast); --ac-slow: var(--qim-duration-base); --ac-shadow: var(--qim-shadow-card); --ac-shadow-card: var(--qim-shadow-card); } /* O sistema QIM não tem gradiente em lugar nenhum. O legado declarava --gradient-hero / --gradient-* e os aplicava em heros e faixas; aqui eles viram bloco chapado Tinta, que é o equivalente correto na marca. */ :root { --gradient-hero: var(--qim-surface-inverse); --gradient-dark: var(--qim-surface-inverse); --gradient-gold: var(--qim-surface-accent); } /* Foco visível é regra editorial, não detalhe de acessibilidade opcional. O legado suprimia outline em vários pontos. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--qim-focus-ring); border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }