/* ======================================================================= ZAGRODA STUDZIENNO — design tokens Wyekstrahowane z /projekt/template_clean.html (eksport Claude Design canvas) ----------------------------------------------------------------------- WAŻNA OBSERWACJA: cała paleta to 9 kolorów bazowych + przezroczystości. Każde rgba() w projekcie to alfa jednego z hexów poniżej: rgba(43,38,33,x) = #2B2621 (tekst) rgba(15,30,20,x) = #0F1E14 (zieleń najciemniejsza) rgba(24,48,32,x) = #183020 (zieleń ciemna) rgba(123,74,33,x) = #7B4A21 (brąz) rgba(247,243,235,x)= #F7F3EB (kremowe tło) rgba(238,231,218,x)= #EEE7DA (piaskowy) rgba(223,213,194,x)= #DFD5C2 (linia / tekst na ciemnym) Dlatego obok hexów definiuję trójki RGB — do użycia jako rgb(var(--rgb-tekst) / 0.8). Nie wpisuj rgba() na sztywno. ======================================================================= */ :root { /* --------------------------------------------------------------- 1. KOLORY — trójki RGB (baza do przezroczystości) --------------------------------------------------------------- */ --rgb-zielen-noc: 15 30 20; /* #0F1E14 */ --rgb-zielen-ciemna: 24 48 32; /* #183020 */ --rgb-zielen-las: 34 66 45; /* #22422D */ --rgb-braz: 123 74 33; /* #7B4A21 */ --rgb-zloty: 200 154 106; /* #C89A6A */ --rgb-krem: 247 243 235; /* #F7F3EB */ --rgb-piasek: 238 231 218; /* #EEE7DA */ --rgb-linia: 223 213 194; /* #DFD5C2 */ --rgb-tekst: 43 38 33; /* #2B2621 */ /* --------------------------------------------------------------- 2. KOLORY MARKI — zieleń (rola: identyfikacja, ciemne sekcje, linki) --------------------------------------------------------------- */ --kolor-zielen-noc: #0F1E14; /* tło sekcji „Zajęcia z końmi”, tło stopki, tło wyróżnionej karty cennika, kolor nagłówków h2/h3 na jasnym tle */ --kolor-zielen-ciemna: #183020; /* tło kafelków kroków 1-2-3, obramowanie 4px zdjęcia w sekcji zajęć, linia dzieląca w stopce, kolor nazwy „Zagroda Studzienno” w headerze, kolor ceny w cenniku */ --kolor-zielen-las: #22422D; /* domyślny kolor linków (a{}), kropki tła strony, obramowanie przycisków outline w cenniku, tło przycisku „Otwórz w Google Maps”, tło kółka z numerem kroku, nadtytuły w cenniku */ /* --------------------------------------------------------------- 3. KOLORY MARKI — brąz (rola: AKCENT / wszystkie CTA / nadtytuły) --------------------------------------------------------------- */ --kolor-akcent-braz: #7B4A21; /* przyciski CTA (header, hero, cennik, formularz), WSZYSTKIE nadtytuły sekcji (eyebrow), pigułki-badge „Ulubione przez dzieci” / „Oferta specjalna”, pigułka z imieniem „Xymena Sośnicka”, podpis Caveat, daty wpisów bloga, lewa krawędź 4px ramki adresowej, hover linków */ --kolor-akcent-braz-hover:#5E3717; /* JEDYNY zadeklarowany hover przycisków brązowych (style-hover) — 3 wystąpienia */ --kolor-akcent-zloty: #C89A6A; /* akcent NA CIEMNYM TLE: w H1 hero, kropka w pigułce lokalizacji, nadtytuły w ciemnych sekcjach, numery kroków 1-2-3, cena „Indywidualnie”, numer telefonu w stopce i w sekcji zajęć */ /* --------------------------------------------------------------- 4. TŁA I POWIERZCHNIE --------------------------------------------------------------- */ --tlo-strony: #F7F3EB; /* body */ --tlo-karty: #FCFAF6; /* domyślne tło kart: oferta, nocleg, cennik, formularz, pływająca karta „Kwalifikacje” */ --tlo-panel-bialy: #ffffff; /* pasek udogodnień w noclegach, panel kontaktu, pola formularza */ --tlo-piasek: #EEE7DA; /* placeholdery zdjęć, przycisk „Wirtualny spacer” */ --tlo-piasek-mgla: rgb(var(--rgb-piasek) / .6); /* tło sekcji „Wybierz swój rytm” i sekcji bloga — UWAGA: półprzezroczyste, prześwituje przez nie kropkowany wzór body */ --tlo-podkreslenie: #F3EADF; /* ramka „Zasada: karmimy…”, ramka „W nawigacji wpisz…” */ --tlo-boks-kontakt: #F7F3EB; /* małe boksy adres/telefony w sekcji kontakt */ --tlo-header: rgb(var(--rgb-krem) / .94); /* sticky header + backdrop-filter */ --tlo-nakladka-foto: rgb(var(--rgb-zielen-noc) / .85); /* pigułki na zdjęciach w mozaice zwierząt, dolna część gradientu podpisu */ /* --------------------------------------------------------------- 5. TEKST --------------------------------------------------------------- */ --tekst-podstawowy: #2B2621; /* body */ --tekst-naglowek: #0F1E14; /* h1–h3 na jasnym tle */ --tekst-akapit: rgb(var(--rgb-tekst) / .8); /* leady i opisy — 13 wystąpień */ --tekst-akapit-mocny: rgb(var(--rgb-tekst) / .85); /* listy punktowane, „O mnie” */ --tekst-drugorzedny: rgb(var(--rgb-tekst) / .75); /* opis w karcie kwalifikacji */ --tekst-podpis: rgb(var(--rgb-tekst) / .7); /* captiony udogodnień, hint formularza, zgoda RODO */ --tekst-podpis-slaby: rgb(var(--rgb-tekst) / .65); /* rola pod podpisem Caveat */ --tekst-jednostka: rgb(var(--rgb-tekst) / .6); /* „/ os. / doba” przy cenie */ --tekst-na-ciemnym: #F7F3EB; /* tekst w sekcjach ciemnych */ --tekst-na-ciemnym-mig: #DFD5C2; /* akapity, podtytuły kroków, stopka */ --tekst-bialy: #ffffff; /* H1 hero, h2 w ciemnej sekcji, tekst na CTA */ --tekst-stopka-drobny: rgb(var(--rgb-linia) / .6); /* pasek copyright */ --tekst-na-pasku-zaufania: rgb(var(--rgb-zielen-ciemna) / .85); --tekst-placeholder-foto:#8a8073; /* JEDYNY kolor spoza palety — tekst „zdjęcie — do podesłania”. Kontrast NIE spełnia WCAG na #EEE7DA; token tymczasowy, do usunięcia razem z placeholderami */ /* --------------------------------------------------------------- 6. OBRAMOWANIA --------------------------------------------------------------- */ --linia: #DFD5C2; /* 17× border:1px + bordery sekcji — domyślna */ --linia-delikatna: #EEE7DA; /* border-top nad linkami w stopce kart, border-bottom pod ceną */ --linia-ciemna: #183020; /* podział w stopce, border-bottom pod ceną w ciemnej karcie */ --linia-akcent: rgb(var(--rgb-braz) / .7); /* 2px obramowanie wyróżnionej karty oferty */ --linia-akcent-slaba:rgb(var(--rgb-braz) / .4); /* ramka „Zasada: karmimy…” */ --linia-na-ciemnym: rgb(var(--rgb-krem) / .35); /* pigułka lokalizacji w hero */ --linia-na-ciemnym-mocna: rgb(var(--rgb-krem) / .5); /* przycisk ghost w hero */ --grubosc-linii: 1px; --grubosc-linii-akcent: 2px; /* karty wyróżnione */ --grubosc-ramki-foto: 4px; /* obramowanie zdjęcia w sekcji zajęć (#183020) */ --grubosc-akcent-boczny: 4px; /* border-left ramki adresowej */ /* --------------------------------------------------------------- 7. STANY (BRAK w projekcie — dodaję jako obowiązkowe uzupełnienie) --------------------------------------------------------------- */ --kolor-focus: #C89A6A; --obrys-focus: 2px solid var(--kolor-focus); --odsuniecie-focus: 2px; --kolor-blad: #B0341F; /* propozycja — walidacja formularza */ --kolor-sukces: #22422D; /* propozycja — komunikat wysłania */ --tlo-hover-ghost: rgb(var(--rgb-krem) / .12); /* z style-hover przycisku ghost */ /* --------------------------------------------------------------- 8. TYPOGRAFIA — rodziny Wczytane wagi (z @font-face w template.html): Newsreader 400, 400 italic, 600, 700 Manrope 400, 500, 600, 700 (500 wczytana, ale nigdzie nieużyta) Caveat 600 (!!! używana bez deklaracji wagi => przeglądarka próbuje 400 i syntetyzuje — patrz PUŁAPKI) Wszystkie z zakresem latin-ext — KONIECZNE dla polskich znaków. --------------------------------------------------------------- */ --font-naglowki: Newsreader, "Times New Roman", Georgia, serif; --font-tresc: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-recznie: Caveat, "Segoe Script", cursive; /* podpis „Xymena Sośnicka” + teksty placeholderów zdjęć */ /* --------------------------------------------------------------- 9. TYPOGRAFIA — skala rozmiarów (wartości desktopowe z projektu) Nazwy ról zamiast liczb; wartości płynne dodane tam, gdzie różnica desktop/mobile jest duża. --------------------------------------------------------------- */ --ts-micro: 10px; /* podtytuł w headerze „Agroturystyka · Zagroda Rekreacyjna”, teksty pigułek-badge */ --ts-nadtytul: 11px; /* eyebrow sekcji (14 wystąpień), zgoda RODO, copyright */ --ts-drobny: 12px; /* podpisy, meta, linki stopki, opisy udogodnień, hint formularza */ --ts-maly: 13px; /* tekst w kartach, linki-strzałki, pasek zaufania, przyciski małe */ --ts-baza: 14px; /* nawigacja, pola formularza, tytuły kroków, tekst kontaktu UWAGA: na mobile pola formularza MUSZĄ mieć 16px (iOS zoom) */ --ts-baza-plus: 15px; /* lead sekcji, przyciski hero, akapit „O mnie” */ --ts-lead: 16px; /* lead w ciemnej sekcji zajęć */ --ts-lead-hero: 17px; /* lead w hero */ --ts-ikona-mala: 18px; /* emoji inline w ramkach informacyjnych */ --ts-h5: 20px; /* „W ramach spotkań m.in.:”, nazwa marki w stopce, tekst placeholdera */ --ts-h4-blog: 21px; /* tytuł wpisu bloga */ --ts-h4: 22px; /* tytuł karty noclegu */ --ts-h3: 24px; /* tytuł karty oferty, nazwa marki w headerze, „Zapytaj o termin” */ --ts-h3-duzy: 26px; /* tytuł karty cennika, podpis Caveat, podpis mozaiki, emoji-ikony */ --ts-cena: 30px; /* wiersz ceny w cenniku */ --ts-h2-maly: clamp(26px, 4.2vw, 34px); /* h2: O mnie, Blog, Kontakt */ --ts-h2: clamp(28px, 5vw, 38px); /* h2: główne sekcje */ --ts-h2-ciemna: clamp(28px, 5.2vw, 40px); /* h2 w sekcji zajęć */ --ts-h1: clamp(34px, 8vw, 64px); /* H1 hero — w projekcie sztywne 64px */ /* --------------------------------------------------------------- 10. TYPOGRAFIA — wagi, interlinia, tracking --------------------------------------------------------------- */ --waga-zwykla: 400; /* w H1, jednostki przy cenie */ --waga-srednia: 500; /* wczytana, nieużyta — rezerwa */ --waga-polgruba: 600; /* nawigacja, pigułki na zdjęciach, pasek zaufania, daty bloga */ --waga-gruba: 700; /* DOMINUJĄCA — 83 wystąpienia: wszystkie nagłówki, przyciski, nadtytuły, etykiety */ --lh-ciasna-h1: 1.06; /* H1 hero */ --lh-ciasna: 1.15; /* h2 w ciemnej sekcji */ --lh-naglowek: 1.2; /* h2 „O mnie” */ --lh-tytul-karty:1.25; /* tytuły wpisów bloga */ --lh-zwarta: 1.4; /* zgoda RODO */ --lh-kompakt: 1.5; /* opis karty kwalifikacji */ --lh-lead: 1.55; /* leady sekcji */ --lh-tresc: 1.6; /* DOMYŚLNA dla akapitów — 12 wystąpień */ --lh-tresc-luz: 1.65; /* akapit „O mnie”, lead ciemnej sekcji */ --lh-adres: 1.7; /* listy zwierząt, blok adresowy stopki */ --lh-lista: 1.8; /* listy w cenniku */ --lh-jeden: 1; /* emoji-ikony, logotyp */ --ls-naglowek: -.01em; /* H1 */ --ls-badge: .12em; /* pigułki „Ulubione przez dzieci” / „Oferta specjalna” */ --ls-etykieta: .14em; /* nadtytuły wewnątrz kart, podtytuł headera */ --ls-nadtytul: .18em; /* nadtytuły sekcji */ /* --------------------------------------------------------------- 11. SKALA ODSTĘPÓW — baza 4px. Kroki wyprowadzone z realnych paddingów/gapów w projekcie. (2,4,6,8,10,12,14,16,18,20,22,24,26,28,32,40,48,52,56,64,72,80,88) --------------------------------------------------------------- */ --o-3xs: 2px; /* odstęp podtytułu kroku */ --o-2xs: 4px; /* margines pod podtytułem headera, padding badge (4px 10px) */ --o-xs: 6px; /* odstęp emoji od tekstu, padding pigułki (6px 12px) */ --o-s: 8px; /* gap w pigułkach, margines nagłówka sekcji */ --o-sm: 10px; /* gap przycisków w kontakcie */ --o-m: 12px; /* NAJCZĘSTSZY gap (10×) — wewnątrz kart, logo+nazwa */ --o-ml: 14px; /* gap kroków, padding kart cennika, wewnętrzny gap */ --o-l: 16px; /* gap mozaiki zwierząt, padding paska zaufania */ --o-xl: 18px; /* gap w kolumnie „O mnie” */ --o-2xl: 20px; /* padding CTA w headerze, gap paska udogodnień */ --o-3xl: 24px; /* gap siatek: noclegi, blog, cennik */ --o-4xl: 26px; /* gap nawigacji, padding kart */ --o-5xl: 28px; /* padding kart oferty/cennika, gap siatki 3 kart */ --o-6xl: 32px; /* margines paska udogodnień, dolny pasek stopki */ --o-7xl: 40px; /* PADDING BOCZNY STRONY (desktop), gap stopki, margines siatek */ --o-8xl: 44px; /* odstęp pod nagłówkiem sekcji „Wybierz swój rytm” */ --o-9xl: 48px; /* gap kolumn kontaktu, odstęp pod nagłówkiem cennika */ --o-10xl: 52px; /* padding panelu kontaktu, gap kolumn „O mnie” */ --o-11xl: 56px; /* padding karty „O mnie” */ --o-12xl: 64px; /* gap kolumn w sekcji zajęć, górny padding stopki */ --o-13xl: 72px; /* padding pionowy sekcji kremowych */ --o-14xl: 80px; /* PADDING PIONOWY SEKCJI (domyślny) */ --o-15xl: 88px; /* padding sekcji zajęć / dolny padding kontaktu */ /* aliasy semantyczne — używaj tych, nie liczb */ --sekcja-pion: var(--o-14xl); /* 80px desktop */ --sekcja-pion-duza: var(--o-15xl); /* 88px */ --sekcja-pion-mala: var(--o-13xl); /* 72px */ --strona-bok: var(--o-7xl); /* 40px */ --karta-padding: var(--o-5xl); /* 28px */ --panel-padding: var(--o-10xl); /* 52px */ /* --------------------------------------------------------------- 12. PROMIENIE ZAOKRĄGLEŃ --------------------------------------------------------------- */ --r-xs: 6px; /* baner „Ogólnopolska Sieć…” w stopce */ --r-s: 10px; /* przyciski w bloku kontaktu */ --r-m: 12px; /* NAJCZĘSTSZY (15×): kroki 1-2-3, przyciski cennika, pola formularza, małe boksy kontaktu, ramka „Zasada” */ --r-ml: 14px; /* zdjęcia wpisów bloga, pływająca karta kwalifikacji */ --r-l: 18px; /* DOMYŚLNY DLA KART (16×): karty oferty, noclegów, cennika, kafle mozaiki, portret, formularz */ --r-xl: 22px; /* zdjęcie w sekcji zajęć */ --r-2xl: 26px; /* duże panele: „O mnie”, „Kontakt” */ --r-pigulka:999px; /* przyciski CTA, badge, pigułki na zdjęciach */ --r-kolo: 50%; /* kropka w pigułce hero, kółka z numerami kroków */ --r-pasek: 2px; /* kreski slidera w hero */ --r-ramka-adres: 0 var(--r-m) var(--r-m) 0; /* ramka „W nawigacji wpisz” */ /* --------------------------------------------------------------- 13. CIENIE (tylko 2 w całym projekcie — projekt jest „płaski”) --------------------------------------------------------------- */ --cien-naklejka: 0 10px 20px -8px rgb(0 0 0 / .3); /* pigułka z imieniem „Xymena Sośnicka” */ --cien-karta: 0 18px 40px -12px rgb(0 0 0 / .4); /* pływająca karta „Kwalifikacje prowadzących” */ /* --------------------------------------------------------------- 14. GRADIENTY I TEKSTURY --------------------------------------------------------------- */ --gradient-hero: linear-gradient(90deg, rgb(var(--rgb-zielen-noc) / .85) 0%, rgb(var(--rgb-zielen-noc) / .55) 50%, rgb(var(--rgb-zielen-noc) / .15) 100%); /* UWAGA: poziomy — działa tylko w układzie desktopowym z tekstem po lewej. Na mobile potrzebny wariant pionowy: */ --gradient-hero-mobile: linear-gradient(180deg, rgb(var(--rgb-zielen-noc) / .35) 0%, rgb(var(--rgb-zielen-noc) / .75) 55%, rgb(var(--rgb-zielen-noc) / .92) 100%); --gradient-podpis-foto: linear-gradient(transparent, rgb(var(--rgb-zielen-noc) / .85)); /* podpis na dużym kaflu mozaiki zwierząt */ --wzor-kropki: radial-gradient(var(--kolor-zielen-las) .4px, transparent .4px); --wzor-kropki-rozmiar: 24px 24px; /* tekstura tła body */ /* --------------------------------------------------------------- 15. LAYOUT --------------------------------------------------------------- */ --kontener-max: 1240px; --wys-headera: 78px; /* desktop */ --wys-headera-mob: 60px; /* propozycja na mobile */ --wys-hero: 640px; /* desktop; na mobile -> min-height: 78svh */ --wys-foto-zajecia: 460px; --wys-foto-portret: 440px; --wys-foto-nocleg: 220px; --wys-foto-blog: 200px; --wys-kafla-mozaiki: 260px; --wys-logo: 52px; --wys-logo-stopka: 40px; --z-header: 20; --z-pasek-mobilny: 30; /* propozycja: sticky CTA na mobile — NAD headerem */ --z-drawer: 40; /* propozycja: menu hamburger */ --blur-headera: 8px; /* proporcje zamiast sztywnych wysokości (do wersji responsywnej) */ --proporcja-karta: 4 / 3; --proporcja-portret: 3 / 4; --proporcja-blog: 16 / 10; /* --------------------------------------------------------------- 16. RUCH (brak w projekcie — dodane) --------------------------------------------------------------- */ --czas-szybki: .15s; --czas-bazowy: .25s; --krzywa: cubic-bezier(.4, 0, .2, 1); --przejscie: color var(--czas-szybki) var(--krzywa), background-color var(--czas-szybki) var(--krzywa), border-color var(--czas-szybki) var(--krzywa), transform var(--czas-bazowy) var(--krzywa); /* --------------------------------------------------------------- 17. BREAKPOINTY (jako dokumentacja — w @media wpisz wartości wprost) --------------------------------------------------------------- */ --bp-xs: 380px; /* małe telefony */ --bp-s: 600px; /* duży telefon / 2 kolumny */ --bp-m: 900px; /* tablet / landscape */ --bp-l: 1100px; /* pełny układ desktopowy (oryginał projektu) */ --bp-xl: 1320px; /* kontener 1240 + marginesy */ } /* ----------------------------------------------------------------- NADPISANIA MOBILNE TOKENÓW — jeden punkt zmiany rytmu strony ----------------------------------------------------------------- */ @media (max-width: 899px) { :root { --sekcja-pion: 56px; --sekcja-pion-duza: 56px; --sekcja-pion-mala: 48px; --strona-bok: 16px; --karta-padding: 20px; --panel-padding: 20px; --r-2xl: 18px; /* duże panele tracą przesadne zaokrąglenie */ --wys-headera: 60px; --gradient-hero: var(--gradient-hero-mobile); } } @media (min-width: 900px) and (max-width: 1099px) { :root { --sekcja-pion: 64px; --sekcja-pion-duza: 72px; --strona-bok: 24px; --panel-padding: 32px; } } /* ----------------------------------------------------------------- BAZA GLOBALNA (przepisana z