/* ============================================================
* 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.
* ============================================================ */
.cookie {
display: none !important;
}
html.cookies-show .cookie {
display: flex !important;
position: fixed !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;
}