/* ═══════════════════════════════════════════════════════════════════ SEKCE 01 — KAREL A JEHO PRÁCE V JEDNÉ KARTĚ. Prefix kai-. Příkaz č. 169, přestavba levé půlky příkaz č. 173. Jiří 25. 8., ve třech krocích: „co kdybychom sloučili hned pod titulek tyto dvě informace" „takové to levitující logo a jeho představení SPOLU S TÍM, jak umí hledat" „musí to být menší, zkrať to a postav celé nové a pěkné" PROČ TO VZNIKLO: sekce 01 tvrdila „AI máme v jádře od roku 2024" a pak mluvila o Karlu Čapkovi. Mezi tvrzením a jménem nebylo NIC, co by se dalo vidět — 410 px čistého tvrzení. Ukázka sémantického hledání přitom existovala, jen ležela o osm set pixelů výš ve výkladní skříni, kde soutěžila se sourcingem z LinkedInu. CO JE TO ZA TVAR: jedna karta, dva sloupce, mezi nimi vlasová linka. Vlevo kdo Karel je, vpravo co dělá. Kdo to je a co umí je JEDNA informace, ne dvě — proto jeden rám, ne dva bloky. ═══════════════════════════════════════════════════════════════════ */ .kai-karta { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: start; /* Dolní mezera JE ZDE SCHVÁLNĚ — viz komentář „ODSTUP OD DLAŽDIC" na konci souboru. Bez ní je 0 px. */ margin: 30px 0 76px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg, 24px); /* Stín podle příkazu č. 167 — jeden dosah pro všechny karty ve skříni i tady, ať se mezery mezi bloky čtou stejně. */ box-shadow: 0 2px 4px rgba(15, 23, 42, .03), 0 8px 22px -10px rgba(15, 23, 42, .14); overflow: hidden; } .kai-kdo, .kai-umi { min-width: 0; padding: 34px 36px; } /* Dělí je linka, ne mezera. Mezera by z jedné karty udělala dvě. */ .kai-umi { border-left: 1px solid var(--line); } /* ── Vlevo: kdo to je ───────────────────────────────────────────── JEDNA LEVÁ HRANA. Předtím měla levá půlka tři: panáček na 157, nadpis vedle něj na 287 (.guide je flex řádek s mezerou 26 px) a odstavec zase na 157. Změřeno při 1440 px. Oko to nečte jako sloupec, ale jako tři kusy poskládané vedle sebe — přesně to, co Jiří 25. 8. popsal slovy „špatně sestavené". Panáček je proto NAD jménem, ne vedle něj. Tím se zároveň srovnaly výšky obou půlek (levá 258 px proti pravé 341 → pod odstavcem zbývalo 83 px mrtvého místa) a levá půlka dostala TÝŽ SLED jako pravá: nadřádek → nadpis → text. Dvě půlky jedné karty se teď čtou stejným způsobem, jen říkají jinou věc. */ .kai-kdo { display: grid; justify-items: start; } /* .guide je jinde na webu vodorovná dvojice panáček + nadpis. Tady nese jen panáčka, takže z flexu zbývá jediné dítě — a řádek by při zúžení jinak roztáhl mezeru pod ním. */ .kai-kdo .guide { display: block; margin: 12px 0 22px; } /* Obě čísla drží ANIMACE, ne obrázek: dole — pulzující kruhy .guide-fig::before mají bottom −6 px a nafukují se na 1,15, takže končí ~13 px pod rámečkem; nahoře — .guide-fig img se vznáší o 7 px vzhůru a nese kolem sebe 12px modrou záři. Kdyby tam bylo jen 8 px, panáček by v horní úvrati zavadil o nadřádek. Na statickém snímku to není vidět — proto je to spočítané z klíčových snímků, ne odkoukané. 96 místo 104 px: o ten kus, který si vzal vzduch na animaci, se zmenšil obraz, aby levá půlka zůstala stejně vysoká jako pravá. */ .kai-kdo .guide-fig { width: 96px; height: 96px; } .kai-kdo .skrin-nadradek { margin: 0 0 8px; } /* Menší než na plné šířce — karta má být kompaktní, ne monumentální. A o kousek menší než dřív (32 → 30 px): vpravo stojí otázka na 27 px a dva nadpisy skoro stejné velikosti vedle sebe soutěží. */ .kai-jmeno { margin: 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; } .kai-text { margin: 14px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--body); } /* ── Vpravo: co dělá ──────────────────────────────────────────── */ /* Otázka byla ve skříni clamp(24,3.9vw,44) a měla max-width 21ch — komentář u ní v site.css říká proč: vykukovala nad přehybem a měla zůstat NEDOČTENÁ (příkaz č. 74). Tady nevykukuje, je vidět celá, takže ten důvod zmizel. Menší velikost je tu správně: v kartě je to ukázka dotazu, ne nadpis sekce. */ .kai-otazka { margin: 8px 0 6px; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.14; letter-spacing: -.02em; font-weight: 780; color: var(--text); text-wrap: balance; } .kai-podotazka { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--body); } /* Výsledky pod sebou — v poloviční kartě se dvě pilulky vedle sebe nevejdou čitelně a pod sebou se navíc čtou jako VÝSLEDKY HLEDÁNÍ, což je přesnější než dvojice dlaždic. */ .kai-umi .skrin-nalezeni { margin: 18px 0 0; flex-direction: column; align-items: stretch; gap: 8px; } .kai-ilu { margin: 12px 0 0; font-size: 11px; color: var(--muted); } /* ── ODSTUP OD DLAŽDIC POD KARTOU ─────────────────────────────────── PRAVIDLO 6 POTŘETÍ. .kai-karta je vlastní prefix, takže vypadla ze všech sousedských selektorů rytmu — a mezera mezi kartou a mřížkou tří dlaždic byla PŘESNĚ 0 px. Změřeno: karta končí na 5946, .grid začíná na 5946. Mezeru mezi nadpisem a kartou nese .section-head { margin-bottom: 48px }. Pod kartou ji nenese nic — .grid nemá horní okraj. PROČ 76 A NE 48: nad kartou se vzduch počítá od PÍSMA, pod kartou od STÍNU. Nahoře je to text — poslední natištěný pixel citátu leží výš, než kam sahá jeho rámeček. Dole je to karta a ta vytéká stínem. NEODHADNUTO, ZMĚŘENO. Snímek sekce, sloupec x = 400 px, každý řádek porovnaný s pozadím ve stejné výšce mimo obsah: poslední pixel citátu 5544 karta začíná 5603 → 59 px poslední pixel stínu 5964 dlaždice 6024 → 60 px Se 48 px v CSS bylo dole 48 px, ale opticky jen 32 — o polovinu méně, než je vidět nahoře. Příkaz č. 167 bod 4b je totéž pravidlo, jen o patro výš. */ /* ── Zlom ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { .kai-karta { grid-template-columns: 1fr; margin-bottom: 44px; } .kai-kdo, .kai-umi { padding: 26px 24px; } /* Pod sebou dělí sloupce vodorovná linka, ne svislá. */ .kai-umi { border-left: 0; border-top: 1px solid var(--line); } } /* ═══════════════════════════════════════════════════════════════════ SEKCE 01 JE PRVNÍ. PŘÍKAZ Č. 175. ─────────────────────────────────────────────────────────────────── Jiří 25. 8.: „co dát tohle hned pod titulku? a pak výstavní skříň?" Sekce se jmenovala 01 a čtenář ji potkával jako šestou — až za 3 901 px výkladní skříně. Číslo na stránce něco slibuje. PŘESUN NENÍ JEN VÝMĚNA POŘADÍ. Vstup do stránky nese kus vzhledu, který nepatří skříni, ale MÍSTU: bílá plocha s oblými horními rohy překrývá spodních 100 px tmavého úvodu a vrhá na něj stín, takže se čte jako list položený nad plochou. K téže hraně se kotví fialová záře v úvodu (site.css: `bottom: var(--prekryv-uvodu)`, „karta překrývá spodních 100 px"). Kdyby se sekce 01 jen vsunula nad skříň, stane se dvojí: · mezi tmavým úvodem a světlým pásem vznikne tvrdá vodorovná hrana, kterou tahle stránka nikdy neměla, · a skříň by pak překrývala JI, tedy ukusovala 100 px z dlaždic. Vstupní úpravu proto přebírá sekce 01 a skříň ji odkládá. Hodnoty jsou převzaté ze .skrin doslova — týž překryv, týž poloměr, týž stín — aby hrana zůstala přesně tam, kam míří záře v úvodu. JEDEN ROZDÍL: podklad zůstává lila (#FAF5FF → --bg), nemění se na bílou. Karta Karla je bílá; na bílém podkladu by zmizela. Lila plocha nad tmavým úvodem funguje stejně — je to o dva odstíny jinam, ne o jiný princip. */ #kai { position: relative; z-index: 10; margin-top: calc(-1 * var(--prekryv-uvodu)); border-radius: 40px 40px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6), 0 -40px 120px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .9); } /* Skříň jde teď po sekci 01, tedy uvnitř stránky, ne na jejím prahu. Odkládá překryv, oblouk i stín — všechno tři jsou nástroje na jednu jedinou hranu, a ta je o patro výš. Zůstává bílý podklad, kterým se odlišuje od lila pásu nad sebou. */ #kai + .skrin { margin-top: 0; border-radius: 0; box-shadow: none; z-index: auto; } @media (max-width: 760px) { /* Překryv se NEPÍŠE ZNOVU. Token --prekryv-uvodu se pod 760 px sám přepne na 84 px (site.css, č. 176) a margin-top výš z něj počítá. Napsat sem -84px podruhé je přesně ta chyba, kterou č. 176 opravuje: .skrin to tak měla a záře v úvodu kvůli tomu končila 16 px nad hranou. */ #kai { border-radius: 20px 20px 0 0; } #kai + .skrin { margin-top: 0; border-radius: 0; } } /* ── A TÍM SE RUŠÍ JEDNA ⏳ DOČASNÁ ZNAČKA ────────────────────────── site.css:40 nese od 14. 8.: „⏳ DOČASNÉ (č. 45) — ZRUŠIT, AŽ PŘIJDE OBSAH… od nadpisu doprava zůstává přes 800 px prázdna — oko to čte jako chybějící kus stránky… Až druhý sloupec vznikne, tohle pravidlo smazat a nechat .section-head vrátit se doleva." Druhý sloupec právě vznikl a to prázdno je zaplněné tím, co do něj patří nejvíc — ukázkou, jak ta AI pracuje. Bez tohohle měla sekce TŘI RŮZNÉ LEVÉ HRANY: citát na 360 px, karta a dlaždice na 120. RUŠÍ SE TO JEN PRO SEKCI 01. Totéž pravidlo drží i #agentury, kde obsah pod nadpisem zatím není a vystředění tam dál dává smysl — proto se site.css nemění. */ #kai > .container > .section-head { margin-inline: 0; }