:root { --bs-primary: #315A9E; --bs-secondary: #64748B; --bs-success: #4D9A4A; --bs-danger: #D94A3A; --bs-warning: #D99A00; --bs-info: #2E91B8; --bs-light: #F6F7F9; --bs-dark: #1F2937; --bs-body-bg: #F6F7F9; --bs-body-color: #1F2937; --bs-border-color: #E5E7EB; --zo-bg: #F6F7F9; --zo-surface: #FFFFFF; --zo-surface-muted: #F9FAFB; --zo-border: #E5E7EB; --zo-border-strong: #CBD5E1; --zo-text: #1F2937; --zo-text-secondary: #6B7280; --zo-text-muted: #9CA3AF; --zo-primary: #315A9E; --zo-primary-hover: #254A86; --zo-success: #4D9A4A; --zo-danger: #D94A3A; --zo-warning: #D99A00; --zo-info: #2E91B8; --zo-primary-soft: #EEF3FF; --zo-success-soft: #EEF8EE; --zo-danger-soft: #FEF2F2; --zo-warning-soft: #FFFBEB; --zo-info-soft: #ECF8FC; --zo-radius: .75rem; --zo-radius-lg: 1rem; --zo-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06); --zo-shadow: 0 6px 18px rgba(15, 23, 42, .08); } /* ═══════════════════════════════════════════════════════════════════════════ 1b. DARK MODE – activated via data-bs-theme="dark" on ═══════════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { --bs-body-bg: #080D14; --bs-body-color: #EDF2F8; --bs-border-color: #243241; --bs-light: #101821; --bs-dark: #F1F5F9; --zo-bg: #080D14; --zo-surface: #101821; --zo-surface-muted: #0C131C; --zo-border: #243241; --zo-border-strong: #33475C; --zo-text: #EDF2F8; --zo-text-secondary: #AEB9C8; --zo-text-muted: #7C8898; --zo-primary: #4F86E8; --zo-primary-hover: #73A3FF; --zo-success: #61B764; --zo-danger: #F07167; --zo-warning: #E5B63B; --zo-info: #52B7D8; --zo-primary-soft: #132B4C; --zo-success-soft: #14331E; --zo-danger-soft: #351817; --zo-warning-soft: #332A12; --zo-info-soft: #102B38; --zo-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --zo-shadow: 0 18px 46px rgba(0, 0, 0, .42); } [data-bs-theme="dark"] body { background-color: var(--zo-bg); color: var(--zo-text); } [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .offcanvas { --bs-card-border-color: var(--zo-border); background-color: var(--zo-surface); border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .navbar-light, [data-bs-theme="dark"] .navbar { background-color: rgba(8, 13, 20, .92) !important; border-bottom: 1px solid rgba(124, 136, 152, .16); backdrop-filter: blur(18px); } [data-bs-theme="dark"] .nav-link, [data-bs-theme="dark"] .navbar-light .nav-link { color: var(--zo-text-secondary); } [data-bs-theme="dark"] .nav-link:hover, [data-bs-theme="dark"] .navbar-light .nav-link:hover { color: var(--zo-primary); } [data-bs-theme="dark"] .table { --bs-table-color: var(--zo-text); --bs-table-bg: var(--zo-surface); --bs-table-border-color: var(--zo-border); --bs-table-hover-bg: rgba(255, 255, 255, .03); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #0B1119; border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #0B1119; border-color: var(--zo-primary); color: var(--zo-text); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--zo-text-muted); } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--zo-text-secondary); --bs-btn-border-color: var(--zo-border); --bs-btn-hover-bg: var(--zo-border); --bs-btn-hover-border-color: var(--zo-border-strong); --bs-btn-hover-color: var(--zo-text); } [data-bs-theme="dark"] .text-muted { color: var(--zo-text-muted) !important; } [data-bs-theme="dark"] .text-dark { color: var(--zo-text) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--zo-surface) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--zo-surface) !important; } [data-bs-theme="dark"] .shadow-sm, [data-bs-theme="dark"] .shadow-sm-even { box-shadow: 0 1px 4px rgba(0, 0, 0, .5) !important; } [data-bs-theme="dark"] .shadow-even { box-shadow: 0 0 1rem rgba(0, 0, 0, .5) !important; } [data-bs-theme="dark"] .border { border-color: var(--zo-border) !important; } [data-bs-theme="dark"] .thead-light th { color: var(--zo-text-secondary); background-color: #1A2332; border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-admin-nav { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-admin-nav-link { color: var(--zo-text-secondary); } [data-bs-theme="dark"] .zo-contact-card { background: var(--zo-surface); border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .mm-panel { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .mm-cta { background: var(--zo-surface-muted); } [data-bs-theme="dark"] .badge-soft-primary { color: var(--zo-primary); background: var(--zo-primary-soft); border-color: #2E4A7A; } [data-bs-theme="dark"] .badge-soft-success { color: var(--zo-success); background: var(--zo-success-soft); border-color: #2A5A2A; } [data-bs-theme="dark"] .badge-soft-danger { color: var(--zo-danger); background: var(--zo-danger-soft); border-color: #5A2A2A; } [data-bs-theme="dark"] .badge-soft-warning { color: var(--zo-warning); background: var(--zo-warning-soft); border-color: #5A4A10; } [data-bs-theme="dark"] .badge-soft-info { color: var(--zo-info); background: var(--zo-info-soft); border-color: #2A4A5A; } /* Dark mode toggle button */ .zo-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--zo-border); border-radius: .7rem; background: var(--zo-surface); color: var(--zo-text-secondary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .zo-theme-toggle:hover { color: var(--zo-primary); border-color: var(--zo-primary); } .zo-theme-toggle .zo-icon-sun, .zo-theme-toggle .zo-icon-moon { display: none; } [data-bs-theme="light"] .zo-theme-toggle .zo-icon-moon, :root:not([data-bs-theme="dark"]) .zo-theme-toggle .zo-icon-moon { display: inline; } [data-bs-theme="dark"] .zo-theme-toggle .zo-icon-sun { display: inline; } /* Dark/light conditional visibility helpers */ [data-bs-theme="dark"] .zo-hide-dark { display: none !important; } [data-bs-theme="dark"] .zo-show-dark { display: block !important; } [data-bs-theme="light"] .zo-hide-light, :root:not([data-bs-theme="dark"]) .zo-hide-light { display: none !important; } [data-bs-theme="light"] .zo-show-light, :root:not([data-bs-theme="dark"]) .zo-show-light { display: block !important; } /* ── Dark mode: Kontakt page ── */ [data-bs-theme="dark"] .zo-contact-page { background: radial-gradient(circle at 14% 8%, rgba(77, 154, 74, .06), transparent 22rem), linear-gradient(180deg, var(--zo-bg) 0%, #0B1120 100%); } [data-bs-theme="dark"] .zo-contact-icon { background: var(--zo-primary-soft); border-color: rgba(91, 143, 217, .2); } [data-bs-theme="dark"] .zo-contact-icon-green { background: var(--zo-success-soft); border-color: rgba(107, 191, 104, .2); } [data-bs-theme="dark"] .zo-public-icon-green { background: var(--zo-success-soft); border-color: rgba(107, 191, 104, .2); } /* ── Dark mode: Ceník / Pricing page ── */ [data-bs-theme="dark"] .zo-pricing-page { background: radial-gradient(circle at 14% 8%, rgba(77, 154, 74, .05), transparent 22rem), linear-gradient(180deg, var(--zo-bg) 0%, #0B1120 100%); } [data-bs-theme="dark"] .cenik-price-card-highlight { background: linear-gradient(135deg, #1E3A5F 0%, #162A42 100%); } [data-bs-theme="dark"] .cenik-pill { background: var(--zo-surface); color: var(--zo-text); } [data-bs-theme="dark"] .cenik-feature-list li { color: var(--zo-text-secondary); } [data-bs-theme="dark"] .cenik-info-card { background: var(--zo-surface-muted) !important; border-color: var(--zo-border) !important; } [data-bs-theme="dark"] .cenik-info-icon { color: var(--zo-primary); } [data-bs-theme="dark"] .cenik-table thead th { color: var(--zo-text-muted); border-bottom-color: var(--zo-border); } [data-bs-theme="dark"] .cenik-table tbody td { color: var(--zo-text); border-bottom-color: var(--zo-border); } /* ── Dark mode: Instalace pages ── */ [data-bs-theme="dark"] .zo-install-hero { background: radial-gradient(circle at 82% 18%, rgba(46, 145, 184, .08), transparent 24rem), linear-gradient(180deg, var(--zo-bg) 0%, #0B1120 100%); } [data-bs-theme="dark"] .zo-install-hero-media { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-install-firmware { background: radial-gradient(circle at 12% 0%, rgba(77, 154, 74, .05), transparent 24rem), var(--zo-bg) !important; } [data-bs-theme="dark"] .zo-install-firmware-panel { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-install-firmware .card { background: var(--zo-surface); border-color: var(--zo-border) !important; } [data-bs-theme="dark"] .zo-install-firmware .card:hover { border-color: rgba(107, 191, 104, .35) !important; } [data-bs-theme="dark"] .zo-install-brand-tabs .nav-link { background: var(--zo-surface); border-color: var(--zo-border) !important; } [data-bs-theme="dark"] .zo-install-brand-tabs .nav-link:hover, [data-bs-theme="dark"] .zo-install-brand-tabs .nav-link.active { border-color: rgba(91, 143, 217, .4) !important; } [data-bs-theme="dark"] .zo-install-tabs-content { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-install-guide { background: var(--zo-bg); } [data-bs-theme="dark"] .zo-install-guide .container > .row { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-install-guide img { border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-install-guide-card { background: var(--zo-surface-muted); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-install-step-card { background: var(--zo-surface); border-color: var(--zo-border); } /* Firmware tab-pane white backgrounds (fw24 page uses inline bg-white) */ [data-bs-theme="dark"] .tab-pane.bg-white { background-color: var(--zo-surface) !important; } [data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--zo-border); } [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--zo-text-secondary); border-color: transparent transparent var(--zo-border); } [data-bs-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--zo-border) var(--zo-border) var(--zo-border); } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--zo-surface); border-color: var(--zo-border) var(--zo-border) var(--zo-surface); color: var(--zo-text); } [data-bs-theme="dark"] .alert-light { background-color: var(--zo-surface-muted); border-color: var(--zo-border); color: var(--zo-text); } /* ── Dark mode: Admin components (ePaper area) ── */ /* HW info banner */ .zo-hwinfo-banner { background: #f2f2f2; border-color: var(--zo-border) !important; } .zo-hwinfo-box { background: #FFFFFF; border-radius: 8px; } [data-bs-theme="dark"] .zo-hwinfo-banner { background: var(--zo-surface) !important; border-color: var(--zo-border) !important; } [data-bs-theme="dark"] .zo-hwinfo-box { background: var(--zo-surface-muted); } [data-bs-theme="dark"] .input-group-text { background-color: var(--zo-surface-muted); border-color: var(--zo-border); color: var(--zo-text-secondary); } [data-bs-theme="dark"] .zo-tab.active { background: var(--zo-surface); color: var(--zo-primary); } [data-bs-theme="dark"] .zo-tab:hover { background: var(--zo-primary-soft); } [data-bs-theme="dark"] #epaperTabs .nav-tabs .nav-link { background: var(--zo-surface); border-color: var(--zo-border); color: var(--zo-text-secondary); } [data-bs-theme="dark"] #epaperTabs ul.nav li.nav-item:last-child button { border-right-color: var(--zo-border); } [data-bs-theme="dark"] #epaperTabs .nav-tabs .nav-link:hover { background: var(--zo-primary-soft); color: var(--zo-primary); } [data-bs-theme="dark"] #epaperTabs .nav-tabs .nav-link.active { background: var(--zo-surface); color: var(--zo-primary); } [data-bs-theme="dark"] .zo-source-block { background: transparent; border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-source-info-box { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-source-active-toggle { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-source-active-toggle .form-check + .form-check { border-left-color: var(--zo-border); } [data-bs-theme="dark"] .zo-source-active-toggle .form-check-label { color: var(--zo-text-secondary); } [data-bs-theme="dark"] .zo-action-bar { background: rgba(15, 23, 42, .92); border-top-color: var(--zo-border); } [data-bs-theme="dark"] .zo-photo-card { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-photo-card.is-active { border-color: var(--zo-primary); box-shadow: 0 0 0 .2rem rgba(91, 143, 217, .2); } [data-bs-theme="dark"] .zo-report-chart { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-report-info { color: var(--zo-text-secondary); background: var(--zo-info-soft); border-color: rgba(92, 200, 232, .25); } [data-bs-theme="dark"] .zo-report-info > i { color: var(--zo-info); } [data-bs-theme="dark"] .zo-report-tip { color: var(--zo-warning); background: var(--zo-warning-soft); border-color: rgba(251, 191, 36, .3); } [data-bs-theme="dark"] .zo-report-table-wrap { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-report-table th { color: var(--zo-text-secondary); background: var(--zo-surface-muted); } [data-bs-theme="dark"] .zo-report-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); } [data-bs-theme="dark"] .zo-report-table tbody tr:hover td { background: rgba(255, 255, 255, .04); } [data-bs-theme="dark"] .zo-log-entry { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-log-entry--control { border-color: rgba(91, 143, 217, .3); } [data-bs-theme="dark"] .zo-log-meta { border-right-color: var(--zo-border); } [data-bs-theme="dark"] .zo-log-meta-item { color: var(--zo-text); } [data-bs-theme="dark"] .zo-log-meta-item i { color: var(--zo-text-muted); } [data-bs-theme="dark"] .zo-log-badge { background: var(--zo-surface-muted); border-color: var(--zo-border); color: var(--zo-text-secondary); } [data-bs-theme="dark"] .zo-log-badge-label { color: var(--zo-text-muted); } [data-bs-theme="dark"] .zo-log-badge-value { color: var(--zo-text); } [data-bs-theme="dark"] .zo-log-badge--success { background: var(--zo-success-soft); border-color: rgba(107, 191, 104, .3); color: var(--zo-success); } [data-bs-theme="dark"] .zo-log-badge--success .zo-log-badge-value { color: var(--zo-success); } [data-bs-theme="dark"] .zo-log-badge--warning { background: var(--zo-warning-soft); border-color: rgba(251, 191, 36, .3); color: var(--zo-warning); } [data-bs-theme="dark"] .zo-log-badge--warning .zo-log-badge-value { color: var(--zo-warning); } [data-bs-theme="dark"] .zo-log-badge--danger { background: var(--zo-danger-soft); border-color: rgba(248, 113, 113, .3); color: var(--zo-danger); } [data-bs-theme="dark"] .zo-log-badge--danger .zo-log-badge-value { color: var(--zo-danger); } [data-bs-theme="dark"] .zo-log-debug { color: var(--zo-primary); background: var(--zo-primary-soft); border-color: rgba(91, 143, 217, .3); } [data-bs-theme="dark"] .zo-alert-warning { color: var(--zo-warning); background: var(--zo-warning-soft); border-color: rgba(251, 191, 36, .3); } [data-bs-theme="dark"] .zo-alert-info { color: var(--zo-info); background: var(--zo-info-soft); border-color: rgba(92, 200, 232, .25); } [data-bs-theme="dark"] .zo-alert-success { color: var(--zo-success); background: var(--zo-success-soft); border-color: rgba(107, 191, 104, .25); } [data-bs-theme="dark"] .zo-alert-danger { color: var(--zo-danger); background: var(--zo-danger-soft); border-color: rgba(248, 113, 113, .25); } /* Tables in connection-info and similar admin areas */ [data-bs-theme="dark"] .zo-table-card { background: var(--zo-surface); border-color: var(--zo-border); } [data-bs-theme="dark"] .zo-table-card th { color: var(--zo-text-secondary); background: var(--zo-surface-muted); } [data-bs-theme="dark"] .zo-table-card tbody tr:hover { background: rgba(255, 255, 255, .03); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(255, 255, 255, .04); --bs-table-hover-color: var(--zo-text); color: var(--zo-text); } [data-bs-theme="dark"] .table-active, [data-bs-theme="dark"] .table-active > th, [data-bs-theme="dark"] .table-active > td { --bs-table-active-bg: rgba(91, 143, 217, .1); --bs-table-active-color: var(--zo-text); background-color: rgba(91, 143, 217, .1); color: var(--zo-text); } [data-bs-theme="dark"] .table-info { --bs-table-bg: rgba(91, 143, 217, .12); --bs-table-color: var(--zo-text); --bs-table-border-color: var(--zo-border); --bs-table-striped-bg: rgba(91, 143, 217, .16); --bs-table-striped-color: var(--zo-text); --bs-table-active-bg: rgba(91, 143, 217, .2); --bs-table-active-color: var(--zo-text); --bs-table-hover-bg: rgba(91, 143, 217, .18); --bs-table-hover-color: var(--zo-text); color: var(--zo-text); border-color: var(--zo-border); } [data-bs-theme="dark"] .table > :not(:first-child) { border-top-color: var(--zo-border); } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(255, 255, 255, .02); color: var(--zo-text); } [data-bs-theme="dark"] .text-black-50 { color: rgba(255, 255, 255, .5) !important; } [data-bs-theme="dark"] .text-black-25 { color: rgba(255, 255, 255, .25) !important; } [data-bs-theme="dark"] .text-black-75 { color: rgba(255, 255, 255, .75) !important; } [data-bs-theme="dark"] .zo-tab-surface { background: var(--zo-surface); border-color: var(--zo-border); } /* Badge overrides in dark mode */ [data-bs-theme="dark"] .zo-badge-success { color: var(--zo-success); background: var(--zo-success-soft); border-color: rgba(107, 191, 104, .3); } [data-bs-theme="dark"] .zo-badge-warning { color: var(--zo-warning); background: var(--zo-warning-soft); border-color: rgba(251, 191, 36, .3); } /* Select2 dark mode */ [data-bs-theme="dark"] .select2-container--default .select2-selection--single, [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--zo-surface); border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--zo-text); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--zo-text-muted); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--zo-text-muted) transparent transparent transparent; } [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--zo-text-muted) transparent; } [data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--zo-bg); border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .select2-dropdown { background-color: var(--zo-surface); border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--zo-primary); color: #fff; } [data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: rgba(91, 143, 217, .15); color: var(--zo-text); } [data-bs-theme="dark"] .select2-container--default .select2-results__option { color: var(--zo-text); } [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--zo-bg); border-color: var(--zo-border); color: var(--zo-text); } [data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--zo-text-muted); } /* ═══════════════════════════════════════════════════════════════════════════ 2. BOOTSTRAP OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ .btn-primary { --bs-btn-bg: #315A9E; --bs-btn-border-color: #315A9E; --bs-btn-hover-bg: #254A86; --bs-btn-hover-border-color: #254A86; --bs-btn-active-bg: #213F72; --bs-btn-active-border-color: #213F72; --bs-btn-color: #FFFFFF; --bs-btn-hover-color: #FFFFFF; } .btn-outline-primary { --bs-btn-color: #315A9E; --bs-btn-border-color: #C8D8F6; --bs-btn-hover-bg: #315A9E; --bs-btn-hover-border-color: #315A9E; --bs-btn-hover-color: #FFFFFF; } .text-primary { color: #315A9E !important; } .bg-primary { background-color: #315A9E !important; } .border-primary { border-color: #315A9E !important; } .link-primary { color: #315A9E !important; } .link-primary:hover { color: #254A86 !important; } .thead-light th { color: #495057; background-color: #e9ecef; border-color: #dee2e6; } /* ═══════════════════════════════════════════════════════════════════════════ 3. UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ .min-vh-50 { min-height: 50vh !important; } .min-vh-60 { min-height: 60vh !important; } .min-vh-75 { min-height: 75vh !important; } .text-left { text-align: left; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-black-10 { color: rgba(0,0,0,0.1) !important; } .text-black-25 { color: rgba(0,0,0,0.25) !important; } .shadow-even { box-shadow: 0 0 1rem rgb(0 0 0 / 15%) !important; } .shadow-sm-even { box-shadow: 0 0 0.5rem rgb(0 0 0 / 15%) !important; } .bg-dark-light { background: #232011; } .bg-dark-lighter { background: #484848; } .bg-success-light { background: #d4edda; } .bg-succes-lighter { background: #E1F2E1; } .bg-info-light { background: #d1ecf1; } .bg-info-lighter { background: #E0F1F5; } .bg-warning-light { background: #fff3cd; } .bg-warning-lighter { background: #FFF6D9; } .bg-danger-light { background: #f8d7da; } .bg-danger-lighter { background: #FCDEDD; } .bg-primary-light { background: #cce5ff; } .bg-primary-lighter { background: #E2EEFF; } .bg-secondary-light { background: #d6d8db; } .bg-secondary-lighter { background: #F0F1F2; } .bg-cyanish { background: #4EA5A4; } .bg-cyanish:hover { background: #65B6B5; } .bg-cyanish-lighter { background: #E0F2F2; } .bg-pinkish { background: #A54EA2; } .bg-pinkish:hover { background: #B766B4; } .bg-pinkish-lighter { background: #F2E0F1; } .bg-yellowish { background: #A5A24E; } .bg-yellowish:hover { background: #B6B566; } .bg-yellowish-lighter { background: #F3F3E2; } .bg-orangeish { background: #A56A4E; } .bg-orangeish:hover { background: #B67A66; } .bg-orangeish-lighter { background: #F2E5E0; } .bg-greenish { background: #4EA54E; } .bg-greenish:hover { background: #65B665; } .bg-greenish-lighter { background: #E1F2E1; } .bg-blueish { background: #4E6AA5; } .bg-blueish:hover { background: #657AB6; } .bg-blueish-lighter { background: #E1E6F2; } .bg-redish { background: #A54E4E; } .bg-redish:hover { background: #B66666; } .bg-redish-lighter { background: #F2E1E1; } .bg-purpleish { background: #6A4EA5; } .bg-purpleish:hover { background: #7A66B6; } .bg-purpleish-lighter { background: #E6E1F2; } .text-dark-light { color: #232011; } .text-dark-lighter { color: #2c2c2c; } .text-success-light { color: #d4edda; } .text-succes-lighter { color: #CCE8CC; } .text-info-light { color: #d1ecf1; } .text-info-lighter { color: #C5E5EC; } .text-warning-light { color: #fff3cd; } .text-warning-lighter { color: #FFEDB4; } .text-danger-light { color: #f8d7da; } .text-danger-lighter { color: #F9C4C1; } .text-primary-light { color: #cce5ff; } .text-primary-lighter { color: #C6DEFF; } .text-secondary-light { color: #d6d8db; } .text-secondary-lighter { color: #E2E4E6; } .text-cyanish { color: #4EA5A4; } .text-cyanish:hover { color: #65B6B5; } .text-cyanish-lighter { color: #CAE6E6; } .text-pinkish { color: #A54EA2; } .text-pinkish:hover { color: #B766B4; } .text-pinkish-lighter { color: #E6CAE5; } .text-yellowish { color: #A5A24E; } .text-yellowish:hover { color: #B6B566; } .text-yellowish-lighter { color: #E7E7CD; } .text-orangeish { color: #A56A4E; } .text-orangeish:hover { color: #B67A66; } .text-orangeish-lighter { color: #E6D2CB; } .text-greenish { color: #4EA54E; } .text-greenish:hover { color: #65B665; } .text-greenish-lighter { color: #CCE7CC; } .text-blueish { color: #4E6AA5; } .text-blueish:hover { color: #657AB6; } .text-blueish-lighter { color: #CCD3E7; } .text-redish { color: #A54E4E; } .text-redish:hover { color: #B66666; } .text-redish-lighter { color: #E7CDCD; } .text-purpleish { color: #6A4EA5; } .text-purpleish:hover { color: #7A66B6; } .text-purpleish-lighter { color: #D3CCE7; } /* Dark mode: brighter -ish colors for visibility on dark backgrounds */ [data-bs-theme="dark"] .text-cyanish { color: #6DD8D7; } [data-bs-theme="dark"] .text-cyanish:hover { color: #8AE8E7; } [data-bs-theme="dark"] .text-cyanish-lighter { color: #3BAFAE; } [data-bs-theme="dark"] .text-pinkish { color: #D876D5; } [data-bs-theme="dark"] .text-pinkish:hover { color: #E89CE5; } [data-bs-theme="dark"] .text-pinkish-lighter { color: #A850A5; } [data-bs-theme="dark"] .text-yellowish { color: #D4D166; } [data-bs-theme="dark"] .text-yellowish:hover { color: #E2E080; } [data-bs-theme="dark"] .text-yellowish-lighter { color: #A8A640; } [data-bs-theme="dark"] .text-orangeish { color: #D89066; } [data-bs-theme="dark"] .text-orangeish:hover { color: #E8A880; } [data-bs-theme="dark"] .text-orangeish-lighter { color: #AE6840; } [data-bs-theme="dark"] .text-greenish { color: #6DD86D; } [data-bs-theme="dark"] .text-greenish:hover { color: #8AE88A; } [data-bs-theme="dark"] .text-greenish-lighter { color: #40AE40; } [data-bs-theme="dark"] .text-blueish { color: #6D90D8; } [data-bs-theme="dark"] .text-blueish:hover { color: #8AABE8; } [data-bs-theme="dark"] .text-blueish-lighter { color: #4068AE; } [data-bs-theme="dark"] .text-redish { color: #D86D6D; } [data-bs-theme="dark"] .text-redish:hover { color: #E88A8A; } [data-bs-theme="dark"] .text-redish-lighter { color: #AE4040; } [data-bs-theme="dark"] .text-purpleish { color: #9066D8; } [data-bs-theme="dark"] .text-purpleish:hover { color: #A880E8; } [data-bs-theme="dark"] .text-purpleish-lighter { color: #6840AE; } .text-epaper { color: #29455e; } .text-logo-blue { color: #3b97df; } .text-logo-yellow { color: #f8c624; } .text-logo-green { color: #1ba186; } .logo-yellow { color: #f1c433; } .logo-green { color: #509e87; } .logo-dark-blue { color: #2f465e; } .bg-logo-yellow { background-color: #f1c433; } .bg-logo-green { background-color: #509e87; } .bg-logo-dark-blue { background-color: #2f465e; } .bg-logo-blue { background-color: #315a9e; } /* ═══════════════════════════════════════════════════════════════════════════ 4. TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════ */ .namereneHodnoty { font-size: 1.3rem; display: table-cell; vertical-align: middle; } .epaper-fs-1 { font-size: 3rem !important; } .hrrr { border-top: 1px solid #717641; margin: 25px 0 20px 0; } /* ═══════════════════════════════════════════════════════════════════════════ 5. FORMS ═══════════════════════════════════════════════════════════════════════════ */ #frm-login label.required { color: #4f6ea6; } .required { font-weight: bold; color: #6ba54e; } .external-link { margin-bottom: 10px; } .form-control-feedback { color: #c33030; } .form-group select { appearance: auto; } form ul.error { list-style: none; margin: 20px 0; padding: 0; } form ul.error li { color: #c33030; border: 1px solid #c33030; margin: 15px 0; padding: 10px; background: #F6E9E9; } .form-check { float: left; padding-right: 30px; padding-top: 6px; } .form-control, .form-select { border-color: #CBD5E1; border-radius: .75rem; min-height: 2.75rem; } select.form-select { -webkit-appearance: none; /* Removes default arrow in Chrome, Safari, and Opera */ -moz-appearance: none; /* Removes default arrow in Firefox */ appearance: none; /* Removes default arrow in modern browsers */ } /* Target Internet Explorer/Edge legacy if needed */ select.form-select::-ms-expand { display: none; } .form-control:focus, .form-select:focus { border-color: var(--zo-primary); box-shadow: 0 0 0 .2rem rgba(49, 90, 158, .16); } .form-label { color: var(--zo-text); font-weight: 700; margin-bottom: .375rem; } .form-label.required::after { content: " *"; color: var(--zo-danger); } .form-text { color: var(--zo-text-muted); font-size: .8125rem; } /* ═══════════════════════════════════════════════════════════════════════════ 6. NAVIGATION & TABS ═══════════════════════════════════════════════════════════════════════════ */ .nav-link { color: black; } .nav-tabs .nav-link { border-bottom: 3px solid white; color: #315a9e; font-weight: normal; } .nav-tabs .nav-link.active { border-top: none; border-left: none; border-right: none; border-bottom: 3px solid #315a9e; color: #315a9e; font-weight: bold; } /* ── Hlavní menu uživatelské sekce ── */ .ucetMenu { border-bottom: 1px solid #dee2e6; } .ucet-nav-tabs { gap: 4px; } .ucet-nav-tabs .btn { font-size: 1rem; } .ucet-menu-icon { display: inline-flex; align-items: center; } .ucet-menu-icon svg { width: 20px; height: 20px; } .ucet-predplatit-block svg { width: 26px; height: 26px; flex-shrink: 0; } /* ── Admin / Ucet submenu ── */ #mainAdmin { border-radius: 0px 0px 10px 10px; } .ucetMenu .col .admin-btn-expanded { border-radius: 0.375rem 0.375rem 0 0; } .admin-submenu-row { margin-top: -1px; } .admin-submenu-bar { background: #315a9e; border-radius: 0 0 0.375rem 0.375rem; padding: 0.35rem 0.75rem 0; } .admin-submenu-bar .nav-tabs { --bs-nav-tabs-link-active-bg: #fff; --bs-nav-tabs-link-active-color: #315a9e; --bs-nav-tabs-border-color: transparent; border-bottom: none; } .admin-submenu-bar .nav-link { background: transparent; border-color: transparent; border-radius: 0.375rem 0.375rem 0 0; } .admin-submenu-bar .nav-link:hover:not(.active) { background: rgba(255, 255, 255, 0.15); } .admin-submenu-bar .nav-link.active { background: #fff; border-color: transparent; border-bottom-color: #fff; border-radius: 0.375rem 0.375rem 0 0; color: #315a9e; font-weight: 600; } .ucet-submenu-bar { background: #315a9e; } .ucet-submenu-bar .nav-tabs { --bs-nav-tabs-link-active-color: #5a7394; } .ucet-submenu-bar .nav-link.active { color: #5a7394; } .admin-nested-submenu-bar { background: #3d6bb5; border-radius: 0; } .admin-nested-submenu-row { margin-top: -1px; } /* ── ZO design tabs ── */ .zo-tabs { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--zo-border); } .zo-tab { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .875rem 1rem; color: var(--zo-primary); text-decoration: none; border-radius: .875rem .875rem 0 0; font-weight: 600; } .zo-tab:hover { background: var(--zo-primary-soft); color: var(--zo-primary-hover); } .zo-tab.active { background: #fff; color: var(--zo-primary); box-shadow: inset 0 -3px 0 var(--zo-primary); } /* ── Firmware tabs (výrobci) ── */ #firmwareTabs { align-items: flex-end; } #firmwareTabs .nav-link { height: auto; padding: 10px 16px; display: flex; align-items: flex-end; } #firmwareTabs #es3ink-tab { align-items: center; } #firmwareTabs .nav-link img.tab-logo-laskakit { height: 22px; } #firmwareTabs .nav-link img.tab-logo-pajenicko { height: 18px; } #firmwareTabs .nav-link img.tab-logo-seeedstudio { height: 36px; } #firmwareTabs .nav-link img.tab-logo-czech-maker { height: 30px; } .sub-tab-img { height: 30px; } /* ═══════════════════════════════════════════════════════════════════════════ 7. MEGAMENU ═══════════════════════════════════════════════════════════════════════════ */ .mm-caret { font-size: .62em; vertical-align: middle; margin-left: 3px; transition: transform .2s; display: inline-block; } .mm-item:hover .mm-caret { transform: rotate(180deg); } [data-bs-toggle="collapse"][aria-expanded="true"] .mm-caret { transform: rotate(180deg); } /* Bridge gap so hover doesn't break when moving cursor to panel */ .mm-item { position: relative; } .mm-item::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px; } .mm-panel { display: none; background: #fff; border-top: 3px solid #315a9e; border-radius: 0 0 .75rem .75rem; z-index: 1050; } .mm-col-title { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; padding-bottom: .5rem; margin-bottom: .25rem; border-bottom: 1px solid #edf0f4; } .megamenu-link { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .5rem; border-radius: .5rem; text-decoration: none; color: #333; transition: background .12s, color .12s; margin-bottom: 2px; } .megamenu-link:hover { background: #f0f5fb; color: #1a3c6e; } .megamenu-link:hover .mm-link-title { color: #1a3c6e; } .megamenu-link:hover .mm-icon { background: #d5e3f5; } .mm-icon { width: 36px; height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; background: #e8eef7; border-radius: 8px; color: #315a9e; font-size: 1rem; transition: background .12s; } .mm-link-title { font-weight: 600; font-size: .88rem; color: #2d3748; display: block; line-height: 1.3; } .mm-link-desc { font-size: .75rem; color: #718096; display: block; line-height: 1.4; margin-top: 1px; } .mm-cta { background: linear-gradient(135deg, #f0f5fb 0%, #e8eef7 100%); border: 1px solid #d0ddef; } [data-bs-theme="dark"] #topMenu .navbar { min-height: 5.35rem; background: radial-gradient(circle at 78% 0%, rgba(79, 134, 232, .10), transparent 28rem), rgba(7, 11, 17, .94) !important; border-bottom: 1px solid rgba(79, 134, 232, .58); box-shadow: 0 1px 0 rgba(79, 134, 232, .35), 0 .8rem 2.4rem rgba(0, 0, 0, .22); } [data-bs-theme="dark"] #topMenu .navbar-brand img { filter: drop-shadow(0 0 .55rem rgba(79, 134, 232, .18)); } [data-bs-theme="dark"] #topMenu .navbar-nav > .nav-item > .nav-link { color: rgba(237, 242, 248, .94); font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); } [data-bs-theme="dark"] #topMenu .navbar-nav > .nav-item > .nav-link:hover, [data-bs-theme="dark"] #topMenu .navbar-nav > .mm-item:hover > .nav-link { color: #FFFFFF; } [data-bs-theme="dark"] #topMenu .btn-success { color: #FFFFFF !important; background: linear-gradient(180deg, rgba(77, 154, 74, .88), rgba(35, 111, 47, .90)); border-color: rgba(97, 183, 100, .88); box-shadow: 0 0 0 1px rgba(97, 183, 100, .18), 0 0 1.25rem rgba(97, 183, 100, .18); } [data-bs-theme="dark"] #topMenu .btn-outline-secondary { color: #EDF2F8; background: rgba(10, 16, 24, .52); border-color: rgba(124, 136, 152, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } [data-bs-theme="dark"] #topMenu .btn-outline-secondary:hover { color: #FFFFFF; background: rgba(19, 43, 76, .60); border-color: rgba(115, 163, 255, .46); } [data-bs-theme="dark"] #topMenu .zo-theme-toggle { width: 2.75rem; height: 2.75rem; color: #EDF2F8; background: rgba(16, 24, 33, .70); border-color: rgba(124, 136, 152, .28); border-radius: .7rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } [data-bs-theme="dark"] #topMenu .zo-theme-toggle:hover { color: #FFFFFF; border-color: rgba(115, 163, 255, .48); background: rgba(19, 43, 76, .58); } [data-bs-theme="dark"] .mm-panel { color: var(--zo-text); background: radial-gradient(circle at 12% 28%, rgba(79, 134, 232, .08), transparent 28rem), radial-gradient(circle at 92% 12%, rgba(82, 183, 216, .07), transparent 24rem), linear-gradient(180deg, #09111A 0%, #071019 100%); border-top: 1px solid rgba(79, 134, 232, .75); border-radius: 0; box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .36); } [data-bs-theme="dark"] .mm-panel-full { padding: 3.35rem 0 4.5rem; } [data-bs-theme="dark"] .mm-panel-sm { padding: .75rem; border: 1px solid rgba(79, 134, 232, .28); border-radius: .9rem; background: radial-gradient(circle at 100% 0%, rgba(79, 134, 232, .10), transparent 14rem), rgba(9, 17, 26, .96); } [data-bs-theme="dark"] .mm-col-title { margin-bottom: 1rem; padding-bottom: .9rem; color: #AFC6E8; border-bottom-color: rgba(124, 136, 152, .22); font-size: .78rem; font-weight: 800; letter-spacing: .12em; } [data-bs-theme="dark"] .megamenu-link { gap: 1.15rem; min-height: 4.4rem; padding: .85rem 0; color: var(--zo-text); border-radius: .8rem; } [data-bs-theme="dark"] .mm-panel-sm .megamenu-link { min-height: 3.6rem; padding: .75rem; } [data-bs-theme="dark"] .megamenu-link:hover { color: #FFFFFF; background: rgba(19, 43, 76, .40); } [data-bs-theme="dark"] .megamenu-icon, [data-bs-theme="dark"] .mm-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.9rem; height: 2.9rem; color: #F3F7FF; background: linear-gradient(180deg, rgba(31, 47, 66, .92), rgba(18, 29, 43, .92)); border: 1px solid rgba(124, 136, 152, .14); border-radius: .55rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 .6rem 1.4rem rgba(0, 0, 0, .18); font-size: 1.2rem; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; } [data-bs-theme="dark"] .megamenu-link:hover .megamenu-icon, [data-bs-theme="dark"] .megamenu-link:hover .mm-icon { color: #FFFFFF; background: linear-gradient(180deg, rgba(38, 72, 112, .95), rgba(24, 47, 78, .95)); border-color: rgba(115, 163, 255, .24); transform: translateY(-1px); } [data-bs-theme="dark"] .megamenu-link-title, [data-bs-theme="dark"] .mm-link-title { display: block; color: #F5F7FB; font-size: 1.08rem; font-weight: 800; line-height: 1.22; } [data-bs-theme="dark"] .megamenu-link:hover .megamenu-link-title, [data-bs-theme="dark"] .megamenu-link:hover .mm-link-title { color: #FFFFFF; } [data-bs-theme="dark"] .megamenu-link-desc, [data-bs-theme="dark"] .mm-link-desc { display: block; margin-top: .35rem; color: #9EACC2; font-size: .94rem; line-height: 1.35; } [data-bs-theme="dark"] .mm-cta { padding: 2.1rem !important; color: var(--zo-text); background: radial-gradient(circle at 20% 0%, rgba(79, 134, 232, .12), transparent 15rem), rgba(16, 24, 33, .62); border: 1px solid rgba(79, 134, 232, .55); border-radius: 1rem !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1rem 2.5rem rgba(0, 0, 0, .20); } [data-bs-theme="dark"] .mm-cta .fw-bold { margin-bottom: 1.25rem !important; color: #FFFFFF; font-size: 1.35rem !important; line-height: 1.25; } [data-bs-theme="dark"] .mm-cta .text-muted { color: #9EACC2 !important; font-size: 1rem; line-height: 1.65; } [data-bs-theme="dark"] .mm-cta li { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.05rem !important; color: #AEB9C8; font-size: .98rem; } [data-bs-theme="dark"] .mm-cta li i { color: #74D36F !important; font-size: 1.05rem; } [data-bs-theme="dark"] .mm-cta .btn { min-height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; color: #8DBBFF; background: rgba(8, 13, 20, .30); border-color: rgba(79, 134, 232, .78); border-radius: .65rem; box-shadow: inset 0 0 0 1px rgba(115, 163, 255, .10), 0 .65rem 1.6rem rgba(0, 0, 0, .18); font-size: 1.05rem; font-weight: 800; } [data-bs-theme="dark"] .mm-cta .btn:hover { color: #FFFFFF; background: rgba(19, 43, 76, .56); border-color: #73A3FF; } /* ── Mobile menu – accordion labels ── */ .mm2-group-title { font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #adb5bd; padding: .3rem 0 .1rem; } .megamenu-link-desc { color: gray; display: block; font-size: 0.9rem; } /* ═══════════════════════════════════════════════════════════════════════════ 8. CARDS ═══════════════════════════════════════════════════════════════════════════ */ #obsah .card { border: 1px solid #efefef; border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); margin-bottom: 9px !important; } .card-header:first-child { padding: 4px; border-bottom: 0; } .card-epaper-preview { height: 150px; box-shadow: 0 6px 6px rgba(150,150,150,.18); } .card-item { transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; border-radius: 8px; background: #FAFAFA; } .card-item:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateY(-5px); transition: all 0.3s ease; background: #EFEFEF; } /* ═══════════════════════════════════════════════════════════════════════════ 9. EPAPER COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ .epaper-dark-footer { background: #232d3d; } .epaper-gallery-caption { font-style: normal; font-size: 17px; background: black; display: block; padding: 10px; margin: -8px; } .epaper-gallery-photo { max-height: 140px; overflow: hidden; display: block; } .epaper-groups-container { margin: -1rem -1.5rem; padding: 1rem 1.5rem; border-radius: 0.5rem; } .epaper-group-section { background: #fff; border-radius: 0.75rem; padding: 1.25rem 1.25rem 0.25rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; } .epaper-card { transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 8px; } .epaper-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateY(-5px); transition: all 0.3s ease; } .epaper-card-ok .card-header { background: #EEF7ED; } .epaper-card-offline { background: #FAFAFA; border: 1px solid #ddd; opacity: 0.8; } .epaper-card-offline:hover { background: #EFEFEF; } /* ── Filter cards ── */ .epaper-filter-card[data-filter='offline'].active { background-color: var(--bs-danger); color: #fff; border-color: var(--bs-danger); } .epaper-filter-card[data-filter='lowbat'].active { background-color: var(--bs-warning); color: #fff; border-color: var(--bs-warning); } .epaper-filter-card[data-filter='all']:not(.active) { background-color: transparent; color: var(--bs-primary); border-color: var(--bs-primary); } .epaper-filter-card[data-filter='all'].active { background-color: #315a9e; color: white; border-color: var(--bs-primary); } .epaper-filter-card[data-filter='offline'] .epaper-filter-badge { background-color: rgba(255,180,180,.25) !important; } .epaper-filter-card[data-filter='lowbat'] .epaper-filter-badge { background-color: #FFF4D3 !important; } .epaper-filter-card[data-filter='offline'].active .epaper-filter-badge { background-color: rgba(255,255,255,.25) !important; color: #fff !important; } .epaper-filter-card[data-filter='lowbat'].active .epaper-filter-badge { background-color: rgba(255,255,255,.30) !important; color: #fff !important; } /* ── Toolbar ── */ .toolbar-dock { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; background: white; border-radius: 12px; padding: 4px; gap: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.18); margin: 12px 0; } .toolbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 64px; padding: 12px 10px 10px; border: none; background: transparent; font-size: 0.78rem; line-height: 1.2; text-align: center; cursor: pointer; border-radius: 8px; transition: background .15s, color .15s; } .toolbar-item i { font-size: 1.35rem; transition: color .15s; } .toolbar-item span { white-space: nowrap; font-weight: bold; } .toolbar-item:hover { background: #e4e4ea; } .toolbar-item.active, .toolbar-item:active { background: #d5e3f7; color: #1a5fb4; } .toolbar-item.active i, .toolbar-item:active i { color: #1a5fb4; } /* ── Status bar ── */ .statuses { border-radius: 0; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; padding: 8px 2px; gap: 0; line-height: 1; } .status-item { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; white-space: nowrap; } .status-item + .status-item { border-left: 1px solid rgba(0,0,0,.15); } .status-icon { font-size: 13px; line-height: 1; width: 14px; text-align: center; flex-shrink: 0; } .status-icon-img { width: 14px; height: 14px; display: block; flex-shrink: 0; } .status-value { color: rgba(0,0,0,.65); font-size: 0.75rem; line-height: 1; white-space: nowrap; } /* ePaper overview polish */ #quickScreenFilter { max-width: 150px; } #mainAdmin .card-title[style*="text-overflow"] { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 1.1rem !important; } .card-epaper-preview img { object-fit: scale-down; } .card-epaper-preview .position-absolute.translate-middle { z-index: 2; pointer-events: none; } .card-epaper-preview .badge[title*="Obnovovat obsah displeje"] { font-size: .85rem; opacity: .92; } #mainAdmin .card-body div[style*="#899ABD"] { color: #899ABD !important; } #mainAdmin .card-title .fa-exclamation-triangle[style*="font-size"], #mainAdmin .card-title .fa-circle[style*="font-size"] { font-size: 12px !important; vertical-align: middle !important; margin-right: 4px !important; } [data-bs-theme="dark"] #mainAdmin { background: radial-gradient(circle at 72% 0%, rgba(79, 134, 232, .12), transparent 34rem), linear-gradient(180deg, #0A1018 0%, #080D14 100%) !important; color: var(--zo-text); } [data-bs-theme="dark"] #mainAdmin > center { display: block; } [data-bs-theme="dark"] #mainAdmin h3 { color: var(--zo-text); } [data-bs-theme="dark"] .ucetMenu { border-bottom-color: rgba(124, 136, 152, .18); } [data-bs-theme="dark"] .ucet-nav-tabs .btn-light { color: var(--zo-text); background: linear-gradient(180deg, rgba(16, 24, 33, .96), rgba(12, 19, 28, .96)); border-color: rgba(124, 136, 152, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } [data-bs-theme="dark"] .ucet-nav-tabs .btn-primary { color: #fff; background: linear-gradient(180deg, #1D64CE 0%, #174B9B 100%); border-color: rgba(79, 134, 232, .55); box-shadow: 0 0 0 1px rgba(79, 134, 232, .20), 0 .8rem 1.8rem rgba(29, 100, 206, .28); } [data-bs-theme="dark"] .admin-submenu-bar { background: linear-gradient(90deg, rgba(23, 75, 155, .92), rgba(19, 43, 76, .82)); border: 1px solid rgba(79, 134, 232, .30); border-radius: .75rem; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .22); } [data-bs-theme="dark"] .admin-submenu-bar .nav-link.active { color: #fff; background: linear-gradient(180deg, #226FDB 0%, #1957B2 100%); border-color: rgba(115, 163, 255, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } [data-bs-theme="dark"] .admin-submenu-bar .nav-link.text-white { color: rgba(237, 242, 248, .62) !important; } [data-bs-theme="dark"] .ucet-predplatit-block { background: rgba(16, 24, 33, .82) !important; border-color: rgba(124, 136, 152, .18) !important; box-shadow: 0 .65rem 1.6rem rgba(0, 0, 0, .18); } [data-bs-theme="dark"] .ucet-predplatit-block .text-muted { color: var(--zo-text-muted) !important; } [data-bs-theme="dark"] .ucet-predplatit-block .ps-3 { border-left-color: rgba(124, 136, 152, .18) !important; } [data-bs-theme="dark"] .epaper-filter-cards .input-group-text, [data-bs-theme="dark"] #quickScreenFilter { color: var(--zo-text-secondary); background: rgba(11, 17, 25, .82); border-color: rgba(124, 136, 152, .22); } [data-bs-theme="dark"] .epaper-filter-cards .input-group-text { border-right-color: rgba(124, 136, 152, .16); } [data-bs-theme="dark"] #quickScreenFilter::placeholder { color: var(--zo-text-muted); } [data-bs-theme="dark"] .epaper-filter-card { border-width: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 .7rem 1.35rem rgba(0, 0, 0, .18); } [data-bs-theme="dark"] .epaper-filter-card[data-filter='all'].active { color: #EAF2FF; background: rgba(19, 43, 76, .92); border-color: rgba(79, 134, 232, .45); } [data-bs-theme="dark"] .epaper-filter-card[data-filter='all']:not(.active) { color: #86B3FF; border-color: rgba(79, 134, 232, .38); } [data-bs-theme="dark"] .epaper-filter-card[data-filter='offline'] { color: #F67870; background: rgba(53, 24, 23, .46); border-color: rgba(240, 113, 103, .28); } [data-bs-theme="dark"] .epaper-filter-card[data-filter='lowbat'] { color: #E5B63B; background: rgba(51, 42, 18, .50); border-color: rgba(229, 182, 59, .30); } [data-bs-theme="dark"] .epaper-filter-card .badge { color: inherit !important; background: rgba(255, 255, 255, .10) !important; } [data-bs-theme="dark"] .epaper-groups-container { background: transparent; } [data-bs-theme="dark"] .epaper-group-section { background: radial-gradient(circle at 74% 0%, rgba(79, 134, 232, .06), transparent 24rem), rgba(16, 24, 33, .70); border-color: rgba(124, 136, 152, .17); box-shadow: 0 1.4rem 3.4rem rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .03); } [data-bs-theme="dark"] .epaper-group-section h5 { color: var(--zo-text-secondary) !important; } [data-bs-theme="dark"] #obsah .card, [data-bs-theme="dark"] #mainAdmin .card-item, [data-bs-theme="dark"] #mainAdmin .epaper-card { color: var(--zo-text); background: linear-gradient(180deg, rgba(16, 24, 33, .94), rgba(10, 16, 24, .96)); border-color: rgba(124, 136, 152, .23); box-shadow: 0 .9rem 1.8rem rgba(0, 0, 0, .24); } [data-bs-theme="dark"] #mainAdmin .card-item:hover, [data-bs-theme="dark"] #mainAdmin .epaper-card:hover { background: linear-gradient(180deg, rgba(18, 28, 39, .98), rgba(11, 18, 27, .98)); border-color: rgba(79, 134, 232, .36); box-shadow: 0 1.1rem 2.2rem rgba(0, 0, 0, .30); } [data-bs-theme="dark"] #mainAdmin .epaper-card-offline { opacity: .86; } [data-bs-theme="dark"] #mainAdmin .card-header { background: rgba(16, 24, 33, .72); border-bottom: 1px solid rgba(124, 136, 152, .14); } [data-bs-theme="dark"] #mainAdmin .epaper-card-ok .card-header { background: rgba(20, 51, 30, .18); } [data-bs-theme="dark"] #mainAdmin .card-title, [data-bs-theme="dark"] #mainAdmin .card-title.text-muted { color: var(--zo-text-secondary) !important; font-weight: 800; } [data-bs-theme="dark"] .card-epaper-preview { background: radial-gradient(circle at 50% 42%, rgba(79, 134, 232, .06), transparent 62%), rgba(8, 13, 20, .26); box-shadow: none; border-bottom: 1px solid rgba(124, 136, 152, .16); } [data-bs-theme="dark"] .card-epaper-preview img { filter: saturate(.95) contrast(.98); } [data-bs-theme="dark"] .statuses { color: var(--zo-text-secondary); background: rgba(7, 11, 17, .74); border-top: 1px solid rgba(124, 136, 152, .14); } [data-bs-theme="dark"] .status-item + .status-item { border-left-color: rgba(124, 136, 152, .22); } [data-bs-theme="dark"] .status-value { color: var(--zo-text-secondary); } [data-bs-theme="dark"] #mainAdmin .card-body { background: rgba(8, 13, 20, .34); } [data-bs-theme="dark"] #mainAdmin .card-body div[style*="#899ABD"] { color: #6CA8FF !important; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ 10. SCREEN EDITOR ═══════════════════════════════════════════════════════════════════════════ */ .screenElementMainValue { border: 1px solid #d4d7de; vertical-align: middle; height: 28px; line-height: 28px; background: #FFFFFF !important; border-radius: 4px; } span.select2.select2-container.select2-container--default > span.selection > span { border: 1px solid #d4d7de !important; } .span-element-height { height: 38px; } .invisible-element { width: 30px; height: 30px; background: rgb(128, 128, 128) !important; color: darkgray !important; border: darkred 1px solid !important; box-sizing: border-box; } .screen-editor { max-width: 1640px; } /* ═══════════════════════════════════════════════════════════════════════════ 11. PRICING / CENIK ═══════════════════════════════════════════════════════════════════════════ */ .cenik-pill { background: #fff; border-radius: 999px; padding: 0.55rem 1rem; box-shadow: 0 0 0.5rem rgb(0 0 0 / 8%); font-weight: 600; color: #29455e; } .cenik-price-card { border: 1px solid rgba(41, 69, 94, 0.08); } .cenik-price-card-highlight { background: linear-gradient(135deg, #315a9e 0%, #29455e 100%); border: 0; } .cenik-price-value { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; } .cenik-price-value span { display: inline-block; font-size: 1rem; font-weight: 600; margin-left: 0.35rem; opacity: 0.9; } .cenik-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .cenik-feature-list { list-style: none; padding: 0; margin: 0; } .cenik-feature-list li { display: flex; align-items: flex-start; gap: 0.1rem; color: #5f6c7b; margin-bottom: 0.9rem; line-height: 1.6; } .cenik-feature-list li:last-child { margin-bottom: 0; } .cenik-soft-card { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1rem; padding: 1rem; line-height: 1.5; } .cenik-info-card { background: #f8fafc; border: 1px solid rgba(69, 114, 167, 0.10); border-radius: 1rem; padding: 1.25rem; } .cenik-info-icon { color: #315a9e; font-size: 1.35rem; margin-bottom: 0.85rem; } .cenik-table thead th { color: #5f6c7b; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #e8edf3; } .cenik-table tbody td { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eef2f6; } .cenik-table tbody tr:last-child td { border-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 12. FOOTER ═══════════════════════════════════════════════════════════════════════════ */ .zo-footer { background: radial-gradient(circle at 20% 0%, rgba(49, 90, 158, .22), transparent 32rem), linear-gradient(135deg, #111827 0%, #1F2937 100%); padding-top: 1px; } .zo-footer-title { margin-bottom: 1.5rem; color: #ffffff; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .zo-footer-list li + li { margin-top: .875rem; } .zo-footer-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: rgba(255, 255, 255, .78); text-decoration: none; } .zo-footer-list a:hover { color: #ffffff; } .zo-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: #ffffff; background: rgba(255, 255, 255, .08); border-radius: 999px; text-decoration: none; } .zo-footer-social:hover { color: #ffffff; background: rgba(255, 255, 255, .16); } .zo-footer-divider { border-color: rgba(255, 255, 255, .16); opacity: 1; } .zo-footer-bottom-link { color: rgba(255, 255, 255, .72); text-decoration: none; } .zo-footer-bottom-link:hover { color: #ffffff; } .zo-footer-separator { width: 1px; height: 1.25rem; background: rgba(255, 255, 255, .28); } .zo-footer-language { border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .86); } /* ═══════════════════════════════════════════════════════════════════════════ 13. ZO PAGE LAYOUT & COMPONENTS ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page wrapper ── */ .zo-page { max-width: 1380px; margin-inline: auto; text-align: left; } /* padding: 1.5rem; */ /* Reset legacy
obalujícího administraci (app/pages/admin.php) */ .zo-page, .zo-panel, .zo-action-bar, .zo-page-title { text-align: left; } .zo-tabs { justify-content: flex-start; } .zo-page-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .zo-page-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--zo-primary); background: var(--zo-primary-soft); border-radius: 999px; font-size: 1.25rem; } /* ── Panels ── */ .zo-panel { background: var(--zo-surface); border: 1px solid var(--zo-border); border-radius: var(--zo-radius-lg); box-shadow: var(--zo-shadow-sm); margin-bottom: 1.25rem; overflow: hidden; } .zo-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--zo-border); } .zo-panel-title { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--zo-text); font-size: 1.25rem; font-weight: 800; } .zo-panel-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--zo-primary); background: var(--zo-primary-soft); border-radius: 999px; font-size: 1rem; flex: 0 0 auto; } .zo-panel-subtitle { margin: .5rem 0 0; color: var(--zo-text-secondary); } /* max-width: 42rem; */ .zo-panel-body { padding: 1.5rem; } /* ── Sections ── */ .zo-section { border-top: 1px solid var(--zo-border); } /* padding: 1.5rem 0; */ .zo-section:first-child { padding-top: 0; border-top: 0; } .zo-section-title { margin-bottom: 1rem; color: var(--zo-text); font-size: 1rem; font-weight: 800; } /* ── Help icon ── */ .zo-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin-left: .25rem; color: var(--zo-primary); border: 1px solid #8EB1E2; border-radius: 999px; font-size: .75rem; font-weight: 700; cursor: help; vertical-align: middle; } /* ── Alerts ── */ .zo-alert { display: flex; gap: .875rem; padding: 1rem 1.125rem; border-radius: .875rem; margin-bottom: 1.25rem; } .zo-alert-info { color: #164E63; background: var(--zo-info-soft); border: 1px solid #BFE7F2; } .zo-alert-success { color: #166534; background: var(--zo-success-soft); border: 1px solid #BFE3BF; } .zo-alert-warning { color: #92400E; background: var(--zo-warning-soft); border: 1px solid #F4D37A; } .zo-alert-danger { color: #991B1B; background: var(--zo-danger-soft); border: 1px solid #F5C2BE; } /* ── Form layout helpers ── */ .zo-field-check { position: absolute; right: .875rem; top: 50%; transform: translateY(-50%); color: var(--zo-success); } .zo-input-wrap { position: relative; } .zo-char-count { text-align: right; color: var(--zo-text-muted); font-size: .8125rem; margin-top: .25rem; } .zo-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 2rem; } .zo-form-row { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1.125rem; } .zo-form-row:last-child { margin-bottom: 0; } .zo-form-row--checkbox { grid-template-columns: 1fr; } .zo-checkbox-row { width: 100%; } .zo-checkbox-row .form-check { float: none; width: 100%; padding-right: 0; } .zo-form-row-label { padding-top: .65rem; text-align: right; } .zo-form-row-label .form-text { display: block; margin-top: .25rem; font-weight: 400; } /* ── ePaper form refinements ── */ .zo-epaper-dalsi .zo-form-row { grid-template-columns: 1fr; gap: .375rem; } .zo-epaper-dalsi .zo-form-row-label { padding-top: 0; text-align: left; font-weight: 700; } .zo-epaper-dalsi .zo-form-row > div:last-child { width: 100%; } .zo-correction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .zo-correction-grid .mb-4 { margin-bottom: 0 !important; } .zo-sleep-comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: 1.5rem; align-items: start; } #sleepKompenzaceTable { max-width: 500px; } .table-variables .form-control { min-height: auto; } .zo-config-block { padding: 1.35rem; margin-bottom: 1.25rem; background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); } .zo-config-block:last-child { margin-bottom: 0; } .zo-config-block--security { margin-bottom: 1.25rem; } .zo-config-block--refresh { border-color: rgba(37, 99, 235, .55); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08); } .zo-config-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .zo-config-heading h3 { margin: 0; color: var(--zo-text); font-size: 1rem; font-weight: 800; } .zo-config-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; color: var(--zo-primary); background: var(--zo-primary-soft); border-radius: 999px; } .zo-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; } .zo-config-grid .zo-config-block { min-height: 100%; margin-bottom: 0; } .zo-config-divider { height: 1px; margin: 1.1rem 0; background: var(--zo-border); } .zo-config-refresh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .8fr); gap: 1.5rem; align-items: start; } .zo-config-refresh-grid > div + div { border-left: 1px solid var(--zo-border); padding-left: 1.5rem; } .zo-config-refresh-sleep .zo-form-row { margin-bottom: 0; } .zo-config-block .zo-form-row { margin-bottom: .9rem; } .zo-config-block .zo-form-row:last-child, .zo-config-block .alert:last-child { margin-bottom: 0; } .zo-config-block .zo-checkbox-row .form-check { display: flex; align-items: flex-start; gap: .6rem; padding: 0; } .zo-config-block .zo-checkbox-row .form-check-input { flex: 0 0 auto; margin-left: 0; margin-top: .2rem; margin-right: .5rem; } .zo-config-block .zo-checkbox-row .form-check-label { min-width: 0; line-height: 1.45; } .zo-config-block .badge { vertical-align: middle; } .zo-refresh-toggle { margin-bottom: 1rem; } .zo-refresh-toggle .zo-checkbox-row .form-check { align-items: center; } .zo-refresh-toggle .form-check-input { position: relative; width: 3.25rem; height: 1.75rem; border-radius: 999px; background-color: #e2e8f0; background-image: none; cursor: pointer; appearance: none; transition: background-color .15s, border-color .15s; } .zo-refresh-toggle .form-check-input::before { content: ""; position: absolute; top: .18rem; left: .2rem; width: 1.3rem; height: 1.3rem; background: #fff; border-radius: 999px; box-shadow: 0 1px 3px rgba(15, 23, 42, .25); transition: transform .15s; } .zo-refresh-toggle .form-check-input:checked { background-color: var(--zo-primary); border-color: var(--zo-primary); } .zo-refresh-toggle .form-check-input:checked::before { transform: translateX(1.45rem); } .zo-refresh-toggle .form-check-label { font-weight: 700; } .zo-source-panel .zo-panel-title { flex-wrap: wrap; } .zo-source-panel .zo-panel-title .form-select, .zo-source-panel .zo-panel-title .form-control { min-width: 13rem; } .zo-source-section, .zo-source-block { display: flex; flex-direction: column; gap: 1rem; } .zo-source-section { margin-top: 1rem; } .zo-source-block { padding: 1.5rem; background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); } .zo-source-block-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; } .zo-source-block-heading:has(p) { align-items: flex-start; } .zo-source-block-heading h3 { margin: 0; color: var(--zo-text); font-size: 1rem; font-weight: 800; } .zo-source-block-heading p { margin: .25rem 0 0; color: var(--zo-text-secondary); font-size: .875rem; } .zo-source-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; color: var(--zo-primary); background: var(--zo-primary-soft); border-radius: 999px; } .zo-source-block-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .zo-source-active-toggle { flex: 0 0 auto; display: inline-flex; overflow: hidden; background: #F8FAFC; border: 1px solid #CBD5E1; border-radius: .75rem; box-shadow: var(--zo-shadow-sm); } .zo-source-active-toggle .form-check { float: none; position: relative; min-height: 0; margin: 0; padding: 0; } .zo-source-active-toggle .form-check + .form-check { border-left: 1px solid #CBD5E1; } .zo-source-active-toggle .form-check-input { position: absolute; opacity: 0; pointer-events: none; } .zo-source-active-toggle .form-check-label { display: inline-flex; align-items: center; justify-content: center; min-width: 9rem; min-height: 2.75rem; padding: .625rem 1rem; color: var(--zo-text-secondary); font-weight: 800; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .zo-source-active-toggle .form-check-input:checked + .form-check-label { color: var(--zo-primary); background: var(--zo-primary-soft); box-shadow: inset 0 0 0 1px #8EB1E2; } .zo-source-active-toggle .form-check:has(.form-check-input:checked) .form-check-label { color: #fff; background: var(--zo-primary); box-shadow: inset 0 0 0 1px var(--zo-primary); } .zo-source-active-toggle .form-check:has(.form-check-input:checked) { background: var(--zo-primary); } .zo-source-active-toggle .form-check-input:focus-visible + .form-check-label { outline: 2px solid rgba(49, 90, 158, .35); outline-offset: -2px; } .zo-source-schedule-inactive .zo-source-block-header { margin-bottom: 0; } .zo-source-info-box { display: flex; align-items: center; gap: 1.5rem; padding: 1rem; background: #F8FAFC; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); } .zo-source-preview { display: flex; align-items: center; justify-content: center; width: 8rem; min-height: 5rem; flex: 0 0 8rem; border-right: 1px solid var(--zo-border); padding-right: 1rem; } .zo-source-preview img { max-width: 100%; max-height: 5rem; object-fit: contain; } .zo-source-preview--icon { color: var(--zo-text-muted); font-size: 2rem; } .zo-source-copy-block select, .zo-source-copy-inline select { width: 100%; } .zo-source-copy-inline { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 1rem; } .zo-source-advanced, .zo-source-advanced table { width: 100%; } .zo-schedule { display: flex; flex-direction: column; gap: 1rem; } .zo-schedule-default-row { grid-template-columns: minmax(10rem, 11rem) minmax(12rem, 20rem); align-items: center; } .zo-schedule-default-row .zo-form-row-label { text-align: left; padding-top: 0; } .zo-schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; padding: 1rem; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); } .zo-schedule-column { display: flex; flex-direction: column; gap: .5rem; } .zo-schedule-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; } .zo-schedule-time { color: var(--zo-text); font-weight: 600; white-space: nowrap; } .zo-schedule-control { position: relative; } .zo-schedule-row--custom .zo-schedule-select { padding-right: 2.5rem; } .zo-schedule-row:has(.zo-schedule-select > option[value="-"]:checked) .zo-schedule-select { color: #991B1B; background: var(--zo-danger-soft); border-color: #F5C2BE; } .zo-schedule-row:has(.zo-schedule-select > option[value=":00"]:checked) .zo-schedule-select, .zo-schedule-row:has(.zo-schedule-select > option[value=":15"]:checked) .zo-schedule-select, .zo-schedule-row:has(.zo-schedule-select > option[value=":30"]:checked) .zo-schedule-select, .zo-schedule-row:has(.zo-schedule-select > option[value=":45"]:checked) .zo-schedule-select { color: #166534; background: var(--zo-success-soft); border-color: #BFE3BF; } .zo-schedule-row:has(.zo-schedule-select > option[value="/5"]:checked) .zo-schedule-select { color: #164E63; background: #D8EEF6; border-color: #8ACFE2; } .zo-schedule-row:has(.zo-schedule-select > option[value="/10"]:checked) .zo-schedule-select { color: #1E3A8A; background: #E1ECFB; border-color: #A9C7F1; } .zo-schedule-row:has(.zo-schedule-select > option[value="/15"]:checked) .zo-schedule-select { color: #3730A3; background: #E9E7FF; border-color: #C5BEFF; } .zo-schedule-row:has(.zo-schedule-select > option[value="/20"]:checked) .zo-schedule-select { color: #6B3A00; background: #FFF3D6; border-color: #F1CA73; } .zo-schedule-row:has(.zo-schedule-select > option[value="/30"]:checked) .zo-schedule-select { color: #7C2D12; background: #FFEDD5; border-color: #FDBA74; } .zo-schedule-check { position: absolute; right: .875rem; top: 50%; color: var(--zo-success); transform: translateY(-50%); pointer-events: none; } .zo-source-panel .form-group.row > .col-sm-3, .zo-source-panel .form-group.row > .col-sm-5, .zo-source-panel .form-group.row > .col-sm-7, .zo-source-panel .form-group.row > .col-sm-9 { flex: 0 0 100%; max-width: 100%; width: 100%; text-align: left !important; } .zo-source-panel .form-group.row > .col-form-label { padding-bottom: .25rem; font-weight: 700; } .zo-source-panel .form-group.row > .d-flex, .zo-source-panel .form-group.row > div:last-child { justify-content: flex-start; } /* ── Template grid ── */ .zo-template-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } .zo-template-card { position: relative; display: block; padding: .75rem; color: var(--zo-text); text-decoration: none; background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); box-shadow: var(--zo-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .zo-template-card:hover { color: var(--zo-text); border-color: #B9C9E8; box-shadow: var(--zo-shadow); transform: translateY(-1px); } .zo-template-card.active { border-color: var(--zo-primary); box-shadow: 0 0 0 .2rem rgba(49, 90, 158, .12); } .zo-template-card.active::after { content: "\f00c"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; position: absolute; right: .625rem; top: .625rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: #fff; background: var(--zo-primary); border-radius: 999px; font-size: .875rem; } .zo-template-preview { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #F8FAFC; border: 1px solid var(--zo-border); border-radius: .625rem; margin-bottom: .75rem; } .zo-template-preview img { width: 100%; height: 100%; object-fit: cover; } .zo-template-title { display: block; color: var(--zo-primary); font-weight: 800; } .zo-template-desc { display: block; color: var(--zo-text-secondary); font-size: .8125rem; } /* ── Table card ── */ .zo-table-card { overflow: hidden; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); background: #fff; } .zo-table-card .table { margin-bottom: 0; } .zo-table-card th { color: #334155; background: #F8FAFC; font-size: .875rem; font-weight: 800; } .zo-table-card td, .zo-table-card th { border-color: var(--zo-border); vertical-align: middle; } .zo-table-card tbody tr:hover { background: #F9FAFB; } .zo-value-danger { color: var(--zo-danger); font-weight: 700; } .zo-value-success { color: var(--zo-success); font-weight: 700; } /* ── Badges ── */ .zo-badge-soft { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.75rem; padding: .25rem .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 800; } .zo-badge-success { color: #166534; background: var(--zo-success-soft); border: 1px solid #BFE3BF; } .zo-badge-warning { color: #92400E; background: var(--zo-warning-soft); border: 1px solid #F4D37A; } /* ── Photo grid ── */ .zo-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .zo-photo-card { position: relative; background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); box-shadow: var(--zo-shadow-sm); padding: .75rem; } .zo-photo-card.is-active { border-color: var(--zo-primary); box-shadow: 0 0 0 .2rem rgba(49, 90, 158, .12); } .zo-photo-section { padding-top: 1.5rem; margin-top: 1.5rem; } .zo-photo-drag { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--zo-primary); background: #fff; border: 1px solid #C8D8F6; border-radius: 999px; box-shadow: 0 4px 12px rgba(15, 23, 42, .14); cursor: grab; font-size: 1rem; } .zo-photo-drag:hover { color: #fff; background: var(--zo-primary); border-color: var(--zo-primary); } .zo-photo-delete-floating { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--zo-danger); background: #fff; border: 1px solid #F5C2BE; border-radius: 999px; box-shadow: 0 4px 12px rgba(15, 23, 42, .14); } .zo-photo-preview { aspect-ratio: 16 / 9; overflow: hidden; background: #F8FAFC; border-radius: .625rem; margin-bottom: .75rem; } .zo-photo-preview img { width: 100%; height: 100%; object-fit: cover; } .zo-photo-active-choice { margin-bottom: .5rem; } .zo-photo-active-choice .btn { color: var(--zo-text-secondary); background: #F8FAFC; border: 1px solid var(--zo-border-strong); font-weight: 800; } .zo-photo-active-choice .btn:hover { color: var(--zo-primary); background: var(--zo-primary-soft); border-color: #C8D8F6; } .zo-photo-active-choice .btn-check:checked + .btn { color: #fff; background: var(--zo-primary); border-color: var(--zo-primary); } .zo-photo-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; } /* ── Upload drop zone ── */ .zo-upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 18rem; padding: 2rem; text-align: center; color: var(--zo-text-secondary); background: #fff; border: 2px dashed #CBD5E1; border-radius: var(--zo-radius); } .zo-upload-drop-icon { color: var(--zo-primary); font-size: 2.5rem; margin-bottom: .5rem; } /* ── Action bar ── */ .zo-action-bar { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--zo-border); } .zo-action-bar--center { justify-content: center; } .zo-action-bar--between { justify-content: space-between; } /* ── Bootstrap-tab surface (ePaper) – bílá karta místo šedé plochy ── */ #epaperTabs { text-align: left; } #epaperTabs .nav-tabs { border-width: 0; } /* border-bottom: 1px solid var(--zo-border); gap: .125rem; */ #epaperTabs .nav-tabs .nav-link { color: var(--zo-text-secondary); border-top: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; font-weight: 600; border-radius: 0; background: white; } #epaperTabs ul.nav li.nav-item:first-child button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } #epaperTabs ul.nav li.nav-item:last-child button { -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 1px solid #e5e7eb; } #epaperTabs .nav-tabs .nav-link:hover { background: var(--zo-primary-soft); color: var(--zo-primary-hover); } #epaperTabs .nav-tabs .nav-link.active { color: var(--zo-primary); background: #fff; box-shadow: inset 0 -3px 0 var(--zo-primary); } .zo-tab-surface { background: var(--zo-surface); border: 1px solid var(--zo-border); border-top: 0; border-radius: 0 0 var(--zo-radius) var(--zo-radius); box-shadow: var(--zo-shadow-sm); } .zo-tab-surface .hrrr { border-top: 1px solid var(--zo-border); opacity: 1; } /* ── ePaper taby: šedé pozadí wrapperu, bílé "ostrůvky" panelů uvnitř ── */ #epaperTabs .tab-content { background: var(--zo-bg); border-top: 0; border-radius: 0 0 var(--zo-radius) var(--zo-radius); margin-top: 1rem; /* padding: 1.25rem; border: 1px solid var(--zo-border); */ } #epaperTabs .tab-content .tab-pane > .zo-panel:last-child { margin-bottom: 0; } #epaperTabs .tab-content .hrrr { border-top: 1px solid var(--zo-border); opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ 14. INTRO / LANDING PAGE ═══════════════════════════════════════════════════════════════════════════ */ .kulervouci-obrazek-uvod { top: 5.8%; left: 14.6%; width: 72.8%; height: 76.7%; } #uvodniSuperDIV { background-image: url('../images/pozadi-vlnka.png'); background-size: contain; background-repeat: no-repeat; background-position: top; } .text-input-intro { border: none; background: #F2F2ED; border-bottom: 1px solid #d5d5d5; } .btn-intro { float: center; margin: auto; background: white; padding: 10px 30px; font-weight: bold; } .dashed { border-style: dotted; max-width: 95%; } /* ═══════════════════════════════════════════════════════════════════════════ 15. MISCELLANEOUS ═══════════════════════════════════════════════════════════════════════════ */ .showhide { display: none; } .showhidetoggle h4:hover { text-decoration: underline; cursor: pointer; } .tooltip-inner { max-width: 300px; } /* ═══════════════════════════════════════════════════════════════════════════ 16. MEDIA QUERIES (min-width ascending · max-width descending) ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 300px) { #uvodniSuperDIV { background-size: 390%; } .screenElementMainValue { width: 160px; } .select2-screen-editor { width: 160px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { width: 160px; } } @media (min-width: 500px) { #uvodniSuperDIV { background-size: 290%; } } @media (max-width: 479px) { .ucet-menu-icon { display: none; } .ucet-nav-tabs .btn { font-size: 0.75rem; padding: 0.25rem 0.45rem; } .admin-submenu-bar .nav-link { font-size: 0.72rem; padding: 0.2rem 0.45rem; } .ucet-predplatit-block svg { display: none; } .ucet-predplatit-block { gap: 0; } .ucet-predplatit-block .lh-sm div:first-child { font-size: 0.62rem; } .ucet-predplatit-block .lh-sm div:last-child { font-size: 0.78rem; } } @media (max-width: 575.98px) { .text-right { text-align: left !important; } .nav-tabs .nav-link { padding: 4px 14px; } .zo-page { padding: 1rem; } .zo-panel-header, .zo-panel-body { padding: 1rem; } .zo-template-grid, .zo-photo-grid { grid-template-columns: 1fr; } .zo-photo-actions { grid-template-columns: 1fr; } .zo-action-bar { position: static; flex-direction: column-reverse; padding: 1rem; } .zo-action-bar .btn { width: 100%; } /* Center varianta: primární tlačítko nahoře (v DOM první), pak destruktivní pod ním */ .zo-action-bar--center { flex-direction: column; } .zo-action-bar--center > div { flex-direction: column !important; width: 100%; } } @media (min-width: 576px) { .cenikBorder { border-right: 1px solid #dee2e6; } .text-md-right { text-align: right; } } @media (min-width: 680px) { #uvodniSuperDIV { background-size: 190%; } .ucet-nav-tabs a.btn { padding-left: 6px; padding-right: 6px; } } @media (max-width: 767.98px) { .epaper-fs-1 { font-size: calc(1.375rem + 1.5vw) !important; } .epaper-gallery { object-fit: contain; } .epaper-gallery-photo { max-height: 100px; overflow: hidden; display: block; } .epaper-gallery-caption { font-style: normal; font-size: 15px; background: black; display: block; padding: 10px; } .cenik-soft-card { padding: 0.9rem 1rem; } .cenik-table tbody td, .cenik-table thead th { white-space: nowrap; } .ucet-nav-tabs .btn { font-size: 0.85rem; padding: 0.3rem 0.6rem; } .admin-submenu-bar .nav-link { font-size: 0.82rem; padding: 0.3rem 0.65rem; } .admin-submenu-bar .nav-link span { display: none; } .ucet-predplatit-block .lh-sm div:first-child { font-size: 0.65rem; } .ucet-predplatit-block .lh-sm div:last-child { font-size: 0.82rem; } } @media (min-width: 768px) { #firmwareTabs .nav-link img.tab-logo-laskakit { height: 36px; } #firmwareTabs .nav-link img.tab-logo-pajenicko { height: 32px; } #firmwareTabs .nav-link img.tab-logo-seeedstudio { height: 35px; } #firmwareTabs .nav-link img.tab-logo-czech-maker { height: 28px; } .sub-tab-img { height: 45px; } } @media (max-width: 991.98px) { .badge-pouzivase { position: relative; top: 36px; left: -50px; } .ucetMenu { margin-bottom: 15px; } .ucet-nav-tabs a.btn { padding-left: 5px; padding-right: 5px; } .zo-form-grid { grid-template-columns: 1fr; } .zo-form-row { grid-template-columns: 1fr; gap: .375rem; } .zo-form-row-label { padding-top: 0; text-align: left; } .zo-correction-grid { grid-template-columns: 1fr; } .zo-sleep-comp-grid { grid-template-columns: 1fr; } .zo-config-grid, .zo-config-refresh-grid { grid-template-columns: 1fr; } .zo-config-refresh-grid > div + div { border-left: 0; border-top: 1px solid var(--zo-border); padding-left: 0; padding-top: 1.25rem; } .zo-source-block-header, .zo-source-info-box { flex-direction: column; } .zo-source-preview { width: 100%; flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--zo-border); padding: 0 0 1rem; } .zo-source-copy-inline, .zo-schedule-default-row, .zo-schedule-grid, .zo-schedule-row { grid-template-columns: 1fr; } .zo-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .ucet-nav-tabs .btn { border-radius: .5rem .5rem 0 0; } #firmwareTabs .nav-link img.tab-logo-laskakit { height: 56px; } #firmwareTabs .nav-link img.tab-logo-pajenicko { height: 52px; } #firmwareTabs .nav-link img.tab-logo-seeedstudio { height: 55px; } #firmwareTabs .nav-link img.tab-logo-czech-maker { height: 48px; } .sub-tab-img { height: 60px; } .nav-link { padding-top: 15px; padding-bottom: 15px; } /* Megamenu – desktop panels */ .mm-panel-full { position: fixed; top: 75px; left: 0; right: 0; width: 100%; } .mm-panel-sm { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; padding: .5rem; } [data-bs-theme="dark"] .mm-panel-full { top: 5.35rem; } [data-bs-theme="dark"] .mm-panel-full > .container { max-width: 1480px; } [data-bs-theme="dark"] .mm-panel-sm { top: calc(100% + 0.5rem); min-width: 320px; } .mm-item:hover .mm-panel { display: block; } } @media (max-width: 1199.98px) { .zo-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zo-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── min-width: 1200px ── */ @media (min-width: 1200px) { #uvodniSuperDIV { background-size: 120%; } .screenElementMainValue { width: 220px; } .select2-screen-editor { width: 220px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { width: 100%; } .ucet-nav-tabs a.btn { padding-left: 13px; padding-right: 13px; } } /* ── min-width: 1400px ── */ @media (min-width: 1400px) { .kulervouci-obrazek-uvod { top: 5.8%; left: 17.3%; width: 67.5%; height: 76.7%; } .screenElementMainValue { width: 260px; } .select2-screen-editor { width: 260px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { width: 100%; } .ucet-nav-tabs a.btn { padding-left: 20px; padding-right: 20px; } } /* ePaper report tabs - aligned with zo-panel design */ .zo-report-stack { display: flex; flex-direction: column; gap: 1.25rem; } .zo-report-panel { background: var(--zo-surface); border: 1px solid var(--zo-border); border-radius: var(--zo-radius-lg); box-shadow: var(--zo-shadow-sm); margin-bottom: 1.25rem; overflow: hidden; } .zo-report-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--zo-border); } .zo-report-heading { display: flex; align-items: center; gap: .75rem; min-width: 0; } .zo-report-heading h3 { margin: 0; color: var(--zo-text); font-size: 1.25rem; font-weight: 800; line-height: 1.25; } .zo-report-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; color: var(--zo-primary); background: var(--zo-primary-soft); border-radius: 999px; font-size: 1rem; } .zo-report-info { display: flex; align-items: flex-start; gap: .875rem; margin: 1.5rem 1.5rem 0; padding: 1rem 1.125rem; color: #164E63; background: var(--zo-info-soft); border: 1px solid #BFE7F2; border-radius: .875rem; line-height: 1.55; } .zo-report-info > i { color: var(--zo-primary); margin-top: .2rem; } .zo-report-note { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 1.5rem 1.5rem; color: var(--zo-text-secondary); font-size: .875rem; } .zo-report-tip { display: flex; gap: 1rem; margin: 1.5rem; padding: 1rem 1.25rem; color: #8A4F0A; background: #FFF8EA; border: 1px solid #F3D49A; border-radius: .875rem; } .zo-report-table-wrap { margin: 1.5rem; overflow-x: auto; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); background: #fff; } .zo-report-info + .zo-report-table-wrap, .zo-report-info + .zo-report-chart-grid, .zo-report-info + .text-center { margin-top: 1.5rem; } .zo-report-table { margin: 0 !important; width: 100% !important; color: var(--zo-text); } .zo-report-table th { padding: .875rem 1rem; color: #334155; background: #F8FAFC; border-color: var(--zo-border); font-weight: 800; text-align: center; vertical-align: middle; } .zo-report-table td { padding: .75rem 1rem; border-color: var(--zo-border); text-align: center; vertical-align: middle; } .zo-report-table tbody tr:nth-child(even) td { background: #FBFCFE; } .zo-report-table tbody tr:hover td { background: #F9FAFB; } .zo-report-chart-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; } .zo-report-chart { display: flex; align-items: center; justify-content: center; min-height: 18rem; overflow: hidden; background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); box-shadow: var(--zo-shadow-sm); } .zo-report-chart img { display: block; max-width: 100%; height: auto; padding: 1rem; } .zo-report-panel > .text-center, .zo-report-panel > h4, .zo-report-panel > h5 { margin-left: 1.5rem; margin-right: 1.5rem; } .zo-report-panel h4, .zo-report-panel h5 { color: var(--zo-text) !important; text-align: left !important; font-weight: 800; } .zo-report-panel .alert { width: auto !important; margin: 1.5rem; border-radius: .875rem; } .zo-report-panel .btn-outline-secondary { border-color: #CBD5E1; color: var(--zo-primary); font-weight: 700; } @media (max-width: 575.98px) { .zo-report-header, .zo-report-info, .zo-report-table-wrap, .zo-report-chart-grid, .zo-report-note, .zo-report-tip, .zo-report-panel .alert { margin-left: 1rem; margin-right: 1rem; } .zo-report-header { flex-direction: column; padding: 1rem; margin: 0; } .zo-report-info, .zo-report-chart-grid { margin-top: 1rem; } } /* ePaper access log cards */ .zo-log-list { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; } .zo-log-entry { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); gap: 1.5rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius); box-shadow: var(--zo-shadow-sm); } .zo-log-entry--control { border-color: #D7E5FA; } .zo-log-meta { display: flex; flex-direction: column; gap: .875rem; padding-right: 1.5rem; border-right: 1px solid var(--zo-border); } .zo-log-meta-item { display: flex; align-items: center; gap: .75rem; color: #24395E; font-weight: 600; line-height: 1.3; text-align: left; } .zo-log-meta-item i { width: 1.25rem; color: #6B7280; font-size: 1rem; text-align: center; } .zo-log-content { min-width: 0; text-align: left; } .zo-log-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .75rem; } .zo-log-status, .zo-log-badge { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .375rem .75rem; color: #5E6A7D; background: #F8FAFC; border: 1px solid #E3E8EF; border-radius: .45rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); font-size: .875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .zo-log-status { color: #fff; border-color: transparent; box-shadow: 0 3px 8px rgba(49, 90, 158, .24); } .zo-log-status--control { background: var(--zo-primary); } .zo-log-status--download { background: var(--zo-success); } .zo-log-badge-label { color: #6B7280; font-weight: 700; } .zo-log-badge-value { color: #3B4D6D; font-weight: 800; } .zo-log-badge--success { color: #166534; background: var(--zo-success-soft); border-color: #D7EAD6; } .zo-log-badge--success .zo-log-badge-value { color: #2E7D32; } .zo-log-badge--warning { color: #92400E; background: #FFF8EA; border-color: #F3D49A; } .zo-log-badge--warning .zo-log-badge-value { color: #D99A00; } .zo-log-badge--danger { color: #991B1B; background: var(--zo-danger-soft); border-color: #F5C2BE; } .zo-log-badge--danger .zo-log-badge-value { color: var(--zo-danger); } .zo-log-debug { display: flex; align-items: center; gap: .625rem; margin-top: .875rem; padding: .625rem .875rem; color: var(--zo-primary); background: #F3F8FF; border: 1px solid #BFD8F8; border-radius: .45rem; font-size: .875rem; font-weight: 700; line-height: 1.35; } .zo-log-debug i { flex: 0 0 auto; } .zo-log-color { display: inline-block; width: .75rem; height: .75rem; border: 1px solid #CBD5E1; border-radius: .15rem; vertical-align: -.08rem; } .zo-log-color--black { background: #1F2937; } .zo-log-color--white { background: #fff; } .zo-log-color--red { background: #D94A3A; } .zo-log-color--yellow { background: #D99A00; } .zo-log-color--gray { background: #9CA3AF; } .zo-log-color--blue { background: #315A9E; } .zo-log-color--green { background: #4D9A4A; } @media (max-width: 767.98px) { .zo-log-list { padding: 1rem; } .zo-log-entry { grid-template-columns: 1fr; gap: 1rem; } .zo-log-meta { padding-right: 0; padding-bottom: 1rem; border-right: 0; border-bottom: 1px solid var(--zo-border); } .zo-log-status, .zo-log-badge { width: 100%; white-space: normal; } } /* Rychlý start – picker servisních obrazovek (quick-start) */ .rychly-start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .rychly-start-karta { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; border: 2px solid var(--zo-border); border-radius: var(--zo-radius); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; margin: 0; } .rychly-start-karta:hover { border-color: var(--zo-primary, #2c75ff); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .rychly-start-karta.selected { border-color: var(--zo-primary, #2c75ff); box-shadow: 0 0 0 3px rgba(44,117,255,.18); } .rychly-start-karta input[type=radio] { position: absolute; top: .5rem; right: .5rem; margin: 0; } .rychly-start-karta img { width: 100%; height: auto; max-height: 160px; object-fit: contain; background: #f7f7f7; border-radius: calc(var(--zo-radius) - 2px); } .rychly-start-popis { display: flex; flex-direction: column; gap: .15rem; } .rychly-start-karta-skryta { opacity: .8; border-style: dashed; } /* ZO public redesign start */ #uvodniSuperDIV { background: radial-gradient(circle at 78% 18%, rgba(46, 145, 184, .13), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; background-size: auto !important; } #uvodniSuperDIV .navbar { margin-bottom: 4.5rem !important; } #uvodniSuperDIV .row.align-items-center { padding-bottom: 4rem; } #uvodniSuperDIV h1 { line-height: 1.08; letter-spacing: 0; } #uvodniSuperDIV img.img-fluid { filter: drop-shadow(0 1.25rem 2.5rem rgba(15, 23, 42, .10)); } .zo-swiss-section, .zo-contact-page, .zo-pricing-page { background: radial-gradient(circle at 14% 8%, rgba(77, 154, 74, .10), transparent 22rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .zo-swiss-section { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; } .zo-swiss-section .container > .text-center { max-width: 56rem !important; } .zo-swiss-section .row.g-4 { row-gap: 1.5rem !important; } .zo-swiss-section .bg-light.rounded-3, .zo-service-features .bg-white.rounded-3, .zo-service-people .card, .zo-service-press .article, .zo-service-detail .container > .row, .zo-pricing-page .bg-white.rounded-3, .zo-pricing-page .cenik-price-card, .zo-pricing-page .cenik-info-card { background: #fff !important; border: 1px solid rgba(203, 213, 225, .70) !important; border-radius: var(--zo-radius-lg) !important; box-shadow: var(--zo-shadow-sm) !important; } .zo-swiss-section .bg-light.rounded-3, .zo-service-features .bg-white.rounded-3, .zo-pricing-page .cenik-info-card, .zo-service-press .article { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .zo-swiss-section .bg-light.rounded-3:hover, .zo-service-features .bg-white.rounded-3:hover, .zo-pricing-page .cenik-info-card:hover, .zo-service-press .article:hover { transform: translateY(-3px); border-color: rgba(77, 154, 74, .28) !important; box-shadow: var(--zo-shadow) !important; } .zo-swiss-section .d-flex.align-items-center.mb-3 { display: block !important; } .zo-swiss-section .bg-logo-green, .zo-swiss-section .d-flex.align-items-center.mb-3 > span { width: 3.25rem; height: 3.25rem; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 0 1.25rem 0 !important; color: var(--zo-success) !important; background: var(--zo-success-soft) !important; border: 1px solid rgba(77, 154, 74, .14); border-radius: 50% !important; } .zo-swiss-section .bg-logo-green i { color: var(--zo-success) !important; } .zo-swiss-section h5 { margin-bottom: .85rem !important; color: var(--zo-text) !important; } .zo-swiss-section p { line-height: 1.65; } .zo-public-icon, .zo-contact-icon, .zo-business-section .bg-logo-dark-blue, .zo-business-section .d-flex.align-items-start > span { width: 3.5rem; height: 3.5rem; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .zo-public-icon { font-size: 1.35rem; } .zo-public-icon-green { color: var(--zo-success); background: var(--zo-success-soft); border: 1px solid rgba(77, 154, 74, .16); } .zo-swiss-section > .container > .text-center > .bg-logo-green, .zo-business-section .col-lg-5 > .bg-logo-dark-blue { width: 5.25rem !important; height: 5.25rem !important; display: inline-flex !important; align-items: center; justify-content: center; } .zo-swiss-section > .container > .text-center > .bg-logo-green svg { width: 50px !important; height: 50px !important; } .zo-swiss-section > .container > .text-center > .bg-logo-green svg path { fill: var(--zo-success); } .zo-business-section { background: radial-gradient(circle at 12% 10%, rgba(77, 154, 74, .10), transparent 24rem), linear-gradient(180deg, #f3f7f5 0%, #eef4f1 100%) !important; padding-top: 5rem !important; padding-bottom: 5rem !important; } .zo-business-section .row.align-items-center { row-gap: 2rem; } .zo-business-section .bg-white.rounded-3 { border: 1px solid rgba(203, 213, 225, .70); box-shadow: var(--zo-shadow-sm) !important; transition: transform .18s ease, box-shadow .18s ease; } .zo-business-section .bg-white.rounded-3:hover { transform: translateY(-3px); box-shadow: var(--zo-shadow) !important; } .zo-business-section .bg-logo-dark-blue, .zo-business-section .d-flex.align-items-start > span { color: var(--zo-primary) !important; background: var(--zo-primary-soft) !important; border: 1px solid rgba(49, 90, 158, .14); } .zo-business-section .bg-logo-dark-blue svg { width: 50px !important; height: 50px !important; } .zo-business-section .bg-logo-dark-blue svg path { fill: var(--zo-primary); } .zo-business-section .d-flex.align-items-start > span i { color: var(--zo-primary) !important; } .zo-service-hero { background: radial-gradient(circle at 88% 10%, rgba(46, 145, 184, .12), transparent 24rem), linear-gradient(180deg, #fff 0%, #f8fafc 100%); } .zo-service-hero h1 { line-height: 1.08; } .zo-service-hero img { filter: drop-shadow(0 1.25rem 2.5rem rgba(15, 23, 42, .12)); } .zo-service-features, .zo-service-people, .zo-service-detail { background: radial-gradient(circle at 8% 0%, rgba(77, 154, 74, .08), transparent 22rem), #f8fafc !important; } .zo-service-features { padding-top: 5rem !important; padding-bottom: 4rem !important; } .zo-service-features .bg-white.rounded-3 { padding: 1.25rem !important; } .zo-service-features .text-primary { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--zo-success) !important; background: var(--zo-success-soft); border-radius: 50%; } .zo-service-features h6 { font-size: 1rem; line-height: 1.25; } .zo-service-people .card { overflow: hidden; } .zo-service-people .card-body { padding: 1.5rem; } .zo-service-people img.rounded-circle { box-shadow: 0 0 0 4px var(--zo-primary-soft); } .zo-service-press .article { display: flex; flex-direction: column; justify-content: center; } .zo-service-detail .container > .row { padding: 2rem; } .zo-service-detail img { border-radius: var(--zo-radius); box-shadow: var(--zo-shadow) !important; } .zo-service-faq .row.mx-auto { background: #fff; border: 1px solid var(--zo-border); border-radius: var(--zo-radius-lg); box-shadow: var(--zo-shadow-sm); padding: 1.5rem; } .zo-pricing-page { padding-top: 5rem !important; padding-bottom: 5rem !important; } .zo-pricing-page .cenik-price-card { border-radius: 1.25rem !important; } .zo-pricing-page .cenik-price-card-highlight { background: radial-gradient(circle at 86% 16%, rgba(46, 145, 184, .28), transparent 18rem), linear-gradient(135deg, var(--zo-primary) 0%, #24395e 100%) !important; } .zo-pricing-page .cenik-icon { box-shadow: 0 8px 18px rgba(15, 23, 42, .12); } .zo-pricing-page .cenik-soft-card { border-radius: var(--zo-radius) !important; } .zo-contact-page { min-height: 60vh; } .zo-contact-card { display: flex; align-items: center; gap: 1rem; min-height: 6rem; padding: 1.25rem; color: var(--zo-text); text-decoration: none; background: #fff; border: 1px solid rgba(203, 213, 225, .72); border-radius: var(--zo-radius-lg); box-shadow: var(--zo-shadow-sm); font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; } .zo-contact-card:hover { color: var(--zo-primary); border-color: rgba(49, 90, 158, .24); box-shadow: var(--zo-shadow); transform: translateY(-3px); } .zo-contact-card-large { min-height: 7rem; } .zo-contact-card-large > span:last-child { display: grid; gap: .25rem; } .zo-contact-icon { background: var(--zo-primary-soft); border: 1px solid rgba(49, 90, 158, .12); } .zo-contact-icon-blue { color: var(--zo-primary); } .zo-contact-icon-green { color: var(--zo-success); background: var(--zo-success-soft); border-color: rgba(77, 154, 74, .16); } .zo-contact-icon i { font-size: 1.25rem; } /* Public pages: dark mode surfaces for legacy Bootstrap utility classes. */ [data-bs-theme="dark"] .text-epaper { color: var(--zo-text) !important; } [data-bs-theme="dark"] .logo-dark-blue { color: var(--zo-primary) !important; } [data-bs-theme="dark"] #uvodniSuperDIV, [data-bs-theme="dark"] .zo-service-hero { background: radial-gradient(circle at 82% 12%, rgba(79, 134, 232, .18), transparent 28rem), radial-gradient(circle at 12% 0%, rgba(82, 183, 216, .08), transparent 22rem), linear-gradient(180deg, #070B11 0%, #0C131C 100%) !important; } [data-bs-theme="dark"] #uvodniSuperDIV img.img-fluid, [data-bs-theme="dark"] .zo-service-hero img { filter: drop-shadow(0 1.25rem 2.5rem rgba(0, 0, 0, .42)); } .zo-home-benefits { margin-top: 5rem !important; background: #F2F2ED; } .zo-home-firmware { background: #F2F2ED; } [data-bs-theme="dark"] .zo-home-benefits, [data-bs-theme="dark"] .zo-home-firmware, [data-bs-theme="dark"] .zo-business-section { background: radial-gradient(circle at 12% 8%, rgba(79, 134, 232, .10), transparent 24rem), linear-gradient(180deg, #0C131C 0%, #101821 100%) !important; } [data-bs-theme="dark"] .zo-home-benefits .bg-white.rounded-3, [data-bs-theme="dark"] .zo-business-section .bg-white.rounded-3, [data-bs-theme="dark"] .zo-swiss-section .bg-light.rounded-3, [data-bs-theme="dark"] .zo-service-features .bg-white.rounded-3, [data-bs-theme="dark"] .zo-service-people .card, [data-bs-theme="dark"] .zo-service-press .article, [data-bs-theme="dark"] .zo-service-detail .container > .row, [data-bs-theme="dark"] .zo-service-faq .row.mx-auto, [data-bs-theme="dark"] .zo-pricing-page .bg-white.rounded-3, [data-bs-theme="dark"] .zo-pricing-page .cenik-price-card, [data-bs-theme="dark"] .zo-pricing-page .cenik-info-card { background: linear-gradient(180deg, rgba(16, 24, 33, .96), rgba(12, 19, 28, .96)) !important; border-color: rgba(124, 136, 152, .24) !important; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .22) !important; } [data-bs-theme="dark"] .zo-swiss-section, [data-bs-theme="dark"] .zo-service-features, [data-bs-theme="dark"] .zo-service-people, [data-bs-theme="dark"] .zo-service-detail { background: radial-gradient(circle at 8% 0%, rgba(97, 183, 100, .09), transparent 24rem), #0C131C !important; } [data-bs-theme="dark"] .zo-service-press, [data-bs-theme="dark"] .zo-service-faq { background: var(--zo-bg); } [data-bs-theme="dark"] .zo-service-features .bg-white.rounded-3:hover, [data-bs-theme="dark"] .zo-swiss-section .bg-light.rounded-3:hover, [data-bs-theme="dark"] .zo-service-press .article:hover, [data-bs-theme="dark"] .zo-pricing-page .cenik-info-card:hover { border-color: rgba(97, 183, 100, .42) !important; box-shadow: 0 1.75rem 3.25rem rgba(0, 0, 0, .32) !important; } @media (max-width: 991.98px) { #uvodniSuperDIV .navbar { margin-bottom: 2rem !important; } #uvodniSuperDIV .row.align-items-center { padding-bottom: 2rem; } .zo-swiss-section, .zo-business-section, .zo-pricing-page { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } } @media (max-width: 575.98px) { .epaper-fs-1 { font-size: 2.2rem !important; } .zo-contact-card { min-height: 5rem; } .zo-service-detail .container > .row, .zo-service-faq .row.mx-auto { padding: 1rem; } } /* ZO public redesign end */ /* ZO install redesign start */ .zo-install-hero { background: radial-gradient(circle at 82% 18%, rgba(46, 145, 184, .12), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); padding-top: 4.5rem !important; padding-bottom: 4.75rem !important; } .zo-install-hero-copy { max-width: 42rem; } .zo-install-title { color: var(--zo-text); font-size: clamp(2.45rem, 4.6vw, 4.1rem) !important; line-height: 1.08; letter-spacing: 0; } .zo-install-hero-copy p { font-size: 1.02rem; line-height: 1.75 !important; } .zo-install-hero-media { overflow: hidden; background: #fff; border: 1px solid rgba(203, 213, 225, .80); border-radius: 1.15rem; box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, .16); } .zo-install-hero-media img { display: block; width: 100%; aspect-ratio: 1.13 / 1; object-fit: cover; } .zo-install-hero .btn, .zo-install-firmware .btn { border-radius: .65rem; box-shadow: 0 .6rem 1.1rem rgba(49, 90, 158, .16); font-weight: 700; } .zo-install-firmware { background: radial-gradient(circle at 12% 0%, rgba(77, 154, 74, .08), transparent 24rem), #f8fafc !important; margin-top: 0 !important; } .zo-install-firmware-panel { display: block; margin-left: 0; margin-right: 0; padding: 1.75rem; background: rgba(255, 255, 255, .92); border: 1px solid rgba(203, 213, 225, .75); border-radius: 1rem; box-shadow: var(--zo-shadow); } .zo-install-firmware-title { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .85rem; } .zo-install-badge, .zo-install-badge-link { padding: .45rem .8rem; border-radius: 999px; font-size: .83rem !important; line-height: 1; text-decoration: none; } .zo-install-badge-link { border: 1px solid var(--zo-border); box-shadow: var(--zo-shadow-sm); } .zo-install-firmware .card { height: 100%; background: #fff; border: 1px solid rgba(203, 213, 225, .78) !important; border-radius: .9rem; box-shadow: var(--zo-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .zo-install-firmware .card:hover { transform: translateY(-3px); border-color: rgba(77, 154, 74, .34) !important; box-shadow: var(--zo-shadow); } .zo-install-firmware .card-body { padding: 1.25rem; } .zo-install-firmware .card-title { color: var(--zo-text) !important; font-weight: 800; line-height: 1.35; margin-bottom: 1rem; } .zo-install-firmware .card-title i { display: block; width: 2rem; height: 2rem; margin-bottom: .8rem; color: var(--zo-success); font-size: 1.35rem; line-height: 2rem; } .zo-install-firmware .card-text { line-height: 1.65; } .zo-install-step-card { margin-top: 2rem; padding: 1.25rem 1.5rem !important; color: var(--zo-text); background: #fff; border: 1px solid rgba(203, 213, 225, .75); border-radius: 1rem; box-shadow: var(--zo-shadow-sm); } .zo-install-step-card .badge { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem !important; height: 2.65rem !important; padding: 0; line-height: 1 !important; background: var(--zo-primary) !important; box-shadow: 0 .5rem 1rem rgba(49, 90, 158, .22); } .zo-install-step-card strong { color: var(--zo-text); } .zo-install-step-card i { display: none; } .zo-install-brand-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; border: 0; } .zo-install-brand-tabs .nav-item { width: 100%; } .zo-install-brand-tabs .nav-link { width: 100%; min-height: 7.1rem; display: flex !important; align-items: center !important; justify-content: center; padding: 1.25rem !important; background: #fff; border: 1px solid rgba(203, 213, 225, .78) !important; border-radius: .9rem !important; box-shadow: var(--zo-shadow-sm); color: var(--zo-text); font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; flex-wrap: wrap; align-content: space-around; flex-direction: column; } .zo-install-brand-tabs .nav-link:hover, .zo-install-brand-tabs .nav-link.active { transform: translateY(-2px); border-color: rgba(49, 90, 158, .34) !important; box-shadow: var(--zo-shadow); } .zo-install-brand-tabs .nav-link.active { box-shadow: inset 0 -3px 0 var(--zo-primary), var(--zo-shadow); } .zo-install-tabs-content { margin-top: 1.25rem; background: #fff; border: 1px solid rgba(203, 213, 225, .75); border-radius: 1rem; box-shadow: var(--zo-shadow-sm); overflow: hidden; } .zo-install-tabs-content > .tab-pane { border-radius: 1rem; } .zo-install-guide { background: #fff; } .zo-install-guide .container > .row { padding: 2rem; background: #fff; border: 1px solid rgba(203, 213, 225, .75); border-radius: 1rem; box-shadow: var(--zo-shadow-sm); } .zo-install-guide img { border-radius: .75rem; border: 1px solid rgba(203, 213, 225, .75); box-shadow: var(--zo-shadow-sm) !important; } .zo-install-guide p > span.bg-info, .zo-install-guide p > span.bg-primary, .zo-install-guide p > span.bg-warning { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 !important; background: var(--zo-primary) !important; border-radius: 50% !important; } .zo-install-guide-card { background: #f8fafc; border: 1px solid rgba(203, 213, 225, .75); } @media (max-width: 991.98px) { .zo-install-hero { padding-top: 3rem !important; } .zo-install-brand-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .zo-install-title { font-size: 2.25rem !important; } .zo-install-firmware-panel, .zo-install-guide .container > .row { padding: 1rem; } .zo-install-brand-tabs { grid-template-columns: 1fr; } .zo-install-guide img.float-end { float: none !important; display: block; width: 100%; max-width: 100% !important; margin: 0 0 1rem 0 !important; } } /* ZO install redesign end */ /* ZO hardware comparison page start */ .zo-hardware-page { min-height: 100vh; color: var(--zo-text); background: radial-gradient(circle at 82% 4%, rgba(46, 145, 184, .10), transparent 26rem), linear-gradient(180deg, #ffffff 0%, #f7fafc 48%, #f4f7fa 100%); } .zo-hw-hero { padding: 8rem 0 1.5rem; overflow: hidden; } .zo-hw-eyebrow { margin-bottom: .8rem; color: var(--zo-success); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .zo-hw-title { margin: 0 0 1.25rem; color: var(--zo-text); font-size: clamp(2.45rem, 4.8vw, 4.25rem); line-height: 1.03; letter-spacing: 0; font-weight: 800; } .zo-hw-title span { display: block; color: var(--zo-primary); } .zo-hw-lead { max-width: 38rem; margin-bottom: 1.75rem; color: var(--zo-text-secondary); font-size: 1.05rem; line-height: 1.75; } .zo-hw-hero-stage { position: relative; min-height: 22rem; } .zo-hw-hero-stage::after { content: ""; position: absolute; right: 2%; bottom: 1rem; width: 82%; height: 4rem; background: radial-gradient(ellipse at center, rgba(15, 23, 42, .22), transparent 68%); filter: blur(6px); } .zo-hw-hero-device { position: absolute; bottom: 2.2rem; width: 30%; max-height: 18rem; object-fit: contain; filter: drop-shadow(0 1.4rem 2.2rem rgba(15, 23, 42, .24)); } .zo-hw-hero-device-0 { left: 10%; width: 33%; z-index: 3; } .zo-hw-hero-device-1 { left: 38%; width: 27%; z-index: 2; } .zo-hw-hero-device-2 { left: 60%; width: 34%; z-index: 1; } .zo-hw-hero-device-main { right: 8%; width: 74%; z-index: 2; } .zo-hw-feature-strip, .zo-hw-panel, .zo-hw-detail-panel { background: rgba(255, 255, 255, .88); border: 1px solid rgba(203, 213, 225, .82); border-radius: 1rem; box-shadow: var(--zo-shadow-sm); } .zo-hw-feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 1rem; } .zo-hw-feature { display: flex; align-items: center; gap: 1rem; min-height: 7rem; padding: 1.25rem 1.5rem; border-right: 1px solid var(--zo-border); } .zo-hw-feature:last-child { border-right: 0; } .zo-hw-feature strong, .zo-hw-feature small { display: block; } .zo-hw-feature strong { margin-bottom: .35rem; color: var(--zo-text); font-weight: 800; } .zo-hw-feature small { color: var(--zo-text-secondary); line-height: 1.55; } .zo-hw-feature-icon, .zo-hw-side-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; } .zo-hw-feature-icon-green { color: var(--zo-success); background: var(--zo-success-soft); } .zo-hw-feature-icon-blue { color: var(--zo-primary); background: var(--zo-primary-soft); } .zo-hw-feature-icon-yellow { color: var(--zo-warning); background: var(--zo-warning-soft); } .zo-hw-section { padding: 1.5rem 0; } .zo-hw-panel, .zo-hw-detail-panel { padding: 1.25rem; } .zo-hw-panel-title { margin: 0; color: var(--zo-text); font-size: 1.45rem; font-weight: 800; } .zo-hw-panel-subtitle { margin: .35rem 0 0; color: var(--zo-text-secondary); } .zo-hw-filters { display: grid; grid-template-columns: repeat(5, minmax(9rem, 1fr)); gap: 1rem; align-items: end; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--zo-border); } .zo-hw-filters label { display: grid; gap: .4rem; margin: 0; } .zo-hw-filters label > span { color: var(--zo-text-secondary); font-size: .8rem; font-weight: 800; } .zo-hw-filter-actions { display: flex; gap: .55rem; } .zo-hw-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } .zo-hw-card, .zo-hw-side-card, .zo-hw-buy-card, .zo-hw-gallery-main, .zo-hw-benefits > div { background: #fff; border: 1px solid rgba(203, 213, 225, .86); border-radius: .75rem; box-shadow: var(--zo-shadow-sm); } .zo-hw-card { position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .zo-hw-card:hover, .zo-hw-card.is-selected { transform: translateY(-2px); border-color: rgba(49, 90, 158, .36); box-shadow: var(--zo-shadow); } .zo-hw-card-badge, .zo-hw-detail-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .7rem; color: #fff; background: var(--zo-success); border-radius: 999px; font-size: .78rem; font-weight: 800; } .zo-hw-card-badge { position: absolute; top: .65rem; left: .65rem; z-index: 2; } .zo-hw-card-image { display: flex; align-items: center; justify-content: center; height: 12.5rem; padding: 1rem 1rem .25rem; background: linear-gradient(145deg, #f8fafc 0%, #edf3f8 100%); } .zo-hw-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .18s ease; } .zo-hw-card:hover .zo-hw-card-image img { transform: scale(1.03) rotate(-1deg); } .zo-hw-card-body { padding: .9rem; } .zo-hw-card h3 { margin: 0 0 .25rem; color: var(--zo-text); font-size: 1rem; font-weight: 800; line-height: 1.3; } .zo-hw-card p { margin: 0 0 .7rem; color: var(--zo-text-secondary); font-size: .86rem; font-weight: 700; } .zo-hw-specs, .zo-hw-detail-specs, .zo-hw-tags { display: flex; flex-wrap: wrap; gap: .4rem; } .zo-hw-specs span, .zo-hw-tags span { display: inline-flex; align-items: center; min-height: 1.65rem; padding: .25rem .55rem; color: var(--zo-text-secondary); background: var(--zo-surface-muted); border: 1px solid var(--zo-border); border-radius: .45rem; font-size: .78rem; font-weight: 800; } .zo-hw-card-actions { display: grid; grid-template-columns: minmax(5.5rem, .8fr) minmax(7rem, 1.2fr); gap: .45rem; margin-top: .85rem; } .zo-hw-card-actions .btn { min-height: 2.25rem; font-weight: 800; } .zo-hw-side-card { padding: 1.25rem; margin-bottom: 1rem; } .zo-hw-side-icon { margin-bottom: 1rem; color: var(--zo-primary); background: var(--zo-primary-soft); } .zo-hw-side-card h3 { margin-bottom: .55rem; color: var(--zo-text); font-size: 1.05rem; font-weight: 800; } .zo-hw-side-card p { color: var(--zo-text-secondary); line-height: 1.6; } .zo-hw-side-link { display: block; margin-top: .55rem; color: var(--zo-primary); font-weight: 800; } .zo-hw-empty { display: grid; place-items: center; min-height: 20rem; text-align: center; } .zo-hw-gallery-main { display: flex; align-items: center; justify-content: center; min-height: 19rem; padding: 1rem; overflow: hidden; } .zo-hw-gallery-main img { max-width: 100%; max-height: 23rem; object-fit: contain; } .zo-hw-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; } .zo-hw-thumbs button { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.24 / 1; padding: .35rem; background: var(--zo-surface); border: 1px solid var(--zo-border); border-radius: .55rem; } .zo-hw-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; } .zo-hw-detail-copy h2 { margin: .65rem 0 .6rem; color: var(--zo-text); font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 800; } .zo-hw-detail-lead { color: var(--zo-text-secondary); font-size: 1rem; line-height: 1.65; } .zo-hw-detail-specs { margin: 1rem 0; } .zo-hw-detail-specs span { display: inline-flex; align-items: center; gap: .35rem; color: var(--zo-text); font-size: .9rem; font-weight: 800; } .zo-hw-detail-specs i { color: var(--zo-primary); } .zo-hw-detail-copy > p { color: var(--zo-text-secondary); line-height: 1.7; } .zo-hw-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; } .zo-hw-benefits > div { padding: .9rem; } .zo-hw-benefits strong, .zo-hw-benefits span { display: block; } .zo-hw-benefits strong { color: var(--zo-text); font-weight: 800; } .zo-hw-benefits span { margin-top: .35rem; color: var(--zo-text-secondary); font-size: .82rem; line-height: 1.45; } .zo-hw-buy-card { height: 100%; padding: 1.25rem; } .zo-hw-buy-card h3 { margin-bottom: 1rem; color: var(--zo-text); font-size: 1.2rem; font-weight: 800; } .zo-hw-buy-card ul { display: grid; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--zo-text-secondary); } .zo-hw-buy-card li { display: flex; gap: .55rem; line-height: 1.4; } .zo-hw-buy-card li i { color: var(--zo-success); margin-top: .2rem; } .zo-hw-swatches { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; } .zo-hw-swatches span { width: 1.15rem; height: 1.15rem; border: 1px solid var(--zo-border); border-radius: 50%; } .zo-hw-status, .zo-hw-price { margin-bottom: .65rem; font-size: .86rem; font-weight: 800; } .zo-hw-status-ok { color: var(--zo-success); } .zo-hw-status-warn { color: var(--zo-warning); } .zo-hw-status-danger { color: var(--zo-danger); } .zo-hw-price { color: var(--zo-text); } .zo-hw-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 1.25rem -1.25rem -1.25rem; padding: 0 1.25rem; border-top: 1px solid var(--zo-border); } .zo-hw-tabs span { display: inline-flex; align-items: center; gap: .5rem; min-height: 3.8rem; padding: 0 1.1rem; color: var(--zo-text-secondary); border-bottom: 3px solid transparent; font-weight: 800; } .zo-hw-tabs span.active { color: var(--zo-success); border-bottom-color: var(--zo-success); } [data-bs-theme="dark"] .zo-hardware-page { background: radial-gradient(circle at 78% 4%, rgba(79, 134, 232, .16), transparent 30rem), radial-gradient(circle at 8% 24%, rgba(82, 183, 216, .08), transparent 24rem), linear-gradient(180deg, #070B11 0%, #0A1018 48%, #080D14 100%); } [data-bs-theme="dark"] .zo-hw-feature-strip, [data-bs-theme="dark"] .zo-hw-panel, [data-bs-theme="dark"] .zo-hw-detail-panel { background: rgba(13, 20, 29, .86); border-color: rgba(124, 136, 152, .20); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .24); } [data-bs-theme="dark"] .zo-hw-card, [data-bs-theme="dark"] .zo-hw-side-card, [data-bs-theme="dark"] .zo-hw-buy-card, [data-bs-theme="dark"] .zo-hw-gallery-main, [data-bs-theme="dark"] .zo-hw-benefits > div { background: linear-gradient(180deg, rgba(16, 24, 33, .94), rgba(12, 19, 28, .94)); border-color: rgba(124, 136, 152, .22); } [data-bs-theme="dark"] .zo-hw-card-image { background: radial-gradient(circle at 50% 38%, rgba(79, 134, 232, .10), transparent 60%), linear-gradient(145deg, #101821 0%, #0C131C 100%); } [data-bs-theme="dark"] .zo-hw-card:hover, [data-bs-theme="dark"] .zo-hw-card.is-selected { border-color: rgba(79, 134, 232, .48); } [data-bs-theme="dark"] .zo-hw-hero-stage::after { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .18), transparent 66%); } [data-bs-theme="dark"] .zo-hw-side-link { color: #86B3FF; } @media (max-width: 1199.98px) { .zo-hw-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zo-hw-filters { grid-template-columns: repeat(3, minmax(9rem, 1fr)); } } @media (max-width: 991.98px) { .zo-hw-hero { padding-top: 6.5rem; } .zo-hw-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zo-hw-feature:nth-child(2) { border-right: 0; } .zo-hw-benefits { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .zo-hw-hero-stage { min-height: 18rem; } .zo-hw-product-grid, .zo-hw-filters, .zo-hw-feature-strip { grid-template-columns: 1fr; } .zo-hw-feature { border-right: 0; border-bottom: 1px solid var(--zo-border); } .zo-hw-feature:last-child { border-bottom: 0; } .zo-hw-card-actions, .zo-hw-filter-actions { grid-template-columns: 1fr; flex-direction: column; } .zo-hw-tabs span { width: 100%; } } /* ZO hardware comparison page end */