/* ====================================================================== ZÁSAH UX 23. 8. — DŮKAZ V PRAXI + LEVÝ SLOUPEC BEZ RÁMEČKU Navazuje na č. 140 (prohlidka.css) a nepřepisuje ho: prohlídka je „jeden klik = celá obrazovka", tohle je vrstva pod produktovou kartou, která ukazuje, že za kresbou stojí skutečný systém. Prefixy .dukaz- a .holy- byly před psaním ověřeny grepem jako volné v site.css i prohlidka.css. Nepoužívat obecná jména (.karta, .plocha), ta už v site.css obsazená jsou. ====================================================================== */ /* ── PRVNÍ OBRAZOVKA KONČÍ ŘÁDKEM „Ilustrace rozhraní" (Jiří 23. 8.) ─── Zadání: co je pod tím řádkem, se už musí rolovat. Pořadí výloh to neřeší — ať je první WhatsApp nebo Microsoft, začíná pořád na stejném místě. Rozhoduje odstup pod tím řádkem, nic jiného. Odkud je 896: změřená spodní hrana toho řádku od začátku stránky (hero 0–699, otázka s kartami do 896) na šířce 1200 px a víc. Odečtením od výšky okna vyjde přesně tolik místa, aby další blok začal až za ohybem. Clamp drží krajní případy: na nízkém okně nespadne pod 24 px, na velmi vysokém nenaroste přes 470 a nevznikne prázdná stránka. Strop 470 vychází z okna vysokého 1366 px — nad ním už další blok vykoukne a to je v pořádku, Jiří to u velkých monitorů výslovně bere. Číslo je měřené, ne odvozené — hero roste s ŠÍŘKOU okna (clamp s vw), takže při zásahu do hera nebo do bloku s otázkou je potřeba přeměřit. Kdyby se rozešlo, projeví se to jen velikostí mezery, nic se nerozbije. Jen od 900 px: na užším okně je ohyb jinde a 300 px prázdna na mobilu by byla vada, ne prémiovost. */ @media (min-width: 900px) { .skrin-ilustrace { margin-bottom: clamp(24px, calc(100dvh - 896px), 470px); } } /* ── 40/60 ──────────────────────────────────────────────────────────── Modifikátor, ne přepis .duo — druhý blok (.duo-siroke, Microsoft) má jeden sloupec a nesmí se tímhle hnout. */ .duo-40-60 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); } @media (max-width: 900px) { .duo-40-60 { grid-template-columns: 1fr; } } /* Sloupec končí obsahem a NEDOTAHUJE se na výšku pravé karty. Zkoušel jsem to (23. 8.): bloky se daly rozprostřít přes zbylou výšku a čísla seděla na pixel, jenže rozestup vyskočil na ~150 px a ze čtyř bloků byly čtyři nesouvisející ostrovy. Rozestup má hodnotu, kterou unese oko, ne kterou vyžaduje tabulka — zbytek výšky nese světlé pozadí a nevadí. height: auto musí být, .duo > .spot v prohlidka.css nastavuje 100 %. */ .duo-40-60 > .spot { align-content: start; align-self: start; height: auto; } /* ── levý sloupec: výčet bez rámečku ────────────────────────────────── Tmavý panel je sám o sobě karta. Rámeček uvnitř dělal kartu v kartě, a tím se ztratilo, co je nadpis a co doplněk. */ .holy { margin-top: 30px; } .holy-vycet { list-style: none; margin: 0; padding: 0; } /* Sedm bloků, těsný rytmus. Výšku levého sloupce nese obsah, ne vzduch — po doplnění o tři argumenty (23. 8.) není co roztahovat. Mezera musí zůstat menší než výška bloku, jinak se ze seznamu zase stanou izolované ostrovy. */ .holy-vycet li + li { margin-top: 24px; } /* Blok = fajfka vlevo, mininadpis a věta pod ním. Ikona jde absolutně, ne flexem: flex na
  • by z a udělal dvě položky vedle sebe a gap by je roztrhl. Odsazení textu drží padding-left, takže druhý řádek věty lícuje s prvním, ne s ikonou. Rozestup mezi bloky je záměrně velký — o ten objem v návrhu jde. */ /* Vlasová linka nad blokem (kromě prvního). Bez ní se při rozestupu, který vyjde z dorovnání výšky (klidně 150 px), čtyři bloky rozpadnou na čtyři nesouvisející ostrovy. S linkou je z toho řádkový přehled a mezera čte jako struktura, ne jako díra. Linka jde přes celou šířku, tedy i pod ikonu — proto záporný levý okraj o hodnotu padding-left. */ .holy-vycet li { position: relative; padding-left: 38px; } /* ŽÁDNÉ DĚLICÍ LINKY. Byly tu krátce (23. 8.), aby udržely pohromadě bloky rozhozené stopadesátipixelovými mezerami. Mezery jsou pryč, a s nimi i důvod pro linky — sedm bloků v těsném rytmu drží jako jeden celek samo. Nevracet je bez toho, aby se rozestup zase zvětšil. */ .holy-vycet b { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--text); letter-spacing: -.01em; } .holy-vycet span { display: block; font-size: 14.5px; line-height: 1.68; color: var(--body); } .holy-ik { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(167, 139, 250, .16); color: #C4B5FD; } .holy-ik svg { width: 15px; height: 15px; } /* ── levý sloupec bez černé ohrádky (zásah UX 23. 8., druhé kolo) ───── .spot je jinde na webu tmavá karta a zůstává jí. Tady ne: obsah má ležet přímo na světlém podkladu výkladní skříně, aby dýchal. Ruší se proto podklad, rámec, vnitřní okraj i fialová záře — a s nimi VŠECHNY barvy textu, které se na černou vázaly. Světle šedý text na bílé je nečitelný, tohle není kosmetika. POZOR při dalších úpravách: jakmile do panelu přibude prvek počítaný pro tmavé pozadí (odznak, pilulka, světlá barva), musí dostat svoji světlou variantu i sem. */ .duo-40-60 > .spot-nahy { background: none; border: 0; box-shadow: none; overflow: visible; padding: 6px 8px 0 0; } .duo-40-60 > .spot-nahy::after { content: none; } /* fialová záře patřila ke kartě */ .spot-nahy .h2 { color: var(--text); } .spot-nahy p { color: var(--body); } .spot-nahy .holy-doveta { color: #6D28D9; font-weight: 600; } /* Pilulky byly bílé průsvitné na černé — na světle by z nich zbyl obrys. */ .spot-nahy .tagstrip span { background: rgba(124, 58, 237, .07); border-color: rgba(124, 58, 237, .20); color: #5B21B6; } /* Fajfka na světlém podkladu potřebuje sytější fialovou než na černé. */ .spot-nahy .holy-ik { background: rgba(124, 58, 237, .10); color: #7C3AED; } @media (max-width: 900px) { .duo-40-60 > .spot-nahy { padding: 0; } } /* ── zakončení sloupce a odstup od další sekce ───────────────────────── Pravá karta má vlastní spodní hranu — řádek „Otevřít skutečnou obrazovku" ji zavírá. Levý sloupec žádnou nemá, je to holý text na pozadí, takže poslední věta dosud narazila rovnou do karty Microsoftu pod sebou (.duo + .duo mělo 18 px). Zavírá ho proto prostor. Odstup patří MEZI ŘÁDKY, ne pod sloupec: kdyby ho nesl jen levý, pravá karta by zůstala nalepená na Microsoftu a řádky by se rozešly. */ /* Platí MEZI VŠEMI výlohami, ne jen za jednou konkrétní. Původně to viselo na .duo-40-60 + .duo; po přeskládání pořadí (Microsoft napřed) sedělo pravidlo na místě, kde už žádný přechod nebyl, a zbylé dva zůstaly na zděděných 18 px. Selektor proto míří na sousedství uvnitř skříně, ať přežije i příští přeskládání. */ /* 72 px: všechny tři končí KARTOU a ta vytéká ~15 px stínem. Čistého bíla tak zbude stejně jako po buňce, která končí textem a má 40 px. Příkaz č. 167 bod 4b. */ .skrin .duo + .duo, .skrin .duo + .vyloha, .skrin .vyloha + .duo { margin-top: 72px; } .duo-40-60 > .spot-nahy { padding-bottom: 4px; } @media (max-width: 900px) { .skrin .duo + .duo, .skrin .duo + .vyloha, .skrin .vyloha + .duo { margin-top: 44px; } } /* ── zóna důkazu ──────────────────────────────────────────────────── */ .dukaz { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(15, 23, 42, .08); } .dukaz-hlava { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .dukaz-stitek { font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #047857; } .dukaz-hlava p { margin: 0; font-size: 12px; color: var(--muted); } /* Plocha je tlačítko, ale nesmí vypadat jako tlačítko — proto se z ní shazuje všechno, co si prohlížeč u