/* ═══════════════════════════════════════════════════ LIQUID GLASS OVERHAUL — Nav, Tiles, Cards, Buttons GPU-layer promoted via transform: translateZ(0) only where backdrop-filter requires it. will-change removed to prevent VRAM waste — the browser's heuristics + translateZ(0) are sufficient for compositing. ═══════════════════════════════════════════════════ */ /* ── Nav Bar ──────────────────────────────────────── */ .site-nav { background: rgba(5, 5, 7, 0.60) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important; transform: translateZ(0); } /* nav-cta styles consolidated in watch-trailer.css */ /* ── Base Buttons ─────────────────────────────────── */ .btn { border-radius: 8px; clip-path: none !important; } .btn-solid { border-radius: 8px; } .btn-ghost { border-radius: 8px; background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; transform: translateZ(0); } /* ── Philosophy Diagram Cards ─────────────────────── */ .phil-diagram { border-radius: 16px !important; background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; transform: translateZ(0); } .phil-diagram:hover { border-color: rgba(241, 201, 139, 0.18) !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* ── Tank Class Selector Strip ─────────────────── */ .class-selector { transform: translateZ(0); } .class-card { transform: translateZ(0); } .class-card.active { box-shadow: 0 0 12px rgba(241, 201, 139, 0.08) !important; } /* ── Ammo Selector Tabs ───────────────────────────── */ .ammo-tab { border-radius: 10px !important; background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; transition: background 0.2s, border-color 0.2s !important; transform: translateZ(0); } .ammo-tab:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(140, 165, 211, 0.22) !important; } .ammo-tab.active { background: rgba(140, 165, 211, 0.08) !important; border-color: rgba(140, 165, 211, 0.35) !important; box-shadow: 0 0 10px rgba(140, 165, 211, 0.10), 0 2px 8px rgba(0, 0, 0, 0.25) !important; } /* ── Ammo Detail Card ─────────────────────────────── */ .ammo-right { border-radius: 16px !important; background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; padding: 2rem !important; transform: translateZ(0); } /* ── Combat Scenario Mode Cards ─────────────────────── */ /* Identical recipe to .phil-diagram and .ammo-right above */ .mode-card { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; transform: translateZ(0); } .mode-card:hover { border-color: rgba(241, 201, 139, 0.18) !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* ── Showcase Stats Panel ─────────────────────────── */ .showcase-stats { transform: translateZ(0); } /* ── Section containers — GPU layer promo ──────────── Promotes each section that holds glass children onto its own compositing layer. Without this, backdrop- filter children get de-promoted and re-promoted on every scroll tick, causing the glass to flash/reset. ─────────────────────────────────────────────────── */ .philosophy, .ammo, .modes, .showcase { transform: translateZ(0); isolation: isolate; } /* ── Donate Modal — liquid glass treatment ────────── */ .donate-modal, .credits-modal { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .donate-input-row { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; transform: translateZ(0); } .donate-input-row:focus-within { border-color: rgba(241, 201, 139, 0.25) !important; box-shadow: 0 0 14px rgba(241, 201, 139, 0.06) !important; } .donate-preset { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; transform: translateZ(0); } .donate-preset:hover { background: rgba(241, 201, 139, 0.06) !important; border-color: rgba(241, 201, 139, 0.18) !important; } .donate-generate { background: rgba(241, 201, 139, 0.06) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(241, 201, 139, 0.15) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; transform: translateZ(0); } .donate-generate:hover { background: rgba(241, 201, 139, 0.12) !important; border-color: rgba(241, 201, 139, 0.28) !important; box-shadow: 0 0 20px rgba(241, 201, 139, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .donate-close { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; transform: translateZ(0); } .donate-close:hover { background: rgba(255, 255, 255, 0.08) !important; } /* Footer — Deep Black */ .footer { background: var(--deep-black) !important; border-top: 1px solid rgba(241, 201, 139, 0.04) !important; } /* Fix: Space Bridge portal clips at showcase boundary */ /* Desktop only — on mobile, overflow must be clipped to prevent horizontal scroll */ @media (min-width: 901px) { .showcase { overflow: visible !important; } .showcase-canvas { overflow: visible !important; } } .showcase-canvas { z-index: 1 !important; /* sit above ghost name so alpha-transparent canvas clips the text behind the model */ touch-action: pan-y; /* allow vertical scroll, block horizontal for orbit — matches style.css */ border-radius: 20px; } @keyframes canvas-neon-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 8px rgba(241,201,139,0.18), 0 0 24px rgba(241,201,139,0.10), 0 0 60px rgba(140,165,211,0.08); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 8px rgba(255,230,160,0.55), 0 0 20px rgba(241,201,139,0.35), 0 0 55px rgba(241,201,139,0.16), 0 0 110px rgba(140,165,211,0.12); } } /* Glass border frame sits on top of the Three.js canvas, pointer-events off so it never blocks interaction */ .showcase-canvas::after { content: ''; position: absolute; inset: 0; border-radius: 20px; border: 1px solid rgba(241, 201, 139, 0.18); animation: canvas-neon-pulse 4s ease-in-out infinite; pointer-events: none; z-index: 2; }