/* ========================================================================== 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; --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{ pointer-events:auto; } #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); } #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). */ #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); } }