.elementor-35400 .elementor-element.elementor-element-7f3787f7{--display:flex;--min-height:66vh;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overflow:hidden;--overlay-opacity:0.3;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-7f3787f7:not(.elementor-motion-effects-element-type-background), .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://s-d-a.sk/wp-content/uploads/2026/08/Vision_banner_2.png");background-position:center center;background-size:cover;}.elementor-35400 .elementor-element.elementor-element-7f3787f7::before, .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .elementor-background-video-container::before, .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .e-con-inner > .elementor-background-video-container::before, .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .elementor-background-slideshow::before, .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#045CB4;--background-overlay:'';}.elementor-35400 .elementor-element.elementor-element-2a9705f6{--display:flex;--position:absolute;top:0px;}body:not(.rtl) .elementor-35400 .elementor-element.elementor-element-2a9705f6{left:0px;}body.rtl .elementor-35400 .elementor-element.elementor-element-2a9705f6{right:0px;}.elementor-35400 .elementor-element.elementor-element-57435160{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--overlay-opacity:0.5;border-style:solid;--border-style:solid;border-width:0px 0px 0px 10px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:10px;border-color:#FF0000;--border-color:#FF0000;--margin-top:3rem;--margin-bottom:3rem;--margin-left:0rem;--margin-right:3rem;--padding-top:1rem;--padding-bottom:1.5rem;--padding-left:1.5rem;--padding-right:1.5rem;}.elementor-35400 .elementor-element.elementor-element-57435160::before, .elementor-35400 .elementor-element.elementor-element-57435160 > .elementor-background-video-container::before, .elementor-35400 .elementor-element.elementor-element-57435160 > .e-con-inner > .elementor-background-video-container::before, .elementor-35400 .elementor-element.elementor-element-57435160 > .elementor-background-slideshow::before, .elementor-35400 .elementor-element.elementor-element-57435160 > .e-con-inner > .elementor-background-slideshow::before, .elementor-35400 .elementor-element.elementor-element-57435160 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-35400 .elementor-element.elementor-element-57435160.e-con{--align-self:flex-start;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-35400 .elementor-element.elementor-element-67b3f54f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-35400 .elementor-element.elementor-element-67b3f54f.elementor-element{--align-self:flex-start;}.elementor-35400 .elementor-element.elementor-element-67b3f54f .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:1rem;font-weight:normal;color:var( --e-global-color-astglobalcolor5 );}.elementor-35400 .elementor-element.elementor-element-2fd553af.elementor-element{--align-self:flex-start;}.elementor-35400 .elementor-element.elementor-element-2fd553af .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:1.6rem;font-weight:600;color:var( --e-global-color-astglobalcolor5 );}.elementor-35400 .elementor-element.elementor-element-2094c6b6 .woocommerce-breadcrumb{font-size:12px;text-align:start;}.elementor-35400 .elementor-element.elementor-element-7dafed7f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-35400 .elementor-element.elementor-element-7dafed7f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-35400 .elementor-element.elementor-element-113b1fd8 > .elementor-element-populated{margin:20px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-35400 .elementor-element.elementor-element-7bbd241a{text-align:center;}.elementor-bc-flex-widget .elementor-35400 .elementor-element.elementor-element-1d1caa3f.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-35400 .elementor-element.elementor-element-1d1caa3f.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-35400 .elementor-element.elementor-element-304efb6b{text-align:center;}.elementor-35400 .elementor-element.elementor-element-10eff1d5{--display:flex;--overlay-opacity:0.5;}.elementor-35400 .elementor-element.elementor-element-10eff1d5:not(.elementor-motion-effects-element-type-background), .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at top center, #B5DDEC 80%, #87c1e6 100%);}.elementor-35400 .elementor-element.elementor-element-10eff1d5::before, .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .elementor-background-video-container::before, .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .e-con-inner > .elementor-background-video-container::before, .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .elementor-background-slideshow::before, .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-35400 .elementor-element.elementor-element-10eff1d5 > .elementor-shape-bottom .elementor-shape-fill, .elementor-35400 .elementor-element.elementor-element-10eff1d5 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#8ac5e9;}.elementor-widget-wc-categories .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-categories .woocommerce-loop-category__title .count{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-35400 .elementor-element.elementor-element-d5ecb7a .product{text-align:center;}.elementor-35400 .elementor-element.elementor-element-d5ecb7a.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-35400 .elementor-element.elementor-element-d5ecb7a a > img{border-style:solid;border-width:3px 3px 3px 3px;border-color:#6893bb;border-radius:10px 10px 10px 10px;}.elementor-35400 .elementor-element.elementor-element-d5ecb7a .woocommerce .woocommerce-loop-category__title{color:#043c74;font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-35400 .elementor-element.elementor-element-d5ecb7a .woocommerce-loop-category__title .count{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-35400 .elementor-element.elementor-element-45d4bac9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-35400 .elementor-element.elementor-element-45d4bac9:not(.elementor-motion-effects-element-type-background), .elementor-35400 .elementor-element.elementor-element-45d4bac9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#7A7A7A26;}.elementor-35400 .elementor-element.elementor-element-99b66f8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-67cc74d{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-35400 .elementor-element.elementor-element-bb17856 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-35400 .elementor-element.elementor-element-bb17856 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-35400 .elementor-element.elementor-element-bb17856{--e-icon-list-icon-size:14px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-35400 .elementor-element.elementor-element-bb17856 .elementor-icon-list-text{transition:color 0.3s;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-35400 .elementor-element.elementor-element-652df1ca{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-251ce210{text-align:center;}.elementor-35400 .elementor-element.elementor-element-b09043c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-7e48a57{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-38ea153{text-align:start;}.elementor-35400 .elementor-element.elementor-element-c757ffd{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-d3cc086{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-35400 .elementor-element.elementor-element-9f46bff .elementor-icon-box-wrapper{gap:15px;}.elementor-35400 .elementor-element.elementor-element-ee0a826{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-35400 .elementor-element.elementor-element-5ceafe9 .elementor-icon-box-wrapper{gap:15px;}.elementor-35400 .elementor-element.elementor-element-1230682{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-35400 .elementor-element.elementor-element-4404495 .elementor-icon-box-wrapper{gap:15px;}.elementor-35400 .elementor-element.elementor-element-7da6f18{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-35400 .elementor-element.elementor-element-f7da57c .elementor-icon-box-wrapper{gap:15px;}.elementor-35400 .elementor-element.elementor-element-173f061{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-35400 .elementor-element.elementor-element-cadbe51 .elementor-icon-box-wrapper{gap:15px;}.elementor-35400 .elementor-element.elementor-element-9f57e63{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-35400 .elementor-element.elementor-element-6aa10ac .elementor-icon-box-wrapper{gap:15px;}.elementor-35400 .elementor-element.elementor-element-90c4468{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-90c4468:not(.elementor-motion-effects-element-type-background), .elementor-35400 .elementor-element.elementor-element-90c4468 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#7A7A7A26;}.elementor-35400 .elementor-element.elementor-element-a949443{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-3de8267{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-5e2cb22 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-35400 .elementor-element.elementor-element-5e2cb22 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-35400 .elementor-element.elementor-element-5e2cb22{--e-icon-list-icon-size:14px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-35400 .elementor-element.elementor-element-5e2cb22 .elementor-icon-list-text{transition:color 0.3s;}.elementor-35400 .elementor-element.elementor-element-db07c44 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-35400 .elementor-element.elementor-element-db07c44 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-35400 .elementor-element.elementor-element-db07c44{--e-icon-list-icon-size:14px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-35400 .elementor-element.elementor-element-db07c44 .elementor-icon-list-text{transition:color 0.3s;}.elementor-35400 .elementor-element.elementor-element-5e1134b{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-f4329ed{text-align:center;}.elementor-35400 .elementor-element.elementor-element-0e40466{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-35400 .elementor-element.elementor-element-1e0ec57b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0em 0em;--row-gap:0em;--column-gap:0em;}.elementor-35400 .elementor-element.elementor-element-00b065f{text-align:center;}.elementor-35400 .elementor-element.elementor-element-624e8d8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-35400 .elementor-element.elementor-element-255416e3{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-6226547{text-align:center;}.elementor-35400 .elementor-element.elementor-element-332343a2{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-1427ce2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-35400 .elementor-element.elementor-element-2f1e67ff{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-3db03839{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-1917ba40{text-align:center;}.elementor-35400 .elementor-element.elementor-element-2cc1cadd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-35400 .elementor-element.elementor-element-3172c11a{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-35400 .elementor-element.elementor-element-2a8f42b1{text-align:center;}.elementor-35400 .elementor-element.elementor-element-1b089bbc{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-35400 .elementor-element.elementor-element-113b1fd8{width:60%;}.elementor-35400 .elementor-element.elementor-element-1d1caa3f{width:39.333%;}}@media(min-width:2400px){.elementor-35400 .elementor-element.elementor-element-57435160{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-35400 .elementor-element.elementor-element-67b3f54f{text-align:start;}.elementor-35400 .elementor-element.elementor-element-67b3f54f .elementor-heading-title{font-size:150%;}.elementor-35400 .elementor-element.elementor-element-2fd553af .elementor-heading-title{font-size:250%;}.elementor-35400 .elementor-element.elementor-element-c757ffd{--grid-auto-flow:row;}.elementor-35400 .elementor-element.elementor-element-3de8267{--grid-auto-flow:row;}}@media(max-width:1024px){.elementor-35400 .elementor-element.elementor-element-57435160{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-35400 .elementor-element.elementor-element-c757ffd{--grid-auto-flow:row;}.elementor-35400 .elementor-element.elementor-element-3de8267{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-35400 .elementor-element.elementor-element-7f3787f7:not(.elementor-motion-effects-element-type-background), .elementor-35400 .elementor-element.elementor-element-7f3787f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-51em 0px;}.elementor-35400 .elementor-element.elementor-element-57435160{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-width:0px 0px 0px 10px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:10px;--margin-top:2rem;--margin-bottom:2rem;--margin-left:2rem;--margin-right:2rem;--padding-top:0.5rem;--padding-bottom:1rem;--padding-left:1rem;--padding-right:1rem;}.elementor-35400 .elementor-element.elementor-element-67b3f54f.elementor-element{--align-self:flex-start;}.elementor-35400 .elementor-element.elementor-element-2fd553af.elementor-element{--align-self:flex-start;}.elementor-35400 .elementor-element.elementor-element-2fd553af .elementor-heading-title{font-size:20px;}.elementor-35400 .elementor-element.elementor-element-c757ffd{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-35400 .elementor-element.elementor-element-3de8267{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-57435160 */.elementor-35400 .elementor-element.elementor-element-57435160 { width: fit-content; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7f3787f7 */.elementor-35400 .elementor-element.elementor-element-7f3787f7 { transition: all 1s; } .elementor-35400 .elementor-element.elementor-element-7f3787f7::before { opacity: 0; }/* End custom CSS */ /* Start custom CSS for wc-categories, class: .elementor-element-d5ecb7a */.align-center{ text-align: center; margin-left: auto; margin-right: auto; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b09043c *//* ========================================================================== S.D.A. – Vision page Sekcia: Kľúčové vlastnosti (.sda_vision_key) Verzia: v7 Nadväzuje na .sda_img-right (SmartCube) a prechádza do .sda_img-left (Coating) Umiestnenie: Vzhľad → Prispôsobiť → Dodatočné CSS ========================================================================== */ /* -------------------------------------------------------------------------- 1. Premenné (prefix --vk-*) -------------------------------------------------------------------------- */ .sda_vision_key { /* Farby – paleta stránky */ --vk-navy: #1a1f2e; --vk-navy-tile: #485683; --vk-blue: #046bd2; --vk-blue-lt: #56c8f5; --vk-blue-dk: #043c74; --vk-text: #4a5568; --vk-section-bg: #f0f4f9; /* Karty – tmavomodrý podklad s radiálnym gradientom (motív .feature-label) */ --vk-card-bg: #485683; --vk-card-glow: radial-gradient(circle farthest-corner at 33% 25%, rgba(51, 128, 220, 0.5) 0%, rgba(0, 0, 0, 0) 60%); --vk-card-border: rgba(30, 144, 255, 0.35); --vk-card-border-hov: var(--vk-blue-lt); --vk-card-shadow: 0 4px 16px rgba(26, 35, 50, 0.18); --vk-card-shadow-hov: 0 12px 32px rgba(4, 107, 210, 0.30); /* Sekcia */ --vk-section-pt: 50px; --vk-section-pb: 50px; /* Nadpis – rovnaká typografia ako h2 v .sda_img-* */ --vk-h2-size: clamp(1.4rem, 2.4vw, 1.9rem); --vk-h2-color: var(--vk-blue-dk); --vk-accent-color: var(--vk-blue); --vk-h2-weight: 800; --vk-h2-tracking: 0.6px; --vk-h2-pb: 16px; --vk-h2-mb: 2.5rem; --vk-accent-w: 90px; --vk-accent-h: 3px; /* Mriežka */ --vk-cols: 3; --vk-gap-col: 1.5rem; --vk-gap-row: 1.5rem; /* Karta */ --vk-card-pad: 1.75rem 1.5rem; --vk-card-radius: 10px; --vk-card-lift: -4px; /* Ikona */ --vk-icon-box: 54px; --vk-icon-size: 23px; --vk-icon-radius: 10px; --vk-icon-bg: rgba(255, 255, 255, 0.12); --vk-icon-border: rgba(255, 255, 255, 0.20); --vk-icon-color: var(--vk-blue-lt); --vk-icon-bg-hov: #ffffff; --vk-icon-color-hov: var(--vk-blue-dk); --vk-icon-mb: 1.15rem; /* Typografia karty */ --vk-title-size: 1.05rem; --vk-title-weight: 700; --vk-title-mb: 0.6rem; --vk-desc-size: 0.97rem; --vk-desc-lh: 1.8; --vk-ease: cubic-bezier(0.22, 1, 0.36, 1); --vk-dur: 0.35s; } /* -------------------------------------------------------------------------- 2. Sekcia – rovnaké pozadie ako SmartCube (.sda_img-right) -------------------------------------------------------------------------- */ .sda_vision_key.e-con, .sda_vision_key.e-con.e-parent { position: relative; overflow: hidden; background: var(--vk-section-bg) !important; border-top: 1px solid rgba(4, 107, 210, 0.08) !important; padding-top: var(--vk-section-pt) !important; padding-bottom: var(--vk-section-pb) !important; } /* Bodky – len v rohoch, veľmi jemné (rovnaký raster 28px ako zvyšok stránky) */ .sda_vision_key::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(4, 107, 210, 0.10) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 22% 60% at 0% 0%, black 10%, transparent 70%), radial-gradient(ellipse 22% 60% at 100% 100%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 22% 60% at 0% 0%, black 10%, transparent 70%), radial-gradient(ellipse 22% 60% at 100% 100%, black 10%, transparent 70%); mask-composite: add; -webkit-mask-composite: source-over; pointer-events: none; z-index: 0; } .sda_vision_key > .e-con-inner { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 3. Nadpis sekcie – zladený s h2 v .sda_img-right -------------------------------------------------------------------------- */ .sda_vision_key .elementor-widget-heading { margin-bottom: var(--vk-h2-mb); } .sda_vision_key .elementor-heading-title, .sda_vision_key .elementor-widget-heading .elementor-heading-title, .sda_vision_key h2.elementor-heading-title { position: relative; display: inline-block; margin: 0; padding-bottom: var(--vk-h2-pb); font-size: var(--vk-h2-size); font-weight: var(--vk-h2-weight); letter-spacing: var(--vk-h2-tracking); text-transform: uppercase; line-height: 1.2; color: var(--vk-h2-color) !important; } .sda_vision_key .elementor-heading-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: var(--vk-accent-w); height: var(--vk-accent-h); background: linear-gradient(90deg, var(--vk-accent-color) 0%, rgba(4, 107, 210, 0) 100%); transition: width 0.5s var(--vk-ease); } .sda_vision_key:hover .elementor-heading-title::after { width: 100%; } /* -------------------------------------------------------------------------- 4. Mriežka -------------------------------------------------------------------------- */ .sda_vision_key .e-grid, .sda_vision_key .e-con.e-grid { display: grid; grid-template-columns: repeat(var(--vk-cols), minmax(0, 1fr)); --e-con-grid-template-columns: repeat(var(--vk-cols), minmax(0, 1fr)); column-gap: var(--vk-gap-col); row-gap: var(--vk-gap-row); align-items: stretch; } /* -------------------------------------------------------------------------- 5. Karta – rovnaký vzor ako dlaždice v .sda_woo -------------------------------------------------------------------------- */ .sda_vision_key .e-grid > .e-con.e-child { position: relative; height: 100%; overflow: hidden; padding: var(--vk-card-pad); background-color: var(--vk-card-bg); background-image: var(--vk-card-glow); border: 1px solid var(--vk-card-border); border-radius: var(--vk-card-radius); box-shadow: var(--vk-card-shadow); transition: transform var(--vk-dur) var(--vk-ease), box-shadow var(--vk-dur) ease, border-color var(--vk-dur) ease; } .sda_vision_key .e-grid > .e-con.e-child:hover { transform: translateY(var(--vk-card-lift)); border-color: var(--vk-card-border-hov); box-shadow: var(--vk-card-shadow-hov); } /* Spodná gradientová linka pri hoveri */ .sda_vision_key .e-grid > .e-con.e-child::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--vk-blue), var(--vk-blue-lt)); transition: width 0.4s var(--vk-ease); } .sda_vision_key .e-grid > .e-con.e-child:hover::after { width: 100%; } .sda_vision_key .elementor-widget-icon-box { width: 100%; margin: 0; } .sda_vision_key .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* -------------------------------------------------------------------------- 6. Ikona – dlaždica v štýle .feature-label / kategórií -------------------------------------------------------------------------- */ .sda_vision_key .elementor-icon-box-icon { margin: 0 0 var(--vk-icon-mb) 0; } .sda_vision_key .elementor-icon-box-icon .elementor-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--vk-icon-box); height: var(--vk-icon-box); padding: 0; border: 1px solid var(--vk-icon-border); border-radius: var(--vk-icon-radius); background-color: var(--vk-icon-bg); background-image: none; color: var(--vk-icon-color); font-size: var(--vk-icon-size); box-shadow: none; transition: background-color var(--vk-dur) ease, border-color var(--vk-dur) ease, color var(--vk-dur) ease, transform var(--vk-dur) var(--vk-ease); } .sda_vision_key .elementor-icon-box-icon .elementor-icon svg { width: var(--vk-icon-size); height: var(--vk-icon-size); fill: currentColor; } .sda_vision_key .e-grid > .e-con.e-child:hover .elementor-icon { background-color: var(--vk-icon-bg-hov); border-color: var(--vk-icon-bg-hov); color: var(--vk-icon-color-hov); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 7. Text karty -------------------------------------------------------------------------- */ .sda_vision_key .elementor-icon-box-content { width: 100%; } .sda_vision_key .elementor-icon-box-title { margin: 0 0 var(--vk-title-mb) 0; font-size: var(--vk-title-size); font-weight: var(--vk-title-weight); line-height: 1.35; color: #ffffff; transition: color var(--vk-dur) ease; } .sda_vision_key .elementor-icon-box-title > span { display: inline; } .sda_vision_key .e-grid > .e-con.e-child:hover .elementor-icon-box-title { color: var(--vk-blue-lt); } .sda_vision_key .elementor-icon-box-description { margin: 0; font-size: var(--vk-desc-size); line-height: var(--vk-desc-lh); color: rgba(255, 255, 255, 0.78); } /* -------------------------------------------------------------------------- 8. Scroll animácia – rovnaký prístup ako .sda_img-* -------------------------------------------------------------------------- */ @keyframes vkFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .sda_vision_key .e-grid > .e-con.e-child { animation: vkFadeUp 0.6s var(--vk-ease) both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @supports not (animation-timeline: view()) { .sda_vision_key .e-grid > .e-con.e-child:nth-child(1) { animation-delay: 0.05s; } .sda_vision_key .e-grid > .e-con.e-child:nth-child(2) { animation-delay: 0.12s; } .sda_vision_key .e-grid > .e-con.e-child:nth-child(3) { animation-delay: 0.19s; } .sda_vision_key .e-grid > .e-con.e-child:nth-child(4) { animation-delay: 0.26s; } .sda_vision_key .e-grid > .e-con.e-child:nth-child(5) { animation-delay: 0.33s; } .sda_vision_key .e-grid > .e-con.e-child:nth-child(6) { animation-delay: 0.40s; } } /* -------------------------------------------------------------------------- 9. Responzívne -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .sda_vision_key { --vk-cols: 2; --vk-section-pt: 40px; --vk-section-pb: 40px; --vk-h2-mb: 2rem; --vk-gap-col: 1.25rem; --vk-gap-row: 1.25rem; } } @media (max-width: 767px) { .sda_vision_key { --vk-cols: 1; --vk-section-pt: 30px; --vk-section-pb: 30px; --vk-h2-mb: 1.75rem; --vk-gap-row: 1rem; --vk-card-pad: 1.5rem 1.25rem; --vk-icon-box: 48px; --vk-icon-size: 21px; --vk-card-lift: 0px; --vk-accent-w: 64px; } .sda_vision_key::before { display: none; } /* Bez hover efektov na dotykových zariadeniach */ .sda_vision_key .e-grid > .e-con.e-child:hover { border-color: var(--vk-card-border); box-shadow: var(--vk-card-shadow); } .sda_vision_key .e-grid > .e-con.e-child:hover::after { width: 0%; } } /* -------------------------------------------------------------------------- 10. Prístupnosť -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sda_vision_key .e-grid > .e-con.e-child, .sda_vision_key .elementor-icon, .sda_vision_key .elementor-icon-box-title, .sda_vision_key .elementor-heading-title::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-90c4468 *//* ========================================================================== S.D.A. – Vision page Sekcia: Jedna stanica, množstvo inšpekčných úloh (.sda_vision_tasks) Verzia: v3 Nadväzuje na .sda_img-right (SmartCube) a .sda_vision_key (Kľúčové vlastnosti) Umiestnenie: Vzhľad → Prispôsobiť → Dodatočné CSS ========================================================================== */ /* -------------------------------------------------------------------------- 1. Premenné (prefix --vt-*) -------------------------------------------------------------------------- */ .sda_vision_tasks { /* Farby – paleta stránky */ --vt-navy: #1a1f2e; --vt-blue: #046bd2; --vt-blue-dk: #043c74; --vt-blue-lt: #56c8f5; --vt-text: #4a5568; --vt-section-bg: #f0f4f9; /* Čipy – tmavomodrý podklad s radiálnym gradientom (motív .feature-label) */ --vt-chip-bg: #485683; --vt-chip-glow: radial-gradient(circle farthest-corner at 33% 25%, rgba(51, 128, 220, 0.5) 0%, rgba(0, 0, 0, 0) 60%); --vt-chip-border: rgba(30, 144, 255, 0.35); --vt-chip-border-hov: var(--vt-blue-lt); --vt-chip-shadow: 0 3px 12px rgba(26, 35, 50, 0.16); --vt-chip-shadow-hov: 0 8px 24px rgba(4, 107, 210, 0.28); /* Sekcia */ --vt-section-pt: 50px; --vt-section-pb: 50px; --vt-col-gap: 2.5rem; --vt-col-text: 56%; --vt-col-image: 44%; /* Nadpis – zhodný s h2 v .sda_img-* a .sda_vision_key */ --vt-h2-size: clamp(1.4rem, 2.4vw, 1.9rem); --vt-h2-color: var(--vt-blue-dk); --vt-h2-weight: 800; --vt-h2-tracking: 0.6px; --vt-h2-pb: 16px; --vt-h2-mb: 20px; --vt-accent-color: var(--vt-blue); --vt-accent-w: 40%; --vt-accent-h: 3px; /* Text */ --vt-p-size: 0.97rem; --vt-p-lh: 1.8; --vt-p-mb: 1.75rem; /* Mriežka zoznamov */ --vt-grid-cols: 2; --vt-grid-gap-col: 1rem; --vt-grid-gap-row: 0.75rem; /* Čipy */ --vt-chip-pad: 0.7rem 1rem; --vt-chip-radius: 8px; --vt-chip-gap: 0.75rem; --vt-chip-space: 0.6rem; --vt-chip-shift: 4px; --vt-chip-minh: 54px; --vt-icon-size: 18px; --vt-icon-box: 34px; --vt-icon-radius: 7px; --vt-icon-bg: rgba(255, 255, 255, 0.12); --vt-icon-border: rgba(255, 255, 255, 0.20); --vt-icon-color: var(--vt-blue-lt); --vt-icon-bg-hov: #ffffff; --vt-icon-color-hov: var(--vt-blue-dk); --vt-label-size: 0.95rem; --vt-label-weight: 600; --vt-ease: cubic-bezier(0.22, 1, 0.36, 1); --vt-dur: 0.35s; } /* -------------------------------------------------------------------------- 2. Sekcia – rovnaké pozadie a dekorácie ako SmartCube -------------------------------------------------------------------------- */ .sda_vision_tasks.e-con, .sda_vision_tasks.e-con.e-parent { position: relative; overflow: hidden; background: var(--vt-section-bg) !important; border-top: 1px solid rgba(4, 107, 210, 0.08) !important; padding-top: var(--vt-section-pt) !important; padding-bottom: var(--vt-section-pb) !important; } /* Bodky – maskované do stredu, rovnaký raster 28px */ .sda_vision_tasks::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(4, 107, 210, 0.14) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 300px 220px at 50% 50%, black 10%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse 300px 220px at 50% 50%, black 10%, transparent 65%); pointer-events: none; z-index: 0; } /* Modrý glow v rohu */ .sda_vision_tasks::after { content: ''; position: absolute; right: -150px; top: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(4, 107, 210, 0.05) 0%, transparent 65%); pointer-events: none; z-index: 0; } .sda_vision_tasks > .e-con-inner { position: relative; z-index: 1; column-gap: var(--vt-col-gap); align-items: center; flex-wrap: nowrap; } /* Textový stĺpec dostane viac priestoru, aby sa čipy nelámali */ .sda_vision_tasks > .e-con-inner > .e-con:first-child { flex: 1 1 var(--vt-col-text); max-width: var(--vt-col-text); } .sda_vision_tasks > .e-con-inner > .e-con:last-child { flex: 1 1 var(--vt-col-image); max-width: var(--vt-col-image); } /* -------------------------------------------------------------------------- 3. Nadpis – zhodný s ostatnými sekciami -------------------------------------------------------------------------- */ .sda_vision_tasks .elementor-widget-heading { margin-bottom: var(--vt-h2-mb); } .sda_vision_tasks .elementor-heading-title, .sda_vision_tasks .elementor-widget-heading .elementor-heading-title, .sda_vision_tasks h2.elementor-heading-title { position: relative; display: block; margin: 0; padding-bottom: var(--vt-h2-pb); font-size: var(--vt-h2-size); font-weight: var(--vt-h2-weight); letter-spacing: var(--vt-h2-tracking); text-transform: uppercase; line-height: 1.2; text-align: left; color: var(--vt-h2-color) !important; } .sda_vision_tasks .elementor-heading-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: var(--vt-accent-w); height: var(--vt-accent-h); background: linear-gradient(90deg, var(--vt-accent-color) 0%, rgba(4, 107, 210, 0) 100%); transition: width 0.5s var(--vt-ease); } .sda_vision_tasks:hover .elementor-heading-title::after { width: 100%; } /* -------------------------------------------------------------------------- 4. Odstavce -------------------------------------------------------------------------- */ .sda_vision_tasks .elementor-widget-text-editor { margin-bottom: var(--vt-p-mb); } .sda_vision_tasks .elementor-widget-text-editor p { margin: 0 0 0.85rem 0; font-size: var(--vt-p-size); line-height: var(--vt-p-lh); color: var(--vt-text); } .sda_vision_tasks .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 5. Mriežka dvoch zoznamov -------------------------------------------------------------------------- */ .sda_vision_tasks .e-grid, .sda_vision_tasks .e-con.e-grid { display: grid; grid-template-columns: repeat(var(--vt-grid-cols), minmax(0, 1fr)); --e-con-grid-template-columns: repeat(var(--vt-grid-cols), minmax(0, 1fr)); column-gap: var(--vt-grid-gap-col); row-gap: var(--vt-grid-gap-row); align-items: stretch; width: 100%; } /* Oba zoznamy sa natiahnu na rovnakú výšku, aby riadky sedeli oproti sebe */ .sda_vision_tasks .elementor-widget-icon-list { width: 100%; height: 100%; margin: 0; } .sda_vision_tasks .elementor-widget-icon-list > .elementor-widget-container { height: 100%; } /* -------------------------------------------------------------------------- 6. Položky zoznamu ako biele čipy -------------------------------------------------------------------------- */ .sda_vision_tasks .elementor-icon-list-items { display: grid; grid-auto-rows: 1fr; gap: var(--vt-chip-space); height: 100%; margin: 0; padding: 0; list-style: none; } .sda_vision_tasks .elementor-icon-list-items .elementor-icon-list-item { display: flex; align-items: center; gap: var(--vt-chip-gap); min-height: var(--vt-chip-minh); margin: 0; padding: var(--vt-chip-pad); background-color: var(--vt-chip-bg); background-image: var(--vt-chip-glow); border: 1px solid var(--vt-chip-border); border-radius: var(--vt-chip-radius); box-shadow: var(--vt-chip-shadow); transition: transform var(--vt-dur) var(--vt-ease), border-color var(--vt-dur) ease, box-shadow var(--vt-dur) ease; } .sda_vision_tasks .elementor-icon-list-items .elementor-icon-list-item:last-child { margin-bottom: 0; } .sda_vision_tasks .elementor-icon-list-items .elementor-icon-list-item:hover { transform: translateX(var(--vt-chip-shift)); border-color: var(--vt-chip-border-hov); box-shadow: var(--vt-chip-shadow-hov); } /* Ikona */ .sda_vision_tasks .elementor-icon-list-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--vt-icon-box); width: var(--vt-icon-box); height: var(--vt-icon-box); padding: 0; border: 1px solid var(--vt-icon-border); border-radius: var(--vt-icon-radius); background: var(--vt-icon-bg); transition: background-color var(--vt-dur) ease, border-color var(--vt-dur) ease, transform var(--vt-dur) var(--vt-ease); } .sda_vision_tasks .elementor-icon-list-icon svg { width: var(--vt-icon-size) !important; height: var(--vt-icon-size) !important; fill: var(--vt-icon-color) !important; transition: fill var(--vt-dur) ease; } .sda_vision_tasks .elementor-icon-list-item:hover .elementor-icon-list-icon { background: var(--vt-icon-bg-hov); border-color: var(--vt-icon-bg-hov); transform: scale(1.05); } .sda_vision_tasks .elementor-icon-list-item:hover .elementor-icon-list-icon svg { fill: var(--vt-icon-color-hov) !important; } /* Text položky */ .sda_vision_tasks .elementor-icon-list-text { padding: 0; font-size: var(--vt-label-size); font-weight: var(--vt-label-weight); line-height: 1.3; color: #ffffff; text-wrap: balance; transition: color var(--vt-dur) ease; } .sda_vision_tasks .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--vt-blue-lt); } /* -------------------------------------------------------------------------- 7. Obrázok – L-rohy ako v .sda_img-right -------------------------------------------------------------------------- */ .sda_vision_tasks .elementor-widget-image { position: relative; display: inline-block; width: 100%; overflow: visible !important; } .sda_vision_tasks .elementor-widget-image img { display: block; width: 100% !important; height: auto !important; border-radius: 6px; box-shadow: 0 4px 16px rgba(26, 35, 50, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06); transition: transform 0.45s var(--vt-ease), box-shadow 0.45s ease; } .sda_vision_tasks .elementor-widget-image:hover img { transform: scale(1.015); box-shadow: 0 0 0 1px rgba(4, 107, 210, 0.15), 0 16px 40px rgba(26, 35, 50, 0.14); } .sda_vision_tasks .elementor-widget-image::before { content: ''; position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-top: 2px solid var(--vt-blue); border-left: 2px solid var(--vt-blue); pointer-events: none; z-index: 2; opacity: 0.6; transition: width 0.35s ease, height 0.35s ease, opacity 0.35s ease; } .sda_vision_tasks .elementor-widget-image::after { content: ''; position: absolute; bottom: -8px; right: -8px; width: 24px; height: 24px; border-bottom: 2px solid #b0bcc8; border-right: 2px solid #b0bcc8; pointer-events: none; z-index: 2; opacity: 0.6; transition: width 0.35s ease, height 0.35s ease, opacity 0.35s ease, border-color 0.35s ease; } .sda_vision_tasks .elementor-widget-image:hover::before, .sda_vision_tasks .elementor-widget-image:hover::after { width: 44px; height: 44px; opacity: 1; } .sda_vision_tasks .elementor-widget-image:hover::after { border-color: var(--vt-blue); } /* -------------------------------------------------------------------------- 8. Scroll animácie – rovnaký prístup ako .sda_img-* -------------------------------------------------------------------------- */ @keyframes vtSlideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes vtSlideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .sda_vision_tasks > .e-con-inner > .e-con:first-child { animation: vtSlideInLeft 0.7s var(--vt-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; } .sda_vision_tasks > .e-con-inner > .e-con:last-child { animation: vtSlideInRight 0.7s var(--vt-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; } @supports not (animation-timeline: view()) { .sda_vision_tasks > .e-con-inner > .e-con:first-child { animation: vtSlideInLeft 0.7s var(--vt-ease) 0.1s both; } .sda_vision_tasks > .e-con-inner > .e-con:last-child { animation: vtSlideInRight 0.7s var(--vt-ease) 0.25s both; } } /* -------------------------------------------------------------------------- 9. Responzívne -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .sda_vision_tasks { --vt-section-pt: 40px; --vt-section-pb: 40px; --vt-col-gap: 2rem; --vt-col-text: 58%; --vt-col-image: 42%; --vt-chip-pad: 0.6rem 0.85rem; --vt-chip-minh: 50px; --vt-icon-box: 30px; --vt-icon-size: 16px; --vt-label-size: 0.9rem; } } @media (max-width: 767px) { .sda_vision_tasks { --vt-section-pt: 30px; --vt-section-pb: 30px; --vt-grid-cols: 1; --vt-p-mb: 1.5rem; --vt-accent-w: 64px; --vt-chip-shift: 0px; } /* Stĺpce pod seba */ .sda_vision_tasks > .e-con-inner { flex-wrap: wrap; row-gap: 2rem; } .sda_vision_tasks > .e-con-inner > .e-con:first-child, .sda_vision_tasks > .e-con-inner > .e-con:last-child { flex: 1 1 100%; max-width: 100%; } .sda_vision_tasks::before, .sda_vision_tasks::after { display: none; } /* Bez hover efektov na dotykových zariadeniach */ .sda_vision_tasks .elementor-icon-list-items .elementor-icon-list-item:hover { border-color: var(--vt-chip-border); box-shadow: var(--vt-chip-shadow); } .sda_vision_tasks .elementor-icon-list-item:hover .elementor-icon-list-icon { background: var(--vt-icon-bg); border-color: var(--vt-icon-border); transform: none; } .sda_vision_tasks .elementor-icon-list-item:hover .elementor-icon-list-icon svg { fill: var(--vt-icon-color) !important; } .sda_vision_tasks .elementor-icon-list-item:hover .elementor-icon-list-text { color: #ffffff; } } /* -------------------------------------------------------------------------- 10. Prístupnosť -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sda_vision_tasks > .e-con-inner > .e-con, .sda_vision_tasks .elementor-icon-list-item, .sda_vision_tasks .elementor-icon-list-icon, .sda_vision_tasks .elementor-widget-image img, .sda_vision_tasks .elementor-heading-title::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-45d4bac9 *//* ========================================================================== S.D.A. – Vision page Sekcia: SmartCube (.sda_vision_smartcube) Verzia: v9 Obsahuje tri vnorené bloky: 1) .sda_vision_cube – úvodný riadok: kicker, nadpis, lead, prínosy, tlačidlo + obrázok s posunutým rámom 2) .sda_vision_key – Kľúčové vlastnosti (mriežka kariet) 3) .sda_vision_tasks – Jedna stanica, množstvo úloh (čipy + obrázok) NAHRÁDZA súbory sda-vision-key-v7.css a sda-vision-tasks-v3.css. Tie treba z Dodatočného CSS odstrániť, inak sa pravidlá budú biť. Umiestnenie: Vzhľad → Prispôsobiť → Dodatočné CSS ========================================================================== */ /* -------------------------------------------------------------------------- 1. Premenné (prefix --vs-*) -------------------------------------------------------------------------- */ .sda_vision_smartcube { /* Farby – paleta stránky */ --vs-navy: #1a1f2e; --vs-blue: #046bd2; --vs-blue-lt: #56c8f5; --vs-blue-dk: #043c74; --vs-text: #4a5568; /* Sekcia */ --vs-section-bg: #f0f4f9; --vs-section-pt: 50px; --vs-section-pb: 50px; --vs-block-gap: 3.5rem; /* Nadpisy */ --vs-h2-size: clamp(1.4rem, 2.4vw, 1.9rem); --vs-h2-color: var(--vs-blue-dk); --vs-h2-weight: 800; --vs-h2-tracking: 0.6px; --vs-h2-pb: 16px; --vs-h2-mb: 20px; --vs-accent-color: var(--vs-blue); --vs-accent-h: 3px; --vs-accent-w-row: 40%; --vs-accent-w-block: 90px; --vs-block-title-mb: 2rem; /* Text */ --vs-p-size: 0.97rem; --vs-p-lh: 1.8; /* Riadok text + obrázok */ --vs-row-gap: 2.5rem; --vs-col-text: 50%; --vs-col-image: 50%; /* Blok 1 – úvodný riadok */ --vs-lead-measure: 46ch; --vs-lead-size: 1.06rem; --vs-lead-color: #3a4658; --vs-frame-offset: 16px; --vs-frame-offset-h: 8px; --vs-frame-color: rgba(4, 107, 210, 0.30); --vs-frame-color-hov: var(--vs-blue); /* Kicker nad nadpisom */ --vs-kicker-size: 0.78rem; --vs-kicker-weight: 700; --vs-kicker-tracking: 2px; --vs-kicker-color: var(--vs-blue); --vs-kicker-mb: 0.75rem; --vs-kicker-dash: 26px; /* Zoznam prínosov v bloku 1 */ --vs-ben-mt: 1.6rem; --vs-ben-mb: 1.75rem; --vs-ben-gap: 0.7rem; --vs-ben-icon: 26px; --vs-ben-icon-size: 13px; --vs-ben-icon-bg: rgba(4, 107, 210, 0.12); --vs-ben-size: 0.95rem; --vs-ben-color: var(--vs-lead-color); /* Tlačidlo v bloku 1 */ --vs-btn-pad: 13px 34px; --vs-btn-size: 0.85rem; --vs-btn-tracking: 1.5px; --vs-btn-radius: 50px; --vs-btn-shadow: 0 4px 18px rgba(4, 107, 210, 0.35); --vs-btn-shadow-hov: 0 8px 30px rgba(4, 107, 210, 0.5), 0 0 0 5px rgba(4, 107, 210, 0.12); /* Tmavý kartový motív (.feature-label) */ --vs-card-bg: #485683; --vs-card-glow: radial-gradient(circle farthest-corner at 33% 25%, rgba(51, 128, 220, 0.5) 0%, rgba(0, 0, 0, 0) 60%); --vs-card-border: rgba(30, 144, 255, 0.35); --vs-card-border-hov: var(--vs-blue-lt); --vs-card-shadow: 0 4px 16px rgba(26, 35, 50, 0.18); --vs-card-shadow-hov: 0 12px 32px rgba(4, 107, 210, 0.30); /* Ikony na tmavom podklade */ --vs-icon-bg: rgba(255, 255, 255, 0.12); --vs-icon-border: rgba(255, 255, 255, 0.20); --vs-icon-color: var(--vs-blue-lt); --vs-icon-bg-hov: #ffffff; --vs-icon-color-hov: var(--vs-blue-dk); /* Karty – Kľúčové vlastnosti */ --vs-key-cols: 3; --vs-key-gap-col: 1.5rem; --vs-key-gap-row: 1.5rem; --vs-key-pad: 1.75rem 1.5rem; --vs-key-radius: 10px; --vs-key-lift: -4px; --vs-key-icon-box: 54px; --vs-key-icon-size: 23px; --vs-key-icon-radius: 10px; --vs-key-icon-mb: 1.15rem; --vs-key-title-size: 1.05rem; --vs-key-title-mb: 0.6rem; --vs-key-desc-size: 0.97rem; --vs-key-desc-lh: 1.8; /* Čipy – Jedna stanica */ --vs-tasks-text: 56%; --vs-tasks-image: 44%; --vs-chip-cols: 2; --vs-chip-gap-col: 1rem; --vs-chip-gap-row: 0.75rem; --vs-chip-space: 0.6rem; --vs-chip-pad: 0.7rem 1rem; --vs-chip-radius: 8px; --vs-chip-gap: 0.75rem; --vs-chip-minh: 54px; --vs-chip-shift: 4px; --vs-chip-icon-box: 34px; --vs-chip-icon-size: 18px; --vs-chip-icon-rad: 7px; --vs-chip-label: 0.95rem; /* Obrázok */ --vs-img-radius: 6px; --vs-corner: 24px; --vs-corner-hov: 44px; --vs-ease: cubic-bezier(0.22, 1, 0.36, 1); --vs-dur: 0.35s; } /* -------------------------------------------------------------------------- 2. Sekcia -------------------------------------------------------------------------- */ .sda_vision_smartcube.e-con, .sda_vision_smartcube.e-con.e-parent { position: relative; overflow: hidden; background: var(--vs-section-bg) !important; border-top: 1px solid rgba(4, 107, 210, 0.08) !important; padding-top: var(--vs-section-pt) !important; padding-bottom: var(--vs-section-pb) !important; } /* Bodky – maskované do stredu, raster 28px */ .sda_vision_smartcube::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(4, 107, 210, 0.14) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 420px 320px at 50% 40%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 420px 320px at 50% 40%, black 10%, transparent 70%); pointer-events: none; z-index: 0; } /* Modrý glow vpravo hore */ .sda_vision_smartcube::after { content: ''; position: absolute; right: -150px; top: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(4, 107, 210, 0.05) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Tri bloky pod sebou s jednotným odstupom */ .sda_vision_smartcube > .e-con-inner { position: relative; z-index: 1; display: flex; flex-direction: column; row-gap: var(--vs-block-gap); } /* Vnorené bloky nesmú mať vlastné pozadie ani padding */ .sda_vision_smartcube .sda_vision_key, .sda_vision_smartcube .sda_vision_tasks { background: transparent !important; padding: 0 !important; } /* -------------------------------------------------------------------------- 3. Nadpisy -------------------------------------------------------------------------- */ /* 3a. Nadpis v text editore (SmartCube) */ .sda_vision_smartcube .elementor-widget-text-editor h2 { position: relative; margin: 0 0 var(--vs-h2-mb) 0; padding-bottom: var(--vs-h2-pb); font-size: var(--vs-h2-size); font-weight: var(--vs-h2-weight); letter-spacing: var(--vs-h2-tracking); text-transform: uppercase; line-height: 1.2; text-align: left; } .sda_vision_smartcube .elementor-widget-text-editor h2, .sda_vision_smartcube .elementor-widget-text-editor h2 * { color: var(--vs-h2-color) !important; } .sda_vision_smartcube .elementor-widget-text-editor h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: var(--vs-accent-w-row); height: var(--vs-accent-h); background: linear-gradient(90deg, var(--vs-accent-color) 0%, rgba(4, 107, 210, 0) 100%); transition: width 0.5s var(--vs-ease); } .sda_vision_smartcube .sda_vision_cube:hover .elementor-widget-text-editor h2::after { width: 100%; } /* Nadpis úvodného bloku je o stupeň väčší než nadpisy podblokov */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-text-editor h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: 1px; } /* 3b. Nadpis heading widgetu (Kľúčové vlastnosti, Jedna stanica) */ .sda_vision_smartcube .elementor-heading-title, .sda_vision_smartcube .elementor-widget-heading .elementor-heading-title, .sda_vision_smartcube h2.elementor-heading-title { position: relative; display: inline-block; margin: 0; padding-bottom: var(--vs-h2-pb); font-size: var(--vs-h2-size); font-weight: var(--vs-h2-weight); letter-spacing: var(--vs-h2-tracking); text-transform: uppercase; line-height: 1.2; text-align: left; color: var(--vs-h2-color) !important; } .sda_vision_smartcube .elementor-heading-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: var(--vs-accent-w-block); height: var(--vs-accent-h); background: linear-gradient(90deg, var(--vs-accent-color) 0%, rgba(4, 107, 210, 0) 100%); transition: width 0.5s var(--vs-ease); } .sda_vision_smartcube .sda_vision_key:hover .elementor-heading-title::after, .sda_vision_smartcube .sda_vision_tasks:hover .elementor-heading-title::after { width: 100%; } .sda_vision_smartcube .sda_vision_key > .e-con:first-child { margin-bottom: var(--vs-block-title-mb); } /* -------------------------------------------------------------------------- 4. Odstavce -------------------------------------------------------------------------- */ .sda_vision_smartcube .elementor-widget-text-editor p { margin: 0 0 0.85rem 0; font-size: var(--vs-p-size); line-height: var(--vs-p-lh); color: var(--vs-text); } .sda_vision_smartcube .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 5. Blok 1 – úvodný riadok text + obrázok -------------------------------------------------------------------------- */ .sda_vision_smartcube .sda_vision_cube { display: flex; flex-direction: row; align-items: center; column-gap: var(--vs-row-gap); flex-wrap: nowrap; } .sda_vision_smartcube .sda_vision_cube > .e-con:first-child { position: relative; flex: 1 1 var(--vs-col-text); max-width: var(--vs-col-text); } .sda_vision_smartcube .sda_vision_cube > .e-con:last-child { flex: 1 1 var(--vs-col-image); max-width: var(--vs-col-image); } /* Lead odstavec – prvý odstavec bloku je výraznejší a má kratší riadok */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-text-editor p { max-width: var(--vs-lead-measure); font-size: var(--vs-lead-size); color: var(--vs-lead-color); } /* -------------------------------------------------------------------------- 5b. Obrázok bloku 1 – posunutý obrysový rám namiesto L-rohov -------------------------------------------------------------------------- */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-image { overflow: visible !important; } .sda_vision_smartcube .sda_vision_cube .elementor-widget-image > .elementor-widget-container { position: relative; z-index: 1; } /* Rám sa vysúva vpravo dole spod obrázka */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-image::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; transform: translate(var(--vs-frame-offset), var(--vs-frame-offset)); border: 2px solid var(--vs-frame-color); border-radius: var(--vs-img-radius); opacity: 1; z-index: 0; pointer-events: none; transition: transform 0.45s var(--vs-ease), border-color 0.45s ease; } .sda_vision_smartcube .sda_vision_cube .elementor-widget-image:hover::after { width: auto; height: auto; transform: translate(var(--vs-frame-offset-h), var(--vs-frame-offset-h)); border-color: var(--vs-frame-color-hov); } /* Jemný modrý závoj za obrázkom */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-image::before { content: ''; position: absolute; inset: -18px; width: auto; height: auto; border: none; border-radius: 50%; background: radial-gradient(ellipse at 60% 60%, rgba(4, 107, 210, 0.14) 0%, transparent 70%); opacity: 1; z-index: 0; pointer-events: none; transition: opacity 0.45s ease; } .sda_vision_smartcube .sda_vision_cube .elementor-widget-image:hover::before { width: auto; height: auto; opacity: 0.6; } .sda_vision_smartcube .sda_vision_cube .elementor-widget-image img { box-shadow: 0 6px 22px rgba(26, 35, 50, 0.14), 0 2px 6px rgba(0, 0, 0, 0.07); } /* -------------------------------------------------------------------------- 5c. Kicker, zoznam prínosov a tlačidlo v bloku 1 -------------------------------------------------------------------------- */ /* Kicker – heading widget nad textovým editorom */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-heading { margin-bottom: var(--vs-kicker-mb); } .sda_vision_smartcube .sda_vision_cube .elementor-heading-title { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0; font-size: var(--vs-kicker-size) !important; font-weight: var(--vs-kicker-weight) !important; letter-spacing: var(--vs-kicker-tracking); text-transform: uppercase; line-height: 1.3; color: var(--vs-kicker-color) !important; } .sda_vision_smartcube .sda_vision_cube .elementor-heading-title::before { content: ''; flex: 0 0 var(--vs-kicker-dash); width: var(--vs-kicker-dash); height: 2px; border-radius: 1px; background: var(--vs-blue); } /* Kicker nemá podlinku ako nadpisy podblokov */ .sda_vision_smartcube .sda_vision_cube .elementor-heading-title::after { display: none; } /* Zoznam prínosov – plné riadky, nie tmavé čipy */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-icon-list { height: auto; margin: var(--vs-ben-mt) 0 var(--vs-ben-mb) 0; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-items { display: flex; flex-direction: column; grid-auto-rows: auto; gap: var(--vs-ben-gap); height: auto; max-width: var(--vs-lead-measure); } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-items .elementor-icon-list-item { min-height: 0; padding: 0; background-color: transparent; background-image: none; border: none; border-radius: 0; box-shadow: none; gap: 0.7rem; align-items: flex-start; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-items .elementor-icon-list-item:hover { transform: none; border: none; box-shadow: none; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-icon { flex: 0 0 var(--vs-ben-icon); width: var(--vs-ben-icon); height: var(--vs-ben-icon); margin-top: 2px; border: none; border-radius: 50%; background: var(--vs-ben-icon-bg); } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-icon svg { width: var(--vs-ben-icon-size) !important; height: var(--vs-ben-icon-size) !important; fill: var(--vs-blue) !important; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-item:hover .elementor-icon-list-icon { background: var(--vs-blue); border: none; transform: none; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-item:hover .elementor-icon-list-icon svg { fill: #ffffff !important; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-text { font-size: var(--vs-ben-size); font-weight: 500; line-height: 1.6; color: var(--vs-ben-color); text-wrap: pretty; } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--vs-ben-color); } /* Tlačidlo */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-button { margin: 0; } .sda_vision_smartcube .sda_vision_cube .elementor-button-wrapper { text-align: left; } .sda_vision_smartcube .elementor-button, .sda_vision_smartcube a.elementor-button { display: inline-flex; align-items: center; justify-content: center; padding: var(--vs-btn-pad) !important; background-color: var(--vs-blue) !important; background-image: none !important; border: none !important; border-radius: var(--vs-btn-radius) !important; color: #ffffff !important; font-size: var(--vs-btn-size) !important; font-weight: 700 !important; letter-spacing: var(--vs-btn-tracking) !important; text-transform: uppercase !important; line-height: 1.2 !important; text-decoration: none !important; box-shadow: var(--vs-btn-shadow) !important; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--vs-ease) !important; } .sda_vision_smartcube .elementor-button:hover, .sda_vision_smartcube a.elementor-button:hover { background-color: #035bb8 !important; color: #ffffff !important; box-shadow: var(--vs-btn-shadow-hov) !important; transform: translateY(-2px); } .sda_vision_smartcube .elementor-button:active { transform: translateY(0); } /* -------------------------------------------------------------------------- 6. Blok 2 – Kľúčové vlastnosti -------------------------------------------------------------------------- */ .sda_vision_smartcube .sda_vision_key { display: flex; flex-direction: column; } .sda_vision_smartcube .sda_vision_key .e-grid { display: grid; grid-template-columns: repeat(var(--vs-key-cols), minmax(0, 1fr)); --e-con-grid-template-columns: repeat(var(--vs-key-cols), minmax(0, 1fr)); column-gap: var(--vs-key-gap-col); row-gap: var(--vs-key-gap-row); align-items: stretch; width: 100%; } /* Karta */ .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child { position: relative; height: 100%; overflow: hidden; padding: var(--vs-key-pad); background-color: var(--vs-card-bg); background-image: var(--vs-card-glow); border: 1px solid var(--vs-card-border); border-radius: var(--vs-key-radius); box-shadow: var(--vs-card-shadow); transition: transform var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) ease, border-color var(--vs-dur) ease; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover { transform: translateY(var(--vs-key-lift)); border-color: var(--vs-card-border-hov); box-shadow: var(--vs-card-shadow-hov); } /* Spodná gradientová linka */ .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--vs-blue), var(--vs-blue-lt)); transition: width 0.4s var(--vs-ease); } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover::after { width: 100%; } .sda_vision_smartcube .elementor-widget-icon-box { width: 100%; margin: 0; } .sda_vision_smartcube .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* Ikona karty */ .sda_vision_smartcube .elementor-icon-box-icon { margin: 0 0 var(--vs-key-icon-mb) 0; } .sda_vision_smartcube .elementor-icon-box-icon .elementor-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--vs-key-icon-box); height: var(--vs-key-icon-box); padding: 0; border: 1px solid var(--vs-icon-border); border-radius: var(--vs-key-icon-radius); background-color: var(--vs-icon-bg); background-image: none; color: var(--vs-icon-color); font-size: var(--vs-key-icon-size); box-shadow: none; transition: background-color var(--vs-dur) ease, border-color var(--vs-dur) ease, color var(--vs-dur) ease, transform var(--vs-dur) var(--vs-ease); } .sda_vision_smartcube .elementor-icon-box-icon .elementor-icon svg { width: var(--vs-key-icon-size); height: var(--vs-key-icon-size); fill: currentColor; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover .elementor-icon { background-color: var(--vs-icon-bg-hov); border-color: var(--vs-icon-bg-hov); color: var(--vs-icon-color-hov); transform: translateY(-2px); } /* Text karty */ .sda_vision_smartcube .elementor-icon-box-content { width: 100%; } .sda_vision_smartcube .elementor-icon-box-title { margin: 0 0 var(--vs-key-title-mb) 0; font-size: var(--vs-key-title-size); font-weight: 700; line-height: 1.35; color: #ffffff; transition: color var(--vs-dur) ease; } .sda_vision_smartcube .elementor-icon-box-title > span { display: inline; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover .elementor-icon-box-title { color: var(--vs-blue-lt); } .sda_vision_smartcube .elementor-icon-box-description { margin: 0; font-size: var(--vs-key-desc-size); line-height: var(--vs-key-desc-lh); color: rgba(255, 255, 255, 0.78); } /* -------------------------------------------------------------------------- 7. Blok 3 – Jedna stanica, množstvo úloh -------------------------------------------------------------------------- */ .sda_vision_smartcube .sda_vision_tasks { display: flex; flex-direction: row; align-items: center; column-gap: var(--vs-row-gap); flex-wrap: nowrap; } .sda_vision_smartcube .sda_vision_tasks > .e-con:first-child { flex: 1 1 var(--vs-tasks-text); max-width: var(--vs-tasks-text); } .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child { flex: 1 1 var(--vs-tasks-image); max-width: var(--vs-tasks-image); } .sda_vision_smartcube .sda_vision_tasks .elementor-widget-heading { margin-bottom: var(--vs-h2-mb); } .sda_vision_smartcube .sda_vision_tasks .elementor-widget-text-editor { margin-bottom: 1.75rem; } /* Mriežka dvoch zoznamov */ .sda_vision_smartcube .sda_vision_tasks .e-grid { display: grid; grid-template-columns: repeat(var(--vs-chip-cols), minmax(0, 1fr)); --e-con-grid-template-columns: repeat(var(--vs-chip-cols), minmax(0, 1fr)); column-gap: var(--vs-chip-gap-col); row-gap: var(--vs-chip-gap-row); align-items: stretch; width: 100%; } /* Oba zoznamy rovnako vysoké, aby riadky sedeli oproti sebe */ .sda_vision_smartcube .elementor-widget-icon-list { width: 100%; height: 100%; margin: 0; } .sda_vision_smartcube .elementor-widget-icon-list > .elementor-widget-container { height: 100%; } .sda_vision_smartcube .elementor-icon-list-items { display: grid; grid-auto-rows: 1fr; gap: var(--vs-chip-space); height: 100%; margin: 0; padding: 0; list-style: none; } /* Čip */ .sda_vision_smartcube .elementor-icon-list-items .elementor-icon-list-item { display: flex; align-items: center; gap: var(--vs-chip-gap); min-height: var(--vs-chip-minh); margin: 0; padding: var(--vs-chip-pad); background-color: var(--vs-card-bg); background-image: var(--vs-card-glow); border: 1px solid var(--vs-card-border); border-radius: var(--vs-chip-radius); box-shadow: var(--vs-card-shadow); transition: transform var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) ease, box-shadow var(--vs-dur) ease; } .sda_vision_smartcube .elementor-icon-list-items .elementor-icon-list-item:hover { transform: translateX(var(--vs-chip-shift)); border-color: var(--vs-card-border-hov); box-shadow: var(--vs-card-shadow-hov); } /* Ikona čipu */ .sda_vision_smartcube .elementor-icon-list-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--vs-chip-icon-box); width: var(--vs-chip-icon-box); height: var(--vs-chip-icon-box); padding: 0; border: 1px solid var(--vs-icon-border); border-radius: var(--vs-chip-icon-rad); background: var(--vs-icon-bg); transition: background-color var(--vs-dur) ease, border-color var(--vs-dur) ease, transform var(--vs-dur) var(--vs-ease); } .sda_vision_smartcube .elementor-icon-list-icon svg { width: var(--vs-chip-icon-size) !important; height: var(--vs-chip-icon-size) !important; fill: var(--vs-icon-color) !important; transition: fill var(--vs-dur) ease; } .sda_vision_smartcube .elementor-icon-list-item:hover .elementor-icon-list-icon { background: var(--vs-icon-bg-hov); border-color: var(--vs-icon-bg-hov); transform: scale(1.05); } .sda_vision_smartcube .elementor-icon-list-item:hover .elementor-icon-list-icon svg { fill: var(--vs-icon-color-hov) !important; } /* Text čipu */ .sda_vision_smartcube .elementor-icon-list-text { padding: 0; font-size: var(--vs-chip-label); font-weight: 600; line-height: 1.3; color: #ffffff; text-wrap: balance; transition: color var(--vs-dur) ease; } .sda_vision_smartcube .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--vs-blue-lt); } /* -------------------------------------------------------------------------- 8. Obrázky – L-rohy -------------------------------------------------------------------------- */ .sda_vision_smartcube .elementor-widget-image { position: relative; display: inline-block; width: 100%; overflow: visible !important; } .sda_vision_smartcube .elementor-widget-image img { display: block; width: 100% !important; height: auto !important; border-radius: var(--vs-img-radius); box-shadow: 0 4px 16px rgba(26, 35, 50, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06); transition: transform 0.45s var(--vs-ease), box-shadow 0.45s ease; } .sda_vision_smartcube .elementor-widget-image:hover img { transform: scale(1.015); box-shadow: 0 0 0 1px rgba(4, 107, 210, 0.15), 0 16px 40px rgba(26, 35, 50, 0.14); } .sda_vision_smartcube .elementor-widget-image::before { content: ''; position: absolute; top: -8px; left: -8px; width: var(--vs-corner); height: var(--vs-corner); border-top: 2px solid var(--vs-blue); border-left: 2px solid var(--vs-blue); pointer-events: none; z-index: 2; opacity: 0.6; transition: width 0.35s ease, height 0.35s ease, opacity 0.35s ease; } .sda_vision_smartcube .elementor-widget-image::after { content: ''; position: absolute; bottom: -8px; right: -8px; width: var(--vs-corner); height: var(--vs-corner); border-bottom: 2px solid #b0bcc8; border-right: 2px solid #b0bcc8; pointer-events: none; z-index: 2; opacity: 0.6; transition: width 0.35s ease, height 0.35s ease, opacity 0.35s ease, border-color 0.35s ease; } .sda_vision_smartcube .elementor-widget-image:hover::before, .sda_vision_smartcube .elementor-widget-image:hover::after { width: var(--vs-corner-hov); height: var(--vs-corner-hov); opacity: 1; } .sda_vision_smartcube .elementor-widget-image:hover::after { border-color: var(--vs-blue); } /* -------------------------------------------------------------------------- 9. Scroll animácie -------------------------------------------------------------------------- */ @keyframes vsSlideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes vsSlideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes vsFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Blok 1 a blok 3 – stĺpce z bokov */ .sda_vision_smartcube .sda_vision_cube > .e-con:first-child, .sda_vision_smartcube .sda_vision_tasks > .e-con:first-child { animation: vsSlideInLeft 0.7s var(--vs-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; } .sda_vision_smartcube .sda_vision_cube > .e-con:last-child, .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child { animation: vsSlideInRight 0.7s var(--vs-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; } /* Blok 2 – karty zdola */ .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child { animation: vsFadeUp 0.6s var(--vs-ease) both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @supports not (animation-timeline: view()) { .sda_vision_smartcube .sda_vision_cube > .e-con:first-child, .sda_vision_smartcube .sda_vision_tasks > .e-con:first-child { animation: vsSlideInLeft 0.7s var(--vs-ease) 0.1s both; } .sda_vision_smartcube .sda_vision_cube > .e-con:last-child, .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child { animation: vsSlideInRight 0.7s var(--vs-ease) 0.25s both; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:nth-child(1) { animation-delay: 0.05s; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:nth-child(2) { animation-delay: 0.12s; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:nth-child(3) { animation-delay: 0.19s; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:nth-child(4) { animation-delay: 0.26s; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:nth-child(5) { animation-delay: 0.33s; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:nth-child(6) { animation-delay: 0.40s; } } /* -------------------------------------------------------------------------- 10. Responzívne Zlomy: ≤1200px notebook – užšie medzery, menší rám obrázka ≤1024px tablet – Tasks pod seba, karty do 2 stĺpcov ≤880px malý tablet – úvodný blok pod seba ≤767px mobil – karty do 1 stĺpca, tlačidlo na šírku ≤479px malý mobil – čipy do 1 stĺpca, najtesnejšie odsadenia -------------------------------------------------------------------------- */ /* ---------- Notebook ---------- */ @media (max-width: 1200px) { .sda_vision_smartcube { --vs-block-gap: 3rem; --vs-row-gap: 2.25rem; --vs-frame-offset: 12px; --vs-frame-offset-h: 6px; --vs-lead-measure: 42ch; } } /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .sda_vision_smartcube { --vs-section-pt: 40px; --vs-section-pb: 40px; --vs-block-gap: 2.75rem; --vs-row-gap: 2rem; --vs-col-text: 54%; --vs-col-image: 46%; --vs-key-cols: 2; --vs-key-gap-col: 1.25rem; --vs-key-gap-row: 1.25rem; --vs-key-pad: 1.5rem 1.35rem; --vs-key-icon-box: 50px; --vs-key-icon-size: 22px; --vs-key-title-size: 1rem; --vs-key-desc-size: 0.94rem; --vs-key-desc-lh: 1.7; --vs-chip-pad: 0.6rem 0.85rem; --vs-chip-minh: 50px; --vs-chip-icon-box: 30px; --vs-chip-icon-size: 16px; --vs-chip-label: 0.9rem; --vs-ben-size: 0.92rem; } /* Tasks: text a obrázok pod seba – čipy vedľa obrázka sú na tablete pritesné */ .sda_vision_smartcube .sda_vision_tasks { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 2rem; } /* Rovnaká špecificita ako desktopové pravidlá, inak by max-width prežilo */ .sda_vision_smartcube .sda_vision_tasks > .e-con:first-child, .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child { flex: 0 0 auto; width: 100%; max-width: 100%; } /* Obrázok vyplní stĺpec a vycentruje sa v limite */ .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child > .e-con-inner { width: 100%; max-width: 100%; } .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child .elementor-widget-image { display: block; width: 100%; max-width: 520px; margin: 0 auto; } } /* ---------- Malý tablet ---------- */ @media (max-width: 880px) { .sda_vision_smartcube { --vs-block-gap: 2.5rem; --vs-lead-measure: 100%; --vs-frame-offset: 10px; --vs-frame-offset-h: 5px; } /* Úvodný blok pod seba */ .sda_vision_smartcube .sda_vision_cube { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 2rem; } /* Rovnaká špecificita ako desktopové pravidlá, inak by max-width prežilo */ .sda_vision_smartcube .sda_vision_cube > .e-con:first-child, .sda_vision_smartcube .sda_vision_cube > .e-con:last-child { flex: 0 0 auto; width: 100%; max-width: 100%; } /* Obrázok vyplní stĺpec a vycentruje sa v limite */ .sda_vision_smartcube .sda_vision_cube > .e-con:last-child .elementor-widget-image { display: block; width: 100%; max-width: 560px; margin: 0 auto; } } /* ---------- Mobil ---------- */ @media (max-width: 767px) { .sda_vision_smartcube { --vs-section-pt: 30px; --vs-section-pb: 30px; --vs-block-gap: 2.25rem; --vs-key-cols: 1; --vs-key-gap-row: 1rem; --vs-key-pad: 1.5rem 1.25rem; --vs-key-icon-box: 48px; --vs-key-icon-size: 21px; --vs-key-icon-mb: 1rem; --vs-key-lift: 0px; --vs-chip-cols: 2; --vs-chip-gap-col: 0.7rem; --vs-chip-space: 0.5rem; --vs-chip-pad: 0.55rem 0.7rem; --vs-chip-gap: 0.55rem; --vs-chip-minh: 48px; --vs-chip-label: 0.85rem; --vs-chip-shift: 0px; --vs-accent-w-row: 64px; --vs-accent-w-block: 64px; --vs-lead-size: 0.97rem; --vs-frame-offset: 8px; --vs-frame-offset-h: 8px; --vs-kicker-size: 0.72rem; --vs-kicker-tracking: 1.5px; --vs-kicker-dash: 18px; --vs-ben-mt: 1.35rem; --vs-ben-mb: 1.5rem; --vs-ben-gap: 0.6rem; --vs-ben-size: 0.92rem; --vs-btn-pad: 14px 28px; --vs-btn-size: 0.82rem; } /* Dekorácie pozadia sa na malej ploche len zahusťujú */ .sda_vision_smartcube::before, .sda_vision_smartcube::after { display: none; } /* Závoj za obrázkom preč, rám zostáva */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-image::before { display: none; } /* Nadpis úvodného bloku nepotrebuje extra veľkosť */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-text-editor h2 { font-size: clamp(1.45rem, 6vw, 1.75rem); letter-spacing: 0.5px; } /* Tlačidlo na stred */ .sda_vision_smartcube .sda_vision_cube .elementor-button-wrapper { text-align: center; } .sda_vision_smartcube .elementor-button, .sda_vision_smartcube a.elementor-button { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; } /* Obrázky bez limitu z väčších zlomov */ .sda_vision_smartcube .sda_vision_cube > .e-con:last-child .elementor-widget-image, .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child .elementor-widget-image { display: block; width: 100%; max-width: 100%; } /* Boxed kontajner obrázka v Tasks má vlastný .e-con-inner */ .sda_vision_smartcube .sda_vision_tasks > .e-con:last-child > .e-con-inner { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } } /* ---------- Malý mobil ---------- */ @media (max-width: 479px) { .sda_vision_smartcube { --vs-section-pt: 24px; --vs-section-pb: 24px; --vs-block-gap: 2rem; --vs-chip-cols: 1; --vs-chip-minh: 46px; --vs-chip-label: 0.88rem; --vs-key-pad: 1.35rem 1.15rem; --vs-key-icon-box: 44px; --vs-key-icon-size: 19px; --vs-key-desc-size: 0.92rem; --vs-frame-offset: 6px; --vs-frame-offset-h: 6px; } /* Rám by na úzkej ploche pretekal cez okraj */ .sda_vision_smartcube .sda_vision_cube .elementor-widget-image::after { display: none; } } /* ---------- Dotykové zariadenia ---------- */ @media (hover: none) { .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover { transform: none; border-color: var(--vs-card-border); box-shadow: var(--vs-card-shadow); } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover::after { width: 0%; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover .elementor-icon { background-color: var(--vs-icon-bg); border-color: var(--vs-icon-border); color: var(--vs-icon-color); transform: none; } .sda_vision_smartcube .sda_vision_key .e-grid > .e-con.e-child:hover .elementor-icon-box-title { color: #ffffff; } .sda_vision_smartcube .elementor-icon-list-items .elementor-icon-list-item:hover { transform: none; border-color: var(--vs-card-border); box-shadow: var(--vs-card-shadow); } .sda_vision_smartcube .elementor-icon-list-item:hover .elementor-icon-list-icon { background: var(--vs-icon-bg); border-color: var(--vs-icon-border); transform: none; } .sda_vision_smartcube .elementor-icon-list-item:hover .elementor-icon-list-icon svg { fill: var(--vs-icon-color) !important; } .sda_vision_smartcube .elementor-icon-list-item:hover .elementor-icon-list-text { color: #ffffff; } /* Zoznam prínosov v úvodnom bloku má vlastné svetlé farby */ .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-item:hover .elementor-icon-list-icon { background: var(--vs-ben-icon-bg); } .sda_vision_smartcube .sda_vision_cube .elementor-icon-list-item:hover .elementor-icon-list-icon svg { fill: var(--vs-blue) !important; } .sda_vision_smartcube .elementor-widget-image:hover img { transform: none; } .sda_vision_smartcube .elementor-widget-image:hover::before, .sda_vision_smartcube .elementor-widget-image:hover::after { width: var(--vs-corner); height: var(--vs-corner); opacity: 0.6; } .sda_vision_smartcube .sda_vision_cube .elementor-widget-image:hover::after { width: auto; height: auto; transform: translate(var(--vs-frame-offset), var(--vs-frame-offset)); border-color: var(--vs-frame-color); } .sda_vision_smartcube .elementor-button:hover, .sda_vision_smartcube a.elementor-button:hover { background-color: var(--vs-blue) !important; box-shadow: var(--vs-btn-shadow) !important; transform: none; } .sda_vision_smartcube:hover .elementor-heading-title::after, .sda_vision_smartcube .sda_vision_key:hover .elementor-heading-title::after, .sda_vision_smartcube .sda_vision_tasks:hover .elementor-heading-title::after { width: var(--vs-accent-w-block); } .sda_vision_smartcube .sda_vision_cube:hover .elementor-widget-text-editor h2::after { width: var(--vs-accent-w-row); } } /* -------------------------------------------------------------------------- 11. Prístupnosť -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sda_vision_smartcube .e-con, .sda_vision_smartcube .elementor-icon-list-item, .sda_vision_smartcube .elementor-icon, .sda_vision_smartcube .elementor-icon-list-icon, .sda_vision_smartcube .elementor-widget-image img, .sda_vision_smartcube .elementor-icon-box-title, .sda_vision_smartcube .elementor-heading-title::after, .sda_vision_smartcube .elementor-widget-text-editor h2::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0e40466 *//* ========================================================================== S.D.A. – Vision page Sekcia: CTA banner (.sda_vision_cta) Verzia: v2 Nadväzuje na .sda_banner a na kartový motív .sda_vision_key / .sda_vision_tasks Umiestnenie: Vzhľad → Prispôsobiť → Dodatočné CSS ========================================================================== */ /* -------------------------------------------------------------------------- 1. Premenné (prefix --cta-*) -------------------------------------------------------------------------- */ .sda_vision_cta { /* Farby – paleta stránky */ --cta-navy: #1a1f2e; --cta-navy-tile: #485683; --cta-blue: #046bd2; --cta-blue-hov: #035bb8; --cta-blue-lt: #56c8f5; --cta-blue-dk: #043c74; --cta-text: #4a5568; /* Sekcia */ --cta-bg: rgba(220, 235, 252, 0.5); --cta-pt: 60px; --cta-pb: 70px; --cta-px: 20px; --cta-max-w: 720px; /* Watermark */ --cta-wm-size: clamp(140px, 20vw, 240px); --cta-wm-stroke: rgba(4, 107, 210, 0.13); --cta-wm-bottom: -24px; /* Nadpis */ --cta-h2-size: clamp(1.5rem, 2.8vw, 2.2rem); --cta-h2-color: var(--cta-blue-dk); --cta-h2-weight: 900; --cta-h2-tracking: 2px; --cta-h2-pb: 20px; --cta-h2-mb: 1.25rem; --cta-accent-w: 56px; --cta-accent-w-hov: 110px; --cta-accent-h: 4px; /* Text */ --cta-p-size: 1rem; --cta-p-lh: 1.8; --cta-p-mb: 2rem; /* Tlačidlo */ --cta-btn-bg: var(--cta-blue); --cta-btn-color: #ffffff; --cta-btn-pad: 15px 52px; --cta-btn-size: 0.9rem; --cta-btn-weight: 700; --cta-btn-tracking: 2px; --cta-btn-radius: 50px; --cta-btn-shadow: 0 4px 20px rgba(4, 107, 210, 0.4); --cta-btn-shadow-hov: 0 8px 36px rgba(4, 107, 210, 0.6), 0 0 0 6px rgba(4, 107, 210, 0.12); --cta-ease: cubic-bezier(0.22, 1, 0.36, 1); --cta-dur: 0.3s; } /* -------------------------------------------------------------------------- 2. Sekcia -------------------------------------------------------------------------- */ .sda_vision_cta.e-con, .sda_vision_cta.e-con.e-parent { position: relative; overflow: hidden; background: var(--cta-bg) !important; border-top: 1px solid rgba(4, 107, 210, 0.1) !important; border-bottom: 1px solid rgba(4, 107, 210, 0.1) !important; padding: var(--cta-pt) var(--cta-px) var(--cta-pb) !important; } /* Watermark S.D.A – rovnaký ako v .sda_banner */ .sda_vision_cta::before { content: 'S.D.A'; position: absolute; bottom: var(--cta-wm-bottom); left: 50%; transform: translateX(-50%); font-size: var(--cta-wm-size); font-weight: 900; letter-spacing: -10px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--cta-wm-stroke); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } /* Bodky pri bočných okrajoch */ .sda_vision_cta::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(4, 107, 210, 0.12) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 28% 100% at 0% 50%, black 20%, transparent 65%), radial-gradient(ellipse 28% 100% at 100% 50%, black 20%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse 28% 100% at 0% 50%, black 20%, transparent 65%), radial-gradient(ellipse 28% 100% at 100% 50%, black 20%, transparent 65%); mask-composite: add; -webkit-mask-composite: source-over; pointer-events: none; z-index: 0; } .sda_vision_cta > .e-con-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } /* -------------------------------------------------------------------------- 3. Nadpis (ak doplníš heading widget) -------------------------------------------------------------------------- */ .sda_vision_cta .elementor-widget-heading { margin-bottom: var(--cta-h2-mb); max-width: var(--cta-max-w); } .sda_vision_cta .elementor-heading-title, .sda_vision_cta .elementor-widget-heading .elementor-heading-title, .sda_vision_cta h2.elementor-heading-title { position: relative; display: inline-block; margin: 0; padding-bottom: var(--cta-h2-pb); font-size: var(--cta-h2-size); font-weight: var(--cta-h2-weight); letter-spacing: var(--cta-h2-tracking); text-transform: uppercase; line-height: 1.2; text-align: center; color: var(--cta-h2-color) !important; } /* Dvojitá linka pod nadpisom – ako v .sda_banner */ .sda_vision_cta .elementor-heading-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--cta-accent-w); height: var(--cta-accent-h); border-radius: 2px; background: linear-gradient(90deg, var(--cta-blue), var(--cta-blue-lt)); box-shadow: 0 0 14px rgba(4, 107, 210, 0.4); transition: width 0.5s var(--cta-ease); } .sda_vision_cta .elementor-heading-title::before { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; border-radius: 2px; background: rgba(4, 107, 210, 0.25); transition: width 0.5s var(--cta-ease) 0.1s; } .sda_vision_cta:hover .elementor-heading-title::after { width: var(--cta-accent-w-hov); } .sda_vision_cta:hover .elementor-heading-title::before { width: 60px; } /* -------------------------------------------------------------------------- 4. Odstavec (ak doplníš text editor widget) -------------------------------------------------------------------------- */ .sda_vision_cta .elementor-widget-text-editor { max-width: var(--cta-max-w); margin-bottom: var(--cta-p-mb); } .sda_vision_cta .elementor-widget-text-editor p { margin: 0 0 0.75rem 0; font-size: var(--cta-p-size); line-height: var(--cta-p-lh); color: var(--cta-text); text-align: center; } .sda_vision_cta .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 5. Tlačidlo -------------------------------------------------------------------------- */ .sda_vision_cta .elementor-widget-button { width: auto; margin: 0; } .sda_vision_cta .elementor-button-wrapper { text-align: center; } .sda_vision_cta .elementor-button, .sda_vision_cta a.elementor-button, .sda_vision_cta .elementor-button-link { display: inline-flex; align-items: center; justify-content: center; padding: var(--cta-btn-pad) !important; background-color: var(--cta-btn-bg) !important; background-image: none !important; border: none !important; border-radius: var(--cta-btn-radius) !important; color: var(--cta-btn-color) !important; font-size: var(--cta-btn-size) !important; font-weight: var(--cta-btn-weight) !important; letter-spacing: var(--cta-btn-tracking) !important; text-transform: uppercase !important; line-height: 1.2 !important; text-decoration: none !important; box-shadow: var(--cta-btn-shadow) !important; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--cta-ease) !important; } .sda_vision_cta .elementor-button:hover, .sda_vision_cta .elementor-button:focus-visible, .sda_vision_cta a.elementor-button:hover { background-color: var(--cta-blue-hov) !important; color: var(--cta-btn-color) !important; box-shadow: var(--cta-btn-shadow-hov) !important; transform: translateY(-2px); } .sda_vision_cta .elementor-button:active { transform: translateY(0); } .sda_vision_cta .elementor-button-content-wrapper { gap: 0.6rem; } .sda_vision_cta .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; } /* -------------------------------------------------------------------------- 6. Scroll animácia -------------------------------------------------------------------------- */ @keyframes ctaFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .sda_vision_cta > .e-con-inner > * { animation: ctaFadeUp 0.6s var(--cta-ease) both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @supports not (animation-timeline: view()) { .sda_vision_cta > .e-con-inner > *:nth-child(1) { animation-delay: 0.05s; } .sda_vision_cta > .e-con-inner > *:nth-child(2) { animation-delay: 0.15s; } .sda_vision_cta > .e-con-inner > *:nth-child(3) { animation-delay: 0.25s; } } /* -------------------------------------------------------------------------- 7. Responzívne -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .sda_vision_cta { --cta-pt: 50px; --cta-pb: 56px; --cta-btn-pad: 14px 42px; } } @media (max-width: 767px) { .sda_vision_cta { --cta-pt: 40px; --cta-pb: 46px; --cta-px: 16px; --cta-h2-tracking: 1px; --cta-p-mb: 1.5rem; --cta-btn-pad: 13px 32px; --cta-btn-size: 0.85rem; --cta-btn-tracking: 1.5px; --cta-wm-bottom: -14px; } .sda_vision_cta::after { display: none; } /* Watermark by na úzkej ploche kolidoval s nadpisom */ .sda_vision_cta::before { display: none; } .sda_vision_cta .elementor-button { width: 100%; max-width: 320px; } /* Bez hover efektov na dotykových zariadeniach */ .sda_vision_cta .elementor-button:hover { transform: none; box-shadow: var(--cta-btn-shadow) !important; } } /* -------------------------------------------------------------------------- 8. Prístupnosť -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sda_vision_cta > .e-con-inner > *, .sda_vision_cta .elementor-button, .sda_vision_cta .elementor-heading-title::after, .sda_vision_cta .elementor-heading-title::before { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .sda_vision_cta .elementor-heading-title::after, .sda_vision_cta .elementor-heading-title::before { transform: translateX(-50%) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1e0ec57b *//* ========================================================================== S.D.A. – Vision page Sekcia: Ďalšie riešenia platformy (.sda_vision_more) Verzia: v2 Tmavý blok v štýle .sda_img-left, tri striedajúce sa riadky Umiestnenie: Vzhľad → Prispôsobiť → Dodatočné CSS ========================================================================== */ /* -------------------------------------------------------------------------- 1. Premenné (prefix --vm-*) -------------------------------------------------------------------------- */ .sda_vision_more { /* Farby – paleta stránky */ --vm-navy: #1a1f2e; --vm-blue: #046bd2; --vm-blue-lt: #56c8f5; --vm-section-bg: #1a1f2e; --vm-text: rgba(255, 255, 255, 0.7); /* Sekcia */ --vm-section-pt: 50px; --vm-section-pb: 50px; /* Nadpis sekcie */ --vm-title-size: clamp(1.4rem, 2.4vw, 1.9rem); --vm-title-color: #ffffff; --vm-title-weight: 800; --vm-title-tracking: 0.6px; --vm-title-pb: 16px; --vm-title-mb: 2.5rem; --vm-accent-w: 90px; --vm-accent-h: 3px; /* Riadky */ --vm-row-gap: 3rem; --vm-row-space: 3.5rem; --vm-divider: rgba(255, 255, 255, 0.08); /* Nadpis produktu */ --vm-h2-size: clamp(1.4rem, 2.4vw, 1.9rem); --vm-h2-weight: 800; --vm-h2-tracking: 0.6px; --vm-h2-pb: 16px; --vm-h2-mb: 20px; --vm-h2-line-w: 40%; /* Text */ --vm-p-size: 0.97rem; --vm-p-lh: 1.8; /* Obrázok */ --vm-img-radius: 6px; --vm-corner: 24px; --vm-corner-hov: 44px; --vm-ease: cubic-bezier(0.22, 1, 0.36, 1); --vm-dur: 0.35s; } /* -------------------------------------------------------------------------- 2. Sekcia – tmavý podklad ako .sda_img-left -------------------------------------------------------------------------- */ .sda_vision_more.e-con, .sda_vision_more.e-con.e-parent { position: relative; overflow: hidden; background: var(--vm-section-bg) !important; border-top: 1px solid rgba(4, 107, 210, 0.15) !important; padding-top: var(--vm-section-pt) !important; padding-bottom: var(--vm-section-pb) !important; } /* Svetlé bodky */ .sda_vision_more::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 420px 300px at 50% 50%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 420px 300px at 50% 50%, black 10%, transparent 70%); pointer-events: none; z-index: 0; } /* Modrý glow vľavo dole */ .sda_vision_more::after { content: ''; position: absolute; left: -150px; bottom: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(4, 107, 210, 0.12) 0%, transparent 65%); pointer-events: none; z-index: 0; } .sda_vision_more > .e-con-inner { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 3. Nadpis sekcie -------------------------------------------------------------------------- */ .sda_vision_more > .e-con-inner > .elementor-widget-heading { margin-bottom: var(--vm-title-mb); } .sda_vision_more .elementor-heading-title, .sda_vision_more .elementor-widget-heading .elementor-heading-title, .sda_vision_more h2.elementor-heading-title { position: relative; display: inline-block; margin: 0; padding-bottom: var(--vm-title-pb); font-size: var(--vm-title-size); font-weight: var(--vm-title-weight); letter-spacing: var(--vm-title-tracking); text-transform: uppercase; line-height: 1.2; color: var(--vm-title-color) !important; } .sda_vision_more .elementor-heading-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: var(--vm-accent-w); height: var(--vm-accent-h); border-radius: 2px; background: linear-gradient(90deg, var(--vm-blue-lt) 0%, rgba(86, 200, 245, 0) 100%); transition: width 0.5s var(--vm-ease); } .sda_vision_more:hover .elementor-heading-title::after { width: 100%; } /* -------------------------------------------------------------------------- 4. Riadky – dva stĺpce, striedavý poradie podľa markupu -------------------------------------------------------------------------- */ .sda_vision_more > .e-con-inner > .e-con.e-child { display: flex; flex-direction: row; align-items: center; column-gap: var(--vm-row-gap); margin-bottom: var(--vm-row-space); padding-bottom: var(--vm-row-space); border-bottom: 1px solid var(--vm-divider); } .sda_vision_more > .e-con-inner > .e-con.e-child:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con { flex: 1 1 50%; max-width: 50%; } /* -------------------------------------------------------------------------- 5. Nadpis a text produktu -------------------------------------------------------------------------- */ .sda_vision_more .elementor-widget-text-editor h2 { position: relative; margin: 0 0 var(--vm-h2-mb) 0; padding-bottom: var(--vm-h2-pb); font-size: var(--vm-h2-size); font-weight: var(--vm-h2-weight); letter-spacing: var(--vm-h2-tracking); text-transform: uppercase; line-height: 1.2; text-align: left; } /* Prebije inline color: #043c74 na span vnútri h2 */ .sda_vision_more .elementor-widget-text-editor h2, .sda_vision_more .elementor-widget-text-editor h2 * { color: #ffffff !important; } .sda_vision_more .elementor-widget-text-editor h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: var(--vm-h2-line-w); height: var(--vm-accent-h); background: linear-gradient(90deg, var(--vm-blue-lt) 0%, rgba(86, 200, 245, 0) 100%); transition: width 0.5s var(--vm-ease); } .sda_vision_more > .e-con-inner > .e-con.e-child:hover .elementor-widget-text-editor h2::after { width: 100%; } .sda_vision_more .elementor-widget-text-editor p { margin: 0; font-size: var(--vm-p-size); line-height: var(--vm-p-lh); color: var(--vm-text); } .sda_vision_more .elementor-widget-text-editor ul li, .sda_vision_more .elementor-widget-text-editor ul li::marker { color: var(--vm-text); } /* -------------------------------------------------------------------------- 6. Obrázok – L-rohy ako v .sda_img-* -------------------------------------------------------------------------- */ .sda_vision_more .elementor-widget-image { position: relative; display: inline-block; width: 100%; overflow: visible !important; } .sda_vision_more .elementor-widget-image img { display: block; width: 100% !important; height: auto !important; border-radius: var(--vm-img-radius); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2); transition: transform 0.45s var(--vm-ease), box-shadow 0.45s ease; } .sda_vision_more .elementor-widget-image:hover img { transform: scale(1.015); box-shadow: 0 0 0 1px rgba(4, 107, 210, 0.3), 0 16px 48px rgba(0, 0, 0, 0.45); } .sda_vision_more .elementor-widget-image::before { content: ''; position: absolute; top: -8px; left: -8px; width: var(--vm-corner); height: var(--vm-corner); border-top: 2px solid var(--vm-blue-lt); border-left: 2px solid var(--vm-blue-lt); pointer-events: none; z-index: 2; opacity: 0.6; transition: width 0.35s ease, height 0.35s ease, opacity 0.35s ease; } .sda_vision_more .elementor-widget-image::after { content: ''; position: absolute; bottom: -8px; right: -8px; width: var(--vm-corner); height: var(--vm-corner); border-bottom: 2px solid rgba(255, 255, 255, 0.35); border-right: 2px solid rgba(255, 255, 255, 0.35); pointer-events: none; z-index: 2; opacity: 0.6; transition: width 0.35s ease, height 0.35s ease, opacity 0.35s ease, border-color 0.35s ease; } .sda_vision_more .elementor-widget-image:hover::before, .sda_vision_more .elementor-widget-image:hover::after { width: var(--vm-corner-hov); height: var(--vm-corner-hov); opacity: 1; } .sda_vision_more .elementor-widget-image:hover::after { border-color: var(--vm-blue-lt); } /* -------------------------------------------------------------------------- 7. Scroll animácie – prvý stĺpec zľava, druhý sprava -------------------------------------------------------------------------- */ @keyframes vmSlideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes vmSlideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con:first-child { animation: vmSlideInLeft 0.7s var(--vm-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; } .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con:last-child { animation: vmSlideInRight 0.7s var(--vm-ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; } @supports not (animation-timeline: view()) { .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con:first-child { animation: vmSlideInLeft 0.7s var(--vm-ease) 0.1s both; } .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con:last-child { animation: vmSlideInRight 0.7s var(--vm-ease) 0.25s both; } } /* -------------------------------------------------------------------------- 8. Responzívne -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .sda_vision_more { --vm-section-pt: 40px; --vm-section-pb: 40px; --vm-row-gap: 2rem; --vm-row-space: 2.5rem; --vm-title-mb: 2rem; } } @media (max-width: 767px) { .sda_vision_more { --vm-section-pt: 30px; --vm-section-pb: 30px; --vm-row-space: 2rem; --vm-title-mb: 1.75rem; --vm-accent-w: 64px; --vm-h2-line-w: 64px; } /* Riadky pod seba, obrázok vždy nad textom */ .sda_vision_more > .e-con-inner > .e-con.e-child { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 1.5rem; } /* V stĺpcovom flexe riadi šírku align-items, nie flex-basis */ .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con { flex: 0 0 auto; width: 100%; max-width: 100%; } .sda_vision_more .elementor-widget-image { display: block; width: 100%; } .sda_vision_more::before, .sda_vision_more::after { display: none; } /* Bez hover efektov na dotykových zariadeniach */ .sda_vision_more .elementor-widget-image:hover img { transform: none; } .sda_vision_more .elementor-widget-image:hover::before, .sda_vision_more .elementor-widget-image:hover::after { width: var(--vm-corner); height: var(--vm-corner); opacity: 0.6; } } /* -------------------------------------------------------------------------- 9. Prístupnosť -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sda_vision_more > .e-con-inner > .e-con.e-child > .e-con, .sda_vision_more .elementor-widget-image img, .sda_vision_more .elementor-widget-text-editor h2::after, .sda_vision_more .elementor-heading-title::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }/* End custom CSS */