/** * Strona "Zestaw adapterów Ravenol Kit 2" — pages/page-ravenol-kit-2.php * * Wykorzystuje grid kart adapterów z adaptery.css (.archive-adapter__grid + .adapter-card). * Tutaj tylko style hero/intro/kontenera oraz dostosowanie marginesów grida. * * Kolory: wyłącznie var(--theme-*) z base/theme.css (dark/light przez data-theme na ). */ .ravenol-kit2 { min-height: 100vh; } .ravenol-kit2__container { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem 4rem; } /* ============================================================================= BANER HERO — uklad dwukolumnowy wg projektu graficznego. Lewa kolumna: jednolita ciemna plaszczyzna (#141414) z tytulem i podtytulem. Prawa kolumna: zdjecie walizki (object-fit:cover, przyciete gora/dol). BEZ gradientu — zdjecie zajmuje tylko prawa czesc, nie wchodzi pod tekst. Kolory tekstu sa STALE (bialy + zloty #FECB0E) niezaleznie od trybu dark/light, bo tekst lezy na ciemnej plaszczyznie — swiadomy wyjatek od reguly "tylko var(--theme-*)". Zrodlowy obrazek jest pionowy (600x829) — cover w prawej kolumnie kadruje gore i dol, pokazujac pelna szerokosc walizki. ============================================================================= */ .ravenol-kit2__banner { display: flex; width: 100%; aspect-ratio: 1109 / 535; margin: 0 auto 2rem; border-radius: 1.25rem; overflow: hidden; background-color: #141414; } /* Lewa kolumna — ciemna plaszczyzna z tekstem. */ .ravenol-kit2__banner-text { flex: 0 0 44%; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 5vw, 3.75rem); background-color: #141414; } /* Prawa kolumna — zdjecie. */ .ravenol-kit2__banner-media { flex: 1 1 56%; position: relative; overflow: hidden; } .ravenol-kit2__banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .ravenol-kit2__banner-title { margin: 0; font-weight: 700; line-height: 1.08; font-size: clamp(1.6rem, 4.2vw, 3.25rem); letter-spacing: -0.01em; } /* Waska szerokosc wymusza zlamanie dwuwyrazowej frazy na dwie linie ("Zestaw" / "adapterow") bez hardkodowanego
— dziala tez w tlumaczeniach. Pojedyncze dlugie slowo (np. DE "Adaptersatz") nie lamie sie i wychodzi poza max-width nieszkodliwie. */ .ravenol-kit2__banner-title-main { display: block; color: #ffffff; max-width: 12ch; } .ravenol-kit2__banner-title-brand { display: block; color: #FECB0E; margin-top: 0.1em; white-space: nowrap; } /* Index katalogowy zestawu — pojedyncza linia, ten sam dla kazdego jezyka. */ .ravenol-kit2__banner-index { margin: clamp(1rem, 2.5vw, 1.75rem) 0 0; font-size: clamp(0.95rem, 1.6vw, 1.25rem); font-weight: 700; letter-spacing: 0.02em; color: #fff; white-space: nowrap; } .ravenol-kit2__banner-subtitle { margin: clamp(0.5rem, 1.5vw, 0.85rem) 0 0; max-width: 46ch; font-size: clamp(0.9rem, 1.5vw, 1.1rem); font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.8); } /* CTA "Zapytaj o ofertę" pod tekstem hero. */ .ravenol-kit2__banner-cta { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); } /* Mobile — kolumny ukladaja sie pionowo: tekst u gory, zdjecie pod nim. */ @media (max-width: 640px) { .ravenol-kit2__banner { flex-direction: column; aspect-ratio: auto; border-radius: 1rem; } .ravenol-kit2__banner-text { flex: 0 0 auto; padding: clamp(1.5rem, 6vw, 2.25rem); } .ravenol-kit2__banner-media { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 11; } } /* ============================================================================= INTRO — naglowek nad grida ============================================================================= */ .ravenol-kit2__intro { font-size: 1.125rem; font-weight: 500; color: var(--theme-text); margin: 0 0 1.5rem; text-align: left; } /* ============================================================================= GRID — wykorzystuje .archive-adapter__grid z adaptery.css. Dodajemy tylko ewentualne korekty marginesow. ============================================================================= */ .ravenol-kit2__grid { margin: 0; } /* ============================================================================= EMPTY STATE ============================================================================= */ .ravenol-kit2__empty { text-align: center; padding: 3rem 1rem; color: var(--theme-text-muted); background: var(--theme-card-bg); border: 1px solid var(--theme-border); border-radius: 0.5rem; }