/* Paleta projektu takze na :root – natywne widgety Elementora stoja POZA wrapperem .b304, wiec bez tego `var(--red)` i spolka nie rozwiazuja sie w nich. */ :root{ --red:#E52A1B; --red-dark:#BF1D12; --lime:#B9D63A; --yellow:#F2D43C; --cream:#FFF9F2; --paper:#FFFFFF; --ink:#242424; --muted:#6E6E6E; --line:#EAE3DA; --dark:#202124; --shadow:0 18px 50px rgba(31,31,31,.10); --radius:24px; --radius-sm:16px; } @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap'); .b304.b304{ --red:#E52A1B; --red-dark:#BF1D12; --lime:#B9D63A; --yellow:#F2D43C; --cream:#FFF9F2; --paper:#FFFFFF; --ink:#242424; --muted:#6E6E6E; --line:#EAE3DA; --dark:#202124; --shadow:0 18px 50px rgba(31,31,31,.10); --radius:24px; --radius-sm:16px; font-family: "Josefin Sans", Arial, Helvetica, sans-serif; color:var(--ink); background:var(--paper); }.b304.b304 *{box-sizing:border-box}.b304.b304 img{display:block;max-width:100%}.b304.b304 a{text-decoration:none;color:inherit}.b304.b304 h1,.b304.b304 h2,.b304.b304 h3,.b304.b304 h4,.b304.b304 p{margin-top:0}.b304.b304 h1,.b304.b304 h2,.b304.b304 h3{font-family: "Josefin Sans", Arial, Helvetica, sans-serif}.b304.b304 .wrap{width:min(1280px,calc(100% - 30px));margin:0 auto}.b304.b304 .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--red); }.b304.b304 .eyebrow:before{ content:"";width:26px;height:3px;background:var(--lime);border-radius:20px; }.b304.b304 .section{padding:92px 0}.b304.b304 .section-title{font-size:clamp(34px,4vw,54px);line-height:1.02;margin-bottom:18px}.b304.b304 .section-lead{font-size:18px;line-height:1.75;color:var(--muted);max-width:720px}.b304.b304 .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:50px;padding:0 24px;border-radius:999px; font-size:15px;font-family:"Josefin Sans",Arial,Helvetica,sans-serif;font-weight:400;transition:.25s ease;border:1px solid transparent; }.b304.b304 .btn-primary{background:var(--red);color:#fff}.b304.b304 .btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}.b304.b304 .btn-light{background:#fff;color:var(--ink);border-color:#fff}.b304.b304 .btn-light:hover{background:var(--cream);transform:translateY(-2px)}.b304.b304 .btn-outline{border-color:var(--ink);background:transparent}.b304.b304 .btn-outline:hover{background:var(--ink);color:#fff}.b304.b304 .btn small{font-size:12px;font-weight:700;opacity:.75}.b304-nav.b304-nav{ height:78px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px); position:relative;z-index:20;border-bottom:1px solid rgba(0,0,0,.06); }.b304-nav.b304-nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.b304-logo.b304-logo{ width:86px;height:64px;object-fit:contain; }.b304-nav-links.b304-nav-links{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:800}.b304-nav-links.b304-nav-links a:hover{color:var(--red)}.b304-nav-cta.b304-nav-cta{display:flex;align-items:center;gap:10px}.b304-hero.b304-hero{ min-height:690px;display:flex;align-items:center;position:relative; background: linear-gradient(90deg,rgba(18,18,18,.88) 0%,rgba(18,18,18,.72) 34%,rgba(18,18,18,.18) 68%,rgba(18,18,18,.05) 100%), url('https://mafi.hostlix.pl/Bistro304/wp-content/uploads/2026/09/pizza.jpeg') center/cover no-repeat; color:#fff; }.b304-hero.b304-hero:after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px; background:linear-gradient(0deg,rgba(0,0,0,.24),transparent);pointer-events:none; }.b304-hero-content.b304-hero-content{max-width:650px;position:relative;z-index:2;padding:70px 0}.b304-hero.b304-hero .eyebrow{color:#fff}.b304-hero.b304-hero h1{font-size:clamp(40px,5vw,68px);line-height:1.02;margin:18px 0 22px;letter-spacing:-.02em}.b304-hero.b304-hero p{font-size:19px;line-height:1.7;max-width:570px;color:rgba(255,255,255,.86)}.b304-hero-actions.b304-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.b304-hero-meta.b304-hero-meta{ margin-top:34px;display:flex;gap:28px;flex-wrap:wrap; font-size:14px;font-weight:700;color:rgba(255,255,255,.83) }.b304-hero-meta.b304-hero-meta span{display:flex;align-items:center;gap:9px}.b304-dot.b304-dot{width:9px;height:9px;background:var(--lime);border-radius:50%}.b304-today.b304-today{background:var(--cream);position:relative}.b304-today.b304-today:before{ content:"";position:absolute;width:260px;height:260px;border-radius:50%; background:var(--yellow);opacity:.14;right:-80px;top:30px; }.b304-today-grid.b304-today-grid{ display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:stretch; }.b304-today-card.b304-today-card{ background:#fff;border-radius:var(--radius);padding:36px;box-shadow:var(--shadow); border:1px solid rgba(229,42,27,.10); }.b304-today-head.b304-today-head{ display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px }.b304-today-title.b304-today-title{font-size:40px;margin-bottom:8px}.b304-date.b304-date{ background:var(--yellow);padding:8px 12px;border-radius:999px;font-size:13px;font-weight:900;white-space:nowrap }.b304-menu-columns.b304-menu-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.b304-menu-block.b304-menu-block h4{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--red);margin-bottom:12px}.b304-menu-list.b304-menu-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.b304-menu-list.b304-menu-list li{ padding-bottom:10px;border-bottom:1px dashed var(--line);line-height:1.45;font-size:15px }.b304-menu-list.b304-menu-list strong{display:block;font-size:14px;margin-top:4px;color:var(--red)}.b304-today-pricebox.b304-today-pricebox{ display:flex;justify-content:space-between;gap:16px;align-items:center; background:var(--dark);color:#fff;border-radius:18px;padding:20px 22px;margin-top:24px }.b304-today-pricebox.b304-today-pricebox b{font-size:28px;font-family:"Josefin Sans",Arial,Helvetica,sans-serif}.b304-today-photo.b304-today-photo{ min-height:580px;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow) }.b304-today-photo.b304-today-photo img{width:100%;height:100%;object-fit:cover}.b304-today-photo.b304-today-photo .floating{ position:absolute;left:22px;bottom:22px;background:#fff;border-radius:18px;padding:18px 20px;max-width:330px; box-shadow:var(--shadow) }.b304-today-photo.b304-today-photo .floating b{display:block;font-size:17px;margin-bottom:4px}.b304-today-photo.b304-today-photo .floating span{font-size:13px;color:var(--muted)}.b304-story-grid.b304-story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.b304-story-photo.b304-story-photo{ position:relative;border-radius:var(--radius);overflow:hidden;min-height:540px;background:#eee; }.b304-story-photo.b304-story-photo img{width:100%;height:100%;object-fit:cover}.b304-story-badge.b304-story-badge{ position:absolute;right:22px;bottom:22px;background:var(--lime);border-radius:22px;padding:18px 20px; font-weight:900;max-width:190px;line-height:1.25 }.b304-story-copy.b304-story-copy .section-lead{max-width:620px}.b304-stats.b304-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}.b304-stat.b304-stat{border:1px solid var(--line);border-radius:16px;padding:18px}.b304-stat.b304-stat b{display:block;font-family:"Josefin Sans",Arial,Helvetica,sans-serif;font-size:28px;color:var(--red)}.b304-stat.b304-stat span{font-size:13px;color:var(--muted)}.b304-cats.b304-cats{background:#fff}.b304-cat.b304-cat{ min-height:250px;border-radius:20px;overflow:hidden;position:relative;color:#fff; display:flex;align-items:flex-end;background:#222;box-shadow:var(--shadow) }.b304-cat.b304-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s ease}.b304-cat.b304-cat:after{ content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.05) 62%) }.b304-cat.b304-cat span{position:relative;z-index:2;padding:22px;font-size:21px;font-weight:900;font-family:"Josefin Sans",Arial,Helvetica,sans-serif}.b304-cat.b304-cat:hover img{transform:scale(1.05)}.b304-fullmenu.b304-fullmenu{background:#FFF9EB}.b304-quicklinks.b304-quicklinks{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 34px}.b304-chip.b304-chip{ padding:11px 17px; border-radius:999px; background:var(--red); border:1px solid var(--red); color:#fff; font-size:13px; font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-weight:400; cursor:pointer; transition:.2s ease; }.b304-chip.b304-chip:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; transform:translateY(-2px); }.b304-business.b304-business{ background: linear-gradient(90deg,rgba(25,25,25,.94),rgba(25,25,25,.82)), url('https://mafi.hostlix.pl/Bistro304/wp-content/uploads/2026/09/dania-glowne.jpeg') center/cover no-repeat; color:#fff }.b304-business-grid.b304-business-grid{display:grid;grid-template-columns:1fr .72fr;gap:50px;align-items:center}.b304-business.b304-business .section-lead{color:rgba(255,255,255,.75)}.b304-business-card.b304-business-card{ background:#fff;color:var(--ink);border-radius:22px;padding:28px }.b304-business-card.b304-business-card ul{margin:0;padding:0;list-style:none;display:grid;gap:13px}.b304-business-card.b304-business-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}.b304-check.b304-check{ width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--lime); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900 }.b304-contact-grid.b304-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px}.b304-contact-card.b304-contact-card{ background:var(--cream);border-radius:var(--radius);padding:34px }.b304-contact-item.b304-contact-item{padding:16px 0;border-bottom:1px solid var(--line)}.b304-contact-item.b304-contact-item:last-child{border-bottom:0}.b304-contact-item.b304-contact-item small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.10em;margin-bottom:5px}.b304-contact-item.b304-contact-item b{font-size:18px}.b304-contact-photo.b304-contact-photo{border-radius:var(--radius);overflow:hidden;min-height:520px;background:#ddd}.b304-contact-photo.b304-contact-photo img{width:100%;height:100%;object-fit:cover}.b304-testimonials.b304-testimonials{ background:#FFF9EB; position:relative; overflow:hidden; }.b304-testimonials.b304-testimonials:before,.b304-testimonials.b304-testimonials:after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at center, rgba(185,214,58,.18), rgba(185,214,58,0) 70%); pointer-events:none; }.b304-testimonials.b304-testimonials:before{left:-70px;top:30px}.b304-testimonials.b304-testimonials:after{right:-70px;bottom:20px}.b304-testimonials-head.b304-testimonials-head{ text-align:center; max-width:760px; margin:0 auto 38px; position:relative; z-index:2; }.b304-testimonials-head.b304-testimonials-head .eyebrow{ justify-content:center; }.b304-testimonials-grid.b304-testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:2; }.b304-review.b304-review{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 26px 26px; text-align:center; box-shadow:0 16px 40px rgba(31,31,31,.08); }.b304-review-avatar.b304-review-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background:var(--lime); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-size:22px; font-weight:600; }.b304-review.b304-review h3{ font-size:24px; margin-bottom:6px; }.b304-stars.b304-stars{ color:#F3BE18; letter-spacing:2px; font-size:18px; margin-bottom:18px; }.b304-review.b304-review p{ font-size:17px; line-height:1.7; color:#4A4A4A; margin-bottom:0; }.b304-google-label.b304-google-label{ display:inline-flex; align-items:center; gap:8px; margin-top:34px; font-size:14px; color:var(--muted); }.b304-google-dot.b304-google-dot{ width:10px;height:10px;border-radius:50%;background:var(--red); } @media (max-width:1024px){ .b304-testimonials-grid.b304-testimonials-grid{grid-template-columns:1fr} }.b304-footer.b304-footer{ position:relative; color:#fff; padding:64px 0 34px; background: linear-gradient(rgba(15,16,17,.90),rgba(15,16,17,.94)), url("https://mafi.hostlix.pl/Bistro304/wp-content/uploads/2026/09/b304-footer.jpeg") center/cover no-repeat; }.b304-footer.b304-footer:before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(255,255,255,.03),transparent 58%); pointer-events:none; }.b304-footer.b304-footer .wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:28px; }.b304-footer-nav.b304-footer-nav{ display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-weight:400; font-size:16px; }.b304-footer-nav.b304-footer-nav a{ color:#fff; opacity:.92; transition:.2s ease; }.b304-footer-nav.b304-footer-nav a:hover{ color:var(--yellow); opacity:1; }.b304-footer-logo.b304-footer-logo{ width:150px; height:150px; object-fit:contain; border-radius:50%; box-shadow:0 14px 35px rgba(0,0,0,.25); }.b304-footer-socials.b304-footer-socials{ display:flex; align-items:center; justify-content:center; gap:18px; }.b304-social.b304-social{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; color:#fff; opacity:.9; }.b304-social.b304-social svg{ width:20px; height:20px; fill:currentColor; }.b304-footer-copy.b304-footer-copy{ font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-weight:400; font-size:14px; color:rgba(255,255,255,.72); line-height:1.6; }.b304-footer-copy.b304-footer-copy b{ color:#fff; font-weight:400; } @media (max-width:700px){ .b304-footer.b304-footer{padding:50px 0 96px}.b304-footer-nav.b304-footer-nav{gap:18px 22px;font-size:14px}.b304-footer-logo.b304-footer-logo{width:126px;height:126px}.b304-social.b304-social{width:44px;height:44px} }.b304-mobile-call.b304-mobile-call{ display:none;position:fixed;z-index:999;left:14px;right:14px;bottom:14px; background:var(--red);color:#fff;border-radius:999px;padding:14px 18px; box-shadow:0 14px 35px rgba(0,0,0,.25);font-family:"Josefin Sans",Arial,Helvetica,sans-serif;font-weight:400;text-align:center } @media (max-width:1024px){ .b304-nav-links.b304-nav-links{display:none}.b304-today-grid.b304-today-grid,.b304-story-grid.b304-story-grid,.b304-business-grid.b304-business-grid,.b304-contact-grid.b304-contact-grid{grid-template-columns:1fr}.b304-today-photo.b304-today-photo{min-height:460px}.b304-cat.b304-cat:nth-child(1),.b304-cat.b304-cat:nth-child(6){grid-column:span 1} } @media (max-width:700px){ .b304.b304 .wrap{width:min(100% - 30px,1280px)}.b304.b304 .section{padding:68px 0}.b304-nav.b304-nav{height:68px}.b304-logo.b304-logo{width:70px;height:52px}.b304.b304 .b304-ukryj-mobile.b304-ukryj-mobile{display:none}.b304-hero.b304-hero{min-height:640px;background-position:66% center}.b304-hero.b304-hero:before{ content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.68),rgba(0,0,0,.28)) }.b304-hero-content.b304-hero-content{padding:60px 0}.b304-hero.b304-hero h1{font-size:40px}.b304-hero.b304-hero p{font-size:17px}.b304-hero-actions.b304-hero-actions{display:grid}.b304.b304 .btn{width:100%}.b304-today-card.b304-today-card{padding:24px 20px}.b304-today-head.b304-today-head{display:block}.b304-date.b304-date{display:inline-flex;margin-bottom:14px}.b304-today-title.b304-today-title{font-size:33px}.b304-menu-columns.b304-menu-columns{grid-template-columns:1fr}.b304-today-pricebox.b304-today-pricebox{align-items:flex-start;flex-direction:column}.b304-story-photo.b304-story-photo,.b304-contact-photo.b304-contact-photo{min-height:410px}.b304-stats.b304-stats{grid-template-columns:1fr}.b304-cat.b304-cat{min-height:220px}.b304-mobile-call.b304-mobile-call{display:block}.b304-footer.b304-footer{padding-bottom:92px} }.b304.b304 .btn-primary,.b304.b304 .btn-primary:visited,.b304.b304 .btn-primary:hover,.b304.b304 .btn-primary:active,.b304.b304 .b304-chip,.b304.b304 .b304-chip:visited,.b304.b304 .b304-chip:hover,.b304.b304 .b304-chip:active,.b304.b304 .b304-mobile-call,.b304.b304 .b304-mobile-call:visited,.b304.b304 .b304-mobile-call:hover,.b304.b304 .b304-mobile-call:active{ color:#fff !important; }.b304.b304 .btn-light,.b304.b304 .btn-light:visited,.b304.b304 .btn-light:hover,.b304.b304 .btn-light:active{ color:#000 !important; }.b304.b304 .btn-light{ background:#fff; border-color:#fff; }.b304.b304 .btn-light:hover{ background:#FFF9EB; border-color:#FFF9EB; }.b304.b304 .btn-primary,.b304.b304 .b304-chip,.b304.b304 .b304-mobile-call{ background:var(--red); border-color:var(--red); }.b304.b304 .btn-primary:hover,.b304.b304 .b304-chip:hover{ background:var(--red-dark); border-color:var(--red-dark); } /* ––– poprawki wynikajace z przeniesienia do Elementora ––– 1) Naglowek hero/sekcji ma wybieralny znacznik -> regula oparta na klasie. 2) Kit Elementora nadaje h1..h4 kolor WPROST, a regula wprost zawsze bije dziedziczenie. Sekcje z jasnym tekstem musza wiec jawnie przywrocic dziedziczenie, inaczej naglowki w nich robia sie ciemne. */ .b304-hero.b304-hero .b304-hero-title{ font-size:clamp(40px,5vw,68px);line-height:1.02;margin:18px 0 22px;letter-spacing:-.02em; } .b304-hero.b304-hero h1,.b304-hero.b304-hero h2,.b304-hero.b304-hero h3, .b304-hero.b304-hero h4,.b304-hero.b304-hero .b304-hero-title, .b304-business.b304-business h1,.b304-business.b304-business h2, .b304-business.b304-business h3,.b304-business.b304-business h4, .b304-footer.b304-footer h1,.b304-footer.b304-footer h2, .b304-footer.b304-footer h3,.b304-footer.b304-footer h4, .b304-cat.b304-cat h3,.b304-today-pricebox.b304-today-pricebox h3{ color:inherit; } /* Kit ustawia globalna interlinie na body (1.7). Projekt jej NIE ma – zadaje ja jawnie tam, gdzie jest potrzebna, a w pozostalych miejscach zostawia `normal`. Przywracamy to wewnatrz .b304; globalna interlinia kitu nadal rzadzi trescia natywna poza widgetami, a kazdy widget ma wlasna kontrolke typografii. */ .b304.b304{line-height:normal} /* Pasek telefonu: w projekcie `display:none` + `display:block` w @media(max-width:700px). Tutaj prog jest wybierany w panelu, wiec widocznoscia steruja klasy. */ .b304-mobile-call.b304-mobile-call{display:none} @media(max-width:700px){.b304-mobile-call.b304-pokaz-mobile{display:block}} @media(max-width:1024px){.b304-mobile-call.b304-pokaz-tablet{display:block}} .b304-mobile-call.b304-pokaz-zawsze{display:block} /* ––– MENU MOBILNE (dodane; projekt go nie ma) ––––––––––––––––––––––– Projekt chowa linki ponizej 1024px i nie daje nic w zamian. Tryb wybiera sie w panelu: hamburger / linki w linii / ukryte (jak w projekcie). Specyficznosc podwojona, zeby wygrac z regula `display:none` z projektu. */ .b304.b304 .b304-burger{ display:none; width:44px; height:44px; padding:0; background:transparent; border:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .b304.b304 .b304-burger span{ display:block; width:22px; height:2px; background:#242424; border-radius:2px; transition:transform .22s ease, opacity .18s ease; } .b304.b304 .b304-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .b304.b304 .b304-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .b304.b304 .b304-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1024px){ /* przycisk widoczny tylko w trybie hamburger */ .b304.b304 .b304-mob-hamburger .b304-burger{display:flex} /* panel: wysuwa sie pod paskiem, nie rozpycha go */ .b304.b304 .b304-mob-hamburger .b304-nav-links{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; row-gap:16px; padding:18px 20px 22px; background:#FFF9ED; border-bottom:1px solid var(--line); box-shadow:0 18px 40px rgba(31,31,31,.12); max-height:calc(100vh - 100%); overflow-y:auto; } .b304.b304 .b304-mob-hamburger .b304-nav-links[data-open="true"]{display:flex} .b304.b304 .b304-mob-hamburger .b304-nav-links a{font-size:17px} /* wariant: linki po prostu w linii */ .b304.b304 .b304-mob-linia .b304-nav-links{display:flex;flex-wrap:wrap;row-gap:8px} } /* klawiatura: widoczny focus (przycisk jest jedynym wejsciem do menu) */ .b304.b304 .b304-burger:focus-visible, .b304.b304 .b304-nav-links a:focus-visible{outline:2px solid var(--red); outline-offset:3px} /* `overflow:hidden` bylo na .b304 w oryginale, gdzie wrapper obejmowal CALA strone (zabezpieczenie przed poziomym przewijaniem). Tutaj kazdy widget ma wlasny .b304, wiec ta sama regula obcinala elementy wychodzace poza sekcje – m.in. rozwijane menu mobilne. Elementy, ktore faktycznie wymagaja przyciecia (zdjecia z radiusem, kafle kategorii, akordeony), maja wlasne `overflow:hidden`. */ /* Grupa akcji mobilnych: [telefon][menu] – wyrownana do prawej krawedzi paska. */ .b304.b304 .b304-nav-mobtools{display:none; align-items:center; gap:8px; margin-left:auto} .b304.b304 .b304-nav-tel{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--red); transition:background .2s ease, border-color .2s ease; } .b304.b304 .b304-nav-tel svg{width:20px; height:20px; fill:currentColor} .b304.b304 .b304-nav-tel:hover{background:var(--cream); border-color:var(--red)} .b304.b304 .b304-nav-tel:focus-visible{outline:2px solid var(--red); outline-offset:3px} @media(max-width:1024px){ .b304.b304 .b304-nav-mobtools{display:flex} } /* ––– MOSTEK: natywne widgety Elementora ––––––––––––––––––––––––––––––– Sekcje budujemy z kontenerow i natywnych widgetow (Naglowek, Edytor tekstu, Przycisk, Lista ikon), a nie z jednego wielkiego widgetu na sekcje. DOM Elementora != DOM projektu, wiec tu siedzi minimalny mostek CSS. Wszystko, co da sie ustawic natywna kontrolka (kolor, typografia, odstepy, tlo, zaokraglenie), jest ustawiane kontrolka – NIE tutaj. */ /* Nadtytul: limonkowa kreska przed tekstem (w projekcie `.eyebrow:before`) */ .b304-eyebrow .elementor-heading-title{display:inline-flex; align-items:center; gap:8px} .b304-eyebrow .elementor-heading-title:before{ content:""; width:26px; height:3px; background:var(--lime,#B9D63A); border-radius:20px; flex:none; } /* Naglowek hero: plynne skalowanie z projektu. Kontrolka rozmiaru zostaje pusta, wiec ta regula obowiazuje, dopoki klient sam nie wpisze wartosci. */ .b304-hero-h1 .elementor-heading-title{ font-size:clamp(40px,5vw,68px); line-height:1.02; letter-spacing:-.02em; } /* Stopka – dwa mostki do natywnych widgetow: 1) widget Obraz nie ma kontrolki `object-fit`, a projekt wpisuje logo w kolo (kwadrat 150x150 + promien 50%) bez rozciagania proporcji; 2) Lista ikon w trybie poziomym rozstawia pozycje tylko w poziomie – przy zawijaniu do drugiej linii brakuje odstepu pionowego. */ .elementor-element-fLogo001 img{object-fit:contain} .b304-stopka-menu .elementor-icon-list-items.elementor-inline-items{row-gap:34px} @media(max-width:700px){ .b304-stopka-menu .elementor-icon-list-items.elementor-inline-items{row-gap:18px} } /* Sekcja „Dzisiaj" – dekoracyjne żółte koło w tle (`.b304-today:before` w projekcie). To czysta dekoracja, więc zostaje w CSS; kontener pod spodem ma `overflow:hidden`, żeby koło nie wypychało strony w bok. */ #dzisiaj{position:relative; overflow:hidden} #dzisiaj::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:var(--yellow); opacity:.14; right:-80px; top:30px; pointer-events:none; } /* Plakietka na zdjęciu – Elementor daje kontenerowi `position:absolute`, ale nie daje kontrolek offsetu, więc odsunięcie od krawędzi jest tutaj. */ /* Elementor przy `position:absolute` bez offsetów wpisuje `top:0;left:0` selektorem o trzech klasach, a jego CSS ładuje się PO naszym – remis klas przegrywamy. Dlatego hakiem jest `_element_id`, nie klasa: `_css_classes` w ogóle NIE działa na kontenerach (tylko na widgetach), a selektor id wygrywa bez `!important`. */ #b304-plakietka{left:22px; bottom:22px; top:auto; right:auto} /* Pigułka z datą obejmuje treść, zamiast dzielić rząd po połowie. */ #b304-pigulka{flex:0 0 auto; width:auto} /* Pigułka z datą – projekt nie pozwala jej się łamać (`white-space:nowrap`). */ .b304-data .elementor-heading-title{white-space:nowrap} /* Pigułka z datą ma obejmować treść, a nie dzielić rząd po połowie. Kontrolka „Flex → Rozmiar” na kontenerze-dziecku tego nie wymusza. */ .b304-pigulka{flex:0 0 auto; width:auto} /* Zdanie pod tytułem karty: projekt nie zadaje interlinii (`normal`), a kit Elementora narzuca globalne 1.7, przez co blok rósł o 11px. */ .b304-lead{line-height:normal} /* ——— MENU DNIA: zakładki dni ——————————————————————————————————— Projekt nie ma przełącznika dni – to dodatek. Styl trzyma się palety: nieaktywna zakładka kremowa, aktywna czerwona jak przyciski CTA. */ .b304-dni-pasek{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .b304-dni{display:flex; gap:8px; flex-wrap:wrap} .b304-dzien{ appearance:none; border:1px solid var(--line,#EAE3DA); background:var(--cream,#FFF9F2); color:var(--ink,#242424); border-radius:999px; padding:8px 16px; cursor:pointer; font:inherit; font-size:14px; font-weight:700; line-height:1; /* wyśrodkowanie etykiety w obu osiach – bez tego przy różnej długości napisów („Dziś" vs „Pojutrze") tekst siada nierówno */ display:inline-flex; align-items:center; justify-content:center; text-align:center; transition:background .2s ease, color .2s ease, border-color .2s ease; } /* KOREKTA OPTYCZNA. Josefin Sans ma asymetryczne pole fontu: przy 14px jest 11px nad linią bazową i 4px pod nią, więc środek tuszu wypada 1,59px WYŻEJ niż środek line-boxa. Samo `align-items:center` centruje line-box, nie tusz – dlatego tekst wygląda na podniesiony mimo równego paddingu 8/8. 1,59 / 14 = 0,113em; wartość w `em` skaluje się z rozmiarem fontu, a że siedzi na etykiecie, a nie na paddingu, nie kłóci się z kontrolką odstępów w panelu. */ .b304-dzien-etykieta{display:block; transform:translateY(0.113em)} /* Stan hover MUSI podawać komplet: tło, kolor tekstu i obwódkę. Wcześniej zmieniała się tylko obwódka, więc kolor tekstu zależał od tego, co akurat wygrało w kaskadzie – wychodził biały napis na jasnym tle. */ .b304-dzien.b304-dzien:hover{ background:var(--paper,#FFFFFF); border-color:var(--red,#E52A1B); color:var(--red,#E52A1B); } .b304-dzien[aria-selected="true"]{ background:var(--red,#E52A1B); border-color:var(--red,#E52A1B); color:#fff; } .b304-dzien:focus-visible{outline:2px solid var(--red,#E52A1B); outline-offset:3px} .b304-menu-dnia .b304-date{ background:var(--yellow,#F2D43C); border-radius:999px; font-size:13px; font-weight:900; white-space:nowrap; /* ta sama korekta optyczna co przy zakładkach – tu przez asymetryczny padding, bo pigułka daty nie ma kontrolki odstępów, z którą można by się pobić */ padding:calc(8px + 0.113em) 12px calc(8px - 0.113em); } .b304-menu-dnia [hidden]{display:none} .b304-menu-pusto{color:var(--muted,#6E6E6E)} @media(max-width:700px){ .b304-dni-pasek{align-items:flex-start} } /* Pasek z cenami: w oryginalnym HTML etykieta „ZESTAW Z DOSTAWĄ" miała styl INLINE (display:block), więc nie ma jej w CSS projektu. Widget renderuje czysty markup, więc reguła musi być tutaj. */ .b304-today-pricebox.b304-today-pricebox small{ display:block; font-size:12px; color:rgba(255,255,255,.65); margin-bottom:5px; } .b304-today-pricebox.b304-today-pricebox > div{flex:0 1 auto} .b304-today-pricebox.b304-today-pricebox b{white-space:nowrap} /* Aktywna zakładka: kontrolki widgetu mają wyższą specyficzność niż reguła bazowa, więc stan aktywny podbijamy podwójną klasą. */ .b304-dzien.b304-dzien[aria-selected="true"]{ background:var(--red,#E52A1B); border-color:var(--red,#E52A1B); color:#fff; } .b304-dzien.b304-dzien[aria-selected="true"]:hover{ background:var(--red-dark,#BF1D12); border-color:var(--red-dark,#BF1D12); color:#fff; } /* Tytuł sekcji na natywnym Nagłówku – projekt używa klasy `.section-title` z płynnym skalowaniem. Kontrolka rozmiaru zostaje pusta, więc clamp obowiązuje, dopóki klient sam nie wpisze wartości. */ .b304-section-title .elementor-heading-title{ font-size:clamp(34px,4vw,54px); line-height:1.02; } /* Plakietka na zdjęciu „O nas" – jak przy menu dnia, Elementor nie daje kontenerowi kontrolek offsetu, więc odsunięcie od krawędzi jest tutaj. */ #b304-plakietka-onas{ right:22px; bottom:22px; left:auto; top:auto; /* Elementor daje dzieciom kontenera 100% szerokości poniżej breakpointu, przez co plakietka rozciągała się na całe zdjęcie. Szerokość trzymamy tutaj, a `max-width` pilnuje, żeby na wąskim ekranie nie wyszła poza kadr. */ width:190px; max-width:calc(100% - 44px); } /* Kafel podwójnej szerokości: w projekcie wskazywał go `:nth-child(1), :nth-child(6)`, czyli POZYCJA – zmiana kolejności kategorii psułaby układ. U nas decyduje przełącznik przy pozycji, więc klient może dowolnie przestawiać kafle. */ @media(max-width:1024px){ } /* ——— SIATKA KATEGORII: wiersze zamiast sztywnych kolumn ————————————— Projekt używał `grid-template-columns:repeat(4,1fr)` ze stałymi kolumnami, przez co ostatni wiersz zostawał niepełny – przy ośmiu kaflach wisiały na dole dwa osamotnione. Tutaj kafle są rozdzielone na zadaną liczbę WIERSZY, a każdy wiersz wypełnia całą szerokość, więc pusta reszta nie powstaje z definicji. `--waga:2` to dawny kafel podwójnej szerokości. */ .b304-cat-grid.b304-cat-grid{ display:flex; flex-direction:column; gap:18px; } .b304-cat-wiersz{display:flex; gap:inherit} .b304-cat-wiersz > .b304-cat{flex:var(--waga,1) 1 0; min-width:0} /* Poniżej 1024px liczba wierszy przestaje mieć znaczenie: `display:contents` wypłaszcza wiersze, a kafle zawijają się po dwa, potem po jednym. */ @media(max-width:1024px){ .b304-cat-grid.b304-cat-grid{flex-direction:row; flex-wrap:wrap} .b304-cat-wiersz{display:contents} .b304-cat-grid.b304-cat-grid > .b304-cat-wiersz > .b304-cat{ flex:1 1 calc(50% - 9px); } } @media(max-width:700px){ .b304-cat-grid.b304-cat-grid > .b304-cat-wiersz > .b304-cat{flex-basis:100%} } /* ——— PEŁNA KARTA: układ drukowanej karty dań —————————————————————— Poprzednia wersja to był stos dziewięciu akordeonów – wyglądał jak FAQ i chował przed gościem dokładnie to, po co przyszedł. Teraz wszystkie kategorie są otwarte, pozycje płyną kolumnami, a cenę łączą z nazwą kropki, jak na karcie w lokalu. Nawigację przejmuje przyklejony pasek kategorii, więc długość strony przestaje przeszkadzać. Klasy podwojone, bo kit Elementora bije zwykłą pojedynczą klasę. */ .b304-kat.b304-kat{display:block;padding-bottom:54px} .b304-kat.b304-kat:last-child{padding-bottom:0} /* Pas ze zdjęciem zamiast pustej linii nad kategorią. Zdjęcia są te same, co na kaflach w sekcji „Na co masz dziś ochotę" – karta zaczyna wreszcie wyglądać apetycznie, a nie jak cennik, i nie trzeba nowych materiałów. */ .b304-kat__pas.b304-kat__pas{ position:relative;display:flex;align-items:flex-end; min-height:104px;padding:18px 24px;margin-bottom:22px; border-radius:16px;overflow:hidden } .b304-kat__pas.b304-kat__pas img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover } .b304-kat__pas.b304-kat__pas:after{ content:"";position:absolute;inset:0; /* Ciemno tylko tam, gdzie leży nazwa. Równomierny gradient od .85 zabijał lewą połowę zdjęcia – z jedzenia zostawała czarna plama. */ background-image:linear-gradient(90deg,rgba(25,25,25,.88) 0%,rgba(25,25,25,.5) 34%,rgba(25,25,25,.1) 100%) } .b304-kat__pas.b304-kat__pas .b304-kat__tytul{position:relative;z-index:2;color:#fff} .b304-kat__head.b304-kat__head{display:flex;align-items:center;gap:18px;margin-bottom:22px} .b304-kat__tytul.b304-kat__tytul{ flex:0 1 auto;margin:0; font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-size:clamp(23px,2.1vw,29px);font-weight:700;line-height:1.15; text-transform:uppercase;letter-spacing:.05em;color:var(--ink) } .b304-kat__linia.b304-kat__linia{flex:1 1 0;min-width:20px;height:2px;border-radius:2px;background:#E0D6C4} /* Przepływ kolumnowy, a NIE siatka. Siatka wyrównywała wiersze do najwyższej pozycji, więc obok dania z opisem powstawała pusta dziura – karta wyglądała na poszarpaną. `columns` leje pozycje jedna za drugą i wyrównuje wysokość kolumn samo. */ .b304-kat__lista.b304-kat__lista{ columns:2;column-gap:56px;column-rule:1px solid transparent } .b304-menu-row.b304-menu-row{ display:block;padding:0;border:0;margin:0 0 18px; break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid } .b304-menu-row.b304-menu-row:last-child{margin-bottom:0} /* Wyrównanie do DOLNEJ krawędzi, nie do linii bazowej: przy dwuwierszowej nazwie baseline flexa to pierwszy wiersz, więc kropki wisiałyby u góry. */ .b304-menu-row__linia.b304-menu-row__linia{display:flex;align-items:flex-end;gap:8px} .b304-menu-row.b304-menu-row b{ flex:0 1 auto;font-size:16px;font-weight:700;line-height:1.35;color:var(--ink) } .b304-leader.b304-leader{ flex:1 1 auto;min-width:12px;height:0;margin-bottom:6px; border-bottom:1px dotted #CFC3AE } .b304-kat.b304-kat[data-kropki="0"] .b304-leader{border-bottom-color:transparent} .b304-menu-price.b304-menu-price{ flex:0 0 auto;font-weight:900;line-height:1.35;color:var(--red);white-space:nowrap } .b304-menu-row.b304-menu-row p{ margin:4px 0 0;max-width:54ch; font-size:13px;line-height:1.5;color:var(--muted) } .b304-polecane.b304-polecane{ display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 8px; border-radius:999px;background:#F2D43C;color:#242424; font-size:11px;font-weight:800;line-height:1.5;text-transform:uppercase;letter-spacing:.06em } .b304-menu-note.b304-menu-note{ padding:13px 16px;border-radius:12px;background:#FFF4D2; font-size:13px;line-height:1.55;margin:22px 0 0 } .b304-menu-note.b304-menu-note--gora{margin:0 0 20px} /* ——— PASEK KATEGORII ———————————————————————————————————————————— Przyklejenie siedzi na {{WRAPPER}} widgetu (kontrolka „Przyklej pasek"), bo `position:sticky` działa względem RODZICA – a rodzicem wnętrza widgetu jest tylko sam pasek, więc nie miałby gdzie się przesuwać. */ /* Kreska i cień należą do CAŁEGO widgetu – to on jest przyklejony i to on musi zasłaniać treść przesuwającą się pod spodem. Kolory podmieniają kontrolki („Tło paska", „Kreska pod paskiem"). */ /* Kreska i cień mają sens tylko wtedy, gdy pasek jest PRZYKLEJONY U GÓRY i przesuwa się pod nim treść. Szyna z boku niczego nie zasłania, więc dostaje je dopiero media query poniżej 1024px. */ .elementor-widget-b304-menu-linki{border-bottom:0 solid transparent} .b304-quicklinks.b304-quicklinks{ display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:14px 0 } /* Szyna: pigułki jedna pod drugą, pełna szerokość kolumny, tekst do lewej. */ .b304-quicklinks.b304-quicklinks[data-uklad="pionowy"]{ flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:0 } .b304-quicklinks.b304-quicklinks[data-uklad="pionowy"] .b304-chip{ text-align:left;white-space:normal;font-size:14px;padding:11px 16px;line-height:1.25 } .b304-quicklinks.b304-quicklinks::-webkit-scrollbar{display:none} .b304-chip.b304-chip{ flex:0 0 auto; padding:11px 17px;border-radius:999px; background:#fff;border:1px solid #E0D6C4;color:var(--ink); font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-size:13px;font-weight:600;line-height:1;white-space:nowrap; cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease } .b304-chip.b304-chip:hover{background:#FFF4D2;border-color:var(--red);color:var(--ink);transform:none} .b304-chip.b304-chip[data-aktywny="1"]{background:var(--red);border-color:var(--red);color:#fff} @media (max-width:1024px){ .b304-kat__lista.b304-kat__lista{column-gap:40px} /* Poniżej 1024px szyna wraca na górę jako pasek i jedzie JEDNYM rzędem w bok. Zawinięty na dwa albo trzy rzędy urósł do 113px i – przyklejony – zjadał ósmą część ekranu. Wybór „pionowo" z panelu tu nie obowiązuje: na wąskim ekranie kolumna z boku nie ma gdzie stanąć. */ .b304-quicklinks.b304-quicklinks, .b304-quicklinks.b304-quicklinks[data-uklad="pionowy"]{ flex-direction:row;flex-wrap:nowrap;align-items:center; overflow-x:auto;scrollbar-width:none;gap:10px;padding:14px 0 } .b304-quicklinks.b304-quicklinks[data-uklad="pionowy"] .b304-chip{ text-align:center;white-space:nowrap;font-size:13px;padding:11px 17px;line-height:1 } .elementor-widget-b304-menu-linki{ border-bottom-width:1px;border-bottom-style:solid; box-shadow:0 10px 18px -14px rgba(36,36,36,.35) } /* `position:sticky` przesuwa się tylko w granicach SWOJEGO RODZICA. Gdy układ przechodzi w kolumnę, kontener szyny jest wysoki dokładnie na pasek – i pasek odjeżdżał z ekranem zamiast się przykleić. `display:contents` wypłaszcza ten kontener, więc widget staje się dzieckiem wysokiego układu i ma się po czym przesuwać. */ #b304-szyna{display:contents} } @media (max-width:700px){ .b304-kat.b304-kat{padding-bottom:40px} .b304-kat__pas.b304-kat__pas{min-height:78px;padding:14px 18px;margin-bottom:18px} .b304-kat__lista.b304-kat__lista{columns:1} .b304-kat__head.b304-kat__head{gap:12px;margin-bottom:18px} .b304-quicklinks.b304-quicklinks{padding:10px 0} } /* ——— Poziome przewijanie strony na telefonie ———————————————————————— Natywna Lista ikon w układzie „inline" dostaje od Elementora UJEMNY margines boczny równy połowie odstępu między pozycjami (przy 34px to -17px). Nikt go po drodze nie przycina, więc dokument robi się szerszy od okna i cała strona daje się przesunąć w bok – na telefonie o 8px. Zerujemy sam margines listy; odstęp niosą już pozycje, więc wygląd zostaje bez zmian, a lista jest tylko symetrycznie węższa. Uwaga: Elementor zapisuje to LOGICZNĄ własnością `margin-inline`, więc samo `margin-left/right` przegrywa niezależnie od specyficzności. */ .elementor-element.elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items{ margin-inline:0 } /* Osobno i mocniej dla stopki: tam Elementor zapisuje własny margines per-element (-17px z odstępu 34px) w pliku `post-.css`, który ładuje się PO naszym – przy równej specyficzności wygrywał kolejnością. Stąd dołożona szósta klasa układu, żeby przewaga nie zależała od kolejności. Odstęp między pozycjami zostaje nietknięty: niosą go same pozycje. */ .elementor-location-footer .elementor-element.elementor-widget-icon-list.elementor-icon-list--layout-inline .elementor-icon-list-items.elementor-inline-items{ margin-inline:0 } /* ——— TELEFON: pasek kategorii jako FILTR ———————————————————————————— Pełna karta to 68 pozycji. Na desktopie w dwóch kolumnach to jeszcze czyta się jak karta; w jednej kolumnie na telefonie robi się kilkanaście ekranów przewijania, a przyklejony pasek tylko przypomina, jak daleko jeszcze do końca. Dlatego poniżej 700px pigułka nie skacze, tylko ZOSTAWIA na ekranie jedną kategorię – reszta znika (zostaje w DOM, więc wyszukiwarka i Ctrl+F nadal ją widzą po rozwinięciu „Pokaż wszystko"). Ukrywaniem steruje design.js; bez JS-u widać całość, czyli stan bezpieczny. */ .b304-kat.b304-kat[hidden]{display:none} .b304-filtr-info.b304-filtr-info{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin:0;padding:0 0 12px;font-size:12px;line-height:1.4;color:var(--muted) } .b304-filtr-info.b304-filtr-info[hidden]{display:none} .b304-filtr-info.b304-filtr-info b{color:var(--ink);font-weight:700} .b304-filtr-info.b304-filtr-info button{ flex:0 0 auto;padding:7px 13px;border-radius:999px; background:#fff;border:1px solid #E0D6C4;color:var(--ink); font-family:"Josefin Sans",Arial,Helvetica,sans-serif;font-size:12px;font-weight:600;cursor:pointer } .b304-filtr-info.b304-filtr-info button:hover{background:#FFF4D2;border-color:var(--red)} /* ——— Plakietki na zdjęciach: telefon ———————————————————————————————— Plakietka jest pozycjonowana absolutnie i ma stałą szerokość 330px. Przy 390px okna razem z offsetem rodzica wystawała 7px poza ekran, co dawało poziome przewijanie CAŁEJ strony. Na telefonie niech się rozciąga między krawędziami zamiast trzymać stałą szerokość. Selektor na ID, bo kontrolka szerokości Elementora ma wyższą specyficzność niż zwykła klasa. */ @media (max-width:700px){ #b304-plakietka, #b304-plakietka-onas{left:15px;right:15px;width:auto} } /* ——— DANE KONTAKTOWE ———————————————————————————————————————————————— Wartość jest blokiem, nie tekstem w linii: jedna pozycja potrafi mieć dwa numery telefonu, a projekt rozdzielał je `
`. Blokowe `` robi to samo bez sztucznego łamania wiersza i bez zbędnego odstępu na końcu. */ .b304-contact-item.b304-contact-item{padding:16px 0;border-bottom:1px solid #EAE3DA} .b304-contact-item.b304-contact-item:last-child{border-bottom:0} .b304-contact-item.b304-contact-item small{ display:block;margin-bottom:5px; font-size:12px;line-height:1.4;color:var(--muted); text-transform:uppercase;letter-spacing:.10em } .b304-contact-item.b304-contact-item b{display:block;font-size:18px;line-height:1.5} .b304-contact-item.b304-contact-item a{color:inherit;text-decoration:none;transition:color .2s ease} .b304-contact-item.b304-contact-item a:hover{color:var(--red)} .b304-contact-dopisek.b304-contact-dopisek{ display:block;margin-top:2px;font-size:15px;line-height:1.5;color:var(--muted) } /* ——— OPINIE: karuzela ———————————————————————————————————————————————— Przewijanie robi natywny `scroll-snap`, nie biblioteka. Bez JS-u zostaje pasek przewijany palcem – czyli stan używalny, a nie zepsuty. JS dokłada tylko strzałki, kropki i automatyczne przesuwanie. `--widoczne` i `--odstep` ustawiają kontrolki widgetu, osobno dla każdej szerokości ekranu. */ .b304-opinie.b304-opinie{ --widoczne:3; --odstep:24px; position:relative } .b304-opinie-tor.b304-opinie-tor{ display:flex; gap:var(--odstep); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; /* Kontener z `overflow-x:auto` PRZYCINA cień kart – i to twardą krawędzią, która wygląda jak pasek pod karuzelą. Nie da się tego obejść przez `overflow-y:visible`: CSS wymusza wtedy `auto` na obu osiach. Dlatego tor dostaje zapas równy zasięgowi cienia (offset 16px + rozmycie 40px), a ujemny margines oddaje ten zapas z powrotem układowi. Marginesy boczne są dokładnie tak duże jak wewnętrzny odstęp sekcji, więc cień wchodzi w margines strony, ale nic nie wystaje poza ekran. */ padding:24px 20px 56px; margin:-24px -20px -46px; /* Bez tego `scroll-snap` przyciąga kartę do krawędzi SCROLLPORTU, a nie do krawędzi treści – przewija tor o szerokość lewego zapasu i pierwsza karta ląduje na samym brzegu ekranu. `scroll-padding` przesuwa punkt zaczepienia tam, gdzie zaczyna się treść, więc musi równać się poziomemu zapasowi. */ scroll-padding-left:20px; scroll-padding-right:20px } .b304-opinie-tor.b304-opinie-tor::-webkit-scrollbar{display:none} .b304-opinie-tor.b304-opinie-tor > .b304-review{ flex:0 0 calc((100% - (var(--widoczne) - 1) * var(--odstep)) / var(--widoczne)); scroll-snap-align:start } .b304-review.b304-review{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 26px 26px; text-align:center; box-shadow:0 16px 40px rgba(31,31,31,.08); display:flex; flex-direction:column; align-items:center } .b304-review-avatar.b304-review-avatar{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; flex:0 0 auto; margin:0 0 14px; border-radius:50%; background:var(--lime); color:var(--ink); font-family:"Josefin Sans",Arial,Helvetica,sans-serif; font-size:22px; font-weight:600; line-height:1 } .b304-review.b304-review h3{font-size:24px; margin:0 0 6px} .b304-stars.b304-stars{color:#F3BE18; letter-spacing:2px; font-size:18px; line-height:1; margin:0 0 18px} .b304-stars.b304-stars i{font-style:normal; color:#DCD4C6} .b304-review.b304-review p{font-size:17px; line-height:1.7; color:#4A4A4A; margin:0} /* Sterowanie: na telefonie rząd pod karuzelą, wyżej strzałki wyskakują na krawędzie toru. JS odsłania je dopiero, gdy jest co przewijać, więc przy trzech opiniach na szerokim ekranie nie ma ich wcale. */ .b304-opinie-sterowanie.b304-opinie-sterowanie{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px } .b304-opinie-sterowanie.b304-opinie-sterowanie[hidden]{display:none} .b304-opinie-strzalka.b304-opinie-strzalka{ z-index:3; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0 0 3px; border-radius:50%; border:1px solid #EAE3DA; background:#fff; color:var(--ink); font-size:26px; line-height:1; cursor:pointer; box-shadow:0 8px 20px rgba(31,31,31,.12); transition:background .2s ease,color .2s ease,border-color .2s ease } .b304-opinie-strzalka.b304-opinie-strzalka:hover{background:var(--red); border-color:var(--red); color:#fff} .b304-opinie-strzalka.b304-opinie-strzalka[hidden]{display:none} @media (min-width:701px){ .b304-opinie-strzalka.b304-opinie-strzalka{position:absolute; top:50%; transform:translateY(-50%)} .b304-opinie-strzalka--wstecz{left:-14px} .b304-opinie-strzalka--dalej{right:-14px} /* strzałki wyszły z rzędu – zostaje w nim tylko pasek kropek */ .b304-opinie-sterowanie.b304-opinie-sterowanie{margin-top:22px} } .b304-opinie-kropki.b304-opinie-kropki{display:flex; justify-content:center; gap:8px} .b304-opinie-kropki.b304-opinie-kropki[hidden]{display:none} .b304-opinie-kropka.b304-opinie-kropka{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#DCD4C6; cursor:pointer; transition:background .2s ease,transform .2s ease } .b304-opinie-kropka.b304-opinie-kropka[aria-selected="true"]{background:var(--red); transform:scale(1.25)} /* Delikatne limonkowe poświaty z projektu. Dekoracja sekcji, więc trzyma się jej identyfikatora – kontenery Elementora nie przyjmują `_css_classes`. */ #opinie{position:relative; overflow:hidden} #opinie:before, #opinie:after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at center, rgba(185,214,58,.18), rgba(185,214,58,0) 70%); pointer-events:none; z-index:0 } #opinie:before{left:-70px; top:30px} #opinie:after{right:-70px; bottom:20px} #opinie > .e-con-inner, #opinie > .elementor-element{position:relative; z-index:2} @media (max-width:700px){ /* odstęp sekcji na telefonie to 15px – tyle wolno oddać cieniowi na boki */ .b304-opinie-tor.b304-opinie-tor{ padding:20px 15px 48px; margin:-20px -15px -40px; scroll-padding-left:15px; scroll-padding-right:15px } .b304-opinie-strzalka.b304-opinie-strzalka{width:40px; height:40px; font-size:24px} .b304-review.b304-review{padding:24px 20px 22px} .b304-review.b304-review h3{font-size:21px} .b304-review.b304-review p{font-size:16px} } /* ——— Pasek „zadzwoń": wjazd po przewinięciu ———————————————————————— Chowamy przezroczystością i przesunięciem, a nie `display`, żeby dało się to animować i żeby element nie znikał z układu w trakcie. `pointer-events` muszą zniknąć razem z nim – niewidoczny pasek nadal łapałby kliknięcia w dolnej części ekranu. */ .b304-mobile-call.b304-mobile-call{ transition:opacity .25s ease, transform .25s ease } .b304-mobile-call.b304-mobile-call[data-stan="ukryty"]{ opacity:0; transform:translateY(130%); pointer-events:none } @media (prefers-reduced-motion: reduce){ .b304-mobile-call.b304-mobile-call{transition:opacity .01s linear} .b304-mobile-call.b304-mobile-call[data-stan="ukryty"]{transform:none} } /* ——— Nagłówek: ikony akcji na mobile ——————————————————————————————— Kształt (kółko, obwódka, hover) jest wspólny dla wszystkich ikon w pasku, żeby nowa ikona nie wymagała kopiowania reguł. Kolory zostają osobne – klient może chcieć wyróżnić telefon mocniej niż skrót do karty dań. */ .b304.b304 .b304-nav-ikona{ width:44px; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line); color:var(--red); transition:background .2s ease, border-color .2s ease } .b304.b304 .b304-nav-ikona:hover{background:var(--cream); border-color:var(--red)} .b304.b304 .b304-nav-ikona:focus-visible{outline:2px solid var(--red); outline-offset:3px} .b304.b304 .b304-nav-ikona svg{width:20px; height:20px} /* Telefon jest ikoną wypełnioną, karta dań – konturową. Rysowane inaczej, więc i malowane inaczej; obie i tak biorą kolor z `color`. */ .b304.b304 .b304-nav-tel svg{fill:currentColor} .b304.b304 .b304-nav-karta svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round } /* ——— MENU DNIA: grupy w prawej kolumnie —————————————————————————————— Klientka poprosiła o rozdzielenie dodatków, deseru i dań polecanych (mail 21.09.2026). Lewa kolumna zostaje jedną długą listą dnia, prawa zbiera krótkie grupy jedna pod drugą – karta zostaje dwukolumnowa, czyli taka, jaką zaakceptowała. */ .b304-menu-kolumna.b304-menu-kolumna{ display:flex; flex-direction:column; gap:22px; min-width:0 } .b304-menu-kolumna.b304-menu-kolumna > .b304-menu-block{margin:0} /* Dodatki to jedno zdanie po przecinku, nie lista – tak, jak dotąd na bistro304.pl. Dlatego akapit, a nie