/* ═══════════════════════════════════════════════════════════════════════════ Locardly — warstwa marki (produkcja) ═══════════════════════════════════════════════════════════════════════════ Źródło: Claude Design, projekt „Identyfikacja wizualna Locardly" (`Locardly Brand.dc.html`), sekcje 02 Znak, 04 Kolor, 05 Typografia, 06 UI, 07 Zastosowania, 08 Zasady użycia. ─── JAK TO DZIAŁA (od wersji produkcyjnej) ─────────────────────────────── Identyfikacja (nazwa „Locardly", znak, liquid glass, loader przeładowania, krój Instrument Sans) jest teraz TRWAŁA i WYPALONA wprost w każdej stronie `public/*.html` (poza `diag.html`, celowo samowystarczalną) — klasa `loca-brand` jest częścią statycznego ``, a arkusz jest dołączany na stałe obok `style.css`. Serwerowa transformacja pod prefiksem prototypu, która kiedyś to robiła w locie, już nie istnieje. ─── PALETA KOLORÓW: przełączalna, DOMYŚLNIE niebieska ──────────────────── `html.loca-brand { … }` / `html.loca-brand.theme-dark { … }` (baza, zawsze aktywna razem z `loca-brand`) niosą wartości NIEBIESKIE — te same, których od zawsze używa `style.css :root` / `html.theme-dark`. Dopisanie klasy `.loca-new-colors` (checkbox „Nowe kolory (Locardly)" w Ustawieniach → Moje konto, `localStorage.locaColors === 'new'`, `app.js` `locaColorsSet()`) przełącza na paletę ZIELONĄ Locardly przez `html.loca-brand.loca-new-colors { … }` / `html.loca-brand.theme-dark.loca-new-colors { … }`. Wszystko, co jest zbudowane na tokenach (`var(--surface)`, `var(--text)`, `.card`, `.modal`, kontrolki formularzy…), przełącza się automatycznie. Miejsca z KOLOREM WPISANYM NA SZTYWNO (gradient przycisku, tło pigułki nawigacji, odznaki ocen, cień panelu…) mają DWIE wersje reguły — bazową (niebieską) i pod `.loca-new-colors` (zieloną) — bo inaczej zawsze pokazywałyby zieleń niezależnie od wyboru w Ustawieniach. Znak firmowy (`--lm-line`, `--lm-b1/b2/b3`, kropka znaku — `--lm-dot`) NIE jest częścią tego przełącznika: to stały element identyfikacji, zdefiniowany raz, niezależnie od wybranej palety. Ogólny akcent UI (dzwonek powiadomień, aktywna zakładka mobilna — `--accent`/`--accent-text`) NATOMIAST przełącza się razem z resztą palety, tak jak reszta interfejsu. ─── DLACZEGO KLASA, A NIE ZWYKŁE `:root` ───────────────────────────────── `style.css` ma ~6600 linii i budowę warstwową: motyw 2.0 (4764), blok `html.theme-dark` (5100), blok wydajności `html.plt-noapple` (5656–5695) — część wygrywa KOLEJNOŚCIĄ, nie specyficznością. Gołe `:root` (0,1,0) przegrałoby z `html.plt-noapple` (0,1,1). Klasa na daje (0,1,1) i (0,2,1) w wariancie ciemnym — remis ze wszystkim istotnym, a remis rozstrzyga kolejność (arkusz idzie tuż przed , po style.css). ⚠ NIE nadawaj `view-transition-name` panelowi ani kartom i NIE dodawaj im `backdrop-filter` poza tym, co jest niżej — style.css:5971 opisuje czarny artefakt, który to wywołuje. `.nav-pill` ma `view-transition-name: gmb-navpill` (style.css:6014) i musi tak zostać. ═══════════════════════════════════════════════════════════════════════ */ /* ─── 1. KRÓJ (self-host, CSP `fontSrc: 'self'` blokuje Google Fonts) ────── Wyłącznie Instrument Sans — na produkcji nie ma przełącznika kroju dla użytkownika (był narzędziem prototypu, patrz historia w CLAUDE.md). Plus IBM Plex Mono na dane/etykiety/identyfikatory (sekcja 6). Podzbiory `latin` + `latin-ext` — bez latin-ext nie ma polskich znaków (ą ć ę ł ń ó ś ź ż). ⚠ express.static daje `.woff2` twardy `max-age=604800` — podmieniając krój zmień NAZWĘ pliku, nie zawartość. Pozostałe 7 rodzin (`public/fonts/ locardly/*.woff2`) świadomie ZOSTAJĄ na dysku nieużywane — tanie do przywrócenia, gdyby przełącznik kroju kiedyś wrócił jako funkcja produktu. */ /* Wygenerowane z Google Fonts css2 — NIE edytuj unicode-range recznie. */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/locardly/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/locardly/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/locardly/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/locardly/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/locardly/instrument-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/locardly/instrument-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ─── 2. WYBÓR KROJU ────────────────────────────────────────────────────── Cała typografia idzie przez `--loca-ui-font` — jedna zmienna, na wypadek gdyby przełącznik kroju kiedyś wrócił. Dziś zawsze Instrument Sans. */ html.loca-brand { --loca-ui-font: 'Instrument Sans'; } /* ─── 3. TOKENY — MOTYW JASNY, PALETA NIEBIESKA (domyślna) ──────────────── Wartości 1:1 ze `style.css :root` (linia ~161) — to jest dokładnie dzisiejszy, znany wygląd aplikacji. Specyficzność (0,1,1) — bije `:root` (0,1,0), remisuje z `html.plt-noapple` (5683), gdzie rozstrzyga kolejność. */ html.loca-brand { --primary: #3b6ef0; --primary-dark: #2f5ad6; --primary-soft: #E8EEFD; --primary-glow: rgba(66,133,244,.28); --accent: #ECC94B; /* = --warning klasycznego motywu */ --accent-fg: #3A2408; --accent-text: #2f5ad6; --sidebar-bg: rgba(255,255,255,.58); --sidebar-text: #5b6275; --sidebar-hover: rgba(255,255,255,.55); --sidebar-active: #FFFFFF; --bg: #eef1f8; --surface: rgba(255,255,255,.68); --surface-solid: #ffffff; --surface-raised: rgba(255,255,255,.85); --surface-sunken: rgba(0,0,0,.035); --border: rgba(255,255,255,.85); --border-soft: rgba(0,0,0,.08); --overlay: rgba(26,31,46,.34); --text: #1a1f2e; --muted: #6b7180; /* Tekst drugorzędny o PEŁNEJ czytelności. `--muted` (#6b7180) daje 4.32:1 na paskach `--bg` — PONIŻEJ progu AA 4.5:1 — i było to odczuwalne wszędzie tam, gdzie drobny tekst 11-13px leży na jasnym tle (zgłoszenie z Edycji profilu). Ten token daje 7.35:1 na paskach i 8.00:1 na karcie = AAA, a nadal czyta się jako drugorzędny wobec `--text` (15.79:1). Używać tam, gdzie tekst jest MNIEJSZY niż 14px albo leży na `--bg`; `--muted` zostaje dla reszty. */ --muted-strong: #484e5e; /* Tło nagłówka Edycji profilu. MUSI być tokenem, a nie `var(--sidebar-bg)`: po restyle'u [v1.60] sidebar stał się JASNYM szkłem, więc biały tekst nagłówka lądował na prawie białym tle (1.03:1 — praktycznie niewidoczny), a w paletach zielonych `--sidebar-bg` jest GRADIENTEM, co unieważniało całą deklarację `background` (nagłówek bez tła w ogóle). Biały tekst na najjaśniejszym końcu: 11.63:1. */ --pe-header-bg: linear-gradient(135deg, #2f3757 0%, #1e2540 100%); --success: #2f9e54; --warning: #ECC94B; --danger: #FC8181; --danger-dark: #e53e3e; --info-fg: #2f5ad6; --warn-fg: #92660b; --err-fg: #b91c1c; --row-error: rgba(252,129,129,.14); --radius: 12px; --radius-card: 20px; /* LIQUID GLASS — trzy warstwy naraz: 1) miękki cień rzucany (głębia), 2) SPEKULARNY highlight u góry (inset, jasny) — to on daje wrażenie szklanej krawędzi łapiącej światło, 3) delikatny inset u dołu (grubość tafli). Bez (2) i (3) wychodzi zwykła przezroczystość, nie szkło. Tint neutralny (czarny), nie zielony — to jest różnica względem palety Locardly. */ --glass-hi: inset 0 1px 0 rgba(255,255,255,.9); --glass-lo: inset 0 -1px 0 rgba(0,0,0,.05); --shadow: 0 1px 1px rgba(0,0,0,.04), 0 10px 30px -16px rgba(0,0,0,.24), var(--glass-hi), var(--glass-lo); --shadow-lg: 0 32px 64px -28px rgba(0,0,0,.34), var(--glass-hi); --blur: blur(24px) saturate(160%); --lg-blur: blur(20px) saturate(150%); --lg-bg: rgba(255,255,255,.58); --lg-bg-hover: rgba(255,255,255,.78); --lg-border: rgba(255,255,255,.75); --lg-shadow: 0 1px 2px rgba(0,0,0,.06), var(--glass-hi); --lg-text: #1a1f2e; /* Gwiazdki: `renderStars` (app.js:349) renderuje `color: var(--color-Nstar, )` — TOKEN WYGRYWA nad hardkodem w JS. */ --color-5star: #1B8A3E; --color-4star: #5CB85C; --color-3star: #F0AD00; --color-2star: #E8711A; --color-1star: #D9230F; /* Tło aplikacji/logowania/loadera — jedna definicja, trzy miejsca użycia (sekcja 5). Blob w klasycznym stylu (style.css) jest animowany; tutaj jest to STATYCZNY odpowiednik tej samej idei — bez kosztu kompozycji. */ --loca-bg-gradient: radial-gradient(1180px 760px at 10% -8%, rgba(66,133,234,.22), transparent 62%), radial-gradient(980px 680px at 92% 4%, rgba(159,180,244,.28), transparent 64%), radial-gradient(900px 620px at 52% 106%, rgba(147,197,253,.16), transparent 62%); /* Pigułka aktywnej zakładki (sekcja 7). */ --loca-navpill-bg: linear-gradient(135deg, #3b6ef0 0%, #6f93f5 100%); --loca-navpill-shadow: 0 6px 18px -8px rgba(59,110,240,.5), inset 0 1px 0 rgba(255,255,255,.28); } /* ─── 4. TOKENY — MOTYW CIEMNY, PALETA NIEBIESKA (domyślna) ─────────────── Wartości 1:1 ze `style.css html.theme-dark` (linia ~5100). Specyficzność (0,2,1) — remis z `html.theme-dark` (5100) i `html.plt-noapple.theme-dark` (5695); rozstrzyga kolejność. */ html.loca-brand.theme-dark { --primary: #3768ea; --primary-dark: #2f5ad6; --primary-soft: #101a33; --primary-glow: rgba(55,104,234,.45); --accent: #fbbf24; --accent-fg: #3A2408; --accent-text: #8fabff; --sidebar-bg: rgba(255,255,255,.045); --sidebar-text: rgba(255,255,255,.52); --sidebar-hover: rgba(255,255,255,.06); --sidebar-active: #FFFFFF; --bg: #050810; --surface: rgba(255,255,255,.055); --surface-solid: #10162a; --surface-raised: #1a2138; --surface-sunken: rgba(255,255,255,.04); --border: rgba(255,255,255,.10); --border-soft: rgba(255,255,255,.08); --overlay: rgba(3,5,12,.62); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.55); /* patrz komentarz przy tokenie w palecie jasnej. Tu: 7.76:1 na `--bg`, 7.48:1 na karcie = AAA (`--muted` .55 dawało 6.13-6.26:1). */ --muted-strong: rgba(255,255,255,.62); /* W motywie ciemnym gradient sprzed zmiany działał poprawnie (lewy koniec rgba(255,255,255,.045) jest tu prawie czarny) — zachowany jego charakter, ale jako jawny token, żeby nie zależeć od `--sidebar-bg`. */ --pe-header-bg: linear-gradient(135deg, #252c4b 0%, #141a2e 100%); --success: #34d399; --warning: #fbbf24; --danger: #f87171; --danger-dark: #ef4444; --info-fg: #93c5fd; --warn-fg: #fcd34d; --err-fg: #fca5a5; --row-error: rgba(239,68,68,.12); --glass-hi: inset 0 1px 0 rgba(255,255,255,.10); --glass-lo: inset 0 -1px 0 rgba(0,0,0,.28); --shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6), var(--glass-hi), var(--glass-lo); --shadow-lg: 0 32px 64px -28px rgba(0,0,0,.8), var(--glass-hi); --radius-card: 22px; --blur: blur(30px) saturate(140%); --lg-blur: blur(24px) saturate(135%); --lg-bg: rgba(255,255,255,.06); --lg-bg-hover: rgba(255,255,255,.12); --lg-border: rgba(255,255,255,.10); --lg-shadow: 0 2px 10px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08); --lg-text: rgba(255,255,255,.78); --color-5star: #16a34a; --color-4star: #22c55e; --color-3star: #eab308; --color-2star: #f97316; --color-1star: #ef4444; --loca-bg-gradient: radial-gradient(1180px 760px at 10% -8%, rgba(55,104,234,.20), transparent 62%), radial-gradient(980px 680px at 92% 4%, rgba(59,110,240,.22), transparent 64%), radial-gradient(900px 620px at 52% 106%, rgba(88,130,240,.10), transparent 62%); --loca-navpill-bg: linear-gradient(135deg, #2f5ad6 0%, #3b6ef0 100%); --loca-navpill-shadow: 0 6px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14); } /* ─── 3b. TOKENY — MOTYW JASNY, PALETA ZIELONA (opt-in `.loca-new-colors`) ─ Dzisiejsza (pierwotna) zawartość tej sekcji, bez zmian liczbowych — przeniesiona z gołego `html.loca-brand` na `.loca-new-colors`, żeby stać się wyborem, a nie domyślnym stanem. Specyficzność (0,2,1). */ html.loca-brand.loca-new-colors { --primary: #0F6E62; /* Locardly Green */ --primary-dark: #0B564C; --primary-soft: #E7F0ED; --primary-glow: rgba(15,110,98,.20); --accent: #E4A24C; /* Signal Amber — maks. 10% powierzchni */ --accent-fg: #3A2408; --accent-text: #0B564C; /* PANEL BOCZNY — świadomie NIE lita zieleń. Wcześniejsza wersja (#0B2C28) dominowała cały ekran; tutaj panel jest szklany i tylko PODBARWIONY zielenią, więc gradient tła prześwituje przez niego zamiast być nim przykryty. */ --sidebar-bg: linear-gradient(168deg, rgba(231,240,237,.74) 0%, rgba(247,246,242,.58) 52%, rgba(201,222,215,.58) 100%); --sidebar-text: rgba(13,26,24,.68); --sidebar-hover: rgba(255,255,255,.58); --sidebar-active: #F7FBF9; --bg: #F3F1EA; /* Szkło: powierzchnie są PÓŁPRZEZROCZYSTE — to one robią „liquid glass", nie sam blur. Zbyt kryjąca wartość zabija efekt. */ --surface: rgba(255,255,255,.62); --surface-solid: #FFFFFF; --surface-raised: rgba(255,255,255,.74); --surface-sunken: rgba(250,249,245,.72); --border: rgba(255,255,255,.72); --border-soft: rgba(13,26,24,.08); --overlay: rgba(11,44,40,.34); --text: #0D1A18; --muted: #5D6B67; /* patrz komentarz przy tokenie w palecie jasnej niebieskiej. Tu: 7.70:1 na `--bg`, 8.31:1 na karcie = AAA. */ --muted-strong: #414E4A; /* Zieleń marki w wersji ciemnej — biały tekst 9.93:1 na jaśniejszym końcu. Bez tego tokenu deklaracja `background` była w tej palecie ODRZUCANA przez parser, bo `--sidebar-bg` jest tu gradientem (nagłówek nie miał tła). */ --pe-header-bg: linear-gradient(135deg, #124b44 0%, #092b27 100%); --success: #2FA08D; --warning: #E4A24C; --danger: #D97B5C; --danger-dark: #B85A3C; --info-fg: #0B564C; --warn-fg: #8A5A15; --err-fg: #8E3E26; --row-error: rgba(252,246,244,.8); --radius: 12px; --radius-card: 20px; --glass-hi: inset 0 1px 0 rgba(255,255,255,.9); --glass-lo: inset 0 -1px 0 rgba(11,44,40,.05); --shadow: 0 1px 1px rgba(11,44,40,.04), 0 10px 30px -16px rgba(11,44,40,.24), var(--glass-hi), var(--glass-lo); --shadow-lg: 0 32px 64px -28px rgba(11,44,40,.34), var(--glass-hi); --blur: blur(28px) saturate(180%); --lg-blur: blur(20px) saturate(170%); --lg-bg: rgba(255,255,255,.58); --lg-bg-hover: rgba(255,255,255,.78); --lg-border: rgba(255,255,255,.72); --lg-shadow: 0 1px 2px rgba(11,44,40,.06), var(--glass-hi); --lg-text: #0D1A18; --color-5star: #0F6E62; --color-4star: #2FA08D; --color-3star: #E4A24C; --color-2star: #D97B5C; --color-1star: #B85A3C; /* ─── 5. TŁO — gradient w palecie Locardly ──────────────────────────── Ten sam POMYSŁ co w klasycznej wersji niebieskiej (sekcja 3: trzy miękkie radialne plamy + kolor bazowy), tylko przełożony na zieleń i ciepły papier zamiast błękitów. */ --loca-bg-gradient: radial-gradient(1180px 760px at 10% -8%, rgba(47,160,141,.30), transparent 62%), radial-gradient(980px 680px at 92% 4%, rgba(159,204,194,.34), transparent 64%), radial-gradient(900px 620px at 52% 106%, rgba(228,162,76,.14), transparent 62%); --loca-navpill-bg: linear-gradient(135deg, #0F6E62 0%, #2FA08D 100%); --loca-navpill-shadow: 0 6px 18px -8px rgba(15,110,98,.55), inset 0 1px 0 rgba(255,255,255,.28); } /* ─── 4b. TOKENY — MOTYW CIEMNY, PALETA ZIELONA ─────────────────────────── Specyficzność (0,3,1) — bije bazowy ciemny blok (0,2,1) niezależnie od kolejności w pliku. */ html.loca-brand.theme-dark.loca-new-colors { --primary: #2FA08D; --primary-dark: #23806F; --primary-soft: #10221F; --primary-glow: rgba(47,160,141,.22); --accent: #EFB671; --accent-fg: #3A2408; --accent-text: #7FD3C1; --sidebar-bg: linear-gradient(168deg, rgba(18,42,38,.72) 0%, rgba(8,20,18,.64) 55%, rgba(14,36,32,.68) 100%); --sidebar-text: rgba(232,239,237,.58); --sidebar-hover: rgba(232,239,237,.08); --sidebar-active: #F2FBF8; --bg: #050C0B; --surface: rgba(20,35,32,.62); --surface-solid: #0E1A18; --surface-raised: rgba(26,44,41,.72); --surface-sunken: rgba(10,20,19,.7); --border: rgba(127,211,193,.14); --border-soft: rgba(127,211,193,.10); --overlay: rgba(2,8,7,.6); --text: #E8EFED; --muted: #93A5A0; /* patrz komentarz przy tokenie w palecie jasnej niebieskiej. Tu: 9.35:1 na `--bg`, 8.41:1 na karcie = AAA. */ --muted-strong: #A6B6B1; /* jw. — w tej palecie `--sidebar-bg` też jest gradientem. */ --pe-header-bg: linear-gradient(135deg, #0f3f39 0%, #082420 100%); --success: #4FBFA8; --warning: #EFB671; --danger: #D97B5C; --danger-dark: #D97B5C; --info-fg: #7FD3C1; --warn-fg: #EFB671; --err-fg: #E79B7E; --row-error: rgba(30,21,18,.8); --glass-hi: inset 0 1px 0 rgba(255,255,255,.10); --glass-lo: inset 0 -1px 0 rgba(0,0,0,.28); --shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6), var(--glass-hi), var(--glass-lo); --shadow-lg: 0 32px 64px -28px rgba(0,0,0,.8), var(--glass-hi); --lg-bg: rgba(26,44,41,.6); --lg-bg-hover: rgba(32,54,50,.78); --lg-border: rgba(127,211,193,.16); --lg-text: #E8EFED; --color-5star: #4FBFA8; --color-4star: #2FA08D; --color-3star: #EFB671; --color-2star: #E79B7E; --color-1star: #D97B5C; --loca-bg-gradient: radial-gradient(1180px 760px at 10% -8%, rgba(47,160,141,.20), transparent 62%), radial-gradient(980px 680px at 92% 4%, rgba(15,110,98,.26), transparent 64%), radial-gradient(900px 620px at 52% 106%, rgba(228,162,76,.07), transparent 62%); --loca-navpill-bg: linear-gradient(135deg, #17786A 0%, #2FA08D 100%); --loca-navpill-shadow: 0 6px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14); } /* ─── 5. TŁO — jedna zmienna, trzy miejsca (body / .login-page / loader) ── `--loca-bg-gradient` jest zdefiniowany w każdym z czterech bloków tokenów wyżej (sekcje 3/4/3b/4b) — to on prześwituje przez szkło, bez niego „liquid glass" nie ma czego załamywać. Bloby z `body::before/::after` ZOSTAJĄ ZGASZONE jako ANIMACJA w OBU paletach: animowane tło pod szklaną powierzchnią wymusza przeliczanie rozmycia co klatkę i było głównym kosztem z [v1.61]. Statyczny gradient daje ten sam efekt bez tej ceny — dzięki temu szkło może wrócić także na Windowsie (patrz sekcja 13). GRADIENT SIEDZI NA WARSTWIE `position: fixed`, NIE NA `body` — i to NIE jest kosmetyka, tylko warunek wydajności (zmierzone). Pierwsza wersja tej sekcji dawała `background-attachment: fixed` na `body`, co CICHO cofało optymalizację z [v2.01] (`style.css`: `html.plt-noapple body { background-attachment: scroll }` — ta sama specyficzność 0,1,1, ale TEN plik ładuje się PÓŹNIEJ, więc wygrywał kolejnością). Przypięte tło na PRZEWIJANYM elemencie każe przeglądarce przemalowywać gradient przy każdej klatce scrolla, a koszt rośnie razem z wysokością dokumentu — dlatego objaw widać było WYŁĄCZNIE tam, gdzie lista jest długa: 20 kart (główna lista Opinie, dokument 5 390 px) → 166 FPS 500 kart (pod-zakładka Sesja, dokument 174 886 px) → 4,3 FPS Ta sama treść na osobnej warstwie `position: fixed` jest dla kompozytora jednym bitmapem, który się TYLKO PRZESUWA: 4,3 → 82,8 FPS przy identycznym wyglądzie. `inset: 0` daje elementowi dokładnie rozmiar okna, więc procenty w `radial-gradient(… at 10% -8% …)` liczą się tak samo jak przy `background-attachment: fixed`. To ten sam mechanizm, którym już działają bloby w `style.css` — [v2.01] nazywa go „darmowym wizualnie". NIE przywracaj `background-attachment: fixed` na `body` i NIE zmieniaj `inset: 0` na `-15%` (bazowa wartość blobów) — przesunęłoby to środki gradientów i zmieniło wygląd. Blok `@media (max-width: 900px)` przestawiający tło na `scroll` zniknął jako bezprzedmiotowy: nie ma już `fixed`, które trzeba by na telefonie gasić. */ html.loca-brand body { background-color: var(--bg); background-image: none; color: var(--text); } html.loca-brand body::before { display: block !important; content: "" !important; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--loca-bg-gradient); background-repeat: no-repeat; opacity: 1; animation: none !important; } html.loca-brand body::after { display: none !important; content: none !important; } html.loca-brand ::selection { background: var(--primary-glow); color: var(--text); } /* ─── 6. TYPOGRAFIA (sekcja 05) ─────────────────────────────────────────── Rodzina idzie przez `--loca-ui-font` (sekcja 2). IBM Plex Mono obsługuje dane, etykiety i identyfikatory — świadomie WĄSKA lista, bo mono w treści ciągłej pogarsza czytelność, a szersze użycie zmieniłoby metryki i rozjechało układ. */ html.loca-brand body, html.loca-brand button, html.loca-brand input, html.loca-brand select, html.loca-brand textarea { font-family: var(--loca-ui-font), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } html.loca-brand h1, html.loca-brand h2, html.loca-brand .page-title, html.loca-brand .stat-value, html.loca-brand .login-title { letter-spacing: -.025em; } html.loca-brand h3, html.loca-brand .card-title { letter-spacing: -.015em; } html.loca-brand .nav-section-label, html.loca-brand .rating-badge, html.loca-brand .app-version, html.loca-brand code, html.loca-brand pre { font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace; } html.loca-brand .nav-section-label { letter-spacing: .13em; text-transform: uppercase; } /* `.theme-tag` (tagi motywów na kartach opinii) ZDJĘTE z listy mono 2026-09-04 — 11 px mono, biały tekst na kolorowej pigułce, wyszedł nieczytelny (zgłoszenie użytkownika). Dziedziczą teraz `--loca-ui-font` jak reszta interfejsu — ta sama decyzja i ten sam powód co przy `.stat-label` niżej. Nie dopisuj ich z powrotem. */ /* .stat-label ŚWIADOMIE POZA obiema regułami wyżej. Etykiety kafelków (WIZYTÓWKI, 5★ DOSKONAŁE…) w mono wyglądały obco — decyzja użytkownika. style.css:483 daje im już `text-transform: uppercase`, `letter-spacing: .5px` i wagę 600; zostawiamy to nietknięte, zmienia się wyłącznie rodzina, która przychodzi z `--loca-ui-font` jak reszta interfejsu. Nie dopisuj ich tutaj z powrotem — to był konkretny, wskazany zrzutem ekranu zarzut. */ /* ─── 7. PANEL BOCZNY — szkło podbarwione, nie plansza koloru ───────────── Zamiast litej barwy: półprzezroczysty gradient/tło z blurem, przez który widać tło strony. Reguły token-based (var(--sidebar-bg) itd.) przełączają się same; poniżej wyłącznie miejsca z KOLOREM WPISANYM NA SZTYWNO — każde ma parę: bazową (niebieską) i `.loca-new-colors` (zieloną). */ html.loca-brand .sidebar { background: var(--sidebar-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-right: 1px solid rgba(255,255,255,.7); box-shadow: inset -1px 0 0 rgba(255,255,255,.35), 1px 0 28px -18px rgba(0,0,0,.22); } html.loca-brand.theme-dark .sidebar { border-right: 1px solid rgba(255,255,255,.10); box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 1px 0 28px -18px rgba(0,0,0,.7); } html.loca-brand.loca-new-colors .sidebar { border-right: 1px solid rgba(255,255,255,.55); box-shadow: inset -1px 0 0 rgba(255,255,255,.35), 1px 0 28px -18px rgba(11,44,40,.35); } html.loca-brand.theme-dark.loca-new-colors .sidebar { border-right: 1px solid rgba(127,211,193,.12); box-shadow: inset -1px 0 0 rgba(127,211,193,.06), 1px 0 28px -18px rgba(0,0,0,.7); } html.loca-brand .sidebar-header, html.loca-brand .sidebar-footer, html.loca-brand .app-version { border-color: rgba(0,0,0,.07); } html.loca-brand.theme-dark .sidebar-header, html.loca-brand.theme-dark .sidebar-footer, html.loca-brand.theme-dark .app-version { border-color: rgba(255,255,255,.08); } html.loca-brand.loca-new-colors .sidebar-header, html.loca-brand.loca-new-colors .sidebar-footer, html.loca-brand.loca-new-colors .app-version { border-color: rgba(11,44,40,.09); } html.loca-brand.theme-dark.loca-new-colors .sidebar-header, html.loca-brand.theme-dark.loca-new-colors .sidebar-footer, html.loca-brand.theme-dark.loca-new-colors .app-version { border-color: rgba(127,211,193,.12); } html.loca-brand .app-title { color: var(--text); letter-spacing: -.025em; } html.loca-brand .app-subtitle { color: var(--muted); } html.loca-brand .nav-section-label { color: rgba(26,31,46,.42); } html.loca-brand.theme-dark .nav-section-label { color: rgba(255,255,255,.40); } html.loca-brand.loca-new-colors .nav-section-label { color: rgba(13,26,24,.42); } html.loca-brand.theme-dark.loca-new-colors .nav-section-label { color: rgba(232,239,237,.40); } html.loca-brand .nav-link { color: var(--sidebar-text); } html.loca-brand .nav-link:hover { background: var(--sidebar-hover); color: var(--text); } html.loca-brand .nav-link.active { color: var(--sidebar-active); font-weight: 500; } /* Pigułka aktywnej zakładki — ZMIENIAMY WYŁĄCZNIE WYGLĄD. Geometria, `transform` i `transition` (.42s var(--sb-ease)) zostają nietknięte, więc przejazd [v1.70]/[v1.85] i przejścia międzydokumentowe [v1.88] działają dokładnie jak dotąd. Gradient i cień idą przez tokeny `--loca-navpill-bg`/`--loca-navpill-shadow` (sekcje 3/4/3b/4b), więc przełączają się razem z resztą palety bez osobnych reguł tutaj. */ html.loca-brand .nav-pill { background: var(--loca-navpill-bg); box-shadow: var(--loca-navpill-shadow); } html.loca-brand .user-info { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.7); box-shadow: var(--glass-hi); } html.loca-brand.theme-dark .user-info { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); } html.loca-brand.theme-dark.loca-new-colors .user-info { background: rgba(232,239,237,.06); border-color: rgba(127,211,193,.12); } html.loca-brand .user-name { color: var(--text); } html.loca-brand .user-role, html.loca-brand .app-version { color: var(--muted); } html.loca-brand .logout-btn { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.75); color: var(--muted); } html.loca-brand .logout-btn:hover { background: rgba(255,255,255,.85); color: var(--danger-dark); } html.loca-brand.theme-dark .logout-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--muted); } html.loca-brand.theme-dark.loca-new-colors .logout-btn { background: rgba(232,239,237,.06); border-color: rgba(127,211,193,.12); color: var(--muted); } html.loca-brand .sb-toggle, html.loca-brand .sb-burger { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.8); color: var(--muted); } html.loca-brand.theme-dark .sb-toggle, html.loca-brand.theme-dark .sb-burger { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } html.loca-brand.theme-dark.loca-new-colors .sb-toggle, html.loca-brand.theme-dark.loca-new-colors .sb-burger { background: rgba(232,239,237,.08); border-color: rgba(127,211,193,.14); } /* Dzwonek: sam komponent siedzi w `motion.css` sekcja 7 (port rareui). Tutaj zostaje WYŁĄCZNIE dociągnięcie go do palety marki. Glif jest w `--muted-strong`, a nie w `--muted`: czasza dzwonka ma krycie wypełnienia .55 (tak jak w pierwowzorze), więc słabszy z dwóch szarych spadłby pod próg widoczności. */ html.loca-brand .gmb-bell { color: var(--muted-strong); } html.loca-brand .gmb-bell:hover { color: var(--primary); } /* ─── 8. ZNAK FIRMOWY (sekcja 02) ───────────────────────────────────────── Trzy rosnące słupki na linii miejsca + punkt osiągniętej pozycji. Budowany ze span/i, nie z SVG — jak w dokumencie marki — dzięki czemu animacje jadą na transform/opacity, czyli po stronie kompozytora. Kolory znaku (`--lm-line`, `--lm-b1/b2/b3`, `--lm-dot`) są CELOWO POZA przełącznikiem palety — logo nie zmienia koloru w zależności od tego, czy ktoś włączył nowe kolory Locardly. `--lm-dot` jest osobnym tokenem od ogólnego `--accent` (który TAK przełącza się z paletą — używa go dzwonek powiadomień i aktywna zakładka mobilna) właśnie po to, żeby te dwa cele nie kolidowały. Geometria w PROCENTACH kwadratu odniesienia, więc skaluje się dowolnym rozmiarem bez przeliczania: linia 0/0 100%x12% · słupki 12%/40%/68% szer. 20%, wys. 22/38/56% punkt 68%/72% 20%x20% ZASADY (sekcja 08): bez gradientów, cieni i obrysów na samym znaku, proporcje słupków nienaruszalne, nigdy bez dolnej linii. */ html.loca-brand { --lm-dot: #E4A24C; } html.loca-brand .loca-mark { --lm-size: 26px; position: relative; display: inline-block; width: var(--lm-size); height: var(--lm-size); flex: none; vertical-align: -.18em; margin-right: .42em; } html.loca-brand .loca-mark > i { position: absolute; display: block; font-style: normal; } html.loca-brand .loca-mark > i:nth-child(1) { left:0; bottom:0; width:100%; height:12%; border-radius:99px; background: var(--lm-line, #0D1A18); } html.loca-brand .loca-mark > i:nth-child(2) { left:12%; bottom:12%; width:20%; height:22%; border-radius:99px 99px 2px 2px; background: var(--lm-b1, #2FA08D); } html.loca-brand .loca-mark > i:nth-child(3) { left:40%; bottom:12%; width:20%; height:38%; border-radius:99px 99px 2px 2px; background: var(--lm-b2, #0F6E62); } html.loca-brand .loca-mark > i:nth-child(4) { left:68%; bottom:12%; width:20%; height:56%; border-radius:99px 99px 2px 2px; background: var(--lm-b3, #0B3B35); } html.loca-brand .loca-mark > i:nth-child(5) { left:68%; bottom:72%; width:20%; height:20%; border-radius:50%; background: var(--lm-dot, #E4A24C); } html.loca-brand .loca-mark > i:nth-child(6) { left:68%; bottom:72%; width:20%; height:20%; border-radius:50%; border:2px solid var(--lm-dot, #E4A24C); } /* Panel jest teraz JASNY, więc znak zostaje w wariancie podstawowym (atramentowa linia, zielone słupki, bursztynowa kropka). Wariant na ciemnym tle włącza się dopiero w motywie ciemnym — niezależnie od tego, którą paletę kolorów ma reszta interfejsu. */ html.loca-brand.theme-dark .sidebar .loca-mark, html.loca-brand.theme-dark .login-logo .loca-mark { --lm-line: #E8EFED; --lm-b1: rgba(232,239,237,.5); --lm-b2: rgba(232,239,237,.75); --lm-b3: #E8EFED; --lm-dot: #EFB671; } /* Zwinięty panel: sb-collapsed .app-title dostaje font-size 0 (style.css:1392), a linia 1393 dokleja content "GMB" — ZASZYTY W CSS napis starej marki, którego nie łapie grep po GMB Manager. Gasimy go, zostaje sam znak jako sygnet (rozmiar w px przeżywa font-size 0). */ html.loca-brand.sb-collapsed .app-title::before { content: none !important; } html.loca-brand.sb-collapsed .loca-mark { --lm-size: 24px; margin-right: 0; } /* Poniżej 24 px dokument marki każe użyć wersji uproszczonej. */ html.loca-brand .loca-mark.loca-mark-min > i:nth-child(2) { display: none; } html.loca-brand .loca-mark.loca-mark-min > i:nth-child(1) { height: 14%; } html.loca-brand .loca-mark.loca-mark-min > i:nth-child(3), html.loca-brand .loca-mark.loca-mark-min > i:nth-child(4) { bottom: 14%; width: 22%; } /* ─── 9. ANIMACJE ZNAKU ─────────────────────────────────────────────────── Nazwy i czasy 1:1 z sekcji hero projektu. locaFloat świadomie pominięty — dotyczy punktu nad słupkiem WYKRESU, a wykresy to canvas Chart.js. */ @keyframes locaRise { from { transform: scaleY(.08); opacity: 0 } to { transform: scaleY(1); opacity: 1 } } @keyframes locaPop { 0% { transform: scale(0); opacity: 0 } 60% { transform: scale(1.18); opacity: 1 } 100% { transform: scale(1); opacity: 1 } } @keyframes locaSweep { from { transform: scaleX(0) } to { transform: scaleX(1) } } @keyframes locaPulse { 0%,100% { opacity: .35; transform: scale(.9) } 50% { opacity: 0; transform: scale(1.5) } } html.loca-brand .loca-mark-anim > i:nth-child(1) { transform-origin: left; animation: locaSweep .7s .05s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-anim > i:nth-child(2) { transform-origin: bottom; animation: locaRise .6s .20s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-anim > i:nth-child(3) { transform-origin: bottom; animation: locaRise .6s .32s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-anim > i:nth-child(4) { transform-origin: bottom; animation: locaRise .6s .44s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-anim > i:nth-child(5) { animation: locaPop .5s .62s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-anim > i:nth-child(6) { animation: locaPulse 2.8s 1.1s ease-out infinite; } @media (prefers-reduced-motion: reduce) { html.loca-brand .loca-mark-anim > i { animation: none !important; } } /* ─── 10. SZKŁO NA KOMPONENTACH ─────────────────────────────────────────── Karty (.card, .stat-card, .location-card) jadą w 100% z tokenów, więc szkło dostają za darmo: --surface + --blur + --shadow. Tutaj wyłącznie to, co w style.css jest HARDKODEM: modal (4944) i nakładka (705). */ html.loca-brand .modal { background: var(--surface-raised); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } html.loca-brand .modal-overlay { background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } html.loca-brand .location-card:hover, html.loca-brand .review-card:hover { box-shadow: 0 14px 34px -18px rgba(0,0,0,.22), var(--glass-hi); } html.loca-brand.loca-new-colors .location-card:hover, html.loca-brand.loca-new-colors .review-card:hover { box-shadow: 0 14px 34px -18px rgba(11,44,40,.32), var(--glass-hi); } /* ─── 11. PRZYCISKI, FORMULARZE, POD-ZAKŁADKI ───────────────────────────── Geometrii nie ruszamy — tylko powierzchnie i kolory. Gradient przycisku głównego i odznaki ocen są kolorem wpisanym na sztywno (nie tokenem), więc mają parę reguł: bazową (niebieską) i `.loca-new-colors` (zieloną). */ html.loca-brand .btn-primary { background: linear-gradient(135deg, #3b6ef0 0%, #2f5ad6 100%); color: #FFFFFF; box-shadow: 0 6px 16px -8px rgba(59,110,240,.55), inset 0 1px 0 rgba(255,255,255,.22); } html.loca-brand .btn-primary:hover { background: linear-gradient(135deg, #2f5ad6 0%, #2648b8 100%); } html.loca-brand.theme-dark .btn-primary { color: #FFFFFF; } html.loca-brand.loca-new-colors .btn-primary { background: linear-gradient(135deg, #0F6E62 0%, #17836F 100%); color: #F5F3EE; box-shadow: 0 6px 16px -8px rgba(15,110,98,.6), inset 0 1px 0 rgba(255,255,255,.22); } html.loca-brand.loca-new-colors .btn-primary:hover { background: linear-gradient(135deg, #0B564C 0%, #126C5C 100%); } /* Mięta wymaga CIEMNEGO tekstu (sekcja 04 projektu) — jasny dawał 2,90:1. */ html.loca-brand.theme-dark.loca-new-colors .btn-primary { background: linear-gradient(135deg, #2FA08D 0%, #4FBFA8 100%); color: #052A25; } html.loca-brand.theme-dark.loca-new-colors .btn-primary:hover { background: linear-gradient(135deg, #23806F 0%, #2FA08D 100%); color: #052A25; } html.loca-brand .btn-secondary { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); color: var(--text); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); box-shadow: var(--glass-hi); } html.loca-brand .btn-secondary:hover { background: rgba(255,255,255,.85); border-color: var(--primary); } html.loca-brand.theme-dark .btn-secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--text); } html.loca-brand.theme-dark.loca-new-colors .btn-secondary { background: rgba(232,239,237,.07); border-color: rgba(127,211,193,.16); color: var(--text); } html.loca-brand .btn-danger { background: var(--danger-dark); } html.loca-brand .btn-danger:hover { filter: brightness(.9); } html.loca-brand .form-control, html.loca-brand .filter-select, html.loca-brand .ui-sel-trigger, html.loca-brand .ui-date-trigger, html.loca-brand input[type="time"] { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.8); color: var(--text); box-shadow: var(--glass-hi); } html.loca-brand.theme-dark .form-control, html.loca-brand.theme-dark .filter-select, html.loca-brand.theme-dark .ui-sel-trigger, html.loca-brand.theme-dark .ui-date-trigger { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } html.loca-brand.theme-dark.loca-new-colors .form-control, html.loca-brand.theme-dark.loca-new-colors .filter-select, html.loca-brand.theme-dark.loca-new-colors .ui-sel-trigger, html.loca-brand.theme-dark.loca-new-colors .ui-date-trigger { background: rgba(10,20,19,.55); border-color: rgba(127,211,193,.16); } html.loca-brand .form-control::placeholder { color: #8A93A3; } html.loca-brand.loca-new-colors .form-control::placeholder { color: #8A9793; } html.loca-brand .form-control:focus, html.loca-brand .filter-select:focus, html.loca-brand .ui-sel-trigger:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,110,240,.14); background: rgba(255,255,255,.85); } html.loca-brand.loca-new-colors .form-control:focus, html.loca-brand.loca-new-colors .filter-select:focus, html.loca-brand.loca-new-colors .ui-sel-trigger:focus { box-shadow: 0 0 0 3px rgba(15,110,98,.14); } html.loca-brand .ui-sel-popup, html.loca-brand .ui-date-popup { background: var(--surface-raised); border-color: var(--border); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-lg); } html.loca-brand select option { background: var(--surface-solid); color: var(--text); } /* (.subtabs border-bottom-color usunięte w [alfa 0.335] — taca ma teraz obwódkę 1px ze wszystkich stron w style.css; osobny kolor dolnej krawędzi psułby ją.) */ /* Odznaki ocen (.rb-1 … .rb-5). Progi 1–3 / 4 / 5 są identyczne z ratingSentiment z [v1.03], a dokument marki nazywa je tak samo: negatywna / dobra / pozytywna (sekcja 06). */ html.loca-brand .rating-badge.rb-5 { background: #E1EAFB; color: #2f5ad6; } html.loca-brand .rating-badge.rb-4 { background: #EAF6EC; color: #1e6b34; } html.loca-brand .rating-badge.rb-3, html.loca-brand .rating-badge.rb-2, html.loca-brand .rating-badge.rb-1 { background: #FDECEC; color: #b91c1c; } html.loca-brand.theme-dark .rating-badge.rb-5 { background: #16213f; color: #8fabff; } html.loca-brand.theme-dark .rating-badge.rb-4 { background: #122318; color: #6ee79a; } html.loca-brand.theme-dark .rating-badge.rb-3, html.loca-brand.theme-dark .rating-badge.rb-2, html.loca-brand.theme-dark .rating-badge.rb-1 { background: #2a1414; color: #fca5a5; } html.loca-brand.loca-new-colors .rating-badge.rb-5 { background: #E7F0ED; color: #0B564C; } html.loca-brand.loca-new-colors .rating-badge.rb-4 { background: #FBF0DF; color: #8A5A15; } html.loca-brand.loca-new-colors .rating-badge.rb-3, html.loca-brand.loca-new-colors .rating-badge.rb-2, html.loca-brand.loca-new-colors .rating-badge.rb-1 { background: #F8E6E0; color: #8E3E26; } html.loca-brand.theme-dark.loca-new-colors .rating-badge.rb-5 { background: #10221F; color: #7FD3C1; } html.loca-brand.theme-dark.loca-new-colors .rating-badge.rb-4 { background: #241C10; color: #EFB671; } html.loca-brand.theme-dark.loca-new-colors .rating-badge.rb-3, html.loca-brand.theme-dark.loca-new-colors .rating-badge.rb-2, html.loca-brand.theme-dark.loca-new-colors .rating-badge.rb-1 { background: #1E1512; color: #E79B7E; } /* ─── 12. EKRAN LOGOWANIA (sekcja 07 projektu) ──────────────────────────── Tu marka pokazuje się pierwszy raz i tu dokument wprost każe wymienić pinezkę na znak Locardly. Tło idzie przez `--loca-bg-gradient`, jak reszta aplikacji (sekcja 5) — jedna definicja, nie osobny gradient. */ html.loca-brand .login-page { background-color: var(--bg); background-image: var(--loca-bg-gradient); } html.loca-brand .login-card { background: var(--surface-raised); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); } html.loca-brand .login-logo { font-size: 0; margin-bottom: 20px; text-align: left; } html.loca-brand .login-logo .loca-mark { --lm-size: 44px; margin-right: 0; vertical-align: baseline; } html.loca-brand .login-title { font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 6px; text-align: left; } html.loca-brand .login-subtitle { color: var(--muted); text-align: left; margin-bottom: 24px; } html.loca-brand .btn-google { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); border-radius: var(--radius); color: var(--text); font-weight: 500; box-shadow: var(--glass-hi); } html.loca-brand .btn-google:hover { background: rgba(255,255,255,.9); border-color: var(--primary); } html.loca-brand.theme-dark .btn-google { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--text); } html.loca-brand.theme-dark.loca-new-colors .btn-google { background: rgba(232,239,237,.07); border-color: rgba(127,211,193,.16); color: var(--text); } html.loca-brand .login-divider span { color: #8A93A3; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } html.loca-brand .login-error { color: var(--err-fg); } /* ─── 13. SZKŁO NA WINDOWS/ANDROID — świadome cofnięcie części [v1.61] ──── Blok 5656–5695 gasi backdrop-filter z !important na plt-noapple, bo przy ANIMOWANYCH blobach tła koszt kompozycji był realny. Tutaj tło jest STATYCZNE (sekcja 5), więc znika główna przyczyna tamtego kosztu — a bez szkła nie ma czego oceniać, skoro cała identyfikacja to „liquid glass". Kompromis: promień MNIEJSZY niż na Macu (18px zamiast 24/28px) i saturacja niżej. Gdyby na słabszym sprzęcie dało się to odczuć, zejdź do blur(12px) albo przywróć reguły [v1.61] — to jedyna sekcja, którą trzeba wtedy ruszyć. Wszystko poniżej jest TOKEN-BASED, więc działa identycznie w obu paletach bez osobnych reguł `.loca-new-colors`. */ html.loca-brand.plt-noapple { --blur: blur(18px) saturate(155%); --lg-blur: blur(14px) saturate(150%); } html.loca-brand.plt-noapple .sidebar, html.loca-brand.plt-noapple .modal, html.loca-brand.plt-noapple .login-card, html.loca-brand.plt-noapple .ui-date-popup, html.loca-brand.plt-noapple .ui-sel-popup, html.loca-brand.plt-noapple .bg-notif, html.loca-brand.plt-noapple .session-bar, html.loca-brand.plt-noapple .sb-burger { backdrop-filter: var(--blur) !important; -webkit-backdrop-filter: var(--blur) !important; } /* Powierzchnie muszą zostać PÓŁPRZEZROCZYSTE — blok [v1.61] podmieniał je na kryjące (#f4f7fd, #fcfdff, #141b33). Specyficzność (0,3,1) jak tam. */ html.loca-brand.plt-noapple .sidebar { background: var(--sidebar-bg); } html.loca-brand.plt-noapple .modal, html.loca-brand.plt-noapple .login-card { background: var(--surface-raised); } html.loca-brand.plt-noapple .modal-overlay { background: var(--overlay); } html.loca-brand.plt-noapple .bg-notif, html.loca-brand.plt-noapple .session-bar, html.loca-brand.plt-noapple .sb-burger { background: var(--surface-raised); } html.loca-brand.plt-noapple.theme-dark .sidebar { background: var(--sidebar-bg); } html.loca-brand.plt-noapple.theme-dark .modal, html.loca-brand.plt-noapple.theme-dark .login-card { background: var(--surface-raised); } html.loca-brand.plt-noapple.theme-dark .modal-overlay { background: var(--overlay); } html.loca-brand.plt-noapple.theme-dark .bg-notif, html.loca-brand.plt-noapple.theme-dark .session-bar, html.loca-brand.plt-noapple.theme-dark .sb-burger { background: var(--surface-raised); } /* ─── 14. POWŁOKA MOBILNA ───────────────────────────────────────────────── Górny pasek i dolna nawigacja pod-zakładek ([v1.56]/[v1.57]) są budowane z JS i mają własne, hardkodowane tła. Blok mobilny w style.css siedzi w @media, co NIE podnosi specyficzności, więc (0,2,1) wystarcza. Wszystko token-based — działa identycznie w obu paletach. */ @media (max-width: 900px) { html.loca-brand .m-appbar { background: var(--surface-raised); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--border-soft); } html.loca-brand .m-appbar-title { color: var(--text); letter-spacing: -.02em; } html.loca-brand .m-tabbar { background: var(--surface-raised); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-top: 1px solid var(--border-soft); } html.loca-brand .m-tab { color: var(--muted); } html.loca-brand .m-tab.active { color: var(--accent-text); } html.loca-brand .sidebar { background: var(--sidebar-bg); } } /* ─── 15. LOADER PRZEŁADOWANIA STRONY ───────────────────────────────────── Aplikacja jest wielostronicowa — każda nawigacja to nowy dokument (style.css [v1.88]: `@view-transition { navigation: auto }`). Ten overlay pokazuje animowany znak Locardly na czas, w którym strona się dogotowuje, zamiast surowej/pustej klatki. Wpisany wprost w każdą stronę jako PIERWSZY węzeł — maluje się zanim cokolwiek inne zdąży, i znika sam przez skrypt tuż obok siebie (DOMContentLoaded + twardy limit czasu), niezależnie od tego, czy reszta strony w ogóle się wykona. Tło idzie przez `--loca-bg-gradient` (sekcja 5) — loader ma zniknąć BEZ SZWU, więc tło pod spodem musi być identyczne z `body`/`.login-page`, niezależnie od wybranej palety. ŚWIADOMIE NIE dotyka `.sidebar`, `.nav-pill` ani `::view-transition-*` — to osobna, wcześniejsza warstwa (widoczna, zanim dokument w ogóle ma ukończony layout), przejazd pigułki i przenikanie korzenia z [v1.70]/ [v1.88] w style.css działają dalej dokładnie tak samo. */ html.loca-brand .loca-loader { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background-color: var(--bg); background-image: var(--loca-bg-gradient); opacity: 1; transition: opacity .32s ease; } html.loca-brand .loca-loader.loca-loader--out { opacity: 0; pointer-events: none; } html.loca-brand .loca-loader .loca-mark { --lm-size: 60px; margin-right: 0; } /* Loader ODSUNIĘTY od panelu bocznego — zasłania WYŁĄCZNIE obszar roboczy na prawo od zakładek. Powód jest funkcjonalny, nie estetyczny: przejazd pigułki aktywnej zakładki ([v1.88]) ma pozostać WIDOCZNY podczas ładowania — inaczej jedyna wskazówka „dokąd właśnie idziesz" ginie pod planszą. `left` bierze wprost `--sidebar-w` ze `style.css`, więc podąża za zwinięciem panelu (240 px → 76 px, `html.sb-collapsed`) BEZ osobnej reguły. Ta sama zmienna wyznacza `margin-left` obszaru roboczego, więc krawędź loadera i krawędź treści są z definicji w tym samym miejscu. Klasa `--aside` siedzi w MARKUPIE tylko tych stron, które mają panel (18 z 20; login.html i invite.html zostają pełnoekranowe). Świadomie NIE `body:has(.sidebar)`: pierwsze malowanie bywa odblokowane kotwicą `#locaLoaderReady` z początku `` ([alfa 0.280]), więc panel nie musi być jeszcze sparsowany — `:has()` dałby wtedy loader na pełną szerokość, który po chwili by przeskoczył. Klasa na samym elemencie jest znana w chwili, w której element powstaje. Ta reguła ma tę SAMĄ specyficzność co bazowe `inset: 0` powyżej — wygrywa KOLEJNOŚCIĄ. Nie przenoś jej ponad blok `.loca-loader`. */ html.loca-brand .loca-loader--aside { left: var(--sidebar-w, 0px); } /* Na telefonie panel jest szufladą POZA ekranem (`translateX(-102%)`), a obszar roboczy ma `margin-left: 0` — loader musi więc wrócić na pełną szerokość. */ @media (max-width: 900px) { html.loca-brand .loca-loader--aside { left: 0; } } /* Wariant SZYBKI znaku — ten sam pomysł (linia → trzy słupki → punkt) co `.loca-mark-anim` z sekcji 9, ale sekwencja zamyka się w ~0,5 s zamiast ~1,1 s. Odtwarzany przy KAŻDEJ nawigacji — pełna, wolniejsza wersja z ekranu logowania czułaby się tu ociężale. Osobne nazwy klas i keyframes, NIE nadpisania `.loca-mark-anim` — dwie niezależne prędkości tego samego znaku, żeby zmiana jednej nigdy przypadkiem nie poruszyła drugiej. */ @keyframes locaSweepFast { from { transform: scaleX(0) } to { transform: scaleX(1) } } @keyframes locaRiseFast { from { transform: scaleY(.08); opacity: 0 } to { transform: scaleY(1); opacity: 1 } } @keyframes locaPopFast { 0% { transform: scale(0); opacity: 0 } 60% { transform: scale(1.14); opacity: 1 } 100% { transform: scale(1); opacity: 1 } } html.loca-brand .loca-mark-fast > i:nth-child(1) { transform-origin: left; animation: locaSweepFast .26s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-fast > i:nth-child(2) { transform-origin: bottom; animation: locaRiseFast .22s .08s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-fast > i:nth-child(3) { transform-origin: bottom; animation: locaRiseFast .22s .13s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-fast > i:nth-child(4) { transform-origin: bottom; animation: locaRiseFast .22s .18s cubic-bezier(.2,.8,.2,1) both; } html.loca-brand .loca-mark-fast > i:nth-child(5) { animation: locaPopFast .2s .26s cubic-bezier(.2,.8,.2,1) both; } @media (prefers-reduced-motion: reduce) { html.loca-brand .loca-loader { transition: none; } html.loca-brand .loca-mark-fast > i { animation: none !important; } } @media (max-width: 900px) { html.loca-brand .loca-loader .loca-mark { --lm-size: 48px; } }