/* pokorni.cz — jeden styl, tři linie (brand kniha §2–4). body.linie-neutral rozcestník: bílá, inkoust, šedá, Inter body.linie-itispm /vlastimil/: oranžová iTiSPM, Open Sans body.linie-poky /veronika/: krém + inkoust + zelená POKY, Inter + Playfair Žádný JS, žádný build. */ :root { --sirka: 64rem; --podklad: #FFFFFF; --podklad2: #F7F7F7; --inkoust: #1A1A1A; --text: #2A2A2A; --tlumene: #686868; --linka: #E6E6E6; --akcent: #1A1A1A; /* plochy, velké nadpisy */ --akcent-hover: #4C4C4C; --odkaz: #1A1A1A; /* text odkazů (kontrast AA) */ --pismo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pismo-nadpis: "Inter", system-ui, sans-serif; --vaha-nadpis: 700; --radius: 8px; } body.linie-itispm { --podklad: #FFFFFF; --podklad2: #F7F7F7; --inkoust: #292929; --text: #4C4C4C; --tlumene: #686868; --linka: #E0E0E0; --akcent: #EA9018; --akcent-hover: #F5AB48; --akcent-tmavy: #915300; --odkaz: #B96E09; --pismo: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pismo-nadpis: "Open Sans", system-ui, sans-serif; --vaha-nadpis: 700; } body.linie-poky { --podklad: #F5F1EA; --podklad2: #FFFFFF; --inkoust: #1A1A1A; --text: #2A2420; --tlumene: #7A6F61; --linka: #E6DFD2; --akcent: #21544F; --akcent-hover: #163D39; --akcent-tmavy: #163D39; --odkaz: #21544F; --jantar: #D9A441; --pismo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pismo-nadpis: "Playfair Display", Georgia, serif; --vaha-nadpis: 600; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--podklad); color: var(--text); font: 400 1.0625rem/1.65 var(--pismo); min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: var(--odkaz); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover, a:focus-visible { color: var(--akcent-hover); } h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); color: var(--inkoust); line-height: 1.2; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: clamp(2rem, 5vw, 2.75rem); } h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: 2.2em; padding-top: 0.6em; border-top: 1px solid var(--linka); } h3 { font-size: 1.15rem; margin-top: 1.6em; } p { margin: 0 0 1em; } ul { padding-left: 1.2em; } li { margin-bottom: 0.35em; } strong { color: var(--inkoust); } .hlavicka-in, .obsah, .paticka-in { width: min(100% - 2.5rem, var(--sirka)); margin-inline: auto; } /* Hlavička */ .hlavicka { border-bottom: 1px solid var(--linka); background: var(--podklad2); } /* Hlavička je na všech liniích stejná (Víťa 11. 9.): vždy Inter (ne písmo linie), mřížka zpět | loga na střed | jazyk; na rozcestníku značka vlevo a jazyk vpravo. */ .hlavicka, .hlavicka a { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .hlavicka-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.9rem 0; } .hlavicka-in > .zpet, .hlavicka-in > .znacka { grid-column: 1; justify-self: start; } .hlavicka-in > .loga, .hlavicka-in > .logo { grid-column: 2; justify-self: center; } .hlavicka-in > .jazyk { grid-column: 3; justify-self: end; } .loga { display: flex; align-items: center; gap: 2rem; } .znacka { display: inline-flex; align-items: center; color: var(--inkoust); text-decoration: none; } /* Podpis Pokorni.cz jako SVG (Víťa 25. 9. 2026): výšku řídí CSS, šířku dopočítá viewBox, barvu dědí přes currentColor – proto hover funguje jako u textu. */ .znacka .znacka-svg { height: 1.9rem; width: auto; display: block; } .znacka:hover, .znacka:focus-visible { color: var(--akcent-hover); } /* Hero rozcestníku (Víťa 11. 9.): loga jako tlačítka vedle sebe; od 20. 9. 2026 zarovnaná k okrajům šířky obsahu (tlačítka vyplní řádek, mezera mezi nimi je pevná). */ .hero-loga { display: flex; justify-content: space-between; gap: 1.5rem; margin: 1.5rem 0 2.2rem; } .hero-logo { flex: 1 1 0; min-width: 0; min-height: 8.5rem; display: flex; align-items: center; justify-content: center; padding: 1.2rem; border: 1px solid var(--linka); border-top: 5px solid var(--hero-akcent, var(--inkoust)); border-radius: 14px; background: var(--podklad2); text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; } .hero-logo:hover, .hero-logo:focus-visible { border-color: var(--hero-akcent, var(--inkoust)); border-top-color: var(--hero-akcent, var(--inkoust)); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .hero-logo img { width: auto; height: auto; max-width: 78%; max-height: 4.5rem; display: block; margin: 0 auto; } .hero-logo-itispm { --hero-akcent: #EA9018; background: #FFFFFF; } .hero-logo-itispm img { max-width: 64%; } .hero-logo-pokybs { --hero-akcent: #21544F; background: #FFFFFF; } .hero-logo-pokybs img { border-radius: 4px; } /* Tlačítko POKY: tři loga v jednom tlačítku (pokybs · VeraBarbera · pokyhs, Víťa 20. 9. 2026), každé je vlastní odkaz. Tři loga chtějí víc místa než jedno iTiSPM – proto 1,6× širší. */ .hero-logo-poky { flex-grow: 1.6; gap: 0.9rem; padding: 0.9rem; } .hero-logo-poky a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; text-decoration: none; transition: opacity 0.15s; } .hero-logo-poky a:hover, .hero-logo-poky a:focus-visible { opacity: 0.75; } .hero-logo-poky img { max-width: 92%; max-height: 5.6rem; } /* Podpis VeraBarbera je na šířku – bez trochy místa navíc by vedle dvou POKY zapadl. */ .hero-logo-poky .hero-logo-vb { flex-grow: 1.3; } .hero-del { width: 1px; align-self: stretch; background: var(--linka); } .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; } .logo img { height: 40px; width: auto; } .logo-pokybs img, .logo-pokyhs img { border-radius: 4px; } .loga-poky { gap: 1rem; } .zpet { font-size: 0.95rem; text-decoration: none; color: var(--tlumene); } /* Šipka „←“ je znak z Interu – proto se Inter načítá na všech liniích (head.php), jinak by ji kreslil náhradní font. */ .zpet:hover { color: var(--odkaz); } .jazyk { font-size: 0.9rem; letter-spacing: 0.04em; margin-left: auto; } .jazyk-aktivni { font-weight: 700; color: var(--inkoust); } .jazyk-del { color: var(--tlumene); margin: 0 0.35em; } .jazyk a { text-decoration: none; } /* Obsah */ .obsah { flex: 1; padding: 2.5rem 0 3.5rem; } .podtitul { font-size: 1.1rem; color: var(--tlumene); margin: -0.4rem 0 1.4rem; letter-spacing: 0.01em; } /* Hlava profilu: portrét vlevo, jméno a podtitul vpravo (Víťa 11. 9.). */ /* Celý blok (fotka + jméno + podtitul) stojí uprostřed stránky jako jeden celek, uvnitř zarovnání vlevo (Víťa 11. 9.). */ .profil-hlava { display: flex; align-items: center; gap: 1.5rem; width: fit-content; max-width: 100%; margin: 0 auto 1.6rem; } .profil-hlava h1 { margin-bottom: 0.15em; } .profil-hlava .podtitul { margin: 0; } .foto-profil { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--linka); background: var(--podklad2); } .foto-chybi { flex: none; width: 128px; height: 128px; border-radius: 50%; border: 1px dashed var(--linka); display: grid; place-items: center; text-align: center; font-size: 0.8rem; padding: 0.5rem; } /* Standard (Víťa 11. 9.): odstavce do bloku; výjimky se dělají cíleně (podtitul, patička, karty jen krátké texty). */ .obsah p { text-align: justify; hyphens: auto; } .obsah .podtitul, .obsah .foto-chybi { text-align: left; hyphens: manual; } /* Perex do bloku i na rozcestníku (Víťa 20. 9. 2026) – dřív jen na profilech. */ .perex { font-size: 1.15rem; color: var(--inkoust); text-align: justify; hyphens: auto; } .motto { font-family: var(--pismo-nadpis); font-size: 1.3rem; color: var(--akcent); margin: 1.5rem 0; } .cta { display: inline-block; margin: 0.5rem 0 1rem; padding: 0.7rem 1.25rem; background: var(--akcent); color: #FFFFFF; border-radius: var(--radius); text-decoration: none; font-weight: 600; } .cta:hover, .cta:focus-visible { background: var(--akcent-hover); color: #FFFFFF; } /* Nadpis sekce jako logo linie (profil Vlastimila, sekce iTiSPM – Víťa 19. 9.: logo místo textu, text jen v alt; odkaz na web je v logu, v Kontaktu a v patičce – žádný další řádek). */ .nadpis-logo a { display: inline-block; line-height: 0; transition: opacity 0.15s; } .nadpis-logo a:hover, .nadpis-logo a:focus-visible { opacity: 0.75; } .nadpis-logo img { width: 190px; height: auto; display: block; } body.linie-poky .cta { color: #FFFFFF; } .odkazy-radek { margin: 0.5rem 0 1.5rem; } .odkazy-radek .del { color: var(--tlumene); margin: 0 0.4em; } /* ---------- Kariérní časová osa ---------- */ [data-obor="poradenstvi"] { --obor: #915300; --obor-svetla: #F3E7D9; } [data-obor="bankovnictvi"] { --obor: #2F6DB5; --obor-svetla: #DDE8F5; } [data-obor="vyroba"] { --obor: #C2410C; --obor-svetla: #F8E2D8; } [data-obor="energetika"] { --obor: #2E9E5B; --obor-svetla: #DCF1E4; } [data-obor="zdravotnictvi"]{ --obor: #0E8F9C; --obor-svetla: #D8EEF0; } [data-obor="retail"] { --obor: #7C3AED; --obor-svetla: #E9DFFB; } [data-obor="logistika"] { --obor: #A16207; --obor-svetla: #F3EAD3; } [data-obor="it"] { --obor: #C0392B; --obor-svetla: #F7DDDA; } [data-obor="vzdelani"] { --obor: #5B6B7A; --obor-svetla: #E4E9EE; } .ko { --ko-vyber: #FFF6E8; font-family: var(--pismo); color: var(--text); position: relative; } .ko-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.6rem; } .ko-souhrn { font-size: 0.86rem; color: var(--tlumene); font-variant-numeric: tabular-nums; } .ko-souhrn b { color: var(--inkoust); font-weight: 700; } .ko-ovladani { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; } .ko-ovladani button { font: inherit; font-size: 0.84rem; font-weight: 600; padding: 0.32rem 0.7rem; border: 1px solid var(--linka); background: var(--podklad); color: var(--inkoust); border-radius: 6px; cursor: pointer; } .ko-ovladani button:hover, .ko-ovladani button:focus-visible { border-color: var(--akcent); color: var(--akcent-tmavy); outline: none; } .ko-ovladani .napoveda { font-size: 0.78rem; color: var(--tlumene); margin-left: 0.5rem; } .ko-trat { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--linka); border-radius: 8px; background: var(--podklad2); cursor: grab; scrollbar-width: thin; touch-action: pan-x pan-y; position: relative; } .ko-trat.tahnu { cursor: grabbing; user-select: none; } .ko-trat:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; } .ko-plocha { position: relative; height: var(--vyska-k); width: calc(var(--ko-rozsah) * 96px); } /* Dvě rozvržení výšek spočítaná v PHP (kompaktní -k / projektové -p, spec „Přepínání rozvržení“): JS jen přepíná atribut data-projekty na .ko, pozice čte z inline proměnných prvků. */ .ko[data-projekty] .ko-plocha { height: var(--vyska-p); } .ko-pruh { top: var(--top-k); } .ko[data-projekty] .ko-pruh { top: var(--top-p); height: var(--vyska-p); } .ko[data-projekty] .ko-pruh small { display: none; } .ko-projekt { display: none; top: var(--top-p); } .ko[data-projekty] .ko-projekt { display: block; } .ko-milnik { top: var(--top-k); } .ko[data-projekty] .ko-milnik { top: var(--top-p); } .ko-rok { position: absolute; top: 0; bottom: 0; border-left: 1px solid #ECECEC; } .ko-rok.je-dekada { border-left-color: #CFCFCF; } .ko-rok::after { content: attr(data-rok); position: absolute; top: 24px; left: 5px; font-size: 0.74rem; color: var(--tlumene); font-variant-numeric: tabular-nums; white-space: nowrap; } /* roky nahoře (Víťa 19. 9.) */ .ko-rok.je-dekada::after { color: var(--inkoust); font-weight: 700; } .ko[data-zoom="fit"] .ko-rok:not(.je-dekada):not(.je-pul)::after { opacity: 0; } .ko-dnes { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--akcent); } /* Popisek vlevo od čáry: vpravo by vyčníval za konec trati a rozšiřoval posuvnou plochu (při „Vše“ ujel začátek osy). */ .ko-dnes::after { content: attr(data-popis); position: absolute; top: 3px; right: 6px; font-size: 0.72rem; font-weight: 700; color: var(--akcent-tmavy); white-space: nowrap; letter-spacing: 0.03em; } .ko-pruh { position: absolute; height: 26px; border-radius: 6px; border: 0; border-left: 4px solid var(--obor); border-right: 3px solid var(--podklad2); background: var(--obor-svetla); color: var(--inkoust); font: inherit; font-size: 0.8rem; font-weight: 600; text-align: left; padding: 0 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; line-height: 26px; transition: filter 0.12s, opacity 0.15s; } .ko-pruh small { font-weight: 400; color: var(--tlumene); margin-left: 0.3rem; } .ko-pruh:hover, .ko-pruh:focus-visible { filter: brightness(0.95); outline: none; } .ko-pruh.je-vybrany { outline: 2px solid var(--akcent); outline-offset: 1px; } /* Popisek smí přetéct za pravý okraj pruhu na podklad trati (jako v Ganttu) – řádky mají mezi obdobími mezeru ≥ 1 rok, takže je kam. Jen při měřítku „Vše“ se popisky usekávají, aby se nemlely. */ .ko-pruh { display: flex; align-items: flex-start; gap: 0.3rem; overflow: visible; text-overflow: clip; } /*