.elementor-31 .elementor-element.elementor-element-6349c5a > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-start;align-items:flex-start;}.elementor-31 .elementor-element.elementor-element-6349c5a:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-6349c5a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#CCCCCC;background-image:url("https://sad-feynman.194-164-91-114.plesk.page/wp-content/uploads/2025/06/gettyimages-2178056553-2048x2048-1.jpg");}.elementor-31 .elementor-element.elementor-element-6349c5a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:700px 00px 700px 00px;}.elementor-31 .elementor-element.elementor-element-6349c5a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-e5bd708:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-e5bd708 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #DDDDDD8F 0%, #A5A5A580 100%);}.elementor-31 .elementor-element.elementor-element-e5bd708 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-e5bd708{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E6E6E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-31 .elementor-element.elementor-element-e5bd708, .elementor-31 .elementor-element.elementor-element-e5bd708 > .elementor-background-overlay{border-radius:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-76a9723 > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.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-31 .elementor-element.elementor-element-14b483a img{width:80px;}.elementor-31 .elementor-element.elementor-element-7db4e40 > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.elementor-31 .elementor-element.elementor-element-f8ee4ef img{width:80px;}.elementor-31 .elementor-element.elementor-element-207b570 > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.elementor-31 .elementor-element.elementor-element-eb4a35f img{width:80px;}.elementor-31 .elementor-element.elementor-element-7750fe4 > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.elementor-31 .elementor-element.elementor-element-90e9c85 img{width:80px;}.elementor-31 .elementor-element.elementor-element-df510a5 > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.elementor-31 .elementor-element.elementor-element-9ef0c4c img{width:80px;}.elementor-31 .elementor-element.elementor-element-66b766c > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.elementor-31 .elementor-element.elementor-element-e9e4711 img{width:80px;}.elementor-31 .elementor-element.elementor-element-6722aba > .elementor-element-populated{margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;}.elementor-31 .elementor-element.elementor-element-0599f4a img{width:80px;}.elementor-31 .elementor-element.elementor-element-4e9882c:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-4e9882c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #DDDDDD8F 0%, #A5A5A580 100%);}.elementor-31 .elementor-element.elementor-element-4e9882c > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-4e9882c{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E6E6E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:100px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-4e9882c, .elementor-31 .elementor-element.elementor-element-4e9882c > .elementor-background-overlay{border-radius:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-aa4bca1:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-aa4bca1 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-aa4bca1 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-aa4bca1 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-aa4bca1 > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-aa4bca1 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-aa4bca1 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-87a2bcc > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-87a2bcc img{width:180px;}.elementor-31 .elementor-element.elementor-element-e955ce4:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-e955ce4 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-e955ce4 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-e955ce4 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-e955ce4 > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-e955ce4 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-e955ce4 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-3d4912e > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-3d4912e img{width:180px;}.elementor-31 .elementor-element.elementor-element-4106e4c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-4106e4c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-4106e4c > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-4106e4c > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-4106e4c > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-4106e4c > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-4106e4c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-3d8476c > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-3d8476c img{width:180px;}.elementor-31 .elementor-element.elementor-element-c95d947:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-c95d947 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-c95d947 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-c95d947 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-c95d947 > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-c95d947 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-c95d947 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-29a77e5 > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-29a77e5 img{width:180px;}.elementor-31 .elementor-element.elementor-element-5a42274:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-5a42274 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-5a42274 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-5a42274 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-5a42274 > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-5a42274 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-5a42274 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-61ef0b2 > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-61ef0b2 img{width:180px;}.elementor-31 .elementor-element.elementor-element-aac301b:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-aac301b > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-aac301b > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-aac301b > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-aac301b > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-aac301b > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-aac301b > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-4722edf > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-4722edf img{width:180px;}.elementor-31 .elementor-element.elementor-element-1058570:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-1058570 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-1058570 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-1058570 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-1058570 > .elementor-background-slideshow{border-radius:100px 100px 100px 100px;}.elementor-31 .elementor-element.elementor-element-1058570 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-1058570 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-10a6437 > .elementor-widget-container{margin:10px 10px 10px 10px;padding:10px 10px 10px 10px;}.elementor-31 .elementor-element.elementor-element-10a6437 img{width:180px;}.elementor-31 .elementor-element.elementor-element-1ac5b1b > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-1ac5b1b{border-style:solid;border-width:1px 1px 1px 1px;border-color:#E6E6E6;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:100px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-1ac5b1b, .elementor-31 .elementor-element.elementor-element-1ac5b1b > .elementor-background-overlay{border-radius:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-4340358:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-4340358 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-4340358 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-4340358 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-4340358 > .elementor-background-slideshow{border-radius:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-4340358 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-4340358 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-2c5d9a7 > .elementor-widget-container{margin:-76px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-2c5d9a7 img{width:23%;}.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-31 .elementor-element.elementor-element-5659fa4{color:#3A3A3A;}.elementor-31 .elementor-element.elementor-element-d5a3207:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-d5a3207 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-d5a3207 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-d5a3207 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-d5a3207 > .elementor-background-slideshow{border-radius:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-d5a3207 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-d5a3207 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-5cbba12 > .elementor-widget-container{margin:-76px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-5cbba12 img{width:23%;}.elementor-31 .elementor-element.elementor-element-3b34af6{color:#3A3A3A;}.elementor-31 .elementor-element.elementor-element-013d424:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-31 .elementor-element.elementor-element-013d424 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-31 .elementor-element.elementor-element-013d424 > .elementor-element-populated, .elementor-31 .elementor-element.elementor-element-013d424 > .elementor-element-populated > .elementor-background-overlay, .elementor-31 .elementor-element.elementor-element-013d424 > .elementor-background-slideshow{border-radius:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-013d424 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:20px 20px 20px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:20px 20px 20px 20px;}.elementor-31 .elementor-element.elementor-element-013d424 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-108dcc0 > .elementor-widget-container{margin:-76px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-108dcc0 img{width:23%;}.elementor-31 .elementor-element.elementor-element-f71b5dc{color:#3A3A3A;}.elementor-bc-flex-widget .elementor-31 .elementor-element.elementor-element-9cda907.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-31 .elementor-element.elementor-element-9cda907.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-31 .elementor-element.elementor-element-9cda907.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-31 .elementor-element.elementor-element-574f51c{width:initial;max-width:initial;top:100px;}.elementor-31 .elementor-element.elementor-element-574f51c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:10px 10px 10px 10px;}body:not(.rtl) .elementor-31 .elementor-element.elementor-element-574f51c{right:100px;}body.rtl .elementor-31 .elementor-element.elementor-element-574f51c{left:100px;}@media(min-width:1025px){.elementor-31 .elementor-element.elementor-element-6349c5a:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-6349c5a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for section, class: .elementor-element-6349c5a *//* Defs */ @property --angle-1 { syntax: ""; inherits: false; initial-value: -75deg; } @property --angle-2 { syntax: ""; inherits: false; initial-value: -45deg; } :root { --global--size: clamp(2rem, 4vw, 5rem); --anim--hover-time: 400ms; --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1); } /* ========== BUTTON ========== */ /* Button Wrap Container */ .button-wrap { position: relative; z-index: 2; border-radius: 999vw; background: transparent; pointer-events: none; transition: all var(--anim--hover-time) var(--anim--hover-ease); } /* Button Shadow Container */ .button-shadow { --shadow-cuttoff-fix: 2em; position: absolute; width: calc(100% + var(--shadow-cuttoff-fix)); height: calc(100% + var(--shadow-cuttoff-fix)); top: calc(0% - var(--shadow-cuttoff-fix) / 2); left: calc(0% - var(--shadow-cuttoff-fix) / 2); filter: blur(clamp(2px, 0.125em, 12px)); -webkit-filter: blur(clamp(2px, 0.125em, 12px)); -moz-filter: blur(clamp(2px, 0.125em, 12px)); -ms-filter: blur(clamp(2px, 0.125em, 12px)); overflow: visible; pointer-events: none; } /* Shadow */ .button-shadow::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: 999vw; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em); height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em); top: calc(var(--shadow-cuttoff-fix) - 0.5em); left: calc(var(--shadow-cuttoff-fix) - 0.875em); padding: 0.125em; box-sizing: border-box; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: all var(--anim--hover-time) var(--anim--hover-ease); overflow: visible; opacity: 1; } /* ========== BUTTON BASE STYLES ========== */ button { /* Basic Styling */ --border-width: clamp(1px, 0.0625em, 4px); all: unset; cursor: pointer; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); pointer-events: auto; z-index: 3; background: linear-gradient( -75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); border-radius: 999vw; box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 1); backdrop-filter: blur(clamp(1px, 0.125em, 4px)); -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); transition: all var(--anim--hover-time) var(--anim--hover-ease); } button:hover { transform: scale(0.975); backdrop-filter: blur(0.01em); -webkit-backdrop-filter: blur(0.01em); -moz-backdrop-filter: blur(0.01em); -ms-backdrop-filter: blur(0.01em); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 1); } /* Button Text */ button span { position: relative; display: block; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-family: "Inter", sans-serif; letter-spacing: -0.05em; font-weight: 500; font-size: 1em; color: rgba(50, 50, 50, 1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1); transition: all var(--anim--hover-time) var(--anim--hover-ease); padding-inline: 1.5em; padding-block: 0.875em; } button:hover span { text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12); } /* Text */ button span::after { content: ""; display: block; position: absolute; z-index: 1; width: calc(100% - var(--border-width)); /* Prevent overlapping border */ height: calc(100% - var(--border-width)); top: calc(0% + var(--border-width) / 2); left: calc(0% + var(--border-width) / 2); box-sizing: border-box; border-radius: 999vw; overflow: clip; background: linear-gradient( var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55% ); z-index: 3; mix-blend-mode: screen; pointer-events: none; background-size: 200% 200%; background-position: 0% 50%; background-repeat: no-repeat; transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease); } button:hover span::after { background-position: 25% 50%; } button:active span::after { background-position: 50% 15%; --angle-2: -15deg; } /* Touch Devices */ @media (hover: none) and (pointer: coarse) { button span::after, button:active span::after { --angle-2: -45deg; } } /* ========== BUTTON OUTLINE ========== */ /* Outline */ button::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 999vw; width: calc(100% + var(--border-width)); height: calc(100% + var(--border-width)); top: calc(0% - var(--border-width) / 2); left: calc(0% - var(--border-width) / 2); padding: var(--border-width); box-sizing: border-box; background: conic-gradient( from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5) ), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease; box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5); } button:hover::after { --angle-1: -125deg; } button:active::after { --angle-1: -75deg; } @media (hover: none) and (pointer: coarse) { button::after, button:hover::after, button:active::after { --angle-1: -75deg; } } /* Shadow Hover */ .button-wrap:has(button:hover) .button-shadow { filter: blur(clamp(2px, 0.0625em, 6px)); -webkit-filter: blur(clamp(2px, 0.0625em, 6px)); -moz-filter: blur(clamp(2px, 0.0625em, 6px)); -ms-filter: blur(clamp(2px, 0.0625em, 6px)); transition: filter var(--anim--hover-time) var(--anim--hover-ease); } .button-wrap:has(button:hover) .button-shadow::after { top: calc(var(--shadow-cuttoff-fix) - 0.875em); opacity: 1; } /* Rotation */ .button-wrap:has(button:active) { transform: rotate3d(1, 0, 0, 25deg); } .button-wrap:has(button:active) button { box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15); } .button-wrap:has(button:active) .button-shadow { filter: blur(clamp(2px, 0.125em, 12px)); -webkit-filter: blur(clamp(2px, 0.125em, 12px)); -moz-filter: blur(clamp(2px, 0.125em, 12px)); -ms-filter: blur(clamp(2px, 0.125em, 12px)); } .button-wrap:has(button:active) .button-shadow::after { top: calc(var(--shadow-cuttoff-fix) - 0.5em); opacity: 0.75; } .button-wrap:has(button:active) span { text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12); } /* ========== DIV GLASS PANEL ========== */ .glasspanel { --border-width: clamp(1px, 0.0625em, 4px); --angle-1: -75deg; --angle-2: -45deg; --shadow-cuttoff-fix: 2em; position: relative; border-radius: 15px; background: linear-gradient( -75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 1); backdrop-filter: blur(clamp(1px, 0.125em, 4px)); -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); transition: all var(--anim--hover-time) var(--anim--hover-ease); padding: 1em; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 500; color: rgba(50, 50, 50, 1); text-align: center; user-select: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; z-index: 3; } .glasspanel::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 15px; width: calc(100% + var(--border-width)); height: calc(100% + var(--border-width)); top: calc(0% - var(--border-width) / 2); left: calc(0% - var(--border-width) / 2); padding: var(--border-width); box-sizing: border-box; background: conic-gradient( from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5) ), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease; box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5); } .glasspanel:hover::after { --angle-1: -125deg; } .glasspanel:active::after { --angle-1: -75deg; } .glasspanel::before { content: ""; position: absolute; z-index: 2; width: calc(100% - var(--border-width)); height: calc(100% - var(--border-width)); top: calc(0% + var(--border-width) / 2); left: calc(0% + var(--border-width) / 2); border-radius: 15px; background: linear-gradient( var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55% ); mix-blend-mode: screen; pointer-events: none; background-size: 200% 200%; background-position: 0% 50%; background-repeat: no-repeat; transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease); } .glasspanel:hover::before { background-position: 25% 50%; } .glasspanel:active::before { background-position: 50% 15%; --angle-2: -15deg; } /* === GLASSPANEL ROUND (for icons or square containers) === */ .glasspanel-round { border-radius: 999vw; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; /* Usually icons don't need internal padding */ aspect-ratio: 1 / 1; /* ensures perfect square if width changes */ } .glasspanel-round::after, .glasspanel-round::before { border-radius: 999vw; }/* End custom CSS */