/* Lumina — cyber-brutalist / glassmorphism hero, dark neon-on-black. Written to coexist with studio.css on the same document (index.html mounts this as its first section). Two rules follow from that: 1. Tokens live on .lumina-shell, never :root. studio.css owns :root, and four names collide with opposite values there — --bg (#eff0f2 vs #050505), --glass-bg (0.78 vs 0.03 alpha), --glass-border, --glass-blur. Whichever sheet loaded last would win globally and break the other page half. Scoping to the shell means each system keeps its own values. 2. Every class is .lumina-*. studio.css also defines a bare .glass, so this file's glass surface is .lumina-glass — a bare .glass here would inherit studio's light-surface values on the homepage. Everything inside .lumina-shell inherits the dark tokens; nothing outside it is touched. */ .lumina-shell { --bg: #050505; --lime: #83f36e; --accent-ink: #050505; /* text sitting on any bright accent fill */ --magenta: #f967fb; --cyan: #60aed5; --white-100: #fafafa; /* headings only — never body copy, see Special Notes */ --white-60: rgba(255, 255, 255, 0.6); --white-50: rgba(255, 255, 255, 0.5); --white-20: rgba(255, 255, 255, 0.2); --white-10: rgba(255, 255, 255, 0.1); --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: 12px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --font-display: 'Cabinet Grotesk', 'Archivo', sans-serif; --font-body: 'Satoshi', 'Inter', sans-serif; position: relative; /* The spec's H1 floor is 72px, not a smaller mobile value, so long uppercase words can exceed a narrow viewport. Clipping here keeps that contained without putting overflow-x on the whole document, which would affect studio.css's layout on the homepage. */ overflow: hidden; background: var(--bg); color: var(--white-60); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } .lumina-shell *, .lumina-shell *::before, .lumina-shell *::after { box-sizing: border-box; } /* :where() so this reset contributes zero specificity. Written plainly as `.lumina-shell a` it scores (0,1,1) and outranks single-class component rules like .lumina-btn--primary (0,1,0) — which silently reverted every -based component (primary/ghost buttons, nav CTA) to the inherited --white-60, putting pale text on the bright primary fill. */ :where(.lumina-shell) a { color: inherit; text-decoration: none; } :where(.lumina-shell) button { font-family: inherit; } /* Standalone lumina.html only — the homepage's own body styling is studio.css's job. Literal hex because the shell's tokens don't reach up to . */ body.lumina-page { margin: 0; padding: 0; background: #050505; } /* ── Canvas + pointer-events architecture ───────────────────────────────── The canvas must stay clickable/hoverable under the text for the tube background's cursor-follow and click-to-reset-spectrum to work "through" the hero copy. .lumina-ui carries pointer-events: none so it never blocks that surface; only its real interactive children opt back in. Absolute, not fixed: as a homepage section this must stay inside its own shell rather than covering the whole viewport for the entire scroll. On standalone lumina.html the shell is full-viewport anyway, so the rendered result there is unchanged. */ .lumina-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: auto; } .lumina-ui { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; pointer-events: none; } .lumina-ui a, .lumina-ui button { pointer-events: auto; } /* No-JS / static tier: the canvas removes itself (assets/js/lumina/index.js), and the shell's background already matches the canvas's WebGL clear colour, so the section reads identically minus the tubes. The state class lives on the shell, not , because studio.css owns the document-level tier-* classes on the homepage. */ .lumina-shell.is-static .lumina-canvas { display: none; } /* ── Navbar over the dark section ──────────────────────────────────────── studio.css's fixed navbar is 72%-white glass (--glass-bg-nav). Over this section's #050505 that composites to ~#b9b9b9, where its --text-dim links measure ~2.8:1 — an AA failure created purely by putting a dark section under a light bar (on --bg they are 4.76:1). The fix is to drop the translucency while the bar overlaps this section, not to restyle the bar dark: keeping it opaque --surface preserves every colour studio.css already computed against white, including the logo, which is dark artwork and would disappear on a dark bar. The class is toggled by assets/js/lumina/index.js. Rule lives here because it exists only on account of this section. */ .navbar.navbar--on-dark { background: var(--surface); /* studio.css :root token — the bar is outside .lumina-shell */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* ── Glass ─────────────────────────────────────────────────────────────── */ .lumina-glass { background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } /* ── Nav (standalone page only; the homepage has studio.css's navbar) ───── */ .lumina-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); padding: var(--space-6); } .lumina-logo { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.02em; color: var(--white-100); justify-self: start; } .lumina-logo svg { color: var(--lime); } .lumina-links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-6); justify-self: center; } .lumina-links a { color: var(--white-60); font-size: 14px; /* spec: 14px for UI elements */ font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.25s ease; } .lumina-links a:hover { color: var(--white-100); } @media (min-width: 900px) { .lumina-links { display: flex; } } .lumina-nav-cta { justify-self: end; padding: var(--space-3) var(--space-5); border-radius: 999px; border: 1px solid var(--white-20); font-size: 14px; /* spec: 14px for UI elements */ font-weight: 600; color: var(--white-100); transition: border-color 0.25s ease, background 0.25s ease; } .lumina-nav-cta:hover { border-color: var(--white-60); background: var(--white-10); } /* ── Hero ──────────────────────────────────────────────────────────────── */ .lumina-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); max-width: 1024px; margin: 0 auto; padding: var(--space-7) var(--space-5); text-align: center; } /* On the homepage the shell sits under studio.css's fixed navbar (~72px), so the hero needs its own top clearance there. */ .lumina-shell--section .lumina-hero { padding-top: calc(var(--space-8) + var(--space-7)); } .lumina-badge { display: inline-flex; align-items: center; padding: var(--space-3) var(--space-5); border-radius: 999px; color: var(--magenta); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; } .lumina-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 900; /* Black — top of the spec's ExtraBold(800)-to-Black(900) range */ text-transform: uppercase; letter-spacing: -0.05em; /* Tailwind's tracking-tighter */ line-height: 0.85; /* leading-[0.85] */ color: var(--white-100); font-size: clamp(72px, 9vw, 144px); /* spec: 7xl(72px) to 9rem(144px) */ text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); } /* Colour only — the spec defines one text-shadow value for the whole heading, not a second glow for the accent word. */ .lumina-hero h1 .accent { color: var(--lime); } /* Homepage instance only: the hero shares this page's brand, so its accent text takes studio.css's blue→red --gradient — the same treatment as .gradient-word in the section below it — instead of the Lumina spec's lime. --gradient/--blue live on studio.css's :root and are not among the names this file shadows, so they resolve here and stay in sync with the brand. Standalone lumina.html keeps the spec palette. */ .lumina-shell--section .lumina-hero h1 .accent { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; /* The h1's white glow inherits into this span, and with transparent text it would show through the glyph interiors and wash out the gradient. */ text-shadow: none; } .lumina-shell--section .lumina-badge { color: var(--blue); } /* The remaining lime/cyan accents, moved onto the brand for the homepage instance. The primary fill keeps --accent-ink (near-black) rather than switching to white: white would land at 3.6:1 on the gradient's blue end and 3.3:1 on its red end, both failing AA at this 14px size, while the dark ink clears 5.9:1 and 6.4:1 respectively. */ .lumina-shell--section .lumina-btn--primary { background: var(--gradient); border-color: transparent; } .lumina-shell--section .lumina-btn--primary:hover { box-shadow: 0 0 30px rgba(47, 143, 214, 0.45); /* --blue at 0.45 */ } .lumina-shell--section .lumina-mouse::before { background: var(--blue); } .lumina-lede { max-width: 650px; margin: 0 auto; color: var(--white-50); font-weight: 300; font-size: clamp(18px, 1.6vw, 20px); /* spec: 18px-20px for paragraphs */ line-height: 1.625; /* leading-relaxed */ } .lumina-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); } .lumina-btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: 999px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .lumina-btn--primary { background: var(--lime); color: var(--accent-ink); border: 1px solid var(--lime); } .lumina-btn--primary:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(131, 243, 110, 0.4); } .lumina-btn--ghost { color: var(--white-100); border: 1px solid var(--glass-border); } .lumina-btn--ghost svg { transition: color 0.25s ease; } .lumina-btn--ghost:hover { transform: scale(1.05); } .lumina-btn--ghost:hover svg { color: var(--cyan); } @media (prefers-reduced-motion: reduce) { .lumina-btn { transition: none; } } /* ── Footer ────────────────────────────────────────────────────────────── */ .lumina-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-7); pointer-events: none; } .lumina-footer-hint { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--white-50); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; } /* The icon itself bounces (spec: "a bouncing mouse icon"); the dot inside it runs its own scroll-hint cycle. */ .lumina-mouse { width: 16px; height: 24px; border: 1px solid var(--white-50); border-radius: 8px; position: relative; flex-shrink: 0; animation: lumina-mouse-bounce 1.6s ease-in-out infinite; } @keyframes lumina-mouse-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .lumina-mouse::before { content: ''; position: absolute; top: 4px; left: 50%; width: 3px; height: 5px; border-radius: 2px; background: var(--lime); transform: translateX(-50%); animation: lumina-mouse-scroll 1.6s ease-in-out infinite; } @keyframes lumina-mouse-scroll { 0% { opacity: 1; transform: translate(-50%, 0); } 60% { opacity: 0; transform: translate(-50%, 8px); } 61% { opacity: 0; transform: translate(-50%, 0); } 100% { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .lumina-mouse, .lumina-mouse::before { animation: none; } } .lumina-social { display: flex; gap: var(--space-5); } .lumina-social a { color: var(--white-60); transition: color 0.25s ease, transform 0.25s ease; } .lumina-social a:nth-child(1):hover { color: var(--cyan); } .lumina-social a:nth-child(2):hover { color: var(--magenta); } .lumina-social a:nth-child(3):hover { color: var(--lime); } .lumina-social a:hover { transform: translateY(-2px); } @media (max-width: 640px) { .lumina-nav { grid-template-columns: 1fr auto; } .lumina-footer { flex-direction: column; align-items: flex-start; } }