/* ============================================================ HIIPE.io — DARK THEME SNAPSHOT (exploration, not the live site) Not a flat dark theme: BLACK fading into HIIPE gold. Layered OVER site.css. Activated by . ============================================================ */ body.dark { --paper: #0a0a0a; --paper-2: #161513; --paper-3: #211d16; --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.20); --text: #f5f3ee; --text-dim: #b8b5ad; --text-faint: #888377; --yellow-deep: #fdbc58; /* kickers go bright gold on dark */ color: var(--text); background: #060606; /* flat black base — light comes from the living aurora layer */ } /* ===== AURORA — gold northern-lights drifting behind everything. No straight lines (kills the "scholar" gradient). Techy + Apple-clean + trippy. ===== */ .aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .aurora::before, .aurora::after { content: ""; position: absolute; inset: -35%; filter: blur(66px) saturate(135%); will-change: transform; } .aurora::before { background: radial-gradient(42% 30% at 22% 24%, rgba(253,188,88,0.12), transparent 70%), radial-gradient(44% 36% at 80% 40%, rgba(255,178,66,0.11), transparent 70%), radial-gradient(46% 44% at 46% 82%, rgba(253,188,88,0.12), transparent 72%); animation: aur1 26s ease-in-out infinite alternate; } .aurora::after { background: radial-gradient(42% 32% at 66% 14%, rgba(255,202,116,0.11), transparent 70%), radial-gradient(44% 34% at 14% 60%, rgba(253,188,88,0.10), transparent 72%), radial-gradient(46% 40% at 88% 92%, rgba(255,160,52,0.10), transparent 72%); animation: aur2 34s ease-in-out infinite alternate; mix-blend-mode: screen; } @keyframes aur1 { from { transform: translate3d(0,0,0) scale(1) rotate(0deg); } to { transform: translate3d(-4%,3%,0) scale(1.12) rotate(3deg); } } @keyframes aur2 { from { transform: translate3d(0,0,0) scale(1.05) rotate(0deg); } to { transform: translate3d(5%,-3%,0) scale(1) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after { animation: none; } } /* nav — no black bar: soft top-darken that fades into the page, light flows through */ body.dark .nav { background: linear-gradient(180deg, rgba(6,6,6,0.88) 0%, rgba(6,6,6,0.32) 62%, transparent 100%); border-bottom-color: transparent !important; } body.dark .nav.scrolled { background: linear-gradient(180deg, rgba(6,6,6,0.94) 0%, rgba(6,6,6,0.5) 70%, transparent 100%); border-bottom-color: transparent !important; } body.dark .nav-link:hover { background: rgba(255,255,255,0.07); } /* mobile menu: solid bar + panel when open so links read on dark */ body.dark .nav.menu-open { background: #060606 !important; } body.dark .mobile-menu { background: #0a0a0a; -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); } body.dark .nav-burger { color: var(--text); } body.dark .btn-ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); } body.dark .btn-ghost:hover { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px #fff; } /* hero — the black-fading-into-gold moment */ body.dark .hero-bg { background: radial-gradient(ellipse 72% 58% at 50% 104%, rgba(253,188,88,0.34), transparent 60%), radial-gradient(ellipse 50% 40% at 50% 0%, rgba(253,188,88,0.07), transparent 60%); } body.dark .hero-grid { background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); } body.dark .hero h1 { color: #ffffff; } /* absorb: competitor marks are dark SVGs — invert to white; HIIPE tile gets a gold edge */ body.dark .absorb .stack img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.5; } body.dark .absorb:hover .stack img { opacity: 0.72; } body.dark .absorb .hiipe-tile { background: #131210; box-shadow: inset 0 0 0 1px rgba(253,188,88,0.45); } /* cards / faq / pricing surfaces ride the token overrides; a few explicit ones */ body.dark .tier.feature { background: #1b1914; box-shadow: 0 14px 50px rgba(0,0,0,0.55); border-color: var(--yellow); } /* pricing toggle on dark: white pill needs dark ink; the unselected "Annual · save 15%" label was --yellow-ink (near-black) on a near-black track = invisible. Make it bright gold. */ body.dark .toggle button.on { color: #14110b; } body.dark .toggle .save { color: var(--yellow-deep); } body.dark .toggle .save.on { color: var(--yellow-ink); background: var(--yellow); } body.dark .qa { background: #131210; } body.dark .qa[open] { border-color: rgba(253,188,88,0.35); } /* closing: NO box, no frame — the text rides the risen sun (the warmest part of the page) */ body.dark .closer { background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } /* sections must stay transparent so the sunrise flows uninterrupted (kill the dark panel) */ body.dark section[style*="--paper-2"] { background: transparent !important; } /* asset holes read on dark */ body.dark .asset-slot { border-color: rgba(255,255,255,0.18); background: repeating-linear-gradient(45deg, #131210, #131210 12px, #0d0d0c 12px, #0d0d0c 24px); } /* footer badges (dark logos) invert */ body.dark .footer .badges img { filter: grayscale(1) brightness(0) invert(1); } body.dark .footer { border-top-color: var(--line); }