/* Theme Name: Dobre Momenty Theme URI: https://dobremomenty.pl Template: brand-perspective Author: Brand Perspective Description: Motyw strony dobremomenty.pl - dwie galezie pod jedna marka: fotografia rodzinna i sklep z bizuteria z naturalnych kamieni. Motyw potomny Brand Perspective: dziedziczy system progow rem, formularz kontaktowy i biblioteke sekcji, doklada wlasny jezyk wizualny, WooCommerce i typ tresci "sesja". Version: 0.54.1 Requires at least: 6.5 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: dobre-momenty */ /* ===================================================================== PODSTAWA rem System progów rem siedzi w motywie nadrzędnym i tutaj go NIE powtarzamy - dwa bloki ustawiające `html { font-size }` w dwóch plikach to gwarancja rozjazdu przy pierwszej zmianie jednego z nich. Punktem odniesienia dla wszystkich wartości niżej jest szerokość 1440 px, na której 1rem = 10px. Zmierzone 22 px zapisujemy jako 2.2rem. Poniżej 1440 px podstawa spada do 9 px, więc `1.6rem` daje tam 14.4 px. Blok, który przywraca rozmiar samego tekstu czytanego, stoi na KOŃCU tego pliku - patrz "PRÓG PONIŻEJ 90em". ===================================================================== */ /* ===================================================================== TOKENY Jedyne miejsce z kolorami i rozmiarami tej strony. Arkusze sekcji sięgają po zmienne, nigdy po wartość wprost. ===================================================================== */ /* ===================================================================== MYŚLNIK W NAGŁÓWKACH - od 29.09.2026 Cormorant Garamond rysuje zwykły dywiz „-” jako ukośną kreskę, która w nagłówku („Bransoletki - z zapięciem”) wygląda jak zły znak. Krój „DM Myslnik” obejmuje WYŁĄCZNIE znak U+002D i bierze go z Josta (prosty, poziomy). Stoi pierwszy w `--dm-pismo-tyt`, więc każdy nagłówek pisany krojem tytułowym dostaje prosty myślnik, a reszta liter zostaje z Cormoranta. ===================================================================== */ @font-face { font-family: 'DM Myslnik'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/dm-013.woff2") format('woff2'); unicode-range: U+002D; } @font-face { font-family: 'DM Myslnik'; font-style: italic; font-weight: 300 700; font-display: swap; src: url("assets/fonts/dm-013.woff2") format('woff2'); unicode-range: U+002D; } :root { /* --- Kolory --- */ --dm-tekst: #2E2D2A; /* tekst główny */ --dm-tekst-2: #5F5C56; /* akapity */ --dm-tekst-3: #686454; /* nadtytuły, metadane */ --dm-tekst-jasny: #FFFDF8; /* tekst na ciemnym tle */ --dm-biel: #FFFFFF; --dm-tlo-jasne: #FBF9F4; --dm-tlo-cieple: #F6F2E9; --dm-tlo-zdjecia: #EFE9DD; --dm-ramka: #EFE9DD; --dm-ramka-pole: #E4DCCC; /* * Ramka pola, w którym stoi kursor. Ciemniejsza od spoczynkowej * o tyle, żeby było widać, gdzie się pisze - i nie więcej. Paleta * marki nie ma koloru akcentu; ciemny brąz tekstu w tej roli wygląda * na obwódkę wstawioną przez pomyłkę. */ --dm-ramka-pole-aktywna: #C9BB9F; --dm-ramka-naglowka: #F0ECE3; --dm-wyprzedaz: #A94F72; /* Stopka */ --dm-stopka-tlo: #1B1B18; --dm-stopka-linia: #33322C; /* * Tekst w stopce jest jasny, nie szary. * * Szarość na czerni wygląda w projekcie graficznym spokojnie, a na * ekranie przestaje być czytelna - zwłaszcza przy mniejszej jasności * i na telefonie w słońcu. Hierarchię robimy przezroczystością bieli, * nie zejściem w szarość. Nie cofać tego do wartości szarych. */ --dm-stopka-tekst: rgba(255, 253, 248, .80); --dm-stopka-prawa: rgba(255, 253, 248, .64); /* ================================================================= AKCENT: JEDEN KOLOR, WZIĘTY Z KAMIENIA Do 1.09.2026 rolę koloru pełniła tu tęcza z logo, rozłożona po całej stronie: pasek nad menu, separator pod każdym nagłówkiem, kółka ikon w pasie zaufania, punktory stopki. Właścicielka napisała, że jest przez to „zbyt cukierkowo i dziecinnie", a marka ma iść w premium. Zamiast ośmiu kolorów jest jeden: przygaszona zieleń prehnitu - kamienia, który klientka ma w „Górskiej Harmonii" i w kolekcji 2027. Kolor ma więc źródło w towarze, a nie w gradiencie. ZASADA: akcent wchodzi w TRZY miejsca i nie więcej - separator, nadtytuł sekcji, stan aktywny. Rozlany szerzej wraca do tego, od czego uciekamy. Barwę na tej stronie wnoszą zdjęcia kamieni. ================================================================= */ --dm-akcent: #5C6B54; /* prehnit przygaszony */ --dm-akcent-ciemny:#47533F; /* najechanie, stan wciśnięty */ --dm-akcent-tlo: #EDEFE9; /* kółka ikon, delikatne podkłady */ /* * Pasek nad menu. Był gradientem; jest grafitem tekstu, żeby górna * krawędź strony zaczynała się spokojnie. */ --dm-pasek-tlo: #2E2D2A; --dm-pasek-tekst: #FFFDF8; /* * Pionowa oś na ekranie wyboru. Ten ekran zostaje kolorowy - to * jedyna strona pokazująca obie gałęzie naraz i jedyne miejsce * z logo w wersji akwarelowej - ale sama oś jest grafitowa, * ta sama co pasek nad menu. * * Zieleń akcentu stała tu przez jedną rundę i wyglądała jak trzeci * kolor wpuszczony między dwa zdjęcia. Grafit czyta się jak krawędź * kadru, a nie jak element do zauważenia - a to jest cała rola tej * kreski. Akcent zostaje tam, gdzie coś znaczy: w separatorze, * nadtytule i stanie aktywnym. */ --dm-os-wyboru: #2E2D2A; /* * Pastelowy gradient ZOSTAJE - używa go wyłącznie gałąź * fotograficzna (blok rezerwacji, karta na stronie kontaktu). * Uwaga klientki dotyczyła biżuterii. */ --dm-pastel: linear-gradient(115deg, #EAF6EC 0%, #FBF7E4 34%, #FDEFF3 64%, #F1ECF9 82%, #E9F5F9 100%); /* --- Kroje --- */ --dm-pismo: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --dm-pismo-tyt: 'DM Myslnik', 'Cormorant Garamond', 'Times New Roman', Georgia, serif; /* --- Skala pisma --- * Tekst czytany nie schodzi poniżej 16 px, opisy i metadane poniżej * 14 px. Wersaliki z dużym odstępem liter to etykiety, nie treść, * i mogą być mniejsze - ale nie poniżej 11 px. */ --dm-txt-akapit: 1.6rem; --dm-txt-maly: 1.4rem; --dm-txt-nazwa: 1.6rem; --dm-txt-label: 1.2rem; --dm-txt-badge: 1.1rem; --dm-txt-menu: 1.35rem; /* --- Układ --- */ /* Wzor szerokosci (spec. 2, M9): kontener 140rem w obu galeziach, oddech z progow motywu nadrzednego, nie mniej niz 10 px. */ --dm-szer-sklep: 140rem; --dm-szer-foto: 128rem; /* galaz foto zostaje przy szerokosci sprzed wzoru - uklad.css, .dm-galaz-foto */ --dm-oddech: max(var(--bp-oddech, 1rem), 10px); --dm-odstep-sekcji: 6.6rem; --dm-gap: 2.2rem; --dm-gap-galerii: 1.4rem; /* --- Drobne znaki w pikselach (spec. 2, M8: kreska, punkt, ikona) --- * Romb separatora, kropka listy, kreska osi, znak filtra i licznik * przy ikonie koszyka maja stala wielkosc - skalowane z ekranem * rozmywalyby sie przy podstawie 9 px. Cel dotyku 44 px to minimum * wygody palca, niezalezne od skali pisma. */ --dm-romb: 5px; --dm-romb-xs: 4px; --dm-romb-lg: 6px; --dm-romb-xl: 7px; --dm-kropka: 5px; --dm-os-grubosc: 8px; --dm-znak-filtra: 12px; --dm-licznik-y: -5px; --dm-licznik-x: -9px; --dm-cel-dotyku: 44px; --dm-rozmycie: 6px; /* --- Promienie: w pikselach, bo mają NIE skalować się z ekranem --- */ --dm-r-karta: 6px; --dm-r-blok: 8px; --dm-r-mini: 4px; --dm-r-panel: 10px; --dm-r-pigula: 999px; /* --- Cienie --- */ --dm-cien-karty: 0 14px 34px rgba(60, 55, 45, .10); --dm-cien-logo: 0 22px 54px rgba(30, 26, 20, .40); /* --- Ruch --- */ --dm-czas-hover: 900ms; --dm-krzywa: cubic-bezier(.4, 0, .2, 1); --dm-krzywa-slajd: cubic-bezier(.5, .05, .2, 1); /* ================================================================= NADPISANIE TOKENÓW MOTYWU NADRZĘDNEGO Formularz kontaktowy, okno zapytania i sekcje odziedziczone z motywu nadrzędnego czytają te zmienne. Podmiana tutaj wystarczy, żeby wpisały się w tę stronę - nie trzeba przepisywać ich arkuszy ani duplikować znaczników. ================================================================= */ --bp-akcent: #2E2D2A; --bp-akcent-ciemny: #4A4842; --bp-czern: #2E2D2A; --bp-tekst: #2E2D2A; --bp-tekst-2: #5F5C56; --bp-ramka: #E4DCCC; --bp-ramka-lekka: #EFE9DD; --bp-tlo-jasne: #FBF9F4; --bp-biel: #FFFFFF; --bp-pismo: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --bp-tresc: 140rem; /* wzor szerokosci - spec. 2, M9 */ --bp-btn-promien: 999px; --bp-btn-wysciolka: 1.7rem 3.2rem; /* --- Przycisk: JEDEN zestaw wartości na całą stronę --- */ --dm-btn-pismo: 1.15rem; --dm-btn-odstep: .18em; --dm-btn-waga: 400; --dm-btn-wysciolka: 1.5rem 3.2rem; --dm-btn-promien: 999px; --dm-btn-czas: 260ms; } /* ===================================================================== TOKENY ODCIENI (spec. 2, M4) Kazdy kolor, ktory arkusze sekcji wpisywaly wprost, stoi teraz tutaj jako token - te same wartosci, wiec obraz strony sie nie zmienia. Odcienie polprzezroczyste powstaja z tokenow przez color-mix(), zeby zmiana koloru bazowego przechodzila takze do nich. ===================================================================== */ :root { --dm-blekit: #8FD2E2; --dm-cien-ciemny: #14120E; --dm-cien-cieply: #3C372D; --dm-cien-cieply-2: #2B2923; --dm-czern-galerii: #0C0C0E; --dm-grafit: #4A4842; --dm-kremowy: #F1EADD; --dm-linia-ciemna: #D8D0BF; --dm-linia-jasna: #F2EEE5; --dm-linia-menu: #F4F0E7; --dm-odnosnik-najechanie: #86837B; --dm-pastel-fiolet: #F1ECF9; --dm-pastel-miod: #FDF3D9; --dm-pastel-roz: #FDEFF3; --dm-pastel-zielen: #E9F5EB; --dm-pastel-zolty: #FBF7E4; --dm-ramka-2: #E0D8C8; --dm-ramka-3: #DED6C6; --dm-ramka-4: #EAE3D6; --dm-stan-brak: #9A9186; --dm-stan-dostepny: #4E9E62; --dm-stan-wkrotce: #C9922F; --dm-szalwia: #A8B79C; --dm-tekst-4: #5A5750; --dm-tekst-5: #6E6A5C; --dm-tekst-ciemny: #4A483F; --dm-tekst-slaby: #7C7768; --dm-zaslona: #16140F; --dm-zaslona-2: #181510; --dm-zielen: #6E9A7C; --dm-zielen-ciemna: #3C6046; /* Odcienie z przezroczystoscia - z tokenow wyzej, przez color-mix(). */ --dm-biel-a12: color-mix(in srgb, var(--dm-biel) 12%, transparent); --dm-biel-a24: color-mix(in srgb, var(--dm-biel) 24%, transparent); --dm-biel-a60: color-mix(in srgb, var(--dm-biel) 60%, transparent); --dm-biel-a82: color-mix(in srgb, var(--dm-biel) 82%, transparent); --dm-biel-a90: color-mix(in srgb, var(--dm-biel) 90%, transparent); --dm-biel-a92: color-mix(in srgb, var(--dm-biel) 92%, transparent); --dm-cien-ciemny-a45: color-mix(in srgb, var(--dm-cien-ciemny) 45%, transparent); --dm-cien-ciemny-a82: color-mix(in srgb, var(--dm-cien-ciemny) 82%, transparent); --dm-cien-ciemny-a92: color-mix(in srgb, var(--dm-cien-ciemny) 92%, transparent); --dm-cien-cieply-2-a6: color-mix(in srgb, var(--dm-cien-cieply-2) 6%, transparent); --dm-cien-cieply-a12: color-mix(in srgb, var(--dm-cien-cieply) 12%, transparent); --dm-cien-cieply-a7: color-mix(in srgb, var(--dm-cien-cieply) 7%, transparent); --dm-czern-galerii-a92: color-mix(in srgb, var(--dm-czern-galerii) 92%, transparent); --dm-stan-brak-a18: color-mix(in srgb, var(--dm-stan-brak) 18%, transparent); --dm-stan-dostepny-a18: color-mix(in srgb, var(--dm-stan-dostepny) 18%, transparent); --dm-stan-wkrotce-a18: color-mix(in srgb, var(--dm-stan-wkrotce) 18%, transparent); --dm-tekst-a12: color-mix(in srgb, var(--dm-tekst) 12%, transparent); --dm-tekst-a26: color-mix(in srgb, var(--dm-tekst) 26%, transparent); --dm-tekst-a42: color-mix(in srgb, var(--dm-tekst) 42%, transparent); --dm-tekst-a62: color-mix(in srgb, var(--dm-tekst) 62%, transparent); --dm-tekst-a88: color-mix(in srgb, var(--dm-tekst) 88%, transparent); --dm-tekst-jasny-a16: color-mix(in srgb, var(--dm-tekst-jasny) 16%, transparent); --dm-tekst-jasny-a45: color-mix(in srgb, var(--dm-tekst-jasny) 45%, transparent); --dm-tekst-jasny-a78: color-mix(in srgb, var(--dm-tekst-jasny) 78%, transparent); --dm-tekst-jasny-a80: color-mix(in srgb, var(--dm-tekst-jasny) 80%, transparent); --dm-tekst-jasny-a82: color-mix(in srgb, var(--dm-tekst-jasny) 82%, transparent); --dm-tekst-jasny-a88: color-mix(in srgb, var(--dm-tekst-jasny) 88%, transparent); --dm-tekst-jasny-a92: color-mix(in srgb, var(--dm-tekst-jasny) 92%, transparent); --dm-zaslona-2-a0: color-mix(in srgb, var(--dm-zaslona-2) 0%, transparent); --dm-zaslona-2-a12: color-mix(in srgb, var(--dm-zaslona-2) 12%, transparent); --dm-zaslona-2-a66: color-mix(in srgb, var(--dm-zaslona-2) 66%, transparent); --dm-zaslona-2-a72: color-mix(in srgb, var(--dm-zaslona-2) 72%, transparent); --dm-zaslona-a28: color-mix(in srgb, var(--dm-zaslona) 28%, transparent); --dm-zaslona-a34: color-mix(in srgb, var(--dm-zaslona) 34%, transparent); --dm-zaslona-a50: color-mix(in srgb, var(--dm-zaslona) 50%, transparent); --dm-zaslona-a55: color-mix(in srgb, var(--dm-zaslona) 55%, transparent); } /* ===================================================================== BAZA Reguły celują w `body.dm`, a nie w samo `body`. Powód jest praktyczny: ekran logowania, kokpit i podglądy edytora korzystają z tego samego arkusza wtedy, gdy nie powinny, a klasa daje jedno miejsce, w którym da się ten wygląd włączyć albo wyłączyć. ===================================================================== */ /* * CYFRY RÓWNEJ WYSOKOŚCI, NIE TEKSTOWE. * * Cormorant Garamond ma domyślnie cyfry TEKSTOWE (staroangielskie): * zero i siódemka schodzą poniżej linii pisma, jedynka jest niska. * W ciągłym tekście to zaleta - w nazwie produktu „2027.PERŁA naszyjnik" * wygląda tak, jakby cyfry były pisane małymi literami obok wersalików. * * Krój ma zestaw `lnum` (sprawdzone w plikach `.woff2`), więc wystarczy * o niego poprosić. Reguła stoi na `body`, bo `font-variant-numeric` * dziedziczy się w dół i działa TYLKO tam, gdzie krój ma czego użyć - * Jost cyfr tekstowych nie ma, więc go to nie dotyczy. Jedna reguła * zamiast wyliczania miejsc, w których pojawia się liczba. */ body.dm { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; margin: 0; background: var(--dm-biel); color: var(--dm-tekst); font-family: var(--dm-pismo); font-weight: 300; font-size: var(--dm-txt-akapit); line-height: 1.9; overflow-x: hidden; } /* * KOLOR ODNOŚNIKA MA ZEROWĄ WAGĘ SELEKTORA. * * `:where()` sprawia, że ta reguła nie wygrywa z niczym - ustala punkt * wyjścia i ustępuje każdej klasie. Bez tego zwykłe `body.dm a` ma wagę * WYŻSZĄ niż `.dm-wybor__polowka` czy `.dm-btn--jasny` i po cichu * przemalowuje na ciemno każdy jasny napis, który jest odnośnikiem: * nagłówki na ekranie wyboru, przyciski na zdjęciu, pozycje w stopce. * * Objaw jest mylący, bo dotyczy WYŁĄCZNIE tekstu wewnątrz `` - * ten sam napis w `` obok wygląda poprawnie. */ :where(body.dm) a { color: var(--dm-tekst); text-decoration: none; transition: color 200ms; } :where(body.dm) a:where(:hover) { color: var(--dm-odnosnik-najechanie); } /* * ZEROWANIE MARGINESÓW TEŻ IDZIE W `:where()`. * * Poprawione 27.08.2026. `body.dm p { margin: 0 }` ma wagę (0,1,1) * i wygrywało z każdą klasą pojedynczą - czyli z połową odstępów * w arkuszach sekcji. Objaw: przycisk siedzi na tekście, a wpisany * w arkuszu margines „nie działa". * * Sprawdzone pomiarem na żywej stronie: `.dm-slajd__opis` miał * `margin-bottom: 3.6rem` w pliku i `0px` w przeglądarce. * * `:where()` nie dolicza wagi swojego argumentu, więc te reguły ustawiają * punkt wyjścia, zamiast wygrywać ze wszystkim, co po nich. To ta sama * zasada, którą stosuje już kolor odnośnika kilka linii wyżej. */ :where(body.dm) h1, :where(body.dm) h2, :where(body.dm) h3 { font-family: var(--dm-pismo-tyt); font-weight: 300; line-height: 1.14; margin: 0; } :where(body.dm) p { margin: 0; } body.dm em, body.dm .dm-kursywa { font-style: italic; } /* * Pasek przewijania znika WYŁĄCZNIE w karuzelach, bo te mają własne * strzałki. Ukrycie go tam, gdzie strzałek nie ma, zostawia treść * bez widocznego sposobu przewijania - na tablecie i na myszy bez * kółka to ślepa uliczka. */ .dm-karuzela::-webkit-scrollbar { height: 0; width: 0; } .dm-karuzela { scrollbar-width: none; } /* ===================================================================== PRÓG PONIŻEJ 90em - PRZYWRÓCENIE ROZMIARU TEKSTU Poniżej 1440 px podstawa rem to 9 px, więc `1.6rem` daje 14.4 px - pod progiem czytelności. Nagłówki, badge i etykiety zostawiamy, bo one mają się skalować razem z ekranem. Przywracamy wyłącznie ten tekst, który ktoś naprawdę czyta. Blok stoi na końcu pliku celowo: ma wygrywać z regułami wyżej. ===================================================================== */ @media (max-width: 89.99em) { :root { --dm-txt-akapit: 1.78rem; /* 16 px przy podstawie 9 px */ --dm-txt-maly: 1.56rem; /* 14 px */ --dm-txt-nazwa: 1.78rem; --dm-txt-menu: 1.5rem; } } /* ===================================================================== PRÓG TELEFONU - TEKST POMOCNICZY O PUNKT WIĘKSZY Przy 14 px kamienie pod nazwą produktu, napis „dostępne w magazynie" i wiersz zapewnień czytało się na telefonie jak przypis. Na szerokim ekranie te same 14 px są w porządku, bo tekst stoi bliżej oka i w szerszej kolumnie - dlatego zmiana obejmuje sam telefon. ===================================================================== */ @media (max-width: 60em) { :root { --dm-txt-maly: 1.67rem; /* 15 px przy podstawie 9 px */ --dm-txt-label: 1.33rem; /* 12 px */ } } /* ===================================================================== CZYTELNOŚĆ DROBNEGO PISMA - od 30.09.2026 Podpisy pod ikonami, nadtytuły, metki i napisy na przyciskach były na telefonie mniejsze niż 12 px (podpisy „od 300 zł" - 10 px) i nie dało się ich przeczytać. Najmniejszy tekst na stronie: 12 px na metkach, 13-14 px na etykietach, 15-16 px na tekście pomocniczym. Blok stoi na końcu pliku celowo - wygrywa z progami wyżej. ===================================================================== */ :root { --dm-txt-maly: 1.5rem; /* 15 px przy podstawie 10 px */ --dm-txt-label: 1.3rem; /* 13 px */ --dm-txt-badge: 1.2rem; /* 12 px */ --dm-btn-pismo: 1.25rem; /* 12.5 px */ } @media (max-width: 89.99em) { :root { --dm-txt-maly: 1.67rem; /* 15 px przy podstawie 9 px */ --dm-txt-label: 1.44rem; /* 13 px */ --dm-txt-badge: 1.33rem; /* 12 px */ --dm-btn-pismo: 1.39rem; /* 12.5 px */ } } @media (max-width: 60em) { :root { --dm-txt-maly: 1.78rem; /* 16 px */ --dm-txt-label: 1.56rem; /* 14 px */ --dm-txt-badge: 1.44rem; /* 13 px */ --dm-btn-pismo: 1.5rem; /* 13.5 px */ } } /* Podpis pod ikoną w pasie zaufania („od 300 zł", „w dni robocze"). `body` przed klasą - arkusz układu wczytuje się po tym pliku. */ body .dm-zaufanie__podpis { font-size: var(--dm-txt-maly); }