/* ============================================================ DŘEVNÝ KOCÚR — Św. Marcin 11, Poznań main.css — style główne + moduły efektów ------------------------------------------------------------ SPIS: 1.Tokeny 2.Reset/baza 3.Typografia 4.Przyciski 5.Nawigacja (rail+mobile) 6.Hero 7.Marquee 8.Menu 9.Piwo 10.O nas 11.Galeria 12.Opinie 13.FAQ 14.Kontakt 15.Stopka 16.Dolny pasek CTA 17.Cookies 18.Lightbox 19.EFEKTY (wyłączalne moduły) 20.404 21.Print ------------------------------------------------------------ Każdy EFEKT jest aktywny tylko, gdy ma klasę eff-* (nadaje ją js/main.js wg flag EFFECTS) — wyłączenie efektu to zmiana true→false w js/main.js, sekcja KONFIGURACJA. ============================================================ */ /* ── 1. TOKENY ── */ :root{ --ink:#081114; /* tło bazowe — przyciemniony, chłodny błękit */ --ink-2:#0D191D; /* kafle parzyste */ --ink-3:#132429; /* kafle wyróżnione / hover */ --orange:#2FA5AE; /* akcent główny — turkus apartamentów */ --orange-hot:#4FC7CE; /* hover / detale — jaśniejszy turkus */ --copper:#7FB6C4; /* chłodna poświata zamiast miedzi */ --cream:#E9F0F2; /* typografia główna — chłodna biel */ --cream-dim:#9DB3BA; /* tekst drugorzędny */ --hairline:1px solid rgba(233,240,242,.10); --pad-x:clamp(20px,6vw,84px); /* wspólny margines poziomy treści */ --nav-w:72px; /* szerokość raila desktop */ --nav-w-open:264px; --topbar-h:60px; /* pasek mobile */ --bottombar-h:56px; /* dolny pasek CTA mobile */ --serif:'Playfair Display',Georgia,serif; --sans:'Lato',system-ui,sans-serif; --ease-out:cubic-bezier(.22,.61,.36,1); } /* ── 2. RESET / BAZA ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0!important} /* bazowy rozmiar pisma: 16px + 1pt (~17,3px) — skaluje wszystkie wartości w rem */ html{scroll-behavior:smooth;font-size:108.3%;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--ink); color:var(--cream); font-family:var(--sans); font-weight:300; line-height:1.7; /* clip (nie hidden!) — hidden robiłby z body scroll-container i psuł position:sticky */ overflow-x:clip; -webkit-font-smoothing:antialiased; } img,video{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:2px solid var(--orange-hot);outline-offset:3px} ::selection{background:var(--orange);color:#03181B} main{display:block} section{position:relative} /* desktop: treść zaczyna się za bocznym railem; stopka wyrównana do reszty */ @media (min-width:900px){ main,.cookiebar{padding-left:var(--nav-w)} footer{padding-left:calc(var(--nav-w) + var(--pad-x))!important} } /* ── 3. TYPOGRAFIA ── */ .eyebrow{ display:block;font-size:.66rem;letter-spacing:.38em;text-transform:uppercase; color:var(--orange-hot);font-weight:400;margin-bottom:14px; } .h-display{ font-family:var(--serif);font-weight:700;line-height:.95;letter-spacing:-.02em;color:#fff; } .h-section{ font-family:var(--serif);font-weight:400;line-height:1.12; font-size:clamp(2rem,5vw,3.4rem);color:var(--cream); } .h-tile{ font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.15;color:var(--cream); } .lead{color:var(--cream-dim);max-width:62ch} .serif-i{font-family:var(--serif);font-style:italic;font-weight:400} /* ── 4. PRZYCISKI ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--sans);font-size:.72rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase;text-decoration:none; padding:16px 36px;border:1px solid transparent; transition:background .25s,color .25s,border-color .25s,transform .25s; } .btn-primary{background:var(--orange);color:#03181B;font-weight:900} .btn-primary:hover{background:var(--orange-hot);transform:translate(2px,-2px)} .btn-outline{border-color:rgba(233,240,242,.35);color:var(--cream);background:transparent} .btn-outline:hover{border-color:var(--cream);background:var(--cream);color:var(--ink)} .btn-ghost{padding:12px 0;border:none;color:var(--cream-dim);letter-spacing:.2em} .btn-ghost:hover{color:var(--orange-hot)} /* ── 5. NAWIGACJA ── */ /* 5a. Rail boczny — desktop */ .rail{ position:fixed;inset:0 auto 0 0;width:var(--nav-w);z-index:900; display:flex;flex-direction:column;align-items:center; background:rgba(8,17,20,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); /* hairline jako cień wewnętrzny — logo (obraz) zakrywa go na swojej wysokości */ box-shadow:inset -1px 0 0 rgba(233,240,242,.09); transition:width .35s var(--ease-out); overflow:hidden; } .rail:hover,.rail:focus-within{width:var(--nav-w-open)} /* logo: bez marginesów, pełna szerokość paska — powiększa się płynnie razem z animacją rozsuwania raila */ .rail-logo{display:block;margin:0;width:100%;flex-shrink:0} .rail-logo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} /* wybór lokalizacji — dyskretny link na dole raila, pod językami */ .rail-loc{ display:flex;align-items:center;justify-content:center; width:100%;height:var(--nav-w);flex-shrink:0;margin-bottom:8px; /* przerwa od przycisku rezerwacji — ta sama w obu stanach paska */ border-top:1px solid #000; background:var(--orange);color:#fff;text-decoration:none; font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; line-height:1.55;text-align:center;padding:8px 6px; transition:background .25s; } .rail-loc:hover{background:var(--orange-hot)} /* po rozwinięciu wszystkie przyciski paska mają wysokość rezerwacji */ .rail:hover .rail-loc,.rail:focus-within .rail-loc{height:58px} /* zwinięty pasek: dwie linijki; rozwinięty: jedna, ze spacją między słowami */ .rail-loc-txt{display:flex;flex-direction:column;align-items:center;line-height:1.5} .rail:hover .rail-loc-txt,.rail:focus-within .rail-loc-txt{flex-direction:row;gap:.36em} /* rozwinięcie bocznego menu tylko poszerza kafelek — układ napisu zostaje */ /* etykieta przy wyborze języka, odsłaniana po rozwinięciu paska */ .rail-lang .lbl{ position:absolute;left:92px;top:50%; font-size:.58rem;letter-spacing:.2em;text-transform:uppercase; opacity:0;transform:translate(-8px,-50%); transition:opacity .3s .05s,transform .3s .05s var(--ease-out); } .rail:hover .rail-lang .lbl,.rail:focus-within .rail-lang .lbl{opacity:1;transform:translate(0,-50%)} /* nawigacja przypięta do geometrii stanu ROZWINIĘTEGO (logo 264 + strefa dolna), dzięki czemu linki są w tym samym miejscu przed i po rozwinięciu */ .rail-nav{ position:absolute;left:0;right:0; /* dół = wysokość grupy „Zarezerwuj stolik + Wybór lokalu + języki" z zapasem */ top:var(--nav-w-open);bottom:304px; display:flex;flex-direction:column;justify-content:center;gap:2px; overflow-y:auto;scrollbar-width:none; } .rail-nav::-webkit-scrollbar{display:none} /* niskie okno: kurczy się dolna grupa i logo po rozwinięciu, a nie lista — sześć pozycji ma się zmieścić bez przewijania. Selektory z .rail, bo reguły bazowe stoją w arkuszu niżej i inaczej by wygrały. */ @media (max-height:820px){ .rail .rail-link{padding:9px 0 9px 26px} .rail .rail-nav{top:150px;bottom:306px} .rail:hover .rail-logo,.rail:focus-within .rail-logo{width:150px;margin:0 auto} } .rail-cta-box{margin-top:auto} .rail-link{ display:flex;align-items:center;gap:18px;text-decoration:none; padding:13px 0 13px 26px;white-space:nowrap; color:var(--cream-dim);transition:color .2s,background .2s; } .rail-link .idx{ font-size:.6rem;letter-spacing:.14em;color:rgba(233,240,242,.58); width:20px;flex-shrink:0;transition:color .2s; } .rail-link .lbl{ font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:400; opacity:0;transform:translateX(-8px); transition:opacity .3s .05s,transform .3s .05s var(--ease-out); } .rail:hover .rail-link .lbl,.rail:focus-within .rail-link .lbl{opacity:1;transform:none} .rail-link:hover,.rail-link.active{color:var(--cream);background:rgba(233,240,242,.05)} .rail-link.active .idx{color:var(--orange-hot)} /* strefa CTA: zwinięta 176px (pionowy pasek), po rozwinięciu kurczy się do wysokości przycisku — nawigacja 01–06 centruje się wtedy z równym odstępem od logo i od przycisku */ .rail-cta-box{ height:176px;width:100%;flex-shrink:0; display:flex;align-items:flex-end;justify-content:center; transition:height .35s var(--ease-out); } .rail:hover .rail-cta-box,.rail:focus-within .rail-cta-box{height:70px} .rail-cta{ width:100%;height:176px;padding:14px 0;text-align:center;text-decoration:none; background:var(--orange);color:#fff; font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; writing-mode:vertical-rl;transform:rotate(180deg); transition:background .25s,height .35s var(--ease-out); display:flex;align-items:center;justify-content:center; white-space:nowrap;overflow:hidden; } /* po rozwinięciu: pełna szerokość rozwiniętego menu, niższy kształt — płynna morfoza wysokości; tekst pojawia się dopiero po rozsunięciu (bez łamania na 2 linie) */ .rail:hover .rail-cta,.rail:focus-within .rail-cta{ writing-mode:horizontal-tb;transform:none; height:58px;width:100%;padding:0 10px; animation:ctaTextIn .55s both; } @keyframes ctaTextIn{ 0%,60%{color:transparent} 100%{color:#fff} } @media (prefers-reduced-motion:reduce){ .rail:hover .rail-cta,.rail:focus-within .rail-cta{animation:none} } .rail-cta:hover{background:var(--orange-hot)} /* języki: przypięte do lewej — nie przesuwają się przy rozwijaniu raila */ .rail-lang{ display:flex;gap:2px;align-items:stretch;padding:10px 0; font-size:.66rem;letter-spacing:.14em;flex-shrink:0;position:relative; width:100%;justify-content:flex-start;white-space:nowrap; } /* chipy PL i EN: stała szerokość (po połowie zwiniętego paska) — nie zmieniają rozmiaru ani pozycji przy rozwijaniu */ .rail-lang a{flex:0 0 35px;text-align:center} .rail-lang .lbl{color:var(--cream-dim)} .rail-lang a{color:var(--cream-dim);text-decoration:none;padding:4px 7px} .rail-lang a.active{color:#fff;background:var(--orange)} .rail-lang a:hover{color:var(--orange-hot)} .rail-lang a.active:hover{color:#fff} /* 5b. Pasek górny + hamburger — mobile */ .topbar{ position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:900; display:none;align-items:center;justify-content:space-between; padding:0 4px 0 16px; background:rgba(8,17,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:var(--hairline); transition:transform .35s var(--ease-out); } .topbar-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto} /* przełącznik języka w topbarze (mobile) */ .tb-lang{ font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--cream);text-decoration:none;padding:9px 12px; border:1px solid rgba(233,240,242,.3); } .tb-lang:active{background:var(--orange);color:#03181B} .topbar-logo img{width:36px;height:36px;object-fit:cover} .topbar-logo span{font-family:var(--serif);font-size:1.02rem;color:var(--cream)} .burger{ width:56px;height:56px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:6px; } .burger span{ display:block;width:24px;height:2px;background:var(--cream); transition:transform .3s var(--ease-out),opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* 5c. Overlay fullscreen — mobile */ .overlay{ position:fixed;inset:0;z-index:890;background:var(--ink); display:flex;flex-direction:column;justify-content:center;padding:88px 28px 96px; clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .5s var(--ease-out),visibility 0s .5s; } .overlay.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s var(--ease-out),visibility 0s} .overlay-link{ display:flex;align-items:baseline;gap:16px;text-decoration:none;color:var(--cream); font-family:var(--serif);font-size:clamp(1.34rem,5.5vw,1.85rem); padding:9px 0;border-bottom:var(--hairline); opacity:0;transform:translateY(18px); transition:opacity .4s,transform .4s var(--ease-out); } .overlay.open .overlay-link{opacity:1;transform:none} .overlay.open .overlay-link:nth-child(1){transition-delay:.08s} .overlay.open .overlay-link:nth-child(2){transition-delay:.13s} .overlay.open .overlay-link:nth-child(3){transition-delay:.18s} .overlay.open .overlay-link:nth-child(4){transition-delay:.23s} .overlay.open .overlay-link:nth-child(5){transition-delay:.28s} .overlay.open .overlay-link:nth-child(6){transition-delay:.33s} /* stała szerokość numeru — bez niej strzałka przy „Wybór lokalu" ma inną szerokość niż numery i ten jeden napis zaczyna się w innym miejscu */ .overlay-link .idx{ font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;color:var(--orange-hot); flex:0 0 1.7rem; } .overlay-link:active{color:var(--orange-hot)} .overlay-foot{ position:absolute;bottom:32px;left:28px;right:28px; display:flex;justify-content:space-between;align-items:center; font-size:.7rem;letter-spacing:.12em;color:var(--cream-dim); } /* stopka jest ustawiona nad listą; bez tego łapie dotknięcia w swoim pasie, także te wymierzone w ostatnią pozycję menu */ .overlay-foot{pointer-events:none} .overlay-foot a{color:inherit;text-decoration:none;padding:6px 8px;pointer-events:auto} .overlay-foot .lang a.active{color:var(--ink);background:var(--cream)} /* powrót do wyboru lokalu — cel innego rodzaju niż sekcje tej strony, więc zamiast numeru strzałka, a zamiast kremowego kolor akcentu */ .overlay-lokal{color:var(--orange-hot);border-bottom:none;margin-top:10px} .overlay-lokal .idx{color:var(--orange-hot)} .overlay-lokal .idx{font-size:.95rem} /* opóźnienia wejścia dla dwóch ostatnich pozycji — bez tego pojawiałyby się przed poprzednimi, bo brak reguły znaczy brak zwłoki */ .overlay.open .overlay-link:nth-child(7){transition-delay:.38s} .overlay.open .overlay-link:nth-child(8){transition-delay:.43s} /* Ósma pozycja nie mieści się na niższych ekranach, a menu nie ma paska przewijania — po prostu urywa treść. Dlatego przy niższym oknie lista się zagęszcza. Progi dobrane pod typowe telefony: 844 (iPhone 14), 736 (iPhone 8 Plus), 667 (iPhone SE), 640 (starsze Androidy). */ @media (max-height:840px){ .overlay{padding:74px 28px 80px} .overlay-link{font-size:clamp(1.18rem,4.9vw,1.58rem);padding:7px 0} } @media (max-height:730px){ .overlay{padding:64px 24px 70px} .overlay-link{font-size:clamp(1.04rem,4.4vw,1.38rem);padding:5px 0} .overlay-foot{bottom:20px} } @media (max-height:650px){ .overlay{padding:56px 22px 62px} .overlay-link{font-size:.95rem;padding:4px 0} .overlay-link .idx{font-size:.56rem} .overlay-lokal .idx{font-size:.8rem} .overlay-foot{bottom:14px;font-size:.62rem} } /* ── 6. HERO ── */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; overflow:hidden; } .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-media video,.hero-media img{ width:100%;height:100%;object-fit:cover; } .hero-shade{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(8,17,20,.34) 0%,rgba(8,17,20,.45) 45%,rgba(8,17,20,.96) 100%); } .hero-inner{ position:relative;z-index:2; padding:0 var(--pad-x) clamp(28px,4.5vh,52px); } .hero-title{font-size:clamp(3rem,9.5vw,7rem);margin:10px 0 6px} .hero-title .sub{ display:block;font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.15rem,2.8vw,1.9rem);letter-spacing:.02em;color:var(--cream); margin-top:14px; } .hero-desc{max-width:56ch;color:var(--cream-dim);font-size:clamp(.9rem,1.4vw,1rem);margin:14px 0 30px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} /* wskaźnik scroll down na wideo */ .hero-scroll{ position:relative;z-index:2; display:flex;flex-direction:column;align-items:center;gap:10px; margin:0 auto 20px;width:max-content;text-decoration:none; } .hero-scroll .lbl{ font-size:.58rem;letter-spacing:.34em;text-transform:uppercase; color:rgba(233,240,242,.6);transition:color .2s; } .hero-scroll:hover .lbl{color:var(--orange-hot)} .scroll-line{ width:1px;height:46px;background:rgba(233,240,242,.16); position:relative;overflow:hidden; } .scroll-line::after{ content:'';position:absolute;inset:0;background:var(--orange-hot); transform:translateY(-100%); } @media (prefers-reduced-motion:no-preference){ .scroll-line::after{animation:scrollSlide 2.2s ease-in-out infinite} @keyframes scrollSlide{ 0%{transform:translateY(-100%)} 55%{transform:translateY(0)} 100%{transform:translateY(100%)} } } /* pasek info NAP na dole hero */ .hero-nap{ position:relative;z-index:2; display:grid;grid-template-columns:repeat(4,1fr); border-top:var(--hairline); background:rgba(8,17,20,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .hero-nap>*:first-child{padding-left:var(--pad-x)} .hero-nap>*{ padding:16px clamp(14px,2vw,30px);border-right:var(--hairline); font-size:.78rem;letter-spacing:.06em;color:var(--cream-dim); display:flex;flex-direction:column;gap:2px;text-decoration:none; } .hero-nap>*:last-child{border-right:none} .hero-nap b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;color:var(--cream)} a.nap-item:hover{color:var(--orange-hot)} .open-dot{display:inline-block;width:7px;height:7px;background:#4caf50;margin-right:7px;vertical-align:1px} .open-dot.closed{background:var(--orange)} /* ── 7. MARQUEE ── */ .marquee{ overflow:hidden;border-top:var(--hairline);border-bottom:var(--hairline); background:var(--ink-2);padding:16px 0;white-space:nowrap; } .marquee-track{display:inline-flex;gap:0} .marquee-part{ display:inline-flex;gap:26px;padding-right:26px; font-family:var(--serif);font-style:italic; font-size:clamp(1rem,2vw,1.3rem);color:var(--cream-dim); } .marquee-part .sep{color:var(--orange)} /* ── 8. MENU ── */ .menu-head{ padding:clamp(56px,9vh,96px) var(--pad-x) 28px; display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px; } .menu-share{display:flex;gap:10px} /* 8a. Lunch dnia — blok edytowalny; ukrycie: dodaj klasę is-hidden */ .lunch{ margin:0;border-top:var(--hairline);border-bottom:var(--hairline); background:var(--ink-3); display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:clamp(14px,3vw,34px);padding:18px var(--pad-x); } .lunch.is-hidden{display:none} .lunch-tag{ font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase; color:var(--ink);background:var(--copper);padding:7px 12px;white-space:nowrap; } .lunch-txt{font-size:.92rem;color:var(--cream)} .lunch-txt b{color:var(--copper)} .lunch-price{font-weight:700;font-size:1.05rem;white-space:nowrap} /* 8b. Sticky pasek kategorii (przewijanie w .cats-scroll; strzałki na mobile) */ .cats{ position:sticky;top:0;z-index:700; background:rgba(8,17,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:var(--hairline);border-bottom:var(--hairline); display:flex;align-items:stretch; } .cats-scroll{overflow-x:auto;scrollbar-width:none;flex:1;min-width:0} .cats-scroll::-webkit-scrollbar{display:none} .cats-inner{display:flex;padding:0 calc(var(--pad-x) - 18px);position:relative} /* strzałki przewijania kategorii — tylko mobile, pulsują */ .cats-arr{ display:none;place-items:center;width:42px;flex-shrink:0; color:var(--orange-hot);font-size:1.5rem;line-height:1; border:none;background:none; /* Glif ‹ › ma tusz niżej niż jego pole tekstowe, przez co strzałki wyglądały na osadzone poniżej nazw kategorii. 0.21em (≈5,5px przy 1.5rem) zrównuje środek tuszu strzałki ze środkiem wersalików etykiety; w em, więc korekta skaluje się razem z rozmiarem glifu. */ transform:translateY(-.21em); } @media (max-width:899px){ .cats-arr{display:grid} .cats-inner{padding:0 4px} } @media (prefers-reduced-motion:no-preference){ .cats-arr{animation:catsPulse 1.6s ease-in-out infinite} @keyframes catsPulse{0%,100%{opacity:.35}50%{opacity:1}} } .cats-arr.is-off{opacity:.12!important;animation:none;pointer-events:none} .cat-link{ flex-shrink:0;padding:15px 18px;text-decoration:none;white-space:nowrap; font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:rgba(233,240,242,.66);transition:color .2s; border-bottom:2px solid transparent; } .cat-link:hover{color:var(--cream)} .cat-link.active{color:var(--cream);border-bottom-color:var(--orange)} .cat-link .idx{display:none} /* numer pozycji — tylko w indeksie bocznym */ /* ── 8b-2. PANEL KATEGORII ─────────────────────────────────────── Zakładka filtruje treść, zamiast do niej przewijać: widoczna jest jedna kategoria, reszta dostaje atrybut hidden. Ukryte kategorie ZOSTAJĄ w DOM — SEO, JSON-LD, Ctrl+F i wydruk działają bez zmian. Bez JS (atrybutu hidden nikt nie nadaje) widać całą kartę. ---------------------------------------------------------------- */ .menu-cat[hidden]{display:none} @media (prefers-reduced-motion:no-preference){ /* poprzednia kategoria gaśnie, nowa wchodzi z kaskadą dań. Wyjście to animacja, nie transition: wejście ma fill-mode:both, a animacja w toku wygrywa z każdym transition — dwie animacje wymieniają się czysto, dlatego .is-leaving stoi w kodzie PO .is-enter. */ .menu-cat.is-enter{animation:catIn .34s var(--ease-out) both} .menu-cat.is-leaving{animation:catOut .15s ease-in both} @keyframes catIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes catOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}} .menu-cat.is-enter .dish, .menu-cat.is-enter .menu-sub{ animation:dishIn .42s var(--ease-out) both; animation-delay:calc(60ms + var(--i,0) * 22ms); } @keyframes dishIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* podgrupa po kliknięciu chipa — ten sam charakter wejścia co panel kategorii, z lekką kaskadą przy „Wszystkie", żeby lista nie pojawiała się jednym blokiem */ .menu-group.is-enter{ animation:catIn .32s var(--ease-out) both; animation-delay:calc(var(--i,0) * 55ms); } } /* podkategorie (Wódki / Whisky / Wina białe…) — drugi poziom filtra pojawia się tylko w kategoriach z co najmniej 3 podgrupami */ .subcats{display:flex;gap:8px;flex-wrap:wrap;padding:4px var(--pad-x) 6px} .subchip{ padding:8px 13px;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--cream-dim);border:1px solid rgba(233,240,242,.14);white-space:nowrap; transition:color .2s,border-color .2s,background .2s; } .subchip:hover{color:var(--cream);border-color:rgba(233,240,242,.32)} .subchip[aria-pressed="true"]{color:var(--cream);border-color:var(--orange);background:rgba(47,165,174,.16)} .menu-group[hidden]{display:none} /* ── 8b-3. Desktop ≥1100px: pionowy indeks karty obok panelu ── */ @media (min-width:1100px){ .menu-body{display:grid;grid-template-columns:clamp(210px,17vw,256px) 1fr;align-items:start} .cats{ position:sticky;top:0;display:block;max-height:100vh;overflow-y:auto; border-top:none;border-bottom:none;border-right:var(--hairline); padding:clamp(30px,5vh,54px) 0 34px; background:none;backdrop-filter:none;-webkit-backdrop-filter:none; } .cats-scroll{overflow:visible} .cats-inner{display:block;padding:0} .cats-arr{display:none} .cat-link{ display:flex;align-items:baseline;gap:11px; padding:11px var(--pad-x) 11px clamp(20px,3vw,40px); border-bottom:none;border-left:2px solid transparent;letter-spacing:.14em; transition:color .2s,background .2s,border-color .2s; } .cat-link .idx{ display:inline;min-width:16px;font-size:.55rem; color:rgba(233,240,242,.28);font-variant-numeric:tabular-nums; } .cat-link.active{border-left-color:var(--orange);background:rgba(233,240,242,.035)} .cat-link.active .idx{color:var(--orange-hot)} .menu-cat-head{padding-top:clamp(30px,5vh,54px)} .menu-cat-head,.dishes,.subcats{padding-left:clamp(28px,3.4vw,56px)} } /* 8c. Kategorie i pozycje */ .menu-cat{border-bottom:var(--hairline);scroll-margin-top:54px} .menu-cat-head{ display:flex;align-items:baseline;gap:18px;flex-wrap:wrap; padding:clamp(40px,7vh,72px) var(--pad-x) 22px; } .menu-cat-head .note{font-size:.8rem;color:var(--cream-dim);font-style:italic;font-family:var(--serif)} /* Karta jest jednokolumnowa na każdej szerokości. Klasa cols-2 w HTML jest od tej pory bez efektu — została, bo powrót do dwóch kolumn to jedna reguła: @media(min-width:1100px){.dishes.cols-2{columns:2}} */ .dishes{ padding:8px var(--pad-x) clamp(44px,7vh,72px); columns:1; } .dish{ break-inside:avoid;padding:26px 0; border-bottom:1px solid rgba(233,240,242,.05); transition:transform .22s var(--ease-out),background .22s; } .dish-row{display:flex;align-items:baseline;gap:14px} .dish-name{font-weight:700;font-size:1.05rem;letter-spacing:.02em} .dish-badges{display:inline-flex;gap:5px;vertical-align:2px} .badge{ font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:2px 7px;border:1px solid var(--copper);color:var(--copper);white-space:nowrap; } .badge.hot{border-color:var(--orange);color:var(--orange-hot)} .dish-dots{flex:1;border-bottom:1px dotted rgba(233,240,242,.25);transform-origin:left;min-width:24px} /* podtytuł grupy w obrębie kategorii (Wódki / Whisky / Wina białe itd.) */ .menu-sub{ font-family:var(--sans);font-size:.72rem;font-weight:700; letter-spacing:.3em;text-transform:uppercase;color:var(--copper); margin:34px 0 2px;break-after:avoid-column;break-inside:avoid; } .dishes .menu-sub:first-child{margin-top:6px} .dish-price{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:1rem} .dish-desc{font-size:.9rem;color:var(--cream-dim);max-width:64ch;margin-top:10px;line-height:1.75} .dish-extra{font-size:.82rem;color:var(--copper);margin-top:9px;letter-spacing:.04em} /* 8d. Kafle-bohaterowie */ .menu-feature{ display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--hairline); } .mf-img{position:relative;overflow:hidden;min-height:340px} .mf-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)} .menu-feature:hover .mf-img img{transform:scale(1.045)} .mf-body{ background:var(--ink-2);padding:clamp(30px,5vh,64px) var(--pad-x); display:flex;flex-direction:column;justify-content:center;gap:14px; border-left:var(--hairline); } .mf-body .price{font-size:1.5rem;font-weight:700;color:var(--orange-hot)} .mf-body .desc{color:var(--cream-dim);max-width:52ch} .mf-tag{ align-self:flex-start;font-size:.6rem;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:var(--ink);background:var(--orange-hot);padding:7px 12px; } /* 8e. Legenda + nota */ .menu-legend{ display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center; padding:30px var(--pad-x);font-size:.98rem;color:var(--cream); border-bottom:var(--hairline);width:100%; } .menu-legend .badge{font-size:.7rem;padding:4px 11px} .menu-note{font-size:.95rem;color:var(--cream-dim);max-width:none;flex-basis:100%;line-height:1.8} .menu-cta-strip{ display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center; padding:clamp(56px,10vh,104px) 20px;background:var(--ink-2);border-bottom:var(--hairline); text-align:center;flex-direction:column; } /* CTA po menu — ma być WIDOCZNE */ .menu-cta-strip .btn-primary{ font-size:1.02rem;letter-spacing:.18em;padding:24px 60px; } /* ── 9. PIWO / BAR ── */ .beer{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--hairline)} .beer-story{ padding:clamp(40px,7vh,84px) var(--pad-x);background:var(--ink-2); display:flex;flex-direction:column;justify-content:center;gap:18px; } .beer-story .lead{max-width:56ch} .beer-img{position:relative;overflow:hidden;min-height:380px;border-left:var(--hairline)} .beer-img img{width:100%;height:100%;object-fit:cover} .beer-tiles{ display:grid;grid-template-columns:repeat(2,1fr);border-bottom:var(--hairline); } .beer-tile{ padding:clamp(40px,7vh,64px) var(--pad-x);border-right:var(--hairline); background:var(--ink);transition:background .25s; display:flex;flex-direction:column;gap:10px; } .beer-tile::before{ content:'';width:44px;height:3px;background:var(--copper); margin-bottom:14px;transition:width .35s var(--ease-out),background .25s; } .beer-tile:nth-child(2n){border-right:none} .beer-tile:not(:nth-last-child(-n+2)){border-bottom:var(--hairline)} /* nie pod ostatnim wierszem */ .beer-tile:hover{background:var(--ink-3)} .beer-tile:hover::before{width:88px;background:var(--orange-hot)} .beer-tile .bname{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15} .beer-tile .bdesc{font-size:.98rem;color:var(--cream-dim)} /* ── 10. O NAS ── */ .about{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--hairline)} .about-sticky{position:relative} /* Zdjęcia leżą na sobie jak karty. Wchodzące dostaje najwyższy z-index (JS) i pojawia się przez opacity, a poprzednie ZOSTAJE w pełni kryjące pod nim. Przy zwykłym przenikaniu oba są w połowie przezroczyste w tej samej chwili, więc łączne krycie spada do ~75% i spod zdjęcia widać przewijający się tekst — najbardziej na mobile, gdzie kadr jest przyklejony nad treścią. Tło sekcji jest dodatkowym zabezpieczeniem na pierwsze pojawienie. */ .about-img{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)} .about-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease-out)} .about-img img.on{opacity:1} .about-flow{border-left:var(--hairline)} .about-block{ min-height:88svh;display:flex;flex-direction:column;justify-content:center;gap:16px; padding:clamp(36px,6vh,72px) var(--pad-x);border-bottom:var(--hairline); } .about-block:last-child{border-bottom:none} .about-block p{color:var(--cream-dim);max-width:52ch} .about-block .drop{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--cream)} /* liczby (count-up) */ .stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:var(--hairline)} .stat{ padding:clamp(26px,4vw,48px);text-align:center;border-right:var(--hairline);background:var(--ink-2); } .stat:last-child{border-right:none} .stat-num{ font-family:var(--serif);font-size:clamp(2.4rem,6vw,4.2rem);color:var(--orange-hot); font-variant-numeric:tabular-nums;line-height:1; } .stat-lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim);margin-top:10px} /* ── 12. OPINIE ── */ .reviews{border-bottom:var(--hairline)} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr)} .review{ padding:clamp(26px,4.5vh,48px) var(--pad-x);border-right:var(--hairline);background:var(--ink-2); display:flex;flex-direction:column;gap:16px; } .review:last-child{border-right:none} .review q{font-family:var(--serif);font-style:italic;font-size:1.05rem;quotes:'„' '"';color:var(--cream)} .review .who{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);margin-top:auto} .review .stars{color:var(--copper);letter-spacing:4px;font-size:.9rem} .reviews-cta{display:flex;gap:14px;justify-content:center;padding:34px 20px;flex-wrap:wrap;border-top:var(--hairline)} /* ── 13. FAQ — 2 niezależne kolumny, akordeon, płynne rozwijanie ── */ html{interpolate-size:allow-keywords} .faq{border-bottom:var(--hairline);max-width:100%} .faq-list{ display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(48px,7vw,120px); align-items:start; padding:10px var(--pad-x) clamp(52px,8vh,88px); } @media (max-width:899px){.faq-list{grid-template-columns:1fr;gap:0}} .faq-item{border-bottom:var(--hairline)} .faq-col .faq-item:last-child{border-bottom:none} .faq-item summary{ cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center; padding:26px 0;font-weight:700;font-size:1.02rem;transition:color .2s; } .faq-item summary:hover{color:var(--orange-hot)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:'+';font-family:var(--serif);font-size:1.6rem;color:var(--orange-hot); line-height:1;transition:transform .35s var(--ease-out);flex-shrink:0; } .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item p{padding:2px 0 28px;color:var(--cream-dim);max-width:60ch;line-height:1.85} /* płynne rozwijanie treści (Chromium; inne przeglądarki: natychmiastowe) */ @media (prefers-reduced-motion:no-preference){ .faq-item::details-content{ block-size:0;overflow:hidden; transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete; } .faq-item[open]::details-content{block-size:auto} } /* ── 14. KONTAKT / REZERWACJA ── */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:var(--hairline)} /* kafle kontaktu: duże, przewiewne, równy oddech góra/dół */ #kontakt .menu-cat-head{padding-bottom:clamp(28px,5vh,52px)} .c-tile{ /* góra o 10 pkt (~13 px) mniejsza niż dół; boki = wspólny margines strony */ padding:calc(var(--pad-x) - 13px) var(--pad-x) var(--pad-x); border-right:var(--hairline);border-bottom:var(--hairline); display:flex;flex-direction:column;gap:16px;background:var(--ink); } .c-tile:nth-child(3n){border-right:none} .c-tile.alt{background:var(--ink-2)} .c-tile h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin-bottom:2px} .c-tile p,.c-tile address{font-style:normal;color:var(--cream-dim);font-size:.95rem;line-height:1.8} .c-tile a.big{ font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--cream); text-decoration:none;transition:color .2s; } .c-tile a.big:hover{color:var(--orange-hot)} .c-tile .small{font-size:.78rem;color:var(--cream-dim)} .hours{width:100%;border-collapse:collapse;font-size:.95rem} .hours td{padding:8px 0;color:var(--cream-dim)} .hours td:last-child{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums} .hours tr.today td{color:var(--orange-hot);font-weight:700} /* mapa lazy */ .map-tile{grid-column:span 3;position:relative;min-height:440px;padding:0;border-right:none} .map-ph{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; background:linear-gradient(rgba(8,17,20,.72),rgba(8,17,20,.72)),url('../img/hero-4-960.webp') center/cover; cursor:pointer;width:100%; } .map-tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.4) contrast(1.05)} /* ── 15. STOPKA ── */ footer{background:#060D10;padding:clamp(52px,8vh,88px) var(--pad-x) 34px} /* stopka: 4 równe kolumny na całej szerokości (brand + 3 listy) */ .foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,64px);align-items:start} .foot-brand{display:flex;flex-direction:column;gap:14px} .foot-brand img{width:120px;height:120px;object-fit:cover} .foot-brand p{font-size:.82rem;color:var(--cream-dim)} .foot-cols{display:contents} .foot-col h4{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--orange-hot);font-weight:400;margin-bottom:14px} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:8px} /* miasto w liście lokali */ .f-city{ display:block;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase; color:var(--orange-hot);margin:16px 0 2px; } .foot-col li:first-child .f-city{margin-top:0} .foot-col a{color:var(--cream-dim);text-decoration:none;font-size:.86rem;transition:color .2s} .foot-col a:hover{color:var(--cream)} .foot-squirrel{width:120px;position:relative} .foot-bottom{ display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; margin-top:clamp(52px,8vh,88px);padding-top:16px;border-top:var(--hairline); font-size:.74rem;color:var(--cream-dim); } .foot-bottom a{color:inherit;text-decoration:none} .foot-bottom a:hover{color:var(--cream)} /* ── 16. DOLNY PASEK CTA (mobile) ── */ .bottombar{ position:fixed;left:0;right:0;bottom:0;z-index:880;height:var(--bottombar-h); display:none;grid-template-columns:1fr 1fr; border-top:var(--hairline); } .bottombar a{ display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none; font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; } .bottombar .bb-call{background:var(--ink-2);color:var(--cream)} .bottombar .bb-res{background:var(--orange);color:#03181B} /* ── 17. COOKIES (GA4 Consent Mode v2) ── */ .cookiebar{ position:fixed;z-index:950;left:0;right:0;bottom:0; background:var(--ink-3);border-top:2px solid var(--orange); padding:18px clamp(20px,5vw,48px); display:none;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; } .cookiebar.show{display:flex} .cookiebar p{font-size:.8rem;color:var(--cream-dim);max-width:64ch} .cookiebar .actions{display:flex;gap:10px} .cookiebar .btn{padding:11px 22px;font-size:.64rem} /* ── 18. LIGHTBOX ── */ /* ============================================================ 19. EFEKTY — WYŁĄCZALNE MODUŁY Aktywne tylko przy klasie eff-* na (steruje js/main.js) i tylko przy prefers-reduced-motion: no-preference. ============================================================ */ /* — EFEKT 6a: pasek postępu scrolla — */ .progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:940; background:transparent;pointer-events:none;display:none; } .progress .bar{height:100%;width:0;background:var(--orange)} html.eff-progress .progress{display:block} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:scroll()){ html.eff-progress .progress .bar{ width:100%;transform-origin:0 50%;transform:scaleX(0); animation:progGrow linear both;animation-timeline:scroll(root); } @keyframes progGrow{to{transform:scaleX(1)}} } } /* — EFEKT 1: scroll dots (desktop) — */ .dots{ position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:860; display:none;flex-direction:column;gap:14px; } html.eff-dots .dots{display:flex} .dot{position:relative;width:24px;height:24px;display:grid;place-items:center} .dot::after{content:'';width:8px;height:8px;background:rgba(233,240,242,.35);transition:background .25s,transform .25s} .dot:hover::after{background:var(--cream)} .dot.active::after{background:var(--orange-hot);transform:scale(1.35)} .dot .tip{ position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px); font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream); background:var(--ink-3);padding:5px 10px;white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .2s,transform .2s; } .dot:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)} /* — EFEKT 2: parallax hero (CSS scroll-driven; tylko desktop) — */ @media (prefers-reduced-motion:no-preference) and (min-width:900px){ @supports (animation-timeline:view()){ html.eff-parallax .hero-media{ animation:heroPar linear both; animation-timeline:view(block);animation-range:exit 0% exit 100%; } @keyframes heroPar{ to{transform:translateY(18%) scale(1.06);filter:brightness(.55)} } html.eff-parallax .hero-inner{ animation:heroTxt linear both; animation-timeline:view(block);animation-range:exit 0% exit 60%; } @keyframes heroTxt{to{transform:translateY(-40px);opacity:0}} } } /* — EFEKT 3: orkiestracja wejść (klasy nadaje IO w JS) — */ @media (prefers-reduced-motion:no-preference){ html.eff-reveal .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} html.eff-reveal .rv.in{opacity:1;transform:none} /* fale dla pozycji menu: opóźnienie wg --wave (JS ustawia 0/1/2...) */ html.eff-reveal .dish.rv{transition-delay:calc(var(--wave,0)*90ms)} html.eff-reveal .beer-tile.rv,{transition-delay:calc(var(--wave,0)*90ms)} } html:not(.eff-reveal) .rv{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}} /* — EFEKT 4: sticky scena O nas — układ wyżej (10); tu tylko wyłącznik — */ html:not(.eff-sticky-about) .about{display:block} html:not(.eff-sticky-about) .about-img{position:relative;height:52vw;max-height:520px} html:not(.eff-sticky-about) .about-img img{position:absolute;opacity:0} html:not(.eff-sticky-about) .about-img img.on{opacity:1} html:not(.eff-sticky-about) .about-block{min-height:0;padding:clamp(28px,5vw,52px) clamp(20px,6vw,84px)} /* — EFEKT 5: marquee (animacja) — */ @media (prefers-reduced-motion:no-preference){ html.eff-marquee .marquee-track{animation:marq 36s linear infinite} @keyframes marq{to{transform:translateX(-50%)}} } html:not(.eff-marquee) .marquee-track .marquee-part:nth-child(n+2){display:none} html:not(.eff-marquee) .marquee{text-align:center} /* — EFEKT 6b: smart nav (chowanie pasków przy scrollu w dół) — */ html.eff-smartnav .topbar.hide{transform:translateY(-100%)} html.eff-smartnav .bottombar{transition:transform .35s var(--ease-out)} html.eff-smartnav .bottombar.hide{transform:translateY(100%)} /* — EFEKT 7: wiewiórka (signature) — */ .squirrel{ position:fixed;top:-2px;left:0;z-index:945;width:34px;height:34px; display:none;pointer-events:none; transform:translateX(-40px); transition:transform .18s linear; } html.eff-squirrel .squirrel{display:block} .squirrel svg{width:100%;height:100%;overflow:visible} .squirrel .sq-body{fill:var(--cream);stroke:none} @media (prefers-reduced-motion:no-preference){ .squirrel.hop{animation:sqHop .5s var(--ease-out)} @keyframes sqHop{ 0%{translate:0 0}40%{translate:0 -14px;rotate:-8deg}100%{translate:0 0;rotate:0deg} } } /* oczy w stopce */ .foot-eyes{position:relative} .foot-eyes .pupil{transition:transform .12s linear} /* — EFEKT 9: menu hover detale (desktop) — */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ /* bez tła pod pozycją — hover niesie sama typografia i linia wiodąca */ html.eff-menuhover .dish:hover{transform:translateX(6px)} html.eff-menuhover .dish .dish-dots{transform:scaleX(.96);transition:transform .3s var(--ease-out)} html.eff-menuhover .dish:hover .dish-dots{transform:scaleX(1);border-bottom-color:var(--orange-hot)} html.eff-menuhover .dish .dish-name{transition:color .22s var(--ease-out)} html.eff-menuhover .dish:hover .dish-name, html.eff-menuhover .dish:hover .dish-price{color:var(--orange-hot)} } /* ── 20. STRONA 404 ── */ .p404{ min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:40px 24px;gap:18px; } .p404 .code{font-family:var(--serif);font-size:clamp(6rem,20vw,12rem);line-height:1;color:var(--orange)} .p404 svg{width:130px;opacity:.9} .p404 p{color:var(--cream-dim);max-width:44ch} .p404 .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px} /* ── RESPONSYWNOŚĆ ── */ @media (max-width:1099px){ .beer{grid-template-columns:1fr} .beer-img{border-left:none;border-top:var(--hairline);min-height:300px} .beer-tiles{grid-template-columns:repeat(2,1fr)} .beer-tile:nth-child(2n){border-right:none} .contact-grid{grid-template-columns:repeat(2,1fr)} .c-tile:nth-child(3n){border-right:var(--hairline)} .c-tile:nth-child(2n){border-right:none} .map-tile{grid-column:span 2} .reviews-grid{grid-template-columns:1fr} .review{border-right:none;border-bottom:var(--hairline)} } @media (max-width:899px){ /* topbar jest chowany na starcie — hero zaczyna się od samej góry ekranu */ .rail{display:none} .topbar{display:flex} .bottombar{display:grid} /* copyright: równy odstęp nad i pod tekstem (16px), bez pustki na końcu */ footer{padding-bottom:16px} .dots{display:none!important} .squirrel{display:none!important} /* pierwszy ekran hero = pełne 100svh (kafle NAP zaczynają się pod zgięciem); treść dociśnięta do dołu, 96px oddechu od góry */ .hero{min-height:0} .hero-inner{ padding-top:96px; min-height:calc(100svh - 93px); /* 93px = wysokość wskaźnika SCROLL pod spodem */ display:flex;flex-direction:column;justify-content:flex-end; } /* Nagłówek menu: przycisk Udostępnij wyśrodkowany na napisie MENU. Siatka zamiast flexa — dzięki display:contents na pustym divie eyebrow i h2 stają się osobnymi wierszami, więc przycisk może dzielić wiersz z samym "Menu". align-self:center trafia w środek linii nagłówka niezależnie od jego rozmiaru (h-section skaluje się przez clamp), czego dobrany na sztywno margines nie zapewniał. */ .menu-head{ display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center; } /* tylko bezklasowy div z eyebrow i h2 — .menu-share musi zostać flexem */ .menu-head > div:not([class]){display:contents} .menu-head .eyebrow{grid-column:1;grid-row:1} .menu-head .h-section{grid-column:1;grid-row:2} .menu-share{grid-column:2;grid-row:2;align-self:center} .menu-share .btn{padding:12px 14px;font-size:.6rem;white-space:nowrap} /* ceny zawsze dobite do prawej — także gdy łamią się do nowej linii */ .dish-price{margin-left:auto;text-align:right} /* e-mail w kaflach kontaktu: ta sama czcionka co reszta treści */ .c-tile .small{font-size:.95rem} /* CTA po menu: numer telefonu w osobnej linii */ .menu-cta-strip .btn-primary{flex-direction:column;gap:8px;line-height:1.4} .hero-nap{grid-template-columns:1fr 1fr} /* kafle NAP: identyczne marginesy w każdym kaflu */ .hero-nap>*,.hero-nap>*:first-child{padding:15px var(--pad-x);border-bottom:var(--hairline)} .menu-feature{grid-template-columns:1fr} .mf-img{min-height:56vw} .mf-body{border-left:none;border-top:var(--hairline)} /* menu: ceny łamią się do nowej linii zamiast rozpychać stronę */ .dish-row{flex-wrap:wrap} /* pasek kategorii: zjeżdża pod topbar, gdy ten jest widoczny */ .cats{transition:top .35s var(--ease-out)} html.topbar-shown .cats{top:var(--topbar-h)} /* przy nawigacji z paska topbar jest wymuszenie chowany — offset = sam pasek kategorii */ .menu-cat{scroll-margin-top:55px} /* O nas: przypięte zdjęcie, tekst przewija się pod nim */ .about{display:block;position:relative} .about-sticky{position:sticky;top:0;z-index:2;height:31vh;overflow:hidden} .about-img{position:relative;height:100%;max-height:none} .about-flow{border-left:none;position:relative;z-index:1;background:var(--ink)} .about-block{min-height:52vh;padding:clamp(28px,6vw,48px) clamp(20px,6vw,84px)} .stats{grid-template-columns:repeat(3,1fr)} /* stopka: jedna kolumna, logo na całą szerokość */ .foot-grid{grid-template-columns:1fr;gap:34px} .foot-brand img{width:100%;height:auto;aspect-ratio:1/1} .foot-squirrel{display:none} .cookiebar{padding-bottom:calc(var(--bottombar-h) + 14px)} .lunch{grid-template-columns:1fr;gap:8px;text-align:left} } @media (max-width:599px){ .contact-grid{grid-template-columns:1fr} .c-tile{border-right:none!important} .map-tile{grid-column:span 1} .stats{grid-template-columns:1fr} .stat{border-right:none;border-bottom:var(--hairline)} .hero-cta{width:100%} .hero-cta .btn{width:100%;justify-content:center;text-align:center} } /* ── 21. PRINT: tylko menu, czarno-białe ── */ @media print{ body{background:#fff;color:#000;font-size:11pt;padding:0} .rail,.topbar,.overlay,.bottombar,.cookiebar,.dots,.progress,.squirrel, .hero,.marquee,.beer-img,.about,.gallery,.reviews,.faq,.contact-grid, footer,.menu-cta-strip,.menu-share,.lunch.is-hidden,.stats,.mf-img{display:none!important} .menu-cat,.dishes{padding:0;border:none;columns:1;max-width:100%} .menu-cat-head{padding:14pt 0 4pt} .h-section,.h-tile,.dish-name{color:#000} .dish{border-bottom:1pt dotted #999;padding:6pt 0} .dish-desc,.dish-extra{color:#333} .dish-price{color:#000} .cats{display:none} .subcats{display:none!important} /* wydruk zawsze pokazuje pełną kartę, niezależnie od wybranej zakładki */ .menu-body{display:block!important} .menu-cat[hidden],.menu-group[hidden]{display:block!important} .eyebrow{color:#000} .menu-feature{display:block;border:none} .mf-body{background:none;padding:6pt 0;border:none;color:#000} .mf-body .price{color:#000} .badge{border-color:#000;color:#000} } /* ══════════════════════════════════════════════════════════════ APARTAMENTY — elementy specyficzne dla tej podstrony ══════════════════════════════════════════════════════════════ */ /* pokaz zdjęć w hero (zastępuje wideo) */ .hero-slides{position:absolute;inset:0} .hero-slides img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .8s var(--ease-out); } .hero-slides img.on{opacity:1} .hero-dots{ position:absolute;right:var(--pad-x);bottom:calc(var(--bottombar-h) + 96px); z-index:3;display:flex;gap:9px; } .hero-dots button{ width:26px;height:3px;border:0;padding:0;cursor:pointer; background:rgba(233,240,242,.28);transition:background .3s,width .3s; } .hero-dots button[aria-current="true"]{background:var(--orange);width:40px} @media (max-width:899px){ .hero-dots{bottom:auto;top:calc(var(--topbar-h) + 18px)} } /* karty apartamentów — naprzemienne ułożenie zdjęcia */ .apt-card-x{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--hairline)} .apt-card-x .mf-img{min-height:400px;transition:min-height .45s var(--ease-out)} /* wszystkie karty jednakowo: zdjęcie po lewej, opis po prawej */ .apt-meta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px} .apt-meta span{ font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; padding:6px 12px;border:1px solid rgba(233,240,242,.16);color:var(--cream-dim); } .apt-meta span.key{border-color:rgba(47,165,174,.5);color:var(--orange-hot)} .apt-feats{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:6px} .apt-feats li{list-style:none;font-size:.92rem;color:var(--cream-dim);padding-left:18px;position:relative} .apt-feats li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--orange)} @media (max-width:899px){ .apt-card-x{grid-template-columns:1fr} .apt-card-x .mf-img{min-height:240px} .apt-card-x .mf-img:has(.apt-spacer.on){min-height:min(88vw,440px)} /* pionowe ujęcie potrzebuje wysokości, inaczej zmieściłoby się w wąski pasek */ .apt-card-x .mf-img.pion{min-height:min(120vw,560px)} /* miniatury tuż pod dużym zdjęciem, przed opisem — inaczej zmiana kadru wymaga zjechania na koniec karty i powrotu na górę */ .apt-card-x .apt-thumbs{order:-1;margin-top:0;margin-bottom:16px} .apt-feats{grid-template-columns:1fr} } /* podmenu układów — przyklejone tylko w obrębie sekcji z apartamentami */ .apt-nav{ position:sticky;top:0;z-index:600; display:flex;gap:0;overflow-x:auto;scrollbar-width:none; background:rgba(8,17,20,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-top:var(--hairline);border-bottom:var(--hairline); opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out); } .apt-nav::-webkit-scrollbar{display:none} .apt-nav.widoczny{opacity:1;pointer-events:auto} .apt-nav a{ flex:1 0 auto;text-align:center;white-space:nowrap; padding:15px clamp(14px,1.8vw,26px); font-family:var(--sans);font-size:.72rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim); text-decoration:none;border-bottom:2px solid transparent; transition:color .25s var(--ease-out),border-color .25s var(--ease-out); } .apt-nav a:hover{color:var(--cream)} .apt-nav a.active{color:var(--orange);border-bottom-color:var(--orange)} .apt-nav-m2{ display:block;font-size:.62rem;font-weight:400;letter-spacing:.1em; text-transform:none;opacity:.65;margin-top:3px; } /* karta ma zaczynać się pod przyklejonym paskiem, nie za nim */ .apt-card-x{scroll-margin-top:60px} @media (max-width:640px){ .apt-nav a{padding:12px 16px;font-size:.66rem;letter-spacing:.08em} } Ujęcia poziome wypełniają kadr. Pionowe pokazujemy w całości, a puste boki zasłania rozmyta kopia tego samego zdjęcia — stąd dwa jeden na drugim. */ .apt-foto{position:absolute;inset:0;overflow:hidden;background:var(--ink-2)} /* po dwie warstwy zdjęcia i tła — przenikanie zamiast cięcia */ .apt-foto img{ position:absolute;inset:0;width:100%;height:100%;display:block; opacity:0;transition:opacity .55s var(--ease-out); } .apt-foto-tlo{ object-fit:cover; filter:blur(30px) saturate(1.25) brightness(.62); transform:scale(1.18); /* rozmycie rozjaśnia krawędzie — powiększamy poza kadr */ } .apt-foto-glowna{object-fit:cover} /* dopasowanie kadru siedzi na warstwie, nie na ramce: przy przejściu poziome↔pionowe wychodzące zdjęcie ma dokończyć w swoim kadrze */ .apt-foto-glowna.pion{object-fit:contain} .apt-foto-glowna.on{opacity:1} .apt-foto.pion .apt-foto-tlo.on{opacity:1} /* powiększenie przy najechaniu dotyczyło kafli menu, nie przełączanego zdjęcia */ .apt-card-x:hover .apt-foto img{transform:none} .apt-card-x:hover .apt-foto-tlo{transform:scale(1.18)} /* wirtualny spacer w ramce zdjęcia — leży nad warstwami obrazu */ .apt-spacer{ position:absolute;inset:0;z-index:2;background:var(--ink-2); opacity:0;visibility:hidden; transition:opacity .45s var(--ease-out),visibility 0s linear .45s; } .apt-spacer.on{opacity:1;visibility:visible;transition-delay:0s} .apt-spacer iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; opacity:0;transition:opacity .6s var(--ease-out); } .apt-spacer.gotowa iframe{opacity:1} /* zdjęcie w kadrze do czasu, aż panorama się rozrusza */ .apt-spacer .apt-spacer-zastepcze{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:1;filter:brightness(.55);transition:opacity .6s var(--ease-out); } .apt-spacer.gotowa .apt-spacer-zastepcze{opacity:0} .apt-spacer-czekaj{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--sans);font-size:.68rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--cream); transition:opacity .4s var(--ease-out); } .apt-spacer.gotowa .apt-spacer-czekaj{opacity:0} /* przycisk spaceru w pasku miniatur — szerokość trzech miniatur z odstępami */ .apt-thumbs button.apt-thumb-spacer{ width:calc(74px * 3 + 6px * 2);height:52px; display:flex;align-items:center;justify-content:center; background:var(--orange);color:#fff; font-family:var(--sans);font-size:.6rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;line-height:1.5;text-align:center; } .apt-thumbs button.apt-thumb-spacer:hover{opacity:1;background:var(--orange-hot)} /* miniatury pod opisem — wybierają zdjęcie w ramce obok */ .apt-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .apt-thumbs button{ width:74px;height:52px;padding:0;border:0;cursor:pointer;overflow:hidden;background:none; opacity:.6;transition:opacity .3s,transform .3s,outline-color .3s; outline:2px solid transparent;outline-offset:-2px; } .apt-thumbs button:hover{opacity:1;transform:translateY(-2px)} .apt-thumbs button.active{opacity:1;outline-color:var(--orange)} .apt-thumbs button:focus-visible{outline-color:var(--cream)} .apt-thumbs img{width:100%;height:100%;object-fit:cover;display:block} /* zaproszenie do restauracji */ #restauracje .beer-story{padding-bottom:clamp(44px,7vh,80px)} .inv{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--hairline)} .inv-card{position:relative;min-height:640px;display:flex;align-items:flex-end;overflow:hidden} .inv-card + .inv-card{border-left:var(--hairline)} .inv-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)} .inv-card:hover img{transform:scale(1.05)} .inv-card::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,17,20,.18) 0%,rgba(8,17,20,.42) 38%,rgba(8,17,20,.88) 72%,rgba(8,17,20,.97) 100%); } .inv-body{position:relative;z-index:2;padding:clamp(44px,7vh,80px) var(--pad-x) clamp(44px,6vh,68px);display:flex;flex-direction:column;gap:18px} .inv-body .eyebrow{margin-bottom:0} .inv-name{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;margin-bottom:2px} .inv-body p{color:var(--cream-dim);max-width:46ch;line-height:1.85} .inv-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px} .inv-links a{ font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700; padding:13px 24px;border:1px solid rgba(233,240,242,.26);color:var(--cream);text-decoration:none; transition:border-color .3s,background .3s,color .3s; } .inv-links a:hover{border-color:var(--orange);color:var(--orange-hot)} .inv-links a.gold{border-color:rgba(200,147,26,.5)} .inv-links a.gold:hover{border-color:#D9A227;color:#EFBB4A} @media (max-width:899px){ .inv{grid-template-columns:1fr} .inv-card + .inv-card{border-left:none;border-top:var(--hairline)} .inv-card{min-height:480px} } /* zasady pobytu */ /* 8 zasad = dokładnie 4 kafle × 2 rzędy */ .rules{ display:grid;grid-template-columns:repeat(4,1fr); border-top:var(--hairline); } .rules div{ /* to samo światło co w kaflach kontaktu: góra o 13 px mniejsza niż dół */ padding:calc(var(--pad-x) - 13px) var(--pad-x) var(--pad-x); background:var(--ink); border-right:var(--hairline);border-bottom:var(--hairline); display:flex;flex-direction:column;gap:12px; transition:background .35s ease; } .rules div:nth-child(4n){border-right:none} .rules div:hover{background:var(--ink-2)} .rules b{ display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; color:var(--orange);font-weight:700; } .rules b::after{content:'';display:block;width:34px;height:1px;background:rgba(47,165,174,.55);margin-top:12px} .rules span{color:var(--cream-dim);font-size:.95rem;line-height:1.75} @media (max-width:1400px){ .rules{grid-template-columns:repeat(2,1fr)} .rules div:nth-child(4n){border-right:var(--hairline)} .rules div:nth-child(2n){border-right:none} } @media (max-width:640px){ .rules{grid-template-columns:1fr} .rules div,.rules div:nth-child(4n){border-right:none} .rules div{padding:26px var(--pad-x)} } /* ── KAFLE KONTAKTU: RÓWNANIE ── */ /* Jedna interlinia dla wszystkich treści, identyczny margines góra/dół, nagłówki i przyciski na wspólnych liniach niezależnie od długości tekstu. */ #kontakt .contact-grid{align-items:stretch} #kontakt .c-tile{ padding:clamp(30px,4vh,44px) clamp(28px,3vw,40px); gap:0; display:flex;flex-direction:column; } /* nagłówek: ta sama wysokość w każdym kaflu → tekst startuje równo */ #kontakt .c-tile h3{ font-size:1.42rem;line-height:1.25;margin:0 0 18px; min-height:calc(1.42rem * 1.25 * 2); /* miejsce na dwa wiersze */ display:flex;align-items:flex-start; } /* jedna interlinia dla akapitów, adresów, list i tabel */ #kontakt .c-tile p, #kontakt .c-tile address, #kontakt .c-tile li, #kontakt .c-tile td{ font-size:.95rem;line-height:1.75;color:var(--cream-dim);margin:0; } #kontakt .c-tile p + p{margin-top:14px} #kontakt .c-tile address{margin-bottom:14px} #kontakt .c-tile .small{font-size:.88rem;margin-top:14px} /* lista udogodnień w tym samym rytmie co reszta */ #kontakt .c-tile .apt-feats{margin:0;gap:8px 22px} #kontakt .c-tile .apt-feats li::before{top:.78em} /* tabela ocen w tym samym rytmie */ #kontakt .c-tile .hours{width:100%;border-collapse:collapse;margin:0} #kontakt .c-tile .hours td{padding:5px 0} #kontakt .c-tile .hours td:last-child{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums} /* duża liczba oceny bez rozpychania wiersza */ #kontakt .c-tile .big{font-size:2rem;line-height:1.2} /* przyciski i odnośniki końcowe zawsze przy dolnej krawędzi — równo we wszystkich kaflach */ #kontakt .c-tile:not(.map-tile) .btn{margin-top:auto!important;align-self:flex-start;padding-top:14px;padding-bottom:14px} /* kafel mapy zachowuje własny, wyśrodkowany układ */ #kontakt .map-tile{padding:0} #kontakt .map-tile .btn{margin-top:0!important;align-self:center} #kontakt .c-tile > *:last-child{margin-bottom:0} @media (max-width:900px){ #kontakt .c-tile h3{min-height:0;margin-bottom:14px} #kontakt .c-tile{padding:28px 24px} } /* ── zasłona przejścia między stronami ── */ .przejscie{ position:fixed;inset:0;z-index:2000;background:var(--ink); opacity:0;pointer-events:none;transition:opacity .42s ease; } html.wchodzi .przejscie{opacity:1;transition:none} html.wychodzi .przejscie{opacity:1} @media (prefers-reduced-motion:reduce){ .przejscie{display:none} }