/* ---- Design tokens ---- Palette inspired by a hangar at dusk + safety-orange aircraft trim: --bg: #1B2430 deep slate navy --surface: #232E3D panel surface --surface-2: #283443 raised panel --border: #33404F --text: #EDEFF2 --muted: #8FA0B3 --accent: #EC7B4E safety orange (throttle/warning trim) --good: #4FA97C active / positive --bad: #D9534F pending / rejected Type: "Barlow Condensed" (display, gauge-like numerals) + "Inter" (body) + "JetBrains Mono" (data/tables) */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap'); * { box-sizing: border-box; } /* Turn off the mobile browsers' automatic text inflation. Left alone, iOS Safari and Chrome on Android grow the type in blocks they guess are body copy, by a factor derived from the block's width against the viewport's. The factor therefore differs per block — so turning a phone to landscape didn't scale the page, it scaled SOME of it, and the type scale below stopped holding: a 14px paragraph in a wide container came out bigger than a 16px heading in a narrow one. 100%, not `none`: `none` also stops the reader pinch-zooming text on some iOS versions, which trades a cosmetic bug for an accessibility one. 100% keeps manual zoom and the reader's own text-size preference working, and only declines the browser's uninvited guess. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* The whole admin site is dark. Telling the browser so makes it draw its native widgets — date fields, select menus, scrollbars — for a dark background. Without it Safari paints a date field's value in its light-scheme grey on our dark surface, unreadable next to the text fields beside it. */ :root { color-scheme: dark; /* Type scale. The app had twenty-one distinct font sizes in this file and eleven more in inline styles, with 11.5 / 12 / 12.5 / 13 / 13.5 all doing the same job within two pixels of each other. Half-pixel steps don't read as hierarchy, they read as carelessness. Five steps, each far enough from the next to be a deliberate choice: micro badges, chips, uppercase eyebrows meta dates, counts, supporting lines under a heading body reading text inside a panel title secondary panel headings panel panel headings Where two levels sit close together, colour does the separating (muted vs text), not another half pixel. */ --fs-micro: 11px; --fs-meta: 12.5px; --fs-body: 14px; --fs-title: 16px; --fs-panel: 18px; --fs-head: 21px; /* section headings above a panel title */ --fs-display: 26px; /* stat numbers, hero figures, the one-per-screen big thing */ --bg: #1B2430; --surface: #232E3D; /* Nudged down from #2C3949. The raised panel was the lightest thing any text had to sit on, so it alone set how pale the status colours had to be. Half a step darker buys back real saturation everywhere and still reads as raised. */ --surface-2: #283443; --border: #33404F; --text: #EDEFF2; /* Was #8FA0B3, which measured 4.39:1 on --surface-2 — just under AA, on the supporting text an older reader most needs. */ --muted: #92A3B5; /* The fill and the label are the same orange again. They were split when the text had to be paled to clear a lighter panel; darkening --surface-2 closed that gap, so the button, the border and the link are one colour once more. Contrast on the fill went UP doing it — a dark label reads 6.55:1 here against 5.42:1 on the old, more saturated orange. */ --accent: #EC7B4E; /* --accent paints; --accent-text is read. Safety orange is a fine FILL (dark text on it clears 5:1), but as a text colour it measured 4.06:1 on --surface and 3.47:1 on --surface-2 — both under AA, across 40 rules covering links, active tabs and headings. Worse on the accent-tinted chips, where the tint lifts the background toward the text: 2.83:1 at the darkest. Two values, because one could not serve both. A colour tint LIGHTENS the panel under it, dragging the background toward the text, so a chip needs a paler label than flat panel does. Forcing a single token to clear the chips washed out every link and heading on the site to pay for 22 badges. So: --accent-text for type on a plain surface, --accent-text-on-tint for type sitting on a wash of its own colour. Pick by what is behind it. */ --accent-text: #EC7B4E; --accent-text-on-tint: #F09774; --good: #4FA97C; --bad: #D9534F; /* Same split as --accent / --accent-text, and for the same reason: these read fine as fills but not as type. --good measured 4.08:1 on --surface-2 and --bad 2.96:1 — and --bad carries error messages, which is the last text that should be hard to read. Both values below clear 4.5:1 on every surface, including their own status tints. */ --good-text: #50AC7E; --good-text-on-tint: #7FC3A1; --bad-text: #E37E7B; --bad-text-on-tint: #E79491; } /* Use these instead of an inline font-size. Colour rides along on .t-meta because "smaller and quieter" is one decision, not two. */ .t-micro { font-size: var(--fs-micro); } .t-meta { font-size: var(--fs-meta); color: var(--muted); } .t-body { font-size: var(--fs-body); } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; /* Column flex so the shared site footer sits at the viewport bottom even when the view above it (e.g. the login card) is short. */ display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, .display { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } .mono { font-family: 'JetBrains Mono', monospace; } a { color: var(--accent-text); } /* --- App shell --- Shared header for both the login screen and the logged-in app. These values are deliberately copied 1:1 from the public homepage's nav.top / .brandmark (public/site.css) rather than approximated, so the bar itself doesn't shift position, color, or size when a member crosses from the public site into the app — same background rgba, same blur, same border color, same max-width wrap, same logo size. */ /* Brand row + tabs row stick together as one block, so the menu options stay fixed at the top while only the page content scrolls beneath. */ .app-header { position: sticky; top: 0; z-index: 30; } .topbar { background: rgba(27, 36, 48, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #364256; } .topbar-inner { max-width: 1180px; margin: 0 auto; padding: 12px clamp(20px, 5vw, 56px); min-height: 86px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; /* Stay one row while it fits; when brand + actions no longer fit, the actions block wraps onto its own row instead of overflowing the viewport. */ flex-wrap: wrap; gap: 10px 16px; } .topbar .brand { display: flex; align-items: center; gap: 16px; text-decoration: none; } .topbar .brand-logo { height: 60px; width: auto; border-radius: 8px; flex-shrink: 0; } /* The logo already carries the club name; the line beside it is the section label (or, once signed in, who you're signed in as), set off by a divider. Matches the public nav's brand treatment. */ .topbar .brand-text { display: flex; flex-direction: column; line-height: 1.3; padding-left: 16px; border-left: 1px solid #364256; } .topbar .brand-text span { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-micro); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } /* Email (primary) reads brighter than the role line beneath it, with a little gap so the two lines aren't cramped together. */ #whoami { color: var(--text); } .topbar .brand-text .whoami-role { display: inline-block; margin-top: 3px; color: var(--muted); } .topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Same ghost-button treatment as the public nav's .btn-ghost, applied to both the (Public Site) and