/* ============================================================ JACKOWO — base.css Reset, typografia, kontener, siatka, klasy pomocnicze. ============================================================ */ /* ---------- RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--c-bg); color:var(--c-text); font:400 var(--fs-body)/1.65 var(--f-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } /* height:auto jest konieczne: każdy ma atrybuty width/height (przeciw CLS), więc bez tego zmiana szerokości w CSS rozciąga zdjęcie w pionie. Reguły z klasą (np. .tile__media img{height:100%}) nadpisują to bez problemu. */ img,picture,svg,video{max-width:100%;display:block} img{height:auto} button,input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0;padding:0} figure{margin:0} /* ---------- TYPOGRAFIA ---------- */ h1,h2,h3,h4,h5,h6{ font-family:var(--f-head-page);font-weight:var(--fw-head);line-height:1.2; margin:0 0 var(--sp-4);letter-spacing:-.01em;color:var(--c-text); text-wrap:balance; } h1{font-size:var(--fs-h1);line-height:1.15} /* --fs-h1 to skala pasa hero, gdzie stoi samo słowo JACKOWO. Zwykły nagłówek podstrony (Karta dań, Galeria, Kontakt, Rezerwacja pobytu) nie jest hero — przy 4 rem czyta się jak baner, nie jak nagłówek. Zostaje poprzedni stopień. */ .section > .container > h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem)} h2{font-size:var(--fs-h2);line-height:1.25} /* Nagłówek sekcji nie musi krzyczeć — przy wyśrodkowanym układzie i krótkich blokach tekstu mniejszy H2 czyta się spokojniej. */ .section h2{font-size:var(--fs-sec-h2)} .section h3{font-size:var(--fs-sec-h3)} h3{font-size:var(--fs-h3);line-height:1.3} h4{font-size:1.125rem} p{margin:0 0 var(--sp-4);max-width:var(--measure)} p:last-child{margin-bottom:0} strong,b{font-weight:600} small{font-size:var(--fs-sm)} a{color:var(--c-green);text-underline-offset:3px} a:hover{color:var(--c-green-dk)} hr{border:0;border-top:1px solid var(--c-border);margin:var(--sp-7) 0} address{font-style:normal} abbr[title]{text-decoration:none;border-bottom:1px dotted var(--c-text-3);cursor:help} /* ---------- FOKUS I DOSTĘPNOŚĆ ---------- */ :focus{outline:none} :focus-visible{outline:3px solid var(--c-green);outline-offset:2px;border-radius:2px} .skip-link{ position:fixed;left:var(--sp-4);top:-100px;z-index:200; background:var(--c-green);color:#fff;text-decoration:none;font-weight:600; padding:14px 20px;border-radius:var(--r-md);box-shadow:var(--sh-2); transition:top .2s var(--ease); } /* :focus, nie :focus-visible — skip-link jest dostępny wyłącznie z klawiatury, a :focus-visible bywa pomijany przy fokusie ustawionym programowo */ .skip-link:focus{top:var(--sp-4);color:#fff} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ---------- KONTENER ---------- */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container--narrow{max-width:820px} .container--wide{max-width:1440px} /* Elementy czekające na wejście (reveal--lewo/prawo) stoją przesunięte o ~22 px i do czasu animacji poszerzały scrollWidth — na telefonie pojawiał się poziomy pasek. clip (nie hidden!) tnie to bez tworzenia scroll-kontenera, więc position:sticky dalej działa. */ html, body{overflow-x:clip} /* ---------- SEKCJE ---------- */ .section{padding-block:var(--sp-8)} @media(min-width:768px){.section{padding-block:var(--sp-9)}} .section--tight{padding-block:var(--sp-7)} .section--alt{background:var(--c-bg-alt)} .section--warm{background:var(--c-bg-warm)} .section--green{background:var(--c-green-lt)} .section--blue,.section--sea{background:var(--c-blue-lt)} .section--sand{background:var(--c-bg-sand)} /* pas w odcieniu podstrony — kolor przychodzi z klasy na , patrz tokens.css */ .section--tint{background:var(--c-tint)} /* Nagłówki sekcji są wyśrodkowane domyślnie — tak wygląda cały serwis. .section__head--left zostawia wyrównanie do lewej tam, gdzie nagłówek stoi w kolumnie obok zdjęcia i wyśrodkowanie wyglądałoby przypadkowo. */ .section__head{margin-bottom:var(--sp-6);text-align:center;max-width:680px;margin-inline:auto} .section__head p{margin-inline:auto} .section__head--left{text-align:left;max-width:none;margin-inline:0} .section__head--left p{margin-inline:0} .section__head--center{text-align:center;max-width:680px;margin-inline:auto} /* ---------- SIATKA ---------- */ .grid{display:grid;gap:var(--sp-5)} .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} @media(min-width:640px){ .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} } @media(min-width:1000px){ .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} } .grid--gap-lg{gap:var(--sp-6)} .grid--middle{align-items:center} /* rząd obraz + tekst (wariant C1); .row--flip odwraca kolejność na desktopie */ .row{display:grid;gap:var(--sp-6);align-items:center} @media(min-width:900px){ /* Kolumna ze zdjęciem celowo węższa od tekstowej (.85 : 1.15). Zdjęcie 50/50 dominowało nad treścią i sekcje robiły się bardzo wysokie — przy pięciu takich rzędach na podstronie strona ciągnęła się w nieskończoność. */ .row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-8)} .row--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} .row--flip > *:first-child{order:2} } /* ---------- MEDIA: PROPORCJE I WYŚRODKOWANIE ---------- */ /* piaskowe tło pod zdjęciem: widać je zanim obraz się wczyta i w kadrach z przezroczystością — cieplejsze niż szarość, spójne z drewnem na zdjęciach */ .media{overflow:hidden;background:var(--c-bg-sand)} .media--16x9{aspect-ratio:16/9} .media--4x3{aspect-ratio:4/3} .media--3x2{aspect-ratio:3/2} .media--1x1{aspect-ratio:1/1} .media--3x4{aspect-ratio:3/4} .media img{width:100%;height:100%;object-fit:cover;object-position:center} /* blok, w którym zdjęcie ma być widoczne w całości (produkty, etykiety) */ .stage{display:grid;place-items:center} .stage img{max-height:100%;margin-inline:auto;object-fit:contain;object-position:center} /* ---------- KLASY POMOCNICZE ---------- */ .eyebrow{ font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase; color:var(--c-eyebrow);font-weight:600;margin:0 0 var(--sp-2); } .eyebrow--green{color:var(--c-green)} .eyebrow--blue{color:var(--c-blue-dk)} .lead{font-size:1.125em;color:var(--c-text-2)} .muted{color:var(--c-text-2)} .small{font-size:var(--fs-sm)} .center{text-align:center} .center p{margin-inline:auto} .nowrap{white-space:nowrap} .stack > * + *{margin-top:var(--sp-4)} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .mb-3{margin-bottom:var(--sp-3)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)} /* znacznik treści do uzupełnienia — widoczny w pracy, łatwy do wygrepowania */ .todo{ display:inline-block;color:var(--c-brown);font-size:12px;font-weight:600;letter-spacing:.05em; padding:4px 10px;border-radius:var(--r-sm);border:1px dashed var(--c-brown-lt); background:repeating-linear-gradient(45deg,#F1EAD9 0 6px,#E9E0CB 6px 12px); } /* ---------- ANIMACJA WEJŚCIA (IntersectionObserver w main.js) ---------- */ .reveal{opacity:0;transform:translateY(14px); transition:opacity .38s var(--ease),transform .38s var(--ease)} .reveal.is-visible{opacity:1;transform:none} /* Warianty wejścia. Wszystkie trwają 380–420 ms i tylko przesuwają albo skalują — bez parallaxu i bez efektów wjazdowych na całą sekcję. */ .reveal--lewo{transform:translateX(-22px)} .reveal--prawo{transform:translateX(22px)} .reveal--skala{transform:scale(.965)} .reveal--lewo.is-visible,.reveal--prawo.is-visible,.reveal--skala.is-visible{transform:none} /* Kaskada w siatkach: kolejne kafle wchodzą co 70 ms. Opóźnienie dotyczy wyłącznie wejścia — po pokazaniu element nie ma już żadnej zwłoki, więc nie opóźnia reakcji na hover ani na fokus. */ .reveal--k1{transition-delay:.07s} .reveal--k2{transition-delay:.14s} .reveal--k3{transition-delay:.21s} .reveal--k4{transition-delay:.28s} .reveal--k5{transition-delay:.35s} .reveal.is-visible{transition-delay:0s} .reveal--k1.is-visible{transition-delay:.07s} .reveal--k2.is-visible{transition-delay:.14s} .reveal--k3.is-visible{transition-delay:.21s} .reveal--k4.is-visible{transition-delay:.28s} .reveal--k5.is-visible{transition-delay:.35s} /* bez JS nic nie ukrywamy */ .no-js .reveal{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal,.reveal--lewo,.reveal--prawo,.reveal--skala{opacity:1;transform:none} .reveal[class*="reveal--k"]{transition-delay:0s} }