/* ========================================================================== home.css — KAOS title screen. Fullscreen 3D glass mark on an animated golden-hour aurora backdrop (three.js, see js/home.js), with a static image + CSS gradient fallback for no-JS / no-WebGL / reduced-motion. Palette: deep forest green base, antique gold accent, ivory type. Fonts match the site: Instrument Sans (ui), Instrument Serif (display), IBM Plex Mono (mono, buttons). Two layouts, toggled by a single class on set from js/home.js: - default (no js-3d): static hero -- img logo, centered block, CSS gradient background only. This is what no-JS / no-WebGL / reduced- motion visitors get, and what everyone gets before the module boots. - html.js-3d: the 3D canvas takes over the background, the static logo image is hidden (the 3D glass mark replaces it), and the content block shifts to the lower third so the floating logo has room above it. ========================================================================== */ :root{ --h-bg-deep:#000; --h-forest:#123023; --h-forest-mid:#1c3a2a; --h-gold:#d9a84e; --h-gold-strong:#e8bd6a; --h-ivory:#efe9dc; --h-ink-muted:#b9ae98; /* Inline SVG masks for the contract chip's copy/tick glyph. Masks rather than so the glyph inherits currentColor and follows the chip through its hover and copied states without a second asset. */ --copy-icon:url('data:image/svg+xml;utf8,'); --tick-icon:url('data:image/svg+xml;utf8,'); --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-serif:'Instrument Serif',Georgia,serif; --font-mono:'IBM Plex Mono',monospace; /* liquid-glass text hierarchy (owner reference, Bloom) -- grayscale only, gold is reserved for the primary CTA's text/icon and nothing else. */ --glass-100:rgba(255,255,255,1); --glass-80:rgba(255,255,255,0.8); --glass-60:rgba(255,255,255,0.6); --glass-50:rgba(255,255,255,0.5); --glass-15:rgba(255,255,255,0.15); } *{box-sizing:border-box;} html,body{ margin:0;padding:0;width:100%;min-height:100%;overflow-x:hidden; background:var(--h-bg-deep);color:var(--h-ivory); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; } /* LEAD fix 2026-09-01: height:100% + overflow-y:auto on BOTH html and body made body its own scroll box inside a one-viewport html, so the viewport never scrolled and #technology was clipped. Now html/body are min-height:100% with overflow-x hidden only; the viewport scrolls normally. KR2 item 4 note follows. The page used to hard-lock at one viewport (overflow:hidden above) -- #technology below the hero needs a real scroll. Swapped to overflow-y:auto (still overflow-x:hidden, so nothing can ever scroll sideways) rather than dropping the html,body height:100% -- every fixed- position background layer (#chaos-field/#home-canvas/#vignette/#grain) stays exactly where it always was, since position:fixed elements never move with a scrolling ancestor regardless of which box does the scrolling. #hero itself switches to an explicit height:100vh just below so it keeps filling exactly one viewport -- unchanged in every other way -- instead of depending on body's now-scrollable height:100%. */ /* pure black backdrop -- the chaos-sparkle canvas (#chaos-field) supplies all the visual motion; no gradient stand-in needed before it boots */ body{ background:var(--h-bg-deep); } /* ================= chaos sparkle field ================= Plain 2D canvas (js/home.js) painting a chaotic gold sparkle field over the pure-black body background. z-order: chaos-field (0) < scrim (1) < 3D sparkle canvas (2, additive, transparent) < vignette/grain < hero. Runs on every viewport, no breakpoint gates -- only particle count scales with viewport area for performance. */ #chaos-field{ position:fixed;inset:0;z-index:0; width:100%;height:100%; display:block; } /* legibility scrim: darkens the sparkle field toward center-bottom where the wordmark, tagline and buttons sit, and feathers the frame edges */ #bg-scrim{ position:fixed;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to bottom, rgba(4,8,5,0.20) 0%, rgba(4,8,5,0.05) 34%, rgba(4,8,5,0.42) 72%, rgba(4,8,5,0.68) 100%), radial-gradient(ellipse at 50% 46%, rgba(4,8,5,0) 30%, rgba(4,8,5,0.38) 100%); } /* ================= 3D canvas ================= Hidden by default -- only html.js-3d (set in js/home.js once WebGL boot succeeds) shows it, so a no-JS / no-WebGL / reduced-motion visitor never sees an empty transparent canvas sitting over the static gradient. */ #home-canvas{ position:fixed;inset:0;width:100%;height:100%;display:none; touch-action:none;z-index:0; } html.js-3d #home-canvas{display:block;} /* ================= atmosphere overlays ================= Same treatment as meadow.html's #vignette/#grain, z-indexed just above the canvas, below the hero content. */ #vignette{ position:fixed;inset:0;z-index:5;pointer-events:none; background:radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 42%, rgba(4,8,5,0.4) 100%); } #grain{ position:fixed;inset:0;z-index:6;pointer-events:none; opacity:0.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); background-size:180px 180px; } /* ================= liquid glass system ================= Owner reference (Bloom), implemented exactly. Two tiers: - .liquid-glass: light glass -- thin blur, near-invisible fill, used for secondary/utility chrome (topbar, secondary CTA, feature pills). - .liquid-glass-strong: heavy blur + soft outer shadow, used for the one primary action on the screen (Enter the Meadow). Both get their edge from a ::before ring: a gradient painted into a masked pseudo-element (content-box vs border-box, composited to leave only the ring) -- never a real `border`, per spec. */ .liquid-glass{ background:rgba(255,255,255,0.01); background-blend-mode:luminosity; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:none; box-shadow:inset 0 1px 1px rgba(255,255,255,0.1); position:relative; overflow:hidden; } .liquid-glass::before{ content:""; position:absolute;inset:0; padding:1.4px; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .liquid-glass-strong{ background:rgba(255,255,255,0.01); background-blend-mode:luminosity; backdrop-filter:blur(50px); -webkit-backdrop-filter:blur(50px); border:none; box-shadow:4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); position:relative; overflow:hidden; } .liquid-glass-strong::before{ content:""; position:absolute;inset:0; padding:1.4px; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* no-backdrop-filter fallback: the ::before ring still renders fine (it's just a masked gradient, no blur dependency) -- only the transparent fill needs a stand-in so text stays legible over the moving film. */ @supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ .liquid-glass, .liquid-glass-strong{ background:rgba(10,12,10,0.55); } } /* ================= slim top bar ================= Title-screen chrome, not a nav site: brand chip left, one PLAY pill right. Both light-tier glass -- gold stays reserved for the hero CTA. */ #topbar{ position:fixed;top:0;left:0;right:0;z-index:11; display:flex;align-items:center;justify-content:space-between; padding:calc(16px + env(safe-area-inset-top)) 18px 0; pointer-events:none; } #topbar > a, #topbar-right > a{ pointer-events:auto; } /* X + PLAY travel together on the right. Before this they were two of three space-between children, which parked the X orphaned in the middle of the header where it read as decoration rather than a social link. */ #topbar-right{ display:flex;align-items:center;gap:6px; } #topbar-brand{ display:inline-flex;align-items:center;gap:9px; padding:6px 16px 6px 6px;border-radius:999px; text-decoration:none;color:var(--glass-80); font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:0.08em;text-transform:uppercase; transition:color 0.15s ease; } #topbar-brand:hover{ color:var(--glass-100); } #topbar-brand:active{ color:var(--glass-50); } #topbar-brand img{ width:22px;height:22px;display:block;border-radius:50%; } #topbar-play{ display:inline-flex;align-items:center; min-height:36px;padding:0 20px;border-radius:999px; text-decoration:none;color:var(--glass-60); font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:0.08em;text-transform:uppercase; transition:color 0.15s ease; } #topbar-play:hover, #topbar-play:focus-visible{ color:var(--glass-100); } /* KAOS on X (2026-08-24). Square glass pill sitting left of PLAY -- same height, same glass treatment, icon only so it never competes with the single CTA. Colour follows the same three states PLAY uses. */ #topbar-x{ display:inline-flex;align-items:center;justify-content:center; width:36px;min-height:36px;border-radius:999px; text-decoration:none;color:var(--glass-60); transition:color 0.15s ease; } #topbar-x:hover, #topbar-x:focus-visible{ color:var(--glass-100); } #topbar-x:active{ color:var(--glass-50); } #topbar-x:focus-visible{ outline:2px solid var(--glass-60);outline-offset:2px; } #topbar-play:active{ color:var(--glass-50); } #topbar-play:focus-visible, #topbar-brand:focus-visible{ outline:2px solid var(--glass-60);outline-offset:2px; } /* ================= hero content ================= */ #hero{ position:relative;z-index:10; width:100%;height:100vh; display:flex;flex-direction:column;align-items:center; justify-content:center; padding:32px 24px calc(40px + env(safe-area-inset-bottom)); text-align:center; opacity:0;animation:home-fade-in 900ms ease-out 150ms forwards; } @keyframes home-fade-in{ to{ opacity:1; } } /* once the 3D scene is live, the floating glass mark owns the upper part of the screen -- push the text block down into the lower third so it never collides with the logo */ html.js-3d #hero{ justify-content:flex-end; } #logo-stage{ width:100%; height:clamp(200px,34vw,380px); display:flex;align-items:center;justify-content:center; margin-bottom:6px; } /* the 3D scene draws its own glass mark -- collapse the static stage so it doesn't reserve empty space once js-3d is live */ html.js-3d #logo-stage{ display:none; } #logo-fallback{ width:100%;max-width:min(60vw,300px);height:auto;display:block; filter:drop-shadow(0 18px 46px rgba(0,0,0,0.5)); } #wordmark{ margin:0 0 10px; font-family:var(--font-serif);font-weight:400; font-size:clamp(40px,9vw,72px);line-height:1;letter-spacing:0.02em; color:var(--h-ivory); } /* tagline stays bare (no glass panel): #bg-scrim already darkens this exact band (linear-gradient to ~68% opacity by the lower third, plus the center-bottom radial), so a glass panel here only added a second layer of blur/dark-fill on top of the scrim's own -- tried it, it read heavier than the plain text without improving legibility. Text hierarchy still follows the reference's white/N scale (tagline = white/60). */ /* Ticker chip. Mono + wide tracking like .glass-pill so it reads as a market symbol rather than a heading, but a size up and in full-strength ivory since it IS the token name. Its own row, hard against the wordmark, with the tagline's own margin doing the spacing below. */ #ticker-row{ margin:0 0 14px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } #ticker-chip{ display:inline-flex;align-items:center; padding:6px 14px;border-radius:999px; font-family:var(--font-mono);font-size:clamp(12px,2vw,14px);font-weight:700; letter-spacing:0.14em;color:var(--h-ivory);white-space:nowrap; } #tagline{ margin:0 0 30px;max-width:420px; font-family:var(--font-ui);font-size:clamp(13px,2.4vw,16px);line-height:1.55; color:var(--glass-60); } /* TICKET C1: live lobby counter chip -- mono, like #ticker-chip, but smaller/muted since it's a status readout, not the token identity. [hidden] until js/home.js's lobbyChipInit() has a real count to show. */ #lobby-row{ margin:0 0 22px; display:flex; align-items:center; justify-content:center; } #lobby-chip{ font-family:var(--font-mono);font-size:clamp(10.5px,1.8vw,12px);font-weight:600; letter-spacing:0.08em;color:var(--glass-60);white-space:nowrap; } #lobby-chip[hidden]{display:none;} /* KF1 item (g): read-only on-chain line -- same mono/muted treatment as #lobby-chip right above (one line, sits directly under it), just a touch quieter since it's a second-order status readout, not the live headcount. [hidden] until js/home.js's chainStatsChipInit() has real numbers to show (KAOS_CONTRACTS.token unset keeps it hidden forever, true on the live site today). */ #chain-stats-row{ margin:-14px 0 22px; display:flex; align-items:center; justify-content:center; } #chain-stats-chip{ font-family:var(--font-mono);font-size:clamp(10px,1.6vw,11px);font-weight:500; letter-spacing:0.06em;color:var(--glass-50);white-space:nowrap; } #chain-stats-chip[hidden]{display:none;} #cta-row{ display:flex;gap:14px;flex-wrap:wrap;justify-content:center; } .home-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 24px;border-radius:999px; font-family:var(--font-mono);font-size:12.5px;font-weight:600; letter-spacing:0.07em;text-transform:uppercase;text-decoration:none; white-space:nowrap;cursor:pointer; transition:transform 200ms ease, color 0.15s ease; } /* hover/active scale gated behind no-preference -- under reduced-motion these rules simply never match, so no transform is ever applied. */ @media (prefers-reduced-motion: no-preference){ .home-btn:hover{ transform:scale(1.05); } .home-btn:active{ transform:scale(0.95); } } .home-btn-primary{ gap:12px;padding:0 8px 0 26px; color:var(--h-gold); /* the one gold accent on this screen, per spec */ } .btn-arrow-circle{ flex:0 0 auto;width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--glass-15); color:var(--h-gold);font-size:15px;line-height:1; } .home-btn-secondary{ color:var(--glass-80); } .home-btn:focus-visible{ outline:2px solid var(--glass-60);outline-offset:2px; } /* ================= feature pills ================= */ #pill-row{ display:flex;gap:10px;flex-wrap:wrap;justify-content:center; max-width:640px;margin-top:20px; } .glass-pill{ display:inline-flex;align-items:center; padding:8px 16px;border-radius:999px; font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:0.06em;text-transform:uppercase; color:var(--glass-80);white-space:nowrap; } /* ================= KR2 item 4: "What runs underneath" ================= Below the fold, reached by a plain scroll (see html,body/#hero above). Black ground (the page's own var(--h-bg-deep), no new panel behind it), gold accents on the mono labels only, house type: Instrument Serif for the heading, Instrument Sans for body copy, IBM Plex Mono for the eyebrow/labels/launch note. Plain list rows, no boxed/bordered "card" per item (no cards-inside-cards), no gradients, no emoji -- a thin hairline under each row is the only separator. */ #technology{ position:relative;z-index:10;width:100%; padding:72px 24px calc(90px + env(safe-area-inset-bottom)); } .tech-inner{max-width:900px;margin:0 auto;} .tech-eyebrow{ margin:0 0 10px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase; color:var(--h-gold); } #technology h2{ margin:0 0 34px;font-family:var(--font-serif);font-weight:400; font-size:clamp(28px,5vw,44px);line-height:1.08;color:var(--h-ivory); } .tech-grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0; border-top:1px solid var(--glass-15); } .tech-grid li{ padding:18px 18px 18px 0; border-bottom:1px solid var(--glass-15); border-right:1px solid var(--glass-15); } /* LEAD: removed, it made alternate tiles indent differently once tiles became frosted plates */ .tech-item-label{ margin:0 0 6px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase; color:var(--h-gold); } .tech-item-body{ margin:0;font-family:var(--font-ui);font-size:15px;line-height:1.62; color:rgba(255,255,255,0.86);text-shadow:0 1px 2px rgba(0,0,0,0.85); } .tech-launch-note{ margin:26px 0 0;font-size:10.5px;letter-spacing:0.06em;color:var(--glass-50); } .tech-launch-note[hidden]{display:none;} @media (max-width:768px){ .tech-grid{grid-template-columns:1fr;} .tech-grid li{padding-left:0;border-right:none;} } /* ================= reduced motion ================= The 3D module (js/home.js) never even boots when the media query matches -- keeps its default (non js-3d) state, so this page is already the static-logo hero with nothing moving except the one gentle opacity fade above. This block is a defensive backstop only. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } #hero{ animation-duration:400ms !important; animation-timing-function:ease-out !important; } } /* ================= mobile ================= */ @media (max-width:480px){ #cta-row{ flex-direction:column;width:100%;max-width:300px; } .home-btn{ width:100%; } #topbar{ padding:calc(12px + env(safe-area-inset-top)) 14px 0; } #topbar-brand{ padding:5px 12px 5px 5px;font-size:10px;min-height:44px; } #topbar-play{ padding:0 16px;font-size:10px;min-height:44px; } #pill-row{ gap:8px; } .glass-pill{ padding:7px 13px;font-size:10px; } } @media (max-width:360px){ #wordmark{ font-size:clamp(34px,10vw,44px); } } /* LEAD 2026-09-01: tap targets to the 44px standard on touch */ @media (pointer:coarse){ #topbar-brand, #topbar-x, #topbar-play{ min-height:44px;min-width:44px; } #topbar-x{ display:inline-flex;align-items:center;justify-content:center; } } /* LEAD 2026-09-01: hero backdrop fades once the reader is past the hero, so every section below reads on near-black instead of on a bright gold ring. */ #home-canvas, #logo-stage, #logo-fallback{ opacity:var(--hero-fade, 1); transition:opacity 160ms linear; } @media (prefers-reduced-motion: reduce){ #home-canvas, #logo-stage, #logo-fallback{ transition:none; } }