/* High Noon — brand tokens (single source of truth) Adopted from NEW_DESIGN menu-v5 / main-menu / skins / achievements DNA */ :root { /* Palette */ --hn-dust: #F2E7D2; --hn-sand: #E4C99A; --hn-sand-light: #EED9A8; --hn-tumbleweed: #C89A5B; --hn-tumble-light:#D9A867; --hn-rust: #A64B2E; --hn-rust-light: #C85A3A; --hn-rust-deep: #7A3420; --hn-saddle: #6B3B22; --hn-saddle-light:#8C5225; --hn-saddle-dark: #4A2713; --hn-saddle-night:#2A1508; --hn-gunmetal: #2E2E2E; --hn-ink: #151515; --hn-smoke: #BB8171; /* Currency / accents */ --hn-gold: #E6B655; --hn-gold-light: #F4C36A; --hn-bronze: #B57445; --hn-silver: #C8C8CC; /* Discord */ --hn-discord: #5865F2; /* Rarity (for skins) */ --hn-rarity-common-from: #C2B79A; --hn-rarity-common-mid: #8E8166; --hn-rarity-common-dark: #4F4631; --hn-rarity-uncommon-from: #A8C57F; --hn-rarity-uncommon-mid: #6F9046; --hn-rarity-uncommon-dark: #3F5E22; --hn-rarity-rare-from: #7FB6D6; --hn-rarity-rare-mid: #3F7AA0; --hn-rarity-rare-dark: #1F4664; --hn-rarity-epic-from: #C5A0E0; --hn-rarity-epic-mid: #7A4FA8; --hn-rarity-epic-dark: #3F2466; --hn-rarity-legend-from: #F0B85A; --hn-rarity-legend-mid: #D88B26; --hn-rarity-legend-dark: #7A4810; --hn-rarity-mythic-from: #F08E6E; --hn-rarity-mythic-mid: #C2412A; --hn-rarity-mythic-dark: #6E1A0E; /* Typography — must match the link tag in index.html */ --hn-font-head: 'Alfa Slab One', 'Rye', 'Ultra', serif; /* Deadeye stand-in */ --hn-font-body: 'Libre Caslon Text', 'Playfair Display', 'BJ Cree', serif; --hn-font-display: 'Rye', 'Alfa Slab One', serif; /* Old-west display */ --hn-font-typewriter: 'Special Elite', 'Courier New', monospace; /* Surfaces & shadows */ --hn-plate-grad: linear-gradient(to bottom, var(--hn-sand-light) 0%, var(--hn-sand) 45%, var(--hn-tumbleweed) 100%); --hn-tile-grad: linear-gradient(to bottom, var(--hn-tumble-light) 0%, var(--hn-tumbleweed) 55%, #A67040 100%); --hn-plate-border: 2.5px solid var(--hn-saddle); --hn-tile-border: 2px solid var(--hn-saddle-dark); --hn-plate-shadow: 0 4px 0 var(--hn-saddle-dark), 0 6px 14px rgba(0,0,0,.35); --hn-tile-inner-shadow: inset 0 1px 0 rgba(255,240,210,0.45), inset 0 -2px 3px rgba(60,25,10,0.35), 0 1px 2px rgba(0,0,0,0.35); /* Radii */ --hn-radius-sm: 6px; --hn-radius-md: 10px; --hn-radius-lg: 14px; --hn-radius-pill: 9999px; /* Misc */ --hn-grain-url: url('../assets/images/ui/wood-bg-small.png'); --hn-wood-url: url('../assets/images/ui/wood-bg.jpg'); } /* Press state primitive — apply [data-pressed="true"] in JS for tactile feedback */ [data-pressed="true"] { transform: translateY(2px) scale(0.985); filter: brightness(0.88); transition: transform 90ms ease, filter 90ms ease; } /* Notif badge pulse */ @keyframes hn-notif-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(166,75,46,0.6); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(166,75,46,0); } } /* Claim button pulse (Achievements gold-rust pill) */ @keyframes hn-claim-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 1.5px 0 var(--hn-saddle-dark), 0 0 8px rgba(244,195,106,0.35); } 50% { transform: scale(1.025); box-shadow: 0 1.5px 0 var(--hn-saddle-dark), 0 0 16px rgba(244,195,106,0.65); } } /* Online presence dot pulse */ @keyframes hn-online-pulse { 0%, 100% { box-shadow: 0 0 6px #5FCB7E, inset 0 1px 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 12px #5FCB7E, inset 0 1px 0 rgba(255,255,255,0.4); } } /* Wampum CTA — gentle rust glow pulse */ @keyframes hn-wampum-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,235,205,0.35), inset 0 -2px 6px rgba(40,15,5,0.3), 0 3px 0 var(--hn-saddle-dark), 0 5px 10px rgba(74,39,19,0.35); } 50% { box-shadow: inset 0 1px 0 rgba(255,235,205,0.35), inset 0 -2px 6px rgba(40,15,5,0.3), 0 3px 0 var(--hn-saddle-dark), 0 5px 10px rgba(74,39,19,0.35), 0 0 18px rgba(200,90,58,0.55); } } /* Wampum CTA shine sweep */ @keyframes hn-wampum-shine { 0% { transform: translateX(-30%); } 60% { transform: translateX(220%); } 100% { transform: translateX(220%); } } /* Splash sign-in load bar */ @keyframes hn-loadbar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Popup fade-in backdrop */ @keyframes hn-popup-fade { from { opacity: 0; } to { opacity: 1; } } /* Popup rise-from-bottom card */ @keyframes hn-popup-rise { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Skin frame halo glow */ @keyframes hn-halo-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* ---- Achievements claim flow (lifted from NEW_DESIGN/Achievements.html) ---- */ /* Diagonal shine sweep used on progress bars and the Claim button */ @keyframes hn-a-shine { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } } /* Gold/green flash overlay when CLAIM is tapped */ @keyframes hn-claim-flash { 0% { opacity: 0; transform: scale(0.9); } 25% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.08); } } /* HUD counter pulse (gold/wampum bumps as coins land in the wallet) */ @keyframes hn-hud-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } } /* Green checkmark button pop after collect */ @keyframes hn-collected-pop { 0% { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.18); opacity: 1; } 75% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } /* Whole-card micro-pop when a tier is collected */ @keyframes hn-card-collect-pop { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 65% { transform: scale(0.985); } 100% { transform: scale(1); } } /* Card mount stagger-in (achievements list, leaderboard rows, etc.) */ @keyframes hn-card-stagger-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* ---- Skin equip flow (lifted from NEW_DESIGN/Skins.html) ---- */ @keyframes hn-equip-pulse { 0% { transform: scale(1); } 25% { transform: scale(1.06); } 55% { transform: scale(0.98); } 100% { transform: scale(1); } } @keyframes hn-equip-burst { 0% { opacity: 0; transform: scale(0.4) rotate(-12deg); } 35% { opacity: 1; transform: scale(1.15) rotate(2deg); } 60% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(1.5) rotate(8deg); } } @keyframes hn-equip-ring { 0% { opacity: 0.85; transform: scale(0.85); border-width: 3px; } 100% { opacity: 0; transform: scale(1.6); border-width: 0; } } @keyframes hn-spark-rise { 0% { opacity: 0; transform: translateY(0) scale(0); } 25% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(0.5); } } /* WampumCTA / generic horizontal sheen sweep (lifted from NEW_DESIGN/menu.jsx) */ @keyframes hn-sheen { 0% { left: -40px; } 100% { left: 110%; } } /* Helper — hide scrollbars on horizontal carousels (Skins feature slider, etc.) */ .hn-no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; } .hn-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } /* ---------- design_refacto: React mount root ---------- #hn-react-root is always in the DOM but only takes pointer events when a React screen is actively mounted (HN.mounts.* sets [data-active]). z-index sits above #tap-to-enter (99999) and #desktop-block (999999) so the React Splash actually covers the legacy entry gates. */ #hn-react-root { position: fixed; inset: 0; z-index: 2000000; pointer-events: none; } #hn-react-root[data-active="true"] { pointer-events: auto; } /* The legacy wampum shop modal must render ABOVE the React root so it can pop on top of the skin detail popup when "Get More" is tapped. Defaults to z-index 9000 in lobby.css; we override here with a z-index higher than the react-root's 2_000_000. */ .wampum-shop-overlay { z-index: 2100000 !important; }