/* Beach Volejbal — mobile-first CSS */ /* ── Brandový font Inter (self-hosted, variabilní; jen v templatu Patrioti MSK) ── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --c-sand: #f5e6c8; --c-ocean: #1a6fa8; --c-ocean-dark: #0f4d7a; --c-sky: #e8f4fd; --c-white-group: #ffffff; --c-blue-group: #d0e8f8; --c-green: #2e7d32; --c-red: #c62828; --c-gray: #666; --c-border: #d0c9bc; /* Aliasy bez prefixu — používané v tv/courts/public/dashboard/_rounds/current_round. Mapují na --c-* (oprava dříve nedefinovaných proměnných); brand override se propíše. */ --sand: var(--c-sand); --ocean: var(--c-ocean); --ocean-dark: var(--c-ocean-dark); --sky: var(--c-sky); --blue-group: var(--c-blue-group); --white-group: var(--c-white-group); --green: var(--c-green); --red: var(--c-red); --gray: var(--c-gray); --border: var(--c-border); --gold: #b7950b; --gold-bg: #fff9c4; --group-bila-accent: #bbb; /* akcent skupiny BÍLÁ (default šedá) */ --radius: 8px; --shadow: 0 2px 6px rgba(0,0,0,0.12); --font: system-ui, -apple-system, sans-serif; } /* ========================================================================= TEMPLATE: Patrioti MSK — brandový reskin (přemapování tokenů + Inter) Aktivní jen při . Default zůstává netknutý. Brand: modrá #4298d3, navy #2a3340 (z loga patriotimsk.cz). ========================================================================= */ [data-template="patrioti"] { --c-sand: #eef3f8; /* světlé chladné pozadí */ --c-ocean: #4298d3; /* brand modrá — primární */ --c-ocean-dark: #2a3340; /* navy — nadpisy, text */ --c-sky: #e7f1fb; /* hover / highlight */ --c-blue-group: #d7ebfb; /* skupina MODRÁ */ --c-border: #d8e0e9; /* chladný světlý okraj */ --c-gray: #5b6573; /* sekundární text */ --radius: 12px; --shadow: 0 6px 20px rgba(42, 51, 64, .08); --font: 'Inter', system-ui, -apple-system, sans-serif; --group-bila-accent: #2a3340; /* BÍLÁ → navy (brand) */ } [data-template="patrioti"] body { color: #2a3340; } /* Světlá navigace s brandovým logem */ [data-template="patrioti"] nav { background: #ffffff; color: var(--c-ocean-dark); border-bottom: 3px solid var(--c-ocean); box-shadow: 0 2px 10px rgba(42, 51, 64, .06); } [data-template="patrioti"] nav a { color: var(--c-ocean-dark); opacity: .9; } [data-template="patrioti"] nav a:hover { color: var(--c-ocean); opacity: 1; text-decoration: none; } [data-template="patrioti"] nav .nav-role { background: var(--c-sky); color: var(--c-ocean-dark); } .nav-logo { height: 30px; width: auto; display: block; } /* Timer u běžících zápasů — tabular-nums proti „skákání" číslic při m:ss */ .match-timer { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; display: inline-block; min-width: 2.6em; text-align: left; } /* Typografie & jemné doladění (Inter) */ [data-template="patrioti"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-template="patrioti"] h1, [data-template="patrioti"] h2, [data-template="patrioti"] h3 { font-weight: 700; letter-spacing: -.018em; line-height: 1.2; } [data-template="patrioti"] .subtitle { letter-spacing: 0; } [data-template="patrioti"] .card { border: 1px solid var(--c-border); } [data-template="patrioti"] .btn { font-weight: 600; } [data-template="patrioti"] .badge, [data-template="patrioti"] .wave-badge { font-weight: 700; } /* Tabulková čísla → zarovnané skóre, body, míče, pořadí */ [data-template="patrioti"] .schedule-table, [data-template="patrioti"] .standings-table, [data-template="patrioti"] .final-table, [data-template="patrioti"] .score-display, [data-template="patrioti"] .match-score, [data-template="patrioti"] .rank-num, [data-template="patrioti"] .pts-col { font-variant-numeric: tabular-nums; } /* Širší obsah na velkém displeji (mobil zůstává mobile-first) */ [data-template="patrioti"] .container { max-width: 1140px; } /* Hlavička kola (dříve inline navy) — default tmavě modrá, Patrioti světlá brand modrá */ .round-card { border-top: 4px solid var(--c-ocean-dark); } .round-head { background: var(--c-ocean-dark); color: #fff; padding: 8px 14px; } [data-template="patrioti"] .round-card { border-top-color: var(--c-ocean); } [data-template="patrioti"] .round-head { background: var(--c-ocean); } /* Barevné odlišení skupin (Patrioti): BÍLÁ = navy #2a3340, MODRÁ = brand modrá #4298d3 */ [data-template="patrioti"] .group-bila { border-top-color: #2a3340; } [data-template="patrioti"] .group-modra { border-top-color: #4298d3; } [data-template="patrioti"] .group-label-bila { color: #2a3340; } [data-template="patrioti"] .group-label-modra { color: #4298d3; } /* BÍLÁ = světlá hlavička s navy textem; MODRÁ = plná brand modrá */ [data-template="patrioti"] .group-bila .standings-table th, [data-template="patrioti"] .group-bila .schedule-table th { background: #e8edf3; color: #2a3340; } [data-template="patrioti"] .group-modra .standings-table th, [data-template="patrioti"] .group-modra .schedule-table th { background: #4298d3; color: #fff; } body { font-family: var(--font); background: var(--c-sand); color: #222; font-size: 16px; line-height: 1.5; min-height: 100vh; } /* ── Layout ── */ .container { max-width: 760px; margin: 0 auto; padding: 0 12px 40px; } /* ── Nav ── */ nav { background: var(--c-ocean); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 100; } nav .nav-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; } nav .nav-links { display: flex; gap: 12px; flex-wrap: wrap; } nav a { color: #fff; text-decoration: none; font-size: .9rem; opacity: .85; } nav a:hover { opacity: 1; text-decoration: underline; } nav .nav-role { font-size: .75rem; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 12px; } nav .nav-admin-group { display: inline-flex; align-items: center; gap: 12px; padding: 3px 10px; background: rgba(255,255,255,.13); border-radius: 20px; flex-wrap: wrap; } [data-template="patrioti"] nav .nav-admin-group { background: var(--c-sky); border-radius: 20px; } /* ── Page title ── */ h1 { font-size: 1.35rem; margin: 20px 0 4px; color: var(--c-ocean-dark); } h2 { font-size: 1.1rem; margin: 18px 0 10px; color: var(--c-ocean-dark); } h3 { font-size: 1rem; margin: 12px 0 6px; } .subtitle { color: var(--c-gray); font-size: .85rem; margin-bottom: 16px; } /* ── Card ── */ .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; } .groups-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .groups-grid > * { min-width: 0; } @media (min-width: 560px) { .groups-grid { grid-template-columns: 1fr 1fr; } } .group-bila { border-top: 4px solid #eee; } .group-modra { border-top: 4px solid var(--c-ocean); } .group-label-bila { color: #555; font-weight: 700; } .group-label-modra { color: var(--c-ocean-dark); font-weight: 700; } /* ── Schedule table ── */ .schedule-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .schedule-table th { background: var(--c-ocean); color: #fff; padding: 6px 8px; text-align: left; font-weight: 600; font-size: .8rem; } .schedule-table td { padding: 8px; border-bottom: 1px solid var(--c-border); vertical-align: middle; } .schedule-table tr:last-child td { border-bottom: none; } .schedule-table tr:hover td { background: var(--c-sky); } .wave-badge { display: inline-block; background: #f1f3f5; color: #495057; border: 1px solid #dee2e6; border-radius: 4px; padding: 1px 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; } .wave-a, .wave-b, .wave-c { background: #f1f3f5 !important; color: #495057 !important; border: 1px solid #dee2e6 !important; } .court-num { display: inline-block; background: var(--c-ocean-dark); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: .85rem; font-weight: 700; min-width: 24px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .vs { color: var(--c-gray); font-size: .8rem; margin: 0 4px; } .vs-wrapper { display: inline-block; } .court-col, .wave-col { text-align: center !important; } .team-name { font-weight: 500; } .score-display { font-weight: 700; font-size: .95rem; } .score-pending { color: var(--c-gray); font-size: .8rem; font-style: italic; } .score-sets-detail { color: var(--c-gray); font-size: 0.75rem; white-space: nowrap; } .playing-badge { font-size: 0.85rem; color: var(--c-green); font-weight: bold; background: #e8f5e9; padding: 4px 6px; border-radius: 4px; display: inline-block; text-align: left; line-height: 1.2; } .playing-timer { white-space: nowrap; } /* ── Standings table ── */ .standings-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .standings-table th { background: var(--c-ocean); color: #fff; padding: 6px 6px; text-align: right; font-size: .78rem; font-weight: 600; } .standings-table th:nth-child(1), .standings-table th:nth-child(2) { text-align: left; } .standings-table td { padding: 7px 6px; border-bottom: 1px solid var(--c-border); text-align: right; } .standings-table td:nth-child(1), .standings-table td:nth-child(2) { text-align: left; } .standings-table tr:last-child td { border-bottom: none; } .standings-table tr:hover td { background: var(--c-sky); } .rank-num { font-weight: 700; color: var(--c-ocean-dark); min-width: 20px; } .pts-col { font-weight: 700; color: var(--c-green); } /* ── Final ranking ── */ .final-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .final-table th { background: #b7950b; color: #fff; padding: 6px 8px; text-align: left; font-size: .82rem; } .final-table td { padding: 8px; border-bottom: 1px solid var(--c-border); } .final-table tr:last-child td { border-bottom: none; } .place-1 { background: #fff9c4; } .place-2 { background: #f5f5f5; } .place-3 { background: #fbe9d8; } .medal { font-size: 1.1rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius); border: none; cursor: pointer; font-size: .95rem; font-weight: 600; text-decoration: none; transition: opacity .15s; line-height: 1.2; } .btn:hover { opacity: .88; } .btn:active { opacity: .75; } .btn-primary { background: var(--c-ocean); color: #fff; } .btn-success { background: var(--c-green); color: #fff; } .btn-danger { background: var(--c-red); color: #fff; } .btn-outline { background: transparent; border: 2px solid var(--c-ocean); color: var(--c-ocean); } .btn-sm { padding: 6px 12px; font-size: .85rem; } .btn-lg { padding: 14px 24px; font-size: 1.05rem; min-height: 48px; } .btn-block { display: flex; width: 100%; justify-content: center; } /* ── Forms ── */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 4px; color: #444; } .form-control { display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 1rem; background: #fff; color: #222; min-height: 44px; } .form-control:focus { outline: none; border-color: var(--c-ocean); box-shadow: 0 0 0 3px rgba(26,111,168,.15); } .form-control-sm { padding: 7px 10px; font-size: .92rem; min-height: 38px; } input[type=number].score-input { width: 72px; text-align: center; font-size: 1.15rem; font-weight: 700; padding: 8px 6px; min-height: 48px; } /* ── Score entry row ── */ .set-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .set-row .set-label { font-weight: 600; min-width: 42px; color: var(--c-gray); font-size: .88rem; } .set-row .team-label { font-size: .85rem; color: #444; min-width: 80px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-divider { font-size: 1.2rem; color: var(--c-gray); font-weight: 700; } /* ── Match card (coordinator) ── */ .match-card { border-left: 4px solid var(--c-ocean); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; /* Celek 1d: po „Hrát"/uložení skóre redirect na #match-{id} — sticky nav nesmí překrýt cílovou kartu. */ scroll-margin-top: 80px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; text-decoration: none; color: inherit; transition: box-shadow .15s; } .match-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.18); } .match-card.scored { border-left-color: var(--c-green); background: #f0faf0; } [data-template="patrioti"] .match-card.scored { background: #edf7f0; } .match-info { flex: 1; min-width: 0; } .match-teams { font-weight: 600; font-size: 1.08rem; } .match-meta { font-size: 0.88rem; color: var(--c-gray); margin-top: 4px; } .match-score { font-size: 1.05rem; font-weight: 700; color: var(--c-green); text-align: right; } .match-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .final-place-badge { font-weight: 700; color: #7b6000; background: #fff9c4; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; border: 1px solid var(--gold); } [data-template="patrioti"] .final-place-badge { color: var(--c-ocean-dark); background: var(--c-sky); border-color: var(--c-ocean); } @media (max-width: 560px) { .match-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; } .match-card .match-info { width: 100%; } .match-card .match-teams { font-size: 1.18rem; line-height: 1.3; } .match-card .match-actions { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--c-border); padding-top: 10px; margin-top: 4px; flex-shrink: initial; } [data-template="patrioti"] .match-card .match-actions { border-top-color: rgba(255, 255, 255, 0.1); } } /* ── Status badges ── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .badge-open { background: #e8f5e9; color: var(--c-green); } .badge-closed { background: #fce4e4; color: var(--c-red); } .badge-final { background: #fff9c4; color: #7b6000; } .badge-swiss { background: #e3f2fd; color: var(--c-ocean-dark); } /* ── Login form ── */ .login-card { max-width: 360px; margin: 40px auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; } .login-card h2 { text-align: center; margin-bottom: 20px; } /* ── Alerts ── */ .alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: .9rem; } .alert-error { background: #fce4e4; color: var(--c-red); border-left: 4px solid var(--c-red); } .alert-success { background: #e8f5e9; color: var(--c-green); border-left: 4px solid var(--c-green); } .alert-info { background: var(--c-sky); color: var(--c-ocean-dark); border-left: 4px solid var(--c-ocean); } /* ── Admin section ── */ .admin-section { margin-bottom: 28px; } .admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .round-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--c-border); } .round-row:last-child { border-bottom: none; } /* ── Third set indicator ── */ .third-set-note { background: #fff9c4; border: 1px solid #f0c040; border-radius: var(--radius); padding: 8px 12px; font-size: .88rem; color: #5a4000; margin-bottom: 10px; } /* ── Auto-refresh indicator ── */ .refresh-indicator { font-size: .75rem; color: var(--c-gray); text-align: right; margin-bottom: 8px; } /* ── Responsive helpers ── */ .text-center { text-align: center; } .text-muted { color: var(--c-gray); font-size: .85rem; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .d-flex { display: flex; } .gap-2 { gap: 8px; } .flex-wrap { flex-wrap: wrap; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } /* ── HTMX loading indicator ── */ .htmx-indicator { opacity: 0; transition: opacity .2s; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } /* ── No-rounds placeholder ── */ .empty-state { text-align: center; padding: 32px 16px; color: var(--c-gray); } .empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 8px; } /* ── Section headings (public homepage separators) ── */ .section-heading { font-size: 1.05rem; font-weight: 700; color: var(--c-ocean-dark); margin: 24px 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--c-border); letter-spacing: .01em; } /* ── Responsive table wrapper (scrollovatelné tabulky na úzkých displejích) ── */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Skupinové záhlaví tabulek — Default template (BÍLÁ tmavší než MODRÁ) ── */ .group-bila .schedule-table th, .group-bila .standings-table th { background: var(--c-ocean-dark); } /* ── Mobile ≤390 px ── */ @media (max-width: 390px) { /* Standings: skrýt sloupec 5 (Míče pro:proti) — 5 sloupců je na 390 px příliš */ .standings-table th:nth-child(5), .standings-table td:nth-child(5) { display: none; } /* Coordinator zápis skóre: zkrátit jméno týmu aby formulář seděl na jednom řádku */ .set-row .team-label { max-width: 80px; } } /* ── Tablet 561–900 px ── */ @media (min-width: 561px) and (max-width: 900px) { .container { max-width: 720px; } } /* ── Mobile nav optimization ── */ @media (max-width: 560px) { nav { padding: 8px 12px; gap: 8px; flex-direction: column; align-items: center; } nav .nav-title { font-size: 0.95rem; width: 100%; text-align: center; } nav .nav-title a { display: inline-flex; justify-content: center; width: 100%; } nav .nav-links { gap: 8px 12px; justify-content: center; width: 100%; } nav a { font-size: 0.8rem; } nav .nav-admin-group { padding: 2px 6px; gap: 6px; } /* Zmenšení vnitřních okrajů tabulky zápasů na mobilu */ .schedule-table th, .schedule-table td { padding: 6px 4px; } /* Pevná tabulka — sloupce se přizpůsobí obsahu, netečou ven */ .schedule-table { table-layout: fixed; word-wrap: break-word; } /* Skrýt sloupce s třídou col-hide-mobile */ .col-hide-mobile { display: none; } /* Nastavení pevné úzké šířky pro Kurt */ .schedule-table th.court-col, .schedule-table td.court-col { width: 38px !important; text-align: center; padding: 6px 2px; } /* Sloupec Zápas — má zabrat co nejvíc místa */ .schedule-table th.match-col, .schedule-table td.match-col { overflow: hidden; text-overflow: ellipsis; } /* Sloupec Skóre — kompaktní na mobilu */ .schedule-table th.score-col, .schedule-table td.score-col { width: 70px !important; padding: 6px 2px; } /* HRAJE SE badge — menší na mobilu */ .playing-badge { font-size: 0.72rem; padding: 2px 4px; } /* Detail setů — povolit zalomení na mobilu */ .score-sets-detail { white-space: normal; } }