@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); :root{ /* --- 60 % : uhlová škála (ne úplně čistá čerň, aby web nepůsobil ploše) --- */ --ec-ink-900:#0e1014; /* základní tmavé pozadí */ --ec-ink-800:#141821; /* střídavá tmavá sekce */ --ec-ink-700:#1b2029; /* karty a panely na tmavém */ --ec-ink-600:#232935; /* zvýšené plochy, hover */ --ec-line:#2b3341; /* linky a okraje na tmavém */ /* --- Světlá („papírová") škála pro proložení tmavých sekcí --- */ --ec-paper:#ffffff; --ec-paper-2:#f5f6f3; /* teplá bílá, ne klinicky studená */ --ec-paper-3:#ebeee9; --ec-line-light:#e0e3dd; /* --- 30 % : červená (karmínová — působí dráž než signální rudá) --- */ --ec-red:#c8102e; /* plochy a tlačítka: bílý text na ní má 5,9:1 */ --ec-red-dark:#a20c25; /* červený TEXT na světlém: 7,5:1 */ --ec-red-darker:#8c0a20;/* hover tlačítek */ /* Zjasněná firemní červená pro TEXT na tmavém. Stejný tón, jen posunutá do čitelnosti: 5,0:1 na #0e1014, 4,7:1 na #141821, 4,3:1 na kartách #1b2029. Sytá #c8102e by měla 3,2 / 3,0 / 2,8:1 a jako běžný text by nevyhověla — proto se používá jen na plochách. */ --ec-red-bright:#f6354e; /* --- 10 % : zlatožlutá --- */ --ec-gold:#e0b13f; /* zlatý text na tmavém: 8,9–9,9:1 */ --ec-gold-dark:#c2952b; /* hover tlačítek */ --ec-gold-ink:#a97e10; /* starozlatá pro grafiku na světlém: 3,7:1 */ /* --- Typografie --- */ --ec-text-dark:#dde1e8; /* hlavní text na tmavém: 13,3:1 */ --ec-muted-dark:#a2aab6; /* vedlejší text na tmavém: 8,3:1 */ --ec-text-light:#181b21; /* hlavní text na světlém: 15,4:1 */ --ec-muted-light:#525a67; /* vedlejší text na světlém: 6,7:1 */ /* --- Poloměry doplněné k Bootstrapu 5.1 (jeho škála je jemnější) --- */ --ec-radius:.375rem; --ec-radius-lg:.5rem; --ec-radius-xl:1rem; --ec-radius-xxl:2rem; /* ========================================================================== 1) TMAVÉ TÉMA — základní režim webu () Bootstrap 5.1 barevné režimy neumí; atribut je zde vlastní přepínač sady proměnných. Utility .text-* a .bg-* čtou variantu *-rgb, proto se u barev zapisují oba tvary. ========================================================================== */ --bs-body-bg:var(--ec-ink-900); --bs-body-bg-rgb:14,16,20; --bs-body-color:var(--ec-text-dark); --bs-body-color-rgb:221,225,232; --bs-emphasis-color:#ffffff; --bs-emphasis-color-rgb:255,255,255; --bs-secondary-color:var(--ec-muted-dark); --bs-secondary-color-rgb:162,170,182; --bs-secondary-bg:var(--ec-ink-800); --bs-secondary-bg-rgb:20,24,33; --bs-tertiary-color:#8b93a0; --bs-tertiary-color-rgb:139,147,160; --bs-tertiary-bg:var(--ec-ink-700); --bs-tertiary-bg-rgb:27,32,41; --bs-border-color:var(--ec-line); --bs-border-color-translucent:rgba(255,255,255,.09); /* .text-secondary čte --bs-secondary-rgb; výchozí šedá Bootstrapu má na černé jen 4,5:1 – přepisujeme na světlejší tón (8,0:1 na #000). */ --bs-secondary:var(--ec-muted-dark); --bs-secondary-rgb:162,170,182; --bs-danger:var(--ec-red); --bs-danger-rgb:200,16,46; --bs-warning:var(--ec-gold); --bs-warning-rgb:224,177,63; --bs-dark:var(--ec-ink-900); --bs-dark-rgb:14,16,20; --bs-light:#f3f4f6; --bs-light-rgb:243,244,246; /* Akcentní TEXT (.ec-text-accent) — zjasněná červená. Záměrně se nepřepisuje --bs-danger: z něj čtou plochy (.bg-danger, .badge), kde by zjasněná červená srazila bílý text na 3,9:1. */ --bs-danger-text-emphasis:var(--ec-red-bright); /* Odkazy v textu = zlatý akcent (drobná plocha, spadá do 10 %) */ --bs-link-color:var(--ec-gold); --bs-link-color-rgb:224,177,63; --bs-link-hover-color:#efcd80; --bs-link-hover-color-rgb:239,205,128; /* Barevné „subtle" varianty pro alert-warning apod. */ --bs-warning-text-emphasis:#f0cf87; --bs-warning-bg-subtle:#2a2311; --bs-warning-border-subtle:#5a4a1c; --bs-heading-color:#ffffff; --bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Vlastní tokeny pro komponenty (viz poznámka u formulářů níže) */ --ec-card-bg:var(--ec-ink-700); --ec-input-bg:#0a0c10; --ec-input-border:#5a6473; /* obrys pole vůči pozadí 3,3:1 (WCAG 1.4.11) */ --ec-placeholder:#7f8794; /* 5,3:1 */ --ec-lift-border:rgba(224,177,63,.5); --ec-lift-shadow:0 .75rem 2rem rgba(0,0,0,.35); --ec-dropdown-bg:var(--ec-ink-700); --ec-dropdown-link:#d3d8e0; --ec-dropdown-hover-bg:var(--ec-ink-600); /* Ikony vykreslené obrázkem (šipka selectu, šipka accordionu) mají v 5.1 barvu zapečenou v datovém URI a proměnnou se obarvit nedají — každé téma má proto vlastní variantu. */ --ec-select-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a2aab6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --ec-chevron:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dde1e8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --ec-chevron-active:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0b13f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* ========================================================================== 2) SVĚTLÉ TÉMA — pro sekce s atributem data-bs-theme="light" ========================================================================== */ [data-bs-theme="light"]{ --bs-body-bg:var(--ec-paper); --bs-body-bg-rgb:255,255,255; --bs-body-color:var(--ec-text-light); --bs-body-color-rgb:24,27,33; --bs-emphasis-color:#0b0d11; --bs-emphasis-color-rgb:11,13,17; --bs-secondary-color:var(--ec-muted-light); --bs-secondary-color-rgb:82,90,103; --bs-secondary-bg:var(--ec-paper-2); --bs-secondary-bg-rgb:245,246,243; --bs-tertiary-color:#6b7382; --bs-tertiary-color-rgb:107,115,130; --bs-tertiary-bg:var(--ec-paper-3); --bs-tertiary-bg-rgb:235,238,233; --bs-border-color:var(--ec-line-light); --bs-border-color-translucent:rgba(11,13,17,.10); --bs-secondary:var(--ec-muted-light); --bs-secondary-rgb:82,90,103; /* Na světlém se červená ztmavuje (jasná karmínová by na papíru měla jen 4,3:1); tlačítka si svou jasnou červenou drží níže samostatně. */ --bs-danger:var(--ec-red-dark); --bs-danger-rgb:162,12,37; /* Zlatá na papíru nesplní kontrast pro text; pro ikony a hvězdičky používáme starozlatou (3,7:1 — vyhovuje pro grafiku). */ --bs-warning:var(--ec-gold-ink); --bs-warning-rgb:169,126,16; --bs-dark:var(--ec-ink-900); --bs-dark-rgb:14,16,20; --bs-light:var(--ec-paper-2); --bs-light-rgb:245,246,243; /* Na papíru je čitelný odstín naopak ten tmavý (7,5:1). Díky tomu dává .ec-text-accent správnou červenou v obou tématech a v HTML se akcentní text píše jednou třídou bez ohledu na sekci. */ --bs-danger-text-emphasis:var(--ec-red-dark); --bs-link-color:var(--ec-red-dark); --bs-link-color-rgb:162,12,37; --bs-link-hover-color:#7a0919; --bs-link-hover-color-rgb:122,9,25; --bs-warning-text-emphasis:#6b4f08; --bs-warning-bg-subtle:#fdf6e3; --bs-warning-border-subtle:#eddcae; --bs-heading-color:#0b0d11; --ec-card-bg:#ffffff; --ec-input-bg:#ffffff; --ec-input-border:#8b9199; /* obrys pole vůči bílé 3,2:1 (WCAG 1.4.11) */ --ec-placeholder:#6b7382; /* 4,9:1 */ --ec-lift-border:rgba(200,16,46,.35); --ec-lift-shadow:0 .75rem 2rem rgba(11,13,17,.10); --ec-dropdown-bg:#ffffff; --ec-dropdown-link:var(--ec-text-light); --ec-dropdown-hover-bg:var(--ec-paper-3); --ec-select-arrow:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23525a67' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); --ec-chevron:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23181b21'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --ec-chevron-active:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a20c25'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* ========================================================================== 3) BOOTSTRAP 5.1 → FIREMNÍ TÉMA Ve verzi 5.1 mají komponenty barvy zapečené v CSS (proměnné typu --bs-btn-bg přišly až v 5.2/5.3). Přepisují se proto přímo vlastnostmi, ale hodnoty se berou výhradně z proměnných témat výše — světlá sekce i tmavý základ tak zůstávají řízené z jednoho místa. ========================================================================== */ /* --- Základ dokumentu --- Reboot v 5.1 má barvu i pozadí natvrdo (bílá / #212529). Pravidlo pro [data-bs-theme] navíc zajistí, že si běžný text uvnitř světlé sekce vezme tmavou barvu i bez utility. */ body{ background-color:var(--bs-body-bg); color:var(--bs-body-color); -webkit-font-smoothing:antialiased; } [data-bs-theme]{ color:var(--bs-body-color); } h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{ color:var(--bs-heading-color); } h1,h2,h3,h4,h5,h6, .display-1,.display-2,.display-3,.display-4,.display-5,.display-6{ letter-spacing:-.015em; } /* Plynulé velikosti velkých nadpisů. Bootstrap 5 má u .display-* pevnou velikost bez responzivního zmenšování (volba $enable-responsive-font-sizes ve v5 zmizela), takže .display-1 by na mobilu přetékal z viewportu a rozjezdil by celou stránku do strany. clamp() drží na desktopu původní velikost a na malých displejích ji zmenší. */ .display-1{ font-size:clamp(2.5rem, 8.5vw, 5rem); } .display-2{ font-size:clamp(2.25rem, 7.5vw, 4.5rem); } .display-3{ font-size:clamp(2rem, 6.5vw, 4rem); } .display-4{ font-size:clamp(1.875rem,5.5vw, 3.5rem); } .display-5{ font-size:clamp(1.75rem, 4.8vw, 3rem); } .display-6{ font-size:clamp(1.5rem, 3.6vw, 2.5rem); } /* --- Odkazy --- V 5.1 je barva odkazu v CSS natvrdo (#0d6efd), proměnnou --bs-link-color framework nečte. Pomocné třídy .link-* jsou na tom stejně. */ a{ color:var(--bs-link-color); } a:hover{ color:var(--bs-link-hover-color); } .link-secondary{ color:var(--bs-secondary-color); } .link-secondary:hover,.link-secondary:focus{ color:var(--bs-emphasis-color); } .link-light{ color:#f3f4f6; } .link-light:hover,.link-light:focus{ color:#fff; } .link-warning{ color:var(--bs-warning); } .link-warning:hover,.link-warning:focus{ color:var(--bs-link-hover-color); } .link-danger{ color:var(--bs-danger-text-emphasis); } .link-danger:hover,.link-danger:focus{ color:var(--bs-danger); } /* --- Okraje --- Utility .border-* mají v 5.1 barvu zapečenou (#dee2e6, #ffc107 …). */ .border,.border-top,.border-end,.border-bottom,.border-start{ border-color:var(--bs-border-color)!important; } .border-warning{ border-color:var(--bs-warning)!important; } .border-danger{ border-color:var(--bs-danger)!important; } .border-dark{ border-color:var(--bs-dark)!important; } .border-light{ border-color:var(--bs-light)!important; } .border-secondary{ border-color:var(--bs-secondary-color)!important; } /* --- Poloměry --- 5.1 pracuje se škálou .2 / .25 / .3 rem, 5.3 s .25 / .375 / .5 rem. Aby web vypadal stejně jako doteď, škálu srovnáváme na novější hodnoty. */ .rounded{ border-radius:var(--ec-radius)!important; } .rounded-1{ border-radius:.25rem!important; } .rounded-2{ border-radius:var(--ec-radius)!important; } .rounded-3{ border-radius:var(--ec-radius-lg)!important; } .btn,.card,.form-control,.form-select,.dropdown-menu,.badge,.alert{ border-radius:var(--ec-radius); } .btn-lg,.form-control-lg,.form-select-lg{ border-radius:var(--ec-radius-lg); } /* Accordiony na webu jsou všechny .accordion-flush (bez zaoblení), proto se jejich poloměry nepřepisují. */ /* --- Tlačítka --- */ .btn{ font-weight:600; } /* Barevný fokusový kroužek Bootstrapu (modrý / stock červený) se vypíná — viditelný fokus pro klávesnici řeší obrys :focus-visible úplně dole. */ .btn:focus,.btn.focus,.btn-check:focus+.btn{ box-shadow:none; } /* Jasná firemní červená zůstává na tlačítkách v obou tématech. Bílý text na ní má 5,9:1 → vyhovuje AA i pro běžnou velikost. */ .btn-danger{ color:#fff; background-color:var(--ec-red); border-color:var(--ec-red); } .btn-danger:hover,.btn-danger:focus, .btn-check:focus+.btn-danger{ color:#fff; background-color:var(--ec-red-dark); border-color:var(--ec-red-dark); } .btn-danger:active,.btn-danger.active, .btn-check:checked+.btn-danger, .show>.btn-danger.dropdown-toggle{ color:#fff; background-color:var(--ec-red-darker); border-color:var(--ec-red-darker); } .btn-danger:disabled,.btn-danger.disabled{ color:#fff; background-color:var(--ec-red); border-color:var(--ec-red); } /* Zlaté tlačítko web už nepoužívá — tlačítko je plocha, ne mikro detail, a zlatá plocha si bere pozornost, která patří červenému CTA. Varianta tu zůstává jen jako součást palety; pro sekundární akci použijte .btn-outline-light, pro hlavní .btn-danger. */ .btn-warning{ color:#14161a; background-color:var(--ec-gold); border-color:var(--ec-gold); } .btn-warning:hover,.btn-warning:focus, .btn-warning:active,.btn-warning.active{ color:#14161a; background-color:var(--ec-gold-dark); border-color:var(--ec-gold-dark); } .btn-outline-light{ color:#f3f4f6; background-color:transparent; border-color:rgba(255,255,255,.4); } .btn-outline-light:hover,.btn-outline-light:focus, .btn-outline-light:active,.btn-outline-light.active{ color:var(--ec-ink-900); background-color:#f3f4f6; border-color:#f3f4f6; } .btn-outline-warning{ color:var(--ec-gold); background-color:transparent; border-color:rgba(224,177,63,.55); } .btn-outline-warning:hover,.btn-outline-warning:focus, .btn-outline-warning:active,.btn-outline-warning.active{ color:#14161a; background-color:var(--ec-gold); border-color:var(--ec-gold); } .btn-outline-danger{ color:var(--bs-danger); background-color:transparent; border-color:var(--bs-danger); } .btn-outline-danger:hover,.btn-outline-danger:focus, .btn-outline-danger:active,.btn-outline-danger.active{ color:#fff; background-color:var(--ec-red); border-color:var(--ec-red); } .btn-light{ color:var(--ec-ink-900); background-color:#ffffff; border-color:#ffffff; } .btn-light:hover,.btn-light:focus, .btn-light:active,.btn-light.active{ color:var(--ec-ink-900); background-color:#e9eaec; border-color:#e9eaec; } .btn-dark{ color:#fff; background-color:var(--ec-ink-900); border-color:var(--ec-ink-900); } .btn-dark:hover,.btn-dark:focus, .btn-dark:active,.btn-dark.active{ color:#fff; background-color:#000; border-color:#000; } /* --- Formuláře --- POZOR: hodnoty se předávají výhradně CSS proměnnými definovanými v blocích témat výše. Zápis „[data-bs-theme=dark] .form-control" by byl chybný — platil by i uvnitř světlé sekce, protože je tmavé a potomkovský selektor nezná pravidlo „nejbližší předek vyhrává". Proměnné se naopak dědí správně od nejbližšího předka s daným tématem. */ .form-control,.form-select{ background-color:var(--ec-input-bg); border-color:var(--ec-input-border); color:var(--bs-body-color); } .form-select{ background-image:var(--ec-select-arrow); } .form-control::placeholder{ color:var(--ec-placeholder); } .form-control:focus,.form-select:focus{ background-color:var(--ec-input-bg); color:var(--bs-body-color); border-color:var(--ec-gold-dark); box-shadow:0 0 0 .2rem rgba(224,177,63,.28); } .form-check-input{ background-color:var(--ec-input-bg); border-color:var(--ec-input-border); } .form-check-input:checked{ background-color:var(--ec-red); border-color:var(--ec-red); } .form-check-input:focus{ border-color:var(--ec-gold-dark); box-shadow:0 0 0 .2rem rgba(224,177,63,.28); } .form-label{ color:var(--bs-body-color); } /* --- Karty --- Část karet jsou odkazy (). Pravidlo pro :hover je tu proto, aby text karty nepřebral barvu odkazu — a:hover má vyšší specificitu než .card. */ .card{ background-color:var(--ec-card-bg); border-color:var(--bs-border-color); color:var(--bs-body-color); } .card:hover,.card:focus{ color:var(--bs-body-color); } /* --- Navigace (vždy tmavá) --- V 5.1 se světlý text v liště zapíná třídou .navbar-dark (doplněna v HTML), odstíny si pak srovnáme na firemní. */ .navbar-dark .navbar-nav .nav-link{ color:#d3d8e0; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus{ color:#fff; } .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show > .nav-link{ color:var(--ec-gold); } .navbar-dark .navbar-toggler{ border-color:transparent; } .navbar-toggler:focus{ box-shadow:none; } .dropdown-menu{ background-color:var(--ec-dropdown-bg); border-color:var(--bs-border-color); color:var(--ec-dropdown-link); } .dropdown-item{ color:var(--ec-dropdown-link); } .dropdown-item:hover,.dropdown-item:focus{ color:var(--bs-emphasis-color); background-color:var(--ec-dropdown-hover-bg); } .dropdown-item.active,.dropdown-item:active{ color:#fff; background-color:var(--ec-red); } .dropdown-divider{ border-top-color:var(--bs-border-color); } /* --- Accordion --- */ .accordion-item{ background-color:transparent; border-color:var(--bs-border-color); color:var(--bs-body-color); } .accordion-button{ background-color:transparent; color:var(--bs-emphasis-color); } /* Aktivní položka přebírá barvu odkazů daného tématu (zlatá na tmavém, tmavá červená na světlém) — červená by na tmavém měla jen 3,4:1. */ .accordion-button:not(.collapsed){ background-color:transparent; color:var(--bs-link-color); box-shadow:inset 0 -1px 0 var(--bs-border-color); } .accordion-button::after{ background-image:var(--ec-chevron); } .accordion-button:not(.collapsed)::after{ background-image:var(--ec-chevron-active); } .accordion-button:focus{ border-color:transparent; box-shadow:0 0 0 .2rem rgba(224,177,63,.28); } /* --- Tabulky --- */ .table{ color:var(--bs-body-color); border-color:var(--bs-border-color); } .table > :not(:first-child){ border-top-color:var(--bs-border-color); } /* --- Drobečková navigace --- */ .breadcrumb-item + .breadcrumb-item::before{ color:var(--bs-secondary-color); } .breadcrumb-item.active{ color:var(--bs-secondary-color); } /* --- Upozornění --- */ .alert-warning{ color:var(--bs-warning-text-emphasis); background-color:var(--bs-warning-bg-subtle); border-color:var(--bs-warning-border-subtle); } /* ========================================================================== 4) UTILITY DOPLNĚNÉ K BOOTSTRAPU 5.1 Odpovídají utilitám z Bootstrapu 5.3, které tato verze ještě nemá. Prefix .ec- je záměrný: v HTML je pak vidět, co je framework a co projektová třída. Při případném přechodu zpět na 5.3 stačí tuto sekci smazat a třídy v HTML přejmenovat (mapování je 1:1): .ec-text-accent → .text-danger-emphasis .ec-text-strong → .text-body-emphasis .ec-link-strong → .link-body-emphasis .ec-bg-2 → .bg-body-secondary .ec-cover → .object-fit-cover .ec-underline-* → .link-underline-opacity-* .ec-rounded-4/5 → .rounded-4 / .rounded-5 .ec-row-gap-2 → .row-gap-2 .ec-col-gap-4 → .column-gap-4 (a .bg-danger.text-white zpět na .text-bg-danger) ========================================================================== */ /* Tloušťka písma. VÝJIMKA z pravidla o prefixu: .fw-semibold přišla až v Bootstrapu 5.2, ale je v HTML na stovkách míst a hodnota je shodná s pozdějšími verzemi — po případném upgradu se definice jen překryje sama sebou. Přejmenování by kód jen znečitelnilo, proto zůstává pod původním názvem. */ .fw-semibold{ font-weight:600!important; } /* Barvy */ .ec-text-accent{ color:var(--bs-danger-text-emphasis)!important; } .ec-text-strong{ color:var(--bs-emphasis-color)!important; } .ec-link-strong{ color:var(--bs-emphasis-color); } .ec-link-strong:hover,.ec-link-strong:focus{ color:var(--bs-emphasis-color); } .ec-bg-2{ background-color:var(--bs-secondary-bg)!important; } /* Obrázky */ .ec-cover{ object-fit:cover!important; } /* Podtržení odkazů. V 5.1 je odkaz podtržený vždy; tyto třídy podtržení ztlumí nebo schovají a vrátí ho při přejezdu myší a při fokusu. První (průhledná) hodnota je záložní pro prohlížeče bez color-mix(). */ .ec-underline-0{ text-decoration-color:transparent!important; } .ec-underline-25{ text-decoration-color:transparent!important; text-decoration-color:color-mix(in srgb, currentColor 25%, transparent)!important; } .ec-underline-50{ text-decoration-color:transparent!important; text-decoration-color:color-mix(in srgb, currentColor 50%, transparent)!important; } .ec-underline-hover:hover, .ec-underline-hover:focus{ text-decoration-color:currentColor!important; } /* Poloměry nad rámec škály 5.1 */ .ec-rounded-4{ border-radius:var(--ec-radius-xl)!important; } .ec-rounded-5{ border-radius:var(--ec-radius-xxl)!important; } /* Mezery v jedné ose */ .ec-row-gap-2{ row-gap:.5rem!important; } .ec-col-gap-4{ column-gap:1.5rem!important; } /* ========================================================================== 5) Dekorativní pomocné třídy ========================================================================== */ /* Svislý rytmus sekcí — Bootstrap škála končí na 5, potřebujeme velkorysejší */ .ec-section{ padding-block:3.5rem; } @media (min-width:992px){ .ec-section{ padding-block:6rem; } } /* Ztmavující závoj přes fotku v hero sekci. Krytí určuje nejcitlivější barva, která nad fotkou leží. Od převedení akcentů na červenou je to ČERVENÉ zvýrazněné slovo v nadpisu: zjasněná červená je tmavší než zlatá, takže potřebuje o dva stupně hustší závoj. Nadzáhlaví už závoj neomezuje — nad fotkou je z něj červený tag (bílá na sytém podkladu, 5,9:1 bez ohledu na fotku). Změřeno na skutečném renderu úvodní fotky, nejsvětlejší bod pozadí. Zvýrazněné slovo v nadpisu je velký text, platí pro něj limit 3:1: krytí pozadí bílý nadpis podtitul červená zlatá 0,88/0,84 rgb(49,51,54) 12,7:1 11,5:1 3,34:1 6,35:1 ← použito 0,84/0,79 rgb(61,62,65) 10,7:1 9,7:1 2,82:1 5,36:1 ✗ pod AA 0,82/0,77 rgb(65,67,70) 9,9:1 9,0:1 2,69:1 4,98:1 ✗ pod AA Zvolené krytí propustí fotku co nejvíc a červený akcent drží nad limitem 3:1. Když se fotka vymění za výrazně světlejší, měření zopakujte a krytí případně přitáhněte na 0,92/0,88. */ .ec-veil{ background: radial-gradient(52rem 26rem at 50% 0%, rgba(200,16,46,.20), transparent 66%), linear-gradient(180deg, rgba(10,12,15,.88) 0%, rgba(12,14,18,.84) 40%, rgba(14,16,20,.97) 100%); } /* Jednotný tón všech fotografií na webu. Snímky pocházejí z různých zdrojů a mají různé barevné podání; mírné odbarvení a ztmavení je sjednotí do jednoho vizuálního systému a zároveň ztlumí barvy mimo firemní paletu (modré přilby, modré montérky). Na tuto hodnotu je navázané měření kontrastu závoje – při změně filtru měření zopakujte (viz komentář u .ec-veil). */ .ec-photo{ filter:saturate(.62) brightness(.92) contrast(1.04); } /* Výřez fotky na pozadí hero sekce: drží hlavní motiv v záběru i na úzkých displejích, kde se fotka kropuje nejvíc. Hero se kropuje hodně (z fotky 3:2 zbude pás cca 2,8:1), proto se u každé stránky vybírá varianta podle toho, kde na fotce leží hlavní motiv. */ .ec-hero-photo{ object-position:72% 40%; } /* motiv vpravo (úvodní fotka) */ @media (min-width:992px){ .ec-hero-photo{ object-position:60% 42%; } } .ec-hero-photo-center{ object-position:50% 42%; } /* motiv u středu */ .ec-hero-photo-left{ object-position:32% 42%; } /* motiv vlevo */ .ec-hero-photo-right{ object-position:68% 42%; } /* motiv vpravo */ .ec-hero-photo-low{ object-position:50% 62%; } /* motiv v dolní části */ .ec-hero-photo-top{ object-position:50% 22%; } /* motiv v horní části */ /* Pozn.: u fotky 3:2 v širokém hero pásu určuje měřítko výřezu ŠÍŘKA, takže na desktopu se fotka kropuje jen svisle a vodorovná složka object-position se neprojeví. Vodorovné varianty (left/right) mají vliv na mobilu, kde je výřez naopak vysoký. Svislá složka funguje vždy. */ /* Jemné firemní podbarvení tmavých ploch (CTA pásy, teasery) */ .ec-glow{ background: radial-gradient(38rem 20rem at 88% -20%, rgba(200,16,46,.22), transparent 62%), radial-gradient(30rem 18rem at 4% 120%, rgba(224,177,63,.09), transparent 60%), var(--ec-ink-800); } /* Nadzáhlaví sekcí ("NAŠE SLUŽBY") */ .ec-eyebrow{ letter-spacing:.16em; } /* Číslované kolečko u kroků postupu. Bootstrap kruh dělaný jen paddingem vyjde u jednociferného obsahu užší než vysoký (svislá elipsa), proto má pevný rozměr. Dvojciferná čísla se vejdou beze změny. */ .ec-step{ inline-size:2.75rem; block-size:2.75rem; } /* Nadzvednutí karty při přejezdu myší */ .ec-lift{ transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .ec-lift:hover{ transform:translateY(-.35rem); border-color:var(--ec-lift-border)!important; box-shadow:var(--ec-lift-shadow); } /* Logo je zatím černá kresba na bílém JPG. Inverze + režim prolnutí z něj na tmavém pozadí udělá bílou kresbu bez bílého rámečku okolo. Až dodá klient logo s průhledným pozadím, tuto třídu z odeberte. */ .ec-logo{ filter:invert(1); mix-blend-mode:screen; } /* Kotvy pod fixní hlavičkou */ :target{ scroll-margin-top:7rem; } html{ scroll-behavior:smooth; } /* Viditelný fokus pro klávesovou navigaci (přístupnost) */ a:focus-visible,button:focus-visible, .btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible{ outline:.1875rem solid var(--ec-gold); outline-offset:.125rem; } /* ========================================================================== Aurora - padding/margin ========================================================================== */ .section-3-col-bottom-text h3, .section-3-col-bottom-text .h3, .section-3-col-bottom-text p, .section-3-col-top-text h3, .section-3-col-top-text .h3, .section-3-col-top-text p { max-width: 100%; margin: unset; margin-bottom: 1rem; } .section--header~.perex, .section--header~.section-perex, .perex { display: block; margin-top: 0; text-align: left; padding-left: 0; padding-right: 0; } .section--header { text-align: left; padding-bottom: 0; padding-left: 0; padding-right: 0; } /* padding, margin */ .main>.container:first-child, .main>.motive__motto:first-child, .container--article { padding-bottom: 0rem } body:not(#galleries) #main { padding-top: 0rem; } body:not(.rubric):not(.product-detail):not(#galleries):not(.gallery-detail):not(#sections) #main { padding-bottom: 0rem; } #index .main, #index .container--article, #index .main>.container:first-child { padding-bottom: 0; } #user-info-content, .container.container--files:first-child, .container--files { padding-bottom: clamp(1.5rem, 3vw, 4rem); } .category-wrapper, .article-item-wrapper, .file-item-wrapper, .comment-item-wrapper { margin-bottom: 2.3rem; padding-right: calc(var(--bs-gutter-x)* .6); padding-left: calc(var(--bs-gutter-x)* .6); } .gallery { margin-bottom: 1rem; } .section-container:not(.section-bg)+p+.section-container:not(.section-bg) { padding-top: 0; } section .section-bg-light, section .section--bg, section .section-bg { padding: 1rem !important; margin: 0; } .section-3-col-bottom-text .section-cell-item, .section-3-col-top-text .section-cell-item { margin-top: 0.5rem; margin-bottom: 0.5rem; z-index: 1; } .section-3-col-bottom-text, .section-3-col-top-text { text-align: left; -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset } .section-3-col-bottom-text img, .section-3-col-top-text img { margin-bottom: 0em } .section-cell-img { margin-bottom: 1em; } .section-fullwidth.section-map *, .section--fullwidth.section-map * { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* section-fullwidth */ .section-fullwidth .row, .section--fullwidth .row { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } .section-bg.section-fullwidth, .section-bg.section--fullwidth { padding-left: 0 !important; padding-right: 0 !important; } .section--fullwidth, .section-fullwidth { margin-left: -0.75rem !important; margin-right: -0.75rem !important; } @media(min-width: 576px) { .section--fullwidth, .section-fullwidth { margin-left: calc((-100vw + 540px - (2 * 0.5rem))/2) !important; margin-right: calc((-100vw + 540px - (2 * 0.5rem))/2) !important; } } @media(min-width: 768px) { .section--fullwidth, .section-fullwidth { margin-left: calc((-100vw + 720px - (2 * 0.5rem))/2) !important; margin-right: calc((-100vw + 720px - (2 * 0.5rem))/2) !important; } } @media(min-width: 992px) { .section--fullwidth, .section-fullwidth { margin-left: calc((-100vw + 960px - (2 * 0.5rem))/2) !important; margin-right: calc((-100vw + 960px - (2 * 0.5rem))/2) !important; } } @media(min-width: 1200px) { .section--fullwidth, .section-fullwidth { margin-left: calc((-100vw + 1140px - (2 * 0.5rem))/2) !important; margin-right: calc((-100vw + 1140px - (2 * 0.5rem))/2) !important; } } @media(min-width: 1400px) { .section--fullwidth, .section-fullwidth { margin-left: calc((-100vw + 1320px - (2 * 0.5rem))/2) !important; margin-right: calc((-100vw + 1320px - (2 * 0.5rem))/2) !important; } } /*other*/ .perex__text-wrapper, .section-perex__text-wrapper { text-align: left; } .font-size-fluid, .col-text, .section--header, .section--text, .section-blank, .section-title, .section-header, .section-cta, .section-2-col-right-text, .section-2-col-left-text { font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); } .section-dynamic .article-item-wrapper { flex: unset; } .section-cta, .section--cta { text-align: left; } /*table*/ .table-overflow tr:first-of-type, .table-collapse td:first-of-type { font-weight: inherit !important; } /*stejná výška ve vypisu*/ .categories--root .category, .file-item, .product-item { height: 100% !important; } /*breadcrumb*/ .breadcrumb__list { display: flex; } hr { background-color: var(--in-primary); } /*srovnání velikosti písma*/ @media(min-width: 768px) { body, table, form, .accordion-button, .font-size-fluid, .col-text, .section--header, .section--text, .section-blank, .section-title, .section-header, .section-cta, .section-2-col-right-text, .section-2-col-left-text { font-size: initial; line-height: var(--bs-body-line-height); } } /**/ /*menu uzsi vzhled*/ @media(min-width:1200px) { .menu-horizontal .contactus, .menu-horizontal #navbar { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; max-width: 1140px } } @media(min-width: 1400px) { .menu-horizontal .contactus, .menu-horizontal #navbar { max-width: 1320px } } /**/ @media(min-width:992px) { .navbar__menu>ul>li:last-of-type a, .navbar__menu { margin-right: 0 } } /*breadcrumb uzsi vzhled*/ .breadcrumb { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto } @media(min-width: 576px) { .breadcrumb { max-width: 540px } } @media(min-width: 768px) { .breadcrumb { max-width: 720px } } @media(min-width: 992px) { .breadcrumb { max-width: 960px } } @media(min-width: 1200px) { .breadcrumb { max-width: 1140px } } @media(min-width: 1400px) { .breadcrumb { max-width: 1320px } } /*uprava velikosti loga*/ @media(min-width: 1200px) { .menu-horizontal .navbar__brand { min-height: 3rem } } .menu-horizontal .navbar__brand-logo-img { max-width: 13rem; max-height: 4rem } @media(min-width: 576px) { .menu-horizontal .navbar__brand-logo-img { max-width: 15rem } } @media(min-width: 1200px) { .menu-horizontal .navbar__brand-logo-img { max-width: 20rem; max-height: 5rem } } /* Bloky s uzsim containerem ====================================================================== */ .container--article .col-text, .container--article .section--header, .container--article .section--text, .container--article .section-blank, .container--article .section-title, .container--article .section-header, .container--article .section-cta, .container--article .col-text.section-bg-light>*, .container--article .col-text.section-bg>*, .container--article .section--header.section-bg-light>*, .container--article .section--header.section-bg>*, .container--article .section--text.section-bg-light>*, .container--article .section--text.section-bg>*, .container--article .section-blank.section-bg-light>*, .container--article .section-blank.section-bg>*, .container--article .section-title.section-bg-light>*, .container--article .section-title.section-bg>*, .container--article .section-header.section-bg-light>*, .container--article .section-header.section-bg>*, .container--article .section-cta.section-bg-light>*, .container--article .section-cta.section-bg>*, .section--3-col-text-bottom h3, .section--3-col-text-bottom p, .section--3-col-text-top h3, .section--3-col-text-top p, .comments, .top-products__title, .active-category__title, .perex, .section-perex, .sitemap, .product-page__description .section-dynamic[data-dynamic-type="folder"], .col-text.section-bg-light>*, .col-text.section-bg>*, .section--header.section-bg-light>*, .section--header.section-bg>*, .section--text.section-bg-light>*, .section--text.section-bg>*, .section-blank.section-bg-light>*, .section-blank.section-bg>*, .section-title.section-bg-light>*, .section-title.section-bg>*, .section-header.section-bg-light>*, .section-header.section-bg>*, .section-cta.section-bg-light>*, .section-cta.section-bg>*, .section-pricelist.section-bg-light>*, .section-pricelist.section-bg>*, .col-text, .section--header, .section--text, .section-blank, .section-title, .section-header, .section-cta, .section-pricelist, .section-3-col-bottom-text h3, .section-3-col-bottom-text .h3, .section-3-col-bottom-text p, .section-3-col-top-text h3, .section-3-col-top-text .h3, .section-3-col-top-text p { max-width: unset; } @media (min-width: 768px) { .user-form, .form-row--center .form-row__text, .account-form__fieldset, .form-row--center .form-row__text { max-width: 100%; } } @media (min-width: 992px) { .section-3-col-bottom-text h3, .section-3-col-bottom-text .h3, .section-3-col-bottom-text p, .section-3-col-top-text h3, .section-3-col-top-text .h3, .section-3-col-top-text p { max-width: unset; } }