/* ============================================================ SPIS TREŚCI - custom.css (style projektowe, ostateczność po Tailwindzie) 1. PAGINACJA 2. SLIDERY SWIPER (pagination bullets + marquee) 3. FORMULARZ KONTAKTOWY (telefon, checkbox/input focus) 4. AKTYWNE MENU 5. SCROLL HEADER (kurczenie paska i logo po przewinięciu) 6. CZCIONKI LOKALNE (wzorzec @font-face, zakomentowany) 7. TREŚCI PRAWNE (.legalContent - typografia bloków core w legal-section) 8. TREŚĆ WPISU (.postContent - typografia treści artykułu bloga) 9. GLOBALNE (scroll-margin kotwic pod fixed headerem, ::selection) ------------------------------------------------------------ Kolory: to STARTER - nie hardcodujemy tu barw klienta. Miejsca oznaczone „TODO kolor projektu" podmień na token z panelu Design PG (albo klasę TW na elemencie). Domyślnie zostawiamy neutralny czarny / currentColor. Tailwind-first: jeśli styl da się zapisać klasą TW - rób to na elemencie, nie tutaj. custom.css jest dla Swiper, pseudo-elementów i styli wtyczek. Kontener strony: klasa „max-w-site" (1324px) to NATYWNA klasa Tailwinda - zdefiniowana w custom config kompilatora PG (--container-site), nie tutaj. Więcej: CLAUDE.md. ============================================================ */ /* === 1. PAGINACJA === */ .paginationBttn.disabled{ color: color-mix(in srgb, var(--color-brand_dark) 25%, transparent); border-color: color-mix(in srgb, var(--color-brand_dark) 25%, transparent); pointer-events: none; } .paginationBttn.disabled svg path{ stroke: color-mix(in srgb, var(--color-brand_dark) 25%, transparent); } /* === 2. SLIDERY SWIPER (pagination bullets + marquee) === */ .swiper-pagination-bullet { width: 12px; height: 12px; background: #000; opacity: 0.3; } .swiper-pagination-bullet-active { background: #000; /* TODO kolor projektu (akcent aktywnej kropki) */ opacity: 1; } /* Ciągły marquee (.autoSlider) - liniowy ruch bez easingu. Nowa instancja z własną klasą (np. .logosSlider) potrzebuje analogicznej reguły timing-function na SWOJEJ klasie, nie polega na dziedziczeniu po innej. */ .autoSlider .swiper-wrapper { transition-timing-function: linear; } /* Przy slidesPerView: 'auto' slajd bez tej reguły spada do 100% szerokości kontenera (jeden slajd na ekran zamiast paska). */ .autoSlider .swiper-slide { width: auto; } /* === 3. FORMULARZ KONTAKTOWY === */ /* Telefon (wtyczka intl-tel-input) */ .selected-flag{ border-radius: 12px 0 0 12px; background-color: #fff !important; border-right: 1px solid #000; } .flag-container{ top: 15px !important; bottom: 15px !important; } .selected-dial-code{ font-size: 14px; } /* Checkbox, input, textarea - [checked] [focus]. currentColor = element dziedziczy kolor akcentu (ustaw klasą TW text-[...] na formularzu albo podmień na token projektu). */ textarea:focus, input:focus { border: 1px solid currentColor !important; /* TODO kolor projektu */ --tw-ring-color: currentColor !important; --tw-ring-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2) !important; } input[type="checkbox"] { color: currentColor; /* TODO kolor projektu */ } input[type="checkbox"]:focus { --tw-ring-shadow: none !important; --tw-ring-offset-shadow: none !important; } input[type="checkbox"]:checked { background-color: currentColor; /* TODO kolor projektu */ border: 1px solid currentColor; --tw-ring-shadow: none !important; --tw-ring-offset-shadow: none !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'> 50px. W tym projekcie header się wtedy kurczy: logo 92 -> 52 px, pasek 24 -> 12 px paddingu (jak w designie). Spacer pod headerem trzyma wysokość początkową (--header-height), więc treść nie podskakuje. Wysokości poza scrollem ustawiają klasy TW na elementach .headerBar/.headerLogo. */ .header-scrolled .headerBar { padding-top: 12px; padding-bottom: 12px; } .header-scrolled .headerLogo { height: 52px; } /* === 6. CZCIONKI LOKALNE === */ /* Font z pliku (woff2) zamiast Google Fonts. Dwa kroki: 1) zadeklaruj @font-face tutaj (plik w assets/fonts/), 2) dodaj rodzinę jako token w panelu Design PG (font family) - inaczej klasa `font-nazwa` w Tailwindzie nie istnieje i nie zadziała. Wzorzec: @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-variable.woff2') format('woff2'); font-weight: 300 800; font-display: swap; } */ /* === 7. TREŚCI PRAWNE (.legalContent) === */ /* Blok legal-section (regulamin, polityka prywatności, obowiązek informacyjny). Klient wkleja w strefę InnerContent zwykłe bloki core (nagłówki, akapity, listy), a te nie mają własnych styli (preflight je zeruje) - typografię daje ta sekcja. Kolory przez tokeny palety (po podmianie palety w projekcie sekcja sama wpada w kolorystykę), bez hexów konkretnego projektu. */ .legalContent h2 { margin: 2rem 0 0.75rem; font-size: 1.375rem; font-weight: 700; line-height: 1.3; } .legalContent h3 { margin: 1.5rem 0 0.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1.35; } .legalContent p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; } .legalContent ul, .legalContent ol { margin: 0 0 1rem; padding-left: 1.5rem; line-height: 1.7; } .legalContent ul { list-style: disc; } .legalContent ol { list-style: decimal; } .legalContent li { margin-bottom: 0.375rem; } .legalContent a { color: var(--color-pinkPrimary-500); text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s; } .legalContent a:hover { color: var(--color-pinkPrimary-600); } /* === 8. TREŚĆ WPISU (.postContent) === */ /* Treść artykułu z edytora (bloki core w single.php i w bloku artykułu). Typografia 1:1 z designem: akapit 19px/1.7, śródtytuły wagą 800, cytat z pomarańczową belką. Kolory z tokenów palety. */ /* Rytm treści robi grid z gap, tak jak w designie (`display:grid;gap:22px`). Marginesowa wersja (`> * + *`) przegrywała specyficznością z `.postContent p { margin: 0 }` i artykuł renderował się bez odstępów między akapitami. Pusty akapit z edytora (Enter bez tekstu) ma wysokość 0, ale zajmuje wiersz siatki, więc dokłada jeden gap. */ .postContent { display: grid; gap: 1.375rem; } .postContent p { margin: 0; font-size: 1.1875rem; line-height: 1.7; } .postContent h2 { margin: 1.125rem 0 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; } .postContent h3 { margin: 0.75rem 0 0; font-size: 1.4375rem; font-weight: 800; line-height: 1.25; } .postContent ul, .postContent ol { margin: 0; padding-left: 1.5rem; font-size: 1.1875rem; line-height: 1.7; } .postContent ul { list-style: disc; } .postContent ol { list-style: decimal; } .postContent li + li { margin-top: 0.375rem; } .postContent blockquote { margin: 0; padding: 1.625rem 1.875rem; background: #fff; border: 2px solid var(--color-brand_dark); border-left: 10px solid var(--color-accent-500); border-radius: 0 18px 18px 0; font-size: 1.3125rem; line-height: 1.55; font-weight: 700; } .postContent blockquote p { font-size: inherit; line-height: inherit; } .postContent img { border-radius: 18px; } .postContent figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: color-mix(in srgb, var(--color-brand_dark) 70%, transparent); } .postContent a { color: var(--color-bluePrimary-600); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s; } .postContent a:hover { color: var(--color-pinkPrimary-500); } .postContent strong { font-weight: 700; } /* === 9. GLOBALNE (kotwice, zaznaczenie tekstu) === */ /* Kotwice: element z id nie może chować się pod fixed headerem. Wysokość headera zna custom.js (--header-height), 90px to fallback bez JS. */ [id] { scroll-margin-top: calc(var(--header-height, 90px) + 1rem); } ::selection { background: var(--color-accent-500); color: var(--color-brand_dark); }