/* ============================================================ ThaiSiam — světlá (krémová) barevná varianta pro celý web Vychází z index2.html experimentu. Přídavná vrstva nad styles.css — pro návrat k původní hnědé stačí odstranit na tento soubor z každé stránky, nic jiného se nemusí měnit. Vzorec: tmavý "rámec" (hlavička, hero/pagehead, CTA pásmo, patička) zůstává v původní espresso paletě, obsahové sekce mezi nimi jsou světlé/krémové. ============================================================ */ :root { --bg: #F6F0E5; --bg2: #E9DDC8; --surface: #ECE1CD; --ink: #2A1712; --sub: #362B1E; --gold: #7F5C2C; /* Pozor: v tmavém motivu je --gold-lt světlejší odstín (pro zvýraznění na tmavém pozadí). Tady na světlém pozadí to musí být obráceně — tmavší než --gold, jinak má nedostatečný kontrast (měřeno ~2.8:1 - pod hranicí čitelnosti 4.5:1). */ --gold-lt: #5E421F; --line: rgba(42,23,18,.16); --line-soft: rgba(42,23,18,.08); } /* Krémový thajský vzor jako pozadí celého webu (za světlými obsahovými sekcemi; tmavý „rámec" — hlavička, hero, pagehead, CTA, patička — má vlastní neprůhledné tmavé pozadí, takže vzor překryje). */ body { background: linear-gradient(rgba(246, 240, 229, .55), rgba(246, 240, 229, .55)), url("assets/bg-thai.jpg") center top / cover no-repeat fixed #F6F0E5; } /* Tmavý "rámec" — hlavička, hero, pagehead (banner na vnitřních stránkách), CTA pásmo a patička mají napevno tmavé pozadí, proto si drží původní (světlou) sadu tokenů, ať zůstane text čitelný. */ .site-header, .hero, .pagehead, .cta, .site-footer { --bg: #211110; --bg2: #2C1917; --surface: #2A1715; --ink: #F2E9DC; --sub: #B7A593; --gold: #C9A572; --gold-lt: #E3C892; --line: rgba(201,165,114,.22); --line-soft: rgba(242,233,220,.10); /* bez tohoto by prvky bez vlastní barvy (h1/h2 bez explicitní barvy) zdědily tmavý text z navzdory přepsaným proměnným výše */ color: var(--ink); } /* Hero pásmo — fotka na pozadí (stejná jako index2 test). Tmavý scrim navíc kvůli čitelnosti textu přes světlejší místa fotky. */ .hero-bg { background: url("assets/hero.jpg") center/cover no-repeat, linear-gradient(135deg, #3a221d, #160b0a); } .hero-bg::after { background: linear-gradient(180deg, rgba(15,8,6,.4) 0%, rgba(15,8,6,.6) 45%, rgba(15,8,6,.4) 100%); box-shadow: inset 0 0 160px rgba(0,0,0,.6); } /* Bannerové pozadí hlavičky vnitřních stránek (pagehead) — thajský luxusní motiv. Domovská stránka pagehead nepoužívá (má vlastní .hero), takže se jí to netýká. */ .pagehead { min-height: 280px; display: flex; align-items: center; background: linear-gradient(rgba(20,10,8,.22), rgba(20,10,8,.38)), url("assets/pagehead-bg.jpg?v=3") center / cover no-repeat, #160b0a; } .pagehead .wrap { width: 100%; } .pagehead::before { display: none; } /* Tlačítko "Podrobnosti" (btn-ghost) — původní jemný zlatý nádech při najetí myší byl navržený pro tmavé pozadí a na světlém krému skoro nebyl vidět. Tmavší nádech ať je efekt zřetelný i tady. */ .btn-ghost:hover { background: rgba(42,23,18,.08); } /* "Rezervovat termín" musí vypadat stejně jako "Rezervovat" v hlavičce všude na stránce — hlavička/hero/pagehead/CTA mají napevno svou (tmavou) sadu tokenů, ale zbytek stránky by jinak použil tmavší krémovou variantu --gold/--gold-lt a tlačítko by se barevně lišilo. */ .btn-gold { background: linear-gradient(180deg, #E3C892, #C9A572); } .btn-gold:hover { background: linear-gradient(180deg, #C9A572, #E3C892); }