…

pro indexy,

pro detail článku/pojmu. ============================================================ */ /* ==== 1. FONTY (self-host, assets/fonts/) ==== */ @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/cormorant-garamond-v21-latin_latin-ext-700.woff2') format('woff2')} @font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/work-sans-v24-latin_latin-ext-regular.woff2') format('woff2')} @font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/work-sans-v24-latin_latin-ext-500.woff2') format('woff2')} @font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/work-sans-v24-latin_latin-ext-600.woff2') format('woff2')} @font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/work-sans-v24-latin_latin-ext-700.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jetbrains-mono-v24-latin_latin-ext-600.woff2') format('woff2')} /* ==== 2. TOKENY TÉMAT — 4 kombinace, hodnoty 1:1 z prototypu ==== data-variant="a|b" × data-mode="light|dark" na . Odvozené tokeny (odchylky od prototypu, důvod = kontrast WCAG AA): --accent2-text textová verze --accent2. V A-light je #9c6a00 na --surface2 jen 4,42:1, proto #966500 (4,76:1). V ostatních tématech = --accent2. --on-soft barva textu na --accent-soft. V dark tématech je --on-accent (#1d1a10) na poloprůhledném žlutém podkladu ~1,5:1 (nečitelné), proto tam = --ink. POZOR: --faint nemá 4,5:1 v žádném tématu (2,6–4,8) — používat JEN na dekorativní prvky (ikona hledání, placeholder, plovoucí tvary). Běžná metadata (datum, min čtení, role autora) → --muted (≥5,5:1). */ :root{ color-scheme:light; --bg:#fffdf6;--surface:#ffffff;--surface2:#fdf8ea;--ink:#221d12;--muted:#6b6452;--faint:#a89a7f; --line:#efe6cd;--accent:#e8a900;--accent2:#9c6a00;--on-accent:#1d1a10;--accent-soft:#fff3cf; --radius:16px;--radius-sm:10px;--bw:1px;--shadow:0 26px 62px -34px rgba(120,90,10,.4);--hexo:.5;--dispw:600; --accent2-text:#966500;--on-soft:#1d1a10; } [data-variant="a"][data-mode="dark"]{ color-scheme:dark; --bg:#14120b;--surface:#1c1910;--surface2:#221d12;--ink:#f1ead6;--muted:#b6ab8d;--faint:#8a8068; --line:rgba(255,255,255,.09);--accent:#ffd23f;--accent2:#f4be1b;--on-accent:#1d1a10;--accent-soft:rgba(255,210,63,.14); --shadow:0 26px 62px -34px rgba(0,0,0,.72); --accent2-text:var(--accent2);--on-soft:var(--ink); } [data-variant="b"][data-mode="light"]{ color-scheme:light; --bg:#f3f1e8;--surface:#ffffff;--surface2:#faf8f0;--ink:#17150f;--muted:#5f5c4c;--faint:#8f8a76; --line:#e2ddcd;--accent:#f4be1b;--accent2:#17150f;--on-accent:#17150f;--accent-soft:#fdf0c4; --radius:4px;--radius-sm:3px;--bw:1.5px;--shadow:0 18px 44px -30px rgba(0,0,0,.34);--hexo:.85;--dispw:700; --accent2-text:var(--accent2);--on-soft:var(--on-accent); } [data-variant="b"][data-mode="dark"]{ color-scheme:dark; --bg:#0e0d09;--surface:#17150e;--surface2:#1e1b12;--ink:#f4f0e3;--muted:#a9a189;--faint:#7d7560; --line:rgba(255,255,255,.08);--accent:#ffd23f;--accent2:#ffe08a;--on-accent:#161309;--accent-soft:rgba(255,210,63,.12); --radius:4px;--radius-sm:3px;--bw:1.5px;--shadow:0 18px 44px -30px rgba(0,0,0,.7);--hexo:.6;--dispw:700; --accent2-text:var(--accent2);--on-soft:var(--ink); } /* Bez JS respektujeme systémové téma: statický default A-light se přemapuje na tokeny A-dark. JS si nastaví html[data-js] a přebírá řízení (localStorage), pak tento blok neplatí. */ @media (prefers-color-scheme: dark){ html:not([data-js])[data-variant="a"][data-mode="light"]{ color-scheme:dark; --bg:#14120b;--surface:#1c1910;--surface2:#221d12;--ink:#f1ead6;--muted:#b6ab8d;--faint:#8a8068; --line:rgba(255,255,255,.09);--accent:#ffd23f;--accent2:#f4be1b;--on-accent:#1d1a10;--accent-soft:rgba(255,210,63,.14); --shadow:0 26px 62px -34px rgba(0,0,0,.72); --accent2-text:var(--accent2);--on-soft:var(--ink); } } /* ==== 3. RESET A ZÁKLAD ==== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Work Sans',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .5s ease,color .5s ease;min-height:100vh;display:flex;flex-direction:column} main{flex:1;width:100%} a{color:var(--accent2-text);text-decoration:none} a:hover{color:var(--accent)} /* hover je přechodový stav; klidová barva drží AA */ ::selection{background:var(--accent);color:var(--on-accent)} img{max-width:100%} input,textarea,button{font-family:'Work Sans',sans-serif} input::placeholder{color:var(--faint)} /* placeholder = dekorativní nápověda */ button{cursor:pointer} a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent2-text);outline-offset:2px} [hidden]{display:none!important} /* Šířkové kontejnery */ .kontejner{width:100%;max-width:1180px;margin:0 auto;padding-left:30px;padding-right:30px} .kontejner--uzky{max-width:720px} /* Vertikální rytmus stránek */ .sekce{padding:56px 0} /* blok homepage */ .sekce--posledni{padding-bottom:90px} /* poslední blok před patičkou */ .stranka{padding-top:56px;padding-bottom:90px} /* indexové stránky */ .stranka--detail{padding-top:44px} /* detail článku/pojmu */ /* Mono „kicker“ nad nadpisy */ .kicker{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2-text);margin:0 0 12px} /* ==== 4. ANIMACE + REDUCED MOTION ==== */ @keyframes floatHex{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(8deg)}} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} html{scroll-behavior:auto} [data-reveal]{opacity:1!important;transform:none!important} } /* ==== 5. OVERLAY VRSTVY ==== */ /* #rain — canvas pro hex déšť (site.js), přes celý viewport, neklikatelný */ #rain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:70} /* #progress — čtecí lišta; do HTML dávat JEN na clanek-*.html / pojem-*.html */ #progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));z-index:90;opacity:0;transition:opacity .3s} /* ==== 6. HLAVIČKA / NAVIGACE ==== */ /* .hlavicka > .nav (logo | .nav-odkazy | .nav-ovladani) + .mobilni-menu */ .hlavicka{position:sticky;top:0;z-index:80;background:var(--surface);border-bottom:var(--bw) solid var(--line);backdrop-filter:saturate(1.4)} .nav{max-width:1180px;margin:0 auto;padding:0 30px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:18px} .logo{display:flex;align-items:center;gap:11px;flex-shrink:0} /* .hex — hexagonový znak loga; .hex--maly pro patičku */ .hex{display:inline-flex;align-items:center;justify-content:center;width:30px;height:34px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(140deg,var(--accent),var(--accent2))} .hex--maly{width:26px;height:30px} .logo-nazev{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:700;letter-spacing:.01em;color:var(--ink)} .nav-odkazy{display:flex;align-items:center;gap:28px} .nav-odkaz{font-size:14.5px;font-weight:500;color:var(--muted)} .nav-odkaz:hover{color:var(--ink)} .nav-odkaz[aria-current="page"],.nav-odkaz.aktivni{color:var(--accent2-text)} .nav-ovladani{display:flex;align-items:center;gap:12px;flex-shrink:0} /* Segmentový přepínač variant A/B */ .prepinac{display:flex;padding:3px;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface2)} .prepinac-btn{width:30px;height:28px;border:0;border-radius:calc(var(--radius-sm) - 1px);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;background:transparent;color:var(--muted)} .prepinac-btn.aktivni{background:var(--accent);color:var(--on-accent)} /* Čtvercové ikonové tlačítko (přepínač ☾/☀) */ .btn-ikona{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface2);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1} /* Burger (jen mobil + jen s JS) */ .burger{display:none;width:40px;height:38px;align-items:center;justify-content:center;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface2);color:var(--ink);font-size:18px} /* Mobilní menu — otevírá site.js třídou .otevrene */ .mobilni-menu{display:none;flex-direction:column;padding:8px 30px 18px;border-top:var(--bw) solid var(--line);background:var(--surface)} .mobilni-menu.otevrene{display:flex} .mobilni-menu a{padding:13px 4px;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink)} .mobilni-menu a:last-child{border-bottom:0} @media (max-width:860px){ html[data-js] .nav-odkazy{display:none} html[data-js] .burger{display:inline-flex} } /* Bez JS: ovladače tématu a burger nemají smysl → skrýt; odkazy nechat viditelné i na mobilu (zalomí se). */ html:not([data-js]) .prepinac, html:not([data-js]) .btn-ikona, html:not([data-js]) .burger{display:none} @media (max-width:860px){ html:not([data-js]) .nav{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px} html:not([data-js]) .nav-odkazy{gap:16px;flex-wrap:wrap} } /* ==== 7. TLAČÍTKA, CHIPY, TAGY ==== */ /* .btn btn--primar (gradient CTA) | .btn btn--obrys (rámeček) | .btn--maly */ .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:var(--radius-sm);font-weight:600;font-size:15px;border:0} .btn--primar{background:linear-gradient(120deg,var(--accent),var(--accent2));color:var(--on-accent);box-shadow:var(--shadow)} .btn--primar:hover{color:var(--on-accent);filter:brightness(1.05)} /* Ve variantě B je --accent2 téměř černá = barva textu → tmavá půlka gradientu dělá text nečitelným (validace: až 1:1). Plná žlutá plocha drží --on-accent ≥10:1. Platí pro B-light i B-dark. */ [data-variant="b"] .btn--primar{background:var(--accent)} /* .panel-cta — odstup CTA odstavce pod panelem (sjednocuje index.html i clanky.html; dřív jen inline na jednom místě) */ .panel-cta{margin:24px 0 0} .btn--obrys{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line)} .btn--obrys:hover{color:var(--ink);border-color:var(--accent)} .btn--maly{padding:11px 22px;font-size:14px} /* .chipy — flex kontejner chipů; modifikátory hustoty */ .chipy{display:flex;flex-wrap:wrap;gap:10px} .chipy--tesne{gap:9px} .chipy--pismena{gap:7px} /* .chip — pilulka pojmu/odkazu (a i button). .chip--maly v boxech článku. */ .chip{display:inline-flex;align-items:center;background:var(--surface);border:var(--bw) solid var(--line);border-radius:100px;padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3} .chip:hover{color:var(--ink);border-color:var(--accent)} .chip--maly{padding:7px 14px;font-size:13px} /* .chip--filtr — filtrační chip (štítky článků); aktivní stav plný accent */ .chip--filtr{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.03em;padding:8px 15px;color:var(--muted)} /* .chip--pismeno — písmenový chip glosáře (hranatější, užší) */ .chip--pismeno{min-width:34px;justify-content:center;padding:7px 12px;border-radius:var(--radius-sm);font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted)} .chip--filtr.aktivni,.chip--pismeno.aktivni{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600} /* .tag-pill — štítek kategorie na kartě/detailu článku */ .tag-pill{display:inline-flex;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-soft);background:var(--accent-soft);border:1px solid var(--accent);padding:3px 9px;border-radius:100px} .tag-pill--vetsi{font-size:11px;padding:4px 11px} /* .mono-odkaz — drobný monospace odkaz (Všechny články →, LinkedIn ↗ …) */ .mono-odkaz{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent2-text)} .mono-odkaz--mensi{font-size:12.5px} /* ==== 8. HERO (homepage) ==== */ /* .hero > 3× .hero-hex (dekor) + .hero-obsah (kicker, h1.hero-titul, p.hero-perex, .hero-cta s .btn) */ .hero{position:relative;overflow:hidden;border-bottom:var(--bw) solid var(--line)} .hero-hex{position:absolute;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:floatHex 12s ease-in-out infinite} .hero-hex--1{left:6%;top:22%;width:120px;height:138px;background:linear-gradient(140deg,var(--accent),var(--accent2));opacity:calc(var(--hexo)*.5)} .hero-hex--2{right:9%;bottom:14%;width:88px;height:101px;background:var(--accent-soft);opacity:calc(var(--hexo)*.8);animation-duration:15s;animation-direction:reverse} .hero-hex--3{right:26%;top:20%;width:52px;height:60px;background:var(--accent);opacity:calc(var(--hexo)*.35);animation-duration:18s} .hero-obsah{position:relative;max-width:1180px;margin:0 auto;padding:96px 30px 88px;text-align:center} .hero-obsah .kicker{margin-bottom:22px} .hero-titul{font-family:'Cormorant Garamond',serif;font-weight:var(--dispw);font-size:clamp(40px,6.5vw,64px);line-height:1.03;letter-spacing:-.015em;margin:0 auto 24px;max-width:900px;color:var(--ink);text-wrap:balance} .hero-perex{font-size:19px;line-height:1.6;color:var(--muted);max-width:640px;margin:0 auto 38px} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media (max-width:640px){ .hero-obsah{padding:64px 30px 60px} /* velké plovoucí hexagony na úzkém displeji zmenšit, ať nezasahují text */ .hero-hex--1{width:76px;height:87px} .hero-hex--2{width:56px;height:64px} .hero-hex--3{display:none} } /* ==== 9. HLAVY SEKCÍ A NADPISY ==== */ /* .sekce-hlava (kicker+h2 vlevo, .mono-odkaz vpravo) */ .sekce-hlava{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap} .sekce-hlava .kicker{font-size:12px;letter-spacing:.18em;margin-bottom:10px} .sekce-titul{font-family:'Cormorant Garamond',serif;font-weight:var(--dispw);font-size:clamp(30px,4.5vw,38px);margin:0;color:var(--ink)} .sekce-titul--mensi{font-size:clamp(27px,4vw,34px)} /* H1 indexových stránek (Všechny články, Glosář) + perex pod ním */ .stranka-titul{font-family:'Cormorant Garamond',serif;font-weight:var(--dispw);font-size:clamp(36px,6vw,48px);margin:0 0 12px;color:var(--ink)} .stranka-perex{font-size:17px;color:var(--muted);max-width:600px;margin:0 0 28px} /* ==== 10. KARTY ČLÁNKŮ (mřížka 3 — homepage featured) ==== */ /* .mrizka-3 > a.karta-clanku > .karta-pruh + .karta-obsah (.karta-meta: .tag-pill + .karta-cas | h3.karta-titul | p.karta-dek | .karta-datum) */ .mrizka-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:980px){.mrizka-3{grid-template-columns:1fr 1fr}} @media (max-width:660px){.mrizka-3{grid-template-columns:1fr}} .karta-clanku{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);color:inherit} .karta-clanku:hover{color:inherit;border-color:var(--accent)} .karta-clanku:hover .karta-titul{color:var(--accent2-text)} .karta-pruh{height:6px;background:linear-gradient(90deg,var(--accent),var(--accent2))} .karta-obsah{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1} .karta-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px} .karta-cas{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ .karta-titul{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25px;line-height:1.14;margin:0 0 12px;color:var(--ink)} .karta-dek{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 18px;flex:1} .karta-datum{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ /* ==== 11. PANEL, MANIFEST, PILÍŘE ==== */ /* .panel — zvýrazněný blok na surface2 (manifest, glosář teaser, eseje teaser) */ .panel{background:var(--surface2);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:44px 40px} @media (max-width:640px){.panel{padding:30px 22px}} .panel .sekce-hlava{margin-bottom:26px} /* Manifest — nedotknutelný text Otakara, jen nový obal */ .manifest-perex{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;line-height:1.5;color:var(--muted);margin:0 0 24px;max-width:760px} .manifest-odstavec{font-size:18px;line-height:1.75;color:var(--ink);margin:0 0 18px;max-width:760px} .manifest-odstavec:last-child{margin-bottom:0} .manifest-odstavec strong{color:var(--ink)} /* Pilíře — 6 karet „Kde tu metodu potkáte“ */ .pilire-mrizka{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:980px){.pilire-mrizka{grid-template-columns:1fr 1fr}} @media (max-width:660px){.pilire-mrizka{grid-template-columns:1fr}} .pil-karta{display:block;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:22px 24px;color:inherit} .pil-karta:hover{color:inherit;border-color:var(--accent)} .pil-karta:hover .pil-titul{color:var(--accent2-text)} .pil-titul{display:block;font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:var(--ink);margin-bottom:6px} .pil-popis{display:block;font-size:14.5px;line-height:1.55;color:var(--muted)} /* ==== 12. SEZNAM ČLÁNKŮ (clanky.html) + VYHLEDÁVÁNÍ/FILTR ==== */ /* Hledání: .hledani > span.hledani-ikona + input.hledani-pole (input dostane data-filter-input). .hledani--radek roztahuje v řádku. */ .hledani{position:relative;min-width:240px;max-width:420px;margin-bottom:22px} .hledani--radek{flex:1;max-width:none} .hledani-ikona{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:15px;pointer-events:none} /* dekor */ .hledani-pole{width:100%;padding:13px 16px 13px 40px;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:15px;outline:none} .hledani-pole:focus{border-color:var(--accent)} /* Filtrační lišta chipů nad seznamem */ .filtr-chipy{margin-bottom:34px} /* Seznam: .seznam-clanku > a.radek-clanku > .radek-cislo + div (.radek-meta: .radek-tag + .radek-info | h3/h2.radek-titul | p.radek-dek) + span.radek-sipka */ .seznam-clanku{display:flex;flex-direction:column;border-top:var(--bw) solid var(--line)} .radek-clanku{display:grid;grid-template-columns:88px 1fr auto;gap:26px;align-items:center;padding:26px 8px;border-bottom:var(--bw) solid var(--line);color:inherit} .radek-clanku:hover{color:inherit} .radek-clanku:hover .radek-titul{color:var(--accent2-text)} .radek-cislo{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;color:var(--accent2);line-height:1} /* dekorativní číslování; --accent2 sjednoceno se .skupina-pismeno */ .radek-meta{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap} .radek-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2-text)} .radek-info{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ .radek-titul{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:27px;line-height:1.12;margin:0 0 7px;color:var(--ink)} .radek-dek{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;max-width:640px} .radek-sipka{font-size:22px;color:var(--accent2-text)} @media (max-width:640px){ .radek-clanku{grid-template-columns:1fr;gap:8px} .radek-cislo{font-size:28px} .radek-sipka{display:none} } /* Prázdný výsledek filtru — v HTML s atributy data-filter-empty hidden */ .filtr-prazdno{padding:60px 20px;text-align:center;color:var(--muted);font-size:16px} /* ==== 13. DETAIL ČLÁNKU (clanek-*.html) ==== */ /* Pořadí: a.zpet → .detail-meta (.tag-pill--vetsi + .detail-info) → h1.detail-titul → p.detail-perex → .autor-box → .telo → .box-akcent (Pojmy v článku / D14 box) → .detail-pata */ .zpet{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent2-text)} .detail-meta{display:flex;align-items:center;gap:12px;margin:26px 0 16px;flex-wrap:wrap} .detail-info{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ .detail-titul{font-family:'Cormorant Garamond',serif;font-weight:var(--dispw);font-size:clamp(34px,6vw,46px);line-height:1.08;letter-spacing:-.01em;margin:0 0 20px;color:var(--ink);text-wrap:balance} .detail-perex{font-size:20px;line-height:1.55;color:var(--muted);font-family:'Cormorant Garamond',serif;font-style:italic;margin:0 0 30px} /* Autor box */ .autor-box{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line);margin-bottom:34px} .autor-foto{width:42px;height:42px;border-radius:100px;object-fit:cover;border:var(--bw) solid var(--line)} .autor-jmeno{font-size:14px;font-weight:600;color:var(--ink)} .autor-role{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ /* Tělo článku/eseje — odstavce, mezititulky, seznamy, citace */ .telo{font-size:17.5px;line-height:1.75;color:var(--ink)} .telo p{margin:0 0 22px} .telo h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;line-height:1.2;margin:38px 0 14px;color:var(--ink)} .telo h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;margin:30px 0 10px;color:var(--ink)} .telo ul,.telo ol{margin:0 0 22px;padding-left:26px} .telo li{margin-bottom:8px} .telo blockquote{margin:0 0 22px;padding:4px 0 4px 22px;border-left:3px solid var(--accent);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:var(--muted)} .telo a{text-decoration:underline;text-underline-offset:3px} /* .box-akcent — boxy pod článkem (Pojmy v článku, D14 deník/kalkulačky) */ .box-akcent{margin-top:20px;padding:22px 26px;background:var(--surface2);border-left:3px solid var(--accent);border-radius:var(--radius-sm)} .box-titulek{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2-text);margin:0 0 12px} .box-akcent p{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 12px} .box-akcent p:last-child{margin-bottom:0} /* Patka detailu (LinkedIn odkaz vlevo, další článek vpravo) */ .detail-pata{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ==== 14. GLOSÁŘ (glosar.html) ==== */ /* Skupina: .glosar-skupina[data-filter-group] > .skupina-hlava (span.skupina-pismeno + span.skupina-linka) + .glosar-mrizka > a.pojem-karta (.pojem-karta-titul + .pojem-karta-popis) */ .glosar-skupina{margin-bottom:14px} .skupina-hlava{display:flex;align-items:center;gap:16px;margin-bottom:14px} .skupina-pismeno{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;color:var(--accent2)} /* prototyp --accent nemá ani 3:1 pro velký text v light → --accent2 */ .skupina-linka{flex:1;height:var(--bw);background:var(--line)} .glosar-mrizka{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:30px} @media (max-width:700px){.glosar-mrizka{grid-template-columns:1fr}} .pojem-karta{display:block;text-align:left;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:20px 22px;color:inherit} .pojem-karta:hover{color:inherit;border-color:var(--accent)} /* .pojem-karta--neaktivni — neklikatelná varianta (série „připravuje se“ na eseje.html): žádný hover afordance, tlumený text */ .pojem-karta--neaktivni{opacity:.62} .pojem-karta--neaktivni:hover{border-color:var(--line)} .pojem-karta-titul{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--ink);margin:0 0 6px} .pojem-karta-popis{font-size:14px;line-height:1.5;color:var(--muted);margin:0} /* ==== 15. DETAIL POJMU (pojem-*.html) ==== */ /* Pořadí: a.zpet → p.kicker (Pojem) → h1.detail-titul → p.pojem-vyklad → .box-kostka → .viz-take → .zmineno */ .pojem-vyklad{font-size:19px;line-height:1.7;color:var(--ink);margin:0 0 20px} /* Box „V kostce“ */ .box-kostka{padding:20px 24px;background:var(--accent-soft);border:var(--bw) solid var(--accent);border-radius:var(--radius);margin:26px 0 34px} .kostka-titulek{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-soft);margin:0 0 8px} .kostka-text{font-size:16px;line-height:1.55;color:var(--on-soft);font-weight:500;margin:0} /* Mezititulek malých sekcí (Viz také, Zmíněno v článcích) */ .mikro-titulek{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px} /* prototyp --faint → --muted (kontrast) */ .viz-take{margin-bottom:30px} .zmineno{padding-top:24px;border-top:var(--bw) solid var(--line)} .zmineno-karta{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:10px;color:inherit} .zmineno-karta:hover{color:inherit;border-color:var(--accent)} .zmineno-titul{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--ink)} .zmineno-sipka{font-size:18px;color:var(--accent2-text)} /* ==== 16. ESEJE (eseje.html, esej-*.html) ==== */ /* Tělo eseje = .telo (sekce 13). Serie box: aside.serie-box (karta s --accent-soft) — titulek .kostka-titulek, odkazy podtržené. */ .serie-box{padding:22px 26px;background:var(--accent-soft);border:var(--bw) solid var(--accent);border-radius:var(--radius);margin:34px 0} .serie-box p{font-size:15px;line-height:1.6;color:var(--on-soft);margin:0 0 10px} .serie-box p:last-child{margin-bottom:0} .serie-box a{color:var(--on-soft);text-decoration:underline;text-underline-offset:3px} .serie-box a:hover{color:var(--on-soft)} /* Meta řádek eseje (datum · LinkedIn odkaz) */ .esej-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin:0 0 30px} /* ==== 17. PATIČKA ==== */ /* footer.paticka > .paticka-vnitrek > .paticka-brand (.hex--maly + .paticka-nazev/.paticka-podtitul) + .paticka-odkazy (+ .paticka-copy) */ .paticka{border-top:var(--bw) solid var(--line);background:var(--surface2)} .paticka-vnitrek{max-width:1180px;margin:0 auto;padding:44px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .paticka-brand{display:flex;align-items:center;gap:11px} .paticka-nazev{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:var(--ink)} .paticka-podtitul{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ .paticka-odkazy{display:flex;gap:22px;align-items:center;flex-wrap:wrap} .paticka-odkazy a{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted)} .paticka-odkazy a:hover{color:var(--accent2-text)} .paticka-copy{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)} /* prototyp --faint → --muted (kontrast) */ /* ==== 18. REVEAL ON SCROLL ==== */ /* Prvky s data-reveal se objeví při scrollu (site.js přidá .je-videt). Bez JS (html bez data-js) je vše viditelné hned. */ html[data-js] [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} html[data-js] [data-reveal].je-videt{opacity:1;transform:none} /* ==== 19. VIZUÁLNĚ SKRYTÉ (jen pro odečítače) ==== */ /* Přístupný text neviditelný v layoutu; drží aria-live status filtru. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}