. */ .skip-link { position: absolute; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; background: #15171a; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 9999px; transform: translateY(-200%); transition: transform 200ms ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid #fff; } /* Visually hide content but keep it available to screen readers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { /* Dark theme — cinematic deep black (primary brand aesthetic) */ --bg: #0c0e11; /* very deep dark base */ --surface: #13151a; /* low panels */ --surface-2: #1a1d22; /* mid panels */ --surface-3: #21252b; /* elevated panels */ --surface-4: #2a2e35; /* highest elevation */ --border: rgba(240, 242, 245, 0.08); /* subtle light hairlines */ --border-strong: rgba(240, 242, 245, 0.22); --text: #f0f2f5; /* near-white */ --text-soft: rgba(240, 242, 245, 0.75); --text-muted: rgba(240, 242, 245, 0.50); --text-faint: rgba(240, 242, 245, 0.28); --silver: #6e7178; /* mid grey accent */ --silver-soft: rgba(110, 113, 118, 0.35); --on-dark: #0c0e11; /* text on light surfaces (buttons) */ --accent: #f0f2f5; --accent-warm: #7fa8c4; /* cool steel blue — cold cinematic */ --accent-warm-soft: rgba(127, 168, 196, 0.18); --ok: #14a866; --warn: #b88a00; --err: #c92a3a; --metal-grad: linear-gradient(180deg, #f0f2f5 0%, #d4d6dc 60%, #b4b6bc 100%); /* light on dark = high contrast */ --metal-grad-dark: linear-gradient(180deg, #2a2c30 0%, #1a1c20 60%, #0f1114 100%); --metal-grad-soft: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); /* Round-corner tokens */ --r-sm: 10px; --r: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 9999px; --r-md: 14px; /* ── Spacing scale ── */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px; /* ── Typography tokens ── */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-serif: 'Inter', system-ui, -apple-system, sans-serif; /* ── Division accent colors ── */ --div-lab: rgba(125, 211, 252, 0.70); --div-lum: rgba(200, 169, 110, 0.70); --div-net: rgba(100, 200, 120, 0.70); --div-ark: rgba(240, 242, 245, 0.70); --div-fnd: rgba(147, 197, 253, 0.70); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; /* Pin layout viewport so pinch-zoom on mobile can't pan past content into the oversized fixed parallax background, which created a leftover strip on the right edge when zoomed in on iOS/Android. */ overflow-x: clip; } html { scroll-behavior: smooth; /* Background lives on so fixed-position children of with negative z-index are not obscured by body's background in Safari/WebKit. When body has an opaque background, WebKit paints it over fixed children that have z-index < 0, making .bg-parallax invisible. */ background: #0c0e11; /* hardcoded so it renders before CSS variables resolve */ } body { /* Subtle radial glow — gives glass panels something to reflect against. Keeps the cinematic dark feel but prevents pure-black wash on long pages. */ background: radial-gradient(ellipse 120% 60% at 20% 30%, rgba(30, 34, 42, 0.90) 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 80% 70%, rgba(25, 20, 18, 0.70) 0%, transparent 70%); color: var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; /* prevent any cross-element compositor flicker on long pages */ overflow-x: hidden; } /* ---------------------------------------------------------------- Parallax background The hall photograph lives on a single fixed div (.bg-parallax), inserted by app.js. We deliberately avoid `background-attachment: fixed` because it triggers full-page repaints during scroll, which manifests as the flicker the user reported. Instead the div is position:fixed, slightly oversized (scale 1.06) and translated by ~6% of scrollY on requestAnimationFrame for a subtle drift. ---------------------------------------------------------------- */ .bg-parallax { position: fixed; inset: -6vh -6vw; /* oversize so transform never reveals edges */ z-index: -2; pointer-events: none; /* The actual image is injected by app.js based on body[data-page] — see PAGE_BACKGROUNDS in app.js. Default fallback below. */ background-image: none; /* set by app.js per-page */ background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: var(--bg); will-change: transform; transform: translate3d(0, 0, 0) scale(1.06); /* hardware acceleration hints — kill subpixel jitter */ backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; overflow: hidden; } /* Video background — injected by app.js when a .mp4 source is mapped */ .bg-parallax > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; /* Remove background-image when video is present */ pointer-events: none; } /* Dark vignette overlay — cinematic depth, edges fade to near-black */ .bg-parallax::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 14, 17, 0.72) 0%, rgba(12, 14, 17, 0.25) 25%, rgba(12, 14, 17, 0.25) 70%, rgba(12, 14, 17, 0.82) 100%); } @keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-300px, -300px); } } ::selection { background: var(--text); color: var(--bg); } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* Type tokens */ .font-display { font-family: 'Space Grotesk', sans-serif; } .font-mono { font-family: 'JetBrains Mono', 'Space Mono', ui-monospace, Menlo, monospace; } /* ---------- Frosted glass material — dark cinematic variant ---------- */ .glass-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 8px 40px rgba(0, 0, 0, 0.30); border-radius: var(--r-lg); position: relative; } .glass-shard { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.25); border-radius: var(--r); } /* ---------- Crosshair corners (apply on a relative container) ---------- */ .xhair { position: relative; } .xhair::before, .xhair::after, .xhair > .xh-tr, .xhair > .xh-bl, .xhair > .xh-br { content: ''; position: absolute; pointer-events: none; } .xhair::before { /* top-left */ top: 0; left: 0; width: 10px; height: 10px; border-top: 1px solid rgba(21, 23, 26, 0.30); border-left: 1px solid rgba(21, 23, 26, 0.30); } .xhair::after { /* top-right */ top: 0; right: 0; width: 10px; height: 10px; border-top: 1px solid rgba(21, 23, 26, 0.30); border-right: 1px solid rgba(21, 23, 26, 0.30); } .xhair > .xh-bl { bottom: 0; left: 0; width: 10px; height: 10px; border-bottom: 1px solid rgba(21, 23, 26, 0.30); border-left: 1px solid rgba(21, 23, 26, 0.30); } .xhair > .xh-br { bottom: 0; right: 0; width: 10px; height: 10px; border-bottom: 1px solid rgba(21, 23, 26, 0.30); border-right: 1px solid rgba(21, 23, 26, 0.30); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 200ms ease; border-radius: var(--r-pill); white-space: nowrap; } .btn-primary { background: var(--metal-grad); /* light gradient on dark = high contrast */ color: var(--on-dark); /* dark text on light button */ border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 20px rgba(0, 0, 0, 0.40); } .btn-primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 6px 28px rgba(0, 0, 0, 0.50); } .btn-primary:active { transform: scale(0.97); filter: brightness(0.95); } .btn-warm { background: var(--accent-warm); color: #fff; border: 1px solid rgba(127, 168, 196, 0.50); box-shadow: 0 4px 20px rgba(127, 168, 196, 0.30); } .btn-warm:hover { filter: brightness(1.10); box-shadow: 0 6px 28px rgba(127, 168, 196, 0.45); } .btn-warm:active { transform: scale(0.97); } .btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); } .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.10); } .btn-ghost:active { transform: scale(0.97); } .btn-danger { background: transparent; color: var(--err); border: 1px solid rgba(255, 77, 77, 0.30); } .btn-danger:hover { background: rgba(255, 77, 77, 0.08); border-color: var(--err); } .btn-sm { padding: 8px 16px; font-size: 10px; } /* ---------- Inputs ---------- */ .input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(240, 242, 245, 0.18); color: var(--text); font-family: 'JetBrains Mono', monospace; /* 16px+ avoids the iOS Safari auto-zoom on focus */ font-size: 16px; padding: 10px 0; outline: none; transition: border-color 200ms ease; } .input::placeholder { color: rgba(240, 242, 245, 0.25); } .input:focus { border-bottom-color: var(--text); } .input-block { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: 14px 18px; font-family: 'JetBrains Mono', monospace; color: var(--text); width: 100%; outline: none; backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border-radius: var(--r); transition: border-color 200ms ease, background 200ms ease; } .input-block:focus { border-color: rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.08); } .input-block::placeholder { color: rgba(240, 242, 245, 0.28); } /* Select elements — dark glass */ select.input-block { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: rgba(20, 22, 26, 0.80); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; color: var(--text); cursor: pointer; } select.input-block:focus { background-color: rgba(20, 22, 26, 0.95); } select.input-block option { background-color: #15171a; color: #e8e8e8; } input[type="search"].input-block, input[type="text"].input-block, input[type="email"].input-block, input[type="password"].input-block { background-color: rgba(20, 22, 26, 0.55); color: var(--text); } input[type="search"].input-block::placeholder { color: rgba(200,200,200,0.35); } label.label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 8px; } /* ---------- Layout ---------- */ /* Account for floating glass capsules: topnav 64+16+16=96, sidenav 64+16+16=96, footer 48+16+16=80 */ .app-shell { padding-left: 96px; padding-top: 96px; padding-bottom: 96px; min-height: 100vh; } .app-shell-flush { padding-left: 96px; padding-top: 96px; min-height: 100vh; } .container-fluid { padding: 48px; max-width: 1440px; margin: 0 auto; } /* ---------- Top nav ---------- */ .topnav { position: fixed; top: 16px; left: 16px; right: 16px; height: 64px; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(12, 14, 17, 0.72); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 32px rgba(0, 0, 0, 0.40); } .topnav .brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 20px; text-transform: uppercase; } .topnav .links { display: flex; gap: 32px; } .topnav .links a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 2px; transition: color 200ms ease, border-color 200ms ease; border-bottom: 1px solid transparent; text-decoration: none; } .topnav .links a:hover { color: var(--text-soft); } .topnav .links a.active { color: var(--text); border-bottom-color: rgba(255,255,255,0.40); } .topnav .links a .nav-sub { font-family: var(--font-mono); font-size: 8px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-faint); transition: color 200ms ease; line-height: 1; } .topnav .links a:hover .nav-sub { color: var(--text-muted); } .topnav .links a.active .nav-sub { color: rgba(240,242,245,0.45); } .topnav .actions { display: flex; gap: 16px; align-items: center; } .topnav .cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border-radius: var(--r-pill); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); cursor: pointer; transition: all 200ms ease; } .topnav .cart-btn:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.10); } .topnav .cart-btn .badge { background: var(--text); color: var(--on-dark); padding: 0 6px; font-size: 10px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: var(--r-pill); } .topnav .cart-btn .badge.zero { background: rgba(21, 23, 26, 0.10); color: var(--text-soft); } /* ---------- Account dropdown ---------- */ .acct-wrap { position: relative; } .acct-trigger .acct-caret { transition: transform 150ms ease; } .acct-wrap.open .acct-caret { transform: rotate(180deg); } .acct-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: rgba(18, 20, 24, 0.96); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-md); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 200; overflow: hidden; flex-direction: column; } .acct-wrap.open .acct-menu { display: flex; } .acct-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); background: none; border: none; cursor: pointer; text-decoration: none; transition: color 150ms, background 150ms; text-align: left; } .acct-item:hover { color: var(--text); background: rgba(255,255,255,0.05); } .acct-item + .acct-item { border-top: 1px solid rgba(255,255,255,0.06); } /* ---------- Footer ---------- */ .footerbar { position: fixed; bottom: 16px; left: 16px; right: 16px; height: 48px; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(12, 14, 17, 0.72); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.40); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-soft); } .footerbar .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2s ease-in-out infinite; vertical-align: middle; margin-left: 8px; } .footerbar .links { display: flex; gap: 32px; } .footerbar .links a:hover { color: var(--text); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ---------- Cursor blink ---------- */ .cursor-blink { animation: blink 1.06s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---------- Scanlines / coords decor ---------- */ .coord-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; } .tag { display: inline-block; background: rgba(21, 23, 26, 0.06); border: 1px solid rgba(21, 23, 26, 0.10); padding: 4px 10px; font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); border-radius: var(--r-pill); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ---------- Headline scale ---------- */ .h-xl { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(48px, 8vw, 96px); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; } .h-lg { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; } .h-md { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; } .h-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-soft); } /* ---------- Cards (dark frosted glass) ---------- */ .card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 20px rgba(0, 0, 0, 0.30); border-radius: var(--r); overflow: hidden; position: relative; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .card:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 40px rgba(0, 0, 0, 0.45); } .card-hoverable:hover { transform: translateY(-2px); } /* ---------- Product card ---------- */ .product-card .thumb { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #1a1c20 0%, #2a2c30 60%, #15171a 100%); overflow: hidden; position: relative; } .product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .product-card:hover .thumb img { transform: scale(1.04); } .product-card .body { padding: 18px 20px 22px; } /* ---------- Toast ---------- */ .toast-stack { position: fixed; bottom: 64px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: rgba(21, 23, 26, 0.92); border: 1px solid rgba(21, 23, 26, 0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 36px rgba(21, 23, 26, 0.30); border-radius: var(--r-pill); padding: 12px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark); min-width: 280px; animation: toast-in 240ms ease-out, toast-out 240ms ease-in 2.6s forwards; pointer-events: auto; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } /* ---------- Misc utilities ---------- */ .divider { height: 1px; background: var(--border); width: 100%; } .kbd { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 2px; } /* Hide elements gracefully */ [hidden] { display: none !important; } /* Scrollbar (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(21, 23, 26, 0.18); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: rgba(21, 23, 26, 0.32); } /* ---------- Admin chip (only renders for admins) ---------- */ .admin-chip { background: linear-gradient(135deg, rgba(21,23,26,0.92) 0%, rgba(21,23,26,0.78) 100%) !important; color: var(--on-dark) !important; border-color: rgba(21,23,26,0.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 12px rgba(21,23,26,0.18) !important; } .admin-chip:hover { filter: brightness(1.15); } .admin-chip.active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 2px rgba(21,23,26,0.35), 0 4px 16px rgba(21,23,26,0.30) !important; } .role-badge { display: inline-block; padding: 2px 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; border-radius: var(--r-pill); background: var(--text); color: var(--on-dark); } .role-badge.operator { background: rgba(21,23,26,0.10); color: var(--text); } /* ---------- Audio shop — section dividers ---------- */ .shop-section { position: relative; z-index: 1; padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--border); } .shop-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .shop-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; } /* ---------- Admin panel ---------- */ .admin-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .admin-side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 4px; padding: 16px; } .admin-side a { padding: 10px 14px; border-radius: var(--r-sm); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-soft); cursor: pointer; transition: background 200ms ease, color 200ms ease; } .admin-side a:hover { color: var(--text); background: rgba(21,23,26,0.05); } .admin-side a.active { color: var(--text); background: rgba(21,23,26,0.10); } .admin-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); } .admin-table th { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .admin-table tr:hover td { background: rgba(21,23,26,0.03); } @media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } .admin-side { position: static; flex-direction: row; flex-wrap: wrap; } } /* ===================================================== Mobile hamburger + drawer The drawer is rendered by app.js as a sibling of 's nav. It's hidden on desktop and replaces both topnav links and the sidenav at <= 900px. ===================================================== */ .hamburger { display: none; /* shown on mobile via media query */ width: 40px; height: 40px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border-radius: var(--r-pill); cursor: pointer; color: var(--text); } .hamburger:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } .hamburger .material-symbols-outlined { font-size: 22px; } /* Drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; /* Dark glass to match topnav / overall UI in dark theme */ background: rgba(20, 22, 26, 0.92); backdrop-filter: blur(60px) saturate(220%); -webkit-backdrop-filter: blur(60px) saturate(220%); padding: 88px 24px 32px; overflow-y: auto; color: var(--text); } .mobile-drawer.open { display: flex; animation: drawer-in 220ms ease-out; } @keyframes drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .mobile-drawer .close-btn { position: absolute; top: 28px; right: 24px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: var(--r-pill); cursor: pointer; color: var(--text); } .mobile-drawer .close-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); } .mobile-drawer .nav-section { margin-bottom: 32px; } .mobile-drawer .nav-section .section-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .mobile-drawer a.nav-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); } .mobile-drawer a.nav-item.active { color: var(--text); } .mobile-drawer a.nav-item.active::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); } .mobile-drawer a.nav-item .material-symbols-outlined { font-size: 22px; color: var(--text-soft); } /* ===================================================== Audio mini-player Inline player used on shop cards and the artifact page. ===================================================== */ .audio-mini { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-pill); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--text); cursor: pointer; user-select: none; } .audio-mini .play-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--text); color: var(--on-dark); border: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: filter 200ms ease; } .audio-mini .play-btn:hover { filter: brightness(1.2); } .audio-mini .play-btn .material-symbols-outlined { font-size: 16px; } .audio-mini .progress { position: relative; flex: 1; height: 3px; background: rgba(21, 23, 26, 0.14); border-radius: var(--r-pill); overflow: hidden; min-width: 60px; } .audio-mini .progress .fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: var(--text); transition: width 80ms linear; } .audio-mini .time { color: var(--text-soft); font-size: 10px; min-width: 36px; text-align: right; } .audio-mini.playing .play-btn { background: var(--err); } /* Detail-page (large) variant */ .audio-large { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .audio-large .play-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--text); color: var(--on-dark); border: none; border-radius: 50%; cursor: pointer; } .audio-large .play-btn .material-symbols-outlined { font-size: 24px; } .audio-large.playing .play-btn { background: var(--err); } .audio-large .progress { position: relative; flex: 1; height: 4px; background: rgba(21, 23, 26, 0.14); border-radius: var(--r-pill); overflow: hidden; cursor: pointer; } .audio-large .progress .fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: var(--text); transition: width 80ms linear; } .audio-large .time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-soft); min-width: 60px; text-align: right; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .topnav .links { display: none; } .hamburger { display: inline-flex; } .app-shell, .app-shell-flush { padding-left: 16px; padding-right: 16px; padding-top: 84px; padding-bottom: 96px; } .container-fluid { padding: 24px; } /* Filter bar: stack filter tabs above controls */ .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 32px; } .filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; flex-shrink: 0; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-controls { margin-left: 0; flex-wrap: nowrap; } .filter-controls > div { flex: 1; min-width: 0; } .filter-sort { min-width: 130px; flex-shrink: 0; } #result-count { display: none; } /* reclaim space on mobile */ /* Product cards: single column, tighter gap */ .grid-products { grid-template-columns: 1fr !important; gap: 20px !important; } /* Prevent any card/child overflowing the column */ .grid-products > * { min-width: 0; max-width: 100%; } /* Network page layout */ .net-wrap section { padding: 48px 0 !important; } .pillars { grid-template-columns: 1fr !important; } /* Artifact detail: stack image + info */ #artifact-mount > div > div[style*="grid-template-columns"] { display: flex !important; flex-direction: column !important; gap: 28px !important; } } @media (max-width: 768px) { .topnav { padding: 0 10px; height: 56px; top: 10px; left: 10px; right: 10px; } .topnav .brand { font-size: 14px; letter-spacing: 0.04em; } .topnav .actions { gap: 6px; flex-shrink: 0; } .topnav .cart-btn { padding: 6px 10px; gap: 4px; } .topnav .cart-btn span:not(.material-symbols-outlined):not(.badge) { display: none; } .footerbar { padding: 0 16px; bottom: 10px; left: 10px; right: 10px; height: 44px; } .footerbar .links { gap: 14px; font-size: 9px; } .footerbar > div:first-child { display: none; } /* hide copyright text on mobile — no room */ /* Hero text sizing */ .h-xl { font-size: clamp(36px, 11vw, 72px) !important; } .h-lg { font-size: clamp(24px, 7vw, 48px) !important; } /* Specs grid: single column on small phones */ #artifact-mount .glass-panel > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Cart / checkout forms: full width inputs */ .input-block { min-width: 0 !important; width: 100%; } } /* ===================================================== UX REFINEMENTS — landing page + cross-page mobile ===================================================== */ /* Reusable layout helpers used by index.html so inline styles can be slimmed and behave well on mobile. */ .section-pad { padding: 120px 48px 96px; max-width: 1440px; margin: 0 auto; } .section-pad-tight { padding: 96px 48px; max-width: 1440px; margin: 0 auto; } .section-pad-wide { padding: 160px 48px 200px; max-width: 1440px; margin: 0 auto; text-align: center; } /* ---- Landing-page hero ---- */ .hero-corner-tl { position: absolute; top: 24px; left: 24px; z-index: 3; opacity: 0.55; letter-spacing: 0.3em; } .hero-corner-tr { position: absolute; top: 24px; right: 24px; z-index: 3; opacity: 0.55; text-align: right; } .hero-corner-tr .coord-tag { letter-spacing: 0.3em; } .hero-scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0.7; letter-spacing: 0.4em; /* gentle pulse so the cue reads as interactive */ animation: scrollCue 2.4s ease-in-out infinite; } @keyframes scrollCue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.6; } 50% { transform: translate(-50%, 6px); opacity: 0.95; } } /* "Latest Transmission" panel — make the 1fr 1fr stack on tablet/mobile */ @media (max-width: 900px) { /* Override inline grid on the seraphim panel without touching markup */ .glass-panel[style*="grid-template-columns: 1fr 1fr"], section[style*="padding: 96px 48px 96px"] .glass-panel { display: flex !important; flex-direction: column !important; gap: 32px !important; padding: 40px 28px !important; min-height: 0 !important; } } @media (max-width: 768px) { /* Tighten section padding on phones — 48px h-pad eats too much of a 375px screen */ .section-pad, section[style*="padding: 160px 48px 96px"], section[style*="padding: 96px 48px 96px"], section[style*="padding: 160px 48px 200px"] { padding-left: 18px !important; padding-right: 18px !important; padding-top: 80px !important; padding-bottom: 64px !important; } /* Hero — pull content up from the bottom edge so footer-bar doesn't crowd it */ .hero { align-items: center !important; min-height: calc(100vh - 240px) !important; } .hero > div[style*="padding: 0 24px"] { padding: 0 18px !important; max-width: 100% !important; } /* Top-right meta collides with top-left coord on narrow screens — drop it */ .hero-corner-tr { display: none; } /* Scroll cue is unreliable on phones (toolbar hides ~70px of bottom) — hide */ .hero-scroll-cue { display: none; } /* Hero buttons: make them full width and stack predictably */ .hero .btn { width: 100%; justify-content: center; } .hero > div > div[style*="display:flex"][style*="gap:12px"] { flex-direction: column !important; width: 100%; } /* Newsletter form — input + button stack vertically, full width */ #signup { flex-direction: column !important; gap: 10px !important; } #signup .input-block, #signup .btn { width: 100% !important; min-width: 0 !important; } /* Featured / Latest Transmission heading rows: stop the "View all →" link from crashing into the heading on narrow screens */ section > div[style*="display:flex"][style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } /* Make sure background overlay doesn't outshine bg image at top of page */ body::before { transform: translate3d(0,0,0) scale(1.02); } } /* ---- Cards: subtle hover on desktop only (avoid sticky-hover on touch) ---- */ @media (hover: hover) { .card-hoverable { transition: transform 280ms ease, border-color 280ms ease; } .card-hoverable:hover { transform: translateY(-4px); border-color: var(--border-strong); } } /* ---- Smooth in-page anchor scrolls so they don't slam under the topnav ---- */ html { scroll-behavior: smooth; scroll-padding-top: 96px; } /* ---- Tap targets — all buttons should be at least 44px tall on touch ---- */ @media (max-width: 768px) { .btn-sm { min-height: 40px; } .btn { min-height: 48px; } } /* ===================================================== Stripe Elements — frame container styling so the iframe inherits the same input look as the rest of the form. Stripe injects its own iframe on mount; we just provide the wrapper. ===================================================== */ .stripe-element { background: rgba(255, 255, 255, 0.32); border: 1px solid rgba(255, 255, 255, 0.50); padding: 14px 18px; width: 100%; outline: none; backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); border-radius: var(--r); min-height: 48px; } .stripe-element--focused { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.55); } .stripe-element--invalid { border-color: var(--err); } /* ===================================================== Focus rings — visible outline for keyboard navigation. Mouse users still get the existing :hover treatment. ===================================================== */ :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .btn:focus-visible, .cart-btn:focus-visible, .topnav .links a:focus-visible { outline-offset: 3px; } /* ===================================================== Reduced motion — respect users who've asked the OS to minimise animation. We still allow the parallax to be *positioned*, just not animated; toasts, blink, hover transforms, and drift all become instant. ===================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .cursor-blink { animation: none !important; } .footerbar .status-dot { animation: none !important; } .bg-parallax { transform: scale(1.06) !important; } .card-hoverable:hover { transform: none !important; } .product-card:hover .thumb img { transform: none !important; } } /* ===================================================== Shop filter bar ===================================================== */ .filter-bar { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--border); align-items: center; } .filter-tabs { display: flex; gap: 8px; flex-shrink: 0; } .filter-controls { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; } .filter-sort { min-width: 160px; padding-right: 32px; } /* ===================================================== Per-page background position overrides The global default is center center. Some images have their focal point off-center and need page-specific tuning. ===================================================== */ /* Network page: adjust focal point for bg-network.png. Change the % value to reposition if you swap the image. */ body[data-page="network"] .bg-parallax { background-position: center center; } /* ===================================================== CSS-ONLY FALLBACK BACKGROUNDS These ensure the background renders even if JavaScript fails or hasn't executed yet. JS will replace .bg-parallax with the same image, so this is fully redundant. Uses body::before because we cannot guarantee .bg-parallax exists before app.js runs. ===================================================== */ body::before { content: ''; position: fixed; inset: -6vh -6vw; z-index: -3; background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: var(--bg); pointer-events: none; transform: translate3d(0,0,0) scale(1.06); } /* Index page intentionally omitted — uses MP4 video, JS-injected via .bg-parallax */ body[data-page="artifacts"]::before, body[data-page="shop"]::before, body[data-page="artifact"]::before { background-image: url("/assets/bg-shop.png"); } body[data-page="network"]::before, body[data-page="seraphim"]::before { background-image: url("/assets/bg-network.png"); background-position: center 70%; } body[data-page="login"]::before, body[data-page="lum-login"]::before, body[data-page="account"]::before, body[data-page="admin"]::before { background-image: url("/assets/bg-login.png"); } body[data-page="cart"]::before, body[data-page="checkout"]::before { background-image: url("/assets/bg-shop.png"); } /* ===================================================== Newsletter / generic form — pending + success states ===================================================== */ .form-pending { opacity: 0.6; pointer-events: none; } .form-msg { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 12px; } .form-msg.ok { color: var(--ok); } .form-msg.err { color: var(--err); } /* ===================================================== Organizational divisions grid — homepage ===================================================== */ .divisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; width: 100%; } .division-card { padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 14px; transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease; cursor: default; } .division-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 48px rgba(0, 0, 0, 0.50); } .division-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-warm); letter-spacing: 0.3em; } .division-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.35em; color: var(--text-muted); text-transform: uppercase; } .division-name { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; text-transform: uppercase; } .division-desc { font-size: 13px; color: var(--text-soft); line-height: 1.65; margin: 0; } .division-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .division-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-pill); } @media (max-width: 1100px) { .divisions-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .divisions-grid { grid-template-columns: 1fr; } } /* ===================================================== Foundation / impact section ===================================================== */ .foundation-section { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, 0.09); } .foundation-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(127, 168, 196, 0.10) 0%, rgba(127, 168, 196, 0.03) 50%, transparent 100%); pointer-events: none; } .foundation-content { position: relative; z-index: 1; padding: 80px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } @media (max-width: 900px) { .foundation-content { grid-template-columns: 1fr; gap: 40px; padding: 48px 36px; } } @media (max-width: 640px) { .foundation-content { padding: 40px 24px; } } /* ===================================================== Hero tagline ===================================================== */ .hero-tagline { color: var(--text-soft); font-size: 17px; line-height: 1.75; max-width: 560px; margin: 0 0 36px; } /* ===================================================== Stripe input in dark context ===================================================== */ .stripe-element { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); } .stripe-element--focused { border-color: rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.08); } /* ===================================================== Tag in dark context ===================================================== */ .tag { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-soft); } /* ===================================================== Accent warm utility ===================================================== */ .text-warm { color: var(--accent-warm); } .dot-warm { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 10px var(--accent-warm); animation: pulse 2.2s ease-in-out infinite; vertical-align: middle; } /* ================================================================ VISUAL SYSTEM · CREATIVE OS LAYER ================================================================ */ /* — Global scanline texture — */ body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.012) 2px, rgba(0, 0, 0, 0.012) 3px ); pointer-events: none; z-index: 9997; } /* — Cursor canvas — */ #cursor-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9998; } /* — Keyframes — */ @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 168, 196, 0.5); } 60% { box-shadow: 0 0 0 7px rgba(127, 168, 196, 0); } } @keyframes signal-ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(3.5); opacity: 0; } } @keyframes flicker { 0%, 87%, 89%, 92%, 100% { opacity: 1; } 88% { opacity: 0.72; } 91% { opacity: 0.88; } } @keyframes float-meta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes grid-breathe { 0%, 100% { opacity: 0.03; } 50% { opacity: 0.065; } } @keyframes scan-sweep { 0% { top: -2px; opacity: 0; } 5% { opacity: 0.35; } 95% { opacity: 0.35; } 100% { top: 100%; opacity: 0; } } /* — Status dot — */ .status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-warm); flex-shrink: 0; animation: pulse-dot 2.4s ease-in-out infinite; position: relative; } .status-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-warm); animation: signal-ring 2.4s ease-out infinite; } /* — Status / meta line — */ .status-line { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.3em; color: var(--text-muted); text-transform: uppercase; } .meta-chip { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: rgba(240, 242, 245, 0.32); text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.07); padding: 3px 10px; } /* — Hero signal bar — */ .hero-signal-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* — Floating telemetry — */ .tele-float { position: absolute; bottom: 96px; right: 48px; z-index: 6; animation: float-meta 9s ease-in-out infinite; } .tele-bar { display: flex; gap: 32px; flex-wrap: wrap; } .tele-item { display: flex; flex-direction: column; gap: 5px; } .tele-label { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.35em; color: rgba(240, 242, 245, 0.2); text-transform: uppercase; } .tele-value { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(240, 242, 245, 0.42); } /* — Ambient grid — */ .ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); background-size: 88px 88px; pointer-events: none; z-index: 0; animation: grid-breathe 9s ease-in-out infinite; } /* — Scan sweep line — */ .scan-sweep { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(127, 168, 196, 0.4) 50%, transparent 100%); pointer-events: none; z-index: 4; animation: scan-sweep 12s linear infinite; animation-delay: 3s; } /* — Ghost watermark number — */ .ghost-num { position: absolute; right: 0; top: -24px; font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: clamp(88px, 12vw, 150px); color: rgba(255, 255, 255, 0.02); line-height: 1; letter-spacing: -0.04em; pointer-events: none; user-select: none; z-index: 0; } /* — Scroll reveal — */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } .reveal-d5 { transition-delay: 0.40s; } .reveal-d6 { transition-delay: 0.48s; } /* — Division card hover scan — */ .division-card { position: relative; overflow: hidden; } .division-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 168, 196, 0.5), transparent); transition: left 0.55s ease; z-index: 2; } .division-card:hover::before { left: 100%; } .division-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(127, 168, 196, 0.03) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } .division-card:hover::after { opacity: 1; } /* — Network telemetry strip — */ .tele-strip { padding: 28px 48px; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 48px; flex-wrap: wrap; max-width: 1440px; margin: 0 auto; } .tele-strip-label { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.4em; color: rgba(240, 242, 245, 0.2); text-transform: uppercase; white-space: nowrap; } .tele-strip-nodes { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .tele-node { display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: rgba(240, 242, 245, 0.36); text-transform: uppercase; } .tele-node-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-warm); opacity: 0.7; animation: pulse-dot 3s ease-in-out infinite; } .tele-node-dot:nth-child(1) { animation-delay: 0s; } /* — Flicker utility — */ .flicker { animation: flicker 12s ease-in-out infinite; } /* ===================================================== Light mode override — opt-in via .theme-light class or when user's OS preference is light. Dark is the brand default. ===================================================== */ @media (prefers-color-scheme: light) { :root:not(.theme-dark) { /* Dark theme is intentional brand aesthetic — keep it even in light OS mode */ /* Uncomment below to honour light OS preference instead: */ /* --bg: #e8eaee; --surface: #f3f4f7; ... */ } } /* Explicit light theme class — future opt-in */ :root.theme-light { --bg: #e8eaee; --surface: #f3f4f7; --surface-2: #fbfbfd; --surface-3: #ffffff; --surface-4: #d4d6dc; --border: rgba(21, 23, 26, 0.10); --border-strong: rgba(21, 23, 26, 0.28); --text: #15171a; --text-soft: rgba(21, 23, 26, 0.74); --text-muted: rgba(21, 23, 26, 0.58); --text-faint: rgba(21, 23, 26, 0.32); --on-dark: #ffffff; --accent: #15171a; --metal-grad: linear-gradient(180deg, #2a2c30 0%, #1a1c20 60%, #0f1114 100%); --metal-grad-soft: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.20)); }