/* ========================================================================== Svatební weby na míru — pracovní náhled Čisté CSS, bez knihoven a bez externích fontů. ========================================================================== */ :root { /* ================================================================== PALETA ODVOZENÁ ZE ZDROJOVÉ HERO ILUSTRACE Odstíny níž nejsou odhadnuté ani převzaté ze staršího konceptu — jsou odebrané přímo z assets/watercolor-hero-desktop-v11-background.png (průměr oblasti po odfiltrování světlého oparu): les, střední vrstva (y 66,5–71,5 %) #99A8A5 modrozelený vzdálené kopce (y 62,5–66,5 %) #98A9A9 modrošedý dlažba terasy (y 95,5–99,5 %) #D9CAB6 pískový papír samotné kresby (opar nad krajinou) #F5ECE1 teplý papír Dřívější zelenošedá (#E3E8DF) měla žlutozelený nádech (G−B = 9), kdežto les v ilustraci je modrozelený (B−R = 12, G−B = 3). Nová paleta tenhle posun srovnává, takže plochy působí jako zesvětlené části téže kresby. */ --hero-forest: #99A8A5; --hero-hills: #98A9A9; --hero-paving: #D9CAB6; --hero-paper: #F5ECE1; --hero-sky: #F4EDE8; /* změřený průměr horních ~10 px mobilního podkladu */ /* Zesvětlené akvarelové varianty pro plochy stránky. Prosté zesvětlení posunem k bílé o 70 % srazilo i sytost na třetinu a plochy vycházely prakticky šedé (ověřeno vyrenderováním). Lesní tóny se proto zesvětlují na cílový jas, ale s ponechaným barevným odstupem (u --wash G−R = 8, G−B = 4, tedy modrozelený charakter lesa v ilustraci). Hodnoty jsou zapsané napevno, aby byly čitelné a nezávisely na podpoře color-mix. */ --paper: #F9F4ED; /* --hero-paper zesvětlený o 40 % — světlé sekce, karty */ --wash: #DEE6E2; /* --hero-forest zesvětlený na jas 228 — hlavní plocha stránky */ --wash-soft: #E4EAE9; /* --hero-hills zesvětlené na jas 232 — jemně odlišný lesní tón */ --wash-deep: #D0D9D5; /* --hero-forest zesvětlený na jas 215 — závěrečná sekce */ --sand: #EEE7DE; /* --hero-paving zesvětlený o 55 % — výplně a orámování */ /* Akvarel maketek zařízení (viz .wcdev a inline SVG v index.html). Tělo je světlá teplá šedobéžová, světla přecházejí do papíru stránky, šalvěj zůstává jen pro stíny a kontura je teplá šedá — ne tmavý obrys. Drží se ve stejné rodině jako ilustrace, jen o stupeň tlumeněji, aby kresba zařízení nekonkurovala obsahu na displeji. */ --dev-body: #DDD8CE; --dev-light: #F9F4ED; --dev-shade: #B7C1B9; --dev-line: #8D867C; /* Zpětná kompatibilita: dosavadní selektory používají --cream, mapuje se na novou plochu, aby barva zůstala na jednom místě a nikde se nevkládala natvrdo. */ --cream: var(--wash); /* Text a hlavní tlačítka zůstávají v dosavadní tmavě hnědé. */ --ink: #30231C; --ink-soft: #6D6057; /* Linky a akcent přeladěné do lesního (modrozeleného) tónu při zachování původního jasu, aby se nezměnil kontrast textu ani drobných prvků: --accent #66765A → #5E706D (jas 112,6 → 108) --accent-ink #4A5642 → #46514F (jas 82 → 78,5) */ --line: #D8D6CC; --accent: #5E706D; --accent-ink: #46514F; --accent-bg: var(--paper); /* písma */ --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* rytmus */ --radius: 14px; --radius-sm: 8px; --shadow: 0 18px 40px -28px rgba(48, 35, 28, .45); --shadow-soft: 0 60px 90px -60px rgba(48, 35, 28, .38); --section-y: clamp(4rem, 9vw, 7rem); --container: 1120px; } /* Nulový nosič SVG filtrů na začátku . Bez vyřazení z toku je to `display:inline` prvek, který si vytvoří ANONYMNÍ ŘÁDKOVÝ BOX o výšce celého line-height — naměřeno 27,2 px na mobilu a 28,9 px na desktopu. O tolik se posouval začátek hero a nad ilustrací zůstával pruh papíru, který pod pevnou hlavičkou tvořil rovný barevný předěl. Filtry se odkazují přes id, k funkčnosti nepotřebují být v toku ani viditelné. */ .wc-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* Nulový nosič SVG filtrů na začátku . Bez vyřazení z toku je to `display:inline` prvek, který si vytvoří ANONYMNÍ ŘÁDKOVÝ BOX o výšce celého line-height — naměřeno 27,2 px na mobilu a 28,9 px na desktopu. O tolik se posouval začátek hero a nad ilustrací zůstával pruh papíru, který pod pevnou hlavičkou tvořil rovný barevný předěl. Filtry se odkazují přes id, k funkčnosti nepotřebují být v toku ani viditelné. */ .wc-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* --- základ ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Atribut [hidden] musí platit i na prvcích, kterým některá třída nastavuje vlastní display (typicky .btn{display:inline-block}) — pravidlo třídy jinak přebije výchozí [hidden]{display:none} z prohlížeče a prvek skrytý z JS zůstane vidět. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; /* Týž teplý papír, jakým se maluje plocha sekcí (--wc-section-fill v concept-watercolor.css) — stránka je jeden souvislý podklad, ne střídající se barevné panely. */ background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 .6em; } h1 { font-size: clamp(2.4rem, 3.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; } h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1.1rem; } p:last-child { margin-bottom: 0; } a { color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 3px; } .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .center { text-align: center; } /* --- drobné prvky ------------------------------------------------------- */ .eyebrow { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .9rem; } .lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 46ch; } .note { font-size: .95rem; color: var(--ink-soft); } /* --- tlačítka ------------------------------------------------------------ SPOLEČNÝ PRINCIP pro všechny malované prvky na webu — DVĚ vrstvy, ne jedna, přesně proto, aby plocha nikdy nevypadala "rozpadlá": ::before — SPOLEHLIVÝ ZÁKLAD. Plná barva bez filtru, zatažená 2 px dovnitř od hrany. Nese úplně stejnou výplň jako vrstva níž, takže při správném vykreslení s ní splyne k nerozeznání — je to čistě pojistka. Ověřeno na vlastní oči: filtrovaná vrstva sama uměla na konkrétním zařízení erodovat tak silně, že skrz tlačítko prosvítalo pozadí stránky (velká světlá plocha uprostřed tmavého tlačítka). S tímhle základem pod ní se to už stát nemůže — tlačítko zůstává čitelné a vyplněné, i kdyby se filtr rozpadl úplně. ::after — MALOVANÝ OKRAJ. Táž výplň přes filtr #wc-edge (viz inline