/* ============================================================================= UNIMIS – custom.css (Child theme: unimis_theme → parent: hummingbird) ----------------------------------------------------------------------------- System stylów przeniesiony 1:1 z projektu Figma "UNIQPETS eSHOP". Ładowany automatycznie z priorytetem 1000 (PO theme.css rodzica), więc nadpisuje Hummingbird bez modyfikowania plików motywu nadrzędnego. Tokeny z Figmy: brand (pomarańcz) #EA5E25 rgb(234,94,37) accent (złoty) #F7B139 rgb(247,177,57) → gradient CTA heading / cena #0E332F (ciemna zieleń) ciemne sekcje #222 / #1E1E1E / #191919 tekst #212121 / #757575 obramowania #E0E0E0 muted #A5A5A5 radius 10px (karty/obrazy) • 4px (przyciski/inputy) fonty Poppins (nagłówki/ceny) • Inter (body/UI) ============================================================================= */ /* --------------------------------------------------------------------------- 1. FONT POPPINS (self-hosted, latin + latin-ext dla PL znaków) --------------------------------------------------------------------------- */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/poppins-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/poppins-latin-ext-800-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* --------------------------------------------------------------------------- 2. TOKENY MOTYWU + nadpisania zmiennych Bootstrap (Hummingbird = BS 5.3) --------------------------------------------------------------------------- */ :root{ /* Tokeny marki Unimis */ --unimis-brand:#ea5e25; --unimis-brand-rgb:234,94,37; --unimis-brand-dark:#c94e1d; --unimis-accent:#f7b139; --unimis-heading:#0e332f; --unimis-dark:#1e1e1e; --unimis-dark-2:#191919; --unimis-topbar:#222222; --unimis-gradient:linear-gradient(110deg,#ea5e25 30%,#f7b139 93%); /* Gradient „przesuwny" dla hovera CTA (Figma 2036:619): tło o szerokości 200% — lewa połowa = gradient domyślny (pomarańcz→złoto), prawa = odwrócony (złoto→pomarańcz, wariant hover z Figmy). Zmiana background-position 0%→100% płynnie przesuwa kolory na drugą stronę. */ --unimis-gradient-slide:linear-gradient(110deg,#ea5e25 15.5%,#f7b139 46.5%,#f7b139 65.5%,#ea5e25 96.5%); --unimis-radius:10px; --unimis-radius-sm:4px; /* Pionowy rytm sekcji (Figma „Główna": między sekcjami ~70–85px na desktopie, mediana 80px; na mobile schodzimy do 48px). 6.25vw osiąga 80px od 1280px. */ --unimis-section-gap:clamp(3rem, 6.25vw, 5rem); /* Kolory podstawowe Bootstrap → marka */ --bs-primary:#ea5e25; --bs-primary-rgb:234,94,37; --bs-primary-text-emphasis:#0e332f; --bs-primary-bg-subtle:#fde7dd; --bs-primary-border-subtle:#f6c2ab; --bs-link-color:#ea5e25; --bs-link-color-rgb:234,94,37; --bs-link-hover-color:#c94e1d; --bs-link-hover-color-rgb:201,78,29; /* Typografia / kolory tekstu */ --bs-body-color:#212121; --bs-body-color-rgb:33,33,33; --bs-secondary-color:rgba(33,33,33,.6); --bs-heading-color:#0e332f; --bs-emphasis-color:#0e332f; /* Obramowania */ --bs-border-color:#e0e0e0; --bs-border-color-translucent:rgba(0,0,0,.1); /* Zaokrąglenia — bazowo 10px (karty/dropdowny), małe 4px (inputy/przyciski) */ --bs-border-radius:.625rem; /* 10px */ --bs-border-radius-sm:.25rem; /* 4px */ --bs-border-radius-lg:.75rem; /* 12px */ --bs-border-radius-xl:1rem; --bs-border-radius-2xl:1.25rem; /* Focus ring w kolorze marki */ --bs-focus-ring-color:rgba(234,94,37,.25); } /* --------------------------------------------------------------------------- 3. TYPOGRAFIA — nagłówki/ceny: Poppins • body/UI: Inter (z rodzica) --------------------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6, .left-block__title,.right-block__title, .page-header,.page-header__title, .footer-block__title, .featured-products .h2,.products-section-title, .product-miniature .product-title{ font-family:'Poppins',"Inter",sans-serif; color:var(--unimis-heading); font-weight:700; } h1,.h1{font-weight:800;} /* Linki — domyślnie ciemne (jak w Figmie). Pomarańcz NIE jest kolorem linków; jest zarezerwowany dla przycisków CTA i akcentów oraz stanu :hover. */ a{color:var(--unimis-heading);} a:hover{color:var(--unimis-brand);} /* --------------------------------------------------------------------------- 4. PRZYCISKI — CTA z gradientem pomarańcz→złoto, radius 4px --------------------------------------------------------------------------- */ .btn{ --bs-btn-border-radius:var(--unimis-radius-sm); border-radius:var(--unimis-radius-sm); font-weight:600; } .btn-primary, .btn-primary:focus-visible{ --bs-btn-color:#fff;--bs-btn-bg:#ea5e25;--bs-btn-border-color:#ea5e25; --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#c94e1d;--bs-btn-hover-border-color:#c94e1d; --bs-btn-active-color:#fff;--bs-btn-active-bg:#c94e1d;--bs-btn-active-border-color:#c94e1d; --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#ea5e25;--bs-btn-disabled-border-color:#ea5e25; border:0; color:#fff; } /* Hover gradientowych CTA = odwrócony gradient (Figma 2036:619, wariant 2: złoto→pomarańcz). Wspólny mechanizm dla wszystkich przycisków z gradientem: tło 200% szerokości (--unimis-gradient-slide) przesuwane na hover w lewo, więc kolory płynnie „przepływają" na przeciwną stronę. */ .btn-primary, .product-miniature__add.btn, .product-miniature__details.btn, .module-products__buttons .btn, .products__buttons .btn, .all-product-link, .unimis-cat__btn{ background-image:var(--unimis-gradient-slide); background-size:200% 100%; background-position:0% 0; transition:background-position .45s ease,opacity .3s ease, color .15s ease-in-out,box-shadow .15s ease-in-out; } .btn-primary:hover,.btn-primary:active,.btn-primary.active, .product-miniature__add.btn:hover, .product-miniature__details.btn:hover, .module-products__buttons .btn:hover, .products__buttons .btn:hover, .all-product-link:hover, .unimis-cat:is(:hover,:focus-within,.is-open) .unimis-cat__btn{ background-position:100% 0; color:#fff; } @media (prefers-reduced-motion:reduce){ .btn-primary, .product-miniature__add.btn, .product-miniature__details.btn, .module-products__buttons .btn, .products__buttons .btn, .all-product-link, .unimis-cat__btn{transition:none;} } .btn-secondary{ --bs-btn-bg:#0e332f;--bs-btn-border-color:#0e332f; --bs-btn-hover-bg:#0a2622;--bs-btn-hover-border-color:#0a2622; --bs-btn-active-bg:#0a2622; } .btn-outline-primary{ --bs-btn-color:#ea5e25;--bs-btn-border-color:#ea5e25; --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#ea5e25;--bs-btn-hover-border-color:#ea5e25; --bs-btn-active-bg:#ea5e25;--bs-btn-active-border-color:#ea5e25; } /* --------------------------------------------------------------------------- 5. FORMULARZE / INPUTY — radius 4px, obramowanie #e0e0e0, focus pomarańcz --------------------------------------------------------------------------- */ .form-control,.form-select,.input-group-text, .ps-searchbar__input{ border-radius:var(--unimis-radius-sm); border-color:#e0e0e0; } .form-control:focus,.form-select:focus,.ps-searchbar__input:focus{ border-color:var(--unimis-brand); box-shadow:0 0 0 .2rem var(--bs-focus-ring-color); } .form-check-input:checked{ background-color:var(--unimis-brand); border-color:var(--unimis-brand); } /* --------------------------------------------------------------------------- 6. NAGŁÓWEK (header) — pasek górny ciemny, część główna biała, brand akcenty --------------------------------------------------------------------------- */ /* Górny pasek nawigacyjny (kontakt + język/waluta/konto/koszyk) — ciemny */ .header-top{ --header-top-color:#ffffff; --header-top-color-hover:#f7b139; background-color:var(--unimis-dark); border-bottom:0; color:#fff; } .header-top a:not(.dropdown-item), .header-top .header-block__icon, .header-top .dropdown-toggle{color:#fff;} .header-top a:not(.dropdown-item):hover{color:var(--unimis-accent);} /* Część główna nagłówka — biała, bez linii pod spodem (nad menu kategorii, zgodnie z projektem Figma) */ .header-bottom{ background-color:#fff; border-bottom:0; padding:.75rem 0; } /* Wyszukiwarka — zaokrąglona, lupa w kolorze marki */ .ps-searchbar__form .form-control, .ps-searchbar__input{ border-radius:var(--unimis-radius-sm); border:1px solid #e0e0e0; } .ps-searchbar__magnifier,.js-search-icon{color:var(--unimis-brand);} /* Ikony nagłówka (konto/koszyk) + licznik koszyka w kolorze marki */ .header-block__action-btn:hover .header-block__icon{color:var(--unimis-brand);} .header-block__badge{ background-color:var(--unimis-brand); color:#fff; } /* Logo sklepu — wysokość wg Figmy (logo uniq bez tła 1 = 151×107) */ .header-bottom__logo img,.header-bottom__logo .logo, .header-bottom__h1 img{ max-height:107px; width:auto; height:auto; } /* Mobile: logo nie może dominować kompaktowego nagłówka */ @media (max-width:767.98px){ .header-bottom__logo img,.header-bottom__logo .logo, .header-bottom__h1 img{max-height:56px;} } /* ----- Układ nagłówka wg Figmy (3 rzędy) ----- */ /* Rząd 1: cienki pasek górny */ .header-top--slim{padding:.25rem 0;font-size:.875rem;} .header-top--slim .header-top__left{display:flex;align-items:center;gap:1.25rem;} /* „Darmowa dostawa od X zł" obok telefonu (A2, 2026-09-10): override modules/ps_contactinfo/nav.tpl w child theme; kwota = PS_SHIPPING_FREE_PRICE (ten sam klucz co pasek postępu side carta), element tylko gdy próg > 0. */ .header-top--slim .ps-contactinfo{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem;} .ps-contactinfo__freeship{ display:inline-flex; align-items:center; gap:.375rem; white-space:nowrap; /* kolor dziedziczony: biały w pasku, ciemny w offcanvasie */ } .ps-contactinfo__freeship .material-icons{font-size:1.125rem;color:var(--unimis-accent);} /* Offcanvas menu (mobile): hummingbird przenosi tu #_desktop_ps_contactinfo — telefon i „Darmowa dostawa” jedno pod drugim */ .ps-mainmenu--mobile #_mobile_ps_contactinfo .ps-contactinfo{ display:flex;flex-direction:column;align-items:flex-start;gap:.25rem; } /* Rząd 2: logo | szukajka (rośnie, środek) | akcje/klaster mobilny (prawo) */ .header-bottom__row{gap:.75rem;} .header-bottom__logo{flex:0 0 auto;} .header-bottom__search{flex:1 1 auto;min-width:0;display:flex;justify-content:center;} .header-bottom__search #_desktop_ps_searchbar, .header-bottom__search .ps-searchbar{width:100%;max-width:520px;} .header-bottom__actions{flex:0 0 auto;gap:.25rem;} /* md+: skrzydła 1:2:1 — logo i akcje dostają równą szerokość, więc szukajka stoi w geometrycznym środku kontenera i rośnie z szerokością ekranu (połowa kontenera) zamiast sztywnego max-width */ @media (min-width:768px){ .header-bottom__logo{flex:1 1 0;} .header-bottom__search{flex:2 1 0;} .header-bottom__actions{flex:1 1 0;justify-content:flex-end;} .header-bottom__search #_desktop_ps_searchbar, .header-bottom__search .ps-searchbar{max-width:none;} } .header-bottom__mobile{flex:0 0 auto;gap:.25rem;} .header-bottom .header-block__icon{color:#212121;} /* Rząd 3: pełnoszerokościowy pasek menu */ .header-nav-full-width{ background-color:#fff; border-bottom:1px solid #e0e0e0; } .header-nav-full-width .ps-mainmenu{width:100%;} .header-nav-full-width .ps-mainmenu__tree{ display:flex;flex-wrap:wrap;gap:.25rem 1.5rem; margin:0;padding:0;list-style:none; } /* --------------------------------------------------------------------------- 6a. STICKY PASEK MENU (2026-06-12) Na md+ nagłówek NIE jest już w całości przyklejony (nadpisujemy sticky rodzica) — czarny pasek, logo i szukajka odjeżdżają ze stroną. Po przewinięciu ~350px za pasek menu custom.js przykleja SAM pasek menu (klasa .is-stuck, fixed + zjazd z góry) i przenosi do jego prawej strony szukajkę i koszyk; przy powrocie na górę wszystko wraca na miejsce. Mobile (<768px): bez zmian — header rodzica dalej sticky. --------------------------------------------------------------------------- */ @media (min-width:768px){ .header{position:static;} } /* Kotwica dla paneli .submenu (absolute, top:100%) — dotąd kotwiczyły do #header (sticky = positioned); po zdjęciu sticky kotwicą jest sam pasek menu. Mega menu otwiera się tuż pod paskiem w obu trybach (flow i fixed). */ .header-nav-full-width{position:relative;} /* Rząd paska: menu (rośnie) | narzędzia sticky (przy prawej krawędzi) */ .header-nav-full-width__row{gap:1rem;} .header-nav-full-width__menu{flex:1 1 auto;min-width:0;} .header-nav-full-width__tools{flex:0 0 auto;margin-left:auto;gap:.25rem;} /* Pasek przyklejony: fixed na całą szerokość + zjazd z góry */ .header-nav-full-width.is-stuck{ position:fixed; top:0;left:0;right:0; z-index:1030; /* nad treścią; pod side cartem (~1050) i modalami BS */ box-shadow:0 2px 14px rgba(14,51,47,.10); animation:unimis-nav-slide .25s ease; } @keyframes unimis-nav-slide{ from{transform:translateY(-100%);} to{transform:translateY(0);} } /* Narzędzia w pasku: kompaktowa szukajka + ikona koszyka z licznikiem. Szukajka ma utility order-2 (!important), więc koszyk dostaje order:3, żeby stał skrajnie po prawej (szukajka przed nim). */ .header-nav-full-width__tools #_desktop_ps_shoppingcart{order:3;} .header-nav-full-width__tools .ps-searchbar{width:280px;max-width:30vw;} .header-nav-full-width__tools .ps-searchbar__input{ padding-top:.375rem;padding-bottom:.375rem; } .header-nav-full-width__tools .header-block__icon{color:#212121;} /* Etykieta „Koszyk” zbędna w wąskim pasku — sama ikona + badge. (span ma utility d-md-flex z !important w warstwie utilities, więc nadpisanie też musi siedzieć w tej warstwie — zob. pułapka @layer wyżej) */ @layer utilities{ .header-nav-full-width__tools .header-block__title{display:none!important;} } /* --------------------------------------------------------------------------- 7. MENU GŁÓWNE (ps_mainmenu) — tekst ciemny, hover/aktywne w kolorze marki --------------------------------------------------------------------------- */ .menu__link{ color:#212121; font-weight:600; } .menu__link:hover, .menu__item:hover > .menu__link, .menu--current > .menu__link{ color:var(--unimis-brand); } .menu--current > .menu__link{ box-shadow:inset 0 -2px 0 var(--unimis-brand); } .ps-mainmenu__tree-dropdown-toggle:hover{color:var(--unimis-brand);} /* Link „Promocje" w menu (ps_mainmenu → pozycja LNK, nasz ps_mainmenu.tpl nadaje data-id="lnk-promocje") — wyróżniony kolorem marki, pogrubiony. WŁĄCZYĆ PO PIERWSZEJ OBNIŻCE (2026-09-10): /promocje jest dziś pusta (0 wierszy specific_price), więc pozycji w menu celowo NIE MA. Gdy klientka założy pierwszą promocję w BO: dodać link „Promocje" → https://uniqpets.pl/promocje (BO: Moduły → Menu główne → „Dodaj nowy link", potem dopisać LNK do listy pozycji; wzorzec skryptowy: var/menu/add_menu_nowosci.php). Reguła zadziała sama. */ .ps-mainmenu__tree-item[data-id="lnk-promocje"] > .ps-mainmenu__tree-link{ color:var(--unimis-brand); font-weight:700; } /* Poziome menu desktop (rząd 3) — linki ciemne, hover/aktywne w kolorze marki */ .ps-mainmenu__tree-link{ color:#212121; font-weight:600; padding:.65rem 0; display:inline-flex; align-items:center; } .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link, .ps-mainmenu__tree-link:hover, .ps-mainmenu__tree-item--current .ps-mainmenu__tree-link{ color:var(--unimis-brand); } /* --------------------------------------------------------------------------- 7a. MEGA MENU — panel rozwijany ps_mainmenu (szablon: child theme modules/ps_mainmenu/ps_mainmenu.tpl). Siatka podkategorii na pełnej szerokości; nagłówki grup + opcjonalne listy dzieci (3. poziom). --------------------------------------------------------------------------- */ .ps-mainmenu--desktop .submenu{ border-top:1px solid #e0e0e0; box-shadow:0 18px 32px rgba(14,51,47,.12); } /* A4 „mega menu ciaśniej" (2026-09-10, wariant V3 z pomiarów var/audit-20260910/a4/): padding panelu .75/1rem, tytuły grup 12px bez letter-spacing i z paddingiem .25rem, row-gap 0, stopka .5rem → panel „Dla kota" ~148px (było 238), „Dla psa" ~122px, zero łamanych tytułów przy 5 kolumnach. min-height:150px trzyma wysokość dekoru-zwierzaka (.megamenu__pet = calc(100% - 1.25rem) — bez tego kot zmalałby z 243 do ~153px). UWAGA: padding tu jako shorthand jest OK tylko dlatego, że ta reguła stoi PRZED .megamenu--decor{padding-right:230px}; nowych shorthandów za nią nie dodawać. */ .megamenu{padding:.75rem 0 1rem;min-height:150px;} /* Panel jako kolumna flex: siatka u góry, stopka „Zobacz wszystko" DOCIŚNIĘTA do dołu (margin-top:auto) — przy min-height pustka nie zostaje pod linią stopki (Małe zwierzęta: 1 rząd), a wszystkie 4 panele (w tym solo) mają CTA na tej samej wysokości. Odstęp siatka→stopka gwarantuje margin-bottom siatki. */ .megamenu{display:flex;flex-direction:column;} .megamenu__grid{margin-bottom:.5rem;} /* Stopka panelu: CTA "Zobacz wszystko" pod siatką podkategorii (bez powtórzonego nagłówka kategorii — życzenie klienta) */ .megamenu__footer{ margin-top:auto; padding-top:.5rem; border-top:1px solid #ececec; } .megamenu__all{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600; font-size:.875rem; color:var(--unimis-brand); text-decoration:none; white-space:nowrap; } .megamenu__all:hover{color:var(--unimis-brand-dark);} .megamenu__all .material-icons{font-size:1rem;} /* Siatka grup: 4 kolumny (xl), 5 (xxl) */ .megamenu__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 2rem; align-items:start; } @media (min-width:1400px){ .megamenu__grid{grid-template-columns:repeat(5,1fr);} } /* Nagłówek grupy = link podkategorii — wersaliki jak nagłówki grup u konkurencji */ .megamenu__group-title{ display:block; padding:.25rem .625rem; margin:0 -.625rem; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:0; color:#212121; text-decoration:none; border-radius:var(--unimis-radius-sm); } .megamenu__group-title:hover{ color:var(--unimis-brand); background:rgba(var(--unimis-brand-rgb),.06); } /* Lista dzieci grupy (gdy istnieje 3. poziom drzewa) */ .megamenu__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .megamenu__list .megamenu__link{ display:block; padding:.3125rem .625rem; margin:0 -.625rem; font-size:.875rem; color:rgba(33,33,33,.7); text-decoration:none; border-radius:var(--unimis-radius-sm); } .megamenu__list .megamenu__link:hover{ color:var(--unimis-brand); background:rgba(var(--unimis-brand-rgb),.06); } /* Dekor: zwierzaki kategorii wyłaniające się zza dolnej krawędzi panelu (pies / kot / zając+świnka — assety megamenu/, tight-rendery przezroczyste). Desktop-only z natury (mega menu ma d-none d-xl-block). UX: pointer-events:none + zarezerwowany prawy pas (padding-right siatki) — zwierzaki nigdy nie zasłaniają ani nie blokują linków. „Ucięty ogon": assety pies/kot są płasko ucięte od dołu (kot.png to crop górnych 71% kocura — niżej zaczynał się urwany ogon i cięcie futra), więc obrazek jest zatopiony 12px POD krawędzią panelu (bottom:-12px), a .submenu dostaje overflow:hidden — cięcie pozostaje niewidoczne także w szczycie odbicia animacji (overshoot -2.5% wysokości obrazka < 12px). */ /* overflow + contain:paint = podwójny klip: sama reguła overflow bywała gubiona przez compositor na 1 klatkę przy dekodowaniu obrazka w trakcie animacji transformu (zdjęcie „przelatywało" przez stronę — zgłoszenie klienta 2026-06-12); contain wymusza przycięcie także na warstwach kompozytowanych. Do tego rampa opacity w keyframes niżej. */ .ps-mainmenu--desktop .submenu{ overflow:hidden; contain:paint; } .megamenu--decor{ position:relative; padding-right:230px; } .megamenu__pet{ position:absolute; right:1.25rem; bottom:-12px; height:calc(100% - 1.25rem); max-height:210px; width:auto; pointer-events:none; user-select:none; animation:megamenuPetPeek .55s ease-out .05s backwards; } /* kot powiększony (życzenie klienta) — busta wypełnia panel niemal od góry */ .megamenu__pet--kot{ height:calc(100% + 4px); max-height:240px; } /* zając stoi ZA świnką (wcześniej w DOM = niższa warstwa), lekko w lewo i wyżej; wyskakuje chwilę po niej */ .megamenu__pet--zajac{ right:calc(1.25rem + 96px); height:calc(100% + 14px); max-height:185px; animation-delay:.2s; } /* panel „solo" (kategoria bez podkategorii, np. Dla człowieka): bez siatki, tylko dekor + "Zobacz wszystko" — min-height robi miejsce na zdjęcie, stopka dociśnięta do dołu, separator zbędny */ .megamenu--solo{ min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; } .megamenu--solo .megamenu__footer{ margin-top:0; padding-top:0; border-top:0; } /* pani z husky — jedyny poziomy asset (540x360) */ .megamenu__pet--husky{ max-height:185px; } /* rampa opacity: w fazie „pod panelem" (0–35%) zwierzak jest niemal niewidoczny — nawet gdyby klip zawiódł na klatkę, nie ma czego zobaczyć */ @keyframes megamenuPetPeek{ 0%{transform:translateY(106%) rotate(3deg); opacity:0;} 35%{opacity:1;} 72%{transform:translateY(-2.5%) rotate(-1deg);} 100%{transform:translateY(0) rotate(0); opacity:1;} } @media (prefers-reduced-motion:reduce){ .megamenu__pet{animation:none;} } /* --------------------------------------------------------------------------- 7b. MENU MOBILNE (offcanvas) — dopracowania --------------------------------------------------------------------------- */ /* Offcanvas to flex-column z overflow:hidden — bez tego lista dłuższa niż ekran (np. telefon w poziomie) byłaby ucięta bez możliwości przewinięcia. */ .ps-mainmenu--mobile .ps-mainmenu__mobile{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Wiersz pozycji z dziećmi: etykieta (link do kategorii) ma szerokość tekstu, a strzałka 34x34 wisi przy prawej krawędzi — między nimi była martwa strefa ~250px nieczuła na dotyk. Strzałka wypełnia teraz całą resztę wiersza: dotknięcie gdziekolwiek na prawo od etykiety otwiera podmenu. */ .ps-mainmenu--mobile .menu__toggle-child{ flex:1 1 auto; display:flex; justify-content:flex-end; min-height:44px; } /* CTA "Zobacz wszystko" na końcu podmenu — lustro stopki mega menu desktop */ .ps-mainmenu--mobile .menu__see-all{ margin-top:.375rem; padding-top:.625rem; border-top:1px solid #ececec; } .ps-mainmenu--mobile .menu__link--see-all{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600; font-size:.9375rem; color:var(--unimis-brand); } .ps-mainmenu--mobile .menu__link--see-all .material-icons{font-size:1rem;} /* --------------------------------------------------------------------------- 8. KARTY PRODUKTÓW — radius 10px, obramowanie, cena Poppins #0E332F --------------------------------------------------------------------------- */ /* Wizualna ramka KAŻDEJ karty produktu = .product-miniature__inner (Hummingbird NIE używa .card w miniaturze — to był błędny selektor). */ .product-miniature{height:100%;} .product-miniature__inner{ border:1px solid #e0e0e0; border-radius:var(--unimis-radius); /* 10px */ background:#fff; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease; } .product-miniature__inner:hover{ box-shadow:0 10px 26px rgba(14,51,47,.10); transform:translateY(-3px); } /* Górna część karty – obraz + flagi nakładane na róg */ .product-miniature__top{position:relative;} .product-miniature__top .product-flags{ position:absolute;top:.6rem;left:.6rem;z-index:3; display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none; } .product-miniature__top, .product-miniature__image, .product-miniature__image-container{background:#fff;} .product-miniature__image img, .product-miniature__image-container img{width:100%;height:auto;object-fit:contain;} /* Oddech między zdjęciem a ramką karty (Figma: karta 295px, obraz 235px = 30px po bokach, ~9px od góry). Padding 10% szerokości karty ≈ 30px przy 295px; clamp pilnuje granic na węższych kartach mobilnych. */ .product-miniature__image-container{padding:10px clamp(12px, 10%, 30px) 0;} /* Dolna część – treść wyśrodkowana */ .product-miniature__bottom{ padding:1rem 1rem 1.15rem; display:flex;flex-direction:column;flex:1 1 auto; text-align:center; } .product-miniature__infos{display:flex;flex-direction:column;flex:1 1 auto;} /* Kolejność wg Figmy: CENA nad NAZWĄ */ .product-miniature__prices{ order:1;display:flex;justify-content:center;align-items:baseline; gap:.5rem;margin:0 0 .35rem; } .product-miniature__title{order:2;} .product-miniature__features{order:3;} .product-miniature__variants{order:4;} /* Cena bieżąca – Poppins Bold 16px, ciemna zieleń */ .product-miniature__price{ font-family:'Poppins',"Inter",sans-serif;font-weight:700; font-size:1rem;color:var(--unimis-heading);line-height:1.2; } /* Cena stara – Poppins 13px, szara, przekreślona */ .product-miniature__discount-price{display:inline;line-height:1;} .product-miniature__regular-price{ font-family:'Poppins',"Inter",sans-serif;font-weight:400; font-size:.8125rem;color:#a5a5a5;text-decoration:line-through; } /* Nazwa – Poppins Bold, ciemna (NIE pomarańczowa), wyśrodkowana. Max 2 LINIE + wielokropek (życzenie klienta 2026-06-12); min-height = 2 linie, żeby karty w rzędzie trzymały równy układ przy krótkich nazwach. */ .product-miniature__title{ font-family:'Poppins',"Inter",sans-serif;font-weight:700; color:#212121;font-size:1rem;line-height:1.3; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2; overflow:hidden;min-height:2.6em; margin:0 0 .6rem;text-decoration:none; } .product-miniature__title:hover{color:var(--unimis-brand);} /* Cechy produktu pod nazwą (zamiast skrótu opisu) — NIEPOGRUBIONE, szare, max 2 linie; renderowane tylko gdy produkt ma niepuste cechy (Smak/Zapach). */ .product-miniature__features{ font-size:.8125rem;font-weight:400;color:#757575;line-height:1.4; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2; overflow:hidden;margin:0 0 .6rem; } /* Akcje przy dole karty: stepper (lewo) + Do koszyka (prawo) */ .product-miniature__actions{margin-top:auto;} .product-miniature__form{ display:flex;align-items:center;justify-content:center; gap:.25rem;flex-wrap:nowrap; /* odstęp 4px jak w Figmie */ } .product-miniature__form .quantity-button{flex:0 0 auto;} /* Stepper ilości – JEDNO wspólne obramowanie wokół całości (jak w Figmie): „−”, pole liczby i „+” to segmenty wewnątrz jednej ramki #e0e0e0 (radius 4px), rozdzielone cienkimi liniami działowymi — NIE trzy osobne ramki. Reguła celuje w sam komponent .quantity-button__group, więc działa tak samo na KARCIE PRODUKTU i na produkcie w LISTINGU (oba używają qty-input.tpl). */ .quantity-button__group{ border:1px solid #e0e0e0; border-radius:var(--unimis-radius-sm); background:#fff; overflow:hidden; /* zaokrąglone rogi przycinają segmenty */ } .quantity-button__group:focus-within{ border-color:var(--unimis-brand); box-shadow:0 0 0 .2rem var(--bs-focus-ring-color); } /* Segmenty: bez własnych ramek, cieni i zaokrągleń, białe tło, ikony ciemne */ .quantity-button__group .btn, .quantity-button__group .form-control{ border:0;border-radius:0;box-shadow:none; background:#fff;background-image:none;color:#212121; } .quantity-button__group .btn .material-icons{color:#212121;} /* Pionowe obramowania separujące — PRZYPIĘTE DO przycisków „−" i „+" (jak w Figmie, gdzie każdy „Button group item” ma własną ramkę). Widoczne NA STAŁE, nie tylko po najechaniu. :first/:last-child = lewy/prawy przycisk niezależnie od kierunku (LTR/RTL), więc kreska zawsze pada na wewnętrzną krawędź. */ .quantity-button__group .btn:first-child{border-right:1px solid #e0e0e0;} .quantity-button__group .btn:last-child{border-left:1px solid #e0e0e0;} .quantity-button__group .form-control{ text-align:center;font-weight:600; } /* Stan minimalny (ilość = wartość min.). Klasę .is-min nadaje custom.js, gdy w polu jest minimum (działa też na listingu, gdzie rdzeń NIE blokuje „−”). Wtedy „−” jest mocno wyszarzony, a liczba lekko — po zwiększeniu ilości klasa znika i oba wracają do #212121. Dodatkowo :disabled (karta produktu, gdzie rdzeń blokuje „−”) trzyma minus wyszarzony niezależnie od JS. */ .quantity-button__group .btn:disabled .material-icons, .quantity-button__group.is-min .js-decrement-button .material-icons{color:#a5a5a5;} .quantity-button__group.is-min .form-control{color:#757575;} /* Wymiary pola liczby w miniaturze: szersze (≈70px), bez limitu rodzica (.quantity-button input{max-width:4rem}) — stepper osiąga 142px jak w Figmie */ .product-miniature .quantity-button__group .form-control{ width:70px;max-width:none;padding-inline:.5rem; } /* Wysokość steppera w miniaturze = 36px (34px treści + ramka 1px×2) — równo z przyciskiem „Do koszyka”, zgodnie z Figmą */ .product-miniature .quantity-button__group .btn, .product-miniature .quantity-button__group .form-control{ height:34px;min-height:34px; } /* „Do koszyka" – gradient marki, biały TEKST (zamiast kwadratowej ikony), radius 4px */ .product-miniature__add.btn, .product-miniature__details.btn{ flex:1 1 auto; border:0;color:#fff; border-radius:var(--unimis-radius-sm);font-weight:600;white-space:nowrap; display:inline-flex;align-items:center;justify-content:center; padding-inline:1rem;min-width:0; height:36px;min-height:36px;padding-block:0; /* równa wysokość ze stepperem (Figma 36px) */ } .product-miniature__add .product-miniature__add-text{display:inline-block;} .product-miniature__add .material-icons{display:none;} /* Cena na stronie PRODUKTU (poza miniaturą) */ .product-price,.current-price-value, .product-price-and-shipping .price{ font-family:'Poppins',"Inter",sans-serif;font-weight:700;color:var(--unimis-heading); } .regular-price{color:#a5a5a5;} /* Flagi/etykiety produktu — nowość/promocja w kolorze marki, rabat ciemnozielony */ .product-flags .badge:not(.discount), .product-flag{ background:var(--unimis-gradient)!important; color:#fff!important;border:0;border-radius:var(--unimis-radius-sm); } .product-flags .badge.discount,.product-flags .discount{ background-color:var(--unimis-heading)!important; color:#fff!important;border-radius:var(--unimis-radius-sm); } /* --------------------------------------------------------------------------- 8c. SELEKTORY WARIANTÓW — karta produktu / quickview select + radio → klikalne PIGUŁKI (zaznaczona = gradient marki), kolor → powiększone okrągłe swatche z ringiem zaznaczenia. Swatche koloru na KAFELKACH kategorii: większe + hover/focus. --------------------------------------------------------------------------- */ .product__variants{margin:0 0 1.1rem;} .product-variant{border:0;margin:0 0 1rem;padding:0;min-width:0;} .product-variant:last-child{margin-bottom:0;} .product-variant__label{ display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem;margin:0 0 .55rem; } .product-variant__legend{ float:none;width:auto;padding:0;margin:0; font-family:'Poppins',"Inter",sans-serif;font-weight:600; font-size:.95rem;color:var(--unimis-heading); } .product-variant__selected{font-size:.9rem;color:#757575;font-weight:500;} /* --- Pigułki (Rozmiar / Smak / Zapach / Opakowanie / Wzór …) --- */ .product-variant__pills{ display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;border:0; } .product-variant__pill-input{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none; } .product-variant__pill{ display:inline-flex;align-items:center;justify-content:center; min-width:2.75rem;min-height:2.6rem;padding:.45rem .95rem;margin:0; border:1.5px solid #e0e0e0;border-radius:var(--unimis-radius-sm); background:#fff;color:#212121; font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;line-height:1.15; text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none; transition:border-color .15s ease,color .15s ease,box-shadow .15s ease,background-color .15s ease; } .product-variant__pill:hover{border-color:var(--unimis-brand);color:var(--unimis-brand);} .product-variant__pill-input:checked + .product-variant__pill{ border-color:transparent;color:#fff; background-image:var(--unimis-gradient); box-shadow:0 3px 10px rgba(var(--unimis-brand-rgb),.28); } .product-variant__pill-input:checked + .product-variant__pill:hover{color:#fff;} .product-variant__pill-input:focus-visible + .product-variant__pill{ outline:2px solid var(--unimis-brand);outline-offset:2px; } .product-variant__pill-input:disabled + .product-variant__pill{ opacity:.4;cursor:not-allowed;border-style:dashed; } /* --- Swatche koloru na karcie produktu / quickview (większe, okrągłe) --- */ .product-variant__colors{gap:.6rem;} .product-variant__colors .color, .product-variant__colors .input-color__label .color{ width:2.25rem;height:2.25rem;border-radius:50%; border:1px solid rgba(0,0,0,.15); } .input-color__input:checked + .input-color__label .color, .product-variant__colors .color.active, .input-color__input:focus-visible + .input-color__label .color{ outline:2px solid var(--unimis-brand);outline-offset:2px; } /* --- Swatche koloru na KAFELKACH (kategoria / listy) — większe + hover --- */ .product-miniature__variants{ order:4;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.1rem 0 .7rem; } .product-miniature__variants .color{ width:1.6rem;height:1.6rem;border-radius:50%; border:1px solid rgba(0,0,0,.15); transition:outline-color .15s ease,transform .15s ease; } .product-miniature__variants .color:hover, .product-miniature__variants .color:focus-visible{ outline:2px solid var(--unimis-brand);outline-offset:2px;transform:scale(1.08); } /* --- Linia produktowa „Wybierz smak/zapach" (moduł unimisproductline) --- Przeniesiona NAD koszyk; label spójny z legendami wariantów, kafelki w stylu marki. */ .product__actions .unimis-productline{margin:0 0 1.1rem;} .unimis-productline__label{ font-family:'Poppins',"Inter",sans-serif;font-weight:600; font-size:.95rem;color:var(--unimis-heading);margin:0 0 .55rem; } .unimis-productline__grid{gap:.6rem;} .unimis-productline__tile{ border:1.5px solid #e0e0e0;border-radius:var(--unimis-radius-sm); transition:border-color .15s ease,box-shadow .15s ease,color .15s ease; } .unimis-productline__name{font-family:'Inter',sans-serif;} a.unimis-productline__tile:hover{ border-color:var(--unimis-brand); box-shadow:0 0 0 1px var(--unimis-brand);color:var(--unimis-brand); } .unimis-productline__tile--current{ border-color:var(--unimis-brand); box-shadow:0 0 0 2px rgba(var(--unimis-brand-rgb),.9); } /* --------------------------------------------------------------------------- 9. SEKCJE CIEMNE — newsletter + stopka (#191919 / #1E1E1E), tekst jasny --------------------------------------------------------------------------- */ #footer,.footer{ background-color:var(--unimis-dark-2); color:rgba(255,255,255,.75); } #footer a,.footer a, .footer-block__list a, .footer .footer-block__content a{ color:rgba(255,255,255,.75); } #footer a:hover,.footer a:hover, .footer-block__list a:hover{color:var(--unimis-accent);} .footer-block__title, #footer .footer-block__title{color:#fff;} .footer-block__title--toggle{border-color:rgba(255,255,255,.15);} .footer__before{background-color:var(--unimis-dark);} /* --------------------------------------------------------------------------- 9b. NEWSLETTER (override ps_emailsubscription) — ciemny pas wg Figmy: LEWO nagłówek+podtytuł • ŚRODEK zdjęcie psa • PRAWO hasło+input+CTA+zgoda --------------------------------------------------------------------------- */ .unimis-newsletter{ background:var(--unimis-dark); /* #1e1e1e — klasa nielayerowa, wygrywa */ color:#fff; } .unimis-newsletter .container{position:relative;} .unimis-newsletter__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:1.5rem; min-height:278px; position:relative; } .unimis-newsletter__left{padding:2.25rem 0;max-width:340px;} .unimis-newsletter__title{ font-family:'Poppins',"Inter",sans-serif;font-weight:800; text-transform:uppercase;color:#fff; font-size:clamp(2rem,3.8vw,3rem);line-height:1.3;margin:0 0 .5rem; /* Figma: Poppins ExtraBold 48px / lh 1.3 */ } .unimis-newsletter__subtitle{color:rgba(255,255,255,.85);margin:0;font-size:1rem;} /* Zdjęcie psa — przezroczyste, na styku kolumn (jak w Figmie), nie zasłania treści */ .unimis-newsletter__dog{ position:absolute;left:50%;bottom:0;transform:translateX(-50%); height:84%;max-height:240px;width:auto;max-width:none;z-index:2;pointer-events:none; } .unimis-newsletter__right{padding:2.25rem 0 2.25rem 7rem;position:relative;z-index:1;} .unimis-newsletter__hook{ font-family:'Poppins',"Inter",sans-serif;font-weight:800;color:#fff; font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.3;margin:0 0 1rem; /* Figma: Poppins ExtraBold 30px / lh 1.3 */ } .unimis-newsletter__hook strong{color:#fff;} .unimis-newsletter__row{display:flex;gap:.75rem;align-items:stretch;margin-bottom:.75rem;} .unimis-newsletter__input{ flex:1 1 auto;height:47px;border-radius:var(--unimis-radius-sm); border:1px solid #fff;background:#fff;color:#212121; } .unimis-newsletter__input:focus{ border-color:#fff;box-shadow:0 0 0 .2rem rgba(255,255,255,.25); } /* „Wyślij" — outline (przezroczysty z białą ramką) wg Figmy */ .unimis-newsletter__submit{ flex:0 0 auto;min-width:118px;height:47px; background:transparent;border:1px solid #fff;color:#fff; background-image:none; border-radius:var(--unimis-radius-sm);font-weight:600; } .unimis-newsletter__submit:hover{background:#fff;color:var(--unimis-dark);} .unimis-newsletter__consent, .unimis-newsletter__consent-text{ font-size:.75rem;color:rgba(255,255,255,.85);line-height:1.45;margin:0; } .unimis-newsletter__consent a, .unimis-newsletter__privacy{color:#fff;text-decoration:underline;} /* Pies tylko na desktopie (≥992px) — niżej kolidowałby z układem */ @media (max-width:991.98px){.unimis-newsletter__dog{display:none;}} @media (max-width:767.98px){ .unimis-newsletter__grid{grid-template-columns:1fr;min-height:0;gap:0;} .unimis-newsletter__left{padding:2rem 0 1rem;max-width:none;} .unimis-newsletter__right{padding:0 0 2rem;} } /* --------------------------------------------------------------------------- 10. RÓŻNE — paginacja, breadcrumb, alerty, fokus --------------------------------------------------------------------------- */ /* Paginacja bez pomarańczu (klient 2026-06-12): cyfry ciemne, aktywna strona = ciemnozielony boks z białą cyfrą. Kolory podajemy przez zmienne BS, nie przez color na .page-link — nielayerowy color nadpisywał też stan aktywny i cyfra zlewała się z tłem boksu. */ .pagination{ --bs-pagination-color:#212121; --bs-pagination-hover-color:var(--unimis-heading); --bs-pagination-hover-bg:rgba(14,51,47,.07); --bs-pagination-focus-color:var(--unimis-heading); --bs-pagination-focus-bg:rgba(14,51,47,.07); --bs-pagination-active-color:#fff; --bs-pagination-active-bg:var(--unimis-heading); --bs-pagination-active-border-color:var(--unimis-heading); } .page-link{border-radius:var(--unimis-radius-sm);} .breadcrumb a:hover{color:var(--unimis-brand);} :focus-visible{outline-color:var(--unimis-brand);} ::selection{background:rgba(234,94,37,.2);} /* --------------------------------------------------------------------------- 11. STRONA GŁÓWNA — slajder (ps_imageslider) + sekcje (featured/new/specials) --------------------------------------------------------------------------- */ /* Slajder hero — zaokrąglona tylko góra; dół prosty, bo bezpośrednio pod karuzelą przylega czarny pasek z logo (wg Figmy stykają się bez przerwy) */ .ps-imageslider .carousel, .ps-imageslider__figure, .ps-imageslider__figure img{ border-radius:var(--unimis-radius) var(--unimis-radius) 0 0; } .ps-imageslider__figure{overflow:hidden;margin-bottom:0;} .ps-imageslider__figure img{width:100%;height:auto;object-fit:cover;} /* Czarny pasek z logo UniQ Pets pod slajderem (Figma: Rectangle 4 — #1e1e1e, pełna szerokość × 43px + Group 157 — białe logo 67×28 przy lewym marginesie). Markup w override slider.tpl (ps_imageslider). */ .unimis-hero-bar{ display:flex;align-items:center; height:43px; background:#1e1e1e; } .unimis-hero-bar__logo{display:block;width:67px;height:28px;} /* Strzałki nawigacji — okrągłe, ciemna zieleń → pomarańcz na hover */ .carousel-control-prev,.carousel-control-next{opacity:1;width:auto;padding:0 1rem;} .carousel-control-prev-icon,.carousel-control-next-icon{ width:3rem;height:3rem; background-color:rgba(14,51,47,.55); border-radius:50%; background-size:1.1rem 1.1rem; transition:background-color .15s ease; } .carousel-control-prev:hover .carousel-control-prev-icon, .carousel-control-next:hover .carousel-control-next-icon{ background-color:var(--unimis-brand); } /* Wskaźniki (kropki) w kolorze marki */ .carousel-indicators [data-bs-target]{ width:10px;height:10px;border-radius:50%;border:0; background-color:rgba(255,255,255,.65); } .carousel-indicators .active{background-color:var(--unimis-brand);} /* Caption slajdu — nagłówek Poppins */ .ps-imageslider__figcaption{border-radius:var(--unimis-radius);} .carousel-caption .h1,.carousel-caption h1{ font-family:'Poppins',"Inter",sans-serif;font-weight:800;color:#fff; } /* Tytuły sekcji strony głównej — Poppins Bold, WYŚRODKOWANE, bez kreski (Figma) */ .section-title{ font-family:'Poppins',"Inter",sans-serif; font-weight:700; color:var(--unimis-heading); text-align:center; font-size:clamp(1.75rem,3.2vw,2.5rem); /* Figma: Poppins Bold 40px (3.2vw osiąga 40px już od ~1250px szer.) */ line-height:1.2; margin:0 0 1.75rem; } /* Pionowy rytm strony głównej — sekcje rozdziela JEDEN grid gap (token). Rodzic: .page-content--home{display:grid;gap:2.5rem} (theme.css). UWAGA: marginesy grid itemów NIE zapadają się z gapem, tylko SUMUJĄ — dlatego poszczególne sekcje nie mogą mieć własnych marginesów pionowych (dawało to nierówny rytm 40/80px). Wyjątek celowy: ciemny pas „O firmie" (margin-block przy .unimis-about — Figma daje mu ~140px oddechu). */ .page-content--home{gap:var(--unimis-section-gap);} /* Moduł bloga ma własny padding-block:3.5rem (blogfeed.css) — na home rytm zapewnia grid gap; padding zerujemy, żeby nie podwajać oddechu. */ .page-content--home .unimis-blog{padding-block:0;} /* Ostatnią sekcją home jest ciemny newsletter, który wg Figmy KLEI SIĘ do ciemnej stopki — zdejmujemy globalny padding-block-end:2rem z .page, inaczej między ciemnymi pasami zostaje biały pasek. */ #index .center-column.page{padding-block-end:0;} /* Sekcje produktowe — odstępy */ .products,.featured-products,.ps-featuredproducts, .ps-newproducts,.ps-specials{margin-bottom:2.5rem;} /* Przyciski „Zobacz wszystkie" — gradient marki, wyśrodkowane (Figma) */ .module-products__buttons,.products__buttons{text-align:center;margin-top:1.5rem;} /* „Najczęściej wybierane" (unimistopchoice, 2026-09-10): gdy kategoria sterująca jest nieaktywna, override tpl nie renderuje przycisku, ale rodzic module-products.tpl zostawia pusty wrapper z margin-top — chowamy go, by nie było 24px pustki. */ .unimis-topchoice .module-products__buttons:not(:has(.btn)){display:none;} .module-products__buttons .btn, .products__buttons .btn, .all-product-link{ display:inline-flex;align-items:center;justify-content:center;gap:.25rem; border:0;color:#fff; border-radius:var(--unimis-radius-sm);font-weight:600; padding:.7rem 1.5rem; } .module-products__buttons .btn .material-icons, .products__buttons .btn .material-icons{color:#fff;} /* Karuzela produktów (strzałki sekcji) — kolor marki */ .products .carousel-control-prev-icon, .products .carousel-control-next-icon{background-color:rgba(14,51,47,.55);} /* Kafle kategorii na home (ps_customtext) — Dla psa / Dla kota */ .unimis-tiles{ margin:0; /* odstęp od sąsiadów daje grid gap strony głównej (rytm sekcji) */ /* Produkty wysuwają się POZA kafle (w bok i w górę). Sekcja jest pełnej szerokości, więc clip TYLKO w poziomie ucina ewentualny nadmiar dopiero na krawędzi okna (brak poziomego scrolla na wąskich ekranach i mobile), a pionowe wysunięcie (kolby/zabawki nad kaflem) pozostaje widoczne. */ overflow-x:clip; } .unimis-tiles .section-title{margin-bottom:1.5rem;} .unimis-tile{ display:block; border-radius:var(--unimis-radius); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; } .unimis-tile img{display:block;max-width:100%;height:auto;border-radius:var(--unimis-radius);} .unimis-tile:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12);} /* Banery promocyjne 2-up (override ps_banner) — SUPER RABATY + NAJCZĘŚCIEJ. Full-bleed wg Figmy (919+500+gap=1440). Tła = czyste fotografie; nagłówek + przycisk "Sprawdź" w HTML (warstwy: bg 0 / przyciemnienie 1 / treść 2). Ghost button wypełnia się bielą na hover całego banera. */ .unimis-promos{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0;} .unimis-promo{ position:relative; display:flex; overflow:hidden; min-height:clamp(240px,26vw,374px); } .unimis-promo--wide{flex:919 1 320px;} .unimis-promo--narrow{flex:500 1 280px;} .unimis-promo__bg{ position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover; transition:transform .35s ease; } .unimis-promo:hover .unimis-promo__bg{transform:scale(1.04);} .unimis-promo::after{ /* przyciemnienie pod tekstem */ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.02) 100%); } .unimis-promo__content{ position:relative;z-index:2; display:flex;flex-direction:column;align-items:flex-start;justify-content:center; gap:1.5rem; padding:2rem clamp(1.5rem,3.5vw,3.25rem); } .unimis-promo__title{ font-family:'Poppins',"Inter",sans-serif; font-weight:800; text-transform:uppercase; color:#fff; font-size:clamp(2.25rem,4.7vw,3.75rem); /* Figma: Poppins ExtraBold 60px (baner szeroki SUPER RABATY) */ line-height:1; } .unimis-promo--narrow .unimis-promo__title{font-size:clamp(1.375rem,2.85vw,2.25rem);} /* Figma: 36px (baner wąski NAJCZĘŚCIEJ) */ .unimis-promo__btn{ display:inline-flex;align-items:center;justify-content:center; padding:.55rem 1.625rem; font-size:.875rem;font-weight:600;color:#fff; border:1px solid #fff;border-radius:var(--unimis-radius-sm); transition:background .15s ease,color .15s ease; } .unimis-promo:hover .unimis-promo__btn, .unimis-promo:focus-visible .unimis-promo__btn{background:#fff;color:#212121;} .unimis-promo:focus-visible{outline:.125rem solid var(--unimis-brand);outline-offset:-.25rem;} /* --------------------------------------------------------------------------- 12. SEKCJA "O FIRMIE" (moduł unimis_about) — ciemna, 2 kolumny wg Figmy --------------------------------------------------------------------------- */ .unimis-about{ background-color:var(--unimis-dark); color:rgba(255,255,255,.85); padding:4.5rem 0; /* Ciemny pas dostaje WIĘCEJ oddechu niż zwykłe sekcje (Figma: ~140–177px): grid gap (80px) + margin-block (40px) = 120px z obu stron. */ margin-block:2.5rem; /* duże zdjęcie dochodzi do prawej krawędzi (ujemny margines z 100vw, który zawiera scrollbar) — clip ucina nadmiar bez poziomego scrolla */ overflow-x:clip; } .unimis-about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; } /* Lewa kolumna — 2 bloki tekstu (nagłówek + akapit), rozłożone pionowo */ .unimis-about__text h1,.unimis-about__text h2,.unimis-about__text h3, .unimis-about__text .h1,.unimis-about__text .h2,.unimis-about__text .h3{ font-family:'Poppins',"Inter",sans-serif; color:#fff; margin:0 0 .85rem; } /* Nagłówek manifestu — Figma: Poppins Bold 40px / lh 1.2 (#fff) */ .unimis-about__text h1,.unimis-about__text h2, .unimis-about__text .h1,.unimis-about__text .h2{ font-weight:700; font-size:clamp(1.75rem,3.2vw,2.5rem); line-height:1.2; } .unimis-about__text h3,.unimis-about__text .h3{ font-weight:700; font-size:clamp(1.375rem,2.2vw,1.75rem); line-height:1.25; } .unimis-about__text > h1:not(:first-child), .unimis-about__text > h2:not(:first-child), .unimis-about__text > h3:not(:first-child){margin-top:2.25rem;} .unimis-about__text strong{color:#fff;} .unimis-about__text p{color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:0;} .unimis-about__text a{color:var(--unimis-accent);} /* Prawa kolumna — duże zdjęcie (góra-prawo, dochodzi do PRAWEJ krawędzi viewportu jak w Figmie) + mniejsze (dół-lewo, nakładka schodząca PONIŻEJ dolnej krawędzi dużego zdjęcia — padding-bottom robi miejsce w sekcji, nic nie wystaje poza ciemne tło) */ .unimis-about__media{position:relative;min-height:440px;padding-bottom:7rem;} .unimis-about__img{border-radius:var(--unimis-radius);display:block;} .unimis-about__img--main{ width:100%;margin-left:auto; border-radius:22px; /* Figma: 22px */ } /* md+: kolumna ze zdjęciami wychodzi poza container do krawędzi viewportu (ujemny margines = (container − 100vw)/2 − padding kontenera 12px); prawe rogi zdjęcia bez radiusu — krawędź flush z oknem */ @media (min-width:768px){ .unimis-about__media{margin-right:calc((720px - 100vw)/2 - 12px);} .unimis-about__img--main{border-radius:22px 0 0 22px;} } @media (min-width:992px){ .unimis-about__media{margin-right:calc((960px - 100vw)/2 - 12px);} } @media (min-width:1200px){ .unimis-about__media{margin-right:calc((1140px - 100vw)/2 - 12px);} } @media (min-width:1400px){ .unimis-about__media{margin-right:calc((1320px - 100vw)/2 - 12px);} } .unimis-about__img--accent{ /* wysunięte w LEWO poza duże zdjęcie: 34px od WEWNĘTRZNEJ krawędzi fotografii do lewej krawędzi dużego zdjęcia (+15px ramki = -49px) */ position:absolute;left:-49px;bottom:0; width:52%; /* gruba ramka wg Figmy: 15px "outside stroke", radius węzła 19px → w CSS border liczy się DO ŚRODKA, więc zewnętrzny radius = 19+15 = 34px, a wewnętrzny zostaje 19px — narożniki koncentryczne jak w projekcie */ border:15px solid var(--unimis-dark); border-radius:34px; } @media (max-width:991.98px){ .unimis-about__media{min-height:380px;} } @media (max-width:767.98px){ .unimis-about{padding:2.75rem 0;} .unimis-about__grid{grid-template-columns:1fr;gap:1.75rem;} .unimis-about__media{min-height:300px;padding-bottom:2.5rem;} .unimis-about__img--main{width:100%;} .unimis-about__img--accent{width:50%;left:0;bottom:0;border-width:8px;border-radius:27px;} } /* --------------------------------------------------------------------------- 13. KAFLE KATEGORII Z ANIMACJĄ HOVER — geometria 1:1 z Figmy (component sety DLA PSA / DLA KOTA / DLA małych / DLA cz, warianty Default → Variant2). Każdy element sceny: left/top = ŚRODEK elementu w % kafla (przeliczone z px Figmy / 294–295), rozmiar w % kafla, rotacja z Figmy; translate(-50%,-50%) centruje. Kolejność w DOM = kolejność warstw. Produkty (--pop) w spoczynku schowane za zwierzakiem, na hover wysuwają się na pozycje z Figmy — częściowo POZA czarny kafel. Assety: assets/img/figma/tiles2//. --------------------------------------------------------------------------- */ .unimis-cats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;} .unimis-cat{ position:relative; flex:0 1 295px;max-width:320px;min-width:228px; aspect-ratio:1; /* Figma: kafel to KWADRAT ~295×295 */ background:#212121;border-radius:var(--unimis-radius); display:block;text-decoration:none;isolation:isolate; overflow:visible; /* produkty wysuwają się POZA kafel */ } /* Na hover kafel ponad sąsiadami, by wysunięte produkty nie chowały się pod nimi */ .unimis-cat:is(:hover,:focus-within,.is-open){z-index:3;} .unimis-cat__title{ position:absolute;top:8%;left:4%;right:4%;z-index:6;text-align:center; font-family:'Poppins',"Inter",sans-serif;font-weight:700;font-size:1.5rem;line-height:1.15;color:#fff; pointer-events:none; } .unimis-cat__stage{position:absolute;inset:0;z-index:1;} /* Element sceny */ .unimis-cat__el{position:absolute;display:block;pointer-events:none;} .unimis-cat__el>img{display:block;width:100%;height:100%;} /* Okno z cropem: wrapper przycina, img w środku ma rozmiar/offset w % okna */ .unimis-cat__el--clip{overflow:hidden;} .unimis-cat__el--clip>img{position:absolute;max-width:none;} /* Produkt wysuwany: spoczynek = wciągnięty do środka kafla, mały, niewidoczny */ .unimis-cat__el--pop{ opacity:0; transition:transform .55s cubic-bezier(.2,.75,.3,1), opacity .4s ease; } .unimis-cat:is(:hover,:focus-within,.is-open) .unimis-cat__el--pop{opacity:1;} /* ===== DLA PSA ===== */ /* Lis i paczka = rendery node'ow z Figmy (rotacja wypalona w PNG); pozycje z template-matchu do screenshotu wariantu hover */ .t-dog .e-fox{left:31.69%;top:63.73%;width:76.95%;height:88.14%; transform:translate(calc(-50% + 54px),calc(-50% + 12px)) rotate(-16deg) scale(.3);} .t-dog .e-pack{left:75.25%;top:40.00%;width:63.05%;height:65.76%; transform:translate(calc(-50% - 75px),calc(-50% + 82px)) rotate(16deg) scale(.3);} .t-dog:is(:hover,:focus-within,.is-open) .e-fox{transform:translate(-50%,-50%);} .t-dog:is(:hover,:focus-within,.is-open) .e-pack{transform:translate(-50%,-50%);} /* Pies = wycinka z wpieczonymi doodle-okularami (od klientki, transparentne tło); pozycja z template-matchu do screenshotu wariantu Figmy */ .t-dog .e-dog{left:49.66%;top:57.46%;width:68.81%;height:85.08%;transform:translate(-50%,-50%);} /* ===== DLA KOTA ===== */ .t-cat .e-wand1{left:27.31%;top:53.90%;width:33.95%;height:50.78%; transform:translate(calc(-50% + 78px),calc(-50% + 41px)) rotate(-42.37deg) scale(.3);} .t-cat .e-soup{left:20.10%;top:75.05%;width:56.12%;height:31.19%; transform:translate(calc(-50% + 99px),calc(-50% - 21px)) rotate(16.4deg) scale(.3);} .t-cat .e-soup>img{width:178.6%;height:213.2%;left:-39.46%;top:-50.91%;} .t-cat .e-litter{left:72.72%;top:54.54%;width:53.93%;height:68.11%; transform:translate(calc(-50% - 56px),calc(-50% + 39px)) rotate(36.98deg) scale(.3);} .t-cat .e-litter>img{width:130.84%;height:118.16%;left:0;top:0;} .t-cat .e-wand2{left:30.44%;top:42.37%;width:42.59%;height:63.66%; transform:translate(calc(-50% + 69px),calc(-50% + 75px)) rotate(-23.19deg) scale(.3);} .t-cat:is(:hover,:focus-within,.is-open) .e-wand1{transform:translate(-50%,-50%) rotate(-42.37deg);} .t-cat:is(:hover,:focus-within,.is-open) .e-soup{transform:translate(-50%,-50%) rotate(16.4deg);} .t-cat:is(:hover,:focus-within,.is-open) .e-litter{transform:translate(-50%,-50%) rotate(36.98deg);} .t-cat:is(:hover,:focus-within,.is-open) .e-wand2{transform:translate(-50%,-50%) rotate(-23.19deg);} /* Kot (czapka kucharska wpieczona w PNG); dół źródła przycięty oknem, dolna krawędź okna równo z dołem kafla */ .t-cat .e-cat{left:53.74%;top:61.97%;width:53.06%;height:75.83%;transform:translate(-50%,-50%);} .t-cat .e-cat>img{width:100%;height:118.08%;left:0;top:2.03%;} /* ===== DLA MAŁYCH ZWIERZĄT ===== */ .t-small .e-stickl{left:13.58%;top:51.64%;width:54.76%;height:86.44%; transform:translate(calc(-50% + 110px),calc(-50% + 38px)) rotate(-37.93deg) scale(.3);} .t-small .e-stickr{left:73.58%;top:43.33%;width:54.76%;height:86.44%; transform:translate(calc(-50% - 66px),calc(-50% + 62px)) rotate(45.45deg) scale(.3);} .t-small:is(:hover,:focus-within,.is-open) .e-stickl{transform:translate(-50%,-50%) rotate(-37.93deg);} .t-small:is(:hover,:focus-within,.is-open) .e-stickr{transform:translate(-50%,-50%) rotate(45.45deg);} /* Kompozycja widoczna CAŁY CZAS (jak w Figmie): zboże za ziołami za królikiem, świnka i papuga z przodu */ .t-small .e-wheat{left:35.90%;top:73.67%;width:46.39%;height:46.24%;transform:translate(-50%,-50%) rotate(23.2deg);} .t-small .e-herbs{left:40.26%;top:63.18%;width:69.64%;height:69.41%;transform:translate(-50%,-50%);} .t-small .e-rabbit{left:57.12%;top:62.36%;width:46.76%;height:75.66%;transform:translate(-50%,-50%) rotate(1.14deg);} .t-small .e-guinea{left:32.99%;top:81.68%;width:37.80%;height:37.67%;transform:translate(-50%,-50%) rotate(1.45deg);} /* Papuga na hover przesuwa się niżej w prawo (Figma: różne pozycje wariantów) */ .t-small .e-parrot{left:83.11%;top:52.40%;width:38.34%;height:37.69%;transform:translate(-50%,-50%); transition:transform .55s cubic-bezier(.2,.75,.3,1);} .t-small:is(:hover,:focus-within,.is-open) .e-parrot{transform:translate(calc(-50% + 13px),calc(-50% + 49px));} /* ===== DLA CZŁOWIEKA ===== */ .t-human .e-tote{left:84.01%;top:36.31%;width:62.03%;height:92.73%; transform:translate(calc(-50% - 67px),calc(-50% + 83px)) rotate(22.13deg) scale(.3);} .t-human:is(:hover,:focus-within,.is-open) .e-tote{transform:translate(-50%,-50%) rotate(22.13deg);} /* Kobieta z szczeniakiem husky: szerokie okno-crop (przezroczyste marginesy wystają poza kafel, piksele obrazu nie); dół zdjęcia przycięty równo z dołem kafla — kadr jak w Figmie */ .t-human .e-woman{left:46.26%;top:61.86%;width:128.57%;height:76.27%;transform:translate(-50%,-50%);} .t-human .e-woman>img{width:100%;height:112%;left:0;top:0;} /* Przycisk „Wybierz" — wymiary/pozycja z Figmy (128×47, Inter 14, dół 4.4%) */ .unimis-cat__btn{ position:absolute;left:50%;bottom:4.4%;transform:translateX(-50%);z-index:5; display:inline-flex;align-items:center;justify-content:center; min-width:128px;height:47px;padding:0 1.4rem; background-image:var(--unimis-gradient);color:#fff; border-radius:var(--unimis-radius-sm);font-weight:400;font-size:.875rem; } @media (prefers-reduced-motion:reduce){ .unimis-cat__el{transition:none;} } @media (max-width:575.98px){ .unimis-cat{max-width:100%;flex-basis:100%;} .unimis-cat__title{font-size:1.25rem;} /* Kafel pełnej szerokości na mobile — wysuwane produkty nie mają dokąd wyjść przy dotyku; zostaje stała kompozycja */ .unimis-cat__el--pop{display:none;} } /* ===== Karta produktu ===== */ /* Override product.tpl: reassurance usunięty z karty, a akordeon opisu przeniesiony do .product__container jako .product__details-col — dzięki temu prawa kolumna (cena + dodaj do koszyka) jest sticky wzdłuż CAŁEJ lewej kolumny: galerii i opisu (sticky działa w obrębie obszaru gridu elementu). Desktop (≥992px): grid rodzica ma 2 kolumny (48%/55% + 1fr); opis trafia do kolumny 1 rząd 2, prawa rozpięta na oba rzędy. align-self:start konieczny — domyślny stretch rozciąga element na pełny obszar i sticky nie ma gdzie się przesuwać. Offset top = wysokość sticky nagłówka rodzica (--unimis-header-h z custom.js, fallback 181px) + odstęp, inaczej tytuł produktu chowa się pod headerem. Mobile (<992px): kontener bez gridu, naturalna kolejność DOM galeria → akcje → opis. */ @media (min-width:992px){ .page-product .product__left{grid-column:1;grid-row:1;} .page-product .product__details-col{grid-column:1;grid-row:2;} .page-product .product__right{ grid-column:2; grid-row:1 / 3; position:sticky; top:calc(var(--unimis-header-h, 181px) + 1rem); align-self:start; } } @media (max-width:991.98px){ .page-product .product__details-col{margin-block-start:1.5rem;} } /* odstęp przed sekcją podobnych produktów (przejęty po .product__bottom) */ .page-product .product__details-col{margin-block-end:2rem;} /* Galeria na stronie produktu: 20px oddechu wokół covera (odrobinę mniej niż 30px z kart listingu) + wysokość covera ograniczona do okna, żeby CAŁE zdjęcie mieściło się na ekranie 14" laptopa — header rodzica jest sticky, więc od 100vh odejmujemy jego wysokość (--unimis-header-h z custom.js) i ~6rem na breadcrumb/odstępy. Floor 420px chroni przed degeneracją na niskich oknach; modal lupy nadal pokazuje zdjęcie w pełnym rozmiarze. */ .page-product .product__carousel .carousel-item{padding:20px;background:#fff;} .page-product .product__carousel .carousel-item img{ max-height:max(420px, calc(100vh - var(--unimis-header-h, 181px) - 6rem)); object-fit:contain; } /* Miniatury galerii PIONOWO po lewej stronie covera (życzenie klienta, wzór Dolina Noteci) — dodatkowo zwęża cover. Lista jest absolutna wewnątrz kolumny, więc to WYSOKOŚĆ COVERA dyktuje wysokość rzędu; nadmiar miniatur przewija się pionowo (cienki scrollbar + scroll-snap = „slider" przy wielu zdjęciach). Aktywna miniatura: outline --bs-primary z motywu rodzica (JS rodzica przełącza .active na .js-thumb-container przy zmianie slajdu). Mobile (<576px) zostaje układ rodzica: siatka miniatur POD coverem. */ @media (min-width:576px){ .page-product .product__images{display:flex;gap:.75rem;align-items:stretch;} .page-product .product__carousel{flex:1 1 auto;min-width:0;} .page-product .product__thumbnails{ order:-1;flex:0 0 84px;margin:0; position:relative;overflow:hidden; } .page-product .product__thumbnails-list{ position:absolute;inset:0; display:flex;flex-direction:column;gap:.75rem; overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:#e0e0e0 transparent; scroll-snap-type:y proximity; } .page-product .product__thumbnail{ flex:0 0 auto;width:100%;scroll-snap-align:start; } .page-product .product__thumbnail-image{ width:100%;height:auto;background:#fff; border:1px solid #e0e0e0;border-radius:var(--unimis-radius-sm); } } /* Komentarze w akordeonie — wewnętrzny „Komentarze (N)" NIE jest tytułem sekcji (tytułem jest przycisk akordeonu). Demonstrujemy go jako mały, lewy podpis obok gwiazdek; nadpisuje .section-title (id+klasa = wyższa specyficzność). */ #product_comments .accordion-body{padding-top:1rem;} #product-comments-list-header{ display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem; } #product-comments-list-header .section-title{ font-family:'Poppins',"Inter",sans-serif; font-size:1rem;font-weight:600;line-height:1.3; text-align:left;margin:0;color:var(--unimis-heading); } /* Akordeon karty produktu — oddech pod treścią. Hummingbird ma --bs-accordion-body-padding-y:0, więc treść (i przycisk „Czytaj więcej") siedziała 3px od nagłówka kolejnej pozycji. */ #product_accordion .accordion-body{padding-block-end:1.25rem;} /* „Czytaj więcej” — zwijany opis produktu z płynnym zanikiem ──────────────── Opis w akordeonie jest przycinany do --unimis-readmore-max; dolna krawędź zanika gradientem do tła (#fff), a pod nim pojawia się tekstowy przełącznik „Czytaj więcej / mniej”. Klamrę włącza JS (klasa .readmore-enabled) i tylko gdy treść realnie przekracza limit — krótkie opisy zostają nietknięte. */ .product__description.readmore-enabled{ --unimis-readmore-max:240px; position:relative; max-height:var(--unimis-readmore-max); overflow:hidden; transition:max-height .35s ease; } .product__description.readmore-enabled::after{ content:""; position:absolute;inset-inline:0;bottom:0;height:6.5em; background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 92%); pointer-events:none; opacity:1;transition:opacity .3s ease; } .product__description.readmore-enabled.is-expanded::after{opacity:0;} .readmore-toggle{ display:inline-flex;align-items:center;gap:.35rem; margin-block:.75rem .25rem;padding:0;border:0;background:none; font:inherit;font-weight:700;line-height:1.2;color:var(--unimis-brand); cursor:pointer;transition:color .2s ease; } .readmore-toggle:hover, .readmore-toggle:focus-visible{color:var(--unimis-brand-dark);text-decoration:underline;} .readmore-toggle .readmore-toggle__icon{ width:.8em;height:.8em;flex:none;transition:transform .3s ease; } .readmore-toggle.is-open .readmore-toggle__icon{transform:rotate(180deg);} @media (max-width:575.98px){ .product__description.readmore-enabled{--unimis-readmore-max:200px;} } @media (prefers-reduced-motion:reduce){ .product__description.readmore-enabled{transition:none;} .readmore-toggle .readmore-toggle__icon{transition:none;} } /* ===== Wishlist (blockwishlist) ===== */ /* Serduszko na miniaturze — przezroczyste tło zamiast białego kółka z cieniem, żeby nie zasłaniało zdjęcia/grafik produktu (domyślny styl modułu: .wishlist-button-add{background:#fff;box-shadow:...;border-radius:50%}). */ .wishlist-button-add{ background-color:transparent !important; box-shadow:none !important; } /* Delikatny cień samej ikony, by serce było czytelne i na jasnych, i na ciemnych zdjęciach */ .wishlist-button-add i{ text-shadow:0 1px 2px rgba(0,0,0,.35); } /* Serce wishlisty w nagłówku — spójne z ikonami konta/koszyka */ .header-bottom__wishlist .header-block__icon{color:#212121;} .header-bottom__wishlist .header-block__action-btn:hover .header-block__icon{color:var(--unimis-brand);} /* ===== Drzewo kategorii w sidebarze — hierarchia w stylu Allegro ===== */ /* Markup: override modules/ps_categorytree/.../ps_categorytree.tpl w child theme. Trzy poziomy wizualne: link „w górę" do rodzica (szary, z ‹), bieżąca kategoria wytłuszczona, podkategorie/rodzeństwo wcięte z pionową linią prowadzącą. */ .unimis-cattree__up{ display:inline-flex;align-items:center;gap:.25rem; margin-bottom:.25rem; color:#757575;font-size:.9375rem;text-decoration:none; } .unimis-cattree__up::before{ content:"‹"; font-size:1.25rem;line-height:1; transform:translateY(-1px); } .unimis-cattree__up:hover{color:var(--unimis-brand);} .unimis-cattree__current{ display:block; color:#212121;font-weight:700; } .unimis-cattree__list{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:.5rem; } .unimis-cattree__list--indent{ margin:.5rem 0 0 .25rem; padding-left:.75rem; border-left:1px solid #e0e0e0; } .unimis-cattree__link{color:#424242;text-decoration:none;} .unimis-cattree__link:hover{color:var(--unimis-brand);} /* bieżąca pozycja wewnątrz wciętej listy (liść wśród rodzeństwa) */ .unimis-cattree__list .unimis-cattree__current{display:inline;} /* ===== Kompaktowe filtry fasetowe + „Pokaż wszystkie" (2026-06-12) ===== */ /* Markup: override facets.tpl (ps_facetedsearch) i ps_categorytree.tpl w child theme; toggle obsługuje delegowany JS w custom.js. Listy >6 pozycji chowają nadwyżkę (pokazują 5), facet ceny jest domyślnie rozwinięty, a facet koloru to sama siatka kwadracików (podpisy ukryte, nazwa w title/tooltipie). */ .unimis-limited:not(.is-expanded) .unimis-overflow{display:none;} .unimis-more-toggle{ display:inline-flex;align-items:center;gap:.3rem; margin:.25rem 0 .5rem;padding:0;border:0;background:none; font-size:.875rem;color:#757575;cursor:pointer; text-decoration:underline;text-underline-offset:2px; } .unimis-more-toggle::after{content:"▾";font-size:.65em;text-decoration:none;} .js-unimis-more-scope.is-expanded .unimis-more-toggle::after{content:"▴";} .unimis-more-toggle:hover{color:var(--unimis-brand);} /* toggle w facetach stoi pod ul.accordion-body — wyrównaj do pozycji listy */ .search-filters .accordion-collapse > .unimis-more-toggle{margin-left:.25rem;} /* toggle w drzewie kategorii jest elementem listy — bez dodatkowych odstępów */ .unimis-cattree__more-item{margin-top:.125rem;} /* Facet koloru: sama siatka kwadracików (mnóstwo kolorów w pionowej liście z podpisami zajmowało pół strony). Nazwa koloru zostaje w title (tooltip) i w ukrytym labelu (czytniki ekranu — aria-labelledby działa też dla elementów display:none). :has() wykrywa facet po obecności pozycji kolorystycznych — bez wiązania się z nazwą „Kolor". */ .search-filters .accordion-body:has(.search-filters__form-check--color){ display:flex;flex-wrap:wrap;gap:.625rem; padding-top:.25rem; } .search-filters .accordion-body:has(.search-filters__form-check--color) > li{margin:0;} .search-filters__form-check--color{padding:0;margin:0;min-height:0;} .search-filters__form-check--color .search-filters__color-label{display:none;} .search-filters__form-check--color .color{ display:block;width:28px;height:28px;margin:0; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); /* ramka dla jasnych (biel!) */ cursor:pointer; transition:transform .15s ease; } .search-filters__form-check--color .color:hover{transform:scale(1.1);} .search-filters__form-check--color .color.active{ outline:2px solid var(--unimis-brand);outline-offset:2px; } /* ===== Sticky sidebar na listingu kategorii (życzenie klienta 2026-06-12) ===== */ /* Lewa kolumna (drzewo kategorii + filtry fasetowe) podąża przy przewijaniu listingu. #left-column to flex item .row Bootstrapa — align-self:flex-start konieczny, bo domyślny stretch rozciąga kolumnę na całą wysokość rzędu i sticky nie ma gdzie się przesuwać (ta sama pułapka co prawa kolumna karty produktu). Offset top = sticky header rodzica (--unimis-header-h z custom.js, fallback 181px) + oddech. Gdy sidebar jest WYŻSZY niż okno, max-height + overflow-y:auto daje mu własny cienki scrollbar — wszystkie filtry pozostają osiągalne bez odklejania kolumny. Tylko ≥768px (col-md) — poniżej kolumna i tak stoi nad listingiem. */ @media (min-width:768px){ .layout-left-column #left-column{ position:sticky; top:calc(var(--unimis-header-h, 181px) + 1rem); align-self:flex-start; max-height:calc(100vh - var(--unimis-header-h, 181px) - 2rem); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d9d9d9 transparent; } } /* --------------------------------------------------------------------------- 14. ONE PAGE CHECKOUT (ets_onepagecheckout, layout_4) — wg wzoru Dolina Noteci Lewa kolumna: czyste, numerowane sekcje bez ramek. Prawa szyna: karty z koszykiem/kodem/sumą + zgody + CTA, sticky przy przewijaniu. Struktura kolumn = override szablonu w themes/unimis_theme/modules/ ets_onepagecheckout/views/templates/hook/layout_4.tpl (mechanizm rdzenia PS). UWAGA specyficzność: moduł wstrzykuje