/* LightLife — style serwisu www (poza design systemem: layout stron) */ /* Szerszy kontener niż domyślny DS (1200px) — mniejsze boczne marginesy */ :root { --container: 1400px; } /* Akcenty kolorystyczne makroskładników (z palety funkcyjnej DS): kolor + pastel tła */ :root { --macro-protein: var(--gold-600); --macro-protein-soft: var(--gold-100); --macro-fat: var(--blue); --macro-fat-soft: var(--blue-100); --macro-carbs: var(--danger); --macro-carbs-soft: var(--danger-100); } /* Twardy bezpiecznik mobile: nic nie rozpycha strony w poziomie. Musi być na `html` — `clip` samego `body` nie propaguje się na viewport (Chrome dalej przewijał). `clip` (nie `hidden`) nie tworzy scroll-kontenera, więc position: sticky (nagłówki porównywarki, menu) działa dalej. Wewnętrzne karuzele/porównywarka mają własne przesuwanie palcem — clip tnie ukrywa nic, co nie scrolluje. */ html, body { overflow-x: clip; } /* Nagłówki sekcji i hero (wszystkie h1/h2 przez token --text-display): JEDNA reguła rozmiaru. Desktop 48px, mobile 36px. h1 = h2. Body/lead i tytuły komponentów (h3/klasy) bez zmian. */ @media (max-width: 768px) { :root { --fs-display: 36px; } } /* ── Layout ── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--space-24) 0; } .section.tight { padding: var(--space-16) 0; } .bg-cream { background: var(--surface-page); } .bg-white { background: var(--white); } /* ── Nagłówek serwisu ── */ /* Nagłówek sticky z top:-[wysokość promo] → przy scrollu pasek promo wyjeżdża nad viewport, a właściwy pasek (logo+menu) zostaje na top:0 (desktop i mobile). */ .site-header { position: sticky; top: calc(-1 * var(--promo-h, 0px)); z-index: 60; background: var(--white); border: 0; box-shadow: none; } .site-logo:hover, .site-nav-logo:hover, .llc-header a:hover { opacity: 1; } /* logo bez efektu hover (żadnego przyciemnienia) — też koszyk/checkout */ /* Wysokość sticky-nagłówka na desktopie: pasek 70 + belka promo 44 = 114, + 6px oddechu. Hero (home/kontakt) liczą wysokość zdjęcia jako 100vh minus ta wartość, żeby mieściło się pod belką. */ :root { --hero-vh-offset: 120px; } .header-promo { display: block; background: color-mix(in srgb, var(--gold) 24%, #fff); color: var(--text-heading); text-decoration: none; } /* pasek promo: 24% gold, cały klikalny → oferta */ .header-promo__inner { min-height: 44px; max-width: 1230px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 13.5px/1.35 var(--font-body); text-align: center; } .header-promo__inner svg { flex: none; color: var(--gold-600); } .header-promo__cta { color: var(--text-heading); font-weight: 750; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .header-promo__arrow { display: none; } /* strzałka tylko na mobile (zamiast „Sprawdź ofertę”) */ .site-header .bar { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 24px; min-height: 70px; padding: 0 16px; max-width: 1230px; margin: 0 auto; } .site-logo { display: flex; align-items: center; justify-self: start; width: auto; height: 48px; } .site-logo img { display: block; width: auto; height: 100%; } .site-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 0; overflow-x: auto; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav > a { font: 600 16px/1 var(--font-body); color: var(--ink-2); padding: 13px 2px; border: 0; border-radius: 0; position: relative; white-space: nowrap; } .site-nav > a:hover { color: var(--gold-600); opacity: 1; } .site-nav > a.on { color: var(--gold-600); } .site-nav > a.on::after { content: none; display: none; } .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; justify-self: end; } .header-cta { display: inline-flex; } .header-cta .ll-btn, .site-nav-top-r .ll-btn { height: 44px; min-height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; } .cart-btn { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--stone); border-radius: var(--radius-md); color: var(--ink); background: var(--gold-pastel-1); transition: background var(--dur) var(--ease-out); } .cart-btn:hover { background: var(--gold-pastel-1); opacity: 1; } .cart-count { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--gold-600); color: #fff; font: 700 10.5px/18px var(--font-body); text-align: center; padding: 0 5px; } .mobile-cart-link, .header-menu-toggle, .site-nav .nav-home, .site-nav-top { display: none; } .header-menu-toggle { width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; place-items: center; align-content: center; gap: 5px; } .header-menu-toggle:hover { background: var(--gold-pastel-2); } .header-menu-toggle span { display: block; width: 21px; height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); } .header-menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .header-menu-toggle.is-open span:nth-child(2) { opacity: 0; } .header-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 900px) { .site-header .bar { display: flex; gap: 12px; min-height: 70px; padding: 0 16px; } .site-logo { width: auto; height: 41px; } /* Menu mobilne — pełnoekranowy overlay z WŁASNYM paskiem (logo + „Wybierz plan” + X), jak Respo. Kryje cały viewport (inset:0) niezależnie od scrolla; pozycje startują tuż pod paskiem. */ .site-nav { position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0; padding: 0 0 var(--space-6); overflow-y: auto; overscroll-behavior: contain; background: var(--white); box-shadow: none; } .site-nav.is-open { display: flex; } /* pasek menu 1:1 jak nagłówek strony (.bar) — logo 41px, gap 12, padding 0 16, przycisk jak .header-cta */ .site-nav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; padding: 0 16px; border-bottom: 1px solid var(--border-soft); } .site-nav-top .site-nav-logo img { display: block; height: 41px; } .site-nav-top-r { display: flex; align-items: center; gap: 8px; } .site-nav-top-r .ll-btn { height: 40px; min-height: 40px; } /* przycisk w menu: y = 40px */ .site-nav-close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; } .site-nav-close:hover { background: var(--gold-pastel-2); } .site-nav > a { display: block; margin: 0 var(--gutter); padding: var(--space-3); font: 600 16px/1.5 var(--font-body); color: var(--text-heading); border-radius: var(--radius-md); } .site-nav .nav-home { display: block; margin-top: var(--space-3); } @media (hover: hover) { .site-nav > a:hover { background: var(--gold-pastel-2); color: var(--text-heading); } } .site-nav > a.on { background: var(--gold-pastel-1); color: var(--gold-600); } .mobile-cart-link { display: block; } .header-actions { margin-left: auto; gap: 8px; } .header-cta { display: none; } /* mobile: bez przycisku CTA w nagłówku — tylko logo + koszyk + hamburger (jak Respo) */ .header-cta .ll-btn { height: 40px; min-height: 40px; padding: 0 12px; font-size: 13px; } .header-menu-toggle { display: grid; flex: none; } } @media (max-width: 480px) { .header-promo__inner { min-height: 64px; padding: 8px 16px; flex-wrap: wrap; align-content: center; column-gap: 7px; row-gap: 2px; font-size: 11.5px; } .site-header .bar { min-height: 64px; gap: 8px; } .site-logo { flex: none; width: auto; height: 35px; } .header-cta .ll-btn { height: 40px; min-height: 40px; padding: 0 11px; font-size: 12.5px; } /* pasek menu = pasek nagłówka na telefonie: 64px wys., logo 35px */ .site-nav-top { min-height: 64px; } .site-nav-top .site-nav-logo img { height: 35px; } } @media (max-width: 350px) { .header-cta { display: none; } } /* ── Nagłówki sekcji ── */ .overline-row { display: flex; align-items: center; gap: 14px; } .overline-row::before { content: ''; width: 28px; height: 2px; background: linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold) 70%, transparent); flex: none; } /* miękki hairline — renderuje się jednakowo niezależnie od pozycji (odporny na sub-piksel przy DPR 1.25) */ .overline-row span { font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); } /* ── GRUPY GLOBALNE: typografia sekcji (zmieniasz w jednym miejscu) ── */ /* wszystkie nagłówki sekcji (h2) */ .sec-head h2, .center-head h2, .calc-teaser h2 { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--text-heading); } /* wszystkie leady pod nagłówkami (sekcje + hero) */ .sec-head .sub, .center-head p, .hero-b .lead { font: var(--text-body-lg); color: var(--ink-2); } /* GRUPA: akordeony — typografia (nowy akordeon: nadaj .acc-q pytaniu, .acc-a treści) */ .acc-q { font: 600 var(--fs-body-lg)/1.35 var(--font-display); color: var(--text-heading); } /* pytanie: 18px SemiBold serif */ .lifestyle .acc-q, .ms-section .acc-q { font-size: 20px; } /* nagłówki pozycji: 20px (tercja wielka od 16px) */ .acc-a { font: var(--type-body); color: var(--ink-2); } /* treść: 16px Manrope */ /* nagłówek wyśrodkowany ze złotą linią (CenterHead) */ .center-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8); margin-bottom: var(--space-16); } .center-head h2 { margin: 0; max-width: 780px; } .center-head p { margin: 0; max-width: 680px; } .center-head .gold-line { margin: 0; } .center-overline { font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); margin-bottom: calc(-1 * var(--space-4)); } .sec-head { margin-bottom: var(--space-12); } .sec-head h2 { margin: var(--space-4) 0 0; max-width: 680px; } .sec-head .sub { margin-top: var(--space-3); max-width: 560px; } .sec-head.center { text-align: center; } .sec-head.center .overline-row { justify-content: center; } .sec-head.center .overline-row::before { display: none; } .sec-head.center h2, .sec-head.center .sub { margin-left: auto; margin-right: auto; } /* ── Hero ── */ .hero { background: var(--white); overflow: hidden; } .hero .grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 28px var(--gutter) 64px; max-width: var(--container); margin: 0 auto; } .hero h1 { font: var(--text-display); letter-spacing: var(--tracking-tight); margin: 26px 0 22px; max-width: 560px; } .hero .lead { font: var(--text-body-lg); color: var(--ink-2); max-width: 470px; } .hero-cta { display: flex; align-items: center; gap: 28px; margin-top: 30px; flex-wrap: wrap; } .hero-feats { display: flex; gap: 40px; margin-top: 64px; flex-wrap: wrap; } .hero-photo { align-self: stretch; min-height: 600px; position: relative; } .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ── Slider ── */ .slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; } .slider-head .sec-head { margin-bottom: 0; } .slider-arrows { display: flex; gap: 10px; flex: none; } .slider-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 6px 24px; margin: -6px -6px -12px; scrollbar-width: none; } .slider-track::-webkit-scrollbar { display: none; } .slider-track > * { scroll-snap-align: start; flex: none; } /* ── Metamorfozy (styl editorial: zdjęcia + imię serifem + plakietka kg) ── */ .meta-card { width: 430px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-4); } .meta-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .meta-imgs figure { margin: 0; position: relative; aspect-ratio: 1 / 2; overflow: hidden; border-radius: 12px; background: var(--sand); } /* tło = placeholder w trakcie ładowania (brak białej pustki) */ .meta-imgs figcaption { position: absolute; top: 10px; left: 10px; z-index: 2; font: 600 11px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-600); background: rgba(255,255,255,0.92); padding: 4px 8px; border-radius: var(--radius-full); pointer-events: none; } .meta-info { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); } .meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); } .meta-name { margin: 0; font: 600 22px/1.2 var(--font-display); color: var(--text-heading); } .meta-loss { margin: 0; font: 600 30px/1 var(--font-display); color: var(--gold-600); letter-spacing: -0.01em; white-space: nowrap; } .meta-sub { margin: var(--space-1) 0 0; font: 500 14px/1.45 var(--font-body); color: var(--text-muted); } .meta-quote { margin: var(--space-5) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--gold-600); font: 400 16px/1.6 var(--font-body); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .meta-quote.is-open { -webkit-line-clamp: unset; overflow: visible; } .meta-desc-toggle { margin: var(--space-5) 0 0; padding-left: var(--space-4); border: 0; background: transparent; font: 600 14px/1.4 var(--font-body); color: var(--gold-600); cursor: pointer; } .meta-desc-toggle:hover { text-decoration: underline; } .section.tight.meta-grid-sec { padding-bottom: var(--space-24); } /* 96px na dole -> miejsce na falę do FAQ */ .metas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--space-6); align-items: start; } .metas-grid .meta-card { width: auto; } @media (max-width: 1080px) { .metas-grid { grid-template-columns: 1fr 1fr; } } /* ── Metamorfozy: pasek statystyk (BEZ hoverów) ── */ .meta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: 660px; margin: 0 auto var(--space-16); } /* 64px pod statystykami -> do filtra; węższe, żeby treść nie pływała */ .meta-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-6); background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; } .meta-stat-top { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .meta-stat-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--gold-pastel-1); color: var(--ink); } .meta-stat-ico .meta-stat-svg { width: 18px; height: 18px; } .meta-stat b { font: 600 30px/1 var(--font-display); color: var(--text-heading); letter-spacing: -0.01em; } .meta-stat-label { font: 500 14px/18px var(--font-body); color: var(--text-muted); } /* px zamiast 1.45 -> całkowita wysokość kart, separator slajdera na siatce piksela */ /* ── Filtr kategorii: pigułki z ikonami (jak Respo, w naszych kolorach, BEZ hoverów) ── */ .meta-filter-wrap { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-12); } /* 48px od kategorii do slajdera */ /* hint poza flow -> przyciski dokładnie 64px od boksów (margines .meta-stats), hint wisi ~20px nad nimi */ .meta-filter-hint { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-5)); margin: 0; font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); text-align: center; } .meta-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .meta-filter button { appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); border: 1px solid transparent; background: var(--gold-pastel-1); border-radius: var(--radius-full); font: 600 14px/1 var(--font-body); color: var(--ink-2); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* ikona: czarna, w białym kółku (kółko zawsze białe, zmienia się tylko przycisk) */ .meta-filter button .meta-fi-icon { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; flex: none; background: var(--white); border-radius: 50%; color: var(--ink); box-shadow: var(--shadow-sm); } .meta-filter button:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); } .meta-filter button.on { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); } @media (max-width: 560px) { /* telefon: kategorie w jednym rzędzie, przewijane w poziomie (bez zawijania) */ .meta-filter-wrap { align-items: stretch; } .meta-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: var(--space-2); } .meta-filter::-webkit-scrollbar { display: none; } .meta-filter button { flex: 0 0 auto; scroll-snap-align: start; } } /* ── Paginacja (BEZ hoverów) ── */ .meta-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); } .meta-pager button { appearance: none; min-width: 40px; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border-soft); background: var(--white); border-radius: var(--radius-md); cursor: pointer; font: 600 14px/1 var(--font-body); color: var(--ink-2); } .meta-pager button.on { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); } .meta-pager button:disabled { opacity: 0.4; cursor: default; } /* ── Slider metamorfoz (nasz Slider): intro w nagłówku + karta w torze ── */ /* duża karta slidera — wielkościowo odwzorowana z Respo (835×344, zdjęcie 335×320), nasze kolory */ .meta-feat-wrap { margin-bottom: var(--space-16); } .meta-cta-band { margin: var(--space-16) 0; } .journey-bands.meta-cta-band { max-width: none; } /* rozciągnięcie w POZIOMIE (X) do szerokości siatki metamorfoz; pionowe marginesy i gap 48px bez zmian */ /* Belka „Twoja kolej” — zwarta, wyśrodkowana ciemna karta (własny styl, węższa niż banery bloga): copy z lewej (overline gold + nagłówek ze złotym wyróżnieniem + tekst + złoty guzik), dietetyczka po prawej zakotwiczona do dołu */ .meta-cta-card { max-width: 900px; margin: 64px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: end; gap: var(--space-8); overflow: hidden; background: var(--surface-inverse); border-radius: var(--radius-xl); } .meta-cta-copy { align-self: center; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-12) 0 var(--space-12) var(--space-12); } .meta-cta-over { margin-bottom: var(--space-3); } .meta-cta-over span { color: var(--gold); } .meta-cta-copy h3 { margin: 0; font: 600 30px/1.12 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text-on-inverse); } .meta-cta-copy h3 em { font-style: normal; color: var(--gold); } /* wyróżnienie ważnych słów TYLKO kolorem, jak w belkach bloga */ .meta-cta-copy p { margin: var(--space-3) 0 0; max-width: 52ch; font: 400 var(--fs-body)/1.55 var(--font-body); color: var(--text-on-inverse-muted); } .meta-cta-copy .ll-btn { margin-top: var(--space-6); background: var(--gold); border-color: var(--gold); color: var(--ink); } .meta-cta-copy .ll-btn:hover { background: color-mix(in srgb, var(--gold) 88%, var(--ink)); border-color: color-mix(in srgb, var(--gold) 88%, var(--ink)); } /* subtelne pogłębienie, nie skok na gold-600; lift daje shadow-md z kanonu */ .meta-cta-media { align-self: end; display: grid; place-items: end center; min-width: 0; padding-top: var(--space-6); } .meta-cta-persona { display: block; width: auto; height: auto; max-width: 100%; max-height: 360px; } @media (max-width: 720px) { .meta-cta-card { grid-template-columns: 1fr; gap: var(--space-4); } .meta-cta-copy { order: 1; align-items: center; text-align: center; padding: var(--space-8) var(--space-6) 0; } .meta-cta-copy p { margin-left: auto; margin-right: auto; } .meta-cta-media { order: 2; padding: 0 var(--space-6); } .meta-cta-persona { max-height: 300px; } } /* Pasek podążający na dole (pojawia się po 1. rzędzie siatki) */ .meta-sticky { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--surface-inverse); border-top: 1px solid color-mix(in srgb, var(--gold) 68%, transparent); transform: translateY(110%); transition: transform .3s var(--ease-out); } .meta-sticky.show { transform: translateY(0); } .meta-sticky::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: var(--surface-inverse); pointer-events: none; } /* zakrywa ewentualny 1px luz pod belką (sub-piksel / safe-area), żeby treść nie prześwitywała od spodu */ .meta-sticky-in { width: 100%; max-width: var(--container); min-height: 82px; margin: 0 auto; padding: 11px var(--gutter); display: grid; grid-template-columns: minmax(220px, .8fr) minmax(450px, 1.7fr) auto; align-items: center; gap: var(--space-6); } .meta-sticky-main { display: flex; align-items: center; gap: var(--space-4); min-width: 0; padding-right: var(--space-6); border-right: 1px solid rgba(255,255,255,.14); } .meta-sticky-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(200,154,91,.42); border-radius: var(--radius-full); background: rgba(255,255,255,.07); color: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.22); } .meta-sticky-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .meta-sticky-over { font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); } .meta-sticky-line { font: 500 13px/1.35 var(--font-body); color: var(--text-on-inverse-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meta-sticky-promise { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .meta-sticky-promise strong { color: var(--text-on-inverse); font: 600 20px/1.15 var(--font-display); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meta-sticky-promise span { color: var(--text-on-inverse-muted); font: 400 13px/1.35 var(--font-body); white-space: normal; } .meta-sticky-cta { flex: none; display: flex; align-items: center; gap: var(--space-5); } .meta-sticky-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .meta-sticky-price b { font: 700 18px/1.1 var(--font-display); color: var(--gold); letter-spacing: var(--tracking-tight); } .meta-sticky-price span { font: 500 12px/1.2 var(--font-body); color: var(--text-on-inverse-muted); white-space: nowrap; } .meta-sticky-cta .ll-btn { background: var(--gold); border-color: var(--gold); color: var(--ink); } .meta-sticky-cta .ll-btn:hover { background: color-mix(in srgb, var(--gold) 88%, var(--ink)); border-color: color-mix(in srgb, var(--gold) 88%, var(--ink)); } /* subtelne pogłębienie, nie skok na gold-600; lift daje shadow-md z kanonu */ .meta-sticky-mob { display: none; } /* kompaktowy blok oferty tylko na telefonie */ @media (max-width: 1120px) { .meta-sticky-in { grid-template-columns: minmax(205px, .75fr) minmax(330px, 1.25fr) auto; gap: var(--space-4); } .meta-sticky-main { padding-right: var(--space-4); } .meta-sticky-promise span { display: none; } } @media (max-width: 940px) { .meta-sticky-in { grid-template-columns: minmax(210px, .8fr) minmax(300px, 1.2fr) auto; } .meta-sticky-line { display: none; } } @media (max-width: 860px) { .meta-sticky-price { display: none; } } @media (max-width: 700px) { /* telefon: konkret oferty (cena = hero, pakiet = podpis) obok przycisku */ .meta-sticky-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .meta-sticky-main, .meta-sticky-promise, .meta-sticky-price { display: none; } .meta-sticky-mob { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); min-width: 0; } .meta-sticky-mob-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid rgba(200,154,91,.4); background: rgba(200,154,91,.1); color: var(--gold); } .meta-sticky-mob-ico svg { display: block; } .meta-sticky-mob-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .meta-sticky-mob-price { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .meta-sticky-mob-price b { font: 700 20px/1.15 var(--font-display); color: var(--gold); letter-spacing: var(--tracking-tight); white-space: nowrap; } .meta-sticky-mob-price i { font: 500 12px/1.2 var(--font-body); font-style: normal; color: var(--text-on-inverse-muted); white-space: nowrap; } .meta-sticky-mob-over { font: 500 12px/1.25 var(--font-body); text-transform: none; letter-spacing: normal; color: var(--text-on-inverse-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 560px) { .meta-sticky-in { min-height: 64px; padding: 9px var(--space-4); gap: var(--space-3); } .meta-sticky-mob-price b { font-size: 19px; } .meta-sticky-mob-price i { display: none; } /* najmniejsze telefony: zostaje cena/mies. + pakiet + przycisk */ .meta-sticky-cta .ll-btn { padding-left: var(--space-4); padding-right: var(--space-4); } } @media (prefers-reduced-motion: reduce) { .meta-sticky { transition: none; } } .meta-grid-head { margin: var(--space-24) 0 var(--space-16); } /* 96px od belki promo, 64px od separatora do siatki */ .meta-grid-head h2 { line-height: 53px; } /* równy px -> separator na siatce piksela (ostre 2px, spójne z hero) */ .meta-grid-head .gold-line { background: var(--gold-600); } /* separator w gold-600 */ .meta-feat { flex: none; width: min(835px, 92vw); min-height: 344px; display: flex; align-items: center; gap: 0; padding: 0; background: var(--gold-pastel-2); border-radius: 24px; overflow: hidden; scroll-snap-align: start; } .meta-feat-imgs { position: relative; flex: 0 0 359px; max-width: 52%; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .meta-feat-imgs figure { margin: 0; aspect-ratio: 1 / 2; overflow: hidden; border-radius: 16px; background: var(--sand); } .meta-feat-imgs image-slot { display: block; width: 100%; height: 100%; } .meta-imgs .meta-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .meta-feat-imgs .meta-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .meta-feat-badge { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gold-600); color: var(--white); font: 600 20px/1 var(--font-display); letter-spacing: -0.01em; box-shadow: 0 6px 18px rgba(27,31,35,.22); white-space: nowrap; } .meta-feat-body { flex: 1 1 auto; align-self: center; padding: 40px; } .meta-feat-name { margin: 0; font: 500 32px/1.2 var(--font-display); color: var(--text-heading); } .meta-feat-time { margin: var(--space-2) 0 0; font: 600 14px/1.5 var(--font-body); color: var(--text-muted); } .meta-feat-time b { color: var(--text-heading); } .meta-feat-desc { margin: var(--space-4) 0 0; max-width: 42ch; font: 400 16px/1.7 var(--font-body); color: var(--ink-2); } @media (max-width: 720px) { .meta-feat { flex-direction: column; width: min(400px, 92vw); min-height: 0; } .meta-feat-imgs { flex: none; max-width: none; width: 100%; } .meta-feat-body { padding: var(--space-6); } } /* ── Metamorfozy: wyśrodkowany nagłówek + pasek 6 kategorii ── */ /* Nagłówek hero metamorfoz — zbudowany jak .center-head (h1 + separator, wyśrodkowany) */ .meta-hero-head { padding-top: var(--space-16); margin-bottom: 0; } /* 64px od góry (blisko standardu .page-head 60px; symetrycznie z 64px hero→filtr) */ .meta-hero-head h1 { margin: 0; max-width: 780px; font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--text-heading); } /* line-height w pełnych px -> separator na siatce piksela (ostre 2px) */ .meta-hero-head .meta-hero-lead { line-height: 29px; } /* px zamiast 28.8 -> całkowita wysokość leadu, separator zawsze ostry */ .meta-hero-head .gold-line { margin: 0; background: var(--gold-600); } @media (max-width: 560px) { .meta-hero-head { padding-top: var(--space-6); } /* telefon: 24px od góry; dół jak wcześniej (odstęp daje sekcja poniżej) */ } /* (styl filtra kategorii — patrz blok „Filtr kategorii" wyżej) */ @media (max-width: 720px) { .meta-stats { grid-template-columns: 1fr; gap: var(--space-3); } .metas-grid { grid-template-columns: 1fr; } } /* wspólny slider z bocznymi strzałkami (ArrowSlider: metamorfozy, opinie) */ .arrow-slider { position: relative; } .ms-progress { position: relative; height: 2px; border-radius: var(--radius-full); background: var(--stone); margin-bottom: var(--space-8); overflow: hidden; } .ms-progress span { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-full); background: var(--ink); } .ms-track { padding-bottom: 8px; } .ms-arrow { position: absolute; top: 34%; z-index: 3; width: 64px; height: 64px; border: 0; border-radius: var(--radius-full); background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: background var(--dur) var(--ease-out); -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .ms-arrow:hover, .ms-arrow:active { background: var(--gold-600); } } .ms-left { left: -14px; } .ms-right { right: -14px; } /* zajawka kalkulatora (blok na końcu sekcji metamorfoz) */ .calc-teaser { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--space-24); } .calc-teaser h2 { margin: 0; } /* złota linia-ornament (wspólna: kalkulator, sekcja diet) */ .gold-line { width: var(--space-24); height: 2px; border-radius: var(--radius-full); background: var(--gold); margin: var(--space-8) 0 var(--space-10); } @media (max-width: 760px) { .calc-teaser { margin-top: var(--space-16); } } /* pasek ocen z platform (Google / Facebook) */ .ratings-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-16); } .rs-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); box-shadow: var(--shadow-sm); } .rs-logo { font: 600 27px/1 var(--font-body); letter-spacing: -0.5px; } .rs-logo b { font-weight: 600; } .rs-facebook { color: #1877F2; font-weight: 700; letter-spacing: -0.8px; } .rs-score { display: flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--font-body); color: var(--text-muted); white-space: nowrap; } .rs-score svg { color: var(--gold); } .rs-score b { font: 700 21px/1 var(--font-body); color: var(--text-heading); } @media (max-width: 760px) { .ratings-strip { grid-template-columns: 1fr; gap: var(--space-3); } .rs-card { padding: var(--space-5) var(--space-6); } } /* ── Kroki „jak to działa” ── */ /* ── Dieta dla kobiet / mężczyzn ── */ .gp-bands { display: flex; flex-direction: column; gap: var(--space-6); max-width: 1040px; margin: var(--space-10) auto 0; } .gp-band { --gp-accent: var(--gold-600); --gp-line: color-mix(in srgb, var(--gp-accent) 30%, transparent); display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: var(--space-6); align-items: stretch; padding: var(--space-8); border-radius: var(--radius-xl); } .gp-band--women { background: var(--coral-pastel-2); --gp-accent: var(--danger); } .gp-band--men { background: var(--blue-pastel-2); --gp-accent: var(--blue); } .gp-band-body { border-left: 1px solid var(--gp-line); padding-left: var(--space-6); } .gp-band-head { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-5); } .gp-mark { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); display: grid; place-items: center; font: 600 26px/1 var(--font-body); background: var(--white); color: var(--gp-accent); box-shadow: var(--shadow-sm); } .gp-band-head h3 { font: 600 22px/1.25 var(--font-display); color: var(--text-heading); margin: 0; } .gp-rec { display: flex; flex-direction: column; align-items: center; gap: 3px; } .gp-rec-label { font: 700 11px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gp-accent); } .gp-rec-plan { font: 600 16px/1.3 var(--font-body); color: var(--text-heading); } .gp-cta-btn { width: 100%; } .gp-lead { font: 500 16px/1.6 var(--font-body); color: var(--ink-2); margin: 0 0 var(--space-5); } .gp-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-8); } .gp-points li { display: flex; gap: var(--space-3); align-items: baseline; font: 500 16px/1.55 var(--font-body); color: var(--ink-2); } .gp-num { flex: none; font: 600 18px/1.4 var(--font-display); color: var(--gp-accent); font-variant-numeric: tabular-nums; } .gp-ptxt { flex: 1; } .gp-cta-wrap { display: flex; justify-content: center; margin-top: var(--space-12); } /* ── Posiłki ── */ .dish-card { width: 300px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .dish-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .dish-body { padding: 18px 20px 20px; } .dish-type { font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); } .dish-body h4 { font: var(--text-h4); margin: 8px 0 10px; } .dish-macros { display: flex; gap: 14px; font: var(--text-caption); color: var(--text-muted); } .dish-macros b { color: var(--text-heading); font-weight: 700; } /* ── Sekcja aplikacji ── */ .app-grid { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; } .app-checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .app-check { display: flex; gap: 12px; align-items: flex-start; font: 500 15px/1.5 var(--font-body); color: var(--ink-2); } .app-check .ic { color: var(--gold-600); flex: none; margin-top: 2px; } .app-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font: var(--text-caption); color: var(--text-muted); background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-full); padding: 9px 16px; } .phone-wrap { display: flex; justify-content: center; } .phone-scale { transform: scale(0.76); transform-origin: top center; height: calc(874px * 0.76); } /* ── „Twoje tempo, Twoje zasady”: akordeon obiekcji + zdjęcie ── */ .ls-grid { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: var(--space-16); align-items: start; } .ls-acc { display: flex; flex-direction: column; } .ls-item { border-bottom: 1px solid var(--border-soft); } .ls-item:first-child { border-top: 1px solid var(--border-soft); } .ls-q { display: flex; align-items: center; gap: var(--space-4); width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: var(--space-5) var(--space-1); } /* kółko ikony (wspólne: akordeon lifestyle + karty opiekuna) — akcent jak „węglowodany” w sliderze */ .ls-ico, .carer-ico { flex: none; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); background: var(--gold-pastel-1); color: var(--ink); display: grid; place-items: center; } .ls-qtext { flex: 1; } /* typografia: .acc-q */ .ls-toggle { flex: none; color: var(--ink-3); display: grid; place-items: center; transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .ls-item.open .ls-toggle { transform: rotate(45deg); color: var(--gold-600); } .ls-a { padding: 0 var(--space-1) var(--space-5) calc(var(--space-1) + var(--space-12) + var(--space-4)); max-width: 620px; } /* wcięcie pod ikoną 48px; typografia: .acc-a */ .ls-cta { display: flex; justify-content: center; align-items: center; gap: var(--space-6); margin-top: var(--space-12); flex-wrap: wrap; } /* wspólny podpis przy CTA „Sprawdź ofertę” (grupa: lifestyle, opinie) — kursywa, serif */ .cta-quote { font: 500 italic var(--fs-body-lg)/1.5 var(--font-display); font-style: italic; color: var(--ink-2); margin: 0; max-width: 360px; } .ls-media { position: relative; align-self: stretch; min-height: calc(var(--space-24) * 4); } /* wariant „duże karty”: NAWET JEŚLI [sytuacja] + rozwiązanie (siatka 3×2) */ .ncards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 1080px; margin: var(--space-10) auto 0; } .ncard { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-xl); padding: var(--space-6); } /* bez borderu i cienia — same kolorowe wypełnienie */ .ncard:nth-child(odd) { background: var(--coral-pastel-1); border-color: transparent; } .ncard:nth-child(even) { background: var(--blue-pastel-1); border-color: transparent; } .ncard-eyebrow { font: 700 12px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-600); margin-bottom: var(--space-3); } .ncard-sit { font: 600 20px/1.3 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text-heading); margin: 0 0 var(--space-4); } .ncard-sol { font: var(--type-body); color: var(--ink-2); margin: 0; } .ncard-band { max-width: 1080px; margin: var(--space-16) auto 0; } @media (max-width: 960px) { .ncards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .ncards { grid-template-columns: 1fr; } } /* ── „Smak, do którego się wraca”: zakładki kategorii + karty posiłków ── */ .menu-hint { text-align: center; font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin: calc(-1 * var(--space-8)) 0 var(--space-5); } .menu-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-12); } .menu-tab { appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); border: 1px solid transparent; background: var(--gold-pastel-1); border-radius: var(--radius-full); font: 600 14px/1 var(--font-body); color: var(--ink-2); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .menu-fi-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 6px; box-sizing: border-box; flex: none; background: var(--white); border-radius: 50%; color: var(--ink); box-shadow: var(--shadow-sm); } .menu-tab:hover { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); } .menu-tab.on { background: var(--gold-600); border-color: var(--gold-600); color: var(--white); } /* mobile: zakładki kategorii w JEDNEJ linii, przewijane palcem (poziomy scroll, ukryty pasek); 48px nad linią slajdera */ @media (max-width: 620px) { .menu-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: var(--space-12); } .menu-tabs::-webkit-scrollbar { display: none; } .menu-tab { flex: none; } } .dishx-card { width: 300px; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .dishx-photo { aspect-ratio: 4 / 3; background: var(--cream); } .dishx-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); } .dishx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .dishx-name { flex: 1; font: 600 20px/1.35 var(--font-display); color: var(--text-heading); margin: 0; min-height: 2.7em; } .dishx-kcal { flex: none; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; padding-top: 2px; } .dishx-kcal b { font: 600 19px/1 var(--font-display); color: var(--gold-600); font-variant-numeric: tabular-nums; } .dishx-kcal small { font: 600 11px/1 var(--font-body); color: var(--text-muted); } .dishx-macros { margin-top: auto; padding-top: var(--space-5); } .macbar { display: flex; gap: 3px; height: 6px; } .macbar-seg { min-width: 8px; border-radius: var(--radius-full); background: var(--mac); } .macleg { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); } .macleg .mac { display: inline-flex; align-items: center; gap: 5px; font: 400 11.5px/1 var(--font-body); color: var(--ink-2); white-space: nowrap; } .macleg .mac::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--mac); flex: none; } .macleg i { font-style: normal; color: var(--text-muted); } .macleg b { font-weight: 700; font-size: 12px; color: var(--text-heading); font-variant-numeric: tabular-nums; } .mac-p { --mac: var(--macro-protein); --mac-soft: var(--macro-protein-soft); } .mac-f { --mac: var(--macro-fat); --mac-soft: var(--macro-fat-soft); } .mac-c { --mac: var(--macro-carbs); --mac-soft: var(--macro-carbs-soft); } /* Pierwsza karta w sliderze menu nie może przywierać do lewej krawędzi — scroll-snap zjadał 6px bufora (padding toru) na cień, przez co lewy bok karty wyglądał na ucięty. scroll-padding-left wyrównuje pierwszą kartę do treści sekcji (jak nagłówek) i przywraca bufor cienia. */ .tasty .slider-track { scroll-padding-left: 6px; } /* ── „Twój osobisty opiekun”: zdjęcie + karty cech ── */ .carer-grid { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: var(--space-8); max-width: 1120px; margin: 0 auto; align-items: start; } .carer-media { position: sticky; top: var(--space-16); align-self: start; } .carer-frame { aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; } .carer-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* karty cech: szachownica pasteli 12% (coral/blue), kafel CTA = kolor białka (gold 12%) */ .carer-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .crd-item { border-radius: var(--radius-xl); padding: var(--space-6); background: var(--coral-pastel-1); } .crd-item:nth-child(4n+2), .crd-item:nth-child(4n+3) { background: var(--blue-pastel-1); } .crd-item h3 { font: 600 20px/1.3 var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text-heading); margin: 0 0 var(--space-4); } .crd-item p { font: var(--type-body); color: var(--ink-2); margin: 0; } .crd-item.crd-item--cta { grid-column: 1 / -1; background: var(--gold-pastel-1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-5); } .crd-item p.crd-cta-t { font: var(--text-h4); color: var(--text-heading); margin: 0; } /* ten sam token co .jb-q w belkach */ .carer-cta-band { max-width: 1120px; margin: var(--space-16) auto 0; } /* złota belka CTA pod siatką opiekuna: 64px od dołu, szerokość jak siatka, styl jak .ncard-band */ @media (max-width: 720px) { .carer-cards { grid-template-columns: 1fr; } /* 1 kolumna: kolory ściśle naprzemian (coral/blue), a nie szachownica z 2 kolumn */ .carer-cards .crd-item:nth-child(odd) { background: var(--coral-pastel-1); } .carer-cards .crd-item:nth-child(even) { background: var(--blue-pastel-1); } } /* Faliste przejścia między sekcjami (Elementor „Waves") */ .section { position: relative; } .section > .container { position: relative; z-index: 1; } .sec-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; z-index: 0; display: block; fill: var(--cream); pointer-events: none; transform: scaleY(-1); } .sec-wave--white { fill: var(--white); } .sec-wave--cream { fill: var(--cream); } .sec-wave--ink { fill: var(--surface-inverse); } /* ── „Historia metamorfozy”: oś czasu jednej przemiany (zdjęcie + akordeon miesięcy) ── */ /* kontaktówka: 7 klatek filmu w rzędzie, aktywna większa ze złotą ramką; strzałki wspólne ze slajderami (.ms-arrow) */ .msf-strip { position: relative; max-width: 1040px; margin: 0 auto; } .msf-frames { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-3); min-height: calc(320px * 4 / 3 + 24px); } /* stała wysokość = aktywna klatka; bez zapadania w trakcie animacji */ .msf-frame { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); cursor: pointer; } .msf-frame.on { width: 320px; } .msf-ph { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--cream); border: 1px solid transparent; box-shadow: var(--shadow-sm); } .msf-frame.on .msf-ph { border-color: var(--gold-600); box-shadow: var(--shadow-md); } .msf-cap { font: 600 12px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .msf-frame:hover .msf-cap, .msf-frame.on .msf-cap { color: var(--gold-600); } .msf-strip .ms-arrow { top: 45%; transform: translateY(-50%); } .msf-strip .ms-arrow:disabled { opacity: 0; pointer-events: none; } /* dwie belki CTA obok siebie (oferta + metamorfozy), 64px od karty tekstowej */ .band-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); max-width: 1040px; margin: var(--space-16) auto 0; } .band-duo .jb { flex-wrap: wrap; } .msx-kg { margin: 0; font: 600 56px/1 var(--font-display); color: var(--gold-600); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .msx-label { margin: var(--space-3) 0 0; font: 600 12px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .msf-body { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; max-width: 920px; margin: var(--space-10) auto 0; background: var(--coral-pastel-1); border-radius: var(--radius-xl); padding: var(--space-8); } .msf-head { min-width: 160px; } .msf-d { margin: 0; font: var(--type-body); color: var(--ink-2); border-left: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); padding-left: var(--space-8); min-height: calc(6 * 1.6em); display: flex; align-items: center; } @media (max-width: 900px) { .msf-frames { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 calc(50% - 100px) var(--space-2); } .msf-frames::-webkit-scrollbar { display: none; } .msf-frame { width: 84px; } .msf-frame.on { width: 200px; } .msf-frames { min-height: calc(200px * 4 / 3 + 24px); } .band-duo { grid-template-columns: 1fr; } .msf-body { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6); } .msf-d { min-height: 0; border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); padding-top: var(--space-5); } } /* ── Opinie: karta jak wyciąg z Google ── */ .grev-card { width: 400px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .grev-top { display: flex; align-items: center; gap: var(--space-3); } .grev-back { color: var(--ink-4); flex: none; } .grev-who { flex: 1; min-width: 0; } .grev-who b { display: block; font: 700 var(--fs-body-sm)/1.3 var(--font-body); color: var(--text-heading); } .grev-who span { display: block; font: var(--text-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grev-g { flex: none; } .grev-menu { color: var(--ink-4); flex: none; } .grev-rate { display: flex; align-items: center; gap: var(--space-3); } .grev-rate > span { font: var(--text-caption); color: var(--text-muted); } .grev-new { font: var(--text-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--danger); background: var(--danger-100); border-radius: var(--radius-sm); padding: 2px var(--space-2); font-style: normal; } .grev-text { font: var(--text-body-sm); color: var(--ink-2); margin: 0; } .sp-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-12); flex-wrap: wrap; } /* ── Oferta: konfigurator (sekcja 2 podstrony) ── */ /* rytm kroków */ .step-block { margin-top: var(--space-12); } .step-block:first-child { margin-top: 0; } /* 64px pasek→pakiety siedzi teraz jako margin-bottom na pasku miesięcy (.cfg-row:last-child .cfg-seg) */ .step-block:last-child { margin-top: 0; } /* nagłówek kroku — wyśrodkowany, rytm jak CenterHead */ .step-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); margin: 0 0 var(--space-10); } .step-n { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); display: grid; place-items: center; font: 600 var(--fs-body-lg)/1 var(--font-display); color: var(--gold-600); background: var(--gold-100); } .step-title { font: var(--text-h3); color: var(--text-heading); margin: 0; } .step-hint { font: var(--text-body-sm); color: var(--text-muted); margin: 0; max-width: 560px; } /* Krok 1 — karty „dla kogo” */ .gender-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); max-width: 1020px; margin: 0 auto; } .gender-card { --gacc: var(--gold-600); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--white); border: 2px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .gender-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gacc) 45%, var(--border-soft)); box-shadow: 0 22px 50px -22px color-mix(in srgb, var(--gacc) 50%, transparent); } .gender-card.on { transform: translateY(-4px); border-color: var(--gacc); box-shadow: 0 0 0 1px var(--gacc), 0 26px 58px -26px color-mix(in srgb, var(--gacc) 55%, transparent); } .gender-ico { width: 64px; height: 64px; border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--white); background: var(--ggrad); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--gacc) 60%, transparent); margin-bottom: var(--space-2); } .gender-name { font: 600 20px/1.2 var(--font-display); color: var(--text-heading); } .gender-sub { font: 700 11px/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .gender-count { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--space-3); font: 600 12.5px/1 var(--font-body); color: var(--gacc); background: color-mix(in srgb, var(--gacc) 12%, var(--white)); border-radius: var(--radius-full); padding: 6px 12px; } .gender-count svg { flex: none; color: var(--gacc); } .gender-check { position: absolute; top: var(--space-4); right: var(--space-4); width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--gacc); color: var(--white); display: grid; place-items: center; opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .gender-card.on .gender-check { opacity: 1; transform: scale(1); } /* ── Konfigurator oferty: wolnostojące chipy wyboru (od zera, na tokenach DS) ── kolory wg semantyki DS: WYBRANY = gold 12% (--gold-pastel-1) + złota obwódka; HOVER = gold 6%; rabat = coral (drugi akcent strony); rytm: etykieta→chipy 16px, rząd→rząd 32px, →pakiety 64px */ .cfg { display: flex; flex-direction: column; align-items: center; scroll-margin-top: calc(var(--header-h, 72px) + var(--space-6)); } /* CTA „Sprawdź ofertę" ląduje pod menu z zapasem */ .cfg-row { display: flex; flex-direction: column; align-items: center; } .cfg-row .cfg-seg { margin-top: var(--space-5); } /* nagłówek → pasek: 20px (margines na pasku) */ .cfg-row + .cfg-row { margin-top: var(--space-16); } /* grupa „dla kogo” → grupa „miesiące”: 64px (realny margines na wierszu, nagłówek ma zero) */ .cfg-row:last-child .cfg-seg { margin-bottom: var(--space-16); } /* pasek MIESIĘCY → górna krawędź pakietów: 64px, realny margines na PASKU (widoczny w dev tool) */ .cfg-plan-row { display: none; } /* krok 3 „Wybierz pakiet" tylko na mobile — na desktopie pakiet wybiera się przez karty (jak u Respo) */ @media (min-width: 721px) { .cfg-row:nth-last-child(2) .cfg-seg { margin-bottom: var(--space-16); } } /* desktop: krok 3 ukryty przejmuje :last-child, więc 64px do kart trzyma przedostatni rząd (okres) */ .cfg-head { display: inline-flex; align-items: center; gap: var(--space-3); } .cfg-num { flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--gold-pastel-1); color: var(--gold-600); font: 600 15px/1 var(--font-display); box-shadow: var(--shadow-sm); } /* numer kroku — mała wersja .journey-num */ .cfg-label { font: 600 20px/1.3 var(--font-display); color: var(--text-heading); margin: 0; } /* nagłówek Garamond 20px: zero marginesu */ /* jeden zbiorczy pasek (tuba) na każdy rząd — segmenty w środku */ .cfg-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); padding: 5px; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } /* stany 1:1 jak sekcja „Trudny przypadek”: hover = gold 6% (bez obwódki), wybrany = gold 12% + obwódka 2px */ .cfg-seg-btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 2px solid transparent; border-radius: var(--radius-full); padding: 11px 19px; font: 600 14px/1 var(--font-body); color: var(--ink-2); cursor: pointer; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } /* Segmenty bez pionowych separatorów. */ .cfg-seg-btn + .cfg-seg-btn::before { content: none; display: none; } .cfg-seg-btn svg { flex: none; color: var(--ink-3); transition: color var(--dur) var(--ease-out); } .cfg-seg-btn:hover { background: var(--gold-pastel-2); color: var(--text-heading); } .cfg-seg-btn.on { background: var(--gold-pastel-1); border-color: var(--gold-600); color: var(--text-heading); box-shadow: var(--shadow-sm); } .cfg-seg-btn.on svg { color: var(--ink); } /* ikona na zaznaczeniu ciemna — bez złota */ /* etykieta rabatu: czerń + biel — maksymalny kontrast na bieli, hoverze 6% i zaznaczeniu 12% */ .cfg-off { font: 700 12px/1 var(--font-body); font-style: normal; color: var(--white); background: var(--ink); padding: 4px 9px; border-radius: var(--radius-full); } @media (max-width: 720px) { /* ── Toggle pakietów jak Respo: pełna szerokość, równe segmenty, jeden rząd (nasze złoto/style) ── */ .cfg-row { align-self: stretch; } /* rzędy na pełną szerokość kontenera (bez tego kurczą się przez align-items:center) */ .cfg-plan-row { display: flex; } /* krok 3 widoczny na mobile (dziedziczy flex-direction:column + align-items:center z .cfg-row) */ .pricing-grid .plan-card:not(.is-plan-picked) { display: none; } /* mobile: pokazujemy tylko kartę wybraną w toggle kroku 3 (cena wg wybranego okresu) */ .cfg-seg { display: flex; flex-wrap: nowrap; width: 100%; overflow: visible; } .cfg-seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; gap: var(--space-1); padding: var(--space-3) var(--space-1); font-size: 14px; } .cfg-seg-btn svg { display: none; } /* ikony chowamy — jak u Respo, by 4 równe segmenty zmieściły się w rzędzie */ /* rabat = chorągiewka przypięta DOLNĄ krawędzią do GÓRNEJ krawędzi belki, sterczy w całości nad nią (kolor nasz — czerń) */ .cfg-off { position: absolute; left: 50%; bottom: calc(100% + 8px); top: auto; transform: translateX(-50%); height: 22px; padding: 5px 6px 4px; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: 12px; line-height: 1; white-space: nowrap; } .cfg-row .cfg-seg { margin-top: var(--space-6); } /* nagłówek → góra belki = 24px (krok bez plakietek: belka jest najwyższym elementem) */ .cfg-row .cfg-seg:has(.cfg-off) { margin-top: calc(var(--space-6) + 22px); } /* 24px (nagłówek→góra plakietki) + 22px (wysokość plakietki nad belką) — plakietka siedzi całą wysokością nad belką */ } /* Krok 2 — okres (wyśrodkowany) */ .seg-wrap { display: flex; justify-content: center; } .seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius-full); flex-wrap: wrap; justify-content: center; } .seg button { border: 0; background: transparent; border-radius: var(--radius-full); padding: 11px 20px; font: 600 13px/1 var(--font-body); color: var(--text-muted); cursor: pointer; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); display: inline-flex; align-items: center; gap: 8px; } .seg button:hover { color: var(--text-heading); } .seg button.on { background: var(--ink); color: var(--white); } .seg-off { font: 700 10.5px/1 var(--font-body); color: var(--gold-600); background: var(--gold-100); padding: 4px 7px; border-radius: var(--radius-full); } .seg button.on .seg-off { background: rgba(255,255,255,0.14); color: var(--gold-200); } /* Krok 3 — pakiety: krzywa neutral → złoto → neutral+atrament, sticky nagłówek karty */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; } /* ══ Paleta wykonawcza pakietów — krzywa napięcia w świecie marki (ciepłe neutrale + złoto) ══ Basic = najlżejszy neutral („podłoga") · Comfort = JEDYNE złoto na siatce (szczyt — tu idzie klik) · Pro = najgłębszy ciepły neutral + atramentowe akcenty (prestiż bez ciężkiego bloku). Zmienne per-tier: --acc (ptaszki/drobnice), --acc-soft (tła chipów i gwarancji), --head-bg (nagłówek), --head-line (linia pod nazwą), --ico-bg/--ico-fg (kafel ikony), --ico-glow (poświata kafla). */ .plan-card { --acc: var(--gold-600); --acc-soft: var(--gold-pastel-1); --head-bg: var(--white); --head-line: var(--border-soft); --ico-bg: var(--sand); --ico-fg: var(--ink-2); --ico-glow: none; position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } /* Basic — podłoga: muśnięcie cream w nagłówku, piaskowy kafel, szare drobnice */ .plan-card.acc-blue { --acc: var(--ink-3); --acc-soft: color-mix(in srgb, var(--sand) 45%, var(--white)); --head-bg: color-mix(in srgb, var(--cream) 75%, var(--white)); --head-line: var(--sand); --ico-bg: var(--sand); --ico-fg: var(--white); } /* Comfort — szczyt: nagłówek gold-100, złoty kafel z miękką poświatą, złote drobnice */ .plan-card.acc-gold { --acc: var(--gold-600); --acc-soft: var(--gold-pastel-1); --head-bg: var(--gold-100); --head-line: var(--gold-200); --ico-bg: var(--gold); --ico-fg: var(--white); --ico-glow: 0 8px 16px -8px color-mix(in srgb, var(--gold-600) 55%, transparent); } /* Pro — kotwica prestiżu: głębszy piasek w nagłówku, atramentowy kafel, mocniejsza obwódka karty */ .plan-card.acc-ink { --acc: var(--ink); --acc-soft: color-mix(in srgb, var(--sand) 80%, var(--white)); --head-bg: color-mix(in srgb, var(--sand) 85%, var(--white)); --head-line: var(--stone); --ico-bg: var(--ink); --ico-fg: var(--white); border-color: var(--stone); } .plan-card.featured { border: 2px solid var(--acc); box-shadow: var(--shadow-lg); } /* chip przeceny: atrament (twardy, czytelny sygnał oszczędności); tylko na Comfort złoty */ .plan-card .plan-deal em { background: var(--ink); } .plan-card.acc-gold .plan-deal em { background: var(--gold-600); } /* /mies.: Basic szary (dziedziczy --acc = ink-3), Comfort złoty, Pro ink-2 (głębiej niż Basic, bez czerni) */ .plan-card.acc-ink .plan-permo b { color: var(--ink-2); } /* CTA — jedna czytelna hierarchia: Comfort czarny primary, Basic i Pro białe z atramentową obwódką. */ .plan-card.featured .plan-stick .ll-btn--primary { background: var(--ink); color: var(--white); border-color: var(--ink); } .plan-card.featured .plan-stick .ll-btn--primary:hover { background: #2A2F34; border-color: #2A2F34; box-shadow: var(--shadow-md); } .plan-card:not(.featured) .plan-stick .ll-btn--secondary { background: var(--white); border-color: var(--ink); color: var(--ink); } .plan-card:not(.featured) .plan-stick .ll-btn--secondary:hover { background: var(--cream); border-color: var(--ink); color: var(--ink); } /* Efekt przycisków CTA: patrz kanoniczny „WZÓR WYKONAWCZY PRZYCISKU" niżej w pliku (~2211). Tu tylko override pakietowe (Comfort złoto / Pro ink). */ /* zakres sticky = head + składniki; gwarancja jest POZA nim, więc head zwalnia się przed nią */ .plan-scroll { display: flex; flex-direction: column; flex: 1 1 auto; } .plan-flag { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3; } /* górna krawędź karty przecina plakietkę równo w połowie (plakietka ~34px → 17/17) */ /* head karty — pastel pakietu na CAŁYM bloku (nazwa + opis + cena + CTA), sticky przy scrollu */ .plan-stick { position: sticky; top: var(--header-h, 72px); z-index: 2; background: var(--head-bg); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; padding: var(--space-6); transition: border-radius var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } /* seam głowa→treść: hairline w akcencie pakietu rozświetlony na środku, zanikający na końcach (zamiast czarnej belki) */ .plan-stick::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: radial-gradient(60% 130% at 50% 50%, var(--acc) 0%, color-mix(in srgb, var(--acc) 22%, transparent) 55%, transparent 100%); } /* stan przypięty: rogi się prostują (tekst nie prześwituje w wycięciach), miękki akcentowy cień oddziela od treści */ .plan-stick.stuck { border-radius: 0; box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--acc) 45%, transparent), var(--shadow-sm); } /* górny wiersz: nazwa+tag po lewej, gradientowa ikona pakietu po prawej + linia separacyjna do strefy ceny */ .plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--head-line); } .plan-id { min-width: 0; } .plan-name { font: 600 26px/1.1 var(--font-display); color: var(--text-heading); margin: 0; } .plan-tag { font: 500 14px/1.4 var(--font-body); color: var(--ink-2); margin: var(--space-1) 0 0; min-height: 1.4em; } /* ikona pakietu — kafelek z gradientem akcentu, biała ikona, akcentowa poświata (efekt) */ .plan-ico { flex: none; width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--ico-fg); background: var(--ico-bg); box-shadow: var(--ico-glow); } .plan-ico svg { filter: none; } /* sygnał okazji: przekreślona cena bazowa + mocny chip rabatu + oszczędność */ .plan-deal { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); min-height: 24px; } .plan-deal.empty { margin-top: var(--space-5); } .plan-deal s { font: 500 15px/1 var(--font-body); color: var(--text-faint); text-decoration-thickness: 1.5px; } .plan-deal em { font: 700 12px/1 var(--font-body); font-style: normal; letter-spacing: 0.02em; color: var(--white); background: var(--acc); border-radius: var(--radius-sm); padding: 4px 8px; } .plan-deal i { font: 600 14px/1 var(--font-body); font-style: normal; color: var(--text-heading); } /* wiersz ceny: total po lewej, ekwiwalent miesięczny dosunięty do prawej */ .plan-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-3) 0 var(--space-6); } .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px var(--space-2); } .plan-price b { font: 700 44px/0.92 var(--font-body); color: var(--text-heading); letter-spacing: -0.025em; } .plan-price span { width: 100%; font: 600 12px/1.2 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .plan-permo { text-align: right; white-space: nowrap; padding-bottom: 4px; } .plan-permo b { font: 600 24px/1 var(--font-display); color: var(--acc); } .plan-permo em { display: block; font: 600 12px/1.3 var(--font-body); font-style: normal; color: var(--text-muted); margin-top: 3px; } .plan-permo.one em { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 10.5px; } /* zawartość pakietu — kategorie serif z ikoną i linią, wiersze z chipem wartości (wzór: respo) */ .plan-feats { flex: 1 1 auto; padding: var(--space-2) var(--space-6) 0; } .feat-group { margin-top: var(--space-5); } .feat-cat { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--border-strong); font: 600 var(--fs-body-lg)/1.2 var(--font-display); color: var(--text-heading); } .feat-cat svg { flex: none; color: var(--text-heading); } .feat-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; font: 500 14px/1.55 var(--font-body); color: var(--ink-2); } .feat-row .ic { flex: none; margin-top: 3px; color: var(--acc); display: grid; place-items: center; } .feat-row.off { color: var(--text-faint); } .feat-row.off .ic { color: var(--ink-4); } .feat-val { font-style: normal; font-weight: 700; color: var(--acc); background: var(--acc-soft); border-radius: var(--radius-sm); padding: 1px 7px; white-space: nowrap; } /* zamknięcie karty — box gwarancji (analogicznie do respo), przyklejony do dołu → karty równo */ .plan-guarantee-wrap { position: relative; margin: var(--space-6); } .plan-guarantee { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4); background: var(--acc-soft); border: 0; border-radius: var(--radius-lg); cursor: pointer; text-align: left; font: inherit; transition: background var(--dur) var(--ease-out); } .plan-guarantee:hover, .plan-guarantee.is-open { background: color-mix(in srgb, var(--acc) 16%, var(--white)); } .pg-ico { flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--white); background: linear-gradient(145deg, color-mix(in srgb, var(--acc) 78%, var(--white)), var(--acc)); box-shadow: 0 5px 12px -5px color-mix(in srgb, var(--acc) 55%, transparent); } .plan-guarantee b { flex: 1; font: 600 13.5px/1.3 var(--font-body); color: var(--text-heading); } .pg-info { flex: none; color: var(--ink-3); display: grid; place-items: center; transition: color var(--dur) var(--ease-out); } .plan-guarantee.is-open .pg-info { color: var(--acc); } .pg-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-8) var(--space-4) var(--space-5); font: 500 13px/1.55 var(--font-body); color: var(--ink-2); text-align: left; } .pg-pop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; border-radius: var(--radius-md); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .pg-pop-x:hover { background: var(--acc-soft); color: var(--text-heading); } /* ══════════════════════════════════════════════════════════════════════════ Porównywarka pakietów (macierz: kategorie × pakiety) Nagłówek = DWIE WARSTWY nałożone na siebie: WARSTWA 1 — MASKA: pełnoszerokościowy (od marginesu do marginesu, kol 1 → -1), nieprzezroczysty pas w paśmie nagłówka. Chowa TWARDO wszystko, co przewija się pod spodem — na CAŁEJ szerokości, też pod kolumną etykiet. Nic nie prześwituje, nic się „nie pojawia". WARSTWA 2 — DEKORACJA: pastelowe bandy pakietów, separatory (święta linia), obwódki — budowane NA masce. ══════════════════════════════════════════════════════════════════════════ */ .cmp { position: relative; scroll-margin-top: calc(var(--header-h, 72px) + var(--space-6)); } /* po „Rozwiń" tabela ląduje pod menu z zapasem */ .cmp-content { position: relative; } /* nagłówek: statyczny gdy zwinięty, sticky pod menu po rozwinięciu (jak respo) */ .cmp-head { position: static; z-index: 5; display: grid; grid-template-columns: var(--cmp-cols); } .cmp.open .cmp-head { position: sticky; top: var(--header-h, 72px); } /* jawne rozłożenie kolumn — żeby maska (::before) nie kolidowała z auto-placement */ .cmp-head > div { grid-row: 1; } .cmp-head > div:nth-of-type(1) { grid-column: 1; } .cmp-head > div:nth-of-type(2) { grid-column: 2; } .cmp-head > div:nth-of-type(3) { grid-column: 3; } .cmp-head > div:nth-of-type(4) { grid-column: 4; } /* ── WARSTWA 1 · MASKA ── pełna biel przez całą szerokość, pod całą dekoracją; cień 2px zjada sliver pod „świętą linią" separatorów (twardy cut, bez gradientu) */ .cmp-head::before { content: ''; grid-column: 1 / -1; grid-row: 1; align-self: stretch; background: var(--white); box-shadow: 0 2px 0 var(--white); } /* ── WARSTWA 2 · DEKORACJA ── */ /* kolumna etykiet w nagłówku — pusta; przez nią widać samą maskę (biel) */ .cmp-corner { padding: var(--space-5); } /* nagłówek kolumny = band w pastelu pakietu, elementy równo, górne rogi zaokrąglone */ .cmp-ch { --acc: var(--gold-600); --acc-soft: var(--gold-100); --head-bg: var(--gold-100); --ico-bg: var(--gold); --ico-fg: var(--white); --ico-glow: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-5); text-align: center; background: var(--head-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* kolory kolumn = kolory kart pakietów powyżej (te same --head-bg, --ico-bg, --ico-fg co .plan-card) */ .cmp-ch.acc-blue { --acc: var(--ink-3); --acc-soft: color-mix(in srgb, var(--sand) 45%, var(--white)); --head-bg: color-mix(in srgb, var(--cream) 75%, var(--white)); --ico-bg: var(--sand); --ico-fg: var(--white); --ico-glow: none; } .cmp-ch.acc-gold { --acc: var(--gold-600); --acc-soft: var(--gold-pastel-1); --head-bg: var(--gold-100); --ico-bg: var(--gold); --ico-fg: var(--white); --ico-glow: 0 8px 16px -8px color-mix(in srgb, var(--gold-600) 55%, transparent); } .cmp-ch.acc-ink { --acc: var(--ink); --acc-soft: color-mix(in srgb, var(--sand) 80%, var(--white)); --head-bg: color-mix(in srgb, var(--sand) 85%, var(--white)); --ico-bg: var(--ink); --ico-fg: var(--white); --ico-glow: none; } .cmp-ch-ico { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--ico-fg); background: var(--ico-bg); box-shadow: var(--ico-glow); } .cmp-ch b { font: 600 26px/1.1 var(--font-display); color: var(--text-heading); } /* Basic i Pro: bez obwódki — sam pastel 12% pakietu (Comfort ma własny akcentowy outline) */ .cmp-ch:not(.featured) { box-shadow: var(--shadow-sm); } /* separator na dole banda = „święta linia"; ten sam co seam w kartach pakietów */ .cmp-ch::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: radial-gradient(60% 130% at 50% 50%, var(--acc) 0%, color-mix(in srgb, var(--acc) 22%, transparent) 55%, transparent 100%); } /* przycisk „Kupuję" — nasz zdefiniowany kształt (--radius-md), styl primary, kompaktowy */ .cmp-buy { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 var(--space-6); font: 600 14px/1 var(--font-body); color: var(--text-on-inverse); background: var(--ink); border: 1px solid transparent; border-radius: var(--radius-full); cursor: pointer; transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .cmp-buy:hover { background: #2A2F34; box-shadow: var(--shadow-md); } .cmp-ch:not(.featured) .cmp-buy { color: var(--ink); background: var(--white); border-color: var(--ink); } .cmp-ch:not(.featured) .cmp-buy:hover { color: var(--ink); background: var(--cream); border-color: var(--ink); } .cmp-buy:focus-visible { outline: none; box-shadow: var(--focus-ring); } .cmp-buy:active { transform: scale(0.98); } /* ── ciało tabeli ── */ .cmp-cat-row { background: var(--white); } .cmp-cat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); font: 600 var(--fs-body-lg)/1.2 var(--font-display); color: var(--text-heading); } .cmp-cat svg { color: var(--text-heading); } .cmp-row { display: grid; grid-template-columns: var(--cmp-cols); align-items: stretch; border-bottom: 1px solid var(--border-soft); } .cmp-row:last-child { border-bottom: 0; } .cmp-label { align-self: center; padding: var(--space-4) var(--space-6); font: 500 14px/1.45 var(--font-body); color: var(--ink-2); } .cmp-cell { --acc: var(--gold-600); --acc-soft: var(--gold-100); align-self: stretch; display: flex; align-items: center; justify-content: center; padding: var(--space-3); text-align: center; } .cmp-cell.acc-blue { --acc: var(--ink-3); --acc-soft: color-mix(in srgb, var(--sand) 45%, var(--white)); } .cmp-cell.acc-gold { --acc: var(--gold-600); --acc-soft: var(--gold-pastel-1); } .cmp-cell.acc-ink { --acc: var(--ink); --acc-soft: color-mix(in srgb, var(--sand) 80%, var(--white)); } /* wyróżniona kolumna Comfort — akcentowy outline ciągły przez nagłówek i całą treść */ .cmp-ch.featured { border: 2px solid var(--acc); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .cmp-cell.featured { border-left: 2px solid var(--acc); border-right: 2px solid var(--acc); } .cmp-row:last-child .cmp-cell.featured { border-bottom: 2px solid var(--acc); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* obwódka headu poprowadzona w dół: lewa krawędź Basic i prawa krawędź Pro (1px border-soft), zamknięta zaokrąglonym dołem */ .cmp-cell.acc-blue { border-left: 1px solid var(--border-soft); } .cmp-cell.acc-ink { border-right: 1px solid var(--border-soft); } .cmp-row:last-child .cmp-cell.acc-blue { border-bottom: 1px solid var(--border-soft); border-bottom-left-radius: var(--radius-lg); } .cmp-row:last-child .cmp-cell.acc-ink { border-bottom: 1px solid var(--border-soft); border-bottom-right-radius: var(--radius-lg); } .cmp-val { font: 700 12.5px/1 var(--font-body); color: var(--acc); background: var(--acc-soft); border-radius: var(--radius-full); padding: 5px 11px; white-space: nowrap; } .cmp-yes { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; } .cmp-no { font: 500 15px/1 var(--font-body); color: var(--ink-4); } /* ── przyciski porównywarki — nasz kształt (--radius-md), wysokość 48, primary ── */ /* Przyciski porównania — ten sam WZÓR WYKONAWCZY co .ll-btn: pigułka + cień spoczynkowy, hover (@media) unosi cieniem + szewron kiwa w swoją stronę (odpowiednik dosuwu strzałki hero — te rozwijają w dół, „do zakupu" scrolluje w górę). */ .cmp-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-8); font: 600 15px/1 var(--font-body); color: var(--text-on-inverse); background: var(--ink); border: 1px solid transparent; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); cursor: pointer; transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .cmp-cta:hover { background: #2A2F34; } .cmp-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); } .cmp-cta:active { transform: scale(0.98); } /* przycisk „Kupuję" w kartach pakietów to DS