/* ============================================================ STACK — affiliate digital showroom. Shared styles + tokens. Aesthetic: industrial loft — concrete, glass/acrylic slabs, strong type, generous negative space. Apple-page-meets-showroom. Two themes via [data-vibe="light"|"dark"] on . ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Space+Grotesk:wght@400;500;600;700&display=swap"); :root { --accent: #b85c3b; /* warm clay — the "deal" accent */ --accent-deep: #9c482b; --on-accent: #ffffff; --good: #2f7d5b; /* verified / in-stock */ --warn: #c0492f; /* low stock */ --font-display: "Newsreader", Georgia, serif; --font-ui: "Space Grotesk", system-ui, sans-serif; --font-mono: "Space Grotesk", system-ui, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---- LIGHT / CONCRETE LOFT (default) ---- */ html[data-vibe="light"] { --bg: #e7e4de; --bg-2: #ddd9d1; /* floor */ --bg-deep: #d3cec5; --ink: #1b1916; --ink-dim: #6a655c; --ink-faint: #a59f95; --panel: rgba(255, 255, 255, 0.7); --panel-solid: #ffffff; --line: rgba(27, 25, 22, 0.13); --line-strong: rgba(27, 25, 22, 0.28); --glass-bg: linear-gradient(155deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)); --glass-border: rgba(255, 255, 255, 0.9); --glass-hi: rgba(255, 255, 255, 0.85); --slab-shadow: 0 50px 70px -32px rgba(40, 32, 20, 0.42), 0 8px 20px -10px rgba(40, 32, 20, 0.3); --shadow: 0 30px 60px -30px rgba(54, 44, 30, 0.34); color-scheme: light; } /* ---- DARK / NOIR LOFT ---- */ html[data-vibe="dark"] { --bg: #1a1714; --bg-2: #141210; --bg-deep: #0e0c0a; --ink: #f3efe8; --ink-dim: #aaa499; --ink-faint: #6b655c; --panel: rgba(40, 35, 30, 0.6); --panel-solid: #211d19; --line: rgba(243, 239, 232, 0.13); --line-strong: rgba(243, 239, 232, 0.3); --glass-bg: linear-gradient(155deg, rgba(70,63,55,0.5), rgba(40,35,30,0.32)); --glass-border: rgba(255, 255, 255, 0.18); --glass-hi: rgba(255, 255, 255, 0.22); --slab-shadow: 0 56px 80px -34px rgba(0, 0, 0, 0.8), 0 8px 24px -10px rgba(0, 0, 0, 0.6); --shadow: 0 36px 70px -32px rgba(0, 0, 0, 0.7); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font-ui); background: var(--bg); color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--on-accent); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } .display { font-family: var(--font-display); } button { font-family: inherit; cursor: pointer; } a { color: inherit; } .scroll::-webkit-scrollbar { width: 8px; height: 8px; } .scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; } .scroll::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Accessibility: skip-to-content link, visible only when focused */ .skip-link { position: fixed; top: -60px; left: 12px; z-index: 9999; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: top 0.2s var(--ease); } .skip-link:focus { top: 12px; } /* Honor reduced-motion globally */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }