/*
* Design tokens and component classes rebuilt from the real EOC 2026
* ("European Orienteering Championships") brand: EOC2026_Fantasy_UI_Kit.svg
* (a Figma-ready UI kit built specifically for this fantasy app — colours,
* type, buttons/chips, stat cards, runner rows) cross-referenced against
* https://eoc2026.lt/ (the real championship this fantasy game is themed
* around) for tone. Previously this file ported a generic "Clean Minimal"
* mockup theme (teal accent, white cards) — that's fully replaced now.
*
* The core visual language from the kit: a light, neutral page canvas with
* bold near-black component blocks (stat cards, runner rows, the top bar)
* picked out with a single high-contrast lime accent, pill-shaped buttons/
* chips, and bold uppercase micro-labels. Structural containers that hold
* forms (the login/signup card, the squad-builder side panel) stay on a
* plain white surface for legibility — the kit itself only puts its bold
* black treatment on data-dense pieces (stat cards, runner rows), not on
* form chrome.
*/
:root {
--ink: #161616; --ink-soft: #2E3321; --muted: #6B7280; --muted-2: #9CA3AF;
--bg: #F4F5F0; --surface: #FFFFFF; --border: #E5E7EB; --border-soft: #F0F1F3;
/* dark component blocks (stat cards, runner rows, top bar) */
--card: #161616; --card-ink: #FFFFFF; --card-label: #9CA3AF; --card-border: #2E3321;
/* EOC Lime — the one high-contrast accent; text ON lime is always dark */
--accent: #DEFF00; --accent-ink: #161616; --accent-dark: #3D5F20; --accent-soft: #F5FFD1;
--gold: #B45309; --gold-soft: #FEF3E2;
/* --danger is the kit's exact Danger swatch (#D92D20); --danger-soft is
the kit's alert-box fill (#FFF1F0) lightened a couple points (checked
against WCAG AA 4.5:1 for the small flash-message text that sits on
it — #D92D20 on the kit's literal #FFF1F0 lands at 4.39:1, just under
the threshold). --success has no alert-box example in the kit to
crib from, and its exact swatch value (#178A4B) tops out at 4.40:1
even against pure white, so it's darkened slightly here — same hue,
same "success green" read, but text-legible at the sizes flash
messages use. */
--danger: #D92D20; --danger-soft: #FFF7F6; --danger-border: #FFD0CC;
--success: #13763F; --success-soft: #EAF7EE;
--radius: 16px; --radius-sm: 10px; --radius-pill: 999px;
--shadow: 0 1px 2px rgba(22,22,22,.04), 0 1px 3px rgba(22,22,22,.06);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
/* "Proxima Nova" first, matching eoc2026.lt's own --body-font — but
there's no @font-face or Adobe Fonts kit on that site either (it's a
paid Mark Simonson Studio font, not legally embeddable here), so this
only ever actually renders as Proxima Nova for a visitor who already
has it installed locally; everyone else falls through to the system
stack that was already here. See web/README.md's branding note. */
font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
a { color: inherit; text-decoration: none; }
/* EOC2026's own event crest (eoc2026.lt), shown next to the "EOC2026 FANTASY"
product wordmark — see web/README.md's branding note for the source and
why it's an ![]()
, not a CSS shape, now that the real asset is embedded. */
.logo-crest { height: 26px; width: auto; display: inline-block; }
/* ---------- app chrome (signed-in pages) ---------- */
.site-topbar { background: var(--card); border-bottom: 1px solid #000; position: sticky; top: 0; z-index: 20; }
.site-topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--card-ink); }
.site-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 600; color: var(--muted-2); }
.site-nav a.active { color: var(--accent); }
.site-user { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--card-ink); }
.locale-switcher { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.locale-switcher a { color: var(--muted-2); }
.locale-switcher a.active { color: var(--accent); }
.locale-switcher a:not(.active):hover { color: var(--card-ink); }
/* Mobile nav toggle (templates/layout/{app,public}.html.twig): a checkbox +
label, no JS. Wide viewports: the label is hidden and .site-menu-panel is
transparent (display:contents) so .site-nav / .site-user (or .pub-nav /
.pub-actions) lay out directly in the top bar's flex row, exactly as before.
The @media block near the end of this file takes over below 900px. */
.site-menu-panel { display: contents; }
/* The checkbox is never shown, but stays in the tab order (not [hidden]) so
the menu is keyboard-operable — focus lands on it and its focus ring is
mirrored onto the label below. */
.site-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 28px 24px 80px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 16px; }
.page-header h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.02em; }
.page-header p { margin: 0; color: var(--muted); font-size: 14px; }
/* ---------- buttons ---------- */
.btn { font-family: inherit; font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink-soft); }
.btn-outline:hover { border-color: var(--muted-2); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-disabled { background: var(--border-soft); color: var(--muted-2); cursor: not-allowed; }
.btn-sm { padding: 6px 13px; font-size: 11.5px; }
.btn-lg { padding: 12px 24px; font-size: 13.5px; }
button.btn { font-family: inherit; }
/* .btn-outline sits on both dark blocks (the top bar's logout/"Log In",
.card's summary stats, .runner-card rows like Transfers' "Transfer" and
Starters' "Bench") and the plain page surface (team-builder's "Filter"
button) — flip it to a light-on-dark ghost button whenever it's inside
one of the dark blocks, rather than needing a second button variant class
in every template. Without this, .btn-outline's default --ink-soft text
(a near-black dark olive, meant for light backgrounds) renders as
low-contrast dark-on-dark against .card/.runner-card's near-black fill. */
.site-topbar .btn-outline, .pub-topbar .btn-outline,
.card .btn-outline, .runner-card .btn-outline {
border-color: rgba(255,255,255,.3); color: var(--card-ink);
}
.site-topbar .btn-outline:hover, .pub-topbar .btn-outline:hover,
.card .btn-outline:hover, .runner-card .btn-outline:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- flash messages ---------- */
.flash { border-radius: var(--radius-sm); padding: 11px 16px; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.flash-success { background: var(--success-soft); color: var(--success); border: 1px solid #BFE6CB; }
.flash-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); }
/* ---------- summary cards ---------- */
.summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.card { background: var(--card); color: var(--card-ink); border-radius: var(--radius); padding: 18px 20px; }
.card-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--card-label); margin-bottom: 10px; }
.card-value { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.card-value.over { color: var(--danger); }
.card-sub { font-size: 12.5px; color: var(--card-label); margin-top: 4px; }
/* dashboard/no_team.html.twig reuses .section-sub (tuned for the light page
canvas) inside a dark .card — repoint it to the light-on-dark label
colour in that one context instead of forking a second "muted text"
class just for this. */
.card .section-sub { color: var(--card-label); }
.progress-track { height: 7px; background: var(--card-border); border-radius: var(--radius-pill); margin-top: 12px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.progress-fill.over { background: var(--danger); }
/* ---------- runner cards + squad builder layout ---------- */
.squad-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: start; }
/* Column ratios for the pages that don't want the default 1fr / 1.4fr split:
--even (dashboard roster, two equal halves) and --aside (set-starters, a
fixed-width side panel). All collapse to one column in the mobile @media
block near the end of this file. */
.squad-layout--even { grid-template-columns: 1fr 1fr; }
.squad-layout--aside { grid-template-columns: 1fr 380px; }
.squad-col-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.squad-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; }
.squad-col h3 .count { font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.runner-card { background: var(--card); color: var(--card-ink); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.flag { font-size: 19px; line-height: 1; width: 22px; text-align: center; }
.nation-flag-icon { vertical-align: middle; border-radius: 3px; }
.runner-name-wrap { flex: 1; min-width: 0; }
.runner-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Runner names double as links to RunnerResultsController's results page
(see runner_results/show.html.twig) — .runner-name itself is unchanged
visually until hovered, so this doesn't disturb any of the pool/roster
layouts it already governs. */
a.runner-name:hover { text-decoration: underline; }
.runner-meta { font-size: 11.5px; color: var(--card-label); margin-top: 3px; display: flex; gap: 6px; align-items: center; }
/* --card-border is too close to --card itself to read as a visible pill
(1.4:1 — the badge would basically disappear into the card), so this
uses the lime accent instead — it also makes gender the thing your eye
catches first while scanning the pool, which is the actual point of it. */
.gender-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 800; line-height: 1; }
.chip { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: .02em; text-transform: uppercase; }
.chip-first { background: var(--accent-dark); color: #fff; }
.chip-vet { background: var(--card-border); color: var(--accent); }
.chip-owned { background: var(--border-soft); color: var(--muted); }
.runner-cost { font-size: 12.5px; font-weight: 800; color: var(--accent); white-space: nowrap; }
/* the browsable runner pool on the team-builder screen */
.filter-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-input { flex: 1; min-width: 160px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 14px; font-size: 12.5px; font-family: inherit; background: var(--surface); }
.seg { display: flex; background: var(--border-soft); border-radius: var(--radius-pill); padding: 3px; }
.seg a, .seg button { border: none; background: transparent; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer; color: var(--muted); font-family: inherit; display: inline-block; }
.seg a.active, .seg button.active { background: var(--ink); color: var(--accent); }
.sort-select { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12px; font-family: inherit; color: var(--ink-soft); background: var(--surface); }
.runner-pool { max-height: 640px; overflow-y: auto; padding-right: 4px; }
.runner-pool .runner-card.picked { opacity: .45; }
.runner-pool .runner-card.ineligible { opacity: .55; }
/* "Available only" toggle in the filter row — a checkbox that tells the
RunnerPool to hide runners you can't actually pick / swap in right now
(over budget, nation taken, wrong gender for the outgoing runner). */
.filter-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.filter-check input { width: 15px; height: 15px; accent-color: var(--accent-dark); cursor: pointer; }
/* "Clear filters" — resets the filter row. A plain text link look, not a
button: it's an escape hatch, not a primary action. */
.filter-clear { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--muted); text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.filter-clear:hover { color: var(--ink); }
/* TomSelect (nation filter, nation_select_controller.js) restyled to match
the .sort-select pill sitting next to it — the vendor default is a
square white box that looked bolted-on. .nation-opt lays the flag SVG
beside the nation name in both the dropdown rows and the chosen value. */
.nation-opt { display: flex; align-items: center; gap: 8px; }
.nation-opt .nation-flag-icon { width: 16px; height: 16px; flex-shrink: 0; }
.ts-wrapper.sort-select { padding: 0; border: 0; background: none; min-width: 150px; }
.ts-wrapper.single .ts-control { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 30px 6px 14px; font-size: 12px; color: var(--ink-soft); background: var(--surface); min-height: 0; box-shadow: none; }
.ts-wrapper.single.dropdown-active .ts-control { border-radius: var(--radius-pill); box-shadow: none; }
.ts-wrapper .ts-control input { font-size: 12px; }
.ts-dropdown { border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; box-shadow: var(--shadow); margin-top: 4px; }
.ts-dropdown .option { padding: 7px 14px; }
.ts-dropdown .active { background: var(--border-soft); color: var(--ink); }
/* Starters picker: the inverse of .picked above on purpose. There, dimming
means "already spoken for, stop looking at it" while you browse a big
pool. Here the whole squad is always on screen at once and the useful
signal is "who's currently starting" — so BENCH (not yet started) is what
gets dimmed, and an active starter stays full-strength black/bold. See
starters_picker_controller.js. */
.runner-card.bench { opacity: .45; }
/* Dashboard roster: a squad runner who's in the current round's starting
lineup gets their card filled with the lime accent instead of the default
near-black, so "who's actually starting" reads at a glance without opening
Set Starters (see dashboard/index.html.twig and DashboardController's
starterRunnerIds). Text flips to dark ink — the same rule the kit uses
anywhere lime is a background — and a small "Starter" tag sits in the
bottom-right corner. */
.runner-card.starter { position: relative; background: var(--accent); color: var(--accent-ink); padding-bottom: 20px; }
.runner-card.starter .runner-name,
.runner-card.starter .runner-meta { color: var(--accent-ink); }
.starter-tag { position: absolute; right: 12px; bottom: 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-dark); }
/* Transfers screen: picking a runner to transfer out highlights their card
(rather than dimming it — it's still an active squad member, just the one
currently being swapped) and dims every pool card that isn't a legal
replacement (wrong gender or already owned — see transfers_picker_controller.js).
Picking the replacement highlights that pool card the same way, before the
confirm step. */
/* Both the runner being transferred out (a roster card) and the chosen
replacement (a pool card) sit on the near-black .runner-card fill, where
the old --accent-dark outline was almost invisible — so this is the bright
lime, plus an inset bar down the left edge and a faint lime wash over the
card so the selection reads at a glance. */
.runner-card.selected {
outline: 2px solid var(--accent);
outline-offset: -2px;
box-shadow: inset 4px 0 0 0 var(--accent), inset 0 0 0 999px rgba(222, 255, 0, .12);
}
.runner-pool .runner-card.hidden-for-transfer { display: none; }
.avail-note { font-size: 10.5px; color: var(--danger); margin-top: 2px; }
.legend { display: flex; gap: 14px; padding: 10px 2px 0; font-size: 11px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
/* squad-in-progress panel — a plain light surface, matching the kit's own
split between bold dark data blocks and light structural chrome */
.builder-panel { background: var(--surface); border-radius: var(--radius); position: sticky; top: 80px; padding: 16px 18px 18px; }
.builder-panel h3 { margin: 0 0 4px; font-size: 15px; }
.builder-empty { font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; margin-bottom: 8px; }
.builder-panel .runner-card { padding: 9px 12px; }
.builder-panel .runner-card button { margin-left: auto; }
/* ---------- forms ---------- */
.form-card { background: var(--surface); border-radius: var(--radius); padding: 24px; max-width: 420px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password] {
display: block; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 10px 12px; font-size: 13px; font-family: inherit;
}
.form-row input[type=text]:focus, .form-row input[type=email]:focus, .form-row input[type=password]:focus {
outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row .form-error { color: var(--danger); font-size: 11.5px; margin-top: 4px; font-weight: 600; }
/* Form-level error banner (bad login credentials, etc.) — the same alert-box
treatment as .flash-danger, sitting inside the form above the first field
rather than in the page's flash area. */
.form-alert {
background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border);
border-radius: var(--radius-sm); padding: 11px 14px; font-size: 12.5px; font-weight: 600;
margin-bottom: 18px; display: flex; flex-direction: column; gap: 4px;
}
.form-row .form-help { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; }
.form-actions { display: flex; gap: 10px; margin-top: 22px; }
/* ---------- public landing / auth pages ---------- */
.pub-topbar { border-bottom: 1px solid #000; position: sticky; top: 0; background: var(--card); z-index: 5; }
.pub-topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.pub-nav { display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: var(--muted-2); }
.pub-actions { display: flex; gap: 10px; }
.hero { max-width: 1200px; margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 38px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 16px; }
.hero p { font-size: 15.5px; color: var(--muted); line-height: 1.6; margin: 0 0 26px; max-width: 480px; }
.hero-cta { display: flex; gap: 12px; }
.hero-photo { border-radius: var(--radius); overflow: hidden; }
.hero-photo img { display: block; width: 100%; height: 280px; object-fit: cover; }
.features-section { max-width: 1200px; margin: 0 auto; padding: 20px 24px 50px; }
.section-heading { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.section-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { background: var(--surface); border-radius: var(--radius); padding: 20px; }
.feature-card .ic { display: flex; color: var(--ink-soft); margin-bottom: 10px; }
.feature-card h3 { font-size: 14.5px; margin: 0 0 6px; }
.feature-card p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.how-section { background: var(--bg); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); padding: 44px 24px; }
.how-inner { max-width: 1200px; margin: 0 auto; }
.how-steps { display: flex; gap: 14px; margin-top: 20px; }
.how-step { flex: 1; background: var(--surface); border-radius: var(--radius); padding: 16px; }
.how-step .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.how-step h4 { font-size: 13.5px; margin: 0 0 4px; }
.how-step p { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.login-section { max-width: 1200px; margin: 0 auto; padding: 50px 24px 70px; display: flex; justify-content: center; }
.login-card { background: var(--surface); border-radius: var(--radius); padding: 32px; width: 100%; max-width: 380px; }
.login-card h2 { font-size: 19px; margin: 0 0 4px; }
.login-card .muted { color: var(--muted); font-size: 12.5px; margin: 0 0 20px; }
.small { font-size: 12px; margin-top: 16px; text-align: center; color: var(--muted); }
.small a { color: var(--accent-dark); font-weight: 700; }
.pub-footer { max-width: 1200px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 12px; display: flex; justify-content: space-between; }
/* ---------- leaderboard + scores ---------- */
/* Leaderboard/scores rows reuse .runner-card's dark-block treatment rather
than a table — this kit never introduces a table style anywhere else
(team-builder pool, roster, transfers pool are all card rows too), so a
leaderboard row is styled the same way for visual consistency. */
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--card-border); color: var(--accent); font-size: 11px; font-weight: 800; flex-shrink: 0; }
.rank-badge.rank-1 { background: var(--accent); color: var(--accent-ink); }
.points-value { font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
/* Leaderboard pager — prev / "Page X of Y · N teams" / next. The buttons
reuse .btn styling (.btn-outline live, .btn-disabled at the ends). */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pager-status { font-size: 12px; color: var(--muted); text-align: center; }
/* Score breakdown (leaderboard team modal + scores page): one white card
per scored round — a header row carrying the round name and its total,
then the per-starter .runner-card (dark-block) rows that make that total
up. Reuses .runner-card/.gender-badge as-is; the round-total figure can't
reuse .points-value's lime (invisible on this white card — that colour
only works on the dark .runner-card fill), so it gets --accent-dark. */
.score-round { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.score-round-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.score-round-head .runner-name { white-space: normal; }
.score-round-head .points-value { color: var(--accent-ink); }
.score-round .runner-card:last-child { margin-bottom: 0; }
/* ---------- runner-results modal ---------- */
/* One