/* ========================================================================= PraceLehce — vzhled „1a Klasický portál" Design tokens v :root. Fonty se načítají z fonts.css (lokální, GDPR). Ikony jsou SVG sprite (_ikony.html) přes , nedědí font bloku). */ .up-quill-mount .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; border-color: var(--border); } .up-quill-mount .ql-container.ql-snow { border-radius: 0 0 8px 8px; border-color: var(--border); font: 400 15px var(--font-body); color: var(--ink); } .up-quill-mount .ql-editor { min-height: 120px; max-height: 46vh; overflow-y: auto; } .up-quill-mount .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; left: 12px; } /* Plováky (barvy / emoji) sdílejí přepínání viditelnosti. */ .up-plovak { display: none; } .up-plovak.up-plovak--open { display: grid; } .up-barvy { position: fixed; z-index: 1300; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 214px; max-width: 92vw; padding: 9px; background: #fff; border: 1px solid #e2ded6; border-radius: 10px; box-shadow: 0 8px 26px rgba(31, 27, 22, .18); } .up-barvy__x, .up-barvy__v { width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer; border: 1px solid rgba(31, 27, 22, .2); border-radius: 6px; } .up-barvy__x { background: #fff; color: var(--muted); font: 700 14px var(--font-body); display: inline-flex; align-items: center; justify-content: center; } .emoji-panel { position: fixed; z-index: 1300; width: 268px; max-width: 92vw; max-height: 244px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid #e2ded6; border-radius: 10px; box-shadow: 0 8px 26px rgba(31, 27, 22, .18); grid-template-columns: repeat(8, 1fr); gap: 2px; } .emoji-btn { border: none; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; padding: 5px 0; border-radius: 6px; } .emoji-btn:hover, .emoji-btn:focus-visible { background: #f0ede6; outline: none; } /* Velikosti písma (relativní, s rozumným stropem na mobilu) */ .txt-vel-l { font-size: 1.2em; } .txt-vel-xl { font-size: 1.5em; } .txt-vel-xxl { font-size: 2em; } /* Barva textu (H5) — stejná paleta jako hero baner; CSP → jen třídy */ .txt-barva-cervena { color: #E23A2E; } .txt-barva-zelena { color: #1B9E57; } .txt-barva-oranzova { color: #F0902B; } .txt-barva-modra { color: #2D6CDF; } .txt-barva-zluta { color: #F2C200; } .txt-barva-fialova { color: #7C3AED; } .txt-barva-tyrkys { color: #17A2B8; } .txt-barva-cerna { color: #1F1B16; } .txt-barva-bila { color: #FFFFFF; } .txt-barva-seda { color: #6B675F; } .txt-barva-svetla { color: #E7E4DD; } .txt-barva-kremova { color: #F7F5F0; } /* Formátovací lišta editoru */ .up-lista { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; } /* Výběr barvy textu v liště: rozbalovací vzorník (details), CSP-čistý */ .up-barva { position: relative; } .up-barva__tlac { list-style: none; cursor: pointer; min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--ink); font: 700 13px var(--font-body); } .up-barva__tlac::-webkit-details-marker { display: none; } .up-barva__pruh { width: 16px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #E23A2E, #2D6CDF, #1B9E57); } .up-barva__paleta { position: absolute; top: calc(100% + 6px); left: 0; z-index: 7; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 200px; padding: 10px; background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg); } .up-barva-vzorek { width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer; border: 1px solid rgba(31, 27, 22, .2); border-radius: 6px; } .up-barva-vzorek--zadna { background: #fff; color: var(--muted); font: 700 13px var(--font-body); display: inline-flex; align-items: center; justify-content: center; } /* JEN přímé tlačítka lišty (B/I/U/A-/A+) — vzorník barev je vnořený v .up-barva a jeho vzorky si nesou vlastní pozadí baner-barva-* (jinak by je bílé přebilo). */ .up-lista > button { min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--ink); font: 600 13px var(--font-body); } .up-lista > button:hover { background: var(--bg); } .up-lista__oddel { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } .up-editor { min-height: 90px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; color: var(--ink); font: 400 14.5px var(--font-body); } .up-editor:focus { outline: 2px solid var(--red); outline-offset: 1px; } @media (max-width: 620px) { .up-panel { left: 12px; right: 12px; transform: none; justify-content: space-between; } .txt-vel-xl { font-size: 1.35em; } .txt-vel-xxl { font-size: 1.6em; } } /* ============================================================ PLÁTNO BUILDERU (2a): 12sloupcová mřížka, mobil = pod sebou Viditelnost bloků (prázdná fotka, jen-pro-anonyma) řeší SERVER ve vykresli_platno — do DOM se skryté bloky vůbec nedostanou. ============================================================ */ .platno { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 18px; row-gap: 22px; } .platno > .blok { min-width: 0; } /* Text (i dlouhé slovo/URL bez mezer) se zalomí na šířce okna, nikdy nepřeteče ven; výška okna už roste s obsahem sama. overflow-wrap se dědí → pokryje vnořené

. Platí v kartách, textových blocích i v editoru (náhled se shoduje s výsledkem). */ .platno .karta, .platno .stranka__nadpis, .platno .stranka__lead, .platno .stranka__blok, .up-editor { overflow-wrap: break-word; } /* rytmus řádků dává row-gap — vlastní okraje prvků uvnitř plátna vynulovat */ .platno .stranka__nadpis, .platno .stranka__lead, .platno .stranka__blok, .platno .o-nas-foto { margin: 0; } /* karty ve stejném řádku drží stejnou výšku (jako v původní mřížce karet) */ .platno > .blok > .karta { height: 100%; } /* Režim úprav: úchyt pro přesun + náhled cíle tažení (bez inline stylů) */ body.up-rezim .platno > .blok { position: relative; } .up-uchyt { position: absolute; top: -12px; left: -12px; z-index: 5; cursor: grab; width: 26px; height: 26px; border: 0; border-radius: 8px; touch-action: none; background: var(--ink); color: #fff; font-size: 13px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow); } body.up-rezim .up-uchyt { display: inline-flex; } .up-uchyt:active { cursor: grabbing; } /* úchyt šířky (2c): střed pravé hrany, tažením se mění počet sloupců */ .up-rozmer { position: absolute; top: 50%; right: -8px; transform: translateY(-50%); z-index: 5; width: 16px; height: 34px; border: 0; border-radius: 8px; cursor: ew-resize; touch-action: none; background: var(--ink); color: #fff; font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow); } body.up-rezim .up-rozmer { display: inline-flex; } /* levý grip (D3): zrcadlo pravého; rohové úchyty (⠿ ✕) mají přednost v hit-testu na nízkých blocích (z-index 6 > 5) — omyl je pak přesun, nikdy smazání/rozměr */ .up-rozmer--levy { left: -8px; right: auto; } .up-uchyt, .up-odebrat { z-index: 6; } /* křížek odebrání bloku (2d): vlevo nahoře VEDLE úchytu ⠿ — pravá hrana patří úchytu šířky ↔ (na nízkých blocích by se s křížkem překrývaly a klik na horní okraj ↔ by mazal blok); nadpis stránky křížek nemá */ .up-odebrat { position: absolute; top: -12px; left: 18px; z-index: 5; width: 26px; height: 26px; border: 0; border-radius: 8px; cursor: pointer; background: var(--red); color: #fff; font-size: 12px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow); } body.up-rezim .up-odebrat { display: inline-flex; } /* výška banneru (D2): pevná výška + ořez výřezem, fotka se nedeformuje */ .blok-obr--nizky { height: 180px; } .blok-obr--stredni { height: 320px; } .blok-obr--vysoky { height: 480px; } .blok-obr--nizky .o-nas-foto__img, .blok-obr--stredni .o-nas-foto__img, .blok-obr--vysoky .o-nas-foto__img { width: 100%; height: 100%; max-height: none; object-fit: cover; } /* zakladni max-height 340px by usekl Vysoky */ /* pilulka na HORNÍM STŘEDU — pravá hrana patří gripu ↔ (na nízkém prázdném placeholderu by se s ní překrývala a klik by měnil výšku místo šířky) */ .up-vyska { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 5; border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; background: var(--ink); color: #fff; font-size: 11px; line-height: 1; display: none; box-shadow: var(--shadow); } body.up-rezim .up-vyska { display: inline-flex; } /* šířka obrázku/banneru (item 7): pilulka na SPODNÍM STŘEDU (horní střed patří výšce); přepíná obsah ↔ celá stránka */ .up-cela-sirka { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); z-index: 5; border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; background: var(--ink); color: #fff; font-size: 11px; line-height: 1; display: none; box-shadow: var(--shadow); white-space: nowrap; } body.up-rezim .up-cela-sirka { display: inline-flex; } .blok--tazeny { opacity: .55; } .up-cil { border: 2px dashed var(--orange); border-radius: 10px; background: rgba(240, 144, 43, .08); pointer-events: none; min-height: 34px; } .up-cil--kolize { border-color: var(--red); background: rgba(226, 58, 46, .10); } .up-cil--novy { min-height: 0; height: 6px; align-self: start; border: 0; border-radius: 3px; background: var(--orange); } /* "+ Přidat blok" v plovoucím panelu: dropdown otevíraný nahoru (2d) */ .up-pridat { position: relative; } .up-pridat > summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; } .up-pridat > summary::-webkit-details-marker { display: none; } .up-pridat__form { position: absolute; bottom: calc(100% + 10px); left: 0; display: flex; flex-direction: column; gap: 8px; width: 240px; padding: 12px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); } .up-pridat__form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink); } .up-pridat__form select { padding: 6px 8px; border: 1px solid #d8d4cd; border-radius: 8px; font: inherit; } /* D1 — přehledný režim úprav: úchyty rozvržení až při najetí/focusu na blok; tužky (.up-tuzka) zůstávají viditelné pořád. Tažený blok úchyty drží. */ body.up-rezim .platno > .blok .up-uchyt, body.up-rezim .platno > .blok .up-rozmer, body.up-rezim .platno > .blok .up-odebrat, body.up-rezim .platno > .blok .up-vyska, body.up-rezim .platno > .blok .up-cela-sirka { opacity: 0; pointer-events: none; transition: opacity .12s; } body.up-rezim .platno > .blok:hover .up-uchyt, body.up-rezim .platno > .blok:focus-within .up-uchyt, body.up-rezim .platno > .blok:hover .up-rozmer, body.up-rezim .platno > .blok:focus-within .up-rozmer, body.up-rezim .platno > .blok:hover .up-odebrat, body.up-rezim .platno > .blok:focus-within .up-odebrat, body.up-rezim .platno > .blok:hover .up-vyska, body.up-rezim .platno > .blok:focus-within .up-vyska, body.up-rezim .platno > .blok:hover .up-cela-sirka, body.up-rezim .platno > .blok:focus-within .up-cela-sirka, body.up-rezim .platno > .blok.blok--tazeny .up-uchyt, body.up-rezim .platno > .blok.blok--tazeny .up-rozmer { opacity: 1; pointer-events: auto; } body.up-rezim .platno > .blok:hover { outline: 1px dashed rgba(31, 27, 22, .35); outline-offset: 6px; } /* během tažení nerozsvěcet úchyty/obrysy bloků, přes které pointer jede (šum) */ body.up-tazeni .platno > .blok:not(.blok--tazeny):hover .up-uchyt, body.up-tazeni .platno > .blok:not(.blok--tazeny):hover .up-rozmer, body.up-tazeni .platno > .blok:not(.blok--tazeny):hover .up-odebrat, body.up-tazeni .platno > .blok:not(.blok--tazeny):hover .up-vyska, body.up-tazeni .platno > .blok:not(.blok--tazeny):hover .up-cela-sirka { opacity: 0; pointer-events: none; } body.up-tazeni .platno > .blok:not(.blok--tazeny):hover { outline: none; } /* pozice bloků BEZ inline stylů (CSP): generované třídy */ .bl-s1{grid-column-start:1}.bl-s2{grid-column-start:2}.bl-s3{grid-column-start:3} .bl-s4{grid-column-start:4}.bl-s5{grid-column-start:5}.bl-s6{grid-column-start:6} .bl-s7{grid-column-start:7}.bl-s8{grid-column-start:8}.bl-s9{grid-column-start:9} .bl-s10{grid-column-start:10}.bl-s11{grid-column-start:11}.bl-s12{grid-column-start:12} .bl-w1{grid-column-end:span 1}.bl-w2{grid-column-end:span 2}.bl-w3{grid-column-end:span 3} .bl-w4{grid-column-end:span 4}.bl-w5{grid-column-end:span 5}.bl-w6{grid-column-end:span 6} .bl-w7{grid-column-end:span 7}.bl-w8{grid-column-end:span 8}.bl-w9{grid-column-end:span 9} .bl-w10{grid-column-end:span 10}.bl-w11{grid-column-end:span 11}.bl-w12{grid-column-end:span 12} .bl-r1{grid-row-start:1}.bl-r2{grid-row-start:2}.bl-r3{grid-row-start:3} .bl-r4{grid-row-start:4}.bl-r5{grid-row-start:5}.bl-r6{grid-row-start:6} .bl-r7{grid-row-start:7}.bl-r8{grid-row-start:8}.bl-r9{grid-row-start:9} .bl-r10{grid-row-start:10}.bl-r11{grid-row-start:11}.bl-r12{grid-row-start:12} .bl-r13{grid-row-start:13}.bl-r14{grid-row-start:14}.bl-r15{grid-row-start:15} .bl-r16{grid-row-start:16}.bl-r17{grid-row-start:17}.bl-r18{grid-row-start:18} .bl-r19{grid-row-start:19}.bl-r20{grid-row-start:20} /* MOBIL/TABLET: mřížka se vypíná, bloky pod sebou v pořadí DOM (= pořadí čtení). Breakpoint 860px = parita s původní mřížkou karet (.mrizka-karet se skládala na 860px; užší hranice by mezi 721–860px mačkala 3 karty vedle sebe). */ @media (max-width: 860px) { .platno { display: block; } .platno > .blok { margin-bottom: 18px; } .platno > .blok:last-child { margin-bottom: 0; } /* mřížka je vypnutá → tažení nefunguje; nenabízet mrtvé úchyty */ body.up-rezim .up-uchyt, body.up-rezim .up-rozmer { display: none; } /* mobil hover nemá → křížek odebrání musí být vidět (D1 výjimka) */ body.up-rezim .platno > .blok .up-odebrat { opacity: 1; pointer-events: auto; } /* rozložení (vč. výšky/šířky banneru) se na mobilu needituje + menší výšky bannerů */ body.up-rezim .up-vyska, body.up-rezim .up-cela-sirka { display: none; } .blok-obr--nizky { height: 140px; } .blok-obr--stredni { height: 220px; } .blok-obr--vysoky { height: 300px; } } /* ============================================================ ITEM 7 — obrázek/banner přes CELOU ŠÍŘKU stránky (full-bleed). Jen na PC (mřížka aktivní ≥861px); na mobilu žádné pravidlo → blok zůstane v šířce obsahu (optimalizované na telefon). overflow-x:clip na (z H1) brání vodorovnému scrollu z roztažení na 100vw. ============================================================ */ @media (min-width: 861px) { .blok--cela-sirka { margin-inline: calc(50% - 50vw); } /* full-bleed blok = vlastní řádek: ↔ šířka nedává smysl (skryj); rohové úchyty ⠿/✕ dovnitř, na kraji obrazovky by je overflow-x:clip odřízl */ body.up-rezim .blok--cela-sirka .up-rozmer { display: none; } body.up-rezim .blok--cela-sirka .up-uchyt { left: 8px; } body.up-rezim .blok--cela-sirka .up-odebrat { left: 42px; } } /* ============================================================ HERO BANER (dekorativní pozadí za titulkem). CSP → jen třídy, fotka . Bez konfigurace / baner-v0 = neviditelný. Full-bleed přes celou šířku (left:calc(-50vw+50%) nezpůsobí vodorovný scroll na rozdíl od width:100vw+translate). ============================================================ */ /* obal s banerem = vztažný bod; obsah (titulek…) je NAD banerem (z-index) */ .stranka--baner, .hero--baner { position: relative; } .stranka--baner > :not(.hlavicka-baner):not(.baner-editor), .hero--baner > :not(.hlavicka-baner):not(.baner-editor) { position: relative; z-index: 1; } /* Baner sahá NAHORU až k navigaci (top:-22px zruší horní odsazení .obsah), ať mezi lištou a banerem není mezera — přitom se titulek NEHÝBE (drží svůj odstup od lišty, jen ho teď podkládá baner). Prázdný baner (v0, výška 0) je neviditelný → bez efektu, takže stránky bez baneru zůstanou beze změny. Editor se posune s ním (zůstane zarovnaný). -22px = .obsah padding-top. */ .hlavicka-baner { top: -22px; position: absolute; left: calc(-50vw + 50%); width: 100vw; z-index: 0; overflow: hidden; pointer-events: none; } .hlavicka-baner__foto { width: 100%; height: 100%; object-fit: cover; } .baner-v0 { height: 0; } .baner-v1 { height: 40px; } .baner-v2 { height: 80px; } .baner-v3 { height: 120px; } .baner-v4 { height: 160px; } .baner-v5 { height: 200px; } .baner-v6 { height: 240px; } .baner-v7 { height: 280px; } .baner-v8 { height: 320px; } .baner-v9 { height: 360px; } .baner-v10 { height: 400px; } .baner-v11 { height: 440px; } .baner-v12 { height: 480px; } /* základní paleta (sdílená s barvou textu txt-barva-* v H5) */ .baner-barva-cervena { background: #E23A2E; } .baner-barva-zelena { background: #1B9E57; } .baner-barva-oranzova { background: #F0902B; } .baner-barva-modra { background: #2D6CDF; } .baner-barva-zluta { background: #F2C200; } .baner-barva-fialova { background: #7C3AED; } .baner-barva-tyrkys { background: #17A2B8; } .baner-barva-cerna { background: #1F1B16; } .baner-barva-bila { background: #FFFFFF; } .baner-barva-seda { background: #6B675F; } .baner-barva-svetla { background: #E7E4DD; } .baner-barva-kremova { background: #F7F5F0; } .baner-op-100 { opacity: 1; } .baner-op-85 { opacity: .85; } .baner-op-70 { opacity: .70; } .baner-op-55 { opacity: .55; } .baner-op-40 { opacity: .40; } .baner-op-25 { opacity: .25; } /* v režimu úprav ukaž i prázdný baner (min. výška), ať jde vybrat barvu/fotku a chytit ↕ */ body.up-rezim .hlavicka-baner { min-height: 56px; } /* ---- Pás log (typ="pas"): loga partnerských portálů, šedivá → hover barevná ---- */ .pas { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 22px; } .platno .pas { margin: 0; } /* pozadí = barva (--pas-rgb) × alfa (--pas-a); prázdná barva → bez třídy .pas--bg */ .pas--bg { background: rgba(var(--pas-rgb, 0,0,0), var(--pas-a, 1)); border-radius: 12px; padding: 22px 18px; } .pas__loga { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 34px; } .pas__polozka { position: relative; display: inline-flex; } .pas__odkaz { display: inline-flex; } .pas__obr { max-height: 56px; max-width: 180px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .68; transition: filter .25s ease, opacity .25s ease; } .pas__polozka:hover .pas__obr, .pas__odkaz:focus-visible .pas__obr { filter: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .pas__obr { transition: none; } } /* barva pozadí pásu (rgb složka; sdílené hexy s baner-barva-*/txt-barva-*) */ .pas-barva-cervena { --pas-rgb: 226,58,46; } .pas-barva-zelena { --pas-rgb: 27,158,87; } .pas-barva-oranzova { --pas-rgb: 240,144,43; } .pas-barva-modra { --pas-rgb: 45,108,223; } .pas-barva-zluta { --pas-rgb: 242,194,0; } .pas-barva-fialova { --pas-rgb: 124,58,237; } .pas-barva-tyrkys { --pas-rgb: 23,162,184; } .pas-barva-cerna { --pas-rgb: 31,27,22; } .pas-barva-bila { --pas-rgb: 255,255,255; } .pas-barva-seda { --pas-rgb: 107,103,95; } .pas-barva-svetla { --pas-rgb: 231,228,221; } .pas-barva-kremova { --pas-rgb: 247,245,240; } .pas-alfa-100 { --pas-a: 1; } .pas-alfa-85 { --pas-a: .85; } .pas-alfa-70 { --pas-a: .70; } .pas-alfa-55 { --pas-a: .55; } .pas-alfa-40 { --pas-a: .40; } .pas-alfa-25 { --pas-a: .25; } /* editor pásu — jen v režimu úprav (šablona renderuje pod rezim_upravy_web) */ .pas__prazdno { text-align: center; color: #6B675F; font-style: italic; margin: 6px 0; } .pas__ovladani { position: absolute; top: -10px; right: -10px; display: none; gap: 4px; z-index: 2; } .pas__polozka:hover .pas__ovladani, .pas__polozka:focus-within .pas__ovladani { display: inline-flex; } .pas__btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--ink); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; list-style: none; } .pas__btn::-webkit-details-marker { display: none; } .pas__btn--odebrat { background: #E23A2E; } .pas__uprava { position: relative; display: inline-block; } .pas__uprava-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: 230px; max-width: 80vw; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); } .pas__editor { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .pas__pridat, .pas__vzhled { position: relative; } .pas__pridat-form, .pas__vzhled-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px; background: #fff; border: 1px solid #e2ded6; border-radius: 10px; box-shadow: var(--shadow); } .pas__pole { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink); } .pas__vzhled-nadpis { font: 600 12px var(--font-body); color: #6B675F; } .pas__vzorky, .pas__alfy { display: flex; flex-wrap: wrap; gap: 6px; } .pas-vzorek { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(31,27,22,.2); cursor: pointer; padding: 0; } .pas-vzorek--vybrano { outline: 2px solid var(--ink); outline-offset: 2px; } .pas-vzorek-zadna { background: #fff; color: #6B675F; font-size: 13px; } .pas-vzorek-cervena { background: #E23A2E; } .pas-vzorek-zelena { background: #1B9E57; } .pas-vzorek-oranzova { background: #F0902B; } .pas-vzorek-modra { background: #2D6CDF; } .pas-vzorek-zluta { background: #F2C200; } .pas-vzorek-fialova { background: #7C3AED; } .pas-vzorek-tyrkys { background: #17A2B8; } .pas-vzorek-cerna { background: #1F1B16; } .pas-vzorek-bila { background: #FFFFFF; } .pas-vzorek-seda { background: #6B675F; } .pas-vzorek-svetla { background: #E7E4DD; } .pas-vzorek-kremova { background: #F7F5F0; } .pas-alfa-btn { padding: 3px 9px; border: 1px solid #d8d4cc; border-radius: 6px; background: #fff; cursor: pointer; font-size: 12px; color: var(--ink); } .pas-alfa-btn--vybrano { border-color: var(--ink); font-weight: 600; } /* ---- Blok "clanek": karta publikovaného blogového článku v sekci (reuse .blog-karta) ---- */ .clanek-blok { display: flex; flex-direction: column; gap: 8px; height: 100%; } .platno .clanek-blok { margin: 0; } .clanek-blok .blog-karta { height: 100%; margin: 0; } .clanek-blok__prazdno { text-align: center; color: #6B675F; font-style: italic; margin: 6px 0; padding: 16px; border: 1px dashed #d8d4cc; border-radius: 10px; } .clanek-blok__vyber { position: relative; } .clanek-blok__form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px; background: #fff; border: 1px solid #e2ded6; border-radius: 10px; box-shadow: var(--shadow); } .clanek-blok__pole { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink); } /* V editoru karta článku ani logo pásu NENAVIGUJÍ — klik by jinak opustil editor (článek/portál by se otevřel „v popředí" místo okna úprav). Obsah se mění přes „Změnit článek" resp. ovládání loga (ty jsou mimo odkaz, klikací zůstanou). */ body.up-rezim .clanek-blok .blog-karta a, body.up-rezim .pas__odkaz { pointer-events: none; cursor: default; } /* ---- Editor baneru (H2–H4): ⚙ vzhled + ↕ výška; jen v režimu úprav ---- Full-šířka obsahu (ne full-bleed): souřadnice se kryjí s titulkem. Sám je pointer-events:none (titulek pod ním zůstane klikací), interaktivní jsou jen ⚙ menu a ↕ úchyt. z-index 3 → ovládání je NAD obsahem (z-index 1). */ .baner-editor { position: absolute; top: -22px; left: 0; right: 0; z-index: 3; min-height: 56px; pointer-events: none; /* -22px = zarovnání s banerem (u navigace) */ outline: 1px dashed rgba(31, 27, 22, .28); outline-offset: -1px; } .baner-editor > * { pointer-events: auto; } /* Editor: hlavička dostane nahoře vlastní „pruh" s ovládáním (⚙ + ↕) a titulek se posune pod něj → ovládání baneru se NEPŘEKRÝVÁ s úchyty prvního bloku (⠿ ✦ ↔). Jen v režimu úprav (živý web beze změny). padding se přidá dovnitř, absolutní baner/editor (top:-22px) se nehýbou; posune se jen obsah v toku (= titulek). */ body.up-rezim .stranka--baner, body.up-rezim .hero--baner { padding-top: 56px; } /* ⚙ menu v pravém horním rohu — titulek je vlevo, roh tak zůstane volný */ .baner-editor__menu { position: absolute; top: 8px; right: 8px; } .baner-editor__tlacitko { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px var(--font-body); box-shadow: var(--shadow); white-space: nowrap; } .baner-editor__tlacitko::-webkit-details-marker { display: none; } .baner-editor__panel { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; max-width: 84vw; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); text-align: left; } .baner-editor__nadpis { margin: 6px 0 2px; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .baner-editor__nadpis:first-child { margin-top: 0; } .baner-editor__radek { display: flex; flex-wrap: wrap; gap: 5px; } .baner-volba, .baner-pruh { cursor: pointer; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font: 600 12px var(--font-body); } .baner-volba:hover, .baner-pruh:hover { background: var(--bg); } .baner-volba--akt, .baner-pruh--akt { background: var(--ink); color: #fff; border-color: var(--ink); } .baner-editor__paleta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .baner-vzorek { width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer; border: 1px solid rgba(31, 27, 22, .2); border-radius: 6px; } .baner-vzorek--akt { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); } .baner-editor__foto { display: flex; flex-direction: column; gap: 5px; } .baner-editor__nahled img { max-height: 64px; width: auto; border-radius: 6px; border: 1px solid var(--border); display: block; } .baner-editor__check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); } .baner-editor__file { font-size: 12px; } .baner-editor__napoveda { font-size: 11px; color: var(--muted); } .baner-editor__reset { margin-top: 8px; cursor: pointer; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--red); font: 600 12px var(--font-body); } .baner-editor__reset:hover { background: #fdecea; } /* ↕ úchyt výšky sedí v horním pruhu hlavičky VLEVO (⚙ menu je vpravo) — dřív visel na spodní hraně (bottom:-12px) a kryl se s úchyty ↔/✦ prvního bloku. Tažení mění výšku bez ohledu na umístění (delta pointeru), takže přesun je bezpečný. */ .baner-editor__vyska { position: absolute; top: 8px; left: 8px; width: 46px; height: 22px; border: 0; border-radius: 999px; cursor: ns-resize; touch-action: none; background: var(--ink); color: #fff; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .baner-editor--taha { opacity: .92; } @media (max-width: 620px) { /* mobilní zastropení nejvyšších banerů */ .baner-v9 { height: 260px; } .baner-v10 { height: 290px; } .baner-v11 { height: 320px; } .baner-v12 { height: 340px; } } /* --- Náhled životopisu (nahled_cv.html) --- */ .cv-nahled-lista { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; } .cv-nahled { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .cv-nahled-obrazek { text-align: center; } .cv-nahled-obrazek img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,.06); } .cv-nahled-text { white-space: pre-wrap; word-break: break-word; margin: 0; font: 14px/1.6 var(--font-body); color: var(--text); } /* --- AI generování: vizuální zpětná vazba během HTMX požadavku (spinner + „Generuji…") --- */ .sys-ai-akce__klid, .sys-ai-akce__deje { display: inline-flex; align-items: center; gap: .5rem; } .sys-ai-akce__deje { display: none; } /* v klidu skryté */ .sys-ai-akce.htmx-request .sys-ai-akce__klid { display: none; } .sys-ai-akce.htmx-request .sys-ai-akce__deje { display: inline-flex; } .sys-ai-akce:disabled, .sys-ai-akce.htmx-request { cursor: wait; opacity: .8; } /* zamezí opakovaným klikům */ .sys-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sys-spin .6s linear infinite; } @keyframes sys-spin { to { transform: rotate(360deg); } } /* --- Živé přepočítání matching panelu po úpravě štítků (bez refreshe stránky) --- */ .sys-matching { position: relative; transition: opacity .15s ease; } .sys-matching__deje { display: none; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--muted, #667); font-size: .9rem; } .sys-matching.htmx-request { opacity: .55; } .sys-matching.htmx-request .sys-matching__deje { display: inline-flex; } /* --- Hromadné přegenerování štítků --- */ .sys-pregen__radek { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; } .tlacitko:disabled { opacity: .55; cursor: not-allowed; } /* --- Motivační dopis od uchazeče (na inzerátu) --- */ .reakce-dopis-blok { margin: 4px 0 16px; } .reakce-dopis__gen { align-items: center; gap: 8px; } .reakce-dopis__gen-deje { display: none; } /* v klidu skryté */ .reakce-dopis__gen.htmx-request .reakce-dopis__gen-klid { display: none; } .reakce-dopis__gen.htmx-request .reakce-dopis__gen-deje { display: inline; } .reakce-dopis__gen:disabled, .reakce-dopis__gen.htmx-request { cursor: wait; opacity: .8; } .reakce-dopis { margin-top: 12px; } .reakce-dopis:empty { margin-top: 0; } .reakce-dopis__label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .reakce-dopis__text { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14.5px; line-height: 1.55; resize: vertical; background: #fff; } .reakce-dopis__text:focus { outline: none; border-color: var(--red); } .reakce-dopis__chyba { color: var(--red); font-size: 14px; margin: 8px 0 0; } /* --- Stránka „Pro firmy" (landing) --- */ .pf-hero { text-align: center; max-width: 46rem; margin: 2rem auto 3rem; } .pf-hero__stitek { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; color: var(--red); margin: 0 0 .5rem; } .pf-hero__nadpis { line-height: 1.15; margin: 0 0 1rem; } .pf-hero__lead { font-size: 1.1rem; margin: 0 auto 1.5rem; } .pf-cta__akce { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .pf-vyhody { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin: 0 auto 3rem; } .pf-karta { text-align: center; } .pf-karta__ikona { width: 2rem; height: 2rem; color: var(--red); } .pf-karta__nadpis { margin: .5rem 0; } .pf-cta { text-align: center; padding: 2.5rem 1rem; } .pf-cta h2 { margin: 0 0 1rem; } /* ---------- Blog ---------- */ .blog-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.6rem; } .blog-filtr__polozka { padding: .35rem .9rem; border: 1px solid var(--border); border-radius: var(--pill); color: var(--text); text-decoration: none; font: 600 14px var(--font-body); background: var(--surface); } .blog-filtr__polozka:hover { border-color: var(--muted); } .blog-filtr__polozka.je-aktivni { background: var(--red); color: #fff; border-color: var(--red); } .blog-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .blog-karta { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; } .blog-karta:hover { box-shadow: var(--shadow); } .blog-karta__obraz { display: block; aspect-ratio: 16/9; overflow: hidden; } .blog-karta__obraz img { width: 100%; height: 100%; object-fit: cover; } .blog-karta__telo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; } .blog-karta__kat { align-self: flex-start; font: 700 11.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--red); } .blog-karta__nadpis { font-size: 1.2rem; margin: 0; line-height: 1.25; } .blog-karta__nadpis a { color: var(--ink); text-decoration: none; } .blog-karta__nadpis a:hover { color: var(--red); } /* Klikatelná celá karta (blog i poradna): odkaz nadpisu se roztáhne přes celou kartu. Pseudoprvek je součást odkazu → nadpis zčervená i při hoveru kdekoli na kartě. */ .blog-karta__nadpis a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .blog-karta__perex { color: var(--text-2); margin: 0; font-size: .95rem; } .blog-karta__datum { color: var(--muted); font-size: .85rem; } .blog-stranky { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 2.4rem 0 0; } .blog-stranky a { color: var(--red); text-decoration: none; font-weight: 700; } .blog-stranky span { color: var(--muted); } .blog-clanek { max-width: 760px; } .blog-clanek__kat { font: 700 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--red); } .blog-clanek__meta { color: var(--muted); font-size: .95rem; margin: .3rem 0 1.4rem; } .blog-clanek__cover { width: 100%; border-radius: var(--radius); margin: 0 0 1.6rem; } .blog-clanek__telo { font-size: 1.06rem; line-height: 1.7; color: var(--text); } .blog-clanek__telo h2 { font-size: 1.5rem; margin: 1.8rem 0 .6rem; } .blog-clanek__telo h3 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; } .blog-clanek__telo p { margin: 0 0 1rem; } .blog-clanek__telo img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .blog-clanek__telo blockquote { border-left: 3px solid var(--red); margin: 1.2rem 0; padding: .2rem 0 .2rem 1.1rem; color: var(--text-2); } .blog-clanek__telo ul, .blog-clanek__telo ol { margin: 0 0 1rem 1.4rem; } .blog-clanek__prilohy { margin: 2rem 0 0; padding: 1.2rem 1.4rem; background: var(--tag-bg); border-radius: var(--radius); } .blog-clanek__prilohy h2 { font-size: 1.1rem; margin: 0 0 .6rem; } .blog-clanek__zpet { margin: 2.2rem 0 0; } .blog-clanek__zpet a { color: var(--red); text-decoration: none; font-weight: 700; } .blog-nahled { background: var(--amber-bg); color: var(--amber); padding: .5rem .9rem; border-radius: var(--radius-sm); font-weight: 700; margin: 0 0 1rem; } /* Bohaté formáty článku (Quill třídy) — web nenačítá quill CSS, proto zde. Barvy písma/pozadí jsou LIBOVOLNÉ → třídy blog-fg-/blog-bg-, jejich CSS jde z views přes nonce