/* Gosscard — design tokens (sjednocená grafika). Centrální proměnné odvozené z publicredesign.css (primární modrá #007bff). Nové/refaktorované UI má odkazovat na tyto tokeny, ne na natvrdo psané hex. */ :root { /* Značka / primární akce */ /* --gc-primary je značková/dekorativní modrá (rámečky, ikony, gradienty) — 3,98:1 na bílé, takže NEsmí nést běžný bílý text. Interaktivní plochy s bílým popiskem a modré odkazy proto sahají po -strong (5,22:1); -darker je jejich hover/active. */ --gc-primary: #007bff; --gc-primary-strong: #0069d9; --gc-primary-darker: #0056b3; /* 7,04:1 na bílé — hover/active nad -strong */ --gc-primary-soft: #eff6ff; --gc-primary-grad: linear-gradient(135deg, #007bff, #3b95ff); /* Textová varianta gradientu: složená z -strong a -darker, tedy ze stejných barev jako plné plochy — žádný nový odstín. Nejsvětlejší zastávka #0069d9 dává 5,22:1, takže bílý popisek projde po celé délce přechodu. --gc-primary-grad zůstává pro dekoraci bez textu (pruhy, pozadí, pruhy pinů). */ --gc-primary-grad-strong: linear-gradient(135deg, #0069d9, #0056b3); /* Pozitivní / „přidat se" (going) */ /* Stejné dělení jako u primární: --gc-join je dekorativní (3,30:1 s bílým textem), plochy s bílým popiskem berou -strong (5,02:1), hover -darker (9,11:1). */ --gc-join: #16a34a; --gc-join-strong: #15803d; --gc-join-darker: #14532d; --gc-join-grad: linear-gradient(135deg, #16a34a, #22c55e); /* Textová varianta: -strong → -darker. Nejsvětlejší zastávka #15803d = 5,02:1. */ --gc-join-grad-strong: linear-gradient(135deg, #15803d, #14532d); --gc-join-soft: #f0fdf4; /* Destruktivní. Stejné pravidlo jako u primární: --gc-danger je dekorativní (3,76:1 s bílým textem), plochy s bílým popiskem berou -strong (4,83:1). */ --gc-danger: #ef4444; --gc-danger-strong: #dc2626; --gc-danger-darker: #b91c1c; /* 6,47:1 na bílé — hover/active nad -strong */ --gc-danger-soft: #fef2f2; --gc-danger-press: #fee2e2; /* o stupeň sytější než -soft: stav :active */ /* Písmo — jediný zdroj pravdy pro rodinu. Poppins se načítá self-hosted z gosscard-fonts.css (CSP nepustí Google Fonts). Fallback stack drží podobné metriky, než webfont doskáče (font-display: swap). */ --gc-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --gc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Povrchy a text */ --gc-surface: #ffffff; --gc-bg-soft: #f8fafc; --gc-border: #e2e8f0; --gc-text: #1a202c; --gc-text-muted: #5c6b7f; /* 5,4:1 na bílé - puvodni #718096 nesplnovalo WCAG AA */ --gc-text-faint: #64748b; /* 4,8:1 na bílé - puvodni #a0aec0 melo 2,6:1 */ /* Tvar a stín */ --gc-radius: 12px; --gc-radius-lg: 16px; --gc-radius-pill: 999px; /* Dvojitý prstenec (bílý vnitřní + modrý vnější). Původní rgba(0,123,255,.3) vycházel po smíchání s bílou na 1,49:1 — pod 3:1, které WCAG 1.4.11 po indikátoru fokusu žádá, a na tmavém tlačítku nebyl vidět vůbec. Bílá vrstva je na světlém podkladu neviditelná, na tmavém dělá kontrastní podložku. */ --gc-focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #0069d9; --gc-shadow-sm: 0 2px 6px rgba(0, 0, 0, .06); --gc-shadow-md: 0 10px 26px rgba(30, 64, 175, .13); --gc-shadow-fab: 0 6px 18px rgba(0, 123, 255, .4); --gc-shadow-sheet: 0 -8px 30px rgba(0, 0, 0, .22); /* --- Bezpečná zóna pod/nad obsahem (systémové lišty) ------------------- Prvky s `position: fixed` měří `bottom` od hrany OKNA, tedy i pod spodní systémovou lištou Androidu (tlačítka zpět/domů) nebo pod home indikátorem iOS. Obsah v toku je v pořádku — appka odsazuje `.page-body` sama — ale fixní ovládání na tom odsazení nezávisí, protože měří od okna. Proto tyhle tokeny: přičítají se k vlastnímu odstupu prvku od okraje. Dva zdroje hodnot: - `env(safe-area-inset-*)` — prohlížeč. Mimo nainstalovanou PWA je 0, proto je tahle část schválně jen v `display-mode` dotazu níž: běžný prohlížeč (i mobilní Safari s viewport-fit=cover) se nesmí změnit. - `--gc-native-*` — nativní Android WebView. Ten `env()` neplní vůbec, hodnoty proto vkládá appka (MainActivity.injectSafeArea) do `:root`. `min(…, 56px)` je pojistka: appka posílá v `--gc-native-bottom` i výšku klávesnice (IME), a to by ovládání vystřelilo doprostřed obrazovky. Nejvyšší spodní lišta (třítlačítková) má 48 dp. */ --gc-safe-top: var(--gc-native-top, 0px); --gc-safe-bottom: min(var(--gc-native-bottom, 0px), 56px); --gc-safe-left: var(--gc-native-left, 0px); --gc-safe-right: var(--gc-native-right, 0px); } /* V nainstalované PWA jde bezpečná zóna z env() — appka tam neběží, takže se obě hodnoty nikdy nesčítají, jen se bere ta větší. */ @media (display-mode: standalone), (display-mode: fullscreen) { :root { --gc-safe-top: max(env(safe-area-inset-top, 0px), var(--gc-native-top, 0px)); --gc-safe-bottom: max(env(safe-area-inset-bottom, 0px), min(var(--gc-native-bottom, 0px), 56px)); --gc-safe-left: max(env(safe-area-inset-left, 0px), var(--gc-native-left, 0px)); --gc-safe-right: max(env(safe-area-inset-right, 0px), var(--gc-native-right, 0px)); } } /* --- Sjednocení písma napříč knihovnami třetích stran --------------------- Vlastní CSS už rodinu bere jen z --gc-font, ale vendor styly si ji vnucují vlastní. Ověřeno v prohlížeči na /map: jQuery UI přebíjelo písmo u 130 prvků (dialogy, jejich zavírací křížky, inputy i tlačítka), MapLibre u 8. Tenhle soubor se linkuje až za jquery-ui.css, takže stačí stejná specificita bez !important. Záměrně NEpřepisujeme: - "Font Awesome 6 Free" a "Glyphicons Halflings" — ikonové fonty, - .leaflet-control-zoom-in/out — Leaflet tam má monospace, aby se +/− drželo v optické ose tlačítka. */ html { font-family: var(--gc-font); } .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--gc-font); } /* Mapové knihovny se linkují až v konkrétních pohledech (leaflet.css, maplibre-gl.css), tedy AŽ ZA tímhle souborem — na pořadí bychom prohráli, proto tady !important. Na .leaflet-control-zoom-in/out to nedopadne: ty mají vlastní pravidlo, takže si monospace pro +/− udrží. */ .maplibregl-map, .maplibregl-ctrl-attrib, .maplibregl-popup, .leaflet-container { font-family: var(--gc-font) !important; }