/* Theme Name: Hello Elementor BDG Theme URI: https://bdg-solutions.de Description: Child theme of Hello Elementor for the BDG Solutions site. Carries only the motion/effect CSS that free Elementor cannot express (marquees, scroll reveal, sticky CTA bar, phase auto-cycle, hero float). All layout, spacing, typography and color remain editable in Elementor. Author: BDG Solutions Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-bdg */ /* ============================================================ BDG effect layer Every class here is applied via Elementor's Advanced > CSS Classes field, so sections stay fully editable in the Elementor UI. Values are ported 1:1 from the prototype's css/style.css. ============================================================ */ /* ---------- Scroll reveal (prototype: .reveal / .reveal.in) ---------- */ .bdg-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .bdg-reveal.in { opacity: 1; transform: none; } /* ---------- Hero entrance (prototype: heroIn) ---------- */ @keyframes bdgHeroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .bdg-hero-copy > .elementor-element { animation: bdgHeroIn 0.7s ease backwards; } .bdg-hero-copy > .elementor-element:nth-child(1) { animation-delay: 0.05s; } .bdg-hero-copy > .elementor-element:nth-child(2) { animation-delay: 0.15s; } .bdg-hero-copy > .elementor-element:nth-child(3) { animation-delay: 0.25s; } .bdg-hero-copy > .elementor-element:nth-child(4) { animation-delay: 0.35s; } .bdg-hero-copy > .elementor-element:nth-child(5) { animation-delay: 0.45s; } .bdg-hero-copy > .elementor-element:nth-child(6) { animation-delay: 0.55s; } .bdg-hero-visual { animation: bdgHeroIn 0.8s ease 0.2s backwards; } /* ---------- Marquee (prototype: .marquee 28s / .syslogos 55s) ---------- */ .bdg-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .bdg-marquee .e-con-inner, .bdg-marquee > .elementor-widget-container { display: flex; width: max-content; /* Elementor caps .e-con-inner at --content-width; without this the track is clipped to the container and translateX(-50%) shifts half the viewport instead of half the track, so the loop visibly jumps once per cycle. */ max-width: none; flex-wrap: nowrap; animation: bdgMarquee 28s linear infinite; } .bdg-marquee-slow .e-con-inner, .bdg-marquee-slow > .elementor-widget-container { animation-duration: 55s; } .bdg-marquee:hover .e-con-inner, .bdg-marquee:hover > .elementor-widget-container { animation-play-state: paused; } @keyframes bdgMarquee { to { transform: translateX(-50%); } } /* ---------- Sticky CTA bar (prototype: #stickyCta) ---------- */ .bdg-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; transform: translateY(110%); transition: transform 0.3s ease; } .bdg-sticky-cta.visible { transform: translateY(0); } /* ---------- Six-phase stack (prototype: .phase-row / phaseProgress) ---------- */ .bdg-phase-progress { height: 3px; width: 0; background: var(--e-global-color-bdgred, #e30039); } .bdg-phase-row.active .bdg-phase-progress { animation: bdgPhaseProgress 3.2s linear forwards; } @keyframes bdgPhaseProgress { to { width: 100%; } } /* Body of a phase row is collapsed until its row is active */ .bdg-phase-row .bdg-phase-body { display: none; } .bdg-phase-row.active .bdg-phase-body { display: block; } /* ---------- Flow arrow pulse (prototype: .flow-arrow / arrowPulse) ---------- */ .bdg-flow-arrow { animation: bdgArrowPulse 1.6s ease-in-out infinite; } .bdg-flow-arrow-d1 { animation-delay: 0.4s; } .bdg-flow-arrow-d2 { animation-delay: 0.8s; } @keyframes bdgArrowPulse { 0%, 100% { opacity: 0.35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } } @media (max-width: 960px) { .bdg-flow-arrow { transform: rotate(90deg); } @keyframes bdgArrowPulse { 0%, 100% { opacity: 0.35; transform: rotate(90deg) translateX(0); } 50% { opacity: 1; transform: rotate(90deg) translateX(5px); } } } /* ---------- Float (prototype: .float-a / .float-b) ---------- */ .bdg-float-a { animation: bdgFloaty 4.5s ease-in-out infinite; } .bdg-float-b { animation: bdgFloaty 5.5s ease-in-out infinite reverse; } @keyframes bdgFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---------- Sticky header (prototype: .site-header) ---------- */ .bdg-sticky-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---------- Reduced motion: mirrors the prototype exactly ---------- */ @media (prefers-reduced-motion: reduce) { .bdg-reveal { opacity: 1; transform: none; transition: none; } .bdg-hero-copy > .elementor-element, .bdg-hero-visual { animation: none; } .bdg-marquee .e-con-inner, .bdg-marquee > .elementor-widget-container { animation: none; } .bdg-flow-arrow { animation: none; } .bdg-float-a, .bdg-float-b { animation: none; } .bdg-phase-row.active .bdg-phase-progress { animation: none; width: 100%; } html { scroll-behavior: auto; } } /* ---------- XPRO dropdown panel: prototype .submenu ---------- */ .bdg-sticky-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu{background:rgba(9,13,22,0.98);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:10px;box-shadow:0 22px 50px rgba(0,0,0,0.45);gap:2px;} .bdg-sticky-header .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a{border-radius:8px;} /* non-link section label inside the dropdown (prototype .sub-label) */ .bdg-sticky-header .xpro-elementor-dropdown-menu li.sub-label > a{font-family:'Poppins',sans-serif!important;font-size:10.5px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:1.5px!important;color:rgba(255,255,255,0.4)!important;padding:8px 14px 4px!important;pointer-events:none;background:transparent!important;border-radius:0!important;} /* ---------- Footer grid: prototype collapses 4 cols -> 2 at 960 ---------- */ @media (max-width:960px){.bdg-footer-col{flex-grow:0!important;flex-basis:calc(50% - 20px)!important;width:auto!important;}} @media (max-width:600px){.bdg-footer-col{flex-basis:100%!important;}} /* ---------- Link colour reset ---------- The prototype has no global colour: every link takes its colour from the component it sits in. Hello Elementor ships a default #cc3366, which would otherwise override the Elementor colour controls on every link widget. ---------- */ .elementor a{color:inherit;} /* ---------- Top-level nav spacing ---------- Prototype uses .main-nav ul{gap:30px} with no padding/margin on the links. XPRO has no gap control, so the 30px lives here; padding and margin are zeroed in the widget itself. ---------- */ .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav{gap:30px;} @media (max-width:960px){.bdg-sticky-header .xpro-elementor-horizontal-navbar-nav{gap:0;}} /* ---------- Mobile nav panel (<=960) ---------- Prototype: .main-nav.open is a full-width panel below the 74px header. XPRO defaults to a 400px right-hand off-canvas drawer; these rules restyle XPRO's own panel rather than replacing its toggle behaviour. ---------- */ @media (max-width:960px){ .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{display:none!important;position:fixed!important;top:74px!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;height:auto!important;background:#0d1322!important;border-bottom:1px solid rgba(255,255,255,0.12)!important;padding:16px 24px 24px!important;text-align:left!important;transform:none!important;overflow:visible!important;} .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet.active{display:block!important;} .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;padding-top:0!important;} .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a{padding:0!important;min-height:0!important;border-bottom:0!important;background:transparent!important;color:rgba(255,255,255,0.85)!important;} /* submenus stay expanded and indented, no panel chrome */ .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:6px 0 0 16px!important;min-width:0!important;width:auto!important;max-width:none!important;} .bdg-sticky-header .xpro-elementor-dropdown-menu > li > a{background:transparent!important;padding:0!important;} .bdg-sticky-header .xpro-dropdown-menu-toggle{display:none!important;} .bdg-sticky-header .xpro-elementor-horizontal-menu-overlay,.bdg-sticky-header .xpro-elementor-horizontal-menu-close{display:none!important;} } /* ---------- Nav breakpoint guard (961-1024) ---------- The prototype switches to the mobile nav at 960px. XPRO hardcodes its responsive-tablet media query at 1024px in the plugin stylesheet, which we must not edit. These rules hand the 961-1024 band back to the desktop presentation so the effective switch lands exactly on 960. Pure CSS: it re-evaluates on any viewport change with no JS and no hydration flash. ---------- */ @media (min-width:961px) and (max-width:1024px){ .bdg-sticky-header .xpro-elementor-horizontal-navbar-wrapper{position:static!important;height:auto!important;width:auto!important;max-width:none!important;background:none!important;padding:0!important;transform:none!important;overflow:visible!important;z-index:auto!important;text-align:initial!important;} .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav{flex-direction:row!important;align-items:center!important;padding-top:0!important;gap:30px!important;} .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li{width:auto!important;} .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li > a{width:auto!important;min-height:0!important;padding:0!important;margin:0!important;border-bottom:0!important;justify-content:center!important;} .bdg-sticky-header .xpro-elementor-dropdown-menu{position:absolute!important;width:270px!important;min-width:270px!important;max-width:none!important;display:block!important;opacity:0;visibility:hidden;} .bdg-sticky-header .xpro-elementor-horizontal-navbar-nav > li:hover > .xpro-elementor-dropdown-menu{opacity:1;visibility:visible;} .bdg-sticky-header .xpro-elementor-horizontal-menu-toggler-wrapper,.bdg-sticky-header .xpro-elementor-horizontal-menu-overlay,.bdg-sticky-header .xpro-elementor-horizontal-menu-close{display:none!important;} } /* admin-bar-panel-offset: keep the fixed mobile panel below the WP admin bar */ @media (max-width:960px){body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{top:106px!important;}} @media (max-width:782px){body.admin-bar .bdg-sticky-header .xpro-elementor-horizontal-menu-responsive-tablet{top:120px!important;}} /* ---------- Anwendungsfaelle accordion 720px rule ---------- Prototype collapses .acc-fields to one column and hides the head chips at 720px. Elementor's only breakpoint slot between 600 and 960 is taken by the 820px .path-grid rule, so this one lives here. ---------- */ @media (max-width:720px){ #anwendungsfaelle .bdg-acc-fields{grid-template-columns:1fr!important;flex-direction:column!important;} /* status chips sit as bare children of the accordion title text */ #anwendungsfaelle .e-n-accordion-item-title-text > span{display:none!important;} }