/* ========================================================= LUXORA — STRONA "KOLEKCJE" Cel: nowoczesny wygląd na desktopie (≥ 1024px). Mobile i tablet NIE są zmieniane - wszystko poniżej siedzi w @media (min-width: 1024px), poza regułą nagłówka intro. Celuje w klasy z page-kolekcje.php: .kolekcje-list > .kolekcje-section > .category-tile-head + .collection-products-slider + .products-cta i korzysta z klas slidera z home.css (.slider-button, .products-slider__*), nadpisując tylko wygląd. ========================================================= */ /* ========================================================= LUXORA — STRONA "KOLEKCJE" (bundle) Mobile-first: - < 600px : baner na górze, produkty w 2 kolumnach - 600-899px : baner na górze, produkty w 3 kolumnach - >= 900px : jeden rząd - baner + produkty obok siebie (baner po lewej / po prawej / na środku) Kolor banera i liczba produktów przychodzą z PHP przez zmienne: --bundle-bg, --bundle-fg, --n, --nl, --nr. ========================================================= */ .page-kolekcje { --kol-dark: var(--color-dark, #1b1b1b); --kol-gap: 14px; --kol-ease: cubic-bezier(.16, 1, .3, 1); } .page-kolekcje .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* --------------------------------------------------------- 1. LISTA --------------------------------------------------------- */ .page-kolekcje .kolekcje-list { display: grid; gap: 44px; padding: 32px 0 80px; } .page-kolekcje .kolekcje-empty { padding: 64px 0; text-align: center; color: var(--kol-dark); } .page-kolekcje .kolekcje-empty--admin { padding: 0; font-size: .85rem; opacity: .6; } /* --------------------------------------------------------- 2. RZĄD BUNDLE (mobile) --------------------------------------------------------- */ .page-kolekcje .bundle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kol-gap); align-items: stretch; } /* --------------------------------------------------------- 3. BANER --------------------------------------------------------- */ .page-kolekcje .bundle__banner { grid-column: 1 / -1; width: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 200px; padding: 26px; background: var(--color-dark); color: var(--bundle-fg, #fff); } .page-kolekcje .bundle__count { font-family: var(--luxora-font-body, "Jost", Arial, sans-serif); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; opacity: .7; } .page-kolekcje .bundle__title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: clamp(10px, 9vw, 40px); line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; color: inherit; } /* --------------------------------------------------------- 4. PRODUKT: numer, zdjęcie, przycisk, nazwa --------------------------------------------------------- */ .page-kolekcje .bundle__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .page-kolekcje .bundle__num { padding-left: 2px; font-family: var(--luxora-font-body, "Jost", Arial, sans-serif); font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .2em; color: var(--kol-dark); opacity: .55; } .page-kolekcje .bundle__media { position: relative; display: block; aspect-ratio: 5 / 5; overflow: hidden; background: #ece7e1; text-decoration: none; } .page-kolekcje .bundle__media .bundle__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--kol-ease); } .page-kolekcje .bundle__btn { position: absolute; left: 50%; bottom: 12px; z-index: 1; max-width: calc(100% - 16px); padding: 9px 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #1b1b1b; font-family: var(--luxora-font-body, "Jost", Arial, sans-serif); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity .45s var(--kol-ease), transform .45s var(--kol-ease); } .page-kolekcje .bundle__media:hover .bundle__img, .page-kolekcje .bundle__media:focus-visible .bundle__img { transform: scale(1.05); } .page-kolekcje .bundle__media:hover::after, .page-kolekcje .bundle__media:focus-visible::after { opacity: 1; } .page-kolekcje .bundle__media:hover .bundle__btn, .page-kolekcje .bundle__media:focus-visible .bundle__btn { opacity: 1; transform: translate(-50%, 0); } .page-kolekcje .bundle__media:focus-visible { outline: 2px solid var(--kol-dark); outline-offset: 3px; } .page-kolekcje .bundle__name { margin: 0; font-size: .86rem; line-height: 1.3; color: var(--kol-dark); } /* --------------------------------------------------------- 5. TABLET (600-899px) --------------------------------------------------------- */ @media (min-width: 600px) and (max-width: 899px) { .page-kolekcje .bundle { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --------------------------------------------------------- 6. DESKTOP (>= 900px) Każdy element zajmuje równą szerokość. Liczba kolumn wynika automatycznie z liczby elementów w danym bundle. Przykłady: 3 produkty + baner = 4 równe kolumny 6 produktów + baner = 7 równych kolumn 2 produkty + baner = 3 równe kolumny Nie używamy już --u. --------------------------------------------------------- */ @media (min-width: 900px) { .page-kolekcje { --kol-gap: 20px; } .page-kolekcje .kolekcje-list { gap: 64px; padding: 56px 0 120px; } /* ===================================================== BUNDLE ===================================================== */ .page-kolekcje .bundle { display: grid; /* * Każdy element jest osobną kolumną. * Grid sam dzieli dostępną szerokość. */ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--kol-gap); width: 100%; } /* ===================================================== BANER ===================================================== */ .page-kolekcje .bundle__banner { grid-column: auto; gap: 0; min-height: 0; padding: clamp(28px, 3vw, 44px); /* * Baner nie ma już własnej szerokości. * Dostaje dokładnie tyle samo miejsca co produkt. */ min-width: 0; } /* ===================================================== PRODUKTY ===================================================== */ .page-kolekcje .bundle__item { min-width: 0; width: 100%; } /* * Obraz produktu nie może wyjść poza swoją kolumnę. */ .page-kolekcje .bundle__item img { max-width: 100%; height: auto; display: block; } /* ===================================================== TYTUŁ ===================================================== */ .page-kolekcje .bundle__title { font-size: clamp(10px, 38px, 40px); } /* ===================================================== KOLEJNOŚĆ BANERA ===================================================== */ /* * DOM: baner jest pierwszy. * * Dla prawej i środkowej wersji przesuwamy go * odpowiednio za produkty. */ .page-kolekcje .bundle--right .bundle__banner, .page-kolekcje .bundle--center .bundle__banner { order: 1; } .page-kolekcje .bundle--center .bundle__item--after { order: 2; } } /* --------------------------------------------------------- 7. REDUKCJA RUCHU --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page-kolekcje .bundle__img, .page-kolekcje .bundle__btn, .page-kolekcje .bundle__media::after { transition: none; } .page-kolekcje .bundle__media:hover .bundle__img { transform: none; } }