/* szablony_firmy.css — cztery układy strony firmowej. Wspólny dla osiedlo.pl i otoauta.pl. * Utworzone 2026-08-03. * * JEDEN MARKUP, CZTERY UKŁADY. Szablon zmienia wyłącznie klasę na ; resztę robi * ten arkusz. Cztery osobne pliki HTML znaczyłyby, że każda poprawka musi trafić * w cztery miejsca — a po kwartale trafia w dwa i nikt tego nie zauważa, bo pozostałe * ogląda garstka firm. Ten projekt ma już taką historię: catalog.js istniał w trzech * kopiach z nagłówkiem „WSPÓLNY". * * PRACUJEMY NA ISTNIEJĄCYCH KLASACH STRON (dlr-*), a nie na wymyślonych. * Sprawdzone w komis.html i agencja.html — oba portale używają tego samego zestawu: * .dlr-cover zdjęcie tła .dlr-head nagłówek z logo i nazwą * .dlr-side kolumna boczna .dlr-grid siatka ofert * #dlrAbout opis firmy .dlr-card pojedynczy kafel * Wersja pierwsza celowała w klasy `.firma-*`, których na tych stronach nie ma — * klasa szablonu trafiała na , a wygląd nie zmieniał się ani o piksel. */ /* ── 1. KLASYCZNY — układ wyjściowy stron; nie nadpisujemy niczego ───────── */ /* (brak reguł celowo — to stan bazowy, każda dodatkowa reguła byłaby długiem) */ /* ── 2. GALERIA — duże zdjęcie, duże kafle, opis wyśrodkowany ───────────── */ .firma-tpl--galeria .dlr-cover{min-height:420px} .firma-tpl--galeria .dlr-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr)) !important;gap:22px} .firma-tpl--galeria .dlr-card img, .firma-tpl--galeria .dlr-card picture{aspect-ratio:4/3;object-fit:cover;width:100%} .firma-tpl--galeria #dlrAbout{max-width:760px;margin-left:auto;margin-right:auto;text-align:center} .firma-tpl--galeria .dlr-head__card{text-align:center} /* ── 3. WIZYTÓWKA — krótka strona dla agenta pracującego samodzielnie ───── */ .firma-tpl--wizytowka .dlr-cover{min-height:150px} .firma-tpl--wizytowka .dlr-grid{grid-template-columns:1fr !important;gap:12px;max-width:640px} /* Najwyżej sześć ofert: mała firma nie ma czym zapełnić długiej listy, a pusta strona wygląda gorzej niż krótka. */ .firma-tpl--wizytowka .dlr-grid > .dlr-card:nth-child(n+7){display:none} .firma-tpl--wizytowka .dlr-side{max-width:640px} .firma-tpl--wizytowka #dlrAbout{max-width:640px} /* ── 4. MAGAZYN — oferty pierwsze, gęsta siatka, opis na dole ───────────── */ .firma-tpl--magazyn .dlr-cover{min-height:120px} .firma-tpl--magazyn .dlr-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;gap:10px} .firma-tpl--magazyn .dlr-card{font-size:.9rem} /* BEZ `order` — i to jest wynik pomiaru, nie ostrożności. Pierwsza wersja przestawiała kolejność, licząc na kontener `.dlr-main`. Takiego elementu na tych stronach NIE MA, a rodzicem siatki jest układ dwukolumnowy `treść | kolumna boczna 320px`. `order` przeniósł więc siatkę ofert w slot kolumny bocznej: zmierzone 858px → 320px szerokości i jedna kolumna zamiast gęstej siatki. Zamiast walczyć z cudzym układem, zagęszczamy to, co jest — efekt „magazynu" bierze się z rozmiaru kafli, nie z kolejności sekcji. */ .firma-tpl--magazyn #dlrAbout{font-size:.92rem;opacity:.9} /* ── Motywy ────────────────────────────────────────────────────────────── `auto` nie ustawia niczego — strona idzie za ustawieniem urządzenia gościa. Dwa pozostałe wymuszają wygląd, bo firma bywa przygotowana pod jedno tło. */ .firma-motyw--jasny{--surface:#fff;--text-primary:#1a1d21;--text-secondary:#667085; --border-color:#e4e7ec;background:#fff;color:#1a1d21;color-scheme:light} .firma-motyw--ciemny{--surface:#17191d;--text-primary:#e8eaed;--text-secondary:#9aa1ac; --border-color:#2c3038;background:#0f1115;color:#e8eaed;color-scheme:dark} /* Telefon: każdy szablon schodzi do jednej kolumny. Dwie kolumny na ekranie 360 px dają 160 px na ofertę — zdjęcie samochodu przestaje być rozpoznawalne. */ @media (max-width:640px){ .firma-tpl--galeria .dlr-grid, .firma-tpl--magazyn .dlr-grid{grid-template-columns:1fr !important} .firma-tpl--galeria .dlr-cover{min-height:220px} } @media (prefers-reduced-motion:reduce){ [class*="firma-tpl--"] *{transition:none !important;animation:none !important} }