.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-wpforms .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-wpforms .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-wpforms .eael-contact-form-description, .elementor-widget-eael-wpforms .wpforms-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-eael-wpforms .eael-wpforms .wpforms-field label, .elementor-widget-eael-wpforms .eael-wpforms .wpforms-field legend{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-eael-wpforms .eael-wpforms .wpforms-field input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .elementor-widget-eael-wpforms .eael-wpforms .wpforms-field textarea, .elementor-widget-eael-wpforms .eael-wpforms .wpforms-field select{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-eael-wpforms .eael-wpforms .wpforms-submit-container .wpforms-submit{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms label.wpforms-error{display:block !important;}.elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms .wpforms-field input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms .wpforms-field select{height:30px;}.elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms .wpforms-submit-container .wpforms-submit:hover, .elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms .wpforms-container-full .wpforms-submit-container .wpforms-form button[type=submit]:hover{background:#065689 !important;}.elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms input.wpforms-error{border-width:1px;}.elementor-14 .elementor-element.elementor-element-63b5cb2 .eael-wpforms textarea.wpforms-error{border-width:1px;}:root{--page-title-display:none;}/* Start custom CSS for section, class: .elementor-element-3cd2447 *//* ============================================================ LIVIN ŁEBA - FINAL HOMEPAGE HERO WordPress + Elementor Pro + UAE + Astra WKLEJ DO: Zewnętrzna Sekcja → Zaawansowane → Custom CSS ============================================================ */ /* ============================================================ 1. OUTER ELEMENTOR SECTION ============================================================ */ .elementor-14 .elementor-element.elementor-element-3cd2447 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ============================================================ 2. CLASSIC ELEMENTOR SHELL RESET TYLKO DLA TEJ SEKCJI ============================================================ */ .elementor-14 .elementor-element.elementor-element-3cd2447 > .elementor-container, .elementor-14 .elementor-element.elementor-element-3cd2447 > .elementor-container > .elementor-row, .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-3cd2447 > .elementor-container > .elementor-column, .elementor-14 .elementor-element.elementor-element-3cd2447 > .elementor-container > .elementor-row > .elementor-column, .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-column { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-widget-html { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-3cd2447 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ 3. HERO ROOT + DESIGN TOKENS ============================================================ */ .livin-hero-shell { --lhero-warm-white: #FFF9F0; --lhero-sand: #F5EFE4; --lhero-card: #FFFFFF; --lhero-navy: #102A2C; --lhero-muted: #5F6F73; --lhero-turquoise: #1BAFC2; --lhero-deep-sea: #0E6F78; --lhero-sun: #F6A623; --lhero-sun-hover: #E89516; --lhero-beige-border: #E7DED0; position: relative; width: 100%; min-width: 0; margin: 0; padding: 0; overflow-x: clip; background: var(--lhero-warm-white); color: var(--lhero-navy); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fallback dla starszych przeglądarek */ @supports not (overflow: clip) { .livin-hero-shell { overflow-x: hidden; } } /* ============================================================ 4. LOCAL RESET ============================================================ */ .livin-hero-shell, .livin-hero-shell *, .livin-hero-shell *::before, .livin-hero-shell *::after { box-sizing: border-box; } .livin-hero-shell h1, .livin-hero-shell p, .livin-hero-shell ul, .livin-hero-shell li { margin: 0; padding: 0; } .livin-hero-shell ul { list-style: none; } .livin-hero-shell a { text-decoration: none; } /* ============================================================ 5. SHARED INNER WRAPPER Spójny z headerem i stopką ============================================================ */ .livin-hero-inner { position: relative; width: 100%; max-width: 1260px; min-width: 0; margin: 0 auto; padding: 0 24px; } /* ============================================================ 6. MAIN HERO ============================================================ */ .livin-hero-main { position: relative; padding: 72px 0 76px; isolation: isolate; } /* ============================================================ 7. BACKGROUND GLOWS ============================================================ */ .livin-hero-main::before, .livin-hero-main::after { content: ""; position: absolute; z-index: -1; pointer-events: none; filter: blur(1px); } .livin-hero-main::before { top: 70px; left: -180px; width: 520px; height: 520px; background: radial-gradient( circle, rgba(27, 175, 194, 0.10) 0%, rgba(27, 175, 194, 0.045) 38%, rgba(27, 175, 194, 0) 72% ); } .livin-hero-main::after { top: -20px; right: -180px; width: 560px; height: 560px; background: radial-gradient( circle, rgba(246, 166, 35, 0.10) 0%, rgba(246, 166, 35, 0.045) 38%, rgba(246, 166, 35, 0) 72% ); } /* ============================================================ 8. HERO GRID ============================================================ */ .livin-hero-grid { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); align-items: center; gap: 62px; min-width: 0; } /* ============================================================ 9. CONTENT ============================================================ */ .livin-hero-content { min-width: 0; padding-top: 2px; } /* ============================================================ 10. LOCATION CHIP ============================================================ */ .livin-hero-location { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 8px 14px; border: 1px solid var(--lhero-beige-border); border-radius: 999px; background: rgba(255, 255, 255, 0.90); color: var(--lhero-deep-sea); font-size: 13px; line-height: 1; font-weight: 600; box-shadow: 0 6px 18px -16px rgba(16, 42, 44, 0.52); } .livin-hero-location-icon { flex: 0 0 auto; color: var(--lhero-turquoise); } /* ============================================================ 11. TITLE ============================================================ */ .livin-hero-title { color: var(--lhero-navy); font-size: clamp(3rem, 4.15vw, 4rem); line-height: 0.97; font-weight: 700; letter-spacing: -0.045em; } .livin-hero-title-line { display: block; } .livin-hero-title-accent { position: relative; z-index: 1; display: inline-block; white-space: nowrap; } .livin-hero-title-accent::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0.04em; height: 6px; border-radius: 999px; background: rgba(27, 175, 194, 0.48); } /* ============================================================ 12. LEAD ============================================================ */ .livin-hero-lead { max-width: 500px; margin-top: 24px !important; color: var(--lhero-muted); font-size: 17px; line-height: 1.66; font-weight: 400; } /* ============================================================ 13. ACTIONS ============================================================ */ .livin-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .livin-hero-primary, .livin-hero-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15px; line-height: 1; font-weight: 600; white-space: nowrap; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease, color 0.24s ease; } /* PRIMARY */ .livin-hero-primary { position: relative; overflow: hidden; background: var(--lhero-sun); color: var(--lhero-navy); box-shadow: 0 8px 18px -10px rgba(246, 166, 35, 0.86); } .livin-hero-primary::before { content: ""; position: absolute; top: 0; left: -65%; width: 42%; height: 100%; pointer-events: none; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.52), transparent ); transform: skewX(-18deg); transition: left 0.65s ease; } .livin-hero-primary:hover { background: var(--lhero-sun-hover); color: var(--lhero-navy); transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(246, 166, 35, 0.96); } .livin-hero-primary:hover::before { left: 125%; } /* SECONDARY */ .livin-hero-secondary { border: 1px solid var(--lhero-beige-border); background: rgba(255, 255, 255, 0.88); color: var(--lhero-navy); box-shadow: 0 6px 18px -16px rgba(16, 42, 44, 0.5); } .livin-hero-secondary:hover { border-color: rgba(14, 111, 120, 0.48); background: #FFFFFF; color: var(--lhero-deep-sea); transform: translateY(-2px); } /* ============================================================ 14. TRUST LINE ============================================================ */ .livin-hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 26px; color: var(--lhero-muted); font-size: 14px; line-height: 1.4; } .livin-hero-trust-star { flex: 0 0 auto; color: var(--lhero-sun); } .livin-hero-trust-score { color: var(--lhero-navy); font-weight: 700; } .livin-hero-trust-muted { color: var(--lhero-muted); } .livin-hero-trust-dot { margin: 0 7px; color: var(--lhero-beige-border); } /* ============================================================ 15. MEDIA ============================================================ */ .livin-hero-media { position: relative; min-width: 0; padding-bottom: 28px; } /* ============================================================ 16. IMAGE PLACEHOLDER ============================================================ */ .livin-hero-image-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 5 / 6; padding: 40px; overflow: hidden; border: 1px solid var(--lhero-beige-border); border-radius: 25px; background: radial-gradient( 80% 44% at 78% 92%, rgba(27, 175, 194, 0.17), rgba(27, 175, 194, 0) 70% ), radial-gradient( 72% 42% at 18% 12%, rgba(246, 166, 35, 0.16), rgba(246, 166, 35, 0) 72% ), linear-gradient( 160deg, #FBF3E6 0%, #F4EDDF 55%, #EFEAE0 100% ); color: var(--lhero-deep-sea); text-align: center; box-shadow: 0 26px 60px rgba(16, 42, 44, 0.10); transition: transform 0.28s ease, box-shadow 0.28s ease; } @media (hover: hover) { .livin-hero-image-placeholder:hover { transform: translateY(-3px); box-shadow: 0 32px 72px rgba(16, 42, 44, 0.13); } } /* ============================================================ 17. PLACEHOLDER TAG ============================================================ */ .livin-hero-tag { position: absolute; top: 15px; right: 15px; padding: 5px 11px; border-radius: 999px; background: rgba(16, 42, 44, 0.68); color: #FFFFFF; font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0.4px; } /* ============================================================ 18. CAMERA ============================================================ */ .livin-hero-cam { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 56px; border: 1px solid var(--lhero-beige-border); border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--lhero-deep-sea); box-shadow: 0 8px 20px -12px rgba(16, 42, 44, 0.34); } /* ============================================================ 19. SHOT-LIST COPY ============================================================ */ .livin-hero-shotlist { margin-top: 17px; color: var(--lhero-turquoise); font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; } .livin-hero-shot-main { max-width: 300px; margin-top: 9px; color: var(--lhero-navy); font-size: 17px; line-height: 1.42; font-weight: 600; } /* ============================================================ 20. DISTANCE CARD ============================================================ */ .livin-hero-distance-card { position: absolute; z-index: 3; left: -18px; bottom: 0; display: flex; flex-direction: column; gap: 3px; min-width: 230px; padding: 16px 20px; border: 1px solid var(--lhero-beige-border); border-radius: 16px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 18px 38px rgba(16, 42, 44, 0.14); transform: rotate(-2.2deg); transition: transform 0.28s ease, box-shadow 0.28s ease; } @media (hover: hover) { .livin-hero-distance-card:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 22px 44px rgba(16, 42, 44, 0.17); } } .livin-hero-distance-label { color: var(--lhero-deep-sea); font-size: 10.5px; line-height: 1; font-weight: 700; letter-spacing: 1.1px; } .livin-hero-distance-value { color: var(--lhero-navy); font-size: 21px; line-height: 1.15; font-weight: 700; } .livin-hero-distance-sub { color: var(--lhero-muted); font-size: 12.5px; line-height: 1.35; } /* ============================================================ 21. BOOKING AREA ============================================================ */ .livin-hero-booking { position: relative; z-index: 4; margin-top: -20px; padding-bottom: 42px; scroll-margin-top: 104px; } /* ============================================================ 22. BOOKING SHELL ============================================================ */ .livin-hero-booking-shell { padding: 16px 18px 14px; border: 1px solid var(--lhero-beige-border); border-radius: 20px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 20px 48px rgba(16, 42, 44, 0.10); } /* ============================================================ 23. IDOBOOKING WIDGET ============================================================ */ .livin-hero-booking-widget { width: 100%; min-width: 0; min-height: 74px; } .livin-hero-booking-widget .iai-search, .livin-hero-booking-widget #iai_book_se.iai_horizontal { display: block !important; width: 100% !important; min-width: 0 !important; border: 0 !important; background: transparent !important; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; } .livin-hero-booking-widget #iai_book_form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(108px, 0.55fr) minmax(180px, 0.8fr); align-items: end; gap: 14px; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } .livin-hero-booking-widget #iai_book_form > div { position: relative !important; display: block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } .livin-hero-booking-widget #iai_book_form label { display: block !important; margin: 0 0 7px !important; padding: 0 !important; color: var(--lhero-navy) !important; font-family: inherit !important; font-size: 12.5px !important; line-height: 1.25 !important; font-weight: 700 !important; text-align: left !important; box-sizing: border-box !important; } .livin-hero-booking-widget #iai_book_form input, .livin-hero-booking-widget #iai_book_form input[readonly] { display: block !important; width: 100% !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 44px 0 14px !important; border: 1px solid var(--lhero-beige-border) !important; border-radius: 12px !important; background: var(--lhero-warm-white) !important; color: var(--lhero-navy) !important; font-family: inherit !important; font-size: 15px !important; line-height: 1 !important; font-weight: 500 !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; } .livin-hero-booking-widget #iai_book_form input:focus { border-color: var(--lhero-deep-sea) !important; background: var(--lhero-card) !important; box-shadow: 0 0 0 3px rgba(27, 175, 194, 0.17) !important; } .livin-hero-booking-widget #iai_book_form [class^="iaiicon-"], .livin-hero-booking-widget #iai_book_form [class*=" iaiicon-"] { position: absolute !important; right: 13px !important; bottom: 16px !important; z-index: 2 !important; float: none !important; margin: 0 !important; color: var(--lhero-deep-sea) !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer; } .livin-hero-booking-widget #iai_book_form button, .livin-hero-booking-fallback { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 52px; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 12px !important; background: var(--lhero-sun) !important; color: var(--lhero-navy) !important; font-family: inherit !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(246, 166, 35, 0.9) !important; transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease; } .livin-hero-booking-fallback { max-width: 220px; margin-left: auto !important; margin-right: auto !important; } .livin-hero-booking-widget #iai_book_form button:focus-visible, .livin-hero-booking-fallback:focus-visible { outline: 3px solid rgba(14, 111, 120, 0.36) !important; outline-offset: 3px !important; } .livin-hero-booking-widget #iai_book_form .iaiError { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important; } .livin-hero-booking-widget #iaicalendar { z-index: 1000 !important; } .livin-hero-booking-widget #iaicalendar td.iaiactiveday { border-color: var(--lhero-deep-sea) !important; background: var(--lhero-deep-sea) !important; color: var(--lhero-card) !important; } @media (hover: hover) and (pointer: fine) { .livin-hero-booking-widget #iai_book_form button:hover, .livin-hero-booking-fallback:hover { background: var(--lhero-sun-hover) !important; color: var(--lhero-navy) !important; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(246, 166, 35, 0.96) !important; } } /* ============================================================ 26. REASSURANCE ============================================================ */ .livin-hero-booking-reassure { margin-top: 12px !important; padding-left: 2px; color: var(--lhero-muted); font-size: 12.5px; line-height: 1.45; font-weight: 400; } /* ============================================================ 27. BENEFITS BAND ============================================================ */ .livin-hero-benefits-band { width: 100%; border-top: 1px solid var(--lhero-beige-border); border-bottom: 1px solid var(--lhero-beige-border); background: var(--lhero-sand); } /* ============================================================ 28. BENEFITS ============================================================ */ .livin-hero-benefits { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); align-items: center; justify-content: space-between; gap: 18px 24px; padding: 20px 0; } /* ============================================================ 29. BENEFIT ITEM ============================================================ */ .livin-hero-benefit { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--lhero-navy); font-size: 13.5px; line-height: 1.35; font-weight: 500; } .livin-hero-benefit-icon { flex: 0 0 auto; color: var(--lhero-turquoise); } /* ============================================================ 30. FOCUS STATES ============================================================ */ .livin-hero-primary:focus-visible, .livin-hero-secondary:focus-visible { outline: 2px solid var(--lhero-deep-sea); outline-offset: 3px; } /* ============================================================ 31. SUBTLE ENTRANCE ============================================================ */ @keyframes livin-hero-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .livin-hero-content, .livin-hero-media, .livin-hero-booking-shell { animation: livin-hero-enter 0.58s cubic-bezier(0.16, 0.84, 0.44, 1) both; } .livin-hero-media { animation-delay: 0.08s; } .livin-hero-booking-shell { animation-delay: 0.14s; } /* ============================================================ 32. LAPTOP ============================================================ */ @media (max-width: 1180px) { .livin-hero-inner { padding-left: 28px; padding-right: 28px; } .livin-hero-grid { gap: 44px; } .livin-hero-title { font-size: clamp(2.75rem, 4.5vw, 3.65rem); } .livin-hero-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; row-gap: 16px; } } /* ============================================================ 33. TABLET / STACK ============================================================ */ @media (max-width: 980px) { .livin-hero-main { padding: 54px 0 60px; } .livin-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; } .livin-hero-content { max-width: 720px; } .livin-hero-title { max-width: 700px; font-size: clamp(3rem, 7vw, 4rem); } .livin-hero-lead { max-width: 620px; } .livin-hero-media { width: 100%; max-width: 650px; } .livin-hero-image-placeholder { aspect-ratio: 16 / 12; } .livin-hero-distance-card { left: 18px; } .livin-hero-booking { margin-top: 0; } } /* ============================================================ 34. MOBILE ============================================================ */ @media (max-width: 767px) { .livin-hero-inner { padding: 0 20px; } .livin-hero-main { padding: 42px 0 52px; } .livin-hero-grid { gap: 38px; } .livin-hero-location { margin-bottom: 20px; font-size: 12.5px; } .livin-hero-title { font-size: clamp(2.45rem, 11vw, 3.25rem); line-height: 0.99; } .livin-hero-lead { margin-top: 21px !important; font-size: 16px; } .livin-hero-actions { flex-direction: column; align-items: stretch; margin-top: 25px; } .livin-hero-primary, .livin-hero-secondary { width: 100%; min-height: 50px; } .livin-hero-trust { margin-top: 23px; } .livin-hero-trust-dot { margin: 0 3px; } .livin-hero-media { max-width: 100%; padding-bottom: 32px; } .livin-hero-image-placeholder { aspect-ratio: 4 / 5; padding: 28px 20px; border-radius: 22px; } .livin-hero-distance-card { left: 10px; bottom: 0; min-width: 205px; padding: 14px 17px; } .livin-hero-booking { padding-bottom: 34px; } .livin-hero-booking-shell { padding: 14px; } .livin-hero-booking-widget { min-height: 154px; } .livin-hero-booking-widget #iai_book_form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .livin-hero-booking-reassure { margin-top: 11px !important; } .livin-hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 18px 0; } } /* ============================================================ 35. SMALL MOBILE ============================================================ */ @media (max-width: 420px) { .livin-hero-inner { padding: 0 17px; } .livin-hero-title { font-size: clamp(2.2rem, 10.8vw, 2.7rem); } .livin-hero-title-accent { white-space: normal; } .livin-hero-shot-main { font-size: 15.5px; } .livin-hero-benefits { grid-template-columns: minmax(0, 1fr); gap: 13px; } .livin-hero-benefit { min-height: 30px; } } /* ============================================================ 36. VERY SMALL MOBILE ============================================================ */ @media (max-width: 360px) { .livin-hero-inner { padding: 0 15px; } .livin-hero-main { padding-top: 36px; } .livin-hero-title { font-size: 2.15rem; } .livin-hero-location { max-width: 100%; line-height: 1.3; } .livin-hero-distance-card { min-width: 185px; } .livin-hero-distance-value { font-size: 19px; } } /* ============================================================ 37. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .livin-hero-content, .livin-hero-media, .livin-hero-booking-shell, .livin-hero-primary, .livin-hero-primary::before, .livin-hero-secondary, .livin-hero-booking-widget #iai_book_form input, .livin-hero-booking-widget #iai_book_form button, .livin-hero-booking-fallback, .livin-hero-image-placeholder, .livin-hero-distance-card { animation: none !important; transition: none !important; } .livin-hero-primary:hover, .livin-hero-secondary:hover, .livin-hero-booking-widget #iai_book_form button:hover, .livin-hero-booking-fallback:hover, .livin-hero-image-placeholder:hover { transform: none; } .livin-hero-distance-card:hover { transform: rotate(-2.2deg); } } /* ============================================================ FINAL HERO FIX 1. CTA bez podkreśleń 2. Grubszy pasek benefitów jak w zaakceptowanym demo ============================================================ */ /* ============================================================ 1. CTA - REMOVE ASTRA / GLOBAL LINK UNDERLINES ============================================================ */ .livin-hero-shell .livin-hero-primary, .livin-hero-shell .livin-hero-primary:hover, .livin-hero-shell .livin-hero-primary:focus, .livin-hero-shell .livin-hero-primary:focus-visible, .livin-hero-shell .livin-hero-primary:active, .livin-hero-shell .livin-hero-secondary, .livin-hero-shell .livin-hero-secondary:hover, .livin-hero-shell .livin-hero-secondary:focus, .livin-hero-shell .livin-hero-secondary:focus-visible, .livin-hero-shell .livin-hero-secondary:active { text-decoration: none !important; -webkit-text-decoration: none !important; border-bottom-style: none; } /* Gdyby Astra dodawała dekorację przez wewnętrzny tekst */ .livin-hero-shell .livin-hero-primary *, .livin-hero-shell .livin-hero-secondary * { text-decoration: none !important; } /* ============================================================ 2. BENEFITS BAND - THICKER / MORE PREMIUM Jak na trzecim screenie ============================================================ */ .livin-hero-benefits-band { width: 100%; background: var(--lhero-sand); border-top: 1px solid var(--lhero-beige-border); border-bottom: 1px solid var(--lhero-beige-border); min-height: 78px; display: flex; align-items: center; } /* Wewnętrzny wrapper też ma zajmować pełną wysokość */ .livin-hero-benefits-band .livin-hero-inner { width: 100%; } /* Więcej powietrza góra / dół */ .livin-hero-benefits { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); align-items: center; justify-content: space-between; gap: 18px 24px; width: 100%; padding: 26px 0 !important; } /* Elementy trochę stabilniejsze wizualnie */ .livin-hero-benefit { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--lhero-navy); font-size: 13.5px; line-height: 1.4; font-weight: 500; } /* Ikony odrobinę mocniej widoczne */ .livin-hero-benefit-icon { flex: 0 0 auto; width: 19px; height: 19px; color: var(--lhero-turquoise); } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1180px) { .livin-hero-benefits-band { min-height: auto; } .livin-hero-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; padding: 24px 0 !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { .livin-hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 18px; padding: 24px 0 !important; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media (max-width: 420px) { .livin-hero-benefits { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0 !important; } .livin-hero-benefit { min-height: 32px; } } /* ============================================================ HERO REAL IMAGE FIX - FINAL Zaokraglenie bez pustej przestrzeni pod zdjeciem ============================================================ */ .livin-hero-shell .livin-hero-image-wrap { position: relative; display: block; width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid var(--lhero-beige-border); border-radius: 25px; background: var(--lhero-sand); box-shadow: 0 26px 60px rgba(16, 42, 44, 0.10); line-height: 0; transition: transform 0.28s ease, box-shadow 0.28s ease; } .livin-hero-shell .livin-hero-image { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 24px; object-fit: cover; object-position: center center; vertical-align: top; } @media (hover: hover) { .livin-hero-shell .livin-hero-image-wrap:hover { transform: translateY(-3px); box-shadow: 0 32px 72px rgba(16, 42, 44, 0.13); } } @media (max-width: 767px) { .livin-hero-shell .livin-hero-image-wrap { border-radius: 22px; } .livin-hero-shell .livin-hero-image { border-radius: 21px; } } @media (prefers-reduced-motion: reduce) { .livin-hero-shell .livin-hero-image-wrap { transition: none !important; } .livin-hero-shell .livin-hero-image-wrap:hover { transform: none !important; } } @media (max-width: 560px) { .livin-hero-booking-widget { min-height: 306px; } .livin-hero-booking-widget #iai_book_form { grid-template-columns: minmax(0, 1fr); } .livin-hero-booking-widget #iai_book_form button { min-height: 54px; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-bca5411 *//* ============================================================ LIVIN ŁEBA - DIRECT BOOKING BENEFITS WordPress + Elementor Pro + UAE + Astra WKLEJ DO: Zewnętrzna Sekcja → Zaawansowane → Custom CSS ============================================================ */ /* ============================================================ 1. OUTER SECTION SHELL ============================================================ */ .elementor-14 .elementor-element.elementor-element-bca5411 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ============================================================ 2. CLASSIC ELEMENTOR RESET TYLKO DLA TEJ SEKCJI ============================================================ */ .elementor-14 .elementor-element.elementor-element-bca5411 > .elementor-container, .elementor-14 .elementor-element.elementor-element-bca5411 > .elementor-container > .elementor-row, .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-bca5411 > .elementor-container > .elementor-column, .elementor-14 .elementor-element.elementor-element-bca5411 > .elementor-container > .elementor-row > .elementor-column, .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-column { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-widget-html { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-bca5411 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ 3. SECTION ROOT + TOKENS ============================================================ */ .livin-direct-shell { --ld-warm-white: #FFF9F0; --ld-card: #FFFFFF; --ld-navy: #102A2C; --ld-muted: #5F6F73; --ld-turquoise: #1BAFC2; --ld-deep-sea: #0E6F78; --ld-border: #E7DED0; --ld-ease: cubic-bezier(0.16, 0.84, 0.44, 1); position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: clamp(72px, 7vw, 108px) 0 clamp(78px, 7.5vw, 112px); overflow-x: clip; background: var(--ld-warm-white); color: var(--ld-navy); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @supports not (overflow: clip) { .livin-direct-shell { overflow-x: hidden; } } /* ============================================================ 4. LOCAL RESET ============================================================ */ .livin-direct-shell, .livin-direct-shell *, .livin-direct-shell *::before, .livin-direct-shell *::after { box-sizing: border-box; } .livin-direct-shell h2, .livin-direct-shell h3, .livin-direct-shell p { margin: 0; padding: 0; } /* ============================================================ 5. INNER WRAPPER Spójny z hero / headerem / stopką ============================================================ */ .livin-direct-inner { width: 100%; max-width: 1260px; min-width: 0; margin: 0 auto; padding: 0 24px; } /* ============================================================ 6. SECTION HEAD ============================================================ */ .livin-direct-head { max-width: 680px; } /* ============================================================ 7. EYEBROW ============================================================ */ .livin-direct-eyebrow { margin-bottom: 16px !important; color: var(--ld-deep-sea); font-size: 11.5px; line-height: 1; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } /* ============================================================ 8. TITLE ============================================================ */ .livin-direct-title { color: var(--ld-navy); font-size: clamp(32px, 3.2vw, 43px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; } /* ============================================================ 9. LEAD ============================================================ */ .livin-direct-lead { max-width: 670px; margin-top: 20px !important; color: var(--ld-muted); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.62; font-weight: 400; } /* ============================================================ 10. GRID ============================================================ */ .livin-direct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; margin-top: clamp(42px, 4vw, 60px); } /* ============================================================ 11. CARD ============================================================ */ .livin-direct-card { display: flex; flex-direction: column; min-width: 0; min-height: 246px; padding: 24px; border: 1px solid var(--ld-border); border-radius: 17px; background: var(--ld-card); box-shadow: 0 1px 2px rgba(16, 42, 44, 0.025); transition: opacity 0.62s var(--ld-ease), transform 0.58s var(--ld-ease), box-shadow 0.30s ease, border-color 0.30s ease; } /* ============================================================ 12. ICON TILE ============================================================ */ .livin-direct-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; margin-bottom: 22px; border-radius: 13px; background: rgba(27, 175, 194, 0.11); color: var(--ld-deep-sea); transition: opacity 0.48s var(--ld-ease), transform 0.46s var(--ld-ease), background-color 0.28s ease; } .livin-direct-icon svg { display: block; width: 22px; height: 22px; } /* ============================================================ 13. CARD TITLE ============================================================ */ .livin-direct-card-title { margin-bottom: 11px !important; color: var(--ld-navy); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.36; font-weight: 700; letter-spacing: -0.015em; } /* ============================================================ 14. CARD COPY ============================================================ */ .livin-direct-card-copy { color: var(--ld-muted); font-size: 14.5px; line-height: 1.58; font-weight: 400; } /* ============================================================ 15. SCROLL REVEAL Tylko gdy JS aktywuje motion-ready ============================================================ */ @media (prefers-reduced-motion: no-preference) { .livin-direct-shell.livin-direct-motion-ready .livin-direct-head { opacity: 0; transform: translateY(18px); will-change: opacity, transform; transition: opacity 0.68s var(--ld-ease), transform 0.68s var(--ld-ease); } .livin-direct-shell.livin-direct-motion-ready .livin-direct-head.livin-direct-is-visible { opacity: 1; transform: translateY(0); will-change: auto; } .livin-direct-shell.livin-direct-motion-ready .livin-direct-card { opacity: 0; transform: translateY(20px) scale(0.985); will-change: opacity, transform; } .livin-direct-shell.livin-direct-motion-ready .livin-direct-card.livin-direct-is-visible { opacity: 1; transform: translateY(0) scale(1); will-change: auto; } .livin-direct-shell.livin-direct-motion-ready .livin-direct-icon { opacity: 0; transform: scale(0.92); } .livin-direct-shell.livin-direct-motion-ready .livin-direct-card.livin-direct-is-visible .livin-direct-icon { opacity: 1; transform: scale(1); transition-delay: 0.10s; } } /* ============================================================ 16. HOVER - POINTER DEVICES ONLY CODEX FIX: Drugi selektor ma odpowiednią specyficzność, aby hover nadpisywał transform stanu .livin-direct-is-visible. ============================================================ */ @media (hover: hover) and (pointer: fine) { .livin-direct-card:hover, .livin-direct-shell.livin-direct-motion-ready .livin-direct-card.livin-direct-is-visible:hover { transform: translateY(-4px) scale(1); border-color: rgba(14, 111, 120, 0.26); box-shadow: 0 16px 34px -18px rgba(16, 42, 44, 0.28); } .livin-direct-card:hover .livin-direct-icon, .livin-direct-shell.livin-direct-motion-ready .livin-direct-card.livin-direct-is-visible:hover .livin-direct-icon { background: rgba(27, 175, 194, 0.17); } } /* ============================================================ 17. LAPTOP ============================================================ */ @media (max-width: 1180px) { .livin-direct-inner { padding-left: 28px; padding-right: 28px; } .livin-direct-grid { gap: 18px; } .livin-direct-card { min-height: 250px; padding: 22px; } } /* ============================================================ 18. TABLET 2 x 2 ============================================================ */ @media (max-width: 1024px) { .livin-direct-shell { padding: 76px 0 84px; } .livin-direct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .livin-direct-card { min-height: 225px; padding: 24px; } } /* ============================================================ 19. MOBILE ============================================================ */ @media (max-width: 600px) { .livin-direct-shell { padding: 64px 0 72px; } .livin-direct-inner { padding: 0 20px; } .livin-direct-head { max-width: 100%; } .livin-direct-title { font-size: clamp(30px, 9vw, 38px); line-height: 1.1; } .livin-direct-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 38px; } .livin-direct-card { min-height: 0; padding: 22px; } .livin-direct-icon { margin-bottom: 19px; } } /* ============================================================ 20. SMALL MOBILE ============================================================ */ @media (max-width: 390px) { .livin-direct-inner { padding: 0 17px; } .livin-direct-title { font-size: 30px; } .livin-direct-card { padding: 20px; } } /* ============================================================ 21. VERY SMALL MOBILE ============================================================ */ @media (max-width: 360px) { .livin-direct-inner { padding: 0 15px; } .livin-direct-title { font-size: 28px; } .livin-direct-lead { font-size: 15px; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .livin-direct-head, .livin-direct-card, .livin-direct-icon { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; will-change: auto !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-2b25d20 *//* ============================================================ LIVIN ŁEBA - ABOUT SECTION WordPress + Elementor Pro + UAE + Astra WKLEJ DO: Zewnętrzna Sekcja -> Zaawansowane -> Custom CSS ============================================================ */ /* ============================================================ 1. OUTER ELEMENTOR SECTION ============================================================ */ .elementor-14 .elementor-element.elementor-element-2b25d20 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ============================================================ 2. CLASSIC ELEMENTOR SECTION RESET TYLKO DLA TEJ SEKCJI ============================================================ */ .elementor-14 .elementor-element.elementor-element-2b25d20 > .elementor-container, .elementor-14 .elementor-element.elementor-element-2b25d20 > .elementor-container > .elementor-row, .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-2b25d20 > .elementor-container > .elementor-column, .elementor-14 .elementor-element.elementor-element-2b25d20 > .elementor-container > .elementor-row > .elementor-column, .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-column { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-widget-html { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-2b25d20 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ 3. SECTION ROOT + DESIGN TOKENS ============================================================ */ .livin-about-shell { --livin-about-warm-white: #FFF9F0; --livin-about-sand: #F5EFE4; --livin-about-card: #FFFFFF; --livin-about-navy: #102A2C; --livin-about-muted: #5F6F73; --livin-about-turquoise: #1BAFC2; --livin-about-deep-sea: #0E6F78; --livin-about-border: #E7DED0; --livin-about-border-strong: #D9CCB8; --livin-about-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: clamp(72px, 6.5vw, 112px) 0; background: var(--livin-about-warm-white); color: var(--livin-about-navy); font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ 4. LOCAL BOX SIZING ============================================================ */ .livin-about-shell, .livin-about-shell *, .livin-about-shell *::before, .livin-about-shell *::after { box-sizing: border-box; } /* ============================================================ 5. LOCAL TYPOGRAPHY RESET Protects against Astra / Elementor margins ============================================================ */ .livin-about-shell .livin-about-eyebrow, .livin-about-shell .livin-about-title, .livin-about-shell .livin-about-copy p { margin: 0; padding: 0; } /* ============================================================ 6. INNER WRAPPER Spójny z headerem, hero, direct section i stopką ============================================================ */ .livin-about-shell .livin-about-inner { width: 100%; max-width: 1260px; min-width: 0; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); } /* ============================================================ 7. MAIN GRID ============================================================ */ .livin-about-shell .livin-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; column-gap: clamp(40px, 3.5vw, 56px); row-gap: 48px; min-width: 0; } /* ============================================================ 8. CONTENT COLUMN ============================================================ */ .livin-about-shell .livin-about-content { min-width: 0; } /* ============================================================ 9. EYEBROW ============================================================ */ .livin-about-shell .livin-about-eyebrow { margin-bottom: 14px; color: var(--livin-about-deep-sea); font-size: 11.5px; line-height: 1.2; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } /* ============================================================ 10. TITLE ============================================================ */ .livin-about-shell .livin-about-title { max-width: 560px; color: var(--livin-about-navy); font-family: inherit; font-size: clamp( 28px, calc(1.4rem + 1.1vw), 38px ); line-height: 1.11; font-weight: 700; letter-spacing: -0.011em; text-wrap: pretty; } /* ============================================================ 11. COPY WRAPPER ============================================================ */ .livin-about-shell .livin-about-copy { margin-top: 22px; } /* ============================================================ 12. COPY PARAGRAPHS ============================================================ */ .livin-about-shell .livin-about-copy p { max-width: 556px; color: var(--livin-about-muted); font-size: 16px; line-height: 1.68; font-weight: 400; } .livin-about-shell .livin-about-copy p + p { margin-top: 18px; } /* Large desktop paragraph size */ @media (min-width: 1440px) { .livin-about-shell .livin-about-copy p { font-size: 17px; } } /* ============================================================ 13. GALLERY GRID ============================================================ */ .livin-about-shell .livin-about-gallery { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); grid-template-rows: auto auto; gap: 20px; min-width: 0; } /* ============================================================ 14. MEDIA REVEAL LAYER Owns scroll reveal only ============================================================ */ .livin-about-shell .livin-about-media { display: block; min-width: 0; } /* LARGE */ .livin-about-shell .livin-about-media--large { grid-column: 1; grid-row: 1 / span 2; align-self: start; } /* TOP RIGHT */ .livin-about-shell .livin-about-media--top { grid-column: 2; grid-row: 1; } /* BOTTOM RIGHT */ .livin-about-shell .livin-about-media--bottom { grid-column: 2; grid-row: 2; } /* ============================================================ 15. CARD VISUAL + HOVER LAYER Important: Reveal transform is NOT placed here. Hover stays independent from reveal delays. ============================================================ */ .livin-about-shell .livin-about-card { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--livin-about-border); border-radius: 17px; background: linear-gradient( 160deg, var(--livin-about-sand) 0%, var(--livin-about-warm-white) 78% ); transition: transform 280ms var(--livin-about-ease), box-shadow 280ms var(--livin-about-ease), border-color 280ms var(--livin-about-ease); } /* ============================================================ 16. CARD ASPECT RATIOS ============================================================ */ /* LARGE */ .livin-about-shell .livin-about-media--large .livin-about-card { aspect-ratio: 3 / 4; } /* SMALL */ .livin-about-shell .livin-about-media--top .livin-about-card, .livin-about-shell .livin-about-media--bottom .livin-about-card { aspect-ratio: 4 / 3; } /* ============================================================ 17. COOL TINT - BOTTOM RIGHT ============================================================ */ .livin-about-shell .livin-about-media--bottom .livin-about-card { background: linear-gradient( 160deg, #E4EDEC 0%, #F3F4F0 62%, var(--livin-about-warm-white) 100% ); } /* ============================================================ 18. PLACEHOLDER TAG ============================================================ */ .livin-about-shell .livin-about-placeholder-tag { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--livin-about-navy); color: #FFFFFF; font-size: 9.5px; line-height: 1.2; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } /* ============================================================ 19. CENTERED FIGURE STACK ============================================================ */ .livin-about-shell .livin-about-figure { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; } /* ============================================================ 20. CAMERA CIRCLE ============================================================ */ .livin-about-shell .livin-about-camera { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--livin-about-card); color: var(--livin-about-navy); box-shadow: 0 3px 10px -4px rgba(16, 42, 44, 0.28); transition: transform 280ms var(--livin-about-ease), box-shadow 280ms var(--livin-about-ease); } /* ============================================================ 21. CAMERA SVG ============================================================ */ .livin-about-shell .livin-about-camera svg { display: block; width: 21px; height: 21px; } /* ============================================================ 22. PLACEHOLDER LABEL ============================================================ */ .livin-about-shell .livin-about-label { display: inline-block; max-width: 100%; padding: 10px 18px; border: 1px solid rgba(231, 222, 208, 0.9); border-radius: 999px; background: var(--livin-about-card); color: var(--livin-about-navy); font-size: 14.5px; line-height: 1.35; font-weight: 400; box-shadow: 0 2px 8px -4px rgba(16, 42, 44, 0.20); } /* ============================================================ 23. HOVER POINTER DEVICES ONLY ============================================================ */ @media (hover: hover) and (pointer: fine) { .livin-about-shell .livin-about-card:hover { transform: translateY(-4px); border-color: var(--livin-about-border-strong); box-shadow: 0 12px 28px -14px rgba(16, 42, 44, 0.22); } .livin-about-shell .livin-about-card:hover .livin-about-camera { transform: scale(1.04); box-shadow: 0 5px 14px -5px rgba(16, 42, 44, 0.34); } } /* ============================================================ 24. REVEAL PRE-STATE Only active after JS adds: .livin-about-motion-ready Base state without JS remains fully visible. ============================================================ */ @media (prefers-reduced-motion: no-preference) { .livin-about-shell.livin-about-motion-ready .livin-about-head, .livin-about-shell.livin-about-motion-ready .livin-about-copy { opacity: 0; transform: translateY(16px); transition: opacity 640ms var(--livin-about-ease), transform 640ms var(--livin-about-ease); } .livin-about-shell.livin-about-motion-ready .livin-about-media { opacity: 0; transform: translateY(20px) scale(0.985); transition: opacity 720ms var(--livin-about-ease), transform 720ms var(--livin-about-ease); } } /* ============================================================ 25. REVEAL VISIBLE STATE ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* HEAD */ .livin-about-shell.livin-about-motion-ready .livin-about-head.livin-about-is-visible, .livin-about-shell.livin-about-motion-ready.livin-about-is-visible .livin-about-head { opacity: 1; transform: translateY(0); transition-delay: 0ms; } /* COPY */ .livin-about-shell.livin-about-motion-ready .livin-about-copy.livin-about-is-visible, .livin-about-shell.livin-about-motion-ready.livin-about-is-visible .livin-about-copy { opacity: 1; transform: translateY(0); transition-delay: 90ms; } /* ALL MEDIA */ .livin-about-shell.livin-about-motion-ready.livin-about-is-visible .livin-about-media { opacity: 1; transform: translateY(0) scale(1); } /* LARGE */ .livin-about-shell.livin-about-motion-ready.livin-about-is-visible .livin-about-media--large { transition-delay: 120ms; } /* TOP */ .livin-about-shell.livin-about-motion-ready.livin-about-is-visible .livin-about-media--top { transition-delay: 210ms; } /* BOTTOM */ .livin-about-shell.livin-about-motion-ready.livin-about-is-visible .livin-about-media--bottom { transition-delay: 300ms; } } /* ============================================================ 26. REDUCED MOTION HARD RESET ============================================================ */ @media (prefers-reduced-motion: reduce) { .livin-about-shell.livin-about-motion-ready .livin-about-head, .livin-about-shell.livin-about-motion-ready .livin-about-copy, .livin-about-shell.livin-about-motion-ready .livin-about-media { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } .livin-about-shell .livin-about-card, .livin-about-shell .livin-about-camera { transition: none !important; } } /* ============================================================ 27. LAPTOP ============================================================ */ @media (max-width: 1180px) { .livin-about-shell .livin-about-grid { column-gap: 44px; } } /* ============================================================ 28. TABLET LANDSCAPE ============================================================ */ @media (max-width: 1024px) { .livin-about-shell .livin-about-grid { column-gap: 40px; } .livin-about-shell .livin-about-gallery { gap: 18px; } .livin-about-shell .livin-about-camera { width: 52px; height: 52px; flex-basis: 52px; } .livin-about-shell .livin-about-camera svg { width: 20px; height: 20px; } .livin-about-shell .livin-about-label { padding: 9px 16px; font-size: 14px; } } /* ============================================================ 29. STACK POINT ============================================================ */ @media (max-width: 900px) { .livin-about-shell .livin-about-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } .livin-about-shell .livin-about-title, .livin-about-shell .livin-about-copy p { max-width: 640px; } } /* ============================================================ 30. TABLET / SMALL TABLET ============================================================ */ @media (max-width: 768px) { .livin-about-shell .livin-about-gallery { gap: 18px; } } /* ============================================================ 31. MOBILE - GALLERY FLATTENS ============================================================ */ @media (max-width: 560px) { .livin-about-shell .livin-about-inner { padding: 0 20px; } .livin-about-shell .livin-about-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 16px; } .livin-about-shell .livin-about-media--large, .livin-about-shell .livin-about-media--top, .livin-about-shell .livin-about-media--bottom { grid-column: 1; grid-row: auto; align-self: auto; } /* LARGE MOBILE */ .livin-about-shell .livin-about-media--large .livin-about-card { aspect-ratio: 4 / 5; } /* SMALL MOBILE */ .livin-about-shell .livin-about-media--top .livin-about-card, .livin-about-shell .livin-about-media--bottom .livin-about-card { aspect-ratio: 16 / 10; } .livin-about-shell .livin-about-camera { width: 48px; height: 48px; flex-basis: 48px; } .livin-about-shell .livin-about-camera svg { width: 19px; height: 19px; } .livin-about-shell .livin-about-label { padding: 9px 16px; font-size: 13.5px; } } /* ============================================================ 32. SMALL MOBILE ============================================================ */ @media (max-width: 390px) { .livin-about-shell .livin-about-inner { padding: 0 18px; } .livin-about-shell .livin-about-figure { padding: 16px; } } /* ============================================================ 33. VERY SMALL MOBILE ============================================================ */ @media (max-width: 320px) { .livin-about-shell .livin-about-inner { padding: 0 16px; } .livin-about-shell .livin-about-camera { width: 44px; height: 44px; flex-basis: 44px; } .livin-about-shell .livin-about-placeholder-tag { padding: 3px 7px; font-size: 9px; } .livin-about-shell .livin-about-label { padding: 8px 14px; font-size: 13px; } } /* ============================================================ LIVIN ABOUT - REAL IMAGES FIX Dopisz na koncu CSS sekcji O Livin Leba ============================================================ */ .livin-about-shell .livin-about-card--image { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border-radius: inherit; line-height: 0; } .livin-about-shell .livin-about-img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: center center; border-radius: inherit; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) and (pointer: fine) { .livin-about-shell .livin-about-card--image:hover .livin-about-img { transform: scale(1.035); filter: saturate(1.04) contrast(1.02); } } @media (prefers-reduced-motion: reduce) { .livin-about-shell .livin-about-img { transition: none !important; } .livin-about-shell .livin-about-card--image:hover .livin-about-img { transform: none !important; filter: none !important; } } /* ============================================================ LIVIN ABOUT - REAL IMAGES FINAL FIX Spójne zaokrąglenie, cień i kadrowanie jak w hero Wklej na sam koniec CSS sekcji O Livin Leba ============================================================ */ .livin-about-shell .livin-about-card--image { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--livin-about-border) !important; border-radius: 24px !important; background: var(--livin-about-sand) !important; box-shadow: 0 22px 52px rgba(16, 42, 44, 0.10) !important; line-height: 0 !important; transform: translateZ(0); transition: transform 280ms var(--livin-about-ease), box-shadow 280ms var(--livin-about-ease), border-color 280ms var(--livin-about-ease); } .livin-about-shell .livin-about-img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; border-radius: 23px !important; vertical-align: top !important; transition: transform 420ms var(--livin-about-ease), filter 420ms var(--livin-about-ease); } /* Duzy kafel - lekko lepsze kadrowanie Bosmanskiego */ .livin-about-shell .livin-about-media--large .livin-about-img { object-position: center center !important; } /* Gorny prawy - aneks Cumowniczy */ .livin-about-shell .livin-about-media--top .livin-about-img { object-position: center center !important; } /* Dolny prawy - lazienka Refowy */ .livin-about-shell .livin-about-media--bottom .livin-about-img { object-position: center center !important; } /* Hover jak w hero - subtelnie premium */ @media (hover: hover) and (pointer: fine) { .livin-about-shell .livin-about-card--image:hover { transform: translateY(-4px); border-color: var(--livin-about-border-strong) !important; box-shadow: 0 28px 64px rgba(16, 42, 44, 0.14) !important; } .livin-about-shell .livin-about-card--image:hover .livin-about-img { transform: scale(1.035); filter: saturate(1.04) contrast(1.02); } } /* Mobile - trochę mniejsze zaokrąglenie */ @media (max-width: 560px) { .livin-about-shell .livin-about-card--image { border-radius: 22px !important; } .livin-about-shell .livin-about-img { border-radius: 21px !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .livin-about-shell .livin-about-card--image, .livin-about-shell .livin-about-img { transition: none !important; } .livin-about-shell .livin-about-card--image:hover { transform: none !important; } .livin-about-shell .livin-about-card--image:hover .livin-about-img { transform: none !important; filter: none !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-33111f8 *//* ============================================================ LIVIN LEBA - UNITS + COMPARISON + RESERVATION STEPS Paste into: Outer Section -> Advanced -> Custom CSS ============================================================ */ .elementor-14 .elementor-element.elementor-element-33111f8, .elementor-14 .elementor-element.elementor-element-33111f8 > .elementor-container, .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-row, .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-column, .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-33111f8 { width: 100% !important; max-width: none !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-33111f8 > .elementor-container { max-width: 100% !important; width: 100% !important; } .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-widget-html, .elementor-14 .elementor-element.elementor-element-33111f8 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } .livin-units-shell { --lu-warm-white: #FFF9F0; --lu-sand: #F5EFE4; --lu-card: #FFFFFF; --lu-navy: #102A2C; --lu-muted: #5F6F73; --lu-turquoise: #1BAFC2; --lu-deep-sea: #0E6F78; --lu-sun: #F6A623; --lu-sun-hover: #E89516; --lu-beige-border: #E7DED0; --lu-border-soft: #DCCFBB; --lu-maxw: 1260px; display: block; width: 100%; background: var(--lu-warm-white); color: var(--lu-navy); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; line-height: 1.5; overflow-x: hidden; padding: 90px 0 96px; } .livin-units-shell, .livin-units-shell *, .livin-units-shell *::before, .livin-units-shell *::after { box-sizing: border-box; } .livin-units-shell h2, .livin-units-shell h3, .livin-units-shell h4, .livin-units-shell p, .livin-units-shell ul, .livin-units-shell ol, .livin-units-shell li, .livin-units-shell dl, .livin-units-shell dt, .livin-units-shell dd { margin: 0; padding: 0; } .livin-units-shell img { max-width: 100%; height: auto; display: block; } .livin-units-shell a, .livin-units-shell a:hover, .livin-units-shell a:focus, .livin-units-shell a:focus-visible, .livin-units-shell a:active, .livin-units-shell .livin-units-btn, .livin-units-shell .livin-units-btn:hover, .livin-units-shell .livin-units-btn:focus, .livin-units-shell .livin-units-btn:focus-visible, .livin-units-shell .livin-units-btn:active { text-decoration: none !important; -webkit-text-decoration: none !important; } .livin-units-inner { max-width: var(--lu-maxw); margin: 0 auto; padding: 0 24px; } .livin-units-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .livin-units-head { margin-bottom: 30px; } .livin-units-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lu-deep-sea); } .livin-units-title { margin: 0 0 18px; font-weight: 700; color: var(--lu-navy); font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.01em; max-width: 18ch; } .livin-units-lead { margin: 0; color: var(--lu-muted); font-size: clamp(16px, 1.4vw, 18px); max-width: 60ch; } /* ============================================================ FILTERS ============================================================ */ .livin-units-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .livin-units-filter { appearance: none !important; -webkit-appearance: none !important; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--lu-navy) !important; background: var(--lu-card) !important; border: 1px solid var(--lu-beige-border) !important; padding: 10px 18px; border-radius: 999px; line-height: 1; min-height: 40px; box-shadow: 0 4px 12px rgba(16, 42, 44, 0.04); transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease; } /* oczekiwany hover - biały środek, morska ramka, normalny tekst */ .livin-units-filter:not(.livin-units-filter--is-active):hover, .livin-units-filter:not([aria-pressed="true"]):hover { color: var(--lu-navy) !important; background: var(--lu-card) !important; border-color: var(--lu-turquoise) !important; box-shadow: 0 6px 16px rgba(16, 42, 44, 0.07); transform: translateY(-1px); } /* aktywny filtr */ .livin-units-filter--is-active, .livin-units-filter[aria-pressed="true"] { background: var(--lu-deep-sea) !important; border-color: var(--lu-deep-sea) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(14, 111, 120, 0.18); } /* aktywny filtr na hover zostaje morski, bez niebieskiego */ .livin-units-filter--is-active:hover, .livin-units-filter[aria-pressed="true"]:hover { background: var(--lu-deep-sea) !important; border-color: var(--lu-deep-sea) !important; color: #ffffff !important; transform: none; } .livin-units-filter:focus-visible { outline: 3px solid rgba(27, 175, 194, 0.36); outline-offset: 2px; } /* ============================================================ CARDS GRID ============================================================ */ .livin-units-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .livin-units-card { display: flex; min-width: 0; } .livin-units-card--filtered-out { display: none !important; } .livin-units-surface { display: flex; flex-direction: column; width: 100%; background: var(--lu-card); border: 1px solid var(--lu-beige-border); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(16, 42, 44, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease; } @media (hover: hover) and (pointer: fine) { .livin-units-card:hover .livin-units-surface { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 42, 44, 0.12); } } .livin-units-media { position: relative; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: linear-gradient(150deg, #F0E7D8 0%, #F7F1E7 55%, #EFE6D6 100%); } .livin-units-placeholder-tag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; background: rgba(16, 42, 44, 0.72); padding: 5px 10px; border-radius: 999px; } .livin-units-camera { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; color: var(--lu-deep-sea); box-shadow: 0 4px 12px rgba(16, 42, 44, 0.10); } .livin-units-media-label { max-width: 88%; text-align: center; font-size: 14px; font-weight: 500; color: var(--lu-navy); background: #ffffff; padding: 10px 16px; border-radius: 14px; box-shadow: 0 4px 12px rgba(16, 42, 44, 0.08); } .livin-units-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 22px 24px; } .livin-units-type-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; margin-bottom: 6px; } .livin-units-type { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lu-deep-sea); } .livin-units-chip { font-size: 12px; font-weight: 600; color: var(--lu-deep-sea); background: rgba(27, 175, 194, 0.12); border: 1px solid rgba(27, 175, 194, 0.28); padding: 4px 12px; border-radius: 999px; white-space: nowrap; } .livin-units-name { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--lu-navy); line-height: 1.2; } .livin-units-meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; } .livin-units-meta li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--lu-muted); } .livin-units-meta li svg { color: var(--lu-turquoise); flex: 0 0 auto; } .livin-units-copy { margin: 0 0 12px; font-size: 15px; color: var(--lu-muted); } .livin-units-good { margin: 0 0 18px; font-size: 14px; color: var(--lu-muted); } .livin-units-good strong { color: var(--lu-navy); font-weight: 600; } .livin-units-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--lu-beige-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .livin-units-price { display: flex; flex-direction: column; gap: 2px; } .livin-units-price-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lu-muted); } .livin-units-price-amount { font-size: 20px; font-weight: 700; color: var(--lu-navy); } .livin-units-price-unit { font-size: 13px; font-weight: 500; color: var(--lu-muted); } .livin-units-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ============================================================ BUTTONS ============================================================ */ .livin-units-btn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .livin-units-btn:focus-visible { outline: 3px solid rgba(27, 175, 194, 0.45); outline-offset: 2px; } .livin-units-btn--ghost { background: var(--lu-card); border-color: var(--lu-beige-border); color: var(--lu-navy); } .livin-units-btn--ghost:hover { border-color: var(--lu-deep-sea); color: var(--lu-deep-sea); } .livin-units-btn--sun { background: var(--lu-sun); color: var(--lu-navy); box-shadow: 0 4px 12px rgba(246, 166, 35, 0.25); } .livin-units-btn--sun:hover { background: var(--lu-sun-hover); transform: translateY(-1px); } .livin-units-btn--sm { min-height: 36px; padding: 0 16px; font-size: 13px; } .livin-units-btn--lg { min-height: 52px; padding: 0 34px; font-size: 16px; } .livin-units-btn--block { width: 100%; } .livin-units-note { margin: 24px 0 0; font-size: 14px; color: var(--lu-muted); } /* ============================================================ COMPARISON TABLE ============================================================ */ .livin-units-table-section { margin-top: 72px; scroll-margin-top: 100px; } .livin-units-table-title { margin: 0 0 22px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; color: var(--lu-navy); letter-spacing: -0.015em; } .livin-units-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lu-beige-border); border-radius: 18px; background: var(--lu-card); box-shadow: 0 8px 28px rgba(16, 42, 44, 0.045); } .livin-units-table { width: 100%; min-width: 760px; border-collapse: separate !important; border-spacing: 0 !important; background: var(--lu-card); border: 0 !important; } .livin-units-table caption { caption-side: bottom; } .livin-units-table thead th { text-align: left; background: var(--lu-sand); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lu-navy); padding: 17px 20px; white-space: nowrap; border: 0 !important; border-bottom: 1px solid var(--lu-beige-border) !important; } .livin-units-table thead th:first-child { border-top-left-radius: 18px; } .livin-units-table thead th:last-child { text-align: right; border-top-right-radius: 18px; } .livin-units-table tbody tr { background: var(--lu-card); } .livin-units-table tbody th, .livin-units-table tbody td { padding: 18px 20px; font-size: 15px; color: var(--lu-muted); vertical-align: middle; background: var(--lu-card); border: 0 !important; border-bottom: 1px solid var(--lu-beige-border) !important; } .livin-units-table tbody tr:last-child th, .livin-units-table tbody tr:last-child td { border-bottom: 0 !important; } .livin-units-table tbody th { font-weight: 700; color: var(--lu-navy); text-align: left; white-space: nowrap; } .livin-units-table .livin-units-td-price { font-weight: 700; color: var(--lu-navy); white-space: nowrap; } .livin-units-table tbody td:last-child { text-align: right; white-space: nowrap; } .livin-units-table tbody tr:hover th, .livin-units-table tbody tr:hover td { background: rgba(245, 239, 228, 0.42); } .livin-units-mobile-table { display: none; } .livin-units-mobile-card { background: var(--lu-card); border: 1px solid var(--lu-beige-border); border-radius: 16px; padding: 18px; box-shadow: 0 4px 14px rgba(16, 42, 44, 0.05); } .livin-units-mobile-card + .livin-units-mobile-card { margin-top: 14px; } .livin-units-mobile-name { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--lu-navy); } .livin-units-mobile-list { margin: 0 0 16px; padding: 0; } .livin-units-mobile-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--lu-beige-border); } .livin-units-mobile-list > div:first-child { border-top: 0; } .livin-units-mobile-list dt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lu-muted); } .livin-units-mobile-list dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--lu-navy); text-align: right; } /* ============================================================ RESERVATION STEPS ============================================================ */ .livin-units-steps-section { margin-top: 104px; } .livin-units-steps-head { margin-bottom: 42px; } .livin-units-steps-title { margin: 14px 0 0; font-size: clamp(30px, 3.3vw, 42px); font-weight: 700; color: var(--lu-navy); line-height: 1.12; letter-spacing: -0.015em; } .livin-units-steps { list-style: none; margin: 0 0 42px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } .livin-units-step { display: flex; flex-direction: column; min-height: 210px; background: var(--lu-card); border: 1px solid var(--lu-beige-border); border-radius: 17px; padding: 30px 28px 32px; box-shadow: 0 6px 20px rgba(16, 42, 44, 0.05); } .livin-units-step-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .livin-units-step-num { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lu-deep-sea); color: #ffffff; font-size: 15px; font-weight: 700; } .livin-units-step-line { flex: 1 1 auto; height: 1px; background: var(--lu-beige-border); } .livin-units-step-title { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--lu-navy); line-height: 1.34; letter-spacing: -0.005em; } .livin-units-step-text { margin: 0; font-size: 15px; line-height: 1.58; color: var(--lu-muted); } .livin-units-steps-cta { display: flex; justify-content: center; } /* ============================================================ REVEAL ANIMATION ============================================================ */ .livin-units-motion-ready .livin-units-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1), transform 0.56s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .livin-units-motion-ready .livin-units-reveal.livin-units-is-visible { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .livin-units-reveal { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } } /* ============================================================ TOUCH HARDENING ============================================================ */ @media (hover: none), (pointer: coarse) { .livin-units-filter:hover { transform: none; box-shadow: 0 4px 12px rgba(16, 42, 44, 0.04); } .livin-units-card:hover .livin-units-surface { transform: none; box-shadow: 0 6px 20px rgba(16, 42, 44, 0.05); } .livin-units-btn--sun:hover { transform: none; background: var(--lu-sun); } .livin-units-btn--ghost:hover { border-color: var(--lu-beige-border); color: var(--lu-navy); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1180px) { .livin-units-inner { padding: 0 20px; } .livin-units-step { padding: 28px 22px 30px; } } @media (max-width: 1024px) { .livin-units-shell { padding: 72px 0 80px; } .livin-units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .livin-units-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .livin-units-step { min-height: 200px; padding: 28px 26px 30px; } .livin-units-table-section { margin-top: 60px; } .livin-units-steps-section { margin-top: 84px; } } @media (max-width: 768px) { .livin-units-grid { gap: 20px; } .livin-units-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .livin-units-inner { padding: 0 18px; } .livin-units-step { min-height: 190px; } } @media (max-width: 600px) { .livin-units-shell { padding: 56px 0 64px; } .livin-units-inner { padding: 0 16px; } .livin-units-grid { grid-template-columns: minmax(0, 1fr); } .livin-units-steps { grid-template-columns: minmax(0, 1fr); } .livin-units-step { min-height: 0; padding: 28px 24px 30px; } .livin-units-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .livin-units-table { display: none; } .livin-units-mobile-table { display: block; } .livin-units-footer { gap: 14px; } .livin-units-actions { width: 100%; } .livin-units-actions .livin-units-btn { flex: 1 1 auto; } } @media (max-width: 480px) { .livin-units-inner { padding: 0 16px; } .livin-units-body { padding: 20px; } .livin-units-filter { min-height: 39px; padding: 9px 15px; font-size: 13.5px; } } @media (max-width: 390px) { .livin-units-inner { padding: 0 14px; } .livin-units-name { font-size: 20px; } .livin-units-step { padding: 26px 22px 28px; } } @media (max-width: 360px) { .livin-units-inner { padding: 0 12px; } .livin-units-meta { gap: 6px 12px; } .livin-units-step { padding: 24px 20px 26px; } } /* ============================================================ FIX - RESERVATION STEPS SPACING / PADDING ============================================================ */ .livin-units-shell .livin-units-steps-section { margin-top: 108px !important; } .livin-units-shell .livin-units-steps-head { margin-bottom: 46px !important; } .livin-units-shell .livin-units-steps { gap: 22px !important; margin-bottom: 58px !important; } .livin-units-shell .livin-units-step { min-height: 210px !important; padding: 30px 30px 34px !important; border-radius: 17px !important; } .livin-units-shell .livin-units-step-top { gap: 16px !important; margin-bottom: 26px !important; } .livin-units-shell .livin-units-step-num { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; } .livin-units-shell .livin-units-step-title { margin-bottom: 12px !important; font-size: 17px !important; line-height: 1.36 !important; } .livin-units-shell .livin-units-step-text { font-size: 15px !important; line-height: 1.6 !important; } .livin-units-shell .livin-units-steps-cta { margin-top: 0 !important; } /* ============================================================ RESPONSIVE FIX - STEPS ============================================================ */ @media (max-width: 1180px) { .livin-units-shell .livin-units-step { padding: 28px 26px 32px !important; } } @media (max-width: 1024px) { .livin-units-shell .livin-units-steps { gap: 20px !important; margin-bottom: 52px !important; } .livin-units-shell .livin-units-step { min-height: 200px !important; padding: 28px 26px 32px !important; } } @media (max-width: 768px) { .livin-units-shell .livin-units-steps { margin-bottom: 48px !important; } .livin-units-shell .livin-units-step { min-height: 190px !important; padding: 28px 26px 30px !important; } } @media (max-width: 600px) { .livin-units-shell .livin-units-steps { margin-bottom: 44px !important; } .livin-units-shell .livin-units-step { min-height: 0 !important; padding: 28px 24px 30px !important; } } /* ============================================================ LIVIN UNITS - REAL IMAGES FINAL FIX Wklej na sam koniec CSS sekcji apartamentow ============================================================ */ .livin-units-shell .livin-units-media--image { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 4 / 3 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--lu-sand) !important; border-radius: 18px 18px 0 0 !important; line-height: 0 !important; } .livin-units-shell .livin-units-img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; vertical-align: top !important; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* Bosmanski */ .livin-units-shell .livin-units-card:nth-child(1) .livin-units-img { object-position: center center !important; } /* Refowy */ .livin-units-shell .livin-units-card:nth-child(2) .livin-units-img { object-position: center center !important; } /* Cumowniczy */ .livin-units-shell .livin-units-card:nth-child(3) .livin-units-img { object-position: center center !important; } /* Szotowy */ .livin-units-shell .livin-units-card:nth-child(4) .livin-units-img { object-position: center center !important; } /* Knagowy */ .livin-units-shell .livin-units-card:nth-child(5) .livin-units-img { object-position: center center !important; } /* Osemka */ .livin-units-shell .livin-units-card:nth-child(6) .livin-units-img { object-position: center center !important; } /* Polsztyk */ .livin-units-shell .livin-units-card:nth-child(7) .livin-units-img { object-position: center center !important; } @media (hover: hover) and (pointer: fine) { .livin-units-shell .livin-units-card:hover .livin-units-img { transform: scale(1.035); filter: saturate(1.04) contrast(1.02); } } @media (prefers-reduced-motion: reduce) { .livin-units-shell .livin-units-img { transition: none !important; } .livin-units-shell .livin-units-card:hover .livin-units-img { transform: none !important; filter: none !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-b5a07b3 *//* ============================================================ LIVIN LEBA - LOCATION SECTION Paste into: Outer Section -> Advanced -> Custom CSS ============================================================ */ .elementor-14 .elementor-element.elementor-element-b5a07b3, .elementor-14 .elementor-element.elementor-element-b5a07b3 > .elementor-container, .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-row, .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-column, .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-b5a07b3 { width: 100% !important; max-width: none !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-b5a07b3 > .elementor-container { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-widget-html, .elementor-14 .elementor-element.elementor-element-b5a07b3 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ SECTION SHELL ============================================================ */ .livin-location-shell { --ll-warm-white: #FFF9F0; --ll-sand: #F5EFE4; --ll-card: #FFFFFF; --ll-navy: #102A2C; --ll-muted: #5F6F73; --ll-turquoise: #1BAFC2; --ll-deep-sea: #0E6F78; --ll-sun: #F6A623; --ll-sun-hover: #E89516; --ll-beige-border: #E7DED0; display: block; width: 100%; min-width: 0; background: var(--ll-warm-white); color: var(--ll-navy); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; padding: clamp(80px, 7vw, 120px) 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .livin-location-shell, .livin-location-shell *, .livin-location-shell *::before, .livin-location-shell *::after { box-sizing: border-box; } .livin-location-shell h2, .livin-location-shell p { margin: 0; padding: 0; } .livin-location-shell a, .livin-location-shell a:hover, .livin-location-shell a:focus, .livin-location-shell a:active, .livin-location-shell a:focus-visible { text-decoration: none !important; -webkit-text-decoration: none !important; } /* ============================================================ LAYOUT ============================================================ */ .livin-location-inner { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); } .livin-location-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr); align-items: center; column-gap: clamp(44px, 4vw, 68px); row-gap: clamp(32px, 4vw, 48px); } /* ============================================================ LEFT COLUMN ============================================================ */ .livin-location-info { display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 30px); min-width: 0; } .livin-location-content { display: flex; flex-direction: column; gap: 16px; } .livin-location-eyebrow { color: var(--ll-deep-sea); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; } .livin-location-title { color: var(--ll-navy); font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; max-width: 650px; } .livin-location-lead { color: var(--ll-muted); font-size: clamp(15px, 1.15vw, 17px); font-weight: 400; line-height: 1.7; max-width: 46ch; } /* ============================================================ ADDRESS ============================================================ */ .livin-location-address { background: var(--ll-card); border: 1px solid var(--ll-beige-border); border-radius: 18px; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px); box-shadow: 0 10px 30px rgba(16, 42, 44, 0.05); } .livin-location-address-label { margin-bottom: 8px !important; color: var(--ll-deep-sea); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; } .livin-location-address-text { display: flex; align-items: center; gap: 12px; color: var(--ll-navy); font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.35; } .livin-location-address-text svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ll-turquoise); } /* ============================================================ FEATURES ============================================================ */ .livin-location-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .livin-location-feature { display: flex; align-items: center; gap: 12px; min-width: 0; background: var(--ll-card); border: 1px solid var(--ll-beige-border); border-radius: 14px; padding: 16px 18px; color: var(--ll-navy); font-size: 14.5px; font-weight: 500; line-height: 1.35; box-shadow: 0 6px 18px rgba(16, 42, 44, 0.04); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease; } .livin-location-feature svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ll-turquoise); } .livin-location-feature span { min-width: 0; } /* ============================================================ RIGHT COLUMN ============================================================ */ .livin-location-visual { display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 22px); min-width: 0; } .livin-location-map-wrap { display: flex; flex-direction: column; gap: 14px; } /* ============================================================ GOOGLE MAP ============================================================ */ .livin-location-map-card { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; border: 1px solid var(--ll-beige-border); border-radius: 22px; background: var(--ll-sand); box-shadow: 0 16px 40px rgba(16, 42, 44, 0.08); transition: box-shadow 0.25s ease, border-color 0.25s ease; } .livin-location-map-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .livin-location-map-tag { position: absolute; top: 14px; right: 14px; z-index: 2; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: rgba(16, 42, 44, 0.86); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .livin-location-map-pill { position: absolute; left: 14px; bottom: 14px; z-index: 2; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 28px); padding: 8px 14px; border-radius: 999px; background: #ffffff; color: var(--ll-navy); font-size: 13px; font-weight: 600; line-height: 1.2; box-shadow: 0 6px 16px rgba(16, 42, 44, 0.12); } .livin-location-map-pill svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--ll-deep-sea); } .livin-location-map-link { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 11px 18px; border: 1px solid var(--ll-beige-border); border-radius: 999px; background: var(--ll-card); color: var(--ll-deep-sea); font-size: 14px; font-weight: 600; line-height: 1; box-shadow: 0 6px 18px rgba(16, 42, 44, 0.04); transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, color 0.22s ease; } .livin-location-map-link svg { width: 16px; height: 16px; flex: 0 0 16px; } /* ============================================================ PHOTO PLACEHOLDER ============================================================ */ .livin-location-photo { position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow: hidden; border: 1px solid var(--ll-beige-border); border-radius: 22px; background: linear-gradient(150deg, #FBF6EC 0%, #F1E7D6 55%, #ECE0CC 100%); box-shadow: 0 12px 34px rgba(16, 42, 44, 0.06); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease; } .livin-location-placeholder-tag { position: absolute; top: 14px; right: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(16, 42, 44, 0.86); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .livin-location-camera { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: #ffffff; color: var(--ll-deep-sea); box-shadow: 0 8px 20px rgba(16, 42, 44, 0.10); } .livin-location-camera svg { width: 28px; height: 28px; } .livin-location-photo-label { max-width: calc(100% - 40px); padding: 9px 18px; border-radius: 999px; background: #ffffff; color: var(--ll-navy); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; box-shadow: 0 6px 16px rgba(16, 42, 44, 0.08); } /* ============================================================ REVEAL ANIMATION ============================================================ */ .livin-location-motion-ready .livin-location-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .livin-location-motion-ready .livin-location-reveal.livin-location-is-visible { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .livin-location-reveal { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } } /* ============================================================ HOVER ============================================================ */ @media (hover: hover) and (pointer: fine) { .livin-location-feature:hover { transform: translateY(-3px); border-color: #D9CDB8; box-shadow: 0 14px 30px rgba(16, 42, 44, 0.10); } .livin-location-photo:hover { transform: translateY(-3px); border-color: #D9CDB8; box-shadow: 0 18px 40px rgba(16, 42, 44, 0.12); } .livin-location-map-card:hover { border-color: #D9CDB8; box-shadow: 0 20px 46px rgba(16, 42, 44, 0.12); } .livin-location-map-link:hover { color: var(--ll-deep-sea); border-color: var(--ll-deep-sea); box-shadow: 0 8px 18px rgba(14, 111, 120, 0.14); transform: translateY(-1px); } } /* ============================================================ FOCUS ============================================================ */ .livin-location-map-link:focus-visible { outline: 3px solid rgba(27, 175, 194, 0.42); outline-offset: 3px; } .livin-location-map-frame:focus-visible { outline: 3px solid rgba(27, 175, 194, 0.42); outline-offset: -3px; } /* ============================================================ TOUCH HARDENING ============================================================ */ @media (hover: none), (pointer: coarse) { .livin-location-feature:hover, .livin-location-photo:hover, .livin-location-map-link:hover { transform: none; } .livin-location-map-card:hover { box-shadow: 0 16px 40px rgba(16, 42, 44, 0.08); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .livin-location-grid { column-gap: clamp(32px, 3.5vw, 48px); } } @media (max-width: 900px) { .livin-location-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .livin-location-info { order: 1; } .livin-location-visual { order: 2; } .livin-location-lead { max-width: 60ch; } } @media (max-width: 600px) { .livin-location-shell { padding: clamp(56px, 12vw, 80px) 0; } .livin-location-inner { padding: 0 16px; } .livin-location-features { grid-template-columns: minmax(0, 1fr); } .livin-location-map-card { aspect-ratio: 4 / 3; } .livin-location-photo { aspect-ratio: 16 / 10; } .livin-location-map-link { width: 100%; } } @media (max-width: 380px) { .livin-location-inner { padding: 0 14px; } .livin-location-address-text { font-size: 16px; } .livin-location-map-pill { font-size: 12px; padding: 7px 12px; } .livin-location-map-tag, .livin-location-placeholder-tag { font-size: 10px; padding: 5px 10px; } } /* ============================================================ LIVIN LOCATION - REAL PHOTO FIX Wklej na sam koniec CSS sekcji lokalizacji ============================================================ */ .livin-location-shell .livin-location-photo--image { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 16 / 10 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--ll-beige-border) !important; border-radius: 22px !important; background: var(--ll-sand) !important; box-shadow: 0 12px 34px rgba(16, 42, 44, 0.06) !important; line-height: 0 !important; } .livin-location-shell .livin-location-img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; vertical-align: top !important; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) and (pointer: fine) { .livin-location-shell .livin-location-photo--image:hover { transform: translateY(-3px); border-color: #D9CDB8 !important; box-shadow: 0 18px 40px rgba(16, 42, 44, 0.12) !important; } .livin-location-shell .livin-location-photo--image:hover .livin-location-img { transform: scale(1.035); filter: saturate(1.04) contrast(1.02); } } @media (prefers-reduced-motion: reduce) { .livin-location-shell .livin-location-photo--image, .livin-location-shell .livin-location-img { transition: none !important; } .livin-location-shell .livin-location-photo--image:hover { transform: none !important; } .livin-location-shell .livin-location-photo--image:hover .livin-location-img { transform: none !important; filter: none !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-f659e6e *//* ============================================================ LIVIN LEBA - GALLERY SECTION Paste into: outer Section -> Advanced -> Custom CSS ============================================================ */ .elementor-14 .elementor-element.elementor-element-f659e6e, .elementor-14 .elementor-element.elementor-element-f659e6e > .elementor-container, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-container, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-row, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-column, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-f659e6e { width: 100% !important; max-width: none !important; background-color: #FFF9F0 !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-f659e6e > .elementor-container, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-container { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-widget-html, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-f659e6e .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .livin-gallery-shell { --lg-warm-white: #FFF9F0; --lg-sand: #F5EFE4; --lg-card: #FFFFFF; --lg-navy: #102A2C; --lg-muted: #5F6F73; --lg-turquoise: #1BAFC2; --lg-deep-sea: #0E6F78; --lg-sun: #F6A623; --lg-beige-border: #E7DED0; --lg-max: 1260px; --lg-gap: 18px; --lg-radius: 18px; --lg-pad-x: clamp(20px, 5vw, 48px); --lg-pad-y: clamp(80px, 7vw, 120px); --lg-head-gap: clamp(38px, 3.6vw, 48px); --lg-row-top: clamp(190px, 16vw, 236px); --lg-row-bottom: clamp(168px, 13.5vw, 200px); --lg-grad-warm: linear-gradient(148deg, #FBF7F0 0%, #F4ECDE 56%, #EFE5D2 100%); --lg-grad-cool: linear-gradient(148deg, #EDF3F2 0%, #F3EDE2 58%, #EFE6D5 100%); --lg-shadow: 0 10px 28px rgba(16, 42, 44, 0.06); --lg-shadow-hover: 0 18px 40px rgba(16, 42, 44, 0.11); --lg-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; display: block; width: 100%; padding: var(--lg-pad-y) var(--lg-pad-x); background-color: var(--lg-warm-white); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--lg-navy); overflow-x: hidden; } .livin-gallery-shell, .livin-gallery-shell *, .livin-gallery-shell *::before, .livin-gallery-shell *::after { box-sizing: border-box; } .livin-gallery-shell h2, .livin-gallery-shell p, .livin-gallery-shell ul, .livin-gallery-shell li { margin: 0; padding: 0; } .livin-gallery-inner { width: 100%; max-width: var(--lg-max); margin: 0 auto; } .livin-gallery-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); align-items: end; gap: clamp(20px, 3vw, 40px); margin: 0 0 var(--lg-head-gap) 0; } .livin-gallery-heading { min-width: 0; } .livin-gallery-eyebrow { margin: 0 0 12px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lg-deep-sea); line-height: 1.2; } .livin-gallery-title { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: var(--lg-navy); } .livin-gallery-note { margin: 0 0 6px 0; min-width: 0; font-size: clamp(14px, 1.05vw, 15px); font-weight: 400; line-height: 1.65; color: var(--lg-muted); } .livin-gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: var(--lg-row-top) var(--lg-row-top) var(--lg-row-bottom); gap: var(--lg-gap); } .livin-gallery-item { min-width: 0; min-height: 0; } .livin-gallery-item--large { grid-column: 1 / 7; grid-row: 1 / 3; } .livin-gallery-item--kitchen { grid-column: 7 / 10; grid-row: 1; } .livin-gallery-item--bathroom { grid-column: 10 / 13; grid-row: 1; } .livin-gallery-item--balcony { grid-column: 7 / 10; grid-row: 2; } .livin-gallery-item--terrace { grid-column: 10 / 13; grid-row: 2; } .livin-gallery-item--entrance { grid-column: 1 / 4; grid-row: 3; } .livin-gallery-item--parking { grid-column: 4 / 7; grid-row: 3; } .livin-gallery-item--area { grid-column: 7 / 10; grid-row: 3; } .livin-gallery-item--room { grid-column: 10 / 13; grid-row: 3; } .livin-gallery-card { position: relative; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 18px; border: 1px solid var(--lg-beige-border); border-radius: var(--lg-radius); background-image: var(--lg-grad-warm); box-shadow: var(--lg-shadow); overflow: hidden; transition: transform 320ms var(--lg-ease), box-shadow 320ms var(--lg-ease), border-color 320ms var(--lg-ease); } .livin-gallery-item--balcony .livin-gallery-card, .livin-gallery-item--parking .livin-gallery-card { background-image: var(--lg-grad-cool); } .livin-gallery-placeholder-tag { position: absolute; top: 14px; right: 14px; max-width: calc(100% - 28px); padding: 5px 10px; border-radius: 999px; background-color: rgba(16, 42, 44, 0.62); color: #FFFFFF; font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .livin-gallery-camera { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background-color: var(--lg-card); color: var(--lg-deep-sea); box-shadow: 0 6px 16px rgba(16, 42, 44, 0.08); transition: transform 320ms var(--lg-ease); } .livin-gallery-camera svg { display: block; } .livin-gallery-item--large .livin-gallery-camera { width: 62px; height: 62px; } .livin-gallery-label { max-width: calc(100% - 28px); padding: 10px 18px; border-radius: 999px; background-color: var(--lg-card); color: var(--lg-navy); font-size: 13.5px; font-weight: 500; line-height: 1.35; text-align: center; box-shadow: 0 4px 14px rgba(16, 42, 44, 0.07); overflow-wrap: break-word; } .livin-gallery-item--large .livin-gallery-label { font-size: 15px; padding: 11px 22px; } .livin-gallery-shell.livin-gallery-motion-ready .livin-gallery-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--lg-ease), transform 600ms var(--lg-ease); will-change: opacity, transform; } .livin-gallery-shell.livin-gallery-motion-ready .livin-gallery-reveal.livin-gallery-is-visible { opacity: 1; transform: translateY(0); will-change: auto; } @media (hover: hover) and (pointer: fine) { .livin-gallery-card:hover { transform: translateY(-3px); box-shadow: var(--lg-shadow-hover); border-color: #DCCFB9; } .livin-gallery-card:hover .livin-gallery-camera { transform: scale(1.06); } } @media (hover: none), (pointer: coarse) { .livin-gallery-card:hover { transform: none; box-shadow: var(--lg-shadow); } } @media (prefers-reduced-motion: reduce) { .livin-gallery-shell .livin-gallery-reveal, .livin-gallery-shell.livin-gallery-motion-ready .livin-gallery-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .livin-gallery-shell .livin-gallery-card, .livin-gallery-shell .livin-gallery-camera { transition: none !important; } .livin-gallery-shell .livin-gallery-card:hover { transform: none !important; } } .elementor-editor-active .livin-gallery-shell .livin-gallery-reveal { opacity: 1 !important; transform: none !important; } @media (max-width: 1024px) { .livin-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 16px; } .livin-gallery-item, .livin-gallery-item--kitchen, .livin-gallery-item--bathroom, .livin-gallery-item--balcony, .livin-gallery-item--terrace, .livin-gallery-item--entrance, .livin-gallery-item--parking, .livin-gallery-item--area, .livin-gallery-item--room { grid-column: auto / span 1; grid-row: auto; } .livin-gallery-item--large { grid-column: auto / span 2; grid-row: auto; } .livin-gallery-card { height: auto; aspect-ratio: 16 / 10; } .livin-gallery-item--large .livin-gallery-card { aspect-ratio: 16 / 8.6; } } @media (max-width: 900px) { .livin-gallery-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; } .livin-gallery-note { margin: 0; max-width: 60ch; } } @media (max-width: 600px) { .livin-gallery-shell { --lg-pad-x: clamp(16px, 5vw, 20px); --lg-gap: 16px; } .livin-gallery-grid { grid-template-columns: minmax(0, 1fr); } .livin-gallery-item, .livin-gallery-item--large { grid-column: auto / span 1; grid-row: auto; } .livin-gallery-card { aspect-ratio: 16 / 10; padding: 16px; gap: 14px; } .livin-gallery-item--large .livin-gallery-card { aspect-ratio: 4 / 5; } .livin-gallery-camera, .livin-gallery-item--large .livin-gallery-camera { width: 52px; height: 52px; } .livin-gallery-label, .livin-gallery-item--large .livin-gallery-label { font-size: 13px; padding: 9px 16px; max-width: calc(100% - 20px); } } @media (max-width: 380px) { .livin-gallery-placeholder-tag { top: 12px; right: 12px; font-size: 8.5px; padding: 4px 8px; } .livin-gallery-label, .livin-gallery-item--large .livin-gallery-label { font-size: 12.5px; padding: 8px 14px; } } /* ============================================================ LIVIN GALLERY - REAL IMAGES FIX Wklej na sam koniec CSS sekcji galerii ============================================================ */ .livin-gallery-shell .livin-gallery-card--image { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--lg-beige-border) !important; border-radius: var(--lg-radius) !important; background: var(--lg-sand) !important; box-shadow: var(--lg-shadow) !important; line-height: 0 !important; } .livin-gallery-shell .livin-gallery-img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; vertical-align: top !important; border-radius: inherit !important; transition: transform 420ms var(--lg-ease), filter 420ms var(--lg-ease); } @media (hover: hover) and (pointer: fine) { .livin-gallery-shell .livin-gallery-card--image:hover { transform: translateY(-3px); box-shadow: var(--lg-shadow-hover) !important; border-color: #DCCFB9 !important; } .livin-gallery-shell .livin-gallery-card--image:hover .livin-gallery-img { transform: scale(1.035); filter: saturate(1.04) contrast(1.02); } } @media (prefers-reduced-motion: reduce) { .livin-gallery-shell .livin-gallery-card--image, .livin-gallery-shell .livin-gallery-img { transition: none !important; } .livin-gallery-shell .livin-gallery-card--image:hover { transform: none !important; } .livin-gallery-shell .livin-gallery-card--image:hover .livin-gallery-img { transform: none !important; filter: none !important; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-c3d5965 *//* ============================================================ LIVIN LEBA - STAY RULES / ZASADY POBYTU Paste into: outer Section -> Advanced -> Custom CSS ============================================================ */ .elementor-14 .elementor-element.elementor-element-c3d5965, .elementor-14 .elementor-element.elementor-element-c3d5965 > .elementor-container, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-container, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-row, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-column, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-c3d5965 { width: 100% !important; max-width: none !important; background-color: #FFF9F0 !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-c3d5965 > .elementor-container, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-container { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-widget-html, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-c3d5965 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .livin-rules-shell { --lr-warm-white: #FFF9F0; --lr-card: #FFFFFF; --lr-navy: #102A2C; --lr-muted: #5F6F73; --lr-turquoise: #1BAFC2; --lr-deep-sea: #0E6F78; --lr-beige-border: #E7DED0; --lr-max: 1260px; --lr-pad-x: clamp(20px, 5vw, 48px); --lr-pad-y: clamp(80px, 7vw, 112px); --lr-head-gap: clamp(38px, 3.4vw, 44px); --lr-head-max: 680px; --lr-gap: 16px; --lr-radius: 16px; --lr-card-pad: 18px; --lr-card-min-h: 80px; --lr-icon-size: 42px; --lr-icon-radius: 12px; --lr-icon-bg: rgba(27, 175, 194, 0.10); --lr-icon-bg-hover: rgba(27, 175, 194, 0.18); --lr-border-hover: #DCCFB9; --lr-shadow: 0 6px 18px rgba(16, 42, 44, 0.05); --lr-shadow-hover: 0 14px 30px rgba(16, 42, 44, 0.10); --lr-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; display: block; width: 100%; padding: var(--lr-pad-y) var(--lr-pad-x); background-color: var(--lr-warm-white); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--lr-navy); overflow-x: hidden; } .livin-rules-shell, .livin-rules-shell *, .livin-rules-shell *::before, .livin-rules-shell *::after { box-sizing: border-box; } .livin-rules-shell h2, .livin-rules-shell p, .livin-rules-shell ul, .livin-rules-shell li { margin: 0; padding: 0; } .livin-rules-inner { width: 100%; max-width: var(--lr-max); margin: 0 auto; } .livin-rules-head { max-width: var(--lr-head-max); margin: 0 0 var(--lr-head-gap) 0; } .livin-rules-eyebrow { margin: 0 0 12px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lr-deep-sea); line-height: 1.2; } .livin-rules-title { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: var(--lr-navy); } .livin-rules-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--lr-gap); } .livin-rules-item { min-width: 0; } .livin-rules-card { height: 100%; display: flex; align-items: center; gap: 14px; min-height: var(--lr-card-min-h); padding: var(--lr-card-pad); border: 1px solid var(--lr-beige-border); border-radius: var(--lr-radius); background-color: var(--lr-card); box-shadow: var(--lr-shadow); transition: transform 300ms var(--lr-ease), box-shadow 300ms var(--lr-ease), border-color 300ms var(--lr-ease); } .livin-rules-icon { flex: 0 0 var(--lr-icon-size); width: var(--lr-icon-size); height: var(--lr-icon-size); display: flex; align-items: center; justify-content: center; border-radius: var(--lr-icon-radius); background-color: var(--lr-icon-bg); color: var(--lr-deep-sea); transition: background-color 300ms var(--lr-ease); } .livin-rules-icon svg { display: block; } .livin-rules-text { margin: 0; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--lr-navy); overflow-wrap: break-word; } .livin-rules-shell.livin-rules-motion-ready .livin-rules-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--lr-ease), transform 600ms var(--lr-ease); will-change: opacity, transform; } .livin-rules-shell.livin-rules-motion-ready .livin-rules-reveal.livin-rules-is-visible { opacity: 1; transform: translateY(0); will-change: auto; } @media (hover: hover) and (pointer: fine) { .livin-rules-card:hover { transform: translateY(-3px); box-shadow: var(--lr-shadow-hover); border-color: var(--lr-border-hover); } .livin-rules-card:hover .livin-rules-icon { background-color: var(--lr-icon-bg-hover); } } @media (hover: none), (pointer: coarse) { .livin-rules-card:hover { transform: none; box-shadow: var(--lr-shadow); } } @media (prefers-reduced-motion: reduce) { .livin-rules-shell .livin-rules-reveal, .livin-rules-shell.livin-rules-motion-ready .livin-rules-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .livin-rules-shell .livin-rules-card, .livin-rules-shell .livin-rules-icon { transition: none !important; } .livin-rules-shell .livin-rules-card:hover { transform: none !important; } } .elementor-editor-active .livin-rules-shell .livin-rules-reveal { opacity: 1 !important; transform: none !important; } @media (max-width: 1024px) { .livin-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 600px) { .livin-rules-shell { --lr-pad-x: clamp(16px, 5vw, 20px); --lr-card-min-h: 74px; --lr-card-pad: 16px; } .livin-rules-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .livin-rules-head { max-width: 100%; } } @media (max-width: 380px) { .livin-rules-shell { --lr-icon-size: 38px; } .livin-rules-card { gap: 12px; } .livin-rules-text { font-size: 14.5px; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-78e04fd *//* ============================================================ LIVIN LEBA - GUEST REVIEWS / OPINIE GOSCI Paste into: outer Section -> Advanced -> Custom CSS ============================================================ */ .elementor-14 .elementor-element.elementor-element-78e04fd, .elementor-14 .elementor-element.elementor-element-78e04fd > .elementor-container, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-container, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-row, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-column, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-78e04fd { width: 100% !important; max-width: none !important; background-color: #FFF9F0 !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-78e04fd > .elementor-container, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-container { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-widget-html, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-78e04fd .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .livin-reviews-shell { --lrv-warm-white: #FFF9F0; --lrv-card: #FFFFFF; --lrv-navy: #102A2C; --lrv-muted: #5F6F73; --lrv-turquoise: #1BAFC2; --lrv-deep-sea: #0E6F78; --lrv-sun: #F6A623; --lrv-beige-border: #E7DED0; --lrv-max: 1260px; --lrv-pad-x: clamp(20px, 5vw, 48px); --lrv-pad-y: clamp(80px, 7vw, 120px); --lrv-col-gap: clamp(32px, 4vw, 56px); --lrv-title-max: 500px; --lrv-lead-max: 450px; --lrv-rating-gap: clamp(28px, 2.6vw, 34px); --lrv-cards-gap: 18px; --lrv-card-radius: 18px; --lrv-card-pad: clamp(22px, 2vw, 28px); --lrv-card-min-h: 220px; --lrv-icon-size: 42px; --lrv-icon-radius: 12px; --lrv-icon-bg: rgba(27, 175, 194, 0.10); --lrv-icon-bg-hover: rgba(27, 175, 194, 0.18); --lrv-border-hover: #DCCFB9; --lrv-shadow: 0 6px 20px rgba(16, 42, 44, 0.05); --lrv-shadow-hover: 0 16px 34px rgba(16, 42, 44, 0.10); --lrv-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; display: block; width: 100%; padding: var(--lrv-pad-y) var(--lrv-pad-x); background-color: var(--lrv-warm-white); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--lrv-navy); overflow-x: hidden; } .livin-reviews-shell, .livin-reviews-shell *, .livin-reviews-shell *::before, .livin-reviews-shell *::after { box-sizing: border-box; } .livin-reviews-shell h2, .livin-reviews-shell h3, .livin-reviews-shell p, .livin-reviews-shell ul, .livin-reviews-shell li { margin: 0; padding: 0; } .livin-reviews-inner { width: 100%; max-width: var(--lrv-max); margin: 0 auto; } .livin-reviews-grid { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: start; gap: var(--lrv-col-gap); } .livin-reviews-left { min-width: 0; } .livin-reviews-content { min-width: 0; } .livin-reviews-eyebrow { margin: 0 0 12px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lrv-deep-sea); line-height: 1.2; } .livin-reviews-title { margin: 0; max-width: var(--lrv-title-max); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; color: var(--lrv-navy); } .livin-reviews-lead { margin: 18px 0 0 0; max-width: var(--lrv-lead-max); font-size: clamp(14px, 1.05vw, 15.5px); font-weight: 400; line-height: 1.65; color: var(--lrv-muted); } .livin-reviews-rating { display: inline-flex; align-items: center; gap: 16px; margin-top: var(--lrv-rating-gap); max-width: 100%; padding: 14px; border: 1px solid var(--lrv-beige-border); border-radius: var(--lrv-card-radius); background-color: var(--lrv-card); box-shadow: var(--lrv-shadow); transition: box-shadow 300ms var(--lrv-ease), border-color 300ms var(--lrv-ease); } .livin-reviews-score { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; height: 52px; border-radius: 12px; background-color: var(--lrv-deep-sea); color: #FFFFFF; font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; } .livin-reviews-rating-content { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-right: 6px; } .livin-reviews-rating-text { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--lrv-navy); } .livin-reviews-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--lrv-sun); font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; } .livin-reviews-stars-card { margin-top: 16px; font-size: 16px; } .livin-reviews-cards { list-style: none; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lrv-cards-gap); } .livin-reviews-item { min-width: 0; display: flex; } .livin-reviews-card { width: 100%; min-height: var(--lrv-card-min-h); display: flex; flex-direction: column; padding: var(--lrv-card-pad); border: 1px solid var(--lrv-beige-border); border-radius: var(--lrv-card-radius); background-color: var(--lrv-card); box-shadow: var(--lrv-shadow); transition: transform 300ms var(--lrv-ease), box-shadow 300ms var(--lrv-ease), border-color 300ms var(--lrv-ease); } .livin-reviews-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; } .livin-reviews-icon { flex: 0 0 var(--lrv-icon-size); width: var(--lrv-icon-size); height: var(--lrv-icon-size); display: flex; align-items: center; justify-content: center; border-radius: var(--lrv-icon-radius); background-color: var(--lrv-icon-bg); color: var(--lrv-deep-sea); transition: background-color 300ms var(--lrv-ease); } .livin-reviews-icon svg { width: 20px; height: 20px; display: block; } .livin-reviews-card-title { margin: 0; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--lrv-navy); overflow-wrap: break-word; } .livin-reviews-quote { margin: 20px 0 0 0; font-size: 14.5px; font-weight: 400; line-height: 1.6; color: var(--lrv-muted); overflow-wrap: break-word; } .livin-reviews-footer { margin: auto 0 0 0; padding-top: 16px; border-top: 1px solid var(--lrv-beige-border); font-size: 10.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; color: var(--lrv-muted); } .livin-reviews-stars-card + .livin-reviews-footer { margin-top: 20px; } .livin-reviews-shell.livin-reviews-motion-ready .livin-reviews-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--lrv-ease), transform 600ms var(--lrv-ease); will-change: opacity, transform; } .livin-reviews-shell.livin-reviews-motion-ready .livin-reviews-reveal.livin-reviews-is-visible { opacity: 1; transform: translateY(0); will-change: auto; } @media (hover: hover) and (pointer: fine) { .livin-reviews-card:hover { transform: translateY(-3px); box-shadow: var(--lrv-shadow-hover); border-color: var(--lrv-border-hover); } .livin-reviews-card:hover .livin-reviews-icon { background-color: var(--lrv-icon-bg-hover); } .livin-reviews-rating:hover { box-shadow: var(--lrv-shadow-hover); border-color: var(--lrv-border-hover); } } @media (hover: none), (pointer: coarse) { .livin-reviews-card:hover { transform: none; box-shadow: var(--lrv-shadow); } } @media (prefers-reduced-motion: reduce) { .livin-reviews-shell .livin-reviews-reveal, .livin-reviews-shell.livin-reviews-motion-ready .livin-reviews-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .livin-reviews-shell .livin-reviews-card, .livin-reviews-shell .livin-reviews-icon, .livin-reviews-shell .livin-reviews-rating { transition: none !important; } .livin-reviews-shell .livin-reviews-card:hover { transform: none !important; } } .elementor-editor-active .livin-reviews-shell .livin-reviews-reveal { opacity: 1 !important; transform: none !important; } @media (max-width: 1200px) { .livin-reviews-shell { --lrv-cards-gap: 16px; --lrv-card-min-h: 210px; } } @media (max-width: 900px) { .livin-reviews-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 40px); } .livin-reviews-title, .livin-reviews-lead { max-width: 640px; } } @media (max-width: 600px) { .livin-reviews-shell { --lrv-pad-x: clamp(16px, 5vw, 20px); --lrv-card-min-h: 0; --lrv-card-pad: 20px; } .livin-reviews-cards { grid-template-columns: minmax(0, 1fr); } .livin-reviews-rating { display: flex; width: 100%; } } @media (max-width: 380px) { .livin-reviews-shell { --lrv-icon-size: 38px; } .livin-reviews-score { width: 52px; height: 48px; font-size: 19px; } .livin-reviews-rating { gap: 13px; } .livin-reviews-rating-text { font-size: 13.5px; } .livin-reviews-card-head { gap: 12px; } .livin-reviews-stars { font-size: 15px; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-5e17356 *//* ============================================================ LIVIN LEBA - FAQ / NAJCZESTSZE PYTANIA Paste into: outer Section -> Advanced -> Custom CSS ============================================================ */ /* ------------------------------------------------------------ Elementor shell reset - scoped to this section only ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356, .elementor-14 .elementor-element.elementor-element-5e17356 > .elementor-container, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-container, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-row, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-column, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-element-populated { margin: 0 !important; padding: 0 !important; } .elementor-14 .elementor-element.elementor-element-5e17356 { width: 100% !important; max-width: none !important; background-color: #FFF9F0 !important; overflow: visible !important; } .elementor-14 .elementor-element.elementor-element-5e17356 > .elementor-container, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-container { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-column { width: 100% !important; max-width: 100% !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-widget:not(:last-child) { margin-bottom: 0 !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-widget-html, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-widget-html > .elementor-widget-container, .elementor-14 .elementor-element.elementor-element-5e17356 .elementor-widget-html .elementor-widget-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------------ Section tokens ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell { --lfq-warm-white: #FFF9F0; --lfq-card: #FFFFFF; --lfq-navy: #102A2C; --lfq-muted: #5F6F73; --lfq-deep-sea: #0E6F78; --lfq-beige-border: #E7DED0; --lfq-max: 1260px; --lfq-box-max: 860px; --lfq-pad-x: clamp(20px, 5vw, 48px); --lfq-pad-y: clamp(86px, 7vw, 122px); --lfq-head-gap: clamp(40px, 3.5vw, 48px); --lfq-box-pad-x: 26px; --lfq-box-radius: 18px; --lfq-question-pad-y: 22px; --lfq-answer-pad-bottom: 22px; --lfq-panel-duration: 300ms; --lfq-ease: cubic-bezier(0.22, 1, 0.36, 1); --lfq-shadow: 0 8px 26px rgba(16, 42, 44, 0.05); box-sizing: border-box; display: block; width: 100%; padding: var(--lfq-pad-y) var(--lfq-pad-x); background-color: var(--lfq-warm-white); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--lfq-navy); overflow-x: hidden; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell *, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell *::before, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell *::after { box-sizing: border-box; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell h2, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell p, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell ul, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell li, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell button { margin: 0; padding: 0; } /* ------------------------------------------------------------ Layout ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-inner { width: 100%; max-width: var(--lfq-max); margin: 0 auto; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-head { max-width: 780px; margin: 0 auto var(--lfq-head-gap) auto; text-align: center; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-eyebrow { margin: 0 0 13px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lfq-deep-sea); line-height: 1.2; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-title { margin: 0; font-size: clamp(31px, 3.4vw, 44px); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; color: var(--lfq-navy); } /* ------------------------------------------------------------ FAQ box ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-box { width: 100%; max-width: var(--lfq-box-max); margin: 0 auto; padding: 0 var(--lfq-box-pad-x); border: 1px solid var(--lfq-beige-border); border-radius: var(--lfq-box-radius); background-color: var(--lfq-card); box-shadow: var(--lfq-shadow); overflow: hidden; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-list { list-style: none; margin: 0; padding: 0; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-item { margin: 0; padding: 0; border-bottom: 1px solid var(--lfq-beige-border); } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-item:last-child { border-bottom: 1px solid var(--lfq-beige-border); } /* ------------------------------------------------------------ Question button - hard reset against Astra / Elementor ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:hover, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:focus, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:active { -webkit-appearance: none !important; appearance: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: var(--lfq-question-pad-y) 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; outline: none; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; color: var(--lfq-navy) !important; text-align: left !important; text-decoration: none !important; cursor: pointer; transition: color 240ms var(--lfq-ease); } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question-text { display: block; min-width: 0; font-size: 16.5px; font-weight: 600; line-height: 1.42; color: inherit; overflow-wrap: break-word; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-chevron { flex: 0 0 18px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--lfq-muted); transition: transform 300ms var(--lfq-ease), color 240ms var(--lfq-ease); } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-chevron svg { display: block; width: 18px; height: 18px; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-item.livin-faq-is-open .livin-faq-chevron { transform: rotate(180deg); color: var(--lfq-deep-sea); } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:focus-visible { outline: 2px solid rgba(14, 111, 120, 0.45) !important; outline-offset: 4px; border-radius: 8px !important; } /* ------------------------------------------------------------ Answer panel ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-panel { height: auto; overflow: hidden; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-answer { margin: 0; padding: 0 0 var(--lfq-answer-pad-bottom) 0; max-width: 68ch; font-size: 15px; font-weight: 400; line-height: 1.68; color: var(--lfq-muted); overflow-wrap: break-word; } /* JS accordion state */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-js-ready .livin-faq-panel { height: 0; visibility: hidden; transition: height var(--lfq-panel-duration) var(--lfq-ease), visibility 0s linear var(--lfq-panel-duration); } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-js-ready .livin-faq-item.livin-faq-is-open .livin-faq-panel { visibility: visible; transition: height var(--lfq-panel-duration) var(--lfq-ease), visibility 0s linear 0s; } /* ------------------------------------------------------------ Entrance reveal ------------------------------------------------------------ */ .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-motion-ready .livin-faq-reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--lfq-ease), transform 600ms var(--lfq-ease); will-change: opacity, transform; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-motion-ready .livin-faq-reveal.livin-faq-is-visible { opacity: 1; transform: translateY(0); will-change: auto; } /* ------------------------------------------------------------ Hover ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:hover { color: var(--lfq-deep-sea) !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:hover .livin-faq-chevron { color: var(--lfq-deep-sea); } } /* ------------------------------------------------------------ Reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell .livin-faq-reveal, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-motion-ready .livin-faq-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell .livin-faq-panel, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-js-ready .livin-faq-panel, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell.livin-faq-js-ready .livin-faq-item.livin-faq-is-open .livin-faq-panel { transition: none !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell .livin-faq-question, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell .livin-faq-chevron { transition: none !important; } } /* ------------------------------------------------------------ Elementor editor ------------------------------------------------------------ */ .elementor-editor-active .livin-faq-shell .livin-faq-reveal { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (max-width: 900px) { .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell { --lfq-box-max: 100%; } } @media (max-width: 600px) { .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell { --lfq-pad-x: clamp(16px, 5vw, 20px); --lfq-pad-y: 72px; --lfq-box-pad-x: 18px; --lfq-question-pad-y: 18px; --lfq-answer-pad-bottom: 18px; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-head { margin-bottom: 34px; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-title { font-size: clamp(28px, 8vw, 36px); } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:hover, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:focus, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:active { gap: 14px !important; align-items: flex-start !important; min-height: 56px !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-chevron { margin-top: 2px; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question-text { font-size: 15.5px; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-answer { font-size: 14.5px; } } @media (max-width: 380px) { .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-shell { --lfq-box-pad-x: 16px; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:hover, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:focus, .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question:active { gap: 12px !important; } .elementor-14 .elementor-element.elementor-element-5e17356 .livin-faq-question-text { font-size: 15px; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-b8bbe4d *//* ========================================================== LIVIN LEBA - SEKCJA KONTAKTOWA #kontakt Wklej do Custom CSS zewnetrznej sekcji Zewnetrzna sekcja: ID kontakt, klasa livin-contact-shell ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d, .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-shell, .livin-contact-shell{ --lc-warm-white:#FFF9F0; --lc-sand:#F5EFE4; --lc-white:#FFFFFF; --lc-navy:#102A2C; --lc-muted:#5F6F73; --lc-turquoise:#1BAFC2; --lc-deep-sea:#0E6F78; --lc-sun:#F6A623; --lc-sun-hover:#E89516; --lc-border:#E7DED0; --lc-eyebrow:#7ED4E0; --lc-error:#C0392B; --lc-max:1260px; --lc-r-lg:22px; --lc-r-md:18px; --lc-r-sm:14px; --lc-shadow-card:0 10px 26px rgba(16,42,44,.06); --lc-shadow-hover:0 18px 38px rgba(16,42,44,.12); --lc-shadow-white:0 26px 60px rgba(6,40,44,.28); --lc-font:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin:0 !important; padding:0 !important; background-color:var(--lc-warm-white); overflow-x:hidden; overflow-x:clip; } /* Elementor reset */ .elementor-14 .elementor-element.elementor-element-b8bbe4d > .elementor-container, .elementor-14 .elementor-element.elementor-element-b8bbe4d > .e-con-inner{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-container, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-row, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-column, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-element-populated, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-widget, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-widget-container{ margin:0 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-column-wrap, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-element-populated, .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-widget-container{ padding:0 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .elementor-widget:not(:last-child){ margin-bottom:0 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero *, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info *, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container *, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info{ box-sizing:border-box; } /* ========================================================== 1. GORNY BLOK CTA ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero{ position:relative; isolation:isolate; width:100%; padding:clamp(56px,7vw,96px) 24px clamp(60px,7vw,100px); overflow:hidden; background: radial-gradient(120% 130% at 6% 4%, rgba(27,175,194,.30) 0%, rgba(27,175,194,0) 58%), radial-gradient(110% 120% at 96% 96%, rgba(16,42,44,.55) 0%, rgba(16,42,44,0) 62%), linear-gradient(135deg, #0E6F78 0%, #0C606B 52%, #0A4E58 100%); font-family:var(--lc-font); text-align:center; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__inner{ width:100%; max-width:var(--lc-max); margin:0 auto; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__eyebrow{ margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--lc-eyebrow); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__title{ max-width:940px; margin:0 auto 16px; font-family:var(--lc-font); font-size:clamp(30px,4.4vw,56px); line-height:1.08; font-weight:800; letter-spacing:-.02em; color:#FFFFFF; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__accent{ display:inline; color:var(--lc-sun); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__lead{ max-width:640px; margin:0 auto clamp(28px,3.4vw,40px); font-size:clamp(15px,1.15vw,17px); line-height:1.65; font-weight:500; color:rgba(255,255,255,.84); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking{ max-width:960px; margin:0 auto; padding:clamp(28px,3.4vw,44px) clamp(22px,3vw,40px); background:var(--lc-white); border:1px solid rgba(231,222,208,.9); border-radius:var(--lc-r-lg); box-shadow:var(--lc-shadow-white); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__badge{ display:inline-block; margin:0 0 14px; padding:6px 14px; border-radius:999px; background:var(--lc-sand); color:var(--lc-deep-sea); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-title{ margin:0 0 8px; font-size:clamp(18px,1.6vw,22px); font-weight:700; color:var(--lc-navy); line-height:1.3; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-text{ max-width:540px; margin:0 auto; font-size:14.5px; line-height:1.6; font-weight:500; color:var(--lc-muted); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-cta{ display:inline-flex; align-items:center; justify-content:center; min-width:240px; min-height:56px; margin:24px auto 0; padding:0 28px; border:0; border-radius:16px; background:var(--lc-sun); color:var(--lc-navy) !important; font-family:var(--lc-font); font-size:16px; font-weight:700; line-height:1.2; text-align:center; text-decoration:none !important; box-shadow:0 12px 26px rgba(246,166,35,.26); transition:background-color .22s ease, transform .22s ease, box-shadow .22s ease; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-cta:focus-visible{ outline:3px solid rgba(126,212,224,.68); outline-offset:4px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__microcopy{ margin:18px 0 0; font-size:13px; line-height:1.6; font-weight:500; color:rgba(255,255,255,.74); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__microcopy span{ margin:0 6px; color:rgba(255,255,255,.45); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:960px; margin:clamp(28px,3.2vw,40px) auto 0; padding:0; list-style:none; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel{ margin:0; min-width:0; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-link{ display:flex; align-items:center; gap:14px; min-height:76px; padding:16px 18px; border-radius:var(--lc-r-md); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); text-align:left; text-decoration:none !important; transition:transform .25s ease, background-color .25s ease, border-color .25s ease; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-icon{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:var(--lc-white); color:var(--lc-deep-sea); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-icon svg{ width:20px; height:20px; display:block; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-body{ display:flex; flex-direction:column; gap:3px; min-width:0; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-label{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.70); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-value{ font-size:15px; font-weight:700; line-height:1.35; color:#FFFFFF; overflow-wrap:anywhere; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-link:focus-visible{ outline:3px solid var(--lc-sun); outline-offset:3px; } /* ========================================================== 2. DOLNY BLOK - SIATKA ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-grid{ width:100% !important; max-width:calc(var(--lc-max) + 48px) !important; margin:0 auto !important; padding:clamp(54px,6vw,88px) 24px clamp(58px,7vw,104px) !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-grid > .elementor-container, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-grid > .e-con-inner{ width:100% !important; max-width:100% !important; margin:0 auto !important; padding:0 !important; align-items:flex-start !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-col--info > .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form > .elementor-widget-wrap, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-col--info > .e-con-inner, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form > .e-con-inner{ padding:0 !important; } @media (min-width:1025px){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-col--info{ padding-right:clamp(16px,2vw,30px) !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form{ padding-left:clamp(16px,2vw,30px) !important; } } /* ========================================================== 3. LEWA KOLUMNA ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info{ width:100%; font-family:var(--lc-font); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__head{ margin:0 0 clamp(22px,2.6vw,30px); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__eyebrow{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--lc-turquoise); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__title{ margin:0 0 12px; font-family:var(--lc-font); font-size:clamp(28px,3.1vw,42px); line-height:1.14; font-weight:800; letter-spacing:-.02em; color:var(--lc-navy); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__lead{ max-width:470px; margin:0; font-size:15.5px; line-height:1.65; font-weight:500; color:var(--lc-muted); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__list{ display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card{ margin:0; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link{ display:flex; align-items:center; gap:16px; min-height:82px; padding:18px 20px; background:var(--lc-white); border:1px solid var(--lc-border); border-radius:var(--lc-r-md); box-shadow:var(--lc-shadow-card); text-decoration:none !important; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__icon{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:var(--lc-sand); color:var(--lc-deep-sea); transition:background-color .25s ease, color .25s ease; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__icon svg{ width:21px; height:21px; display:block; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__body{ display:flex; flex-direction:column; gap:4px; min-width:0; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__label{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lc-muted); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__value{ font-size:16px; font-weight:700; line-height:1.4; color:var(--lc-navy); overflow-wrap:anywhere; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link:focus-visible{ outline:3px solid var(--lc-deep-sea); outline-offset:3px; } /* ========================================================== 4. WPForms - prawa kolumna ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container{ width:100% !important; max-width:100% !important; margin:0 !important; padding:clamp(24px,2.6vw,36px) !important; background:var(--lc-white) !important; border:1px solid var(--lc-border) !important; border-radius:var(--lc-r-md) !important; box-shadow:var(--lc-shadow-card) !important; font-family:var(--lc-font) !important; box-sizing:border-box !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container-full{ --wpforms-field-border-radius:14px; --wpforms-field-background-color:#FFF9F0; --wpforms-field-border-color:#E7DED0; --wpforms-field-text-color:#102A2C; --wpforms-label-color:#102A2C; --wpforms-label-sublabel-color:#5F6F73; --wpforms-label-error-color:#C0392B; --wpforms-button-background-color:#F6A623; --wpforms-button-text-color:#102A2C; --wpforms-button-border-radius:16px; --wpforms-field-size-large-height:52px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-form{ margin:0 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field{ padding:0 0 18px 0 !important; clear:none !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field:last-of-type{ padding-bottom:6px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-label, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-label-inline{ font-family:var(--lc-font) !important; font-size:14px !important; font-weight:600 !important; line-height:1.4 !important; color:var(--lc-navy) !important; margin:0 0 8px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-required-label{ color:var(--lc-sun) !important; font-weight:700 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-sublabel{ font-size:12px !important; font-weight:500 !important; color:var(--lc-muted) !important; margin-top:6px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="text"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="email"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="tel"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="url"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="number"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="date"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input[type="password"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container select, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container textarea{ width:100% !important; max-width:100% !important; min-height:52px !important; padding:14px 16px !important; box-sizing:border-box !important; font-family:var(--lc-font) !important; font-size:15px !important; font-weight:500 !important; color:var(--lc-navy) !important; background-color:var(--lc-warm-white) !important; border:1px solid var(--lc-border) !important; border-radius:var(--lc-r-sm) !important; box-shadow:none !important; outline:none !important; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container textarea{ min-height:140px !important; line-height:1.6 !important; resize:vertical !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input::placeholder, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container textarea::placeholder{ color:var(--lc-muted) !important; opacity:.75; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input:focus, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container select:focus, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container textarea:focus{ background-color:var(--lc-white) !important; border-color:var(--lc-deep-sea) !important; box-shadow:0 0 0 3px rgba(27,175,194,.18) !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-submit-container{ padding:6px 0 0 !important; text-align:left !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container button[type="submit"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-submit{ display:block !important; width:100% !important; min-height:56px !important; padding:16px 24px !important; border:0 !important; border-radius:16px !important; background-color:var(--lc-sun) !important; color:var(--lc-navy) !important; font-family:var(--lc-font) !important; font-size:16px !important; font-weight:700 !important; line-height:1.2 !important; text-decoration:none !important; text-transform:none !important; cursor:pointer; box-shadow:0 12px 26px rgba(246,166,35,.26); transition:background-color .22s ease, transform .22s ease, box-shadow .22s ease; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container button[type="submit"]:focus-visible{ outline:3px solid var(--lc-deep-sea); outline-offset:3px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container label.wpforms-error, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container em.wpforms-error{ display:block !important; margin-top:7px !important; font-family:var(--lc-font) !important; font-size:12.5px !important; font-weight:600 !important; font-style:normal !important; color:var(--lc-error) !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input.wpforms-error, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container select.wpforms-error, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container textarea.wpforms-error{ border-color:var(--lc-error) !important; box-shadow:0 0 0 3px rgba(192,57,43,.12) !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-confirmation-container-full, .elementor-14 .elementor-element.elementor-element-b8bbe4d div[submit-success] > .wpforms-confirmation-container-full{ margin:0 !important; padding:20px 22px !important; background:var(--lc-sand) !important; border:1px solid var(--lc-border) !important; border-radius:var(--lc-r-md) !important; color:var(--lc-navy) !important; font-family:var(--lc-font) !important; font-size:15px !important; font-weight:600 !important; } /* ========================================================== 5. Hover ========================================================== */ @media (hover:hover) and (pointer:fine){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-cta:hover{ background:var(--lc-sun-hover); color:var(--lc-navy) !important; transform:translateY(-2px); box-shadow:0 16px 30px rgba(246,166,35,.34); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-link:hover{ transform:translateY(-3px); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link:not(.livin-contact-card__link--static):hover{ transform:translateY(-3px); box-shadow:var(--lc-shadow-hover); border-color:#D9C7A8; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link:not(.livin-contact-card__link--static):hover .livin-contact-card__icon{ background:var(--lc-sun); color:var(--lc-navy); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container button[type="submit"]:hover{ background-color:var(--lc-sun-hover) !important; transform:translateY(-2px); box-shadow:0 16px 30px rgba(246,166,35,.34); } } /* ========================================================== 6. Responsywnosc ========================================================== */ @media (max-width:1024px){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channels{ grid-template-columns:1fr; max-width:620px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-col--info, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form{ width:100% !important; padding-left:0 !important; padding-right:0 !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form{ margin-top:32px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__lead{ max-width:100%; } } @media (max-width:767px){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero{ padding:52px 20px 56px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-grid{ padding:48px 20px 56px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking{ padding:24px 20px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__microcopy{ font-size:12.5px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link{ padding:16px; gap:14px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container{ padding:22px 18px !important; } } @media (max-width:480px){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero{ padding:44px 18px 48px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-grid{ padding:44px 18px 52px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__eyebrow{ letter-spacing:.16em; font-size:11px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__title{ font-size:clamp(24px,7vw,32px); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-cta{ width:100%; min-width:0; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-info__title{ font-size:clamp(24px,6.6vw,30px); } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-icon{ width:38px; height:38px; border-radius:11px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__icon{ width:42px; height:42px; } } @media (max-width:360px){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero{ padding:40px 16px 44px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-grid{ padding:40px 16px 48px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking{ padding:20px 16px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link{ padding:14px; gap:12px; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container{ padding:18px 14px !important; } } /* ========================================================== 7. Reduced motion ========================================================== */ @media (prefers-reduced-motion:reduce){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-cta, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-link, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__icon, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container input, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container select, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container textarea, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container button[type="submit"]{ transition:none !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__channel-link:hover, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-hero__booking-cta:hover, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-card__link:hover, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container button[type="submit"]:hover{ transform:none !important; } } /* ========================================================== WPForms - RODO checkbox FIX Wklej na koncu CSS sekcji kontaktowej ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox{ padding:0 0 22px 0 !important; margin:0 !important; } /* ukryj glowna etykiete pola, jezeli jest wlaczona */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox > label.wpforms-field-label{ display:none !important; } /* reset listy */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox ul{ margin:0 !important; padding:0 !important; list-style:none !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox li{ display:grid !important; grid-template-columns:22px minmax(0, 1fr) !important; align-items:start !important; column-gap:14px !important; width:100% !important; margin:0 !important; padding:16px 18px !important; border:1px solid var(--lc-border) !important; border-radius:var(--lc-r-sm) !important; background:var(--lc-warm-white) !important; box-shadow:none !important; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } /* input checkbox */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox input[type="checkbox"]{ appearance:none !important; -webkit-appearance:none !important; grid-column:1 !important; width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; margin:1px 0 0 0 !important; padding:0 !important; border:1.5px solid var(--lc-sun) !important; border-radius:6px !important; background:#FFFFFF !important; box-shadow:none !important; cursor:pointer; position:relative !important; } /* checkbox zaznaczony */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox input[type="checkbox"]:checked{ border-color:var(--lc-sun) !important; background-color:var(--lc-sun) !important; background-image:url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23102A2C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:15px 15px !important; } /* tekst checkboxa */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox label.wpforms-field-label-inline{ grid-column:2 !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; font-family:var(--lc-font) !important; font-size:13.5px !important; font-weight:500 !important; line-height:1.55 !important; color:var(--lc-muted) !important; cursor:pointer; word-break:normal !important; overflow-wrap:normal !important; white-space:normal !important; } /* link polityki */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox label.wpforms-field-label-inline a{ color:var(--lc-deep-sea) !important; font-weight:700 !important; text-decoration:none !important; white-space:normal !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox label.wpforms-field-label-inline a:hover{ color:var(--lc-sun-hover) !important; text-decoration:none !important; } /* hover calego boxa */ @media (hover:hover) and (pointer:fine){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox li:hover{ background:#FFFFFF !important; border-color:#D9C7A8 !important; box-shadow:0 8px 22px rgba(16,42,44,.06) !important; } } /* focus */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox input[type="checkbox"]:focus-visible{ outline:none !important; box-shadow:0 0 0 3px rgba(27,175,194,.20) !important; } /* blad walidacji */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox label.wpforms-error, .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox em.wpforms-error{ display:block !important; margin:8px 0 0 0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:var(--lc-error) !important; font-family:var(--lc-font) !important; font-size:12.5px !important; font-weight:600 !important; line-height:1.4 !important; } /* mobile */ @media (max-width:480px){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox li{ grid-template-columns:20px minmax(0, 1fr) !important; column-gap:12px !important; padding:14px 15px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox input[type="checkbox"]{ width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .wpforms-container .wpforms-field-checkbox label.wpforms-field-label-inline{ font-size:13px !important; line-height:1.55 !important; } } /* ========================================================== WPForms - submit button hover FIX jak reszta CTA Wklej na samym koncu CSS kontaktu ========================================================== */ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button[type="submit"], .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container .wpforms-submit, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button.wpforms-submit{ display:block !important; width:100% !important; min-height:56px !important; padding:16px 24px !important; border:0 !important; border-radius:16px !important; background:#F6A623 !important; background-color:#F6A623 !important; color:#102A2C !important; font-family:var(--lc-font) !important; font-size:16px !important; font-weight:700 !important; line-height:1.2 !important; text-align:center !important; text-decoration:none !important; text-transform:none !important; cursor:pointer !important; box-shadow:0 12px 26px rgba(246,166,35,.26) !important; transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button[type="submit"]:hover, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container .wpforms-submit:hover, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button.wpforms-submit:hover, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button[type="submit"]:focus, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container .wpforms-submit:focus, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button.wpforms-submit:focus{ background:#E89516 !important; background-color:#E89516 !important; color:#102A2C !important; border:0 !important; transform:translateY(-2px) !important; box-shadow:0 16px 30px rgba(246,166,35,.34) !important; outline:none !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button[type="submit"]:active, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container .wpforms-submit:active, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button.wpforms-submit:active{ background:#E89516 !important; background-color:#E89516 !important; color:#102A2C !important; transform:translateY(0) !important; box-shadow:0 10px 22px rgba(246,166,35,.24) !important; } .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button[type="submit"]:focus-visible, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container .wpforms-submit:focus-visible, .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-form .wpforms-container button.wpforms-submit:focus-visible{ outline:3px solid rgba(27,175,194,.35) !important; outline-offset:3px !important; } /* ========================================================== LIVIN CONTACT - SCROLL REVEAL ANIMATION - FINAL FIX Wklej na samym koncu CSS sekcji kontaktowej ========================================================== */ /* Stan ukryty wlacza sie dopiero wtedy, gdy JS doda klase do sekcji */ .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-reveal, .livin-contact-shell.livin-contact-motion-ready .livin-contact-reveal{ opacity:0; transform:translateY(20px); transition: opacity 620ms cubic-bezier(.22,1,.36,1), transform 620ms cubic-bezier(.22,1,.36,1); will-change:opacity, transform; } /* Stan widoczny */ .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-reveal.livin-contact-is-visible, .livin-contact-shell.livin-contact-motion-ready .livin-contact-reveal.livin-contact-is-visible{ opacity:1 !important; transform:translateY(0) !important; will-change:auto; } /* Booking box - lekko bardziej premium */ .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-hero__booking.livin-contact-reveal, .livin-contact-shell.livin-contact-motion-ready .livin-contact-hero__booking.livin-contact-reveal{ transform:translateY(24px) scale(.985); } .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-hero__booking.livin-contact-reveal.livin-contact-is-visible, .livin-contact-shell.livin-contact-motion-ready .livin-contact-hero__booking.livin-contact-reveal.livin-contact-is-visible{ transform:translateY(0) scale(1) !important; } /* Formularz - wejscie bez psucia WPForms */ .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-form .wpforms-container.livin-contact-reveal, .livin-contact-shell.livin-contact-motion-ready .livin-contact-form .wpforms-container.livin-contact-reveal{ transform:translateY(24px); } .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-form .wpforms-container.livin-contact-reveal.livin-contact-is-visible, .livin-contact-shell.livin-contact-motion-ready .livin-contact-form .wpforms-container.livin-contact-reveal.livin-contact-is-visible{ transform:translateY(0) !important; } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ .elementor-14 .elementor-element.elementor-element-b8bbe4d .livin-contact-reveal, .elementor-14 .elementor-element.elementor-element-b8bbe4d.livin-contact-motion-ready .livin-contact-reveal, .livin-contact-shell .livin-contact-reveal, .livin-contact-shell.livin-contact-motion-ready .livin-contact-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* Elementor editor - zawsze widoczne */ .elementor-editor-active .livin-contact-shell .livin-contact-reveal, .elementor-editor-active .livin-contact-shell.livin-contact-motion-ready .livin-contact-reveal{ opacity:1 !important; transform:none !important; }/* End custom CSS */