/* * SBE Landing — Design System v1.2.1 * Tema: Roxo Espiritual, modo CLARO como padrão. * As variáveis seguem Material Design 3 (color roles). */ @layer base { /* ── MODO CLARO (padrão) ─────────────────────────────────── */ :root { /* MODO ESCURO NATIVO (Option B - Sobrenatural Moderno) */ --color-primary: #9333EA; /* Roxo vibrante/neon sutil */ --color-primary-container: #3B0764; /* Roxo escuro para fundos de destaque */ --color-primary-fixed-dim: #A855F7; --color-on-primary: #FFFFFF; --color-on-primary-container: #E9D5FF; --color-secondary: #C084FC; --color-secondary-container: #581C87; --color-on-secondary: #FFFFFF; --color-on-secondary-container: #F3E8FF; --color-background: #050505; /* Preto quase absoluto */ --color-surface: #0A0A0B; /* Grafite extremante escuro */ --color-surface-container-lowest: #000000; --color-surface-container-low: #0F0F13; --color-surface-container: #141419; --color-surface-container-high: #1A1A21; --color-surface-container-highest: #23232C; --color-on-surface: #F8FAFC; /* Branco Gelo de alto contraste */ --color-on-surface-variant: #CBD5E1; /* Cinza claro para textos de apoio */ --color-outline: #581C87; --color-outline-variant: #3B0764; --color-tertiary: #E11D48; --color-tertiary-container: #881337; --color-error: #EF4444; } /* ── MODO ESCURO (class="dark" no ) ────────────────── */ .dark { --color-primary: #D8B4FE; /* lavanda clara */ --color-primary-container: #6B21A8; --color-primary-fixed-dim: #A855F7; --color-on-primary: #3B0764; --color-on-primary-container: #EDE9FE; --color-secondary: #C4B5FD; --color-secondary-container: #4C1D95; --color-on-secondary: #2E1065; --color-on-secondary-container: #EDE9FE; --color-background: #0F0A1E; /* roxo muito escuro */ --color-surface: #0F0A1E; --color-surface-container-lowest: #09061A; --color-surface-container-low: #160D2E; --color-surface-container: #1E1040; --color-surface-container-high: #2D1B69; --color-surface-container-highest: #3D2785; --color-on-surface: #EDE9FE; --color-on-surface-variant: #C4B5FD; --color-outline: #7C3AED; --color-outline-variant: #4C1D95; --color-tertiary: #F9A8D4; --color-tertiary-container: #9D174D; --color-error: #FCA5A5; } } /* ── Material Symbols ───────────────────────────────────────── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ── Glassmorphism — adapta ao modo ─────────────────────────── */ .glass-effect { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(5, 5, 5, 0.85); /* Um pouco mais escuro por padrão */ border-bottom: 1px solid rgba(147, 51, 234, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .glass-effect.scrolled { background: rgba(0, 0, 0, 0.98) !important; /* Quase sólido ao rolar */ border-bottom: 1px solid rgba(147, 51, 234, 0.3); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7); } /* ── Glow ray no hero ───────────────────────────────────────── */ .spiritual-ray { background: radial-gradient(circle at 50% 30%, rgba(107, 33, 168, 0.18) 0%, transparent 70%); } .dark .spiritual-ray { background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.22) 0%, transparent 70%); } /* ── Text glow (modo claro usa sombra sutil) ─────────────────── */ .text-glow { text-shadow: 0 0 24px rgba(107, 33, 168, 0.35), 0 0 48px rgba(107, 33, 168, 0.12); } .dark .text-glow { text-shadow: 0 0 30px rgba(216, 180, 254, 0.4), 0 0 60px rgba(216, 180, 254, 0.15); } /* ── Overlay do hero (garante texto legível sobre imagem/vídeo brilhantes) */ .hero-gradient-overlay { background: linear-gradient(to bottom, rgba(5, 5, 5, 0.70) 0%, rgba(5, 5, 5, 0.90) 70%, #050505 100%); } /* ── Animação pulse do glow ─────────────────────────────────── */ @keyframes pulse-glow { 0%, 100% { text-shadow: 0 0 20px rgba(107,33,168,0.35); } 50% { text-shadow: 0 0 40px rgba(107,33,168,0.65); } } .animate-pulse-glow { animation: pulse-glow 2s infinite ease-in-out; } /* ── Pilares: dot ativo ─────────────────────────────────────── */ .sbe-dot.active { background: var(--color-primary); width: 1.5rem; border-radius: 4px; } .sbe-qdot.active { background: var(--color-on-primary-container); width: 1.5rem; border-radius: 4px; } /* ── Iframe de vídeo do Hero (responsivo fullscreen) ─────────── */ .sbe-hero-video-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .sbe-hero-iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 177.78vh; height: 100vh; min-width: 100%; min-height: 56.25vw; border: 0; } .sbe-hero-video-direct { position: absolute; inset: 0; width: 100%; height: 100%; } /* ── Efeito Parallax/Reveal nas Sessões ── */ .sbe-reveal { opacity: 0; transform: translateY(60px); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .sbe-reveal.sbe-active { opacity: 1; transform: translateY(0); }