/* landing.css v2 — design system landingów spójny z portalem klient.webup.pl (Inter, niebieskawy #F1F5FB i granat #1E3A5F jak na jowes.webup.pl, akcent pomarańczowy #F97316, promienie 6/10/14/18, miękkie cienie). Per-landing akcent pomocniczy: klasa theme-* na ustawia --lp (kolor ikon/badge/mockupów); CTA zawsze pomarańczowe jak w portalu. */ :root { /* paleta zbliżona do jowes.webup.pl: chłodniejsze, bardziej niebieskie tło i granatowe nagłówki */ --bg: #F1F5FB; --surface: #FFFFFF; --border: #DCE4EF; --border-soft: #E9EFF7; --border-strong: #C3D0E2; /* Kolory marki wprost z logo (webup-logo.svg): pomarańcz #FF6F00, granat #27495B. Wcześniej stały tu przybliżenia z Tailwinda (#F97316/#1E3A5F) i logo nie zgadzało się z resztą strony. --accent-fg to przyciemniony wariant do TEKSTU — czysty #FF6F00 na bieli ma kontrast ok. 2,9:1, czyli poniżej progu WCAG AA dla treści. */ --navy: #27495B; --fg: #0F172A; --fg-secondary: #475569; --fg-muted: #94A3B8; --accent: #FF6F00; --accent-hover: #E56400; --accent-light: #FF8A00; /* jasniejszy pomarancz — stan hover, patrz .btn-primary:hover */ --accent-soft: #FFF4EA; --accent-fg: #FF6F00; --green: #16A34A; --green-soft: #F0FDF4; --red: #DC2626; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --shadow-sm: 0 1px 2px rgba(15,23,42,.04); --shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04); --shadow-lg: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04); --lp: #FF6F00; --lp-soft: #FFF4EA; /* akcent landingu (nadpisywany przez theme-*) */ } body.theme-workspace { --lp:#1A73E8; --lp-soft:#EFF6FF; } body.theme-cookie { --lp:#D97706; --lp-soft:#FFFBEB; } body.theme-hosting { --lp:#059669; --lp-soft:#ECFDF5; } body.theme-strona { --lp:#7C3AED; --lp-soft:#F5F3FF; } body.theme-adgrants { --lp:#1A73E8; --lp-soft:#EFF6FF; } body.theme-ping { --lp:#DC2626; --lp-soft:#FEF2F2; } body.theme-domeny { --lp:#0891B2; --lp-soft:#ECFEFF; } /* rachunek za odnowienie domeny (domeny) */ .mock-bill { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .mbill-head { padding:13px 16px; background:var(--bg); border-bottom:1px solid var(--border); font-size:.85rem; font-weight:700; color:var(--fg); } .mbill-head span { display:block; font-size:.72rem; font-weight:500; color:var(--fg-muted); } .mbill-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-soft); font-size:.86rem; color:var(--fg-secondary); } .mbill-row .who { display:flex; align-items:center; gap:9px; } .mbill-row .who i { width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:inline-block; } .mbill-row del { color:var(--fg-muted); } /* wiersz „tu płacicie dziś" — to on ma boleć, więc jest wyróżniony na czerwono */ .mbill-row.you { background:#FEF2F2; border-left:3px solid var(--red); padding-left:13px; } .mbill-row.you .who { color:var(--fg); font-weight:600; } .mbill-row.you .who i { background:var(--red); } .mbill-row.you del { color:var(--red); font-size:1.05rem; font-weight:700; text-decoration-thickness:2px; } .mbill-row.you .mbill-guess { color:var(--red); font-weight:600; font-size:.82rem; } .you-tag { display:inline-block; margin-left:8px; background:var(--red); color:#fff; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; vertical-align:middle; } /* nasz wiersz — kontra do powyższego */ .mbill-row.we { background:color-mix(in srgb, var(--green) 8%, #fff); border-left:3px solid var(--green); padding-left:13px; } .mbill-row.we .who { color:var(--fg); } .mbill-row.we .who i { background:var(--green); } .mbill-row.we b { color:var(--green); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; } /* Podsumowanie: bohaterem jest OSZCZĘDNOŚĆ, nie nasza cena. */ .mbill-save { padding:20px 18px; background:var(--green-soft); text-align:center; border-top:1px solid color-mix(in srgb, var(--green) 25%, transparent); } .mbill-save .sv-cap { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--green); } .mbill-save .sv-big { font-size:2.4rem; font-weight:800; color:var(--green); letter-spacing:-.03em; line-height:1.05; margin:4px 0 6px; font-variant-numeric:tabular-nums; } .mbill-save .sv-big small { display:block; font-size:.8rem; font-weight:600; color:var(--fg-secondary); letter-spacing:0; margin-top:2px; } .mbill-save .sv-sub { font-size:.84rem; color:var(--fg-secondary); line-height:1.5; } .mbill-save .sv-sub b { color:var(--green); font-weight:700; } .mbill-save .sv-host { margin-top:12px; padding-top:11px; border-top:1px dashed color-mix(in srgb, var(--green) 30%, transparent); font-size:.82rem; color:var(--fg-secondary); line-height:1.5; } .mbill-save .sv-host b { color:var(--fg); font-weight:700; } .mbill-save .sv-host i { display:block; margin-top:4px; font-style:normal; font-size:.74rem; color:var(--fg-muted); } /* domena klienta jako tytuł strony (personalizacja z linku ?d=) */ .hero h1 .h1-kicker { display:block; font-size:.86rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--green); margin-bottom:8px; } /* stary wariant (pigułka) — zostaje dla makiety przed sprawdzeniem domeny */ .mbill-save > span { display:block; color:var(--fg-secondary); font-size:.9rem; line-height:1.5; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; } img { max-width:100%; } a { color:var(--accent-fg); } /* ── NAV ── */ /* Pasek przezroczysty: tło strony ma pod niego wchodzić. Po przewinięciu dokładamy lekkie rozmycie, żeby linki nie zlewały się z treścią. */ nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:transparent; border-bottom:1px solid transparent; transition:background .2s, border-color .2s, backdrop-filter .2s; } nav.stuck { background:rgba(255,255,255,.82); backdrop-filter:blur(10px); border-bottom-color:var(--border-soft); } .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; } .nav-logo img { height:30px; display:block; } /* Hamburger istnieje tylko na telefonie — reguły otwierania siedzą w media query na dole. */ .nav-toggle { display:none; } .nav-burger { display:none; } .nav-right { display:flex; align-items:center; gap:18px; } .nav-link { color:var(--fg-secondary); text-decoration:none; font-size:.9rem; font-weight:500; } .nav-link:hover { color:var(--fg); } .nav-cta { display:inline-flex; align-items:center; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; padding:9px 18px; border-radius:var(--r); transition:.15s; white-space:nowrap; box-shadow:var(--shadow-sm); } .nav-cta:hover { background:var(--accent-light); box-shadow:0 6px 18px rgba(255,111,0,.4); } @media (max-width:560px){ .nav-link{display:none} } /* ── HERO (jasne, 2 kolumny: copy + mockup) ── */ /* Hero landingu ma to samo ruchome tło co strona główna (warstwa .wu-bg wstrzykiwana przez wu_bg_html). Płaski gradient zostaje jako podkład pod plamami i jako wygląd awaryjny, gdy ktoś ma wyłączone animacje. `overflow:hidden` przycina plamy do sekcji. */ /* Hero landingu wchodzi POD pasek nawigacji — dokładnie tak jak .wu-hero na stronie głównej. Bez tego pasek stał na jasnym pasie tła strony i białe pozycje menu były na nim nieczytelne, mimo że hero niżej ma już ciemną plamę pod menu. */ .hero { position:relative; overflow:hidden; padding:96px 24px 88px; background:#fff; } /* Ta sama biała powłoka co na stronie głównej — bez niej plamy biją w tekst. */ .hero::before { content:""; position:absolute; inset:0; z-index:1; background:rgba(255,255,255,.34); } /* Treść hero musi być NAD warstwą tła — .wu-bg ma z-index 0. */ .hero > .hero-inner, .hero > .section-inner { position:relative; z-index:2; } /* Plamy na pełnej mocy — dokładnie jak na stronie głównej. Przygaszenie do .55 sprawiało, że górna część landingu wyglądała jak inny serwis. */ .hero > .wu-bg { opacity:1; } @media (min-width:761px){ .hero { margin-top:-73px; padding-top:calc(96px + 73px); } } @media (max-width:760px){ .hero { margin-top:-59px; padding-top:calc(44px + 59px); padding-bottom:46px; } } @media (max-width:760px){ /* Makieta produktu (zrzut wyszukiwarki, raport PING) na telefonie zajmowala pol ekranu i byla nieczytelna — na tej szerokosci liczy sie naglowek, zdanie i przycisk. */ .hero-visual, .mock-note { display:none; } .hero { padding-bottom:40px; } .hero-stats { gap:14px; margin-top:18px; } .hero-stat .big { font-size:1.5rem; } .hero h1 { font-size:1.9rem; line-height:1.2; } .hero-sub { font-size:1rem; } } /* Plama kotwicząca pod menu musi być na landingu MOCNIEJSZA niż reszta tła — welon .55 rozjaśnia wszystko, a ona jedyna odpowiada za czytelność białych napisów. */ .hero-inner { max-width:1080px; margin:0 auto; } .hero-grid2 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; } .hero-grid2.rev > .hero-copy { order:2; } .hero-grid2.rev > .hero-visual { order:1; } @media (max-width:900px){ .hero-grid2, .hero-grid2.rev { grid-template-columns:1fr; gap:36px; } .hero-grid2.rev > .hero-copy { order:1; } .hero-grid2.rev > .hero-visual { order:2; } } .hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--lp-soft); color:var(--lp); border:1px solid color-mix(in srgb, var(--lp) 25%, transparent); padding:5px 14px; border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.01em; margin-bottom:20px; } /* Ta sama skala co .wu-hero h1 — 3rem kontra 3.4rem dawalo widoczna roznice. */ .hero h1 { font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:300; line-height:1.14; letter-spacing:-.025em; color:var(--navy); } .hero h1 strong, .hero h1 b { font-weight:600; } .hero h1 em { font-style:normal; font-weight:600; color:var(--accent); } .hero-sub { margin-top:16px; font-size:clamp(1rem,1.8vw,1.13rem); color:var(--fg-secondary); max-width:600px; } .hero-ctas { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:1rem; padding:13px 26px; border-radius:var(--r); border:none; cursor:pointer; transition:box-shadow .18s, transform .18s; box-shadow:0 4px 14px rgba(255,111,0,.26); } /* Hover ROZJASNIA pomarancz zamiast go przyciemniac (decyzja Oskara 09.08). Sciemnianie czytalo sie jak stan wcisniecia, czyli odwrotnie do tego, co hover ma komunikowac; jasniejszy odcien plus 2 px w gore daje wrazenie podswietlenia. Kliknieciu zostawiamy ciemniejszy odcien — TAM przyciemnienie jest na miejscu. */ .btn-primary:hover { background:var(--accent-light); box-shadow:0 6px 20px rgba(255,111,0,.42); } .btn-primary:active { background:var(--accent-hover); box-shadow:0 3px 10px rgba(255,111,0,.32); } .btn-ghost { display:inline-flex; align-items:center; gap:7px; padding:13px 28px; border:1.5px solid var(--navy); border-radius:999px; background:transparent; color:var(--navy); font-weight:600; font-size:.95rem; text-decoration:none; transition:.16s; } .btn-ghost:hover { background:var(--navy); border-color:var(--navy); color:#fff; } .hero-stats { display:flex; gap:32px; margin-top:36px; flex-wrap:wrap; } .hero-stat .big { display:block; font-size:1.45rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; } .hero-stat .small { font-size:.82rem; color:var(--fg-muted); } /* ── SEKCJE ── */ section { padding:60px 24px; } /* Poniżej 1120 px kolumna dotykałaby krawędzi ekranu — na telefonie tekst zaczynał się dosłownie w pikselu 0. Powyżej tej szerokości margines robi się sam z max-width, więc desktopu to nie rusza. */ .section-inner { max-width:1080px; margin:0 auto; } @media (max-width:1119px){ .section-inner { padding-inline:20px; } } .section-tag { display:inline-block; color:var(--accent-fg); background:var(--accent-soft); padding:4px 12px; border-radius:999px; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; } h2 { font-size:clamp(1.45rem,3.2vw,2.05rem); font-weight:800; line-height:1.22; letter-spacing:-.02em; color:var(--navy); } .section-sub { margin-top:10px; color:var(--fg-secondary); font-size:1.02rem; max-width:640px; } .alt { background:var(--surface); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); } /* karty korzyści */ .benefit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:16px; margin-top:32px; } .benefit-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); } .benefit-card .icon { width:42px; height:42px; border-radius:var(--r); background:var(--lp-soft); color:var(--lp); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:13px; } .benefit-card h3 { font-size:1rem; font-weight:700; color:var(--fg); margin-bottom:5px; } .benefit-card p { font-size:.92rem; color:var(--fg-secondary); } /* kroki */ /* Kroki w stylu jowes.webup.pl: zespolone kafle (2px szczeliny) z dużym „duchem" numeru. Tło kafla jest przeciwne do tła sekcji, żeby działało i na jasnej, i na niebieskiej. */ .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:2px; margin-top:38px; } .step { background:var(--surface); border:none; border-radius:0; padding:32px 26px; box-shadow:none; } .step:first-child { border-radius:var(--r-lg) 0 0 var(--r-lg); } .step:last-child { border-radius:0 var(--r-lg) var(--r-lg) 0; } .alt .step { background:var(--bg); } .step-no { display:block; width:auto; height:auto; background:none; border-radius:0; color:var(--border-strong); font-size:3.1rem; font-weight:800; line-height:1; letter-spacing:-.04em; margin-bottom:14px; font-variant-numeric:tabular-nums; } .step-no::before { content:"0"; } /* 1 → 01, jak na jowes (kroków nigdy nie ma 10+) */ .step h3 { font-size:1.02rem; font-weight:700; color:var(--navy); margin-bottom:6px; } @media (max-width:640px){ .steps { grid-template-columns:1fr; } .step:first-child { border-radius:var(--r-lg) var(--r-lg) 0 0; } .step:last-child { border-radius:0 0 var(--r-lg) var(--r-lg); } } .step p { font-size:.9rem; color:var(--fg-secondary); } .step .badge-our { display:inline-block; margin-top:10px; background:var(--green-soft); color:var(--green); font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:999px; } /* ── CENNIK ── */ .pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:20px; margin-top:38px; align-items:stretch; } .price-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow); } .price-card.featured { border:2px solid var(--accent); box-shadow:0 12px 34px rgba(249,115,22,.13); } .price-flag { position:absolute; top:-13px; left:24px; background:var(--accent); color:#fff; font-size:.76rem; font-weight:700; padding:4px 13px; border-radius:999px; box-shadow:var(--shadow-sm); } .price-name { font-size:1.12rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; } .price-for { color:var(--fg-muted); font-size:.88rem; margin-top:2px; } .price-line { margin-top:16px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; } .price-num { font-size:2.2rem; font-weight:800; color:var(--fg); letter-spacing:-.03em; } .price-per { color:var(--fg-muted); font-size:.92rem; } .price-setup { margin-top:2px; color:var(--fg-secondary); font-size:.88rem; } .price-setup strong { color:var(--fg); } .price-feats { list-style:none; margin:18px 0 24px; flex:1; } .price-feats li { padding:6px 0 6px 28px; position:relative; font-size:.93rem; color:var(--fg-secondary); } .price-feats li strong { color:var(--fg); } .price-feats li::before { content:"✓"; position:absolute; left:2px; color:var(--green); font-weight:800; } .price-feats li.dim::before { content:"＋"; color:var(--accent); } .price-cta { display:flex; align-items:center; justify-content:center; text-align:center; background:var(--fg); color:#fff; text-decoration:none; font-weight:600; padding:13px; border-radius:var(--r); border:none; width:100%; cursor:pointer; font-size:.98rem; transition:.15s; } .price-cta:hover { background:#1E293B; } .price-card.featured .price-cta { background:var(--accent); box-shadow:0 4px 14px rgba(249,115,22,.28); } .price-card.featured .price-cta:hover { background:var(--accent-hover); } .price-note { text-align:center; margin-top:10px; font-size:.82rem; color:var(--fg-muted); } /* cennik wąski (2 warianty) — wyśrodkowany, nie przyklejony do lewej */ .pricing.narrow { max-width:920px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); } /* Zagęszczenie cennika — cała sekcja (nagłówek + przełącznik + karty + rozbicie ceny) ma się mieścić na jednym ekranie laptopa. Ruszamy wyłącznie odstępami i wielkością drobnego tekstu; ceny i CTA zostają w oryginalnym rozmiarze. */ .price-card { padding:18px 22px; } .price-line { margin-top:8px; } .price-setup { font-size:.85rem; } .price-feats { margin:11px 0 13px; } .price-feats li { padding:2px 0 2px 26px; font-size:.88rem; line-height:1.45; } .price-cta { padding:11px; } .price-note { margin-top:7px; font-size:.78rem; line-height:1.4; } .pricing { margin-top:20px; } section#cennik { padding-top:34px; padding-bottom:34px; } section#cennik .section-sub { margin-top:7px; } /* dodatki do zamówienia — klikalne kafle z żywą ceną; bez ramki, tylko delikatna kreska oddzielająca je od listy cech (ramka wokół bloku wyglądała jak wtrącona reklama) */ .price-addons { border:none; background:none; border-top:1px solid var(--border); border-radius:0; padding:13px 0 0; margin:2px 0 14px; } .price-addons .pa-head { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); margin-bottom:6px; } .pa-opt { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:6px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; transition:border-color .15s, box-shadow .15s; } .pa-opt:last-of-type { margin-bottom:0; } .pa-opt:hover { border-color:var(--accent); } .pa-opt input { position:absolute; opacity:0; width:0; height:0; } .pa-box { width:20px; height:20px; flex-shrink:0; margin-top:1px; border:2px solid var(--border-strong); border-radius:6px; display:flex; align-items:center; justify-content:center; transition:.15s; } .pa-box::after { content:"✓"; color:#fff; font-size:.76rem; font-weight:800; opacity:0; transition:.15s; } .pa-opt input:checked ~ .pa-box { background:var(--accent); border-color:var(--accent); } .pa-opt input:checked ~ .pa-box::after { opacity:1; } .pa-opt:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.12); } .pa-opt input:focus-visible ~ .pa-box { box-shadow:0 0 0 3px rgba(249,115,22,.35); } .pa-txt { flex:1; font-size:.83rem; line-height:1.38; } .pa-txt b { display:block; color:var(--fg); font-size:.87rem; } .pa-txt span { color:var(--fg-secondary); } .pa-price { font-weight:800; color:var(--accent-fg); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.9rem; } .pa-foot { margin-top:9px; padding-top:8px; border-top:1px dashed color-mix(in srgb, var(--accent) 34%, transparent); display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:.85rem; color:var(--fg-secondary); } .pa-foot .pa-total { font-weight:800; font-size:1.15rem; color:var(--fg); font-variant-numeric:tabular-nums; } /* wariant „w cenie" (VIP) */ .price-addons.incl .pa-head { color:var(--green); } .price-addons.incl .pa-opt { cursor:default; border-color:color-mix(in srgb, var(--green) 26%, transparent); background:color-mix(in srgb, var(--green) 6%, #fff); } .price-addons.incl .pa-opt:hover { border-color:color-mix(in srgb, var(--green) 26%, transparent); } .price-addons.incl .pa-box { background:var(--green); border-color:var(--green); } .price-addons.incl .pa-box::after { opacity:1; } .price-addons.incl .pa-price { color:var(--green); } .price-addons.incl .pa-foot { border-top-color:color-mix(in srgb, var(--green) 30%, transparent); } /* ── tabelka porównań ── */ .compare { margin-top:32px; overflow-x:auto; } .compare table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); min-width:540px; } .compare th, .compare td { padding:12px 16px; text-align:left; font-size:.92rem; border-bottom:1px solid var(--border-soft); } .compare thead th { background:var(--bg); color:var(--fg-secondary); font-weight:600; font-size:.85rem; border-bottom:1px solid var(--border); } .compare thead th:last-child { color:var(--accent-fg); background:var(--accent-soft); } .compare tbody tr:last-child td { border-bottom:none; } .compare td:last-child { background:color-mix(in srgb, var(--accent-soft) 55%, #fff); } .compare .ok { color:var(--green); font-weight:700; } .compare .no { color:var(--red); font-weight:600; } /* ── FAQ ── */ .faq { max-width:760px; margin:32px auto 0; } .faq details { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); } .faq summary { cursor:pointer; padding:16px 20px; font-weight:600; font-size:.97rem; color:var(--fg); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; font-size:1.25rem; color:var(--accent); font-weight:700; flex-shrink:0; } .faq details[open] summary::after { content:"–"; } .faq .faq-a { padding:0 20px 16px; color:var(--fg-secondary); font-size:.93rem; } /* ── CTA STRIP (ciemny slate jak --fg portalu) ── */ .cta-strip { background:var(--navy); color:#fff; text-align:center; padding:60px 24px; } .cta-strip h2 { color:#fff; } .cta-strip p { color:#CBD5E1; margin-top:10px; } .cta-strip .btn-primary { margin-top:24px; } .cta-strip a { color:#fff; } /* ── MOCKUPY PRODUKTÓW (hero-visual) ── */ .hero-visual { position:relative; min-width:0; } .mock-note { display:table; margin:0 0 8px auto; background:var(--fg); color:#fff; font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:999px; box-shadow:var(--shadow); } /* okno przeglądarki */ .mock-browser { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .mb-top { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--border); } .mb-dots { display:flex; gap:5px; } .mb-dots span { width:10px; height:10px; border-radius:50%; background:var(--border-strong); } .mb-dots span:first-child { background:#FCA5A5; } .mb-dots span:nth-child(2) { background:#FCD34D; } .mb-dots span:nth-child(3) { background:#86EFAC; } .mb-url { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:var(--fg-muted); padding:4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mb-url b { color:var(--fg-secondary); font-weight:600; } .mb-body { position:relative; padding:16px; min-height:230px; } /* szkielet strony w oknie */ .sk { border-radius:6px; background:var(--border-soft); } .sk-line { height:9px; margin-bottom:7px; } .sk-hero { height:64px; border-radius:var(--r); background:linear-gradient(120deg, var(--lp-soft), var(--border-soft)); margin-bottom:12px; } .sk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .sk-card { height:46px; border-radius:8px; background:var(--border-soft); } /* baner SmartCookie w mockupie — replika 1:1 realnego banera (sc.php/sc.css.php web150): biała karta radius 12, Open Sans 300, przyciski pill 20px, primary #ff7b00, powered-by. */ .scd-modal { position:relative; margin:14px 0 0; background:#fff; border:1px solid #e0e0e0; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.12); text-align:left; font-family:'Open Sans','Inter',sans-serif; } .scd-body { padding:10px 12px 4px; font-size:12.5px; font-weight:300; line-height:1.4; color:#000; } .scd-body strong { font-weight:700; } .scd-body a { color:#4f4f4f; text-decoration:underline; } .scd-cats { display:none; padding:2px 12px 0; } .scd-cat { border-top:1px solid #f0f0f0; } .scd-cat-head { display:flex; align-items:center; gap:8px; padding:7px 2px; font-size:12px; color:#000; font-weight:400; cursor:pointer; user-select:none; } .scd-arrow { color:#999; font-size:14px; line-height:1; display:inline-block; transition:transform .15s; } .scd-cat.open .scd-arrow { transform:rotate(90deg); } .scd-cat-body { display:none; padding:0 2px 9px 22px; font-size:11px; font-weight:300; color:#777; line-height:1.5; } .scd-cat.open .scd-cat-body { display:block; } .scd-cat-head .name { flex:1; } .scd-always { font-size:10.5px; color:#999; font-style:italic; } .scd-switch { position:relative; width:30px; height:16px; flex-shrink:0; cursor:pointer; } .scd-switch input { opacity:0; width:0; height:0; } .scd-slider { position:absolute; inset:0; background:#eee; border-radius:999px; transition:.15s; } .scd-slider::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#fff; top:2px; left:2px; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.15s; } .scd-switch input:checked + .scd-slider { background:#ff7b00; } .scd-switch input:checked + .scd-slider::before { transform:translateX(14px); } .scd-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; padding:10px 12px; } .scd-btn { box-sizing:border-box; display:inline-block; padding:6px 14px; font-size:10.5px; font-weight:400; font-family:'Open Sans',Arial,sans-serif; line-height:1.4; border-radius:20px; cursor:pointer; border:1px solid transparent; text-transform:uppercase; white-space:nowrap; background:transparent; transition:.15s; } .scd-btn-sec { color:#ff7b00; border-color:#ff7b00; } .scd-btn-sec:hover { color:#fff; background:#ff7b00; } .scd-btn-pri { color:#fff; background:#ff7b00; box-shadow:0 2px 6px rgba(255,123,0,.2); } .scd-btn-pri:hover { filter:brightness(1.1); } .scd-powered { width:100%; text-align:right; font-size:10px; font-style:italic; color:#aaa; display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:2px; } .scd-powered img { height:11px; opacity:.75; } /* pływający cookie-dot — 1:1 jak w realnym banerze: czarne kółko 40px, biała pigułka 28×16 i czarna kropka 10px po lewej (sc.css.php: #cookie-dot + .sc-slider2 + :before = secondary #000) */ /* ── DEMO SMARTCOOKIE: STALA WYSOKOSC MAKIETY ── Baner rosnie przy „Preferencjach" i rozwijaniu kategorii (zmierzone: 341 → 479 → 538 px, a po akceptacji spada do 230). Makieta zmieniala przez to rozmiar i cala strona skakala. Teraz okno ma staly rozmiar, baner jest przyklejony do dolu jak w prawdziwej witrynie, a lista kategorii przewija sie w srodku, zamiast rozpychac okno. */ .demo-cookie .mb-body { height:448px; } .demo-cookie .scd-modal { position:absolute; left:16px; right:16px; bottom:16px; margin:0; display:flex; flex-direction:column; max-height:calc(100% - 32px); } .demo-cookie .scd-cats { overflow-y:auto; } .demo-cookie .scd-footer { flex-shrink:0; } @media (max-width:1119px){ .demo-cookie .mb-body { height:480px; } } .scd-dot { position:absolute; left:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:#000; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:2; } .scd-dot .mini { width:28px; height:16px; background:#fff; border-radius:24px; display:flex; align-items:center; padding:2px; } .scd-dot .mini::before { content:""; width:10px; height:10px; border-radius:50%; background:#000; } /* pasek sprawdzania domeny (checker ?d=) */ .intel-bar { display:flex; gap:8px; margin-bottom:12px; } .intel-bar input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit; color:var(--fg); background:var(--surface); } .intel-bar input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); } .intel-btn { display:inline-flex; align-items:center; gap:7px; background:var(--fg); color:#fff; border:none; font-family:inherit; font-weight:600; font-size:.92rem; padding:11px 18px; border-radius:var(--r); cursor:pointer; transition:.15s; white-space:nowrap; } .intel-btn:hover { background:#1E293B; } .intel-btn[disabled] { opacity:.6; cursor:wait; } .intel-status { margin:-4px 0 10px; font-size:.83rem; color:var(--fg-secondary); min-height:1.2em; } .intel-status .ok { color:var(--green); font-weight:600; } .intel-status .warn { color:var(--red); font-weight:600; } .intel-result { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px; display:none; } .intel-result h4 { font-size:.92rem; font-weight:700; color:var(--fg); margin-bottom:6px; display:flex; align-items:center; gap:8px; } .intel-result p { font-size:.87rem; color:var(--fg-secondary); } .intel-result .tag { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--lp-soft); color:var(--lp); } .intel-result .tag.bad { background:#FEF2F2; color:var(--red); } .intel-result .tag.good { background:var(--green-soft); color:var(--green); } /* skrzynka Gmail (workspace) */ .mock-inbox { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .mi-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); } .mi-head .dot { width:26px; height:26px; border-radius:50%; background:var(--lp); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; } .mi-head b { font-size:.85rem; color:var(--fg); } .mi-head span { font-size:.75rem; color:var(--fg-muted); } .mi-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border-soft); } .mi-row:last-child { border-bottom:none; } .mi-av { width:30px; height:30px; border-radius:50%; flex-shrink:0; color:#fff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; } .mi-txt { min-width:0; } .mi-txt b { display:block; font-size:.8rem; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mi-txt span { display:block; font-size:.72rem; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mi-apps { display:flex; gap:8px; padding:12px 16px; background:var(--bg); border-top:1px solid var(--border); flex-wrap:wrap; } .mi-app { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--fg-secondary); background:var(--surface); border:1px solid var(--border); padding:5px 10px; border-radius:999px; } .mi-app i { width:8px; height:8px; border-radius:50%; display:inline-block; } /* panel monitoringu (hosting) */ .mock-monitor { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .mm-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--bg); font-size:.83rem; font-weight:700; color:var(--fg); } .mm-live { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--green); } .mm-live i { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; animation:pulse 1.6s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } .mm-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border-soft); font-size:.83rem; color:var(--fg-secondary); } .mm-row:last-of-type { border-bottom:none; } .mm-row b { color:var(--fg); font-weight:600; } .mm-ok { color:var(--green); font-weight:700; font-size:.8rem; } .mm-bars { display:flex; gap:3px; align-items:flex-end; padding:12px 16px 16px; border-top:1px solid var(--border); } .mm-bars i { flex:1; background:var(--lp); opacity:.85; border-radius:3px 3px 0 0; display:block; } /* SERP Google (adgrants) */ .mock-serp { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:16px; } .ms-bar { display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; font-size:.85rem; color:var(--fg); margin-bottom:14px; } .ms-bar svg { flex-shrink:0; } .ms-ad { border:1px solid var(--border); border-radius:var(--r-lg); padding:13px 15px; background:#fff; } .ms-tag { display:inline-block; font-size:.68rem; font-weight:700; color:var(--fg); border:1px solid var(--border-strong); padding:1px 7px; border-radius:4px; margin-bottom:6px; } .ms-url { font-size:.74rem; color:#0C6329; } .ms-title { font-size:.98rem; color:#1A0DAB; font-weight:500; margin:2px 0 3px; } .ms-desc { font-size:.78rem; color:var(--fg-secondary); } .ms-org { padding:12px 15px 4px; opacity:.55; } /* Przełącznik branży przy przykładowej reklamie (strona główna, sekcja Ad Grants). Pastylki to ten sam komponent (.kw-preset) co w planerze słów na adgrants.webup.pl. */ .gag-branze { justify-content:flex-start; margin-bottom:12px; } /* Wszystkie warianty reklamy w JEDNEJ komórce siatki. Nieaktywne chowamy przez `visibility`, a nie `display` — dzięki temu nadal zajmują miejsce i wysokość bloku jest stała, równa najdłuższej reklamie. Inaczej przełączenie branży przesuwało całą stronę pod kursorem. */ .ms-stack { display:grid; } .ms-stack > .ms-ad { grid-area:1 / 1; visibility:hidden; } .ms-stack > .ms-ad.on { visibility:visible; } .wu-gag-cta p a { color:var(--accent-fg); font-weight:600; } .ms-badge { display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:var(--green-soft); color:var(--green); font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:999px; } /* raport PING */ .mock-report { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; } .mr-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; background:var(--bg); border-bottom:1px solid var(--border); } .mr-head b { font-size:.85rem; color:var(--fg); } .mr-head span { font-size:.72rem; color:var(--fg-muted); } .mr-score { display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid var(--border-soft); } .mr-ring { width:64px; height:64px; border-radius:50%; background:conic-gradient(var(--red) 0 62%, var(--border-soft) 62% 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .mr-ring i { width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.95rem; color:var(--fg); } .mr-score p { font-size:.8rem; color:var(--fg-secondary); } .mr-score b { color:var(--fg); } .mr-item { display:flex; gap:10px; align-items:flex-start; padding:10px 16px; border-bottom:1px solid var(--border-soft); font-size:.8rem; color:var(--fg-secondary); } .mr-item:last-child { border-bottom:none; } .mr-item b { color:var(--fg); font-weight:600; } .mr-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; } /* ── MODAL ZAMÓWIENIA ── */ .modal-back { position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:18px; } .modal-back.open { display:flex; } .modal { background:var(--surface); border-radius:var(--r-xl); max-width:440px; width:100%; padding:28px; position:relative; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); } .modal h3 { color:var(--fg); font-size:1.15rem; font-weight:800; margin-bottom:4px; } .modal .modal-sub { color:var(--fg-muted); font-size:.88rem; margin-bottom:16px; } .modal-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.5rem; color:var(--fg-muted); cursor:pointer; line-height:1; } .modal label { display:block; font-size:.83rem; font-weight:600; color:var(--fg); margin:13px 0 5px; } /* kafle dodatków w modalu są