:root { --bg: #f6f3ee; --surface: #ffffff; --surface-soft: #fbfaf8; --ink: #0f2340; --ink-deep: #061a3b; --muted: #5f6b7a; --muted-2: #7a8799; --line: rgba(15, 35, 64, 0.10); --line-strong: rgba(15, 35, 64, 0.14); --primary: #ff7a1a; --primary-2: #ff8a35; --primary-dark: #e9680a; --primary-soft: #fff1e6; --primary-glow: rgba(255, 122, 26, 0.26); --navy: #061a3b; --navy-2: #0a2858; --navy-3: #0f2d61; --success: #1c9c63; --success-soft: #e7f5ec; --blue: #2563eb; --blue-soft: #e8efff; --radius-xl: 28px; --radius-lg: 22px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 999px; --shadow-soft: 0 18px 45px rgba(14, 33, 63, 0.08); --shadow-card: 0 12px 30px rgba(13, 31, 59, 0.08); --shadow-lift: 0 28px 60px rgba(14, 33, 63, 0.14); --max: 1180px; /* było 1280 — smuklejszy kontener */ --ease: cubic-bezier(.16,1,.3,1); /* ═══ ULTRA PRO — Design System tokens (13.05.2026) ═══ Dodane dla spójności kodu i łatwego refaktoru. Use: padding: var(--space-md) zamiast hardcoded "12px". */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --duration-fast: 0.15s; --duration-normal: 0.3s; --duration-slow: 0.5s; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Z-index scale — koniec z magic numbers (97, 998, 9988, 9999) */ --z-base: 1; --z-sticky: 100; --z-fixed: 500; --z-modal-backdrop: 999; --z-modal: 1000; --z-floating: 9000; --z-toast: 9500; --z-max: 9999; /* Focus ring — accessibility token */ --focus-ring: 0 0 0 3px rgba(255, 122, 26, 0.4); --focus-ring-dark: 0 0 0 3px rgba(255, 122, 26, 0.6); } /* ═══════════════════════════════════════════════════════════════════ ULTRA PRO — global accessibility focus styles (13.05.2026) Brand-consistent focus rings. WCAG 2.1 AAA: contrast 3:1 minimum. ═══════════════════════════════════════════════════════════════════ */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ═══════════════════════════════════════════════════════════════════ DARK THEME — profesjonalnie zaprojektowany wariant ciemny Aktywny automatycznie jeśli system ma dark mode lub użytkownik wybrał "ciemny" przez przełącznik (data-theme="dark" na ) ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a1124; /* deep navy, nie pure black */ --surface: #111a30; /* karty — odcinają się od bg */ --surface-soft: #0d1428; /* lekko ciemniejszy niż surface */ --ink: #e7ecf5; /* text primary — złamany biały, nie #fff */ --ink-deep: #f4f7fc; /* nagłówki — nieco jaśniejszy */ --muted: #a0abc0; /* wtórny tekst */ --muted-2: #7e8aa2; /* trzeciorzędny */ --line: rgba(231, 236, 245, 0.10); --line-strong: rgba(231, 236, 245, 0.18); --primary: #ff8c33; /* lekko jaśniejszy pomarańcz — lepszy kontrast na ciemnym */ --primary-2: #ffa255; --primary-dark: #ff7a1a; /* oryginalny jako hover/active */ --primary-soft: rgba(255, 140, 51, 0.12); /* przyciemnione tło pomarańczowe */ --primary-glow: rgba(255, 140, 51, 0.32); --navy: #0a1124; /* w dark mode navy = bg, żeby hero się zlał */ --navy-2: #0d1633; --navy-3: #122042; --success: #2dd985; /* jaśniejszy zielony */ --success-soft: rgba(45, 217, 133, 0.12); --blue: #4f81ff; /* jaśniejszy niebieski */ --blue-soft: rgba(79, 129, 255, 0.12); --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.4); --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.5); --shadow-lift: 0 28px 60px rgba(0, 0, 0, 0.6); } /* Korekty bezpośrednie — elementy które używają hardcoded kolorów */ body { background: radial-gradient(1200px 800px at 10% 0%, rgba(255, 140, 51, 0.06) 0%, transparent 55%), radial-gradient(1000px 700px at 90% 100%, rgba(79, 129, 255, 0.06) 0%, transparent 55%), var(--bg) !important; } /* Hero section — lżejsza wersja w dark mode */ .hero { background: linear-gradient(180deg, #0d1633 0%, #0a1124 100%) !important; } /* Karty usług / pakietów */ .pkg, .reviews-card, .how-card, .why-card { background: var(--surface) !important; border-color: var(--line) !important; } .pkg-featured { background: linear-gradient(180deg, var(--surface) 0%, rgba(255, 140, 51, 0.04) 100%) !important; border-color: rgba(255, 140, 51, 0.3) !important; } /* Formularz */ input[type="text"], input[type="tel"], input[type="email"], textarea, select { background: var(--surface-soft) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; } input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; background: var(--surface) !important; } /* Call widget — USUNIĘTE 9.05.2026 */ /* Nav — tło */ .nav-wrap { background: rgba(10, 17, 36, 0.85) !important; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } /* Sticky bottom bar */ .sticky-bottom { background: rgba(13, 20, 40, 0.95) !important; border-top: 1px solid var(--line) !important; } /* Modal */ .modal-content { background: var(--surface) !important; color: var(--ink) !important; } .modal-overlay { background: rgba(0, 0, 0, 0.8) !important; } /* Final CTA section — mocniejszy kontrast */ .finalcta { background: linear-gradient(135deg, #0d1633, #122042) !important; } /* FAQ */ details, .faq-item { background: var(--surface) !important; border-color: var(--line) !important; } /* Footer */ footer { background: #070d1f !important; border-top: 1px solid var(--line) !important; } /* Badges, pills, chips */ .badge, .pill, .chip, .eyebrow { background: var(--primary-soft) !important; color: var(--primary-2) !important; } /* Buttons drugorzędne */ .btn-outline, .btn-ghost, .btn-outline-blue { background: transparent !important; color: var(--ink) !important; border-color: var(--line-strong) !important; } .btn-outline:hover, .btn-outline-blue:hover { background: var(--surface-soft) !important; border-color: var(--primary) !important; } /* Obrazy i ikony które mogłyby być niewidoczne */ svg { color: inherit; } /* Selection color */ ::selection { background: rgba(255, 140, 51, 0.3); color: var(--ink-deep); } } /* Manualny tryb ciemny przez data-theme="dark" (niezależnie od systemu) */ :root[data-theme="dark"] { --bg: #0a1124; --surface: #111a30; --surface-soft: #0d1428; --ink: #e7ecf5; --ink-deep: #f4f7fc; --muted: #a0abc0; --muted-2: #7e8aa2; --line: rgba(231, 236, 245, 0.10); --line-strong: rgba(231, 236, 245, 0.18); --primary: #ff8c33; --primary-2: #ffa255; --primary-dark: #ff7a1a; --primary-soft: rgba(255, 140, 51, 0.12); --primary-glow: rgba(255, 140, 51, 0.32); --navy: #0a1124; --navy-2: #0d1633; --navy-3: #122042; --success: #2dd985; --success-soft: rgba(45, 217, 133, 0.12); --blue: #4f81ff; --blue-soft: rgba(79, 129, 255, 0.12); --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.4); --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.5); --shadow-lift: 0 28px 60px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] body { background: radial-gradient(1200px 800px at 10% 0%, rgba(255, 140, 51, 0.06) 0%, transparent 55%), radial-gradient(1000px 700px at 90% 100%, rgba(79, 129, 255, 0.06) 0%, transparent 55%), var(--bg); } :root[data-theme="dark"] .hero { background: linear-gradient(180deg, #0d1633 0%, #0a1124 100%); } :root[data-theme="dark"] .finalcta { background: linear-gradient(135deg, #0d1633, #122042); } :root[data-theme="dark"] footer { background: #070d1f; } :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--surface-soft); color: var(--ink); border-color: var(--line-strong); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(1200px 800px at 10% 0%, rgba(255,122,26,0.05) 0%, transparent 55%), radial-gradient(1000px 700px at 90% 100%, rgba(79,129,255,0.05) 0%, transparent 55%), var(--bg); color: var(--ink); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } /* FIX PSI 10.05.2026: film grain WYŁĄCZONY (był aktywny tylko desktop ≥900px). feTurbulence + mix-blend-mode = znacznie CPU cost przy każdym repaintcie. Dekoracja prawie niewidoczna (opacity 0.35) — wyłączenie nie zmienia visualnie. */ img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } .container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; } .section { padding: 88px 0; /* było 120px — smuklejsze */ } @media(max-width: 860px) { .section { padding: 56px 0; } } /* ── TYPOGRAFIA ── */ .eyebrow { /* FIX WCAG AA contrast (PSI 18:05): var(--primary) #ff7a1a = 3.32:1 (FAIL). var(--primary-dark) #e9680a = 4.0:1 (FAIL — wymagane 4.5:1). #b34800 = 5.5:1 (PASS AA dla body text 12px+ font weight 800). */ color: #b34800; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 24px; height: 2px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: 2px; } .eyebrow--light { color: rgba(255,160,90,0.98); } .eyebrow--center { justify-content: center; } .title { font-size: clamp(36px, 5.4vw, 74px); line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 22px; font-weight: 800; color: var(--ink); text-wrap: balance; } .title--light { color: #fff; } .title--center { text-align: center; } .title-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.015em; } .title .accent { background: linear-gradient(135deg, #ff9247 0%, #ff7a1a 55%, #e9680a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .title--light .accent { background: linear-gradient(135deg, #ffd29a 0%, #ff9247 60%, #ff7a1a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lead { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0 0 32px; max-width: 640px; font-weight: 400; letter-spacing: -0.005em; text-wrap: pretty; } .lead--center { margin-left: auto; margin-right: auto; text-align: center; } .lead--light { color: rgba(255,255,255,0.82); } /* ── PILLS / TAGS ── */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #fff; font-size: 13px; letter-spacing: .02em; font-weight: 500; } .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary-glow); } .tag { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: all .2s var(--ease); cursor: pointer; } .tag:hover { border-color: var(--primary); color: var(--primary); } .tag.active { background: var(--ink); color: #fff; border-color: var(--ink); } /* ═══ Klikalna wersja tag (link) — wariant z arrow icon i hover lift ═══ * Używane w "Dla kogo szukamy internetu?" — prowadzi do landing pages SEO * (/dla/duze-miasto/, /dla/dom-jednorodzinny/ itp.). * Benchmark: Uswitch UK (filter chips), Selectra FR (audience tags). */ a.tag.tag-link, .tag-link { text-decoration: none !important; position: relative; } a.tag.tag-link::after { content: " →"; font-weight: 700; margin-left: 2px; opacity: 0.6; transition: transform .2s var(--ease), opacity .2s var(--ease); display: inline-block; } a.tag.tag-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 122, 26, 0.18); border-color: var(--primary); color: var(--primary); } a.tag.tag-link:hover::after { transform: translateX(3px); opacity: 1; } a.tag.tag-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 0; border-radius: var(--radius-md); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s var(--ease); font-weight: 700; letter-spacing: -0.01em; font-size: 16px; text-align: center; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; } /* Shimmer sweep */ .btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); pointer-events: none; transition: left .7s var(--ease); z-index: 1; } .btn:hover::before { left: 120%; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, #ffa64d 0%, #ff7a1a 55%, #e9680a 100%); color: #1a1a1a; /* FIX AUDIT: WCAG 1.4.3 — białe na pomarańczowym = 2.79:1 (fail). Ciemny tekst na pomarańczowym = 7.2:1 (AAA pass). */ font-weight: 800; /* boost legibility */ box-shadow: 0 14px 30px var(--primary-glow), 0 4px 12px rgba(233, 104, 10, 0.28), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.08); } .btn-primary:hover { box-shadow: 0 22px 50px var(--primary-glow), 0 8px 20px rgba(233, 104, 10, 0.34), inset 0 1px 0 rgba(255,255,255,0.3); } .btn-dark { background: linear-gradient(135deg, #12366d 0%, #0a2858 55%, #061a3b 100%); color: #fff; box-shadow: 0 14px 28px rgba(8, 26, 58, 0.30), inset 0 1px 0 rgba(255,255,255,0.08); } .btn-dark:hover { box-shadow: 0 22px 44px rgba(8, 26, 58, 0.38), inset 0 1px 0 rgba(255,255,255,0.12); } .btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 8px 20px rgba(15,35,64,0.08); } .btn-outline-blue { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); } .btn-outline-blue:hover { background: var(--blue-soft); } .btn-block { width: 100%; } .btn-lg { min-height: 66px; font-size: 17px; padding: 0 34px; letter-spacing: -0.012em; } /* ═══ NAV ═══ */ .nav-wrap { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background: rgba(246, 243, 238, 0.78); border-bottom: 1px solid rgba(15,35,64,0.06); } .nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: -0.02em; font-size: 18px; } .brand-mark { width: 46px; height: 46px; border-radius: 15px; background: radial-gradient(circle at 30% 25%, rgba(255,210,150,0.55) 0%, transparent 45%), linear-gradient(135deg, #ffa64d 0%, #ff7a1a 50%, #e9680a 100%); display: grid; place-items: center; color: #fff; box-shadow: 0 14px 28px rgba(255,122,26,0.40), 0 4px 10px rgba(233,104,10,0.28), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.08); flex-shrink: 0; position: relative; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .brand-mark::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,0.35) 0%, transparent 45%); pointer-events: none; z-index: 1; } .brand-mark::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; background: radial-gradient(circle, rgba(255,122,26,0.22) 0%, transparent 70%); filter: blur(8px); opacity: .6; pointer-events: none; z-index: -1; transition: opacity .4s var(--ease); } .brand:hover .brand-mark { transform: scale(1.06) rotate(-4deg); box-shadow: 0 20px 40px rgba(255,122,26,0.48), 0 8px 16px rgba(233,104,10,0.34), inset 0 1px 0 rgba(255,255,255,0.45); } .brand:hover .brand-mark::after { opacity: 1; } .brand-mark svg { width: 24px; height: 24px; position: relative; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); } .brand { transition: opacity .2s; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-text b { font-weight: 800; letter-spacing: -0.025em; font-size: 18px; background: linear-gradient(135deg, var(--ink) 0%, #1a3968 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-text small { font-size: 10.5px; color: var(--muted); letter-spacing: .14em; text-transform: lowercase; font-weight: 600; margin-top: 4px; font-variant: small-caps; } .nav-links { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--ink); font-weight: 500; font-size: 15px; opacity: .78; transition: opacity .2s; } .nav-links a:hover { opacity: 1; color: var(--primary); } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-phone { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; align-items: flex-end; line-height: 1.2; } .nav-phone small { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; } .nav-phone a { display: flex; align-items: center; gap: 8px; } .nav-phone .phone-icon { color: var(--primary); } @media(max-width: 960px) { .nav-links, .nav-phone { display: none; } } /* ═══ BLOCK 1 — HERO (DARK NAVY with gradient mesh + noise) ═══ */ .hero { position: relative; background: radial-gradient(1400px 700px at 90% 10%, rgba(255, 138, 51, 0.38) 0%, transparent 55%), radial-gradient(1100px 600px at 10% 90%, rgba(99, 155, 255, 0.30) 0%, transparent 60%), radial-gradient(900px 500px at 55% 60%, rgba(189, 101, 255, 0.20) 0%, transparent 65%), radial-gradient(600px 400px at 30% 20%, rgba(255, 87, 34, 0.12) 0%, transparent 50%), linear-gradient(155deg, #071e47 0%, #0a1e52 40%, #041129 100%); color: #fff; border-radius: 32px; padding: 56px 64px 64px; overflow: hidden; margin: 12px 0 48px; contain: layout paint; /* FIX CLS: izolacja layoutu — animacje w ::after nie wpływają na CLS reszty strony */ box-shadow: 0 60px 120px rgba(6, 26, 59, 0.38), 0 30px 60px rgba(6, 26, 59, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 120px rgba(99, 155, 255, 0.04); } @media(max-width: 980px) { .hero { padding: 64px 24px 80px; border-radius: 22px; margin: 16px 0 48px; } } /* Film grain — DISABLED 10.05.2026 (PSI fix: feTurbulence + mix-blend-mode = CPU cost). */ .hero::before { content: ""; position: absolute; inset: 0; background-image: none; /* było: feTurbulence SVG noise — dekoracja, mało widoczna */ background-size: 240px 240px; pointer-events: none; opacity: 0; /* było: 1 z screen blend — wyłączone */ mix-blend-mode: screen; z-index: 1; } /* Aurora flow — STATYCZNA (animacja wyłączona dla wydajności CLS/TBT) PSI raportowało CLS 0.171 z heroAurora animation — element pozycjonowany przez `inset: -20%` z animowaną `transform` powodował wymuszone repainty. Statyczny gradient = zero CLS, ten sam efekt wizualny. */ .hero::after { content: ""; position: absolute; inset: 0; /* było -20% -10% — zatrzymane w obrębie hero */ background: conic-gradient(from 180deg at 30% 30%, transparent 0deg, rgba(255, 122, 26, 0.14) 80deg, transparent 160deg, rgba(99, 155, 255, 0.10) 260deg, transparent 340deg), conic-gradient(from 0deg at 70% 80%, transparent 0deg, rgba(189, 101, 255, 0.08) 120deg, transparent 240deg); filter: blur(50px); pointer-events: none; z-index: 0; opacity: 0.7; /* animation: heroAurora — DISABLED (PSI: CLS contribution 0.171) */ /* will-change: usunięte — nie potrzeba bez animacji */ } @keyframes heroGlow { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(10deg) scale(1.05); } } /* Floating SVG orbs inside hero (added via JS or markup) */ .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); opacity: .28; /* było 0.45 → stonowane */ z-index: 0; } /* FIX PSI 10.05.2026: orby STATYCZNE (CPU non-stop animation kosztował 5-10% performance). Wizualnie wyglądają identycznie — tylko nie pulsują/floatują. */ .hero-orb-1 { width: 200px; height: 200px; top: 10%; right: 30%; background: radial-gradient(circle, rgba(255,122,26,0.4) 0%, transparent 70%); /* animation: orbFloat1 36s ease-in-out infinite; — DISABLED (PSI fix) */ } .hero-orb-2 { width: 240px; height: 240px; bottom: -2%; left: 35%; background: radial-gradient(circle, rgba(99,155,255,0.26) 0%, transparent 70%); /* animation: orbFloat2 48s ease-in-out infinite; — DISABLED (PSI fix) */ } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; } @media(max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } /* FORM FIRST na mobile — user widzi CTA od razu, nie musi scrollować */ .hero-form { order: -1; } .hero-text { order: 1; } } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.92); margin-bottom: 24px; } .hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 14px rgba(255,122,26,0.7); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.35); } } .hero-h1 { font-size: clamp(38px, 4.6vw, 60px); /* desktop cap 60 (było 74) — formularz wyżej w viewporcie */ line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; margin: 0 0 18px; color: #fff; text-wrap: balance; } .hero-h1 .accent { color: var(--primary); background: linear-gradient(135deg, #ffd29a 0%, #ff9247 35%, #ff7a1a 65%, #ffb176 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; /* FIX TBT (PSI: nieskomponowana animacja background-position-x): animacja gradientShift na background-position powoduje repainty. Statyczny gradient = ten sam efekt wizualny + zero blocking time. */ } .hero-h1-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.015em; color: rgba(255,255,255,0.94); display: inline-block; position: relative; } .hero-h1-serif::after { content: ""; position: absolute; bottom: 0.06em; left: 4%; right: 4%; height: 0.12em; background: linear-gradient(90deg, transparent, rgba(255, 181, 118, 0.55), transparent); border-radius: 2px; opacity: .85; } .hero-sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 28px; max-width: 540px; font-weight: 400; } .hero-sub strong { color: #fff; font-weight: 700; } /* FIX 14.05.2026 (Clarity: dead clicks na "wiodacych operatorow"). Zamiana strong -> link do #oferty */ .hero-sub-link { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 122, 26, 0.6); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .2s; } .hero-sub-link:hover, .hero-sub-link:focus-visible { text-decoration-color: #ff7a1a; } .hero-sub-link strong { color: #fff; } /* ═══ HERO MOBILE PHONE-FIRST CTA 14.05.2026 — Selectra FR pattern * Mobile-only direct-call shortcut (Clarity: 60% mobile + 49s active time). * Daje alt path dla userów którzy nie chcą wypełniać form. */ .hero-mobile-call { display: none; } @media (max-width: 768px) { .hero-mobile-call { display: flex; align-items: center; gap: 14px; position: relative; margin: 4px 0 18px; padding: 14px 18px; background: linear-gradient(135deg, #ff7a1a 0%, #ff9247 100%); border-radius: 16px; color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 8px 22px rgba(255, 122, 26, 0.32), 0 2px 6px rgba(255, 122, 26, 0.18), inset 0 1px 0 rgba(255,255,255,0.18); overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .15s ease; min-height: 64px; } .hero-mobile-call:active { transform: scale(.97); box-shadow: 0 4px 12px rgba(255, 122, 26, 0.25); } .hmc-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #fff; } .hmc-text { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; } .hmc-label { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.94); letter-spacing: 0.01em; } .hmc-number { font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; } .hmc-pulse { position: absolute; top: 50%; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translateY(-50%); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: hmcPulse 1.8s ease-out infinite; } @keyframes hmcPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } @media (prefers-reduced-motion: reduce) { .hmc-pulse { animation: none; } .hero-mobile-call { transition: none; } } } /* ═══ HERO PRICE ANCHOR — Uswitch/BroadbandNow style starting price ═══ * Psychologicznie: konkretna kwota startowa "od 49 zł" zwiększa CR. * UOKiK compliance: "od X zł" + disclaimer o ofercie promocyjnej operatora. */ .hero-price-anchor { margin: 4px 0 16px; padding: 14px 18px; background: linear-gradient(135deg, rgba(255, 122, 26, 0.10) 0%, rgba(255, 122, 26, 0.04) 100%); border: 1px solid rgba(255, 122, 26, 0.30); border-radius: 14px; max-width: 540px; box-shadow: 0 2px 8px rgba(255, 122, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .hero-price-anchor-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero-price-anchor-item { display: inline-flex; align-items: baseline; gap: 4px; color: #ffffff; font-family: 'Inter', system-ui, sans-serif; } .hero-price-anchor-from { font-size: 12px; color: rgba(255, 255, 255, 0.70); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .hero-price-anchor-amount { font-size: 22px; font-weight: 800; color: #ffb278; /* lighter orange tint na ciemnym tle */ letter-spacing: -0.02em; line-height: 1; } .hero-price-anchor-period { font-size: 13px; color: rgba(255, 255, 255, 0.85); font-weight: 600; margin-left: -2px; } .hero-price-anchor-speed { font-size: 13px; color: rgba(255, 255, 255, 0.72); font-weight: 500; margin-left: 4px; } .hero-price-anchor-divider { width: 1px; height: 28px; background: rgba(255, 255, 255, 0.18); } .hero-price-anchor-disclaimer { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); font-style: italic; letter-spacing: 0.005em; } .hero-price-anchor-disclaimer strong { color: rgba(255, 255, 255, 0.78); font-weight: 600; font-style: normal; } @media (max-width: 480px) { .hero-price-anchor-row { gap: 10px; } .hero-price-anchor-divider { display: none; } .hero-price-anchor-item { width: 100%; } .hero-price-anchor-amount { font-size: 20px; } } /* ═══ HERO FRESHNESS SIGNAL — Selectra FR / Uswitch UK pattern * Sygnał aktualności bazy ofert ("ostatnia weryfikacja: dziś"). * Pulsing green dot — sub-conscious "live data" signal. * Wzmacnia zaufanie (E-E-A-T) i CR (klient czuje że dane są świeże). */ .hero-freshness { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 6px 12px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.22); border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, 0.78); letter-spacing: -0.005em; } /* CLS FIX 13.05.2026: box-shadow animation → transform pseudo-element PSI flagged "nieskomponowana animacja" — box-shadow nie jest GPU-composable, wymuszal repaint co frame. Teraz transform scale na ::after = GPU layer, 0 reflow. */ .hero-freshness-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex-shrink: 0; position: relative; will-change: transform; } .hero-freshness-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(16, 185, 129, 0.65); transform: scale(1); opacity: 1; animation: freshnessPulse 2.5s ease-out infinite; will-change: transform, opacity; pointer-events: none; } @keyframes freshnessPulse { 0% { transform: scale(1); opacity: 0.65; } 70% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-freshness-dot::after { animation: none; } } .hero-freshness-text strong { color: #ffffff; font-weight: 700; } .hero-freshness time { color: rgba(255, 255, 255, 0.92); font-weight: 600; white-space: nowrap; } .hero-broker-note { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 24px; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(255,181,118,0.22); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.88); letter-spacing: -0.005em; max-width: 540px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .hero-broker-note-icon { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; color: #ffb278; } .hero-broker-note-icon svg { width: 100%; height: 100%; } .hero-broker-note strong { color: #fff; font-weight: 700; } .hero-bullets { list-style: none; padding: 0; margin: 8px 0 32px; display: flex; flex-direction: column; gap: 12px; } .hero-bullets li { display: flex; align-items: center; gap: 14px; font-size: 16.5px; color: rgba(255,255,255,0.88); letter-spacing: -0.005em; } .hero-bullets .check { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,122,26,0.28) 0%, rgba(255,122,26,0.14) 100%); border: 1px solid rgba(255,122,26,0.32); color: #ffb278; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(255,122,26,0.18), inset 0 1px 0 rgba(255,255,255,0.1); } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 40px; padding: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.2); } .hero-stat { text-align: left; padding: 22px 20px; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); transition: background .3s var(--ease); } .hero-stat:hover { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); } .hero-stat-val { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; margin-bottom: 8px; font-feature-settings: "tnum"; } .hero-stat-val .accent { background: linear-gradient(135deg, #ffc58a 0%, #ff8a35 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-stat-lbl { font-size: 11px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: .12em; line-height: 1.35; font-weight: 600; } @media(max-width: 560px) { .hero-stats { grid-template-columns: 1fr 1fr; } } .hero-google { margin-top: 20px; padding: 16px 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); display: flex; align-items: center; gap: 14px; } .hero-google-logo { width: 36px; height: 36px; flex-shrink: 0; background: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #4285F4; font-size: 16px; letter-spacing: -0.05em; } .hero-google-stars { color: #fbbf24; letter-spacing: 2px; margin-bottom: 3px; } .hero-google-txt { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.35; } .hero-google-txt strong { color: #fff; } /* ═══ HERO OPERATORS LOGO — Orange + Nju FTTH ═══ */ .hero-operators { margin-top: 16px; padding: 14px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; } .hero-operators-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); font-weight: 600; } .hero-operators-grid { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .hero-op-logo { display: inline-block; width: 92px; height: 38px; border-radius: 6px; user-select: none; object-fit: contain; transition: transform .25s var(--ease); } .hero-op-logo:hover { transform: translateY(-2px); } /* Legal disclaimer pod logo w hero (art. 156 PWP) */ .hero-op-legal { font-size: 10px; color: rgba(255,255,255,0.45); margin: 8px 0 0; font-style: italic; letter-spacing: 0.01em; } /* ═══ HERO OPERATORS — fallback gdy PNG 404 (onerror → styled span) * Brand colors per oficjalne brandbooki: * Orange #ff7900 BG / #ffffff text * Nju #00B5D2 BG / #C8DA22 text (cyan + lime) * Renderowanie: pill 92x38 (zgodne z img placeholder), bold, nie wygląda jak broken. */ .hero-op-fb { display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 38px; border-radius: 6px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-size: 17px; letter-spacing: -0.04em; user-select: none; transition: transform .25s var(--ease); } .hero-op-fb:hover { transform: translateY(-2px); } .hero-op-fb sup { font-size: 8px; font-weight: 700; margin-left: 1px; vertical-align: super; line-height: 1; } .hero-op-fb-orange { background: #ff7900; color: #ffffff; } .hero-op-fb-nju { background: #00B5D2; color: #C8DA22; letter-spacing: -0.02em; } .hero-op-more { font-size: 12px; color: rgba(255,255,255,0.55); font-style: italic; padding-left: 4px; } @media (max-width: 560px) { .hero-op-logo, .hero-op-fb { width: 80px; height: 34px; font-size: 15px; } } /* ── HERO FORM CARD ── */ .hero-form { background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%); color: var(--ink); border-radius: 28px; padding: 36px; box-shadow: 0 50px 120px rgba(0,0,0,0.40), 0 24px 50px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.6); position: relative; z-index: 2; isolation: isolate; } /* Soft aura behind card */ .hero-form::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255,122,26,0.22) 0%, transparent 70%); filter: blur(32px); pointer-events: none; } .hero-form::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%, rgba(255,122,26,0.18) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .hero-form h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.028em; margin: 0 0 8px; color: var(--ink); line-height: 1.1; } .hero-form-sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; } .hero-form-strip { display: flex; gap: 8px; margin-bottom: 20px; } .hero-form-strip-item { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; color: var(--muted); font-weight: 600; } .hero-form-strip-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } /* ─── HERO RIGHT EXTRA — wypelnienie pustej przestrzeni pod formularzem FIX 10.05.2026 v2: .hero-form ma biale tlo (#ffffff -> #fbfaf8), wiec uzywamy CIEMNYCH tekstow (var(--ink) / var(--muted)) zamiast bialych. Stylistycznie pasuje do form card. ─── */ .hero-right-extra { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 14px; } .hero-roadmap-title { font-size: 12px; font-weight: 700; margin: 0 0 14px 0; color: var(--primary, #ff7a1a); text-transform: uppercase; letter-spacing: 0.7px; } .hero-roadmap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .hero-roadmap-list li { display: flex; align-items: flex-start; gap: 12px; } .hero-roadmap-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #ff7a1a, #ff9c3f); color: #fff; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(255,122,26,0.3); } .hero-roadmap-content { flex: 1; min-width: 0; } .hero-roadmap-content strong { display: block; color: var(--ink, #061a3b); font-size: 13.5px; font-weight: 700; margin-bottom: 2px; line-height: 1.3; } .hero-roadmap-content span { display: block; color: var(--muted, #5a6b85); font-size: 12px; line-height: 1.45; } .hero-phone-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, #fff5eb 0%, #ffe4cc 100%); border: 1px solid rgba(255, 122, 26, 0.32); border-radius: 14px; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .hero-phone-cta:hover { border-color: rgba(255, 122, 26, 0.6); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255, 122, 26, 0.18); } .hero-phone-cta-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ff7a1a, #ff9c3f); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(255,122,26,0.35); } .hero-phone-cta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hero-phone-cta-label { font-size: 11px; color: #b34800; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .hero-phone-cta-number { font-size: 18px; font-weight: 800; color: var(--ink, #061a3b); letter-spacing: -0.3px; line-height: 1.15; white-space: nowrap; } .hero-phone-cta-hours { font-size: 11px; color: var(--muted, #5a6b85); margin-top: 1px; } @media (max-width: 980px) { /* Na mobile form jest na gorze a tekst pod nim — ukrywamy filler, zeby user nie musial scrollowac przez to zeby dotrzec do hero-text */ .hero-right-extra { display: none; } } /* ─── FORM PROGRESS BAR — Endowed Progress Effect (Baymard 2024) ─── */ .form-progress { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0; } .form-progress-dot { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; flex-shrink: 0; background: rgba(255, 122, 26, 0.10); color: var(--primary-dark); border: 1.5px solid rgba(255, 122, 26, 0.35); transition: all .25s ease; } .form-progress-dot.active { background: var(--primary); color: #fff; border-color: var(--primary); } .form-progress-dot.done { background: var(--success); color: #fff; border-color: var(--success); font-size: 10px; } .form-progress-bar { flex: 1; height: 2px; background: rgba(15, 35, 64, 0.10); border-radius: 999px; position: relative; overflow: hidden; } .form-progress-bar-fill { position: absolute; inset: 0; width: 0%; background: var(--success); border-radius: 999px; transition: width .35s ease; } .form-progress.advanced .form-progress-bar-fill { width: 100%; } .form-progress-text { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: -0.005em; white-space: nowrap; transition: color .25s ease; } .form-progress.advanced .form-progress-text { color: var(--primary-dark); } /* ─── Tab switcher (B2C / B2B) ─── */ .form-tabs { display: flex; gap: 0; margin-bottom: 18px; padding: 4px; background: var(--surface-soft); border-radius: var(--radius-sm); border: 1px solid var(--line); } .form-tab { flex: 1; padding: 10px 14px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; font-family: inherit; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s, box-shadow .2s; } .form-tab svg { width: 16px; height: 16px; } .form-tab:hover { color: var(--ink); } .form-tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(6,26,59,0.04), 0 4px 10px rgba(6,26,59,0.06); } .form-panel[hidden] { display: none; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px){ .form-grid-2 { grid-template-columns: 1fr; } } /* ═══ 2-STEP FORM — adres → telefon (Baymard 2-step pattern) ═══ */ .form-step { animation: stepFadeIn 0.3s var(--ease); } .form-step[hidden] { display: none !important; } @keyframes stepFadeIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .form-step-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--success-soft); border: 1px solid rgba(28,156,99,0.18); border-radius: 10px; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--ink); } .form-step-summary svg { color: var(--success); flex-shrink: 0; } .form-step-summary span { flex: 1; } .form-step-back { background: transparent; border: none; color: var(--primary); font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .15s; } .form-step-back:hover { background: rgba(255,122,26,0.08); } .form-step-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .form-step { animation: none; } } /* ═══ MOBILE LIFT — formularz musi WIDOCZNIE "wyskakiwać" z tła na telefonie ═══ Problem: na jasnym tle (#f6f3ee) delikatne cienie z desktopu giną. Fix: mocniejsza elewacja + kolorowy ring + aura pomarańczowa. */ @media (max-width: 860px){ .hero-form { padding: 28px 22px; border-radius: 22px; /* Warstwowy cień — głęboka projekcja + bliski "pop" + subtelny ring */ box-shadow: 0 32px 64px -14px rgba(12, 19, 64, 0.38), 0 16px 32px -10px rgba(12, 19, 64, 0.20), 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(12, 19, 64, 0.10); /* ciemny ring = definicja krawędzi */ margin: 14px 6px 28px; /* oddech = cień widoczny */ /* Dodatkowy outline-ring który nie zabiera przestrzeni layout */ outline: 1px solid rgba(255, 122, 26, 0.12); outline-offset: -1px; } /* Aura pomarańczowa — mocniejsza, bardziej "magnes na oko" */ .hero-form::before { inset: -20px -10px; background: radial-gradient(ellipse 80% 65% at 50% 42%, rgba(255, 122, 26, 0.30) 0%, transparent 72%); filter: blur(28px); } .hero-form h2 { font-size: 22px; } .hero-form-sub { font-size: 13px; margin-bottom: 16px; } } /* Bardzo małe ekrany (<420px) — proporcjonalnie mniej paddingu, ale cień zostaje */ @media (max-width: 420px){ .hero-form { padding: 24px 18px; border-radius: 20px; margin: 12px 2px 24px; } .hero-form::before { inset: -16px -6px; } } .form-badge-biz { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(79,129,255,0.08); border: 1px solid rgba(79,129,255,0.22); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: #2c5cbd; margin-bottom: 14px; } .form-badge-biz svg { width: 14px; height: 14px; } .hero-steps { display: flex; gap: 6px; align-items: center; margin-bottom: 20px; } .hero-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; } .hero-step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-soft); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; color: var(--muted); } .hero-step.active .hero-step-n { background: var(--ink); color: #fff; border-color: var(--ink); } .hero-step-arrow { color: var(--line-strong); font-size: 14px; } .form-group { margin-bottom: 10px; } /* ═══════════════════════════════════════════════════════════════════ VALUE PROPOSITION — profesjonalny info-box, fakty zamiast manipulacji ═══════════════════════════════════════════════════════════════════ */ .value-hook { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: rgba(15,35,64,0.04); border-left: 3px solid var(--ink, #061a3b); border-radius: 6px; } .value-hook-icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--ink, #061a3b); display: grid; place-items: center; flex-shrink: 0; } .value-hook-content { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; } .value-hook-stat { font-size: 13.5px; font-weight: 600; color: var(--ink, #061a3b); letter-spacing: -0.005em; } .value-hook-sub { font-size: 12px; color: var(--muted, #5f6b7a); } /* ═══════════════════════════════════════════════════════════════════ FORM LABELS — based on Nielsen Norman Group research "Forms with always-visible labels perform better than placeholder-only" ═══════════════════════════════════════════════════════════════════ */ .form-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink, #061a3b); letter-spacing: -0.005em; user-select: none; } .form-label .label-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--muted, #5f6b7a); flex-shrink: 0; } .form-label .label-required { color: var(--orange-500, #ff7a1a); font-weight: 700; margin-left: 2px; } /* ═══════════════════════════════════════════════════════════════════ CONTACT CHANNEL — radio buttons (telefon vs SMS) NEW 6.05.2026 ═══════════════════════════════════════════════════════════════════ */ .contact-channel { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; padding: 14px 16px; background: rgba(255,122,26,0.04); border: 1px solid rgba(255,122,26,0.15); border-radius: 12px; } .contact-channel-label { font-size: 12.5px; font-weight: 600; color: var(--ink, #061a3b); margin-bottom: 4px; letter-spacing: -0.005em; } .channel-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: white; border: 1px solid rgba(15,35,64,0.08); border-radius: 10px; cursor: pointer; transition: all .2s var(--ease, cubic-bezier(0.4,0,0.2,1)); position: relative; } .channel-option:hover { border-color: rgba(255,122,26,0.3); background: #fffbf6; } .channel-option input[type="radio"] { flex-shrink: 0; appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid rgba(15,35,64,0.25); border-radius: 50%; background: white; cursor: pointer; transition: all .2s var(--ease, cubic-bezier(0.4,0,0.2,1)); position: relative; margin: 0; } .channel-option input[type="radio"]:checked { border-color: var(--orange-500, #ff7a1a); background: var(--orange-500, #ff7a1a); box-shadow: inset 0 0 0 3px white; } .channel-option input[type="radio"]:focus-visible { outline: 2px solid var(--orange-500, #ff7a1a); outline-offset: 2px; } .channel-option:has(input:checked) { border-color: var(--orange-500, #ff7a1a); background: #fffaf3; box-shadow: 0 2px 8px rgba(255,122,26,0.12); } .channel-icon { flex-shrink: 0; width: 32px; height: 32px; background: rgba(255,122,26,0.1); color: var(--orange-500, #ff7a1a); border-radius: 8px; display: grid; place-items: center; transition: all .2s var(--ease, cubic-bezier(0.4,0,0.2,1)); } .channel-option:has(input:checked) .channel-icon { background: var(--orange-500, #ff7a1a); color: white; } .channel-text { flex: 1; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; } .channel-text strong { font-size: 13.5px; font-weight: 600; color: var(--ink, #061a3b); letter-spacing: -0.01em; } .channel-text small { font-size: 11.5px; color: var(--muted, #5f6b7a); font-weight: 400; } @media (max-width: 480px) { .contact-channel { padding: 12px; } .channel-option { padding: 9px 10px; gap: 10px; } .channel-icon { width: 28px; height: 28px; } .channel-text strong { font-size: 13px; } .channel-text small { font-size: 11px; } } /* ═══════════════════════════════════════════════════════════════════ ROZDZIELONE POLE ULICA — Ulica / Nr domu / Nr mieszkania ═══════════════════════════════════════════════════════════════════ */ .form-grid-street { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; } .form-grid-street .form-group { margin-bottom: 0; } .label-helper-text { font-size: 11px; font-weight: 400; color: var(--muted, #5f6b7a); margin-left: 4px; font-style: normal; } @media (max-width: 480px) { .form-grid-street { grid-template-columns: 1fr 1fr; gap: 8px; } } /* ═══════════════════════════════════════════════════════════════════ CTA MICROFACTS — fakty, bez ikon, bez sprzedażowego języka ═══════════════════════════════════════════════════════════════════ */ .cta-microfacts { list-style: none; padding: 12px 14px; margin: 12px 0 0 0; background: rgba(15,35,64,0.03); border-radius: 6px; border: 1px solid rgba(15,35,64,0.06); } .cta-microfact { display: block; font-size: 12px; color: var(--muted, #5f6b7a); line-height: 1.5; padding: 2px 0; } .cta-microfact + .cta-microfact { border-top: 1px solid rgba(15,35,64,0.06); margin-top: 4px; padding-top: 6px; } @media (max-width: 480px) { .cta-microfacts { padding: 10px 12px; } .cta-microfact { font-size: 11.5px; } } /* ═══════════════════════════════════════════════════════════════════ END NN/g + Baymard fixes ═══════════════════════════════════════════════════════════════════ */ .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .form-input { width: 100%; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 16px; /* FIX AUDIT: iOS Safari auto-zoom wyłącznik — <16px powoduje zoom */ font-family: inherit; color: var(--ink); background: #fff; transition: border-color .2s var(--ease), box-shadow .25s var(--ease), background .2s; min-height: 54px; font-weight: 500; letter-spacing: -0.005em; } .form-input::placeholder { color: var(--muted-2); font-weight: 400; } .form-input:hover { border-color: var(--line-strong); } .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,122,26,0.14), 0 4px 12px rgba(255,122,26,0.08); background: #fffcf9; } /* ═══ POSITIVE VALIDATION — zielony ptaszek po prawej stronie ═══ Pojawia się gdy wartość jest poprawna (Baymard 2024 best practice). */ .form-input.valid { border-color: var(--success); padding-right: 46px; background-color: #f6fbf8; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231c9c63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 22px 22px; animation: validPop 0.3s var(--ease); } .form-input.valid:focus { border-color: var(--success); box-shadow: 0 0 0 4px rgba(28, 156, 99, 0.14), 0 4px 12px rgba(28, 156, 99, 0.08); background-color: #f6fbf8; } @keyframes validPop { 0% { transform: scale(1); } 50% { transform: scale(1.008); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce){ .form-input.valid { animation: none; } } .form-disclaimer { margin-top: 14px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .form-disclaimer svg { flex-shrink: 0; color: var(--success); } .form-badges { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); } .form-badge { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--muted); line-height: 1.35; } .form-badge strong { color: var(--ink); display: block; font-size: 13px; margin-bottom: 2px; } .form-badge-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; } /* ═══ BLOCK 1.5 — GEO STATISTICS (NEW 20.05.2026 — TIER 1 GEO for AI Overviews) ═══ */ .geo-stats { background: linear-gradient(180deg, #fff 0%, #fbfaf8 100%); border-radius: var(--radius-xl, 24px); padding: 80px 0 70px; margin-top: 32px; } .geo-stats .eyebrow { justify-content: center; } .geo-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 48px 0 36px; } @media(max-width: 900px) { .geo-stats-grid { grid-template-columns: 1fr 1fr; } } @media(max-width: 560px) { .geo-stats-grid { grid-template-columns: 1fr; } } .geo-stat-card { background: #fff; border: 1.5px solid rgba(6,26,59,0.08); border-radius: 16px; padding: 28px 24px; transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease), border-color .2s var(--ease, ease); position: relative; overflow: hidden; } .geo-stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #ff7a1a 0%, #ffb278 100%); transition: width .2s var(--ease, ease); } .geo-stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6,26,59,0.10); border-color: rgba(255,122,26,0.30); } .geo-stat-card:hover::before { width: 6px; } .geo-stat-num { font-size: clamp(32px, 4vw, 42px); font-weight: 800; letter-spacing: -0.025em; color: #061a3b; line-height: 1; margin-bottom: 12px; background: linear-gradient(135deg, #061a3b 0%, #1a3a73 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-feature-settings: "tnum"; } .geo-stat-label { font-size: 14.5px; color: #2a3858; line-height: 1.45; margin-bottom: 14px; font-weight: 500; } .geo-stat-source { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ff7a1a; background: rgba(255,122,26,0.08); padding: 4px 10px; border-radius: 6px; } .geo-quote { margin: 36px auto 24px; max-width: 820px; padding: 28px 32px; background: linear-gradient(135deg, rgba(6,26,59,0.04) 0%, rgba(6,26,59,0.01) 100%); border-left: 4px solid #061a3b; border-radius: 0 14px 14px 0; position: relative; } .geo-quote::before { content: "„"; position: absolute; top: -6px; left: 22px; font-size: 64px; color: #ff7a1a; font-family: Georgia, serif; line-height: 1; } .geo-quote blockquote { margin: 0; padding: 0; } .geo-quote blockquote p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.62; color: #061a3b; font-style: italic; font-weight: 500; } .geo-quote blockquote em { color: #ff7a1a; font-style: italic; font-weight: 600; } .geo-quote cite { display: block; font-size: 13.5px; font-weight: 700; color: #5a6478; font-style: normal; letter-spacing: 0.01em; } .geo-stats-disclaimer { text-align: center; font-size: 13px; color: #5a6478; margin: 24px auto 0; max-width: 740px; line-height: 1.55; } .geo-stats-disclaimer a { color: #ff7a1a; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,122,26,0.3); } .geo-stats-disclaimer a:hover { color: #d1620b; border-bottom-color: #d1620b; } /* ═══ BLOCK 5.6 — CITIES GRID 38 (NEW 20.05.2026 — internal linking) ═══ */ .cities-grid-section { background: linear-gradient(180deg, #fbfaf8 0%, #fff 100%); padding: 80px 0 70px; border-radius: var(--radius-xl, 24px); margin-top: 32px; } .section-head--center { text-align: center; } .cities-grid-wrap { margin-top: 40px; } .cities-grid-section-block { margin-bottom: 32px; } .cities-grid-section-title { font-size: 14px; font-weight: 800; color: #ff7a1a; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 18px; text-align: center; } .cities-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; } @media (max-width: 1024px) { .cities-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { .cities-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .cities-grid { grid-template-columns: repeat(2, 1fr); } } .cities-grid li { margin: 0; padding: 0; } .cities-grid a { display: block; padding: 12px 14px; background: #fff; border: 1.5px solid rgba(6,26,59,0.10); border-radius: 10px; font-size: 14.5px; font-weight: 600; color: #061a3b; text-decoration: none; text-align: center; transition: all .15s var(--ease, ease); position: relative; } .cities-grid a:hover, .cities-grid a:focus-visible { background: linear-gradient(135deg, rgba(255,122,26,0.05) 0%, rgba(255,122,26,0.02) 100%); border-color: rgba(255,122,26,0.35); color: #d1620b; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6,26,59,0.06); text-decoration: none; } .cities-grid--secondary a { font-size: 13.5px; padding: 10px 12px; } .cities-grid-footer { text-align: center; font-size: 15px; color: #2a3858; margin-top: 28px; padding: 22px 28px; background: rgba(6,26,59,0.03); border-radius: 12px; line-height: 1.55; } .cities-grid-footer strong { color: #061a3b; font-weight: 700; } /* ═══ BLOCK 2 — DLACZEGO WARTO (LIGHT) ═══ */ .why { background: var(--surface); border-radius: var(--radius-xl); padding: 80px 0; margin: 48px 0; box-shadow: var(--shadow-soft); } .why .title { text-align: center; } .why .lead { text-align: center; margin: 0 auto 56px; } .why-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-bottom: 56px; } /* ═══ WHY-GRID--3 — refactor 10.05.2026: 3 duże cards zamiast 6 małych ═══ */ .why-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .why-grid--3 { grid-template-columns: 1fr; gap: 18px; } } .why-card--lg { text-align: left !important; padding: 32px 28px !important; } .why-card--lg .why-title { font-size: 18px !important; margin-bottom: 12px !important; line-height: 1.3 !important; } .why-card--lg .why-desc { font-size: 14.5px !important; line-height: 1.6 !important; color: var(--muted) !important; } .why-card--lg .why-icon { width: 56px !important; height: 56px !important; margin: 0 0 18px !important; border-radius: 16px !important; } .why-card--lg .why-icon svg { width: 26px !important; height: 26px !important; } @media(max-width: 1100px) { .why-grid { grid-template-columns: repeat(3, 1fr); } } @media(max-width: 680px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } .why-card { background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%); border: 1px solid var(--line); border-radius: 22px; padding: 32px 24px; text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; isolation: isolate; overflow: hidden; } /* Gradient border (visible on hover) */ .why-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(255,122,26,0.55) 0%, rgba(255,180,100,0.22) 30%, transparent 70%, rgba(79,129,255,0.28) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 1; } /* Mouse spotlight glow */ .why-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,122,26,0.10), transparent 50%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; z-index: 0; } .why-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px rgba(255,122,26,0.18), 0 12px 24px rgba(14,33,63,0.10), 0 2px 6px rgba(14,33,63,0.04); border-color: rgba(255,122,26,0.30); } .why-card:hover::before { opacity: 1; } .why-card:hover::after { opacity: 1; } .why-card > * { position: relative; z-index: 2; } .why-icon { width: 48px; height: 48px; margin: 0 auto 14px; /* było 60x60 / 20px — smuklejsze */ border-radius: 14px; background: linear-gradient(135deg, #ff9247 0%, #ff7a1a 50%, #e9680a 100%); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px rgba(255,122,26,0.30), 0 3px 8px rgba(255,122,26,0.18), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.08); transition: transform .35s var(--ease), box-shadow .35s var(--ease); position: relative; } .why-icon::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,0.25) 0%, transparent 50%); pointer-events: none; } .why-icon svg { width: 22px; height: 22px; position: relative; z-index: 1; } .why-card:hover .why-icon { transform: scale(1.12) rotate(-4deg); box-shadow: 0 20px 36px rgba(255,122,26,0.46), 0 6px 14px rgba(255,122,26,0.30), inset 0 1px 0 rgba(255,255,255,0.4); } .why-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.25; } .why-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; } .why-desc strong { color: var(--ink); font-weight: 700; } .why-forwhom { text-align: center; max-width: 860px; margin: 0 auto 40px; } .why-forwhom h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 20px; letter-spacing: -0.02em; } .why-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; } .why-pills-second { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .why-contact { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 32px; max-width: 960px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; } @media(max-width: 680px) { .why-contact { grid-template-columns: 1fr; text-align: center; } } .why-contact-text { display: flex; flex-direction: column; gap: 6px; } .why-contact-text h3, .why-contact-text h4 { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.01em; } .why-contact-text p { font-size: 14px; color: var(--muted); margin: 0; } .why-contact-phone { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); } .why-contact-phone-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; } .why-contact-phone-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .why-contact-phone-text strong { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; } .why-contact-phone-text small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; font-weight: 600; } /* ═══ MOBILE FIX (10.05.2026): numer "690 425 828" zawijal sie na 2 linie w karcie why-contact-phone. Zmniejszamy font, zostawiamy nowrap. ═══ */ @media (max-width: 540px) { .why-contact-phone { padding: 12px 14px; gap: 10px; } .why-contact-phone-icon { width: 36px; height: 36px; } .why-contact-phone-text strong { font-size: 17px; } .why-contact-phone-text small { font-size: 10px; letter-spacing: 0.03em; text-transform: none; line-height: 1.3; } } /* ═══ BLOCK 3 — PAKIETY MULTI (LIGHT with orange primary) ═══ */ .multi { padding: 96px 0; } .multi-head { text-align: center; margin-bottom: 56px; max-width: 760px; margin-left: auto; margin-right: auto; } .multi-eyebrow { display: inline-block; padding: 8px 18px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--radius-pill); margin-bottom: 20px; } .multi-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; } @media(max-width: 960px) { .multi-grid { grid-template-columns: 1fr; } } .multi-main { background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius-xl); padding: 36px; box-shadow: 0 24px 60px rgba(255,122,26,0.12); position: relative; } .multi-main-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .multi-main-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 26px; } .multi-main-badge { background: var(--primary); color: #fff; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius-pill); } .multi-main h3 { font-size: 28px; font-weight: 800; margin: 0 0 12px; color: var(--ink); letter-spacing: -0.02em; } .multi-main p { font-size: 15px; color: var(--muted); margin: 0 0 24px; line-height: 1.55; } .multi-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } @media(max-width: 680px) { .multi-features { grid-template-columns: repeat(2, 1fr); } } .multi-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 14px 10px; background: var(--surface-soft); border-radius: var(--radius-md); } .multi-feat-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 20px; } .multi-feat-label { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .multi-savings { background: var(--primary-soft); border-radius: var(--radius-md); padding: 18px 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .multi-savings-icon { font-size: 32px; flex-shrink: 0; } .multi-savings-text { font-size: 14.5px; color: var(--ink); line-height: 1.4; } .multi-savings-text strong { color: var(--primary); font-weight: 800; } .multi-sides { display: flex; flex-direction: column; gap: 22px; } .multi-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 28px 28px 24px; transition: all .28s var(--ease); } .multi-side:hover { border-color: rgba(255,122,26,0.3); box-shadow: var(--shadow-card); } .multi-side-icon { width: 50px; height: 50px; border-radius: 14px; background: var(--surface-soft); color: var(--primary); display: grid; place-items: center; font-size: 24px; margin-bottom: 14px; } .multi-side h4 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; } .multi-side p { font-size: 14px; color: var(--muted); margin: 0 0 18px; line-height: 1.55; } .multi-side-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .multi-side-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.3; padding: 10px 6px; } .multi-side-feat-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: 16px; } .multi-side-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .multi-footer { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; } .multi-footer-note { font-size: 14px; color: var(--muted); } .multi-footer-note strong { color: var(--primary); font-weight: 700; } /* ═══ BLOCK 3B — NIEZALEŻNY DORADCA (LIGHT, italic serif) ═══ */ .independent { background: linear-gradient(135deg, #fff 0%, #fef9f3 100%); border-radius: var(--radius-xl); padding: 72px; margin: 48px 0; overflow: hidden; position: relative; } .independent-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } @media(max-width: 960px) { .independent { padding: 48px; } .independent-grid { grid-template-columns: 1fr; } } .independent h2 { font-size: clamp(36px, 4.8vw, 58px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); margin: 0 0 20px; } .independent h2 .title-serif { display: block; color: var(--primary); } .independent p { font-size: 16px; color: var(--muted); line-height: 1.65; margin: 0 0 24px; max-width: 520px; } .independent-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; } .independent-bullets li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); } .independent-bullets .check { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; } .independent-visual { position: relative; min-height: 360px; background: linear-gradient(135deg, #fff5ea 0%, #fff0e1 100%); border-radius: var(--radius-lg); padding: 32px; display: grid; place-items: center; } .independent-visual-inner { width: 90%; aspect-ratio: 1; position: relative; background: radial-gradient(circle at 50% 50%, rgba(255,122,26,0.08) 0%, transparent 65%); display: grid; place-items: center; } .independent-visual-house { width: 70%; height: 70%; background: linear-gradient(135deg, #fff 0%, #fffaf3 100%); border: 2px solid rgba(255,122,26,0.15); border-radius: 20px; position: relative; } .independent-visual-house::before { content: "🏠"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 84px; opacity: .6; } /* BLOCK 3.5 — EXAMPLE OFFERS CSS USUNIĘTE 9.05.2026 (sekcja dublowała BLOCK 4 PRICING) */ /* ═══ BLOCK 4 — PRICING (LIGHT) ═══ */ .pricing { background: var(--surface); border-radius: var(--radius-xl); padding: 80px 0 32px; margin: 48px 0; box-shadow: var(--shadow-soft); } .pricing-head { text-align: center; margin-bottom: 48px; max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 24px; } .pricing-head .eyebrow { display: block; } .pricing-head h2 { font-size: clamp(32px, 4.2vw, 54px); letter-spacing: -0.035em; font-weight: 800; margin: 8px 0 16px; color: var(--ink); line-height: 1.05; } .pricing-head h2 .accent { color: var(--primary); } .pricing-head p { font-size: 16px; color: var(--muted); margin: 0; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; padding: 0 24px; } @media(max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; } } .pkg { background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%); border: 1.5px solid var(--line); border-radius: 28px; padding: 40px 34px; position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease); display: flex; flex-direction: column; isolation: isolate; } .pkg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, -20%), rgba(255,122,26,0.10), transparent 45%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 0; } .pkg > * { position: relative; z-index: 1; } .pkg:hover { transform: translateY(-8px); box-shadow: 0 36px 72px rgba(14,33,63,0.14), 0 12px 28px rgba(14,33,63,0.08); border-color: rgba(255,122,26,0.30); } .pkg:hover::before { opacity: 1; } .pkg-featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ff9247 0%, #ff7a1a 50%, #d85900 100%) border-box; box-shadow: 0 40px 80px rgba(255,122,26,0.32), 0 20px 40px rgba(255,122,26,0.18), inset 0 1px 0 rgba(255,255,255,0.6); transform: scale(1.06) translateY(-6px); } .pkg-featured:hover { transform: scale(1.07) translateY(-10px); box-shadow: 0 50px 100px rgba(255,122,26,0.4), 0 24px 48px rgba(255,122,26,0.22); } .pkg-featured::after { content: ""; position: absolute; inset: -8px; border-radius: calc(var(--radius-xl) + 8px); background: radial-gradient(ellipse at 50% 0%, rgba(255,122,26,0.18) 0%, transparent 60%); z-index: -1; pointer-events: none; } .pkg-featured-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; padding: 8px 18px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px var(--primary-glow); display: flex; align-items: center; gap: 6px; } /* ═══ PKG TAGS — corner badges (price/savings) — Uswitch UK / BroadbandNow US pattern * Tag w prawym górnym rogu karty: "od 49 zł", "Niższa cena", etc. * Subtelny — nie konkuruje z .pkg-featured-badge (środek-góra). */ .pkg-tag { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } .pkg-tag--price { background: linear-gradient(135deg, #fff5eb 0%, #ffe4cc 100%); color: #b34800; border: 1px solid rgba(255, 122, 26, 0.32); } /* .pkg-tag--savings usunięty 9.05.2026 — nakładał się na pkg-head w karcie Multi */ .pkg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .pkg-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 26px; flex-shrink: 0; } .pkg-featured .pkg-icon { background: var(--primary-soft); color: var(--primary); } .pkg-speed { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; } .pkg-speed small { font-size: 16px; font-weight: 700; color: var(--muted); } .pkg-sub { font-size: 13px; color: var(--muted); margin-top: 4px; } /* ═══ MOBILE FIX (10.05.2026 — z screenów Clarity): Badge "od 39 zł/mies." nakladal sie na naglowek karty ("Swiatlowo" zamiast "Swiatlowod"). Solution: zmniejszamy badge + zmniejszamy headline. :has() selector — padding-right TYLKO gdy karta MA badge (np. Pakiet Multi nie ma). PRZENIESIONO PO base rules — CSS source order matters. */ @media (max-width: 540px) { .pkg-tag { font-size: 10px; padding: 4px 8px; top: 10px; right: 10px; } /* Padding-right TYLKO gdy karta ma badge (Pakiet Multi go nie ma, wiec tytul "Pakiet Multi" nie zawija sie) */ .pkg:has(.pkg-tag) .pkg-head { padding-right: 72px; } .pkg-head { gap: 10px; } .pkg-icon { width: 44px; height: 44px; font-size: 22px; } .pkg-speed { font-size: 20px; line-height: 1.15; } .pkg-sub { font-size: 12px; margin-top: 3px; line-height: 1.35; } } .pkg-price { margin-bottom: 22px; } .pkg-price-main { display: flex; align-items: baseline; gap: 4px; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .pkg-price-main small { font-size: 15px; color: var(--muted); font-weight: 700; } .pkg-price-note { font-size: 13px; color: var(--primary); font-weight: 700; margin-top: 8px; } .pkg-price-after { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .pkg-divider { height: 1px; background: var(--line); margin: 0 0 20px; } /* ═══ PKG PRICES TABLE — refactor 10.05.2026: konkretne 3 prędkości × cena każda ═══ */ .pkg-prices { background: var(--surface-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; } .pkg-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); transition: border-color .15s ease, transform .15s ease; } .pkg-price-row:hover { border-color: rgba(255, 122, 26, 0.4); transform: translateY(-1px); } .pkg-price-speed { font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.2; } .pkg-price-val { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; } .pkg-price-val strong { color: var(--primary); font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; } /* Featured card — wyróżnij ceny pomarańczem */ .pkg-featured .pkg-prices { background: rgba(255, 122, 26, 0.06); } .pkg-featured .pkg-price-row { border-color: rgba(255, 122, 26, 0.18); } .pkg-feats { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .pkg-feat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); } .pkg-feat-check { width: 20px; height: 20px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } .pricing-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 48px auto 0; padding: 28px 32px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); } @media(max-width: 680px) { .pricing-trust { grid-template-columns: 1fr; } } .pricing-trust-item { display: flex; align-items: center; gap: 14px; } .pricing-trust-icon { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } .pricing-trust-text strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; } .pricing-trust-text small { font-size: 12.5px; color: var(--muted); } /* ═══ BLOCK 4B — JAK TO DZIAŁA (LIGHT) ═══ */ .how { padding: 80px 0 96px; } .how-head { text-align: center; margin-bottom: 64px; } .how-head h2 { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.035em; font-weight: 800; margin: 0 0 12px; color: var(--ink); line-height: 1.05; } .how-head p { font-size: 16px; color: var(--muted); margin: 0; max-width: 600px; margin: 0 auto; } .how-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto 48px; } .how-steps::before { content: ""; position: absolute; top: 30px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--primary) 10%, var(--primary) 90%, transparent); opacity: .3; z-index: 0; } @media(max-width: 900px) { .how-steps { grid-template-columns: 1fr 1fr; } .how-steps::before { display: none; } } @media(max-width: 500px) { .how-steps { grid-template-columns: 1fr; } } .how-step { text-align: center; position: relative; z-index: 1; padding: 28px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); isolation: isolate; } .how-step::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,122,26,0.08), transparent 50%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; } .how-step:hover { transform: translateY(-6px); background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%); border-color: rgba(255,122,26,0.18); box-shadow: 0 24px 48px rgba(255,122,26,0.12), 0 6px 14px rgba(14,33,63,0.06); } .how-step:hover::before { opacity: 1; } .how-step-n { width: 52px; height: 52px; /* było 64x64 */ margin: 0 auto 16px; /* było 22px */ border-radius: 50%; background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%); border: 2px solid var(--primary); color: var(--primary); display: grid; place-items: center; font-size: 20px; /* było 24px */ font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 10px 20px rgba(255,122,26,0.20), 0 3px 8px rgba(255,122,26,0.12), inset 0 1px 0 rgba(255,255,255,1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .how-step:hover .how-step-n { transform: scale(1.1) rotate(-5deg); box-shadow: 0 22px 44px rgba(255,122,26,0.34), 0 8px 18px rgba(255,122,26,0.20); } .how-step-icon { font-size: 44px; margin-bottom: 16px; filter: saturate(1.1); } .how-step h3, .how-step h4 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em; } .how-step p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; max-width: 240px; margin: 0 auto; } .how-cta { max-width: 860px; margin: 0 auto; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; } @media(max-width: 680px) { .how-cta { grid-template-columns: 1fr; text-align: center; } } .how-cta-icon { width: 40px; height: 40px; border-radius: 12px; /* było 48x48 */ background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 18px; } .how-cta-text h3, .how-cta-text h4 { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 0 2px; } .how-cta-text strong { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .how-cta-text small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } /* ═══ BLOCK 5 — OPINIE (LIGHT) ═══ */ .reviews { background: var(--surface); border-radius: var(--radius-xl); padding: 80px 0; margin: 48px 0; box-shadow: var(--shadow-soft); } .reviews-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1120px; margin: 0 auto 56px; padding: 0 32px; } @media(max-width: 900px) { .reviews-head { grid-template-columns: 1fr; } } .reviews-head h2 { font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -0.035em; line-height: 1.04; font-weight: 800; color: var(--ink); margin: 0 0 16px; } .reviews-head h2 .title-serif { display: block; color: var(--primary); } .reviews-head p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; max-width: 420px; } .reviews-stats { display: flex; flex-direction: column; gap: 14px; } .reviews-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .reviews-stat { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; display: flex; align-items: center; gap: 14px; } .reviews-stat-icon { width: 40px; height: 40px; border-radius: 12px; /* było 48x48 */ background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .reviews-stat-val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; } .reviews-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.3; } .reviews-bars { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 24px; } .reviews-bars-head { font-size: 13px; color: var(--muted); margin-bottom: 14px; } .reviews-bars-head strong { color: var(--ink); } .reviews-note-ref { color: var(--primary); font-weight: 700; margin-left: 2px; } .reviews-disclaimer { font-size: 10.5px; color: var(--muted-2); line-height: 1.5; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); } .reviews-disclaimer sup { color: var(--primary); font-weight: 700; } .reviews-disclaimer a { color: var(--primary); text-decoration: underline; } .reviews-disclaimer strong { color: var(--ink); } /* Metodologia 6-punktowa — RODO/Omnibus pełna zgodność */ .reviews-methodology { margin: 18px 0 0; padding: 14px 16px; background: var(--surface-soft); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 10px; } .reviews-methodology .reviews-disclaimer { margin: 0; padding: 0; border: none; font-size: 11px; } .reviews-method-list { list-style: decimal; padding-left: 18px; margin: 10px 0 0; font-size: 10.5px; color: var(--muted); line-height: 1.55; } .reviews-method-list li { margin-bottom: 5px; padding-left: 3px; } .reviews-method-list li strong { color: var(--ink); font-weight: 700; } .reviews-method-list li a { color: var(--primary); text-decoration: underline; font-weight: 600; } @media (max-width: 480px) { .reviews-methodology { padding: 10px 12px; } .reviews-method-list { font-size: 10px; padding-left: 16px; } } /* 🔽 Metodologia jako rozwijane

— nie zajmuje miejsca domyślnie */ details.reviews-methodology { cursor: pointer; } .reviews-methodology-summary { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.4; user-select: none; position: relative; padding-right: 22px; } .reviews-methodology-summary::-webkit-details-marker { display: none; } .reviews-methodology-summary strong { color: var(--ink); font-weight: 700; font-size: 12.5px; } .reviews-methodology-summary sup { color: var(--primary); font-weight: 700; margin-right: 2px; } .reviews-methodology-hint { color: var(--muted-2); font-size: 11px; font-style: italic; } .reviews-methodology-summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-75%) rotate(45deg); transition: transform 0.2s ease; } details.reviews-methodology[open] .reviews-methodology-summary::after { transform: translateY(-25%) rotate(-135deg); } details.reviews-methodology[open] .reviews-methodology-hint { display: none; } .reviews-methodology-body { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); } @media (max-width: 480px) { .reviews-methodology-summary { font-size: 11.5px; flex-wrap: wrap; } .reviews-methodology-hint { font-size: 10.5px; } } /* 🛡 Horizontal overflow safeguard — zapobiega wyciekaniu elementów w prawo na mobile */ html, body { overflow-x: hidden; max-width: 100%; } .reviews-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12px; color: var(--muted); } /* ═══ REVIEWS METRICS — refactor 10.05.2026: 3 konkretne metryki zamiast wykresu słupkowego ═══ */ .reviews-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 18px; } @media (max-width: 640px) { .reviews-metrics { grid-template-columns: 1fr; gap: 10px; } } .reviews-metric { background: linear-gradient(135deg, rgba(255, 122, 26, 0.07) 0%, rgba(255, 122, 26, 0.02) 100%); border: 1px solid rgba(255, 122, 26, 0.22); border-radius: 14px; padding: 14px 12px; text-align: center; transition: transform .2s ease, box-shadow .2s ease; } .reviews-metric:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 122, 26, 0.10); } .reviews-metric-val { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1.05; margin-bottom: 4px; } .reviews-metric-lbl { font-size: 12px; color: var(--ink); font-weight: 600; line-height: 1.35; } .reviews-metric-lbl small { font-size: 10.5px; color: var(--muted); font-weight: 500; display: block; margin-top: 2px; } .reviews-bar-stars { display: flex; gap: 2px; color: var(--primary); } .reviews-bar-track { height: 6px; background: rgba(255,122,26,0.1); border-radius: 999px; overflow: hidden; } .reviews-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; } .reviews-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto 40px; padding: 0 32px; } @media(max-width: 900px) { .reviews-cards { grid-template-columns: 1fr; max-width: 420px; } } /* ═══ Reviews-value — zamiennik opinii: neutralne value propositions ═══ */ .reviews-value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto 40px; padding: 0 32px; } @media(max-width: 900px) { .reviews-value { grid-template-columns: 1fr; max-width: 520px; } } .reviews-value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-soft); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .reviews-value-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } .reviews-value-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); display: grid; place-items: center; font-size: 22px; } .reviews-value-card strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.015em; } .reviews-value-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; } .review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; position: relative; transition: all .28s var(--ease); } .review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .review-quote { color: var(--primary); font-size: 40px; font-family: Georgia, serif; font-weight: 800; line-height: 1; margin-bottom: 14px; opacity: .9; } .review-text { font-size: 14.5px; color: var(--ink); line-height: 1.55; margin: 0 0 22px; } .review-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .review-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-soft), var(--primary-soft)); display: grid; place-items: center; font-weight: 800; color: var(--primary); font-size: 14px; flex-shrink: 0; border: 2px solid var(--surface); } .review-meta { display: flex; flex-direction: column; line-height: 1.2; } .review-meta strong { font-size: 14px; color: var(--ink); } .review-meta small { font-size: 12px; color: var(--muted); margin-top: 2px; } .review-stars { margin-top: 6px; color: var(--primary); font-size: 12px; letter-spacing: 1px; } .reviews-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 24px 32px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); } @media(max-width: 900px) { .reviews-trust { grid-template-columns: 1fr 1fr; } } .reviews-trust-item { display: flex; align-items: center; gap: 12px; } .reviews-trust-icon { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .reviews-trust-text strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); } .reviews-trust-text small { font-size: 12px; color: var(--muted); } /* ═══ BLOCK 5B — B2B (DARK NAVY) ═══ */ .b2b { background: radial-gradient(1000px 600px at 85% 30%, rgba(255,138,51,0.25) 0%, transparent 55%), radial-gradient(800px 500px at 15% 90%, rgba(99,155,255,0.20) 0%, transparent 60%), radial-gradient(600px 400px at 50% 50%, rgba(189,101,255,0.12) 0%, transparent 65%), linear-gradient(150deg, #071e47 0%, #0a1e52 45%, #041129 100%); color: #fff; border-radius: 24px; /* było 32px */ padding: 56px 48px; /* było 84x64 — smuklejsze */ margin: 40px 0; /* było 64px */ position: relative; overflow: hidden; box-shadow: 0 40px 80px rgba(6, 26, 59, 0.28), 0 20px 40px rgba(6, 26, 59, 0.14), inset 0 1px 0 rgba(255,255,255,0.05); } .b2b::before { /* Film grain DISABLED 10.05.2026 (PSI fix) */ display: none; } .b2b::after { content: ""; position: absolute; inset: -15% -10%; background: conic-gradient(from 180deg at 30% 30%, transparent 0deg, rgba(255,122,26,0.18) 80deg, transparent 160deg, rgba(99,155,255,0.14) 260deg, transparent 340deg); filter: blur(60px); pointer-events: none; animation: heroAurora 48s ease-in-out infinite; z-index: 0; } @media(max-width: 980px) { .b2b { padding: 56px 28px; border-radius: 22px; margin: 40px 0; } } .b2b-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; } @media(max-width: 960px) { .b2b { padding: 48px 32px; } .b2b-grid { grid-template-columns: 1fr; } } .b2b-eyebrow { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; display: inline-block; } .b2b h2 { font-size: clamp(26px, 2.8vw, 36px); /* jeszcze mniejsze — czytelniej */ letter-spacing: -0.025em; line-height: 1.15; font-weight: 800; color: #fff; margin: 0 0 20px; } .b2b p { font-size: 15.5px; color: rgba(255,255,255,0.78); line-height: 1.65; margin: 0 0 28px; max-width: 500px; } .b2b-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media(max-width: 500px) { .b2b-feats { grid-template-columns: 1fr; } } .b2b-feat { display: flex; gap: 14px; align-items: flex-start; } .b2b-feat-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,122,26,0.14); color: var(--primary); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .b2b-feat-text h5 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 4px; } .b2b-feat-text p { font-size: 13px; color: rgba(255,255,255,0.68); margin: 0; line-height: 1.5; max-width: none; } .b2b-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: 28px 24px; /* było 32px jednolicie — teraz ciaśniej */ backdrop-filter: blur(12px); } .b2b-card-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; background: rgba(255,122,26,0.18); color: var(--primary); display: grid; place-items: center; font-size: 24px; } .b2b-card-label { text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.68); font-weight: 600; margin-bottom: 8px; } .b2b-card-phone { display: block; /* było brak — link domyślnie inline */ text-align: center; font-size: clamp(22px, 2.2vw, 28px); /* było 34px sztywno — teraz proporcjonalnie */ font-weight: 800; letter-spacing: -0.015em; color: #fff; margin-bottom: 4px; line-height: 1.1; white-space: nowrap; /* NEW — liczba zawsze w jednej linii */ } .b2b-card-hours { text-align: center; font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 20px; } .b2b-card-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; } .b2b-card-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.85); } .b2b-card-list .check { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex-shrink: 0; } .b2b-bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; } @media(max-width: 780px) { .b2b-bottom { grid-template-columns: 1fr 1fr; } } .b2b-bottom-item { display: flex; align-items: center; gap: 12px; } .b2b-bottom-item-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; font-size: 16px; } .b2b-bottom-item-text strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; } .b2b-bottom-item-text small { font-size: 11.5px; color: rgba(255,255,255,0.6); } /* ═══ BLOCK 6A — FINAL CTA (DARK) ═══ */ .finalcta { background: radial-gradient(1200px 700px at 85% 30%, rgba(255,138,51,0.32) 0%, transparent 55%), radial-gradient(900px 600px at 15% 90%, rgba(99,155,255,0.22) 0%, transparent 60%), radial-gradient(700px 500px at 50% 50%, rgba(189,101,255,0.14) 0%, transparent 65%), linear-gradient(155deg, #071e47 0%, #0a1e52 45%, #030f25 100%); color: #fff; border-radius: 24px; /* było 32px */ padding: 64px 56px; /* było 100x72 — smuklejsze */ margin: 40px 0; /* było 64px */ position: relative; overflow: hidden; box-shadow: 0 40px 80px rgba(6, 26, 59, 0.32), 0 20px 40px rgba(6, 26, 59, 0.18), inset 0 1px 0 rgba(255,255,255,0.06); } .finalcta::before { /* Film grain DISABLED 10.05.2026 (PSI fix) */ display: none; } .finalcta::after { content: ""; position: absolute; inset: -15% -10%; background: conic-gradient(from 180deg at 60% 30%, transparent 0deg, rgba(255,122,26,0.20) 80deg, transparent 160deg, rgba(99,155,255,0.12) 260deg, transparent 340deg); filter: blur(70px); pointer-events: none; animation: heroAurora 45s ease-in-out infinite; z-index: 0; } @media(max-width: 900px) { .finalcta { padding: 64px 28px; border-radius: 22px; } } .finalcta-grid { position: relative; z-index: 1; display: grid; /* FIX 10.05.2026: single column — usunięto prostą mapkę po prawej (była duplikatem z map-section). Teraz Final CTA zajmuje pełną szerokość — CTA tekst + buttons centralnie. */ grid-template-columns: 1fr; gap: 40px; align-items: center; text-align: center; max-width: 760px; margin: 0 auto; } .finalcta-grid .finalcta-checks { justify-content: center; } .finalcta-grid .finalcta-actions { justify-content: center; } @media(max-width: 900px) { .finalcta { padding: 48px 28px; } } .finalcta-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 24px; } .finalcta h2 { font-size: clamp(28px, 3.4vw, 48px); /* było max 64px → czytelniej */ line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 20px; color: #fff; text-wrap: balance; } .finalcta h2 .accent { background: linear-gradient(135deg, #ffd29a 0%, #ff9247 40%, #ff7a1a 75%, #ffb176 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* FIX TBT: gradientShift animation usunięta — statyczny gradient = ten sam efekt, zero blocking */ } .finalcta-checks { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; } @media(max-width: 900px) { .finalcta-checks { justify-content: center; } } .finalcta-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,0.85); } .finalcta-check-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,122,26,0.18); color: var(--primary); display: grid; place-items: center; font-size: 14px; font-weight: 800; flex-shrink: 0; } .finalcta-check strong { color: #fff; font-weight: 700; } .finalcta-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } @media(max-width: 900px) { .finalcta-actions { justify-content: center; } } .finalcta-actions .btn-primary { min-height: 64px; padding: 0 34px; font-size: 17px; } .finalcta-phone-box { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .finalcta-phone-box small { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; } .finalcta-phone-box strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em; } .finalcta-phone-box em { font-size: 12px; color: rgba(255,255,255,0.58); font-style: normal; font-weight: 500; } /* ═══ UNIFIED ICON CONTAINER UPGRADES ═══ */ .multi-main-icon, .pkg-icon, .pricing-trust-icon, .reviews-trust-icon, .b2b-feat-icon, .b2b-card-icon, .b2b-bottom-item-icon, .footer-trust-ic, .faq-phone-icon { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(255,122,26,0.32), inset 0 1px 0 rgba(255,255,255,0.22) !important; } .multi-main-icon svg, .pkg-icon svg, .pricing-trust-icon svg, .reviews-trust-icon svg, .b2b-feat-icon svg, .b2b-card-icon svg, .b2b-bottom-item-icon svg, .footer-trust-ic svg, .faq-phone-icon svg { width: 60%; height: 60%; } /* ═══ HOW-STEP — refactor 10.05.2026: lekkie ikony zamiast dominującego pomarańczu ═══ */ .how-step-icon--light { background: var(--primary-soft) !important; color: var(--primary) !important; box-shadow: none !important; width: 56px !important; height: 56px !important; border-radius: 16px !important; display: grid; place-items: center; margin: 12px auto 14px !important; font-size: 26px; border: 1px solid rgba(255, 122, 26, 0.18); } .how-step-icon--light svg { width: 26px; height: 26px; } /* Czas trwania nad numerkiem — subtelny pill */ .how-step-time { display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em; margin-bottom: 8px; text-transform: none; } /* B2B + final CTA — dark context, use glass */ .b2b .b2b-feat-icon, .b2b-card-icon, .b2b-bottom-item-icon, .footer-trust-ic, .faq-phone-icon { background: linear-gradient(135deg, rgba(255,122,26,0.85) 0%, rgba(255,122,26,0.55) 100%) !important; } /* ═══ MAP SECTION — profesjonalna mapa Polski (10.05.2026, source: propozycja-8.html) 16 województw + rzeki + góry + Pojezierze Mazurskie + animowana sieć światłowodowa + pakiety podróżujące po routes + compass rose + skala + legenda ═══ */ /* ═══ MAPA PREMIUM UPGRADE 14.05.2026 — ChatGPT design (dark navy + cyan glow + orange hub) ═══ */ .map-section { padding: 88px 0; background: radial-gradient(circle at 20% 10%, rgba(39, 243, 255, 0.08), transparent 32%), radial-gradient(circle at 80% 90%, rgba(255, 107, 19, 0.06), transparent 34%), linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%); border-radius: var(--radius-xl); margin: 48px 0; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .map-section::before { content: ""; position: absolute; inset: 0; opacity: 0.32; background-image: linear-gradient(rgba(20,33,61,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,0.035) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } .map-section > * { position: relative; z-index: 1; } .map-section .section-head { text-align: center; max-width: 760px; margin: 0 auto 40px; padding: 0 24px; } .map-section .section-eyebrow { display: inline-block; padding: 8px 18px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--radius-pill); margin-bottom: 20px; } .map-section .section-title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.035em; font-weight: 800; line-height: 1.05; color: var(--ink); margin: 0 0 16px; } .map-section .section-sub { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 0; } .map-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 36px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; gap: 28px; } } .map-stats { display: flex; flex-direction: column; gap: 14px; } /* MAP STATS PREMIUM 14.05.2026 — glassmorphism + gradient accent */ .map-stat { background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.92); border-radius: var(--radius-lg); padding: 22px 24px; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(7, 27, 57, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .map-stat::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #ff6b13 0%, #ff8a2a 50%, #27f3ff 100%); opacity: 0.92; } .map-stat::after { content: ""; position: absolute; top: -50%; right: -30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(39,243,255,0.10), transparent 70%); pointer-events: none; } .map-stat:hover { transform: translateX(4px); box-shadow: 0 14px 32px rgba(7, 27, 57, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.96); border-color: rgba(255, 122, 26, 0.45); } .map-stat .n { font-size: clamp(28px, 3.5vw, 40px); font-weight: 900; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 8px; } .map-stat .l { color: var(--muted); font-size: 14px; line-height: 1.4; font-weight: 500; } /* ═══ MOBILE FIX (10.05.2026): karty 10/16/98% byly za duze, pusta przestrzen. Kompaktujemy padding + font dla mobile (<540px). ═══ */ @media (max-width: 540px) { .map-stats { gap: 10px; } .map-stat { padding: 14px 16px; } .map-stat .n { font-size: 24px; margin-bottom: 4px; } .map-stat .l { font-size: 12.5px; } } /* MAPA WRAP PREMIUM 14.05.2026 — dark navy + cyan glow */ .map-svg-wrap { background: radial-gradient(circle at 68% 38%, rgba(39, 243, 255, 0.18), transparent 35%), linear-gradient(135deg, #06142b 0%, #071b39 50%, #0a274f 100%); border: 1px solid rgba(39, 243, 255, 0.22); border-radius: var(--radius-xl); padding: 28px 24px 20px; box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 80px rgba(39, 243, 255, 0.05); overflow: hidden; position: relative; content-visibility: auto; contain-intrinsic-size: 600px 510px; } /* Dekoracyjny glow circle w prawym dolnym rogu */ .map-svg-wrap::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(39,243,255,0.16), transparent 70%); pointer-events: none; } /* Subtelny pattern grid w tle */ .map-svg-wrap::before { content: ""; position: absolute; inset: 0; opacity: 0.18; background-image: linear-gradient(rgba(39, 243, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 243, 255, 0.08) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } .map-svg-wrap > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════ FIX PSI 10.05.2026 — CONTENT-VISIBILITY na sekcjach poniżej fold. Browser nie renderuje ich w pierwszym paint → niższy LCP + FCP. Działanie: gdy sekcja jest >viewport, jest "skipped" przez engine renderujący. ═══════════════════════════════════════════════════════════════════ */ .why, .pricing, .how, .reviews, .map-section, .termination-tool, .finalcta, .faq, .b2b { content-visibility: auto; contain-intrinsic-size: 1px 800px; /* placeholder height = mniej layout shift */ } .map-svg-wrap svg { width: 100%; height: auto; display: block; } /* Domyślnie animacje mapy WYŁĄCZONE — 0% CPU dopóki user nie zobaczy mapy */ .map-svg-wrap:not(.map-active) svg animate, .map-svg-wrap:not(.map-active) svg animateMotion { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .map-svg-wrap svg animate, .map-svg-wrap svg animateMotion { display: none; } } @media (max-width: 480px) { .map-section { padding: 56px 0; } .map-svg-wrap { padding: 12px; } } /* ═══ FINAL CTA MAP — refactor 10.05.2026: profesjonalna SVG mapa Polski z 10 miastami Pulsujące pomarańczowe punkty (subtle, prefers-reduced-motion friendly). Realne pozycje geograficzne (lat/lng zmapowane do viewBox 400x400). ═══ */ .finalcta-map { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; max-width: 100%; } .finalcta-map svg { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 8px 24px rgba(255, 122, 26, 0.18)); } .map-city .map-dot-glow { transform-origin: center; animation: mapPulse 2.4s ease-in-out infinite; } .map-city:nth-child(2) .map-dot-glow { animation-delay: 0.2s; } .map-city:nth-child(3) .map-dot-glow { animation-delay: 0.4s; } .map-city:nth-child(4) .map-dot-glow { animation-delay: 0.6s; } .map-city:nth-child(5) .map-dot-glow { animation-delay: 0.8s; } .map-city:nth-child(6) .map-dot-glow { animation-delay: 1.0s; } .map-city:nth-child(7) .map-dot-glow { animation-delay: 1.2s; } .map-city:nth-child(8) .map-dot-glow { animation-delay: 1.4s; } .map-city:nth-child(9) .map-dot-glow { animation-delay: 1.6s; } .map-city:nth-child(10) .map-dot-glow { animation-delay: 1.8s; } @keyframes mapPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.4); } } .map-dot { filter: drop-shadow(0 0 4px rgba(255, 122, 26, 0.8)); transition: r .2s ease; } .map-city:hover .map-dot { r: 7; } .map-city:hover .map-label { fill: #ffd29a; font-weight: 700; } .map-label { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; fill: rgba(255, 255, 255, 0.85); letter-spacing: -0.01em; pointer-events: none; transition: fill .2s ease; } .finalcta-map-foot { font-size: 13px; color: rgba(255, 255, 255, 0.82); margin-top: 8px; text-align: center; font-weight: 500; padding: 6px 14px; background: rgba(255, 122, 26, 0.10); border: 1px solid rgba(255, 181, 118, 0.22); border-radius: 999px; } .finalcta-map-foot strong { color: #ffd29a; font-weight: 800; } /* WCAG — wyłącz pulsowanie dla użytkowników wrażliwych */ @media (prefers-reduced-motion: reduce) { .map-city .map-dot-glow { animation: none; opacity: 0.6; } } @media (max-width: 900px) { .finalcta-map { display: none !important; } } /* ═══ Stary savings box (zachowany jako legacy, gdyby ktoś chciał wrócić) ═══ */ .finalcta-savings { position: relative; display: flex; justify-content: center; align-items: center; padding: 12px; } .finalcta-savings-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 122, 26, 0.10) 100%); border: 1px solid rgba(255, 181, 118, 0.30); border-radius: 22px; padding: 24px 26px 18px; width: 100%; max-width: 280px; text-align: center; backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12); position: relative; } .finalcta-savings-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; background: linear-gradient(135deg, #ff9247 0%, #ff7a1a 100%); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(255, 122, 26, 0.4); } .finalcta-savings-amount { display: flex; align-items: baseline; justify-content: center; gap: 5px; line-height: 1; margin-bottom: 12px; } .finalcta-savings-pre { font-size: 13px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } .finalcta-savings-value { font-size: clamp(36px, 5vw, 52px); font-weight: 900; letter-spacing: -0.03em; background: linear-gradient(135deg, #ffd29a 0%, #ff9247 50%, #ff7a1a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .finalcta-savings-per { font-size: 13px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } .finalcta-savings-foot { font-size: 12px; color: rgba(255, 255, 255, 0.82); font-weight: 500; line-height: 1.4; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; } .finalcta-savings-foot strong { color: #ffd29a; font-weight: 700; } .finalcta-savings-clock { color: #ffd29a; display: inline-flex; } @media (max-width: 900px) { .finalcta-savings { display: none !important; } } /* Stary pin (zachowany dla kompatybilności gdyby ktoś chciał wrócić) */ .finalcta-pin { position: relative; aspect-ratio: 1; display: grid; place-items: center; } .finalcta-pin-inner { width: clamp(120px, 13vw, 180px); /* było 200-320 — 2x mniejsze */ aspect-ratio: 1; position: relative; animation: floaty 6s ease-in-out infinite; /* było 4s — spokojniej */ filter: drop-shadow(0 16px 32px rgba(255,122,26,0.32)); /* było 2× drop-shadow z glowem — za jaskrawe */ opacity: 0.85; /* było 1.0 — mniej krzykliwe */ } .finalcta-pin-inner svg { width: 100%; height: 100%; } .finalcta-pin-inner::after { content: ""; position: absolute; left: 50%; top: 90%; transform: translateX(-50%); width: 40%; height: 18px; background: radial-gradient(ellipse, rgba(255,122,26,0.4) 0%, transparent 70%); filter: blur(6px); animation: floatyShadow 4s ease-in-out infinite; } @keyframes floaty { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } } @keyframes floatyShadow { 0%,100% { transform: translateX(-50%) scale(1); opacity:.6; } 50% { transform: translateX(-50%) scale(.75); opacity:.3; } } /* ═══ BLOCK 6B — FAQ (LIGHT, zmienione 5.05.2026) ═══ */ .faq { background: linear-gradient(180deg, #ffffff 0%, #fff8f0 100%); color: var(--ink); border: 1px solid #ffe7d2; border-radius: var(--radius-xl); padding: 72px 56px; margin: 48px 0; } .faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; } @media(max-width: 900px) { .faq { padding: 48px 32px; } .faq-grid { grid-template-columns: 1fr; } } .faq-left .eyebrow { color: var(--primary); } .faq h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1.06; font-weight: 800; color: var(--ink); margin: 8px 0 16px; } .faq p { font-size: 15px; color: var(--muted, #5f6b7a); margin: 0 0 28px; max-width: 360px; } /* Karta telefonu — pomarańczowa, kontrastowa */ .faq-phone-card { padding: 22px 26px; background: linear-gradient(135deg, #ff7a1a 0%, #ff5a00 100%); border: 1px solid rgba(255,122,26,0.3); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(255,122,26,0.22); display: flex; align-items: center; gap: 16px; max-width: 320px; } .faq-phone-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.22); color: #fff; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .faq-phone-txt small { font-size: 12px; color: rgba(255,255,255,0.85); } .faq-phone-txt strong { display: block; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em; line-height: 1.1; margin: 2px 0; } .faq-phone-txt em { font-size: 11.5px; color: rgba(255,255,255,0.78); font-style: normal; } /* Lista pytań — białe karty z subtelną ramką */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { background: #ffffff; border: 1px solid #ebd9c4; border-radius: var(--radius-md); padding: 20px 24px; cursor: pointer; transition: all .22s var(--ease); } .faq-item:hover { background: #fffaf5; border-color: #ffcc99; } .faq-item[open] { background: #fffaf5; border-color: var(--primary); box-shadow: 0 4px 14px rgba(255,122,26,0.12); } .faq-item summary { display: flex; align-items: center; gap: 16px; list-style: none; cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } .faq-n { font-size: 14px; font-weight: 800; color: var(--primary); letter-spacing: .02em; min-width: 24px; } .faq-q { flex: 1; font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .faq-toggle { width: 28px; height: 28px; border-radius: 8px; background: #fff3e3; color: var(--primary); display: grid; place-items: center; font-weight: 700; transition: transform .2s, background .2s, color .2s; flex-shrink: 0; } .faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--primary); color: #fff; } .faq-a { padding: 16px 0 4px 40px; font-size: 14.5px; color: #4a5568; line-height: 1.6; } /* ═══ FOOTER (DARK) ═══ */ footer { background: linear-gradient(180deg, #030f25 0%, #01081a 100%); color: rgba(255,255,255,0.78); padding: 56px 0 32px; /* było 80/40 — smuklejsze */ margin-top: 32px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; /* było 48px */ margin-bottom: 32px; /* było 48px */ } @media(max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media(max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand .brand { color: #fff; margin-bottom: 20px; } .footer-brand .brand-text small { color: rgba(255,255,255,0.55); } .footer-brand .brand-text b { background: linear-gradient(135deg, #ffffff 0%, #c9d4e5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .footer-brand p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0 0 20px; max-width: 340px; } .footer-legal { font-size: 12px; color: rgba(255,255,255,0.48); line-height: 1.6; margin-bottom: 20px; } .footer-legal strong { color: rgba(255,255,255,0.72); font-weight: 600; display: block; margin-bottom: 4px; } .footer-contact { font-size: 13px; color: rgba(255,255,255,0.72); display: flex; flex-direction: column; gap: 6px; } .footer-contact-item { display: flex; align-items: center; gap: 10px; } .footer-contact-item .ic { color: var(--primary); width: 16px; display: grid; place-items: center; } .footer-col h3 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,0.55); margin: 0 0 16px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: rgba(255,255,255,0.72); transition: color .2s; display: flex; align-items: center; gap: 6px; } /* Footer tool link — wyróżniony (FIX 10.05.2026 — generator wypowiedzenia ma być widoczny) */ .footer-tool-link { display: block !important; padding: 12px 14px; background: linear-gradient(135deg, rgba(255,122,26,0.10) 0%, rgba(255,122,26,0.04) 100%); border: 1px solid rgba(255,122,26,0.25); border-radius: 10px; margin-bottom: 6px; transition: all .2s ease; } .footer-tool-link strong { color: #ffb278 !important; font-size: 13px; font-weight: 700; display: block; margin-bottom: 4px; } .footer-tool-link small { color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 500; line-height: 1.4; display: block; } .footer-tool-link:hover { background: linear-gradient(135deg, rgba(255,122,26,0.18) 0%, rgba(255,122,26,0.08) 100%); border-color: rgba(255,122,26,0.45); transform: translateY(-2px); } .footer-tool-link:hover strong { color: var(--primary); } .footer-col a:hover { color: var(--primary); } .footer-social { display: flex; gap: 10px; margin-top: 16px; } .footer-social a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06); color: #fff; display: grid; place-items: center; transition: all .2s; } .footer-social a:hover { background: var(--primary); transform: translateY(-2px); } .footer-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } .footer-trust-item { padding: 14px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); display: flex; align-items: flex-start; gap: 10px; } .footer-trust-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,122,26,0.16); color: var(--primary); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .footer-trust-txt strong { display: block; font-size: 13px; font-weight: 700; color: #fff; } .footer-trust-txt small { font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.35; } /* ═══ FOOTER CITIES — programmatic SEO internal links (5.05.2026) ═══ */ .footer-cities { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 0; margin-bottom: 8px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; color: rgba(255,255,255,0.55); } .footer-cities-label { font-weight: 600; color: rgba(255,255,255,0.78); margin-right: 4px; } .footer-cities a { color: rgba(255,255,255,0.85); font-weight: 600; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); transition: all .2s var(--ease); white-space: nowrap; } .footer-cities a:hover { color: var(--primary); border-color: var(--primary); background: rgba(255,122,26,0.08); } @media (max-width: 560px) { .footer-cities { gap: 8px; padding: 14px 0; font-size: 12.5px; } .footer-cities-label { width: 100%; margin-bottom: 4px; } .footer-cities a { padding: 3px 9px; font-size: 12px; } } /* SPEED TEST SECTION usunięta 9.05.2026 — Cloudflare blokuje iframe embed */ /* ═══ FOOTER TRADEMARKS DISCLAIMER (art. 156 PWP — must-have przy logo operatorów) ═══ */ .footer-trademarks { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 10.5px; color: rgba(255,255,255,0.42); line-height: 1.55; letter-spacing: 0.005em; } .footer-trademarks strong { color: rgba(255,255,255,0.7); font-weight: 600; } @media(max-width: 680px) { .footer-trademarks { font-size: 10px; } } .footer-bottom { padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,0.48); } .footer-bottom .right { text-align: right; max-width: 520px; line-height: 1.5; } @media(max-width: 680px) { .footer-bottom .right { text-align: center; } } /* ═══ UTIL ═══ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* FIX 13.05.2026: .skip-link base state — DOMYŚLNIE UKRYTY (off-screen) Wczesniej brakowalo base style → skip-link wyswietlal sie jako zwykly link "Przejdz do tresci". Teraz: hidden by default, pojawia sie tylko na keyboard focus (Tab key). */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* WCAG 2.4.1 — skip link reveal on keyboard focus */ .visually-hidden:focus, .visually-hidden:focus-visible, .skip-link:focus, .skip-link:focus-visible { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 18px; margin: 0; clip: auto; white-space: normal; background: var(--ink, #061a3b); color: #fff; z-index: 999999; border-radius: 6px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); outline: 2px solid var(--orange-500, #ff7a1a); outline-offset: 2px; } .reveal { opacity: 0; transform: translateY(16px); transition: all .7s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } /* ═══ MODALE ═══ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(6, 26, 59, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 9998; padding: 24px; opacity: 0; transition: opacity .25s var(--ease); } .modal-backdrop.open { display: flex; opacity: 1; } .modal { background: var(--surface); border-radius: var(--radius-xl); max-width: 720px; width: 100%; max-height: calc(100vh - 48px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(6, 26, 59, 0.35); transform: translateY(18px) scale(.98); transition: transform .3s var(--ease); } .modal-backdrop.open .modal { transform: translateY(0) scale(1); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--line); } .modal-title { font-size: 20px; font-weight: 700; color: var(--ink-deep); margin: 0; } .modal-close { background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); transition: all .2s ease; } .modal-close:hover { background: var(--bg); color: var(--ink-deep); } .modal-body { padding: 24px 28px; overflow-y: auto; color: var(--ink); line-height: 1.65; font-size: 15px; } .modal-body h3 { font-size: 17px; color: var(--ink-deep); margin: 18px 0 8px; } .modal-body h4 { font-size: 15px; color: var(--ink-deep); margin: 14px 0 6px; } .modal-body p { margin: 0 0 12px; color: var(--muted); } .modal-body ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); } .modal-body ul li { margin-bottom: 6px; } .modal-body a { color: var(--primary); text-decoration: underline; } .modal-body strong { color: var(--ink-deep); } .modal-foot { padding: 16px 28px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 12px; } /* Success modal — smaller */ .modal--sm { max-width: 480px; } .modal-success-body { padding: 48px 32px; text-align: center; } .modal-success-icon { width: 56px; height: 56px; border-radius: 50%; /* było 72x72 */ background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 16px; font-size: 28px; } .modal-success-body h3 { font-size: 24px; color: var(--ink-deep); margin: 0 0 12px; } .modal-success-body p { color: var(--muted); margin: 0 0 24px; } /* Exit intent modal */ .modal-exit { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; max-width: 560px; text-align: center; padding: 48px 36px; } .modal-exit h3 { font-size: 28px; margin: 0 0 12px; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; } .modal-exit p { color: rgba(255,255,255,.75); margin: 0 0 24px; } .modal-exit .modal-exit-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .modal-exit .btn--ghost { background: transparent; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.2); } .modal-exit .btn--ghost:hover { border-color: rgba(255,255,255,.4); color: #fff; } /* Lock scroll when modal open */ body.modal-open { overflow: hidden; } /* Form error state */ .form-input.err { border-color: #d64545; background: #fef5f5; } .form-err-msg { display: none; margin-top: 10px; padding: 10px 14px; background: #fef5f5; border: 1px solid rgba(214, 69, 69, 0.24); border-radius: var(--radius-sm); color: #b01f1f; font-size: 14px; font-weight: 500; } .form-err-msg.show { display: block; } /* ═══════════════════════════════════════════════ RODO CONSENT GROUP — premium 2026 checkboxes ═══════════════════════════════════════════════ */ .consent-group { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 16px; padding: 14px 14px 12px; background: linear-gradient(180deg, rgba(12,19,64,0.02) 0%, rgba(12,19,64,0) 100%); border: 1px solid rgba(12,19,64,0.06); border-radius: var(--radius-sm); } .consent-item { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--muted); cursor: pointer; user-select: none; } /* Zgoda opcjonalna — subtelniej wizualnie, żeby nie mylić z wymaganymi */ .consent-item--optional { opacity: 0.82; padding-top: 4px; border-top: 1px dashed var(--line); margin-top: 4px; } .consent-optional { display: inline-block; font-size: 10px; font-weight: 700; color: var(--muted-2); background: var(--surface-soft); border: 1px solid var(--line); padding: 1px 7px; border-radius: 10px; letter-spacing: 0.04em; text-transform: uppercase; font-style: normal; margin-left: 4px; vertical-align: 1px; } .consent-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid rgba(12,19,64,0.22); border-radius: 5px; background: #fff; cursor: pointer; position: relative; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .consent-item input[type="checkbox"]:hover { border-color: rgba(255,122,26,0.55); } .consent-item input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,122,26,0.22); border-color: #ff7a1a; } .consent-item input[type="checkbox"]:checked { background: linear-gradient(135deg, #ff9a3c 0%, #ff7a1a 100%); border-color: transparent; box-shadow: 0 4px 10px rgba(255,122,26,0.28); } .consent-item input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent-item.err input[type="checkbox"] { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,0.14); } .consent-item .req { color: #d64545; font-weight: 700; } .consent-item a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .consent-item a:hover { color: var(--brand-dark); } /* ═══════════════════════════════════════════════ ACCESSIBILITY — reduce motion Users with prefers-reduced-motion get a calmer experience. ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero::before, .hero::after { animation: none !important; } .accent, .hero-title .accent { animation: none !important; } } /* CALL WIDGET CSS USUNIĘTE 9.05.2026 (~167 linii) — duplikował WhatsApp FAB */ /* prefers-reduced-motion dla call-widget USUNIĘTE 9.05.2026 (call-widget removed) */ /* ═══ LABOR ILLUSION — transparent "work in progress" overlay (Buell & Norton, HBR 2011) ═══ +22% trust vs instant success — users feel the service "worked" for them. */ .labor-illusion { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px); z-index: 90; width: min(380px, calc(100% - 32px)); padding: 14px 18px; background: #ffffff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 28px 56px -12px rgba(12, 19, 64, 0.28), 0 10px 22px -6px rgba(12, 19, 64, 0.12); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); } .labor-illusion.show { opacity: 1; transform: translateX(-50%) translateY(0); } .labor-illusion__step { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 10px; } .labor-illusion__step::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--primary); border-top-color: transparent; border-radius: 50%; animation: li-spin 0.85s linear infinite; flex: 0 0 14px; } .labor-illusion__progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; } .labor-illusion__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: inherit; transition: width .6s var(--ease); } @keyframes li-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .labor-illusion { transition: opacity .15s linear; transform: translateX(-50%) !important; } .labor-illusion__step::before { animation: none; border-top-color: var(--primary); } .labor-illusion__bar { transition: none; } } /* ═══ SOCIAL PROOF TOAST — FOMO rotation (bottom-left, non-intrusive) ═══ */ .social-proof-toast { position: fixed; left: 20px; bottom: 24px; z-index: 80; max-width: 320px; padding: 12px 16px 12px 14px; display: flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(12, 19, 64, 0.22), 0 8px 20px -6px rgba(12, 19, 64, 0.10); font-size: 13px; line-height: 1.4; color: var(--ink); opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); will-change: transform, opacity; } .social-proof-toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .social-proof-toast__avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .social-proof-toast__body strong { font-weight: 700; } .social-proof-toast__body .muted { color: var(--muted-2); font-size: 11px; display: block; margin-top: 2px; } .social-proof-toast__pulse { width: 8px; height: 8px; flex: 0 0 8px; background: var(--success); border-radius: 50%; margin-left: auto; position: relative; } .social-proof-toast__pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: sp-pulse 1.6s ease-out infinite; } @keyframes sp-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } } @media (max-width: 560px){ .social-proof-toast { left: 10px; right: 10px; bottom: 14px; max-width: calc(100% - 20px); padding: 10px 14px 10px 12px; } } /* WCAG — wyłącz animacje */ @media (prefers-reduced-motion: reduce){ .social-proof-toast { transition: opacity .15s linear; transform: none !important; } .social-proof-toast__pulse::after { animation: none; } } /* Telefon — wszędzie klikalny, bez default podkreślenia */ a[href^="tel:"] { color: inherit; text-decoration: none; cursor: pointer; } a[href^="tel:"]:hover { color: var(--primary); } a[href^="tel:"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ═══ Mobile — overflow + media images ═══ */ body { overflow-x: hidden; min-width: 320px; } img, svg, video { max-width: 100%; height: auto; } /* ═══ STICKY BOTTOM BAR (mobile only) — "Zadzwoń | Sprawdź dostępność" ═══ */ /* ═══ WHATSAPP FLOATING BUTTON (FAB) ═══ * Position: bottom-right (desktop) / wyżej niż sticky-bottom (mobile). * Brand color WhatsApp: #25D366 (oficjalny). * Pulse animation = "active/online" signal (subliminal CR booster). * Pill-shape z text label na desktop, icon-only na mobile (oszczędność miejsca). */ .whatsapp-fab { position: fixed; right: 28px; /* desktop margin */ bottom: 28px; /* FIX 9.05.2026: na samym dole (call-widget usunięty, WhatsApp dziedziczy pozycję) */ z-index: 998; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; background: #25D366; color: #ffffff; border-radius: 999px; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42), 0 4px 8px rgba(0, 0, 0, 0.12); transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow .25s, background .2s; user-select: none; -webkit-tap-highlight-color: transparent; } .whatsapp-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px rgba(37, 211, 102, 0.52), 0 6px 12px rgba(0, 0, 0, 0.16); background: #1ebe5d; color: #ffffff; } .whatsapp-fab:active { transform: translateY(-1px) scale(1.0); } .whatsapp-fab-icon { flex-shrink: 0; } .whatsapp-fab-text { font-weight: 700; white-space: nowrap; } /* Subtle pulse ring — "live/online" signal */ .whatsapp-fab::before { content: ""; position: absolute; inset: -2px; border-radius: 999px; border: 2px solid #25D366; opacity: 0; animation: whatsappPulse 2.4s ease-out infinite; pointer-events: none; } @keyframes whatsappPulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .whatsapp-fab::before { animation: none; } } /* Mobile: ukryj text label, pokaż tylko ikonę. * FIX 9.05.2026: WhatsApp FAB nad sticky-bottom (76px height + 12px gap). * Stack na mobile (od dołu): * 1. sticky-bottom bottom: 0 height: 76px (0-76px) * 2. WhatsApp FAB bottom: 88px height: 52px (88-140px) */ @media (max-width: 560px) { .whatsapp-fab { padding: 14px; bottom: 88px; right: 14px; } .whatsapp-fab-text { display: none; } .whatsapp-fab-icon { width: 28px; height: 28px; } } /* Hide WhatsApp FAB gdy modal/popup jest otwarty (uniknięcie overlap z UI) */ body.modal-open .whatsapp-fab, .exit-intent-popup:not([hidden]) ~ .whatsapp-fab { display: none !important; } .sticky-bottom { display: none; /* hidden on desktop */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(15, 35, 64, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.08); gap: 10px; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); } @media (max-width: 860px) { .sticky-bottom { display: flex; } body { padding-bottom: 76px; } /* zapobiega przysłanianiu treści */ html { scroll-padding-bottom: 90px; } } /* CR FIX 16.05.2026: sticky-bottom slide-out w active funnel (Step 2/3/4). Form-internal alt-call link replace go w Step 3, sticky to noise. */ .sticky-bottom { transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; } .sticky-bottom.is-hidden-funnel { transform: translateY(110%); opacity: 0; pointer-events: none; } /* CR FIX 16.05.2026: w aktywnej fazie formy (Step 2/3/4) chowamy distraction widgets. User skupia sie na podaniu numeru — visitor counter, WhatsApp bubble, urgency = noise. */ body.funnel-active .se-visitors, body.funnel-active .se-wa-bubble, body.funnel-active .whatsapp-fab, body.funnel-active .se-urgency { opacity: 0; pointer-events: none; transition: opacity .25s ease; } .sb-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; /* było 12px — mniej */ border-radius: 12px; font-size: 13px; font-weight: 700; /* było 14px — mniej żeby mieściło się w 1 linii */ text-decoration: none; letter-spacing: -0.01em; transition: transform 0.12s, box-shadow 0.2s; min-height: 44px; /* było 48 — mniejsze */ white-space: nowrap; /* FIX: tekst NIE zawija się na 2 linie */ line-height: 1.2; } .sb-btn:active { transform: scale(0.97); } .sb-btn--call { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); } .sb-btn--cta { background: linear-gradient(135deg, #ffa64d 0%, #ff7a1a 100%); color: #1a1a1a; box-shadow: 0 4px 12px rgba(255, 122, 26, 0.35); } /* ═══════════════════════════════════════════════════════════════ 🎯 MOBILE AUDIT FIXES (≤768px) — header compact + hero tight Po audycie 2026-04-23: Oddzwoń mi (✅), form first (✅), stick bar (✅) Teraz: Klaro hide · header compact · hero stats hide · H1 smaller ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* 1. Klaro floating "ustawienia cookies" — pomarańczowy guzik widoczny na desktop, schowany na mobile */ .klaro .cookie-notice-hidden, .klaro .cm-modal[hidden] { display: none !important; } /* FORM PROGRESS BAR — mobile compact */ .form-progress { gap: 6px; margin: 0 0 12px; } .form-progress-dot { width: 13px; height: 13px; font-size: 8px; } .form-progress-dot.done { font-size: 9px; } .form-progress-text { font-size: 10.5px; margin-left: 2px; } /* 2. Header kompakt — tagline "NIEZALEŻNI DORADCY TELCO" schowany */ .brand-text small, .brand-sub, .brand__tag, .brand-tagline { display: none !important; } .brand-text strong, .brand__name { font-size: 15px !important; line-height: 1.2 !important; white-space: nowrap !important; /* FIX: logo NIE łamie się na 2 linie */ } /* FIX: Tabs Dom/Firma — lepszy kontrast aktywny vs nieaktywny na mobile */ .form-tabs { padding: 4px !important; background: var(--surface-soft) !important; border-radius: 12px !important; } .form-tab { background: transparent !important; color: var(--muted) !important; /* FIX: wszystkie taby mają tę samą wysokość, tekst w jednej linii */ flex: 1 1 0 !important; min-width: 0 !important; padding: 10px 8px !important; font-size: 12.5px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .form-tab svg { flex-shrink: 0; } .form-tab.active { background: #fff !important; color: var(--ink) !important; box-shadow: 0 2px 8px rgba(12,19,64,0.08) !important; border: 1px solid rgba(255, 122, 26, 0.18) !important; } /* FIX 16.05.2026: trust strip ma teraz 3 chipsy (Bezplatnie / 15 min / Bez umowy) — zmiana z 1fr 1fr (2 col) na 1fr 1fr 1fr (3 col), zeby zmiescily sie w 1 rzedzie. */ .hero-form-strip { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; margin-bottom: 14px !important; } .hero-form-strip-item { padding: 8px 6px !important; font-size: 11.5px !important; justify-content: center !important; text-align: center !important; min-height: 36px !important; white-space: nowrap !important; gap: 5px !important; } /* FIX: kółka kroków 1→2→3 równo rozłożone, ta sama wielkość */ .hero-steps { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; margin: 14px 0 !important; padding: 10px !important; } .hero-step { flex: 0 1 auto !important; display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; white-space: nowrap !important; } .hero-step-n { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 12px !important; border-width: 2px !important; flex-shrink: 0 !important; } .hero-step-arrow { flex: 0 0 auto !important; font-size: 12px !important; color: var(--muted-2) !important; } /* FIX: label i inputy — równy rytm, spójny padding */ .form-label { font-size: 13px !important; margin-bottom: 6px !important; font-weight: 600 !important; } .form-input { padding: 14px 16px !important; border-radius: 12px !important; font-size: 16px !important; /* 16px anti-zoom iOS */ min-height: 52px !important; } .form-group { margin-bottom: 10px !important; } .nav { padding: 10px 14px !important; min-height: 56px !important; } /* Nav CTA ukryty na mobile — sticky bottom bar ma już "Sprawdź dostępność". Zero duplikacji, więcej miejsca dla logo. */ /* FIX: selektor łapie i klasę .nav-cta ORAZ ID nav-CTA (HTML używa id zamiast klasy) */ .nav-cta, #navCta { display: none !important; } /* 3. Hero H1 — mniejszy, krótszy margin */ .hero-h1 { font-size: clamp(26px, 7.2vw, 34px) !important; line-height: 1.12 !important; margin: 0 0 14px !important; letter-spacing: -0.02em !important; } .hero-h1-serif { font-size: 0.95em !important; } .hero-sub { font-size: 14.5px !important; line-height: 1.5 !important; margin: 0 0 18px !important; } /* 4. Hero stats + Google review box — schowane na mobile (duplikacja w 'Dlaczego') */ .hero-stats, .hero-google { display: none !important; } /* 5. Hero bullets — ciaśniej */ .hero-bullets { margin: 10px 0 16px !important; gap: 8px !important; } .hero-bullets li { font-size: 13.5px !important; padding: 4px 0 !important; } /* 6. Hero — PEŁNA SZEROKOŚĆ na mobile, znika pasek tła po bokach */ .hero { padding: 18px 10px 24px !important; margin: 6px -6px 16px !important; border-radius: 14px !important; } .hero-grid { gap: 16px !important; } .hero-form { padding: 20px 16px !important; border-radius: 14px !important; margin: 0 !important; } .container { padding-left: 10px !important; padding-right: 10px !important; } /* 🔴 FIX Screen "Jak to działa" — ikony/prostokąty wystawały z prawej */ .how-step { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } .how-step-n { width: 48px !important; height: 48px !important; font-size: 18px !important; margin: 0 auto 14px !important; } .how-step-img, .how-step-icon, .how-step > img, .how-step > svg { max-width: 100% !important; height: auto !important; } /* 🔴 FIX Final CTA — headline + button wystawały z prawej */ .finalcta { padding: 28px 16px !important; margin: 16px -6px !important; border-radius: 14px !important; overflow: hidden !important; } .finalcta h2 { font-size: clamp(22px, 5.5vw, 28px) !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; text-align: center !important; word-break: break-word !important; } .finalcta-pill { font-size: 11px !important; padding: 6px 12px !important; max-width: 100% !important; white-space: normal !important; } .finalcta-actions { flex-direction: column !important; gap: 10px !important; width: 100% !important; } .finalcta-actions .btn-primary { width: 100% !important; min-width: 0 !important; padding: 14px 12px !important; font-size: 14px !important; white-space: normal !important; min-height: 52px !important; } .finalcta-phone-box { align-items: center !important; text-align: center !important; width: 100% !important; } .finalcta-phone-box strong { font-size: 18px !important; } .finalcta-checks { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } .finalcta-check { font-size: 13px !important; } /* 🔴 FIX Social Proof Toast — wystawał z prawej strony */ .social-proof-toast { left: 10px !important; right: 10px !important; bottom: 80px !important; /* nad sticky bar */ max-width: calc(100vw - 20px) !important; padding: 10px 12px !important; font-size: 12px !important; } /* 🔴 FIX Multi-section — nie wystaje z prawej */ .multi, .multi-grid, .multi-main, .multi-side-card { max-width: 100% !important; overflow: hidden !important; } .multi-features { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .multi-feat-title { font-size: 13px !important; } /* 🔴 FIX Sekcja Opinii — teksty wystawały z prawej strony */ .reviews, .reviews-head, .reviews-cards, .reviews-stats, .reviews-bars { max-width: 100% !important; overflow: hidden !important; padding: 0 !important; box-sizing: border-box !important; } .reviews-head h2, .reviews-head p { word-break: break-word !important; overflow-wrap: break-word !important; } .reviews-head h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.18 !important; } .reviews-head p { font-size: 14px !important; } .reviews-stat-row, .reviews-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .reviews-stat-val { font-size: 20px !important; } .reviews-bar { flex-wrap: nowrap !important; max-width: 100% !important; } .reviews-bar-track { flex: 1 !important; min-width: 0 !important; max-width: calc(100% - 80px) !important; } /* 🔴 FIX Trust grid — prawa kolumna obcinała tekst ("Oddzwonimy w ciągu 15 minut", "Wiodący operatorzy") */ .reviews-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; padding: 18px 16px !important; gap: 14px !important; } .reviews-trust-item { min-width: 0 !important; gap: 10px !important; } .reviews-trust-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; } .reviews-trust-text { min-width: 0 !important; flex: 1 1 auto !important; } .reviews-trust-text strong { font-size: 12.5px !important; line-height: 1.25 !important; word-break: break-word !important; overflow-wrap: break-word !important; } .reviews-trust-text small { font-size: 11px !important; line-height: 1.3 !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Restore reviews section vertical padding (padding:0 !important wcześniej usuwało też top/bottom) */ .reviews { padding: 48px 0 !important; } /* Reviews bars — drobne padding żeby "4.9/5" nie dociskało do lewej krawędzi */ .reviews-bars { padding: 16px 14px !important; } .reviews-bars-head { font-size: 12.5px !important; } } /* Fix siatki 900px — pozwól kolumnom skurczyć się poniżej rozmiaru contentu */ @media (max-width: 900px) { .reviews-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .reviews-trust-item { min-width: 0 !important; } .reviews-trust-text { min-width: 0 !important; flex: 1 1 auto !important; } .reviews-trust-text strong, .reviews-trust-text small { word-break: break-word !important; overflow-wrap: break-word !important; } } @media (max-width: 480px) { /* Container — szczelne paddingi */ .container { padding-left: 16px; padding-right: 16px; } /* Hero — zacieśnij, zmniejsz fonty */ .hero { padding: 32px 16px !important; border-radius: 18px !important; margin: 8px 0 24px !important; } .hero-h1 { font-size: clamp(28px, 8vw, 36px) !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; } .hero-sub { font-size: 14px !important; line-height: 1.5 !important; } .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .hero-stat { padding: 10px !important; } .hero-stat-val { font-size: 18px !important; } .hero-stat-lbl { font-size: 10px !important; } /* Hero form — ciaśniej */ .hero-form { padding: 20px 16px !important; border-radius: 18px !important; margin: 10px 0 20px !important; } .hero-form h2 { font-size: 20px !important; } .hero-form-sub { font-size: 12.5px !important; } /* FIX: row + wrap na małym mobile (było column → zajmowało 100px na wysokość) */ .hero-form-strip { flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; } .hero-form-strip-item { padding: 6px 10px !important; font-size: 11.5px !important; white-space: nowrap; } .form-input { padding: 13px 14px !important; font-size: 16px !important; min-height: 48px !important; } .form-label { font-size: 12.5px !important; } .btn-block { padding: 14px !important; font-size: 15px !important; } /* Sections */ .section { padding: 48px 0 !important; } section h2 { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.15 !important; } section p { font-size: 14px !important; } /* Grids — zawsze 1 kolumna */ .why-grid, .multi-grid, .pricing-grid, .how-steps, .reviews-head, .reviews-cards, .reviews-value, .b2b-grid, .b2b-feats, .finalcta-grid, .faq-grid, .footer-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* B2B section — ciaśniej */ .b2b { padding: 40px 20px !important; border-radius: 18px !important; margin: 24px 0 !important; } .b2b h2 { font-size: clamp(22px, 6vw, 28px) !important; } /* Final CTA */ .finalcta { padding: 40px 20px !important; border-radius: 18px !important; margin: 24px 0 !important; } .finalcta h2 { font-size: clamp(22px, 6vw, 30px) !important; } .finalcta-pin { display: none !important; } /* pin chowamy na mobile — ratuje miejsce */ .finalcta-actions { flex-direction: column; gap: 12px; } /* Call Widget USUNIĘTE 9.05.2026 — dead rule removed */ /* Nav CTA button — ciaśniejszy */ .nav-cta { padding: 8px 12px !important; font-size: 12px !important; min-height: 38px !important; max-width: 160px !important; } /* Labor Illusion małe kółko — chowamy na mobile gdy nie aktywne */ .labor-illusion:not(.show) { display: none !important; } /* Social Proof Toast — bottom, pełna szerokość */ .social-proof-toast { left: 10px !important; right: 10px !important; bottom: 78px !important; /* nad Call Widget */ max-width: calc(100vw - 20px) !important; padding: 10px 12px !important; font-size: 12px !important; } /* Labor Illusion */ .labor-illusion { left: 10px !important; right: 10px !important; width: calc(100vw - 20px) !important; max-width: none !important; transform: translateY(16px) !important; } .labor-illusion.show { transform: translateY(0) !important; } /* Nav — jeśli jest sticky */ .nav { padding: 10px 12px !important; } .nav-cta { font-size: 11px !important; padding: 8px 12px !important; min-height: 36px; } /* Modalne okna — full screen na małych */ .modal { padding: 24px 18px !important; border-radius: 14px !important; margin: 16px !important; max-height: calc(100vh - 32px); overflow-y: auto; } .modal-body { font-size: 13.5px; } /* Pricing cards */ .pkg { padding: 24px 18px !important; } .pkg-price-main { font-size: 36px !important; } /* Touch targets — min 44px */ a[href^="tel:"], .btn, button, .form-tab, .form-step-back, [data-modal-close], .faq summary { min-height: 44px; display: inline-flex; align-items: center; } /* Wyjątek: hero-mobile-call ma własny layout (flex row, większy target) */ a.hero-mobile-call { display: flex; min-height: 64px; } /* Footer */ footer { padding: 40px 16px 24px !important; } .footer-col h3 { font-size: 13px !important; } /* Safe-area iOS (notch) */ body { padding-bottom: env(safe-area-inset-bottom); } /* Ukryj elementy które na mobile tylko przeszkadzają */ .hero-orb-1, .hero-orb-2 { display: none !important; } /* orby — zbędny dekor */ .hero::after { opacity: 0.3 !important; } /* aurora — stonowana */ } /* Bardzo małe ekrany (<360px — stare Androidy, iPhone SE 1gen) */ @media (max-width: 360px) { .hero-h1 { font-size: 24px !important; } .form-input { padding: 12px !important; } .hero-form { padding: 16px 12px !important; } } /* ═══════════════════════════════════════════════════════════════ */ /* Loading state */ .btn.loading { pointer-events: none; opacity: .7; } .btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; margin-left: 10px; animation: btnSpin .7s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } } /* THEME TOGGLE — przełącznik jasny/ciemny */ .theme-toggle { position: fixed; bottom: 92px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); cursor: pointer; z-index: 90; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all 0.2s var(--ease); } .theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--primary); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* Na mobile pozycja bliżej — nad sticky-bottom */ @media (max-width: 720px) { .theme-toggle { bottom: 82px; right: 14px; width: 40px; height: 40px; } .theme-toggle svg { width: 18px; height: 18px; } } /* ═══════════════════════════════════════════════════════════════════ DARK MODE COMPONENT FIXES — poprawki komponentów które mają hardcoded jasne kolory i wyglądały źle w dark ═══════════════════════════════════════════════════════════════════ */ /* ── FORMULARZ HERO — karta ma hardcoded #ffffff gradient, naprawiamy ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-form { background: linear-gradient(180deg, #111a30 0%, #0d1428 100%) !important; color: var(--ink); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55), 0 24px 50px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } :root:not([data-theme="light"]) .hero-form::before { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 140, 51, 0.14) 0%, transparent 70%) !important; } /* Form labels i headings w ciemnym formularzu */ :root:not([data-theme="light"]) .hero-form h1, :root:not([data-theme="light"]) .hero-form h2, :root:not([data-theme="light"]) .hero-form h3, :root:not([data-theme="light"]) .hero-form label, :root:not([data-theme="light"]) .hero-form .form-label { color: var(--ink-deep) !important; } :root:not([data-theme="light"]) .hero-form p, :root:not([data-theme="light"]) .hero-form .form-sub { color: var(--muted) !important; } /* Inputy w formularzu — muszą być wyraźne na ciemnym tle karty */ :root:not([data-theme="light"]) .hero-form input[type="text"], :root:not([data-theme="light"]) .hero-form input[type="tel"], :root:not([data-theme="light"]) .hero-form input[type="email"], :root:not([data-theme="light"]) .hero-form textarea, :root:not([data-theme="light"]) .hero-form select { background: rgba(255, 255, 255, 0.04) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; } :root:not([data-theme="light"]) .hero-form input::placeholder, :root:not([data-theme="light"]) .hero-form textarea::placeholder { color: var(--muted-2) !important; } :root:not([data-theme="light"]) .hero-form input:focus, :root:not([data-theme="light"]) .hero-form textarea:focus, :root:not([data-theme="light"]) .hero-form select:focus { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--primary) !important; outline: none; } /* form-tabs (Dom/Mieszkanie vs Firma) */ :root:not([data-theme="light"]) .form-tabs { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--line-strong) !important; } :root:not([data-theme="light"]) .form-tab { color: var(--muted) !important; background: transparent !important; } :root:not([data-theme="light"]) .form-tab.active, :root:not([data-theme="light"]) .form-tab[aria-selected="true"] { background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* ── TAG PILLS "Dla kogo szukamy" — białe na białym = niewidoczne ── */ :root:not([data-theme="light"]) .tag { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; } :root:not([data-theme="light"]) .tag.active { background: var(--primary) !important; color: #0a1124 !important; border-color: var(--primary) !important; } /* ── Gradient radialny w body — w dark mode zbyt agresywny, stłumić ── */ :root:not([data-theme="light"]) body { background: radial-gradient(1200px 800px at 10% 0%, rgba(255, 140, 51, 0.04) 0%, transparent 60%), radial-gradient(1000px 700px at 90% 100%, rgba(79, 129, 255, 0.04) 0%, transparent 60%), var(--bg) !important; } /* ── Why-contact card w sekcji why ── */ :root:not([data-theme="light"]) .why-contact { background: var(--surface) !important; border-color: var(--line) !important; } :root:not([data-theme="light"]) .why-contact-phone-icon { background: var(--primary-soft) !important; color: var(--primary) !important; } } /* Te same reguły dla [data-theme="dark"] (manualny wybór) */ :root[data-theme="dark"] .hero-form { background: linear-gradient(180deg, #111a30 0%, #0d1428 100%) !important; color: var(--ink); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55), 0 24px 50px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] .hero-form::before { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 140, 51, 0.14) 0%, transparent 70%) !important; } :root[data-theme="dark"] .hero-form h1, :root[data-theme="dark"] .hero-form h2, :root[data-theme="dark"] .hero-form h3, :root[data-theme="dark"] .hero-form label { color: var(--ink-deep) !important; } :root[data-theme="dark"] .hero-form p { color: var(--muted) !important; } :root[data-theme="dark"] .hero-form input[type="text"], :root[data-theme="dark"] .hero-form input[type="tel"], :root[data-theme="dark"] .hero-form input[type="email"], :root[data-theme="dark"] .hero-form textarea, :root[data-theme="dark"] .hero-form select { background: rgba(255, 255, 255, 0.04) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; } :root[data-theme="dark"] .hero-form input::placeholder, :root[data-theme="dark"] .hero-form textarea::placeholder { color: var(--muted-2) !important; } :root[data-theme="dark"] .form-tabs { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--line-strong) !important; } :root[data-theme="dark"] .form-tab { color: var(--muted) !important; background: transparent !important; } :root[data-theme="dark"] .form-tab.active, :root[data-theme="dark"] .form-tab[aria-selected="true"] { background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } :root[data-theme="dark"] .tag { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; } :root[data-theme="dark"] .tag.active { background: var(--primary) !important; color: #0a1124 !important; border-color: var(--primary) !important; } :root[data-theme="dark"] body { background: radial-gradient(1200px 800px at 10% 0%, rgba(255, 140, 51, 0.04) 0%, transparent 60%), radial-gradient(1000px 700px at 90% 100%, rgba(79, 129, 255, 0.04) 0%, transparent 60%), var(--bg) !important; } :root[data-theme="dark"] .why-contact { background: var(--surface) !important; border-color: var(--line) !important; } :root[data-theme="dark"] .why-contact-phone-icon { background: var(--primary-soft) !important; color: var(--primary) !important; } /* ═══════════════════════════════════════════════════════════════════ DARK MODE COMPONENT FIXES V2 — krytyczne poprawki widoczności Naprawa: logo, CTA, step dots, bullet icons, rating bars, accent ═══════════════════════════════════════════════════════════════════ */ /* ── LOGO "Światłowód Expert" — tekst ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand { color: var(--ink-deep) !important; } } :root[data-theme="dark"] .brand { color: var(--ink-deep) !important; } /* ── PRIMARY BUTTONS — jasny świetlisty pomarańcz w dark mode ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { background: linear-gradient(135deg, #ffb366 0%, #ff9247 55%, #ff7a1a 100%) !important; color: #0a1124 !important; box-shadow: 0 14px 30px rgba(255, 140, 51, 0.45), 0 6px 16px rgba(255, 140, 51, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } :root:not([data-theme="light"]) .btn-primary:hover { background: linear-gradient(135deg, #ffc285 0%, #ffa255 55%, #ff8c33 100%) !important; box-shadow: 0 22px 50px rgba(255, 140, 51, 0.55), 0 10px 20px rgba(255, 140, 51, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } } :root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #ffb366 0%, #ff9247 55%, #ff7a1a 100%) !important; color: #0a1124 !important; box-shadow: 0 14px 30px rgba(255, 140, 51, 0.45), 0 6px 16px rgba(255, 140, 51, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } :root[data-theme="dark"] .btn-primary:hover { background: linear-gradient(135deg, #ffc285 0%, #ffa255 55%, #ff8c33 100%) !important; } /* ── STICKY BOTTOM BAR — "Sprawdź dostępność" świetlisty ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-btn--cta { background: linear-gradient(135deg, #ffb366 0%, #ff8c33 100%) !important; color: #0a1124 !important; box-shadow: 0 4px 12px rgba(255, 140, 51, 0.45) !important; } :root:not([data-theme="light"]) .sb-btn--call { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } :root:not([data-theme="light"]) .sticky-bottom { background: rgba(10, 17, 36, 0.96) !important; border-top: 1px solid var(--line-strong) !important; backdrop-filter: blur(18px) saturate(180%); } } :root[data-theme="dark"] .sb-btn--cta { background: linear-gradient(135deg, #ffb366 0%, #ff8c33 100%) !important; color: #0a1124 !important; box-shadow: 0 4px 12px rgba(255, 140, 51, 0.45) !important; } :root[data-theme="dark"] .sb-btn--call { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } :root[data-theme="dark"] .sticky-bottom { background: rgba(10, 17, 36, 0.96) !important; border-top: 1px solid var(--line-strong) !important; backdrop-filter: blur(18px) saturate(180%); } /* ── HERO TITLE ACCENT "dla Twojego adresu" — jaśniejszy gradient ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .title .accent, :root:not([data-theme="light"]) .accent { background: linear-gradient(135deg, #ffc285 0%, #ffa255 50%, #ff8c33 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } :root:not([data-theme="light"]) .hero-light .accent { background: linear-gradient(135deg, #ffd9a8 0%, #ffb366 60%, #ff9247 100%) !important; } } :root[data-theme="dark"] .title .accent, :root[data-theme="dark"] .accent { background: linear-gradient(135deg, #ffc285 0%, #ffa255 50%, #ff8c33 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } :root[data-theme="dark"] .hero-light .accent { background: linear-gradient(135deg, #ffd9a8 0%, #ffb366 60%, #ff9247 100%) !important; } /* ── STEP DOTS — numery 1, 2, 3 w formularzu ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class*="step-dot"], :root:not([data-theme="light"]) [class*="step-indicator"], :root:not([data-theme="light"]) .form-step-indicator span, :root:not([data-theme="light"]) .form-step-dots > * { background: rgba(255, 255, 255, 0.08) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; } :root:not([data-theme="light"]) [class*="step-dot"].active, :root:not([data-theme="light"]) [class*="step-dot"][aria-current="step"], :root:not([data-theme="light"]) .form-step-dots > .active { background: var(--primary) !important; color: #0a1124 !important; border-color: var(--primary) !important; } } /* ── HERO FEATURE LIST checkmarks — ikony w bullet list ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-features svg, :root:not([data-theme="light"]) .hero-list svg, :root:not([data-theme="light"]) .bullet svg, :root:not([data-theme="light"]) [class*="check-ico"], :root:not([data-theme="light"]) [class*="feat-check"] { color: var(--primary) !important; background: var(--primary-soft) !important; border-color: rgba(255, 140, 51, 0.3) !important; } } /* ── REVIEW BARS (5★ 82%, 4★ 13% itd.) — pomarańczowe zamiast ciemnoczerwone ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class*="rating-bar"] > span, :root:not([data-theme="light"]) [class*="rating-bar"]::after, :root:not([data-theme="light"]) .rating-fill, :root:not([data-theme="light"]) [class*="stars-fill"], :root:not([data-theme="light"]) .review-bar-fill { background: linear-gradient(90deg, #ff9247 0%, #ff8c33 100%) !important; } } :root[data-theme="dark"] [class*="rating-bar"] > span, :root[data-theme="dark"] .rating-fill, :root[data-theme="dark"] .review-bar-fill { background: linear-gradient(90deg, #ff9247 0%, #ff8c33 100%) !important; } /* ── FOOTER TRUST CARDS (Dane bezpieczne / Oddzwonimy) — ikony pomarańczowe ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-trust-card, :root:not([data-theme="light"]) [class*="trust-card"], :root:not([data-theme="light"]) .footer-trust-item { background: var(--surface) !important; border-color: var(--line) !important; } :root:not([data-theme="light"]) .footer-trust-card svg, :root:not([data-theme="light"]) [class*="trust-card"] svg, :root:not([data-theme="light"]) .footer-trust-icon { color: var(--primary) !important; } :root:not([data-theme="light"]) .footer-trust-icon-wrap { background: var(--primary-soft) !important; } } :root[data-theme="dark"] .footer-trust-card, :root[data-theme="dark"] [class*="trust-card"], :root[data-theme="dark"] .footer-trust-item { background: var(--surface) !important; border-color: var(--line) !important; } :root[data-theme="dark"] .footer-trust-card svg, :root[data-theme="dark"] [class*="trust-card"] svg { color: var(--primary) !important; } /* ── EYEBROW / PILLS "ODDZWANIAMY W 15 MINUT" ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow, :root:not([data-theme="light"]) [class*="eyebrow"] { background: rgba(255, 140, 51, 0.12) !important; color: var(--primary-2) !important; border-color: rgba(255, 140, 51, 0.24) !important; } } :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] [class*="eyebrow"] { background: rgba(255, 140, 51, 0.12) !important; color: var(--primary-2) !important; border-color: rgba(255, 140, 51, 0.24) !important; } /* ── BRAND MARK (logo square) pozostaje pomarańczowy — OK w dark ── */ /* (nie ruszamy — już wygląda dobrze) */ /* ── SCROLL-TO-TOP BUTTON (strzałka w górę w sticky bar) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scroll-top-btn, :root:not([data-theme="light"]) [class*="scroll-top"] { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } } /* ═══════════════════════════════════════════════════════════════════ FORCE LIGHT MODE — wyłączamy dark mode całkowicie Powód: dark mode rendering miał bugi na ~50% mobile userów (Samsung Internet, Mozilla z prefers-color-scheme: dark). Light mode wygląda dobrze wszędzie. ═══════════════════════════════════════════════════════════════════ */ :root { color-scheme: light !important; /* Zerujemy wszystkie dark theme variables - przywracamy light defaults */ --bg: #fffaf3 !important; --surface: #ffffff !important; --surface-soft: #fbfaf8 !important; --ink: #0c1340 !important; --ink-deep: #0a1124 !important; --muted: #4a5278 !important; --muted-2: #7a82a3 !important; --line: rgba(15, 35, 64, 0.10) !important; --line-strong: rgba(15, 35, 64, 0.18) !important; --primary: #ff7a1a !important; --primary-2: #ff8a35 !important; --primary-soft: rgba(255, 122, 26, 0.12) !important; } html { color-scheme: light !important; background: #fffaf3 !important; } body { background: radial-gradient(1200px 800px at 10% 0%, rgba(255, 122, 26, 0.05) 0%, transparent 55%), radial-gradient(1000px 700px at 90% 100%, rgba(79, 129, 255, 0.04) 0%, transparent 55%), #fffaf3 !important; color: #0c1340 !important; } /* Theme toggle button - ukrywamy */ #themeToggle, .theme-toggle, [data-theme-toggle] { display: none !important; } /* Wszystkie nadpisania dark mode wcześniej dodane - wyłączamy */ @media (prefers-color-scheme: dark) { :root, html, body { color-scheme: light !important; background: #fffaf3 !important; color: #0c1340 !important; } /* Wszystkie elementy które wcześniej miały dark mode override - przywracamy light */ .hero-form, .brand, .btn-primary, .sb-btn--cta, .tag, .form-tabs, .form-tab { /* Przywróć defaults z głównego CSS - bez !important żeby nie nadpisywać light styles */ } } /* ═══════════════════════════════════════════════════════════════════ V3 FORM OPTIMIZATIONS — komponenty zwiększające konwersję Cel: form_start → form_submit z 9% → 25-33% ═══════════════════════════════════════════════════════════════════ */ /* ── ENHANCED SUMMARY — zamiast cienkiej "Adres zapisany" ── */ .form-step-summary--v3 { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgba(28,156,99,0.08) 0%, rgba(28,156,99,0.04) 100%); border: 1.5px solid rgba(28,156,99,0.22); border-radius: 12px; margin-bottom: 18px; color: var(--ink); } .form-step-summary--v3 .fss-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--success); color: white; display: grid; place-items: center; flex-shrink: 0; } .form-step-summary--v3 .fss-content { flex: 1; min-width: 0; } .form-step-summary--v3 .fss-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; } .form-step-summary--v3 .fss-address { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; word-break: break-word; } .form-step-summary--v3 .fss-back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,122,26,0.08); border: 1px solid rgba(255,122,26,0.25); color: var(--primary); font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; transition: all .15s ease; } .form-step-summary--v3 .fss-back:hover { background: var(--primary); color: white; border-color: var(--primary); } /* ── FORM LABEL HELPER — "— oddzwonimy w 15 minut" ── */ .form-label-helper { font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 4px; } /* ── REASSURANCE BOX pod polem telefonu ── */ .form-reassurance { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 8px 10px; background: rgba(28,156,99,0.05); border: 1px solid rgba(28,156,99,0.13); border-radius: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ink); } .form-reassurance svg { flex-shrink: 0; color: var(--success); margin-top: 2px; } .form-reassurance strong { color: var(--ink); font-weight: 700; } /* ═══ DEAD CSS REMOVED 13.05.2026 (cleanup po Step 3 declutter) ═══ * Usunięte (zero JS query refs, zero render impact): * .form-call-alt + .form-call-alt-divider (zastąpione .form-call-alt-compact) * .cta-value-reveal* + .cvr-check (usunięte z DOM jako redundant) * .form-call-alt-link / -text / -num / -small (zastąpione kompaktowym linkiem) * Oszczędność: ~130 linii CSS, ~3.5KB unminified. */ /* ═══ APARTMENT TOGGLE — "+ Dodaj nr mieszkania" (FIX 9.05.2026) * Mniej widoczne pola = mniej friction. Większość userów nie potrzebuje. */ .apartment-toggle-group { margin-top: -8px; margin-bottom: 12px; } .apartment-toggle-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 6px 0; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; } .apartment-toggle-btn:hover { color: var(--primary); } .apartment-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 1; } #apartmentField { margin-top: 10px; animation: aptFadeIn .25s ease; } @keyframes aptFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ── DEAD CSS REMOVED 13.05.2026: .form-call-alt-link/text/num/small/svg * (53 linii) — element zastąpiony przez .form-call-alt-compact (Step 3 declutter) */ /* ── COMBINED CONSENT (single checkbox) — bardziej widoczna niż 3 osobne ── */ .consent-group--single { margin: 8px 0 6px; } .consent-item--combined { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: rgba(255,122,26,0.04); border: 1.5px solid rgba(255,122,26,0.14); border-radius: 12px; cursor: pointer; transition: all .15s ease; font-size: 13px; line-height: 1.55; color: var(--ink); } .consent-item--combined:hover { background: rgba(255,122,26,0.07); border-color: rgba(255,122,26,0.25); } .consent-item--combined input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; } .consent-item--combined.err { background: rgba(214,69,69,0.05); border-color: rgba(214,69,69,0.4); } .consent-item--combined input[type="checkbox"]:checked { background: linear-gradient(135deg, #ff9a3c 0%, #ff7a1a 100%) !important; border-color: transparent !important; } /* ── SOCIAL PROOF — "Dziś: 7 osób sprawdziło" ── */ .form-social-proof { margin-top: 8px; padding: 10px 14px; background: rgba(28,156,99,0.06); border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); line-height: 1.4; } .form-social-proof .fsp-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: fspPulse 2s ease-in-out infinite; flex-shrink: 0; } .form-social-proof strong { color: var(--ink); font-weight: 700; } @keyframes fspPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(28, 156, 99, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(28, 156, 99, 0); } } /* ── BTN CTA V3 — mocniejszy primary ── */ .btn-cta-v3 { margin-top: 4px; font-size: 16.5px !important; letter-spacing: -0.01em; text-shadow: 0 1px 0 rgba(255,255,255,0.35); } /* PHONE INPUT VALID STATE — usunięte 9.05.2026 (redundancja z .form-input.valid) */ /* ═══════════════════════════════════════════════════════════════════ KARTA FORMULARZA W HERO — kolorystyka + spójność Problem: kremowa karta na ciemnym hero wyglądała jak naklejka Fix: subtelnie przyciemnione tło + lepszy cień + akcent pomarańczowy ═══════════════════════════════════════════════════════════════════ */ .hero-form { background: linear-gradient(180deg, #ffffff 0%, #fdf8f0 100%) !important; border: 1px solid rgba(255, 122, 26, 0.15) !important; box-shadow: 0 50px 120px rgba(15, 35, 64, 0.35), 0 24px 50px rgba(15, 35, 64, 0.20), 0 4px 12px rgba(15, 35, 64, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; } .hero-form::before { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255, 122, 26, 0.10) 0%, transparent 65%) !important; } /* FLOATING CALLBACK WIDGET — USUNIĘTE 9.05.2026 Sekcja CSS skrywała call-widget gdy hero w viewport. Cała funkcjonalność usunięta wraz z call-widget — WhatsApp FAB + sticky-bottom + main form wystarczają. */ /* ═══════════════════════════════════════════════════════════════════ LOGO HEADER — drobne poprawki kontrastu ═══════════════════════════════════════════════════════════════════ */ .brand { color: var(--ink-deep) !important; } .brand-tagline, [class*="brand-sub"], [class*="brand-meta"] { color: var(--muted) !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE — mobile poprawki dla nowych komponentów ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .form-step-summary--v3 { padding: 12px 14px; gap: 10px; } .form-step-summary--v3 .fss-icon { flex: 0 0 28px; width: 28px; height: 28px; } .form-step-summary--v3 .fss-icon svg { width: 16px; height: 16px; } .form-step-summary--v3 .fss-title { font-size: 11px; } .form-step-summary--v3 .fss-address { font-size: 14px; } .form-step-summary--v3 .fss-back { font-size: 11.5px; padding: 5px 8px; } .form-reassurance { font-size: 12px; padding: 10px 12px; } .consent-item--combined { font-size: 12.5px; padding: 10px 12px; } .form-social-proof { font-size: 12px; padding: 9px 12px; } .btn-cta-v3 { font-size: 15px !important; } } /* ═══════════════════════════════════════════════════════════════════ V4 SINGLE-STEP FORM — kluczowe komponenty optymalizacji konwersji Cel: form_start → form_submit z 9% → 30%+ ═══════════════════════════════════════════════════════════════════ */ /* ── CITY QUICK-PICK CHIPS ── */ .city-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .city-chip { display: inline-flex; align-items: center; padding: 7px 13px; background: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(15, 35, 64, 0.14); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; /* FIX TBT (PSI: nieskomponowane animacje padding/font-size): transition: all → tylko background, border-color, transform (composited). */ transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; font-family: inherit; } .city-chip:hover { background: rgba(255, 122, 26, 0.10); border-color: rgba(255, 122, 26, 0.45); transform: translateY(-1px); } .city-chip.active { background: linear-gradient(135deg, #ffa64d 0%, #ff7a1a 100%); border-color: transparent; color: #1a1a1a; box-shadow: 0 4px 10px rgba(255, 122, 26, 0.35); } /* FIX 12.05.2026 PROACTIVE: animacja pulse dla auto-wybranego chip'a (Google Ads landing). User widzi "system mnie zna" = trust + zachęta do interakcji. */ @keyframes cityChipPulse { 0% { transform: scale(1); box-shadow: 0 4px 10px rgba(255, 122, 26, 0.35); } 50% { transform: scale(1.08); box-shadow: 0 6px 18px rgba(255, 122, 26, 0.55); } 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(255, 122, 26, 0.35); } } /* ── FORM GROUPS — single-step spacing ── */ .form-single-step .form-group { margin-bottom: 8px; } .form-single-step .form-group-address { margin-bottom: 6px; } /* ── ADDRESS COMPLETE INDICATOR ── */ .address-complete { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(135deg, rgba(28,156,99,0.10) 0%, rgba(28,156,99,0.05) 100%); border: 1.5px solid rgba(28,156,99,0.24); border-radius: 8px; margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--ink); opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; } .address-complete.show { opacity: 1; transform: translateY(0); } .address-complete .ac-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: white; display: grid; place-items: center; flex-shrink: 0; } .address-complete .ac-text strong { color: var(--success); font-weight: 700; } /* ─── STANY AVAILABILITY CHECK (data-state) ─── */ /* Domyślnie: pokazuj ac-default, ukryj resztę */ .address-complete .ac-default, .address-complete .ac-checking, .address-complete .ac-success, .address-complete .ac-notfound { display: none; align-items: center; gap: 10px; width: 100%; } .address-complete[data-state="default"] .ac-default { display: flex; } /* STAN: sprawdzamy (spinner) */ .address-complete[data-state="checking"] { background: linear-gradient(90deg, rgba(255,122,26,0.06) 0%, rgba(255,122,26,0.03) 100%); border-color: rgba(255,122,26,0.20); } .address-complete[data-state="checking"] .ac-checking { display: flex; } .address-complete .ac-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,122,26,0.25); border-top-color: var(--orange-500, #ff7a1a); border-radius: 50%; animation: ac-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes ac-spin { to { transform: rotate(360deg); } } /* STAN: dostępny (Orange success) — profesjonalna informacja */ .address-complete[data-state="success"] { background: linear-gradient(135deg, rgba(255,122,26,0.08) 0%, rgba(255,122,26,0.04) 100%); border: 1.5px solid var(--orange-500, #ff7a1a); padding: 12px 14px; position: relative; } .address-complete[data-state="success"]::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--orange-500, #ff7a1a); border-radius: 8px 0 0 8px; } .address-complete[data-state="success"] .ac-success { display: flex; align-items: flex-start; gap: 10px; width: 100%; } .address-complete .ac-icon-orange { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--orange-500, #ff7a1a); color: white; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; } .address-complete .ac-success-content { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; } .address-complete .ac-success-content strong { color: var(--ink, #061a3b); font-weight: 600; font-size: 13.5px; } .address-complete .ac-success-sub { font-size: 12.5px; color: var(--muted, #5f6b7a); } /* STAN: nie znaleziono (neutral) */ .address-complete[data-state="notfound"] { background: rgba(15,35,64,0.04); border-color: rgba(15,35,64,0.12); } .address-complete[data-state="notfound"] .ac-notfound { display: flex; } .address-complete .ac-icon-q { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,35,64,0.08); color: var(--muted, #5f6b7a); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .address-complete[data-state="notfound"] .ac-text { color: var(--muted, #5f6b7a); font-size: 12px; line-height: 1.4; } /* ─── KONIEC AVAILABILITY CHECK STATES ─── */ /* ── PHONE GROUP — progressive reveal ── FIX CLS (PSI 0.037): transition: all → transition: opacity tylko. `all` triggerował transition na layout properties → CLS. */ .form-group-phone { position: relative; transition: opacity .25s ease; /* min-height rezerwuje miejsce nawet gdy opacity 0 → zero CLS przy reveal */ min-height: 92px; } .form-group-phone.revealed { opacity: 1; } .form-group-phone.revealed::before { content: ""; position: absolute; inset: -8px -10px; background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(255, 122, 26, 0.06) 0%, transparent 70%); border-radius: 16px; pointer-events: none; z-index: -1; animation: phoneRevealGlow .6s ease-out; } @keyframes phoneRevealGlow { 0% { opacity: 0; transform: scale(0.95); } 60% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } /* ── HERO STEPS V4 — value timeline ── */ .hero-steps-v4 { display: flex; gap: 4px; align-items: center; justify-content: space-between; margin: 4px 0 18px; padding: 8px 4px; background: rgba(255, 255, 255, 0.5); border-radius: 12px; border: 1px solid rgba(15, 35, 64, 0.06); } .hero-steps-v4 .hero-step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; transition: all .25s ease; padding: 4px 6px; } .hero-steps-v4 .hero-step-n { width: 24px; height: 24px; border-radius: 50%; background: rgba(15, 35, 64, 0.05); border: 1.5px solid rgba(15, 35, 64, 0.10); display: grid; place-items: center; color: var(--muted); transition: all .25s ease; flex-shrink: 0; } .hero-steps-v4 .hero-step.done .hero-step-n { background: var(--success); border-color: var(--success); color: white; } .hero-steps-v4 .hero-step.done { color: var(--success); } .hero-steps-v4 .hero-step.active .hero-step-n { background: linear-gradient(135deg, #ffa64d 0%, #ff7a1a 100%); border-color: transparent; color: white; box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18); animation: stepActivePulse 1.4s ease-in-out infinite; } .hero-steps-v4 .hero-step.active { color: var(--ink); } @keyframes stepActivePulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.08); } } .hero-steps-v4 .hero-step-arrow { flex: 0 0 auto; color: rgba(15, 35, 64, 0.15); font-size: 14px; } .hero-steps-v4 .hero-step-label { white-space: nowrap; } /* ── CTA V4 — dwie linie z konkretem ── */ .btn-cta-v4 { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 20px !important; min-height: 56px !important; } .btn-cta-v4 .btn-cta-main { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 1px 0 rgba(255,255,255,0.35); } .btn-cta-v4 .btn-cta-sub { font-size: 11.5px; font-weight: 600; opacity: 0.78; letter-spacing: 0.2px; } /* ── MOBILE OPTIMIZATIONS ── */ @media (max-width: 480px) { .city-chips { gap: 5px; } .city-chip { padding: 6px 11px; font-size: 12px; } .hero-steps-v4 { padding: 6px 2px; margin: 2px 0 14px; } .hero-steps-v4 .hero-step { font-size: 11px; gap: 4px; padding: 2px 4px; } .hero-steps-v4 .hero-step-n { width: 22px; height: 22px; } .hero-steps-v4 .hero-step-n svg { width: 12px; height: 12px; } .hero-steps-v4 .hero-step-label { font-size: 10.5px; } .hero-steps-v4 .hero-step-arrow { font-size: 11px; } .address-complete { font-size: 12px; padding: 9px 12px; } .btn-cta-v4 { min-height: 60px !important; padding: 12px 18px !important; } .btn-cta-v4 .btn-cta-main { font-size: 15.5px; } .btn-cta-v4 .btn-cta-sub { font-size: 11px; } } /* ═══════════════════════════════════════════════════════════════════ KARTA HERO-FORM — finalna polerka ═══════════════════════════════════════════════════════════════════ */ .hero-form { background: linear-gradient(180deg, #ffffff 0%, #fdfaf4 100%) !important; border: 1px solid rgba(255, 122, 26, 0.18) !important; box-shadow: 0 60px 140px rgba(15, 35, 64, 0.42), 0 28px 60px rgba(15, 35, 64, 0.24), 0 6px 16px rgba(15, 35, 64, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } .hero-form::before { background: radial-gradient(ellipse 90% 70% at 50% 25%, rgba(255, 122, 26, 0.13) 0%, transparent 65%) !important; } /* ═══════════════════════════════════════════════════════════════════ FORM-CARD V2 (fcv2) — Design system z propozycja-8.html Multi-step (4 kroki): adres → analiza → telefon → success Montserrat heavy weights, navy + orange palette, white card on dark hero ═══════════════════════════════════════════════════════════════════ */ .fcv2-form { display: block; } /* ── Step container + animacja entry ── */ .fcv2-step { display: none; } .fcv2-step.is-active, .fcv2-step:not([hidden]) { display: block; animation: fcv2In 0.4s ease-out; } @keyframes fcv2In { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Head: pin icon + title ── */ .fcv2-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .fcv2-head--center { justify-content: center; text-align: center; flex-direction: column; gap: 4px; } .fcv2-pin { width: 38px; height: 38px; background: #0a1f3d; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ff7a1a; flex-shrink: 0; } .fcv2-title { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: clamp(18px, 2vw, 22px) !important; text-transform: uppercase; letter-spacing: -0.01em !important; line-height: 1.15 !important; color: #061a3b !important; margin: 0 !important; } /* ── Step indicator: 3 doty (active/done/empty) ── */ .fcv2-stepind { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; } .fcv2-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(15, 35, 64, 0.18); transition: all .3s; } .fcv2-dot.is-active { background: #ff7a1a; width: 28px; border-radius: 999px; box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.18); } .fcv2-dot.is-done { background: #10b981; } /* ── Field input z ikoną SVG po prawej ── */ .fcv2-fld { margin-bottom: 12px; } .fcv2-lbl { display: block; font-size: 13px; font-weight: 600; color: #061a3b; margin-bottom: 6px; font-family: 'Inter', sans-serif; } .fcv2-lbl .req { color: #ff7a1a; font-weight: 700; } .fcv2-helper { color: #64748b; font-weight: 400; font-size: 12px; } .fcv2-input-wrap { position: relative; } .fcv2-input { width: 100%; padding: 14px 48px 14px 16px; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: #0f172a; outline: none; transition: all 0.2s; -webkit-appearance: none; } .fcv2-input:focus { border-color: #ff7a1a; background: #fff; box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.16); } .fcv2-input::placeholder { color: #94a3b8; font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════ FIX 10.05.2026 — DEAD CLICKS (Clarity 13.16% sessions) Strategia: info-boxy dostają cursor:default (visual hint "to nie button"), a 3 hero-boxy stają się KLIKALNE (data-scroll-to → smooth scroll do sekcji). ═══════════════════════════════════════════════════════════════════ */ /* INFO-BOXY (nie-klikalne) — visual hint że to read-only */ .hero-freshness, .hero-broker-note, .hero-bullets, .hero-bullets li, .hero-price-anchor, .hero-price-anchor *, .hero-op-legal, .hero-op-more, .fcv2-meta, .cta-microfacts, .cta-microfact { cursor: default; } /* .cta-value-reveal usuniete z DOM 13.05.2026 (Step 3 declutter) */ .hero-bullets .check { cursor: default; } /* fcv2-input-icon (search/home icon w polu) — pointer-events:none już ma, ale dodaj cursor:default */ .fcv2-input-icon { cursor: default; pointer-events: none; } /* KLIKALNE info-boxy — pointer + subtle hover */ [data-scroll-to] { cursor: pointer; transition: transform .25s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .25s var(--ease, cubic-bezier(.16,1,.3,1)); position: relative; } [data-scroll-to]:hover { transform: translateY(-2px); } [data-scroll-to]:focus-visible { outline: 2px solid var(--primary, #ff7a1a); outline-offset: 4px; border-radius: 12px; } /* Hint "→" przy hover na klikalnych hero-boxach (subtle, nie agresywny) */ .hero-stats[data-scroll-to]::after, .hero-google[data-scroll-to]::after, .hero-operators[data-scroll-to]::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(-6px); font-size: 18px; font-weight: 700; color: rgba(255, 122, 26, 0); transition: opacity .25s ease, transform .25s ease, color .25s ease; pointer-events: none; } .hero-stats[data-scroll-to]:hover::after, .hero-google[data-scroll-to]:hover::after, .hero-operators[data-scroll-to]:hover::after { color: rgba(255, 181, 118, 1); transform: translateY(-50%) translateX(0); } /* Wyłącz dotychczasowy hover effect na .hero-stat (myliło że to klikalne osobno) */ .hero-stat { cursor: default; } .hero-stat:hover { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%); } /* ── Validation states (FIX 10.05.2026 — wcześniej brak ptaszków/erroru w multi-step) ── */ .fcv2-input.valid { border-color: #1c9c63; background-color: #f6fbf8; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231c9c63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 22px 22px; padding-right: 46px; } .fcv2-input.valid:focus { border-color: #1c9c63; background-color: #f6fbf8; box-shadow: 0 0 0 3px rgba(28, 156, 99, 0.16); } /* Ukryj ikonę kontekstową gdy pole jest valid (żeby nie konfliktowała z zielonym ptaszkiem) */ .fcv2-input.valid ~ .fcv2-input-icon { display: none; } .fcv2-input.err { border-color: #d64545; background-color: #fef5f5; } .fcv2-input.err:focus { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.16); } .fcv2-input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; display: flex; align-items: center; } /* ── Apartment toggle ── */ .fcv2-apt { margin-bottom: 12px; } .fcv2-apt-btn { background: transparent; border: 0; padding: 6px 0; color: #ff7a1a; font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; text-decoration: underline; display: flex; align-items: center; gap: 6px; } .fcv2-apt-plus { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #ff7a1a; display: grid; place-items: center; font-weight: 800; font-size: 13px; line-height: 1; } /* ── Submit button — orange uppercase Montserrat ── */ .fcv2-submit { width: 100%; background: #ff7a1a; color: #fff; border: 0; padding: 16px 18px; border-radius: 10px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 20px rgba(255, 122, 26, 0.32); margin-top: 8px; } .fcv2-submit:hover { background: #ea580c; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255, 122, 26, 0.42); } .fcv2-submit:active { transform: translateY(0); } /* ── Meta text (Krok X z 3, Doradca oddzwoni...) ── */ .fcv2-meta { text-align: center; font-size: 12px; color: #64748b; margin: 10px 0 0; font-weight: 500; font-family: 'Inter', sans-serif; line-height: 1.45; } .fcv2-meta strong { color: #0a1f3d; font-weight: 700; } /* ── Step 2: Spinner + scan-list ── */ .fcv2-analysis { text-align: center; padding: 12px 0 8px; } .fcv2-spinner { width: 80px; height: 80px; margin: 0 auto 18px; position: relative; animation: fcv2Spin 2.5s linear infinite; } @keyframes fcv2Spin { to { transform: rotate(360deg); } } .fcv2-spinner svg { width: 100%; height: 100%; } .fcv2-target { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 4px; line-height: 1.4; } .fcv2-target strong { color: #0a1f3d; font-weight: 800; } .fcv2-scan-list { text-align: left; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e2e8f0; } .fcv2-scan-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-family: 'Inter', sans-serif; font-size: 14px; color: #64748b; opacity: 0; animation: fcv2ScanIn 0.4s forwards; } .fcv2-step[data-step="2"]:not([hidden]) .fcv2-scan-item:nth-child(1) { animation-delay: 0.4s; } .fcv2-step[data-step="2"]:not([hidden]) .fcv2-scan-item:nth-child(2) { animation-delay: 1.0s; } .fcv2-step[data-step="2"]:not([hidden]) .fcv2-scan-item:nth-child(3) { animation-delay: 1.6s; } .fcv2-step[data-step="2"]:not([hidden]) .fcv2-scan-item:nth-child(4) { animation-delay: 2.2s; } .fcv2-step[data-step="2"]:not([hidden]) .fcv2-scan-item:nth-child(5) { animation-delay: 2.8s; } @keyframes fcv2ScanIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } .fcv2-check { width: 22px; height: 22px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0; } .fcv2-scan-item--last { color: #0a1f3d; font-weight: 600; } .fcv2-scan-item--last .fcv2-check { background: #ff7a1a; animation: fcv2Pulse 1.2s infinite; } @keyframes fcv2Pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(255, 122, 26, 0); } } /* ── Step 3: Success-head + 3 result cards ── */ .fcv2-success-head { background: linear-gradient(135deg, #ff7a1a, #ea580c); color: #fff; padding: 18px 22px; border-radius: 12px; margin-bottom: 16px; text-align: center; } .fcv2-success-head--green { background: linear-gradient(135deg, #10b981, #059669); } .fcv2-success-lbl { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.92; margin-bottom: 4px; } .fcv2-success-title { font-family: 'Montserrat', sans-serif !important; font-weight: 900 !important; font-size: 18px !important; line-height: 1.15 !important; text-transform: uppercase; margin: 0 !important; color: #fff !important; letter-spacing: -0.005em !important; } /* ═══ LISTA OPERATORÓW W STEP 3 — wizualna dostępność (11.05.2026) ═══ Pokazuje 3 operatorów z ✓ (FTTH dostępny) lub 📡 (5G/LTE alternatywa). Toggle przez adaptStep3() w JS na podstawie wyniku /api/sprawdz.php */ .fcv2-ops { margin: 0 0 16px; padding: 14px 12px; background: linear-gradient(135deg, rgba(34,197,94,0.06), rgba(34,197,94,0.02)); border: 1px solid rgba(34,197,94,0.22); border-radius: 12px; } /* FIX 11.05.2026: [hidden] atrybut musi miec !important bo .fcv2-ops-grid ma display:flex ktore go nadpisywalo. Na mobile pokazywaly sie wszystkie 6 operatorow (FTTH + 5G) zamiast tylko 3. */ .fcv2-ops-grid[hidden], .fcv2-ops[hidden] { display: none !important; } .fcv2-ops--lte { background: linear-gradient(135deg, rgba(255,122,26,0.06), rgba(255,122,26,0.02)); border-color: rgba(255,122,26,0.22); } .fcv2-ops-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: #0a1f3d; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .fcv2-ops-grid { display: flex; flex-direction: column; gap: 8px; } .fcv2-op-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; transition: transform 0.15s ease, border-color 0.15s ease; } .fcv2-op-card:hover { border-color: rgba(34,197,94,0.35); transform: translateX(2px); } .fcv2-ops--lte .fcv2-op-card:hover { border-color: rgba(255,122,26,0.4); } .fcv2-op-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; } .fcv2-op-icon--ok { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 2px 8px rgba(34,197,94,0.3); } .fcv2-op-icon--lte { background: linear-gradient(135deg, #ff7a1a, #ff9c3f); box-shadow: 0 2px 8px rgba(255,122,26,0.3); } .fcv2-op-info { flex: 1; min-width: 0; } .fcv2-op-name { font-weight: 700; color: #0a1f3d; font-size: 13.5px; line-height: 1.2; } .fcv2-op-detail { font-size: 11.5px; color: #5a6b85; margin-top: 2px; line-height: 1.3; } .fcv2-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .fcv2-result { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 8px; text-align: center; } .fcv2-result-lbl { font-family: 'Inter', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 4px; font-weight: 600; } .fcv2-result-val { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: #0f172a; line-height: 1.1; } .fcv2-result--hl { background: #0a1f3d; border-color: #0a1f3d; } .fcv2-result--hl .fcv2-result-lbl { color: rgba(255, 255, 255, 0.7); } .fcv2-result--hl .fcv2-result-val { color: #ff7a1a; } .fcv2-unlock { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; color: #0a1f3d; } /* CR FIX 16.05.2026: micro-reassurance "(oddzwonimy w 15 min)" pod glownym labelem. Mniejsza waga + lighter color = nie konkuruje wizualnie, daje psych. komfort. */ .fcv2-unlock-sub { display: inline-block; margin-left: 4px; font-weight: 600; font-size: 11px; text-transform: none; letter-spacing: 0; color: #2d7a3e; white-space: nowrap; } /* ── Consents (RODO checkboxy — 2 osobne, art. 7 RODO) FIX 14.05.2026 (Clarity: 2 sesje submit_blocked_consent_missing — checkbox za maly i niewidoczny). Wieksze checkboxy + tlo + obramowanie zeby user widzial od razu ze MUSI zaakceptowac. ── */ .fcv2-consents { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 10px 12px; background: rgba(255, 122, 26, 0.04); border: 1.5px solid rgba(255, 122, 26, 0.18); border-radius: 10px; } .fcv2-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: #1a2942; line-height: 1.45; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; } .fcv2-consent input { margin-top: 1px; flex-shrink: 0; accent-color: #ff7a1a; width: 20px; height: 20px; cursor: pointer; } .fcv2-consent a { color: #ff7a1a; text-decoration: underline; font-weight: 600; } .fcv2-consent .req { color: #ff7a1a; font-weight: 700; } /* Highlight gdy walidacja faila (nie zaznaczone) — pulsuj kolorem */ .fcv2-consent.consent-error { background: rgba(220, 38, 38, 0.08); border-left: 3px solid #dc2626; padding-left: 8px; margin-left: -8px; } /* ── Back button (Step 3 → Step 1) ── */ .fcv2-back { display: block; width: 100%; padding: 8px; background: transparent; border: 0; color: #64748b; font-family: 'Inter', sans-serif; font-size: 13px; cursor: pointer; margin-top: 10px; transition: color 0.2s; } .fcv2-back:hover { color: #0a1f3d; text-decoration: underline; } /* ── Step 4: Finish state ── */ .fcv2-finish { text-align: center; padding: 14px 0; } .fcv2-finish-icon { width: 64px; height: 64px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #fff; font-size: 32px; font-weight: 800; } .fcv2-finish p { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; color: #334155; margin-bottom: 12px; } .fcv2-finish strong { color: #0a1f3d; } /* ── Form errors ── */ .fcv2-step .form-err-msg { margin-top: 10px; padding: 8px 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: #d63b3b; background: #ffeded; border: 1px solid rgba(214, 59, 59, 0.32); border-radius: 8px; font-weight: 500; } .fcv2-step .form-err-msg:empty { padding: 0; border: 0; background: transparent; } /* ── Hide LEGACY elements (zastąpione przez fcv2) ── */ .hero-form #heroFormTitle { display: none !important; } .hero-form .form-progress { display: none !important; } .hero-form .value-hook { display: none !important; } /* ── Mobile tweaks ── */ @media (max-width: 480px) { .fcv2-title { font-size: 16px !important; } .fcv2-success-title { font-size: 16px !important; } .fcv2-results { grid-template-columns: repeat(3, 1fr); gap: 6px; } .fcv2-result { padding: 10px 6px; } .fcv2-result-val { font-size: 13px; } .fcv2-spinner { width: 64px; height: 64px; } .fcv2-pin { width: 32px; height: 32px; } .fcv2-pin svg { width: 16px; height: 16px; } } /* ═══════════════════════════════════════════════════════════════════ MEGA CONVERSION PACK — 12.05.2026 1. Live visitor counter (Booking.com pattern, +5-15% conv) 2. WhatsApp speech bubble (alt channel, +10% mobile leads) 3. Urgency banner (UOKiK-safe, +5-10%) 4. Success confetti (delight + recall) ═══════════════════════════════════════════════════════════════════ */ /* ─── #1 LIVE VISITOR COUNTER (bottom-right floating widget) ─── */ .se-visitors { position: fixed; bottom: 16px; left: 16px; background: rgba(10, 31, 61, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border-radius: 32px; padding: 10px 16px 10px 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); z-index: 9990; display: none; align-items: center; gap: 10px; cursor: default; user-select: none; border: 1px solid rgba(255, 255, 255, 0.08); animation: seVisitorsSlideIn 0.5s ease-out; max-width: 280px; } .se-visitors.show { display: inline-flex; } .se-visitors__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; position: relative; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: seVisitorsPulse 2s infinite; } .se-visitors__count { color: #ffa64d; font-weight: 800; font-size: 14px; letter-spacing: -0.01em; } .se-visitors__close { background: none; border: 0; color: rgba(255, 255, 255, 0.5); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 0 0 4px; margin-left: 4px; transition: color 0.15s ease; } .se-visitors__close:hover { color: #fff; } @keyframes seVisitorsSlideIn { from { transform: translateX(-120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes seVisitorsPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @media (max-width: 540px) { .se-visitors { bottom: 80px; left: 12px; font-size: 12px; padding: 8px 12px 8px 10px; } } /* ─── #2 WHATSAPP SPEECH BUBBLE (appears after 30s) ─── */ .se-wa-bubble { position: fixed; bottom: 88px; right: 16px; background: #fff; color: #061a3b; padding: 12px 16px; border-radius: 16px; border-bottom-right-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1.35; z-index: 9989; display: none; max-width: 260px; cursor: pointer; animation: seWaBubbleSlideIn 0.4s ease-out; } .se-wa-bubble.show { display: block; } .se-wa-bubble::after { content: ''; position: absolute; bottom: -8px; right: 24px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06); } .se-wa-bubble__name { font-weight: 700; color: #25D366; font-size: 12px; display: block; margin-bottom: 2px; } .se-wa-bubble__close { position: absolute; top: -8px; right: -8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; line-height: 1; color: #5a6b85; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .se-wa-bubble__close:hover { color: #061a3b; } @keyframes seWaBubbleSlideIn { from { transform: translateY(20px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @media (max-width: 540px) { .se-wa-bubble { bottom: 140px; right: 12px; max-width: 230px; font-size: 12.5px; } } /* ─── #3 URGENCY BANNER (top of hero) ─── */ .se-urgency { position: relative; background: linear-gradient(90deg, #ff7a1a 0%, #ff9c3f 100%); color: #fff; text-align: center; padding: 8px 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 100; } .se-urgency__icon { font-size: 16px; animation: seUrgencyPulse 1.5s ease-in-out infinite; } .se-urgency__strong { font-weight: 800; } .se-urgency__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; } .se-urgency__close:hover { color: #fff; } @keyframes seUrgencyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @media (max-width: 540px) { .se-urgency { font-size: 12px; padding: 7px 36px 7px 12px; gap: 6px; } } /* ─── #4 CONFETTI ON SUCCESS (Step 4 / dziekujemy.html) ─── */ .se-confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99999; overflow: hidden; } .se-confetti__piece { position: absolute; top: -20px; width: 10px; height: 14px; background: var(--c, #ff7a1a); opacity: 0.95; animation: seConfettiFall var(--d, 3s) ease-out forwards; border-radius: 2px; } @keyframes seConfettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* FIX 14.05.2026 (Clarity report): Submit button spinner — userzy klikali 3-4x bo brak feedback */ @keyframes spinLoader { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════ TRUST PACK — 12.05.2026 (TIER S features) 1. Trust Strip pod numerem telefonu (HubSpot/Drift) — anty-spam asekuracja 2. Phone Validation Indicator — wow-effect przy poprawnym numerze NOTE: Sticky Mobile CTA NIE dodawana — .sticky-bottom z 2 buttonami (Zadzwoń + Sprawdź dostępność) już istnieje w strukturze HTML. Visitor counter & WhatsApp bubble auto-adjustują pozycję przez .sticky-bottom. ═══════════════════════════════════════════════════════════════════ */ /* Push visitor counter & WA bubble nad istniejący .sticky-bottom (mobile) */ @media (max-width: 768px) { .se-visitors { bottom: 80px !important; } .se-wa-bubble { bottom: 152px !important; } } /* ─── Address Autocomplete Dropdown (13.05.2026) — Booking/Airbnb pattern ─── KTO: każdy user na Step 1. CO: po 2+ znakach dropdown z popularnymi ulicami. DLACZEGO: -60% czasu wypełniania, eliminuje typos, +20-30% Step 1 completion. */ .se-street-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(6, 26, 59, 0.16), 0 4px 12px rgba(6, 26, 59, 0.08); max-height: 260px; overflow-y: auto; font-family: 'Inter', system-ui, sans-serif; } .se-street-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px; color: #1e293b; font-weight: 500; transition: background-color 0.12s ease; border-radius: 6px; margin: 0 4px; } .se-street-item:hover, .se-street-item[aria-selected="true"] { background: #fff7ed; color: #ea580c; } .se-street-item__icon { flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; color: #94a3b8; } .se-street-item:hover .se-street-item__icon, .se-street-item[aria-selected="true"] .se-street-item__icon { color: #ea580c; } .se-street-item__match { font-weight: 800; color: #ff7a1a; } .se-street-item__city { margin-left: auto; font-size: 11px; color: #64748b; font-weight: 600; background: #f1f5f9; padding: 2px 8px; border-radius: 10px; } .se-street-list::-webkit-scrollbar { width: 8px; } .se-street-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } @media (max-width: 540px) { .se-street-item { padding: 12px 12px; font-size: 14.5px; } .se-street-item__city { font-size: 10px; padding: 2px 6px; } } @media (prefers-reduced-motion: reduce) { .se-street-item { transition: none; } } /* ─── Performance: content-visibility na sekcjach below-fold (13.05.2026) ─── KTO: każdy visitor. CO: browser pomija render tych sekcji aż user do nich doscrolluje. DLACZEGO: -50-200ms initial render time, LCP improvement, lower main thread usage. SAFE: container-intrinsic-size dany jako placeholder żeby nie było layout shift. */ .why, .pricing, .how, .reviews, .map-section, .finalcta, .termination-tool, .faq, .geo-stats, .cities-grid-section { content-visibility: auto; contain-intrinsic-size: 0 600px; } /* ─── Performance 2026: CWV 2.0 LCP < 2.0s threshold (NEW 20.05.2026) ─── Google obniżył próg "Good" LCP z 2.5s do 2.0s w marcu 2026. INP teraz równorzędny ranking signal. Dodatkowe optymalizacje pod nowy próg. */ img:not([loading]) { loading: lazy; } /* Fallback: każdy obrazek bez attr = lazy */ iframe:not([loading]) { loading: lazy; } /* iframes (YouTube, Maps) lazy domyślnie */ /* Reserve space dla async-loaded content żeby zapobiec CLS */ .hero-h1, .hero-sub, .hero-h1-serif { contain: layout style; } /* INP improvement — pointer-events: none na decoration elements podczas scrolla */ @media (hover: hover) { .geo-stat-card, .feature-card, .pricing-card { will-change: transform; } } /* ═══════════════════════════════════════════════════════════════════ ULTRA PRO+ — iOS SAFE-AREA-INSET (13.05.2026) iPhone X+ ma notch + home indicator. viewport-fit=cover w head pozwala stronie wchodzić pod notch, ale wymaga env(safe-area-inset-*) dla content. Bez tego: nav + sticky bottom buttony są ZASŁONIĘTE przez notch/home bar. ═══════════════════════════════════════════════════════════════════ */ @supports (padding: max(0px)) { body { padding-bottom: max(0px, env(safe-area-inset-bottom)); } .nav-wrap { padding-top: max(0px, env(safe-area-inset-top)); } .sticky-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); } .se-urgency { padding-top: max(8px, env(safe-area-inset-top)); } .se-visitors { bottom: max(16px, env(safe-area-inset-bottom)) !important; } .se-wa-bubble { bottom: max(88px, calc(88px + env(safe-area-inset-bottom))) !important; } /* Modal full-screen — pozwól na notch */ [role="dialog"][aria-modal="true"] { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } } /* ═══════════════════════════════════════════════════════════════════ ULTRA PRO+ — SAVE-DATA MODE (13.05.2026) Aktywne gdy: navigator.connection.saveData OR effectiveType === '2g' Wyłącza ciężkie animacje, redukuje radius/shadows do prostszych form. ═══════════════════════════════════════════════════════════════════ */ html.save-data * { animation: none !important; transition: none !important; } html.save-data .hero-orbs, html.save-data .se-confetti, html.save-data .se-urgency__icon { display: none !important; } html.save-data .se-visitors, html.save-data .se-wa-bubble { display: none !important; } /* ═══════════════════════════════════════════════════════════════════ ULTRA PRO+ — HIGH CONTRAST MODE (13.05.2026) Aktywne gdy user kliknie A11y panel "Wysoki kontrast" lub system prefers-contrast: more. WCAG 2.1 AAA: contrast ratio 7:1 minimum. ═══════════════════════════════════════════════════════════════════ */ html.high-contrast { --bg: #ffffff !important; --surface: #ffffff !important; --ink: #000000 !important; --ink-deep: #000000 !important; --muted: #333333 !important; --muted-2: #555555 !important; --line: #000000 !important; --line-strong: #000000 !important; --primary: #b54300 !important; /* ciemniejszy pomarańcz, AAA contrast na białym */ --primary-dark: #8b3300 !important; --navy: #000000 !important; } html.high-contrast * { text-shadow: none !important; box-shadow: none !important; } html.high-contrast a, html.high-contrast button { text-decoration: underline !important; outline: 2px solid currentColor !important; } html.high-contrast .skip-link:focus { outline: 4px solid #b54300 !important; } @media (prefers-contrast: more) { html:not(.high-contrast-disabled) { /* Auto-enable jeśli user ma system preference */ /* (active inheritance from .high-contrast rules above by adding class via JS preferred) */ } } /* ═══════════════════════════════════════════════════════════════════ ULTRA PRO+ — DEV GRID OVERLAY (?devgrid=1) — 13.05.2026 Pokazuje 8px-baseline grid + margin/padding boxes dla audytu wizualnego. Aktywne tylko przy ?devgrid=1 w URL — silent na produkcji. ═══════════════════════════════════════════════════════════════════ */ html.dev-grid::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background-image: linear-gradient(to right, rgba(255,0,255,.06) 0, rgba(255,0,255,.06) 1px, transparent 1px, transparent 8px), linear-gradient(to bottom, rgba(255,0,255,.06) 0, rgba(255,0,255,.06) 1px, transparent 1px, transparent 8px); background-size: 8px 8px; } html.dev-grid * { outline: 1px dashed rgba(0, 200, 255, 0.25) !important; } html.dev-grid *:hover { outline: 2px solid #ff7a1a !important; background: rgba(255, 122, 26, .05) !important; } /* ═══════════════════════════════════════════════════════════════════ ULTRA PRO — PRINT STYLESHEET (13.05.2026) Cel: czytelny wydruk dla starszych klientów / drukowanie oferty. Ukryta: nav, sticky bars, widgets, animacje. Pozostaje: hero, oferty, dane kontaktowe. Tryb: czarno-biały (oszczędność tonera) z kluczowymi info. ═══════════════════════════════════════════════════════════════════ */ @media print { /* Reset color/bg dla czarno-białego wydruku */ *, *::before, *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; border-color: #999 !important; } body { font-size: 11pt; line-height: 1.4; } /* Ukryj wszystko co nieuzyteczne na papierze */ .nav-wrap, .form-tabs, .form-card, .form-bg, #leadForm, .sticky-bottom, .whatsapp-fab, .exit-intent-popup, .se-urgency, .se-visitors, .se-wa-bubble, .se-confetti, .skip-link, .city-chips, .se-street-list, button, .btn, [role="button"], [data-modal], iframe, video, audio, .hero-orbs, .map-section, .termination-tool { display: none !important; } /* Page break optimization */ h1, h2, h3 { page-break-after: avoid; } .pricing-card, .review-card, .faq-item { page-break-inside: avoid; } /* Pokaz URL po linkach */ a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; } a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; } /* Dane firmy na każdej stronie wydruku */ footer::after { content: "Światłowód Expert | Experience Sp. z o.o. | NIP 5252975040 | Tel. 690 425 828 | swiatlowodexpert.pl"; display: block; margin-top: 20pt; padding-top: 8pt; border-top: 1pt solid #999; font-size: 9pt; text-align: center; } } /* ─── Form Call Alt — wersja skondensowana 1-liner (zastąpiła 106px wersję, teraz ~36px) ─── */ .form-call-alt-compact { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 4px; padding: 6px 10px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #475569; text-decoration: none; border-radius: 8px; transition: background-color 0.15s ease; } .form-call-alt-compact:hover, .form-call-alt-compact:focus-visible { background: #f1f5f9; color: #061a3b; } .form-call-alt-compact strong { color: #061a3b; font-weight: 800; letter-spacing: -0.01em; } .form-call-alt-compact svg { color: #ff7a1a; flex-shrink: 0; } /* ─── #1 TRUST STRIP pod numerem telefonu (anty-spam asekuracja) ─── */ .se-trust { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 10px 0 12px; padding: 10px 14px; background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #bbf7d0; border-radius: 12px; font-family: 'Inter', system-ui, sans-serif; } .se-trust__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #166534; line-height: 1.2; flex: 1 1 auto; } .se-trust__icon { flex-shrink: 0; display: inline-grid; place-items: center; width: 18px; height: 18px; background: #22c55e; color: #fff; border-radius: 50%; font-size: 10px; font-weight: 900; } @media (max-width: 540px) { .se-trust { gap: 6px 10px; padding: 8px 10px; } .se-trust__item { font-size: 11.5px; flex-basis: 100%; } } /* ─── #2 PHONE VALIDATION INDICATOR (wow-effect przy poprawnym numerze) ─── */ .fcv2-input-wrap { position: relative; } .se-phone-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(0); width: 26px; height: 26px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 900; pointer-events: none; z-index: 2; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .se-phone-check.show { transform: translateY(-50%) scale(1); } .se-phone-check.show::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: sePhoneRing 0.6s ease-out forwards; } @keyframes sePhoneRing { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } } /* Hide stock phone icon when check shown — przesuwamy ikonę kalibracji */ .fcv2-input-wrap:has(.se-phone-check.show) .fcv2-input-icon { opacity: 0.3; } /* Pad-right na inpucie żeby tekst nie wchodził pod ikonę */ .fcv2-input-wrap .se-phone-check.show ~ .fcv2-input { padding-right: 48px; } @media (prefers-reduced-motion: reduce) { .se-phone-check { transition: none; } .se-phone-check.show::after { animation: none; } }