/* ========================================================== CENTRÁLNÍ TYPOGRAFIE + DESIGN SYSTEM – BYLINKY Joomla 5 + Cassiopeia + Bootstrap 5 Fonts: 11 heading variant (serif i sans) + Source Sans 3 (body) Font scheme přepíná Cassiopeia child šablona (templateDetails.xml) Nadpisový font: parametr bylinkyHeadingFont → ========================================================== */ /* ========================================================== 1) TYPOGRAPHY SCALE Design source (varianta1): Desktop: H1 52/58, H1.2 42/48, H2 36/40, H3 28/32, H4 22/28 S1 24/32, S2 18/26, S3 16/24 B1 16/24, B2 20/28, C1 14/22, C2 12/20 Label 12/20, Button 12/20 Mobile: H1 32/36, H1.2 28/32, H2 24/28, H3 22/26, H4 18/22 Fluid range: 360px → 1320px ========================================================== */ /* Font se načítá přes Cassiopeia child šablonu (index.php generuje Google Fonts URL + nastavuje --font-head inline podle volby bylinkyHeadingFont v templateDetails.xml). Volby: playfair, cormorant, fraunces, crimson_pro, crimson_text, dm_serif, lora, pt_serif, montserrat, albert_sans, fira_sans */ :root { /* Fluid helpers */ --typo-vw-min: 360; --typo-vw-max: 1320; --typo-from: 360px; --typo-to: 1320px; --typo-range: 960px; /* Font stacks */ --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Cassiopeia compatibility */ --cassiopeia-font-family-headings: var(--font-head); --cassiopeia-font-family-body: var(--font-body); /* ──────── Headings ──────── */ /* H1: 32px → 52px */ --typo-h1-fs: clamp(32px, calc(11.333px + 2.083vw), 52px); --typo-h1-lh: clamp(36px, calc(13.083px + 2.292vw), 58px); /* H1.2: 28px → 42px */ --typo-h12-fs: clamp(28px, calc(13.333px + 1.458vw), 42px); --typo-h12-lh: clamp(32px, calc(15.333px + 1.667vw), 48px); /* H2: 24px → 36px */ --typo-h2-fs: clamp(24px, calc(11.5px + 1.25vw), 36px); --typo-h2-lh: clamp(28px, calc(15.5px + 1.25vw), 40px); /* H3: 22px → 28px */ --typo-h3-fs: clamp(22px, calc(15.75px + 0.625vw), 28px); --typo-h3-lh: clamp(26px, calc(19.75px + 0.625vw), 32px); /* H4: 18px → 22px */ --typo-h4-fs: clamp(18px, calc(13.833px + 0.417vw), 22px); --typo-h4-lh: clamp(22px, calc(15.75px + 0.625vw), 28px); /* ──────── Subtitles ──────── */ /* S1: 20px → 24px */ --typo-s1-fs: clamp(20px, calc(15.833px + 0.417vw), 24px); --typo-s1-lh: clamp(28px, calc(23.833px + 0.417vw), 32px); /* S2: 16px → 18px */ --typo-s2-fs: clamp(16px, calc(13.917px + 0.208vw), 18px); --typo-s2-lh: clamp(24px, calc(21.917px + 0.208vw), 26px); /* S3: 15px → 16px (fixed) */ --typo-s3-fs: 16px; --typo-s3-lh: 24px; /* ──────── Quote ──────── */ /* Quote: 28px → 36px */ --typo-quote-fs: clamp(28px, calc(19.667px + 0.833vw), 36px); --typo-quote-lh: clamp(36px, calc(27.667px + 0.833vw), 44px); /* ──────── Body / Captions / UI ──────── */ --typo-b1-fs: 16px; --typo-b1-lh: 24px; --typo-b2-fs: clamp(16px, calc(11.833px + 0.417vw), 20px); --typo-b2-lh: clamp(24px, calc(19.833px + 0.417vw), 28px); --typo-c1-fs: 14px; --typo-c1-lh: 22px; --typo-c2-fs: 12px; --typo-c2-lh: 20px; --typo-label-fs: 12px; --typo-label-lh: 20px; --typo-btn-fs: 12px; --typo-btn-lh: 20px; /* ──────── Global ──────── */ --typo-letter-spacing: 0; --typo-letter-spacing-caps: 0.08em; /* Weights */ --typo-w-head: 700; --typo-w-sub: 600; --typo-w-body: 400; --typo-w-ui: 600; /* Bootstrap base body */ --bs-body-font-family: var(--font-body); --bs-body-font-size: var(--typo-b1-fs); --bs-body-line-height: 1.5; } /* ========================================================== 1b) HEADING FONT VARIANTS Cassiopeia child šablona (index.php) nastavuje: • --font-head inline (font stack podle volby) • data-font-head na (klíč pro tyto selektory) Tato sekce doplňuje OPTICKÉ VYVÁŽENÍ specifické pro každé písmo (tracking a váhy). Default je Playfair Display (viz :root výše, žádný override). ========================================================== */ /* ──────── SERIFOVÉ VARIANTY ──────── */ /* Cormorant Garamond – elegantní, tenčí řez, sluší mu displejové použití */ html[data-font-head="cormorant"] { --typo-w-head: 600; /* ne 700, aby neztrácel eleganci */ --typo-w-sub: 500; } html[data-font-head="cormorant"] h1, html[data-font-head="cormorant"] .h1, html[data-font-head="cormorant"] .typo-h1, html[data-font-head="cormorant"] .typo-h12 { font-weight: 600; letter-spacing: -0.005em; } /* Fraunces – moderní s "wobble" glyfy, dobré jsou střední váhy */ html[data-font-head="fraunces"] { --typo-w-head: 700; --typo-w-sub: 500; } html[data-font-head="fraunces"] h1, html[data-font-head="fraunces"] .h1, html[data-font-head="fraunces"] .typo-h1, html[data-font-head="fraunces"] .typo-h12 { letter-spacing: -0.02em; /* Fraunces má velký kontrast, lepší kompaktněji */ font-weight: 700; } /* Crimson Pro – literární, tenčí, optimalizovaný pro delší čtení */ html[data-font-head="crimson_pro"] { --typo-w-head: 700; --typo-w-sub: 600; } /* Crimson Text – klasický knižní serif (má jen 400/600/700) */ html[data-font-head="crimson_text"] { --typo-w-head: 700; --typo-w-sub: 600; } /* DM Serif Display – pouze 400 (!), ale v displejovém použití velmi výrazný. Pozor: všechny nadpisy MUSÍ být 400, jinak prohlížeč faux-bold rozmazává. */ html[data-font-head="dm_serif"] { --typo-w-head: 400; --typo-w-sub: 400; } html[data-font-head="dm_serif"] h1, html[data-font-head="dm_serif"] .h1, html[data-font-head="dm_serif"] .typo-h1, html[data-font-head="dm_serif"] .typo-h12, html[data-font-head="dm_serif"] h2, html[data-font-head="dm_serif"] .h2, html[data-font-head="dm_serif"] .typo-h2, html[data-font-head="dm_serif"] h3, html[data-font-head="dm_serif"] .h3, html[data-font-head="dm_serif"] .typo-h3, html[data-font-head="dm_serif"] h4, html[data-font-head="dm_serif"] .h4, html[data-font-head="dm_serif"] .typo-h4 { font-weight: 400; letter-spacing: -0.01em; } /* Lora – vyvážený, čitelný serif, dobrá univerzálnost */ html[data-font-head="lora"] { --typo-w-head: 600; /* Lora 700 je hodně těžká, 600 je lepší default */ --typo-w-sub: 500; } /* PT Serif – má jen 400 a 700, jednoduchý a spolehlivý */ html[data-font-head="pt_serif"] { --typo-w-head: 700; --typo-w-sub: 400; } /* ──────── SANS-SERIF VARIANTY ──────── */ /* Pro sans-serif platí společná pravidla: - mírně záporný tracking u velkých nadpisů (kompaktnější dojem) - vyšší váhy (Playfair má silnější kontrast "z designu", sans-serif to musí dohnat vahou) */ html[data-font-head="montserrat"], html[data-font-head="albert_sans"], html[data-font-head="fira_sans"] { --typo-w-head: 700; --typo-w-sub: 600; } html[data-font-head="montserrat"] h1, html[data-font-head="montserrat"] .h1, html[data-font-head="montserrat"] .typo-h1, html[data-font-head="montserrat"] .typo-h12, html[data-font-head="albert_sans"] h1, html[data-font-head="albert_sans"] .h1, html[data-font-head="albert_sans"] .typo-h1, html[data-font-head="albert_sans"] .typo-h12, html[data-font-head="fira_sans"] h1, html[data-font-head="fira_sans"] .h1, html[data-font-head="fira_sans"] .typo-h1, html[data-font-head="fira_sans"] .typo-h12 { letter-spacing: -0.02em; font-weight: 800; } html[data-font-head="montserrat"] h2, html[data-font-head="montserrat"] .h2, html[data-font-head="montserrat"] .typo-h2, html[data-font-head="albert_sans"] h2, html[data-font-head="albert_sans"] .h2, html[data-font-head="albert_sans"] .typo-h2, html[data-font-head="fira_sans"] h2, html[data-font-head="fira_sans"] .h2, html[data-font-head="fira_sans"] .typo-h2 { letter-spacing: -0.015em; font-weight: 700; } html[data-font-head="montserrat"] h3, html[data-font-head="montserrat"] .h3, html[data-font-head="montserrat"] .typo-h3, html[data-font-head="albert_sans"] h3, html[data-font-head="albert_sans"] .h3, html[data-font-head="albert_sans"] .typo-h3, html[data-font-head="fira_sans"] h3, html[data-font-head="fira_sans"] .h3, html[data-font-head="fira_sans"] .typo-h3 { letter-spacing: -0.01em; font-weight: 700; } html[data-font-head="montserrat"] h4, html[data-font-head="montserrat"] .h4, html[data-font-head="montserrat"] .typo-h4, html[data-font-head="albert_sans"] h4, html[data-font-head="albert_sans"] .h4, html[data-font-head="albert_sans"] .typo-h4, html[data-font-head="fira_sans"] h4, html[data-font-head="fira_sans"] .h4, html[data-font-head="fira_sans"] .typo-h4 { letter-spacing: 0; font-weight: 600; } /* Citace/blockquote – používají vybraný nadpisový font (včetně sans variant). Pro sans-serif použijeme střední váhu místo italic – kurzivní sans vypadá slabě. */ html[data-font-head="montserrat"] .typo-quote, html[data-font-head="albert_sans"] .typo-quote, html[data-font-head="fira_sans"] .typo-quote, html[data-font-head="montserrat"] blockquote, html[data-font-head="albert_sans"] blockquote, html[data-font-head="fira_sans"] blockquote { font-style: normal; font-weight: 500; } /* ────────────────────────────────────────────────────────── Element defaults ────────────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: var(--typo-b1-fs); line-height: var(--typo-b1-lh); font-weight: var(--typo-w-body); color: var(--color-text); background: var(--color-bg); } h1, .h1 { font-family: var(--font-head); font-size: var(--typo-h1-fs); line-height: var(--typo-h1-lh); font-weight: var(--typo-w-head); letter-spacing: -0.01em; } h2, .h2 { font-family: var(--font-head); font-size: var(--typo-h2-fs); line-height: var(--typo-h2-lh); font-weight: var(--typo-w-head); letter-spacing: var(--typo-letter-spacing); } h3, .h3 { font-family: var(--font-head); font-size: var(--typo-h3-fs); line-height: var(--typo-h3-lh); font-weight: var(--typo-w-head); letter-spacing: var(--typo-letter-spacing); } h4, .h4 { font-family: var(--font-head); font-size: var(--typo-h4-fs); line-height: var(--typo-h4-lh); font-weight: var(--typo-w-sub); letter-spacing: var(--typo-letter-spacing); } .ff-body { font-family: var(--font-body) !important; } .ff-head { font-family: var(--font-head) !important; } /* ────────────────────────────────────────────────────────── Utility classes ────────────────────────────────────────────────────────── */ .typo-h1 { font-size: var(--typo-h1-fs); line-height: var(--typo-h1-lh); font-weight: var(--typo-w-head); font-family: var(--font-head); letter-spacing: -0.01em; } .typo-h12 { font-size: var(--typo-h12-fs); line-height: var(--typo-h12-lh); font-weight: var(--typo-w-head); font-family: var(--font-head); letter-spacing: -0.01em; } .typo-h2 { font-size: var(--typo-h2-fs); line-height: var(--typo-h2-lh); font-weight: var(--typo-w-head); font-family: var(--font-head); letter-spacing: var(--typo-letter-spacing); } .typo-h3 { font-size: var(--typo-h3-fs); line-height: var(--typo-h3-lh); font-weight: var(--typo-w-head); font-family: var(--font-head); letter-spacing: var(--typo-letter-spacing); } .typo-h4 { font-size: var(--typo-h4-fs); line-height: var(--typo-h4-lh); font-weight: var(--typo-w-sub); font-family: var(--font-head); letter-spacing: var(--typo-letter-spacing); } .typo-s1 { font-size: var(--typo-s1-fs); line-height: var(--typo-s1-lh); font-weight: var(--typo-w-sub); letter-spacing: var(--typo-letter-spacing); } .typo-s2 { font-size: var(--typo-s2-fs); line-height: var(--typo-s2-lh); font-weight: var(--typo-w-sub); letter-spacing: var(--typo-letter-spacing); } .typo-s3 { font-size: var(--typo-s3-fs); line-height: var(--typo-s3-lh); font-weight: var(--typo-w-sub); letter-spacing: var(--typo-letter-spacing); } .typo-quote { font-size: var(--typo-quote-fs); line-height: var(--typo-quote-lh); font-weight: var(--typo-w-sub); font-family: var(--font-head); font-style: italic; } .typo-b1 { font-size: var(--typo-b1-fs); line-height: var(--typo-b1-lh); font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); } .typo-b2 { font-size: var(--typo-b2-fs); line-height: var(--typo-b2-lh); font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); } .typo-c1 { font-size: var(--typo-c1-fs); line-height: var(--typo-c1-lh); font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); } .typo-c2 { font-size: var(--typo-c2-fs); line-height: var(--typo-c2-lh); font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); } .typo-label { font-size: var(--typo-label-fs); line-height: var(--typo-label-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing-caps); text-transform: uppercase; } .typo-btn { font-size: var(--typo-btn-fs); line-height: var(--typo-btn-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing-caps); text-transform: uppercase; } /* Small text */ .small, small { font-size: var(--typo-c2-fs); line-height: var(--typo-c2-lh); } /* Form labels */ .form-label, .control-label, .form-check-label { font-size: var(--typo-label-fs); line-height: var(--typo-label-lh); font-weight: var(--typo-w-ui); } /* ========================================================== 2) DESIGN SYSTEM – BYLINKY Color palette derived from varianta1 design ========================================================== */ :root { /* ──────── Base surfaces ──────── */ --c-surface: #FAF6F0; /* cream bg */ --c-canvas: #F5EDE3; /* cream-warm, alternating sections */ --c-paper: #EFF3EC; /* sage-bg, light green tint */ /* ──────── Cream scale 50–400 ──────── */ --c-cream-50: #FAF6F0; --c-cream-100: #F5EDE3; --c-cream-200: #F0EBE5; --c-cream-300: #E2DCD4; --c-cream-400: #A69E94; /* ──────── Forest Green 50–400 (PRIMARY) ──────── */ --c-forest-50: #EFF3EC; --c-forest-100: #D4DDCD; --c-forest-200: #B8C5AE; --c-forest-300: #7A8B6F; /* sage */ --c-forest-400: #2C3E2D; /* forest deep */ /* ──────── Forest extended ──────── */ --c-forest-deep: #1A2B1C; --c-forest-sage: #5C6B52; --c-forest-darker: #3E5035; /* ──────── Bark / Brown (footer, accents) ──────── */ --c-bark-50: #F0EBE5; --c-bark-100: #D7CCC8; --c-bark-200: #A1887F; --c-bark-300: #6B5544; --c-bark-400: #4A3728; /* ──────── Gold / Accent (CTA, highlights) ──────── */ --c-gold-50: #FFF8EC; --c-gold-100: #E8D5A8; --c-gold-200: #C8A96E; --c-gold-300: #B8944A; --c-gold-400: #9A7B3A; /* ──────── Danger / Warning ──────── */ --c-red-50: #FFCDD2; --c-red-300: #EF5350; --c-red-400: #B71C1C; /* ──────── Teal (accent cards) ──────── */ --c-teal-50: #E0F2F1; --c-teal-200: #80CBC4; --c-teal-300: #4DB6AC; /* ──────── Semantic tokens ──────── */ --color-bg: var(--c-surface); --color-bg-alt: var(--c-canvas); --color-surface: var(--c-surface); --color-text: #3B3129; --color-text-light: #7A6F63; --color-text-muted: #A69E94; --color-border: #E2DCD4; --color-border-light: #F0EBE5; /* Primary = Forest (buttons, links, active states) */ --color-primary: var(--c-forest-400); --color-primary-hover: var(--c-forest-sage); --color-primary-weak: var(--c-forest-100); /* Accent = Gold (CTA buttons, highlights) */ --color-accent: var(--c-gold-200); --color-accent-hover: var(--c-gold-300); --color-accent-light: var(--c-gold-100); --color-success: #137333; --color-info: #1E88A8; --color-warning: #F5A000; --color-danger: var(--c-red-400); --on-primary: var(--c-surface); --on-accent: var(--c-forest-deep); /* ──────── Radius ──────── */ --radius-sm: 8px; --radius-card: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 40px; /* ──────── Focus ring ──────── */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-forest-400) 30%, transparent); /* ──────── Shadows ──────── */ --shadow-sm: 0 2px 8px rgba(44, 62, 45, .06); --shadow-md: 0 8px 24px rgba(44, 62, 45, .08); --shadow-lg: 0 16px 48px rgba(44, 62, 45, .12); --shadow-xl: 0 24px 64px rgba(44, 62, 45, .16); /* ──────── Derived helpers ──────── */ --bg-forest-08: color-mix(in srgb, var(--c-forest-400) 8%, transparent); --bg-forest-10: color-mix(in srgb, var(--c-forest-400) 10%, transparent); /* ========================================================== 2c) CASSIOPEIA TEMPLATE VARIABLES Přemostění design tokenů → Cassiopeia šablona (Joomla 4/5) ========================================================== */ /* Cassiopeia barvy */ --cassiopeia-color-primary: #2C3E2D; /* forest-400 */ --cassiopeia-color-link: #2C3E2D; /* forest-400 */ --cassiopeia-color-hover: #5C6B52; /* forest-sage */ /* Template proměnné (Cassiopeia interní) */ --template-bg-color: #FAF6F0; /* cream / surface */ --template-text-color: #3B3129; /* color-text */ --template-link-color: #2C3E2D; /* forest-400 */ --template-special-color: #C8A96E; /* gold-200 / accent */ /* Hue (Cassiopeia "Template Colour") — forest #2C3E2D ≈ HSL(125, 16%, 21%) → hue 125 */ --hue: 125; /* ========================================================== 2d) BOOTSTRAP 5 COLOR VARIABLES Přemostění design tokenů → BS5 utility třídy a komponenty ========================================================== */ /* ── Primary = Forest #2C3E2D ──────────────────────────── */ --bs-primary: #2C3E2D; --bs-primary-rgb: 44, 62, 45; /* ── Secondary = Sage #7A8B6F ───────────────────────────── */ --bs-secondary: #7A8B6F; --bs-secondary-rgb: 122, 139, 111; /* ── Success = #137333 ──────────────────────────────────── */ --bs-success: #137333; --bs-success-rgb: 19, 115, 51; /* ── Info = Teal #1E88A8 ────────────────────────────────── */ --bs-info: #1E88A8; --bs-info-rgb: 30, 136, 168; /* ── Warning = Gold #F5A000 ─────────────────────────────── */ --bs-warning: #F5A000; --bs-warning-rgb: 245, 160, 0; /* ── Danger = Red #B71C1C ───────────────────────────────── */ --bs-danger: #B71C1C; --bs-danger-rgb: 183, 28, 28; /* ── Light = Cream #FAF6F0 ──────────────────────────────── */ --bs-light: #FAF6F0; --bs-light-rgb: 250, 246, 240; /* ── Dark = Forest Deep #1A2B1C ─────────────────────────── */ --bs-dark: #1A2B1C; --bs-dark-rgb: 26, 43, 28; /* ── Body ───────────────────────────────────────────────── */ --bs-body-color: #3B3129; --bs-body-color-rgb: 59, 49, 41; --bs-body-bg: #FAF6F0; --bs-body-bg-rgb: 250, 246, 240; /* ── Links ──────────────────────────────────────────────── */ --bs-link-color: #2C3E2D; --bs-link-color-rgb: 44, 62, 45; --bs-link-hover-color: #5C6B52; --bs-link-hover-color-rgb: 92, 107, 82; /* ── Border ─────────────────────────────────────────────── */ --bs-border-color: #E2DCD4; --bs-border-color-translucent: rgba(226, 220, 212, .75); --bs-border-radius: 12px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 18px; /* ── Focus ring (BS 5.3+) ───────────────────────────────── */ --bs-focus-ring-color: rgba(44, 62, 45, .25); /* ── Form controls ──────────────────────────────────────── */ --bs-form-valid-color: #137333; --bs-form-valid-border-color:#137333; --bs-form-invalid-color: #B71C1C; --bs-form-invalid-border-color: #B71C1C; } /* ────────────────────────────────────────────────────────── 2b) COLOR UTILITIES ────────────────────────────────────────────────────────── */ /* Backgrounds */ .bg-surface { background-color: var(--c-surface) !important; } .bg-canvas { background-color: var(--c-canvas) !important; } .bg-paper { background-color: var(--c-paper) !important; } .bg-forest-400 { background-color: var(--c-forest-400) !important; } .bg-forest-300 { background-color: var(--c-forest-300) !important; } .bg-forest-deep { background-color: var(--c-forest-deep) !important; } .bg-forest-10 { background-color: var(--bg-forest-10) !important; } .bg-gold-200 { background-color: var(--c-gold-200) !important; } .bg-gold-100 { background-color: var(--c-gold-100) !important; } .bg-bark-400 { background-color: var(--c-bark-400) !important; } .bg-white { background-color: #fff !important; } /* Text */ .text-surface { color: var(--c-surface) !important; } .text-forest-400 { color: var(--c-forest-400) !important; } .text-forest-300 { color: var(--c-forest-300) !important; } .text-forest-200 { color: var(--c-forest-200) !important; } .text-forest-sage { color: var(--c-forest-sage) !important; } .text-gold-200 { color: var(--c-gold-200) !important; } .text-gold-100 { color: var(--c-gold-100) !important; } .text-bark-400 { color: var(--c-bark-400) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-light { color: var(--color-text-light) !important; } /* Borders */ .border-forest-400 { border-color: var(--c-forest-400) !important; } .border-forest-300 { border-color: var(--c-forest-300) !important; } .border-gold-200 { border-color: var(--c-gold-200) !important; } /* White text opacity scale (pro tmavé plochy: hero, footer, author-bar, CTA) */ .text-white-60 { color: rgba(255,255,255,.6) !important; } .text-white-40 { color: rgba(255,255,255,.4) !important; } .text-white-30 { color: rgba(255,255,255,.3) !important; } /* Border – white low opacity (tmavé plochy) */ .border-white-06 { border-color: rgba(255,255,255,.06) !important; } .border-white-10 { border-color: rgba(255,255,255,.1) !important; } /* Border radius overrides */ .rounded-4 { border-radius: 8px !important; } .rounded-5 { border-radius: 16px !important; } /* ────────────────────────────────────────────────────────── Body base ────────────────────────────────────────────────────────── */ body { background: var(--color-bg); color: var(--color-text); } /* Cards */ .card, .container-component, .com-content-article { border-radius: var(--radius-card); } /* ========================================================== 3) GLOBAL LINKS ========================================================== */ :root { --link-color: var(--c-forest-400); --link-hover: var(--c-forest-sage); --link-disabled: color-mix(in srgb, var(--c-forest-400) 40%, transparent); --link-focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-forest-400) 50%, transparent); } a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action) { color: var(--link-color); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: currentColor; transition: color .15s ease, text-decoration-color .15s ease, box-shadow .15s ease; } a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action):hover { color: var(--link-hover); } a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.list-group-item-action):focus-visible { outline: none; box-shadow: var(--link-focus-ring); border-radius: 6px; } a.is-disabled, a[aria-disabled="true"] { color: var(--link-disabled); pointer-events: none; cursor: not-allowed; text-decoration-color: transparent; } /* ========================================================== 4) BUTTONS Design source: varianta1 — btn-p (gold gradient) + btn-o (ghost) Dvě hlavní role (výchozí pro světlé pozadí): PRIMARY = .btn-primary → gold gradient (hlavní CTA) SECONDARY = .btn-secondary → outline forest (sekundární akce) Varianty pro tmavé pozadí (hero, CTA sekce): .btn-secondary.on-dark → ghost/glass .on-dark .btn-secondary → totéž, přes rodič .btn-ghost → alias, samostatná třída Doplňkové varianty: .btn-primary-forest → filled forest (alternativa k gold) .btn-fill / .btn-outline / .btn-soft → zpětná kompatibilita ========================================================== */ /* Families — volitelná barevná rodina pro .btn-fill / .btn-outline / .btn-soft */ .btn-forest { --btn-color: var(--c-forest-400); } .btn-gold { --btn-color: var(--c-gold-200); } .btn-bark { --btn-color: var(--c-bark-400); } /* ────────────────────────────────────────────────────────── Button tokens (odvozené z varianta1) ────────────────────────────────────────────────────────── */ :root { /* Primary (gold gradient) */ --btn-primary-bg-from: var(--c-gold-200); /* #C8A96E */ --btn-primary-bg-to: var(--c-gold-300); /* #B8944A (gold-warm) */ --btn-primary-bg-hover-from: var(--c-gold-100); /* #E8D5A8 light */ --btn-primary-bg-hover-to: var(--c-gold-200); --btn-primary-color: var(--c-forest-deep); /* #1A2B1C */ --btn-primary-shadow: 0 6px 20px rgba(200, 169, 110, .35); --btn-primary-shadow-hover: 0 10px 30px rgba(200, 169, 110, .45); /* Secondary (ghost na tmavém pozadí) */ --btn-secondary-border: rgba(255, 255, 255, .25); --btn-secondary-border-hover: rgba(255, 255, 255, .60); --btn-secondary-bg: rgba(255, 255, 255, .04); --btn-secondary-bg-hover: rgba(255, 255, 255, .10); --btn-secondary-color: #ffffff; /* Rozměry a radius podle vzoru varianta1 */ --btn-radius: 10px; /* vzor: border-radius:10px */ --btn-radius-pill: var(--radius-pill); /* 40px — pro kompatibilitu */ --btn-padding-y: 14px; --btn-padding-x: 32px; --btn-min-height: 48px; --btn-font-size: 0.92rem; /* ~14.7px, vzor: .92rem */ --btn-font-weight: 700; --btn-letter-spacing: 0.02em; } /* ────────────────────────────────────────────────────────── Base .btn — nový „visual“ design systém (nepill, 10px radius) ────────────────────────────────────────────────────────── */ .btn { font-family: var(--font-body); font-size: var(--btn-font-size); line-height: 1.2; font-weight: var(--btn-font-weight); letter-spacing: var(--btn-letter-spacing); text-transform: none; /* vzor: bez uppercase */ text-align: center; border-radius: var(--btn-radius); padding: var(--btn-padding-y) var(--btn-padding-x); min-height: var(--btn-min-height); display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid transparent; background-color: transparent; background-image: none; color: inherit; box-shadow: none; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, background-image .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; } .btn:focus { outline: none; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none !important; transform: none !important; } /* ========================================================== PRIMARY — Gold gradient CTA (btn-p ze vzoru) Použití: hlavní akce na hero, CTA banery, „Procházet encyklopedii“ ========================================================== */ .btn.btn-primary, .btn-cta { background: linear-gradient(135deg, var(--btn-primary-bg-from), var(--btn-primary-bg-to)); background-color: var(--btn-primary-bg-from); /* fallback */ color: var(--btn-primary-color); border-color: transparent; box-shadow: var(--btn-primary-shadow); } .btn.btn-primary:hover, .btn-cta:hover { background: linear-gradient(135deg, var(--btn-primary-bg-hover-from), var(--btn-primary-bg-hover-to)); color: var(--btn-primary-color); transform: translateY(-3px); box-shadow: var(--btn-primary-shadow-hover); } .btn.btn-primary:active, .btn-cta:active { transform: translateY(-1px); box-shadow: var(--btn-primary-shadow) !important; } .btn.btn-primary:disabled, .btn-cta:disabled { background: var(--btn-primary-bg-from); color: var(--btn-primary-color); } /* ========================================================== SECONDARY — Outline forest (výchozí, pro světlé pozadí) Použití: vedle PRIMARY na světlých plochách (články, karty, formuláře, sidebar, přehledy). Dobře viditelný tmavě zelený border a text, jemný hover. Na tmavém pozadí (hero, CTA) použij variantu .btn-secondary.on-dark nebo alias .btn-ghost — viz níže. ========================================================== */ .btn.btn-secondary, .btn.btn-outline-secondary { background-color: transparent; color: var(--c-forest-400); border-color: var(--c-forest-400); } .btn.btn-secondary:hover, .btn.btn-outline-secondary:hover { background-color: var(--c-forest-400); border-color: var(--c-forest-400); color: var(--c-surface); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn.btn-secondary:active, .btn.btn-outline-secondary:active { transform: translateY(0); box-shadow: none; } .btn.btn-secondary:disabled, .btn.btn-outline-secondary:disabled { color: color-mix(in srgb, var(--c-forest-400) 40%, transparent); border-color: color-mix(in srgb, var(--c-forest-400) 25%, transparent); background-color: transparent; } /* ========================================================== SECONDARY na tmavém pozadí — ghost / glass (btn-o ze vzoru) Použij buď .btn-secondary.on-dark, nebo alias .btn-ghost. Pro sekci s tmavým pozadím lze přidat třídu .on-dark na rodič (např. .hero.on-dark) a všechna .btn-secondary se přepnou automaticky. ========================================================== */ .btn.btn-secondary.on-dark, .on-dark .btn.btn-secondary, .btn-ghost { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-color); border-color: var(--btn-secondary-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn.btn-secondary.on-dark:hover, .on-dark .btn.btn-secondary:hover, .btn-ghost:hover { background-color: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-color); transform: translateY(-2px); box-shadow: none; } .btn.btn-secondary.on-dark:active, .on-dark .btn.btn-secondary:active, .btn-ghost:active { transform: translateY(0); } /* ========================================================== PRIMARY-FOREST — filled forest (pro světlé plochy) Použití: karty, formuláře, akce v článku — alternativa k gold ========================================================== */ .btn.btn-primary-forest { background: var(--c-forest-400); color: var(--c-surface); border-color: var(--c-forest-400); box-shadow: var(--shadow-sm); } .btn.btn-primary-forest:hover { background: var(--c-forest-sage); border-color: var(--c-forest-sage); color: var(--c-surface); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn.btn-primary-forest:active { transform: translateY(0); } /* ========================================================== ZPĚTNÁ KOMPATIBILITA — .btn-fill / .btn-outline / .btn-soft Zachovány pro existující šablony a moduly. Používají --btn-color přes rodinu .btn-forest / .btn-gold / .btn-bark. ========================================================== */ /* Fill */ .btn-fill { background-color: var(--btn-color, var(--color-primary)); border-color: var(--btn-color, var(--color-primary)); color: var(--c-surface); } .btn-fill:hover { background-color: var(--c-forest-sage); border-color: var(--c-forest-sage); color: var(--c-surface); transform: translateY(-2px); } .btn-fill:disabled { background-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 40%, transparent); border-color: transparent; color: var(--c-surface); } /* Outline */ .btn-outline { background-color: transparent; color: var(--btn-color, var(--color-primary)); border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 45%, transparent); } .btn-outline:hover { background-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 10%, transparent); border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 65%, transparent); } .btn-outline:disabled { color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 35%, transparent); border-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 20%, transparent); } /* Soft */ .btn-soft { background-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 12%, transparent); color: var(--btn-color, var(--color-primary)); border-color: transparent; } .btn-soft:hover { background-color: color-mix(in srgb, var(--btn-color, var(--color-primary)) 18%, transparent); } /* ========================================================== VELIKOSTI — .btn-sm / .btn-lg ========================================================== */ .btn-sm { padding: 10px 20px; min-height: 40px; font-size: 0.82rem; border-radius: 8px; } .btn-lg { padding: 18px 40px; min-height: 56px; font-size: 1rem; border-radius: 12px; } /* ========================================================== PILL varianta — pro zachování kompatibility s uppercase tlačítky (použij přes .btn-pill, pokud chceš původní kulatá tlačítka) ========================================================== */ .btn.btn-pill { border-radius: var(--btn-radius-pill); text-transform: uppercase; letter-spacing: var(--typo-letter-spacing-caps); font-size: var(--typo-btn-fs); line-height: var(--typo-btn-lh); font-weight: var(--typo-w-ui); padding: 12px 24px; min-height: 44px; } /* Icon in button */ .btn .btn-icon, .btn .icon { inline-size: 16px; block-size: 16px; flex-shrink: 0; } /* Full-width varianta */ .btn-block, .btn.w-100 { width: 100%; } /* ========================================================== 5) BADGES ========================================================== */ .badge-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px; border-radius: 20px; background: var(--c-forest-50); color: var(--c-forest-sage); font-family: var(--font-body); font-size: var(--typo-c2-fs); line-height: var(--typo-c2-lh); font-weight: 600; letter-spacing: 0; text-decoration: none; white-space: nowrap; width: max-content; } .badge-pill.badge-gold { background: var(--c-gold-50); color: var(--c-gold-400); } .badge-pill.badge-forest-solid { background: var(--c-forest-400); color: var(--c-surface); } .badge-pill.badge-gold-solid { background: var(--c-gold-200); color: var(--c-forest-deep); } .badge-pill.badge-red { background: var(--c-red-50); color: var(--c-red-400); } /* ========================================================== 6) ALERTS ========================================================== */ .alert { border-radius: 12px; border: 1px solid transparent; box-shadow: none; } .alert--default { background: color-mix(in srgb, var(--c-forest-400) 12%, transparent); border-color: color-mix(in srgb, var(--c-forest-400) 22%, transparent); color: var(--color-text); } .alert--success { background: color-mix(in srgb, var(--color-success) 14%, transparent); border-color: color-mix(in srgb, var(--color-success) 26%, transparent); } .alert--warning { background: color-mix(in srgb, var(--color-warning) 16%, transparent); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); } .alert--error { background: color-mix(in srgb, var(--color-danger) 14%, transparent); border-color: color-mix(in srgb, var(--color-danger) 26%, transparent); } /* ========================================================== 7) PAGINATION ========================================================== */ .pagination__wrapper { --pg-size: 16px; --pg-h: 44px; --pg-radius: 10px; --pg-gap: .5rem; --pg-text: var(--color-text-muted); --pg-hover-bg: var(--c-cream-200); --pg-active-bg: var(--color-primary); --pg-active-text: var(--on-primary); } .pagination__wrapper .pagination { gap: var(--pg-gap); align-items: center; } .pagination__wrapper .page-link { border: 1px solid transparent; background: transparent; color: var(--pg-text); min-height: var(--pg-h); min-width: var(--pg-h); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pg-radius); font-size: var(--typo-label-fs); font-weight: var(--typo-w-ui); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .pagination__wrapper .page-item.active .page-link { background: var(--pg-active-bg); color: var(--pg-active-text); border-color: transparent; } .pagination__wrapper .page-item.disabled .page-link { color: color-mix(in srgb, var(--color-primary) 35%, transparent); pointer-events: none; } /* ========================================================== 8) CHECKBOX ========================================================== */ .form-check-input { width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); background-color: transparent; box-shadow: none; } .form-check-input:focus { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); box-shadow: var(--focus-ring); } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } /* ========================================================== 9) UTILITIES ========================================================== */ .u-shadow-sm { box-shadow: var(--shadow-sm) !important; } .u-shadow-md { box-shadow: var(--shadow-md) !important; } .u-shadow-lg { box-shadow: var(--shadow-lg) !important; } .u-radius-card { border-radius: var(--radius-card) !important; } .u-radius-lg { border-radius: var(--radius-lg) !important; } /* Icon sizes */ .icon { inline-size: 16px; block-size: 16px; } .icon-10 { inline-size: 10px; block-size: 10px; } .icon-12 { inline-size: 12px; block-size: 12px; } .icon-16 { inline-size: 16px; block-size: 16px; } .icon-24 { inline-size: 24px; block-size: 24px; } .icon-40 { inline-size: 40px; block-size: 40px; } /* ========================================================== 10) FLUID SPACING (Bootstrap override) ========================================================== */ :root { --fluid-from: 360px; --fluid-to: 1320px; --fluid-range: 960px; --space-6: clamp(3rem, calc(1.5rem + 4.167vw), 6rem); --space-5: clamp(25px, calc(14px + 2.292vw), 48px); --space-4: clamp(12.5px, calc(7px + 1.146vw), 24px); --space-3: clamp(8px, calc(4.5px + 0.729vw), 16px); --space-2: clamp(4px, calc(2.25px + 0.365vw), 8px); --space-1: clamp(2px, calc(1.125px + 0.182vw), 4px); --space-2r: clamp(1.25rem, calc(0.875rem + 1.042vw), 2rem); } /* Desktop fixed values (≥ 1320px) */ .p-6 { padding: 96px !important; } .px-6 { padding-left: 96px !important; padding-right: 96px !important; } .py-6 { padding-top: 96px !important; padding-bottom: 96px !important; } .m-6 { margin: 96px !important; } .mt-6 { margin-top: 96px !important; } .mb-6 { margin-bottom: 96px !important; } .ms-6 { margin-left: 96px !important; } .me-6 { margin-right: 96px !important; } .gap-6 { gap: 96px !important; } @media (max-width: 1319.98px) { /* Level 6 – fluid */ .p-6 { padding: var(--space-6) !important; } .px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; } .py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; } .m-6 { margin: var(--space-6) !important; } .mt-6 { margin-top: var(--space-6) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .ms-6 { margin-left: var(--space-6) !important; } .me-6 { margin-right: var(--space-6) !important; } .gap-6 { gap: var(--space-6) !important; } /* Level 5 – fluid */ .p-5 { padding: var(--space-5) !important; } .px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; } .py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; } .m-5 { margin: var(--space-5) !important; } .mt-5 { margin-top: var(--space-5) !important; } .mb-5 { margin-bottom: var(--space-5) !important; } .ms-5 { margin-left: var(--space-5) !important; } .me-5 { margin-right: var(--space-5) !important; } .gap-5 { gap: var(--space-5) !important; } /* Level 4 – fluid */ .p-4 { padding: var(--space-4) !important; } .px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; } .m-4 { margin: var(--space-4) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .ms-4 { margin-left: var(--space-4) !important; } .me-4 { margin-right: var(--space-4) !important; } .gap-4 { gap: var(--space-4) !important; } /* Level 3 – fluid */ .gap-3 { gap: var(--space-3) !important; } }