/* ========================================================================== Levne-prepravky.cz – stránka „Pojmy – test“ (Shoptet, šablona Classic) Vlastní CSS pro obsah stránky. Platí POUZE ve scope body.in-pojmy-test .pageArticleDetail – zbytek e-shopu se nemění. Ikony jsou SVG jako data-URI (v HTML nejsou žádné obrázky ikon). Ploché CSS bez proměnných, bez nestingu, bez @import. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Základ: text, odkazy, obrázky, kotvy -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail { color: #000; } body.in-pojmy-test .pageArticleDetail p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; } /* úvodní odstavec = první prvek obsahu (užší řádek jako v návrhu) */ body.in-pojmy-test .pageArticleDetail > div > p:first-child { max-width: 820px; margin-bottom: 12px; line-height: 1.6; } body.in-pojmy-test .pageArticleDetail a { color: #2f95d7; text-decoration: none; } body.in-pojmy-test .pageArticleDetail a:hover, body.in-pojmy-test .pageArticleDetail a:focus { color: #1997e5; text-decoration: underline; } body.in-pojmy-test .pageArticleDetail strong { font-weight: 700; } body.in-pojmy-test .pageArticleDetail img { max-width: 100%; height: auto; } /* kotvy: šablona e-shopu už má na scroll-padding-top (odsazení pod pevnou hlavičku), proto tu stačí jen malá rezerva navíc */ body.in-pojmy-test .pageArticleDetail [id] { scroll-margin-top: 12px; } /* -------------------------------------------------------------------------- 2. Obsah stránky: štítek „OBSAH STRÁNKY“ + bloky skupin s „čipy“ pojmů (fallback bez tříd: h2#obsah + ul) -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail h2#obsah { margin: 28px 0 12px; padding: 0; text-align: left; background: none; border: 0; border-radius: 0; font-size: 13px; font-weight: 700; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: #555; } body.in-pojmy-test .pageArticleDetail h2#obsah::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: top; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23555%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M8%207h12M8%2012h12M8%2017h12%27/%3E%3Cpath%20d=%27M4%207h.1M4%2012h.1M4%2017h.1%27/%3E%3C/svg%3E") no-repeat center / 18px 18px; } /* mřížka bloků skupin – 3 sloupce na desktopu */ body.in-pojmy-test .pageArticleDetail h2#obsah + ul, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 12px !important; padding: 0 !important; list-style: none !important; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li { min-width: 0; margin: 0; padding: 16px 18px; list-style: none; background: #f5f5f5; border-radius: 4px; } /* rozložení jako v návrhu: sloupce (1. + 2.) | 3. | (4. + 5.) */ body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(1), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(1) { grid-column: 1; grid-row: 1; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(2), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(2) { grid-column: 1; grid-row: 2; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(3), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(4), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(4) { grid-column: 3; grid-row: 1; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(5), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(5) { grid-column: 3; grid-row: 2; } /* název skupiny (černý, s ikonou 22 px vlevo) */ body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a { position: relative; display: block; margin: 0 0 12px; padding: 0 0 0 32px; font-size: 15px; font-weight: 600; line-height: 22px; color: #000; text-decoration: none; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a:hover, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a:hover { color: #2f95d7; text-decoration: none; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a::before, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: 22px 22px; } /* pojmy ve skupině jako „čipy“ */ body.in-pojmy-test .pageArticleDetail h2#obsah + ul ul, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul ul li, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah ul li { min-width: 0; margin: 0; padding: 0; list-style: none; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul ul li a, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah ul li a { display: inline-block; padding: 6px 9px; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; font-size: 13px; font-weight: 400; line-height: 1.2; color: #2f95d7; text-decoration: none; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul ul li a:hover, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah ul li a:hover { border-color: #9fc9ea; color: #1997e5; text-decoration: none; } /* -------------------------------------------------------------------------- 3. Hlavička skupiny: h2#skupina + podtitul = jeden světle modrý blok s bílým kolečkem a ikonou (fallback bez třídy: h2 + p) -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail h2:not(#obsah) { position: relative; clear: both; text-align: left; margin: 44px 0 0; padding: 14px 18px 2px 76px; background: #eaf4fc; border-radius: 4px 4px 0 0; font-size: 20px; font-weight: 600; line-height: 1.2; color: #000; } body.in-pojmy-test .pageArticleDetail h2:not(#obsah)::before { content: ""; position: absolute; left: 18px; top: 14px; width: 44px; height: 44px; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; } /* podtitul navazuje bez mezery: stejné pozadí, zaoblení jen dole */ body.in-pojmy-test .pageArticleDetail h2:not(#obsah) + p, body.in-pojmy-test .pageArticleDetail p.pojmy-podtitul { margin: 0 0 20px; padding: 0 18px 14px 76px; background: #eaf4fc; border-radius: 0 0 4px 4px; font-size: 14px; line-height: 1.4; color: #555; } /* ikony skupin – v hlavičce (24 px v kolečku) i v obsahu (22 px u názvu) */ body.in-pojmy-test .pageArticleDetail h2#stav-zbozi::before, body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a[href="#stav-zbozi"]::before, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a[href="#stav-zbozi"]::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3%203h8l10%2010-8%208L3%2011z%27/%3E%3Ccircle%20cx=%277.5%27%20cy=%277.5%27%20r=%271.4%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail h2#materialy-a-oznaceni::before, body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a[href="#materialy-a-oznaceni"]::before, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a[href="#materialy-a-oznaceni"]::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%203l9%205-9%205-9-5z%27/%3E%3Cpath%20d=%27M3%2012.5l9%205%209-5%27/%3E%3Cpath%20d=%27M3%2017l9%205%209-5%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail h2#vika-uzavery-konstrukce::before, body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a[href="#vika-uzavery-konstrukce"]::before, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a[href="#vika-uzavery-konstrukce"]::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cellipse%20cx=%2712%27%20cy=%277%27%20rx=%278%27%20ry=%273%27/%3E%3Cpath%20d=%27M4%207v9c0%201.7%203.6%203%208%203s8-1.3%208-3V7%27/%3E%3Cpath%20d=%27M4%2012c0%201.7%203.6%203%208%203s8-1.3%208-3%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail h2#rozmery-a-parametry::before, body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a[href="#rozmery-a-parametry"]::before, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a[href="#rozmery-a-parametry"]::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3%2017L17%203l4%204L7%2021z%27/%3E%3Cpath%20d=%27M8%2012l2%202M11%209l2%202M14%206l2%202%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail h2#pouziti-a-naplne::before, body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li > a[href="#pouziti-a-naplne"]::before, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li > a[href="#pouziti-a-naplne"]::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%2021c-4.5%200-8-4-8-8.5C4%209.5%206%207.5%208.5%207.5c1.6%200%202.8.8%203.5%201.6.7-.8%201.9-1.6%203.5-1.6%202.5%200%204.5%202%204.5%205%200%204.5-3.5%208.5-8%208.5z%27/%3E%3Cpath%20d=%27M12%209V4.5%27/%3E%3Cpath%20d=%27M12%204.5c1.5%200%202.5-.8%203-2%27/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 4. Pojem: h3 (oddělený linkou), definice, blok „Pozor“, „Související“ -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail h3 { clear: both; text-align: left; margin: 28px 0 10px; padding: 20px 0 0; border-top: 1px solid #e5e5e5; font-size: 17px; font-weight: 600; line-height: 1.3; color: #000; } /* první pojem skupiny (hned po podtitulu nebo po piktogramech) bez horní linky */ body.in-pojmy-test .pageArticleDetail h2 + p + h3, body.in-pojmy-test .pageArticleDetail p.pojmy-podtitul + h3, body.in-pojmy-test .pageArticleDetail ul + h3 { margin-top: 0; padding-top: 0; border-top: 0; } /* upozornění „Pozor“ – přebíjí styly šablony pro blockquote */ body.in-pojmy-test .pageArticleDetail blockquote { position: relative; display: flow-root; margin: 0 0 10px; padding: 10px 12px 10px 36px; background: #fff6d6; border: 0; border-radius: 4px; font-size: 13px; font-style: normal; line-height: 1.5; color: #3d3000; quotes: none; } body.in-pojmy-test .pageArticleDetail blockquote::before { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%238a6d00%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%204l9%2016H3z%27/%3E%3Cpath%20d=%27M12%2010v4M12%2017.5v.1%27/%3E%3C/svg%3E") no-repeat center / 16px 16px; } body.in-pojmy-test .pageArticleDetail blockquote::after { content: none; } body.in-pojmy-test .pageArticleDetail blockquote p { margin: 0; font-size: 13px; font-style: normal; line-height: 1.5; color: #3d3000; } body.in-pojmy-test .pageArticleDetail blockquote strong { font-weight: 700; color: #3d3000; } /* „Související: …“ */ body.in-pojmy-test .pageArticleDetail p.pojmy-souvisejici { display: flow-root; margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #555; } /* fallback bez třídy: odstavec těsně před dalším h3 (kromě podtitulu) … */ body.in-pojmy-test .pageArticleDetail p:has(+ h3):not(h2 + p) { display: flow-root; margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #555; } /* … nebo před odstavcem „Zpět na obsah“ */ body.in-pojmy-test .pageArticleDetail p:has(+ p > a[href="#obsah"]) { display: flow-root; margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #555; } /* -------------------------------------------------------------------------- 5. Schéma sudu (skupina 3): obrázek v rámečku, popisek, číslovaná legenda (fallback bez tříd: h2 + p + p > img, legenda = p + ol) -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail p.pojmy-schema-sudu { margin: 0 0 10px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 4px; line-height: 0; text-align: center; } /* fallback bez třídy: druhý odstavec za h2 obsahující obrázek */ body.in-pojmy-test .pageArticleDetail h2 + p + p:has(> img) { margin: 0 0 10px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 4px; line-height: 0; text-align: center; } body.in-pojmy-test .pageArticleDetail p.pojmy-schema-sudu img, body.in-pojmy-test .pageArticleDetail h2 + p + p > img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; } body.in-pojmy-test .pageArticleDetail p.pojmy-popisek { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #555; } /* legenda: modrá kolečka s číslem přes CSS counter */ body.in-pojmy-test .pageArticleDetail ol.pojmy-legenda, body.in-pojmy-test .pageArticleDetail p + ol { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px !important; padding: 0 !important; list-style: none !important; counter-reset: pojmy-legenda; } body.in-pojmy-test .pageArticleDetail ol.pojmy-legenda li, body.in-pojmy-test .pageArticleDetail p + ol li { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; counter-increment: pojmy-legenda; font-size: 13px; line-height: 20px; } body.in-pojmy-test .pageArticleDetail ol.pojmy-legenda li::before, body.in-pojmy-test .pageArticleDetail p + ol li::before { content: counter(pojmy-legenda); flex-shrink: 0; width: 20px; height: 20px; margin: 0 6px 0 0; border-radius: 50%; background: #2f95d7; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; color: #fff; } body.in-pojmy-test .pageArticleDetail ol.pojmy-legenda a, body.in-pojmy-test .pageArticleDetail p + ol a { color: #2f95d7; text-decoration: none; } body.in-pojmy-test .pageArticleDetail ol.pojmy-legenda a:hover, body.in-pojmy-test .pageArticleDetail p + ol a:hover { color: #1997e5; text-decoration: none; } /* -------------------------------------------------------------------------- 6. Piktogramy typů uzávěrů (skupina 3): 6 dlaždic, ikona 48 px podle href (fallback bez třídy: ol + ul) -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy, body.in-pojmy-test .pageArticleDetail ol + ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy li, body.in-pojmy-test .pageArticleDetail ol + ul li { min-width: 0; margin: 0; padding: 0; list-style: none; } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy li a, body.in-pojmy-test .pageArticleDetail ol + ul li a { display: block; height: 100%; padding: 14px 8px; background: #f5f5f5; border-radius: 4px; font-size: 13px; line-height: 1.3; text-align: center; color: #000; text-decoration: none; } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy li a:hover, body.in-pojmy-test .pageArticleDetail ol + ul li a:hover { background: #eaf4fc; color: #000; text-decoration: none; } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy li a::before, body.in-pojmy-test .pageArticleDetail ol + ul li a::before { content: ""; display: block; width: 48px; height: 48px; margin: 0 auto 8px; background-repeat: no-repeat; background-position: center; background-size: 48px 48px; } /* -------------------------------------------------------------------------- 7. Ikona uzávěru (36 px) za nadpisem šesti pojmů -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail h3#odnimatelne-viko::after, body.in-pojmy-test .pageArticleDetail h3#zacvakavaci-viko::after, body.in-pojmy-test .pageArticleDetail h3#sroubovaci-viko::after, body.in-pojmy-test .pageArticleDetail h3#pakova-spona::after, body.in-pojmy-test .pageArticleDetail h3#dvouzatkovy-sud::after, body.in-pojmy-test .pageArticleDetail h3#otevreny-sud::after { content: ""; display: inline-block; width: 36px; height: 36px; margin: -8px 0 -8px 10px; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 36px 36px; } /* SVG ikony uzávěrů – společné pro piktogram (::before) i nadpis (::after) */ body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy a[href="#odnimatelne-viko"]::before, body.in-pojmy-test .pageArticleDetail ol + ul a[href="#odnimatelne-viko"]::before, body.in-pojmy-test .pageArticleDetail h3#odnimatelne-viko::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%279%27%20y=%274%27%20width=%2730%27%20height=%274%27%20rx=%272%27/%3E%3Cpath%20d=%27M10%2014h28v25a3%203%200%200%201-3%203H13a3%203%200%200%201-3-3z%27/%3E%3Cpath%20d=%27M10%2024h28M10%2033h28%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy a[href="#zacvakavaci-viko"]::before, body.in-pojmy-test .pageArticleDetail ol + ul a[href="#zacvakavaci-viko"]::before, body.in-pojmy-test .pageArticleDetail h3#zacvakavaci-viko::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%278%27%20y=%279%27%20width=%2732%27%20height=%275%27%20rx=%272%27/%3E%3Cpath%20d=%27M9%2014l-1.5%204M39%2014l1.5%204%27/%3E%3Cpath%20d=%27M10%2014h28v25a3%203%200%200%201-3%203H13a3%203%200%200%201-3-3z%27/%3E%3Cpath%20d=%27M10%2024h28M10%2033h28%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy a[href="#sroubovaci-viko"]::before, body.in-pojmy-test .pageArticleDetail ol + ul a[href="#sroubovaci-viko"]::before, body.in-pojmy-test .pageArticleDetail h3#sroubovaci-viko::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%2712%27%20y=%277%27%20width=%2724%27%20height=%277%27%20rx=%271.5%27/%3E%3Cpath%20d=%27M17%207v7M22%207v7M27%207v7M32%207v7%27/%3E%3Cpath%20d=%27M10%2014h28v25a3%203%200%200%201-3%203H13a3%203%200%200%201-3-3z%27/%3E%3Cpath%20d=%27M10%2024h28M10%2033h28%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy a[href="#pakova-spona"]::before, body.in-pojmy-test .pageArticleDetail ol + ul a[href="#pakova-spona"]::before, body.in-pojmy-test .pageArticleDetail h3#pakova-spona::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%2710%27%20y=%279%27%20width=%2728%27%20height=%274%27%20rx=%272%27/%3E%3Crect%20x=%277%27%20y=%2712%27%20width=%2734%27%20height=%275%27%20rx=%272.5%27/%3E%3Cpath%20d=%27M40%2014.5l6-6%27/%3E%3Ccircle%20cx=%2746%27%20cy=%278.5%27%20r=%271.2%27/%3E%3Cpath%20d=%27M10%2017h28v22a3%203%200%200%201-3%203H13a3%203%200%200%201-3-3z%27/%3E%3Cpath%20d=%27M10%2024h28M10%2033h28%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy a[href="#dvouzatkovy-sud"]::before, body.in-pojmy-test .pageArticleDetail ol + ul a[href="#dvouzatkovy-sud"]::before, body.in-pojmy-test .pageArticleDetail h3#dvouzatkovy-sud::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%2710%27%20y=%2712%27%20width=%2728%27%20height=%2730%27%20rx=%273%27/%3E%3Crect%20x=%2714%27%20y=%278%27%20width=%277%27%20height=%274%27%20rx=%271%27/%3E%3Crect%20x=%2727%27%20y=%278%27%20width=%277%27%20height=%274%27%20rx=%271%27/%3E%3Cpath%20d=%27M10%2022h28M10%2032h28%27/%3E%3C/svg%3E"); } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy a[href="#otevreny-sud"]::before, body.in-pojmy-test .pageArticleDetail ol + ul a[href="#otevreny-sud"]::before, body.in-pojmy-test .pageArticleDetail h3#otevreny-sud::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%2048%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M10%2014v25a3%203%200%200%200%203%203h22a3%203%200%200%200%203-3V14%27/%3E%3Cellipse%20cx=%2724%27%20cy=%2714%27%20rx=%2714%27%20ry=%273.5%27/%3E%3Cpath%20d=%27M10%2024h28M10%2033h28%27/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 8. Rozměrová schémata (skupina 4): kresba 200 px obtékaná vpravo (fallback bez třídy: h3 + p > img:first-child) -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail img.pojmy-schema, body.in-pojmy-test .pageArticleDetail h3 + p > img:first-child { float: right; box-sizing: content-box; width: 200px; max-width: 100%; height: auto; margin: 0 0 12px 20px; padding: 6px; background: #fafafa; border-radius: 4px; mix-blend-mode: multiply; /* bílé pozadí PNG splyne s podkladem */ } /* -------------------------------------------------------------------------- 9. „Zpět na obsah“ (fallback bez třídy: p > a[href="#obsah"]) -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail p.pojmy-zpet { clear: both; margin: 14px 0 0; font-size: 13px; line-height: 1.4; text-align: right; } body.in-pojmy-test .pageArticleDetail p:has(> a[href="#obsah"]) { clear: both; margin: 14px 0 0; font-size: 13px; line-height: 1.4; text-align: right; } body.in-pojmy-test .pageArticleDetail p.pojmy-zpet a, body.in-pojmy-test .pageArticleDetail p > a[href="#obsah"] { display: inline-block; font-size: 13px; color: #2f95d7; text-decoration: none; } body.in-pojmy-test .pageArticleDetail p.pojmy-zpet a:hover, body.in-pojmy-test .pageArticleDetail p > a[href="#obsah"]:hover { color: #1997e5; text-decoration: none; } body.in-pojmy-test .pageArticleDetail p.pojmy-zpet a::before, body.in-pojmy-test .pageArticleDetail p > a[href="#obsah"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%2019V5M6%2011l6-6%206%206%27/%3E%3C/svg%3E") no-repeat center / 16px 16px; } /* -------------------------------------------------------------------------- 10. Závěrečná výzva: dva odstavce = jeden šedý blok + tlačítka -------------------------------------------------------------------------- */ body.in-pojmy-test .pageArticleDetail p.pojmy-cta { position: relative; clear: both; margin: 48px 0 0; padding: 22px 24px 14px 72px; background: #f5f5f5; border-radius: 4px 4px 0 0; font-size: 14px; line-height: 1.5; color: #555; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta::before { content: ""; position: absolute; left: 24px; top: 30px; width: 30px; height: 30px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%232f95d7%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%205h16v11H9l-5%204z%27/%3E%3C/svg%3E") no-repeat center / 30px 30px; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta strong { font-size: 16px; font-weight: 600; line-height: 1.5; color: #000; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta-odkazy { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0 24px 22px 72px; background: #f5f5f5; border-radius: 0 0 4px 4px; } body.in-pojmy-test .pageArticleDetail a.pojmy-btn { display: inline-block; padding: 11px 22px; background: #468c98; border: 0; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; color: #fff; text-decoration: none; } body.in-pojmy-test .pageArticleDetail a.pojmy-btn:hover, body.in-pojmy-test .pageArticleDetail a.pojmy-btn:focus { background: #3b7883; color: #fff; text-decoration: none; } body.in-pojmy-test .pageArticleDetail a.pojmy-btn-obrys { padding: 10px 22px; background: transparent; border: 1px solid #468c98; color: #468c98; } body.in-pojmy-test .pageArticleDetail a.pojmy-btn-obrys:hover, body.in-pojmy-test .pageArticleDetail a.pojmy-btn-obrys:focus { background: #468c98; color: #fff; } /* -------------------------------------------------------------------------- 11. Responzivní úpravy -------------------------------------------------------------------------- */ /* tablet: obsah ve 2 sloupcích (bez pevného rozložení z návrhu) */ @media (max-width: 991px) { body.in-pojmy-test .pageArticleDetail h2#obsah + ul, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* :nth-child(n) kvůli stejné specificitě jako pevné rozložení výše */ body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(n), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(n) { grid-column: auto; grid-row: auto; } /* nejdelší 3. skupina přes dva řádky, 4. a 5. vedle ní */ body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(3), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(3) { grid-row: span 2; } } /* mobil */ @media (max-width: 767px) { body.in-pojmy-test .pageArticleDetail h2#obsah + ul, body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah { grid-template-columns: minmax(0, 1fr); gap: 12px; } body.in-pojmy-test .pageArticleDetail h2#obsah + ul > li:nth-child(n), body.in-pojmy-test .pageArticleDetail ul.pojmy-obsah > li:nth-child(n) { grid-row: auto; padding: 14px; } body.in-pojmy-test .pageArticleDetail h2:not(#obsah) { margin-top: 36px; padding: 12px 14px 2px 70px; font-size: 18px; } body.in-pojmy-test .pageArticleDetail h2:not(#obsah)::before { left: 14px; top: 12px; } body.in-pojmy-test .pageArticleDetail h2:not(#obsah) + p, body.in-pojmy-test .pageArticleDetail p.pojmy-podtitul { padding: 0 14px 12px 70px; } body.in-pojmy-test .pageArticleDetail h3 { margin-top: 24px; padding-top: 16px; font-size: 16px; } body.in-pojmy-test .pageArticleDetail p.pojmy-schema-sudu, body.in-pojmy-test .pageArticleDetail h2 + p + p:has(> img) { padding: 8px; } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy, body.in-pojmy-test .pageArticleDetail ol + ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.in-pojmy-test .pageArticleDetail ul.pojmy-piktogramy li a, body.in-pojmy-test .pageArticleDetail ol + ul li a { padding: 12px 6px; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta { margin-top: 40px; padding: 18px 16px 12px 60px; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta::before { left: 16px; top: 24px; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta-odkazy { padding: 0 16px 18px 60px; } } /* malé displeje: rozměrová schémata nad textem, tlačítka pod sebou */ @media (max-width: 599px) { body.in-pojmy-test .pageArticleDetail img.pojmy-schema, body.in-pojmy-test .pageArticleDetail h3 + p > img:first-child { float: none; display: block; margin: 0 auto 12px; } /* schéma sudu: na malých displejích se místo verze s popisky zobrazí varianta jen s čísly (popisky jsou v číslované legendě pod obrázkem) */ body.in-pojmy-test .pageArticleDetail p.pojmy-schema-sudu img, body.in-pojmy-test .pageArticleDetail h2 + p + p > img { display: none; } body.in-pojmy-test .pageArticleDetail p.pojmy-schema-sudu::before, body.in-pojmy-test .pageArticleDetail h2 + p + p:has(> img)::before { content: ""; display: block; width: 100%; max-width: 340px; aspect-ratio: 510 / 430; margin: 0 auto; background: url("https://www.levne-prepravky.cz/user/documents/upload/pojmy/pojmy-schema-sudu-mobil.png") center center / contain no-repeat; } @supports not (aspect-ratio: 1 / 1) { body.in-pojmy-test .pageArticleDetail p.pojmy-schema-sudu::before, body.in-pojmy-test .pageArticleDetail h2 + p + p:has(> img)::before { height: 0; padding-top: 84.3%; } } } @media (max-width: 479px) { body.in-pojmy-test .pageArticleDetail p.pojmy-cta, body.in-pojmy-test .pageArticleDetail p.pojmy-cta-odkazy { padding-left: 16px; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta { padding-top: 16px; } body.in-pojmy-test .pageArticleDetail p.pojmy-cta::before { display: none; } body.in-pojmy-test .pageArticleDetail a.pojmy-btn { flex: 1 1 100%; } }