/* Wersja robocza (new2.proop.pl, AGENTS.md zasada 9): tryb ciemny (sandbox_dark.py). Tryb ciemny to przede wszystkim nadpisanie tokenów z :root site.css (tła, tekst, obrysy, niebieski, cienie). Nadpisania klas tylko tam, gdzie tokeny nie wystarczają: sekcje ciemne z założenia, paski grafik g2, pasek technologii, panel menu. Włączenie: data-theme="dark" na (theme-init.js, przycisk) albo, bez skryptu, ciemne ustawienie systemu. Dlatego tokeny i nadpisania stoją dwa razy: w @media dla :root:not([data-theme="light"]) i dla :root[data-theme="dark"]; oba bloki muszą mieć tę samą treść. Kolory wyłącznie w tokenach poniżej (nowy odcień = nowy token). */ /* ---------- 1. Nowe tokeny (tryb jasny ich nie używa) ---------- */ :root { /* powierzchnie z rodziny granatu; --dk-bg to środkowy odcień gradientu --card-dark */ --dk-bg: #081a39; /* tło strony, zamiast --paper */ --dk-surface: #0e2449; /* jasne dotąd sekcje i karty, zamiast --white */ --dk-tint: #16345f; /* tła ikon, etykiet i kafli, zamiast --blue-soft */ --dk-line: #274672; /* obrysy, zamiast --line-light */ --dk-blue: #62b6de; /* niebieski nawigacyjny na ciemnym tle, zamiast --blue (6,8:1 na --dk-surface, 5,5:1 na --dk-tint) */ --dk-shadow: #00040c; /* cienie kart, zamiast granatu w --mx-navy-*-t */ --dk-plaque: #eaf0f8; /* jasna plakietka pod logotypami technologii */ /* wartości trybu jasnego (równe tokenom z :root site.css): sekcje ciemne z założenia wyglądają jak dotąd */ --lt-white: #ffffff; --lt-paper: #f5f9ff; --lt-navy: #0a1f44; --lt-muted: #5b6b8c; --lt-blue: #2a6c8e; --lt-blue-soft: #e6f3fa; --lt-line: #dbe6f7; } /* ---------- 2. Tokeny trybu ciemnego: blok A (ustawienie systemu, bez wyboru „jasny”) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --white: var(--dk-surface); --paper: var(--dk-bg); --blue-soft: var(--dk-tint); --line-light: var(--dk-line); --navy: var(--on-dark); --muted: var(--on-dark-2); --blue: var(--dk-blue); --mx-navy-7-t: color-mix(in srgb, var(--dk-shadow) 7%, transparent); --mx-navy-10-t: color-mix(in srgb, var(--dk-shadow) 10%, transparent); --mx-navy-12-t: color-mix(in srgb, var(--dk-shadow) 12%, transparent); --mx-navy-14-t: color-mix(in srgb, var(--dk-shadow) 14%, transparent); --mx-navy-16-t: color-mix(in srgb, var(--dk-shadow) 16%, transparent); --mx-navy-26-t: color-mix(in srgb, var(--dk-shadow) 26%, transparent); --mx-navy-30-t: color-mix(in srgb, var(--dk-shadow) 30%, transparent); --mx-navy-40-t: color-mix(in srgb, var(--dk-shadow) 40%, transparent); --mx-navy-42-t: color-mix(in srgb, var(--dk-shadow) 42%, transparent); --mx-navy-55-t: color-mix(in srgb, var(--dk-shadow) 55%, transparent); --mx-navy-60-t: color-mix(in srgb, var(--dk-shadow) 60%, transparent); /* tło stanu „2008” w suwaku E048 (hero Transformacji IT) zostaje jak w trybie jasnym */ --mx-navy-900-82-muted: color-mix(in srgb, var(--navy-900) 82%, var(--lt-muted)); } } /* ---------- 2. Tokeny trybu ciemnego: blok B (wybór przyciskiem) – treść jak w bloku A ---------- */ :root[data-theme="dark"] { color-scheme: dark; --white: var(--dk-surface); --paper: var(--dk-bg); --blue-soft: var(--dk-tint); --line-light: var(--dk-line); --navy: var(--on-dark); --muted: var(--on-dark-2); --blue: var(--dk-blue); --mx-navy-7-t: color-mix(in srgb, var(--dk-shadow) 7%, transparent); --mx-navy-10-t: color-mix(in srgb, var(--dk-shadow) 10%, transparent); --mx-navy-12-t: color-mix(in srgb, var(--dk-shadow) 12%, transparent); --mx-navy-14-t: color-mix(in srgb, var(--dk-shadow) 14%, transparent); --mx-navy-16-t: color-mix(in srgb, var(--dk-shadow) 16%, transparent); --mx-navy-26-t: color-mix(in srgb, var(--dk-shadow) 26%, transparent); --mx-navy-30-t: color-mix(in srgb, var(--dk-shadow) 30%, transparent); --mx-navy-40-t: color-mix(in srgb, var(--dk-shadow) 40%, transparent); --mx-navy-42-t: color-mix(in srgb, var(--dk-shadow) 42%, transparent); --mx-navy-55-t: color-mix(in srgb, var(--dk-shadow) 55%, transparent); --mx-navy-60-t: color-mix(in srgb, var(--dk-shadow) 60%, transparent); --mx-navy-900-82-muted: color-mix(in srgb, var(--navy-900) 82%, var(--lt-muted)); } /* ---------- 3. Nadpisania klas: blok A (ustawienie systemu) ---------- */ @media (prefers-color-scheme: dark) { /* sekcje ciemne z założenia (hero, nagłówek podstrony, E081, stopka, pasy i grafiki data-tone="dark", suwak E048): wewnątrz nich tokeny wracają do wartości trybu jasnego, więc wyglądają jak dotąd */ :root:not([data-theme="light"]) :is(.scene, .g10-dark, .e081, .e048, .g8-dark, .foot, [data-tone="dark"]) { --white: var(--lt-white); --paper: var(--lt-paper); --navy: var(--lt-navy); --muted: var(--lt-muted); --blue: var(--lt-blue); --blue-soft: var(--lt-blue-soft); --line-light: var(--lt-line); } /* grafiki z labu (E011–E020) na dotąd jasnym tle: paski i tunel jak w ich wersji data-tone="dark" */ :root:not([data-theme="light"]) :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020):not([data-tone="dark"]) { --g2-bar: var(--mx-on-dark-16-t); --g2-bar-2: var(--mx-on-dark-38-t); --g2-tube: var(--navy-900); --g2-tube-line: var(--line-dark); } /* pasek technologii: logotypy to rastry przygotowane na jasne tło, więc każdy stoi na jasnej plakietce */ :root:not([data-theme="light"]) .techs__item { padding: 7px 12px; border-radius: 10px; background: var(--dk-plaque); } :root:not([data-theme="light"]) .techs__name { color: var(--lt-muted); } /* panel menu (telefon, tablet): ciemny panel na ciemnym hero dostaje obrys */ :root:not([data-theme="light"]) .nav-toggle[open] .menu { border: 1px solid var(--line-light); } } @media (prefers-color-scheme: dark) and (hover: hover) { :root:not([data-theme="light"]) .techs__item:hover .techs__name { color: var(--lt-navy); } } /* ---------- 3. Nadpisania klas: blok B (wybór przyciskiem) – treść jak w bloku A ---------- */ :root[data-theme="dark"] :is(.scene, .g10-dark, .e081, .e048, .g8-dark, .foot, [data-tone="dark"]) { --white: var(--lt-white); --paper: var(--lt-paper); --navy: var(--lt-navy); --muted: var(--lt-muted); --blue: var(--lt-blue); --blue-soft: var(--lt-blue-soft); --line-light: var(--lt-line); } :root[data-theme="dark"] :is(.e011, .e012, .e013, .e014, .e016, .e017, .e018, .e019, .e020):not([data-tone="dark"]) { --g2-bar: var(--mx-on-dark-16-t); --g2-bar-2: var(--mx-on-dark-38-t); --g2-tube: var(--navy-900); --g2-tube-line: var(--line-dark); } :root[data-theme="dark"] .techs__item { padding: 7px 12px; border-radius: 10px; background: var(--dk-plaque); } :root[data-theme="dark"] .techs__name { color: var(--lt-muted); } :root[data-theme="dark"] .nav-toggle[open] .menu { border: 1px solid var(--line-light); } @media (hover: hover) { :root[data-theme="dark"] .techs__item:hover .techs__name { color: var(--lt-navy); } } /* ---------- 4. Przycisk motywu (sandbox-dark.js), w obu trybach ---------- */ /* w nagłówku zaraz za PL/EN (6 px odstępu: ujemny margines znosi część odstępu siatki nagłówka); nagłówek leży zawsze na ciemnym hero, więc barwy jak przy przełączniku języka */ .theme-toggle { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0 0 0 -14px; padding: 0; border: 1px solid var(--line-dark); border-radius: 999px; background: none; color: var(--on-dark-2); cursor: pointer; font: inherit; } .theme-toggle:hover { color: var(--on-dark); background: var(--hover-dark); } .theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle[aria-pressed="true"] .theme-toggle__moon, .theme-toggle:not([aria-pressed="true"]) .theme-toggle__sun, .theme-toggle__txt { display: none; } @media (max-width: 1180px) { .theme-toggle { margin-left: -8px; } } @media (max-width: 760px) { .theme-toggle { width: 40px; height: 40px; } .theme-toggle svg { width: 18px; height: 18px; } } /* Miejsce na przycisk w ciasnych przedziałach nagłówka (bez niego EN już przy 981 i 1181 px wchodził w margines): trochę węższe odstępy menu, tylko tam, gdzie inaczej treść nagłówka wyszłaby poza stronę */ @media (min-width: 1181px) and (max-width: 1299px) { .menu { gap: 2px; } .menu a { padding: 10px 9px; } } @media (min-width: 981px) and (max-width: 1059px) { .site-header .wrap { gap: 10px; } .menu { gap: 2px; } .menu a { padding: 10px 6px; } .theme-toggle { margin-left: -4px; } } @media (min-width: 375px) and (max-width: 419px) { .site-header .wrap { gap: 8px; } .lang a { padding: 10px 9px; } .nav-toggle summary { padding: 12px 11px; } .theme-toggle { margin-left: -2px; } } /* poniżej 375 px przycisk jest ostatnim wierszem panelu Menu: podpis i przełącznik zamiast samej ikony */ .theme-toggle-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-light); } .theme-toggle-row .theme-toggle { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 48px; margin: 0; padding: 14px; border: 0; border-radius: 8px; color: var(--navy); font: 500 15.5px/1.2 var(--text); text-align: left; } .theme-toggle-row .theme-toggle:hover { color: var(--navy); background: var(--paper); } .theme-toggle-row .theme-toggle:focus-visible { outline-color: var(--blue); } .theme-toggle-row .theme-toggle svg { width: 18px; height: 18px; color: var(--blue); } .theme-toggle-row .theme-toggle__txt { display: inline; } .theme-toggle-row .theme-toggle::after { content: ""; flex: none; width: 36px; height: 22px; margin-left: auto; border-radius: 999px; background: radial-gradient(circle at 11px 50%, var(--white) 7px, transparent 7.5px), var(--muted); } .theme-toggle-row .theme-toggle[aria-pressed="true"]::after { background: radial-gradient(circle at 25px 50%, var(--white) 7px, transparent 7.5px), var(--blue); } @media (forced-colors: active) { .theme-toggle { border-color: ButtonText; } .theme-toggle-row .theme-toggle::after { border: 1px solid ButtonText; } }