/* ===================================================================== GVSX Mod — tokens dos dois temas. O tema escuro é o padrão (:root). O claro entra por html[data-theme="light"], posto por um script inline no (inc/theme-toggle.php) antes de qualquer CSS, então não há "piscada". Todo o resto do CSS do tema usa só estes nomes; nenhum arquivo além deste declara cor. Os presets do WordPress (--wp--preset--color--*) são redefinidos no claro para os blocos que usam classes has-*-color mudarem sozinhos. ===================================================================== */ :root { color-scheme: dark; /* superfícies */ --gvsx-bg: #080B09; --gvsx-bg-2: #0D120F; --gvsx-surface: #121814; --gvsx-surface-2: #1A211C; --gvsx-surface-3: #222B25; --gvsx-line: rgb(190 235 205 / 0.09); --gvsx-line-strong: rgb(190 235 205 / 0.18); /* texto */ --gvsx-text: #F1F5F2; --gvsx-text-2: #AEB8B1; --gvsx-text-3: #7E8A82; /* acento (um só) */ --gvsx-accent: #00E676; --gvsx-accent-hover: #2BF08B; --gvsx-accent-ink: #052E16; --gvsx-accent-text: #00E676; --gvsx-accent-soft: rgb(var(--gvsx-glow-rgb) / 0.12); /* semânticas */ --gvsx-info: #5FD8E8; --gvsx-info-soft: rgb(95 216 232 / 0.14); --gvsx-warn: #FFC857; --gvsx-warn-soft: rgb(255 200 87 / 0.14); --gvsx-danger: #FF6B6B; --gvsx-danger-soft: rgb(255 107 107 / 0.12); --gvsx-star: #FFC53D; /* mídia: texto claro sobre imagem nos dois temas */ --gvsx-media-text: #F4F7F5; --gvsx-media-text-2: rgb(244 247 245 / 0.78); --gvsx-scrim: rgb(3 6 4 / 0.72); --gvsx-scrim-0: rgb(3 6 4 / 0); /* canais para alfa (espaço) e para o CSS herdado (vírgula) */ --gvsx-fg-rgb: 241 245 242; --gvsx-bg-rgb: 8 11 9; --gvsx-glow-rgb: 0 230 118; --gvsx-info-rgb: 95 216 232; --gvsx-warn-rgb: 255 200 87; --gvsx-danger-rgb: 255 107 107; --gvsx-shadow-rgb: 0 0 0; --gvsx-well: rgb(0 0 0 / 0.3); --gvsx-d-glow: 0, 230, 118; /* sombras: sempre para baixo, sem halo; o brilho fica só no CTA */ --gvsx-shadow-1: 0 1px 2px rgb(0 0 0 / 0.45), 0 10px 24px -12px rgb(0 0 0 / 0.6); --gvsx-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 24px 48px -24px rgb(0 0 0 / 0.75); --gvsx-shadow-3: 0 4px 12px rgb(0 0 0 / 0.5), 0 40px 80px -32px rgb(0 0 0 / 0.85); --gvsx-shadow-cta: 0 12px 24px -10px rgb(var(--gvsx-glow-rgb) / 0.45); --gvsx-d-card: var(--gvsx-shadow-1); --gvsx-d-card-hi: var(--gvsx-shadow-2); --gvsx-d-float: var(--gvsx-shadow-2); --gvsx-d-float-hi: var(--gvsx-shadow-3); /* forma */ --gvsx-radius-s: 4px; --gvsx-radius-m: 10px; --gvsx-radius-l: 12px; --gvsx-radius-xl: 16px; --gvsx-radius: var(--gvsx-radius-l); /* movimento */ --gvsx-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --gvsx-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --gvsx-dur-1: 120ms; --gvsx-dur-2: 200ms; --gvsx-dur-3: 300ms; --gvsx-dur-4: 600ms; /* tipografia */ --gvsx-font-display: Archivo, system-ui, sans-serif; --gvsx-font-text: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; --gvsx-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* medidas */ --gvsx-header-h: 72px; --gvsx-gutter: var(--wp--preset--spacing--30); /* apelidos do CSS herdado (conta, checkout, obrigado, afiliado) */ --gvsx-green: var(--gvsx-accent); --gvsx-neon: var(--gvsx-accent-text); --gvsx-cyan: var(--gvsx-info); --gvsx-glass: var(--gvsx-surface); --gvsx-glass-border: var(--gvsx-line); } html[data-theme="light"] { color-scheme: light; --gvsx-bg: #F6F8F6; --gvsx-bg-2: #EEF2EF; --gvsx-surface: #FFFFFF; --gvsx-surface-2: #E9EEEA; --gvsx-surface-3: #DDE4DF; --gvsx-line: rgb(10 30 18 / 0.10); --gvsx-line-strong: rgb(10 30 18 / 0.20); --gvsx-text: #0E1511; --gvsx-text-2: #4C5750; --gvsx-text-3: #66716A; --gvsx-accent: #00C462; --gvsx-accent-hover: #00B35A; --gvsx-accent-ink: #052E16; --gvsx-accent-text: #007A3D; --gvsx-accent-soft: rgb(0 150 70 / 0.10); --gvsx-info: #0A8FA6; --gvsx-info-soft: rgb(10 143 166 / 0.12); --gvsx-warn: #A86A00; --gvsx-warn-soft: rgb(168 106 0 / 0.12); --gvsx-danger: #C93838; --gvsx-danger-soft: rgb(201 56 56 / 0.10); --gvsx-star: #D9A400; --gvsx-fg-rgb: 14 21 17; --gvsx-bg-rgb: 246 248 246; --gvsx-glow-rgb: 0 150 70; --gvsx-info-rgb: 10 143 166; --gvsx-warn-rgb: 168 106 0; --gvsx-danger-rgb: 201 56 56; --gvsx-shadow-rgb: 10 30 18; --gvsx-well: rgb(10 30 18 / 0.05); --gvsx-d-glow: 0, 150, 70; --gvsx-shadow-1: 0 1px 2px rgb(10 30 18 / 0.08), 0 10px 24px -12px rgb(10 30 18 / 0.18); --gvsx-shadow-2: 0 2px 6px rgb(10 30 18 / 0.08), 0 24px 48px -24px rgb(10 30 18 / 0.28); --gvsx-shadow-3: 0 4px 12px rgb(10 30 18 / 0.1), 0 40px 80px -32px rgb(10 30 18 / 0.35); --gvsx-shadow-cta: 0 12px 24px -10px rgb(var(--gvsx-glow-rgb) / 0.35); /* presets do WordPress no claro */ --wp--preset--color--base: #F6F8F6; --wp--preset--color--base-2: #EEF2EF; --wp--preset--color--surface: #FFFFFF; --wp--preset--color--surface-2: #E9EEEA; --wp--preset--color--border: #CCD5CF; --wp--preset--color--contrast: #0E1511; --wp--preset--color--muted: #4C5750; --wp--preset--color--muted-2: #66716A; --wp--preset--color--primary: #00C462; --wp--preset--color--primary-bright: #007A3D; --wp--preset--color--primary-ink: #052E16; --wp--preset--color--secondary: #0A8FA6; --wp--preset--color--warn: #A86A00; --wp--preset--color--danger: #C93838; --wp--preset--color--star: #D9A400; } /* Sem JavaScript o atributo não existe: segue o sistema. */ @media (prefers-color-scheme: light) { html:not([data-theme]) { color-scheme: light; } } /* ===================================================================== Grade de blocos: escala de espaços, papel listrado e fio de 1px. O sistema vem da auditoria em PLANO-BASE-VISUAL.md; as cores são as do GVSX. ===================================================================== */ :root { /* escala de espaços (base 4) */ --gvsx-s-1: 4px; --gvsx-s-2: 8px; --gvsx-s-3: 12px; --gvsx-s-4: 16px; --gvsx-s-5: 20px; --gvsx-s-6: 24px; --gvsx-s-7: 32px; --gvsx-s-8: 40px; --gvsx-s-9: 64px; --gvsx-s-10: 96px; --gvsx-s-11: 120px; /* papel (margens e espaçadores), bloco (a seção) e fio (o vão de 1px entre eles) */ --gvsx-paper: var(--gvsx-bg-2); --gvsx-block: var(--gvsx-bg-2); --gvsx-rule: #1F2923; --gvsx-stripe-ink: rgb(190 235 205 / 0.09); --gvsx-stripes: repeating-linear-gradient(45deg, var(--gvsx-stripe-ink) 0 1px, transparent 1px 14px); /* medidas da linha: a coluna central vai até a largura larga do tema; margens e espaçadores curtos */ --gvsx-board-max: 1440px; --gvsx-gutter-min: 16px; --gvsx-spacer: 32px; --gvsx-block-y: 32px; --gvsx-block-x: 20px; --gvsx-radius-block: 8px; --gvsx-dur-marquee: 60s; } @media (min-width: 782px) { :root { --gvsx-gutter-min: 32px; --gvsx-spacer: 48px; --gvsx-block-y: 56px; --gvsx-block-x: 48px; } } @media (min-width: 1441px) { :root { --gvsx-gutter-min: 48px; --gvsx-block-y: 64px; --gvsx-block-x: 56px; } } @media (min-width: 1800px) { :root { --gvsx-board-max: 1600px; } } html[data-theme="light"] { --gvsx-paper: #FFFFFF; --gvsx-block: #FFFFFF; /* no branco, o fio precisa de mais contraste que no escuro para a grade (e as estrelas nos vértices) aparecer */ --gvsx-rule: #C3CEC6; --gvsx-stripe-ink: #D2DBD5; }