/* Generováno: php scripts/build-css.php (plán 82). Needitovat, zdroje jsou v assets/css/vb/ a assets/css/. */ @layer vb.legacy, vb.base, vb.layout, vb.components, vb.variants, vb.utilities; @layer vb.legacy{ /* assets/css/vb/legacy/bootstrap-subset.css */ /*! * Bootstrap v4.6.2 (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,pre{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:.875em;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.blockquote{margin-bottom:1rem;font-size:1.25rem}.img-fluid{max-width:100%;height:auto}.figure{display:inline-block}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}a>code{color:inherit}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.container,.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-12,.col-3,.col-6,.col-lg-4,.col-lg-6,.col-lg-auto,.col-md-12,.col-md-3,.col-md-4,.col-md-6,.col-md-8,.col-md-9,.col-sm-12,.col-sm-6,.col-xl-3,.col-xl-4,.col-xl-6{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}@media (min-width:576px){.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width:768px){.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width:992px){.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}}@media (min-width:1200px){.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}}.table{width:100%;margin-bottom:1rem;color:#212529}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{color:#212529;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#7abaff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#b3b7bb}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#8fd19e}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#86cfda}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#ffdf7e}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#ed969e}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfc}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#95999c}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#343a40;border-color:#454d55}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#343a40}.table-dark td,.table-dark th,.table-dark thead th{border-color:#454d55}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}input[type=date].form-control,input[type=month].form-control,input[type=time].form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control:-moz-focusring{color:transparent;text-shadow:0 0 0 #495057}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}select.form-control[multiple],select.form-control[size]{height:auto}textarea.form-control{height:auto}.form-group{margin-bottom:1rem}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529;text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc;box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#5a6268;border-color:#545b62;box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#23272b;border-color:#1d2124;box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-outline-primary{color:#007bff;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.dropdown{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1.5rem;color:#212529}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar .container,.navbar .container-fluid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav .dropdown-menu{position:static;float:none}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;min-height:1px;padding:1.25rem}.breadcrumb{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.badge{transition:none}}a.badge:focus,a.badge:hover{text-decoration:none}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-success{color:#fff;background-color:#28a745}a.badge-success:focus,a.badge-success:hover{color:#fff;background-color:#1e7e34}a.badge-success.focus,a.badge-success:focus{outline:0;box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.badge-info{color:#fff;background-color:#17a2b8}a.badge-info:focus,a.badge-info:hover{color:#fff;background-color:#117a8b}a.badge-info.focus,a.badge-info:focus{outline:0;box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:focus,a.badge-danger:hover{color:#fff;background-color:#bd2130}a.badge-danger.focus,a.badge-danger:focus{outline:0;box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-link{font-weight:700}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;line-height:0;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:hover{color:#000;text-decoration:none}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{opacity:.75}button.close{padding:0;background-color:transparent;border:0}a.close.disabled{pointer-events:none}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}@-webkit-keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentcolor;border-right-color:transparent;border-radius:50%;-webkit-animation:.75s linear infinite spinner-border;animation:.75s linear infinite spinner-border}@-webkit-keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1;-webkit-transform:none;transform:none}}@keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1;-webkit-transform:none;transform:none}}@media (prefers-reduced-motion:reduce){.spinner-border{-webkit-animation-duration:1.5s;animation-duration:1.5s}}.bg-light{background-color:var(--vb-surface-light,#f8f9fa)!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:var(--vb-surface-white,#fff)!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-light{border-color:#f8f9fa!important}.rounded{border-radius:.25rem!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-block{display:block!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-inline{display:inline!important}.d-sm-block{display:block!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-inline{display:inline!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9::before{padding-top:56.25%}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}@media (min-width:576px){.align-items-sm-center{-ms-flex-align:center!important;align-items:center!important}}@media (min-width:1200px){.justify-content-xl-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-center{-ms-flex-pack:center!important;justify-content:center!important}.align-items-xl-center{-ms-flex-align:center!important;align-items:center!important}}.overflow-hidden{overflow:hidden!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.w-100{width:100%!important}.h-100{height:100%!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.pt-5{padding-top:3rem!important}.pb-5{padding-bottom:3rem!important}@media (min-width:576px){.mb-sm-0{margin-bottom:0!important}}@media (min-width:768px){.mb-md-3{margin-bottom:1rem!important}}@media (min-width:992px){.pr-lg-3{padding-right:1rem!important}}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0)}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-uppercase{text-transform:uppercase!important}.font-weight-bold{font-weight:700!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0056b3!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#494f54!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#19692c!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#a71d2a!important}.text-muted{color:#6c757d!important}.text-decoration-none{text-decoration:none!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important} /* assets/css/styles.css */ /* ========================================================================== TABLE OF CONTENTS ========================================================================== 1. CSS Variables (:root) 2. Base / Reset 3. Typography (h1-h6, .text-*, font classes) 4. Layout (.container, grid utilities) 5. Components - Buttons 6. Components - Cards 7. Components - Tables 8. Components - Forms 9. Components - Navigation 10. Modules (scrollbar) 11. Utilities (visibility, spacing, colors) 12. Responsive / Media Queries (component-specific queries inline) 13. Animations (@keyframes) ========================================================================== */ /* ========================================================================== 1. CSS VARIABLES ========================================================================== */ /* * CSS Custom Properties Overview * ============================== * * Variables defined here in :root are static defaults. * Most variables are set dynamically from Kirby Panel via inline styles * in head.php (injected into tag). * * CATEGORIES OF DYNAMIC VARIABLES (set in head.php): * * Typography: * --font-family-headings Heading font (from design page) * --font-family-body Body text font * --font-family-body-bold Bold variant of body font * --font-family-main-typeface Main brand typeface for showcases * --heading-scale Scale factor for heading sizes (0.8-1.2) * --heading-kerning Letter-spacing for headings (em) * --body-line-height Line height for body text * --base-font-size Base font size in px * * Colors - Brand: * --header-color Header background color * --title-color Main title color * --headings-color H1-H6 text color * --text-color Body text color * --link-color Anchor link color * --button-primary-color Primary button bg/border * --button-multibrand-color Multibrand button color * --button-multibrand-color-hover Multibrand button hover * * Colors - Gray Scale (--gray-00 to --gray-100): * Computed from base gray, used for subtle UI elements * * Colors - Status: * --success-color Success/allowed states (green) * --danger-color Error/forbidden states (red) * * Cards: * --card-logo-bg Logo card background * --card-color-bg Color palette card background * --card-typography-bg Typography card background * --card-bottom-bg-color Card footer background * --card-bottom-hover-color Card footer hover state * --card-bottom-heading-color Card footer heading color * --card-bottom-text-color Card footer text color * --dynamic-web-bg-color Page background color * --dynamic-blocks-bg-color Module blocks background * * Tables: * --table-color-bg Table background * --table-hover-bg Table row hover background * --table-font-size Table cell font size * --table-line-color Table border color * * UI Components: * --scrollbar-color Custom scrollbar track color * --tooltip-text-color Tooltip text * --tooltip-bg-color Tooltip background * --info-box-text-color Alert box text * --info-box-bg-color Alert box background * --info-badge-text-color Badge text * --info-badge-bg-color Badge background * --visualbook-description-color Description block text * * Border Radius: * --border-radius-card Cards, tables, modules * --border-radius-button Buttons * --border-radius-header-button Header/nav buttons * --border-radius-badge Badges * --border-radius-tooltip Tooltips * * Logo Backgrounds: * --logo-dark-bg Dark background for light logos * --logo-light-bg Light background for dark logos */ :root { /* ========================================================================== STATIC CSS VARIABLES (not set dynamically) ========================================================================== */ /* Logo sizing - default dimensions for logo containers Used with .logo-size class on body, affects elements in cards and headers */ --logo-header-size: 150px; /* Header logo max-width */ --logo-main-card-size: 50%; /* Main logo card width (primary logo) */ --logo-horizontal-size: 60%; /* Horizontal logo variant width */ --logo-vertical-size: 40%; /* Vertical logo variant width */ --logo-symbol-size: 25%; /* Symbol/icon logo width */ /* --body-kerning is set in dynamic-css/design.css from design.yml (bodyKerning) */ /* ========================================================================== BORDERS & LINES ========================================================================== */ --border-color: #e2e2e2; /* Primary border color */ --border-color-light: #ededed; /* Lighter border variant */ --line-color: #ebebeb; /* Decorative lines (cards, dividers) */ --table-line-color: #e2e2e2; /* Table row/column borders */ /* ========================================================================== BACKGROUNDS (static defaults) ========================================================================== */ --bg-subtle: #fbfbfb; /* Subtle background (bg-light) */ --bg-indicator: #fafafa; /* Indicator icons background */ --bg-input: #f3f3f6; /* Form input backgrounds */ --bg-meter: #f7f7f7; /* Meter/progress bar background */ /* ========================================================================== TEXT COLORS (static defaults) ========================================================================== */ --color-white: #ffffff; /* White color for badges, buttons etc. */ --text-muted: #6f6f6f; /* Muted text (table headers, etc.) */ --text-dark: #525252; /* Dark text for alerts, UI elements */ --indicator-color: #8d8d8d; /* Indicator icon color */ /* ========================================================================== SPACING ========================================================================== */ --spacing-card-mobile: 1.4rem; /* Card/table padding on mobile */ --spacing-card-desktop: 1.9rem; /* Card/table padding on desktop */ /* ========================================================================== TRANSITIONS ========================================================================== */ --transition-fast: 0.15s ease-in-out; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* ========================================================================== SHADOWS ========================================================================== */ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.02); --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* ========================================================================== BUTTON COLORS (secondary/dark variants - primary set dynamically in head.php) ========================================================================== */ --button-secondary-color: #898e9e; --button-secondary-hover: #7b8192; --button-secondary-focus: #73798c; --button-secondary-active: #6e7486; --button-dark-border: #4f525f; --button-dark-hover: #0150e3; --button-dark-focus: #3c3f49; --button-dark-active: #383a43; --button-dark-active-focus: #434651; --button-language-color: #a4a8b8; } /* ========================================================================== BREAKPOINT REFERENCE ========================================================================== * * This project follows Bootstrap 5 breakpoint system. * CSS custom properties cannot be used in media queries, so breakpoints * are documented here as a reference. * * BOOTSTRAP 5 STANDARD BREAKPOINTS: * +-----------+------------+------------------+--------------------+ * | Name | min-width | max-width | Description | * +-----------+------------+------------------+--------------------+ * | xs | 0 | 575.98px | Extra small phones | * | sm | 576px | 767.98px | Small phones | * | md | 768px | 991.98px | Tablets | * | lg | 992px | 1199.98px | Desktops | * | xl | 1200px | 1399.98px | Large desktops | * | xxl | 1400px | - | Extra large | * +-----------+------------+------------------+--------------------+ * * USAGE CONVENTIONS: * - Mobile-first: Use min-width for progressive enhancement * @media (min-width: 768px) { ... } * * - Desktop-first: Use max-width with .98px to avoid overlap * @media (max-width: 767.98px) { ... } * * BREAKPOINTS USED IN THIS PROJECT: * - 576px (sm) - Small devices, landscape phones * - 768px (md) - Tablets, primary breakpoint (23× used) * - 992px (lg) - Desktops * - 1200px (xl) - Large desktops * * CUSTOM BREAKPOINTS (non-Bootstrap): * - 400px - Extra small mobile (edge case) * - 480px - Small mobile landscape * - 700px - Custom tablet (legacy, consider migrating to 768px) * * NOTE: When using max-width, always use .98px suffix to prevent * overlap with min-width queries at the same breakpoint. * Example: max-width: 767.98px (not 768px or 767px) * * ========================================================================== */ /* White background mode - used for static export and print */ body.white-bg-mode { background-color: var(--color-white); --dynamic-blocks-bg-color: var(--bg-subtle); } /* ========================================================================== 2. BASE / RESET ========================================================================== */ html { position: relative; min-height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; overflow: auto; /* !important: Bootstrap body uses system-ui stack and loads before this file */ font-family: var(--font-family-body) !important; letter-spacing: var(--body-kerning, 0); background-color: var(--dynamic-web-bg-color); margin: 0; padding-bottom: 200px; /* Footer height */ } body p { color: var(--text-color); font-size: calc(var(--base-font-size) * 0.9375); letter-spacing: var(--body-kerning, 0) !important; } body .table, body .alert, body .breadcrumb { font-family: var(--font-family-body); font-size: calc(var(--base-font-size) * 0.9375); letter-spacing: var(--body-kerning, 0) !important; } a { color: var(--link-color) !important; } a:hover { color: var(--link-color); } li { color: var(--text-color); } section { position: relative; } header { position: relative; z-index: 2; } .footer { position: absolute; right: 0; bottom: 0; left: 0; } /* Header and background colors */ .header-bg-color { background-color: var(--header-color); } .header-content-bg-color { background-color: var(--header-color); } .header-text-color { color: var(--title-color) !important; } .breadcrumb-bg-color { background-color: var(--dynamic-web-bg-color); } .breadcrumb-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } nav[aria-label="breadcrumb"] .breadcrumb.flex-nowrap { flex-wrap: nowrap; white-space: nowrap; } /* Předci drží šířku: plovoucí "/" se do smrštěné šířky nepočítá, takže text přetékal přes další oddělovač. Ustupuje jen aktuální stránka (je to H1 nad drobečky), a to výpustkou. */ nav[aria-label="breadcrumb"] .breadcrumb > .breadcrumb-item { flex-shrink: 0; } nav[aria-label="breadcrumb"] .breadcrumb > .breadcrumb-item.active { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Mobil: tolik úrovní, kolik se jich vejde celých (vybírá assets/js/breadcrumb-fit.js). Než skript změří – a bez JS – jen odkaz zpět na nejbližšího předka ("‹ Rodič"). */ @media (max-width: 767.98px) { nav[aria-label="breadcrumb"] .breadcrumb { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Ve flexu se float ignoruje, takže "/" sedí na středu vysokého odkazu */ nav[aria-label="breadcrumb"] .breadcrumb > .breadcrumb-item { display: flex; align-items: center; } /* Celý řádek je dotyková plocha (min. 44 px). Výška je ve všech stavech stejná, takže volba skriptu nehýbe obsahem pod drobečky. */ nav[aria-label="breadcrumb"] .breadcrumb-item > a, nav[aria-label="breadcrumb"] .breadcrumb-item > span { display: block; min-height: 2.75rem; padding: 0.625rem 0; } /* Skript ukazuje jen celé názvy – místo zkracování ubírá celé úrovně */ nav[aria-label="breadcrumb"] .breadcrumb > .breadcrumb-item.active { flex-shrink: 0; } nav[aria-label="breadcrumb"]:not([data-crumbs]) .breadcrumb > .breadcrumb-item:not(.breadcrumb-item--parent), nav[aria-label="breadcrumb"] .breadcrumb > .breadcrumb-item--cut { display: none; } /* První zobrazená úroveň je bez oddělovače před sebou */ nav[aria-label="breadcrumb"]:not([data-crumbs]) .breadcrumb > .breadcrumb-item--parent, nav[aria-label="breadcrumb"][data-crumbs] .breadcrumb > .breadcrumb-item--lead { padding-left: 0; } nav[aria-label="breadcrumb"]:not([data-crumbs]) .breadcrumb > .breadcrumb-item--parent::before, nav[aria-label="breadcrumb"][data-crumbs] .breadcrumb > .breadcrumb-item--lead::before { content: none; } /* "‹ Rodič" je poslední možnost – jen tady se název smí zkrátit výpustkou */ nav[aria-label="breadcrumb"]:not([data-crumbs]) .breadcrumb > .breadcrumb-item--parent, nav[aria-label="breadcrumb"][data-crumbs="back"] .breadcrumb > .breadcrumb-item--parent { flex-shrink: 1; min-width: 0; } nav[aria-label="breadcrumb"]:not([data-crumbs]) .breadcrumb-item--parent > a, nav[aria-label="breadcrumb"][data-crumbs="back"] .breadcrumb-item--parent > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; } nav[aria-label="breadcrumb"]:not([data-crumbs]) .breadcrumb-item--parent > a::before, nav[aria-label="breadcrumb"][data-crumbs="back"] .breadcrumb-item--parent > a::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.5em 0.125em 0.2em; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); vertical-align: middle; } } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 0.65rem 1rem; background: var(--title-color, #212529); color: #fff !important; text-decoration: none; font-size: 0.9rem; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; outline: 2px solid var(--button-primary-color, #fe1a3f); outline-offset: 2px; } /* Globální .alert má padding-bottom: 0 — pro empty state obnovit svislou symetrii */ .vb-empty-state.alert { padding-bottom: 0.75rem; } .vb-empty-state .vb-empty-state__icon { font-size: 1.35rem; line-height: 1.2; margin-right: 0.65rem; margin-top: 0.1rem; opacity: 0.75; } /* Decorative lines */ .color-swatch-card-line { position: absolute; width: 100%; bottom: 0; left: 0; height: 1px; background-color: var(--line-color); mix-blend-mode: multiply; } .color-card-line { position: absolute; width: 100% !important; bottom: 100%; left: 0; right: 0; z-index: 1; background-color: var(--line-color); height: 1px; mix-blend-mode: multiply; } .header-card-line { z-index: 1; background-color: var(--line-color); mix-blend-mode: multiply; } .main-card-line { z-index: 70; margin-top: -1px; background-color: var(--gray-15); mix-blend-mode: multiply; } /* Glyphs */ .glyphs { font-weight: 700; display: flex; flex-wrap: wrap; } .glyphs div { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-30); margin-left: -1px; margin-top: -1px; color: var(--gray-10); } .glyphs div:hover { background-color: var(--gray-10); } .glyphs div p { color: var(--text-color); margin-bottom: 0; } /* Ratio containers */ .ratio-main-card { position: relative; } .ratio-main-card:before { display: block; content: " "; width: 100%; padding-top: 68%; } .ratio-main-card > .logo-image, .ratio-main-card > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; } .ratio-16-9 { position: relative; overflow: hidden; } .ratio-16-9:before { display: block; content: " "; width: 100%; padding-top: 56.25%; } .ratio-16-9 > .logo-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ratio-4-3 { position: relative; width: 100%; overflow: hidden; } .ratio-4-3:before { display: block; content: " "; width: 100%; padding-top: 75%; } .ratio-4-3 > .logo-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Logo transformations (not allowed examples) */ .not-allowed-logo-shadow { filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.4)); } .not-allowed-logo-transform { transform: rotate(10deg); } .not-allowed-logo-recolor { filter: invert(80%); } .not-allowed-logo-deformation { transform: scale(1, 0.8); } /* --------------------------------------------------------------------------- Base/Reset - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { body p { font-size: calc(var(--base-font-size) * 1); } body .table, body .alert, body .breadcrumb { font-size: calc(var(--base-font-size) * 1); } } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ /* --------------------------------------------------------------------------- 3.1 Headings (h1-h6) - Base styles (mobile-first) --------------------------------------------------------------------------- */ /* Shared heading properties (font-family, letter-spacing from --heading-kerning) */ body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--font-family-headings); letter-spacing: var(--heading-kerning, 0) !important; } .font-name-display { font-family: var(--font-family-headings); letter-spacing: 0 !important; } /* Shared heading color (h2-h6 use --headings-color, h1 uses --title-color) */ body h2, body h3, body h4, body h5, body h6, .font-name-display { color: var(--headings-color) !important; } /* Náhled písma: tmavý režim přebarví přes --vb-font-preview-color (dark.css) */ .font-name-display { color: var(--vb-font-preview-color, var(--headings-color)) !important; } body h1 { color: var(--title-color) !important; font-size: calc(1.9rem * var(--heading-scale)); } body h2 { font-size: calc(1.8rem * var(--heading-scale)); } body h3 { font-size: calc(1.45rem * var(--heading-scale)); } body h4 { font-size: calc(1.35rem * var(--heading-scale)); } body h5 { font-size: calc(1.1rem * var(--heading-scale)); } body h6 { font-size: calc(0.9375rem * var(--heading-scale)); } /* --------------------------------------------------------------------------- 3.2 Font Display Classes - Base styles (mobile-first) --------------------------------------------------------------------------- */ .font-name-display { font-size: 1.8rem; line-height: 1.3; } /* Typography card font display */ body .card-typography .card-typography-font { font-size: 6.5rem; color: var(--card-typography-text-color) !important; line-height: 1.1; } .text-small { font-size: 0.875rem !important; } /* Display text styles */ body .text-display-additional { font-size: 9rem; color: var(--headings-color) !important; margin-bottom: -1rem; margin-top: -1rem; line-height: 1.1; } body .text-display-main { font-size: 9rem; color: var(--vb-font-preview-color, var(--headings-color)) !important; margin-bottom: -1rem; margin-top: -1rem; line-height: 1.1; } /* UI labels beside logo previews — vestavěná Mona Sans + ss05 (synchronizovat s visualbook_builtin_mona_builtin_feature_settings) */ .use-monasans-ui { font-family: 'Mona Sans', 'Mona Sans Fallback', var(--font-family-body, system-ui, sans-serif), sans-serif !important; font-weight: 500; font-feature-settings: "ss05" 0, "calt" 0, "rvrn" 0; } /* --------------------------------------------------------------------------- 3.3 Heading hierarchy – visual size preservation classes --------------------------------------------------------------------------- */ /* * When fixing the heading hierarchy (h3→h2, h5→h3, h6→h4), * these classes lock the visual font-size to the OLD heading level * so the rendered appearance stays identical. */ body .vb-h3 { font-size: calc(1.45rem * var(--heading-scale)); } body .vb-h5 { font-size: calc(1.1rem * var(--heading-scale)); } body .vb-h6 { font-size: calc(0.9375rem * var(--heading-scale)); } /* * Accordion (rozbalovací obsah) body text uses the same full TipTap toolbar as * the main text field, whose H3 (Nadpis) / H4 (Podnadpis) are too large inside a * collapsed panel. Render them one step down — H3 at H5 size, H4 at H6 size — * for every accordion item's content (acordeonTextarea everywhere; the font * module's accordion uses imageTextarea inside a .vb-accordion__body). Sizes mirror the * h5/h6 scale, including the 768px / 992px breakpoints below. */ [data-field-name="acordeonTextarea"] h3, .vb-accordion__body[data-field-name="imageTextarea"] h3 { font-size: calc(1.1rem * var(--heading-scale)); } [data-field-name="acordeonTextarea"] h4, .vb-accordion__body[data-field-name="imageTextarea"] h4 { font-size: calc(0.9375rem * var(--heading-scale)); } @media (min-width: 768px) { [data-field-name="acordeonTextarea"] h3, .vb-accordion__body[data-field-name="imageTextarea"] h3 { font-size: calc(1.15rem * var(--heading-scale)); } [data-field-name="acordeonTextarea"] h4, .vb-accordion__body[data-field-name="imageTextarea"] h4 { font-size: calc(0.95rem * var(--heading-scale)); } } @media (min-width: 992px) { [data-field-name="acordeonTextarea"] h3, .vb-accordion__body[data-field-name="imageTextarea"] h3 { font-size: calc(1.2rem * var(--heading-scale)); } [data-field-name="acordeonTextarea"] h4, .vb-accordion__body[data-field-name="imageTextarea"] h4 { font-size: calc(1rem * var(--heading-scale)); } } /* Multi-line truncation: max 2 lines with ellipsis */ .vb-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } /* * Line-clamp card footers: flex + vertical center. * Bootstrap .align-items-stretch uses !important — we must match it when the strip is display:flex. * Logos row (no .card-bottom-area): height ~ 1 text line (vb-h5 slot). * Homepage .card-bottom-area: lh 1.2, svislé mezery mezi plným paddingem .card-main a velmi úzkým pásem. */ .card-main:not(.card-bottom-area):has(.vb-line-clamp-2) { box-sizing: border-box; height: calc(2 * var(--spacing-card-mobile) + 1.1rem * var(--heading-scale, 1) * 1.4) !important; min-height: 0; flex-shrink: 0; display: flex; align-items: center !important; } .card-main.card-bottom-area:has(.vb-line-clamp-2) { box-sizing: border-box; /* svislý padding „napůl“ mezi plnou .card-main a příliš štíhlou variantou; height = horní+dolní + 2 řádky lh 1.2 */ padding: 1rem var(--spacing-card-mobile) !important; height: calc(2rem + 2 * 1.1rem * var(--heading-scale, 1) * 1.2) !important; min-height: 0; flex-shrink: 0; display: flex !important; align-items: center !important; } /* Flex item = nadpis, line-clamp jen uvnitř (ne kombinovat flex s -webkit-box na jednom prvku) */ .card-main.card-bottom-area:has(.vb-line-clamp-2) > h2 { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } /* Dědit typografii z h2.vb-h3 (span má display:-webkit-box) */ .card-main.card-bottom-area h2.vb-h3 > .vb-line-clamp-2 { width: 100%; font: inherit; line-height: 1.2; } @media (min-width: 768px) { .card-main:not(.card-bottom-area):has(.vb-line-clamp-2) { height: calc(2 * var(--spacing-card-desktop) + 1.15rem * var(--heading-scale, 1) * 1.4) !important; } .card-main.card-bottom-area:has(.vb-line-clamp-2) { padding: 1.3rem var(--spacing-card-desktop) !important; height: calc(2.6rem + 2 * 1.15rem * var(--heading-scale, 1) * 1.2) !important; } } @media (min-width: 992px) { .card-main:not(.card-bottom-area):has(.vb-line-clamp-2) { height: calc(2 * var(--spacing-card-desktop) + 1.2rem * var(--heading-scale, 1) * 1.4) !important; } .card-main.card-bottom-area:has(.vb-line-clamp-2) { padding: 1.35rem var(--spacing-card-desktop) !important; height: calc(2.7rem + 2 * 1.2rem * var(--heading-scale, 1) * 1.2) !important; } } /* --------------------------------------------------------------------------- 3.4 Anchor Points for H2 Section Headings --------------------------------------------------------------------------- */ section h2 { position: relative; cursor: pointer; } section h2.no-anchor { cursor: auto; } section h2:not(.homepage):not(.no-anchor)::before { content: ''; display: inline-block; position: absolute; left: -30px; top: 5px; width: 1.4rem; height: 1.4rem; opacity: 0; transition: opacity 0s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75765 14.8282L14.8287 7.75717Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } section h2:not(.homepage):not(.no-anchor).hover::before { opacity: 1; } body[data-frontend-editor-active="true"] section h2:not(.homepage):not(.no-anchor).hover::before, body[data-frontend-editor-active="true"] section h2:not(.homepage):not(.no-anchor).clicked::before { opacity: 0 !important; } section h2:not(.homepage):not(.no-anchor).clicked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z'/%3E%3C/svg%3E"); opacity: 1; } /* --------------------------------------------------------------------------- 3.5 Typography - Responsive (sm: 576px) --------------------------------------------------------------------------- */ @media (min-width: 576px) { body .card-typography .card-typography-font { font-size: 5rem; } body .text-display-additional, body .text-display-main { font-size: 9rem; } } /* --------------------------------------------------------------------------- 3.6 Typography - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { /* Headings */ body h1 { font-size: calc(2.15rem * var(--heading-scale)); } body h2 { font-size: calc(1.9rem * var(--heading-scale)); } body h3 { font-size: calc(1.5375rem * var(--heading-scale)); } body h4 { font-size: calc(1.425rem * var(--heading-scale)); } body h5 { font-size: calc(1.15rem * var(--heading-scale)); } body h6 { font-size: calc(0.95rem * var(--heading-scale)); } /* Heading hierarchy – visual size preservation */ body .vb-h3 { font-size: calc(1.5375rem * var(--heading-scale)); } body .vb-h5 { font-size: calc(1.15rem * var(--heading-scale)); } body .vb-h6 { font-size: calc(0.95rem * var(--heading-scale)); } /* Font displays */ .font-name-display { font-size: 1.9rem; } body .card-typography .card-typography-font { font-size: 7.5rem; } body .text-display-additional, body .text-display-main { font-size: 9rem; } } /* --------------------------------------------------------------------------- 3.7 Typography - Responsive (lg: 992px) --------------------------------------------------------------------------- */ @media (min-width: 992px) { /* Headings */ body h1 { font-size: calc(2.25rem * var(--heading-scale)); } body h2 { font-size: calc(2rem * var(--heading-scale)); } body h3 { font-size: calc(1.625rem * var(--heading-scale)); } body h4 { font-size: calc(1.5rem * var(--heading-scale)); } body h5 { font-size: calc(1.2rem * var(--heading-scale)); } body h6 { font-size: calc(1rem * var(--heading-scale)); } /* Heading hierarchy – visual size preservation */ body .vb-h3 { font-size: calc(1.625rem * var(--heading-scale)); } body .vb-h5 { font-size: calc(1.2rem * var(--heading-scale)); } body .vb-h6 { font-size: calc(1rem * var(--heading-scale)); } /* Font displays */ .font-name-display { font-size: 2rem; } body .card-typography .card-typography-font { font-size: 6.5rem; } body .text-display-additional, body .text-display-main { font-size: 10rem; } } /* --------------------------------------------------------------------------- 3.8 Typography - Responsive (xl: 1200px) --------------------------------------------------------------------------- */ @media (min-width: 1200px) { body .card-typography .card-typography-font { font-size: 7.5rem; } body .text-display-additional, body .text-display-main { font-size: 12rem; } } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { padding-top: 2rem; padding-bottom: 1rem; } .homepage-padding-top { padding-top: 1px; } /* Aspect ratio containers */ .aspect-ratio-container { position: relative; width: 100%; overflow: hidden; border-radius: var(--border-radius-card) !important; } .aspect-ratio-container-module { position: relative; width: 100%; overflow: hidden; } .aspect-16-9 .aspect-ratio-container::before, .aspect-4-3 .aspect-ratio-container::before, .aspect-1-1 .aspect-ratio-container::before { content: ''; display: block; width: 100%; } .aspect-16-9 .aspect-ratio-container::before { padding-top: 56.25%; } .aspect-4-3 .aspect-ratio-container::before { padding-top: 75%; } .aspect-1-1 .aspect-ratio-container::before { padding-top: 100%; } .aspect-16-9 img, .aspect-4-3 img, .aspect-1-1 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Video containers (consolidated) */ video, .kirbytext video { width: 100% !important; height: auto; border-radius: var(--border-radius-card) !important; } video { max-width: 100%; } /* --------------------------------------------------------------------------- Layout - Responsive (sm: 576px, md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 576px) { .container { padding-top: 2rem; } } @media (min-width: 768px) { .container { padding-top: 2.5rem; } } /* ========================================================================== 5. COMPONENTS - BUTTONS ========================================================================== Button architecture: - Shared reset: box-shadow: none for all button states - Base styles: padding, border-radius, colors - State styles: :hover, :focus, :active grouped where identical ========================================================================== */ /* --------------------------------------------------------------------------- 5.1 Shared Button Reset - removes box-shadow from all states --------------------------------------------------------------------------- */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-dark, .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-multibrand:hover, .btn-multibrand:focus, .btn-multibrand:active, .btn-multibrand.active, .btn-multibrand.active:focus, #back-button:active, #back-button:focus { box-shadow: none; } /* --------------------------------------------------------------------------- 5.2 Button - Primary --------------------------------------------------------------------------- */ .btn-primary { color: var(--vb-button-primary-text, white) !important; z-index: 3; padding: 0.8rem; padding-left: 2em !important; padding-right: 2em !important; background-color: var(--button-primary-color); border-color: var(--button-primary-color); border-radius: var(--border-radius-button); } /* Primary: all states keep same bg/border, only hover adds brightness */ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active:focus { background-color: var(--button-primary-color); border-color: var(--button-primary-color); } .btn-primary:hover { filter: brightness(110%); color: var(--vb-button-primary-text, white) !important; } /* --------------------------------------------------------------------------- 5.3 Button - Dark --------------------------------------------------------------------------- */ .btn-dark { color: white !important; z-index: 3; padding: 0.8rem; background-color: var(--gray-60); border-color: var(--button-dark-border); border-radius: var(--border-radius-button); } .btn-dark:hover { background-color: var(--button-dark-hover); border-color: var(--button-dark-hover); } .btn-dark:focus { background-color: var(--button-dark-focus); border-color: var(--button-dark-focus); } .btn-dark:active { background-color: var(--button-dark-active); border-color: var(--button-dark-active); } .btn-dark:not(:disabled):not(.disabled):active:focus { background-color: var(--button-dark-active-focus); border-color: var(--button-dark-active-focus); } /* --------------------------------------------------------------------------- 5.4 Button - Outline Primary --------------------------------------------------------------------------- */ .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: white; background-color: var(--button-primary-color); border-color: var(--button-primary-color); } .btn-outline-primary { z-index: 3; padding: 0.8rem; color: var(--button-primary-color) !important; border-color: var(--button-primary-color); border-radius: var(--border-radius-button); } /* Outline Primary: hover/focus fill with primary color */ .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--button-primary-color); border-color: var(--button-primary-color); color: var(--vb-button-primary-text, white) !important; } .btn-outline-primary:focus { filter: brightness(110%); } .btn-outline-primary:active { background-color: var(--button-primary-color); border-color: var(--button-primary-color); color: var(--button-primary-color) !important; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus { background-color: transparent; border-color: var(--button-primary-color); } /* --------------------------------------------------------------------------- 5.5 Button - Secondary (solid) --------------------------------------------------------------------------- */ .btn-secondary { padding: 0.8rem; background-color: var(--button-secondary-color); border-color: var(--button-secondary-color); border-radius: var(--border-radius-button); } .btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active:focus { background-color: var(--button-secondary-hover); border-color: var(--button-secondary-hover); } .btn-secondary:focus { background-color: var(--button-secondary-focus); border-color: var(--button-secondary-focus); } .btn-secondary:active { background-color: var(--button-secondary-active); border-color: var(--button-secondary-active); } /* --------------------------------------------------------------------------- 5.6 Button - Outline Secondary --------------------------------------------------------------------------- */ .btn-outline-secondary { padding: 0.8rem; color: var(--button-secondary-color) !important; border-color: var(--button-secondary-color); border-radius: var(--border-radius-button); } .btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus { background-color: var(--button-secondary-hover); border-color: var(--button-secondary-hover); color: white !important; } .btn-outline-secondary:focus { background-color: var(--button-secondary-focus); border-color: var(--button-secondary-focus); } .btn-outline-secondary:active { background-color: var(--button-secondary-active); border-color: var(--button-secondary-active); } /* --------------------------------------------------------------------------- 5.8 Button - Multibrand --------------------------------------------------------------------------- */ .btn-multibrand { color: var(--button-multibrand-color) !important; border-color: var(--button-multibrand-color) !important; background-color: transparent; height: 42px; } .btn-multibrand:hover, .btn-multibrand:active, .btn-multibrand.active, .btn-multibrand.active:focus { color: var(--button-multibrand-color-hover) !important; background-color: transparent; border-color: var(--button-multibrand-color-hover) !important; } .btn-multibrand:focus, #back-button:active, #back-button:focus { color: var(--button-multibrand-color) !important; background-color: transparent !important; border-color: var(--button-multibrand-color) !important; } .btn-multibrand-radius { border-radius: var(--border-radius-header-button) !important; } /* ========================================================================== 6. COMPONENTS - CARDS ========================================================================== */ .card { border-radius: 0; margin-bottom: -1px; border: 1px solid var(--border-color); } .card-body img { width: 100%; height: auto; } .card-bottom-area { background-color: var(--card-bottom-bg-color); } .card-bottom-area h1, .card-bottom-area h2, .card-bottom-area h3, .card-bottom-area h4, .card-bottom-area h5, .card-bottom-area h6 { color: var(--card-bottom-heading-color) !important; } .card-bottom-area p { color: var(--card-bottom-text-color); } .card-bottom-area li { color: var(--card-bottom-text-color); } .card-bottom-area:hover { background-color: var(--card-bottom-hover-color); } .dynamic-block { background-color: var(--dynamic-blocks-bg-color); } /* * Textové karty (module-cards, portal-cards, group-page, default/multibrand secondary): * když je v rohu ikona, nadpis nesmí zasahovat pod ni — :has() vybírá jen tyto případy. */ article.card-module:has(.lock-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator) > h3.vb-h5, article.card-main.dynamic-block:has(.lock-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator) > h3.vb-h5:first-of-type, article.card-main.dynamic-block:has(.lock-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator) > h2.vb-h5:first-of-type { padding-right: 2rem; } .card-main, .card-module, .card-secondary { padding: var(--spacing-card-mobile); } /* Consolidated card hover text-decoration (was 4 separate rules) */ .card-main:hover, .card-main a:hover, .card-module:hover, .card-module a:hover { text-decoration: none !important; } /* Consolidated card header styles (was 2 separate rules). .card-header web od plánu 82 F2 nepoužívá (akordeony jsou vb-accordion), zůstává jen kvůli statickým náhledům modulů v Panelu (assets/module-previews/html/*.html načítají styles.css). */ .card-header, .button-card-header { padding-left: var(--spacing-card-mobile); padding-right: var(--spacing-card-mobile); margin-bottom: -2px; vertical-align: middle; background-color: var(--gray-00); border-bottom: 1px solid var(--border-color) !important; } .card-header:hover { background-color: var(--gray-10); } .bg-card-logos { background-color: var(--card-logo-bg); } /* --------------------------------------------------------------------------- Cards - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .card-main, .card-module, .card-secondary { padding: var(--spacing-card-desktop); } .card-header, .button-card-header { padding-left: var(--spacing-card-desktop); padding-right: var(--spacing-card-desktop); } } /* ========================================================================== 7. COMPONENTS - TABLES ========================================================================== */ /* Consolidated table styles (was 2 identical rules) */ .table, .table table { color: var(--text-color); width: 100%; margin-bottom: 0rem; background-color: var(--table-color-bg); border-radius: var(--border-radius-card) !important; } .table tr { border-top-left-radius: var(--border-radius-card); border-top-right-radius: var(--border-radius-card); } thead tr { border-top-left-radius: var(--border-radius-card); border-top-right-radius: var(--border-radius-card); font-size: var(--table-font-size); } .table td { padding-left: var(--spacing-card-mobile); padding-right: var(--spacing-card-mobile); height: 4rem; vertical-align: middle; border-top: 1px solid var(--table-line-color) !important; } /* Table without a header: the wrapper's border is the top edge, so the first row's line would double it. */ .table > tbody:first-child > tr:first-child > td { border-top: none !important; } .table th { padding-left: var(--spacing-card-mobile); padding-right: var(--spacing-card-mobile); border-top: none; height: 4rem; line-height: 1.2; vertical-align: middle; font-weight: 400; font-size: var(--table-font-size); background-color: var(--gray-00); color: var(--text-muted); height: 64px; } .table tbody tr { font-size: var(--table-font-size); } .table tbody { border-bottom-left-radius: var(--border-radius-card); border-bottom-right-radius: var(--border-radius-card); } .table tbody tr:hover { background-color: var(--table-hover-bg); color: var(--text-color); } .table thead th { vertical-align: middle; border-bottom: none; border-top: none; font-weight: 400; font-size: var(--table-font-size); background-color: var(--gray-00); height: 64px; } .table-condensed { background-color: var(--table-color-bg); } .table-condensed td { height: 20px !important; border-top: none !important; } .table-condensed th { background-color: var(--table-color-bg); border-top: none; border-bottom: none; height: 1.8rem; vertical-align: middle; font-weight: 400; background-color: var(--table-color-bg); } .table-condensed tbody tr:hover { background-color: var(--table-hover-bg); } .table-condensed thead th { vertical-align: middle; font-weight: 400; font-size: 0.875rem; background-color: var(--table-color-bg); color: var(--gray-60); height: 64px; } /* Consolidated table header font-size (was 5 separate rules) */ thead.bg-light, thead.bg-light th, .table thead.bg-light th, .table thead.bg-light th h4, .table thead.bg-light th span.vb-h6, thead.bg-light th h4, thead.bg-light th span.vb-h6 { font-size: var(--table-font-size) !important; } /* Yes/No icons in table cells */ .yes-icon { display: none !important; } .no-icon { display: none !important; } .table-cell-settings.add-yes-icon .yes-icon { display: inline !important; } .table-cell-settings.add-no-icon .no-icon { display: inline !important; } /* --------------------------------------------------------------------------- Tables - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .table td, .table th { padding-left: var(--spacing-card-desktop); padding-right: var(--spacing-card-desktop); } } /* --------------------------------------------------------------------------- Tables - Style Variants Header bottom border (border-bottom-table class) is always preserved. --------------------------------------------------------------------------- */ /* Pod nadpisem tabulky bez popisku – stejná výška jako .frontend-editor-editable (20px) + mb-2 */ .vb-table-section-caption-gap { min-height: 20px; } /* Default style - clean, no cell borders (module-table + hardcoded page tables) */ .table.vb-table-default td { border: none !important; } /* Horizontal lines - row separators */ .table.vb-table-horizontal td { border-top: 1px solid var(--border-color, #e0e0e0) !important; border-left: none !important; border-right: none !important; border-bottom: none !important; } /* Vertical lines - column separators (header + body) */ .table.vb-table-vertical td, .table.vb-table-vertical th { border-top: none !important; border-bottom: none !important; border-right: none !important; border-left: 1px solid var(--border-color, #e0e0e0) !important; } .table.vb-table-vertical td:first-child, .table.vb-table-vertical th:first-child { border-left: none !important; } /* Preserve header bottom border for vertical style */ .table.vb-table-vertical thead th.border-bottom-table { border-bottom: 1px solid var(--border-color-light) !important; } /* Grid - internal borders only (header + body, outer border from container) */ .table.vb-table-grid td, .table.vb-table-grid th { border-right: 1px solid var(--border-color, #e0e0e0) !important; border-bottom: 1px solid var(--border-color, #e0e0e0) !important; border-top: none !important; border-left: none !important; } .table.vb-table-grid td:last-child, .table.vb-table-grid th:last-child { border-right: none !important; } .table.vb-table-grid tbody tr:last-child td { border-bottom: none !important; } /* ========================================================================== 8. COMPONENTS - FORMS ========================================================================== */ input, textarea { height: 40px; } input[type=range] { -webkit-appearance: none; appearance: none; background-color: var(--border-color); height: 6px; border-radius: 8px; border: solid var(--border-color-light) 1px; } input[type=number] { -webkit-appearance: none; appearance: none; background-color: var(--bg-input); height: 6px; border-radius: 4px; border: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; position: relative; top: 0px; z-index: 1; width: 18px; height: 18px; cursor: pointer; border-radius: 40px; background-color: var(--button-primary-color); } input[type=range]::-moz-range-thumb { position: relative; top: 0px; z-index: 1; width: 18px; height: 18px; cursor: pointer; border-color: transparent; border-radius: 40px; background-color: var(--button-primary-color); } .dropdown-menu { border-radius: var(--border-radius-card); } .dropdown-item { color: var(--text-color) !important; } .dropdown-item.active, .dropdown-item:active { color: var(--color-white) !important; background-color: var(--button-primary-color); } /* --------------------------------------------------------------------------- Forms - Responsive (max-width: 700px - larger slider thumbs on mobile) --------------------------------------------------------------------------- */ @media only screen and (max-width: 700px) { input[type=range]::-webkit-slider-thumb { width: 22px !important; height: 22px !important; } input[type=range]::-moz-range-thumb { width: 22px !important; height: 22px !important; } } /* Password fields with show/hide (locked page, link-lock modal, etc.) */ .vb-password-field { position: relative; display: block; width: 100%; } .vb-password-field .vb-password-field-input { padding-right: 2.75rem; width: 100%; } .vb-password-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; margin: 0; border: none; border-radius: var(--border-radius-button, 6px); background: transparent; color: inherit; cursor: pointer; line-height: 0; } .vb-password-toggle:focus-visible { outline: 2px solid var(--button-primary-color, #005B5B); outline-offset: 2px; } .vb-password-icon { display: block; flex-shrink: 0; } /* SVG ignores [hidden] inconsistently — toggle icons via wrapper class */ .vb-password-field:not(.vb-password-field--plain) .vb-password-icon--revealed { display: none !important; } .vb-password-field.vb-password-field--plain .vb-password-icon--masked { display: none !important; } /* ========================================================================== 9. COMPONENTS - NAVIGATION Záložky jsou od plánu 82 (F2) v assets/css/vb/components/tabs.css. ========================================================================== */ #langlinks img { height: 18px; margin-right: 8px; } #langlinks .btn { text-transform: uppercase; } #language-nav { -webkit-appearance: none !important; appearance: none !important; } /* ========================================================================== 10. MODULES ========================================================================== */ /* PROTECTION ZONE ANIMATION */ .meter { height: auto; position: relative; } .meter > div { display: block; height: 100%; background-color: var(--bg-meter); position: relative; overflow: hidden; } .meter > div:after, .animate > div > div { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(-45deg, var(--vb-meter-stripe, white) 25%, transparent 25%, transparent 50%, var(--vb-meter-stripe, white) 50%, var(--vb-meter-stripe, white) 75%, transparent 75%, transparent); z-index: 0; background-size: 25px 25px; animation: move 4s linear infinite; overflow: hidden; } .animate > div:after { display: none; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* CONTRAST CHECKER MODULE */ .contrast-checker h4 { font-size: var(--table-font-size) !important; } .contrast-inputs h4 { font-size: var(--table-font-size) !important; } .contrast-inputs label h4 { font-size: var(--table-font-size) !important; } /* COLOR CIRCLES (responsive) */ .color-circle { width: 65px; height: 65px; min-width: 65px; min-height: 65px; flex-shrink: 0; } @media (max-width: 991.98px) { .color-circle { width: 55px; height: 55px; min-width: 55px; min-height: 55px; } } @media (max-width: 767.98px) { .color-circle { width: 50px; height: 50px; min-width: 50px; min-height: 50px; } } @media (max-width: 575.98px) { .color-circle { width: 45px; height: 45px; min-width: 45px; min-height: 45px; } } @media (max-width: 400px) { .color-circle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } } /* Colors hub card — circle row spacing (markup: snippets/card-preview-colors-swatches.php) */ .color-circles-container { gap: clamp(6px, 1.5vw, 10px); } .color-circles-container.color-circles-duo { gap: clamp(8px, 2vw, 14px); } /* Colors hub card — “Kruhy na vlně” (snippet card-preview-colors + homepage templates) */ @keyframes gentleWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--vb-wave-y, -6px)); } } .color-circle-animated-1, .color-circle-animated-2, .color-circle-animated-3 { animation: gentleWave 2.5s ease-in-out infinite; transform: translateY(0); } .color-circle-animated-1 { animation-delay: 0s; } .color-circle-animated-2 { animation-delay: 0.25s; } .color-circle-animated-3 { animation-delay: 0.5s; } @media (prefers-reduced-motion: reduce) { .color-circle-animated-1, .color-circle-animated-2, .color-circle-animated-3 { animation: none !important; transform: none !important; } } /* Colors hub card — two-colour variant (exactly two of cardColorSwatch1–3 filled). Markup: site/snippets/card-preview-colors-swatches.php */ .color-circle--duo { --vb-duo-size: 82px; --vb-wave-y: -8px; width: var(--vb-duo-size); height: var(--vb-duo-size); min-width: var(--vb-duo-size); min-height: var(--vb-duo-size); } @media (max-width: 991.98px) { .color-circle--duo { --vb-duo-size: 70px; } } @media (max-width: 767.98px) { .color-circle--duo { --vb-duo-size: 64px; } } @media (max-width: 575.98px) { .color-circle--duo { --vb-duo-size: 58px; } } @media (max-width: 400px) { .color-circle--duo { --vb-duo-size: 52px; } } /* Two circles on a wave — wider phase offset so the pair reads as a see-saw */ .color-circles-duo .color-circle-animated-2 { animation-delay: 0.45s; } /* Two morphing circles — "castling": the pair sits side by side (not touching) and swaps places along one line; while crossing, the overlap multiplies (same blend as the 3-colour Lottie). `isolation` keeps the multiply dot-on-dot only, so the card background is never tinted. */ .color-circles-morph-duo { --vb-duo-gap: clamp(10px, 2.4vw, 18px); display: flex; align-items: center; justify-content: center; gap: var(--vb-duo-gap); isolation: isolate; } .color-circles-morph-duo__dot { border-radius: 50%; mix-blend-mode: multiply; animation: vbDuoCastle 5.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; will-change: transform; } .color-circles-morph-duo__dot + .color-circles-morph-duo__dot { --vb-duo-dir: -1; } @keyframes vbDuoCastle { 0%, 12% { transform: translateX(0); } 50%, 62% { transform: translateX(calc((var(--vb-duo-size) + var(--vb-duo-gap)) * var(--vb-duo-dir, 1))); } 100% { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .color-circles-morph-duo__dot { animation: none !important; transform: none !important; } } /* INDICATOR ICONS Consolidated indicator styles - all indicators share base styles Individual icons are targeted via attribute selector [class^="ri-"] ========================================================================== */ /* Base indicator container - shared positioning */ .lock-indicator, .lock-image-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator { top: 0; right: 0; color: var(--indicator-color); z-index: 10; } /* Base indicator icon - shared icon styles */ .lock-indicator [class^="ri-"], .lock-image-indicator [class^="ri-"], .portal-indicator [class^="ri-"], .portal-indicator svg.vb-portal-hub-icon, .multibrand-indicator [class^="ri-"], .external-link-indicator [class^="ri-"], .portal-external-link-indicator [class^="ri-"] { font-size: 15px; color: inherit; position: absolute; top: 12px; right: 12px; background: var(--bg-indicator); padding: 0.6em; border-radius: 50%; border: 1px solid var(--border-color); width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; line-height: 1; } /* Ikonka na coveru hlavní karty, na obrázku karty v sekcích Karty a Karty s obrázkem a na pozadí karty loga: polarita podle toho, co leží pod ikonkou (site/helpers/card-cover-indicator.php). Světlý roh = světlé sklo a černá ikona (vb-ind-light), tmavý roh = tmavé sklo a bílá ikona (vb-ind-dark). Obě ikony s krytím 70 %. Neznámý cover (Lottie, SVG, placeholder) = tmavá varianta. Hrana skla: výplň končí 1 px před okrajem, takže v proužku prosvítá cover. U tmavého skla s 16% bílým nádechem (hrana je vidět i na černé), u světlého ztmavený. Okraj tak má vždy jemně odstín karty pod sebou (bílý/černý okraj se s barevnými kartami bil, silná sytost dělala z červené růžovou). Tmavé sklo je #2c2c2c, ne černé, aby kolečko nezmizelo na tmavém coveru. Rešerše: docs/card-indicator-research/ (strategie E). Textové karty bez coveru beze změny. */ .is-on-cover [class^="ri-"] { color: rgba(255, 255, 255, 0.7); border: 0; background: radial-gradient(closest-side, rgba(44, 44, 44, 0.52) calc(100% - 1px), rgba(255, 255, 255, 0.16) calc(100% - 0.5px)); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); } .is-on-cover.vb-ind-light [class^="ri-"] { color: rgba(0, 0, 0, 0.7); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6) calc(100% - 1px), transparent calc(100% - 0.5px)); -webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(0.9); backdrop-filter: blur(10px) saturate(1.6) brightness(0.9); } /* Glyf zámku má těžiště dole (oblouk nahoře je lehký) — opticky vycentrovat. */ .is-on-cover .ri-lock-line::before { display: inline-block; transform: translateY(-1px); } /* Modifier: portal-external-link has slightly different positioning */ .portal-external-link-indicator [class^="ri-"] { top: 13px; right: 13px; } /* ========================================================================== 11. UTILITIES ========================================================================== */ /* Logo sizing utilities (.logo-size-5 to .logo-size-100) */ .logo-size-100 .logo-size { width: 100%; } .logo-size-95 .logo-size { width: 95%; } .logo-size-90 .logo-size { width: 90%; } .logo-size-85 .logo-size { width: 85%; } .logo-size-80 .logo-size { width: 80%; } .logo-size-75 .logo-size { width: 75%; } .logo-size-70 .logo-size { width: 70%; } .logo-size-65 .logo-size { width: 65%; } .logo-size-60 .logo-size { width: 60%; } .logo-size-55 .logo-size { width: 55%; } .logo-size-50 .logo-size { width: 50%; } .logo-size-45 .logo-size { width: 45%; } .logo-size-40 .logo-size { width: 40%; } .logo-size-35 .logo-size { width: 35%; } .logo-size-30 .logo-size { width: 30%; } .logo-size-25 .logo-size { width: 25%; } .logo-size-20 .logo-size { width: 20%; } .logo-size-15 .logo-size { width: 15%; } .logo-size-10 .logo-size { width: 10%; } .logo-size-5 .logo-size { width: 5%; } /* Position utilities */ .position-relative { position: relative; } .position-absolute { position: absolute; } /* Background utilities */ .bg-light { background-color: var(--bg-subtle) !important; } /* Tisk: Bootstrap print `.table td, .table th { background-color: #fff !important }` přebíjel .bg-light vyšší specificitou. Print pravidla jsou od plánu 82 ve vrstvě vb.base (vb/base.css) bez !important a legacy !important nepřebijí, proto tahle výjimka zůstává u .bg-light. */ @media print { .table td.bg-light, .table th.bg-light { background-color: #fff !important; } } /* Border utilities (consolidated .border and .border-table) */ .border, .border-table { border: 1px solid var(--border-color) !important; } .border-left { border-left: 1px solid var(--border-color) !important; } .border-right { border-right: 1px solid var(--border-color) !important; } .border-bottom { border-bottom: 1px solid var(--border-color) !important; } .border-top { border-top: 1px solid var(--border-color) !important; } .border-bottom-table { border-bottom: 1px solid var(--border-color-light) !important; } .border-light { border: 1px solid var(--border-color-light) !important; } .border-no-top { border-left: 1px solid var(--border-color) !important; border-right: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important; } /* Shadow utilities */ .shadow-on-hover:hover { box-shadow: var(--shadow-hover) !important; } /* Radius utilities */ .radius { border-radius: var(--border-radius-card) !important; } .radius-button { border-radius: var(--border-radius-button) !important; } .radius-top-left { border-top-left-radius: var(--border-radius-card) !important; } .radius-top-right { border-top-right-radius: var(--border-radius-card) !important; } .radius-top { border-top-left-radius: var(--border-radius-card) !important; border-top-right-radius: var(--border-radius-card) !important; } .radius-right { border-top-right-radius: var(--border-radius-card) !important; border-bottom-right-radius: var(--border-radius-card) !important; } .radius-bottom { border-bottom-right-radius: var(--border-radius-card) !important; border-bottom-left-radius: var(--border-radius-card) !important; } .swatch-group { border-radius: var(--border-radius-card); overflow: hidden; } .swatch-group > div, .swatch-group > div * { border-radius: 0 !important; } /* Text color utilities */ .text-primary { color: var(--link-color) !important; } .text-danger-color { color: var(--danger-color) !important; } .text-danger-color strong { color: var(--danger-color) !important; } .text-success-color { color: var(--success-color) !important; } .text-success-color strong { color: var(--success-color) !important; } /* Transition utility */ .transition-all { transition: all var(--transition-fast); } .rotate { transform: rotate(180deg); transition: transform 0.3s ease-in-out; } .zoom:hover { transform: scale(1.016); } /* Blur effect */ .blur { background-color: var(--card-bottom-bg-color); position: relative; overflow: hidden; } .blur::before { background-color: var(--card-bottom-bg-color); position: absolute; content: ''; filter: blur(50px); inset: 3%; z-index: -1; } /* Stretched link */ .stretched-link::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 1; } /* Alerts and badges */ .alert { border-radius: var(--border-radius-card); font-family: var(--font-family-body) !important; /* Dole mezeru dělá margin odstavce (1rem), nahoře stejně (Bootstrap má 0.75rem) */ padding-top: 1rem; padding-bottom: 0rem; margin-bottom: var(--spacing-card-mobile); } .alert-info { color: var(--info-box-text-color) !important; background-color: var(--info-box-bg-color) !important; border-radius: var(--border-radius-card) !important; border-color: var(--info-box-bg-color) !important; font-family: var(--font-family-body) !important; } /* Consolidated alert-info text color (was 3 separate rules) */ .alert-info a, .alert-info .alert-link, .alert-info-link, .alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6, .alert-info ul, .alert-info ol, .alert-info li { color: var(--info-box-text-color) !important; } .alert-info a, .alert-info-link { text-decoration: underline; } /* Popisek pod nadpisem (Kirby textarea): odkaz bez podtržení, podtržení při hoveru */ .vb-kt-inline--caption a[href] { text-decoration: none !important; } .vb-kt-inline--caption a[href]:hover { text-decoration: underline !important; } /* Odkazy v barvách / ratio popiscích – stále podtržené */ [data-editable="mainColorsDescription"] a, [data-editable="colorRatioDescription"] a { text-decoration: underline; } /* Consolidated hover underline */ .alert-info a:hover, .alert-info-link:hover, [data-editable="mainColorsDescription"] a:hover, [data-editable="colorRatioDescription"] a:hover, .recent-updates-card a:hover { text-decoration: underline !important; } /* Recent updates card links — always underlined (must not override .alert-info a) */ .recent-updates-card a, .recent-updates-card li a { text-decoration: underline; } .alert-danger { background-color: var(--border-color); border: none; color: var(--text-dark); border-radius: 4px; font-size: 14px !important; padding-bottom: 10px; } .badge { border-radius: var(--border-radius-badge); font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important; padding-left: 0.8em; padding-right: 0.8em; transition: none; cursor: help; } .badge-info { color: var(--info-badge-text-color); background-color: var(--info-badge-bg-color); margin-right: 0.5rem; font-weight: 600; } .badge-danger { color: var(--color-white); background-color: var(--danger-color); } .badge-success { color: var(--color-white); background-color: var(--success-color); } .badge-large { font-size: 1.2rem; } /* Rules styling (allowed/forbidden) */ .allowed-rules { padding: var(--spacing-card-mobile); border-left: 3px solid var(--success-color); border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); border-right: solid 1px var(--border-color); } .allowed-rules code { color: var(--success-color) !important; } .forbidden-rules { padding: var(--spacing-card-mobile); border-left: 3px solid var(--danger-color); border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); border-right: solid 1px var(--border-color); } .forbidden-rules code { color: var(--danger-color); } #accordion-certificate .allowed-rules { background-color: var(--bg-subtle); } /* Logo rule icons */ .icon-allowed { position: absolute; top: 23px; left: 25px; transform: translate(-50%, -50%); font-size: 1.5em; color: var(--icon-allowed-color); z-index: 20; } .icon-yes { display: none !important; } /* Consolidated logo-rule-settings shared styles (was 11 separate rules with !important) */ .logo-rule-settings[class*="add-icon-yes"] .icon-yes { display: block !important; position: absolute; left: 13px; top: 13px; } /* Crossed line decorations */ .crossed-line { overflow: hidden; position: relative; } .ratio-4-3 > .crossed-line, .ratio-1-1 > .crossed-line, .aspect-ratio-container > .overlay.crossed-line { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .crossed-line::after { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: calc(var(--strikethrough-weight, 1px) * 2); background: var(--cross-color); transform: translate(-50%, -50%) rotate(var(--cross-angle, -37deg)); transform-origin: center; z-index: 20; border-radius: 1px; } .crossed-red { overflow: hidden; position: relative; } .crossed-red::after { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: calc(var(--strikethrough-weight, 1px) * 2); background: rgb(255, 76, 80); transform: translate(-50%, -50%) rotate(var(--cross-angle, -37deg)); transform-origin: center; border-radius: 1px; } .tba-item { overflow: hidden; position: relative; } /* Contact card email link follows the configured body text size ("Velikost textů"). Scoped to the mailto link so the other .tba-item cards are unaffected. */ @media (min-width: 768px) { .tba-item a[href^="mailto:"] { font-size: calc(var(--base-font-size) * 1); } } /* Swatch values */ .swatch-value { color: var(--gray-80); font-weight: 700; font-size: 1rem; text-transform: uppercase; } .hex-value { display: inline; } .color-value:hover { color: var(--gray-100); } .color-value { font-size: 0.875rem; } /* Visualbook description and language switcher */ #visualbook-description { color: var(--visualbook-description-color) !important; background-color: var(--header-color) !important; -webkit-appearance: none !important; } /* Keep transparent like other header multibrand controls (never match header bar fill) */ #language-switcher, #language-switcher:hover, #language-switcher:focus, #language-switcher:active, #language-switcher:not(:disabled):not(.disabled):active:focus, .show > #language-switcher.dropdown-toggle { background-color: transparent !important; -webkit-appearance: none !important; appearance: none !important; padding-top: 11px; } /* --------------------------------------------------------------------------- Utilities - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .allowed-rules, .forbidden-rules { padding: var(--spacing-card-desktop); } } /* --------------------------------------------------------------------------- Module: Video – DotLottie (stejné rozvržení jako Panel / visualbook-lottie-file-preview) --------------------------------------------------------------------------- */ /* Kontejner pro Lottie (lottie-web může vykreslit SVG nebo canvas) */ .vb-module-video-dotlottie.vb-module-video-lottie-svg { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .vb-module-video-dotlottie.vb-module-video-lottie-svg > svg { width: 100%; height: auto; max-height: 100%; display: block; } .vb-module-video-dotlottie.vb-module-video-lottie-svg > canvas { width: 100% !important; height: 100% !important; max-height: 100%; display: block; } /* ========================================================================== 13. ANIMATIONS ========================================================================== */ /* ===================================================================== Dynamic CSS - Static blocks (moved from head.php inline styles) ===================================================================== */ @media (max-width: 767px) { .btn-multibrand span { display: none; } } .dropdown-item.active, .dropdown-item:active { color: var(--vb-button-primary-text, #fff) !important; background-color: var(--button-primary-color); } /* module-text: remove trailing margin from the last block's last element */ .module--module-text .col-md-8 > div > :last-child { margin-bottom: 0; } /* module-text: heading spacing in tiptap content (match left column title mb-3) */ .module--module-text .col-md-8 :is(h2, h3, h4, h5, h6) { margin-bottom: 1rem; } /* module-text: headings keep a top gap whenever ANY element precedes them. Only the very first item at the module top has no gap (:first-child). */ .module--module-text .col-md-8 > div > :is(h2, h3, h5, h6):not(:first-child) { margin-top: 2.5rem; } /* module-text: subsequent h4 only (tune margin-top here) */ .module--module-text .col-md-8 > div > h4:not(:first-child) { margin-top: 1.5rem; } /* module-text: spacing below paragraphs in tiptap content */ .module--module-text .col-md-8 > div p { margin-bottom: 1.25rem; } /* module-text: while editing, the TipTap editor wraps the content in .frontend-editor-tiptap-editor > .ProseMirror. Mirror the direct-child spacing rules above onto the editor's children so the layout matches the rendered view. */ .module--module-text .col-md-8 .ProseMirror > :last-child { margin-bottom: 0; } .module--module-text .col-md-8 .ProseMirror > :is(h2, h3, h5, h6):not(:first-child) { margin-top: 2.5rem; } .module--module-text .col-md-8 .ProseMirror > h4:not(:first-child) { margin-top: 1.5rem; } /* Accordion (rozbalovací obsah) content — same heading rhythm as module-text: a Podnadpis (H4) gets a top gap when it follows other content, and a subsequent Nadpis (H3/H2/H5/H6) a larger one. A heading that is the field's FIRST element (:first-child) stays flush — so a Podnadpis-first field keeps its current look. Both the rendered view and the live TipTap editor (.ProseMirror) are covered so editing matches the result. */ [data-field-name="acordeonTextarea"] > :is(h2, h3, h5, h6):not(:first-child), [data-field-name="acordeonTextarea"] .ProseMirror > :is(h2, h3, h5, h6):not(:first-child), .vb-accordion__body[data-field-name="imageTextarea"] > :is(h2, h3, h5, h6):not(:first-child), .vb-accordion__body[data-field-name="imageTextarea"] .ProseMirror > :is(h2, h3, h5, h6):not(:first-child) { margin-top: 2.5rem; } [data-field-name="acordeonTextarea"] > h4:not(:first-child), [data-field-name="acordeonTextarea"] .ProseMirror > h4:not(:first-child), .vb-accordion__body[data-field-name="imageTextarea"] > h4:not(:first-child), .vb-accordion__body[data-field-name="imageTextarea"] .ProseMirror > h4:not(:first-child) { margin-top: 1.5rem; } /* module-text: inline images from tiptap/kirbytext — fit column width */ .module--module-text .col-md-8 figure { display: block; width: 100%; max-width: 100%; margin: 2rem 0; } .module--module-text .col-md-8 figure img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; border: 1px solid var(--border-color); border-radius: var(--border-radius-card); } .module--module-text .col-md-8 figure figcaption { margin-top: 0.35rem; text-align: center; font-size: 14px; } /* module-text: blockquote from tiptap/kirbytext */ .module--module-text .col-md-8 blockquote { margin: 2rem 0; padding: 20px 20px 20px calc(1rem + 5px); border-inline-start: 3px solid var(--button-primary-color); background-color: #f2f2f2; color: var(--text-color); font-style: normal; } .module--module-text .col-md-8 blockquote :is(p, li, span, div) { font-style: normal; } .module--module-text .col-md-8 blockquote > :last-child { margin-bottom: 0; } /* module-text: code block from tiptap */ .module--module-text .col-md-8 pre { background-color: #f2f2f2; padding: 20px; margin: 2rem 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: calc(var(--base-font-size) * 0.9375); } /* module-text: inline code from tiptap */ .module--module-text .col-md-8 code { color: var(--headings-color); background-color: #e1e1e1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: calc(var(--base-font-size) * 0.9375); padding: 0.25em 0.55em; border-radius: 0.25rem; } .module--module-text .col-md-8 pre code { background-color: transparent; padding: 0; color: inherit; font-size: inherit; border-radius: 0; } /* module-text: horizontal rule from tiptap */ .module--module-text .col-md-8 hr { margin: 2rem 0; } /* module-text: bullet/numbered/task list items follow the configured body text size ("Velikost textů"), just like paragraphs. In the published view TipTap strips the

wrapper inside

  • , leaving bare text that would otherwise not pick up the `body p` font-size rule and stay at the browser default. */ @media (min-width: 768px) { .module--module-text .col-md-8 :is(ul, ol) li { font-size: calc(var(--base-font-size) * 1); } } /* module-text: task list from tiptap JSON */ /* * TipTap task lists (checklists) — frontend rendered DOM: *