/* ─── Clinchr Gym Dashboard ─── The gym owner's instrument panel. Brand-consistent with the app, the public site and the coach dashboard (Anton display, DM Sans body, DM Mono data, single red accent) — but built around a gym's information architecture (sections, not a roster). Dark is the :root default; [data-theme="light"] swaps the semantic tokens (light is the canonical default, set in ). */ /* ─── Self-hosted fonts (no third-party requests) ─── */ @font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Anton-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Anton-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/DMSans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/DMSans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'DM Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/DMSans-Italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+FEFF,U+FFFD; } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/DMMono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } @font-face { font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/DMMono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } :root { --bg:#0B0B0C; --surface:#121214; --surface-alt:#19191C; --surface-hi:#202024; --border:#1F1F23; --border-light:#2C2C31; --red:#E53935; --red-dark:#C62828; --blue:#1E88E5; --gold:#FFD600; --green:#43A047; --amber:#FFA726; --t1:#F4F4F2; --t2:#9A9A96; --t3:#74746E; --heat0:#17171A; /* member-tier semantics */ --tier-active:#43A047; --tier-regular:#1E88E5; --tier-risk:#FFA726; --tier-dormant:#74746E; --top:58px; color-scheme: dark; --display:'Anton','Arial Narrow',sans-serif; --mono:'DM Mono','SF Mono','Consolas',monospace; --radius:12px; --radius-sm:8px; } [data-theme="light"] { --bg:#FBFBFA; --surface:#FFFFFF; --surface-alt:#F1F1EF; --surface-hi:#ECECEA; --border:#E7E7E3; --border-light:#D7D7D2; --t1:#17171A; --t2:#56564F; --t3:#6F6F68; --heat0:#ECECEA; --tier-dormant:#A8A8A1; color-scheme: light; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--t1); line-height:1.5; min-height:100vh; } ::selection { background:var(--red); color:#fff; } /* Keyboard focus — a single token-based ring (the bare inputs drop their default outline). */ :where(button, input, textarea, select, [tabindex]):focus-visible { outline:2px solid var(--red); outline-offset:2px; border-radius:var(--radius-sm); } .muted { color:var(--t3); } .small { font-size:.75rem; } .tnum { font-variant-numeric:tabular-nums; } /* ─── Topbar ─── */ .topbar { height:var(--top); position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .topbar-brand { display:flex; align-items:center; gap:11px; } .topbar-logo { width:26px; height:auto; } .logo { font-family:var(--display); font-size:1.25rem; letter-spacing:.05em; text-transform:uppercase; line-height:1; display:inline-flex; } .logo-light { color:var(--t1); } .logo-accent { color:var(--red); } .topbar-divider { width:1px; height:16px; background:var(--border-light); } .topbar-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--t3); } .topbar-right { display:flex; align-items:center; gap:16px; } .demo-badge { font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); background:color-mix(in srgb, var(--amber) 12%, transparent); padding:4px 9px; border-radius:3px; white-space:nowrap; } .owner-id { display:flex; align-items:center; gap:9px; } .owner-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.72rem; font-weight:500; color:var(--t1); background:var(--surface-alt); border:1px solid var(--border-light); } .owner-meta { display:flex; flex-direction:column; line-height:1.25; } .owner-name { font-size:.82rem; font-weight:600; } .owner-sub { font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border-light); background:var(--surface); color:var(--t1); cursor:pointer; transition:border-color .18s, transform .12s; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover { border-color:var(--t3); } .theme-toggle:active { transform:scale(.92); } .theme-toggle svg { width:17px; height:17px; } .theme-toggle .ico-moon { display:block; } .theme-toggle .ico-sun { display:none; } [data-theme="dark"] .theme-toggle .ico-moon { display:none; } [data-theme="dark"] .theme-toggle .ico-sun { display:block; } /* ─── Shell ─── */ .app-shell { display:grid; grid-template-columns:272px 1fr; height:calc(100vh - var(--top)); } /* ─── Rail ─── */ .rail { border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; background:var(--bg); overflow-y:auto; } .rail-gym { padding:18px 16px 14px; border-bottom:1px solid var(--border); } .gym-card { display:flex; align-items:center; gap:12px; } .gym-logo { width:46px; height:46px; flex-shrink:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.15rem; color:#fff; letter-spacing:.02em; background:var(--c,#E53935); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); } .gym-card-text { min-width:0; flex:1; } .gym-name { font-family:var(--display); font-size:1.12rem; line-height:1.04; letter-spacing:.01em; text-transform:uppercase; color:var(--t1); } .gym-loc { font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gym-pills { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:11px; } .pill { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; border-radius:999px; white-space:nowrap; } .pill--premium { color:#3a2e00; background:var(--gold); } .pill--trial { color:var(--amber); background:color-mix(in srgb, var(--amber) 14%, transparent); border:1px solid color-mix(in srgb, var(--amber) 50%, transparent); } .pill--age { color:var(--t2); background:var(--surface-alt); border:1px solid var(--border); } [data-theme="light"] .pill--trial { color:#8a5200; } /* Gym switcher */ .gym-switch { padding:12px 12px 4px; display:flex; flex-direction:column; gap:6px; } .gym-switch-label { font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); padding:0 6px 4px; } .gym-opt { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:inherit; cursor:pointer; text-align:left; transition:background .15s, border-color .15s; } .gym-opt:hover { background:var(--surface); } .gym-opt.is-active { background:var(--surface); border-color:var(--border-light); } .gym-opt-dot { width:9px; height:9px; border-radius:3px; background:var(--c,#E53935); flex-shrink:0; } .gym-opt-name { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } .gym-opt-meta { font-family:var(--mono); font-size:.58rem; color:var(--t3); flex-shrink:0; } /* Section nav */ .rail-nav { padding:12px 12px 8px; display:flex; flex-direction:column; gap:3px; flex:1; } .nav-item { position:relative; display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--t2); cursor:pointer; text-align:left; font-size:.9rem; font-weight:600; transition:background .15s, color .15s; } .nav-item:hover { background:var(--surface); color:var(--t1); } .nav-item.is-active { background:var(--surface); color:var(--t1); border-color:var(--border-light); } .nav-item.is-active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:22px; background:var(--red); border-radius:0 2px 2px 0; } .nav-item svg { width:18px; height:18px; flex-shrink:0; color:var(--t3); } .nav-item.is-active svg { color:var(--red); } .nav-badge { margin-left:auto; font-family:var(--mono); font-size:.6rem; font-weight:500; color:var(--t3); } .rail-foot { display:flex; align-items:center; gap:7px; padding:14px 18px; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); border-top:1px solid var(--border); } .rail-foot-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); } /* ─── Main / sections ─── */ .main { overflow-y:auto; min-height:0; } .main-inner { padding:24px 28px 56px; max-width:1240px; } .section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--border); flex-wrap:wrap; } .section-title { font-family:var(--display); font-size:2rem; line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--t1); } .section-sub { font-size:.9rem; color:var(--t2); margin-top:8px; max-width:60ch; } .section-meta { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); text-align:right; } .section-meta strong { color:var(--t1); font-weight:600; } /* KPI band */ .kpi-band { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:22px; background:var(--surface); } .kpi { padding:15px 16px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:7px; min-width:0; } .kpi:first-child { border-left:none; } .kpi-label { font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); } .kpi-val { font-family:var(--display); font-size:1.8rem; line-height:.95; color:var(--t1); } .kpi-val i { font-style:normal; font-size:.9rem; color:var(--t2); margin-left:1px; } .kpi-sub { font-family:var(--mono); font-size:.56rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); display:flex; align-items:center; gap:5px; } .delta { font-family:var(--mono); font-weight:500; } .delta--up { color:var(--green); } .delta--down { color:var(--red); } .delta--flat { color:var(--t3); } [data-theme="light"] .delta--up { color:#2e7d32; } /* KPI strip (compact, for sub-sections) */ .kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; } .kpi-strip .stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:6px; } .stat-val { font-family:var(--display); font-size:1.55rem; line-height:1; color:var(--t1); } .stat-val i { font-style:normal; font-size:.8rem; color:var(--t2); margin-left:1px; } .stat-label { font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); } /* Cards + grid */ .grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:22px; } .grid--3 { grid-template-columns:repeat(3,1fr); } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; min-width:0; } .card--wide { grid-column:1 / -1; } .card--span2 { grid-column:span 2; } .card-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; } .card-head h3 { font-size:.92rem; font-weight:600; color:var(--t1); } .card-meta { font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); } .card-legend { display:flex; gap:18px; margin:2px 0 8px; flex-wrap:wrap; } .legend { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .legend-bar { width:11px; height:11px; border-radius:2px; background:var(--red); opacity:.5; } .legend-bar--gold { background:var(--gold); opacity:.8; } .legend-line { width:14px; height:0; border-top:2px solid var(--blue); } .chart-host { width:100%; margin-top:4px; position:relative; } /* SVG chart primitives */ .chart-svg { width:100%; height:auto; display:block; overflow:visible; } .chart-grid { stroke:var(--border); stroke-width:1; shape-rendering:crispEdges; } .chart-axis { fill:var(--t3); font-family:var(--mono); font-size:11px; letter-spacing:.03em; } .chart-axis-y { font-size:10px; } .chart-line { fill:none; stroke:var(--red); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; } .chart-line--avg { stroke:var(--blue); stroke-width:2; } .chart-line--gold { stroke:var(--gold); stroke-width:2.6; } .chart-grad-top { stop-color:var(--red); stop-opacity:.24; } .chart-grad-bottom { stop-color:var(--red); stop-opacity:0; } .chart-grad-gold-top { stop-color:var(--gold); stop-opacity:.26; } .chart-grad-gold-bottom { stop-color:var(--gold); stop-opacity:0; } .chart-dot { fill:var(--red); } .chart-dot-last { fill:var(--gold); stroke:var(--surface); stroke-width:2.5; } .chart-bar { fill:var(--t2); opacity:.3; } .chart-bar-last { fill:var(--red); opacity:1; } .chart-bar:hover, .chart-bar.is-hover { opacity:.6; } .chart-bar-last:hover { opacity:1; } .chart-bar--join { fill:var(--blue); opacity:.5; } .chart-bar-value { fill:var(--t2); font-family:var(--mono); font-size:11px; font-weight:500; } @media (prefers-reduced-motion: reduce) { .chart-line { transition:none !important; stroke-dashoffset:0 !important; } .chart-bar { transition:none !important; transform:scaleY(1) !important; } .hbar-fill, .tierseg, .daybar, .ibar, .gender-seg, .trophy-prog-fill, .donut circle { transition:none !important; } } /* Chart tooltip */ .chart-tip { position:absolute; z-index:5; pointer-events:none; transform:translate(-50%,-128%); background:var(--t1); color:var(--bg); border-radius:6px; padding:7px 11px; min-width:54px; text-align:center; white-space:nowrap; opacity:0; transition:opacity .12s ease; box-shadow:0 4px 18px rgba(0,0,0,.22); } .chart-tip.is-visible { opacity:1; } .chart-tip .tip-val { display:block; font-family:var(--display); font-size:1.05rem; line-height:1; letter-spacing:.02em; } .chart-tip .tip-lbl { display:block; font-family:var(--mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; opacity:.82; line-height:1.5; } /* Horizontal bars (training mix, top cities) */ .hbars { display:flex; flex-direction:column; gap:9px; margin-top:6px; } .hbar-row { display:flex; align-items:center; gap:10px; } .hbar-label { width:118px; flex-shrink:0; font-size:.74rem; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hbar-track { flex:1; height:14px; background:var(--surface-alt); border-radius:3px; overflow:hidden; } .hbar-fill { display:block; height:100%; border-radius:3px; transition:width .8s cubic-bezier(.16,1,.3,1); } .hbar-val { width:48px; text-align:right; flex-shrink:0; font-family:var(--mono); font-size:.68rem; color:var(--t3); } /* ─── This-week pulse strip (Overview) ─── */ .pulse { display:flex; flex-direction:column; gap:0; } .pulse-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); } .pulse-row:last-child { border-bottom:none; } .pulse-k { font-size:.82rem; color:var(--t2); } .pulse-v { font-family:var(--mono); font-weight:500; font-size:.92rem; color:var(--t1); text-align:right; } .pulse-v b { font-family:var(--display); font-weight:400; font-size:1.15rem; letter-spacing:.02em; } .miniweek { display:flex; align-items:flex-end; gap:4px; height:34px; } .miniweek-bar { width:11px; background:var(--red); opacity:.32; border-radius:2px 2px 0 0; } .miniweek-bar.is-top { opacity:1; } .miniweek-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; } .miniweek-wd { font-family:var(--mono); font-size:.5rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); } /* ─── Standout insights ─── */ .insights { display:flex; flex-direction:column; gap:10px; } .insight { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); } .insight-ico { width:30px; height:30px; flex-shrink:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c,var(--red)) 20%, transparent); color:var(--c,var(--red)); } .insight-ico svg { width:16px; height:16px; } .insight-text { font-size:.84rem; color:var(--t1); line-height:1.45; } .insight-text b { font-weight:700; } /* ─── Member tier segmentation ─── */ .tierbar { display:flex; width:100%; height:30px; border-radius:7px; overflow:hidden; margin-top:4px; background:var(--surface-alt); } .tierseg { height:100%; display:flex; align-items:center; justify-content:center; min-width:2px; transition:width .8s cubic-bezier(.16,1,.3,1); } .tierseg-pct { font-family:var(--mono); font-size:.6rem; font-weight:500; color:#fff; padding:0 4px; white-space:nowrap; } .tier-legend { display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:16px; } .tier-li { display:flex; align-items:center; gap:9px; } .tier-sw { width:11px; height:11px; border-radius:3px; flex-shrink:0; } .tier-li-text { display:flex; flex-direction:column; line-height:1.25; } .tier-li-name { font-size:.78rem; font-weight:600; color:var(--t1); } .tier-li-meta { font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); } .tier-li-n { font-family:var(--display); font-size:1.1rem; color:var(--t1); margin-left:auto; } .tier-li-n small { font-family:var(--mono); font-size:.6rem; font-weight:500; color:var(--t3); margin-left:2px; } /* ─── Member table ─── */ .table-card { padding:18px 0 6px; } .table-card .card-head { padding:0 18px; } .table-toolbar { display:flex; align-items:center; gap:10px; padding:6px 18px 12px; flex-wrap:wrap; } .search { position:relative; flex:1; min-width:180px; max-width:280px; } .search svg { position:absolute; left:11px; top:9px; width:15px; height:15px; color:var(--t3); } .search input { width:100%; padding:9px 12px 9px 33px; background:var(--surface-alt); color:var(--t1); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:.82rem; } .search input::placeholder { color:var(--t3); } .search input:focus { outline:none; border-color:var(--border-light); } .tbl-scroll { overflow-x:auto; } .tbl { width:100%; border-collapse:collapse; font-size:.82rem; } .tbl th { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); text-align:left; padding:9px 14px; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; } .tbl th.sortable:hover { color:var(--t1); } .tbl th .sort-ar { opacity:0; margin-left:3px; } .tbl th.is-sorted .sort-ar { opacity:1; color:var(--red); } .tbl th.num, .tbl td.num { text-align:right; font-variant-numeric:tabular-nums; } .tbl td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; } .tbl tbody tr:last-child td { border-bottom:none; } .tbl tbody tr:hover { background:var(--surface-alt); } .m-cell { display:flex; align-items:center; gap:10px; } .m-avatar { width:32px; height:32px; flex-shrink:0; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.78rem; color:#fff; background:var(--c,#E53935); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .m-name { font-weight:600; color:var(--t1); } .role-chip { font-family:var(--mono); font-size:.54rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border-radius:3px; } .role-chip--coach { color:#3a2e00; background:var(--gold); } .role-chip--fighter { color:var(--t2); background:var(--surface-alt); border:1px solid var(--border); } .tier-dot { display:inline-flex; align-items:center; gap:7px; } .tier-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--td,var(--t3)); flex-shrink:0; } .td-active { --td:var(--tier-active); } .td-regular { --td:var(--tier-regular); } .td-risk { --td:var(--tier-risk); } .td-dormant { --td:var(--tier-dormant); } .last-active { color:var(--t2); } .last-active.is-stale { color:var(--tier-risk); } /* ─── Retention cohort grid ─── */ .cohort { overflow-x:auto; margin-top:4px; } .cohort-table { border-collapse:separate; border-spacing:4px; font-size:.72rem; } .cohort-table th { font-family:var(--mono); font-size:.56rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); padding:2px 6px; white-space:nowrap; } .cohort-th-row { text-align:left; } .cohort-cell { text-align:center; min-width:48px; height:34px; border-radius:5px; font-family:var(--mono); font-size:.72rem; font-weight:500; color:var(--t1); } .cohort-cell--empty { background:transparent; } .cohort-rowhead { font-family:var(--mono); font-size:.66rem; color:var(--t2); white-space:nowrap; padding-right:8px; text-align:left; } .cohort-rowhead small { color:var(--t3); } .cohort-note { font-size:.66rem; color:var(--t3); margin-top:12px; } /* ─── Day × hour heatmap ─── */ .dh { margin-top:6px; } .dh-grid { display:grid; gap:3px; } .dh-cell { aspect-ratio:1/1.05; border-radius:3px; background:var(--heat0); min-width:0; } .dh-col-label, .dh-row-label { font-family:var(--mono); font-size:.54rem; letter-spacing:.02em; text-transform:uppercase; color:var(--t3); display:flex; align-items:center; } .dh-col-label { justify-content:center; padding-bottom:3px; } .dh-row-label { padding-right:6px; } .dh-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; } .dh-note { font-size:.64rem; color:var(--t3); } .heat-legend { display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .heat-legend .sw { width:12px; height:12px; border-radius:3px; } /* shared red intensity ramp */ .h1 { background:rgba(229,57,53,.26); } .h2 { background:rgba(229,57,53,.46); } .h3 { background:rgba(229,57,53,.68); } .h4 { background:rgba(229,57,53,.92); } /* ─── Busiest days bars ─── */ .daybars { display:flex; align-items:flex-end; gap:10px; height:150px; margin-top:10px; padding-top:6px; } .daybar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; } .daybar { width:100%; max-width:38px; background:var(--red); opacity:.32; border-radius:3px 3px 0 0; transition:height .7s cubic-bezier(.16,1,.3,1); } .daybar.is-top { opacity:1; } .daybar-wd { font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); } .daybar-n { font-family:var(--mono); font-size:.62rem; color:var(--t2); } /* ─── Intensity histogram ─── */ .ihist { display:flex; align-items:flex-end; gap:12px; height:150px; margin-top:8px; } .ibar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; } .ibar { width:100%; max-width:46px; border-radius:3px 3px 0 0; transition:height .7s cubic-bezier(.16,1,.3,1); } .ibar-lab { font-family:var(--mono); font-size:.58rem; letter-spacing:.02em; text-transform:uppercase; color:var(--t3); text-align:center; line-height:1.3; } .ibar-n { font-family:var(--mono); font-size:.64rem; color:var(--t2); } /* donut */ .donut-wrap { display:flex; align-items:center; gap:20px; margin-top:6px; flex-wrap:wrap; } .donut { flex-shrink:0; } .donut-center { font-family:var(--display); fill:var(--t1); } .donut-legend { display:flex; flex-direction:column; gap:8px; } /* ─── Champions podium ─── */ .podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end; margin:8px 0 18px; } .pod { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-alt); position:relative; } .pod--1 { order:2; padding-top:26px; border-color:color-mix(in srgb,var(--gold) 55%,transparent); background:color-mix(in srgb,var(--gold) 10%, var(--surface-alt)); } .pod--2 { order:1; } .pod--3 { order:3; } .pod-rank { position:absolute; top:-11px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.8rem; color:#fff; } .pod--1 .pod-rank { background:var(--gold); color:#3a2e00; } .pod--2 .pod-rank { background:#9FA6AD; color:#1a1a1a; } .pod--3 .pod-rank { background:#B07A4A; color:#1a1a1a; } .pod-avatar { width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.3rem; color:#fff; background:var(--c,#E53935); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); } .pod--1 .pod-avatar { width:60px; height:60px; font-size:1.5rem; } .pod-name { font-size:.82rem; font-weight:600; text-align:center; line-height:1.2; } .pod-hours { font-family:var(--display); font-size:1.3rem; color:var(--t1); } .pod-hours i { font-style:normal; font-size:.72rem; color:var(--t3); } .pod-sub { font-family:var(--mono); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } /* leaderboard rows */ .lb { display:flex; flex-direction:column; } .lb-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); } .lb-row:last-child { border-bottom:none; } .lb-rank { width:22px; font-family:var(--mono); font-size:.78rem; color:var(--t3); text-align:center; flex-shrink:0; } .lb-avatar { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.74rem; color:#fff; background:var(--c,#E53935); flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .lb-name { flex:1; font-weight:600; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lb-streak { display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:.62rem; color:var(--amber); flex-shrink:0; } .lb-streak svg { width:11px; height:11px; } [data-theme="light"] .lb-streak { color:#b06a00; } .lb-val { font-family:var(--mono); font-weight:500; font-size:.82rem; color:var(--t1); flex-shrink:0; text-align:right; } .lb-val i { font-style:normal; color:var(--t3); } /* ─── Trophy case ─── */ .trophies { display:flex; flex-direction:column; gap:18px; margin-top:4px; } .trophy-fam-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; } .trophy-fam-name { font-size:.82rem; font-weight:600; color:var(--t1); } .trophy-fam-meta { font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .trophy-track { display:flex; gap:8px; flex-wrap:wrap; } .trophy { flex:1; min-width:96px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:13px 8px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); text-align:center; position:relative; } .trophy.is-unlocked { border-color:color-mix(in srgb,var(--gold) 50%,transparent); background:color-mix(in srgb,var(--gold) 9%, var(--surface-alt)); } .trophy.is-next { border-color:var(--border-light); border-style:dashed; } .trophy-ico { width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-hi); color:var(--t3); } .trophy.is-unlocked .trophy-ico { background:var(--gold); color:#3a2e00; } .trophy-ico svg { width:18px; height:18px; } .trophy-name { font-size:.7rem; font-weight:600; color:var(--t1); line-height:1.2; } .trophy-thr { font-family:var(--mono); font-size:.58rem; color:var(--t3); } .trophy-prog { width:100%; margin-top:2px; } .trophy-prog-track { height:5px; background:var(--surface-hi); border-radius:3px; overflow:hidden; } .trophy-prog-fill { height:100%; background:var(--gold); border-radius:3px; transition:width .8s cubic-bezier(.16,1,.3,1); } .trophy-prog-lbl { font-family:var(--mono); font-size:.54rem; color:var(--t3); margin-top:4px; } /* ─── Announcements ─── */ .ann-list { display:flex; flex-direction:column; gap:10px; margin-top:4px; } .ann { padding:13px 15px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); } .ann-text { font-size:.86rem; color:var(--t1); line-height:1.5; } .ann-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; } .ann-date { font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .ann-del { font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); background:transparent; border:1px solid var(--border); border-radius:5px; padding:4px 9px; cursor:pointer; transition:color .15s, border-color .15s; } .ann-del:hover { color:var(--red); border-color:var(--red); } .ann-compose { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); } .ann-compose textarea { width:100%; min-height:64px; resize:vertical; padding:10px 12px; background:var(--bg); color:var(--t1); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:.84rem; line-height:1.45; } .ann-compose textarea:focus { outline:none; border-color:var(--border-light); } .ann-compose-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; flex-wrap:wrap; } .ann-rate { font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); } .ann-rate.is-limited { color:var(--amber); } [data-theme="light"] .ann-rate.is-limited { color:#8a5200; } /* buttons */ .btn { font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:9px 15px; border-radius:6px; cursor:pointer; border:1px solid var(--border-light); background:var(--surface); color:var(--t1); transition:border-color .15s, background .15s, color .15s; } .btn:hover { border-color:var(--t3); } .btn--primary { background:var(--red); border-color:var(--red); color:#fff; } .btn--primary:hover { background:var(--red-dark); border-color:var(--red-dark); } .btn--primary:disabled { opacity:.45; cursor:not-allowed; } .btn--gold { background:var(--gold); border-color:var(--gold); color:#3a2e00; } .btn--gold:hover { filter:brightness(.95); } /* Segmented control (shared with the coach dashboard) */ .split-controls { display:inline-flex; border:1px solid var(--border); border-radius:7px; overflow:hidden; } .seg { font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t2); background:var(--surface); border:none; border-right:1px solid var(--border); padding:6px 13px; cursor:pointer; transition:background .15s, color .15s; } .seg:last-child { border-right:none; } .seg:hover { color:var(--t1); } .seg.is-on { background:var(--red); color:#fff; } /* Empty states (shared) */ .empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px 16px; text-align:center; } .empty svg { width:30px; height:30px; color:var(--t3); opacity:.7; } .empty p { font-size:.82rem; color:var(--t3); max-width:34ch; } /* coaches */ .coach-list { display:flex; flex-direction:column; gap:10px; margin-top:4px; } .coach-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); } .coach-av { width:38px; height:38px; border-radius:10px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.92rem; color:#fff; background:var(--c,#E53935); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .coach-info { flex:1; min-width:0; } .coach-name { font-size:.86rem; font-weight:600; } .coach-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; } .coach-tag { font-family:var(--mono); font-size:.54rem; letter-spacing:.04em; text-transform:uppercase; color:var(--t2); background:var(--surface-hi); padding:2px 6px; border-radius:3px; } .coach-led { text-align:right; flex-shrink:0; } .coach-led-n { font-family:var(--display); font-size:1.3rem; color:var(--t1); } .coach-led-l { font-family:var(--mono); font-size:.54rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } /* ─── Reach ─── */ .reach-big { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; } .reach-num { font-family:var(--display); font-size:3.4rem; line-height:.9; color:var(--t1); } .reach-num-side { display:flex; flex-direction:column; gap:3px; padding-bottom:5px; } .reach-num-delta { font-family:var(--mono); font-size:.74rem; font-weight:500; } .reach-num-sub { font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .gender-bar { display:flex; width:100%; height:26px; border-radius:6px; overflow:hidden; margin-top:6px; background:var(--surface-alt); } .gender-seg { height:100%; transition:width .8s cubic-bezier(.16,1,.3,1); } .gender-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; } .gender-li { display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--t2); } .gender-li .sw { width:10px; height:10px; border-radius:3px; } .gender-li b { color:var(--t1); font-variant-numeric:tabular-nums; } .rankcards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .rankcard { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:16px; display:flex; flex-direction:column; gap:6px; } .rankcard-rank { font-family:var(--display); font-size:2rem; line-height:1; color:var(--t1); } .rankcard-rank i { font-style:normal; font-size:.85rem; color:var(--t3); } .rankcard-of { font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); } .rankcard-label { font-size:.8rem; color:var(--t2); margin-top:2px; } /* premium card */ .prem { border:1px solid var(--border); border-radius:var(--radius); padding:20px; background:linear-gradient(160deg, color-mix(in srgb,var(--gold) 8%, var(--surface)), var(--surface)); } .prem--trial { background:linear-gradient(160deg, color-mix(in srgb,var(--amber) 10%, var(--surface)), var(--surface)); } .prem-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .prem-status { font-family:var(--display); font-size:1.5rem; text-transform:uppercase; color:var(--t1); line-height:1; } .prem-sub { font-size:.82rem; color:var(--t2); margin-top:6px; } .prem-count { text-align:right; } .prem-count-n { font-family:var(--display); font-size:1.85rem; line-height:.9; color:var(--amber); } [data-theme="light"] .prem-count-n { color:#8a5200; } .prem-count-l { font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); } .prem-feats { display:grid; grid-template-columns:repeat(2,1fr); gap:9px 18px; margin:6px 0 18px; } .prem-feat { display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--t1); } .prem-feat svg { width:16px; height:16px; flex-shrink:0; color:var(--green); } .prem-feat.is-off { color:var(--t3); } .prem-feat.is-off svg { color:var(--t3); } /* Scrollbars */ .rail::-webkit-scrollbar, .main::-webkit-scrollbar, .tbl-scroll::-webkit-scrollbar, .cohort::-webkit-scrollbar { width:8px; height:8px; } .rail::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb, .tbl-scroll::-webkit-scrollbar-thumb, .cohort::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:6px; } .rail::-webkit-scrollbar-track, .main::-webkit-scrollbar-track, .tbl-scroll::-webkit-scrollbar-track { background:transparent; } /* ─── Responsive ─── */ @media (max-width: 1120px) { .kpi-band { grid-template-columns:repeat(3,1fr); } .kpi:nth-child(4) { border-left:none; } .kpi:nth-child(n+4) { border-top:1px solid var(--border); } .grid--3 { grid-template-columns:repeat(2,1fr); } } @media (max-width: 900px) { .app-shell { grid-template-columns:1fr; height:auto; } .rail { border-right:none; border-bottom:1px solid var(--border); height:auto; overflow:visible; } .rail-nav { flex-direction:row; flex-wrap:wrap; flex:none; } .nav-item { width:auto; } .nav-item.is-active::before { display:none; } .nav-badge { display:none; } .main { height:auto; overflow:visible; } .kpi-strip { grid-template-columns:repeat(2,1fr); } .rankcards { grid-template-columns:1fr; } } @media (max-width: 720px) { .grid, .grid--3 { grid-template-columns:1fr; } .card--span2 { grid-column:auto; } .kpi-band { grid-template-columns:repeat(2,1fr); } .kpi:nth-child(odd) { border-left:none; } .kpi:nth-child(even) { border-left:1px solid var(--border); } .kpi:nth-child(n+3) { border-top:1px solid var(--border); } .prem-feats { grid-template-columns:1fr; } .main-inner { padding:18px 16px 44px; } .section-title { font-size:1.6rem; } } @media (max-width: 460px) { .kpi-strip { grid-template-columns:1fr; } .topbar { padding:0 12px; } .owner-meta { display:none; } .podium { gap:7px; } .pod-avatar { width:42px; height:42px; } } /* Light-mode amber legibility (matches coach dashboard) */ [data-theme="light"] .demo-badge { color:#8a5200; background:rgba(255,167,38,.15); border-color:rgba(255,167,38,.5); } [data-theme="light"] .rail-foot-dot { background:#c07f00; } /* ═══ Launch-readiness additions (Jul 2026) ═══ */ /* First-run panel (brand-new gym: no members, no sessions yet) */ .first-run-card { border:1px solid color-mix(in srgb, var(--red) 30%, var(--border)); background:color-mix(in srgb, var(--red) 4%, var(--surface)); border-radius:var(--radius); padding:20px 22px; margin-bottom:22px; } .first-run-title { font-family:var(--display); font-size:1.3rem; font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1.15; margin-bottom:8px; } .first-run-body { font-size:.88rem; color:var(--t2); line-height:1.6; margin-bottom:8px; max-width:640px; } .first-run-body strong { color:var(--t1); font-weight:600; } .first-run-note { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); } /* Demo-mode banner (unmissable "this is sample data" signal) */ .demo-banner { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:9px 40px 9px 16px; position:relative; text-align:center; font-size:.78rem; color:var(--t1); background:color-mix(in srgb, var(--amber) 10%, var(--bg)); border-bottom:1px solid color-mix(in srgb, var(--amber) 40%, transparent); } .demo-banner strong { font-weight:700; } .demo-banner a { color:var(--red); font-weight:600; text-decoration:none; } .demo-banner a:hover { text-decoration:underline; } .demo-banner-x { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:none; background:transparent; color:var(--t2); font-size:18px; line-height:1; cursor:pointer; border-radius:6px; } .demo-banner-x:hover { color:var(--t1); background:color-mix(in srgb, var(--t3) 18%, transparent); } /* Session log — chronological recent workouts (Training section) */ .sesslog { display:flex; flex-direction:column; max-height:520px; overflow-y:auto; margin:-2px 0; } .sess-row { display:flex; align-items:flex-start; gap:11px; padding:10px 2px; border-bottom:1px solid var(--border); } .sess-row:last-child { border-bottom:0; } .sess-av { flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#fff; background:var(--c,#888); } .sess-body { flex:1 1 auto; min-width:0; } .sess-l1 { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .sess-name { font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sess-when { flex:0 0 auto; font-size:11px; color:var(--t3); font-variant-numeric:tabular-nums; } .sess-l2 { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:5px; } .sess-pill { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; color:var(--c,#888); background:color-mix(in srgb, var(--c,#888) 14%, transparent); } .sess-dur { font-size:11.5px; color:var(--t2); font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap; }