/* -----------------------------------Banner + vyskakovací pro srdce i níže pro stránku Lidé----------------------------------------------- */ /* Banner */ #title-banner{ position: relative; z-index: 10; /* animace */ max-height: 600px; opacity: 1; overflow: hidden; transition: max-height 260ms ease, opacity 200ms ease; } .title-banner-content{ position: relative; /* kvůli absolutně pozicovaným prvkům uvnitř */ } .title-banner-img{ width: 100%; height: auto; display: block; /* odstraní mezeru pod obrázkem */ } .banner-text{ padding-top: 0; position: absolute; top: 20px; width: 30%; } .banner-text h2{ color: #fff; font-weight: 700; line-height: 1.2; font-size: 2.2em; margin-bottom: 15px; clear: both; padding-top: 10px; } .banner-text p{ color:#fff; } .title-heart{ position: absolute; padding: 0; } .title-heart img{ margin:0; } .title-heart .heart-popup{ display:none; opacity:0; transition: opacity 200ms ease; } .title-heart:hover .heart-popup{ opacity:1; position:absolute; top:50%; left:50%; display:block; min-width:200px; min-height:50px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.1); padding: 10px 15px 5px 15px; } #mobile-title-links, .mobile-news-header{ display:none; } .toggle-title-banner{ color:#c20116; text-align:right; position:relative; top:20px; right:10px; z-index: 2; } .toggle-title-banner:hover{ cursor:pointer; opacity:.6; } .title-banner-content::before{ content:""; background-image:url(/program_files/img/img-system/title/l-logo.png); left:0; bottom:5px; width:10%; height:100%; position:absolute; background-position: bottom left; background-repeat:no-repeat; background-size:contain; } /* Skrytý banner (desktop) */ body.banner-hidden #title-banner{ max-height: 0; opacity: 0; pointer-events: none; } /* Posun sekce pod bannerem po skrytí (desktop) */ #novinky-kalendar{ padding-top: 0; transition: padding-top 200ms ease; } /* -----------------------------------Novinky a kalendář----------------------------------------------- */ #novinky-kalendar .pad-main-left {padding-bottom: 30px;} /*#novinky-kalendar{padding-top:90px}*/ /*News*/ #news-header,#calendar-title-header,#news-tabs-simple {margin-bottom:0px;} #news-header {width:calc(100% - 6px);clear:both; float:none;} #news-header h3{margin-bottom:0px;float:left;clear:none;margin-top:0px;} #news-tabs{width:420px;float:left;margin-left:23px;} #news-tabs li{margin:0px;margin-left:-30px;float:right;display:block;background: url(../img/img-system/title/tab-white.png) no-repeat top right;padding:15px 40px 10px 30px;line-height:30px;} #news-tabs li.tab-selected,#news-tabs li:hover {background: url(../img/img-system/title/tab-red.png) no-repeat top right;color:white;} #news-tabs li:hover {cursor:pointer;} .news-title h5, .news-title h6{font-size:1.1em;} .more-news-mini-mobile,#more-news-mini-mobile {margin-top:20px;display:none;margin-bottom:20px;} #news-tabs-simple {margin-left:0px;padding-top:0px;clear:none;float:left;} #news-tabs-simple ul {float:right;padding-top:4px;} #news-tabs-simple li{list-style:none;float:left;margin-left:20px;padding-left:0px;margin-right:0px;} #news-tabs-simple .tab-selected {colnews-tabs-simpleor:#c20116;font-weight:bold;} #news-tabs-simple li:hover {color:#c20116;cursor:pointer;} .news-primary, .news-secondary {position:relative;display:block;} .news-primary, .news-primary img, .news-secondary img {width:100%;} .news-secondary {float:left;width:32.5%;margin-bottom:5px;margin-left:1%;} :first-child.news-secondary, :nth-child(4).news-secondary {margin-left:0%;} .news-primary .news-text, .news-secondary .news-text {position:absolute; bottom:15px;width:90%;margin-left:5%;color:white;} .news-secondary h5, .news-primary h4 {color:white !important;margin-bottom:0px; font-size:1.2em;} .news-secondary p {margin-top:5px;} .news-cover {margin-bottom:0px;background: url(../img/img-system/title/cover.png) no-repeat bottom left;background-size: cover;width:100%;height:100%;position:absolute; bottom:0px; left:0px;opacity:0.8;} .news-secondary img {opacity:1;} .news-title h4, .news-title h5 {margin-bottom:5px;} .news-title img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .news-secondary { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .news-secondary .news-text { flex-grow: 1; } #news-footer-nav {width:100%;clear:both; float:none;margin-top:25px;height:80px;} #news-footer-nav li, #news-footer-nav img {float:left;} #news-footer-nav img {width:40px;margin-right:3px;} #news-footer-nav a {line-height:1.2em;text-decoration:none;margin-right:20px;} #news-footer-nav a.but {line-height:40px;} #news-footer-nav span{display:block; float:left;text-align:left;font-size:0.9em;} /*Calendar*/ #calendar-title {clear:both;} #calendar-title a {clear:both;display:block;} #calendar-title p {margin-bottom:15px;font-size:0.8em;} div.news-text p {font-size:0.8em;line-height:1.4em !important;padding-top:0px !important;} #calendar-title a img{max-width:10%; float:left;} #calendar-title a div{width:87%; float:right;} h2.today-events-title {font-size:1.3em;margin-top:8px;} #calendar-title h6 {color:white; line-height:1.1em;font-size:0.9em;margin-bottom:0px;} .today-events-title {float:left;} .pad-main-right .today-events-title{clear:none;margin-left:0px;width:135px;} .calendar-title-link {float:right;line-height:30px;margin-top:10px;margin-bottom:30px;} /* kalendář akcí na hlavní straně */ .separator-long-term-events {display:block;border-bottom:1px solid white;clear:both;width:100%;margin-top:50px;} .separator-long-term-events-text {background-color:#c20116;line-height:2em;text-align:center;display:block;width:170px;margin:0 auto; margin-top:-35px;margin-bottom:10px;} .top-events {float:right;} .next-section-link{background: url(../img/img-system/layout/arrow-down.png) no-repeat bottom left; padding-left: 30px; background-size: contain;display:block; position:absolute; bottom:8vh;left:94%;transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} .red-layout .next-section-link {color:white;} .calendar-title-links {clear:both;} .calendar-title-links a {text-decoration:underline;} .link-other-events {text-align: center;text-decoration:underline;font-size:;} .no-image div {width: 100%!important;} .hide-image a img {display: none;} .hide-image a div {width: 100%!important;} /* -----------------------------------Služby----------------------------------------------- */ #sluzby.services-layout{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch; } /* Zrušení legacy floatů */ #sluzby.services-layout .wrap-main, #sluzby.services-layout .wrap-side{ float:none !important; width:auto !important; min-width:0 !important; } /* 70/30 jako Lidé */ #sluzby.services-layout .wrap-main{ flex:1 1 70% !important; } #sluzby.services-layout .wrap-side{ flex:0 0 30% !important; max-width:30% !important; } /* Mobile */ @media (max-width: 950px){ #sluzby.services-layout{ flex-wrap:wrap !important; } #sluzby.services-layout .wrap-main{ flex:1 1 100% !important; } #sluzby.services-layout .wrap-side{ flex:1 1 100% !important; max-width:none !important; } } /* ====================================================== HEADER (nadpis + tlačítko vpravo) ====================================================== */ #sluzby.services-layout .services-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:3rem; } #sluzby.services-layout .services-title p{ margin:0; } #sluzby.services-layout .float-right{ float:none !important; } @media (max-width:650px){ #sluzby.services-layout .services-head{ flex-direction:column; align-items:flex-start; } } /* ====================================================== SLUŽBY – ikonové buttony přes MASK + MIL (report/food/emergency/bed + MIL) ====================================================== */ /* PRAVÝ SLOUPEC – tlačítka pod sebou, bez překryvu */ #sluzby.services-layout .wrap-side .pad-main-right{ display: flex; flex-direction: column; gap: 18px; /* mezera mezi prvky (uprav dle chuti) */ } #sluzby.services-layout .wrap-side .pad-main-right > a.but{ display: block; box-sizing: border-box; } #sluzby.services-layout .wrap-side .pad-main-right > a.but{ margin: 0 !important; } /* ===== společná báze pro ikonové buttony ===== */ #sluzby.services-layout a.but.but-red-empty.but-report, #sluzby.services-layout a.but.but-red-empty.but-food, #sluzby.services-layout a.but.but-red-empty.but-emergency, #sluzby.services-layout a.but.but-red-empty.but-bed{ position: relative; padding: 14px 24px 14px 64px !important; /* místo pro ikonku */ text-decoration: none !important; /* pojistka: kdyby někde zůstalo staré background-image */ background-image: none !important; } /* text uvnitř */ #sluzby.services-layout a.but.but-red-empty.but-report strong, #sluzby.services-layout a.but.but-red-empty.but-food strong, #sluzby.services-layout a.but.but-red-empty.but-emergency strong, #sluzby.services-layout a.but.but-red-empty.but-bed strong{ display:block; font-weight:600; } /* emergency má 2 řádky */ #sluzby.services-layout a.but.but-red-empty.but-emergency{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:2px; } #sluzby.services-layout a.but.but-red-empty.but-emergency span{ display:block; font-size:0.85em; line-height:1.1; margin-top:2px; } /* focus (klávesnice) */ #sluzby.services-layout a.but.but-red-empty.but-report:focus-visible, #sluzby.services-layout a.but.but-red-empty.but-food:focus-visible, #sluzby.services-layout a.but.but-red-empty.but-emergency:focus-visible, #sluzby.services-layout a.but.but-red-empty.but-bed:focus-visible, #sluzby.services-layout a.but.but-red-empty.but-mil:focus-visible{ outline: 3px solid #c40010; outline-offset: 3px; } /* ===== ikona jako maska (pouze pro report/food/emergency/bed) ===== */ #sluzby.services-layout a.but.but-red-empty.but-report::before, #sluzby.services-layout a.but.but-red-empty.but-food::before, #sluzby.services-layout a.but.but-red-empty.but-emergency::before, #sluzby.services-layout a.but.but-red-empty.but-bed::before{ content:""; position:absolute; left:20px; top:50%; transform:translateY(-50%); width:28px; height:28px; background-color:#c40010; pointer-events:none; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; mask-repeat:no-repeat; mask-position:center; mask-size:contain; transition: background-color 0.15s ease; } /* hover + focus: ikonka zbělá (sjednocené chování) */ #sluzby.services-layout a.but.but-red-empty.but-report:hover::before, #sluzby.services-layout a.but.but-red-empty.but-food:hover::before, #sluzby.services-layout a.but.but-red-empty.but-emergency:hover::before, #sluzby.services-layout a.but.but-red-empty.but-bed:hover::before, #sluzby.services-layout a.but.but-red-empty.but-report:focus-visible::before, #sluzby.services-layout a.but.but-red-empty.but-food:focus-visible::before, #sluzby.services-layout a.but.but-red-empty.but-emergency:focus-visible::before, #sluzby.services-layout a.but.but-red-empty.but-bed:focus-visible::before{ background-color:#ffffff; } /* konkrétní masky */ #sluzby.services-layout a.but.but-red-empty.but-report::before{ -webkit-mask-image:url('../img/img-system/services/wrench-double.png'); mask-image:url('../img/img-system/services/wrench-double.png'); } #sluzby.services-layout a.but.but-red-empty.but-food::before{ -webkit-mask-image:url('../img/img-system/services/but-ico-fork.png'); mask-image:url('../img/img-system/services/but-ico-fork.png'); } #sluzby.services-layout a.but.but-red-empty.but-emergency::before{ -webkit-mask-image:url('../img/img-system/services/emergency.png'); mask-image:url('../img/img-system/services/emergency.png'); } #sluzby.services-layout a.but.but-red-empty.but-bed::before{ -webkit-mask-image:url('../img/img-system/services/but-ico-bed.png'); mask-image:url('../img/img-system/services/but-ico-bed.png'); } /* ===== Made in Litomyšl (MIL) – swap obrázku na hover ===== */ #sluzby.services-layout a.but.but-red-empty.but-mil{ display:flex; align-items:center; justify-content:center; min-height:70px; margin-top:70px; background: url('../img/img-system/services/made-in-litomysl-red.svg') no-repeat center; background-size:50%; text-decoration:none !important; } #sluzby.services-layout a.but.but-red-empty.but-mil:hover{ background-image:url('../img/img-system/services/made-in-litomysl-white.svg'); } /* IKONY - 3 skupiny vedle sebe */ #sluzby.services-layout #service-nav-icons.services-icons{ display:flex !important; gap: 50px; /* mezera mezi skupinami */ align-items:flex-start; justify-content:flex-start; width:95%; max-width:100%; margin-top:40px; margin-bottom:40px; overflow:visible; } /* každá skupina = 2 sloupce */ #sluzby.services-layout #service-nav-icons .services-group{ flex: 1 1 0; min-width: 0; display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); /* DVOJICE */ /* místo % (nestabilní) použijeme adaptivní mezery */ gap: clamp(14px, 2.2vw, 26px) clamp(14px, 2.2vw, 26px); justify-items:center; } /* položka = karta (a i wrapper pro GIS) */ #sluzby.services-layout #service-nav-icons .services-group > a, #sluzby.services-layout #service-nav-icons .services-group > .hint-list-trigger{ width: 100%; max-width: 160px; min-width: 0; box-sizing: border-box; } /* samotná karta (u GIS je karta až vnořený ) */ #sluzby.services-layout #service-nav-icons .services-group > a, #sluzby.services-layout #service-nav-icons .hint-list-trigger > a{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; text-align:center !important; gap: 10px !important; /* ZRUŠIT legacy "kolečko" / box */ background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; box-sizing: border-box; } /* popisek – max 2 řádky + stejné "rezervované" místo */ #sluzby.services-layout #service-nav-icons .services-group span{ display:-webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; width:100%; text-align:center !important; line-height:1.2; margin:0 !important; min-height:2.4em; /* 2 řádky při line-height 1.2 */ } /* pojistka proti floatům */ #sluzby.services-layout #service-nav-icons a, #sluzby.services-layout #service-nav-icons .hint-list-trigger{ float:none !important; } /* tooltip */ #sluzby.services-layout #service-nav-icons .hint-list-trigger{ position:relative; } #sluzby.services-layout #service-nav-icons .hint-list{ display:none; position:absolute; width:250px; top:50px; left:50%; transform:translateX(-50%); background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1); z-index:10; } #sluzby.services-layout #service-nav-icons .hint-list-trigger:hover .hint-list{ display:block; } #sluzby.services-layout #service-nav-icons .hint-list .pad{ padding:15px; } /* SLUŽBY – odkazy: underline pouze při hover/focus */ /* 1) Výchozí stav – bez podtržení */ #sluzby.services-layout a{ text-decoration: none; } /* 2) Ikonové dlaždice – NIKDY nepodtrhávat */ #sluzby.services-layout #service-nav-icons a, #sluzby.services-layout #service-nav-icons a:hover, #sluzby.services-layout #service-nav-icons a:focus, #sluzby.services-layout #service-nav-icons a:focus-visible{ text-decoration: none !important; } /* 3) Životní situace + pravý sloupec – underline při hover */ #sluzby.services-layout #service-nav-bottom a{ font-weight: 600; text-decoration: none; transition: all 0.15s ease; line-height:1; } #sluzby.services-layout #service-nav-bottom a:hover{ text-decoration: underline; text-underline-offset: 3px; color:#c40010; } #sluzby.services-layout #service-nav-bottom a:focus-visible{ outline: 2px solid #c40010; outline-offset: 2px; text-decoration: underline; } /* 4) Stejné chování při klávesnici */ #sluzby.services-layout #service-nav-bottom a:focus-visible, #sluzby.services-layout #service-nav-right a:focus-visible{ text-decoration: underline; outline: 2px solid #c40010; outline-offset: 2px; } /* responsivita */ @media (max-width: 950px){ #sluzby.services-layout #service-nav-icons.services-icons{ flex-wrap:wrap !important; } } @media (max-width: 750px){ #sluzby.services-layout #service-nav-icons .services-group{ grid-template-columns: 1fr; /* na mobilu 1 */ } } /* ŽIVOTNÍ SITUACE */ #sluzby.services-layout #service-nav-bottom{ width:100% !important; clear:none !important; padding-top:0 !important; margin-bottom: 0px; } #sluzby.services-layout #service-nav-bottom ul{ list-style: none; padding-left: 0; } #sluzby.services-layout #service-nav-bottom li{ position: relative; padding-left: 18px; margin-bottom: 6px; } /* šipka */ #sluzby.services-layout #service-nav-bottom li::before{ content: "›"; position: absolute; left: 0; top: 0; color: #c40010; font-weight: 600; transition: transform 0.15s ease; } /* jemný pohyb při hover */ #sluzby.services-layout #service-nav-bottom li:hover::before{ transform: translateX(3px); } #sluzby.services-layout .services-life{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:20px; } #sluzby.services-layout .services-life ul{ list-style:none; padding:0; margin:0; } #sluzby.services-layout .services-life li{ margin:8px 0; } #sluzby.services-layout .services-life a{ text-decoration:none; } @media (max-width:950px){ #sluzby.services-layout .services-life{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* PRAVÝ PANEL */ #sluzby.services-layout #service-nav-right ul{ list-style:none; padding:0; margin:0; } #sluzby.services-layout #service-nav-right li{ margin:10px 0; } #sluzby.services-layout #service-nav-right a{ text-decoration:none; } /* TOOLTIP */ #sluzby.services-layout .hint-list{ position:absolute; display:none; width:250px; top:50px; left:50%; background:white; box-shadow:0 0 0 1px rgba(0,0,0,0.1),0px 1px 3px rgba(0,0,0,0.1); transition:all 0.3s ease; z-index:5; } #sluzby.services-layout .hint-list-trigger{ position:relative; } #sluzby.services-layout .hint-list-trigger:hover .hint-list{ display:block; } /* VYPNUTÍ LEGACY FLOATŮ A CLEARERŮ */ #sluzby.services-layout .cleaner{ display:none !important; } #sluzby.services-layout #service-nav-icons li, #sluzby.services-layout #service-tourists li{ float:none !important; width:auto !important; } /* -----------------------------------Městský úřad----------------------------------------------- */ #mestsky-urad{ position: relative; } #mestsky-urad .lilly { position:absolute; left:-20px; top: 15rem; width:18%; height: auto; pointer-events: none; } #mestsky-urad .bubble {float:right;} .bubble a {text-decoration:underline;} .bubble-red {background-color:#c20116;color:white;margin-bottom:5vh;} .bubble-red .pad {padding:15px 30px;} .bubble-red h3,.bubble-red a {color:white;} .office-links {margin-bottom:7vh;} .office-links nav {margin-bottom:3vh;text-align:left;} .office-links li,.office-links h3 {padding-left:0px;text-align:left;} .office-links img {width:37px;} .office-links .col-md-2 {text-align:center;} .office-links h3{margin-bottom:5px;} .office-side h3{margin-bottom:15px;} .office-side .but{margin-top:25px;} .office-side table{margin-bottom:10px;width:100%;} .office-side td,.office-side th {padding: 5px 10px;} .office-side th {padding-right:10px;} /* 3/9 layout: nadpis vlevo, obsah vpravo */ .office-layout{ display: grid; grid-template-columns: 1fr 3fr; gap: 24px; align-items: start; } /* 2 sloupce uvnitř obsahu */ .office-columns{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* blok: ikona + navigace (2/10) */ .office-block{ display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; margin-bottom: 18px; } .office-block img{ width: 48px; height: 48px; object-fit: contain; } .office-alert{ margin-bottom: 24px; padding: 1em; background-color:#c20116; color:white; } .office-alert h3{ color:white; } /* responzivita */ @media (max-width: 950px){ .office-layout{ grid-template-columns: 1fr; } .office-title{ grid-column: 1 / -1; /* přes celou šířku */ } } @media (max-width: 500px){ .office-layout{ grid-template-columns: 1fr; } .office-columns{ grid-template-columns: 1fr; } } /* ====== OTEVÍRACÍ DOBY: červené pozadí + bílý text ====== */ .od-theme-red { --od-bg: transparent; /* widget leží na tvém červeném podkladu */ --od-text: #fff; --od-muted: rgba(255,255,255,.75); --od-hr: rgba(255,255,255,.15); --od-accent: #ffffff; /* okraje, akce */ --od-accent-weak: rgba(255,255,255,.25); --od-accent-strong: rgba(255,255,255,.9); --od-pill-bg: rgba(255,255,255,.12); --od-pill-active: #fff; --od-pill-active-text: #b60000; /* tmavší červená pro text při aktivaci */ --od-focus: #ffe082; /* teplý focus ring */ } /* rodičovské kontejnery */ .wrap-side, .wrap-side.bg-red.office-side, .pad-main-right, .od-widget { min-width: 0; /* KLÍČOVÉ – jinak elipsy nefungují */ } /* pokud .wrap-side je flex kontejner a dítě se rozpíná, přidej i: */ .wrap-side > * { min-width: 0; flex: 1 1 auto; /* dovol zúžit */ } .wrap-side.bg-red.office-side { overflow: hidden; } /* ====== Layout ====== */ .od-widget { color: var(--od-text); } .od-row { display:flex; align-items:center; gap:.6rem; margin:.6rem 0; } .od-label { font-weight:600; } /* ====== SELECT (dropdown) ====== */ /* Obal a fallback */ .od-selectwrap{ inline-size: clamp(220px, 100%, 340px); /* můžeš změnit 360px dle layoutu */ max-inline-size: 100%; display: block; /* ne inline-block => žádné shrink-to-fit kejkle */ position: relative; box-sizing: border-box; /* zásadní pro flex/grid rodiče, aby se směl zúžit */ min-inline-size: 0; /* když je ve flexu a dělá si co chce, nastav i: */ flex: 0 1 auto; } /* nativní select schovej po inicializaci */ .od-selectwrap.is-enhanced > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* tlačítko s aktuální volbou */ .od-cs-toggle{ appearance:none; border:1px solid var(--od-accent-weak); border-radius:.55rem; background: var(--od-pill-bg); color: var(--od-text); font: inherit; font-weight: 600; line-height:1.2; padding:.55rem 2.2rem .55rem .8rem; width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; text-align:left; cursor:pointer; outline:none; /* šipka */ background-image: linear-gradient(45deg, transparent 50%, var(--od-text) 50%), linear-gradient(135deg, var(--od-text) 50%, transparent 50%); background-position: right .8rem center, right .5rem center; background-size:.5rem .5rem; background-repeat:no-repeat; } .od-cs-toggle:hover{ border-color: var(--od-accent); } /* nový, jemnější focus ring (světlý) */ .od-cs-toggle[aria-expanded="true"], .od-cs-toggle:focus-visible{ border-color: var(--od-accent); box-shadow: 0 0 0 .2rem rgba(255,255,255,.14), 0 0 0 .3rem rgba(255,255,255,.28); } /* panel s položkami – vlevo zarovnaný, bez průhlednosti */ .od-cs-list{ position: absolute; left: 0; right: 0; /* zajistí šířku přesně jako tlačítko/wrapper */ width: auto; /* (odstraní auto-roztažení podle obsahu) */ min-width: 100%; max-width: 100%; /* už se neroztáhne */ box-sizing: border-box; margin-top: .35rem; padding: .25rem; z-index: 50; background: #b60000; border: 1px solid var(--od-accent-weak); border-radius: .55rem; max-height: 260px; overflow: auto; } /* položky v seznamu */ .od-cs-list li{ white-space: normal !important; /* povolí zalomení */ overflow: visible !important; /* už nic neschovávej */ text-overflow: clip !important; /* žádné ... uvnitř seznamu */ line-height: 1.25 !important; overflow-wrap: anywhere !important; /* láme i dlouhé „slova“/URL */ word-break: break-word !important; /* fallback pro starší prohlížeče */ hyphens: auto !important; position: relative; padding: .5rem .6rem .5rem 1.7rem; border-radius: .4rem; cursor: pointer; color: var(--od-text); } /* fajfka u vybrané položky */ .od-cs-list li[aria-selected="true"]::before{ content: "✓"; position: absolute; left:.6rem; top:50%; transform:translateY(-50%); font-weight: 800; opacity: .95; } /* hover / aktivní šipkami */ .od-cs-list li:hover, .od-cs-list li.is-active{ background: var(--od-accent-strong); color:#b60000; } /* (volitelné) jemné oddělení skupin – pokud někdy přidáš
  • */ .od-cs-list li.sep { padding:.25rem .6rem; opacity:.6; cursor:default; } .od-cs-list li.sep::before{ content:none; } /* Malý fix na mobilu (dlouhé názvy) */ .od-cs-toggle, .od-cs-list li { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ====== TOGGLE (radio -> pill) ====== */ .od-mode { display:flex; gap:.4rem; margin:.4rem 0 1rem; } .od-toggle { position: relative; display:inline-flex; align-items:center; background: var(--od-pill-bg); border: 1px solid var(--od-accent-weak); color: var(--od-text); padding: .35rem .6rem; border-radius: 999px; cursor: pointer; user-select: none; transition: background .15s, color .15s, border-color .15s; } .od-toggle input { position:absolute; opacity:0; pointer-events:none; } .od-toggle span { font-weight:600; letter-spacing:.2px; } /* aktivní stav */ .od-toggle input:checked + span, .od-toggle:has(input:checked) { background: var(--od-pill-active); color: var(--od-pill-active-text); border-color: var(--od-pill-active); box-shadow: 0 1px 0 rgba(0,0,0,.06); padding: .35rem .7rem; /* malý “push” efekt */ border-radius: 999px; } /* focus klávesnicí */ .od-toggle input:focus-visible + span, .od-toggle:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 .2rem rgba(255,255,255,.18), 0 0 0 .3rem var(--od-focus); border-color: var(--od-accent); } #odModeWrap[hidden] { display: none !important; } /* ====== STAV NAD TABULKOU ====== */ /* OTEVŘENO / ZAVŘENO – zalamovat a fix šířka */ .oteviraci-stav{ margin:.2rem 0 1rem; display:inline-flex; align-items:center; gap:.6rem; background: var(--od-pill-bg); border:1px solid var(--od-accent-weak); border-radius:.6rem; padding:.5rem .7rem; font-weight:600; width: 316px; max-width: 92% !important; } /* bublinka před textem – ať nezvětšuje řádky */ .oteviraci-stav::before{ content:""; width:1.5rem; height:1.5rem; border-radius:50%; background:#35ff6b; box-shadow:0 0 0 .15rem rgba(53,255,107,.25); flex:0 0 1.5rem; /* pevné místo pro tečku */ margin-top:.15em; /* opticky k prvnímu řádku */ } .oteviraci-stav.is-closed::before{ background:#ff6b6b; box-shadow:0 0 0 .15rem rgba(255,107,107,.25); } #oteviraci-vystup .oteviraci-info, #oteviraci-vystup p{ max-width:100%; overflow-wrap:anywhere; word-break: normal; } /* kontejner výstupu – držet se rodiče */ #oteviraci-vystup{ max-width:100%; min-width:0; } /* Texty pod tabulkou nikdy nesmí roztahovat layout */ #oteviraci-vystup { white-space: normal !important; } #oteviraci-vystup .oteviraci-info, #oteviraci-vystup p { max-width: 100% !important; width: 340px; display: block; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* na kontejner s flex/grid: */ .od-widget, .wrap-side { min-width:0; } /* pro přímé děti uvnitř – dropdown i výstup */ .od-widget > .od-selectwrap, .od-widget > #oteviraci-vystup { min-width:0; /* bez toho se elipsy často ignorují */ flex: 1 1 auto; /* (pokud je to flex) */ } /* Kontejner karet (řádků) */ .od-grid{ max-width: 340px; /* tvůj layout limit */ } /* Jeden řádek */ .od-card{ display:flex; gap:.75rem; align-items:flex-start; padding:.55rem .7rem; border:1px solid var(--od-accent-weak); border-radius:.6rem; background: rgba(255,255,255,.06); } /* LEVÁ buňka – den: pevná šířka, elipsy při dlouhém textu */ .od-card .col-day{ flex: 0 0 120px; /* ← nastav si, např. 120–160 px */ min-width:0; } .od-card .col-day .od-day{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* PRAVÁ buňka – časy pod sebou, normálně zarovnat vpravo */ .od-card .col-times{ flex: 1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-end; text-align:right; } /* Jednotlivé řádky s časem */ .od-card .col-times .line{ white-space:nowrap; /* časy se nezalamují */ } /* Pokud je řádek zavřený, povol zalamování textu a zarovnej doleva */ .od-card.is-closed .col-times{ align-items:flex-start; text-align:left; } .od-card.is-closed .col-times .line.closed{ white-space:normal; overflow-wrap:anywhere; /* ať se zalomí i dlouhé „(popis)“ */ word-break:break-word; } /* -----------------------------------Lidé----------------------------------------------- */ #lide h2{margin-bottom:5vh;} .people-big {width:30%;} .people-mid {width:20%;} .people-small {width:12%;} div.people-small h3 { clear:none; float:left; width:60%; } nav.people-links {float:right;margin-top:40px;} nav.people-links, nav.people-links h3,nav.people-links li {text-align:left;padding-left:0px;} .people-mid h3 {text-align:center;width:100%;} a.more-answers {color:#c20116;float:right;margin-bottom:5px;font-weight:bold; } #lide h3 {font-size:1.1em;font-weight:700;} /* ========================================================= LIDÉ – MODERN LAYOUT (2026) Zapíná se třídou:
    ========================================================= */ #lide.people-layout .people-circles img {max-width:100%;z-index:1; border-radius: 200px;} /* Pojistka: #lide v moderním režimu MUSÍ být flex a nesmí wrapnout */ #lide.people-layout{ display: flex !important; flex-wrap: nowrap !important; align-items: stretch; } /* Pojistka: zrušit floaty/šířky z legacy pravidel */ #lide.people-layout .wrap-main, #lide.people-layout .wrap-side{ float: none !important; width: auto !important; min-width: 0 !important; } /* pevné rozdělení sloupců */ #lide.people-layout .wrap-main{ flex: 1 1 70% !important; } #lide.people-layout .wrap-side{ flex: 0 0 30% !important; } /* když by se wrap-side i tak snažil být moc široký */ #lide.people-layout .wrap-side{ max-width: 30% !important; } /* --------------------------------------------------------- HERO (H2 | starosta+mistostarosta | starostova odpovědna) --------------------------------------------------------- */ #lide.people-layout .people-hero{ position: relative; display: grid; grid-template-columns: minmax(0,0.3fr) minmax(0,0.5fr) minmax(0,1fr); gap: 24px; align-items: start; margin-bottom: 24px; /* POZOR: kvůli tooltipům nad fotkou musí být visible */ overflow: visible; padding-top: 24px; /* aby se bublina ani tooltip nelepily na horní hranu */ } /* důležité: aby grid itemy nepretékaly */ #lide.people-layout .people-hero > *{ min-width: 0; } #lide.people-layout .people-title h2{ margin: 0; } /* starosta + místostarosta pod sebe */ #lide.people-layout .people-leaders{ display: grid; justify-items: center; gap: 0px; } /* každý leader jako blok */ #lide.people-layout .people-leader{ position: relative; /* kotva pro tooltip */ text-align: center; width: 100%; min-width: 0; display: grid; justify-items: center; } /* kruhové portréty – společné */ #lide.people-layout .people-leader img{ display: block; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; } #lide.people-layout .people-leader--major img{ width: clamp(140px, 18vw, 180px) !important; } #lide.people-layout .people-leader--wisemajor img{ width: clamp(120px, 14vw, 160px) !important; } /* --------------------------------------------------------- Tooltip s údaji (nad fotkou) – jen pro .people-leader --------------------------------------------------------- */ /* titulky nech viditelné */ #lide.people-layout .people-leader h3{ display: block; } /* tooltip kontejner */ #lide.people-layout .people-leader .person-tooltip{ display: none; position: absolute; left: 85%; top: 65%; transform: translateX(-20%); z-index: 20; background: rgba(255,255,255,.98); border: 1px solid #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.15); padding: .6rem .8rem; border-radius: .35rem; width: max-content; max-width: min(320px, 90vw); text-align: left; } /* zobraz při hover / focus */ #lide.people-layout .people-leader:hover .person-tooltip, #lide.people-layout .people-leader:focus-within .person-tooltip{ display: block; } /* jen kosmetika */ #lide.people-layout .people-leader .person-tooltip p{ margin: 0; } /* šipka dolů (volitelné) */ #lide.people-layout .people-leader > div::after{ display: none; } /* --------------------------------------------------------- Starostova odpovědna (bublina vpravo) --------------------------------------------------------- */ /* bublinu srovnej níž (aby se zobrazila celá) */ #lide.people-layout .people-bubble{ min-width: 0; max-width: 100%; justify-self: end; overflow: visible; max-width: 560px; overflow-wrap: anywhere; word-break: break-word; background-color:white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1); margin: 0; padding: 25px 25px; } #lide.people-layout .people-bubble h3{ font-size:1.2em; margin-bottom:15px; color:#c20116; } #lide.people-layout .people-bubble h4, #lide.people-layout .people-bubble h4 span { font-size:0.9em;font-weight:700 !important; } #lide.people-layout .people-bubble h4 {margin-bottom:0px;} #lide.people-layout .people-bubble p {font-size:0.8em;} #lide.people-layout .people-bubble article {margin-bottom:10px;} /* --------------------------------------------------------- Vypnutí legacy floatů jen uvnitř nové sekce (původně people-circles float:left) --------------------------------------------------------- */ #lide.people-layout .people-circles{ float: none; } /* --------------------------------------------------------- Separator / linky (plná vertikální čára uprostřed) --------------------------------------------------------- */ #lide.people-layout .people-sep{ display: flex; justify-content: center; margin: 18px 0; } /* plná čára (pseudo element) */ #lide.people-layout .people-sep::before{ content: ""; width: 5px; /* tloušťka */ height: 3em; /* výška */ background-color: #c20116; border-radius: 2px; } /* CTA pod poslední linkou centrovaně */ #lide.people-layout .people-sep--cta{ display: flex; flex-direction: column; align-items: center; } #lide.people-layout .people-sep--cta .but{ margin: 15px auto 30px; } /* --------------------------------------------------------- Spodní části (rada, zastupitelstvo): vlevo kruhy, vpravo nav --------------------------------------------------------- */ #lide.people-layout .people-maingrid{ display: grid; gap: 24px; } #lide.people-layout .people-section{ display: grid; grid-template-columns: 1fr 320px; gap: 0px; align-items: start; } #lide.people-layout .people-sep{ grid-column: 1 / -1; } /* people-left musí být široký jako celý levý sloupec */ #lide.people-layout .people-left{ width: 100%; } /* řádky budou bloky s definovanou šířkou (odpovídá 4 kruhům + 3 gapy) */ #lide.people-layout .people-row{ --gap: 5px; display: flex; gap: var(--gap); justify-content: center; margin: 0 auto 0px; /* auto = centrování vůči people-left */ } /* wrapper kruhu už máš, ale doplníme: */ #lide.people-layout .people-circles{ position: relative; overflow: visible; } /* focusovatelný avatar */ #lide.people-layout .people-circles .person-avatar{ display: inline-block; border-radius: 50%; outline: none; } /* hezký focus ring (klávesnice) */ #lide.people-layout .people-circles .person-avatar:focus-visible img{ outline: 3px solid #c20116; outline-offset: 2px; border-radius: 50%; } /* tooltip */ #lide.people-layout .people-circles .person-tooltip{ display: none; position: absolute; left: 75%; right: auto; top: 75%; z-index: 50; transform: none; background: rgba(255,255,255,.98); border: 1px solid #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.15); padding: .6rem .8rem .8rem; border-radius: .35rem; width: max-content; max-width: min(320px, calc(100vw - 24px)); text-align: left; } #lide.people-layout .people-circles:hover .person-tooltip, #lide.people-layout .people-circles:focus-within .person-tooltip{ display: block; } #lide.people-layout .people-circles .person-tooltip p{ margin: 0; } /* když je kolečko vpravo, otevírej tooltip doleva */ #lide.people-layout .people-row > .people-circles:last-child .person-tooltip, #lide.people-layout .people-row > .people-circles:nth-last-child(2) .person-tooltip{ left: auto; right: 75%; } /* ========================================================= ZASTUPITELSTVO A RADA – vlastní velikost koleček a tooltip ========================================================= */ /* transition na obrázku */ #lide.people-layout .people-circles img{ transition: filter .18s ease, transform .18s ease; } /* efekt pouze při hover/focus na .person-avatar */ #lide.people-layout .people-circles .person-avatar:hover img, #lide.people-layout .people-circles .person-avatar:focus-visible img, #lide.people-layout .people-circles:focus-within .person-avatar img{ outline: 2px solid #c20116; outline-offset: 0; border-radius: 50%; filter: contrast(1.1) brightness(1.05); transform: scale(1.03); } /* Zabraň globálnímu a:hover { opacity: .6 } aby tlumilo fotky osob */ #lide.people-layout .person-avatar:hover, #lide.people-layout .person-avatar:focus, #lide.people-layout .person-avatar:focus-visible{ opacity: 1 !important; } /* ========================================= DŮLEŽITÉ: umožnit zmenšování grid položek ========================================= */ #lide.people-layout .people-hero > *, #lide.people-layout .people-section > *, #lide.people-layout .people-maingrid > *{ min-width: 0; } /* totéž pro levý a pravý sloupec */ #lide.people-layout .people-left, #lide.people-layout .people-right{ min-width: 0; } #lide.people-layout .people-right{ padding-left: 1em; } #lide.people-layout .people-leader .people-links.small-mobile{ display: none; } /* ========================================================= Pravý sloupec: Městský úřad (tajemník + odbory) – GRID timeline ========================================================= */ #lide.people-layout .people-office, #lide.people-layout .people-office *{ box-sizing: border-box; } #lide.people-layout .people-office{ --tl: 34px; --gap: 12px; --line: 3px; --dot: 10px; margin: 30px 0; } /* content = timeline | obsah */ #lide.people-layout .people-office__content{ position: relative; display: grid; grid-template-columns: var(--tl) 1fr; column-gap: var(--gap); min-width: 0; } /* čára na ose timeline sloupce */ #lide.people-layout .people-office__content::before{ content:""; position: absolute; left: calc(var(--tl) / 2); top: 32px; bottom: 0; width: var(--line); transform: translateX(-50%); background: #c20116; z-index: 1; } /* HLAVIČKA */ #lide.people-layout .people-office__head{ display: contents; /* nechá děti sedět přímo do gridu contentu */ } /* avatar do timeline sloupce */ #lide.people-layout .people-office__head-timeline{ grid-column: 1; display: flex; justify-content: center; align-items: center; } #lide.people-layout .people-office__head-content{ grid-column: 2; min-width: 0; } #lide.people-layout .people-office__avatar{ position: relative; overflow: visible; transform: none !important; } #lide.people-layout .people-office__avatar img{ width: 60px !important; height: 60px !important; aspect-ratio: 1/1 !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; max-width: none !important; } #lide.people-layout .people-office__title{ margin: 0; text-align: left; } /* tooltip */ #lide.people-layout .people-office__avatar .person-tooltip{ display:none; position:absolute; left: 80%; top: 80%; z-index: 60; background: rgba(255,255,255,.98); border: 1px solid #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.15); padding: .6rem .8rem; border-radius: .35rem; width: max-content; max-width: min(320px, 90vw); text-align: left; } #lide.people-layout .people-office__avatar:hover .person-tooltip, #lide.people-layout .people-office__avatar:focus-within .person-tooltip{ display:block; } /* ODKAZY */ #lide.people-layout .people-office__links{ list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; /* ul “přes” oba sloupce */ } #lide.people-layout .people-office__links li{ display: grid; grid-template-columns: var(--tl) 1fr; column-gap: var(--gap); align-items: center; padding: 10px 0; margin: 0; } #lide.people-layout .people-office__links li::before{ content:""; grid-column: 1; justify-self: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: #c20116; position: relative; z-index: 2; /* nad čárou */ } #lide.people-layout .people-office__links a{ grid-column: 2; display:block; min-width:0; opacity: 1 !important; text-decoration:none; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } #lide.people-layout .people-office__links a:hover{ text-decoration: underline; } /* 1) Čára až POD avatarem (aby fotku nepřekrývala) */ #lide.people-layout .people-office__content::before{ top: 78px; /* dolaď 70–90 podle reálné výšky hlavičky */ } /* (pojistka) Avatar vždy nad čarou */ #lide.people-layout .people-office__head-timeline{ position: relative; z-index: 3; } /* 2) Tajemník trochu níž */ #lide.people-layout .people-office__title{ margin-top: 14px; /* dolaď 6–14 */ padding-left: 14px; } /* 3) Celé doleva */ #lide.people-layout .people-office{ --tl: 28px; /* bylo 34px */ --gap: 10px; /* bylo 12px */ } /* pokud chceš ještě víc doleva (bez změny osy), posuň celý blok */ #lide.people-layout .people-office{ margin-left: -6px; /* dolaď 0 až -12 */ } #lide.people-layout .people-links.small-mobile{ display: none; } /* --------------------------------------------------------- Responz (≤ 1250px): vše pod sebe --------------------------------------------------------- */ @media (max-width: 1250px){ #lide.people-layout .people-right{ padding-left: 0 !important; margin-left: 0 !important; width: 100% !important; } #lide.people-layout .people-right h3{ width: 100%; text-align: center; } #lide.people-layout .people-right ul{ width: 100%; align-items: center; text-align: center; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding-left: 0; } #lide.people-layout .people-leader .person-tooltip{ left: auto; right: 0; transform: translateX(-10px); } } /* --------------------------------------------------------- Responz (≤ 950px): vše pod sebe --------------------------------------------------------- */ @media (max-width: 950px){ /* 1) V mobilu udělej z hero 2 sloupce: leaders | bubble */ #lide.people-layout .people-hero{ grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 0px; } /* 2) Nadpis přes celou šířku (aby nezabíral "první sloupec" pro celý grid) */ #lide.people-layout .people-title{ grid-column: 1 / -1; } /* 3) Kolečka ať jsou opravdu v levém sloupci a nevycentrované "úzké" */ #lide.people-layout .people-leaders{ grid-column: 1; justify-items: start; /* místo center */ width: 100%; } /* 4) Bublina ať vyplní druhý sloupec */ #lide.people-layout .people-bubble{ width: 100%; max-width: none !important; justify-self: stretch; box-sizing: border-box; padding-right: 90px; /* rezerva pro svislé ikony – dolaď číslo */ } #lide.people-layout .people-section{ grid-template-columns: 1fr; } /* NADPIS přes všechny sloupce */ #lide.people-layout .people-title{ grid-column: 1 / -1; } /* přidáme odstup */ #lide.people-layout .people-title h2{ margin-bottom: 20px; } #lide.people-layout .people-sep, #lide.people-layout .people-sep--cta{ display: none; } /* rodič sekce */ #lide.people-layout{ flex-direction: column; align-items: stretch !important; } /* oba wrapy musí být full width (a nesmí zůstat 30%) */ #lide.people-layout .wrap-main, #lide.people-layout .wrap-side{ flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ZRUŠ šedé pozadí – obvykle je na wrap-side nebo přímo na section */ #lide.people-layout .wrap-side, #lide.people-layout .pad-main-right{ background: transparent !important; } /* vnitřní padding pravého sloupce */ #lide.people-layout .pad-main-right{ padding: 0 16px !important; margin: 0 !important; float: none !important; } /* teď konečně vycentruj obsah (modul) */ #lide.people-layout .people-office{ width: 100% !important; max-width: 640px; /* dle vkusu */ margin: 0 auto !important; /* centrování */ } } /* ----------------------------------- VZDĚLÁVÁNÍ (FLEX/GRID bez Bootstrapu) ----------------------------------- */ /* ========== 1) HLAVNÍ LAYOUT SEKCE (stejně jako #lide.people-layout) ========== */ #vzdelavani.education-layout{ display: flex !important; flex-wrap: nowrap !important; align-items: stretch; } #vzdelavani.education-layout .wrap-main, #vzdelavani.education-layout .pad-main-left{ display: block !important; /* pojistka proti flex rodiči */ justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* grid musí mít plnou šířku a začínat vlevo */ #vzdelavani.education-layout .edu-grid4{ width: 100% !important; margin: 0 !important; justify-items: center; /* kolečka zůstávají na středu karty */ align-content: start; } /* pojistka proti float/right/auto-margin na nav prvcích */ #vzdelavani.education-layout .edu-grid4 .edu-card, #vzdelavani.education-layout .edu-grid4 nav{ float: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* kdyby měl některý nav auto odsazení doprava */ #vzdelavani.education-layout .edu-grid4 .edu-card{ justify-self: stretch; /* karta vyplní sloupec */ } /* pojistka: seznamy a odkazy uvnitř ať se nezalamují "divně" */ #vzdelavani.education-layout .edu-card ul{ padding-left: 0; margin-left: 0; list-style-position: inside; } /* pevné rozdělení sloupců (kopie logiky z #lide) */ #vzdelavani.education-layout .wrap-main{ flex: 1 1 70% !important; } #vzdelavani.education-layout .wrap-side{ flex: 0 0 30% !important; } /* když by se wrap-side i tak snažil být moc široký */ #vzdelavani.education-layout .wrap-side{ max-width: 30% !important; } /* ========== 2) NADPIS ========== */ #vzdelavani h2{ margin-bottom: 30px; } /* ========== 3) 4 HLAVNÍ BLOKY (MS/ZŠ/SŠ/VŠ) – GRID (stabilní jako people-hero) ========== */ /* očekává wrapper:
    ...4x