/* ========================================================================== Multisport Lab 360 — the whole stylesheet. ========================================================================== Hand-written CSS, no build step. Edit this file, reload the page, done. Colour tokens are copied verbatim from the Next app's globals.css, which in turn follows the Multisport Arena brand. Everything is a CSS variable keyed off [data-theme] on , which is what lets the theme toggle work without redrawing anything — including the SVG charts, whose series colours are --chart-1..4. Sections, in order: 1. tokens 2. base + typography 3. brand geometry (the skew and slash motifs) 4. layout: nav, tab bar, page head 5. components: buttons, forms, cards, tables, stats, flashes 6. charts 7. reel 8. print ========================================================================== */ /* ------------------------------------------------------------ 1. tokens */ :root { color-scheme: light; /* Brand — Multisport Arena DNA */ --red: #dc0525; --red-bright: #f51840; --red-deep: #a30319; --blue: #0000aa; --blue-bright: #3232d6; --blue-deep: #000077; --ink: #0b0e12; --paper: #e8ecf2; /* Light mode (cool paper) */ --bg: #eff1f5; --fg: var(--ink); --surface: #f8fafc; --surface-2: #e0e4eb; --line: rgba(11, 14, 18, 0.14); --muted: #5c6672; --logo-ink: #ff0012; --logo-lab: #1e293b; /* Chart series — validated for 3:1 against their own surface. Eight rather than four since comparisons stopped being capped at four things; past eight the cycle repeats, which the legend still disambiguates. */ --chart-1: #dc0525; --chart-2: #0000aa; --chart-3: #a76a00; --chart-4: #0f7b63; --chart-5: #7a1fa2; --chart-6: #00607f; --chart-7: #8a3b00; --chart-8: #4a6b00; --font-display: "Big Shoulders", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-tech: "Chakra Petch", ui-monospace, monospace; --radius: 4px; --shell: 1600px; } :root[data-theme="dark"] { color-scheme: dark; --bg: var(--ink); --fg: var(--paper); --surface: #12161c; --surface-2: #1a2029; --line: rgba(232, 236, 242, 0.14); --muted: #8a93a1; --red: #f51840; --red-bright: #ff4560; --blue-bright: #6e6eff; --logo-lab: #ffffff; --chart-1: #f51840; --chart-2: #6e6eff; --chart-3: #d9a33a; --chart-4: #3fbfa0; --chart-5: #c07be0; --chart-6: #4fb8e8; --chart-7: #ff9b57; --chart-8: #9fd356; } /* -- Design Style 2: Linear Precision (Award-Winning SaaS Aesthetic) -- */ html[data-style="linear"] { --font-display: "Barlow", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-tech: "Barlow", system-ui, sans-serif; --radius: 12px; --bg: #f8fafc; --fg: #0f172a; --surface: #ffffff; --surface-2: #f1f5f9; --line: #e2e8f0; --muted: #64748b; --red: #f43f5e; --red-bright: #fb7185; --blue: #3b82f6; --blue-bright: #60a5fa; --logo-lab: #1e293b; } html[data-style="linear"][data-theme="dark"] { color-scheme: dark; --bg: #090d16; --fg: #f8fafc; --surface: #111827; --surface-2: #1f2937; --line: rgba(255, 255, 255, 0.08); --muted: #94a3b8; --red: #f43f5e; --red-bright: #fb7185; --blue-bright: #60a5fa; --logo-lab: #ffffff; } /* -- Design Style 3: Minimal Studio -- */ html[data-style="minimal"] { --font-display: "Barlow", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-tech: "Barlow", system-ui, sans-serif; --radius: 6px; --bg: #fafafa; --fg: #0f172a; --surface: #ffffff; --surface-2: #f4f4f5; --line: #e4e4e7; --muted: #71717a; --red: #e11d48; --logo-lab: #0f172a; } html[data-style="minimal"][data-theme="dark"] { color-scheme: dark; --bg: #0f172a; --fg: #f8fafc; --surface: #1e293b; --surface-2: #334155; --line: #334155; --muted: #94a3b8; --red: #f43f5e; --logo-lab: #ffffff; } /* --------------------------------------------------- 2. base + typography */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; height: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 300ms ease, color 300ms ease; } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; margin: 0; } .label-tech { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; margin: 0; } .text-muted { color: var(--muted); } .text-red { color: var(--red); } .text-sm { font-size: 0.875rem; } .inline { display: inline; } .link { color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; } .link:hover { color: var(--red-bright); } /* ------------------------------------------------- 3. brand geometry */ .skewed { transform: skew(-3deg); } .unskew { transform: skew(3deg); } .red-slash, .blue-slash { position: relative; padding-left: 0.9rem; } .red-slash::before, .blue-slash::before { content: ""; position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: 0.3rem; transform: skew(-12deg); } .red-slash::before { background: var(--red); } .blue-slash::before { background: var(--blue-bright); } /* --------------------------------------------------------- 4. layout */ .page-main { flex: 1; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 1.5rem 1rem 7rem; } @media (min-width: 640px) { .page-main { padding-left: 1.5rem; padding-right: 1.5rem; }} @media (min-width: 768px) { .page-main { padding-bottom: 3rem; }} /* -- top nav & left sidebar -- */ .site-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-nav-inner { max-width: var(--shell); margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1rem; } .site-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; flex-shrink: 0; } .site-brand-logo { height: 2rem; width: auto; display: block; color: var(--red); } .auth-logo { height: 2.75rem; width: auto; display: block; margin-bottom: 0.5rem; color: var(--red); } .report-logo { height: 2.25rem; width: auto; display: block; color: var(--red); } .site-links { display: none; gap: 0.25rem; margin-left: 0.5rem; } .site-link { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding: 0.5rem 0.75rem; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border-bottom: 2px solid transparent; } .site-link-icon { width: 1.15rem; height: 1.15rem; } .site-link:hover { color: var(--fg); } .site-link-active { color: var(--fg); border-bottom-color: var(--red); } .site-nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .menu-icon, .action-icon, .site-link-icon, .tab-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .site-user { display: none; color: var(--muted); } min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 300ms ease, color 300ms ease; } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; margin: 0; } .label-tech { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; margin: 0; } .text-muted { color: var(--muted); } .text-red { color: var(--red); } .text-sm { font-size: 0.875rem; } .inline { display: inline; } .link { color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; } .link:hover { color: var(--red-bright); } /* ------------------------------------------------- 3. brand geometry */ .skewed { transform: skew(-3deg); } .unskew { transform: skew(3deg); } .red-slash, .blue-slash { position: relative; padding-left: 0.9rem; } .red-slash::before, .blue-slash::before { content: ""; position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: 0.3rem; transform: skew(-12deg); } .red-slash::before { background: var(--red); } .blue-slash::before { background: var(--blue-bright); } /* --------------------------------------------------------- 4. layout */ .page-main { flex: 1; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 1.5rem 1rem 7rem; } @media (min-width: 640px) { .page-main { padding-left: 1.5rem; padding-right: 1.5rem; }} @media (min-width: 768px) { .page-main { padding-bottom: 3rem; }} /* -- top nav & left sidebar -- */ .site-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-nav-inner { max-width: var(--shell); margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1rem; } .site-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; flex-shrink: 0; } .site-brand-logo { height: 2rem; width: auto; display: block; color: var(--red); } .auth-logo { height: 2.75rem; width: auto; display: block; margin-bottom: 0.5rem; color: var(--red); } .report-logo { height: 2.25rem; width: auto; display: block; color: var(--red); } .site-links { display: none; gap: 0.25rem; margin-left: 0.5rem; } .site-link { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding: 0.5rem 0.75rem; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; border-bottom: 2px solid transparent; } .site-link-icon { width: 1.15rem; height: 1.15rem; } .site-link:hover { color: var(--fg); } .site-link-active { color: var(--fg); border-bottom-color: var(--red); } .site-nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .menu-icon, .action-icon, .site-link-icon, .tab-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .site-user { display: none; color: var(--muted); } @media (min-width: 640px) { .site-user { display: inline; } } /* -- theme toggle -- */ .theme-icon { width: 1.25rem; height: 1.25rem; display: none; flex-shrink: 0; } :root[data-theme="light"] .theme-icon-moon { display: block; } :root[data-theme="dark"] .theme-icon-palette { display: block; } :root[data-theme="classic"] .theme-icon-sun { display: block; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); cursor: pointer; } .site-user-card { display: none; } /* -- desktop left sidebar layout (min-width: 768px) -- */ @media (min-width: 768px) { .app-layout { display: flex; min-height: 100vh; } .app-sidebar { width: 260px; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; } .site-nav { position: static; background: transparent; border-bottom: none; backdrop-filter: none; display: flex; flex-direction: column; flex: 1; } .site-nav-inner { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1.5rem 1.25rem 0.75rem; max-width: none; width: 100%; flex: 1; } .site-brand { padding-bottom: 0.5rem; } .site-brand-logo { height: 2.25rem; } .site-links { display: flex; flex-direction: column; gap: 0.35rem; margin-left: 0; width: 100%; } .site-link { padding: 0.65rem 0.85rem; border-radius: var(--radius); border-bottom: none; font-size: 0.825rem; font-weight: 600; transition: all 150ms ease; } .site-link:hover { color: var(--fg); background: var(--surface-2); } .site-link-active { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); font-weight: 700; } .nav-group { display: flex; flex-direction: column; width: 100%; } /* Always open: the group holds a single sub-link (Primerjava), and its header is now a link to Statistika itself rather than a toggle, so there is nothing a collapse control would earn. */ .nav-sub-menu { display: flex; flex-direction: column; gap: 0.2rem; padding-left: 1.1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } .site-sub-link { font-size: 0.8rem; padding: 0.5rem 0.75rem; color: var(--muted); font-weight: 500; } .site-sub-link:hover { color: var(--fg); background: var(--surface-2); } .site-sub-link.site-link-active { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); font-weight: 700; } .site-nav-right { margin-top: auto; padding-top: 0.5rem; margin-left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; width: 100%; } .site-nav-controls { display: flex; align-items: center; justify-content: space-between; } .site-user-card { position: relative; display: flex; flex-direction: column; padding: 0; background: transparent; border: none; width: 100%; } .user-card-trigger { display: flex; align-items: center; gap: 0.65rem; width: 100%; overflow: hidden; text-align: left; color: inherit; font-family: inherit; background: transparent; border: none; cursor: pointer; padding: 0.35rem; margin: -0.35rem; border-radius: var(--radius); transition: background-color 150ms ease; } .user-card-trigger:hover, .site-user-card.is-open .user-card-trigger { background: var(--surface); } .user-card-chevron { width: 1rem; height: 1rem; margin-left: auto; flex-shrink: 0; color: var(--muted); transition: transform 180ms ease, color 150ms ease; } .site-user-card.is-open .user-card-chevron { transform: rotate(180deg); color: var(--fg); } .user-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-tech); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; flex-shrink: 0; } .user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .user-name { font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-email { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Opens upward — the card sits at the bottom of the sidebar, so a menu hanging below it would be off-screen. display rather than visibility for the closed state: an absolutely positioned box that stays in the layout while hidden is what gave the date picker a phantom horizontal scroll (see .app-calendar-popup), and this one has no reason to repeat it. */ .user-card-menu { position: absolute; bottom: calc(100% + 0.5rem); left: 0; right: 0; z-index: 60; display: none; flex-direction: column; gap: 0.15rem; padding: 0.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(6px); transition: opacity 140ms ease, transform 140ms ease, display 140ms allow-discrete; } .site-user-card.is-open .user-card-menu { display: flex; opacity: 1; transform: translateY(0); } @starting-style { .site-user-card.is-open .user-card-menu { opacity: 0; transform: translateY(6px); } } .user-menu-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.6rem; border-radius: var(--radius); font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--muted); text-decoration: none; background: transparent; border: none; cursor: pointer; text-align: left; transition: all 150ms ease; } .user-menu-item:hover { color: var(--fg); background: var(--surface); } .logout-menu-item:hover { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); } .menu-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .inline-logout { display: inline-flex; } .app-main { flex: 1; margin-left: 260px; min-width: 0; display: flex; flex-direction: column; } .page-main { max-width: var(--shell); width: 100%; margin: 0; padding: 2rem 2.5rem 4rem; } } .settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; width: 100%; } @media (min-width: 1024px) { .settings-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } } .settings-col { display: flex; flex-direction: column; gap: 1.75rem; } .settings-card { padding: 1.5rem; } .settings-theme-options { display: flex; flex-direction: column; } .settings-option-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* -- Dashboard Fluid Layout Utilities -- */ .dashboard-split { display: grid; grid-template-columns: 1fr; gap: 1.75rem; width: 100%; } @media (min-width: 1280px) { .dashboard-split { grid-template-columns: 1fr 1fr; align-items: start; } } .filter-bar-card { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem; width: 100%; } /* -- mobile tab bar -- */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { .tab-bar { display: none; }} .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.25rem; color: var(--muted); text-decoration: none; border-top: 2px solid transparent; } .tab-active { color: var(--red); border-top-color: var(--red); } .tab-icon { width: 1.25rem; height: 1.25rem; } .tab-label { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.62rem; } /* -- page heading -- */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } .page-title { font-size: 2.25rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; } .page-title-icon { width: 2.25rem; height: 2.25rem; color: var(--red); flex-shrink: 0; } .page-title-dropdown-wrapper { position: relative; display: inline-flex; align-items: center; } .page-title-trigger { display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; border: none; padding: 0.15rem 0.6rem; margin: -0.15rem -0.6rem; border-radius: var(--radius); color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .page-title-trigger:hover { background: var(--surface-2); color: var(--fg); } .page-title-chevron { width: 1.6rem; height: 1.6rem; color: var(--red); flex-shrink: 0; transition: transform 200ms ease, color 150ms ease; } .page-title-dropdown-wrapper.is-open .page-title-chevron { transform: rotate(180deg); } .page-title-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1050; min-width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); padding: 0.4rem 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease; backdrop-filter: blur(12px); } .page-title-dropdown-wrapper.is-open .page-title-menu { opacity: 1; visibility: visible; transform: translateY(0); } .page-title-menu-header { padding: 0.4rem 1rem 0.3rem; font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--line); margin-bottom: 0.25rem; } .page-title-option { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; color: var(--fg); text-decoration: none; transition: background-color 120ms ease, color 120ms ease; } .page-title-option:hover { background: color-mix(in srgb, var(--red) 12%, var(--surface-2)); color: var(--fg); } .page-title-option.is-selected { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); } .page-title-check { width: 1.1rem; height: 1.1rem; color: var(--red); flex-shrink: 0; } @media (min-width: 640px) { .page-title { font-size: 3rem; }} .page-sub { color: var(--muted); margin: 0.5rem 0 0; } .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* -- breadcrumbs -- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; margin-bottom: 1rem; } .crumb { color: var(--muted); text-decoration: none; } .crumb:hover { color: var(--red); } .crumb-current { color: var(--fg); } .crumb-sep { color: var(--line); } .back-link { display: inline-block; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--muted); text-decoration: none; margin-bottom: 1rem; } .back-link:hover { color: var(--red); } /* ----------------------------------------------------- 5. components */ /* -- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; padding: 0.6rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--fg); cursor: pointer; text-decoration: none; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-bright); } .btn-secondary { border-color: var(--line); background: var(--surface); } .btn-secondary:hover { border-color: var(--red); color: var(--red); } .btn-ghost { color: var(--muted); } .btn-ghost:hover { color: var(--fg); background: var(--surface-2); } .btn-danger { border-color: var(--line); color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); } .btn-sm { padding: 0.4rem 0.7rem; font-size: 0.68rem; } .btn-block { width: 100%; } .btn-icon { padding: 0.45rem; width: 2.2rem; height: 2.2rem; } /* -- forms -- */ .form { display: flex; flex-direction: column; gap: 1rem; } .form-row { display: grid; gap: 1rem; } @media (min-width: 640px) { .form-row-2 { grid-template-columns: 1fr 1fr; } .form-row-3 { grid-template-columns: repeat(3, 1fr); }} .field { display: flex; flex-direction: column; gap: 0.35rem; } .field-label { color: var(--muted); } .field-hint { font-size: 0.78rem; color: var(--muted); } .input, .select { font-family: var(--font-body); font-size: 1rem; padding: 0.6rem 0.75rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; } .input:focus, .select:focus { outline: none; border-color: var(--red); } .input-numeric { font-family: var(--font-tech); text-align: left; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.8; filter: invert(0); } :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } .form-error { margin: 1.25rem 0 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--fg); font-size: 0.9rem; } /* A notice, not a problem — an inactive player, say. Same shape as .form-error, amber instead of red so it does not read as something wrong. */ .status-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--chart-3); background: color-mix(in srgb, var(--chart-3) 12%, transparent); color: var(--fg); font-size: 0.9rem; } .flash { margin-bottom: 1.25rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--muted); background: var(--surface); font-size: 0.9rem; } .flash-success { border-left-color: var(--chart-4); } .flash-error { border-left-color: var(--red); } /* -- test picker (measurement entry) -- The radio is visually hidden and the whole card is the control. :has() styles the chosen card without JavaScript, so switching tests never reloads the page and never discards typed values. */ .test-picker { border: none; margin: 0; padding: 0; } .test-picker legend { color: var(--muted); margin-bottom: 0.35rem; } .test-picker-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 640px) { .test-picker-grid { grid-template-columns: repeat(3, 1fr); }} .test-option { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; background: var(--surface); cursor: pointer; transition: background-color 150ms ease; } .test-option:hover { background: var(--surface-2); } /* The visually hidden radio stays focusable and reachable by screen readers. */ .test-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .test-option:has(.test-radio:checked) { background: var(--red); color: #fff; } .test-option:has(.test-radio:checked) .test-option-station, .test-option:has(.test-radio:checked) .test-option-hint { color: rgba(255, 255, 255, 0.85); } /* Focus ring on the card, since the input itself is invisible. */ .test-option:has(.test-radio:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; } .test-option-station { color: var(--muted); } .test-option-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; } .test-option-hint { font-size: 0.78rem; color: var(--muted); } .field-narrow { max-width: 14rem; } /* -- per-player value entry -- */ .entry-list { border: 1px solid var(--line); } .entry-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: var(--surface-2); color: var(--muted); } .entry-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-top: 1px solid var(--line); } .entry-row:hover { background: var(--surface); } .entry-index { width: 1.5rem; text-align: right; color: var(--muted); flex-shrink: 0; } .entry-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry-value { width: 7rem; flex-shrink: 0; background: var(--bg); } /* -- recent sessions -- */ .session-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); } .session { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); } .session:first-child { border-top: none; } .session:hover { background: var(--surface); } .session-date { flex-shrink: 0; white-space: nowrap; font-size: 0.8rem; } .session-body { flex: 1; min-width: 0; } .session-test { display: block; font-weight: 600; font-size: 0.9rem; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-test:hover { color: var(--red); } .session-meta { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-count { flex-shrink: 0; color: var(--muted); } /* -- recent sessions, grouped by club and team -- The whole row is the link now: /vnos lists sessions so they can be reopened and corrected, and a coach aiming at a row on a phone should not have to hit the test name exactly. .session keeps the border and hover; the anchor inside carries the layout that used to be on it. */ .session-club + .session-club { margin-top: 1.75rem; } .session-club-name { margin: 0 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); } .session-club-name a { color: inherit; text-decoration: none; } .session-club-name a:hover { color: var(--red); } .session-team + .session-team { margin-top: 1rem; } .session-team-name { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; } .session-team-name a { color: inherit; text-decoration: none; } .session-team-name a:hover { color: var(--red); } .session-team-season { font-size: 0.7rem; color: var(--muted); font-weight: 400; } .session-edit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1rem; color: inherit; text-decoration: none; } .session-edit .session-test { color: inherit; } .session-edit:hover .session-test { color: var(--red); } .session-edit-icon { flex-shrink: 0; display: flex; width: 1rem; height: 1rem; color: var(--muted); opacity: 0; transition: opacity 150ms ease, color 150ms ease; } .session-edit-icon svg { width: 100%; height: 100%; } .session-edit:hover .session-edit-icon, .session-edit:focus-visible .session-edit-icon { opacity: 1; color: var(--red); } /* Touch has no hover to reveal it, so it is simply always there. */ @media (hover: none) { .session-edit-icon { opacity: 1; } } /* -- auth screens -- */ /* Centred on the viewport itself, not on .page-main — .page-main caps out at var(--shell) and sits inside body's own flex column, so centering inside it only centers within whatever width that chain happens to leave, not the screen. position: fixed + inset: 0 sidesteps all of that. */ .auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; overflow-y: auto; } .auth-card { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; } /* -- cards and grids -- */ .card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color 150ms ease, transform 150ms ease; } a.card:hover { border-color: var(--red); transform: translateY(-2px); } .card-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin: 0.5rem 0 0; } .card-meta { color: var(--muted); font-size: 0.875rem; margin: 0.5rem 0 0; } .grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Spacing utilities for card separation */ .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2.25rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.75rem; } .mt-8 { margin-top: 2.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.75rem; } .gap-8 { gap: 2.25rem; } /* The selected test card on the Statistika dashboard. */ .card-active { border-color: var(--red); } .section { margin-top: 2.5rem; } /* A section that begins a new group — settings, danger zone. */ .section-divided { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .section-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; margin: 0; } /* -- stat tiles -- */ .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); }} .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; } .stat-label { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; color: var(--muted); } .stat-value { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; line-height: 1.1; margin-top: 0.2rem; } .stat-note { font-size: 0.78rem; color: var(--muted); } .trend-up { color: var(--chart-4); } .trend-down { color: var(--red); } .trend-flat { color: var(--muted); } /* -- tables -- */ .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table th, .table td { padding: 0.6rem 0.75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); } .table th { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; color: var(--muted); font-weight: 600; } /* The Datum rojstva / Starost column header: a button, not a link — it toggles what the column shows, it does not navigate. Reset to plain text plus an underline so it still reads as clickable, matching the sort links next to it. */ .th-toggle { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-style: dotted; } .th-toggle:hover { color: var(--fg); } /* Sortable table columns — the share page's leaderboard has no server to round -trip a ?sort= to (it may have no session at all), so this reorders rows in place with the delegated handler in layout.php. .sort-asc/.sort-desc mark whichever column is currently driving the order. */ .sort-th.sort-asc::after, .sort-th.sort-desc::after { margin-left: 0.25rem; color: var(--fg); } .sort-th.sort-asc::after { content: "▲"; } .sort-th.sort-desc::after { content: "▼"; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--surface-2); } .table .numeric { font-family: var(--font-tech); text-align: right; } .table a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); } .table a:hover { color: var(--red); border-bottom-color: var(--red); } /* The rank is context for the result, not a second result — it used to match the value in size and weight (font-display, 900, 1rem) and read as two numbers of equal importance sitting side by side. Smaller, lighter and pulled further from the value is what makes the result the thing your eye lands on first. */ .rank { font-family: var(--font-tech); font-weight: 600; font-size: 0.68rem; color: var(--muted); opacity: 0.75; margin-left: 0.45rem; } .rank-1 { color: var(--red); opacity: 1; } .row-active { background: color-mix(in srgb, var(--red) 8%, transparent); } /* -- empty states -- */ .empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); } /* ---------------------------------------------------------- 6. charts */ .chart { margin: 0; background: transparent; border: none; padding: 0; } .chart-svg { display: block; width: 100%; height: auto; overflow: visible; } .chart-grid { stroke: var(--line); stroke-width: 1; } .chart-axis { font-family: var(--font-tech); font-size: 11px; fill: var(--muted); } .chart-axis-y { text-anchor: end; } .chart-axis-x { text-anchor: middle; } .chart-bar-label { text-anchor: end; fill: var(--fg); } .chart-bar-label-active { fill: var(--red); font-weight: 600; } .chart-bar-value { text-anchor: start; fill: var(--muted); } .chart-dot { stroke: var(--surface); stroke-width: 1.5; } .chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 0.75rem; padding: 0; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; color: var(--muted); } .chart-legend-item { display: flex; align-items: center; gap: 0.4rem; } .chart-legend-dot { width: 0.7rem; height: 0.7rem; transform: skew(-12deg); display: block; } .chart-empty { color: var(--muted); text-align: center; padding: 2.5rem 1rem; } .chart-spark { display: block; width: 88px; height: 24px; } .chart-spark-empty { color: var(--muted); } /* -------------------------------------------- 7a. compare / pick list */ .pick-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); } @media (min-width: 640px) { .pick-grid { grid-template-columns: repeat(2, 1fr); }} @media (min-width: 1024px) { .pick-grid { grid-template-columns: repeat(3, 1fr); }} .pick-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--surface); cursor: pointer; transition: background-color 150ms ease; } .pick-option:hover { background: var(--surface-2); } .pick-option input { accent-color: var(--red); } .pick-option:has(input:checked) { background: var(--red); color: #fff; } .pick-name { font-weight: 600; font-size: 0.9rem; } /* --------------------------------------------------- 7b. report pages */ .report-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--red); margin-bottom: 1rem; } .report-brand { text-align: right; } .report-brand p { margin: 0; } .report-average { text-align: right; } .report-average p { margin: 0; } .report-club-title { font-size: 2.2rem; font-weight: 900; color: var(--red); line-height: 1.05; margin: 0 0 0.35rem 0; } .report-team-title { font-size: 1.45rem; font-weight: 800; color: var(--fg); line-height: 1.15; margin: 0; } .summary-test-name { font-weight: 700; font-size: 0.9rem; color: var(--fg); } .summary-test-cat { font-size: 0.76rem; color: var(--muted); } .summary-station-tag { font-size: 0.72rem; color: var(--muted); } .report-test-top { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1rem; } @media (max-width: 640px) { .report-test-top { grid-template-columns: 1fr; } } .report-test-info { min-width: 0; } .report-test-chart { min-width: 0; } .report-test-chart .chart { margin: 0; } .report-cover { margin-bottom: 2rem; } .report-summary-card { margin-top: 1.5rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .report-summary-title { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 0.75rem; } .report-summary-table { width: 100%; } .report-summary-table th { white-space: normal; vertical-align: bottom; } .report-summary-table td { vertical-align: middle; } .report-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); } .report-page-footer { display: none; } /* ---------------------------------------------------- 7c. share pages */ .share-nav { border-bottom: 1px solid var(--line); } .share-nav-inner { max-width: 64rem; margin: 0 auto; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .share-body { width: 100%; max-width: 64rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; } .share-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; margin-top: auto; } /* ----------------------------------------------------------- 7d. reel Slides for /players/{id}/reel, in place of Framer Motion. Every slide runs one shared animation lasting the whole sequence, offset by its own delay. Each is visible only during its share of the timeline, so the sequence plays in order and loops — no timers and no JavaScript. --reel-total and --reel-count are set inline by the view. */ .reel-page { max-width: 26rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; } .reel-stage { position: relative; width: 100%; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; background: var(--ink); color: var(--paper); border-radius: 8px; } .reel-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 2rem; opacity: 0; animation-name: reel-slide; animation-duration: var(--reel-total, 16s); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear; } /* * The @keyframes itself is emitted by views/player-reel.php, because its * percentages depend on how many slides there are and keyframe selectors cannot * contain calc() or custom properties. It is named reel-slide and defines only * opacity. */ .reel-slide > * { animation: reel-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; margin: 0; } .reel-slide > *:nth-child(2) { animation-delay: 0.12s; } .reel-slide > *:nth-child(3) { animation-delay: 0.24s; } .reel-slide > *:nth-child(4) { animation-delay: 0.36s; } @keyframes reel-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .reel-kicker { color: var(--red-bright); margin-bottom: 1rem !important; } .reel-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 3.25rem; line-height: 0.92; color: var(--paper); } .reel-name-alt { color: var(--red-bright); } .reel-sub { color: #8a93a1; margin-top: 1.5rem !important; } .reel-test { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.75rem; line-height: 1; color: var(--paper); } .reel-value { font-family: var(--font-display); font-weight: 900; font-size: 4.5rem; line-height: 1; color: var(--red-bright); margin-top: 1rem !important; } .reel-meta { margin-top: 1.5rem; } .reel-meta p { margin: 0.25rem 0; } .reel-trend { font-weight: 700; } .reel-best, .reel-rank { color: #8a93a1; } .reel-outro-mark { width: 3rem; height: 0.5rem; background: var(--red-bright); transform: skew(-12deg); margin-bottom: 1.5rem !important; } .reel-hint { text-align: center; } /* A reel that animates is a marketing tool; a reel that flashes is a hazard. With reduced motion the slides simply stack and can be read. */ @media (prefers-reduced-motion: reduce) { .reel-stage { aspect-ratio: auto; padding: 1rem 0; } .reel-slide, .reel-slide > * { animation: none; opacity: 1; position: static; transform: none; } .reel-slide { border-bottom: 1px solid rgba(232, 236, 242, 0.14); }} /* ------------------------------------------------------ 8. utilities A deliberately tiny set — spacing and two type sizes. If you find yourself wanting a tenth utility, the component probably wants a name instead. ------------------------------------------------------------------------ */ .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-4 { margin-bottom: 1rem; } .text-xl { font-size: 1.25rem; } .text-4xl { font-size: 2.25rem; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* ---------------------------------------------------------- 9. print */ @media print { .no-print { display: none !important; } /* Sort/toggle buttons read as plain header text on paper — nothing on a printed page responds to a click, so the dotted underline that says "this does something" would just be wrong there. */ .th-toggle { text-decoration: none !important; cursor: default !important; } .sort-th.sort-asc::after, .sort-th.sort-desc::after { content: "" !important; } body { background: #fff; color: #0b0e12; } :root, :root[data-theme="dark"] { --bg: #fff; --fg: #0b0e12; --surface: #fff; --surface-2: #f1f3f6; --line: rgba(11, 14, 18, 0.2); --muted: #4d5661; --red: #dc0525; --red-bright: #dc0525; --blue-bright: #0000aa; --chart-1: #dc0525; --chart-2: #0000aa; --chart-3: #8a5a00; --chart-4: #0f7b63; --chart-5: #7a1fa2; --chart-6: #00607f; --chart-7: #8a3b00; --chart-8: #4a6b00; --logo-lab: #1e293b; } .page-main { padding: 0; max-width: none; } /* Cover titles in print */ .report-club-title { font-size: 2.1rem !important; color: #dc0525 !important; margin-bottom: 0.2rem !important; } .report-team-title { font-size: 1.4rem !important; color: #0b0e12 !important; display: block !important; } /* First page cover containing logo, club name, team/player details & summary */ .report-cover { break-after: page; page-break-after: always; margin-bottom: 0; } .report-summary-card { border: 1px solid rgba(11, 14, 18, 0.15); background: #fdfdfd; padding: 0.75rem 1rem !important; margin-top: 1rem !important; break-inside: avoid; page-break-inside: avoid; } .report-summary-table th { padding: 0.35rem 0.5rem !important; font-size: 0.78rem !important; line-height: 1.25 !important; white-space: normal !important; vertical-align: bottom !important; } .report-summary-table td { padding: 0.35rem 0.5rem !important; font-size: 0.78rem !important; line-height: 1.3 !important; vertical-align: middle !important; } /* Side-by-side header info (left 210px) and graph layout (right 1fr) per test */ .report-test-top { display: grid !important; grid-template-columns: 210px 1fr !important; gap: 1rem !important; align-items: start !important; width: 100% !important; margin-bottom: 0.5rem !important; break-inside: avoid !important; page-break-inside: avoid !important; } .report-test-info { width: 210px !important; min-width: 0 !important; } .report-test-info .section-title { font-size: 1.5rem !important; line-height: 1.05 !important; margin-top: 0.15rem !important; margin-bottom: 0 !important; } .report-test-info .report-average { text-align: left !important; margin-top: 0.75rem !important; } .report-test-info .stat-label { font-size: 0.65rem !important; letter-spacing: 0.08em !important; } .report-test-info .stat-value { font-size: 1.85rem !important; line-height: 1 !important; margin-top: 0.15rem !important; } .report-test-chart { width: 100% !important; min-width: 0 !important; overflow: hidden !important; } .report-test-chart .chart { width: 100% !important; max-height: 175px !important; margin: 0 !important; } .report-test-chart svg { width: 100% !important; max-height: 155px !important; } /* Every test starts on a new page */ .report-section, .report > .section { break-before: page; page-break-before: always; margin-top: 0 !important; padding-top: 0 !important; } .section { margin-top: 0 !important; } .battery-heading { break-after: avoid !important; page-break-after: avoid !important; margin-top: 0 !important; } /* Table styling right below graph to fit on 1 page */ .table-scroll { margin-top: 1.5rem !important; border: 1px solid var(--line); border-radius: var(--radius); break-inside: avoid !important; page-break-inside: avoid !important; } .table { font-size: 0.78rem !important; } .table th, .table td { padding: 0.28rem 0.55rem !important; line-height: 1.25 !important; } .report-page-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; font-family: var(--font-tech); font-size: 0.72rem !important; color: var(--muted) !important; margin-top: 1.25rem !important; padding-top: 0.4rem !important; border-top: 1px solid var(--line) !important; break-inside: avoid !important; page-break-inside: avoid !important; } .report-foot { display: none !important; } .card, .stat { break-inside: avoid; } @page { margin: 18mm 14mm 14mm 14mm; } } /* -- join a club -- */ .join-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); } .join-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); } .join-row:first-child { border-top: none; } .join-row:hover { background: var(--surface); } .join-body { flex: 1; min-width: 0; } .join-name { display: block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; } .join-meta { display: block; color: var(--muted); margin-top: 0.15rem; } /* ------------------------------------------------------------ 11. dialog Native . With JavaScript it opens as a modal with a backdrop; the server can also render it with the `open` attribute, which shows it inline as a panel so the form still works with scripting off. Both paths are styled here. */ .dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); padding: 0; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow: auto; } /* The inline (no-JavaScript) form sits in the page flow under the button. */ .dialog[open] { margin-top: 1rem; } /* As a modal it is centred by the browser, so the inline margin must go. */ .dialog:modal { margin: auto; } .dialog::backdrop { background: rgba(11, 14, 18, 0.7); backdrop-filter: blur(2px); } .dialog-body { padding: 1.5rem; } .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .dialog-close { font-size: 1.6rem; line-height: 1; color: var(--muted); text-decoration: none; padding: 0 0.25rem; } .dialog-close:hover { color: var(--red); } .dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } @media (prefers-reduced-motion: no-preference) { .dialog:modal { animation: dialog-in 160ms cubic-bezier(0.22, 1, 0.36, 1); }} @keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .dialog-subtitle { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.75rem; } .dialog-missing-list { list-style: none; padding: 0; margin: 0 0 1rem 0; display: flex; flex-direction: column; gap: 0.35rem; max-height: 12rem; overflow-y: auto; } .dialog-missing-list li { font-family: var(--font-tech); font-size: 0.9rem; color: var(--fg); padding: 0.4rem 0.75rem; background: var(--surface-2); border-radius: var(--radius); border-left: 3px solid var(--red); display: flex; align-items: center; gap: 0.5rem; } .dialog-unsaved-warning { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; background: rgba(245, 24, 64, 0.1); border: 1px solid var(--red); border-radius: var(--radius); color: var(--red); font-size: 0.875rem; margin-bottom: 1rem; } .dialog-question { font-weight: 600; font-size: 1rem; margin-top: 0.5rem; margin-bottom: 1.25rem; color: var(--fg); } /* ---------------------------------------------------- 12. coach invitations */ .invite-copy { display: flex; gap: 0.5rem; align-items: stretch; } .invite-copy .input { font-family: var(--font-tech); font-size: 0.8rem; } .invite-copy .btn { flex-shrink: 0; } .invite-inline { font-family: var(--font-tech); font-size: 0.75rem; margin-top: 0.3rem; padding: 0.3rem 0.5rem; background: var(--bg); } .invite-new { border-left: 3px solid var(--red); padding-left: 0.9rem; } /* ------------------------------------------------ 13. theme selector cards */ .theme-selector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; } .theme-card-option { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.85rem; border: 2px solid var(--line); background: var(--surface-2); border-radius: var(--radius); cursor: pointer; transition: all 150ms ease; color: var(--fg); text-align: center; } .theme-card-option:hover { border-color: var(--muted); transform: translateY(-2px); } .theme-card-option.theme-card-active { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--surface-2)); box-shadow: 0 0 0 1px var(--red); } .theme-preview-box { width: 100%; height: 64px; border-radius: 6px; border: 1px solid rgba(128, 128, 128, 0.2); display: flex; overflow: hidden; } .preview-sidebar { width: 32%; height: 100%; } .preview-content { flex: 1; padding: 6px; display: flex; flex-direction: column; gap: 5px; } .preview-line { height: 5px; width: 60%; border-radius: 3px; } .preview-box { flex: 1; border-radius: 3px; } /* Light Theme Preview */ .theme-preview-light { background: #eff1f5; } .theme-preview-light .preview-sidebar { background: #f8fafc; border-right: 1px solid #e0e4eb; } .theme-preview-light .preview-line { background: #dc0525; } .theme-preview-light .preview-box { background: #e0e4eb; } /* Dark Theme Preview */ .theme-preview-dark { background: #0b0e12; } .theme-preview-dark .preview-sidebar { background: #12161c; border-right: 1px solid #1a2029; } .theme-preview-dark .preview-line { background: #f51840; } .theme-preview-dark .preview-box { background: #1a2029; } /* Classic Theme Preview */ .theme-preview-classic { background: #f3f4f6; } .theme-preview-classic .preview-sidebar { background: #ffffff; border-right: 1px solid #e5e7eb; } .theme-preview-classic .preview-line { background: #e11d48; } .theme-preview-classic .preview-box { background: #ffffff; border: 1px solid #e5e7eb; } .theme-card-label { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-tech); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .theme-card-icon { width: 1rem; height: 1rem; flex-shrink: 0; } /* -------------------------------------------------------- 13. club logos Uploaded logos are served from data/ by a PHP route; a club without one gets the inline SVG badge in club_logo_html(), so the fallback costs no request and follows the theme. */ .club-logo { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); } /* An with these classes must fill the box without distorting. */ img.club-logo { object-fit: contain; padding: 0.2rem; } .club-logo-generic { color: var(--muted); } .club-logo-generic svg { width: 60%; height: 60%; } .club-logo-sm { width: 2.25rem; height: 2.25rem; } .club-logo-lg { width: 5rem; height: 5rem; } .club-card .club-logo { margin-bottom: 0.75rem; } /* Upload row: current logo beside the file field. */ .logo-edit { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; } .logo-edit-fields { flex: 1; min-width: 0; } .logo-edit .input[type="file"] { padding: 0.45rem 0.5rem; font-size: 0.85rem; } /* -------------------------------------------------- 14. mobile top bar fix On mobile the top bar (.app-sidebar, containing .site-nav) had no positioning of its own — position:fixed for it exists only inside the desktop @media (min-width:768px) sidebar block above. Below that width it was a normal block, so it scrolled away with the page after its own height instead of staying put — the reported bug. This file has accumulated a lot of duplicated and scattered rules (body, .page-main and .site-nav are each defined more than once at different points above). Rather than risk editing a copy that a later duplicate then silently overrides, the fix is appended here, at the very end of the file, where nothing can come after it and shadow it. */ @media (max-width: 767.98px) { .app-sidebar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; /* Keeps the bar (and the notch-safe padding below) clear of a device notch/status-bar cutout — the bottom tab bar already does the same for the home indicator via safe-area-inset-bottom. */ padding-top: env(safe-area-inset-top); } /* .app-sidebar is now removed from normal flow, so page content must be pushed down by the bar's own height or it renders underneath it. Only the top value is set here — the base rule's right/bottom/left padding (including the 7rem reserved for the fixed bottom tab bar) is untouched. */ .page-main { padding-top: 4rem; } } /* ------------------------------------------------------------ 15. admin Appended at the end, matching the pattern established in section 14: this file has accumulated duplicated rules from recent redesign work, so new rules go last to guarantee they are not silently shadowed by an earlier copy of a selector with the same name. */ .admin-badge { display: inline-block; font-family: var(--font-tech); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border-radius: var(--radius); background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); vertical-align: middle; margin-left: 0.35rem; } /* The "invite as admin" checkbox — a labelled checkbox row matching the look of the rest of the form, rather than a bare unstyled input. */ .field-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; } .field-check input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--red); flex-shrink: 0; } .field-check-text { display: block; font-size: 0.9rem; } .field-check-text .field-hint { display: block; margin-top: 0.15rem; } .admin-invite-notice { padding: 0.7rem 0.9rem; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); font-size: 0.85rem; } /* -------------------------------------------------- 16. compact club card layout */ .club-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; position: relative; } .club-card-inner { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; width: 100%; } .club-card .club-logo { margin-bottom: 0 !important; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--radius); } .club-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .club-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .club-role { font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; color: var(--muted); } .club-status-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 9999px; background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); white-space: nowrap; } .club-status-dot { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--red); display: inline-block; box-shadow: 0 0 6px var(--red); } .club-card-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; margin: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .club-card-meta { font-size: 0.78rem; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .club-card-arrow { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--muted); opacity: 0.4; flex-shrink: 0; transition: transform 180ms ease, opacity 180ms ease, color 180ms ease; } .club-card-arrow .arrow-icon { width: 1rem; height: 1rem; } .club-card:hover .club-card-arrow { opacity: 1; color: var(--red); transform: translateX(3px); } .club-card.card-active { border-color: var(--red); background: color-mix(in srgb, var(--red) 5%, var(--surface)); } @media (max-width: 639.98px) { .club-card-inner { padding: 0.75rem 0.85rem; gap: 0.75rem; } .club-card .club-logo { width: 2.5rem; height: 2.5rem; } .club-card-title { font-size: 1.15rem; } } .clubs-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .clubs-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } /* ---------------------------------------------------- 16. compact mobile tables Leaderboard tables have 8 columns (#, Igralec, Povprečje, Najboljša, Zadnja, Meritev, Napredek, Trend) — too many to read on a phone without horizontal scrolling. Below the same breakpoint the sidebar collapses at, everything marked .col-optional drops out, leaving #, Igralec and Napredek: the rank, who, and whether they're improving — the three things worth glancing at on a phone. The full table is one tap away in .table-scroll on wider screens. Appended at the end for the same reason as section 14: this file has duplicated rules scattered through it, so a rule placed here is guaranteed not to be shadowed by an earlier copy of the same selector. */ @media (max-width: 767.98px) { .table .col-optional { display: none; } /* * The three surviving columns (#, Igralec, Napredek) still would not fit: * every other cell is nowrap by design (numbers must not wrap), and a name * like "Zagmeister Julian" simply claimed as much single-line width as it * wanted, pushing Napredek off the edge of the screen. * * white-space: normal plus max-width on the cell does NOT fix this. Under * the default table-layout: auto, column widths are negotiated from every * cell's preferred (unconstrained) content width across the whole column — * max-width on a is only a hint that browsers routinely disregard once * .table-scroll's overflow-x: auto gives the table an escape valve. Verified * this directly: colouring the cell showed it rendering far wider than the * max-width said, because the constraint was simply not being honoured. * * table-layout: fixed uses a different, stricter algorithm — explicit * column widths are taken at face value instead of negotiated from content. * # and Napredek get fixed widths; Igralec is the only auto column, so it * receives whatever is left of the table's own (100%, container-bound) * width — a real constraint the browser must respect, which is what finally * makes long names wrap instead of overflowing. * * display: none cells generate no box at all, so they take no part in this * calculation — the algorithm only ever sees the three cells that are * actually rendered, in every row alike. */ .table { table-layout: fixed; } .table th:first-child, .table td:first-child { width: 2rem; } .table .col-name { width: auto; white-space: normal; overflow-wrap: break-word; } .table .col-progress { width: 4.5rem; } /* A little back, since three columns no longer need to fight for space. */ .table th, .table td { padding: 0.55rem 0.5rem; } } /* ---------------------------------------------------- 17. card icons and team cards */ .inline-icon { width: 0.75rem; height: 0.75rem; display: inline-block; vertical-align: -0.1em; margin-right: 0.25rem; flex-shrink: 0; } .meta-icon { width: 0.85rem; height: 0.85rem; display: inline-block; vertical-align: -0.12em; margin-right: 0.2rem; opacity: 0.7; flex-shrink: 0; } .meta-item { display: inline-flex; align-items: center; } .meta-sep { margin: 0 0.35rem; opacity: 0.5; } /* -- Team Cards -- */ .team-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; position: relative; } .team-card-inner { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; width: 100%; } .team-card-badge { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--radius); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--red); } .team-card-badge .team-icon { width: 1.35rem; height: 1.35rem; } .team-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .team-card-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; margin: 0; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-card-meta { font-size: 0.78rem; color: var(--muted); margin: 0; } .team-card-arrow { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--muted); opacity: 0.4; flex-shrink: 0; transition: transform 180ms ease, opacity 180ms ease, color 180ms ease; } .team-card-arrow .arrow-icon { width: 1rem; height: 1rem; } .team-card:hover .team-card-arrow { opacity: 1; color: var(--red); transform: translateX(3px); } @media (max-width: 639.98px) { .team-card-inner { padding: 0.75rem 0.85rem; gap: 0.75rem; } .team-card-badge { width: 2.5rem; height: 2.5rem; } .team-card-title { font-size: 1.15rem; } } /* ---------------------------------------------------- 18. mobile tab bar padding */ .tab-bar { padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)) !important; } @media (max-width: 767.98px) { .page-main { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); } } /* ------------------------------------------------- 17. mobile title bar On mobile the fixed top bar drops the logo for the current page's own title — a club/team/player name where the page has one, its plain name (Statistika, Vnos, ...) otherwise. The bottom tab bar already carries brand identity on mobile (and, as an installed PWA, the home-screen icon answers "which app is this" before the page even opens), so a persistent logo on every screen was mostly dead weight — see views/partials/nav.php. Appended at the end for the same reason as sections 14 and 16: this file has duplicated rules scattered through it, so a rule placed here is guaranteed not to be shadowed by an earlier copy of the same selector. */ .mobile-title { display: none; } @media (max-width: 767.98px) { .site-brand { display: none; } .mobile-title { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } /* Fixed-size — only .mobile-title-text below is allowed to shrink/truncate, so a long team name never squeezes the logo into something illegible. */ .mobile-title-logo { width: 1.75rem; height: 1.75rem; flex-shrink: 0; } .mobile-title-text { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.1rem; line-height: 1.2; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ---------------------------------------------------- 19. clean site-user-card */ .site-user-card { padding: 0 !important; background: transparent !important; } /* ---------------------------------------------------- 20. left align numeric inputs */ .input-numeric { text-align: left !important; } /* ---------------------------------------------------- 18. drop mobile kickers The small red "Korak 1 / 3 — ..." labels above each page's big heading (.page-head, in both layout.php's generic version and player.php's own custom header — same markup, same class) are dropped on mobile: the fixed top bar already gives the same orientation (title, and a club logo where relevant) more plainly, so the label under it was just repeating that in a smaller, redder font. Scoped to .page-head specifically — .red-slash is also used standalone on a few bare (no top bar) auth/report screens, and this must not touch those. Appended at the end for the same reason as the sections above it: this file has duplicated rules scattered through it, so a rule placed here is guaranteed not to be shadowed by an earlier copy of the same selector. */ @media (max-width: 767.98px) { .page-head .red-slash { display: none; } } /* ---------------------------------------------------- 21. test option selected styles */ .test-option-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .test-option-badge { display: flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--muted); opacity: 0.4; margin-left: auto; transition: all 150ms ease; flex-shrink: 0; } .test-option-badge .check-icon { width: 0.75rem; height: 0.75rem; display: none; } .test-option-selected, .test-option:has(.test-radio:checked) { background: var(--red) !important; color: #ffffff !important; border-color: var(--red) !important; } .test-option-selected .test-option-name, .test-option:has(.test-radio:checked) .test-option-name { color: #ffffff !important; } .test-option-selected .test-option-station, .test-option-selected .test-option-hint, .test-option:has(.test-radio:checked) .test-option-station, .test-option:has(.test-radio:checked) .test-option-hint { color: rgba(255, 255, 255, 0.9) !important; } .test-option-selected .test-option-badge, .test-option:has(.test-radio:checked) .test-option-badge { background: #ffffff !important; border-color: #ffffff !important; color: var(--red) !important; opacity: 1 !important; } .test-option-selected .test-option-badge .check-icon, .test-option:has(.test-radio:checked) .test-option-badge .check-icon { display: block !important; } /* -- tests that already have measurements saved for the chosen date -- The round badge above says "this is the test you are entering now"; this chip says "this one is done", with how many values are stored. Two separate questions, so two separate marks — a test is very often both at once, right after it has been saved. --chart-4 is the same green .flash-success uses. */ .test-option-saved-chip { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; padding: 0.1rem 0.4rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 700; line-height: 1.4; color: var(--chart-4); background: color-mix(in srgb, var(--chart-4) 16%, transparent); border: 1px solid color-mix(in srgb, var(--chart-4) 35%, transparent); flex-shrink: 0; } .test-option-saved-chip svg { width: 0.6rem; height: 0.6rem; } /* The chip pushes the selection badge along, so the badge stops claiming the free space and sits next to the chip instead. */ .test-option-saved .test-option-badge { margin-left: 0.4rem; } .test-option-saved { border-color: color-mix(in srgb, var(--chart-4) 45%, var(--line)); } /* On the selected card the accent fill is behind everything, so the chip goes white-on-translucent rather than green-on-green. */ .test-option-selected .test-option-saved-chip, .test-option:has(.test-radio:checked) .test-option-saved-chip { color: #ffffff !important; background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.45) !important; } /* -- save / finish row -- */ .track-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .track-progress { margin: 0; margin-left: auto; font-size: 0.75rem; color: var(--muted); } @media (max-width: 575.98px) { .track-actions .btn { flex: 1 1 10rem; } .track-progress { margin-left: 0; width: 100%; } } /* ---------------------------------------------------- 22. entry list alignment & spacing */ .entry-head { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.65rem 1rem !important; justify-content: flex-start !important; } .entry-head-name { flex: 1 !important; min-width: 0 !important; padding-left: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .entry-head-value { width: 7rem !important; flex-shrink: 0 !important; text-align: center !important; white-space: nowrap !important; } .entry-row { display: flex !important; align-items: center !important; gap: 0.4rem !important; } .entry-index { width: 1rem !important; text-align: left !important; color: var(--muted) !important; flex-shrink: 0 !important; font-size: 0.8rem !important; opacity: 0.75 !important; } .entry-name { flex: 1 !important; min-width: 0 !important; font-weight: 600 !important; font-size: 0.925rem !important; } .entry-value { width: 7rem !important; flex-shrink: 0 !important; text-align: center !important; font-family: var(--font-tech) !important; font-weight: 600 !important; } /* ---------------------------------------------------- 23. calendar picker icon color */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.9 !important; filter: invert(27%) sepia(91%) saturate(5432%) hue-rotate(342deg) brightness(98%) contrast(98%) !important; transition: opacity 150ms ease; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1 !important; } /* ---------------------------------------------------- 24. mobile header title & page title */ @media (max-width: 767.98px) { .mobile-title-text { font-size: 1.6rem !important; letter-spacing: 0.02em !important; line-height: 1.1 !important; } .page-head .page-title, .page-title:not(.player-name) { display: none !important; } .page-head { margin-bottom: 0.75rem !important; } } /* ---------------------------------------------------- 25. title icons */ .title-icon { width: 1.35rem; height: 1.35rem; display: inline-block; vertical-align: -0.15em; margin-right: 0.4rem; color: var(--red); flex-shrink: 0; } .mobile-title-icon { width: 1.6rem; height: 1.6rem; color: var(--red); flex-shrink: 0; } .page-title { display: flex !important; align-items: center !important; gap: 0.65rem !important; } .page-title-icon { width: 2.5rem; height: 2.5rem; color: var(--red); flex-shrink: 0; } @media (min-width: 640px) { .page-title-icon { width: 2.75rem; height: 2.75rem; } } /* ---------------------------------------------------- 26. mobile test dropdown menu */ @media (min-width: 1050px) { .mobile-only-tests { display: none !important; } } @media (max-width: 1049.98px) { .desktop-only-tests { display: none !important; } } .mobile-test-dropdown { position: relative; width: 100%; } .mobile-active-test-card { width: 100%; text-align: left; cursor: pointer; border: 1.5px solid var(--red) !important; background: var(--card-bg); color: var(--fg); font-family: inherit; font-size: inherit; transition: all 150ms ease; } .mobile-active-test-card.dropdown-open { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .mobile-test-card-top { display: flex; align-items: center; justify-content: space-between; } .change-test-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); padding: 0.2rem 0.55rem; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); } .dropdown-arrow-icon { width: 0.85rem; height: 0.85rem; transition: transform 200ms ease; } .mobile-active-test-card.dropdown-open .dropdown-arrow-icon { transform: rotate(180deg); } .mobile-test-card-bottom { display: flex; align-items: baseline; gap: 0.5rem !important; flex-wrap: wrap; } .test-dropdown-menu { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 999 !important; background: #161b22 !important; border: 1.5px solid var(--red) !important; border-radius: var(--radius) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85) !important; overflow: hidden; animation: dropdownSlide 150ms ease-out; } @keyframes dropdownSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .test-dropdown-menu-header { padding: 0.6rem 1rem 0.4rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: #1c222b !important; color: var(--muted); } .test-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; text-decoration: none; color: var(--fg); background: #161b22 !important; border-bottom: 1px solid var(--border); transition: background-color 120ms ease; } .test-dropdown-item:last-child { border-bottom: none; } .test-dropdown-item:hover, .test-dropdown-item.active { background: #2a151b !important; } .test-dropdown-item-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--fg); line-height: 1.2; } .test-dropdown-item-stat { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .check-badge { color: var(--red); font-weight: bold; font-size: 1rem; } /* ---------------------------------------------------- 27. mobile chart font sizing */ .chart-column-value { text-anchor: middle; fill: var(--fg); font-weight: 700; font-size: 11px; } .chart-column-label { text-anchor: end; fill: var(--muted); font-size: 11px; } @media (max-width: 767.98px) { .chart-axis { font-size: 15px !important; font-weight: 700 !important; } .chart-bar-label, .chart-column-label { font-size: 13px !important; font-weight: 700 !important; } .chart-bar-value, .chart-column-value { font-size: 14px !important; font-weight: 700 !important; } } /* ---------------------------------------------------- 28. graph in card */ .chart { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 1.25rem !important; } /* ---------------------------------------------------- 30. chart header toggle buttons matching exact mockup */ .chart-view-toggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-left: auto; } .btn-chart-tab { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 14px !important; font-family: var(--font-tech) !important; font-size: 0.78rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #ffffff !important; background: #0d1117 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 6px !important; cursor: pointer !important; transition: all 150ms ease !important; } .btn-chart-tab .btn-icon { /* .btn-icon is shared with the round icon-button, which pads itself by 0.45rem a side. Everything here is border-box, so leaving that padding in place against a 0.9rem box leaves a content area of exactly zero and the icon disappears — visible only as a slightly wider button. */ padding: 0 !important; width: 0.95rem !important; height: 0.95rem !important; flex-shrink: 0; stroke: var(--red) !important; stroke-width: 2.5 !important; } .btn-chart-tab.active, .btn-chart-tab.btn-primary { background: var(--red) !important; border-color: var(--red) !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(220, 5, 37, 0.4) !important; } .btn-chart-tab.active .btn-icon, .btn-chart-tab.btn-primary .btn-icon { stroke: #ffffff !important; } .btn-chart-tab:hover:not(.active) { border-color: rgba(255, 255, 255, 0.25) !important; background: #161b22 !important; } /* Stat card styling matching exact mockup */ .stat-card-label { font-family: var(--font-tech) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--muted) !important; margin-bottom: 0.4rem !important; } .stat-card-value { font-family: var(--font-display) !important; font-size: 1.85rem !important; font-weight: 900 !important; line-height: 1.1 !important; color: var(--fg) !important; } .stat-card-value.text-red { color: var(--red) !important; } /* The player profile card holds names and dates, not short numbers — the ordinary stat-card display size (1.85rem) was sized for "2.713 s", not "NK Bistrica". */ .profile-card .stat-card-value { font-size: 1.15rem !important; text-transform: none !important; } .stat-card-note { font-family: var(--font-tech) !important; font-size: 0.72rem !important; color: var(--muted) !important; margin-top: 0.6rem !important; } /* ---------------------------------------------------- 27. test batteries The app went from three tests to eight, in two batteries — Soccerbot 360 and the motor tests. Everything that lists tests now lists them in groups, and these are the parts that make a group read as a group: the small heading above one, and a couple of denser layouts for the places where eight of anything no longer fits the way three did. Nothing here is conditional on there being exactly two batteries. Add a third in test_catalogue() and it styles itself. */ /* Spacing belongs to the picker itself, not to the pages that use it — it used to be an mb-6 written out at each call site, which is exactly the kind of thing that goes missing when the markup moves into a partial. Adjacent margins collapse, so this never doubles up with the card above. */ .test-selector-wrap { margin-top: 1.75rem; margin-bottom: 1.75rem; } .test-group + .test-group { margin-top: 1.25rem; } /* The picker used a fixed three-column grid, which was right for three tests and wrong for eight — a battery of five became two rows, and the picker pushed the chart it belongs to off the screen. Filling by width instead lets a wide screen put a whole battery on one line, and narrows to two columns and then one without needing a breakpoint per size. */ .test-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; } /* Shorter than a full card: the number is what you scan for, and the tile is a way in, not the thing itself. A column so the station can be pushed to the foot with margin-top:auto — "Vodenje s spremembo smeri" takes two lines where "Šprint 5 m" takes one, and without this the station would sit at a different height in every tile. */ .test-tile { display: flex; flex-direction: column; padding: 0.85rem 1rem; } .test-tile .card-title { font-size: 1.05rem; line-height: 1.15; } .test-tile .stat-value { font-size: 1.5rem; margin-top: 0.5rem; } .test-tile-station { margin-top: auto; padding-top: 0.75rem; } .test-group-label { color: var(--muted); margin-bottom: 0.4rem; } /* A heading between stacked sections, on the pages that show every test one after another instead of picking one: the printable report, the public share page and the player comparison. */ .battery-heading { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.15rem; color: var(--fg); margin: 2.5rem 0 0.25rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--red); } .battery-heading:first-of-type { margin-top: 1.5rem; } /* Squad averages on the team page. Full cards at three tests, too much page at eight — these carry the short name and the number only. */ .test-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; } .test-summary-tile { padding: 0.7rem 0.85rem; } .test-summary-tile .stat-value { font-size: 1.35rem; margin-top: 0.15rem; } /* The squad table's first header row names the battery that the block of columns beneath it belongs to. */ .table-group-head { text-align: center; font-family: var(--font-tech); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); } .table-group-head + .table-group-head { border-left: 1px solid var(--line); } /* Group headings inside the mobile "change test" dropdown. Sticky so the battery a test belongs to stays visible while the list scrolls. */ .test-dropdown-group { position: sticky; top: 0; z-index: 1; padding: 0.5rem 0.9rem 0.35rem; background: var(--card-bg); color: var(--muted); border-bottom: 1px solid var(--line); } /* The progress tile follows the direction of travel, so an improvement is never red. Needed at this weight because .stat-card-value sets its colour with !important. */ .stat-card-value.trend-up { color: var(--chart-4) !important; } .stat-card-value.trend-down { color: var(--red) !important; } .stat-card-value.trend-flat { color: var(--muted) !important; } /* ---------------------------------------------------- 28. button glyphs .btn is already inline-flex with a gap, so a button takes an icon with no extra layout. This only sizes it. Deliberately not .btn-icon: that class belongs to the round icon-only button and carries its own 0.45rem padding, which under border-box eats a small icon's content box entirely and renders nothing. */ .btn-glyph { width: 0.95rem; height: 0.95rem; flex-shrink: 0; } /* Tile buttons — the icon carries the meaning, so it gets the space. */ .btn-glyph-lg { width: 1.9rem; height: 1.9rem; } .btn-tile-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* .btn is a horizontal inline-flex; a tile is the same button stacked, sized towards square. min-height rather than aspect-ratio: a two-line label must be able to make the tile taller instead of overflowing it. */ .btn-tile { flex-direction: column; justify-content: center; gap: 0.55rem; width: 7.5rem; min-height: 7rem; padding: 0.9rem 0.6rem; text-align: center; line-height: 1.25; letter-spacing: 0.05em; white-space: normal; } @media (max-width: 479.98px) { /* Three tiles no longer fit across a phone; two per row, filling the width. */ .btn-tile { width: auto; flex: 1 1 8rem; } } /* ---------------------------------------------------- 29. selects The club and team selects are the primary control on Statistika — everything below reacts to them — but they were styled like an ordinary form field and read as background. Heavier border, more height, and a caret drawn in the accent colour so they look like something you operate. */ .select { font-family: var(--font-tech); font-weight: 600; letter-spacing: 0.02em; font-size: 0.95rem; padding: 0.75rem 0.9rem; border: 1.5px solid var(--line); background-color: var(--surface-2); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; } /* The native arrow is kept rather than replaced with an accent-coloured one. Replacing it means appearance:none plus a background-image, and an inline data: URI cannot read a CSS variable — the stroke has to be a literal colour. There are four style x theme combinations here and --red is a different value in each, so a hardcoded caret would be wrong in three of them. The native one follows color-scheme and stays legible in all four. */ .select:hover { border-color: var(--red); } .select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(245, 24, 64, 0.18); height: 1.15rem; flex-shrink: 0; color: var(--muted); transition: transform 150ms ease, color 150ms ease; } /* Child combinator, not descendant. A panel can contain other folds — the comparison picker holds one per club — and a descendant selector here turned every chevron inside an open panel upside down, so closed clubs pointed up as if they were open. Each fold rotates only its own. */ .disclosure[open] > .disclosure-head .disclosure-chevron { transform: rotate(180deg); color: var(--red); } /* The body keeps the padding the card used to have, minus the top, which the summary above it already provides. */ .disclosure > *:not(.disclosure-head) { padding-left: 1.5rem; padding-right: 1.5rem; } .disclosure > *:last-child:not(.disclosure-head) { padding-bottom: 1.5rem; } @media (max-width: 639.98px) { .disclosure-head { padding: 1rem 1.1rem; } .disclosure > *:not(.disclosure-head) { padding-left: 1.1rem; padding-right: 1.1rem; } .disclosure > *:last-child:not(.disclosure-head) { padding-bottom: 1.1rem; } } /* ---------------------------------------------------- 33. comparison picker The list of things you can compare is everything the account can reach, which across several clubs is long. Each club is a fold, so the list stays a page you can scan rather than one you scroll past. The spacing here hangs off two wrapper elements in the markup rather than :not() selectors picking their way around the summary — .compare-picker for the list and .compare-club-body for what is inside one club. Cheaper to read and it cannot be thrown off by adding an element later. */ .compare-picker { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } /* -- one club ------------------------------------------------------------- */ .compare-club { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; } .compare-club-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; transition: background-color 120ms ease; } .compare-club-head::-webkit-details-marker { display: none; } .compare-club-head:hover { background: var(--surface); } .compare-club-head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; } .compare-club-name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; line-height: 1.1; } /* Its own chevron only — see the note on .disclosure[open] above. */ .compare-club[open] > .compare-club-head { border-bottom: 1px solid var(--line); } .compare-club[open] > .compare-club-head .disclosure-chevron { transform: rotate(180deg); color: var(--red); } /* -- what is inside one club ---------------------------------------------- */ .compare-club-body { display: flex; flex-direction: column; gap: 1rem; padding: 0.85rem 1rem; /* Back to the plain surface: the fold's own tint is the closed state, and keeping it behind the options would fight the hairline grid they sit in. */ background: var(--surface); } .compare-team-label { color: var(--muted); margin-bottom: 0.4rem; } /* -- the action bar -------------------------------------------------------- */ .compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } /* ---------------------------------------------------- 34. period fields The period sits under the club and team selects rather than beside them: those two choose whose numbers, this one narrows them, and it should not compete with them for the eye. Ordinary field size, not .select-lg. */ .filter-window { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; flex-basis: 100%; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); } .filter-window .field { flex: 0 1 11rem; min-width: 0; } .filter-window .input { cursor: pointer; } .filter-window-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; padding-bottom: 0.65rem; } /* ---------------------------------------------------- 35. custom app select & calendar picker */ /* Hide native browser picker arrows & overlays where possible while keeping elements accessible */ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; transition: opacity 150ms ease; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Custom Select Container */ .app-select-wrapper { position: relative; display: block; width: 100%; } .app-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 0.6rem 0.75rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; user-select: none; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .select-lg + .app-select-trigger, .app-select-wrapper.select-lg .app-select-trigger { padding: 0.72rem 0.9rem; font-size: 1.05rem; } .app-select-trigger:hover { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); background: var(--surface-2); } .app-select-wrapper.is-open .app-select-trigger { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); background: var(--surface-2); } .app-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select:hover { border-color: var(--red); } .select:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(245, 24, 64, 0.18); } .select option { background: var(--card-bg); color: var(--fg); } /* ---------------------------------------------------- 30. Statistika filter card */ .filter-card { padding: 0; overflow: visible !important; } .filter-tier { padding: 1.1rem 1.25rem; } .filter-tier + .filter-tier { border-top: 1px solid var(--line); } .filter-tier-primary { background: var(--surface); } .filter-tier-label { color: var(--muted); margin-bottom: 0.6rem; } .filter-selects { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; } .filter-select-field { flex: 1 1 15rem; min-width: 0; } .select-lg { font-size: 1.1rem; padding: 0.9rem 1rem; border-width: 2px; } /* -- battery switch -- */ .battery-switch { display: flex; flex-wrap: wrap; gap: 0.6rem; } .battery-btn { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 11rem; padding: 0.7rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--fg); text-decoration: none; transition: border-color 120ms ease, background-color 120ms ease; } .battery-btn:hover { border-color: var(--red); } /* -- page top (back button & breadcrumbs) -- */ .page-top { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; } .back-link, .back-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--muted); text-decoration: none; transition: color 150ms ease; } .back-link:hover, .back-btn:hover { color: var(--red); } .back-btn-icon { width: 1.1rem; height: 1.1rem; } .crumb-back-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); text-decoration: none; margin-right: 0.2rem; transition: color 150ms ease, transform 150ms ease; } .crumb-back-btn:hover { color: var(--red); transform: translateX(-2px); } .crumb-back-btn .back-btn-icon { width: 1.1rem; height: 1.1rem; } .crumb { color: var(--muted); text-decoration: none; } .crumb:hover { color: var(--red); } .crumb-current { color: var(--fg); } .crumb-sep { color: var(--line); } .battery-btn-name { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem; line-height: 1.1; } .battery-btn-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .battery-btn-count { color: var(--muted); } .battery-btn-active { border-color: var(--red); background: var(--red); color: #fff; } .battery-btn-active .battery-btn-count { color: rgba(255, 255, 255, 0.75); } /* -- live filter -- */ #stat-view { transition: opacity 120ms ease; } #stat-view.is-loading { opacity: 0.5; pointer-events: none; } /* -- disclosures -- */ .disclosure { padding: 0; } .disclosure-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; transition: background-color 120ms ease; } .disclosure-head::-webkit-details-marker { display: none; } .disclosure-head:hover { background: var(--surface-2); } .disclosure-head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; } .disclosure-chevron { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--muted); transition: transform 150ms ease, color 150ms ease; } .app-select-arrow { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--muted); transition: transform 180ms ease, color 180ms ease; } .app-select-wrapper.is-open .app-select-arrow { transform: rotate(180deg); color: var(--red); } /* Custom Select Dropdown Overlay */ .app-select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); max-height: 260px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease; backdrop-filter: blur(8px); padding: 0.35rem 0; } .app-select-wrapper.is-open .app-select-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .app-select-option { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.85rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--fg); cursor: pointer; user-select: none; transition: background-color 120ms ease, color 120ms ease; } .app-select-option:hover, .app-select-option.is-highlighted { background: color-mix(in srgb, var(--red) 12%, var(--surface-2)); color: var(--fg); } .app-select-option.is-selected { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); font-weight: 700; } .app-select-option-check { width: 0.9rem; height: 0.9rem; color: var(--red); margin-left: 0.5rem; flex-shrink: 0; } /* Custom Calendar Picker Popup */ .app-calendar-wrapper { position: relative; display: block; width: 100%; } .app-select-wrapper.is-open, .app-calendar-wrapper.is-open { z-index: 1005 !important; } .filter-card, .settings-card, .compare-club { overflow: visible !important; } .filter-card > .filter-tier:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } .filter-card > .filter-tier:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } /* The closed popup used to stay in the layout (visibility: hidden only). It is an absolutely positioned 290px box anchored to the left edge of its date field, and .filter-card above is overflow: visible !important — so once the "od"/"do" fields stop stacking (~372px) and the second one starts halfway across the screen, its closed popup stuck out past the right edge and stretched the document's scrollable width. That produced a strip of empty page to the right of every card, on every viewport from ~372px up to ~592px (where 290px finally fits again), without the calendar ever being opened. display: none takes it out of the layout entirely, so it can no longer widen the page. The fade is kept with allow-discrete + @starting-style; browsers without those simply show and hide it instantly. */ .app-calendar-popup { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1010; width: 290px; max-width: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6); padding: 0.85rem; display: none; opacity: 0; transform: translateY(-8px); transition: opacity 150ms ease, transform 150ms ease, display 150ms allow-discrete; backdrop-filter: blur(12px); user-select: none; } .app-calendar-wrapper.is-open .app-calendar-popup { display: block; opacity: 1; transform: translateY(0); } @starting-style { .app-calendar-wrapper.is-open .app-calendar-popup { opacity: 0; transform: translateY(-8px); } } .app-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); } .app-calendar-title { font-family: var(--font-tech); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); } .app-calendar-nav { display: flex; align-items: center; gap: 0.25rem; } .app-calendar-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: var(--radius); background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: all 120ms ease; } .app-calendar-nav-btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--line); } .app-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; margin-bottom: 0.35rem; } .app-calendar-weekday { font-family: var(--font-tech); font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 0.25rem 0; } .app-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .app-calendar-day { display: inline-flex; align-items: center; justify-content: center; height: 2.1rem; font-family: var(--font-tech); font-size: 0.85rem; font-weight: 600; border-radius: var(--radius); background: transparent; color: var(--fg); border: 1px solid transparent; cursor: pointer; transition: all 120ms ease; } .app-calendar-day:hover:not(.is-disabled) { background: var(--surface-2); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); } .app-calendar-day.is-other-month { opacity: 0.25; } .app-calendar-day.is-today { border-color: var(--red); } .app-calendar-day.is-selected { background: var(--red) !important; color: #ffffff !important; font-weight: 700; box-shadow: 0 0 12px color-mix(in srgb, var(--red) 50%, transparent); } .app-calendar-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); } .app-calendar-action { font-family: var(--font-tech); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--radius); transition: all 120ms ease; } .app-calendar-action:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); } /* ---------------------------------------------------- 36. Primary Color Accents */ .color-selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } @media (min-width: 640px) { .color-selector-grid { grid-template-columns: repeat(6, 1fr); } } .color-dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); display: inline-block; } /* Red Accent (Default) */ html[data-color="red"], html[data-color="red"][data-theme="dark"], html[data-theme="dark"][data-color="red"] { --red: #f51840; --red-bright: #ff335c; --red-deep: #cc0029; --chart-1: #f51840; } /* Blue Accent */ html[data-color="blue"], html[data-color="blue"][data-theme="dark"], html[data-theme="dark"][data-color="blue"] { --red: #3b82f6; --red-bright: #60a5fa; --red-deep: #2563eb; --chart-1: #3b82f6; } /* Emerald Accent */ html[data-color="emerald"], html[data-color="emerald"][data-theme="dark"], html[data-theme="dark"][data-color="emerald"] { --red: #10b981; --red-bright: #34d399; --red-deep: #059669; --chart-1: #10b981; } /* Purple Accent */ html[data-color="purple"], html[data-color="purple"][data-theme="dark"], html[data-theme="dark"][data-color="purple"] { --red: #8b5cf6; --red-bright: #a78bfa; --red-deep: #7c3aed; --chart-1: #8b5cf6; } /* Orange Accent */ html[data-color="orange"], html[data-color="orange"][data-theme="dark"], html[data-theme="dark"][data-color="orange"] { --red: #f97316; --red-bright: #fb923c; --red-deep: #ea580c; --chart-1: #f97316; } /* Cyan Accent */ html[data-color="cyan"], html[data-color="cyan"][data-theme="dark"], html[data-theme="dark"][data-color="cyan"] { --red: #06b6d4; --red-bright: #22d3ee; --red-deep: #0891b2; --chart-1: #06b6d4; } /* ---------------------------------------------------- 37. Comparison & Picker Card Styling */ .battery-switch { display: flex; flex-wrap: wrap; gap: 0.75rem; } .battery-btn { display: flex; flex-direction: column; justify-content: center; flex: 1 1 11rem; padding: 0.75rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--fg); text-decoration: none; transition: all 150ms ease; } .battery-btn:hover { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); background: color-mix(in srgb, var(--red) 8%, var(--surface-2)); } .battery-btn-name { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; line-height: 1.1; } .battery-btn-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .battery-btn-count { font-family: var(--font-tech); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; margin-top: 0.35rem; } .battery-btn-active { border-color: var(--red) !important; background: var(--red) !important; color: #ffffff !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--red) 35%, transparent); } .battery-btn-active .battery-btn-name, .battery-btn-active .battery-btn-icon { color: #ffffff !important; } .battery-btn-active .battery-btn-count { color: rgba(255, 255, 255, 0.85) !important; } /* Disclosure / Card Headers */ .disclosure-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; } .disclosure-head::-webkit-details-marker { display: none; } .disclosure-chevron { width: 1.25rem; height: 1.25rem; color: var(--red); flex-shrink: 0; transition: transform 180ms ease; } details[open] > summary .disclosure-chevron { transform: rotate(180deg); } .compare-card { padding: 0; overflow: hidden; } .compare-card-head { padding: 1.25rem 1.5rem; } /* Compare Picker Accordion list */ .compare-picker { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.75rem 1.5rem 1.5rem; border-top: none !important; } .compare-club { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); overflow: hidden; } .compare-club[open] { border-color: var(--line); } .compare-club-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; cursor: pointer; list-style: none; user-select: none; background: var(--surface-2); border-bottom: none !important; transition: background-color 120ms ease; } .compare-club:not([open]) .compare-club-head { border-bottom: none !important; } .compare-club-head::-webkit-details-marker { display: none; } .compare-club-head:hover { background: color-mix(in srgb, var(--red) 10%, var(--surface-2)); } .compare-club-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg); } .compare-club-body { padding: 0.75rem 1.4rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; background: var(--surface-2) !important; border-top: none !important; } .compare-team { background: transparent !important; border: none !important; box-shadow: none !important; } .compare-team + .compare-team { border-top: none !important; padding-top: 0.85rem !important; } .compare-team-label { font-family: var(--font-tech); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.85rem; border: none !important; } .pick-grid { display: grid; grid-template-columns: 1fr; gap: 0.65rem 1.5rem; background: transparent !important; border: none !important; } @media (min-width: 768px) { .pick-grid { grid-template-columns: repeat(3, 1fr); } } .pick-option { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; user-select: none; padding: 0.35rem 0.4rem; margin: 0; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transition: color 120ms ease; } .pick-option:hover .pick-name { color: var(--red); } .pick-option input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--surface-2); cursor: pointer; position: relative; flex-shrink: 0; transition: all 120ms ease; } .pick-option input[type="checkbox"]:hover { border-color: var(--red); } .pick-option input[type="checkbox"]:checked { background: var(--red); border-color: var(--red); } .pick-option input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 1px; left: 4px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .pick-name { font-family: var(--font-body); font-size: 0.9rem; color: var(--fg); background: transparent !important; border: none !important; } .pick-name strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-right: 0.25rem; } .compare-actions { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.5rem 1.25rem; border-top: none !important; } /* ---------------------------------------------------- 38. Settings & Mobile Responsiveness */ .settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; max-width: 100%; box-sizing: border-box; } @media (min-width: 992px) { .settings-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } .settings-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; width: 100%; box-sizing: border-box; } .settings-card { box-sizing: border-box; max-width: 100%; overflow: hidden; } .settings-card .card-title, .settings-card h2, .settings-card h3 { word-break: break-word; overflow-wrap: break-word; } .theme-selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: 100%; box-sizing: border-box; } @media (max-width: 639.98px) { .theme-selector-grid { grid-template-columns: 1fr; gap: 0.6rem; } } .mode-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; width: 100%; box-sizing: border-box; } .color-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; width: 100%; box-sizing: border-box; } @media (min-width: 440px) { .color-selector-grid { grid-template-columns: repeat(3, 1fr); } } .theme-card-option { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem 0.6rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--fg); cursor: pointer; user-select: none; transition: all 120ms ease; width: 100%; min-width: 0; box-sizing: border-box; } .theme-card-option:hover { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); background: color-mix(in srgb, var(--red) 8%, var(--surface-2)); } .theme-card-option.theme-card-active, .theme-card-option[aria-checked="true"] { border-color: var(--red) !important; background: color-mix(in srgb, var(--red) 14%, var(--surface-2)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 25%, transparent); } .theme-card-label { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-tech); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); } .theme-card-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--red); } .theme-preview-box { width: 100%; height: 3.25rem; border-radius: 6px; border: 1px solid var(--line); margin-bottom: 0.5rem; overflow: hidden; position: relative; display: flex; background: var(--surface); } .preview-sidebar { width: 25%; height: 100%; background: color-mix(in srgb, var(--fg) 10%, transparent); border-right: 1px solid var(--line); } .preview-content { flex: 1; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.3rem; } .preview-line { height: 0.4rem; width: 60%; border-radius: 2px; } .preview-box { flex: 1; border-radius: 4px; background: color-mix(in srgb, var(--fg) 6%, transparent); } .pwa-platform-box { box-sizing: border-box; max-width: 100%; overflow: hidden; word-break: break-word; } @media (max-width: 575.98px) { .form-row-2 { flex-direction: column; gap: 0.85rem; } } /* ---------------------------------------------------- 39. Fluid Mobile & Tablet Layout Fixes (440px - 768px) */ .btn-icon-sm, .filter-pdf-btn svg { width: 1.1rem !important; height: 1.1rem !important; max-width: 1.1rem !important; max-height: 1.1rem !important; flex-shrink: 0 !important; } .filter-pdf-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.45rem !important; padding: 0.45rem 0.8rem !important; width: auto !important; max-width: max-content !important; flex: 0 0 auto !important; margin-top: 0.35rem; } @media (max-width: 767.98px) { .page-main { padding-left: 1rem; padding-right: 1rem; padding-top: 4.25rem; padding-bottom: 5.5rem; width: 100%; max-width: 100vw; box-sizing: border-box; } #stat-view, .card, .filter-card, .settings-card, .stat-card { width: 100%; max-width: 100%; box-sizing: border-box; } .filter-selects { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; } .filter-select-field { width: 100%; flex: 1 1 100%; min-width: 0; } .filter-window { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; box-sizing: border-box; } .filter-window .field { flex: 1 1 9rem; min-width: 0; width: 100%; } .filter-window-note { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .battery-switch { width: 100%; display: flex; flex-wrap: wrap; gap: 0.6rem; } .battery-btn { flex: 1 1 8.5rem; width: 100%; min-width: 0; } .btn-tile-row { width: 100%; display: flex; flex-wrap: wrap; gap: 0.6rem; } .btn-tile { flex: 1 1 7.5rem; width: auto; min-width: 0; } }