/* Theme Name: Child Theme Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then. Version: 1.0 Author: Kriesi Author URI: http://www.kriesi.at Template: enfold */ /*Add your own styles here:*/ :root{ --ff-body: "libre-baskerville", sans-serif; --ff-heading: "static", sans-serif; --ff-hero: "electrolize"; --bg-col-1: #f2f2f2; --csem-fs-lg: clamp(1.5rem, 5vh, 2rem); --csem-fs-xl: clamp(1em, 17vh, 5rem); --csem-fs-600: ; --csem-fs-500: ; --csem-fs-400: ; --fc-primary-dark:32,110,122; --fc-primary-light:; --fc-secondary-dark:; --fc-secondary-light:; --fw-bolder: 1px 1px 0; --pd-xl:; --pd-lg:clamp(30px, 15%, 100px); --pd-sm: ; /*Set the font size*/ --fs-body: 1.125rem; /* 18px / 16 = 1.125rem */ --fs-6: calc(var(--fs-body) - 0.125rem); /* 2px / 16 = 0.125rem */ --fs-5: calc(var(--fs-body)); /* no change */ --fs-4: calc(var(--fs-body) + 0.25rem); /* 4px / 16 = 0.25rem */ --fs-3: calc(var(--fs-body) + 0.5rem); /* 8px / 16 = 0.5rem */ --fs-2: clamp(calc(var(--fs-body) + 1rem), 4vw, calc(var(--fs-body) + 1.6rem)); /* 14px / 16 = 0.875rem */ --fs-1: clamp(calc(var(--fs-body) + 1.7rem), 4vw, calc(var(--fs-body) + 2.7rem)); /* 18px / 16 = 1.125rem */ } @media (max-width: 700px) { :root{ --csem-fs-lg: ; --csem-fs-xl: clamp(1em, 4vh, 5rem); --csem-fs-lg: clamp(1.5rem, 2vh, 2rem); --csem-fs-600: ; --csem-fs-500: ; --csem-fs-400: ; } } /* large screens with 1140px with */ @media only screen and (min-width: 1140px) { } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 989px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 989px) { } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { } /*-------------- General Styling --------------*/ .csem-body-container-padding {padding-top: clamp(30px, 10%, 60px) !important; padding-bottom: clamp(30px, 10%, 60px) !important;} .csem-hero-container-padding {padding-top: var(--pd-lg); padding-bottom: var(--pd-lg);} .csem-hero{font-size: var(--csem-fs-xl); text-shadow: var(--fw-bolder); text-transform:uppercase; font-family: var(--ff-body); line-height: 1em; margin-bottom: 20px; margin-top: 0px; font-weight:bolder; animation-name: scaleIn; animation-duration: var(--duration-fast);} .csem-fs-lg{font-size: var(--csem-fs-lg); margin: 0px; line-height:1em; display: inline-block;} /*------------ Cloud Animations ---------------*/ @keyframes float{ 0%{transform: translateX(-700px);} 100% {transform: translateX(1920px);} } .cloud01 {max-width: 27% !important; opacity: .4; top:-45px; animation: float 55s linear infinite;} .cloud02 {max-width: 27% !important; opacity: .4; top:80px; animation: float 55s 11s linear infinite backwards;} .cloud03 {max-width: 27% !important; opacity: .4; top:30px; animation: float 55s 25s linear infinite backwards;} .cloud {position:absolute;} /* Glossy column */ .csem-frm-brdr { /* Glassy background with bluish-white gradient shine */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 191, 255, 0.15)); /* Bluish-white gradient */ border-radius: 10px; /* Rounded corners */ padding: 20px; /* Inner spacing */ position: relative; /* For potential overlay effects */ /* Glowing blue border */ border: 2px solid #00bfff; /* Base blue color */ box-shadow: 0 0 10px rgba(0, 191, 255, 0.7), /* Inner glow */ 0 0 20px rgba(0, 191, 255, 0.5), /* Mid glow */ 0 0 30px rgba(0, 191, 255, 0.3); /* Outer glow */ transition: box-shadow 0.3s ease; /* Smooth transition for hover */ /* Glossy shine effect */ background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), transparent 70%); /* Shine overlay */ background-blend-mode: overlay; /* Blend for glass-like effect */ } /* Enhance glow and shine on hover */ .csem-frm-brdr:hover { box-shadow: 0 0 15px rgba(0, 191, 255, 0.9), 0 0 25px rgba(0, 191, 255, 0.6), 0 0 40px rgba(0, 191, 255, 0.4); background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), transparent 70%); /* Stronger shine on hover */ } .csem-frm-brdr select, .csem-frm-brdr input, .csem-frm-brdr textarea {background-color: #10255c91 !important; border-radius: 20px !important; overflow: hidden !important; color: #becbed !important; padding: 5px 20px !important;} .csem-frm-brdr .gform_wrapper select option { background-color: #142247 !important; color:#becbed !important;} .csem-frm-brdr .gform_wrapper select option:hover { background-color: #142247 !important; color:#becbed !important; } .csem-frm-brdr .gform_title, .csem-frm-brdr label, .csem-frm-brdr .gfield_description{color:#becbed !important; color: #e4e7ed !important; font-weight: 200 !important;} .csem-frm-brdr label, .csem-frm-brdr .gfield_description{font-size:18px !important;} .csem-frm-brdr p,.csem-frm-brdr li{font-size:17px !important; color: #e4e7ed !important;} .csem-frm-brdr strong{color: #e4e7ed !important; font-weight:200 !important; color: #e4e7ed !important; font-size:19px !important;} .csem-frm-brdr h3{color: #e4e7ed !important; font-weight:200 !important; color: #e4e7ed !important;} #gform_submit_button_3:hover{box-shadow: 0 0 10px rgba(0, 191, 255, 0.7), /* Inner glow */ 0 0 20px rgba(0, 191, 255, 0.5), /* Mid glow */ 0 0 30px rgba(0, 191, 255, 0.3); /* Outer glow */ transition: box-shadow 0.3s ease; /* Smooth transition for hover */} .gen-button{background-color: #10255c !important; border-radius: 20px !important; color: #becbed !important; padding: 10px 20px !important; margin-bottom: 20px !important; display: inline-block;} .gen-button:hover{box-shadow: 0 0 10px rgba(0, 191, 255, 0.7), /* Inner glow */ 0 0 20px rgba(0, 191, 255, 0.5), /* Mid glow */ 0 0 30px rgba(0, 191, 255, 0.3); /* Outer glow */ transition: box-shadow 0.3s ease; /* Smooth transition for hover */} .keyword {padding:30px;} .kw-grey{background-color:#f2f2f2;} .keyword h3{ color: #0038a3; font-weight: 600 !important; } #text-2{ position: fixed !important; } .mermaid { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 100%; overflow-x: auto; } /* --------------- Onboarding Form ---------------*/ .csem-form-h3 {border-left: solid 3px #3374eb !important; padding-left: 5px; font-size: 22px;} .csem-form-h3 {position: relative; border-left: solid 3px #3374eb !important; padding-left: 5px; margin-bottom:10px; border-bottom: none; &::after { content: ''; position: absolute; left: 0; bottom: -5px; /* Adjusts the offset */ width: 100%; height: 1px; background-color: #ededed; } } #gform_wrapper_5 .gfield_checkbox label { font-weight: 200 !important; font-size: 18px !important; } .csem-form-text{color:#838383; font-size: 20px;} #gform_wrapper_5 .gchoice { border: solid 1px #009793; padding: 12px; background: #f8f9fa; border-radius: 8px; box-shadow: 0px 0px 5px #00000040; margin-bottom: 20px; } #gform_wrapper_5 .gchoice:hover {background: #f7ffff;} #gform_wrapper_5{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #gform_wrapper_5 .gsection_title {color: #124a9a !important; background: linear-gradient(135deg, #009793 0%, #124a9a 100%); -webkit-background-clip: text; font-size:30px;} .csem-color-select .gform-field-label{ display: flex !important; flex-direction: column !important; gap: 10px !important; } .csem-color-select .gchoice{border:none !important;} /*----- Multi page side bar menu --------*/ #gf_page_steps_5{ opacity: 0 !important; height: 20px !important; } .step-number {display:none;} .gpmpn-page-link { display: block; margin-bottom: 6px; padding: 6px 10px; background: #f3f3f3; border-radius: 4px; text-decoration: none; color: #333; transition: background 0.2s; } .gpmpn-page-link:hover { background: linear-gradient(135deg, #009793 0%, #124a9a 100%); color: #ffffff !important; } .gpmpn-page-link.active { font-weight: 600; color: #0055a5; background: #edfdfd; } .gpmpn-page-link{ padding: 10px; margin-top: 13px; background: #fff; border: solid 1px #555; border-radius: 10px; box-shadow: 0px 0px 3px #0000002e; } .gpmpn-page-link{ border-color: transparent; box-shadow: 0 0px 5px rgba(0, 151, 147, 0.4); transform: translateY(-1px);} .step-label{background:none;} .gpmpn-sidebar-steps{padding: 0px 10px !important;} /* Form 10 */ #gform_wrapper_11 .gfield_checkbox label { font-weight: 200 !important; font-size: 18px !important; } #gform_wrapper_11 .gchoice { border: solid 1px #009793; padding: 12px; background: #f8f9fa; border-radius: 8px; box-shadow: 0px 0px 5px #00000040; margin-bottom: 20px; } #gform_wrapper_11 .gchoice:hover {background: #f7ffff;} #gform_wrapper_11{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #gform_wrapper_11 .gsection_title {color: #124a9a !important; background: linear-gradient(135deg, #009793 0%, #124a9a 100%); -webkit-background-clip: text; font-size:30px;} #gf_page_steps_11{ opacity: 0 !important; height: 20px !important; } .cu-form-head .avatar { display: none !important; }