/* ── Pytaniamania: wspólne tokeny marki dla ekranów gracza ─────────────────── * * Jedno miejsce na fonty, paletę i gradient marki. Linkują go `play.html` * i `game.html`, a `social.js` czyta te same zmienne przez `var(--x, …)`. * Panel administratora (`index.html`, `login.html`) CELOWO zostaje na starym * wyglądzie — rebranding obejmuje wyłącznie ekrany gracza. * * Wartości pochodzą z `content/logo/identyfikacja.html` (sekcje „Kolory marki" * i „Teksty i powierzchnie"). Gradient jest zarezerwowany dla logo i głównych * przycisków — nie maluje się nim całych powierzchni. * * Cache-busting: strony linkują ten plik z `?v=`. Przy KAŻDEJ zmianie tego * pliku podnieś `v` w obu stronach, inaczej otwarta karta zostanie na starym * motywie (serwer statyków daje tylko etag). */ /* Fonty serwowane z tego samego originu — CSP (`default-src 'self'`) nie przepuszcza Google Fonts, a `content/` nie jest w ogóle montowane. */ @font-face { font-family: 'Sora'; /* Plik jest zmienny (oś `wght`); druga pozycja to awaryjne wczytanie tego samego pliku jako zwykłego TTF w przeglądarce bez obsługi wariacji. */ src: url('/fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'), url('/fonts/Sora-VariableFont_wght.ttf') format('truetype'); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: 'TitanOne'; src: url('/fonts/TitanOne-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* powierzchnie i linie */ --bg:#F8F6FC; --surface:#ffffff; --surface2:#F3EDFF; --border:#DDD7E8; --line:#EEE9F6; --track:#E4DEF0; /* teksty (`--text-dim2` jest CIEMNIEJSZY od `--text-dim` — tak jest używany) */ --text:#1C1733; --text-dim:#8B839E; --text-dim2:#69627A; /* akcenty marki */ --accent:#0467FD; --indigo:#3D46FA; --violet:#700EF7; --aqua:#23C8E8; --gold:#FFBE45; --green:#168A64; --green-ink:#10664A; --red:#D83C58; /* tekst na powierzchni gradientowej / pełnokolorowej */ --on-brand:#ffffff; /* delikatne tła i obwódki pochodne od akcentów (stany, podświetlenia) */ --accent-soft:rgba(4,103,253,.10); --accent-ring:rgba(4,103,253,.30); --green-soft:rgba(22,138,100,.12); --green-line:rgba(22,138,100,.45); --red-soft:rgba(216,60,88,.12); --red-line:rgba(216,60,88,.5); /* Ostrzeżenia (żółte): sam `--gold` na białym jest nieczytelny jako tekst, więc para „miękkie tło + ciemny atrament" niesie treść, a `--gold` zostaje na obwódce. */ --gold-soft:rgba(255,190,69,.20); --gold-ink:#7A4F00; /* cienie i przyciemnienie tła modali — jeden granat marki, trzy moce */ --shadow-soft:rgba(28,23,51,.2); --shadow:rgba(28,23,51,.35); --shadow-strong:rgba(28,23,51,.45); --overlay:rgba(28,23,51,.5); /* wygaszanie tła pod przyklejonym paskiem emotek (game.html) */ --bg-fade-a:rgba(248,246,252,.98); --bg-fade-b:rgba(248,246,252,.82); /* fonty */ --font:'Sora',system-ui,-apple-system,sans-serif; --title:'TitanOne',var(--font); --mono:ui-monospace,SFMono-Regular,Consolas,monospace; /* gradient marki — logo i główne CTA */ --grad:linear-gradient(180deg,#0467FD 0%,#3D46FA 52%,#700EF7 100%); /* formanty przeglądarki (pola, paski przewijania) mają iść za motywem */ color-scheme: light; } /* ── Motyw ciemny ──────────────────────────────────────────────────────────── `identyfikacja.html` nie definiuje wariantu ciemnego, więc granat marki (#1C1733 — kolor tekstu w jasnym motywie) awansuje na powierzchnię, a tło schodzi o stopień niżej. Akcenty marki i gradient zostają te same; zmieniają się wyłącznie tokeny POCHODNE (miękkie tła, obwódki, cienie, wygaszenia), bo ich jasne wersje na granacie robiłyby plamy. Atrybut `data-theme` ustawia mikro-skrypt w `` KAŻDEGO ekranu gracza (przed CSS), więc ciemny użytkownik nie widzi mignięcia jasnego tła. */ :root[data-theme="dark"]{ --bg:#14102A; --surface:#1C1733; --surface2:#252041; --border:#332C52; --line:#2A2447; --track:#332C52; --text:#F8F6FC; --text-dim:#A9A2BD; --text-dim2:#C6C0D8; /* Marka bez zmian POZA `--accent`: #0467FD na granacie schodzi poniżej progu czytelności (linki, etykiety, obwódki fokusu), więc bierze jaśniejszy odcień tej samej barwy. `--grad` i logo zostają dokładnie te same. */ --accent:#5B93FF; --green-ink:#4FD3A0; --accent-soft:rgba(91,147,255,.16); --accent-ring:rgba(91,147,255,.45); --green-soft:rgba(79,211,160,.14); --green-line:rgba(79,211,160,.45); --red-soft:rgba(216,60,88,.18); --red-line:rgba(216,60,88,.55); /* Na granacie atrament ostrzeżenia idzie w drugą stronę — rozjaśniony złoty. */ --gold-soft:rgba(255,190,69,.14); --gold-ink:#FFD489; /* Na ciemnym tle cień musi być czernią, nie granatem — granat na granacie nie daje żadnej głębi. */ --shadow-soft:rgba(0,0,0,.45); --shadow:rgba(0,0,0,.6); --shadow-strong:rgba(0,0,0,.7); --overlay:rgba(6,4,16,.66); --bg-fade-a:rgba(20,16,42,.98); --bg-fade-b:rgba(20,16,42,.82); color-scheme: dark; } /* Dowolny element na gradiencie marki (przyciski składają go u siebie sami). */ .brandgrad{background:var(--grad);color:var(--on-brand);border:none;box-shadow:none} /* ── Logo marki ────────────────────────────────────────────────────────────── Lockup: żarówka-znak zapytania + dwuwierszowy logotyp „Pytania" / „mania" w Titan One. `--brand-size` steruje całością (grafika skaluje się razem z tekstem), więc ten sam komponent działa i w pasku stołu, i na karcie powitalnej. */ .brand{display:inline-flex;align-items:center;gap:.34em;font-size:var(--brand-size,28px); line-height:1;text-decoration:none} .brand img{flex:none;width:1.9em;height:1.9em;object-fit:contain;display:block} .brand .brand-txt{font-family:var(--title);letter-spacing:-.02em;line-height:.92; color:var(--text);white-space:nowrap} /* „mania" bierze gradient marki; przeglądarka bez `background-clip:text` zostaje na pełnym fiolecie z `color`. */ .brand .brand-txt b{display:block;font-weight:400;color:var(--violet); background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .brand .brand-txt b{background:none;-webkit-text-fill-color:currentColor} }