/* Theme Name: Zajkowska Color Boss Theme URI: https://zajkowskacolorboss.pl Author: Grey Creative Author URI: https://greycreative.pl Description: Elegancki motyw landing page dla analityczki kolorystycznej Color Boss. Zbudowany na bazie projektu Stitch z paletą Material Design 3 (terracotta rose, warm gold, sage green) i typografią Playfair Display + DM Sans. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: colorboss Tags: landing-page, business, custom-colors, custom-menu, featured-images */ /* Tailwind (CDN) obsługuje warstwę utility. Poniżej tylko dopełnienia, których nie da się wygodnie wyrazić klasami utility. */ /* Material Symbols — pełna definicja klasy (subset przez icon_names pomija font-family/liga w CSS Google'a, przez co ikony renderują się jako tekst). font-size celowo pominięty, żeby nie nadpisywać utility text-* na ikonach. */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* === Motion (Emil Kowalski: mocne krzywe, wejścia ease-out, <300ms) === */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* Scroll-reveal jako progresywne ulepszenie: treść jest widoczna domyślnie; stan początkowy chowamy TYLKO gdy działa JS (klasa .has-js na ), więc bez JS nic nie znika. */ .has-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); will-change: opacity, transform; } .has-js [data-reveal].is-revealed { opacity: 1; transform: none; } /* Stagger dzieci siatki — kolejne elementy wchodzą z lekkim opóźnieniem */ .has-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .has-js [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } .has-js [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.08s; } .has-js [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.16s; } .has-js [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.24s; } /* Tactile feedback przycisków: szybki, ease-out, konkretne właściwości (nie `all`) */ .cb-cta { transition: transform 0.12s var(--ease-out), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .cb-cta:active { transform: scale(0.97); } html { scroll-behavior: smooth; } /* Offset dla kotwic — stały pasek nawigacji ma wysokość 80px (h-20) */ section[id] { scroll-margin-top: 6rem; } /* Nagłówki: równe linie + brak przepełnienia długich słów na wąskich ekranach */ h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; } .entry-content p { text-wrap: pretty; } /* Widoczny fokus klawiatury dla odnośników bez własnego stylu focus-visible */ a:focus-visible, button:focus-visible { outline: 2px solid #AD4E39; outline-offset: 2px; border-radius: 2px; } /* Szacunek dla preferencji ograniczonego ruchu (WCAG 2.3.3 / dobre praktyki) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Reveal: pokaż treść natychmiast, bez przesunięć */ .has-js [data-reveal], .has-js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } } body { background-color: #fff8f5; color: #1e1b19; } /* Treść artykułu (single / page) */ .entry-content { font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.8; color: #524341; } .entry-content h2, .entry-content h3 { font-family: 'Playfair Display', serif; color: #2B2826; margin: 1.5em 0 0.5em; } .entry-content h2 { font-size: 32px; } .entry-content h3 { font-size: 24px; } .entry-content p { margin-bottom: 1.25em; } .entry-content a { color: #E8A598; text-decoration: underline; } .entry-content img { border-radius: 0.5rem; } .entry-content blockquote { border-left: 2px solid #E8A598; padding-left: 1rem; font-style: italic; color: #865046; margin: 1.5em 0; } /* WordPress core alignment / caption helpers */ .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption-text { font-size: 0.85rem; color: #847370; text-align: center; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } /* Paginacja */ .pagination { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .pagination .page-numbers { padding: 0.5rem 0.9rem; border: 1px solid #d7c2be; border-radius: 0.25rem; color: #524341; text-decoration: none; transition: all .2s; } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: #E8A598; color: #fff; border-color: #E8A598; }