/* 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; /* Without this, a scroll swipe over the canvas both scrolls the page AND feeds every point of the gesture into the tube's cursor-follow target — the trail chases the swipe the whole way down, which reads as the scroll not registering. touch-action: pan-y tells the browser vertical panning is reserved for native scroll; per spec this also makes it stop dispatching pointermove to the element once the scroll gesture is recognised (a pointercancel fires instead), so the trail settles after the first touch rather than following the whole swipe. Click-to-reset and mouse hover are unaffected — this only constrains touch panning. */ touch-action: pan-y; } .lumina-ui { position: relative; z-index: 1; /* 100vh on mobile browsers recalculates as the URL bar hides/shows during scroll, so the page height jumps mid-gesture — a real contributor to "hard to scroll". svh is the viewport with browser UI accounted for and does not do that; vh is the fallback for browsers that predate it. */ min-height: 100vh; min-height: 100svh; 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)); } /* Below 900px the hero's actual content — badge, headline, lede, two buttons — is much shorter than a phone's full viewport height. Centering it in a forced 100vh/100svh box left a large empty dark gap above and below with nothing in it, which is most of what read as the page being "all dark": a near-empty black screen before any content resumed. Letting the section's height come from its content plus generous padding, instead of forcing the full viewport, keeps the hero prominent without the void. */ @media (max-width: 900px) { .lumina-ui { min-height: 0; } .lumina-shell--section .lumina-hero { padding-top: calc(var(--space-8) + var(--space-6)); padding-bottom: 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; } } /* The hero hint claimed "Mouse Interaction Active" on phones, where there is no mouse. Swapped on the input device rather than screen width — a tablet with a trackpad should still read the pointer version. */ .hint-touch { display: none; } @media (pointer: coarse) { .hint-pointer { display: none; } .hint-touch { display: inline; } /* The scroll-wheel glyph is meaningless without a mouse. */ .lumina-shell .lumina-mouse { display: none; } }