/* Theme Name: Klucz Mobile Theme URI: https://klucz.net/ Author: Klucz Mobile Description: Motyw serwisu Klucz Mobile. Samodzielny — bez motywu nadrzędnego i bez zależności zewnętrznych. Odtwarza wygląd układu opartego na GeneratePress, nie używając go. Version: 0.2.0 Requires at least: 6.0 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: klucz-mobile */ /* * PO CO TEN MOTYW ISTNIEJE * * Poprzedni układ był potomkiem GeneratePress. Działał, ale ciągnął za sobą trzy rzeczy: * * 1. Motyw nadrzędny, którego nie audytowaliśmy, a którego pliki odpowiadają na żądania. * 2. Styl osadzany w każdą stronę — jeden z powodów, dla których nie dało się włączyć * Content-Security-Policy na ostro. * 3. Kolizję nazw: na produkcji katalog `themes/klucz` to zupełnie inny, stary motyw. * * CEL: wygląd identyczny jak w `klucznew`, bez GeneratePress. * * Arkusze treści (`pages.css`, `pakiety.css`, `slider.css`, `taryfa.css`, `pytania.css`, * `kody.css`, `subpages.css`, `dostepnosc.css`, `regulations-search.css`) przeniesione * BEZ ZMIAN — to one dają wygląd stron i każda ich zmiana byłaby zmianą wyglądu. * Przepisany jest wyłącznie nagłówek, stopka i to, co w starym motywie celowało * w klasy GeneratePressa. * * Co z czego powstało — patrz `dokumentacja/rozpoznanie-css.md`. */ /* ============================================================= Geist — krój z makiety, na własnym serwerze Przeniesione 1:1 ze starego motywu. Pliki leżą w motywie, a nie są pobierane z Google Fonts: bez dodatkowego połączenia do obcego serwera, bez wysyłania tam adresów IP odwiedzających i bez zależności od cudzej dostępności. Jeden plik na podzbiór znaków, każdy niesie wszystkie grubości naraz — Geist jest krojem zmiennym, stąd `font-weight: 100 900`. Przeglądarka pobiera tylko te podzbiory, których strona faktycznie używa: polska nie sięgnie po cyrylicę, ukraińska po nią sięgnie. `font-display: swap`: tekst jest widoczny od razu w kroju zastępczym. ============================================================= */ @font-face { font-family: 'Geist'; src: url('assets/fonts/geist-98bbbccb.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Łacina rozszerzona — polskie ą, ć, ę, ł, ń, ó, ś, ź, ż. */ @font-face { font-family: 'Geist'; src: url('assets/fonts/geist-001175b1.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cyrylica — ukraińskie і, ї, є, ґ mieszczą się w tym zakresie. */ @font-face { font-family: 'Geist'; src: url('assets/fonts/geist-875ccdd4.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Geist'; src: url('assets/fonts/geist-ff2310f5.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* ============================================================= Zmienne — przeniesione 1:1 ze starego motywu BEZ TEGO BLOKU arkusze treści wyrenderują się bez barw i bez kroju pisma, a wyglądać to będzie na zepsuty motyw, nie na brak zmiennej. `pytania.css`, `kody.css`, `pakiety.css`, `slider.css` i `taryfa.css` wszystkie z nich korzystają. ============================================================= */ :root { /* Arial na końcu, bo cała reszta serwisu stoi na nim — podmiana ma być niewidoczna, gdyby plik kroju się nie wczytał. */ --klucz-font-ui: 'Geist', Arial, Helvetica, sans-serif; /* Szarość z logo — dokładnie ta, którą ma napis KLUCZ w pliku znaku. Kontrast: 7,55:1 na bieli, 6,82:1 na kremie — powyżej progu 4,5:1. */ --pakiet-ink: #515555; --pakiet-muted: #6f6b68; /* Czerwień marki. Biały tekst daje na niej 4,51:1, więc tuż powyżej progu — dlatego napisy na czerwonym tle są pełną bielą, bez przezroczystości. Wyciszenie do 80% zeszłoby do 3,44:1. */ --pakiet-red: #c94d4d; /* * Ta sama czerwień rozłożona na składowe, do miejsc potrzebujących jej * z przezroczystością: `rgba(var(--pakiet-red-rgb), .63)`. * * Bez tego półprzezroczyste warianty muszą być wpisane liczbą — i wtedy * NIE idą za akcentem. Tak było do 17.08.2026: sześć miejsc trzymało * `rgba(199, 63, 63, …)`, czyli inną czerwień niż marka, wpisaną ręcznie. */ --pakiet-red-rgb: 201, 77, 77; /* * Czerwień przyciemniona, do akcentu na kremie. * * Marka (#c94d4d) daje na `--pakiet-cream` 4,08:1, czyli PONIŻEJ progu * 4,5:1. Ten odcień daje 5,23:1. Nie jest to więc wariant ozdobny, tylko * wymuszony kontrastem — i dlatego musi iść za akcentem osobno, a nie * zostać z nim spłaszczony do jednej wartości. */ --pakiet-red-ciemny: #b03f3f; --pakiet-cream: #f6f3ee; --pakiet-line: #ded9d2; --slajd-welon-barwa: #d34b4b; --slajd-welon-krycie: .2; --slajd-welon-nasycenie: 1.65; /* * TRZY CZERWIENIE, KTÓRE NIE SĄ CZERWIENIĄ MARKI * * Każda z nich stała do 17.08.2026 wpisana liczbą w arkuszu i przy zmianie * akcentu z panelu zostałaby czerwona. Wartości zostawione co do znaku — * chodziło o możliwość sterowania nimi, nie o zmianę wyglądu. * * Nie są spłaszczone do akcentu, bo różnią się od niego widocznie i każda * ma inne pochodzenie. */ /* Stan najechania i strona bieżąca w menu. Wartość wprost z ustawień „Dostosuj” starego GeneratePressa — wyraźnie bardziej pomarańczowa od marki, więc podmiana na akcent zmieniłaby wygląd menu. */ --kolor-menu-akcent: #dd4a25; /* Tło pasa na stronach ofertowych (`pages.css`). */ --kolor-pas-tlo: #e74f4f; /* Tło bloku formularza na stronach MNP i dorejestracji — czerwień wyciszona, ciemniejsza od marki. */ --kolor-formularz-tlo: #a85757; /* * WARSTWA UKŁADU — PRZENIESIONA TU Z `uklad.css` 17.08.2026 * * Nie dla porządku. `uklad.css` wczytuje się PO tym pliku, a blok barw z panelu * dokłada się zaraz ZA nim — czyli przed `uklad.css`. Dopóki te trzy zmienne * stały tam, `uklad.css` wygrywał z panelem i pola „Pismo”, „Tło strony” * i „Tło nagłówka” nie robiły nic. Cicho, bo nic się nie psuło — po prostu * połowa serwisu zostawała przy starej barwie. * * Zasada, która z tego wynika: barwa sterowalna z panelu może być zadeklarowana * WYŁĄCZNIE w tym pliku. Deklaracja w arkuszu wczytywanym później unieważnia * panel bez śladu. */ --kolor-tekst: #222; --kolor-tlo: #fff; --kolor-naglowek: #fafafa; /* * CIEMNE PASY * * Dwie szarości, z dwóch różnych arkuszy — do 17.08.2026 obie wpisane liczbą: * * pas z taryfą i kafelkami #3e4245 `taryfa.css` * stopka #515555 `stopka.css` * * Stopka nie jest tu przypadkiem tą samą szarością, co pismo z logo — obie mają * `#515555`. Zostają jednak osobnymi zmiennymi, bo to zbieżność wartości, a nie * ta sama rola: zmiana barwy pisma nie ma przemalowywać stopki. * * Kafelków „dlaczego Klucz” nie ma na tej liście świadomie. Biorą * `rgba(255, 255, 255, .07)`, czyli rozjaśniają to, na czym leżą — idą więc * za pasem same, w każdej jego barwie. */ --kolor-pas-ciemny: #3e4245; --kolor-stopka-tlo: #515555; --kolor-stopka-drugi-plan: #dfe3e5; /* * Szerokość kolumny treści — jedna dla całej strony ofertowej. * * 1425 px to szerokość `.tabcontent` z `pages.css`, czyli kartek pakietów. * Sekcje pod nimi muszą się z nią równać, inaczej strona ma dwie różne * kolumny i widać to gołym okiem. */ --klucz-kolumna: 1425px; /* * MARGINES BOCZNY PASÓW PEŁNOSZEROKOŚCIOWYCH NA TELEFONIE. * * Dotyczy sekcji, które ciągną się od krawędzi do krawędzi i mają własne tło: * ciemnego pasa „dlaczego Klucz”, „Dodatkowych informacji” i stopki. Ich treść * przylegała do brzegu ekranu na 20 px i było za ciasno. * * ⚠ NIE DOTYCZY KARTEK PAKIETÓW. Kartka ma własne tło i obramowanie, więc jej * odstęp od krawędzi budują margines I dopełnienie razem — inna sprawa i inne * liczby. Wciągnięcie jej tutaj 18.08.2026 zwęziło ją na szerszych telefonach * i właściciel kazał to cofnąć. */ --klucz-margines-boczny: 35px; /* * SKALA ODSTĘPÓW PIONOWYCH — trzy wartości na całą stronę ofertową. * * Powód nie jest estetyczny. Przy odstępach dobieranych osobno w każdym * miejscu (a było ich ponad czterdzieści różnych) oko nie ma czego grupować: * 44 px i 48 px czyta jako „mniej więcej tyle samo”. Przy trzech wartościach * różnica jest zawsze widoczna i zawsze niesie tę samą informację. * * W `rem`, więc cały rytm rośnie razem z tekstem przy powiększeniu. */ --klucz-pas-y: 3rem; --klucz-blok-y: 2rem; --klucz-sekcja-y: 3rem; } @media screen and (min-width: 768px) { :root { --klucz-pas-y: 5rem; --klucz-blok-y: 3rem; --klucz-sekcja-y: 4rem; } } /* ============================================================= Strony będące zwykłym dokumentem — polityka prywatności, BOK, Dokumenty Treść stron ofertowych rozciąga się na pełną szerokość okna, bo tego wymaga ich własny układ. Na dokumencie prawnym dawałoby to wiersze po ćwierć tysiąca znaków: tekst od lewej krawędzi ekranu do prawej, bez marginesu. Ograniczenie szerokości nie jest ozdobą. Przy tak długim wierszu oko gubi początek następnego — dlatego WCAG zaleca nie więcej niż 80 znaków. 58 rem daje około 110 znaków: więcej niż norma, ale daleko od stanu sprzed tej reguły. Na wąskim ekranie nic nie zmienia, bo tam decyduje szerokość okna. Klasę `klucz-dokument` dokłada motyw stronom, w których treści nie ma znaczników układu (patrz functions.php). ============================================================= */ .klucz-dokument .strona { max-width: 58rem; margin-left: auto; margin-right: auto; padding: 2.5rem 1.25rem 4rem; } /* Nagłówek taki sam jak na pozostałych podstronach — „Przenieś numer”, „Cennik”, „Regulaminy”. Tamte mają go wpisanego w treść strony, każda w swoim znaczniku (`title_mnp`, `title_regulations`); dokumenty nie mają w treści żadnych znaczników układu, więc ten sam wygląd dostaje tytuł wpisu wystawiany przez motyw. `clamp` zamiast sztywnych 2.875 rem: na telefonie 46 px rozbijało „Polityka Prywatności” na trzy wiersze i spychało treść poniżej pierwszego ekranu. */ .klucz-dokument .strona__tytul { margin-top: 1.875rem; margin-bottom: 3.125rem; border-bottom: 2px solid rgb(199, 63, 63); font-size: clamp(1.75rem, 5.5vw, 2.875rem); font-weight: 600; line-height: 1.25; text-align: center; color: var(--pakiet-ink); } /* Numerowane działy dokumentu są wytłuszczonym akapitem, a nie nagłówkiem — tak przyszły z produkcji. Odstęp nad nimi robi z nich widoczne sekcje, bez ruszania treści w bazie. */ .klucz-dokument .strona__tresc b, .klucz-dokument .strona__tresc strong { display: inline-block; margin-top: 1.4rem; } .klucz-dokument .strona__tresc li b, .klucz-dokument .strona__tresc li strong, .klucz-dokument .strona__tresc b b, .klucz-dokument .strona__tresc strong strong { /* Wytłuszczenie w środku zdania ma zostać w linii. */ display: inline; margin-top: 0; } .klucz-dokument .strona__tresc ol, .klucz-dokument .strona__tresc ul { padding-left: 1.6rem; margin-bottom: 1.2rem; } .klucz-dokument .strona__tresc li { margin-bottom: 0.6rem; }