.elementor-kit-5{--e-global-color-primary:#1057FF;--e-global-color-secondary:#0A0B2B;--e-global-color-text:#4A4C66;--e-global-color-accent:#0B45D6;--e-global-color-6b1cb84:#F5F7FF;--e-global-color-0a45458:#EEF3FF;--e-global-color-9d3550a:#E5E8F2;--e-global-color-73e5af6:#0A0A2E;--e-global-color-401d862:#7B7D95;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--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:"Inter";--e-global-typography-accent-font-weight:500;--e-global-color-theme_color_bg_color:#ffffff;--e-global-color-theme_color_bg_color_2:#ffffff;--e-global-color-theme_color_bd_color:#e9e9fc;--e-global-color-theme_color_title:#10082c;--e-global-color-theme_color_text:#645e76;--e-global-color-theme_color_meta:#0012f1;--e-global-color-theme_color_link:#0012f1;--e-global-color-theme_color_hover:#0012f1;--e-global-color-theme_color_alt_bg_color:#100C0B;--e-global-color-theme_color_alt_bg_color_2:#1F1A19;--e-global-color-theme_color_alt_bd_color:#3A3332;--e-global-color-theme_color_alt_title:#10082c;--e-global-color-theme_color_alt_text:#C9BFB6;--e-global-color-theme_color_alt_meta:#AEA7A1;--e-global-color-theme_color_alt_link:#0012f1;--e-global-color-theme_color_alt_hover:#0012f1;--e-global-typography-theme_font_p-font-family:"inherit";--e-global-typography-theme_font_p-font-size:16px;--e-global-typography-theme_font_p-font-weight:400;--e-global-typography-theme_font_p-text-transform:none;--e-global-typography-theme_font_p-font-style:normal;--e-global-typography-theme_font_p-line-height:1.625em;--e-global-typography-theme_font_p-letter-spacing:0px;--e-global-typography-theme_font_post-font-family:"inherit";--e-global-typography-theme_font_post-font-weight:inherit;--e-global-typography-theme_font_post-text-transform:inherit;--e-global-typography-theme_font_post-font-style:inherit;--e-global-typography-theme_font_post-text-decoration:inherit;--e-global-typography-theme_font_h1-font-family:"inherit";--e-global-typography-theme_font_h1-font-size:57px;--e-global-typography-theme_font_h1-font-weight:500;--e-global-typography-theme_font_h1-text-transform:none;--e-global-typography-theme_font_h1-font-style:normal;--e-global-typography-theme_font_h1-text-decoration:none;--e-global-typography-theme_font_h1-line-height:1.055em;--e-global-typography-theme_font_h1-letter-spacing:-0.03em;--e-global-typography-theme_font_h2-font-family:"inherit";--e-global-typography-theme_font_h2-font-size:47px;--e-global-typography-theme_font_h2-font-weight:500;--e-global-typography-theme_font_h2-text-transform:none;--e-global-typography-theme_font_h2-font-style:normal;--e-global-typography-theme_font_h2-text-decoration:none;--e-global-typography-theme_font_h2-line-height:1.045em;--e-global-typography-theme_font_h2-letter-spacing:-0.03em;--e-global-typography-theme_font_h3-font-family:"inherit";--e-global-typography-theme_font_h3-font-size:35px;--e-global-typography-theme_font_h3-font-weight:500;--e-global-typography-theme_font_h3-text-transform:none;--e-global-typography-theme_font_h3-font-style:normal;--e-global-typography-theme_font_h3-text-decoration:none;--e-global-typography-theme_font_h3-line-height:1.055em;--e-global-typography-theme_font_h3-letter-spacing:-0.03em;--e-global-typography-theme_font_h4-font-family:"inherit";--e-global-typography-theme_font_h4-font-size:28px;--e-global-typography-theme_font_h4-font-weight:500;--e-global-typography-theme_font_h4-text-transform:none;--e-global-typography-theme_font_h4-font-style:normal;--e-global-typography-theme_font_h4-text-decoration:none;--e-global-typography-theme_font_h4-line-height:1.145em;--e-global-typography-theme_font_h4-letter-spacing:-0.02em;--e-global-typography-theme_font_h5-font-family:"inherit";--e-global-typography-theme_font_h5-font-size:23px;--e-global-typography-theme_font_h5-font-weight:500;--e-global-typography-theme_font_h5-text-transform:none;--e-global-typography-theme_font_h5-font-style:normal;--e-global-typography-theme_font_h5-text-decoration:none;--e-global-typography-theme_font_h5-line-height:1.175em;--e-global-typography-theme_font_h5-letter-spacing:-0.02em;--e-global-typography-theme_font_h6-font-family:"inherit";--e-global-typography-theme_font_h6-font-size:19px;--e-global-typography-theme_font_h6-font-weight:500;--e-global-typography-theme_font_h6-text-transform:none;--e-global-typography-theme_font_h6-font-style:normal;--e-global-typography-theme_font_h6-text-decoration:none;--e-global-typography-theme_font_h6-line-height:1.265em;--e-global-typography-theme_font_h6-letter-spacing:-0.01em;--e-global-typography-theme_font_logo-font-family:"inherit";--e-global-typography-theme_font_logo-font-size:35px;--e-global-typography-theme_font_logo-font-weight:500;--e-global-typography-theme_font_logo-text-transform:none;--e-global-typography-theme_font_logo-font-style:normal;--e-global-typography-theme_font_logo-text-decoration:none;--e-global-typography-theme_font_logo-line-height:1.055em;--e-global-typography-theme_font_logo-letter-spacing:-0.03em;--e-global-typography-theme_font_button-font-family:"inherit";--e-global-typography-theme_font_button-font-size:16px;--e-global-typography-theme_font_button-font-weight:500;--e-global-typography-theme_font_button-text-transform:none;--e-global-typography-theme_font_button-font-style:normal;--e-global-typography-theme_font_button-text-decoration:none;--e-global-typography-theme_font_button-line-height:19px;--e-global-typography-theme_font_button-letter-spacing:0px;--e-global-typography-theme_font_input-font-family:"inherit";--e-global-typography-theme_font_input-font-size:15px;--e-global-typography-theme_font_input-font-weight:400;--e-global-typography-theme_font_input-text-transform:none;--e-global-typography-theme_font_input-font-style:normal;--e-global-typography-theme_font_input-text-decoration:none;--e-global-typography-theme_font_input-line-height:1.6em;--e-global-typography-theme_font_input-letter-spacing:0px;--e-global-typography-theme_font_info-font-family:"inherit";--e-global-typography-theme_font_info-font-size:14px;--e-global-typography-theme_font_info-font-weight:400;--e-global-typography-theme_font_info-text-transform:none;--e-global-typography-theme_font_info-font-style:normal;--e-global-typography-theme_font_info-text-decoration:none;--e-global-typography-theme_font_info-line-height:1.5em;--e-global-typography-theme_font_info-letter-spacing:0px;--e-global-typography-theme_font_menu-font-family:"inherit";--e-global-typography-theme_font_menu-font-size:16px;--e-global-typography-theme_font_menu-font-weight:500;--e-global-typography-theme_font_menu-text-transform:none;--e-global-typography-theme_font_menu-font-style:normal;--e-global-typography-theme_font_menu-text-decoration:none;--e-global-typography-theme_font_menu-line-height:1.5em;--e-global-typography-theme_font_menu-letter-spacing:0px;--e-global-typography-theme_font_submenu-font-family:"inherit";--e-global-typography-theme_font_submenu-font-size:15px;--e-global-typography-theme_font_submenu-font-weight:400;--e-global-typography-theme_font_submenu-text-transform:none;--e-global-typography-theme_font_submenu-font-style:normal;--e-global-typography-theme_font_submenu-text-decoration:none;--e-global-typography-theme_font_submenu-line-height:1.4em;--e-global-typography-theme_font_submenu-letter-spacing:0px;font-family:"Inter", Sans-serif;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#0A4DFA;font-family:"Inter", Sans-serif;color:#FFFFFF;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#2D68FF;color:#FFFFFF;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1345px;}.e-con{--container-max-width:1345px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.sc_layouts_title_caption{display:var(--page-title-display);}@media(max-width:1279px){.elementor-kit-5{--e-global-typography-theme_font_h1-font-size:45px;--e-global-typography-theme_font_h2-font-size:36px;--e-global-typography-theme_font_h3-font-size:28px;--e-global-typography-theme_font_h4-font-size:22px;--e-global-typography-theme_font_h5-font-size:20px;--e-global-typography-theme_font_h6-font-size:18px;--e-global-typography-theme_font_logo-font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-theme_font_p-font-size:15px;--e-global-typography-theme_font_h1-font-size:36px;--e-global-typography-theme_font_h2-font-size:31px;--e-global-typography-theme_font_h3-font-size:26px;--e-global-typography-theme_font_h5-font-size:19px;--e-global-typography-theme_font_h6-font-size:17px;--e-global-typography-theme_font_logo-font-size:26px;--e-global-typography-theme_font_button-font-size:15px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================================== ManPack AI — Global Design System Override for Elementor Pro Paste into: Elementor → Site Settings → Custom CSS (loads last, wins) Do NOT put in child theme style.css — Elementor kit CSS loads after it. -------------------------------------------------------------------------- 1. Tokens 2. Font loading (Inter) 3. Base + Elementor resets 4. Typography scale (forces Figma over Elementor defaults) 5. Links — animated underline 6. Buttons — Figma spec + clean glow hover 7. Forms 8. Cards / eyebrows / badges (repeating Figma patterns) 9. Dark sections 10. Layout, spacing, a11y, reduced motion ========================================================================== */ /* ---------- 1. TOKENS ---------------------------------------------------- */ /* Replace the 8 values in this block with the exact hexes from Figma Dev Mode. Everything else in this file derives from them — never hardcode again. */ :root { /* Brand */ --mp-blue: #1057FF; /* primary CTA / links / accent */ --mp-blue-600: #0B45D6; /* hover fill */ --mp-blue-050: #EEF3FF; /* tinted surfaces, badges */ --mp-blue-rgb: 16, 87, 255; /* Ink */ --mp-ink: #0A0B2B; /* headings */ --mp-body: #4A4C66; /* paragraphs */ --mp-muted: #7B7D95; /* captions, meta */ /* Surfaces */ --mp-bg: #FFFFFF; --mp-surface: #F5F7FF; /* alt section background */ --mp-navy: #0A0A2E; /* footer / dark bands */ --mp-border: #E5E8F2; /* Type */ --mp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mp-tracking-xl: -0.05em; /* = -3.5px @ 70px, but scales correctly */ --mp-tracking-lg: -0.035em; --mp-tracking-md: -0.02em; /* Radii */ --mp-radius-btn: 30px; --mp-radius-card: 16px; --mp-radius-media: 20px; /* Motion */ --mp-ease: cubic-bezier(.22, .61, .36, 1); --mp-dur: .28s; /* Rhythm */ --mp-section-y: clamp(64px, 7vw, 120px); --mp-container: 1200px; } /* ---------- 2. FONT ------------------------------------------------------ */ /* Recommended: self-host Inter variable, upload the .woff2 to /wp-content/uploads/fonts/ and turn OFF Elementor's Google Fonts (Settings → Advanced → Google Fonts: Disable). Saves ~200ms TTFB on the SG edge and removes the third-party request. */ @font-face { font-family: "Inter"; src: url("/wp-content/uploads/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- 3. BASE + ELEMENTOR RESETS ----------------------------------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, body.elementor-page, .elementor-widget, .elementor-widget-container { font-family: var(--mp-font); color: var(--mp-body); font-feature-settings: "cv11", "ss01"; /* Inter's single-storey a + alt 1 */ font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Elementor injects margins on the last child of text widgets — kill it */ .elementor-widget-text-editor p:last-child, .elementor-widget-theme-post-content p:last-child { margin-bottom: 0; } /* Kill the default 15px/1.3 Elementor inherits from theme resets */ .elementor-widget-text-editor, .elementor-widget-theme-post-content, .elementor-widget-post-info, .elementor-widget-icon-list { font-size: 16px; line-height: 24px; letter-spacing: 0; font-weight: 400; } img { border-radius: inherit; } /* ---------- 4. TYPOGRAPHY SCALE ------------------------------------------ */ /* Figma H1 = Inter 600 / 70px / 80px / -3.5px. Tracking is em-based so it stays proportional when the clamp shrinks the size on mobile — a fixed -3.5px at 36px would visually collide. */ h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: var(--mp-font); color: var(--mp-ink); font-weight: 600; margin: 0; text-wrap: balance; } h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(38px, 5.2vw, 70px); line-height: 1.143; /* 80/70 */ letter-spacing: var(--mp-tracking-xl); } h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.167; letter-spacing: var(--mp-tracking-lg); } h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; letter-spacing: var(--mp-tracking-lg); } h4, .elementor-widget-heading h4.elementor-heading-title { font-size: 24px; line-height: 32px; letter-spacing: var(--mp-tracking-md); } h5, .elementor-widget-heading h5.elementor-heading-title { font-size: 20px; line-height: 28px; letter-spacing: var(--mp-tracking-md); } h6, .elementor-widget-heading h6.elementor-heading-title { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; } /* Accent word inside a heading — "AI cold-calling", "Partnership" */ .elementor-heading-title .mp-accent, .mp-accent { color: var(--mp-blue); } /* Body roles */ .mp-lead { font-size: 18px; line-height: 28px; color: var(--mp-body); } .mp-body { font-size: 16px; line-height: 24px; color: var(--mp-body); } .mp-small { font-size: 14px; line-height: 20px; color: var(--mp-muted); } .mp-caption { font-size: 12px; line-height: 18px; color: var(--mp-muted); letter-spacing: .01em; } /* Section intro paragraph under a centred H2 */ .mp-section-intro { max-width: 620px; margin-inline: auto; text-align: center; font-size: 16px; line-height: 24px; color: var(--mp-muted); } /* ---------- 5. LINKS — ANIMATED UNDERLINE -------------------------------- */ /* Uses background-size so it works across line wraps (a ::after scaleX breaks on a two-line inline link). Sits on the text baseline, not the box. */ a { color: var(--mp-blue); text-decoration: none; } .elementor-widget-text-editor a, .elementor-widget-theme-post-content a, .elementor-widget-heading a, .elementor a.mp-link, .elementor-nav-menu .elementor-item, .elementor-widget-wp-widget-nav_menu a, footer a, .mp-underline { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; padding-bottom: 2px; text-decoration: none; transition: background-size var(--mp-dur) var(--mp-ease), color var(--mp-dur) var(--mp-ease); } .elementor-widget-text-editor a:hover, .elementor-widget-theme-post-content a:hover, .elementor-widget-heading a:hover, .elementor a.mp-link:hover, .elementor-nav-menu .elementor-item:hover, .elementor-nav-menu .elementor-item.elementor-item-active, .elementor-widget-wp-widget-nav_menu a:hover, footer a:hover, .mp-underline:hover { background-size: 100% 1.5px; } /* Right-to-left retract on mouse-out feels sharper than snapping back */ .elementor-nav-menu .elementor-item { background-position: 100% 100%; } .elementor-nav-menu .elementor-item:hover, .elementor-nav-menu .elementor-item.elementor-item-active { background-position: 0 100%; } /* Elementor's own nav "pointer" would double up — set widget Pointer = None, this hard-disables it as a safety net */ .elementor-nav-menu--main .elementor-item:before, .elementor-nav-menu--main .elementor-item:after { display: none !important; } /* Never underline anything that is actually a button or an image link */ .elementor-button, .elementor-button:hover, .elementor-widget-image a, .mp-card a, .elementor-post__thumbnail__link { background-image: none; } /* Arrow link — "Read Case Study ↗", "Talk to sales ↗" */ .mp-link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; } .mp-link-arrow svg, .mp-link-arrow i { transition: transform var(--mp-dur) var(--mp-ease); } .mp-link-arrow:hover svg, .mp-link-arrow:hover i { transform: translate(2px, -2px); } /* ---------- 6. BUTTONS --------------------------------------------------- */ /* SPLIT INTO TWO BLOCKS ON PURPOSE: 6a — Figma defaults wrapped in :where() → specificity 0. Any size, padding, radius or type you set in the Elementor widget's Style tab wins over these. They only apply to buttons you haven't touched. 6b — Behaviour (glow, transition, icon gap). Normal specificity, so the hover effect lands on every button regardless of its dimensions. */ /* --- 6a. Defaults only — never forced */ :where(.elementor-button, .elementor-button-link, .elementor-field-type-submit button, .mp-btn) { padding: 10px 20px; border-radius: var(--mp-radius-btn); font-size: 14px; line-height: 20px; /* 10 + 20 + 10 = 40px tall */ font-weight: 600; letter-spacing: -0.01em; } /* --- 6b. Structure + behaviour — applies to all buttons, any size */ .elementor-button, .elementor-button-link, .elementor-field-type-submit button, .mp-btn { --mp-btn-bg: var(--mp-blue); --mp-btn-fg: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; background-color: var(--mp-btn-bg); color: var(--mp-btn-fg); font-family: var(--mp-font); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; /* clips the sheen */ isolation: isolate; box-shadow: 0 1px 2px rgba(var(--mp-blue-rgb), .12); transition: box-shadow .32s var(--mp-ease), transform .32s var(--mp-ease), background-color .32s var(--mp-ease); } /* Elementor wraps the label + icon; zero its default icon margin so gap:4px rules */ .elementor-button .elementor-button-content-wrapper { display: contents; } .elementor-button .elementor-button-icon { margin: 0 !important; display: inline-flex; } .elementor-button .elementor-button-text { flex-grow: 0; } /* Glow: two flat rings, no blur — matches the Figma render exactly. A blurred drop shadow underneath muddies the ring edge into a blob. */ .elementor-button:hover, .elementor-button:focus-visible, .mp-btn:hover, .mp-btn:focus-visible { background-color: var(--mp-blue-600); transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(var(--mp-blue-rgb), .22), 0 0 0 14px rgba(var(--mp-blue-rgb), .09); } .elementor-button:active, .mp-btn:active { transform: translateY(0); transition-duration: .08s; } .elementor-button::before, .mp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--mp-ease); } .elementor-button:hover::before, .mp-btn:hover::before { transform: translateX(120%); } /* --- Variant: secondary / outline ("Talk to sales", "Book a demo" on light) */ .mp-btn--outline, .elementor-button.mp-btn--outline { --mp-btn-bg: #FFFFFF; --mp-btn-fg: var(--mp-ink); border-color: var(--mp-border); box-shadow: 0 1px 2px rgba(10, 11, 43, .06); } .mp-btn--outline:hover, .elementor-button.mp-btn--outline:hover { --mp-btn-bg: #FFFFFF; border-color: rgba(var(--mp-blue-rgb), .45); box-shadow: 0 0 0 6px rgba(var(--mp-blue-rgb), .14), 0 0 0 14px rgba(var(--mp-blue-rgb), .05); } /* --- Variant: white on the blue CTA band ("Book a demo") */ .mp-btn--invert, .elementor-button.mp-btn--invert { --mp-btn-bg: #FFFFFF; --mp-btn-fg: var(--mp-blue); } .mp-btn--invert:hover, .elementor-button.mp-btn--invert:hover { --mp-btn-bg: #FFFFFF; box-shadow: 0 0 0 6px rgba(255, 255, 255, .26), 0 0 0 14px rgba(255, 255, 255, .10); } /* --- Variant: large (hero / CTA band) — also :where(), so the widget wins */ :where(.mp-btn--lg, .elementor-button.mp-btn--lg) { padding: 14px 28px; font-size: 16px; line-height: 24px; } /* ---------- 7. FORMS ----------------------------------------------------- */ .elementor-field-group .elementor-field, .elementor-field-textual, .elementor-form .elementor-field-textual { font-family: var(--mp-font); font-size: 16px; line-height: 24px; color: var(--mp-ink); background: #FFFFFF; border: 1px solid var(--mp-border); border-radius: 10px; padding: 12px 16px; transition: border-color var(--mp-dur) var(--mp-ease), box-shadow var(--mp-dur) var(--mp-ease); } .elementor-field-textual::placeholder { color: var(--mp-muted); opacity: 1; } .elementor-field-textual:focus { outline: none; border-color: var(--mp-blue); box-shadow: 0 0 0 4px rgba(var(--mp-blue-rgb), .14); } .elementor-field-group > label.elementor-field-label { font-size: 14px; font-weight: 500; color: var(--mp-ink); margin-bottom: 6px; } /* ---------- 8. CARDS / EYEBROWS / BADGES --------------------------------- */ /* Eyebrow: "• Try Our Live Demo", "• Sub-Header/Title Here" */ .mp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mp-blue); letter-spacing: -0.01em; } .mp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .mp-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--mp-blue-050); color: var(--mp-blue); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .01em; } .mp-card { background: #FFFFFF; border: 1px solid var(--mp-border); border-radius: var(--mp-radius-card); padding: 24px; transition: transform var(--mp-dur) var(--mp-ease), box-shadow var(--mp-dur) var(--mp-ease), border-color var(--mp-dur) var(--mp-ease); } .mp-card:hover { transform: translateY(-2px); border-color: rgba(var(--mp-blue-rgb), .28); box-shadow: 0 16px 40px -20px rgba(10, 11, 43, .28); } /* Blog/resource loop cards */ .elementor-post, .elementor-posts .elementor-post__card { border-radius: var(--mp-radius-card); overflow: hidden; } .elementor-post__thumbnail { border-radius: 12px; } .elementor-post__title, .elementor-post__title a { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--mp-ink); letter-spacing: var(--mp-tracking-md); } .elementor-post__excerpt p { font-size: 14px; line-height: 22px; color: var(--mp-muted); } .elementor-post__meta-data, .elementor-post__badge { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-blue); } /* ---------- 9. DARK SECTIONS --------------------------------------------- */ /* Add class "mp-dark" to the Elementor Container for footer / navy bands / the blue CTA strip — it re-points the tokens instead of restyling children */ .mp-dark { --mp-ink: #FFFFFF; --mp-body: rgba(255, 255, 255, .78); --mp-muted: rgba(255, 255, 255, .60); --mp-border: rgba(255, 255, 255, .14); color: var(--mp-body); } .mp-dark h1, .mp-dark h2, .mp-dark h3, .mp-dark h4, .mp-dark h5, .mp-dark h6, .mp-dark .elementor-heading-title { color: #FFFFFF; } .mp-dark a, .mp-dark .elementor-nav-menu .elementor-item { color: rgba(255, 255, 255, .82); } .mp-dark a:hover { color: #FFFFFF; } .mp-dark .mp-eyebrow { color: rgba(255, 255, 255, .82); } /* ---------- 10. LAYOUT, A11Y, MOTION ------------------------------------- */ .e-con.e-parent > .e-con-inner, .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--mp-container); } .mp-section { padding-block: var(--mp-section-y); } .mp-section--tint { background: var(--mp-surface); } /* Rounded media, matching Figma's 20px image corners */ .elementor-widget-image img, .elementor-widget-video .elementor-wrapper { border-radius: var(--mp-radius-media); } /* Visible keyboard focus everywhere — Elementor ships none */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mp-blue); outline-offset: 3px; border-radius: 4px; } /* Scroll-reveal helper: add class mp-reveal, toggle mp-reveal--in with the Elementor "Motion Effects → Entrance Animation" alternative below */ .mp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--mp-ease), transform .6s var(--mp-ease); } .mp-reveal--in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .elementor-button:hover, .mp-btn:hover, .mp-card:hover { transform: none; } } /* Mobile: Figma's -3.5px tracking is already handled by em units, but the hero needs a tighter leading floor so 3 lines don't tower */ @media (max-width: 767px) { h1, .elementor-widget-heading h1.elementor-heading-title { line-height: 1.1; } .mp-card { padding: 20px; } } /* ---------- 11. THEME PALETTE OVERRIDE ----------------------------------- */ /* The theme's scheme_default block ships an orange link/hover pair. Custom properties cascade like any other declaration, so redefining them on the same .elementor-kit-5 with !important repoints every rule that consumes them — no need to hunt down the individual link .elementor-kit-5s. */ .scheme_default, body.scheme_default, .scheme_default:where(.editor-styles-wrapper), .scheme_dark, body.scheme_dark { --theme-color-link: #1057FF !important; --theme-color-hover: #0B45D6 !important; --theme-color-link_07: rgba(16, 87, 255, 0.7) !important; --theme-color-link_blend: #3B74FF !important; /* Dark contexts: #1057FF on #100C0B lands at ~2.4:1 and is unreadable. These are the same hue lifted for contrast (~7:1). Swap both to #1057FF / #0B45D6 if you want flat brand blue and will accept that. */ --theme-color-alt_link: #7DA4FF !important; --theme-color-alt_hover: #FFFFFF !important; }/* End custom CSS */