.elementor-kit-4{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-abf57f7:#FDFCF9;--e-global-color-8c590fe:#23262F;--e-global-color-69f3bf7:#F1F1F9;--e-global-color-5df2d0b:#FCCD06;--e-global-color-505bc5a:#3BCACE;--e-global-color-e299759:#5759A6;--e-global-color-ead44fb:#E92A95;--e-global-color-a2e3e27:#19455E;--e-global-typography-primary-font-family:"Gloock";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"DM Serif Display";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-abf57f7 );color:var( --e-global-color-8c590fe );font-family:"Inter", Sans-serif;font-weight:400;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-ead44fb );color:var( --e-global-color-5df2d0b );}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 img{opacity:1;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:10px;--container-default-padding-right:10px;--container-default-padding-bottom:10px;--container-default-padding-left:10px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* CSS Rules */ h1, .hero-title { font-family: 'Gloock', serif; font-weight: 400; letter-spacing: -0.02em; } h2, h3, .section-title { font-family: 'DM Serif Display', serif; font-weight: 400; } body, p, button, nav { font-family: 'Inter', sans-serif; font-weight: 400; /* Use 500 or 600 for UI links and buttons */ line-height: 1.6; } /* ========================================================================== 1. Typography Variables & Fallback Font Stacks ========================================================================== */ :root { --font-hero: 'Gloock', Georgia, 'Times New Roman', serif; --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-accent: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ========================================================================== 2. Section 1: Hero Editorial Hook (Gloock H1 & Animated Headline) ========================================================================== */ .hero-editorial-h1 h1.elementor-heading-title, .hero-editorial-h1 { font-family: var(--font-hero); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; /* Fluid responsive scaling: 38px on mobile up to 80px on desktop */ font-size: clamp(2.375rem, 1.2rem + 4vw, 5rem); } /* Custom styling for Elementor Animated Headline widget */ .hero-editorial-headline .elementor-headline-plain-text { font-family: var(--font-hero); } .hero-editorial-headline .elementor-headline-dynamic-text { font-family: var(--font-hero); font-style: italic; } .hero-editorial-headline .elementor-headline-animation-type-underline svg path, .hero-editorial-headline .elementor-headline-animation-type-circle svg path { stroke-width: 3px; stroke-linecap: round; } /* ========================================================================== 3. Section 2: Features / Loop Grid (DM Serif Display H3) ========================================================================== */ .brand-grid-card .elementor-heading-title, .brand-grid-card h3, .brand-loop-grid .elementor-post__title { font-family: var(--font-heading); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; /* Fluid responsive scaling: 22px on mobile up to 28px on desktop */ font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); } /* ========================================================================== 4. Section 3: Interactive CTA & Buttons (Inter Accent) ========================================================================== */ .brand-cta-button .elementor-button, .brand-form-submit .elementor-button { font-family: var(--font-accent); font-weight: 600; font-size: 0.9375rem; /* 15px */ letter-spacing: 0.03em; text-transform: uppercase; transition: transform 0.2s ease, box-shadow 0.2s ease; } .brand-cta-button .elementor-button:hover, .brand-cta-button .elementor-button:focus { transform: translateY(-2px); }/* End custom CSS */