/* ===================================================================== INDUSTRIEN – styly nové úvodní strany Nahráno jako soubor mezi dokumenty, načítá se přes v : https://cdn.myshoptet.com/usr/www.industrien.cz/user/documents/hlavni-strana.css Patří k souboru 01-uvodni-text.html, který obsahuje samotný obsah stránky. Bez něj se neuplatní nic, bez tohoto CSS bude obsah nestylovaný a sekce se zobrazí ve špatném pořadí. ROZSAH PLATNOSTI Pravidla platí na `body.type-index` (titulní strana) a zároveň na `body.in-nova-hlavni-stranka` (testovací stránka /nova-hlavni-stranka/), aby šlo návrh prohlédnout před nasazením na ostro. Na ostatní stránky e-shopu nemá soubor žádný vliv. Až bude hotovo, testovací třídu ze selektorů stačí vypustit. Další testovací stránku přidáte stejně: `body:is(.type-index, .in-nova-hlavni-stranka, .in-dalsi-slug) #content` ===================================================================== */ /* ===================================================================== 1) DESIGN TOKENY ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content { --ind-navy: #010066; /* firemní modrá (= Shoptet --color-primary) */ --ind-navy-deep: #00003d; /* tmavší plocha */ --ind-navy-line: #232a86; /* linky na tmavém podkladu */ /* Firemní červená #fe0000 má na bílé kontrast jen 4,03:1, což na drobný text ani na tlačítko nestačí (WCAG AA vyžaduje 4,5:1). Používáme ji proto jen jako dekoraci (linky, pruhy) a pro text a tlačítka máme o stupeň tmavší odstín, který AA splní a barevně drží pohromadě. */ --ind-red: #fe0000; /* jen dekorace: pruhy, linky, focus */ --ind-red-text: #d60000; /* text a tlačítka – kontrast 5,44:1 */ --ind-red-deep: #a80000; /* hover tlačítek */ --ind-ink: #0d1020; /* text: černá s modrým nádechem */ --ind-steel-50: #f5f6f9; --ind-steel-100: #eceef4; --ind-steel-200: #dcdfe9; --ind-steel-300: #c3c8d8; --ind-steel-500: #646b80; /* kontrast 5,31:1 na bílé, 4,91:1 na steel-50 */ --ind-steel-700: #3b4159; --ind-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, "Courier New", monospace; --ind-pad: clamp(20px, 3.2cqi, 40px); --ind-gap: clamp(30px, 4vw, 56px); } /* ===================================================================== 2) POŘADÍ SEKCÍ UVNITŘ #content Nativní bloky Shoptetu (produkty, články, hodnocení) se vykreslují až ZA uvítacím textem. Přes display:contents se sekce uvítacího textu stanou přímými flex položkami #content a pořadí pak řídí `order`. Řešení funguje bez JS a bez překreslení stránky po načtení. ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content { display: flex; flex-direction: column; gap: var(--ind-gap); min-width: 0; container-type: inline-size; container-name: hp; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .homepage-box.welcome-wrapper, body:is(.type-index, .in-nova-hlavni-stranka) #content > .homepage-box.welcome-wrapper > .welcome-wrapper, body:is(.type-index, .in-nova-hlavni-stranka) #content .welcome, body:is(.type-index, .in-nova-hlavni-stranka) #content .welcome > div, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hp { display: contents; } /* Shoptet zužuje vše uvnitř .welcome na 800 px – na nové HP to nechceme */ body:is(.type-index, .in-nova-hlavni-stranka) #content .welcome div { max-width: none; margin-left: 0; margin-right: 0; } /* prázdný karusel bannerů nad obsahem */ body:is(.type-index, .in-nova-hlavni-stranka) #content > .banners-row { display: none; } /* nativní boxy zbavíme rámečků a pozadí, ať drží rytmus nové stránky */ body:is(.type-index, .in-nova-hlavni-stranka) #content > .homepage-box:not(.welcome-wrapper), body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper, body:is(.type-index, .in-nova-hlavni-stranka) #content > .latest-contribution-wrapper { margin: 0; padding: 0; border: 0; background: none; } /* Pozor: vlastní sekce se selektují BEZ „>“. display:contents mění jen box model, nikoli DOM – v DOM zůstávají zanořené v uvítacím textu, takže „#content > .ind-hero“ by nic nenašlo. Nativní bloky Shoptetu naopak přímými potomky #content jsou, u nich „>“ platí. */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero { order: 10; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cats { order: 20; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .homepage-box:not(.welcome-wrapper) { order: 30; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-about { order: 40; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-refs { order: 50; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .latest-contribution-wrapper { order: 55; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-values { order: 60; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-services { order: 70; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-bloghead { order: 78; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper { order: 80; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-blogfoot { order: 82; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact { order: 90; } /* ===================================================================== 3) SPOLEČNÉ PRVKY ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content [class^="ind-"], body:is(.type-index, .in-nova-hlavni-stranka) #content [class*=" ind-"] { box-sizing: border-box; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--ind-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ind-steel-500); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-eyebrow::before { content: ""; flex: 0 0 auto; width: 18px; height: 3px; background: var(--ind-red); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-eyebrow--light { color: #a3a9e8; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-h2 { margin: 0; font-size: clamp(23px, 2.8cqi, 31px); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; color: var(--ind-ink); text-transform: none; text-wrap: balance; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ind-steel-200); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-head__link { flex: 0 0 auto; font-family: var(--ind-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ind-navy); text-decoration: none; border-bottom: 2px solid var(--ind-steel-300); padding-bottom: 2px; transition: border-color .15s, color .15s; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-head__link:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-head__link:focus-visible { color: var(--ind-red-text); border-bottom-color: var(--ind-red-text); text-decoration: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center; border: 2px solid transparent; border-radius: 0; transition: background-color .15s, color .15s, border-color .15s; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--primary { background: var(--ind-red-text); color: #fff; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--primary:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--primary:focus-visible { background: var(--ind-red-deep); color: #fff; text-decoration: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--ghost:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--ghost:focus-visible { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--dark { background: var(--ind-navy); color: #fff; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--dark:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-btn--dark:focus-visible { background: var(--ind-navy-deep); color: #fff; text-decoration: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hp a:focus-visible, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hp button:focus-visible, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hp input:focus-visible, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hp textarea:focus-visible { outline: 3px solid var(--ind-red); outline-offset: 2px; } /* ===================================================================== 4) HERO ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero { position: relative; overflow: hidden; padding: clamp(34px, 5cqi, 62px) var(--ind-pad); background: var(--ind-navy-deep); border-top: 3px solid var(--ind-red); color: #fff; } /* technický rastr – motiv strojařského výkresu */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.25) 62%, transparent 100%); -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,.25) 62%, transparent 100%); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero > * { position: relative; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__brand svg { width: 34px; height: 34px; display: block; flex: 0 0 auto; fill: #fff; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__brand span { font-size: 19px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #fff; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__title { margin: 0 0 16px; max-width: 20ch; font-size: clamp(29px, 5.2cqi, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; color: #fff; text-transform: none; text-wrap: balance; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__title b { color: #fff; font-weight: 800; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__lead { margin: 0 0 26px; max-width: 56ch; font-size: clamp(15px, 1.7cqi, 18px); line-height: 1.6; color: #cdd2f2; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: clamp(28px, 4cqi, 44px) 0 0; padding: 0; list-style: none; background: var(--ind-navy-line); border: 1px solid var(--ind-navy-line); } @container hp (min-width: 620px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__facts li { margin: 0; padding: 16px 18px; background: var(--ind-navy-deep); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__facts strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__facts span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #a3a9e8; } /* ===================================================================== 5) ROZCESTNÍK KATEGORIÍ ===================================================================== */ /* 8 dlaždic – držíme sudý počet sloupců, ať poslední řádek nezůstane trhaný */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } @container hp (min-width: 760px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat { position: relative; display: flex; flex-direction: column; background: var(--ind-steel-50); border: 1px solid var(--ind-steel-200); text-decoration: none; color: var(--ind-ink); transition: border-color .18s, box-shadow .18s, transform .18s; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat:focus-visible { border-color: var(--ind-navy); box-shadow: 0 10px 24px -14px rgba(1,0,102,.5); transform: translateY(-2px); text-decoration: none; color: var(--ind-ink); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat__media { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-bottom: 1px solid var(--ind-steel-200); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; display: block; mix-blend-mode: multiply; transition: transform .3s ease; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat:hover .ind-cat__media img { transform: scale(1.05); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat__body { padding: 14px 16px 16px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat__meta { display: block; margin-top: 5px; font-family: var(--ind-mono); font-size: 11.5px; line-height: 1.45; color: var(--ind-steel-500); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ind-red); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat:hover::after, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat:focus-visible::after { transform: scaleX(1); } /* ===================================================================== 6) NATIVNÍ VÝPISY PRODUKTŮ (Produkty → Titulní strana) ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content > .homepage-box:not(.welcome-wrapper) { display: flex; flex-direction: column; } body:is(.type-index, .in-nova-hlavni-stranka) #content .homepage-group-title { order: -1; margin: 0 0 22px !important; padding: 0 0 14px !important; border-bottom: 1px solid var(--ind-steel-200); font-size: clamp(23px, 2.8cqi, 31px); font-weight: 800; letter-spacing: -.015em; text-align: left !important; color: var(--ind-ink); text-transform: none; } /* ===================================================================== 7) KDO JSME ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3.4cqi, 40px); } @container hp (min-width: 720px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-about__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-about p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: var(--ind-steel-700); max-width: 68ch; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-about p:last-of-type { margin-bottom: 22px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-facts { margin: 0; padding: 0; border-top: 1px solid var(--ind-steel-200); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--ind-steel-200); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-facts dt { font-family: var(--ind-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ind-steel-500); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-facts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ind-ink); } /* ===================================================================== 8) REFERENCE ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-refgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; } @container hp (min-width: 700px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-refgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-ref { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--ind-steel-200); border-top: 3px solid var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-ref__logo { display: flex; align-items: center; justify-content: flex-start; height: 46px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-ref__logo img { max-height: 46px; max-width: 165px; width: auto; height: auto; display: block; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-ref__field { font-family: var(--ind-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ind-red-text); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-ref h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ind-ink); text-transform: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-ref p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ind-steel-700); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4cqi, 48px); justify-content: center; padding: 22px var(--ind-pad); background: var(--ind-navy-deep); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-logos img { height: 30px; width: auto; opacity: .72; transition: opacity .2s; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-logos img:hover { opacity: 1; } /* poslední hodnocení – jemné doladění nativního bloku */ body:is(.type-index, .in-nova-hlavni-stranka) #content > .latest-contribution-wrapper { padding: 22px var(--ind-pad); background: var(--ind-steel-50); border: 1px solid var(--ind-steel-200); } body:is(.type-index, .in-nova-hlavni-stranka) #content > .latest-contribution-wrapper h2 { font-size: 15px; font-weight: 700; text-transform: none; color: var(--ind-ink); } /* ===================================================================== 9) NAŠE KVALITY ===================================================================== */ /* 6 položek – 1 / 2 / 3 sloupce, vždy plné řádky */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-valgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--ind-steel-200); border: 1px solid var(--ind-steel-200); } @container hp (min-width: 560px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-valgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container hp (min-width: 940px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-valgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val { display: flex; gap: 15px; padding: 20px; background: #fff; text-decoration: none; color: inherit; transition: background-color .16s; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val:focus-visible { background: var(--ind-steel-50); text-decoration: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val svg { flex: 0 0 auto; width: 30px; height: 30px; color: var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val:hover svg { color: var(--ind-red-text); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ind-ink); text-transform: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ind-steel-700); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val__more { display: inline-block; margin-top: 7px; font-family: var(--ind-mono); font-size: 12px; color: var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-val:hover .ind-val__more { color: var(--ind-red-text); } /* ===================================================================== 10) SLUŽBY ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } @container hp (min-width: 860px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svcgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc { position: relative; display: flex; flex-direction: column; background: var(--ind-navy-deep); color: #fff; text-decoration: none; border: 1px solid var(--ind-steel-200); transition: box-shadow .18s, transform .18s; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(1,0,102,.6); text-decoration: none; color: #fff; } /* fotky mají v patě natvrdo vypálený popisek – ořízneme spodních ~16 % */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc__media img { position: absolute; inset: 0; width: 100%; height: 120%; object-fit: cover; object-position: 50% 0; transition: transform .35s ease; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc:hover .ind-svc__media img { transform: scale(1.05); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,61,.05) 0%, rgba(0,0,61,.72) 100%); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc__body { padding: 16px 18px 18px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; text-transform: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #bfc5ef; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc__more { display: inline-block; margin-top: 10px; font-family: var(--ind-mono); font-size: 12px; letter-spacing: .05em; color: #fff; border-bottom: 2px solid var(--ind-red); padding-bottom: 1px; } /* ===================================================================== 11) ČLÁNKY – nativní blok rubriky na domovské stránce ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-bloghead { margin-bottom: calc(var(--ind-gap) * -1 + 22px); } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .homepage-group-title { display: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item { display: flex !important; flex-direction: column; gap: 10px; width: auto !important; flex-basis: auto !important; margin: 0 !important; padding: 20px !important; background: var(--ind-steel-50); border: 1px solid var(--ind-steel-200); } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item .image { width: 100%; margin: 0; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item .image img { width: 100%; height: auto; display: block; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item .text { display: block; } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item .title { margin: 0 0 8px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item .description, body:is(.type-index, .in-nova-hlavni-stranka) #content > .blog-wrapper .news-item .description p { margin: 0; font-size: 14px !important; line-height: 1.6 !important; color: var(--ind-steel-700); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-blogfoot { margin-top: calc(var(--ind-gap) * -1 + 10px); } /* ===================================================================== 12) KONTAKTNÍ BLOK ===================================================================== */ body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.4cqi, 44px); padding: clamp(24px, 3.6cqi, 44px) var(--ind-pad); background: var(--ind-steel-50); border: 1px solid var(--ind-steel-200); border-top: 3px solid var(--ind-navy); } @container hp (min-width: 720px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact__lead { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--ind-steel-700); max-width: 46ch; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact__big { display: block; margin-bottom: 6px; font-size: clamp(21px, 2.7cqi, 28px); font-weight: 800; letter-spacing: -.01em; color: var(--ind-navy); text-decoration: none; font-variant-numeric: tabular-nums; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact__big:hover { color: var(--ind-red-text); text-decoration: none; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact__note { margin: 14px 0 0; font-family: var(--ind-mono); font-size: 12.5px; line-height: 1.7; color: var(--ind-steel-500); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact .form-group { margin-bottom: 12px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ind-steel-700); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact .form-control { width: 100% !important; margin: 0 !important; padding: 11px 13px; font-size: 14px; color: var(--ind-ink); background: #fff; border: 1px solid var(--ind-steel-300); border-radius: 0; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact .form-control:focus { border-color: var(--ind-navy); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact .consents label { font-weight: 400; font-size: 12.5px; color: var(--ind-steel-500); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact .submit-wrapper { margin-top: 14px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact input[type="submit"] { padding: 14px 30px; font-size: 15px; font-weight: 700; color: #fff; background: var(--ind-red-text); border: 0; border-radius: 0; cursor: pointer; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact input[type="submit"]:hover { background: var(--ind-red-deep); } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-contact .red { color: var(--ind-red-text); } /* ===================================================================== 13) MOBIL ===================================================================== */ @media (max-width: 767px) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hero__cta .ind-btn { width: 100%; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-catgrid { gap: 10px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-head { align-items: flex-start; flex-direction: column; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-logos { gap: 22px; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-logos img { height: 24px; } } @media (prefers-reduced-motion: reduce) { body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-hp *, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc { transition: none !important; } body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-cat:hover, body:is(.type-index, .in-nova-hlavni-stranka) #content .ind-svc:hover { transform: none; } } /* ===================================================================== 14) POUZE PRO NÁHLED NA /nova-hlavni-stranka/ Shoptet běžné textové stránky ořezává na 800 px (`.content-inner`) a vypisuje nad obsah název stránky. Titulní strana ani jedno nemá, takže to tady vypneme, aby náhled odpovídal skutečnosti. >>> PŘI NASAZENÍ NA OSTRO CELOU TUTO SEKCI SMAŽTE. <<< ===================================================================== */ body.in-nova-hlavni-stranka #content .content-inner { max-width: none; } body.in-nova-hlavni-stranka #content .pageArticleDetail > header { display: none; }