.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#2563EB;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* * Stackborne — Elementor Global CSS * Paste this into: Elementor → Site Settings → Custom CSS * Last updated: 2026-05-30 * * Sections: * 1. Fonts * 2. Design tokens (dark mode defaults) * 3. Light mode tokens * 4. Base resets * 5. WordPress / Elementor overrides * 6. Buttons * 7. Links * 8. Light mode component overrides * 9. Accessibility (focus-visible, skip link) */ /* ════════════════════════════════════════ 1. FONTS NOTE: Do NOT use @font-face with hardcoded fonts.gstatic.com URLs — Google changes those paths and they 404. Load fonts via Elementor's font manager or the Google Fonts tag in the theme instead. The font stacks below fall back to system fonts if not loaded externally. ════════════════════════════════════════ */ /* ════════════════════════════════════════ 2. DESIGN TOKENS — DARK MODE (DEFAULT) ════════════════════════════════════════ */ :root { /* Brand */ --primary: #2563EB; --primary-light: #3B82F6; --primary-hover: #1D4ED8; --primary-tint: rgba(37,99,235,0.14); /* Ink (text) */ --ink: #F1F5F9; /* body text */ --ink-2: #94A3B8; /* secondary text */ --ink-3: #7F93AE; /* tertiary / labels */ --heading: #E2E8F0; /* card headings — readable but not harsh */ /* Canvas (backgrounds) */ --canvas: #0D1524; /* page bg */ --surface: #131E30; /* card bg */ --surface-2: #192840; /* hover bg / inputs */ --surface-3: #1F3150; /* deeper hover */ /* Borders */ --border: #243654; --border-2: #2A3E60; /* Navigation */ --nav-bg: rgba(8,13,26,0.88); /* Semantic */ --success: #10B981; --danger: #EF4444; /* Accents */ --purple: #7C3AED; --purple-light: #A78BFA; --cyan: #06B6D4; /* Border radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px; /* Layout */ --max-w: 1200px; } @media (min-width: 1440px) { :root { --max-w: 1340px; } } @media (min-width: 1920px) { :root { --max-w: 1640px; } } @media (min-width: 2560px) { :root { --max-w: 1880px; } } /* ════════════════════════════════════════ 3. DESIGN TOKENS — LIGHT MODE Uses html[data-theme="light"] (spec. 0,1,1) which beats :root (0,1,0) even when injected later by Elementor. ════════════════════════════════════════ */ html[data-theme="light"] { --canvas: #F0EFEB; --surface: #F9F8F5; --surface-2: #ECEAE4; --surface-3: #E3DFD8; --border: #D2CFC7; --border-2: #BDBAB1; --ink: #1A1814; --ink-2: #3D3A32; --ink-3: #6E6B61; --heading: #1A1814; --primary-light: #1D4ED8; --primary-tint: rgba(37,99,235,0.08); --nav-bg: rgba(240,239,235,0.94); --success: #047857; } /* ════════════════════════════════════════ 4. BASE RESETS ════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: hidden; } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--canvas); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', system-ui, sans-serif; font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; color: var(--heading); } a { color: inherit; text-decoration: none; } a:visited { color: inherit; } /* ════════════════════════════════════════ 5. WORDPRESS / ELEMENTOR OVERRIDES ════════════════════════════════════════ */ /* Prevent WP from adding hover colour to buttons */ .elementor-button:hover, .elementor-button:focus { color: inherit; } /* Strip WP link decoration that can leak into nav / cards */ .elementor-nav-menu a, .elementor-nav-menu a:hover { text-decoration: none; } /* ════════════════════════════════════════ 6. BUTTONS ════════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; font-size: 15px; font-weight: 700; color: #fff !important; background: var(--primary) !important; border: none; border-radius: var(--r-lg); text-decoration: none; cursor: pointer; font-family: inherit; transition: background 0.18s, transform 0.15s; } .btn-primary:hover { background: var(--primary-hover) !important; transform: translateY(-1px); color: #fff !important; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; font-size: 15px; font-weight: 700; color: var(--ink-2) !important; background: transparent !important; border: 1px solid var(--border-2); border-radius: var(--r-lg); text-decoration: none; cursor: pointer; font-family: inherit; transition: color 0.18s, border-color 0.18s, transform 0.15s; } .btn-ghost:hover { color: var(--ink) !important; border-color: var(--border-2); background: var(--surface-2) !important; transform: translateY(-1px); } /* AI variant (used on automations / AI strategy pages) */ .btn-ai { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, var(--purple) 0%, var(--primary) 100%) !important; color: #fff !important; border: none; border-radius: var(--r-lg); text-decoration: none; cursor: pointer; font-family: inherit; transition: opacity 0.18s, transform 0.15s; } .btn-ai:hover { opacity: 0.88; transform: translateY(-1px); } /* Outline variant */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; font-size: 15px; font-weight: 700; color: var(--primary-light); background: var(--primary-tint) !important; border: 1px solid rgba(37,99,235,0.3); border-radius: var(--r-lg); text-decoration: none; cursor: pointer; font-family: inherit; transition: background 0.18s, border-color 0.18s, transform 0.15s; } .btn-outline:hover { background: rgba(37,99,235,0.22) !important; border-color: rgba(37,99,235,0.45); transform: translateY(-1px); } /* FAQ + theme toggle — Elementor's global button:hover injects pink background */ .faq-q { background: transparent !important; } .faq-q:hover { background: var(--surface-2) !important; } .faq-close { background: transparent !important; } .faq-close:hover { background: var(--surface-2) !important; } .faq-fab { background: var(--primary) !important; color: #fff !important; } .faq-fab:hover { background: var(--primary-hover) !important; } .theme-toggle { background: var(--surface-2) !important; color: var(--ink-2) !important; } .theme-toggle:hover { background: var(--surface-3) !important; color: var(--ink) !important; } /* ════════════════════════════════════════ 7. SERVICE CARD HOVER HEADLINES (dark mode — bright accents on dark surfaces) ════════════════════════════════════════ */ .service-card.blue:hover h3 { color: #60A5FA; transition: color 0.2s; } .service-card.purple:hover h3 { color: #A78BFA; transition: color 0.2s; } .service-card.cyan:hover h3 { color: #67E8F9; transition: color 0.2s; } /* ════════════════════════════════════════ 8. LIGHT MODE — COMPONENT OVERRIDES ════════════════════════════════════════ */ /* Ghost button border legible on light bg */ html[data-theme="light"] .btn-ghost { color: var(--ink-2); border-color: var(--border-2); } html[data-theme="light"] .btn-ghost:hover { color: var(--ink); border-color: rgba(15,23,42,0.25); } /* Nav mobile shadow */ html[data-theme="light"] .nav-mobile { box-shadow: 0 8px 24px rgba(0,0,0,0.10); } html[data-theme="light"] .nav-dropdown-panel { box-shadow: 0 8px 32px rgba(0,0,0,0.12); } /* Hero grid — subtle blue tint instead of white */ html[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px); } /* Service card hover glows — softer on light bg */ html[data-theme="light"] .service-card.blue::before { background: radial-gradient(ellipse, rgba(37,99,235,0.08) 0%, transparent 70%); } html[data-theme="light"] .service-card.purple::before { background: radial-gradient(ellipse, rgba(124,58,237,0.07) 0%, transparent 70%); } html[data-theme="light"] .service-card.cyan::before { background: radial-gradient(ellipse, rgba(6,182,212,0.07) 0%, transparent 70%); } html[data-theme="light"] .service-card:hover { border-color: var(--primary-light); } /* Service card hover headlines — bright tones too faint on white */ html[data-theme="light"] .service-card.blue:hover h3 { color: #1D4ED8; } html[data-theme="light"] .service-card.purple:hover h3 { color: #5B21B6; } html[data-theme="light"] .service-card.cyan:hover h3 { color: #0E7490; } /* Accent links — #3B82F6 is 3.0:1 on white, fails for small text */ html[data-theme="light"] .case-footer-link { color: var(--primary-light); } html[data-theme="light"] .tool-link { color: var(--primary-light); } html[data-theme="light"] .service-link { color: var(--primary-light); } /* Danger tag — #F87171 is only 2.67:1 on light bg */ html[data-theme="light"] .position-card-tag.no { color: #B91C1C; border-color: rgba(185,28,28,0.22); background: rgba(185,28,28,0.07); } /* ════════════════════════════════════════ 9. ACCESSIBILITY ════════════════════════════════════════ */ /* Skip link — visible to screen readers only, never shown visually */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Keyboard focus indicator */ :focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; border-radius: 4px; } .btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-ai:focus-visible, .btn-outline:focus-visible { outline-offset: 4px; } .nav-link:focus-visible { outline-offset: 2px; } /* Suppress outline on mouse clicks — only show for keyboard */ .btn-primary:focus:not(:focus-visible), .btn-ghost:focus:not(:focus-visible), .btn-ai:focus:not(:focus-visible), .btn-outline:focus:not(:focus-visible), .nav-link:focus:not(:focus-visible) { outline: none; }/* End custom CSS */