/* ============================================================================= css/depot-style.css — Card Depot shared shell + design tokens (PRODUCTION) Session 1 of the reskin (DESIGN.md IMPLEMENTATION_PLAN). This is the existing binder aesthetic (navy + gold + pinstripe, Press Start 2P) extracted from mockups/depot-style.css into ONE reusable production sheet. No new look — values are the binder's current tokens, adopted as the single source of truth. Adapted from the mockup sheet: mockup-only scaffolding (the dashed .mock-note 'this is a mockup' banner and the fake in-game diamond/field visuals) has been dropped. Per Nick's locked amendment, the real in-game field/panels/aesthetic are NOT restyled by this sheet; only shared chrome + control (.btn/.tile) treatments are provided for later sessions to opt into. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;700&display=swap'); :root{ /* palette (binder-derived — the single source of truth) */ --depot-navy-bg:#1a1a2e; --depot-navy:#0d2d5c; --depot-navy-lite:#15407f; --depot-gold:#f8d000; --depot-gold-deep:#c9a800; --depot-cream:#e8e4d0; --depot-ink:#16110a; --depot-green:#2d6a2d; --depot-green-dark:#1d4a1d; --depot-black:#000; --depot-red:#b02020; --depot-white:#fff; --depot-shadow:rgba(0,0,0,.55); /* type scale (Press Start 2P everywhere in chrome) */ --fs-wordmark:20px; --fs-h1:16px; --fs-h2:13px; --fs-nav:11px; --fs-body:11px; --fs-micro:9px; /* 8px base grid */ --sp1:4px; --sp2:8px; --sp3:16px; --sp4:24px; --sp5:32px; /* hard pixel shadow — the shared depth cue (no soft/blurred shadows) */ --pixel-shadow:3px 3px 0 var(--depot-black); --pixel-shadow-lg:0 4px 0 var(--depot-black); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:#2eb2e6; color:var(--depot-navy); font-family:'Press Start 2P','JetBrains Mono',monospace; font-size:var(--fs-body); line-height:1.6; image-rendering:pixelated; -webkit-font-smoothing:none; } a{color:inherit;text-decoration:none} /* ---- bunting strip (red/white/navy pinstripe) -- RETIRED -------------------- * The v2 nav (.depot-shell__header.v2-header + .depot-nav.v2-nav) replaced the * Session-1 shell chrome, but the pinstripe survived as static markup in * game/shop.html and preview.html plus a runtime-created div in * js/depot-season-shell.js. On the shop it rendered as a full-bleed multicolored * bar sitting BELOW the new header+nav (Nick: "weird multicolored bar"). * All renders are removed; this rule is the global guard so any surface that * still ships the div paints nothing. Restoring is a one-line change -- the * original recipe was: * height:14px; border-bottom:3px solid var(--depot-black); * background:repeating-linear-gradient(90deg,var(--depot-red) 0 32px, * var(--depot-white) 32px 64px,var(--depot-navy) 64px 72px, * var(--depot-white) 72px 96px); * -------------------------------------------------------------------------- */ .depot-bunting{display:none !important} /* ---- shell frame ----------------------------------------------------------- */ .depot-shell{max-width:1160px;margin:0 auto;padding:0 0 48px} .depot-shell__header{ display:flex;align-items:center;gap:var(--sp4); background:transparent; border-bottom:none; box-shadow:none; padding:20px 24px; } .depot-wordmark{font-size:var(--fs-wordmark);color:var(--depot-navy);white-space:nowrap} .depot-wordmark b{color:var(--depot-gold)} /* franchise identity block — franchise name + season record, pinned once signed in */ .depot-franchise{ display:flex;flex-direction:column;gap:6px; padding:8px 14px; border:3px solid var(--depot-black); background:var(--depot-navy-lite); box-shadow:var(--pixel-shadow); } .depot-franchise .name{color:var(--depot-gold);font-size:var(--fs-nav)} .depot-franchise .record{color:var(--depot-white);font-size:var(--fs-micro)} /* signed-out state: identity block collapses to a LOG IN affordance */ .depot-franchise.is-anon .name{color:var(--depot-cream);opacity:.85} .depot-franchise.is-anon .record{display:none} .depot-account{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:var(--fs-micro);color:var(--depot-navy)} .depot-bell{position:relative;color:var(--depot-gold)} .depot-bell .dot{position:absolute;top:-6px;right:-8px;background:var(--depot-red);color:#fff;font-size:7px;padding:2px 4px;border:2px solid #000} /* ---- account cluster: ONE 8-bit treatment on every surface ----------------- * The email micro-label and the Log out control are shell-owned markup * (js/depot-shell.js) and must read identically on all four surfaces: the * binder, the Pack Shop, the Lineup Builder and Play Ball. * * The binder only ever got this look by accident -- index.html sets the whole * in 'Press Start 2P', so its relocated .auth-btn and the shell's email * span inherited the pixel font, while game/shop.html (body font 'Baloo 2') * rendered the same markup as plain text and showed no Log out at all. Stating * it once here is what makes the four surfaces agree. Values are the binder's * measured live treatment: pixel font, 11px gold pill, 2px border, 3px radius, * 4px/10px padding, black label. Font-size on the email is deliberately left * to .depot-account's --fs-micro so nothing about the binder moves. */ .depot-account .email{ font-family:'Press Start 2P','Oswald',monospace; font-weight:700; line-height:1.6; } .depot-account .auth-btn{ font-family:'Press Start 2P','Oswald',monospace; font-size:11px; font-weight:600; line-height:1.4; color:#000; background:var(--depot-gold,#f8d000); border:2px solid var(--depot-gold,#f8d000); border-radius:3px; padding:4px 10px; cursor:pointer; } .depot-account .auth-btn:hover{ background:var(--depot-navy,#0d2d5c); color:var(--depot-gold,#f8d000); } /* ---- mode nav (Depot / Builder / Season / Play Ball) ----------------------- */ .depot-nav{ display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center; padding:var(--sp3) 24px; } .depot-tab{ font-family:inherit;font-size:var(--fs-nav);cursor:pointer; padding:12px 16px;min-height:44px; background:var(--depot-navy);color:var(--depot-gold); border:3px solid var(--depot-black);box-shadow:var(--pixel-shadow); } .depot-tab[aria-current="true"],.depot-tab.is-active{ background:var(--depot-gold);color:var(--depot-ink); } .depot-nav .spacer{margin-left:auto} /* ---- mode stage (swappable content region) --------------------------------- */ .depot-stage{padding:0 24px;animation:stageIn .12s ease-out} @keyframes stageIn{from{opacity:.4}to{opacity:1}} /* ---- shared type + generic components -------------------------------------- */ .h1{font-size:var(--fs-h1);color:var(--depot-gold);margin:var(--sp4) 0 var(--sp3)} .h2{font-size:var(--fs-h2);color:var(--depot-gold);margin:var(--sp4) 0 var(--sp2)} .muted{color:var(--depot-cream);opacity:.75;font-size:var(--fs-micro)} .panel{ background:var(--depot-navy);border:3px solid var(--depot-black); box-shadow:var(--pixel-shadow);padding:var(--sp3); } .tile{ background:var(--depot-navy);color:var(--depot-cream); border:3px solid var(--depot-black);box-shadow:var(--pixel-shadow); padding:12px;font-size:var(--fs-micro); } .tile.is-active{background:var(--depot-gold);color:var(--depot-ink)} .tile .t{font-size:var(--fs-body);display:block;margin-bottom:6px} /* buttons — the shared control treatment (primary gold / ghost / destructive) */ .btn{ font-family:inherit;font-size:var(--fs-nav);cursor:pointer; background:var(--depot-gold);color:var(--depot-ink); border:3px solid var(--depot-black);box-shadow:var(--pixel-shadow); padding:12px 16px;min-height:44px; } .btn.ghost{background:var(--depot-navy);color:var(--depot-gold)} .btn.danger{background:var(--depot-cream);color:var(--depot-red);border-color:var(--depot-red);box-shadow:none;min-height:0;padding:6px 10px} .callout{ background:var(--depot-gold);color:var(--depot-ink); border:3px solid var(--depot-black);box-shadow:var(--pixel-shadow); padding:14px 18px;margin:var(--sp3) 0;font-size:var(--fs-body); } /* card felt tray + cream card face (binder treatment, shared) */ .card-tray{background:var(--depot-green);border:4px solid var(--depot-green-dark);padding:var(--sp3); background-image:repeating-linear-gradient(45deg,transparent 0 10px,rgba(0,0,0,.06) 10px 20px)} .card-face{background:var(--depot-cream);color:var(--depot-ink);border:3px solid var(--depot-black); box-shadow:var(--pixel-shadow);padding:10px;font-size:var(--fs-micro)} .card-face .nm{font-size:var(--fs-body);display:block;margin-bottom:6px} .sel{font-family:inherit;font-size:var(--fs-micro);background:var(--depot-cream);color:var(--depot-green-dark); border:3px solid var(--depot-black);padding:10px;width:100%} .grid{display:grid;gap:var(--sp3)} .grid.cols3{grid-template-columns:repeat(3,1fr)} .grid.cols4{grid-template-columns:repeat(4,1fr)} .two-col{display:grid;grid-template-columns:280px 1fr;gap:var(--sp4)} /* scoreboard / record chips (shared chrome — not the in-game HUD) */ .score{display:flex;gap:var(--sp3);align-items:center;margin:var(--sp3) 0} .score .chip{background:var(--depot-gold);color:var(--depot-ink);border:3px solid #000;box-shadow:var(--pixel-shadow); font-size:22px;padding:14px 22px} .score .lbl{font-size:var(--fs-micro);color:var(--depot-cream)} /* ===================== RESPONSIVE ======================================== */ /* Desktop >=900 full shell; Tablet 600-899 nav wraps; Phone <600 condenses. */ @media (max-width:899px){ .depot-nav{padding:var(--sp2) 16px} .two-col{grid-template-columns:1fr} .grid.cols3,.grid.cols4{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .depot-shell{padding-bottom:76px} /* header row split: row 1 = wordmark + account, row 2 = franchise + record (never dropped) */ .depot-shell__header{flex-wrap:wrap;gap:var(--sp2);padding:12px 14px} .depot-account{order:2} .depot-franchise{order:3;flex-basis:100%;flex-direction:row;justify-content:space-between} .depot-wordmark{font-size:16px} /* mode nav becomes a fixed bottom tab bar (four modes one thumb-tap apart) */ html.depot-game .depot-nav{position:fixed;left:0;right:0;bottom:0;z-index:50; background:var(--depot-navy);border-top:4px solid #000;box-shadow:0 -4px 0 #000; justify-content:space-between;gap:4px;padding:6px 8px;flex-wrap:nowrap;overflow-x:auto} html.depot-game .depot-nav .spacer{display:none} .depot-tab{flex:1;font-size:9px;padding:10px 4px;box-shadow:none;text-align:center;min-width:64px;min-height:44px} .depot-stage{padding:0 14px} .grid.cols3,.grid.cols4{grid-template-columns:1fr} .score{flex-wrap:wrap} .btn,.sel{width:100%} } /* ============================================================================ * FOUC guard — builder: hide the raw (pre-shell) content until dressed * * The Lineup Builder (game/builder.html) reskins on DOMContentLoaded: js/depot- * builder-shell.js mounts the shared shell and reparents #loginView / #builderView * into it, then hides the ad-hoc
. Between first paint and that mount the * raw green-era content would flash. Mirrors the Season fix (PR #72): depot-builder- * shell.js marks at script-eval, so the rules below are * scoped to the builder page ONLY (no effect on the binder or season screens, which * never carry that class). Keep the builder's content invisible while it is armed but * not yet dressed; reveal once .depot-builder-dressed (mount complete) OR the fail-loud * .depot-builder-reveal-fallback (3s watchdog) lands. The page's navy background * (var(--depot-navy-bg)) still paints, so there is no blank/white flash. * ==========================================================================*/ html.depot-builder:not(.depot-builder-dressed):not(.depot-builder-reveal-fallback) #loginView, html.depot-builder:not(.depot-builder-dressed):not(.depot-builder-reveal-fallback) #builderView, html.depot-builder:not(.depot-builder-dressed):not(.depot-builder-reveal-fallback) body > header{ visibility:hidden !important; } html.depot-builder.depot-builder-dressed #loginView, html.depot-builder.depot-builder-dressed #builderView, html.depot-builder.depot-builder-reveal-fallback #loginView, html.depot-builder.depot-builder-reveal-fallback #builderView, html.depot-builder.depot-builder-reveal-fallback body > header{ visibility:visible; } /* ============================================================================ * Session 5 — GAME screen (game/index.html): thin shell chrome + control restyle. * * Per Nick's locked amendment (DESIGN.md 3.4) the in-game presentation (RBI diamond, * field, HUD, nameplates) is NOT restyled — only the shell chrome around the stage and * the game controls change. js/depot-game-shell.js mounts the shell at top, adds * the classes below to the existing controls (additive; no logic touched), and publishes * --depot-game-chrome-h (measured top-chrome height) which we use to translate the game * backdrop down so the thin shell sits above the stage — WITHOUT touching the stage's * scale transform. * ==========================================================================*/ html.depot-game{ --depot-game-chrome-h:166px; } /* JS overwrites with the measured value */ /* Measured height of the fixed bottom mode-tab bar on phone (varies with tab wrap: * ~71px one row, ~91px when BACK TO SEASON wraps, up to ~123px at 360px). JS overwrites * this with the live getBoundingClientRect height so the game action bar clears it exactly. */ html.depot-game{ --depot-game-tabbar-h:71px; } /* The thin shell chrome is FIXED to the top of the viewport, above the game. */ html.depot-game .depot-bunting, html.depot-game .depot-shell{ position:fixed;left:0;right:0;z-index:60;background:var(--depot-navy-bg); } html.depot-game .depot-bunting{top:0} html.depot-game .depot-shell{top:0;max-width:none;padding-bottom:0;box-shadow:none} html.depot-game .depot-shell__header{padding:12px 24px} /* slim header for the game */ html.depot-game .depot-nav{padding:var(--sp2) 24px} /* Make room for the fixed chrome by translating the game's full-viewport backdrop * (.sc-host > div, position:fixed inset:0) DOWN by the chrome height. This is a pure * translateY on the backdrop CONTAINER: the whole canvas shifts uniformly, so the stage * keeps its exact scale transform and its centering-within-the-backdrop (no clip). We do * NOT touch #stage or its transform. */ html.depot-game .sc-host > div{ transform:translateY(var(--depot-game-chrome-h)); } /* Game controls (#sim-controls) restyled to the shared shell look — the fixed bottom * bar the game already positions. Spacing/alignment only; buttons carry .btn/.ghost. */ .depot-game-controls{ display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap; background:var(--depot-navy);border:3px solid var(--depot-black); box-shadow:var(--pixel-shadow);padding:10px 14px; } .depot-game-controls .depot-game-pacelbl{ font-size:var(--fs-micro);color:var(--depot-gold);margin-left:var(--sp2);white-space:nowrap; } .depot-game-controls .depot-game-sel{width:auto;min-width:150px} /* BACK control, relocated into the shell nav, reads as a ghost tab-height button */ .depot-nav .depot-game-back{min-height:44px} /* Phone: the top chrome is bunting + header only (the shared nav becomes a fixed BOTTOM * tab bar under 600px), so JS measures the smaller top offset automatically. Keep the * controls a comfortable bar with 44px targets. */ @media (max-width:600px){ html.depot-game .depot-shell__header{padding:12px 14px} .depot-game-controls{gap:6px;padding:8px 10px} .depot-game-controls .btn{min-height:44px} .depot-game-controls .depot-game-sel{flex:1;min-width:0} } /* --------------------------------------------------------------------------- * FOUC guard — GAME: hide the shell CHROME only until dressed. CHROME ONLY. * * js/depot-game-shell.js marks at script-eval, so these rules * are scoped to the game page ONLY. IMPORTANT: unlike the builder guard, this hides ONLY * the shell chrome (.depot-bunting + .depot-shell) — it deliberately does NOT touch the * game stage (#dc-root / .sc-host / #stage) or the controls (#sim-controls), so the sim * renders and runs immediately and is never gated on shell mount (Nick's amendment: the * in-game presentation is the north star and must not be delayed). Reveal the chrome once * .depot-game-dressed (mount complete) OR the fail-loud .depot-game-reveal-fallback (3s * watchdog) lands. The navy background still paints, so there is no white flash. * ------------------------------------------------------------------------- */ html.depot-game:not(.depot-game-dressed):not(.depot-game-reveal-fallback) .depot-bunting, html.depot-game:not(.depot-game-dressed):not(.depot-game-reveal-fallback) .depot-shell{ visibility:hidden !important; } html.depot-game.depot-game-dressed .depot-bunting, html.depot-game.depot-game-dressed .depot-shell, html.depot-game.depot-game-reveal-fallback .depot-bunting, html.depot-game.depot-game-reveal-fallback .depot-shell{ visibility:visible; } /* ============================================================================ * Session 6 — mobile polish (DESIGN.md IMPLEMENTATION_PLAN, FINAL). * * The shared shell already ships the phone bottom-tab-bar + 44px targets on its * own controls (.depot-tab / .btn). This block finishes the job on the LEGACY * per-page controls that pre-date the shell and were never bumped: the binder's * era tabs / group-by mode buttons / pagination / auth button, and the builder's * account cluster (which overflowed at 390px because the email never wrapped). * Phone-scoped only (<=600px) so desktop is untouched. Additive — no existing * rule is modified. * ========================================================================== */ @media (max-width:600px){ /* --- 44px touch targets on legacy binder/season controls ----------------- */ .auth-btn, .mode-btn, #eraTabs .era-tab, .page-nav button{ min-height:44px; } /* auth button (Log in / Log out) — was 23px; give it real tap padding */ .auth-btn{ padding:12px 14px; } /* group-by mode buttons (The Binder / By Set / + Add a card) — were 37px */ .mode-btn{ padding:11px 12px; } /* pagination (‹ Prev page / Next page ›) — were 40px */ .page-nav button{ padding:11px 14px; } /* --- builder account cluster overflow fix (was +148px horizontal scroll) -- */ /* The account cluster (email + logout) sat on one non-wrapping row and the * email text (.who / .email) never broke, pushing the header wider than the * viewport. Allow the cluster to wrap and let the email shrink+ellipsize. */ .depot-account{ flex-wrap:wrap; max-width:100%; min-width:0; overflow:hidden; } .depot-account .who, .depot-account .email{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* builder ghost buttons (logout / notif) get 44px tap height on phone */ .depot-account .btn-ghost, .depot-account .depot-bell{ min-height:44px; display:inline-flex; align-items:center; } } /* ============================================================================ * Session 6 — GAME screen mobile (DESIGN.md IMPLEMENTATION_PLAN, FINAL). * * The game/index.html runtime bundle inline-styles two of its own elements with * position:fixed at high z-index, which the Session 5 shell relocation could not * override (inline styles beat plain class rules): * 1) #sim-controls -> fixed; bottom:22px; left:50%; z-index:100000 (the action * bar). At phone width the four buttons stack tall and, anchored 22px off the * viewport bottom, the bar collided with the fixed bottom mode-tab bar (~71px) * AND covered it (z 100000 > nav z 50). * 2) #backToDepot -> fixed; top:10px; left:10px; z-index:2147483647 (BACK). Even * though Session 5 reparented the node INTO the shell nav, this inline fixed * pin kept it floating in the top-left corner over the wordmark (desktop + phone). * * Fix (chrome/presentation ONLY — the sim, stage transform and in-game visuals are * never touched, per Nick's locked amendment): neutralise #backToDepot's inline pin * so it flows inside the nav on every width, and on phone raise #sim-controls clear of * the bottom tab bar and drop it BELOW the bar in the stacking order so the four modes * are never covered. !important is required only to beat the bundle's inline styles. * ========================================================================== */ /* BACK control: cancel the bundle's inline fixed-corner pin so it sits in the nav. */ html.depot-game .depot-nav #backToDepot{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:auto !important; box-shadow:var(--pixel-shadow) !important; } /* Desktop: dock the game action bar into the chrome mode-nav row instead of floating it * over home plate. js/depot-game-shell.js relocates the #sim-controls NODE into .depot-nav * (listeners preserved); this cancels the bundle's inline fixed-over-the-field pin so it * flows in the black chrome band between the PLAY BALL tab and BACK TO SEASON. !important is * required only to beat the bundle's inline styles (same tactic as #backToDepot above). * In-game visuals (field, plate, panels, #stage + its scale) are never touched. Scoped to * .depot-nav so mobile (node stays in the bundle bottom bar) keeps its measured-clearance * rule below, fully untouched. */ html.depot-game .depot-nav #sim-controls{ position:static !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; z-index:auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 auto !important; } @media (max-width:600px){ /* Lift the game action bar above the fixed bottom tab bar (~71px) and put it BELOW * the bar's stacking level so the four modes are always tappable + visible. */ html.depot-game #sim-controls{ /* Clear the fixed bottom tab bar by its LIVE measured height (var set by * js/depot-game-shell.js setTabbarOffset, same measured-variable pattern as * --depot-game-chrome-h) plus a 13px gap - adapts to bar wrap (BACK TO DEPOT / * BACK TO SEASON, 390px / 360px) instead of a brittle hardcoded offset. */ bottom:calc(var(--depot-game-tabbar-h, 71px) + 13px) !important; z-index:49 !important; max-width:calc(100vw - 20px) !important; } } /* ============================================================ [exhibition payout / §9 fix] payday panel + wallet chip. Ported from mockups/economy/payout.html. These classes were originally added as a static