.elementor-4129 .elementor-element.elementor-element-21ecf358:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-21ecf358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;background-image:url("https://logic-fruit.org/wp-content/uploads/2026/02/System-Platforms-Main-Banner.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-21ecf358{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-21ecf358 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-3a0ad585:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-4129 .elementor-element.elementor-element-3a0ad585 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00112200;}.elementor-4129 .elementor-element.elementor-element-3a0ad585.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-4129 .elementor-element.elementor-element-3a0ad585 > .elementor-element-populated > .elementor-background-overlay{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-4129 .elementor-element.elementor-element-3a0ad585 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-3a0ad585 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-1174a854{--spacer-size:150px;}.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-4129 .elementor-element.elementor-element-378ba928{text-align:center;font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4129 .elementor-element.elementor-element-6d09ae97{text-align:center;}.elementor-4129 .elementor-element.elementor-element-6d09ae97 .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:60px;font-weight:700;text-transform:uppercase;line-height:1.2em;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-703b42e2{width:var( --container-widget-width, 70% );max-width:70%;--container-widget-width:70%;--container-widget-flex-grow:0;text-align:center;font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-342e0c43{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-39abd458{--spacer-size:40px;}.elementor-4129 .elementor-element.elementor-element-6f1b18b3{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.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-4129 .elementor-element.elementor-element-591953e5 .elementor-button{background-color:#FFFFFF;font-family:"Work Sans", Sans-serif;font-weight:500;}.elementor-4129 .elementor-element.elementor-element-408ee634{padding:0px 0px 0px 0px;}.elementor-4129 .elementor-element.elementor-element-5955df67{--spacer-size:120px;}.elementor-4129 .elementor-element.elementor-element-7f9a9d5a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-7f9a9d5a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-3a258f3{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-1817f642{text-align:center;font-family:"Work Sans", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-2261f09{--display:flex;}.elementor-4129 .elementor-element.elementor-element-c5dee7a{--display:flex;}.elementor-4129 .elementor-element.elementor-element-8243015{--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: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-4129 .elementor-element.elementor-element-79d5163 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-d2c549e{--display:flex;}.elementor-4129 .elementor-element.elementor-element-60e9da6{--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:center;}.elementor-4129 .elementor-element.elementor-element-4c73f7e .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-e739ac0{--display:flex;}.elementor-4129 .elementor-element.elementor-element-3dfbfb7{--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:center;}.elementor-4129 .elementor-element.elementor-element-1a9cb00 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-07eb980{--display:flex;}.elementor-4129 .elementor-element.elementor-element-ada5ca0{--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:center;}.elementor-4129 .elementor-element.elementor-element-764684e .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-147ca19{--display:flex;}.elementor-4129 .elementor-element.elementor-element-d541e7a{--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:center;}.elementor-4129 .elementor-element.elementor-element-d8475ed .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-c834619{--display:flex;}.elementor-4129 .elementor-element.elementor-element-cdeb969{--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:center;}.elementor-4129 .elementor-element.elementor-element-d008cd2 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-6319352{--display:flex;}.elementor-4129 .elementor-element.elementor-element-297ecaf{--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:center;}.elementor-4129 .elementor-element.elementor-element-d967cfe .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-36be88f{--display:flex;}.elementor-4129 .elementor-element.elementor-element-8a1e5a8{--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:center;}.elementor-4129 .elementor-element.elementor-element-90ca279 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:500;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-04765c9{--e-n-carousel-swiper-slides-to-display:2;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;}.elementor-4129 .elementor-element.elementor-element-33a575dd{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-69da4bbf{--spacer-size:30px;}.elementor-4129 .elementor-element.elementor-element-540fd52b:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-540fd52b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/Architecture-Overview.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-540fd52b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-540fd52b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-13c2ebd{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-630ffe02{text-align:center;font-family:"Barlow", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-1db5bc6{text-align:center;}.elementor-4129 .elementor-element.elementor-element-1db5bc6 .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-5a45bf1c{--spacer-size:20px;}.elementor-4129 .elementor-element.elementor-element-6dc53755{--display:flex;}.elementor-4129 .elementor-element.elementor-element-7cd862c9{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4129 .elementor-element.elementor-element-7cd862c9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4129 .elementor-element.elementor-element-2b85792{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-9cc0f2{--spacer-size:10px;}.elementor-4129 .elementor-element.elementor-element-14b322e6{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-14b322e6 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-7f71a9cf{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-6fa9ca40{text-align:center;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-6e9db637{text-align:center;}.elementor-4129 .elementor-element.elementor-element-6e9db637 .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-42bd5118{--spacer-size:30px;}.elementor-4129 .elementor-element.elementor-element-415b3068{--display:flex;}.elementor-4129 .elementor-element.elementor-element-6c0d39a4{--spacer-size:4px;}.elementor-4129 .elementor-element.elementor-element-13a3cc55:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-13a3cc55 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/SoC.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-13a3cc55{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-13a3cc55 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-6600c44{--spacer-size:30px;}.elementor-4129 .elementor-element.elementor-element-77fae20{text-align:center;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-1a774823{text-align:center;}.elementor-4129 .elementor-element.elementor-element-1a774823 .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-2ed924de{--display:flex;}.elementor-4129 .elementor-element.elementor-element-71b950a1{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-25e955cb{--display:flex;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#0056D5;--border-color:#0056D5;--padding-top:40px;--padding-bottom:20px;--padding-left:25px;--padding-right:0px;}.elementor-4129 .elementor-element.elementor-element-25e955cb:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-25e955cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/Component-832.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-4129 .elementor-element.elementor-element-1841bb82 .elementor-icon-wrapper{text-align:start;}.elementor-4129 .elementor-element.elementor-element-1841bb82.elementor-view-framed .elementor-icon{background-color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-1841bb82.elementor-view-stacked .elementor-icon{color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-1841bb82.elementor-view-stacked .elementor-icon svg{fill:#050F1F;}.elementor-4129 .elementor-element.elementor-element-1841bb82 .elementor-icon{font-size:35px;padding:8px;}.elementor-4129 .elementor-element.elementor-element-1841bb82 .elementor-icon svg{height:35px;}.elementor-4129 .elementor-element.elementor-element-1cc0e0bb{text-align:start;}.elementor-4129 .elementor-element.elementor-element-1cc0e0bb .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-5eabf147{text-align:start;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-7691fd70{--display:flex;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#0056D5;--border-color:#0056D5;--padding-top:40px;--padding-bottom:20px;--padding-left:25px;--padding-right:0px;}.elementor-4129 .elementor-element.elementor-element-7691fd70:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-7691fd70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/Component-832.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-2fdac350 .elementor-icon-wrapper{text-align:start;}.elementor-4129 .elementor-element.elementor-element-2fdac350.elementor-view-framed .elementor-icon{background-color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-2fdac350.elementor-view-stacked .elementor-icon{color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-2fdac350.elementor-view-stacked .elementor-icon svg{fill:#050F1F;}.elementor-4129 .elementor-element.elementor-element-2fdac350 .elementor-icon{font-size:35px;padding:8px;}.elementor-4129 .elementor-element.elementor-element-2fdac350 .elementor-icon svg{height:35px;}.elementor-4129 .elementor-element.elementor-element-334ad4e9{text-align:start;}.elementor-4129 .elementor-element.elementor-element-334ad4e9 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-75f4d36b{text-align:start;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-44592f17{--display:flex;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#0056D5;--border-color:#0056D5;--padding-top:40px;--padding-bottom:20px;--padding-left:25px;--padding-right:0px;}.elementor-4129 .elementor-element.elementor-element-44592f17:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-44592f17 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/Component-832.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-50d2d1c7 .elementor-icon-wrapper{text-align:start;}.elementor-4129 .elementor-element.elementor-element-50d2d1c7.elementor-view-framed .elementor-icon{background-color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-50d2d1c7.elementor-view-stacked .elementor-icon{color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-50d2d1c7.elementor-view-stacked .elementor-icon svg{fill:#050F1F;}.elementor-4129 .elementor-element.elementor-element-50d2d1c7 .elementor-icon{font-size:35px;padding:8px;}.elementor-4129 .elementor-element.elementor-element-50d2d1c7 .elementor-icon svg{height:35px;}.elementor-4129 .elementor-element.elementor-element-7677251c{text-align:start;}.elementor-4129 .elementor-element.elementor-element-7677251c .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-2e781fcb{text-align:start;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-23e3eec9{--display:flex;--background-transition:0.3s;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#0056D5;--border-color:#0056D5;--padding-top:40px;--padding-bottom:20px;--padding-left:25px;--padding-right:0px;}.elementor-4129 .elementor-element.elementor-element-23e3eec9:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-23e3eec9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/Component-832.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-3b81353b .elementor-icon-wrapper{text-align:start;}.elementor-4129 .elementor-element.elementor-element-3b81353b.elementor-view-framed .elementor-icon{background-color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-3b81353b.elementor-view-stacked .elementor-icon{color:#050F1F;}.elementor-4129 .elementor-element.elementor-element-3b81353b.elementor-view-stacked .elementor-icon svg{fill:#050F1F;}.elementor-4129 .elementor-element.elementor-element-3b81353b .elementor-icon{font-size:35px;padding:8px;}.elementor-4129 .elementor-element.elementor-element-3b81353b .elementor-icon svg{height:35px;}.elementor-4129 .elementor-element.elementor-element-7ded8690{text-align:start;}.elementor-4129 .elementor-element.elementor-element-7ded8690 .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-22c40cd6{text-align:start;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-45781470{--spacer-size:4px;}.elementor-4129 .elementor-element.elementor-element-2fd1fb21{--spacer-size:30px;}.elementor-4129 .elementor-element.elementor-element-691c215c:not(.elementor-motion-effects-element-type-background), .elementor-4129 .elementor-element.elementor-element-691c215c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://logic-fruit.org/wp-content/uploads/2026/01/3rd-4th-Section.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4129 .elementor-element.elementor-element-691c215c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4129 .elementor-element.elementor-element-691c215c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4129 .elementor-element.elementor-element-306c3b23{--spacer-size:50px;}.elementor-4129 .elementor-element.elementor-element-1cbc5c46{text-align:center;}.elementor-4129 .elementor-element.elementor-element-1cbc5c46 .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:40px;font-weight:600;color:#FFFFFF;}.elementor-4129 .elementor-element.elementor-element-29aab1fd{text-align:center;font-family:"Work Sans", Sans-serif;font-size:17px;font-weight:400;color:#FFFFFFCC;}.elementor-4129 .elementor-element.elementor-element-4d98c472{--spacer-size:4px;}.elementor-4129 .elementor-element.elementor-element-3fae11e6{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-73d8495a{padding:0px 0px 0px 0px;}.elementor-4129 .elementor-element.elementor-element-538a9be8{--spacer-size:30px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-4129 .elementor-element.elementor-element-6f1b18b3{--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-04765c9{--e-n-carousel-swiper-slides-to-display:2;}.elementor-4129 .elementor-element.elementor-element-71b950a1{--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-3fae11e6{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-4129 .elementor-element.elementor-element-1174a854{--spacer-size:0px;}.elementor-4129 .elementor-element.elementor-element-378ba928{font-size:15px;line-height:1.4em;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-4129 .elementor-element.elementor-element-6d09ae97{text-align:center;}.elementor-4129 .elementor-element.elementor-element-6d09ae97 .elementor-heading-title{font-size:26px;}.elementor-4129 .elementor-element.elementor-element-703b42e2{width:100%;max-width:100%;font-size:15px;line-height:1.4em;}.elementor-4129 .elementor-element.elementor-element-342e0c43{--spacer-size:30px;}.elementor-4129 .elementor-element.elementor-element-6f1b18b3{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-5955df67{--spacer-size:150px;}.elementor-4129 .elementor-element.elementor-element-1817f642{font-size:16px;line-height:1.4em;}.elementor-4129 .elementor-element.elementor-element-04765c9{--e-n-carousel-swiper-slides-to-display:1;}.elementor-4129 .elementor-element.elementor-element-630ffe02{font-size:16px;line-height:1.4em;}.elementor-4129 .elementor-element.elementor-element-1db5bc6{text-align:center;}.elementor-4129 .elementor-element.elementor-element-1db5bc6 .elementor-heading-title{font-size:26px;}.elementor-4129 .elementor-element.elementor-element-6fa9ca40{font-size:16px;line-height:1.4em;}.elementor-4129 .elementor-element.elementor-element-6e9db637 .elementor-heading-title{font-size:26px;}.elementor-4129 .elementor-element.elementor-element-6600c44{--spacer-size:0px;}.elementor-4129 .elementor-element.elementor-element-77fae20{font-size:16px;line-height:1.4em;}.elementor-4129 .elementor-element.elementor-element-1a774823 .elementor-heading-title{font-size:26px;}.elementor-4129 .elementor-element.elementor-element-71b950a1{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-5eabf147{font-size:15px;}.elementor-4129 .elementor-element.elementor-element-75f4d36b{font-size:15px;}.elementor-4129 .elementor-element.elementor-element-2e781fcb{font-size:15px;}.elementor-4129 .elementor-element.elementor-element-22c40cd6{font-size:15px;}.elementor-4129 .elementor-element.elementor-element-2fd1fb21{--spacer-size:0px;}.elementor-4129 .elementor-element.elementor-element-1cbc5c46 .elementor-heading-title{font-size:26px;}.elementor-4129 .elementor-element.elementor-element-29aab1fd{font-size:16px;line-height:1.4em;}.elementor-4129 .elementor-element.elementor-element-3fae11e6{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4129 .elementor-element.elementor-element-538a9be8{--spacer-size:0px;}}/* Start custom CSS for button, class: .elementor-element-591953e5 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-408ee634 */.btn-letter.space { display: inline-block; width: 0.4em; /* adjust spacing width */ } .txt-wrapper{min-height:24px; font-family:'Work Sans'!important;} @media (max-width: 767px) { .solution-btn { margin-left: auto !important; margin-right: auto !important; display: block !important; text-align: center !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7ceaf26 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5573e1f *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f86d988 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-91a3e07 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d598bf2 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca12d20 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ea3cf32 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-acea6ae *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25e955cb *//* hover glow layer */ .glow-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) -22.85%, rgba(0, 82, 204, 0.2) -0.45% ), radial-gradient( 64.24% 97.25% at 50% 100%, #00D4FF 0.85%, rgba(0, 212, 255, 0.5) 23.99%, rgba(1, 1, 1, 0) 100% ); opacity: 0; transition: opacity 0.55s ease; pointer-events: none; } /* hover */ .glow-card:hover::before { opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1d3f9956 *//* From Uiverse.io by dexter-st */ .btn-wrapper { position: relative; display: inline-block; } .btn { --border-radius: 24px; --padding: 4px; --transition: 0.4s; --button-color: #101010; /* Same as background */ --highlight-color-hue: 210deg; user-select: none; display: flex; justify-content: center; padding: 0.5em 0.5em 0.5em 1.1em; font-family: "Poppins", "Inter", "Segoe UI", sans-serif; font-size: 0.9em; font-weight: 400; background-color: var(--button-color); box-shadow: /* inset */ inset 0px 1px 1px rgba(255, 255, 255, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.15), inset 0px 4px 4px rgba(255, 255, 255, 0.1), inset 0px 8px 8px rgba(255, 255, 255, 0.05), inset 0px 16px 16px rgba(255, 255, 255, 0.05), /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02), 0px -2px 2px rgba(0, 0, 0, 0.03), 0px -4px 4px rgba(0, 0, 0, 0.05), 0px -8px 8px rgba(0, 0, 0, 0.06), 0px -16px 16px rgba(0, 0, 0, 0.08); border: solid 1px #fff2; border-radius: var(--border-radius); cursor: pointer; transition: box-shadow var(--transition), border var(--transition), background-color var(--transition); } .btn::before { content: ""; position: absolute; top: calc(0px - var(--padding)); left: calc(0px - var(--padding)); width: calc(100% + var(--padding) * 2); height: calc(100% + var(--padding) * 2); border-radius: calc(var(--border-radius) + var(--padding)); pointer-events: none; background-image: linear-gradient(0deg, #0004, #000a); z-index: -1; transition: box-shadow var(--transition), filter var(--transition); box-shadow: 0 -8px 8px -6px #0000 inset, 0 -16px 16px -8px #00000000 inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; background-image: linear-gradient( 0deg, #fff, hsl(var(--highlight-color-hue), 100%, 70%), hsla(var(--highlight-color-hue), 100%, 70%, 50%), 8%, transparent ); background-position: 0 0; opacity: 0; transition: opacity var(--transition), filter var(--transition); } .btn-letter { position: relative; display: inline-block; color: #fff5; animation: letter-anim 2s ease-in-out infinite; transition: color var(--transition), text-shadow var(--transition), opacity var(--transition); } @keyframes letter-anim { 50% { text-shadow: 0 0 3px #fff8; color: #fff; } } .btn-svg { flex-grow: 1; height: 24px; margin-right: 0.5rem; fill: #e8e8e8; animation: flicker 2s linear infinite; animation-delay: 0.5s; filter: drop-shadow(0 0 2px #fff9); transition: fill var(--transition), filter var(--transition), opacity var(--transition); } @keyframes flicker { 50% { opacity: 0.3; } } /* Focus state */ .txt-wrapper { position: relative; display: flex; align-items: center; min-width: 6.4em; } .txt-1, .txt-2 { position: absolute; word-spacing: -1em; } .txt-1 { animation: appear-anim 1s ease-in-out forwards; } .txt-2 { opacity: 0; } @keyframes appear-anim { 0% { opacity: 0; } 100% { opacity: 1; } } .btn:focus .txt-1 { animation: opacity-anim 0.3s ease-in-out forwards; animation-delay: 1s; } .btn:focus .txt-2 { animation: opacity-anim 0.3s ease-in-out reverse forwards; animation-delay: 1s; } @keyframes opacity-anim { 0% { opacity: 1; } 100% { opacity: 0; } } .btn:focus .btn-letter { animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite; animation-delay: 0s, 1s; } @keyframes focused-letter-anim { 0%, 100% { filter: blur(0px); } 50% { transform: scale(2); filter: blur(10px) brightness(150%) drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%)); } } .btn:focus .btn-svg { animation-duration: 1.2s; animation-delay: 0.2s; } .btn:focus::before { box-shadow: 0 -8px 12px -6px #fff3 inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset, 1px 1px 1px #fff3, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:focus::after { opacity: 0.6; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(100%); } /* Animation delays for .btn-letter elements */ .btn-letter:nth-child(1), .btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; } .btn-letter:nth-child(2), .btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; } .btn-letter:nth-child(3), .btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; } .btn-letter:nth-child(4), .btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; } .btn-letter:nth-child(5), .btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; } .btn-letter:nth-child(6), .btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; } .btn-letter:nth-child(7), .btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; } .btn-letter:nth-child(8), .btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; } .btn-letter:nth-child(9), .btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; } .btn-letter:nth-child(10), .btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; } .btn-letter:nth-child(11), .btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; } .btn-letter:nth-child(12), .btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; } .btn-letter:nth-child(13), .btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; } /* Active state */ .btn:active { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%); background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5); } .btn:active::before { box-shadow: 0 -8px 12px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset, 1px 1px 1px #fff4, 2px 2px 2px #fff2, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:active::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); filter: brightness(200%); } .btn:active .btn-letter { text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%); animation: none; } /* Hover state */ .btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); } .btn:hover::before { box-shadow: 0 -8px 8px -6px #fffa inset, 0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset, 1px 1px 1px #fff2, 2px 2px 2px #fff1, -1px -1px 1px #0002, -2px -2px 2px #0001; } .btn:hover::after { opacity: 1; mask-image: linear-gradient(0deg, #fff, transparent); } .btn:hover .btn-svg { fill: #fff; filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%)) drop-shadow(0 -4px 6px #0009); animation: none; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-73d8495a */.btn-letter.space { display: inline-block; width: 0.4em; /* adjust spacing width */ } .txt-wrapper{min-width: 10.4em!important;} @media (max-width: 767px) { .solution-btn { margin-left: auto !important; margin-right: auto !important; display: block !important; text-align: center !important; } }/* End custom CSS */ /* Start custom CSS */.elementor-widget-wrap>.home-icon-box.elementor-element { padding: 20px; background: linear-gradient(117.76deg, rgba(0, 0, 0, 0.8) 0.04%, rgba(0, 0, 0, 0.5) 26.94%, rgba(0, 0, 0, 0.25) 67.29%, rgba(0, 0, 0, 0.15) 99.96%); backdrop-filter: blur(5.6px); font-size: 16px; line-height: 1.3; position: relative; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.03); color: #fff; overflow: hidden; transition: 0.4s ease-in-out; z-index: 1; border-image-source: linear-gradient(119.38deg, rgba(255, 255, 255, 0.7) 2.01%, rgba(255, 255, 255, 0.35) 31.54%, rgba(255, 255, 255, 0.6) 65.23%, rgba(255, 255, 255, 0.05) 97.99%); } .elementor-widget-wrap>.home-icon-box.elementor-element::after { content: ""; position: absolute; left: 0; bottom: -100%; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0, 200, 255, 0.35), transparent); transition: 0.4s ease-in-out; } .elementor-widget-wrap>.home-icon-box.elementor-element::before { content: ""; position: absolute; inset: 0; padding: 1px; /* border-radius: 20px; */ background: linear-gradient(119.38deg, rgba(255, 255, 255, 0.7) 2.01%, rgba(255, 255, 255, 0.35) 31.54%, rgba(255, 255, 255, 0.6) 65.23%, rgba(255, 255, 255, 0.05) 97.99%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } .elementor-widget-wrap>.home-icon-box.elementor-element:hover::after { bottom: 0; } .icon { width: 45px; height: auto; margin-bottom: 15px; } .elementor-widget-wrap>.home-icon-box.elementor-element h3 { font-size: 18px; margin-bottom: 10px; font-weight: 600; } .elementor-widget-wrap>.home-icon-box.elementor-element p { font-size: 14px; line-height: 1.5; opacity: 0.85; } .elementor-widget-wrap>.jz-feature-box.elementor-element::after { content: ""; position: absolute; left: 0; bottom: -100%; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 200, 255, 0.35), transparent); transition: 0.4s ease-in-out; } .border-bot { border: none !important; display: inline-flex !important; width: fit-content !important; position: relative; background: none !important; padding: 0px 15px !important; margin-left: auto !important; margin-right: auto !important; } .border-bot::after { content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); /* subtract horizontal padding */ height: 1px; background: #0E1365; } /* Main Box */ .jz-value-box { padding: 40px 0px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(5.6px); border: 1px solid rgba(255, 255, 255, 0.15); border-image-source: linear-gradient( 119deg, rgba(255, 255, 255, 0.7) 2%, rgba(255, 255, 255, 0.35) 32%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0.05) 98% ); color: #fff; position: relative; overflow: hidden; font-size: 16px; line-height: 1.3; z-index: 1; margin: 5px } .jz-value-box p {margin-bottom:0;} /* Gradient border effect */ .jz-value-box::before { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient( 119deg, rgba(255, 255, 255, 0.7) 2%, rgba(255, 255, 255, 0.35) 32%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0.05) 98% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } /* Icon */ .jz-value-box .icon { width: 45px; height: auto; margin-bottom: 15px; } /* Title */ .jz-value-box h3 { font-size: 18px; margin-bottom: 10px; font-weight: 600; } /* Paragraph */ .jz-value-box p { font-size: 18px; line-height: 1.5; opacity: 0.85; } .jz-testimonial .quote-text::after { content: "”"; font-size: 85px; position: absolute; right: 120px; bottom: -70px; opacity: 0.25; font-weight: 600; font-family: serif; } .jz-testimonial .quote-text::before { content: "“"; font-size: 85px; position: absolute; left: -43px; top: -48px; opacity: 0.25; font-weight: 600; font-family: serif; } .we-building { position: relative; padding: 40px 20px; max-width: 850px; margin: auto; } /* Left Quote */ .we-building::before { content: "“"; position: absolute; top: -20px; left: 80px; font-size: 110px; color: rgba(255, 255, 255, 0.12); font-weight: 600; font-family: serif; } /* Right Quote */ .we-building::after { content: "”"; position: absolute; bottom: 35px; right: 145px; font-size: 110px; color: rgba(255, 255, 255, 0.12); font-weight: 600; font-family: serif; } .we-building .ceo-text { display: block; /*margin-top: 40px;*/ text-align: right; font-size: 24px; font-weight: bold; color: #fff; opacity: 0.9; padding-right: 100px; font-family: Work Sans; } .lf-value-card { background: linear-gradient(180deg, #000000 6.95%, #0052CC 100%); padding: 30px 25px; /*border-radius: 8px;*/ color: #ffffff; box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.35); position: relative; overflow: hidden; } .elementor-widget-wrap>.three-box.elementor-element { padding: 20px; backdrop-filter: blur(5.6px); font-size: 16px; line-height: 1.3; position: relative; background: rgba(255, 255, 255, 0.03); color: #fff; overflow: hidden; transition: 0.4s ease-in-out; z-index: 1; background-image: url(https://dummy.logic-fruit.com/wp-content/uploads/2025/12/bg-fifth.png); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; min-height: 217px; } .elementor-widget-wrap>.three-box.elementor-element:hover{background-image: url(https://dummy.logic-fruit.com/wp-content/uploads/2025/12/six-section.png);} .solution-third{ background: linear-gradient(117.76deg, rgba(77, 77, 79, 0.8) 0.04%, rgba(77, 77, 79, 0.5) 26.94%, rgba(77, 77, 79, 0.25) 67.29%, rgba(77, 77, 79, 0.15) 99.96%); backdrop-filter: blur(5.6px);} .co-des-hvr{ background: linear-gradient(117.76deg, rgba(77, 77, 79, 0.8) 0.04%, rgba(77, 77, 79, 0.5) 26.94%, rgba(77, 77, 79, 0.25) 67.29%, rgba(77, 77, 79, 0.15) 99.96%); backdrop-filter: blur(5.6px);} .co-des-hvr::before { content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: linear-gradient( to right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0.8) ); } /* RIGHT SHINY LINE */ .co-des-hvr::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 80%; background: linear-gradient( to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.5), rgba(255,255,255,0) ); } .co-des-hvr:hover{background: radial-gradient(127.34% 220.39% at 100% 0%, #00A3FF 0%, rgba(1, 1, 1, 0) 100%)} /* TOP BORDER (hidden by default) */ .co-des-hvr:hover::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 1px; background: linear-gradient( to right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0.8) ); opacity: 0; transition: left 0.6s ease, opacity 0.3s ease; } /* RIGHT BORDER (hidden by default) */ .co-des-hvr:hover::after { content: ""; position: absolute; right: 0; bottom: -100%; width: 1px; height: 80%; background: linear-gradient( to top, rgba(255,255,255,0.5), rgba(255,255,255,0.5), rgba(255,255,255,0) ); opacity: 0; transition: bottom 0.6s ease, opacity 0.3s ease; } /* HOVER ONLY */ .co-des-hvr:hover::before { left: 0; opacity: 1; } .co-des-hvr:hover::after { bottom: 0; opacity: 1; } .btn-letter.space { display: inline-block; width: 0.4em; /* adjust spacing width */ } .txt-wrapper{min-width: 10.4em!important;} @media (max-width: 767px) { .we-building::before { top: 15px; left: 0px; font-size: 60px; } .we-building::after{ bottom: 85px; right: 30px; font-size: 60px; } .jz-testimonial .quote-text::before{ font-size: 50px; left: -18px; top: -28px;} .jz-testimonial .quote-text::after{ font-size: 50px; bottom: -45px; right: 5px; } .solution-btn { margin-left: auto !important; margin-right: auto !important; display: block !important; text-align: center !important; } .list{ padding-left: 12px; /* reduce as needed */ margin-left: 0; } } .elementor-element .swiper .elementor-swiper-button svg, .elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-next:hover svg, .elementor-widget-n-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover svg {fill: none!important;} .enggcraft.elementor-element .swiper .elementor-swiper-button svg {height: 30px; width: 33px;} .enggcraft.elementor-element .swiper .elementor-swiper-button-prev {left:45%} .enggcraft.elementor-element .swiper .elementor-swiper-button-next {right:45%} .enggcraft.elementor-element .swiper .elementor-swiper-button {top:110%;} .jz-feature-box .elementor-icon-box-title {margin-bottom: 20px; margin-top: 30px;} .floating-bg { position: relative; width: 100%; background: #000; /* z-index: -1; */ animation: floatAnimation 10s ease-in-out infinite; overflow: hidden; } .floating-bg::before { content: ""; position: absolute; width: 500px; height: 500px; /* border-radius: 50%; */ background: radial-gradient(50% 50% at 50% 50%, #0052CC 47.28%, #000000 100%); filter: blur(150px); animation: floatAnimationBlue 15s ease-in-out infinite; } .floating-bg::after { content: ""; position: absolute; width: 500px; height: 500px; right: 20%; /* border-radius: 50%; */ background: radial-gradient(50% 50% at 50% 50%, #F46F13 61.78%, #000000 100%); filter: blur(150px); animation: floatAnimationOrange 15s ease-in-out infinite; } @keyframes floatAnimationBlue { 0%, 100% { transform: translateY(22%) translateX(18%) scale(0.5); } 20% { transform: translateY(15%) translateX(11%); } 40% { transform: translateY(28%) translateX(27%) scale(1.2); } 60% { transform: translateY(17%) translateX(55%); } 80% { transform: translateY(28%) translateX(27%); } } @keyframes floatAnimationOrange { 0%, 100% { transform: translateY(22%) translateX(18%); } 20% { transform: translateY(15%) translateX(11%); } 40% { transform: translateY(28%) translateX(27%); } 60% { transform: translateY(17%) translateX(55%); } 80% { transform: translateY(28%) translateX(27%); } } .btn-header-ticker .elementor-button { position: relative; overflow: hidden; background: linear-gradient(243deg, #F46F13 8.33%, #E50E0E 91.67%); border-radius: 50px; border: 0.5px solid #fff; transition: all 0.3s ease; } /* Shine Layer */ .btn-header-ticker .elementor-button::before { content: ""; position: absolute; top: -50%; left: -75%; width: 200%; height: 200%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60% ); transform: rotate(25deg); transition: all 0.6s ease; } /* Hover Shine Animation */ .btn-header-ticker .elementor-button:hover::before { left: 100%; } /* Optional hover depth */ .btn-header-ticker .elementor-button:hover { box-shadow: 0 8px 25px rgba(229, 14, 14, 0.4); transform: translateY(-2px); } .feature-table { width: 100%; background:linear-gradient(117.76deg, rgba(0, 0, 0, 0.8) 0.04%, rgba(0, 0, 0, 0.5) 26.94%, rgba(0, 0, 0, 0.25) 67.29%, rgba(0, 0, 0, 0.15) 99.96%); border: 1px solid rgba(0,229,255,0.25); font-family: 'Work Sans'; color: #e0f7ff; } .feature-table .ft-row { display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); } .feature-table .ft-cell { padding: 16px; border-right: 1px solid rgba(0,229,255,0.2); border-bottom: 1px solid rgba(0,229,255,0.15); text-align: center; font-size: 14px; } .feature-table .ft-cell:first-child { text-align: left; } .feature-table .ft-head .ft-cell { font-weight: 600; border-bottom: 1px solid rgba(0,229,255,0.35); } .feature-table .ft-row:last-child .ft-cell { border-bottom: none; } .feature-table .ft-cell:last-child { border-right: none; } .feature-table .check { color: #00e5ff; font-size: 18px; } .feature-table .dash { color: #00e5ff; font-size: 20px; } /* 🔹 Responsive */ @media (max-width: 900px) { .feature-table .ft-row { grid-template-columns: 1fr; } .feature-table .ft-cell { display: flex; justify-content: space-between; border-right: none; } .feature-table .ft-head { display: none; } .feature-table .ft-cell::before { content: attr(data-label); font-weight: 600; color: #7defff; } } .pcie-hover-card { position: relative; overflow: hidden; } /* Overlay hidden */ .pcie-hover-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 41, 102, 0.85) 0%, rgba(0, 41, 102, 0.95) 100% ); /*background: #002966;*/ background-blend-mode: multiply; color: #fff; padding: 30px; transform: translateY(105%); transition: transform 0.45s ease; display: flex; flex-direction: column; justify-content: center; z-index: 2; width: calc(100% - 19px); margin: 9px; } /* Hover animation */ .pcie-hover-card:hover .pcie-hover-overlay { transform: translateY(0); } /* Text animation */ .pcie-hover-overlay h3, .pcie-hover-overlay p { transform: translateY(20px); opacity: 0; transition: all 0.35s ease; } .pcie-hover-card:hover .pcie-hover-overlay h3, .pcie-hover-card:hover .pcie-hover-overlay p { transform: translateY(0); opacity: 1; } .table-wrapper { max-width: 1400px; margin: 40px auto; overflow-x: auto; padding: 10px; } .table-wrapper td, .table-wrapper th {border: 1px solid rgba(0, 229, 255, 0.25); text-align:center; vertical-align:middle; padding:10px; font-size: 15px; font-weight: 500;} .table-wrapper tr td:first-child {text-align:left;} .table-wrapper td img {vertical-align: middle;} .bluebg {background: linear-gradient(117.76deg, rgba(77, 77, 79, 0.8) 0.04%, rgba(77, 77, 79, 0.5) 26.94%, rgba(77, 77, 79, 0.25) 67.29%, rgba(77, 77, 79, 0.15) 99.96%); backdrop-filter: blur(5.6px); border-radius: 0px; position:relative;} .bluebg:after { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(136deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.08) 31%, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0.30) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; }/* End custom CSS */