/* ========================================================================== Backyard Ultra Manager — design tokens + shared components -------------------------------------------------------------------------- Two themes, switched by [data-theme] on : ljungby light, Backyard Ultra Ljungby brand (red #e8393b / cyan #03c4eb) classic the original dark blue scheme Every colour below is a token. Components never hardcode a colour, so a third theme is a matter of adding one more block here. ========================================================================== */ :root, [data-theme="ljungby"] { color-scheme: light; /* surfaces */ --bg: #f2f4f5; --bg-tint: #e8ecee; --panel: #ffffff; --panel-2: #f8f9f9; --panel-3: #eef1f2; --border: #e0e4e6; --border-strong: #c9d0d3; /* type */ --text: #1d1d1b; --text-strong: #000000; --text-muted: #6a7278; --text-invert: #ffffff; /* brand: the red from the BUL wordmark */ --brand: #e8393b; --brand-hover: #d02f31; --brand-ink: #ffffff; --brand-soft: rgba(232, 57, 59, 0.10); --brand-line: rgba(232, 57, 59, 0.35); /* accent: the cyan the buljungby.se theme uses for links/highlights */ --accent: #03c4eb; --accent-hover: #02a9cb; --accent-ink: #04303a; --accent-soft: rgba(3, 196, 235, 0.12); /* semantic */ --ok: #0e7a52; --ok-soft: rgba(14, 122, 82, 0.12); --danger: #cf2e2e; --danger-soft: rgba(207, 46, 46, 0.10); --warn: #a86400; --warn-soft: rgba(252, 185, 0, 0.16); /* hero / big screen backdrop */ --hero-bg: linear-gradient(140deg, #1d1d1b 0%, #2b1416 55%, #4a1315 100%); --hero-glow-1: rgba(232, 57, 59, 0.40); --hero-glow-2: rgba(3, 196, 235, 0.22); --hero-text: #ffffff; --hero-muted: rgba(255, 255, 255, 0.68); --hero-line: rgba(255, 255, 255, 0.16); /* big screen: its own palette — see screen.css */ --screen-bg: linear-gradient(160deg, #2b3c52 0%, #35485f 55%, #405674 100%); --screen-glow-1: rgba(3, 196, 235, 0.22); --screen-glow-2: rgba(180, 200, 225, 0.16); --screen-text: #ffffff; --screen-muted: rgba(255, 255, 255, 0.72); --screen-line: rgba(255, 255, 255, 0.22); --screen-panel: rgba(255, 255, 255, 0.09); --screen-row: rgba(255, 255, 255, 0.06); --screen-accent: #7fe9ff; --screen-dnf: #ffb4b4; --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.06); --shadow: 0 2px 10px rgba(16, 24, 32, 0.08); --shadow-lg: 0 18px 44px rgba(16, 24, 32, 0.16); } [data-theme="classic"] { color-scheme: dark; --bg: #0f1115; --bg-tint: #0b0d11; --panel: #171a22; --panel-2: #12151a; --panel-3: #0d0f14; --border: #252a36; --border-strong: #384054; --text: #e6eaf2; --text-strong: #ffffff; --text-muted: #9097a7; --text-invert: #0b1020; --brand: #7aa2f7; --brand-hover: #93b4ff; --brand-ink: #0b1020; --brand-soft: rgba(122, 162, 247, 0.14); --brand-line: rgba(122, 162, 247, 0.40); --accent: #5dd6ff; --accent-hover: #7ce0ff; --accent-ink: #04212b; --accent-soft: rgba(93, 214, 255, 0.14); --ok: #46d38b; --ok-soft: rgba(70, 211, 139, 0.14); --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, 0.14); --warn: #f6c356; --warn-soft: rgba(246, 195, 86, 0.14); --hero-bg: linear-gradient(140deg, #0b0f14 0%, #101826 60%, #16213a 100%); --hero-glow-1: rgba(122, 162, 247, 0.30); --hero-glow-2: rgba(93, 214, 255, 0.22); --hero-text: #f0f4ff; --hero-muted: rgba(240, 244, 255, 0.66); --hero-line: rgba(255, 255, 255, 0.12); --screen-bg: linear-gradient(160deg, #22304a 0%, #2a3c5c 60%, #344a72 100%); --screen-glow-1: rgba(93, 214, 255, 0.22); --screen-glow-2: rgba(122, 162, 247, 0.20); --screen-text: #ffffff; --screen-muted: rgba(255, 255, 255, 0.72); --screen-line: rgba(255, 255, 255, 0.22); --screen-panel: rgba(255, 255, 255, 0.09); --screen-row: rgba(255, 255, 255, 0.06); --screen-accent: #9fe9ff; --screen-dnf: #ffb4b4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 2px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.55); } /* Shared, theme-independent tokens */ :root { --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter", system-ui, -apple-system, "Segoe UI Semibold", "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --wrap: 1180px; --gap: 16px; } /* ========================================================================== Reset / base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.01em; } h1 { font-size: clamp(28px, 4vw, 44px); } h2 { font-size: clamp(20px, 2.4vw, 26px); } h3 { font-size: 18px; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent-hover); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Cards & sections ========================================================================== */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .card > :last-child { margin-bottom: 0; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .card-head h2, .card-head h3 { margin: 0; } .section-note { color: var(--text-muted); font-size: 14px; } .kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 700; color: var(--brand); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 600; padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .06s ease; } .btn:hover { background: var(--panel-3); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn.danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .btn.danger:hover { background: var(--danger); color: var(--text-invert); } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn.ghost:hover { background: var(--panel-3); color: var(--text); } .btn.small { padding: 5px 10px; font-size: 13px; } .btn.big { padding: 14px 20px; font-size: 17px; } .btn.block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ========================================================================== Forms ========================================================================== */ label { display: block; margin-bottom: 12px; } .field-label, label > span.label-text { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; } .input, input[type="text"], input[type="number"], input[type="url"], input[type="datetime-local"], input[type="file"], select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 11px; } .input:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .input.small { padding: 5px 8px; font-size: 14px; } textarea { resize: vertical; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 4px 16px; align-items: end; } .form-grid .full { grid-column: 1 / -1; } .check { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text); } .check input { width: auto; } .inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hint { font-size: 13px; color: var(--text-muted); } /* ========================================================================== Tables ========================================================================== */ .table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } table { width: 100%; border-collapse: collapse; } thead th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); padding: 8px 10px; white-space: nowrap; } tbody td { border-bottom: 1px solid var(--border); padding: 10px; vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--panel-2); } .num { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .rank { font-weight: 700; color: var(--text-muted); width: 3em; } .bib { font-family: var(--font-mono); font-weight: 700; color: var(--brand); } .laps-cell { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; } /* Gold for the winner of a finished race — the runner who never stopped. No silver or bronze: places 2 and below are DNFs, and a backyard has one winner, not a podium. */ .standings.is-final tbody tr:not(.is-dnf) .rank { color: #c8a234; } /* ========================================================================== Badges / status ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .badge.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } .badge.dnf { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .badge.draft { background: var(--panel-3); color: var(--text-muted); border-color: var(--border-strong); } .badge.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); } .badge.finished { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); } .badge.neutral { background: var(--panel-3); color: var(--text-muted); border-color: var(--border); } /* A pulsing dot for "this is live" */ .badge.active::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } @media (prefers-reduced-motion: reduce) { .badge.active::before { animation: none; } } /* ========================================================================== Stats ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 12px; } .stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; } .stat .value { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-strong); } .stat .label { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .stat.ok .value { color: var(--ok); } .stat.dnf .value { color: var(--danger); } .stat.brand .value { color: var(--brand); } /* ========================================================================== Flash messages ========================================================================== */ .flash-area { margin: 16px auto 0; } .flash { display: flex; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); } .flash.success { border-left-color: var(--ok); } .flash.error { border-left-color: var(--danger); } .flash.info { border-left-color: var(--accent); } /* ========================================================================== Race logo ========================================================================== */ .race-logo { display: block; object-fit: contain; border-radius: var(--radius-sm); background: #ffffff; padding: 6px; } .race-logo.xs { width: 32px; height: 32px; } .race-logo.sm { width: 48px; height: 48px; } .race-logo.md { width: 76px; height: 76px; } .race-logo.lg { width: 120px; height: 120px; } /* Placeholder shown when a race has no logo yet */ .race-logo-fallback { display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-soft); border: 1px dashed var(--brand-line); color: var(--brand); font-weight: 800; letter-spacing: 0.04em; } .race-logo-fallback.xs { width: 32px; height: 32px; font-size: 12px; } .race-logo-fallback.sm { width: 48px; height: 48px; font-size: 15px; } .race-logo-fallback.md { width: 76px; height: 76px; font-size: 22px; } .race-logo-fallback.lg { width: 120px; height: 120px; font-size: 34px; } /* ========================================================================== Site header: shared shell for public + admin ========================================================================== */ .site-header { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 62px; flex-wrap: wrap; } .brand-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-strong); letter-spacing: -0.02em; } .brand-mark:hover { text-decoration: none; } .brand-mark .chip { background: var(--brand); color: var(--brand-ink); padding: 3px 7px; border-radius: 6px; font-size: 12px; letter-spacing: 0.08em; } .nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-right: auto; } .nav a { color: var(--text-muted); font-size: 14px; font-weight: 600; padding: 7px 11px; border-radius: var(--radius-sm); } .nav a:hover { color: var(--text); background: var(--panel-3); text-decoration: none; } .nav a.is-active { color: var(--brand); background: var(--brand-soft); } .header-tools { display: flex; align-items: center; gap: 8px; } /* Segmented control used for both the language and theme switchers */ .switcher { display: inline-flex; background: var(--panel-3); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; } .switcher a { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); color: var(--text-muted); line-height: 1.4; } .switcher a:hover { color: var(--text); text-decoration: none; } .switcher a.is-active { background: var(--panel); color: var(--text-strong); box-shadow: var(--shadow-sm); } /* ========================================================================== Footer ========================================================================== */ .site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--panel); padding: 24px 0; color: var(--text-muted); font-size: 14px; } .site-footer .wrap { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; align-items: center; } /* ========================================================================== Utilities ========================================================================== */ .muted { color: var(--text-muted); } .mono { font-family: var(--font-mono); } .center { text-align: center; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 16px; } .empty { padding: 28px; text-align: center; color: var(--text-muted); font-style: italic; } @media (max-width: 720px) { .site-header .wrap { min-height: 0; padding-top: 10px; padding-bottom: 10px; } .nav { order: 3; width: 100%; margin-right: 0; } .card { padding: 16px; } } /* ========================================================================== Automatic lap crediting -------------------------------------------------------------------------- A lap credited at the top of the hour is provisional until the manager has said who stopped. Everywhere that number appears it carries a small mark. ========================================================================== */ .credit-mark { margin-left: 4px; padding: 1px 5px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: lowercase; vertical-align: super; cursor: help; white-space: nowrap; } .credit-flag { display: inline-grid; place-items: center; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .credit-flag.small { padding: 2px 8px; font-size: 10px; } /* ========================================================================== Explained choice list (used for the auto-credit setting) ========================================================================== */ .choice-list { display: grid; gap: 10px; } .choice { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel-2); cursor: pointer; } .choice:hover { background: var(--panel-3); } .choice.is-chosen { border-color: var(--brand); background: var(--brand-soft); } .choice input { width: auto; margin-top: 3px; flex: none; } .choice b { display: block; font-size: 15px; color: var(--text-strong); } .choice em { display: block; margin-top: 3px; font-style: normal; font-size: 14px; color: var(--text-muted); max-width: 68ch; } /* Runners who have stopped are listed below those still in, and dimmed so the two groups read apart at a glance. */ .standings tbody tr.is-dnf td { color: var(--text-muted); } .standings tbody tr.is-dnf .bib, .standings tbody tr.is-dnf .laps-cell { opacity: .7; } /* A rule where the field ends and the DNFs begin: the first stopped runner is the one directly after a runner who is still in. */ .standings tbody tr:not(.is-dnf) + tr.is-dnf td { border-top: 2px solid var(--border-strong); } /* Combined figures at the foot of a table. */ tfoot .totals td { border-top: 2px solid var(--border-strong); border-bottom: 0; padding-top: 12px; font-weight: 800; color: var(--text-strong); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; } tfoot .totals .laps-cell { font-size: 17px; text-transform: none; } /* ========================================================================== Running figure (status: still in the race) -------------------------------------------------------------------------- Two stride poses alternate to make a run cycle, plus a small bob. Drawn inline so it never depends on an emoji font being present. ========================================================================== */ .badge.is-icon, .tag.is-icon { padding: 3px 9px; min-height: 22px; } .run-icon { display: block; width: 1.35em; height: 1.35em; overflow: visible; animation: runBob 340ms ease-in-out infinite; } .run-frame-a { animation: runFrameA 340ms steps(1, end) infinite; } .run-frame-b { animation: runFrameB 340ms steps(1, end) infinite; } @keyframes runFrameA { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes runFrameB { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes runBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } } /* Hold a single readable pose for anyone who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .run-icon, .run-frame-a, .run-frame-b { animation: none; } .run-frame-b { opacity: 0; } } /* ========================================================================== Phones -------------------------------------------------------------------------- The public pages are read on a phone at the side of a course, so nothing may push the page sideways and everything tappable needs a real target. ========================================================================== */ /* A long race name in a button must wrap rather than widen the page. */ .btn.big, .btn.block, .hero-actions .btn { white-space: normal; } @media (max-width: 720px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; text-align: center; } /* Comfortable touch targets. */ .btn { min-height: 44px; padding: 11px 16px; } .btn.small { min-height: 38px; padding: 8px 12px; } .switcher a { padding: 9px 14px; } .nav a { padding: 10px 12px; } .input, input, select, textarea { min-height: 44px; font-size: 16px; } .input.small { min-height: 36px; font-size: 15px; } /* Header stacks instead of squeezing. */ .site-header .wrap { gap: 10px; } .header-tools { width: 100%; justify-content: space-between; } .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 6px; } .card { padding: 14px; } .card-head { gap: 8px; } .stats { grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); gap: 8px; } } /* 16px on inputs stops iOS zooming the page when a field takes focus. */ @media (max-width: 720px) { input[type="search"], input[type="text"], input[type="number"], input[type="password"], input[type="url"], input[type="datetime-local"] { font-size: 16px; } } /* ========================================================================== Header menu -------------------------------------------------------------------------- On a phone the header keeps the event name and nothing else; the links, switchers and sign-in fold behind a button. On a wide screen the button disappears and the panel sits inline as an ordinary header row. ========================================================================== */ .brand-race { display: none; } .burger { display: none; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 11px 10px; flex-direction: column; justify-content: space-between; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--panel-2); cursor: pointer; } .burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--text); transition: transform .16s ease, opacity .16s ease; } .site-header.menu-open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .site-header.menu-open .burger span:nth-child(2) { opacity: 0; } .site-header.menu-open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } @media (min-width: 721px) { .menu-panel { display: flex; align-items: center; gap: 10px; flex: 1; } .menu-panel .nav { margin-right: auto; } } @media (max-width: 720px) { .site-header .wrap { flex-wrap: wrap; align-items: center; } .burger { display: flex; } /* The event name is the only thing worth the width up here. */ .site-header.has-race .brand-full { display: none; } .site-header.has-race .brand-race { display: block; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-panel { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0 4px; margin-top: 10px; border-top: 1px solid var(--border); } .site-header.menu-open .menu-panel { display: flex; } .menu-panel .nav { flex-direction: column; align-items: stretch; gap: 2px; } .menu-panel .nav a { padding: 12px; border-radius: var(--radius-sm); } .menu-panel .header-tools { flex-direction: column; align-items: stretch; gap: 8px; } .menu-panel .switcher { justify-content: center; } .menu-panel .switcher a { flex: 1; text-align: center; } .menu-panel form, .menu-panel > a.btn { width: 100%; } .menu-panel .btn { width: 100%; justify-content: center; } } /* Published but not yet under way: visible to the public, not running. */ .badge.published { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); } .pill.published { background: rgba(255, 255, 255, 0.14); }