/* man-on-court — single source of truth for theming. Loaded on every page by nav.js. Change values here → whole hub re-themes. Dark mode: set . Default is light (Apple/OpenAI-esque). Use the SEMANTIC tokens in views; read them into chart JS with getComputedStyle(document.documentElement).getPropertyValue('--moc-...').trim() */ :root { /* ---- surfaces ---- */ --moc-bg: #fbfbfd; /* page background (Apple off-white) */ --moc-bg-elev: #ffffff; --moc-surface: #ffffff; /* cards / panels */ --moc-surface-2: #f5f5f7; /* insets, zebra, tracks */ --moc-surface-3: #ececef; /* deeper inset / chip bg */ --moc-border: rgba(0,0,0,0.07); --moc-border-strong: rgba(0,0,0,0.12); /* ---- text ---- */ --moc-text: #1d1d1f; /* primary (Apple body) */ --moc-text-2: #6e6e73; /* secondary (Apple secondary) */ --moc-text-3: #86868b; /* muted (Apple tertiary) */ /* ---- brand / accent ---- */ --moc-accent: #0066cc; --moc-accent-hover: #0050a0; --moc-accent-contrast: #ffffff; --moc-accent-soft: rgba(0,102,204,0.09); /* ---- semantic ---- */ --moc-success: #1d8a3f; /* winners / good (print-grade green) */ --moc-success-soft: rgba(29,138,63,0.10); --moc-success-ink: #0f6b30; --moc-danger: #d70015; /* errors / bad */ --moc-danger-soft: rgba(215,0,21,0.08); --moc-danger-ink: #b00013; --moc-warning: #c2410c; --moc-warning-soft: rgba(194,65,12,0.10); --moc-warning-ink: #9a3309; --moc-cool: #0066cc; --moc-cool-soft: rgba(0,102,204,0.09); --moc-cool-ink: #0050a0; --moc-purple: #7e22ce; --moc-purple-soft: rgba(147,51,234,0.09); --moc-purple-ink: #6d23b6; --moc-pink: #be185d; --moc-yellow: #ca8a04; --moc-teal: #0e7490; --moc-win: var(--moc-success); --moc-loss: var(--moc-danger); /* ---- players (stable per player KEY, independent of display name) ---- */ --moc-player-10: #0066cc; /* nimesh (you) */ --moc-player-22: #7e22ce; /* Alfredo (partner) */ --moc-player-40: #c2410c; /* Charlie Beveridge */ --moc-player-39: #be185d; /* Sander */ /* ---- shape & depth ---- */ --moc-radius-sm: 10px; --moc-radius: 16px; --moc-radius-lg: 20px; --moc-radius-xl: 24px; /* ---- canonical layout widths (single source of truth) ---- */ --moc-content-width: 1180px; /* main page wrapper */ --moc-content-width-narrow: 900px; /* long-form / single-column views */ --moc-content-width-poster: 840px; /* A4 portrait at ~96dpi (printable poster view) */ --moc-content-pad: 28px; --moc-content-pad-tight: 18px; --moc-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04); --moc-shadow-hover: 0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.06); --moc-shadow-soft: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.03); /* ---- chart helpers ---- */ --moc-chart-grid: rgba(0,0,0,0.06); --moc-chart-grid-strong: rgba(0,0,0,0.10); --moc-chart-axis: #6e6e73; --moc-chart-label: #1d1d1f; /* ---- type ---- */ --moc-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", sans-serif; --moc-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --moc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ---- legacy aliases (older var names still referenced by some views/nav) ---- */ --moc-line: var(--moc-border); --moc-ink: var(--moc-text); --moc-dim: var(--moc-text-2); --moc-panel: var(--moc-surface); --moc-acc: var(--moc-accent); --moc-acc2: var(--moc-success); --moc-nimesh: var(--moc-player-10); --moc-partner:var(--moc-player-22); --moc-charlie:var(--moc-player-40); --moc-ph8: var(--moc-player-39); } /* ---- DARK THEME — one attribute flip: ---- */ :root[data-theme="dark"] { --moc-bg: #0a0a0b; --moc-bg-elev: #131316; --moc-surface: #141417; --moc-surface-2: #1a1a1f; --moc-surface-3: #22222a; --moc-border: rgba(255,255,255,0.08); --moc-border-strong: rgba(255,255,255,0.14); --moc-text: #f5f5f7; --moc-text-2: #98989d; --moc-text-3: #6e6e73; --moc-accent: #0a84ff; --moc-accent-hover:#3a9eff; --moc-accent-soft: rgba(10,132,255,0.14); --moc-success: #30d158; --moc-success-soft: rgba(48,209,88,0.14); --moc-success-ink: #74e898; --moc-danger: #ff453a; --moc-danger-soft: rgba(255,69,58,0.14); --moc-danger-ink: #ff8a82; --moc-warning: #ff9f0a; --moc-warning-soft: rgba(255,159,10,0.14); --moc-warning-ink: #ffc46b; --moc-cool: #0a84ff; --moc-cool-soft: rgba(10,132,255,0.14); --moc-cool-ink: #7eb6ff; --moc-purple: #bf5af2; --moc-purple-soft: rgba(191,90,242,0.14); --moc-purple-ink: #d394ff; --moc-pink: #ff375f; --moc-yellow: #ffd60a; --moc-teal: #5ac8fa; --moc-player-10: #0a84ff; --moc-player-22: #bf5af2; --moc-player-40: #ff9f0a; --moc-player-39: #ff375f; --moc-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.45); --moc-shadow-hover: 0 2px 6px rgba(0,0,0,0.55), 0 14px 40px rgba(0,0,0,0.55); --moc-shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35); --moc-chart-grid: rgba(255,255,255,0.06); --moc-chart-grid-strong: rgba(255,255,255,0.10); --moc-chart-axis: #98989d; --moc-chart-label: #f5f5f7; } /* ---------- REUSABLE PRIMITIVES — opt in by adding the class to your element ---------- */ /* Eyebrow label */ .moc-eyebrow{ font-size:11px;font-weight:600;letter-spacing:0.16em; text-transform:uppercase;color:var(--moc-text-2); } /* Inline data callout pills (use inside paragraphs around bold numbers) */ .moc-pop{ display:inline-flex;align-items:baseline; padding:2px 8px;border-radius:7px; font-weight:700;font-variant-numeric:tabular-nums; letter-spacing:-0.01em;font-size:0.95em;white-space:nowrap; background:var(--moc-surface-2);color:var(--moc-text); border:1px solid var(--moc-border-strong); } .moc-pop.good{background:var(--moc-success-soft);color:var(--moc-success-ink);border-color:color-mix(in srgb, var(--moc-success) 22%, transparent);} .moc-pop.bad {background:var(--moc-danger-soft); color:var(--moc-danger-ink); border-color:color-mix(in srgb, var(--moc-danger) 22%, transparent);} .moc-pop.warn{background:var(--moc-warning-soft);color:var(--moc-warning-ink);border-color:color-mix(in srgb, var(--moc-warning) 22%, transparent);} .moc-pop.cool{background:var(--moc-cool-soft); color:var(--moc-cool-ink); border-color:color-mix(in srgb, var(--moc-cool) 22%, transparent);} /* Card base — light surface, soft shadow, subtle border */ .moc-card{ background:var(--moc-surface); border:1px solid var(--moc-border); border-radius:var(--moc-radius-lg); box-shadow:var(--moc-shadow); transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .moc-card:hover{border-color:var(--moc-border-strong);box-shadow:var(--moc-shadow-hover);} /* Section header pattern */ .moc-section-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px; } .moc-section-head h2{ font-size:28px;letter-spacing:-0.025em;font-weight:600;margin:8px 0 4px;line-height:1.15; } .moc-section-head p{color:var(--moc-text-2);font-size:15px;margin:0;} /* Serif italic pull-quote (use sparingly) */ .moc-serif{font-family:var(--moc-font-serif);font-weight:400;letter-spacing:-0.005em;} /* Responsive helpers */ @media (max-width:760px){ .moc-section-head{flex-direction:column;align-items:flex-start;gap:8px;} .moc-section-head h2{font-size:22px;} } /* Global keyboard-focus ring — applies to every interactive element across the hub. Uses :focus-visible so mouse clicks don't trigger it, only keyboard navigation. */ *:focus{outline:none;} a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--moc-accent); outline-offset:2px; border-radius:6px; transition:outline-offset .12s ease; } /* ────────────────────────────────────────────────────────────────────────── .moc-avatar — unified player-avatar component. Use:

Or inline-style background/border with a player token if data-player isn't used. ────────────────────────────────────────────────────────────────────────── */ .moc-avatar{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:10px; font-weight:700;font-size:13px;letter-spacing:-0.01em; font-variant-numeric:tabular-nums; color:#ffffff;flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.10); background:linear-gradient(135deg, var(--moc-player-10), color-mix(in srgb, var(--moc-player-10) 60%, black)); } .moc-avatar.sm{width:28px;height:28px;border-radius:8px;font-size:11px;box-shadow:0 1px 2px rgba(0,0,0,0.06);} .moc-avatar.lg{width:48px;height:48px;border-radius:14px;font-size:18px;} .moc-avatar[data-player="player-10"]{background:linear-gradient(135deg, var(--moc-player-10), color-mix(in srgb, var(--moc-player-10) 60%, black));} .moc-avatar[data-player="player-22"]{background:linear-gradient(135deg, var(--moc-player-22), color-mix(in srgb, var(--moc-player-22) 60%, black));} .moc-avatar[data-player="player-40"]{background:linear-gradient(135deg, var(--moc-player-40), color-mix(in srgb, var(--moc-player-40) 60%, black));} .moc-avatar[data-player="player-39"]{background:linear-gradient(135deg, var(--moc-player-39), color-mix(in srgb, var(--moc-player-39) 60%, black));} /* ────────────────────────────────────────────────────────────────────────── Density toggle — flip for ~25% tighter spacing. nav.js exposes a button beside the theme toggle that flips this class. ────────────────────────────────────────────────────────────────────────── */ body.dense{ --moc-content-pad: 18px; --moc-radius: 12px; --moc-radius-lg: 16px; --moc-radius-xl: 18px; } body.dense .moc-card, body.dense .card, body.dense .lesson-card, body.dense .scout, body.dense .kpi-card, body.dense .panel{ padding:16px 18px; } body.dense .section{margin-top:44px;} body.dense .moc-section-head h2, body.dense .section-head h2{font-size:22px;} body.dense h1{font-size:36px;} /* ────────────────────────────────────────────────────────────────────────── Motion safety — respect users who opt out of OS-level animations. ────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ────────────────────────────────────────────────────────────────────────── Print stylesheet — clean PDF output. Removes shadows, dark surfaces, gradients; forces black-on-white; hides the nav and theme toggle. ────────────────────────────────────────────────────────────────────────── */ @media print{ :root{ --moc-bg:#ffffff; --moc-surface:#ffffff; --moc-surface-2:#f5f5f7; --moc-text:#000000; --moc-text-2:#333333; --moc-text-3:#555555; --moc-border:#cccccc; --moc-shadow:none; --moc-shadow-hover:none; --moc-shadow-soft:none; } body{background:#ffffff !important;color:#000 !important;} .moc-nav, .moc-theme, .moc-density, .moc-pills{display:none !important;} .moc-card, .card, .lesson-card, .scout, .panel{ page-break-inside:avoid; box-shadow:none !important; border:1px solid #cccccc !important; } a{color:#000 !important;text-decoration:none;} a[href]::after{content:" (" attr(href) ")";font-size:0.85em;color:#666;} a[href^="#"]::after, a[href^="javascript:"]::after{content:"";} }