/* premium-loader.css — Phase 6 per-theme boot screen. * * The legacy #np-loader from _base.html is kept (so terminal.js's * percent-bar driver continues to work); under each Phase-6 theme we * hide the ASCII title + status lines and replace them with theme- * specific copy, typography, and a small ambient animation. The * percent bar itself gets retinted per theme. * * Activation: site lands → already set * from cookie by _base.html → matching block below applies → * terminal.js hides the loader on boot complete. */ #np-loader { font-family: var(--font-mono); } /* Hide the legacy terminal copy on Phase-6 themes — the new copy is * injected via ::before / ::after pseudo-elements below. */ [data-theme="naturalist"] #np-loader .ld-title, [data-theme="naturalist"] #np-loader .ld-line, [data-theme="obsidian-codex"] #np-loader .ld-title, [data-theme="obsidian-codex"] #np-loader .ld-line, [data-theme="cretaceous-greenhouse"] #np-loader .ld-title, [data-theme="cretaceous-greenhouse"] #np-loader .ld-line, [data-theme="volcanic-glass"] #np-loader .ld-title, [data-theme="volcanic-glass"] #np-loader .ld-line, [data-theme="polar-field-lab"] #np-loader .ld-title, [data-theme="polar-field-lab"] #np-loader .ld-line, [data-theme="vellum-atlas"] #np-loader .ld-title, [data-theme="vellum-atlas"] #np-loader .ld-line, [data-theme="solarpunk"] #np-loader .ld-title, [data-theme="solarpunk"] #np-loader .ld-line, [data-theme="bioluminescent-deep"] #np-loader .ld-title, [data-theme="bioluminescent-deep"] #np-loader .ld-line, [data-theme="steampunk-foundry"] #np-loader .ld-title, [data-theme="steampunk-foundry"] #np-loader .ld-line, [data-theme="martian-survey"] #np-loader .ld-title, [data-theme="martian-survey"] #np-loader .ld-line { display: none; } /* Common premium-loader frame on every Phase-6 theme. */ [data-theme="naturalist"] #np-loader, [data-theme="obsidian-codex"] #np-loader, [data-theme="cretaceous-greenhouse"] #np-loader, [data-theme="volcanic-glass"] #np-loader, [data-theme="polar-field-lab"] #np-loader, [data-theme="vellum-atlas"] #np-loader, [data-theme="solarpunk"] #np-loader, [data-theme="bioluminescent-deep"] #np-loader, [data-theme="steampunk-foundry"] #np-loader, [data-theme="martian-survey"] #np-loader { position: fixed; inset: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--bg); color: var(--ink); z-index: 9999; isolation: isolate; overflow: hidden; } /* Veiled ornament behind every loader — animated subtly. */ [data-theme="naturalist"] #np-loader::before, [data-theme="obsidian-codex"] #np-loader::before, [data-theme="cretaceous-greenhouse"] #np-loader::before, [data-theme="volcanic-glass"] #np-loader::before, [data-theme="polar-field-lab"] #np-loader::before, [data-theme="vellum-atlas"] #np-loader::before, [data-theme="solarpunk"] #np-loader::before, [data-theme="bioluminescent-deep"] #np-loader::before, [data-theme="steampunk-foundry"] #np-loader::before, [data-theme="martian-survey"] #np-loader::before { content: ""; position: absolute; width: 320px; height: 320px; background-color: var(--ornament-fill, var(--accent)); -webkit-mask: var(--ornament-img) center/contain no-repeat; mask: var(--ornament-img) center/contain no-repeat; opacity: 0.08; animation: nx-loader-pulse 3.6s ease-in-out infinite; z-index: -1; } @keyframes nx-loader-pulse { 0%, 100% { transform: scale(1.0); opacity: 0.06; } 50% { transform: scale(1.08); opacity: 0.14; } } /* Title + tagline injected per theme via ::after on the bar. * We use the existing .ld-bar element as our anchor — it's * already in the DOM and terminal.js leaves its position alone. */ [data-theme="naturalist"] #np-loader .ld-bar, [data-theme="obsidian-codex"] #np-loader .ld-bar, [data-theme="cretaceous-greenhouse"] #np-loader .ld-bar, [data-theme="volcanic-glass"] #np-loader .ld-bar, [data-theme="polar-field-lab"] #np-loader .ld-bar, [data-theme="vellum-atlas"] #np-loader .ld-bar, [data-theme="solarpunk"] #np-loader .ld-bar, [data-theme="bioluminescent-deep"] #np-loader .ld-bar, [data-theme="steampunk-foundry"] #np-loader .ld-bar, [data-theme="martian-survey"] #np-loader .ld-bar { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.10em; color: var(--accent); margin-top: 12px; } /* ── Per-theme copy + colour treatments ───────────────────────────── */ [data-theme="naturalist"] #np-loader::after { content: "FIELD STATION · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: 0.08em; color: var(--ink); text-align: center; margin-top: -14px; } [data-theme="obsidian-codex"] #np-loader::after { content: "CODEX OPENING · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: 0.30em; color: var(--accent); text-align: center; margin-top: -14px; text-transform: uppercase; } [data-theme="cretaceous-greenhouse"] #np-loader::after { content: "PROBING CANOPY · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: 0.04em; color: var(--accent-2); text-align: center; margin-top: -14px; } [data-theme="volcanic-glass"] #np-loader::after { content: "CALIBRATING SENSORS · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: 0.16em; color: var(--accent-2); text-align: center; margin-top: -14px; text-transform: uppercase; } [data-theme="polar-field-lab"] #np-loader::after { content: "ICE CORE · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: 0.10em; color: var(--accent); text-align: center; margin-top: -14px; text-transform: uppercase; } [data-theme="vellum-atlas"] #np-loader::after { content: "UNROLLING MAP · " attr(data-stage); display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: 0.02em; color: var(--accent); text-align: center; margin-top: -14px; } [data-theme="solarpunk"] #np-loader::after { content: "SUNRISE · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: 0.06em; color: var(--accent); text-align: center; margin-top: -14px; } [data-theme="bioluminescent-deep"] #np-loader::after { content: "DESCENDING · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: 0.20em; color: var(--accent); text-align: center; margin-top: -14px; text-transform: uppercase; } [data-theme="steampunk-foundry"] #np-loader::after { content: "STOKING BOILER · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: 0.12em; color: var(--accent); text-align: center; margin-top: -14px; text-transform: uppercase; } [data-theme="martian-survey"] #np-loader::after { content: "TRANSMITTING · " attr(data-stage); display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: 0.18em; color: var(--accent); text-align: center; margin-top: -14px; text-transform: uppercase; } /* Hide the flat ASCII progress bar on Phase-6 themes — replaced by * the cinematic SVG centerpiece below. terminal.js may still update * the bar's text in the background; we just don't render it. */ [data-theme="naturalist"] #np-loader-bar, [data-theme="obsidian-codex"] #np-loader-bar, [data-theme="cretaceous-greenhouse"] #np-loader-bar, [data-theme="volcanic-glass"] #np-loader-bar, [data-theme="polar-field-lab"] #np-loader-bar, [data-theme="vellum-atlas"] #np-loader-bar, [data-theme="solarpunk"] #np-loader-bar, [data-theme="bioluminescent-deep"] #np-loader-bar, [data-theme="steampunk-foundry"] #np-loader-bar, [data-theme="martian-survey"] #np-loader-bar { display: none; } /* ───────────────────────────────────────────────────────────────── * CINEMATIC LOADER CENTERPIECE * * On every Phase-6 theme, #np-loader::before becomes a 3D-staged * theatre that hosts the per-theme animated SVG (loaded via * background-image with currentColor inheritance — SVG inks itself * with the theme's --accent). Behind it: a parallax of subtle * depth layers + ambient light. perspective() on the loader frame * tilts the SVG slightly so it reads as floating in space rather * than glued to the viewport. * ───────────────────────────────────────────────────────────────── */ [data-theme="naturalist"] #np-loader, [data-theme="obsidian-codex"] #np-loader, [data-theme="cretaceous-greenhouse"] #np-loader, [data-theme="volcanic-glass"] #np-loader, [data-theme="polar-field-lab"] #np-loader, [data-theme="vellum-atlas"] #np-loader, [data-theme="solarpunk"] #np-loader, [data-theme="bioluminescent-deep"] #np-loader, [data-theme="steampunk-foundry"] #np-loader, [data-theme="martian-survey"] #np-loader { perspective: 1400px; perspective-origin: 50% 40%; } /* The cinematic centerpiece — replaces the previous corner-mark * ornament watermark. Sized 320×320, sits behind the title text. */ [data-theme="naturalist"] #np-loader::before, [data-theme="obsidian-codex"] #np-loader::before, [data-theme="cretaceous-greenhouse"] #np-loader::before, [data-theme="volcanic-glass"] #np-loader::before, [data-theme="polar-field-lab"] #np-loader::before, [data-theme="vellum-atlas"] #np-loader::before, [data-theme="solarpunk"] #np-loader::before, [data-theme="bioluminescent-deep"] #np-loader::before, [data-theme="steampunk-foundry"] #np-loader::before, [data-theme="martian-survey"] #np-loader::before { content: ""; position: relative; width: clamp(260px, 38vmin, 420px); height: clamp(260px, 38vmin, 420px); color: var(--accent); /* Drop the old static-mask treatment; load the per-theme SVG as a * full image so its embedded CSS animations + currentColor inks fire. */ background: var(--loader-svg) center/contain no-repeat; -webkit-mask: none; mask: none; opacity: 0.95; /* 3D depth — gentle continuous parallax tilt. */ transform: rotateX(8deg) rotateY(-4deg) translateZ(0); transform-style: preserve-3d; animation: nx-loader-float 6.0s ease-in-out infinite; filter: drop-shadow(0 14px 40px color-mix(in srgb, var(--accent), transparent 50%)) drop-shadow(0 2px 6px color-mix(in srgb, var(--accent), transparent 70%)); /* Override the legacy ornament-watermark ::before (z-index: -1) so * the centerpiece sits in front of the gradient bloom, not behind it. */ z-index: 1; } @keyframes nx-loader-float { 0%, 100% { transform: rotateX(8deg) rotateY(-4deg) translateY(0); } 50% { transform: rotateX(10deg) rotateY( 2deg) translateY(-6px); } } /* Per-theme SVG handle — points premium-loader.js + the centerpiece * background to the right loader file. The SVG inks itself in * currentColor; inheritance carries the theme's --accent through. */ [data-theme="naturalist"] #np-loader { --loader-svg: url('/static/img/loaders/naturalist.svg'); } [data-theme="obsidian-codex"] #np-loader { --loader-svg: url('/static/img/loaders/obsidian-codex.svg'); } [data-theme="cretaceous-greenhouse"] #np-loader { --loader-svg: url('/static/img/loaders/cretaceous-greenhouse.svg'); } [data-theme="volcanic-glass"] #np-loader { --loader-svg: url('/static/img/loaders/volcanic-glass.svg'); } [data-theme="polar-field-lab"] #np-loader { --loader-svg: url('/static/img/loaders/polar-field-lab.svg'); } [data-theme="vellum-atlas"] #np-loader { --loader-svg: url('/static/img/loaders/vellum-atlas.svg'); } [data-theme="solarpunk"] #np-loader { --loader-svg: url('/static/img/loaders/solarpunk.svg'); } [data-theme="bioluminescent-deep"] #np-loader { --loader-svg: url('/static/img/loaders/bioluminescent-deep.svg'); } [data-theme="steampunk-foundry"] #np-loader { --loader-svg: url('/static/img/loaders/steampunk-foundry.svg'); } [data-theme="martian-survey"] #np-loader { --loader-svg: url('/static/img/loaders/martian-survey.svg'); } /* Ambient light bloom behind the SVG — solid fallback colour FIRST * so the loader is fully opaque even before theme tokens resolve; * radial gradients layer on top via background-image so they don't * reset the colour. Critical: without explicit background-color, var(--bg) * inside a shorthand can fail to resolve on first paint and the page * content bleeds through behind the splash. */ [data-theme="naturalist"] #np-loader, [data-theme="obsidian-codex"] #np-loader, [data-theme="cretaceous-greenhouse"] #np-loader, [data-theme="volcanic-glass"] #np-loader, [data-theme="polar-field-lab"] #np-loader, [data-theme="vellum-atlas"] #np-loader, [data-theme="solarpunk"] #np-loader, [data-theme="bioluminescent-deep"] #np-loader, [data-theme="steampunk-foundry"] #np-loader, [data-theme="martian-survey"] #np-loader { background-color: #0E0F12; /* hard fallback — naturalist bg */ background-color: var(--bg); /* upgrade once tokens resolve */ background-image: radial-gradient(ellipse 60% 40% at 50% 38%, color-mix(in srgb, var(--accent), transparent 88%), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 62%, color-mix(in srgb, var(--accent-2), transparent 92%), transparent 70%); } [data-theme="vellum-atlas"] #np-loader { background-color: #F0E8D6; /* light theme fallback */ background-color: var(--bg); } /* Hide the body content behind the loader — _base.html owns this rule * for its own templates, but aegis.html.j2 is standalone so we add it * here so EVERY page hides body content while np-booting is true. * Visibility (not display) so layout doesn't shift on dismiss. */ html.np-booting body > *:not(#np-loader) { visibility: hidden; }