/* ============================================================ Lictor FX — modern motion layer ============================================================ Drop-in upgrade. Adds: - Animated copper mesh gradient background - Glass nav with scroll blur - Scroll-reveal (.fx-reveal) - Card tilt on hover (.fx-tilt) - Cursor-glow on featured items (.fx-glow) - Supporter logo marquee (.fx-marquee) - Gradient heading (.fx-gradient-text) - Floating logo (.fx-float) - Pulsing copper aura (.fx-aura) Respects prefers-reduced-motion. ============================================================ */ :root { --copper-1: #E8A33D; --copper-2: #b06b3c; --copper-3: #8a4a25; --ink-deep: #0d0e12; --ink-soft: #15171e; --ink-glass: rgba(20, 22, 28, 0.55); --halo: rgba(232, 163, 61, 0.18); } /* ----- Animated mesh background (sits behind everything) ----- */ body { background: var(--ink-deep); position: relative; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: -20%; z-index: -2; background: radial-gradient(circle at 20% 20%, var(--halo) 0%, transparent 35%), radial-gradient(circle at 80% 30%, rgba(176, 107, 60, 0.12) 0%, transparent 40%), radial-gradient(circle at 50% 80%, rgba(138, 74, 37, 0.10) 0%, transparent 45%), radial-gradient(circle at 30% 70%, rgba(232, 163, 61, 0.08) 0%, transparent 50%); filter: blur(40px); animation: fx-mesh-drift 22s ease-in-out infinite alternate; pointer-events: none; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(232, 163, 61, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 163, 61, 0.03) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%); pointer-events: none; } @keyframes fx-mesh-drift { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(2%, -2%) rotate(0.5deg); } 100% { transform: translate(-2%, 2%) rotate(-0.5deg); } } /* ----- Glass nav (blur on scroll) ----- */ .nav, header.nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(180deg, rgba(13,14,18,0.78), rgba(13,14,18,0.45)); border-bottom: 1px solid rgba(232, 163, 61, 0.10); transition: background 0.25s ease, border-color 0.25s ease; } .nav.fx-scrolled { background: rgba(13,14,18,0.92); border-bottom-color: rgba(232, 163, 61, 0.25); } /* ----- Gradient text (use on hero h1) ----- */ .fx-gradient-text { background: linear-gradient(135deg, #f4dcc4 0%, var(--copper-1) 45%, #efc59a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ----- Hero logo: float + aura ----- */ .fx-float { animation: fx-float 6s ease-in-out infinite; } @keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .fx-aura { position: relative; display: inline-block; } .fx-aura::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle, var(--halo) 0%, transparent 60%); filter: blur(30px); z-index: -1; animation: fx-pulse 4s ease-in-out infinite; } @keyframes fx-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1.0; transform: scale(1.08); } } /* ----- Scroll-reveal ----- Default = VISIBLE (so a JS failure never hides content). The hidden+animated state only applies once has .fx-ready (added by fx.js the moment it starts). Belt-and-braces. */ html.fx-ready .fx-reveal:not(.fx-in) { opacity: 0; transform: translateY(24px); } .fx-reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--fx-delay, 0s); } .fx-reveal.fx-in { opacity: 1; transform: translateY(0); } /* ----- Card tilt on hover ----- */ .fx-tilt { transform-style: preserve-3d; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease; will-change: transform; } .fx-tilt:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 40px -20px rgba(232, 163, 61, 0.35), 0 0 0 1px rgba(232, 163, 61, 0.25); border-color: rgba(232, 163, 61, 0.4) !important; } /* ----- Cursor-glow (featured cards) ----- */ .fx-glow { position: relative; overflow: hidden; } .fx-glow::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 600px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 163, 61, 0.15), transparent 40% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .fx-glow:hover::before { opacity: 1; } /* ----- Marquee for supporter logos ----- */ .fx-marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); } .fx-marquee__track { display: flex; gap: 4rem; animation: fx-marquee 30s linear infinite; width: max-content; } .fx-marquee:hover .fx-marquee__track { animation-play-state: paused; } @keyframes fx-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ----- Count-up number styling ----- */ .fx-count { font-variant-numeric: tabular-nums; } /* ----- Section divider (subtle copper line) ----- */ .fx-divider { height: 1px; width: 60%; max-width: 320px; margin: 4rem auto; background: linear-gradient(90deg, transparent, var(--copper-2), transparent); opacity: 0.3; } /* ----- Button shine sweep ----- */ .fx-shine { position: relative; overflow: hidden; } .fx-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70% ); transform: translateX(-100%); transition: transform 0.6s ease; } .fx-shine:hover::after { transform: translateX(100%); } /* ----- Reduced motion: kill everything kinetic ----- */ @media (prefers-reduced-motion: reduce) { body::before { animation: none; } .fx-float, .fx-aura::before, .fx-marquee__track { animation: none !important; } .fx-reveal { opacity: 1; transform: none; transition: none; } .fx-tilt:hover { transform: none; } } /* ----- Mobile tightening ----- */ @media (max-width: 760px) { body::before { filter: blur(60px); } body::after { background-size: 48px 48px; } } /* ============================================================ FX v2 — premium layer ============================================================ */ /* Cursor spotlight (global, follows pointer) */ .fx-spotlight { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 400px circle at var(--cx, 50%) var(--cy, 50%), rgba(232, 163, 61, 0.10), transparent 70% ); mix-blend-mode: screen; opacity: 0.9; transition: opacity 0.4s ease; } /* Canvas particle field */ .fx-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* 3D parallax hero — wrapper provides perspective, child rotates in 3D */ .fx-parallax { perspective: 800px; transform-style: preserve-3d; } .fx-parallax .fx-parallax__layer { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; transform-style: preserve-3d; backface-visibility: hidden; } /* Subtle ambient idle tilt so it looks 3D even before mouse-move */ @keyframes fx-3d-idle { 0%, 100% { transform: rotateX(2deg) rotateY(-2deg); } 50% { transform: rotateX(-2deg) rotateY(2deg); } } .fx-parallax__layer { animation: fx-3d-idle 8s ease-in-out infinite; } /* Scan-line sweep on load (clip-path reveal) */ .fx-scan { position: relative; } .fx-scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 0%, rgba(232, 163, 61, 0.25) 49%, rgba(244, 220, 196, 0.85) 50%, rgba(232, 163, 61, 0.25) 51%, transparent 100% ); mix-blend-mode: screen; clip-path: inset(0 0 100% 0); animation: fx-scan-sweep 2.2s ease-out 0.4s forwards; pointer-events: none; } @keyframes fx-scan-sweep { 0% { clip-path: inset(0 0 100% 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { clip-path: inset(100% 0 0 0); opacity: 0; } } /* Clip-path section reveal (richer than opacity-only) */ .fx-clip-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.7, 0, 0.3, 1); transition-delay: var(--fx-delay, 0s); } .fx-clip-reveal.fx-in { clip-path: inset(0 0 0 0); } /* Variable-weight wordmark hover */ .brand__name { transition: font-variation-settings 0.3s ease, letter-spacing 0.3s ease; } .brand:hover .brand__name { letter-spacing: 0.04em; } /* Magnetic buttons (subtle pull toward cursor) */ .fx-magnetic { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Premium serif drop cap (for philosophy first paragraph) */ .fx-dropcap::first-letter { font-family: 'Cormorant Garamond', serif; font-size: 4.5rem; font-weight: 700; float: left; line-height: 0.85; margin: 0.3rem 0.6rem 0 0; color: var(--copper-1); background: linear-gradient(135deg, #f4dcc4, var(--copper-1)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Reduced motion kills these too */ @media (prefers-reduced-motion: reduce) { .fx-spotlight, .fx-particles, .fx-scan::after { display: none; } .fx-parallax__layer { transform: none !important; } .fx-clip-reveal { clip-path: none; } } /* ════════════════════════════════════════════════════════════════════ PREMIUM COMPONENT LAYER — appended 2026-05-29. Brings the mission-control glass / copper / glow language to the shared components site-wide. fx.css loads LAST, so this wins over both style.css and shell.css without touching them. Pure CSS, no new deps. ═══════════════════════════════════════════════════════════════════ */ /* Glass cards with a copper lift on hover */ .card, .shell-card { background: var(--ink-glass, rgba(20,22,28,0.58)) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(232, 163, 61,0.20) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; } .card:hover, .shell-card:hover { transform: translateY(-3px); border-color: var(--copper-1) !important; box-shadow: 0 16px 46px rgba(232, 163, 61,0.22), inset 0 1px 0 rgba(255,255,255,0.08); } /* Copper primary buttons with glow; refined glass ghost */ .btn--primary, .shell-btn--primary { background: linear-gradient(180deg, var(--accent-hover, #F2B85C), var(--accent, #E8A33D)) !important; color: #1c1206 !important; font-weight: 700; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 8px 24px -4px rgba(232, 163, 61, 0.45), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn--primary:hover, .shell-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 36px -6px rgba(232, 163, 61, 0.6), inset 0 1px 0 rgba(255,255,255,0.3); } .btn--ghost, .shell-btn--ghost { border: 1px solid rgba(232, 163, 61,0.30) !important; color: var(--text, #ECE3D6) !important; backdrop-filter: blur(8px); transition: border-color .2s ease, box-shadow .2s ease; } .btn--ghost:hover, .shell-btn--ghost:hover { border-color: var(--copper-1) !important; box-shadow: 0 0 22px rgba(232, 163, 61,0.22); } /* Pills → copper, rounded */ .card__pill, .shell-card__pill { background: rgba(232, 163, 61,0.12) !important; border: 1px solid rgba(232, 163, 61,0.30) !important; color: var(--copper-1) !important; border-radius: 999px !important; } /* Display headlines: soft copper glow */ .hero__title, .section__title, .card__title, .page-hero h1, .shell-section__head h2 { text-shadow: 0 0 38px rgba(232, 163, 61,0.12); } /* Hero shield: copper aura + gentle float */ .page-hero__shield, .page-hero__mark img { filter: drop-shadow(0 0 44px rgba(232, 163, 61,0.38)); animation: fx-float 6s ease-in-out infinite; } /* Warmer section dividers */ .divider-top, .suite, .section { border-top-color: rgba(232, 163, 61,0.14) !important; } @media (prefers-reduced-motion: reduce) { .page-hero__shield, .page-hero__mark img { animation: none; } } /* ════════════════════════════════════════════════════════════════════ ACCESSIBILITY LAYER — appended 2026-05-29. A site-wide control panel (motion / contrast / text size) + the modes it toggles, plus keyboard focus rings. Injected by fx.js. ═══════════════════════════════════════════════════════════════════ */ /* The floating control button */ .a11y-fab { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 10000; width: 52px; height: 52px; border-radius: 50%; background: var(--copper-1, #E8A33D); color: #1a1206; border: 2px solid rgba(255,255,255,0.22); cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,0.5); font-size: 1.45rem; display: grid; place-items: center; line-height: 1; } .a11y-fab:hover { box-shadow: 0 8px 30px rgba(232, 163, 61,0.55); } .a11y-panel { position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 10000; width: 274px; background: #0f1218; border: 1px solid var(--copper-1, #E8A33D); border-radius: 14px; padding: 1rem 1.15rem; box-shadow: 0 16px 48px rgba(0,0,0,0.6); color: #ECE3D6; } .a11y-panel[aria-hidden="true"] { display: none; } .a11y-title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; margin: 0 0 .35rem; color: var(--cream, #f4dcc4); } .a11y-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-top: 1px solid rgba(232, 163, 61,0.16); } .a11y-row:first-of-type { border-top: none; } .a11y-row label { font-size: .95rem; cursor: pointer; } .a11y-switch { width: 44px; height: 25px; -webkit-appearance: none; appearance: none; background: #3a3a3a; border-radius: 999px; position: relative; cursor: pointer; transition: background .2s ease; flex: none; } .a11y-switch:checked { background: var(--copper-1, #E8A33D); } .a11y-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform .2s ease; } .a11y-switch:checked::after { transform: translateX(19px); } .a11y-note { font-size: .72rem; color: #8E887B; margin: .65rem 0 0; line-height: 1.45; } /* MODE: high contrast — maximise legibility */ html.a11y-contrast { --text:#fff; --text-muted:#eaeaea; --accent:#E8A33D; --accent-hover:#F2B85C; --border:#fff; --border-light:#fff; --bg:#000; --surface:#000; --panel-bg:#000; --panel-border:#fff; } html.a11y-contrast body { background: #000 !important; } html.a11y-contrast .card, html.a11y-contrast .shell-card, html.a11y-contrast .install-card, html.a11y-contrast .panel { background: #000 !important; border-color: #fff !important; } html.a11y-contrast a, html.a11y-contrast .nav__links a { text-decoration: underline; } html.a11y-contrast #hero-canvas { opacity: .2 !important; } /* keep hero text legible */ /* MODE: larger text */ html.a11y-large { font-size: 118%; } /* MODE: reduced motion (user turned animations OFF) */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-nomotion #hero-canvas { display: none !important; } /* Site-wide keyboard focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent, #E8A33D); outline-offset: 2px; border-radius: 4px; }