/* ========================================================================== Larmed — Landing Page "Laryngologia" JEDEN plik CSS (bez Tailwind CDN/buildu — layout utility classes na dole pliku to jednorazowo wygenerowany, statyczny zestaw, wklejony na stałe). Każda reguła jest spięta na #lp-larmed (to id na tego szablonu), żeby żadna stara/globalna CSS-ka z Customizera czy wtyczek (np. reguły typu `a:link, a:hover { background: none }` albo `button, input[type=submit] { background-color: green; float: right }`) nie mogła nadpisać naszego designu — specyficzność ID zawsze wygrywa. ========================================================================== */ :root { --brand-blue: #17A8E1; --brand-blue-dark: #0E7CA8; --brand-blue-light: #E6F6FC; --brand-green: #73B72A; --brand-green-dark: #588F1E; --brand-green-light: #EEF7E4; --ink: #0F2733; --ink-soft: #4B6472; --surface-tint: #F4F9FB; --radius-swoosh: 2.5rem 0.5rem 2.5rem 0.5rem; --radius-swoosh-sm: 1.5rem 0.375rem 1.5rem 0.375rem; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- Bazowy reset (dawniej robił to za nas Tailwind "preflight" — teraz robimy to sami, ręcznie, spięte na #lp-larmed). -------------------------------------------------------------------------- */ #lp-larmed, #lp-larmed *, #lp-larmed *::before, #lp-larmed *::after { box-sizing: border-box; } #lp-larmed h1, #lp-larmed h2, #lp-larmed h3, #lp-larmed h4, #lp-larmed h5, #lp-larmed h6, #lp-larmed p, #lp-larmed ul, #lp-larmed ol, #lp-larmed figure, #lp-larmed blockquote { margin: 0; padding: 0; } #lp-larmed ul, #lp-larmed ol { list-style: none; } #lp-larmed img, #lp-larmed svg { display: block; max-width: 100%; } #lp-larmed button { font-family: inherit; font-size: 100%; margin: 0; } /* Stara CSS-ka z Customizera ma regułę "a:hover { background: teal; border-bottom: ... }" bez żadnego scope'owania — zeruje ją tutaj dla całego #lp-larmed, zanim nasze właściwe komponenty (.btn-pill, .nav-link itd.) nałożą swój wygląd. UWAGA: celowo BEZ dopisanych :link/:hover/:active — dopisanie ich podnosi specyficzność powyżej naszych własnych klas typu .btn-pill--primary i znowu je nadpisuje. Samo "#lp-larmed a" (ID + element, bez klasy) już i tak wygrywa z "a:hover" ze starej CSS-ki (ID zawsze bije brak ID), a jest mniej specyficzne niż nasze klasy komponentów, więc te wygrywają dalej. */ #lp-larmed a { background: none; border: 0; text-decoration: none; color: inherit; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #lp-larmed *, #lp-larmed *::before, #lp-larmed *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } #lp-larmed { font-feature-settings: "cv11", "ss01"; } #lp-larmed .text-balance { text-wrap: balance; } /* font-600/700/800 w HTML-u to nie są prawdziwe klasy Tailwind (powinno być font-semibold/font-bold/font-extrabold) — dopisane tu ręcznie, żeby grubości czcionek faktycznie działały. */ #lp-larmed .font-600 { font-weight: 600; } #lp-larmed .font-700 { font-weight: 700; } #lp-larmed .font-800 { font-weight: 800; } #lp-larmed ::selection { background: var(--brand-blue); color: #fff; } /* -------------------------------------------------------------------------- Nagłówek / nawigacja -------------------------------------------------------------------------- */ #lp-larmed .site-header { background: rgba(255, 255, 255, 0); transition: background-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), backdrop-filter 0.35s; } #lp-larmed .site-header.is-scrolled { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(15, 39, 51, 0.06), 0 12px 24px -16px rgba(15, 39, 51, 0.12); } #lp-larmed .nav-link { position: relative; color: var(--ink); padding-block: 4px; transition: color 0.2s ease; } #lp-larmed .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--brand-blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease-out-expo); } #lp-larmed .nav-link:hover { color: var(--brand-blue); } #lp-larmed .nav-link:hover::after, #lp-larmed .nav-link.is-active::after { transform: scaleX(1); } #lp-larmed .nav-link.is-active { color: var(--brand-blue); } #lp-larmed .hamburger { display: block; width: 22px; height: 16px; position: relative; } #lp-larmed .hamburger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease-out-expo), opacity 0.2s ease, top 0.3s var(--ease-out-expo); } #lp-larmed .hamburger span:nth-child(1) { top: 0; } #lp-larmed .hamburger span:nth-child(2) { top: 7px; } #lp-larmed .hamburger span:nth-child(3) { top: 14px; } #lp-larmed #menuToggle[aria-expanded="true"] .hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); } #lp-larmed #menuToggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; } #lp-larmed #menuToggle[aria-expanded="true"] .hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); } #lp-larmed .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 20px 40px -16px rgba(15, 39, 51, 0.18); padding: 1.5rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 0.25rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s var(--ease-out-expo), opacity 0.3s ease; } #lp-larmed .mobile-menu.is-open { max-height: 480px; opacity: 1; } #lp-larmed .nav-link-mobile { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); padding: 0.75rem 0.25rem; border-bottom: 1px solid rgba(15, 39, 51, 0.06); } /* -------------------------------------------------------------------------- Elementy wspólne: eyebrow, przyciski -------------------------------------------------------------------------- */ #lp-larmed .eyebrow { display: inline-flex; align-items: center; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue-dark); } #lp-larmed .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand-green); border-radius: 2px; margin-right: 10px; } #lp-larmed .eyebrow--center { justify-content: center; } #lp-larmed .eyebrow--onlight { color: #8FD9F5; } #lp-larmed .eyebrow--onlight::before { background: var(--brand-green); } #lp-larmed .btn-pill { display: inline-flex; align-items: center; gap: 0.55rem; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px; padding: 0.8rem 1.6rem; border-radius: 999px; white-space: nowrap; border: 0; cursor: pointer; transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), background-color 0.2s ease, color 0.2s ease; will-change: transform; } #lp-larmed .btn-pill--lg { padding: 0.95rem 2rem; font-size: 16px; } #lp-larmed .btn-pill--xl { padding: 1.15rem 2.5rem; font-size: 17px; } #lp-larmed .btn-pill--primary { background: var(--brand-blue); color: #fff; box-shadow: 0 6px 16px -4px rgba(23, 168, 225, 0.55); } #lp-larmed .btn-pill--primary:hover { background: var(--brand-blue-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(23, 168, 225, 0.6); } #lp-larmed .btn-pill--primary:active { transform: translateY(0); } #lp-larmed .btn-pill--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(15, 39, 51, 0.15); } #lp-larmed .btn-pill--ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue-dark); transform: translateY(-2px); } #lp-larmed .btn-pill--outline { background: transparent; color: var(--brand-blue-dark); border: 1.5px solid var(--brand-blue); } #lp-larmed .btn-pill--outline:hover { background: var(--brand-blue); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(23, 168, 225, 0.45); } #lp-larmed .btn-pill--onblue { background: #fff; color: var(--brand-blue-dark); } #lp-larmed .section-cta-bar--green .btn-pill--onblue { color: var(--brand-green-dark); } #lp-larmed .btn-pill--onblue:hover { color: var(--brand-blue-dark); transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.25); } #lp-larmed .section-cta-bar--green .btn-pill--onblue:hover { color: var(--brand-green-dark); } #lp-larmed .btn-pill--outline-onblue { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); } #lp-larmed .btn-pill--outline-onblue:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 1. Hero -------------------------------------------------------------------------- */ #lp-larmed .section-hero { background: radial-gradient(760px 480px at 88% -6%, var(--brand-blue-light) 0%, transparent 60%), radial-gradient(600px 420px at -6% 90%, var(--brand-green-light) 0%, transparent 55%), #fff; } #lp-larmed .offer-bullet { display: flex; align-items: center; gap: 0.6rem; font-size: 15px; font-weight: 500; color: var(--ink); } #lp-larmed .offer-bullet__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-green-light); color: var(--brand-green-dark); flex-shrink: 0; } #lp-larmed .hero-photo-frame { position: relative; aspect-ratio: 9 / 10; border-radius: var(--radius-swoosh); overflow: hidden; box-shadow: 0 24px 48px -16px rgba(15, 39, 51, 0.28); isolation: isolate; } #lp-larmed .hero-photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(23, 168, 225, 0.16), transparent 45%); pointer-events: none; z-index: 2; } #lp-larmed .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease-out-expo); } #lp-larmed .hero-slide.is-active { opacity: 1; } #lp-larmed .hero-slider-dots { position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: flex; align-items: center; gap: 0.4rem; } #lp-larmed .hero-slider-dots__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(15, 39, 51, 0.35); transition: background-color 0.25s ease, width 0.25s ease; border: 0; padding: 0; cursor: pointer; } #lp-larmed .hero-slider-dots__dot.is-active { background: #fff; width: 20px; } #lp-larmed .hero-badge { position: absolute; left: -1.25rem; bottom: -1.5rem; display: flex; align-items: center; gap: 0.75rem; background: #fff; padding: 0.75rem 1.1rem 0.75rem 0.75rem; border-radius: var(--radius-swoosh-sm); box-shadow: 0 16px 32px -12px rgba(15, 39, 51, 0.25); max-width: 250px; } @media (max-width: 640px) { #lp-larmed .hero-badge { left: 0.5rem; bottom: -1.25rem; max-width: 220px; } } #lp-larmed .hero-badge__img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--brand-green-light); } #lp-larmed .hero-badge__text { font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--ink); } #lp-larmed .hero-badge__text span { color: var(--ink-soft); font-weight: 500; } /* -------------------------------------------------------------------------- 2. Statystyki -------------------------------------------------------------------------- */ #lp-larmed .stats-panel { background: #fff; border-radius: 1.75rem; padding: 2.5rem 2rem; box-shadow: 0 4px 12px rgba(15, 39, 51, 0.05), 0 30px 60px -24px rgba(15, 39, 51, 0.18); } #lp-larmed .stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; } #lp-larmed .stat-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--brand-blue-light); color: var(--brand-blue-dark); margin-bottom: 0.5rem; } #lp-larmed .stat-item:nth-child(2n) .stat-item__icon { background: var(--brand-green-light); color: var(--brand-green-dark); } #lp-larmed .stat-item__number { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 34px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; } #lp-larmed .stat-item__label { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; max-width: 130px; } /* -------------------------------------------------------------------------- 3. Oferta / karty usług -------------------------------------------------------------------------- */ #lp-larmed .section-services { background: #fff; } #lp-larmed .service-card { position: relative; background: var(--surface-tint); border-radius: 1.75rem; padding: 2.25rem 2rem 2.5rem; transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background-color 0.35s ease; } #lp-larmed .service-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 4px 12px rgba(15, 39, 51, 0.05), 0 30px 60px -20px rgba(15, 39, 51, 0.22); } #lp-larmed .service-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-swoosh-sm); margin-bottom: 1.5rem; } #lp-larmed .service-card__icon--blue { background: var(--brand-blue-light); color: var(--brand-blue-dark); } #lp-larmed .service-card__icon--green { background: var(--brand-green-light); color: var(--brand-green-dark); } #lp-larmed .service-card__title { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); } #lp-larmed .service-card__lead { margin-top: 0.6rem; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } #lp-larmed .service-card__list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; } #lp-larmed .service-card__list li { position: relative; padding-left: 1.3rem; font-size: 14.5px; color: var(--ink); line-height: 1.45; } #lp-larmed .service-card__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 999px; background: var(--brand-green); } #lp-larmed .service-card__badge { margin-top: 1.5rem; display: inline-flex; align-items: center; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--brand-blue-dark); background: var(--brand-blue-light); padding: 0.5rem 0.9rem; border-radius: var(--radius-swoosh-sm); } /* -------------------------------------------------------------------------- 4/7. Paski CTA — przerywniki konwersyjne -------------------------------------------------------------------------- */ #lp-larmed .section-cta-bar { position: relative; overflow: hidden; } #lp-larmed .section-cta-bar--blue { background: linear-gradient(120deg, #1394CB 0%, var(--brand-blue) 48%, #21B6EE 100%); } #lp-larmed .section-cta-bar--green { background: linear-gradient(120deg, #4F8A1E 0%, var(--brand-green) 55%, #8AC94A 100%); } #lp-larmed .section-cta-bar::before { content: ""; position: absolute; top: -30%; right: -8%; width: 480px; height: 480px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; } #lp-larmed .section-cta-bar::after { content: ""; position: absolute; bottom: -35%; left: -6%; width: 360px; height: 360px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none; } /* -------------------------------------------------------------------------- 5. Zabiegi — kolumny -------------------------------------------------------------------------- */ #lp-larmed .section-surgery { background: var(--surface-tint); } #lp-larmed .surgery-col__media { position: relative; margin-bottom: 2rem; padding-bottom: 1.75rem; padding-right: 1.75rem; } #lp-larmed .surgery-col__img--main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-swoosh); box-shadow: 0 20px 40px -16px rgba(15, 39, 51, 0.22); } #lp-larmed .surgery-col__img--inset { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-swoosh-sm); border: 4px solid #fff; box-shadow: 0 12px 24px -8px rgba(15, 39, 51, 0.3); } #lp-larmed .surgery-col__title { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); margin-bottom: 1.25rem; } @media (min-width: 1024px) { #lp-larmed .surgery-col__title { min-height: 66px; } } #lp-larmed .surgery-col__lead { margin-top: 0.75rem; color: var(--ink-soft); line-height: 1.6; font-size: 15.5px; } #lp-larmed .surgery-col__subhead { margin-top: 1.5rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-blue-dark); } #lp-larmed .surgery-col__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.7rem; } #lp-larmed .surgery-col__list > li { position: relative; padding-left: 1.4rem; font-size: 15px; color: var(--ink); line-height: 1.5; } #lp-larmed .surgery-col__list > li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 999px; background: var(--brand-blue); } #lp-larmed .surgery-col__list--icons > li { display: flex; align-items: flex-start; gap: 0.75rem; padding-left: 0; } #lp-larmed .surgery-col__list--icons > li::before { display: none; } #lp-larmed .surgery-col__list--icons svg { flex-shrink: 0; color: var(--brand-green-dark); background: var(--brand-green-light); padding: 6px; border-radius: 999px; width: 32px; height: 32px; margin-top: 0.1rem; } /* -------------------------------------------------------------------------- 6. Opinie / karuzela -------------------------------------------------------------------------- */ #lp-larmed .section-testimonials { background: #fff; } #lp-larmed .google-rating { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--surface-tint); padding: 0.75rem 1.1rem; border-radius: var(--radius-swoosh-sm); } #lp-larmed .google-rating__stars { position: relative; display: inline-block; font-size: 14px; letter-spacing: 1px; line-height: 1; } #lp-larmed .google-rating__stars-bg { color: rgba(15, 39, 51, 0.18); } #lp-larmed .google-rating__stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; width: calc(var(--rating, 5) / 5 * 100%); white-space: nowrap; color: #F5A623; } #lp-larmed .google-rating__text { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; } #lp-larmed .testimonial-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow: hidden; border-radius: 1.75rem; } #lp-larmed .testimonial-card { grid-row: 1; grid-column: 1; background: var(--surface-tint); border-radius: 1.75rem; padding: 2.75rem clamp(1.5rem, 5vw, 4rem); opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); } #lp-larmed .testimonial-card.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; } #lp-larmed .testimonial-card__stars { color: #F5A623; font-size: 18px; letter-spacing: 3px; } #lp-larmed .testimonial-card blockquote { margin-top: 1.25rem; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ink); max-width: 46rem; } #lp-larmed .testimonial-card figcaption { margin-top: 1.75rem; display: flex; align-items: center; gap: 0.85rem; } #lp-larmed .testimonial-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: var(--brand-blue); color: #fff; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0; } #lp-larmed .testimonial-card__name { display: block; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); } #lp-larmed .testimonial-card__meta { display: block; font-size: 12.5px; color: var(--ink-soft); } #lp-larmed .testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; } #lp-larmed .testimonial-controls__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: var(--surface-tint); color: var(--ink); border: 0; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } #lp-larmed .testimonial-controls__btn:hover { background: var(--brand-blue); color: #fff; transform: scale(1.08); } #lp-larmed .testimonial-dots { display: flex; align-items: center; gap: 0.5rem; } #lp-larmed .testimonial-dots__dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(15, 39, 51, 0.15); border: 0; padding: 0; cursor: pointer; transition: background-color 0.25s ease, width 0.25s ease; } #lp-larmed .testimonial-dots__dot.is-active { background: var(--brand-blue); width: 22px; } /* -------------------------------------------------------------------------- 8. FAQ -------------------------------------------------------------------------- */ #lp-larmed .section-faq { background: var(--surface-tint); } #lp-larmed .faq-list { display: flex; flex-direction: column; gap: 0.9rem; } #lp-larmed .faq-item { background: #fff; border-radius: 1.25rem; box-shadow: 0 2px 8px rgba(15, 39, 51, 0.04); overflow: hidden; } #lp-larmed .faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.35rem 1.6rem; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ink); background: none; border: 0; cursor: pointer; } #lp-larmed .faq-item__chevron { flex-shrink: 0; color: var(--brand-blue); transition: transform 0.3s var(--ease-out-expo); } #lp-larmed .faq-item.is-open .faq-item__chevron { transform: rotate(180deg); } #lp-larmed .faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out-expo); padding: 0 1.6rem; } #lp-larmed .faq-item__a p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); padding-bottom: 1.1rem; } #lp-larmed .faq-item__a p + p { padding-top: 0; } #lp-larmed .faq-item.is-open .faq-item__a { padding-bottom: 0.5rem; } /* -------------------------------------------------------------------------- 9. Kontakt / stopka -------------------------------------------------------------------------- */ #lp-larmed .section-contact { background: linear-gradient(175deg, #0F2733 0%, #0A1B24 100%); color: rgba(255, 255, 255, 0.85); } #lp-larmed .contact-info-row { display: flex; align-items: flex-start; gap: 0.9rem; font-size: 15px; color: rgba(255, 255, 255, 0.8); line-height: 1.5; } #lp-larmed .contact-info-row a { color: inherit; } #lp-larmed .contact-info-row a:hover { color: #fff; } #lp-larmed .contact-info-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #8FD9F5; flex-shrink: 0; } #lp-larmed .map-frame { border-radius: 1.5rem; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.4); filter: saturate(0.9); } #lp-larmed .map-frame iframe { width: 100%; height: 100%; border: 0; } #lp-larmed .contact-form-panel { background: #fff; border-radius: 1.75rem; padding: 2.25rem clamp(1.5rem, 4vw, 2.5rem) 2.5rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35); } #lp-larmed .form-field { display: flex; flex-direction: column; gap: 0.4rem; } #lp-larmed .form-field label { font-size: 13px; font-weight: 600; color: var(--ink); } #lp-larmed .form-field input, #lp-larmed .form-field textarea { width: 100%; background: var(--surface-tint); border: 1.5px solid transparent; border-radius: 0.85rem; padding: 0.75rem 1rem; font-size: 15px; color: var(--ink); font-family: "Inter", sans-serif; transition: border-color 0.2s ease, background-color 0.2s ease; } #lp-larmed .form-field input:focus, #lp-larmed .form-field textarea:focus { outline: none; border-color: var(--brand-blue); background: #fff; } #lp-larmed .form-field textarea { resize: vertical; min-height: 96px; } #lp-larmed .form-consent { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } #lp-larmed .form-consent input { margin-top: 0.2rem; accent-color: var(--brand-blue); width: 16px; height: 16px; flex-shrink: 0; } #lp-larmed .form-consent a { color: var(--brand-blue-dark); text-decoration: underline; } /* Contact Form 7 — dopasowanie natywnego markupu wtyczki do naszego designu */ #lp-larmed .lp-cf7-wrap .wpcf7-form { display: grid; gap: 1.25rem; } #lp-larmed .lp-cf7-wrap .form-consent { margin: 0; display: block; } /* CF7 zagnieżdża checkbox zgody głębiej niż nasz zwykły