/* =================================================================== Jsi krásná — theme overrides Mechanismus 1:1 s referencí: veškerý vzhled řídí CSS proměnné z html.light (ref-1.css). Tady je POUZE předefinováváme. Do ref-*.css se nesahá. =================================================================== */ /* =================================================================== TŘI BAREVNÉ VARIANTY Přepíná se atributem data-theme na . Výchozí je terakota. Sdílené hodnoty (fonty, tvary) zůstávají mimo tyto bloky. =================================================================== */ /* --- společné pro všechny varianty --- */ html.light { --gray-4: #E7DCD280; } /* ===== 1. TERAKOTA — teplá, editoriální ===== */ html.light[data-theme="terakota"] { --background: #FBF6F2; --color-background: #FBF6F2; --foreground: #241C1A; --gray-12: #241C1A; --slate-12: #241C1A; --accent: #9A4A42; --accent-light: #C97C71; --accent-subtle: #9A4A421F; --accent-2: #9A4A420F; --accent-6: #9A4A4240; --accent-7: #9A4A4259; --gray-1: #FDFAF7; --gray-2: #FAF5F0; --gray-3: #F3EBE4; --gray-4: #E7DCD280; --gray-5: #E7DCD2; --gray-6: #DDD0C4; --gray-7: #CBBBAC; --gray-8: #B09C8C; --gray-9: #8A7969; --gray-10: #7A6A5B; --gray-11: #5C4F44; --red-7: #C97C71; --red-8: #B35F55; --red-9: #9A4A42; --red-10: #863E37; --red-11: #6E322C; --red-a7: #9A4A4246; --yellow-7: #E0C289; --yellow-8: #D2AC66; --yellow-9: #C99A4E; --yellow-10: #B0853F; --green: #C6D2C0; --green-9: #6E8266; --yellow: #F1E4C6; --blue: #75648F; } /* ===== 2. VÍNOVÁ — sytější, večerní, klasicky kosmetická (VÝCHOZÍ) ===== Vybráno klientem 29. 7. 2026. Bezatributový html.light míří sem, aby stránka nespadla na jinou paletu, kdyby atribut chyběl. */ html.light, html.light[data-theme="vinova"] { --background: #FBF4F5; --color-background: #FBF4F5; --foreground: #211A1D; --gray-12: #211A1D; --slate-12: #211A1D; --accent: #7C3B52; --accent-light: #A9647C; --accent-subtle: #7C3B521F; --accent-2: #7C3B520F; --accent-6: #7C3B5240; --accent-7: #7C3B5259; --gray-1: #FDFAFB; --gray-2: #FAF4F5; --gray-3: #F3E9EC; --gray-4: #E7D8DD80; --gray-5: #E7D8DD; --gray-6: #DBC8CF; --gray-7: #C7ADB7; --gray-8: #AC8E9A; --gray-9: #86707A; --gray-10: #76616B; --gray-11: #584750; --red-7: #A9647C; --red-8: #8F4A63; --red-9: #7C3B52; --red-10: #683044; --red-11: #522436; --red-a7: #7C3B5246; --yellow-7: #DFC095; --yellow-8: #CFA871; --yellow-9: #C2955A; --yellow-10: #A87F49; --green: #C8CFC9; --green-9: #5F7A68; --yellow: #F0E3CD; --blue: #6E5E86; } /* ===== 3. ŠALVĚJ — klidná, čistá, blíž péči o pleť ===== */ html.light[data-theme="salvej"] { --background: #F8F7F1; --color-background: #F8F7F1; --foreground: #1F2320; --gray-12: #1F2320; --slate-12: #1F2320; --accent: #4F6B54; --accent-light: #7E9A83; --accent-subtle: #4F6B541F; --accent-2: #4F6B540F; --accent-6: #4F6B5440; --accent-7: #4F6B5459; --gray-1: #FCFCF8; --gray-2: #F7F6F0; --gray-3: #EEEDE3; --gray-4: #DEDCCC80; --gray-5: #DEDCCC; --gray-6: #D0CDBA; --gray-7: #B9B5A0; --gray-8: #9D9884; --gray-9: #7A7566; --gray-10: #6A6659; --gray-11: #4E4B41; /* Akcent je zelený, takže „pozitivní" prvky musí být jinou barvou, jinak by se odškrtnutí ztratilo v akcentu. */ --red-7: #C98A72; --red-8: #B06E57; --red-9: #98583F; --red-10: #7F4832; --red-11: #663827; --red-a7: #4F6B5446; --yellow-7: #DCC493; --yellow-8: #CBAC6E; --yellow-9: #BE9957; --yellow-10: #A48347; --green: #D6D3C2; --green-9: #4F6B54; --yellow: #EFE8CE; --blue: #6D7E96; } /* Vějíř v hero: na originále ho kýve JS, který do klonu nepřebíráme. Osa otáčení = střed vodicí elipsy, změřeno v prohlížeči (50% 832px). Plnou rotaci dělat nelze: měřítko karet je zapečené v transformu, takže malé karty by při obletu zůstaly malé a iluze hloubky by se rozpadla. */ .fan-stage { transform-origin: 50% 832px; animation: fan-sway 20s ease-in-out infinite alternate; } @keyframes fan-sway { from { rotate: -6deg; } to { rotate: 6deg; } } @media (prefers-reduced-motion: reduce) { .fan-stage { animation: none; } } /* Slidery bez JS knihovny: bez pevné šířky se slidy roztáhnou přes wrapper. */ .swiper { overflow-x: auto !important; scrollbar-width: none; width: 100% !important; min-width: 0; } .swiper::-webkit-scrollbar { display: none; } .swiper-wrapper { display: flex !important; gap: 20px; width: max-content !important; height: auto !important; } .swiper-slide { flex: 0 0 auto !important; width: 300px !important; height: auto !important; } /* Chybějící utilita z Tailwindu reference. Tailwind vygeneruje jen třídy, které web reálně používá. Reference měla md:col-span-4 a md:col-span-8, ale ne md:col-span-6, takže dvě karty vedle sebe 50/50 by bez tohohle spadly na span 1. */ @media (min-width: 48rem) { .md\:col-span-6 { grid-column: span 6 / span 6; } } /* =================================================================== Sekce bolesti: tři široké karty pod sebou. Mobil: vždy fotka → tagline → nadpis → text. Desktop: fotka střídavě vpravo a vlevo (třída --obraceno). Vlastní třídy schválně: Tailwind reference obsahuje jen utility, které sám používal, takže na tohle se spolehnout nedá. =================================================================== */ .bolest-mrizka { display: flex; flex-direction: column; gap: 20px; } .bolest-karta { display: flex; flex-direction: column; background-color: var(--gray-2); border: 1px solid var(--gray-4); border-radius: 22px; overflow: hidden; } .bolest-karta__foto { order: 1; min-width: 0; } .bolest-karta__text { order: 2; padding: 28px 24px 32px; min-width: 0; } .bolest-karta__foto img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 3; } /* Tagline jako pilulka ve stylu eyebrow štítků na stránce, jen v akcentní barvě místo tmavé. */ .bolest-karta__tag { display: inline-block; align-self: flex-start; padding: 9px 22px; font-family: var(--font-switzer), system-ui, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; border-radius: 8px; transform: rotate(-2deg); background-color: var(--accent); color: #fff; margin: 0 0 18px; } .bolest-karta__nadpis { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--gray-12); margin: 0 0 12px; } .bolest-karta__popis { font-family: var(--font-switzer), system-ui, sans-serif; font-size: 16px; line-height: 1.7; color: var(--gray-11); margin: 0; max-width: 46ch; } @media (min-width: 48rem) { .bolest-mrizka { gap: 20px; } .bolest-karta { flex-direction: row; align-items: stretch; } /* Fotka musí mít svázaný poměr stran. Bez toho se zdrojový portrét 9:16 roztáhne na šířku sloupce a karta naroste do absurdní výšky. */ .bolest-karta__foto { order: 2; flex: 0 0 40%; aspect-ratio: 5 / 4; } .bolest-karta__foto img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; } .bolest-karta__text { order: 1; flex: 1 1 60%; padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; } .bolest-karta--obraceno .bolest-karta__foto { order: 1; } .bolest-karta--obraceno .bolest-karta__text { order: 2; } .bolest-karta__tag { padding: 8px 18px; font-size: 13px; margin-bottom: 14px; } .bolest-karta__nadpis { font-size: 27px; margin-bottom: 10px; } .bolest-karta__popis { font-size: 16px; max-width: 42ch; } } /* =================================================================== Animované mockupy v sekci „Co se naučíš". Každá animace ilustruje přesně to, co je v textu karty. Vše čistě CSS, žádné obrázky ani JS. =================================================================== */ .uc-telefon { position: relative; width: 100%; max-width: 260px; aspect-ratio: 9 / 17; margin: 0 auto; background-color: var(--gray-12); border-radius: 34px; padding: 10px; box-shadow: 0 18px 44px rgba(36, 28, 26, .18); } .uc-telefon::after { /* výřez nahoře */ content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 76px; height: 22px; background: #000; border-radius: 20px; z-index: 3; } .uc-displej { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background-color: var(--gray-1); } .uc-popisek { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--font-ibm-mono), monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; z-index: 4; } .uc-displej img { width: 100%; height: 100%; object-fit: cover; display: block; } .uc-krok { opacity: 1; } .uc-krok__pruh i { width: 100%; } } /* Chybějící šířkové utility. Reference vygenerovala jen max-w-[920px] a max-w-[1320px], takže jakákoli jiná hodnota v markupu je bez účinku a kontejner se roztáhne přes celou šířku. */ .max-w-\[780px\] { max-width: 780px; } .max-w-\[1120px\] { max-width: 1120px; }