/** * KarcherWynajem - wspĂłlny design system landingĂłw (soft industrial). * * Szybki refresh innego landingu: * 1. body â†’ dodaj `kw-landing` * 2. â†’ `` * 3. (opcjonalnie) `node scripts/karcher-apply-kw-ui.mjs` * * Island React montuje tylko wnÄ™trze - klasy z body (kw-landing) trafiajÄ… * na wrapper `.karcher-staging-native-island` (patrz KarcherStagingNativeIslandView). * Dlatego scope jest na obu: `.kw-landing` i `.karcher-staging-native-island`. * * Tokeny Webflow `--_ui-styles---radius--*` (domyĹ›lnie 0px) sÄ… tu nadpisane. */ :root { --kw-yellow: #ffed00; --kw-yellow-soft: #f5e003; --kw-ink: #18181b; --kw-muted: #52525b; --kw-line: #e4e4e7; --kw-surface: #fafafa; --kw-radius-sm: 8px; --kw-radius: 12px; --kw-radius-lg: 14px; --kw-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); --kw-font: localfont, Montserrat, Arial, sans-serif; /* Jak karta "Wybrany sprzet" w widgecie v2 - navbar bez szkĹ‚a */ --kw-nav-bg: #191b1d; /* Skala typografii (soft industrial) */ --kw-fs-xs: 0.75rem; /* 12 */ --kw-fs-sm: 0.875rem; /* 14 */ --kw-fs-base: 1rem; /* 16 */ --kw-fs-md: 1.0625rem; /* 17 */ --kw-fs-lg: 1.125rem; /* 18 */ --kw-fs-xl: 1.25rem; /* 20 */ --kw-fs-h5: clamp(1.0625rem, 1.2vw, 1.25rem); /* ~17-20 karty */ --kw-fs-h4: clamp(1.25rem, 1.6vw, 1.5rem); /* ~20-24 */ --kw-fs-h3: clamp(1.5rem, 2.2vw, 1.875rem); /* ~24-30 */ --kw-fs-h2: clamp(1.75rem, 2.6vw, 2.25rem); /* ~28-36 sekcje */ --kw-fs-h1: clamp(2rem, 3.5vw, 2.75rem); /* ~32-44 */ --kw-lh-tight: 1.2; --kw-lh-snug: 1.35; --kw-lh-body: 1.55; } /* Soft industrial: Webflow 0px â†’ spĂłjny radius + tokeny typografii */ .kw-landing, .karcher-staging-native-island { --_ui-styles---radius--medium: var(--kw-radius-lg) !important; --_ui-styles---radius--large: var(--kw-radius-lg) !important; --_ui-styles---radius--small: var(--kw-radius-sm) !important; --_typography---text-sizes--heading-1: var(--kw-fs-h1) !important; --_typography---text-sizes--heading-2: var(--kw-fs-h2) !important; --_typography---text-sizes--heading-3: var(--kw-fs-h3) !important; --_typography---text-sizes--heading-4: var(--kw-fs-h4) !important; --_typography---text-sizes--heading-5: var(--kw-fs-h5) !important; --_typography---text-sizes--heading-6: var(--kw-fs-xl) !important; --_typography---text-sizes--text-large: var(--kw-fs-lg) !important; --_typography---text-sizes--text-medium: var(--kw-fs-md) !important; --_typography---text-sizes--text-regular: var(--kw-fs-base) !important; --_typography---text-sizes--text-small: var(--kw-fs-sm) !important; --_typography---text-sizes--text-tiny: var(--kw-fs-xs) !important; --_typography---text-sizes--font-family: var(--kw-font) !important; font-family: var(--kw-font); color: var(--kw-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Native island: Webflow `h2 { font-size: 32px }` jest poza @layer i przebija Tailwind. * Trzymaj tytuĹ‚y krokĂłw widgetu w skali body (nie jak H2 landingu). */ .karcher-staging-native-island .veric-rezerwuj-widget h2 { margin-top: 0 !important; margin-bottom: 0 !important; font-size: 1.0625rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; } @media screen and (min-width: 640px) { .karcher-staging-native-island .veric-rezerwuj-widget h2 { font-size: 1.125rem !important; } } /* -------------------------------------------------------------------------- */ /* Typografia: role (nie psujemy hero / cenĂłwek - osobne override niĹĽej) */ /* -------------------------------------------------------------------------- */ /* Eyebrow / tagline sekcji - jedna konwencja: sentence case (nie UPPERCASE) */ :is(.kw-landing, .karcher-staging-native-island) :is( .tagline-9, .tagline-10, .tagline-11, .tagline-12, .tagline-13, .tagline-14, .tagline-18 ) { font-size: var(--kw-fs-sm) !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.04em !important; text-transform: none !important; color: var(--kw-muted) !important; } /* H2 sekcji */ :is(.kw-landing, .karcher-staging-native-island) :is( .heading-18, .heading-19, .heading-21, .heading-22, .heading-24, .heading-26, .heading-36 ) { font-size: var(--kw-fs-h2) !important; font-weight: 800 !important; line-height: var(--kw-lh-tight) !important; letter-spacing: -0.02em !important; color: var(--kw-ink) !important; } /* Lead pod H2 (byĹ‚o czÄ™sto 22-24px - za ciÄ™ĹĽkie) */ :is(.kw-landing, .karcher-staging-native-island) :is(.text-16, .text-17, .text-19, .text-20, .text-22, .text-24, .paragraph-55) { font-size: var(--kw-fs-lg) !important; font-weight: 400 !important; line-height: var(--kw-lh-body) !important; color: var(--kw-muted) !important; } /* * layout-13 / layout-204: ten sam rytm tekstu * (Webflow: heading-18 miaĹ‚ padding-top 20px, heading-21 nie - stÄ…d â€žinaczejâ€ť) */ :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .section-title-7 { gap: 10px !important; grid-row-gap: 10px !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .section-title-7 > .content-style-2 { gap: 12px !important; grid-row-gap: 12px !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .section-title-7 :is(.heading-18, .heading-21, .heading-21-copy) { padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .content-style-15 { gap: 24px !important; grid-row-gap: 24px !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .content-style-15 > .content-style-2 { gap: 0 !important; grid-row-gap: 0 !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .logos:empty { display: none !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .actions-7 { padding-left: 20px !important; margin-top: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.layout-13, .layout-204) .actions-7 :is(.button-2, .btn-copy) { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-radius: var(--kw-radius, 12px) !important; min-height: 44px !important; padding-left: 18px !important; padding-right: 18px !important; } /* TytuĹ‚y kart (zastosowania / B2B / kategorie) */ :is(.kw-landing, .karcher-staging-native-island) .heading-20 { font-size: var(--kw-fs-h5) !important; font-weight: 700 !important; line-height: var(--kw-lh-snug) !important; } /* Body w kartach zastosowaĹ„ */ :is(.kw-landing, .karcher-staging-native-island) .text-18 { font-size: var(--kw-fs-sm) !important; font-weight: 400 !important; line-height: var(--kw-lh-body) !important; color: rgba(255, 255, 255, 0.92) !important; } /* Proces: tytuĹ‚ kroku + opis */ :is(.kw-landing, .karcher-staging-native-island) .heading-23 { font-size: var(--kw-fs-xl) !important; font-weight: 800 !important; line-height: var(--kw-lh-snug) !important; color: var(--kw-ink) !important; } :is(.kw-landing, .karcher-staging-native-island) .text-21 { font-size: var(--kw-fs-sm) !important; font-weight: 400 !important; line-height: var(--kw-lh-body) !important; color: var(--kw-muted) !important; } /* FAQ */ :is(.kw-landing, .karcher-staging-native-island) .faq-4 .text-block { font-size: var(--kw-fs-lg) !important; font-weight: 700 !important; line-height: var(--kw-lh-snug) !important; color: var(--kw-ink) !important; } :is(.kw-landing, .karcher-staging-native-island) .faq-4 .paragraph { font-size: var(--kw-fs-base) !important; font-weight: 400 !important; line-height: var(--kw-lh-body) !important; color: var(--kw-muted) !important; padding: 16px 18px !important; } /* Mapa: karta kontaktowa (ciemne szkĹ‚o - jasny tekst) */ :is(.kw-landing, .karcher-staging-native-island) address.kw-map-stage, :is(.kw-landing, .karcher-staging-native-island) address.kw-map-stage * { font-style: normal !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-map-stage .heading-37 { font-size: var(--kw-fs-sm) !important; font-weight: 800 !important; line-height: var(--kw-lh-snug) !important; color: #fafafa !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-map-stage .text-32 { font-size: var(--kw-fs-sm) !important; font-weight: 400 !important; line-height: var(--kw-lh-body) !important; color: rgba(244, 244, 245, 0.9) !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-map-stage a.text-32 { font-weight: 700 !important; color: #fafafa !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-map-stage .kw-google-reviews { margin-top: 0 !important; border-color: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.12) !important; color: #fafafa !important; box-shadow: none !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-map-stage .kw-google-reviews__score { color: #fafafa !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-map-stage .kw-google-reviews__count { color: rgba(244, 244, 245, 0.82) !important; } /* CTA â€žMasz jeszcze pytania?â€ť */ :is(.kw-landing, .karcher-staging-native-island) .faq-4 .heading-27 { font-size: var(--kw-fs-h4) !important; font-weight: 800 !important; line-height: var(--kw-lh-snug) !important; } /* -------------------------------------------------------------------------- */ /* Przyciski */ /* -------------------------------------------------------------------------- */ .kw-btn, .kw-landing a.kw-btn, .karcher-staging-native-island a.kw-btn, .kw-landing .kw-btn.w-button, .karcher-staging-native-island .kw-btn.w-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; margin: 0; padding: 14px 26px !important; border-radius: var(--kw-radius) !important; border: 1px solid transparent !important; font-family: var(--kw-font) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.02em; text-decoration: none !important; text-align: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .kw-btn:hover, .kw-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); } .kw-btn:active { transform: translateY(0); box-shadow: none; } .kw-btn:focus-visible { outline: 2px solid var(--kw-yellow); outline-offset: 3px; } .kw-btn--primary, .kw-landing .kw-btn--primary, .karcher-staging-native-island .kw-btn--primary, .kw-landing a.kw-btn--primary, .karcher-staging-native-island a.kw-btn--primary { color: #111 !important; background-color: var(--kw-yellow) !important; border-color: var(--kw-yellow) !important; } .kw-btn--primary:hover, .kw-btn--primary:focus-visible, .kw-landing .kw-btn--primary:hover, .karcher-staging-native-island .kw-btn--primary:hover { background-color: var(--kw-yellow-soft) !important; border-color: var(--kw-yellow-soft) !important; color: #111 !important; } .kw-btn--outline, .kw-landing .kw-btn--outline, .karcher-staging-native-island .kw-btn--outline, .kw-landing a.kw-btn--outline, .karcher-staging-native-island a.kw-btn--outline { color: #111 !important; background-color: rgba(197, 204, 117, 0.12) !important; border-color: var(--kw-yellow) !important; } .kw-btn--outline:hover, .kw-btn--outline:focus-visible, .kw-landing .kw-btn--outline:hover, .karcher-staging-native-island .kw-btn--outline:hover { background-color: rgba(255, 237, 0, 0.18) !important; border-color: var(--kw-yellow) !important; color: #111 !important; } /* -------------------------------------------------------------------------- */ /* Google reviews (real rating - link do Maps, bez fake opinii) */ /* -------------------------------------------------------------------------- */ :is(.kw-landing, .karcher-staging-native-island) .kw-google-reviews { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin-top: 14px !important; padding: 8px 12px !important; border-radius: 999px !important; border: 1px solid var(--kw-line) !important; background: #fff !important; color: var(--kw-ink) !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; transition: border-color 0.15s ease, transform 0.15s ease !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-google-reviews:hover, :is(.kw-landing, .karcher-staging-native-island) .kw-google-reviews:focus-visible { border-color: var(--kw-yellow) !important; transform: translateY(-1px) !important; outline: none !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-google-reviews__stars { color: #fbbc04 !important; font-size: 14px !important; letter-spacing: 1px !important; line-height: 1 !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-google-reviews__score { font-size: 14px !important; font-weight: 800 !important; } :is(.kw-landing, .karcher-staging-native-island) .kw-google-reviews__count { font-size: 13px !important; font-weight: 600 !important; color: var(--kw-muted) !important; } .kw-btn--sm { padding: 11px 18px !important; font-size: 14px !important; } .kw-landing .btn-copy:not(.kw-btn), .karcher-staging-native-island .btn-copy:not(.kw-btn) { border-radius: var(--kw-radius) !important; } .kw-landing .button-2:not(.kw-btn):not(.menu-button-2), .karcher-staging-native-island .button-2:not(.kw-btn):not(.menu-button-2) { border-radius: var(--kw-radius) !important; } /* -------------------------------------------------------------------------- */ /* Powierzchnie */ /* -------------------------------------------------------------------------- */ .kw-card { border-radius: var(--kw-radius-lg); border: 1px solid var(--kw-line); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); overflow: hidden; } .kw-panel { border-radius: var(--kw-radius-lg); border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); box-shadow: var(--kw-shadow); } .kw-section { width: 100%; max-width: 100%; box-sizing: border-box; padding-left: var(--_spacing-sizing---page-padding--padding-global, clamp(16px, 4vw, 64px)); padding-right: var(--_spacing-sizing---page-padding--padding-global, clamp(16px, 4vw, 64px)); } .kw-section__inner { width: 100%; max-width: min(1280px, 100%); margin-left: auto; margin-right: auto; } .kw-section__intro { width: 100%; max-width: 42rem; margin: 0 auto; text-align: center; } .kw-eyebrow { margin: 0 0 8px; font-family: var(--kw-font); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: var(--kw-muted); } .kw-title { margin: 0; font-family: var(--kw-font); font-size: clamp(1.5rem, 2.2vw, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--kw-ink); } .kw-sub { margin: 10px 0 0; font-family: var(--kw-font); font-size: 15px; line-height: 1.45; color: var(--kw-muted); } /* -------------------------------------------------------------------------- */ /* Jawne override kart / brochure (Webflow + hub) */ /* -------------------------------------------------------------------------- */ .kw-landing .btn-copy, .karcher-staging-native-island .btn-copy, .kw-landing .button-2:not(.menu-button-2), .karcher-staging-native-island .button-2:not(.menu-button-2), .kw-landing .btn, .karcher-staging-native-island .btn, .kw-landing .btn-bazawiedzy, .karcher-staging-native-island .btn-bazawiedzy, .kw-landing a.w-button:not(.menu-button-2):not(.nav-link-3):not(.nav-link-4), .karcher-staging-native-island a.w-button:not(.menu-button-2):not(.nav-link-3):not(.nav-link-4) { border-radius: var(--kw-radius) !important; } /* Karty foto / oferta / kategorie: soft radius, bez szarego 1px (ĹĽĂłĹ‚ty akcent Webflow) */ .kw-landing .parownice, .karcher-staging-native-island .parownice, .kw-landing .odkurzacze, .karcher-staging-native-island .odkurzacze, .kw-landing .myjki, .karcher-staging-native-island .myjki, .kw-landing .szorowarki, .karcher-staging-native-island .szorowarki, .kw-landing .dkurzacz-piorace, .karcher-staging-native-island .dkurzacz-piorace, .kw-landing .card13, .karcher-staging-native-island .card13, .kw-landing .card-13-copy, .karcher-staging-native-island .card-13-copy, .kw-landing .odkrz-piorace, .karcher-staging-native-island .odkrz-piorace, .kw-landing .kw-cat-card__face, .karcher-staging-native-island .kw-cat-card__face { border-radius: var(--kw-radius-lg) !important; overflow: hidden !important; } /* * Jasne karty / cenĂłwki: top accent + elevacja (nie sam cienki 1px). * tab-pane-1 i kw-price-card: peĹ‚ny look w page-responsive-fix.css. */ .kw-landing .kw-before-after__card, .karcher-staging-native-island .kw-before-after__card { border-radius: var(--kw-radius-lg) !important; border: 1px solid var(--kw-line) !important; overflow: hidden !important; background: #fff !important; } .kw-landing .tab-pane-1, .karcher-staging-native-island .tab-pane-1, .kw-landing .kw-price-card, .karcher-staging-native-island .kw-price-card { border-radius: var(--kw-radius-lg) !important; /* bez overflow:hidden - ucina box-shadow karty */ overflow: visible !important; } /* * Karty procesu (na ĹĽĂłĹ‚tym tle): bez bordera, lekki shadow (prĂłba). * Radius na caĹ‚ej karcie OK; zdjÄ™cie bez wĹ‚asnego radiusu (clip przez overflow). */ .kw-landing .card-14, .karcher-staging-native-island .card-14, .kw-landing .card-15, .karcher-staging-native-island .card-15, .kw-landing .card-16, .karcher-staging-native-island .card-16 { border: none !important; border-radius: var(--kw-radius-lg) !important; overflow: hidden !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1) !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; } @media (hover: hover) and (pointer: fine) { .kw-landing .card-14:hover, .karcher-staging-native-island .card-14:hover, .kw-landing .card-15:hover, .karcher-staging-native-island .card-15:hover, .kw-landing .card-16:hover, .karcher-staging-native-island .card-16:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14) !important; } } .kw-landing .card-14 > img, .karcher-staging-native-island .card-14 > img, .kw-landing .card-15 > img, .karcher-staging-native-island .card-15 > img, .kw-landing .card-16 > img, .karcher-staging-native-island .card-16 > img, .kw-landing .image-8, .karcher-staging-native-island .image-8, .kw-landing .image-9, .karcher-staging-native-island .image-9, .kw-landing .image-10, .karcher-staging-native-island .image-10, .kw-landing .image-11, .karcher-staging-native-island .image-11 { border-radius: 0 !important; } .kw-landing .vr-chip, .karcher-staging-native-island .vr-chip, .kw-landing .vr-hub-quiz__btn, .karcher-staging-native-island .vr-hub-quiz__btn, .kw-landing .kw-b2b-chip, .karcher-staging-native-island .kw-b2b-chip { border-radius: var(--kw-radius) !important; } /* -------------------------------------------------------------------------- */ /* FAQ (faq-4): soft industrial - radius jak karty, bez ostrych Webflow 0px */ /* Nie ruszaÄ‡ nav `.dropdown-toggle-2` / `.rent-drop` */ /* -------------------------------------------------------------------------- */ .kw-landing .faq-4 .dropdown.w-dropdown, .karcher-staging-native-island .faq-4 .dropdown.w-dropdown { border-radius: var(--kw-radius-lg) !important; overflow: hidden !important; border: 1px solid rgba(24, 24, 27, 0.12) !important; background: #fff !important; } .kw-landing .faq-4 .dropdown-toggle, .karcher-staging-native-island .faq-4 .dropdown-toggle { border: none !important; border-radius: 0 !important; } .kw-landing .faq-4 .dropdown-list, .karcher-staging-native-island .faq-4 .dropdown-list { border: none !important; border-top: 1px solid var(--kw-line) !important; border-radius: 0 !important; } .kw-landing .faq-4 .paragraph, .karcher-staging-native-island .faq-4 .paragraph { border: none !important; border-radius: 0 !important; } .kw-landing .vr-hub-starter.vr-starter, .karcher-staging-native-island .vr-hub-starter.vr-starter, .kw-landing .kw-panel, .karcher-staging-native-island .kw-panel { border-radius: var(--kw-radius-lg) !important; } .kw-landing .vr-starter__model, .karcher-staging-native-island .vr-starter__model { border-radius: var(--kw-radius-sm) !important; } /* Bloki zdjÄ™Ä‡ / offset yellow - nie dotyczy zdjÄ™Ä‡ flush na dole karty procesu */ .kw-landing .div-block-8, .karcher-staging-native-island .div-block-8, .kw-landing .div-block-11, .karcher-staging-native-island .div-block-11, .kw-landing .div-block-7, .karcher-staging-native-island .div-block-7, .kw-landing .div-block-12, .karcher-staging-native-island .div-block-12, .kw-landing .image-6, .karcher-staging-native-island .image-6, .kw-landing .image-7, .karcher-staging-native-island .image-7 { border-radius: var(--kw-radius-lg) !important; } /* * Karty kategorii (hub + landings `.services-cards`): * biaĹ‚e fill + contain foto (studio tĹ‚o zlewa siÄ™ z kartÄ…) + ciemny overlay. */ .kw-landing .kw-cat-card__face, .karcher-staging-native-island .kw-cat-card__face, .kw-landing .services-cards .parownice, .karcher-staging-native-island .services-cards .parownice, .kw-landing .services-cards .odkurzacze, .karcher-staging-native-island .services-cards .odkurzacze, .kw-landing .services-cards .myjki, .karcher-staging-native-island .services-cards .myjki, .kw-landing .services-cards .szorowarki, .karcher-staging-native-island .services-cards .szorowarki, .kw-landing .services-cards .dkurzacz-piorace, .karcher-staging-native-island .services-cards .dkurzacz-piorace { background-color: #fff !important; background-repeat: no-repeat, no-repeat !important; background-size: 100% 100%, contain !important; background-position: center, center bottom !important; } /* -------------------------------------------------------------------------- */ /* Hero: lekki trust (link do #opinie) - nie peĹ‚na karuzela */ /* -------------------------------------------------------------------------- */ .kw-hero-trust { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 7px 12px !important; max-width: 100% !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; background: rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(8px) saturate(1.1) !important; -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; color: #fafafa !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease !important; align-self: flex-start !important; } .header-111 .column-one, .header-111-copy .column-one { padding-left: 12px !important; } .header-111 .actions-3, .header-111-copy .actions-3 { align-items: flex-start !important; gap: 12px !important; } .kw-hero-trust:hover, .kw-hero-trust:focus-visible { border-color: var(--kw-yellow, #ffed00) !important; background: rgba(0, 0, 0, 0.45) !important; transform: translateY(-1px) !important; outline: none !important; } .kw-hero-trust__stars { color: #fbbc04 !important; letter-spacing: 1px !important; font-size: 13px !important; } .kw-hero-trust__score { font-weight: 800 !important; color: #fff !important; } .kw-hero-trust__count { font-weight: 600 !important; color: rgba(250, 250, 250, 0.82) !important; } /* -------------------------------------------------------------------------- */ /* Opinie Google - karuzela (kuratorowana, update w kw-reviews-carousel.js) */ /* -------------------------------------------------------------------------- */ .kw-reviews { padding: 64px 0 24px !important; background: #fafafa !important; } .kw-reviews__inner { width: min(1280px, calc(100% - 2 * var(--_spacing-sizing---page-padding--padding-global, 24px))) !important; margin: 0 auto !important; } .kw-reviews__head { max-width: 640px !important; margin: 0 0 28px !important; } .kw-reviews__tag { margin: 0 0 8px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: none !important; color: #71717a !important; } .kw-reviews__title { margin: 0 0 8px !important; font-size: clamp(1.5rem, 2.2vw, 2rem) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #18181b !important; } .kw-reviews__lead { margin: 0 0 12px !important; font-size: 16px !important; line-height: 1.5 !important; color: #52525b !important; } .kw-reviews__all { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 14px !important; font-weight: 700 !important; color: #18181b !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .kw-reviews__all:hover, .kw-reviews__all:focus-visible { color: #000 !important; outline: none !important; } .kw-reviews__carousel { position: relative !important; display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-areas: "controls viewport controls2" "dots dots dots" !important; align-items: center !important; gap: 12px 8px !important; } .kw-reviews__controls { display: contents !important; } .kw-reviews__viewport { grid-area: viewport !important; overflow-x: auto !important; overflow-y: hidden !important; width: 100% !important; min-width: 0 !important; min-height: 168px !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; cursor: grab !important; /* Nie blokuj pionowego scrolla strony na mobile */ touch-action: pan-x pan-y !important; } .kw-reviews__viewport::-webkit-scrollbar { display: none !important; } .kw-reviews__viewport.is-dragging { cursor: grabbing !important; scroll-behavior: auto !important; scroll-snap-type: none !important; user-select: none !important; } .kw-reviews__track { display: flex !important; gap: 16px !important; width: max-content !important; max-width: none !important; transform: none !important; will-change: auto !important; } .kw-reviews__card { flex: 0 0 min(320px, 85vw) !important; width: min(320px, 85vw) !important; min-width: min(280px, 85vw) !important; max-width: 360px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 12px !important; min-height: 160px !important; padding: 18px 18px 16px !important; border: 1px solid var(--kw-line, #e4e4e7) !important; border-radius: var(--kw-radius-lg, 14px) !important; background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; scroll-snap-align: start !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .kw-reviews__card:hover { border-color: var(--kw-yellow, #ffed00) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important; } .kw-reviews__card-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .kw-reviews__stars { color: #fbbc04 !important; font-size: 15px !important; letter-spacing: 1px !important; line-height: 1 !important; } .kw-reviews__source { font-size: 12px !important; font-weight: 700 !important; color: #71717a !important; } .kw-reviews__text { margin: 0 !important; flex: 1 1 auto !important; font-size: 14px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.55 !important; color: #27272a !important; } .kw-reviews__author { margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; color: #18181b !important; } .kw-reviews__nav { grid-row: 1 !important; width: 40px !important; height: 40px !important; border-radius: 999px !important; border: 1px solid var(--kw-line, #e4e4e7) !important; background: #fff !important; color: #18181b !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; transition: border-color 0.15s ease, transform 0.15s ease !important; } .kw-reviews__nav--prev { grid-area: controls !important; } .kw-reviews__nav--next { grid-area: controls2 !important; } .kw-reviews__nav:hover, .kw-reviews__nav:focus-visible { border-color: var(--kw-yellow, #ffed00) !important; transform: translateY(-1px) !important; outline: none !important; } .kw-reviews__dots { grid-area: dots !important; display: flex !important; justify-content: center !important; gap: 8px !important; min-height: 12px !important; } .kw-reviews__dot { width: 8px !important; height: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #d4d4d8 !important; cursor: pointer !important; } .kw-reviews__dot.is-active { background: #18181b !important; width: 18px !important; } @media screen and (max-width: 1099px) { .kw-reviews__card { flex-basis: min(320px, 70vw) !important; width: min(320px, 70vw) !important; } } @media screen and (max-width: 767px) { .kw-reviews { padding: 48px 0 16px !important; } .kw-reviews__carousel { grid-template-columns: 1fr !important; grid-template-areas: "viewport" "controls" "dots" !important; justify-items: stretch !important; } .kw-reviews__controls { grid-area: controls !important; display: flex !important; justify-content: center !important; gap: 10px !important; } .kw-reviews__nav--prev, .kw-reviews__nav--next { grid-area: auto !important; } .kw-reviews__nav { width: 36px !important; height: 36px !important; } .kw-reviews__card { flex-basis: min(320px, calc(100vw - 64px)) !important; width: min(320px, calc(100vw - 64px)) !important; min-height: 200px !important; } .kw-reviews__viewport { cursor: default !important; } } @media (prefers-reduced-motion: reduce) { .kw-reviews__track, .kw-reviews__card { transition: none !important; } } /* -------------------------------------------------------------------------- */ /* Cookie banner - glass, nie przyklejony pod sticky */ /* -------------------------------------------------------------------------- */ #cookie-banner.kw-cookie { display: none !important; position: fixed !important; z-index: 10060 !important; left: auto !important; right: max(16px, env(safe-area-inset-right, 0px)) !important; bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; top: auto !important; width: min(400px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; margin: 0 !important; padding: 14px 16px !important; box-sizing: border-box !important; border-radius: var(--kw-radius-lg, 14px) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-left: 4px solid var(--kw-yellow, #ffed00) !important; background: rgba(18, 18, 20, 0.72) !important; backdrop-filter: blur(16px) saturate(1.2) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; color: #f4f4f5 !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important; font-family: inherit !important; } #cookie-banner.kw-cookie.is-visible { display: block !important; } #cookie-banner.kw-cookie[hidden] { display: none !important; } .kw-cookie__row { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } .kw-cookie__copy { flex: 1 1 200px !important; min-width: 0 !important; } .kw-cookie__title { display: block !important; margin: 0 !important; color: var(--kw-yellow, #ffed00) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.3 !important; } .kw-cookie__text { margin: 4px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: rgba(244, 244, 245, 0.88) !important; } .kw-cookie__text a { color: var(--kw-yellow, #ffed00) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } .kw-cookie__actions { display: flex !important; gap: 8px !important; flex-shrink: 0 !important; } .kw-cookie__ok { border: none !important; border-radius: var(--kw-radius, 12px) !important; background: var(--kw-yellow, #ffed00) !important; color: #111 !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 800 !important; cursor: pointer !important; } .kw-cookie__close { border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: var(--kw-radius, 12px) !important; background: rgba(255, 255, 255, 0.06) !important; color: #fafafa !important; padding: 10px 12px !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; } @media screen and (max-width: 767px) { #cookie-banner.kw-cookie { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; /* Nad sticky CTA (hub/landings) */ bottom: calc(76px + 12px + env(safe-area-inset-bottom, 0px)) !important; } body:not(:has(.karcher-hub-sticky)) #cookie-banner.kw-cookie { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } /* Promocja siedzi NAD hub sticky - cookie jeszcze wyĹĽej */ body:has(.karcher-hub-sticky):has(.kw-promo-sticky) #cookie-banner.kw-cookie { bottom: calc( var(--kw-hub-sticky-clearance, 76px) + var(--kw-promo-sticky-clearance, 52px) + 12px + env(safe-area-inset-bottom, 0px) ) !important; } } /* -------------------------------------------------------------------------- */ /* Rytm sekcji: wspĂłlny padding + odstÄ™py w nagĹ‚Ăłwkach sekcji */ /* -------------------------------------------------------------------------- */ :is(.kw-landing, .karcher-staging-native-island) :is( .layout-13, .layout-204, .layout-399, .layout-521, .layout-521-copy, .layout-521-copy-copy, .pricing-7, .pricing-home, .faq-4, .kw-reviews, .kw-before-after, .b2b-section, .services-cards.kw-cat-rail, .contact-9 ) { padding-top: clamp(48px, 5.5vw, 72px) !important; padding-bottom: clamp(48px, 5.5vw, 72px) !important; } /* Kompaktowy pas B2B - nie ten sam rytm co peĹ‚ne sekcje */ :is(.kw-landing, .karcher-staging-native-island) .kw-b2b-bar { padding-top: 20px !important; padding-bottom: 20px !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.section-title-8, .section-title-8-copy, .section-title-9, .section-title-10, .section-title-11) { gap: 10px !important; grid-row-gap: 10px !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.section-title-8, .section-title-8-copy, .section-title-9, .section-title-10) :is(.content-style, .content-style-copy) { gap: 12px !important; grid-row-gap: 12px !important; } :is(.kw-landing, .karcher-staging-native-island) :is(.heading-19, .heading-19-copy, .heading-22, .heading-24, .heading-25, .heading-26) { margin-top: 0 !important; padding-top: 0 !important; } :is(.kw-landing, .karcher-staging-native-island) .section-title-11 { gap: 12px !important; grid-row-gap: 12px !important; } :is(.kw-landing, .karcher-staging-native-island) .faq-4 .container-22 { gap: 28px !important; grid-row-gap: 28px !important; } /* Promocja Puzzi - belka, hero, cennik (znika po dacie w module TS). * * Stos doĹ‚u ekranu na mobile (max 767px), od doĹ‚u: * 1. .karcher-hub-sticky - Zarezerwuj / ZadzwoĹ„ / WhatsApp (z-index 10050) * 2. .kw-promo-sticky - belka promocji NAD hubem, nie bottom:0 * 3. #cookie-banner - nad oboma (z-index 10060) * Tokeny: --kw-hub-sticky-clearance (76px), --kw-promo-sticky-clearance (52px). * Nie wstawiaj kolejnego position:fixed; bottom:0 bez tego stosu. */ :root { --kw-hub-sticky-clearance: 76px; --kw-promo-sticky-clearance: 52px; } .karcher-staging-native-island.kw-promo-on, .kw-landing.kw-promo-on { padding-bottom: 72px; } .kw-promo-sticky { position: fixed; z-index: 10040; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #111; color: #fff; text-decoration: none; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22); } .kw-promo-sticky:hover, .kw-promo-sticky:focus-visible { color: #fff; } .kw-promo-sticky__badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--kw-yellow, #ffed00); color: #111; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .kw-promo-sticky__offer { font-size: 13px; font-weight: 600; text-align: center; } .kw-promo-sticky__offer s { color: rgba(255, 255, 255, 0.55); font-weight: 600; } .kw-promo-sticky__offer strong { color: var(--kw-yellow, #ffed00); font-weight: 800; } .kw-promo-sticky__cta { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--kw-yellow, #ffed00); color: #111; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .kw-promo-hero-badge { display: inline-flex; margin: 8px 0 0; padding: 6px 10px; border-radius: 999px; background: var(--kw-yellow, #ffed00); color: #111; font-size: 13px; font-weight: 800; line-height: 1.2; } .header-111 .kw-promo-hero-price { position: relative; } .kw-promo-hero-price__was { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, 0.72); font-size: clamp(18px, 2vw, 28px); font-weight: 700; text-decoration: line-through; } .kw-promo-card-badge { display: inline-flex; margin: 0 auto 8px; padding: 3px 8px; border-radius: 999px; background: #111; color: var(--kw-yellow, #ffed00); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .kw-promo-was, .price-4 .kw-promo-was { display: inline-block; margin-right: 8px; color: #a1a1aa !important; font-size: 0.55em; font-weight: 700; text-decoration: line-through; } .vr-chip .kw-promo-was { color: rgba(255, 255, 255, 0.55) !important; font-size: 0.62em; } .tab-pane-1.kw-promo-pane { border-color: var(--kw-yellow, #ffed00) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12) !important; } .kw-price-card__price.kw-promo-hub-price .kw-promo-was { display: inline-block; margin-right: 6px; font-size: 0.7em; } @media screen and (min-width: 768px) { .karcher-staging-native-island.kw-promo-on, .kw-landing.kw-promo-on { padding-bottom: 88px; } .kw-promo-sticky { gap: 10px 18px; padding: 14px 22px; } .kw-promo-sticky__badge { padding: 4px 10px; font-size: 13px; } .kw-promo-sticky__offer { font-size: 16px; } .kw-promo-sticky__cta { padding: 8px 16px; font-size: 14px; border-radius: 12px; } } @media screen and (max-width: 767px) { .karcher-staging-native-island.kw-promo-on, .kw-landing.kw-promo-on { padding-bottom: 0; } .kw-promo-sticky { bottom: calc(var(--kw-hub-sticky-clearance) + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; gap: 6px 10px; padding: 8px 12px; flex-wrap: wrap; } .kw-promo-sticky__offer { font-size: 12px; line-height: 1.25; } /* Hub juĹĽ ma Zarezerwuj - drugi CTA w belce tylko zasĹ‚ania pasek */ .kw-promo-sticky__cta { display: none; } body:has(.karcher-hub-sticky):has(.kw-promo-sticky) { padding-bottom: calc( var(--kw-hub-sticky-clearance) + var(--kw-promo-sticky-clearance) + env(safe-area-inset-bottom, 0px) ) !important; } body:has(.karcher-hub-sticky):has(.kw-promo-sticky) :is(#rezerwacja, #mapa, #opinie, #sprzet) { scroll-margin-bottom: calc( var(--kw-hub-sticky-clearance) + var(--kw-promo-sticky-clearance) + 12px + env(safe-area-inset-bottom, 0px) ) !important; } body:has(.w-nav-button.w--open) .kw-promo-sticky, body:has([data-nav-menu-open]) .kw-promo-sticky { display: none; } } /* * Dysze w zestawie myjek - landing. * body[data-kw-hd515-lance="rotary"|"three_stage"] * body[data-kw-hd615-lance="power_rotary"|"three_stage"] * TS: src/lib/karcherWynajemSeo/hd515LanceKit.ts */ body[data-kw-hd515-lance="rotary"] .kw-hd515-lance--three, body:not([data-kw-hd515-lance]) .kw-hd515-lance--three { display: none !important; } body[data-kw-hd515-lance="three_stage"] .kw-hd515-lance--rotary { display: none !important; } body[data-kw-hd615-lance="power_rotary"] .kw-hd615-lance--three, body:not([data-kw-hd615-lance]) .kw-hd615-lance--three { display: none !important; } body[data-kw-hd615-lance="three_stage"] .kw-hd615-lance--power { display: none !important; } /* Modal / overlay rezerwacji: belki landingu NIE moga zaslaniac Zarezerwuj / Wstecz */ body.veric-rezerwuj-modal-open .kw-promo-sticky, body.veric-rezerwuj-overlay-open .kw-promo-sticky, body.veric-rezerwuj-modal-open .karcher-hub-sticky, body.veric-rezerwuj-overlay-open .karcher-hub-sticky, body.veric-rezerwuj-modal-open #cookie-banner.kw-cookie, body.veric-rezerwuj-overlay-open #cookie-banner.kw-cookie { display: none !important; } /* Navbar: ten sam kolor co karta podsumowania, bez przezroczystosci (desktop + mobile) */ .navbar-3, .navbar-3.w-nav { background: var(--kw-nav-bg) !important; background-color: var(--kw-nav-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .navbar-3 .nav-menu-2, .navbar-3 .w-nav-menu, .navbar-3 .nav-menu-2.w--open, .navbar-3 .w-nav-menu[data-nav-menu-open], .navbar-3.w-nav[data-nav-menu-open] .w-nav-menu { background: var(--kw-nav-bg) !important; background-color: var(--kw-nav-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @media screen and (min-width: 992px) { .navbar-3 .dropdown-list-2, .navbar-3 .dropdown-list-2.w--open { background-color: var(--kw-nav-bg) !important; } } /* === kv2-widget-shield (inline, po Webflow) === */ /** * Tarcza stylów widgetu Karcher V2 vs Webflow. * Webflow trzyma reguły `button` / `h1-h3` / `input` poza @layer i przebija Tailwind. * Tu: wysoka specyficzność + !important = wygląd jak w dopracowanej skórce V2. * * Scope: island landingu + portale modali/overlay (body). */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) { --kv2-yellow: #ffed00; --kv2-yellow-hover: #f5e003; --kv2-ink: #18181b; --kv2-muted: #52525b; --kv2-border: #c7c9c4; --kv2-soft: #fffce5; } /* --- Typografia: nie jak H1/H2 landingu Webflow --- */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card, .veric-rezerwuj-modal-shell) :is(h1, h2, h3, h4, p) { margin-top: 0 !important; text-transform: none !important; font-family: inherit !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card) h1 { margin-bottom: 0 !important; font-size: 18px !important; font-weight: 900 !important; line-height: 1.25 !important; letter-spacing: -0.03em !important; color: var(--kv2-ink) !important; } @media (min-width: 640px) { :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card) h1 { font-size: 21px !important; } } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card) p.kv2-kicker { margin-bottom: 0 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--kv2-muted) !important; white-space: nowrap !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card, .veric-rezerwuj-modal-shell) h2, :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card, .veric-rezerwuj-modal-shell) h3 { margin-bottom: 0 !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: -0.04em !important; color: var(--kv2-ink) !important; } .veric-rezerwuj-modal-wrapper .kv2-booking-card h2 { font-size: 1.25rem !important; letter-spacing: -0.03em !important; line-height: 1.35 !important; } /* Ciemna karta „Wybrany sprzęt” - nie dziedzicz ink z globalnego h2 */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) :is(.veric-rezerwuj-widget, .kv2-booking-card) h2.kv2-context-title { color: #fff !important; font-size: 1.125rem !important; line-height: 1.5rem !important; letter-spacing: normal !important; } /* --- Bazowy reset przycisków w scope widgetu --- */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) button { appearance: none !important; -webkit-appearance: none !important; font-family: inherit !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; box-sizing: border-box !important; cursor: pointer !important; } /* --- CTA żółty --- */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) button.kv2-btn-yellow { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0.75rem !important; background-color: var(--kv2-yellow) !important; color: var(--kv2-ink) !important; font-weight: 900 !important; line-height: 1.25 !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) button.kv2-btn-yellow:hover:not(:disabled) { background-color: var(--kv2-yellow-hover) !important; color: var(--kv2-ink) !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) button.kv2-modal-confirm, :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper ) button.kv2-btn-yellow.kv2-btn-wide { width: 100% !important; min-height: 3rem !important; padding: 0.85rem 1.25rem !important; border-radius: 1rem !important; font-size: 1rem !important; } .veric-rezerwuj-modal-wrapper button.kv2-modal-confirm { flex: 1 1 auto !important; width: auto !important; min-height: 3rem !important; padding: 0 1rem !important; border-radius: 0.75rem !important; font-size: 15px !important; font-weight: 900 !important; background-color: var(--kv2-yellow) !important; color: var(--kv2-ink) !important; border: 0 !important; } /* --- Ghost / outline --- */ :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .karcher-staging-native-island, .karcher-native-booking-mount ) button.kv2-btn-ghost { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 3rem !important; min-height: 3rem !important; padding: 0 0.875rem !important; border: 1px solid var(--kv2-border) !important; border-radius: 0.75rem !important; background-color: #fff !important; color: var(--kv2-ink) !important; font-size: 0.875rem !important; font-weight: 700 !important; } :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .karcher-staging-native-island, .karcher-native-booking-mount ) button.kv2-btn-ghost:hover:not(:disabled) { border-color: var(--kv2-ink) !important; background-color: #f4f5f2 !important; color: var(--kv2-ink) !important; } /* --- Czarny CTA (Wróć do formularza) --- */ :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell, .karcher-staging-native-island, .karcher-native-booking-mount ) button.kv2-btn-ink, :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.veric-abandon-back { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-top: 1rem !important; min-height: 2.75rem !important; padding: 0.75rem 1rem !important; border: 1px solid var(--kv2-ink) !important; border-radius: 0.75rem !important; background-color: var(--kv2-ink) !important; color: #fff !important; font-size: 0.875rem !important; font-weight: 900 !important; line-height: 1.25 !important; } :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.kv2-btn-ink:hover:not(:disabled), :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.veric-abandon-back:hover:not(:disabled) { background-color: #000 !important; color: #fff !important; } /* --- Chipy powodów / listowe CTA --- */ :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) .veric-abandon-reasons { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; margin: 1rem 0 0 !important; padding: 0 !important; width: 100% !important; } :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.kv2-chip, :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.veric-abandon-chip { display: block !important; width: 100% !important; margin: 0 !important; padding: 0.875rem 1rem !important; border: 1px solid var(--kv2-border) !important; border-radius: 1rem !important; background-color: #fff !important; color: var(--kv2-ink) !important; font-size: 0.875rem !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: left !important; } :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.kv2-chip:hover:not(:disabled), :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.veric-abandon-chip:hover:not(:disabled) { border-color: var(--kv2-yellow) !important; background-color: var(--kv2-soft) !important; color: var(--kv2-ink) !important; } /* --- Link-style (Anuluj wariant) --- */ :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .karcher-staging-native-island, .karcher-native-booking-mount ) button.kv2-btn-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; background: transparent !important; color: #3f4340 !important; font-size: 0.875rem !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-color: var(--kv2-yellow) !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; padding: 0.5rem 0.75rem !important; } /* --- X zamknięcia --- */ :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.kv2-icon-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.5rem !important; height: 2.5rem !important; padding: 0 !important; border: 0 !important; border-radius: 0.75rem !important; background: transparent !important; color: var(--kv2-muted) !important; font-size: 1.25rem !important; line-height: 1 !important; } :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .veric-rezerwuj-modal-shell ) button.kv2-icon-btn:hover { background-color: #f3f4f2 !important; color: var(--kv2-ink) !important; } /* --- Inputy / select / textarea --- */ :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) :is(input.kv2-input, select.kv2-input, textarea.kv2-input) { display: block !important; width: 100% !important; min-height: 2.5rem !important; margin: 0 !important; padding: 0.5rem 0.75rem !important; border: 1px solid var(--kv2-border) !important; border-radius: 0.5rem !important; background-color: #fff !important; color: var(--kv2-ink) !important; font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.4 !important; box-shadow: none !important; outline: none !important; } :is( .veric-rezerwuj-modal-wrapper, .veric-rezerwuj-overlay-wrapper, .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) :is(input.kv2-input, select.kv2-input, textarea.kv2-input):focus { border-color: var(--kv2-ink) !important; box-shadow: 0 0 0 2px var(--kv2-yellow) !important; } /* --- Kafelki kategorii / modeli / wariantów --- */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-tile { display: flex !important; align-items: center !important; gap: 1rem !important; width: 100% !important; padding: 0.75rem !important; border: 1px solid var(--kv2-border) !important; border-radius: 1rem !important; background-color: #fff !important; color: var(--kv2-ink) !important; text-align: left !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-tile:hover, :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-tile.kv2-tile--selected { border-color: var(--kv2-yellow) !important; background-color: var(--kv2-soft) !important; color: var(--kv2-ink) !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-tile.kv2-tile--selected { box-shadow: 0 0 0 2px var(--kv2-yellow) !important; } /* --- Sloty godzin --- */ :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-slot { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid transparent !important; border-radius: 0.5rem !important; background-color: var(--kv2-yellow) !important; color: var(--kv2-ink) !important; font-size: 0.875rem !important; font-weight: 700 !important; padding: 0.625rem 0.5rem !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-slot:hover { background-color: var(--kv2-yellow-hover) !important; color: var(--kv2-ink) !important; box-shadow: 0 0 0 2px var(--kv2-ink) !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-slot-mobile { display: flex !important; width: 100% !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--kv2-border) !important; border-radius: 0.75rem !important; background-color: #fff !important; color: var(--kv2-ink) !important; font-size: 0.875rem !important; font-weight: 700 !important; padding: 0.75rem 0.5rem !important; box-shadow: none !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-slot-mobile.kv2-slot-mobile--on { border: 2px solid var(--kv2-yellow) !important; background-color: var(--kv2-soft) !important; color: var(--kv2-ink) !important; font-weight: 900 !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-day-chip { display: flex !important; width: 100% !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--kv2-border) !important; border-radius: 9999px !important; background-color: #fff !important; color: var(--kv2-ink) !important; padding: 0.625rem 0.15rem !important; box-shadow: none !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-day-chip.kv2-day-chip--on { border: 1px solid var(--kv2-ink) !important; background-color: var(--kv2-ink) !important; color: #fff !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-day-chip.kv2-day-chip--on span { color: #fff !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-day-chip.kv2-day-chip--today { border: 2px solid var(--kv2-yellow) !important; background-color: var(--kv2-soft) !important; color: var(--kv2-ink) !important; } :is( .karcher-staging-native-island, .karcher-native-booking-mount, .veric-rezerwuj-widget ) button.kv2-day-chip.kv2-day-chip--closed { border: 1px solid transparent !important; background-color: #e4e5e2 !important; color: #71717a !important; } /* Karty dialogów overlay */ .veric-rezerwuj-overlay-wrapper .veric-rezerwuj-modal-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: none !important; }