/* ============================================================ Decor — Wykończenia pod klucz · arkusz podstron Skład: tokeny systemu (kolor, typografia, układ, ruch) + arkusz strony. Jeden plik = jedno żądanie, bez @import, który blokowałby renderowanie kaskadowo. Fonty podpina w każdej podstrony. ============================================================ */ /* ============================================================ Decor — Wykończenia pod klucz (podklucz.decor-into.pl) Fundamenty: kolor, typografia, układ, ruch ------------------------------------------------------------ Paleta ciemna: grafitowe tło, kość wapienna, akcent wina. Nazwy i wartości tokenów 1:1 z kodu strony, dopisane są tylko aliasy dla wartości, które strona wpisuje bezpośrednio. ============================================================ */ :root { /* ---------- Kolor: podstawa (ze strony) ---------- */ --ink: #0B0A09; /* tło całej strony */ --ink-soft: #131110; --bone: #EFE9E1; /* tekst główny, nagłówki */ --bone-dim: #A0968C; /* etykiety, eyebrow, podpisy */ --line: rgba(239,233,225,0.13); /* linie i obramowania */ --line-soft: rgba(239,233,225,0.07); /* separatory sekcji, ramki zdjęć */ --wine: #6E1C2F; /* CTA, badge, zaznaczenie checkboxa */ --wine-lift: #96263C; /* hover CTA, podkreślenia, kropki, znaczniki */ /* ---------- Kolor: wartości wpisane na stronie ---------- */ --bone-em: #F6F1EA; /* kursywa w H1 */ --bone-cta: #F7F2EC; /* tekst na przycisku CTA */ --bone-hi: #FFF9F1; /* hover tekstu (FAQ, telefon) */ --error: #D98394; /* komunikat błędu formularza */ /* Tekst na ink — skala krycia bone */ --text-90: rgba(239,233,225,.90); /* cytaty serif, intro */ --text-86: rgba(239,233,225,.86); /* kroki, podpisy na zdjęciach */ --text-72: rgba(239,233,225,.72); /* lead w hero, menu */ --text-66: rgba(239,233,225,.66); /* akapit (FAQ, opinie) */ --text-58: rgba(239,233,225,.58); /* opisy kroków i kart */ --text-46: rgba(239,233,225,.46); /* placeholder */ --text-28: rgba(239,233,225,.28); /* numery w tle */ /* ---------- Powierzchnie ---------- */ --surface-panel: linear-gradient(168deg, #141110 0%, #0C0B0A 100%); /* @kind color */ /* panel decyzji, doradca */ --surface-sheet: linear-gradient(168deg, #151211 0%, #0C0B0A 100%); /* @kind color */ /* checklista, modal */ --surface-trust: linear-gradient(180deg, #100E0D, #0B0A09); /* @kind color */ /* pas zaufania */ --surface-glass: rgba(9,8,8,.86); /* @kind color */ /* nawigacja po przewinięciu + blur(16px) */ --scrim-modal: rgba(7,6,6,.82); /* @kind color */ /* tło modalu + blur(6px) */ --scrim-photo: linear-gradient(to top, rgba(11,10,9,.92), rgba(11,10,9,.2) 70%, transparent); /* @kind color */ /* ---------- Kroje ---------- */ --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif; /* @kind font */ /* nagłówki, liczby, cytaty — waga 400 */ --f-ui: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, sans-serif; /* @kind font */ /* UI, tekst — bazowo 300 */ /* ---------- Skala typograficzna (płynna, jak na stronie) ---------- */ --t-h1: clamp(2.3rem, 4.2vw, 4.05rem); /* @kind font */ /* lh 1.03 · −0.014em */ --t-h1-ty: clamp(2.3rem, 5.4vw, 5.1rem); /* @kind font */ /* strona podziękowania */ --t-h2: clamp(1.85rem, 3.1vw, 3.05rem); /* @kind font */ /* lh 1.08 · −0.012em */ --t-h2-panel: clamp(1.5rem, 2.2vw, 2.2rem); /* @kind font */ /* nagłówek w panelu */ --t-h2-modal: clamp(1.35rem, 2.1vw, 1.85rem); /* @kind font */ --t-num-xl: clamp(1.9rem, 3.2vw, 2.9rem); /* @kind font */ /* wynik kalkulatora */ --t-num-lg: clamp(1.25rem, 1.9vw, 1.72rem); /* @kind font */ /* pas zaufania */ --t-serif-intro: clamp(1.08rem, 1.5vw, 1.42rem); /* @kind font *//* intro metamorfozy, lh 1.45 */ --t-faq: clamp(1.02rem, 1.3vw, 1.25rem); /* @kind font */ /* pytanie FAQ, lh 1.4 */ --t-lede: clamp(.95rem, 1.15vw, 1.06rem); /* @kind font */ /* lead w hero, lh 1.62 */ --t-body: clamp(.95rem, 1.05vw, 1.04rem); /* @kind font */ /* lead sekcji, lh 1.68 */ --t-sm: .9rem; /* @kind font */ /* opisy, lh 1.55–1.6 */ --t-xs: .78rem; /* @kind font */ /* noty pod formularzem */ --t-button: 12.5px; /* @kind font */ /* CTA / ghost — uppercase */ --t-label: 11px; /* @kind font */ /* h3-etykieta, nazwy — uppercase .18–.22em */ --t-micro: 10px; /* @kind font */ /* podpisy, liczniki — uppercase .16–.2em */ /* Rozstrzelenie wersalików */ --tr-label: .2em; /* @kind font */ --tr-micro: .16em; /* @kind font */ --tr-button: .13em; /* @kind font */ /* ---------- Układ ---------- */ --pad-x: clamp(22px, 5.4vw, 104px); /* @kind spacing */ /* margines boczny wszystkiego */ --wrap: 1560px; /* @kind spacing */ /* max szerokość treści */ --band-pad: clamp(68px, 8.5vw, 132px); /* @kind spacing */ /* pion sekcji */ --nav-h: 70px; /* @kind spacing */ /* 58px poniżej 860px */ --radius: 0; /* @kind radius */ /* narożniki proste; koła tylko w kontrolkach */ /* Punkty przełamania: 1180 (menu → burger) · 1080 (siatki → 1 kol.) · 860 (mobile) · 620 · 460 */ /* ---------- Ruch ---------- */ --ease-line: cubic-bezier(.22,.68,.24,1); /* @kind other */ /* podkreślenia, zdjęcia, akordeon */ --ease-rise: cubic-bezier(.2,.75,.25,1); /* @kind other */ /* wejście treści: translateY(16px), .85s */ --ease-std: cubic-bezier(.4,0,.2,1); /* @kind other */ --dur-fast: .3s; /* @kind other */ --dur: .35s; /* @kind other */ --dur-line: .45s; /* @kind other */ --dur-photo: .8s; /* @kind other */ --glow-cta: 0 0 0 0 rgba(150,38,60,.42), 0 16px 40px -22px rgba(150,38,60,.9); /* @kind shadow */ /* pulsuje na hover CTA */ } /* ============================================================ Decor — Wykończenia pod klucz · style strony Cały arkusz z podklucz.decor-into.pl skopiowany 1:1 (kolejność i nadpisania z faz 2/3 zachowane). Tokeny: colors_and_type.css. ============================================================ */ :root{ /* Dark-committed palette: warm graphite ground, limewash bone, bordeaux accent */ --ink: #0B0A09; --ink-soft: #131110; --bone: #EFE9E1; --bone-dim: #A0968C; --line: rgba(239,233,225,0.13); --line-soft: rgba(239,233,225,0.07); --wine: #6E1C2F; --wine-lift: #96263C; --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif; /* @kind font */ --f-ui: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, sans-serif; /* @kind font */ --pad-x: clamp(22px, 5.4vw, 104px); --img-search: url("img/search.jpg"); /* @kind other */ --img-meta: url("img/meta.jpg"); /* @kind other */ --img-poster: url("img/poster.jpg"); /* @kind other */ --img-po: url("img/po.jpg"); /* @kind other */ --img-przed: url("img/przed.jpg"); /* @kind other */ } *{ box-sizing:border-box; } body{ margin:0; background: var(--ink); color: var(--bone); font-family: var(--f-ui); font-weight:300; -webkit-font-smoothing:antialiased; } /* ---------- shell ---------- */ .hero{ position:relative; isolation:isolate; display:flex; flex-direction:column; min-height: min(96svh, 940px); overflow:hidden; background: var(--ink); } /* ---------- media ---------- */ .media{ position:absolute; inset: 0 0 0 26%; z-index:0; } .media__frame{ position:absolute; inset:0; overflow:hidden; animation: reveal 1.5s cubic-bezier(.22,.68,.24,1) both; } .media__shot{ position:absolute; inset:0; background-size:cover; background-position: 62% 50%; opacity:0; transform: scale(1.06); transition: opacity .9s cubic-bezier(.4,0,.2,1); animation: settle 16s cubic-bezier(.2,.6,.3,1) forwards; } .media__shot--search{ background-image: var(--img-search); } .media__shot--meta{ background-image: var(--img-meta); background-position: 50% 52%; } .hero[data-variant="search"] .media__shot--search, .hero[data-variant="meta"] .media__shot--meta{ opacity:1; } /* scrims: keep the left third readable, seal the top and bottom edges */ .media::after{ content:""; position:absolute; inset:0; background: linear-gradient(97deg, var(--ink) 0%, rgba(11,10,9,.97) 20%, rgba(11,10,9,.78) 42%, rgba(11,10,9,.34) 60%, rgba(11,10,9,.12) 78%, rgba(11,10,9,.42) 100%), linear-gradient(to bottom, rgba(11,10,9,.55), rgba(11,10,9,0) 22%, rgba(11,10,9,0) 62%, rgba(11,10,9,.5)); pointer-events:none; } /* ---------- topbar ---------- */ .topbar{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:24px; padding: clamp(20px,2.6vw,34px) var(--pad-x); border-bottom:1px solid var(--line-soft); animation: fade .9s .1s both; } .wordmark{ display:flex; align-items:baseline; gap:10px; font-family: var(--f-display); font-size: 21px; letter-spacing:.16em; text-transform:uppercase; } .wordmark small{ font-family: var(--f-ui); font-size:10px; font-weight:400; letter-spacing:.22em; color: var(--bone-dim); text-transform:uppercase; } .switch{ display:flex; align-items:center; gap: clamp(14px,2.4vw,30px); } .switch__label{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-dim); } .switch__set{ display:flex; gap: clamp(12px,2vw,26px); } .tab{ position:relative; appearance:none; background:none; border:0; padding:6px 0 9px; font-family: var(--f-ui); font-size:11px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color: var(--bone-dim); cursor:pointer; transition: color .3s ease; } .tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--wine-lift); transform: scaleX(0); transform-origin:left; transition: transform .45s cubic-bezier(.22,.68,.24,1); } .tab:hover{ color: var(--bone); } .tab[aria-selected="true"]{ color: var(--bone); } .tab[aria-selected="true"]::after{ transform: scaleX(1); } .tab:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:5px; } /* ---------- copy panel ---------- */ .panel{ position:relative; z-index:2; margin-top:auto; width: min(740px, 56vw); padding: clamp(34px,5vw,64px) clamp(20px,3vw,44px) clamp(28px,3.6vw,46px) var(--pad-x); } .stack{ display:grid; } .copy{ grid-area: 1 / 1; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap: clamp(16px,1.8vw,22px); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .4s ease, visibility .4s; } .copy.is-on{ opacity:1; visibility:visible; pointer-events:auto; } .eyebrow{ font-size: clamp(10px,1vw,11px); font-weight:400; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-dim); } .eyebrow b{ color: var(--bone); font-weight:400; } h1{ margin:0; font-family: var(--f-display); font-weight:400; letter-spacing:-.014em; line-height:1.03; text-wrap:balance; font-size: clamp(2.3rem, 4.2vw, 4.05rem); } h1 em{ font-style:italic; color:#F6F1EA; white-space:nowrap; } .copy--meta h1{ font-size: clamp(1.95rem, 3.5vw, 3.05rem); line-height:1.09; } .lede{ margin:0; max-width: 46ch; font-size: clamp(.95rem, 1.15vw, 1.06rem); line-height:1.62; color: rgba(239,233,225,.72); } .steps{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0; padding:0; list-style:none; font-size: clamp(.86rem,1vw,.96rem); letter-spacing:.02em; } .steps li{ display:flex; align-items:center; gap:14px; color: rgba(239,233,225,.86); } .steps li:not(:last-child)::after{ content:""; width:3px; height:3px; border-radius:50%; background: var(--wine-lift); } /* actions */ .actions{ display:flex; flex-wrap:wrap; align-items:center; gap: clamp(16px,2vw,28px); } .cta{ display:inline-flex; align-items:center; gap:14px; padding: 17px 30px; background: var(--wine); color:#F7F2EC; text-decoration:none; font-size:12.5px; font-weight:400; letter-spacing:.13em; text-transform:uppercase; border:1px solid rgba(255,255,255,.06); transition: background .35s ease, transform .35s ease; } .cta__arrow{ display:block; width:20px; height:1px; background:currentColor; transition: width .35s ease; } .cta:hover{ background: var(--wine-lift); animation: glow 2.1s ease-in-out infinite; } .cta:hover .cta__arrow{ width:30px; } .cta:focus-visible{ outline:1px solid var(--bone); outline-offset:4px; } .ghost{ position:relative; color: rgba(239,233,225,.8); text-decoration:none; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; padding-bottom:5px; } .ghost::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--wine-lift); transform: scaleX(.34); transform-origin:left; transition: transform .4s cubic-bezier(.22,.68,.24,1); } .ghost:hover{ color: var(--bone); } .ghost:hover::after{ transform: scaleX(1); } .ghost:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:5px; } /* proof */ .proof{ display:flex; flex-wrap:wrap; gap: clamp(18px,2.4vw,34px); margin-top: clamp(8px,1.4vw,14px); padding-top: clamp(16px,1.8vw,22px); border-top:1px solid var(--line); width:100%; } .proof__item{ display:flex; flex-direction:column; gap:5px; } .proof__n{ font-family: var(--f-display); font-size: clamp(1.05rem,1.3vw,1.28rem); font-variant-numeric: tabular-nums; letter-spacing:.01em; } .proof__t{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } .proof--single .proof__n{ font-size: clamp(1.3rem,1.8vw,1.7rem); } /* scroll cue */ .cue{ position:absolute; right: clamp(18px,2.4vw,38px); bottom: clamp(24px,3vw,44px); z-index:2; display:flex; align-items:center; gap:12px; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color: rgba(239,233,225,.55); writing-mode: vertical-rl; animation: fade 1s 1.15s both; } .cue::after{ content:""; width:1px; height:52px; background: linear-gradient(to bottom, rgba(239,233,225,.5), transparent); } /* entrance stagger — replays on every variant change */ .copy.is-on > *{ animation: rise .85s var(--d,0s) both cubic-bezier(.2,.75,.25,1); } @keyframes rise{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } } @keyframes fade{ from{ opacity:0; } to{ opacity:1; } } @keyframes reveal{ from{ opacity:0; } to{ opacity:1; } } @keyframes settle{ from{ transform: scale(1.06); } to{ transform: scale(1); } } @keyframes glow{ 0%,100%{ box-shadow: 0 0 0 0 rgba(150,38,60,.42), 0 16px 40px -22px rgba(150,38,60,.9); } 50% { box-shadow: 0 0 0 13px rgba(150,38,60,0), 0 20px 52px -18px rgba(150,38,60,1); } } /* ---------- responsive ---------- */ @media (max-width: 1080px){ .media{ inset: 0 0 0 18%; } .panel{ width: min(600px, 62vw); } } @media (max-width: 860px){ .hero{ min-height:0; } .media{ inset: 0 0 auto 0; height: 50svh; } .media__shot{ background-position: 58% 46%; } .media__shot--meta{ background-position: 52% 50%; } .media::after{ background: linear-gradient(to bottom, rgba(11,10,9,.62) 0%, rgba(11,10,9,.12) 26%, rgba(11,10,9,.28) 62%, rgba(11,10,9,.92) 88%, var(--ink) 100%); } .topbar{ border-bottom:0; } .switch__label{ display:none; } .panel{ width:100%; margin-top: 34svh; padding: clamp(20px,4vw,28px) var(--pad-x) clamp(30px,6vw,46px); } .copy{ gap: clamp(13px,3vw,18px); } .proof{ margin-top:2px; padding-top: 15px; gap:13px 22px; } h1{ font-size: clamp(2.1rem, 8.6vw, 3rem); } .copy--meta h1{ font-size: clamp(1.72rem, 6.6vw, 2.3rem); } .lede{ max-width:38ch; } .cue{ display:none; } .actions{ width:100%; } .cta{ flex:1 1 auto; justify-content:space-between; } } @media (max-width: 460px){ .proof{ gap:14px 22px; } .wordmark small{ display:none; } } @media (prefers-reduced-motion: reduce){ .media__frame, .media__shot, .topbar, .cue, .copy.is-on > *{ animation:none !important; } .media__shot{ transform:none; } .cta:hover{ animation:none; } *{ transition-duration:.01ms !important; } } /* ============================================================ PHASE 2 — kalkulator, zaufanie, FAQ + CTA, thank you, sticky ============================================================ */ [hidden]{ display:none !important; } .wrap{ max-width:1560px; margin-inline:auto; width:100%; } section.band{ position:relative; padding: clamp(68px,8.5vw,132px) var(--pad-x); border-top:1px solid var(--line-soft); background: var(--ink); } h2{ margin:0; font-family: var(--f-display); font-weight:400; line-height:1.08; letter-spacing:-.012em; text-wrap:balance; font-size: clamp(1.85rem, 3.1vw, 3.05rem); } h3{ margin:0; font-family: var(--f-ui); font-weight:400; font-size: 11px; letter-spacing:.22em; text-transform:uppercase; color: var(--bone-dim); } .band__lede{ margin:0; max-width:54ch; font-size: clamp(.95rem,1.05vw,1.04rem); line-height:1.68; color: rgba(239,233,225,.68); } .band__head{ display:flex; flex-direction:column; gap: clamp(16px,1.8vw,22px); max-width: 1000px; } .note{ display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(239,233,225,.38); border-bottom:1px dashed rgba(239,233,225,.2); padding-bottom:3px; } /* ---------- kalkulator ---------- */ .calc{ display:grid; gap: clamp(34px,5vw,88px); grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items:start; margin-top: clamp(38px,4.5vw,64px); } .calc__panel{ display:flex; flex-direction:column; gap: clamp(26px,3vw,38px); } .field{ display:flex; flex-direction:column; gap:14px; } .field__row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; } .field__val{ font-family: var(--f-display); font-size: clamp(1.3rem,1.8vw,1.7rem); font-variant-numeric: tabular-nums; } input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; cursor:pointer; } input[type="range"]::-webkit-slider-runnable-track{ height:1px; background: var(--line); } input[type="range"]::-moz-range-track{ height:1px; background: var(--line); } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:13px; height:13px; margin-top:-6px; border-radius:50%; background: var(--wine-lift); border:1px solid rgba(239,233,225,.35); transition: transform .25s ease; } input[type="range"]::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background: var(--wine-lift); border:1px solid rgba(239,233,225,.35); } input[type="range"]:hover::-webkit-slider-thumb{ transform: scale(1.25); } input[type="range"]:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:6px; } .packs{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); } .pack{ flex:1 1 150px; appearance:none; background:none; cursor:pointer; text-align:left; border:0; border-bottom:1px solid var(--line); padding:18px 20px 18px 0; color: var(--bone-dim); font-family: var(--f-ui); display:flex; flex-direction:column; gap:6px; transition: color .3s ease; position:relative; } .pack::before{ content:""; position:absolute; left:0; top:-1px; height:1px; right:14px; background: var(--wine-lift); transform: scaleX(0); transform-origin:left; transition: transform .45s cubic-bezier(.22,.68,.24,1); } .pack__name{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; } .pack__price{ font-family: var(--f-display); font-size:1.12rem; font-variant-numeric: tabular-nums; } .pack:hover{ color: var(--bone); } .pack[aria-pressed="true"]{ color: var(--bone); } .pack[aria-pressed="true"]::before{ transform: scaleX(1); } .pack:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:3px; } .result{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; padding-top: clamp(20px,2.4vw,28px); border-top:1px solid var(--line); } .result__n{ font-family: var(--f-display); font-size: clamp(1.9rem,3.2vw,2.9rem); font-variant-numeric: tabular-nums; letter-spacing:-.01em; } .result__t{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); margin-top:8px; } /* "Wycena indywidualna" jest dłuższa niż kwota — mniejszy stopień, żeby się mieściła */ .result__n--tekst{ font-size: clamp(1.35rem,2.3vw,2rem); } .packs3__note{ margin: clamp(14px,1.6vw,18px) 0 0; font-size:.78rem; line-height:1.6; color: rgba(239,233,225,.55); max-width:60ch; } /* ---------- zespół ---------- */ .sub{ margin-top: clamp(52px,6vw,96px); } .sub__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom: clamp(26px,3vw,42px); } .team{ display:grid; gap: clamp(18px,2vw,30px); grid-template-columns: repeat(4, minmax(0,1fr)); } .member{ display:flex; flex-direction:column; gap:16px; } .member__photo{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line-soft); background-size:cover; background-position:center; background-image: radial-gradient(115% 85% at 28% 0%, rgba(239,233,225,.10), transparent 62%), linear-gradient(158deg, #191514 0%, #0E0C0B 100%); } .member__photo::after{ content:""; position:absolute; inset:auto 0 0 0; height:45%; background: linear-gradient(to top, rgba(11,10,9,.75), transparent); } .member__mono{ position:absolute; inset:0; display:grid; place-items:center; font-family: var(--f-display); font-size: clamp(2.6rem,3.6vw,4rem); color: rgba(239,233,225,.12); letter-spacing:.04em; } .member__name{ font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; } .member__role{ font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color: var(--bone-dim); margin-top:7px; } .member__line{ display:block; width:22px; height:1px; background: var(--wine-lift); margin-top:14px; } /* ---------- opinie ---------- */ .reviews{ display:grid; gap: 1px; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--line-soft); border-block:1px solid var(--line-soft); } .review{ background: var(--ink); padding: clamp(24px,2.4vw,34px) clamp(20px,2vw,30px); display:flex; flex-direction:column; gap:18px; } .stars{ display:flex; align-items:center; gap:9px; } .stars svg{ width:63px; height:12px; display:block; } .stars span{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--bone-dim); } .review__q{ margin:0; font-family: var(--f-display); font-size: clamp(1rem,1.15vw,1.12rem); line-height:1.55; color: rgba(239,233,225,.92); } .review__who{ margin-top:auto; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } /* ---------- FAQ + final CTA ---------- */ .close{ display:grid; gap: clamp(38px,5vw,96px); grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items:start; } .faq{ border-top:1px solid var(--line); } .faq__item{ border-bottom:1px solid var(--line); } .faq__q{ width:100%; appearance:none; background:none; border:0; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding: clamp(20px,2.2vw,26px) 0; font-family: var(--f-display); font-size: clamp(1.02rem,1.3vw,1.25rem); line-height:1.4; text-align:left; color: var(--bone); transition: color .3s ease; } .faq__q:hover{ color:#FFF9F1; } .faq__q:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:4px; } .faq__sign{ position:relative; flex:0 0 12px; width:12px; height:12px; margin-top:9px; } .faq__sign::before, .faq__sign::after{ content:""; position:absolute; left:0; top:5px; width:12px; height:1px; background: var(--wine-lift); transition: transform .4s cubic-bezier(.22,.68,.24,1); } .faq__sign::after{ transform: rotate(90deg); } .faq__q[aria-expanded="true"] .faq__sign::after{ transform: rotate(0deg); } .faq__panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .45s cubic-bezier(.22,.68,.24,1); } .faq__q[aria-expanded="true"] + .faq__panel{ grid-template-rows:1fr; } .faq__panel > div{ overflow:hidden; } .faq__panel p{ margin:0; padding: 0 44px clamp(22px,2.4vw,30px) 0; max-width:60ch; font-size:.96rem; line-height:1.7; color: rgba(239,233,225,.66); } .decide{ display:flex; flex-direction:column; gap: clamp(22px,2.6vw,30px); padding: clamp(30px,3.4vw,46px); border:1px solid var(--line); background: linear-gradient(168deg, #141110 0%, #0C0B0A 100%); } .decide h2{ font-size: clamp(1.5rem,2.2vw,2.2rem); } .decide__p{ margin:0; font-size:.96rem; line-height:1.68; color: rgba(239,233,225,.65); } .decide__acts{ display:flex; flex-direction:column; gap:14px; } .btn-outline{ display:inline-flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 24px; text-decoration:none; border:1px solid var(--line); color: rgba(239,233,225,.86); font-size:12px; letter-spacing:.13em; text-transform:uppercase; transition: border-color .35s ease, color .35s ease, background .35s ease; } .btn-outline:hover{ border-color: rgba(239,233,225,.4); color: var(--bone); background: rgba(239,233,225,.03); } .btn-outline:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:3px; } .decide .cta{ justify-content:space-between; } .decide__foot{ display:flex; gap:20px; padding-top:20px; border-top:1px solid var(--line); } .decide__foot div{ display:flex; flex-direction:column; gap:6px; } /* ---------- stopka ---------- */ .foot{ display:flex; flex-wrap:wrap; gap:18px 34px; align-items:baseline; justify-content:space-between; padding: clamp(30px,3vw,44px) var(--pad-x); border-top:1px solid var(--line-soft); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } /* ---------- sticky mobile CTA ---------- */ .sticky{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; align-items:center; gap:16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(9,8,8,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top:1px solid var(--line); transform: translateY(105%); transition: transform .45s cubic-bezier(.22,.68,.24,1); } .sticky.is-up{ transform:none; } .sticky__meta{ display:flex; flex-direction:column; gap:4px; min-width:0; } .sticky__meta b{ font-family: var(--f-display); font-weight:400; font-size:1rem; } .sticky__meta span{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } .sticky .cta{ margin-left:auto; padding:14px 20px; white-space:nowrap; flex:0 0 auto; } /* ---------- thank you ---------- */ .ty{ min-height:100svh; display:flex; flex-direction:column; background: var(--ink); } .ty__top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding: clamp(20px,2.6vw,34px) var(--pad-x); border-bottom:1px solid var(--line-soft); } .ty__body{ padding: clamp(50px,7vw,104px) var(--pad-x) clamp(60px,7vw,110px); } .ty__head{ max-width:1100px; display:flex; flex-direction:column; gap: clamp(18px,2vw,26px); } .ty__seal{ display:inline-flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-dim); } .ty__seal i{ width:26px; height:1px; background: var(--wine-lift); display:block; } .ty h1{ font-size: clamp(2.3rem, 5.4vw, 5.1rem); } .ty__sub{ margin:0; max-width:52ch; font-size: clamp(.98rem,1.1vw,1.08rem); line-height:1.66; color: rgba(239,233,225,.7); } .steps3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: clamp(44px,5.5vw,80px); border-top:1px solid var(--line); } .step{ display:flex; flex-direction:column; gap:12px; padding: clamp(24px,2.6vw,34px) clamp(22px,2.4vw,34px) clamp(24px,2.6vw,34px) 0; border-right:1px solid var(--line-soft); position:relative; } .step:last-child{ border-right:0; } .step::before{ content:""; position:absolute; left:0; top:-1px; width:38px; height:1px; background: var(--wine-lift); } .step__n{ font-size:10px; letter-spacing:.2em; color: var(--bone-dim); font-variant-numeric: tabular-nums; } .step__t{ font-family: var(--f-display); font-size: clamp(1.08rem,1.4vw,1.35rem); line-height:1.3; } .step__d{ margin:0; font-size:.9rem; line-height:1.6; color: rgba(239,233,225,.58); } .ty__grid{ display:grid; gap: clamp(34px,4.5vw,72px); grid-template-columns: minmax(0,1fr); margin-top: clamp(48px,6vw,88px); align-items:start; } .player{ position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-soft); background-image: linear-gradient(180deg, rgba(11,10,9,.35), rgba(11,10,9,.72)), var(--img-poster); background-size:cover; background-position:center; display:grid; place-items:center; cursor:pointer; } .player__btn{ width: clamp(58px,6vw,82px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(239,233,225,.45); display:grid; place-items:center; background: rgba(11,10,9,.28); transition: background .4s ease, border-color .4s ease, transform .4s ease; } .player:hover .player__btn{ background: var(--wine); border-color: var(--wine-lift); transform: scale(1.06); } .player__btn::after{ content:""; width:0; height:0; margin-left:4px; border-left:13px solid var(--bone); border-top:8px solid transparent; border-bottom:8px solid transparent; } .player__cap{ position:absolute; left:0; right:0; bottom:0; padding: clamp(16px,2vw,24px); font-size:.92rem; line-height:1.55; color: rgba(239,233,225,.86); background: linear-gradient(to top, rgba(11,10,9,.9), transparent); } .player__cap b{ font-weight:400; font-family: var(--f-display); } /* ---------- responsive ---------- */ @media (max-width: 1080px){ .calc, .close, .ty__grid{ grid-template-columns: minmax(0,1fr); } .team{ grid-template-columns: repeat(2, minmax(0,1fr)); } .reviews{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 860px){ .sticky{ display:flex; } .steps3{ grid-template-columns: minmax(0,1fr); } .step{ border-right:0; border-bottom:1px solid var(--line-soft); padding-right:0; } .step:last-child{ border-bottom:0; } .reviews{ grid-template-columns: minmax(0,1fr); gap:1px; } .decide{ padding: clamp(24px,6vw,34px); } .sub__head{ flex-direction:column; align-items:flex-start; gap:10px; } .faq__panel p{ padding-right:0; } /* zespół — przewijanie dotykiem zamiast siatki */ .team{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline: 0 calc(var(--pad-x) * -1); padding-inline: 0 var(--pad-x); scrollbar-width:none; } .team::-webkit-scrollbar{ display:none; } .member{ flex:0 0 62%; scroll-snap-align:start; } section.band{ padding-bottom: clamp(60px,9vw,90px); } #final-cta{ padding-bottom: clamp(80px,14vw,110px); } } @media (min-width: 861px){ .sticky{ display:none !important; } } @media (prefers-reduced-motion: reduce){ .sticky{ transition:none; } .faq__panel{ transition:none; } } /* ---------- galeria ---------- */ .gal__feature{ position:relative; margin-top: clamp(34px,4vw,56px); aspect-ratio: 21/9; overflow:hidden; border:1px solid var(--line-soft); } .gal__feature img{ width:100%; height:100%; object-fit:cover; display:block; } .gal__feature figcaption{ position:absolute; left:0; right:0; bottom:0; padding: clamp(18px,2.4vw,30px); background: linear-gradient(to top, rgba(11,10,9,.88), transparent); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: rgba(239,233,225,.9); } .filters{ display:flex; flex-wrap:wrap; align-items:baseline; gap: clamp(14px,2.2vw,28px); margin: clamp(30px,3.4vw,46px) 0 clamp(20px,2.4vw,28px); padding-bottom:16px; border-bottom:1px solid var(--line); } .filters .count{ margin-left:auto; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--bone-dim); font-variant-numeric: tabular-nums; } .gal{ columns: 3; column-gap: 14px; } .shot{ position:relative; break-inside:avoid; margin:0 0 14px; overflow:hidden; border:1px solid var(--line-soft); cursor:zoom-in; display:block; width:100%; background:none; padding:0; appearance:none; text-align:left; } .shot img{ width:100%; height:auto; display:block; transition: transform .7s cubic-bezier(.22,.68,.24,1), opacity .5s ease; } .shot:hover img{ transform: scale(1.035); } .shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background: linear-gradient(to top, rgba(11,10,9,.85), transparent); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: rgba(239,233,225,.86); opacity:0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; } .shot:hover figcaption, .shot:focus-visible figcaption{ opacity:1; transform:none; } .shot:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:2px; } /* ---------- galeria: pokaż więcej ---------- */ .gal__more{ display:flex; justify-content:center; margin-top: clamp(18px,2.4vw,30px); } .gal__more-btn{ display:inline-flex; align-items:center; gap:12px; appearance:none; cursor:pointer; padding:16px 30px; background:none; border:1px solid var(--line); font-family: var(--f-ui); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color: rgba(239,233,225,.86); transition: border-color .35s ease, color .35s ease, background .35s ease; } .gal__more-btn:hover{ border-color: rgba(239,233,225,.4); color: var(--bone); background: rgba(239,233,225,.03); } .gal__more-btn:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:3px; } .gal__more-n{ color: var(--bone-dim); font-variant-numeric: tabular-nums; } /* lightbox */ .lb{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background: rgba(7,6,6,.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lb__bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px clamp(16px,3vw,34px); border-bottom:1px solid var(--line-soft); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--bone-dim); } .lb__x{ appearance:none; background:none; border:0; cursor:pointer; color: var(--bone); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:6px 0; border-bottom:1px solid var(--wine-lift); } .lb__stage{ flex:1; position:relative; min-height:0; } .lb__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; padding: clamp(14px,2.4vw,34px); } .lb__nav{ display:flex; align-items:center; justify-content:center; gap:26px; padding: 14px clamp(16px,3vw,34px) calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); } .lb__btn{ appearance:none; background:none; cursor:pointer; border:1px solid var(--line); color: rgba(239,233,225,.8); padding:11px 22px; font-family: var(--f-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition: border-color .3s ease, color .3s ease; } .lb__btn:hover{ border-color: rgba(239,233,225,.4); color: var(--bone); } .lb__btn:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:2px; } .lb__cap{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } @media (max-width: 1080px){ .gal{ columns:2; } } @media (max-width: 860px){ .gal{ columns:2; column-gap:10px; } .shot{ margin-bottom:10px; } .shot figcaption{ opacity:1; transform:none; font-size:9px; padding:10px 11px; } .gal__feature{ aspect-ratio: 4/3; } .filters .count{ display:none; } } /* ============================================================ PHASE 3 — nawigacja, pasy zaufania, przed/po, proces, doradca, pakiety, wideo, stopka ============================================================ */ :root{ --nav-h: 70px; } @media (max-width: 860px){ :root{ --nav-h: 58px; } } /* ---------- nawigacja ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:50; height: var(--nav-h); display:flex; align-items:center; gap: clamp(16px,2.4vw,40px); padding-inline: var(--pad-x); border-bottom:1px solid transparent; transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease; } .nav.is-solid{ background: rgba(9,8,8,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line-soft); } .nav .wordmark{ font-size:19px; } .nav__menu{ display:flex; gap: clamp(14px,1.8vw,30px); margin-left: clamp(20px,4vw,64px); } .nav__menu a{ color: rgba(239,233,225,.72); text-decoration:none; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; padding:6px 0; position:relative; transition: color .3s ease; } .nav__menu a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--wine-lift); transform: scaleX(0); transform-origin:left; transition: transform .4s cubic-bezier(.22,.68,.24,1); } .nav__menu a:hover{ color: var(--bone); } .nav__menu a:hover::after{ transform: scaleX(1); } .nav__right{ margin-left:auto; display:flex; align-items:center; gap: clamp(14px,1.8vw,26px); } .nav__tel{ color: var(--bone); text-decoration:none; font-size:12.5px; letter-spacing:.1em; font-variant-numeric: tabular-nums; white-space:nowrap; } .nav__tel:hover{ color:#FFF9F1; } .nav .cta{ padding:12px 20px; font-size:11px; } .nav__burger{ display:none; appearance:none; background:none; border:0; cursor:pointer; color: var(--bone); font-family: var(--f-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:8px 0; } .nav__drawer{ position:fixed; inset: var(--nav-h) 0 auto 0; z-index:49; background: rgba(9,8,8,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom:1px solid var(--line); padding: 12px var(--pad-x) 26px; display:flex; flex-direction:column; } .nav__drawer a{ color: rgba(239,233,225,.85); text-decoration:none; font-family: var(--f-display); font-size:1.25rem; padding:15px 0; border-bottom:1px solid var(--line-soft); } .nav__drawer a:last-of-type{ border-bottom:0; } /* pasek wariantu w hero */ .topbar{ margin-top: var(--nav-h); } /* ---------- pas zaufania ---------- */ .trust{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-block:1px solid var(--line-soft); background: linear-gradient(180deg, #100E0D, var(--ink)); } .trust__i{ display:flex; flex-direction:column; gap:7px; align-items:center; text-align:center; padding: clamp(24px,2.8vw,38px) clamp(14px,2vw,26px); border-right:1px solid var(--line-soft); } .trust__i:last-child{ border-right:0; } .trust__n{ font-family: var(--f-display); font-size: clamp(1.25rem,1.9vw,1.72rem); font-variant-numeric: tabular-nums; } .trust__t{ font-size:10px; letter-spacing:.17em; text-transform:uppercase; color: var(--bone-dim); } /* ---------- momenty ---------- */ .moments{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.6vw,22px); margin-top: clamp(34px,4vw,54px); } .moment{ position:relative; overflow:hidden; border:1px solid var(--line-soft); } .moment img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition: transform .8s cubic-bezier(.22,.68,.24,1); } .moment:hover img{ transform: scale(1.04); } .moment figcaption{ position:absolute; left:0; right:0; bottom:0; padding: clamp(16px,1.8vw,22px); background: linear-gradient(to top, rgba(11,10,9,.92), rgba(11,10,9,.2) 70%, transparent); } .moment b{ display:block; font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; } .moment span{ display:block; margin-top:7px; font-size:.86rem; line-height:1.5; color: rgba(239,233,225,.62); } /* ---------- przed / po ---------- */ .ba{ margin-top: clamp(34px,4vw,54px); } .ba__stage{ position:relative; aspect-ratio:4/5; overflow:hidden; width:100%; max-width:620px; margin-inline:auto; border:1px solid var(--line-soft); user-select:none; touch-action: pan-y; } .ba__layer{ position:absolute; inset:0; background-size:cover; background-position:center; } .ba__after{ clip-path: inset(0 0 0 var(--split, 50%)); } .ba__raw{ background-image: linear-gradient(180deg, rgba(11,10,9,.16), rgba(11,10,9,.34)), var(--img-przed); background-size: cover; background-position: 50% 50%; } .ba__tag{ position:absolute; top: clamp(12px,1.6vw,20px); padding:9px 14px; background: rgba(9,8,8,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border:1px solid var(--line); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; z-index:3; } .ba__tag b{ display:block; font-weight:400; font-size:11px; letter-spacing:.14em; margin-bottom:4px; color: var(--bone); } .ba__tag span{ color: var(--bone-dim); } .ba__tag--l{ left: clamp(12px,1.6vw,20px); } .ba__tag--r{ right: clamp(12px,1.6vw,20px); text-align:right; } .ba__stage{ cursor: ew-resize; } .ba__handle{ position:absolute; top:0; bottom:0; left: var(--split, 50%); width:1px; padding:0; border:0; appearance:none; background: rgba(239,233,225,.8); z-index:5; cursor: ew-resize; transform: translateX(-.5px); } .ba__handle:focus-visible{ outline:none; } .ba__handle:focus-visible .ba__knob{ border-color: var(--wine-lift); background: rgba(110,28,47,.55); } .ba__knob{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(239,233,225,.75); background: rgba(11,10,9,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s ease, transform .3s ease; } .ba__handle:hover .ba__knob{ background: rgba(11,10,9,.72); transform: translate(-50%,-50%) scale(1.06); } .ba__knob i{ width:6px; height:6px; border-top:1px solid var(--bone); border-right:1px solid var(--bone); } .ba__knob i:first-child{ transform: rotate(-135deg); } .ba__knob i:last-child{ transform: rotate(45deg); } .ba__hint{ position:absolute; left:50%; bottom: clamp(14px,2vw,22px); transform: translateX(-50%); z-index:4; padding:7px 14px; white-space:nowrap; background: rgba(9,8,8,.7); border:1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color: rgba(239,233,225,.85); transition: opacity .5s ease; } .ba__hint.is-off{ opacity:0; pointer-events:none; } .ba__stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); border:1px solid var(--line-soft); border-top:0; } .ba__stats div{ padding: clamp(16px,1.8vw,22px); border-right:1px solid var(--line-soft); display:flex; flex-direction:column; gap:6px; } .ba__stats div:last-child{ border-right:0; } .ba__stats b{ font-family: var(--f-display); font-weight:400; font-size: clamp(1.1rem,1.5vw,1.35rem); font-variant-numeric: tabular-nums; } .ba__stats span{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } /* ---------- proces ---------- */ .proces{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top:1px solid var(--line); margin-top: clamp(34px,4vw,54px); } .krok{ position:relative; display:flex; flex-direction:column; gap:12px; padding: clamp(24px,2.6vw,34px) clamp(18px,2vw,28px) clamp(24px,2.6vw,34px) 0; border-right:1px solid var(--line-soft); } .krok:last-child{ border-right:0; } .krok::before{ content:""; position:absolute; left:0; top:-1px; width:34px; height:1px; background: var(--wine-lift); } .krok__n{ font-family: var(--f-display); font-size: clamp(1.5rem,2vw,1.9rem); color: rgba(239,233,225,.28); font-variant-numeric: tabular-nums; } .krok__t{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; } .krok__d{ margin:0; font-size:.88rem; line-height:1.6; color: rgba(239,233,225,.58); } /* ---------- doradca + wideo ---------- */ .aside2{ display:grid; gap: clamp(28px,3.4vw,56px); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:start; } .advisor{ display:flex; flex-direction:column; gap: clamp(20px,2.4vw,28px); padding: clamp(28px,3.2vw,44px); border:1px solid var(--line); background: linear-gradient(168deg, #141110 0%, #0C0B0A 100%); } .advisor__list{ display:flex; flex-direction:column; } .advisor__row{ display:flex; align-items:baseline; gap:18px; padding:16px 0; border-top:1px solid var(--line-soft); } .advisor__row b{ font-family: var(--f-display); font-weight:400; font-size:1.12rem; min-width:88px; font-variant-numeric: tabular-nums; } .advisor__row span{ font-size:.9rem; line-height:1.55; color: rgba(239,233,225,.62); } /* ---------- pakiety ---------- */ .packs3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1px; background: var(--line-soft); border:1px solid var(--line-soft); margin-top: clamp(28px,3vw,42px); } .pack{ background: var(--ink); display:flex; flex-direction:column; gap:16px; align-items:stretch; padding: clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(22px,2.4vw,30px); text-align:left; position:relative; border:0; cursor:pointer; color: var(--bone-dim); font-family: var(--f-ui); transition: background .4s ease, color .35s ease; } .pack::before{ right:0; } .pack[aria-pressed="true"]{ background: linear-gradient(170deg,#151211,#0C0B0A); color: var(--bone); } .pack__badge{ position:absolute; top:0; right:0; background: var(--wine); color:#F7F2EC; font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px; } .pack__name{ font-family: var(--f-display); font-size: clamp(1.15rem,1.5vw,1.4rem); letter-spacing:.02em; text-transform:none; color: var(--bone); } .pack__price{ font-size:12px; letter-spacing:.12em; color: var(--bone-dim); font-variant-numeric: tabular-nums; } .pack__price em{ font-style:normal; font-family: var(--f-display); font-size:1.3rem; color: var(--bone); letter-spacing:0; } .pack__d{ margin:0; font-size:.88rem; line-height:1.6; color: rgba(239,233,225,.6); } .pack__feats{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; } .pack__feats li{ font-size:.85rem; color: rgba(239,233,225,.72); display:flex; gap:11px; } .pack__feats li::before{ content:""; flex:0 0 3px; width:3px; height:3px; margin-top:8px; border-radius:50%; background: var(--wine-lift); } .pack__pick{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } .pack[aria-pressed="true"] .pack__pick{ color: var(--bone); } .ticks{ display:flex; justify-content:space-between; margin-top:-4px; } .ticks span{ font-size:9.5px; letter-spacing:.12em; color: rgba(239,233,225,.4); font-variant-numeric: tabular-nums; } /* ---------- karta wideo ---------- */ .videocard{ display:flex; flex-direction:column; gap: clamp(18px,2vw,24px); } /* ---------- opinie jako lista ---------- */ .reviews{ display:flex; flex-direction:column; gap:0; background:none; border-block:0; border-top:1px solid var(--line); } .review{ background:none; border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns: 1fr auto; align-items:start; gap:8px 20px; padding: clamp(18px,2vw,24px) 0; } .review .stars{ display:none; } .review__q{ grid-column:1; font-size: clamp(.95rem,1.08vw,1.05rem); } .review__who{ grid-column:1; margin-top:0; } .review__g{ grid-column:2; grid-row:1 / span 2; width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-family: var(--f-display); font-size:13px; color: var(--bone-dim); } .rating{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 16px; padding-bottom:16px; } .rating__n{ font-family: var(--f-display); font-size:1.5rem; font-variant-numeric: tabular-nums; } .rating svg{ width:74px; height:13px; } .rating span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } /* ---------- stopka ---------- */ .foot{ display:grid; gap: clamp(26px,3vw,48px); grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr); align-items:start; padding: clamp(44px,5vw,72px) var(--pad-x) clamp(30px,3vw,44px); text-transform:none; letter-spacing:0; font-size:inherit; } .foot__col{ display:flex; flex-direction:column; gap:12px; } .foot__col h4{ margin:0 0 6px; font-family: var(--f-ui); font-weight:400; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-dim); } .foot a{ color: rgba(239,233,225,.78); text-decoration:none; font-size:.9rem; } .foot a:hover{ color: var(--bone); } .foot p{ margin:0; font-size:.88rem; line-height:1.65; color: rgba(239,233,225,.55); max-width:38ch; } .foot__social{ display:flex; gap:10px; margin-top:2px; } .foot__social a{ display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(239,233,225,.24); color: rgba(239,233,225,.78); transition: border-color .3s ease, color .3s ease, background .3s ease; } .foot__social a:hover{ border-color: rgba(239,233,225,.46); color: var(--bone); background: rgba(239,233,225,.06); } .foot__social a:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:3px; } .foot__social svg{ width:18px; height:18px; fill:currentColor; display:block; } .foot__bar{ grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; padding-top: clamp(20px,2.4vw,28px); border-top:1px solid var(--line-soft); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } /* sticky: telefon obok CTA */ .sticky__tel{ display:flex; align-items:center; gap:8px; flex:0 0 auto; height:46px; padding:0 14px; white-space:nowrap; border:1px solid rgba(239,233,225,.32); background: rgba(239,233,225,.06); color: var(--bone); text-decoration:none; font-family: var(--f-ui); font-size:14px; font-weight:500; letter-spacing:.02em; font-variant-numeric: tabular-nums; } .sticky__tel i{ font-style:normal; font-size:15px; line-height:1; } .sticky__tel:hover{ border-color: rgba(239,233,225,.5); background: rgba(239,233,225,.1); } /* ---------- responsive ---------- */ @media (max-width: 1180px){ .nav__menu{ display:none; } .nav__burger{ display:block; } } @media (max-width: 1080px){ .aside2{ grid-template-columns: minmax(0,1fr); } .packs3{ grid-template-columns: minmax(0,1fr); } .proces{ grid-template-columns: repeat(2, minmax(0,1fr)); } .krok{ padding-right: clamp(14px,2vw,22px); border-bottom:1px solid var(--line-soft); } } @media (max-width: 860px){ .nav .cta{ display:none; } .nav__tel{ font-size:12px; } .trust{ grid-template-columns: repeat(2, minmax(0,1fr)); } .trust__i:nth-child(2n){ border-right:0; } .trust__i:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); } .moments{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:0 calc(var(--pad-x) * -1); padding-inline:0 var(--pad-x); scrollbar-width:none; } .moments::-webkit-scrollbar{ display:none; } .moment{ flex:0 0 78%; scroll-snap-align:start; } .ba__stage{ aspect-ratio: 4/3; } .ba__stats{ grid-template-columns: minmax(0,1fr); } .ba__stats div{ border-right:0; border-bottom:1px solid var(--line-soft); } .ba__stats div:last-child{ border-bottom:0; } .proces{ grid-template-columns: minmax(0,1fr); } .krok{ padding-right:0; } .foot{ grid-template-columns: minmax(0,1fr); } .review{ grid-template-columns: 1fr auto; } } #ba-after{ background-image: var(--img-po); } html{ scroll-behavior: smooth; } section[id], footer[id], div[id="realizacje"]{ scroll-margin-top: calc(var(--nav-h) + 12px); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } @media (max-width: 1180px){ .nav .wordmark small{ display:none; } } @media (max-width: 860px){ .topbar{ padding-block: 10px; } .media{ height: 46svh; } .panel{ margin-top: 24svh; } } /* ---------- zespół: zdjęcie grupowe ---------- */ .crew{ display:grid; gap: clamp(26px,3.4vw,64px); grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items:center; } .crew__photo{ margin:0; overflow:hidden; border:1px solid var(--line-soft); position:relative; } .crew__photo img{ width:100%; display:block; aspect-ratio:1/1; object-fit:cover; object-position:50% 34%; } .crew__photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to top, rgba(11,10,9,.5), rgba(11,10,9,0) 42%); } .crew__side{ display:flex; flex-direction:column; gap: clamp(14px,1.8vw,20px); } .crew__list{ display:flex; flex-direction:column; margin-top: clamp(6px,1vw,12px); } .crew__row{ display:flex; flex-direction:column; gap:6px; padding: 15px 0; border-top:1px solid var(--line-soft); } .crew__row b{ font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; } .crew__row span{ font-size:.9rem; line-height:1.55; color: rgba(239,233,225,.6); } @media (max-width: 1080px){ .crew{ grid-template-columns: minmax(0,1fr); } .crew__photo img{ aspect-ratio:16/10; object-position:50% 30%; } } /* ---------- lead magnet: checklista ---------- */ .magnet{ display:grid; gap: clamp(30px,4vw,80px); grid-template-columns: minmax(0,1fr) minmax(0,.92fr); align-items:center; } .magnet__side{ display:flex; flex-direction:column; gap: clamp(16px,1.9vw,24px); align-items:flex-start; } .magnet__meta{ display:flex; flex-wrap:wrap; gap:10px 18px; font-size:10px; letter-spacing:.17em; text-transform:uppercase; color: var(--bone-dim); } .magnet__meta span{ display:flex; align-items:center; gap:10px; } .magnet__meta span:not(:last-child)::after{ content:""; width:3px; height:3px; border-radius:50%; background: var(--wine-lift); } .form{ display:flex; flex-direction:column; gap:16px; width:100%; max-width:460px; } .form__row{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; } .form__field{ flex:1 1 220px; display:flex; flex-direction:column; gap:9px; } .form__field label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(239,233,225,.74); } .form__field input{ appearance:none; border:1px solid rgba(239,233,225,.26); background: rgba(239,233,225,.07); color: var(--bone); font-family: var(--f-ui); font-size:1rem; font-weight:400; padding:13px 14px; transition: border-color .35s ease, background .35s ease; } .form__field input::placeholder{ color: rgba(239,233,225,.46); } .form__field input:focus{ outline:none; border-color: var(--wine-lift); background: rgba(239,233,225,.11); } .form .cta{ flex:0 0 auto; } .form__note{ margin:0; font-size:.78rem; line-height:1.6; color: rgba(239,233,225,.6); max-width:44ch; } .form__zgoda{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:.82rem; line-height:1.6; color: rgba(239,233,225,.8); max-width:44ch; } .form__zgoda input{ appearance:none; flex:0 0 auto; margin-top:3px; width:18px; height:18px; border:1px solid rgba(239,233,225,.4); background: rgba(239,233,225,.07); cursor:pointer; transition: border-color .3s ease, background .3s ease; } .form__zgoda input:checked{ background: var(--wine); border-color: var(--wine); } .form__zgoda input:checked::after{ content:""; display:block; margin:4px 0 0 6px; width:4px; height:8px; border:solid #F7F2EC; border-width:0 1.5px 1.5px 0; transform: rotate(45deg); } .form__zgoda input:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:3px; } .form__zgoda:hover{ color: rgba(239,233,225,.78); } .form__ok{ display:flex; flex-direction:column; gap:10px; padding: clamp(18px,2vw,24px); border:1px solid var(--line); background: rgba(150,38,60,.07); } .form__ok b{ font-family: var(--f-display); font-weight:400; font-size:1.15rem; } .form__ok span{ font-size:.9rem; line-height:1.6; color: rgba(239,233,225,.66); } /* podgląd checklisty */ .sheet{ position:relative; overflow:hidden; border:1px solid var(--line); background: linear-gradient(168deg, #151211 0%, #0C0B0A 100%); padding: clamp(24px,2.8vw,38px) clamp(22px,2.4vw,34px) 0; } .sheet__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); } .sheet__top b{ font-family: var(--f-display); font-weight:400; font-size: clamp(1.05rem,1.35vw,1.24rem); } .sheet__top span{ font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color: var(--bone-dim); } .sheet__group{ margin-top:20px; margin-bottom:10px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-dim); } .sheet__row{ display:flex; gap:14px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line-soft); } .sheet__box{ flex:0 0 12px; width:12px; height:12px; margin-top:3px; border:1px solid rgba(239,233,225,.35); } .sheet__row p{ margin:0; font-size:.9rem; line-height:1.5; color: rgba(239,233,225,.78); } .sheet__fade{ position:relative; margin-top:6px; padding: 26px 0 clamp(24px,2.8vw,34px); text-align:center; font-size:10px; letter-spacing:.17em; text-transform:uppercase; color: var(--bone-dim); } .sheet__fade::before{ content:""; position:absolute; left:0; right:0; top:-60px; height:60px; background: linear-gradient(to top, #100E0D, transparent); pointer-events:none; } @media (max-width: 1080px){ .magnet{ grid-template-columns: minmax(0,1fr); } } /* ---------- zestawienie przed / po (dwa kadry) ---------- */ .pair{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1px; background: var(--wine); border:1px solid var(--line-soft); } .pair__side{ position:relative; margin:0; overflow:hidden; background: var(--ink); } .pair__side img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition: transform .9s cubic-bezier(.22,.68,.24,1); } .pair__side:hover img{ transform: scale(1.03); } .pair__side::after{ content:""; position:absolute; inset:auto 0 0 0; height:62%; background: linear-gradient(to top, rgba(11,10,9,.94), rgba(11,10,9,.25) 55%, transparent); pointer-events:none; } .pair__side figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: clamp(20px,2.4vw,30px); } .pair__side figcaption b{ display:block; font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; } .pair__side:first-child figcaption b{ color: var(--bone-dim); } .pair__side figcaption span{ display:block; margin-top:10px; max-width:34ch; font-family: var(--f-display); font-size: clamp(.98rem,1.2vw,1.16rem); line-height:1.45; color: rgba(239,233,225,.9); } .pair__side:first-child figcaption::before{ content:""; position:absolute; left: clamp(20px,2.4vw,30px); top:0; width:26px; height:1px; background: rgba(239,233,225,.4); } .pair__side:last-child figcaption::before{ content:""; position:absolute; left: clamp(20px,2.4vw,30px); top:0; width:26px; height:1px; background: var(--wine-lift); } @media (max-width: 860px){ .pair{ grid-template-columns: minmax(0,1fr); } .pair__side img{ aspect-ratio:4/5; } } /* ---------- układ sekcji metamorfozy ---------- */ .ba{ display:grid; grid-template-columns: minmax(0,.82fr) minmax(0,1fr); gap: clamp(28px,4vw,76px); align-items:center; } .ba__side{ display:flex; flex-direction:column; gap: clamp(20px,2.4vw,30px); align-items:flex-start; } .ba__intro{ margin:0; max-width:34ch; font-family: var(--f-display); font-size: clamp(1.08rem,1.5vw,1.42rem); line-height:1.45; color: rgba(239,233,225,.9); } .ba__facts{ display:flex; flex-direction:column; width:100%; border-top:1px solid var(--line); } .ba__facts div{ display:flex; align-items:baseline; gap:18px; padding:14px 0; border-bottom:1px solid var(--line-soft); } .ba__facts b{ font-family: var(--f-display); font-weight:400; font-size: clamp(1.05rem,1.4vw,1.3rem); min-width:118px; font-variant-numeric: tabular-nums; } .ba__facts span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-dim); } @media (max-width: 1080px){ .ba{ grid-template-columns: minmax(0,1fr); } .ba__stage{ margin-inline:0; } } /* węższe telefony: pasek dolny bez opisu ceny, sam telefon + CTA */ @media (max-width: 620px){ .sticky__meta{ display:none; } .sticky .cta{ flex:1 1 auto; margin-left:0; } } .sticky__meta b, .sticky__meta span{ white-space:nowrap; } /* ============================================================ POPRAWKI MOBILNE ============================================================ */ /* podpisy na zdjęciach — mocniejszy cień pod tekstem */ .gal__feature figcaption{ padding-top: 62px; background: linear-gradient(to top, rgba(11,10,9,.95) 0%, rgba(11,10,9,.78) 42%, transparent 100%); } @media (max-width: 1080px){ /* w metamorfozie najpierw obraz, potem opis */ .ba{ display:flex; flex-direction:column; gap: clamp(22px,4vw,32px); } .ba__stage{ order:-1; } .ba__side{ order:1; width:100%; } } @media (max-width: 860px){ /* momenty: podpis pod zdjęciem zamiast na nim */ .moment{ flex:0 0 80%; display:flex; flex-direction:column; border:0; overflow:visible; } .moment img{ aspect-ratio:4/5; border:1px solid var(--line-soft); } .moment figcaption{ position:static; background:none; padding:14px 0 0; } .moment b{ font-size:10.5px; } .moment span{ margin-top:6px; color: rgba(239,233,225,.58); } /* galeria: czytelniejsze podpisy na kaflach */ .shot figcaption{ padding: 30px 11px 10px; background: linear-gradient(to top, rgba(11,10,9,.94) 0%, rgba(11,10,9,.6) 55%, transparent 100%); } .gal__feature{ aspect-ratio: 3/4; } .gal__feature figcaption{ padding-top: 80px; font-size:10px; } /* notki i etykiety nie łamią się na trzy linie */ .note{ letter-spacing:.1em; font-size:9.5px; } .ba__intro{ font-size: clamp(1rem,4.4vw,1.14rem); } /* suwak przed/po: pionowy kadr także na telefonie */ .ba__stage{ aspect-ratio: 4/5; } .ba__tag{ padding:7px 10px; font-size:8.5px; } .ba__tag b{ font-size:9.5px; margin-bottom:3px; } .ba__knob{ width:44px; height:44px; } } /* kropki karuzeli momentów — tylko na telefonie */ .moments__dots{ display:none; } @media (max-width: 860px){ .moments__dots{ display:flex; gap:8px; margin-top:20px; } .moments__dots i{ width:18px; height:1px; background: rgba(239,233,225,.26); transition: background .4s ease, width .4s ease; } .moments__dots i.on{ background: var(--wine-lift); width:30px; } } /* ---------- pakiety ze zdjęciami ---------- */ .packs3 .pack{ padding:0; gap:0; align-items:stretch; overflow:hidden; } .pack__img{ display:block; position:relative; overflow:hidden; } .pack__img img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; filter: grayscale(.4) brightness(.58) contrast(1.02); transform: scale(1.01); transition: filter .55s ease, transform .8s cubic-bezier(.22,.68,.24,1); } .pack__img::after{ content:""; position:absolute; inset:auto 0 0 0; height:52%; background: linear-gradient(to top, var(--ink), transparent); pointer-events:none; } .pack:hover .pack__img img{ filter: grayscale(.15) brightness(.74); transform: scale(1.04); } .pack[aria-pressed="true"] .pack__img img{ filter: none; transform: scale(1.02); } .pack__body{ display:flex; flex-direction:column; gap:15px; flex:1; padding: clamp(20px,2.2vw,26px) clamp(20px,2.2vw,30px) clamp(22px,2.4vw,30px); margin-top: -14px; } .pack__badge{ z-index:2; } @media (max-width: 1080px){ .pack__img img{ aspect-ratio:21/9; } } /* ---------- proces ze zdjęciami ---------- */ .proces{ gap: clamp(14px,1.6vw,22px); border-top:0; } .krok{ border-right:0; padding: 0 0 clamp(18px,2vw,24px); gap:10px; } .krok::before{ display:none; } .krok__img{ display:block; position:relative; overflow:hidden; border:1px solid var(--line-soft); margin-bottom:8px; } .krok__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter: brightness(.86) contrast(1.02); transition: filter .5s ease, transform .8s cubic-bezier(.22,.68,.24,1); } .krok:hover .krok__img img{ filter:none; transform: scale(1.04); } .krok__img--pusty{ aspect-ratio:4/3; display:grid; place-items:center; background: radial-gradient(115% 85% at 30% 0%, rgba(239,233,225,.07), transparent 62%), linear-gradient(158deg, #171413 0%, #0D0C0B 100%); } .krok__img--pusty b{ font-family: var(--f-display); font-weight:400; font-size: clamp(2rem,3vw,2.8rem); color: rgba(239,233,225,.13); } .krok__n{ font-size:10px; letter-spacing:.2em; color: var(--bone-dim); font-family: var(--f-ui); } .krok__t{ font-size:11.5px; } .krok::after{ content:""; display:block; width:26px; height:1px; background: var(--wine-lift); margin-top:4px; order:-1; } @media (max-width: 1080px){ .krok{ border-bottom:0; padding-right:0; } } @media (max-width: 860px){ /* punkty procesu jeden pod drugim — bez przewijania w bok */ .proces{ display:grid; grid-template-columns: minmax(0,1fr); gap: clamp(26px,6vw,34px); margin-inline:0; padding-inline:0; } .krok{ padding-bottom:0; } .krok:not(:last-child){ border-bottom:1px solid var(--line-soft); padding-bottom: clamp(24px,5vw,30px); } } /* ---------- logo ---------- */ .wordmark{ text-decoration:none; color: inherit; align-items:center; } .wordmark__img{ display:block; height:23px; width:auto; transition: opacity .3s ease; } .nav .wordmark__img{ height:21px; } .wordmark--foot .wordmark__img{ height:30px; } .ty .wordmark__img{ height:23px; } a.wordmark:hover .wordmark__img{ opacity:.82; } a.wordmark:focus-visible{ outline:1px solid var(--wine-lift); outline-offset:6px; } @media (max-width: 860px){ .nav .wordmark__img{ height:19px; } .wordmark--foot .wordmark__img{ height:26px; } } /* ---------- galeria: kadr otwierający obok nagłówka ---------- */ .gal__lead{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr); gap: clamp(28px,4vw,72px); align-items:end; } .gal__lead .band__head{ max-width:none; } .gal__feature{ margin:0; position:relative; overflow:hidden; aspect-ratio: 4/3; border:1px solid var(--line-soft); max-width:620px; width:100%; margin-left:auto; } .gal__feature img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width: 1080px){ .gal__lead{ grid-template-columns: minmax(0,1fr); } .gal__feature{ margin-left:0; max-width:none; aspect-ratio: 16/11; } } @media (max-width: 860px){ .gal__feature{ aspect-ratio: 4/3; } } /* ---------- opinia z wypunktowaniem ---------- */ .review__pts{ grid-column:1; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; } .review__pts li{ font-size:.92rem; line-height:1.6; color: rgba(239,233,225,.66); padding-left:16px; position:relative; } .review__pts li::before{ content:""; position:absolute; left:0; top:9px; width:3px; height:3px; border-radius:50%; background: var(--wine-lift); } .review__pts b{ font-weight:400; color: var(--bone); font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-right:9px; } .review{ gap:14px 20px; } /* opinie: komfortowa długość wiersza */ .review__q, .review__pts{ max-width: 72ch; } /* ---------- formularz wyceny (modal) ---------- */ .modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding: clamp(14px,3vw,40px); } .modal__bg{ position:absolute; inset:0; background: rgba(7,6,6,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .35s both; } .modal__panel{ position:relative; z-index:1; width:100%; max-width:620px; max-height: calc(100svh - clamp(28px,6vw,80px)); overflow-y:auto; padding: clamp(26px,3.4vw,44px); background: linear-gradient(168deg, #151211 0%, #0C0B0A 100%); border:1px solid var(--line); display:flex; flex-direction:column; gap:14px; animation: rise .45s cubic-bezier(.2,.75,.25,1) both; } .modal__x{ position:absolute; top: clamp(18px,2.2vw,26px); right: clamp(18px,2.2vw,26px); appearance:none; background:none; border:0; cursor:pointer; color: var(--bone-dim); font-family: var(--f-ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:6px 0; border-bottom:1px solid var(--wine-lift); transition: color .3s ease; } .modal__x:hover{ color: var(--bone); } .modal__panel h2{ font-size: clamp(1.35rem,2.1vw,1.85rem); max-width:22ch; } .modal__lede{ margin:0; font-size:.94rem; line-height:1.65; color: rgba(239,233,225,.62); max-width:46ch; } .modal__conf b{ color: var(--bone); font-weight:400; } .modal__form{ display:flex; flex-direction:column; gap:18px; margin-top:8px; } .field2{ display:flex; flex-direction:column; gap:8px; min-width:0; } .field2__row .field2{ flex:1 1 200px; } .field2__row{ display:flex; flex-wrap:wrap; gap:18px; } .field2 label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: rgba(239,233,225,.74); } .field2 input{ appearance:none; border:1px solid rgba(239,233,225,.26); background: rgba(239,233,225,.07); color: var(--bone); font-family: var(--f-ui); font-size:1rem; font-weight:400; padding:13px 14px; width:100%; transition: border-color .3s ease, background .3s ease; } .field2 input::placeholder{ color: rgba(239,233,225,.46); } .field2 input:focus{ outline:none; border-color: var(--wine-lift); background: rgba(239,233,225,.11); } .field2 input[aria-invalid="true"]{ border-color: #96263C; } .modal__err{ margin:0; font-size:.86rem; line-height:1.5; color:#D98394; } @media (max-width: 560px){ .field2__row{ flex-direction:column; gap:18px; } .field2__row .field2{ flex:0 0 auto; } .modal__panel h2{ font-size:1.3rem; padding-right:74px; } .modal__lede{ font-size:.9rem; } } /* pułapka na boty — niewidoczna dla ludzi, widoczna dla czytników jako pole opcjonalne */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .cta[aria-busy="true"]{ opacity:.72; pointer-events:none; } /* ---------- galeria: slider na telefonie ---------- */ .gal__swipe{ display:none; } @media (max-width: 860px){ .gal{ display:flex; columns:auto; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline: 0 calc(var(--pad-x) * -1); padding-inline: 0 var(--pad-x); scrollbar-width:none; } .gal::-webkit-scrollbar{ display:none; } .shot{ flex:0 0 76%; margin:0; scroll-snap-align:start; display:flex; flex-direction:column; } .shot img{ aspect-ratio:4/5; object-fit:cover; height:auto; } .shot figcaption{ padding: 34px 12px 11px; background: linear-gradient(to top, rgba(11,10,9,.94) 0%, rgba(11,10,9,.55) 58%, transparent 100%); } .gal__more{ margin-top:16px; } .gal__more-btn{ width:100%; justify-content:center; padding:15px 20px; font-size:11px; } .filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .filters::-webkit-scrollbar{ display:none; } .gal__swipe{ display:block; margin-left:auto; white-space:nowrap; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color: rgba(239,233,225,.4); } } /* ---------- klauzula RODO pod formularzami (spójna ze stroną główną) ---------- */ .form__zgoda--rodo{ max-width:none; font-size:.72rem; line-height:1.55; color: rgba(239,233,225,.62); align-items:flex-start; gap:10px; } .form__zgoda--rodo input{ width:16px; height:16px; margin-top:2px; } .form__zgoda--rodo input:checked::after{ margin:3px 0 0 5px; } .form__zgoda--rodo a{ color: inherit; text-decoration: underline; text-underline-offset:2px; } .cta[aria-busy="true"]{ opacity:.72; pointer-events:none; } .cta:disabled{ opacity:.45; cursor:not-allowed; background: rgba(150,38,60,.35); color: rgba(247,242,236,.55); border-color: rgba(255,255,255,.04); } .cta:disabled:hover{ background: rgba(150,38,60,.35); animation:none; }