/* ============================================================ KGB — VOL. 2 — "THE STREET BIBLE" EDITION Don Diva magazine-inspired: cream paper, black ink, red. Sections: 1. Design tokens 9. Roster 2. Reset & base 10. Music 3. Buttons 11. Videos 4. 8-bit loader 12. Shows 5. Custom cursor 13. Contact 6. Header / nav 14. Footer 7. Hero (the cover) 15. Reveal animations 8. Marquee / Merch 16. Responsive & reduced motion ============================================================ */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* COLORWAY (2026-09-15): BLACK primary · WHITE secondary · RED accent. --paper is the page ground (black), --ink is type + rules (white), --surface is the card fill, --red the only accent. */ --paper: #0b0b0b; --paper-dark: #171717; --surface: #141414; --surface-2: #1f1f1f; --ink: #ffffff; --ink-dim: #a6a6a6; --red: #d21f2b; --red-dark: #a01722; --crimson: #8e1b2b; --gold: #a08d5f; --line: rgba(255, 255, 255, 0.22); /* web fonts (loaded from Google Fonts in each page's ) come first so every device renders the same look; the old local fonts stay as fallback */ --font-cover: "Anton", "Haettenschweiler", "Arial Narrow", "Impact", "Franklin Gothic Medium", sans-serif; --font-feature: Georgia, "Times New Roman", Times, serif; --font-blackletter: "UnifrakturMaguntia", "Old English Text MT", "Palatino Linotype", Georgia, serif; --font-body: Verdana, Tahoma, "MS Sans Serif", Arial, sans-serif; /* peak-2000s body type */ --font-pixel: "Courier New", Courier, monospace; --bevel: #3d3d3d; /* raised/sunken 3-D border tone */ --shadow-hard: 5px 5px 0 var(--red); /* the hard offset shadow is the accent */ --container: 1200px; --section-pad: clamp(4.5rem, 10vw, 7.5rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- 2. RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* The [hidden] attribute must always win. Layout rules like `.auth-card form { display: grid }` outrank the browser's default `[hidden] { display: none }`, which silently un-hides toggled panels. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scrollbar-color: var(--red) var(--paper-dark); /* firefox */ } /* red 2000s scrollbar (webkit) */ ::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar-track { background: var(--paper-dark); } ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #e8555e, var(--red-dark)); border: 2px outset var(--bevel); } ::-webkit-scrollbar-thumb:hover { background: var(--red-dark); } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 0.94rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* faint newsprint grain + tiled diagonal pinstripes (2000s wallpaper) */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 255, 255, 0.045) 14px 16px); background-size: 5px 5px, auto; opacity: 0.55; } main, .site-header, .site-footer, .marquee { position: relative; z-index: 1; } img, svg { display: block; max-width: 100%; } input, textarea, select { color: inherit; } ::placeholder { color: var(--ink-dim); } a { color: inherit; text-decoration: none; } ul { list-style: none; } .icon { width: 1.2em; height: 1.2em; fill: currentColor; } .container { width: min(var(--container), 92%); margin-inline: auto; } .section { padding-block: var(--section-pad); } .section-label { font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--red); margin-bottom: 0.6rem; } .section-label::before { content: "+ "; font-weight: 700; } .section-title { font-family: var(--font-cover); font-weight: 400; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: clamp(2rem, 5vw, 3rem); /* embossed, WordArt-adjacent */ text-shadow: 1px 1px 0 #000, 3px 3px 0 rgba(255, 255, 255, 0.16); } /* zigzag ornament under every section title, like the cover dividers */ .section-title::after { content: ""; display: block; width: min(340px, 60%); height: 9px; margin-top: 0.9rem; background: linear-gradient(135deg, var(--ink) 25%, transparent 25%) 0 0 / 12px 12px repeat-x, linear-gradient(225deg, var(--ink) 25%, transparent 25%) 0 0 / 12px 12px repeat-x; } /* photo placeholders — newsprint tones */ .img-placeholder { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--paper-dark); } .img-placeholder .ph-icon { width: 3rem; height: 3rem; opacity: 0.3; } .ph-1 { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 55%, #303030 100%); } .ph-2 { background: linear-gradient(160deg, #303030 0%, #1e1e1e 50%, #121212 100%); } .ph-3 { background: linear-gradient(120deg, #262626 0%, #333333 55%, #181818 100%); } .ph-4 { background: linear-gradient(150deg, #1e1e1e 0%, #2c2c2c 60%, #383838 100%); } /* ---------- 3. BUTTONS (2000s glossy bevels) ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.7rem; font-family: var(--font-cover); font-size: 1.02rem; letter-spacing: 0.16em; text-transform: uppercase; border: 3px outset var(--bevel); box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.35); cursor: pointer; transition: filter 0.2s ease, color 0.25s ease; } .btn:hover { filter: brightness(1.08); } .btn:active { border-style: inset; filter: brightness(0.92); } .btn-solid { background: linear-gradient(#e8555e 0%, var(--red) 45%, var(--red-dark) 100%); color: #fff; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } .btn-ghost { background: linear-gradient(#ffffff 0%, #f1f1f1 45%, #cfcfcf 100%); /* white secondary */ color: #000; text-shadow: none; } .btn-ghost:hover { color: var(--red); } .btn-sm { padding: 0.45rem 1rem; font-size: 0.85rem; border-width: 2px; } /* ---------- 4. 8-BIT LOADER ---------- */ .loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 2rem; background: #0e0c0a; transition: transform 0.5s steps(6, end); } .loader.is-done { transform: translateY(-101%); } /* CRT scanlines */ .loader::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 5px); } .loader-logo { width: clamp(230px, 48vw, 430px); height: auto; image-rendering: pixelated; animation: pixelFlicker 1.2s steps(2, end) infinite; } @keyframes pixelFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } } .loader-bar { width: clamp(220px, 40vw, 320px); height: 26px; border: 3px solid #f1ece1; padding: 4px; } .loader-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #d21f2b 0 12px, #8e1b2b 12px 16px); animation: loadFill 2.2s steps(12, end) 0.3s forwards; } @keyframes loadFill { to { width: 100%; } } .loader-text { font-family: var(--font-pixel); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.35em; text-transform: uppercase; color: #f1ece1; animation: blink 1s steps(2, start) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---------- 5. CUSTOM CURSOR ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; } .cursor-dot { width: 8px; height: 8px; background: var(--red); } .cursor-ring { width: 36px; height: 36px; border: 2px solid rgba(255, 255, 255, 0.5); transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); } body.cursor-active .cursor-dot, body.cursor-active .cursor-ring { opacity: 1; } body.cursor-hover .cursor-ring { width: 60px; height: 60px; border-color: var(--red); background: rgba(210, 31, 43, 0.08); } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* ---------- 6. HEADER / NAV ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem clamp(1rem, 4vw, 3rem); background: var(--paper); border-bottom: 3px solid var(--ink); transition: box-shadow 0.35s ease, padding 0.35s ease; opacity: 0; /* fades in after the loader (body.intro-go) */ } body.intro-go .site-header { animation: fadeIn 0.6s ease 0.4s forwards; } .site-header.is-scrolled { box-shadow: 0 4px 0 rgba(255, 255, 255, 0.15); padding-block: 0.55rem; } .brand-logo { height: 44px; width: auto; /* white logo art on the black ground — no inversion needed */ transition: transform 0.3s var(--ease-out); } .brand:hover .brand-logo { transform: scale(1.06); } .main-nav ul { display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.5rem); } .main-nav ul li { display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.5rem); } /* classic pipe-separated nav */ .main-nav ul li:not(:first-child)::before { content: "|"; color: var(--line); font-family: var(--font-body); } .main-nav a { position: relative; font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding-block: 0.3rem; transition: color 0.25s ease; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); } .main-nav a:hover, .main-nav a.is-active { color: var(--red); } .main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left; } .main-nav .nav-cta { background: linear-gradient(#e8555e, var(--red-dark)); color: #fff; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); border: 2px outset var(--bevel); padding: 0.4rem 1rem; box-shadow: 2px 2px 3px rgba(255, 255, 255, 0.3); } .main-nav .nav-cta::after { display: none; } .main-nav .nav-cta:hover { background: var(--ink); color: var(--paper); } .nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: 0; padding: 0.4rem; cursor: pointer; z-index: 110; } .nav-toggle span { width: 26px; height: 3px; background: var(--ink); transition: transform 0.3s var(--ease-out), opacity 0.3s ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ---------- 6a. ACCOUNT DROPDOWN ---------- */ .nav-dropdown { position: relative; } .main-nav .nav-account { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; cursor: pointer; font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding-block: 0.3rem; transition: color 0.25s ease; } .main-nav .nav-account:hover, .nav-dropdown.is-open .nav-account, .main-nav .nav-account.is-active { color: var(--red); } .nav-caret { font-size: 0.7em; transition: transform 0.25s ease; } .nav-dropdown.is-open .nav-caret { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 0.7rem); right: 0; min-width: 200px; display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow-hard); padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 120; } .nav-dropdown.is-open .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu::before { /* little pointer up to the toggle */ content: ""; position: absolute; top: -8px; right: 24px; width: 13px; height: 13px; background: var(--paper); border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); transform: rotate(45deg); pointer-events: none; } .main-nav .nav-dropdown-menu a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); padding: 0.55rem 0.7rem; } .main-nav .nav-dropdown-menu a::after { display: none; } .main-nav .nav-dropdown-menu a:hover { background: var(--ink); color: var(--paper); } .nav-dropdown-menu .cart-badge { position: static; transform: none; } /* ---------- 6b. SUBPAGE BANNER (music.html / merch.html) ---------- */ .page-banner { padding: calc(5.4rem + 3px) 0 2.4rem; /* clears the fixed header */ background: var(--paper-dark); border-bottom: 3px solid var(--ink); } .page-banner .section-title { margin-bottom: 0; } /* ---------- 7. HERO — THE MAGAZINE COVER ---------- */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; border-bottom: 3px solid var(--ink); } .hero-bg { position: absolute; inset: 0; } .hero-bg-grid { position: absolute; inset: -10%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 90px 90px; opacity: 0.18; } .hero-bg-map { position: absolute; left: 50%; top: 50%; width: min(165vmin, 1550px); max-width: none; transform: translate(-50%, -50%); opacity: 0.7; /* strokes are dull red in nyc-map-red.svg */ } .hero-bg-glow { display: none; } .hero-inner { position: relative; z-index: 2; text-align: center; padding-inline: 1rem; } /* masthead: the real KGB logo (white art inverted to ink) */ .hero-title { display: flex; justify-content: center; } .hero-logo { width: min(78vw, 760px); height: auto; filter: drop-shadow(7px 7px 0 rgba(255, 255, 255, 0.12)); opacity: 0; transform: scale(1.2); } body.intro-go .hero-logo { animation: stampIn 0.5s var(--ease-out) 0.45s forwards; } @keyframes stampIn { 0% { opacity: 0; transform: scale(1.25); } 70% { opacity: 1; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } /* the black "street bible" bar under the masthead — Athelas serif (real Athelas on Apple devices; Palatino Linotype elsewhere) */ .hero-tagline { display: inline-flex; justify-content: center; gap: 0.9em; margin-top: 1.2rem; padding: 0.55rem 1.4rem; /* brushed-silver bar, gold lettering */ background: linear-gradient(#fafafa 0%, #d4d4d4 45%, #a8a8a8 85%, #c4c4c4 100%); border: 2px outset #dcdcdc; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); color: #a97e12; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); font-family: "Athelas", "Palatino Linotype", Constantia, Georgia, serif; font-weight: 700; font-size: clamp(1rem, 2.8vw, 1.55rem); letter-spacing: 0.26em; text-transform: uppercase; opacity: 0; } body.intro-go .hero-tagline { animation: fadeIn 0.5s ease 1s forwards; } .hero-tagline .word { opacity: 1; transform: none; } .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.3rem; margin-top: 2.4rem; opacity: 0; } body.intro-go .hero-actions { animation: fadeIn 0.7s ease 1.4s forwards; } /* cover furniture: issue tag, cover lines, barcode */ .cover-issue { position: absolute; z-index: 2; right: clamp(0.4rem, 2vw, 1.6rem); top: 50%; transform: rotate(90deg) translateX(-50%); transform-origin: right top; font-family: var(--font-blackletter); font-size: clamp(1rem, 2.4vw, 1.6rem); white-space: nowrap; color: var(--ink); opacity: 0; } body.intro-go .cover-issue { animation: fadeIn 0.6s ease 1.7s forwards; } .cover-lines { position: absolute; z-index: 2; left: clamp(1rem, 4vw, 3.5rem); top: 50%; transform: translateY(-50%); text-align: left; opacity: 0; } body.intro-go .cover-lines { animation: fadeIn 0.6s ease 1.6s forwards; } .cover-line { font-family: var(--font-cover); font-size: clamp(1rem, 2.1vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; } .cover-line span { color: var(--red); margin-right: 0.35rem; } .cover-line-feature { margin-top: 0.8rem; font-family: var(--font-feature); font-weight: 700; font-style: italic; font-size: clamp(1rem, 2vw, 1.4rem); text-transform: none; letter-spacing: 0; color: var(--crimson); } .cover-barcode { position: absolute; z-index: 2; left: clamp(1rem, 4vw, 3.5rem); bottom: 1.6rem; display: flex; align-items: center; gap: 0.8rem; opacity: 0; } body.intro-go .cover-barcode { animation: fadeIn 0.6s ease 1.8s forwards; } .cover-barcode .bars { display: block; width: 92px; height: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px); } .cover-barcode em { font-style: normal; font-family: var(--font-pixel); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); } .scroll-hint { position: absolute; bottom: 1.7rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--font-cover); font-size: 0.85rem; letter-spacing: 0.4em; color: var(--ink-dim); opacity: 0; } body.intro-go .scroll-hint { animation: fadeIn 1s ease 2s forwards; } .scroll-hint-line { width: 2px; height: 44px; background: linear-gradient(var(--red), transparent); animation: scrollLine 1.8s ease-in-out infinite; transform-origin: top; } @keyframes scrollLine { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- 8. MARQUEE & MERCH ---------- */ .marquee { overflow: hidden; background: linear-gradient(#e8555e 0%, var(--red) 40%, var(--red-dark) 100%); color: #f6cf5c; /* gold lettering */ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45); border-block: 3px solid var(--ink); padding-block: 0.9rem; } .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; font-family: var(--font-cover); font-size: clamp(1.3rem, 3.2vw, 2rem); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .marquee-group .icon { color: #fff; width: 0.8em; height: 0.8em; flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } .merch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 2.5vw, 2.2rem); } .merch-card { display: block; background: var(--paper); border: 4px ridge var(--bevel); box-shadow: var(--shadow-hard); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .merch-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); } .merch-photo { aspect-ratio: 1; width: 100%; object-fit: cover; border-bottom: 3px solid var(--ink); } .merch-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 0.9rem; } .merch-name { font-family: var(--font-cover); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; } .merch-price { font-family: var(--font-cover); font-size: 1.05rem; color: var(--red); white-space: nowrap; } .merch-cta { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; } /* ---------- 10. MUSIC ---------- */ .music-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); } .release-card { cursor: pointer; } .release-cover { position: relative; overflow: hidden; background: var(--paper-dark); border: 4px ridge var(--bevel); box-shadow: var(--shadow-hard); aspect-ratio: 1; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .release-card:hover .release-cover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); } .release-cover img { width: 100%; height: 100%; object-fit: cover; } .release-badge { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--red); color: #fff; border: 2px outset var(--bevel); font-family: var(--font-cover); font-size: 0.85rem; letter-spacing: 0.2em; padding: 0.25rem 0.65rem; animation: blink 1.1s steps(2, start) infinite; /* obligatory blinking NEW! */ } .release-meta { padding-top: 1rem; } .release-title { font-family: var(--font-cover); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; } .release-sub { font-family: var(--font-feature); font-style: italic; font-size: 0.95rem; color: var(--ink-dim); margin-top: 0.2rem; } /* a release that's for sale: price + Add To Cart right on the card */ .release-card.has-buy { cursor: default; } .release-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 2px solid var(--line); } .release-price { font-family: var(--font-cover); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--red); } .release-add.is-added { background: var(--ink); color: var(--paper); text-shadow: none; } .release-more { font-family: var(--font-pixel); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .release-more:hover { color: var(--red); } .stream-row { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 3px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; } .stream-label { font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.35em; color: var(--ink-dim); } .stream-links { display: flex; flex-wrap: wrap; gap: 1rem; } .stream-link { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1.1rem; border: 2px outset var(--bevel); background: linear-gradient(#3a3a3a, #1e1e1e); box-shadow: 2px 2px 3px rgba(255, 255, 255, 0.3); font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), color 0.25s ease; } .stream-link:hover { color: var(--red); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } /* ---------- 12. SHOWS ---------- */ .shows-list { border-top: 3px solid var(--ink); } .show-row { display: grid; grid-template-columns: 140px 1.2fr 1.5fr auto; align-items: center; gap: 1.4rem; padding: 1.4rem 0.4rem; border-bottom: 2px solid var(--line); transition: background 0.3s ease, padding-left 0.3s var(--ease-out); } .show-row:hover { background: var(--paper-dark); padding-left: 1.2rem; } .show-date { font-family: var(--font-feature); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--crimson); display: flex; flex-direction: column; } .show-date em { font-family: var(--font-cover); font-style: normal; font-size: 0.8rem; letter-spacing: 0.28em; color: var(--ink-dim); margin-top: 0.3rem; } .show-city { font-family: var(--font-cover); font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; } .show-venue { font-style: italic; color: var(--ink-dim); } .show-status { font-family: var(--font-cover); font-size: 0.85rem; letter-spacing: 0.25em; color: var(--paper); background: var(--ink); padding: 0.5rem 1.1rem; } .show-row-soldout .show-date, .show-row-soldout .show-city { opacity: 0.45; } .show-row-soldout .show-venue { opacity: 0.35; } /* ---------- 13. CONTACT ---------- */ .contact { background: var(--paper-dark); border-block: 3px solid var(--ink); } .contact-grid { display: grid; /* left = email + message form, right = about blurb + DIVA box */ grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .contact-info .contact-form { margin-top: 2.4rem; } .about-side .about-blurb { margin-bottom: 1.6rem; } .about-side .diva-box { margin-bottom: 0; max-width: none; } .contact-lead { font-style: italic; color: var(--ink-dim); margin-bottom: 1rem; } .contact-email { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-feature); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.8rem); color: var(--red); transition: color 0.3s ease; } .contact-email:hover { color: var(--red); } .contact-email .icon { color: var(--red); } .social-row { display: flex; gap: 0.9rem; margin-top: 2.2rem; } .social-link { display: grid; place-items: center; width: 48px; height: 48px; border: 2px outset var(--bevel); background: linear-gradient(#3a3a3a, #1e1e1e); box-shadow: 2px 2px 3px rgba(255, 255, 255, 0.3); color: var(--ink); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), color 0.25s ease; } .social-link:hover { color: var(--red); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } .contact-form { display: grid; gap: 1.2rem; } .form-field { display: grid; gap: 0.45rem; } .form-field label { font-family: var(--font-cover); font-size: 0.9rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-dim); } .form-field input, .form-field textarea { background: var(--surface); border: 3px inset var(--bevel); /* classic sunken field */ color: var(--ink); font-family: var(--font-body); font-size: 0.94rem; padding: 0.8rem 1rem; resize: vertical; transition: box-shadow 0.25s ease; } .form-field input:focus, .form-field textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--red); } .contact-form .btn { justify-self: start; } .form-success { color: var(--red); font-weight: 700; } /* ---------- 14. FOOTER (black closing bar) ---------- */ .site-footer { /* the white closing band */ background: var(--ink); color: var(--paper); padding-block: 2.6rem; border-top: 3px solid var(--red); } .site-footer .footer-logo { filter: invert(1); } /* white logo art → black on the white band */ .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; } .footer-brand { display: flex; align-items: center; gap: 1rem; } .footer-logo { height: 52px; width: auto; } .footer-brand p { font-family: var(--font-cover); font-size: 0.85rem; letter-spacing: 0.35em; color: rgba(11, 11, 11, 0.7); } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; } .footer-nav a { font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(11, 11, 11, 0.7); transition: color 0.25s ease; } .footer-nav a:hover { color: var(--red); } .footer-copy { font-size: 0.85rem; font-style: italic; color: rgba(11, 11, 11, 0.6); } .footer-credit { font-style: normal; font-family: var(--font-pixel); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } .footer-credit a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; } .footer-credit a:hover { color: var(--paper); } /* 2000s webmaster chrome: hit counter + best-viewed line */ .footer-retro { flex-basis: 100%; display: grid; gap: 0.55rem; justify-items: center; text-align: center; border-top: 1px solid rgba(11, 11, 11, 0.2); padding-top: 1.3rem; } .visitor-counter { font-family: var(--font-pixel); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(11, 11, 11, 0.8); } .counter-digits { display: inline-block; margin-left: 0.45rem; padding: 0.15rem 0.5rem; background: #000; color: #ff2d3c; border: 2px inset var(--bevel); letter-spacing: 0.35em; } .best-viewed { font-size: 0.7rem; color: rgba(11, 11, 11, 0.5); } /* ---------- 15. REVEAL ANIMATIONS (driven by js/main.js) ---------- */ @keyframes fadeIn { to { opacity: 1; } } .reveal { opacity: 0; transform: translateY(2.2rem); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .stagger > * { opacity: 0; transform: translateY(2.2rem); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .stagger.is-visible > * { opacity: 1; transform: translateY(0); } .stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; } .stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; } .stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; } .stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; } .stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; } .stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; } /* ---------- 15b. NEXTEL FLIP PHONE (streaming menu) ---------- Opens from a .release-card click; js/main.js section 13. The lid starts folded down over the base (rotateX(-180)) and flips open when .phone gets .is-open. */ .phone-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(14, 12, 10, 0.7); perspective: 1300px; /* lets the whole phone tilt in 3D */ } .phone-overlay[hidden] { display: none; } .phone { width: min(300px, 90vw); perspective: 1100px; /* subtle pointer-follow tilt — js/main.js sets --tilt-x / --tilt-y */ transform: scale(var(--phone-scale, 1)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.18s ease-out; will-change: transform; } @media (max-height: 780px) { .phone { --phone-scale: 0.82; } } /* ---- the lid (flips) ---- */ .phone-lid { position: relative; transform-style: preserve-3d; transform-origin: 50% calc(100% + 9px); /* the hinge */ transform: rotateX(-179deg); transition: transform 0.75s cubic-bezier(0.36, 1.25, 0.5, 1); } .phone.is-open .phone-lid { transform: rotateX(0deg); } .lid-inner, .lid-outer { backface-visibility: hidden; border-radius: 24px 24px 12px 12px; background: linear-gradient(170deg, #34322f 0%, #1c1a18 40%, #121110 100%); border: 2px solid #000; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.18); } .lid-inner { position: relative; padding: 0.7rem 0.85rem 0.55rem; } .lid-outer { position: absolute; inset: 0; transform: rotateX(180deg); display: grid; place-content: center; gap: 0.9rem; justify-items: center; } .lid-mesh { height: 20px; margin: 0 2.2rem 0.4rem; border-radius: 0 0 10px 10px; background: radial-gradient(circle, #000 34%, transparent 36%) 0 0 / 5px 5px #262421; border: 1px solid #000; } .lid-brand { text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.55em; color: #cfcac2; padding-bottom: 0.45rem; } .lid-model { text-align: right; font-family: var(--font-feature); font-style: italic; font-size: 0.72rem; color: #8d867c; padding-top: 0.35rem; } /* outer shell details (visible while closed) */ .lid-cam { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #4a5a6a, #0a0d11 65%); border: 3px solid #3c3a37; } .lid-mini { display: grid; justify-items: center; gap: 0.15rem; width: 110px; padding: 0.5rem 0.6rem; border: 3px inset #3a3a3a; background: linear-gradient(#8fb4e8, #3c66b8); font-family: var(--font-pixel); font-weight: 700; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0 rgba(10, 20, 60, 0.6); } .lid-mini-brand { font-size: 0.85rem; letter-spacing: 0.3em; } .lid-mini-status { font-size: 0.62rem; letter-spacing: 0.18em; } /* ---- color LCD (Nextel blue) ---- */ .phone-lcd { border: 3px inset #3a3a3a; padding: 0.45rem 0.55rem; font-family: var(--font-pixel); font-weight: 700; color: #f2f7ff; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(10, 20, 60, 0.55); background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22) 0%, transparent 45%), radial-gradient(circle, rgba(255, 255, 255, 0.07) 30%, transparent 32%) 0 0 / 9px 9px, linear-gradient(#7fb0ef 0%, #3c66b8 55%, #2b4b96 100%); } .lcd-status { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid rgba(240, 247, 255, 0.85); padding-bottom: 0.3rem; } .lcd-signal { display: inline-flex; align-items: flex-end; gap: 2px; } .lcd-signal i { width: 4px; background: #46f06e; border: 1px solid rgba(10, 40, 15, 0.5); } .lcd-signal i:nth-child(1) { height: 5px; } .lcd-signal i:nth-child(2) { height: 8px; } .lcd-signal i:nth-child(3) { height: 11px; } .lcd-signal i:nth-child(4) { height: 14px; } .lcd-batt { width: 20px; height: 10px; background: #46f06e; border: 1px solid rgba(10, 40, 15, 0.6); position: relative; } .lcd-batt::after { content: ""; position: absolute; right: -4px; top: 2px; width: 3px; height: 4px; background: #46f06e; } .lcd-title { font-size: 0.74rem; letter-spacing: 0.06em; line-height: 1.3; padding: 0.45rem 0 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lcd-menu { padding-block: 0.3rem; } .lcd-menu li a { display: block; padding: 0.3rem 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; color: inherit; cursor: pointer; } .lcd-menu li a::before { content: " "; white-space: pre; } .lcd-menu li.is-selected a { background: rgba(9, 22, 66, 0.85); color: #fff; } .lcd-menu li.is-selected a::before { content: "> "; } .lcd-soft { display: flex; justify-content: space-between; font-size: 0.58rem; letter-spacing: 0.14em; background: rgba(9, 22, 66, 0.75); margin: 0.3rem -0.55rem -0.45rem; padding: 0.3rem 0.6rem; } /* ---- hinge ---- */ .phone-hinge { height: 13px; margin: 2px 16px; border-radius: 7px; background: linear-gradient(#4a4845 0%, #171514 60%, #232120 100%); border: 1px solid #000; } /* ---- the base: d-pad, call keys, rugged keypad ---- */ .phone-base { border-radius: 12px 12px 26px 26px; background: linear-gradient(175deg, #2d2b28 0%, #1a1816 45%, #100f0e 100%); border: 2px solid #000; box-shadow: 8px 10px 0 rgba(255, 255, 255, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.15); padding: 0.85rem 0.9rem 1.1rem; } .phone-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.4rem; padding-bottom: 0.7rem; } .key-call, .key-end { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 14px; border: 2px outset #454545; font-family: var(--font-pixel); font-weight: 700; cursor: pointer; transition: filter 0.15s ease; } .key-call { justify-self: start; background: linear-gradient(#6cc94c, #2f7a1a); color: #0c2a04; } .key-end { justify-self: end; background: linear-gradient(#e8555e, var(--red-dark)); color: #fff; } .key-call:hover, .key-end:hover { filter: brightness(1.12); } .key-call:active, .key-end:active { border-style: inset; } .key-call .icon { width: 0.9rem; height: 0.9rem; } .dpad { display: grid; grid-template-areas: ". up ." "left ok right" ". down ."; place-items: center; /* keep arrows centered on the OK axis */ gap: 2px; padding: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #3b3936, #141312 70%); border: 2px solid #000; } .dpad-btn { width: 30px; height: 26px; display: grid; place-items: center; padding: 0; line-height: 1; background: none; border: 0; color: #b9b3aa; font-size: 0.62rem; cursor: pointer; } .dpad-btn:hover { color: #fff; } .dpad-btn:active { transform: translateY(1px); } .dpad-up { grid-area: up; } .dpad-down { grid-area: down; } .dpad-left { grid-area: left; } .dpad-right { grid-area: right; } .dpad-ok { grid-area: ok; width: 40px; height: 40px; border-radius: 50%; border: 3px outset #6a6862; background: radial-gradient(circle at 38% 30%, #55524d, #21201d 75%); color: #e9e4dc; font-family: var(--font-pixel); font-weight: 700; font-size: 0.7rem; cursor: pointer; } .dpad-ok:hover { color: #fff; filter: brightness(1.15); } .dpad-ok:active { border-style: inset; } .phone-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .phone-keypad span { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; height: 31px; border-radius: 8px; border-top: 1px solid #4d4b47; border-bottom: 1px solid #000; background: linear-gradient(#31302d, #131211); font-family: var(--font-pixel); } .phone-keypad b { font-size: 0.85rem; color: #f0ece4; } .phone-keypad small { font-size: 0.52rem; letter-spacing: 0.08em; color: #8d867c; text-transform: uppercase; } /* ---------- 15c. SHOP: cart badge, product page, cart page ---------- */ .cart-badge { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; margin-left: 0.35em; padding: 0 0.25em; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-pixel); font-size: 0.68em; vertical-align: middle; } .merch-photo-wrap { position: relative; } /* product page */ .product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .product-photo .product-img, .product-photo .img-placeholder { aspect-ratio: 1; width: 100%; object-fit: cover; border: 4px ridge var(--bevel); box-shadow: var(--shadow-hard); } .product-price { font-family: var(--font-cover); font-size: 2rem; color: var(--red); margin-bottom: 0.8rem; } .product-desc { max-width: 46ch; margin-bottom: 1.6rem; } .product-field-label { font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.5rem; } .product-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; } .size-btn { padding: 0.5rem 1rem; border: 2px outset var(--bevel); background: linear-gradient(#3a3a3a, #1e1e1e); font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.08em; cursor: pointer; } .size-btn:active { border-style: inset; } .size-btn.is-picked { border-style: inset; background: var(--ink); color: var(--paper); } .product-qty { display: inline-flex; align-items: center; gap: 0; border: 2px inset var(--bevel); background: var(--surface); margin-bottom: 1.6rem; } .product-qty button { width: 40px; height: 40px; border: 0; background: linear-gradient(#3a3a3a, #1e1e1e); font-family: var(--font-pixel); font-weight: 700; font-size: 1.1rem; cursor: pointer; } .product-qty button:active { filter: brightness(0.9); } .product-qty span { min-width: 52px; text-align: center; font-family: var(--font-pixel); font-weight: 700; } .product-info .btn { display: inline-flex; } .product-added { margin-top: 0.9rem; color: var(--red); font-weight: 700; } .product-added a { text-decoration: underline; } .product-back { display: block; margin-top: 2rem; font-family: var(--font-cover); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.25s ease; } .product-back:hover { color: var(--red); } /* cart page */ .cart-row { display: grid; grid-template-columns: 84px 1fr auto auto auto; align-items: center; gap: clamp(0.8rem, 2.5vw, 1.6rem); padding: 1rem 0; border-bottom: 2px solid var(--line); } .cart-thumb .cart-img, .cart-thumb .img-placeholder { width: 84px; height: 84px; object-fit: cover; border: 2px solid var(--ink); } .cart-thumb .img-placeholder .ph-icon { width: 1.6rem; height: 1.6rem; } .cart-line-info { display: grid; gap: 0.2rem; } .cart-line-name { font-family: var(--font-cover); font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; } .cart-line-name:hover { color: var(--red); } .cart-line-size { font-size: 0.8rem; color: var(--ink-dim); } .cart-qty { display: inline-flex; align-items: center; border: 2px inset var(--bevel); background: var(--surface); } .cart-qty button { width: 30px; height: 30px; border: 0; background: linear-gradient(#3a3a3a, #1e1e1e); font-family: var(--font-pixel); font-weight: 700; cursor: pointer; } .cart-qty span { min-width: 38px; text-align: center; font-family: var(--font-pixel); font-weight: 700; } .cart-line-total { font-family: var(--font-cover); font-size: 1.15rem; color: var(--red); white-space: nowrap; } .cart-remove { width: 30px; height: 30px; border: 2px outset var(--bevel); background: linear-gradient(#e8555e, var(--red-dark)); color: #fff; font-weight: 700; cursor: pointer; } .cart-remove:active { border-style: inset; } .cart-summary { display: grid; justify-items: end; gap: 0.9rem; padding-top: 1.6rem; } .cart-subtotal { font-family: var(--font-cover); font-size: 1.4rem; letter-spacing: 0.08em; text-transform: uppercase; } .cart-subtotal strong { color: var(--red); margin-left: 0.6rem; } .cart-note { font-size: 0.8rem; font-style: italic; color: var(--ink-dim); } .cart-empty { display: grid; justify-items: center; gap: 1.4rem; padding: 3rem 0; text-align: center; font-style: italic; color: var(--ink-dim); } /* ---------- 15d. ACCOUNT / AUTH ---------- */ .auth-wrap { display: grid; justify-items: center; } .auth-card { width: min(440px, 100%); background: var(--paper); border: 4px ridge var(--bevel); box-shadow: var(--shadow-hard); padding: clamp(1.4rem, 4vw, 2.2rem); display: grid; gap: 1.2rem; text-align: center; } .auth-card form { display: grid; gap: 1.1rem; text-align: left; } .auth-card .btn { justify-self: center; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); } .auth-tab { padding: 0.7rem 0.5rem; border: 0; background: var(--paper-dark); font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; } .auth-tab.is-on { background: var(--ink); color: var(--paper); } .auth-error { color: var(--red); font-weight: 700; font-size: 0.85rem; } .auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.8rem; color: var(--ink-dim); font-family: var(--font-cover); letter-spacing: 0.3em; font-size: 0.85rem; } .auth-divider::before, .auth-divider::after { content: ""; height: 2px; background: var(--line); } .google-slot { display: grid; justify-items: center; gap: 0.6rem; } .auth-note { font-size: 0.78rem; font-style: italic; color: var(--ink-dim); } /* signed-in card */ .me-pic { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--ink); justify-self: center; object-fit: cover; } .me-name { font-family: var(--font-cover); font-weight: 400; font-size: 2rem; letter-spacing: 0.04em; text-transform: uppercase; } .me-email { color: var(--ink-dim); } .me-provider { font-size: 0.8rem; font-style: italic; color: var(--ink-dim); } .me-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 0.4rem; } /* account tabs (My Account / Orders) */ .account-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; border-bottom: 3px solid var(--ink); } .account-tab { font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.55rem 1.1rem; background: var(--paper-dark); color: var(--ink-dim); border: 3px solid var(--ink); border-bottom: none; cursor: pointer; margin-bottom: -3px; } .account-tab.is-on { background: var(--red); color: #fff; } /* orders list */ .orders-empty { text-align: center; padding: 1.5rem 0; } .orders-empty p { margin-bottom: 1rem; color: var(--ink-dim); } .order-card { text-align: left; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; } .order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: 0.6rem; margin-bottom: 0.6rem; } .order-no { display: block; font-family: var(--font-pixel); font-weight: 700; letter-spacing: 0.06em; } .order-date { font-size: 0.8rem; color: var(--ink-dim); } .order-total { font-family: var(--font-cover); font-size: 1.3rem; } .order-items { list-style: none; margin: 0 0 0.5rem; padding: 0; } .order-items li { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.9rem; padding: 0.2rem 0; } .order-items em { font-style: normal; color: var(--ink-dim); } .order-code { font-size: 0.85rem; color: var(--red); margin-bottom: 0.6rem; } .order-track-toggle { margin-top: 0.2rem; } /* package tracking timeline */ .order-track { margin-top: 0.9rem; } .track-box { border: 3px dashed var(--ink); background: var(--paper-dark); padding: 1rem; } .track-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; } .track-status { font-family: var(--font-cover); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--red); } .track-eta { font-size: 0.82rem; color: var(--ink-dim); } .track-line { list-style: none; margin: 0.9rem 0 0.6rem; padding: 0; position: relative; } .track-line::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--line); } .track-step { display: flex; align-items: center; gap: 0.7rem; padding: 0.32rem 0; position: relative; } .track-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); flex-shrink: 0; z-index: 1; } .track-step.done .track-dot, .track-step.current .track-dot { background: var(--red); } .track-step.current .track-dot { box-shadow: 0 0 0 3px rgba(210, 31, 43, 0.3); } .track-label { font-size: 0.9rem; } .track-step.current .track-label { font-weight: 700; color: var(--red); } .track-step:not(.done):not(.current) .track-label { color: var(--ink-dim); } .track-meta { font-size: 0.82rem; margin-top: 0.4rem; } .track-meta strong { font-family: var(--font-pixel); letter-spacing: 0.04em; } /* ---------- 15e. ADMIN PANEL ---------- */ .admin-wrap { display: grid; gap: clamp(2rem, 5vw, 3rem); } .admin-note { border: 3px solid var(--ink); background: var(--paper-dark); box-shadow: var(--shadow-hard); padding: 1rem 1.2rem; font-size: 0.92rem; } .admin-note code { font-family: var(--font-pixel); font-weight: 700; } .admin-block { border: 4px ridge var(--bevel); background: var(--paper); box-shadow: var(--shadow-hard); padding: clamp(1.2rem, 3vw, 1.8rem); } .admin-heading { font-family: var(--font-cover); font-weight: 400; font-size: 2rem; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 3px solid var(--ink); padding-bottom: 0.5rem; margin-bottom: 1rem; } .admin-subheading { font-family: var(--font-cover); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.9rem; } .admin-list { display: grid; gap: 0; margin-bottom: 1.6rem; } .admin-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: 0.6rem 0.2rem; border-bottom: 2px solid var(--line); } .admin-row-name { font-family: var(--font-cover); font-size: 1.1rem; letter-spacing: 0.05em; text-transform: uppercase; } .admin-row-sub { font-size: 0.85rem; color: var(--ink-dim); white-space: nowrap; } .admin-form { display: grid; gap: 1rem; } .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; } .admin-wide { grid-column: 1 / -1; } .admin-check label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); cursor: pointer; } .admin-check input { width: 18px; height: 18px; accent-color: var(--red); } .admin-form .btn { justify-self: start; } .admin-publish .auth-note { margin-top: 0.8rem; } @media (max-width: 700px) { .admin-grid { grid-template-columns: 1fr; } } /* ---------- 16. RESPONSIVE & REDUCED MOTION ---------- */ @media (max-width: 1150px) { .cover-lines, .cover-issue { display: none; } } @media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; } .merch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav-toggle { display: flex; } .main-nav { position: fixed; inset: 0; z-index: 105; display: grid; place-content: center; background: rgba(11, 11, 11, 0.98); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .main-nav.is-open { opacity: 1; visibility: visible; } .main-nav ul { flex-direction: column; gap: 1.6rem; text-align: center; } .main-nav a { font-size: 1.5rem; letter-spacing: 0.3em; } .main-nav ul li { opacity: 0; transform: translateY(1rem); transition: opacity 0.4s ease, transform 0.4s var(--ease-out); } .main-nav ul li:not(:first-child)::before { display: none; } .main-nav.is-open ul li { opacity: 1; transform: translateY(0); } .main-nav.is-open ul li:nth-child(1) { transition-delay: 0.08s; } .main-nav.is-open ul li:nth-child(2) { transition-delay: 0.14s; } .main-nav.is-open ul li:nth-child(3) { transition-delay: 0.20s; } .main-nav.is-open ul li:nth-child(4) { transition-delay: 0.26s; } .main-nav.is-open ul li:nth-child(5) { transition-delay: 0.32s; } .main-nav.is-open ul li:nth-child(6) { transition-delay: 0.38s; } .main-nav.is-open ul li:nth-child(7) { transition-delay: 0.44s; } /* account dropdown becomes an inline accordion inside the mobile menu */ .main-nav .nav-account { font-size: 1.5rem; letter-spacing: 0.3em; } .nav-dropdown { flex-direction: column; gap: 0; } .nav-dropdown-menu { position: static; border: none; background: none; box-shadow: none; padding: 0; min-width: 0; transform: none; opacity: 1; visibility: hidden; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .nav-dropdown.is-open .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { visibility: visible; max-height: 240px; margin-top: 1.2rem; } .nav-dropdown-menu::before { display: none; } .main-nav .nav-dropdown-menu a { justify-content: center; font-size: 1.15rem; letter-spacing: 0.2em; } .music-grid { grid-template-columns: 1fr; } .cover-barcode { display: none; } .product-layout { grid-template-columns: 1fr; } .cart-row { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb info remove" "thumb qty total"; row-gap: 0.5rem; } .cart-thumb { grid-area: thumb; } .cart-thumb .cart-img, .cart-thumb .img-placeholder { width: 64px; height: 64px; } .cart-line-info { grid-area: info; } .cart-qty { grid-area: qty; justify-self: start; } .cart-line-total { grid-area: total; justify-self: end; } .cart-remove { grid-area: remove; justify-self: end; } /* CRT: TV on top, arrows underneath */ .show-row { grid-template-columns: 90px 1fr auto; grid-template-areas: "date city tickets" "date venue tickets"; row-gap: 0.2rem; } .show-date { grid-area: date; font-size: 1.3rem; } .show-city { grid-area: city; } .show-venue { grid-area: venue; font-size: 0.85rem; } .show-row .btn, .show-status { grid-area: tickets; } } @media (max-width: 480px) { .merch-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .stagger > *, .hero-logo, .hero-tagline, .hero-actions, .scroll-hint, .cover-issue, .cover-lines, .cover-barcode, .site-header { opacity: 1; transform: none; } .cover-issue { transform: rotate(90deg) translateX(-50%); } .marquee-track { animation: none; } .cursor-dot, .cursor-ring { display: none; } .loader { display: none; } } /* ---------- 17. STORE-FIRST HOME: teaser strips ---------- */ .arcade-teaser, .dvd-teaser { padding-block: calc(var(--section-pad) * 0.45); } .teaser-strip { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 1.6rem 2rem; } .teaser-strip .section-label { margin-bottom: 0.2rem; } .teaser-title { font-family: var(--font-cover); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; text-transform: uppercase; margin-bottom: 0.35rem; } .teaser-copy p:last-child { max-width: 46ch; } .teaser-dark { background: var(--ink); color: var(--paper); } .teaser-dark .teaser-title { color: var(--paper); } /* the button matches the hero's "Watch KGB DVD" — default ghost look (cream fill, black letters), no dark-teaser override */ .about-blurb { max-width: 62ch; margin-bottom: 2rem; } /* ---------- 17b. KGB DIVA newsletter ---------- */ .diva-box { border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: linear-gradient(180deg, var(--surface-2), var(--paper-dark)); padding: 1.6rem 1.8rem; margin-bottom: 3rem; max-width: 640px; } .diva-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.3rem; } .diva-mast { font-family: var(--font-cover); font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: 0.02em; line-height: 1; } .diva-mast em { font-style: normal; color: var(--red); } .diva-sub { margin-bottom: 1rem; color: var(--ink-dim); } .diva-row { display: flex; gap: 0.7rem; flex-wrap: wrap; } .diva-row input { flex: 1 1 220px; font: inherit; padding: 0.7rem 0.9rem; border: 3px solid var(--ink); background: var(--surface); color: var(--ink); } .diva-row input:focus { outline: 3px double var(--red); outline-offset: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } /* ---------- 17c. SHOP filter chips ---------- */ .merch-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; } .filter-chip { font-family: var(--font-cover); font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 1rem; background: var(--paper-dark); color: var(--ink); border: 3px solid var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.12s, box-shadow 0.12s; } .filter-chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); } .filter-chip.is-on { background: var(--red); color: #fff; } /* ---------- 17d. CHECKOUT ---------- */ .checkout-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; } .checkout-form, .checkout-summary { border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 1.8rem; } .checkout-form .btn { margin-top: 1.4rem; } .checkout-summary .sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--line); } .checkout-summary .sum-row em { font-style: normal; color: var(--ink-dim); font-size: 0.85em; } .sum-off { color: var(--red); } .sum-total { border-bottom: none; border-top: 3px solid var(--ink); margin-top: 0.4rem; font-family: var(--font-cover); font-size: 1.35rem; letter-spacing: 0.05em; } .sum-discount { padding: 1rem 0; border-bottom: 1px dashed var(--line); } .sum-discount label { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; } .sum-discount-row { display: flex; gap: 0.6rem; } .sum-discount-row input { flex: 1; min-width: 0; font: inherit; text-transform: uppercase; padding: 0.55rem 0.7rem; border: 3px solid var(--ink); background: var(--paper); } .sum-code-ok { color: #1c7a2d; font-size: 0.85rem; margin-top: 0.5rem; } .sum-discount .cart-note { margin-top: 0.5rem; } .done-card { max-width: 620px; margin-inline: auto; text-align: center; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 2.5rem 2rem; } .done-stamp { display: inline-block; font-family: var(--font-cover); font-size: 1.3rem; letter-spacing: 0.2em; color: var(--red); border: 3px double var(--red); padding: 0.3rem 1rem; transform: rotate(-4deg); margin-bottom: 1.2rem; } .done-no { font-family: var(--font-pixel); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; margin: 0.4rem 0 0.8rem; } .done-card .me-actions { justify-content: center; margin-top: 1.6rem; } /* ---------- 17e. KGB ARCADE (games) ---------- */ .games-intro { max-width: 60ch; margin-bottom: 2.5rem; } .games-intro a { color: var(--red); text-decoration: underline; } .games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: start; } .game-card { border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 1.6rem; text-align: center; } .game-title { font-family: var(--font-cover); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.06em; } .game-sub { color: var(--ink-dim); font-size: 0.85rem; margin-bottom: 1.2rem; } .game-msg { min-height: 1.4em; margin-top: 0.9rem; font-weight: 700; } .game-prize { margin-top: 1rem; border: 3px dashed var(--red); background: var(--paper); padding: 1rem; } .prize-label { font-family: var(--font-cover); letter-spacing: 0.18em; color: var(--red); } .prize-code { font-family: var(--font-pixel); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.08em; margin: 0.4rem 0 0.8rem; user-select: all; } /* ---------- FLAPPY KGB — retro arcade cabinet ---------- */ .arcade-cabinet { position: relative; max-width: 480px; margin: 0 auto; padding: 1.2rem 2.3rem 0; /* wide side gutters expose the rainbow stripes */ border: 4px solid var(--ink); border-radius: 34px 34px 12px 12px; background: linear-gradient(180deg, #fdf9f0 0%, #efe6d2 55%, #e3d8bf 100%); box-shadow: 0 20px 44px rgba(255, 255, 255, 0.42), 0 0 64px rgba(242, 140, 28, 0.22); } /* warm underglow spilling from the base (ref image 1) */ .arcade-cabinet::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -10px; height: 26px; background: radial-gradient(ellipse at center, rgba(245, 150, 30, 0.9), rgba(245, 150, 30, 0) 70%); filter: blur(5px); z-index: 0; pointer-events: none; } /* retro rainbow side stripes, anchored to the lower cabinet */ .arcade-stripes { position: absolute; top: 120px; bottom: 10px; width: 18px; z-index: 0; background: linear-gradient(180deg, #e5342b 0 25%, #f28c1c 25% 50%, #f6c41a 50% 75%, #2f9fd0 75% 100%); border: 2px solid var(--ink); border-radius: 3px; } .arcade-stripes-left { left: 12px; } .arcade-stripes-right { right: 12px; } /* lit marquee */ .arcade-marquee { position: relative; z-index: 2; border: 3px solid var(--ink); border-radius: 8px; padding: 0.55rem 1rem 0.6rem; margin-bottom: 1rem; background: linear-gradient(180deg, #ffffff, #f2ead6); box-shadow: inset 0 0 0 2px #fff, 0 0 20px rgba(255, 244, 214, 0.7); text-align: center; } .arcade-marquee-text { font-family: var(--font-cover); font-size: clamp(1.7rem, 5.5vw, 2.4rem); letter-spacing: 0.14em; color: var(--red); text-shadow: 1px 1px 0 var(--ink); } .arcade-marquee::after { /* rainbow underline ties marquee to the stripes */ content: ""; display: block; height: 5px; width: 82%; margin: 0.4rem auto 0; background: linear-gradient(90deg, #e5342b 0 25%, #f28c1c 25% 50%, #f6c41a 50% 75%, #2f9fd0 75% 100%); } /* screen — black bezel with a warm orange glow (ref image 1) */ .arcade-screen { position: relative; z-index: 2; padding: 0.55rem; border-radius: 12px; background: linear-gradient(180deg, #24211d, #050505); border: 3px solid var(--ink); box-shadow: 0 0 36px rgba(245, 150, 30, 0.55); } .arcade-bezel { padding: 12px; border-radius: 8px; background: #000; box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.9), inset 0 0 0 2px #222; } #flappyCanvas { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 4px; background: var(--paper); cursor: pointer; touch-action: manipulation; } #flappyCanvas:focus-visible { outline: 3px double var(--red); outline-offset: 3px; } /* control deck — dark angled panel (ref image 2) */ .arcade-panel { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1rem; padding: 1rem 1.2rem 1.1rem; border: 3px solid var(--ink); border-bottom: none; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #2c2823, #16120e); } .arcade-panel::after { /* rainbow lip along the front of the deck */ content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 6px; background: linear-gradient(90deg, #e5342b 0 25%, #f28c1c 25% 50%, #f6c41a 50% 75%, #2f9fd0 75% 100%); } /* joystick */ .arcade-stick { position: relative; width: 48px; height: 62px; border: none; background: transparent; padding: 0; cursor: pointer; flex-shrink: 0; } .arcade-stick-shaft { position: absolute; left: 50%; bottom: 4px; width: 9px; height: 36px; transform: translateX(-50%); background: linear-gradient(90deg, #555, #111); border-radius: 5px; } .arcade-stick-ball { position: absolute; top: 0; left: 50%; width: 28px; height: 28px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6a72, var(--red) 55%, var(--red-dark)); border: 2px solid var(--ink); box-shadow: 0 0 10px rgba(245, 150, 30, 0.4); transition: transform 0.1s; } .arcade-stick.is-pressed .arcade-stick-ball { transform: translateX(-50%) translateY(3px); } /* illuminated button cluster (ref image 1) — 2 rows of 3 */ .arcade-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; flex-shrink: 0; } .arcade-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #0a0a0a; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 12px rgba(245, 150, 30, 0.55); transition: transform 0.1s, box-shadow 0.1s; } .arcade-btn-red { background: radial-gradient(circle at 35% 30%, #ff8a5a, #e5342b 60%, #a01722); } .arcade-btn-orange { background: radial-gradient(circle at 35% 30%, #ffd27a, #f28c1c 60%, #c76a10); } .arcade-btn.is-pressed { transform: translateY(3px); box-shadow: 0 0 8px rgba(245, 150, 30, 0.8); } /* lower cabinet face — coin door + status, sits on the cream body */ .arcade-body { position: relative; z-index: 2; padding: 1.2rem 0 1.4rem; text-align: center; } .arcade-coin { width: 74px; height: 30px; margin: 0 auto 1.1rem; border-radius: 4px; background: linear-gradient(180deg, #2c2823, #0b0b0b); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #3a352d, 0 0 14px rgba(245, 150, 30, 0.4); position: relative; } .arcade-coin-slot { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 5px; height: 15px; border-radius: 2px; background: #f6c41a; box-shadow: 0 0 6px rgba(246, 196, 26, 0.8); } .arcade-body .game-sub { margin-bottom: 0.4rem; color: var(--ink-dim); } .arcade-body .game-msg { color: var(--ink); } .arcade-body .game-prize { margin-top: 1rem; text-align: center; } @media (max-width: 480px) { .arcade-cabinet { padding-inline: 1.9rem; } .arcade-panel { flex-direction: column; gap: 0.9rem; } .arcade-stripes { width: 12px; } .arcade-stripes-left { left: 8px; } .arcade-stripes-right { right: 8px; } } /* ---------- 17g. responsive bits for the new sections ---------- */ @media (max-width: 860px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { order: -1; } /* summary first on phones */ .teaser-strip { padding: 1.3rem 1.2rem; } } @media (prefers-reduced-motion: reduce) { .arcade-stick-ball, .arcade-btn { transition: none; } } /* ---------- 18. HQ ACCOUNTS DASHBOARD (hq.html) ---------- */ .me-ref { display: inline-block; font-family: var(--font-pixel); font-weight: 700; letter-spacing: 0.08em; font-size: 0.9rem; border: 2px dashed var(--red); color: var(--red); padding: 0.25rem 0.7rem; margin-bottom: 0.9rem; } .hq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; } .hq-stat { border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 0.9rem 1rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } .hq-stat span { display: block; font-family: var(--font-cover); font-size: 1.8rem; letter-spacing: 0.03em; color: var(--ink); } .hq-toolbar { display: flex; gap: 0.7rem; margin-bottom: 1.4rem; } .hq-toolbar input { flex: 1; min-width: 0; font: inherit; padding: 0.6rem 0.9rem; border: 3px solid var(--ink); background: var(--surface); color: var(--ink); } .hq-toolbar input:focus { outline: 3px double var(--red); outline-offset: 2px; } .hq-table-wrap { overflow-x: auto; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); } .hq-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; white-space: nowrap; } .hq-table th { font-family: var(--font-cover); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; background: var(--ink); color: var(--paper); padding: 0.6rem 0.8rem; } .hq-table td { padding: 0.55rem 0.8rem; border-bottom: 1px dashed var(--line); } .hq-table tbody tr:hover { background: var(--paper-dark); } .hq-ref { font-family: var(--font-pixel); font-weight: 700; letter-spacing: 0.05em; color: var(--red); } #hqDetail { margin-top: 0.4rem; } .hq-profile { border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--surface); padding: 1.2rem 1.4rem; margin: 1rem 0 1.6rem; } .hq-profile h2 { font-family: var(--font-cover); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .hq-profile p { color: var(--ink-dim); font-size: 0.9rem; margin-top: 0.3rem; } .hq-profile p strong { color: var(--ink); } #hqDetail .admin-heading { margin-bottom: 1rem; } /* HQ: newsletter subscribers block */ .hq-diva { margin-top: 2.4rem; } .hq-diva .admin-heading { margin-bottom: 1rem; } #hqDivaCopy { margin-top: 0.9rem; } /* ---------- 19. CUSTOM TEE BUILDER (builder.html) ---------- */ .builder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } /* live preview — sticks with you while you scroll the options */ .builder-stage { position: sticky; top: 110px; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, 0.04) 12px 14px), var(--surface); padding: 1.4rem; text-align: center; } .tee-stage { display: grid; place-items: center; } .tee-svg { width: 100%; height: auto; display: block; } .tee-big { max-width: 420px; } .builder-summary { margin-top: 0.9rem; font-family: var(--font-pixel); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-dim); } /* option blocks */ .builder-controls { display: grid; gap: 1.6rem; } .build-step { border-bottom: 1px dashed var(--line); padding-bottom: 1.3rem; } .build-step:last-of-type { border-bottom: none; } .build-label { font-family: var(--font-cover); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; } .build-opt { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-dim); text-transform: none; } .build-hint { font-size: 0.75rem; color: var(--ink-dim); margin-top: 0.35rem; } /* color swatches */ .swatch-row { display: flex; flex-wrap: wrap; gap: 0.7rem; } .swatch { display: grid; justify-items: center; gap: 0.35rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } .swatch span { width: 42px; height: 42px; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transition: transform 0.12s; } .swatch em { font-style: normal; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; } .swatch:hover span { transform: translate(-2px, -2px); } .swatch.is-picked span { outline: 3px solid var(--red); outline-offset: 3px; } .swatch.is-picked em { color: var(--red); font-weight: 700; } /* graphic picker */ .design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.7rem; } .design-btn { display: grid; gap: 0.4rem; justify-items: center; align-content: center; min-height: 96px; padding: 0.6rem 0.4rem; background: var(--surface); border: 3px solid var(--ink); cursor: pointer; color: var(--ink); transition: transform 0.12s, box-shadow 0.12s; } .design-btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); } .design-btn.is-picked { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--red); } .design-thumb { width: 100%; max-height: 44px; } .design-btn img { max-height: 44px; width: auto; } .design-btn em { font-style: normal; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; text-align: center; } .design-none { font-family: var(--font-cover); font-size: 1.1rem; letter-spacing: 0.1em; opacity: 0.5; } /* text + fonts */ #teeText { width: 100%; font: inherit; text-transform: uppercase; padding: 0.65rem 0.8rem; border: 3px solid var(--ink); background: var(--surface); color: var(--ink); } #teeText:focus { outline: 3px double var(--red); outline-offset: 2px; } .font-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; } .font-btn { padding: 0.45rem 0.9rem; font-size: 1rem; background: var(--paper-dark); border: 3px solid var(--ink); cursor: pointer; color: var(--ink); } .font-btn.is-picked { background: var(--red); color: #fff; } #teeScale { width: 100%; accent-color: var(--red); } /* buy block */ .build-buy { border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--paper-dark); padding: 1.2rem; display: grid; gap: 0.8rem; justify-items: start; } .build-price { font-family: var(--font-cover); font-size: 2.2rem; letter-spacing: 0.02em; } /* tee thumbnails in cart / checkout / orders */ .tee-thumb { display: grid; place-items: center; background: var(--surface); padding: 2px; } .tee-thumb .tee-svg { max-height: 100%; } .cart-line-note { font-style: normal; color: var(--ink-dim); } /* shop page CTA that points at the builder */ .builder-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); background: var(--ink); color: var(--paper); padding: 1.4rem 1.8rem; margin-bottom: 2.5rem; } .builder-cta h2 { font-family: var(--font-cover); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: 0.04em; line-height: 1; margin-bottom: 0.3rem; } .builder-cta p { max-width: 46ch; font-size: 0.9rem; opacity: 0.85; } .builder-cta .tee-svg { width: 88px; } @media (max-width: 900px) { .builder-layout { grid-template-columns: 1fr; } .builder-stage { position: static; } .tee-big { max-width: 320px; } } /* builder: color picker, sliders, drag affordance */ .color-pick { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; } .color-pick label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); } #printCustom { width: 52px; height: 34px; padding: 2px; border: 3px solid var(--ink); background: var(--surface); cursor: pointer; } .color-hex { font-family: var(--font-pixel); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-dim); } .slider-row { display: grid; grid-template-columns: 62px 1fr 52px; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; } .slider-row label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); } .slider-row input[type="range"] { width: 100%; accent-color: var(--red); } .slider-val { font-family: var(--font-pixel); font-size: 0.78rem; text-align: right; } .build-drag-hint { margin-bottom: 0.9rem; font-style: italic; } #printGroup { touch-action: none; } /* let us handle the drag */ .tee-svg.is-dragging { user-select: none; } /* ---------- 20. THE KGB DVD PAGE (music.html · js/theater.js) ---------- 20a banner switch · 20b the screening room · 20c disc ring · 20d deck + tray · 20e the flat-screen CRT · 20f DVD root menu · 20g latest videos (YouTube) · 20h responsive. Palette for the room: ink #0b0a09 → #1b1815, phosphor green #39ff88, Don Diva red for the cursor + LEDs, bone #d8d2c4 for deck lettering. */ /* ---- 20a. banner + the DVD Player / Latest Videos switch ---- */ .dvd-banner-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; } .dvd-tabs { display: inline-flex; border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-hard); margin-bottom: 0.4rem; } .dvd-tab { display: inline-flex; align-items: center; gap: 0.55rem; font: inherit; font-family: var(--font-cover); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: none; border: 0; padding: 0.75rem 1.3rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .dvd-tab + .dvd-tab { border-left: 3px solid var(--ink); } .dvd-tab .icon { width: 1.1rem; height: 1.1rem; } .dvd-tab:hover { color: var(--red); } .dvd-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .dvd-tab[aria-pressed="true"] .icon { color: var(--red); } .dvd-tab:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; } .dvd-empty { grid-column: 1 / -1; font-family: var(--font-pixel); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.18em; text-align: center; padding: 3rem 1rem; border: 3px dashed var(--line); } /* ---- 20b. the screening room (full bleed, no box) ---- */ .dvd { color: #f1ece1; background: radial-gradient(ellipse 70% 55% at 50% 22%, #2a2520 0%, rgba(42, 37, 32, 0) 70%), linear-gradient(180deg, #14120f 0%, #0b0a09 100%); border-bottom: 3px solid var(--ink); } .theater { position: relative; overflow: hidden; outline: none; } .theater::before { /* faint room scanlines */ content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 4px); } .theater-inner { position: relative; padding-block: clamp(2.2rem, 5vw, 3.4rem) clamp(3.8rem, 6vw, 4.6rem); /* bottom clears the open tray */ } .theater[data-state="loading"] .disc, .theater[data-state="ejecting"] .disc { pointer-events: none; } /* ---- 20c. the disc ring (PS2-style carousel) ---- */ .disc-stage { display: flex; flex-direction: column; align-items: center; text-align: center; } .disc-ring-wrap { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; } .disc-scene { --disc: clamp(150px, 21vw, 230px); position: relative; height: calc(var(--disc) * 1.72); perspective: 1000px; perspective-origin: 50% 42%; } .disc-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transition: opacity 0.6s ease, filter 0.6s ease; } .disc-stage.is-dim .disc-ring { opacity: 0.2; filter: blur(3px); } .disc-scene.is-solo { --disc: clamp(200px, 32vw, 330px); height: calc(var(--disc) * 1.5); } /* one disc = the hero */ .disc { position: absolute; left: calc(var(--disc) / -2); top: calc(var(--disc) / -2 - 34px); width: var(--disc); height: var(--disc); padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; opacity: calc(0.3 + 0.7 * var(--depth, 1)); filter: brightness(calc(0.35 + 0.65 * var(--depth, 1))); transition: transform 0.8s var(--ease-out), filter 0.8s ease, opacity 0.8s ease; } .disc:focus-visible { outline: 3px solid var(--red); outline-offset: 8px; border-radius: 50%; } .disc-float { display: block; width: 100%; height: 100%; animation: discFloat 4.6s ease-in-out infinite; -webkit-box-reflect: below 8px linear-gradient(transparent 68%, rgba(0, 0, 0, 0.32)); } .disc:nth-child(2n) .disc-float { animation-delay: -1.6s; } .disc:nth-child(3n) .disc-float { animation-delay: -2.9s; } @keyframes discFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .disc-face { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; background: #222 center / cover no-repeat; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 18px 40px rgba(0, 0, 0, 0.6); overflow: hidden; } .disc-face::before { /* the rainbow data-side sheen */ content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 210deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 120, 180, 0.3) 40deg, rgba(120, 220, 255, 0.34) 90deg, rgba(255, 255, 255, 0.04) 140deg, rgba(255, 240, 120, 0.26) 210deg, rgba(150, 255, 200, 0.3) 260deg, rgba(255, 255, 255, 0) 330deg); mix-blend-mode: screen; opacity: 0.7; } .disc-face::after { /* hub ring + centre hole */ content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #0f0d0b 0 34%, rgba(255, 255, 255, 0.55) 35% 42%, rgba(200, 200, 200, 0.25) 43% 70%, rgba(255, 255, 255, 0.5) 71% 76%, transparent 77%); } .disc.is-front .disc-face { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32), 0 0 48px rgba(210, 31, 43, 0.3), 0 24px 54px rgba(0, 0, 0, 0.7); } .disc-nav { position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(241, 236, 225, 0.55); background: rgba(255, 255, 255, 0.04); color: #f1ece1; font-size: 0.95rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .disc-nav:hover { background: var(--red); border-color: var(--red); transform: scale(1.06); } .disc-nav:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .disc-caption { margin-top: 0.2rem; } .disc-caption .disc-index { display: block; font-family: var(--font-pixel); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--red); margin-bottom: 0.5rem; } .disc-caption h3 { margin: 0; font-family: var(--font-cover); font-weight: 400; font-size: clamp(1.7rem, 4.2vw, 2.7rem); letter-spacing: 0.03em; line-height: 1; text-wrap: balance; } .disc-caption p { margin: 0.5rem 0 0; font-family: var(--font-pixel); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.22em; color: #b9ad94; } .disc-load { margin-top: 1.4rem; } /* the disc that flies ring ⇄ tray during the cutscene */ .disc-fly { position: absolute; z-index: 10; pointer-events: none; transform-origin: 50% 50%; } /* ---- 20c-ii. THE 3D JEWEL CASE (discs with a "jewel" block) ---- Built like the real thing: a tray shell (back card outside, tray card inside, spines) holding the disc, and a clear lid hinged on the left. --jw = case width; height/depth follow 142 × 125 × 10 mm. Every face is an absolutely-centred plane pushed into place with the cube trick (rotate, then translateZ half the size). */ .disc.is-case { width: calc(var(--disc) * 1.22); height: var(--disc); left: calc(var(--disc) * -0.61); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .disc.is-case.is-held { cursor: grabbing; } .disc.is-case .disc-float { -webkit-box-reflect: below 16px linear-gradient(transparent 72%, rgba(0, 0, 0, 0.28)); } .jewel { --jw: calc(var(--disc) * 1.16); --jh: calc(var(--jw) * 0.88); /* 125 / 142 */ --jd: calc(var(--jw) * 0.07); /* 10 / 142 */ display: block; width: var(--jw); height: var(--jh); margin: calc((var(--disc) - var(--jh)) / 2) auto 0; perspective: 1500px; } .jewel-idle { display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: jewelSway 8s ease-in-out infinite; } .disc:not(.is-front) .jewel-idle, .disc.is-held .jewel-idle, .disc.is-open .jewel-idle { animation: none; } @keyframes jewelSway { 0%, 100% { transform: rotateY(-6deg) rotateX(1.5deg); } 50% { transform: rotateY(6deg) rotateX(-1.5deg); } } .jewel-body { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease-out); } .disc.is-held .jewel-body { transition: none; } /* every plane starts centred */ .jc-face, .jc-edge { position: absolute; left: 50%; top: 50%; display: block; backface-visibility: hidden; } .jc-face { width: var(--jw); height: var(--jh); margin: calc(var(--jh) / -2) 0 0 calc(var(--jw) / -2); } .jc-face *, .jc-face::before, .jc-face::after { backface-visibility: hidden; } /* children too, or they leak through */ /* the tray shell */ .jc-tray { position: absolute; inset: 0; display: block; transform-style: preserve-3d; } .jc-back { /* outside back: the tray card with the tracklist */ background: #0f1420 center / cover no-repeat; transform: rotateY(180deg) translateZ(calc(var(--jd) / 2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .jc-floor { /* inside the tray, under the disc */ background: #c9d6ea center / cover no-repeat; transform: translateZ(calc(var(--jd) * -0.2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.18); } .jc-floor::after { /* the hub the disc snaps onto */ content: ""; position: absolute; left: 54%; top: 50%; width: 9%; height: calc(9% * 142 / 125); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 30%, rgba(180, 190, 205, 0.9) 31% 55%, rgba(120, 130, 150, 0.6) 56% 75%, transparent 76%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .jc-edge { background: linear-gradient(180deg, #eef2f8, #b7c1d0 50%, #eef2f8); /* solid plastic rim */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); } .jc-edge-l, .jc-edge-r { /* the tray card's spines: sky gradient, chrome type */ width: var(--jd); height: var(--jh); margin: calc(var(--jh) / -2) 0 0 calc(var(--jd) / -2); display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 6% 0; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, #f7f9fc 0%, #e2e9f3 30%, #a9c1e6 62%, #2e6fe3 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 6px rgba(0, 0, 0, 0.18); } .jc-edge-l { transform: rotateY(-90deg) translateZ(calc(var(--jw) / 2)); } .jc-edge-r { transform: rotateY(90deg) translateZ(calc(var(--jw) / 2)); } .jc-edge-l b, .jc-edge-r b { writing-mode: vertical-rl; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: calc(var(--jd) * 0.5); letter-spacing: 0.04em; color: #e4e8ee; white-space: nowrap; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #3b4352, 0 0 2px rgba(0, 0, 0, 0.35); /* chrome bevel */ } .jc-edge-l b { transform: rotate(180deg); } .jc-edge-l { flex-direction: column-reverse; } .jc-edge-t, .jc-edge-b { width: var(--jw); height: var(--jd); margin: calc(var(--jd) / -2) 0 0 calc(var(--jw) / -2); } .jc-edge-t { transform: rotateX(90deg) translateZ(calc(var(--jh) / 2)); } .jc-edge-b { transform: rotateX(-90deg) translateZ(calc(var(--jh) / 2)); } /* the disc sits on the hub, slightly right of centre like a real case */ .jc-disc { position: absolute; left: 54%; top: 50%; width: calc(var(--jh) * 0.9); height: calc(var(--jh) * 0.9); margin: calc(var(--jh) * -0.45) 0 0 calc(var(--jh) * -0.45); transform: translateZ(calc(var(--jd) * -0.2 + 2px)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.45); backface-visibility: hidden; } /* the clear lid — hinged on the left edge */ .jc-lid { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform-origin: 0% 50%; transform: translateZ(calc(var(--jd) / 2 - 1px)) rotateY(var(--open, 0deg)); transition: transform 0.85s cubic-bezier(0.2, 0.85, 0.25, 1); } .jc-front { /* front cover behind clear plastic, right of the hinge strip */ background: #dfe6f0 right center / 90% 100% no-repeat; transform: translateZ(0); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 0 0 calc(var(--jw) * 0.012) rgba(255, 255, 255, 0.22); } .jc-hinge { /* the tray card's spine, seen through the hinge */ position: absolute; left: 0; top: 0; bottom: 0; width: 10%; background: #cfd9e8 left center / auto 100% no-repeat; border-right: 1px solid rgba(255, 255, 255, 0.45); box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.12); } .jc-front::after { /* the plastic: glare + a soft edge */ content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 30%, transparent 48%, transparent 66%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 12%); pointer-events: none; } .jc-lid-in { /* inside of the lid, seen when open: paper */ transform: rotateY(180deg) translateZ(calc(var(--jd) * 0.42)); background: #f4f6f9; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 0 30px rgba(0, 0, 0, 0.08); display: grid; place-items: center; } .jc-lid-in i { color: rgba(0, 0, 0, 0.18); } .jc-lid-in.has-art { /* the booklet's back page: the sky art on white */ background: #fff center / cover no-repeat; box-shadow: inset 0 0 0 calc(var(--jw) * 0.012) rgba(255, 255, 255, 0.35), inset 0 0 24px rgba(0, 0, 0, 0.12); } .jc-lid-in.has-art[style] { background-color: #fff; } .jc-back { box-shadow: inset 0 0 0 calc(var(--jw) * 0.012) rgba(255, 255, 255, 0.28); } .jc-lid-in i { font-style: normal; font-family: var(--font-cover); font-size: calc(var(--jw) * 0.06); letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.18); text-transform: uppercase; } .jc-lid-r, .jc-lid-l { width: calc(var(--jd) * 0.42); height: var(--jh); margin: calc(var(--jh) / -2) 0 0 calc(var(--jd) * -0.21); } .jc-lid-r { transform: translateZ(calc(var(--jd) * -0.21)) rotateY(90deg) translateZ(calc(var(--jw) / 2)); } .jc-lid-l { transform: translateZ(calc(var(--jd) * -0.21)) rotateY(-90deg) translateZ(calc(var(--jw) / 2)); } /* the hinge */ .jc-lid-t, .jc-lid-b { width: var(--jw); height: calc(var(--jd) * 0.42); margin: calc(var(--jd) * -0.21) 0 0 calc(var(--jw) / -2); } .jc-lid-t { transform: translateZ(calc(var(--jd) * -0.21)) rotateX(90deg) translateZ(calc(var(--jh) / 2)); } .jc-lid-b { transform: translateZ(calc(var(--jd) * -0.21)) rotateX(-90deg) translateZ(calc(var(--jh) / 2)); } /* the case tools under the caption (only for a jewel disc up front) */ .disc-tools { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .disc-tools button { font: inherit; font-family: var(--font-pixel); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; color: #f1ece1; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(241, 236, 225, 0.45); padding: 0.5rem 0.9rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .disc-tools button:hover { background: var(--red); border-color: var(--red); } .disc-tools button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .disc-load.is-after-tools { margin-top: 1rem; } /* now-playing extras: buy link + no-preview note */ .np-buy { display: inline-block; align-self: flex-start; margin-top: 1em; padding: 0.55em 0.9em; font-family: var(--font-cover); font-size: clamp(0.7rem, 1.8vw, 0.95rem); letter-spacing: 0.12em; color: #fff; background: var(--red); border: 2px solid rgba(255, 255, 255, 0.35); text-decoration: none; text-transform: uppercase; } .np-buy:hover { background: #fff; color: var(--red); } .np-note { margin: 1em 0 0; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.5rem, 1.3vw, 0.66rem); letter-spacing: 0.14em; line-height: 1.6; color: #b9ad94; text-transform: uppercase; } .np-kicker.is-idle { color: #b9ad94; } .np-kicker.is-idle .np-dot { background: #b9ad94; box-shadow: none; animation: none; } .menu-item.is-buy { color: #ffd166; } /* ---- 20d. the deck (DVD player unit) + tray ---- */ .deck { position: relative; z-index: 3; max-width: 860px; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; } .deck-face { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 0.7rem 1.4rem; align-items: center; padding: 0.85rem 1.1rem; background: linear-gradient(180deg, #34333a 0%, #1d1c20 28%, #111114 100%); border: 2px solid #46454c; border-bottom-color: #000; border-radius: 6px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .deck-brand { font-family: var(--font-cover); font-size: 1.05rem; letter-spacing: 0.14em; color: #d8d2c4; line-height: 1; white-space: nowrap; } .deck-brand small { display: block; margin-top: 0.3rem; font-family: var(--font-pixel); font-size: 0.5rem; letter-spacing: 0.26em; color: #7f7a6f; } .deck-lcd { justify-self: stretch; text-align: center; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.8rem, 2vw, 0.95rem); letter-spacing: 0.16em; color: #39ff88; text-shadow: 0 0 8px rgba(57, 255, 136, 0.75); background: #04120a; border: 2px inset #2c2c2f; padding: 0.5rem 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deck-lcd.is-blink { animation: lcdBlink 0.5s steps(2, end) infinite; } @keyframes lcdBlink { 50% { opacity: 0.25; } } /* the transport row only exists once a disc is in */ .deck-controls { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .theater:not([data-state="theater"]) .deck-controls { display: none; } .deck-btn { min-width: 42px; font: inherit; font-family: var(--font-pixel); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; line-height: 1; padding: 0.55rem 0.65rem; color: #eae4d6; background: linear-gradient(180deg, #4a4a50, #26262a); border: 1px solid #000; border-top-color: #6a6a70; border-radius: 3px; cursor: pointer; white-space: nowrap; } .deck-btn:hover:not(:disabled) { background: linear-gradient(180deg, #5d5d63, #303035); } .deck-btn:active:not(:disabled) { transform: translateY(1px); } .deck-btn:disabled { opacity: 0.35; cursor: not-allowed; } .deck-btn:focus-visible { outline: 2px solid #39ff88; outline-offset: 2px; } .deck-btn-wide { min-width: 118px; } .deck-btn-eject { margin-left: auto; color: #ff6b73; } .deck-seek { flex: 1 1 120px; min-width: 80px; accent-color: var(--red); } .deck-vol { width: 66px; accent-color: var(--red); } .deck-time { font-family: var(--font-pixel); font-weight: 700; font-size: 0.72rem; color: #b9ad94; white-space: nowrap; font-variant-numeric: tabular-nums; } /* (YouTube is driven through the deck too — see the bridge in theater.js) */ /* the tray: hides behind the deck face, slides down/out when open */ .deck-tray { position: absolute; z-index: 1; left: 50%; top: 100%; width: min(60%, 420px); height: 3.2rem; transform: translate(-50%, -104%); background: linear-gradient(180deg, #2a2a2e, #151517); border: 2px solid #000; border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .deck-tray.is-open { transform: translate(-50%, -4%); } .deck-tray-disc { /* the disc recess, seen at an angle */ position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1 / 0.36; transform: translate(-50%, -50%); border-radius: 50%; background: #0c0c0e center / cover no-repeat; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); } .deck-tray-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: #0c0c0e; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } .deck-tray-disc.has-disc { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.3); } /* ---- 20e. the flat-screen CRT ---- */ .tv { max-width: 860px; margin: 0 auto; } .tv-bezel { background: linear-gradient(180deg, #46464b 0%, #2a2a2e 12%, #1a1a1d 60%, #0e0e10 100%); border: 3px solid #0a0a0b; border-radius: 22px 22px 14px 14px; padding: clamp(0.8rem, 2.2vw, 1.4rem) clamp(0.8rem, 2.2vw, 1.4rem) 0.7rem; box-shadow: 0 30px 50px rgba(0, 0, 0, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.6); } .tv-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px / 12px; border: 6px solid #050506; box-shadow: inset 0 0 0 2px #1d1d20, 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; } .tv-screen:fullscreen { border: 0; border-radius: 0; } .tv-inner { position: absolute; inset: 0; transform-origin: 50% 50%; } .tv.is-on .tv-inner { animation: tvOn 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both; } .tv.is-off .tv-inner { animation: tvOff 0.45s ease-in both; } @keyframes tvOn { 0% { transform: scaleY(0.004) scaleX(0.6); filter: brightness(8); } 35% { transform: scaleY(0.004) scaleX(1); filter: brightness(8); } 60% { transform: scaleY(1) scaleX(1); filter: brightness(2.2); } 100% { transform: none; filter: brightness(1); } } @keyframes tvOff { 0% { transform: none; filter: brightness(1); } 45% { transform: scaleY(0.004) scaleX(1); filter: brightness(6); } 100% { transform: scaleY(0.002) scaleX(0); filter: brightness(0); } } .tv-video, .tv-embed { position: absolute; inset: 0; width: 100%; height: 100%; } .tv-video { object-fit: contain; background: #000; filter: saturate(1.25) contrast(1.06) brightness(1.02); cursor: pointer; } .tv-embed iframe { display: block; width: 100%; height: 100%; border: 0; } /* phosphor bloom: a soft screen-blended glow over the picture */ .tv-bloom { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 70%); mix-blend-mode: screen; } /* scanlines + RGB phosphor mask + curved-glass glare + vignette */ .tv-glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.045) 0 1px, rgba(0, 255, 0, 0.045) 1px 2px, rgba(0, 0, 255, 0.045) 2px 3px), radial-gradient(ellipse at 30% 12%, rgba(255, 255, 255, 0.13) 0%, transparent 42%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); box-shadow: inset 0 0 80px rgba(110, 160, 255, 0.2), inset 0 0 18px rgba(255, 255, 255, 0.08); animation: crtFlicker 3.2s ease-in-out infinite; } @keyframes crtFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.93; } } .tv-osd { position: absolute; z-index: 6; top: 5%; left: 5%; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.9rem, 2.6vw, 1.5rem); letter-spacing: 0.14em; color: #39ff88; text-shadow: 0 0 10px rgba(57, 255, 136, 0.8); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .tv-osd.is-show { opacity: 1; } .tv-yt-out { /* escape hatch if an embed won't start */ position: absolute; z-index: 6; right: 4%; bottom: 6%; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.5rem, 1.2vw, 0.62rem); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); padding: 0.35em 0.6em; } .tv-yt-out:hover { color: #fff; border-color: #fff; } /* the chin: brand plate · metallic MOVIE logo · grille + LEDs */ .tv-chin { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 0.7rem; } .tv-plate { font-family: var(--font-cover); font-size: 0.8rem; letter-spacing: 0.3em; color: #9c968a; line-height: 1; } .tv-plate small { display: block; margin-top: 0.2rem; font-family: var(--font-pixel); font-size: 0.5rem; letter-spacing: 0.25em; color: #6d685e; } .tv-movie { font-family: var(--font-cover); font-style: italic; font-size: clamp(1.1rem, 3vw, 1.7rem); letter-spacing: 0.22em; padding: 0 0.4rem 0 0.6rem; background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 30%, #6f6f74 50%, #e6e6e6 62%, #8a8a90 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9)); } .tv-right { display: flex; justify-content: flex-end; align-items: center; gap: 0.9rem; } .tv-grille { display: flex; gap: 3px; } .tv-grille i { width: 2px; height: 14px; background: #000; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08); } .tv-leds { display: flex; gap: 0.5rem; } .tv-leds i { width: 8px; height: 8px; border-radius: 50%; background: #3b3b40; } .tv-leds i.is-red { background: var(--red); box-shadow: 0 0 8px var(--red); } .tv-leds i.is-green { background: #39ff88; box-shadow: 0 0 8px #39ff88; animation: ledPulse 2.4s ease-in-out infinite; } @keyframes ledPulse { 50% { opacity: 0.5; } } .tv-stand { width: 38%; height: 12px; margin: 0 auto; background: linear-gradient(180deg, #1a1a1d, #050506); border-radius: 0 0 8px 8px; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.6); } /* ---- 20f. the DVD root menu (drawn on the tube) ---- */ .tv-menu { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); background: #000; color: #f1ece1; } .menu-bg { grid-column: 2; grid-row: 1; position: relative; background: center / cover no-repeat; } .menu-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, #000 0%, transparent 45%); } .menu-body { grid-column: 1; grid-row: 1; z-index: 1; display: flex; flex-direction: column; min-height: 0; padding: 5% 3% 4% 6%; } .menu-kicker { font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.5rem, 1.3vw, 0.68rem); letter-spacing: 0.26em; color: var(--red); } .menu-title { margin: 0.12em 0 0; font-family: var(--font-cover); font-weight: 400; font-size: clamp(1.15rem, 3.8vw, 2.3rem); letter-spacing: 0.02em; line-height: 0.95; } .menu-sub { margin: 0.35em 0 0; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.5rem, 1.3vw, 0.68rem); letter-spacing: 0.22em; color: #b9ad94; } .menu-list { flex: 1; min-height: 0; margin: clamp(0.6rem, 2.4vw, 1.2rem) 0 0; padding: 0 0 0.6em; list-style: none; overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); } .menu-list::-webkit-scrollbar { display: none; } .menu-group { display: flex; align-items: center; gap: 0.6em; margin: 0.7em 0 0.25em; font-family: var(--font-cover); font-size: clamp(0.55rem, 1.5vw, 0.76rem); letter-spacing: 0.16em; color: #8f877a; } .menu-group::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); margin-right: 8%; } .menu-item { position: relative; display: flex; align-items: center; gap: 0.65em; width: 100%; text-align: left; font: inherit; font-family: var(--font-cover); font-size: clamp(0.8rem, 2.3vw, 1.25rem); letter-spacing: 0.03em; line-height: 1.15; text-transform: uppercase; color: #e6dfd0; background: none; border: 0; border-left: 3px solid transparent; padding: 0.24em 0.6em 0.24em 0.7em; cursor: pointer; } .menu-item.is-cursor { color: #fff; border-left-color: var(--red); background: linear-gradient(90deg, rgba(210, 31, 43, 0.32), transparent 85%); text-shadow: 0 0 12px rgba(255, 255, 255, 0.3); } .menu-item.is-now, .menu-item.is-resume { color: #39ff88; } .menu-no { font-family: var(--font-pixel); font-size: 0.68em; color: #8f877a; font-variant-numeric: tabular-nums; } .menu-tag { margin-left: auto; font-family: var(--font-pixel); font-size: 0.55em; letter-spacing: 0.15em; border: 1px solid currentColor; padding: 0.1em 0.4em; opacity: 0.7; } .menu-foot { margin: 0.5em 0 0; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.45rem, 1.1vw, 0.6rem); letter-spacing: 0.22em; color: #6d685e; } .tv-menu.is-over { background: rgba(0, 0, 0, 0.86); } /* menu over a paused video */ .tv-menu.is-over .menu-bg { opacity: 0.3; } /* ---- 20f-ii. NOW PLAYING on the tube (Spotify tracks) ---- cover · track number · name · artist · disc / era / type / length · live progress. Spotify green only on the live dot, bar + EQ. */ .tv-np { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 5%; align-items: center; padding: 6% 7%; color: #f1ece1; background: radial-gradient(ellipse 60% 80% at 22% 50%, #241f1a 0%, rgba(36, 31, 26, 0) 70%), linear-gradient(180deg, #0a0908 0%, #030303 100%); } .np-art { position: relative; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75); overflow: hidden; } .np-art img { display: block; width: 100%; height: 100%; object-fit: cover; } .np-art::after { /* jewel-case glare */ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%, transparent 70%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; } .np-meta { min-width: 0; display: flex; flex-direction: column; } .np-kicker { display: flex; align-items: center; gap: 0.6em; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.5rem, 1.3vw, 0.66rem); letter-spacing: 0.26em; color: #39ff88; } .np-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #39ff88; box-shadow: 0 0 8px #39ff88; animation: ledPulse 1.6s ease-in-out infinite; } .np-no { margin-top: 0.9em; font-family: var(--font-cover); font-size: clamp(0.72rem, 1.8vw, 1rem); letter-spacing: 0.18em; color: var(--red); } .np-no em { font-style: normal; color: #8f877a; } .np-title { margin: 0.08em 0 0; font-family: var(--font-cover); font-weight: 400; font-size: clamp(1.3rem, 4.4vw, 2.7rem); line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; } .np-artist { margin: 0.35em 0 0; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.55rem, 1.5vw, 0.8rem); letter-spacing: 0.22em; color: #b9ad94; } .np-data { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2em 1.2em; margin: 1em 0 0; font-family: var(--font-pixel); font-size: clamp(0.5rem, 1.25vw, 0.66rem); letter-spacing: 0.14em; text-transform: uppercase; } .np-data dt { color: #6d685e; } .np-data dd { margin: 0; color: #e6dfd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-progress { position: relative; margin-top: 1.1em; height: 4px; background: rgba(255, 255, 255, 0.14); } .np-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #39ff88; box-shadow: 0 0 8px rgba(57, 255, 136, 0.8); transition: width 0.4s linear; } .np-time { margin-top: 0.5em; font-family: var(--font-pixel); font-weight: 700; font-size: clamp(0.5rem, 1.3vw, 0.66rem); letter-spacing: 0.16em; color: #8f877a; font-variant-numeric: tabular-nums; } .np-eq { position: absolute; right: 7%; bottom: 8%; display: flex; align-items: flex-end; gap: 3px; height: 9%; } .np-eq i { width: 4px; height: 18%; background: #39ff88; box-shadow: 0 0 6px rgba(57, 255, 136, 0.7); transition: height 0.3s; } .np-eq.is-live i { animation: eqBar 0.7s ease-in-out infinite alternate; } .np-eq.is-live i:nth-child(2) { animation-delay: -0.15s; } .np-eq.is-live i:nth-child(3) { animation-delay: -0.35s; } .np-eq.is-live i:nth-child(4) { animation-delay: -0.5s; } .np-eq.is-live i:nth-child(5) { animation-delay: -0.25s; } @keyframes eqBar { from { height: 15%; } to { height: 100%; } } /* the deck's AUDIO OUT strip — Spotify's own player lives here */ .deck-audio { grid-column: 1 / -1; padding-top: 0.65rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .deck-audio-label { display: block; margin-bottom: 0.45rem; font-family: var(--font-pixel); font-weight: 700; font-size: 0.55rem; letter-spacing: 0.24em; color: #7f7a6f; text-transform: uppercase; } .deck-audio-label b { color: #1db954; font-weight: 700; } .deck-audio-embed { min-height: 80px; border-radius: 12px; background: #282828; overflow: hidden; } .deck-audio-embed iframe { display: block; width: 100%; height: 80px; border: 0; } .deck-controls.is-spotify .deck-vol, .deck-controls.is-spotify .deck-btn-mute { display: none; } .menu-tag.is-spotify { color: #1db954; border-color: rgba(29, 185, 84, 0.6); opacity: 1; } /* ---- 20g. latest videos (YouTube) ---- */ .latest { padding-block: clamp(2.4rem, 5vw, 3.6rem) var(--section-pad); } .yt-feature { position: relative; aspect-ratio: 16 / 9; background: #000; border: 3px solid var(--ink); overflow: hidden; } .yt-feature iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000 center / cover no-repeat; display: grid; place-items: center; cursor: pointer; } .yt-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.55)); } .yt-play { position: relative; z-index: 1; width: 4.6rem; height: 4.6rem; display: grid; place-items: center; background: var(--red); color: #fff; border: 3px solid var(--ink); font-size: 1.8rem; transition: transform 0.25s var(--ease-out); } .yt-poster:hover .yt-play { transform: scale(1.08); } .yt-poster:focus-visible { outline: 3px solid var(--red); outline-offset: -6px; } /* the caption strip under the feature — a tape label */ .yt-feature-title { margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); border-top: 0; box-shadow: var(--shadow-hard); font-family: var(--font-cover); font-weight: 400; font-size: clamp(0.95rem, 2vw, 1.15rem); letter-spacing: 0.05em; text-transform: uppercase; } .yt-feature-title::before { content: "\25B6"; color: var(--red); margin-right: 0.7em; font-size: 0.75em; } .yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem; } .yt-card { font: inherit; color: var(--ink); text-align: left; background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--shadow-hard); padding: 0; cursor: pointer; overflow: hidden; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .yt-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); } .yt-card:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .yt-card.is-now { background: var(--ink); color: var(--paper); } .yt-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--ink); } .yt-card-title { display: block; padding: 0.75rem 0.85rem; font-family: var(--font-cover); font-size: 0.9rem; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; } .yt-card.is-now .yt-card-title::before { content: "\25B6 "; color: var(--red); } /* ---- 20h. responsive ---- */ @media (max-width: 720px) { .dvd-banner-row { align-items: stretch; } .dvd-tabs { display: flex; width: 100%; margin-bottom: 0; } .dvd-tab { flex: 1; justify-content: center; padding: 0.7rem 0.6rem; font-size: 0.9rem; } .disc-ring-wrap { grid-template-columns: 1fr; } .disc-nav { position: absolute; top: 30%; z-index: 4; width: 42px; height: 42px; font-size: 0.85rem; } #discPrev { left: 0; } #discNext { right: 0; } .disc-scene { --disc: clamp(140px, 42vw, 190px); } .deck-face { grid-template-columns: 1fr; text-align: center; } .deck-btn-wide { min-width: 0; } .deck-btn-eject { margin-left: 0; } .deck-tray { width: 76%; } .tv-bezel { border-radius: 14px 14px 10px 10px; } .tv-screen { aspect-ratio: 4 / 3; } /* room for the menu on phones */ .tv-plate small { display: none; } .tv-grille { display: none; } .tv-menu { grid-template-columns: 1fr; } .menu-bg { grid-column: 1; } .menu-bg::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 100%); } .menu-body { padding: 4% 5% 3%; } .menu-list { margin-top: 0.4rem; } .menu-foot { display: none; } .disc-tools button { padding: 0.45rem 0.6rem; font-size: 0.6rem; } .tv-np { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 5%; padding: 6% 5%; } .np-data { display: none; } .np-eq { display: none; } } @media (prefers-reduced-motion: reduce) { .disc-float, .tv-glass, .tv-leds i.is-green, .deck-lcd.is-blink { animation: none; } .disc, .disc-ring, .deck-tray { transition: none; } .tv.is-on .tv-inner, .tv.is-off .tv-inner { animation: none; } } /* ---------- 20i. nav: Swag Wagon Prints "SOON" tag (main.js 3c) ---------- */ .main-nav a.is-soon { opacity: 0.6; } .main-nav .nav-tag { display: inline-block; margin-left: 0.4em; vertical-align: 2px; font-family: var(--font-pixel); font-weight: 700; font-size: 0.55rem; letter-spacing: 0.15em; line-height: 1; padding: 0.18em 0.35em; background: var(--red); color: #fff; } /* ---------- 20j. SWAG WAGON PRINTS — coming-soon card + greyed shop banner ---------- */ .swag-soon { padding-top: 0; } .soon-card { max-width: 720px; margin: 0 auto; background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--shadow-hard); padding: clamp(1.6rem, 4vw, 2.8rem); } .soon-title { font-family: var(--font-cover); font-weight: 400; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 0.95; letter-spacing: 0.02em; margin: 0.2rem 0 1rem; } .soon-lead { font-size: 0.95rem; max-width: 52ch; } .soon-list { margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; border-top: 2px solid var(--ink); } .soon-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; } .soon-list li::before { content: "\25B6"; color: var(--red); font-size: 0.7em; margin-right: 0.6em; } .soon-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } .builder-cta.is-soon { position: relative; opacity: 0.72; filter: grayscale(0.4); } .builder-cta.is-soon::after { content: "COMING SOON"; position: absolute; top: -0.8rem; right: 1rem; font-family: var(--font-pixel); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.2em; padding: 0.3rem 0.6rem; background: var(--red); color: #fff; border: 2px solid var(--ink); }