/* ══════════════════════════════════════════════════════════════ WaaSizo Master Brand Tokens — Single Source of Truth Load BEFORE style.css via header.php. To retheme the entire site, change values here only. ══════════════════════════════════════════════════════════════ */ /* ── Core Palette ─────────────────────────────────────────────── */ :root { --vault-obsidian: #0D0D0D; --vault-gold: #C5A028; /* deep base gold — body text */ --vault-gold-hi: #D4AF37; /* shimmer highlight peak */ --vault-gold-bright:#FFFACD; /* shimmer lightest point */ --vault-gold-lo: rgba(197, 160, 40, 0.12); --vault-gold-border:rgba(197, 160, 40, 0.35); --scarlet-ember: #FF4D4D; --scarlet-deep: #B30000; --scarlet-lo: rgba(179, 0, 0, 0.12); /* depth shadows */ --shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.8); --glow-number: 0 0 10px rgba(255, 77, 77, 0.3); --glow-gold: 0 0 14px rgba(197, 160, 40, 0.4); /* backwards-compat aliases used by style.css & page inline styles */ --gold: var(--vault-gold); --scarlet: var(--scarlet-deep); --scarlet-hi: #CC1100; --blue: var(--scarlet-deep); --cyan: #CC1100; } /* ── Typography ───────────────────────────────────────────────── */ :root { --font-h: 'Cormorant Garamond', Georgia, serif; --font-n: 'Cinzel', 'Cormorant Garamond', serif; --font-b: 'Inter', system-ui, sans-serif; --fh: var(--font-h); --fn: var(--font-n); --fb: var(--font-b); --fw-display: 400; --fw-heading: 400; --fw-body: 400; --fw-label: 500; --ls-display: 0.12em; --ls-heading: 0.08em; --ls-label: 0.18em; --ls-prestige: 0.15em; --lh-display: 1.2; --lh-heading: 1.5; --lh-body: 1.7; } /* ── Gold Shimmer Animation ───────────────────────────────────── */ :root { --shimmer-duration: 4s; --shimmer-gradient: linear-gradient( to right, var(--vault-gold) 0%, var(--vault-gold-hi) 40%, var(--vault-gold-bright) 50%, var(--vault-gold-hi) 60%, var(--vault-gold) 100% ); } @keyframes vault-gold-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* ── Utility — shimmer header text ───────────────────────────── */ .vault-gold-text { background: var(--shimmer-gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: vault-gold-shimmer var(--shimmer-duration) linear infinite; font-weight: var(--fw-display); letter-spacing: var(--ls-prestige); filter: drop-shadow(var(--shadow-text)); } /* ── Prestige number — price/heat/metric pill ─────────────────── */ .prestige-number { color: var(--vault-gold-hi); background: #050505; padding: 2px 8px; border-radius: 4px; border: 0.5px solid #2a2a2a; font-family: var(--font-n); font-weight: 400; letter-spacing: var(--ls-prestige); text-shadow: var(--shadow-text); box-shadow: var(--glow-number); } /* ── Inline price glow — for prices inside cards (no plaque) ─── */ .vault-price-glow { color: var(--vault-gold-hi) !important; font-family: var(--font-n) !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-shadow: 0 0 5px rgba(212, 175, 55, 0.75), 0 0 14px rgba(255, 77, 77, 0.30) !important; -webkit-text-fill-color: var(--vault-gold-hi) !important; } /* ── Neon Vault Number — prices, heat index, countdown ────────── */ @keyframes neon-breathe { 0%,100% { text-shadow: 0 0 5px rgba(212,175,55,.8), 0 0 15px rgba(255,77,77,.4); } 50% { text-shadow: 0 0 10px rgba(212,175,55,1), 0 0 28px rgba(255,77,77,.65), 0 0 42px rgba(212,175,55,.3); } } .neon-vault-number { color: var(--vault-gold-hi); font-family: var(--font-n); font-weight: 300; letter-spacing: 0.1em; animation: neon-breathe 3s ease-in-out infinite; background: rgba(13, 13, 13, 0.92); padding: 4px 10px; border-radius: 5px; border: 0.5px solid rgba(212, 175, 55, 0.3); display: inline-block; } /* ── Sitewide Glassmorphism Nav — frosted bar so the wordmark floats ───── Pointer-events kill-switch: nav itself is click-through so its empty space never blocks the page underneath; only interactive children (wordmark, links, buttons, inputs, mega menus) re-enable hits. */ nav { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; background: rgba(0, 0, 0, 0.7) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; pointer-events: none !important; /* HARD CONSTRAINT — nav cannot grow into a viewport-covering "glass wall". Height bumped from 80px to 124px so the full wordmark + slogan seal are not clipped at the bottom. overflow switched to visible so the wordmark's torch glow and slogan animation render correctly; max-height still pins the bar so a runaway child can't expand it. */ height: 124px !important; max-height: 124px !important; min-height: 0 !important; max-width: 100% !important; inset: auto !important; bottom: auto !important; overflow: visible !important; } nav a, nav button, nav input, nav select, nav textarea, nav label, nav [role="button"], nav [role="menu"], nav [role="menuitem"], nav [role="dialog"], nav .nav-group, nav .nav-mega, nav .nav-mega-item, nav .wz-brand-wrap, nav #waasizo-wordmark { pointer-events: auto !important; } /* Brand wrapper — only as big as the logo itself, never a phantom container. */ .wz-brand-wrap { position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-height: 124px !important; } /* ── ZOMBIE OVERLAY KILL-NET ───────────────────────────────────────── Generic overlay/backdrop/shade classes get pointer-events:none AND display:none unless a state class (.open/.show/.active/.is-open) is present. Stops "stuck" overlays from covering the whole page. */ .cart-overlay:not(.open), .cart-drawer:not(.open), #cart-overlay:not(.open), #cart-drawer:not(.open), .atc-popup-overlay:not(.show):not(.open), .auth-modal-overlay:not(.open), .watch-modal:not(.open), .heat-alert-overlay:not(.open), .modal-overlay:not(.open):not(.show), .overlay:not(.open):not(.show):not(.active):not(.is-open), .backdrop:not(.open):not(.show):not(.active):not(.is-open), .shade:not(.open):not(.show):not(.active):not(.is-open) { pointer-events: none !important; display: none !important; opacity: 0 !important; } /* Re-enable ONLY when the overlay AND its paired drawer are both open (prevents a lone .cart-overlay.open from covering the page if the drawer never actually got the .open class — the original bug). */ .cart-overlay.open, #cart-overlay.open, .atc-popup-overlay.show, .atc-popup-overlay.open, .auth-modal-overlay.open, .watch-modal.open, .heat-alert-overlay.open, .modal-overlay.open, .modal-overlay.show { pointer-events: auto !important; display: block !important; opacity: 1 !important; } /* ── Sitewide wordmark — Bebas Neue + scarlet glow + pulsing white halo ── */ /* Targets on every public page. ID specificity (100) plus !important wins against per-page .logo / .nav-logo declarations. Mixed-case "WaaSizo" preserved (text-transform:none); torch SVG between the letters keeps its own explicit fills. */ #waasizo-wordmark { font-family: 'Bebas Neue', 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important; font-weight: 400 !important; font-size: 1.18em !important; text-transform: none !important; letter-spacing: 0.10em !important; color: #d4af37 !important; -webkit-text-fill-color: #d4af37 !important; -webkit-text-stroke: 0.7px rgba(255, 215, 130, 0.55); padding: 4px 18px; display: inline-flex !important; align-items: center !important; background: none !important; background-clip: initial !important; -webkit-background-clip: initial !important; filter: none; transition: transform .25s ease; animation: wzWordmarkPulse 3s ease-in-out infinite; } /* Pulsing scarlet glow + soft white halo — 3s breathing rhythm */ @keyframes wzWordmarkPulse { 0%, 100% { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(179, 0, 0, 0.55), 0 0 30px rgba(255, 77, 77, 0.20), 0 0 12px rgba(255, 255, 255, 0.12); } 50% { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 22px rgba(179, 0, 0, 0.75), 0 0 44px rgba(255, 77, 77, 0.32), 0 0 36px rgba(255, 255, 255, 0.32); } } /* Cyber-glitch on hover — brief RGB-split "system error" flash, then settle */ #waasizo-wordmark:hover { transform: translateY(-1px); animation: wzWordmarkGlitch 0.45s steps(5, end) 1, wzWordmarkPulse 3s ease-in-out infinite; } @keyframes wzWordmarkGlitch { 0% { text-shadow: 0 0 22px rgba(179, 0, 0, 0.75), 0 0 36px rgba(255, 255, 255, 0.32); } 20% { text-shadow: -3px 0 0 rgba(0, 229, 255, 0.85), 3px 0 0 rgba(255, 0, 64, 0.85), 0 0 22px rgba(179, 0, 0, 0.75); } 40% { text-shadow: 3px 0 0 rgba(0, 229, 255, 0.85), -3px 0 0 rgba(255, 0, 64, 0.85), 0 0 22px rgba(179, 0, 0, 0.75); } 60% { text-shadow: -2px 1px 0 rgba(0, 229, 255, 0.7), 2px -1px 0 rgba(255, 0, 64, 0.7), 0 0 22px rgba(179, 0, 0, 0.75); } 80% { text-shadow: 2px -1px 0 rgba(0, 229, 255, 0.7), -2px 1px 0 rgba(255, 0, 64, 0.7), 0 0 22px rgba(179, 0, 0, 0.75); } 100% { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 3px 6px rgba(0, 0, 0, 0.9), 0 0 26px rgba(255, 77, 77, 0.8), 0 0 48px rgba(255, 77, 77, 0.32); } } /* Torch flicker — flame "breathes" in sync with the wordmark pulse. Subtle brightness + scale pulse on the SVG inside the wordmark. */ #waasizo-wordmark .torch-i { transform-origin: 50% 75%; animation: wzTorchFlicker 3s ease-in-out infinite; will-change: transform, filter; } @keyframes wzTorchFlicker { 0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(255, 120, 40, 0.45)); transform: scaleY(1); } 45% { filter: brightness(1.10) drop-shadow(0 0 4px rgba(255, 160, 60, 0.65)); transform: scaleY(1.025); } 55% { filter: brightness(1.06) drop-shadow(0 0 3px rgba(255, 140, 50, 0.55)); transform: scaleY(1.015); } } /* Electric Vermillion wordmark flash — "hot ignition" feel on click. */ @keyframes wzWordmarkFlash { 0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } 50% { filter: drop-shadow(0 0 25px #ff4500) brightness(1.8) contrast(1.2); } 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } } .wz-wordmark-flash { animation: wzWordmarkFlash 0.25s ease-out; } /* Reduced-motion: kill the breathing — keep static glow, no flicker, no glitch */ @media (prefers-reduced-motion: reduce) { #waasizo-wordmark, #waasizo-wordmark:hover, #waasizo-wordmark .torch-i { animation: none !important; } #waasizo-wordmark { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(179, 0, 0, 0.55), 0 0 30px rgba(255, 77, 77, 0.20) !important; } } /* ── Prestige Button ──────────────────────────────────────────── */ .vault-btn { background: rgba(13, 13, 13, 0.88); border: 1px solid var(--vault-gold); color: var(--vault-gold); font-family: var(--font-n); font-weight: var(--fw-label); letter-spacing: var(--ls-prestige); text-transform: uppercase; transition: background .2s, box-shadow .2s, border-color .2s, color .2s; } .vault-btn:hover { background: rgba(30, 22, 0, 0.92); border-color: var(--vault-gold-hi); color: var(--vault-gold-hi); box-shadow: 0 0 18px rgba(212, 175, 55, .35), 0 0 36px rgba(212, 175, 55, .12); } /* ── Reusable Glassmorphism Utility ───────────────────────────── */ /* Drop `.wz-glass-btn` on any or