/* Pojistka: stranka se nikdy neposouva do stran (mobil). "clip" nevyrabi posuvnou oblast, takze sticky navigace zustane funkcni. */ html,body{overflow-x:clip;max-width:100%} /* vz.coach — tmavý režim. Aktivuje se přes (řídí theme.js). Používá html[data-theme="dark"] kvůli vyšší specificitě než :root stránky (jinak by pozdější :root přebil proměnné bez ohledu na pořadí načtení). */ html[data-theme="dark"] { --paper: #1b1915; --ink: #f2eee3; --card: #232019; --gray: #aca699; --line: #363229; --yellow-soft: #2c2816; --shadow: 0 10px 30px rgba(0,0,0,.5); } /* Základ */ html[data-theme="dark"] body { background: var(--paper); color: var(--ink); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--ink); } /* Navigace — stejné pozadí jako stránka, ať mezi lištou a obsahem není šev */ html[data-theme="dark"] nav, html[data-theme="dark"] .top { background: var(--paper) !important; border-bottom-color: var(--line); } html[data-theme="dark"] .nav-links { background: transparent; border-bottom-color: var(--line); } html[data-theme="dark"] .nav-links a:not(.btn), html[data-theme="dark"] .logo, html[data-theme="dark"] .nav-in a.back, html[data-theme="dark"] .top a.back { color: var(--ink); } /* Tlačítka (žlutá zůstává; černé okraje/stíny → světlé) */ html[data-theme="dark"] .btn { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); } html[data-theme="dark"] .btn:hover { box-shadow: 1px 1px 0 var(--ink); } html[data-theme="dark"] .btn.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); } html[data-theme="dark"] .btn.ghost { background: var(--card); } /* Karty a bloky s černým okrajem/stínem */ html[data-theme="dark"] .door, html[data-theme="dark"] .m-card, html[data-theme="dark"] .story, html[data-theme="dark"] .card, html[data-theme="dark"] .test-teaser .box, html[data-theme="dark"] .calendly-box, html[data-theme="dark"] .portrait, html[data-theme="dark"] .step .n, html[data-theme="dark"] .price-strip { border-color: var(--ink); } /* Povrchové karty (světlé v light módu) */ html[data-theme="dark"] .area, html[data-theme="dark"] .rev, html[data-theme="dark"] .cred, html[data-theme="dark"] .room, html[data-theme="dark"] details, html[data-theme="dark"] .tool-card, html[data-theme="dark"] .box, html[data-theme="dark"] .qa, html[data-theme="dark"] .grid .col { background: var(--card); border-color: var(--line); } html[data-theme="dark"] .m-card { background: var(--card); } /* Formulářové prvky */ html[data-theme="dark"] input[type=text], html[data-theme="dark"] textarea { background: var(--card); color: var(--ink); border-color: var(--line); } /* Tmavé sekce (už tmavé) — mírně odlišit od pozadí stránky */ html[data-theme="dark"] .quotes, html[data-theme="dark"] .video, html[data-theme="dark"] .dark, html[data-theme="dark"] .hero { background: #100f0c; } html[data-theme="dark"] .rev.featured, html[data-theme="dark"] .featured { background: #14130f; border-color: var(--line); } html[data-theme="dark"] .q-item { background: #17150f; border-color: var(--line); } html[data-theme="dark"] .cta, html[data-theme="dark"] .ai { background: #100f0c; } /* Žluté akční sekce necháme žluté (designový akcent), kartu uvnitř sladíme */ html[data-theme="dark"] .method .m-card { background: var(--paper); } /* Calendly widget je světlý — box necháme světlý */ html[data-theme="dark"] .calendly-box { background: #fff; } /* ========================================================= Logo: rozbaluje se jen tam, kde se vejde vedle menu. Třídu .fits přidává theme.js po změření šířky. Bez ní se jméno nerozbalí ani animací, ani při najetí myší — takže do menu už nikdy nenarazí. ========================================================= */ html .logo .seg { transition: max-width .55s cubic-bezier(.65,0,.35,1), opacity .55s cubic-bezier(.65,0,.35,1); } html .logo.intro .seg { animation: none; } html .logo.fits.intro .seg { animation: vzSeg 2.4s cubic-bezier(.65,0,.35,1) 1 forwards, vzSegFade 2.4s linear 1 forwards; } html .logo:hover .seg { max-width: 0; opacity: 0; } html .logo.fits:hover .seg { max-width: var(--segw,400px); opacity: 1; } /* stav pro měření: rozbalené, ale neviditelné a bez animace */ html .logo.measure .seg { max-width: none !important; opacity: 0 !important; transition: none !important; animation: none !important; } /* záloha pro stránky, které si klíčové snímky nedefinují samy (rozbalí se hned, vteřinu podrží a složí — jako bublina kalendáře) */ @keyframes vzSeg{0%{max-width:0px}16%,68%{max-width:400px}90%,100%{max-width:0px}} @keyframes vzSegFade{0%{opacity:0}18%,72%{opacity:1}92%,100%{opacity:0}} /* ========================================================= Čitelnost v tmavém režimu (1. 8. 2026) ========================================================= */ /* Na žlutém se nikdy nepíše světle. */ html[data-theme="dark"] .btn:not(.dark):not(.ghost), html[data-theme="dark"] .nav-links a.btn, html[data-theme="dark"] .chip.on, html[data-theme="dark"] .step .n, html[data-theme="dark"] .hero h1 span:not(.hl), html[data-theme="dark"] .grid .col h3 i, html[data-theme="dark"] .video-frame .play, html[data-theme="dark"] .pbar .dot.b { color: #141414; } html[data-theme="dark"] .btn.ghost { color: var(--ink); border-color: var(--line); } /* Celé žluté sekce: text černý. Tmavé karty uvnitř se vrací ke světlému. */ html[data-theme="dark"] .method, html[data-theme="dark"] .booking, html[data-theme="dark"] .cta-card { color: #141414; } html[data-theme="dark"] .method > .wrap > h2, html[data-theme="dark"] .method > .wrap > .h2, html[data-theme="dark"] .method > .wrap > h3, html[data-theme="dark"] .method > .wrap > p, html[data-theme="dark"] .method > .wrap > .lead, html[data-theme="dark"] .method > .wrap > .eyebrow, html[data-theme="dark"] .booking > .wrap > h2, html[data-theme="dark"] .booking > .wrap > .h2, html[data-theme="dark"] .booking > .wrap > h3, html[data-theme="dark"] .booking > .wrap > p, html[data-theme="dark"] .booking > .wrap > .lead, html[data-theme="dark"] .booking > .wrap > .eyebrow, html[data-theme="dark"] .cta-card h2, html[data-theme="dark"] .cta-card h3, html[data-theme="dark"] .cta-card p { color: #141414; } html[data-theme="dark"] .price-card{background:var(--paper);border-color:var(--ink);color:var(--ink)} html[data-theme="dark"] .price-card p{color:var(--gray)} html[data-theme="dark"] .price-card .pc-tag{border-color:var(--ink)} html[data-theme="dark"] .price-card.doporuc{box-shadow:6px 6px 0 var(--ink)} html[data-theme="dark"] .photo-fan .pf{border-color:var(--ink)} html[data-theme="dark"] .method .price-strip, html[data-theme="dark"] .method .m-card, html[data-theme="dark"] .booking .lead-box { color: var(--ink); } html[data-theme="dark"] .booking .lead-box { background: var(--paper); border-color: var(--ink); box-shadow: 8px 8px 0 var(--ink); } html[data-theme="dark"] .lead-box input, html[data-theme="dark"] .lead-box textarea { background: var(--card); color: var(--ink); border-color: var(--ink); } html[data-theme="dark"] .lead-box input::placeholder, html[data-theme="dark"] .lead-box textarea::placeholder { color: var(--gray); } html[data-theme="dark"] .chip { background: var(--card); color: var(--ink); border-color: var(--ink); } html[data-theme="dark"] .chip:hover { background: var(--yellow-soft); } html[data-theme="dark"] .chip.on { background: var(--yellow); } html[data-theme="dark"] .lead-alt { color: var(--ink); } /* Žluté zvýraznění pod textem: v tmavém režimu jako podtržení, ať světlé písmo nepřebije žlutá plocha. */ html[data-theme="dark"] .hl { background: linear-gradient(transparent 82%, var(--yellow) 82%); } /* na žlutém pozadí je zvýraznění stejně neviditelné — nechat text čitelný */ html[data-theme="dark"] .method .hl, html[data-theme="dark"] .booking .hl, html[data-theme="dark"] .cta-card .hl { background: none; } /* Loga médií jsou tmavá kresba na průhledném pozadí → na tmavém zmizí. */ html[data-theme="dark"] img[src*="radio-prostor-logo"], html[data-theme="dark"] img[src*="marianne-logo"], html[data-theme="dark"] img[src*="lp-logo"] { filter: brightness(0) invert(1); } /* ICF a EMCC mají v obrázku zapečené bílé pozadí — dát jim čistou bílou destičku, ať to vypadá záměrně a ne jako slepený obdélník. */ html[data-theme="dark"] .cred-logos { background: #fff; border-top: none; border-radius: 8px; padding: 7px 10px; gap: 10px; flex-wrap: wrap; justify-content: center; } html[data-theme="dark"] .cred-logos img { height: 16px; } html[data-theme="dark"] .cred-logos .lsep { background: #d8d4c8; } /* Welcome to the Jungle má vlastní žluté pozadí — zaoblit stejně jako ostatní */ html[data-theme="dark"] img[src*="welcome_to_the_jungle"] { border-radius: 5px; } /* Testy a mini-testy: ukazatele a puntíky škály musí být vidět */ html[data-theme="dark"] .progress { background: var(--line); } html[data-theme="dark"] .progress i, html[data-theme="dark"] .dbar i, html[data-theme="dark"] .pbar i { background: var(--yellow); } html[data-theme="dark"] .dbar { background: var(--line); } html[data-theme="dark"] .pscale button { background: var(--card); border-color: var(--ink); } html[data-theme="dark"] .pscale button.mid { border-color: var(--line); background: var(--line); } html[data-theme="dark"] .pscale button.sel { background: var(--yellow); border-color: var(--yellow); } /* Drobnosti */ html[data-theme="dark"] #leadErr { color: #ff8a80 !important; } html[data-theme="dark"] #ctabar { background: var(--paper); border-top-color: var(--line); } html[data-theme="dark"] .hp-badge { background: var(--card); border-color: var(--line); color: var(--gray); } html[data-theme="dark"] .meta span, html[data-theme="dark"] .more-link, html[data-theme="dark"] .mini-card, html[data-theme="dark"] .measure-card { background: var(--card); border-color: var(--line); } /* --- Nastavení (jazyk + režim) vpravo nahoře --- */ /* Misto pro prepinac jazyka a rezimu drzime jen tam, kde ta tlacitka opravdu zasahuji do listy. Nad 1320 px uz je obsah uzsi nez okno a rezerva by jen zbytecne brala sirku (a tim i prostor pro rozbaleni loga). */ @media(min-width:881px) and (max-width:1319px){ .top .wrap{ padding-right:132px } } /* Hlavičce webu stačí uhnout přesně o tolik, o kolik by lišta zasahovala — ne pokaždé o celých 132 px. Rozbalené logo tím dostane o 100 px víc místa. */ @media(min-width:881px) and (max-width:1179px){ nav .nav-in{ padding-right:132px } } @media(min-width:1180px){ nav .nav-in{ padding-right:max(22px, calc(690px - 50vw)) } } @media(max-width:880px){ #vzSettings{ top:auto !important; bottom:16px !important } } @media(max-width:640px){textarea,input[type=text],input[type=email],select{font-size:16px!important}} /* ========================================================= Úpravy 2. 8. 2026 ========================================================= */ /* Menu na mobilu: nikdy modré. V tmavém režimu bílé na černém, ve světlém černé na bílém — a žádný modrý focus ring prohlížeče. */ html[data-theme="dark"] .burger{ color: var(--ink); } html[data-theme="dark"] .nav-links a:not(.btn), html[data-theme="dark"] .nav-links a:not(.btn):link, html[data-theme="dark"] .nav-links a:not(.btn):visited, html[data-theme="dark"] .nav-links a:not(.btn):active{ color: var(--ink); -webkit-text-fill-color: var(--ink); } html[data-theme="dark"] .nav-links a:focus-visible{ outline-color: var(--ink); } html[data-theme="dark"] .nav-links{ background: transparent; } /* Rozbalené menu na mobilu je panel — tam pozadí být musí, na počítači ne (lišta je průsvitná, aby za ní byly vidět hvězdy). */ /* Burger se objevuje pod 1180 px, ne pod 880 px. Mezi 881 a 1179 px tak rozbalený panel dostával background:transparent z pravidla výš a text menu se četl přes obsah stránky. Breakpoint musí sedět s tím v index.html. */ @media(max-width:1179px){ html[data-theme="dark"] .nav-links{ background:#0B1322 !important; } html[data-theme="dark"] .nav-links.open{ box-shadow:0 18px 40px rgba(0,0,0,.55); } } /* Hero: vystřižená postava. Na tmavém by černé tričko splynulo s pozadím, proto je za ním žlutá záře. */ html[data-theme="dark"] .hero-photo .blob{ background: radial-gradient(circle at 50% 44%, rgba(255,212,59,.34), rgba(255,212,59,.12) 56%, rgba(255,212,59,0) 74%); } html[data-theme="dark"] .hero-photo img{ filter: drop-shadow(0 0 30px rgba(255,212,59,.30)) drop-shadow(0 18px 26px rgba(0,0,0,.6)); } /* Citát pod heroem */ /* Citát pod heroem: --yellow-soft dělal bahnitou olivovou plochu a zdroj recenze (rgba(20,20,20,.7)) byl tmavý na tmavém, takže jméno nebylo vidět. */ html[data-theme="dark"] .bigquote{ background: var(--card); border-color: var(--line); } html[data-theme="dark"] .bigquote .src{ color: var(--gray); } html[data-theme="dark"] .bigquote .src a{ color: var(--ink); } /* Štítky nad kartami (ceník, Jak pracuju, Kde se potkáme) byly tmavá pilulka na tmavé kartě — splývaly. Žlutá výplň s tmavým lemem se čte jak na kartě, tak na žluté ploše sekce, přes kterou horní půlka štítku přesahuje. */ html[data-theme="dark"] .m-card .label, html[data-theme="dark"] .price-card .pc-tag, html[data-theme="dark"] .room>.rlabel{ background: var(--yellow); color: #141414; box-shadow: 0 0 0 2px #141414; } html[data-theme="dark"] .bigquote .mark{ color: var(--yellow); } html[data-theme="dark"] .bigquote .src .hv{ color: var(--yellow); } /* Plovoucí bublina na mobilu zůstává žlutá s černým písmem */ html[data-theme="dark"] #ctafab{ color: #141414; border-color: #141414; } /* ========================================================= Vesmír přes celý web — tmavý režim (6. 8. 2026) Vzorem je sekce „O mně": modrá noc, hvězdy, padající kometky. Dlaždice, karty a karusely zůstávají tmavé, jen se sladí do modra. Malý princ a slon zůstávají jen v „O mně". ========================================================= */ html[data-theme="dark"] { --paper: #111826; --card: #18202F; --line: #2B3446; --gray: #a7afbf; --yellow-soft: #1E2438; --vz-hvezda: rgba(255,224,122,.86); --vz-hvezda2: rgba(255,212,59,.55); --vz-pl: #232C3E; --vz-prsten: #FFD43B; } /* Noční obloha místo plochého pozadí. */ html[data-theme="dark"] body { background: linear-gradient(180deg,#0B1322 0%,#101B2E 55%,#0B1322 100%) fixed; } /* Na mobilu se `fixed` pozadí chová nespolehlivě: prohlížeč ho napne přes celou výšku dokumentu, takže hero nahoře ukazoval nejtmavší konec přechodu a vypadal skoro černě. Tam je proto plochá modrá v odstínu, který je na počítači vidět uprostřed stránky. */ @media(max-width:880px){ html[data-theme="dark"] body{ background:#0E1728; } } /* Hvězdy leží pod obsahem: záporný z-index je nad pozadím přeneseným na plátno, ale pod vším ostatním, takže text nikdy nepřekryjí. Vzor se opakuje po dlaždici, aby hustota zůstala stejná na krátké i na dlouhé stránce. */ html[data-theme="dark"] body::before { content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-repeat:repeat;background-size:560px 470px; background-image: radial-gradient(2.5px 2.5px at 76.1% 64.3%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(3.2px 3.2px at 20.1% 67.5%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.0px 2.0px at 42.8% 84.7%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.6px 2.6px at 52.8% 20.5%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.6px 2.6px at 61.0% 85.2%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.2px 2.2px at 86.5% 32.9%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.8px 2.8px at 46.5% 71.3%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 4.1% 25.1%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 47.2% 85.8%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(3.0px 3.0px at 5.0% 89.4%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 76.8% 4.3%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.1px 2.1px at 18.0% 91.1%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.9px 2.9px at 13.1% 22.3%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.4px 2.4px at 20.1% 97.9%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.4px 2.4px at 64.9% 19.5%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 86.2% 99.3%,var(--vz-hvezda) 0 50%,transparent 52%), radial-gradient(2.0px 2.0px at 58.0% 19.8%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 92.0% 46.7%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.4px 1.4px at 21.7% 22.4%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(2.0px 2.0px at 69.0% 21.5%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.3px 1.3px at 7.5% 19.6%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.6px 1.6px at 76.7% 36.8%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.5px 1.5px at 32.8% 63.6%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.4px 1.4px at 21.1% 43.1%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 11.5% 82.0%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.5px 1.5px at 66.3% 87.9%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.5px 1.5px at 38.0% 42.4%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.6px 1.6px at 66.7% 1.1%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.2px 1.2px at 53.5% 34.7%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 70.3% 1.4%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.3px 1.3px at 15.7% 3.9%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 7.0% 15.4%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 72.6% 36.4%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 47.5% 49.8%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.8px 1.8px at 31.3% 86.6%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.3px 1.3px at 68.2% 1.1%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(2.0px 2.0px at 3.7% 34.7%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.3px 1.3px at 87.2% 83.5%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.8px 1.8px at 70.4% 77.2%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.3px 1.3px at 78.9% 14.4%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 79.0% 73.6%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.3px 1.3px at 44.7% 88.6%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.5px 1.5px at 95.3% 88.1%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.8px 1.8px at 7.2% 54.8%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.4px 1.4px at 35.2% 6.2%,var(--vz-hvezda2) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 82.1% 9.5%,var(--vz-hvezda2) 0 50%,transparent 52%); animation: vz-tw 4.6s ease-in-out infinite; } /* Kometky. Přeletí zhruba jednou za čtvrt minuty, každá jinak rychle. */ html[data-theme="dark"] body::after { content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; background-repeat:no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 130'%3E%3Cpath d='M176 6L36 108' stroke='%23FFE566' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M36 108l4 9.4 9.4 4-9.4 4-4 9.4-4-9.4-9.4-4 9.4-4z' fill='%23FFE566'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 130'%3E%3Cpath d='M176 6L36 108' stroke='%23FFE566' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M36 108l4 9.4 9.4 4-9.4 4-4 9.4-4-9.4-9.4-4 9.4-4z' fill='%23FFE566'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 130'%3E%3Cpath d='M176 6L36 108' stroke='%23FFE566' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M36 108l4 9.4 9.4 4-9.4 4-4 9.4-4-9.4-9.4-4 9.4-4z' fill='%23FFE566'/%3E%3C/svg%3E"); background-size: 190px 138px, 140px 101px, 105px 76px; background-position: 108% -12%, 78% -14%, 128% 22%; animation: vz-komety 15s ease-in infinite; } @keyframes vz-tw { 0%,100%{opacity:.6} 50%{opacity:1} } @keyframes vz-komety { 0%,72% { opacity:0; background-position:108% -12%, 78% -14%, 128% 22%; } 75% { opacity:1; } 93%,100% { opacity:0; background-position:24% 62%, 12% 48%, 52% 88%; } } /* Sekce, které byly jen tmavé plochy, teď propouštějí oblohu. */ html[data-theme="dark"] .hero, html[data-theme="dark"] .quotes, html[data-theme="dark"] .video, html[data-theme="dark"] .dark, html[data-theme="dark"] .cta, html[data-theme="dark"] .ai { background: transparent; } html[data-theme="dark"] .bigquote { background: rgba(14,22,38,.62); border-color: var(--line); } html[data-theme="dark"] footer { background: rgba(5,9,18,.74); color:#a7afbf; } html[data-theme="dark"] nav { background: rgba(9,15,28,.86) !important; backdrop-filter: blur(10px); } /* Rozbalený burger panel musí být neprůhledný. Tohle pravidlo ho dřív přebíjelo zpátky na průhledné, protože stojí AŽ ZA media query výš — při stejné specificitě vyhrává to pozdější. Proto je teď jen pro počítač. */ @media(min-width:1180px){ html[data-theme="dark"] .nav-links { background: transparent; } } /* Žluté sekce zůstávají žluté, jen do nich noc prosakuje shora i zdola a po ploše jsou rozeseté tmavě modré hvězdičky. Nadpisy a text jsou vždy až za přechodem, proto sekce v tmavém režimu o kus povyrostou. */ html[data-theme="dark"] .method, html[data-theme="dark"] .booking { position:relative; padding-top:140px;padding-bottom:140px; background-color: var(--yellow); background-image: linear-gradient(180deg,#080D18 0,rgba(9,15,28,.92) 18px,rgba(12,20,38,.5) 62px,rgba(16,27,46,0) 132px), linear-gradient(0deg,#0A1120 0,rgba(10,17,32,.9) 18px,rgba(12,20,38,.48) 62px,rgba(16,27,46,0) 132px), radial-gradient(1.6px 1.6px at 9.2% 40.7%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 9.8% 59.6%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.5px 2.5px at 39.7% 10.4%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.1px 2.1px at 66.6% 48.0%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 18.2% 58.5%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.1px 2.1px at 18.7% 14.5%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 13.6% 40.9%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.4px 2.4px at 5.0% 34.1%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 54.6% 21.1%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.4px 2.4px at 9.8% 98.5%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.5px 2.5px at 60.1% 54.7%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.4px 2.4px at 11.4% 77.7%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 29.8% 72.8%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.8px 1.8px at 66.1% 25.4%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.8px 1.8px at 98.0% 21.5%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.8px 1.8px at 26.1% 50.6%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.1px 2.1px at 4.7% 35.6%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.7px 1.7px at 1.6% 98.1%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.4px 2.4px at 51.4% 96.1%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 88.5% 94.2%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(1.9px 1.9px at 55.1% 56.8%,rgba(12,20,38,.42) 0 50%,transparent 52%), radial-gradient(2.3px 2.3px at 93.4% 46.9%,rgba(12,20,38,.42) 0 50%,transparent 52%); background-repeat:no-repeat,no-repeat,repeat; background-size:auto,auto,480px 400px; } /* Tmavá kometka i na žlutém. */ html[data-theme="dark"] .method::before, html[data-theme="dark"] .booking::before { content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-repeat:no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 130'%3E%3Cpath d='M176 6L36 108' stroke='%230D1526' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M36 108l4 9.4 9.4 4-9.4 4-4 9.4-4-9.4-9.4-4 9.4-4z' fill='%230D1526' opacity='.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 130'%3E%3Cpath d='M176 6L36 108' stroke='%230D1526' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M36 108l4 9.4 9.4 4-9.4 4-4 9.4-4-9.4-9.4-4 9.4-4z' fill='%230D1526' opacity='.6'/%3E%3C/svg%3E"); background-size: 150px 108px, 110px 79px; background-position: 104% 6%, 84% -8%; animation: vz-komety-zlute 17s ease-in infinite 4s; } html[data-theme="dark"] .method > .wrap, html[data-theme="dark"] .booking > .wrap { position:relative; z-index:1; } @keyframes vz-komety-zlute { 0%,74% { opacity:0; background-position:104% 6%, 84% -8%; } 77% { opacity:1; } 92%,100% { opacity:0; background-position:44% 54%, 26% 36%; } } /* Planetky s prstencem rozeseté po stránce (vloženy do sekcí v index.html). */ .vz-planeta { display:none; } html[data-theme="dark"] .vz-planeta { display:block;position:absolute;z-index:-1;pointer-events:none; width:104px;height:78px;opacity:.85; animation: vz-plout 9s ease-in-out infinite alternate; } html[data-theme="dark"] .vz-planeta.pa { top:9%; right:2%; width:96px;height:72px; } html[data-theme="dark"] .vz-planeta.pb { top:24%; left:1%; width:78px;height:59px; animation-delay:1.8s; } html[data-theme="dark"] .vz-planeta.pc { bottom:8%; right:4%; width:112px;height:84px; animation-delay:3.4s; } @keyframes vz-plout { from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-12px) rotate(1deg)} } @media(max-width:880px){ html[data-theme="dark"] .vz-planeta { width:66px;height:50px;opacity:.7; } html[data-theme="dark"] .vz-planeta.pa { width:64px;height:48px; } html[data-theme="dark"] .vz-planeta.pb { width:56px;height:42px; } html[data-theme="dark"] .vz-planeta.pc { width:70px;height:53px; } html[data-theme="dark"] .method, html[data-theme="dark"] .booking { padding-top:118px;padding-bottom:118px; } } @media (prefers-reduced-motion:reduce){ html[data-theme="dark"] body::before, html[data-theme="dark"] body::after, html[data-theme="dark"] .method::before, html[data-theme="dark"] .booking::before, html[data-theme="dark"] .vz-planeta { animation:none !important; } html[data-theme="dark"] body::after { opacity:0; } } /* Omezený pohyb: kdo má v systému zapnuté "omezit pohyb", dostane obsah bez animací. Cíleně, ne plošně — ať zůstane hover feedback tlačítek. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .rv{opacity:1 !important;transform:none !important;transition:none !important} .logo .seg,.logo.intro .seg{animation:none !important;transition:none !important} .door,.door:hover{transition:none;transform:none} } /* Nastavení (EN + režim) v mobilním burger menu. Na velkých displejích řádek v menu neexistuje vizuálně (menu je vodorovné, plovoucí dvojice zůstává). Na mobilu se dvojice přesune do menu a plovoucí verze se schová, ať nepřekrývá obsah u spodní hrany. */ .vz-set-row{display:none;list-style:none} @media(max-width:880px){ html.vz-menu-set #vzSettings{display:none !important} .nav-links.open .vz-set-row{display:flex;gap:10px;align-items:center;padding-top:4px} .vz-set-row a,.vz-set-row button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);-webkit-text-fill-color:currentColor;font-family:var(--font-h,Inter,system-ui,sans-serif);font-weight:700;font-size:14px;letter-spacing:.03em;text-decoration:none;cursor:pointer} /* Na stránkách bez menu zůstává plovoucí dvojice — aspoň dotykově větší. */ #vzSettings a,#vzSettings button{height:44px !important;min-width:44px !important} } /* Šedé nadpisky sekcí na žlutém podkladu byly těsně pod kontrastním limitem (4,4:1) — na žluté patří tmavší odstín (6,4:1). Tmavý režim si je dál přebarvuje po svém (pravidla výš mají vyšší specificitu). */ .method .eyebrow,.booking .eyebrow{color:#4d483a} /* Šipky u karuselu na mobilu měly `--paper`, což je v tmavém režimu skoro černá. Na tmavé sekci splynuly s pozadím. Tmavá výplň se světlým lemem se pozná na modrém podkladu (lem) i na žlutém (výplň). */ html[data-theme="dark"] .fan-hint{background:#141414;border-color:#F2EEE3;color:#F2EEE3;opacity:.95;box-shadow:0 4px 10px rgba(0,0,0,.5)} /* ── Noční obloha vypnutá mimo sekci „O mně" (6. 8. 2026) ───────────────── Hvězdy, kometky a planetky přes celý web působily ezotericky. Tmavá verze zůstává stejně modrá, jen čistá a bez pohybu. Kód výš nemažu, ať se dá kdykoli zapnout zpátky: stačí smazat tenhle blok. Vesmír v sekci „O mně" (.om-sky v index.html) je samostatný a zůstává. */ html[data-theme="dark"] body::before, html[data-theme="dark"] body::after, html[data-theme="dark"] .method::before, html[data-theme="dark"] .booking::before{content:none !important;background-image:none !important;animation:none !important} html[data-theme="dark"] .vz-planeta{display:none !important}