/* ══════════════════════════════════════════════════════════════════════════════ STRONA MODELU — NASZE NADPISANIA (18.08.2026) ⚠ CELOWO OSOBNY PLIK, nie edycja arkuszy CARMOD-a. Katalog `car_info` jest nadpisywany przy każdej ich aktualizacji, więc zmiany wpisane w `template.css`/`info.css` zniknęłyby bez śladu. Ten plik ładuje się PO nich. Sprawdzenie i przywrócenie: `php czesci/autobi_po_aktualizacji.php --napraw` ══════════════════════════════════════════════════════════════════════════════ */ /* ── 0. 🔴 ZMIENNE CARMOD-a — PRZYCZYNA WSZYSTKICH „ROZJEBANYCH" BLOKÓW ─────── Nowy `car_info` odwołuje się do `var(--cm-main)` 53 razy, do `--cm-line`, `--cm-light`, `--cm-text-family` itd. Definiuje je `templates/default/colors.php` — a NASZ szablon (`templates/autobi/includes.php`) go nie dołącza. Nikt go nie dołącza. Efekt: każda zmienna była PUSTA, więc: • `border:1px solid var(--cm-line)` → cała skrócona reguła nieprawidłowa → karty płynów miały `border: 0px none` (brak obrysów, luźny tekst), • `fill:var(--cm-main)` → ikona płynu czarna kreska, a jej właściwy kształt (`g:first-child path{fill:#fff}`) biały na białym, • `background:var(--cm-light)` → tło przezroczyste, • `font-family:var(--cm-text-family)`→ krój z przeglądarki, nie nasz. Dlatego strona „nie była nasza" — nie z powodu kolorów, tylko braku zmiennych. Wpisujemy je NASZĄ paletą (ta sama, co w kasie i na karcie produktu). */ :root{ --cm-main:#111318; /* nasz atrament = akcent CARMOD-a */ --cm-line:#e2e5e9; /* włos obrysu jak w kasie */ --cm-light:#f2f4f6; /* jasna płaszczyzna karty */ --cm-aero-bg-color:#f7f8fa; --cm-light-bg-color:#f2f4f6; --cm-dark-bg-color:#111318; --cm-cart-bg-color:#111318; --cm-text-color:#111318; --cm-title:#111318; --cm-text-size:14px; --cm-text-family:Barlow,sans-serif; /* treść jak w sklepie */ --cm-title-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --cm-img-hue-rotate:0deg; --cm-img-brightness:1; --cm-img-contrast:1; --cm-img-saturate:1; --cm-max-width:1480px; } /* ── 1. NASZ KONTENER ──────────────────────────────────────────────────────── 🔴 Zmierzone w przeglądarce przy oknie 1700: `.container` sklepu ma 1480 px i zaczyna się na 103. Strona modelu miała 1320 i zaczynała się na 183 — stąd „to nie jest nasz container". Zrównujemy co do piksela, razem z 15 px wewnętrznego marginesu, który ma bootstrapowy kontener sklepu. */ #CmContent{max-width:1480px;margin-left:auto;margin-right:auto; padding-left:15px;padding-right:15px;box-sizing:border-box;} /* ── 2. KRÓJ JAK W SKLEPIE ─────────────────────────────────────────────────── Sklep: nagłówki Inter 700, treść Barlow. Treść dostaje krój przez `--cm-text-family` wyżej, nagłówki domykamy wprost. */ #CmContent h1,#CmContent h2,#CmContent h3, #CmContent [class*="Title"]{ font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;} /* ── 3. KONIEC Z GRADIENTAMI ───────────────────────────────────────────────── CARMOD tłucze karty skosem `linear-gradient(330deg,#e9e9e9,#fbfbfb)`, obcym w naszym sklepie (wszystkie karty są płaskie, białe, z cienkim obrysem). Gradient siedzi DOKŁADNIE w trzech miejscach — sprawdzone `grep`-em: `.CmCarInfoOverviewGrid > *` (info.css), `.CmCarInfoQuickMore` (top.css) i `.CmSctFx` (sections.css). Tylko je spłaszczamy. 🔴 UWAGA NA `.CmSctFx` — to NIE jest nakładka połysku, tylko `
` z KAFLEM KATEGORII („Układ hamulcowy" itd.). Przy pierwszym podejściu dałem mu `display:none` i wyciąłem całą sekcję „Wszystkie kategorie". Ma być spłaszczony, nie ukryty. 🔴 I NIE dopisujemy tu `.CmCarInfoFluidCard` ani `.CmCarInfoPopularItem` — one gradientu nie mają, a `background:#fff!important` psuło im najechanie (patrz punkt 5). 🔴 `!important` NIE jest tu ozdobą: `top.css` CARMOD-a ładuje się PO naszym arkuszu — sprawdzone w przeglądarce: `.CmSctFx` z `sections.css` nam ulegał, a `.CmCarInfoQuickMore` z `top.css` NIE i został z gradientem. Selektory mają identyczną wagę, więc bez `!important` przegrywamy samą kolejnością. */ #CmContent .CmCarInfoOverviewGrid > *, #CmContent .CmCarInfoQuickMore, #CmContent .CmSctFx{ background-image:none!important; background-color:#fff!important; border:1px solid #e2e5e9!important; box-shadow:none!important; border-radius:12px!important; } /* Najechanie zostawiamy zgodne z zamysłem CARMOD-a (delikatne przygaszenie), tylko na naszej palecie — inaczej `!important` wyżej zabiłoby je całkiem. */ #CmContent .CmCarInfoQuickMore:hover, #CmContent .CmCarInfoQuickMore:focus-visible{ background-color:#f2f4f6!important;border-color:#c3c9d0!important;} #CmContent .CmSctFx:hover, #CmContent .CmCarInfoPopularItem:hover{border-color:#c3c9d0!important;} /* ── 4. PŁYNY: SIATKA PŁYNNA, NIE SZTYWNA ──────────────────────────────────── `.CmCarInfoFluidsBody` ma `repeat(auto-fit,minmax(210px,320px))` z `justify-content:start` — przy czterech płynach zostawiało dziurę z prawej, a przy dłuższych nazwach („Płyn wspomagania kierownicy WSS-M2C204-A") treść wychodziła poza kartę. Karty mają się rozkładać równo i zwężać. */ #CmContent .CmCarInfoFluidsBody{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important; gap:12px!important;} #CmContent .CmCarInfoFluidCard{min-width:0!important;padding:14px!important;} #CmContent .CmCarInfoFluidCard .CmCarInfoFluidContent{min-width:0;overflow-wrap:anywhere;} /* Pojemność („7 l") ma `line-height:1`, przez co „l" siadało na krawędzi. */ #CmContent .CmCarInfoFluidVolume{line-height:1.15!important;} /* ── 5. NAJECHANIE NA KARTĘ PŁYNU ──────────────────────────────────────────── 🔴 TU BYŁ BIAŁY TEKST NA BIAŁYM. CARMOD na `:hover` maluje kartę na `var(--cm-main)` i CAŁY tekst oraz ikonę na biało. Moje wcześniejsze `background:#fff!important` zatrzymywało tło białe, ale białego tekstu już nie cofało — po najechaniu karta robiła się pusta. Teraz zmienna jest zdefiniowana (nasz atrament), więc najechanie działa tak, jak zaprojektowano: ciemna karta, biały tekst. Zostawiamy tylko wyciszenie skoku i połysku. */ #CmContent .CmCarInfoFluidCard{transform:none!important;} #CmContent .CmCarInfoFluidCard:hover{box-shadow:0 6px 14px rgba(17,19,24,.14)!important;} #CmContent .CmCarInfoFluidCard::before{display:none!important;} /* ── 6. SELEKTOR NA TEJ STRONIE JEST ZBĘDNY ────────────────────────────────── Pojazd jest tu wybrany i wypisany w tytule — selektor tylko powtarza to, co klient już zrobił, a przy tym wchodzi w oczy skórką CARMOD-a. Zmiana auta idzie przez wyszukiwarkę i kartę produktu. */ #CmContent .CmMSelectBlock{display:none!important;} /* ── 7. MOBILNIE ───────────────────────────────────────────────────────────── 🔴 Zmierzone przy 390 px: strona przewijała się w bok (scrollWidth 863). Winowajca: `.CmCarInfoOverviewGrid` ma SZTYWNE `165px 260px 190px 190px`. Nazwy klas wzięte z DOM-u, nie zgadywane. */ @media (max-width:1000px){ #CmContent{padding-left:12px;padding-right:12px;} #CmContent .CmCarInfoOverviewGrid{grid-template-columns:1fr 1fr!important;} } @media (max-width:760px){ #CmContent .CmCarInfoOverviewGrid{grid-template-columns:1fr!important;gap:10px!important;} #CmContent .CmCarInfoBodyCard, #CmContent .CmCarInfoVariants, #CmContent .CmCarInfoEngineCard, #CmContent .CmCarInfoTyreCard{width:auto!important;min-width:0!important;} #CmContent .CmCarInfoEngineCard, #CmContent .CmCarInfoTyreCard{grid-template-columns:38px minmax(0,1fr)!important;} /* Wiersz wariantu: nazwa i moc w pierwszej linii, rocznik i kod pod spodem. 🔴 Każdy element MUSI dostać jawny wiersz i kolumnę, inaczej automatyczne rozmieszczanie wrzuca je na jedną linię i napisy nachodzą. 🔴 I najważniejsze: wiersz jest elementem FLEXA w pionowej liście, więc bez `flex:0 0 auto` jest ŚCISKANY do 20 px przy 63 px treści. */ #CmContent .CmCarInfoVariant{grid-template-columns:minmax(0,1fr) auto!important; gap:3px 10px!important;align-items:baseline; height:auto!important;min-height:0!important;padding:9px 12px!important; flex:0 0 auto!important;} #CmContent .CmCarInfoVariantName{grid-column:1!important;grid-row:1!important;font-size:14.5px;} #CmContent .CmCarInfoVariantPower{grid-column:2!important;grid-row:1!important; white-space:nowrap;font-size:13px;} #CmContent .CmCarInfoVariantYears{grid-column:1!important;grid-row:2!important; font-size:12.5px;color:#68707c;} #CmContent .CmCarInfoVariantEngine{grid-column:2!important;grid-row:2!important; font-size:12.5px;color:#68707c;text-align:right;white-space:nowrap;} #CmContent .CmCarInfoVariantsList{max-height:260px!important;height:auto!important;} #CmContent .CmCarInfoCatalogLayout{display:block!important;} #CmContent .CmCarInfoCatalogMain{margin-top:14px;} #CmContent img{height:auto;} } @media (max-width:420px){ #CmContent{padding-left:10px;padding-right:10px;} #CmContent h1{font-size:20px;line-height:1.25;} } /* ── 8. PANEL PODKATEGORII ─────────────────────────────────────────────────── Rozwijana lista pod kaflem ma u CARMOD-a `background:rgba(255,255,255,.9)`, więc przez pierwsze pozycje prześwituje zdjęcie kategorii i tekst się gubi. Zamykamy na pełną biel z naszym cieniem. */ #CmContent .CmSctSubs{background:#fff!important; border:1px solid #e2e5e9!important; box-shadow:0 10px 24px rgba(17,19,24,.18)!important;} /* ── 9. NAGŁÓWEK MODELU NA WĄSKIM EKRANIE ──────────────────────────────────── 🔴 Zmierzone w ramce 390 px: `template.css` (linia 106) przykuwa `h1` do JEDNEJ linii — `height:1.18em!important`, `white-space:nowrap!important`, `overflow:hidden` + wielokropek. Na desktopie tytuł się mieści, na telefonie z 553 px treści w 351 px zostawało „VOLVO S80 II, 4.4 V8 AWD (124) S…", czyli klient nie widzi ani nadwozia, ani rocznika, ani kodu silnika. Selektory muszą być te same co u nich, inaczej `!important` nie ustąpi. */ @media (max-width:760px){ #CmContent .CmCarInfoTitleWrap h1, #CmContent:has(.CmCarInfo) > .CmBrTitleSearchWrap h1{ height:auto!important;max-height:none!important; overflow:visible!important;white-space:normal!important; text-overflow:clip!important;} } /* Waga nagłówka jak w sklepie (kategoria i karta produktu mają 700). */ #CmContent h1,#CmContent .CmCarInfoTitleWrap h1{font-weight:700!important;} /* ── 10. POJEMNOŚĆ PŁYNU MA BYĆ CZYTELNA ───────────────────────────────────── 🔴 Zmierzone: „7 l" to liczba 16 px + `` 11 px, odstęp 1 px, całość 12 px szerokości. Jednostka „l" wychodziła na 3 px — klient widzi „7" i kreskę, i nie wie, ile oleju wchodzi. Nie było ucięcia przez `overflow`, tylko nieczytelny rozmiar. Powiększamy liczbę i jednostkę, dokładamy odstęp. */ #CmContent .CmCarInfoFluidVolume{ max-width:56px!important; font-size:18px!important; gap:2px!important; letter-spacing:-.2px;} #CmContent .CmCarInfoFluidVolume small{ font-size:13px!important; font-weight:700!important; /* 🔴 Sama mała litera „l" ma 3 px szerokości przy KAŻDYM rozmiarze — klient widzi „7" i kreskę. Wielkie „L" jest jednoznaczne i tak się to zapisuje w motoryzacji („7 L"). */ text-transform:uppercase;}