:root{ /* Brand palette */ --brand-navy:#0F172A; --brand-teal:#273272; --accent:#2563eb; --white:#FFFFFF; /* Defaults (primary = Navy; switch to Teal with .theme-teal on ) */ --brand: var(--brand-navy); --ink: var(--brand-navy); --bg: var(--white); --muted:#5B616B; --radius:14px; --container:min(1100px, 92vw); /* If theme.json is present, use its presets when available */ --brand: var(--wp--preset--color--primary-navy, var(--brand-navy)); --accent: var(--wp--preset--color--accent-lime, #10B981); } body{ overflow-x: hidden; } /* assets/css/eas-smooth.css */ html { scroll-behavior: smooth; } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Make anchors stop below your sticky header (adjustable) */ :root { --eas-scroll-offset: 96px; } /* change to your header height */ [id] { scroll-margin-top: var(--eas-scroll-offset); } /* Optional: switch primary to Teal by adding class "theme-teal" to */ .theme-teal{ --brand: var(--wp--preset--color--primary-teal, var(--brand-teal)); } *{box-sizing:border-box} body{margin:0; color:var(--ink); background:var(--bg)} .container{width:var(--container); margin-inline:auto; padding-inline: 12px;} .site-header{background:#fff; border-bottom:1px solid #e9eef6} .site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 12px} .brand .site-title{font-weight:800; text-decoration:none; color:var(--ink); font-size:1.25rem} .site-tagline{margin:4px 0 0; color:var(--muted); font-size:.9rem} .nav-toggle{display:none; width:42px; height:42px; border:1px solid #e3e7ef; background:#fff; border-radius:10px} .nav-toggle span{display:block; width:20px; height:2px; margin:0 auto; background:var(--ink); position:relative} .nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)} .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} .site-nav ul{list-style:none; padding:0; margin:0; display:flex; gap:18px} .site-nav a{text-decoration:none; color:var(--ink); padding:8px 10px; border-radius:8px} .site-nav a:hover{background:#f0f4fa} @media (max-width:900px){ .nav-toggle{display:block} .site-nav{display:none; position:absolute; top:70px; left:0; right:0; background:#fff; border-bottom:1px solid #e9eef6} .site-nav.open{display:block} .site-nav ul{flex-direction:column; gap:0} .site-nav a{display:block; padding:14px 16px} } /* Cards grid */ .posts-grid, .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} @media (max-width:900px){ .posts-grid, .cards{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .posts-grid, .cards{grid-template-columns:1fr} } .card{background:#fff; border:1px solid #e9eef6; border-radius:16px; overflow:hidden} .card .thumb img, .thumb.placeholder{display:block; width:100%; height:220px; object-fit:cover; background:#dde7f5} .card-body{padding:14px} .card-title{margin:6px 0 8px; font-size:1.05rem} .card-meta{color:var(--muted); font-size:.85rem; margin-bottom:8px} .btn-small{padding:8px 12px; border-radius:8px; font-size:.9rem} /* Footer */ .site-footer{background:#0f1720; color:#e6eef8; padding:30px 0; margin-top:40px} .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px} .footer-menu{list-style:none; padding:0; margin:0} .footer-menu li a{color:#e6eef8; text-decoration:none} @media(max-width:900px){ .footer-grid{grid-template-columns:1fr} } /* 404 */ .not-found{padding:60px 0; text-align:center} div.wpforms-container-full .wpforms-form .wpforms-pagebreak-left .wpforms-page-button { margin: 0 10px 0 0; display: inline-flex; align-items: center; justify-content: center; padding: 7px 22px; border-radius: 999px; text-decoration: none; background: var(--covu-gold); color: #fff; font-weight: 700; border: 1px solid rgba(0, 0, 0, .06); white-space: nowrap; } /* ===== Accessibility */ .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#111;color:#fff;padding:10px 14px;border-radius:10px;z-index:10000} /* Utility bar uses brand color on dark */ .eas-util{background:var(--brand); color:#D9FBEA;} .eas-link{color:#CFFAE3;} /* Glass header keeps white, but hover/focus use brand tints */ .eas-nav a:hover{background:rgba(15,23,42,.06);} /* brand-navy tint; good with teal too */ .current-menu-item>a,.current_page_item>a{color:var(--brand);} /* CTA = Lime */ .eas-btn{ background:var(--accent); color:#06291B; /* accessible text on lime */ box-shadow:0 8px 22px rgba(16,185,129,.28); } .eas-btn:hover{transform:translateY(-1px);} .eas-btn:focus{outline:2px solid #064E3B; outline-offset:2px;} /* deep green focus */ /* Hamburger uses brand-colored bars */ .eas-hamburger span, .eas-hamburger span::before, .eas-hamburger span::after{ background: var(--brand); } /* Drawer links */ #mobile-menu li a:hover{background:rgba(15,23,42,.06);} /* ===== Utility bar */ .eas-util{background:#0f1720;color:#cfe2ff;font-size:.9rem} .eas-util .container{display:flex;align-items:center;justify-content:space-between;padding:8px 12px} .eas-link{color:#cfe2ff;text-decoration:none} .eas-link:hover{opacity:.9} .eas-dot{display:inline-block;width:4px;height:4px;background:#5b616b;border-radius:99px;margin:0 10px} /* ===== Header */ .eas-header{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid #e9eef6;transition:all .25s ease} .eas-header.is-scrolled{background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(16,24,40,.07)} .eas-header__row{display:flex;align-items:center;justify-content:space-between;gap:16px; padding: clamp(14px, 2vw, 20px);} .eas-brand img{height:40px;width:auto} .eas-site-title{font-weight:800;text-decoration:none;color:var(--ink);font-size:1.2rem} /* Desktop nav */ .eas-nav{display:none} .eas-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0} .eas-nav a{display:inline-block;padding:10px 8px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600} .eas-nav a:hover{background:#eff4ff} .eas-nav .menu-item-has-children{position:relative} .eas-nav .sub-menu{position:absolute;left:0;top:110%;min-width:220px;background:#fff;border:1px solid #e9eef6;border-radius:14px;box-shadow:0 16px 40px rgba(16,24,40,.12);padding:8px;display:none} .eas-nav .menu-item-has-children:hover>.sub-menu, .eas-nav .menu-item-has-children:focus-within>.sub-menu{display:block} .eas-nav .sub-menu a{padding:10px 12px;border-radius:10px;display:block} .current-menu-item>a,.current_page_item>a{color:var(--blue)} /* CTA + Hamburger */ .eas-cta{display:flex;align-items:center;gap:12px} .eas-btn{background:var(--teal);color:#0e1b22;text-decoration:none;padding:10px 14px;border-radius:12px;font-weight:800;box-shadow:0 6px 20px rgba(31,177,169,.25)} .eas-btn:hover{transform:translateY(-1px)} .eas-btn--full{display:block;text-align:center;margin-top:10px} .eas-hamburger{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #e3e7ef;background:#fff;border-radius:12px} .eas-hamburger span, .eas-hamburger span::before, .eas-hamburger span::after{content:"";display:block;width:20px;height:2px;background:#0f1720;border-radius:2px;transition:.25s} .eas-hamburger span::before{transform:translateY(-6px)} .eas-hamburger span::after{transform:translateY(6px)} .eas-hamburger.is-active span{background:transparent} .eas-hamburger.is-active span::before{transform:translateY(0) rotate(45deg)} .eas-hamburger.is-active span::after{transform:translateY(0) rotate(-45deg)} /* Mobile drawer */ .eas-overlay{position:fixed;inset:0;background:rgba(15,23,32,.5);backdrop-filter:blur(2px);z-index:998;opacity:0;transition:opacity .25s} .eas-overlay.is-open{opacity:1} .eas-drawer{position:fixed;inset:0 0 0 auto;width:min(88vw, 380px);background:#fff;z-index:999;transform:translateX(100%);transition:transform .25s;border-left:1px solid #e9eef6;display:flex;flex-direction:column} .eas-drawer.is-open{transform:translateX(0)} .eas-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e9eef6} .eas-close{font-size:28px;line-height:1;background:#fff;border:1px solid #e3e7ef;border-radius:10px;width:42px;height:42px} .eas-drawer__body{padding:10px 16px 24px;overflow:auto} #mobile-menu{list-style:none;padding:0;margin:0} #mobile-menu li a{display:block;padding:14px 10px;color:#0f1720;text-decoration:none;border-radius:10px} #mobile-menu .menu-item-has-children > a{font-weight:700} #mobile-menu .sub-menu{list-style:none;margin:6px 0 8px 8px;padding-left:10px;border-left:2px solid #e9eef6} /* Search (drawer) */ .eas-search{display:flex;gap:8px;margin-top:14px} .eas-search input{flex:1;padding:10px 12px;border:1px solid #dfe6f2;border-radius:10px} .eas-search button{padding:10px 12px;border-radius:10px;border:1px solid #dfe6f2;background:#f7fbff} /* Layout breakpoints */ @media (min-width: 1024px){ .eas-hamburger{display:none} .eas-nav{display:block} .eas-btn{padding:12px 16px} } /* Optional: dark-mode polish */ @media (prefers-color-scheme: dark){ .eas-util{background:#0b1220;color:#bcd3ff} .eas-header{background:rgba(16,24,40,.55);border-color:#22314a} .eas-nav a:hover{background:#131c2c} .eas-drawer{background:#0f1720;color:#e6eef8} #mobile-menu li a{color:#e6eef8} .eas-search input,.eas-search button{border-color:#263043;background:#0f1720;color:#e6eef8} } /* ========================= HEADER COLOR + CTA FIX ========================= */ /* Solid light header (default) */ body .eas-header{ background:#ffffff; /* was transparent/glassy; now solid */ border-bottom:1px solid #e9eef6; backdrop-filter:none; } /* Menu/link colors on light surface */ body .eas-nav a{ color: var(--brand, #0F172A); } body .eas-nav a:hover{ background: rgba(15,23,42,.06); } body .current-menu-item > a, body .current_page_item > a{ color: var(--accent, #10B981); } /* CTA button – reset & harden styles */ body .eas-btn, body .eas-btn:visited{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; background: #2563eb; color:#fff; text-decoration:none; border:0; border-radius:12px; font-weight:800; line-height:1; cursor:pointer; box-shadow:none; /* remove the green glow that looked “broken” */ transition: transform .12s ease, filter .12s ease; } body .eas-btn:hover{ filter: brightness(.96); } body .eas-btn:active{ transform: translateY(1px); } /* Make sure any global .button/.btn styles don't leak in */ body .eas-cta .eas-btn{ all: unset; } body .eas-cta .eas-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; background:var(--accent,#10B981); color:#052e23; font-weight:800; line-height:1; text-decoration:none; cursor:pointer; } /* Hamburger bars should match chosen primary color */ body .eas-hamburger span, body .eas-hamburger span::before, body .eas-hamburger span::after{ background: var(--brand, #0F172A); } /* ========================= OPTIONAL: Dark header variant Add class "header-dark" to if you want a full brand header > ========================= */ body.header-dark .eas-header{ background: var(--brand, #0F172A); border-color: rgba(255,255,255,.08); } body.header-dark .eas-nav a{ color:#e6eef8; } body.header-dark .eas-nav a:hover{ background: rgba(255,255,255,.08); } body.header-dark .eas-hamburger span, body.header-dark .eas-hamburger span::before, body.header-dark .eas-hamburger span::after{ background:#ffffff; } body.header-dark .current-menu-item > a, body.header-dark .current_page_item > a{ color: var(--accent, #10B981); } /* Utility bar stays on brand */ .eas-util{ background: var(--brand, #0F172A); color:#CFE8FF; } .eas-link{ color:#CFE8FF; } /* ===== EAS Flex Sections ===== */ /* ===== Service Tabs (screenshot-perfect) ===== */ /* ===== Service Tabs (screenshot-perfect) ===== */ .eas-services-tabs{ --radius: 18px; --line: #e9eef2; --shade: #0b1217; --muted: #5b6b7a; --pill-teal: #41d6c3; display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(18px, 3vw, 36px); align-items: start; } /* left column */ .eas-services-tabs__eyebrow{ margin: 0 0 6px; font-size: .9rem; color: var(--muted); } .eas-services-tabs__title{ margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; font-weight: 800; color: var(--shade); } .eas-services-tabs__intro{ margin: 0 0 18px; color: var(--muted); max-width: 50ch; } .eas-services-tabs__nav{ border-top: 1px solid var(--line); } .eas-services-tabs__navbtn{ display: block; width: 100%; text-align: left; padding: 14px 0; border: 0; background: none; font: inherit; color: #98a5b3; /* dim like screenshot */ border-bottom: 1px solid var(--line); cursor: pointer; transition: color .15s ease; } .eas-services-tabs__navbtn.is-active{ color: var(--shade); font-weight: 700; } /* right column */ .eas-services-tabs__panel{ display: none; } .eas-services-tabs__panel.is-active{ display: block; } .eas-services-tabs__media{ border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(16,24,40,.10); margin-bottom: clamp(14px, 2.2vw, 20px); } .eas-services-tabs__img{ display: block; width: 100%; height: clamp(220px, 36vw, 360px); object-fit: cover; } /* content (title + copy + buttons) */ .eas-services-tabs__heading{ margin: 0 0 6px; font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 800; color: var(--shade); } .eas-services-tabs__text{ margin: 0 0 14px; max-width: 80ch; color: var(--muted); } /* buttons row */ .eas-services-tabs__btns{ display: flex; gap: 10px; flex-wrap: wrap; } /* re-skin your .eas-btn for pill look (same as hero) */ .eas-services-tabs .eas-btn{ --btn-bg: var(--pill-teal); --btn-fg: #0b1217; border-radius: 999px; padding: 10px 16px; font-weight: 800; text-decoration: none; background: var(--btn-bg); color: var(--btn-fg); border: 0; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .eas-services-tabs .eas-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.14); } .eas-services-tabs .eas-btn--ghost{ background: transparent; color: var(--shade); border: 2px solid rgba(65,214,195,.85); box-shadow: none; } .eas-services-tabs .eas-btn--ghost:hover{ background: rgba(65,214,195,.08); } /* ===== Mobile ===== */ @media (max-width: 980px){ .eas-services-tabs{ grid-template-columns: 1fr; } .eas-services-tabs__intro{ max-width: none; } /* turn the nav into a horizontal pill strip */ .eas-services-tabs__nav{ border: 0; display:flex; gap:8px; flex-direction: column; } .eas-services-tabs__navbtn{ scroll-snap-align: start; border: 1px solid var(--line); color: var(--shade); border-radius: 999px; padding: 10px 14px; white-space: nowrap; } .eas-services-tabs__navbtn.is-active{ border-color: rgba(65,214,195,.85); box-shadow: 0 6px 16px rgba(16,24,40,.06); } .eas-hero-v2__lead{ display: none; } } /* Tunables */ .lead-collapsible{ --lead-lines: 8; --lead-fade: 56px; --lead-bg: #fff; } /* The animating container */ .lead-body{ overflow: hidden; height: auto; /* JS will set/clear dynamically */ transition: height .36s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce){ .lead-body{ transition: none; } } /* Keep formatting; clamp only when collapsed */ .lead-collapsible.is-collapsed .lead-inner{ display: -webkit-box; -webkit-line-clamp: var(--lead-lines); -webkit-box-orient: vertical; overflow: hidden; position: relative; } /* Fade overlay only when collapsed */ .lead-collapsible.is-collapsed .lead-inner::after{ content:""; position:absolute; inset-inline:0; bottom:0; height: var(--lead-fade); background: linear-gradient(to bottom, rgba(255,255,255,0), var(--lead-bg)); pointer-events:none; } /* Button style (same as before) */ .lead-toggle{ margin-top:8px; display:inline-block; font:inherit; font-weight:600; background:none; border:0; padding:0; cursor:pointer; color:var(--accent, #0ea5e9); } .lead-toggle:hover{ text-decoration:underline; } /* Base: make nav fill viewport width on mobile */ .eas-services-tabs__nav { width: 100%; } /* Collapsed state (default) hides overflow per breakpoint */ @media (max-width: 980px) { .eas-services-tabs__nav:not(.is-expanded) .is-overflow--mobile { display: none; } } @media (min-width: 981px) { .eas-services-tabs__nav:not(.is-expanded) .is-overflow--desktop { display: none; } } /* See More/Less button styling */ .eas-services-tabs__morewrap { margin-top: 10px; } .eas-services-tabs__more{ appearance: none; border: 1px solid #e2e8f0; background: #fff; padding: 8px 14px; border-radius: 999px; font: inherit; cursor: pointer; line-height: 1; } .eas-services-tabs__more:focus{ outline: 2px solid #94a3b8; outline-offset: 2px; } /* ===== Clients / Logos (Free Arts–style) ===== */ .eas-clients{ background:#f6f8fb; } .eas-clients__card{ display:grid; grid-template-columns: 300px 1fr; /* left text + grid */ align-items: stretch; background:#fff; border:1px solid #e7edf5; border-radius:14px; box-shadow:0 6px 20px rgba(16,24,40,.06); overflow:hidden; } /* Left column */ .eas-clients__intro{ display:flex; align-items:center; padding: clamp(18px, 3.2vw, 28px); } .eas-clients__title{ font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; font-weight: 700; color:#0f172a; } @media (min-width: 992px){ .eas-clients__intro{ padding-right: clamp(18px, 2.2vw, 28px); } } /* Right grid */ .eas-clients__grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:0; /* lines, not gaps */ border-left:1px solid #eef2f7; /* vertical divider (left) */ padding: 0px; } .eas-clients__item{ display:flex; align-items:center; justify-content:center; padding: 22px 16px; min-height: 74px; /* tidy rows */ } .eas-clients__item:nth-child(n + 5){ /* add row dividers (>= row2) */ border-top:1px solid #eef2f7; } .eas-clients__logo{ display:block; height:auto; max-height: 100%; /* consistent logo height */ width:auto; max-width: 60%; object-fit: contain; transform: translateZ(0); /* crisper on some GPUs */ } /* Hover (links only) */ .eas-clients__item a{ display:inline-flex; align-items:center; justify-content:center; } .eas-clients__item a:hover img{ filter: none; opacity: .95; } /* Tablet: 3 columns */ @media (max-width: 991.98px){ .eas-clients__card{ grid-template-columns: 1fr; } .eas-clients__grid{ border-left: 0; border-top:1px solid #eef2f7; padding: 0px; } .eas-clients__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* row lines for 3-col grid */ .eas-clients__item{ padding: 18px 14px; min-height: 68px; } .eas-clients__item:nth-child(n + 4){ border-top:1px solid #eef2f7; } } /* Mobile: 2 columns */ @media (max-width: 600px){ .eas-clients__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* row lines for 2-col grid */ .eas-clients__item:nth-child(n + 3){ border-top:1px solid #eef2f7; } .eas-clients__logo{ } } /* ===== Split Feature (polished) ===== */ /* ===== Careers Card (exactly like the screenshot) ===== */ .split--career-card{ background:#fff; border:1px solid rgba(16,24,40,.06); border-radius:14px; padding: 0px; box-shadow: 0 8px 26px rgba(16,24,40,.08); grid-template-columns: minmax(320px, 540px) 1fr; gap: clamp(18px, 3vw, 32px); align-items: center; } /* Minimal fallback only if other templates still use .split */ .split{ display:grid; gap:clamp(16px,3vw,32px); align-items:center; } .split__media img{ width:100%; height:auto; display:block; } @media (max-width:900px){ .split{ grid-template-columns:1fr; } } /* Headline = the orange “Join Our Team” look */ .split--career-card .split__headline{ margin: 0 0 10px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: #2563eb; /* adjust to your brand if needed */ font-weight: 800; } /* Main paragraph (left column copy) */ .split--career-card .split__lead{ margin: 0 0 12px; color: #374151; font-size: clamp(15px, 1.15vw, 17px); } .split__copy { padding: clamp(18px, 3vw, 20px); } /* Skinny divider */ .split--career-card .split__rule{ display:block; width: 220px; height: 2px; background: #e5e7eb; border-radius: 2px; margin: 14px 0 12px; } /* Supporting single line under the rule */ .split--career-card .split__support{ margin: 0 0 16px; color:#4b5563; font-size: clamp(14px, 1.05vw, 16px); } /* Image on the right with soft radius + shadow like screenshot */ .split--career-card .split__media img, .split--career-card .split__media .rounded{ border-radius: 12px; box-shadow: 0 20px 50px rgba(16,24,40,.12); width:100%; height:100%; object-fit: cover; object-position: center; } .split--career-card .ratio-16x10{ aspect-ratio: 16/10; } /* CTA button (dark with arrow that nudges on hover) */ .split--career-card .split__cta{ background:#111827; color:#fff; border:0; border-radius:10px; padding:12px 18px; font-weight: 700; display:inline-flex; align-items:center; gap:10px; line-height: 1.1; box-shadow: 0 2px 0 rgba(0,0,0,.25); } .split--career-card .split__cta::after{ content:"\2192"; /* → */ transition: transform .18s ease; } .split--career-card .split__cta:hover::after{ transform: translateX(4px); } .split--career-card .split__cta:focus-visible{ outline: 3px solid #93c5fd; outline-offset: 2px; } /* Respect "image right" toggle */ .split--career-card.img-right .split__media{ order:2; } .split--career-card.img-right .split__copy{ order:1; } /* Mobile stack (image full width under copy) */ @media (max-width: 980px){ .split--career-card, .split--career-card.img-right{ grid-template-columns: 1fr; } .split--career-card .split__media{ order: 2; /* put image after text on mobile like screenshot’s flow */ } } /* Base split: copy left, image right (matches your markup order) */ .split{ display:grid; grid-template-columns: minmax(320px,520px) 1fr; gap: clamp(16px, 3vw, 0px); align-items:center; } /* Image RIGHT (default): copy col 1, media col 2 */ .split--right .split__copy{ order: 1; } .split--right .split__media{ order: 2; } /* Image LEFT: flip orders + columns so media sits left */ .split--left{ grid-template-columns: 1fr minmax(320px,520px); } .split--left .split__copy{ order: 2; } .split--left .split__media{ order: 1; } @media (max-width: 980px){ .split{ grid-template-columns: 1fr; } /* On mobile, stack naturally: media first when left; copy first when right */ .split--left .split__media{ order: 1; } .split--left .split__copy{ order: 2; } .split--right .split__copy{ order: 1; } .split--right .split__media{ order: 2; } } /* ========== MEDIA AS BACKGROUND (additive) ========== */ /* Ensure the media column has height and keeps your polished card look */ .split--career-card .split__media{ position: relative; min-height: 100%; /* desktop baseline height */ border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(16,24,40,.12); } /* Turn the image into a true cover background */ .split__media--bg{ background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Soft overlay for depth/contrast (non-intrusive) */ .split__media-overlay{ position: absolute; inset: 0; background: radial-gradient(60% 60% at 70% 30%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 60%); pointer-events: none; } /* Fallback box when no image is set */ .split__media-fallback{ display: flex; align-items: center; justify-content: center; height: 100%; color: #64748b; background: #f1f5f9; font-size: 14px; } /* Mobile sizing */ @media (max-width: 980px){ .split--career-card .split__media{ min-height: 260px; } } /* (Optional) If any old img-based rules force styles, neutralize them when bg is used */ .split__media--bg img{ display: none !important; } /* ===== How It Works (eas-hiw) ===== */ .eas-hiw{ position:relative; padding:48px 0; } .eas-hiw__grid{ display:grid; gap:40px; grid-template-columns: minmax(280px,520px) 1fr; align-items:center; } @media (max-width: 980px){ .eas-hiw{ padding:28px 0; } .eas-hiw__grid{ grid-template-columns: 1fr; gap:28px; } } /* Copy side */ .eas-hiw__eyebrow{ margin:0 0 8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--brand, #16a34a); } .eas-hiw__title{ margin:0 0 6px; font-size: clamp(28px, 3.8vw, 38px); line-height:1.12; } .eas-hiw__lead{ color: var(--muted, #6b7280); margin: 6px 0 20px; } /* Steps list */ .eas-hiw__steps{ list-style:none; margin:0; padding:0; } .eas-hiw__step{ display:grid; grid-template-columns: 44px 1fr; gap:14px; padding:16px 0; position:relative; } .eas-hiw__step + .eas-hiw__step{ border-top:1px solid #edf1f7; } .eas-hiw__ico{ width:44px; height:44px; border-radius:12px; background:#eaffe9; display:grid; place-items:center; filter: drop-shadow(0 4px 18px rgba(34,197,94,.18)); } .eas-hiw__ico svg{ width:22px; height:22px; display:block; fill:#16a34a; } .eas-hiw__step-copy h3{ margin:0 0 4px; font-size:18px; } .eas-hiw__step-copy p{ margin:0; color:#4b5563; } /* Media side */ .eas-hiw__media{ position:relative; } .eas-hiw__media-wrap{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 20px 50px rgba(2,6,23,.12); isolation:isolate; } .eas-hiw__img{ display:block; width:100%; height:auto; } .eas-hiw__img--ph{ width:100%; aspect-ratio: 4/3; background:#111; opacity:.12; } /* soft green glow */ .eas-hiw__media-wrap::after{ content:""; position:absolute; inset:auto auto 18% -10%; width:60%; height:58%; border-radius:40%; background: radial-gradient(55% 55% at 50% 50%, rgba(72,255,153,.28), rgba(72,255,153,0) 70%); z-index:-1; filter: blur(8px); } /* bubble label */ .eas-hiw__bubble{ position:absolute; left:48%; top:8%; transform:translateX(-50%); background:#eafff2; color:#0d5c2f; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700; box-shadow:0 8px 20px rgba(34,197,94,.18); } /* floating card */ .eas-hiw__card{ position:absolute; left:8%; bottom:-14%; background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:10px 12px; box-shadow: 0 18px 40px rgba(2,6,23,.12); width:min(320px, 75%); transform: translateY(0); } .eas-hiw__card img{ display:block; width:100%; height:auto; border-radius:10px; } .eas-hiw__card-ui{ display:grid; gap:8px; } .eas-hiw__card-ui .row{ display:block; height:10px; border-radius:6px; background:linear-gradient(90deg,#f3f6fb,#e9eef6,#f3f6fb); background-size: 200% 100%; animation: shine 1.8s linear infinite; } .eas-hiw__card-ui .grid{ height:84px; border-radius:10px; background:#f6f9fd; border:1px dashed #e2e8f0; } @keyframes shine{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* Mobile tweaks */ @media (max-width: 980px){ .eas-hiw__media-wrap{ border-radius:14px; } .eas-hiw__bubble{ left:52%; top:6%; } .eas-hiw__card{ position:absolute; left:6%; bottom:-12%; width:min(360px, 88%); } } @media (max-width: 520px){ .eas-hiw__bubble{ font-size:12px; padding:5px 10px; } .eas-hiw__card{ bottom:-16%; } } /* Stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .stats .val{font-size:1.8rem;font-weight:900;display:block} .stats .lbl{color:var(--muted)} @media(max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .stats{grid-template-columns:1fr} } /* FAQ */ .faq__item{border:1px solid #e9eef6;border-radius:12px;margin-bottom:10px;background:#fff} .faq__q{width:100%;text-align:left;background:#fff;border:0;padding:14px 16px;border-radius:12px} .faq__q[aria-expanded="true"]{background:#f7fbff} .faq__a{padding:0 16px 14px;color:var(--ink)} /* Areas */ .pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none} .pill-list li{background:#fff;border:1px solid #e5edf7;border-radius:999px;padding:6px 12px} .map-embed iframe{width:100%;height:360px;border:0;border-radius:14px} /* CTA */ .cta{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid #e9eef6;border-radius:18px;padding:18px} .cta__btns{display:flex;gap:10px;flex-wrap:wrap} @media(max-width:720px){ .cta{grid-template-columns:1fr} } /* Divider/Spacer */ .divider.h-sm{height:20px} .divider.h-md{height:40px} .divider.h-lg{height:70px} /* Buttons (ghost) */ .eas-btn--ghost{background:transparent;border:1px solid rgba(16,185,129,.5);color:var(--brand)} .text-invert .eas-btn--ghost{border-color:rgba(255,255,255,.5);color:#fff} /* ===== Google-style Testimonials Slider ===== */ .t-slider{ position:relative; } .t-viewport{ overflow-x:auto; scroll-behavior:smooth; } .t-track{ --gap:20px; --per:2; display:flex; gap:var(--gap); padding-bottom:6px; } .t-card{ flex: 0 0 calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per)); background:#fff; border:1px solid #e9eef6; border-radius:18px; box-shadow:0 16px 40px rgba(16,24,40,.08); padding:18px 18px 14px; min-height:220px; } @media (max-width: 980px){ .t-track{ --per:1; } } .t-card__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; } .gmb{ display:flex; align-items:center; gap:10px; } .gmb .g{ width:34px; height:34px; } .gmb .label{ color:#5b616b; font-size:.9rem; white-space:nowrap; } .t-card__who{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-left:auto; } .t-card__who .name{ font-weight:800; } .stars{ display:flex; gap:4px; } .stars svg{ width:16px; height:16px; fill:#e5e7eb; } .stars svg.on{ fill:#FBBF24; } /* gold */ .t-card__body{ margin:8px 0 12px; } .t-quote{ margin:0; color:#0f172a; line-height:1.6; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; } .t-card__foot{ display:flex; justify-content:flex-end; align-items:center; } .t-card__foot .date{ font-size:.9rem; color:#5b616b; letter-spacing:.02em; } .t-card__foot .meta{ font-size:.9rem; color:#5b616b; } /* Controls centered under cards */ .t-controls{ display:flex; align-items:center; justify-content:center; gap:26px; margin-top:8px; } .t-nav{ width:36px; height:36px; border-radius:999px; border:1px solid #e1e8f3; background:#fff; display:inline-grid; place-items:center; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 6px 16px rgba(16,24,40,.08); } .t-nav:hover{ transform:translateY(-1px); } /* Dark/brand sections */ .text-invert .t-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); box-shadow:none; } .text-invert .t-quote{ color:#e6eef8; } .text-invert .gmb .label, .text-invert .t-card__foot .date, .text-invert .t-card__foot .meta{ color:#c9d6e8; } .text-invert .t-nav{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; } /* Optional “More” expansion */ .t-card.is-open .t-quote{ -webkit-line-clamp:unset; } .t-more{ background:none;border:0;color:var(--brand,#0F172A);text-decoration:underline;cursor:pointer;font-weight:700;margin-top:6px; } /* Hide the horizontal scrollbar but keep scroll/drag working */ .t-viewport{ overflow-x: auto; -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ } .t-viewport::-webkit-scrollbar{ /* Chrome/Safari */ display: none; } /* ============== EAS form section (no image) ============== */ .eas-form{ padding: clamp(28px, 4vw, 56px) 0; } .eas-form__inner{ width: 100%; margin: 0 auto; } .eas-form__head{ margin: 0 0 18px; } .eas-form__head h2{ margin: 0 0 6px; color: var(--ink); font-weight: 800; font-size: clamp(26px, 2.2vw, 34px); } .eas-form__head .lead{ color: var(--muted); font-size: clamp(14px, 1.1vw, 16px); margin: 0; } .eas-form__card{ background: #fff; border-radius: max(18px, var(--radius)); padding: clamp(16px, 2.2vw, 28px); box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; max-width: 100%; } /* ===================== WPForms – Global Field & Button Appearance (no layout) ===================== */ /* uses your root vars: --brand, --accent, --ink, --muted, --radius */ .wpforms-container{ --ring: 0 0 0 6px color-mix(in srgb, var(--brand) 22%, transparent); } /* Labels (purely cosmetic) */ .wpforms-container .wpforms-field-label{ color:var(--ink); font-weight:600; } .wpforms-container .wpforms-field-description{ color:var(--muted); } /* Text inputs, selects, textareas */ .wpforms-container .wpforms-field input[type="text"], .wpforms-container .wpforms-field input[type="email"], .wpforms-container .wpforms-field input[type="tel"], .wpforms-container .wpforms-field input[type="number"], .wpforms-container .wpforms-field input[type="date"], .wpforms-container .wpforms-field select, .wpforms-container .wpforms-field textarea{ border:1px solid #e5e7eb; border-radius: var(--radius); padding:12px 14px; background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.03); transition:border-color .15s ease, box-shadow .15s ease; } .wpforms-container .wpforms-field input::placeholder, .wpforms-container .wpforms-field textarea::placeholder{ color:var(--muted); opacity:.85; } .wpforms-container .wpforms-field input:focus, .wpforms-container .wpforms-field select:focus, .wpforms-container .wpforms-field textarea:focus{ outline:none; border-color:var(--brand); box-shadow: var(--ring); } /* Select: subtle custom caret (appearance only) */ .wpforms-container .wpforms-field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:20px; padding-right:38px; /* visual affordance; no width/layout changed */ } /* Checkboxes / radios – color only (no layout) */ .wpforms-container input[type="checkbox"], .wpforms-container input[type="radio"]{ accent-color: var(--brand); } .wpforms-container .wpforms-field-radio input:checked + label, .wpforms-container .wpforms-field-checkbox input:checked + label{ color:var(--ink); font-weight:600; } /* File upload (visual only) */ .wpforms-container .wpforms-field-file-upload .wpforms-uploader{ border:1px dashed #cbd5e1; border-radius: var(--radius); background:#f8fafc; } .wpforms-container .wpforms-field-file-upload .dz-message{ color:var(--muted); } /* Buttons (Next/Prev/Submit) – appearance only */ .wpforms-container .wpforms-submit, .wpforms-container .wpforms-page-button{ background: linear-gradient(90deg, var(--brand), var(--accent)); color:#fff; border:0; border-radius: var(--radius); padding:12px 18px; font-weight:800; letter-spacing:.2px; box-shadow:0 12px 24px rgba(0,0,0,.14); transition: transform .08s ease, box-shadow .2s ease; } .wpforms-container .wpforms-page-button:hover, .wpforms-container .wpforms-submit:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.18); } .wpforms-container .wpforms-page-button.wpforms-pageprev{ background:#e5e7eb; color:#111; } /* Error / success coloring (no layout) */ .wpforms-container .wpforms-error{ border-color:#ef4444 !important; } .wpforms-container .wpforms-field .wpforms-error-msg{ color:#b91c1c; font-weight:600; } .wpforms-container .wpforms-confirmation-container-full{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; border-radius: var(--radius); } /* ===== New Overlay Hero (matches screenshot) ===== */ .eas-hero-v2{ position: relative; isolation: isolate; min-height: clamp(420px, 52vw, 680px); display: grid; place-items: end center; /* content sits toward lower area */ background: var(--eas-hero-bg, none) center / cover no-repeat; border-radius: 0; /* full-bleed look */ overflow: hidden; } .eas-hero-v2{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .eas-hero-v2 container{ max-width: 100%; padding: 0px; } /* soft dark gradient from bottom up for readability */ .eas-hero-v2__scrim{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,18,0.80) 0%, rgba(10,14,18,0.65) 22%, rgba(10,14,18,0.30) 52%, rgba(10,14,18,0.00) 75%); z-index: 0; } .eas-hero-v2__inner{ position: relative; z-index: 1; width: min(1100px, 92vw); margin-inline: auto; text-align: center; color: #fff; padding: clamp(26px, 4vw, 44px) 0 clamp(32px, 6.5vw, 72px); /* lift text a bit from bottom */ } /* eyebrow */ .eas-hero-v2__eyebrow{ margin: 0 0 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; } /* headline style like screenshot: big, tight leading */ .eas-hero-v2__title{ margin: 0 0 12px; font-size: clamp(2rem, 4.8vw, 4rem); line-height: 1.05; font-weight: 800; text-wrap: balance; } /* subheadline */ .eas-hero-v2__lead{ margin: 0 auto clamp(18px, 3.2vw, 26px); max-width: 70ch; font-size: clamp(0.95rem, 1.25vw, 1.1rem); color: rgba(255,255,255,.92); } /* buttons row */ .eas-hero-v2__btns{ display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* adapt your existing .eas-btn output into pills on dark bg */ .eas-hero-v2 .eas-btn{ --btn-bg: #41d6c3; /* teal like screenshot */ --btn-fg: #0b1217; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; font-weight: 800; text-decoration: none; background: var(--btn-bg); color: var(--btn-fg); border: 0; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .eas-hero-v2 .eas-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.34); } /* ghost variant to match the outlined second button */ .eas-hero-v2 .eas-btn--ghost{ background: transparent; color: #eaf7f6; border: 2px solid rgba(65,214,195,.85); box-shadow: none; } .eas-hero-v2 .eas-btn--ghost:hover{ background: rgba(65,214,195,.10); } /* mobile tweaks */ @media (max-width: 900px){ .eas-hero-v2{ min-height: clamp(360px, 64vw, 520px); } .eas-hero-v2__inner{ padding-bottom: clamp(28px, 10vw, 56px); text-align: left; } .eas-hero-v2__scrim{ background: linear-gradient(0deg, rgba(10,14,18,0.80) 0%, rgba(10,14,18,0.65) 22%, rgba(10,14,18,0.30) 52%, rgba(10,14,18,0.00) 75%); } } /* optional: gently darken very bright images near the top edge */ .eas-hero-v2::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 80% 20%, rgba(0,0,0,.12), rgba(0,0,0,0) 55%); pointer-events:none; }