/* Fonts are loaded via + in index.html , NOT a CSS @import here. @import is the slowest path: the browser only discovers it after downloading and parsing this file, so the fonts start late (which the render() chip-scroll code had to work around). The links warm the connection and fetch the fonts in parallel. */ :root { --navy: #0B1733; --navy-2: #11237A; --blue: #1B47E5; --blue-bg: #E6ECFF; --blue-bg-2: #EEF1FF; --blue-border: #D3DEFF; --orange: #FF7A1A; --orange-text: #E85D00; --orange-bg: #FFF1E6; --orange-border: #FAD7BB; --green: #15A24A; --green-2: #5FD08A; --green-bg: #E4F6EB; --red: #E11D48; --red-2: #F58BA3; --red-bg: #FEECEC; --red-bg-2: #FCE7EC; --amber: #FF9A4D; --cream: #F4F2EC; --card: #fff; --card-border: #ECE9E0; --line: #F1EEE6; --line-2: #E7E4DA; --line-3: #E2DFD6; --chip-bg: #F0EDE4; --text: #0B1733; --text-muted: #8A8170; --text-muted-2: #A8A294; --text-muted-3: #5C584A; --text-blue-gray: #6B7390; --text-nav: #54607C; --text-body: #3A4256; /* Semantic surface/chrome tokens (added for theming — see dark block below). */ --app-bg: #0B1733; /* body base (the dark surround) */ --app-bg-2: #16204a; /* body radial-gradient inner */ --surface-2: #FAF9F5; /* inset/secondary surface (inputs, hover, sub-cards) */ --input-bg: #FAF9F5; --input-border: #E2E0D8; --handle: #D6D2C6; /* sheet drag handle */ --header-bg: rgba(244,242,236,.88); /* sticky header (translucent) */ --group-header-bg: rgba(244,242,236,.94); --nav-bg: rgba(255,255,255,.94); /* bottom nav (translucent) */ --tooltip-bg: #0B1733; /* form tooltip */ --champ-bg-1: #FFF8E8; /* podium — gold (season winner) */ --champ-bg-2: #FFF1D6; --champ-border: #F2E4BE; --champ-label: #B4801F; --silver-tint: rgba(120,131,150,.10); /* podium — silver */ --silver-border: rgba(120,131,150,.28); --silver-label: #6B7280; --bronze-tint: rgba(196,120,58,.12); /* podium — bronze */ --bronze-border: rgba(196,120,58,.30); --bronze-label: #A9631F; } /* Dark theme — overrides the semantic tokens above. Applied via (set by index.html anti-flash script + js/theme.js). Brand accents (blue/green/red/orange) are brightened so text on the darkened tint backgrounds stays legible; the tints become translucent so they read as subtle washes over the dark card instead of light pastels. */ :root[data-theme="dark"] { --navy: #141D33; --blue: #6E8BFF; --blue-bg: rgba(110,139,255,.16); --blue-bg-2: rgba(110,139,255,.12); --blue-border: rgba(110,139,255,.36); --orange: #FF9445; --orange-text: #FFAF74; --orange-bg: rgba(255,122,26,.15); --orange-border: rgba(255,122,26,.36); --green: #34C36A; --green-2: #5FD08A; --green-bg: rgba(52,195,106,.15); --red: #FF5C7A; --red-2: #F58BA3; --red-bg: rgba(255,92,122,.15); --red-bg-2: rgba(255,92,122,.15); --amber: #FFB259; --cream: #0F1626; --card: #161E30; --card-border: #29334C; --line: #222B41; --line-2: #28324B; --line-3: #313C58; --chip-bg: #232C43; --text: #EAEEF7; --text-muted: #8B93A9; --text-muted-2: #6F7890; --text-muted-3: #AEB6CA; --text-blue-gray: #8790AA; --text-nav: #99A3BD; --text-body: #C3CADB; --app-bg: #070C1A; --app-bg-2: #0E1730; --surface-2: #1B2338; --input-bg: #1B2338; --input-border: #33405C; --handle: #3A4560; --header-bg: rgba(15,22,38,.86); --group-header-bg: rgba(15,22,38,.92); --nav-bg: rgba(18,25,42,.92); --tooltip-bg: #28324C; --champ-bg-1: rgba(245,166,35,.14); --champ-bg-2: rgba(245,166,35,.05); --champ-border: rgba(245,166,35,.30); --champ-label: #FFB259; --silver-tint: rgba(148,163,184,.12); --silver-border: rgba(148,163,184,.30); --silver-label: #B7C0D4; --bronze-tint: rgba(210,140,80,.14); --bronze-border: rgba(210,140,80,.32); --bronze-label: #E6A860; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { font-family: 'Hanken Grotesk', system-ui, sans-serif; background: var(--app-bg); background-image: radial-gradient(60% 40% at 50% 0%, var(--app-bg-2) 0%, var(--app-bg) 60%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--text); } button, input, select, textarea { font-family: inherit; } ::-webkit-scrollbar { width: 0; height: 0; } /* Scroll-lock for the page behind a full-screen overlay. Without it the document scrolls under the fixed backdrop (wheel on desktop, drag on mobile). overflow on stops the scroll; pinning the body with position:fixed (top set to -scrollY in JS, see App.setScrollLock) also *preserves* the scroll position — overflow:hidden alone loses it on iOS, which snapped the page to the top when a re-render happened while the modal was open. The modal's own tall content still scrolls because .modal-box has its own overflow-y:auto. */ html.modal-open { overflow: hidden; } body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; } a { color: inherit; } .archivo { font-family: 'Archivo', sans-serif; } .tabnum { font-variant-numeric: tabular-nums; } /* ---------- App shell ---------- */ #shell { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--cream); position: relative; box-shadow: 0 0 60px rgba(0,0,0,.35); } @media (min-width: 900px) { #shell { max-width: 1080px; } } #header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); padding: 10px 16px; display: flex; align-items: center; gap: 10px; } /* Offline notice — a slim bar under the header, shown only while the device is offline (js toggles body.is-offline on the online/offline events). Warns the user the standings/schedule may be stale (served from the service worker's API cache). Amber, theme-aware; hidden by default so it costs nothing online. */ #offline-banner { display: none; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; background: var(--orange-bg); border-bottom: 1px solid var(--orange-border); color: var(--orange-text); font: 700 12px 'Hanken Grotesk'; text-align: center; } #offline-banner svg { flex-shrink: 0; } body.is-offline #offline-banner { display: flex; } .brand-btn { display: flex; align-items: center; gap: 9px; background: none; border: none; padding: 0; cursor: pointer; } .brand-logo { width: 32px; height: 32px; border-radius: 9px; display: block; } .brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .brand-title { font: 900 17px/1 Archivo; letter-spacing: -.01em; color: var(--text); } .brand-sub { font: 600 9px/1.3 'Hanken Grotesk'; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .web-nav { flex: 1; display: none; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; } @media (min-width: 900px) { .web-nav { display: flex; } } .nav-link { padding: 9px 13px; border-radius: 11px; font: 800 13px 'Hanken Grotesk'; border: none; cursor: pointer; white-space: nowrap; background: transparent; color: var(--text-nav); } .nav-link.active { background: var(--blue); color: #fff; } .header-spacer { flex: 1; } @media (min-width: 900px) { .header-spacer { display: none; } } .season-select-wrap { position: relative; } .season-select { font: 700 11px 'Hanken Grotesk'; color: var(--blue); background: var(--blue-bg); border: 1px solid var(--blue-border); padding: 5px 28px 5px 10px; border-radius: 999px; white-space: nowrap; appearance: none; outline: none; cursor: pointer; } .season-select-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; } .icon-btn { width: 34px; height: 34px; border: 1px solid var(--line-3); background: var(--chip-bg); border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .login-btn { display: flex; align-items: center; gap: 6px; background: var(--chip-bg); border: 1px solid var(--line-3); border-radius: 999px; padding: 5px 10px; cursor: pointer; font: 700 11px 'Hanken Grotesk'; color: var(--text-body); white-space: nowrap; flex-shrink: 0; } .account-menu-wrap { position: relative; flex-shrink: 0; } .account-menu-btn { display: flex; align-items: center; gap: 7px; background: var(--chip-bg); border: 1px solid var(--line-3); border-radius: 999px; padding: 4px 8px 4px 4px; cursor: pointer; } .account-menu-name { font: 700 11px 'Hanken Grotesk'; color: var(--text); white-space: nowrap; } .account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 51; width: 208px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(11,23,51,.16); padding: 6px; } .account-menu-team { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none; padding: 9px 11px 8px; border-bottom: 1px solid var(--line); margin-bottom: 5px; cursor: pointer; text-align: left; } .account-menu-team-name { display: block; font: 800 13px 'Hanken Grotesk'; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-menu-team-sub { display: block; font: 600 11px 'Hanken Grotesk'; color: var(--text-muted-2); } .account-menu-person { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .account-menu-person-name { font: 700 12px 'Hanken Grotesk'; color: var(--text-muted-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: 9px; padding: 10px 11px; cursor: pointer; font: 700 13px 'Hanken Grotesk'; color: var(--text); text-align: left; } .account-menu-item.danger { color: var(--red); } .field-group { margin-bottom: 14px; } .field-label { display: block; font: 700 11px 'Hanken Grotesk'; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 6px; } .field-input { width: 100%; border: 1.5px solid var(--input-border); border-radius: 11px; padding: 10px 12px; font: 600 14px 'Hanken Grotesk'; color: var(--text); background: var(--input-bg); outline: none; box-sizing: border-box; } .field-input:focus { border-color: var(--blue); } .field-pw-wrap { position: relative; } .field-pw-wrap .field-input { padding-right: 42px; } .field-pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; border-radius: 8px; cursor: pointer; color: var(--text-muted-2); } .field-pw-toggle:hover { color: var(--text); background: var(--chip-bg); } .field-error { font: 600 12px 'Hanken Grotesk'; color: var(--red); margin: -6px 0 12px; } .field-success { font: 600 12px 'Hanken Grotesk'; color: var(--green); margin: -6px 0 12px; } .login-remember { display: flex; align-items: center; gap: 9px; margin: -2px 0 14px; cursor: pointer; font: 600 13px 'Hanken Grotesk'; color: var(--text-muted-3); user-select: none; } .login-remember input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; flex-shrink: 0; } .modal-btn { width: 100%; padding: 12px; border-radius: 12px; border: none; font: 800 14px 'Hanken Grotesk'; cursor: pointer; } .modal-btn.primary { background: var(--blue); color: #fff; } .modal-btn.danger-outline { background: none; border: 1.5px solid var(--red-bg-2); color: var(--red); } .modal-btn:disabled { opacity: .7; cursor: default; } .modal-btn.is-loading { display: flex; align-items: center; justify-content: center; } .btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: btnspin .6s linear infinite; } @keyframes btnspin { to { transform: rotate(360deg); } } .sex-toggle { display: flex; gap: 8px; } .sex-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--line-3); background: var(--chip-bg); font: 700 13px 'Hanken Grotesk'; color: var(--text-muted-3); cursor: pointer; } .sex-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; } .score-pick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; } .score-pick-btn { padding: 12px; border-radius: 10px; border: 1.5px solid var(--line-3); background: var(--chip-bg); font: 800 15px Archivo; color: var(--text); cursor: pointer; } .score-pick-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; } .set-input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .set-input-label { width: 52px; flex-shrink: 0; font: 700 12px 'Hanken Grotesk'; color: var(--text-muted); } .set-input { width: 56px; text-align: center; border: 1.5px solid var(--input-border); border-radius: 9px; padding: 8px 4px; font: 800 15px Archivo; color: var(--text); background: var(--input-bg); } .set-input-sep { color: var(--text-muted-2); font: 700 14px 'Hanken Grotesk'; } .scan-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; margin-bottom: 16px; border-radius: 12px; border: 1.5px dashed var(--blue-border); background: var(--blue-bg-2); color: var(--blue); font: 800 13px 'Hanken Grotesk'; cursor: pointer; } .scan-btn:disabled { opacity: .7; cursor: default; } .scan-beta { font: 800 9px 'Hanken Grotesk'; letter-spacing: .06em; text-transform: uppercase; background: var(--blue); color: #fff; padding: 2px 6px; border-radius: 999px; } .scan-note { font: 600 12px 'Hanken Grotesk'; color: var(--green); background: var(--green-bg); border-radius: 9px; padding: 8px 10px; margin: -4px 0 14px; } .scan-spinner { width: 14px; height: 14px; border: 2px solid var(--blue-border); border-top-color: var(--blue); border-radius: 50%; animation: scan-spin .7s linear infinite; } @keyframes scan-spin { to { transform: rotate(360deg); } } .roster-menu-wrap { position: relative; flex-shrink: 0; } .roster-menu-btn { width: 30px; height: 30px; border-radius: 9px; border: none; background: var(--chip-bg); color: var(--text-muted-3); cursor: pointer; display: flex; align-items: center; justify-content: center; } .roster-menu { position: absolute; top: 36px; right: 0; z-index: 30; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 10px 28px rgba(11,23,51,.18); padding: 5px; display: flex; flex-direction: column; gap: 1px; min-width: 184px; } .roster-menu-item { display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: 8px; padding: 10px 11px; cursor: pointer; font: 700 13px 'Hanken Grotesk'; color: var(--text); text-align: left; width: 100%; } .roster-menu-item.danger { color: var(--red); } .roster-photo-upload { position: absolute; bottom: 8px; right: 8px; width: 32px; height: 32px; border-radius: 9px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; } #main { padding: 16px 16px 120px; } @media (min-width: 900px) { #main { padding: 24px 16px 56px; } } .hero-inner { position: relative; } @media (min-width: 900px) { .hero-inner { max-width: 960px; margin: 0 auto; } } /* Home widgets are stacked one per row at every width — never side by side. On desktop each widget therefore spans the whole shell, so its own content splits into columns instead (.match-list.two-col, .fav-place-list). */ .home-stack { display: block; } /* ---------- Loading ---------- */ .loading-box { padding: 90px 16px; text-align: center; } .loading-dot { width: 40px; height: 40px; border-radius: 12px; background: var(--blue); margin: 0 auto 14px; animation: mvlpulse 1.3s infinite; } .loading-text { font: 800 14px 'Hanken Grotesk'; color: var(--text-muted); } @keyframes mvlpulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } @keyframes mvlsheet { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ---------- Section headings ---------- */ .page-title { margin: 0; font: 900 26px Archivo; color: var(--text); letter-spacing: -.02em; } .page-sub { margin: 4px 0 0; font: 600 13px 'Hanken Grotesk'; color: var(--text-muted); } .filter-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .filter-tag-plain { color: var(--text-muted); } .filter-tag { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--text-muted-3); font-weight: 700; } .filter-tag-x { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border: none; border-radius: 50%; padding: 0; cursor: pointer; background: transparent; color: var(--text-muted-2); } .filter-tag-x:hover { background: var(--line); color: var(--text); } .page-head { margin-bottom: 16px; } h2.section-title { margin: 6px 2px 14px; font: 900 17px Archivo; color: var(--text); } /* ---------- Chips ---------- */ .chip-row { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; cursor: grab; } .chip-row.dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; } .chip-row.dragging .chip { cursor: grabbing; } .chip { padding: 8px 14px; border-radius: 10px; font: 700 13px 'Hanken Grotesk'; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; background: var(--chip-bg); color: var(--text-muted-3); } .chip.active { background: var(--blue); color: #fff; } .seg-btn { padding: 8px 16px; border-radius: 999px; font: 800 13px 'Hanken Grotesk'; border: none; cursor: pointer; transition: all .15s; background: transparent; color: var(--text-muted); } .seg-btn.active { background: var(--card); box-shadow: 0 2px 6px rgba(11,23,51,.12); color: var(--text); } .filter-bar { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 6px 14px; margin-bottom: 18px; box-shadow: 0 2px 7px rgba(11,23,51,.04); } .filter-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; } .filter-label { font: 800 11px 'Hanken Grotesk'; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-2); width: 42px; flex-shrink: 0; } .filter-divider { height: 1px; background: var(--line); } .filter-more-btn { flex-shrink: 0; display: flex; align-items: center; gap: 3px; background: var(--chip-bg); border: 1px solid var(--line-3); border-radius: 8px; padding: 5px 8px; cursor: pointer; color: var(--text-muted-3); } /* ---------- Empty states ---------- */ .empty-box { background: var(--card); border: 1px dashed var(--line-3); border-radius: 13px; padding: 20px 16px; text-align: center; font: 600 12.5px 'Hanken Grotesk'; color: var(--text-muted-2); } .empty-box.lg { border-radius: 16px; padding: 26px 16px; font: 600 13px 'Hanken Grotesk'; } /* ---------- Match card ---------- */ .match-list { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 900px) { .match-list.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; align-items: start; } } .match-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 15px; padding: 12px 14px; box-shadow: 0 2px 7px rgba(11,23,51,.04); } .match-card.compact { border-radius: 13px; padding: 10px 13px; } .match-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; gap: 8px; } .match-meta-text { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .status-badge { font: 800 10px 'Hanken Grotesk'; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; } .match-teams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; } .team-side { display: flex; align-items: center; gap: 6px; min-width: 0; } .team-side.home { justify-content: flex-end; } .team-name { font: 700 13px 'Hanken Grotesk'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-name.home { text-align: right; } .badge { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 900 8px Archivo; color: #fff; flex-shrink: 0; position: relative; overflow: hidden; } .badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .badge.lg { width: 44px; height: 44px; border-radius: 12px; font: 900 15px Archivo; } .badge.md { width: 40px; height: 40px; border-radius: 11px; font: 900 13px Archivo; } .badge.sm2 { width: 28px; height: 28px; border-radius: 8px; font: 900 10px Archivo; } .badge.round { border-radius: 50%; width: 38px; height: 38px; font: 900 12px Archivo; } .score-label { font: 900 15px Archivo; color: var(--text); background: var(--chip-bg); padding: 3px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; } .score-label.played { background: var(--green-bg); color: var(--green); } .sets-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .set-chip { font: 800 11px Archivo; color: var(--text); background: var(--chip-bg); border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; } .match-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); } .pill-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 11px 6px 9px; cursor: pointer; font: 800 11px 'Hanken Grotesk'; border: 1px solid transparent; text-decoration: none; background: none; } .pill-btn.ref { background: var(--chip-bg); border-color: var(--line-3); color: var(--text-muted-3); } .pill-btn.cap { background: var(--blue-bg-2); border-color: var(--blue-border); color: var(--blue); } .print-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--card); border: 1px solid var(--card-border); border-radius: 11px; box-shadow: 0 10px 28px rgba(11,23,51,.16); min-width: 248px; overflow: hidden; display: flex; flex-direction: column; } .print-menu button { text-align: left; background: none; border: none; cursor: pointer; font: 700 12px 'Hanken Grotesk'; color: var(--text); display: flex; align-items: center; gap: 9px; padding: 11px 14px; } .print-menu button:hover { background: var(--surface-2); } .print-menu button + button { border-top: 1px solid var(--line); } .contact-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .contact-row { display: flex; align-items: center; gap: 9px; text-decoration: none; border-radius: 11px; padding: 11px 13px; font: 700 13px 'Hanken Grotesk'; color: var(--text); } .contact-row .contact-role { color: var(--text-muted); } .contact-row.ref { background: var(--surface-2); border: 1px solid var(--card-border); } .contact-row.cap { background: var(--blue-bg-2); border: 1px solid var(--blue-border); } /* ---------- Group section header (sticky) ---------- */ .group-header { position: sticky; top: 54px; z-index: 20; display: flex; align-items: center; gap: 9px; background: var(--group-header-bg); backdrop-filter: blur(10px); padding: 8px 8px; margin-bottom: 12px; border-radius: 11px; } .group-header-name { font: 900 14px Archivo; color: var(--text); letter-spacing: -.01em; white-space: nowrap; } .group-header-phase { font: 700 10px 'Hanken Grotesk'; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .group-header-line { flex: 1; height: 1px; background: var(--line-3); min-width: 8px; } .group-header-count { font: 700 11px 'Hanken Grotesk'; color: var(--text-muted-2); white-space: nowrap; } .round-header { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } .round-label { font: 900 13px Archivo; color: var(--blue); background: var(--blue-bg); padding: 5px 11px; border-radius: 8px; } .round-line { height: 1px; flex: 1; background: var(--line-2); } /* ---------- Standings table ---------- */ .stand-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; overflow: clip; box-shadow: 0 2px 10px rgba(11,23,51,.05); } .stand-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .stand-head { display: grid; align-items: center; gap: 2px; padding: 11px 14px; background: var(--navy); color: #9FB2EF; font: 800 10px 'Hanken Grotesk'; letter-spacing: .03em; text-transform: uppercase; } .stand-head span { text-align: center; } .stand-head span:nth-child(2) { text-align: left; } .stand-row { display: grid; align-items: center; gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; transition: background .1s, border-left-color .1s; } .stand-row-hl { border-left-color: var(--blue); background: var(--blue-bg) !important; } .form-chip[data-form-home] { cursor: default; } .form-tip { position: fixed; transform: translate(-50%, calc(-100% - 10px)); background: var(--tooltip-bg); color: #fff; border-radius: 10px; padding: 9px 12px; z-index: 9999; box-shadow: 0 10px 28px rgba(11,23,51,.35); pointer-events: none; max-width: 240px; white-space: normal; word-break: break-word; display: none; } .form-tip.show { display: block; } .form-tip-up { font: 800 9px 'Hanken Grotesk'; letter-spacing: .06em; text-transform: uppercase; color: #FF9A4D; margin-bottom: 3px; } .form-tip-l1 { font: 800 13px Archivo; margin-bottom: 3px; } .form-tip-l2 { font: 600 11px 'Hanken Grotesk'; color: #9FB2EF; } .form-tip-arrow { position: absolute; top: 100%; transform: translateX(-50%); width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--tooltip-bg); } .stand-row span { text-align: center; } .stand-cell-team { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left !important; justify-content: flex-start; } .stand-cell-team .name { font: 700 13px 'Hanken Grotesk'; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stand-rank { font: 900 14px Archivo; text-align: center; } .stand-v { color: var(--green); font: 800 13px 'Hanken Grotesk'; } .stand-p { color: var(--red); font: 800 13px 'Hanken Grotesk'; } .stand-num { color: var(--text-muted-3); font: 600 13px 'Hanken Grotesk'; } .stand-pts { color: var(--text); font: 900 16px Archivo; } .stand-sets { color: var(--text-blue-gray); font: 600 12px 'Hanken Grotesk'; } .form-cell { display: flex; justify-content: center; gap: 4px; flex-wrap: nowrap; } .form-chip { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 900 11px Archivo; flex-shrink: 0; border: 1.5px solid transparent; } .form-chip.lg { width: 34px; height: 34px; border-radius: 9px; font: 900 12px Archivo; } /* Final-standings ("Konečné poradie") row. Mobile-first: the Sets column is hidden — the screen is too narrow to fit it next to the team name — by dropping the last grid track and hiding the sets cell (rows) and its header label (6th ). Web (>=900px) restores both. */ .stand-all-row { grid-template-columns: 34px minmax(0,1fr) 38px 28px 28px; gap: 6px; } .stand-all-row > .stand-sets, .stand-head.stand-all-row > span:nth-child(6) { display: none; } @media (min-width: 900px) { .stand-all-row { grid-template-columns: 34px minmax(0,1fr) 38px 28px 28px 56px; } .stand-all-row > .stand-sets, .stand-head.stand-all-row > span:nth-child(6) { display: block; } } .stand-row-full { grid-template-columns: 30px 150px 40px 28px 28px 34px 34px 34px 34px 34px 34px 40px 46px 160px; min-width: 800px; } @media (min-width: 900px) { .stand-row-full { grid-template-columns: 30px 200px 46px 32px 32px 38px 38px 38px 38px 38px 38px 44px 52px 160px; min-width: 900px; } } /* Team column is a fixed 150px here too (matching .stand-row-full) so it doesn't jump width when toggling compact <-> expanded; the extra minmax(0,1fr) spacer soaks up the remaining width and keeps the numeric columns right-aligned. */ .stand-row-compact { grid-template-columns: 30px minmax(0,150px) minmax(0,1fr) 36px 28px 28px 40px; } .stand-expand-toggle { display: flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--line-3); border-radius: 8px; padding: 5px 10px; font: 700 11px 'Hanken Grotesk'; color: var(--text-nav); cursor: pointer; } .stand-group-label { font: 700 12px 'Hanken Grotesk'; color: var(--text-nav); } .stand-group-label .phase { font-weight: 400; color: var(--text-muted-2); } /* ---------- Teams grid ---------- */ .teams-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; } @media (min-width: 900px) { .teams-grid { grid-template-columns: repeat(4,1fr); } } .team-card { text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; padding: 15px; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(11,23,51,.04); } .team-card-tint { position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; } .team-card-body { position: relative; } .team-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; } .fav-btn { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; background: var(--chip-bg); } .group-tag { font: 800 10px 'Hanken Grotesk'; color: var(--blue); background: var(--blue-bg); padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .team-card-name { font: 800 14px 'Hanken Grotesk'; color: var(--text); line-height: 1.2; margin-bottom: 5px; } .team-card-meta { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; } /* ---------- Team detail ---------- */ .back-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; color: var(--blue); font: 800 13px 'Hanken Grotesk'; cursor: pointer; padding: 0; margin-bottom: 14px; } .team-hero { margin: 0 -16px 18px; color: #fff; position: relative; overflow: hidden; } /* Mobile-first: the name gets its own full-width row, then the info chips and a smaller photo sit side by side below it. The photo stretches to match the chips column's height. Web restores the tall right-hand photo panel below. */ .team-hero-body { position: relative; padding: 20px 16px; } .team-hero-title-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .team-hero-title { margin: 0; font: 900 24px Archivo; letter-spacing: -.01em; flex: 1; min-width: 0; } .team-hero-lower { display: flex; gap: 14px; align-items: stretch; } .team-hero-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; } .team-hero-photo { position: relative; flex-shrink: 0; width: 118px; align-self: stretch; min-height: 104px; background: rgba(255,255,255,.16); border-radius: 14px; display: flex; align-items: center; justify-content: center; font: 900 32px Archivo; overflow: hidden; } .team-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 900px) { .team-hero-body { padding: 24px 196px 24px 18px; } .team-hero-title-row { margin-bottom: 12px; } .team-hero-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-hero-lower { display: block; } .team-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 180px; align-self: auto; min-height: 0; border-radius: 0; border-left: 1px solid rgba(255,255,255,.22); font: 900 44px Archivo; z-index: 1; } } .hero-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border-radius: 9px; padding: 7px 11px; font: 700 12px 'Hanken Grotesk'; } .hero-chip .lbl { opacity: .72; } a.hero-chip { color: inherit; text-decoration: none; cursor: pointer; transition: background .15s; } a.hero-chip:hover { background: rgba(255,255,255,.28); } .color-picker-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 2px 20px; } .color-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(11,23,51,.2); } .color-swatch.active { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--text), 0 1px 3px rgba(11,23,51,.2); } .placement-row { background: var(--card); border: 1px solid var(--card-border); border-radius: 15px; padding: 13px 15px; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 7px rgba(11,23,51,.04); cursor: pointer; } .placement-rank { font: 900 22px Archivo; color: var(--blue); width: 40px; text-align: center; flex-shrink: 0; } .placement-mid { flex: 1; min-width: 0; } .placement-group { font: 800 14px 'Hanken Grotesk'; color: var(--text); } .placement-phase { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted); } .placement-right { text-align: right; } .placement-record { font: 800 13px 'Hanken Grotesk'; color: var(--text); } .placement-sub { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted-2); } .roster-toggle { width: 100%; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 15px 16px; margin: -4px 0 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 2px 7px rgba(11,23,51,.04); text-align: left; } .roster-row { background: var(--card); border: 1px solid var(--card-border); border-radius: 13px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 7px rgba(11,23,51,.04); } .roster-name { font: 800 14px 'Hanken Grotesk'; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roster-role { font: 800 10px 'Hanken Grotesk'; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; flex-shrink: 0; } .roster-role.captain { color: var(--orange-text); background: var(--orange-bg); } .roster-role.player { color: var(--text-muted-3); background: var(--chip-bg); } .form-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--line); } .form-legend-item { display: flex; align-items: center; gap: 5px; font: 600 11px 'Hanken Grotesk'; color: var(--text-muted); } .form-legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; } /* ---------- Stats ---------- */ .stat-list { display: flex; flex-direction: column; gap: 9px; } @media (min-width: 900px) { .stat-list { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; } } .stat-row { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 11px 14px; box-shadow: 0 2px 7px rgba(11,23,51,.04); } .stat-row-top { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 11px; margin-bottom: 8px; } .stat-row-name { font: 800 14px 'Hanken Grotesk'; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-row-sub { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted-2); } .stat-row-value { font: 900 19px Archivo; color: var(--blue); } .stat-bar-track { height: 6px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; } .stat-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#1B47E5,#5B7BFF); } /* ---------- Rules ---------- */ .rules-list { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 900px) { .rules-list { max-width: 820px; margin: 0 auto; } } .rule-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 15px; overflow: hidden; box-shadow: 0 2px 7px rgba(11,23,51,.04); } .rule-q { width: 100%; text-align: left; background: none; border: none; padding: 15px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; } .rule-num { width: 30px; height: 30px; border-radius: 9px; background: var(--blue-bg); color: var(--blue); display: flex; align-items: center; justify-content: center; font: 900 13px Archivo; flex-shrink: 0; } .rule-q-text { flex: 1; font: 800 14px 'Hanken Grotesk'; color: var(--text); } .rule-a { padding: 0 16px 16px 58px; font: 400 14px/1.6 'Hanken Grotesk'; color: var(--text-body); white-space: pre-line; } /* ---------- H2H ---------- */ .h2h-summary { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(11,23,51,.04); } .h2h-grid { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; } .h2h-team-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .h2h-team-col.right { align-items: flex-end; } .h2h-team-name { font: 800 13px 'Hanken Grotesk'; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .h2h-team-select-wrap { position: relative; max-width: 100%; } .h2h-team-select { font: 800 13px 'Hanken Grotesk'; color: var(--blue); background: var(--blue-bg); border: 1px solid var(--blue-border); padding: 4px 26px 4px 11px; border-radius: 999px; max-width: 100%; appearance: none; outline: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h2h-team-select-caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; } .h2h-score { display: flex; flex-direction: column; align-items: center; gap: 4px; } .h2h-score-nums { display: flex; align-items: baseline; gap: 6px; font: 900 32px Archivo; color: var(--text); } .h2h-score-dash { font: 600 14px 'Hanken Grotesk'; color: var(--text-muted-2); } .h2h-played { font: 600 11px 'Hanken Grotesk'; color: var(--text-muted-2); } .h2h-list { background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(11,23,51,.04); } .h2h-list-row { padding: 11px 14px; border-bottom: 1px solid var(--line); } .h2h-list-row:last-child { border-bottom: none; } /* ---------- Bottom nav ---------- */ #bottomnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); display: grid; grid-template-columns: repeat(5,1fr); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); } @media (min-width: 900px) { #bottomnav { display: none; } } .nav-tab { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 0; color: #969CB0; } .nav-tab.active { color: var(--blue); } .nav-tab-icon { width: 42px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .nav-tab.active .nav-tab-icon { background: rgba(27,71,229,.10); } .nav-tab-label { font: 800 10px 'Hanken Grotesk'; } /* ---------- Sheets / modals ---------- */ .sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(11,23,51,.5); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; } .sheet { width: 100%; max-width: 480px; background: var(--cream); border-radius: 24px 24px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); animation: mvlsheet .28s cubic-bezier(.2,.9,.3,1); } .sheet-handle { width: 40px; height: 5px; border-radius: 999px; background: var(--handle); margin: 6px auto 16px; } .sheet-item { text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 15px; padding: 15px 16px; cursor: pointer; display: flex; align-items: center; gap: 13px; width: 100%; } .sheet-item-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sheet-item-label { display: block; font: 800 15px 'Hanken Grotesk'; color: var(--text); } .sheet-item-sub { display: block; font: 500 12px 'Hanken Grotesk'; color: var(--text-muted); } .modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(11,23,51,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 18px; } .modal-box { width: 100%; max-width: 360px; max-height: calc(100dvh - 36px); overflow-y: auto; background: var(--card); border-radius: 22px; padding: 24px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.4); } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font: 900 18px Archivo; color: var(--text); } .modal-close { width: 30px; height: 30px; border: 1px solid var(--line-3); background: var(--chip-bg); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font: 700 18px Archivo; color: var(--text-muted); line-height: 1; } .modal-section { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; } .modal-section:last-child { border-bottom: none; margin-bottom: 4px; } .modal-label { font: 700 11px 'Hanken Grotesk'; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 10px; } .modal-select-wrap { position: relative; } .modal-select { width: 100%; border: 1.5px solid var(--input-border); border-radius: 11px; padding: 10px 36px 10px 12px; font: 600 14px 'Hanken Grotesk'; color: var(--text); background: var(--input-bg); outline: none; box-sizing: border-box; appearance: none; } .modal-select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; } .fontsize-row { display: flex; align-items: center; gap: 10px; } .fontsize-btn { width: 40px; height: 40px; border: 1.5px solid var(--line-3); background: var(--chip-bg); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font: 800 15px Archivo; color: var(--text); } .fontsize-btn:disabled { color: #C0BDB5; opacity: .4; cursor: default; } .fontsize-mid { flex: 1; text-align: center; } .fontsize-value { font: 900 22px Archivo; color: var(--text); } .fontsize-reset { margin-top: 4px; border: none; background: none; cursor: pointer; font: 600 11px 'Hanken Grotesk'; color: var(--blue); padding: 0; } /* Capped like .settings-tabs: the card spans the full page width on desktop, and three flex:1 options stretched across it read as banners rather than buttons. Below the cap (mobile) the row still fills its card. */ .theme-row { display: flex; gap: 8px; max-width: 400px; } .theme-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px; border-radius: 12px; border: 1.5px solid var(--line-3); background: var(--chip-bg); cursor: pointer; font: 800 12px 'Hanken Grotesk'; color: var(--text-muted-3); } .theme-opt.active { background: var(--blue); border-color: var(--blue); color: #fff; } .theme-opt svg { width: 20px; height: 20px; } /* Home-content config (settings modal) — two grouped cards of toggle rows. */ .home-cfg-group { border: 1px solid var(--card-border); background: var(--surface-2); border-radius: 14px; padding: 0 12px 11px; margin-bottom: 11px; } .home-cfg-group-head { display: flex; align-items: center; gap: 8px; padding: 11px 0 10px; border-bottom: 1px solid var(--line); font: 800 13px Archivo; color: var(--text); } .home-cfg-group-head svg { width: 16px; height: 16px; stroke: var(--blue); flex-shrink: 0; } .home-cfg-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 0; user-select: none; -webkit-user-select: none; } .home-cfg-row + .home-cfg-row { border-top: 1px solid var(--line); } .home-cfg-row.dragging { border-top-color: transparent; background: var(--card); border-radius: 10px; box-shadow: 0 8px 22px rgba(11,23,51,.20); } .home-cfg-drag { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 30px; color: var(--text-muted-2); cursor: grab; touch-action: none; } .home-cfg-row.dragging .home-cfg-drag { cursor: grabbing; } .home-cfg-drag svg { width: 18px; height: 18px; } .home-cfg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .home-cfg-title { font: 700 13.5px 'Hanken Grotesk'; color: var(--text); } .home-cfg-sub { font: 500 11.5px 'Hanken Grotesk'; color: var(--text-muted-2); } /* Non-draggable control rows (match count, "Tabuľka" group picker) under a group's toggles. Bottom breathing room is owned by the group's padding-bottom (structural, outside this flex row) so it can't be eaten by a mobile