/* ── Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Inter:wght@400;500&display=swap'); /* ── Reset & Root ── */ *{margin:0;padding:0;box-sizing:border-box} :root{ /* ── Backgrounds ── */ --bg:#08080f;--bg2:#11111e;--bg3:#19192c;--card:#15152a; /* ── Tier 1: Raw Palette ── */ /* Auralight — gold warmth */ --gold:#d4a843;--gold2:#f5d76a; /* Void — violet entropy */ --purple:#7c3aed;--purple2:#b197fc; --void:#6d28d9;--void-glow:#8b5cf6; --void-accent:#9b7bff; --void-soft:#c4b5fd; /* new: very light violet for text on dark bg */ /* Heal — green vitality */ --heal:#4ade80;--heal2:#22c55e; /* Ember — fire/danger */ --ember:#fb923c;--fire:#f97316; /* Danger — rose/adversaries */ --danger:#f87171;--danger2:#ef4444; /* Amber — warm sarahs-children */ --amber:#fbbf24;--amber2:#f59e0b; /* Sky — ice blue/affiliate */ --sky:#38bdf8;--sky2:#0ea5e9; /* Frost — liminal Between atmosphere (new) */ --frost:#a5f3fc;--frost2:#67e8f9;--frost-deep:#0891b2; /* Umber — ancient/sealed lore (new) */ --umber:#92400e;--umber2:#b45309;--umber-light:#d97706; /* Shadow — blue-indigo accent */ --shadow:#818cf8; /* ── Text ── */ --text:#e2e0f0;--text2:#a0a0c0;--text3:#70708a; /* ── Borders ── */ --border:rgba(124,58,237,0.2); /* ── Tier 2: Faction Tokens ── */ /* Base colors */ --faction-order-color: var(--gold); --faction-void-color: var(--void-glow); --faction-newgen-color: var(--heal); --faction-adversaries-color: var(--danger); --faction-sarahs-color: var(--amber); --faction-affiliate-color: var(--sky); /* Glow (modal borders + card shadows) */ --faction-order-glow: rgba(212,168,67,0.4); --faction-void-glow: rgba(139,92,246,0.5); --faction-newgen-glow: rgba(74,222,128,0.35); --faction-adversaries-glow: rgba(248,113,113,0.4); --faction-sarahs-glow: rgba(251,191,36,0.35); --faction-affiliate-glow: rgba(56,189,248,0.35); /* Shadow (card hover box-shadow — lower opacity than glow) */ --faction-order-shadow: rgba(212,168,67,0.12); --faction-void-shadow: rgba(109,40,217,0.15); --faction-newgen-shadow: rgba(74,222,128,0.10); --faction-adversaries-shadow: rgba(248,113,113,0.10); --faction-sarahs-shadow: rgba(251,191,36,0.10); --faction-affiliate-shadow: rgba(56,189,248,0.10); /* ── Tier 2: Status Tokens ── */ --status-live-color: var(--heal2); --status-live-bg: rgba(34,197,94,0.15); --status-live-border: rgba(34,197,94,0.35); --status-complete-color: var(--gold); --status-coming-color: rgba(212,168,67,0.65); /* ── Tier 3: Accent (theme-driven) ── */ --accent: var(--gold); --accent-border: rgba(212,168,67,0.4); --accent-border-hover: rgba(212,168,67,0.7); --accent-bg: rgba(212,168,67,0.06); --accent-bg-hover: rgba(212,168,67,0.12); --accent-glow: rgba(212,168,67,0.15); /* ── Typography ── */ --font-display:'Cinzel',serif; --font-body:'Cormorant Garamond',serif; --font-ui:'Inter',sans-serif; /* ── Radii ── */ --radius-sm:6px;--radius-md:10px;--radius-lg:12px;--radius-xl:16px; /* ── Transitions ── */ --transition:.3s; } html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:18px;line-height:1.7;overflow-x:hidden} /* ══════════════════════════════════════════════ ARC COLOR TOKENS Set data-arc on to activate an arc theme. All arc-aware components use these vars automatically. Add a new arc by adding one block here — nothing else changes. ══════════════════════════════════════════════ data-arc values: auralight — Book One (gold, warmth, creation) void — Book Two (violet, entropy, cold) vanishing — Book Three (soft purple, absence, Between) between — Book Four (gold+void dual, the crossing) */ [data-arc="auralight"] { --arc-color: var(--gold); --arc-color2: var(--gold2); --arc-glow: rgba(212,168,67,0.45); --arc-glow-lg: rgba(212,168,67,0.15); --arc-dim: rgba(212,168,67,0.12); --arc-border: rgba(212,168,67,0.25); --arc-breath: bookGoldBreath; } [data-arc="void"] { --arc-color: var(--void-glow); --arc-color2: var(--purple2); --arc-glow: rgba(139,92,246,0.5); --arc-glow-lg: rgba(109,40,217,0.2); --arc-dim: rgba(109,40,217,0.12); --arc-border: rgba(124,58,237,0.25); --arc-breath: bookVoidBreath; } [data-arc="vanishing"] { --arc-color: var(--purple2); --arc-color2: var(--void-glow); --arc-glow: rgba(139,92,246,0.4); --arc-glow-lg: rgba(139,92,246,0.14); --arc-dim: rgba(139,92,246,0.08); --arc-border: rgba(139,92,246,0.2); --arc-breath: bookVanishBreath; } [data-arc="between"] { --arc-color: var(--gold); --arc-color2: var(--void-glow); --arc-glow: rgba(212,168,67,0.4); --arc-glow-lg: rgba(212,168,67,0.12); --arc-dim: rgba(212,168,67,0.08); --arc-border: rgba(212,168,67,0.2); --arc-breath: bookGoldBreath; } /* ── Book Five arc (frost — the world processing the CATALYST event) ── */ [data-arc="catalyst"] { --arc-color: var(--frost); --arc-color2: var(--frost2); --arc-glow: rgba(165,243,252,0.45); --arc-glow-lg: rgba(165,243,252,0.15); --arc-dim: rgba(103,232,249,0.10); --arc-border: rgba(165,243,252,0.22); --arc-breath: bookFrostBreath; } /* ── Lore/ancient arc (umber — sealed tablets, ancient forces) ── */ [data-arc="umber"] { --arc-color: var(--umber-light); --arc-color2: var(--umber2); --arc-glow: rgba(217,119,6,0.45); --arc-glow-lg: rgba(180,83,9,0.15); --arc-dim: rgba(146,64,14,0.10); --arc-border: rgba(217,119,6,0.22); --arc-breath: bookUmberBreath; } /* ── Ember arc (heat/pressure for adversaries-centric scenes) ── */ [data-arc="ember"] { --arc-color: var(--ember); --arc-color2: var(--fire); --arc-glow: rgba(251,146,60,0.45); --arc-glow-lg: rgba(249,115,22,0.15); --arc-dim: rgba(251,146,60,0.10); --arc-border: rgba(251,146,60,0.22); --arc-breath: bookEmberBreath; } /* ── Scrollbar ── */ ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--arc-color,var(--purple2)),var(--arc-color,var(--purple)));border-radius:4px;transition:background var(--transition)} /* ── Animations ── */ @keyframes logoShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes float{0%{opacity:0;transform:translateY(100vh) scale(0)}30%{opacity:.6}70%{opacity:.4}100%{opacity:0;transform:translateY(-20vh) scale(1.5)}} @keyframes titleGlow{from{text-shadow:0 0 40px rgba(212,168,67,0.2)}to{text-shadow:0 0 80px rgba(212,168,67,0.4),0 0 120px rgba(124,58,237,0.15)}} @keyframes bounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(8px)}} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes pulse{0%,100%{filter:drop-shadow(0 0 8px rgba(139,92,246,0.3))}50%{filter:drop-shadow(0 0 20px rgba(212,168,67,0.5))}} @keyframes burnIn{0%{opacity:0;filter:blur(8px);transform:scale(1.3);color:var(--void-glow);text-shadow:0 0 40px rgba(139,92,246,0.8)}40%{opacity:1;filter:blur(2px);color:#fff;text-shadow:0 0 60px rgba(255,255,255,0.6)}100%{opacity:1;filter:blur(0);transform:scale(1);color:var(--gold);text-shadow:0 0 30px rgba(212,168,67,0.4)}} @keyframes burnInFourth{0%{opacity:0}60%{opacity:.6;text-shadow:0 0 20px rgba(212,168,67,0.4)}100%{opacity:.45;color:rgba(212,168,67,0.45)}} @keyframes fourthPulse{0%,100%{opacity:.35;letter-spacing:1px;color:rgba(212,168,67,0.35)}50%{opacity:.7;letter-spacing:3px;color:rgba(212,168,67,0.7)}} @keyframes ctaPulse{0%,100%{box-shadow:0 0 15px rgba(109,40,217,0.1);border-color:rgba(139,92,246,0.3)}50%{box-shadow:0 0 30px rgba(109,40,217,0.25);border-color:rgba(139,92,246,0.6)}} @keyframes book4Pulse{from{opacity:.6}to{opacity:1}} @keyframes prologueBar{0%{background-position:0% 50%;opacity:.7}100%{background-position:100% 50%;opacity:1}} @keyframes pressureShift{from{opacity:.4}to{opacity:1;transform:translateY(-4px)}} @keyframes statusBreath{0%,100%{opacity:.7;border-color:rgba(212,168,67,0.2)}50%{opacity:1;border-color:rgba(212,168,67,0.4)}} @keyframes membraneText{0%,100%{opacity:.4;letter-spacing:3px}50%{opacity:.7;letter-spacing:4px}} /* ── Character Card Animation Keyframes ── */ @keyframes factionBreath{0%,100%{box-shadow:0 0 0 0 transparent;border-color:var(--faction-glow,var(--border))}50%{box-shadow:0 0 18px 2px var(--faction-glow,transparent);border-color:var(--faction-glow,var(--border))}} @keyframes voidShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes modalBloom{0%{opacity:0;transform:scale(.92) translateY(12px)}60%{opacity:1;transform:scale(1.01) translateY(-1px)}100%{opacity:1;transform:scale(1) translateY(0)}} @keyframes modalFadeDown{0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.96) translateY(8px)}} @keyframes quotePulse{0%{opacity:0;text-shadow:0 0 20px rgba(139,92,246,0.8)}60%{opacity:1;text-shadow:0 0 12px rgba(139,92,246,0.4)}100%{opacity:1;text-shadow:none}} @keyframes filterFlash{0%{border-color:var(--faction-glow,var(--border));box-shadow:0 0 20px var(--faction-glow,transparent)}100%{border-color:var(--border);box-shadow:none}} @keyframes badgeBurnIn{0%{opacity:0;filter:blur(4px);letter-spacing:4px}100%{opacity:1;filter:blur(0);letter-spacing:1px}} /* ── Book Card Keyframes ── */ @keyframes bookGoldBreath{0%,100%{box-shadow:0 12px 40px rgba(212,168,67,0.08);border-color:rgba(212,168,67,0.3)}50%{box-shadow:0 16px 50px rgba(212,168,67,0.18);border-color:rgba(212,168,67,0.55)}} @keyframes bookVoidBreath{0%,100%{box-shadow:0 12px 40px rgba(109,40,217,0.12);border-color:rgba(124,58,237,0.3)}50%{box-shadow:0 16px 50px rgba(109,40,217,0.25);border-color:rgba(139,92,246,0.55)}} @keyframes bookVanishBreath{0%,100%{box-shadow:0 12px 40px rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.2)}50%{box-shadow:0 16px 50px rgba(139,92,246,0.22);border-color:rgba(139,92,246,0.45)}} @keyframes bookCoverReveal{0%{opacity:0;transform:translateY(12px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes coverShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @keyframes b4Membrane{0%,100%{opacity:.5;background-position:0% 50%}50%{opacity:.85;background-position:100% 50%}} @keyframes bookFrostBreath{0%,100%{box-shadow:0 12px 40px rgba(165,243,252,0.06);border-color:rgba(165,243,252,0.2)}50%{box-shadow:0 16px 50px rgba(165,243,252,0.18);border-color:rgba(165,243,252,0.5)}} @keyframes bookUmberBreath{0%,100%{box-shadow:0 12px 40px rgba(217,119,6,0.08);border-color:rgba(217,119,6,0.25)}50%{box-shadow:0 16px 50px rgba(217,119,6,0.2);border-color:rgba(217,119,6,0.55)}} @keyframes bookEmberBreath{0%,100%{box-shadow:0 12px 40px rgba(251,146,60,0.08);border-color:rgba(251,146,60,0.25)}50%{box-shadow:0 16px 50px rgba(251,146,60,0.22);border-color:rgba(251,146,60,0.55)}} @keyframes frostDrift{0%{opacity:0;transform:translateY(0) scale(0.8)}20%{opacity:.7}80%{opacity:.4}100%{opacity:0;transform:translateY(-40px) scale(1.2)}} @keyframes frostPulse{0%,100%{opacity:.3;filter:blur(0px)}50%{opacity:.7;filter:blur(1px)}} @keyframes umbraBurn{0%{opacity:0;filter:blur(4px);color:var(--umber)}50%{opacity:.8;filter:blur(0);color:var(--umber-light)}100%{opacity:1;color:var(--umber2)}} @keyframes emberFlare{0%,100%{box-shadow:0 0 12px rgba(251,146,60,0.2)}50%{box-shadow:0 0 28px rgba(251,146,60,0.5),0 0 50px rgba(249,115,22,0.15)}} /* ── Reveal ── */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.15s} .reveal-delay-2{transition-delay:.3s} .reveal-delay-3{transition-delay:.45s} /* ── Navigation MAIN PAGE ── */ nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(8,8,15,0.93);backdrop-filter:blur(24px);border-bottom:1px solid var(--arc-border,var(--border));padding:0 2rem;transition:transform var(--transition),border-color var(--transition)} nav .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px} nav .logo{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:3px;text-decoration:none;background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:logoShimmer 8s ease-in-out infinite} nav .nav-links{display:flex;gap:1.5rem;align-items:center} nav .nav-links a{color:var(--text2);text-decoration:none;font-family:var(--font-ui);font-size:.8rem;letter-spacing:1px;text-transform:uppercase;transition:color var(--transition),text-shadow var(--transition);position:relative} nav .nav-links a:hover{color:var(--gold);text-shadow:0 0 12px rgba(212,168,67,0.25)} nav .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--arc-color,var(--gold)),var(--gold2));transition:width var(--transition);box-shadow:0 0 6px var(--arc-glow,rgba(212,168,67,0.3))} nav .nav-links a:hover::after{width:100%} nav .nav-links a.active{color:var(--arc-color,var(--gold));text-shadow:0 0 14px var(--arc-glow,rgba(212,168,67,0.3))} nav .nav-links a.active::after{width:100%} .nav-book3{color:var(--void-glow)!important} .nav-book3::after{background:var(--void-glow)!important} .nav-book4{color:rgba(212,168,67,0.6)!important;animation:book4Pulse 4s ease-in-out infinite alternate} .nav-book4::after{background:var(--gold)!important} .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:5px} .hamburger span{width:24px;height:2px;background:var(--text2);transition:var(--transition)} /* ── Hero ── */ .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 28%,rgba(109,40,217,0.18) 0%,rgba(124,58,237,0.08) 40%,transparent 65%),radial-gradient(ellipse at 18% 82%,rgba(212,168,67,0.1) 0%,transparent 48%),radial-gradient(ellipse at 82% 75%,rgba(139,92,246,0.06) 0%,transparent 40%)} .hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none} .particle{position:absolute;width:3px;height:3px;background:var(--gold);border-radius:50%;opacity:0;animation:float 6s infinite} .hero h1{font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);font-weight:900;letter-spacing:8px;color:var(--gold);text-shadow:0 0 60px rgba(212,168,67,0.3);margin-bottom:.5rem;animation:titleGlow 4s ease-in-out infinite alternate} .hero .subtitle{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.5rem);color:var(--purple2);letter-spacing:6px;margin-bottom:2rem;opacity:0;animation:fadeUp .8s .5s forwards;text-shadow:0 0 30px rgba(161,151,252,0.15)} .hero .divider{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.5rem auto;opacity:0;animation:fadeUp .8s .7s forwards} .hero .books{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem;opacity:0;animation:fadeUp .8s .9s forwards} .hero .book-label{font-family:var(--font-display);font-size:.9rem;color:var(--text3);letter-spacing:3px} .hero .scroll-hint{opacity:0;animation:fadeUp .8s 1.3s forwards} .hero .scroll-hint span{display:block;font-family:var(--font-ui);font-size:.7rem;color:var(--text3);letter-spacing:3px;text-transform:uppercase;margin-bottom:.5rem} .scroll-arrow{width:20px;height:20px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);margin:0 auto;animation:bounce 2s infinite} .hero-b4-tease{font-family:var(--font-body);font-size:clamp(.8rem,1.5vw,1rem);color:rgba(212,168,67,0.5);letter-spacing:2px;font-style:italic;margin-bottom:1.5rem;opacity:0;animation:fadeUp .8s 1.1s forwards;max-width:500px;text-align:center} .livebook-label{color:var(--void-glow)!important;position:relative} .livebook-label::after{content:'LIVE';position:absolute;top:-14px;right:-10px;font-size:.45rem;background:var(--heal);color:#0a0a12;font-weight:600;padding:1px 6px;border-radius:3px;letter-spacing:1.5px;font-family:var(--font-ui)} .coming-soon-book-label{color:rgba(212,168,67,0.45)!important;letter-spacing:2px;font-style:italic} .coming-soon-badge{font-family:var(--font-ui);font-size:.55rem;color:rgba(212,168,67,0.6);background:rgba(212,168,67,0.08);border:1px solid rgba(212,168,67,0.2);padding:.15rem .5rem;border-radius:3px;letter-spacing:1.5px;text-transform:uppercase;font-style:normal;vertical-align:middle;margin-left:.4rem} /* ── Sections ── */ section{max-width:1000px;margin:0 auto;padding:6rem 2rem 4rem} section>.section-header{text-align:center;margin-bottom:3rem} section>.section-header h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;color:var(--gold);letter-spacing:4px;margin-bottom:.5rem} .section-line{width:100px;height:2px;background:linear-gradient(90deg,transparent,var(--arc-color,var(--purple)),var(--arc-color2,var(--gold)),var(--arc-color,var(--purple)),transparent);margin:.8rem auto 0;border-radius:1px;box-shadow:0 0 8px var(--arc-glow,rgba(124,58,237,0.3))} section>.section-header p{color:var(--text2);font-family:var(--font-ui);font-size:.85rem;letter-spacing:1px;margin-top:.8rem} /* ── Lore ── */ .lore-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem 2.5rem;margin-bottom:2rem;transition:border-color var(--transition),box-shadow var(--transition);position:relative} .lore-section:hover{border-color:var(--purple2);box-shadow:0 4px 20px rgba(124,58,237,0.08)} .lore-title{font-family:var(--font-display);font-size:1.3rem;color:var(--gold2);margin-bottom:1rem;letter-spacing:2px} .lore-section p{margin-bottom:1rem;color:var(--text)} /* ── Map ── */ .map-wrapper{max-width:800px;width:100%;margin:1.5rem auto 0} .map-header{text-align:center;margin-bottom:1.2rem} .map-header h4{font-family:var(--font-display);color:var(--gold);font-size:1.1rem;letter-spacing:3px;margin-bottom:.3rem} .map-header p{font-family:var(--font-ui);font-size:.65rem;color:var(--text3);letter-spacing:2px;text-transform:uppercase} .map-container{background:linear-gradient(135deg,rgba(22,22,42,0.6),rgba(10,10,18,0.9));border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem;position:relative;overflow:hidden} .map-container::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--gold),var(--purple),transparent)} .map-svg{width:100%;height:auto;display:block} .map-svg .land{fill:rgba(22,22,42,0.9);stroke:var(--gold);stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(212,168,67,0.12))} .map-svg .land-inner{fill:none;stroke:rgba(212,168,67,0.12);stroke-width:0.5;stroke-dasharray:4 3} .map-svg .mountain{fill:none;stroke:var(--text3);stroke-width:1;stroke-linejoin:round;opacity:0.45} .map-svg .forest-dot{fill:rgba(74,222,128,0.22);stroke:none} .map-svg .road{stroke:rgba(212,168,67,0.15);stroke-width:1;fill:none;stroke-dasharray:6 4} .map-svg .water-line{stroke:rgba(124,58,237,0.18);stroke-width:0.5;fill:none} .map-svg .grid-line{stroke:rgba(124,58,237,0.05);stroke-width:0.3} .map-svg .compass-line{stroke:var(--text3);stroke-width:0.5;opacity:0.35} .map-svg .compass-text{font-family:var(--font-display);font-size:8px;fill:var(--text3);opacity:0.45;text-anchor:middle} .map-svg .region-label{font-family:var(--font-display);font-size:7px;fill:var(--text3);letter-spacing:6px;text-anchor:middle} .map-svg .loc-marker{cursor:pointer} .map-svg .loc-dot{transition:all var(--transition)} .map-svg .loc-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:0.5;transition:all var(--transition)} .map-svg .loc-label{font-family:var(--font-display);font-size:9px;fill:var(--text2);letter-spacing:1.5px;opacity:0.75;transition:all var(--transition);text-anchor:middle} .map-svg .loc-tooltip{opacity:0;transition:opacity var(--transition);pointer-events:none} .map-svg .loc-marker:hover .loc-tooltip{opacity:1} .map-svg .tooltip-bg{fill:rgba(10,10,18,0.88);stroke:var(--gold);stroke-width:0.5;rx:4;ry:4} .map-svg .tooltip-text{font-family:var(--font-ui);font-size:8.5px;fill:var(--text);letter-spacing:0.5px} .map-svg .tooltip-sub{font-family:var(--font-ui);font-size:7px;fill:var(--text3);letter-spacing:0.5px} .map-svg .ruins-marker .loc-ring{stroke:var(--text3);stroke-dasharray:2 2;opacity:0.4} .map-svg .ruins-marker .loc-dot{fill:var(--text3);opacity:0.5} .map-svg .ruins-marker:hover .loc-ring{stroke:var(--gold);opacity:0.8;stroke-dasharray:none;filter:drop-shadow(0 0 8px var(--gold))} .map-svg .ruins-marker:hover .loc-dot{fill:var(--gold);opacity:1} .map-svg .ruins-marker:hover .loc-label{fill:var(--gold2);opacity:1} .map-svg .loc-marker:hover .loc-ring{stroke-width:2.5;filter:drop-shadow(0 0 10px var(--gold))} .map-svg .loc-marker:hover .loc-dot{r:5;fill:var(--gold)} .map-svg .loc-marker:hover .loc-label{opacity:1;fill:var(--gold2)} .map-svg .capital-marker .loc-dot{fill:var(--gold);r:5} .map-svg .capital-marker .loc-ring{stroke:var(--gold);stroke-width:1.5} .map-svg .capital-marker .loc-ring-outer{fill:none;stroke:var(--gold);stroke-width:0.5;opacity:0.25} .map-svg .capital-marker:hover .loc-ring-outer{opacity:0.6;filter:drop-shadow(0 0 14px var(--gold))} .map-legend{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--border)} .legend-item{display:flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:.6rem;color:var(--text3);letter-spacing:1px} .legend-dot{width:7px;height:7px;border-radius:50%} .legend-dot.lg-terrain{background:var(--text3);opacity:0.4} /* ── Timeline ── */ .timeline{position:relative;padding:2rem 0} .timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--arc-color,var(--purple)) 0%,var(--arc-color2,var(--gold)) 50%,var(--arc-color,var(--purple)) 100%);transform:translateX(-50%);box-shadow:0 0 6px rgba(124,58,237,0.2)} .timeline-item{position:relative;width:50%;padding:1rem 2.5rem;margin-bottom:1.5rem} .timeline-item.left{left:0;text-align:right;padding-right:3rem} .timeline-item.right{left:50%;padding-left:3rem} .timeline-dot{position:absolute;top:1.5rem;width:14px;height:14px;background:var(--arc-color,var(--gold));border:3px solid var(--bg);border-radius:50%;z-index:1;box-shadow:0 0 18px var(--arc-glow,rgba(212,168,67,0.45)),0 0 6px rgba(212,168,67,0.2)} .timeline-item.left .timeline-dot{right:-7px} .timeline-item.right .timeline-dot{left:-7px} .timeline-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.2rem 1.5rem;transition:border-color var(--transition),transform var(--transition)} .timeline-card:hover{border-color:var(--arc-color,var(--gold));transform:translateY(-3px);box-shadow:0 6px 24px var(--arc-dim,rgba(212,168,67,0.08))} .timeline-card h4{font-family:var(--font-display);color:var(--gold2);font-size:1rem;margin-bottom:.4rem;letter-spacing:1px} .timeline-card p{font-size:.9rem;color:var(--text2);line-height:1.5} /* ── Book Divider ── */ .book-divider{text-align:center;margin:3rem 0;padding:2rem;background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(212,168,67,0.08));border:1px solid var(--border);border-radius:var(--radius-lg)} .book-divider h2{font-family:var(--font-display);font-size:1.8rem;color:var(--gold);letter-spacing:4px} .book-divider .book-sub{font-family:var(--font-ui);font-size:.8rem;color:var(--text3);letter-spacing:2px;margin-top:.3rem} /* ── Chapter Cards ── */ .chapter-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:1rem; overflow:hidden; /* grid-template-rows MUST be in the transition list — this was the missing piece that caused layout jumps */ transition:border-color var(--transition), grid-template-rows .35s cubic-bezier(.4,0,.2,1), box-shadow var(--transition); display:grid; grid-template-rows:auto 0fr; position:relative; } .chapter-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(139,92,246,0.04) 0%,transparent 60%); opacity:0; transition:opacity var(--transition); pointer-events:none; } .chapter-card:hover{border-color:rgba(139,92,246,0.45);box-shadow:0 4px 24px rgba(109,40,217,0.1)} .chapter-card:hover::before{opacity:1} .chapter-card.open{ grid-template-rows:auto 1fr; border-color:var(--arc-border,rgba(139,92,246,0.35)); box-shadow:0 8px 40px var(--arc-dim,rgba(109,40,217,0.14)), inset 0 0 0 1px rgba(139,92,246,0.08); } .chapter-header{ display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem; cursor:pointer;user-select:none; transition:background .25s; position:relative; z-index:1; } .chapter-header:hover{background:rgba(124,58,237,0.07)} .chapter-card.open .chapter-header{ background:rgba(109,40,217,0.08); border-bottom:1px solid rgba(139,92,246,0.15); } .chapter-number{ font-family:var(--font-ui);font-size:.65rem;font-weight:500; color:var(--arc-color,var(--purple2));letter-spacing:2px;text-transform:uppercase;min-width:90px; transition:color var(--transition); } .chapter-card.open .chapter-number{color:var(--arc-color,var(--gold))} .chapter-title{flex:1;font-family:var(--font-display);font-size:1.1rem;color:var(--gold2);letter-spacing:1px;transition:color var(--transition)} .chapter-card.open .chapter-title{color:var(--gold)} .chapter-toggle{ color:var(--text3);font-size:.75rem; transition:transform var(--transition), color var(--transition); width:28px;height:28px;display:flex;align-items:center;justify-content:center; border-radius:50%;border:1px solid transparent; transition:transform .35s cubic-bezier(.4,0,.2,1), color var(--transition), border-color var(--transition), background var(--transition); } .chapter-header:hover .chapter-toggle{color:var(--purple2);border-color:rgba(139,92,246,0.25);background:rgba(139,92,246,0.08)} .chapter-card.open .chapter-toggle{transform:rotate(180deg);color:var(--arc-color,var(--purple2));border-color:rgba(139,92,246,0.3);background:rgba(139,92,246,0.1)} .chapter-content{overflow:hidden;min-height:0;padding:0 2rem;transition:padding var(--transition)} .chapter-card.open .chapter-content{padding:1.5rem 2rem 2.5rem} .chapter-content p{margin-bottom:.8rem;text-indent:1.5em;color:var(--text)} .chapter-content p.dialogue{text-indent:0;font-style:italic;padding-left:.75rem;border-left:2px solid var(--arc-border,rgba(124,58,237,0.28));color:var(--text);opacity:.92} .chapter-content p:first-child,.chapter-content p.chapter-opener{text-indent:0} .chapter-tldr{ background:linear-gradient(135deg,rgba(212,168,67,0.08) 0%,rgba(212,168,67,0.04) 50%,rgba(109,40,217,0.03) 100%); border-left:3px solid var(--arc-color,var(--gold2)); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:1rem 1.4rem;margin-bottom:1.8rem;margin-top:.2rem; position:relative;overflow:hidden; box-shadow:inset 3px 0 12px rgba(212,168,67,0.04); } .chapter-tldr::after{ content:'';position:absolute;top:0;right:0;bottom:0;width:1px; background:linear-gradient(180deg,transparent,rgba(212,168,67,0.2),transparent); } .chapter-tldr-label{font-family:var(--font-ui);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);margin-bottom:.5rem;opacity:.8} .chapter-tldr-text{font-family:var(--font-body);font-size:1rem;color:var(--text);line-height:1.6;font-style:italic} .chapter-content p.chapter-opener::first-letter,.chapter-content p:first-child::first-letter{font-size:2.5em;float:left;line-height:1;margin-right:.1em;color:var(--arc-color,var(--gold));font-family:var(--font-display);font-weight:700;text-shadow:0 0 20px var(--arc-glow,rgba(212,168,67,0.3))} .chapter-break{text-align:center;margin:1.5rem 0;color:var(--arc-color,var(--gold));font-size:1.2rem;opacity:.4;letter-spacing:8px;transition:color var(--transition)} /* ── Chapter Close Bar ── */ .chapter-close-bar{ display:flex;align-items:center;justify-content:center;gap:.5rem; margin-top:2.5rem;padding:.9rem 1.5rem; border-top:1px solid rgba(139,92,246,0.15); cursor:pointer; font-family:var(--font-ui);font-size:.65rem;letter-spacing:2px;text-transform:uppercase; color:var(--text3); transition:color var(--transition),background var(--transition); border-radius:0 0 var(--radius-md) var(--radius-md); background:rgba(109,40,217,0.04); } .chapter-close-bar:hover{color:var(--arc-color,var(--gold));background:rgba(109,40,217,0.1)} .chapter-close-bar span{font-size:.6rem;transition:transform var(--transition)} .chapter-close-bar:hover span{transform:translateY(-2px)} /* ── Chapter Listing (Book 3) ── */ .chapter-listing{max-width:900px;margin:0 auto 3rem;padding:0 1rem} .arc-header{text-align:center;margin:2.5rem 0 1.5rem} .arc-header h3{font-family:var(--font-display);font-size:.9rem;color:var(--gold);letter-spacing:4px;text-transform:uppercase;opacity:.7} .ch-row{display:flex;align-items:center;gap:1rem;padding:.8rem 1.5rem;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;opacity:.5} .ch-row.locked{cursor:default} .ch-num{font-family:var(--font-ui);font-size:.65rem;font-weight:500;color:var(--arc-color,var(--purple2));letter-spacing:2px;text-transform:uppercase;min-width:90px} .ch-title{flex:1;font-family:var(--font-display);font-size:.95rem;color:var(--text2);letter-spacing:1px} .ch-status{font-family:var(--font-ui);font-size:.6rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;padding:.3rem .8rem;border-radius:4px} .ch-status.upcoming{color:var(--text3);background:rgba(112,112,138,0.15);border:1px solid rgba(112,112,138,0.2)} .ch-status.live{background:var(--arc-color,var(--heal2));color:#0a0a12;font-weight:600} .chapter-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:0 1rem} /* ── Faction & Shift Cards ── */ .faction-heading{font-family:var(--font-display);font-size:1.3rem;color:var(--arc-color,var(--purple2));letter-spacing:3px;margin:2rem 0 1rem;text-align:center} .shifts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0 3rem} .shift-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;position:relative;overflow:hidden;transition:all var(--transition);text-align:center} .shift-card:hover{border-color:var(--arc-color,var(--void-glow));transform:translateY(-4px);box-shadow:0 12px 36px var(--arc-dim,rgba(109,40,217,0.15)),0 0 0 1px var(--arc-border,transparent)} .shift-card .shift-icon{font-size:2.2rem;margin-bottom:.5rem;text-align:center} .shift-card .shift-title{font-family:var(--font-display);font-size:.95rem;color:var(--gold2);letter-spacing:1px;margin-bottom:.4rem;text-align:center} .shift-card .shift-type{font-family:var(--font-ui);font-size:.6rem;color:var(--arc-color,var(--void-glow));letter-spacing:2px;text-transform:uppercase;margin-bottom:.6rem;opacity:.85} .shift-card .shift-desc{font-size:.9rem;color:var(--text2);line-height:1.5} /* ── Roster ── */ .roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem} .roster-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem 1.5rem;text-align:center;position:relative;overflow:hidden;transition:all var(--transition)} .roster-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--void-glow),transparent);opacity:0;transition:opacity var(--transition)} .roster-card:hover{border-color:rgba(139,92,246,0.4);transform:translateY(-4px);box-shadow:0 8px 25px rgba(109,40,217,0.12)} .roster-card:hover::before{opacity:1} .roster-card .r-icon{font-size:2.2rem;margin-bottom:.5rem;filter:drop-shadow(0 0 8px rgba(139,92,246,0.3))} .roster-card .r-name{font-family:var(--font-display);font-size:1rem;color:var(--gold2);letter-spacing:1px;margin-bottom:.2rem} .roster-card .r-title{font-family:var(--font-ui);font-size:.7rem;color:var(--purple2);letter-spacing:1px;margin-bottom:.5rem} .roster-card .r-desc{font-size:.85rem;color:var(--text2);line-height:1.5} .roster-card.mystery{border-color:rgba(212,168,67,0.3);background:linear-gradient(135deg,var(--card),rgba(109,40,217,0.08))} .roster-card.mystery .r-icon{animation:pulse 3s ease-in-out infinite} /* ── Book Hero Blocks ── */ .book-hero{text-align:center;padding:3rem 1rem 2rem;position:relative} .book-hero h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:6px;margin-bottom:.3rem} .book-hero .book-hero-sub{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.4rem);letter-spacing:4px;margin-bottom:.5rem;opacity:.9} .book-hero .book-hero-status{font-family:var(--font-ui);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;display:inline-block;padding:.3rem 1rem;border-radius:4px;margin-bottom:2rem} /* Book 3 variant */ .book3-hero h2{color:var(--void-glow);text-shadow:0 0 40px rgba(139,92,246,0.3)} .book3-hero .book3-subtitle{color:var(--gold)} .book3-hero .book3-status{color:var(--heal2);background:var(--status-live-bg);border:1px solid var(--status-live-border)} .book3-hero .section-line{background:linear-gradient(90deg,var(--void),var(--gold),var(--void))} /* Vanishing arc chapter-break pulses gently */ [data-arc="vanishing"] .chapter-break { animation: chapterBreakVanish 5s ease-in-out infinite; } @keyframes chapterBreakVanish { 0%,100% { opacity:.35; letter-spacing:8px; } 50% { opacity:.6; letter-spacing:10px; text-shadow:0 0 12px rgba(167,139,250,0.3); } } /* Book 4 variant */ #book4{padding:4rem 1rem;position:relative;overflow:hidden} #book4::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,168,67,0.06) 0%,transparent 60%),radial-gradient(ellipse at 30% 100%,rgba(139,92,246,0.07) 0%,transparent 55%),radial-gradient(ellipse at 70% 80%,rgba(165,243,252,0.04) 0%,transparent 45%);pointer-events:none} .book4-hero{text-align:center;padding:2rem 1rem;position:relative;max-width:800px;margin:0 auto} .book4-pressure{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(212,168,67,0.015) 40px,rgba(212,168,67,0.015) 41px);pointer-events:none;animation:pressureShift 8s ease-in-out infinite alternate} .book4-hero h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:6px;color:var(--gold);margin-bottom:.3rem;opacity:.85} .book4-subtitle{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.4rem);color:rgba(212,168,67,0.6);letter-spacing:4px;margin-bottom:.8rem;font-style:italic} .book4-status{font-family:var(--font-ui);font-size:.7rem;color:rgba(212,168,67,0.7);letter-spacing:3px;text-transform:uppercase;background:rgba(212,168,67,0.08);display:inline-block;padding:.3rem 1rem;border-radius:4px;border:1px solid rgba(212,168,67,0.2);margin-bottom:2rem;animation:statusBreath 4s ease-in-out infinite} .book4-teaser{max-width:620px;margin:2rem auto;text-align:left} .book4-teaser p{font-family:var(--font-body);font-size:1.05rem;color:var(--text2);line-height:1.8;margin-bottom:1rem} .book4-teaser p:first-child,.book4-teaser p:nth-child(2){font-size:1.1rem;color:var(--arc-color,rgba(212,168,67,0.75));font-style:italic;font-weight:600;margin-bottom:.5rem;opacity:.85} .book4-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--arc-glow,rgba(212,168,67,0.4)),transparent);margin:2.5rem auto 1.5rem} .book4-membrane-hint{display:flex;align-items:center;gap:1rem;justify-content:center;margin-top:1rem} .membrane-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,67,0.25))} .membrane-line:last-child{background:linear-gradient(90deg,rgba(212,168,67,0.25),transparent)} .membrane-text{font-family:var(--font-ui);font-size:.6rem;color:rgba(212,168,67,0.4);letter-spacing:3px;text-transform:uppercase;white-space:nowrap;animation:membraneText 6s ease-in-out infinite} /* Frost-tinted membrane variant — thinning boundary between worlds */ .membrane-hint-frost .membrane-line{background:linear-gradient(90deg,transparent,rgba(165,243,252,0.2));max-width:120px} .membrane-hint-frost .membrane-line:last-child{background:linear-gradient(90deg,rgba(165,243,252,0.2),transparent)} .membrane-hint-frost .membrane-text{color:rgba(165,243,252,0.45);animation:frostPulse 5s ease-in-out infinite} .book4-cards-label{font-family:var(--font-ui);font-size:.65rem;color:rgba(212,168,67,0.4);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:1.5rem} /* ── Prologue Card ── */ .prologue-container{max-width:800px;margin:0 auto 3rem;position:relative} .prologue-card{background:linear-gradient(135deg,rgba(22,22,42,0.95),rgba(18,18,31,0.95));border:1px solid rgba(139,92,246,0.25);border-radius:var(--radius-xl);padding:2.5rem 3rem;position:relative;overflow:hidden} .prologue-card::before,.prologue-card::after{content:'';position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--void-glow) 20%,var(--gold) 50%,var(--void-glow) 80%,transparent);background-size:200% 100%;animation:prologueBar 6s ease-in-out infinite alternate} .prologue-card::before{top:0} .prologue-card::after{bottom:0} .prologue-label{font-family:var(--font-display);font-size:.75rem;color:var(--void-glow);letter-spacing:4px;text-transform:uppercase;text-align:center;margin-bottom:1.5rem;opacity:.7} .prologue-card p{margin-bottom:1.2rem;font-size:1.05rem;line-height:1.8;color:var(--text)} .prologue-card p:last-child{margin-bottom:0} .prologue-card .highlight{color:var(--gold2);font-weight:600} .prologue-card .void-text{color:var(--void-glow)} /* ── Tablet ── */ .tablet-section{margin:3rem 0;text-align:center} .tablet-container{max-width:600px;margin:0 auto;position:relative} .tablet{background:linear-gradient(145deg,#19192e,#0d0d18);border:2px solid rgba(139,92,246,0.28);border-radius:8px;padding:3rem 2rem;position:relative;box-shadow:0 0 80px rgba(109,40,217,0.18),0 0 140px rgba(109,40,217,0.06),inset 0 0 40px rgba(0,0,0,0.6)} .tablet::before{content:'';position:absolute;inset:8px;border:1px solid rgba(212,168,67,0.15);border-radius:4px;pointer-events:none} .tablet-label{font-family:var(--font-ui);font-size:.6rem;color:var(--text3);letter-spacing:4px;text-transform:uppercase;margin-bottom:1.5rem} .tablet-words{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900;letter-spacing:8px;line-height:2;color:var(--gold);text-shadow:0 0 30px rgba(212,168,67,0.4)} .tablet-word{display:inline-block;opacity:0;animation:burnIn 1.5s forwards;margin:0 .3rem} .tablet-word:nth-child(1){animation-delay:.5s} .tablet-word:nth-child(2){animation-delay:1.2s} .tablet-word:nth-child(3){animation-delay:1.9s} .tablet-word:nth-child(4){animation-delay:2.6s} .tablet-word-fourth{animation:burnInFourth 1.5s 2.6s forwards,fourthPulse 3s 4.5s ease-in-out infinite!important} .tablet-word-fourth-inline{color:rgba(212,168,67,0.4);animation:fourthPulse 3s ease-in-out infinite} .tablet-context{margin-top:2rem;font-family:var(--font-body);font-size:1rem;color:var(--text3);font-style:italic;line-height:1.6} .tablet-reaction{margin-top:1.5rem;font-size:.95rem;color:var(--text2);font-style:italic} .cliffhanger-cta{margin-top:3rem;text-align:center} .cliffhanger-cta p{font-family:var(--font-ui);font-size:.8rem;color:var(--text3);letter-spacing:2px;margin-bottom:1rem} .cta-glow{display:inline-block;font-family:var(--font-display);font-size:1rem;color:var(--void-glow);letter-spacing:3px;padding:.8rem 2rem;border:1px solid rgba(139,92,246,0.4);border-radius:8px;background:rgba(109,40,217,0.08);animation:ctaPulse 3s infinite;cursor:default} /* ── Book 3 Section ── */ #book3{position:relative;overflow:hidden} #book3::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(109,40,217,0.12) 0%,transparent 60%);pointer-events:none} .book3-hero{text-align:center;padding:3rem 1rem 2rem;position:relative} .book3-hero h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:6px;color:var(--void-glow);margin-bottom:.3rem;text-shadow:0 0 40px rgba(139,92,246,0.3)} .book3-hero .book3-subtitle{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.4rem);color:var(--gold);letter-spacing:4px;margin-bottom:.5rem;opacity:.9} .book3-hero .book3-status{font-family:var(--font-ui);font-size:.7rem;color:var(--heal2);letter-spacing:3px;text-transform:uppercase;background:var(--status-live-bg);display:inline-block;padding:.3rem 1rem;border-radius:4px;border:1px solid var(--status-live-border);margin-bottom:2rem} .book3-hero .section-line{width:80px;height:2px;background:linear-gradient(90deg,var(--void),var(--gold),var(--void));margin:.8rem auto 0;border-radius:1px} /* ── Faction filter: count badge + flavor text tooltip ── */ .char-filter button { position: relative; } .char-filter button .faction-count { display: inline-flex; align-items: center; justify-content: center; margin-left: .45rem; font-size: .6rem; font-weight: 600; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); border-radius: 10px; min-width: 1.3em; padding: 0 .35em; line-height: 1.6; letter-spacing: 0; vertical-align: middle; transition: background var(--transition), color var(--transition); } .char-filter button.active .faction-count, .char-filter button:hover .faction-count { background: rgba(255,255,255,0.18); color: #fff; } /* Faction flavor tooltip */ .faction-flavor { text-align: center; min-height: 1.4em; font-family: var(--font-body); font-size: .9rem; font-style: italic; color: var(--text3); margin-bottom: 1.5rem; margin-top: -.8rem; letter-spacing: .5px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s, color .4s; pointer-events: none; } .faction-flavor.visible { opacity: 1; transform: translateY(0); } .faction-flavor.flavor-order { color: var(--faction-order-color); opacity:.75; } .faction-flavor.flavor-void { color: var(--faction-void-color); opacity:.85; } .faction-flavor.flavor-newgen { color: var(--faction-newgen-color); opacity:.75; } .faction-flavor.flavor-adversaries { color: var(--faction-adversaries-color); opacity:.8; } .faction-flavor.flavor-sarahs-children { color: var(--faction-sarahs-color); opacity:.8; } .faction-flavor.flavor-affiliate { color: var(--faction-affiliate-color); opacity:.85; } .char-filter{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem} .char-filter button{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:.5rem 1.2rem;border-radius:8px;font-family:var(--font-ui);font-size:.75rem;letter-spacing:1px;cursor:pointer;transition:all var(--transition);text-transform:uppercase} .char-filter button:hover{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 0 12px rgba(124,58,237,0.2)}.char-filter button.active{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 0 16px rgba(124,58,237,0.3)} .char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1rem} .char-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden;--faction-glow:rgba(124,58,237,0.5)} .char-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--faction-glow,rgba(124,58,237,0.12)),transparent 65%);opacity:0;transition:opacity var(--transition)} .char-card:hover{border-color:var(--purple);transform:translateY(-4px) rotate(0.8deg);box-shadow:0 8px 30px rgba(124,58,237,0.18);animation:factionBreath 2.5s ease-in-out infinite} .char-card:hover::before{opacity:1} .char-icon{font-size:2.5rem;margin-bottom:.5rem;filter:drop-shadow(0 0 10px var(--faction-order-shadow, rgba(212,168,67,0.3)))} .char-name{font-family:var(--font-display);font-size:1rem;color:var(--gold2);letter-spacing:1px;margin-bottom:.3rem} .char-subtitle{font-family:var(--font-ui);font-size:.7rem;color:var(--text3);letter-spacing:1px;margin-bottom:.5rem} .char-faction-badge{font-family:var(--font-ui);font-size:.6rem;letter-spacing:1px;text-transform:uppercase;padding:.2rem .6rem;border-radius:4px;display:inline-block;color:var(--gold2);background:var(--faction-order-shadow,rgba(212,168,67,0.12))} .char-card[data-faction="voidwalkers"] .char-faction-badge{color:var(--purple2);background:rgba(124,58,237,0.12)} .char-card[data-faction="adversaries"] .char-faction-badge{color:var(--danger);background:var(--faction-adversaries-shadow,rgba(248,113,113,0.12))} /* ── Character Modal ── */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:2000;align-items:center;justify-content:center;padding:2rem;backdrop-filter:blur(8px)} .modal-overlay.open{display:flex} .modal{background:linear-gradient(160deg,var(--bg2) 0%,rgba(20,18,35,0.99) 100%);border:1px solid var(--border);border-radius:var(--radius-xl);max-width:600px;width:100%;max-height:85vh;overflow-y:auto;padding:2.5rem;position:relative;animation:modalBloom .35s cubic-bezier(.22,.68,0,1.2) forwards} .modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text3);font-size:1.5rem;cursor:pointer;transition:color var(--transition);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%} .modal-close:hover{color:var(--gold);background:rgba(255,255,255,0.05)} .modal .char-icon{font-size:3.5rem;text-align:center;margin-bottom:.5rem} /* Portrait image inside the character modal */ .modal-portrait { width: 160px; height: 200px; margin: 0 auto 1rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(212,168,67,0.2); box-shadow: 0 0 30px var(--faction-order-shadow, rgba(212,168,67,0.12)), 0 0 60px rgba(109,40,217,0.08); } .modal-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .modal .char-name{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);text-align:center;letter-spacing:2px;margin-bottom:.2rem} .modal .char-subtitle{text-align:center;font-family:var(--font-ui);font-size:.85rem;color:var(--purple2);margin-bottom:1.5rem;letter-spacing:1px} .modal .char-field{margin-bottom:1rem;font-size:.95rem;line-height:1.6} .modal .char-field strong{color:var(--gold2);font-family:var(--font-display);font-size:.85rem;letter-spacing:1px;display:block;margin-bottom:.2rem} .modal .char-quote{text-align:center;font-style:italic;color:var(--purple2);margin-top:1.5rem;padding:1rem;border-top:1px solid var(--border);font-size:1.05rem;animation:quotePulse .8s .4s both} /* ── Footer ── */ footer{text-align:center;padding:3rem 2rem;border-top:none;margin-top:2rem;position:relative}footer::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--arc-color,var(--gold)),var(--arc-color2,var(--purple2)),var(--arc-color,var(--gold)),transparent);opacity:.35} footer p{font-family:var(--font-ui);font-size:.75rem;color:var(--text3);letter-spacing:1px;opacity:.7} /* ── Cursor Trail ── */ #cursorCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999} /* ── Character Portrait Cards ── */ /* When a char-card has a portrait image instead of an emoji icon */ .char-card.has-portrait { padding: 0; overflow: hidden; } .char-portrait { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; } .char-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s ease; } .char-card.has-portrait:hover .char-portrait img { transform: scale(1.04); } .char-portrait-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1rem .9rem; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 97%, transparent) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 40%, color-mix(in srgb, var(--bg) 30%, transparent) 75%, transparent 100%); } .char-portrait-caption .char-name { margin-bottom: .15rem; } .char-portrait-caption .char-subtitle { margin-bottom: 0; } .char-card.has-portrait .char-faction-badge { display: block; margin: .5rem auto 0; width: fit-content; } .char-card.has-portrait .char-faction-badge-wrap { padding: .5rem 1rem .7rem; text-align: center; border-top: 1px solid var(--border); } /* char-details is always hidden in the card; JS clones it for the modal */ .char-details { display: none; } /* ── Book Page Cover Hero ── */ .book-page-hero { position: relative; width: 100%; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; } .book-page-cover { position: absolute; inset: 0; } .book-page-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .book-page-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 50%, transparent) 0%, color-mix(in srgb, var(--bg) 8%, transparent) 28%, color-mix(in srgb, var(--bg) 5%, transparent) 48%, color-mix(in srgb, var(--bg) 65%, transparent) 70%, color-mix(in srgb, var(--bg) 95%, transparent) 86%, var(--bg) 100% ); } .book-page-hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; width: 100%; padding: 4rem 2rem 3.5rem; text-align: center; } .book-page-eyebrow { font-family: var(--font-ui); font-size: .65rem; letter-spacing: 4px; text-transform: uppercase; color: var(--arc-color, var(--gold)); opacity: .7; margin-bottom: .6rem; } .book-page-title { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 900; letter-spacing: 6px; color: var(--arc-color2, var(--gold)); text-shadow: 0 0 60px var(--arc-glow, rgba(212,168,67,0.35)), 0 0 120px var(--arc-glow-lg, rgba(212,168,67,0.12)); margin-bottom: .5rem; line-height: 1.05; } .book-page-rule { width: 100px; height: 2px; background: linear-gradient(90deg, transparent, var(--arc-color, var(--gold)), transparent); margin: 1rem auto; } .book-page-tagline { font-family: var(--font-body); font-size: clamp(1rem, 2.2vw, 1.25rem); color: var(--text2); max-width: 560px; margin: 0 auto 1.2rem; line-height: 1.65; font-style: italic; } .book-page-meta { display: flex; align-items: center; justify-content: center; gap: .7rem; font-family: var(--font-ui); font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); margin-bottom: 1.8rem; } .book-page-meta-dot { font-size: .4rem; color: var(--gold); opacity: .4; } .book-page-back { font-family: var(--font-ui); font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); text-decoration: none; border: 1px solid var(--border); padding: .45rem 1rem; border-radius: var(--radius-md); transition: all var(--transition); display: inline-block; } .book-page-back:hover { color: var(--arc-color, var(--gold)); border-color: var(--arc-glow, rgba(212,168,67,0.4)); } .book-page-chapters { max-width: 900px; margin: 0 auto; padding: 0 2rem 4rem; } /* ── Faction glow variables ── */ .char-card[data-faction="order"]{--faction-glow:var(--faction-order-glow)} .char-card[data-faction="order"]:hover{border-color:var(--faction-order-color);box-shadow:0 8px 30px var(--faction-order-shadow);animation:factionBreath 2.5s ease-in-out infinite} .char-card[data-faction="voidwalkers"]{--faction-glow:var(--faction-void-glow)} .char-card[data-faction="newgen"]{--faction-glow:var(--faction-newgen-glow)} .char-card[data-faction="newgen"]:hover{border-color:var(--faction-newgen-color);box-shadow:0 8px 30px var(--faction-newgen-shadow);animation:factionBreath 2.5s ease-in-out infinite} .char-card[data-faction="adversaries"]{--faction-glow:var(--faction-adversaries-glow)} .char-card[data-faction="adversaries"]:hover{border-color:var(--faction-adversaries-color);box-shadow:0 8px 30px var(--faction-adversaries-shadow);animation:factionBreath 2.5s ease-in-out infinite} .char-card[data-faction="sarahs-children"]{--faction-glow:var(--faction-sarahs-glow)} .char-card[data-faction="sarahs-children"]:hover{border-color:var(--faction-sarahs-color);box-shadow:0 8px 30px var(--faction-sarahs-shadow);animation:factionBreath 2.5s ease-in-out infinite} .char-card[data-faction="sarahs-children"] .char-faction-badge{color:var(--amber);background:rgba(251,191,36,0.1)} /* ── Affiliate faction (Tanya) — steel blue ── */ .char-card[data-faction="affiliate"]{--faction-glow:var(--faction-affiliate-glow)} .char-card[data-faction="affiliate"]:hover{border-color:var(--faction-affiliate-color);box-shadow:0 8px 30px var(--faction-affiliate-shadow);animation:factionBreath 2.5s ease-in-out infinite} .char-card[data-faction="affiliate"] .char-faction-badge{color:var(--faction-affiliate-color);background:rgba(56,189,248,0.1)} .char-card[data-faction="affiliate"]::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(56,189,248,0.06) 50%,transparent 60%);background-size:200% 100%;opacity:0;transition:opacity var(--transition);pointer-events:none} .char-card[data-faction="affiliate"]:hover::after{opacity:1;animation:voidShimmer 2.5s linear infinite} /* ── Icon resonance on hover ── */ .char-card:hover .char-icon{animation:pulse 1.8s ease-in-out infinite;filter:drop-shadow(0 0 14px var(--faction-glow,rgba(212,168,67,0.5)))} /* ── Void shimmer (Voidwalker cards) ── */ .char-card[data-faction="voidwalkers"]::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(109,40,217,0.08) 50%,transparent 60%);background-size:200% 100%;opacity:0;transition:opacity var(--transition);pointer-events:none} .char-card[data-faction="voidwalkers"]:hover::after{opacity:1;animation:voidShimmer 2.5s linear infinite} /* ── Heal shimmer (Trials-Chosen / newgen cards) ── */ .char-card[data-faction="newgen"]::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(74,222,128,0.06) 50%,transparent 60%);background-size:200% 100%;opacity:0;transition:opacity var(--transition);pointer-events:none} .char-card[data-faction="newgen"]:hover::after{opacity:1;animation:voidShimmer 3s linear infinite} /* ── Danger shimmer (Adversaries cards) ── */ .char-card[data-faction="adversaries"]::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(248,113,113,0.06) 50%,transparent 60%);background-size:200% 100%;opacity:0;transition:opacity var(--transition);pointer-events:none} .char-card[data-faction="adversaries"]:hover::after{opacity:1;animation:voidShimmer 3.5s linear infinite} /* ── Dual-Nature card — living gold/void equilibrium ── */ /* The border itself becomes a slowly-rotating conic gradient, cycling gold→void→gold. A second pseudo sweeps a void sheen across the portrait. The shadow breathes between both forces. */ .dual-nature-card { --faction-glow: rgba(139,92,246,0.6); border-color: transparent !important; position: relative; z-index: 0; animation: dualShadowBreath 4s ease-in-out infinite; } /* Conic-gradient "live wire" border */ .dual-nature-card::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--radius-lg) + 2px); background: conic-gradient( from var(--dual-angle, 0deg), #d4a843 0%, #7c3aed 25%, #a78bfa 40%, #d4a843 55%, #f0d080 70%, #8b5cf6 85%, #d4a843 100% ); animation: dualBorderSpin 6s linear infinite; opacity: 0.85; } /* Inset fill so border doesn't cover the card face */ .dual-nature-card::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--radius-lg) + 1px); background: var(--card); } /* Void shimmer that sweeps across the portrait */ .dual-nature-card .char-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(139,92,246,0.12) 48%, rgba(212,168,67,0.08) 52%, transparent 70% ); background-size: 250% 100%; animation: dualPortraitShimmer 3.5s ease-in-out infinite; pointer-events: none; } /* "Through" whisper — appears and fades on the card */ .dual-nature-card .dual-whisper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: .7rem; letter-spacing: 8px; text-transform: uppercase; color: rgba(212,168,67,0.0); pointer-events: none; z-index: 10; white-space: nowrap; animation: dualWhisper 12s ease-in-out infinite 3s; text-shadow: 0 0 20px rgba(212,168,67,0.6), 0 0 40px rgba(139,92,246,0.4); } @keyframes dualBorderSpin { from { --dual-angle: 0deg; } to { --dual-angle: 360deg; } } @property --dual-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes dualShadowBreath { 0%,100% { box-shadow: 0 0 20px rgba(212,168,67,0.18), 0 0 0 0 rgba(139,92,246,0); } 35% { box-shadow: 0 0 35px rgba(212,168,67,0.30), 0 8px 40px rgba(212,168,67,0.12); } 65% { box-shadow: 0 0 35px rgba(139,92,246,0.35), 0 8px 40px rgba(109,40,217,0.18); } } @keyframes dualPortraitShimmer { 0%,100% { background-position: 200% 0; opacity: 0; } 15% { opacity: 1; } 50% { background-position: -50% 0; opacity: 0.9; } 85% { opacity: 0.3; } } @keyframes dualWhisper { 0%,100% { opacity: 0; letter-spacing: 12px; } 8% { opacity: 0.55; letter-spacing: 8px; } 20% { opacity: 0; letter-spacing: 14px; } } .dual-nature-card:hover { box-shadow: 0 12px 50px rgba(212,168,67,0.22), 0 0 0 0 transparent, 0 0 60px rgba(139,92,246,0.18) !important; animation: dualShadowBreath 2s ease-in-out infinite !important; } .dual-nature-card:hover::before { opacity: 1; } .dual-nature-card:hover .char-portrait::after { animation-duration: 1.8s; } /* ── Faction badge burn-in on card reveal ── */ .reveal.visible .char-faction-badge{animation:badgeBurnIn .6s .3s both} /* ── Portrait card depth on hover ── */ .char-card.has-portrait:hover .char-portrait img{transform:scale(1.04) translateY(-4px)} /* ── Modal fade-down on close ── */ .modal-overlay.closing{pointer-events:none} .modal-overlay.closing .modal{animation:modalFadeDown .25s ease-in forwards} /* ── Book Card Arc Animations ── */ /* Uses arc tokens from [data-arc] on . data-book is kept for identity only (future use). To add Book Five: add [data-arc="newarc"] tokens above — done. */ /* Base border tint — shows arc colour at rest */ .book-card { border-color: var(--arc-border, var(--border)); } /* Hover — all styling from arc tokens, no book-specific overrides */ .book-card:hover { border-color: var(--arc-glow, var(--purple)) !important; transform: translateY(-5px); box-shadow: 0 14px 45px var(--arc-dim, rgba(124,58,237,0.15)) !important; animation: var(--arc-breath, bookGoldBreath) 2.8s ease-in-out infinite; } /* Void arc gets the shimmer overlay */ [data-arc="void"] .book-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(109,40,217,0.06) 50%, transparent 65%); background-size: 250% 100%; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; } [data-arc="void"] .book-card:hover::after { opacity: 1; animation: coverShimmer 2.8s linear infinite; } /* Read label picks up arc colour */ .book-card:hover .book-read-label { color: var(--arc-color, var(--gold)); } /* Cover caption lifts on hover */ .book-cover-caption { transition: transform 0.3s ease; } .book-card:hover .book-cover-caption { transform: translateY(-3px); } /* Cover parallax */ .book-card:hover .book-cover img { transform: scale(1.06) translateY(-4px); } /* Book card delay classes for stagger */ .book-grid .book-card.reveal-delay-1 { transition-delay: 0.1s; } .book-grid .book-card.reveal-delay-2 { transition-delay: 0.2s; } .book-grid .book-card.reveal-delay-3 { transition-delay: 0.3s; } /* ── Lore Section Headings ── */ /* Replaces the 7 inline-styled h4/p elements in lore/index.html */ .lore-section-heading{ font-family:var(--font-display); letter-spacing:2px; margin:1.5rem 0 0.8rem; font-size:1.1rem; color:var(--lsh-color,var(--gold)); } .lore-section-heading--gold { --lsh-color: var(--gold2); } .lore-section-heading--gold2 { --lsh-color: var(--gold); } .lore-section-heading--void { --lsh-color: var(--void-glow); } .lore-section-heading--purple { --lsh-color: var(--purple2); } .lore-section-heading--umber { --lsh-color: var(--umber-light); } .lore-section-heading--ember { --lsh-color: var(--ember); } .lore-section-heading--frost { --lsh-color: var(--frost); } .lore-section-heading--danger { --lsh-color: var(--danger); } .lore-section-heading--heal { --lsh-color: var(--heal2); } .lore-section-heading--sky { --lsh-color: var(--sky); } .lore-section-heading--amber { --lsh-color: var(--amber); } .lore-section-heading--shadow { --lsh-color: var(--shadow); } /* ── Tablet Discipline Labels ── */ /* Replaces inline styles in book3.html tablet section */ .tablet-discipline { color:var(--void-glow); font-size:.85rem; letter-spacing:1px; font-weight:600; } .tablet-discipline-type { color:var(--text3); } /* ── Book Four Shifts Wrapper ── */ /* Replaces anonymous max-width div in book4.html */ .book4-shifts-wrapper { max-width:1100px; margin:2.5rem auto 0; padding:0 1rem; } /* ── Hero CTA (moved from index.html inline style) ── */ .hero-cta { opacity: 0; animation: fadeUp .8s 1.5s forwards; margin-top: .5rem; } .hero-cta a { font-family: var(--font-display); font-size: .8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent,var(--gold)); text-decoration: none; padding: .7rem 2rem; border: 1px solid var(--accent-border,rgba(212,168,67,0.4)); border-radius: var(--radius-md); background: var(--accent-bg,rgba(212,168,67,0.06)); transition: all var(--transition); display: inline-block; } .hero-cta a:hover { background: var(--accent-bg-hover,rgba(212,168,67,0.12)); border-color: var(--accent-border-hover,rgba(212,168,67,0.7)); box-shadow: 0 0 20px var(--accent-glow,rgba(212,168,67,0.15)); } /* ── Theme Palettes (moved from index.html inline style) ── */ /* Aura (default) */ .theme-aura, :root { --accent: var(--gold); --accent-border: rgba(212,168,67,0.4); --accent-border-hover: rgba(212,168,67,0.7); --accent-bg: rgba(212,168,67,0.06); --accent-bg-hover: rgba(212,168,67,0.12); --accent-glow: rgba(212,168,67,0.15); } /* Void (violet) */ .theme-void { --accent: var(--void-accent); --accent-border: rgba(155,123,255,0.35); --accent-border-hover: rgba(155,123,255,0.65); --accent-bg: rgba(155,123,255,0.06); --accent-bg-hover: rgba(155,123,255,0.12); --accent-glow: rgba(155,123,255,0.18); } /* Frost (liminal / Between) */ .theme-frost { --accent: var(--frost); --accent-border: rgba(165,243,252,0.35); --accent-border-hover: rgba(165,243,252,0.65); --accent-bg: rgba(165,243,252,0.05); --accent-bg-hover: rgba(165,243,252,0.10); --accent-glow: rgba(165,243,252,0.18); } /* Ember (fire / adversaries / pressure) */ .theme-ember { --accent: var(--ember); --accent-border: rgba(251,146,60,0.4); --accent-border-hover: rgba(251,146,60,0.7); --accent-bg: rgba(251,146,60,0.07); --accent-bg-hover: rgba(251,146,60,0.13); --accent-glow: rgba(251,146,60,0.2); } /* Umber (ancient / sealed lore) */ .theme-umber { --accent: var(--umber-light); --accent-border: rgba(217,119,6,0.38); --accent-border-hover: rgba(217,119,6,0.68); --accent-bg: rgba(146,64,14,0.08); --accent-bg-hover: rgba(146,64,14,0.14); --accent-glow: rgba(217,119,6,0.18); } /* Danger (adversaries / dark moments) */ .theme-danger { --accent: var(--danger); --accent-border: rgba(248,113,113,0.4); --accent-border-hover: rgba(248,113,113,0.7); --accent-bg: rgba(248,113,113,0.07); --accent-bg-hover: rgba(248,113,113,0.13); --accent-glow: rgba(248,113,113,0.2); } /* Sky (affiliate / sky blue) */ .theme-sky { --accent: var(--sky); --accent-border: rgba(56,189,248,0.38); --accent-border-hover: rgba(56,189,248,0.68); --accent-bg: rgba(56,189,248,0.06); --accent-bg-hover: rgba(56,189,248,0.12); --accent-glow: rgba(56,189,248,0.18); } /* Amber (Sarah's Children / warm gold) */ .theme-amber { --accent: var(--amber); --accent-border: rgba(251,191,36,0.38); --accent-border-hover: rgba(251,191,36,0.68); --accent-bg: rgba(251,191,36,0.06); --accent-bg-hover: rgba(251,191,36,0.12); --accent-glow: rgba(251,191,36,0.18); } /* Heal (newgen / living green) */ .theme-heal { --accent: var(--heal); --accent-border: rgba(74,222,128,0.38); --accent-border-hover: rgba(74,222,128,0.68); --accent-bg: rgba(74,222,128,0.06); --accent-bg-hover: rgba(74,222,128,0.12); --accent-glow: rgba(74,222,128,0.18); } /* Shadow (indigo / lore / mystery) */ .theme-shadow { --accent: var(--shadow); --accent-border: rgba(129,140,248,0.35); --accent-border-hover: rgba(129,140,248,0.65); --accent-bg: rgba(129,140,248,0.06); --accent-bg-hover: rgba(129,140,248,0.12); --accent-glow: rgba(129,140,248,0.18); } /* ── Book Label Links (moved from index.html inline style) ── */ .book-label-link { color: inherit; text-decoration: none; display: inline-block; transition: opacity var(--transition); } .book-label-link:hover .book-label, .book-label-link:hover .livebook-label, .book-label-link:hover .coming-soon-book-label { opacity: .7; } /* ══════════════════════════════════════════════ FROST SYSTEM — Between / Liminal UI For B4 membrane elements, crossed-over states, and future B5 world-mutation indicators. Use data-arc="catalyst" on for full effect. ══════════════════════════════════════════════ */ /* Frost membrane line (upgraded from .membrane-line) */ .membrane-line-frost { flex: 1; max-width: 100px; height: 1px; background: linear-gradient(90deg, transparent, rgba(165,243,252,0.35)); position: relative; overflow: hidden; } .membrane-line-frost::after { content: ''; position: absolute; top: 0; left: -100%; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, var(--frost), transparent); animation: frostDrift 3s ease-in-out infinite; } .membrane-line-frost:last-child { background: linear-gradient(90deg, rgba(165,243,252,0.35), transparent); } .membrane-text-frost { font-family: var(--font-ui); font-size: .6rem; color: rgba(165,243,252,0.5); letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; animation: frostPulse 5s ease-in-out infinite; } /* Frost card — for Between-state content, retrieved characters */ .frost-card { background: linear-gradient(135deg, rgba(10,10,18,0.97), rgba(8,145,178,0.06) 50%, rgba(10,10,18,0.97) ); border: 1px solid rgba(165,243,252,0.18); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .frost-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--frost2), var(--frost), var(--frost2), transparent ); animation: frostPulse 4s ease-in-out infinite; } .frost-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(165,243,252,0.04) 48%, rgba(103,232,249,0.06) 52%, transparent 70% ); background-size: 250% 100%; animation: voidShimmer 6s linear infinite; pointer-events: none; } .frost-card:hover { border-color: rgba(165,243,252,0.35); box-shadow: 0 8px 40px rgba(8,145,178,0.12), 0 0 0 1px rgba(165,243,252,0.08); } /* Frost label — for characters/objects in/from the Between */ .frost-label { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--frost2); background: rgba(8,145,178,0.08); border: 1px solid rgba(165,243,252,0.2); padding: .2rem .7rem; border-radius: 4px; animation: frostPulse 4s ease-in-out infinite; } /* Frost glow text */ .frost-text { color: var(--frost); text-shadow: 0 0 20px rgba(165,243,252,0.4), 0 0 40px rgba(103,232,249,0.15); } /* ── Umber System — Ancient / Sealed Lore ── */ /* For tablets, sealed documents, pre-history elements */ .umber-card { background: linear-gradient(135deg, rgba(22,22,42,0.98), rgba(92,40,14,0.06) 50%, rgba(22,22,42,0.98) ); border: 1px solid rgba(217,119,6,0.2); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .umber-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--umber), var(--umber-light), var(--umber), transparent ); opacity: 0.6; } .umber-card:hover { border-color: rgba(217,119,6,0.4); box-shadow: 0 8px 40px rgba(146,64,14,0.15); } .umber-label { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--umber-light); background: rgba(146,64,14,0.1); border: 1px solid rgba(217,119,6,0.25); padding: .2rem .7rem; border-radius: 4px; } .umber-text { color: var(--umber-light); text-shadow: 0 0 20px rgba(217,119,6,0.3); } /* ── Ember System — Heat / Pressure / Adversarial ── */ .ember-card { background: linear-gradient(135deg, rgba(22,22,42,0.98), rgba(124,45,18,0.06) 50%, rgba(22,22,42,0.98) ); border: 1px solid rgba(251,146,60,0.2); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .ember-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ember), var(--fire), var(--ember), transparent ); opacity: 0.5; animation: emberFlare 3s ease-in-out infinite; } .ember-card:hover { border-color: rgba(251,146,60,0.45); box-shadow: 0 8px 40px rgba(249,115,22,0.12); } .ember-label { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ember); background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.25); padding: .2rem .7rem; border-radius: 4px; } .ember-text { color: var(--ember); text-shadow: 0 0 20px rgba(251,146,60,0.35), 0 0 40px rgba(249,115,22,0.12); } /* ── Sky / Affiliate System ── */ .sky-label { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sky); background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.22); padding: .2rem .7rem; border-radius: 4px; } /* ── Danger / Adversaries System ── */ .danger-label { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--danger); background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.22); padding: .2rem .7rem; border-radius: 4px; } /* ══════════════════════════════════════════════ INDEX PAGE UTILITIES Classes generated from index page audit — replaces all inline color styles across the four index pages. ══════════════════════════════════════════════ */ /* ── Books listing section wrapper ── */ /* Replaces
*/ .books-listing-section { max-width: 1000px; margin: 0 auto; padding: 6rem 2rem 4rem; } /* ── Timeline dot variants ── */ .timeline-dot--void { background: var(--void-glow); box-shadow: 0 0 15px rgba(139,92,246,0.5); } .timeline-dot--gold { background: var(--gold); box-shadow: 0 0 15px rgba(212,168,67,0.4); } .timeline-dot--frost { background: var(--frost); box-shadow: 0 0 15px rgba(165,243,252,0.45); } .timeline-dot--ember { background: var(--ember); box-shadow: 0 0 15px rgba(251,146,60,0.4); } .timeline-dot--danger { background: var(--danger); box-shadow: 0 0 15px rgba(248,113,113,0.4); } .timeline-dot--amber { background: var(--amber); box-shadow: 0 0 15px rgba(251,191,36,0.4); } .timeline-dot--heal { background: var(--heal2); box-shadow: 0 0 15px rgba(34,197,94,0.4); } .timeline-dot--sky { background: var(--sky); box-shadow: 0 0 15px rgba(56,189,248,0.4); } .timeline-dot--umber { background: var(--umber-light); box-shadow: 0 0 15px rgba(217,119,6,0.4); } .timeline-dot--purple { background: var(--purple2); box-shadow: 0 0 15px rgba(177,151,252,0.4); } .timeline-dot--shadow { background: var(--shadow); box-shadow: 0 0 15px rgba(129,140,248,0.4); } /* ── Timeline card variants ── */ .timeline-card--void { border-color: rgba(139,92,246,0.3); background: linear-gradient(135deg, var(--card), rgba(109,40,217,0.05)); } .timeline-card--void:hover { border-color: var(--void-glow); box-shadow: 0 4px 20px rgba(109,40,217,0.12); } .timeline-card--gold { border-color: rgba(212,168,67,0.3); background: linear-gradient(135deg, var(--card), rgba(212,168,67,0.04)); } .timeline-card--gold:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(212,168,67,0.1); } .timeline-card--frost { border-color: rgba(165,243,252,0.22); background: linear-gradient(135deg, var(--card), rgba(8,145,178,0.04)); } .timeline-card--frost:hover { border-color: var(--frost2); box-shadow: 0 4px 20px rgba(8,145,178,0.1); } .timeline-card--ember { border-color: rgba(251,146,60,0.25); background: linear-gradient(135deg, var(--card), rgba(249,115,22,0.04)); } .timeline-card--ember:hover { border-color: var(--ember); box-shadow: 0 4px 20px rgba(251,146,60,0.1); } .timeline-card--danger { border-color: rgba(248,113,113,0.25); background: linear-gradient(135deg, var(--card), rgba(248,113,113,0.04)); } .timeline-card--danger:hover { border-color: var(--danger); box-shadow: 0 4px 20px rgba(248,113,113,0.1); } .timeline-card--amber { border-color: rgba(251,191,36,0.25); background: linear-gradient(135deg, var(--card), rgba(251,191,36,0.04)); } .timeline-card--amber:hover { border-color: var(--amber); box-shadow: 0 4px 20px rgba(251,191,36,0.1); } .timeline-card--heal { border-color: rgba(34,197,94,0.22); background: linear-gradient(135deg, var(--card), rgba(34,197,94,0.04)); } .timeline-card--heal:hover { border-color: var(--heal2); box-shadow: 0 4px 20px rgba(34,197,94,0.1); } .timeline-card--sky { border-color: rgba(56,189,248,0.22); background: linear-gradient(135deg, var(--card), rgba(56,189,248,0.04)); } .timeline-card--sky:hover { border-color: var(--sky); box-shadow: 0 4px 20px rgba(56,189,248,0.1); } .timeline-card--umber { border-color: rgba(217,119,6,0.22); background: linear-gradient(135deg, var(--card), rgba(146,64,14,0.04)); } .timeline-card--umber:hover { border-color: var(--umber-light); box-shadow: 0 4px 20px rgba(217,119,6,0.1); } .timeline-card--purple { border-color: rgba(177,151,252,0.22); background: linear-gradient(135deg, var(--card), rgba(167,139,250,0.04)); } .timeline-card--purple:hover { border-color: var(--purple2); box-shadow: 0 4px 20px rgba(177,151,252,0.1); } .timeline-card--shadow { border-color: rgba(129,140,248,0.22); background: linear-gradient(135deg, var(--card), rgba(129,140,248,0.04)); } .timeline-card--shadow:hover { border-color: var(--shadow); box-shadow: 0 4px 20px rgba(129,140,248,0.1); } /* ── Map legend dot variants ── */ .legend-dot--gold { background: var(--gold); box-shadow: 0 0 5px rgba(212,168,67,0.35); } .legend-dot--void { background: var(--void-glow); opacity: 0.6; } .legend-dot--heal { background: var(--heal); opacity: 0.7; } .legend-dot--frost { background: var(--frost); opacity: 0.65; } .legend-dot--ember { background: var(--ember); box-shadow: 0 0 5px rgba(251,146,60,0.35); } .legend-dot--danger { background: var(--danger); opacity: 0.7; } .legend-dot--amber { background: var(--amber); box-shadow: 0 0 5px rgba(251,191,36,0.35); } .legend-dot--sky { background: var(--sky); opacity: 0.7; } .legend-dot--umber { background: var(--umber-light); opacity: 0.7; } .legend-dot--purple { background: var(--purple2); opacity: 0.65; } .legend-dot--shadow { background: var(--shadow); opacity: 0.65; } /* ── SVG loc-label variants ── */ .loc-label--void { fill: var(--void-glow); } .loc-label--gold { fill: var(--gold2); } .loc-label--frost { fill: var(--frost); opacity: 0.7; } .loc-label--ember { fill: var(--ember); opacity: 0.85; } .loc-label--danger { fill: var(--danger); opacity: 0.8; } .loc-label--amber { fill: var(--amber); opacity: 0.85; } .loc-label--heal { fill: var(--heal2); opacity: 0.8; } .loc-label--sky { fill: var(--sky); opacity: 0.8; } .loc-label--umber { fill: var(--umber-light); opacity: 0.8; } .loc-label--purple { fill: var(--purple2); opacity: 0.75; } .loc-label--shadow { fill: var(--shadow); opacity: 0.75; } /* ══════════════════════════════════════════════ NARRATIVE COLOR CLASSES Added from HTML audit — each class carries intentional story meaning, not decoration. ══════════════════════════════════════════════ */ /* ── Book Recap Chapter Card ── */ /* The "What You Need to Know" card at the end of each book */ .chapter-card--recap { border-color: rgba(212,168,67,0.2); } .chapter-card--recap .chapter-number { color: var(--gold); opacity: .6; letter-spacing: 3px; } .chapter-card--recap .chapter-title { color: var(--gold); opacity: .85; } .chapter-card--recap::before { background: linear-gradient(135deg, rgba(212,168,67,0.05) 0%, transparent 60%); } .chapter-card--recap:hover { border-color: rgba(212,168,67,0.4); box-shadow: 0 4px 20px rgba(212,168,67,0.06); } .chapter-card--recap.open { border-color: rgba(212,168,67,0.35); box-shadow: 0 8px 40px rgba(212,168,67,0.08); } /* ── Arc Header Variants ── */ /* Arc Two — The Descent: void deepens, things grow darker */ .arc-header--descent h3 { color: var(--purple2); opacity: .75; } /* Arc Two — The Crossing: frost, the membrane, the Between */ .arc-header--crossing h3 { color: var(--frost2); opacity: .75; text-shadow: 0 0 20px rgba(103,232,249,0.2); } /* Arc Three — The Return: gold+void — what comes back is changed */ .arc-header--return h3 { background: linear-gradient(90deg, var(--gold), var(--void-glow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .8; } /* ── Shift-type as badge ── */ /* .shift-type already has font/size from .shift-card .shift-type Adding a .badge-* class gives it the colored border/bg pill look */ .shift-card .shift-type.badge-complete, .shift-card .shift-type.badge-heal, .shift-card .shift-type.badge-umber, .shift-card .shift-type.badge-amber, .shift-card .shift-type.badge-danger, .shift-card .shift-type.badge-void, .shift-card .shift-type.badge-frost, .shift-card .shift-type.badge-coming-soon, .shift-card .shift-type.badge-locked { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .55rem; font-weight: 500; letter-spacing: 1.5px; margin-bottom: .7rem; } /* ── Teaser declaration (Book Four) ── */ /* The two pivotal sentences: "There are people worth going after" etc. */ .book4-teaser .teaser-declaration { color: var(--arc-color, var(--gold)); font-size: 1.05rem; font-weight: 600; font-style: italic; opacity: .9; margin-bottom: .4rem; } /* ── Book-page-meta badge override ── */ /* When a .book-badge is placed inside .book-page-meta, tweak sizing */ .book-page-meta .book-badge { font-size: .6rem; padding: .15rem .55rem; vertical-align: middle; margin: 0 .1rem; } /* ── Mobile ── */ @media(max-width:768px){ .book-page-hero { min-height: 75vh; } .book-page-cover img { object-position: 35% top; } .book-page-hero-content { padding: 3rem 1.2rem 2.5rem; } nav .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:rgba(10,10,18,0.98);flex-direction:column;padding:1.5rem;gap:1.2rem;border-bottom:1px solid var(--border)} nav .nav-links.open{display:flex} .hamburger{display:flex} .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} .timeline::before{left:20px} .timeline-item,.timeline-item.left,.timeline-item.right{width:100%;left:0;text-align:left;padding-left:50px;padding-right:1rem} .timeline-dot,.timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot{left:14px;right:auto} .char-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} section{padding:4rem 1rem 3rem} .chapter-header{flex-wrap:wrap} .chapter-number,.ch-num{min-width:auto} .ch-row{flex-wrap:wrap;gap:.5rem} .prologue-card{padding:1.5rem} .shifts-grid{grid-template-columns:1fr} .roster-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .tablet{padding:2rem 1.2rem} .tablet-words{letter-spacing:4px} .chapter-grid-2col{grid-template-columns:1fr} } /* ── Ambient Background Particles ── */ .ambient-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .ap{position:absolute;border-radius:50%;opacity:0;animation:apFloat linear infinite} @keyframes apFloat{ 0%{opacity:0;transform:translateY(0) scale(0.6)} 10%{opacity:1} 80%{opacity:0.6} 100%{opacity:0;transform:translateY(-100vh) scale(1.1)} } /* ── Book Four Ch-Row Live (unlock by adding .live class) ── */ .ch-row.live{opacity:1;cursor:pointer;transition:all var(--transition)} .ch-row.live:hover{border-color:var(--arc-color,var(--gold));transform:translateX(4px)} .ch-row.live .ch-title{color:var(--gold2)} .ch-status.live{background:var(--heal);color:#0a0a12;font-weight:600} /* B4 locked rows: gold tint instead of neutral */ #book4 .ch-row.locked{border-color:rgba(212,168,67,0.08)} #book4 .ch-row.locked .ch-num{color:rgba(212,168,67,0.4)} #book4 .ch-row.locked .ch-title{color:rgba(212,168,67,0.25);letter-spacing:0} /* ── Book Cards ── */ .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; } /* Base card — shared by both cover and no-cover versions */ .book-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; color: inherit; } .book-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(124,58,237,0.15); } .book-card.book4-card { border-color: var(--arc-border, rgba(212,168,67,0.2)); } .book-card.book4-card:hover { border-color: var(--arc-glow, rgba(212,168,67,0.5)); box-shadow: 0 12px 40px var(--arc-dim, rgba(212,168,67,0.12)); } /* ── Cover image block ── */ .book-cover { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; flex-shrink: 0; } .book-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s ease; } .book-card:hover .book-cover img { transform: scale(1.06) translateY(-4px); } /* Gradient fade from cover into info strip */ .book-cover::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, var(--card) 0%, rgba(21,21,42,0.75) 50%, transparent 100%); pointer-events: none; } /* Title overlaid on the cover image */ .book-cover-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem 1rem .6rem; z-index: 1; text-align: center; } /* ── No-cover fallback (emoji icon, same as before) ── */ .book-card.no-cover { padding: 1.5rem; text-align: center; } .book-icon { font-size: 2.5rem; margin-bottom: .6rem; filter: drop-shadow(0 0 10px var(--faction-order-glow, rgba(212,168,67,0.3))); } .book4-card .book-icon { filter: drop-shadow(0 0 10px var(--arc-glow, rgba(212,168,67,0.2))); opacity: .75; animation: pulse 3s ease-in-out infinite; } /* ── Shared text elements ── */ .book-number { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text3); margin-bottom: .2rem; } .book4-card .book-number { color: var(--arc-color, rgba(212,168,67,0.45)); opacity: .45; } .book-name { font-family: var(--font-display); font-size: 1rem; color: var(--gold2); letter-spacing: 1px; margin-bottom: .15rem; } .book4-card .book-name { color: var(--arc-color, rgba(212,168,67,0.7)); opacity: .7; } .book-subtitle { font-family: var(--font-ui); font-size: .65rem; color: var(--text3); letter-spacing: 1px; } /* ── Info strip (below cover or inline for no-cover) ── */ .book-info { padding: .7rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .book-card.no-cover .book-info { padding: .5rem 0 0; } .book-badge { font-family: var(--font-ui); font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; padding: .2rem .6rem; border-radius: 4px; display: inline-block; align-self: center; } /* Semantic status badges */ .badge-complete { color: var(--gold); background: rgba(212,168,67,0.10); border: 1px solid rgba(212,168,67,0.25); } .badge-live { color: var(--heal2); background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.2); } .badge-coming-soon { color: rgba(212,168,67,0.65); background: rgba(212,168,67,0.07); border: 1px solid rgba(212,168,67,0.18); } .badge-locked { color: var(--text3); background: rgba(112,112,138,0.10); border: 1px solid rgba(112,112,138,0.2); } /* New palette badges */ .badge-frost { color: var(--frost); background: rgba(165,243,252,0.08); border: 1px solid rgba(165,243,252,0.2); } .badge-ember { color: var(--ember); background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2); } .badge-umber { color: var(--umber-light); background: rgba(146,64,14,0.10); border: 1px solid rgba(217,119,6,0.22); } .badge-danger { color: var(--danger); background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); } .badge-sky { color: var(--sky); background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.2); } .badge-amber { color: var(--amber); background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); } /* Legacy aliases — remove once all HTML is updated */ .badge-green { color: var(--heal); background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.2); } .badge-purple { color: var(--void-glow); background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.2); } .badge-gold { color: rgba(212,168,67,0.7); background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.2); } /* Semantic palette — used by shift-type and other arc-aware components */ .badge-void { color: var(--void-glow); background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.22); } .badge-heal { color: var(--heal2); background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.22); } .badge-shadow { color: var(--shadow); background: rgba(129,140,248,0.10); border: 1px solid rgba(129,140,248,0.22); } .badge-purple { color: var(--purple2); background: rgba(177,151,252,0.10); border: 1px solid rgba(177,151,252,0.22); } .book-desc { font-family: var(--font-body); font-size: .9rem; color: var(--text2); line-height: 1.55; flex: 1; } .book-meta { display: flex; justify-content: center; gap: .8rem; font-family: var(--font-ui); font-size: .58rem; letter-spacing: 1px; color: var(--text3); text-transform: uppercase; border-top: 1px solid var(--border); padding-top: .7rem; } .book-meta span { display: flex; align-items: center; gap: .3rem; } .book-read-label { font-family: var(--font-ui); font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--purple2); text-align: center; opacity: 0; transform: translateY(4px); transition: opacity var(--transition), transform var(--transition), color var(--transition); padding-top: .3rem; } .book-card:hover .book-read-label { opacity: 1; transform: translateY(0); color: var(--arc-color, var(--gold)); } .book4-card:hover .book-read-label { color: var(--arc-color, rgba(212,168,67,0.7)); }