/* * Cardheist design system — ported from Claude Design (see DESIGN.md). * Dark premium TCG vibe; holo accents on brand-mark; per-game accent colors. * * Google Fonts loades nu fra i layout via preconnect + preload-trick * (ikke @import her), så CSS-parsing ikke blokeres på font-CSS-discovery. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: oklch(0.16 0.02 270); --bg-2: oklch(0.20 0.025 270); --surface: oklch(0.22 0.02 270); --surface-2: oklch(0.26 0.022 270); --border: oklch(0.32 0.02 270); --border-2: oklch(0.40 0.025 270); --ink: oklch(0.97 0.01 90); --muted: oklch(0.70 0.02 270); --faint: oklch(0.70 0.02 270); --gold: oklch(0.78 0.16 80); --gold-h: oklch(0.85 0.18 85); } html, body { height: 100%; } body { font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); min-height: 100vh; background-image: radial-gradient(ellipse 60% 40% at 20% 0%, oklch(0.30 0.10 320 / 0.20), transparent 70%), radial-gradient(ellipse 60% 40% at 80% 10%, oklch(0.30 0.12 230 / 0.15), transparent 70%); } .display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; } .holo { background: linear-gradient(115deg, oklch(0.75 0.20 320), oklch(0.78 0.18 230), oklch(0.85 0.18 145), oklch(0.85 0.16 80)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo 6s ease-in-out infinite; } @keyframes holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .card-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: transform .25s, box-shadow .25s, border-color .25s; cursor: pointer; } .card-tile:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); } .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-h)); color: oklch(0.18 0.02 80); border: none; cursor: pointer; font-family: inherit; font-weight: 700; border-radius: 10px; transition: filter .15s, transform .15s; } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-2); cursor: pointer; font-family: inherit; font-weight: 600; border-radius: 10px; } .btn-ghost:hover { background: var(--surface-2); border-color: var(--gold); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; background: oklch(0.30 0.04 270); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--muted); } .pack-shape { aspect-ratio: 0.62; background: linear-gradient(160deg, var(--c1), var(--c2)); border-radius: 6px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4); } .pack-shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 55%), repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255, 255, 255, 0.04) 4px, rgba(255, 255, 255, 0.04) 5px); pointer-events: none; } .pack-foil { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); width: 60%; height: 15%; border-radius: 3px; background: linear-gradient(115deg, oklch(0.85 0.16 80), oklch(0.95 0.14 90), oklch(0.85 0.16 80)); } .pack-label { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); text-align: center; color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); pointer-events: none; } .game-tile { position: relative; cursor: pointer; padding: 28px 20px 22px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border); transition: transform .25s ease, box-shadow .25s, border-color .25s, background .25s; overflow: hidden; text-decoration: none; display: block; font-family: inherit; text-align: center; color: inherit; width: 100%; } .game-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 100% at 50% 100%, var(--accent-glow), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; } .game-tile:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 22px 50px rgba(0, 0, 0, .5); } .game-tile:hover::before { opacity: 0.6; } .game-tile.selected { border-color: var(--accent); background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: 0 0 0 1px var(--accent), 0 18px 44px rgba(0, 0, 0, .45); } .game-tile.compact { padding: 14px 14px 12px; text-align: left; } .game-tile.compact .game-pack { transform: scale(0.7); } .scroll-x { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .scroll-x::-webkit-scrollbar { height: 6px; } .scroll-x::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .fade-in { animation: fade-in .45s ease-out; } a { color: inherit; } button { font-family: inherit; } [data-tabs-target="tab"] { padding: 10px 16px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } [data-tabs-target="tab"][data-active="true"] { color: var(--ink); border-bottom-color: var(--gold); } /* Mobile menu */ .hamburger { display: none; align-items: center; justify-content: center; padding: 6px; background: transparent; border: none; color: var(--ink); cursor: pointer; } .mobile-panel { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 500; padding: 20px; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); } .mobile-panel.open { display: flex; } .mobile-panel a { display: block; padding: 14px 12px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); border-radius: 8px; } @media (max-width: 767px) { .nav-desktop, .header-desktop-only { display: none !important; } .hamburger { display: inline-flex; } } /* --------------------------------------------------------------------------- Responsive layout primitives --------------------------------------------------------------------------- */ /* Page-wide container: fixed max-width on desktop, slimmer padding on mobile */ .page-wrap { max-width: 1480px; margin: 0 auto; padding: 0 32px; } @media (max-width: 767px) { .page-wrap { padding: 0 14px; } } /* Product show: sidebar (380px) + main column → stacked on tablet/mobile */ .product-layout { display: grid; grid-template-columns: 380px 1fr; gap: 48px; } @media (max-width: 1023px) { .product-layout { grid-template-columns: 1fr; gap: 24px; } } /* Sticky pack art: drop sticky on mobile so left column doesn't dominate */ @media (max-width: 1023px) { .product-layout .pack-sticky { position: static !important; } } /* Search: filter sidebar (230px) + results → stacked on tablet/mobile */ .search-layout { display: grid; grid-template-columns: 230px 1fr; gap: 32px; } @media (max-width: 1023px) { .search-layout { grid-template-columns: 1fr; gap: 20px; } } /* Filter sidebar: sticky on desktop, static collapsible on mobile */ @media (max-width: 1023px) { .search-layout aside .filters-card { position: static !important; max-height: none !important; } } /* Game picker: 5 tiles on desktop, 2 on phones, 3 on small tablets */ .picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1180px; margin: 0 auto; } @media (max-width: 1023px) { .picker-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (max-width: 559px) { .picker-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* Product card grids: pin to 2-col on phones (auto-fill at 195px shows 1) */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 14px; } @media (max-width: 559px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } @media (max-width: 559px) { .series-grid { grid-template-columns: repeat(2, 1fr); } } .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } @media (max-width: 559px) { .category-grid { grid-template-columns: repeat(2, 1fr); } } /* TCG switcher: dynamic column count desktop, force 2-col on phones */ .tcg-grid { display: grid; gap: 10px; } @media (max-width: 767px) { .tcg-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Featured deal tile: 3-col (image + body + CTA) → stacked on phones */ .featured-tile { display: grid; grid-template-columns: 160px 1fr auto; gap: 28px; align-items: center; } @media (max-width: 767px) { .featured-tile { grid-template-columns: 1fr; gap: 16px; text-align: left; } .featured-tile > :first-child { justify-self: center; } } /* Game banner: image side hides on phone, headline takes full width */ @media (max-width: 767px) { .game-banner { padding: 28px 22px !important; flex-wrap: wrap; } .game-banner .banner-art { display: none !important; } } /* Footer columns: 4 → 2 → 1 */ .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; max-width: 1480px; margin: 0 auto; } @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 479px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } } /* Action row (buy + favorite buttons): drop min-width on mobile, stack full-width */ .action-row { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 767px) { .action-row { flex-direction: column; } .action-row > * { width: 100% !important; min-width: 0 !important; flex: none !important; } } /* Specs grid (product show): N-col on desktop → 2-col on mobile */ .specs-grid { display: grid; } @media (max-width: 559px) { .specs-grid { grid-template-columns: repeat(2, 1fr) !important; } .specs-grid > div { border-right: none !important; } .specs-grid > div:nth-child(odd):not(:last-child) { border-right: 1px solid var(--border) !important; } .specs-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } } /* Tabs row: enable horizontal scroll on overflow */ .tabs-row { display: flex; gap: 4px; border-bottom: 1px solid var(--border); } @media (max-width: 767px) { .tabs-row { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .tabs-row::-webkit-scrollbar { display: none; } .tabs-row [data-tabs-target="tab"] { flex: 0 0 auto; } } /* Retailers row: 5-col desktop table → stack on phones */ .retailer-row { display: grid; grid-template-columns: 60px 1.2fr 1fr 0.8fr 100px; align-items: center; gap: 14px; padding: 14px 16px; } @media (max-width: 767px) { .retailer-row { grid-template-columns: 60px 1fr auto; row-gap: 8px; padding: 12px; } .retailer-row > :nth-child(3) { grid-column: 2 / 4; } .retailer-row > :nth-child(4) { grid-column: 1 / 3; text-align: left !important; } .retailer-row > :nth-child(5) { grid-column: 3 / 4; grid-row: 3 / 4; align-self: end; } } /* Header container: shrink padding and gap on phones */ .header-container { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; max-width: 1480px; margin: 0 auto; padding: 0 32px; } @media (max-width: 767px) { .header-container { padding: 0 14px; gap: 8px; } } /* Region-picker dropdown: full-width sheet on phones instead of 280px floating */ @media (max-width: 559px) { .region-dropdown { position: fixed !important; top: auto !important; bottom: 14px !important; left: 14px !important; right: 14px !important; width: auto !important; } } /* Touch targets: ensure buttons/links are at least 44px tappable on phones, except inside card-tile grids which have their own large hit-area. */ @media (max-width: 767px) { a.btn-primary, a.btn-ghost, button.btn-primary, button.btn-ghost { min-height: 44px; } }