/* ========================================================================== home.css — DOLOS 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:#070d09; --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%;height:100%;overflow:hidden; background:var(--h-bg-deep);color:var(--h-ivory); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; } /* static/no-JS backdrop -- a soft radial glow in brand tones so the page never renders as a flat block before (or without) the 3D module boots */ body{ background: radial-gradient(ellipse 70% 55% at 50% 30%, var(--h-forest-mid) 0%, var(--h-forest) 45%, var(--h-bg-deep) 78%, #040805 100%); } /* ================= background film ================= Ben's looping meadow film underlays the whole page (owner-corrected from a pre-roll loader). z-order: video (0) < scrim (1) < 3D sparkle canvas (2, additive, transparent) < vignette/grain < hero. Hidden only when JS decides it can't play (error / reduced-motion) -- the dark gradient bg then shows. */ #bg-video{ position:fixed;inset:0;z-index:0; width:100%;height:100%; object-fit:cover; display:none; /* home.js flips to block once a source is chosen */ background:var(--h-bg-deep); } #bg-video.is-on{ display:block; } /* legibility scrim: darkens the film 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); } /* DOLOS 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:100%; 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; } /* Contract chip. Same glass as the ticker so the two read as one lockup, but lighter weight and no tracking blow-up: an address is a thing you copy, not a thing you shout. Hidden entirely until set-ca.mjs writes data-ca. */ #ca-chip{ display:inline-flex;align-items:center;gap:7px; padding:6px 14px;border-radius:999px;border:0; font-family:var(--font-mono);font-size:clamp(11px,1.8vw,12.5px);font-weight:500; letter-spacing:0.05em;color:var(--glass-60);white-space:nowrap; cursor:pointer; transition:color .2s ease; } #ca-chip:hover{ color:var(--h-ivory); } #ca-chip:focus-visible{ outline:2px solid var(--h-gold,#c9a227); outline-offset:3px; } #ca-chip::after{ content:"";width:11px;height:11px;flex:none;opacity:.65;background:currentColor; -webkit-mask:var(--copy-icon) center/contain no-repeat; mask:var(--copy-icon) center/contain no-repeat; } /* Tick replaces the copy glyph, so the confirmation lands on the control that was actually pressed rather than in a toast somewhere else. */ #ca-chip.is-copied{ color:var(--h-ivory); } #ca-chip.is-copied::after{ -webkit-mask-image:var(--tick-icon); mask-image:var(--tick-icon); opacity:1; } #ca-chip[hidden]{ display:none; } #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); } #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; } /* ================= 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); } }