/* ==========================================================================
SKANDOM — MOTYW JASNY („Ljust läge")
--------------------------------------------------------------------------
Domyślny jest motyw CIEMNY — w całości opisany w style.css, pages.css
i konfigurator.css, które NIE wiedzą nic o motywie jasnym. Ten plik zawiera
WYŁĄCZNIE nadpisania dla motywu jasnego i jest ładowany jako OSTATNI arkusz
każdej strony (fragment _partials/theme-css.html wstrzykiwany przez build.js).
Jak to działa
1. Stan: . Ustawia go skrypt z
_partials/theme-init.html (w , przed arkuszami — bez mignięcia):
?theme=light|dark w adresie (zapisuje wybór) → localStorage
'skandom.theme' → domyślnie ciemny (ustawienia systemu są ignorowane).
2. Tokeny (sekcja 0.1): w motywie jasnym tokeny „ciemne" (--bg-dark,
--ink-on-dark, --muted-on-dark, --hairline-dark, --bg-dark-2,
--brand-bright) dostają jasne odpowiedniki, więc KAŻDE ciemne pasmo
przechodzi na jasne bez osobnej reguły. Tokeny jasnych sekcji
(--bg-light, --ink-on-light, --brand-deep…) i --brand się NIE zmieniają.
3. Wyspy ciemne (sekcja 0.2): kontenery, w których tekst leży na zdjęciu,
filmie albo canvasie, przywracają oryginalne wartości ciemne — ich
wnętrze wygląda dokładnie jak dziś. Nowa wyspa: dopisz selektor do
listy w 0.2 (rdzeń) albo dodaj w HTML atrybut data-theme-island.
4. Nadpisania kolorów wpisanych „na sztywno" (oklch(1 0 0 / …) itp.)
piszemy w sekcji właściwej dla obszaru. Jeżeli komponent występuje
i na jasnym paśmie, i w wyspie — kolor podajemy przez token --th-*
zadeklarowany w :root (wartość jasna) oraz w wyspach (wartość ciemna).
Zasady pisania reguł
- KAŻDA reguła zaczyna się od :root[data-theme="light"] (także w @media).
- Ciemny tekst na khaki: zawsze var(--on-brand), nigdy var(--bg-dark)
(--bg-dark jest tu JASNYM tłem pasma!).
- --brand-bright to w motywie jasnym ciemne khaki do TEKSTU; jako tło
przycisku khaki na hover użyj var(--dark-fixed-brand-bright).
- Kontrast: tekst ≥ 4,5:1 (duży ≥ 3:1), obrysy kontrolek ≥ 3:1 (WCAG 2.1 AA).
Wyłączenie motywu jasnego (powrót do dzisiejszej strony 1:1)
1. opróżnij _partials/theme-css.html (znika do tego pliku),
2. usuń dwa przyciski [data-theme-toggle] z _partials/header.html,
3. (opcjonalnie) opróżnij _partials/theme-init.html,
4. uruchom: node build.js
========================================================================== */
/* === 0. Rdzeń: tokeny, wyspy ciemne, nagłówek, menu mobilne, stopka, przyciski, formularze (core) === */
/* ---------- 0.1 Tokeny ---------- */
:root[data-theme="light"] {
color-scheme: light;
/* Oryginalne wartości motywu ciemnego — dla wysp ciemnych (0.2) i miejsc,
które w obu motywach muszą wyglądać tak samo */
--dark-fixed-bg: oklch(0.22 0.012 220);
--dark-fixed-bg-2: oklch(0.26 0.012 220);
--dark-fixed-ink: oklch(0.96 0.006 102);
--dark-fixed-muted: oklch(0.8 0.018 102);
--dark-fixed-hairline: oklch(1 0 0 / 0.12);
--dark-fixed-brand-bright: oklch(0.68 0.04 102);
/* Paleta jasna (kontrasty policzone dla tekstu 16 px) */
--light-band: oklch(0.895 0.018 100); /* dawne ciemne pasma: ciepły piasek */
--light-band-deep: oklch(0.87 0.02 100); /* stopka — domyka stronę */
--light-raised: oklch(0.985 0.004 102); /* submenu, dymki, karty uniesione */
--light-ink: oklch(0.24 0.012 220); /* tekst: 12:1 na piasku, 14,8:1 na --bg-light */
--light-muted: oklch(0.42 0.014 220); /* drugorzędny: 6,2:1 na piasku, 5,7:1 w stopce */
--light-accent: oklch(0.45 0.045 102); /* khaki jako TEKST: 5,4:1 na piasku, 7,1:1 na bieli */
--light-hairline: oklch(0.24 0.012 220 / 0.16);
/* Niezależne od motywu */
--on-brand: oklch(0.22 0.012 220); /* ciemny tekst na khaki (przyciski, plakietki), ~4,7:1 */
/* Przemapowanie tokenów „ciemnych" — ciemne pasma stają się jasne */
--bg-dark: var(--light-band);
--bg-dark-2: var(--light-raised);
--ink-on-dark: var(--light-ink);
--muted-on-dark: var(--light-muted);
--hairline-dark: var(--light-hairline);
--brand-bright: var(--light-accent);
/* Tokeny semantyczne rdzenia (wyspy przywracają im wartości ciemne) */
--focus-ring: var(--brand-deep); /* 5,6:1 na bieli, 4,5:1 na piasku */
--th-ghost-border: oklch(0.24 0.012 220 / 0.55); /* obrys kontrolki ≥ 3:1: 3,4 piasek, 3,3 stopka, 3,6 --bg-light */
--th-ghost-bg: transparent;
--th-ghost-bg-hover: oklch(0.24 0.012 220 / 0.05);
}
/* ---------- 0.2 Wyspy ciemne ----------
Wnętrze wyspy wygląda jak w motywie ciemnym. :where() zeruje specyficzność
listy — reguła obszaru może wyspę nadpisać bez walki o specyficzność.
Nowa wyspa bez zmiany tej listy: atrybut data-theme-island w HTML
albo skopiuj ten blok deklaracji do swojej sekcji z własnym selektorem. */
:root[data-theme="light"] :where(
/* strona główna: film na canvasie i sekcje nad nim */
#scroll-container, .canvas-wrap, #dark-overlay, .marquee-wrap, .intro-line,
/* tekst na zdjęciach / odtwarzacze */
.carousel-card, .fc-card, .yt-media, .tech-media, .real-tile,
.page-hero:has(> .page-hero-media), .split-figure, .gallery-item, .lightbox,
/* konfigurator: scena z podglądem */
.konf-preview,
[data-theme-island]
) {
--bg-dark: var(--dark-fixed-bg);
--bg-dark-2: var(--dark-fixed-bg-2);
--ink-on-dark: var(--dark-fixed-ink);
--muted-on-dark: var(--dark-fixed-muted);
--hairline-dark: var(--dark-fixed-hairline);
--brand-bright: var(--dark-fixed-brand-bright);
--focus-ring: var(--brand);
--th-ghost-border: oklch(1 0 0 / 0.4);
--th-ghost-bg: oklch(0.13 0.01 220 / 0.22);
--th-ghost-bg-hover: oklch(0.13 0.01 220 / 0.34);
}
/* ---------- 0.3 Podstawy: zaznaczenie, fokus, loader ---------- */
:root[data-theme="light"] ::selection { color: var(--on-brand); }
/* Pierścień fokusu: ciemne khaki na jasnym (≥ 4,5:1), khaki w wyspach */
:root[data-theme="light"] :focus-visible { outline-color: var(--focus-ring); }
/* Loader strony głównej: jasny ekran zamiast ciemnego mignięcia */
:root[data-theme="light"] #loader { background: var(--bg-light); color: var(--brand-deep); }
:root[data-theme="light"] .loader-track { background: oklch(0.24 0.012 220 / 0.12); }
/* ---------- 0.4 Nagłówek: pigułka, submenu, dymki, przełącznik ---------- */
:root[data-theme="light"] .nav {
background: oklch(0.985 0.004 102 / 0.92);
border-color: oklch(0.24 0.012 220 / 0.1);
box-shadow: 0 12px 32px -20px oklch(0.2 0.01 220 / 0.4);
transition: box-shadow 300ms ease;
}
/* Nagłówek schowany przy przewijaniu w dół (.is-hidden, translateY(-140%)): cień
pigułki sięgał ~20 px poniżej jej krawędzi i zostawał szarą smugą u góry ekranu.
Gaśnie szybciej (300 ms), niż pigułka wyjeżdża (450 ms); wraca razem z nią. */
:root[data-theme="light"] .site-header.is-hidden .nav {
box-shadow: 0 12px 32px -20px oklch(0.2 0.01 220 / 0);
}
:root[data-theme="light"] .nav-submenu {
border-color: var(--light-hairline);
box-shadow: 0 24px 48px -20px oklch(0.2 0.01 220 / 0.3);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .nav-submenu a:hover { background: oklch(0.24 0.012 220 / 0.05); }
}
/* Dymki: Dziennik budowy (1101–1343 px) i przełącznik motywu */
:root[data-theme="light"] .nav-diary-label,
:root[data-theme="light"] .nav-theme .theme-toggle-label {
border-color: var(--light-hairline);
box-shadow: 0 16px 32px -14px oklch(0.2 0.01 220 / 0.3);
}
/* Przełącznik: stan „jasny" — kółko po prawej pod słońcem, podpis „Ljust läge" */
:root[data-theme="light"] .theme-toggle-track {
border-color: oklch(0.42 0.014 220 / 0.6); /* obrys ≥ 3:1 */
background: oklch(0.24 0.012 220 / 0.05);
}
:root[data-theme="light"] .theme-toggle-thumb {
translate: calc(var(--tt-w) - 2px - 2 * var(--tt-inset) - var(--tt-thumb)) 0;
}
:root[data-theme="light"] .theme-ico-moon { color: var(--muted-on-dark); }
:root[data-theme="light"] .theme-ico-sun { color: var(--on-brand); }
:root[data-theme="light"] .theme-label-dark { display: none; }
:root[data-theme="light"] .theme-label-light { display: inline; }
:root[data-theme="light"] .nav-theme:focus-visible .theme-toggle-track { outline-color: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .theme-toggle:hover .theme-toggle-track { border-color: var(--brand-bright); }
}
/* ---------- 0.5 Menu mobilne ---------- */
/* Pełnoekranowe menu na ciepłej bieli (piasek zostaje dla pasm treści) */
:root[data-theme="light"] .mobile-menu { background: var(--bg-light); }
/* ---------- 0.6 Stopka ---------- */
:root[data-theme="light"] .site-footer { background: var(--light-band-deep); }
:root[data-theme="light"] .footer-brand svg { color: var(--brand-deep); }
:root[data-theme="light"] .footer-social a { border-color: oklch(0.24 0.012 220 / 0.3); }
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .footer-social a:hover,
:root[data-theme="light"] .footer-cta:hover { color: var(--on-brand); }
}
/* ---------- 0.7 Przyciski ---------- */
/* Primary: khaki + ciemny tekst w OBU motywach (decyzja klienta) */
:root[data-theme="light"] .btn-primary { color: var(--on-brand); }
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .btn-primary:hover { background: var(--dark-fixed-brand-bright); }
}
/* Ghost: na jasnym paśmie ciemny obrys; w wyspach (zdjęcia) — jak dziś */
:root[data-theme="light"] :is(.btn-ghost, .btn-ghost-dark) {
border-color: var(--th-ghost-border);
background: var(--th-ghost-bg);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] :is(.btn-ghost, .btn-ghost-dark):hover {
border-color: var(--brand-bright);
background: var(--th-ghost-bg-hover);
}
}
/* ---------- 0.8 Skutki przemapowania --bg-dark: ciemny tekst na khaki ----------
Te komponenty (z różnych obszarów) piszą color: var(--bg-dark) na tle
var(--brand). Po przemapowaniu byłby to jasny tekst na khaki (~1,5:1) —
przywracamy ciemny. Nowe przypadki dopisuj tu albo w swojej sekcji. */
:root[data-theme="light"] :is(
.badge-brand, .fc-chip.is-active, .yt-play, .project-card-area,
.konf-stepper-item.is-active button, .konf-option.is-selected .konf-option-mark
) { color: var(--on-brand); }
:root[data-theme="light"] .feature-carousel:not(.is-live) .fc-chip:first-child { color: var(--on-brand); }
/* ---------- 0.9 Formularze (.field, .choice, .form-status) ----------
Pola na jasnych sekcjach wyglądają jak dotąd. Warianty .section-dark
(formularz na /kontakt, /kariera, /katalog-skandom) dostają wygląd pól
z jasnych sekcji, bo pasmo .section-dark jest teraz jasne. */
:root[data-theme="light"] .section-dark .field :is(input, select, textarea) {
background-color: oklch(1 0 0 / 0.7);
border-color: oklch(0.24 0.012 220 / 0.6); /* obrys pola ≥ 3:1: 3,4:1 na piasku, 4,2:1 wobec wnętrza */
}
/* Fokus jak w polach jasnych sekcji (baza w pages.css): obrys --brand-deep
(4,5:1 na piasku) + pierścień 2 px, spójny z checkboksem i .choice obok.
Dawniej obrys --brand (ta sama jasność co spoczynkowy) i poświata 1,2:1. */
:root[data-theme="light"] .section-dark .field :is(input, select, textarea):focus {
border-color: var(--brand-deep);
box-shadow: none;
}
:root[data-theme="light"] .section-dark .field :is(input, select, textarea):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
:root[data-theme="light"] .section-dark .field :is(input, textarea):user-invalid { border-color: oklch(0.55 0.16 25); }
/* Strzałka jak w polach jasnych sekcji (ciemna zamiast #C7C2B0). Powtarzanie,
pozycja i rozmiar podane jawnie dla odporności na kolejność reguł — w obu
motywach strzałkę rysuje blok „Natywny select" w pages.css (za regułami pól). */
:root[data-theme="light"] .section-dark .field select {
color-scheme: light;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23586165' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
background-size: 0.75rem;
}
:root[data-theme="light"] .section-dark .choice {
border-color: oklch(0.24 0.012 220 / 0.3);
background: oklch(1 0 0 / 0.55);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .section-dark .choice:hover { border-color: var(--brand-bright); }
}
:root[data-theme="light"] .section-dark .choice:has(input:checked) {
border-color: var(--brand-bright);
background: oklch(0.62 0.038 102 / 0.16);
}
:root[data-theme="light"] .choice:has(input:focus-visible) { outline-color: var(--focus-ring); }
/* Pole pliku na piasku: przycisk „Wybierz plik” jak .btn-ghost w motywie jasnym
(0.7) — ciemny obrys ≥ 3:1 zamiast białego z pages.css. Tekst idzie przez tokeny. */
:root[data-theme="light"] .section-dark .field input[type='file']::file-selector-button {
border-color: var(--th-ghost-border);
background: var(--th-ghost-bg);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .section-dark .field input[type='file']:hover::file-selector-button {
background: var(--th-ghost-bg-hover);
}
}
:root[data-theme="light"] .section-dark .form-status.is-error {
background: oklch(0.55 0.16 25 / 0.1);
color: oklch(0.45 0.17 25);
border-color: oklch(0.55 0.16 25 / 0.4);
}
/* ---------- 0.10 Pasek zgody na pliki cookies (.cookie-bar, style.css) ----------
Tło, tekst i linie działają przez tokeny z 0.1 (--bg-dark-2 → --light-raised,
--muted-on-dark, --hairline-dark). Tu kolory wpisane w style.css na sztywno. */
/* Jasna „kartka” nad stroną: tło --light-raised (prawie białe) odcina się od
piaskowych pasm, a od jasnych sekcji (--bg-light, różnica jasności tylko
~1,05:1) oddziela je wyraźniejsza linia i cień skierowany w górę. Tło celowo
NIE jest piaskiem stopki (--light-band-deep) — na dole strony pasek zlałby
się ze stopką. Kontrast na tym tle: --light-muted 8:1, --light-ink 15,6:1,
link khaki (--light-accent) 7,1:1. */
:root[data-theme="light"] .cookie-bar {
border-top-color: oklch(0.24 0.012 220 / 0.2);
box-shadow:
0 -10px 28px -6px oklch(0.2 0.01 220 / 0.16),
0 -2px 8px -2px oklch(0.2 0.01 220 / 0.08);
}
/* Obrys obu przycisków decyzji ≥ 3:1 na jasnym pasku (3,9:1) */
:root[data-theme="light"] .cookie-btn { border-color: oklch(0.24 0.012 220 / 0.55); }
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .cookie-btn:hover { color: var(--on-brand); }
:root[data-theme="light"] .cookie-bar-close:hover { background: oklch(0.24 0.012 220 / 0.06); }
}
:root[data-theme="light"] .cookie-bar-settings { text-decoration-color: oklch(0.24 0.012 220 / 0.35); }
:root[data-theme="light"] .cookie-pref { background: var(--bg-light); }
/* Przełącznik: obrys toru ≥ 3:1; włączony — ciemne khaki (5,6:1 na pasku,
--brand miałby 2,9:1) i jasne kółko */
:root[data-theme="light"] .cookie-switch {
border-color: oklch(0.42 0.014 220 / 0.6);
background: oklch(0.24 0.012 220 / 0.05);
}
:root[data-theme="light"] .cookie-switch:checked { background: var(--brand-deep); border-color: var(--brand-deep); }
:root[data-theme="light"] .cookie-switch:checked::before { background: var(--light-raised); }
/* === 1. Strona główna (style.css) === */
/* Zakres: index.html — hero (.hero-standalone), Oferta (.stack-card), Projekty
(.section-projekty, karuzela), Dlaczego warto (.fc-*), Filmy (.section-filmy, .yt-*),
Technologia, band Konfigurator (.section-konfigurator), Realizacje, Partnerzy. */
/* Rytm tonów strony głównej w motywie jasnym (w ciemnym: ciemne ↔ jasne):
hero (piasek) → film (wyspa ciemna) → Oferta (--bg-light, karty na piasku)
→ Projekty (piasek) → Dlaczego warto (--bg-light) → Filmy (piasek)
→ Technologia (--bg-light-2) → Konfigurator (piasek) → Realizacje, Partnerzy
(--bg-light) → stopka (głębszy piasek). Zdjęcia, film i kafelki ze zdjęciami
to wyspy ciemne z sekcji 0.2 — wyglądają jak w motywie ciemnym. */
/* ---------- 1.1 Hero ----------
Tło hero zostaje var(--bg-dark), czyli piasek — ten sam kolor co tło .
Dzięki temu przenikanie hero → film (?intro=przenikanie) i gaśnięcie hero
przy wariantach z linią nie odsłaniają żadnej krawędzi. Nie zmieniaj tła
hero bez zmiany tła . */
/* Emfaza nagłówka: w ciemnym --brand (celowo ciszej niż --brand-bright);
w jasnym analogicznie ciemne khaki --brand-deep — 4,5:1 na piasku */
:root[data-theme="light"] .hero-heading em { color: var(--brand-deep); }
/* Znak wodny: GSAP (heroEntrance) zostawia opacity w stylu inline, więc
w jasnym zmieniamy KOLOR, nie krycie — przy 0.07 --brand ginie na piasku */
:root[data-theme="light"] .hero-watermark { color: oklch(0.36 0.05 100); }
/* ---------- 1.2 Oferta: karty w stosie ----------
Karta przechodzi na piasek sama (tokeny). Ciężki czarny cień z motywu
ciemnego na jasnej stronie wygląda jak brud — lżejszy, ciepły cień
zachowuje głębię stosu. */
:root[data-theme="light"] .stack-card {
box-shadow: 0 1.5rem 3.5rem -0.75rem oklch(0.3 0.02 100 / 0.3);
}
/* ---------- 1.3 Projekty (pasmo piaskowe) ---------- */
/* Obrys „Pobierz katalog PDF": hairline na piasku jest za słaby — ≥ 3:1 */
:root[data-theme="light"] .section-projekty .btn-outline,
:root[data-theme="light"] .section-filmy .btn-outline {
border-color: oklch(0.24 0.012 220 / 0.55);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .section-projekty .btn-outline:hover,
:root[data-theme="light"] .section-filmy .btn-outline:hover {
border-color: var(--brand-deep);
color: var(--brand-bright);
background: oklch(0.24 0.012 220 / 0.04);
}
}
/* Pasek postępu karuzeli: --brand na piasku ma 2,7:1 — ciemne khaki */
:root[data-theme="light"] .carousel-progress-bar { background: var(--brand-deep); }
/* Karta projektu jest wyspą: jej obrys (biel 12%) leżał na ciemnym tle karty
i na piasku dawał ciemną ramkę wokół zdjęcia. Tło tylko pod treścią,
obrys jako jasna linia podziału — zdjęcie odcina się od piasku czysto. */
:root[data-theme="light"] .carousel-card {
border-color: var(--light-hairline);
background-clip: padding-box;
}
/* ---------- 1.4 Dlaczego warto (koło chipów na piasku) ---------- */
/* Koło (≥ 900 px): js/app.js przygasza nieaktywne chipy kryciem 0.86 / 0.72 (WHEEL_OPACITY).
--light-muted dawał przy tym 4,5 i 3,4:1 (z pikseli 2,97:1) — ciemny tusz trzyma
≥ 4,5:1 także na chipach ±2 (8,4 i 5,5:1). Poziomy pasek (< 900 px) nie jest
przygaszany i zostaje przy --light-muted (6,2:1). */
@media (min-width: 900px) {
:root[data-theme="light"] .feature-carousel.is-live .fc-chip:not(.is-active) { color: var(--light-ink); }
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .fc-chip:not(.is-active):hover { border-color: oklch(0.24 0.012 220 / 0.4); }
}
/* Pauza/wznowienie: białe wypełnienie znika na piasku; przycisk ikonowy
dostaje obrys kontrolki ≥ 3:1 (3,4:1 na piasku) */
:root[data-theme="light"] .fc-toggle {
border-color: oklch(0.24 0.012 220 / 0.55);
background: oklch(0.24 0.012 220 / 0.04);
}
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .fc-toggle:hover { border-color: var(--brand-deep); }
}
/* ---------- 1.5 Filmy (pasmo piaskowe) ----------
Obrys przycisku kanału — razem z Projektami w 1.3. Karta filmu (.yt-media)
jest wyspą ciemną; ramka fokusu leży jednak 6 px POZA miniaturą, na piasku.
Pytanie o zgodę (.yt-consent) leży W .yt-media, na przyciemnionej miniaturze:
dziedziczy wartości ciemne wyspy (tekst, khaki, pierścień fokusu --brand)
i celowo wygląda jak w motywie ciemnym — nie potrzebuje tu reguł. */
:root[data-theme="light"] .yt-poster:focus-visible::after { outline-color: var(--brand-deep); }
/* ---------- 1.6 Realizacje ----------
Kafelek jest jednocześnie wyspą i linkiem — ramka fokusu rysuje się
na jasnej sekcji, więc ciemne khaki (5,6:1) zamiast --brand (3,3:1). */
:root[data-theme="light"] .real-tile:focus-visible { outline-color: var(--brand-deep); }
/* === 2. Podstrony — wspólne komponenty pages.css + strony ogólne === */
/* Zakres: pages.css poza formularzami — .page-hero (z mediami i bez), .breadcrumbs,
.section-dark, .cta-band, .prose, .features-grid, .step-flow, .legal-*, .job,
.contact-*, .lightbox; strony: technologia, o-nas, kontakt, kariera, przewodnik,
polityki, 404, indywidualne-projekty, realizacje. */
/* Decyzje bez osobnych reguł (działają przez tokeny z 0.1 / wyspy z 0.2):
- .page-hero ze zdjęciem zostaje wyspą ciemną — tekst leży na fotografii;
- .page-hero bez zdjęcia (kariera, przewodnik, polityki) = piasek; znak wodny
(--brand, opacity 0.14) daje na piasku ~1,13:1 — subtelny, ale widoczny;
- .section-dark, .cta-band = piasek; akcenty khaki jako tekst → --light-accent;
- .lightbox, .gallery-item, .split-figure (podpis na zdjęciu) — wyspy. */
/* ---------- 2.1 Rytm pasm: piasek przy piasku i przy --bg-light-2 ----------
Band CTA (i formularz .section-dark na /kontakt) kończy i styka się
ze stopką (--light-band-deep) — kontrast tonów tylko 1,08:1, granica ginie.
Tak samo na styku --bg-light-2 → piasek (1,11:1). Linia włosowa domyka
pasmo; inset box-shadow nie zmienia wysokości sekcji. */
:root[data-theme="light"] .section-light-2 + :is(.section-dark, .cta-band) {
box-shadow: inset 0 1px 0 var(--light-hairline);
}
:root[data-theme="light"] :is(.section-dark, .cta-band):has(+ .section-light-2),
:root[data-theme="light"] main > :is(.section-dark, .cta-band):last-child {
box-shadow: inset 0 -1px 0 var(--light-hairline);
}
:root[data-theme="light"] .section-light-2 + :is(.section-dark, .cta-band):is(:last-child, :has(+ .section-light-2)) {
box-shadow: inset 0 1px 0 var(--light-hairline), inset 0 -1px 0 var(--light-hairline);
}
/* ---------- 2.2 Galeria: pierścień fokusu kafla ----------
Kafel jest wyspą (--focus-ring = --brand), ale obrys rysuje się POZA nim,
na jasnej sekcji: --brand na --bg-light-2 2,97:1 (< 3:1). --brand-deep 5,06:1.
Zawężone do stron tego obszaru (.gallery-* na stronach projektów — obszar 3). */
:root[data-theme="light"] body:is([data-page="realizacje"], [data-page="indywidualne-projekty"]) .gallery-item:focus-visible {
outline-color: var(--brand-deep);
}
/* ---------- 2.3 Kontakt: placeholder w formularzu na piasku ----------
Domyślny placeholder przeglądarki (#757575) ma na polu ~4,2:1 — przyciemniamy
do --muted-on-light (~6,8:1). Pola to rdzeń (0.9), stąd zawężenie do strony. */
:root[data-theme="light"] body[data-page="kontakt"] .section-dark .field :is(input, textarea)::placeholder {
color: var(--muted-on-light);
}
/* === 3. Projekty i katalog === */
/* Zakres: projekty.html, katalog-skandom.html, 5 podstron projektów
(bragi, baldur, frigga, snotra, forseti) — .project-card*, .tier*, .params-grid,
.rooms-list, .plans-grid, .gallery-*, .spec-chip, .media-figures. */
/* Decyzje bez osobnych reguł (sprawdzone zrzutami 1440 px i 390 px w obu
motywach oraz audytem kontrastu — w jasnym 0 błędów tekstu w obszarze):
- karty projektów, cennik (.tier*), parametry (.params-grid), lista
pomieszczeń, rzuty (.plan), chipy i .link-arrow leżą na sekcjach
--bg-light / --bg-light-2, których tokeny się nie zmieniają — wyglądają
1:1 jak w motywie ciemnym; khaki jako tekst to tam już --brand-deep (≥ 5:1),
a plakietka metrażu (.project-card-area) ma ciemny tekst z rdzenia (0.8);
- pasmo „Wizualizacje" (.section-dark) na /baldur-75-m2 i /snotra-110-m2
oraz formularz (.section-dark) na /katalog-skandom przechodzą na piasek
przez tokeny: nagłówek 12:1, lead 6,2:1, emfaza i etykieta (--light-accent)
5,4:1; styk --bg-light-2 → piasek (Baldur: Cennik → Wizualizacje) domyka
linia włosowa z 2.1;
- kafle galerii z plakietką zoomu, podpisy na zdjęciach (.split-figure)
i podgląd (.lightbox) to wyspy ciemne z 0.2 — zdjęcia bez zmian. Audyt
zgłasza podpis .split-figure figcaption jako 1,02:1 (nie widzi zdjęcia
pod gradientem) — fałszywy alarm, identyczny w obu motywach. */
/* ---------- 3.1 Galeria: pierścień fokusu kafla ----------
Jak 2.2, dla stron projektów: kafel jest wyspą (--focus-ring = --brand),
ale obrys rysuje się 3 px POZA nim — na piasku (--brand 2,67:1) albo na
--bg-light-2 (2,97:1). Ciemne khaki: 4,55:1 na piasku, 5,06:1 na --bg-light-2. */
:root[data-theme="light"] body:is(
[data-page="bragi-45-m2"], [data-page="baldur-75-m2"], [data-page="frigga-95-m2"],
[data-page="snotra-110-m2"], [data-page="forseti-145-m2"]
) .gallery-item:focus-visible {
outline-color: var(--brand-deep);
}
/* === 4. Konfigurator (konfigurator.css) === */
/* Zakres: konfigurator.html — .konf, .konf-panel, .konf-stepper, .konf-option*,
.konf-summary, .konf-form, .konf-preview (wyspa ciemna w 0.2). */
/* Kierunek: scena z filmem/zdjęciem (.konf-preview, razem z paskiem podpisu,
przyciskiem pauzy) zostaje ciemną wyspą.
Panel wyboru przechodzi na ciepłą biel (--bg-light), a nie na piasek:
kafelki opcji są na nim „uniesione" (--light-raised) tak jak w ciemnym
motywie, a piaskowa stopka pod spodem domyka stronę osobnym tonem.
Zaznaczenie w jasnym = ciemne khaki (--brand-deep, ≥ 5:1); --brand (0.62)
zostaje tylko jako wypełnienie przycisków i aktywnej pigułki kroku. */
/* ---------- 4.1 Tokeny obszaru i tło panelu ---------- */
:root[data-theme="light"] .konf {
--th-konf-bg: var(--bg-light);
--th-konf-tile: var(--light-raised);
--th-konf-line: oklch(0.24 0.012 220 / 0.3); /* obrys pigułki kroku: 1,9:1 (w ciemnym 1,4:1) */
--th-konf-tile-line: oklch(0.24 0.012 220 / 0.4); /* obrys kafelka: 2,4–2,5:1 (w ciemnym 2,6–2,9:1) */
--th-konf-line-strong: oklch(0.24 0.012 220 / 0.55); /* kółko radio, próbka koloru: 3,6–3,7:1 */
--th-konf-accent: var(--brand-deep); /* zaznaczenie: 5,2:1 na kafelku */
--th-konf-selected-bg: oklch(0.62 0.038 102 / 0.14);
background: var(--th-konf-bg);
}
:root[data-theme="light"] .konf-panel { background: var(--th-konf-bg); }
/* ---------- 4.2 Nagłówek panelu: postęp i kroki ---------- */
:root[data-theme="light"] .konf-progress-track { background: oklch(0.24 0.012 220 / 0.12); }
:root[data-theme="light"] .konf-progress-bar { background: var(--th-konf-accent); }
/* Prefiks podbija specyficzność — stany z konfigurator.css deklarujemy ponownie */
:root[data-theme="light"] .konf-stepper-item button { border-color: var(--th-konf-line); }
:root[data-theme="light"] .konf-stepper-item.is-active button { border-color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .konf-stepper-item:not(.is-active) button:hover {
color: var(--ink-on-dark);
border-color: var(--th-konf-accent);
}
}
/* ---------- 4.3 Kafelki opcji i próbki kolorów ---------- */
:root[data-theme="light"] .konf-option {
background: var(--th-konf-tile);
border-color: var(--th-konf-tile-line);
}
:root[data-theme="light"] .konf-option-mark { border-color: var(--th-konf-line-strong); }
/* Próbka: kolor bez zmian (odczytany z renderów), tylko obrys ≥ 3:1 — inaczej
jasne odcienie (Biała, Srebrny, Sosna) zlewają się z kafelkiem */
:root[data-theme="light"] .konf-swatch {
border-color: var(--th-konf-line-strong);
box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.18);
}
:root[data-theme="light"] .konf-option.is-selected {
border-color: var(--th-konf-accent);
background: var(--th-konf-selected-bg);
}
/* Znacznik wyboru: ciemne khaki + jasny „ptaszek" (--brand na kafelku dawałby
ok. 2,9:1). Nadpisuje kolor ptaszka z 0.8 — tło znacznika jest tu inne. */
:root[data-theme="light"] .konf-option.is-selected .konf-option-mark {
background: var(--th-konf-accent);
border-color: var(--th-konf-accent);
color: var(--light-raised);
}
:root[data-theme="light"] .konf-option.is-selected .konf-swatch { border-color: oklch(0.24 0.012 220 / 0.75); }
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .konf-option:hover {
border-color: oklch(0.49 0.045 102 / 0.7);
background: oklch(1 0 0);
}
:root[data-theme="light"] .konf-option.is-selected:hover {
border-color: var(--th-konf-accent);
background: oklch(0.62 0.038 102 / 0.18);
}
}
/* ---------- 4.4 Pasek Wstecz / Dalej ----------
W bazie ma na sztywno ciemne tło — w jasnym ciepła biel z rozmyciem
(ghost „Wstecz" dostaje ciemny obrys z 0.7) */
:root[data-theme="light"] .konf-nav { background: oklch(0.965 0.006 102 / 0.96); }
/* ---------- 4.5 Podsumowanie i formularz ----------
Teksty, linki i linie idą przez przemapowane tokeny. Pola wyglądają jak
pola na jasnych sekcjach (wzór: 0.9). */
:root[data-theme="light"] .konf-form .field :is(input, select, textarea) {
background-color: oklch(1 0 0 / 0.7);
border-color: oklch(0.24 0.012 220 / 0.6); /* obrys pola ≥ 3:1: 4:1 na panelu, 4,3:1 wobec wnętrza */
}
/* Fokus jak w 0.9: obrys --brand-deep (5,6:1 na panelu) + pierścień 2 px */
:root[data-theme="light"] .konf-form .field :is(input, select, textarea):focus {
border-color: var(--brand-deep);
box-shadow: none;
}
:root[data-theme="light"] .konf-form .field :is(input, select, textarea):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
:root[data-theme="light"] .konf-form .field :is(input, textarea):user-invalid { border-color: oklch(0.55 0.16 25); }
/* Placeholder przeglądarki (#757575) ma na polu 4,49:1 — jak na /kontakt (2.3) */
:root[data-theme="light"] .konf-form .field :is(input, textarea)::placeholder { color: var(--muted-on-light); }
/*