/* ============================================================ HADDA KEBAB — arkusz stylow ------------------------------------------------------------ KONFIGURACJA Wszystko, co zwykle chce sie zmienic, jest w tej jednej sekcji ponizej. Zmieniasz wartosc tutaj i zmienia sie w calym serwisie. Nizej (SEKCJA 2) sa juz konkretne komponenty - tam zagladasz tylko przy wiekszych zmianach. ============================================================ */ :root{ /* --- KOLORY MARKI ------------------------------------------ --ember : glowny akcent (przyciski, linki, logo) --flame : akcent pomocniczy (gwiazdki, etykiety, "otwarte") --char : najciemniejszy - tla sekcji i tekst Chcesz zmienic kolorystyke? Wystarcza te trzy. */ --ember:#E2531F; --ember-dark:#C8410F; /* --ember po najechaniu myszka */ --flame:#F4A024; --char:#1B1512; /* --- KOLORY POMOCNICZE --- */ --smoke:#8C7F76; /* tekst drugorzedny, opisy dan */ --ash:#EFE7DE; /* jasne tlo sekcji, tekst na ciemnym */ --cream:#FBF7F2; /* tlo strony */ --white:#FFFFFF; --char-deep:#120E0C; /* stopka */ --text-soft:#4A4038; /* tekst w opiniach */ --text-muted:#B8ACA2; /* tekst na ciemnym tle */ --text-dim:#C9BEB4; /* lead w naglowku */ --footer-text:#7A6E65; --open-green:#4BD37B; /* kropka "otwarte" */ --veg-green:#5BA85F; /* etykieta "wege" */ /* --- TYPOGRAFIA -------------------------------------------- Zmiana kroju pisma: podmien nazwy ponizej ORAZ adres fonts.googleapis.com w pliku HTML. */ --display:'Bricolage Grotesque',system-ui,sans-serif; /* naglowki */ --body:'Instrument Sans',system-ui,sans-serif; /* tekst */ /* Rozmiary - clamp() = automatyczne skalowanie na telefonie */ --fs-h1:clamp(2.9rem,6.4vw,4.6rem); --fs-h2:clamp(2rem,4vw,2.9rem); --fs-price:1.05rem; --lh-tight:.94; /* naglowek glowny */ --lh-body:1.55; /* --- SIATKA I ODSTEPY --- */ --maxw:1120px; /* szerokosc tresci */ --pad-x:24px; /* margines boczny */ --sec-pad:88px; /* odstep miedzy sekcjami (desktop) */ --sec-pad-mobile:62px; --gap:14px; /* --- ZAOKRAGLENIA --- */ --r-pill:100px; /* przyciski */ --r-card:16px; --r-img:12px; --r-small:4px; /* --- ANIMACJE --- */ --t-fast:.18s; --t-med:.2s; --t-slow:.5s; --marquee-speed:28s; /* pasek przewijany pod naglowkiem */ --spit-speed:3.2s; /* obracajacy sie kwadracik */ /* --- PUNKTY ZALAMANIA (do odczytu) --- Media queries nie czytaja zmiennych CSS, wiec te wartosci sa wpisane na sztywno nizej. Tu tylko dla orientacji: 900px - uklad dwukolumnowy -> jednokolumnowy 820px - chowa menu, pokazuje dolny pasek z telefonem 760px - galeria 3 kolumny -> 2 */ } /* ============================================================ SEKCJA 2 — KOMPONENTY Ponizej juz konkretne elementy strony. Kolory i odstepy biora sie ze zmiennych powyzej. ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--body); background:var(--cream); color:var(--char); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)} /* ---------- TOPBAR ---------- */ .topbar{ background:var(--char);color:var(--ash); font-size:.8rem;letter-spacing:.04em; padding:9px 0;position:sticky;top:0;z-index:60; } .topbar .wrap{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap} .dot{width:7px;height:7px;border-radius:50%;background:var(--open-green);display:inline-block;margin-right:7px; box-shadow:0 0 0 0 rgba(75,211,123,.6);animation:pulse 2.4s infinite} @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(75,211,123,0)}100%{box-shadow:0 0 0 0 rgba(75,211,123,0)}} .topbar b{color:var(--white);font-weight:600} /* ---------- NAV ---------- */ nav{background:var(--char);border-bottom:1px solid rgba(27,21,18,.1);position:sticky;top:35px;z-index:50} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px} .logo{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;color:var(--ember)} .logo span{color:var(--char)} .navlinks{display:flex;gap:26px;font-size:.92rem;font-weight:500} .navlinks a{text-decoration:none;color:var(--smoke);transition:color var(--t-med)} .navlinks a:hover,.navlinks a:focus-visible{color:var(--ember)} .callbtn{ background:var(--ember);color:var(--white);text-decoration:none; padding:11px 20px;border-radius:var(--r-pill);font-weight:600;font-size:.92rem; white-space:nowrap;transition:transform var(--t-fast), background var(--t-fast); } .callbtn:hover{background:var(--ember-dark);transform:translateY(-1px)} @media(max-width:820px){.navlinks{display:none}} /* ---------- HERO ---------- */ .hero{position:relative;overflow:hidden;background:var(--char);color:var(--ash)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(88vh,760px)} .hero-copy{padding:76px 0 76px 0;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3} .hero-copy .inner{max-width:540px;margin-left:auto;padding:0 48px 0 24px} .eyebrow{ font-size:.76rem;letter-spacing:.18em;text-transform:uppercase; color:var(--flame);font-weight:600;margin-bottom:20px; display:flex;align-items:center;gap:11px; } .eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--flame),transparent)} h1{ font-family:var(--display);font-weight:800; font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.035em; color:var(--white);margin-bottom:22px; } h1 em{font-style:normal;color:var(--ember);display:block} .lede{font-size:1.08rem;color:var(--text-dim);max-width:44ch;margin-bottom:34px} .cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center} .btn{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; padding:15px 26px;border-radius:var(--r-pill);font-weight:600;font-size:1rem; transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast); } .btn-primary{background:var(--ember);color:var(--white)} .btn-primary:hover{background:var(--ember-dark);transform:translateY(-2px)} .btn-ghost{border:1.5px solid rgba(239,231,222,.32);color:var(--ash)} .btn-ghost:hover{border-color:var(--flame);color:var(--flame)} .hero-media{position:relative} .hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08)} .hero-media::before{ content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,var(--char) 0%,rgba(27,21,18,.55) 32%,transparent 68%); } /* rotating spit indicator */ .spit-tag{ position:absolute;right:28px;bottom:28px;z-index:4; background:rgba(27,21,18,.82);backdrop-filter:blur(8px); border:1px solid rgba(244,160,36,.4); padding:12px 18px;border-radius:var(--r-img);font-size:.82rem;color:var(--ash); display:flex;align-items:center;gap:10px; } .spit-tag .rot{ width:9px;height:9px;border-radius:2px;background:var(--flame); animation:spin var(--spit-speed) linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;min-height:auto} .hero-copy{order:2;padding:52px 0 60px} .hero-copy .inner{margin:0;padding:0 var(--pad-x);max-width:none} .hero-media{order:1;height:44vh;min-height:300px} .hero-media::before{background:linear-gradient(0deg,var(--char) 2%,rgba(27,21,18,.25) 60%,transparent 100%)} } /* ---------- STRIP ---------- */ .strip{background:var(--ember);color:var(--white);overflow:hidden;padding:13px 0; font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.02em} .marquee{display:flex;gap:0;white-space:nowrap;animation:slide var(--marquee-speed) linear infinite;width:max-content} .marquee span{padding:0 26px;display:inline-flex;align-items:center;gap:26px} .marquee span::after{content:"◆";font-size:.6rem;opacity:.7} @keyframes slide{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee{animation:none}.rot{animation:none}.dot{animation:none}} /* ---------- SECTIONS ---------- */ section{padding:var(--sec-pad) 0} .sec-head{margin-bottom:44px;max-width:640px} .sec-head .eyebrow{color:var(--ember)} .sec-head .eyebrow::after{background:linear-gradient(90deg,rgba(226,83,31,.4),transparent)} h2{font-family:var(--display);font-weight:800;font-size:var(--fs-h2); line-height:1.02;letter-spacing:-.03em;margin-bottom:14px} .sec-head p{color:var(--smoke);font-size:1.03rem} /* ---------- MENU ---------- */ #menu{background:var(--white)} .menu-layout{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start} .menu-cat{margin-bottom:40px} .menu-cat h3{ font-family:var(--display);font-size:1.05rem;font-weight:700; text-transform:uppercase;letter-spacing:.1em;color:var(--ember); margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--ash); } .item{ display:flex;justify-content:space-between;gap:18px;align-items:baseline; padding:13px 0;border-bottom:1px dashed rgba(27,21,18,.13); } .item:last-child{border-bottom:none} .item-name{font-weight:600;font-size:1.02rem} .item-desc{display:block;font-weight:400;font-size:.87rem;color:var(--smoke);margin-top:2px;line-height:1.4} .price{font-family:var(--display);font-weight:700;font-size:var(--fs-price);white-space:nowrap;color:var(--char)} .tag{ display:inline-block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase; background:var(--flame);color:var(--char);padding:2px 7px;border-radius:var(--r-small); font-weight:700;margin-left:7px;vertical-align:middle; } .tag.veg{background:var(--veg-green);color:#fff} .menu-side{position:sticky;top:130px} .side-card{background:var(--char);color:var(--ash);border-radius:var(--r-card);overflow:hidden} .side-card img{width:100%;height:190px;object-fit:cover} .side-card .pad{padding:24px} .side-card h4{font-family:var(--display);font-size:1.25rem;color:var(--white);margin-bottom:9px;letter-spacing:-.01em} .side-card p{font-size:.9rem;color:var(--text-muted);margin-bottom:18px} .side-card .btn{width:100%;justify-content:center;padding:13px} .pricenote{font-size:.8rem;color:var(--smoke);margin-top:18px;text-align:center;line-height:1.5} @media(max-width:900px){.menu-layout{grid-template-columns:1fr;gap:38px}.menu-side{position:static}} /* ---------- GALLERY ---------- */ #galeria{background:var(--ash)} .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} .gal figure{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--char)} .gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform var(--t-slow) ease} .gal figure:hover img{transform:scale(1.05)} .gal figcaption{ position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px; background:linear-gradient(0deg,rgba(27,21,18,.88),transparent); color:var(--white);font-size:.85rem;font-weight:500; } .gal .tall{grid-row:span 2} .gal .tall img{aspect-ratio:auto;height:100%} @media(max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal .tall{grid-row:span 1}.gal .tall img{aspect-ratio:4/3}} /* ---------- OPINIE ---------- */ .rev-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:36px} .score{font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;letter-spacing:-.04em} .stars{color:var(--flame);font-size:1.15rem;letter-spacing:.08em} .rev-meta{font-size:.9rem;color:var(--smoke)} .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rev{background:var(--white);border:1px solid rgba(27,21,18,.09);border-radius:14px;padding:24px} .rev .stars{font-size:.95rem;margin-bottom:11px} .rev p{font-size:.94rem;color:var(--text-soft);margin-bottom:14px} .rev cite{font-style:normal;font-size:.83rem;color:var(--smoke);font-weight:600} @media(max-width:820px){.revs{grid-template-columns:1fr}} /* ---------- KONTAKT ---------- */ #kontakt{background:var(--char);color:var(--ash)} #kontakt h2{color:var(--white)} #kontakt .sec-head p{color:var(--text-muted)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px} .info-block{margin-bottom:30px} .info-block .lbl{ font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--flame);font-weight:600;margin-bottom:7px; } .info-block .val{font-size:1.12rem;color:var(--white);font-weight:500;text-decoration:none} a.val:hover{color:var(--flame)} .info-block .sub{font-size:.88rem;color:var(--smoke)} .hours{width:100%;border-collapse:collapse;font-size:.95rem} .hours td{padding:9px 0;border-bottom:1px solid rgba(239,231,222,.12)} .hours td:last-child{text-align:right;color:var(--white);font-weight:500;font-variant-numeric:tabular-nums} .hours tr:last-child td{border-bottom:none} .hours .now{color:var(--flame)} .mapbox{border-radius:14px;overflow:hidden;border:1px solid rgba(239,231,222,.14);height:100%;min-height:340px} .mapbox iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05)} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:34px}.mapbox{min-height:280px}} /* ---------- FOOTER ---------- */ footer{background:var(--char-deep);color:var(--footer-text);padding:34px 0;font-size:.85rem} footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center} footer a{color:var(--text-muted);text-decoration:none} footer a:hover{color:var(--flame)} /* ---------- MOBILE CALL BAR ---------- */ .mobile-bar{ position:fixed;left:0;right:0;bottom:0;z-index:80;display:none; background:var(--ember);color:#fff;text-decoration:none; padding:15px;text-align:center;font-weight:700;font-size:1.02rem; box-shadow:0 -4px 20px rgba(0,0,0,.2); } @media(max-width:820px){ .mobile-bar{display:block} body{padding-bottom:56px} section{padding:var(--sec-pad-mobile) 0} } :focus-visible{outline:2.5px solid var(--flame);outline-offset:3px;border-radius:3px}