/* ============================================================
* BIKESKILLS overrides
* Custom CSS overrides aplikované za Webflow CSS.
* Účel:
* - Cookie banner hide-by-default (ne-LCP element pro PSI mobile)
* - Partner-logo marquee: konzistentní animace na všech breakpointech
* - Opravit deformaci log (hardcoded width="300" height="200" v HTML)
* - Single-row layout (původní grid se na mobilu lámal do více řádků)
* - Override agresivního globálního img { height:160px; width:100%; object-fit:cover }
* z hlavního Webflow CSS (deformuje footer comgate logo a utility obrázky).
* ============================================================ */
/* ============================================================
* Footer comgate / utility obrázky — reset deformace
*
* Pozadí:
* - V multy-webflow-to-wordpres-...css existuje globální pravidlo
* img { width:100%; height:160px; object-fit:cover; ... }
* určené pro card-thumbnail v listingu blog/akce, ale matchuje VŠECHNY
* ![]()
a deformuje 400×40 comgate logo do 160px výšky.
* - .image-45 (footer comgate) má v hlavním CSS jen `max-width: 90%`,
* takže height: 160px z generického selektoru přebije.
*
* Fix: explicit reset pro tuhle konkrétní třídu.
* ============================================================ */
.image-45 {
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
object-fit: contain !important;
}
/* ============================================================
* Cookie banner — skrytý defaultně, JS v ho ukáže
* jen pokud chybí 'cookieClosed' cookie (nový návštěvník).
*
* Cíl: zabránit PSI Lighthouse, aby banner detekoval jako
* Largest Contentful Paint element na mobilu (žlutá ~60 % viewportu).
* Banner se pro nového návštěvníka stejně objeví (přidání class
* 'cookies-show' na proběhne synchronně před prvním paintem),
* ale po LCP měření.
*
* CLS fix (PSI mobile 2026-04-25):
* - Multy-webflow CSS má `.cookie{position:sticky; bottom:0; height:100vh}`.
* Sticky je v normal flow → display:none→flex přidá 100vh k page height,
* což může u Lighthouse způsobit indirect layout shift hero-home-v2.
* - Override na `position:fixed` ho dostane mimo flow → 0 layout impact.
*
* UX fix (2026-04-25):
* - Webflow má `.cookie{height:100vh; background:#222528cc}` → tmavý
* fullscreen overlay přes celý web, blokuje interakci. Špatné UX
* a mimo aktuální best-practice (cookie-wall je pod GDPR problematická).
* - Override: height:auto, bg:transparent, fixed bottom 0 — zůstane
* jen žlutá .gdrp-section dole, web je plně použitelný i bez kliknutí
* PŘIJÍMÁM. Necháváme původní z-index 99999, aby lišta byla nad obsahem.
* ============================================================ */
.cookie {
display: none !important;
}
html.cookies-show .cookie {
display: flex !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
height: auto !important;
min-height: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
pointer-events: none !important; /* prázdná plocha kolem .gdrp-section neblokuje klik */
overflow: visible !important;
}
html.cookies-show .cookie .gdrp-section,
html.cookies-show .cookie .product-wrap,
html.cookies-show .cookie .close-btn,
html.cookies-show .cookie .banner-close-card,
html.cookies-show .cookie a {
pointer-events: auto !important; /* uvnitř lišty klik funguje normálně */
}
/* ODMÍTNOUT — vizuálně jako text link s podtržením (jako 'NAŠE AKCE A CAMPY'
* v hero sekci). GDPR-compliant je důležité, aby reject byl viditelný a snadno
* klikatelný — text link s podtržením to splňuje (stejně viditelný jako accept,
* ale vizuálně méně agresivní než button → lepší vyvážení nátlaku k souhlasu). */
html.cookies-show .cookie .bs-reject-btn {
display: inline-block;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin-right: 24px !important;
color: var(--black, #1a1a1a) !important;
font-family: proxima-nova, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .025rem;
text-transform: uppercase;
text-decoration: underline !important;
text-underline-offset: 3px;
cursor: pointer;
transition: opacity .2s;
}
html.cookies-show .cookie .bs-reject-btn:hover {
opacity: .65 !important;
}
/* Bell ikona — original HTML má width=70 height=84 + duplicitní width=30
* (špatný markup), což CSS deformuje na výšku. Lock na fixed dimensions
* s object-fit:contain (zachová poměr i kdyby zdroj měl jiný). */
html.cookies-show .cookie .banner-icon {
width: 40px !important;
height: 48px !important;
max-width: 40px !important;
max-height: 48px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
/* ============================================================
* Cookie banner — mobil (≤767px) kompaktní layout
*
* Pozadí:
* - Webflow Mobile L breakpoint dává `.product-wrap{flex-direction:column;
* padding:20px 20px 75px}` + `.close-btn{display:block; margin-top:19px}`.
* - Výsledek: bell, text, ODMÍTNOUT, PŘIJÍMÁM jsou pod sebou → ~290 px
* výška na 360px viewportu (Samsung Galaxy S8+).
*
* Fix: vrátit row layout, tlačítka inline-block side-by-side, menší font,
* menší bell, menší padding. Cíl: ~120-140 px výška.
* ============================================================ */
@media (max-width: 767px) {
/* CSS Grid layout — 3 vizuální řádky:
┌──────────────────────────────────┐
│ × │ Row 1: × close (vpravo, ORIGINÁLNÍ velikost)
│ ODMÍTNOUT PŘIJÍMÁM │ Row 2: tlačítka vlevo
│ │ ← mezera (margin-top:14px na textu)
│ Cookies info text… │ Row 3: text (bell skrytý — úspora místa)
└──────────────────────────────────┘ */
/* .gdrp-section — žlutý wrapper kolem product-wrap.
Webflow default: padding-bottom:50px. Na mobile chceme jen 10px ze všech stran. */
html.cookies-show .cookie .gdrp-section {
padding: 10px !important;
}
html.cookies-show .cookie .product-wrap {
display: grid !important;
grid-template-columns: auto auto 1fr !important;
grid-template-areas:
". . close"
"reject accept . "
"text text text " !important;
column-gap: 10px !important;
row-gap: 4px !important;
align-items: center !important;
padding: 0 !important;
min-height: 0 !important;
}
/* left-wrap rozbalit → bell + title-wrap jsou přímé grid items */
html.cookies-show .cookie .left-wrap {
display: contents !important;
}
/* × close — Row 1 vpravo, ORIGINÁLNÍ velikost
KRITICKÉ: Webflow má `.banner-close-card{position:absolute; inset:0 0 0 auto}`
→ musí být `position:static`, jinak vypadne z grid flow a překryje
tlačítka u pravého okraje. */
html.cookies-show .cookie .banner-close-card {
grid-area: close !important;
justify-self: end !important;
position: static !important;
inset: auto !important;
margin: 0 !important;
}
/* ODMÍTNOUT + PŘIJÍMÁM — Row 2 vlevo */
html.cookies-show .cookie .bs-reject-btn {
grid-area: reject !important;
font-size: 11px !important;
margin: 0 !important;
text-underline-offset: 2px;
justify-self: start !important;
}
html.cookies-show .cookie .close-btn:not(.bs-reject-btn) {
grid-area: accept !important;
display: inline-block !important;
padding: 6px 12px !important;
font-size: 11px !important;
margin: 0 !important;
line-height: 1.4 !important;
justify-self: start !important;
}
/* Bell — skrýt na mobile (uvolní místo, ikona není kritická pro porozumění) */
html.cookies-show .cookie .con-wrap-2 {
display: none !important;
}
/* Text — Row 3, větší margin-top = vizuální mezera nad textem */
html.cookies-show .cookie .banner-title-wrap {
grid-area: text !important;
margin: 14px 0 0 0 !important;
}
/* Texty menší */
html.cookies-show .cookie .banner-author,
html.cookies-show .cookie .banner-author.link,
html.cookies-show .cookie .banner-title-wrap,
html.cookies-show .cookie .banner-author-wrap {
font-size: 11px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
* Partner logo marquee — vlastní CSS animace
*
* Pozadí:
* - Original Webflow řešení používá IX2 interaction (data-w-id na
* .partner-logo-section) která posouvá .partner-container přes JS.
* Webflow IX2 typicky disabuje animace na mobile breakpointech →
* pod 991px stál strip nehybný, viditelná byla jen prvních ~360px
* z 3000px stripu.
* - .partner-logo-container byl CSS Grid s 9 sloupci → na úzkém viewportu
* grid forcoval velmi malé sloty a obrázky s hardcoded width/height
* se vertikálně natahovaly.
*
* Naše řešení:
* - Override IX2: `transform:none` + vlastní `animation` s `!important`
* (animation transform má při běhu vyšší prioritu než inline transform)
* - .partner-logo-container změněn z Grid na Flex (nowrap) → single row
* - Loga: fixed slot (width × height) + object-fit:contain → bez deformace
* - Animace -50% pole znamená, že sjedou všechna logy z jedné kopie
* (druhý duplicitní container drží navazující sekvenci pro seamless loop)
* ============================================================ */
/* Wrapper — overflow hidden, plná šíře */
.partner-overflow-wrapper {
width: 100% !important;
overflow: hidden !important;
}
/* Strip — flex row, vlastní animace, override Webflow IX2 inline transform */
.partner-container {
width: max-content !important;
display: flex !important;
overflow: visible !important;
transform: none;
animation: bs-partner-marquee 40s linear infinite !important;
will-change: transform;
}
/* Logo container — flex row místo grid */
.partner-container > .partner-logo-container {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 32px;
padding: 15px 24px;
width: auto !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
}
/* Logo slot — fixed dimenze, image contain (žádná deformace) */
.partner-logo-container .partner-logo-link {
flex: 0 0 auto;
width: 140px;
height: 80px;
display: flex !important;
align-items: center;
justify-content: center;
max-width: none;
}
.partner-logo-container .partner-logo-link img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain;
display: block;
}
/* Marquee keyframes — translate -50% (přejde celá kopie 1, druhá kopie navazuje) */
@keyframes bs-partner-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Hover pause — uživatel si může logo prohlédnout */
.partner-overflow-wrapper:hover .partner-container {
animation-play-state: paused !important;
}
/* Respect prefers-reduced-motion (uživatelé s vestibulárními poruchami) */
@media (prefers-reduced-motion: reduce) {
.partner-container {
animation: none !important;
transform: translateX(0) !important;
}
}
/* ============================================================
* Responsive breakpointy — postupné zmenšení slotu + zrychlení animace
* (kratší strip → kratší doba pro stejnou rychlost čtení)
* ============================================================ */
/* Tablet (≤991px) */
@media (max-width: 991px) {
.partner-logo-container .partner-logo-link {
width: 110px;
height: 65px;
}
.partner-container > .partner-logo-container {
gap: 24px;
padding: 12px 16px;
}
.partner-container {
animation-duration: 35s !important;
}
}
/* Telefon (≤767px) */
@media (max-width: 767px) {
.partner-logo-container .partner-logo-link {
width: 95px;
height: 56px;
}
.partner-container > .partner-logo-container {
gap: 20px;
padding: 10px 12px;
}
.partner-container {
animation-duration: 30s !important;
}
}
/* Malý telefon (≤479px) */
@media (max-width: 479px) {
.partner-logo-container .partner-logo-link {
width: 80px;
height: 50px;
}
.partner-container > .partner-logo-container {
gap: 16px;
padding: 10px;
}
.partner-container {
animation-duration: 25s !important;
}
}
/* ============================================================
* Hero-home-v2 — responzivní background-image (LCP optimalizace)
*
* Pozadí:
* - .hero-home-v2 má v multy-webflow CSS background-image: banner2021.jpg (234 KiB, 1250x937).
* - Na mobile je element zobrazen na ~686x515 — fullsize obrázek je 2× větší než potřeba.
* - PSI měření: LCP element je tento , jeho background blokuje LCP.
*
* Fix: na mobile podsouváme menší variantu banner2021-mobile.jpg (177 KiB).
* Doplněno preload tagem v index.html s fetchpriority=high.
* ============================================================ */
@media (max-width: 991px) {
.hero-home-v2 {
background-image: url('../images/banner2021-mobile.jpg') !important;
}
}
/* ============================================================
* Self-hosted Lobster (LCP critical path optimalizace)
*
* Pozadí:
* - PSI mobile waterfall: HTML → webflow.css → /css2?Lobster → woff2 = ~2.1 s
* na kritické cestě. Lobster woff2 sám trvá 1092 ms (4. úroveň řetězu).
* - Self-host odstraní 2 z 4 úrovní řetězu (CSS request + DNS na fonts.gstatic.com).
* - Lobster je SIL Open Font License — self-host povolen.
*
* Subsety:
* - latin (U+0000-00FF, 17 KiB): běžné ASCII + základní diakritika
* - latin-ext (U+0100-02BA…, 13 KiB): české š, č, ř, ž, ě, ů, ý
* - Browser stáhne jen ten subset, který potřebuje pro daný text.
* ============================================================ */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('../fonts/lobster-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('../fonts/lobster-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
* .image-53 (CMS hero / featured image) — fix CLS 0.137 on mobile
*
* Pozadí (PSI mobile blog detail 2026-04-26):
* - HTML attrs: width="1280" height="720" (16:9) — browser z nich
* odvodí aspect-ratio a před načtením rezervuje 100vw × 9/16.
* - Inline