/* ==========================================================================
Leasing360 — Design System + Custom Blocks
Plik: leasing360-blocks/assets/l360.css
Wersja: 1.2.0
==========================================================================
SPIS TREŚCI
1. Design tokens (zmienne CSS)
2. Reset / bazowa typografia
3. Utility: eyebrow, sekcje, siatki
4. Animacje (reveal, marquee, hover)
5. Blok: pasek partnerów (marquee)
6. Blok: kroki procesu (steps)
7. Blok: tabela porównawcza (compare)
8. Blok: karta pojazdu (car card)
9. Blok: katalog Flota360 + filtry
10. Blok: case studies
11. Blok: FAQ accordion
12. Blok: opinie (testimonials)
13. Blok: checklista / lista korzyści
14. Blok: liczniki (stats)
15. Blok: zakładki Dla firm / Dla konsumenta
16. Blok: karty usług (service cards)
17. Blok: CTA banner / glass card
18. Sticky pasek mobilny
19. Header / nawigacja
20. Footer
21. Formularze (Forminator)
22. Responsywność / prefers-reduced-motion
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* --- Marka --------------------------------------------------------- */
--l360-blue-logo: #0000FF; /* kolor z logo — TYLKO logo/sygnet */
--l360-primary: #1A2CE8; /* główny kolor UI (theme-color prototypu) */
--l360-primary-600:#1523C4; /* hover */
--l360-primary-700:#101B99; /* active / pressed */
--l360-primary-300:#5A68F0; /* jasny akcent */
--l360-primary-100:#E6E8FE; /* tinty, tła badge'y */
--l360-primary-050:#F2F3FF; /* bardzo jasne tło sekcji */
/* --- Neutralne ----------------------------------------------------- */
--l360-ink: #0A0A0F; /* nagłówki (czerń z logo) */
--l360-body: #3D4356; /* tekst akapitowy */
--l360-muted: #6B7385; /* tekst pomocniczy */
--l360-line: #E3E7F0; /* obramowania */
--l360-line-soft: #EFF2F8;
--l360-surface: #FFFFFF;
--l360-surface-2: #F6F8FC; /* alternatywne tło sekcji */
--l360-dark: #07080F; /* sekcje ciemne / footer */
--l360-dark-2: #10131F; /* karty na ciemnym */
/* --- Semantyczne --------------------------------------------------- */
--l360-success: #0FA968;
--l360-danger: #D93B3B;
--l360-promo: #FF7A00; /* badge "Promocja" */
/* --- Gradienty ------------------------------------------------------ */
--l360-grad-hero: radial-gradient(1200px 600px at 15% -10%, rgba(26,44,232,.35) 0%, rgba(7,8,15,0) 60%),
radial-gradient(900px 500px at 95% 10%, rgba(26,44,232,.20) 0%, rgba(7,8,15,0) 55%),
linear-gradient(180deg, #07080F 0%, #0B0E1C 100%);
--l360-grad-btn: linear-gradient(135deg, #1A2CE8 0%, #3A49F5 100%);
--l360-grad-line: linear-gradient(90deg, transparent, var(--l360-primary), transparent);
/* --- Promienie ------------------------------------------------------ */
--l360-r-sm: 8px;
--l360-r-btn: 12px; /* przyciski i pola formularza — zmierzone w prototypie */
--l360-r-md: 14px;
--l360-r-lg: 20px;
--l360-r-xl: 28px;
--l360-r-pill: 999px;
/* --- Cienie --------------------------------------------------------- */
--l360-sh-xs: 0 1px 2px rgba(10,10,15,.05);
--l360-sh-sm: 0 2px 8px rgba(10,10,15,.06);
--l360-sh-md: 0 8px 24px rgba(10,10,15,.08);
--l360-sh-lg: 0 18px 48px rgba(10,10,15,.12);
--l360-sh-blue: 0 12px 32px rgba(26,44,232,.28);
/* --- Odstępy (skala 4px) -------------------------------------------- */
--l360-s-1: 4px; --l360-s-2: 8px; --l360-s-3: 12px; --l360-s-4: 16px;
--l360-s-5: 20px; --l360-s-6: 24px; --l360-s-8: 32px; --l360-s-10: 40px;
--l360-s-12: 48px; --l360-s-16: 64px; --l360-s-20: 80px; --l360-s-24: 96px;
--l360-s-32: 128px;
/* --- Typografia ------------------------------------------------------ */
--l360-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--l360-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* --- Szerokości ------------------------------------------------------ */
--l360-container: 1200px;
--l360-container-narrow: 860px;
/* --- Animacje -------------------------------------------------------- */
--l360-ease: cubic-bezier(.22,.61,.36,1);
--l360-ease-out: cubic-bezier(.16,1,.3,1);
--l360-dur: .45s;
--l360-marquee-speed: 46s;
}
/* Wariant ciemny sekcji — ustaw klasę .l360-on-dark na kontenerze Elementora */
.l360-on-dark {
--l360-ink: #FFFFFF;
--l360-body: #C3C9D9;
--l360-muted: #8B93A7;
--l360-line: rgba(255,255,255,.10);
--l360-line-soft: rgba(255,255,255,.06);
--l360-surface: rgba(255,255,255,.04);
--l360-surface-2: rgba(255,255,255,.06);
color: var(--l360-body);
}
/* ==========================================================================
2. RESET / BAZOWA TYPOGRAFIA
========================================================================== */
body {
font-family: var(--l360-font-body);
color: var(--l360-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
font-family: var(--l360-font-head);
color: var(--l360-ink);
letter-spacing: -0.022em;
line-height: 1.12;
font-weight: 800;
}
h3, h4, h5, h6 { line-height: 1.25; font-weight: 700; letter-spacing: -0.012em; }
p { line-height: 1.65; }
a { text-decoration: none; transition: color .2s var(--l360-ease); }
::selection { background: var(--l360-primary); color: #fff; }
/* Podkreślenie akcentowe w nagłówkach: tekst */
.l360-hl { color: var(--l360-primary); }
.l360-hl-underline {
position: relative; display: inline-block; color: var(--l360-ink);
}
.l360-hl-underline::after {
content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .32em;
background: var(--l360-primary); opacity: .18; border-radius: 4px; z-index: -1;
}
/* ==========================================================================
3. UTILITY
========================================================================== */
/* Eyebrow — mała etykieta nad nagłówkiem (np. "Niezależny broker leasingowy") */
.l360-eyebrow {
display: inline-flex; align-items: center; gap: var(--l360-s-2);
padding: 7px 14px 7px 11px;
font: 600 13px/1 var(--l360-font-body);
letter-spacing: .01em;
color: var(--l360-primary);
background: var(--l360-primary-100);
border: 1px solid rgba(26,44,232,.18);
border-radius: var(--l360-r-pill);
}
.l360-on-dark .l360-eyebrow {
color: #C9CEFF;
background: rgba(26,44,232,.16);
border-color: rgba(122,134,255,.28);
backdrop-filter: blur(8px);
}
.l360-eyebrow::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--l360-primary); flex: none;
box-shadow: 0 0 0 3px rgba(26,44,232,.18);
animation: l360-pulse 2.4s var(--l360-ease) infinite;
}
.l360-on-dark .l360-eyebrow::before { background: #6E7BFF; }
@keyframes l360-pulse {
0%,100% { box-shadow: 0 0 0 3px rgba(26,44,232,.18); }
50% { box-shadow: 0 0 0 6px rgba(26,44,232,.05); }
}
/* Etykieta sekcji nad nagłówkiem — wariant minimal */
.l360-kicker {
display: block; font: 700 12px/1 var(--l360-font-body);
letter-spacing: .14em; text-transform: uppercase; color: var(--l360-primary);
margin-bottom: var(--l360-s-3);
}
/* Nota drobnym drukiem */
.l360-note {
font-size: 13px; line-height: 1.6; color: var(--l360-muted);
}
/* Separator gradientowy */
.l360-divider { height: 1px; background: var(--l360-grad-line); opacity: .35; border: 0; }
/* Siatki pomocnicze (gdy potrzeba poza Elementorem) */
.l360-grid { display: grid; gap: var(--l360-s-6); }
.l360-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.l360-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Tło sekcji z delikatną siatką (hero, sekcje ciemne) */
.l360-bg-grid { position: relative; isolation: isolate; }
.l360-bg-grid::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
}
.l360-bg-dots { position: relative; isolation: isolate; }
.l360-bg-dots::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(26,44,232,.14) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 80%);
}
/* Znak wodny — sygnet Leasing360 w tle sekcji */
.l360-watermark { position: relative; overflow: hidden; }
.l360-watermark > .l360-watermark-img {
position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
width: min(46%, 520px); opacity: .045; pointer-events: none; z-index: 0;
}
.l360-watermark > *:not(.l360-watermark-img) { position: relative; z-index: 1; }
/* ==========================================================================
4. ANIMACJE
========================================================================== */
/* --- Reveal on scroll (obsługiwane przez l360.js / IntersectionObserver) ---
*
* WAŻNE: stan startowy (opacity: 0) obowiązuje TYLKO gdy na jest klasa
* .l360-js, dodawana inline'owym skryptem w . Bez tego zabezpieczenia
* każda sytuacja, w której l360.js nie wystartuje, zostawiała stronę
* całkowicie niewidoczną — dokładnie to działo się w edytorze Elementora
* (podgląd ładuje style, ale nie nasz skrypt) i strona wyglądała na pustą.
* Teraz brak JS = treść po prostu widoczna, bez animacji. */
.l360-js .l360-reveal {
opacity: 0;
transform: translate3d(0, 26px, 0);
transition: opacity .7s var(--l360-ease-out), transform .7s var(--l360-ease-out);
will-change: opacity, transform;
}
.l360-js .l360-reveal.is-visible { opacity: 1; transform: none; }
/* Edytor i podgląd Elementora — animacje wyłączone, wszystko widoczne. */
.elementor-editor-active .l360-reveal,
.elementor-editor-preview .l360-reveal,
body[class*="elementor-editor"] .l360-reveal {
opacity: 1 !important; transform: none !important;
}
.l360-js .l360-reveal-left { transform: translate3d(-32px, 0, 0); }
.l360-js .l360-reveal-right { transform: translate3d(32px, 0, 0); }
.l360-js .l360-reveal-zoom { transform: scale(.96); }
.l360-js .l360-reveal-fade { transform: none; }
/* Opóźnienia kaskadowe */
.l360-d1 { transition-delay: .08s; }
.l360-d2 { transition-delay: .16s; }
.l360-d3 { transition-delay: .24s; }
.l360-d4 { transition-delay: .32s; }
.l360-d5 { transition-delay: .40s; }
.l360-d6 { transition-delay: .48s; }
/* Automatyczna kaskada dzieci: dodaj .l360-stagger na rodzicu */
.l360-stagger > * { transition-delay: calc(var(--l360-i, 0) * .07s); }
/* --- Hover lift dla kart --- */
.l360-lift {
transition: transform .38s var(--l360-ease-out), box-shadow .38s var(--l360-ease-out),
border-color .3s var(--l360-ease);
}
.l360-lift:hover { transform: translateY(-6px); box-shadow: var(--l360-sh-lg); }
/* --- Shine na przycisku primary --- */
.l360-shine { position: relative; overflow: hidden; }
.l360-shine::after {
content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
transform: skewX(-18deg); transition: left .75s var(--l360-ease-out);
}
.l360-shine:hover::after { left: 130%; }
/* --- Pływająca ikona/obraz --- */
.l360-float { animation: l360-float 6s ease-in-out infinite; }
@keyframes l360-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
/* ==========================================================================
5. BLOK: PASEK PARTNERÓW (MARQUEE) [l360_marquee]
========================================================================== */
.l360-marquee {
position: relative; overflow: hidden; width: 100%;
padding: var(--l360-s-4) 0;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.l360-marquee__track {
display: flex; width: max-content; gap: var(--l360-s-3);
animation: l360-marquee var(--l360-marquee-speed) linear infinite;
}
.l360-marquee--reverse .l360-marquee__track { animation-direction: reverse; }
.l360-marquee:hover .l360-marquee__track { animation-play-state: paused; }
.l360-marquee__item {
flex: none;
display: inline-flex; align-items: center; justify-content: center;
height: 52px; padding: 0 22px;
font: 600 14px/1 var(--l360-font-body);
white-space: nowrap;
color: var(--l360-body);
background: var(--l360-surface);
border: 1px solid var(--l360-line);
border-radius: var(--l360-r-md);
transition: color .25s, border-color .25s, transform .25s var(--l360-ease-out);
}
.l360-marquee__item:hover {
color: var(--l360-primary); border-color: rgba(26,44,232,.35); transform: translateY(-2px);
}
.l360-marquee__item img { max-height: 26px; width: auto; filter: grayscale(1); opacity: .7; transition: .25s; }
.l360-marquee__item:hover img { filter: none; opacity: 1; }
.l360-on-dark .l360-marquee__item {
color: #D5DAE8; background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.10); backdrop-filter: blur(6px);
}
.l360-on-dark .l360-marquee__item:hover { color: #fff; border-color: rgba(122,134,255,.45); }
@keyframes l360-marquee {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(-50%,0,0); }
}
/* Wariant kompaktowy (pod hero) */
.l360-marquee--compact .l360-marquee__item { height: 40px; padding: 0 16px; font-size: 13px; }
/* Wrapper dwóch rzędów */
.l360-marquee-wrap { display: grid; gap: var(--l360-s-3); width: 100%; }
/* ==========================================================================
6. BLOK: KROKI PROCESU [l360_steps]
========================================================================== */
.l360-steps { display: grid; gap: var(--l360-s-5); grid-template-columns: repeat(4, minmax(0,1fr)); position: relative; }
.l360-steps--3col { grid-template-columns: repeat(3, minmax(0,1fr)); }
.l360-steps--2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-steps--vertical { grid-template-columns: 1fr; }
.l360-step {
position: relative;
padding: var(--l360-s-6);
background: var(--l360-surface);
border: 1px solid var(--l360-line);
border-radius: var(--l360-r-lg);
overflow: hidden;
transition: transform .38s var(--l360-ease-out), box-shadow .38s var(--l360-ease-out), border-color .3s;
}
.l360-step:hover { transform: translateY(-6px); box-shadow: var(--l360-sh-md); border-color: rgba(26,44,232,.28); }
/* Pasek akcentu u góry karty */
.l360-step::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--l360-grad-btn); transform: scaleX(0); transform-origin: left;
transition: transform .45s var(--l360-ease-out);
}
.l360-step:hover::before { transform: scaleX(1); }
.l360-step__num {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-bottom: var(--l360-s-4);
font: 800 17px/1 var(--l360-font-head); color: #fff;
background: var(--l360-grad-btn);
border-radius: 14px;
box-shadow: var(--l360-sh-blue);
}
.l360-step__title { font: 700 18px/1.3 var(--l360-font-head); color: var(--l360-ink); margin: 0 0 var(--l360-s-2); }
.l360-step__desc { font-size: 15px; line-height: 1.6; color: var(--l360-muted); margin: 0; }
/* Znak wodny sygnetu w rogu karty */
.l360-step__mark {
position: absolute; right: 10px; bottom: 10px; width: 64px; opacity: .06;
pointer-events: none; transition: opacity .35s, transform .5s var(--l360-ease-out);
}
.l360-step:hover .l360-step__mark { opacity: .1; transform: rotate(-6deg) scale(1.04); }
/* Linia łącząca kroki (desktop) */
.l360-steps--connected .l360-step:not(:last-child)::after {
content: ''; position: absolute; top: 46px; right: -14px; width: 28px; height: 2px;
background: repeating-linear-gradient(90deg, var(--l360-line) 0 6px, transparent 6px 12px);
}
.l360-on-dark .l360-step { background: var(--l360-dark-2); border-color: rgba(255,255,255,.08); }
.l360-on-dark .l360-step__desc { color: #98A0B5; }
/* ==========================================================================
7. BLOK: TABELA PORÓWNAWCZA [l360_compare]
========================================================================== */
.l360-compare {
border: 1px solid var(--l360-line);
border-radius: var(--l360-r-xl);
overflow: hidden;
background: var(--l360-surface);
box-shadow: var(--l360-sh-md);
}
.l360-compare__head {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--l360-line);
}
.l360-compare__head > div {
padding: var(--l360-s-5) var(--l360-s-6);
font: 700 15px/1.3 var(--l360-font-head);
display: flex; align-items: center; gap: var(--l360-s-2);
}
.l360-compare__head .is-them { color: var(--l360-muted); background: var(--l360-surface-2); }
.l360-compare__head .is-us { color: #fff; background: var(--l360-ink); position: relative; }
.l360-compare__head .is-us::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--l360-grad-btn);
}
.l360-compare__row {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--l360-line-soft);
}
.l360-compare__row:last-child { border-bottom: 0; }
.l360-compare__row > div {
padding: var(--l360-s-4) var(--l360-s-6);
display: flex; align-items: flex-start; gap: var(--l360-s-3);
font-size: 15px; line-height: 1.55;
}
.l360-compare__row .is-them { color: var(--l360-muted); background: var(--l360-surface-2); }
.l360-compare__row .is-us { color: var(--l360-ink); font-weight: 600; background: var(--l360-surface); }
.l360-compare__row:hover .is-us { background: var(--l360-primary-050); }
.l360-compare__ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.l360-compare__ico--x { color: #C2C8D6; }
.l360-compare__ico--v { color: var(--l360-primary); }
.l360-compare__label { display: none; font: 700 11px/1 var(--l360-font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; }
/* Stopka z podsumowaniem */
.l360-compare__foot {
padding: var(--l360-s-5) var(--l360-s-6);
background: var(--l360-ink); color: #fff;
font: 600 16px/1.4 var(--l360-font-head);
display: flex; align-items: center; gap: var(--l360-s-3);
}
.l360-compare__foot img { width: 28px; height: auto; flex: none; }
/* ==========================================================================
8. BLOK: KARTA POJAZDU (car card)
========================================================================== */
.l360-car {
position: relative; display: flex; flex-direction: column;
background: var(--l360-surface);
border: 1px solid var(--l360-line);
border-radius: var(--l360-r-lg);
overflow: hidden;
transition: transform .38s var(--l360-ease-out), box-shadow .38s var(--l360-ease-out), border-color .3s;
}
.l360-car:hover { transform: translateY(-6px); box-shadow: var(--l360-sh-lg); border-color: rgba(26,44,232,.25); }
.l360-car__media {
position: relative; aspect-ratio: 16/10; overflow: hidden;
background: linear-gradient(135deg, #EEF1F8 0%, #E3E8F4 100%);
}
.l360-car__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--l360-ease-out); }
.l360-car:hover .l360-car__media img { transform: scale(1.06); }
.l360-car__badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
padding: 6px 12px; border-radius: var(--l360-r-pill);
font: 700 11px/1 var(--l360-font-body); letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: var(--l360-primary); box-shadow: var(--l360-sh-blue);
}
.l360-car__badge--promo { background: var(--l360-promo); box-shadow: 0 10px 24px rgba(255,122,0,.28); }
.l360-car__body { padding: var(--l360-s-5); display: flex; flex-direction: column; gap: var(--l360-s-3); flex: 1; }
.l360-car__brand { font: 700 12px/1 var(--l360-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--l360-primary); }
.l360-car__model { font: 700 18px/1.3 var(--l360-font-head); color: var(--l360-ink); margin: 0; }
.l360-car__price { display: flex; align-items: baseline; gap: 6px; margin-top: auto; }
.l360-car__price b { font: 800 26px/1 var(--l360-font-head); color: var(--l360-ink); letter-spacing: -.02em; }
.l360-car__price span { font-size: 13px; color: var(--l360-muted); }
.l360-car__specs { display: flex; flex-wrap: wrap; gap: var(--l360-s-2); }
.l360-car__spec {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px; border-radius: var(--l360-r-sm);
font: 500 12px/1 var(--l360-font-body); color: var(--l360-body);
background: var(--l360-surface-2); border: 1px solid var(--l360-line-soft);
}
.l360-car__spec svg { width: 13px; height: 13px; opacity: .6; }
.l360-car__cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin-top: var(--l360-s-2); padding: 11px 18px;
font: 600 14px/1 var(--l360-font-body); color: var(--l360-primary);
background: var(--l360-primary-100); border: 1px solid transparent;
border-radius: var(--l360-r-sm);
transition: background .25s, color .25s, gap .25s var(--l360-ease-out);
}
.l360-car__cta:hover { background: var(--l360-primary); color: #fff; gap: 12px; }
.l360-car__cta svg { width: 15px; height: 15px; }
/* Karta pozioma (strona pojedynczego pojazdu / powiązane) */
.l360-car--wide { flex-direction: row; }
.l360-car--wide .l360-car__media { aspect-ratio: 4/3; width: 42%; flex: none; }
/* ==========================================================================
9. BLOK: KATALOG FLOTA360 + FILTRY [l360_fleet]
========================================================================== */
.l360-fleet { display: flex; flex-direction: column; gap: var(--l360-s-8); }
.l360-fleet__filters {
display: flex; flex-wrap: wrap; gap: var(--l360-s-2);
padding-bottom: var(--l360-s-2);
}
.l360-fleet__filter {
appearance: none; cursor: pointer;
padding: 10px 18px; border-radius: var(--l360-r-pill);
font: 600 14px/1 var(--l360-font-body); color: var(--l360-body);
background: var(--l360-surface); border: 1px solid var(--l360-line);
transition: all .25s var(--l360-ease);
}
.l360-fleet__filter:hover { border-color: rgba(26,44,232,.4); color: var(--l360-primary); }
.l360-fleet__filter.is-active {
color: #fff; background: var(--l360-primary); border-color: var(--l360-primary);
box-shadow: var(--l360-sh-blue);
}
.l360-fleet__filter span { opacity: .55; font-weight: 500; margin-left: 5px; }
/* Pasek narzędzi: sortowanie + licznik */
.l360-fleet__toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--l360-s-4); flex-wrap: wrap;
padding: var(--l360-s-4) 0; border-top: 1px solid var(--l360-line-soft);
}
.l360-fleet__count { font-size: 14px; color: var(--l360-muted); }
.l360-fleet__count b { color: var(--l360-ink); font-weight: 700; }
.l360-fleet__sort {
padding: 9px 34px 9px 14px; border-radius: var(--l360-r-sm);
font: 500 14px/1 var(--l360-font-body); color: var(--l360-body);
background: var(--l360-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
border: 1px solid var(--l360-line); appearance: none; cursor: pointer;
}
.l360-fleet__grid {
display: grid; gap: var(--l360-s-6);
grid-template-columns: repeat(4, minmax(0,1fr));
}
.l360-fleet__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* Animacja filtrowania */
.l360-fleet__item { transition: opacity .35s var(--l360-ease), transform .35s var(--l360-ease-out); }
.l360-fleet__item.is-hidden { display: none; }
.l360-fleet__item.is-entering { opacity: 0; transform: scale(.97) translateY(8px); }
.l360-fleet__empty {
grid-column: 1/-1; padding: var(--l360-s-16) var(--l360-s-6); text-align: center;
color: var(--l360-muted); background: var(--l360-surface-2);
border: 1px dashed var(--l360-line); border-radius: var(--l360-r-lg);
}
.l360-fleet__more { display: flex; justify-content: center; }
.l360-fleet__more button {
cursor: pointer; padding: 14px 30px; border-radius: var(--l360-r-pill);
font: 600 15px/1 var(--l360-font-body); color: var(--l360-primary);
background: transparent; border: 1.5px solid var(--l360-primary);
transition: all .28s var(--l360-ease);
}
.l360-fleet__more button:hover { background: var(--l360-primary); color: #fff; box-shadow: var(--l360-sh-blue); }
/* ==========================================================================
10. BLOK: CASE STUDIES [l360_cases]
========================================================================== */
.l360-cases { display: grid; gap: var(--l360-s-6); grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-case {
position: relative; padding: var(--l360-s-8) var(--l360-s-6) var(--l360-s-6);
background: var(--l360-surface); border: 1px solid var(--l360-line);
border-radius: var(--l360-r-lg); overflow: hidden;
transition: transform .38s var(--l360-ease-out), box-shadow .38s var(--l360-ease-out);
}
.l360-case:hover { transform: translateY(-5px); box-shadow: var(--l360-sh-md); }
.l360-case__mark { position: absolute; top: 18px; right: 18px; width: 34px; opacity: .12; }
.l360-case__title { font: 700 19px/1.3 var(--l360-font-head); color: var(--l360-ink); margin: 0 0 var(--l360-s-5); padding-right: 44px; }
.l360-case__row { display: grid; grid-template-columns: 104px 1fr; gap: var(--l360-s-4); padding: var(--l360-s-3) 0; border-top: 1px solid var(--l360-line-soft); }
.l360-case__row:first-of-type { border-top: 0; }
.l360-case__k {
font: 700 11px/1.4 var(--l360-font-body); letter-spacing: .1em; text-transform: uppercase;
color: var(--l360-primary); padding-top: 3px;
}
.l360-case__v { font-size: 15px; line-height: 1.6; color: var(--l360-body); }
.l360-case__row--effect .l360-case__k { color: var(--l360-success); }
.l360-case__row--effect .l360-case__v { font-weight: 600; color: var(--l360-ink); }
/* ==========================================================================
11. BLOK: FAQ ACCORDION [l360_faq]
========================================================================== */
.l360-faq { display: flex; flex-direction: column; gap: var(--l360-s-3); }
.l360-faq__item {
background: var(--l360-surface); border: 1px solid var(--l360-line);
border-radius: var(--l360-r-md); overflow: hidden;
transition: border-color .3s, box-shadow .3s;
}
.l360-faq__item.is-open { border-color: rgba(26,44,232,.35); box-shadow: var(--l360-sh-sm); }
.l360-faq__q {
width: 100%; cursor: pointer; text-align: left; appearance: none; background: none; border: 0;
display: flex; align-items: center; justify-content: space-between; gap: var(--l360-s-4);
padding: var(--l360-s-5) var(--l360-s-6);
font: 600 17px/1.4 var(--l360-font-head); color: var(--l360-ink);
transition: color .25s;
}
.l360-faq__q:hover { color: var(--l360-primary); }
.l360-faq__icon {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--l360-primary-100); color: var(--l360-primary);
transition: transform .35s var(--l360-ease-out), background .3s, color .3s;
}
.l360-faq__icon svg { width: 15px; height: 15px; }
.l360-faq__item.is-open .l360-faq__icon { transform: rotate(45deg); background: var(--l360-primary); color: #fff; }
.l360-faq__a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .38s var(--l360-ease-out);
}
.l360-faq__item.is-open .l360-faq__a { grid-template-rows: 1fr; }
.l360-faq__a > div { overflow: hidden; }
.l360-faq__a p {
margin: 0; padding: 0 var(--l360-s-6) var(--l360-s-5);
font-size: 15.5px; line-height: 1.7; color: var(--l360-muted);
}
/* ==========================================================================
12. BLOK: OPINIE [l360_testimonials]
========================================================================== */
.l360-tst { position: relative; }
.l360-tst__track {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr);
gap: var(--l360-s-6);
overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: var(--l360-s-4);
scrollbar-width: thin; scrollbar-color: var(--l360-line) transparent;
}
.l360-tst__track::-webkit-scrollbar { height: 6px; }
.l360-tst__track::-webkit-scrollbar-thumb { background: var(--l360-line); border-radius: 99px; }
.l360-tst__item {
scroll-snap-align: start;
display: flex; flex-direction: column; gap: var(--l360-s-4);
padding: var(--l360-s-6);
background: var(--l360-surface); border: 1px solid var(--l360-line);
border-radius: var(--l360-r-lg);
transition: transform .35s var(--l360-ease-out), box-shadow .35s;
}
.l360-tst__item:hover { transform: translateY(-4px); box-shadow: var(--l360-sh-md); }
.l360-tst__quote { position: relative; font-size: 16px; line-height: 1.7; color: var(--l360-body); margin: 0; }
.l360-tst__quote::before {
content: '“'; display: block; font: 800 54px/0.7 var(--l360-font-head);
color: var(--l360-primary); opacity: .22; margin-bottom: 6px;
}
.l360-tst__stars { display: flex; gap: 3px; color: #FFB020; }
.l360-tst__stars svg { width: 16px; height: 16px; }
.l360-tst__author { margin-top: auto; padding-top: var(--l360-s-3); border-top: 1px solid var(--l360-line-soft); }
.l360-tst__name { font: 700 14px/1.3 var(--l360-font-head); color: var(--l360-ink); }
.l360-tst__role { font-size: 13px; color: var(--l360-muted); }
/* Nawigacja strzałkami */
.l360-tst__nav { display: flex; gap: var(--l360-s-2); justify-content: flex-end; margin-bottom: var(--l360-s-4); }
.l360-tst__nav button {
width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
background: var(--l360-surface); border: 1px solid var(--l360-line); color: var(--l360-ink);
transition: all .25s var(--l360-ease);
}
.l360-tst__nav button:hover { background: var(--l360-primary); border-color: var(--l360-primary); color: #fff; }
.l360-tst__nav svg { width: 17px; height: 17px; }
/* ==========================================================================
13. BLOK: CHECKLISTA / LISTA KORZYŚCI [l360_checklist]
========================================================================== */
.l360-check { display: grid; gap: var(--l360-s-3); list-style: none; margin: 0; padding: 0; }
.l360-check--2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-check--3col { grid-template-columns: repeat(3, minmax(0,1fr)); }
.l360-check li {
display: flex; align-items: flex-start; gap: var(--l360-s-3);
font-size: 15.5px; line-height: 1.55; color: var(--l360-body);
}
.l360-check li::before {
content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
background: var(--l360-primary-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231A2CE8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}
.l360-on-dark .l360-check li::before { background-color: rgba(26,44,232,.24); }
/* Wariant "boxed" — każdy punkt jako karta */
.l360-check--boxed li {
padding: var(--l360-s-4) var(--l360-s-5);
background: var(--l360-surface); border: 1px solid var(--l360-line);
border-radius: var(--l360-r-md);
transition: border-color .28s, transform .28s var(--l360-ease-out);
}
.l360-check--boxed li:hover { border-color: rgba(26,44,232,.35); transform: translateX(4px); }
/* ==========================================================================
14. BLOK: LICZNIKI [l360_stats]
========================================================================== */
.l360-stats { display: grid; gap: var(--l360-s-6); grid-template-columns: repeat(4, minmax(0,1fr)); }
.l360-stat { text-align: center; padding: var(--l360-s-5) var(--l360-s-3); }
.l360-stat__num {
font: 800 clamp(34px, 4.4vw, 52px)/1 var(--l360-font-head);
letter-spacing: -.03em; color: var(--l360-ink);
display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.l360-stat__num .l360-stat__value { font-variant-numeric: tabular-nums; } /* liczba nie skacze podczas zliczania */
.l360-stat__num .l360-stat__suffix { color: var(--l360-primary); }
.l360-stat__label { margin-top: var(--l360-s-2); font-size: 14.5px; line-height: 1.45; color: var(--l360-muted); }
/* Wariant z separatorami */
.l360-stats--divided .l360-stat { border-left: 1px solid var(--l360-line); }
.l360-stats--divided .l360-stat:first-child { border-left: 0; }
/* ==========================================================================
15. BLOK: ZAKŁADKI DLA FIRM / DLA KONSUMENTA [l360_tabs]
========================================================================== */
.l360-tabs { display: flex; flex-direction: column; gap: var(--l360-s-8); }
.l360-tabs__nav {
display: inline-flex; align-self: flex-start; gap: 4px; padding: 5px;
background: var(--l360-surface-2); border: 1px solid var(--l360-line);
border-radius: var(--l360-r-pill);
}
.l360-tabs__btn {
cursor: pointer; appearance: none; border: 0; background: transparent;
padding: 11px 24px; border-radius: var(--l360-r-pill);
font: 600 15px/1 var(--l360-font-body); color: var(--l360-muted);
transition: all .3s var(--l360-ease);
}
.l360-tabs__btn:hover { color: var(--l360-ink); }
.l360-tabs__btn.is-active { color: #fff; background: var(--l360-primary); box-shadow: var(--l360-sh-blue); }
.l360-tabs__panel { display: none; animation: l360-fade-in .45s var(--l360-ease-out); }
.l360-tabs__panel.is-active { display: block; }
@keyframes l360-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ==========================================================================
16. BLOK: KARTY USŁUG [l360_services]
========================================================================== */
.l360-services { display: grid; gap: var(--l360-s-5); grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-services--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.l360-services--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.l360-services--1 { grid-template-columns: 1fr; }
.l360-service {
position: relative; display: flex; flex-direction: column; gap: var(--l360-s-3);
padding: var(--l360-s-6);
background: var(--l360-surface); border: 1px solid var(--l360-line);
border-radius: var(--l360-r-lg); overflow: hidden;
transition: transform .38s var(--l360-ease-out), box-shadow .38s, border-color .3s;
}
.l360-service:hover { transform: translateY(-6px); box-shadow: var(--l360-sh-md); border-color: rgba(26,44,232,.28); }
.l360-service::after {
content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px;
background: radial-gradient(circle, rgba(26,44,232,.10) 0%, transparent 70%);
opacity: 0; transition: opacity .4s;
}
.l360-service:hover::after { opacity: 1; }
.l360-service__ico {
width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
background: var(--l360-primary-100); color: var(--l360-primary);
transition: background .3s, color .3s, transform .4s var(--l360-ease-out);
}
.l360-service:hover .l360-service__ico { background: var(--l360-primary); color: #fff; transform: rotate(-6deg) scale(1.05); }
.l360-service__ico svg { width: 24px; height: 24px; }
.l360-service__title { font: 700 18px/1.3 var(--l360-font-head); color: var(--l360-ink); margin: 0; }
.l360-service__desc { font-size: 14.5px; line-height: 1.6; color: var(--l360-muted); margin: 0; flex: 1; }
.l360-service__more {
display: inline-flex; align-items: center; gap: 6px; margin-top: var(--l360-s-2);
font: 600 14px/1 var(--l360-font-body); color: var(--l360-primary);
transition: gap .25s var(--l360-ease-out);
}
.l360-service:hover .l360-service__more { gap: 11px; }
.l360-service__more svg { width: 15px; height: 15px; }
/* Cała karta klikalna */
.l360-service__link { position: absolute; inset: 0; z-index: 3; }
.l360-on-dark .l360-service { background: var(--l360-dark-2); border-color: rgba(255,255,255,.08); }
/* ==========================================================================
17. BLOK: CTA BANNER / GLASS CARD
========================================================================== */
.l360-cta {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between; gap: var(--l360-s-8);
flex-wrap: wrap;
padding: var(--l360-s-10) var(--l360-s-12);
border-radius: var(--l360-r-xl);
background: var(--l360-ink); color: #fff;
}
.l360-cta::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(600px 300px at 100% 0%, rgba(26,44,232,.45) 0%, transparent 65%),
radial-gradient(500px 260px at 0% 100%, rgba(26,44,232,.28) 0%, transparent 60%);
}
.l360-cta > * { position: relative; }
.l360-cta__mark { position: absolute; right: 3%; bottom: -22%; width: 240px; opacity: .07; }
.l360-cta__title { font: 800 clamp(24px, 3vw, 34px)/1.2 var(--l360-font-head); color: #fff; margin: 0 0 var(--l360-s-3); }
.l360-cta__text { font-size: 16px; line-height: 1.65; color: #B9C0D4; margin: 0; max-width: 60ch; }
.l360-cta__actions { display: flex; gap: var(--l360-s-3); flex-wrap: wrap; }
/* Szklana karta (formularz w hero) */
.l360-glass {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--l360-r-xl);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow: 0 24px 64px rgba(0,0,0,.35);
padding: var(--l360-s-8);
}
.l360-glass--light {
background: rgba(255,255,255,.97);
border-color: var(--l360-line);
box-shadow: var(--l360-sh-lg);
}
/* Przyciski (gdy nie używamy widgetu Elementora) */
.l360-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 14px 26px; border-radius: var(--l360-r-sm);
font: 600 15px/1 var(--l360-font-body); cursor: pointer; border: 1.5px solid transparent;
transition: all .28s var(--l360-ease);
}
.l360-btn--primary { color: #fff; background: var(--l360-primary); box-shadow: var(--l360-sh-blue); }
.l360-btn--primary:hover { background: var(--l360-primary-600); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(26,44,232,.34); color: #fff; }
.l360-btn--ghost { color: var(--l360-ink); background: transparent; border-color: var(--l360-line); }
.l360-btn--ghost:hover { border-color: var(--l360-primary); color: var(--l360-primary); }
.l360-on-dark .l360-btn--ghost { color: #fff; border-color: rgba(255,255,255,.22); }
.l360-on-dark .l360-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.l360-btn svg { width: 17px; height: 17px; }
/* ==========================================================================
18. STICKY PASEK MOBILNY [l360_mobile_bar]
========================================================================== */
.l360-mobilebar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
background: rgba(255,255,255,.94);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--l360-line);
box-shadow: 0 -6px 24px rgba(10,10,15,.10);
padding-bottom: env(safe-area-inset-bottom);
transform: translateY(110%);
transition: transform .4s var(--l360-ease-out);
}
.l360-mobilebar.is-visible { transform: none; }
.l360-mobilebar a {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
padding: 11px 6px 10px;
font: 600 11.5px/1 var(--l360-font-body); color: var(--l360-body);
border-left: 1px solid var(--l360-line-soft);
}
.l360-mobilebar a:first-child { border-left: 0; }
.l360-mobilebar a svg { width: 20px; height: 20px; color: var(--l360-primary); }
.l360-mobilebar a.is-primary { background: var(--l360-primary); color: #fff; }
.l360-mobilebar a.is-primary svg { color: #fff; }
@media (max-width: 767px) {
.l360-mobilebar { display: grid; }
body.l360-has-mobilebar { padding-bottom: 64px; }
}
/* ==========================================================================
19. HEADER / NAWIGACJA
========================================================================== */
/* Header jest ZAWSZE jasny — logo Leasing360 ma czarny wordmark, więc
przezroczysty header nad ciemnym hero wymagałby drugiego pliku logo.
Jeśli kiedyś wgrasz wersję jasną, dodaj wariant `.l360-header--over`
z `background: transparent` i podmianą obrazka. */
.l360-header {
position: sticky; top: 0; z-index: 999;
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom: 1px solid transparent;
transition: background .35s var(--l360-ease), box-shadow .35s,
border-color .35s, padding .35s var(--l360-ease);
}
/* Stan po przewinięciu — mocniejsze odcięcie od treści i mniejsza wysokość */
.l360-header.is-stuck {
background: rgba(255,255,255,.96);
border-bottom-color: var(--l360-line);
box-shadow: 0 8px 24px rgba(10,10,15,.07);
}
.l360-header.is-stuck .l360-header-inner { padding-block: 2px; }
.l360-header .elementor-nav-menu a { color: var(--l360-ink); }
/* Wewnętrzny kontener headera */
.l360-header-inner { width: 100%; }
/* Logo — sterowanie rozmiarem w jednym miejscu */
.l360-logo img {
width: auto;
height: clamp(28px, 3.2vw, 38px);
max-width: 100%;
transition: opacity .25s var(--l360-ease);
}
.l360-logo a:hover img { opacity: .85; }
/* Logo pionowe w stopce */
.l360-footer-logo img { width: auto; height: clamp(56px, 6vw, 74px); }
/* Menu — podkreślenie animowane */
.l360-nav .elementor-nav-menu > li > a {
position: relative; font: 600 15px/1 var(--l360-font-body);
padding: 10px 2px !important; margin: 0 14px;
transition: color .25s;
}
.l360-nav .elementor-nav-menu > li > a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--l360-primary); border-radius: 2px;
transform: scaleX(0); transform-origin: right;
transition: transform .34s var(--l360-ease-out);
}
.l360-nav .elementor-nav-menu > li > a:hover::after,
.l360-nav .elementor-nav-menu > li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
/* Telefon w headerze */
.l360-phone {
display: inline-flex; align-items: center; gap: 8px;
font: 700 15px/1 var(--l360-font-head); color: var(--l360-ink);
white-space: nowrap; flex: none;
transition: color .25s;
}
.l360-phone:hover { color: var(--l360-primary); }
.l360-phone svg { width: 17px; height: 17px; flex: none; color: var(--l360-primary); }
.l360-phone span { white-space: nowrap; }
/* Pasek postępu czytania (opcjonalny, dla wpisów) */
.l360-progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0;
background: var(--l360-grad-btn); z-index: 10000; transition: width .1s linear;
}
/* ==========================================================================
20. FOOTER
========================================================================== */
.l360-footer { background: var(--l360-dark); color: #98A0B5; }
.l360-footer a { color: #B9C0D4; font-size: 15px; }
.l360-footer a:hover { color: #fff; }
.l360-footer h4, .l360-footer .elementor-heading-title {
color: #fff; font: 700 13px/1 var(--l360-font-body);
letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--l360-s-4);
}
.l360-footer__bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: var(--l360-s-6); margin-top: var(--l360-s-10);
display: flex; justify-content: space-between; gap: var(--l360-s-4); flex-wrap: wrap;
font-size: 13.5px; color: #6E7688;
}
/* ==========================================================================
21. FORMULARZE (Forminator + fallback)
========================================================================== */
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form select,
.l360-input {
width: 100%;
height: 50px; padding: 0 16px;
font: 500 15px/1 var(--l360-font-body) !important;
color: var(--l360-ink) !important;
background: #fff !important;
border: 1.5px solid var(--l360-line) !important;
border-radius: var(--l360-r-sm) !important;
transition: border-color .25s, box-shadow .25s !important;
}
.forminator-ui.forminator-custom-form .forminator-textarea { height: auto; padding: 14px 16px; min-height: 120px; }
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form select:focus,
.l360-input:focus {
border-color: var(--l360-primary) !important;
box-shadow: 0 0 0 4px rgba(26,44,232,.12) !important;
outline: none !important;
}
.forminator-ui.forminator-custom-form .forminator-label {
font: 600 13.5px/1.3 var(--l360-font-body) !important;
color: var(--l360-body) !important;
margin-bottom: 7px !important;
}
.forminator-ui.forminator-custom-form .forminator-required { color: var(--l360-danger) !important; }
.forminator-ui.forminator-custom-form .forminator-button-submit {
width: 100%; height: 52px;
font: 700 15px/1 var(--l360-font-body) !important;
color: #fff !important;
background: var(--l360-primary) !important;
border: 0 !important; border-radius: var(--l360-r-sm) !important;
box-shadow: var(--l360-sh-blue) !important;
transition: background .25s, transform .25s var(--l360-ease-out), box-shadow .25s !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
background: var(--l360-primary-600) !important;
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(26,44,232,.34) !important;
}
/* Checkbox / radio — Forminator nazywa pudełka klasami `-box`, a nie
* `span:first-child` (pierwszym dzieckiem etykiety jest ukryty ).
* Szczegółowe stylowanie zgody w hero: patrz rozdział 23.13. */
.forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box {
border-color: var(--l360-line) !important; border-radius: 5px !important;
}
.forminator-ui.forminator-custom-form .forminator-radio .forminator-radio-box {
border-color: var(--l360-line) !important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked ~ .forminator-checkbox-box,
.forminator-ui.forminator-custom-form .forminator-radio input:checked ~ .forminator-radio-box {
background: var(--l360-primary) !important; border-color: var(--l360-primary) !important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-label,
.forminator-ui.forminator-custom-form .forminator-radio .forminator-radio-label {
font-size: 13px !important; line-height: 1.55 !important; color: var(--l360-muted) !important;
}
/* Upload plików (porównywarka) */
.forminator-ui .forminator-multi-upload {
border: 2px dashed var(--l360-line) !important; border-radius: var(--l360-r-md) !important;
background: var(--l360-surface-2) !important; padding: var(--l360-s-8) !important;
transition: border-color .25s, background .25s !important;
}
.forminator-ui .forminator-multi-upload:hover { border-color: var(--l360-primary) !important; background: var(--l360-primary-050) !important; }
/* Karta formularza w hero */
.l360-formcard { padding: var(--l360-s-8); background: #fff; border-radius: var(--l360-r-xl); box-shadow: var(--l360-sh-lg); }
.l360-formcard__title { font: 800 22px/1.25 var(--l360-font-head); color: var(--l360-ink); margin: 0 0 6px; }
.l360-formcard__sub { font-size: 14.5px; color: var(--l360-muted); margin: 0 0 var(--l360-s-6); }
.l360-formcard__note { margin-top: var(--l360-s-4); font-size: 12.5px; line-height: 1.55; color: var(--l360-muted); text-align: center; }
/* Formularz wieloetapowy — pasek kroków */
.l360-formsteps { display: flex; gap: var(--l360-s-2); margin-bottom: var(--l360-s-6); }
.l360-formsteps span { flex: 1; height: 4px; border-radius: 99px; background: var(--l360-line); transition: background .35s; }
.l360-formsteps span.is-done { background: var(--l360-primary); }
/* ==========================================================================
22. RESPONSYWNOŚĆ
========================================================================== */
@media (max-width: 1024px) {
.l360-steps, .l360-fleet__grid, .l360-services--4, .l360-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-services--3, .l360-fleet__grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.l360-steps--connected .l360-step::after { display: none; }
.l360-cta { padding: var(--l360-s-8); }
.l360-stats--divided .l360-stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 767px) {
.l360-steps, .l360-fleet__grid, .l360-fleet__grid--3,
.l360-services, .l360-services--3, .l360-services--4,
.l360-cases, .l360-check--2col, .l360-check--3col,
.l360-grid-2, .l360-grid-3, .l360-grid-4 { grid-template-columns: 1fr; }
.l360-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--l360-s-4); }
.l360-stats--divided .l360-stat { border-left: 0; }
/* Tabela porównawcza → układ kart */
.l360-compare__head { display: none; }
.l360-compare__row { grid-template-columns: 1fr; }
.l360-compare__row > div { padding: var(--l360-s-4) var(--l360-s-5); }
.l360-compare__label { display: block; }
.l360-compare__row .is-them { border-bottom: 1px solid var(--l360-line-soft); }
.l360-car--wide { flex-direction: column; }
.l360-car--wide .l360-car__media { width: 100%; aspect-ratio: 16/10; }
.l360-cta { padding: var(--l360-s-8) var(--l360-s-5); text-align: left; }
.l360-glass, .l360-formcard { padding: var(--l360-s-6); }
.l360-tabs__nav { align-self: stretch; }
.l360-tabs__btn { flex: 1; padding: 11px 12px; font-size: 14px; }
.l360-fleet__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
.l360-fleet__filters::-webkit-scrollbar { display: none; }
.l360-fleet__filter { flex: none; }
.l360-marquee { --l360-marquee-speed: 32s; }
.l360-watermark > .l360-watermark-img { display: none; }
}
/* Ograniczenie animacji dla użytkowników z preferencją */
@media (prefers-reduced-motion: reduce) {
.l360-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.l360-marquee__track { animation: none !important; }
.l360-float, .l360-eyebrow::before { animation: none !important; }
* { scroll-behavior: auto !important; }
}
/* Druk */
@media print {
.l360-mobilebar, .l360-header, .l360-marquee, .l360-fleet__filters { display: none !important; }
}
/* ==========================================================================
23. ZGODNOŚĆ Z PROTOTYPEM (leasing360.online)
--------------------------------------------------------------------------
Warstwa wyrównująca wygląd do prototypu, spisana po porównaniu sekcja po
sekcji. Trzymamy ją na końcu pliku, żeby wygrywała remisy specyficzności
z regułami wyżej — dzięki temu nie trzeba przepisywać bloków bazowych
i łatwo zobaczyć, co zostało celowo zmienione względem pierwotnego designu.
========================================================================== */
/* --- 23.1 HERO — prototyp ma JASNE hero, nie ciemne ---------------------- */
.l360-hero-light {
position: relative;
background:
radial-gradient(120% 90% at 85% 0%, #EEF1FF 0%, rgba(238,241,255,0) 60%),
var(--l360-surface);
overflow: hidden;
}
/* Znak wodny sygnetu po prawej stronie hero.
* UWAGA: to ma być SYGNET z prototypu (okrągły „ptaszek"), nie znak „360”.
* Adres bierze się z Ustawienia → Leasing360 → URL sygnetu; najprościej
* ustawić go przyciskiem „Pobierz grafiki z prototypu”. */
.l360-hero-light::after {
content: '';
position: absolute; right: -4%; top: 4%;
width: min(34%, 400px); aspect-ratio: 1;
background: var(--l360-hero-mark, none) no-repeat center/contain;
opacity: .035; pointer-events: none; z-index: 0;
}
.l360-hero-light > * { position: relative; z-index: 1; }
/* --- 23.2 NAGŁÓWKI SEKCJI ----------------------------------------------- */
/* Prototyp wyrównuje nagłówki do lewej i nie używa nadrzędnych „kickerów". */
.l360-sectionhead { max-width: 860px; }
.l360-sectionhead .l360-lead { max-width: 78ch; }
/* --- 23.3 MARQUEE PARTNERÓW --------------------------------------------- */
/* Prototyp: białe karty na jasnym tle, jeden rząd, delikatny cień. */
.l360-marquee__item {
height: 78px; min-width: 170px; max-width: 200px; padding: 0 16px;
font-size: 15px; font-weight: 500; line-height: 1.3;
border-radius: 18px;
border-color: rgba(26,44,232,.15);
box-shadow: 0 1px 2px rgba(10,10,15,.04);
text-align: center; white-space: normal;
}
.l360-marquee--compact .l360-marquee__item { height: 58px; min-width: 140px; font-size: 14px; }
.l360-marquee { padding: 0; }
/* --- 23.4 KROKI PROCESU -------------------------------------------------- */
/* Prototyp: okrągły numer, brak paska akcentu, subtelniejsza karta. */
.l360-step__num {
border-radius: 50%; width: 34px; height: 34px; font-size: 14px;
margin-bottom: var(--l360-s-3); background: var(--l360-primary); box-shadow: none;
}
.l360-step::before { display: none; }
/* Promień 22 px zmierzony w prototypie — nasze 14 px sprawiało, że karty
* wyglądały „ostrzej" niż wzorzec. */
.l360-step { padding: var(--l360-s-5); border-radius: 22px; }
.l360-step__title { font-size: 16px; margin-bottom: 6px; }
.l360-step__desc { font-size: 14px; line-height: 1.55; }
/* Kreski łączące kroki istnieją tylko w układzie jednorzędowym */
.l360-steps--2col.l360-steps--connected .l360-step::after { display: none; }
/* --- 23.5 KARTY USŁUG ---------------------------------------------------- */
/* Prototyp nie ma kafelka z ikoną — tytuł zaczyna kartę. */
.l360-service__ico { display: none; }
.l360-service { border-radius: 22px; padding: var(--l360-s-5); gap: var(--l360-s-2); }
.l360-service__title { font-size: 16px; }
.l360-service__desc { font-size: 14px; line-height: 1.55; }
/* --- 23.6 TABELA PORÓWNAWCZA -------------------------------------------- */
/* Prototyp:
• nagłówek: lewa komórka CIEMNA z białym tekstem WERSALIKAMI,
prawa NIEBIESKA — obie wyśrodkowane, bez ikon,
• wiersze kompaktowe (~15px wysokości linii), naprzemienne tło,
• stopka JASNONIEBIESKA z granatowym tekstem (u nas była czarna). */
.l360-compare { border-radius: var(--l360-r-md); box-shadow: var(--l360-sh-sm); }
.l360-compare__head > div {
padding: 14px 18px;
justify-content: center; text-align: center;
font-size: 14px;
}
.l360-compare__head .is-them {
color: #fff; background: #0B0E1A;
text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.l360-compare__head .is-us { color: #fff; background: var(--l360-primary); }
.l360-compare__head .is-us::after { display: none; }
.l360-compare__head svg { display: none; }
.l360-compare__row > div { padding: 9px 18px; font-size: 14px; line-height: 1.45; align-items: center; }
.l360-compare__row .is-them { background: var(--l360-surface); }
.l360-compare__row:nth-child(odd) .is-them { background: var(--l360-surface-2); }
.l360-compare__row:nth-child(odd) .is-us { background: #F7F9FF; }
.l360-compare__row .is-us { font-weight: 500; }
.l360-compare__ico { width: 17px; height: 17px; margin-top: 0; }
.l360-compare__foot {
background: #EEF3FF; color: var(--l360-ink);
padding: 18px var(--l360-s-6);
font-size: 17px; font-weight: 700;
justify-content: center;
}
.l360-compare__foot img { width: 34px; }
/* Kolumna z obrazem obok tabeli — prototyp ma wąskie, wysokie zdjęcie */
.l360-compare-media img {
width: 100%; height: 100%; min-height: 320px; max-height: 380px;
object-fit: cover; border-radius: var(--l360-r-md);
}
/* --- 23.7 SEKCJA „O NAS" JAKO KARTA ------------------------------------- */
/* Prototyp umieszcza całą sekcję w jasnoniebieskiej karcie z ramką. */
.l360-panel {
background: #F5F8FF;
border: 1px solid #E2E9FB;
border-radius: var(--l360-r-lg);
padding: clamp(28px, 4vw, 52px);
}
@media (max-width: 767px) { .l360-panel { padding: 22px; } }
/* --- 23.8 OPINIE --------------------------------------------------------- */
/* Prototyp: 4 karty w rzędzie, bez gwiazdek i strzałek, podpis wersalikami. */
.l360-tst__stars, .l360-tst__nav { display: none; }
.l360-tst__role { display: none; }
.l360-tst__name {
font: 700 11.5px/1.3 var(--l360-font-body);
letter-spacing: .1em; text-transform: uppercase; color: var(--l360-muted);
}
.l360-tst__quote { font-size: 14.5px; line-height: 1.6; }
/* --- 23.9 CASE STUDIES --------------------------------------------------- */
.l360-case__k { color: var(--l360-primary); font-weight: 700; }
.l360-case__title { font-size: 19px; }
/* --- 23.10 FAQ ----------------------------------------------------------- */
/* Prototyp: płaskie wiersze z cienką linią u dołu, bez kart, bez tła i bez
* odstępów między pozycjami. Wartości zmierzone 1:1 na leasing360.online:
* • wiersz 53 px (padding 16 px góra/dół + wiersz tekstu 20 px)
* • pytanie 600 14/20 px, kolor „ink"
* • linia 1 px rgba(marka, .15) — chłodniejsza niż nasz --l360-line
* • kolumna 896 px (max-w-4xl), wyśrodkowana
* U nas FAQ miało karty z ramką, odstęp 12 px między nimi i pytanie 17 px,
* przez co jeden wiersz zajmował 81 px, a cała sekcja była o ~570 px wyższa
* od wzorca — to była najbardziej rzucająca się w oczy różnica na stronie. */
.l360-faq__item {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(26,44,232,.15) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.l360-faq { gap: 0; }
.l360-faq__q {
padding: 16px 0;
font: 600 14px/20px var(--l360-font-body);
color: var(--l360-ink);
gap: var(--l360-s-4);
}
.l360-faq__q:hover { color: var(--l360-primary); }
.l360-faq__a { padding: 0; }
.l360-faq__a p { padding: 0 40px 16px 0; font-size: 14px; line-height: 1.65; }
/* Ikona: cienki chevron bez tła (prototyp), obracany przy otwarciu. */
.l360-faq__icon {
width: 20px; height: 20px; border-radius: 0;
background: transparent; color: var(--l360-muted);
}
.l360-faq__icon svg { width: 18px; height: 18px; }
.l360-faq__item.is-open .l360-faq__icon {
transform: rotate(180deg); background: transparent; color: var(--l360-primary);
}
.l360-faq__item.is-open { border-color: rgba(26,44,232,.15); box-shadow: none; }
/* Wąska, wyśrodkowana kolumna — prototyp trzyma FAQ w 896 px na środku. */
.l360-narrow { max-width: 896px; margin-inline: auto; width: 100%; }
/* Nagłówek FAQ nie jest wyśrodkowany — stoi przy lewej krawędzi kolumny. */
.l360-narrow .l360-sectionhead { max-width: none; }
/* Zabezpieczenie dla stron zaimportowanych ze STARSZEJ wersji szablonu,
* w której kontener .l360-narrow jeszcze nie istniał. Bez tego FAQ dziedziczy
* szerokość .l360-sectionhead (860 px) i przykleja się do lewej krawędzi
* sekcji zamiast stać na środku. Zwężamy wtedy całą kolumnę sekcji, żeby
* nagłówek, lista i przyciski pozostały w jednej osi. */
.l360-section:has(.l360-faq) .e-con-inner { max-width: 896px; margin-inline: auto; }
.l360-section:has(.l360-faq) .l360-sectionhead { max-width: none; }
/* --- 23.11 CTA BANNER ---------------------------------------------------- */
/* Prototyp: jasnoniebieska karta z ramką, tekst po lewej, przycisk po prawej. */
.l360-cta {
background: linear-gradient(120deg, #F2F6FF 0%, #FAFBFF 100%) !important;
border: 1px solid #E2E9FB;
color: var(--l360-ink) !important;
}
.l360-cta .l360-cta__title { color: var(--l360-ink) !important; }
.l360-cta .l360-cta__text { color: var(--l360-muted) !important; }
/* --- 23.12 STOPKA -------------------------------------------------------- */
/* Prototyp ma stopkę JASNĄ, nie ciemną. */
.l360-footer {
background: #F4F7FF !important;
color: var(--l360-muted) !important;
border-top: 1px solid var(--l360-line-soft);
}
.l360-footer a { color: var(--l360-muted) !important; }
.l360-footer a:hover { color: var(--l360-primary) !important; }
.l360-footer h4,
.l360-footer .elementor-heading-title { color: var(--l360-ink) !important; }
.l360-footer__bottom { border-top-color: var(--l360-line) !important; }
.l360-footer .l360-phone,
.l360-footer .l360-phone span { color: var(--l360-ink) !important; }
/* --- 23.13 FORMULARZ (Forminator) --------------------------------------- */
/* Prototyp: pary pól w dwóch kolumnach, bez czerwonych gwiazdek,
bez etykiety nad zgodą, kompaktowe odstępy. */
.l360-formcard { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--l360-line-soft); }
.l360-formcard__title { font-size: 20px; }
.forminator-ui.forminator-custom-form .forminator-required,
.forminator-ui.forminator-custom-form .forminator-label .forminator-required { display: none !important; }
.forminator-ui.forminator-custom-form .forminator-label {
font-size: 12px !important; font-weight: 500 !important; /* zmierzone w prototypie */
color: var(--l360-ink) !important; margin-bottom: 4px !important;
line-height: 1.3 !important;
}
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form select {
height: 40px !important; padding: 4px 12px !important;
font-size: 14px !important;
border-radius: var(--l360-r-btn) !important;
}
.forminator-ui.forminator-custom-form .forminator-row { margin-bottom: 12px !important; }
/* UKŁAD DWUKOLUMNOWY FORMULARZA
---------------------------------------------------------------------------
Prototyp stawia obok siebie pary: „Wartość (PLN) + Firma działa" oraz
„Telefon + E-mail". Forminator generuje każde pole w osobnym wierszu,
przez co karta była prawie dwa razy wyższa niż wzorzec i spychała nagłówek
hero w dół.
Wiersze dostają `display: contents`, więc kolumny stają się bezpośrednimi
elementami siatki formularza i można sterować ich szerokością.
WAŻNE: podział opieramy na SEMANTYCZNYCH KLASACH pól, które Forminator
nadaje kolumnom (forminator-field-number, -phone, -email, -select, -consent),
a nie na pozycji wiersza. Wersja oparta na :nth-of-type() trafiała o jeden
wiersz obok, bo formularz zawiera dodatkowy, niewidoczny wiersz z polem
ukrytym (hidden-1) — stąd „Firma działa" rozciągało się na całą szerokość.
Uwaga: `display: contents` kasuje pudełko wiersza, więc jego margin-bottom
przestaje działać. Odstępy pionowe daje teraz row-gap siatki. */
@media (min-width: 768px) {
.l360-formcard .forminator-custom-form form,
.l360-formcard form.forminator-ui {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 12px;
row-gap: 14px;
}
.l360-formcard .forminator-row { display: contents; }
.l360-formcard .forminator-row > .forminator-col { grid-column: span 2; }
/* Połówki: Wartość (number) + Firma działa (drugi select),
Telefon (phone) + E-mail (email). */
.l360-formcard .forminator-row > .forminator-col.forminator-field-number,
.l360-formcard .forminator-row > .forminator-col.forminator-field-phone,
.l360-formcard .forminator-row > .forminator-col.forminator-field-email { grid-column: span 1; }
/* „Firma działa" to select stojący bezpośrednio po polu liczbowym. */
.l360-formcard .forminator-row:has(> .forminator-col.forminator-field-number)
+ .forminator-row > .forminator-col.forminator-field-select { grid-column: span 1; }
/* Wiersz z polem ukrytym nie zajmuje miejsca w siatce.
*
* UWAGA: wiersz z przyciskiem wysyłki (.forminator-row-last) ma kolumnę
* BEZ klasy `forminator-field-*` — samo `.forminator-col`. Poprzednia
* reguła oparta na `:not([class*="forminator-field-"])` chowała więc
* przycisk „Sprawdź dostępne oferty" razem z polami ukrytymi. Celujemy
* wyłącznie w pola ukryte i zostawiamy wiersz wysyłki na pełnej szerokości. */
.l360-formcard .forminator-row.forminator-hidden,
.l360-formcard .forminator-row > .forminator-col.forminator-field-hidden { display: none; }
.l360-formcard .forminator-row.forminator-row-last > .forminator-col { grid-column: span 2; }
}
/* Etykieta pola zgody („Consent") jest zbędna — pełna treść zgody stoi
obok checkboxa. */
.forminator-ui.forminator-custom-form .forminator-field-consent .forminator-label,
.l360-formcard .forminator-col.forminator-field-consent .forminator-label { display: none !important; }
/* SELECT — UWAGA: Forminator NIE renderuje zwykłego