/* =========================================================== CINEMATIC — pure-black "liquid glass" theme layer =========================================================== Loads LAST. Re-skins the whole site to the cinematic spec: pure #000 background, white text, Instrument Serif italic headings, Barlow body, liquid-glass morphism, blur/fade motion. Achieved largely by overriding the design tokens so every existing component (cards, pills, titles) inherits the look. =========================================================== */ :root{ --bg-deep: #000000; --bg-mid: #07070a; --bg-warm: #07070a; --parchment: #ffffff; --parchment-dim: rgba(255,255,255,.82); --ink: #000000; --ink-soft: #0a0a0a; --gold: rgba(255,255,255,.92); --gold-bright: #ffffff; --gold-deep: rgba(255,255,255,.55); --crimson: #c96b6b; --crimson-soft: #d98a8a; --sky: #9db8d8; --sky-bright: #cdddf0; --halo: rgba(255,255,255,.9); --shadow: rgba(0,0,0,.6); } html, body{ background: #000 !important; color: #fff; } /* CRITICAL: a perspective on (set in polish.css) makes the root the containing block for every position:fixed element, so the floating console and buttons scroll away with the page. Remove root perspective — the journey's 3D scenes use their own perspective on #app and still work. */ html{ perspective: none !important; } body{ font-family: 'Barlow', sans-serif; background: radial-gradient(120% 80% at 50% -10%, #14141c 0%, #07070b 45%, #000 100%) fixed !important; font-weight: 300; line-height: 1.5; } /* keep film grain, but very faint over pure black */ body::before{ opacity: .22; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h1.title, .title, .story-title, .story-door .door-label, .mission-timeline .t-title, .verse{ font-family: 'Instrument Serif', serif !important; font-style: italic; font-weight: 400; letter-spacing: -0.02em; } h1.title{ letter-spacing: -0.045em; line-height: .82; color: #fff; font-size: clamp(2.8rem, 7vw, 5.5rem); } h1.title em{ color: #fff; } .eyebrow{ font-family: 'Barlow', sans-serif; color: rgba(255,255,255,.7); letter-spacing: .35em; font-weight: 500; } p, .lede, p.lede, .story-illustration, .story-door .door-blurb, .mission-timeline .t-line, .t-line, .story-voice, .story-source{ font-family: 'Barlow', sans-serif; font-weight: 300; } p.lede{ color: rgba(255,255,255,.82); } /* ---------- Liquid glass (exact spec) ---------- */ .liquid-glass{ background: rgba(255,255,255,0.01); background-blend-mode: luminosity; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; } .liquid-glass::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 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; -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); 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; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 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; } /* ---------- Reskin existing components into glass ---------- */ .story-door, .gender-card, .story-scripture, .mission-chip, .mission-facts li::before{ background-blend-mode: luminosity; } .story-door, .gender-card{ background: rgba(255,255,255,0.012); border: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; } .story-door::after, .gender-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.12) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.12) 75%, rgba(255,255,255,0.4) 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; } .story-door:hover, .gender-card:hover{ background: rgba(255,255,255,0.035); transform: translateY(-3px); } .story-door .door-label{ color:#fff; } .story-door .door-blurb{ color: rgba(255,255,255,.7); } .story-door .door-count{ color: rgba(255,255,255,.5); } .story-entry{ border-top-color: rgba(255,255,255,.12); } .story-title{ color:#fff; } .story-scripture{ background: rgba(255,255,255,0.02); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .story-scripture .ref{ color: var(--sky-bright); } .story-meets, .mission-analogy, .mission-timeline li{ border-left-color: rgba(255,255,255,.35); } .mission-chip{ background: rgba(255,255,255,0.02); border: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: rgba(255,255,255,.85); } /* Buttons & nav → glass pills */ .return-btn, a.return-btn{ background: rgba(255,255,255,0.02); border: none; color: rgba(255,255,255,.9); border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,.14); } .return-btn:hover{ color:#fff; box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,255,255,.3); } .site-footer nav{ display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .4rem .6rem; border-radius: 999px; background: rgba(255,255,255,0.02); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 0 0 1px rgba(255,255,255,.12); } .site-footer nav a{ color: rgba(255,255,255,.85); padding: .4rem .8rem; border-radius:999px; } .site-footer nav a:hover{ color:#fff; background: rgba(255,255,255,.06); } .home-btn{ background: rgba(255,255,255,0.02) !important; border: none !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,.16) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color:#fff !important; } .progress-fill{ background: linear-gradient(90deg, rgba(255,255,255,.4), #fff) !important; } /* ---------- Motion: blur-in reveal ---------- */ .reveal, [data-reveal]{ opacity: 0; filter: blur(10px); transform: translateY(24px); transition: opacity .8s var(--ease-out-soft, ease), filter .8s var(--ease-out-soft, ease), transform .8s var(--ease-out-soft, ease); } .reveal.is-visible, [data-reveal].is-visible{ opacity: 1; filter: blur(0); transform: none; } /* ---------- BlurText (word stagger) ---------- */ .bt-word{ display: inline-block; filter: blur(10px); opacity: 0; transform: translateY(50px); transition: filter .7s ease, opacity .7s ease, transform .7s ease; will-change: filter, opacity, transform; } .bt-word.bt-in{ filter: blur(0); opacity: 1; transform: none; } /* ---------- FadingVideo backdrop ---------- */ .cine-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .cine-video-wrap{ position: absolute; inset: 0; overflow: hidden; z-index: 0; } .cine-video-wrap::after{ /* darken for legibility */ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,.25), rgba(0,0,0,.75)); }