/* RaceHub design system. * * A small set of tokens and components, rather than overriding a framework. * Everything is prefixed rh- so it can live alongside Bootstrap while screens * are converted one at a time. */ /* Theme * ----- * Dark is the default. `data-theme` on is set server-side from a cookie * so the right palette is in the first paint -- no flash of the wrong theme. * (unset) follow the operating system * data-theme="light" / "dark" explicit choice, wins over the system */ :root { --rh-bg: #09111c; --rh-surface: #0e1926; --rh-surface-2: #132131; --rh-border: #263748; --rh-text: #f4f7fb; --rh-muted: #8796a8; --rh-red: #ff343f; --rh-blue: #2583ff; --rh-green: #13b76a; --rh-amber: #e0a107; /* The faint top highlight on a card. Invisible on light, so it is a token. */ --rh-sheen: rgba(255, 255, 255, 0.015); /* Native UI font on each platform: nothing to download, and it matches what the rest of the organiser's machine looks like. */ --rh-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; --rh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --rh-radius: 8px; --rh-sidebar: 190px; --rh-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); --rh-gap: 16px; --rh-pad: 18px; } /* The light values live here once. The two selectors below only reassign, so the palettes cannot drift apart. Accents are darker than their dark-theme counterparts: #ff343f on white is about 3:1, which fails as text. */ :root { --l-bg: #eef1f6; --l-surface: #ffffff; --l-surface-2: #f3f6fa; --l-border: #d3dce7; --l-text: #0d1724; --l-muted: #566676; --l-red: #d81f2a; --l-blue: #0b63d6; --l-green: #0f8f55; --l-amber: #a97800; --l-sheen: rgba(13, 23, 36, 0.012); --l-shadow: 0 1px 2px rgba(13, 23, 36, 0.07), 0 6px 18px rgba(13, 23, 36, 0.06); } :root[data-theme="light"] { --rh-bg: var(--l-bg); --rh-surface: var(--l-surface); --rh-surface-2: var(--l-surface-2); --rh-border: var(--l-border); --rh-text: var(--l-text); --rh-muted: var(--l-muted); --rh-red: var(--l-red); --rh-blue: var(--l-blue); --rh-green: var(--l-green); --rh-amber: var(--l-amber); --rh-sheen: var(--l-sheen); --rh-shadow: var(--l-shadow); } /* No explicit choice: follow the operating system. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --rh-bg: var(--l-bg); --rh-surface: var(--l-surface); --rh-surface-2: var(--l-surface-2); --rh-border: var(--l-border); --rh-text: var(--l-text); --rh-muted: var(--l-muted); --rh-red: var(--l-red); --rh-blue: var(--l-blue); --rh-green: var(--l-green); --rh-amber: var(--l-amber); --rh-sheen: var(--l-sheen); --rh-shadow: var(--l-shadow); } } /* Without this, `width: 100%` on an input adds its padding and border on top of 100% and overflows the card. Bootstrap's reset used to provide it. */ *, *::before, *::after { box-sizing: border-box; } body.rh { background: var(--rh-bg); color: var(--rh-text); font-family: var(--rh-font); font-size: 14px; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased; } /* Form controls do not inherit the page font on their own. */ .rh input, .rh select, .rh textarea, .rh button { font-family: inherit; } .rh h1, .rh h2, .rh h3 { font-family: var(--rh-font); line-height: 1.25; } .rh code { font-family: var(--rh-font-mono); font-size: 0.92em; } .rh a { color: var(--rh-blue); } /* --- layout -------------------------------------------------------------- */ .rh-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--rh-gap); } .rh-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--rh-gap); align-items: start; } .rh-dashboard-main, .rh-dashboard-side { display: grid; gap: var(--rh-gap); min-width: 0; } @media (max-width: 992px) { .rh-dashboard { grid-template-columns: 1fr; } } /* --- cards --------------------------------------------------------------- */ .rh-card { background: linear-gradient(180deg, var(--rh-sheen), transparent), var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); box-shadow: var(--rh-shadow); overflow: hidden; } .rh-card-header { min-height: 52px; padding: 0 var(--rh-pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rh-border); } .rh-card-header h2 { margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; } .rh-card-header a { font-size: 13px; text-decoration: none; white-space: nowrap; } .rh-card-body { padding: var(--rh-pad); } /* --- tabs ---------------------------------------------------------------- */ .rh-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--rh-gap); border-bottom: 1px solid var(--rh-border); } .rh-tabs a { padding: 9px 14px; color: var(--rh-muted); text-decoration: none; font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .rh-tabs a:hover { color: var(--rh-text); } .rh-tabs a.active { color: var(--rh-text); border-bottom-color: var(--rh-red); } /* --- lists and rows ------------------------------------------------------ */ .rh-list > * + * { border-top: 1px solid var(--rh-border); } .rh-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px var(--rh-pad); } .rh-row-main { min-width: 0; } .rh-row-title { font-weight: 600; text-decoration: none; } .rh-empty { padding: var(--rh-pad); color: var(--rh-muted); } .rh-meta { color: var(--rh-muted); font-size: 12.5px; } .rh-nowrap { white-space: nowrap; } /* --- racing class rows --------------------------------------------------- */ .rh-class-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--rh-text); text-decoration: none; border-bottom: 1px solid var(--rh-border); } .rh-class-row:last-child { border-bottom: 0; } .rh-class-row:hover { background: var(--rh-surface-2); color: var(--rh-text); } .rh-class-code { background: var(--rh-blue); color: #fff; padding: 3px 7px; border-radius: 5px; text-align: center; font-size: 12px; font-weight: 700; } .rh-class-code.is-muted { background: var(--rh-surface-2); color: var(--rh-muted); border: 1px solid var(--rh-border); } .rh-class-count { color: var(--rh-muted); font-size: 12.5px; } /* --- tables -------------------------------------------------------------- */ .rh-table-wrap { overflow-x: auto; } .rh-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rh-table th, .rh-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rh-border); } .rh-table th { color: var(--rh-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .rh-table tbody tr:last-child td { border-bottom: 0; } .rh-table tbody tr:hover { background: var(--rh-surface-2); } .rh-num { /* Tabular figures so car numbers line up down a column. */ font-variant-numeric: tabular-nums; font-weight: 700; } /* --- badges -------------------------------------------------------------- */ .rh-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11.5px; font-weight: 700; line-height: 1.5; background: var(--rh-surface-2); border: 1px solid var(--rh-border); color: var(--rh-muted); white-space: nowrap; } .rh-badge.is-red { background: var(--rh-red); border-color: var(--rh-red); color: #fff; } .rh-badge.is-blue { background: var(--rh-blue); border-color: var(--rh-blue); color: #fff; } .rh-badge.is-green { background: var(--rh-green); border-color: var(--rh-green); color: #fff; } .rh-badge.is-amber { background: var(--rh-amber); border-color: var(--rh-amber); color: #101010; } /* --- buttons ------------------------------------------------------------- */ .rh-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--rh-border); background: var(--rh-surface-2); color: var(--rh-text); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .rh-btn:hover { border-color: var(--rh-muted); color: var(--rh-text); } .rh-btn.is-primary { background: var(--rh-red); border-color: var(--rh-red); color: #fff; } .rh-btn.is-amber { background: var(--rh-amber); border-color: var(--rh-amber); color: #101010; } .rh-btn.is-small { padding: 4px 9px; font-size: 12px; } /* --- forms (Flask-WTF) ---------------------------------------------------- */ .rh-field { margin-bottom: 14px; } .rh-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; } .rh-input, .rh-select, .rh-textarea { display: block; width: 100%; padding: 8px 11px; background: var(--rh-surface-2); border: 1px solid var(--rh-border); border-radius: 6px; color: var(--rh-text); font-size: 14px; font-family: inherit; } .rh-input:focus, .rh-select:focus, .rh-textarea:focus { outline: none; border-color: var(--rh-blue); box-shadow: 0 0 0 3px rgba(37, 131, 255, 0.18); } .rh-input.is-invalid, .rh-select.is-invalid, .rh-textarea.is-invalid { border-color: var(--rh-red); } .rh-help { margin-top: 4px; color: var(--rh-muted); font-size: 12.5px; } .rh-error { margin-top: 4px; color: var(--rh-red); font-size: 12.5px; } .rh-check { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .rh-check input { width: 16px; height: 16px; accent-color: var(--rh-blue); } .rh-check label { font-size: 13.5px; margin: 0; } /* --- icons --------------------------------------------------------------- */ .rh-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; } /* --- event header -------------------------------------------------------- */ .rh-event-header { margin-bottom: var(--rh-gap); } .rh-event-header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rh-event-header p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } /* --- app chrome ---------------------------------------------------------- */ .rh-nav { border-bottom: 1px solid var(--rh-border); background: var(--rh-surface); margin-bottom: 22px; } .rh-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--rh-gap); min-height: 54px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .rh-brand { font-weight: 800; letter-spacing: 0.12em; color: var(--rh-text); text-decoration: none; font-size: 16px; } .rh-brand span { color: var(--rh-red); } .rh-nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .rh-nav-links.is-right { margin-left: auto; } .rh-nav-links a { padding: 6px 10px; border-radius: 6px; color: var(--rh-muted); text-decoration: none; font-size: 13.5px; font-weight: 600; } .rh-nav-links a:hover { color: var(--rh-text); background: var(--rh-surface-2); } .rh-main { max-width: 1200px; margin: 0 auto; padding: 0 var(--rh-gap) 48px; } .rh-footer { max-width: 1200px; margin: 0 auto; padding: 0 var(--rh-gap) 28px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; color: var(--rh-muted); font-size: 12.5px; } /* Keeps the copyright and the sign-in link together on the right, so space-between still puts the tagline opposite them rather than spreading three items evenly across the width. */ .rh-footer-end { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } /* --- alerts -------------------------------------------------------------- */ .rh-alert { padding: 11px 14px; border: 1px solid var(--rh-border); border-left-width: 3px; border-radius: var(--rh-radius); background: var(--rh-surface); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .rh-alert.is-success { border-left-color: var(--rh-green); } .rh-alert.is-danger { border-left-color: var(--rh-red); } .rh-alert.is-warning { border-left-color: var(--rh-amber); } .rh-alert.is-info { border-left-color: var(--rh-blue); } .rh-alert-close { background: none; border: 0; color: var(--rh-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; } /* --- breadcrumb ---------------------------------------------------------- */ .rh-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; color: var(--rh-muted); font-size: 12.5px; } .rh-crumbs a { text-decoration: none; } .rh-crumbs span::before { content: "/"; margin-right: 6px; opacity: .5; } .rh-crumbs > :first-child::before { content: none; } /* --- page headings ------------------------------------------------------- */ .rh-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--rh-gap); } .rh-h1 { margin: 0; font-size: 21px; font-weight: 700; } .rh-h2 { margin: 0 0 10px; font-size: 16px; font-weight: 650; } .rh-lead { color: var(--rh-muted); margin: 4px 0 var(--rh-gap); } /* --- grid + utilities ---------------------------------------------------- */ .rh-grid { display: grid; gap: 12px; } .rh-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rh-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rh-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rh-grid.is-side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } @media (max-width: 992px) { .rh-grid.is-2, .rh-grid.is-3, .rh-grid.is-4, .rh-grid.is-side { grid-template-columns: 1fr; } } .rh-stack { display: grid; gap: var(--rh-gap); } .rh-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rh-inline.is-end { justify-content: flex-end; } .rh-narrow { max-width: 620px; margin: 0 auto; } .rh-center { text-align: center; } .rh-right { text-align: right; } .rh-mt { margin-top: 12px; } .rh-mb { margin-bottom: 12px; } .rh-muted { color: var(--rh-muted); } .rh-small { font-size: 12.5px; } .rh-danger { color: var(--rh-red); } .rh-warning { color: var(--rh-amber); } .rh-hidden { display: none; } /* --- disclosure ---------------------------------------------------------- */ details.rh-disclosure > summary { cursor: pointer; color: var(--rh-muted); font-size: 12.5px; font-weight: 600; list-style: none; } details.rh-disclosure > summary::-webkit-details-marker { display: none; } details.rh-disclosure > summary::before { content: "▸ "; } details.rh-disclosure[open] > summary::before { content: "▾ "; } details.rh-disclosure > summary:hover { color: var(--rh-text); } .rh-danger-box { margin-top: 8px; padding: 10px; border: 1px solid var(--rh-red); border-radius: 6px; } /* --- segmented radio group ----------------------------------------------- */ .rh-segment { display: inline-flex; flex-wrap: wrap; } .rh-segment input { position: absolute; opacity: 0; pointer-events: none; } .rh-segment label { padding: 4px 9px; border: 1px solid var(--rh-border); background: var(--rh-surface-2); color: var(--rh-muted); font-size: 12px; font-weight: 600; cursor: pointer; margin: 0 0 0 -1px; } .rh-segment label:first-of-type { border-radius: 6px 0 0 6px; margin-left: 0; } .rh-segment label:last-of-type { border-radius: 0 6px 6px 0; } .rh-segment input:checked + label { color: #fff; } .rh-segment input:checked + label.is-info { background: var(--rh-blue); border-color: var(--rh-blue); } .rh-segment input:checked + label.is-success { background: var(--rh-green); border-color: var(--rh-green); } .rh-segment input:checked + label.is-muted { background: var(--rh-muted); border-color: var(--rh-muted); color: #101010; } .rh-segment input:checked + label.is-danger { background: var(--rh-red); border-color: var(--rh-red); } .rh-segment input:focus-visible + label { box-shadow: 0 0 0 3px rgba(37,131,255,.35); } /* --- misc ---------------------------------------------------------------- */ .rh-input.is-tiny { width: 5rem; display: inline-block; } .rh-input.is-inline { display: inline-block; width: auto; } .rh-table td form { margin: 0; } .rh-filters { display: flex; flex-wrap: wrap; gap: 6px; } .rh-filters a { padding: 5px 10px; border: 1px solid var(--rh-border); border-radius: 6px; color: var(--rh-muted); text-decoration: none; font-size: 12.5px; font-weight: 600; } .rh-filters a.active { background: var(--rh-surface-2); color: var(--rh-text); border-color: var(--rh-muted); } .rh-sort { color: var(--rh-muted); text-decoration: none; } .rh-sort:hover { color: var(--rh-text); } .rh-sort.active { color: var(--rh-text); } .rh-success { color: var(--rh-green); } /* --- wide pages ---------------------------------------------------------- * The entry grid and licence grid carry a dozen columns, so they get more * room than the reading-width pages. */ body.rh-wide .rh-main, body.rh-wide .rh-nav-inner, body.rh-wide .rh-footer { max-width: 1720px; } /* Segment buttons must stay on one line, or the status column reads as a * vertical list of options rather than one control. */ .rh-segment { flex-wrap: nowrap; white-space: nowrap; } .rh-segment label { white-space: nowrap; } /* Forms stay at a readable width even on a wide grid page: a 1250px-wide single-line input is unusable. */ .rh-card.is-form { max-width: 940px; } /* A section that must span the full dashboard width, not sit in one column. */ .rh-dashboard > .is-full { grid-column: 1 / -1; } /* --- PDF links ----------------------------------------------------------- */ .rh-pdf-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid transparent; } .rh-pdf-link:hover { background: var(--rh-surface-2); border-color: var(--rh-border); } .rh-icon.is-pdf { width: 19px; height: 19px; color: var(--rh-red); opacity: 1; } /* --- toolbars ------------------------------------------------------------ * A row of mixed controls -- selects, links-as-buttons, submit buttons -- * whose natural heights differ by a few pixels. One min-height lines them up * regardless of which element each one happens to be. */ .rh-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .rh-toolbar .rh-btn, .rh-toolbar .rh-select, .rh-toolbar .rh-input, .rh-toolbar button { min-height: 36px; } .rh-toolbar .rh-select, .rh-toolbar .rh-input { padding-top: 0; padding-bottom: 0; } /* --- theme switch --------------------------------------------------------- */ .rh-theme { display: inline-flex; align-items: center; gap: 0; } .rh-theme button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--rh-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; } .rh-theme button:hover { color: var(--rh-text); background: var(--rh-surface-2); border-color: var(--rh-border); } /* Light theme needs a touch more definition where the dark one relied on contrast between surfaces. */ :root[data-theme="light"] .rh-nav, :root:not([data-theme="dark"]) .rh-nav { box-shadow: 0 1px 0 rgba(13, 23, 36, 0.04); }