/* ============================================ THE GOLDEN SCRIPTORIUM — Design System Keeper of Forbidden Lore ============================================ */ /* --- CSS Custom Properties --- */ :root { color-scheme: dark; /* Brand Colors */ --gold: #D2A238; --gold-dim: #997429; --gold-bright: #F0C356; --gold-glow: rgba(210, 162, 56, 0.32); --gold-rgb: 210, 162, 56; --crimson: #8B0000; --crimson-dim: #5C0000; --crimson-glow: rgba(139, 0, 0, 0.4); --ochre: #CC7722; --bone: #E2D5BA; --bone-dim: #B9AB8E; --void: #0D0D13; --void-light: #15151F; --void-surface: #1E1E2A; --void-border: #343440; --void-rgb: 13, 13, 19; --surface-tint: rgba(255, 255, 255, 0.02); --psychic-blue: #4A7FB5; --psychic-glow: rgba(74, 127, 181, 0.3); /* Typography */ --font-display: 'Cinzel', Georgia, serif; --font-body: 'EB Garamond', 'Times New Roman', serif; --font-ui: 'Inter', Arial, sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 10rem; /* Transitions */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* --- Illuminated Mode (light) — the manuscript by daylight --- Aged parchment ground, iron-gall ink text, gold leaf deepened for contrast. Toggled via data-theme on ; default remains the void. */ html[data-theme="light"] { color-scheme: light; --gold: #7A5A13; /* 4.79:1 on the parchment ground — AA for body text */ --gold-dim: #A8893E; --gold-bright: #6B4F0E; --gold-glow: rgba(158, 121, 36, 0.28); --gold-rgb: 122, 90, 19; --crimson: #7A1508; --crimson-dim: #B98D6F; --crimson-glow: rgba(122, 21, 8, 0.18); --ochre: #98590F; --bone: #2A2114; --bone-dim: #6B5D44; --void: #E9DFC4; --void-light: #F0E8D3; --void-surface: #F6F0E0; --void-border: #C9BB97; --void-rgb: 233, 223, 196; --surface-tint: rgba(58, 44, 18, 0.04); --psychic-blue: #2F5D8C; --psychic-glow: rgba(47, 93, 140, 0.2); } /* Dark islands: elements that sit ON artwork keep the void palette in both themes — their scrims are ink-dark regardless of page ground. */ html[data-theme="light"] .card-era, html[data-theme="light"] .mosaic-overlay, html[data-theme="light"] .category-card-content, html[data-theme="light"] .artwork-overlay, html[data-theme="light"] .lightbox, html[data-theme="light"] .influential-card-meta, html[data-theme="light"] .vox-hero { --gold: #D2A238; --gold-dim: #997429; --gold-bright: #F0C356; --gold-glow: rgba(210, 162, 56, 0.32); --bone: #E2D5BA; --bone-dim: #B9AB8E; --void: #0D0D13; --void-surface: #1E1E2A; --void-border: #343440; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 17px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--gold-dim) var(--void); } body { font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1.7; color: var(--bone); background: var(--void); overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--gold); color: var(--void); } /* --- Accessibility --- */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1000; padding: 0.75rem 1.5rem; background: var(--void-surface); border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } #dust-particles { display: none; } .scroll-reveal, .reveal-text { opacity: 1 !important; transform: none !important; } } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; } img { max-width: 100%; height: auto; } a { color: var(--gold); text-decoration: none; transition: color 0.3s var(--ease-out); } a:hover { color: var(--gold-bright); } /* --- Astronomican Pulse — The Emperor's Light --- */ .astronomican-pulse { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: radial-gradient( ellipse 120% 80% at 50% 35%, rgba(var(--gold-rgb), 0.25) 0%, rgba(var(--gold-rgb), 0.12) 25%, rgba(var(--gold-rgb), 0.05) 50%, transparent 75% ); animation: astronomican-breathe 8s ease-in-out infinite; } @keyframes astronomican-breathe { 0%, 100% { opacity: 0.15; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.08); } } /* --- Particle Canvas --- */ #dust-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.4; } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 3rem; transition: all 0.5s var(--ease-out); background: transparent; } .nav.scrolled { background: rgba(var(--void-rgb), 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--void-border); padding: 1rem 2.5rem; } .nav-brand { display: flex; align-items: center; gap: 0.75rem; } .nav-sigil { font-size: 2rem; color: var(--gold); filter: drop-shadow(0 0 6px var(--gold-glow)); animation: sigil-pulse 4s ease-in-out infinite; } .nav-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--gold); transition: all 0.3s var(--ease-out); } .nav .nav-links { display: flex; list-style: none; gap: 2.5rem; } .nav .nav-links a { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-dim); position: relative; padding-bottom: 2px; } .nav .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.4s var(--ease-out); } .nav .nav-links a:hover { color: var(--gold); } .nav .nav-links a:hover::after { width: 100%; } .nav .nav-links a.nav-active { color: var(--gold); } .nav .nav-links a.nav-active::after { width: 100%; background: var(--gold); } .nav-brand a { cursor: pointer; color: inherit; } /* --- Nav Dropdown (Archive Categories) --- */ .nav-dropdown-parent { position: relative; } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; background: rgba(var(--void-rgb), 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--void-border); padding: 0 0.3rem; margin-top: 0.5rem; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease-out), visibility 0.35s; } /* Invisible bridge between link and dropdown to prevent hover loss */ .nav-dropdown::before { content: ''; position: absolute; top: -1rem; left: 0; right: 0; height: 1rem; } .nav-dropdown-parent:hover .nav-dropdown, .nav-dropdown-parent:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; } .nav-dropdown-link { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-size: 0.85rem !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim) !important; text-decoration: none; padding: 0.8rem 1.4rem; transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out); } .nav-dropdown-link::after { display: none !important; } .nav-dropdown-link:hover { color: var(--gold) !important; background: rgba(var(--gold-rgb), 0.06); } .nav-dropdown-link.active { color: var(--gold) !important; } .category-nav-sigil { font-size: 1rem; opacity: 0.5; transition: opacity 0.3s var(--ease-out); } .nav-dropdown-link:hover .category-nav-sigil, .nav-dropdown-link.active .category-nav-sigil { opacity: 1; } /* --- Hero Section --- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--void); } .hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 40%, var(--crimson-dim) 0%, transparent 70%), radial-gradient(ellipse 80% 60% at 50% 50%, rgba(var(--gold-rgb), 0.05) 0%, transparent 70%); opacity: 0.6; animation: hero-breathe 8s ease-in-out infinite; } .hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, var(--void) 100%); pointer-events: none; } .hero-content { position: relative; z-index: 10; text-align: center; max-width: 800px; padding: var(--space-md); } /* Animated Sigil */ .hero-sigil { width: 160px; height: 160px; margin: 0 auto var(--space-md); animation: sigil-float 6s ease-in-out infinite; } .sigil-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px var(--gold-glow)); border-radius: 50%; } /* Hero Typography */ .hero-title { margin-bottom: var(--space-sm); /* Break out of the 800px hero column so the oversized title centres on the viewport instead of overflowing lopsidedly */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .title-line { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.15em; /* Compensate the trailing letter-space so glyphs centre optically */ margin-right: -0.15em; text-transform: uppercase; line-height: 1.1; } .title-line:first-child { font-size: clamp(1.4rem, 4.8vw, 3.6rem); color: var(--bone); } .title-accent { font-size: clamp(1.9rem, 8.2vw, 5.75rem); color: var(--gold); text-shadow: 0 0 40px var(--gold-glow), 0 0 80px rgba(var(--gold-rgb), 0.15); } .hero-subtitle { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: var(--space-md); } .hero-divider { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: var(--space-md); } .divider-line { display: block; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .divider-sigil { color: var(--gold); font-size: 0.7rem; } .hero-quote { font-family: var(--font-body); font-size: 1.35rem; color: var(--bone-dim); margin-bottom: var(--space-lg); font-style: italic; } .hero-cta { display: inline-block; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 1rem 2.5rem; position: relative; overflow: hidden; transition: all 0.5s var(--ease-out); } .hero-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-glow), transparent); opacity: 0; transition: opacity 0.5s var(--ease-out); } .hero-cta:hover { color: var(--void); background: var(--gold); border-color: var(--gold); box-shadow: 0 0 30px var(--gold-glow); } /* Scroll Indicator */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; } .scroll-line { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scroll-pulse 2s ease-in-out infinite; } /* --- Reveal Animations --- */ .reveal-text { opacity: 0; transform: translateY(20px); animation: text-reveal 0.8s var(--ease-out) forwards; } .reveal-text[data-delay="300"] { animation-delay: 0.3s; } .reveal-text[data-delay="600"] { animation-delay: 0.6s; } .reveal-text[data-delay="900"] { animation-delay: 0.9s; } .reveal-text[data-delay="1100"] { animation-delay: 1.1s; } .reveal-text[data-delay="1300"] { animation-delay: 1.3s; } .reveal-text[data-delay="1500"] { animation-delay: 1.5s; } .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } /* --- Section Base Styles --- */ .section { position: relative; z-index: 10; padding: var(--space-2xl) 0; } .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); } .section-header { text-align: center; margin-bottom: var(--space-xl); } .section-label { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 0.4rem 1.5rem; margin-bottom: var(--space-sm); } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--bone); letter-spacing: 0.05em; margin-bottom: var(--space-xs); } .section-subtitle { font-family: var(--font-body); font-size: 1.1rem; color: var(--bone-dim); font-style: italic; } /* --- Introduction --- */ .intro { background: linear-gradient(180deg, var(--void) 0%, var(--void-light) 50%, var(--void) 100%); padding: var(--space-xl) 0; } .intro-text { max-width: 680px; margin: 0 auto; text-align: center; } .intro-lead { font-size: 1.4rem; color: var(--bone); margin-bottom: var(--space-md); line-height: 1.8; } .intro-text p { margin-bottom: var(--space-sm); color: var(--bone-dim); font-size: 1.1rem; } .intro-sigil-mark { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: var(--space-lg); color: var(--gold-dim); font-size: 0.8rem; } .sigil-mark-line { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } /* --- Chronicle Cards --- */ .chronicle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-md); } .chronicle-card { position: relative; display: flex; flex-direction: column; background: var(--void-light); border: 1px solid var(--void-border); overflow: hidden; transition: all 0.5s var(--ease-out); cursor: pointer; } .chronicle-card:hover { border-color: var(--gold-dim); transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--gold-glow); } .card-glow { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity 0.5s var(--ease-out); } .chronicle-card:hover .card-glow { opacity: 1; } .card-image { position: relative; height: 220px; flex-shrink: 0; background-color: var(--void-surface); background-size: cover; background-position: center; border-bottom: 1px solid var(--void-border); } .card-era { position: absolute; bottom: 0.75rem; left: 0.75rem; font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); background: rgba(13, 13, 19, 0.85); padding: 0.3rem 0.8rem; border: 1px solid var(--gold-dim); } .card-content { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; } .card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--bone); margin-bottom: 0.75rem; letter-spacing: 0.03em; } .card-excerpt { font-size: 0.95rem; color: var(--bone-dim); margin-bottom: 1rem; line-height: 1.6; font-style: italic; } .card-excerpt:empty { display: none; } .card-link { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: auto; align-self: flex-start; transition: all 0.3s var(--ease-out); } .card-link:hover { letter-spacing: 0.25em; } /* Stretch the card's link over the whole card so the entire box is clickable */ .chronicle-card a.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* Chronicle card scroll-reveal stagger */ .chronicle-card.scroll-reveal[data-delay="150"] { transition-delay: 0.15s; } .chronicle-card.scroll-reveal[data-delay="300"] { transition-delay: 0.3s; } /* --- Archive Mosaic Gallery --- */ .archive { background: linear-gradient(180deg, var(--void) 0%, var(--void-light) 30%, var(--void-light) 70%, var(--void) 100%); } .archive-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 6px; margin-bottom: var(--space-lg); } .mosaic-item { position: relative; aspect-ratio: 1; background-color: var(--void-surface); background-size: cover; background-position: center; overflow: hidden; cursor: pointer; } .mosaic-large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .mosaic-tall { grid-row: span 2; aspect-ratio: auto; } .mosaic-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 13, 19, 0.9) 0%, rgba(13, 13, 19, 0.2) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; opacity: 0; transition: opacity 0.4s var(--ease-out); } .mosaic-item:hover .mosaic-overlay { opacity: 1; } .mosaic-faction { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; } .mosaic-title { font-family: var(--font-display); font-size: 0.85rem; color: var(--bone); letter-spacing: 0.05em; } .archive-cta { text-align: center; } .btn-outline { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 1rem 2.5rem; transition: all 0.5s var(--ease-out); } .btn-outline:hover { background: rgba(var(--gold-rgb), 0.1); border-color: var(--gold); box-shadow: 0 0 20px var(--gold-glow); } /* --- Vox-Cast (YouTube) --- */ .voxcast { background: var(--void); } .voxcast-featured { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-lg); align-items: center; } .voxcast-embed { position: relative; padding-bottom: 56.25%; background: var(--void-surface); border: 1px solid var(--void-border); } .voxcast-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .voxcast-info h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--bone); margin-bottom: var(--space-sm); letter-spacing: 0.05em; } .voxcast-info p { color: var(--bone-dim); margin-bottom: var(--space-md); font-size: 1rem; } .voxcast-stats { display: flex; gap: var(--space-md); margin-bottom: var(--space-md); } .stat { text-align: center; } .stat-number { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--gold); } .stat-label { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-dim); } .btn-primary { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--void); background: var(--gold); border: none; padding: 1rem 2.5rem; cursor: pointer; transition: all 0.4s var(--ease-out); } .btn-primary:hover { background: var(--gold-bright); color: var(--void); box-shadow: 0 0 30px var(--gold-glow); transform: translateY(-2px); } /* --- Raffle Section --- */ .raffle { background: linear-gradient(180deg, var(--void) 0%, var(--void-light) 50%, var(--void) 100%); } .raffle-card { position: relative; max-width: 600px; margin: 0 auto; background: var(--void-surface); border: 1px solid var(--gold-dim); padding: var(--space-lg); text-align: center; overflow: hidden; } .raffle-glow { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: glow-pulse 3s ease-in-out infinite; } .raffle-content { position: relative; z-index: 1; } .raffle-badge { display: inline-block; font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson); border: 1px solid var(--crimson); padding: 0.3rem 1rem; margin-bottom: var(--space-md); animation: badge-blink 2s ease-in-out infinite; } .raffle-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); margin-bottom: var(--space-sm); letter-spacing: 0.05em; } .raffle-description { color: var(--bone-dim); margin-bottom: var(--space-md); font-size: 1rem; } .raffle-timer { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-md); } .timer-block { text-align: center; min-width: 5rem; } .timer-number { display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--bone); line-height: 1; } .timer-label { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); } .btn-glow { animation: btn-glow-pulse 3s ease-in-out infinite; } /* --- Community / Social --- */ .commune { background: var(--void); } .social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); } .social-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-lg) var(--space-md); background: var(--void-light); border: 1px solid var(--void-border); text-align: center; transition: all 0.5s var(--ease-out); text-decoration: none; } .social-card:hover { transform: translateY(-4px); border-color: var(--gold-dim); } .social-youtube:hover { box-shadow: 0 10px 40px rgba(255, 0, 0, 0.15); } .social-tiktok:hover { box-shadow: 0 10px 40px rgba(105, 201, 208, 0.15); } .social-facebook:hover { box-shadow: 0 10px 40px rgba(24, 119, 242, 0.15); } .social-icon { width: 40px; height: 40px; margin-bottom: var(--space-sm); color: var(--bone-dim); transition: color 0.3s var(--ease-out); } .social-card:hover .social-icon { color: var(--gold); } .social-icon svg { width: 100%; height: 100%; } .social-name { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--bone); margin-bottom: 0.3rem; } .social-count { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--bone-dim); } /* --- Email Signup --- */ .signup { position: relative; max-width: 600px; margin: 0 auto; background: var(--void-surface); border: 1px solid var(--void-border); padding: var(--space-lg); text-align: center; overflow: hidden; } .signup-glow { position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .signup-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin-bottom: var(--space-sm); letter-spacing: 0.05em; } .signup-text { color: var(--bone-dim); margin-bottom: var(--space-md); font-size: 0.95rem; } .signup-form { display: flex; gap: 0; max-width: 480px; margin: 0 auto var(--space-sm); } .signup-input { flex: 1; font-family: var(--font-body); font-size: 0.95rem; padding: 0.9rem 1.2rem; background: var(--void); border: 1px solid var(--void-border); border-right: none; color: var(--bone); outline: none; transition: border-color 0.3s var(--ease-out); } .signup-input::placeholder { color: var(--bone-dim); opacity: 0.5; } .signup-input:focus { border-color: var(--gold-dim); } .signup-form .btn-primary { border-radius: 0; white-space: nowrap; font-size: 0.7rem; padding: 0.9rem 1.5rem; } .signup-disclaimer { font-family: var(--font-ui); font-size: 0.7rem; color: var(--bone-dim); opacity: 0.5; font-style: italic; } /* --- Footer --- */ .footer { position: relative; z-index: 10; background: var(--void-light); border-top: 1px solid var(--void-border); padding: var(--space-xl) 0 var(--space-md); } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); display: flex; justify-content: space-between; margin-bottom: var(--space-lg); } .footer-sigil { display: block; font-size: 1.5rem; color: var(--gold-dim); margin-bottom: var(--space-xs); } .footer-title { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--gold); } .footer-tagline { font-family: var(--font-body); font-size: 0.85rem; color: var(--bone-dim); font-style: italic; margin-top: 0.3rem; } .footer-links { display: flex; gap: var(--space-xl); } .footer-col { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col h4 { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); margin-bottom: 0.3rem; } .footer-col a { font-family: var(--font-ui); font-size: 0.8rem; color: var(--bone-dim); } .footer-col a:hover { color: var(--gold); } .footer-bottom { text-align: center; padding-top: var(--space-md); border-top: 1px solid var(--void-border); max-width: 1200px; margin: 0 auto; padding-left: var(--space-md); padding-right: var(--space-md); } .footer-bottom p { font-family: var(--font-ui); font-size: 0.7rem; color: var(--bone-dim); opacity: 0.5; } .footer-creed { margin-top: 0.5rem; font-family: var(--font-display); font-style: italic; letter-spacing: 0.1em; opacity: 0.3 !important; } /* --- Keyframe Animations --- */ @keyframes sigil-draw { to { stroke-dashoffset: 0; opacity: 1; } } @keyframes rune-appear { from { opacity: 0; } to { opacity: 0.8; } } @keyframes eye-open { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } @keyframes pupil-glow { from { opacity: 0; } to { opacity: 1; } } @keyframes sigil-pulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px var(--gold-glow)); } 50% { opacity: 0.7; filter: drop-shadow(0 0 12px var(--gold-glow)); } } @keyframes sigil-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes hero-breathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } @keyframes text-reveal { to { opacity: 1; transform: translateY(0); } } @keyframes scroll-pulse { 0%, 100% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.3); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes badge-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes btn-glow-pulse { 0%, 100% { box-shadow: 0 0 10px var(--gold-glow); } 50% { box-shadow: 0 0 25px var(--gold-glow), 0 0 50px rgba(var(--gold-rgb), 0.1); } } /* --- Responsive --- */ @media (max-width: 900px) { .voxcast-featured { grid-template-columns: 1fr; } .archive-mosaic { grid-template-columns: repeat(2, 1fr); } .mosaic-large { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; } .mosaic-tall { grid-row: span 1; aspect-ratio: 1; } .social-grid { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; gap: var(--space-lg); } .footer-links { flex-direction: column; gap: var(--space-md); } } @media (max-width: 1024px) { .nav .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--void); padding: var(--space-md); gap: var(--space-sm); border-bottom: 1px solid var(--void-border); z-index: 200; backdrop-filter: none; } .nav .nav-links.open { display: flex; } .nav-toggle { display: flex; } } @media (max-width: 600px) { .nav-title { font-size: 0.9rem; letter-spacing: 0.14em; } .chronicle-grid { grid-template-columns: 1fr; } .archive-mosaic { grid-template-columns: 1fr 1fr; } .mosaic-large { grid-column: span 2; } .signup-form { flex-direction: column; } .signup-input { border-right: 1px solid var(--void-border); border-bottom: none; } .voxcast-stats { justify-content: space-around; } .raffle-timer { gap: var(--space-sm); } } /* --- Page Heroes (Chronicles, Archive, 404) --- */ .gallery-hero, .chronicles-hero { position: relative; min-height: 50vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--void); z-index: 10; } .gallery-hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 60%, var(--crimson-dim) 0%, transparent 70%), radial-gradient(ellipse 80% 60% at 50% 50%, rgba(var(--gold-rgb), 0.05) 0%, transparent 70%); opacity: 0.4; animation: hero-breathe 8s ease-in-out infinite; } .gallery-hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, var(--void) 100%); pointer-events: none; } .gallery-hero-content { position: relative; z-index: 10; text-align: center; max-width: 800px; padding: var(--space-md); padding-top: calc(var(--space-xl) + 60px); } .gallery-hero-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 40px var(--gold-glow), 0 0 80px rgba(var(--gold-rgb), 0.15); margin-top: var(--space-sm); margin-bottom: var(--space-sm); } .gallery-hero-subtitle { font-family: var(--font-body); font-size: 1.15rem; color: var(--bone-dim); font-style: italic; max-width: 600px; margin: 0 auto var(--space-md); line-height: 1.7; } /* --- Chronicles Category Filter Bar --- */ .chronicles-filter { padding: var(--space-md) 0 0; } /* Chronicle search */ .chronicle-search { position: relative; display: flex; align-items: stretch; max-width: 520px; margin: 0 auto var(--space-md); border: 1px solid var(--void-border); background: var(--void-light); transition: border-color 0.3s var(--ease-out); } .chronicle-search:focus-within { border-color: var(--gold-dim); } .chronicle-search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--bone-dim); pointer-events: none; } .chronicle-search-input { flex: 1; min-width: 0; padding: 0.75rem 1rem 0.75rem 2.6rem; background: transparent; border: none; outline: none; font-family: var(--font-body); font-size: 1rem; color: var(--bone); } .chronicle-search-input::placeholder { color: var(--bone-dim); font-style: italic; } .chronicle-search-btn { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); background: transparent; border: none; border-left: 1px solid var(--void-border); padding: 0 1.2rem; cursor: pointer; transition: all 0.3s var(--ease-out); } .chronicle-search-btn:hover { background: var(--gold); color: var(--void); } .chronicles-filter .filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .filter-btn { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-dim); background: transparent; border: 1px solid var(--void-border); padding: 0.5rem 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s var(--ease-out); } .filter-btn:hover { color: var(--gold); border-color: var(--gold-dim); } .filter-btn.filter-active { color: var(--void); background: var(--gold); border-color: var(--gold); } .filter-count { font-family: var(--font-ui); font-size: 0.65rem; opacity: 0.7; } /* --- Single Chronicle (Post) --- */ .chronicle-hero { position: relative; min-height: 55vh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--void); } .chronicle-hero-image { position: absolute; inset: 0; background-size: cover; background-position: center 25%; } .chronicle-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--void-rgb), 0.55) 0%, rgba(var(--void-rgb), 0.75) 60%, var(--void) 100%); } .chronicle-hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 30%, var(--void) 100%); pointer-events: none; } .chronicle-hero-content { position: relative; z-index: 10; text-align: center; max-width: 900px; padding: var(--space-md); padding-top: calc(var(--space-xl) + 60px); padding-bottom: var(--space-lg); } .chronicle-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 40px var(--gold-glow), 0 2px 20px rgba(0, 0, 0, 0.8); margin: var(--space-sm) 0; line-height: 1.15; } .chronicle-meta { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: var(--space-sm); } .chronicle-article { padding: var(--space-lg) var(--space-md) var(--space-xl); } .chronicle-inner { max-width: 760px; margin: 0 auto; } .chronicle-body { font-size: 1.15rem; line-height: 1.9; color: var(--bone); } .chronicle-body p { margin-bottom: 1.6em; } .chronicle-body h2, .chronicle-body h3 { font-family: var(--font-display); color: var(--gold); letter-spacing: 0.06em; margin: 2em 0 0.8em; line-height: 1.3; } .chronicle-body h2 { font-size: 1.7rem; } .chronicle-body h3 { font-size: 1.3rem; } .chronicle-body a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-dim); } .chronicle-body a:hover { text-decoration-color: var(--gold-bright); } .chronicle-body blockquote { border-left: 2px solid var(--gold); margin: 2em 0; padding: 0.5em 0 0.5em 1.5em; font-style: italic; color: var(--bone-dim); } .chronicle-body ul, .chronicle-body ol { margin: 0 0 1.6em 1.5em; } .chronicle-body li { margin-bottom: 0.5em; } .chronicle-body img { max-width: 100%; height: auto; border: 1px solid var(--void-border); margin: 1em 0; } .chronicle-body strong { color: var(--gold-bright); font-weight: 600; } /* Post tags */ .chronicle-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--void-border); } .chronicle-tags-label { font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-dim); } .chronicle-tag { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid var(--void-border); padding: 0.3rem 0.8rem; transition: all 0.3s var(--ease-out); } .chronicle-tag:hover { color: var(--gold); border-color: var(--gold-dim); } /* Prev / next navigation */ .chronicle-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); } .chronicle-nav-link { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--void-border); background: var(--void-light); transition: all 0.4s var(--ease-out); } .chronicle-nav-link:hover { border-color: var(--gold-dim); background: var(--void-surface); } .chronicle-nav-next { text-align: right; align-items: flex-end; } .chronicle-nav-direction { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } .chronicle-nav .chronicle-nav-title { font-family: var(--font-display); font-size: 1rem; color: var(--bone); } /* --- Pagination (WordPress posts navigation) --- */ .chronicle-pagination { margin-top: var(--space-lg); } .chronicle-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; } .chronicle-pagination .page-numbers { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid var(--void-border); padding: 0.5rem 1rem; transition: all 0.3s var(--ease-out); } .chronicle-pagination a.page-numbers:hover { color: var(--gold); border-color: var(--gold-dim); } .chronicle-pagination .page-numbers.current { color: var(--void); background: var(--gold); border-color: var(--gold); } /* --- Empty States --- */ .chronicles-empty, .gallery-empty { text-align: center; padding: var(--space-xl) var(--space-md); } .empty-sigil, .empty-icon { font-size: 3rem; color: var(--gold-dim); margin-bottom: var(--space-sm); } .empty-title { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-xs); } .empty-text { color: var(--bone-dim); font-style: italic; margin-bottom: var(--space-md); } /* --- WordPress Core / Utility --- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Page-hero responsive --- */ @media (max-width: 600px) { .chronicle-nav { grid-template-columns: 1fr; } .chronicle-body { font-size: 1.05rem; } } /* ============================================ THEME TOGGLE & ILLUMINATED-MODE POLISH ============================================ */ /* Nav layout: brand | …links | actions (theme toggle + hamburger). Auto margin keeps the links hugging the right edge as before. */ .nav .nav-links { margin-left: auto; } .nav-actions { display: flex; align-items: center; gap: 0.9rem; margin-left: 1.75rem; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid transparent; border-radius: 50%; color: var(--gold); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.5s var(--ease-out); } .theme-toggle:hover { border-color: var(--gold-dim); color: var(--gold-bright); transform: rotate(25deg); } /* Glyph shows the mode you'll switch TO: sun in the void, moon on parchment */ .theme-toggle-icon::before { content: '☀'; } html[data-theme="light"] .theme-toggle-icon::before { content: '☾'; } /* Ease the crossing between void and daylight */ body { transition: background-color 0.4s ease, color 0.4s ease; } /* Illuminated-mode polish */ html[data-theme="light"] body { /* faint mottle of the parchment leaf */ background-image: radial-gradient(ellipse 60% 40% at 20% 10%, rgba(58, 44, 18, 0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 85% 80%, rgba(58, 44, 18, 0.04) 0%, transparent 60%); background-attachment: fixed; } /* Ink-dark shadows read too heavy on parchment — warm and soften them */ html[data-theme="light"] .chronicle-card:hover { box-shadow: 0 10px 30px rgba(90, 72, 35, 0.25), 0 0 20px var(--gold-glow); } /* Post hero: the featured plate fades into the leaf; the title needs a parchment halo instead of the void-mode black one */ html[data-theme="light"] .chronicle-hero-title { text-shadow: 0 0 40px var(--gold-glow), 0 2px 20px rgba(246, 240, 224, 0.9); } /* Dust motes: slightly stronger so ink-dust reads on parchment */ html[data-theme="light"] #dust-particles { opacity: 0.5; } /* --- Vox-Cast page (Spotify transmissions) --- */ /* Hero — art-backed band (astropathic choir plate); a dark island in both themes, so it keeps the void treatment on parchment too. */ .vox-hero { position: relative; min-height: 50vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0D0D13 url('../images/voxcast-hero.jpg') center 30% / cover no-repeat; z-index: 10; } .vox-hero-scrim { position: absolute; inset: 0; background: rgba(13, 13, 19, 0.45); } .vox-hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, #0D0D13 100%); pointer-events: none; } .vox-hero-content { position: relative; z-index: 10; text-align: center; max-width: 800px; padding: var(--space-md); padding-top: calc(var(--space-xl) + 60px); } .vox-hero-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 40px var(--gold-glow), 0 0 80px rgba(210, 162, 56, 0.15), 0 2px 20px rgba(13, 13, 19, 0.9); margin-top: var(--space-sm); margin-bottom: var(--space-sm); } .vox-hero-subtitle { font-family: var(--font-body); font-size: 1.15rem; color: var(--bone-dim); font-style: italic; max-width: 600px; margin: 0 auto var(--space-md); line-height: 1.7; text-shadow: 0 1px 12px rgba(13, 13, 19, 0.9); } .voxcast-page { padding-top: var(--space-xl); } .voxcast-page .section-header { margin-bottom: var(--space-lg); } .vox-show-player { max-width: 800px; margin: 0 auto var(--space-md); } .vox-show-player iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; } .vox-follow { text-align: center; margin-bottom: var(--space-xl); } .vox-divider { text-align: center; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-lg); } .vox-episodes { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 900px; margin: 0 auto; } .vox-episode { border: 1px solid var(--void-border); background: var(--void-light); padding: var(--space-md); transition: border-color 0.4s var(--ease-out); } .vox-episode:hover { border-color: var(--gold-dim); } .vox-episode h2 { font-family: var(--font-display); font-size: 1.15rem; color: var(--bone); letter-spacing: 0.04em; margin-bottom: var(--space-xs); } .vox-episode time { display: block; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-xs); } .vox-episode p { color: var(--bone-dim); font-size: 1rem; margin-bottom: var(--space-sm); } .vox-episode iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; }