.pageheader__top-menu{ background: #3a54c9; color: #fff; } /* ========================================================= dotykovy.cz — HLAVIČKA v2 (logo | menu | ikony + otevřené hledání) Styly se aktivují až po přidání třídy .hdr-v2 na (dělá JS). ========================================================= */ html.hdr-v2{ --hdr-h: 76px; /* výška hlavního řádku */ --hdr-topbar-h: 45px; /* horní informační lišta (Doprava zdarma…) */ --hdr-max: 1440px; /* šířka obsahu hlavičky */ --hdr-pad: 32px; /* boční odsazení */ --hdr-gap: 32px; /* mezera logo / menu / ikony */ --hdr-nav-gap: 28px; /* mezera mezi položkami menu */ --hdr-ink: #111111; --hdr-muted: #6b7280; --hdr-line: #e5e7eb; --hdr-field: #f4f4f5; /* pozadí vyhledávacího pole */ --hdr-search-w: 300px; /* šířka otevřeného vyhledávání */ --hdr-search-w-open: 300px; /* šířka při psaní (focus) */ } /* ---------- 1) hlavní řádek: logo | menu | ikony ---------- */ html.hdr-v2 #Header .pageheader__main{ background: #fff; border-bottom: 1px solid var(--hdr-line); } html.hdr-v2 #Header .pageheader__main > .pageheader__content{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* menu je opticky na středu hlavičky */ align-items: center; gap: var(--hdr-gap); height: var(--hdr-h); min-height: var(--hdr-h); max-width: var(--hdr-max); margin: 0 auto; padding: 0 var(--hdr-pad); } /* původní spodní lišta s menu je nahrazena středovým menu */ html.hdr-v2 #Header .pageheader__topline{ display: none !important; } /* odsazení obsahu pod fixní hlavičkou (přepíše inline styl šablony) */ html.hdr-v2 .PageCenter{ padding-top: calc(var(--hdr-topbar-h) + var(--hdr-h)) !important; } /* ---------- 2) LOGO (textový wordmark) ---------- */ html.hdr-v2 #Header .pageheader__content--inner.left{ display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; } html.hdr-v2 #Header .pageheader_logos{ display: flex; align-items: center; } html.hdr-v2 #Header .logo--first{ margin: 0; } html.hdr-v2 #Header .logo--first a{ display: inline-flex; align-items: center; width: auto !important; height: auto !important; background: none !important; /* vypne staré obrázkové logo */ text-indent: 0; font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--hdr-ink); text-decoration: none; white-space: nowrap; } html.hdr-v2 #Header .logo--first a > span{ display: none !important; } html.hdr-v2 #Header .logo--first a::after{ content: "dotykový.cz"; } html.hdr-v2 #Header .logo--first a:hover{ opacity: .75; } /* ---------- 3) MENU uprostřed ---------- */ html.hdr-v2 #Header .hdr-nav{ justify-self: center; min-width: 0; display: flex; align-items: center; } html.hdr-v2 #Header .hdr-nav .Element, html.hdr-v2 #Header .hdr-nav .ElementContent, html.hdr-v2 #Header .hdr-nav .ElementOrder{ margin: 0; padding: 0; border: 0; background: none; } html.hdr-v2 #Header .hdr-nav .ElementHeader{ display: none !important; } html.hdr-v2 #Header .hdr-nav ul.First{ display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--hdr-nav-gap); margin: 0; padding: 0; list-style: none; } html.hdr-v2 #Header .hdr-nav ul.First > li{ position: relative; margin: 0; padding: 0; list-style: none; border: 0; background: none; } html.hdr-v2 #Header .hdr-nav ul.First > li > a{ display: block; position: relative; padding: 8px 0; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--hdr-ink) !important; text-decoration: none; white-space: nowrap; background: none; height: fit-content; } /* podtržení při najetí / na aktivní položce */ html.hdr-v2 #Header .hdr-nav ul.First > li > a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } .pageheader .ProductTreeElement .ElementContent ul.First li.clevel_1>a.calevel_1:hover span:after{ content: unset;; } html.hdr-v2 #Header .hdr-nav ul.First > li > a:hover::after, html.hdr-v2 #Header .hdr-nav ul.First > li.active > a::after{ transform: scaleX(1); } /* rozbalovací podmenu */ html.hdr-v2 #Header .hdr-nav ul.First > li > ul{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 220px; margin-top: 14px; padding: 10px; background: #fff; border: 1px solid var(--hdr-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(17,24,39,.10); list-style: none; z-index: 60; } html.hdr-v2 #Header .hdr-nav ul.First > li > ul a{ display: block; padding: 8px 12px; font-size: 14px; color: var(--hdr-ink); text-decoration: none; border-radius: 8px; white-space: nowrap; } html.hdr-v2 #Header .hdr-nav ul.First > li > ul a:hover{ background: var(--hdr-field); } /* ---------- 4) PRAVÁ ČÁST: hledání + účet + košík ---------- */ html.hdr-v2 #Header .pageheader__content--inner.right{ display: flex; align-items: center; justify-content: flex-end; justify-self: end; width: auto; } html.hdr-v2 #Header .UserInfoElement{ display: flex; flex-direction: row-reverse; /* v HTML je pořadí košík, účet, hledání */ align-items: center; gap: 18px; width: auto; margin: 0; padding: 0; } html.hdr-v2 #Header .UserMenu, html.hdr-v2 #Header .Cart{ flex: 0 0 auto; } /* ---------- 5) TRVALE OTEVŘENÉ VYHLEDÁVÁNÍ ---------- */ html.hdr-v2 #Header .js-search-button{ display: none !important; } /* přepínací lupa není potřeba */ html.hdr-v2 #Header .SearchForm{ flex: 0 0 auto; width: var(--hdr-search-w); max-width: 100%; transition: width .22s ease; } .Product .Buttons a.Basket, #Buy{ background-color: #1c318b; } .pageheader .SearchForm .autocompleteContainer{ top: 40px !important; } html.hdr-v2 #Header .SearchForm:focus-within{ width: var(--hdr-search-w-open); } html.hdr-v2 #Header .SearchForm form{ margin: 0; padding: 0; height: auto; width: 300px;} html.hdr-v2 #Header .SearchForm fieldset{ display: flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 6px 0 14px; background: var(--hdr-field); border: 1px solid transparent; border-radius: 999px; transition: background .18s ease, border-color .18s ease; } html.hdr-v2 #Header .SearchForm:focus-within fieldset{ background: #fff; border-color: var(--hdr-ink); } html.hdr-v2 #Header .SearchForm fieldset > span, html.hdr-v2 #Header .SearchForm legend{ display: none !important; } html.hdr-v2 #Header .SearchForm #search_field{ flex: 1 1 auto; min-width: 0; width: auto; height: 38px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 14px; line-height: 38px; color: var(--hdr-ink); outline: none; } html.hdr-v2 #Header .SearchForm #search_field::placeholder{ color: var(--hdr-muted); } html.hdr-v2 #Header .SearchForm #search_button{ flex: 0 0 auto; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 999px; background-color: transparent; cursor: pointer; } html.hdr-v2 #Header .SearchForm #search_button:hover{ background-color: rgba(17,17,17,.06); } .pageheader .SearchForm .Row td.Name { /*width: 300px !important;*/ } .pageheader .SearchForm .Row td.Price{ text-align: center; } .pageheader .SearchForm .Row { display: flex; justify-content: space-around; align-items: center; border-bottom: 1px solid #cdcdcd; } .pageheader .SearchForm .Row td { white-space: normal; line-height: normal; } .pageheader .SearchForm .autocompleteContainer { /*width: 500px!important;*/ padding: 5px 5px 5px; right: -38%!important; } /* ---------- 6) RESPONZIVITA ---------- */ @media (max-width: 1279px){ html.hdr-v2 #Header{ --hdr-gap: 24px; --hdr-nav-gap: 20px; --hdr-search-w: 180px; --hdr-pad: 20px; } html.hdr-v2 #Header .hdr-nav ul.First > li > a{ font-size: 14px; } } /* pod 1100 px se menu vrací do vlastní lišty (přesouvá JS) */ @media (max-width: 1099px){ html.hdr-v2 #Header .pageheader__main > .pageheader__content{ grid-template-columns: auto auto; justify-content: space-between; height: auto; min-height: 64px; } html.hdr-v2 #Header .hdr-nav{ display: none; } html.hdr-v2 #Header .pageheader__topline{ display: block !important; } html.hdr-v2 #Header .logo--first a{ font-size: 21px; } html.hdr-v2 #Header .SearchForm{ width: 170px; } html.hdr-v2 .PageCenter{ padding-top: 65px !important; } /* původní hodnota šablony */ } @media (max-width: 991px){ html.hdr-v2 #Header .SearchForm{ display: none; } html.hdr-v2 #Header .js-search-button{ display: block !important; } } #CentralPart .MenuElement .ElementContent ul{ display: flex; } #CentralPart .MenuElement .ElementContent ul li{ height: 300px; } /* ===== KATEGORIE NA HP – karty podle návrhu (pouze CSS) ===== */ .MenuElement:has(.MenuImage img){ --cat-bg:#f5f6fa; /* pozadí sekce */ --cat-card:#FFFFFF; /* karta */ --cat-border:#EBE7DF; /* rámeček karty */ --cat-badge:#E8E4D9; /* kolečko pod obrázkem */ --cat-accent:#1c318b; /* zelený akcent */ --cat-text:#101A28; background:var(--cat-bg); margin:32px 0; padding:48px 40px 56px; /* béžové pozadí přes celou šířku okna */ box-shadow:0 0 0 100vmax var(--cat-bg); clip-path:inset(0 -100vmax); max-width: 1920px; margin: auto; } /* nadpis: původní "Kategorie" = zelený nadtitulek + doplněný velký titulek */ .MenuElement:has(.MenuImage img) > .ElementHeader{ display:block; text-align:left; margin:0 0 26px; padding:0; border:0; background:none; } .MenuElement:has(.MenuImage img) > .ElementHeader > span{ display:block; color:var(--cat-accent); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.2; } .MenuElement:has(.MenuImage img) > .ElementHeader::after{ content:"Nakupujte podle kategorie"; display:block; margin-top:6px; color:var(--cat-text); font-size:34px; line-height:1.15; font-weight:800; letter-spacing:-.01em; } /* mřížka karet */ .MenuElement:has(.MenuImage img) .ElementContent.Menu > ul{ display:flex; flex-wrap:wrap; gap:16px; margin:0; padding:0; list-style:none; } .MenuElement:has(.MenuImage img) .ElementContent.Menu > ul > li{ flex:1 1 160px; margin:0; list-style:none; float:none; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:26px 12px 22px; box-sizing:border-box; text-align:center; background:var(--cat-card); border:1px solid var(--cat-border); border-radius:14px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .MenuElement:has(.MenuImage img) .ElementContent.Menu > ul > li::before{ content:none; } .MenuElement:has(.MenuImage img) .ElementContent.Menu > ul > li:hover{ border-color:var(--cat-accent); transform:translateY(-3px); box-shadow:0 10px 24px rgba(16,26,40,.08); } /* kolečko s obrázkem */ .MenuElement:has(.MenuImage img) .MenuImage{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin:0; padding:0; border-radius:50%; overflow:hidden; } .MenuElement:has(.MenuImage img) .MenuImage img{ width:200px; height:200px; max-width:none; object-fit:contain; display:block; } /* název kategorie */ .MenuElement:has(.MenuImage img) .ElementContent.Menu > ul > li > span:not(.MenuImage), .MenuElement:has(.MenuImage img) .ElementContent.Menu > ul > li > a{ display:block; width:100%; margin:0; padding:0; color:var(--cat-text); font-size:15px; font-weight:600; line-height:1.3; text-decoration:none; } .ProductBoxElement{ max-width: 1920px; margin: auto; } .device--desktop .Product .Buttons{ opacity: 1; } @media(min-width: 991px){ .ElementOrder_7{ width: 48%; float:left; margin: 10px; } .ElementOrder_8{ width: 48%; float: right; margin: 10px; } } .ElementOrder_5{ background: #f5f6fa; } @media (max-width: 991px) { html.hdr-v2 #Header .SearchForm form{ width: 100%; } .pageheader .SearchForm .Row td.Name { width: 60% !important; } } #ObsahStrankyElements_3 { margin: 0 30px; } /* ========================================================= NOVINKY – redesign sekce (blok .ProductBoxElement) ========================================================= */ .ProductBoxElement{ --nv-card: #FFFFFF; /* karta */ --nv-ink: #141414; /* hlavní text / tlačítko */ --nv-muted: #6B6B63; /* sekundární text */ --nv-accent: #0E8A6A; /* zelená (Novinky/Skladem) */ --nv-line: #DCDCD2; /* linky, outline tlačítka */ --nv-radius: 14px; padding: 56px 40px 64px; margin: auto; border-radius: 20px; /* chcete-li ostré hrany, smažte */ } /* ---------- hlavička sekce ---------- */ .ProductBoxElement .ProductBoxHeader{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 32px; padding:0; border:0; background:none; } .ProductBoxElement .nv-eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--nv-accent); margin-bottom:10px; } .ProductBoxElement .nv-title{ margin:0; font-size:38px; line-height:1.15; font-weight:800; letter-spacing:-.02em; color:var(--nv-ink); } .ProductBoxElement .nv-all{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--nv-ink); text-decoration:none; padding-bottom:4px; transition:gap .2s ease, opacity .2s ease; } .ProductBoxElement .nv-all:hover{ gap:14px; opacity:.7; } /* ---------- mřížka ---------- */ .ProductBoxElement .ProductList, .ProductBoxElement .ProductList_Col{ margin:0; padding:0; } .ProductBoxElement .ProductListArea{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; float:none; } /* ---------- karta produktu ---------- */ .ProductBoxElement .Product{ width:auto !important; max-width:none; margin:0; float:none; display:flex; flex-direction:column; background:var(--nv-card); border:0; border-radius:var(--nv-radius); padding:12px 12px 16px; box-shadow:0 1px 2px rgba(20,20,20,.04); transition:box-shadow .2s ease, transform .2s ease; } .ProductBoxElement .Product:hover{ box-shadow:0 10px 28px rgba(20,20,20,.08); transform:translateY(-2px); } /* pořadí prvků v kartě */ .ProductBoxElement .Product .ProductImage { order:1; } .ProductBoxElement .Product .ExpeditionInfo { order:2; } .ProductBoxElement .Product .ProductName { order:3; } .ProductBoxElement .Product h4 { order:4; } .ProductBoxElement .Product .Buttons { order:5; } /* co v novém designu nechceme */ .ProductBoxElement .Product .RelBox, .ProductBoxElement .Product .ManufacturerInfo, .ProductBoxElement .Product .ProductDescription, .ProductBoxElement .Product .Cleaner, .ProductBoxElement .Product .ExpeditionInfo .Label, .ProductBoxElement .Product h4 .Label{ display:none !important; } /* ---------- obrázek ---------- */ /* Miniatury z eshopu jsou 565x336 px (poměr 5:3). Obrázek roztáhneme na celou šířku karty a poměr sjednotíme, aby byly karty stejně vysoké. */ .ProductBoxElement .Product .ProductImage{ width:auto !important; height:auto !important; margin:0 0 14px; padding:0; border-radius:10px; overflow:hidden; } .ProductBoxElement .Product .ProductImage table, .ProductBoxElement .Product .ProductImage tbody, .ProductBoxElement .Product .ProductImage tr, .ProductBoxElement .Product .ProductImage td, .ProductBoxElement .Product .ProductImage a{ display:block !important; width:100% !important; height:auto !important; padding:0; border:0; } .ProductBoxElement .Product .ProductImage img{ display:block; width:100% !important; height:auto !important; max-width:none; max-height:none; aspect-ratio:5 / 3; /* poměr miniatur; 16/9 = těsnější výřez */ object-fit:contain; object-position:center; transition:transform .4s ease; } .ProductBoxElement .Product:hover .ProductImage img{ transform:scale(1.04); } /* ---------- dostupnost ---------- */ .ProductBoxElement .Product .ExpeditionInfo{ margin:0 0 6px; padding:0 4px; font-size:13px; line-height:1.2; font-weight:600; } .ProductBoxElement .Product .ExpeditionInfo .Value{ color:var(--nv-accent); } /* nedostupné / na objednávku – doplňte podle svých tříd ExpeditionInfo_X .ProductBoxElement .Product .ExpeditionInfo_3 .Value{ color:#B26A00; } .ProductBoxElement .Product .ExpeditionInfo_0 .Value{ color:#9A9A92; } */ /* ---------- název ---------- */ .ProductBoxElement .Product .ProductName{ margin:0 0 8px; padding:0 4px; font-size:17px; line-height:1.35; font-weight:700; } .ProductBoxElement .Product .ProductName a{ color:var(--nv-ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ProductBoxElement .Product .ProductName a:hover{ text-decoration:underline; } /* ---------- cena ---------- */ .ProductBoxElement .Product h4{ margin:0 0 16px; padding:0 4px; font-size:0; /* schová mezery po skrytém popisku "Cena:" */ line-height:1.2; font-weight:700; color:var(--nv-ink); } .ProductBoxElement .Product h4 .ProductPrice{ font-size:20px; font-weight:inherit; color:inherit; } /* ---------- počet kusů + tlačítka ---------- */ .ProductBoxElement .Product .Buttons{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:auto; padding:0; float:none; } /* stepper na počet kusů */ .ProductBoxElement .Product .AmountInput{ flex:0 0 112px; width:112px; margin:0; padding:0; } .ProductBoxElement .Product .AmountInput .UnitShortcut{ display:none; } /* "ks" – chcete-li ho vidět, smažte */ .ProductBoxElement .Product .AmountInput .count-input-wrapper{ position:relative; display:flex; align-items:center; width:112px; height:44px; margin:0; padding:0; border:1px solid var(--nv-line); border-radius:10px; background:#fff; box-sizing:border-box; } .ProductBoxElement .Product .AmountInput .count-input-wrapper input{ width:100%; height:42px; margin:0; padding:0 32px; border:0; background:transparent; box-shadow:none; text-align:center; font-size:14px; font-weight:700; color:var(--nv-ink); box-sizing:border-box; } .ProductBoxElement .Product .AmountInput .CountButton{ position:absolute; top:0; bottom:0; width:32px; height:100%; display:flex; align-items:center; justify-content:center; transform:none; margin:0; border:0; background:none; color:var(--nv-muted); font-size:16px; font-weight:600; line-height:1; cursor:pointer; user-select:none; } .ProductBoxElement .Product .AmountInput .CountButton:hover{ color:var(--nv-ink); } .ProductBoxElement .Product .AmountInput .CountButton.Minus{ left:0; } .ProductBoxElement .Product .AmountInput .CountButton.Plus{ right:0; } /* tlačítka */ .ProductBoxElement .Product .Buttons a.Basket, .ProductBoxElement .Product .Buttons a.Lupa{ display:flex; align-items:center; justify-content:center; min-width:0; height:44px; padding:0 10px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; box-sizing:border-box; transition:background-color .2s ease, color .2s ease, border-color .2s ease; } .ProductBoxElement .Product .Buttons a.Basket{ flex:1 1 128px; background:#1c318b; border:1px solid #1c318b; color:#fff; } .ProductBoxElement .Product .Buttons a.Basket:hover{ background:#3a54c9; border-color:#000; } .ProductBoxElement .Product .Buttons a.Lupa{ flex:1 1 110px; background:#fff; border:1px solid var(--nv-line); color:var(--nv-ink); } .ProductBoxElement .Product .Buttons a.Lupa:hover{ border-color:var(--nv-ink); background:#FAFAF7; } /* ikonky (icomoon) z původní šablony pryč */ .ProductBoxElement .Product .Buttons a.Basket:before, .ProductBoxElement .Product .Buttons a.Basket:after, .ProductBoxElement .Product .Buttons a.Lupa:before, .ProductBoxElement .Product .Buttons a.Lupa:after{ content:none !important; display:none !important; } /* ---------- responzivita ---------- */ @media (max-width:1023px){ .ProductBoxElement{ padding:40px 24px 48px; } .ProductBoxElement .ProductListArea{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .ProductBoxElement .nv-title{ font-size:30px; } } @media (max-width:639px){ .ProductBoxElement{ padding:32px 16px 40px; } .ProductBoxElement .Product .AmountInput, .ProductBoxElement .Product .AmountInput .count-input-wrapper{ flex:0 0 100%; width:100%; } .ProductBoxElement .ProductBoxHeader{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:24px; } .ProductBoxElement .ProductListArea{ grid-template-columns:1fr; } .ProductBoxElement .nv-title{ font-size:26px; } } .ElementOrder:has(footer) { max-width: unset !important; margin: 0; padding: 0; } .ElementContent.ArticleList { grid-template-columns: repeat(1,1fr); } .Element.ArticleListElement.ArticleListElement_1.ui-sortable-handle { width: 80%; margin: auto; } .Element.ArticleListElement.ArticleListElement_1.ui-sortable-handle .ElementHeader{ justify-content: center; } .pagefooter{ padding: 0; } .pagetail{ background: #16181d; padding: 0px 50px; padding-bottom: 10px; } .NewsletterElement{ background: #142569; border: 0px; color: #fff; border-radius: 0px; margin:0; } .pagecontent--main{ padding-bottom: 0; } .ElementOrder:has(.ArticleListElement){ padding-left: 40px; padding-right: 40px; }