/* ================================================================== TOKENY — barvy, typografie, rytmus Fluidní systém. Každá hodnota je clamp(mobil, plynule, desktop) ukotvený na dvou bodech: 375 px = hodnota pro mobil 2560 px = hodnota z Figmy (návrh je kreslený na 1440) Na 1512 px (MacBook Pro 14") tak stránka vyjde zhruba na 85–90 % velikosti z Figmy — na tom se pracuje, ne se do toho kouká z metru. Plnou velikost z návrhu dostanou až velké externí monitory. Velikosti textů odpovídají návrhu — Figma je kreslená na Montserrat a web ho používá taky. Paleta a fonty jsou ZAMČENÉ (CLAUDE.md, sekce 1b + 2). ================================================================== */ :root { /* --- paleta (zamčeno) --- */ --c-noir: #121213; --c-papir: #F4F1E9; --c-off-white: #FAFAF9; --c-zlata: #BFA26F; --c-hnedoseda: #6E6558; --c-kourova: #8F8F8A; --c-placeholder:#EDEDEC; /* --- sémantické aliasy --- */ --bg: var(--c-off-white); --bg-alt: var(--c-papir); --bg-dark: var(--c-noir); --text: var(--c-noir); --text-muted: var(--c-hnedoseda); --text-label: var(--c-kourova); --text-on-dark: #FFFFFF; --accent: var(--c-zlata); --line: #E3E3E3; --line-on-dark: rgba(255, 255, 255, 0.18); /* Vlasová linka na papírovém podkladu — o odstín teplejší než --line, aby na béžové ploše nesvítila do modra. Není to barva značky. */ --line-papir: #DEDCD6; /* --- písma (zamčeno) --- */ --font-nadpis: 'Marcelio', 'Marcellus', Georgia, 'Times New Roman', serif; --font-text: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* váhy — navigace a tlačítka o řád silnější než běžný text */ --vaha-text: 300; --vaha-ui: 400; --vaha-tlacitko: 500; /* --- typografie (375 px → 2560 px) ------------------------------- */ --fs-h1: clamp(1.75rem, 26.14px + 0.9153vw, 3.125rem); /* 28 → 50 */ --fs-h2: clamp(1.625rem, 24.63px + 0.3662vw, 2.125rem); /* 26 → 34 */ --fs-h3: clamp(1.25rem, 19.31px + 0.1831vw, 1.5rem); /* 20 → 24 */ /* nadpis samostatného bloku uvnitř sekce — mezi H2 a H3 */ --fs-blok: clamp(1.5rem, 22.97px + 0.2746vw, 1.875rem); /* 24 → 30 */ --fs-h4: clamp(1.0625rem, 16.49px + 0.1373vw, 1.25rem); /* 17 → 20 */ --fs-cislo: clamp(1.625rem, 24.63px + 0.3662vw, 2.125rem); /* 26 → 34 */ --fs-lead: clamp(1rem, 15.66px + 0.0915vw, 1.125rem); /* 16 → 18 */ --fs-body: clamp(0.9375rem, 14.83px + 0.0458vw, 1rem); /* 15 → 16 */ --fs-small: clamp(0.84375rem, 13.41px + 0.0229vw, 0.875rem); /* 13,5 → 14 */ --fs-mini: clamp(0.78125rem, 12.41px + 0.0229vw, 0.8125rem);/* 12,5 → 13 */ /* Dřív 9,5 → 10,5 px — na telefonu na hraně čitelnosti, a stejně velké jsou i popisky polí ve formuláři odhadu. */ --fs-label: clamp(0.6875rem, 10.83px + 0.0458vw, 0.75rem); /* 11 → 12 */ --fs-nav: clamp(0.9375rem, 14.49px + 0.1373vw, 1.125rem); /* 15 → 18 */ --fs-tlacitko: clamp(0.90625rem, 14.07px + 0.1144vw, 1.0625rem); /* 14,5 → 17 */ /* řádkování — poměry z Figmy */ --lh-h1: 1.07; --lh-h2: 1.15; --lh-h3: 1.2; --lh-h4: 1.36; --lh-lead: 1.45; --lh-body: 1.45; --lh-small: 1.6; --lh-label: 1.6; --ls-label: 0.26em; --ls-nadpis: 0; /* --- rozestupy uvnitř sekcí --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); --space-8: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem); /* --- svislé odsazení sekcí (375 → 2560) -------------------------- Násobí se faktorem --f-vyska, který se snižuje na nízkých oknech. ---------------------------------------------------------------- */ --f-vyska: 1; --pad-xs: calc(clamp(1.5rem, 22.65px + 0.0916vw, 2.75rem) * var(--f-vyska)); /* 24 → 44 */ --pad-s: calc(clamp(2rem, 27.19px + 1.2815vw, 3.75rem) * var(--f-vyska)); /* 32 → 60 */ --pad-ms: calc(clamp(2.5rem, 31.08px + 2.3799vw, 5.75rem) * var(--f-vyska)); /* 40 → 92 */ --pad-sm: calc(clamp(2.5rem, 32.28px + 2.0595vw, 5.3125rem) * var(--f-vyska)); /* 40 → 85 */ --pad-m: calc(clamp(3rem, 37.36px + 2.8375vw, 6.875rem) * var(--f-vyska)); /* 48 → 110 */ --pad-l: calc(clamp(4rem, 52.67px + 3.0206vw, 8.125rem) * var(--f-vyska)); /* 64 → 130 */ --pad-xl: calc(clamp(5.5rem, 70.49px + 4.6682vw, 11.875rem) * var(--f-vyska)); /* 88 → 190 */ /* --- layout ------------------------------------------------------ Boční odsazení je fluidní: 20 px na mobilu → 90 px (Figma) na velkém monitoru. Sloupec obsahu je vždy nejvýš 1260 px. ---------------------------------------------------------------- */ --padding-x: clamp(1.25rem, 7.99px + 3.2036vw, 5.625rem); /* 20 → 90 */ --sirka-obsah: 78.75rem; /* 1260 px */ --sloupec-mezera: clamp(1rem, 0.6rem + 1.1vw, 1.5rem); /* 16 → 24 */ --vyska-headeru: clamp(4.5rem, 3.7rem + 3.2vw, 8.75rem); /* --- logo --- */ --logo-nav: clamp(5rem, 67.99px + 3.2037vw, 9.375rem); /* 80 → 150 */ --logo-paticka: clamp(5.75rem, 79.47px + 3.341vw, 10.3125rem);/* 92 → 165 */ /* --- ostatní --- */ --radius: 0; --prechod: 220ms cubic-bezier(0.22, 0.61, 0.36, 1); --z-header: 100; --z-menu: 200; } /* --- responzivita podle VÝŠKY okna --------------------------------- Široký, ale nízký monitor (nebo notebook s otevřenou konzolí) nepotřebuje stejné svislé mezery jako 27" na výšku. ------------------------------------------------------------------ */ /* Po malých krocích, ne po velkých. Se třemi zlomy se stalo, že dvě stejně velká okna v různých prohlížečích spadla každé jinam — stačila lišta záložek navíc — a stránka pak vypadala znatelně jinak. */ @media (min-width: 64rem) and (max-height: 56.25rem) { /* < 900 px */ :root { --f-vyska: 0.93; } } @media (min-width: 64rem) and (max-height: 52.5rem) { /* < 840 px */ :root { --f-vyska: 0.86; } } @media (min-width: 64rem) and (max-height: 48.75rem) { /* < 780 px */ :root { --f-vyska: 0.8; } } @media (min-width: 64rem) and (max-height: 45rem) { /* < 720 px */ :root { --f-vyska: 0.73; } } @media (min-width: 64rem) and (max-height: 41.25rem) { /* < 660 px */ :root { --f-vyska: 0.66; } } @media (min-width: 64rem) and (max-height: 37.5rem) { /* < 600 px */ :root { --f-vyska: 0.6; } } /* Velmi vysoké a úzké okno — obsah nesmí zůstat viset u kraje. */ @media (min-height: 62.5rem) and (max-width: 48rem) { :root { --f-vyska: 1.15; } } /* Na mobilu a tabletu je logo jediná značka v hlavičce — unese víc místa než na desktopu, kde vedle sebe má ještě celou navigaci. */ @media (max-width: 63.9375rem) { :root { --logo-nav: clamp(5.9375rem, 5.5rem + 1.9vw, 7.375rem); } /* 95 → 118 */ }