/** * skp — jednotná barevná úprava fotografií * * Fotografie pocházejí z různých focení a mají různou teplotu: dispečink je * studeně modrý, snímky hlídek oranžové od zapadajícího slunce, tým venku * zelený, vozidlo zlaté. Vedle sebe působily jako sbírka stock fotek. * * Úprava je záměrně mírná. Cílem je srovnat teplotu tak, aby fotky spadly * do palety, ne aby zešedly nebo ztratily čitelnost. * * Design kontrakt tuhle úpravu vyžaduje (sekce Fotografie) a zároveň z ní * vyjímá loga třetích stran. */ .et_pb_post_content .et_pb_image img, .et_pb_post_content .et_pb_blurb img, .et-l--header .et_pb_blurb img { filter: saturate( 0.82 ) contrast( 1.06 ) brightness( 0.97 ); } /* Navy vrstva srovná teplotu tam, kam samotný filtr nedosáhne (teplé západy slunce zůstávají teplé i po snížení sytosti). */ .et_pb_post_content .et_pb_image .et_pb_image_wrap, .et_pb_post_content .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap { position: relative; display: block; } /* Podmínka :has( img ) je tu podstatná. Blurb může místo fotografie nést Divi ikonu (), a ta žádnou barevnou úpravu nepotřebuje — je to vektor v barvě palety, ne snímek. Bez té podmínky se navy vrstva kreslila i přes ikonu, a protože obal je o řádek výš roztažený na display: block, roztáhl se s ním i překryv přes celou šířku sloupce. Na kartách služeb na homepage z toho byl světlejší obdélník pod ikonou, zasahující až k nadpisu. Prohlížeč bez podpory :has() pravidlo přeskočí — fotografie zůstanou bez navy vrstvy, což je přijatelné; obdélník se nevykreslí tak jako tak. */ .et_pb_post_content .et_pb_image .et_pb_image_wrap::after, .et_pb_post_content .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap:has( img )::after { content: ""; position: absolute; inset: 0; background-color: rgba( 11, 21, 38, 0.18 ); pointer-events: none; border-radius: inherit; } /* VÝJIMKA: loga referencí. Jsou to cizí značky a jejich barvy se upravovat nesmí. Sekce nese třídu skp-reference, takže se výjimka neváže na číslo modulu, které se při editaci stránky mění. Stejná specificita jako pravidla výše, ale pozdější pořadí, takže vyhraje. */ .skp-reference .et_pb_image img { filter: none; } .skp-reference .et_pb_image .et_pb_image_wrap::after { content: none; } /* Logo v hlavičce je vlastní značka, žádná fotografie. */ .et-l--header .et_pb_menu__logo img { filter: none; } /* =========================================================================== FOTKA KONZULTANTKY V POPTÁVKOVÉM BLOKU =========================================================================== Snímek je vyříznutá postava s průhledným pozadím (WebP s alfa kanálem), ne fotografie v rámu. To s sebou nese dvě věci, které ostatní fotky na webu nemají: 1) Postava sahá skoro na okraj podkladu — neprůhledná plocha jde od 4 do 392 px ze 400 — takže boční řez saka je na tmavém pozadí vidět jako svislá hrana. 2) Sako je široké přes celou fotku, takže se při 300px kreslilo přes pravou hranu popiskové karty pod fotkou. Zúžení srovná postavu nad kartu, maska nechá zmizet boční hrany. Spodní hrana zůstává ostrá záměrně — fotka končí přesně na horní hraně popiskové karty, takže na ní postava stojí. Modul nese třídu skp-foto-konzultace, takže se pravidla neváží na číslo modulu — to se stránku od stránky mění. =========================================================================== */ .et_pb_image.skp-foto-konzultace { /* Popisková karta pod fotkou nemá pevnou šířku, roztahuje ji vlastní text (~278px). 270px drží postavu uvnitř i kdyby se popisek mírně změnil. Divi dává modulu max-width: 300px přes číslovanou třídu (.et_pb_image_1) v kritickém CSS. Dvě třídy tady mají vyšší specificitu, takže !important není potřeba — na rozdíl od šířky řádku, kde si Divi !important vynucuje samo. */ max-width: 270px; } .skp-foto-konzultace img { /* Fade jen do stran, spodní hrana zůstává ostrá. Spodní řez se nemaskuje schválně: fotka končí přesně tam, kde začíná popisková karta, takže postava na kartě stojí a řez není vidět. Rozpuštěná spodní hrana ten dojem rušila — postava se nad kartou vznášela. Prohlížeč bez podpory masku přeskočí a vykreslí fotku beze změny. Ostřejší boky jsou horší vzhled, ne rozbitý layout. */ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 9%, #000 91%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 9%, #000 91%, transparent 100% ); } /* Navy vrstva se na vyříznuté postavě kreslí i přes průhledná místa kolem hlavy a ramen — z plošného překryvu je pak na tmavém podkladu slabě světlejší obdélník. Barevný filtr zůstává, ruší se jen ta vrstva. */ .et_pb_image.skp-foto-konzultace .et_pb_image_wrap::after { /* Obě třídy jsou na jednom modulu. Bez té druhé má pravidlo nižší specificitu než původní .et_pb_post_content .et_pb_image .et_pb_image_wrap::after a překryv se kreslí dál — ověřeno, napoprvé to neprošlo. */ content: none; } /* =========================================================================== SVĚTLÁ FOTKA V ROZCESTNÍKU SLUŽEB =========================================================================== Tři ze čtyř karet v rozcestníku nesou fotky z tmavých scén (dispečink, noční hlídka, doprovod), úklid je proti nim denní záběr do prosvětlené kanceláře. Po standardní úpravě měly tmavé fotky průměrný jas 30 z 255, úklid 111 — karta z řady viditelně vyskakovala. Silnější potlačení jasu a sytosti plus hustší navy vrstva srovnají úklid na jas 38, tedy na úroveň nejsvětlejší z ostatních tří (dispečink, 38). Zkoušeny i mírnější varianty: samotná navy vrstva na 55 % nechala jas na 71, což pořád vyčnívalo. Váže se na třídu, ne na název souboru — je to Divi modul, takže je pravidlo vidět i v builderu. Kdyby se fotka vyměnila za tmavou, třídu je potřeba z modulu odebrat, jinak scéna zčerná. =========================================================================== */ .et_pb_post_content .et_pb_image.skp-foto-ztmavena img { /* Vyšší specificita než .et_pb_post_content .et_pb_image img výše, jinak by se prosadila původní, mírnější úprava. */ filter: saturate( 0.55 ) contrast( 1.15 ) brightness( 0.45 ); } .et_pb_post_content .et_pb_image.skp-foto-ztmavena .et_pb_image_wrap::after { background-color: rgba( 11, 21, 38, 0.55 ); } /* =========================================================================== NÁHLED ČLÁNKU: OŘEZ FOTKY NA VÝŠKU =========================================================================== Náhledy ve výpisu blogu jsou široký pás (554 × 220 px) a Divi je plní přes object-fit: cover se středovým ořezem. U fotky na šířku to vychází, u fotky na výšku ne: strazni-skp.jpg má 854 × 1280 px, po přeškálování na šířku náhledu je vysoká 830 px a vidět je z ní jen 220 px. Střed padne na trupy, takže z obou strážných zbyla torza bez hlav. 28 % posune výřez do horní třetiny — tváře i loga na vestách jsou v záběru a nad hlavami zůstane vzduch. Ověřeno i 34 %: to už se vlasy dotýkají horní hrany. Pravidlo cílí na konkrétní soubor schválně. Druhý článek má detail rukou v rukavicích, kde je středový ořez správně, a plošný posun by ho zhoršil. Až se featured image vymění, pravidlo samo přestane platit. =========================================================================== */ .entry-featured-image-url img[src*="strazni-skp"] { object-position: 50% 28%; } /* =========================================================================== STICKY CTA LIŠTA NA TELEFONU =========================================================================== Předloha ji má (index.html, .s-call), na webu chyběla. Na telefonu je telefonní číslo jinak schované v hamburger menu, takže nejrychlejší cesta ke kontaktu vede přes trvale dostupný pruh. Do 767px, tedy jen tam, kde se hlavička sbalí do hamburgeru. =========================================================================== */ .skp-cta-lista { display: none; } @media ( max-width: 767px ) { /* Lišta startuje zasunutá pod okrajem. V hero má návštěvník vlastní dvě CTA a telefon v hlavičce, takže by tam jen překážela; vysouvá se až po odscrollování hero (třídu přidává js/motion.js). */ .skp-cta-lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 10px; padding: 10px 16px calc( 10px + env( safe-area-inset-bottom ) ); background-color: rgba( 11, 21, 38, 0.94 ); backdrop-filter: blur( 8px ); -webkit-backdrop-filter: blur( 8px ); border-top: 1px solid rgba( 255, 255, 255, 0.07 ); transform: translateY( 100% ); visibility: hidden; transition: transform 260ms ease, visibility 0s linear 260ms; } .skp-cta-odkryta .skp-cta-lista { transform: translateY( 0 ); visibility: visible; transition: transform 260ms ease, visibility 0s; } .skp-cta-lista a { flex: 1 1 0; min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: var( --et_global_body_font, 'Inter' ), sans-serif; font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; } .skp-cta-lista__tel { border: 1px solid rgba( 255, 255, 255, 0.45 ); color: #FFFFFF; } .skp-cta-lista__tel:hover, .skp-cta-lista__tel:focus-visible { border-color: #F5C400; color: #F5C400; } .skp-cta-lista__nabidka { background-color: #F5C400; color: #111111; } .skp-cta-lista__nabidka:hover, .skp-cta-lista__nabidka:focus-visible { background-color: #FFD633; } /* Odsazení drží konec patičky nad lištou. Je trvalé schválně — kdyby se přidávalo až s lištou, obsah by při jejím vysunutí poskočil. */ body { padding-bottom: 76px; } } @media ( prefers-reduced-motion: reduce ) { .skp-cta-lista { transition: none; } } /* --------------------------------------------------------------------------- VIDEA Divi vykresluje modul divi/video jako .et_pb_video_box s