/* =========================================================================== TOKENY — jedno miejsce, w którym zmienia się wygląd całej strony. Paleta: ciemna, kinowa. Zdjęcia mają świecić jak obrazy w galerii, dlatego tło jest głębokie i neutralne, a jedynym akcentem jest mosiądz. =========================================================================== */ /* --- Kroje pisma (self-hosted, bez zapytań do Google) ------------------- */ /* Cormorant Garamond i Jost mają pełny zestaw polskich znaków (latin-ext). */ @import url('./fonts.css'); :root { color-scheme: dark; /* ---- TŁO ------------------------------------------------------------ */ --tlo: #0A0A0B; /* strona */ --tlo-2: #101012; /* sekcja wyróżniona */ --tlo-3: #17171A; /* karta, pole formularza */ --tlo-4: #202024; /* hover na karcie */ --tlo-krycie: rgba(10, 10, 11, 0.72); /* przyklejony nagłówek */ /* ---- TEKST ---------------------------------------------------------- */ /* Wartości dobrane pod czytelność, nie „na oko”. Kontrast liczony wobec tła strony (#0A0A0B) wg WCAG. Próg AA to 4,5:1, AAA to 7:1. Poprzednie --atrament-3 (5,92:1) i --atrament-4 (3,16:1) były za słabe, a używaliśmy ich do NAJMNIEJSZEGO tekstu na stronie — najgorsze możliwe połączenie. Odcień zachowany, podniesiona sama jasność. */ --atrament: #F4F1EB; /* nagłówki 17,7:1 AAA */ --atrament-2: #D5D0C6; /* tekst ciągły 12,8:1 AAA */ --atrament-3: #A8A39A; /* podpisy, etykiety 7,7:1 AAA */ --atrament-4: #8E8A82; /* metadane, stopka 5,5:1 AA */ /* ---- LINIE ---------------------------------------------------------- */ --linia: rgba(239, 235, 227, 0.11); --linia-mocna: rgba(239, 235, 227, 0.20); --linia-slaba: rgba(239, 235, 227, 0.06); /* ---- AKCENT (mosiądz — maksymalnie 2% powierzchni) ------------------- */ --mosiadz: #C6A063; --mosiadz-jasny: #E0C795; --mosiadz-ciemny: #8A6E42; --mosiadz-mgla: rgba(198, 160, 99, 0.14); /* ---- AKCENT DRUGI (mazurska zieleń / woda) --------------------------- */ --woda: #5E7D78; --las: #3A4A3E; /* ---- TYPOGRAFIA ----------------------------------------------------- */ --f-tytul: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif; --f-tekst: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Skala płynna — clamp() zamiast media queries. Podniesiona o jeden stopień względem pierwotnej wersji: strona ma być czytelna także dla osób po sześćdziesiątce, a 11-pikselowe wersaliki były nie do przeczytania bez wysiłku. */ --t-mikro: 0.8125rem; /* 13px — etykiety */ --t-maly: 0.875rem; /* 14px */ --t-sm: 0.9375rem; /* 15px */ --t-baza: 1.0625rem; /* 17px */ --t-md: 1.1875rem; /* 19px — lead */ --t-lg: clamp(1.25rem, 0.95rem + 0.6vw, 1.5rem); --t-xl: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem); --t-2xl: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); --t-3xl: clamp(2.75rem, 1.3rem + 5.2vw, 6rem); /* tytuł hero */ --t-numer: clamp(3.5rem, 2rem + 7vw, 9rem); /* wielka liczba */ --lh-ciasny: 1.02; --lh-tytul: 1.12; --lh-tekst: 1.78; /* dużo powietrza: diakrytyki + wygodne prowadzenie oka */ --ls-tytul: -0.012em; --ls-tekst: 0.004em; /* Szerokie WERSALIKI to sygnał „premium”, ale rozstrzelone 0,24em przy 11 px zamieniało etykiety w ciąg pojedynczych liter. 0,12em zachowuje charakter i wyraźnie ułatwia czytanie. */ --ls-etyk: 0.12em; --ls-etyk-s: 0.14em; --ls-btn: 0.09em; /* ---- ODSTĘPY (baza 4px) --------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px; --s-13: 160px; /* Wysokość przyklejonego nagłówka po przewinięciu — pasek z ceną i kotwice muszą się o nią odsunąć, inaczej chowają się pod nagłówkiem. */ --h-naglowek: 64px; --offset-kotwicy: calc(var(--h-naglowek) + 32px); --sekcja-y: clamp(72px, 9vw, 168px); --margines: clamp(20px, 5vw, 72px); --max-w: 1440px; --max-tekst: 62ch; /* ---- PROMIENIE (luksus = kąt prosty) --------------------------------- */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pigulka: 999px; /* ---- CIENIE (prawie nieobecne) --------------------------------------- */ --cien-uniesienie: 0 2px 24px rgba(0, 0, 0, 0.45); --cien-modal: 0 32px 80px rgba(0, 0, 0, 0.7); /* ---- RUCH ------------------------------------------------------------ */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); /* „drogie” wyhamowanie */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); --e-soft: cubic-bezier(0.4, 0, 0.2, 1); --d-1: 160ms; --d-2: 280ms; --d-3: 480ms; --d-4: 760ms; --d-5: 1200ms; /* ---- PROPORCJE ------------------------------------------------------- */ --ar-hero: 21 / 9; --ar-szeroki: 16 / 9; --ar-karta: 3 / 2; --ar-portret: 4 / 5; } /* Szeroka gama kolorów na ekranach P3 — mosiądz zyskuje głębi. */ @media (color-gamut: p3) { :root { --mosiadz: color(display-p3 0.76 0.63 0.40); --mosiadz-jasny: color(display-p3 0.87 0.78 0.60); } } @media (prefers-reduced-motion: reduce) { :root { --d-3: 1ms; --d-4: 1ms; --d-5: 1ms; } } /* Gdy użytkownik ma w systemie włączone „zwiększ kontrast”, idziemy do końca: tekst niemal biały, linie wyraźnie widoczne, akcent rozjaśniony. Ustawienie to jest częste u osób ze słabszym wzrokiem. */ @media (prefers-contrast: more) { :root { --atrament: #FFFDF8; --atrament-2: #EDE9E1; --atrament-3: #C9C4BA; --atrament-4: #ADA89F; --linia: rgba(239, 235, 227, 0.28); --linia-mocna: rgba(239, 235, 227, 0.46); --linia-slaba: rgba(239, 235, 227, 0.18); --mosiadz: #E0C795; --mosiadz-jasny: #F2DFB8; } } /* Typowane własności — pozwalają animować gradienty i połysk. Bez @property przeglądarka traktuje je jak tekst i nie umie interpolować. */ @property --polysk { syntax: ''; inherits: false; initial-value: -30%; } @property --obrys { syntax: ''; inherits: false; initial-value: 0px; }