/* ============================================================================ REVISTA CARNAVAL — DESIGN TOKENS Fonte de verdade do sistema visual. Todo componente do site consome daqui. Cores e tipografia extraídas do Figma (SMEL / Desktop-2, nó 26:9). Escala de espaçamento e tamanho reconstruída em BASE 8. ========================================================================= */ :root { /* ── MARCA ────────────────────────────────────────────────────────────── O roxo é o cromo do site: gradiente do topo, header preso e rodapé. O verde é ação — item ativo, foco, links de avanço. Nunca decoração. */ --rc-purple: #2C084C; --rc-purple-deep: #2A0F42; --rc-purple-light: #7d57bd; /* Tom mais profundo — base das fotos e dos véus do hero. Triplet RGB (não hex) para permitir alfa via rgb(var(--rc-purple-deepest) / .92). */ --rc-purple-deepest: 20 8 34; --rc-green: #9BD150; --rc-pink: #dd17a5; --rc-ink: #131A27; --rc-paper: #F4F6FA; /* Faixa de 4 blocos do topo — assinatura carnavalesca, 4 cores sólidas */ --rc-flag-1: #F7941D; --rc-flag-2: #dd17a5; --rc-flag-3: #F5C518; --rc-flag-4: #8DC63F; /* ── DESIGN SYSTEM DE CORES — Paleta expandida do logo ────────────────── 5 cores primárias × 5 tons = 25 variações de contraste e hierarquia. Padrão: 50 (muito claro) → 900 (muito escuro). */ /* Ciano — navegação, elementos interativos */ --rc-cyan-50: #E0F7FF; --rc-cyan-100: #B3ECFF; --rc-cyan-400: #4DB8E8; --rc-cyan-600: #0099CC; --rc-cyan-700: #006B99; --rc-cyan-800: #004D66; --rc-cyan-900: #004A66; /* Índigo — composição, harmonia */ --rc-indigo-50: #EDE9FF; --rc-indigo-100: #D1BFFF; --rc-indigo-400: #7D57BD; --rc-indigo-600: #5A3E8C; --rc-indigo-900: #2C1A4A; /* Violeta — estrutura, peso visual */ --rc-violet-50: #F8E9FF; --rc-violet-100: #E8BFFF; --rc-violet-400: #B366FF; --rc-violet-600: #7A33CC; --rc-violet-900: #3D1A66; /* Magenta — ação, marcação editorial (DO LOGO) */ --rc-magenta-50: #FFE0F5; --rc-magenta-100: #FFB3E0; --rc-magenta-500: #E81E99; --rc-magenta-600: #C6158A; --rc-magenta-700: #A01166; --rc-magenta-800: #7A0E4D; --rc-magenta-900: #4A0A33; /* Laranja — energia, destaque (DO LOGO) */ --rc-orange-50: #FFF0E6; --rc-orange-100: #FFD9B3; --rc-orange-400: #FF9933; --rc-orange-600: #E85D0B; --rc-orange-700: #C84B09; --rc-orange-800: #A63807; --rc-orange-900: #7A2D05; /* Amarelo — destaque, foco */ --rc-yellow-50: #FFFAE6; --rc-yellow-100: #FFF4B3; --rc-yellow-500: #F5C518; --rc-yellow-700: #C69911; --rc-yellow-800: #9A7508; --rc-yellow-900: #664C00; /* Verde — sucesso, ação confirmada (já existia, adicionar variações) */ --rc-green-50: #F0F9E8; --rc-green-100: #D1F0B1; --rc-green-400: #9BD150; --rc-green-600: #6BA825; --rc-green-700: #558A1B; --rc-green-800: #3D6415; --rc-green-900: #2D4A0F; /* ── NEUTROS ──────────────────────────────────────────────────────────── */ --rc-bg: #FFFFFF; --rc-bg-alt: #F4F6FA; --rc-text: #131A27; --rc-text-2: #4A5568; --rc-text-3: #8A93A3; --rc-line: #E3E7EF; /* ── SUPERFÍCIE DE VIDRO ──────────────────────────────────────────────── Usada no menu e no botão de contato sobre o gradiente roxo. */ --rc-glass: rgba(244, 246, 250, 0.10); --rc-glass-line: rgba(244, 246, 250, 0.20); --rc-glass-hover: rgba(244, 246, 250, 0.16); /* ── GRADIENTE DO TOPO ────────────────────────────────────────────────── Roxo 92% descendo até transparente. O vídeo em loop vive por baixo, mascarado com o mesmo fade, para "quase sumir" junto com o roxo. Rampa em curva (ease-out): cai rápido no início e dissolve numa cauda longa. Uma rampa linear cria borda visível no fim — o olho enxerga a quebra da derivada. */ --rc-veil: linear-gradient(180deg, rgba(26, 6, 44, 0.99) 0%, rgba(26, 6, 44, 0.88) 16%, rgba(26, 6, 44, 0.79) 30%, rgba(26, 6, 44, 0.65) 43%, rgba(26, 6, 44, 0.49) 54%, rgba(26, 6, 44, 0.34) 64%, rgba(26, 6, 44, 0.22) 73%, rgba(26, 6, 44, 0.13) 81%, rgba(26, 6, 44, 0.07) 88%, rgba(26, 6, 44, 0.03) 94%, rgba(26, 6, 44, 0.00) 100%); --rc-veil-mask: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.44) 64%, rgba(0,0,0,.22) 76%, rgba(0,0,0,.09) 87%, rgba(0,0,0,.02) 95%, transparent 100%); /* Altura da atmosfera: envolve hero + destaques e ainda sobra cauda para dissolver */ --rc-backdrop-h: clamp(760px, 82vw, 1180px); --rc-header-stuck: rgba(44, 8, 76, 0.80); /* 1ª cor do gradiente a 80% */ --rc-video-opacity: .38; /* ── ESPAÇAMENTO — BASE 8 ─────────────────────────────────────────────── Meio-passo (4px) só para hairlines e ajustes ópticos. */ --rc-space-0h: 4px; --rc-space-1: 8px; --rc-space-2: 16px; --rc-space-3: 24px; --rc-space-4: 32px; --rc-space-5: 40px; --rc-space-6: 48px; --rc-space-7: 56px; --rc-space-8: 64px; --rc-space-10: 80px; --rc-space-12: 96px; --rc-space-14: 112px; --rc-space-16: 128px; --rc-space-20: 160px; /* ── LAYOUT ───────────────────────────────────────────────────────────── 1440 − (80 × 2) = 1280. Gutter cai para 24 no mobile. */ --rc-maxw: 1280px; --rc-gutter: clamp(var(--rc-space-3), 5.5vw, var(--rc-space-10)); --rc-header-h: 124px; --rc-footer-h: 72px; /* rodapé desktop */ --rc-flag-h: 2px; /* Respiro vertical das seções — macro-whitespace, nunca compressão */ --rc-section-y: clamp(var(--rc-space-4), 7vw, var(--rc-space-14)); /* ── TIPOGRAFIA ───────────────────────────────────────────────────────── DM Sans (Figma: UI/Navigation — Medium 500, 16/24, tracking 0). Entrelinhas em múltiplos de 4 para manter o ritmo vertical. */ --rc-font: "DM Sans", system-ui, sans-serif; --rc-fw-regular: 400; --rc-fw-medium: 500; --rc-fw-bold: 700; --rc-text-xs: 12px; --rc-lh-xs: 16px; --rc-text-sm: 14px; --rc-lh-sm: 20px; --rc-text-base: 16px; --rc-lh-base: 24px; --rc-text-lg: 20px; --rc-lh-lg: 28px; --rc-text-xl: 24px; --rc-lh-xl: 32px; --rc-text-2xl: 32px; --rc-lh-2xl: 40px; --rc-text-3xl: 40px; --rc-lh-3xl: 48px; --rc-text-4xl: 56px; --rc-lh-4xl: 64px; --rc-tracking-tight: -0.02em; --rc-tracking-wide: 0.14em; /* eyebrows / labels em caixa alta */ /* ── RAIO ─────────────────────────────────────────────────────────────── Escala 8 / 12 / 16 — o "lg" existe para superfícies grandes onde 12 ficava duro (modal, painel, capa). Pill (999) é forma de componente, não curva. */ --rc-radius-sm: 8px; --rc-radius: 12px; --rc-radius-lg: 16px; --rc-radius-pill: 999px; /* ── ELEVAÇÃO ─────────────────────────────────────────────────────────── Sombra difusa e tingida com o roxo da marca — nunca preto puro. */ --rc-shadow-1: 0 8px 24px -12px rgba(44, 8, 76, .28); --rc-shadow-2: 0 24px 48px -24px rgba(44, 8, 76, .40); --rc-shadow-3: 0 40px 80px -32px rgba(44, 8, 76, .52); --rc-inner-light: inset 0 1px 0 rgba(255, 255, 255, .14); /* ── MOVIMENTO ────────────────────────────────────────────────────────── Curvas com massa. Nada de linear/ease-in-out. */ --rc-ease: cubic-bezier(.16, 1, .3, 1); --rc-ease-soft: cubic-bezier(.32, .72, 0, 1); --rc-dur-1: 200ms; --rc-dur-2: 320ms; --rc-dur-3: 520ms; --rc-dur-4: 800ms; --rc-dur-zoom: 7s; /* zoom lento da capa central do hero */ /* ── CAMADAS ──────────────────────────────────────────────────────────── Escala fechada. Não inventar z-index fora desta lista. */ --rc-z-backdrop: 0; --rc-z-content: 1; --rc-z-header: 30; --rc-z-modal: 50; --rc-z-grain: 60; /* ── HERO / CARROSSEL ─────────────────────────────────────────────────── Proporção da capa central vinda do Figma (959×500 ≈ 96:50). */ --rc-hero-ratio: 96 / 50; --rc-hero-w: min(66%, 960px); --rc-hero-scale-1: .92; /* 883/959 do Figma */ --rc-hero-scale-2: .84; --rc-hero-dot: 8px; --rc-hero-dot-active: 60px; --rc-hero-dot-gap: 12px; /* Pílulas dos peeks (variante .hero--peek-pill, só desktop): tamanho e posição são calculados no JS (main.js placePill), proporcionais à central, com as razões exatas do Figma (near 64×404, far 40×308, vãos 24 sobre 959×500). */ /* ── LUZ DA CAPA CENTRAL ──────────────────────────────────────────────── Sombra colorida girando na beira da manchete, nas 4 cores da faixa do topo. Esmaece de dentro para fora: forte rente à foto, some por completo na ponta. O cônico fica exatamente atrás da capa; a foto cobre o miolo e só a borra vaza pela beira — o desfoque é o que faz o degradê (forte→zero em ~width). */ --rc-glow-width: 10px; /* alcance da luz além da capa, até sumir */ --rc-glow-hover: 5px; /* quanto a luz cresce ao passar o mouse no central */ --rc-glow-opacity: .7; /* força rente à foto (0–1) */ --rc-glow-speed: 10s; }