/* Theme Name: Masna Child Theme URI: https://masna.pl Description: Motyw potomny Astry z redesignem sklepu MASNA.pl — Alimentari Italiani. Zawiera pelny system projektowy (kolory, typografia, komponenty), wlasny naglowek ze sklepowym mega-menu, stopke oraz szablon strony glownej. Author: Masna Template: astra Version: 1.0.1 Text Domain: masna-child */ /* ========================================================= 1. TOKENY PROJEKTOWE ========================================================= */ :root { --masna-green: #1F3D2B; --masna-green-dark: #162C1F; --masna-terra: #B0432A; --masna-terra-dark: #90341E; --masna-cream: #F7F2E9; --masna-surface: #FFFDF8; --masna-sand: #F1EADC; --masna-sand-dark: #E9E1D2; --masna-ink: #1B1A17; --masna-body: #4A473F; --masna-muted: #8A8375; --masna-faint: #A9A294; --masna-line: rgba(31, 61, 43, 0.14); --masna-line-strong: rgba(31, 61, 43, 0.3); --masna-radius: 14px; --masna-radius-sm: 10px; --masna-pill: 100px; --masna-max: 1360px; --masna-gutter: 32px; /* Wysokosc dolnego paska na telefonie — odstep pod trescia i punkt zaczepienia wysuwanego panelu licza sie z tej jednej wartosci. */ --masna-tabbar-h: 62px; /* Krój nagłówkowy: DM Serif Display ma grube kreski i czyta się dużo lepiej niż didone o cienkich włoskowatach. */ --masna-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --masna-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --masna-shadow: 0 24px 40px -28px rgba(31, 61, 43, 0.5); } /* ========================================================= 2. PODSTAWY ========================================================= */ body, body.ast-separate-container, body.ast-plain-container { background-color: var(--masna-cream); font-family: var(--masna-sans); color: var(--masna-ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Astra maluje na bialo we wlasnym arkuszu i przy tej samej specyficznosci (0,0,1) potrafi wygrac kolejnoscia — strona wychodzila biala zamiast kremowa, przez co packshoty na bieli zlewaly sie z tlem, a cala paleta traci cieplo. Klasa skory podnosi specyficznosc do (0,1,1), wiec kremowe tlo wygrywa bez !important. */ body.masna-skin, body.masna-skin.ast-separate-container, body.masna-skin.ast-plain-container { background-color: var(--masna-cream); } #page, .site-content, .ast-container { background-color: transparent; } h1, h2, h3, h4, h5, h6, .entry-title, .woocommerce-loop-product__title, .product_title { font-family: var(--masna-serif); font-weight: 400; color: var(--masna-green); letter-spacing: 0; text-wrap: balance; } h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.06; } h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.14; } h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.24; } p { color: var(--masna-body); text-wrap: pretty; } a { color: var(--masna-green); text-decoration: none; transition: color .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease; } a:hover, a:focus { color: var(--masna-terra); } ::selection { background: var(--masna-terra); color: var(--masna-cream); } :focus-visible { outline: 2px solid var(--masna-terra); outline-offset: 3px; border-radius: 4px; } .masna-wrap { max-width: var(--masna-max); margin: 0 auto; padding-left: var(--masna-gutter); padding-right: var(--masna-gutter); } .masna-eyebrow { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--masna-terra); margin-bottom: 20px; } .masna-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--masna-muted); } .masna-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; } .masna-section-head h2 { margin: 0; } .masna-link-more { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; white-space: nowrap; } /* ========================================================= 3. PRZYCISKI ========================================================= */ .masna-btn, .wp-block-button__link, button, input[type="submit"], input[type="button"], .ast-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--masna-green); color: var(--masna-cream); border: 1px solid transparent; border-radius: var(--masna-pill); padding: 14px 28px; font-family: var(--masna-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.03em; line-height: 1.2; text-transform: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .masna-btn:hover, .wp-block-button__link:hover, button:hover, input[type="submit"]:hover, .ast-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover { background: var(--masna-terra); color: var(--masna-cream); } .masna-btn--ghost { background: transparent; color: var(--masna-green); border: 1px solid var(--masna-line-strong); } .masna-btn--ghost:hover { background: transparent; color: var(--masna-terra); border-color: var(--masna-terra); } .masna-btn--sm { padding: 10px 18px; font-size: 13px; } /* ========================================================= 4. FORMULARZE ========================================================= */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea { background: var(--masna-surface); border: 1px solid var(--masna-line-strong); border-radius: var(--masna-radius-sm); padding: 12px 16px; font-family: var(--masna-sans); font-size: 14px; color: var(--masna-ink); transition: border-color .18s ease; } input:focus, select:focus, textarea:focus { border-color: var(--masna-green); outline: none; } ::placeholder { color: var(--masna-faint); } /* ========================================================= 5. BANER ========================================================= */ /* * Baner idzie na cala szerokosc okna — bez kontenera tresci i bez marginesow * bocznych. Ten sam komponent obsluguje baner pod naglowkiem i baner * reklamowy miedzy sekcjami strony glownej (.masna-banner--promo). */ .masna-banner { position: relative; width: 100%; line-height: 0; background: #0B0906; } /* Baner miedzy sekcjami dostaje odstep taki jak odstepy miedzy sekcjami. */ .masna-banner--promo { margin-top: 80px; } /* * Przejscie do jasnej tresci pod banerem. * * Zdjecie konczylo sie prosta, twarda krecha na styku czerni i kremu. Zamiast * rozmywac ciemny kadr w jasne tlo (wychodzi z tego szara mgla), tlo strony * *wchodzi* w zdjecie lukiem — tym samym ksztaltem, co kadr w sekcji * "Kim jestesmy". Luk konczy sie cienka terakotowa kreska, zeby przejscie * bylo swiadome, a nie przypadkowe. Boki wychodza poza ekran (-5%), dzieki * czemu przy krawedziach nie widac, jak elipsa sie splaszcza. */ .masna-banner::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 52px; background: var(--masna-cream); border-top: 2px solid var(--masna-terra); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; } /* Baner reklamowy ma krem i nad soba, i pod soba, wiec dostaje ten sam luk odbity u gory — czyta sie wtedy jak celowa wstawka, a nie ucieta tasma. */ .masna-banner--promo::before { content: ""; position: absolute; left: -5%; right: -5%; top: -1px; height: 52px; background: var(--masna-cream); border-bottom: 2px solid var(--masna-terra); border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; } /* * Zdjecie pokazujemy w calosci — bez limitu wysokosci, zeby nic z niego nie * znikalo. Wysokosc wynika wprost z szerokosci okna. Proporcje podaje PHP w * zmiennych --masna-banner-ratio (odczytane z biblioteki mediow), dzieki * czemu uklad nie skacze przed wczytaniem grafiki, a podmiana zdjecia na inny * kadr nie wymaga ruszania CSS-a. object-fit jest zabezpieczeniem: przy * niezgodnosci proporcji zdjecie zostanie przyciete zamiast rozciagniete. */ .masna-banner__img { display: block; width: 100%; height: auto; aspect-ratio: var(--masna-banner-ratio, 2138 / 736); object-fit: cover; } /* Telefon dostaje osobna grafike — patrz masna_banner_markup(). Prog musi sie zgadzac ze stala MASNA_BANNER_MOBILE_BP w functions.php. */ @media (max-width: 600px) { .masna-banner__img { aspect-ratio: var(--masna-banner-ratio-mobile, 1 / 1); } .masna-banner--promo { margin-top: 40px; } /* Na waskim ekranie luk musi byc plytszy — przy 52 px zjadalby juz produkty z dolu kadru. */ .masna-banner::after, .masna-banner--promo::before { height: 30px; } } /* ========================================================= 6. PASEK OGLOSZENIOWY ========================================================= */ .masna-topbar { background: var(--masna-green); color: var(--masna-cream); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; display: flex; justify-content: center; align-items: center; gap: 40px; padding: 10px 24px; flex-wrap: wrap; } .masna-topbar__sep { opacity: 0.45; } /* ========================================================= 7. NAGLOWEK ========================================================= */ /* * Pasek darmowej dostawy na gorze naglowka. Domyslnie ukryty — pokazuje sie * dopiero na telefonie (blok RESPONSYWNOSC), gdzie zastepuje pigulke wtyczki * msfs i pasek ogloszeniowy. */ .masna-freeship { display: none; background: var(--masna-green-dark); color: var(--masna-cream); padding: 8px var(--masna-gutter) 9px; } .masna-freeship__row { display: flex; align-items: center; gap: 9px; } /* Ciezarowka i paczka — od razu widac, ze pasek mowi o dostawie. Paczka jest mniejsza i przygaszona, zeby czytalo sie to jako jeden znak, a nie dwie konkurujace ikony. */ .masna-freeship__icons { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; } .masna-freeship__icons .masna-ico { width: 19px; height: 19px; } .masna-freeship__icons .masna-ico + .masna-ico { width: 15px; height: 15px; opacity: 0.62; } .masna-freeship__text { font-size: 12px; line-height: 1.3; letter-spacing: 0.01em; } .masna-freeship__text strong { font-weight: 600; } .masna-freeship__text .woocommerce-Price-amount { white-space: nowrap; font-weight: 600; } .masna-freeship__track { height: 4px; margin-top: 7px; border-radius: var(--masna-pill); background: rgba(247, 242, 233, 0.18); overflow: hidden; } .masna-freeship__fill { height: 100%; border-radius: var(--masna-pill); background: linear-gradient(90deg, var(--masna-terra), #E0A03C); transition: width .4s ease; } /* Dni wysylki. Klient patrzy na ten pasek, gdy liczy, ile brakuje do progu — to samo miejsce, w ktorym pyta "to kiedy ta paczka wyjdzie". Mniejszy stopien i przygaszenie, zeby nie konkurowalo z kwota. */ .masna-freeship__days { margin-top: 6px; font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; opacity: 0.72; } /* Ten sam komunikat na stronie koszyka. */ .masna-shipping-bar__days { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--masna-body); } /* Ukrywamy naglowek i stopke Astry — zastepujemy wlasnymi */ body.masna-skin .site-header, body.masna-skin .site-footer, body.masna-skin .ast-above-header, body.masna-skin .ast-below-header { display: none !important; } .masna-header { position: sticky; top: 0; z-index: 500; background: var(--masna-cream); border-bottom: 1px solid var(--masna-line); } .masna-header__bar { max-width: var(--masna-max); margin: 0 auto; padding: 18px var(--masna-gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .masna-nav { display: flex; gap: 28px; align-items: center; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; } .masna-nav a { padding: 6px 0; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px; } .masna-nav a:hover, .masna-nav a.is-open, .masna-nav .current-menu-item > a { border-bottom-color: var(--masna-terra); } .masna-nav__caret { font-size: 9px; transform: translateY(1px); } .masna-logo { text-align: center; line-height: 1; display: block; } .masna-logo__word { font-family: var(--masna-serif); font-size: 34px; letter-spacing: 0.22em; font-weight: 400; color: var(--masna-green); } .masna-logo__sub { font-size: 9px; letter-spacing: 0.42em; margin-top: 6px; color: var(--masna-muted); } .masna-logo img { max-height: 56px; width: auto; } .masna-header__tools { display: flex; gap: 10px; align-items: center; justify-content: flex-end; } .masna-search { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(31, 61, 43, 0.2); border-radius: var(--masna-pill); padding: 9px 16px; width: min(230px, 100%); background: rgba(255, 255, 255, 0.5); } .masna-search__icon { font-size: 13px; color: var(--masna-muted); } .masna-search input { border: none; background: transparent; outline: none; padding: 0; font-family: var(--masna-sans); font-size: 13px; width: 100%; color: var(--masna-ink); } .masna-cart { display: flex; align-items: center; gap: 9px; background: var(--masna-green); color: var(--masna-cream); padding: 11px 18px; border-radius: var(--masna-pill); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } .masna-cart:hover { background: var(--masna-terra); color: var(--masna-cream); } /* Ikona koszyka przydaje sie dopiero na telefonie, gdzie z pigulki zostaje sam znak — na szerokim ekranie wystarcza napis. */ .masna-cart__ico { display: none; } .masna-cart__count { background: var(--masna-cream); color: var(--masna-green); border-radius: var(--masna-pill); min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .masna-cart__count.is-empty { display: none; } /* --- Mega menu --- */ .masna-mega { display: none; border-top: 1px solid var(--masna-line); background: var(--masna-surface); box-shadow: var(--masna-shadow); } .masna-mega.is-open { display: block; } .masna-mega__inner { max-width: var(--masna-max); margin: 0 auto; padding: 34px var(--masna-gutter) 40px; display: grid; grid-template-columns: 1fr 1fr 320px; gap: 48px; } .masna-mega__title { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--masna-muted); margin-bottom: 18px; } .masna-mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px; } .masna-mega__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; margin-left: -10px; border-radius: 8px; font-size: 15px; } .masna-mega__list a:hover { background: var(--masna-sand); } .masna-mega__count { font-size: 12px; color: var(--masna-faint); } .masna-mega__all { display: inline-block; margin-top: 22px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--masna-terra); color: var(--masna-terra); padding-bottom: 3px; } .masna-mega__promo { display: block; background: var(--masna-green); border-radius: var(--masna-radius); overflow: hidden; color: var(--masna-cream); } .masna-mega__promo img { width: 100%; height: 190px; object-fit: cover; display: block; } .masna-mega__promo-body { padding: 20px 22px 24px; } .masna-mega__promo-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; } .masna-mega__promo-name { font-family: var(--masna-serif); font-size: 22px; margin-top: 8px; line-height: 1.25; color: var(--masna-cream); } .masna-mega__promo-meta { font-size: 14px; margin-top: 10px; opacity: 0.75; } /* --- Naglowek mobilny --- */ /* * Hamburger: okragly przycisk z trzema kreskami, ktore po otwarciu skladaja * sie w krzyzyk. Zeby nowy klient od razu wiedzial, ze to jest do klikniecia, * przycisk sam sie przez chwile zglasza — kreski falują, a wokol rozchodzi sie * delikatna obwodka. Animacja gasnie po pierwszym otwarciu menu (klasa * is-known z masna.js) i nie odpala sie przy wylaczonych animacjach. */ .masna-burger { display: none; position: relative; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--masna-line-strong); border-radius: 50%; color: var(--masna-green); } .masna-burger:hover { background: transparent; color: var(--masna-terra); border-color: var(--masna-terra); } .masna-burger:active { transform: scale(0.94); } .masna-burger__box { position: relative; display: block; width: 18px; height: 12px; } .masna-burger__line { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .18s ease, width .28s ease; } .masna-burger__line:nth-child(1) { top: 0; } .masna-burger__line:nth-child(2) { top: 5px; width: 72%; } .masna-burger__line:nth-child(3) { top: 10px; } /* Stan otwarty — krzyzyk. */ .masna-burger.is-open .masna-burger__line:nth-child(1) { transform: translateY(5px) rotate(45deg); } .masna-burger.is-open .masna-burger__line:nth-child(2) { opacity: 0; transform: translateX(-6px); } .masna-burger.is-open .masna-burger__line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Zaproszenie do klikniecia: srodkowa kreska dobiega do konca i wraca, a obwodka rozchodzi sie jak kolo na wodzie. Trzy powtorzenia wystarcza. */ .masna-burger::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--masna-terra); opacity: 0; pointer-events: none; } .masna-burger:not(.is-known):not(.is-open)::after { animation: masna-burger-ring 2.6s ease-out 1.1s 3; } .masna-burger:not(.is-known):not(.is-open) .masna-burger__line:nth-child(2) { animation: masna-burger-nudge 2.6s ease-in-out 1.1s 3; } @keyframes masna-burger-ring { 0% { opacity: .55; transform: scale(1); } 28% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } } @keyframes masna-burger-nudge { 0%, 100% { width: 72%; } 14% { width: 100%; } 28% { width: 72%; } } @media (prefers-reduced-motion: reduce) { .masna-burger::after, .masna-burger .masna-burger__line { animation: none !important; } } .masna-drawer { display: none; border-top: 1px solid var(--masna-line); background: var(--masna-surface); padding: 20px var(--masna-gutter) 28px; max-height: calc(100vh - 90px); overflow-y: auto; } .masna-drawer.is-open { display: block; } .masna-drawer__group + .masna-drawer__group { margin-top: 22px; } .masna-drawer a { display: block; padding: 11px 0; border-bottom: 1px solid var(--masna-line); font-size: 15px; } .masna-drawer .masna-search { width: 100%; margin-bottom: 18px; } /* ========================================================= 8. DOLNY PASEK NA TELEFONIE ========================================================= */ /* * Pasek pojawia sie dopiero ponizej 921 px (razem z mobilnym naglowkiem) — * patrz blok RESPONSYWNOSC. Tutaj sam wyglad, zeby reguly komponentu nie * rozjechaly sie po pliku. */ .masna-tabbar { display: none; position: fixed; inset: auto 0 0 0; z-index: 700; /* Poltransparentne tlo z rozmyciem: pasek nie odcina sie plaska plama od tresci, ktora pod niego wjezdza. Fallback to pelny krem — kolor jest podany osobno, bo backdrop-filter dziala nierowno na starszych Androidach. */ background: rgba(247, 242, 233, 0.92); border-top: 1px solid var(--masna-line); box-shadow: 0 -18px 40px -32px rgba(31, 61, 43, 0.9); padding-bottom: env(safe-area-inset-bottom, 0px); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .masna-tabbar { background: rgba(247, 242, 233, 0.78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } } .masna-tabbar__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 8px; background: none; border: 0; border-radius: 0; color: var(--masna-muted); font-family: var(--masna-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .masna-tabbar__item:hover { background: none; color: var(--masna-green); } /* Ikona siedzi w pigulce, ktora przy aktywnej zakladce zamienia sie w zielona plamke — czytelniej niz samo przebarwienie kreski. */ .masna-tabbar__ico { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 30px; border-radius: var(--masna-pill); transition: background-color .2s ease, color .2s ease, transform .2s ease; } /* Wspolna klasa ikon SVG z masna_icon() — rozmiar nadpisuja komponenty. */ .masna-ico { width: 22px; height: 22px; display: block; } .masna-tabbar__item.is-current { color: var(--masna-green); } .masna-tabbar__item.is-current .masna-tabbar__ico { background: var(--masna-green); color: var(--masna-cream); } .masna-tabbar__item.is-open { color: var(--masna-terra); } .masna-tabbar__item.is-open .masna-tabbar__ico { background: var(--masna-terra); color: var(--masna-cream); } .masna-tabbar__item:active .masna-tabbar__ico { transform: scale(0.92); } .masna-tabbar__badge { position: absolute; top: -3px; right: 3px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--masna-pill); background: var(--masna-terra); color: var(--masna-cream); font-size: 10px; font-weight: 600; letter-spacing: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--masna-cream); } .masna-tabbar__badge.is-empty { display: none; } /* Przycmienie tresci, gdy wyjezdza szuflada. Domyslnie jest przezroczyste i przepuszcza klikniecia — inaczej niewidoczna warstwa blokowalaby strone. */ .masna-scrim { display: none; position: fixed; inset: 0; z-index: 550; background: rgba(27, 26, 23, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } .masna-scrim.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } /* ========================================================= 9. STOPKA ========================================================= */ .masna-footer { margin-top: 90px; border-top: 1px solid rgba(31, 61, 43, 0.16); background: var(--masna-sand); } .masna-footer__grid { max-width: var(--masna-max); margin: 0 auto; padding: 56px var(--masna-gutter); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .masna-footer__word { font-family: var(--masna-serif); font-size: 26px; letter-spacing: 0.2em; color: var(--masna-green); } .masna-footer__sub { font-size: 9px; letter-spacing: 0.4em; margin-top: 6px; color: var(--masna-muted); } .masna-footer p { font-size: 14px; line-height: 1.6; color: var(--masna-body); margin: 20px 0 0; max-width: 32ch; } .masna-footer__col-title { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--masna-muted); margin-bottom: 16px; } .masna-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--masna-body); } .masna-newsletter { display: flex; gap: 8px; } .masna-newsletter input { flex: 1; border-radius: var(--masna-pill); padding: 11px 16px; font-size: 13px; min-width: 0; } .masna-newsletter button { padding: 11px 18px; font-size: 13px; } .masna-footer__legal { border-top: 1px solid var(--masna-line); padding: 18px var(--masna-gutter); text-align: center; font-size: 12px; color: var(--masna-muted); } /* ========================================================= 10. STRONA GLOWNA ========================================================= */ /* Szablon strony glownej rysuje wlasne, pelnoekranowe sekcje, wiec neutralizujemy kontener Astry i jego marginesy. */ body.page-template-template-home #content > .ast-container, body.page-template-template-home .site-content > .ast-container { max-width: none; padding-left: 0; padding-right: 0; display: block; } body.page-template-template-home #primary, body.page-template-template-home .content-area, body.page-template-template-home .ast-article-single { width: 100%; max-width: none; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; } body.page-template-template-home #secondary { display: none; } .masna-hero { max-width: var(--masna-max); margin: 0 auto; padding: 56px var(--masna-gutter) 0; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; } .masna-hero h1 { font-size: clamp(48px, 5.2vw, 76px); line-height: 1.02; margin: 0; } .masna-hero h1 em { font-style: italic; color: var(--masna-terra); } .masna-hero__lead { font-size: 18px; line-height: 1.6; max-width: 44ch; color: var(--masna-body); margin: 26px 0 0; } .masna-hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .masna-hero__stats { display: flex; gap: 38px; margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--masna-line); flex-wrap: wrap; } .masna-stat__value { font-family: var(--masna-serif); font-size: 30px; color: var(--masna-green); } .masna-stat__label { font-size: 13px; color: var(--masna-muted); margin-top: 4px; } .masna-hero__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 230px 230px; gap: 16px; /* Tlo + izolacja sa tu po to, zeby zdjecia mialy z czym sie zlac (patrz mix-blend-mode nizej). Bez tla obrazek nie ma pod soba nic w swojej grupie kompozycji i blend nie robi nic. */ background: var(--masna-cream); isolation: isolate; } .masna-hero__collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--masna-radius); display: block; /* Zdjecia produktow to packshoty na wypalonej bieli (#fff). Na kremowej stronie widac przez to twardy bialy prostokat. "darken" gasi biel do koloru tla, a nie rusza tego, co ciemniejsze od kremu — inaczej niz "multiply", ktore przygasza cale zdjecie. */ mix-blend-mode: darken; } /* Wysoka kolumna po lewej to teraz panel typograficzny, nie zdjecie — dlatego rozciagniecie na dwa wiersze siedzi na nim, a nie na :first-child (obrazek oliwy ma zostac w swojej jednej komorce). */ .masna-hero__panel { grid-row: span 2; background: var(--masna-green); color: var(--masna-cream); border-radius: var(--masna-radius); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; /* Panel jest jednolita plama koloru — blend z tla kolazu nie moze go rozjasnic tak, jak rozjasnia packshoty. */ isolation: isolate; } .masna-hero__panel-motif { display: block; color: rgba(247, 242, 233, 0.5); } .masna-hero__panel-motif svg { width: 76px; height: 76px; } .masna-hero__panel-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; margin-bottom: 8px; } .masna-hero__panel-title { font-family: var(--masna-serif); font-size: 26px; line-height: 1.2; } .masna-hero__note { background: var(--masna-terra); color: var(--masna-cream); border-radius: var(--masna-radius); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; } .masna-hero__note-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; } .masna-hero__note-title { font-family: var(--masna-serif); font-size: 26px; line-height: 1.2; } .masna-section { max-width: var(--masna-max); margin: 0 auto; padding: 80px var(--masna-gutter) 0; } /* Kafle kategorii — rysowana okladka zamiast packshotu. Zdjecie pierwszego produktu z kategorii dawalo rzad bez ladu: pudelko makaronu obok slupka salami i sloika, kazde w innej skali i z wlasnym tlem. Okladka to plaski kolor + jeden znak w kresce, wiec caly rzad czyta sie jak jeden komplet, a kategoria nie udaje konkretnego towaru. */ .masna-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .masna-tile { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 16px 16px; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease; } /* Uniesienie tylko tam, gdzie jest kursor. Na telefonie kafle sa karuzela sterowana transformem (skala aktywnego), wiec drugi transform z :hover wchodzilby jej w droge po dotknieciu. */ @media (hover: hover) { .masna-tile:hover { transform: translateY(-3px); box-shadow: var(--masna-shadow); } } .masna-tile:focus-visible { box-shadow: var(--masna-shadow); } /* Tony ida cyklicznie po pozycji kafla (patrz masna_category_tone), wiec sasiednie kategorie nigdy nie wypadaja w tym samym kolorze. */ .masna-tile--green { background: var(--masna-green); color: var(--masna-cream); } .masna-tile--terra { background: var(--masna-terra); color: var(--masna-cream); } .masna-tile--olive { background: #55632F; color: var(--masna-cream); } .masna-tile--sand { background: var(--masna-sand-dark); color: var(--masna-green); } /* Kafel ze zdjeciem wybranym recznie w panelu. Packshoty stoja na wypalonej bieli, wiec tlo zostaje piaskowe, a "darken" gasi bialy prostokat do koloru kafla — na kolorowej plamie to samo zdjecie wygladaloby jak naklejka. */ .masna-tile--photo { background: var(--masna-sand); color: var(--masna-green); isolation: isolate; } .masna-tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px 18px 48px; display: block; transition: transform .4s ease; mix-blend-mode: darken; } /* Podpis wychodzi na pelna szerokosc kafla (ujemne marginesy zdejmuja padding rodzica), zeby gradient sięgał krawedzi tak jak wczesniej. */ .masna-tile--photo .masna-tile__label { margin: 0 -16px -16px; padding: 26px 16px 16px; background: linear-gradient(rgba(241, 234, 220, 0), var(--masna-sand) 55%); } @media (hover: hover) { .masna-tile--photo:hover img { transform: scale(1.04); } } /* Znak jest bohaterem okladki, nie ozdobka w rogu — dlatego siedzi na srodku pola nad podpisem i skaluje sie z szerokoscia kafla. Przy 40 px ginal na tle plamy koloru i czytal sie jak przypadkowy pyl. */ .masna-tile__motif { position: absolute; inset: 0 0 40px 0; display: grid; place-items: center; opacity: 0.9; transition: transform .35s ease; } .masna-tile__motif svg { width: 46%; max-width: 104px; height: auto; } .masna-tile:hover .masna-tile__motif { transform: scale(1.06); } .masna-tile__label { position: relative; } /* Podpis siedzi wprost na kolorze okladki — zaden gradient nie jest juz potrzebny, bo pod spodem nie ma zdjecia o nieprzewidywalnej jasnosci. */ .masna-tile__label { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; line-height: 1.25; } /* Sekcja "Kim jestesmy" */ .masna-about { margin-top: 90px; background: var(--masna-green); color: var(--masna-cream); } .masna-about__inner { max-width: var(--masna-max); margin: 0 auto; padding: 80px var(--masna-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .masna-about h2 { color: var(--masna-cream); font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; margin: 0; } .masna-about .masna-kicker { color: rgba(247, 242, 233, 0.6); margin-bottom: 20px; } .masna-about p { font-size: 17px; line-height: 1.65; color: rgba(247, 242, 233, 0.78); margin: 24px 0 0; max-width: 48ch; } /* auto-fit, a nie sztywne dwie kolumny: przy jednym punkcie kreska nad nim idzie przez cala szerokosc zamiast urywac sie w polowie. */ .masna-about__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 40px; } .masna-about__point { border-top: 1px solid rgba(247, 242, 233, 0.25); padding-top: 16px; } .masna-about__point strong { font-size: 15px; font-weight: 600; display: block; } .masna-about__point span { font-size: 14px; opacity: 0.7; margin-top: 6px; display: block; } /* * Zdjecie z pizzerii. * * Zamiast prostokata w ramce: kadr przyciety w luk — ten sam ksztalt co * wejscie do pieca i wloskie przejscia bramne. Za nim, przekrzywiona o * ulamek stopnia, druga taka sama obwodka z kremowej kreski; dol zdjecia * rozpuszcza sie w zieleni tla (maska), wiec obraz nie jest naklejka na * sekcji, tylko z niej wyrasta. Podpis siedzi na styku luku i tla. */ .masna-about__photo { position: relative; margin: 0; justify-self: center; width: min(100%, 460px); padding-bottom: 26px; } /* Obwodka-cien: ten sam luk, obrocony i przesuniety. Rysujemy ja pseudo- elementem, zeby nie mnozyc znacznikow w szablonie. */ .masna-about__photo::before { content: ""; position: absolute; inset: 14px -16px 40px 16px; border: 1px solid rgba(247, 242, 233, 0.28); border-radius: 260px 260px var(--masna-radius) var(--masna-radius); transform: rotate(2.4deg); pointer-events: none; } .masna-about__photo-frame { position: relative; overflow: hidden; border-radius: 260px 260px var(--masna-radius) var(--masna-radius); /* Dolne 22% zdjecia gasnie do zera — stad wrazenie, ze kadr wychodzi z tla sekcji. -webkit- dla Safari, ktore wciaz chce prefiksu. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0) 100%); } .masna-about__photo-img { display: block; width: 100%; /* 9:10, a nie klasyczne 4:5 — zrodlo jest poziome, a przy wezszym kadrze luk odcinal reke odrywajaca ciasto. */ aspect-ratio: 9 / 10; object-fit: cover; object-position: 56% 46%; transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .masna-about__photo:hover .masna-about__photo-img { transform: scale(1.03); } .masna-about__photo-caption { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-radius: var(--masna-radius-sm); background: var(--masna-terra); color: var(--masna-cream); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.9); } .masna-about__photo-kicker { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; } .masna-about__photo-title { font-family: var(--masna-serif); font-size: 19px; line-height: 1.15; } /* Marki */ .masna-brands { display: flex; align-items: center; justify-content: center; gap: 72px; flex-wrap: wrap; margin-top: 38px; } .masna-brands img { height: 88px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter .25s ease, opacity .25s ease; } .masna-brands img:hover { filter: grayscale(0); opacity: 1; } /* Blog */ .masna-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .masna-post { display: flex; flex-direction: column; background: var(--masna-surface); border: 1px solid rgba(31, 61, 43, 0.1); border-radius: var(--masna-radius); overflow: hidden; } .masna-post:hover { border-color: var(--masna-terra); } .masna-post__media { background: var(--masna-sand-dark); overflow: hidden; } .masna-post__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .4s ease; } .masna-post:hover .masna-post__media img { transform: scale(1.04); } .masna-post__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; } /* Karta bez obrazka dostaje pelny gorny odstep. */ .masna-post--no-media .masna-post__body { padding-top: 26px; } .masna-post__date { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--masna-muted); } .masna-post__title { font-family: var(--masna-serif); font-size: 23px; line-height: 1.28; margin-top: 14px; color: var(--masna-green); flex: 1; } .masna-post__more { font-size: 14px; color: var(--masna-terra); margin-top: 20px; } /* ========================================================= 11. BLOG / WPISY / STRONY WEWNETRZNE ========================================================= */ .masna-page-hero { background: var(--masna-sand); border-bottom: 1px solid var(--masna-line); padding: 54px var(--masna-gutter); text-align: center; margin-bottom: 56px; } .masna-page-hero h1 { margin: 0; } .masna-page-hero p { margin: 14px auto 0; max-width: 60ch; } .ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single { background: var(--masna-surface); border: 1px solid rgba(31, 61, 43, 0.1); border-radius: var(--masna-radius); } /* Odnosniki tekstowe w tresci: jedno podkreslenie w kolorze z palety. Wczesniej byla tu ramka border-bottom, ktora dokladala sie do wlasnego text-decoration linku i dawala podwojna kreske. */ .entry-content a { color: var(--masna-terra); border-bottom: none; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(176, 67, 42, 0.45); text-underline-offset: 3px; } .entry-content a:hover, .entry-content a:focus-visible { color: var(--masna-terra-dark); text-decoration-color: var(--masna-terra); } /* Karty produktow, przyciski i widgety to nie sa linki tekstowe — nie podkreslamy ich i nie barwimy na terakote. */ .entry-content .woocommerce a, .entry-content ul.products a, .entry-content .elementor-widget-woocommerce-products a, .entry-content a.button, .entry-content a.elementor-button, .entry-content .elementor-widget-button a { text-decoration: none; border-bottom: none; } .entry-content blockquote { border-left: 3px solid var(--masna-terra); background: var(--masna-sand); border-radius: 0 var(--masna-radius-sm) var(--masna-radius-sm) 0; padding: 20px 24px; font-family: var(--masna-serif); font-size: 20px; } /* ========================================================= 12. LATAJACE LISTKI BAZYLII (tylko telefony, strona glowna) ========================================================= */ /* Domyslnie warstwy nie ma — wlacza sie dopiero ponizej 921 px. */ .masna-basil { display: none; } @media (max-width: 921px) { .masna-basil { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .masna-basil__leaf { position: absolute; top: 0; left: var(--masna-leaf-x, 50%); width: var(--masna-leaf-size, 44px); height: var(--masna-leaf-size, 44px); background-image: var(--masna-leaf-img); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0; animation: masna-leaf-drift var(--masna-leaf-dur, 26s) linear var(--masna-leaf-delay, 0s) infinite; } /* Tresc strony musi lezec nad warstwa listkow. */ .masna-home > *:not(.masna-basil) { position: relative; z-index: 1; } } @keyframes masna-leaf-drift { 0% { opacity: 0; transform: translate3d(0, -18vh, 0) rotate(var(--masna-leaf-rot, 0deg)); } 10%, 90% { opacity: var(--masna-leaf-opacity, 0.18); } 100% { opacity: 0; transform: translate3d(var(--masna-leaf-drift, 24px), 118vh, 0) rotate(calc(var(--masna-leaf-rot, 0deg) + var(--masna-leaf-spin, 240deg))); } } /* Kto wylaczyl animacje w systemie, nie dostaje latajacych listkow. */ @media (prefers-reduced-motion: reduce) { .masna-basil { display: none !important; } } /* ========================================================= 13. RESPONSYWNOSC ========================================================= */ @media (max-width: 1100px) { .masna-tiles { grid-template-columns: repeat(3, 1fr); } .masna-mega__inner { grid-template-columns: 1fr 1fr; } .masna-mega__promo { display: none; } .masna-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 921px) { :root { --masna-gutter: 20px; } /* Gorny pasek na telefonie: hamburger, logo na srodku, koszyk. Dolny pasek powtarza te dwa skroty na wysokosci kciuka — na gorze sa tam, gdzie klient odruchowo ich szuka. */ .masna-header__bar { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px var(--masna-gutter); } .masna-nav { display: none; } .masna-burger { display: inline-flex; } .masna-header__tools { gap: 0; } .masna-header__tools .masna-search { display: none; } .masna-logo { justify-self: center; } .masna-logo__word { font-size: 24px; letter-spacing: 0.16em; } .masna-logo__sub { font-size: 8px; letter-spacing: 0.3em; } /* Koszyk: z zielonej pigulki z napisem zostaje sam znak w kolku, zeby wazyl tyle samo co hamburger po drugiej stronie logo. */ .masna-cart { position: relative; width: 42px; height: 42px; padding: 0; justify-content: center; background: transparent; border: 1px solid var(--masna-line-strong); color: var(--masna-green); } .masna-cart:hover { background: transparent; color: var(--masna-terra); } .masna-cart:active { transform: scale(0.94); } .masna-cart__ico { display: block; } .masna-cart__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .masna-cart__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--masna-terra); color: var(--masna-cream); border: 2px solid var(--masna-cream); font-size: 10px; } .masna-topbar { gap: 14px; font-size: 11px; padding: 8px 16px; } .masna-topbar__sep { display: none; } /* ---------- Dolny pasek ---------- */ .masna-tabbar { display: flex; } /* Naglowek musi byc nad przycmieniem tla: wysuwany panel jest jego dzieckiem, wiec dziedziczy po nim miejsce w kolejnosci malowania. */ .masna-header { z-index: 600; } /* Miejsce pod paskiem, zeby nie zaslanial konca stopki. */ body.masna-skin { padding-bottom: calc(var(--masna-tabbar-h) + env(safe-area-inset-bottom, 0px)); } /* ---------- Szuflada jako panel wysuwany od dolu ---------- */ /* * Skoro menu otwiera sie z dolnego paska, panel wyjezdza z tej samej * strony — inaczej tresc pojawialaby sie na drugim koncu ekranu niz * palec. Panel jest zawsze w DOM (display:block), a chowa go przesuniecie, * dzieki czemu wjazd i zjazd sa animowane. */ .masna-drawer { display: block; position: fixed; left: 0; right: 0; bottom: calc(var(--masna-tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 600; max-height: min(70vh, 560px); padding: 18px var(--masna-gutter) 22px; border-top: 0; border-radius: 20px 20px 0 0; background: var(--masna-surface); box-shadow: 0 -30px 60px -40px rgba(27, 26, 23, 0.8); transform: translateY(calc(100% + var(--masna-tabbar-h))); transition: transform .3s cubic-bezier(.22, .61, .36, 1); overscroll-behavior: contain; } .masna-drawer.is-open { transform: none; } /* Uchwyt — sygnal, ze panel da sie zamknac przeciagnieciem w dol. */ .masna-drawer::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 14px; border-radius: var(--masna-pill); background: var(--masna-sand-dark); } .masna-scrim { display: block; } body.masna-sheet-open { overflow: hidden; } /* ---------- Pasek darmowej dostawy ---------- */ /* * Wlasny pasek na gorze przyklejonego naglowka — jedzie razem z nim przez * cala strone. Zastepuje pigulke wtyczki msfs, ktora siedziala w rogu * ekranu i zaslaniala dolna nawigacje; na telefonie ja chowamy (ID bije * specyficznoscia style wtyczki, wiec obywa sie bez !important). */ .masna-freeship { display: block; } body.masna-skin #msfs-v5-mount { display: none; } /* Pasek dostawy niesie te sama informacje co pierwsza pozycja paska ogloszeniowego, wiec gdy jest na gorze, ogloszenia sie nie dubluja. */ body.masna-has-strip .masna-topbar { display: none; } .masna-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; } .masna-hero__stats { gap: 24px; } /* Na waskich ekranach kafelek sezonowy idzie pod zdjecia i dostaje wysokosc z tresci. Sztywne wiersze powodowaly, ze tekst wychodzil poza terakotowe tlo. */ .masna-hero__collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .masna-hero__collage img { grid-row: auto; height: auto; aspect-ratio: 1; } /* Na telefonie panel przestaje byc wysoka kolumna i staje sie kwadratem obok butelki — inaczej rozpychalby siatke na dwa wiersze. */ .masna-hero__panel { grid-row: auto; aspect-ratio: 1; padding: 20px; gap: 14px; } .masna-hero__panel-motif svg { width: 32px; height: 32px; } .masna-hero__panel-title { font-size: 19px; } .masna-hero__note { grid-column: 1 / -1; padding: 22px 24px; gap: 12px; } .masna-hero__note-title { font-size: 22px; } .masna-section { padding-top: 60px; } .masna-about__inner { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--masna-gutter); } .masna-posts { grid-template-columns: 1fr; } .masna-brands { gap: 40px; } .masna-brands img { height: 60px; } .masna-footer { margin-top: 60px; } .masna-footer__grid { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--masna-gutter); } .masna-footer p { max-width: none; } } @media (max-width: 600px) { /* Na telefonie rolę otwarcia strony przejmuje kwadratowy baner, więc sekcja powitalna (nagłówek, zdjęcia, statystyki) się nie pokazuje. Powyżej 600 px hero działa bez zmian — reguły dla niego zostały w bloku 921 px. Ukrywamy całą sekcję, a nie tylko jej wnętrze, żeby nie zostawić po niej pustego odstępu. */ .masna-hero { display: none; } .masna-about__points { grid-template-columns: 1fr; gap: 18px; } /* Na telefonie luk jest wezszy, wiec i podpis, i przekrzywiona obwodka musza sie sciesnic, zeby nie wychodzily poza margines sekcji. */ .masna-about__photo::before { inset: 12px -10px 34px 10px; } .masna-about__photo-caption { padding: 10px 15px; } .masna-about__photo-title { font-size: 17px; } /* * Kategorie na telefonie: jeden rzad przewijany palcem w bok. Kafel * srodkowy jest duzy, sasiednie wystaja z lewej i z prawej pomniejszone — * po przesunieciu nastepny wjezdza na srodek i rosnie, a poprzedni maleje * i zostaje w tle. Wysrodkowanie robi scroll-snap, powiekszanie CSS, * a JS (masna.js) jedynie oznacza klasa .is-active kafel najblizszy * srodkowi. Bez JS-u karuzela dalej dziala — wszystkie kafle sa wtedy * w pelnym rozmiarze. */ .masna-tiles { display: flex; grid-template-columns: none; gap: 10px; /* Karuzela wychodzi poza marginesy sekcji, zeby sasiednie kafle siegaly az do krawedzi ekranu. */ margin-inline: calc(var(--masna-gutter) * -1); /* Zapas po bokach pozwala wysrodkowac pierwszy i ostatni kafel. */ padding: 6px 14vw 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .masna-tiles::-webkit-scrollbar { display: none; } .masna-tile { flex: 0 0 72vw; aspect-ratio: 4 / 5; scroll-snap-align: center; } /* Pomniejszenie wlacza dopiero JS — inaczej przy wylaczonym skrypcie wszystkie kafle zostalyby przygaszone na stale. */ .masna-tiles--js .masna-tile { transform: scale(0.88); opacity: 0.55; transition: transform .3s ease, opacity .3s ease; } .masna-tiles--js .masna-tile.is-active { transform: none; opacity: 1; } } @media (max-width: 600px) and (prefers-reduced-motion: reduce) { .masna-tiles--js .masna-tile { transition: none; } } /* ========================================================= ZESTAWY — pozioma "polka" z kartami produktow Uzywa standardowej karty WooCommerce (content-product), tylko uklada ja w przewijany rzad. Wychodzi poza marginesy sekcji, zeby na telefonie sasiednia karta wystawala zza krawedzi (sygnal: przewin). ========================================================= */ /* Bezpiecznik: nic w tresci strony glownej nie rozpycha jej w poziomie (polka ma wlasny scroll wewnetrzny, wiec to jej nie dotyczy). */ .masna-home { overflow-x: clip; } .masna-shelf { /* Bez ujemnych marginesow — polka zostaje w obrebie sekcji. */ max-width: 100%; padding: 4px 0 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .masna-shelf::-webkit-scrollbar { display: none; } .masna-shelf ul.products { display: flex !important; grid-template-columns: none !important; gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none; } /* WooCommerce/Astra dokleja clearfix przez ::before/::after — psulby flex. */ .masna-shelf ul.products::before, .masna-shelf ul.products::after { content: none !important; display: none !important; } .masna-shelf ul.products li.product { /* flex-basis wymusza rozmiar karty pewniej niz width (ktore bywa nadpisywane przez arkusz WooCommerce) — grow/shrink 0 = staly rozmiar. */ flex: 0 0 260px !important; width: 260px !important; max-width: 82vw !important; min-width: 0; margin: 0 !important; float: none !important; clear: none !important; scroll-snap-align: start; } /* ========================================================= BOKS PRODUKTOWY W TRESCI WPISU (zdjecie + przycisk Kup) Selektory z podwojna klasa (.masna-buybox .x) bija .entry-content p/a. ========================================================= */ .masna-buybox { display: flex; gap: 16px; align-items: center; background: var(--masna-surface); border: 1px solid var(--masna-line); border-radius: 14px; padding: 14px 16px; margin: 22px 0; } .masna-buybox__img { flex: 0 0 92px; display: block; } .masna-buybox__img img { width: 92px; height: 92px; object-fit: contain; background: #fff; border-radius: 10px; display: block; } .masna-buybox__body { flex: 1; min-width: 0; } .masna-buybox .masna-buybox__name { font-family: var(--masna-serif); color: var(--masna-green); font-size: 18px; line-height: 1.2; margin: 0 0 3px; } .masna-buybox .masna-buybox__desc { color: var(--masna-body); font-size: 14px; margin: 0 0 8px; } .masna-buybox .masna-buybox__price { color: var(--masna-terra); font-weight: 700; font-size: 16px; margin: 0 0 10px; } .masna-buybox .masna-buybox__btn { display: inline-block; background: var(--masna-green); color: var(--masna-cream); border-radius: 100px; padding: 10px 24px; font-weight: 600; text-decoration: none; transition: background-color .18s ease; } .masna-buybox .masna-buybox__btn:hover, .masna-buybox .masna-buybox__btn:focus { background: var(--masna-terra); color: var(--masna-cream); } @media (max-width: 600px) { .masna-buybox { flex-direction: column; text-align: center; } .masna-buybox__img { flex: 0 0 auto; } .masna-buybox__img img { width: 140px; height: 140px; } }