.elementor-169 .elementor-element.elementor-element-5184a88{--display:flex;}.elementor-169 .elementor-element.elementor-element-3c5af93{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-169 .elementor-element.elementor-element-411c56c{text-align:center;}.elementor-169 .elementor-element.elementor-element-f03692d{--spacer-size:25px;}.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-169 .elementor-element.elementor-element-1bb6e23{--display:flex;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{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-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-169 .elementor-element.elementor-element-f28da84 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-169 .elementor-element.elementor-element-f28da84 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-169 .elementor-element.elementor-element-f28da84 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-169 .elementor-element.elementor-element-f28da84 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-field-type-html{padding-bottom:0px;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-button[type="submit"]{color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-169 .elementor-element.elementor-element-f28da84{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-169 .elementor-element.elementor-element-dc486a5{--display:flex;}.elementor-169 .elementor-element.elementor-element-c72db58{--spacer-size:50px;}.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-169 .elementor-element.elementor-element-bb7d0d5{--spacer-size:50px;}/* Start custom CSS for form, class: .elementor-element-f28da84 *//* ========================================================== SHIROHANA – Satisfying Form Submit Button Interaction Works with Elementor Forms (no custom class needed) ========================================================== */ .elementor-form .elementor-button{ position: relative; overflow: hidden; isolation: isolate; transition: transform 0.15s ease, box-shadow 0.25s ease; } /* Press-down feel */ .elementor-form .elementor-button:active{ transform: scale(0.97) translateY(1px); box-shadow: 0 0 0 6px rgba(185,140,255,0.18), 0 18px 48px rgba(0,0,0,0.45), 0 0 36px rgba(185,140,255,0.35); } /* Energy ripple */ .elementor-form .elementor-button::after{ content:""; position:absolute; left:50%; top:50%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient( circle, rgba(185,140,255,0.55), rgba(185,140,255,0.35), transparent 70% ); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } /* Trigger ripple on click */ .elementor-form .elementor-button:active::after{ animation: shSubmitRipple 0.6s ease-out forwards; } @keyframes shSubmitRipple{ 0%{ transform: translate(-50%, -50%) scale(0.4); opacity: 0.7; } 100%{ transform: translate(-50%, -50%) scale(14); opacity: 0; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1bb6e23 *//* ========================================================== Shirohana: Glass Submission Form (Elementor Forms) Apply: - Container: sh-form-glass - Form: sh-glass-form ========================================================== */ /* Outer glass panel */ .sh-form-glass{ position: relative; border-radius: 22px; padding: 28px; max-width: 920px; margin: 0 auto; background: rgba(10, 12, 18, 0.34); -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 70px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; } /* Animated cosmic edge like your header */ .sh-form-glass::before{ content:""; position:absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgba(200, 160, 255, 0.85), rgba(240, 240, 255, 0.80), rgba(255, 220, 170, 0.55), rgba(170, 120, 255, 0.85), rgba(240, 240, 255, 0.75), rgba(200, 160, 255, 0.85) ); background-size: 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.65; filter: blur(0.25px); animation: shCosmicBorder 26s ease-in-out infinite; } /* Inner sheen */ .sh-form-glass::after{ content:""; position:absolute; inset: 1px; border-radius: inherit; background: radial-gradient(120% 160% at 18% 22%, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 44%, transparent 72%), radial-gradient(90% 130% at 85% 25%, rgba(200,160,255,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.06), transparent 35%, rgba(0,0,0,0.10)); pointer-events:none; opacity: 1; } /* Calm hover lift */ .sh-form-glass:hover::before{ opacity: 0.78; } /* ---------------------------------------------------------- Form typography + spacing ---------------------------------------------------------- */ .sh-glass-form .elementor-field-group{ margin-bottom: 16px; } /* Labels */ .sh-glass-form .elementor-field-label{ color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.2px; margin-bottom: 6px; } /* Inputs / textarea */ .sh-glass-form input.elementor-field, .sh-glass-form textarea.elementor-field, .sh-glass-form select.elementor-field{ background: rgba(6, 8, 14, 0.55) !important; color: rgba(255,255,255,0.92) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 14px !important; padding: 14px 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.25); outline: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } /* Placeholder */ .sh-glass-form input.elementor-field::placeholder, .sh-glass-form textarea.elementor-field::placeholder{ color: rgba(255,255,255,0.40); } /* Focus state (the important part) */ .sh-glass-form input.elementor-field:focus, .sh-glass-form textarea.elementor-field:focus, .sh-glass-form select.elementor-field:focus{ border-color: rgba(185,140,255,0.45) !important; box-shadow: 0 0 0 3px rgba(185,140,255,0.16), 0 18px 42px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07); transform: translateY(-1px); } /* Textarea height */ .sh-glass-form textarea.elementor-field{ min-height: 140px; resize: vertical; } /* ---------------------------------------------------------- Submit button (matches your ghost-to-glow style) ---------------------------------------------------------- */ .sh-glass-form .elementor-button{ border-radius: 999px !important; padding: 12px 22px !important; background: rgba(12, 14, 22, 0.40) !important; color: rgba(255,255,255,0.92) !important; border: 1px solid rgba(185,140,255,0.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .sh-glass-form .elementor-button:hover{ transform: translateY(-1px); background: rgba(130, 80, 220, 0.22) !important; border-color: rgba(185,140,255,0.55) !important; box-shadow: 0 0 0 3px rgba(185,140,255,0.14), 0 18px 46px rgba(0,0,0,0.40), 0 0 26px rgba(185,140,255,0.22); } /* Success / error messages */ .sh-glass-form .elementor-message{ border-radius: 14px; padding: 12px 14px; background: rgba(6, 8, 14, 0.55); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.90); } /* Reuse your existing keyframes if already defined. If not, this prevents a “missing animation” issue. */ @keyframes shCosmicBorder{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Mobile padding */ @media (max-width: 768px){ .sh-form-glass{ padding: 18px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-51ffc34 *//* ========================= Shirohana Unified Button Ghost → Glow on Hover ========================= */ .sh-button .elementor-button { position: relative; padding: 14px 28px !important; font-size: 15px; font-weight: 500; letter-spacing: 0.3px; color: #ffffff !important; background: rgba(20, 18, 35, 0.45) !important; backdrop-filter: blur(6px); border: 1px solid rgba(180,150,255,0.35) !important; border-radius: 999px !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; width: auto !important; white-space: nowrap; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; } /* Hover: glow reveal */ .sh-button .elementor-button:hover { background: linear-gradient( 135deg, rgba(160,120,255,0.95), rgba(110,80,220,0.95) ) !important; border-color: rgba(220,200,255,0.8) !important; transform: translateY(-1px); box-shadow: 0 10px 34px rgba(160,120,255,0.45), inset 0 0 18px rgba(255,255,255,0.08) !important; } /* Active / click */ .sh-button .elementor-button:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(120,90,220,0.35) !important; }/* End custom CSS */