/* ═══════════════════════════════════════════════════════════════════════ GameStorm — "Storm" design system Electric violet → blue on near-black. Self-hosted fonts, no external requests. ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Chakra Petch"; src: url("/assets/fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Chakra Petch"; src: url("/assets/fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ── Theme ─────────────────────────────────────────────────────────────── Dark is the default. Three states are handled: an explicit choice stamps data-theme on ; with no choice, prefers-color-scheme decides. ──────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces — cool near-black, faintly blue rather than pure grey */ --bg: #070912; --bg-raised: #0e1220; --bg-hover: #161b2d; --bg-sunken: #05070e; --border: #1e2438; --border-bright: #2f3856; --text: #eef1f8; --text-dim: #98a2bd; --text-faint: #626d8a; /* Storm — violet into blue */ --violet: #8b5cf6; --violet-hot: #a78bfa; --blue: #3b82f6; --blue-hot: #60a5fa; --storm: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); --storm-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(59, 130, 246, 0.16)); --glow-violet: rgba(139, 92, 246, 0.35); --gold: #f0b73f; --gold-dim: rgba(240, 183, 63, 0.13); --green: #34d399; --red: #f87171; /* Translucent chrome — must differ per theme, so they are tokens. */ --chrome: rgba(7, 9, 18, 0.86); --chrome-solid: rgba(7, 9, 18, 0.93); --overlay: rgba(7, 9, 18, 0.82); --scrim: rgba(3, 4, 10, 0.7); --aurora-1: rgba(139, 92, 246, 0.13); --aurora-2: rgba(59, 130, 246, 0.10); --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.5); --cover-bg: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%); --radius: 14px; --radius-sm: 9px; --maxw: 1240px; --header-h: 66px; --display: "Chakra Petch", -apple-system, BlinkMacSystemFont, sans-serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* One corner chamfered instead of rounded — reads hardware, not consumer app. */ --cut: 16px; --clip-card: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); } /* Light palette, defined once and applied by both rules below. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6f7fb; --bg-raised: #ffffff; --bg-hover: #eef1f8; --bg-sunken: #eaedf6; --border: #e1e6f0; --border-bright: #c6cede; --text: #0e1220; --text-dim: #515c76; --text-faint: #8590a8; --violet: #7c3aed; --violet-hot: #6d28d9; --blue: #2563eb; --blue-hot: #1d4ed8; --storm: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); --storm-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(37, 99, 235, 0.09)); --glow-violet: rgba(124, 58, 237, 0.28); --gold: #b47b0a; --gold-dim: rgba(180, 123, 10, 0.1); --green: #059669; --red: #dc2626; --chrome: rgba(246, 247, 251, 0.86); --chrome-solid: rgba(246, 247, 251, 0.94); --overlay: rgba(255, 255, 255, 0.88); --scrim: rgba(20, 24, 38, 0.36); --aurora-1: rgba(124, 58, 237, 0.07); --aurora-2: rgba(37, 99, 235, 0.06); --shadow-card: 0 10px 28px rgba(24, 32, 60, 0.12); --cover-bg: radial-gradient(120% 90% at 50% 0%, rgba(124, 58, 237, 0.1), transparent 70%); } } :root[data-theme="light"] { --bg: #f6f7fb; --bg-raised: #ffffff; --bg-hover: #eef1f8; --bg-sunken: #eaedf6; --border: #e1e6f0; --border-bright: #c6cede; --text: #0e1220; --text-dim: #515c76; --text-faint: #8590a8; --violet: #7c3aed; --violet-hot: #6d28d9; --blue: #2563eb; --blue-hot: #1d4ed8; --storm: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); --storm-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(37, 99, 235, 0.09)); --glow-violet: rgba(124, 58, 237, 0.28); --gold: #b47b0a; --gold-dim: rgba(180, 123, 10, 0.1); --green: #059669; --red: #dc2626; --chrome: rgba(246, 247, 251, 0.86); --chrome-solid: rgba(246, 247, 251, 0.94); --overlay: rgba(255, 255, 255, 0.88); --scrim: rgba(20, 24, 38, 0.36); --aurora-1: rgba(124, 58, 237, 0.07); --aurora-2: rgba(37, 99, 235, 0.06); --shadow-card: 0 10px 28px rgba(24, 32, 60, 0.12); --cover-bg: radial-gradient(120% 90% at 50% 0%, rgba(124, 58, 237, 0.1), transparent 70%); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* A faint violet aurora behind the whole page so the ground never reads flat. */ background-image: radial-gradient(900px 500px at 12% -8%, var(--aurora-1), transparent 65%), radial-gradient(800px 450px at 88% 2%, var(--aurora-2), transparent 60%); background-attachment: fixed; color-scheme: dark light; } h1, h2, h3, .display { font-family: var(--display); letter-spacing: -0.5px; } a { color: var(--blue-hot); text-decoration: none; } a:hover { color: var(--violet-hot); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ── Header ──────────────────────────────────────────────────────────── */ header.site { position: sticky; top: 0; z-index: 50; min-height: var(--header-h); background: var(--chrome); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } /* Thin gradient filament along the bottom edge — the "storm" signature. */ header.site::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--violet), var(--blue), transparent); opacity: 0.75; } header.site .wrap { height: var(--header-h); display: flex; align-items: center; gap: 24px; } .logo { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.7px; color: var(--text); white-space: nowrap; } .logo:hover { color: var(--text); } .logo .bolt { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--storm); box-shadow: 0 0 16px var(--glow-violet); flex: none; } .logo .bolt svg { width: 15px; height: 15px; display: block; } /* The wordmark is one flex item, so the gap above never splits "Game" from "Storm". */ .logo .word { display: inline; } .logo em { font-style: normal; background: var(--storm); -webkit-background-clip: text; background-clip: text; color: transparent; } nav.main { display: flex; gap: 22px; margin-left: auto; align-items: center; } nav.main a { color: var(--text-dim); font-size: 14px; font-weight: 600; white-space: nowrap; position: relative; padding: 4px 0; } nav.main a:hover { color: var(--text); } nav.main a.active { color: var(--text); } nav.main a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--storm); } .cart-btn { display: flex; align-items: center; gap: 8px; background: var(--storm); color: #fff; border: 0; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: var(--body); cursor: pointer; white-space: nowrap; box-shadow: 0 3px 16px rgba(139, 92, 246, 0.28); transition: transform 0.14s, box-shadow 0.14s; } .cart-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 22px rgba(139, 92, 246, 0.42); } .cart-count { background: rgba(0, 0, 0, 0.32); border-radius: 20px; padding: 1px 8px; font-size: 12px; font-variant-numeric: tabular-nums; } .theme-btn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; padding: 0; } .theme-btn:hover { color: var(--text); border-color: var(--border-bright); } .theme-btn svg { width: 17px; height: 17px; display: block; } /* Each icon shows only in the theme it switches away from. */ .theme-btn .to-light { display: none; } :root[data-theme="light"] .theme-btn .to-light { display: block; } :root[data-theme="light"] .theme-btn .to-dark { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-btn .to-light { display: block; } :root:not([data-theme="dark"]) .theme-btn .to-dark { display: none; } } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { padding: 52px 0 26px; } .hero h1 { margin: 0 0 12px; font-size: clamp(30px, 5.4vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -1.6px; } /* Sized in em so it scales with the clamped headline rather than fighting it. */ .hero h1 .digital { position: relative; display: inline-block; font-size: 1.16em; line-height: 0.9; } .hero h1 .digital::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.07em; border-radius: 4px; background: var(--storm); } .hero h1 .grad { background: var(--storm); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { margin: 0; color: var(--text-dim); max-width: 60ch; font-size: 16.5px; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--violet-hot); background: var(--storm-soft); border: 1px solid rgba(139, 92, 246, 0.28); padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; } /* Trust strip under the hero */ .trust { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 8px; } .trust span { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-raised); border: 1px solid var(--border); padding: 7px 13px; border-radius: 20px; } .trust span b { color: var(--text); font-weight: 700; } .section-head { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 16px; } .section-head h2 { margin: 0; font-size: 23px; font-weight: 700; } .section-head .sub { color: var(--text-faint); font-size: 13px; } /* ── Toolbar ─────────────────────────────────────────────────────────── */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0 18px; position: sticky; top: var(--header-h); background: var(--chrome-solid); backdrop-filter: blur(10px); z-index: 20; } .search-wrap { flex: 1 1 260px; position: relative; display: flex; } .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; } .search { width: 100%; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text); padding: 11px 14px 11px 40px; border-radius: var(--radius-sm); font-size: 15px; font-family: var(--body); } .search::placeholder { color: var(--text-faint); } .search:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chip { background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); padding: 9px 15px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: var(--body); cursor: pointer; transition: all 0.14s; } .chip:hover { background: var(--bg-hover); color: var(--text); } .chip[aria-pressed="true"] { background: var(--storm-soft); border-color: var(--violet); color: var(--violet-hot); } .select { background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); padding: 9px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: var(--body); cursor: pointer; } .select:focus { outline: none; border-color: var(--violet); } .result-count { color: var(--text-faint); font-size: 13px; margin-left: auto; white-space: nowrap; } /* ── Shop layout: filter rail left, results right ────────────────────── */ .shop { display: grid; grid-template-columns: 236px 1fr; gap: 30px; align-items: start; padding-bottom: 60px; } .filters { position: sticky; top: calc(var(--header-h) + 18px); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; max-height: calc(100vh - var(--header-h) - 36px); overflow-y: auto; } .filters-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 18px; } .filters-head h3 { margin: 0; font-size: 15px; font-weight: 700; } .clear-all { background: none; border: 0; padding: 0; color: var(--violet-hot); font-size: 12.5px; font-weight: 600; font-family: var(--body); cursor: pointer; text-decoration: underline; } .clear-all[hidden] { display: none; } .fgroup { border-top: 1px solid var(--border); padding: 16px 0 4px; } .fgroup:first-of-type { border-top: 0; padding-top: 0; } .fgroup h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--text-faint); } .fopt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 8px 9px; margin: 0 0 2px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13.5px; font-weight: 500; font-family: var(--body); cursor: pointer; text-align: left; } .fopt:hover { background: var(--bg-hover); color: var(--text); } .fopt .dot { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid var(--border-bright); display: grid; place-items: center; } .fopt[aria-pressed="true"] { color: var(--text); font-weight: 600; } .fopt[aria-pressed="true"] .dot { border-color: var(--violet); } .fopt[aria-pressed="true"] .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--storm); } .fopt .n { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .fopt:disabled { opacity: 0.4; cursor: default; } .fopt:disabled:hover { background: none; color: var(--text-dim); } .results-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .results-head .n { color: var(--text-faint); font-size: 13px; } .results-head .sort-wrap { margin-left: auto; } /* Mobile: the rail becomes a panel toggled by a button. */ .filters-toggle { display: none; align-items: center; gap: 8px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text); padding: 10px 15px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; font-family: var(--body); cursor: pointer; } .filters-toggle .badge-n { background: var(--storm); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; } /* ── Game grid — 4 per row on desktop ────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 56px; } /* ── New Arrivals marquee ──────────────────────────────────────────────── The track holds the same cards twice. Sliding it left by exactly 50% lands the second copy where the first began, so the loop is seamless. The gap is applied as margin-right on each card rather than flex `gap`, because a flex gap is not included in that 50% and would make the seam jump. ──────────────────────────────────────────────────────────────────────── */ .marquee { overflow: hidden; padding: 4px 0 18px; /* Fade the edges so cards enter and leave rather than being cut off. */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 60s) linear infinite; } .marquee-track > .card { width: 210px; flex: none; margin-right: 18px; } /* Let people stop it to read or click a card. */ .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee-track { animation: none; } } /* Art-forward card: the cover *is* the card, with title and price laid over a scrim at the foot. clip-path chamfers the top-right corner; drop-shadow is used rather than box-shadow because it follows the clipped silhouette. 4:5 rather than 2:3 because that is the shape the box art actually arrives in: 89 of 104 covers fill this frame exactly, against 6 at 2:3. */ .card { position: relative; aspect-ratio: 4 / 5; background: var(--bg-raised); clip-path: var(--clip-card); overflow: hidden; display: block; transition: transform 0.2s ease, filter 0.2s ease; } .card:hover { transform: translateY(-5px); filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)); } /* Hairline that traces the clipped silhouette, brightening on hover. */ .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 0.2s; z-index: 3; } .card:hover::after { box-shadow: inset 0 0 0 1px var(--violet), inset 0 0 22px rgba(139, 92, 246, 0.28); } .cover { position: absolute; inset: 0; background: var(--bg-sunken); overflow: hidden; } /* Absolutely positioned so it paints above the fallback beneath it; if the file is missing the img is removed and the fallback shows through. */ .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .card:hover .cover img { transform: scale(1.045); } /* Shown when a title has no cover file yet. The title itself is not repeated here — it already sits in the overlay at the foot of the card. */ .cover .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 44px; background: var(--cover-bg), repeating-linear-gradient(135deg, rgba(139, 92, 246, 0.045) 0 2px, transparent 2px 9px), var(--bg-sunken); } .cover .fallback svg { width: 42px; height: 42px; opacity: 0.22; color: var(--violet-hot); } /* Sits in the body rather than over the artwork: PlayStation box art already carries its own platform banner in the top-left, and two of them collided. */ .card-body .plat { align-self: flex-start; z-index: 2; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; padding: 4px 9px; background: var(--overlay); backdrop-filter: blur(6px); border: 1px solid var(--border-bright); color: var(--text); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); } .card-body .plat.both { color: var(--green); border-color: rgba(52, 211, 153, 0.5); } /* Info sits at the foot of the card. Without artwork it reads as a normal panel in the current theme; the dark scrim and white text are applied only once a cover has actually loaded, since that is the only case that needs it. */ .card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 13px 13px; display: flex; flex-direction: column; gap: 7px; background: linear-gradient(to top, var(--bg-raised) 62%, transparent); } .card.has-art .card-body { padding-top: 34px; background: linear-gradient(to top, rgba(4, 6, 14, 0.95) 32%, rgba(4, 6, 14, 0.75) 62%, transparent); } .card-title { font-family: var(--display); font-size: 14.5px; font-weight: 700; line-height: 1.25; margin: 0; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .price { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; color: var(--text); } .card.has-art .card-title, .card.has-art .price { color: #f4f6fb; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); } .add-btn { background: var(--storm); border: 0; color: #fff; padding: 8px 15px; font-size: 12.5px; font-weight: 700; font-family: var(--display); letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); transition: opacity 0.18s, transform 0.18s; } .add-btn:hover { filter: brightness(1.12); } .add-btn.in-cart { background: var(--green); color: #04120c; } /* Pointer devices get the reveal; touch devices must always see the button, since there is no hover state to trigger it. */ @media (hover: hover) and (pointer: fine) { .add-btn { opacity: 0; transform: translateY(6px); } .card:hover .add-btn, .card:focus-within .add-btn, .add-btn.in-cart { opacity: 1; transform: none; } } .empty { text-align: center; padding: 70px 20px; color: var(--text-faint); } /* ── PS Plus tiers ───────────────────────────────────────────────────── */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; padding-bottom: 22px; } .tier { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; position: relative; } .tier.featured { border-color: var(--violet); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 16px 44px rgba(139, 92, 246, 0.14); } .tier.premium { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim), 0 16px 44px rgba(240, 183, 63, 0.1); } .tier-badge { position: absolute; top: -11px; left: 26px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; padding: 5px 12px; border-radius: 20px; background: var(--storm); color: #fff; } .tier.premium .tier-badge { background: var(--gold); color: #1a1408; } .tier h3 { margin: 4px 0 4px; font-size: 22px; font-weight: 700; } .tier .tier-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 18px; min-height: 3.1em; } .tier-price { display: flex; align-items: baseline; gap: 7px; } .tier-price .amt { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; } .tier-price .per { color: var(--text-faint); font-size: 13.5px; font-weight: 600; } .tier-total { color: var(--text-dim); font-size: 13px; margin: 5px 0 0; font-variant-numeric: tabular-nums; } .tier-save { color: var(--green); font-size: 12.5px; font-weight: 700; margin: 7px 0 0; } .tier-delta { background: var(--gold-dim); border: 1px solid rgba(240, 183, 63, 0.32); color: var(--gold); font-size: 12.5px; font-weight: 700; padding: 9px 12px; border-radius: var(--radius-sm); margin: 14px 0 0; } .tier ul { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 9px; } .tier li { font-size: 13.5px; color: var(--text-dim); padding-left: 23px; position: relative; } .tier li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; } .tier li.muted { color: var(--text-faint); } .tier li.muted::before { content: "—"; color: var(--text-faint); } .tier-btn { margin-top: auto; background: var(--storm); color: #fff; border: 0; padding: 13px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 700; font-family: var(--body); cursor: pointer; width: 100%; transition: transform 0.14s, box-shadow 0.14s; } .tier-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(139, 92, 246, 0.35); } .tier.premium .tier-btn { background: var(--gold); color: #1a1408; } .tier.premium .tier-btn:hover { box-shadow: 0 6px 22px rgba(240, 183, 63, 0.3); } .tier-btn.secondary { background: transparent; border: 1px solid var(--border-bright); color: var(--text-dim); } .tier-btn.secondary:hover { background: var(--bg-hover); color: var(--text); box-shadow: none; } .duration-toggle { display: flex; gap: 7px; justify-content: center; padding: 6px 0 22px; flex-wrap: wrap; } /* ── Cart drawer ─────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(410px, 100%); background: var(--bg-raised); border-left: 1px solid var(--border); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1); } .drawer.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); } .drawer-head h2 { margin: 0; font-size: 18px; font-weight: 700; } .icon-btn { background: transparent; border: 0; color: var(--text-dim); font-size: 25px; line-height: 1; cursor: pointer; padding: 4px 8px; font-family: var(--body); } .icon-btn:hover { color: var(--text); } .drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; } .line { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .line-info { flex: 1; min-width: 0; } .line-title { font-size: 14px; font-weight: 600; margin: 0 0 3px; } .line-meta { font-size: 12px; color: var(--text-faint); } .line-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .line-remove { background: transparent; border: 0; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 2px 0; font-family: var(--body); text-decoration: underline; } .line-remove:hover { color: var(--red); } .drawer-foot { padding: 18px 20px; border-top: 1px solid var(--border); } .total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .total-row .label { color: var(--text-dim); font-size: 14px; } .total-row .amount { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .btn-primary { display: block; width: 100%; background: var(--storm); color: #fff; border: 0; padding: 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; font-family: var(--body); cursor: pointer; text-align: center; transition: transform 0.14s, box-shadow 0.14s; } .btn-primary:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 6px 24px rgba(139, 92, 246, 0.38); } .btn-primary:disabled { background: var(--bg-hover); color: var(--text-faint); cursor: not-allowed; transform: none; box-shadow: none; } .btn-wa { background: #25d366; } .btn-wa:hover { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35); } /* ── Toast ───────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 100px); background: var(--storm); color: #fff; padding: 12px 22px; border-radius: 30px; font-size: 14px; font-weight: 600; z-index: 200; transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 10px 32px rgba(139, 92, 246, 0.4); } .toast.show { transform: translate(-50%, 0); } /* ── Forms ───────────────────────────────────────────────────────────── */ .panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .field { margin-bottom: 17px; } .field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; } .field .hint { color: var(--text-faint); font-weight: 400; font-size: 12.5px; } .field input { width: 100%; background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text); padding: 12px 13px; border-radius: var(--radius-sm); font-size: 15px; font-family: var(--body); } .field input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); } .field input.invalid { border-color: var(--red); } .field .error { color: var(--red); font-size: 12.5px; margin-top: 5px; display: none; } .field .error.show { display: block; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; padding-bottom: 60px; } .summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--border); } .summary-line:last-of-type { border-bottom: 0; } .summary-line .n { color: var(--text-dim); min-width: 0; } .summary-line .v { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .note { background: var(--storm-soft); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13.5px; color: var(--text-dim); margin: 16px 0; } .note strong { color: var(--text); } .section-title { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0 0 6px; } /* ── Prose ───────────────────────────────────────────────────────────── */ .prose { max-width: 74ch; padding-bottom: 70px; } .prose h2 { font-size: 20px; font-weight: 700; margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--border); } .prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 18px; } .prose ul { padding-left: 20px; } .prose li { margin-bottom: 9px; color: var(--text-dim); } .prose p { color: var(--text-dim); } .prose strong { color: var(--text); } /* ── Footer ──────────────────────────────────────────────────────────── */ footer.site { border-top: 1px solid var(--border); background: var(--bg-sunken); margin-top: 40px; padding: 42px 0 26px; } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; padding-bottom: 30px; } .foot-grid h4 { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text); margin: 0 0 14px; } .foot-grid p { color: var(--text-faint); font-size: 13.5px; margin: 12px 0 0; max-width: 34ch; } .foot-links { display: flex; flex-direction: column; gap: 9px; } .foot-links a { color: var(--text-dim); font-size: 13.5px; } .foot-links a:hover { color: var(--text); } .pay-marks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .pay-mark { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--text-dim); } .foot-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--text-faint); font-size: 12.5px; } .foot-bottom .spacer { margin-left: auto; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } } @media (max-width: 900px) { /* Rail collapses into a toggled panel above the results. */ .shop { grid-template-columns: 1fr; gap: 16px; } .filters { position: static; max-height: none; } .filters[hidden] { display: none; } .filters-toggle { display: inline-flex; } } @media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } } /* ── How it works ──────────────────────────────────────────────────────── One strip rather than five cards. The steps carry very different amounts of detail, so equal boxes left the short ones sitting in dead space, and the full explanation belongs on the FAQ where someone goes looking for it. ──────────────────────────────────────────────────────────────────────── */ .clarify { background: var(--storm-soft); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: var(--radius-sm); padding: 13px 16px; margin: 16px 0 4px; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; max-width: 88ch; } .clarify strong { color: var(--text); } .flow { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); clip-path: var(--clip-card); margin-bottom: 30px; } .flow-step { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; } .flow-step + .flow-step { border-left: 1px solid var(--border); } .flow-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--storm-soft); border: 1px solid rgba(139, 92, 246, 0.32); color: var(--violet-hot); } .flow-icon svg { width: 19px; height: 19px; } .flow-step h3 { margin: 2px 0 3px; font-size: 14.5px; font-weight: 700; } .flow-step h3 .n { color: var(--violet-hot); font-variant-numeric: tabular-nums; margin-right: 3px; } .flow-step p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.45; } @media (max-width: 780px) { .flow { grid-template-columns: 1fr; } .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--border); } } /* ── Quick view ──────────────────────────────────────────────────────── */ .qv-scrim { position: fixed; inset: 0; z-index: 110; background: var(--scrim); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.18s; } .qv-scrim.open { opacity: 1; pointer-events: auto; } .qv { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg-raised); border: 1px solid var(--border-bright); border-radius: var(--radius); clip-path: var(--clip-card); display: grid; grid-template-columns: 280px 1fr; transform: translateY(10px) scale(0.985); transition: transform 0.2s; } .qv-scrim.open .qv { transform: none; } .qv-art { position: relative; background: var(--bg-sunken); aspect-ratio: 4 / 5; } .qv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .qv-art .fallback { position: absolute; inset: 0; } .qv-body { padding: 24px; display: flex; flex-direction: column; } .qv-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--overlay); border: 1px solid var(--border-bright); border-radius: var(--radius-sm); color: var(--text); font-size: 20px; line-height: 1; font-family: var(--body); cursor: pointer; z-index: 2; } .qv-close:hover { background: var(--bg-hover); } .qv h2 { margin: 0 0 8px; font-size: 23px; font-weight: 700; line-height: 1.2; } .qv .qv-price { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; margin: 4px 0 16px; } .qv-block { margin-bottom: 15px; } .qv-block h4 { margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); } .qv-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .qv-facts li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text-dim); line-height: 1.4; } .qv-facts li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; } .qv-facts strong { color: var(--text); } .qv-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } /* Not a flex row: a flex gap also separates the anonymous items formed by runs of text, which pushed a space in front of the comma after . */ .qv-steps li { position: relative; padding-left: 27px; font-size: 13.5px; color: var(--text-dim); line-height: 1.45; } .qv-steps li span { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--storm); color: #fff; font-family: var(--display); font-size: 10.5px; font-weight: 700; } .qv-steps strong { color: var(--text); } .qv-fine { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 11px; } .qv-actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; } .qv-actions .btn-primary { width: 100%; } .qv-more { text-align: center; font-size: 12.5px; color: var(--text-faint); } @media (max-width: 640px) { .qv { grid-template-columns: 1fr; } /* Art shrinks to a banner so the price and button stay above the fold. */ .qv-art { aspect-ratio: 16 / 9; } .qv-art img { object-position: center 22%; } .qv-body { padding: 18px; } } /* ── FAQ ───────────────────────────────────────────────────────────────── Grouped rather than one long list, with a support card alongside so the page is never a dead end: the answer someone needs may be the one that is not written down. ──────────────────────────────────────────────────────────────────────── */ .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; align-items: start; padding-bottom: 70px; } .faq-group { margin-bottom: 30px; } .faq-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); } .faq-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--storm-soft); border: 1px solid rgba(139, 92, 246, 0.3); font-size: 14px; } .faq-item { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; /* Transparent left border so opening does not shift the text sideways. */ border-left: 3px solid transparent; transition: border-color 0.16s; } .faq-item[open] { border-color: var(--border-bright); border-left-color: var(--violet); } .faq-item summary { cursor: pointer; list-style: none; padding: 15px 46px 15px 17px; font-family: var(--display); font-size: 15.5px; font-weight: 700; position: relative; color: var(--text-dim); transition: color 0.14s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--text); background: var(--bg-hover); } .faq-item[open] summary { color: var(--text); } /* Chevron drawn in CSS so no icon font or SVG is needed on every row. */ .faq-item summary::after { content: ""; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s, border-color 0.2s; } .faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); border-color: var(--violet-hot); } .faq-a { padding: 0 17px 15px; } .faq-a p { margin: 0 0 10px; color: var(--text-dim); font-size: 14px; line-height: 1.62; } .faq-a p:last-child { margin-bottom: 0; } .faq-a strong { color: var(--text); } /* The one answer that exists to prevent a dispute rather than make a sale. */ .faq-warn { background: var(--gold-dim); border: 1px solid rgba(240, 183, 63, 0.3); border-radius: var(--radius-sm); padding: 11px 13px; } .faq-warn strong { color: var(--gold); } .faq-side { position: sticky; top: calc(var(--header-h) + 18px); } .faq-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); clip-path: var(--clip-card); padding: 20px; margin-bottom: 12px; } .faq-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; } .faq-card p { margin: 0 0 14px; color: var(--text-dim); font-size: 13.5px; line-height: 1.55; } .faq-card .btn-primary { padding: 11px; font-size: 14px; } .faq-hours { margin: 10px 0 0 !important; text-align: center; font-size: 12px; color: var(--text-faint); } @media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 20px; } .faq-side { position: static; } } /* ── Loading skeletons ───────────────────────────────────────────────── */ .card.skeleton { position: relative; aspect-ratio: 4 / 5; background: var(--bg-raised); padding: 0 0 14px; pointer-events: none; } .card.skeleton .sk-art, .card.skeleton .sk-line { display: block; background: linear-gradient(90deg, var(--bg-hover) 8%, var(--border) 22%, var(--bg-hover) 36%); background-size: 800px 100%; animation: sk-shimmer 1.3s linear infinite; } .card.skeleton .sk-art { position: absolute; inset: 0 0 74px; } .card.skeleton .sk-line { position: absolute; left: 13px; right: 13px; height: 12px; border-radius: 4px; } .card.skeleton .sk-line { bottom: 44px; } .card.skeleton .sk-line.short { bottom: 18px; right: 45%; } @keyframes sk-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } @media (prefers-reduced-motion: reduce) { .card.skeleton .sk-art, .card.skeleton .sk-line { animation: none; } } /* ── Cart thumbnails ─────────────────────────────────────────────────── */ .thumb { position: relative; flex: none; width: 46px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--cover-bg), var(--bg-sunken); border: 1px solid var(--border); } .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── Sticky cart bar (mobile) ────────────────────────────────────────── */ .cart-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; align-items: stretch; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-raised); border-top: 1px solid var(--border); box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.32); } .cart-bar-info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; background: none; border: 0; padding: 4px 2px; font-family: var(--body); cursor: pointer; text-align: left; } .cart-bar-info .n { color: var(--text-dim); font-size: 12px; font-weight: 600; } .cart-bar-info .t { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .cart-bar-go { display: flex; align-items: center; background: var(--storm); color: #fff; padding: 0 24px; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.3px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); } .cart-bar-go:hover { color: #fff; filter: brightness(1.1); } /* ── Mobile menu ─────────────────────────────────────────────────────── */ .burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 38px; height: 38px; flex: none; padding: 0 8px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .burger span { display: block; /* Explicit width rather than relying on flex stretch: Safari can collapse an empty flex child to zero width, which leaves a button with no icon in it. */ width: 20px; height: 2px; flex: none; border-radius: 2px; background: var(--text); transition: transform 0.2s, opacity 0.15s; } /* Turns into an X while the menu is open. */ .burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-nav { display: none; flex-direction: column; background: var(--bg-raised); border-bottom: 1px solid var(--border); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); padding: 6px 20px 14px; } .mobile-nav a { color: var(--text-dim); font-size: 15.5px; font-weight: 600; padding: 13px 2px; border-bottom: 1px solid var(--border); } .mobile-nav a:last-child { border-bottom: 0; } .mobile-nav a.active { color: var(--violet-hot); } @media (max-width: 620px) { .hero { padding: 32px 0 18px; } .toolbar { position: static; } .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Links collapse into the burger; cart and theme stay reachable. */ nav.main a { display: none; } nav.main { margin-left: auto; gap: 10px; } .burger { display: flex; } .mobile-nav:not([hidden]) { display: flex; } header.site .wrap { gap: 12px; } .cart-bar:not([hidden]) { display: flex; } /* Keep the bar from sitting on top of the last row of content. */ body.has-cart-bar { padding-bottom: 78px; } } /* Narrow phones: the header is the widest element, and once it overflows the whole document scrolls sideways and clips everything else. */ @media (max-width: 480px) { .wrap { padding: 0 14px; } header.site .wrap { gap: 10px; } nav.main { gap: 15px; } .logo { font-size: 17px; } .logo .bolt { width: 24px; height: 24px; } nav.main a { font-size: 13.5px; } /* Very narrow: the cart shrinks to its count so the burger always fits. */ .cart-btn { padding: 9px 11px; font-size: 13px; } .cart-btn .cart-label { display: none; } .card-body { padding: 11px 12px 12px; } .card-title { font-size: 13.5px; } .price { font-size: 16px; } .add-btn { padding: 7px 11px; font-size: 12px; } .panel { padding: 18px; } .tier { padding: 21px; } .foot-grid { grid-template-columns: 1fr; gap: 24px; } }