/* ==========================================================================
Whispet 2026 — wspólny arkusz całego serwisu: landing, przewodnik, pomoc,
hub dokumentów i same dokumenty prawne. Zero buildu, zero zależności.
Arkusze podstron dokładają się do tego pliku, nie zastępują go:
support.css, journal-guide.css, legal-doc.css.
========================================================================== */
/* === Reset & Base === */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* --- marka --- */
--accent: #886878;
--accent-dark: #7a5a6c;
/* --- neutralne, ciepłe --- */
--bg: #fdf8f2;
--paper: #fcfbf8;
--surface: #f5f3f0;
--white: #fff;
--text: #3a2f33;
--text-muted: #7d6f6a;
--text-dim: #6f625d; /* 5.3:1 na bieli — poprzednie #9b8d86 dawało 3.2:1 */
--border: #e6ded6;
/* Naglowki sekcji WEWNATRZ tresci (.doc-body h2/h3/h4, .faq-head h2,
.qa-body h4) — na jasnym motywie to zawsze --text, bez zmian; token
istnieje po to, zeby cieMNY motyw mogl je przygasic NIEZALEZNIE od
--text (ktorego uzywaja tez h1/h2/h3 na hero/landingu, gdzie tlem nie
jest plaski --bg i gdzie ta jasnosc jest OK). */
--heading-ink: var(--text);
/* --- semantyczne --- */
--green: #4a8e4a;
--warm: #d97757;
--amber-ink: #c2680a;
--gold-tint: #fbf0d9;
--gold-ink: #7a5410;
/* --- barwy szablonów dziennika (stałe, te same co w aplikacji) --- */
--journal-epilepsy: #e57373;
--journal-digestion: #6daf6d;
--journal-diabetes: #5b9bd5;
--journal-glucose: #4178a4;
/* --- kafelki szablonów dziennika (#journals), tylko jasny motyw ---
Barwy szablonów z aplikacji (Whispet-ios JournalTemplates.swift).
Tło: tint 14% barwy na bieli, 20% na hover/focus. Ring wypełniony
barwą przyciemnioną tak, by biała ikona miała >= 3,3:1 (oryginalne
#e57373 / #6daf6d / #5b9bd5 dają 2,6-3,0:1). Ciemne bloki ustawiają te
tokeny na initial — tam kafelki zostają jak dotąd (var() spada na
wartość zapasową). */
--jt-epilepsy-bg: #fbebeb; --jt-epilepsy-bg-hover: #fae3e3; --jt-epilepsy-ring: #d76c6c;
--jt-digestion-bg: #ebf4eb; --jt-digestion-bg-hover: #e2efe2; --jt-digestion-ring: #609a60;
--jt-diabetes-bg: #e8f1f9; --jt-diabetes-bg-hover: #deebf7; --jt-diabetes-ring: #5692c8;
--jt-glucose-bg: #e4ecf2; --jt-glucose-bg-hover: #d9e4ed; --jt-glucose-ring: #4178a4;
--jt-add-bg: #fff; --jt-add-bg-hover: #f0eaef; --jt-add-edge: #8f6283; /* obrys 4,7:1 na kremie */
--jt-edge: currentColor; /* krawędź w barwie szablonu (color kafelka) — w ciemnym initial */
--jt-meta: #5f4f56; /* 5,9-6,8:1 na tintach */
--jt-icon: #fff;
--jt-bar: 0px; /* pasek u stopy zbędny — barwę niesie tint, krawędź i ring */
--jt-arrow: "→";
/* biała krawędź karty .card — wyłania kartę z kremowego tła (1,06:1 wobec
#fdf8f2, czysto dekoracyjna); w ciemnym przezroczysta jak dotąd */
--card-edge: #fff;
/* --- alfy akcentu: jedyne wypełnienia i włoskowate obrysy --- */
--accent-a08: rgba(136, 104, 120, 0.08);
--accent-a20: rgba(136, 104, 120, 0.2);
--accent-a35: rgba(136, 104, 120, 0.35);
--accent-a55: rgba(136, 104, 120, 0.55);
/* --- gradienty --- */
--gradient-band: linear-gradient(158deg, #fbdecb 0%, #f1d8df 52%, #fbf0dc 100%);
--ground-warm: linear-gradient(158deg, rgba(251, 240, 220, 0.62) 0%, rgba(251, 240, 220, 0.14) 46%, var(--white) 80%);
--ground-warm-hover: linear-gradient(158deg, rgba(251, 222, 203, 0.5) 0%, rgba(241, 216, 223, 0.26) 42%, var(--white) 78%);
/* --- cienie: podbarwione mauve, nie neutralnie czarne --- */
--shadow-rest: 0 1px 0 rgba(230, 222, 214, 0.9);
--shadow-lift: 0 22px 44px -18px rgba(122, 90, 108, 0.34);
--shadow-lift-sm: 0 14px 30px -14px rgba(122, 90, 108, 0.3);
--shadow-photo: 0 28px 56px -26px rgba(122, 90, 108, 0.42);
--shadow-portrait: 0 34px 70px -26px rgba(122, 90, 108, 0.45);
/* --- tokeny motywu ---------------------------------------------------
Wartości w :root są DOKŁADNIE tymi literałami, które stały wcześniej
wprost w regułach. Wyciągnięcie ich do zmiennych nie zmienia jasnego
motywu ani o piksel — daje za to jedno miejsce, w którym ciemny motyw
podmienia całą warstwę barwną. Ciemny motyw nie dokłada ANI JEDNEJ
reguły poza blokiem tokenów; dzięki temu nie ma dwóch równoległych
arkuszy, które mogą się rozjechać. */
--on-accent: #fff; /* ink na wypełnieniu akcentem */
--footer-bg: #3a2f33; /* stopka jest ciemna w OBU motywach */
--footer-ink: #fff;
--nav-bg: rgba(253, 248, 242, 0.82);
--border-hair: rgba(230, 222, 214, 0.6);
--border-soft: rgba(230, 222, 214, 0.8);
--border-soft-2: rgba(230, 222, 214, 0.9);
--ring-bg: rgba(255, 255, 255, 0.5);
--ring-bg-hover: rgba(255, 255, 255, 0.72);
--subtle-fill: rgba(58, 47, 51, 0.06);
--subtle-fill-hover: rgba(58, 47, 51, 0.12);
--subtle-fill-2: rgba(58, 47, 51, 0.07);
--subtle-fill-2-hover: rgba(58, 47, 51, 0.13);
/* pasmo (page-hero, section--band, jg-hero) ma własny tusz: leży na
gradiencie, nie na tle strony */
--band-ink: #4a3a3f;
--band-ink-soft: #7a655f;
--band-ink-mid: #7a5a6c;
--band-ink-dim: #8a736c;
--band-ring: rgba(255, 255, 255, 0.5);
--band-chip-bg: rgba(255, 255, 255, 0.6);
--band-chip-border: rgba(255, 255, 255, 0.85);
/* Tarcza pod ikona ostrzezenia. Wlasny token, bo w jasnym motywie to bialy
welon na kremowej metce, a w ciemnym — cieply welon pod zlota ikona;
--band-chip-bg (szklo na pasmie) nie jest juz ta sama rola. */
--caution-ring-bg: rgba(255, 255, 255, 0.6);
--search-bg: rgba(255, 255, 255, 0.82);
--search-border: rgba(255, 255, 255, 0.9);
--search-placeholder: #a39189;
/* elementy leżące NA zdjęciu — plakietka zostaje jasna w obu motywach,
bo jej tłem jest fotografia, nie strona */
--photo-chip-bg: rgba(255, 255, 255, 0.85);
--photo-chip-ink: #7a5a6c;
--photo-chip-icon: var(--accent); /* ikonka w plakietce — w jasnym motywie bez zmian */
--photo-filter: none;
/* makiety kontrolek iOS w przewodniku */
--mock-field: #f6f2ee;
--mock-track: #e8e2dc;
--mock-track-2: #ece6e0;
--mock-on: #fff;
--zone-ink: #3d7340;
--caution-ring: rgba(194, 104, 10, 0.35);
--chart-line: #886878;
--chart-dot-halo: #fff;
--chart-warm: #d97757;
--chart-green: #4a8e4a;
--chart-axis: #e6ded6;
--chart-zone-fill: rgba(74, 142, 74, 0.13);
--chart-zone-line: rgba(74, 142, 74, 0.5);
/* zasoby, których nie da się przemalować CSS-em */
--logo-light-display: block; /* logotyp mono-black — na jasnym */
--logo-dark-display: none; /* logotyp zloty — na ciemnym */
--badge-ring: none; /* czarna odznaka App Store gubi się na ciemnym tle */
--qr-plate: transparent; /* kod QR jest ciemny na przezroczystym tle */
/* --- promienie --- */
--radius-sm: 12px;
--radius: 18px;
--radius-card: 22px;
--radius-photo: 30px;
--radius-pill: 999px;
/* --- typografia --- */
--font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Krój nagłówkowy. DM Serif Display był fontem DISPLAY o kontraście kresek
7,5:1 (zmierzone: stem pionowy 60 px vs poziomy 8 px przy 400 px kegla) —
w małych rozmiarach gubił detal, a na ciemnym tle włoskowate szeryfy
znikały przy odwróconej polaryzacji. Literata ma kontrast 1,74:1 i o 5 %
większą wysokość x, jest krojem do CZYTANIA (Google Play Books) i ma pełny
latin-ext, czyli komplet diakrytyków dla PL/DE/ES/FR/IT.
Literata ma też oś optyczną opsz 7–72, ale link do fontów jej NIE prosi:
zamówienie zakresu osi każe Google wysłać pełny plik zmienny i podnosi
wagę kroju z 77 kB do 237 kB. Za tę cenę dostaje się rysunek dobierany do
kegla; przy skoku o 160 kB nie warto — instancja domyślna to i tak cięcie
tekstowe, czyli dokładnie to, o co w tej zmianie chodzi. */
--font-display: "Literata", Georgia, serif;
/* DM Serif miał tylko wagę 400 i mimo to ważył optycznie dużo — bo miał
grube stemy. Literata 400 to waga TEKSTOWA; nagłówki wracają do dawnej
masy dopiero przy 500. To zmiana wagi, nie hierarchii wielkości.
Konwencja: RZYMSKA odmiana kroju nagłówkowego zawsze var(--display-weight),
KURSYWA zawsze 400 — i tylko te dwa rysunki są wczytywane. */
--display-weight: 500;
/* --- ruch --- */
--dur: 0.25s;
--dur-card: 0.34s;
--dur-reveal: 0.9s;
/* --- layout --- */
--container: 1120px;
--gutter: 44px;
--section-y: 104px;
--nav-h: 74px;
/* --- z-index --- */
--z-nav: 100;
--z-menu: 900;
--z-modal: 10000;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; overflow-x: clip; }
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.62;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); }
*:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip-link {
position: absolute; top: -100%; left: 16px; z-index: var(--z-modal);
padding: 10px 18px; background: var(--accent-dark); color: var(--on-accent);
border-radius: 0 0 10px 10px; font-weight: 700;
}
.skip-link:focus { top: 0; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* === Nagłówki === */
h1, h2, h3, .section-title {
font-family: var(--font-display);
font-weight: var(--display-weight);
letter-spacing: -1px;
line-height: 1.06;
color: var(--text);
}
.section-title { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.section-lead {
margin-top: 16px; font-size: 1.1rem; font-weight: 500;
color: var(--text-muted); line-height: 1.65;
}
/* Kursywa = głos opiekuna. Podpisy, przykłady, uwagi na marginesie.
.hand NIE ustawia kroju. Klasa obsługuje dwie grupy o różnych potrzebach:
krótkie etykiety w 0,92–1,06 rem (hero-kicker, beat-eyebrow, tap-hint,
jg-hint, gołe .hand przy kodzie QR) i większe, dekoracyjne podpisy
(timeline-frame-cap 1,14 rem, .no-results 1,5 rem). W tych małych rozmiarach
kursywa szeryfowa jest najgorzej czytelnym miejscem na stronie — zwłaszcza
jg-hint, bo to całe zdanie. Bez font-family dziedziczą Nunito i zostają
kursywą; krój szeryfowy dokładają sobie SAME te dwie reguły, które go chcą
(.timeline-frame-cap niżej, .no-results w support.css). Jedno miejsce na grupę,
zero font-family rozsypanego po regułach. */
.hand { font-style: italic; color: var(--accent-dark); }
/* === Nawigacja === */
.site-nav {
position: sticky; top: 0; z-index: var(--z-nav);
background: var(--nav-bg);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.nav-inner {
max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
min-height: var(--nav-h); display: flex; align-items: center; gap: 30px;
}
.nav-logo {
display: flex; align-items: center; gap: 10px;
font-weight: 500; font-size: 1.26rem; letter-spacing: -0.5px; color: var(--text);
flex-shrink: 0; white-space: nowrap;
}
/* Lockup jest poziomy (viewBox 7320x2080). Wysokosc 34 px zostawia SAM ZNAK
w dokladnie tym rozmiarze co dotychczasowy kwadrat 34x34 — znak wypelnia
pelna wysokosc lockupu (zmierzone: 208/208 px), wiec nawigacja nie rosnie
w pionie. Szerokosc liczy przegladarka z proporcji; atrybuty width/height
na ![]()
niosa intrinsic ratio, wiec miejsce jest zarezerwowane przed
pobraniem pliku i nie ma CLS. */
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; list-style: none; align-items: center; }
.nav-links a { font-size: 0.93rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--accent-dark); }
.nav-cta {
padding: 9px 20px; border-radius: var(--radius-pill);
background: var(--accent); color: var(--on-accent) !important;
font-size: 0.88rem; font-weight: 700;
transition: background var(--dur) ease, transform var(--dur) ease;
}
.nav-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }
.nav-toggle {
display: none; background: none; border: 1px solid var(--border);
border-radius: 10px; padding: 7px 9px; color: var(--text); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }
/* Przełącznik języka — jeden komponent dla wszystkich podstron */
.lang-switcher { position: relative; }
.lang-switcher summary {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
list-style: none; cursor: pointer; white-space: nowrap;
transition: border-color var(--dur) ease, color var(--dur) ease;
}
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher summary:hover { color: var(--accent-dark); border-color: var(--accent-a35); }
.lang-switcher .chevron-icon { transition: transform var(--dur) ease; }
.lang-switcher[open] summary .chevron-icon { transform: rotate(180deg); }
.lang-menu {
position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px;
padding: 6px; list-style: none; background: var(--white);
border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lift-sm); z-index: var(--z-menu);
}
.lang-menu button {
display: block; width: 100%; text-align: left; padding: 8px 12px;
background: none; border: 0; border-radius: 8px;
font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
cursor: pointer; transition: background var(--dur) ease, color var(--dur) ease;
}
.lang-menu button:hover { background: var(--surface); color: var(--text); }
.lang-menu button.active { color: var(--accent-dark); background: var(--surface); font-weight: 700; }
.nav-lang-flat { display: none; }
/* === Znaki: ikony liniowe === */
.znak { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* UWAGA: "żywej kropki" NIE stylujemy tutaj. Ikony wstawiamy przez