/* ============================================================ FX GOAT — Elementor BRIDGE (clone-only, additive) Scoped entirely under body.fxgoat-elementor-page so it can NEVER affect the live coded page or any other page. Reuses approved design tokens + classes; adds nothing global. ============================================================ */ /* ---- 1. Neutralize Elementor wrapper spacing so the approved classes (.section/.container/.final/.final-cta/...) keep full control of layout. Padding/gap are also set to 0 in each container's own settings; this is belt-and-braces. ---- */ body.fxgoat-elementor-page .e-con, body.fxgoat-elementor-page .e-con-inner{ --gap:0px; } body.fxgoat-elementor-page .elementor-widget{ margin:0; } body.fxgoat-elementor-page .elementor-widget:not(:last-child){ margin-block-end:0; } body.fxgoat-elementor-page .elementor-widget-container{ margin:0; } body.fxgoat-elementor-page .elementor-widget-text-editor .elementor-widget-container{ padding:0; } /* text-editor: don't let Elementor force its own typography over ours */ body.fxgoat-elementor-page .elementor-widget-text-editor{ color:inherit; font-family:inherit; } /* ---- 2. Buttons: map approved .btn / .btn-primary / .btn-ghost / .btn-lg onto Elementor's actual markup. Wrapper classes fx-btn-primary / fx-btn-secondary / fx-btn-lg are set on each Button widget. ---- */ body.fxgoat-elementor-page .fx-btn-primary .elementor-button, body.fxgoat-elementor-page .fx-btn-secondary .elementor-button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--ff-display); font-weight:600; font-size:15px; letter-spacing:.01em; padding:15px 26px; border-radius:13px; position:relative; white-space:nowrap; text-decoration:none; border:none; line-height:1; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } body.fxgoat-elementor-page .fx-btn-lg .elementor-button{ padding:18px 34px; font-size:16px; } /* primary — calm at rest (matches the approved CTA hover fix), glow only on hover/focus */ body.fxgoat-elementor-page .fx-btn-primary .elementor-button{ color:#05111f; background:var(--grad); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); } body.fxgoat-elementor-page .fx-btn-primary .elementor-button:hover, body.fxgoat-elementor-page .fx-btn-primary .elementor-button:focus-visible{ transform:translateY(-2px); box-shadow:0 18px 44px -10px var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.6); } /* secondary / ghost */ body.fxgoat-elementor-page .fx-btn-secondary .elementor-button{ color:var(--text); background:var(--panel); border:1px solid var(--border-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } body.fxgoat-elementor-page .fx-btn-secondary .elementor-button:hover, body.fxgoat-elementor-page .fx-btn-secondary .elementor-button:focus-visible{ transform:translateY(-2px); border-color:var(--cyan); box-shadow:0 0 0 1px rgba(0,229,255,.25), 0 14px 40px -16px var(--glow-cyan); } /* keyboard focus outline (parity with .btn:focus-visible) */ body.fxgoat-elementor-page .fx-btn-primary .elementor-button:focus-visible, body.fxgoat-elementor-page .fx-btn-secondary .elementor-button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; } /* hide any Elementor-injected icon span; we render the exact icons via pseudo-elements */ body.fxgoat-elementor-page .elementor-button .elementor-button-icon{ display:none; } body.fxgoat-elementor-page .elementor-button .elementor-button-content-wrapper{ display:inline-flex; align-items:center; gap:0; } /* primary: arrow AFTER text (exact approved SVG, stroke #05111f) */ body.fxgoat-elementor-page .fx-btn-primary .elementor-button::after{ content:""; width:18px; height:18px; flex:0 0 18px; display:inline-block; background:no-repeat center/contain url("data:image/svg+xml,"); } /* ghost: play BEFORE text (exact approved SVG, fill #EAF0FB) */ body.fxgoat-elementor-page .fx-btn-secondary .elementor-button::before{ content:""; width:18px; height:18px; flex:0 0 18px; display:inline-block; background:no-repeat center/contain url("data:image/svg+xml,"); } /* ---- 4. Neutralize the Hostinger theme's AOS injection (clone only) ---- The active theme adds class "hostinger-elementor-aos" + data-aos="fade-up" to EVERY Elementor container, which can start wrappers hidden and fight the approved .reveal animation. Keep approved .reveal; force every NON-reveal wrapper permanently visible so content is never left hidden and the theme's motion can't compete with the approved one. */ body.fxgoat-elementor-page .hostinger-elementor-aos:not(.reveal){ opacity:1 !important; transform:none !important; } /* native Heading/Text widgets inherit the approved typography + color */ body.fxgoat-elementor-page .elementor-heading-title{ color:inherit; font-family:inherit; } /* ---- 5. small layout helpers (clone only) ---- */ body.fxgoat-elementor-page .fx-mb-0{ margin-bottom:0; } body.fxgoat-elementor-page .fx-mb-28{ margin-bottom:28px; } body.fxgoat-elementor-page .fx-mw-640{ max-width:640px; } /* risk cards: horizontal row, icon fixed, text grows (match approved) */ body.fxgoat-elementor-page .risk{ flex-direction:row; } body.fxgoat-elementor-page .risk > .elementor-widget{ flex:0 0 auto; } body.fxgoat-elementor-page .risk > .e-con{ flex:1 1 auto; min-width:0; width:auto; } /* ---- 6. broker step rows + play-icon button variant (clone only) ---- */ body.fxgoat-elementor-page .fx-mb-24{ margin-bottom:24px; } body.fxgoat-elementor-page .bs{ flex-direction:row; align-items:center; } body.fxgoat-elementor-page .bs > .elementor-widget{ flex:0 0 auto; } body.fxgoat-elementor-page .bs > .elementor-widget-text-editor{ flex:1 1 auto; min-width:0; } body.fxgoat-elementor-page .fx-btn-play .elementor-button::after{ content:none; } body.fxgoat-elementor-page .fx-btn-primary.fx-btn-play .elementor-button::before{ content:""; width:18px; height:18px; flex:0 0 18px; display:inline-block; background:no-repeat center/contain url("data:image/svg+xml,"); } /* ---- 7. Mobile hero CTAs: match approved full-width stretch at <=420px ---- */ @media (max-width:420px){ body.fxgoat-elementor-page .hero-cta .elementor-button{ width:100%; } } /* ---- 8. Elementor EDITOR canvas visibility (EDITOR-ONLY + clone-only) ---- .reveal starts at opacity:0 and is un-hidden by the front-end IntersectionObserver, which does NOT run in the Elementor editor -> blank canvas. Force content visible ONLY when body.elementor-editor-active is present (editor preview only). The live front-end and the ?preview=true front-end never carry that class, so their reveal animations are completely unaffected. */ body.elementor-editor-active.fxgoat-elementor-page .reveal, .elementor-editor-active .fxgoat-elementor-page .reveal, body.elementor-editor-active.fxgoat-elementor-page [data-aos], .elementor-editor-active .fxgoat-elementor-page [data-aos]{ opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important; } body.elementor-editor-active.fxgoat-elementor-page [data-d], .elementor-editor-active .fxgoat-elementor-page [data-d]{ transition-delay:0ms !important; } /* ---- 9. Header brand logo (clone only): uploaded Media Library logo replaces the FX mark ---- */ body.fxgoat-elementor-page .brand .brand-logo{ height:34px; width:auto; max-height:34px; object-fit:contain; display:block; } /* ---- 10. MOBILE-ONLY (max-width:760px; clone page only): hero cockpit + ticker. Community First floats at the card's lower-right (reference behaviour) inside reserved cockpit space so it can never reach the ticker; the ticker container sits fully below the cockpit. Desktop/tablet (>760px) unaffected. ---- */ @media (max-width:760px){ body.fxgoat-elementor-page .hero-grid{ display:flex !important; flex-direction:column !important; gap:26px !important; align-items:stretch !important; } body.fxgoat-elementor-page .cockpit{ position:relative !important; width:100% !important; padding-bottom:84px !important; } body.fxgoat-elementor-page .video-card{ width:100% !important; } body.fxgoat-elementor-page .f1, body.fxgoat-elementor-page .f2, body.fxgoat-elementor-page .f4{ display:none !important; } body.fxgoat-elementor-page .cockpit .float.f3{ display:flex !important; position:absolute !important; right:12px !important; bottom:-32px !important; left:auto !important; top:auto !important; width:min(72vw,340px) !important; max-width:calc(100vw - 40px) !important; margin:0 !important; z-index:5 !important; box-sizing:border-box !important; animation:floaty 6s ease-in-out infinite !important; } body.fxgoat-elementor-page .elementor-element-0bd09d6{ position:relative !important; display:block !important; width:100% !important; max-width:100% !important; margin-top:0 !important; margin-bottom:22px !important; clear:both !important; z-index:2 !important; transform:none !important; } body.fxgoat-elementor-page .ticker{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:100% !important; margin:0 auto !important; overflow:hidden !important; z-index:2 !important; } }