/* ════════ tokens & fonts ════════ */ @font-face { font-family: 'Caveat'; src: url('../assets/fonts/caveat-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; } @font-face { font-family: 'Patrick Hand'; src: url('../assets/fonts/patrick-hand-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { --ink: #2f2a26; --paper: #f6efdf; --paper-2: #efe4cb; --coffee: #6f4e37; --coffee-dark: #43301f; --terracotta: #d96f43; --cream: #fff8ea; --night: #14182b; --night-2: #262e56; --gold: #ffd873; --r-common: #98a1ab; --r-uncommon: #63a866; --r-rare: #5b8dd6; --r-epic: #a06cd5; --r-legendary: #d9a441; --hand-display: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; --hand-body: 'Patrick Hand', 'Comic Sans MS', cursive; --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --card-ratio: 1.4; /* ── studio skin · default = the dark foil look of the pack scene ── every themed card re-paints these on (see body.theme-coffee) */ --st-display-font: var(--ui); --st-body-font: var(--ui); --st-ink-hi: #e8ecff; --st-ink: #aab4e8; --st-muted: #6f7ab0; --st-panel: #1b2140; --st-panel-2: #12162c; --st-line: #3a4374; --slot-line: #4a5387; --zone-bg: #1c2246; --zone-line: #5b6494; --zone-line-hot: var(--gold); --canvas-bg: #171c38; --wf-block: #2b3260; --wf-block-soft: #252b52; --wf-dash: #3a4374; --obj-ink: #ece7d4; /* chalk outline for brewed objects on the dark zone */ --steam-ink: #a9b2d8; --note-bg: #1b2140; --note-line: #8f9bd4; --note-ink: #dfe4ff; --frame-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } /* the coffee house owns the page while its mug sits on the line */ body.theme-coffee { --st-display-font: var(--hand-display); --st-body-font: var(--hand-body); --st-ink-hi: var(--ink); --st-ink: #8d7c5c; --st-muted: #b3ab97; --st-panel: var(--paper-2); --st-panel-2: var(--cream); --st-line: var(--ink); --slot-line: #b6a888; --zone-bg: #f3ead6; --zone-line: #8d7c5c; --zone-line-hot: var(--terracotta); --canvas-bg: #fbf8f0; --wf-block: #d8d1c0; --wf-block-soft: #e4ddcc; --wf-dash: #c1b9a6; --obj-ink: #3a332c; --steam-ink: #b9ab90; --note-bg: var(--cream); --note-line: var(--ink); --note-ink: var(--ink); --frame-shadow: 5px 7px 0 rgba(47, 42, 38, 0.28), 0 18px 40px rgba(80, 62, 30, 0.2); } /* the terminal takes the page down to phosphor on black */ body.theme-crt { --st-display-font: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --st-body-font: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --st-ink-hi: #b9ffcf; --st-ink: #39ff88; --st-muted: #1f9c56; --st-panel: #0b130d; --st-panel-2: #060b07; --st-line: #1e6b3f; --slot-line: #1e6b3f; --zone-bg: #08100a; --zone-line: #2ddd76; --zone-line-hot: #b9ffcf; --canvas-bg: #060b07; --wf-block: #133a24; --wf-block-soft: #0f2c1b; --wf-dash: #1e6b3f; --obj-ink: #39ff88; --steam-ink: #1f9c56; --note-bg: #0b130d; --note-line: #2ddd76; --note-ink: #b9ffcf; --frame-shadow: 0 0 34px rgba(57, 255, 136, 0.22), 0 18px 40px rgba(0, 0, 0, 0.6); } /* the dashboard takes the page to a cool corporate slate */ body.theme-boardroom { --st-display-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --st-body-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --st-ink-hi: #eef2f6; --st-ink: #a9b6c3; --st-muted: #748392; --st-panel: #16202b; --st-panel-2: #101822; --st-line: #2c3a49; --slot-line: #3a4a5b; --zone-bg: #131c26; --zone-line: #748392; --zone-line-hot: #2a78d6; --canvas-bg: #f4f6f8; --wf-block: #26323f; --wf-block-soft: #1f2934; --wf-dash: #2c3a49; --obj-ink: #dce5ee; --steam-ink: #748392; --note-bg: #16202b; --note-line: #2a78d6; --note-ink: #eef2f6; --frame-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); } /* the watch page takes the page to warm paper and near-black */ body.theme-showroom { --st-display-font: 'Cormorant', Georgia, serif; --st-body-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --st-ink-hi: #f3f1ed; --st-ink: #b6b3ad; --st-muted: #85827c; --st-panel: #1c1d20; --st-panel-2: #131417; --st-line: #34353a; --slot-line: #46474d; --zone-bg: #191a1d; --zone-line: #85827c; --zone-line-hot: #c4884a; --canvas-bg: #f7f6f4; --wf-block: #2b2c30; --wf-block-soft: #232427; --wf-dash: #34353a; --obj-ink: #edeae4; --steam-ink: #85827c; --note-bg: #1c1d20; --note-line: #c4884a; --note-ink: #f3f1ed; --frame-shadow: 0 22px 50px rgba(0, 0, 0, 0.55); } /* the barbershop takes the page to navy, cream and barber red */ body.theme-barber { --st-display-font: 'Oswald', 'Arial Narrow', sans-serif; --st-body-font: 'Iowan Old Style', Georgia, serif; --st-ink-hi: #f6f1e7; --st-ink: #cbbfa9; --st-muted: #8d8471; --st-panel: #16202e; --st-panel-2: #101823; --st-line: #3a4859; --slot-line: #4a5768; --zone-bg: #131c28; --zone-line: #8d8471; --zone-line-hot: #b5322c; --canvas-bg: #f6f1e7; --wf-block: #2c3a4d; --wf-block-soft: #24303f; --wf-dash: #3a4859; --obj-ink: #f2ece0; --steam-ink: #8d8471; --note-bg: #16202e; --note-line: #c08a2e; --note-ink: #f6f1e7; --frame-shadow: 0 20px 46px rgba(0, 0, 0, 0.55); } /* the salon takes the page to gallery green and gilt */ body.theme-salon { --st-display-font: Georgia, 'Iowan Old Style', 'Times New Roman', serif; --st-body-font: Georgia, 'Iowan Old Style', 'Times New Roman', serif; --st-ink-hi: #f3ead6; --st-ink: #cbb98d; --st-muted: #93855f; --st-panel: #1c2a22; --st-panel-2: #17211b; --st-line: #8a6a25; --slot-line: #6d5a2f; --zone-bg: #1a271f; --zone-line: #c9a24a; --zone-line-hot: #f0dca0; --canvas-bg: #24352c; --wf-block: #3a5245; --wf-block-soft: #33483d; --wf-dash: #6d5a2f; --obj-ink: #f0e2bd; --steam-ink: #93855f; --note-bg: #1c2a22; --note-line: #c9a24a; --note-ink: #f3ead6; --frame-shadow: 0 0 30px rgba(201, 162, 74, 0.2), 0 20px 46px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { font-family: var(--ui); color: var(--ink); overflow-x: hidden; transition: background 0.9s ease; -webkit-tap-highlight-color: transparent; } /* dark card-table backdrop — pack scene AND the default studio. background-color carries the page; the fixed image only covers the viewport */ body.phase-pack, body.phase-studio { background-color: var(--night); background-image: radial-gradient(ellipse 90% 60% at 50% 30%, #2c3564 0%, var(--night-2) 38%, var(--night) 78%); background-attachment: fixed; } body.phase-pack { overflow: hidden; height: 100vh; } body.phase-studio.theme-boardroom { background-color: #101822; background-image: linear-gradient(0deg, rgba(42, 120, 214, 0.06) 0 1px, transparent 1px 34px), radial-gradient(ellipse 78% 58% at 50% 26%, #1b2836 0%, #131d28 58%, #0c141c 100%); background-attachment: fixed; } body.phase-studio.theme-showroom { background-color: #131417; background-image: radial-gradient(ellipse 70% 52% at 50% 24%, #24252a 0%, #1a1b1f 58%, #0f1012 100%); background-attachment: fixed; } body.phase-studio.theme-barber { background-color: #101823; background-image: repeating-linear-gradient(115deg, rgba(181, 50, 44, 0.05) 0 22px, transparent 22px 44px), radial-gradient(ellipse 78% 58% at 50% 28%, #1c2838 0%, #131c28 58%, #0c131c 100%); background-attachment: fixed; } body.phase-studio.theme-salon { background-color: #1b2820; background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 46px), radial-gradient(ellipse 78% 58% at 50% 30%, #2a3d32 0%, #22322a 55%, #16211a 100%); background-attachment: fixed; } body.phase-studio.theme-crt { background-color: #050806; background-image: repeating-linear-gradient(0deg, rgba(57, 255, 136, 0.05) 0 1px, transparent 1px 3px), radial-gradient(ellipse 80% 60% at 50% 34%, #0b1a10 0%, #060c08 58%, #030503 100%); background-attachment: fixed; } body.theme-crt .studio-title, body.theme-crt .btn-newpack { text-shadow: 0 0 8px rgba(57, 255, 136, 0.4); } /* warm paper takes over when the coffee theme is applied */ body.phase-studio.theme-coffee { background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-attachment: fixed; } .scene { width: 100%; } .scene-pack { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .scene-studio { display: none; flex-direction: column; align-items: center; min-height: 100vh; padding: 0 16px 48px; user-select: none; -webkit-user-select: none; } body.phase-studio .scene-pack { display: none; } body.phase-studio .scene-studio { display: flex; } /* while measuring / transitioning: studio laid out but invisible */ body.phase-burst .scene-studio { display: flex; position: fixed; inset: 0; visibility: hidden; overflow: hidden; pointer-events: none; } /* ════════ studio chrome ════════ */ .studio-bar { width: min(1160px, 100%); display: flex; align-items: baseline; justify-content: space-between; padding: 18px 6px 4px; } .studio-title { font-family: var(--st-display-font); font-weight: 800; font-size: 19px; letter-spacing: 4px; text-transform: uppercase; color: var(--st-ink-hi); transition: color 0.4s ease; } body.theme-coffee .studio-title { font-weight: 700; font-size: 30px; letter-spacing: 0; text-transform: none; transform: rotate(-1.2deg); } .btn-newpack { font-family: var(--st-body-font); font-size: 14px; color: var(--st-ink-hi); background: var(--st-panel); border: 2px solid var(--st-line); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.4s ease, color 0.4s ease; } .btn-newpack:hover { transform: translateY(-2px); border-color: #8f9bd4; } .btn-newpack:active { transform: translateY(1px); } body.theme-coffee .btn-newpack { font-size: 16px; border: 2.5px solid var(--ink); border-radius: 14px 10px 14px 10px / 10px 14px 10px 14px; box-shadow: 2px 3px 0 rgba(47, 42, 38, 0.35); } body.theme-coffee .btn-newpack:hover { transform: translateY(-2px) rotate(-1deg); border-color: var(--ink); box-shadow: 3px 5px 0 rgba(47, 42, 38, 0.35); } body.theme-coffee .btn-newpack:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(47, 42, 38, 0.35); } .page-foot { position: fixed; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--hand-body); font-size: 14px; opacity: 0.55; pointer-events: none; color: #cfd6ff; } body.phase-studio .page-foot { display: none; } /* generic helpers */ [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }