/* ═══════════════════════════════════════════════════════════════════════════ RespinnersTV — SPORT Sdílený stylesheet sekce (/sport, /sport/*, /sport/sazkove-kancelare). Loaded via header.php pro pageCSS === 'sport' || 'sport-*' || 'sazkove-kancelare'. --------------------------------------------------------------------------- ZÁMĚR: sekce má vypadat jako informační sportovní servis, ne jako casino landing. Hutně, čitelně, bez ozdob. Dlouhý obsah jede na sdílených .ed-* primitivech (components/editorial.css), tady žije jen to, co je pro sport vlastní: výsledkový řádek, program, filtry, karty partnerů a AI rozbor. TŘI ZÁKAZY, které v tomhle souboru platí bez výjimky: 1. žádný linear-gradient ani radial-gradient, 2. žádná barva mimo jeden akcent #00f5ff a stupnici bílé na tmavé, (jediná výjimka: tlumená #e0a458 u rizik v AI rozboru), 3. žádný box-shadow a žádný transform (kromě focus prstence a spinneru). Barva v téhle sekci nese informaci (aktivní stav, odkaz, živý zápas), nikdy není dekorace. DVĚ PASTI TOHOTO WEBU, na které tenhle soubor musí reagovat: • base.css dává KAŽDÉMU
display:flex a `padding: X 0`, což ubíjí boční okraj .rsp-container → všude padding-block, nikdy zkratka padding, a blokovým obalům explicitní display:block. • .sp-page je flex položka vycentrovaného , takže by se smrskla na fit-content a široká tabulka by vystrčila obsah za okraj okna → width:100% + max-width:100%. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Režim sekce: stránka ve stránce ───────────────────────────────────────── Stránky nastavují $pageBodyClass = 'sport-mode' (viz includes/header.php). Casino dekorace (plovoucí sloty, herní shader) se v sekci nezobrazují, pozadí je jedna plochá tmavá barva. Nic se nevznáší, nic nesvítí. */ body.sport-mode { background: #0b0e14; } body.sport-mode .floating-slots-container, body.sport-mode .sbg { display: none !important; } /* ── Tokeny sekce ─────────────────────────────────────────────────────────── */ .sp-page { --sp-accent: #00f5ff; --sp-accent-soft: rgba(0, 245, 255, 0.35); /* rámeček hoveru / aktivní stav */ --sp-accent-bg: rgba(0, 245, 255, 0.10); /* výplň aktivního stavu */ --sp-surface: #0d1017; /* karta, panel, tabulka, formulář */ --sp-surface-2: #11151d; /* hover karty, hlavička tabulky a ligy */ --sp-line: rgba(255, 255, 255, 0.12); /* rámeček prvku */ --sp-line-soft: rgba(255, 255, 255, 0.08); /* linka uvnitř prvku */ --sp-ink: #ffffff; /* nadpisy, jména týmů, skóre */ --sp-ink-2: rgba(255, 255, 255, 0.72); /* běžný text */ --sp-ink-3: rgba(255, 255, 255, 0.48); /* meta a popisky */ --sp-warn: #e0a458; /* JEN rizika v AI rozboru, nikde jinde */ --sp-r: 12px; /* karta, panel, tabulka, formulář */ --sp-r-s: 8px; /* tlačítko, čip, input, den */ --sp-r-xs: 4px; /* odznak, štítek, počítadlo */ color: var(--sp-ink); overflow-x: clip; width: 100%; max-width: 100%; } /* ── Srovnání sdílené editorial vrstvy do stejného tónu ───────────────────── .ed-* primitivy jsou z casino části barevnější, tady se ztlumí: gradientový text v nadpisech se vypíná, akcentní linka je jedna barva. */ .sp-page .ed-card, .sp-page .ed-pill, .sp-page .ed-tag, .sp-page .ed-facts { --acc: var(--sp-accent); } .sp-page .ed-band-head { max-width: 72ch; margin: 0 0 18px; text-align: left; } .sp-page .ed-band-head h2 span, .sp-page .ed-head h2 span, .sp-page .ed-head h3 span, .sp-page .seo-guide-title span { background: none; -webkit-text-fill-color: currentColor; color: #fff; } .sp-page .ed-head::before, .sp-page .ed-band-head::before { background: var(--sp-accent); width: 3px; } .sp-page .ed-band-head p { max-width: 72ch; font-size: 0.98rem; line-height: 1.65; color: var(--sp-ink-2); } .sp-page .ed-band-head p strong { color: #fff; font-weight: 700; } .sp-page .ed-table tr.is-partner { --acc: var(--sp-accent); } .sp-page .ed-callout p { margin: 0; } .sp-page .ed-facts-v small { display: block; margin-top: 4px; font-size: 0.76rem; font-weight: 600; line-height: 1.45; color: var(--sp-ink-3); } /* ── Blokové obaly proti globálnímu section{display:flex} ─────────────────── */ .sp-page .sp-hero, .sp-page .sp-section, .sp-page .sp-disclaimer { display: block; } .sp-page .sp-hero { padding-block: 4px 20px; } .sp-page .sp-section { padding-block: 40px 0; } .sp-page .sp-section--tight { padding-block: 20px 0; } .sp-page .sp-disclaimer { padding-block: 40px 56px; } /* ── Interakce ────────────────────────────────────────────────────────────── */ .sp-page a, .sp-page button, .sp-page summary { transition: color .12s ease, background-color .12s ease, border-color .12s ease; } .sp-page :focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; } /* ── Hlavička stránky ─────────────────────────────────────────────────────── */ .sp-page h1 { font-family: 'Exo 2', 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.35rem); line-height: 1.16; letter-spacing: -0.01em; color: #fff; margin: 0 0 10px; } .sp-page h1 span { background: none; -webkit-text-fill-color: initial; color: var(--sp-accent); } .sp-hero-intro { max-width: 68ch; margin: 0 0 12px; font-size: 1.05rem; line-height: 1.65; color: var(--sp-ink-2); } .sp-hero-intro strong { color: #fff; font-weight: 700; } /* Meta řádek pod H1: soutěže, datum aktualizace, počty, licence. */ .sp-meta { margin: 0 0 14px; font-size: .82rem; line-height: 1.5; color: var(--sp-ink-3); font-variant-numeric: tabular-nums; } .sp-meta a { color: var(--sp-ink-2); text-decoration: underline; text-underline-offset: 2px; } /* Dvousloupcová hlavička zůstává jen tam, kde pravý sloupec nese fakta (stránka sázkových kanceláří), ne jako dekorace. */ .sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; align-items: start; } .sp-hero-main, .sp-hero-side { min-width: 0; } /* ── Tlačítka ─────────────────────────────────────────────────────────────── */ .sp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; } .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--sp-r-s); border: 1px solid var(--sp-line); background: transparent; color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.2; text-decoration: none; cursor: pointer; } .sp-btn:hover { background: var(--sp-surface-2); border-color: var(--sp-accent-soft); } .sp-btn--primary { background: var(--sp-accent); border-color: var(--sp-accent); color: #07070c; } .sp-btn--primary:hover { background: #3ff8ff; border-color: #3ff8ff; color: #07070c; } .sp-btn--lg { padding: 13px 24px; font-size: .98rem; } .sp-btn[disabled] { opacity: .55; cursor: not-allowed; } .sp-btn-ico, .sp-mini-ico, .sp-panel-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; } .sp-btn-ico svg, .sp-mini-ico svg, .sp-panel-ico svg { width: 100%; height: 100%; } .sp-inline-link { color: var(--sp-accent); text-decoration: none; } .sp-inline-link:hover { text-decoration: underline; } /* Jednořádkové CTA místo celého AI pruhu na podstránkách. */ .sp-inline-cta { display: block; margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--sp-line); border-left: 2px solid var(--sp-accent); border-radius: var(--sp-r-s); background: var(--sp-surface); font-size: .95rem; color: var(--sp-ink-2); } .sp-inline-cta a { color: var(--sp-accent); font-weight: 700; text-decoration: none; } .sp-inline-cta a:hover { text-decoration: underline; } /* Předchozí / další zpráva v detailu. */ .sp-prevnext { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--sp-line-soft); font-size: .9rem; color: var(--sp-ink-3); } .sp-prevnext a { color: var(--sp-accent); text-decoration: none; } .sp-prevnext a:hover { text-decoration: underline; } /* ── Panel programu ───────────────────────────────────────────────────────── */ .sp-panel { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 16px; } .sp-panel--full { display: block; } .sp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sp-panel-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; color: #fff; } .sp-panel-link { font-size: .84rem; color: var(--sp-accent); text-decoration: none; white-space: nowrap; } .sp-panel-link:hover { text-decoration: underline; } .sp-panel-note { margin: 10px 0 0; font-size: .78rem; line-height: 1.55; color: var(--sp-ink-3); } /* ── Výsledkový výpis: jádro sekce ─────────────────────────────────────────── Řádek je dvouřádkový jako na výsledkových serverech: čas vlevo, domácí nad hosty, skóre ve svislém sloupci vpravo. Tři pevné sloupce znamenají, že všechny zápasy v celém výpisu lícují na pixel, ať se týmy jmenují jakkoli. Proto tu jsou pevné šířky u času i skóre, ne auto. */ .sp-matchlist { display: grid; gap: 12px; } .sp-league { display: block; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-r); overflow: hidden; scroll-margin-top: calc(var(--nav-height, 116px) + 12px); } .sp-league-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 9px 14px; background: var(--sp-surface-2); border-bottom: 1px solid var(--sp-line); } .sp-league-name { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .sp-league-count { font-size: .72rem; font-weight: 700; color: var(--sp-ink-3); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--sp-line); border-radius: var(--sp-r-xs); padding: 1px 7px; font-variant-numeric: tabular-nums; } /* Seznam musí zůstat blokový: display:flex na