/* Rally design system — "midnight & apricot". Deep midnight navy carries the brand (sidebar, primary buttons, ink); warm stone is the ground; one soft apricot is the accent, used for the moments that should catch the eye (active nav, focus ring, hero highlight, the ball's dots). The red "tin line" survives as a tiny eyebrow rule. Everything else is quiet: hairlines instead of boxes, big tabular numerals instead of chrome. Type: Bricolage Grotesque for display, headings and numerals; Instrument Sans for UI and body. Both loaded via Google Fonts in layout.tsx . Rules of thumb (see CLAUDE.md → Design system for the long version): - One surface level. A
is a panel; nothing inside a panel gets its own border + background unless it is a control. - Tinted fills carry category (event type, box, status); borders carry structure; shadow only appears on things that float. - Apricot (--lime, name kept from the first pass) is a fill or accent — never text on a light surface. */ /* Midnight & apricot */ :root { /* Ground & surfaces */ --paper: #f5f3ef; /* warm stone — page ground */ --paper-raised: #ffffff; /* panels, inputs */ --paper-sunk: #ece9e2; /* wells, hovered rows, tracks */ --line: #e5e2db; --line-soft: #eeebe5; --line-strong: #d2cec4; /* Ink */ --ink: #101828; --ink-soft: #3b4658; --muted: #667085; --muted-2: #9aa3b2; /* Brand: midnight navy */ --court: #0f1b33; --court-dark: #0a1224; --court-deep: #0f1b33; /* sidebar */ --court-tint: #dde5f5; /* Signature apricot — fills and accents, not text on a light surface */ --lime: #f6a66b; --lime-dark: #e88b45; --lime-tint: #fdebdc; /* Warm accent: the tin line */ --ball: #d2533a; --ball-dark: #a9402b; --ball-tint: #fbe0d6; /* Status / category (text on tint pairs all clear 4.5:1) */ --amber: #7a5410; --amber-tint: #fbe7be; --red: #a02f22; --red-tint: #f6d5cd; --gray-tint: #e9e7e1; --gray-text: #575e6c; --plum: #5b3a94; --plum-tint: #e9e1f3; --sky: #26469a; --sky-tint: #dde5f5; --good: #1e6b47; --good-tint: #d6ebdf; /* Pastel category fills (agenda blocks, box headers) */ --mint: #dcebe4; --peach: #fbe0cc; --lilac: #e9e1f3; --butter: #fbe7be; --mist: #dde5f5; /* Chart series — validated colourblind-safe on white */ --chart-1: #0f9d5f; --chart-2: var(--ball); --chart-3: #2f5dd0; /* Shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; /* Elevation — only for things that float */ --shadow-pop: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 32px -8px rgba(16, 24, 40, 0.22); /* Type */ --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 120ms; --t-base: 220ms; --sidebar-w: 272px; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; } ::selection { background: var(--lime); color: var(--ink); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 0.5em; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.08; } h2 { font-size: 18px; font-weight: 650; } h3 { font-family: var(--font-body); font-size: 15px; font-weight: 650; letter-spacing: -0.005em; } p { margin: 0 0 1em; color: var(--ink-soft); text-wrap: pretty; } a { color: var(--court); text-decoration: none; font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } a:hover { color: var(--court-dark); text-decoration: underline; } small { color: var(--muted); } strong { font-weight: 650; color: var(--ink); } code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; background: var(--paper-sunk); padding: 2px 6px; border-radius: 5px; } hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; } :focus-visible { outline: 2px solid var(--court); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-md); transition: top var(--t-fast) var(--ease); } .skip-link:focus { top: 12px; color: #fff; text-decoration: none; } .muted { color: var(--muted); } .icon { flex-shrink: 0; } /* ---------- Logo & brand ---------- */ .logo-ball { fill: var(--court); } .logo-dot { fill: var(--lime); } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); min-width: 0; } .brand:hover { color: var(--ink); text-decoration: none; } .brand svg { flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand-name { font-family: var(--font-display); font-weight: 750; font-size: 20px; letter-spacing: -0.03em; } .brand-club { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- App shell: sidebar + main ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 22px 14px 14px; background: var(--court-deep); color: #a3aec4; } .sidebar .logo-ball { fill: var(--lime); } .sidebar .logo-dot { fill: var(--court-deep); } .sidebar .brand { padding: 2px 10px 22px; color: #fff; } .sidebar .brand-club { color: #7c89a3; } .side-nav { display: flex; flex-direction: column; gap: 22px; } html[data-area="club"] .side-nav[data-nav="admin"], html[data-area="admin"] .side-nav[data-nav="club"] { display: none; } .side-group { display: flex; flex-direction: column; gap: 2px; } .side-label { margin: 0 0 6px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #6b7896; } .side-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 14.5px; font-weight: 500; color: #a3aec4; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .side-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; } .side-link .icon { color: #7c89a3; transition: color var(--t-fast) ease; } .side-link:hover .icon { color: #dbe1ee; } .side-link[aria-current="page"] { background: rgba(255, 255, 255, 0.09); color: #fff; font-weight: 600; } .side-link[aria-current="page"] .icon { color: var(--lime); } .side-link[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lime); } .side-link-admin { border: 1px solid rgba(255, 255, 255, 0.12); } .side-link-go { margin-left: auto; color: #7c89a3; transition: transform var(--t-base) var(--ease); } .side-link-admin:hover .side-link-go { transform: translateX(3px); color: var(--lime); } .side-back { display: flex; align-items: center; gap: 8px; padding: 6px 12px; margin: -6px 0 -6px; font-size: 13px; font-weight: 500; color: #8b97b0; } .side-back:hover { color: #fff; text-decoration: none; } .side-account { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .sidebar::after { content: ""; display: block; flex-shrink: 0; height: 1px; } /* Account menu (sidebar footer; panel opens upwards) */ .account-menu { position: relative; } .account-menu-trigger { width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: none; border-radius: var(--radius-md); background: transparent; color: #fff; text-align: left; font-family: inherit; cursor: pointer; } .account-menu-trigger:hover, .account-menu-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); color: #fff; } .account-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; } .account-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-role { font-size: 12px; font-weight: 400; color: #7c89a3; margin-top: 2px; } .account-menu-caret { color: #7c89a3; transition: transform var(--t-base) var(--ease); } .account-menu-trigger[aria-expanded="true"] .account-menu-caret { transform: rotate(180deg); } .account-menu-panel { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 20; background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 5px; display: flex; flex-direction: column; animation: pop-up var(--t-base) var(--ease); } .account-menu-panel[hidden] { display: none; } .account-menu-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--ink); } .account-menu-panel a .icon { color: var(--muted); } .account-menu-panel a:hover { background: var(--paper); text-decoration: none; } .avatar { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--court); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; font-family: var(--font-display); flex-shrink: 0; } .sidebar .avatar { background: var(--lime); color: var(--court-deep); } .main { min-width: 0; } /* Admin pages that lead with a bare

still get the section eyebrow. */ html[data-area="admin"] .page > h1:first-child::before, html[data-area="admin"] .page > .back-link + h1::before { content: "Admin"; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--font-body); font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: linear-gradient(var(--ball), var(--ball)) left center / 20px 2px no-repeat; padding-left: 30px; } .page > h1:first-child, .page > .back-link + h1 { margin-bottom: 24px; } html[data-area="admin"] .side-nav[data-nav="admin"] { gap: 16px; } html[data-area="admin"] .side-nav .side-link { padding-top: 7px; padding-bottom: 7px; } .topbar { display: none; } .scrim { display: none; } .icon-btn { width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); } .icon-btn:hover { background: var(--paper-sunk); color: var(--ink); } /* Signed-out / marketing top bar */ .site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.4) blur(10px); background: rgba(245, 243, 239, 0.88); } .site-header .inner { max-width: 1160px; margin: 0 auto; padding: 0 40px; min-height: 68px; display: flex; align-items: center; gap: 40px; } .site-nav { display: flex; align-items: center; gap: 4px; flex: 1; } .site-nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); padding: 8px 12px; border-radius: var(--radius-md); } .site-nav a:hover { color: var(--ink); background: var(--paper-sunk); text-decoration: none; } .header-account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ---------- Page ---------- */ .page { max-width: 1120px; margin: 0 auto; padding: 48px 48px 112px; } .public .page { max-width: 1160px; padding: 56px 40px 112px; } .page > * { animation: rise 0.5s var(--ease) both; } .page > *:nth-child(2) { animation-delay: 40ms; } .page > *:nth-child(3) { animation-delay: 80ms; } .page > *:nth-child(4) { animation-delay: 120ms; } .page > *:nth-child(n + 5) { animation-delay: 160ms; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } @keyframes pop-up { from { opacity: 0; transform: translateY(6px) scale(0.98); } } @keyframes pop-down { from { opacity: 0; transform: translateY(-6px) scale(0.98); } } /* Quiet "← Parent" link above the eyebrow: muted text, arrow nudges on hover. */ .back-link { display: inline-flex; align-items: center; gap: 6px; margin: -8px 0 20px -4px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 13px; font-weight: 550; color: var(--muted); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .back-link svg { transition: transform var(--t-fast) var(--ease); } .back-link:hover { color: var(--ink); background: rgba(0, 0, 0, 0.045); text-decoration: none; } .back-link:hover svg { transform: translateX(-2px); } .public .back-link { margin-top: 0; } .page-hero { display: flex; align-items: flex-end; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 0 28px; margin-bottom: 4px; } .page-hero h1 { margin-bottom: 0; } .page-hero .lead { margin: 10px 0 0; } .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* the tin line — the one recurring mark of the identity */ .eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--ball); flex-shrink: 0; } .lead { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; } .two-col { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; align-items: start; gap: 20px; } .two-col > section { margin-bottom: 0; } /* ---------- Sections are panels ---------- */ section { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 30px; margin: 0 0 20px; } section h2 { margin-top: 0; } section > h2:first-child { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); } section section { border: none; background: none; padding: 0; border-radius: 0; } /* ---------- Buttons ---------- */ button, .btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.2; border: 1px solid transparent; border-radius: var(--radius-md); padding: 11px 18px; cursor: pointer; background: var(--court); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease, box-shadow var(--t-fast) ease; } button:hover, a.btn:hover { background: #1c2d52; color: #fff; text-decoration: none; } button:active, a.btn:active { transform: translateY(1px); } button:disabled { background: var(--gray-tint); color: var(--muted-2); cursor: not-allowed; transform: none; } button[aria-busy="true"] { position: relative; pointer-events: none; color: transparent !important; } button[aria-busy="true"]::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.7s linear infinite; } .btn-secondary[aria-busy="true"]::after, .btn-ghost[aria-busy="true"]::after, .btn-danger[aria-busy="true"]::after { border-color: var(--line-strong); border-top-color: var(--ink); } @keyframes spin { to { transform: rotate(360deg); } } .btn-secondary { background: var(--paper-raised); color: var(--ink); border-color: var(--line-strong); } .btn-secondary:hover { background: var(--paper-raised); border-color: var(--ink); color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; } .btn-ghost:hover { background: var(--paper-sunk); color: var(--ink); } .btn-danger { background: var(--red-tint); color: var(--red); } .btn-danger:hover { background: #f5c9bd; color: var(--red); } .btn-accent { background: var(--ball); color: #fff; } .btn-accent:hover { background: var(--ball-dark); color: #fff; } .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; } /* ---------- Forms ---------- */ form { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); width: 100%; max-width: 440px; } label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); max-width: none; cursor: pointer; } input, select, textarea { font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 10px 13px; width: 100%; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; } select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23727a70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:hover, select:hover, textarea:hover { border-color: var(--muted); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; padding: 0; accent-color: var(--court); flex-shrink: 0; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--court); box-shadow: 0 0 0 3px rgba(246, 166, 107, 0.5); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--court); outline-offset: 2px; box-shadow: none; } input[type="search"] { -webkit-appearance: none; } input[type="file"] { padding: 8px; font-size: 13.5px; color: var(--muted); } input[type="file"]::file-selector-button { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper-sunk); border: none; border-radius: 7px; padding: 7px 12px; margin-right: 12px; cursor: pointer; transition: background var(--t-fast) ease; } input[type="file"]::file-selector-button:hover { background: var(--line); } textarea { resize: vertical; min-height: 100px; line-height: 1.5; } fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; } legend { font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 6px; } .score-input { width: 60px; text-align: center; padding: 9px 6px; font-family: var(--font-display); font-weight: 700; font-size: 16px; } /* Always renders dd/mm/yyyy: the real sits invisibly on top (clicks/typing/picker/validation), this span shows the styled text. */ .date-field { position: relative; display: block; width: 100%; } .date-field-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; background: transparent; opacity: 0; cursor: pointer; } .date-field-display { display: block; font-family: var(--font-body); font-size: 14.5px; line-height: 1.4; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 10px 13px; pointer-events: none; } .date-field-display:empty::before { content: "dd/mm/yyyy"; color: var(--muted-2); } .date-field-input:focus + .date-field-display { border-color: var(--court); box-shadow: 0 0 0 3px rgba(246, 166, 107, 0.5); } /* quickYear DateField: the real input is inert (JS sets tabindex="-1", and pointer-events is killed here) — it only carries the value for form submission. Safari opens its native picker on any click to a real `` with no way for JS to intercept it, so the only way to stop that stacking on top of our own calendar is for the real input to never receive the click; a `