/* ========================================================= EIF — Global Effects Bridge Recreates the original HTML page's visual effects on top of Elementor Free markup. Source of truth: foundation_site HTML. Tokens, easings, shadows and timings mirror the original. ========================================================= */ :root{ --eif-palm:#1E5B3A; --eif-forest:#2F6B45; --eif-canopy:#0F3D26; --eif-gold:#B88A3B; --eif-gold-soft:#D6AE63; --eif-ivory:#F7F5EE; --eif-ivory-deep:#EFEBDD; --eif-charcoal:#1A1A1A; --eif-gray:#6B7280; --eif-line:rgba(30,91,58,.14); --eif-grad-gold:linear-gradient(135deg,#B88A3B 0%,#D6AE63 100%); --eif-shadow-sm:0 2px 10px rgba(15,61,38,.08); --eif-shadow:0 14px 40px rgba(15,61,38,.12); --eif-shadow-lg:0 30px 70px rgba(15,61,38,.20); --eif-ease:cubic-bezier(.2,.8,.2,1); } /* --------------------------------------------------------- 1. STICKY HEADER — shrink + glassmorphism on scroll The Xpro header is the first .elementor-section / e-con in the header template. We flag via JS (.eif-scrolled). --------------------------------------------------------- */ .eif-site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; transition:background .4s, box-shadow .4s, padding .4s, backdrop-filter .4s; } body.eif-has-fixed-header{ padding-top:86px; } body.eif-scrolled .eif-site-header{ background:rgba(247,245,238,.85); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:var(--eif-shadow-sm); border-bottom:1px solid var(--eif-line); } /* logo resizes down as header shrinks */ .eif-site-header img{ transition:width .4s, height .4s, transform .4s; } body.eif-scrolled .eif-site-header img{ transform:scale(.88); } /* header padding shrink */ .eif-site-header > .e-con-inner, .eif-site-header .e-con-inner{ transition:padding .4s; } body.eif-scrolled .eif-site-header .e-con-inner{ padding-top:8px; padding-bottom:8px; } /* nav hover underline + active highlight (Xpro horizontal menu) */ .eif-site-header .xpro-elementor-menu-list li > a{ position:relative; } .eif-site-header .xpro-elementor-menu-list li > a::after{ content:""; position:absolute; left:50%; bottom:.25rem; width:0; height:2px; background:var(--eif-gold); transform:translateX(-50%); transition:width .3s; border-radius:2px; } .eif-site-header .xpro-elementor-menu-list li > a:hover::after, .eif-site-header .xpro-elementor-menu-list li.current-menu-item > a::after{ width:60%; } .eif-site-header .xpro-elementor-menu-list li.current-menu-item > a{ color:var(--eif-palm)!important; } /* --------------------------------------------------------- 2. SCROLL REVEAL — fade + translateY, IntersectionObserver Apply class "eif-reveal" to any section/column/widget. --------------------------------------------------------- */ .eif-reveal{ transition:opacity .8s var(--eif-ease), transform .8s var(--eif-ease); will-change:opacity, transform; } /* Only hide when JS is active AND before reveal. Fail-safe: no JS = fully visible. */ html.eif-js .eif-reveal:not(.eif-in){ opacity:0; transform:translateY(34px); } .eif-reveal.eif-in{ opacity:1; transform:none; } /* staggered children */ .eif-stagger > *{ transition:opacity .7s var(--eif-ease), transform .7s var(--eif-ease); } html.eif-js .eif-stagger:not(.eif-in) > *{ opacity:0; transform:translateY(28px); } .eif-stagger.eif-in > *{ opacity:1; transform:none; } .eif-stagger.eif-in > *:nth-child(1){ transition-delay:.05s; } .eif-stagger.eif-in > *:nth-child(2){ transition-delay:.12s; } .eif-stagger.eif-in > *:nth-child(3){ transition-delay:.19s; } .eif-stagger.eif-in > *:nth-child(4){ transition-delay:.26s; } .eif-stagger.eif-in > *:nth-child(5){ transition-delay:.33s; } .eif-stagger.eif-in > *:nth-child(6){ transition-delay:.40s; } @media (prefers-reduced-motion:reduce){ .eif-reveal,.eif-stagger > *{ opacity:1!important; transform:none!important; } } /* --------------------------------------------------------- 3. CARDS — lift + shadow on hover. Any Elementor container flagged ".eif-card" gets the lift. We also auto-target the white rounded inner containers used for program/news/stat/team/feature cards site-wide. --------------------------------------------------------- */ .eif-card, .eif-card.e-con{ transition:transform .4s var(--eif-ease), box-shadow .4s var(--eif-ease)!important; } .eif-card:hover{ transform:translateY(-8px); box-shadow:var(--eif-shadow-lg)!important; } /* gradient accent bar that wipes in on hover (program/focus cards) */ .eif-card.eif-accent{ position:relative; overflow:hidden; } .eif-card.eif-accent::before{ content:""; position:absolute; left:0; top:0; height:4px; width:0; background:var(--eif-grad-gold); transition:width .45s var(--eif-ease); } .eif-card.eif-accent:hover::before{ width:100%; } /* icon nudges up inside a hovered card */ .eif-card:hover .elementor-icon-box-icon, .eif-card:hover .elementor-icon{ transform:translateY(-4px); } .eif-card .elementor-icon-box-icon, .eif-card .elementor-icon{ transition:transform .4s var(--eif-ease); } /* --------------------------------------------------------- 4. IMAGE ZOOM — wrap flagged ".eif-zoom"; image scales, overlay fades. Mirrors gallery/news/team/program media. --------------------------------------------------------- */ .eif-zoom{ overflow:hidden; border-radius:var(--eif-radius,14px); position:relative; } .eif-zoom img{ transition:transform .7s var(--eif-ease); display:block; } .eif-zoom:hover img{ transform:scale(1.08); } .eif-zoom::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(15,61,38,0) 40%,rgba(15,61,38,.35) 100%); opacity:0; transition:opacity .5s var(--eif-ease); } .eif-zoom:hover::after{ opacity:1; } /* --------------------------------------------------------- 5. BUTTONS — gradient reveal from bottom + lift + shadow. Targets every Elementor button widget globally. --------------------------------------------------------- */ .elementor-button-wrapper .elementor-button, a.elementor-button, .elementor-button{ position:relative; overflow:hidden; isolation:isolate; transition:transform .35s var(--eif-ease), box-shadow .35s, color .35s!important; } .elementor-button::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--eif-grad-gold); transform:translateY(101%); transition:transform .4s var(--eif-ease); } .elementor-button:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(184,138,59,.34); color:var(--eif-canopy)!important; } .elementor-button:hover::before{ transform:translateY(0); } .elementor-button > *{ position:relative; z-index:1; } /* --------------------------------------------------------- 6. HERO — floating logo, pulsing glow, scroll indicator. Opt-in via classes on a hero image / hero section. --------------------------------------------------------- */ @keyframes eif-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} } @keyframes eif-pulse{ 0%,100%{ transform:scale(1);opacity:.8;} 50%{ transform:scale(1.08);opacity:1;} } @keyframes eif-scrollDot{ 0%{opacity:0;transform:translate(-50%,0);} 40%{opacity:1;} 80%,100%{opacity:0;transform:translate(-50%,12px);} } .eif-float img, img.eif-float{ animation:eif-float 6s ease-in-out infinite; } .eif-glow{ position:relative; } .eif-glow::before{ content:""; position:absolute; left:50%; top:50%; width:120%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(214,174,99,.45) 0%,rgba(214,174,99,0) 70%); animation:eif-pulse 4s ease-in-out infinite; z-index:0; pointer-events:none; } .eif-glow > *{ position:relative; z-index:1; } .eif-scroll-indicator{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(247,245,238,.7); border-radius:14px; z-index:5; } .eif-scroll-indicator::after{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px; background:var(--eif-gold-soft); animation:eif-scrollDot 1.8s ease-in-out infinite; } /* --------------------------------------------------------- 7. ANIMATED COUNTERS — typography parity handled by JS; nothing to style beyond inheriting the heading styles. 8. MOBILE — Xpro handles the hamburger; we lock body scroll via JS when its panel is open (.eif-menu-open). --------------------------------------------------------- */ body.eif-menu-open{ overflow:hidden; }