/* Font Inter je načítán přes v includes/templates/header.php (kvůli preconnect). */
/* ==========================================================================
JMENNÉ PROSTORY TŘÍD
Klíč k tomu, co která předpona znamená a ve kterém souboru bydlí.
Proč: v CSS byla dvacítka dvou- až třípísmenných předpon (mi, ph, hf, pt,
pm, mhl, mh, mu, lb, cw, mgr, te, a dokonce holé p- a t-), ke kterým klíč
nikde nebyl. Kdo hledal, kde se styluje řádek soupisky, musel projít
.p-row, .t-row a .lb-player a hádat, který z nich to je. Předpona teď říká
celým slovem, k čemu blok patří, a tenhle seznam říká, kde ho hledat.
PRAVIDLO: předpona = modul, který třídu vlastní. Kdo přidává třídu, přidá
ji do souboru její rodiny; nová rodina patří do tohohle seznamu.
--- Vždy načtené (viz $cssAlways v header.php) ----------------------------
base.css container, breadcrumb, alert-, footer-, ranking-,
search-, beta-, dashboard-, forfeit-tag
typography.css section-, text-, status-, table-legend-, badge-,
fate-badge, data-note
buttons.css btn-, fav-, big-
nav.css nav-, menu-, bottom-nav-
cards.css record-, result-, counter-, disclaimer
tables.css full-stats-table, compact-table, col-, cell-, row-
forms.css custom-select, big-, season-
club-logo.css club-logo-
--- Moduly (kontroler si je vyžádá v $pageStyles) -------------------------
person.css player- sdílená hlavička osoby (hráč, trenér,
rozhodčí), career-, level-
match-list.css ss- řádek a seznam zápasů; h2h-, expand-
lineup.css lineup- sestava a soupiska; yc-icon, rc-icon
--- Stránky ---------------------------------------------------------------
score-service.css ss- výsledkový servis (úvodka, soutěž, tabulka)
match.css match-head- hlavička detailu zápasu
match-aside- pravý sloupec detailu
match-upcoming- nesehraný zápas (odhad, hlídání karet)
timeline- časová osa
event-, half- druhy událostí na ose a půlky zápasu
player.css profile- hlavička karty hráče
careermatch- seznam zápasů kariéry
transfer- přestupy
milestone- kariérní milníky
trophy-, hof- síň slávy
fact- osobní rekordy
referee.css ref-
coach.css coach- skořápka a navigace trenérské sekce
dash- dashboard, cal- kalendář
squad- struktura kádru a vytíženost
builder- stavěč sestav
cardwatch- hlídání karet, roster- kádr
locked- rozcestník pro účet bez role trenéra
scout-, minute-, picker-, pos-line-
account.css auth-, account-, recovery-
my.css my-
about.css about-, contact-
Mimo rodiny stojí hrstka drobností, které patří všem: link-plain
(odkaz bez podtržení), visually-hidden (text jen pro čtečku),
container, site-footer, brand-accent. Ty vlastní base.css a nav.css.
--- Napříč vším -----------------------------------------------------------
is-… stav prvku (is-winner, is-mine, is-fav, is-linked)
has-… prvek něco obsahuje (has-result, has-meta)
active vybraná položka navigace nebo přepínače
Stavové třídy se nepíšou samy o sobě — vždycky doplňují třídu rodiny,
takže .ss-side.is-winner, ne osamocené .is-winner.
========================================================================== */
/* ==========================================================================
DESIGNOVÉ TOKENY
Jediné místo, kde se v celém webu pojmenovává barva, odstup a zaoblení.
Proč: než tohle vzniklo, stálo v CSS pět různých červených (#f85149,
#e5534b, #f87171, #ff8a83), čtyři žluté a tři zelené — a všechny znamenaly
totéž. Kdo měnil barvu vyloučení, musel ji najít na jedenácti místech
a jedno vždycky zbylo. Barva se od téhle chvíle píše jménem toho, co
znamená (--rc, --win), ne svým odstínem.
Pravidlo: hexadecimální hodnota patří jenom sem. V ostatních souborech
se sahá výhradně na var(--…).
========================================================================== */
:root {
/* --- Podklad a text ---------------------------------------------- */
--bg-main: #050709;
--bg-surface: #101418;
--bg-card: #161b22;
/* Panel se seznamem zápasů: jeden odstín pro podklad hlavičky, rámeček
panelu i linky mezi zápasy — tmavší než obecné --border. */
--bg-head: #22272e;
--accent: #00f2ff;
--accent-glow: rgba(0, 242, 255, 0.15);
--accent-wash: rgba(0, 242, 255, 0.03);
/* Navigace je fixní a obsah pod ní prosvítá — proto poloprůhledná
podoba --bg-surface, ne ta plná. */
--bg-nav: rgba(16, 20, 24, 0.95);
--text-main: #ffffff;
--text-muted: #8b949e;
--border: #30363d;
/* --- Výsledek zápasu ---------------------------------------------
Výhra / remíza / prohra. Remíza má schválně dvě podoby: ve formě
a v rozdělení doma–venku je neutrálně šedá, v seznamu vzájemných
zápasů a v kalendáři žlutá, aby se odlišila od prohry. */
--win: #2ea44f;
--win-bright: #3fb950;
--draw: #e3b341;
--loss: #f85149;
--neutral: #8b949e;
/* Chyba a nebezpečná akce. Týž odstín jako prohra a červená karta —
jméno ale musí být vlastní, aby se dal změnit zvlášť. */
--danger: #f85149;
--success: #2ea44f;
/* --- Karty --------------------------------------------------------
Základ je barva karty samotné, -dim pro plochy a text na tmavém
podkladu, -bright pro text na barevném poli hřiště. */
--yc: #e3b341;
--yc-dim: #d29922;
--yc-bright: #ffcf5a;
--rc: #f85149;
--rc-dim: #e5534b;
--rc-bright: #ff8a83;
/* Záře pod kartičkou a podbarvení řádku. Průhledná podoba téže barvy —
kdyby se odstín změnil, musí se změnit tady zároveň. */
--yc-glow: rgba(227, 179, 65, 0.4);
--yc-wash: rgba(227, 179, 65, 0.15);
--yc-tint: rgba(227, 179, 65, 0.05);
--rc-glow: rgba(248, 81, 73, 0.4);
--rc-wash: rgba(248, 81, 73, 0.15);
--rc-tint: rgba(248, 81, 73, 0.12);
--win-glow: rgba(46, 164, 79, 0.5);
--win-wash: rgba(46, 164, 79, 0.1);
--loss-wash: rgba(248, 81, 73, 0.1);
/* --- Posty v sestavě ---------------------------------------------
Brankář žlutě, obrana modře, záloha akcentem, útok červeně —
stejné rozlišení jako v manažerských hrách. */
--pos-gk: #d29922;
--pos-gk-bright: #ffcf5a;
--pos-df: #4c8bf5;
--pos-df-bright: #7db0ff;
--pos-mf: #00f2ff;
--pos-fw: #e5534b;
--pos-fw-bright: #ff8a83;
/* --- Text na barevném podkladu ------------------------------------
Na akcentu, na žluté a na sytě barevném poli musí text ztmavnout,
jinak není čitelný. */
--on-accent: #04212a;
--on-light: #1a1a1a;
--on-dark: #ffffff;
/* --- Vrstvy nad kartou --------------------------------------------
Prosvětlení a ztmavení místo dalších plných barev — drží se to
podkladu, ať už je pod tím cokoli. */
--surface-1: rgba(255, 255, 255, 0.02);
--surface-2: rgba(255, 255, 255, 0.05);
--hairline: rgba(255, 255, 255, 0.05);
--hairline-soft: rgba(255, 255, 255, 0.03);
--scrim: rgba(0, 0, 0, 0.55);
--scrim-soft: rgba(0, 0, 0, 0.3);
--shadow-card: 0 10px 40px rgba(0, 0, 0, 0.3);
--shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
/* --- Hřiště v builderu sestav -------------------------------------
Dva odstíny trávy na posekané pruhy; nad nimi se kreslí čáry
a jmenovky hráčů, proto ta bílá se sníženým krytím. */
--pitch-a: #17351f;
--pitch-b: #1b3d24;
--pitch-line: rgba(255, 255, 255, 0.25);
--pitch-slot-line: rgba(255, 255, 255, 0.35);
--pitch-slot-text: rgba(255, 255, 255, 0.55);
--pitch-chip-text: rgba(255, 255, 255, 0.75);
--pitch-slot-bg: rgba(0, 0, 0, 0.15);
/* --- Tisk ----------------------------------------------------------
Sestava se tiskne na papír: tmavé téma se pro tisk celé obrací,
jinak by z toho byla černá stránka. */
--print-bg: #ffffff;
--print-ink: #000000;
--print-line: #cccccc;
/* --- Odstupy -------------------------------------------------------
Šestistupňová škála. Nové bloky sahají jen sem; starší soubory se
převádějí postupně, jak se jich kód dotkne. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 20px;
--space-5: 30px;
--space-6: 50px;
/* --- Ovladače -------------------------------------------------------
Jedna výška pro všechno, co v hlavičce stojí vedle sebe: tlačítka se
šipkou, vypínač řazení i pole filtru. Bez ní si každý prvek počítal
výšku z paddingu a řádek vypadal jako tři různé věci náhodou vedle
sebe. */
--control-size: 32px;
/* Ovladač uvnitř vnořeného bloku. Nadpis nad ním je drobný text, plná
velikost by ho přerostla — vnoření se pozná i tím, že je ovladač menší. */
--control-size-sm: 24px;
/* --- Zaoblení ------------------------------------------------------ */
--radius-sm: 4px;
--radius: 12px;
--radius-pill: 999px;
}
/* --- Zlomové body ---------------------------------------------------------
Media query neumí číst var(), takže tohle není proměnná, ale závazný
seznam. Dřív bylo v CSS čtrnáct různých šířek (420 … 1200) a dvojice
pravidel, které se musely přepnout společně — třeba řádek zápasu
a čísla hráče v něm —, se přepínaly každé jinde.
Pět stupňů, žádný jiný se do CSS psát nemá:
xs 520px telefon na výšku
sm 640px velký telefon
md 820px telefon na šířku a malý tablet; tady se rozpadá
třísloupcové rozvržení výsledkového servisu
lg 992px tablet
xl 1200px úzký desktop; tady odchází pravý sloupec pod obsah
-------------------------------------------------------------------------- */
* { box-sizing: border-box; }
/* Značka hidden znamená „tady nic není" a nesmí ji přebít vlastní display
prvku. Bez !important by ho každá třída s display: flex nebo grid přeprala,
protože jsou stejně specifické a stojí v souboru níž — a skrytý prvek by
zůstal vidět. Do téhle pasti spadl filtr týmu i ovladače, které se bez
JavaScriptu nemají ukázat. */
[hidden] { display: none !important; }
/* Na mobilu je základní písmo menší — 16 px z prohlížeče je na telefonu
zbytečně velké a tabulky i řádky zápasů se kvůli němu lámou. Velikosti
v rem se zmenší s ním, v px zůstanou. */
@media (max-width: 820px) {
html { font-size: 14px; }
}
/* Mobilní prohlížeče (Safari, Chrome) na šířku samy zvětšují písmo v blocích
textu — legenda pod tabulkou tak vycházela větší než tabulka. Velikosti
drží CSS, prohlížeč do nich nesahá. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
background-color: var(--bg-main);
color: var(--text-main);
font-family: 'Inter', sans-serif;
margin: 0;
line-height: 1.6;
background-image: radial-gradient(circle at 50% 0%, var(--bg-card) 0%, var(--bg-main) 70%);
background-attachment: fixed;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.breadcrumb { margin-bottom: 25px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.breadcrumb a:hover { color: var(--accent); }
/* --- Utility & helper třídy nahrazující dříve inline styly --- */
/* Odsazení obsahu pod fixní navigací */
.nav-spacer { height: 75px; }
/* Akcentová barva v "S11.cz" loga / brandu */
.brand-accent { color: var(--accent); }
/* Plochý odkaz – zachovává barvu textu a nepodtrhává */
.link-plain { color: inherit; text-decoration: none; }
/* Popisek jen pro čtečku. Prvek zůstává v toku i ve stromu přístupnosti,
jen ho není vidět — na rozdíl od display:none, které ho vyřadí z obojího. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Sekční nadpis se zvětšeným odstupem. Uvnitř panelů už není potřeba —
odstup dělá mezera mezi panely —, drží se ho ještě trenérská sekce
a osobní přehled. */
.section-header-spaced { margin-top: 50px; }
/* Komprimovaná buňka pro skóre tabulky */
.cell-score-compact { font-size: 0.75rem; white-space: nowrap; letter-spacing: 0.5px; }
/* Značka „k" za skóre u kontumovaných zápasů — v seznamech výsledků */
.forfeit-tag {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
vertical-align: middle;
padding: 1px 4px;
border: 1px solid var(--border);
border-radius: 3px;
color: var(--text-muted);
cursor: help;
}
/* --- Footer --- */
.site-footer { margin-top: 80px; text-align: center; color: var(--text-muted); border-top: 1px solid var(--border); padding: 50px 0; }
.footer-brand { margin-bottom: 20px; }
.footer-logo { text-decoration: none; font-weight: 800; font-size: 1.2rem; color: var(--text-main); letter-spacing: -1px; }
.footer-copy { margin: 0; font-size: 0.9rem; }
.footer-tagline { font-size: 0.75rem; margin-top: 10px; opacity: 0.6; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.5; }
/* ==========================================================================
LAYOUT PRIMITIVY
Sdílené strukturální třídy používané napříč většinou stránek (detail klubu,
hráče, zápasu, archiv, soutěže, vyhledávání, O projektu).
========================================================================== */
/* Dvousloupcový grid: hlavní obsah + sidebar (.dash-side), nebo dvě stejné sekce. */
.dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 30px;
align-items: start;
}
/* Pokud je v gridu sidebar (.dash-side), zúžíme druhý sloupec. */
.dashboard-grid:has(.dash-side) {
grid-template-columns: minmax(0, 1fr) 340px;
}
.dashboard-section { min-width: 0; }
.dash-side { min-width: 0; }
@media (max-width: 992px) {
.dashboard-grid,
.dashboard-grid:has(.dash-side) {
grid-template-columns: 1fr;
}
}
/* Informační / chybové hlášení uvnitř obsahu */
.alert-info {
background: var(--bg-card);
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 25px 30px;
color: var(--text-muted);
font-size: 0.95rem;
text-align: center;
margin: 20px 0;
}
/* Grid karet výsledků (hledání, adresář klubů, archiv) */
.search-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-top: 20px;
}
/* Hlavičky stránek s výsledky / archivem */
.search-header-results {
text-align: center;
margin: 20px 0 40px;
}
.search-header-results h1 {
font-size: 2rem;
font-weight: 800;
margin: 0 0 15px;
letter-spacing: -1px;
}
.search-header-results h1 span {
color: var(--accent);
}
/* Vyhledat znovu (pod výsledky) */
.search-again { margin-top: 40px; }
/* Hlavička stránky žebříčků */
.ranking-header {
text-align: left;
margin: 20px 0 30px;
}
.ranking-header h1 {
font-size: 2rem;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
}
.ranking-nav {
margin-top: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Žebříček Top 100 — detaily tabulky */
.ranking-grid { margin-top: 40px; }
.ranking-table .ranking-name { font-weight: 600; }
.ranking-table .ranking-club { font-size: 0.85rem; }
.ranking-table .ranking-club-link { color: var(--text-muted); text-decoration: none; }
.ranking-table .ranking-club-link:hover { color: var(--accent); }
.ranking-table .ranking-val { font-size: 1.1rem; }
/* ==========================================================================
TESTOVACÍ PROVOZ
Web běží v beta režimu. Sdělení se opakuje na několika místech, aby ho
návštěvník nemohl minout: odznak v navigaci (všude), výrazný panel na
„O projektu" a u přihlášení/registrace, decentní řádek v patičce.
========================================================================== */
/* Logo + odznak drží pohromadě jako jeden blok vlevo v navigaci */
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
/* Odznak v hlavní navigaci vedle loga */
.nav-beta-badge {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 4px;
padding: 2px 6px;
white-space: nowrap;
opacity: 0.85;
text-decoration: none;
transition: opacity 0.2s;
}
.nav-beta-badge:hover { opacity: 1; }
/* Na úzkých displejích se odznak zmenší, aby se vedle loga vešel. */
@media (max-width: 520px) {
.nav-brand { gap: 6px; }
.nav-beta-badge {
font-size: 0.52rem;
letter-spacing: 0.5px;
padding: 2px 4px;
}
}
/* Panel se sdělením uvnitř */
.beta-notice {
background: var(--bg-card);
border: 1px solid var(--accent);
border-left-width: 3px;
border-radius: var(--radius);
padding: 18px 22px;
margin: 0 0 30px;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.7;
}
.beta-notice-title {
display: block;
color: var(--accent);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 8px;
}
.beta-notice p { margin: 0 0 10px; }
.beta-notice p:last-child { margin-bottom: 0; }
.beta-notice strong { color: var(--text-main); }
/* Řádek v patičce */
.footer-beta {
font-size: 0.75rem;
margin-top: 15px;
color: var(--accent);
opacity: 0.75;
}
/* Odkaz „co to znamená". Web nemá obecné pravidlo pro odkazy, takže bez
tohohle dostal výchozí modrou prohlížeče (po návštěvě fialovou) — na
tmavém podkladu skoro nečitelnou a jinou než zbytek řádku. Barvu bere
z řádku, odkaz prozradí podtržení. */
.footer-beta a,
.footer-beta a:visited {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.footer-beta a:hover { color: var(--text-main); }