/* --------------------------------------------------------------------------- Soirée — horní lišta Karty jsou skutečný text, ne obrázek: dá se vyhledat, přeložit, přečte ho odečítač a je ostrý na každé obrazovce. Rozměry jsou odvozené z návrhu (lišta 184 px, dlaždice 48 x 62 px, verzálka 24 px), takže stačí změnit --sh-vyska a celá lišta se přepočítá. --------------------------------------------------------------------------- */ /* Písmo je vložené přímo v CSS (base64). Jako samostatný soubor se při otevření stránky z disku (file://) nemusí načíst — prohlížeč ho bere jako cizí původ — a celá sazba pak spadne na Helvetiku, která vedle filmových titulků vypadá jako jiné písmo. Takhle sedí vždycky. */ @font-face { font-family: 'TeXGyreHeros'; src: url(data:font/woff2;base64,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) format('woff2'), url('../font/texgyreheros-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --sh-vyska: 96px; /* výška lišty v klidu */ --sh-vyska-nalep: 68px; /* po nalepení na horní okraj */ --sh-cerna: #0f0d0b; /* podklad lišty, změřeno [15 13 11] */ --sh-krem: #fcf4e0; /* písmeno, [252 244 224] */ --sh-zare: 255, 206, 150;/* teplá záře kolem písmene */ /* Dlaždice menu mají být tytéž karty jako houpačkové nápisy pod figurkami. Změřeno na renderu landing page: karta 33 x 41 px při písmu 22,5 px, tedy šířka 1,47 a výška 1,82 násobku písma, mezera 0,058. Líc karty je [13 12 11] a horní hrana, po které při sklápění běží lesk, [27 26 25]. Na liště je ale podklad skoro stejně tmavý jako líc, tak je líc o tři úrovně výš, aby karta vůbec četla. */ --sh-karta: #171410; --sh-karta-hrana:#332f29; --sh-hrana: #3c3020; /* lesk horní hrany dlaždice */ --sh-predel: #191916; /* svislý předěl mezi dlaždicemi */ --sh-kraj: clamp(16px, 5.4vw, 88px); /* odsazení loga a ikony od kraje */ /* Verzálka 20 px při šířce 1920. TeX Gyre Heros má verzálku 0,727 stupně, takže 20 / 0,727 = 27,5 px; změřeno na vykreslené liště (33 px stupeň dával verzálku 24 px, ne 22, jak jsem dřív uváděl). */ --sh-pismo: clamp(12px, 1.06vw, 24px); /* menší, ať se řádka dlaždic vejde i s Rezervací */ /* ---- filmový titulek, jeden předpis pro celou stránku ---- Ve scénách se písmo sází na trojnásobek, zmenší LANCZOSem, rozostří gaussem CAP_SOFT*kf a obalí halací CAP_ZAR*kf o síle CAP_HALO. Prohlížeč nic z toho neumí přímo, tak je to poskládané z text-shadow a změřené proti vyrenderovanému titulku ze scény (33 px písmo, podklad lišty): náběh hrany 10→90 % video 2,10 px stránka 2,13 px profil záře 1–26 px odchylka 4,80 → 2,78 úrovně První (krémový) stín supluje rozostření hrany — filter: blur() to neumí, Chromium ho pod 0,8 px zaokrouhlí na nulu a nad ní přestřelí. Zbylé tři stupně jsou halace; nejširší drží ten slabý daleký závoj, kterým se filmový titulek pozná. */ --sh-titulek: 0 0 .038em rgba(252, 244, 224, .62), 0 0 .26em rgba(var(--sh-zare), .22), 0 0 .80em rgba(var(--sh-zare), .22), 0 0 2.4em rgba(var(--sh-zare), .34); /* ---- písmo lišty vůči filmovému titulku ---- Změřeno na Petřině snímku, kde je lišta i titulek z videa v jednom obraze: titulek má vrchol jasu 181 a náběh hrany 0,096 výšky písmene, lišta 240 a 0,059. Proto působí tvrdě. Krém se tedy stáhne do vrcholu kolem 200 a první stupeň stínu (ten, který supluje rozostření hrany) se rozšíří a zhustí. Dál se jít nedá — pod 190 už menu na černé ztrácí čitelnost. */ --sh-krem-film: rgba(252, 244, 224, .74); --sh-titulek-film: 0 0 .075em rgba(252, 244, 224, .55), 0 0 .26em rgba(var(--sh-zare), .26), 0 0 .80em rgba(var(--sh-zare), .24), 0 0 2.4em rgba(var(--sh-zare), .36); --sh-titulek-svit: 0 0 .038em rgba(255, 250, 240, .75), 0 0 .26em rgba(var(--sh-zare), .34), 0 0 .80em rgba(var(--sh-zare), .34), 0 0 2.4em rgba(var(--sh-zare), .46); } .sh { /* Lišta patří jako PRVNÍ prvek v — pak sedí rovnou nahoře a při scrollu tam zůstane. Kdyby ji šablona nemohla dát úplně nahoru, změň sticky na fixed a přidej pod ni rozpěrku vysokou --sh-vyska. */ position: sticky; top: 0; z-index: 900; height: var(--sh-vyska); background: var(--sh-cerna); transition: height .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease; } .sh.je-nalepena { --sh-vyska: var(--sh-vyska-nalep); box-shadow: 0 1px 0 rgba(120, 96, 58, .30), 0 10px 26px rgba(0, 0, 0, .45); } .sh-vnitrek { height: 100%; display: flex; align-items: center; gap: 2vw; padding-inline: var(--sh-kraj); } /* ---- logo a ikona sítě ---- Obě kresby jsou na stejném plátně 2362 x 3571, aby si odpovídaly tloušťkou tahu (po zmenšení do lišty obojí přesně 12 px). Proto se nesmějí škálovat každá zvlášť: logo je 0,74 výšky lišty a ikona přesně 0,4656 toho, tedy 0,345 — poměr jejich kreseb na tom společném plátně. */ .sh-logo, .sh-ikona { flex: 0 0 auto; line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .sh-ikona { min-width: 44px; min-height: 44px; } /* aby se do ní dalo trefit prstem */ /* Logo je plná krémová kresba na černé, takže vedle titulků s měkkou září vypadalo tvrdě. Dostane tedy tutéž zář — drop-shadow jde na tvar kresby, ne na obdélník obrázku. Poloměry odpovídají stupňům --sh-titulek (0,26 / 0,80 / 2,4 em při verzálce 20 px, tedy zhruba 8 / 24 / 72 px vzhledem k výšce loga). Jas se přitom stáhne na úroveň titulku. */ .sh-logo img { height: calc(var(--sh-vyska) * .740); width: auto; display: block; filter: brightness(.9) drop-shadow(0 0 2px rgba(255, 206, 150, .5)) drop-shadow(0 0 7px rgba(255, 206, 150, .42)) drop-shadow(0 0 20px rgba(255, 206, 150, .30)); transition: height .28s cubic-bezier(.4, 0, .2, 1), filter .2s ease; } .sh-ikona img { height: calc(var(--sh-vyska) * .345); width: auto; display: block; filter: brightness(.9) drop-shadow(0 0 2px rgba(255, 206, 150, .5)) drop-shadow(0 0 6px rgba(255, 206, 150, .38)); transition: height .28s cubic-bezier(.4, 0, .2, 1), filter .2s ease; } .sh-logo:hover img, .sh-ikona:hover img { filter: brightness(1.06) drop-shadow(0 0 3px rgba(255, 206, 150, .7)) drop-shadow(0 0 10px rgba(255, 206, 150, .6)) drop-shadow(0 0 26px rgba(255, 206, 150, .42)); } /* ---- přepínač jazyka ---- Drobné CZ / EN vedle ikony sítě. Není to titulek ani dlaždice, jen dvě písmena v naší krémové se stejnou září jako menu — má se dát najít, ne soutěžit s nápisy. Verzálka je 0,62 hlavního písma lišty, tedy při šířce 1440 px asi 9,5 px. Na telefonu je menu vyjmuté z toku a doprava tlačí ikona; přepínač si proto bere volné místo před ní. */ .sh-jazyk { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; /* aby se do něj dalo trefit prstem */ font-size: calc(var(--sh-vyska) * .1165); /* viž rámeček níže */ letter-spacing: .14em; text-decoration: none; color: var(--sh-krem-film); text-shadow: var(--sh-titulek); transition: color .2s ease, transform .18s cubic-bezier(.4, 0, .2, 1), font-size .28s cubic-bezier(.4, 0, .2, 1); } .sh-jazyk:hover, .sh-jazyk:focus-visible { color: var(--sh-krem); transform: translateY(-2px); } .sh-jazyk:focus-visible { outline: 1px solid rgba(var(--sh-zare), .8); outline-offset: 4px; } /* ---- rámeček kolem CZ / EN ---- Je to vnější čtverec její instagramové kresby, vyříznutý do vlastního souboru: obraz/ramecek.png, 138 x 139 px, otvor 113 x 116 px (81,9 % šířky). Přepínač tím má přesně tu samou ruku i tloušťku linky jako ikona sítě vedle něj — není to obkreslené borderem. Leží na pseudoprvku, ne na pozadí odkazu. Jinak by filtr se září padl i na písmeno a jeho vlastní text-shadow by se zdvojil. Velikost rámečku i písmene se řídí VÝŠKOU LIŠTY, ne šířkou okna. Je to kvůli ikoně sítě vedle: ta je 0,345 výšky lišty, takže se při odrolování (96 -> 68 px) zmenší. Kdyby se rámeček řídil --sh-pismo, které závisí na šířce okna, zůstal by stát a vedle zmenšené ikony by trčel — změřeno na odrolované liště při okně 1820 px: 34,7 px proti 21,7 px u ikony. Proto se spolu s rámečkem zmenšuje i písmeno; jinak by se do něj při stáhnutí lišty nešlo vešlo. Šířka 0,345 * 138/149 výšky lišty drží rámeček přesně na velikosti toho, který rámuje ikonu. Písmo 0,1165 výšky lišty je zvolené tak, aby „EN“ zabralo 1,53 em z otvoru širokého 2,25 em — po stranách zůstává 0,36 em při liště 96 px i po jejím stáhnutí na 68 px. */ .sh-jazyk { position: relative; } .sh-jazyk::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--sh-vyska) * .345 * 138 / 149); aspect-ratio: 138 / 139; transform: translate(-50%, -50%); background: url('../obraz/ramecek.png') center / 100% 100% no-repeat; filter: brightness(.9) drop-shadow(0 0 2px rgba(255, 206, 150, .5)) drop-shadow(0 0 6px rgba(255, 206, 150, .38)); transition: width .28s cubic-bezier(.4, 0, .2, 1), filter .2s ease; pointer-events: none; } .sh-jazyk:hover::before, .sh-jazyk:focus-visible::before { filter: brightness(1.06) drop-shadow(0 0 3px rgba(255, 206, 150, .7)) drop-shadow(0 0 10px rgba(255, 206, 150, .6)) drop-shadow(0 0 26px rgba(255, 206, 150, .42)); } /* ---- menu: filmový titulek ---- Dlaždice à la houpačka měly podklad [15 13 11] a lišta má [15 13 11] — doslova stejnou barvu, takže karta nebyla vidět a nápad se ztrácel. Písmo proto stojí samo, přesně jako titulky ve scénách: krém, teplá záře a jemný barevný lem po stranách. Velikost je ve vw, ne v px. Titulky ve videu se zmenšují spolu s videem (22 px platí při šířce 1920), takže kdyby lišta držela pevné px, sedly by si jen na jediné šířce okna. 33 px písma dává verzálku 22 px — poměr změřený na našich titulcích (22/33 = 0,667). 33/1920 = 1,71875vw. */ .sh-menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-evenly; gap: 2vw; } .sh-odkaz { display: flex; align-items: center; gap: .058em; font-size: var(--sh-pismo); /* aby em u dlaždic sedělo na písmo */ text-decoration: none; color: inherit; transform: translateY(0); transition: transform .18s cubic-bezier(.4, 0, .2, 1); } .sh-odkaz:hover, .sh-odkaz:focus-visible { transform: translateY(-2px); } .sh-odkaz:focus-visible { outline: 1px solid rgba(var(--sh-zare), .8); outline-offset: 6px; } .sh-d { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.47em; height: 1.82em; /* poměry karty z landing page */ background: var(--sh-karta); box-shadow: inset 0 .073em 0 var(--sh-karta-hrana); font-family: 'TeXGyreHeros', 'Helvetica Neue', Arial, sans-serif; font-size: var(--sh-pismo); line-height: 1; /* společné účaří pro všechna písmena */ letter-spacing: 0; /* rozestup dělá karta, ne prostrkání */ color: var(--sh-krem-film); text-shadow: var(--sh-titulek-film); transition: color .18s ease, text-shadow .18s ease; transition-delay: calc(var(--i, 0) * 16ms); } .sh-d.je-mezera { width: .34em; } /* mezeru sázíme šířkou, ne znakem */ .sh-odkaz:hover .sh-d, .sh-odkaz:focus-visible .sh-d { color: #fffaf0; text-shadow: var(--sh-titulek-svit); background: #1b1815; } .sh-odkaz[aria-current="page"] .sh-d { text-shadow: var(--sh-titulek-svit); } /* ---- hamburger, jen na úzkých obrazovkách ---- */ .sh-burger { display: none; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; } .sh-burger span { display: block; height: 1px; margin: 7px auto; width: 26px; background: var(--sh-krem); transition: transform .24s ease, opacity .24s ease; } .sh-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .sh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .sh-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 960px) { :root { --sh-vyska: 68px; --sh-vyska-nalep: 56px; } .sh-burger { display: block; order: 3; } .sh-ikona { order: 2; margin-left: auto; } /* menu je vyjmuté z toku, takže doprava tlačí ikona */ /* Přepínač jde před ikonu a bere si volné místo; ikona se pak zařadí hned za něj a burger zůstává úplně vpravo. Ikoně se přitom auto margin bere — dvě volná odsazení vedle sebe by si prostor rozdělila a přepínač by skončil uprostřed lišty. */ .sh-jazyk { order: 1; margin-left: auto; } .sh-jazyk ~ .sh-ikona { margin-left: 0; } /* Rozbalené menu neleží v liště, ale přes celou šířku — písmo se tedy nemá řídit šířkou lišty. Na telefonu spadlo na spodní mez 12,5 px, tedy verzálku 8 px. Dostane vlastní míru: 6,4vw dává na displeji 390 px verzálku 16,6 px, stejně jako nápisy na policích rozcestníku. */ .sh-menu { --sh-pismo: clamp(17px, 5.85vw, 26px); /* řádka dlaždic se musí vejít */ position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; justify-content: flex-start; gap: calc(var(--sh-pismo) * .55); padding: calc(var(--sh-pismo) * .9) var(--sh-kraj) calc(var(--sh-pismo) * 1.2); background: var(--sh-cerna); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; } .sh.je-otevrena .sh-menu { transform: scaleY(1); opacity: 1; pointer-events: auto; } /* prst potřebuje na co šlápnout — řádka je vysoká přes 44 px */ .sh-menu .sh-odkaz { justify-content: center; padding: calc(var(--sh-pismo) * .4) 0; } } @media (prefers-reduced-motion: reduce) { .sh, .sh-odkaz, .sh-d, .sh-menu, .sh-logo img, .sh-ikona img, .sh-jazyk, .sh-jazyk::before { transition: none; } } /* ---- anglická lišta ---- Každé písmeno menu je vlastní karta, takže o šířce řádky rozhoduje počet znaků. Česká řádka má 40 znaků a při okně 1440 px měří 1064 px. Anglická má i po zkrácení (About / Who we are / Where & when / Reservations / Shop) 43 znaků, což by dalo 1144 px a lišta by se začala tlačit. Písmo se proto na anglických stránkách zmenší v poměru 40/43 = 0,93 a řádka vyjde stejně široká jako česká. Na telefonu je menu pod sebou, tam rozhoduje nejdelší nápis: česky „O projektu" (10 znaků), anglicky „Where & when" (12), tedy poměr 10/12 = 0,83. */ html[lang="en"] { --sh-pismo: clamp(11px, .986vw, 22px); } @media (max-width: 960px) { html[lang="en"] .sh-menu { --sh-pismo: clamp(14px, 4.85vw, 22px); } }