/* FinVize design tokens - docs/design.md, sections 1-3. * * One set of components, two sets of values. The theme switches with the * `data-theme` attribute on ; there is never a second component for the * light theme (design.md section 1). * * Semantics are binding across the whole site and must not be borrowed for * anything else: * --acc what grows and what arrives * --warn what leaves and what I owe * --acc2 a goal, or a number we worked out ourselves * A user fixes these in the first minute; every exception confuses them. */ :root { color-scheme: dark; /* --- surfaces and text --- */ --bg: #0c1a20; --surf: #132730; --surf2: #193440; --line: #264351; /* Pozadí pole bez obalu — v tabulce, v řádku pák, v panelu (zadavatel * 21. 8. 2026: „není poznat, že tam nějaké pole je"). O stupeň světlejší * než karta, tmavší než linka: odlišné pozadí, ne rámeček. */ --field: #1c3a47; --tx: #e6efec; --tx2: #9bb4b6; /* --- meaning --- */ --acc: #48be9e; --acc2: #e3c167; --on-gold: #1a1405; --warn: #e37b6b; --grid: rgba(255, 255, 255, 0.06); /* --- data series (design.md 1) --- */ --s1: #48be9e; --s2: #e8a64c; --s3: #6fb3d9; --s4: #c58bd0; --s5: #e37b6b; --s6: #9bb4b6; /* --- logo gradient: identical in both themes (design.md 7.2) --- */ --logo1: #12969e; --logo2: #33ba90; --logo3: #82db93; /* --- typography --- */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Inter Tight", system-ui, sans-serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; /* Scale from design.md 2. Nothing between these steps. */ --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-19: 1.1875rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-38: 2.375rem; --fs-54: 3.375rem; --lh-heading: 1.08; --lh-body: 1.62; --lh-book: 1.72; /* --- spacing: 4 8 12 16 20 26 36 56, nothing between (design.md 3) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 26px; --sp-7: 36px; --sp-8: 56px; /* --- shape --- */ --r-card: 14px; --r-field: 8px; --r-chip: 99px; /* --- layout widths (design.md 3) --- */ --w-public: 1120px; --w-content: 1180px; /* Rozcestník (Přehled) — dlaždice a grafy, ne text, takže míra pro * čtení se na něj nevztahuje. Viz `.fv-main--wide`. */ --w-wide: 1560px; --w-menu: 236px; --w-menu-collapsed: 64px; /* The handle on the right edge of the menu. A token because two rules have * to agree on it: the handle's width and the menu's right padding, which is * what keeps the entries from running under it. */ --w-grip: 16px; --w-book-text: 66ch; --w-margin-notes: 220px; --motion: 150ms; --transition: var(--motion) ease; /* --- grafický styl (zadavatel 15. 9. 2026, navrhy/NAVRH-GRAFICKE-STYLY.md) --- * Třetí rozměr vedle světlé a tmavé: tytéž komponenty a tatáž paleta, * jiné hodnoty těchhle tokenů. Výchozí hodnoty jsou dnešní podoba; sady * stylů jsou na konci souboru pod `[data-style="…"]`. */ --bw: 1px; /* tloušťka okraje karet a dlaždic */ --line-c: var(--line); /* barva okraje karet */ --surf-c: var(--surf); /* výplň karet; transparent = bez výplně */ --surf-c2: var(--surf2); --shadow-card: none; --shadow-pop: 0 10px 28px rgba(var(--shadow-ink), 0.28); --shadow-ink: 0, 0, 0; --fw-heading: 700; --fw-strong: 600; --fw-label: 500; --ls-heading: 0; --ls-label: 0; --tt-label: none; --font-label: var(--font-body); --label-size: var(--fs-13); --h1-size: var(--fs-30); --h2-size: var(--fs-24); --lift: 0px; /* zdvih karty a tlačítka při najetí */ --card-pad: var(--sp-5); --tile-scale: 1; /* násobek čísla na dlaždici */ --chart-scale: 1; /* násobek tloušťky čar grafu */ --chart-grid: 0; /* čárkování mřížky grafu; 0 = plná */ --grid-o: 1; /* průhlednost mřížky */ --chart-glow: none; --chart-italic: normal; --zebra: transparent; /* pruhování řádků tabulky */ --th-bg: var(--surf2); --th-c: var(--tx2); --row-line: 1px; /* linka mezi řádky tabulky */ --cell-py: var(--sp-2); --rule-top: none; /* linka nad nadpisem oddílu */ --rule-bottom: none; --rule-pad: 0; --column-rule: none; /* svislá linka mezi většími bloky (Novinový) */ --blur: none; /* rozostření pozadí pod kartou (Skleněný) */ /* Levé menu, horní pruh a hlavička veřejných stránek (zadavatel 15. 9. * 2026 večer: styl se má propsat i tam). */ /* Horní pruh je přilepený a stránka pod ním roluje: výplň panelu proto * nikdy není průhledná. Styl bez výplně dává barvu podkladu (`--bg`), * vypadá to jako nic a rolující obsah pod pruhem není vidět (nález * zadavatele 15. 9. 2026 večer u Minimalistického, Technického * a Novinového). */ --panel-bg: var(--surf); --panel-bw: 1px; --panel-line: var(--line); --panel-shadow: none; --panel-blur: none; /* Vodorovná linka pod horním pruhem a hlavičkou zvlášť od svislé linky * menu: Novinový má jen svislé (zadavatel 15. 9. 2026 večer). */ --strip-bw: var(--panel-bw); --chart-area: 0; /* plocha s přechodem pod čarou grafu */ } [data-theme="light"] { color-scheme: light; --bg: #eff3f1; --surf: #ffffff; --surf2: #f5f8f6; --line: #d3deda; --field: #e9efec; --tx: #0d2129; --tx2: #5a7379; --shadow-ink: 13, 33, 41; --acc: #0e8f72; /* Old gold, not bright gold: #D4AF37 has only 2.2:1 on white and is unusable * as text or as a thin line. design.md 1 rules it out explicitly. */ --acc2: #8a6a16; --on-gold: #ffffff; --warn: #b54a38; --grid: rgba(0, 0, 0, 0.05); /* Series darkened by roughly 18 % for contrast (design.md 1). s1, s5 and s6 * follow --acc, --warn and --tx2 so the semantics hold in both themes. */ --s1: #0e8f72; --s2: #be883e; --s3: #5b93b2; --s4: #a272ab; --s5: #b54a38; --s6: #5a7379; } /* Respect the system preference until the visitor chooses for themselves. * The choice is then stored and wins (zadani.md 16). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #eff3f1; --surf: #ffffff; --surf2: #f5f8f6; --line: #d3deda; --field: #e9efec; --tx: #0d2129; --tx2: #5a7379; --shadow-ink: 13, 33, 41; --acc: #0e8f72; --acc2: #8a6a16; --on-gold: #ffffff; --warn: #b54a38; --grid: rgba(0, 0, 0, 0.05); --s1: #0e8f72; --s2: #be883e; --s3: #5b93b2; --s4: #a272ab; --s5: #b54a38; --s6: #5a7379; } } /* ===== Grafické styly (zadavatel 15. 9. 2026) ============================== * Osm sad hodnot pro tokeny stylu z `:root`; bez atributu platí Výchozí. * Paleta (`--bg`, `--surf`, `--tx`, `--acc`, `--warn`, `--acc2`, řady) se * tu nikdy nepřepisuje a rozložení stránky se nemění (test to hlídá). * Okraj a výplň podle oddílu 2b návrhu: Harmonický a Stínový jen výplň, * Technický jen okraj, Minimalistický a Novinový ani jedno. */ [data-style="harmonicky"] { --panel-bw: 0px; --panel-shadow: 0 0 16px rgba(var(--shadow-ink), 0.16); --r-card: 20px; --r-field: 10px; --bw: 0px; --line-c: color-mix(in srgb, var(--line) 60%, transparent); --shadow-card: 0 1px 3px rgba(var(--shadow-ink), 0.14); --shadow-pop: 0 10px 28px rgba(var(--shadow-ink), 0.22); --fw-heading: 600; --ls-heading: -0.02em; --motion: 220ms; --zebra: color-mix(in srgb, var(--surf2) 55%, transparent); --row-line: 0px; } [data-style="minimalisticky"] { --panel-bg: var(--bg); --panel-line: color-mix(in srgb, var(--line) 75%, transparent); --r-card: 4px; --r-field: 4px; --r-chip: 4px; --bw: 0px; --surf-c: transparent; --surf-c2: transparent; --line-c: color-mix(in srgb, var(--line) 75%, transparent); --fw-heading: 500; --fw-strong: 500; --fw-label: 500; --tt-label: uppercase; --ls-label: 0.08em; --label-size: var(--fs-12); --motion: 0ms; --chart-scale: 0.6; --grid-o: 0; --th-bg: transparent; --th-c: var(--tx); --card-pad: 0px; } [data-style="technicky"] { --panel-bg: var(--bg); --r-card: 0px; --r-field: 0px; --r-chip: 0px; --surf-c: transparent; --surf-c2: transparent; --font-label: var(--font-data); --tt-label: uppercase; --ls-label: 0.06em; --label-size: var(--fs-12); --motion: 80ms; --chart-scale: 0.75; --zebra: color-mix(in srgb, var(--surf2) 70%, transparent); --th-bg: var(--surf2); --th-c: var(--tx); } [data-style="stinovy"] { --chart-area: 1; --panel-bw: 0px; --panel-shadow: 0 0 28px -6px rgba(var(--shadow-ink), 0.55); --r-card: 10px; --r-field: 6px; --bw: 0px; --shadow-card: 0 14px 28px -12px rgba(var(--shadow-ink), 0.6); --shadow-pop: 0 18px 40px -12px rgba(var(--shadow-ink), 0.7); --fw-strong: 700; --ls-heading: -0.035em; --tile-scale: 1.08; --motion: 180ms; --chart-scale: 1.4; --th-bg: var(--acc); --th-c: var(--bg); } /* Svislé linky Novinového (menu i linky mezi bloky) jsou od 16. 9. 2026 * stejně jemné jako vodorovné linky mezi řádky tabulky: 1 px v barvě linky, * ne 2 px v barvě textu (zadavatel: „ty svislé linky bych chtěl jemnější, * podobně, jako jsou tam standardně nějaké vodorovné linky“). */ [data-style="novinovy"] { --panel-bg: var(--bg); --chart-area: 1; --r-card: 2px; --r-field: 2px; --r-chip: 2px; --bw: 0px; --surf-c: transparent; --surf-c2: transparent; --card-pad: 0px; --ls-heading: -0.035em; --h1-size: var(--fs-38); --h2-size: var(--fs-30); --strip-bw: 0px; --column-rule: 1px solid var(--line-c); --chart-scale: 0.75; --chart-italic: italic; } [data-style="skleneny"] { --panel-bg: color-mix(in srgb, var(--surf) 55%, transparent); --panel-line: color-mix(in srgb, var(--tx) 18%, transparent); --panel-blur: blur(14px); --r-card: 16px; --r-field: 10px; --surf-c: color-mix(in srgb, var(--surf) 55%, transparent); --surf-c2: color-mix(in srgb, var(--surf2) 55%, transparent); --line-c: color-mix(in srgb, var(--tx) 18%, transparent); --shadow-card: 0 8px 30px -14px rgba(var(--shadow-ink), 0.5); --fw-heading: 600; --motion: 200ms; --blur: blur(14px); --chart-glow: drop-shadow(0 0 4px var(--s1)); } [data-style="zivy"] { --lift: -2px; --motion: 200ms; } /* ===== Vlastní styl (zadavatel 16. 9. 2026) ================================ * Devátý styl `vlastni` nemá vlastní sadu hodnot: skládá se z týchž úprav, * které zapínají předvolené styly, a každou nese jedno slovo v atributu * `data-custom` na (mezerou oddělený seznam, `~=` vybírá slovo). * Seznam slov, jejich skupiny a jména drží `app/styles.py`; stránka * `/vzhled/vlastni` je nabízí jako přepínače. Bez slova platí výchozí * hodnota z `:root`, takže prázdný vlastní styl vypadá jako Výchozí. * Paleta se ani tady nikdy nepřepisuje. */ /* Karty a dlaždice: okraj, výplň, rohy, stín. */ [data-style="vlastni"][data-custom~="bez-okraje"] { --bw: 0px; } [data-style="vlastni"][data-custom~="bez-vyplne"] { --surf-c: transparent; --surf-c2: transparent; --panel-bg: var(--bg); } /* Bez okraje i výplně odpadá vnitřní odsazení karty (návrh, oddíl 2b). */ [data-style="vlastni"][data-custom~="bez-okraje"][data-custom~="bez-vyplne"] { --card-pad: 0px; } [data-style="vlastni"][data-custom~="sklo"] { --surf-c: color-mix(in srgb, var(--surf) 55%, transparent); --surf-c2: color-mix(in srgb, var(--surf2) 55%, transparent); --line-c: color-mix(in srgb, var(--tx) 18%, transparent); --blur: blur(14px); --panel-bg: color-mix(in srgb, var(--surf) 55%, transparent); --panel-line: color-mix(in srgb, var(--tx) 18%, transparent); --panel-blur: blur(14px); } [data-style="vlastni"][data-custom~="rohy-ostre"] { --r-card: 0px; --r-field: 0px; --r-chip: 0px; } [data-style="vlastni"][data-custom~="rohy-mirne"] { --r-card: 4px; --r-field: 4px; --r-chip: 4px; } [data-style="vlastni"][data-custom~="rohy-oble"] { --r-card: 20px; --r-field: 10px; } [data-style="vlastni"][data-custom~="stin-jemny"] { --shadow-card: 0 1px 3px rgba(var(--shadow-ink), 0.14); --shadow-pop: 0 10px 28px rgba(var(--shadow-ink), 0.22); --panel-shadow: 0 0 16px rgba(var(--shadow-ink), 0.16); } [data-style="vlastni"][data-custom~="stin-vyrazny"] { --shadow-card: 0 14px 28px -12px rgba(var(--shadow-ink), 0.6); --shadow-pop: 0 18px 40px -12px rgba(var(--shadow-ink), 0.7); --panel-shadow: 0 0 28px -6px rgba(var(--shadow-ink), 0.55); } /* Karta bez okraje se stínem: hranu menu a pruhu dělá stín, ne linka * (jako Harmonický a Stínový). */ [data-style="vlastni"][data-custom~="bez-okraje"][data-custom~="stin-jemny"], [data-style="vlastni"][data-custom~="bez-okraje"][data-custom~="stin-vyrazny"] { --panel-bw: 0px; } /* Písmo: nadpisy a čísla, popisky, číslo na dlaždici. */ [data-style="vlastni"][data-custom~="nadpisy-lehke"] { --fw-heading: 500; --fw-strong: 500; } [data-style="vlastni"][data-custom~="nadpisy-stredni"] { --fw-heading: 600; --ls-heading: -0.02em; } [data-style="vlastni"][data-custom~="nadpisy-sevrene"] { --fw-strong: 700; --ls-heading: -0.035em; } [data-style="vlastni"][data-custom~="nadpisy-velke"] { --ls-heading: -0.035em; --h1-size: var(--fs-38); --h2-size: var(--fs-30); } [data-style="vlastni"][data-custom~="popisky-verzalky"] { --fw-label: 500; --tt-label: uppercase; --ls-label: 0.08em; --label-size: var(--fs-12); } [data-style="vlastni"][data-custom~="popisky-datove"] { --font-label: var(--font-data); --tt-label: uppercase; --ls-label: 0.06em; --label-size: var(--fs-12); } [data-style="vlastni"][data-custom~="vetsi-cisla"] { --tile-scale: 1.08; } /* Pohyb: délka přechodů a zdvih; oživení je v app.css, protože to jsou * animace, ne hodnoty tokenů. */ [data-style="vlastni"][data-custom~="pohyb-zadny"] { --motion: 0ms; } [data-style="vlastni"][data-custom~="pohyb-rychly"] { --motion: 80ms; } [data-style="vlastni"][data-custom~="pohyb-plynuly"] { --motion: 220ms; } [data-style="vlastni"][data-custom~="zdvih"] { --lift: -2px; } /* Grafy: čáry, plocha pod čarou, mřížka, záře, kurzíva popisků. */ [data-style="vlastni"][data-custom~="cary-tenke"] { --chart-scale: 0.7; } [data-style="vlastni"][data-custom~="cary-silne"] { --chart-scale: 1.4; } [data-style="vlastni"][data-custom~="plocha"] { --chart-area: 1; } [data-style="vlastni"][data-custom~="bez-mrizky"] { --grid-o: 0; } [data-style="vlastni"][data-custom~="zare"] { --chart-glow: drop-shadow(0 0 4px var(--s1)); } [data-style="vlastni"][data-custom~="kurziva"] { --chart-italic: italic; } /* Tabulky: řádky a hlavička. */ [data-style="vlastni"][data-custom~="radky-pruhy"] { --zebra: color-mix(in srgb, var(--surf2) 55%, transparent); --row-line: 0px; } [data-style="vlastni"][data-custom~="radky-pruhy-linky"] { --zebra: color-mix(in srgb, var(--surf2) 70%, transparent); } [data-style="vlastni"][data-custom~="hlavicka-bez-pozadi"] { --th-bg: transparent; --th-c: var(--tx); } [data-style="vlastni"][data-custom~="hlavicka-barevna"] { --th-bg: var(--acc); --th-c: var(--bg); } /* Linky: svislé mezi většími bloky (pravidla v app.css), horní pruh bez * vodorovné linky. */ [data-style="vlastni"][data-custom~="svisle-linky"] { --column-rule: 1px solid var(--line-c); } [data-style="vlastni"][data-custom~="bez-linky-pruhu"] { --strip-bw: 0px; }