/* ============================================================ DOBRODRUHÁ — design system Modern, clean, airy. Warm off-white palette. All theming via CSS variables so the admin panel can retheme live. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); :root { /* — color tokens (admin-editable) — */ --bg: #f2f1ed; /* page background */ --surface: #eae1d7; /* beige panels (was black on old site) */ --surface-2: #e3ddd2; /* slightly deeper beige */ --card: #ffffff; /* white cards */ --ink: #34322e; /* primary text — warm near-black */ --ink-soft: #514c45; /* secondary text */ --muted: #8a8378; /* tertiary / captions */ --line: #ddd6ca; /* hairlines / borders */ --accent: #b5563b; /* terracotta — nods to the old red thread */ --accent-2: #8a8f6f; /* sage secondary */ --accent-ink:#ffffff; /* text on accent */ --nav-ink: #3d3a35; /* menu text — dark grey */ --logo-color:#34322e; /* brand wordmark / logo tint */ /* — type — */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; /* — geometry (admin-editable) — */ --radius: 18px; --radius-sm: 10px; --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(64px, 9vw, 128px); --logo-h: 44px; /* výška loga v hlavičce (na mobilu se zmenšuje) */ --shadow-sm: 0 1px 2px rgba(52,50,46,.05), 0 2px 8px rgba(52,50,46,.05); --shadow: 0 8px 30px rgba(52,50,46,.08), 0 2px 8px rgba(52,50,46,.05); --shadow-lg: 0 24px 60px rgba(52,50,46,.14); --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { overflow-x: clip; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: balance; } p { margin: 0 0 1em; text-wrap: pretty; } /* ---------- layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .stack > * + * { margin-top: 1rem; } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; display: inline-flex; align-items: center; gap: .55rem; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } .section-title { font-size: clamp(2rem, 4.4vw, 3.4rem); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 58ch; } /* Pozn.: styl pro "hero"/banner blok (.pgbanner…) NENÍ tady — dd-blocks.js si ho sám vkládá do za běhu (viz jeho vlastní