/* ============================================================ PROPRIEDADES ANIMAVEIS DO FUNDO DA HERO ------------------------------------------------------------ Sem `@property` uma custom property e apenas um texto: o navegador nao sabe interpolar entre dois valores e nao reavalia quem depende dela. Registrando com `syntax`, ela vira um tipo de verdade — da para animar em keyframes e tudo que a consome recalcula junto. Foi exatamente isso que faltou nas tentativas anteriores de mover este gradiente. ============================================================ */ @property --grad-x { syntax: ''; inherits: false; initial-value: 50%; } @property --grad-y { syntax: ''; inherits: false; initial-value: 10%; } @property --grad-w { syntax: ''; inherits: false; initial-value: 125%; } @property --grad-h { syntax: ''; inherits: false; initial-value: 125%; } @property --dark-stop{ syntax: ''; inherits: false; initial-value: 40%; } /* Alfa do glow inferior. Registrada tambem para o scroll poder intensifica-la sem esbarrar na animacao de opacidade do ::after. */ @property --glow-a { syntax: ''; inherits: true; initial-value: 0.58; } /* ============================================================ GALAXY MEDIA — TOKENS v4.0 Reposicionamento corporativo. Paleta herdada de galaxy-tokens.css v3.0 (inalterada nos hex). Camada semântica nova por cima. Tipografia: Geist + Geist Mono. Todo contraste marcado AA foi medido, não estimado. ============================================================ */ :root { /* ---------------------------------------------------------- 1. PALETA BRUTA — herdada, não alterar ---------------------------------------------------------- */ --c-black: #020104; /* fundo mais escuro, pedido do cliente */ --c-surface: #0C0718; --c-surface-2: #070312; --c-deep: #1C123A; --c-mid: #372364; --c-primary: #7043DD; --c-primary-dk: #5A35B5; --c-light: #A884F0; --c-muted: #786C94; --c-offwhite: #F2EEFC; --c-white: #FFFFFF; /* Superfície única de card. Antes cada seção inventava o próprio gradiente e os blocos não pareciam da mesma família. */ --c-panel: #0D0A14; --c-panel-up: #14101F; /* mesmo card, estado de hover */ /* Roxo fechado do hover do botão: contraste sem estourar para claro. */ --c-accent-deep: #4516B4; /* Cruz de canto das células de grade. Vive aqui porque é usada como imagem de fundo, e background-image não aceita currentColor — a cor precisa estar escrita dentro do próprio SVG. */ --cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23F2EEFC' stroke-opacity='.16' stroke-width='.9'/%3E%3C/svg%3E"); --cruz-acento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23A884F0' stroke-opacity='.85' stroke-width='1'/%3E%3C/svg%3E"); /* Derivadas para atingir AA 4.5:1 em texto de corpo. #786C94 falha (4.22:1 no escuro, 4.21:1 no claro). */ /* Cinza NEUTRO, não arroxeado: o secundário precisa ler como cinza aparente, não como uma variação da cor da marca. */ --c-muted-up: #9C99A6; /* texto secundário sobre fundo escuro */ --c-muted-down: #5E5B68; /* texto secundário sobre fundo claro */ /* ---------------------------------------------------------- 2. CAMADA SEMÂNTICA ---------------------------------------------------------- */ /* Superfícies */ --bg-base: var(--c-black); /* fundo padrão do site */ --bg-elevated: var(--c-surface); /* hover de linha, cards raros */ --bg-sunken: var(--c-surface-2); /* poços, media wells */ --bg-inverse: var(--c-offwhite); /* seções claras (Método etc.) */ /* Texto sobre fundo escuro */ --text-primary: var(--c-offwhite); /* 17.76:1 AA */ --text-secondary: var(--c-muted-up); /* 5.78:1 AA */ --text-tertiary: var(--c-muted); /* 4.22:1 — decorativo/rótulo apenas */ /* Texto sobre fundo claro */ --text-inverse: var(--c-black); /* 17.76:1 AA */ --text-inverse-secondary: var(--c-muted-down); /* 5.50:1 AA */ /* Acento */ --accent: var(--c-primary); /* fundo de CTA, filetes */ --accent-hover: #7E52E8; --accent-on-light: var(--c-primary); /* 5.21:1 AA sobre --bg-inverse */ --accent-on-dark: var(--c-light); /* 6.97:1 AA sobre --bg-base */ --accent-contrast: var(--c-offwhite); /* 5.21:1 AA sobre --accent */ /* Bordas — sempre 1px, sempre baixa opacidade */ --border: rgba(242, 238, 252, 0.08); --border-strong: rgba(242, 238, 252, 0.16); --border-accent: rgba(112, 67, 221, 0.35); --border-inverse: rgba(8, 4, 18, 0.10); /* Estados semânticos (painel) */ --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --info: #60A5FA; /* ---------------------------------------------------------- 3. TIPOGRAFIA — Geist. Teto de peso 600. Sem serifa, sem itálico. ---------------------------------------------------------- */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Escala reduzida conforme briefing §7.2 */ --text-h1: clamp(2rem, 3.9vw, 3.4rem); --text-h2: clamp(1.8rem, 3vw, 2.8rem); --text-h3: clamp(1.35rem, 2vw, 1.75rem); --text-h4: 1.25rem; /* Nome de projeto na lista editorial (§9.2) */ --text-project: clamp(1.6rem, 3vw, 2.6rem); --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.9375rem; --text-xs: 0.8125rem; --text-2xs: 0.6875rem; /* Pesos — 700+ banido a pedido */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; --leading-tight: 1.1; --leading-snug: 1.25; --leading-body: 1.6; --leading-relaxed: 1.75; --track-title: -0.032em; --track-body: -0.011em; --track-label: 0.08em; --track-wide: 0.12em; --measure: 62ch; /* ---------------------------------------------------------- 4. ESPAÇAMENTO — múltiplos de 8 (4 apenas nos dois primeiros) ---------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px; --section-py: clamp(96px, 12vh, 180px); /* ---------------------------------------------------------- 5. LAYOUT — grid de 12 colunas ---------------------------------------------------------- */ --max-width: 1440px; --page-pad: clamp(20px, 5vw, 64px); --grid-cols: 12; --grid-gap: clamp(16px, 2vw, 32px); /* ---------------------------------------------------------- 6. RADIUS — teto de 12px (§9.5). xl/2xl v3 aposentados. ---------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ---------------------------------------------------------- 7. ELEVAÇÃO — só onde há elevação real ---------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.40); --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.50); /* ---------------------------------------------------------- 8. MOVIMENTO — sem bounce, sem elastic ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-normal: 280ms; --dur-slow: 600ms; /* ---------------------------------------------------------- 9. SLOT DE MÍDIA DA HERO (§6.1) — trocável sem mexer no HTML ---------------------------------------------------------- */ /* O gradiente da hero NAO mora aqui. Ele passa a ser declarado direto em .hero__bg, porque a indirecao por uma custom property NAO registrada quebrava a atualizacao: as porcentagens (essas sim registradas com @property) interpolavam, mas o `background` que as consumia atraves de --hero-media ficava preso no primeiro valor computado. --hero-media continua valendo como override: se voce defini-la, ela vence o gradiente padrao. */ --hero-media-opacity: 1; /* ---------------------------------------------------------- */ --z-bg: 0; --z-content: 1; --z-float: 60; --z-nav: 80; --z-overlay: 90; --z-toast: 100; } /* ============================================================ SEÇÃO CLARA — inverte os papéis, não redefine a paleta. Aplicar .is-inverse na
. ============================================================ */ .is-inverse { --bg-base: var(--bg-inverse); --bg-elevated: rgba(8, 4, 18, 0.04); --bg-sunken: rgba(8, 4, 18, 0.06); --text-primary: var(--text-inverse); --text-secondary: var(--text-inverse-secondary); --text-tertiary: var(--text-inverse-secondary); --accent-on-dark: var(--accent-on-light); --border: var(--border-inverse); --border-strong: rgba(8, 4, 18, 0.18); background: var(--bg-base); color: var(--text-primary); } /* ============================================================ REDUÇÃO DE MOVIMENTO — desligar tudo, estado final visível ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }