.elementor-476 .elementor-element.elementor-element-5e26553d > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-476 .elementor-element.elementor-element-5e26553d:not(.elementor-motion-effects-element-type-background), .elementor-476 .elementor-element.elementor-element-5e26553d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0a0a0c;background-image:url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1920&q=80&auto=format&fit=crop");background-position:center center;background-size:cover;}.elementor-476 .elementor-element.elementor-element-5e26553d > .elementor-background-overlay{background-color:rgba(12,12,14,0.82);opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-476 .elementor-element.elementor-element-5e26553d > .elementor-container{min-height:92vh;text-align:center;}.elementor-476 .elementor-element.elementor-element-5e26553d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-476 .elementor-element.elementor-element-392d06b.elementor-column .elementor-widget-wrap{align-items:middle;}.elementor-476 .elementor-element.elementor-element-392d06b.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:middle;align-items:middle;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-476 .elementor-element.elementor-element-678025df{text-align:center;}.elementor-476 .elementor-element.elementor-element-678025df .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:52px;font-weight:800;text-transform:uppercase;line-height:0.92em;letter-spacing:-2px;color:#f4f4f5;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-476 .elementor-element.elementor-element-5b8c433c{text-align:center;font-family:"Inter Tight", Sans-serif;font-size:17px;line-height:1.7em;color:#b8b8bd;}.elementor-476 .elementor-element.elementor-element-425766d7:not(.elementor-motion-effects-element-type-background), .elementor-476 .elementor-element.elementor-element-425766d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0d0d10;}.elementor-476 .elementor-element.elementor-element-425766d7{overflow:hidden;border-style:solid;border-width:1px 0px 1px 0px;border-color:rgba(255,255,255,0.07);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-476 .elementor-element.elementor-element-425766d7 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-476 .elementor-element.elementor-element-172daa53:not(.elementor-motion-effects-element-type-background), .elementor-476 .elementor-element.elementor-element-172daa53 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0a0a0c;}.elementor-476 .elementor-element.elementor-element-172daa53{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:120px 0px 120px 0px;}.elementor-476 .elementor-element.elementor-element-172daa53 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-476 .elementor-element.elementor-element-7d2b3b31 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:42px;font-weight:800;text-transform:uppercase;line-height:1.02em;letter-spacing:-1px;color:#f4f4f5;}.elementor-476 .elementor-element.elementor-element-1c8c5b14{font-family:"Inter Tight", Sans-serif;font-size:17px;line-height:1.65em;color:#76767e;}.elementor-476 .elementor-element.elementor-element-43395855:not(.elementor-motion-effects-element-type-background), .elementor-476 .elementor-element.elementor-element-43395855 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0a0a0c;}.elementor-476 .elementor-element.elementor-element-43395855{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:120px 0px 120px 0px;}.elementor-476 .elementor-element.elementor-element-43395855 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-476 .elementor-element.elementor-element-3b786655 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:42px;font-weight:800;text-transform:uppercase;line-height:1.02em;letter-spacing:-1px;color:#f4f4f5;}.elementor-476 .elementor-element.elementor-element-79e1c7a{font-family:"Inter Tight", Sans-serif;font-size:17px;line-height:1.65em;color:#76767e;}.elementor-476 .elementor-element.elementor-element-484bb42b{width:var( --container-widget-width, 92.544% );max-width:92.544%;margin:30px 30px calc(var(--kit-widget-spacing, 0px) + 30px) 30px;--container-widget-width:92.544%;--container-widget-flex-grow:0;}.elementor-476 .elementor-element.elementor-element-484bb42b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-476 .elementor-element.elementor-element-7117fa97:not(.elementor-motion-effects-element-type-background), .elementor-476 .elementor-element.elementor-element-7117fa97 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0d0d10;}.elementor-476 .elementor-element.elementor-element-7117fa97{border-style:solid;border-width:1px 0px 1px 0px;border-color:rgba(255,255,255,0.07);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:120px 0px 120px 0px;}.elementor-476 .elementor-element.elementor-element-7117fa97 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-476 .elementor-element.elementor-element-1bbb4434.elementor-column .elementor-widget-wrap{align-items:middle;}.elementor-476 .elementor-element.elementor-element-1bbb4434.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:middle;align-items:middle;}.elementor-476 .elementor-element.elementor-element-36231c69 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:42px;font-weight:800;text-transform:uppercase;line-height:1.02em;letter-spacing:-1px;color:#f4f4f5;}.elementor-476 .elementor-element.elementor-element-49471394{font-family:"Inter Tight", Sans-serif;font-size:17px;line-height:1.65em;color:#76767e;}.elementor-bc-flex-widget .elementor-476 .elementor-element.elementor-element-5b355123.elementor-column .elementor-widget-wrap{align-items:middle;}.elementor-476 .elementor-element.elementor-element-5b355123.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:middle;align-items:middle;}@media(max-width:1024px) and (min-width:768px){.elementor-476 .elementor-element.elementor-element-403f5a3a{width:100%;}.elementor-476 .elementor-element.elementor-element-4fbcde15{width:100%;}}@media(max-width:1024px){.elementor-476 .elementor-element.elementor-element-5e26553d{padding:0px 40px 0px 40px;}.elementor-476 .elementor-element.elementor-element-678025df .elementor-heading-title{font-size:38px;}.elementor-476 .elementor-element.elementor-element-5b8c433c{font-size:16px;}.elementor-476 .elementor-element.elementor-element-172daa53{padding:96px 40px 96px 40px;}.elementor-476 .elementor-element.elementor-element-7d2b3b31 .elementor-heading-title{font-size:30px;}.elementor-476 .elementor-element.elementor-element-1c8c5b14{font-size:16px;}.elementor-476 .elementor-element.elementor-element-43395855{padding:96px 40px 96px 40px;}.elementor-476 .elementor-element.elementor-element-3b786655 .elementor-heading-title{font-size:30px;}.elementor-476 .elementor-element.elementor-element-79e1c7a{font-size:16px;}.elementor-476 .elementor-element.elementor-element-7117fa97{padding:96px 40px 96px 40px;}.elementor-476 .elementor-element.elementor-element-36231c69 .elementor-heading-title{font-size:30px;}.elementor-476 .elementor-element.elementor-element-49471394{font-size:16px;}}@media(max-width:767px){.elementor-476 .elementor-element.elementor-element-5e26553d{padding:0px 20px 0px 20px;}.elementor-476 .elementor-element.elementor-element-678025df .elementor-heading-title{font-size:30px;}.elementor-476 .elementor-element.elementor-element-5b8c433c{font-size:15px;}.elementor-476 .elementor-element.elementor-element-172daa53{padding:72px 20px 72px 20px;}.elementor-476 .elementor-element.elementor-element-7d2b3b31 .elementor-heading-title{font-size:24px;}.elementor-476 .elementor-element.elementor-element-1c8c5b14{font-size:15px;}.elementor-476 .elementor-element.elementor-element-43395855{padding:72px 20px 72px 20px;}.elementor-476 .elementor-element.elementor-element-3b786655 .elementor-heading-title{font-size:24px;}.elementor-476 .elementor-element.elementor-element-79e1c7a{font-size:15px;}.elementor-476 .elementor-element.elementor-element-7117fa97{padding:72px 20px 72px 20px;}.elementor-476 .elementor-element.elementor-element-36231c69 .elementor-heading-title{font-size:24px;}.elementor-476 .elementor-element.elementor-element-49471394{font-size:15px;}}/* Start custom CSS for section, class: .elementor-element-5e26553d */.elementor-section-wrap { background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 32px 32px; }/* End custom CSS */ /* Start custom CSS *//* ============================================================ MuxMenders — Contact Page v3 · Refined Premium Dark Elementor "Additional CSS" (paste into Page Settings → Advanced → Custom CSS, or your theme's Additional CSS / a code snippet) ------------------------------------------------------------ Fonts used (load via Elementor Custom Fonts or a Google Fonts plugin): • Archivo (display + headings) — you already use this • Inter Tight (body) • JetBrains Mono (kickers / labels) ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"); /* ── Root tokens ── */ :root{ --bg: #0c0c0e; --surface-0: #0c0c0e; --surface-1: #131316; --surface-2: #18181c; --surface-3: #1f1f24; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.04); --txt: #F4F4F5; --txt-2: #b8b8bd; --muted: #76767e; --dim: #4a4a52; --pink: #FF2D9B; --pink-deep: #E91E8C; --pink-soft: rgba(255,45,155,.10); --pink-line: rgba(255,45,155,.30); --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 24px -8px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.04) inset; --sh-3: 0 24px 60px -20px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05) inset; --glow: 0 0 40px -8px rgba(255,45,155,.35); --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --display: "Archivo", system-ui, sans-serif; --head: "Archivo", system-ui, sans-serif; --body: "Inter Tight", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; } /* ── Hide WP/theme default title & header bleed ── */ .page-title,.entry-title,.page-header,.site-header, h1.page-title,.elementor-page-title{ display:none !important; } /* ── Base typography on the page body text ── */ .mux-hero, .mux-form-sec, .mux-tiles-sec, .mux-steps-sec, .mux-tz-sec, .mux-cta-sec, .mux-trust-sec{ font-family:var(--body); } /* Grain overlay for atmosphere */ body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.022; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } /* ══════════════════════════════════════════ SHARED — kickers / overlines ══════════════════════════════════════════ */ .mux-form-sec .elementor-widget-heading h6, .mux-steps-sec .elementor-widget-heading h6, .mux-tz-sec .elementor-widget-heading h6, .mux-cta-sec .elementor-widget-heading h6, .mux-kicker{ font-family:var(--mono) !important; font-size:11px !important; letter-spacing:2px !important; text-transform:uppercase; font-weight:500 !important; color:var(--pink) !important; display:inline-flex; align-items:center; gap:9px; } .mux-kicker::before{ content:""; width:22px; height:1px; background:var(--pink); opacity:.6; display:inline-block; } /* Display headings */ .mux-hero-title, .mux-form-sec .elementor-widget-heading h2, .mux-steps-sec .elementor-widget-heading h2, .mux-tz-sec .elementor-widget-heading h2, .mux-cta-sec .elementor-widget-heading h2{ font-family:var(--head) !important; text-transform:uppercase; letter-spacing:-.025em; line-height:1.02; } /* ══════════════════════════════════════════ BUTTONS (Elementor button widgets carry .mux-btn-* via CSS classes) ══════════════════════════════════════════ */ .mux-btn-primary .elementor-button, .mux-btn-ghost .elementor-button, .mux-form-card .elementor-button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px; border-radius:var(--r-sm); font-family:var(--head); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:1.2px; text-decoration:none; cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, box-shadow .3s, color .3s; } .mux-btn-primary .elementor-button, .mux-form-card .elementor-button{ background:var(--pink-deep); color:#fff; border:1px solid var(--pink-deep); box-shadow:var(--glow), var(--sh-1); } .mux-btn-primary .elementor-button:hover, .mux-form-card .elementor-button:hover{ transform:translateY(-3px); background:var(--pink); border-color:var(--pink); box-shadow:0 0 56px -6px rgba(255,45,155,.55), 0 12px 30px -10px rgba(0,0,0,.6); color:#fff; } .mux-btn-ghost .elementor-button{ background:rgba(255,255,255,.02); color:var(--txt); border:1px solid var(--line-2); } .mux-btn-ghost .elementor-button:hover{ transform:translateY(-3px); border-color:var(--pink-line); color:var(--pink); background:var(--pink-soft); } /* ══════════════════════════════════════════ §1 HERO ══════════════════════════════════════════ */ .mux-hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; } .mux-hero > .elementor-container{ position:relative; z-index:3; } .mux-hero::before{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,45,155,.14), transparent 60%), radial-gradient(ellipse 70% 60% at 80% 110%, rgba(255,45,155,.10), transparent 55%), linear-gradient(180deg, rgba(12,12,14,.55) 0%, rgba(12,12,14,.82) 55%, var(--bg) 100%); } .mux-hero::after{ content:""; position:absolute; inset:0; z-index:2; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:32px 32px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000, transparent 75%); } .mux-hero-overlay{ position:relative; z-index:3; max-width:840px; margin:0 auto; text-align:center; padding:120px 24px; } .mux-hero-tag{ display:inline-flex; align-items:center; gap:9px; margin-bottom:30px !important; padding:7px 16px 7px 12px; border:1px solid var(--line-2); border-radius:999px; background:rgba(255,255,255,.02); backdrop-filter:blur(8px); font-family:var(--mono) !important; font-size:11px !important; letter-spacing:1.5px !important; text-transform:uppercase; color:var(--txt-2) !important; } .mux-hero-tag .mux-pulse{ width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 0 rgba(255,45,155,.6); animation:muxpulse 2.4s infinite; display:inline-block; } @keyframes muxpulse{0%{box-shadow:0 0 0 0 rgba(255,45,155,.5)}70%{box-shadow:0 0 0 9px rgba(255,45,155,0)}100%{box-shadow:0 0 0 0 rgba(255,45,155,0)}} .mux-hero-title{ color:var(--txt) !important; font-family:var(--head) !important; font-size:clamp(44px,8vw,92px) !important; font-weight:800 !important; text-transform:uppercase; line-height:.92 !important; letter-spacing:-.03em !important; margin:0 0 26px !important; } .mux-hero-title .mux-accent{ background:linear-gradient(120deg, var(--pink) 0%, #ff7ac4 50%, var(--pink-deep) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .mux-hero-sub{ color:var(--txt-2) !important; font-size:clamp(16px,2vw,19px) !important; line-height:1.7 !important; max-width:600px; margin:0 auto 38px !important; } .mux-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ══════════════════════════════════════════ §2 TRUST MARQUEE ══════════════════════════════════════════ */ .mux-trust-sec{ border-block:1px solid var(--line); background:var(--surface-1); overflow:hidden; position:relative; } .mux-trust-sec::before,.mux-trust-sec::after{ content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; } .mux-trust-sec::before{ left:0; background:linear-gradient(90deg, var(--surface-1), transparent); } .mux-trust-sec::after{ right:0; background:linear-gradient(-90deg, var(--surface-1), transparent); } .mux-marquee{ display:flex; width:max-content; padding:22px 0; animation:muxscroll 32s linear infinite; } .mux-trust-sec:hover .mux-marquee{ animation-play-state:paused; } @keyframes muxscroll{ to{ transform:translateX(-50%); } } .mux-marquee .mux-chip{ display:inline-flex; align-items:center; gap:11px; padding:0 38px; font-family:var(--head); font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); white-space:nowrap; border-right:1px solid var(--line-soft); } .mux-marquee .mux-chip .d{ width:5px; height:5px; border-radius:50%; background:var(--pink); flex:none; } /* ══════════════════════════════════════════ §3 FORM SECTION ══════════════════════════════════════════ */ .mux-form-sec{ background:var(--surface-0); } .mux-form-sec .elementor-widget-heading h2{ color:var(--txt) !important; font-size:clamp(30px,4.5vw,46px) !important; font-weight:800 !important; margin-top:16px !important; } /* Info cards (icon-box widgets w/ .mux-hl-card) */ .mux-hl-card{ display:flex !important; align-items:center; gap:14px; padding:16px 18px !important; background:var(--surface-1) !important; border:1px solid var(--line) !important; border-radius:var(--r-md) !important; transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s; margin-bottom:0 !important; } .mux-hl-card:hover{ transform:translateX(4px); border-color:var(--pink-line) !important; background:var(--surface-2) !important; } .mux-hl-card .elementor-icon-box-icon{ margin:0 !important; } .mux-hl-card .elementor-icon{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--pink-soft); border:1px solid var(--pink-line); color:var(--pink) !important; } .mux-hl-card .elementor-icon-box-title{ margin:0 !important; } .mux-hl-card .elementor-icon-box-title span{ font-family:var(--head); font-weight:600; font-size:14px; color:var(--txt); letter-spacing:.2px; } .mux-hl-card .elementor-icon-box-description{ color:var(--muted) !important; font-size:13px !important; margin:0 !important; } /* Direct contact block */ .mux-direct-contact{ padding:22px !important; border-radius:var(--r-md) !important; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--surface-2), var(--surface-1)) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-2); } .mux-direct-contact::before{ content:""; position:absolute; top:0; right:0; width:140px; height:140px; background:radial-gradient(circle, var(--pink-soft), transparent 70%); pointer-events:none; } .mux-direct-contact p{ margin:0 0 6px !important; } .mux-direct-contact strong{ font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--pink) !important; } .mux-direct-contact a{ display:block; color:var(--txt) !important; font-family:var(--head); font-weight:600; font-size:20px !important; text-decoration:none; transition:color .25s; } .mux-direct-contact a:hover{ color:var(--pink) !important; } /* Form card */ .mux-form-card{ background:linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important; border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; padding:38px !important; box-shadow:var(--sh-3); position:relative; overflow:hidden; } .mux-form-card::before{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1px; background:linear-gradient(160deg, rgba(255,45,155,.25), transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .mux-form-card .elementor-field-group{ position:relative; z-index:1; margin-bottom:18px; } .mux-form-card .elementor-field-label{ font-family:var(--mono) !important; color:var(--muted) !important; font-size:11px !important; text-transform:uppercase; letter-spacing:1px !important; margin-bottom:9px !important; font-weight:500 !important; } .mux-form-card .elementor-field{ background:var(--surface-0) !important; border:1px solid var(--line-2) !important; border-radius:10px !important; padding:13px 15px !important; color:var(--txt) !important; font-size:15px !important; font-family:var(--body) !important; transition:border-color .25s, box-shadow .25s, background .25s; } .mux-form-card .elementor-field::placeholder{ color:var(--dim) !important; } .mux-form-card .elementor-field:focus{ outline:none; border-color:var(--pink-line) !important; background:var(--surface-1) !important; box-shadow:0 0 0 4px var(--pink-soft) !important; } .mux-form-card select.elementor-field{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF2D9B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; } .mux-form-card textarea.elementor-field{ resize:vertical; min-height:110px; } .mux-form-card .elementor-button{ width:100%; margin-top:8px; padding:16px; } /* Status badge (HTML widget at top of form col) */ .mux-form-badge{ display:inline-flex; align-items:center; gap:8px; margin-bottom:8px; padding:6px 13px; background:var(--surface-0); border:1px solid var(--line); border-radius:999px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.5px; } .mux-form-badge .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6); } /* ══════════════════════════════════════════ §4 SERVICE TILES ══════════════════════════════════════════ */ .mux-tiles-sec{ background:var(--surface-1); border-block:1px solid var(--line); } .mux-tile{ position:relative; overflow:hidden; border-radius:var(--r-md) !important; border:1px solid var(--line); background-size:cover; background-position:center; filter:grayscale(100%) contrast(1.05); transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, filter .6s; aspect-ratio:3/4; } .mux-tile .elementor-image-box-img{ display:none !important; } .mux-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,14,0) 30%, rgba(12,12,14,.92) 100%); transition:background .5s; } .mux-tile:hover{ transform:translateY(-8px); filter:grayscale(0%); box-shadow:var(--sh-3), var(--glow); } .mux-tile:hover::after{ background:linear-gradient(180deg, rgba(255,45,155,.10) 0%, rgba(12,12,14,.94) 100%); } .mux-tile .elementor-image-box-content{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2; } .mux-tile .elementor-image-box-title{ font-family:var(--head) !important; color:#fff !important; font-size:18px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 7px !important; } .mux-tile .elementor-image-box-description{ color:#c7c7cc !important; font-size:13px !important; line-height:1.5; margin:0 !important; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s, opacity .4s; } .mux-tile:hover .elementor-image-box-description{ max-height:90px; opacity:1; } /* ══════════════════════════════════════════ §5 PROCESS STEPS (legacy .mux-step — kept for compatibility) ══════════════════════════════════════════ */ .mux-steps-sec{ background:var(--surface-0); } .mux-steps-sec .elementor-widget-heading h2{ color:var(--txt) !important; font-size:clamp(30px,4.5vw,46px) !important; font-weight:800 !important; margin-top:16px !important; } .mux-steps-grid{ position:relative; } .mux-steps-grid > .elementor-container::before{ content:""; position:absolute; top:54px; left:7%; right:7%; height:1px; z-index:0; background:linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent); } .mux-step{ position:relative; z-index:1; padding:30px 24px !important; overflow:hidden; background:var(--surface-1) !important; border:1px solid var(--line) !important; border-radius:var(--r-md) !important; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s; } .mux-step::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--pink), var(--pink-deep)); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); } .mux-step:hover{ transform:translateY(-7px); border-color:var(--pink-line) !important; background:var(--surface-2) !important; } .mux-step:hover::after{ transform:scaleX(1); } .mux-step-num{ font-family:var(--head); font-weight:800; font-size:40px; line-height:1; margin-bottom:16px; background:linear-gradient(135deg, var(--pink), var(--pink-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .mux-step h3{ font-family:var(--head); color:var(--txt); font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 9px; } .mux-step p{ color:var(--muted); font-size:14px; line-height:1.55; margin:0; } /* ══════════════════════════════════════════ §6 TIMEZONE / COVERAGE ══════════════════════════════════════════ */ .mux-tz-sec{ background:var(--surface-1); border-block:1px solid var(--line); position:relative; overflow:hidden; } .mux-tz-sec::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 70% 50%, transparent, var(--surface-1) 75%); pointer-events:none; } .mux-tz-sec > .elementor-container{ position:relative; z-index:1; } .mux-tz-sec .elementor-widget-heading h2{ color:var(--txt) !important; font-size:clamp(30px,4.5vw,46px) !important; font-weight:800 !important; margin-top:16px !important; } .mux-tz-point{ display:flex; gap:14px; padding:18px 20px !important; background:var(--surface-2) !important; border:1px solid var(--line) !important; border-left:2px solid var(--pink) !important; border-radius:var(--r-sm) !important; transition:transform .3s, border-color .3s; } .mux-tz-point:hover{ transform:translateX(5px); } .mux-tz-point p{ margin:0 !important; } .mux-tz-point strong{ display:block; color:var(--txt) !important; font-family:var(--head); font-weight:600; font-size:15px; margin-bottom:3px; } .mux-tz-point span{ color:var(--muted) !important; font-size:13px; } /* Orbit visual */ .mux-tz-visual{ position:relative; width:100%; aspect-ratio:1/1; max-width:380px; margin:0 auto; display:grid; place-items:center; overflow:hidden; } .mux-tz-glow{ position:absolute; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle, var(--pink-soft), transparent 65%); filter:blur(20px); } .mux-ring{ position:absolute; border-radius:50%; } .mux-ring.r1{ width:92%; height:92%; border:1px dashed rgba(255,45,155,.18); animation:muxspin 38s linear infinite reverse; } .mux-ring.r2{ width:68%; height:68%; border:1px solid rgba(255,255,255,.08); animation:muxspin 22s linear infinite; } .mux-ring.r3{ width:44%; height:44%; border:1px solid rgba(255,45,155,.14); } .mux-ring.r2::before{ content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--pink); box-shadow:0 0 16px rgba(255,45,155,.8); top:50%; left:-6px; transform:translateY(-50%); } .mux-ring.r1::after{ content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#5ab0ff; box-shadow:0 0 12px rgba(90,176,255,.7); top:-4px; left:50%; transform:translateX(-50%); } .mux-tz-core{ position:relative; z-index:2; width:34%; height:34%; border-radius:50%; display:grid; place-items:center; text-align:center; background:linear-gradient(135deg, var(--surface-3), var(--surface-1)); border:1px solid var(--line-2); box-shadow:var(--sh-2); } .mux-tz-core .big{ font-family:var(--head); font-weight:800; font-size:clamp(18px,3vw,26px); color:var(--txt); line-height:1; } .mux-tz-core .sm{ font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:5px; } @keyframes muxspin{ to{ transform:rotate(360deg); } } /* ══════════════════════════════════════════ §7 FINAL CTA ══════════════════════════════════════════ */ .mux-cta-sec{ position:relative; overflow:hidden; background:var(--surface-0); } .mux-cta-sec::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 60% 80% at 50% 120%, rgba(255,45,155,.12), transparent 60%); } .mux-cta-sec::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 60%, #000, transparent 70%); mask-image:radial-gradient(ellipse 50% 60% at 50% 60%, #000, transparent 70%); } .mux-cta-sec > .elementor-container{ position:relative; z-index:2; } .mux-cta-sec .elementor-widget-heading h2{ color:var(--txt) !important; font-size:clamp(32px,5.5vw,58px) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.03em !important; } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media (max-width:1024px){ .mux-steps-grid > .elementor-container::before{ display:none; } .mux-tile{ aspect-ratio:1/1; } } @media (max-width:767px){ .mux-hero{ min-height:auto; } .mux-hero-overlay{ padding:90px 20px; } .mux-form-card{ padding:24px !important; } .mux-tz-visual{ max-width:280px; } } /* ════════════════════════════════════════════════════════════════════ §8 HOW WE WORK — STEP CARDS FIX (2026-07-19) Moved out of the HTML widget's inline