/* ============================================ GLOBAL PAGE LAYOUT – funguje pre každú tému ============================================ */ *, *::before, *::after { box-sizing: border-box; } /* max šírka + centrovanie */ .site-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 30px; } /* Mobile padding */ @media (max-width: 768px) { .site-container { padding: 0 16px; } } /* HEADINGS – fallback */ h1, h2, h3, h4 { color: var(--heading-color); line-height: 1.2; } /* Text color (fallback) */ body { color: var(--text-color); } /* Odkazy */ a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Default spacing medzi sekciami */ section { margin-bottom: 2.5rem; } /* Obrázky nie sú väčšie ako kontajner */ img { max-width: 100%; height: auto; } /* ========================================= iOS DOUBLE TAP FIX (bez zmeny fontu) ========================================= */ button, a, .nav-toggle, .mobile-menu .row, .a11y-box button { touch-action: manipulation; } /* ========================================= GLOBAL TYPOGRAPHY – DESKTOP (default) ========================================= */ /* base */ html { -webkit-text-size-adjust: 100%; } body { font-size: 1rem; line-height: 1.6; } /* headings */ h1, h2, h3, h4, h5 { margin: 0 0 .25rem; line-height: 1.3; font-weight: 600; color: var(--text); } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } h4 { font-size: 1.2rem; } .site-title{ display:flex; flex-direction:column; line-height:1.1; } /* HLAVNÍ NÁZEV */ .logo-main{ font-size:1.25rem; font-weight:700; letter-spacing:.02em; } /* POPIS */ .logo-sub{ font-size:.85rem; opacity:.75; } .meta-card{ margin: 2rem 0; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; } /* text */ p { margin: .85rem 0; line-height: 1.7; } /* lists */ ul, ol { margin: .75rem 0 .75rem 1.5rem; padding: 0; } li { margin: .35rem 0; } /* ========================================= LINKS – CONTENT ONLY ========================================= */ .content a, .content a:visited { color: var(--brand); text-decoration: none; transition: color var(--tr); } .content a:hover, .content a:focus-visible { color: var(--brand-dark); text-decoration: underline; } .content a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ========================================= TABLET (≤ 1024px) ========================================= */ @media (max-width: 1024px){ h1 { font-size: 1.75rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.25rem; } h4 { font-size: 0.95rem; } body { font-size: 0.97rem; } p { line-height: 1.65; } } /* ========================================= MOBILE (≤ 640px) ========================================= */ @media (max-width: 640px){ h1 { font-size: 1.6rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } h4 { font-size: 0.95rem; } body { font-size: 0.95rem; } p { margin: .75rem 0; line-height: 1.6; } ul, ol { margin-left: 1.25rem; } } /* ================================================== BASE DESIGN SYSTEM (CORE) ================================================== */ :root { /* COLORS */ --bg: #ffffff; --surface: #ffffff; --surface-soft: #f8fafc; --text: #111827; --border: #e5e7eb; --muted: #6b7280; /* MOTION */ --tr: .2s ease; --tr-fast: .15s ease; --tr-slow: .25s ease; /* BRAND (default fallback) */ --brand: #0B57D0; --brand-contrast: #ffffff; --brand-contrast-high: #000000; /* LINKS */ --link: var(--brand); --link-hover: color-mix(in srgb, var(--brand) 80%, black); /* UI */ --radius: 12px; --btn-radius: 10px; /* TYPO */ --font: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial; /* LAYOUT */ --container: 1200px; /* EFFECTS */ --shadow: 0 10px 30px rgba(0,0,0,.08); /* NAV */ --nav-bg: var(--bg); --nav-text: var(--text); /* BUTTON */ --btn-bg: var(--brand); --btn-text: #ffffff; /* A11Y */ --focus-ring: 2px solid var(--brand); /* HOURS */ --state-success: #16a34a; --state-success-bg: color-mix(in srgb, var(--state-success) 12%, transparent); --state-success-border: color-mix(in srgb, var(--state-success) 50%, transparent); } /* ================================================== TENANT OVERRIDE ================================================== */ :root:not(.a11y-dark):not(.a11y-contrast-high) { --brand: #24980f;; --brand-contrast: #ffffff; --brand-contrast-high: #000000; --accent: #0ea5e9; --bg: #f9f9f9; --surface: #ffffff; --surface-soft: #f8fafc; --text: #222222; --muted: #6b7280; --border: #e5e7eb; --nav-bg: #0f640c;; --nav-text: #ffffff; --btn-bg: #30313b; --btn-text: #ffffff; --link: var(--brand); --link-hover: color-mix(in srgb, var(--brand) 80%, black); } /* ================================================== BASE ELEMENTS ================================================== */ html, body { margin: 0; padding: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; background: var(--bg); color: var(--text); } @media (max-width: 640px) { section { margin-bottom: 0; } } /* MODULE DESC */ .module-desc{ margin:.25rem 0 2rem; color: var(--muted); } /* FILTERS */ .module-filters{ margin-bottom:1.25rem; display:flex; gap:.75rem; flex-wrap:wrap; } /* PAGINATION */ .pagination{ margin-top:1.5rem; display:flex; gap:.4rem; flex-wrap:wrap; } /* ========================================= ERROR 404 ========================================= */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; padding: 2rem 1rem; } .error-code { font-size: 4rem; font-weight: 700; opacity: .15; margin-bottom: .5rem; color: var(--text); } .error-404 h1 { font-size: 2rem; margin-bottom: .5rem; color: var(--text); } .error-404 p { color: var(--muted); margin-bottom: 1.5rem; } .error-actions { margin-top: 1rem; } /* tlačítko (fallback kdyby .btn nebyl všude) */ .error-actions .btn { display: inline-block; padding: .6rem 1rem; border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-text); text-decoration: none; transition: background var(--tr); } .error-actions .btn:hover { background: color-mix(in srgb, var(--btn-bg) 85%, black); } /* ========================================= PAGINATION ========================================= */ .pagination { margin-top: 2rem; display: flex; gap: .5rem; } .pagination-item { display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border-radius: var(--btn-radius); background: var(--surface); color: var(--muted); border: 1px solid var(--border); text-decoration: none; transition: background var(--tr), color var(--tr), border-color var(--tr); } .pagination-item:hover { background: var(--surface-soft); color: var(--text); } .pagination-item.active { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); font-weight: 600; } /* ========================================= PAGINATION ARROWS ========================================= */ .pagination-item.is-prev, .pagination-item.is-next { position: relative; } /* šipka */ .pagination-item.is-prev::after, .pagination-item.is-next::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform-origin: center; transition: border-color var(--tr); } /* .pagination { justify-content: center; }*/ /* NEXT → */ .pagination-item.is-next::after { left:.9rem; transform: translate(-50%, -50%) rotate(-45deg); } /* PREV ← */ .pagination-item.is-prev::after { left:1.1rem; transform: translate(-50%, -50%) rotate(135deg); } /* hover */ .pagination-item:hover::after { border-color: var(--text); } /* active (optional) */ .pagination-item.active::after { border-color: var(--btn-text); } /* ========================================= FILTER SELECT – CIVILO UI (FINAL) ========================================= */ .module-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } /* ========================================= WRAPPER (nutný pre arrow) ========================================= */ .select-wrap { position: relative; display: inline-flex; /* 🔥 fix */ align-items: center; } /* ========================================= SELECT RESET ========================================= */ .module-filters select, .select-wrap select { appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 12px; /* miesto pre arrow */ border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.95rem; line-height: 1.2; cursor: pointer; position: relative; z-index: 1; /* 🔥 pod arrow */ transition: border-color var(--tr), box-shadow var(--tr), background var(--tr); } /* HOVER */ .module-filters select:hover { border-color: color-mix(in srgb, var(--border) 70%, black); } /* FOCUS */ .module-filters select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); } /* ========================================= ARROW (len ak nie je .no-arrow) ========================================= */ .select-wrap:not(.no-arrow)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(135deg); border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); pointer-events: none; z-index: 2; /* 🔥 nad selectom */ } /* ========================================= BUTTON ========================================= */ .module-filters button { padding: 10px 14px; border-radius: var(--btn-radius); border: none; background: var(--brand); color: var(--brand-contrast); font-weight: 600; cursor: pointer; transition: transform var(--tr), box-shadow var(--tr); } .module-filters button:hover { transform: translateY(-1px); box-shadow: var(--shadow); } /* ================================================== SEARCH (GLOBAL – CLEAN TYPO + A11Y) ================================================== */ /* wrapper */ .search-wrap { padding: 14px 0px; } /* inner */ .search-box { padding: 0 24px; } /* input */ .search-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1.5; transition: border-color var(--tr), box-shadow var(--tr), background-color var(--tr), color var(--tr); } /* focus */ .search-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); } /* placeholder */ .search-input::placeholder { color: var(--muted); } /* results wrapper */ .search-results { margin-top: 12px; padding: 0 28px; } /* ================================================== SEARCH ITEM (TYPO FIX + LINK SYSTEM) ================================================== */ .search-item, .search-page-item { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.5; transition: background-color var(--tr), color var(--tr), border-color var(--tr); } /* hover */ .search-item:hover, .search-page-item:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } /* focus (A11Y) */ .search-item:focus-visible, .search-page-item:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ========================================= SEARCH TEXT PARTS ========================================= */ .search-type { margin-bottom: 0.25rem; font-size: 0.8rem; color: var(--muted); } .search-title { margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 600; color: var(--link); line-height: 1.4; } .search-excerpt { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; } /* ========================================= MOBILE ========================================= */ @media (max-width: 640px){ .search-input { padding: 12px 14px; font-size: 1rem; } .search-title { font-size: 1rem; } .search-excerpt { font-size: 0.85rem; } } /* ================================================== TEXT ELEMENTS (CLEAN TYPO SYSTEM) ================================================== */ /* type */ .search-type { margin-bottom: 0.25rem; font-size: 0.8rem; line-height: 1.4; color: var(--muted); } /* title */ .search-title { margin-bottom: 0.2rem; font-size: 1.05rem; line-height: 1.4; font-weight: 600; color: var(--link); } /* excerpt */ .search-excerpt { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); } /* ================================================== STATES ================================================== */ .search-loading, .search-empty { font-size: 0.9rem; line-height: 1.5; color: var(--muted); } /* ================================================== HIGHLIGHT (SEARCH) ================================================== */ mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--text); font-size: inherit; line-height: inherit; } /* ================================================== MOBILE ================================================== */ @media (max-width: 640px){ .search-type { font-size: 0.75rem; } .search-title { font-size: 1rem; } .search-excerpt { font-size: 0.85rem; } } /* ========================================= HERO – STABLE VERSION (NO VARIABLES) ========================================= */ .home-hero{ padding:2rem 0; } /* MAIN BOX */ .home-hero-inner{ display:grid; grid-template-columns:1fr 1.35fr; border-radius:16px; overflow:hidden; height:440px; min-height:440px; max-height:440px; background: linear-gradient( 135deg, var(--brand), color-mix(in srgb, var(--brand) 65%, black) ); color:#fff; } /* TEXT */ .home-hero-content{ padding:2rem; display:flex; flex-direction:column; justify-content:center; } .home-hero-content h1{ font-size:2.4rem; line-height:1.2; color:var(--brand-contrast); } .hero-subtitle{ font-size:1rem; opacity:.95; margin-bottom:1.5rem; color:var(--brand-contrast); } /* MOBILE */ @media (max-width:900px){ .home-hero-content h1{ font-size:1.6rem; line-height:1.25; } .hero-subtitle{ font-size:.95rem; } } /* ========================================= HERO BUTTON (modifier) ========================================= */ .home-hero .btn.primary.hero{ /* layout */ align-self:flex-start; /* vizuál */ padding:.8rem 1.2rem; font-size:1.05rem; /* lehký lift */ box-shadow:0 8px 24px rgba(0,0,0,.18); } /* hover – trochu víc “živý” než default */ .home-hero .btn.primary.hero:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.22); } /* HERO BUTTON – brand text */ .home-hero .btn.primary.hero{ color:var(--brand-contrast); background: color-mix(in srgb, var(--brand) 55%, black); border: none; } /* IMAGE */ .home-hero-image{ height:100%; } .home-hero-image img{ width:100%; height:100%; object-fit:cover; } /* MOBILE */ @media (max-width:900px){ .home-hero-inner{ grid-template-columns:1fr; /* 🔥 pořadí */ display:flex; flex-direction:column; height:auto; min-height:auto; max-height:none; } /* 🔥 image NAHORU */ .home-hero-image{ order:-1; height:220px; } /* 🔥 text DOLE a DOLEVA */ .home-hero-content{ text-align:left; align-items:flex-start; } /* 🔥 button vlevo */ .home-hero .btn.primary.hero{ align-self:flex-start; } } /* ========================================= HOME GRID ========================================= */ .home-grid{ display:grid; grid-template-columns:2fr 1fr; gap:2rem; margin-top:2rem; } /* LEFT */ .home-news{} /* RIGHT */ .home-widgets{ display:flex; flex-direction:column; gap:1rem; } /* ========================================= SECTION HEAD ========================================= */ .home-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } .home-section-head h2{ margin:0; } .link-more{ font-size:.9rem; text-decoration:none; color:var(--brand); } .link-more:hover{ text-decoration:underline; } /* ========================================= NEWS LIST ========================================= */ .home-news-list{ display:flex; flex-direction:column; gap:.75rem; } .home-news-item{ display:block; padding:.8rem 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); } .home-news-item:hover{ color:var(--brand); } /* pouze pro home news */ .home-news-list .home-news-card{ padding:1rem 1.2rem; } .home-news-title{ font-size:1.05rem; font-weight:600; line-height:1.35; } .home-news-date{ font-size:.8rem; color:var(--muted); } /* ========================================= MOBILE ========================================= */ /* default */ .home-grid { margin-top: 2rem; } /* 🔥 pokud je před tím hero → zruš margin */ .home-hero + .home-grid { margin-top: 0; } @media (max-width:900px){ .home-grid{ grid-template-columns:1fr; gap: 0; } } @media (max-width: 640px) { /* default = když NENÍ poll */ .home-news-list { margin-bottom: 1rem; } } /* ========================================= HEADER (TYPO CONNECTED – NO LAYOUT CHANGE) ========================================= */ .site-header { background: var(--nav-bg); color: var(--nav-text); font-size: 1rem; line-height: 1.4; } /* layout */ .header-flex { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 24px 30px; } /* LEFT */ .header-left { display: flex; align-items: center; gap: 0.6rem; } /* FIX CLS */ .logo-box{ display:flex; align-items:center; justify-content:flex-start; min-width:60px; /* odstraněno */ /* height:80px; */ /* overflow:hidden; */ } /* logo */ .logo{ height:74px; /* hlavní řízení velikosti */ width:auto; max-width:200px; /* optional – ochrana */ object-fit:contain; display:block; } /* header stabilní */ .site-header{ min-height:80px; /* ✔ může zůstat */ } /* ========================================= MENU (DESKTOP) – TYPO CONNECT ========================================= */ .main-menu .menu-level { display: flex; align-items: center; gap: 1.4rem; margin: 0; padding: 0; list-style: none; } .main-menu a { color: var(--nav-text); text-decoration: none; font-weight: 500; font-size: inherit; line-height: 1.4; opacity: 0.9; } .main-menu a:hover { opacity: 1; } /* ACTIVE LINK */ .main-menu a.is-active, .main-menu a[aria-current="page"]{ opacity:1; color:var(--nav-text); background:var(--nav-active-bg, rgba(255, 255, 255, 0.13)); border-radius:8px; padding:.65rem .6rem; } /* ========================================= MENU (DESKTOP) – DROPDOWN (DESIGN SYSTEM) ========================================= */ .main-menu .menu-level li { position: relative; } .main-menu .menu-level li ul { display: none; position: absolute; top: 32px; left: 0; min-width: 220px; margin-top: 6px; padding: 0.5rem 0; list-style: none; background: var(--brand); border: 0px solid color-mix(in srgb, var(--brand) 80%, black); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 999999; } .main-menu li ul { display: none; } .main-menu li.open > ul { display: block; } .main-menu .menu-level li:hover > ul { display: block; } .main-menu .menu-level li ul li { display: block; } .main-menu .menu-level li ul a { display: block; padding: 0.6rem 0.6rem; color: var(--brand-contrast); text-decoration: none; border-radius: 10px; margin: 0 12px; transition: background var(--tr), transform var(--tr); } .main-menu .menu-level li ul a:hover { background: color-mix(in srgb, var(--brand) 85%, black); opacity: 1; } /* ========================================= MENU – TAP FIX (SAFE) ========================================= */ .main-menu a, .mobile-menu a, .mobile-menu .row, .mobile-menu .row.link { -webkit-tap-highlight-color: transparent; } /* focus bez modrého outline */ .main-menu a:focus, .main-menu a:focus-visible, .mobile-menu a:focus, .mobile-menu a:focus-visible { outline: none; box-shadow: none; } /* ========================================= RIGHT SIDE ========================================= */ .header-right { display: flex; align-items: center; gap: 0.6rem; } .icon { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; } /* ========================================= LANGUAGE SWITCH – TYPO CONNECT ========================================= */ .lang-switch { display: flex; gap: 0.35rem; } .lang-switch a { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.55rem; border: 1px solid color-mix(in srgb, var(--nav-text) 60%, transparent); border-radius: 6px; color: var(--nav-text); font-size: 0.85rem; line-height: 1.2; text-decoration: none; } .lang-switch a:hover { background: color-mix(in srgb, var(--nav-text) 15%, transparent); } /* ========================================= MOBILE BAR (TYPO CONNECT) ========================================= */ .mobile-bar { display: none; } /* ========================================= MOBILE HEADER ========================================= */ @media (max-width: 768px) { .main-menu, .lang-switch, .header-left { display: none; } .header-flex { padding: 14px 0; } .mobile-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 46px; padding: 0 10px; width: 100%; font-size: 1rem; line-height: 1.4; } .mobile-bar > *:first-child { justify-self: start; } .mobile-bar > *:last-child { justify-self: end; } .mobile-logo { justify-self: center; display: flex; align-items: center; justify-content: center; } .mobile-logo img { height: 54px; display: block; } .icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: var(--nav-text); cursor: pointer; font-size: inherit; line-height: 1; } .icon-btn svg { width: 22px; height: 22px; display: block; } .desktop-only { display: none !important; } /* žádné hover efekty na mobile */ .icon-btn:hover, .icon-btn:active, .nav-toggle:hover, .nav-toggle:active { background: transparent; transform: none; } } /* ========================================= MOBILE MENU (TYPO CONNECT) ========================================= */ @media (max-width: 768px) { .mobile-menu ul { margin: 0; padding: 0; list-style: none; } .mobile-menu .row { position: relative; display: flex; align-items: center; width: 100%; padding: 1.1rem 1rem; font-size: 1.1rem; font-weight: 500; line-height: 1.4; color: var(--brand); text-decoration: none; background: transparent; border-bottom: 1px solid var(--border); } /* arrow */ .mobile-menu .row.next::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.625rem; height: 0.625rem; transform: translateY(-50%) rotate(45deg); border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); } .mobile-menu { box-shadow: var(--shadow); } } /* ========================================= SUBMENU PANELS (TYPO CONNECT – 1:1) ========================================= */ @media (max-width:768px){ .mobile-menu-inner { position: relative; overflow: hidden; } .mobile-menu__list { position: relative; z-index: 1; } .mobile-menu .panel { position: relative; background: var(--surface); display: none; z-index: 5; transform: translateX(100%); transition: transform var(--tr-slow) ease; font-size: 1rem; line-height: 1.4; } .mobile-menu .site-container{ padding:0; max-width:none; } .mobile-menu .panel.is-active { display: block; transform: translateX(0); } .mobile-menu .panel-head { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 12px; border-bottom: 1px solid var(--border); font-size: inherit; line-height: inherit; } .mobile-menu .back { display: inline-flex; align-items: center; gap: 0.375rem; height: 42px; padding: 0 0.625rem; border: 1px solid var(--border); border-radius: var(--btn-radius); background: var(--surface-soft); color: var(--brand); font-size: 0.875rem; /* UI prvok – nechávame */ line-height: 1.2; font-weight: 600; cursor: pointer; } .mobile-menu .row.link { color: var(--brand); } .mobile-menu a { text-decoration: none; } .mobile-menu li { margin: 0 .5rem; } .mobile-lang { padding: 16px; } .mobile-lang-switch { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 16px; border-radius: 6px; font-size: 0.95rem; line-height: 1.3; font-weight: 600; text-decoration: none; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); } } /* 🔒 vypne všetky default hover/active štýly */ .mobile-lang-switch:hover, .mobile-lang-switch:focus, .mobile-lang-switch:active, .mobile-lang-switch:visited { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); text-decoration: none; } /* 🔥 FIX – mobile menu nesmie dediť global section spacing */ .mobile-menu section { margin: 0; } /* ========================================= HAMBURGER ========================================= */ .nav-toggle { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--btn-radius); border: 1px solid color-mix(in srgb, var(--nav-text) 35%, transparent); background: transparent; color: var(--nav-text); cursor: pointer; transition: background-color var(--tr), border-color var(--tr); } /* bars */ .nav-toggle .bar { position: absolute; width: 18px; height: 2px; background: currentColor; transition: transform var(--tr), opacity var(--tr); will-change: transform, opacity; } .nav-toggle .bar:nth-child(1) { transform: translateY(-6px); } .nav-toggle .bar:nth-child(2) { transform: translateY(0); } .nav-toggle .bar:nth-child(3) { transform: translateY(6px); } /* ACTIVE → X */ .nav-toggle.active .bar:nth-child(1) { transform: rotate(45deg); } .nav-toggle.active .bar:nth-child(2) { opacity: 0; } .nav-toggle.active .bar:nth-child(3) { transform: rotate(-45deg); } /* hover (jemný, systémový) */ .nav-toggle:hover { background: color-mix(in srgb, var(--nav-text) 8%, transparent); } /* ========================================= DROPDOWN (MOBILE MENU / SEARCH) ========================================= */ .mobile-drop[hidden] { display: none; } .mobile-drop { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--tr), transform var(--tr); will-change: opacity, transform; } .mobile-drop[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ========================================= MOBILE SEARCH ========================================= */ .mobile-search { display: flex; gap: 0.5rem; padding: 0.75rem; } .mobile-search input { flex: 1; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: var(--btn-radius); background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1.4; transition: border-color var(--tr), box-shadow var(--tr); } /* focus */ .mobile-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); } /* ========================================= BUTTONS (GLOBAL – CLEAN + CONSISTENT) ========================================= /* button, .btn { background: var(--btn-bg); color: var(--btn-text); padding: 0.7rem 1.05rem; border-radius: var(--btn-radius); border: none; font-size: 1rem; line-height: 1.4; font-weight: 500; cursor: pointer; /* hover */ button:hover, .btn:hover { opacity: .9; } /* focus */ button:focus-visible, .btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* disabled */ button:disabled, .btn:disabled { opacity: .6; cursor: not-allowed; } /* ========================================= BREADCRUMBS (GLOBAL – FIXED) ========================================= */ .breadcrumb { max-width: var(--container); margin: 1.25rem 0 1.25rem; padding: 0; font-size: 0.95rem; line-height: 1.4; color: color-mix(in srgb, var(--text) 65%, transparent); } /* odkazy */ .breadcrumb a, .breadcrumb a:visited { color: var(--primary); text-decoration: none; font-weight: 500; } /* hover */ .breadcrumb a:hover { text-decoration: underline; } /* focus */ .breadcrumb a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* separátor */ .breadcrumb span, .breadcrumb a + a::before { content: "›"; color: color-mix(in srgb, var(--text) 35%, transparent); } /* current */ .breadcrumb .current { font-weight: 600; color: var(--text); } /* odkazy */ .breadcrumb a, .breadcrumb a:visited { color: inherit; text-decoration: none; font-weight: 500; } /* hover */ .breadcrumb a:hover { text-decoration: underline; } /* focus */ .breadcrumb a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* separátor */ .breadcrumb span, .breadcrumb a + a::before { content: "›"; color: color-mix(in srgb, var(--text) 35%, transparent); } /* current */ .breadcrumb .current { font-weight: 600; color: var(--text); } /* ========================================= DARK MODE ========================================= */ body.a11y-dark .breadcrumb a, body.a11y-dark .breadcrumb a:visited { color: #fff; /* 🔥 bílé */ } /* ========================================= MOTION OFF – NO UNDERLINE ========================================= */ body.a11y-motion-off .breadcrumb a:hover, body.a11y-motion-off .breadcrumb a:focus, body.a11y-motion-off .breadcrumb a:active { text-decoration: none !important; } /* ============================================================ LAYOUT (GLOBAL – CLEAN + CONSISTENT) ============================================================ */ .layout { min-height: 100vh; display: flex; flex-direction: column; font-size: 1rem; line-height: 1.6; } .layout-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; } .layout-main { flex: 1; min-width: 0; } /* DESKTOP */ .layout-main{ padding-bottom: 3rem; } /* MOBILE */ @media (max-width: 768px){ .layout-main{ padding-bottom: 2rem; } } /* ============================================================ FOOTER (GLOBAL – CLEAN / SYSTEM ALIGNED) ============================================================ */ /* ========================================= ROOT ========================================= */ .site-footer { border-top: 1px solid var(--border); padding: 1.5rem 0; /* 24px → rem */ font-size: 0.875rem; line-height: 1.5; color: var(--muted); } .site-footer { margin-top: auto; } /* ========================================= LAYOUT ========================================= */ .footer-flex { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; /* 20px → rem */ flex-wrap: wrap; } /* LEFT */ .footer-left { white-space: nowrap; } /* CENTER */ .footer-center { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; text-align: center; } /* ========================================= FOOTER LINKS – 2 ROWS ========================================= */ .footer-center{ flex-direction: column; /* 🔥 zásadní změna */ gap: .35rem; } .footer-links-row{ display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center; margin-bottom:.5rem; } /* MOBILE */ @media (max-width:768px){ .footer-links-row{ margin-bottom:2rem; } } /* ========================================= LINKS ========================================= */ /* base + visited fix */ .footer-center a, .footer-center a:visited { color: var(--muted); text-decoration: none; font-size: inherit; line-height: inherit; } /* hover */ .footer-center a:hover { color: var(--link); text-decoration: underline; } /* focus */ .footer-center a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ========================================= RIGHT (SOCIAL / ICONS) ========================================= */ .footer-right { display: flex; align-items: center; gap: 0.75rem; /* 12px → rem */ } /* ========================================= ICON LINKS ========================================= */ .footer-right a { display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; /* 34px → rem */ height: 2.125rem; border-radius: var(--btn-radius); background: var(--surface); color: var(--muted); border: 1px solid var(--border); text-decoration: none; transition: background var(--tr), color var(--tr), border-color var(--tr); } /* hover */ .footer-right a:hover { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); } /* icon */ .footer-right svg { width: 1rem; height: 1rem; fill: currentColor; } /* ========================================= DIVIDER ========================================= */ .footer-divider { width: 100%; height: 1px; margin: 1rem 0; background: color-mix(in srgb, var(--border) 70%, transparent); } /* ========================================= CIVILO NOTE ========================================= */ .footer-powered-center { max-width: 32.5rem; /* 520px → rem */ margin: 0 auto; text-align: center; font-size: 0.75rem; line-height: 1.4; opacity: 0.6; } /* ========================================= TABLET (≤ 1024px) – CENTER FOOTER ========================================= */ @media (max-width: 1024px){ .footer-flex { justify-content: center; text-align: center; } .footer-left { width: 100%; text-align: center; white-space: normal; } .footer-center { justify-content: center; width: 100%; } .footer-right { justify-content: center; width: 100%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 640px) { .footer-flex { flex-direction: column; text-align: center; } .footer-right { justify-content: center; } } /* ========================================= UNIVERSAL 2-COLUMN LAYOUT (FINAL) ========================================= */ .layout--two-cols{ display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:2rem; align-items:start; height:auto !important; min-height:0 !important; } .layout-wrapper, .layout-main{ min-height:0; } /* fallback bez :has */ .layout--two-cols:not(:has(.layout-side)) { display: block; } /* main */ .layout--two-cols .layout-main { min-width: 0; } /* sidebar */ .layout--two-cols .layout-side { position: sticky; top: 1.5rem; align-self: start; } /* ========================================= SIDEBAR BOX ========================================= */ .contact-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); } /* headings */ .contact-box h2{ padding-bottom:1.5rem; border-bottom:1px solid var(--border); } /* headings */ .contact-box h3{ margin:1.5rem 0 1rem; } .contact-box--links h3{ margin:0 0 1rem; } .contact-box h4 { margin: 1.25rem 0 .5rem; font-size: .95rem; } .layout-side .contact-box{ margin:0; } .layout-side .contact-box + .contact-box{ margin-top:1rem; } .side-widgets{ display:flex; flex-direction:column; margin-top:1rem; gap:1rem; } /* ========================================= RESPONSIVE – TABLET ========================================= */ @media (max-width: 1024px){ .layout--two-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 0.2rem; } } /* ========================================= RESPONSIVE – MOBILE ========================================= */ @media (max-width: 960px){ .layout--two-cols { grid-template-columns: 1fr; } .layout--two-cols .layout-side { position: static; margin-top: 0.2rem; } } /* ========================================= CONTACT WORKERS – UNIFIED (FINAL FIX) ========================================= */ .contact-workers { list-style: none; padding: 0; margin: 0; } /* ================= ITEM ================= */ .contact-workers li, .contact-workers .contact-person { padding: .9rem 0; border-bottom: 1px solid var(--border); } .contact-workers li:last-child, .contact-workers .contact-person:last-child { border-bottom: none; } /* ================= HEAD (AVATAR + TEXT) ================= */ .person-head{ display:flex; gap:.75rem; align-items:center; margin-bottom:1rem; } /* ================= AVATAR ================= */ .person-avatar{ width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0; } .person-avatar img{ width:100%; height:100%; object-fit:cover; } /* fallback avatar */ .person-avatar.placeholder{ background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.9rem; } /* ================= META ================= */ .person-meta{ display:flex; flex-direction:column; } /* ================= NAME ================= */ .contact-workers strong, .contact-workers .person-name { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; margin:0; } /* ================= ROLE ================= */ .contact-workers small, .contact-workers .person-role { font-size: .8rem; color: var(--muted); margin-top:.15rem; margin-bottom:0; } /* ================= LINKS ================= */ .contact-workers a, .contact-workers .person-link { display: inline-flex; align-items: center; gap: .4rem; font-size: rem; color: var(--link); text-decoration: none; transition: color var(--tr); } /* links wrapper */ .contact-workers .person-links { display: flex; flex-direction: column; align-items: flex-start; } /* hover */ .contact-workers a:hover, .contact-workers .person-link:hover { color: var(--link-hover); } .contact-divider { margin: 0rem 0 0rem; border-top: 1px solid var(--border); opacity: .8; } /* ========================================= OFFICE HOURS – FINAL SYSTEM ========================================= */ /* reset list */ .contact-hours{ list-style: none; margin: 0; padding: 0; } /* row */ .contact-hours li{ display: flex; align-items: center; gap: .5rem; padding: .35rem 0; } /* TODAY ROW */ .contact-hours li.is-today{ font-weight: 600; background: rgba(34, 197, 94, 0.10); color: var(--text); border-left: 3px solid rgba(34, 197, 94, 0.6); padding: .45rem .7rem; border-radius: 8px; } /* ========================================= TODAY BADGE ========================================= */ .today-badge{ margin-left: auto; padding: .25rem .7rem; font-size: .85rem; font-weight: 600; border-radius: 999px; background: rgba(34, 197, 94, 0.15); color: #166534; border: 1px solid rgba(34, 197, 94, 0.25); } /* ========================================= RELATED – BUTTON ========================================= */ .related-all { margin: 1.25rem 0 0; } .related-all a { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem; font-size:.85rem; font-weight:500; line-height:1.4; color:var(--brand); border:1px solid var(--border); border-radius:999px; background:var(--surface); text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease; } /* arrow */ .related-all a::after { content:""; width:.55rem; height:.55rem; transform:rotate(45deg); border-top:2px solid currentColor; border-right:2px solid currentColor; transition:transform .15s ease; } /* hover */ .related-all a:hover { transform:translateY(-1px); border-color:var(--brand); background:var(--surface-hover, rgba(0,0,0,.03)); box-shadow:0 6px 16px rgba(0,0,0,.08); color:var(--brand-dark); } /* active */ .related-all a:active { transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.06); } .contact-box.side-related h3{ margin-top:0; } /* ============================================================ CIVILO – DETAIL CONTENT (FINAL CLEAN) ============================================================ */ /* obmedzenie šírky len pre článok */ .layout-main .editor-content { max-width: 760px; } .meta-archived{ margin: .75rem 0; padding: .5rem .75rem; font-size: .85rem; font-weight: 500; border-radius: 6px; background: color-mix(in srgb, var(--border) 40%, transparent); color: var(--muted); } /* ====================== EDITOR CONTENT (FINAL) ====================== */ .editor-content { margin-top: 2rem; font-size: 1rem; line-height: 1.6; letter-spacing: .01em; color: var(--text); } /* ---- HEADINGS ---- */ .editor-content h1 { font-size: 1.9rem; line-height: 1.25; margin: 2rem 0 1rem; color: var(--text); } .editor-content h2 { font-size: 1.45rem; line-height: 1.3; margin: 1.75rem 0 .75rem; padding-left: .75rem; border-left: 4px solid var(--brand); color: var(--text); } .editor-content h3 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; color: var(--text); } /* ---- TEXT ---- */ .editor-content p { margin: .85rem 0; } /* ---- TABLE - RESPONSIVE ---- */ .editor-content table{ width:100%; border-collapse:collapse; margin:1rem 0; } /* scroll iba keď je tabuľka širšia */ .editor-content table{ max-width:100%; } .editor-content th, .editor-content td{ border:1px solid var(--border); padding:.5rem .6rem; text-align:left; } .editor-content th{ background:var(--surface-soft); font-weight:600; } /* ---- LINKS ---- */ .editor-content a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; transition: color var(--tr); } .editor-content a:hover { color: var(--link-hover); text-decoration: none; } .editor-content a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ---- LISTS ---- */ .editor-content ul, .editor-content ol { margin: .75rem 0 .75rem 1.5rem; padding: 0; } .editor-content li { margin: .35rem 0; } .editor-content li::marker { color: var(--link); font-weight: 600; } /* ---- BLOCKQUOTE ---- */ .editor-content blockquote { margin: 1.5rem 0; padding: .85rem 1rem; border-left: 4px solid var(--brand); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font-style: italic; } /* ---- CODE ---- */ .editor-content pre { margin: 1.25rem 0; padding: .85rem 1rem; background: var(--surface-soft); color: var(--text); border-radius: var(--radius); overflow-x: auto; font-size: .9rem; line-height: 1.55; } /* ---- IMAGES ---- */ .editor-content img { max-width: 100%; height: auto; margin: 1rem 0; border-radius: var(--radius); } /* ---- TABLES ---- */ .editor-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; } .editor-content th, .editor-content td { border: 1px solid var(--border); padding: .5rem .6rem; text-align: left; } .editor-content th { background: color-mix(in srgb, var(--text) 6%, transparent); font-weight: 600; } /* ============================================================ CATEGORY GRID (FINAL) ============================================================ */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; margin-top: 1.5rem; } .category-card { position: relative; display: block; padding: 1.75rem 2.5rem 1.75rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--brand); font-weight: 500; font-size: 1rem; line-height: 1.4; transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr); } /* hover */ .category-card:hover { color: var(--brand-dark); border-color: var(--border); box-shadow: var(--shadow); } @media (max-width:768px){ .category-card{ font-size:1.1rem; } .category-grid{ gap:.8rem; } } /* ========================================= ARROW ========================================= */ .category-card::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 0.625rem; height: 0.625rem; transform: translateY(-50%) rotate(45deg); border-top: 2px solid currentColor; /* 🔥 */ border-right: 2px solid currentColor; /* 🔥 */ transition: transform var(--tr), border-color var(--tr); } /* ============================================================ CMP Cookies ============================================================ */ .cmp-open, .cmp-open body { overflow: hidden; } .civilo-cookie-banner{ position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 999999; isolation: isolate; } .civilo-cookie-banner::before{ content:""; position:absolute; left:-1rem; right:-1rem; bottom:-1rem; height:200px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events:none; z-index:-1; /* POD obsah */ } .civilo-cookie-bar { max-width: 860px; margin: 0 auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; box-shadow: var(--shadow); } .civilo-cookie-text { font-size: .95rem; line-height: 1.45; color: var(--text); } .civilo-cookie-text strong { font-weight: 500; } .civilo-cookie-text a { color: var(--link); text-decoration:underline; } .civilo-cookie-actions { display: flex; gap: .625rem; flex-wrap: wrap; } .civilo-cookie-btn:focus-visible, .civilo-cookie-icon-close:focus-visible, .civilo-cookie-row input:focus-visible { outline: 3px solid rgba(255,255,255,.65); outline-offset: 2px; } /* ========================================= COOKIE BUTTONS (FINAL CLEAN) ========================================= */ /* BASE = jen reset */ .civilo-cookie-btn{ appearance:none; font:inherit; cursor:pointer; } /* PRIMARY */ .civilo-cookie-btn-primary{ background:var(--btn-bg, var(--brand)); color:var(--btn-text, #fff); border:1px solid var(--btn-bg, var(--brand)); border-radius: var(--btn-radius); padding: .7rem 1rem; font-size:.9rem; font-weight:500; } .civilo-cookie-btn-primary:hover{ background:color-mix(in srgb, var(--btn-bg, var(--brand)) 85%, var(--surface)); } /* SECONDARY */ .civilo-cookie-btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--border); border-radius: var(--btn-radius); padding: .7rem 1rem; font-size:.9rem; font-weight:500; opacity:.85; } .civilo-cookie-btn-secondary:hover{ background:var(--surface-soft); border-color:var(--text); opacity:1; } .civilo-cookie-modal { position: fixed; inset: 0; z-index: 10000; display: none; } .civilo-cookie-modal.is-open { display: block; } .civilo-cookie-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .civilo-cookie-dialog { position: relative; width: min(92vw, 460px); margin: 10vh auto 0; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; outline: none; } .civilo-cookie-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* ========================= HEADER + DIVIDER ========================= */ .civilo-cookie-dialog h3 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight:500; } /* divider */ .civilo-cookie-dialog h3::after { content: ""; display: block; width: 100%; height: 1px; background: var(--border); margin: 1.25rem 0 0; } /* ========================= DESCRIPTION (menší + spacing) ========================= */ .civilo-cookie-desc { font-size: .85rem; line-height: 1.5; color: var(--text-soft, var(--text)); opacity: .8; margin: .75rem 0 1rem; } /* ========================= SECTION SPACING CLEAN ========================= */ .civilo-cookie-row { margin: 1rem 0; } /* text block uvnitř */ .civilo-cookie-info strong { display: block; font-size: .95rem; margin-bottom: .15rem; } .civilo-cookie-info p { margin: 0; font-size: .8rem; line-height: 1.4; opacity: .75; } .civilo-cookie-icon-close { appearance: none; border: 0; font: inherit; font-size: 1.5rem; cursor: pointer; } .civilo-cookie-modal-body { margin-top: 1rem; } .civilo-cookie-modal-body p { margin: 0 0 1rem; line-height: 1.55; } .civilo-cookie-row { display: flex; align-items: center; gap: .75rem; margin: .9rem 0; } .civilo-cookie-modal-actions { display: flex; justify-content: flex-end; gap: .625rem; margin-top: 1.25rem; flex-wrap: wrap; } /* ========================= SECTION CARD ========================= */ .civilo-cookie-row { background: var(--surface-alt, rgba(0,0,0,0.03)); /* fallback pro theme */ border: 1px solid var(--border); border-radius: 10px; padding: .75rem .9rem; margin: 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* ========================= TEXT INSIDE CARD ========================= */ .civilo-cookie-info { max-width: 80%; } .civilo-cookie-info strong { display: block; font-size: .95rem; margin-bottom: .2rem; font-weight:500; } .civilo-cookie-info p { margin: 0; font-size: .8rem; line-height: 1.4; opacity: .75; } /* ========================= TOGGLE SWITCH (FIX) ========================= */ .civilo-cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* wrapper */ .civilo-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; } /* hide native checkbox */ .civilo-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } /* slider */ .civilo-slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: var(--tr); } /* knob */ .civilo-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: var(--tr); } /* ON state */ .civilo-switch input:checked + .civilo-slider { background: var(--brand); } .civilo-switch input:checked + .civilo-slider::before { transform: translateX(16px); } /* focus */ .civilo-switch input:focus-visible + .civilo-slider { outline: var(--focus-ring); outline-offset: 2px; } @media (max-width: 640px) { .civilo-cookie-bar { padding: 1rem; } .civilo-cookie-actions, .civilo-cookie-modal-actions { width: 100%; } .civilo-cookie-actions .civilo-cookie-btn, .civilo-cookie-modal-actions .civilo-cookie-btn { flex: 1 1 100%; } .civilo-cookie-dialog { margin-top: 8vh; } } /* ========================= HARD RESET – NO FOCUS ========================= */ .civilo-cookie-dialog:focus, .civilo-cookie-dialog:focus-visible, .civilo-cookie-btn:focus, .civilo-cookie-btn:focus-visible, .civilo-cookie-icon-close:focus, .civilo-cookie-icon-close:focus-visible, .civilo-cookie-row input:focus, .civilo-cookie-row input:focus-visible, .civilo-switch input:focus, .civilo-switch input:focus-visible, .civilo-switch input:focus-visible + .civilo-slider { outline: none !important; box-shadow: none !important; } /* ============================================================ LEGAL LAYOUT (FINAL – SYSTEM + RESPONSIVE) ============================================================ */ .legal-layout{ display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:2rem; align-items:start; } .legal-main{ min-width:0; } /* ========================================= CONTENT ========================================= */ .legal-main h2{ margin-top:1.25rem; } .legal-main h3{ margin-top:1.25rem; } .legal-updated{ font-size:.9rem; line-height:1.4; opacity:.6; margin-bottom:1rem; } /* ========================================= NAV ========================================= */ .legal-nav{ padding:0; } .legal-nav-title{ margin:0 0 .75rem; } .legal-nav-list{ list-style:none; margin:0; padding:0; } .legal-nav-list li + li{ margin-top:.5rem; } /* ========================================= LINK CARD ========================================= */ .legal-nav-link{ display:block; padding:.75rem .9rem; border-radius:var(--btn-radius); border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none; line-height:1.4; transition: background var(--tr), color var(--tr), border-color var(--tr); } .legal-nav-link:hover{ background:var(--surface-soft); border-color:var(--border); } .legal-nav-link:hover{ background:var(--surface-soft); border-color:var(--border); } /* ========================================= ACTIVE ========================================= */ .legal-nav-link.is-active{ background:var(--brand); border-color:var(--brand); color:var(--brand-contrast); font-weight:600; } .legal-nav-link.is-active:hover{ background:var(--brand); border-color:var(--brand); color:var(--brand-contrast); } /* ========================================= TABLET (≤ 1024px) ========================================= */ @media (max-width:1024px){ .legal-layout{ grid-template-columns:minmax(0, 1fr) 240px; gap:1.5rem; } } /* ========================================= MOBILE (≤ 900px) ========================================= */ @media (max-width:900px){ .legal-nav-title{ display:none; } .legal-layout{ display:flex; flex-direction:column; gap:1rem; } .legal-sidebar{ order:-1; position:static; width:100%; } .legal-nav{ width:100%; } /* SCROLL CONTAINER */ .legal-nav-list{ display:block; white-space:nowrap; padding:0 0 .25rem; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } .legal-nav-list::-webkit-scrollbar{ display:none; } /* ITEMS */ .legal-nav-list li{ display:inline-block; margin-right:.2rem; } .legal-nav-list li:last-child{ margin-right:0; } /* TAB */ .legal-nav-link{ display:inline-flex; align-items:center; height:36px; padding: 0.7rem; font-size:.85rem; white-space:nowrap; } } /* ========================================= GALLERY – LIST ========================================= */ .gallery-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:.9rem; margin-top:20px; } @media (max-width:768px){ .gallery-list{ gap:.8rem; } } .gallery-card{ display:block; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); color:inherit; text-decoration:none; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); } .gallery-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); } .gallery-thumb{ aspect-ratio:4/3; overflow:hidden; } .gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-meta{ padding:14px; } .gallery-meta h3{ margin:0; font-size: 1.2rem; color: var(--brand); transition: color var(--tr); } /* hover celé karty → změní title */ .gallery-card:hover .gallery-meta h3, .gallery-card:focus-visible .gallery-meta h3{ color: var(--brand-dark); } /* ========================================= GALLERY – GRID (RESPONSIVE PRO) ========================================= */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 1rem; } .gallery-item { display: block; border-radius: 10px; overflow: hidden; } /* lepšie než fixed height */ .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .25s ease; } /* hover (len desktop) */ @media (hover: hover) { .gallery-item:hover img { transform: scale(1.05); } } /* TABLET */ @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } } /* DESKTOP */ @media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:20px; } /* PRIDAJ SEM */ .gallery-item img { aspect-ratio: 4 / 3; } } /* ========================================= LIGHTBOX ========================================= */ .lightbox { position: fixed; inset: 0; background: #000; display: none; align-items: center; justify-content: center; z-index: 999999; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); transform: translateZ(0); } body.lightbox-open { background: #000 !important; } .lightbox.active { display: flex; pointer-events: auto; } .lightbox img { max-width: 92%; max-height: 88%; border-radius: 10px; } /* buttons */ .lb-prev, .lb-next, .lb-close { position: absolute; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; } .lb-close { top: 20px; right: 20px; } .lb-prev { left: 20px; } .lb-next { right: 20px; } /* mobile */ @media (max-width: 768px) { .lb-prev, .lb-next { display: none; } .lightbox img { will-change: transform; } } /* ========================================= CONTACT PAGE ========================================= */ .contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; } @media (max-width:768px){ .contact-cards{ gap: .8rem; } } .contact-cards{ margin-top: 1.5rem; } .contact-col{ padding:1.25rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); } .contact-col h3{ margin-bottom: .75rem; } .contact-row{ margin: 0; } .contact-row--last{ margin-bottom: .75rem; } @media (max-width: 640px){ .contact-cards{ grid-template-columns: 1fr; } } .contact-card{ padding:1.25rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); } /* ========================================= CONTACT – LINKS ========================================= */ .contact-col a, .contact-card a, .contact-row a{ color: var(--brand); text-decoration: none; transition: color var(--tr); } .contact-col a:hover, .contact-card a:hover, .contact-row a:hover, .contact-col a:focus-visible, .contact-card a:focus-visible, .contact-row a:focus-visible{ color: var(--brand-dark); text-decoration: underline; } /* ========================================= CONTACT - MAP ========================================= */ .contact-map iframe { width: 100%; height: 320px; border: none; border-radius: 12px; } /* ========================================= EVENTS – CARDS ========================================= */ .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: .9rem; } @media (max-width:768px){ .events-grid{ gap: .8rem; } } .event-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:var(--tr); } .event-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .event-card-image{ width:100%; height:240px; overflow:hidden; background: var(--surface-soft); } .event-card-image img{ width:100%; height:100%; object-fit:cover; display:block; } .event-card-body{ padding:1rem; } .event-card h3{ margin:0 0 .4rem 0; font-size:1.2rem; color:var(--brand); transition:color var(--tr); } /* hover celé karty */ .event-card:hover h3{ color:var(--brand-dark); text-decoration:underline; } .event-card a{ text-decoration:none; color:inherit; } .event-meta{ font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:.2rem; } .event-flags-inline{ margin-top:.5rem; font-size:.8rem; color: var(--muted); display:flex; flex-wrap:wrap; gap:.4rem; } .event-flags-inline span{ padding:.2rem .5rem; border-radius:6px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--text); } /* ========================================= EVENT ASIDE ========================================= */ .event-aside{ background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.4rem; } /* rows */ .event-row{ margin-bottom: 1rem; } /* label */ .event-label{ display:block; font-size:.75rem; color: var(--muted); margin-bottom:.25rem; } /* value */ .event-value{ font-size:.95rem; font-weight:500; color: var(--text); } /* date highlight */ .event-date .event-value{ font-size:1.05rem; font-weight:600; } /* separator */ .event-sep{ margin: 0 .35rem; opacity:.6; } .event-flags{ display:flex; flex-direction:column; gap:.4rem; margin-top:.75rem; } .event-flag{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text); } .event-icon{ display:flex; align-items:center; justify-content:center; padding:6px; border-radius:8px; background:var(--surface-soft); border:1px solid var(--border); flex-shrink:0; } .event-icon svg{ width:16px; height:16px; } /* ========================================= NEWS ========================================= */ .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: .9rem; } /* TABLET */ @media (max-width: 1024px){ .news-grid{ grid-template-columns: repeat(2, 1fr); } } /* MOBILE */ @media (max-width: 640px){ .news-grid{ grid-template-columns: 1fr; } } /* ========================================= NEWS – CARD ========================================= */ .news-card{ display:block; /* 🔥 KLÍČOVÉ */ text-decoration:none; /* 🔥 zruší underline */ color:inherit; /* 🔥 text nebude modrý */ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); transition:var(--tr); padding:1rem; } .news-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } /* TABLET */ @media (max-width: 1024px) { .news-card { padding-bottom: 2.5rem; } } /* MOBILE */ @media (max-width: 768px) { .news-card { padding-bottom: 2rem; } } /* ========================================= NEWS – DATE ========================================= */ .news-date{ display:inline-block; font-size:.75rem; color: var(--text); background: var(--surface-soft); border: 1px solid var(--border); padding:.2rem .45rem; border-radius:6px; margin-bottom:.5rem; } /* ========================================= NEWS – TITLE ========================================= */ .news-card h3{ margin:.3rem 0; line-height:1.3; color:var(--brand); transition:color var(--tr); } .news-card:hover h3{ color:var(--brand-dark); } /* ========================================= NEWS – EXCERPT ========================================= */ .news-excerpt{ font-size:.9rem; color:var(--muted); margin:.4rem 0; } /* ========================================= NEWS – LINK ========================================= */ .news-link{ display:inline-block; margin-top:0.75rem; text-decoration:underline; text-underline-offset:3px; color:var(--brand); transition:color var(--tr); } .news-card:hover .news-link{ color:var(--brand-dark); } /* TABLET */ @media (max-width: 1024px) { .news-link { margin-top: 0.5rem; padding: 0.2rem 0; } } /* MOBILE */ @media (max-width: 768px) { .news-link { margin-top: 0.4rem; padding: 0.15rem 0; } } /* ========================================= ATTACHMENTS ========================================= */ .page-attachments { margin-top: 2rem; } /* ================= SINGLE IMAGE ================= */ .attachment-image-full { margin-top: 10px; border-radius: 12px; overflow: hidden; } .attachment-image-full img { width: 100%; height: auto; display: block; object-fit: cover; } /* ================= GRID ================= */ .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 1rem; } .attachment-image { display: block; border-radius: 10px; overflow: hidden; } /* místo fixed height */ .attachment-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .25s ease; } /* hover jen desktop */ @media (hover: hover) { .attachment-image:hover img { transform: scale(1.05); } } /* ================= TABLET ================= */ @media (min-width: 768px) { .attachments-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } } /* ================= DESKTOP ================= */ @media (min-width: 1200px) { .attachments-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; } } /* ================= FILES ================= */ .attachments-files { margin-top: 1rem; } .attachments-files ul { list-style: none; padding: 0; margin: 0; } .attachments-files li { margin-bottom: 6px; } .attachments-files a { display: inline-block; text-decoration: none; color: var(--color-text, #111); padding: 6px 10px; border-radius: 8px; background: var(--color-surface, #f8fafc); border: 1px solid var(--color-border, #e5e7eb); transition: background .15s ease; } .attachments-files a:hover { background: var(--color-hover, #eef2ff); } /* =============================== QUICK LINKS =============================== */ .quick-links{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; } .quick-link{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); text-decoration:none; color:var(--brand); font-weight:500; font-size:.95rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease; } /* hover */ .quick-link:hover{ transform:translateY(-1px); border-color:var(--brand); box-shadow:0 6px 16px rgba(0,0,0,.06); color:var(--brand-dark); } /* active */ .quick-link:active{ transform:translateY(0); box-shadow:none; } /* text */ .quick-link span{ flex:1; color:inherit; } /* arrow */ .quick-link::after{ content:""; width:.55rem; height:.55rem; transform:rotate(45deg); border-top:2px solid currentColor; border-right:2px solid currentColor; transition:transform .15s ease; } /* ========================================= NEWSLETTER (REFINED / LESS BRAND HEAVY) ========================================= */ .newsletter-box{ padding: 1.5rem; border-radius: var(--radius); /* tmavší neutral místo brand */ background: color-mix(in srgb, var(--surface) 95%, var(--text)); color: var(--text); border: 1px solid var(--border); } @media (max-width: 640px) { .newsletter-box { margin-top: 2rem; } } /* title */ .newsletter-box h3{ margin-bottom: .4rem; color: var(--text); } /* desc */ .newsletter-desc{ margin-bottom: 1rem; color: var(--muted); } /* form */ .newsletter-form{ display: flex; gap: .5rem; } /* input */ .newsletter-input{ flex: 1; padding: .65rem; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); } .newsletter-input:focus{ outline: none; border-color: var(--brand); } /* ========================================= NEWSLETTER INPUT (REFINED) ========================================= */ .newsletter-input{ flex: 1; padding: .7rem .85rem; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.5; transition: border-color var(--tr), box-shadow var(--tr), background var(--tr); } /* placeholder */ .newsletter-input::placeholder{ color: var(--muted); opacity: 1; } /* hover */ .newsletter-input:hover{ border-color: color-mix(in srgb, var(--border) 60%, var(--text)); } /* focus */ .newsletter-input:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); } /* ========================================= NEWSLETTER BUTTON (ISOLATED) ========================================= */ .newsletter-btn{ display:inline-block; font-weight:500; font-size:.95rem; padding:.55rem .85rem; border-radius:var(--btn-radius); border:none; cursor:pointer; /* 🔥 robustní barva */ background: color-mix(in srgb, var(--brand) 92%, var(--surface)); color: var(--brand-contrast); transition: background var(--tr), transform var(--tr), box-shadow var(--tr); } /* hover */ .newsletter-btn:hover{ background: color-mix(in srgb, var(--brand) 85%, var(--surface)); box-shadow: 0 2px 6px rgba(0,0,0,.08); } /* active */ .newsletter-btn:active{ transform: translateY(1px); } /* focus */ .newsletter-btn:focus-visible{ outline: var(--focus-ring); outline-offset: 2px; } /* ========================================= MESSAGES ========================================= */ .newsletter-msg{ padding: .6rem 1rem; border-radius: var(--btn-radius); margin-bottom: 1rem; background: var(--surface-soft); border: 1px solid var(--border); } /* legal */ .newsletter-legal{ font-size: .8rem; margin-top: .5rem; color: var(--muted); } /* mobile */ @media (max-width: 640px){ .newsletter-form{ flex-direction: column; } .newsletter-btn{ padding: .7rem .85rem; /* stejné jako input */ font-size: 1rem; /* stejné */ line-height: 1.5; /* stejné */ } } /* ========================================= WEATHER – SYSTEM COLOR (CIVILO) ========================================= */ .weather-widget{ width:100%; max-width:100%; padding:1.2rem; border-radius:20px; background: linear-gradient( 135deg, color-mix(in srgb, var(--brand) 85%, black), color-mix(in srgb, var(--brand) 70%, white) ); color: var(--brand-contrast); } /* TITLE */ .weather-title{ font-size:1rem; font-weight:600; margin-bottom:.6rem; opacity:.9; } /* TOP */ .weather-top{ display:flex; justify-content:space-between; align-items:center; } /* LEFT */ .weather-left{ display:flex; flex-direction:column; } /* DAY */ .weather-day{ font-size:.8rem; opacity:.7; } /* TEMP */ .weather-temp{ font-size:3rem; font-weight:700; line-height:1; } /* META */ .weather-meta{ font-size:.9rem; margin-top:.2rem; } /* RANGE */ .weather-range{ font-size:.8rem; opacity:.7; } /* ICON */ .weather-right img{ width:92px; height:92px; } /* TOMORROW */ .weather-tomorrow{ margin-top:1rem; padding-top:.8rem; border-top:1px solid color-mix(in srgb, var(--brand-contrast) 30%, transparent); } /* ROW */ .weather-row{ display:flex; align-items:center; gap:.6rem; } /* SMALL ICON */ .weather-icon-box.small{ width:60px; height:60px; } .weather-icon-box.small img{ width:100%; height:100%; } /* TEXT */ .weather-text{ font-size:.9rem; } /* ========================================= NAMEDAY WIDGET (SPLIT CLEAN) ========================================= */ .nameday-widget{ border-radius:var(--radius); overflow:hidden; /* 🔥 aby fungovalo rozdelenie */ background:var(--surface); border:1px solid var(--border); } /* ========================= TOP (DATE) ========================= */ .nameday-date{ padding:.85rem 1.1rem; font-size:1.2rem; font-weight:500; color:var(--text); background:linear-gradient( to right, color-mix(in srgb, var(--surface-soft) 100%, var(--text) 6%), var(--surface) ); border-bottom:1px solid var(--border); } /* zruš starý divider */ .nameday-date::after{ display:none; } /* ========================= BOTTOM (CONTENT) ========================= */ .nameday-content{ padding:.85rem 1.1rem; background:linear-gradient( to right, color-mix(in srgb, var(--surface-soft) 100%, var(--text) 6%), var(--surface) ); } /* ROW */ .nameday-row{ display:flex; justify-content:space-between; align-items:center; font-size:1rem; margin-top:.45rem; } .nameday-row:first-child{ margin-top:0; } /* LABEL */ .nameday-label{ color:var(--muted); } /* NAME */ .nameday-row strong{ color:var(--text); font-weight:600; font-size:1.1rem; } /* ========================================= WASTE WIDGET ========================================= */ .waste-widget{ padding:1rem 1.1rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); position:relative; overflow:hidden; } /* TITLE */ .waste-title{ font-size:1rem; font-weight:600; margin-bottom:.5rem; color:var(--text); } /* LIST */ .waste-list{ margin:0; padding-left:1rem; line-height:1.6; } /* ITEM */ .waste-list li{ margin-bottom:.3rem; color:var(--text); } /* TYPE (napr. plast, komunál) */ .waste-list li strong{ color:var(--brand); font-weight:600; } /* NOTE */ .waste-note{ color:var(--muted); font-style:normal; } /* ========================================= VARIANTY (jemný rozdiel) ========================================= */ /* pevné vývozy */ .waste-fixed{ border-left:3px solid color-mix(in srgb, var(--brand) 70%, transparent); } /* opakované vývozy */ .waste-recur{ border-left:3px solid color-mix(in srgb, var(--brand) 70%, transparent); } .waste-widget::after{ content:""; position:absolute; top:-24px; right:-30px; width:120px; height:120px; opacity:.025; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:contain; transform: rotate(35deg); background-image:url("data:image/svg+xml;utf8,"); } /* ========================================= CHMI WIDGET ========================================= */ .chmi-widget{ padding:1rem 1.1rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); position: relative; overflow: hidden; } .chmi-icon{ position: absolute; top: 50%; right: -40px; width: 220px; height: 220px; transform: translateY(-50%) rotate(25deg); /* 🔥 centrování + otočení */ opacity: 0.05; pointer-events: none; color: var(--text); z-index: 0; } .chmi-icon svg{ width: 100%; height: 100%; } .chmi-widget > *:not(.chmi-icon){ position: relative; z-index: 1; } /* TITLE */ .chmi-title{ font-size:1rem; font-weight:600; margin-bottom:.5rem; } /* EMPTY */ .chmi-empty{ font-size:.95rem; color:var(--muted); } /* LIST */ .chmi-list{ margin:.5rem 0 0; padding-left:0; list-style:none; } /* ITEM */ .chmi-item{ padding:.6rem 0; border-top:1px solid var(--border); } .chmi-item:first-child{ border-top:none; } /* TITLE */ .chmi-item-title{ font-weight:600; font-size:1.2rem; color:var(--text); margin-bottom:.2rem; } /* META */ .chmi-meta{ font-size:.85rem; color:var(--text); } /* TIME */ .chmi-time{ font-size:.85rem; color:var(--text); } /* TEXT */ .chmi-text{ margin-top:.35rem; font-size:.9rem; line-height:1.5; } /* SOURCE */ .chmi-source{ margin-top:.6rem; font-size:.75rem; color:var(--muted); } /* ========================================= CHMI SEVERITY STATES ========================================= */ /* základ – nic */ .chmi-none{} /* Minor */ .chmi-Minor{ border-left: 4px solid #60a5fa; /* modrá */ } /* Moderate */ .chmi-Moderate{ border-left: 4px solid #f59e0b; /* oranžová */ } /* Severe */ .chmi-Severe{ border-left: 4px solid #ef4444; /* červená */ } /* Extreme */ .chmi-Extreme{ border-left: 4px solid #b91c1c; /* tmavá červená */ } /* ========================================= LIST ========================================= */ .board-item{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.25rem 2.5rem 1.25rem 1.25rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr); } @media (max-width:768px){ .board-list .board-item{ flex-direction:column; align-items:flex-start; } .board-list .board-right{ width:100%; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; } .board-list .board-dates, .board-list .board-ref{ text-align:left; width:100%; } } .board-item:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); } .board-list{ display:flex; flex-direction:column; gap:.9rem; } @media (max-width:768px){ .board-list{ gap:.8rem; } } /* LEFT */ .board-left{ flex:1; } .board-files{ display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:500; background: rgba(127,127,127,.12); color: var(--color-text); border: 1px solid var(--color-border); padding:.35rem .7rem; border-radius: 999px; margin-top:.35rem; } .board-list .board-item h3{ font-size:1.2rem; color: var(--brand); transition: color var(--tr); } /* hover celé karty */ .board-list .board-item:hover h3, .board-list .board-item:focus-visible h3{ color: var(--brand-dark); text-decoration: underline; } /* RIGHT */ .board-right{ text-align:right; white-space:nowrap; font-size:.85rem; color:var(--color-muted); } .board-dates{ display:flex; flex-direction:column; } .board-right .board-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; } .board-right .board-meta span{ display:block; } /* ========================================= DOCUMENTS ========================================= */ .board-list .board-item h3.doc-title{ font-size:1.2rem; } .board-item{ display:flex; align-items:center; } .board-filter{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; } .board-filter a{ display:inline-flex; /* 👈 místo inline-block */ align-items:center; /* 👈 vertikálně střed */ justify-content:center; /* 👈 horizontálně střed */ padding:10px 16px; /* 👈 upravíme, aby sedělo */ font-size:0.95rem; line-height:1.2; font-weight:500; border:1px solid var(--border); border-radius:var(--btn-radius); /* 👈 místo 999px */ background:var(--surface); color:var(--text); text-decoration:none; cursor:pointer; transition: border-color var(--tr), box-shadow var(--tr), background var(--tr); } .board-filter a:hover{ border-color:var(--brand); color:var(--brand); } .board-filter a.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; } /* DOCUMENTS – clickable card */ .doc-item{ position: relative; } /* klik přes celou kartu */ .doc-overlay{ position: absolute; inset: 0; z-index: 1; } /* obsah nad overlay */ .doc-item > *{ position: relative; z-index: 2; } /* ========================================= Contact form ========================================= */ /* FLOAT BUTTON */ .contact-bubble{ position:fixed; bottom:20px; left:20px; z-index:99; padding:.95rem 1.4rem; border-radius:999px; /* lepší background */ background: linear-gradient( 180deg, color-mix(in srgb, var(--brand) 92%, #ffffff 8%) 0%, var(--brand) 100% ); color:var(--btn-text, #fff); font-size: 1rem; border:none; cursor:pointer; box-shadow: 0 4px 12px rgba(0,0,0,.15) } /* DIALOG */ .contact-dialog{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:99999; padding:16px; } .contact-title{ margin-bottom: 1rem; } .contact-dialog.hidden{ display:none; } .contact-modal{ background:var(--surface); padding:1.5rem; border-radius:var(--radius); width:100%; max-width:420px; position:relative; border:1px solid var(--border); } /* ========================================= CONTACT FORM – INPUT (unified) ========================================= */ .contact-form input, .contact-form textarea{ width:100%; padding:.7rem .85rem; border-radius:var(--btn-radius); border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:1rem; line-height:1.5; transition: border-color var(--tr), box-shadow var(--tr), background var(--tr); margin-bottom:.75rem; } /* focus */ .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); } /* textarea tweak */ .contact-form textarea{ resize:vertical; min-height:120px; } .contact-form input[type="file"]{ display:none; } .file-btn{ display:inline-block; padding:.6rem .9rem; border-radius:var(--btn-radius); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:.95rem; cursor:pointer; transition:var(--tr); } .file-btn:hover{ background:var(--surface-soft); } .file-btn:active{ transform:translateY(1px); } /* názvy souborů */ .file-names{ font-size:.8rem; color:var(--muted); margin-top:.4rem; margin-bottom:.6rem; } .file-names{ margin-top:.5rem; margin-bottom:.6rem; display:flex; flex-direction:column; gap:.35rem; } .file-item{ display:flex; align-items:center; justify-content:space-between; padding:.35rem .5rem; border-radius:var(--btn-radius); background:var(--surface-soft); border:1px solid var(--border); font-size:.85rem; } .file-remove{ cursor:pointer; border:none; background:var(--surface); /* 🔥 změna */ color:var(--muted); font-size:.9rem; } .contact-hint{ font-size:.8rem; color:var(--muted); margin-top:-.25rem; margin-bottom:.75rem; line-height:1.4; } /* ========================================= BUTTON – PRIMARY (CTA) ========================================= */ .btn.primary{ background:var(--btn-bg, var(--brand)); color:var(--btn-text, #fff); border:1px solid var(--btn-bg, var(--brand)); border-radius:var(--btn-radius); padding:.7rem 1rem; font-size:.9rem; cursor:pointer; transition: background var(--tr), border-color var(--tr), box-shadow var(--tr); } /* hover */ .btn.primary:hover{ background:color-mix(in srgb, var(--btn-bg, var(--brand)) 85%, black); border-color:color-mix(in srgb, var(--btn-bg, var(--brand)) 85%, black); } /* active */ .btn.primary:active{ transform:translateY(1px); } /* focus */ .btn.primary:focus-visible{ outline:var(--focus-ring); } /* ========================================= BUTTON – SECONDARY (outline) ========================================= */ .btn.secondary{ background:transparent; color:var(--text); border:1px solid var(--border); border-radius:var(--btn-radius); padding:.7rem 1rem; font-size:.9rem; cursor:pointer; transition: background var(--tr), border-color var(--tr), color var(--tr); } /* hover */ .btn.secondary:hover{ background:var(--surface-soft); border-color:var(--border); } /* active */ .btn.secondary:active{ background:var(--surface-soft); } /* focus */ .btn.secondary:focus-visible{ outline:var(--focus-ring); } /* honey */ .hp-field{ position:absolute; left:-9999px; } /* ========================================= CONTACT RESULT – UI ========================================= */ .contact-result:empty { display: none; } .contact-result{ margin-top:.75rem; padding:.7rem .9rem; border-radius:var(--btn-radius); border:1px solid var(--border); font-size:.95rem; line-height:1.4; display:flex; align-items:center; gap:.5rem; } /* SUCCESS */ .contact-result.success{ background:color-mix(in srgb, #16a34a 10%, var(--surface)); border-color:color-mix(in srgb, #16a34a 35%, var(--border)); color:#166534; } /* ERROR */ .contact-result.error{ background:color-mix(in srgb, #dc2626 10%, var(--surface)); border-color:color-mix(in srgb, #dc2626 35%, var(--border)); color:#991b1b; } /* ========================================= POLL – SELECTABLE OPTIONS ========================================= */ .poll-option-row{ display:block; position:relative; margin:.5rem 0; cursor:pointer; } /* schovat radio */ .poll-option-row input{ position:absolute; opacity:0; pointer-events:none; } /* UI bar */ .poll-option-ui{ padding:.7rem 1rem; border-radius:10px; background:var(--surface-soft); border:1px solid var(--border); transition: background var(--tr), border-color var(--tr), box-shadow var(--tr); } /* text */ .poll-option-label{ font-size:.95rem; color:var(--text); font-weight:500; } /* hover */ .poll-option-row:hover .poll-option-ui{ background:color-mix(in srgb, var(--brand) 10%, transparent); } /* SELECTED 🔥 */ .poll-option-row input:checked + .poll-option-ui{ background:color-mix(in srgb, var(--brand) 20%, transparent); border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); } /* focus (a11y) */ .poll-option-row input:focus-visible + .poll-option-ui{ outline:var(--focus-ring); } /* ========================================= POLL WIDGET (ponecháš jak máš) ========================================= */ .poll-widget{ margin:1.2rem 0; padding:1.1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); } .poll-title{ font-size:1.4rem; font-weight:600; } .poll-meta{ font-size:.75rem; color:var(--muted); margin-bottom:.5rem; } .poll-form{ margin-top:.6rem; } .poll-option{ display:flex; gap:.5rem; align-items:center; margin:.45rem 0; cursor:pointer; } .poll-option input{ accent-color:var(--brand); } .poll-btn{ margin-top:.6rem; } .poll-info{ font-size:.9rem; color:var(--muted); } /* ========================================= POLL RESULTS – CLEAN (🔥 nový) ========================================= */ .poll-results{ margin-top:1rem; } .poll-results-title{ display:block; margin-bottom:.75rem; font-weight:600; } /* ROW */ .poll-row{ margin:.9rem 0; } /* HEAD (text + %) */ .poll-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.25rem; } /* TEXT */ .poll-label{ font-size:.95rem; font-weight:600; color:var(--text); } .poll-votes{ font-size:.8rem; color:var(--muted); margin-left:.25rem; } .poll-percent{ font-size:.85rem; font-weight:700; color:var(--text); } /* BAR */ .poll-bar{ height:24px; background:var(--surface-soft); border-radius:999px; overflow:hidden; } .poll-bar-fill{ height:100%; background:color-mix(in srgb, var(--brand) 35%, transparent); border-radius:999px; transition:width .3s ease; } /* WINNER */ .poll-row.is-winner .poll-bar-fill{ background:var(--brand); } /* TOTAL */ .poll-total{ margin-top:.75rem; font-size:1.1rem; color:var(--text); } /* ========================================= HOVER / INTERACTION ========================================= */ .poll-row:hover .poll-bar-fill{ background:color-mix(in srgb, var(--brand) 85%, black); } /* ========================================= MOBILE ========================================= */ @media (max-width:768px){ .poll-row{ margin:.7rem 0; } .poll-label{ font-size:.9rem; } .poll-percent{ font-size:.85rem; } } /* ========================================= PAGES ========================================= */ .side-widgets{ display:flex; flex-direction:column; margin-bottom:1rem; } /* jen když je jeden widget */ .side-widgets:has(.side-widget:only-child){ margin-bottom:1rem; }