/* ========================================================================== Téma "Jsme Hodoňáci" pro portia6 Barevná paleta a typografie navazují na původní ASP/Bootstrap4 web (přízvuková zelená #5c9f24, tmavý text #444, Open Sans / Roboto). ========================================================================== */ :root { --jh-accent: #5c9f24; --jh-accent-dark: #4a7f1c; --jh-dark: #14213d; --jh-text: #444444; --jh-bg-alt: #f6f8f4; /* Sémantické tokeny "světlých" ploch (body, karty, FAQ, formulář…) — přepínají se podle data-theme na . Hlavička/hero/patička zůstávají natvrdo tmavé (var(--jh-dark)) v OBOU režimech, brand vzhled, netýká se jich. */ --jh-surface-page: #ffffff; --jh-surface-alt: var(--jh-bg-alt); --jh-surface-card: #ffffff; --jh-border-subtle: #e2e2e2; --jh-text-muted: #888888; /* Tokeny jen pro kvízy (.jh-quiz-section*, viz sekce "Kvíz" níže) — kvízy dřív byly natvrdo tmavé (.jh-section--dark) bez ohledu na zvolený režim; teď používají tyto tokeny, aby fungovaly i ve světlém režimu: --jhq-heading barva nadpisů/hlášky/výsledku (kontrastní k pozadí sekce) --jhq-tint-rgb RGB trojice pro jemné poloprůhledné podklady (progress bar, tlačítka odpovědí, zpětná vazba…) — v rgba(var(--jhq-tint-rgb), X) --jhq-tile-shadow stín pod „kamennou deskou“ s otázkou */ --jhq-heading: var(--jh-dark); --jhq-tint-rgb: 20, 33, 61; --jhq-tile-shadow: rgba(20, 33, 61, .12); /* Prohlížeč ať ví, že stránka sama řeší světlý/tmavý vzhled (zabrání vlastní automatické tmavé přebarvovací heuristice prohlížeče navrch). */ color-scheme: light; } /* --- Tmavý režim (přepíná .jh-theme-toggle, viz main.js; počáteční stav řeší inline skript v layout.php). Mění jen tokeny výše — brand barvy (zelený akcent) a natvrdo tmavá hlavička/hero/patička zůstávají stejné v obou režimech. --- */ :root[data-theme="dark"] { color-scheme: dark; --jh-surface-page: #0f1726; --jh-surface-alt: #131f36; --jh-surface-card: #1c2c4d; --jh-border-subtle: rgba(255, 255, 255, .12); --jh-text-muted: #9aa3b8; --jh-text: #e6e9f0; --jhq-heading: #ffffff; --jhq-tint-rgb: 255, 255, 255; --jhq-tile-shadow: rgba(0, 0, 0, .25); } body { font-family: "Open Sans", sans-serif; background: var(--jh-surface-page); color: var(--jh-text); padding-top: 72px; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", sans-serif; font-weight: 700; } a { color: var(--jh-accent); text-decoration: none; } a:hover { color: var(--jh-accent-dark); } .jh-muted { color: var(--jh-text-muted); } /* ---------- Header / navigace ---------- */ #jh-header { height: 72px; background: rgba(13, 21, 40, 0.96); /* o něco tmavší odstín než --jh-dark (#14213d), jen pro podklad pod menu */ z-index: 997; } .jh-logo { font-family: "Roboto", sans-serif; font-weight: 700; font-size: 1.4rem; color: #fff; } .jh-logo { display: inline-flex; align-items: center; gap: .5rem; } .jh-logo-icon { height: 34px; width: auto; display: block; } .jh-logo:hover { color: var(--jh-accent); } .jh-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.75rem; align-items: center; } .jh-nav-link { color: #fff; font-weight: 500; font-size: .95rem; } .jh-nav-link:hover { color: var(--jh-accent); } /* Podtržená položka menu — stránka/sekce, kde se návštěvník právě nachází. Nastavuje ji buď server (WebController::renderLayout(), samostatné podstránky jako Novinky/Galerie/Ke stažení/Zábava/Kalendář/Naše akce), nebo za běhu scrollspy v main.js na jednostránkové homepage (Home/O nás/Naše akce/Tým/ Anketa podle kotvy ve viewportu). */ .jh-nav-link.active { color: var(--jh-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .jh-nav-link--cta.active { text-decoration: none; } .jh-nav-link--cta { background: var(--jh-accent); color: #fff !important; padding: .5rem 1.1rem; border-radius: 4px; } .jh-nav-link--cta:hover { background: var(--jh-accent-dark); } .jh-nav-toggle { background: none; border: none; color: #fff; font-size: 1.6rem; } @media (max-width: 991px) { .jh-nav ul { display: none; position: absolute; top: 72px; right: 0; left: 0; flex-direction: column; background: var(--jh-dark); padding: 1rem 1.5rem; gap: .9rem; } .jh-nav ul.jh-open { display: flex; } } /* ---------- Hero ---------- */ .jh-hero { margin-top: -72px; position: relative; } .jh-hero-carousel { position: relative; height: 100vh; min-height: 560px; overflow: hidden; } .jh-hero-carousel .carousel-inner, .jh-hero-carousel .carousel-item { height: 100%; } .carousel-item { position: relative; overflow: hidden; } /* Prolínání (fade) mezi snímky — použito Bootstrapovo .carousel-fade (viz onepage.php), delší a plynulejší přechod s jemným zpomalením na konci pro "wow" efekt. */ .jh-hero-carousel.carousel-fade .carousel-item { transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); } /* Podkladová fotka odděleně od .carousel-item — umožňuje pomalé přiblížení/posun (Ken Burns efekt a jeho varianty níže), aniž by to hýbalo s vycentrovaným textem. Tmavé pozadí jako fallback, dokud se u ještě nenačtených snímků (viz main.js — líné načítání fotek) nedotáhne skutečná fotka. */ .jh-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: var(--jh-dark); transform: scale(1); } /* Sada různých "wow" přechodů podkladové fotky — main.js při každém přepnutí snímku (událost slide.bs.carousel) přidá na .jh-hero-bg nadcházejícího snímku náhodně jednu z těchto tříd (a vždy jinou, než byla použita naposledy), takže se kolotoč pokaždé tváří trochu jinak, ale zůstává plynulý a nerušivý — malé hodnoty scale/translate, pomalé easing, žádné trhavé pohyby. Délka (7s) je schválně o něco delší než interval mezi snímky (6.5s + 1.4s prolnutí), aby efekt doběhl přesně v okamžiku dalšího přechodu. Animace se restartuje díky tomu, že JS třídu vždy nejdřív odebere a vynutí reflow. */ .jh-fx-zoomin { animation: jhFxZoomIn 7s cubic-bezier(.25, .1, .25, 1) forwards; } .jh-fx-zoomout { animation: jhFxZoomOut 7s cubic-bezier(.25, .1, .25, 1) forwards; } .jh-fx-pan-lr { animation: jhFxPanLR 7s ease-in-out forwards; } .jh-fx-pan-rl { animation: jhFxPanRL 7s ease-in-out forwards; } .jh-fx-diagonal { animation: jhFxDiagonal 7s ease-in-out forwards; } .jh-fx-blur-reveal { animation: jhFxBlurReveal 7s cubic-bezier(.25, .1, .25, 1) forwards; } .jh-fx-drift { animation: jhFxDrift 7s ease-in-out forwards; } @keyframes jhFxZoomIn { from { transform: scale(1); } to { transform: scale(1.12); } } @keyframes jhFxZoomOut { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes jhFxPanLR { from { transform: scale(1.08) translateX(-2.5%); } to { transform: scale(1.08) translateX(2.5%); } } @keyframes jhFxPanRL { from { transform: scale(1.08) translateX(2.5%); } to { transform: scale(1.08) translateX(-2.5%); } } @keyframes jhFxDiagonal { from { transform: scale(1.1) translate(-2%, -1.5%); } to { transform: scale(1.1) translate(2%, 1.5%); } } @keyframes jhFxBlurReveal { from { transform: scale(1.06); filter: blur(6px); } 40% { filter: blur(0); } to { transform: scale(1.14); filter: blur(0); } } @keyframes jhFxDrift { from { transform: scale(1.09) translateY(-1.5%); } to { transform: scale(1.09) translateY(1.5%); } } /* Jemná clona jako v originále (rgba(0,0,0,.1)) — jen mírné ztmavení, ne silný gradient; navíc lehký gradient dole pro čitelnost textu bez ztráty jasu fotky nahoře. */ .carousel-item::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.45) 100%); } /* Text je vždy vertikálně vycentrovaný vůči aktuální výšce snímku (100 % výšky .carousel-item). pointer-events: none na celé vrstvě + auto zpátky jen na odkazu/tlačítku uvnitř — jinak by tahle na výšku/šířku snímku roztažená vrstva (i v "prázdných" místech kolem textu) zakrývala šipky pro předchozí/další snímek a blokovala na ně kliknutí. */ .jh-hero-content { position: absolute; inset: 0; z-index: 2; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 720px; margin: 0 auto; padding: 0 1rem; text-align: center; pointer-events: none; } .jh-hero-content a, .jh-hero-content button { pointer-events: auto; } /* Šipky vpřed/vzad musí být nad podkladovou fotkou, clonou i textovou vrstvou snímku */ .jh-hero-carousel .carousel-control-prev, .jh-hero-carousel .carousel-control-next { z-index: 3; } /* Postupný nástup textu (fade + posun) — restartuje se s každým novým aktivním snímkem stejně jako Ken Burns efekt výše. */ @keyframes jhFadeInDown { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: translateY(0); } } @keyframes jhFadeInUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } .jh-hero-content .jh-hero-logo, .jh-hero-content .jh-hero-title { animation: jhFadeInDown .9s cubic-bezier(.25, .46, .45, .94) both; } .jh-hero-content .jh-hero-text { animation: jhFadeInUp .9s cubic-bezier(.25, .46, .45, .94) .18s both; } .jh-hero-content .jh-btn-hero { animation: jhFadeInUp .9s cubic-bezier(.25, .46, .45, .94) .36s both; } .jh-hero-title { font-size: 2.6rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .jh-hero-text { font-size: 1.15rem; margin-bottom: 1.75rem; text-shadow: 0 2px 8px rgba(0,0,0,.55); } .jh-btn-hero, .jh-btn { display: inline-block; background: var(--jh-accent); color: #fff; padding: .75rem 1.75rem; border-radius: 50px; font-weight: 600; border: none; cursor: pointer; } .jh-btn-hero:hover, .jh-btn:hover { background: var(--jh-accent-dark); color: #fff; } .jh-hero--small { height: 42vh; min-height: 280px; background-color: var(--jh-dark); /* Tmavý přechod je vždy navrchu (kvůli čitelnosti bílého nadpisu) a pod ním se vykreslí náhodná fotka z galerie (--jh-hero-bg-image, viz layout.php) — když fotka není k dispozici (modul fotogalerie vypnutý / žádné fotky), proměnná chybí a zůstane jen tmavý přechod. */ background-image: linear-gradient(180deg, rgba(20,33,61,.7), rgba(20,33,61,.9)), var(--jh-hero-bg-image, none); background-size: cover; background-position: center; } .jh-hero--small .jh-hero-title { color: #fff; } .jh-hero-title--sm { font-size: 2rem; } /* ---------- Drobečková navigace ---------- */ /* .jh-hero má normálně margin-top:-72px, aby se zasunul pod fixní hlavičku (viz výše) — když bezprostředně předchází drobečková navigace, tenhle posun by hero (a s ním celou stránku) zatáhl přes lištu drobečků. Proto se jen v tomhle jediném případě (sousední sourozenec) posun ruší. */ .jh-breadcrumbs + .jh-hero { margin-top: 0; } .jh-breadcrumbs { background: var(--jh-surface-alt); border-bottom: 1px solid var(--jh-border-subtle); padding: .65rem 0; font-size: .85rem; } .jh-breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .jh-breadcrumbs li { display: flex; align-items: center; } .jh-breadcrumbs a { color: var(--jh-text-muted); } .jh-breadcrumbs a:hover { color: var(--jh-accent); } .jh-breadcrumbs li[aria-current="page"] span { color: var(--jh-text); font-weight: 600; } .jh-breadcrumbs__sep { margin: 0 .5rem; color: var(--jh-text-muted); opacity: .6; } /* ---------- Sekce ---------- */ .jh-section { padding: 5rem 0; } .jh-section--alt { background: var(--jh-surface-alt); } .jh-section--dark { background: var(--jh-dark); color: #e6e9f0; } .jh-section--dark .jh-section-title h2 { color: #fff; } .jh-section-title { text-align: center; margin-bottom: 2.5rem; } .jh-section-title h2 { font-size: 1.9rem; position: relative; padding-bottom: .6rem; } .jh-section-title h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--jh-accent); margin: .6rem auto 0; } .jh-content { line-height: 1.75; } .jh-lead { font-size: 1.15rem; color: var(--jh-text); } /* ---------- Karty (akce / novinky) ---------- */ .jh-card { background: var(--jh-surface-card); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.08); transition: transform .3s ease, box-shadow .3s ease, background-color .25s ease; } .jh-section--dark .jh-card { background: #1c2c4d; } .jh-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.16); transform: translateY(-6px); } .jh-card-img-wrap { overflow: hidden; } .jh-card-img-wrap img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .35s ease; } .jh-card:hover .jh-card-img-wrap img { transform: scale(1.08); } .jh-card-title a { transition: color .2s ease; } .jh-card:hover .jh-card-title a { color: var(--jh-accent); } .jh-section--dark .jh-card:hover .jh-card-title a { color: #9cdc66; } .jh-card-body { padding: 1.4rem; } .jh-card-date { font-size: .8rem; color: var(--jh-accent); font-weight: 600; text-transform: uppercase; margin-bottom: .3rem; } .jh-card-title { font-size: 1.15rem; margin-bottom: .5rem; } .jh-card-title a { color: inherit; } .jh-section--dark .jh-card-title a { color: #fff; } .jh-card-sub { color: var(--jh-text-muted); font-size: .95rem; } .jh-section--dark .jh-card-sub { color: #c3c9dc; } .jh-card-link { font-weight: 600; font-size: .9rem; } /* ---------- Kontakt ---------- */ .jh-contact-box { text-align: center; } .jh-contact-box i { font-size: 1.8rem; color: var(--jh-accent); margin-bottom: .5rem; display: block; } .jh-contact-form .form-control { border-radius: 6px; padding: .7rem 1rem; } .jh-form-ok { color: #256b2e; background: #e8f6ea; border: 1px solid #b7e2bd; border-radius: 6px; padding: .8rem 1rem; } .jh-form-err { color: #8a2b2b; background: #fbe9e9; border: 1px solid #eec0c0; border-radius: 6px; padding: .8rem 1rem; } /* Honeypot pole proti spamu (viz form_security_fields() v src/View/helpers.php) — pro člověka neviditelné a nedosažitelné klávesnicí, boti procházející DOM ho ale běžně najdou a vyplní. Schováno posunutím mimo viditelnou oblast, ne přes display:none/visibility:hidden, které si některé jednodušší boti umí hlídat. */ .jh-hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Ke stažení ---------- */ .jh-download-item { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: var(--jh-surface-card); border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.06); color: var(--jh-text); } .jh-download-item i { color: var(--jh-accent); font-size: 1.2rem; } .jh-table { --bs-table-bg: var(--jh-surface-card); --bs-table-color: var(--jh-text); --bs-table-border-color: var(--jh-border-subtle); --bs-table-hover-bg: var(--jh-surface-alt); --bs-table-hover-color: var(--jh-text); } .jh-table th { border-top: none; font-size: .85rem; text-transform: uppercase; color: var(--jh-text-muted); } .jh-table td i.bi-download { color: var(--jh-accent); font-size: 1.05rem; } .jh-download-link { font-weight: 600; } /* ---------- Footer ---------- */ #jh-footer { background: var(--jh-dark); color: #c3c9dc; } .jh-footer-top { padding: 3.5rem 0 2rem; } .jh-footer-title { color: #fff; font-size: 1.3rem; margin-bottom: 1rem; } .jh-footer-text { font-size: .92rem; line-height: 1.7; } .jh-footer-h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; } .jh-footer-links { list-style: none; padding: 0; margin: 0; } .jh-footer-links li { margin-bottom: .5rem; } .jh-footer-links a { color: #c3c9dc; } .jh-footer-links a:hover { color: var(--jh-accent); } .jh-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,.08); border-radius: 50%; color: #fff; margin-right: .5rem; } .jh-social a:hover { background: var(--jh-accent); } .jh-newsletter-form { display: flex; gap: .5rem; } .jh-newsletter-form input { flex: 1; border: none; border-radius: 4px; padding: .6rem .8rem; } .jh-newsletter-form button { background: var(--jh-accent); color: #fff; border: none; border-radius: 4px; padding: .6rem 1rem; font-weight: 600; } .jh-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; } /* Logo partnera (Kudyznudy.cz) v patičce — bílá varianta loga (17. 9. 2026), určená přímo na tmavé pozadí, takže už nepotřebuje bílou "vizitku" pod sebou jako předchozí tmavá verze. Šířka omezená max-width, výška se dopočítá podle poměru stran obrázku (auto). */ .jh-partner-logo { display: block; max-width: 200px; transition: opacity .2s ease; } .jh-partner-logo:hover { opacity: .85; } .jh-partner-logo img { display: block; width: 100%; height: auto; } .jh-footer-credit a { color: #c3c9dc; text-decoration: underline; } /* ---------- Zpět nahoru ---------- */ .jh-back-top { position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; background: var(--jh-accent); color: #fff; opacity: 0; visibility: hidden; transition: all .3s; z-index: 996; } .jh-back-top.jh-visible { opacity: 1; visibility: visible; } .jh-back-link { font-weight: 600; } .jh-404-code { font-size: 5rem; font-weight: 700; color: var(--jh-accent); } .jh-article-meta { display: flex; gap: 1.25rem; font-size: .9rem; color: var(--jh-text-muted); border-bottom: 1px solid var(--jh-border-subtle); padding-bottom: 1rem; margin-bottom: 1.5rem; } /* ---------- Postranní panel Aktuality (detail článku) ---------- */ .jh-section-title--sm { text-align: left; margin-bottom: 1.25rem; } .jh-section-title--sm h2 { font-size: 1.3rem; padding-bottom: .4rem; } .jh-news-widget { background: var(--jh-surface-alt); border-radius: 8px; padding: 1.5rem; } .jh-news-item { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--jh-border-subtle); } .jh-news-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .jh-news-date { font-size: .95rem; font-weight: 700; color: var(--jh-accent); margin-bottom: .4rem; } .jh-news-text { font-size: .92rem; color: var(--jh-text); line-height: 1.5; } .jh-news-text p { margin-bottom: 0; } .jh-news-text a { color: var(--jh-accent); text-decoration: underline; transition: color .15s ease; } .jh-news-text a:hover { color: var(--jh-accent-dark); text-decoration-color: currentColor; } /* ---------- Aktuality na homepage (širší varianta panelu) ---------- */ .jh-news-widget--wide { background: transparent; padding: 0; } .jh-news-widget--wide .jh-news-item { background: var(--jh-surface-alt); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; border-bottom: none; } /* ---------- Fotogalerie (Module/Gallery, front-office) ---------- */ .jh-gallery-sort { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.75rem; } .jh-gallery-sort__label { color: var(--jh-text-muted); font-size: .9rem; } .jh-gallery-sort__link { font-size: .9rem; font-weight: 600; color: var(--jh-text-muted); text-decoration: none; padding: .35rem .8rem; border-radius: 50px; border: 1px solid var(--jh-border-subtle); transition: color .2s ease, border-color .2s ease, background .2s ease; } .jh-gallery-sort__link:hover { color: var(--jh-accent); border-color: var(--jh-accent); } .jh-gallery-sort__link.is-active { color: #fff; background: var(--jh-accent); border-color: var(--jh-accent); } .jh-gallery-card { display: block; text-decoration: none; color: inherit; } .jh-gallery-card .jh-card-img-wrap { aspect-ratio: 4/3; overflow: hidden; } .jh-gallery-card .jh-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .jh-gallery-card:hover .jh-card-title { color: var(--jh-accent); } .jh-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; } .jh-gallery-item { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 6px; } .jh-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } .jh-gallery-item:hover img { transform: scale(1.05); } .jh-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(10,15,25,.92); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2rem; cursor: zoom-out; } .jh-lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .jh-lightbox-caption { color: #fff; margin-top: 1rem; text-align: center; font-size: .95rem; } .jh-lightbox-close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; } .jh-lightbox-prev, .jh-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 1.6rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .jh-lightbox-prev:hover, .jh-lightbox-next:hover { background: rgba(255,255,255,.28); } .jh-lightbox-prev { left: 1rem; } .jh-lightbox-next { right: 1rem; } @media (max-width: 576px) { .jh-lightbox-prev, .jh-lightbox-next { width: 40px; height: 40px; font-size: 1.2rem; } .jh-lightbox-prev { left: .25rem; } .jh-lightbox-next { right: .25rem; } } .jh-gallery-link-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--jh-accent); color: #fff; padding: .65rem 1.4rem; border-radius: 50px; font-weight: 600; text-decoration: none; margin: 1rem 0; } .jh-gallery-link-btn:hover { background: var(--jh-accent-dark); color: #fff; } /* Varianta pro sekundární akci (např. "Zpět na Fotogalerie" vedle "Zpět na článek") */ .jh-gallery-link-btn--outline { background: transparent; color: var(--jh-accent); border: 2px solid var(--jh-accent); padding: .55rem 1.3rem; } .jh-gallery-link-btn--outline:hover { background: var(--jh-accent); color: #fff; } /* Řádek tlačítek zpět pod detailem galerie/článku — zalomí se na mobilu */ .jh-gallery-back-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .jh-gallery-back-actions .jh-gallery-link-btn { margin: 0; } .jh-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2rem; } .jh-pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .7rem; border-radius: 6px; background: rgba(255,255,255,.08); color: inherit; text-decoration: none; font-weight: 600; transition: background .15s; } .jh-pagination-link:hover { background: rgba(255,255,255,.18); color: inherit; } .jh-pagination-link--active { background: var(--jh-accent); color: #fff; } .jh-pagination-link--active:hover { background: var(--jh-accent); color: #fff; } .jh-typewriter { text-align: center; padding: 2.5rem 0; } .jh-typewriter h2 { font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0; opacity: .85; } .jh-counts { padding: 3rem 0; } .jh-count-box { text-align: center; padding: 1rem; } .jh-count-box i { font-size: 2.2rem; color: var(--jh-accent); display: block; margin-bottom: .5rem; } .jh-count-box .jh-counter { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1.2; } .jh-count-box p { margin: .25rem 0 0; font-size: .95rem; } .jh-card--simple { padding: 1.5rem; transition: all .3s ease-in-out; } .jh-card--simple h3 { font-size: 1.2rem; color: var(--jh-accent); margin-bottom: .75rem; transition: color .3s ease-in-out; } .jh-card--simple p { font-size: .92rem; opacity: .85; margin: 0; transition: color .3s ease-in-out; } .jh-card--simple:hover { background: var(--jh-accent); padding: 1.5rem 1.5rem 2.5rem; box-shadow: 10px 15px 30px rgba(0,0,0,.18); } .jh-card--simple:hover h3, .jh-card--simple:hover p { color: #fff; opacity: 1; } .jh-goals { margin-top: .5rem; } /* Grid místo starého float:left u ikony — díky tomu text (nadpis i odstavec) VŽDY začíná stejně odsazený ve druhém sloupci, ať se odstavec zalomí na libovolný počet řádků (u float by se poslední řádek po "podjetí" ikony vrátil až k levému okraji). */ .jh-goal-box { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.75rem; margin-top: 1.25rem; border: 1px solid var(--jh-border-subtle); border-radius: 8px; box-shadow: 0 2px 15px rgba(0,0,0,.1); transition: all .3s ease-in-out, border-color .3s ease-in-out; } .jh-goal-box i { grid-column: 1; grid-row: 1 / span 2; align-self: start; font-size: 2.6rem; color: var(--jh-accent); transition: color .3s ease-in-out; } .jh-goal-box h4 { grid-column: 2; grid-row: 1; align-self: start; font-size: 1.15rem; font-weight: 700; margin: 0 0 .2rem; } .jh-goal-box p { grid-column: 2; grid-row: 2; align-self: start; font-size: .92rem; color: var(--jh-text-muted); margin: 0; transition: color .3s ease-in-out; } .jh-goal-box:hover { background: var(--jh-accent); border-color: transparent; padding: 1.25rem 1.75rem 2.75rem; box-shadow: 10px 15px 30px rgba(0,0,0,.18); } .jh-goal-box:hover i, .jh-goal-box:hover h4, .jh-goal-box:hover p { color: #fff; } .jh-faq-list { max-width: 900px; margin: 0 auto; } .jh-faq-item + .jh-faq-item { margin-top: 15px; } .jh-faq-item { background: var(--jh-surface-card); border-radius: 6px; padding: 1.1rem 1.4rem; } .jh-section--dark .jh-faq-item { background: #1c2c4d; } .jh-faq-question { display: block; position: relative; padding: 0 2.2rem 0 2.4rem; font-size: 1rem; font-weight: 600; cursor: pointer; color: var(--jh-accent); } .jh-faq-question.collapsed { color: inherit; } .jh-faq-question.collapsed:hover { color: var(--jh-accent); } .jh-faq-icon-help { position: absolute; left: 0; top: .1rem; font-size: 1.2rem; color: var(--jh-accent); } .jh-faq-icon-show, .jh-faq-icon-close { position: absolute; right: 0; top: .1rem; font-size: 1.1rem; } .jh-faq-question .jh-faq-icon-show { display: none; } .jh-faq-question.collapsed .jh-faq-icon-show { display: inline-block; } .jh-faq-question.collapsed .jh-faq-icon-close { display: none; } .jh-faq-item p { margin: .6rem 0 0; padding-left: 0; font-size: .95rem; opacity: .85; } .jh-footer-credit .jh-footer-sep { margin: 0 .4rem; opacity: .5; } .jh-footer-credit .bi-camera { margin-right: .15rem; } .jh-hero-logo { max-width: 320px; width: 60%; height: auto; margin: 0 auto 1.25rem; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); } /* ==== Náš tým ==== */ .jh-team-photo-col { display: flex; } .jh-team-member-card { width: 100%; min-height: 320px; border-radius: 14px; overflow: hidden; position: relative; background: #343a40; box-shadow: 0 10px 26px rgba(0,0,0,.14); } .jh-team-member-card img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; transition: transform .4s ease; } .jh-team-member-card:hover img { transform: scale(1.06); } .jh-team-member-info { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%); padding: 1.1rem 1.25rem; } .jh-team-member-info h4 { color: #fff; font-weight: 700; font-size: 1.05rem; margin: 0 0 .35rem; } .jh-team-member-info .jh-team-social a { color: #fff; margin-right: .6rem; transition: color .2s ease; } .jh-team-member-info .jh-team-social a:hover { color: var(--jh-accent); } .jh-team-facts-panel { height: 100%; display: flex; flex-direction: column; } .jh-team-facts-heading { font-weight: 700; font-size: 1.15rem; color: var(--jh-text); margin-bottom: .75rem; border-left: 4px solid var(--jh-accent); padding-left: .8rem; line-height: 1.4; } .jh-team-fact { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: .5rem; background: var(--jh-surface-alt); border: 1px solid var(--jh-border-subtle); border-radius: 8px; padding: .5rem .9rem; font-size: .95rem; color: var(--jh-text); height: 100%; line-height: 1.45; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease; } .jh-team-fact:hover { background: var(--jh-surface-card); border-color: var(--jh-accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); } /* ikona i zalomený text (jh-team-fact-text) jsou grid sloupce — text se stejně jako u karet v sekci O nás nikdy nevrátí zpět pod ikonu, ať se zalomí na libovolný počet řádků */ .jh-team-fact i { grid-row: 1; color: var(--jh-accent); font-size: .95rem; padding-top: .15rem; } .jh-team-fact-text { grid-column: 2; } @media (max-width: 991px) { .jh-team-member-card { min-height: 260px; } .jh-team-member-card img { min-height: 260px; } } /* ==== Přepínač světlý/tmavý režim (viz main.js initu a inline skript v ) ==== */ .jh-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: transparent; border: none; border-radius: 50%; padding: 0; color: #fff; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .jh-theme-toggle:hover, .jh-theme-toggle:focus-visible { background-color: rgba(255, 255, 255, .12); color: var(--jh-accent); } .jh-theme-toggle__icon { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; opacity: 1; transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); } /* Výchozí (světlý) režim: zobrazen měsíček (nabízí přepnutí do tmavého režimu), slunce schované */ .jh-theme-toggle__icon--sun { opacity: 0; transform: rotate(-40deg) scale(.6); } /* Tmavý režim: zobrazeno sluníčko (nabízí přepnutí zpět do světlého režimu), měsíc schovaný */ :root[data-theme="dark"] .jh-theme-toggle__icon--sun { opacity: 1; transform: none; } :root[data-theme="dark"] .jh-theme-toggle__icon--moon { opacity: 0; transform: rotate(40deg) scale(.6); } /* ==== Formulářová pole v tmavém režimu (kontaktní formulář) ==== */ :root[data-theme="dark"] .jh-contact-form .form-control { background: var(--jh-surface-card); color: var(--jh-text); border-color: var(--jh-border-subtle); } :root[data-theme="dark"] .jh-contact-form .form-control::placeholder { color: var(--jh-text-muted); } :root[data-theme="dark"] .jh-contact-form .form-control:focus { background: var(--jh-surface-card); color: var(--jh-text); border-color: var(--jh-accent); box-shadow: 0 0 0 .2rem rgba(92, 159, 36, .25); } /* Položka s přepínačem motivu v menu (za "Přidejte se") */ .jh-nav-theme-item { display: flex; align-items: center; } @media (max-width: 991px) { .jh-nav-theme-item { align-self: flex-start; } } /* ==== Aktuality — plovoucí minimalistický rámeček přes patu hero sekce ==== */ .jh-news-float { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 6; } .jh-news-float__card { max-width: 920px; margin: 0 auto; background: var(--jh-surface-card); color: var(--jh-text); border-radius: 18px; box-shadow: 0 24px 55px -14px rgba(0, 0, 0, .38), 0 2px 12px rgba(0, 0, 0, .08); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.15rem; animation: jhNewsFloatIn .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .35s; } @keyframes jhNewsFloatIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .jh-news-float__badge { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--jh-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .jh-news-float__pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--jh-accent); animation: jhNewsPulse 2.2s ease-out infinite; } @keyframes jhNewsPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } } /* Položka se nepřekrývá absolutně (aby se kontejner vždy přizpůsobil délce aktuálního textu — i na mobilu, kde se text zalamuje na 2-3 řádky) — místo toho JS (main.js) krátce po sobě: 1) postupně vyfaduje odcházející položku, 2) teprve po doběhnutí fade-outu ji vyjme z toku (display:none) a novou do toku vloží a rozsvítí. */ .jh-news-float__viewport { flex: 1 1 auto; min-width: 0; } .jh-news-float__item { display: none; align-items: center; gap: .7rem; flex-wrap: wrap; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; } .jh-news-float__item.is-active { display: flex; } .jh-news-float__item.is-active.is-visible { opacity: 1; transform: translateY(0); } .jh-news-float__date { flex-shrink: 0; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--jh-accent); background: var(--jh-surface-alt); padding: .2rem .55rem; border-radius: 50px; } .jh-news-float__headline { color: var(--jh-text); font-weight: 600; font-size: .98rem; transition: color .2s ease; } a.jh-news-float__headline:hover { color: var(--jh-accent); } .jh-news-float__dots { display: flex; gap: .35rem; flex-shrink: 0; } .jh-news-float__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jh-border-subtle); border: none; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; } .jh-news-float__dot.is-active { background: var(--jh-accent); transform: scale(1.35); } .jh-news-float__btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; background: var(--jh-accent); color: #fff !important; padding: .55rem 1.15rem; border-radius: 50px; font-weight: 600; font-size: .88rem; white-space: nowrap; transition: background .2s ease, transform .2s ease; } .jh-news-float__btn:hover { background: var(--jh-accent-dark); transform: translateX(3px); color: #fff; } @media (max-width: 700px) { /* Na mobilu zůstává rámeček jeden útlý řádek (ne sloupec) — jinak by při delších nadpisech vyrostl tak vysoko, že by na malé výšce hero překryl i tlačítko "Zjistěte více" nad ním. Datum a tečky se schovávají, nadpis se zkracuje na jeden řádek (ellipsis), tlačítko je kompaktnější. */ .jh-news-float { bottom: 14px; } .jh-news-float__card { padding: .65rem .9rem; gap: .65rem; border-radius: 50px; } .jh-news-float__badge { width: 36px; height: 36px; font-size: 1rem; } .jh-news-float__viewport { overflow: hidden; } .jh-news-float__item { flex-wrap: nowrap; overflow: hidden; } .jh-news-float__date { display: none; } .jh-news-float__headline { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; } .jh-news-float__dots { display: none; } .jh-news-float__btn { padding: .5rem .8rem; font-size: .78rem; } } @media (max-width: 380px) { /* Na velmi úzkých displejích schová i text tlačítka, zůstane jen šipka v kolečku */ .jh-news-float__btn { padding: .5rem; border-radius: 50%; } .jh-news-float__btn-text { display: none; } } /* ========================================================================== Kvíz „Latina, nebo nesmysl?" — nahrazuje bývalý statický pruh .jh-typewriter Sekce dřív byla natvrdo tmavá (.jh-section--dark); teď používá běžné .jh-section / .jh-section--alt (viz kviz-hodonin/kviz-latina ve fun.php a #typewriter v onepage.php), takže reaguje na přepínač světlý/tmavý režim a dvě kvízové sekce na stránce Zábava se od sebe zároveň liší odstínem podkladu (jedna má pozadí --jh-surface-page, druhá --jh-surface-alt). Barvy níže proto používají tokeny --jh-text/--jh-text-muted a nové kvízové tokeny --jhq-heading/--jhq-tint-rgb/--jhq-tile-shadow (viz :root na začátku souboru), místo natvrdo zapsaných světlých barev na tmavém pozadí. ========================================================================== */ .jh-quiz-section { padding: 4.5rem 0; overflow: hidden; } .jh-quiz { max-width: 640px; margin: 0 auto; position: relative; } /* ---------- Úvod ---------- */ .jh-quiz__kicker { text-align: center; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--jh-accent); margin: 0 0 .6rem; } .jh-quiz__translation { text-align: center; font-size: .85rem; font-style: italic; color: var(--jh-text-muted); margin: 0 0 1.75rem; } .jh-quiz__title { text-align: center; font-size: 1.7rem; margin: 0 0 .75rem; color: var(--jhq-heading); } .jh-quiz__lede { text-align: left; font-size: 1rem; color: var(--jh-text); max-width: 480px; margin: 0 auto 1.75rem; line-height: 1.55; } .jh-quiz__start, .jh-quiz__share { display: block; margin: 0 auto; padding: .8rem 2.2rem; border: none; border-radius: 50px; background: var(--jh-accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; box-shadow: 0 6px 18px rgba(92, 159, 36, .35); } .jh-quiz__start:hover, .jh-quiz__share:hover { background: var(--jh-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(92, 159, 36, .4); } .jh-quiz__start:active, .jh-quiz__share:active { transform: translateY(0); } /* ---------- Panely (intro / hra / výsledek) ---------- */ .jh-quiz__panel { animation: jhQuizFadeIn .4s ease both; } @keyframes jhQuizFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Průběh ---------- */ .jh-quiz__progress { margin-bottom: 1.5rem; } .jh-quiz__progress-bar { height: 6px; border-radius: 3px; background: rgba(var(--jhq-tint-rgb), .12); overflow: hidden; margin-bottom: .5rem; } .jh-quiz__progress-bar span { display: block; height: 100%; background: var(--jh-accent); border-radius: 3px; transition: width .35s ease; width: 0; } .jh-quiz__progress-label { text-align: center; font-size: .8rem; color: var(--jh-text-muted); letter-spacing: .04em; } /* ---------- "Kamenná deska" s hláškou ---------- */ .jh-quiz__tablet { position: relative; background: linear-gradient(155deg, var(--jh-surface-card), var(--jh-surface-alt)); border: 1px solid var(--jh-border-subtle); border-radius: 14px; padding: 2.4rem 1.75rem 1.9rem; text-align: center; margin-bottom: 1.5rem; box-shadow: 0 12px 30px var(--jhq-tile-shadow); } .jh-quiz__tablet-glyph { position: absolute; top: -.4rem; left: 50%; transform: translateX(-50%); font-family: Georgia, serif; font-size: 3.2rem; color: var(--jh-accent); opacity: .55; line-height: 1; } .jh-quiz__phrase { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.45rem; font-weight: 600; color: var(--jhq-heading); margin: .5rem 0 0; line-height: 1.4; } .jh-quiz__phrase-hint { display: block; margin-top: .6rem; font-family: "Open Sans", sans-serif; font-style: normal; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jh-text-muted); } /* ---------- Odpovědi ---------- */ .jh-quiz__options { display: grid; gap: .7rem; margin-bottom: 1.25rem; } .jh-quiz__opt { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .85rem 1.1rem; border-radius: 10px; border: 1px solid var(--jh-border-subtle); background: rgba(var(--jhq-tint-rgb), .04); color: var(--jh-text); font-size: .95rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .jh-quiz__opt-letter { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(var(--jhq-tint-rgb), .08); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; } .jh-quiz__opt:hover:not(:disabled) { background: rgba(var(--jhq-tint-rgb), .09); border-color: rgba(var(--jhq-tint-rgb), .3); } .jh-quiz__opt:active:not(:disabled) { transform: scale(.98); } .jh-quiz__opt:disabled { cursor: default; } .jh-quiz__opt.is-correct { background: rgba(92, 159, 36, .22); border-color: var(--jh-accent); } .jh-quiz__opt.is-correct .jh-quiz__opt-letter { background: var(--jh-accent); color: #fff; } .jh-quiz__opt.is-wrong { background: rgba(220, 70, 70, .18); border-color: #dc4646; animation: jhQuizShake .35s ease; } .jh-quiz__opt.is-wrong .jh-quiz__opt-letter { background: #dc4646; color: #fff; } .jh-quiz__opt.is-muted { opacity: .45; } @keyframes jhQuizShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } /* ---------- Zpětná vazba (rozbor) ---------- */ .jh-quiz__feedback { border-left: 3px solid var(--jh-accent); background: rgba(var(--jhq-tint-rgb), .04); border-radius: 0 10px 10px 0; padding: 1rem 1.2rem; margin-bottom: 1.5rem; animation: jhQuizFadeIn .3s ease both; } .jh-quiz__feedback.is-wrong { border-left-color: #dc4646; } .jh-quiz__feedback-verdict { font-weight: 700; margin: 0 0 .3rem; font-size: .95rem; } .jh-quiz__feedback-verdict .is-wrong-icon { color: #dc4646; } .jh-quiz__feedback-verdict .is-correct-icon { color: var(--jh-accent); } .jh-quiz__feedback-text { margin: 0; font-size: .88rem; color: var(--jh-text); line-height: 1.5; } .jh-quiz__feedback-origin { margin: .4rem 0 0; font-size: .78rem; color: var(--jh-text-muted); } .jh-quiz__next { display: block; margin: 1.3rem auto 0; padding: .65rem 1.8rem; border: none; border-radius: 50px; background: var(--jh-accent); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; } .jh-quiz__next:hover { background: var(--jh-accent-dark); } /* ---------- Konfety (čisté CSS, bez knihovny) ---------- */ .jh-quiz__confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; } .jh-quiz__confetti span { position: absolute; top: 40%; left: 50%; width: 8px; height: 8px; border-radius: 2px; background: var(--jh-accent); opacity: 0; animation: jhQuizConfetti .8s ease-out forwards; } @keyframes jhQuizConfetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: var(--jh-confetti-end, translate(0,0)) rotate(280deg) scale(.5); } } /* ---------- Výsledek ---------- */ .jh-quiz__result { text-align: center; } .jh-quiz__score-ring { position: relative; width: 140px; height: 140px; margin: 0 auto 1.25rem; } .jh-quiz__score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .jh-quiz__score-ring circle { fill: none; stroke-width: 9; } .jh-quiz__score-ring circle.bg { stroke: rgba(var(--jhq-tint-rgb), .1); } .jh-quiz__score-ring circle.fg { stroke: var(--jh-accent); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1); } .jh-quiz__score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 800; color: var(--jhq-heading); } .jh-quiz__score-num small { font-size: 1.1rem; font-weight: 600; color: var(--jh-text-muted); margin-left: .15rem; } .jh-quiz__rank { font-size: 1.15rem; font-weight: 700; color: var(--jhq-heading); max-width: 440px; margin: 0 auto 1.75rem; line-height: 1.45; } .jh-quiz__result-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .jh-quiz__result-actions .jh-quiz__start, .jh-quiz__result-actions .jh-quiz__share { margin: 0; } .jh-quiz__share { background: transparent; border: 1px solid var(--jh-border-subtle); color: var(--jhq-heading); box-shadow: none; } .jh-quiz__share:hover { background: rgba(var(--jhq-tint-rgb), .08); color: var(--jhq-heading); box-shadow: none; } .jh-quiz__share-note { margin: .75rem 0 0; font-size: .78rem; color: var(--jh-text-muted); } .jh-quiz__source { margin: .5rem 0 0; font-size: .78rem; color: var(--jh-text-muted); } .jh-quiz__source a { color: var(--jh-accent); text-decoration: underline; text-underline-offset: .15em; } .jh-quiz__source a:hover { color: var(--jh-accent-dark); } /* ---------- Odkaz na další kvízy (stránka Zábava) ---------- */ .jh-quiz__more { text-align: center; margin: 1.5rem 0 0; font-size: .85rem; } .jh-quiz__more a { color: var(--jh-accent); text-decoration: underline; text-underline-offset: .15em; } .jh-quiz__more a:hover { color: var(--jh-accent-dark); } /* ---------- Nápověda (volitelná, jen u otázek které ji mají) ---------- */ .jh-quiz__hint-btn { display: block; margin: 0 auto .9rem; background: transparent; border: 1px dashed var(--jh-border-subtle); color: var(--jh-text-muted); border-radius: 50px; padding: .35rem 1rem; font-size: .8rem; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .jh-quiz__hint-btn:hover { color: var(--jhq-heading); border-color: rgba(var(--jhq-tint-rgb), .4); } .jh-quiz__hint-box { background: rgba(255, 209, 102, .12); border-left: 3px solid #ffd166; border-radius: 0 10px 10px 0; padding: .8rem 1.1rem; margin: 0 auto .9rem; max-width: 480px; font-size: .85rem; color: var(--jh-text); line-height: 1.5; animation: jhQuizFadeIn .25s ease both; } /* ---------- Ohleduplnost k redukovanému pohybu ---------- */ @media (prefers-reduced-motion: reduce) { .jh-quiz__panel, .jh-quiz__feedback, .jh-quiz__opt.is-wrong, .jh-quiz__confetti span { animation: none !important; } .jh-quiz__score-ring circle.fg { transition: none; } } /* ---------- Mobil ---------- */ @media (max-width: 576px) { .jh-quiz__title { font-size: 1.4rem; } .jh-quiz__phrase { font-size: 1.2rem; } .jh-quiz__tablet { padding: 2.1rem 1.1rem 1.5rem; } .jh-quiz__opt { font-size: .9rem; padding: .75rem .9rem; } } /* ---------- Galerie vložená do textu článku (tlačítko "Galerie" v TinyMCE) ---------- Bez téhle mřížky se
(vkládá ho tinymce-gallery.js) zobrazí jako neuspořádaná řada nezmenšených fotek přes sebe. */ .lg-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 1rem 0; border-radius: 8px; overflow: hidden; } .lg-gallery a { display: block; aspect-ratio: 1; overflow: hidden; } .lg-gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .lg-gallery a:hover img { transform: scale(1.06); } @media (max-width: 576px) { .lg-gallery { grid-template-columns: repeat(2, 1fr); } } /* ======= Anketa (modul Ankety, sekce #anketa) ======= */ .jh-poll-question { font-size: 1.15rem; font-weight: 600; text-align: center; margin-bottom: .5rem; } .jh-poll-desc { color: var(--jh-text-muted); text-align: center; margin-bottom: 1.25rem; } .jh-poll-options { display: flex; flex-direction: column; gap: .6rem; margin: 1.25rem 0; } .jh-poll-option { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; background: var(--jh-surface-card); border: 1px solid var(--jh-border-subtle); border-radius: 6px; cursor: pointer; transition: border-color .2s ease, background-color .25s ease; } .jh-poll-option:hover { border-color: var(--jh-accent); } .jh-poll-option input { accent-color: var(--jh-accent); width: 1.1rem; height: 1.1rem; flex: none; } .jh-poll-results { margin-top: 1rem; } .jh-poll-bar { margin-bottom: 1.1rem; } .jh-poll-bar__label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; font-size: .95rem; } .jh-poll-bar__pct { color: var(--jh-accent); font-weight: 600; flex: none; } .jh-poll-bar__track { background: var(--jh-border-subtle); border-radius: 20px; height: 10px; overflow: hidden; } .jh-poll-bar__fill { background: var(--jh-accent); height: 100%; border-radius: 20px; transition: width .5s ease; } .jh-poll-total { color: var(--jh-text-muted); font-size: .9rem; } /* ======= Samostatná stránka (modul Stránky, partials/page.php) ======= */ .jh-page-content { line-height: 1.75; } .jh-page-content h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; } .jh-page-content h3 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: .75rem; } .jh-page-content p { margin-bottom: 1rem; } .jh-page-content ul, .jh-page-content ol { margin-bottom: 1rem; padding-left: 1.5rem; } .jh-page-content a { text-decoration: underline; }