/*
* Vzhled webu - varianta A ze designového plátna.
*
* Bílá hlavička, žlutý pruh navigace, tmavý hero. Žlutá je PLOCHA, nikdy text:
* na bílé má kontrast 1,43:1 a nepřečte ji nikdo. Jako podklad pod inkoustem
* má 11,2:1, což projde i pro drobné písmo.
*
* Co tenhle soubor NEDĚLÁ: nepřestavuje hlavičku ani patičku. Ty jsou šablony
* Elementoru (header 8880, footer 8886) a patří do editoru, ne do CSS - když
* se struktura přepisuje stylem, rozbije se při první úpravě v editoru.
*
* Specificita: kit Elementoru sází na .elementor-kit-XXXX (0,1,0). Proto
* body[class*="elementor-kit-"] (0,1,1) - vyhraje, a přitom nezadrátuje ID
* kitu, které se při importu do jiného prostředí může lišit.
*/
:root {
/* Barvy. Žlutá je měřená ze stávajícího webu (#FFD402, 79 výskytů),
zaokrouhlená na #FFD400. Inkoustů měl web čtyři (#000, #020101,
#131313, #080808) - sjednoceno na jeden.
Inkoust je od 25. 9. 2026 tmavý antracit #1E2227, dřív #121212.
Plochy hera a patičky tím přestaly působit jako díra a kontrast
zůstal vysoko: bílý text 16,0:1, žlutá 11,2:1. Odvozené tmavé
odstíny (linky, záře pod strojem, inkoust-2) se posunuly o stejný
krok, aby rodina držela pohromadě. */
--sms-zluta: #FFD400;
--sms-zluta-tmava: #E9C100; /* stisknuté tlačítko, okraj */
--sms-inkoust: #1E2227;
--sms-inkoust-2: #494D52;
--sms-text-tlumeny: #5C5C5C; /* 6,4:1 na bílé - projde i pro 14 px */
--sms-linka: #E3E1DC;
--sms-plocha: #F5F3EF;
--sms-bila: #FFFFFF;
/* Stavy skladu. Zelená i jantarová jsou ztmavené tak, aby prošly
na bílé 4,5:1 - výchozí zelená WooCommerce neprojde. */
--sms-skladem: #1B7A3E;
--sms-na-objednavku: #8A5A00;
/* Písmo. Russo One zůstává ze stávajícího webu na displej (90 výskytů
v datech Elementoru), Saira nahrazuje Roboto i Ubuntu. Tři rodiny
na dvě.
Saira se nepřibaluje do tématu: Elementor má zapnuté
elementor_local_google_fonts, takže si písmo stáhne a hostuje sám,
jakmile je nastavené v kitu (config/design.php). Do té doby padá
sazba na systémové písmo - čitelné, jen ne cílové. */
--sms-pismo-displej: "Russo One", "Saira", Impact, sans-serif;
--sms-pismo-text: "Saira", "Segoe UI", system-ui, -apple-system, sans-serif;
--sms-radius: 3px;
--sms-klik: 44px; /* minimální klikací plocha */
}
/* --- písmo ---------------------------------------------------------------- */
body[class*="elementor-kit-"],
body[class*="elementor-kit-"] button,
body[class*="elementor-kit-"] input,
body[class*="elementor-kit-"] select,
body[class*="elementor-kit-"] textarea {
font-family: var(--sms-pismo-text);
}
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4 {
font-family: var(--sms-pismo-displej);
text-wrap: balance;
}
/* Russo One má jen jeden řez. Tučné písmo v něm prohlížeč "vyrobí" sám
a výsledek je rozmazaný - proto se váha drží na normálu. */
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3 {
font-weight: 400;
}
/* --- karta produktu ------------------------------------------------------- */
/*
* Fotky v katalogu mají různý poměr stran i různé pozadí - od miniatury po
* plnou šířku. Pevná plocha s contain je srovná, aniž by se cokoli ořízlo:
* u stroje za 700 000 Kč je oříznutý nárazník horší než prázdný okraj.
*/
.jet-woo-product-thumbnail {
background: var(--sms-bila);
border-radius: var(--sms-radius);
overflow: hidden;
}
.jet-woo-product-thumbnail img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
max-width: 100%;
object-fit: contain;
background: var(--sms-bila);
}
.jet-woo-products__item-content {
padding-top: 14px;
}
/*
* Kategorie byla žlutý text na bílé. Teď je to štítek: plocha nese barvu.
*
* font-size: 0 na seznamu není trik pro efekt - WooCommerce sází mezi položky
* čárky jako holý text. Ve flexu by z každé čárky byla samostatná položka
* mřížky, v inline sazbě visí mezi štítky. Nulová velikost je spolkne a na
* odkazu se velikost vrací zpátky.
*/
.jet-woo-product-categories ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
.jet-woo-product-categories li {
display: inline-block;
margin: 0 6px 6px 0;
}
.jet-woo-product-categories a {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 9px;
background: #F0EEE9;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
text-decoration: none;
}
/*
* Barva zvlášť a s !important. Není to lenost - je to jediná cesta, jak
* přebít CSS, které Elementor generuje:
*
* .elementor-9846 .elementor-element.elementor-element-9797e8f
* .jet-woo-products .jet-woo-product-categories a { color:#FFD402 }
*
* Ta selektivita se dá přeskočit jen napsáním ID stránky a ID widgetu, a ta
* se v jiném prostředí liší a při každé úpravě v editoru se generují znovu.
* Zadrátovat je do tématu by znamenalo, že se styl tiše rozpadne. Tohle je
* pojistka, ne náhrada za přepojení widgetů na globální barvy (TODO 11).
*/
.jet-woo-product-categories a {
color: var(--sms-inkoust-2) !important;
}
.jet-woo-product-categories a:hover,
.jet-woo-product-categories a:focus-visible {
background: var(--sms-zluta);
color: var(--sms-inkoust) !important;
}
.jet-woo-product-title {
font-family: var(--sms-pismo-text);
font-size: 17px;
font-weight: 600;
line-height: 1.35;
margin: 8px 0 0;
}
.jet-woo-product-title a {
color: var(--sms-inkoust);
text-decoration: none;
}
/*
* Cena je to, kvůli čemu na kartu lidé koukají. Číslice musí být tabulkové,
* jinak se ceny pod sebou rozjedou o půl znaku a sloupec vypadá rozbitě.
*/
.jet-woo-product-price,
.jet-woo-product-price .price,
.woocommerce-Price-amount {
color: var(--sms-inkoust);
font-variant-numeric: tabular-nums;
}
.jet-woo-product-price .price {
font-size: 19px;
font-weight: 700;
}
.jet-woo-product-excerpt {
color: var(--sms-text-tlumeny);
font-size: 14px;
line-height: 1.55;
}
/* --- tlačítka ------------------------------------------------------------- */
/*
* Jedno primární tlačítko: žlutá plocha, inkoust na ní. Sekundární je obrys.
* Výška 48 px - nad hranicí 44 px, kterou chce mobil.
*/
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 26px;
background: var(--sms-zluta);
color: var(--sms-inkoust);
border: 1px solid var(--sms-zluta);
border-radius: var(--sms-radius);
font-family: var(--sms-pismo-text);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color 120ms ease, border-color 120ms ease;
}
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-element-button:hover {
background: var(--sms-zluta-tmava);
border-color: var(--sms-zluta-tmava);
color: var(--sms-inkoust);
}
/* --- viditelné zaměření --------------------------------------------------- */
/*
* Bez tohohle se po webu nedá projít klávesnicí - a projít se po něm takhle
* musí dát, protože poptávkový formulář je jediná konverzní cesta na webu.
*/
body[class*="elementor-kit-"] :focus-visible {
outline: 3px solid var(--sms-inkoust);
outline-offset: 2px;
}
body[class*="elementor-kit-"] .jet-woo-products__item a:focus-visible {
outline-offset: 4px;
}
/* --- klikací plochy na mobilu --------------------------------------------- */
@media (max-width: 767px) {
body[class*="elementor-kit-"] .elementor-nav-menu a,
body[class*="elementor-kit-"] .menu-item a {
min-height: var(--sms-klik);
display: flex;
align-items: center;
}
}
/* --- žlutá jako plocha, ne text ------------------------------------------- */
/*
* Pojistka, ne náhrada za opravu v editoru: kdekoli zbyl žlutý TEXT ze
* stávajícího webu (obě odstíny, které se v datech Elementoru vyskytují),
* přebarví se na inkoust. Na tmavém podkladu se žlutý text nechává - tam
* kontrast projde (16,0:1 na #1E2227).
*/
body[class*="elementor-kit-"] .elementor-widget-container [style*="color:#FFD402"],
body[class*="elementor-kit-"] .elementor-widget-container [style*="color: #FFD402"],
body[class*="elementor-kit-"] .elementor-widget-container [style*="color:#ffd402"],
body[class*="elementor-kit-"] .elementor-widget-container [style*="color: #ffd402"] {
color: var(--sms-inkoust);
}
/* --- tisk ----------------------------------------------------------------- */
@media print {
.jet-woo-product-img-overlay,
.jet-woo-item-overlay-link {
display: none;
}
}
/* --- filtry v katalogu ----------------------------------------------------- */
/*
* Počty u kategorií byly žluté na bílé - 1,43:1. To není "málo výrazné",
* to je neviditelné. Žlutá se v filtrech nepoužívá vůbec: filtr je nástroj,
* ne poutač, a barva webu patří tlačítkům, ne číslům v závorce.
*/
.jet-filters-counter,
.jet-filters-counter .counter-prefix,
.jet-filters-counter .counter-suffix,
.jet-filters-counter .counter-value {
color: var(--sms-text-tlumeny) !important;
font-variant-numeric: tabular-nums;
}
.jet-filter-label,
.jet-checkboxes-list .jet-filter-label {
color: var(--sms-inkoust);
}
/* Táhlo ceny: plocha táhla nese žlutou, popisky zůstávají v inkoustu. */
.jet-range__slider__track__range {
background: var(--sms-zluta);
}
.jet-range__slider__input {
border-color: var(--sms-inkoust);
}
.jet-range__inputs,
.jet-range__values {
color: var(--sms-inkoust);
font-variant-numeric: tabular-nums;
}
/* Zaškrtávátko filtru musí jít trefit prstem. */
.jet-checkboxes-list__row {
min-height: var(--sms-klik);
display: flex;
align-items: center;
}
/* --- hlavička a patička (config/sablony.php) ------------------------------ */
/* Logo má výšku z návrhu, ne šířku: 46 px v hlavičce, 36 px v patičce.
Šířku si SVG dopočítá, takže výměna souboru v knihovně nic nerozbije.
Elementor má pro SVG v odkazu pravidlo `a img[src$=".svg"] { width: 48px }`
(0,1,2), proto tady selektor se stejnou vahou plus třída. */
.sms-logo a img,
.sms-logo .elementor-widget-container > a {
display: block;
}
.elementor-widget-image.sms-logo a img[src$=".svg"],
.sms-logo a img {
height: 46px;
width: auto;
max-width: none;
}
.elementor-widget-image.sms-logo-paticka a img[src$=".svg"],
.sms-logo-paticka a img {
height: 36px;
width: auto;
max-width: none;
}
/* Logo se v řádku nesmí smrštit; odkazy a tlačítko jdou doprava, hledání
zůstává u loga (plátno: max-width 520 px, zbytek prázdný). */
.sms-logo {
flex-shrink: 0;
}
.sms-menu-hlavicka {
margin-inline-start: auto;
}
.sms-hledani {
flex-shrink: 1;
min-width: 0;
}
/* Podtržení aktivní kategorie sedí na spodní hranu žlutého pruhu. */
.sms-menu-kategorie .elementor-nav-menu--main .elementor-item {
line-height: 1;
}
@media (max-width: 767px) {
.elementor-widget-image.sms-logo a img[src$=".svg"],
.sms-logo a img {
height: 36px;
}
}
/* ---------------------------------------------------------------------------
Katalog (config/katalog.php): karta produktu, filtry, stránkování
--------------------------------------------------------------------------- */
/* Štítek kategorie obepíná text (plátno), ne celou šířku karty: widget má
sice `_element_width: auto`, ale ve sloupcovém kontejneru ho roztáhne
`align-items: stretch`. */
.sms-karta-stitek {
align-self: flex-start;
}
/* Obrázek karty: pevná výška, aby řada karet stála na stejné lince. */
.sms-karta-obrazek img {
height: 200px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.sms-karta {
transition: box-shadow .2s ease, border-color .2s ease;
}
/* Karta vyplní buňku mřížky; tělo roste a tlačítko drží spodní linku
ve všech kartách řady. Kořen šablony Loop Item nenese vlastní třídu,
proto se míří na .e-loop-item. */
.sms-kat-mrizka .e-loop-item {
height: 100%;
}
.sms-karta-telo.e-con {
flex-grow: 1;
}
/* Cena a tlačítko drží spodní hranu karty, ať má název jeden řádek nebo tři.
Volné místo se sype nad cenu, takže v řadě stojí ceny i tlačítka na jedné
lince - karty s krátkým názvem měly cenu o dva řádky výš. */
.sms-karta-telo.e-con > .sms-karta-cena-radek {
margin-top: auto;
}
.sms-karta:hover {
box-shadow: 0 6px 20px rgba(30, 34, 39, .10);
border-color: #D6D6D6;
}
.sms-karta-nazev a {
color: inherit;
}
.sms-karta-nazev a:hover {
color: #494D52;
}
/* Cena WooCommerce vkládá mezeru a symbol jako vlastní prvky. */
.sms-karta .woocommerce-Price-amount,
.sms-karta .price {
white-space: nowrap;
}
/* Filtry: text položek, počty vpravo šedě. */
.sms-kat-filtry .jet-checkboxes-list__row {
display: flex;
align-items: flex-start;
}
.sms-kat-filtry .jet-checkboxes-list__label {
flex: 1 1 auto;
}
.sms-kat-filtry .jet-filters-counter {
color: #6B6B6B;
margin-inline-start: auto;
padding-inline-start: 8px;
}
.sms-kat-filtry .jet-remove-all-filters__button {
border: 1px solid #E5E5E5;
width: 100%;
text-align: center;
}
.sms-kat-filtry .jet-range__inputs__container {
display: flex;
gap: 8px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.sms-kat-filtry .jet-range__inputs__group {
display: flex;
align-items: center;
flex: 1 1 0;
min-width: 0;
border: 1px solid #E5E5E5;
border-radius: 4px;
padding: 0 8px 0 0;
background: #fff;
}
.sms-kat-filtry .jet-range .jet-range__inputs__group input {
flex: 1 1 100%;
width: 100% !important;
min-width: 0;
border: 0;
background: transparent;
padding: 9px 2px 9px 10px !important;
font: inherit;
font-size: 14px;
color: #1E2227;
}
.sms-kat-filtry .jet-range__inputs__group__text {
color: #6B6B6B;
font-size: 12px;
white-space: nowrap;
padding: 0 !important;
}
/* Řazení: šipka a rámeček selectu. */
.sms-kat-razeni select {
border: 1px solid #E5E5E5;
appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
}
/* Hledání: stroje / příslušenství.
Dvě poloviny katalogu jako záložky nad výpisem (zkratka [sms_prepinac_skupin]).
Prázdná polovina zůstává vidět jako text, ať je poznat, že tam opravdu nic
není - proto `span.je-prazdna` vedle odkazů. */
.sms-kat-skupiny {
margin-top: 6px;
}
.sms-skupiny {
display: flex;
flex-wrap: wrap;
gap: 24px;
border-bottom: 1px solid #E5E5E5;
}
.sms-skupina {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 0 2px 10px;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: #6B6B6B;
text-decoration: none;
font-family: "Russo One", "Arial Narrow", Arial, sans-serif;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
a.sms-skupina:hover,
a.sms-skupina:focus-visible {
color: #1E2227;
}
.sms-skupina.je-aktivni {
color: #1E2227;
border-bottom-color: #FFD400;
}
.sms-skupina.je-prazdna {
color: #A6A6A6;
cursor: default;
}
.sms-skupina-pocet {
font-family: inherit;
font-size: 12px;
color: #6B6B6B;
}
/* Na stránce hledání nemá seznam kategorií co dělat: jsou to globální počty
(1 295 u ATV) a odkazy, které hledaný výraz zahodí. Filtry značky a ceny
se rozsahu hledání drží, ty zůstávají. */
body.search .sms-kat-kategorie {
display: none;
}
/* Aktivní filtry: nezobrazovat prázdný nadpis. */
.sms-kat-aktivni .jet-active-filters:empty,
.sms-kat-aktivni .jet-active-filters:not(:has(.jet-active-filter)) {
display: none;
}
/* Stránkování: rámeček položek. */
.sms-kat-strankovani .jet-filters-pagination__item {
border: 1px solid #E5E5E5;
min-width: 42px;
text-align: center;
}
.sms-kat-strankovani .jet-filters-pagination__current {
border-color: #1E2227;
}
/* Seznam kategorií v levém sloupci (shortcode sms_kategorie_seznam). */
.sms-kategorie-seznam {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sms-kategorie-seznam a {
display: flex;
justify-content: space-between;
gap: 8px;
color: #1E2227;
text-decoration: none;
}
.sms-kategorie-seznam a:hover {
color: #494D52;
text-decoration: underline;
}
.sms-kategorie-seznam .is-active a {
font-weight: 700;
}
.sms-kategorie-seznam .pocet {
color: #6B6B6B;
font-size: 13px;
}
/* Filtry na tabletu a mobilu: sbalené pod tlačítkem „Filtrovat“. */
.sms-kat-filtry-prepinac {
display: none;
}
@media (max-width: 1024px) {
.sms-kat-filtry-prepinac {
display: block;
}
.sms-kat-filtry:not(.je-otevreno) > .e-con,
.sms-kat-filtry:not(.je-otevreno) > .elementor-widget:not(.sms-kat-filtry-prepinac) {
display: none;
}
}
/* ---------------------------------------------------------------------------
Textová stránka (config/stranky.php): zásady, obchodní podmínky
Delší právní text se čte jinak než stránka katalogu: potřebuje užší
sloupec, výraznější nadpisy a vzduch mezi oddíly. Šablona dodá bílou
kartu, zbytek je tady, protože Elementor styluje widget, ne jednotlivé
značky uvnitř obsahu.
--------------------------------------------------------------------------- */
.sms-text .elementor-widget-theme-post-content {
color: var(--sms-inkoust-2);
font-size: 16px;
line-height: 1.75;
/* Řádek delšího textu má mít kolem 70 znaků; širší sloupec se hůř čte. */
max-width: 68ch;
/* Bez tohohle by široká tabulka uvnitř roztáhla celý sloupec: prvek
ve flexu se sám pod svoji nejmenší šířku nesmrskne. */
min-width: 0;
}
.sms-text.e-con {
min-width: 0;
}
.sms-text p {
margin: 0 0 18px;
}
.sms-text .sms-text-perex {
font-size: 18px;
line-height: 1.6;
color: var(--sms-inkoust);
margin-bottom: 32px;
}
/* Nadpis oddílu drží žlutá linka vlevo - oko pak najde začátek oddílu
i při rychlém projíždění. */
.sms-text h2 {
font-family: var(--sms-pismo-displej);
font-size: 21px;
line-height: 1.3;
color: var(--sms-inkoust);
text-transform: uppercase;
margin: 44px 0 16px;
padding-left: 16px;
border-left: 3px solid var(--sms-zluta);
}
.sms-text h2:first-child {
margin-top: 0;
}
.sms-text h3 {
font-family: var(--sms-pismo-text);
font-weight: 600;
font-size: 17px;
color: var(--sms-inkoust);
margin: 28px 0 10px;
}
.sms-text ul {
margin: 0 0 18px;
padding-left: 0;
list-style: none;
}
.sms-text ul li {
position: relative;
padding-left: 24px;
margin-bottom: 8px;
}
.sms-text ul li::before {
content: "";
position: absolute;
left: 2px;
top: 11px;
width: 7px;
height: 7px;
background: var(--sms-zluta);
}
.sms-text a {
color: var(--sms-inkoust);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--sms-zluta-tmava);
text-decoration-thickness: 2px;
}
.sms-text a:hover,
.sms-text a:focus-visible {
background: var(--sms-zluta);
text-decoration-color: transparent;
}
/* Tabulka přehledu účelů. Na úzkém okně se posouvá sama v sobě,
aby nerozstřelila stránku. */
.sms-text .sms-tabulka {
overflow-x: auto;
margin: 0 0 24px;
}
.sms-text table {
border-collapse: collapse;
width: 100%;
min-width: 520px;
font-size: 15px;
}
.sms-text thead th {
background: var(--sms-inkoust);
color: var(--sms-bila);
font-family: var(--sms-pismo-displej);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
padding: 12px 16px;
}
.sms-text tbody td {
border-bottom: 1px solid var(--sms-linka);
padding: 14px 16px;
vertical-align: top;
}
.sms-text tbody tr:nth-child(even) td {
background: #FAF9F7;
}
.sms-text .sms-text-patka {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--sms-linka);
font-size: 14px;
color: var(--sms-text-tlumeny);
}
/* Hlavička stránky: drobečky a název. */
.sms-drobecky {
font-size: 13px;
color: var(--sms-text-tlumeny);
}
.sms-drobecky a {
color: var(--sms-text-tlumeny);
text-decoration: none;
}
.sms-drobecky a:hover {
color: var(--sms-inkoust);
}
@media (max-width: 767px) {
.sms-text h2 {
font-size: 18px;
margin-top: 32px;
}
.sms-text .elementor-widget-theme-post-content {
font-size: 15px;
}
}
/* ---------------------------------------------------------------------------
Detail produktu (config/detail.php)
Hlavní starost je, aby stránka vypadala stejně u stroje za půl milionu
i u dílu za dva tisíce: obrázek má pevnou plochu, bloky bez dat se
nevykreslí a nezůstane po nich mezera.
--------------------------------------------------------------------------- */
/* `!important` je tu proti stylu WooCommerce `.woocommerce div.product
div.images img { height: auto }`, který má vyšší váhu; bez toho by se
čtvercová fotka roztáhla na 690 px a u dílu vedle stroje by každá karta
začínala jinde. */
.sms-det-obrazek .woocommerce-product-gallery__image img {
height: 420px !important;
width: 100% !important;
object-fit: contain;
}
.sms-det-obrazek .flex-control-thumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
/* Náhledy pod hlavní fotkou. WooCommerce je sází do čtyř plovoucích sloupců
a ztlumí na poloviční krytí; jeho selektory mají čtyři třídy a přebily naši
mřížku nad tímhle blokem - z náhledu zbyl 34 px široký proužek s vybledlou
fotkou. Vidět to bylo u vodních skútrů, čtyřkolek a saní, tedy všude, kde má
produkt víc než jednu fotku. Proto `!important`, ze stejného důvodu jako
u hlavního obrázku výš. */
.sms-det-obrazek .flex-control-thumbs li {
float: none !important;
width: auto !important;
margin: 0;
}
.sms-det-obrazek .flex-control-thumbs img {
height: 88px !important;
width: 100% !important;
opacity: 1 !important;
object-fit: contain;
border: 1px solid var(--sms-linka);
border-radius: var(--sms-radius);
padding: 6px;
box-sizing: border-box;
}
.sms-det-obrazek .flex-control-thumbs img.flex-active {
border-color: var(--sms-inkoust);
border-width: 2px;
}
/* Šířky sloupců. Kontejner Elementoru je prvek flexu a sám se pod svůj
obsah smrskne; bez tohohle by sloupec s obrázkem spadl na pár pixelů
a text vedle by se sypal po jednom slově na řádek.
Třída `.e-con` je v selektoru schválně: Elementor sází `flex` přes
vlastní proměnné se stejnou vahou a jeho styl se načítá později, takže
samotná `.sms-det-levy` by prohrála.
Poměr je z plátna (740 : 500 obsahu 1280), ale v procentech: pevných
740 px by při zužování okna sežralo celý pravý sloupec a cenovka by se
sypala po slovech. */
.e-con.sms-det-levy {
flex: 0 1 calc(60% - 24px);
width: calc(60% - 24px);
min-width: 0;
}
.e-con.sms-det-pravy {
flex: 0 1 calc(40% - 16px);
width: calc(40% - 16px);
min-width: 0;
}
.e-con.sms-det-obrazek,
.e-con.sms-det-popis,
.e-con.sms-det-koupe,
.e-con.sms-det-servis-sloupec {
width: 100%;
min-width: 0;
}
/* Pod 1025 px jde všechno pod sebe. Sloupce se přitom vypustí z toku
(`display: contents`), aby se daly čtyři bloky proložit: obrázek,
cenovka, popis, servisní box - jinak by název a cena spadly až pod
popis. */
@media (max-width: 1024px) {
.e-con.sms-det-levy,
.e-con.sms-det-pravy {
display: contents;
}
.e-con.sms-det-obrazek {
order: 1;
}
.e-con.sms-det-koupe {
order: 2;
}
.e-con.sms-det-popis {
order: 3;
}
.e-con.sms-det-servis-sloupec {
order: 4;
}
}
/* Lupa WooCommerce sedí nad obrázkem a na dotykovém zařízení jen překáží. */
.sms-det-obrazek .woocommerce-product-gallery__trigger {
display: none;
}
/* Štítek kategorie a značky nad názvem. */
/* Widget zkratky nemá obal `.elementor-widget-container` jako ostatní -
obsah sedí rovnou v `.elementor-shortcode`. */
.sms-det-stitek .elementor-shortcode {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 3px 10px;
background: #F0EEE9;
color: var(--sms-inkoust-2);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
border-radius: 2px;
}
.sms-det-stitek {
margin-bottom: 16px;
}
.sms-det-sku {
margin-top: 10px;
font-size: 14px;
color: var(--sms-text-tlumeny);
}
/* Prázdná zkratka po sobě nemá nechat mezeru. */
.sms-det-stitek .elementor-shortcode:empty,
.sms-det-sku .elementor-shortcode:empty,
.sms-det-parametry .elementor-shortcode:empty {
display: none;
}
.sms-det-cena .price {
font-variant-numeric: tabular-nums;
}
.sms-det-cena del {
font-size: 0.5em;
color: var(--sms-text-tlumeny);
}
.sms-det-poznamka p {
margin: 0;
}
.sms-det-jistoty .elementor-icon-list-item {
align-items: flex-start;
}
.sms-det-jistoty .elementor-icon-list-icon {
padding-top: 3px;
}
/* Krátký popis: text, ne odrážkový seznam parametrů. */
/* Popis produktu. Ať zdroj poslal nadpis, tučný odstavec nebo holý text,
sází se to pořád ze tří dílů: perex, odstavec, odrážky. Co z čeho vzniklo,
řeší `sms_detail_popis_uklid()` v pluginu. */
.sms-det-kratky {
font-size: 15px;
line-height: 1.7;
color: var(--sms-inkoust-2);
}
.sms-det-kratky p {
margin: 0 0 12px;
}
.sms-det-kratky > :last-child {
margin-bottom: 0;
}
/* Úvodní věta bývá ve zdroji verzálkami. Nepřepisuje se - čeština a názvy
modelů by to nepřežily - ale sází se velikostí textu, ne nadpisu, aby
nepřekřikovala název produktu nad sebou. */
.sms-det-kratky .sms-det-uvod {
margin: 0 0 14px;
font-weight: 500;
color: var(--sms-inkoust);
letter-spacing: 0.01em;
}
.sms-det-kratky strong,
.sms-det-kratky b {
font-weight: 500;
color: var(--sms-inkoust);
}
/* Odrážky jsou výbava stroje, ne text: žlutá čárka místo puntíku, stejná
jako na stránce MD-Racing. */
.sms-det-kratky ul,
.sms-det-kratky ol {
margin: 0 0 12px;
padding: 0;
list-style: none;
}
.sms-det-kratky li {
position: relative;
margin: 0 0 7px;
padding-inline-start: 22px;
}
.sms-det-kratky ul li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0.72em;
width: 11px;
height: 2px;
background: var(--sms-zluta);
}
.sms-det-kratky ol {
counter-reset: sms-det-polozka;
}
.sms-det-kratky ol li {
counter-increment: sms-det-polozka;
}
.sms-det-kratky ol li::before {
content: counter(sms-det-polozka) ".";
position: absolute;
inset-inline-start: 0;
color: var(--sms-text-tlumeny);
}
/* Devět produktů má v popisu vložené video z YouTube. Vkládá ho WordPress
po úklidu popisu, v pevných 800 px - ve sloupci širokém 718 px by přeteklo. */
.sms-det-kratky iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0 0 12px;
border: 0;
border-radius: var(--sms-radius);
}
.sms-detail-nadpis {
margin: 0;
}
.sms-parametry {
background: var(--sms-bila);
border: 1px solid var(--sms-linka);
border-radius: var(--sms-radius);
margin-top: 16px;
}
.sms-parametr {
display: flex;
gap: 16px;
padding: 13px 20px;
border-bottom: 1px solid #F0EEE9;
font-size: 14px;
}
.sms-parametr:last-child {
border-bottom: 0;
}
.sms-parametr-nazev {
width: 240px;
flex-shrink: 0;
color: var(--sms-text-tlumeny);
}
.sms-parametr-hodnota {
font-weight: 500;
}
/* Cena, kterou nikdo nevyplnil (inc/katalog/obrazky.php). Ve stejném widgetu
jako částka v Russo One 34, ale věta se nesází na výšku ceny - byla by přes
dva řádky a rozhodila by kartu. */
.sms-cena-dotaz {
display: inline-block;
font-size: 22px;
line-height: 1.2;
color: var(--sms-inkoust-2);
}
.sms-karta .sms-cena-dotaz {
font-size: 17px;
}
/* Produkt bez popisu i bez parametrů (91 kusů, hlavně rolby): prázdný blok
pod obrázkem vypadal jako chybějící kus stránky. Ve sloupci se schová i
s mezerou nad sebou a pravý sloupec se ho nijak netýká. */
.sms-bez-popisu .e-con.sms-det-popis {
display: none;
}
@media (max-width: 767px) {
.sms-det-obrazek .woocommerce-product-gallery__image img {
/* `!important` kvůli stejnému stylu WooCommerce jako nahoře. */
height: 260px !important;
}
.sms-det-obrazek .flex-control-thumbs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sms-parametr {
flex-direction: column;
gap: 2px;
}
.sms-parametr-nazev {
width: auto;
}
}
/* ---------------------------------------------------------------------------
Titulní strana (config/titulka.php)
Pruhy kreslí Elementor, tenhle blok řeší tři věci, na které ovladače
nestačí: mřížky se stejně vysokými kartami, tmavý hero a bloky, které
vykresluje zkratka z pluginu (čísla, vybraný stroj).
--------------------------------------------------------------------------- */
.sms-hero-stitek p {
display: inline-flex;
align-items: center;
height: 26px;
margin: 0;
padding: 0 12px;
background: var(--sms-zluta);
color: var(--sms-inkoust);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 2px;
}
.sms-hero-popis p {
margin: 0;
max-width: 480px;
}
/* Čísla pod textem: linka je nad nimi, ne kolem každého. */
.sms-hero-cisla {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 12px;
padding-top: 28px;
border-top: 1px solid #373B40;
}
.sms-hero-cislo-hodnota {
font-family: var(--sms-pismo-displej);
font-size: 26px;
line-height: 1;
color: var(--sms-zluta);
font-variant-numeric: tabular-nums;
}
.sms-hero-cislo-popis {
margin-top: 5px;
font-size: 13px;
color: #C8C6C1;
}
/* Kresba na pozadí hera musí zůstat uvnitř pruhu; vytéká za jeho okraj,
proto `overflow: hidden`. Obsah se drží nad ní.
`z-index` na vnitřku, ne `::before`: `::before` si na kontejnerech bere
Elementor pro překryv pozadí. */
.e-con.sms-tit-hero {
position: relative;
overflow: hidden;
}
.e-con.sms-tit-hero > .e-con-inner {
position: relative;
z-index: 1;
}
/* Stroje v heru. Na plátně je to vyříznutá fotka na tmavém a takové fotky
v knihovně jsou - pár kusů od BRP má průhledné pozadí. Střídají se čtyři,
jeden z každé kategorie (assets/js/hero.js); kotouč a stín pod nimi jsou
společné, aby stroj při překlopení neposkočil. Kotouč je přechod, ne
obrázek: na černé by se tmavý stroj bez něj ztratil. */
.e-con.sms-hero-stroj {
flex: 1 1 460px;
min-width: 0;
align-items: center;
gap: 0;
}
.sms-hero-stroje {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 640px;
}
.sms-hero-plocha {
position: relative;
display: grid;
width: 100%;
aspect-ratio: 4 / 3;
}
.sms-hero-plocha::before {
content: "";
position: absolute;
top: 46%;
left: 50%;
width: 84%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, #3D4146 0%, #292D32 56%, rgba(30, 34, 39, 0) 72%);
}
/* Obrys ozubeného kola - stejná kresba jako v hlavičce MD-Racingu, jen
slabší. Leží pod strojem vpravo dole a kusem vytéká z pruhu ven, aby
vypadala jako kresba na pozadí, ne jako další obrázek. Rozměry jsou
v procentech plochy, takže se zmenšuje se strojem a nepotřebuje vlastní
pravidla pro tablet a telefon. Je schválně větší než ta plocha: celé kolo
uprostřed by vypadalo jako druhý obrázek, kdežto oříznuté čte jako
kresba, která pokračuje za okraj. Sedí výš, než kam by spadla sama:
dole by jinak ležela přes popisek a kartičky kategorií. */
.sms-hero-plocha::after {
content: "";
position: absolute;
right: -30%;
bottom: -2%;
width: 132%;
aspect-ratio: 1;
background: url("../logo/kolo-obrys.svg") no-repeat center / contain;
opacity: 0.09;
pointer-events: none;
}
/* Stroj patří nad kresbu: obě jsou v jedné buňce mřížky, ale snímky nejsou
pozicované, takže by se jinak kreslily pod ní. */
.sms-hero-snimek {
position: relative;
z-index: 1;
}
/* Snímky leží na sobě v jedné buňce mřížky, takže se prolínají a pruh
nemění výšku. `visibility` se přepíná až po prolnutí - jinak by odkaz
pod kurzorem patřil snímku, který už není vidět. */
.sms-hero-snimek {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.sms-hero-snimek.je-videt {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.sms-hero-stroj-foto {
flex: 1 1 0;
min-height: 0;
display: block;
width: 100%;
object-fit: contain;
filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6));
}
/* Popisek pod strojem: co to je a za kolik, odkaz vede na produkt. */
.sms-hero-stroj-popis {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 4px 14px;
flex: 0 0 auto;
text-decoration: none;
}
.sms-hero-stroj-nazev {
font-size: 14px;
letter-spacing: 0.02em;
color: #C8C6C1;
}
/* Cena si barvu nese z vlastního `` od WooCommerce, a ten má výš
v souboru inkoustovou barvu pro karty - na tmavém by byla černá na černé. */
.sms-hero-stroj-cena,
.sms-hero-stroj-cena .woocommerce-Price-amount {
font-family: var(--sms-pismo-displej);
font-size: 15px;
color: var(--sms-zluta);
font-variant-numeric: tabular-nums;
}
.sms-hero-stroj-popis:hover .sms-hero-stroj-nazev {
color: var(--sms-bila);
text-decoration: underline;
}
/* Kartičky kategorií jsou zároveň odpočet: žlutý proužek nad aktivní
kartičkou ukazuje, kolik zbývá do překlopení. Když se rotace zastaví
(myš nad herem, fokus v něm, skrytá karta prohlížeče), proužek stojí
s ní - jinak by odpočet lhal. */
.sms-hero-taby {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sms-hero-tab {
position: relative;
flex: 1 1 0;
min-width: 118px;
margin: 0;
padding: 10px 2px 0;
background: none;
border: 0;
border-top: 1px solid #373B40;
border-radius: 0;
color: #8A8783;
font-family: inherit;
font-size: 12px;
letter-spacing: 0.03em;
text-align: left;
cursor: pointer;
transition: color 0.25s ease, font-size 0.25s ease;
}
/* `background` a `color` se opakují i pro :hover a :focus schválně: reset
rodičovského tématu maluje každému tlačítku růžové pozadí (#c36) a dělá
to přes `button:hover, button:focus`, což je specifičtější než samotná
třída. Po klepnutí na dotyku kartička zůstane ve focusu, takže bez toho
svítí růžově. */
.sms-hero-tab:hover,
.sms-hero-tab:focus,
.sms-hero-tab.je-videt {
background: none;
color: var(--sms-bila);
}
/* Kartička kategorie, která je zrovna na řadě, je o kousek větší a tučná.
Sloupce drží `flex: 1 1 0`, takže se šířkou textu nehýbou a ostatní
kartičky při překlopení neposkočí. */
.sms-hero-tab.je-videt {
font-size: 13px;
font-weight: 600;
}
.sms-hero-tab:focus-visible {
outline: 2px solid var(--sms-zluta);
outline-offset: 2px;
}
.sms-hero-tab-cas {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 2px;
background: var(--sms-zluta);
transform: scaleX(0);
transform-origin: left center;
}
.sms-hero-tab.je-videt .sms-hero-tab-cas {
animation: sms-hero-bezi var(--sms-hero-cas, 4000ms) linear forwards;
}
.sms-hero-stroje.je-stopnuto .sms-hero-tab-cas {
animation-play-state: paused;
}
@keyframes sms-hero-bezi {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Vypnuté animace: snímky se nestřídají samy (hero.js), tak ať aspoň
kartičky drží plný proužek a nevypadají rozdělané. */
@media (prefers-reduced-motion: reduce) {
.sms-hero-snimek {
transition: none;
}
.sms-hero-tab.je-videt .sms-hero-tab-cas {
animation: none;
transform: scaleX(1);
}
}
/* Pruh značek. Loga jsou bílé originály od BRP, takže sedí až na tmavém -
dřív byly pod herem v bílém pruhu opsané písmem. */
.sms-hero-znacky {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 40px;
padding-top: 26px;
border-top: 1px solid #373B40;
}
.sms-hero-znacky-popis {
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #8A8783;
}
.sms-hero-znacky-loga {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 52px;
}
/* Rozměr je zapsaný v obou osách: loga jsou SVG s atributem `width="70"`
a při `width: auto` by si prohlížeč vzal těch 70 px bez ohledu na výšku. */
.sms-hero-znacka {
display: block;
width: 140px;
height: 40px;
opacity: 0.85;
}
/* Hlavička oddílu: vlevo nadpis, vpravo odkaz dál. Kontejner Elementoru je
ve výchozím stavu široký 100 %, takže by odkaz spadl na vlastní řádek. */
.e-con.sms-tit-hlavicka-levo {
width: auto;
flex: 0 1 auto;
}
/* Odkaz „Celá nabídka" v hlavičce oddílu - tlačítko bez pozadí. */
.sms-tit-dal .elementor-button {
padding: 0;
border: 0;
background: none;
}
.sms-tit-pruzka .elementor-divider-separator {
border-top-style: solid;
}
/* Mřížka kategorií: čtyři stejně široké karty, na užším okně dvě a jedna.
`flex-basis` v procentech počítá s mezerou 24 px mezi kartami. */
.e-con.sms-tit-karta {
flex: 1 1 calc(25% - 18px);
min-width: 0;
transition: border-color 0.15s ease;
}
.e-con.sms-tit-karta:hover {
border-color: var(--sms-inkoust);
}
.sms-tit-pocet .elementor-shortcode {
font-family: var(--sms-pismo-displej);
font-size: 40px;
line-height: 1;
color: var(--sms-zluta);
font-variant-numeric: tabular-nums;
}
.sms-tit-karta-nazev {
margin-top: 6px;
}
.sms-tit-karta-popis p {
margin: 0;
}
@media (max-width: 1024px) {
.e-con.sms-tit-karta {
flex: 1 1 calc(50% - 12px);
}
}
/* Na telefonu dvě dlaždice vedle sebe (plátno Mobil), bez popisu -
skrývá ho `hide_mobile` v config/titulka.php. */
@media (max-width: 600px) {
.e-con.sms-tit-karta {
flex: 1 1 calc(50% - 6px);
}
}
/* Servisní box: nahoře uprostřed nadpis, pod ním šest karet ve dvou řadách
po třech; na tabletu po dvou, na telefonu pod sebou. */
.e-con.sms-tit-servis-text {
max-width: 720px;
margin-inline: auto;
text-align: center;
}
/* Elementor dává prvkům flexu `flex-shrink: 0`; bez `min-width: 0` by karty
vytekly z boxu. */
.e-con.sms-tit-sluzby {
flex: 1 1 auto;
min-width: 0;
}
.e-con.sms-tit-sluzba {
flex: 1 1 calc(33.333% - 16px);
min-width: 0;
}
@media (max-width: 1024px) {
.e-con.sms-tit-sluzba {
flex: 1 1 calc(50% - 12px);
}
}
@media (max-width: 600px) {
.e-con.sms-tit-sluzba {
flex: 1 1 100%;
}
}
@media (max-width: 767px) {
.sms-hero-cisla {
gap: 20px 32px;
}
/* Na dotyku je kartička i cíl prstu, takže dostane plnou výšku
klepnutí jako ostatní ovládání webu. */
.sms-hero-tab {
min-width: 0;
flex-basis: 40%;
min-height: var(--sms-klik);
padding-top: 12px;
font-size: 11px;
}
.sms-hero-tab.je-videt {
font-size: 12px;
}
.sms-hero-znacky-loga {
gap: 14px 24px;
}
.sms-hero-znacka {
width: 112px;
height: 32px;
}
.sms-tit-pocet .elementor-shortcode {
font-size: 28px;
}
}
/* ---------------------------------------------------------------------------
Kontakt
--------------------------------------------------------------------------- */
/* Mapa je na stránce kvůli adrese, ne kvůli barvám: dokud se s ní nepracuje,
je černobílá a nepřetahuje pozornost z formuláře. Barvu dostane, jakmile
na ni někdo najede nebo do ní klepne (klepnutí dá iframu fokus).
Míří se na widget Elementoru, ne na třídu z plátna - stránku kontaktu
zatím kreslí původní šablona klienta. */
.elementor-widget-google_maps iframe {
filter: grayscale(1);
transition: filter 0.25s ease;
}
.elementor-widget-google_maps:hover iframe,
.elementor-widget-google_maps:focus-within iframe {
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.elementor-widget-google_maps iframe {
transition: none;
}
}
/* Žlutá karta s kontakty je stejně vysoká jako formulář vedle ní, ale mapa
měla pevných 300 px, takže pod ní zbýval prázdný žlutý pruh. Mapa proto
dostane všechno, co ve sloupci zbude. Míří se přes `:has()` na kontejner,
který mapu obsahuje - stránku kontaktu kreslí původní šablona klienta
a vlastní třídy na ní nemáme. Prohlížeč bez `:has()` zobrazí původní
stav, tedy mapu 300 px vysokou; nic se nerozbije.
Jen od tabletu nahoru: na telefonu jsou karty pod sebou, sloupec nemá
výšku, kterou by mapa doplňovala, a 300 px je tam tak akorát. */
@media (min-width: 768px) {
.e-con-inner > .e-con:has(> .elementor-widget-google_maps) {
display: flex;
flex-direction: column;
}
.e-con:has(> .elementor-widget-google_maps) > .elementor-widget-google_maps {
display: flex;
flex: 1 1 auto;
min-height: 300px;
}
.e-con:has(> .elementor-widget-google_maps) > .elementor-widget-google_maps > .elementor-custom-embed {
flex: 1 1 auto;
}
.e-con:has(> .elementor-widget-google_maps) .elementor-custom-embed iframe {
width: 100%;
height: 100%;
}
}
/* Dotyk: průhledné tlačítko přes mapu, které sundá první klepnutí
(assets/js/mapa.js). Na myši se nevykreslí vůbec. */
.elementor-widget-google_maps .elementor-custom-embed {
position: relative;
}
.sms-mapa-vrstva {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.elementor-custom-embed.je-ziva iframe {
filter: none;
}
/* ---------------------------------------------------------------------------
MD-Racing (config/md-racing.php)
Stránka je hlavně text, takže o ni jde všechno: tenký řez, dlouhý proklad
a měřítko 760 px na řádek. Žlutá drží jen linky a poslední pruh.
--------------------------------------------------------------------------- */
.sms-mdr-text p {
margin: 0 0 1.1em;
}
.sms-mdr-text > :last-child {
margin-bottom: 0;
}
/* Citace čtenáře: uvozovky kreslí styl, v textu nejsou - jinak by se
v odstavci objevily dvakrát, jednou jako znak a jednou jako sazba. */
.sms-mdr-text blockquote {
margin: 1.5em 0;
padding: 2px 0 2px 22px;
border-left: 3px solid var(--sms-zluta);
font-family: var(--sms-pismo-displej);
font-size: 21px;
font-weight: 400;
line-height: 1.4;
color: var(--sms-inkoust);
quotes: "„" "\201C";
}
.sms-mdr-text blockquote::before {
content: open-quote;
}
.sms-mdr-text blockquote::after {
content: close-quote;
}
/* Odrážky byly v původním textu napsané jako „• " uprostřed odstavce.
Puntík nahradila žlutá čárka - ve stejné roli, ale mimo text. */
.sms-mdr-text ul {
margin: 0 0 1.1em;
padding: 0;
list-style: none;
}
.sms-mdr-text li {
position: relative;
margin-bottom: 0.4em;
padding-left: 22px;
}
.sms-mdr-text li::before {
content: "";
position: absolute;
top: 0.75em;
left: 0;
width: 11px;
height: 2px;
background: var(--sms-zluta-tmava);
}
/* Věta, která odrážky uvozuje, k nim patří - nesmí od nich odskočit. */
.sms-mdr-text .sms-mdr-uvod {
margin-bottom: 0.45em;
}
/* MD-Racing je v žlutém pruhu jediná stránka mezi kategoriemi - u pravého
okraje drží pruh vyvážený a je vidět, že to není další kategorie strojů.
Váže se na položku typu „stránka", ne na pořadí: kdyby klient přidal
kategorii, zůstane odsazená pořád ta správná položka. Na telefonu se pruh
posouvá prstem, tam volné místo není a odsazení nic nedělá. */
@media (min-width: 768px) {
/* Pruh musí být široký jako rám, jinak není co odsadit: widget i seznam
se jinak smrsknou na šířku položek a `auto` nemá z čeho brát. */
.sms-menu-kategorie,
.sms-menu-kategorie .elementor-nav-menu {
flex: 1 1 auto;
width: 100%;
}
.sms-menu-kategorie .elementor-nav-menu > li.menu-item-object-page:last-child {
margin-inline-start: auto;
}
}
/* MD-Racing není další kategorie strojů, ale stránka týmu. V pruhu ji proto
drží tenký rámeček místo podtržení - podtržení má v téhle navigaci význam
„kde právě jsem" a u položky v rámečku by se dvě značení bila.
Odsazení a barvu položky sází Elementor selektorem o specificitě 0,5,1
(.elementor- .elementor-element.elementor-element- …) a barvu
aktivní položky selektorem o 0,6,0. Odtud `body[class*="elementor-kit-"]`
i .elementor-nav-menu navíc - stejný trik jako v hlavičce souboru. */
body[class*="elementor-kit-"] .sms-menu-kategorie .elementor-nav-menu li.menu-item-object-page:last-child > a.elementor-item {
align-self: center;
padding: 7px 14px;
border: 1px solid var(--sms-inkoust);
border-radius: 3px;
transition: background-color 0.15s ease, color 0.15s ease;
}
body[class*="elementor-kit-"] .sms-menu-kategorie .elementor-nav-menu li.menu-item-object-page:last-child > a.elementor-item::before,
body[class*="elementor-kit-"] .sms-menu-kategorie .elementor-nav-menu li.menu-item-object-page:last-child > a.elementor-item::after {
display: none;
}
body[class*="elementor-kit-"] .sms-menu-kategorie .elementor-nav-menu li.menu-item-object-page:last-child > a.elementor-item:hover,
body[class*="elementor-kit-"] .sms-menu-kategorie .elementor-nav-menu li.menu-item-object-page:last-child > a.elementor-item-active {
background-color: var(--sms-inkoust);
color: var(--sms-zluta);
}
/* Tmavá hlavička stránky je velká černá plocha; obrys ozubeného kola ji
rozbije, aniž by přidal další obsah. Kolo je větší než pruh a ořízne ho -
proto `overflow: hidden` a záporné odsazení. Sedí schválně vpravo, kusem
za logem: uprostřed pruhu by vypadalo jako druhý obsah, ne jako kresba na
pozadí. Kresba je `kolo-obrys.svg` (obrys značky bez monogramu), bílá;
sílu drží průhlednost ve stylu, aby šla měnit bez zásahu do souboru.
`::after`, ne `::before`: `::before` si na kontejnerech bere Elementor
pro překryv pozadí. */
.e-con.sms-mdr-hero {
position: relative;
overflow: hidden;
}
.e-con.sms-mdr-hero::after {
content: "";
position: absolute;
right: -220px;
bottom: -540px;
width: 980px;
height: 980px;
background: url("../logo/kolo-obrys.svg") no-repeat center / contain;
opacity: 0.08;
pointer-events: none;
}
/* Obsah musí zůstat nad kresbou. */
.e-con.sms-mdr-hero > .e-con-inner {
position: relative;
z-index: 1;
}
/* Na užším okně stojí hlavička ve sloupci a logo je dole uprostřed; kolo
se proto přesune nahoru za nadpis, ať se dvě ozubená kola nepotkají. */
@media (max-width: 1024px) {
.e-con.sms-mdr-hero::after {
right: -220px;
top: -150px;
bottom: auto;
width: 560px;
height: 560px;
}
}
@media (max-width: 767px) {
.e-con.sms-mdr-hero::after {
right: -170px;
top: -120px;
width: 420px;
height: 420px;
}
}
/* Dvě tvrzení vedle sebe. Kontejner Elementoru je ve výchozím stavu na 100 %
a nesmršťuje se, takže bez tohohle stojí každé na vlastní šířce pruhu
a stránka se dá posouvat do strany. */
.e-con.sms-mdr-tvrzeni,
.e-con.sms-mdr-vyzva-text {
flex: 1 1 0;
width: auto;
min-width: 0;
}
@media (max-width: 767px) {
.e-con.sms-mdr-tvrzeni {
flex: 1 1 100%;
}
}
/* ---------------------------------------------------------------------------
Mobil (plátno Mobil)
Telefon není zmenšený monitor: hlavička se smrskne na jeden řádek
(hamburger, logo, lupa), kategorie se posouvají prstem, karta produktu
si lehne a dole drží lišta s poptávkou a telefonem.
--------------------------------------------------------------------------- */
/* Dvojí znění téže věty v heru - viz config/titulka.php. */
.sms-jen-mobil {
display: none;
}
/* Ukotvená lišta je jen pro telefon; na větším okně v patičce nemá co dělat. */
.e-con.sms-lista-mobil {
display: none;
}
@media (max-width: 767px) {
.sms-jen-velke {
display: none;
}
.sms-jen-mobil {
display: inline;
}
/* ----- hlavička: hamburger | logo | lupa ----- */
.sms-logo {
flex-grow: 1;
}
.elementor-widget-image.sms-logo a img[src$=".svg"],
.sms-logo a img {
height: 34px;
}
/* Odkazy Servis/Kontakt jdou na širším okně doprava; na mobilu je
z nich hamburger, který patří k levému okraji. */
.sms-menu-hlavicka {
margin-inline-start: 0;
}
/* Plocha na klepnutí 44 × 44 px (obojí ikona má kolem sebe vzduch). */
.sms-menu-hlavicka .elementor-menu-toggle,
.sms-hledani-mobil .elementor-search-form__toggle {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
}
.sms-menu-hlavicka .elementor-menu-toggle {
margin-inline-start: -10px;
}
.sms-hledani-mobil .elementor-search-form {
display: flex;
justify-content: flex-end;
}
/* Hledání přes celou obrazovku má tmavé pozadí, takže nápověda v poli
nesmí zůstat šedá na tmavém - Elementor barví jen samotný text. */
.sms-hledani-mobil input[type="search"].elementor-search-form__input::placeholder {
color: #C8C6C1;
opacity: 1;
}
/* ----- žlutý pruh kategorií: pás, který se posouvá prstem ----- */
.e-con.sms-hlava-kategorie > .e-con-inner {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.e-con.sms-hlava-kategorie > .e-con-inner::-webkit-scrollbar {
display: none;
}
.sms-menu-kategorie {
flex: 0 0 auto;
}
.sms-menu-kategorie .elementor-nav-menu {
flex-wrap: nowrap;
}
.sms-menu-kategorie .elementor-nav-menu--main .elementor-item {
font-size: 12px;
white-space: nowrap;
}
/* ----- karta produktu naležato ----- */
.elementor-widget-image.sms-karta-obrazek {
flex: 0 0 130px;
align-self: stretch;
display: flex;
align-items: center;
border-inline-end: 1px solid #F0EEE9;
}
.sms-karta-obrazek img {
height: 100px;
width: 100%;
}
/* Kontejner Elementoru je široký 100 %, takže by tělo karty spadlo
pod fotku; `width: auto` ho nechá stát vedle ní. */
.sms-karta-telo.e-con {
flex: 1 1 0;
width: auto;
min-width: 0;
}
/* Stejně vysoké karty mají smysl v řadě po čtyřech; v jednom sloupci
jen dělají prázdno pod cenou u kratších názvů. */
.elementor-widget-loop-grid.sms-kat-mrizka .elementor-loop-container.elementor-grid {
grid-auto-rows: auto;
}
/* Velikost písma tlačítka drží globální typografie (váha 0,3,0),
proto delší cesta k němu. */
.e-loop-item .sms-karta .elementor-widget-button .elementor-button {
font-size: 14px;
}
/* ----- ukotvená lišta ----- */
.e-con.sms-lista-mobil {
display: flex;
position: fixed;
inset: auto 0 0 0;
z-index: 90;
background: var(--sms-bila);
border-top: 1px solid var(--sms-linka);
box-shadow: 0 -6px 18px rgba(30, 34, 39, 0.07);
}
.sms-lista-poptavka .elementor-button,
.sms-lista-telefon .elementor-button {
height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.sms-lista-telefon .elementor-button {
width: 52px;
padding: 0;
}
/* Text telefonního tlačítka zůstává v kódu kvůli odečítačům, ale
nezabírá místo - ve čtverci je vidět jen sluchátko. */
.sms-lista-telefon .elementor-button-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.sms-lista-telefon .elementor-button-content-wrapper {
justify-content: center;
}
}
/* Předvyplněná poptávka na konkrétní stroj (inc/poptavka.php) je delší než
čtyři řádky, které má pole zprávy z Elementoru - bez tohohle by z ní
zákazník viděl jen první dvě věty a musel v poli rolovat. */
.sms-poptavka-zprava {
min-height: 210px;
}