/* ========================================================================== Admin portal — built on the design system in design.md. Strong typography. Soft surfaces. Bold accents. Dark by default, with the design.md light theme available from the toggle. ========================================================================== */ /* Dark is the product default. Light is opt-in via data-theme="light" on , set by the toggle in the top bar and remembered in localStorage. Only colour tokens change between themes; everything else is shared. */ :root { color-scheme: dark; /* -- Canvas & surfaces -------------------------------------------------- */ --bg: #0E120F; --bg-alt: #161C18; --surface: #151A16; --surface-alt: #1C231E; /* -- Brand ------------------------------------------------------------- */ --volt: #9FCC6B; --volt-strong: #AEDA7C; --volt-tint: rgba(159, 204, 107, .18); --volt-ink: #BEDF98; --teal: #35E0C9; --teal-tint: rgba(53, 224, 201, .18); --teal-ink: #63E7D5; /* -- Status ------------------------------------------------------------ */ --coral: #FF6B4A; --coral-ink: #FF9B82; --coral-tint: rgba(255, 107, 74, .18); --amber: #FFC24B; --amber-ink: #FFD68A; --amber-tint: rgba(255, 194, 75, .18); --success-ink: #BEDF98; /* -- Typography -------------------------------------------------------- */ --text: #ECF1ED; --text-2: #A9B4AC; --text-3: #7F8A83; --text-disabled: #5C655F; --on-accent: #101712; /* -- Borders ----------------------------------------------------------- */ --border: #262E28; --border-strong: #333C35; --border-input: #2E372F; /* -- Surfaces that are not plain panels -------------------------------- */ --map-bg: #1C231E; --auth-grad-1: #0E120F; --auth-grad-2: #141D17; /* -- Radii ------------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-card: 18px; --r-card-lg: 24px; --r-ctl: 14px; --r-pill: 999px; /* -- Shadows: on a dark canvas they need to be deeper to read at all --- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35); --shadow-md: 0 4px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .60); /* -- Fonts ------------------------------------------------------------- */ --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* -- Motion ------------------------------------------------------------ */ --t-micro: 140ms cubic-bezier(.2, .7, .3, 1); --t-ctl: 180ms cubic-bezier(.2, .7, .3, 1); --sidebar-w: 244px; --topbar-h: 68px; } /* The light theme from design.md, kept intact and available on demand. */ :root[data-theme="light"] { color-scheme: light; --bg: #F6F8F5; --bg-alt: #EEF2EE; --surface: #FFFFFF; --surface-alt: #F1F4F0; --volt: #9FCC6B; --volt-strong: #8FBE58; --volt-tint: rgba(159, 204, 107, .16); --volt-ink: #4C6B28; --teal: #35E0C9; --teal-tint: rgba(53, 224, 201, .16); --teal-ink: #0F7F70; --coral: #FF6B4A; --coral-ink: #D94F36; --coral-tint: rgba(255, 107, 74, .12); --amber: #FFC24B; --amber-ink: #916A00; --amber-tint: rgba(255, 194, 75, .18); --success-ink: #3F5A20; --text: #101712; --text-2: #53605A; --text-3: #7C8781; --text-disabled: #AAB2AD; --on-accent: #101712; --border: #E3E8E3; --border-strong: #D5DDD6; --border-input: #DDE4DE; --map-bg: #F0F3EF; --auth-grad-1: #F6F8F5; --auth-grad-2: #EEF6EE; --shadow-sm: 0 2px 8px rgba(11, 15, 20, .04); --shadow-md: 0 4px 20px rgba(11, 15, 20, .06); --shadow-lg: 0 12px 40px rgba(11, 15, 20, .10); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; color: var(--text); } a { color: var(--teal-ink); text-decoration: none; } a:hover { color: var(--text); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); padding: 12px 20px; border-radius: var(--r-md); } .skip-link:focus { left: 12px; top: 12px; } /* ---------- Top bar ------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: var(--topbar-h); padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar__spacer { flex: 1; } .topbar__user { display: flex; align-items: center; gap: 12px; } .topbar__name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-2); } .topbar__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .topbar__toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); } .brand:hover { color: var(--text); } .brand__mark { display: grid; place-items: center; width: 38px; height: 38px; margin-top: -12px; /* border-radius: var(--r-md); */ /* background: var(--volt); color: var(--on-accent); */ /* font-family: var(--font-display); font-weight: 700; font-size: 19px; */ } .brand__text { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; } .brand__text small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } /* ---------- Theme toggle -------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-alt); color: var(--text-2); cursor: pointer; transition: background var(--t-ctl), color var(--t-ctl), border-color var(--t-ctl); } .theme-toggle:hover { background: var(--surface-alt); color: var(--text); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--volt-tint); } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Show the moon in light mode and the sun in dark: the icon is the action. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .theme-toggle--floating { position: fixed; top: 20px; right: 20px; z-index: 40; background: var(--surface); } /* ---------- Shell / sidebar ---------------------------------------------- */ .shell { display: flex; align-items: flex-start; } .sidebar { position: sticky; top: var(--topbar-h); flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); padding: 24px 16px; background: var(--surface); border-right: 1px solid var(--border); min-height: calc(100vh - var(--topbar-h)); } .sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .sidebar a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: var(--r-md); color: var(--text-2); font-size: 15px; font-weight: 600; transition: background var(--t-micro), color var(--t-micro); } .sidebar a:hover { background: var(--surface-alt); color: var(--text); } /* A small volt indicator rather than a fully green nav item. */ .sidebar a.is-active { background: var(--surface-alt); color: var(--text); } .sidebar a.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 22px; margin-top: -11px; background: var(--volt); border-radius: 0 3px 3px 0; } .sidebar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .sidebar a.is-active svg { stroke: var(--text); } .content { flex: 1; min-width: 0; padding: 32px 40px 48px; max-width: 1400px; } .footer { padding: 20px 40px 32px; color: var(--text-3); font-size: 13px; text-align: center; } /* ---------- Page header --------------------------------------------------- */ .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 32px; } .page-head h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; } .page-head .spacer { flex: 1; } .page-head p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; } /* ---------- Cards --------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-md); margin-bottom: 24px; overflow: hidden; } .card__head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); } .card__head h2 { margin: 0; font-size: 17px; line-height: 23px; font-weight: 600; } .card__head .spacer { flex: 1; } .card__body { padding: 24px; } .card__body--flush { padding: 0; } /* ---------- Collapsible cards -------------------------------------------- */ .card--collapsible > .card__head { cursor: pointer; user-select: none; transition: background var(--t-micro); } .card--collapsible > .card__head:hover { background: var(--surface-alt); } /* The chevron is the accessible control; the whole header is a click target. */ .card__toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; margin-left: -4px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; } .card__toggle:hover { background: var(--bg-alt); color: var(--text); } .card__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--volt-tint); } .card__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-ctl); } /* Chevron points down when open, right when closed. */ .card.is-collapsed .card__toggle svg { transform: rotate(-90deg); } .card.is-collapsed > .card__head { border-bottom-color: transparent; } .card.is-collapsed > .card__body, .card.is-collapsed > .pagination { display: none; } .card-controls { display: flex; justify-content: flex-end; gap: 8px; margin: -8px 0 20px; } /* ---------- Stats --------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px 24px; box-shadow: var(--shadow-sm); } .stat__label { color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .stat__value { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; } /* ---------- Tables -------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 15px; } table.data th { padding: 14px 16px; text-align: left; background: var(--surface-alt); font-family: var(--font-display); font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; border-bottom: 1px solid var(--border); } table.data td { padding: 16px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); color: var(--text-2); } table.data td strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background var(--t-micro); } table.data tbody tr:hover { background: var(--bg); } table.data td.actions { text-align: right; white-space: nowrap; } .empty { padding: 56px 24px; text-align: center; color: var(--text-3); font-size: 15px; } /* Column sizing so long names and addresses don't wrap into tall rows. */ .col-title { min-width: 168px; } .col-route { min-width: 232px; } .col-thumb { width: 92px; } table.data td.col-route { line-height: 1.5; } table.data td.col-route .muted { display: inline-block; min-width: 38px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } /* ---------- Chips / badges ------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--bg-alt); color: var(--text-2); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; } /* A dot alongside the label so status never relies on colour alone. */ .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; } .badge--athlete { background: var(--volt-tint); color: var(--volt-ink); } .badge--supporter { background: var(--teal-tint); color: var(--teal-ink); } .badge--active { background: var(--volt-tint); color: var(--volt-ink); } .badge--inactive { background: var(--bg-alt); color: var(--text-3); } .badge--water { background: var(--teal-tint); color: var(--teal-ink); } .badge--medical { background: var(--coral-tint); color: var(--coral-ink); } .badge--food { background: var(--amber-tint); color: var(--amber-ink); } .badge--viewing { background: var(--volt-tint); color: var(--volt-ink); } .badge--draft { background: var(--bg-alt); color: var(--text-3); } .badge--published { background: var(--volt-tint); color: var(--volt-ink); } .badge--completed { background: var(--bg-alt); color: var(--text-3); } .badge--cancelled { background: var(--coral-tint); color: var(--coral-ink); } /* Live indicator, per design.md §16. */ .badge--live { background: var(--coral-tint); color: var(--coral-ink); } .badge--live::before { background: var(--coral); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--volt); color: var(--on-accent); font-family: var(--font-display); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--t-ctl), transform var(--t-ctl), box-shadow var(--t-ctl); } .btn:hover { background: var(--volt-strong); color: var(--on-accent); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--volt-tint); } .btn--ghost { background: var(--bg-alt); color: var(--text); border-color: transparent; } .btn--ghost:hover { background: var(--border); color: var(--text); } .btn--teal { background: var(--teal); color: var(--on-accent); } .btn--teal:hover { background: #22CBB4; } /* Dark ink, not white: white on coral is only 2.8:1, below AA. Dark text on the accent is what design.md §5 already asks for on volt and teal. */ .btn--danger { background: var(--coral); color: var(--on-accent); } .btn--danger:hover { background: #FF8163; color: var(--on-accent); } /* Compact controls for table rows and toolbars. */ .btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--r-md); } /* Quiet inline actions inside table rows. */ .btn--link { background: none; border: 0; color: var(--text-2); min-height: 38px; padding: 0 10px; border-radius: var(--r-sm); font-family: var(--font-body); font-weight: 600; font-size: 14px; } .btn--link:hover { background: var(--bg-alt); color: var(--text); } .btn--link.is-danger { color: var(--coral-ink); } .btn--link.is-danger:hover { background: var(--coral-tint); color: var(--coral-ink); } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- Forms --------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } /* Exactly two per row, rather than as many as happen to fit. */ .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .form-grid--2 { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .field--full { grid-column: 1 / -1; } .field label { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--text); } .field .hint { font-size: 13px; line-height: 20px; color: var(--text-3); } .field .req { color: var(--coral-ink); } input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=tel], input[type=search], select, textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--border-input); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 15px; transition: border-color var(--t-ctl), box-shadow var(--t-ctl); } input::placeholder, textarea::placeholder { color: var(--text-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--volt); box-shadow: 0 0 0 3px rgba(159, 204, 107, .18); } textarea { min-height: 112px; resize: vertical; line-height: 1.6; } select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353605A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; } input[type=file] { width: 100%; padding: 13px 16px; font-size: 14px; color: var(--text-2); background: var(--surface-alt); border: 1px dashed var(--border-strong); border-radius: var(--r-ctl); cursor: pointer; } input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 13px; cursor: pointer; } input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--volt); cursor: pointer; } .form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); } .form-actions .spacer { flex: 1; } .filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .filters .field { min-width: 180px; flex: 1 1 180px; } .filters .field--actions { flex: 0 0 auto; } .checkline { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer; } .checkline input { width: 20px; } /* Search field with a leading icon. */ .search-field { position: relative; } .search-field input { padding-left: 46px; } .search-field svg { position: absolute; left: 16px; top: 50%; margin-top: -9px; width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 1.85; stroke-linecap: round; pointer-events: none; } /* ---------- Alerts -------------------------------------------------------- */ .alert { padding: 16px 18px; border-radius: var(--r-ctl); margin-bottom: 20px; font-size: 15px; font-weight: 500; } .alert--success { background: var(--volt-tint); color: var(--success-ink); } .alert--error, .alert--danger { background: var(--coral-tint); color: var(--coral-ink); } .alert--warning { background: var(--amber-tint); color: var(--amber-ink); } .alert--info { background: var(--teal-tint); color: var(--teal-ink); } .alert ul { margin: 8px 0 0; padding-left: 20px; } .alert li { margin-top: 4px; } .alert code { word-break: break-all; font-size: 13px; } .alert code a { color: inherit; text-decoration: underline; } /* ---------- Toasts -------------------------------------------------------- */ .toast-stack { position: fixed; top: calc(var(--topbar-h) + 16px); right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--volt); border-radius: var(--r-ctl); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in 240ms cubic-bezier(.2, .7, .3, 1); } .toast.is-leaving { animation: toast-out 200ms cubic-bezier(.4, 0, 1, 1) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(16px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(16px) scale(.98); } } .toast__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--success-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .toast__message { margin: 0; flex: 1; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); } .toast__close { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: pointer; } .toast__close:hover { background: var(--bg-alt); color: var(--text); } .toast__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } @media (max-width: 560px) { .toast-stack { right: 12px; left: 12px; width: auto; top: calc(var(--topbar-h) + 12px); } } /* ---------- Confirmation dialog ------------------------------------------ */ .modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(16, 23, 18, .45); animation: fade-in 160ms ease-out; } .modal__dialog { position: relative; width: min(440px, 100%); background: var(--surface); border-radius: var(--r-card-lg); box-shadow: var(--shadow-lg); padding: 28px; animation: dialog-in 200ms cubic-bezier(.2, .7, .3, 1); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .modal__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--coral-tint); color: var(--coral-ink); } .modal__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .modal__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; } .modal__message { margin: 0 0 24px; color: var(--text-2); font-size: 15px; line-height: 22px; } .modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .modal__actions .btn { min-width: 110px; } @media (max-width: 480px) { .modal__actions { flex-direction: column-reverse; } .modal__actions .btn { width: 100%; } } /* ---------- Auth pages ---------------------------------------------------- */ body.auth { display: grid; place-items: center; min-height: 100vh; padding: 32px 24px; /* A hero that stays mostly light — see design.md §26. */ background: linear-gradient(135deg, var(--auth-grad-1) 0%, var(--auth-grad-2) 100%); } .auth-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-lg); padding: 40px; box-shadow: var(--shadow-lg); } .auth-card h1 { margin: 0 0 8px; font-size: 28px; line-height: 34px; font-weight: 700; } .auth-card .sub { margin: 0 0 28px; color: var(--text-2); font-size: 15px; } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .auth-card .field + .field { margin-top: 20px; } .auth-card .btn { width: 100%; min-height: 52px; margin-top: 24px; } .auth-foot { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; text-align: center; color: var(--text-3); } .auth-foot a { font-weight: 600; } /* ---------- Races & markers ---------------------------------------------- */ .race-thumb { display: block; width: 72px; height: 52px; object-fit: cover; border-radius: var(--r-md); background: var(--surface-alt); } span.race-thumb { border: 1px dashed var(--border-strong); } .race-hero { max-width: 340px; width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .pill-group { display: flex; flex-wrap: wrap; gap: 8px; } /* Repeatable name/phone pairs, e.g. emergency contacts. */ .contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; } @media (max-width: 640px) { .contact-row { grid-template-columns: 1fr; } } /* Facility picker: one card per facility, ticked when available at the stop. */ .facility-set { margin: 24px 0 0; padding: 0; border: 0; } .facility-set legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; } .facility-set legend .hint { display: block; font-weight: 400; margin-top: 4px; } .facility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .facility { padding: 16px; border-radius: var(--r-ctl); background: var(--surface-alt); border: 1px solid transparent; transition: background var(--t-ctl), border-color var(--t-ctl); } .facility.is-on { background: var(--surface); border-color: var(--volt); } .facility__head { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 10px; cursor: pointer; } .facility__head input { flex: 0 0 auto; } .facility input[type=text] { min-height: 44px; padding: 10px 12px; font-size: 14px; background: var(--surface); } /* ---------- Maps (design.md §19 — the map stays visually quiet) ----------- */ .map { height: 380px; width: 100%; border-radius: var(--r-lg); background: var(--map-bg); /* map background before tiles load */ border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; } .map__fallback { margin: 0; padding: 24px; max-width: 42ch; text-align: center; color: var(--text-3); font-size: 14px; } /* Leaflet sets its own layout once initialised. */ .map.leaflet-container { display: block; } .leaflet-container { font: inherit; background: var(--map-bg); } .leaflet-popup-content { font-family: var(--font-body); font-size: 14px; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); } .leaflet-container a.leaflet-popup-close-button { color: var(--text-3); } .leaflet-control-attribution { background: var(--surface) !important; color: var(--text-3) !important; } .leaflet-control-attribution a { color: var(--text-2) !important; } .leaflet-bar a { background: var(--surface); color: var(--text); border-bottom-color: var(--border); } .leaflet-bar a:hover { background: var(--surface-alt); color: var(--text); } .leaflet-popup-content strong { font-family: var(--font-display); } .map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--text-2); } .map-legend__item { display: inline-flex; align-items: center; gap: 7px; } .map-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .map-dot--start { background: var(--volt); } .map-dot--finish { background: var(--coral); } .map-dot--route { background: var(--teal); border-radius: 2px; width: 16px; height: 4px; } .map-dot--stop { background: var(--text); } .map-dot--draft { background: var(--volt); } .map-legend__icon { display: block; width: auto; height: 16px; object-fit: contain; } .map-legend__hint { color: var(--text-3); font-style: italic; } /* Picking mode: clicking the map positions the stop. */ .map--pick.leaflet-container { cursor: crosshair; } .map--pick .leaflet-marker-icon, .map--pick .leaflet-interactive { cursor: pointer; } /* Summary of what a parsed GPX contained. */ .gpx-summary { display: flex; flex-wrap: wrap; gap: 20px; padding: 14px 16px; margin-bottom: 16px; background: var(--surface-alt); border-radius: var(--r-ctl); font-size: 14px; } .gpx-summary div { display: flex; flex-direction: column; gap: 2px; } .gpx-summary dt, .gpx-summary .k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .gpx-summary .v { font-family: var(--font-display); font-weight: 600; } /* Feedback while a chosen GPX file is read in the browser. */ .gpx-status { padding: 12px 16px; margin-bottom: 16px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; background: var(--surface-alt); color: var(--text-2); } .gpx-status--ok { background: var(--volt-tint); color: var(--success-ink); } .gpx-status--error { background: var(--coral-tint); color: var(--coral-ink); } .gpx-status--info { background: var(--teal-tint); color: var(--teal-ink); } .gpx-status[hidden] { display: none; } /* ---------- Suggested routes ---------------------------------------------- */ /* Which end of the route the next map click sets. */ .pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; padding: 10px 14px; background: var(--surface-alt); border-radius: var(--r-ctl); } .pick-bar__label { font-size: 14px; font-weight: 600; color: var(--text-2); } .pick-bar .hint { margin: 0; } /* The armed button, so it is never colour alone — it also gains a border. */ .pick-bar .btn.is-on { background: var(--volt); color: var(--on-accent); border-color: var(--volt); font-weight: 700; } /* Live preview of the Google Maps link the two pins produce. */ .route-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--teal-tint); border-radius: var(--r-ctl); } .route-link__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal-ink); } .route-link a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--teal-ink); word-break: break-all; } .route-link[hidden] { display: none; } @media (max-width: 560px) { .map { height: 300px; } } .advert-thumb { display: block; width: 84px; height: 52px; object-fit: cover; border-radius: var(--r-md); background: var(--surface-alt); } .advert-preview { max-width: 320px; width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-alt); } /* Long advert URLs must not stretch the table. */ .link-url { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } code.coords { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-2); background: var(--surface-alt); padding: 4px 8px; border-radius: var(--r-sm); } /* ---------- Utilities ----------------------------------------------------- */ .muted { color: var(--text-3); font-size: 14px; } .nowrap { white-space: nowrap; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .pagination { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 24px; align-items: center; } .pagination a, .pagination span { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--r-md); background: var(--bg-alt); color: var(--text-2); font-family: var(--font-display); font-size: 14px; font-weight: 600; } .pagination a:hover { background: var(--border); color: var(--text); } .pagination .is-current { background: var(--volt); color: var(--on-accent); } /* ---------- Responsive ---------------------------------------------------- */ @media (max-width: 1024px) { .content { padding: 24px 28px 40px; } } @media (max-width: 860px) { .topbar { padding: 0 16px; gap: 10px; } .topbar__toggle { display: flex; } .topbar__name { display: none; } .brand__text { font-size: 16px; } .sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 25; box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform 240ms cubic-bezier(.2, .7, .3, 1); } .sidebar.is-open { transform: translateX(0); } .content { padding: 20px 16px 40px; } .page-head { margin-bottom: 24px; } .page-head h1 { font-size: 24px; line-height: 30px; } .card__body, .card__head { padding: 18px; } .auth-card { padding: 28px 22px; } } /* Narrow phones: the top bar must be able to shrink, or the whole page scrolls sideways. */ @media (max-width: 560px) { .topbar { gap: 8px; padding: 0 12px; } .brand { min-width: 0; } .brand__text { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand__text small { display: none; } .topbar__user { gap: 6px; flex: 0 0 auto; } .topbar__user .btn--sm { padding: 0 10px; font-size: 13px; } .stats { grid-template-columns: 1fr 1fr; gap: 12px; } .stat { padding: 16px; } .stat__value { font-size: 26px; line-height: 30px; } .form-grid { grid-template-columns: 1fr; } .filters .field { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }