# KPLS — nowa wersja serwisu (koncepcja „Ink & Brass”) Odświeżona warstwa wizualna i układ serwisu **kpls.pl**. Treść merytoryczna została zachowana 1:1 z obecnego serwisu (opisy specjalizacji, teksty SEO, biogramy zespołu, dane kontaktowe, 78 wpisów bazy wiedzy) — zmieniła się wyłącznie forma prezentacji. ## Koncepcja stylistyczna | Element | Decyzja | |---|---| | Paleta | atramentowy grafit `#101418` · ciepły papier `#f7f4ef` · mosiądz `#b08a4e` · piaskowy `#ebe4d8` | | Typografia | nagłówki — **Fraunces** (szeryfowa, redakcyjna); tekst — **Inter** | | Charakter | editorial: dużo światła, włoskowate linie zamiast cieni, numeracja `01–09`, akcent mosiądzu jako jedyny kolor sygnałowy | | Nagłówek | przyklejony (sticky), półprzezroczysty z blur; mega-menu „Zakres usług” z 9 specjalizacjami; na mobile pełnoekranowy drawer z akordeonem | | Hero | ciemny panel z subtelną siatką i poświatą, karta „Kancelaria w liczbach” (2004 / 09 / 3 języki) | | Sekcje treści | dwukolumnowy układ: kolumna tekstu (max 70 znaków w wierszu) + przyklejony panel kontaktowy i nawigacja po specjalizacjach | | Detale | mosiężne wypunktowania, cytaty blokowe, `callout`, wyróżnienia `strong` z podkreśleniem tłem | Wszystkie widoki są responsywne (breakpointy 1080 / 980 / 900 / 620 px), obsługują `prefers-reduced-motion`, mają skip-link, focus-visible i poprawną strukturę nagłówków. ## Struktura plików — jeden plik HTML na widok z menu | Plik | Widok | |---|---| | `index.html` | Strona główna | | `zespol.html` | Zespół | | `oferta.html` | Zakres usług (przegląd 9 specjalizacji) | | `prawo-gospodarcze.html` | Prawo gospodarcze | | `prawo-cywilne.html` | Prawo cywilne | | `prawo-pracy.html` | Prawo pracy | | `prawo-rodzinne.html` | Prawo rodzinne | | `prawo-administracyjne.html` | Prawo administracyjne | | `prawo-podatkowe.html` | Prawo podatkowe | | `prawo-wlasnosci-intelektualnej-i-przemyslowej.html` | Prawo własności intelektualnej i przemysłowej | | `prawo-spolek-handlowych.html` | Prawo spółek handlowych | | `prawo-upadlosciowe-i-naprawcze.html` | Prawo upadłościowe i naprawcze | | `kariera.html` | Kariera | | `baza-wiedzy.html` | Baza wiedzy (78 wpisów + wyszukiwarka na żywo) | | `kontakt.html` | Kontakt (dane, plan dojazdu, formularz) | Zasoby wspólne: - `assets/css/style.css` — cały system wizualny (tokeny, komponenty, RWD) - `assets/js/main.js` — menu mobilne, akordeon, animacje wejścia, filtr bazy wiedzy, walidacja formularza ## Uwagi wdrożeniowe 1. **Formularze** działają wyłącznie po stronie front-endu (`data-demo` w `
`). Do wysyłki trzeba podłączyć obsługę serwerową (np. `kontakt.php`) — usunąć atrybut `data-demo`, dodać `action`/`method` oraz zabezpieczenie antyspamowe i klauzulę RODO. 2. **Wpisy bazy wiedzy** linkują do istniejących adresów `*.php`, więc po wdrożeniu na serwerze prowadzą do obecnych artykułów bez przekierowań. 3. **Nazwy plików** widoków zmieniły się w dwóch przypadkach: `radca-prawny-poznan.php` → `zespol.html`, `kancelaria-prawna-kontakt.php` → `kontakt.html`, `blog.php` → `baza-wiedzy.html`. Przy wdrożeniu warto zachować dotychczasowe adresy (lub ustawić przekierowania 301), żeby nie stracić pozycji w wyszukiwarce. 4. **Favikony i manifest** wskazują na pliki w katalogu głównym serwera (jak w obecnym serwisie). 5. **Fonty** ładowane z Google Fonts; przy hostowaniu lokalnym wystarczy podmienić `` w ``. 6. Brak zdjęć — układ celowo opiera się na typografii i monogramach. Po dostarczeniu fotografii zespołu wystarczy podmienić element `.mono` w `zespol.html` na ``. ## Regeneracja widoków Widoki powstają z jednego generatora (wspólny nagłówek, stopka, formularz): ```bash python3 _build/build.py ``` Treść podstron znajduje się w `_build/build.py` (słownik `AREA_PAGES`, lista `TEAM`), a wpisy bloga w `_build/blog.json`.