byl flex, takže se každý obal stránky (.med-page, .klp-page…) smrskl na šířku svého obsahu a plaval uprostřed — stránka pak začínala jinde než hlavička nad ní. */ main.main-content, .jl-main { display: block; width: 100%; } body.cyber-body { flex-direction: column; } /* Tady dřív stál dorovnávací blok :root. Zděděné soubory (karty.css, kick-skin.css) si po variables.css znovu deklarovaly celou paralelní paletu vlastními hexy, tenhle soubor je na konci kaskády srážel zpátky na tokeny — a stejnou práci dělal potřetí ještě karty-parts/70-coiny.css. Tři místa říkala totéž a rozejít se mohla kdykoli. Zdrojová pravidla teď ukazují rovnou na variables.css, takže dorovnávat není co. */ /* Základ 16 px. Stará kaskáda srážela root pod 1440 px na 14,5 px, takže všechno v rem renderovalo asi o 9 % menší, než jak bylo napsané — past, na kterou se dá narazit jen jednou a pak se jí člověk vyhýbá celý projekt. */ html { font-size: 16px; } @media (min-width: 2200px) { html { font-size: 17px; } } /* Barva plochy sedí na , ne na . Vrstvy pozadí leží pod obsahem (z-index: -1), takže neprůhledné tělo by je zakrylo. Samotné `html` se obarvuje níž v bloku POZADÍ; tady zůstává jen ta půlka pravidla, na které všechno stojí: TĚLO MUSÍ BÝT PRŮHLEDNÉ. Přebíjí `body { background: var(--bg-dark) }` z core/base.css. Kdyby zmizelo, pole se ztratí bez chyby, protože body má position:relative a kreslí nad každým z-indexem -1. */ body, body.cyber-body { background: transparent; } body { color: var(--paper); font-family: var(--font-text); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; } /* ═══ POZADÍ ═══════════════════════════════════════════════════════════════ Plocha je autorský materiál, ne nepřítomnost. Tři vrstvy, všechny statické: 1) SVISLÝ DOBĚH na . Nahoře o kus světlejší než dole, takže má stránka horizont a obsah na ní stojí, místo aby plaval v ničem. 2) POLE na body::after. Tři měkké zelené tůně, umístěné tak, aby rámovaly obsahovou lištu, ne aby ležely náhodně. 3) ZRNO na html::after. Jemný šum PŘES obsah, na 3,5 % krytí. Tohle je ta vrstva, po které plocha přestane vypadat jako plochý hex a začne vypadat jako materiál. Dřív se pole sunulo přes čtyřicet vteřin (`pozadi-drift`). Pohyb odešel na výslovné rozhodnutí: pozadí má být na desktopu i mobilu, a nekonečná animace pod celou stránkou je nejdražší věc, kterou může slabý telefon dostat, aniž by za ni cokoli dostal zpátky. Statické pole vypadá stejně a nestojí nic. Zrno leží nad obsahem (z-index 90), ale pod lepivou lištou (--z-sticky 100), takže nikdy nepřekryje navigaci ani okno. `pointer-events: none` znamená, že nebere kliknutí. Je to fixed vrstva, takže se při scrollu nepřekresluje. V úsporném režimu zrno mizí: je to jediná vrstva, která stojí výkon, a je zároveň jediná, bez které plocha pořád funguje. */ /* nese jen plnou barvu. Svislý doběh se přesunul do fixní vrstvy níž: `background-attachment: fixed` iOS Safari NEctí, takže by se na telefonu doběh roztáhl přes celou výšku dokumentu a zmizel by. A pozadí má být podle zadání na desktopu i na mobilu. */ html { background: var(--bg); } body.cyber-body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Tůně nahoře, svislý doběh vespod. Obojí v jedné fixní vrstvě, takže se vykreslí stejně na desktopu i na iOS. */ background: radial-gradient(52% 38% at 50% -6%, rgba(var(--go-rgb), .050), transparent 70%), radial-gradient(38% 30% at 6% 38%, rgba(var(--go-rgb), .028), transparent 68%), radial-gradient(38% 30% at 94% 62%, rgba(var(--go-rgb), .028), transparent 68%), linear-gradient(180deg, #10130f 0%, var(--bg) 46%, #070806 100%); } /* Zrno. Jeden dlaždicovaný šum z SVG, žádný obrázek ke stažení. */ html::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* Slabé zařízení: zrno je jediná vrstva, která stojí výkon, tak jde první. */ html[data-perf="low"]::after { display: none; } /* ═══ POVRCHY, KTERÉ NEKRESLÍME MY ════════════════════════════════════════ Výběr textu, kurzor v poli, podtržení odkazu a číslice v tabulkách jedou bez zásahu na výchozím nastavení prohlížeče, které nepatří k žádnému designu. Je to nejlevnější signál, že se stránka stavěla a neposkládala. */ ::selection { background: var(--go); color: var(--go-ink); } /* Kurzor v poli má barvu akce, ne systémovou modrou. */ input, textarea, select, [contenteditable] { caret-color: var(--go); } /* Podtržení nesmí procházet dotahy písmen. */ a { text-underline-offset: .18em; text-decoration-thickness: 1px; } /* Kdekoli stojí číslice ve sloupci, musí mít stejnou šířku, jinak sloupec kmitá. Platí i pro , kde se to zapomíná nejčastěji. */ table, td, th, output, time, .jl-money, [data-num] { font-variant-numeric: tabular-nums; } /* Viditelný focus je součást podlahy kvality, ne nastavení pro fajnšmekry. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--go); outline-offset: 2px; border-radius: 4px; } /* ═══ TYPOGRAFIE ═══════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6, .jl-display { font-family: var(--font-display); letter-spacing: var(--track-tight); line-height: 1.04; color: var(--paper); text-wrap: balance; margin: 0; } h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 900; line-height: .96; } h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 900; } h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.02em; } h4 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } /* Zvýrazněné slovo v nadpisu je zelené písmo, ne podtržítko pod ním. Podtržítko dělalo z každého nadpisu druhé „tlačítko" v zelené. */ /* Zelená tu dřív dělala z každého nadpisu druhé „tlačítko" a ředila jediný význam, který zelená na webu má: klikni sem. Důraz nese váha, ne barva. */ .jl-pagehead > h1 span, .jl-section-label h2 span, h2 > span { color: inherit; background: none; border: 0; box-shadow: none; text-decoration: none; padding: 0; } .jl-pagehead > h1 span::after, .jl-section-label h2 span::after, h2 > span::after { content: none; } p { margin: 0; } /* .jl-eyebrow { odešel: oční linky nad nadpisy jsou zakázané a markup je pryč. */ /* Číslo, které nese peníze. Největší prvek v okolí, tabulkové číslice, aby sloupec částek pod sebou nekmital na různých šířkách cifer. */ .jl-money { font-family: var(--font-num); font-weight: 600; letter-spacing: -.02em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--paper); } /* Jednotka a spojka zůstávají malé a šedé, ať je částka jediná velká věc. */ .jl-money small, .jl-money em { font-style: normal; font-size: .4em; font-weight: 700; letter-spacing: 0; color: var(--paper-2); margin-left: .26em; } /* ═══ ROZVRŽENÍ ════════════════════════════════════════════════════════════ */ .jl-container { width: 100%; max-width: var(--rail-w); margin-inline: auto; padding-inline: var(--gutter); } .jl-container .jl-container { padding-inline: 0; } /* Sekce drží svislý rytmus sama; vnitřní blok se centruje přes margin, takže pravidlo funguje, ať je section flex (stará kaskáda) nebo block. */ section { padding-block: var(--sec-y); width: 100%; } /* Pás, který oddělí sekci od sousední. Vlasová linka nahoře i dole místo ostrého švu mezi dvěma skoro stejnými tmavými plochami. */ .jl-band { background: var(--band); border-block: 1px solid var(--rail); } .jl-band::before { content: none; } .jl-band + .jl-band { border-top: 0; } /* ── Hlavička sekce ──────────────────────────────────────────────────────── */ .jl-section-label { display: grid; /* nadpis | počítadlo | zbytek řádku pro odkaz vpravo */ grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px 14px; margin-bottom: 26px; } .jl-section-label > h1, .jl-section-label > h2 { grid-column: 1; grid-row: 1; margin: 0; min-width: 0; } .jl-section-label > .jl-count-pill { grid-column: 2; grid-row: 1; justify-self: start; } .jl-section-label > a, .jl-section-label > .jl-see-all { grid-column: 3; grid-row: 1; justify-self: end; } /* Popisek vždy na vlastní řádek přes celou šířku, s čitelnou mírou. */ .jl-section-label > p { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--paper-2); } /* Některé stránky balí nadpis s popiskem do

. První je titul, druhý (řazení, přepínače) patří na pravý konec řádku. */ .jl-section-label > div { grid-column: 1 / 3; grid-row: 1; min-width: 0; } .jl-section-label > div ~ div { grid-column: 3; justify-self: end; } .jl-section-label > div > p { margin: 6px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--paper-2); } .jl-count-pill { display: inline-flex; align-items: center; height: 22px; padding-inline: 10px; border-radius: var(--r-pill); background: var(--raise); font-family: var(--font-code); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--paper-2); } /* ── Záhlaví stránky ─────────────────────────────────────────────────────── */ .jl-pagehead { padding-block: clamp(34px, 5vw, 58px) 0; max-width: 880px; margin-inline: 0; text-align: left; } .jl-pagehead > h1 { margin-bottom: 16px; } .jl-pagehead > p { max-width: 56ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--paper-2); } .jl-pagehead__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; } .jl-pagehead__live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; } .jl-pagehead__livenote { font-size: 13px; color: var(--paper-3); } /* ═══ TLAČÍTKA ═════════════════════════════════════════════════════════════ */ .btn, .jl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-btn); font-family: var(--font-display); font-size: 14.5px; font-weight: 800; letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .btn:active, .jl-btn:active { transform: translateY(1px); } .btn-primary, .jl-btn-primary, .jl-btn--primary { background: var(--go); border-color: var(--go); color: var(--go-ink); box-shadow: none; } .btn-primary:hover, .jl-btn-primary:hover, .jl-btn--primary:hover { background: var(--go-hi); border-color: var(--go-hi); color: var(--go-ink); } .btn-secondary, .btn-outline, .jl-btn-secondary, .jl-btn--outline, .jl-btn--ghost { background: var(--raise); border-color: var(--rail-2); color: var(--paper); box-shadow: none; } .btn-secondary:hover, .btn-outline:hover, .jl-btn-secondary:hover, .jl-btn--outline:hover, .jl-btn--ghost:hover { background: var(--panel-hi); border-color: rgba(255, 255, 255, .26); color: var(--paper); } .btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; } .btn[disabled], .jl-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* Textový odkaz vedle CTA. Nikdy druhé barevné tlačítko. */ .jl-see-all, .acct-see-all { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); text-decoration: none; transition: color var(--t-fast); } .jl-see-all:hover, .jl-see-all:focus-visible, .acct-see-all:hover { color: var(--paper); } .jl-see-all .jl-arw, .jl-arw { transition: transform var(--t-fast); } .jl-see-all:hover .jl-arw { transform: translateX(3px); } /* ═══ ŽIVĚ ═════════════════════════════════════════════════════════════════ Jediné místo na webu s rádiusem 999 px. Offline se nikdy neschovává — divák se ptá „jede to teď?" a odpověď „ne" je taky odpověď. */ .jl-live { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-inline: 12px; border: 1px solid var(--rail-2); border-radius: var(--r-pill); background: var(--raise); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-2); text-decoration: none; white-space: nowrap; } .jl-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-3); flex: 0 0 auto; } .jl-live__txt { line-height: 1; } .jl-live.is-live { border-color: rgba(var(--live-rgb), .45); background: rgba(var(--live-rgb), .1); color: var(--live-hi); } .jl-live.is-live .jl-live__dot { background: var(--live); box-shadow: 0 0 0 4px rgba(var(--live-rgb), .18); animation: jl-pulse 1.8s ease-in-out infinite; } @keyframes jl-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--live-rgb), .18); } 50% { box-shadow: 0 0 0 8px rgba(var(--live-rgb), .04); } } @media (prefers-reduced-motion: reduce) { .jl-live.is-live .jl-live__dot { animation: none; } } .jl-live--off, .jl-live.is-offline { border-color: var(--rail); background: var(--raise); color: var(--paper-3); } .jl-live--off .jl-live__dot, .jl-live.is-offline .jl-live__dot { background: var(--paper-3); box-shadow: none; animation: none; } /* ═══ STAVOVÝ ŘÁDEK ════════════════════════════════════════════════════════ Pás pod záhlavím neukazuje marketingová čísla, ale co se děje teď: kdo vysílá, kdy je další stream, co běží za soutěž. Nad přehybem je tohle jediná informace, kvůli které se divák ze streamu vrací. */ .jl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin-top: 30px; background: var(--rail); border: 1px solid var(--rail); border-radius: var(--r-card); overflow: hidden; } .jl-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--panel); } .jl-stat__num { font-family: var(--font-num); font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--paper); } .jl-stat__num--coin { color: var(--coin); } .jl-stat__lbl { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--paper-3); } /* ── Mobil ─────────────────────────────────────────────────────────────── Tři sloupce se na úzkém displeji nevejdou a nadpis s odkazem se překrývaly. Odkaz jde pod nadpis a stavový řádek se skládá do sloupce — dvousloupcová mřížka nechávala u lichého počtu prázdné okno s viditelnou mřížkou. */ @media (max-width: 700px) { .jl-section-label { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; } .jl-section-label > a, .jl-section-label > .jl-see-all, .jl-section-label > div ~ div { grid-column: 1 / -1; grid-row: auto; justify-self: start; } .jl-stats { grid-template-columns: minmax(0, 1fr); } .jl-stat { flex-direction: row; align-items: baseline; gap: 10px; } .jl-stat__num { font-size: 24px; min-width: 46px; } } /* ═══ VISUTÝ SEZNAM ════════════════════════════════════════════════════════ Položka byla mřížka 2.6ch + 1fr, jenže

drží odkaz A volný text, což jsou dvě mřížkové položky — text spadl pod odkaz do sloupce širokého jako pořadové číslo a lámal se po jednom slovu. Číslo teď visí v odsazení a text plyne jako jeden odstavec, ať je uvnitř elementů kolik chce. */ ul.jl-hang-list, ol.jl-hang-list { display: block; max-width: 68ch; margin: 0; padding: 0; list-style: none; } .jl-hang-list > li { display: block; position: relative; padding-left: 3.4ch; font-size: 14.5px; line-height: 1.6; color: var(--paper-2); } .jl-hang-list > li + li { margin-top: 10px; } ol.jl-hang-list > li::before { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 800; color: var(--paper-3); } .jl-hang-list a { color: var(--paper); font-weight: 700; text-decoration: none; } .jl-hang-list a:hover { color: var(--go); } /* ═══ PANEL ════════════════════════════════════════════════════════════════ */ .jl-panel { background: var(--panel); border: 1px solid var(--rail); border-radius: var(--r-card); box-shadow: var(--lift); } /* ═══ PRUH 18+ NAD LIŠTOU ══════════════════════════════════════════════════ */ .jl-agebar { background: var(--head); border-bottom: 1px solid var(--rail); font-size: 12px; } .jl-agebar__in { max-width: var(--rail-w); margin-inline: auto; padding: 7px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .jl-agebar__txt { color: var(--paper-3); } .jl-agebar__law { color: var(--paper-3); white-space: nowrap; } .jl-agebar__law b { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--rail-2); border-radius: 4px; font-family: var(--font-display); font-size: 10.5px; font-weight: 800; color: var(--paper-2); } @media (max-width: 640px) { .jl-agebar__txt { display: none; } .jl-agebar__in { justify-content: center; } } /* ═══ OBSAHOVÉ BLOKY (.ed-*) ═══════════════════════════════════════════════ */ .ed-prose { max-width: var(--ed-read); margin-bottom: 26px; font-size: 16px; line-height: 1.7; color: var(--paper-2); } .ed-prose p + p { margin-top: 14px; } .ed-prose strong { color: var(--paper); font-weight: 700; } .ed-prose a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .ed-prose a:hover { color: var(--go); } /* ═══ VÝBĚR PROHLÍŽEČE ═════════════════════════════════════════════════════ */ input, select, textarea, button { font-family: inherit; } input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], textarea, select { background: var(--raise); border: 1px solid var(--rail); border-radius: var(--r-btn); color: var(--paper); font-size: 15px; } input:focus, textarea:focus, select:focus { border-color: var(--rail-2); outline: none; } ::placeholder { color: var(--paper-3); } /* Svislá lišta v barvách pultu, ne systémová bílá. */ * { scrollbar-color: #2b3237 transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--raise); border-radius: 999px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--rail-2); } /* Dva údaje vedle sebe (autor a zdroj, kanál a stav). Odděluje je vlasová linka, ne vysázená prostřední tečka: ta se na /klipy opakovala dvanáctkrát a přestala být oddělovačem, začala být výplní. */ .jl-sep > * + *::before { content: ''; display: inline-block; width: 1px; height: .8em; margin: 0 .55em -.06em; background: currentColor; opacity: .3; } /* Ikony ze sady jsou plné tvary, ne obrysy. Pravidla psaná pro dřívější ručně kreslené značky jim braly výplň a nasazovaly tah, takže by po výměně zmizely. Tohle je vrací zpátky: jeden zdroj pravdy pro všechny. */ svg.ikona { display: inline-block; flex: 0 0 auto; vertical-align: -0.15em; fill: currentColor; stroke: none; overflow: visible; } /* ── Zvýrazněné slovo v nadpisu ────────────────────────────────────────── Zelená půlka nadpisu byla na webu dvacetkrát: v každém H1 i H2, vždycky na konci. Když se jeden trik opakuje na každém nadpisu, přestane být zvýrazněním a stane se ornamentem, a hlavně bere sílu zelené tam, kde něco znamená (tlačítko, živé vysílání, částka). Zůstává na jediném místě: v nadpisu hlavní stránky. Ten jeden je celý web v jedné větě, tam ta barva něco říká. Jinde je nadpis prostě nadpis. */ h1 > span:not([class]), h2 > span:not([class]), h3 > span:not([class]), .jl-pagehead > h1 span, .jl-section-label h2 span, .idx-h2 > span:not([class]) { color: inherit; text-decoration: none; } /* Výjimka pro nadpis hlavní stránky odešla po finish review: v zorném poli vedle zelené registrace brala značkové frázi roli akce. Jména nesou důraz vahou řezu; zelená patří akci a aktivní záložce, ničemu jinému. */ .idx-hero__h > span:not([class]) { color: inherit; } /* ── Velké monitory ────────────────────────────────────────────────────── Web je psaný v px na laťku ~1440. Na 27"+ (QHD/4K) pak působí drobně, tak se celá plocha rovnoměrně přiblíží (`zoom` škáluje layout i písmo naráz) a zároveň se pustí širší obsahový rail, ať hlavní obsah plochu opravdu obsadí a nekrčí se v úzkém sloupci. Media query měří skutečné okno (zoom ho neovlivňuje), takže se obě věci ladí spolu: 1920px / zoom 1.2 → layout ~1600px, rail 1310px ≈ 85 % plochy 2560px / zoom 1.42 → layout ~1800px, rail 1420px ≈ 82 % 3840px / zoom 1.6 → layout ~2400px, rail 1560px (víc už by trhalo řádky) Firefox umí zoom od v126. */ @media (min-width: 1720px) { body { zoom: 1.2; } :root { --rail-w: 1310px; } } @media (min-width: 2100px) { body { zoom: 1.42; } :root { --rail-w: 1420px; } } @media (min-width: 3200px) { body { zoom: 1.6; } :root { --rail-w: 1560px; } }