/* ---- Design tokens ---- Palette inspired by a hangar at dusk + safety-orange aircraft trim: --bg: #1B2430 deep slate navy --surface: #232E3D panel surface --surface-2: #2C3949 raised panel --border: #33404F --text: #EDEFF2 --muted: #8FA0B3 --accent: #E8622C 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; } :root { --bg: #1B2430; --surface: #232E3D; --surface-2: #2C3949; --border: #33404F; --text: #EDEFF2; --muted: #8FA0B3; --accent: #E8622C; --good: #4FA97C; --bad: #D9534F; } 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); } /* --- 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: 11px; 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