/* ========================================================================= ZENI — VERGE THEME OVERRIDE Activated by Inspired by The Verge's 2024 redesign: - Canvas Black (#131313) - Jelly Mint (#3cffd0) + Verge Ultraviolet (#5200ff) hazards - Archivo Black (Manuka substitute), Space Grotesk (PolySans), Space Mono (PolySans Mono) - Rounded pills, 1px borders, flat depth — no gradients (except the scene overlay), no box-shadows (except 1px rings). All selectors are scoped with [data-theme="verge"] so removing the attribute restores the SpaceX theme with zero leakage. The base `.theme-toggle` block is intentionally un-scoped so the toggle has a default SpaceX look. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); /* ========================================================================= THEME TOGGLE — base styles (unscoped, SpaceX-theme default look) The toggle container + its buttons are injected by script-theme.js. These base styles are deliberately NOT scoped to any theme so the toggle renders correctly on the SpaceX (default) theme. The Verge overrides below re-skin it for the mint theme. ========================================================================= */ .theme-toggle { display: inline-flex; align-items: center; gap: 0; padding: 0; border: 1px solid rgba(240, 240, 250, 0.35); border-radius: 32px; overflow: hidden; margin-left: 24px; } .theme-toggle__btn { background: transparent; color: #f0f0fa; border: none; padding: 6px 12px; font-family: 'D-DIN', Arial, Verdana, sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.17px; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; } .theme-toggle__btn:hover { background: rgba(240, 240, 250, 0.12); } .theme-toggle__btn.is-active { background: #f0f0fa; color: #000000; } /* ========================================================================= GLOBAL CANVAS ========================================================================= */ [data-theme="verge"], [data-theme="verge"] body { background: #131313; color: #ffffff; font-family: 'Space Grotesk', Helvetica, Arial, sans-serif; } /* ========================================================================= TYPOGRAPHY ========================================================================= */ [data-theme="verge"] .headline { font-family: 'Archivo Black', Impact, sans-serif; font-weight: 900; font-size: clamp(48px, 8vw, 96px); line-height: 0.9; letter-spacing: 1.07px; color: #ffffff; /* do not force text-transform — existing HTML is already uppercase */ margin: 0 0 24px 0; } [data-theme="verge"] .eyebrow { font-family: 'Space Mono', 'Courier New', monospace; font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 1.8px; color: #3cffd0; margin: 0 0 20px 0; } [data-theme="verge"] .support { font-family: 'Space Grotesk', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: normal; color: #ffffff; /* sentence case allowed — do not force-lowercase the existing uppercase HTML, just remove any theme-side uppercase forcing */ text-transform: none; max-width: 560px; margin: 0 0 32px 0; } /* Compact kicker — signature Verge thin-weight-300 uppercase whisper. Included for use by per-page overrides even if no current HTML applies the class yet. */ [data-theme="verge"] .verge-kicker { font-family: 'Space Grotesk', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 20px; text-transform: uppercase; letter-spacing: 1.9px; color: #ffffff; } /* ========================================================================= GHOST BUTTONS — Jelly Mint Pill ========================================================================= */ [data-theme="verge"] .btn { background: #3cffd0; color: #000000; border: none; border-radius: 24px; padding: 12px 24px; font-family: 'Space Mono', 'Courier New', monospace; font-weight: 700; /* Space Mono has 400/700 — 700 is the closest to "600" */ font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease; box-shadow: none; } [data-theme="verge"] .btn:hover { background: rgba(255, 255, 255, 0.2); color: #000000; border: none; box-shadow: 0 0 0 1px #c2c2c2; } [data-theme="verge"] .btn:focus-visible { background: #1eaedb; color: #ffffff; border: 1px solid #0500ff; outline: none; } /* Secondary — Dark Slate Pill (modifier only; no current HTML uses it) */ [data-theme="verge"] .btn--slate { background: #2d2d2d; color: #e9e9e9; } [data-theme="verge"] .btn--slate:hover { background: rgba(255, 255, 255, 0.2); color: #000000; box-shadow: 0 0 0 1px #c2c2c2; } /* ========================================================================= NAV ========================================================================= */ [data-theme="verge"] .nav { background: transparent; border-bottom: 1px solid transparent; transition: background-color 180ms ease, border-color 180ms ease; } [data-theme="verge"] .nav.is-scrolled { background: #131313; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="verge"] .nav__brand { font-family: 'Archivo Black', Impact, sans-serif; font-weight: 900; font-size: 28px; text-transform: uppercase; letter-spacing: 0.5px; color: #ffffff; } [data-theme="verge"] .nav__link { font-family: 'Space Mono', 'Courier New', monospace; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #ffffff; transition: color 180ms ease; } [data-theme="verge"] .nav__link:hover { color: #3860be; } [data-theme="verge"] .nav__toggle { color: #ffffff; } [data-theme="verge"] .nav__toggle span { background: #ffffff; } /* ========================================================================= MOBILE MENU ========================================================================= */ [data-theme="verge"] #mobile-menu { background: #131313; } [data-theme="verge"] .menu__close { color: #ffffff; font-family: 'Space Mono', 'Courier New', monospace; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; } [data-theme="verge"] .menu__link { font-family: 'Space Mono', 'Courier New', monospace; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px; color: #ffffff; } [data-theme="verge"] .menu__link:hover { color: #3860be; } /* ========================================================================= SCENES — keep full-viewport layout, darken overlay to canvas-black ========================================================================= */ [data-theme="verge"] .scene__overlay { background: linear-gradient(180deg, rgba(19, 19, 19, 0.55) 0%, rgba(19, 19, 19, 0.85) 100%); } [data-theme="verge"] .scene__content { max-width: 640px; padding: 24px 48px; } /* ========================================================================= FOOTER ========================================================================= */ [data-theme="verge"] .footer { background: #131313; border-top: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="verge"] .footer small { font-family: 'Space Mono', 'Courier New', monospace; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; color: #949494; } /* ========================================================================= LINK HOVER — any non-button, non-brand, non-toggle link goes to deep link blue on hover. This is THE Verge signature. ========================================================================= */ [data-theme="verge"] a:not(.btn):not(.nav__brand):not(.theme-toggle__btn):hover { color: #3860be; } /* ========================================================================= THEME TOGGLE — Verge skin ========================================================================= */ [data-theme="verge"] .theme-toggle { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; } [data-theme="verge"] .theme-toggle__btn { background: transparent; color: #ffffff; border: none; padding: 6px 12px; font-family: 'Space Mono', 'Courier New', monospace; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; } [data-theme="verge"] .theme-toggle__btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } [data-theme="verge"] .theme-toggle__btn.is-active { background: #3cffd0; color: #000000; } /* ========================================================================= FOCUS RING — keyboard focus only ========================================================================= */ [data-theme="verge"] :focus-visible { outline: 2px solid #1eaedb; outline-offset: 3px; } /* ========================================================================= REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { [data-theme="verge"] .btn, [data-theme="verge"] .nav, [data-theme="verge"] .nav__link, [data-theme="verge"] .menu__link, [data-theme="verge"] .theme-toggle__btn, [data-theme="verge"] a { transition: none; } }