/* ---------- Blueprint Design System adoption ---------- tokens.css (linked below, in , before this file) is now the actual source for every shared token — colors, radius, shadows, spacing, the app-shell, and primitives (.btn/.card/.badge/etc.) all come from there, not from a locally re-declared copy. Every var(--old-name) Command used to define itself (--bg, --panel, --blue, --line, --muted, --card-cut...) has been renamed throughout this file to the matching Blueprint name (--canvas, --surface, --primary, --border, --text-tertiary, --r-lg...), so this stylesheet now only declares the handful of things Blueprint's token set genuinely has no equivalent for: --muted-dark (a fourth, further-muted text step), --blue-bright/--line-strong (lighter accent variants used for hovers/focus), and --ease (a reusable easing curve — tokens.css's --t-fast/base/slow are full duration+easing shorthands, a different pattern than Command's `transition: prop .16s var(--ease)` calls, so there's nothing to rename onto there). */ :root { /* Remapped to Workshop's exact values (these four aren't part of the Blueprint token spec, so they're declared locally same as before — just re-hued/sized to match Workshop instead of the old command-center palette). --card-cut/--card-cut-sm are new: Workshop's cut-corner card clip-path, used throughout the page rebuilds below. */ --muted-dark: #4A4A4A; --blue-bright: #91BEDD; --line-strong: #333333; --ease: cubic-bezier(.2,.7,.3,1); --card-cut: 18px; --card-cut-sm: 10px; /* Same chamfered-corner shape as every card/intake form, scaled up for the login screen's single hero panel — see "login" section below. */ --card-cut-hero: 28px; } /* No @font-face here anymore — tokens.css declares Garp Sans Wide/Roboto once (as --font-display/--font-body) and this file uses those variables directly, instead of Command re-registering the same files under its own "Blueprint Wide"/"Blueprint Roboto" aliases. Winner Sans ("Blueprint Stat") is dropped entirely, matching the design system's decision to consolidate stat numbers onto Garp. */ * { box-sizing: border-box; } html { height: 100%; overflow: hidden; } * { scrollbar-color: #343b43 transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { border: 2px solid var(--canvas); border-radius: 999px; background: #343b43; } *::-webkit-scrollbar-thumb:hover { background: #4a525c; } body { margin: 0; height: 100%; min-height: 100vh; overflow: hidden; color: var(--text-primary); background: var(--canvas); font-family: var(--font-body), Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display), var(--font-body), Arial, sans-serif; font-weight: 400; margin: 0; letter-spacing: 0; } button, input, select, textarea { font: inherit; } button { cursor: pointer; transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease); } button:active { transform: translateY(1px); } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; } .is-hidden { display: none !important; } .app-body.view { display: none; } .app-body.view.active { display: flex; } /* ---------- shell / sidebar / header (matches Workshop's shared app shell) ---------- */ .app-sidebar { width: 220px; flex: 0 0 220px; display: flex; flex-direction: column; padding: 16px 10px 14px; background: rgba(35,35,35,.92); border-right: 1px solid var(--border); overflow-y: auto; transition: width .18s var(--ease), flex-basis .18s var(--ease); } .app-sidebar.is-collapsed { width: 72px; flex-basis: 72px; } .sidebar-top { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 4px 6px 28px; } .sidebar-logo { width: 54px; height: 40px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 8px rgba(123,169,208,.25)); } .sidebar-wordmark { min-width: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: .3px; color: #fff; white-space: nowrap; overflow: hidden; } .app-sidebar.is-collapsed .sidebar-top { justify-content: center; } .sidebar-collapse-btn { position: absolute; top: 16px; left: 208px; z-index: 10; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 13px; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: left .18s var(--ease); } #app-sidebar.is-collapsed ~ .sidebar-collapse-btn { left: 60px; } .dashboard-switcher-wrap { position: relative; } .dashboard-switcher { width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 4px; } .dashboard-switcher:hover { background: var(--surface-raised); color: #fff; } .dashboard-switcher .btn-icon { margin-right: 0; width: 14px; height: 14px; } .dashboard-switcher-label { flex: 1; min-width: 0; text-align: left; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-switcher-chevron { flex: 0 0 auto; font-size: 11px; color: var(--text-tertiary); } .app-sidebar.is-collapsed .dashboard-switcher { padding: 0; justify-content: center; } .app-sidebar.is-collapsed .dashboard-switcher-label, .app-sidebar.is-collapsed .dashboard-switcher-chevron { display: none; } .dashboard-switcher-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-lg); padding: 5px; display: grid; gap: 2px; } .dashboard-switcher-item { border-radius: 6px; padding: 8px 10px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background-color .12s var(--ease), color .12s var(--ease); } .dashboard-switcher-item.is-current { color: var(--blue-bright); background: var(--secondary); } .dashboard-switcher-item.is-disabled { color: var(--muted-dark); } .dashboard-switcher-item:hover:not(.is-disabled):not(.is-current) { background: var(--hover); color: var(--text-primary); cursor: pointer; } .switcher-soon { font-size: 9px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-dark); } .sidebar-divider { height: 1px; margin: 6px 8px 10px; background: var(--border); flex: 0 0 auto; } .sidebar-nav-group-label { margin: 14px 0 4px 10px; color: var(--muted-dark); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .app-sidebar.is-collapsed .sidebar-nav-group-label { visibility: hidden; height: 4px; overflow: hidden; margin: 10px 0 4px; } .tabs { display: flex; flex-direction: column; gap: 2px; } .tab { width: 100%; height: 38px; min-width: 0; border: 0; border-radius: 7px; color: var(--text-tertiary); background: transparent; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; padding: 0 10px; text-align: left; } .tab:hover:not(.active) { color: var(--text-secondary); background: rgba(255,255,255,.03); } .tab.active { color: var(--blue-bright); background: rgba(123,169,208,.14); box-shadow: inset 0 0 0 1px var(--blue-bright); } .tab .btn-icon { margin-right: 10px; width: 17px; height: 17px; flex: 0 0 auto; } .sidebar-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar.is-collapsed .tab { justify-content: center; padding: 0; } .app-sidebar.is-collapsed .tab .btn-icon { margin-right: 0; } .app-sidebar.is-collapsed .sidebar-nav-label { display: none; } .app-shell { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .app-header { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px; background: rgba(35,35,35,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); flex: 0 0 auto; z-index: 5; } .app-header-title { margin: 0 0 0 10px; color: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: .3px; } .app-views { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .top-actions { display: flex; align-items: center; gap: 10px; min-width: 230px; justify-content: flex-end; } .account-menu-wrap { position: relative; } .account-card { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; height: 34px; padding: 0 10px 0 6px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease); } .account-card:hover { background: var(--surface-raised); color: #fff; } .account-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--secondary); color: var(--blue-bright); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .account-email { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 150px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-lg); padding: 5px; display: grid; gap: 2px; } .account-dropdown-item { border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; text-align: left; padding: 8px 10px; cursor: pointer; } .account-dropdown-item:hover { background: var(--danger); color: #fff; } /* ---------- icon system (mask-based, recolorable) ---------- */ .section-icon, .btn-icon, .cell-icon { display: inline-block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex: 0 0 auto; } .section-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(155deg, rgba(123,169,208,.22), rgba(123,169,208,.06)); color: var(--blue-bright); padding: 8px; -webkit-mask-size: 55%; mask-size: 55%; } .section-heading { display: flex; align-items: center; gap: 12px; } .btn-icon { width: 13px; height: 13px; margin-right: 7px; } .icon-add { -webkit-mask-image: url("/assets/Icons/add-line.svg"); mask-image: url("/assets/Icons/add-line.svg"); } .icon-athletes { -webkit-mask-image: url("/assets/Icons/users-svgrepo-com.svg"); mask-image: url("/assets/Icons/users-svgrepo-com.svg"); } /* Workshop's own tabs, rendered into #external-app-tabs — see js/appShell.js */ .icon-workouts { -webkit-mask-image: url("/assets/Icons/dumbell-svgrepo-com.svg"); mask-image: url("/assets/Icons/dumbell-svgrepo-com.svg"); } .icon-programs { -webkit-mask-image: url("/assets/Icons/clipboard-line.svg"); mask-image: url("/assets/Icons/clipboard-line.svg"); } .icon-eval { -webkit-mask-image: url("/assets/Icons/icon-activity.svg"); mask-image: url("/assets/Icons/icon-activity.svg"); } /* Fuel's own tabs, rendered into #external-app-tabs — see js/appShell.js */ .icon-restaurant { -webkit-mask-image: url("/assets/Icons/restaurant-line (1).svg"); mask-image: url("/assets/Icons/restaurant-line (1).svg"); } .icon-target { -webkit-mask-image: url("/assets/Icons/icon-target.svg"); mask-image: url("/assets/Icons/icon-target.svg"); } .icon-ingredients { -webkit-mask-image: url("/assets/Icons/Drum Stick.svg"); mask-image: url("/assets/Icons/Drum Stick.svg"); } .icon-seasonings { -webkit-mask-image: url("/assets/Icons/flame-fill-svgrepo-com.svg"); mask-image: url("/assets/Icons/flame-fill-svgrepo-com.svg"); } .icon-utensils { -webkit-mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); } /* ---------- login ---------- */ /* Kept simple on purpose — flat dashboard-grey background, no grid/scanline effects. Corner registration marks + HUD title block stay as a light nod to the "blueprint" name. The panel itself is cut from the same chamfered-corner shape (clip-path + blue top accent) every card and public intake form already uses (see .intake-card above) instead of a plain rounded rectangle, so this is the same shape language as the rest of the product, just sized up for one hero panel. */ .login-screen { min-height: 100vh; display: grid; place-items: center; padding: 40px; position: relative; overflow: hidden; background: var(--canvas); } .login-crop-mark { position: absolute; width: 22px; height: 22px; z-index: 1; border: 0 solid var(--primary); opacity: 0; animation: login-crop-in .5s var(--ease) forwards; } .login-crop-mark.tl { top: 26px; left: 26px; border-top-width: 2px; border-left-width: 2px; animation-delay: .05s; } .login-crop-mark.tr { top: 26px; right: 26px; border-top-width: 2px; border-right-width: 2px; animation-delay: .15s; } .login-crop-mark.bl { bottom: 26px; left: 26px; border-bottom-width: 2px; border-left-width: 2px; animation-delay: .25s; } .login-crop-mark.br { bottom: 26px; right: 26px; border-bottom-width: 2px; border-right-width: 2px; animation-delay: .35s; } @keyframes login-crop-in { from { opacity: 0; transform: scale(.4); } to { opacity: .5; transform: scale(1); } } .login-hud { position: absolute; z-index: 1; font-family: monospace; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-dark); opacity: 0; animation: fade-in .6s var(--ease) .5s forwards; } .login-hud.tl { top: 30px; left: 58px; } .login-hud.tr { top: 30px; right: 58px; } .login-panel { width: min(100%, 420px); display: grid; gap: 22px; justify-items: center; padding: 44px 36px 30px; border: 1px solid var(--line-strong); border-top: 2px solid var(--primary); clip-path: polygon(0 0, calc(100% - var(--card-cut-hero)) 0, 100% var(--card-cut-hero), 100% 100%, 0 100%); background: var(--surface); box-shadow: var(--shadow-lg); position: relative; z-index: 1; animation: rise-in .5s var(--ease) both; } .login-logo { width: min(46vw, 150px); filter: drop-shadow(0 6px 16px rgba(123,169,208,.18)); } .login-form { width: 100%; display: grid; gap: 16px; } .login-form .btn-primary { margin-top: 4px; justify-content: center; } .login-form .link-btn { font-size: 12px; } /* Same pill recipe as the "Auto-sends" badge (.badge.success in emails.js) — dot + label in a tinted rounded chip — recolored to the brand blue, with the ring itself breathing light instead of a static border. */ .login-footnote { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 11px; border-radius: var(--r-pill); background: rgba(123,169,208,.14); border: 1px solid rgba(123,169,208,.4); color: var(--blue-bright); font-family: var(--font-body), Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; animation: login-footnote-pulse 2.6s ease-in-out infinite; } .login-status-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: currentColor; box-shadow: 0 0 6px currentColor; } @keyframes login-footnote-pulse { 0%, 100% { border-color: rgba(123,169,208,.4); box-shadow: 0 0 0 rgba(123,169,208,0); } 50% { border-color: rgba(145,190,221,.95); box-shadow: 0 0 12px rgba(123,169,208,.55); } } @media (prefers-reduced-motion: reduce) { .login-crop-mark, .login-hud, .login-panel, .login-footnote { animation: none; } .login-crop-mark { opacity: .5; } .login-hud { opacity: 1; } .login-footnote { border-color: rgba(123,169,208,.4); } } /* public intake forms (remote-consult.html / inperson-eval.html) — same "studio" look as the coach dashboard (rounded corner, blue top accent) so a prospect's first touchpoint reads as the same product. The app shell's `html`/`body { height:100%; overflow:hidden }` above is built for the dashboard's fixed-viewport layout and clips any intake content taller than the viewport — these public pages need normal document scrolling instead, scoped via `.intake-body` so the dashboard shell is untouched. */ html:has(body.intake-body), body.intake-body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } .intake-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--canvas); } .intake-card { width: min(100%, 400px); display: grid; gap: 22px; padding: 36px 32px; border: 1px solid var(--line-strong); border-top: 2px solid var(--primary); clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); background: var(--surface); box-shadow: var(--shadow-lg); } .intake-logo { width: 84px; margin: 0 auto; display: block; } .intake-heading { text-align: center; display: grid; gap: 6px; } /* font-weight left at the default 400 (not overridden to 700) — Garp Sans Wide only ships a 400 weight file (see tokens.css @font-face), so asking for bold made the browser synthesize/fake it, which rendered as a blurry double-stroke instead of a real bold. */ .intake-heading h1 { font-size: 28px; color: var(--text-primary); } .intake-heading p { margin: 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; } .intake-form { display: grid; gap: 14px; } .intake-form .btn-primary { justify-content: center; margin-top: 4px; } .intake-success { text-align: center; display: grid; gap: 8px; } .intake-success h2 { font-size: 17px; color: var(--text-primary); } .intake-success p { margin: 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; } /* Once the success panel replaces the form, the page's intro copy is stale — it is still inviting you to fill in something that is no longer on screen. Opt-in by class, so a page keeps whatever heading it wants above the confirmation (the h1 stays; only the "fill this in" lines go). :has() on the card rather than a JS toggle keeps this working for every form that swaps in .intake-success, including ones driven by shared intake.js. */ .intake-card:has(.intake-success:not(.is-hidden)) .intake-heading-intro { display: none; } .intake-card-wide { width: min(100%, 480px); } .intake-card-xwide { width: min(100%, 640px); } /* ---------- light theme for public forms ---------- Opt-in per page via , because the coach dashboard itself stays dark-only (see tokens.css's "Light theme removed" note) — this is specifically for the pages a player/parent opens cold on their phone, where the dark studio look tested as hard to read. Deliberately a token remap, not a parallel set of component rules: every intake, signup, waiver, button and input rule below already paints from these variables, so re-pointing them re-skins the whole page and can't drift out of sync with the dark version the way a duplicated rule set would. Palette matches the transactional email template (Code.gs) so a player who got the email and then opens the form sees one brand. --primary/--secondary swap roles rather than getting new names: on dark, --primary is the pastel blue that carries fills with navy (--secondary) text on top; on white that pastel has nowhere near enough contrast for a button, so primary becomes the navy ink and secondary becomes the white sitting on it. Every .btn-primary/.signup-step-dot.is-active/ .rating-circle.is-selected rule then inverts correctly for free. */ body.intake-light { --canvas: #EEF1F5; --surface: #FFFFFF; --surface-raised: #F8FAFC; --border: #E2E8F0; --line-strong: #CBD5E1; --text-primary: #13294C; --text-secondary: #334155; --text-tertiary: #64748B; --muted-dark: #94A3B8; --primary: #13294C; --primary-hover: #1E3A63; --secondary: #FFFFFF; /* Paired with --secondary above by .intake-slot-btn.is-selected / .intake-cal-day.is-selected, which set a --secondary fill with --blue-bright text — that pastel is invisible on white, so on light it resolves to the same navy ink as the rest of the page. */ --blue-bright: #13294C; --hover: rgba(19,41,76,.04); --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 4px 14px rgba(15,23,42,.07); --shadow-lg: 0 10px 30px rgba(15,23,42,.08); --shadow-focus: 0 0 0 3px rgba(19,41,76,.14); } /* Rounded card, not the dark theme's clipped corner — the cut corner is a dashboard motif; the email this matches is plain rounded. */ .intake-light .intake-card { clip-path: none; border-radius: var(--r-lg); border: 1px solid var(--border); border-top: 1px solid var(--border); } /* Full wordmark lockup instead of the white mark — "Blueprint Logo W.png" is literally white artwork and would be invisible here. */ .intake-light .intake-logo { width: min(268px, 80%); } .intake-light .intake-heading { padding-top: 24px; border-top: 2px solid var(--primary); } /* Type sizing is part of the fix, not decoration: the dark form's 10px all-caps micro-labels are what made this hard to read cold on a phone. */ .intake-light label { font-size: 12px; letter-spacing: .2px; text-transform: none; font-weight: 600; color: var(--text-secondary); } .intake-light .intake-heading p, .intake-light .intake-success p { font-size: 14px; } .intake-light .signup-step-label { font-size: 16px; } .intake-light .field-hint { font-size: 12.5px; } /* 16px is the threshold below which iOS Safari auto-zooms the viewport on focus — every player fills this out on a phone, so anything smaller means the page lurches on each field tap. */ .intake-light input, .intake-light select, .intake-light textarea { font-size: 16px; } .intake-light input, .intake-light select { height: 46px; } .intake-light .waiver-block { background: var(--surface-raised); } .intake-light .waiver-text { background: var(--surface); font-size: 12.5px; } .intake-light .waiver-checkbox { font-size: 13.5px; } .intake-light .signup-step-dot { background: var(--surface-raised); } /* Selectable chips/days on light (fall-signup.html's group picker). The dark rule paints a --secondary fill with --blue-bright text; on light both of those resolve to near-white-on-navy's opposites, leaving "selected" as a border change only. Invert it to the same navy-on-white fill the light .btn-primary uses so the picked slot reads at a glance. */ .intake-light .intake-slot-btn.is-selected, .intake-light .intake-cal-day.is-selected { background: var(--primary); border-color: var(--primary); color: var(--secondary); } /* Same readability bump as the fields above — these are the other thing a player has to read cold on a phone. */ .intake-light .intake-slot-btn { font-size: 13.5px; padding: 11px 16px; } /* Free In-Person Eval waiver block (inperson-eval.html, js/waiver.js) — scrollable legal text + e-signature fields, gating the submit button via real `required` attributes rather than just JS validation. */ .waiver-block { display: grid; gap: 12px; padding: 16px; margin-top: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); } .waiver-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-primary); } .waiver-text { max-height: 220px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--canvas); font-size: 12px; line-height: 1.6; color: var(--text-secondary); } .waiver-text p { margin: 0 0 10px; } .waiver-text p:last-child { margin-bottom: 0; } .waiver-text strong { color: var(--text-primary); } .waiver-checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); } .waiver-checkbox input { width: 16px; height: 16px; flex: 0 0 auto; } .waiver-guardian-fields { display: grid; gap: 12px; padding: 12px; border-left: 2px solid var(--primary); } /* Signup wizard (welcome.html/js/welcomeAthlete.js) — numbered step indicator + one visible .signup-step at a time, Next/Back nav. Reuses .intake-form's own field styling; only the step chrome is new here. */ .signup-steps { display: flex; align-items: center; justify-content: center; gap: 6px; } .signup-step-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-tertiary); background: var(--canvas); border: 1px solid var(--line-strong); flex: 0 0 auto; } .signup-step-dot.is-active { color: var(--secondary); background: var(--primary); border-color: var(--primary); } .signup-step-dot.is-done { color: var(--primary); border-color: var(--primary); } .signup-step-sep { width: 16px; height: 1px; background: var(--line-strong); flex: 0 0 auto; } .signup-step { display: grid; gap: 14px; } .signup-step-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); } .signup-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } .signup-nav .btn-primary { flex: 1; justify-content: center; } .signup-nav-back { visibility: hidden; } .signup-nav-back.is-visible { visibility: visible; } /* Season Feedback survey (season-feedback.html) — numbered rating circles + chip groups, built from Command/js/seasonFeedback.js. */ .field-block { display: grid; gap: 8px; } .field-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.4; } .field-hint { margin: -4px 0 0; color: var(--text-tertiary); font-size: 11.5px; } .field-hint-inline { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--muted-dark); } .rating-scale { display: flex; flex-wrap: wrap; gap: 6px; } .rating-circle { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), transform .1s var(--ease); } .rating-circle:hover { border-color: var(--primary); color: var(--text-primary); } .rating-circle.is-selected { background: var(--primary); border-color: var(--primary); color: var(--secondary); transform: scale(1.05); } .rating-scale-caption { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-tertiary); } .rating-table { display: grid; gap: 16px; } .rating-table-row { display: grid; gap: 6px; } .rating-table-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } /* Season Feedback results accordion (survey-results-modal, surveyResults.js) */ .results-list { display: grid; gap: 8px; } .results-row { border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); } .results-row-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left; } .results-row-head:hover { background: var(--surface-raised); } .results-row-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .results-row-date { font-size: 11.5px; color: var(--text-tertiary); flex: 0 0 auto; } .results-chevron { flex: 0 0 auto; color: var(--text-tertiary); transition: transform .14s var(--ease); } .results-row-head.is-open .results-chevron { transform: rotate(180deg); } .results-row-detail { display: grid; gap: 9px; padding: 4px 14px 14px; border-top: 1px solid var(--border); } .results-qa-row { display: grid; gap: 2px; } .results-qa-q { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-tertiary); } .results-qa-a { font-size: 13px; color: var(--text-primary); line-height: 1.5; } /* Fall Sign-Up results (fall-signup-results-modal, fallSignupResults.js) — by-group roster overview + a flat (non-accordion) list of every response. */ .fall-overview { display: grid; gap: 10px; margin-bottom: 6px; } .fall-group-card { border: 1px solid var(--line-strong); border-left: 3px solid var(--card-accent, var(--primary)); border-radius: var(--r-sm); background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; } .fall-group-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* Garp Sans Wide (--font-display) only ships a 400 weight (see tokens.css) — its letterforms already read heavy/bold at this size, so no font-weight override here (that fakes a bold the font doesn't have and comes out blurry, same lesson as .intake-heading h1 above). */ .fall-group-card-title { font-family: var(--font-display); font-size: 24px; color: var(--text-primary); } .fall-group-card-count { font-size: 14px; font-weight: 700; color: var(--text-tertiary); } .fall-group-card-names { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .fall-group-card-names li { font-size: 13.5px; color: var(--text-secondary); } .fall-group-card-empty { margin: 0; font-size: 12.5px; color: var(--text-tertiary); font-style: italic; } .fall-group-card-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fall-group-card-edit label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); } .fall-group-card-edit input[type="number"] { width: 56px; padding: 4px 6px; font-size: 12.5px; } .fall-group-card-edit-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .fall-group-card-note { margin: 0; font-size: 11.5px; color: var(--text-tertiary); font-style: italic; } .fall-add-group-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1fr 90px 44px auto; gap: 8px; align-items: center; margin-bottom: 4px; } .fall-group-card-schedule { margin: 0; font-size: 12.5px; color: var(--text-secondary); } .fall-response-detail { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .fall-response-detail span { color: var(--text-tertiary); font-weight: 600; } .fall-group-card-edit .ghost-btn.danger { color: #ef5350; } .fall-add-group-row input[type="color"] { padding: 2px; height: 34px; } .results-flat-list { display: grid; gap: 8px; } .fall-response-row { border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); padding: 10px 14px; display: grid; gap: 4px; } .fall-response-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--text-primary); } .fall-response-edit { margin-left: auto; } .fall-response-meta { font-size: 11.5px; color: var(--text-tertiary); } .intake-slots-field { display: grid; gap: 7px; } .intake-slots-field > span { color: var(--text-tertiary); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; } .intake-slots { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--muted-dark); } .intake-slot-btn { border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text-secondary); padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease); } .intake-slot-btn:hover { border-color: var(--primary); color: var(--text-primary); } .intake-slot-btn.is-selected { background: var(--secondary); border-color: var(--primary); color: var(--blue-bright); } /* Per-day time rows under the training-days chips (player profile) — one row per selected day since sessions can land at different times on different days (e.g. Mon 4pm, Wed 6pm). */ .training-day-times { display: grid; gap: 6px; margin-top: 10px; } .training-day-time-row { display: flex; align-items: center; gap: 10px; } .training-day-time-row .training-day-label { width: 36px; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .training-day-time-row input[type="time"] { flex: 1; max-width: 200px; } .training-days-empty { margin: 0; font-size: 12px; color: var(--text-tertiary); } /* ---------- In-Person Training interest form (fall-signup.html) ---------- One row per group rather than a grid of cards: the four three-day groups differ only by time, so a row that lines Mon/Wed/Sat up in fixed columns lets someone compare them by scanning straight down a column. Cards put each group's times in a different place on screen. No per-group accent colour: five colour-coded rows competing with five availability badges gave the page two colour systems saying different things. The badge is the only thing here that carries meaning by colour. */ .group-rows { display: grid; gap: 8px; } .group-card { display: grid; grid-template-columns: minmax(72px, auto) 1fr auto; align-items: center; gap: 14px; padding: 13px 15px; text-align: left; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color .12s var(--ease), box-shadow .12s var(--ease), background-color .12s var(--ease); } .group-card:hover:not(:disabled) { border-color: var(--primary); box-shadow: var(--shadow-sm); } .group-card-name { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-primary); } /* Fixed-width columns, not auto — the times must line up row to row or the comparison the layout exists for does not work. */ .group-card-times { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .group-card-time { display: grid; gap: 1px; } .group-card-day { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); } .group-card-hour { font-size: 14px; font-weight: 600; color: var(--text-primary); } /* Selected is a navy wash plus a ring, not a fill: a solid navy row would bury the times and the badge, which are the reason the row exists. */ .group-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); background: var(--hover); } .group-card:disabled, .group-card.is-full { cursor: not-allowed; opacity: .55; } .group-card.is-full:hover { border-color: var(--border); box-shadow: none; } /* Badges carry the scarcity, so they are the one place on the page allowed a tint. Kept to a wash + hairline rather than a saturated fill — five solid colour blocks down a phone screen reads as a sales page, which is exactly the tone this form is supposed to avoid. */ .group-badge { justify-self: end; white-space: nowrap; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; } .group-badge.is-open { color: #166534; background: #F0FDF4; border-color: #BBF7D0; } .group-badge.is-tight { color: #9A3412; background: #FFF7ED; border-color: #FED7AA; } .group-badge.is-full { color: #991B1B; background: #FEF2F2; border-color: #FECACA; } /* These two headings are the page's real navigation — they tell a parent whether they are looking at a three-day commitment or a Saturday. At 11px uppercase tertiary they read as a caption above the rows; at full size in navy they read as the section titles they are. */ .group-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 16px 0 2px; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-primary); } .group-section-label:first-of-type { margin-top: 4px; } /* Price sits with the heading, not on the rows: all four three-day groups cost the same, so repeating it per row would be noise. margin-left:auto keeps it hard right even when the heading wraps to its own line. */ .group-section-price { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .price-note { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-tertiary); } /* Multi-select goals — a checkbox row styled as a chip. The real input stays in the DOM (visually hidden, not display:none) so the form still submits it and it remains reachable by keyboard and screen reader. */ .goal-group { display: flex; flex-wrap: wrap; gap: 8px; } .goal-chip { display: inline-flex; } .goal-chip input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .goal-chip span { display: inline-block; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease); } .goal-chip span:hover { border-color: var(--primary); color: var(--text-primary); } .goal-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--secondary); } .goal-chip input:focus-visible + span { box-shadow: var(--shadow-focus); } .intake-subheading { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: .01em; } .field-optional { font-style: normal; font-weight: 400; color: var(--text-tertiary); text-transform: none; } .request-note { margin-top: -2px; text-align: center; } @media (max-width: 520px) { /* The name and badge share the top line, the three times sit underneath still in their own columns — a phone can't fit all five across, but the column alignment that makes the groups comparable has to survive. */ .group-card { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px 14px; } .group-card-times { grid-column: 1 / -1; } .group-badge { grid-row: 1; grid-column: 2; } } } /* Inline month calendar for the intake forms — every day already shows whether it has openings (dimmed + unclickable if not), so there's no more clicking through dates one at a time to find one that isn't empty. Same visual language as the coach Calendar page's month grid, scaled down. */ .intake-cal-field { display: grid; gap: 7px; } .intake-cal-field > span { color: var(--text-tertiary); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; } .intake-calendar { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); padding: 12px; display: grid; gap: 10px; } .intake-cal-head { display: flex; align-items: center; justify-content: space-between; } .intake-cal-head span { font-size: 13px; font-weight: 700; color: var(--text-primary); } .intake-cal-nav { width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--text-secondary); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .intake-cal-nav:hover:not(:disabled) { border-color: var(--primary); color: var(--text-primary); } .intake-cal-nav:disabled { opacity: .35; cursor: default; } .intake-cal-weekdays, .intake-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .intake-cal-weekdays span { text-align: center; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); font-weight: 700; } .intake-cal-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .intake-cal-day.is-outside { color: var(--muted-dark); } .intake-cal-day:not(.is-disabled):hover { border-color: var(--primary); color: var(--text-primary); } .intake-cal-day.is-disabled { color: var(--muted-dark); opacity: .35; cursor: default; } .intake-cal-day.is-selected { background: var(--secondary); border-color: var(--primary); color: var(--blue-bright); } /* Fields — same recipe as Primitives' .input/.select/.textarea: --surface background that stays put on focus (only border-color + --shadow-focus change), --border not --line-strong, --r-sm radius. */ label { display: grid; gap: 7px; color: var(--text-tertiary); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; } input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); background: var(--surface); outline: 0; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); } input, select { height: 38px; padding: 0 12px; } textarea { min-height: 88px; padding: 11px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--muted-dark); } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); } input:hover, select:hover { border-color: var(--line-strong); } /* ---------- shell / sidebar ---------- */ .coach-app { position: relative; min-width: 1330px; height: 100vh; min-height: 0; display: flex; flex-direction: row; overflow: hidden; background-color: var(--canvas); background-image: radial-gradient(circle at 12% 0%, rgba(123,169,208,.05), transparent 32%); } .tab { border: 0; background: none; } .icon-home { -webkit-mask-image: url("/assets/Icons/home-line.svg"); mask-image: url("/assets/Icons/home-line.svg"); } .icon-tasks { -webkit-mask-image: url("/assets/Icons/task-done-svgrepo-com.svg"); mask-image: url("/assets/Icons/task-done-svgrepo-com.svg"); } .icon-leads { -webkit-mask-image: url("/assets/Icons/user-3-fill.svg"); mask-image: url("/assets/Icons/user-3-fill.svg"); } .icon-calendar { -webkit-mask-image: url("/assets/Icons/calendar-line.svg"); mask-image: url("/assets/Icons/calendar-line.svg"); } .icon-forms { -webkit-mask-image: url("/assets/Icons/icon-clipboard-check.svg"); mask-image: url("/assets/Icons/icon-clipboard-check.svg"); } .icon-emails { -webkit-mask-image: url("/assets/Icons/inbox-alt-1-svgrepo-com.svg"); mask-image: url("/assets/Icons/inbox-alt-1-svgrepo-com.svg"); } .icon-wishlist { -webkit-mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); mask-image: url("/assets/Icons/cube-svgrepo-com.svg"); } .icon-vault { -webkit-mask-image: url("/assets/Icons/shield-alt-1-svgrepo-com.svg"); mask-image: url("/assets/Icons/shield-alt-1-svgrepo-com.svg"); } .icon-timer { -webkit-mask-image: url("/assets/Icons/icon-timer.svg"); mask-image: url("/assets/Icons/icon-timer.svg"); } .icon-apps { -webkit-mask-image: url("/assets/Icons/apps-grid.svg"); mask-image: url("/assets/Icons/apps-grid.svg"); } /* Buttons — .primary-btn/.ghost-btn/.danger-btn are gone from the markup entirely now; every usage site was renamed to tokens.css's real .btn/ .btn-primary/.btn-ghost/.btn-danger + .btn-sm/.btn-md, so those primitives do all the work with no local override needed. What's left here are Command-only buttons Blueprint doesn't define a primitive for: icon-only square buttons (.icon-btn, .mini-btn, .nav-arrow), the account/user pill (.user-pill, unused today but kept for parity), and the plain-text .link-btn. These get the same flat, no-gradient treatment as .btn. */ .mini-btn, .link-btn, .user-pill, .icon-btn, .nav-arrow { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-sm); font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease); } .user-pill, .icon-btn, .mini-btn, .nav-arrow { background: transparent; border-color: var(--line-strong); color: var(--text-secondary); } .mini-btn { height: 27px; padding: 0 10px; font-size: 11px; } .mini-btn:hover { background: var(--surface-raised); color: var(--text-primary); } .nav-arrow { height: 30px; padding: 0 11px; font-size: 13px; } .nav-arrow:hover { background: var(--surface-raised); color: var(--text-primary); } .nav-arrow:disabled { opacity: .35; cursor: not-allowed; } .user-pill { max-width: 190px; height: 32px; padding: 0 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; } .icon-btn { width: 32px; height: 32px; font-size: 14px; } .icon-btn:hover { background: rgba(241,90,90,0.1); border-color: var(--danger); color: var(--danger); } .link-btn { justify-self: center; background: transparent; border: 0; color: var(--primary); font-weight: 500; } /* was var(--blue-bright) — a light pastel blue with fine contrast on the fixed-dark chrome it was designed for, but this link sits on --canvas, which lightens in light mode, so a lighter-still hover color nearly vanished. --primary-hover reads correctly against both. */ .link-btn:hover { color: var(--primary-hover); } .status { min-height: 18px; margin: 0; color: var(--text-secondary); font-size: 12px; } /* Same shape as tokens.css's .status-pill (BDG-02), minus the fixed color variants — lead stage/color/priority tags need an arbitrary per-instance color (set inline by ui.js's pill()), not one of the 5 fixed semantic ones, so the shape is factored out here instead of duplicating the fixed-variant version for a case it can't actually serve. */ .dyn-pill { display: inline-block; max-width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border-radius: var(--r-pill); padding: 6px var(--sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } /* ---------- layout ---------- */ .app-body { flex: 1; min-height: 0; overflow: hidden; display: flex; } .left-panel, .right-panel { width: 246px; flex: 0 0 auto; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); } .right-panel { border-right: 0; border-left: 1px solid var(--border); } .center-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: transparent; } .center-panel.full-width { flex: 1 1 100%; } /* Coach Detail's whole content (hero + form fields + athletes table) scrolls as one page, unlike Player Detail's per-tab scrolling (.detail-tab-panel below) — there's no tab system here, and the athletes table sits outside the

entirely, so nothing inside would otherwise pick up a scrollbar and the page just silently clipped past the fold. */ #coach-detail-view .center-panel { overflow-y: auto; } .panel-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 14px; border-bottom: 1px solid var(--border); } .panel-title p, .eyebrow { margin: 0; color: var(--muted-dark); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .panel-search { margin: 10px 8px 0; width: calc(100% - 16px); height: 32px; font-size: 12px; } .section-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .section-bar h2 { font-size: 19px; } .section-bar-actions, .row-actions { display: flex; align-items: center; gap: 8px; } .lead-filter-select { width: auto; height: 32px; padding: 0 8px; font-size: 12px; } .lead-color-picker { display: flex; align-items: center; gap: 4px; } .lead-color-swatch { width: 16px; height: 16px; border-radius: 50%; padding: 0; border: 2px solid transparent; background: var(--swatch-color); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.25); } .lead-color-swatch.active { border-color: var(--text-primary); } /* Per-row "more actions" menu (leads table) — now a direct port of Surfaces' .menu-panel/.menu-item/.row-actions-btn (TBL-01's row-action pattern), same as .account-dropdown already was via tokens.css. */ .lead-menu-wrap { position: relative; } .row-menu-btn, .row-actions-btn { width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); border: none; background: none; color: var(--text-tertiary); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .row-menu-btn:hover, .row-actions-btn:hover { background: var(--surface-raised); color: var(--text-primary); } .lead-menu, .menu-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 190px; display: grid; gap: 2px; padding: var(--xs); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raised); box-shadow: var(--shadow-lg); text-align: left; } .menu-panel.is-hidden { display: none; } .lead-menu-label { padding: 4px 6px; color: var(--text-tertiary); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; } .lead-menu .lead-color-picker { padding: 0 6px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .lead-menu-item, .menu-item { display: flex; align-items: center; gap: var(--sm); width: 100%; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 600; text-align: left; padding: var(--xs) var(--sm); cursor: pointer; } .lead-menu-item:hover, .menu-item:hover { background: var(--hover); } .lead-menu-item.is-danger:hover, .menu-item.danger:hover { background: rgba(241,90,90,0.1); color: var(--danger); } /* ---------- Avatar (PRM — avatars) — Primitives' exact .avatar/.size-* recipe. .avatar-tagged (a colored ring for lead-color tagging) is a genuine Command-only extension layered on top, not a competing redefinition. */ .avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--secondary); background: var(--primary); position: relative; flex-shrink: 0; overflow: hidden; } .avatar.size-sm { width: 28px; height: 28px; font-size: 11px; } .avatar.size-md { width: 40px; height: 40px; font-size: 14px; } .avatar.size-lg { width: 56px; height: 56px; font-size: 18px; } .avatar.size-xl { width: 96px; height: 96px; font-size: 30px; } .avatar.avatar-tagged { box-shadow: 0 0 0 2px var(--swatch-color); } .avatar-photo { object-fit: cover; } .avatar > .avatar-photo { width: 100%; height: 100%; } /* ---------- category list (left panel) ---------- */ .folder-list { padding: 10px 8px; display: grid; gap: 6px; overflow-y: auto; } .cat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-left: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; } .cat-row:hover { background: var(--hover); } .cat-row.active { background: var(--secondary); color: var(--blue-bright); border-left-color: var(--pillar-color, var(--primary)); } .count { color: var(--muted-dark); font-size: 11px; font-variant-numeric: tabular-nums; } .empty-state { color: var(--text-tertiary); font-size: 12px; padding: 16px; } .empty-state.small { padding: 8px 12px; } /* ---------- card grid (wishlist) ---------- */ .program-card-list { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; align-content: start; align-items: start; } /* ---------- modals ---------- Same recipe as Surfaces' OVL-02 dialog: --surface (not --surface-raised — a dialog is a card, not a popover), --border, --r-lg, --shadow-lg. */ .modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(6,6,7,.68); backdrop-filter: blur(3px); padding: 24px; animation: fade-in .16s var(--ease); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-card { width: min(100%, 520px); max-height: 88vh; overflow-y: auto; clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-lg); animation: rise-in .18s var(--ease); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 21px; border-bottom: 1px solid var(--border); } .modal-head h2 { font-size: 16.5px; } .modal-form { display: grid; gap: 15px; padding: 21px; } .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .modal-actions .status { margin-right: auto; } /* Generic N-column field row / checkbox row, reused across most add/edit modals (task, lead, wishlist item, staff group...). */ .meal-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .meal-type-field { display: grid; gap: 8px; } .meal-type-checks { display: flex; flex-wrap: wrap; gap: 12px; } .meal-type-checks label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); font-weight: 400; } .assignee-select { position: relative; } .assignee-select-trigger { width: 100%; height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-primary); font-size: 13px; text-align: left; cursor: pointer; transition: border-color .16s var(--ease), background-color .16s var(--ease); } .assignee-select-trigger:hover { border-color: var(--line-strong); } .assignee-select.is-open .assignee-select-trigger { border-color: var(--primary); box-shadow: var(--shadow-focus); } .assignee-select-caret { color: var(--text-tertiary); font-size: 11px; transition: transform .16s var(--ease); } .assignee-select.is-open .assignee-select-caret { transform: rotate(180deg); } /* Positioned as a fixed-position "portal" (moved to a direct child of in JS) rather than absolute inside .assignee-select — the modal card's overflow-y:auto would otherwise clip this panel wherever it overflows the modal card, regardless of z-index. Same --surface-raised/--r-md recipe as .menu-panel — it's a floating popover, not a card. */ .assignee-select-panel { position: fixed; z-index: 999; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; max-height: 260px; overflow-y: auto; } .assignee-select-all-row { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border); cursor: pointer; } .assignee-select-list { display: grid; gap: 1px; } .assignee-select-list label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-secondary); font-weight: 400; cursor: pointer; } .assignee-select-list label:hover { background: var(--hover); } .assignee-select-list label.is-disabled { opacity: .5; cursor: not-allowed; } .assignee-select-all-row input, .assignee-select-list input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; } /* Compose modal's recipient picker (Command/js/composeEmail.js) — same .assignee-select-list row/checkbox styling as the Tasks assignee picker above, but laid out inline in the modal's normal flow (scrollable box) instead of a fixed-position dropdown popover, since here the list IS the modal's main content rather than a secondary field. */ .compose-recipient-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px; margin-top: 4px; } .compose-recipient-row .meta { font-size: 11px; } .compose-recipient-type-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--text-tertiary); background: var(--hover); border-radius: 999px; padding: 2px 7px; margin-left: auto; } .gate-wrap { display: flex; align-items: center; justify-content: center; padding: 60px 20px; } .gate-card { width: min(100%, 380px); border: 1px solid var(--line-strong); clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); background: var(--surface); padding: 24px; display: grid; gap: 6px; } .gate-card h2 { font-size: 17px; color: var(--text-primary); } .gate-card .meta { color: var(--text-tertiary); font-size: 12px; margin-bottom: 8px; } /* tasks */ .task-complete-check { width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; } .task-overdue { color: var(--danger); font-weight: 700; } .staff-group-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .staff-group-row span:first-child { flex: 1; font-weight: 600; } .data-table tbody tr.is-complete td { opacity: .5; } .data-table tbody tr.is-complete strong { text-decoration: line-through; } .data-table td .task-complete-check { margin: 0; } /* Forms/Emails card grid — same recipe as Workshop's .program-card: cut corner + colored left accent bar instead of a rounded card with a top bar. */ .wishlist-card { min-width: 0; padding: 18px; border: 1px solid var(--line-strong); border-left: 3px solid var(--card-accent, var(--primary)); background: var(--surface); clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); display: grid; gap: 9px; position: relative; overflow: hidden; transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); } .wishlist-card:hover { transform: translateY(-2px); border-color: var(--muted-dark); box-shadow: var(--shadow-md); } /* min-height reserves the badge's own height whether or not it's present, so a non-automated card's header row doesn't sit shorter than one with the "Auto-sends" badge. */ .wishlist-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 28px; } .wishlist-card-head h3 { font-size: 15px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Never let the category badge shrink — without this it was the title and badge splitting the available space evenly (flexbox's default), so a long title could squeeze the badge's un-ellipsized text past the card's own clip-path corner instead of the title (which already handles running out of room via the ellipsis above) giving up the space first. */ .wishlist-card-head .dyn-pill { flex: 0 0 auto; } .wishlist-card-actions { display: flex; gap: 6px; } .wishlist-card-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; } /* Fixed 3-line box (clamped AND height-locked) — templates have wildly different body lengths; a shorter body still reserves the full 3 lines of space so it doesn't leave the card shorter than its neighbors. */ .form-card-link { margin: 0; font-size: 11px; line-height: 1.5; height: 4.5em; color: var(--muted-dark); font-family: monospace; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Trigger row — small icon chip (bolt) + label, replacing the old raw "⚡ emoji + gray text" line with something that reads as a designed part of the card instead of a stray character. */ /* min-height reserves room for a 2-line trigger label whether or not the text actually wraps that far, so this row is the same height on every card (including the blank placeholder on non-automated templates). */ .auto-send-trigger { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-tertiary); min-height: 35px; } .auto-send-trigger-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--r-sm); background: rgba(245,166,35,.14); color: var(--warning); } .auto-send-trigger-icon svg { width: 11px; height: 11px; } /* Non-automated templates still reserve this row's height (via visibility:hidden, not display:none) so every card in the grid stays the same height — leave the space blank instead of collapsing it. */ .auto-send-trigger.is-blank { visibility: hidden; } /* vault — same cut-corner row recipe as the data-table rows */ .vault-entry-list { padding: 16px 22px; display: grid; gap: 7px; } .vault-entry-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-strong); clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%); transition: border-color .16s var(--ease); } .vault-entry-row:hover { border-color: var(--muted-dark); } .vault-entry-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .vault-entry-main strong { color: var(--text-primary); font-size: 13px; } .vault-password { font-family: monospace; color: var(--primary); font-size: 13px; } /* ---------- data table (TBL-01) — re-skinned to Workshop's row-list recipe: table/thead/tbody become block boxes and each becomes a CSS grid row, so it can carry the same cut-corner clip-path + hairline border as Workshop's .library-row instead of a boxed . Column widths are defined per view below since each table has a different shape; th/td counts must stay in sync with those templates. Sort indicators (th[data-sort-field]) and row/cell semantics are untouched. */ .data-table-wrap { flex: 1; overflow: auto; padding: 16px 22px; } .data-table { width: 100%; border-collapse: collapse; background: transparent; border: 0; border-radius: 0; font-size: 13px; display: block; } .data-table thead, .data-table tbody, .data-table tfoot { display: block; width: 100%; } .data-table thead tr, .data-table tbody tr, .data-table tfoot tr { display: grid; align-items: center; gap: 14px; } .data-table thead tr { padding: 0 16px 8px; border-bottom: 1px solid var(--line-strong); margin-bottom: 8px; } /* Cut-corner border/background live on ::before (not the itself) — clip-path on the row would clip any popover (.lead-contact-menu, .lead-menu) that opens below/beside it, since clip-path clips a box's whole subtree, not just overflow. This keeps the row visual without trapping its dropdowns. */ .data-table tbody tr { position: relative; z-index: 0; min-height: 52px; padding: 0 16px; margin-bottom: 7px; } .data-table tbody tr::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line-strong); background: var(--surface); clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%); transition: border-color .16s var(--ease), background-color .16s var(--ease); } .data-table tbody tr:last-child { margin-bottom: 0; } .data-table th { text-align: left; padding: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-tertiary); background: none; white-space: nowrap; } .data-table th[data-sort-field] { cursor: pointer; user-select: none; } .data-table th[data-sort-field]:hover { color: var(--text-secondary); } .data-table th[data-sort-field].is-sorted { color: var(--primary); } .data-table th[data-sort-field].is-sorted::after { content: " ▾"; } .data-table td { padding: var(--sm) 0; font-size: 13px; border-top: 0; color: var(--text-secondary); vertical-align: middle; min-width: 0; } .data-table td strong { color: var(--text-primary); font-size: 13.5px; } .data-table tbody tr.row-hover:hover::before { border-color: var(--muted-dark); background: var(--surface-raised); } .data-table tbody tr[data-open-player] { cursor: pointer; } .data-table tfoot tr { padding: 8px 16px; grid-template-columns: 1fr; } .data-table tfoot td { padding: 0; color: var(--muted-dark); font-size: 11.5px; border-top: 0; } .table-cell-user { display: flex; align-items: center; gap: var(--sm); min-width: 0; } .table-cell-user .meta { font-size: 11.5px; color: var(--text-tertiary); } .table-cell-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-actions-wrap { position: relative; text-align: right; } /* Per-table column templates — thead/tbody share the same grid so header labels line up with the data cells beneath them. */ #tasks-view .data-table thead tr, #tasks-view .data-table tbody tr { grid-template-columns: 36px minmax(0,1fr) 110px 150px 100px 160px; } #wishlist-view .data-table thead tr, #wishlist-view .data-table tbody tr { grid-template-columns: 36px minmax(0,1fr) 110px 90px 90px 160px; } #leads-view .data-table thead tr, #leads-view .data-table tbody tr { grid-template-columns: minmax(150px,1fr) 110px minmax(160px,1fr) 100px 90px 110px 130px 190px; } #players-view .data-table thead tr, #players-view .data-table tbody tr { grid-template-columns: minmax(0,2fr) 110px 110px 110px minmax(0,1fr) 150px; } #coaches-view .data-table thead tr, #coaches-view .data-table tbody tr { grid-template-columns: minmax(0,2fr) 110px 200px 150px; } #coach-detail-view .data-table thead tr, #coach-detail-view .data-table tbody tr { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } /* Leads table's Contact column — email/phone/source collapsed behind a dropdown (same .menu-panel recipe as the row's "more actions" menu) so the cell stays one line instead of wrapping across 2-3 lines per row. */ .lead-contact-wrap { position: relative; } .lead-contact-btn { width: auto; max-width: 100%; padding: 4px 8px; gap: 6px; justify-content: space-between; } .lead-contact-btn .meta { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-contact-chevron { flex-shrink: 0; color: var(--text-tertiary); } .lead-contact-btn[aria-expanded="true"] .lead-contact-chevron { transform: rotate(180deg); } .lead-contact-menu { left: 0; right: auto; min-width: 220px; gap: 6px; padding: var(--sm); } .lead-contact-row { display: flex; align-items: baseline; gap: var(--sm); font-size: 12.5px; color: var(--text-primary); } .lead-contact-label { flex: 0 0 auto; width: 46px; color: var(--text-tertiary); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; } /* player detail profile */ .athlete-detail-bar { gap: 20px; } .athlete-detail-bar-actions { display: flex; align-items: center; gap: 10px; } /* Hero header — visual only, matched to Pitch Lab's athlete-detail header (same card treatment, avatar, big name) since that's the look asked for. Every value here is read-only display; the same data is editable in the Overview tab below. Sits outside every .detail-tab-panel so it stays visible no matter which tab a coach is on. Pitch Lab's own tokens (--panel-soft/--field/--blue-deep/--blue-deep-bright/--muted-bright) map 1:1 to Command's design-system names used here — confirmed identical hex values, just different names between the two apps' copies of tokens.css. */ .athlete-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 20px 22px 0; padding: 40px 36px; border: 1px solid var(--line-strong); background: radial-gradient(circle at 12% 0%, rgba(120,169,208,.18), transparent 55%), var(--surface-raised); clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); box-shadow: var(--shadow-md); } .athlete-hero-main { display: flex; align-items: center; gap: 28px; min-width: 0; } .athlete-hero-avatar { width: 108px; height: 108px; border-radius: 999px; flex: 0 0 auto; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--secondary-hover), var(--secondary)); box-shadow: inset 0 0 0 1.5px rgba(120,169,208,.35), var(--shadow-sm); color: var(--blue-bright); font-size: 34px; font-weight: 700; } .athlete-hero-avatar .avatar-photo { width: 100%; height: 100%; object-fit: cover; } .athlete-hero-info { display: grid; gap: 10px; min-width: 0; } .athlete-hero-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .athlete-hero-name { font-size: 42px; color: #fff; letter-spacing: .3px; line-height: 1; } .athlete-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .athlete-hero-meta-item { font-size: 15px; font-weight: 700; color: var(--blue-bright); } .athlete-hero-meta-sep { color: var(--text-tertiary); font-size: 13px; } .athlete-hero-meta.is-empty { font-size: 13px; font-weight: 500; color: var(--text-tertiary); } .athlete-hero-email { font-size: 12.5px; color: var(--text-secondary); } .athlete-hero-stats { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; align-self: center; } .athlete-hero-stat { display: grid; gap: 4px; justify-items: end; text-align: right; } .athlete-hero-stat + .athlete-hero-stat { padding-left: 22px; border-left: 1px solid var(--line-strong); } .athlete-hero-stat-value { font-family: var(--font-display); font-size: 24px; line-height: 1; color: #fff; } .athlete-hero-stat-label { color: var(--muted-dark); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600; } .player-photo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } /* #player-detail-form wraps the hero/tabs/panel in a plain , which isn't a flex container by default — without this, .detail-tab-panel's flex:1/overflow-y:auto below has no bounding height to scroll against, so long panels just get clipped by .center-panel's overflow:hidden. */ #player-detail-form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .detail-tabs { display: flex; gap: 3px; padding: 3px; margin: 16px 22px 0; border-radius: 10px; background: var(--canvas); border: 1px solid var(--border); width: fit-content; flex: 0 0 auto; } .detail-tab { height: 30px; padding: 0 18px; border: 0; border-radius: 7px; background: transparent; color: var(--text-tertiary); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .detail-tab:hover:not(.active) { color: var(--text-secondary); background: rgba(255,255,255,.03); } .detail-tab.active { color: var(--blue-bright); background: rgba(123,169,208,.14); box-shadow: inset 0 0 0 1px var(--blue-bright); } .detail-tab-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: grid; gap: 15px; align-content: start; max-width: 640px; } #player-detail-overview-panel, #player-detail-waivers-panel { max-width: none; } /* Waivers tab (js/playerDetail.js renderWaiversPanel) — read-only summary of the waiver signed at account creation (welcome.html), plus the actual signed PDF inline. */ .waiver-meta-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-raised); } .waiver-meta-row { display: grid; gap: 3px; } .waiver-meta-row span { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-tertiary); } .waiver-meta-row strong { font-size: 13px; color: var(--text-primary); font-weight: 600; } .waiver-meta-card .btn { margin-left: auto; } .waiver-pdf-frame { width: 100%; height: 70vh; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: #fff; } /* Overview's field-pair rows only — with max-width:none above they'd otherwise stretch to two huge columns on wide screens; this lets them wrap into as many ~260px fields as fit instead. */ .detail-form-row { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Program / Trackman tabs (playerDetail.js) */ .program-summary-card, .trackman-compare-card { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); padding: 18px 20px; display: grid; gap: 16px; } .program-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .program-summary-head h3 { font-size: 16px; color: var(--text-primary); } .program-summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .program-stat { display: grid; gap: 3px; } .program-stat-value { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .program-stat-label { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-tertiary); } .trackman-compare-head { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .trackman-compare-date { font-size: 13px; font-weight: 700; color: var(--text-primary); } .trackman-compare-head .trackman-compare-arrow { color: var(--text-tertiary); } .trackman-compare-row { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 10px; } .trackman-compare-label { font-size: 12.5px; color: var(--text-secondary); } .trackman-compare-value { font-family: var(--font-stat); font-size: 14px; color: var(--text-primary); min-width: 64px; text-align: right; } .trackman-compare-arrow { color: var(--text-tertiary); font-size: 12px; } .trackman-compare-delta { font-size: 12px; font-weight: 700; min-width: 56px; text-align: right; color: var(--text-tertiary); } .trackman-compare-delta.is-up { color: var(--success); } .trackman-compare-delta.is-down { color: var(--danger); } /* home */ .home-scroll { overflow-y: auto; } .home-top { padding: 24px 22px 4px; display: grid; gap: 20px; } #home-header h2 { font-size: 26px; margin: 0 0 -14px; color: var(--primary); } /* No card — just a wide baseline-aligned row that reads as a page-level masthead (day/date + live clock) instead of another boxed stat, with a thin rule to separate it from the content below. */ .home-datetime-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 0 22px; border-bottom: 1px solid var(--border); } .home-date { display: grid; gap: 4px; } /* "Blueprint Stat" (Winner Sans) -> "Blueprint Wide" (Garp) — the design system dropped Winner Sans for stat numbers in favor of Garp at weight 400, so stats and headers now come from one face instead of two. */ .home-date-weekday { font-family: var(--font-display), sans-serif; font-size: 52px; line-height: 1; color: var(--text-primary); text-transform: uppercase; letter-spacing: .5px; } .home-date-full { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .home-time { font-family: var(--font-display), sans-serif; font-size: 52px; letter-spacing: 1px; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1; } .home-time .home-time-ampm { font-size: 14px; color: var(--text-tertiary); margin-left: 8px; font-family: var(--font-body), sans-serif; font-weight: 700; } /* One unified metrics row (social + roster/lead/task snapshot cards) — flex instead of a uniform grid so the Total Athletes card (.is-wide, it carries a donut breakdown) can take roughly double width while the plain cards share the rest, instead of every card being forced to the same column. */ .home-social-stats { display: flex; flex-wrap: wrap; gap: 14px; } .home-social-card { position: relative; overflow: hidden; flex: 1 1 220px; display: grid; gap: 10px; padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--primary); clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%); transition: border-color .12s var(--ease); } /* Some cards (Open leads, Tasks due) are