/* ═══════════════════════════════════════════════════════ Gadget Store — Global Stylesheet Covers: tokens, background system, nav, shared components, trust bar, footer, gadget icons Pages: all ═══════════════════════════════════════════════════════ */ /* ── Google Fonts import (also in for performance) ── */ @import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap"); /* ════════════════════════════════════════════════════ A. DESIGN TOKENS ════════════════════════════════════════════════════ */ :root { --tg-transition: 0.3s ease; } /** Default Dark Theme: Electric Midnight */ [data-theme="dark"], [data-theme="dark"][data-dark-pallete="electric-midnight"] { --bg: #0a0a0f; --bg2: #0e0e16; --card: #16161f; --card2: #1c1c28; --accent: #00e5ff; --accent2: #7c3aed; --accent3: #f59e0b; --text: #f0f0f8; --text2: #c8c8de; --muted: #8888a8; --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.12); --grid-line: rgba(0, 229, 255, 0.025); --glow1-color: rgba(0, 229, 255, 0.07); --glow2-color: rgba(124, 58, 237, 0.09); --glow3-color: rgba(245, 158, 11, 0.055); --nav-bg: rgba(10, 10, 15, 0.88); --shadow: rgba(0, 0, 0, 0.4); --trust-bg: rgba(22, 22, 31, 0.6); --promo-bg: rgba(245, 158, 11, 0.06); --promo-border: rgba(245, 158, 11, 0.2); --tag-bg: rgba(0, 229, 255, 0.08); --tag-border: rgba(0, 229, 255, 0.2); } /* Default Light Theme: Frost White */ [data-theme="light"], [data-theme="light"][data-light-pallete="frost-white"] { --bg: #f2f2f7; --bg2: #ffffff; --card: #ffffff; --card2: #eeeef4; --accent: #0099bb; --accent2: #6d28d9; --accent3: #d97706; --text: #0a0a1a; --text2: #2a2a3a; --muted: #666688; --border: rgba(0, 0, 0, 0.08); --border2: rgba(0, 0, 0, 0.14); --grid-line: rgba(0, 153, 187, 0.04); --glow1-color: rgba(0, 153, 187, 0.06); --glow2-color: rgba(109, 40, 217, 0.05); --glow3-color: rgba(217, 119, 6, 0.04); --nav-bg: rgba(242, 242, 247, 0.92); --shadow: rgba(0, 0, 0, 0.08); --trust-bg: rgba(255, 255, 255, 0.8); --promo-bg: rgba(217, 119, 6, 0.05); --promo-border: rgba(217, 119, 6, 0.2); --tag-bg: rgba(0, 153, 187, 0.07); --tag-border: rgba(0, 153, 187, 0.25); } /* ════════════════════════════════════════════════════ B. RESET & BASE ════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } a { color: var(--accent); } body { background: var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; min-height: 100vh; max-width: 100vw; overflow-x: hidden; transition: background var(--tg-transition), color var(--tg-transition); } /* general */ html body .hidden { display: none; } /* Capitalize table header column */ th { text-transform: capitalize; } /* Loading Spinner */ .gs-spinner { width: 24px; height: 24px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: 0.9; animation: tg-spin 0.8s linear infinite; } /** * Scrolling text */ .scroll-text-wrap { overflow: hidden; white-space: nowrap; } .scroll-text-wrap .scroll-text { display: inline-block; padding-left: 100%; animation: scroll-left 12s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Overlay variant: apply to any relatively-positioned container. Spinner size is driven by font-size on this element (1em), so set font-size on .gs-spinner-overlay to resize it. */ .gs-spinner-overlay { position: relative; } .gs-spinner-overlay::before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; border-radius: inherit; } .product-quantity.gs-spinner-overlay::before { background: var(--accent3); } /* [data-theme="light"] .gs-spinner-overlay::before { background: var(--accent); } */ .gs-spinner-overlay::after { animation: tg-spin 0.8s linear infinite; border: 0.15em solid currentColor; border-top-color: transparent; border-radius: 50%; color: white; content: ""; height: 1em; left: 50%; margin: -0.5em 0 0 -0.5em; opacity: 0.9; position: absolute; top: 50%; width: 1em; z-index: 1; } @media (prefers-reduced-motion: reduce) { .gs-spinner, .gs-spinner-overlay::before { animation-duration: 1.6s; } } @keyframes tg-spin { to { transform: rotate(360deg); } } /* ── Grid overlay ── */ body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* ── Ambient glow orbs ── */ .gs-glow-orb > * { position: fixed; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; } .gs-glow-orb > :nth-child(1) { width: 600px; height: 600px; background: var(--glow1-color); top: -200px; left: -150px; } .gs-glow-orb > :nth-child(2) { width: 500px; height: 500px; background: var(--glow2-color); bottom: -100px; right: -100px; } .gs-glow-orb > :nth-child(3) { width: 350px; height: 350px; background: var(--glow3-color); top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ── Page z-layer above background ── */ .gs-page { position: relative; z-index: 1; } /* ════════════════════════════════════════════════════ C. FLOATING GADGET ICONS ════════════════════════════════════════════════════ */ #gs-gadget-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .tg-gadget-item { position: absolute; opacity: 0; will-change: transform, opacity; } .tg-gadget-item img, .tg-gadget-item svg { display: block; } /* ════════════════════════════════════════════════════ D. NAVIGATION ════════════════════════════════════════════════════ */ .tg-nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0 48px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: background var(--tg-transition), border-color var(--tg-transition); } .gs-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .gs-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 10px; position: relative; overflow: hidden; flex-shrink: 0; } .gs-logo-icon::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2.5px solid #fff; border-radius: 4px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gs-logo-icon::before { content: ""; position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; top: 7px; right: 7px; } .gs-logo-image { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } .gs-logo-text-wrap { display: flex; flex-direction: column; gap: 2px; } .gs-logo-text { font-family: "Syne", sans-serif; font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -0.3px; transition: color var(--tg-transition); } .gs-logo-tagline { display: block; font-family: "DM Sans", sans-serif; font-weight: 400; font-size: 10px; letter-spacing: 0.5px; color: var(--muted); transition: color var(--tg-transition); text-transform: uppercase; } /* wp_nav_menu outputs