/* ===================================================================== Mendopauza — arkusz motywu. Wartości (kolory, skale, odstępy, promienie, cienie) pochodzą wprost z pakietu design/. Style inline z prototypu są tu przepisane na klasy i zmienne — nic nie jest przeniesione jeden do jednego. ===================================================================== */ :root { /* Paleta — dokładnie te dziewięć kolorów, żadnych nowych. */ --paper: #F0E8D8; --paper2: #F8F2E6; --ink: #1A1613; --accent: #BE5533; --muted: #6E6055; --line: #DCCEB8; --body: #3A322A; --dim: #A79A8C; --ok: #2E7D53; /* Tła pomocnicze stanów. */ --ok-bg: #EAF3EE; --err-bg: #FAEDE7; /* * Przyciemnione warianty --accent i --ok WYŁĄCZNIE dla drobnego tekstu. * * --accent na --paper2 daje 4,15:1, a na --paper 3,80:1 — dla napisów * mniejszych niż 18,7px to poniżej progu WCAG AA (4,5:1), który projekt * stawia jako warunek odbioru. Duże liczby (ceny, nagłówki) i wypełnienia * przycisków zostają na oryginalnym --accent: tam próg wynosi 3:1 dla * dużego tekstu, a biel na --accent ma 4,63:1. */ --accent-text: #A9482A; /* 4,73:1 na --paper, 5,16:1 na --paper2 */ --ok-text: #2A7049; /* 4,91:1 na --paper, 5,25:1 na --ok-bg */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: Karla, system-ui, sans-serif; /* * Kontenery. * * Projekt zakładał trzy szerokości: 880 (wąska kolumna czytelnicza), * 1120 (sklep) i 1180 (strony marketingowe). Działało to, dopóki sklep * miał WŁASNY nagłówek i stopkę — każda część była wtedy spójna sama * w sobie. Po ujednoliceniu ramy różnica stała się widoczna jako skok: * przy 1440px logo i treść stały na 170px na landingu i na 196px * w sklepie, więc przejście „strona główna → sklep" przesuwało całą * kolumnę o 26px. * * Serwis ma jeden kręgosłup: --w-page. --w-shop zostaje jako alias, * bo nazwa czyta się lepiej w regułach sklepu, ale wartość jest ta sama. */ --w-narrow: 880px; --w-page: 1180px; --w-shop: var(--w-page); --pad-x: clamp(18px, 4vw, 40px); --pad-y: clamp(36px, 7vw, 92px); --r-pill: 999px; --r-card: 6px; --r-block: 5px; --r-cover: 3px; --r-field: 4px; --sh-cover-xl: 0 50px 90px -34px rgba(26, 22, 19, 0.5); --sh-cover: 0 30px 56px -28px rgba(26, 22, 19, 0.5); --sh-thumb: 0 14px 26px -16px rgba(26, 22, 19, 0.45); --ease: cubic-bezier(.22, .61, .36, 1); } /* Skok skip-linku i linków „błąd → pole” lądował pod przyklejonym stosem nagłówka. Jedno scroll-padding naprawia wszystkie kotwice naraz. */ html { scroll-padding-top: 124px; } @media (max-width: 600px) { html { scroll-padding-top: 160px; } } *, *::before, *::after { box-sizing: border-box; } /* * Atrybut `hidden` musi wygrywać z układem. * * Przeglądarka daje mu tylko `display: none` z arkusza domyślnego, więc każda * własna reguła w rodzaju `display: flex` na tym samym elemencie go przebija — * i element zostaje na ekranie mimo `hidden`. Tak właśnie „chowały się" pola * faktury w kasie i zwinięte akapity opisów. */ [hidden] { display: none !important; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; -webkit-font-smoothing: antialiased; text-wrap: pretty; /* Bez tego na krótkich stronach (koszyk z jedną pozycją, pusty koszyk) stopka kończyła się tam, gdzie kończy się treść: zmierzone na /koszyk przy 1440×900 dolna krawędź stopki na 673,9px, czyli 226px gołego --paper pod spodem. */ min-height: 100vh; /* zapas dla przeglądarek bez dvh */ min-height: 100dvh; /* pasek adresu na telefonie nie tnie wysokości */ display: flex; flex-direction: column; } .mp-content { flex: 1 0 auto; } .mp-footer { flex: none; } /* Pasek administratora WP jest fixed i zostaje poza układem, ale dostaje od niego margin-top — bez korekty zalogowana autorka dostaje 32px zbędnego przewijania na każdej krótkiej stronie. */ body.admin-bar { min-height: calc(100dvh - 32px); } @media screen and (max-width: 782px) { body.admin-bar { min-height: calc(100dvh - 46px); } } img { max-width: 100%; height: auto; } a { color: var(--accent-text); text-decoration: none; } /* Link w zdaniu musi różnić się od sąsiedniego tekstu czymś więcej niż barwą. --accent-text wobec --muted to 1,05:1 — dla osoby nierozróżniającej czerwieni te dwa kolory są nie do odróżnienia, a WCAG 1.4.1 mówi wprost, że kolor nie może być jedynym nośnikiem informacji. Lighthouse tego nie audytuje. Podkreślamy WYŁĄCZNIE linki w tekście ciągłym. Nawigacja, przyciski, pigułki i pozycje stopki są rozpoznawalne przez kształt i położenie — tam podkreślenie byłoby szumem. */ .mp-prose a, .mp-terms a, .mp-contact__more a, .mp-next p a, .mp-tabs__panel a, .mp-hero__guarantee a, .mp-downloads__note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } button, input, select, textarea { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; margin: 0; } p { margin: 0; } /* Tytuł „Nie jestem niemiła. To menopauza" łamał się z sierotą — ostatni wiersz to samo słowo „menopauza", przy pierwszym wypełnionym w ~95%. Dziedziczone z body `text-wrap: pretty` tego nie ratuje: pilnuje tylko ostatniego wiersza dłuższego akapitu. `balance` przenosi złamanie na granicę zdania. Liczba wierszy się nie zmienia, więc wysokości bloków zostają. Świadomie POMINIĘTE: .mp-ecard__title („Cały ten burdel (ebook)" łamie się dziś na granicy tytuł | dopisek formatu; balance rozerwałby tytuł książki), .mp-shop__title i .mp-page-title (treść jednowyrazowa). */ .mp-presale__title, .mp-feature__title, .mp-product__title, .mp-cart__name, .mp-panel__name { text-wrap: balance; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Kolor pierścienia tam, gdzie accent na accencie albo accent na czerni jest nieczytelny. Policzone: accent↔ink 3,88:1, paper↔ink 14,76:1 — obie ponad próg 3:1 dla wskaźnika. */ .mp-btn--accent:focus-visible, .mp-cta:focus-visible { outline-color: var(--ink); } /* Hover zamienia te przyciski na --ink — bez tego pierścień zlałby się z tłem przycisku przy tabowaniu pod spoczywającym kursorem. */ .mp-btn--accent:focus-visible:hover, .mp-cta:focus-visible:hover { outline-color: var(--accent); } /* Elementy na tle --ink: stopka, pasek dolny, skip link. */ .mp-footer a:focus-visible, .mp-stickybar a:focus-visible, .mp-skip:focus-visible { outline-color: var(--paper); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mp-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 0 0 var(--r-block) 0; } .mp-skip:focus { left: 0; color: var(--paper); } /* --------------------------------------------------------------------- Elementy wspólne: przyciski, pigułki, stepper, pola --------------------------------------------------------------------- */ .mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 800; cursor: pointer; text-align: center; line-height: 1.1; transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); } .mp-btn--accent { background: var(--accent); color: #fff; padding: 17px 30px; font-size: 17px; } .mp-btn--accent:hover { background: var(--ink); color: #fff; } .mp-btn--ink { background: var(--ink); color: var(--paper); padding: 15px 28px; font-size: 16px; } .mp-btn--ink:hover { background: var(--accent); color: #fff; } .mp-btn--outline { background: none; color: var(--ink); border: 1.6px solid var(--ink); padding: 16px 26px; font-size: 17px; } .mp-btn--outline:hover { background: var(--ink); color: var(--paper); } .mp-btn--ghost { background: none; color: var(--ink); border: 1.4px solid var(--line); padding: 14px 22px; font-size: 15px; } .mp-btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .mp-btn--sm { padding: 13px 20px; font-size: 14.5px; } .mp-btn--block { width: 100%; } /* CTA w nagłówku i na pasku dolnym. */ .mp-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 11px clamp(14px, 2vw, 20px); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 800; font-size: clamp(13px, 1.4vw, 14px); white-space: nowrap; transition: background-color .16s var(--ease); } .mp-cta:hover { background: var(--ink); color: #fff; } .mp-cta__short { display: none; } /* Nazwę dostępną niesie aria-label na samym odnośniku — .mp-cta__short jest już tylko skróconym tekstem widocznym, więc na desktopie ma zniknąć. */ .mp-pill { display: inline-block; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; } .mp-badge { background: var(--accent); color: #fff; font-size: 11.5px; letter-spacing: 0.14em; padding: 7px 12px; } .mp-eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } .mp-stepper { display: inline-flex; align-items: center; border: 1.4px solid var(--line); border-radius: var(--r-pill); background: #fff; overflow: hidden; } .mp-stepper button { background: none; border: none; width: 46px; height: 50px; font-size: 20px; color: var(--ink); cursor: pointer; transition: background-color .14s var(--ease); } .mp-stepper button:hover { background: var(--paper2); } .mp-stepper > span, .mp-stepper input { min-width: 34px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; border: none; background: none; -moz-appearance: textfield; } .mp-stepper input::-webkit-outer-spin-button, .mp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mp-stepper--sm button { width: 32px; height: 34px; font-size: 17px; } .mp-stepper--sm button:hover { background: var(--line); } .mp-stepper--sm > span { min-width: 24px; font-family: var(--font-body); font-weight: 700; font-size: 15px; } .mp-field { display: flex; flex-direction: column; gap: 7px; } .mp-field label, .mp-label { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); } /* Trzy rzeczy naraz: 1. font-size 15,5 → 16px. Poniżej 16px Safari na iOS powiększa viewport przy każdym dotknięciu pola, a meta viewport słusznie nie blokuje skalowania. Dotyczy też iPada (>820px), więc to NIE MOŻE siedzieć w media query. 2. Jawny line-height na input i select. To on, nie min-height, daje RÓWNOŚĆ: natywny line-box selecta jest o 2px wyższy (zmierzone: 46px input vs 48px select). textarea celowo wyłączona — 20px zdusiłoby „Uwagi". 3. background-color zamiast skrótu `background`: strzałka selecta niżej jest background-image i skrót by ją kasował. */ .mp-field input, .mp-field textarea, .mp-field select { background-color: #fff; border: 1.4px solid var(--line); border-radius: var(--r-field); padding: 13px 15px; font-size: 16px; color: var(--ink); width: 100%; min-height: 50px; } .mp-field input, .mp-field select { line-height: 20px; } .mp-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; } /* W arkuszu nie było ANI JEDNEJ reguły ::placeholder, więc kolor podpowiedzi to domyślne #757575 przeglądarki — ostatni element formularza rysowany przez system, a nie przez motyw. Ten sam tekst ląduje na trzech powierzchniach i na dwóch był PONIŻEJ progu 4,5:1: biel (kasa) #757575 = 4,61:1 → --muted = 6,06:1 --paper (kontakt) #757575 = 3,78:1 → --muted = 4,97:1 --err-bg (pole błędu) #757575 = 4,02:1 → --muted = 5,29:1 opacity: 1 jest konieczne — arkusz UA Firefoksa przygasza ::placeholder. */ .mp-field input::placeholder, .mp-field textarea::placeholder { color: var(--muted); opacity: 1; } /* Pole KRAJ było jedynym elementem kasy rysowanym przez system, a nie przez motyw. Chevron w %236E6055 to dokładnie token --muted (6,08:1 na białym; dla grafiki nietekstowej próg to 3:1). */ .mp-field select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%236E6055' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; } /* `outline: none` tu NIE WRACA. Ta reguła ma specyficzność (0,2,1) i biła globalne :focus-visible (0,1,0), czyli wyłączała zaprojektowany pierścień na KAŻDYM polu kasy i formularza kontaktowego. Zostawała sama podmiana obramowania o 1,4px — sygnał nieczytelny z odległości czytania. */ .mp-field input:focus, .mp-field textarea:focus, .mp-field select:focus { border-color: var(--accent); } .mp-field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23BE5533' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Bez tego w trybie wymuszonych kolorów pole KRAJ zostaje bez wskaźnika rozwijania. */ @media (forced-colors: active) { .mp-field select { -webkit-appearance: auto; appearance: auto; padding-right: 15px; background-image: none; } } .mp-field .description, .mp-hint { font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--muted); } .mp-check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; } /* ── Wspólna kontrolka wyboru ─────────────────────────────────────── „Chcę fakturę na firmę" i „Akceptuję regulamin" były jasnymi kwadracikami z włoskowatą systemową ramką stojącymi obok karty z obramowaniem 1.6px --ink: kontrolka 3–4× cieńsza niż wszystko wokół, renderowana inaczej w Safari niż w Chrome. grep ":checked" po arkuszu zwracał zero trafień — stan zaznaczenia był w całości rysunkiem przeglądarki. Grubość 1.4px, nie 1.6px: bezpośredni sąsiedzi to pole .mp-field input i kafel .mp-pay li, oba 1.4px. Promień var(--r-field) = 4px, bo to token PÓL; 3px to w tym systemie promień okładek. Wypełnienie #fff, bo wszystkie trzy kontrolki sąsiadują z białymi polami i kaflami — kremowy krążek czytałby się jak brud. */ .mp-check input[type="checkbox"], .mp-terms input[type="checkbox"], .mp-pay input[type="radio"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex: none; background: #fff; border: 1.4px solid var(--ink); cursor: pointer; transition: background-color .14s var(--ease), border-color .14s var(--ease); } .mp-check input[type="checkbox"], .mp-terms input[type="checkbox"] { border-radius: var(--r-field); } .mp-pay input[type="radio"] { border-radius: var(--r-pill); } /* Biel na --accent = 4,63:1; dla grafiki nietekstowej próg to 3:1. */ .mp-check input[type="checkbox"]:checked, .mp-terms input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 10px; } /* Pudełko 20px − ramka 2,8px = pole 17,2px; pierścień 3,5px → kropka 10,2px. */ .mp-pay input[type="radio"]:checked { background-color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3.5px #fff; } /* Windows High Contrast: bez tego zaznaczenie regulaminu znika i nie da się złożyć zamówienia. background-image: none jest konieczne — zewnętrzna reguła :checked (0,3,1) bije bazową w media (0,2,1) i ptaszek by został. */ @media (forced-colors: active) { .mp-check input[type="checkbox"], .mp-terms input[type="checkbox"], .mp-pay input[type="radio"] { -webkit-appearance: auto; appearance: auto; border: 0; background: none; } .mp-check input[type="checkbox"]:checked, .mp-terms input[type="checkbox"]:checked { background-image: none; } } /* --------------------------------------------------------------------- Nagłówek --------------------------------------------------------------------- */ .mp-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); /* Własna warstwa kompozycji. W WebKicie (Safari/Messenger na iOS) okładka z mask-image (.mp-mockup) potrafi być namalowana PONAD przyklejonym nagłówkiem przy przewijaniu, mimo z-index 40 — zgłoszenie z telefonu 14.09.2026. Do poprzedniej rundy warstwę dawał nagłówkowi backdrop-filter; po jego usunięciu (słusznym — patrz niżej) trzeba ją zadeklarować wprost. translateZ(0) nie zmienia układu ani nie tworzy problemów dla potomków: w nagłówku nie ma nic pozycjonowanego fixed. */ transform: translateZ(0); } /* rgba(247,242,234,0.94) nie było ŻADNYM tokenem — to był jedyny dosłowny kolor spoza palety w tej części arkusza. Nagłówek i pasek kroków zlewały się w jeden jasny slab (113px na desktopie), w którym pasek kroków przestawał być osobnym elementem sterującym, a rama zmieniała kolor przy przejściu landing → sklep. backdrop-filter znika świadomie: przy alfie 0,94 rozmycie wnosiło ~6% obrazu, a na elemencie sticky tworzy dodatkowy kontekst kompozycji, kosztowny przy każdym przemalowaniu w Safari. */ .mp-header--shop { background: var(--paper); } .mp-header__bar { max-width: var(--w-page); margin: 0 auto; padding: 11px var(--pad-x); display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); } .mp-header--shop .mp-header__bar { max-width: var(--w-shop); padding: 13px var(--pad-x); gap: 20px; } .mp-logo { display: flex; align-items: center; gap: 11px; color: var(--ink); flex: none; } .mp-logo:hover { color: var(--ink); } .mp-logo__text { display: flex; flex-direction: column; line-height: 1.1; } .mp-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.13em; text-transform: uppercase; } .mp-logo__author { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .mp-logo--inline { gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 14.5px; letter-spacing: 0.14em; text-transform: uppercase; } .mp-nav { margin-left: auto; } .mp-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 500; } .mp-nav__list a { color: var(--muted); } .mp-nav__list a:hover { color: var(--ink); } .mp-nav__list .current-menu-item > a, .mp-nav__list .current_page_item > a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; } /* Nawigacja w nagłówku sklepowym ma ciaśniej: bilans przy 821px, czyli tuż nad progiem burgera, to logo 194,9 + menu ~368 + koszyk 112,6 + odstępy ≈ 715px z 755px dostępnych. Bez zacieśnienia gapu zostawałoby 6px, a menu edytuje autorka w kokpicie — jedna dodana pozycja rozwaliłaby pasek. Stopień pisma ZOSTAJE 14,5px: zmiana tylko w sklepie sprawiłaby, że menu drga przy przejściu landing → sklep w tym samym, przyklejonym elemencie. flex-wrap to zawór — przy piątej pozycji menu przełamie się do drugiej linijki zamiast wyleźć spod przycisku „Koszyk". */ .mp-header--shop .mp-nav { min-width: 0; } .mp-header--shop .mp-nav__list { gap: clamp(14px, 1.8vw, 26px); flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; } .mp-header__action { margin-left: auto; flex: none; display: flex; } .mp-nav + .mp-header__action { margin-left: 0; } .mp-cartbtn { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1.4px solid var(--ink); color: var(--ink); border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 13.5px; transition: background-color .16s var(--ease), color .16s var(--ease); } .mp-cartbtn:hover { background: var(--ink); color: var(--paper); } .mp-cartbtn__count { background: var(--accent); color: #fff; border-radius: var(--r-pill); min-width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; padding: 0 6px; } .mp-burger { display: none; background: none; border: 1.4px solid var(--line); border-radius: 10px; width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); flex: none; } .mp-menu-mobile { border-top: 1px solid var(--line); background: var(--paper2); padding: 8px var(--pad-x) 16px; } .mp-menu-mobile__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mp-menu-mobile__list li { border-bottom: 1px solid var(--line); } .mp-menu-mobile__list li:last-child { border-bottom: none; } .mp-menu-mobile__list a { display: block; color: var(--ink); font-size: 16.5px; font-weight: 600; padding: 15px 0; } .mp-menu-mobile__list .current-menu-item > a { color: var(--accent-text); font-weight: 700; } /* Pasek kroków w sklepie. */ .mp-steps { border-top: 1px solid var(--line); background: var(--paper2); } .mp-steps__inner { max-width: var(--w-shop); margin: 0 auto; padding: 9px var(--pad-x); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .mp-steps__item { display: flex; align-items: center; gap: 7px; padding: 6px 8px; color: inherit; } .mp-steps__item:hover { color: var(--ink); } .mp-steps__item.is-active { color: var(--ink); } .mp-steps__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .mp-steps__sep { color: var(--line); } /* --------------------------------------------------------------------- Stopka --------------------------------------------------------------------- */ .mp-footer { background: var(--ink); color: var(--dim); } .mp-footer a { color: var(--dim); } .mp-footer a:hover { color: var(--paper); } .mp-footer__grid { max-width: var(--w-page); margin: 0 auto; padding: clamp(40px, 6vw, 76px) var(--pad-x) 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 30px; align-items: end; } .mp-footer__logo { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.02; letter-spacing: -0.025em; color: var(--paper); text-transform: uppercase; margin-bottom: 10px; } .mp-footer__meta { font-size: 14.5px; line-height: 1.6; } /* Dane rejestrowe w stopce. --dim na --ink to 7,07:1 — powyżej AA. */ .mp-footer__legal { margin-top: 14px; max-width: 44ch; font-size: 13px; line-height: 1.75; } .mp-footer__legal a { text-decoration: underline; text-underline-offset: 2px; } .mp-footer__nav { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; } .mp-footer__copy { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; } /* Pełna stopka na stronach sklepu trzyma kolumnę sklepu, żeby jej krawędź pokrywała się z kartą nad nią: .mp-footer__grid to 1180 + --pad-x (do 40px), czyli 170px od lewej przy 1440, a kolumna sklepu 1120 + 36px = 196px. Bez korekty rozjazd 26px. */ .mp-view-shop .mp-footer__grid { max-width: var(--w-shop); padding-right: var(--pad-x); padding-left: var(--pad-x); } /* Rezerwa 96px na dolny pasek landingu jest MARTWA wszędzie poza stroną główną — mendopauza_sticky_bar() zwraca pusto przy ! is_front_page(). To samo 96px zalegało też na Kontakcie, Ebookach i Fragmentach. */ .mp-footer__grid { padding-bottom: clamp(40px, 6vw, 76px); } body.home .mp-footer__grid { padding-bottom: 96px; } /* #C9C0B7 był kolorem spoza :root, dublującym rolę --dim bez powodu. Po zmianie stopka kasy ma tę samą szarość co stopka landingu; --dim na --ink = 7,07:1, czyli AAA przy 13,5px. */ .mp-footer--shop .mp-footer__bar { color: var(--dim); } .mp-footer--shop a { color: var(--dim); } .mp-footer--shop .mp-footer__bar { max-width: var(--w-shop); margin: 0 auto; padding: 34px var(--pad-x); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 13.5px; } .mp-footer__links { margin-left: auto; display: flex; gap: 18px; } /* --------------------------------------------------------------------- Dolny pasek landingu --------------------------------------------------------------------- */ .mp-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ink); color: var(--paper); box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.5); } .mp-stickybar__inner { max-width: var(--w-page); margin: 0 auto; padding: 10px var(--pad-x); display: flex; align-items: center; gap: clamp(12px, 2vw, 18px); } .mp-stickybar__img { height: 46px; width: auto; border-radius: 2px; } .mp-stickybar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mp-stickybar__title { font-family: var(--font-display); font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-stickybar__meta { font-size: 12px; color: var(--dim); white-space: nowrap; /* bez tego podpis łamał się na telefonie i pasek rósł dwukrotnie */ overflow: hidden; text-overflow: ellipsis; } /* Hero i dolny pasek kupują przez formularz, nie przez kotwicę — opakowanie nie może zmienić układu rzędu. */ .mp-hero__actions form.cart { display: flex; margin: 0; } /* margin-left: auto siedziało na samym przycisku; po opakowaniu w formularz musi przejść na formularz, inaczej pigułka przykleja się do tytułu. */ .mp-stickybar__form { margin: 0 0 0 auto; flex: none; display: flex; } .mp-stickybar__cta { padding: 13px clamp(16px, 3vw, 24px); font-size: 15px; flex: none; } /* .mp-cta było dotąd wyłącznie na i — w odróżnieniu od .mp-btn — nie ma resetu przycisku. Bez tego iOS Safari domaluje własne tło i obramowanie. */ button.mp-cta { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; } /* Reguła pierścienia fokusa celuje w „.mp-stickybar a" — na