/* =============================================== Andělský advent v Litomyšli – styles.css (FINAL, sticky BG + inner wrap) =============================================== */ /* ---------------------- ZÁKLADNÍ PROMĚNNÉ ---------------------- */ :root{ --text:#222; --muted:#666; --bg:#fff; --border:#e6e6e6; --accent:#a00; --brandbar:#7a67c7; /* Sekce / layout */ --section-py:28px; /* svislé odsazení sekcí (desktop) */ --section-py-sm:20px; /* svislé odsazení sekcí (mobil) */ --section-gap:42vh; /* „vzduch“ pod obsahem – viditelné pozadí (desktop) */ --section-gap-sm:32vh; /* „vzduch“ pod obsahem – mobil */ --grad-a:#542659; --grad-b:#155178; /* Sticky pozadí */ --bg-h:100vh; /* výška sticky pozadí (většinou 100vh stačí) */ /* Vnitřní wrap (obsah) */ --inner-max: 1200px; /* max-šířka obsahu uvnitř full-bleed kontejneru */ --inner-pad: clamp(16px, 3vw, 28px); /* L/R padding wrapu (desktop) */ --inner-pad-sm: 12px; /* L/R padding wrapu (mobil) */ --inner-gap: 8px; /* mezera mezi textem a obrázkem */ --block-pad: 20px; /* T/B padding uvnitř .content / .media */ /* Kruhové fotky */ --circle-min: 180px; --circle-max: 280px; } /* Bezpečná šířka viewportu (nepočítá scroll bar) */ :root{ --vw: calc(100vw - (100vw - 100%)); } @supports (width: 100dvw){ :root{ --vw: 100dvw; } } /* Pojistka proti horizontálnímu scrollu */ html, body { overflow-x: clip; } /* ---------------------- WEBOVÝ FONT (Montserrat) Do : ---------------------- */ /* ---------------------- RESET & BASE ---------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; font:16px/1.7 "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; color:var(--text); background:var(--bg)} img{max-width:100%; height:auto; display:block} a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline} /* obecná .container (mimo sekce) může mít standardní šířku */ .container{max-width:1100px; margin-inline:auto; padding-inline:20px} /* ---------------------- HLAVIČKA / NAV ---------------------- */ .top-bar{height:6px; background:var(--brandbar)} .site-header{position:absolute; inset:20px 0 0 0; z-index:10; background:transparent} .header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px} .brand img{display:block; height:56px; width:auto} .site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:14px} .site-header.overlay .site-nav a{color:#fff} .site-nav a{display:block; padding:8px 10px; border-radius:6px} .site-header.overlay .site-nav a:hover{background:rgba(255,255,255,.15)} .menu-toggle{width:42px; height:42px; display:grid; place-items:center; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); border-radius:8px; cursor:pointer} .menu-toggle span{display:block; width:20px; height:2px; background:#fff; position:relative} .menu-toggle span::before,.menu-toggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:#fff} .menu-toggle span::before{top:-6px} .menu-toggle span::after{top:6px} @media (max-width: 860px){ .site-nav{position:fixed; inset:72px 16px auto 16px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease} .site-nav.open{opacity:1; transform:translateY(0); pointer-events:auto} .site-nav ul{flex-direction:column} .site-nav a{color:var(--text)} } @media (min-width: 861px){.menu-toggle{display:none}} /* ---------------------- HERO VIDEO (YouTube) ---------------------- */ .hero-video{position:relative} .video-embed{position:relative; width:100%; aspect-ratio:16/9; background:#000} .video-embed iframe{position:absolute; inset:0; width:100%; height:100%} .video-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.25));} main > .section:first-child{ padding-top: 0 !important; } /* ---------------------- SEKCE + STICKY POZADÍ ---------------------- */ .section{ position:relative; isolation:isolate; color:#fff; padding-top:var(--section-py); padding-bottom:calc(var(--section-py) + var(--section-gap)); /* „vzduch“ pod obsahem */ } @media (max-width:860px){ .section{ padding-top:var(--section-py-sm); padding-bottom:calc(var(--section-py-sm) + var(--section-gap-sm)); } } /* mezi-sekční fotopruhy nevyužíváme */ .section::after{ display:none !important; } /* sticky vrstvy */ .section .bg-fixed, .section .overlay{ position:sticky; top:0; height:var(--bg-h); margin-bottom:calc(-1 * var(--bg-h)); pointer-events:none; } .section .bg-fixed{ z-index:0; background:var(--sec-image, none) center top / cover no-repeat; } /* overlay vypnutý (chceme čisté fotky); zapneš-li, bude barva nad fotkou */ .section .overlay{ display:none; z-index:1; background:linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%); opacity:.90; } /* full-bleed kontejner přes celou šířku s neprůhledným gradientem */ .section > .container{ position:relative; z-index:2; width: var(--vw); max-width: var(--vw); margin-left: calc(50% - (var(--vw) / 2)); margin-right: calc(50% - (var(--vw) / 2)); background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%); color:#fff; padding-left:0; padding-right:0; /* L/R řeší až wrap */ } /* vnitřní WRAP: drží šířku a okraje obsahu */ .section > .container > .wrap{ max-width:var(--inner-max); margin:0 auto; padding-left:var(--inner-pad); padding-right:var(--inner-pad); } @media (max-width:860px){ .section > .container > .wrap{ padding-left:var(--inner-pad-sm); padding-right:var(--inner-pad-sm); } } /* GRID jen na .wrap (ne na .container) */ .section > .container > .wrap.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--inner-gap); align-items:start; } @media (max-width:860px){ .section > .container > .wrap.grid-2{ grid-template-columns:1fr; } } /* Střídání rozložení: sudé sekce prohodí pořadí */ .section .content{ order:1 } .section .media{ order:2 } .section:nth-of-type(even) .content{ order:2 } .section:nth-of-type(even) .media{ order:1 } /* Vnitřní svislé odsazení obsahu (T/B = 20px) */ .section > .container > .wrap.grid-2 > .content, .section > .container > .wrap.grid-2 > .media{ padding-block: var(--block-pad); } /* Typografie v sekcích */ .h2{font-family:'Montserrat', "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; font-size:clamp(22px, 3.2vw, 36px); margin:0 0 6px; letter-spacing:.2px} .h3{font-family:'Montserrat', "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; font-size:clamp(18px, 2.2vw, 20px); margin:10px 0 6px} .section .h2, .section .h3{ color:#fff; text-align:center; } .section p, .section li, .section .muted{ color:#eef3ff } .section a{ color:#cfe4ff } .section a:hover{ color:#fff } .content p{ margin:0 0 6px; text-align: justify; line-height:1.4; hyphens:auto; } /* Před návštěvou / Kontakt – lokální layout */ #pred-navstevou .wrap.grid-2.pred-navstevou{ grid-template-columns: 1fr 1fr; /* dvě kolony */ align-items: start; gap: var(--inner-gap); } #pred-navstevou .wrap.grid-2.pred-navstevou > .col{ min-width: 0; } /* vnitřní rytmus */ #pred-navstevou .h2{ margin-bottom: 10px; margin-top: 1em; } #pred-navstevou .h3{ margin: 12px 0 6px; text-align: left; } #pred-navstevou .list{ margin: 0 0 10px; } #pred-navstevou .links{ margin: 10px 0 0; } /* kontakty do tří sloupců, na mobil jeden */ #pred-navstevou .contacts{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 900px){ #pred-navstevou .contacts{ grid-template-columns: 1fr; } } /* zarovnání textů vpravo/organizers */ #pred-navstevou .organizers p{ margin: 0 0 8px; } #pred-navstevou .socials{ margin-top: 8px; } /* mobil – stackne se to pěkně pod sebe */ @media (max-width: 860px){ #pred-navstevou .wrap.grid-2.pred-navstevou{ grid-template-columns: 1fr; } } #kontakt{ scroll-margin-top: 90px; } /* ---------------------- MÉDIA / OBRÁZKY ---------------------- */ .media{ display:grid; gap:10px; justify-items:center } .circle{ width: clamp(var(--circle-min), 36vw, var(--circle-max)); aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 50%; box-shadow:0 3px 8px rgba(0,0,0,.14); display:block; } .section .media img:not(.circle){ width:100%; height:auto; display:block; } .intro-media{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inner-gap); justify-items:center; } @media (max-width: 540px){ .intro-media{ grid-template-columns: 1fr; } } /* ---------------------- PŘIŘAZENÍ FOTEK (per sekce) cesty vzhledem k /css/styles.css → ../images/... ---------------------- */ /* #uvod { --sec-image:url("../images/bg-uvod.jpg"); } #trhy { --sec-image:url("../images/bg-trhy.jpg"); } #videomapping { --sec-image:url("../images/bg-videomapping.jpg"); } #koncerty { --sec-image:url("../images/bg-koncerty.jpg"); } #deti { --sec-image:url("../images/bg-deti.jpg"); } #betlemy { --sec-image:url("../images/bg-betlemy.jpg"); } #muzeum { --sec-image:url("../images/bg-muzeum.jpg"); } #andele-na-navrsi{ --sec-image:url("../images/bg-andele.jpg"); } #prochazky { --sec-image:url("../images/bg-prochazky.jpg"); } #pekelne-sklepeni{ --sec-image:url("../images/bg-peklo.jpg"); } #kam-dnes { --sec-image:url("../images/bg-kamdnes.jpg"); }*/ /* volitelný per-sekce override šířky wrapu (příklad) */ /* #uvod > .container > .wrap{ --inner-max: 820px; } */ /* ---------------------- PATIČKA ---------------------- */ .site-footer{background:#fff} .site-footer small{color:var(--muted)} /* Footer layout + socials */ .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom: 20px; } .footer-socials{ display:flex; gap:12px; } .footer-socials .social{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border); border-radius:999px; color:#444; background:#fff; transition:.2s ease; } .footer-socials .social:hover{ color:#fff; background:var(--grad-b); border-color:transparent; transform:translateY(-1px); } .site-footer .copyright{ color:var(--muted); } .site-footer .copyright a{ color:inherit; text-decoration:none; } .site-footer .copyright a:hover{ color:var(--accent); text-decoration:underline; } /* Stack na mobilu */ @media (max-width: 640px){ .footer-inner{ flex-direction:column; align-items:flex-start; gap:12px; } } /* ---------------------- EFEKTY + PŘÍSTUPNOST + TISK ---------------------- */ .section img{transition:transform .25s ease} .section img:hover{transform:scale(1.015)} :focus-visible{outline:2px solid rgba(170,0,0,.5); outline-offset:3px} @media print{ .menu-toggle,.site-nav,.hero-video{display:none !important} body{background:#fff} } /* =========================== SPACING OVERRIDES (append) =========================== */ :root{ --inner-gap: 24px; /* mezera CONTENT ↔ MEDIA (desktop) */ --inner-gap-sm: 16px; /* mezera CONTENT ↔ MEDIA (mobil) */ } /* Větší mezera mezi textem a obrázkem (sloupce ve wrapu) */ .section > .container > .wrap.grid-2{ gap: var(--inner-gap) !important; } @media (max-width: 860px){ .section > .container > .wrap.grid-2{ gap: var(--inner-gap-sm) !important; } } /* Dva úvodní obrázky vedle sebe – zvětšit rozestup */ .intro-media{ gap: calc(var(--inner-gap) + 8px) !important; /* klidně uprav na +12px apod. */ } /* (volitelné) trochu „vzduchu“ kolem dvojice obrázků vůči textu */ .section .media .intro-media{ margin-top: 8px; margin-bottom: 8px; } /* ========================================================= FIX: vždy viditelný obrázek u vnějšího okraje + text vedle ========================================================= */ /* Responsivní šířka sloupce s obrázkem (max 280 px) */ :root{ --media-col: clamp(220px, 28vw, 280px); /* ⬅ uprav, když chceš širší/užší */ } /* Liché sekce: [MEDIA(var(--media-col))] [CONTENT(1fr)] */ .section > .container > .wrap.grid-2{ grid-template-columns: var(--media-col) 1fr !important; gap: var(--inner-gap) !important; /* používá tvoji proměnnou pro odstup */ } /* Sudé sekce: [CONTENT(1fr)] [MEDIA(var(--media-col))] */ .section:nth-of-type(even) > .container > .wrap.grid-2{ grid-template-columns: 1fr var(--media-col) !important; } /* Obrázek drž u vnějšího okraje kontejneru */ .section > .container > .wrap.grid-2 > .media{ justify-self: end; } .section:nth-of-type(even) > .container > .wrap.grid-2 > .media{ justify-self: start; } /* Obrázky přizpůsob sloupci bez deformace */ .section .media .circle{ width: 100% !important; /* vyplní šířku media-sloupce */ height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; } .section .media img:not(.circle){ width: 100%; height: auto !important; } /* Úvodní dvojice fotek (zůstává vedle sebe uvnitř media-sloupce) */ .intro-media{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--inner-gap) + 8px); justify-items:center; } @media (max-width: 540px){ .intro-media{ grid-template-columns: 1fr; } } /* ========================================================= TEXT MAX ŠÍŘKA AŽ K OBRÁZKU + PEVNÝ ODSTUP 40px ========================================================= */ /* odstup mezi sloupci (text ↔ obrázek) */ :root{ --inner-gap: 40px; /* uprav si podle chuti (např. 32px) */ --media-col: clamp(220px, 28vw, 280px); /* šířka sloupce s obrázkem (ponech, pokud už máš jinde) */ } /* Liché sekce (DOM pořadí: .content, .media): [CONTENT(1fr)] [MEDIA(fix)] */ .section > .container > .wrap.grid-2{ grid-template-columns: 1fr var(--media-col) !important; gap: var(--inner-gap) !important; } /* Sudé sekce: [MEDIA(fix)] [CONTENT(1fr)] */ .section:nth-of-type(even) > .container > .wrap.grid-2{ grid-template-columns: var(--media-col) 1fr !important; } /* Obrázek drž u vnějšího okraje kontejneru */ .section > .container > .wrap.grid-2 > .media{ justify-self: end; } .section:nth-of-type(even) > .container > .wrap.grid-2 > .media{ justify-self: start; } /* Textový sloupec ať může využít celou šířku (bez min-content omezení) */ .section > .container > .wrap.grid-2 > .content{ min-width: 0; } /* ========================================================= DUO FOTKY 280px: media sloupec se roztáhne podle obsahu ========================================================= */ /* Základní šířka media-sloupce (1 fotka) + mezery */ :root{ --media-col: clamp(220px, 28vw, 280px); /* 1 fotka */ --duo-gap: 20px; /* mezera mezi 2 fotkami */ } /* Liché sekce: [CONTENT(1fr)] [MEDIA(minmax(… , max-content))] */ .section > .container > .wrap.grid-2{ grid-template-columns: 1fr minmax(var(--media-col), max-content) !important; gap: var(--inner-gap) !important; } /* Sudé sekce: [MEDIA(minmax(… , max-content))] [CONTENT(1fr)] */ .section:nth-of-type(even) > .container > .wrap.grid-2{ grid-template-columns: minmax(var(--media-col), max-content) 1fr !important; } /* === Intro dupla uvnitř media: 2 pevné sloupky 280px === */ .section > .container > .wrap.grid-2 > .media .intro-media{ display:grid !important; grid-template-columns: repeat(2, var(--circle-max)) !important; /* 2×280px */ gap: var(--duo-gap) !important; justify-content: center; /* jemné centrování dvojice v rámci media-sloupce */ justify-items: center; } /* Kruhy v intro dvojici mají pevnou velikost 280px a nedeformují se */ .section > .container > .wrap.grid-2 > .media .intro-media .circle{ width: var(--circle-max) !important; /* 280px */ height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; } /* U ostatních obrázků v media ponech responsivní chování */ .section .media img:not(.circle){ width: 100%; height: auto !important; } /* Vnější zarovnání media-sloupce (obrázky k vnějšímu okraji) */ .section > .container > .wrap.grid-2 > .media{ justify-self: end; } .section:nth-of-type(even) > .container > .wrap.grid-2 > .media{ justify-self: start; } /* Mobilní chování (stack) */ @media (max-width: 860px){ .section > .container > .wrap.grid-2{ grid-template-columns: 1fr !important; } } @media (max-width: 540px){ .section > .container > .wrap.grid-2 > .media .intro-media{ grid-template-columns: 1fr !important; gap: calc(var(--inner-gap) - 4px) !important; } } /* ========================================================= RESPONSIVE TUNING: menší fotky na tabletu + dřívější stack pro .intro-media ========================================================= */ /* Tablet L (≤1200px): zmenši kruhy a mezery, zúží se media-sloupec → víc místa pro text */ @media (max-width: 1200px){ :root{ --circle-max: 240px; --media-col: clamp(200px, 28vw, var(--circle-max)); --inner-gap: 32px; /* text ↔ obrázek */ --duo-gap: 16px; /* mezera mezi 2 fotkami */ } } /* Tablet M (≤1024px): řádek s .intro-media sroluj do 1 sloupce, ale dvojici fotek nech vedle sebe uvnitř media */ @media (max-width: 1024px){ /* pokud řádek obsahuje dvojici fotek, stackni Content/Media pod sebe */ .section > .container > .wrap.grid-2:has(.media .intro-media){ grid-template-columns: 1fr !important; gap: var(--inner-gap) !important; } /* media blok nech klidně širší a vystředěný */ .section > .container > .wrap.grid-2:has(.media .intro-media) > .media{ justify-self: center; max-width: calc(2 * var(--circle-max) + var(--duo-gap)); width: 100%; } /* uvnitř dvojice drž 2 sloupce (vedle sebe) */ .section > .container > .wrap.grid-2:has(.media .intro-media) .intro-media{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--duo-gap) !important; } } /* Mobil (≤640px): i dvojice fotek už pod sebe */ @media (max-width: 640px){ :root{ --circle-max: 220px; /* ještě o chlup menší kuličky */ --media-col: clamp(200px, 40vw, var(--circle-max)); --inner-gap: 24px; --duo-gap: 12px; } .section > .container > .wrap.grid-2:has(.media .intro-media) .intro-media{ grid-template-columns: 1fr !important; } } /* ========================================================= RESPONSIVE: větší okraje textu + spolehlivé zalomení obrázků ========================================================= */ /* Tablet – přidej víc „vzduchu“ u okrajů wrapu */ @media (max-width: 1200px){ :root{ --inner-pad: clamp(22px, 5vw, 40px); } } /* <= 860px: vynutit 1 sloupec pro všechny sekce + reset media šířek (řeší případ, kdy se obrázek z “levých” sekcí nezalamoval) */ @media (max-width: 860px){ /* vždy 1 sloupec */ .section > .container > .wrap.grid-2{ grid-template-columns: 1fr !important; gap: var(--inner-gap) !important; } /* obrázek doprostřed a ať se přizpůsobí šířce */ .section > .container > .wrap.grid-2 > .media{ justify-self: center !important; width: 100%; max-width: min(100%, var(--circle-max)); } /* pokud je v .media dvojice fotek, dovol širší blok, ale pořád drž 1 sloupec layoutu řádku */ .section > .container > .wrap.grid-2:has(.media .intro-media) > .media{ max-width: calc(2 * var(--circle-max) + var(--duo-gap)); width: 100%; } /* větší vnitřní okraje textu vůči stránce */ .section > .container > .wrap{ padding-left: clamp(20px, 6vw, 48px); padding-right: clamp(20px, 6vw, 48px); } } /* <= 640px: ještě o chlup víc okrajů a přepnutí dvojice fotek pod sebe */ @media (max-width: 640px){ :root{ --inner-pad: clamp(20px, 7vw, 56px); } .section > .container > .wrap.grid-2:has(.media .intro-media) .intro-media{ grid-template-columns: 1fr !important; } } /* ============================================ MOBILE WRAP FIX (≤860px) - vždy 1 sloupec - oba bloky (text i obrázek) přes celou šířku -> pod sebou - obrázky vystředit ============================================ */ @media (max-width: 860px){ /* 1 sloupec pro všechny sekce, přepíše i dřívější !important */ .section > .container > .wrap.grid-2{ grid-template-columns: 1fr !important; } /* oba „sloupce“ ať zaberou celou šířku gridu (1 / -1) — tím se jistě zalomí */ .section > .container > .wrap.grid-2 > .content, .section > .container > .wrap.grid-2 > .media{ grid-column: 1 / -1 !important; } /* obrázkový blok vystředit a dát mu bezpečnou šířku */ .section > .container > .wrap.grid-2 > .media{ justify-self: center !important; width: 100% !important; max-width: min(100%, var(--circle-max)) !important; } /* dvojice úvodních fotek: na mobilu klidně nechat 2 vedle sebe, ať je přechod plynulý (pod 640px je dáme pod sebe níže) */ .section > .container > .wrap.grid-2 > .media .intro-media{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--inner-gap) !important; } } /* velmi úzké telefony: dvojici fotek už pod sebe */ @media (max-width: 640px){ .section > .container > .wrap.grid-2 > .media .intro-media{ grid-template-columns: 1fr !important; } } /* === PŘED NÁVŠTĚVOU / KONTAKT – stack za sebou === */ #pred-navstevou .wrap.grid-2.pred-navstevou{ /* místo 2 sloupců jeden – H2 nebudou vedle sebe */ grid-template-columns: 1fr !important; align-items: start; } /* pro jistotu: obě .col přes celou šířku, ať to nic nepřebije */ #pred-navstevou .wrap.grid-2.pred-navstevou > .col{ grid-column: 1 / -1; } /* příjemná mezera mezi bloky (Před návštěvou → Kontakt) */ #pred-navstevou .wrap.grid-2.pred-navstevou .col + .col{ margin-top: clamp(16px, 2vw, 28px); } /* v téhle sekci zarovnat nadpisy vlevo (ne do středu) */ #pred-navstevou .h2, #pred-navstevou .h3{ text-align: left; } /* kontakty zůstanou v kartách (3 sloupce na desktopu) */ #pred-navstevou .contacts{ display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px){ #pred-navstevou .contacts{ grid-template-columns: 1fr; } } /* Pořadatelé – tři sloupce, responzivně */ #pred-navstevou .organizers{ margin-top:24px; margin-bottom: 20px;} #pred-navstevou .organizers-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 24px; align-items:start; } #pred-navstevou .organizers .org p{ margin:0; text-align:left; line-height:1.45; } #pred-navstevou .organizers .org strong{ display:inline-block; margin-bottom:2px; } /* breakpoints */ @media (max-width: 960px){ #pred-navstevou .organizers-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 600px){ #pred-navstevou .organizers-grid{ grid-template-columns:1fr; } } /* ===== PŘED NÁVŠTĚVOU: bez pozadí + menší mezera k patičce ===== */ #pred-navstevou{ /* zruš fotku ve sticky pozadí a stáhni spodní mezeru */ --sec-image: none !important; --section-gap: 0vh; /* desktop mezera pod sekcí (klidně dej 0) */ --section-gap-sm: 6vh; /* mobilní mezera pod sekcí */ } /* pro jistotu úplně vypni sticky vrstvu s fotkou jen v této sekci */ #pred-navstevou .bg-fixed{ display: none !important; } /* Velikost mapy (responsivní) */ #mapa{ width:100%; height:clamp(320px, 60vh, 800px); } /* Pseudo fullscreen fallback (plugin to používá) */ .leaflet-pseudo-fullscreen{ position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; z-index:99999; } .p-icon > div{ display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:#155178; color:#fff; font:700 14px/1 Montserrat, system-ui, sans-serif; box-shadow:0 2px 6px rgba(0,0,0,.25); } /* Všude podtržené odkazy */ a{ text-decoration: underline; } /* Výjimka: horní menu */ .site-header .site-nav a{ text-decoration: none; } .site-header .site-nav a:hover{ text-decoration: none; background: rgba(255,255,255,.15); } /* Odkaz-tlačítko nemá podtržení */ a.btn{ text-decoration: none; color:#155178; } /* Tlačítko (anchor) */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; font-weight:600; line-height:1; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.12); color:#fff; transition:background .15s ease, transform .05s ease; } .btn:hover{ background:rgba(255,255,255,.18); } .btn:active{ transform: translateY(1px); } /* Varianta se světlým pozadím (hodí se na tmavém gradientu) */ .btn--solid{ background:#fff; color:#155178; border-color:#fff; } .btn--solid:hover{ filter:brightness(.96); } /* === NO HAMBURGER: odkazy vždy viditelné === */ .menu-toggle{ display:none !important; } /* Základ navu – vodorovně, s možností zalomení */ .header-inner{ flex-wrap: wrap; row-gap: 8px; } .site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .site-nav a{ padding:8px 12px; border-radius:8px; } /* Zrušení mobilního overlay navu */ @media (max-width:860px){ .site-nav{ position:static !important; inset:auto !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; opacity:1 !important; pointer-events:auto !important; } .site-nav ul{ flex-direction:row !important; justify-content:flex-end; } /* barva odkazů přes video zůstává bílá */ .site-header.overlay .site-nav a{ color:#fff; } .site-header.overlay .site-nav a:hover{ background:rgba(255,255,255,.15); } } /* Volitelně: na extra úzkých mobilech dej menu pod logo vlevo */ @media (max-width:480px){ .header-inner{ justify-content:flex-start; } .site-nav ul{ justify-content:flex-start; } } /* ===================================================== TILT: pivot přes dolní roh (override předchozího efektu) - liché sekce (obrázek vpravo): dolní PRAVÝ roh, +45° - sudé sekce (obrázek vlevo): dolní LEVÝ roh, −45° ===================================================== */ /* pro jistotu 3D kontext */ .section > .container > .wrap .media, .section > .container > .wrap .media .intro-media{ perspective: 1000px; transform-style: preserve-3d; } /* výchozí stav (obrázek vpravo) */ .section .media .circle, .section .media img.tilt{ transform-origin: 100% 100%; /* dolní PRAVÝ roh */ transform: rotateZ(45deg) translateY(14px) scale(.96); opacity: 0; transition: transform .85s cubic-bezier(.2,.7,.2,1), opacity .6s ease; will-change: transform, opacity; } /* obrázek vlevo (sudé sekce) – pivot na dolním LEVÉM rohu + opačný směr */ .section:nth-of-type(even) .media .circle, .section:nth-of-type(even) .media img.tilt{ transform-origin: 0% 100%; /* dolní LEVÝ roh */ transform: rotateZ(-45deg) translateY(14px) scale(.96); } /* po vstupu sekce do viewportu */ .section.is-in .media .circle, .section.is-in .media img.tilt{ transform: rotateZ(0deg) translateY(0) scale(1); opacity: 1; } /* jemný hover, ať se nesráží s hlavní animací */ .section .media .circle:hover, .section .media img.tilt:hover{ transform: rotateZ(0deg) translateY(0) scale(1.015); } /* zruš starý globální hover, který nastavoval jiné transformace */ .section img:hover{ transform: none; } /* prefer-reduced-motion respekt */ @media (prefers-reduced-motion: reduce){ .section .media .circle, .section .media img.tilt{ transition: none !important; transform: none !important; opacity: 1 !important; } } /* pokud by se objevil horizontální skrol kvůli rotaci, odkomentuj jednu z možností: body{ overflow-x:hidden; } .section > .container{ overflow:hidden; } ořízne přesah během náklonu */ /* === TILT SPEED CONTROL === */ :root{ /* uprav si podle chuti: 1.2s – 1.8s je příjemně pomalé */ --tilt-dur: 1.6s; --tilt-ease: cubic-bezier(.2,.7,.2,1); } /* zpomalení hlavní rotace + jemně pomalejší vybliknutí opacity */ .section .media .circle, .section .media img.tilt{ transition: transform var(--tilt-dur) var(--tilt-ease), opacity calc(var(--tilt-dur) * .65) ease; } /* volitelné: hover ať není přehnaně rychlý */ .section .media .circle:hover, .section .media img.tilt:hover{ transition-duration: calc(var(--tilt-dur) * .6); } .intro-media .circle:nth-child(1){ transition-delay: .05s; } .intro-media .circle:nth-child(2){ transition-delay: .18s; } @media (max-width: 860px){ /* nav drž vpravo nahoře */ .site-header .site-nav{ margin-left: auto; text-align: right; } /* UL už nebude flex → bude se chovat jako běžný blok */ .site-header .site-nav ul{ display: block !important; /* přepíše původní display:flex */ padding: 0; margin: 0; } /* Každá položka na vlastní řádek */ .site-header .site-nav li{ display: block !important; margin: 0 0 2px; /* menší svislá mezera */ } /* Odkaz přes celý řádek, kompaktní */ .site-header .site-nav a{ display: block; padding: 6px 8px; line-height: 1.2; } } /* PROGRAM – layout */ #program .program{ max-width: min(var(--inner-max), 1100px); } #program .h2{ text-align: center; margin-bottom: 10px; } /* Akordeon */ .program-day{ border:1px solid rgba(255,255,255,.25); border-radius:12px; background: rgba(255,255,255,.06); margin: 10px 0; overflow: hidden; } .program-day[open]{ background: rgba(255,255,255,.09); } .program-day > summary{ list-style:none; cursor:pointer; user-select:none; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700; } .program-day > summary::-webkit-details-marker{ display:none; } /* šipka */ .program-day > summary::after{ content:"▾"; transform: rotate(-90deg); transition: transform .2s ease; opacity:.9; } .program-day[open] > summary::after{ transform: rotate(0deg); } /* názvy dnů */ .day-title{ font-family:'Montserrat',system-ui,sans-serif; } .day-date{ font-weight:600; opacity:.95; } /* Seznam položek dne */ .program-list{ margin:0; padding: 8px 14px 14px 14px; list-style:none; display:grid; gap:10px; } .program-item{ display:grid; gap:8px; grid-template-columns: 260px 1fr; /* čas/místo | popis */ align-items:start; padding:10px 8px; border-radius:8px; background: rgba(0,0,0,.08); } .program-item .slot{ font-weight:700; } .program-item .desc strong{ display:block; } /* Responzivně: stack položek pod sebe */ @media (max-width: 860px){ .program-item{ grid-template-columns: 1fr; } } /* drobný styling hvězdičky apod. */ .program .muted{ color:#e8f0ff; font-size:.95em; } /* barvy pro program (můžeš klidně doladit) */ :root{ --program-title: #ffd866; /* teplá “zlatá” pro název akce */ --program-place: #cfe4ff; /* jemnější modrá pro místo */ } /* název akce – výrazněji a na vlastní řádek */ #program .program-item .desc strong{ color: var(--program-title); font-weight: 800; line-height: 1.25; margin-bottom: 2px; /* malý odstup od textu pod ním */ } /* levý sloupec (čas / místo) lehce ztišíme, ať neplete oči s názvem */ #program .program-item .slot{ color: var(--program-place); font-weight: 700; /* necháváme původní tučnost */ font-variant-numeric: tabular-nums; /* pěkné zarovnání časů */ } /* drobný hover efekt – nepovinné */ #program .program-item:hover .desc strong{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); }