/* ============================================================ design3 — system wizualny Magdaleny Owens Czarna próżnia, jeden fiolet, konstelacja trójkątów. Rodowód: Dala. ZAKAZY (nienegocjowalne): 1. Tło inne niż #000000 nie istnieje. 2. Zero border, zero box-shadow, zero backdrop-filter. 3. Nagłówki mają wagę 400. Zawsze. 4. Tekst ciągły ma wagę 200. 5. Burgund to kolor przycisku, nie płaszczyzna. ============================================================ */ /* Pobieramy WYŁĄCZNIE wybrany zestaw B. Wcześniej ten wiersz ściągał dziesięć rodzin, czyli dziewięć niepotrzebnych — na telefonie w słabym zasięgu to kilkaset kilobajtów za nic. Chcesz obejrzeć inny zestaw? Podmień ten adres na poniższy, który ściąga wszystkie, i ustaw data-czcionki na : https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600&family=Fraunces:opsz,wght@9..144,300..700&family=Manrope:wght@300..700&family=Playfair+Display:wght@400..700&family=Source+Sans+3:wght@300..600&family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300..600&family=Instrument+Serif&family=DM+Sans:opsz,wght@9..40,300..700&family=Bricolage+Grotesque:opsz,wght@12..96,300..800&display=swap */ /* Arkusz fontów wczytują teraz w każdej podstrony. @import kazał przeglądarce najpierw pobrać ten plik, a dopiero z niego odkryć adres Google Fonts — jeden krok opóźnienia przed pierwszą literą. Adres do skopiowania, gdyby trzeba było go zmienić: https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..700&family=Source+Sans+3:wght@300..600&display=swap */ :root { /* --- kolory (7, paleta zamknięta) --- */ --void: #000000; /* KAŻDE tło */ --bone: #FFFFFF; /* nagłówki, tekst, ikony */ --ash: #9A9A9A; /* nawigacja nieaktywna, linki-widma — 7,5:1 */ --mist: #BDBDBD; /* tekst wspierający — 11,2:1 */ /* Burgund pobrany z marynarki Magdy ze zdjęcia „praca": odcień 358 stopni, nasycenie 0,78. Tkanina na zdjęciu jest niedoświetlona (V=0,26), więc do ekranu otwieramy ją o dwa stopnie — inaczej pigułka przycisku ginie na czerni. */ --burgund: #8A1E1D; /* WYŁĄCZNIE tło przycisku + znak logo */ --burgund-hi: #A32423; /* hover przycisku */ --saffron: #FFB829; /* nadtytuły, wyróżnienia, linki — 12,1:1 */ --zloto: #FFB829; /* drugi stop gradientu w logo — ten sam co --saffron */ /* --- typografia --- Dwa kroje: jeden do nagłówków, drugi do tekstu. Zestaw wybiera się atrybutem data-czcionki na , a wszystkie stopnie mnożą się przez --skala-typo, bo szeryfy mają inną wielkość optyczną niż bezszeryfowe i przy tym samym rozmiarze wyglądają mniejsze. */ /* Wybór Magdaleny: zestaw B — Playfair Display w nagłówkach, Source Sans 3 w tekście. Pozostałe zestawy zostają w pliku i włącza się je atrybutem data-czcionki na . */ --font-naglowki: 'Playfair Display', Georgia, serif; --font-tekst: 'Source Sans 3', system-ui, -apple-system, sans-serif; --font: var(--font-tekst); /* zgodność ze starszymi regułami */ --skala-typo: 1; /* Waga tekstu ciągłego NIE jest już stała. Inter przy 200 był elegancki, ale Manrope czy Jost przy 200 są nieczytelne, a stronę czytają kobiety 40+ na telefonie. Każdy zestaw ustawia swoją. */ --w-light: 300; --w-reg: 400; --w-semi: 600; --fs-display: calc(113px * var(--skala-typo)); --fs-h-lg: calc(78px * var(--skala-typo)); --fs-h: calc(48px * var(--skala-typo)); --fs-h-sm: calc(42px * var(--skala-typo)); --fs-sub: calc(36px * var(--skala-typo)); --fs-h-xs: calc(27px * var(--skala-typo)); --fs-h-2xs: calc(24px * var(--skala-typo)); --fs-body: 18px; --fs-small: 15px; --fs-nav: 14px; --fs-caption: 12px; --s-1: 6px; --s-2: 12px; --s-3: 18px; --s-4: 24px; --s-5: 30px; --s-6: 36px; --s-10: 60px; --s-16: 96px; --s-20: 120px; --container: 1280px; --measure: 480px; --section: 120px; --r: 24px; --r-pill: 22.5px; --ease: cubic-bezier(.22, 1, .36, 1); --dur: 200ms; --dur-reveal: 600ms; } /* ---------- PIĘĆ ZESTAWÓW CZCIONEK ---------- Nagłówki i tekst z osobnych rodzin. Skala i waga dobrane osobno dla każdego zestawu, bo Cormorant przy 113 px wygląda o klasę mniej niż Bricolage przy tym samym rozmiarze. */ [data-czcionki="a"] { --font-naglowki:'Fraunces',Georgia,serif; --font-tekst:'Manrope',system-ui,sans-serif; --skala-typo:.94; --w-light:300; } [data-czcionki="b"] { --font-naglowki:'Playfair Display',Georgia,serif; --font-tekst:'Source Sans 3',system-ui,sans-serif;--skala-typo:1; --w-light:300; } [data-czcionki="c"] { --font-naglowki:'Cormorant Garamond',Georgia,serif; --font-tekst:'Jost',system-ui,sans-serif; --skala-typo:1.2; --w-light:300; } [data-czcionki="d"] { --font-naglowki:'Instrument Serif',Georgia,serif; --font-tekst:'DM Sans',system-ui,sans-serif; --skala-typo:1.1; --w-light:300; } [data-czcionki="e"] { --font-naglowki:'Bricolage Grotesque',system-ui,sans-serif; --font-tekst:'Bricolage Grotesque',system-ui,sans-serif; --skala-typo:.92; --w-light:300; } /* Zestaw f zachowuje pierwotny Inter z wagą 200 — punkt odniesienia. */ [data-czcionki="f"] { --font-naglowki:'Inter','PP Neue Montreal',ui-sans-serif,system-ui,sans-serif; --font-tekst:'Inter','PP Neue Montreal',ui-sans-serif,system-ui,sans-serif; --skala-typo:1; --w-light:200; } /* Zabezpieczenie systemowe: zero ramek i cieni w całym dokumencie. */ *, *::before, *::after { box-sizing: border-box; border: 0; box-shadow: none; } /* Ukrycie musi wygrywać z każdą regułą display w tym pliku. Bez tego .hero--page{display:block} pokonuje domyślne [hidden] i ekrany testu wyświetlają się wszystkie naraz. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--void); color: var(--bone); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-light); /* tekst ciągły = 200. Nie zmieniaj. */ line-height: 1.5; font-feature-settings: "ss01" on; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-naglowki); font-weight: var(--w-reg); color: var(--bone); text-wrap: balance; } /* Rytm pionowy z uklad.md: nagłówek → treść = 36px (mobile 24px). */ h1, h2 { margin-bottom: var(--s-6); } h1:last-child, h2:last-child { margin-bottom: 0; } p { margin: 0 0 var(--s-4); max-width: var(--measure); } a { color: var(--saffron); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; } img, canvas, svg { display: block; max-width: 100%; } ul { margin: 0 0 var(--s-4); padding: 0; list-style: none; max-width: var(--measure); } ::selection { background: var(--burgund); color: var(--bone); } :focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; } .skip { position: absolute; left: -9999px; background: var(--burgund); color: var(--bone); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-nav); font-weight: var(--w-semi); } .skip:focus { left: var(--s-6); top: var(--s-4); z-index: 10; } /* ============================================================ TYPOGRAFIA Tracking w em — skaluje się sam, mobile bez osobnych reguł. ============================================================ */ .t-display { font-size: var(--fs-display); letter-spacing: -.04em; line-height: 1.1; } .t-h-lg { font-size: var(--fs-h-lg); letter-spacing: -.04em; line-height: 1.1; } .t-h { font-size: var(--fs-h); letter-spacing: -.035em; line-height: 1.1; } .t-h-sm { font-size: var(--fs-h-sm); letter-spacing: -.04em; line-height: 1.2; } .t-sub { font-size: var(--fs-sub); line-height: 1.2; } .t-h-xs { font-size: var(--fs-h-xs); line-height: 1; } .t-h-2xs { font-size: var(--fs-h-2xs); letter-spacing: -.02em; line-height: 1.25; } /* Hasło-zdanie. Display ma 113 px i jest pomyślany pod trzy słowa; zdanie pozycjonujące Magdaleny ma dwadzieścia i przy tym stopniu zajęłoby cały ekran. Mniejszy stopień, luźniejsza interlinia i szersza kolumna — czyta się jak zdanie, a nie jak plakat. */ .t-zdanie { font-size: calc(54px * var(--skala-typo)); letter-spacing: -.025em; line-height: 1.16; /* Miara w „em", nie w pikselach: przy każdym z sześciu zestawów czcionek w linii ląduje mniej więcej tyle samo znaków. */ max-width: 16em; } /* Zdanie pod hasłem. Wyciszone, bo hasło ma zostać najgłośniejsze w kadrze — dwa białe bloki obok siebie biją się o uwagę. */ .t-sub--ciche { color: var(--mist); } .t-body { font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.6; } .t-body-2 { font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.6; color: var(--mist); } .t-small { font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: var(--mist); } /* Zdanie kursywą, które mówi, czym rzecz NIE jest. Zdejmuje z oferty połowę obiekcji, zanim klientka zdąży je pomyśleć. Kursywa, nie kolor: bursztyn jest już zajęty przez nadtytuły. */ .zastrzezenie { font-size: var(--fs-body); font-weight: var(--w-light); font-style: italic; line-height: 1.5; color: var(--ash); max-width: var(--measure); margin: 0 0 var(--s-4); } .t-eyebrow { font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; color: var(--saffron); margin-bottom: var(--s-4); } /* Etykieta 12 px wersalikami. Fiolet miał do czerni 4,57:1 i mógł tu stać jako tekst. Burgund ma 2,1:1, więc przy tym stopniu byłby nieczytelny — rolę koloru przejmuje szarość, a burgund zostaje wyłącznie tłem przycisku. */ .t-role { font-size: var(--fs-caption); font-weight: var(--w-reg); letter-spacing: .5px; text-transform: uppercase; color: var(--ash); margin: 0; } /* Podpis pod tekstem o mnie: imię i nazwisko plus jedno zdanie o roli. Nazwisko jest tu treścią, nie ozdobą — czytelniczka musi wiedzieć, kto do niej mówi. */ .podpis { margin-top: var(--s-6); display: grid; gap: var(--s-1); } .podpis-imie { font-family: var(--font-naglowki); font-size: var(--fs-h-2xs); font-weight: var(--w-reg); letter-spacing: -.02em; color: var(--bone); margin: 0; } .podpis-rola { font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; color: var(--saffron); margin: 0; } .hl { color: var(--saffron); } /* ============================================================ PRZYCISKI Biel na burgundzie ma 9,3:1, więc napis jest czytelny bez zastrzeżeń. Sama pigułka ma do czerni tylko 2,1:1 — świadoma zgoda: burgund z marynarki jest ciemny i rozjaśniony do 3:1 przestaje być burgundem. Kształt przycisku niesie biały napis wersalikami, nie sama plama. ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 14.4px 24px; border-radius: var(--r-pill); background: var(--burgund); color: var(--bone); font-family: var(--font); font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; cursor: pointer; transition: background var(--dur) var(--ease); } .btn:hover { background: var(--burgund-hi); text-decoration: none; } /* link-widmo — zawsze zamiast drugiej pigułki w kadrze */ .btn-ghost { display: inline-flex; align-items: center; padding: 14.4px 0; background: none; color: var(--bone); font-family: var(--font); font-size: var(--fs-nav); font-weight: var(--w-reg); letter-spacing: .025em; text-transform: uppercase; cursor: pointer; transition: color var(--dur) var(--ease); } /* Sama biel nie wystarcza: bez kształtu i bez kreski link-widmo czyta się jak podpis pod tekstem, a nie jak coś, w co można kliknąć. Strzałka i cienka linia dają mu granicę, nie robiąc z niego kafla. */ .btn-ghost::after { content: '\2192'; margin-left: .5em; transition: transform var(--dur) var(--ease); } .btn-ghost { border-bottom: 1px solid rgba(255,255,255,.38); padding: 14.4px 0 6px; } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--zloto); border-color: var(--zloto); text-decoration: none; } .btn-ghost:hover::after { transform: translateX(4px); } /* Przycisk złoty — pełne wypełnienie bursztynem z ciemnym napisem. Najmocniejsza rzecz w tym systemie: na czerni świeci mocniej niż burgund, więc trafia tam, gdzie chcemy, żeby kobieta kliknęła. Ciemny napis na bursztynie daje kontrast ponad 10:1. */ .btn-zloty { display: inline-flex; align-items: center; gap: .5em; padding: 15px 26px; border-radius: 999px; background: var(--zloto); color: #1A0B0B; font-family: var(--font); font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; cursor: pointer; border: none; text-decoration: none; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn-zloty::after { content: '\2192'; transition: transform var(--dur) var(--ease); } /* Gdyby napis kiedyś nie zmieścił się w jednej linii na telefonie, ma się złamać na środku, a nie rozjechać ze strzałką do krawędzi. */ .btn-zloty { justify-content: center; text-align: center; } .btn-zloty:hover, .btn-zloty:focus-visible { background: #FFCB5C; text-decoration: none; } .btn-zloty:hover::after { transform: translateX(4px); } /* Przycisk z obrysem — druga akcja w kadrze, w którym pigułka już jest. Ma kształt przycisku, więc widać go z drugiego końca pokoju, ale nie walczy o uwagę z pigułką, bo nie ma wypełnienia. */ .btn-obrys { display: inline-flex; align-items: center; gap: .5em; padding: 13.4px 25px; border-radius: 999px; background: none; color: var(--zloto); border: 1.5px solid var(--zloto); font-family: var(--font); font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .btn-obrys::after { content: '\2192'; transition: transform var(--dur) var(--ease); } .btn-obrys:hover, .btn-obrys:focus-visible { background: var(--zloto); color: #1A0B0B; text-decoration: none; } .btn-obrys:hover::after { transform: translateX(4px); } .actions { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; } /* ============================================================ UKŁAD — trzy układy i ani jednego więcej ============================================================ */ /* padding-inline, NIE skrót „padding": skrót ustawia też górę i dół, a .section.wrap ma własne padding-block. Na telefonie reguła .wrap stała w arkuszu później i zerowała odstępy między sekcjami — przyciski dotykały nagłówków następnej sekcji. */ .wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--s-6); } /* padding-block wszędzie, gdzie klasa bywa łączona z .wrap — skrócony padding wyzerowałby jej boczne odstępy i treść dotknęłaby krawędzi. */ .section { padding-block: var(--section); } /* Sklep: osiem produktów, każdy z własnym przyciskiem. Większy odstęp pilnuje, żeby w jednym kadrze nie stanęły dwie burgundowe pigułki. 180px i 240px są wielokrotnościami jednostki bazowej 6px. */ .section--produkt { padding-block: 240px; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; } .duo--text-heavy { grid-template-columns: 1.15fr 1fr; } .duo--flip > :first-child { order: 2; } /* zygzak */ /* ============================================================ NAWIGACJA — bez tła, bez rozmycia, bez kreski ============================================================ */ .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: var(--s-6); max-width: var(--container); margin: 0 auto; padding: var(--s-4) var(--s-6); background: none; } .nav--solid { position: relative; } .logo { /* Wordmark też jest odnośnikiem do strony głównej i też musi mieć 44px pola dotyku, mimo że sam napis ma 21px. */ display: flex; align-items: center; min-height: 44px; gap: var(--s-2); color: var(--bone); font-size: var(--fs-nav); font-weight: var(--w-reg); } .logo:hover { text-decoration: none; } .nav-links { display: flex; gap: var(--s-6); margin-left: auto; } /* Nawigacja była szara (#9A9A9A) i ginęła na czerni — Magdalena zgłosiła to wprost. Teraz biel z podkreśleniem, które przy aktywnej stronie i najechaniu przechodzi w złoto. 44px pola dotyku. */ .nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); text-decoration: none; border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .nav-links a:hover, .nav-links a:focus-visible { color: var(--zloto); border-color: var(--zloto); text-decoration: none; } .nav-links a.is-active { color: var(--zloto); border-color: var(--zloto); } /* Pigułka w nagłówku: burgund na czerni ma kontrast 2,1:1 i z daleka wygląda jak ciemna plama. Złoto z ciemnym napisem świeci (11:1). */ .nav .btn { background: var(--zloto); color: #1A0B0B; } .nav .btn:hover, .nav .btn:focus-visible { background: #FFCB5C; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; /* Padding, nie sam align-items: przy niskim oknie blok tekstu nie wjeżdża pod nawigację ani nie ucieka ponad górną krawędź. */ padding-block: 132px var(--s-10); } .hero .wrap { position: relative; z-index: 2; width: 100%; } .hero-copy { max-width: 560px; } /* Hero ze zdaniem zamiast hasła potrzebuje szerszej kolumny. */ .hero-copy--zdanie { max-width: 820px; } .hero h1 { margin-bottom: var(--s-6); max-width: 100%; } .hero .t-body-2 { margin-bottom: var(--s-6); } /* Pole cząstek: sylwetka z grafiki marki, złożona z kilkunastu tysięcy trójkątów i drobin. Wysokość bierze się z pozycjonowania, a szerokość dolicza sama z proporcji kadru — inaczej pionowa sylwetka rozepchałaby hero. Zaczyna pod nawigacją, żeby nie wchodziła pod linki. */ #pole-czastek { position: absolute; top: 104px; bottom: var(--s-10); right: 5vw; height: auto; width: auto; max-width: 46vw; z-index: 1; } /* hero podstron — typograficzne, bez konstelacji */ /* padding-block, nie skrót: skrócony padding wyzerowałby boczne odstępy z .wrap i treść dotykałaby krawędzi ekranu telefonu */ .hero--page { min-height: auto; padding-block: 168px var(--s-16); display: block; } .hero--page .hero-copy { max-width: 900px; } /* ============================================================ MOCKUP PRODUKTU CYFROWEGO Rysunek konturowy, ta sama logika co konstelacja w hero: kształt z kreski, nie z bryły. Bez tła, ramki i cienia — unosi się na czerni jak każdy inny element systemu. ============================================================ */ .viz-produkt { display: grid; gap: var(--s-6); justify-items: start; } .mockup { width: 100%; max-width: 400px; aspect-ratio: 4 / 3; height: auto; /* Rysunek jest dekoracją produktu, nie treścią — lekko wycofany, żeby cena pozostała najjaśniejszym punktem kolumny. */ opacity: .92; } /* ============================================================ PRODUKT — kolumna „wizualizacji" w zygzaku sklepu. To nie jest karta: brak tła, ramki i cienia. Sama typografia. ============================================================ */ /* Kolejność w kolumnie ceny: kwota, jednostka, dopiero potem drugi próg i opis. „Za sześćdziesiąt minut" musi stać tuż pod „450 zł", bo bez tego kwota nie znaczy nic. Porządek robi CSS, nie znaczniki, bo cenę wstawia osobny skrypt i nie zna sąsiedztwa. */ .price { display: grid; gap: var(--s-2); } .price-unit { order: 1; } .price-desc { order: 3; } .price-amount { font-size: var(--fs-h-lg); letter-spacing: -.04em; line-height: 1; font-weight: var(--w-reg); } .price-unit { font-size: var(--fs-small); font-weight: var(--w-reg); color: var(--ash); } .price-note { font-size: var(--fs-caption); font-weight: var(--w-reg); color: var(--ash); letter-spacing: .5px; text-transform: uppercase; margin: 0; } /* jedno zdanie o tym, czym produkt jest fizycznie: format, objętość, dostęp */ .price-desc { font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: var(--mist); margin: var(--s-1) 0 0; max-width: 380px; } /* Odnośnik, który jest całą treścią punktu listy („Jak dokładnie wygląda ta godzina"): 21px tekstu to za mało dla palca, więc dostaje pole dotyku, a ujemny margines trzyma rytm listy. */ .list li > a:only-child { display: inline-block; padding: 10px 0; margin: -10px 0; } /* lista „co dostajesz" — myślnik bursztynem zamiast punktora */ .list li { font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.6; color: var(--mist); padding-left: var(--s-4); position: relative; margin-bottom: var(--s-2); } .list li::before { content: "—"; position: absolute; left: 0; color: var(--saffron); } .stack { display: grid; gap: var(--s-4); justify-items: start; } /* ============================================================ KARUZEL ============================================================ */ .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--s-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: var(--s-10); } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; } .item { margin: 0; display: grid; gap: var(--s-2); align-content: start; } .item h3 { margin-bottom: 0; } .dots { display: flex; gap: 0; justify-content: center; margin-top: var(--s-3); } /* Kropka ma 8 pikseli, ale pole dotyku 44 — na telefonie trafienie w ośmiopikselowy punkt jest loterią. Kropkę rysuje ::after, więc wygląd zostaje ten sam, a klikalny jest cały kwadrat wokół niej. 8 pikseli nie jest panelem — jedyny dopuszczalny ciemny szary. */ .dot { width: 44px; height: 44px; padding: 0; background: none; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .dot::after { content: ''; width: 8px; height: 8px; border-radius: 9999px; /* #2A2A2A dawało 1,46:1 — kropek praktycznie nie było widać. #6E6E6E daje 4,12:1, bursztyn 12,14:1 (zmierzone). */ background: #6E6E6E; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } /* Aktywny stan niesie nie tylko kolor, ale i rozmiar — sam kolor gubi się przy wadzie rozpoznawania barw. */ .dot.is-on::after { background: var(--zloto); transform: scale(1.5); } /* ============================================================ DOMKNIĘCIE / STOPKA ============================================================ */ .close-cta h2 { margin-bottom: var(--s-6); max-width: 900px; } .foot { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: baseline; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: var(--s-16) var(--s-6) var(--s-10); } .foot p { margin: 0; } /* Stopka nie jest miejscem na szept. To w niej kobieta szuka regulaminu, kontaktu i Instagrama, często na telefonie i wieczorem. Szary tekst bez kreski gubił się w czerni, więc: jaśniejszy kolor, grubsza litera i podkreślenie, które mówi wprost „to jest link". */ .foot-links { display: flex; gap: 0 var(--s-6); flex-wrap: wrap; align-items: center; } .foot-links a { color: var(--bone); font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; /* Pole dotyku ma mieć 44px wysokości — tyle wynosi zalecane minimum i tyle realnie potrzebuje palec. Podkreślenie zostaje przy samym napisie, więc wygląd się nie zmienia, rośnie tylko obszar kliknięcia. */ display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(255,255,255,.32); padding-bottom: 3px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .foot-links a:hover, .foot-links a:focus-visible { color: var(--zloto); border-color: var(--zloto); text-decoration: none; } /* Linia oddzielająca stopkę od treści — jedyna kreska w tym systemie, która porządkuje, a nie ozdabia: bez niej stopka wisi w powietrzu. */ .foot { border-top: 1px solid rgba(255,255,255,.12); } .foot p { color: var(--mist); } /* ============================================================ RUCH ============================================================ */ /* Treść jest WIDOCZNA domyślnie. Ukrycie do animacji włącza dopiero skrypt, dodając klasę na . Wcześniej CSS ustawiał opacity:0, więc każdy błąd JavaScriptu albo zablokowany skrypt zostawiał pustą czarną stronę — treść nie może zależeć od tego, czy animacja ruszy. */ .reveal { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .js-ruch .reveal { opacity: 0; transform: translateY(24px); } .js-ruch .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ============================================================ MOBILE — jeden breakpoint ============================================================ */ @media (max-width: 900px) { :root { --fs-display: calc(44px * var(--skala-typo)); --fs-h-lg: calc(38px * var(--skala-typo)); --fs-h: calc(32px * var(--skala-typo)); --fs-h-sm: calc(30px * var(--skala-typo)); --fs-sub: calc(27px * var(--skala-typo)); --fs-h-xs: calc(24px * var(--skala-typo)); --fs-h-2xs: calc(21px * var(--skala-typo)); --section: 60px; --s-16: 60px; } .wrap { padding-inline: var(--s-4); } h1, h2 { margin-bottom: var(--s-4); } .section--produkt { padding-block: var(--section); } .mockup { max-width: 300px; margin: 0 auto; } .viz-produkt { gap: var(--s-5); } .duo { grid-template-columns: 1fr; gap: var(--s-10); } .duo--flip > :first-child { order: 0; } /* Wizualizacja ZAWSZE pod tekstem, nigdy nad. Dotyczy obu kierunków zygzaka, dlatego idzie po klasie, a nie po pozycji w znaczniku. Cena w sklepie jest treścią, nie dekoracją — zostaje nad opisem. */ .duo .viz { order: 2; } .nav-links { display: none; } .nav { padding: var(--s-4); gap: var(--s-4); } /* Wordmark zostaje w całości — to marka. Zamiast niego skraca się etykieta pigułki, żeby oba zmieściły się w jednej linii. */ .logo { white-space: nowrap; } .only-wide { display: none; } .nav .btn { padding: 14.4px 18px; } .hero { min-height: auto; padding-block: 120px var(--s-10); flex-direction: column; align-items: stretch; } .hero .wrap { order: 1; } .hero--page { padding-block: 132px var(--s-10); } #pole-czastek { order: 2; position: relative; top: auto; bottom: auto; right: auto; height: 62vh; max-height: 430px; width: auto; max-width: 100%; margin: var(--s-10) auto 0; } .hero-copy, .hero-copy--zdanie { max-width: none; } .t-zdanie { font-size: calc(30px * var(--skala-typo)); line-height: 1.22; max-width: none; } .foot { padding: var(--s-16) var(--s-4) var(--s-10); } } /* ============================================================ TEST POZIOMU AI Jedno pytanie na ekran — to dokładnie ta gęstość, której wymaga system. Zamiast paska postępu (którego tu nie ma) licznik tekstowy bursztynem. ============================================================ */ .licznik { font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .18em; text-transform: uppercase; color: var(--saffron); margin-bottom: var(--s-6); } /* Pytanie jest mniejsze niż nagłówek sekcji celowo: przy 78px najdłuższe pytania spychały czwartą odpowiedź poza ekran, a niewidoczna opcja w teście to wybór z trzech, nie z czterech. */ .pytanie { font-size: var(--fs-h); max-width: 860px; margin-bottom: var(--s-6); } /* Ekran pytania ma ciaśniejszy rytm niż reszta stron — wszystkie cztery odpowiedzi muszą zmieścić się na jednym ekranie, także na laptopie 1280x720 i na telefonie. */ .ekran-pytanie { padding-block: 116px var(--s-6); } /* Ekran adresu tak samo jak pytania: przycisk „Pokaż mi mój wynik" to jedyne wyjście dalej i nie może chować się pod krawędzią ekranu. */ .ekran-adres { padding-block: 88px var(--s-6); } /* Nagłówek mniejszy niż na innych ekranach: przy 78px formularz z przyciskiem nie mieścił się na laptopie 1280x720 ani na telefonie 360x640. „Gdzie mam go wysłać?" w 48px nadal niesie ten ekran. */ .ekran-adres h1 { font-size: var(--fs-h); margin-bottom: var(--s-3); } .ekran-adres .t-body-2 { margin-bottom: var(--s-5); } .ekran-adres .pole { margin-bottom: var(--s-4); } .ekran-adres .zgoda { margin-bottom: var(--s-4); } .ekran-adres .pole input { padding: var(--s-1) 0; } .ekran-pytanie .odp { padding-top: var(--s-2); padding-bottom: var(--s-2); } .ekran-pytanie .wstecz { margin-top: var(--s-6); } .odpowiedzi { display: grid; gap: var(--s-1); max-width: 720px; margin: 0; padding: 0; list-style: none; } /* Odpowiedź to duży cel do kliknięcia bez tła i ramki: hierarchia z koloru i przesunięcia, tak jak w linku-widmie. */ .odp { display: block; width: 100%; text-align: left; cursor: pointer; background: none; color: var(--mist); font-family: var(--font); font-size: var(--fs-h-2xs); font-weight: var(--w-light); line-height: 1.35; letter-spacing: -.02em; padding: var(--s-3) 0 var(--s-3) var(--s-5); position: relative; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .odp::before { content: "—"; position: absolute; left: 0; top: var(--s-3); color: var(--ash); transition: color var(--dur) var(--ease); } .odp:hover, .odp:focus-visible { color: var(--bone); transform: translateX(6px); } .odp:hover::before, .odp:focus-visible::before { color: var(--saffron); } .wstecz { margin-top: var(--s-10); } .obszar-etykieta { margin-bottom: var(--s-2); } /* wybrana odpowiedź po powrocie do pytania */ .odp.is-wybrana { color: var(--bone); } .odp.is-wybrana::before { color: var(--saffron); } /* ============================================================ ROZBICIE NA OBSZARY Pięć wyników obok siebie. Bez kart i ramek — kolumny dzieli sama pustka, a obszar z luką wyróżnia bursztyn, nie tło. ============================================================ */ .obszary { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-6); margin-top: var(--s-10); } .obszar { display: grid; gap: var(--s-1); align-content: start; } .obszar-nazwa { font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; color: var(--ash); margin: 0; } .obszar-wynik { font-size: var(--fs-sub); font-weight: var(--w-reg); color: var(--bone); margin: 0; line-height: 1.1; } .obszar-opis { font-size: var(--fs-caption); font-weight: var(--w-reg); color: var(--ash); margin: 0; line-height: 1.5; max-width: none; } /* obszar z luką: bursztyn na etykiecie i wyniku, bez tła i ramki */ .obszar--luka .obszar-nazwa, .obszar--luka .obszar-wynik { color: var(--saffron); } .obszar-znacznik { display: block; font-size: var(--fs-caption); font-weight: var(--w-reg); letter-spacing: .5px; color: var(--saffron); text-transform: none; } .luka-zdanie { max-width: var(--measure-lg, 520px); margin-top: var(--s-10); color: var(--mist); } .luka-zdanie strong { font-weight: var(--w-reg); color: var(--saffron); } @media (max-width: 900px) { /* pięć kolumn nie mieści się na telefonie — schodzą w listę */ .obszary { grid-template-columns: 1fr; gap: var(--s-5); } .obszar { grid-template-columns: 1fr auto; align-items: baseline; } .obszar-nazwa { grid-column: 1; } .obszar-wynik { grid-column: 2; grid-row: 1; text-align: right; } .obszar-opis { grid-column: 1 / -1; } } /* wynik */ .wynik-punkty { font-size: var(--fs-small); font-weight: var(--w-reg); color: var(--ash); margin: 0 0 var(--s-4); } .polecane { display: grid; gap: var(--s-16); margin-top: var(--s-6); } .polecany { display: grid; gap: var(--s-2); justify-items: start; max-width: 520px; } .polecany-cena { font-size: var(--fs-sub); font-weight: var(--w-reg); color: var(--bone); margin: var(--s-1) 0 0; } /* ============================================================ FORMULARZ Odstępstwo od zakazu kresek, świadome: pole bez żadnej linii jest dla użytkowniczki niewidoczne, a tej strony używają kobiety 40+ na telefonach. Linia jest cienka, pod polem, i rysowana tłem pseudo-elementu, nie ramką — tak samo jak kropka karuzeli, która też jest dopuszczonym wyjątkiem. ============================================================ */ .pole { position: relative; display: block; margin-bottom: var(--s-6); max-width: 480px; } .pole-etykieta { display: block; font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .025em; text-transform: uppercase; color: var(--ash); margin-bottom: var(--s-2); } .pole input { width: 100%; background: none; color: var(--bone); font-family: var(--font); font-size: var(--fs-h-2xs); font-weight: var(--w-light); padding: var(--s-2) 0; outline-offset: 6px; } .pole input::placeholder { color: #4A4A4A; } .pole::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ash); transition: background var(--dur) var(--ease); } .pole:focus-within::after { background: var(--saffron); } .zgoda { display: flex; gap: var(--s-2); align-items: flex-start; max-width: 520px; margin-bottom: var(--s-6); cursor: pointer; } .zgoda input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; background: none; cursor: pointer; position: relative; } .zgoda input::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ash), var(--ash)) left top / 1px 100% no-repeat, linear-gradient(var(--ash), var(--ash)) right top / 1px 100% no-repeat, linear-gradient(var(--ash), var(--ash)) left top / 100% 1px no-repeat, linear-gradient(var(--ash), var(--ash)) left bottom / 100% 1px no-repeat; } .zgoda input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 7px; height: 12px; transform: rotate(45deg); background: linear-gradient(var(--saffron), var(--saffron)) right top / 2px 100% no-repeat, linear-gradient(var(--saffron), var(--saffron)) left bottom / 100% 2px no-repeat; } .zgoda span { font-size: var(--fs-small); font-weight: var(--w-reg); color: var(--mist); line-height: 1.5; } .form-komunikat { font-size: var(--fs-small); font-weight: var(--w-reg); color: var(--saffron); margin-top: var(--s-4); max-width: 480px; } @media (max-width: 900px) { .odp { font-size: var(--fs-body); } .polecane { gap: var(--s-10); } } /* ============================================================ EKRANY TESTU NA MAŁYM EKRANIE Ten blok musi stać PO regułach desktopowych z sekcji testu — wcześniej leżał wyżej w pliku i przegrywał z nimi kaskadę, przez co przycisk „Pokaż mi mój wynik" chował się pod krawędzią. ============================================================ */ @media (max-width: 900px) { .ekran-pytanie { padding-block: 96px var(--s-4); } .ekran-adres { padding-block: 56px var(--s-2); } .ekran-adres h1 { margin-bottom: var(--s-2); } .ekran-adres .t-body-2 { margin-bottom: var(--s-4); } .ekran-adres .pole { margin-bottom: var(--s-3); } .ekran-adres .zgoda { margin-bottom: var(--s-3); } } /* Najmniejsze telefony, np. iPhone SE. Formularz musi zmieścić się w całości razem z przyciskiem — bez tego kobieta widzi pola i nie widzi, czym je zatwierdzić. */ @media (max-width: 900px) and (max-height: 700px) { .ekran-adres { padding-block: 40px var(--s-1); } .ekran-adres h1 { margin-bottom: var(--s-1); } .ekran-adres .t-body-2 { margin-bottom: var(--s-3); } .ekran-adres .pole { margin-bottom: var(--s-2); } .ekran-adres .zgoda { margin-bottom: var(--s-3); } } /* ============================================================ ZDJĘCIA Dozwolone w sekcjach treściowych, nigdy w hero — tam jest konstelacja i nic więcej. Zaokrąglenie 24px, zero ramki, zero cienia, zero nakładki: zdjęcie unosi się na czerni tak samo jak każdy inny element systemu. ============================================================ */ .foto { width: 100%; height: auto; border-radius: var(--r); display: block; object-fit: cover; } .foto--pion { aspect-ratio: 4 / 5; } .foto--poziom { aspect-ratio: 3 / 2; } /* Miejsce na zdjęcie, którego jeszcze nie ma. Rysowane kreską jak mockupy produktów, żeby wyglądało na decyzję, nie na brak. Bez tła i bez ramki CSS — obrys jest w SVG. */ .foto-miejsce { width: 100%; height: auto; display: block; } .foto-miejsce .ramka { fill: none; stroke: #3A3A3A; stroke-width: 1.5; stroke-dasharray: 10 8; } .foto-miejsce .rog { fill: none; stroke: var(--saffron); stroke-width: 1.5; opacity: .55; } .foto-miejsce .kod { fill: var(--saffron); font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; } .foto-miejsce .opis { fill: var(--ash); font-family: var(--font); font-size: 13px; font-weight: 400; } .foto-miejsce .meta { fill: #5A5A5A; font-family: var(--font); font-size: 11px; font-weight: 400; letter-spacing: .6px; } /* ============================================================ OKŁADKA PRODUKTU Pudełko w perspektywie: front ze zdjęciem i tytułem, bok i góra budują bryłę. Głębia bierze się z jasności ścian, nie z cienia — box-shadow w tym systemie nie istnieje. To jest wizerunek produktu, odpowiednik zdjęcia w sekcji, a nie panel interfejsu. Dlatego wolno mu mieć własną powierzchnię. ============================================================ */ .okladka { --ok-w: 300px; /* szerokość frontu */ --ok-h: 400px; /* wysokość pudełka */ --ok-d: 46px; /* głębokość */ position: relative; width: calc(var(--ok-w) + var(--ok-d)); height: var(--ok-h); margin: 0 auto; perspective: 1400px; } .okladka-bryla { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-17deg) translateX(-6px); } /* front */ .ok-front { position: absolute; top: 0; left: 0; width: var(--ok-w); height: var(--ok-h); overflow: hidden; border-radius: 3px; /* czysta czerń, jak każda inna powierzchnia w tym systemie — bryłę pudełka budują jaśniejszy bok i góra, nie front */ background: var(--void); display: grid; grid-template-rows: auto 1fr auto; } /* bok: ta sama bryła, ciemniejsza — stąd wrażenie grubości */ .ok-bok { position: absolute; top: 0; left: var(--ok-w); width: var(--ok-d); height: var(--ok-h); background: linear-gradient(90deg, #1E1012, #0B0607); transform-origin: left center; transform: rotateY(72deg); border-radius: 0 3px 3px 0; } /* góra: cienki pasek domykający bryłę */ .ok-gora { position: absolute; top: 0; left: 0; width: var(--ok-w); height: var(--ok-d); background: linear-gradient(180deg, #2A1416, #160A0C); transform-origin: center top; transform: rotateX(-72deg); } /* zdjęcie na froncie — wtopione, nie wklejone */ .ok-foto { position: absolute; inset: auto 0 0 0; width: 100%; height: 62%; object-fit: cover; object-position: center 22%; border-radius: 0; opacity: .92; } .ok-zaslona { position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,0) 58%), /* mocniejsze domknięcie u dołu: podtytuł leży na zdjęciu i musi być czytelny */ linear-gradient(0deg, #000 12%, rgba(0,0,0,.86) 22%, rgba(0,0,0,0) 42%); } .ok-tresc { position: relative; padding: 20px 20px 16px; display: grid; gap: 6px; align-content: start; } .ok-nadtytul { font-size: 10px; font-weight: var(--w-semi); letter-spacing: .22em; text-transform: uppercase; color: var(--saffron); margin: 0; } .ok-tytul { font-size: 27px; line-height: 1.02; letter-spacing: -.03em; font-weight: var(--w-reg); color: var(--bone); margin: 0; } .ok-tytul em { font-style: normal; color: var(--burgund); } .ok-stopka { position: relative; margin-top: auto; padding: 10px 20px 16px; display: grid; gap: 7px; } .ok-podtytul { font-size: 11px; font-weight: var(--w-reg); line-height: 1.4; color: var(--bone); margin: 0; max-width: 94%; } .ok-autor { font-size: 9px; font-weight: var(--w-semi); letter-spacing: .18em; text-transform: uppercase; color: var(--saffron); margin: 0; } /* pasek marki u dołu frontu */ .ok-pasek { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--burgund), var(--zloto)); } @media (max-width: 900px) { .okladka { --ok-w: 232px; --ok-h: 310px; --ok-d: 36px; } .ok-tytul { font-size: 21px; } .ok-tresc { padding: 15px 15px 12px; } .ok-stopka { padding: 8px 15px 12px; } } /* ============================================================ ZAJRZYJ DO ŚRODKA Karuzela zrzutów z prawdziwego szkolenia. Zrzut ekranu ma prawo mieć własny kolor — to dokument, nie zdjęcie portretowe. Dlatego jasne zrzuty z aplikacji są tu dopuszczone, ale w małym formacie i w karuzeli, żeby nie kładły jasnej płyty na całą sekcję. ============================================================ */ .rail--kadry { grid-auto-columns: minmax(320px, 420px); align-items: start; } .kadr { margin: 0; display: grid; gap: var(--s-3); } .kadr img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); } .kadr figcaption { font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: var(--mist); max-width: 38ch; } .kadr .kadr-etykieta { display: block; font-size: var(--fs-caption); font-weight: var(--w-semi); letter-spacing: .16em; text-transform: uppercase; color: var(--saffron); margin-bottom: var(--s-1); } @media (max-width: 900px) { .rail--kadry { grid-auto-columns: minmax(260px, 82vw); } } /* ============================================================ ZAPIS NA NEWSLETTER — okno Nie jest panelem na tle strony, tylko pełnoekranową czernią: ta sama kanwa co reszta serwisu. Dzięki temu nie łamie zakazu paneli, ramek i cieni — po prostu przykrywa stronę. ============================================================ */ .okno { position: fixed; inset: 0; z-index: 60; background: var(--void); display: grid; place-items: center; padding: var(--s-6) var(--s-4); opacity: 0; transition: opacity 320ms var(--ease); } .okno.is-widoczne { opacity: 1; } .okno-tresc { width: 100%; max-width: 560px; } .okno h2 { margin-bottom: var(--s-4); } .okno .t-body-2 { margin-bottom: var(--s-6); } /* zamknięcie: krzyżyk z dwóch kresek, bez ramki i tła */ .okno-zamknij { position: absolute; top: var(--s-4); right: var(--s-4); width: 44px; height: 44px; background: none; cursor: pointer; display: grid; place-items: center; } .okno-zamknij::before, .okno-zamknij::after { content: ""; position: absolute; width: 18px; height: 1.5px; background: var(--ash); transition: background var(--dur) var(--ease); } .okno-zamknij::before { transform: rotate(45deg); } .okno-zamknij::after { transform: rotate(-45deg); } .okno-zamknij:hover::before, .okno-zamknij:hover::after { background: var(--bone); } .okno-stopka { margin-top: var(--s-4); font-size: var(--fs-caption); font-weight: var(--w-reg); color: var(--ash); } .okno-stopka button { background: none; color: var(--ash); cursor: pointer; padding: 0; font-family: var(--font); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; } .okno-stopka button:hover { color: var(--bone); } @media (max-width: 900px) { .okno { align-content: start; padding-top: 72px; } .okno h2 { font-size: var(--fs-h); } } /* ============================================================ MIEJSCE NA CENĘ Zajmuje mniej więcej tyle, co przyszła kwota, żeby po jej wpisaniu układ się nie przesunął. Kreska jest w tle, nie w ramce — ta sama zasada co przy miejscach na zdjęcia. ============================================================ */ .cena-miejsce { display: inline-grid; place-items: center; min-width: 220px; min-height: 78px; padding: 0 var(--s-4); position: relative; font-size: var(--fs-caption); font-weight: var(--w-semi); letter-spacing: .18em; text-transform: uppercase; color: #5A5A5A; } .cena-miejsce::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(90deg, #333 0 8px, transparent 8px 16px) top/100% 1.5px no-repeat, repeating-linear-gradient(90deg, #333 0 8px, transparent 8px 16px) bottom/100% 1.5px no-repeat, repeating-linear-gradient(180deg, #333 0 8px, transparent 8px 16px) left/1.5px 100% no-repeat, repeating-linear-gradient(180deg, #333 0 8px, transparent 8px 16px) right/1.5px 100% no-repeat; } @media (max-width: 900px) { .cena-miejsce { min-width: 170px; min-height: 58px; } } /* ============================================================ OPINIE Nie karta i nie ramka: opinia to duży cytat unoszący się na czerni, tak samo jak każdy inny tekst w tym systemie. Hierarchię robi stopień pisma i bursztynowy cudzysłów, nie pudełko. Cudzysłów jest OZDOBĄ, więc nie wchodzi do treści dla czytników ekranu — inaczej lektor czytałby go jako znak. ============================================================ */ .rail--opinie { grid-auto-columns: minmax(320px, 460px); align-items: start; } .opinia { margin: 0; display: grid; gap: var(--s-5); align-content: start; } .opinia-tresc { margin: 0; position: relative; padding-top: var(--s-6); font-size: var(--fs-h-2xs); font-weight: var(--w-light); line-height: 1.45; letter-spacing: -.01em; color: var(--bone); max-width: 26em; } .opinia-tresc::before { content: "\201D"; /* cudzysłów zamykający, obrócony w górę */ position: absolute; top: -.22em; left: -.02em; font-family: var(--font-naglowki); font-size: 84px; line-height: 1; color: var(--saffron); opacity: .55; pointer-events: none; } .opinia-podpis { display: grid; gap: 3px; } .opinia-kto { font-size: var(--fs-small); font-weight: var(--w-semi); color: var(--bone); letter-spacing: .01em; } .opinia-skad { font-size: var(--fs-caption); font-weight: var(--w-reg); letter-spacing: .5px; text-transform: uppercase; color: var(--ash); } /* Miejsce na opinię, której jeszcze nie ma. Rysowane tą samą kreską co miejsce na cenę — ma wyglądać na decyzję, nie na brak. Kreska z tła, nie z ramki, bo ramek w tym systemie nie ma. */ .opinia-miejsce { display: grid; align-content: center; gap: var(--s-2); min-height: 230px; padding: var(--s-5); position: relative; text-align: left; } .opinia-miejsce::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(90deg, #333 0 8px, transparent 8px 16px) top/100% 1.5px no-repeat, repeating-linear-gradient(90deg, #333 0 8px, transparent 8px 16px) bottom/100% 1.5px no-repeat, repeating-linear-gradient(180deg, #333 0 8px, transparent 8px 16px) left/1.5px 100% no-repeat, repeating-linear-gradient(180deg, #333 0 8px, transparent 8px 16px) right/1.5px 100% no-repeat; } .opinia-miejsce b { position: relative; font-size: var(--fs-caption); font-weight: var(--w-semi); letter-spacing: .18em; text-transform: uppercase; color: var(--saffron); } .opinia-miejsce span { position: relative; font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: #5A5A5A; max-width: 26em; } @media (max-width: 900px) { .rail--opinie { grid-auto-columns: minmax(260px, 84vw); } .opinia-tresc { font-size: var(--fs-body); } .opinia-tresc::before { font-size: 60px; } .opinia-miejsce { min-height: 180px; } } /* ============================================================ FORMULARZ NA BIAŁEJ KARCIE Świadome odstępstwo od zakazów systemu, na wyraźne życzenie Magdaleny i według jej wzoru: wraca biała płaszczyzna, wracają ramki, przycisk jest złoty zamiast burgundowego. Uzasadnienie, dla którego to odstępstwo ma sens akurat tutaj: formularz to jedyne miejsce na stronie, w którym użytkowniczka musi CIEBIE zrozumieć, a nie tylko przeczytać. Pole bez żadnej krawędzi na czerni jest dla kobiety 40+ na telefonie po prostu niewidoczne. Biała karta odcina moment decyzji od reszty strony. Kolory pobrane z wzoru Magdaleny: karta #FFFFFF, ramka pola #CCCCCC, złoto #E7D467, napis na przycisku #461616 (10,1:1 — bardzo dobrze). ============================================================ */ .formularz-karta { background: #FFFFFF; border-radius: var(--r); padding: var(--s-6); max-width: 520px; display: grid; gap: var(--s-4); color: #1F1B18; } /* Pole traci kreskę spod spodu i dostaje pełną ramkę. */ .formularz-karta .pole { margin: 0; max-width: none; } .formularz-karta .pole::after { display: none; } /* Etykieta jest WIDOCZNA. Wcześniej była ukryta i rolę opisu pełnił sam placeholder — ten znika w chwili, gdy kobieta zacznie pisać, więc przy dwóch polach łatwo stracić orientację, co gdzie wpisała. Stała etykieta to jedyny opis, który nie ucieka. */ .formularz-karta .pole-etykieta { display: block; margin-bottom: 6px; font-family: var(--font-tekst); font-size: 16px; font-weight: var(--w-semi); line-height: 1.4; color: #1F1B18; } .formularz-karta .pole input { width: 100%; background: #FFFFFF; color: #1F1B18; font-family: var(--font-tekst); font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.4; padding: 17px 20px; /* Ramka identyfikuje pole, więc musi mieć co najmniej 3:1. #CCCCCC dawało 1,61:1 — pole było prawie niewidoczne. #8E8E8E daje 3,28:1 (zmierzone). */ border: 1px solid #8E8E8E; /* odstępstwo: tu ramka jest treścią */ border-radius: 10px; outline-offset: 2px; transition: border-color var(--dur) var(--ease); } .formularz-karta .pole input::placeholder { /* Wzór Magdaleny ma #A8A8A8, czyli 2,38:1. Przy 40+ na telefonie to za mało, więc o dwa tony ciemniej — różnica jest gołym okiem nie do zauważenia, a placeholder robi się czytelny. */ /* 3,36:1 nie wystarczało dla zwykłego tekstu. #6B6B6B daje 5,33:1. */ color: #6B6B6B; opacity: 1; } .formularz-karta .pole input:focus { border-color: #1F1B18; } /* Nota nad zgodą: wypisanie się i polityka prywatności. */ .formularz-nota { margin: 0; max-width: none; font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: #3A3530; } .formularz-nota a { color: #461616; text-decoration: underline; text-underline-offset: 3px; } .formularz-nota a:hover { color: #1F1B18; } .formularz-karta .zgoda { margin: 0; max-width: none; align-items: flex-start; } .formularz-karta .zgoda span { font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: #1F1B18; } .formularz-karta .zgoda input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; border: 1.5px solid #89888C; border-radius: 4px; background: #FFFFFF; } .formularz-karta .zgoda input::before { content: none; } .formularz-karta .zgoda input:checked { background: #461616; border-color: #461616; } .formularz-karta .zgoda input:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; transform: rotate(45deg); background: linear-gradient(#FFFFFF, #FFFFFF) right top / 2px 100% no-repeat, linear-gradient(#FFFFFF, #FFFFFF) left bottom / 100% 2px no-repeat; } /* Przycisk: złoty pasek przez całą szerokość karty. */ .formularz-karta .btn { width: 100%; min-height: 62px; padding: 18px var(--s-4); background: #E7D467; color: #461616; border-radius: 9999px; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; } .formularz-karta .btn:hover { background: #DCC64F; } .formularz-karta .btn:disabled { background: #EFE6B4; color: #8A6A4A; cursor: default; } .formularz-karta .form-komunikat { margin: 0; max-width: none; color: #8A1E1D; } .formularz-karta :focus-visible { outline: 2px solid #461616; outline-offset: 3px; } @media (max-width: 900px) { .formularz-karta { padding: var(--s-5) var(--s-4); border-radius: 18px; gap: var(--s-3); } .formularz-karta .pole input { padding: 15px 16px; } .formularz-karta .btn { min-height: 56px; font-size: 15px; } } /* ============================================================ FORMULARZ NA NISKIM EKRANIE Biała karta jest wyższa od dawnego formularza bez ramek i na telefonie 360x640 wypychała przycisk poniżej krawędzi. Na tym ekranie przycisk jest jedynym wyjściem dalej, więc karta się zagęszcza, zamiast zmuszać do szukania go w dole strony. ============================================================ */ @media (max-width: 900px) and (max-height: 720px) { .formularz-karta { padding: var(--s-4) var(--s-3); gap: var(--s-2); border-radius: 16px; } .formularz-karta .pole input { padding: 12px 14px; font-size: var(--fs-small); } .formularz-karta .btn { min-height: 50px; font-size: 14px; padding: 14px var(--s-3); } .formularz-nota, .formularz-karta .zgoda span { font-size: var(--fs-caption); line-height: 1.45; } .formularz-karta .zgoda input { width: 19px; height: 19px; flex-basis: 19px; } .formularz-karta .zgoda input:checked::after { left: 6px; top: 2px; width: 5px; height: 10px; } /* Zdanie nad formularzem zostaje, ale ciaśniej: obietnica „wynik od razu i na maila" jest tu argumentem, nie ozdobą. */ .ekran-adres h1 { font-size: var(--fs-h-sm); } .ekran-adres .t-body-2 { font-size: var(--fs-small); margin-bottom: var(--s-2); } } /* ============================================================ CENA PRZED OBNIŻKĄ I ZNACZNIK OFERTY Przekreślenie to jedyna kreska w tym systemie, która jest treścią, a nie ozdobą: bez niej nie widać, że cena spadła. ============================================================ */ .znak-oferty { display: block; font-size: var(--fs-caption); font-weight: var(--w-semi); letter-spacing: .16em; text-transform: uppercase; color: var(--saffron); margin-bottom: var(--s-1); } .cena-przed { font-family: var(--font-naglowki); font-size: var(--fs-sub); font-weight: var(--w-reg); line-height: 1; letter-spacing: -.02em; color: var(--ash); text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: var(--s-2); font-variant-numeric: tabular-nums; } .price-amount { font-variant-numeric: tabular-nums; } /* Zdanie zamiast kwoty („wycena indywidualna"). W wielkości kwoty rozbijałoby kolumnę na trzy linijki, więc schodzi o stopień niżej i zostaje w tej samej rodzinie, żeby nadal czytało się jak cena. */ .price-amount--tekst { font-size: var(--fs-sub); letter-spacing: -.02em; line-height: 1.15; display: block; max-width: 11em; } /* Drugi próg tej samej usługi, np. pakiet godzin. Stoi pod ceną, nie obok: oko ma najpierw zobaczyć jedną kwotę, potem wybór. */ a.cena-wariant { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); width: max-content; max-width: 100%; padding-bottom: 2px; /* 44px pola dotyku bez rozpychania kolumny: wysokość rośnie, ujemny margines oddaje nadwyżkę. */ display: flex; align-items: center; min-height: 44px; margin: -9px 0; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } a.cena-wariant:hover, a.cena-wariant:focus-visible { color: var(--zloto); border-color: var(--zloto); } .cena-wariant { display: block; order: 2; font-size: var(--fs-small); font-weight: var(--w-reg); line-height: 1.5; color: var(--mist); font-variant-numeric: tabular-nums; } /* ============================================================ KONTAKT — trzy drogi do mnie i pasek socjali Bez kafli i bez ramek: etykieta bursztynem, pod nią sam adres. Adres jest linkiem, więc nosi podkreślenie — to jedyna kreska, która niesie informację „tu można kliknąć". ============================================================ */ .kontakt-lista { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-6); } .kontakt-lista li { display: grid; gap: var(--s-1); } /* Przycisk w tej liście NIE jest adresem — nie może dziedziczyć szeryfa, wielkości ani podkreślenia od linków z adresami. */ .kontakt-lista a:not(.btn-zloty) { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-naglowki); font-size: var(--fs-h-xs); font-weight: var(--w-reg); line-height: 1.2; letter-spacing: -.02em; color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 2px; transition: border-color .2s, color .2s; overflow-wrap: anywhere; } .kontakt-lista a:not(.btn-zloty):hover, .kontakt-lista a:not(.btn-zloty):focus-visible { color: var(--zloto); border-color: var(--zloto); } /* Instagram i Facebook stoją w jednej linii — spójnik między dwoma szeryfowymi linkami musi być na tej samej linii bazowej, inaczej wygląda jak pomyłka. */ .kontakt-socjale { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); } .kontakt-lub { color: var(--ash); font-size: var(--fs-body); } /* Pozycja z przyciskiem potrzebuje więcej powietrza nad sobą niż pozycja z samym adresem: pigułka ma własną wysokość i bez tego przykleja się do etykiety. */ .kontakt-lista .kontakt-akcja { gap: var(--s-3); justify-items: start; } .pasek-kontakt .actions { margin-top: var(--s-5); } /* Socjale w pasku: osobne zdanie pod adresem, nie równorzędny kanał kontaktu. Wiadomości mają iść mailem i tekst mówi to wprost. */ .pasek-socjale { margin-top: var(--s-4); max-width: 46ch; } /* Odnośniki w zdaniu, nie osobne przyciski — ale palec i tak musi w nie trafić, więc pole dotyku rośnie do 44px. Ujemny margines trzyma wiersz na miejscu, żeby zdanie się nie rozjechało. */ .pasek-socjale a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; color: var(--mist); text-decoration: underline; text-underline-offset: 3px; } .pasek-socjale a:hover, .pasek-socjale a:focus-visible { color: var(--zloto); } /* Na telefonie dłuższy adres łamał się na dwie linie i urywał końcówkę „com" w nowym wierszu. Zmierzone: przy 22px mieści się w jednej linii na 390px, czyli na najwęższym ekranie, jaki bierzemy pod uwagę. */ @media (max-width: 900px) { .kontakt-lista a:not(.btn-zloty) { font-size: 22px; } } .pasek-kontakt .t-body-2 { max-width: 46ch; } .kontakt-linki { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); } .kontakt-linki a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body); font-weight: var(--w-reg); color: var(--mist); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 2px; transition: border-color .2s, color .2s; overflow-wrap: anywhere; } .kontakt-linki a:hover, .kontakt-linki a:focus-visible { color: var(--zloto); border-color: var(--zloto); } /* ============================================================ MENU NA TELEFONIE Przycisk to dwie kreski, nie ikona z pliku — mniej do pobrania i skaluje się z tekstem. Ekran menu to czerń i typografia, zgodnie z resztą systemu: bez panelu, ramki i cienia. ============================================================ */ .nav-menu { display: none; /* Nawigacja obok jest schowana, więc bez tego przycisk przyklejałby się do wordmarku zamiast stać przy prawej krawędzi. */ margin-left: auto; width: 48px; height: 48px; padding: 0; margin-right: -12px; background: none; border: none; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 6px; } .nav-menu span { display: block; width: 24px; height: 1.5px; background: var(--bone); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav-menu.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); } .nav-menu.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .menu-ekran { position: fixed; inset: 0; z-index: 90; background: var(--void); display: flex; align-items: flex-start; justify-content: flex-start; padding: 104px var(--s-6) var(--s-10); opacity: 0; transition: opacity .24s var(--ease); overflow-y: auto; } .menu-ekran.is-on { opacity: 1; } .menu-lista { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; } .menu-lista > a:not(.btn-zloty) { display: flex; align-items: center; min-height: 56px; font-family: var(--font-naglowki); font-size: var(--fs-h-xs); font-weight: var(--w-reg); letter-spacing: -.02em; color: var(--bone); text-decoration: none; } .menu-lista > a.is-active { color: var(--zloto); } .menu-lista .btn-zloty { margin-top: var(--s-6); align-self: flex-start; } .menu-stopka { margin-top: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); } .menu-stopka a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-nav); font-weight: var(--w-semi); letter-spacing: .04em; text-transform: uppercase; color: var(--mist); text-decoration: none; } .menu-stopka a:hover, .menu-stopka a:focus-visible { color: var(--zloto); } /* Strona pod otwartym menu nie przewija się w tle. */ body.menu-otwarte { overflow: hidden; } @media (max-width: 900px) { .nav-menu { display: flex; } /* Pigułka w nagłówku ustępuje miejsca przyciskowi menu — obie naraz nie mieszczą się obok wordmarku na 360px. */ .nav .btn { display: none; } /* Nagłówek NIE jest przypięty: wordmark jechał wtedy po treści i kładł się na nagłówkach sekcji przy przewijaniu. Przypina się wyłącznie na czas otwartego menu — wtedy musi stać nad czarnym tłem, żeby dało się kliknąć zamknięcie (Escape na telefonie nie istnieje). */ body.menu-otwarte .nav, body.menu-otwarte .nav--solid { position: fixed; top: 0; left: 0; right: 0; z-index: 95; background: var(--void); } } @media (min-width: 901px) { .menu-ekran { display: none; } } /* Cena pod nazwą wybranego produktu w sekcji zamówienia. */ .wybor-cena { font-family: var(--font-naglowki); font-size: var(--fs-h-xs); font-weight: var(--w-reg); line-height: 1.2; color: var(--zloto); font-variant-numeric: tabular-nums; margin: calc(-1 * var(--s-3)) 0 var(--s-1); } .wybor-jednostka { font-size: var(--fs-small); font-weight: var(--w-reg); color: var(--ash); margin: 0 0 var(--s-5); } /* ============================================================ POWRÓT NA GÓRĘ Krążek przy krawędzi, w zasięgu kciuka. Bursztyn z ciemną strzałką — ten sam sygnał co złote przyciski, więc nie trzeba się domyślać, że to coś klikalnego. ============================================================ */ .na-gore { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 70; width: 52px; height: 52px; border-radius: 999px; border: none; background: var(--zloto); color: #1A0B0B; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease), background var(--dur) var(--ease); } .na-gore.jest { opacity: 1; visibility: visible; transform: none; } .na-gore:hover, .na-gore:focus-visible { background: #FFCB5C; } @media (min-width: 901px) { .na-gore { right: var(--s-6); bottom: var(--s-6); } } @media (prefers-reduced-motion: reduce) { .na-gore { transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); transform: none; } } /* ============================================================ SKRÓT KATALOGU — osiem ofert i cen na jednym ekranie Bez ozdób: nazwa, po co to jest, kwota. Lista do przebiegnięcia wzrokiem, nie miejsce na argumentację. Cienka kreska między wierszami jest tu treścią (oddziela oferty), nie dekoracją. ============================================================ */ /* Tytuł kafla w karuzeli jest teraz odnośnikiem do konkretnej sekcji sklepu. Wcześniej kafel był samym tekstem: kobieta zainteresowana jednym produktem musiała wejść do sklepu i szukać go od nowa. */ .rail .item h3 a { /* 44px pola dotyku; ujemny margines oddaje nadwyżkę, żeby kafel nie urósł i karuzela nie zmieniła rytmu. */ display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .rail .item h3 a:hover, .rail .item h3 a:focus-visible { color: var(--zloto); border-color: var(--zloto); text-decoration: none; } .skrot-lista { list-style: none; margin: var(--s-8) 0 0; padding: 0; } .skrot-lista li + li { border-top: 1px solid rgba(255,255,255,.14); } .skrot-lista a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px var(--s-6); padding: var(--s-4) 0; min-height: 44px; text-decoration: none; color: var(--bone); transition: color var(--dur) var(--ease); } .skrot-lista a:hover, .skrot-lista a:focus-visible { color: var(--zloto); text-decoration: none; } .skrot-nazwa { font-family: var(--font-naglowki); font-size: var(--fs-h-2xs); font-weight: var(--w-reg); letter-spacing: -.02em; line-height: 1.25; } .skrot-po-co { grid-column: 1; font-size: var(--fs-small); color: var(--ash); } .skrot-cena { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--font-naglowki); font-size: var(--fs-h-xs); font-weight: var(--w-reg); color: var(--zloto); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 900px) { .skrot-cena { font-size: var(--fs-h-2xs); } } /* ============================================================ FAQ — pytania przed zakupem Lista definicji, nie akordeon: przy ośmiu krótkich pytaniach zwijanie dokłada kliknięć zamiast je oszczędzać. ============================================================ */ .faq { margin: var(--s-8) 0 0; max-width: 46em; } .faq dt { font-family: var(--font-naglowki); font-size: var(--fs-h-2xs); font-weight: var(--w-reg); letter-spacing: -.02em; line-height: 1.3; color: var(--bone); margin-top: var(--s-8); } .faq dt:first-of-type { margin-top: 0; } .faq dd { margin: var(--s-2) 0 0; font-size: var(--fs-body); font-weight: var(--w-reg); line-height: 1.6; color: var(--mist); }