/* ========================================================================== Intellectyx Homepage — Design System Brand: primary #90c322 (lime) / secondary #002736 (deep navy) ========================================================================== */ /* Archivo is loaded via tags in , not @import here — @import forces the browser to fetch this stylesheet, parse it, THEN discover and fetch the font CSS/files in sequence, serializing what should be a parallel request and delaying First Contentful Paint. */ :root{ --primary: #90c322; --primary-dark: #74a015; --primary-light: #b7e156; --primary-glow: rgba(144,195,34,.35); --wash-tint: rgba(144,195,34,.16); --secondary: #002736; --secondary-700: #013647; --secondary-600: #0a3d4f; --secondary-500: #0d4a5f; --secondary-400: #16637c; --ink: #071b22; --muted: #56707a; --muted-light: #8fa6ad; --bg: #ffffff; --bg-soft: #f4f9f0; --bg-soft-2: #eef5e7; --border: #e1eadd; --white: #ffffff; --font-head: 'Archivo', sans-serif; --font-body: 'Archivo', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px; --shadow-sm: 0 2px 10px rgba(0,39,54,.06); --shadow-md: 0 10px 30px rgba(0,39,54,.10); --shadow-lg: 0 25px 60px rgba(0,39,54,.16); --ease: cubic-bezier(.16,.84,.44,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scrollbar-gutter:stable; } body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:initial; letter-spacing: 0.3px; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,h5,h6,p{ margin:0; letter-spacing: 0.3px; } button{ font-family:inherit; cursor:pointer; } svg{ display:block; } /* The live theme sets Montserrat for headings and Poppins for body text globally — this template uses Archivo throughout, so force it here to win over those theme defaults once this page is embedded in WP. */ h1,h2,h3,h4,h5,h6{ font-family:var(--font-head) !important; } body,p,a,span,li,td,th,label,button,input,select,textarea,div{ font-family:var(--font-body); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---------- Layout helpers ---------- */ /* Scoped per-section (each section is dropped in as its own separate Raw HTML widget in WPBakery, so there's no shared wrapper to scope under) rather than a bare .container — that class name is reused by the WP theme/other pages sitewide, so an unscoped rule here would leak this page's container width onto unrelated layouts. */ .ix-topbar .container, .site-header .container, .hero-wash .container, .why-section .container, .pov-section .container, .results-section .container, .approach-section .container, .stories-section .container, .accelerator-section .container, .foundation-section .container, .flagship-section .container, .engagement-section .container, .usecase-section .container, .build-section .container, #industries .container, .awards-section .container, #insights .container, .cta-section .container, .model-section .container, .value-section .container, .testimonial-section .container, .contact-faq-section .container, .contact-faq-section-alt .container, .page-banner .container, #ai-services .container, #manufacturing-services .container, #usecases .container, #medent-services .container, #medent-usecases .container, #cg-services .container, #cg-usecases .container, #retail-services .container, #retail-usecases .container, #ttl-services .container, #ttl-usecases .container, #eu-services .container, #eu-usecases .container, #hls-services .container, #hls-usecases .container, #get-started .container, .recognition-section .container, .site-footer .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width: 1600px){ .ix-topbar .container, .site-header .container, .hero-wash .container, .why-section .container, .pov-section .container, .results-section .container, .approach-section .container, .stories-section .container, .accelerator-section .container, .foundation-section .container, .flagship-section .container, .engagement-section .container, .usecase-section .container, .build-section .container, #industries .container, .awards-section .container, #insights .container, .cta-section .container, .model-section .container, .value-section .container, .testimonial-section .container, .contact-faq-section .container, .contact-faq-section-alt .container, .page-banner .container, #ai-services .container, #manufacturing-services .container, #usecases .container, #medent-services .container, #medent-usecases .container, #cg-services .container, #cg-usecases .container, #retail-services .container, #retail-usecases .container, #ttl-services .container, #ttl-usecases .container, #eu-services .container, #eu-usecases .container, #hls-services .container, #hls-usecases .container, #get-started .container, .recognition-section .container, .site-footer .container{ max-width:1360px; } } @media (min-width: 1920px){ .ix-topbar .container, .site-header .container, .hero-wash .container, .why-section .container, .pov-section .container, .results-section .container, .approach-section .container, .stories-section .container, .accelerator-section .container, .foundation-section .container, .flagship-section .container, .engagement-section .container, .usecase-section .container, .build-section .container, #industries .container, .awards-section .container, #insights .container, .cta-section .container, .model-section .container, .value-section .container, .testimonial-section .container, .contact-faq-section .container, .contact-faq-section-alt .container, .page-banner .container, #ai-services .container, #manufacturing-services .container, #usecases .container, #medent-services .container, #medent-usecases .container, #cg-services .container, #cg-usecases .container, #retail-services .container, #retail-usecases .container, #ttl-services .container, #ttl-usecases .container, #eu-services .container, #eu-usecases .container, #hls-services .container, #hls-usecases .container, #get-started .container, .recognition-section .container, .site-footer .container{ max-width:1480px; } } @media (min-width: 2560px){ .ix-topbar .container, .site-header .container, .hero-wash .container, .why-section .container, .pov-section .container, .results-section .container, .approach-section .container, .stories-section .container, .accelerator-section .container, .foundation-section .container, .flagship-section .container, .engagement-section .container, .usecase-section .container, .build-section .container, #industries .container, .awards-section .container, #insights .container, .cta-section .container, .model-section .container, .value-section .container, .testimonial-section .container, .contact-faq-section .container, .contact-faq-section-alt .container, .page-banner .container, #ai-services .container, #manufacturing-services .container, #usecases .container, #medent-services .container, #medent-usecases .container, #cg-services .container, #cg-usecases .container, #retail-services .container, #retail-usecases .container, #ttl-services .container, #ttl-usecases .container, #eu-services .container, #eu-usecases .container, #hls-services .container, #hls-usecases .container, #get-started .container, .recognition-section .container, .site-footer .container{ max-width:1600px; } } .section{ position:relative; padding:100px 0; } .section--tight{ padding:72px 0; } .section-header{ max-width:680px; margin:0 0 56px; } .section-header.center{ margin-inline:auto; text-align:center; } /* Widened past the shared 680px cap so these titles sit on one line at desktop widths instead of wrapping to a second line they don't need — each value is just past that heading's own natural (nowrap) width. */ #results .section-header{ max-width:900px; } #services .section-header{ max-width:880px; } #manufacturing-services .section-header{ max-width:1100px; } #success-stories .section-header{ max-width:740px; } #operating-model .section-header{ max-width:900px; } #value-engine .section-header{ max-width:760px; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; /* --primary-dark text on --bg-soft-2 only measures ~2.8:1 — fails WCAG AA for 13px text (needs 4.5:1). Text goes navy instead; the green dot before it keeps the brand accent without relying on green for legibility. */ color:var(--secondary); background:var(--bg-soft-2); border:1px solid var(--border); padding:6px 14px; border-radius:var(--radius-full); margin-bottom:18px; } .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); } .eyebrow--light{ color:var(--primary-light); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); } .h2{ font-family:var(--font-head); font-size:clamp(28px, 3.6vw, 42px); line-height:1.15; font-weight:700; color:var(--secondary); letter-spacing:-.01em; text-transform:capitalize; } .h2 .accent{ color:var(--primary-dark); } .sub{ margin-top:16px; font-size:17px; line-height:1.65; color:var(--muted); } .sub--light{ color:rgba(255,255,255,.72); } .h2--light{ color:var(--white); } .btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:var(--radius-full); border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease); white-space:nowrap; } .btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .btn:hover svg{ transform:translateX(3px); } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--primary); color:var(--white); box-shadow:0 8px 24px rgba(144,195,34,.35); } .btn-primary:hover{ background:var(--primary-light); box-shadow:0 14px 32px rgba(144,195,34,.45); } .btn-outline{ background:transparent; border: 1px solid rgba(255,255,255,.28) !important; color:var(--white); } .btn-outline:hover{ background:rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.5) !important; color: var(--primary-dark); } .btn-outline-dark{ background:transparent; border: 1px solid var(--primary) !important; color:var(--secondary); } .btn-outline-dark:hover{ background:var(--bg-soft); border: 1px solid var(--primary-dark) !important; box-shadow:0 14px 32px rgba(144,195,34,.35); color:var(--primary-dark); } .btn-dark{ background:var(--primary); color:var(--white); box-shadow:0 8px 24px rgba(144,195,34,.35); } .btn-dark:hover{ background:var(--primary-light); box-shadow:0 14px 32px rgba(144,195,34,.45); } .btn-block{ width:100%; justify-content:center; } .link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--secondary); border-bottom:2px solid var(--primary); padding-bottom:2px; transition:gap .3s var(--ease), color .3s var(--ease); } .link-arrow svg{ width:14px; height:14px; } .link-arrow:hover{ gap:12px; color:var(--primary-dark); } /* reveal-on-scroll */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in-view{ opacity:1; transform:translateY(0); } .reveal-delay-1.in-view{ transition-delay:.08s; } .reveal-delay-2.in-view{ transition-delay:.16s; } .reveal-delay-3.in-view{ transition-delay:.24s; } .reveal-delay-4.in-view{ transition-delay:.32s; } /* ========================================================================== Topbar — announcement bar above the header (blog / webinar / event) ========================================================================== */ .ix-topbar{ position:fixed; top:0; left:0; width:100%; z-index:10000; background:var(--white); border-bottom:1px solid var(--border); overflow:hidden; max-height:48px; opacity:1; transition:max-height .45s var(--ease), opacity .35s ease, border-color .35s ease; } .ix-topbar.ix-topbar--enter{ opacity:0; } .ix-topbar.ix-topbar--hidden{ max-height:0; opacity:0; border-color:transparent; pointer-events:none; } .ix-topbar-inner{ position:relative; display:flex; align-items:center; justify-content:center; height:48px; } .ix-topbar-message{ display:flex; align-items:center; gap:20px; min-width:0; max-width:100%; } .ix-topbar-badge{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:2px 12px; border-radius:var(--radius-full); background:var(--bg-soft-2); border:1px solid var(--border); } .ix-topbar-pulse{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--primary); flex-shrink:0; } .ix-topbar-pulse::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--primary); animation:ixTopbarPulse 1.8s ease-out infinite; } @keyframes ixTopbarPulse{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } } .ix-topbar-label{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); white-space:nowrap; } .ix-topbar-content{ min-width:0; } .ix-topbar-item{ display:flex; align-items:center; justify-content:center; gap:12px; color:var(--ink); text-decoration:none; min-width:0; transition:opacity .45s var(--ease), transform .45s var(--ease); } .ix-topbar-item--swap{ opacity:0; transform:translateY(5px); } .ix-topbar-item--fixed{ display:none; } .ix-topbar[data-topbar-mode="webinar"] [data-topbar-blog-item], .ix-topbar[data-topbar-mode="webinar"] [data-topbar-event], .ix-topbar[data-topbar-mode="event"] [data-topbar-blog-item], .ix-topbar[data-topbar-mode="event"] [data-topbar-webinar]{ display:none; } .ix-topbar[data-topbar-mode="webinar"] [data-topbar-webinar], .ix-topbar[data-topbar-mode="event"] [data-topbar-event]{ display:flex; } .ix-topbar-text{ font-size:13.5px; font-weight:500; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; transition:color .25s ease; } .ix-topbar-text strong{ font-weight:800; color:var(--secondary); } .ix-topbar-arrow{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:var(--primary-dark); transition:transform .3s var(--ease), color .3s ease; } .ix-topbar-arrow svg{ width:14px; height:14px; } .ix-topbar-item:hover .ix-topbar-arrow{ transform:translateX(4px); color:var(--primary); } .ix-topbar-item:hover .ix-topbar-text{ color:var(--secondary); } @media (prefers-reduced-motion: reduce){ .ix-topbar, .ix-topbar-track .ix-topbar-item, .ix-topbar-pulse::after{ transition:none; animation:none; } } @media (max-width: 640px){ .ix-topbar-label{ display:none; } .ix-topbar-badge{ padding:12px 12px; } .ix-topbar-text{ font-size:12.5px; } } /* ========================================================================== Header ========================================================================== */ .site-header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 10001; background:var(--white); border-bottom:1px solid var(--border); transition:padding .35s var(--ease), top .45s var(--ease); } .site-header .container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 15px; } .site-header .navbar { position: relative; width: 100%; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: nowrap; } @media (min-width: 1600px) { .site-header .container { max-width: 1360px; } } @media (min-width: 1920px) { .site-header .container { max-width: 1480px; } } @media (min-width: 2560px) { .site-header .container { max-width: 1600px; } } .site-header .contantcss { padding-right: 0 !important; } .site-header .contantcss a.mega-menu-link:hover { box-shadow: 0 14px 32px rgba(144, 195, 34, .45) !important; transform: translateY(-2px) !important; } .site-header .contantcss a.mega-menu-link { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease) !important; } .site-header.is-scrolled { background:var(--white) !important; transition: all .3s ease-out; } .site-header .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:21px; color:var(--secondary); } .site-header .brand .dot{ color:var(--primary); } .site-header .brand-mark{ width:34px; height:34px; } .site-header .header-logo { height: 34px; width: auto; display: block; } .site-header .header-right{ display:flex; align-items:center; gap:44px;} .site-header .main-nav{ display:flex; align-items:center; gap:30px; } .site-header .main-nav > a{ font-size:14px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px; transition:color .25s ease; } .site-header .main-nav > a:hover, .site-header .main-nav > a.active{ color:var(--secondary); } .site-header .header-actions{ display:flex; align-items:center; gap:18px; } .site-header .nav-toggle{ display:none; background:none; border:0; color:var(--secondary); } /* Mobile-only simple list nav — hidden entirely at desktop widths (where the mega-menu system above renders instead); shown only inside the max-width:900px block below. Kept in the DOM at all sizes so a single shared header partial works everywhere. */ .mobile-nav-list{ display:none; } /* Header CTA — smaller than the default .btn size everywhere else on the page; on mobile it collapses to an icon-only circle so it doesn't compete with the hamburger for space in a cramped header row. */ .site-header .header-cta{ padding:11px 20px; font-size:14px; } .site-header .header-cta-icon{ display:none; width:18px; height:18px; flex-shrink:0; } .site-header .header-cta:focus{ background:var(--primary) !important; color:var(--white) !important; box-shadow:0 8px 24px rgba(144,195,34,.35) !important; } /* ---------- Mega menu framework ---------- */ .site-header .nav-item{ position:relative; } .site-header .nav-trigger{ display:flex; align-items:center; gap:6px; font: inherit; font-size:14px; font-weight:600; color:var(--muted); background:none; border:0; cursor:pointer; padding:0; transition:color .25s ease; margin-top: 0; } .site-header .nav-trigger:hover{ color:var(--secondary); } .site-header .nav-caret{ width:9px; height:9px; opacity:.6; transition:transform .25s var(--ease); flex-shrink:0; } .site-header .nav-item.is-open .nav-trigger{ color:var(--secondary); } .site-header .nav-item.is-open .nav-caret{ transform:rotate(180deg); } .mega-panel{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; background:var(--white); box-shadow:0 30px 60px rgba(0,39,54,.16); } .nav-item.is-open .mega-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } /* Wide panels (Services/Solutions/Industries) — fixed to viewport width, positioned at the header's own bottom edge (kept in sync by JS since the header's height shifts with the topbar/admin-bar). */ .mega-panel--switcher, .mega-panel--grid{ position:fixed; top:var(--mega-panel-top, 90px); left:0; width:100%; border-radius:0 0 var(--radius-lg) var(--radius-lg); max-height:calc(100vh - var(--mega-panel-top, 90px) - 24px); overflow-y:auto; } .mega-panel--switcher > *, .mega-panel--grid > *{ max-width:1360px; margin:0 auto; } /* Single-item dropdown (AI Accelerator) — a compact spotlight card instead of a full-width grid, since there's only one product to link to. Pinned to the same fixed --mega-panel-top as the wide panels (kept in sync by JS) so every mega menu opens flush with the header's bottom edge — position:absolute here previously anchored it to the trigger's own box instead, which sat a few pixels off from the others. */ .mega-panel--single{ position:fixed; top:var(--mega-panel-top, 90px); left:0; width:420px; background:none; box-shadow:none; } .mega-single-card{ display:block; padding:32px; border-radius:var(--radius-lg); background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); color:var(--white); text-decoration:none; box-shadow:0 30px 60px rgba(0,39,54,.24); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .mega-single-card:hover{ transform:translateY(-4px); box-shadow:0 36px 70px rgba(0,39,54,.3); } .mega-single-icon{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:var(--white); box-shadow:0 10px 22px var(--primary-glow); } .mega-single-icon svg{ width:24px; height:24px; } .mega-single-tag{ display:inline-block; margin-top:18px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-light); background:rgba(144,195,34,.14); padding:4px 10px; border-radius:var(--radius-full); } .mega-single-card h4{ margin-top:14px; font-family:var(--font-head); font-size:20px; font-weight:800; line-height:1.25; text-align: left; color: var(--white); } .mega-single-card p{ margin-top:10px; font-size:14px; line-height:1.65; color:rgba(255,255,255,.68); } .mega-single-features{ display:flex; flex-direction:column; gap:9px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); } .mega-single-features span{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:rgba(255,255,255,.85); } .mega-single-features svg{ width:15px; height:15px; flex-shrink:0; color:var(--primary-light); } .mega-single-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:14px; font-weight:700; color:var(--primary-light); transition:gap .25s ease; } .mega-single-cta svg{ width:15px; height:15px; } .mega-single-card:hover .mega-single-cta{ gap:12px; } .mega-switcher{ display:flex; } .mega-sidebar{ width:280px; flex-shrink:0; padding:28px 16px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:3px; } .mega-sidebar-item{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border-radius:12px; border:none; background:none; cursor:pointer; font:inherit; font-size:14px; font-weight:700; color:var(--secondary); text-align:left; text-decoration:none; transition:background .2s ease, color .2s ease; } .mega-sidebar-item:hover{ background:var(--bg-soft); } .mega-sidebar-item.is-active{ background:var(--bg-soft-2); color:var(--primary-dark); } .mega-sidebar-icon{ flex-shrink:0; width:34px; height:34px; border-radius:10px; background:var(--bg-soft-2); display:flex; align-items:center; justify-content:center; color:var(--secondary-400); transition:background .2s ease, color .2s ease; } .mega-sidebar-icon svg{ width:17px; height:17px; } .mega-sidebar-item.is-active .mega-sidebar-icon{ background:var(--primary); color:var(--white); } .mega-cards{ flex:1; padding:28px 32px; min-width:0; } .mega-cardset{ display:none; } .mega-cardset.is-active{ display:flex; align-items:stretch; } .mega-card-col{ flex:1; min-width:0; display:flex; flex-direction:column; } .mega-card-col:not(:first-child){ border-left:1px solid var(--border); } .mega-cardset.is-active > .mega-feature-card{ margin-left:28px; } .mega-card{ display:flex; flex-direction:row; align-items:flex-start; gap:14px; padding:20px 22px; text-decoration:none; transition:background .2s ease; } .mega-card:hover{ background:var(--bg-soft); } .mega-card-icon{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--bg-soft-2); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .mega-card-icon svg{ width:20px; height:20px; } .mega-card-body{ display:flex; flex-direction:column; gap:4px; min-width:0; } .mega-card strong{ font-size:15px; font-weight:800; color:var(--secondary); line-height:1.35; } .mega-card small{ font-size:13px; color:var(--muted); line-height:1.55; } /* Insights switcher (Blogs / Guides / Press Releases) */ .mega-cards--insights{ display:flex; align-items:flex-start; gap:32px; } .mega-cards--insights .mega-cardset.is-active{ display:block; flex:1; min-width:0; } .mega-insight-list-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .mega-insight-list-header span{ font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .mega-insight-list-header a{ font-size:13px; font-weight:700; color:var(--primary-dark); text-decoration:underline; } .mega-insight-row{ display:flex; align-items:center; gap:14px; padding:9px 8px; border-radius:10px; text-decoration:none; color:var(--secondary); transition:background .2s ease; } .mega-insight-row:hover{ background:var(--bg-soft); } .mega-insight-thumb{ position:relative; overflow:hidden; flex-shrink:0; width:52px; height:52px; border-radius:10px; color:var(--white); display:flex; align-items:center; justify-content:center; } .mega-insight-thumb svg{ width:22px; height:22px; } .mega-insight-thumb--a{ background:var(--primary-dark); } .mega-insight-thumb--b{ background:var(--secondary); } .mega-insight-thumb--c{ background:var(--secondary-400); } .mega-insight-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; } .mega-insight-row strong{ font-size:14px; font-weight:700; line-height:1.4; color: var(--secondary); } /* Grid pattern (Industries) */ .mega-panel--grid{ padding:32px; } .mega-grid-header{ margin-bottom:20px; } .mega-grid-header h4{ font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--secondary); text-align: left; } .mega-grid-header p{ margin-top:6px; font-size:14px; color:var(--muted); } .mega-grid-body{ display:flex; align-items:stretch; gap:32px; } .mega-grid-main{ flex:1; min-width:0; display:flex; flex-direction:column; } .mega-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px 28px; align-content:start; } .mega-grid--cases{ grid-template-columns:repeat(2,1fr); } .mega-grid-col{ position:relative; display:flex; flex-direction:column; gap:14px; } /* Divider between columns, centered in the column-gap so it never touches a flagship/highlighted item's rounded background on either side. */ .mega-grid-col:not(:last-child)::after{ content:''; position:absolute; top:0; bottom:0; right:-14px; width:1px; background:var(--border); } .mega-grid-item{ display:flex; align-items:flex-start; gap:14px; padding:9px 8px; border-radius:10px; text-decoration:none; color:var(--secondary); line-height:1.3; transition:background .2s ease; } .mega-grid-item:hover{ background:var(--bg-soft); } .mega-grid-icon{ position:relative; overflow:hidden; flex-shrink:0; width:38px; height:38px; border-radius:11px; background:var(--white); border:1px solid var(--border); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .mega-grid-icon svg{ width:18px; height:18px; } .mega-grid-icon img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; } .mega-panel--cases .mega-grid-icon{ width:76px; height:76px; border-radius:12px; } .mega-grid-item strong{ display:block; font-size:14.5px; font-weight:800; color:var(--secondary); } .mega-grid-item small{ display:block; margin-top:4px; font-size:12.5px; font-weight:500; color:var(--muted); line-height:1.5; } .mega-grid-item--flagship{ background-color:var(--wash-tint); border-radius:12px; } .mega-grid-item--flagship:hover{ background-color:var(--bg-soft-2); } .mega-flagship-badge{ display:inline-flex; align-items:center; margin-left:7px; padding:2px 8px; border-radius:var(--radius-full); background-color:var(--primary); color:var(--secondary); font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; } .mega-feature-card{ width:280px; flex-shrink:0; background:var(--secondary); border-radius:var(--radius-lg); padding:24px; color:var(--white); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; } /* Services mega menu — 3 real service pages (no sub-service pages exist to drill into), so this reuses the homepage's own .service-card dark-hover-flip treatment at a size that fits a nav dropdown, instead of the old sidebar+cardset switcher pattern (still used by Insights, which does have real sub-categories). */ .mega-services-grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; } .mega-service-card{ position:relative; display:flex; flex-direction:column; padding:32px 28px 28px; border-radius:20px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); text-decoration:none; overflow:hidden; transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } /* Thin gradient accent bar along the top edge — a small "premium card" detail that reads immediately at rest, not just after the dark hover flip kicks in. */ .mega-service-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background:linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%); } /* Faint radial wash in the corner opposite the icon — the same "premium tile" glow used elsewhere (.pillar-card, .flagship-card), just subtle enough to still read as a white card rather than a colored one. Fades out with the rest of the resting-state chrome once the dark hover fill (the ::before below) takes over. */ .mega-service-card .mega-service-wash{ content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; background:radial-gradient(65% 65% at 100% 0%, rgba(144,195,34,.1), transparent 70%); transition:opacity .4s var(--ease); } .mega-service-card:hover .mega-service-wash{ opacity:0; } .mega-service-card::before{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); opacity:0; transition:opacity .4s var(--ease); } .mega-service-card:hover::before{ opacity:1; } .mega-service-card:hover{ border-color:transparent; box-shadow:0 24px 48px -24px rgba(0,39,54,.35); transform:translateY(-4px); } .mega-service-card > *{ position:relative; z-index:2; } .mega-service-icon{ flex-shrink:0; width:56px; height:56px; border-radius:16px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 22px -6px var(--primary-glow); display:flex; align-items:center; justify-content:center; transition:background .4s var(--ease), box-shadow .4s var(--ease); } .mega-service-icon svg{ width:24px; height:24px; color:var(--white); } .mega-service-card:hover .mega-service-icon{ background:var(--white); box-shadow:none; } .mega-service-card:hover .mega-service-icon svg{ color:var(--secondary); } .mega-service-card h5{ margin-top:18px; font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--secondary); transition:color .4s var(--ease); text-align: left;} .mega-service-card:hover h5{ color:var(--white); } .mega-service-card > p{ margin-top:14px; font-size:14.5px; line-height:1.7; color:var(--muted); transition:color .4s var(--ease); } .mega-service-card:hover > p{ color:rgba(255,255,255,.72); } .mega-service-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:22px; font-size:14px; font-weight:700; color:var(--primary-dark); transition:gap .3s var(--ease), color .4s var(--ease); } .mega-service-cta svg{ width:15px; height:15px; } .mega-service-card:hover .mega-service-cta{ color:var(--primary-light); } .mega-feature-tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-light); background:rgba(144,195,34,.14); padding:4px 10px; border-radius:var(--radius-full); } .mega-feature-card h5{ margin-top:12px; font-family:var(--font-head); font-size:17px; font-weight:800; line-height:1.3; text-align: left; color: var(--white); } .mega-feature-card p, .mega-feature-card ul { margin-top:8px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.65); } .mega-feature-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:700; color:var(--primary-light); transition:gap .2s ease; } .mega-feature-link svg{ width:14px; height:14px; } .mega-feature-link:hover{ gap:10px; color: var(--primary-light); } .mega-feature-card ul { padding-left: 15px; } .mega-feature-card li { list-style: circle; } /* WordPress admin bar */ .admin-bar .site-header { top: 32px; } .admin-bar .ix-topbar { top: 30px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 900px){ body { overflow-x: hidden; } .site-header .navbar{ padding:14px 0; gap:12px; } .site-header .header-right{ position:static; } .site-header .main-nav{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; position:absolute; top:100%; left:0; right:0; background:var(--white); border-top:1px solid var(--border); padding:10px 24px 22px; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease), opacity .3s ease; } .site-header .main-nav > a{ padding:12px 0; width:100%; } .site-header.nav-open .main-nav{ max-height:80vh; overflow-y:auto; opacity:1; box-shadow:0 16px 30px rgba(0,39,54,.08); } /* Icon-only CTA — the text label would either wrap or force the header taller on narrow screens, so it's dropped in favor of the icon alone. */ .site-header .header-cta{ padding:0; width:42px; height:42px; justify-content:center; gap:0; border-radius:50%; flex-shrink:0; } .site-header .header-cta-icon{ display:block; } .site-header .header-cta-text{ display:none; } .site-header .nav-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:var(--primary); color:var(--white); border-radius:50%; padding:0; margin-top:0; } .site-header .nav-toggle .icon-close{ display:none; } .site-header.nav-open .nav-toggle .icon-menu{ display:none; } .site-header.nav-open .nav-toggle .icon-close{ display:block; } /* The desktop mega-menu system (nav-item / mega-panel / mega-grid / ...) is hidden entirely on mobile — replaced below by .mobile-nav-list, a plain, purpose-built accordion list. Desktop's own mega-menu markup, styles and behavior are untouched; this only hides it below 900px. */ .site-header .main-nav > .nav-item{ display:none; } .mobile-nav-list{ display:flex; flex-direction:column; gap:8px; width:100%; padding:4px 0 18px; } .mobile-nav-group, a.mobile-nav-toplevel{ width:100%; border-radius:var(--radius-md); background:var(--bg-soft); border:1px solid transparent; overflow:hidden; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .mobile-nav-group.is-open{ background:var(--white); border-color:var(--border); box-shadow:var(--shadow-sm); } a.mobile-nav-toplevel:active{ background:var(--bg-soft-2); } .mobile-nav-toplevel{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; background:none; border:none; outline:none; text-align:left; text-decoration:none; cursor:pointer; font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--secondary); } .mobile-nav-toplevel:hover { background: none; } .mobile-nav-toplevel:focus-visible{ background: none; box-shadow:inset 0 0 0 2px var(--primary-light); } .mobile-nav-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:var(--radius-sm); background:var(--bg-soft-2); color:var(--primary-dark); transition:background .25s ease, color .25s ease; } .mobile-nav-icon svg{ width:18px; height:18px; } .mobile-nav-group.is-open > .mobile-nav-toplevel .mobile-nav-icon{ background:var(--primary); color:var(--white); } .mobile-nav-label{ flex:1; } .mobile-nav-chevron{ flex-shrink:0; color:var(--muted-light); transition:transform .3s var(--ease), color .25s ease; } .mobile-nav-group.is-open > .mobile-nav-toplevel .mobile-nav-chevron{ transform:rotate(180deg); color:var(--primary-dark); } .mobile-nav-arrow{ flex-shrink:0; color:var(--muted-light); transition:transform .2s ease; } a.mobile-nav-toplevel:active .mobile-nav-arrow{ transform:translateX(2px); } .mobile-nav-sublist{ max-height:0; overflow:hidden; display:flex; flex-direction:column; padding:0 10px; transition:max-height .4s var(--ease), padding .3s ease; } .mobile-nav-group.is-open .mobile-nav-sublist{ max-height:720px; padding:2px 10px 10px; } .mobile-nav-sublist a{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; outline:none; font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s ease, background .2s ease; } .mobile-nav-sublist a:focus-visible{ box-shadow:inset 0 0 0 2px var(--primary-light); } .mobile-nav-subicon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:16px; height:16px; color:var(--muted-light); transition:color .2s ease; } .mobile-nav-subicon svg{ width:14px; height:14px; } .mobile-nav-sublist a:hover{ color:var(--primary-dark); background:var(--bg-soft-2); } .mobile-nav-sublist a:hover .mobile-nav-subicon{ color:var(--primary-dark); } } /* ========================================================================== Hero — light, centered banner: eyebrow, headline, subhead and CTAs, flowing straight into the (also light) trust-logo carousel. ========================================================================== */ .hero-wash{ background:var(--white); } /* Wraps the hero AND the logo carousel so one continuous canvas can sit behind both — the animation isn't boxed into the hero alone. */ .hero-band{ position:relative; } .hero{ position:relative; z-index:1; overflow:hidden; text-align:center; padding:190px 0 0; } /* Neural-network canvas spanning the hero + logo carousel — drifting nodes and connecting lines, a soft nod to the AI-product positioning. Same engine as the CTA/services-banner canvases elsewhere on the page. */ .hero-bg-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.34; pointer-events:none; z-index:0; } .hero-inner{ position:relative; z-index:1; } #hero .hero-inner{ margin-bottom:48px; } .hero-copy{ max-width:1000px; margin:0 auto; } .hero-copy h1{ margin-top:18px; font-family:var(--font-head); font-weight:800; letter-spacing:-.02em; font-size:clamp(38px, 5.2vw, 72px); line-height:1.12; color:var(--secondary); } .hero-copy h1 .accent{ color:var(--primary-dark); } .hero-copy .sub{ max-width:700px; margin:22px auto 0; font-size:18px; line-height:1.7; color:var(--muted); } .hero-cta{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:36px; flex-wrap:wrap; } /* Trust-points row — scoped to #hero (shared across many page banners) AND this page-specific class, so it can only ever match on the one page that actually uses .trust-points-row; safe to keep in the shared stylesheet. */ #hero .trust-points-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; margin:28px auto 0; padding:14px 30px; max-width:fit-content; border-radius:var(--radius-full); background:var(--bg-soft-2); border:1px solid var(--border); } #hero .trust-points-row span{ font-size:13.5px; font-weight:800; letter-spacing:.02em; color:var(--secondary); white-space:nowrap; } #hero .trust-points-row .divider{ width:4px; height:4px; border-radius:50%; background:var(--primary); } @media (max-width:640px){ #hero .trust-points-row{ padding:14px 22px; } } .eyebrow--sparkle::before{ display:none; } .eyebrow--sparkle svg{ width:15px; height:15px; color:var(--primary-dark); flex-shrink:0; } /* Decorative orb reused by the "Why Choose" section */ .orb-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:230px; height:230px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #d4f27a, var(--primary) 45%, #4c7a10 100%); box-shadow:0 0 100px 10px rgba(144,195,34,.4), inset -14px -14px 40px rgba(0,0,0,.25); animation:pulse-core 5s ease-in-out infinite; } .orb-ring{ position:absolute; left:50%; top:50%; border-radius:50%; border:1px solid rgba(144,195,34,.35); transform:translate(-50%,-50%); } .orb-ring--1{ width:320px; height:320px; animation:spin 22s linear infinite; } .orb-ring--2{ width:390px; height:390px; border-style:dashed; animation:spin 34s linear infinite reverse; } @keyframes pulse-core{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.045);} } @keyframes spin{ from{ transform:translate(-50%,-50%) rotate(0deg);} to{ transform:translate(-50%,-50%) rotate(360deg);} } @media (max-width: 560px){ .hero{ padding-top:168px; } .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ justify-content:center; } .orb-ring--1{ width:250px; height:250px; } .orb-ring--2{ width:300px; height:300px; } } /* ========================================================================== Logo carousel ========================================================================== */ .logos-section{ padding:8px 0 130px; position:relative; z-index:1; } .trust-label{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:36px; } .trust-label .line{ height:1px; width:72px; background:linear-gradient(90deg, transparent, var(--muted-light)); } .trust-label .line:last-child{ background:linear-gradient(90deg, var(--muted-light), transparent); } .trust-label .label-text{ font-size:13.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-light); white-space:nowrap; } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track{ display:flex; align-items:center; width:max-content; gap:52px; animation:marquee 60s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } /* Fixed-width slot (not sized to the image's own intrinsic size) — with loading="lazy" images, an auto-width box has no reserved space until each image finishes loading, so the track's total width kept changing after first paint. Since the scroll animation is a percentage transform (translateX(-50%)), any mid-animation width change shows up as a sudden speed jump. A fixed slot keeps the track width constant from frame one. */ .logo-img{ display:flex; flex-shrink:0; align-items:center; justify-content:center; width:160px; height:72px; padding:0 8px; } .logo-img img{ /* height (not max-height) so low-resolution source logos scale UP to a consistent visual size instead of just displaying at their own small intrinsic size — object-fit:contain + max-width:100% still shrinks an unusually wide wordmark back down to fit the slot without distortion. */ height:52px; width:auto; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.6; transition:opacity .3s ease, filter .3s ease; } /* HID Global's source mark is a solid filled badge (not a thin wordmark like its neighbors here), so at the same height it grayscales into a noticeably heavier block. Sized down on its own so its visual weight matches the row instead of dominating it. */ .logo-img img[alt="HID Global"]{ height:36px; } .logo-img:hover img{ filter:grayscale(0); opacity:1; } @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } /* Dark continuation of the hero banner — same background, so the trust-logo strip reads as part of one seamless block rather than a new section. Logos get the invert/grayscale/screen treatment (see .results-logos) since most source marks are dark-on-transparent and would vanish here. */ .logos-section--dark{ padding-top:0; padding-bottom:80px; background:linear-gradient(180deg, var(--secondary-700) 0%, var(--secondary-700) 100%); } .logos-section--dark .trust-label{ justify-content:flex-start; margin-bottom:28px; } .logos-section--dark .label-text{ color:rgba(255,255,255,.5); } .logos-section--dark .logo-img img{ filter:grayscale(1) invert(1) brightness(1.35); mix-blend-mode:screen; opacity:.75; } .logos-section--dark .logo-img:hover img{ filter:grayscale(0) invert(0) brightness(1); mix-blend-mode:normal; opacity:1; } /* ========================================================================== Services ========================================================================== */ #services{ padding-top:0; padding-bottom:0; overflow:visible; position:relative; z-index:0; } /* Bigger than the shared .h2 sitewide default — this is the first section heading below the hero, so it carries more of the page's visual weight than a mid-page section header. Scoped to #services only. */ #services .h2{ font-size:clamp(32px, 4.4vw, 50px); } /* "Grow" reveal: section starts as an inset, narrow, rounded floating card — pulled up so it peeks into view early, overlapping the wash above it — and expands to full-bleed, flush, as it scrolls into view. The margin/radius/ padding/shadow are driven continuously by scroll position (see main.js updateGrowBoxes), so it tracks the scroll 1:1 instead of waiting for a threshold then playing a fixed-duration transition. A short transition is kept only to smooth the ~16ms steps between throttled scroll updates. */ .grow-box{ background:var(--bg-soft); transition:margin .12s linear, border-radius .12s linear, padding .12s linear, box-shadow .12s linear; /* Sensible no-JS fallback: flush, full-bleed, safe to read either way. */ margin:0; padding-top:100px; padding-bottom:100px; border-radius:0; box-shadow:none; } /* align-items:stretch — all three cards match the tallest one. Nothing here changes size on hover (see below), so stretch is safe and keeps the three cards level without needing a hand-tuned min-height. */ /* align-items:start (not stretch) deliberately — a hovered card is free to grow and reveal its service list without dragging its neighbours' row height along with it. The shared min-height below keeps all three level at rest instead. */ /* align-items:stretch is safe here — nothing on the card changes size on hover (only colors), so stretching all three to the tallest one never fights with a hover-driven resize the way it would if the list expanded. */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; } .service-card{ position:relative; display:flex; flex-direction:column; padding:36px 30px 30px; border-radius:26px; background:var(--white); border:1px solid var(--border); transition:border-color .6s var(--ease), box-shadow .6s var(--ease); overflow:hidden; } /* Everything on the card is always visible — hovering only crossfades the fill + text colors to the brand's dark navy (--secondary), the same treatment used everywhere else on the page (hero, foundation, industry cards) — not a new color, and nothing resizes or hides. The dark fill is a separate ::before overlay that fades in via opacity rather than a background swap on .service-card itself: animating between a solid color and a gradient can't be interpolated, so it used to snap instantly instead of transitioning — the opacity fade is what makes the hover feel smooth. */ .service-card::before{ content:''; position:absolute; inset:0; z-index:0; border-radius:inherit; background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); opacity:0; transition:opacity .6s var(--ease); } .service-card:hover::before{ opacity:1; } .service-card:hover{ border-color:transparent; box-shadow:0 30px 60px -28px rgba(0,39,54,.35); } .service-card > *{ position:relative; z-index:1; } .service-head{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .service-icon{ flex-shrink:0; width:56px; height:56px; border-radius:16px; background:linear-gradient(150deg, var(--bg-soft-2), var(--bg-soft)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .6s var(--ease), border-color .6s var(--ease); } .service-icon svg{ width:24px; height:24px; color:var(--primary-dark); transition:color .6s var(--ease); } .service-card:hover .service-icon{ background:linear-gradient(150deg, var(--primary-dark), var(--primary)); border-color:transparent; } .service-card:hover .service-icon svg{ color:var(--white); } .service-head-text{ min-width:0; } .service-card h3{ font-family:var(--font-head); font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--secondary); text-align:left; transition:color .6s var(--ease); } .service-card:hover h3{ color:var(--white); } /* Category pill kept in the markup for content parity with the mega-menu, but hidden here — the resting card is icon / title / description / list / CTA. */ .service-tag{ display:none; } .service-card p{ margin-top:16px; font-size:15px; line-height:1.7; color:var(--muted); transition:color .6s var(--ease); } .service-card:hover p{ color:rgba(255,255,255,.72); } /* Sub-page list — pulled straight from the Services mega-menu so the homepage overview and the nav menu never drift out of sync content-wise. Always shown; only its colors crossfade with the card. */ .practice-list{ margin-top:22px; display:flex; flex-direction:column; gap:8px; } .practice-list li{ list-style:none; } .practice-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--secondary); font-size:13px; font-weight:600; line-height:1.25; background:var(--bg-soft); transition:background .4s var(--ease), color .6s var(--ease); } .practice-item > span:not(.practice-item-icon){ flex:1; } .service-card:hover .practice-item{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); } .service-card:hover .practice-item:hover{ background:rgba(255,255,255,.12); color: #fff; } .practice-item-icon{ flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--white); color:var(--primary-dark); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease); } .practice-item-icon svg{ width:13px; height:13px; } .service-card:hover .practice-item-icon{ background:rgba(255,255,255,.1); color:var(--primary-light); border-color:transparent; } /* The trailing arrow — subtle at rest, brightens on that item's own hover, pointing at that service's specific page. */ .practice-item-arrow{ width:13px; height:13px; flex-shrink:0; color:var(--muted-light); opacity:.6; transition:opacity .3s var(--ease), transform .3s var(--ease), color .6s var(--ease); } .practice-item:hover .practice-item-arrow{ opacity:1; transform:translateX(2px); } .service-card:hover .practice-item-arrow{ color:var(--primary-light); } /* Text link + arrow instead of a button — pinned to the bottom of the card so all three line up regardless of description length. */ .service-link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:26px; font-size:14.5px; font-weight:700; color:var(--primary-dark); text-decoration:none; transition:gap .3s var(--ease), color .6s var(--ease); } .service-link svg{ width:15px; height:15px; transition:transform .3s var(--ease); } .service-link:hover{ gap:12px; } .service-card:hover .service-link{ color:var(--primary-light); } @media (max-width: 900px){ .services-grid{ grid-template-columns:1fr; } } /* Animated promo banner */ .services-banner{ position:relative; margin-top:48px; border-radius:var(--radius-lg); overflow:hidden; background:radial-gradient(120% 160% at 0% 0%, var(--secondary-500) 0%, var(--secondary) 55%, #001019 100%); padding:56px 52px; min-height:220px; display:flex; align-items:center; justify-content:space-between; gap:32px; } #services-banner-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.75; } .services-banner-copy{ position:relative; z-index:1; max-width:650px; } .services-banner-copy h3{ font-family:var(--font-head); font-size:clamp(24px,2.8vw,32px); font-weight:800; line-height:1.25; color:var(--white); text-align: left; } .services-banner-copy p{ margin-top:14px; font-size:15.5px; line-height:1.7; color:rgba(255,255,255,.68); max-width:650px; } .services-banner-copy .btn{ margin-top:26px; } /* Button as its own flex item (not stacked inside the copy block) so it sits on the right side, vertically centered by the banner's own align-items:center — rather than below the paragraph on the left. */ .services-banner-cta{ position:relative; z-index:1; flex-shrink:0; } @media (max-width: 900px){ .services-banner{ flex-direction:column; text-align:center; padding:40px 28px; } .services-banner-copy h3 { text-align: center; } .services-banner-copy{ max-width:none; } .services-banner-copy p{ margin-left:auto; margin-right:auto; } .services-banner-cta{ margin-top:6px; } } /* ========================================================================== Enterprise AI Foundation — IX Accelerator architecture breakdown ========================================================================== */ /* No overflow:hidden here — the ::before glow already sits inset:0 so it never bleeds past the section, and clipping would break position:sticky on the .foundation-rail columns (an overflow ancestor becomes sticky's containing block, which stops it from tracking the real scroll). */ .foundation-section{ background:linear-gradient(180deg, var(--secondary) 0%, var(--secondary-700) 100%); position:relative; } .foundation-section::before{ content:''; position:absolute; inset:0; opacity:.7; pointer-events:none; background:radial-gradient(55% 80% at 10% 0%, rgba(144,195,34,.18), transparent 60%), radial-gradient(45% 70% at 95% 100%, rgba(144,195,34,.12), transparent 60%); } .foundation-section .container, .flagship-section .container, .engagement-section .container{ position:relative; z-index:1; } .foundation-head{ max-width:760px; margin:0 auto; text-align:center; } .foundation-title{ margin-top:18px; font-family:var(--font-head); font-weight:800; text-transform:capitalize; font-size:clamp(28px, 3.4vw, 44px); line-height:1.16; letter-spacing:-.01em; color:var(--white); } .foundation-title .accent{ color:var(--primary-light); } .foundation-intro{ margin-top:16px; font-size:17px; line-height:1.7; color:rgba(255,255,255,.68); } /* ---------- Original rails + multi-card-per-stage diagram — still used by the IX AI Foundry page's copy of this section (ai-foundry.html), which keeps the fuller version. Only the homepage swapped to the simplified .foundation-pipeline below; this page-agnostic shared stylesheet has to keep serving both markups. ---------- */ .foundation-apps{ margin-top:48px; padding:24px 28px; border-radius:var(--radius-lg); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); } .foundation-apps-label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-light); } .foundation-apps-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .foundation-apps-tags span{ padding:8px 16px; border-radius:var(--radius-full); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.85); transition:background .3s ease, border-color .3s ease, transform .3s var(--ease); } .foundation-apps-tags span:hover{ background:rgba(144,195,34,.14); border-color:rgba(144,195,34,.45); transform:translateY(-2px); } /* Enterprise Users / Data (left) and Model Ecosystem / External Tools (right) flank the Build->Measure stack as two narrow rails, framing it as one end-to-end system rather than an isolated stage diagram. */ .foundation-layout{ margin-top:48px; display:grid; grid-template-columns:200px 1fr 200px; grid-template-areas:"rail-left core rail-right"; gap:28px; align-items:start; } .foundation-core{ grid-area:core; } .foundation-rail{ position:sticky; top:120px; display:flex; flex-direction:column; gap:20px; } .foundation-rail--left{ grid-area:rail-left; } .foundation-rail--right{ grid-area:rail-right; } .foundation-rail-block{ padding:20px 20px; border-radius:var(--radius-md); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); transition:background .35s ease, border-color .35s ease, transform .35s var(--ease); } .foundation-rail-block:hover{ background:rgba(255,255,255,.07); border-color:rgba(144,195,34,.4); transform:translateY(-3px); } .foundation-rail-label{ display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-light); margin-bottom:22px; } .foundation-rail-tags{ display:flex; flex-direction:column; } .foundation-rail-tags span{ display:flex; align-items:flex-start; gap:10px; padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); line-height:1.4; transition:color .3s ease; } .foundation-rail-tags span:first-child{ padding-top:0; } .foundation-rail-tags span:last-child{ border-bottom:0; padding-bottom:0; } .foundation-rail-tags span::before{ content:''; flex-shrink:0; margin-top:7px; width:5px; height:5px; border-radius:50%; background:var(--primary-light); } .foundation-rail-block:hover .foundation-rail-tags span{ color:rgba(255,255,255,.92); } .foundation-core > .foundation-apps{ margin-top:0; } @media (max-width:1200px){ .foundation-layout{ grid-template-columns:1fr; grid-template-areas:"core" "rail-left" "rail-right"; } .foundation-rail{ position:static; flex-direction:row; flex-wrap:wrap; } .foundation-rail-block{ flex:1; min-width:260px; } } /* A connecting "spine" runs behind the stage markers, turning the four rows into a visible pipeline (Build -> Connect -> Govern -> Measure) instead of a plain label list. Hovering a stage highlights its node and dims the others, so the architecture responds as you explore it. */ .foundation-stages{ position:relative; margin-top:8px; } .foundation-stages::before{ content:''; position:absolute; left:23px; top:44px; bottom:44px; width:1px; z-index:0; background:linear-gradient(180deg, rgba(144,195,34,.5), rgba(144,195,34,.5) 50%, rgba(144,195,34,.08)); } .foundation-stage{ position:relative; display:flex; gap:36px; align-items:flex-start; padding:32px 0; border-top:1px solid rgba(255,255,255,.12); transition:opacity .4s ease; } [data-stage-group].has-active .foundation-stage:not(.is-active){ opacity:.45; } .foundation-stage-marker{ position:relative; z-index:1; flex:0 0 168px; display:flex; align-items:center; gap:14px; } .foundation-stage-num{ flex-shrink:0; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid rgba(144,195,34,.35); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:13px; font-weight:800; color:var(--primary-light); transition:background .4s ease, border-color .4s ease, box-shadow .4s var(--ease), transform .4s var(--ease); } .foundation-stage.is-active .foundation-stage-num{ background:var(--primary); border-color:var(--primary); color:var(--secondary); box-shadow:0 0 0 6px rgba(144,195,34,.16); transform:scale(1.08); } .foundation-stage-label{ font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--primary-light); } .foundation-stage-cards{ position:relative; z-index:1; flex:1; display:flex; gap:20px; flex-wrap:wrap; } .foundation-card{ position:relative; flex:1; min-width:220px; padding:22px 24px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); transition:border-color .35s ease, background .35s ease, transform .35s var(--ease), box-shadow .35s ease; } .foundation-card:hover{ background:rgba(255,255,255,.07); border-color:var(--primary); transform:translateY(-4px); box-shadow:0 20px 36px -20px rgba(0,0,0,.4); } .foundation-card-icon{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:14px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:background .35s ease, border-color .35s ease; } .foundation-card-icon svg{ width:18px; height:18px; color:var(--primary-light); } .foundation-card:hover .foundation-card-icon{ background:var(--primary); border-color:transparent; } .foundation-card:hover .foundation-card-icon svg{ color:var(--secondary); } .foundation-card h3{ font-family:var(--font-head); font-size:15.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--white); text-align: left; } .foundation-card p{ margin-top:10px; font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.6); } .foundation-card--highlight{ background:rgba(144,195,34,.1); border-color:var(--primary); box-shadow:0 10px 26px rgba(144,195,34,.16); } .foundation-deploy{ display:flex; align-items:center; gap:36px; padding:28px 0; border-top:1px solid rgba(255,255,255,.12); } .foundation-deploy-label{ flex:0 0 168px; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--primary-light); } .foundation-deploy-list{ display:flex; flex-wrap:wrap; gap:10px; } .foundation-deploy-list span{ padding:8px 16px; border-radius:var(--radius-full); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); font-size:13.5px; font-weight:700; color:rgba(255,255,255,.85); transition:background .3s ease, border-color .3s ease, transform .3s var(--ease); } .foundation-deploy-list span:hover{ background:rgba(144,195,34,.14); border-color:rgba(144,195,34,.45); transform:translateY(-2px); } @media (max-width: 900px){ .foundation-stages::before{ display:none; } .foundation-stage, .foundation-deploy{ flex-direction:column; gap:16px; } /* .foundation-stage-marker / .foundation-deploy-label carry a fixed flex:0 0 168px for the desktop row layout, where 168px is a WIDTH. Once the parent flips to flex-direction:column above, that same flex-basis is read as a HEIGHT instead — stretching each label into a tall, mostly-empty box and leaving a large gap before its content. Reset the basis so it sizes to actual content height. */ .foundation-stage-marker, .foundation-deploy-label{ flex:0 0 auto; } .foundation-stage-cards{ flex-direction:column; } } /* Minimal 5-card horizontal pipeline (Build -> Connect -> Deploy -> Govern & Operate -> Measure), connected by a line behind the cards — replaces the earlier rails + multi-card-per-stage diagram, which was too dense for what this section needs to communicate at a glance. Cards are a solid opaque fill (not the translucent-glass look used elsewhere on this dark section) specifically so the connecting line runs fully behind each card — a translucent card let the line show through and cut across the icon, instead of only being visible in the gaps between cards the way a connected-nodes diagram should read. */ .foundation-pipeline{ position:relative; margin-top:48px; display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; } .foundation-pipeline::before{ content:''; position:absolute; top:37px; left:8%; right:8%; height:1px; z-index:0; background:linear-gradient(90deg, transparent, rgba(144,195,34,.5) 15%, rgba(144,195,34,.5) 85%, transparent); box-shadow:0 0 12px 1px rgba(144,195,34,.25); } .foundation-pipeline-card{ position:relative; z-index:1; overflow:hidden; isolation:isolate; padding:26px 22px; border-radius:18px; background:linear-gradient(160deg, var(--secondary-600) 0%, var(--secondary-700) 100%); border:1px solid rgba(255,255,255,.1); box-shadow:0 16px 32px -22px rgba(0,0,0,.4); transition:border-color .35s ease, transform .35s var(--ease), box-shadow .35s ease; } .foundation-pipeline-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(70% 80% at 100% 0%, rgba(144,195,34,.18), transparent 60%); opacity:0; transition:opacity .35s ease; } .foundation-pipeline-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2; background:linear-gradient(90deg, var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .foundation-pipeline-card > *{ position:relative; z-index:1; } .foundation-pipeline-card:hover{ border-color:rgba(144,195,34,.4); transform:translateY(-6px); box-shadow:0 26px 50px -22px rgba(0,0,0,.5); } .foundation-pipeline-card:hover::before{ opacity:1; } .foundation-pipeline-card:hover::after{ transform:scaleX(1); } .foundation-pipeline-card--highlight{ background:linear-gradient(160deg, var(--secondary-500) 0%, var(--secondary-600) 100%); border-color:rgba(144,195,34,.5); box-shadow:0 20px 44px -18px rgba(144,195,34,.28); } .foundation-pipeline-card--highlight::before{ opacity:1; } .foundation-pipeline-card--highlight::after{ transform:scaleX(1); } .foundation-pipeline-num{ position:absolute; top:20px; right:22px; z-index:1; font-family:var(--font-head); font-size:26px; font-weight:800; line-height:1; color:rgba(144,195,34,.3); } .foundation-pipeline-icon{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:13px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 22px -6px var(--primary-glow); transition:transform .35s var(--ease); } .foundation-pipeline-icon svg{ width:19px; height:19px; color:var(--white); } .foundation-pipeline-card:hover .foundation-pipeline-icon{ transform:scale(1.08) rotate(-4deg); } .foundation-pipeline-card h3{ margin-top:18px; font-family:var(--font-head); font-size:15px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--white); text-align:left; } .foundation-pipeline-card p{ margin-top:8px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.6); text-align:left; } @media (max-width:900px){ .foundation-pipeline{ grid-template-columns:1fr 1fr; } .foundation-pipeline::before{ display:none; } } @media (max-width:560px){ .foundation-pipeline{ grid-template-columns:1fr; } } .foundation-values{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; margin-top:44px; } .foundation-values span{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--white); } .foundation-values span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--primary-light); box-shadow:0 0 0 4px rgba(144,195,34,.18); } .foundation-bottom{ display:flex; align-items:center; gap:32px; margin-top:32px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); } .foundation-callout{ flex:1; padding:20px 26px; border-radius:var(--radius-md); background:rgba(255,255,255,.04); border-left:3px solid var(--primary); } .foundation-callout h3{ font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--white); text-align: left; } .foundation-callout p{ margin-top:8px; font-size:14px; line-height:1.65; color:rgba(255,255,255,.6); } .foundation-bottom .btn{ flex-shrink:0; } @media (max-width: 900px){ .foundation-bottom{ flex-direction:column; align-items:stretch; } .foundation-bottom .btn{ justify-content:center; } } /* Shared centered section header, reused by the Industries and How We Work sections below (light-theme counterpart to .foundation-head) — same eyebrow / uppercase-title / centered-intro format as every other section header on the page. */ .split-head{ max-width:930px; margin:0 auto; text-align:center; } .split-title{ margin-top:18px; font-family:var(--font-head); font-weight:800; text-transform:capitalize; font-size:clamp(28px, 3.4vw, 44px); line-height:1.16; letter-spacing:-.01em; color:var(--secondary); } .split-title .accent{ color:var(--primary-dark); } .split-intro{ margin-top:16px; font-size:17px; line-height:1.7; color:var(--muted); } .split-head-cta{ margin-top:48px; text-align:center; } /* ========================================================================== Industries — flagship solution packs ========================================================================== */ /* A distinct white surface — deliberately not the --bg-soft wash the practices section above uses, so the two sections read as separate, plus a soft two-tone glow for depth instead of a flat fill. */ .flagship-section{ background:var(--bg-soft); position:relative; overflow:hidden; } .flagship-section::before{ content:''; position:absolute; inset:0; opacity:1; pointer-events:none; z-index:0; background:radial-gradient(38% 46% at 6% 0%, rgba(144,195,34,.07), transparent 60%), radial-gradient(32% 40% at 100% 100%, rgba(0,39,54,.05), transparent 60%); } .flagship-grid{ margin-top:56px; display:grid; grid-template-columns:1.35fr 1fr; gap:28px; align-items:stretch; } .flagship-card{ position:relative; display:flex; flex-direction:column; padding:44px 40px; border-radius:28px; background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); color:var(--white); overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.08); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .flagship-card::before{ content:''; position:absolute; inset:0; opacity:.9; pointer-events:none; z-index:0; background:radial-gradient(55% 60% at 100% 0%, rgba(144,195,34,.22), transparent 60%), radial-gradient(45% 55% at 0% 100%, rgba(144,195,34,.1), transparent 60%); } .flagship-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); } .flagship-card:hover{ transform:translateY(-8px); box-shadow:0 34px 64px -22px rgba(0,20,28,.45); border-color:rgba(144,195,34,.35); } .flagship-card:hover::after{ transform:scaleX(1); } .flagship-card > *{ position:relative; z-index:1; } .flagship-icon{ width:56px; height:56px; border-radius:16px; margin-bottom:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; transition:background .4s ease, transform .4s var(--ease), border-color .4s ease; } .flagship-icon svg{ width:25px; height:25px; color:var(--primary-light); transition:color .4s ease; } .flagship-card:hover .flagship-icon{ background:var(--primary); border-color:transparent; transform:scale(1.06) rotate(-4deg); } .flagship-card:hover .flagship-icon svg{ color:var(--secondary); } .flagship-tag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-light); } .flagship-card h3{ margin-top:10px; font-family:var(--font-head); font-size:32px; font-weight:800; text-transform:capitalize; letter-spacing:-.01em; text-align: left; color: var(--white); } .flagship-desc{ margin-top:16px; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.65); max-width:520px; } .flagship-legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; } .flagship-legend span{ display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--radius-full); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.6); } .flagship-items{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; } .flagship-item{ display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); text-decoration:none; transition:background .3s ease, border-color .3s ease, transform .3s var(--ease); } .flagship-item:hover{ background:rgba(255,255,255,.08); border-color:rgba(144,195,34,.35); transform:translateY(-2px); } .flagship-item strong{ display:block; font-size:13.5px; font-weight:700; color:var(--white); line-height:1.3; } .flagship-item small{ display:block; margin-top:3px; font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.4); } .flagship-dot{ flex-shrink:0; width:7px; height:7px; border-radius:50%; } .flagship-dot--live{ background:var(--primary); box-shadow:0 0 0 3px rgba(144,195,34,.25); } .flagship-dot--dev{ background:#e2a53c; box-shadow:0 0 0 3px rgba(226,165,60,.2); } .flagship-dot--roadmap{ background:rgba(255,255,255,.3); } .flagship-simple-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; } .flagship-simple-list span{ padding:13px 14px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); font-size:14px; font-weight:600; color:rgba(255,255,255,.85); transition:background .3s ease, border-color .3s ease; } .flagship-simple-list span:hover{ background:rgba(255,255,255,.08); border-color:rgba(144,195,34,.35); } /* Pinned to the bottom of the card (flex column + margin-top:auto) so a shorter list, like Financial Services, still ends on a consistent footer rather than trailing into empty space. */ .flagship-link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:28px; font-size:14px; font-weight:700; color:var(--primary-light); text-decoration:none; transition:gap .2s ease; } .flagship-link:hover{ gap:12px; } .flagship-link svg{ width:15px; height:15px; } /* "More industries" — a proper card grid, same interactive language as the two flagship cards above (hover fills with the brand navy). */ .flagship-more-label{ display:block; margin-top:44px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-light); } .flagship-more{ margin-top:16px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .flagship-more-card{ position:relative; display:flex; align-items:center; gap:14px; padding:22px; border-radius:18px; background:var(--white); border:1px solid var(--border); text-decoration:none; overflow:hidden; isolation:isolate; transition:border-color .4s ease, box-shadow .4s ease, transform .35s var(--ease); } .flagship-more-card::before{ content:''; position:absolute; inset:0; z-index:0; opacity:0; background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); transition:opacity .4s ease; } .flagship-more-card:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 24px 46px -22px rgba(0,39,54,.3); } .flagship-more-card:hover::before{ opacity:1; } .flagship-more-card > *{ position:relative; z-index:1; } .flagship-more-icon{ flex-shrink:0; width:44px; height:44px; border-radius:13px; background:var(--bg-soft-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .4s ease, border-color .4s ease; } .flagship-more-icon svg{ width:20px; height:20px; color:var(--primary-dark); transition:color .4s ease; } .flagship-more-card:hover .flagship-more-icon{ background:var(--primary); border-color:transparent; } .flagship-more-card:hover .flagship-more-icon svg{ color:var(--secondary); } .flagship-more-title{ flex:1; font-size:15px; font-weight:700; line-height:1.3; color:var(--secondary); transition:color .4s ease; } .flagship-more-card:hover .flagship-more-title{ color:var(--white); } .flagship-more-arrow{ width:15px; height:15px; flex-shrink:0; color:var(--muted-light); transition:transform .3s ease, color .4s ease; } .flagship-more-card:hover .flagship-more-arrow{ color:var(--primary-light); transform:translateX(3px); } @media (max-width: 900px){ .flagship-grid{ grid-template-columns:1fr; } .flagship-items{ grid-template-columns:1fr; } .flagship-simple-list{ grid-template-columns:1fr; } .flagship-more{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .flagship-more{ grid-template-columns:1fr; } } /* ========================================================================== How We Work — engagement models. Individual lifted cards (not a bordered table row) with a ghost step-number, a gradient-fill icon on hover, and a top accent bar — the same interactive language as the service and industry cards elsewhere on the page, so the whole homepage reads as one system. */ .engagement-section{ background:var(--bg-soft); position:relative; overflow:hidden; } .engagement-section::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(35% 45% at 100% 0%, rgba(144,195,34,.07), transparent 60%), radial-gradient(30% 40% at 0% 100%, rgba(0,39,54,.05), transparent 60%); } .engagement-section .container{ position:relative; z-index:1; } .engagement-row{ margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .engagement-col{ position:relative; padding:30px 24px 28px; border-radius:22px; background:var(--white); border:1px solid var(--border); overflow:hidden; isolation:isolate; transition:transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; } .engagement-col::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); } .engagement-col:hover{ transform:translateY(-6px); border-color:rgba(144,195,34,.35); box-shadow:0 28px 50px -26px rgba(0,39,54,.3); } .engagement-col:hover::before{ transform:scaleX(1); } .engagement-col > *{ position:relative; z-index:1; } .engagement-top{ display:flex; align-items:flex-start; justify-content:space-between; } .engagement-num{ order:2; font-family:var(--font-head); font-size:28px; font-weight:800; line-height:1; color:var(--bg-soft-2); transition:color .4s ease; } .engagement-col:hover .engagement-num{ color:var(--bg-soft); } .engagement-icon{ width:50px; height:50px; border-radius:15px; background:linear-gradient(150deg, var(--bg-soft-2), var(--bg-soft)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .4s ease, transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; } .engagement-icon svg{ width:22px; height:22px; color:var(--primary-dark); transition:color .4s ease; } .engagement-col:hover .engagement-icon{ background:linear-gradient(150deg, var(--primary-dark), var(--primary)); border-color:transparent; transform:scale(1.08) rotate(-4deg); box-shadow:0 14px 26px rgba(144,195,34,.32); } .engagement-col:hover .engagement-icon svg{ color:var(--white); } .engagement-col h3{ margin-top:22px; font-family:var(--font-head); font-size:15.5px; font-weight:800; text-transform:capitalize; letter-spacing:-.005em; color:var(--secondary); line-height:1.3; min-height:40px; text-align: left; } .engagement-flow{ display:block; margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--primary-dark); line-height:1.5; } .engagement-col p{ margin-top:14px; font-size:13.5px; line-height:1.65; color:var(--muted); } @media (max-width: 1100px){ .engagement-row{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .engagement-row{ grid-template-columns:1fr; } } /* ========================================================================== Our Operating Model — vertical layer stack, foundation up to outcome ========================================================================== */ .model-section{ background:var(--white); position:relative; overflow:hidden; } .model-glow{ position:absolute; z-index:0; border-radius:50%; pointer-events:none; filter:blur(10px); background:radial-gradient(circle, rgba(144,195,34,.16) 0%, rgba(144,195,34,0) 70%); } .model-glow--a{ width:640px; height:640px; top:-260px; left:-220px; } .model-glow--b{ width:520px; height:520px; bottom:-240px; right:-180px; } .model-section .container{ position:relative; z-index:1; } /* One flat row, five equal-width/equal-height cards (four layers + Result) — grid's row-track stretch makes every card match the tallest one automatically, regardless of how many lines its title or description wraps to. */ .model-stack{ max-width:1320px; margin:56px auto 0; } .model-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; align-items:stretch; } .model-card{ display:flex; flex-direction:column; height:100%; padding:26px 22px; border-radius:20px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .model-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(144,195,34,.32); } .model-card-top{ display:flex; align-items:center; gap:10px; } .model-card-num{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--bg-soft-2); border:1px solid var(--border); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:13px; transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); } .model-card-num svg{ width:17px; height:17px; } .model-card-tag{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-light); } .model-card h3{ margin-top:16px; font-family:var(--font-head); font-size:16.5px; font-weight:800; letter-spacing:-.005em; color:var(--secondary); line-height:1.3; text-align: left; } .model-card p{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); } /* The Result card closes the row — filled with the brand gradient so it reads as the payoff the four layers build to, not just a fifth plain card. */ .model-card.model-card--result{ background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); border-color:transparent; box-shadow:0 30px 60px -20px rgba(0,39,54,.4); } .model-card.model-card--result .model-card-num{ background:linear-gradient(150deg, var(--primary-dark), var(--primary)); border-color:transparent; color:var(--white); } .model-card.model-card--result .model-card-tag{ color:var(--primary-light); } .model-card.model-card--result h3{ color:var(--white); } .model-card.model-card--result p{ color:rgba(255,255,255,.7); } @media (max-width: 1100px){ .model-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width: 640px){ .model-grid{ grid-template-columns:1fr; } } /* ========================================================================== Success stories — expand-on-hover case-study cards, scrollable row ========================================================================== */ .stories-section{ background:var(--bg-soft); } .stories-section .section-header{ margin-bottom:10px; } /* Prev/next arrows, top-right of the row — same spot and shape as the old carousel's nav, now scrolling the row by one card instead of swapping slides. */ .stories-row-head{ display:flex; justify-content:flex-end; margin-top:-8px; } .story-nav{ display:flex; gap:12px; } .story-nav-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--border) !important; background:var(--white); color:var(--secondary); display:flex; align-items:center; justify-content:center; padding:0; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .story-nav-btn svg{ width:18px; height:18px; } .story-nav-btn:hover{ background:var(--secondary); color:var(--white); border-color:var(--secondary); transform:translateY(-2px); } .story-nav-btn:disabled{ opacity:.35; pointer-events:none; } /* A horizontally scrollable row, arrow-driven (see main.js — the nav buttons wrap around at either end for an infinite-feeling loop). The native scrollbar is hidden since the arrows are the intended control; no shadow on the cards, so nothing needs extra padding to clear it. */ .stories-row{ display:flex; gap:20px; margin-top:24px; overflow-x:auto; padding:10px 6px 10px; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; } .stories-row::-webkit-scrollbar{ display:none; } .story-card{ position:relative; flex:0 0 200px; height:520px; border-radius:24px; overflow:hidden; background:linear-gradient(165deg, var(--secondary-500) 0%, var(--secondary) 55%, #001019 100%); cursor:pointer; scroll-snap-align:start; transition:flex-basis .55s var(--ease); } .story-card.is-expanded{ flex-basis:660px; } .story-card-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; transition:opacity .6s var(--ease), transform 8s linear; } .story-card.is-expanded .story-card-bg{ opacity:.32; } .story-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,20,28,.15) 0%, rgba(0,20,28,.55) 55%, rgba(0,15,22,.94) 100%); } .story-card-top{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; padding:26px 26px 0; } .story-card-icon{ flex-shrink:0; width:48px; height:48px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; color:var(--secondary); box-shadow:0 10px 22px var(--primary-glow); } .story-card-icon svg{ width:22px; height:22px; } .story-card-num{ font-family:var(--font-head); font-size:14px; font-weight:800; letter-spacing:.04em; color:rgba(255,255,255,.45); } .story-card-body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:28px 26px; } .story-card-tag{ display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-light); opacity:0; max-height:0; overflow:hidden; transition:opacity .4s ease, max-height .5s var(--ease); } .story-card.is-expanded .story-card-tag{ opacity:1; max-height:24px; margin-bottom:12px; } .story-card-title{ font-family:var(--font-head); font-size:24px; font-weight:800; line-height:1.24; letter-spacing:-.005em; color:var(--white); text-align: left; } .story-card-desc{ font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.72); max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .55s var(--ease), opacity .4s ease, margin-top .55s var(--ease); } .story-card.is-expanded .story-card-desc{ max-height:110px; opacity:1; margin-top:16px; } /* 2-3 flagship stats per card, side by side — each num+label pair keeps its own original prominence (big gradient number), the row just wraps more than one of them instead of a single centered stat. */ .story-card-stats{ display:flex; flex-wrap:wrap; gap:20px 32px; max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .55s var(--ease), opacity .45s ease, margin-top .55s var(--ease); } .story-card.is-expanded .story-card-stats{ max-height:90px; opacity:1; margin-top:24px; } .story-card-stat{ display:flex; align-items:center; gap:10px; } .story-card-stat-num{ font-family:var(--font-head); font-size:34px; font-weight:800; line-height:1; background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .story-card-stat-label{ font-size:13px; font-weight:700; line-height:1.3; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.7); width: 150px; } /* A real filled button, not a plain text+arrow link — it needs to read as clickable at a glance against the photo background, not blend in with the rest of the white card text. */ .story-card-link{ display:inline-flex; align-items:center; gap:8px; max-height:0; opacity:0; overflow:hidden; font-size:13.5px; font-weight:800; color:var(--white); background:var(--primary); padding:12px 22px; border-radius:var(--radius-full); box-shadow:0 10px 26px rgba(144,195,34,.5), 0 0 0 1px rgba(255,255,255,.18) inset; transition:max-height .55s var(--ease), opacity .45s ease, gap .3s ease, background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .story-card.is-expanded .story-card-link{ max-height:46px; opacity:1; margin-top:26px; } .story-card-link svg{ width:15px; height:15px; } /* Hover inverts to a white pill with a green ring — a solid navy hover nearly disappeared against the dark photo backdrop these buttons sit on, so this needed to stay bright/high-contrast rather than darken. */ .story-card-link:hover{ gap:11px; background:var(--white); color:var(--secondary); transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.35), 0 0 0 2px var(--primary); } .stories-cta{ text-align:center; margin-top:56px; } @media (max-width: 900px){ .stories-row{ gap:14px; } .story-card, .story-card.is-expanded{ flex-basis:82vw; height:auto; } .story-card-title{ font-size:20px; } .story-card-stats{ gap:14px 20px; } .story-card-stat-num{ font-size:28px; } /* The tag/description/stats/button only ever appear on .is-expanded, which is driven by mouseenter/focus — neither fires on a touch device, so every card but the hardcoded first one stayed collapsed with its content permanently hidden. Show it all unconditionally here instead of gating on a hover state touch can't produce. The desktop version also caps each piece at a fixed max-height so it can animate open on hover — at a narrower mobile width the same text wraps to more lines than that cap allows, so it was getting clipped mid-sentence. .story-card-body is also switched from absolute (needed for the desktop hover overlay) to static, normal-flow positioning here, so the now-unbounded content can grow the card itself (height:auto above) instead of overflowing it. */ .story-card-body{ position:relative; padding:24px 24px 28px; } /* That static body now flows right after the icon row instead of being pinned to the card's bottom (the darkest part of the photo overlay below) — so the title/tag land much higher up, over a much lighter, barely-dimmed part of the background photo, and read poorly against it. Darken the overlay uniformly (and dim the photo a touch more) so text stays legible wherever it falls now that it's no longer confined to that one dark bottom band. */ .story-card::after{ background:linear-gradient(180deg, rgba(0,20,28,.62) 0%, rgba(0,20,28,.8) 45%, rgba(0,15,22,.95) 100%); } .story-card-bg, .story-card.is-expanded .story-card-bg{ opacity:.16; } /* Matching the .is-expanded-qualified selector too — those desktop rules carry higher specificity (two classes) than a bare .story-card-desc{}, so on the one card that already has is-expanded in its markup they'd otherwise still win and keep clipping it even here. */ .story-card-tag, .story-card.is-expanded .story-card-tag{ opacity:1; max-height:none; margin-bottom:12px; } .story-card-desc, .story-card.is-expanded .story-card-desc{ max-height:none; opacity:1; margin-top:16px; } .story-card-stats, .story-card.is-expanded .story-card-stats{ max-height:none; opacity:1; margin-top:24px; } .story-card-link, .story-card.is-expanded .story-card-link{ max-height:none; opacity:1; margin-top:26px; } } /* ========================================================================== AI Accelerator — differentiation (dark, 8 solution families + 90-day stat) ========================================================================== */ .accelerator-section{ background:linear-gradient(180deg, var(--secondary) 0%, var(--secondary-700) 100%); position:relative; overflow:hidden; } .accelerator-section::before{ content:''; position:absolute; inset:0; opacity:.7; background:radial-gradient(55% 80% at 10% 0%, rgba(144,195,34,.18), transparent 60%), radial-gradient(45% 70% at 95% 100%, rgba(144,195,34,.12), transparent 60%); } .accelerator-top{ position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:center; margin-bottom:64px; } .accelerator-copy .sub--light{ max-width:560px; } .accelerator-copy .btn{ margin-top:28px; } .accelerator-stat-card{ position:relative; text-align:center; padding:48px 32px; background:linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); backdrop-filter:blur(10px); box-shadow:0 30px 60px -20px rgba(0,0,0,.4); } .accelerator-stat-num{ display:block; font-family:var(--font-head); font-weight:800; line-height:1; font-size:clamp(64px,7vw,88px); background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .accelerator-stat-unit{ display:block; margin-top:4px; font-size:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); } .accelerator-stat-label{ display:block; margin-top:18px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.6); } @media (max-width: 900px){ .accelerator-top{ grid-template-columns:1fr; gap:32px; } .accelerator-stat-card{ padding:36px 24px; } } /* ========================================================================== Tech stack logo wall (manufacturing page) — left/right layout matching .awards-inner (text + CTA on the left, a 4-column auto-scrolling wall on the right). Same duplication trick + @keyframes as the awards ticker (data-marquee-vertical, awardsScrollUp) — reused as-is, just with new column/tile classes since the tiles look different (image + label). ========================================================================== */ #tech-stack{ padding:40px 0; } .techstack-inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; } .techstack-inner h2.h2--light{ text-align:left; } .techstack-cta{ margin-top:32px; } .techstack-columns{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; height:580px; overflow:hidden; } /* A mask-image fade doesn't work here the way it does for the plain .marquee logo strips: it fades each opaque white tile card's own OPACITY, so near the edge a tile turns into a hazy translucent white smudge instead of actually blending into the dark section behind it — reading as a visibly separate band, not a smooth fade. Overlaying a solid-color-to-transparent gradient in the section's own background color instead hides the tile edges completely, so it reads as the background genuinely fading over the content. */ .techstack-columns::before, .techstack-columns::after{ content:''; position:absolute; left:0; right:0; height:80px; z-index:2; pointer-events:none; } .techstack-columns::before{ top:0; } .techstack-columns::after{ bottom:0; } .accelerator-section .techstack-columns::before{ background:linear-gradient(180deg, var(--secondary) 0%, transparent 100%); } .accelerator-section .techstack-columns::after{ background:linear-gradient(0deg, var(--secondary-700) 0%, transparent 100%); } .techstack-column{ position:relative; overflow:hidden; height:100%; } .techstack-column-track{ display:flex; flex-direction:column; gap:16px; animation:awardsScrollUp 32s linear infinite; } .techstack-column:nth-child(2) .techstack-column-track{ animation-duration:38s; } .techstack-column:nth-child(3) .techstack-column-track{ animation-duration:28s; } .techstack-column:nth-child(4) .techstack-column-track{ animation-duration:35s; } .techstack-tile{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:150px; padding:20px 14px; border-radius:16px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease; } .techstack-tile:hover{ box-shadow:var(--shadow-md); border-color:rgba(144,195,34,.4); transform:translateY(-2px); } .techstack-tile img{ max-height:64px; max-width:82%; width:auto; height:auto; object-fit:contain; transition:transform .3s ease; } .techstack-tile:hover img{ transform:scale(1.08); } .techstack-tile span{ font-size:12.5px; font-weight:700; color:var(--secondary); text-align:center; } @media (max-width: 900px){ .techstack-inner{ grid-template-columns:1fr; } .techstack-columns{ grid-template-columns:repeat(2,1fr); height:460px; margin-top:36px; } /* There are still 4 .techstack-column elements in the markup — switching the grid to 2 columns without also removing 2 of them just wraps them into 2 rows instead, squeezing each vertical scroll track into half the height. Hiding the last 2 columns keeps the remaining 2 in a single row, each free to use the full container height. Every industry page's own CSS used to restate this same fix individually — consolidated here since it's identical everywhere .techstack-columns is used. */ .techstack-column:nth-child(3), .techstack-column:nth-child(4){ display:none; } } @media (max-width: 480px){ .techstack-columns{ height:380px; } .techstack-tile{ min-height:120px; padding:14px 10px; } .techstack-tile img{ max-height:44px; } } /* ========================================================================== Recognition wall (manufacturing page only) — a light, static badge wall replacing the dark auto-scrolling .awards-columns used by every other page. New classes throughout (.recognition-*), so index.html and ai-strategy-roadmap.html's own .awards-section is completely untouched. ========================================================================== */ .recognition-section{ background:var(--bg-soft); } .recognition-wall{ margin-top:56px; display:flex; flex-wrap:wrap; justify-content:center; gap:20px; } .recognition-badge{ display:flex; align-items:center; justify-content:center; width:170px; height:110px; padding:20px; border-radius:16px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .recognition-badge:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(144,195,34,.35); } .recognition-badge img{ max-width:80%; max-height:56px; width:auto; height:auto; object-fit:contain; } .recognition-badge--fba{ max-height:68px; } .recognition-cta{ text-align:center; margin-top:48px; } @media (max-width: 560px){ .recognition-badge{ width:140px; height:92px; padding:16px; } .recognition-badge img{ max-height:46px; } } /* ========================================================================== Find Your Manufacturing AI Solution — business-function selector ========================================================================== */ .usecase-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px; } .usecase-tab{ display:inline-flex; align-items:center; gap:10px; padding:8px 20px 8px 8px; border-radius:var(--radius-full); background-color:var(--white); border:1px solid var(--border); color:var(--secondary); font-size:14.5px; font-weight:700; cursor:pointer; /* background-color LONGHAND, not the `background` shorthand — animating the shorthand under a transition is unreliable (same issue found with `transition:flex` earlier; fixed the same way, via the longhand). */ transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .usecase-tab-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background-color:var(--bg-soft-2); color:var(--primary-dark); transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .usecase-tab-icon svg{ width:16px; height:16px; } .usecase-tab:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .usecase-tab.active{ background-color:var(--secondary); border-color:var(--secondary); color:var(--white); box-shadow:var(--shadow-md); } .usecase-tab.active .usecase-tab-icon{ background-color:var(--primary); color:var(--secondary); transform:scale(1.06); } .usecase-panel{ display:none; } .usecase-panel.active{ display:block; } /* Interactive spotlight — 6-item list on the left; hovering/focusing/ clicking an item updates a rich preview panel on the right. Same proven mechanism as the "Our Approach" section elsewhere on this page (mouseenter + focus + click activation), reused here for consistency and reliability. */ .usecase-interactive{ display:grid; grid-template-columns:1fr 1.25fr; gap:32px; align-items:stretch; } .usecase-list{ display:flex; flex-direction:column; gap:10px; } .usecase-list-item{ position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; background-color:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; cursor:pointer; font:inherit; color:inherit; transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .usecase-list-item.active{ background-color:var(--white); border-color:var(--primary); box-shadow:var(--shadow-md); } .usecase-list-num{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:12.5px; color:var(--muted-light); background-color:var(--white); border:1px solid var(--border); transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .usecase-list-item.active .usecase-list-num{ background-color:var(--secondary); color:var(--white); border-color:var(--secondary); } .usecase-list-title{ flex:1; font-size:15px; font-weight:700; color:var(--secondary); line-height:1.35; } .usecase-list-arrow{ flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background-color:var(--primary); color:var(--white); opacity:0; transform:scale(.6) rotate(-45deg); transition:opacity .3s var(--ease), transform .3s var(--ease); } .usecase-list-item.active .usecase-list-arrow{ opacity:1; transform:scale(1) rotate(0deg); } .usecase-list-arrow svg{ width:14px; height:14px; } .usecase-preview{ position:relative; } .usecase-preview-panel{ display:none; position:relative; overflow:hidden; height:100%; padding:44px 40px; border-radius:var(--radius-lg); background-color:var(--secondary); background-image:linear-gradient(155deg, var(--secondary) 0%, var(--secondary-700) 100%); } .usecase-preview-panel.active{ display:flex; flex-direction:column; justify-content:center; } .usecase-preview-panel::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(70% 60% at 90% 0%, rgba(144,195,34,.25), transparent 60%); } .usecase-preview-icon{ position:relative; z-index:1; width:64px; height:64px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:var(--white); box-shadow:0 16px 30px -8px var(--primary-glow); } .usecase-preview-icon svg{ width:28px; height:28px; } .usecase-preview-title{ position:relative; z-index:1; margin-top:24px; font-size:26px; font-weight:800; color:var(--white); line-height:1.3; } .usecase-preview-desc{ position:relative; z-index:1; margin-top:14px; font-size:15px; line-height:1.7; color:rgba(255,255,255,.65); max-width:420px; } .usecase-preview-cta{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:28px; padding:14px 26px; border-radius:var(--radius-full); background-color:var(--primary); color:var(--secondary); font-size:14px; font-weight:700; transition:background-color .3s var(--ease), gap .3s var(--ease); } .usecase-preview-cta:hover{ background-color:var(--primary-light); gap:13px; } .usecase-preview-cta svg{ width:15px; height:15px; } .usecase-callout{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:48px; padding:32px 40px; border-radius:var(--radius-lg); background:linear-gradient(120deg, var(--secondary) 0%, var(--secondary-600) 100%); box-shadow:var(--shadow-lg); } .usecase-callout p{ margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.85); max-width:520px; } .usecase-callout strong{ color:var(--white); } .usecase-callout .btn{ flex-shrink:0; } @media (max-width: 900px){ .usecase-interactive{ grid-template-columns:1fr; gap:20px; } .usecase-preview-panel{ padding:32px 28px; } .usecase-callout{ padding:28px; } } @media (max-width: 640px){ .usecase-tabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; -webkit-overflow-scrolling:touch; } .usecase-tabs::-webkit-scrollbar{ display:none; } .usecase-tab{ flex-shrink:0; } .usecase-callout{ flex-direction:column; align-items:flex-start; } } /* ========================================================================== Testimonials — quote cards with a person + role only, deliberately no company name/logo (real client attributions aren't cleared for publication yet). Dark navy gradient (the same one used by the Foundation/Results sections) rather than another light fill — Success Stories right before this and Value Engine right after are both light, so a light fill here would merge into one of them instead of reading as its own section; the dark background also gives the white cards real contrast to sit on. ========================================================================== */ .testimonial-section{ background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); position:relative; } /* Reuses the generic .service-carousel/.service-carousel-track carousel (arrow buttons + progress bar, driven by [data-carousel] in main.js — already used for the industry-tile rows) instead of a fixed 3-up grid, now that there are 4 cards and more may be added later. Card width still comes from the shared ".service-carousel-track > *" 3-visible rule. */ .testimonial-carousel{ margin-top:56px; } .testimonial-carousel-track{ align-items:stretch; } .testimonial-card{ position:relative; display:flex; flex-direction:column; padding:40px 32px 32px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .testimonial-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(144,195,34,.3); } /* Oversized decorative quote glyph, tucked behind the copy as a watermark rather than a literal "quote icon" above the text — the modern/editorial feel the section asked for, without competing with the star rating for attention at the top of the card. */ .testimonial-quote-mark{ position:absolute; top:22px; right:24px; width:64px; height:auto; color:var(--bg-soft-2); z-index:0; pointer-events:none; } .testimonial-stars{ position:relative; z-index:1; display:flex; gap:4px; color:var(--primary); } .testimonial-stars svg{ width:16px; height:16px; } .testimonial-text{ position:relative; z-index:1; margin-top:18px; font-size:16px; line-height:1.7; color:var(--secondary); font-style:italic; } .testimonial-footer{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:26px; } .testimonial-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--bg-soft-2); flex-shrink:0; } .testimonial-person{ display:flex; flex-direction:column; gap:2px; min-width:0; } .testimonial-person strong{ font-size:14.5px; font-weight:800; color:var(--secondary); } .testimonial-person span{ font-size:12.5px; color:var(--muted); line-height: 18px; } /* No progress bar, no dots — just the arrow buttons, centered under the cards. With only 4 short cards a position indicator reads as more machinery than this carousel needs. */ .testimonial-carousel-controls{ justify-content:center; } /* ========================================================================== IX Value Engine — baseline-to-ROI process rail + metrics readout ========================================================================== */ /* Light theme, deliberately — this section used to share the same dark navy gradient as Awards/Recognition right after it, which made the two run together with no visible seam. Awards stays untouched; this one goes light instead so the boundary between them is obvious. Plain white (not --bg-soft) since Success Stories right before this is already --bg-soft — matching it would just merge that seam instead. */ .value-section{ background:var(--white); position:relative; overflow:hidden; } .value-glow{ position:absolute; z-index:0; top:-30%; right:-10%; width:900px; height:900px; border-radius:50%; background:radial-gradient(circle, rgba(144,195,34,.12) 0%, rgba(144,195,34,0) 70%); pointer-events:none; } .value-section .container{ position:relative; z-index:1; } /* Header now uses the same centered eyebrow/h2/sub pattern as every other section on the page (see .section-header.center) instead of a one-off asymmetric layout — the whole point was to make this section feel consistent with the rest, not like a different product. */ /* Five-step process, as connected cards rather than bare bars + text — numbered icon tile on top, title, description. A thin connecting line runs behind the row to keep the "sequence" reading; the final step breaks into the brand gradient to read as the payoff. Each step (past the baseline) carries a small tag naming the value-engine metric it feeds, folding what used to be a separate metrics grid into the step that actually produces it. */ .value-steps-label{ display:block; margin-top:56px; text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); } .value-steps{ position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; margin-top:20px; } .value-steps::before{ content:''; position:absolute; top:44px; left:calc(10% + 8px); right:calc(10% + 8px); height:2px; z-index:0; background:linear-gradient(90deg, rgba(144,195,34,.15), var(--primary)); } .value-step{ position:relative; z-index:1; padding:28px 22px; border-radius:20px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .value-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(144,195,34,.32); } .value-step-top{ display:flex; align-items:center; justify-content:space-between; } .value-step-icon{ flex-shrink:0; width:44px; height:44px; border-radius:13px; background:linear-gradient(150deg, var(--bg-soft-2), var(--bg-soft)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary-dark); transition:background .4s ease, color .4s ease, border-color .4s ease; } .value-step-icon svg{ width:21px; height:21px; } .value-step-num{ font-family:var(--font-head); font-size:13px; font-weight:800; color:var(--muted-light); } .value-step h3{ margin-top:18px; font-family:var(--font-head); font-size:16.5px; font-weight:800; letter-spacing:.01em; color:var(--secondary); text-align: left; } .value-step p{ margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--muted); } .value-step--result{ background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); border-color:transparent; box-shadow:0 30px 60px -22px rgba(0,39,54,.4); } .value-step--result .value-step-icon{ background:linear-gradient(150deg, var(--primary-dark), var(--primary)); border-color:transparent; color:var(--white); box-shadow:0 10px 22px var(--primary-glow); } .value-step--result .value-step-num{ color:rgba(255,255,255,.4); } .value-step--result h3{ color:var(--white); } .value-step--result p{ color:rgba(255,255,255,.68); } /* "You Get" — the four outcomes the whole engine exists to produce, set in a dark banner so it reads as the payoff up front, before the step-by-step mechanics below. */ .value-outcomes-label{ display:block; margin-top:48px; text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); } .value-outcomes{ position:relative; overflow:hidden; margin-top:20px; padding:44px 40px; border-radius:28px; background:linear-gradient(150deg, var(--secondary) 0%, var(--secondary-700) 100%); display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; } .value-outcomes::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 90% at 10% 0%, rgba(144,195,34,.2), transparent 60%); } .value-outcome{ position:relative; text-align:center; padding-left:24px; border-left:1px solid rgba(255,255,255,.14); } .value-outcome:first-child{ padding-left:0; border-left:0; } .value-outcome-icon{ width:52px; height:52px; margin:0 auto 18px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:var(--primary-light); } .value-outcome-icon svg{ width:24px; height:24px; } .value-outcome h3{ font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--white); } .value-outcome p{ margin-top:8px; font-size:13px; line-height:1.5; color:rgba(255,255,255,.62); } .value-cta{ margin-top:44px; text-align:center; } @media (max-width: 1100px){ .value-steps{ grid-template-columns:repeat(3, 1fr); row-gap:24px; } .value-steps::before{ display:none; } .value-outcomes{ grid-template-columns:repeat(2, 1fr); row-gap:32px; } .value-outcome:nth-child(3){ padding-left:0; border-left:0; } } @media (max-width: 640px){ .value-steps{ grid-template-columns:1fr 1fr; } .value-outcomes{ grid-template-columns:1fr; padding:32px 24px; } .value-outcome{ padding-left:0; border-left:0; } } /* ========================================================================== Awards / Recognition ========================================================================== */ .awards-section{ background:var(--secondary); position:relative; overflow:hidden; } .awards-section::before{ content:''; position:absolute; inset:0; opacity:.5; background:radial-gradient(60% 80% at 15% 20%, rgba(144,195,34,.14), transparent 60%); } .awards-inner{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; } .awards-cta{ margin-top:32px; } .awards-inner h2.h2.h2--light { text-align: left; } .awards-columns{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; height:500px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); } .awards-column{ position:relative; overflow:hidden; height:100%; } .awards-column-track{ display:flex; flex-direction:column; gap:16px; animation:awardsScrollUp 24s linear infinite; } .awards-column--reverse .awards-column-track{ animation-direction:reverse; } .awards-column:nth-child(2) .awards-column-track{ animation-duration:28s; } .awards-column:nth-child(3) .awards-column-track{ animation-duration:20s; } .awards-column:nth-child(4) .awards-column-track{ animation-duration:26s; } @keyframes awardsScrollUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } } .awards-logo-card{ flex-shrink:0; display:flex; align-items:center; justify-content:center; min-height:120px; padding:22px 16px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); transition:background .35s ease, border-color .35s ease; } .awards-logo-card:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); } .awards-logo-card img{ max-height:54px; max-width:86%; width:auto; height:auto; filter:grayscale(1) invert(1) brightness(1.35); mix-blend-mode:screen; opacity:.85; transition:filter .35s ease, opacity .35s ease, mix-blend-mode .35s ease; } .awards-logo-card:hover img{ filter:grayscale(0) invert(0) brightness(1); mix-blend-mode:normal; opacity:1; } .awards-logo-card .awards-logo--fba{ max-height:70px; } @media (max-width: 900px){ .awards-inner{ grid-template-columns:1fr; } .awards-columns{ grid-template-columns:repeat(2,1fr); grid-template-rows:1fr; gap:14px; height:460px; margin-top:36px; } } /* Horizontal-banner variant of the same Awards logos (AI Strategy & Roadmap page) — a centered header over one full-bleed scrolling row instead of the 4-column vertical wall above. Reuses the shared .marquee/.logo-img pattern (see "Logo marquee" earlier in this file) with the same grayscale+invert+screen treatment as .results-logos, since this section sits on the same dark navy background. */ .awards-marquee{ margin-top:90px; } .awards-marquee.marquee{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .awards-marquee .marquee-track{ animation-duration:38s; gap:52px; } .awards-marquee .logo-img{ padding:0 12px; } .awards-marquee .logo-img img{ filter:grayscale(1) invert(1) brightness(1.35); mix-blend-mode:screen; opacity:.8; transition:filter .35s ease, opacity .35s ease; height: 75px; } .awards-marquee .logo-img:hover img{ filter:grayscale(0) invert(0) brightness(1); mix-blend-mode:normal; opacity:1; } .awards-marquee .awards-marquee-logo--fba{ max-height:108px; } /* ========================================================================== Industries — arrow-navigated carousel with peeking side cards ========================================================================== */ .industries-nav-row{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:56px; } .industries-tabs-arrow{ flex-shrink:0; width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--white); color:var(--secondary); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .industries-tabs-arrow svg{ width:17px; height:17px; } .industries-tabs-arrow:hover{ background:var(--secondary); color:var(--white); border-color:var(--secondary); transform:translateY(-2px); } .industries-stage{ position:relative; height:360px; overflow:hidden; } .industry-card{ position:absolute; top:0; left:50%; width:100%; max-width:340px; overflow:hidden; background:linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); border:1px solid rgba(0,39,54,.06); border-radius:24px; padding:30px 26px 28px; text-decoration:none; box-shadow:0 2px 6px rgba(0,39,54,.05); opacity:0; pointer-events:none; visibility:hidden; transition:transform .6s var(--ease), opacity .6s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), filter .5s var(--ease); } .industry-card.is-active{ transform:translateX(-50%) scale(1) rotate(0deg); opacity:1; pointer-events:auto; visibility:visible; z-index:3; box-shadow:0 12px 24px -8px rgba(0,39,54,.1), 0 30px 60px -16px rgba(0,39,54,.16); } .industry-card.is-prev{ transform:translateX(-140%) scale(.85) rotate(-10deg); opacity:.7; visibility:visible; z-index:2; filter:grayscale(.4); cursor:pointer; pointer-events:auto; } .industry-card.is-next{ transform:translateX(40%) scale(.85) rotate(10deg); opacity:.7; visibility:visible; z-index:2; filter:grayscale(.4); cursor:pointer; pointer-events:auto; } .industry-card.is-prev-2{ transform:translateX(-230%) scale(.72) rotate(-16deg); opacity:.4; visibility:visible; z-index:1; filter:grayscale(.6); cursor:pointer; pointer-events:auto; } .industry-card.is-next-2{ transform:translateX(130%) scale(.72) rotate(16deg); opacity:.4; visibility:visible; z-index:1; filter:grayscale(.6); cursor:pointer; pointer-events:auto; } .industry-card::before{ content:''; position:absolute; z-index:0; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, var(--primary-glow), transparent 70%); top:-110px; right:-90px; opacity:0; transform:scale(.7); transition:opacity .5s ease, transform .6s ease; } .industry-card::after{ content:''; position:absolute; z-index:0; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, var(--primary), rgba(144,195,34,0) 55%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s ease; pointer-events:none; } .industry-card:hover::before{ opacity:1; transform:scale(1); } .industry-card:hover::after{ opacity:1; } .industry-card.is-active:hover{ transform:translateX(-50%) scale(1) translateY(-8px); box-shadow:0 16px 30px -8px rgba(0,39,54,.14), 0 36px 64px -16px rgba(0,39,54,.2); border-color:transparent; } .industry-card.is-prev:hover{ transform:translateX(-140%) scale(.89) rotate(-10deg); opacity:1; filter:grayscale(0); border-color:transparent; } .industry-card.is-next:hover{ transform:translateX(40%) scale(.89) rotate(10deg); opacity:1; filter:grayscale(0); border-color:transparent; } .industry-card.is-prev-2:hover{ transform:translateX(-230%) scale(.76) rotate(-16deg); opacity:.75; filter:grayscale(.3); border-color:transparent; } .industry-card.is-next-2:hover{ transform:translateX(130%) scale(.76) rotate(16deg); opacity:.75; filter:grayscale(.3); border-color:transparent; } .industry-index{ position:absolute; z-index:1; top:20px; right:24px; font-family:var(--font-head); font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--secondary); opacity:.06; } .industry-card-body{ position:relative; z-index:1; } .industry-icon{ position:relative; width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:var(--white); box-shadow:0 14px 26px -8px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.08); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .industry-icon svg{ width:24px; height:24px; } .industry-card:hover .industry-icon{ transform:scale(1.08) rotate(-4deg); box-shadow:0 18px 32px -8px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.08); } .industry-card h4{ margin-top:20px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--secondary); line-height:1.3; text-align: left; } .industry-card p{ margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.6; } .industry-link{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:13.5px; font-weight:700; color:var(--secondary); transition:color .3s var(--ease); } .industry-link-icon{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--bg-soft-2); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .industry-link-icon svg{ width:13px; height:13px; } .industry-card:hover .industry-link{ color:var(--primary-dark); } .industry-card:hover .industry-link-icon{ background:var(--primary); color:var(--white); transform:translateX(3px); } @media (max-width: 900px){ .industry-card.is-prev{ transform:translateX(-125%) scale(.85) rotate(-10deg); } .industry-card.is-next{ transform:translateX(25%) scale(.85) rotate(10deg); } } @media (max-width: 560px){ .industries-nav-row{ margin-bottom:36px; } .industries-stage{ height:auto; } .industry-card{ display:none; position:relative; left:0; max-width:none; } .industry-card.is-active{ display:block; transform:none; } .industry-card.is-active:hover{ transform:none; } } /* ========================================================================== What We Build — interactive expanding-panel showcase. Hover a panel (or tap it, on touch) and it grows to reveal full detail while its siblings collapse to just an icon + horizontal label. Hover is the primary desktop trigger (pure CSS); the JS click toggle sets a "sticky" .is-active state so touch devices — which have no real hover — always have one expanded. ========================================================================== */ .build-showcase{ display:flex; gap:16px; height:520px; } .build-panel{ position:relative; flex-grow:1; flex-shrink:1; flex-basis:0; min-width:0; overflow:hidden; border:none; border-radius:var(--radius-lg); padding:0; cursor:pointer; background:var(--secondary); /* Transition the flex-grow LONGHAND, not the `flex` shorthand — animating the shorthand is unreliable across engines/contexts. */ transition:flex-grow .65s cubic-bezier(.16,.84,.44,1), box-shadow .4s var(--ease); } .build-panel:hover, .build-panel.is-active{ flex-grow:3.6; box-shadow:0 30px 60px -20px rgba(0,39,54,.4); } /* Duotone photo treatment: real photo, desaturated, then tinted with a brand navy→green gradient via mix-blend-mode:color — same technique used for Spotify-style playlist art. One consistent duotone recipe across all 4 panels keeps them feeling like one branded family; the differentiation comes from each photo's own content, not from varying the color treatment per panel. */ .build-panel-img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; opacity:.22; filter:grayscale(1) contrast(1.05) brightness(.85); transition:opacity .5s var(--ease), transform .8s var(--ease), filter .5s var(--ease); } .build-panel:hover .build-panel-img, .build-panel.is-active .build-panel-img{ opacity:.32; transform:scale(1.06); filter:grayscale(1) contrast(1.1) brightness(.95); } .build-panel-duotone{ position:absolute; inset:0; z-index:2; mix-blend-mode:color; background:linear-gradient(150deg, var(--secondary) 0%, var(--primary-dark) 100%); } /* Full-panel dark wash (not just a bottom fade) — the photo now reads as a faint texture behind the navy, not a clearly legible illustration. */ .build-panel-scrim{ position:absolute; inset:0; z-index:3; background: linear-gradient(0deg, rgba(0,39,54,.95) 0%, rgba(0,39,54,.8) 42%, rgba(0,39,54,.62) 68%, rgba(0,39,54,.5) 85%, rgba(0,39,54,.6) 100%); } .build-panel::before{ content:''; position:absolute; inset:0; z-index:4; background:radial-gradient(120% 90% at 15% 0%, rgba(144,195,34,.28), transparent 60%); opacity:0; transition:opacity .6s var(--ease); } .build-panel:hover::before, .build-panel.is-active::before{ opacity:1; } .build-panel-index{ position:absolute; top:28px; right:26px; z-index:5; font-family:var(--font-head); font-weight:800; font-size:14px; color:rgba(255,255,255,.5); letter-spacing:.04em; text-shadow:0 1px 4px rgba(0,0,0,.4); } .build-panel-icon{ position:absolute; z-index:5; top:30px; left:28px; width:52px; height:52px; border-radius:50%; flex-shrink:0; background:rgba(0,39,54,.55); border:1px solid rgba(255,255,255,.3); color:var(--primary-light); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; transition:background .4s var(--ease), transform .4s var(--ease); } .build-panel-icon svg{ width:22px; height:22px; } .build-panel:hover .build-panel-icon, .build-panel.is-active .build-panel-icon{ background:var(--primary); color:var(--secondary); transform:scale(1.08); } /* Horizontal label — only visible while the panel is collapsed, wrapping to 2 lines if needed within the narrow collapsed width. */ .build-panel-label{ position:absolute; z-index:5; left:28px; right:20px; bottom:30px; font-family:var(--font-head); font-weight:800; font-size:17px; line-height:1.3; color:var(--white); text-shadow:0 1px 6px rgba(0,0,0,.5); opacity:1; transition:opacity .25s var(--ease); } .build-panel:hover .build-panel-label, .build-panel.is-active .build-panel-label{ opacity:0; } .build-panel-content{ position:absolute; z-index:5; inset:120px 34px 32px 30px; display:flex; flex-direction:column; justify-content:flex-end; text-align:left; opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease) .12s, transform .4s var(--ease) .12s; pointer-events:none; } .build-panel:hover .build-panel-content, .build-panel.is-active .build-panel-content{ opacity:1; transform:translateY(0); pointer-events:auto; } .build-panel-title{ display:block; font-family:var(--font-head); font-size:25px; font-weight:800; color:var(--white); line-height:1.25; } .build-panel-desc{ display:block; margin-top:12px; font-size:14px; line-height:1.65; color:rgba(255,255,255,.62); max-width:300px; } .build-panel-stat{ display:block; margin-top:14px; font-size:12.5px; font-weight:800; color:var(--primary-light); line-height:1.6; max-width:300px; } .build-panel-cta{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:22px; padding:12px 20px; border-radius:var(--radius-full); background:var(--primary); color:var(--secondary); font-size:13px; font-weight:700; transition:background .3s var(--ease), gap .3s var(--ease); } .build-panel-cta svg{ width:14px; height:14px; } .build-panel:hover .build-panel-cta:hover, .build-panel.is-active .build-panel-cta:hover{ background:var(--primary-light); gap:13px; } /* While ANY panel in the row is hovered, force the "sticky" .is-active one (set by the click handler, for touch) back to collapsed unless it's the one being hovered — otherwise hovering a different panel would leave two panels expanded at once instead of cleanly swapping which one is open. */ .build-showcase:has(.build-panel:hover) .build-panel.is-active:not(:hover){ flex-grow:1; box-shadow:none; } .build-showcase:has(.build-panel:hover) .build-panel.is-active:not(:hover)::before{ opacity:0; } .build-showcase:has(.build-panel:hover) .build-panel.is-active:not(:hover) .build-panel-icon{ background:rgba(255,255,255,.08); color:var(--primary-light); transform:none; } .build-showcase:has(.build-panel:hover) .build-panel.is-active:not(:hover) .build-panel-label{ opacity:1; } .build-showcase:has(.build-panel:hover) .build-panel.is-active:not(:hover) .build-panel-content{ opacity:0; transform:translateY(14px); pointer-events:none; } .build-all-row{ display:flex; justify-content:center; margin-top:48px; } @media (max-width: 900px){ .build-showcase{ flex-direction:column; height:auto; gap:12px; } .build-panel{ flex:none; height:76px; transition:height .55s cubic-bezier(.16,.84,.44,1), box-shadow .4s var(--ease); } .build-panel.is-active{ height:340px; } /* Collapsed: the icon's desktop size (52px at top:30px) doesn't fit the 76px row and was getting clipped by overflow:hidden — shrink it and vertically center it in the row, with the label centered alongside. */ .build-panel-icon{ top:50%; left:20px; transform:translateY(-50%); width:40px; height:40px; } .build-panel-icon svg{ width:18px; height:18px; } .build-panel-label{ left:76px; right:24px; bottom:auto; top:50%; transform:translateY(-50%); } /* Active: the panel is tall enough (340px+) for the icon's full-size, top-anchored desktop treatment, so restore it explicitly. */ .build-panel.is-active .build-panel-icon{ top:30px; left:28px; width:52px; height:52px; transform:scale(1.08); } .build-panel.is-active .build-panel-icon svg{ width:22px; height:22px; } /* Content sits BELOW the icon in the expanded state (not beside it, like in the collapsed row) — left must match the icon's own left (28px), not the 98px offset used to clear the collapsed row's icon+label. */ .build-panel-content{ inset:auto 24px 24px 28px; top:104px; } } @media (max-width: 560px){ .build-panel.is-active{ height:400px; } .build-panel-desc{ max-width:none; } } /* ========================================================================== Why choose us ========================================================================== */ .why-section{ background:var(--white); padding-top:60px; } .why-section--soft{ background:linear-gradient(180deg, var(--bg-soft) 0%, var(--white) 100%); } #services{ padding-bottom:0; } .why-columns{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; } .why-sticky{ position:sticky; top:120px; } .why-sticky .sub{ margin-top:18px; } .why-sticky-btn{ margin-top:28px; } /* This column is much narrower than a full-width section header (it shares the row with the sticky .85fr/1.15fr split), so the shared .h2 clamp overflowed its own two
-separated lines into three. Sized down just enough for both lines to fit at the column's real width. */ .why-sticky h2{ font-size:clamp(24px, 2.35vw, 31px); } .why-list-col{ display:flex; flex-direction:column; gap:14px; } .why-row{ position:relative; display:flex; gap:20px; padding:26px; border-radius:var(--radius-md); background:rgba(255,255,255,.5); border:1px solid var(--border); border-left:3px solid var(--border); transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } .why-row:hover{ background:var(--white); box-shadow:var(--shadow-sm); } .why-row::before{ content:''; position:absolute; top:74px; bottom:26px; left:49px; width:2px; background:var(--border); transition:background .4s ease; } .why-row.active::before{ background:var(--primary-light); } .why-row-num{ flex-shrink:0; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary-400); transition:background .4s ease, border-color .4s ease, color .4s ease; } .why-row.active .why-row-num{ background:var(--primary); border-color:var(--primary); color:var(--white); } .why-row-headline{ display:block; font-size:17.5px; font-weight:700; color:var(--secondary); line-height:1.35; text-align:left; } .why-row-tag{ display:block; margin-top:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); } .why-row-divider{ display:block; margin:16px 0; height:1px; background:linear-gradient(90deg, var(--border) 0%, transparent 100%); } .why-section h2.h2 { text-align: left; } .why-row p{ font-size:14.5px; color:var(--muted); line-height:1.65; } .why-row.active{ background:var(--white); border-color:var(--border); border-left-color:var(--primary); box-shadow:var(--shadow-md); transform:translateX(6px); } @media (max-width: 980px){ .why-columns{ grid-template-columns:1fr; gap:36px; } .why-sticky{ position:static; } .why-row.active{ transform:none; } } /* ========================================================================== Our Point of View — the "AI fails as a transformation, not a technology" argument, paired with three stats. Same dark navy gradient + radial glow as .foundation-section, since this reads as a companion belief statement rather than a full architecture section of its own. ========================================================================== */ .pov-section{ background:linear-gradient(180deg, var(--secondary) 0%, var(--secondary-700) 100%); position:relative; overflow:hidden; } .pov-section::before{ content:''; position:absolute; inset:0; opacity:.6; pointer-events:none; background:radial-gradient(55% 80% at 90% 0%, rgba(144,195,34,.16), transparent 60%), radial-gradient(45% 60% at 5% 100%, rgba(144,195,34,.1), transparent 60%); } .pov-section .container{ position:relative; z-index:1; } .pov-header{ max-width:760px; margin:0 auto; text-align:center; } .pov-header .h2{ margin-top:18px; } .pov-intro{ margin-top:20px; font-size:16.5px; line-height:1.75; color:rgba(255,255,255,.68); } /* ---------- The Other 90% ---------- */ .pov-layers-head{ margin-top:64px; text-align:center; } .pov-layers-label{ display:inline-block; font-family:var(--font-head); font-size:19px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-light); padding-bottom:10px; border-bottom:2px solid rgba(144,195,34,.4); } .pov-layers{ margin-top:32px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } .pov-layer-card{ position:relative; overflow:hidden; isolation:isolate; padding:24px 20px; border-radius:var(--radius-lg); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .pov-layer-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:1; background:linear-gradient(90deg, var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .pov-layer-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); border-color:rgba(144,195,34,.35); } .pov-layer-card:hover::before{ transform:scaleX(1); } .pov-layer-icon{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:rgba(144,195,34,.14); color:var(--primary-light); } .pov-layer-icon svg{ width:19px; height:19px; } .pov-layer-card h4{ margin-top:16px; font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--white); text-align: left; } .pov-layer-card p{ margin-top:8px; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.6); } .pov-layers-note{ margin:28px auto 0; text-align:center; font-size:17px; font-weight:700; color:rgba(255,255,255,.5); } /* ---------- Six Pillars ---------- */ .pov-pillars-head{ margin-top:72px; text-align:center; } .pov-pillars-head h3{ font-family:var(--font-head); font-size:clamp(22px, 2.4vw, 28px); font-weight:800; color:var(--white); } .pov-pillars{ margin-top:32px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } .pov-pillar-card{ position:relative; overflow:hidden; isolation:isolate; padding:26px 24px; border-radius:var(--radius-lg); background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.1); transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .pov-pillar-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 65% at 100% 0%, rgba(144,195,34,.14), transparent 65%); } .pov-pillar-card > *{ position:relative; z-index:1; } .pov-pillar-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,1); border-color:rgba(144,195,34,.35); } .pov-pillar-num{ font-family:var(--font-head); font-size:30px; font-weight:800; color:rgba(144,195,34,.6); line-height:1; } .pov-pillar-card h4{ margin-top:10px; font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--secondary); text-align: left; } .pov-pillar-card p{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--secondary); } .pov-pillars-note{ margin:32px auto 0; max-width:640px; text-align:center; font-size:15px; line-height:1.65; color:rgba(255,255,255,.68); } .pov-pillars-note strong{ color:var(--white); } /* ---------- Executive Takeaway ---------- */ .pov-callout{ position:relative; overflow:hidden; isolation:isolate; margin-top:56px; padding:32px 40px; border-radius:var(--radius-lg); background:rgba(144,195,34,.08); border:1px solid rgba(144,195,34,.3); display:flex; align-items:center; gap:28px; flex-wrap:wrap; } .pov-callout-label{ flex-shrink:0; display:inline-flex; align-items:center; font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--secondary); background:var(--primary-light); padding:8px 16px; border-radius:var(--radius-full); } .pov-callout p{ margin:0; font-size:16px; line-height:1.6; color:var(--white); flex:1 1 320px; } @media (max-width: 980px){ .pov-layers{ grid-template-columns:repeat(2, 1fr); } .pov-pillars{ grid-template-columns:1fr 1fr; } } @media (max-width: 640px){ .pov-layers{ grid-template-columns:1fr; } .pov-pillars{ grid-template-columns:1fr; } .pov-callout{ padding:28px 24px; } } /* ========================================================================== Proven results (stat row) ========================================================================== */ .results-section{ background:var(--secondary); position:relative; overflow:hidden; } .results-section::before{ content:''; position:absolute; inset:0; opacity:.6; background:radial-gradient(60% 90% at 85% 10%, rgba(144,195,34,.16), transparent 60%); } .results-section .eyebrow--light{ color:var(--white); } .results-grid{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); overflow:hidden; } .results-grid .stat{ background:var(--secondary); padding:36px 20px; text-align:center; } .results-grid .stat strong{ display:block; font-family:var(--font-head); font-size:clamp(30px,4vw,44px); font-weight:800; color:var(--white); } .results-grid .stat span{ display:block; margin-top:8px; font-size:14px; color:rgba(255,255,255,.65); line-height:1.5; } .results-logos{ position:relative; margin-top:56px; } /* Homepage-only "Our Partners in AI" row — a static (non-scrolling) set of just 4 logos reads better as a fixed row than a marquee built for a much longer list; still lives inside .results-logos so it inherits the shared grayscale+invert+screen dark-bg treatment used by every other logo strip. The slot/image sizing below is overridden rather than inherited from .results-logos .logo-img — that fixed-width-slot + width:auto pairing is tuned for the marquee track's math, and lets a wide-aspect wordmark (Meta, Gemini) render past its own slot width and visually overlap the next logo in a static, non-scrolling row. Selectors here carry an extra class over .results-logos .logo-img so they win regardless of source order. */ .partner-logos-static{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:100px; } .results-logos .partner-logos-static.partner-logos-static .logo-img{ width:auto; height:auto; padding:0; flex-shrink:1; } .results-logos .partner-logos-static.partner-logos-static .logo-img img{ max-height:34px; max-width:130px; width:auto; } /* Anthropic, Google Gemini and AWS read visibly smaller than OpenAI/Meta at the shared cap above — Anthropic's wordmark has an especially wide aspect ratio (~8.9:1), so the shared 130px max-width clamps its height down to a sliver well before its 34px max-height is ever reached; Gemini and AWS are just visually lighter marks that need more room to read at the same weight. Anthropic gets its own modest width allowance (not a full uncapped bump — removing the width cap entirely let its aspect ratio balloon it into a much bigger footprint than every other logo in the row) so it lands between the original sliver and an oversized one; Gemini/AWS just need a taller cap. OpenAI/Meta are untouched. */ .results-logos .partner-logos-static.partner-logos-static .logo-img img[alt="Anthropic"]{ max-height:28px; max-width:190px; } .results-logos .partner-logos-static.partner-logos-static .logo-img img[alt="Google Gemini"], .results-logos .partner-logos-static.partner-logos-static .logo-img img[alt="AWS"]{ max-height:44px; } /* These wordmarks are dark-on-transparent, so the sitewide hover (which strips the invert to show each logo's original colors) leaves them near-invisible against this same dark background — this row's hover instead just brightens within the same inverted treatment. */ .results-logos .partner-logos-static.partner-logos-static .logo-img:hover img{ filter:grayscale(1) invert(1) brightness(1.6); mix-blend-mode:screen; opacity:1; } @media (max-width:640px){ .partner-logos-static{ gap:28px; } .results-logos .partner-logos-static.partner-logos-static .logo-img img{ max-height:26px; max-width:100px; } .results-logos .partner-logos-static.partner-logos-static .logo-img img[alt="Anthropic"]{ max-height:22px; max-width:150px; } .results-logos .partner-logos-static.partner-logos-static .logo-img img[alt="Google Gemini"], .results-logos .partner-logos-static.partner-logos-static .logo-img img[alt="AWS"]{ max-height:34px; } } .trust-label--light .line{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.3)); } .trust-label--light .line:last-child{ background:linear-gradient(90deg, rgba(255,255,255,.3), transparent); } .trust-label--light .label-text{ color:rgba(255,255,255,.6); } .results-logos .marquee{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } /* This container now holds the short "Recognized Globally" list (content was swapped with .logos-section) — back to the base 34s pace tuned for a short track. The long "Trusted by 500+" list that moved into .logos-section gets the slow pace instead, just below. */ .results-logos .marquee-track{ animation-duration:34s; } .results-logos .logo-img{ height:130px; } .logos-section .marquee-track{ animation-duration:60s; gap:52px; } /* grayscale+invert (not brightness(0)) preserves luminance contrast, so a logo's own light background inverts to near-black and its dark mark inverts to near-white; mix-blend-mode:screen then lets that near-black area blend into the dark section instead of showing as a solid box — works whether the source PNG is transparent or has an opaque background. */ .results-logos .logo-img img{ max-height:75px; max-width:280px; height: 75px; filter:grayscale(1) invert(1) brightness(1.35); mix-blend-mode:screen; opacity:.8; transition:filter .35s ease, opacity .35s ease; } .results-logos .logo-img:hover img{ filter:grayscale(0) invert(0) brightness(1); mix-blend-mode:normal; opacity:1; } @media (max-width: 900px){ .results-grid{ grid-template-columns:1fr 1fr; } .results-grid .stat:last-child:nth-child(odd){ grid-column:1 / -1; } } @media (max-width: 560px){ .results-grid{ grid-template-columns:1fr; } } /* Services/industry-page variant: a full-bleed dark section (not a boxed card) — the homepage's .results-section stays untouched. Scoped via a class on the section itself (not a class) since WordPress's own theme controls 's classes, not this Raw HTML block. */ .results-section--dark{ background:var(--secondary); padding:0; } .results-section--dark::before{ display:none; } /* Vertical spacing moves from the section onto the panel itself, so the dark background (and the pattern below, which reads off the panel's own box) fills the section's full height edge-to-edge with no bare strip above/below it — only the content gets inset via this padding. */ .results-panel{ position:relative; padding:96px 0; } /* Diagonal light-ray pattern standing in for the reference design's blue streaks — same idea (a bright hotspot plus repeating diagonal bands), recolored to the brand green and masked so it only shows on the right side, fading out before it reaches the text. Sized to the viewport (not the panel) so it spans the full-bleed section, not just the content column. */ .results-panel-pattern{ position:absolute; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; z-index:0; pointer-events:none; background: radial-gradient(55% 75% at 88% 8%, rgba(255,255,255,.22) 0%, rgba(144,195,34,.4) 26%, rgba(144,195,34,0) 62%), repeating-linear-gradient(115deg, rgba(144,195,34,.16) 0px, rgba(144,195,34,.16) 3px, transparent 3px, transparent 44px); -webkit-mask-image:linear-gradient(100deg, transparent 0%, transparent 32%, #000 58%, #000 100%); mask-image:linear-gradient(100deg, transparent 0%, transparent 32%, #000 58%, #000 100%); } .results-panel-inner{ position:relative; z-index:1; } .results-panel-head{ max-width:560px; } .results-panel-head .eyebrow{ margin-bottom:16px; } .results-panel-title{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.75); text-align:left; } .results-panel-grid{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; } .results-stat{ text-align:left; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.16); } .results-stat strong{ display:block; font-family:var(--font-head); font-size:clamp(34px,3.6vw,48px); font-weight:800; color:var(--white); line-height:1; } .results-stat span{ display:block; margin-top:12px; font-size:14.5px; color:rgba(255,255,255,.6); } @media (max-width: 900px){ .results-panel{ padding:64px 0; } .results-panel-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } } @media (max-width: 560px){ .results-panel-grid{ grid-template-columns:1fr; } } /* ========================================================================== Our Approach — interactive pathway list + swapping visual panel ========================================================================== */ .approach-interactive{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch; margin-top:8px; } .approach-list{ display:flex; flex-direction:column; gap:14px; } .approach-item{ position:relative; display:flex; align-items:flex-start; gap:16px; width:100%; text-align:left; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; cursor:pointer; font:inherit; color:inherit; transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .approach-item.active{ background:var(--white); border-color:var(--primary); box-shadow:var(--shadow-md); } .approach-item-num{ flex-shrink:0; width:34px; height:34px; margin-top:2px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--muted-light); background:var(--white); border:1px solid var(--border); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .approach-item.active .approach-item-num{ background:var(--secondary); color:var(--white); border-color:var(--secondary); } .approach-item-body{ flex:1; display:flex; flex-direction:column; } .approach-item-title{ font-size:18px; font-weight:800; color:var(--secondary); } .approach-item-desc{ margin-top:6px; font-size:14px; color:var(--muted); line-height:1.6; } .approach-item-arrow{ flex-shrink:0; margin-top:2px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); color:var(--white); opacity:0; transform:scale(.6) rotate(-45deg); transition:opacity .3s var(--ease), transform .3s var(--ease); } .approach-item.active .approach-item-arrow{ opacity:1; transform:scale(1) rotate(0deg); } .approach-item-arrow svg{ width:16px; height:16px; } .approach-visual{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(160deg, var(--bg-soft-2) 0%, var(--wash-tint) 100%); padding:28px; display:flex; justify-content:center; align-items:center; } .approach-visual::before, .approach-visual::after{ content:''; position:absolute; width:140px; height:140px; pointer-events:none; background-image:radial-gradient(circle, rgba(0,39,54,.14) 1.5px, transparent 1.6px); background-size:14px 14px; } .approach-visual::before{ top:0; right:0; } .approach-visual::after{ bottom:0; left:0; } .approach-panel{ display:none; position:relative; z-index:1; } .approach-panel.active{ display:block; } .approach-svg-wrap{ width:100%; } .approach-svg-wrap > svg{ display:block; width:100%; height:auto; overflow:visible; } .approach-visual-img{ display:block; width:calc(100% + 56px); max-width:calc(100% + 56px); margin:-28px; aspect-ratio:3 / 2; object-fit:cover; object-position:center; } .approach-visual-img--wide{ aspect-ratio:1616 / 973; } .approach-flow-line{ fill:none; stroke-linecap:round; stroke-dasharray:6 7; animation:approachFlow 2.6s linear infinite; } @keyframes approachFlow{ to{ stroke-dashoffset:-130; } } .approach-svg-label{ display:flex; align-items:center; height:100%; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--secondary); line-height:1.3; } .approach-svg-outcome{ display:flex; align-items:center; height:100%; font-family:var(--font-body); font-size:14.5px; font-weight:800; color:var(--secondary); line-height:1.35; } @media (max-width: 900px){ .approach-interactive{ grid-template-columns:1fr; } .approach-visual{ padding:20px; } .approach-visual-img{ width:calc(100% + 40px); max-width:calc(100% + 40px); margin:-20px; } } /* ========================================================================== Insights ========================================================================== */ /* Filter bar — one shared grid holds every resource type; the tabs just toggle which `data-insight-type` cards stay visible (see main.js). */ .resource-tabs{ display:flex; width:fit-content; flex-wrap:wrap; justify-content:center; gap:4px; padding:4px; margin:8px auto 40px; background:var(--bg-soft-2); border-radius:var(--radius-full); } .resource-tab{ padding:10px 22px; border:none; border-radius:var(--radius-full); background:transparent; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; transition:background .3s ease, color .3s ease, box-shadow .3s ease; margin-top: 0; } .resource-tab:hover{ color:var(--secondary); background: transparent; } .resource-tab.is-active{ background:var(--secondary); color:var(--white); box-shadow:0 6px 16px rgba(0,39,54,.18); } .insights-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } /* Every resource type — live articles, static guides/white papers, and events — shares one card shell: an illustrated panel up top (brand line art on a dark ground, standing in for a photo since not every type has one) plus a type/topic tag, date, title and CTA below. */ .insight-card{ position:relative; background:var(--white); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .insight-card[hidden]{ display:none; } .insight-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background:linear-gradient(90deg, var(--primary), var(--primary-dark)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); } .insight-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(144,195,34,.18), var(--shadow-lg); } .insight-card:hover::before{ transform:scaleX(1); } .insight-thumb{ position:relative; height:150px; overflow:hidden; background:linear-gradient(150deg, var(--secondary) 0%, var(--secondary-700) 100%); display:flex; align-items:center; justify-content:center; } .insight-thumb::before{ content:''; position:absolute; inset:0; background:radial-gradient(70% 90% at 15% 0%, rgba(144,195,34,.22), transparent 60%); } .insight-thumb-icon{ position:relative; width:64px; height:40px; color:var(--primary-light); transition:transform .4s var(--ease); } .insight-card:hover .insight-thumb-icon{ transform:scale(1.08); } /* Articles carry a real featured photo (live from WordPress) instead of the brand icon used for guides/white papers/events, which have none. */ .insight-thumb--photo{ background:var(--bg-soft-2); } .insight-thumb--photo::before{ display:none; } .insight-thumb--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; transition:transform .6s var(--ease); } .insight-card:hover .insight-thumb--photo img{ transform:scale(1.06); } .insight-hidden-fields{ display:none; } .insight-body{ padding:22px 24px 24px; } .insight-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .insight-tag-type, .insight-tag-topic{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .insight-tag-type{ color:var(--primary-dark); } .insight-tag-topic{ color:var(--muted-light); } .insight-tag-topic::before{ content:'\2022'; margin-right:8px; color:var(--border); } .insight-date{ display:block; margin-top:10px; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--muted-light); } .insight-card h3{ margin-top:14px; font-size:16.5px; font-weight:800; line-height:1.4; text-align:left; } .insight-card h3 a{ color:var(--secondary); } .insight-card h3 a:hover{ color:var(--primary-dark); } .resource-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; font-weight:700; color:var(--primary-dark); text-decoration:none; transition:gap .25s ease; } .resource-link svg{ width:15px; height:15px; flex-shrink:0; } .resource-link:hover{ gap:12px; } .insights-viewall{ margin-top:44px; text-align:center; } @media (max-width: 1180px){ .insights-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px){ .insights-grid{ grid-template-columns:1fr; } /* Four tabs no longer fit one row at phone widths — wrapping inside the pill background turned it into one oversized blob. Scroll the row horizontally instead, so it stays a slim single-line bar. */ .resource-tabs{ width:100%; max-width:100%; flex-wrap:nowrap; justify-content:center; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .resource-tabs::-webkit-scrollbar{ display:none; } .resource-tab{ flex-shrink:0; padding:9px 18px; font-size:13px; } } /* ========================================================================== CTA band ========================================================================== */ .cta-section{ position:relative; overflow:hidden; background:radial-gradient(120% 160% at 50% 0%, var(--secondary-500) 0%, var(--secondary) 60%, #001019 100%); padding:96px 0; text-align:center; } .cta-section .container{ position:relative; z-index:1; } #cta-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.6; } .cta-section h2{ max-width:640px; margin:0 auto; } .cta-section .sub{ max-width:520px; margin:16px auto 0; } .cta-actions{ display:flex; justify-content:center; gap:16px; margin-top:36px; flex-wrap:wrap; } .cta-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; text-align:left; } .cta-content h2{ margin:0; max-width:none; text-align: left; } .cta-content .sub{ margin:16px 0 0; max-width:460px; } .cta-links{ display:flex; align-items:center; gap:32px; margin-top:36px; flex-wrap:wrap; } .cta-tag-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:rgba(255,255,255,.85); border-bottom:2px solid var(--primary); padding-bottom:2px; transition:gap .3s var(--ease), color .3s var(--ease); } .cta-tag-link svg{ width:14px; height:14px; transition:transform .3s var(--ease); } .cta-tag-link:hover{ gap:12px; color:var(--white); } .cta-tag-link:hover svg{ transform:translateX(3px); } .cta-next-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:36px; backdrop-filter:blur(8px); } .cta-next-card h3{ font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--white); text-align: left; } .cta-next-intro{ margin:12px 0 12px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14); font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.68); } .cta-next-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); } .cta-next-row:last-child{ border-bottom:none; padding-bottom:0; } .cta-next-row-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:38px; height:38px; border-radius:11px; color:var(--white); background:linear-gradient(150deg, var(--primary-dark), var(--primary)); } .cta-next-row-icon svg{ width:19px; height:19px; } .cta-next-row-label{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-light); margin-bottom:6px; } .cta-next-row-desc{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68); } @media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; gap:40px; } .cta-content, .cta-content .sub{ text-align:left; } } /* ========================================================================== Contact form + FAQ ========================================================================== */ .contact-faq-section{ background:var(--bg-soft); } .contact-faq-inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; } .contact-form-panel{ background:linear-gradient(160deg, var(--secondary-500) 0%, var(--secondary) 60%, #001019 100%); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-lg); } .contact-form-panel h3{ font-family:var(--font-head); font-size:23px; font-weight:800; color:var(--white); line-height:1.3; text-align: left; } .contact-form-panel > p{ margin-top:10px; font-size:14.5px; color:rgba(255,255,255,.72); line-height:1.6; } /* Scoped under .contact-form-panel (this homepage's own wrapper) rather than bare .zf-* selectors — the Zoho web-to-lead form's zf-* classes are reused verbatim by Zoho on other pages of the live site, so unscoped rules here would leak this dark theme onto those unrelated forms. */ .contact-form-panel .zf-wrap{ margin-top:24px; } .contact-form-panel .zf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:0px; } .contact-form-panel .zf-row:first-child{ margin-top:0; } .contact-form-panel .zf-group{ display:flex; flex-direction:column; gap:6px; align-items: flex-start; } .contact-form-panel .zf-group.zf-full{ grid-column:1 / -1; } .contact-form-panel .zf-group label{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.03em; margin-bottom:0; } .contact-form-panel .zf-group label .req{ color:var(--primary-light); } .contact-form-panel .zf-input{ width:100%; height:40px !important; min-height:40px !important; box-sizing:border-box !important; background-color:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:12px; padding:9px 14px; font-size:14.5px; line-height:1.3; color:var(--white) !important; font-family:inherit; transition:border-color .3s ease, background .3s ease; } /* The Zoho web-to-lead script / theme CSS sets its own explicit height + min-height on .zf-input (that's the real source of the oversized default look, not just padding) — !important here is required to win against those. The textarea needs its own reset (height:auto so it isn't clipped to the single-line 40px above) since it also carries .zf-input. */ .contact-form-panel .zf-input::placeholder{ color:rgba(255,255,255,.35) !important; } .contact-form-panel .zf-input:focus{ outline:none; border-color:var(--primary); background:rgba(255,255,255,.1); } .contact-form-panel select.zf-input{ appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 16px center !important; background-size:12px 8px !important; } .contact-form-panel select.zf-input option{ color:var(--secondary); } .contact-form-panel .zf-textarea{ height:auto !important; min-height:90px !important; resize:vertical; } .contact-form-panel .zf-err{ display:none; margin-top:2px; font-size:12px; color:#ff9d9d; } .contact-form-panel .zfRecap{ min-height:78px; border-radius:12px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:13px; text-align:center; } .contact-form-panel .zfRecap:empty::before{ content:'reCAPTCHA will render here once the Zoho form script is connected'; padding:0 18px; } .contact-form-panel .zf-btn-submit{ width:100%; padding:14px 26px; border-radius:var(--radius-full); border:none; cursor:pointer; background:var(--primary); color:var(--white); font-weight:700; font-size:15px; transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); box-shadow:0 8px 24px rgba(144,195,34,.35); } .contact-form-panel .zf-btn-submit:hover{ background:var(--primary-light); box-shadow:0 14px 32px rgba(144,195,34,.45); transform:translateY(-2px); } .faq-panel{ padding-top:4px; } .faq-panel h2.h2 { text-align: left; } .faq-list{ margin-top:28px; display:flex; flex-direction:column; gap:12px; } .faq-item{ border:1px solid var(--border); border-radius:16px; background:var(--white); overflow:hidden; transition:border-color .3s ease; } .faq-item.is-open{ border-color:var(--primary); } .faq-question{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 20px; text-align:left; font-size:15px; font-weight:700; color:var(--secondary); cursor:pointer; background:none; border:none; margin-top: 0; } button.faq-question:hover { background: var(--white); } .faq-num{ font-family:var(--font-head); font-size:13px; font-weight:800; color:var(--primary-dark); flex-shrink:0; } .faq-question-text{ flex:1; } .faq-chevron{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--bg-soft-2); color:var(--secondary-400); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s ease, color .3s ease; } .faq-chevron svg{ width:12px; height:12px; } .faq-item.is-open .faq-chevron{ transform:rotate(180deg); background:var(--primary); color:var(--white); } .faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq-answer p{ padding:0 20px 20px 56px; font-size:14px; color:var(--muted); line-height:1.65; } @media (max-width: 980px){ .contact-faq-inner{ grid-template-columns:1fr; } .contact-form-panel{ padding:30px 24px; } } @media (max-width: 640px){ .contact-form-panel .zf-row{ grid-template-columns:1fr; } } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:#001b25; color:rgba(255,255,255,.6); padding:64px 0 32px; } /* Brand block (logo/tagline/contact/offices/social) on the left, 4 menu columns on the right — the other 2 kept categories (AI Accelerator, Insights) stack as a second heading+list underneath AI Consulting and AI Development respectively, rather than getting their own columns. */ .footer-top-grid{ display:grid; grid-template-columns:.9fr 2.1fr; gap:56px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08); } .footer-brand-block{ max-width:400px; } .footer-logo{ height:34px; width:auto; display:block; } .footer-tagline{ margin-top:20px; font-size:14px; line-height:1.7; color:rgba(255,255,255,.6); } .footer-mini-label{ display:block; font-family:var(--font-head); font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-light); margin-bottom:14px; } .footer-contact{ margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); } .footer-contact p{ font-size:13.5px; line-height:1.6; } .footer-contact p + p{ margin-top:6px; } .footer-contact a{ color:rgba(255,255,255,.75); transition:color .2s ease; } .footer-contact a:hover{ color:var(--primary-light); } .footer-offices{ margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); } .footer-offices-row{ display:flex; flex-direction:row; flex-wrap:wrap; gap:16px 32px; } .footer-office strong{ display:block; font-size:13.5px; font-weight:800; color:var(--white); } .footer-office p{ margin-top:8px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6); } .footer-links-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:64px; } .footer-col h3, .footer-col h4{ font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); margin-bottom:18px; text-align: left; } .footer-col-subhead{ margin-top:36px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); } .footer-col ul{ display:flex; flex-direction:column; gap:11px; } .footer-col a{ font-size:14px; color:rgba(255,255,255,.6); transition:color .2s ease; } .footer-col a:hover{ color:var(--primary-light); } .footer-bottom-bar{ padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; } .footer-legal{ display:flex; flex-wrap:wrap; gap:24px; } .footer-legal a, .footer-copy a{ color:rgba(255,255,255,.6); transition:color .2s ease; } .footer-legal a:hover, .footer-copy a:hover{ color:var(--primary-light); } /* Social icons now live in the brand block (left column), not the bottom bar — matches the reference layout and avoids repeating them in two places. */ .footer-social{ display:flex; gap:12px; margin-top:28px; } .footer-social a{ width:36px; height:36px; border-radius:50%; border:1.5px solid; display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; border-color: #90c322; color: #fff; background: #90c322; } .footer-social a:hover{ color:var(--white); transform:translateY(-3px); } .footer-social svg{ width:16px; height:16px; } .footer-social a.social-twitter svg{ width:13px; height:13px; } .footer-social a.social-linkedin:hover{ background:#0a66c2; border-color:#0a66c2; } .footer-social a.social-youtube:hover{ background:#ff0000; border-color:#ff0000; } .footer-social a.social-twitter:hover{ background:#000000; border-color:#000000; } .footer-social a.social-facebook:hover{ background:#1877f2; border-color:#1877f2; } @media (max-width: 980px){ .footer-top-grid{ grid-template-columns:1fr; gap:40px; } .footer-brand-block{ max-width:none; } .footer-links-grid{ grid-template-columns:repeat(2, 1fr); gap:32px 20px; } } @media (max-width: 560px){ .footer-links-grid{ grid-template-columns:1fr; gap:28px 20px; } .footer-bottom-bar{ flex-direction:column; align-items:flex-start; } } /* ========================================================================== Interior page banner — compact, centered, light hero for service/landing pages. Same light theme as the homepage hero (not a dark band), but shorter, with its own glow treatment and a page-specific eyebrow/title so it still reads as a distinct page rather than a homepage repeat. ========================================================================== */ .page-banner{ position:relative; z-index:1; overflow:hidden; text-align:center; background: radial-gradient(circle at 50% -12%, #fff 0, rgba(255,255,255,.98) 22%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.74) 58%, rgba(255,255,255,0) 76%), linear-gradient(180deg, #fcfbf9 0%, rgba(144,195,34,.22) 100%); padding:190px 0 90px; } .page-banner-inner{ position:relative; z-index:1; } .breadcrumb{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:10px; margin-bottom:22px; font-size:13.5px; font-weight:600; background:transparent; } .breadcrumb a{ color:var(--muted-light); transition:color .25s ease; } .breadcrumb a:hover{ color:var(--primary-dark); } .breadcrumb-sep{ color:var(--border); } .breadcrumb-current{ color:var(--secondary); } .page-banner-copy{ max-width:760px; margin:0 auto; } .page-banner-title{ font-family:var(--font-head); font-size:clamp(34px,4.2vw,52px); font-weight:800; line-height:1.12; color:var(--secondary); letter-spacing:0.3px; } .page-banner-copy .sub{ margin-top:18px; } .page-banner-copy .hero-cta{ margin-top:32px; } .page-banner-logos{ margin-top:72px; } .page-banner-logos .trust-label{ margin-bottom:36px; } @media (max-width: 560px){ .page-banner{ padding-top:168px; padding-bottom:64px; } .page-banner-logos{ margin-top:56px; } } /* ========================================================================== "What We Do" — modern 3-column service pillars (services page only). A deliberately different shape than the homepage's uniform white .service-card grid: dark glowing cards with a numeral watermark, icon tile, and pill tags, so the section reads as its own design rather than a reused homepage block. ========================================================================== */ .pillars-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; } /* Center the 4th/5th "What We Do" cards in their own row instead of leaving an empty third slot. Scoped to #ai-services only — .pillars-grid itself (used elsewhere, e.g. the About page's Mission & Values, always a multiple of 3) is untouched, so this never affects other pages. */ @media (min-width:1101px){ #ai-services .pillars-grid{ grid-template-columns:repeat(6, 1fr); } #ai-services .pillars-grid .pillar-card{ grid-column:span 2; } #ai-services .pillars-grid .pillar-card:nth-child(4){ grid-column:2 / span 2; } #ai-services .pillars-grid .pillar-card:nth-child(5){ grid-column:4 / span 2; } } .pillar-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .pillar-tag{ padding:8px 16px; border-radius:var(--radius-full); background:var(--bg-soft-2); border:1px solid var(--border); font-size:13px; font-weight:700; color:var(--secondary); } /* On the services page, an odd number of tags per card (3, or an uneven remainder) left the wrapping flex row ragged — some rows paired two short tags, others stranded one long tag alone. A left-aligned checklist — one tag per row, a small checkmark badge instead of a pill background — reads as a clean "what's included" list regardless of how many tags or how long their labels are. Scoped to #ai-services since .pillar-tags/.pillar-tag are currently only used on this one page. The icon is a CSS background (not inline SVG markup) so no HTML changes are needed across the five cards' worth of tags. */ #ai-services .pillar-tags{ flex-direction:column; gap:12px; } #ai-services .pillar-tag{ display:flex; align-items:center; gap:10px; width:auto; box-sizing:border-box; text-align:left; padding:0; border:none; background:none; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); } #ai-services .pillar-tag::before{ content:''; flex-shrink:0; width:20px; height:20px; border-radius:50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3l3 3 6-7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); background-repeat:no-repeat, no-repeat; background-position:center, center; background-size:9px 9px, 20px 20px; } .service-why-section { padding-top: 100px; } .service-industries { padding-top: 60px; } .pillar-card{ position:relative; overflow:hidden; padding:40px 36px; border-radius:var(--radius-lg); background:var(--secondary); display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .pillar-card::before{ content:''; position:absolute; inset:0; z-index:0; opacity:.75; background:radial-gradient(80% 90% at 85% 0%, rgba(144,195,34,.2), transparent 60%); } .pillar-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -18px rgba(0,39,54,.45); } .pillar-card > *{ position:relative; z-index:1; } .pillar-card-num{ display:block; font-family:var(--font-head); font-size:56px; font-weight:800; line-height:1; color:rgba(255,255,255,.12); } .pillar-card-icon{ margin-top:-14px; width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:var(--white); box-shadow:0 12px 24px -6px var(--primary-glow); } .pillar-card-icon svg{ width:22px; height:22px; } .pillar-card-tag{ display:block; margin-top:18px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-light); } .pillar-card h3{ margin-top:10px; font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--white); text-align:left; } .pillar-card p{ margin-top:10px; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.6); text-align:left; } .pillar-card .pillar-tag{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.85); } .pillar-card .service-link{ margin-top:auto; color:var(--primary-light); } @media (max-width: 1100px){ .pillars-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 700px){ .pillars-grid{ grid-template-columns:1fr; } } /* ========================================================================== Horizontal card carousel — wraps a row of cards (e.g. .pillar-card) in a scrollable track with arrow buttons (reusing .story-nav-btn) and a thin progress bar. Generic via [data-carousel]; see main.js. ========================================================================== */ .service-carousel-track{ display:flex; align-items:stretch; gap:24px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; /* Just enough vertical padding for the hover lift (-8px) plus the tighter, negative-spread hover shadow below to render without hitting this scroll container's own (implicit, since overflow-x is set) overflow-y:auto clip box. */ padding:20px 4px 46px; } .service-carousel-track::-webkit-scrollbar{ display:none; } /* Three cards per view regardless of container width — 24px gap x2 between them. */ .service-carousel-track > *{ flex:0 0 calc((100% - 48px) / 3); } /* Taller, brand-tinted variant of .industry-tile for this carousel only — .industry-tile itself stays untouched for its other (grid) usage. */ .service-carousel-track .industry-tile{ min-height:300px; padding:36px 32px; /* Layered as background-images (not a pseudo-element) so it paints purely behind the tile's own content — no stacking-context/z-index juggling needed against the icon/title/desc, which aren't themselves positioned. */ background: radial-gradient(120% 100% at 88% 0%, rgba(144,195,34,.16), transparent 55%), linear-gradient(165deg, #fff 0%, var(--bg-soft) 100%); border-color:rgba(144,195,34,.2); } .service-carousel-track .industry-tile::before{ opacity:.55; transform:scaleX(1); } .service-carousel-track .industry-tile:hover::before{ opacity:1; } /* Tighter, negative-spread shadow (pattern already used by .industry-tile-icon below) instead of the shared --shadow-lg — its 60px blur was bleeding past this scroll container's own clip box as a hard-edged rectangle. */ .service-carousel-track .industry-tile:hover{ border-color:rgba(144,195,34,.5); box-shadow:0 18px 32px -14px rgba(0,39,54,.35); } .service-carousel-controls{ display:flex; align-items:center; gap:24px; margin-top:4px; } .service-carousel-progress{ flex:1; height:4px; border-radius:999px; background:var(--border); overflow:hidden; } .service-carousel-progress-fill{ display:block; height:100%; width:8%; border-radius:999px; background:linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%); transition:width .2s ease; } .service-carousel-nav{ display:flex; gap:12px; flex-shrink:0; } @media (max-width: 1100px){ .service-carousel-track > *{ flex-basis:calc((100% - 24px) / 2); } } @media (max-width: 700px){ .service-carousel-track > *{ flex-basis:calc(100% - 32px); } } /* ========================================================================== Use cases — equal 4-up grid of light "AI Agent" cards, brand-green accented (icon tile, tag, stat, hover glow) rather than the earlier dark treatment. All content is always visible (no hover-to-reveal). ========================================================================== */ .usecase-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .usecase-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:32px 28px; border-radius:var(--radius-lg); background:linear-gradient(165deg, #fff 0%, var(--bg-soft) 100%); border:1px solid rgba(144,195,34,.2); text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .usecase-card::before{ content:''; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; background:radial-gradient(90% 90% at 85% 0%, rgba(144,195,34,.16), transparent 60%); transition:opacity .4s ease; } .usecase-card:hover{ transform:translateY(-8px); box-shadow:0 24px 44px -18px rgba(0,39,54,.18); border-color:rgba(144,195,34,.5); } .usecase-card:hover::before{ opacity:1; } .usecase-card > *{ position:relative; z-index:1; } .usecase-card-index{ position:absolute; top:26px; right:26px; z-index:1; font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--border); } .usecase-card-icon{ width:52px; height:52px; border-radius:14px; flex-shrink:0; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); box-shadow:0 12px 22px -8px var(--primary-glow); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), box-shadow .35s ease; } .usecase-card:hover .usecase-card-icon{ transform:scale(1.08) rotate(-4deg); box-shadow:0 16px 28px -6px var(--primary-glow); } .usecase-card-icon svg{ width:24px; height:24px; } .usecase-card-tag{ align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); background:var(--bg-soft-2); border:1px solid var(--border); padding:6px 12px; border-radius:var(--radius-full); white-space:nowrap; } .usecase-card h3{ font-family:var(--font-head); font-size:18.5px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left; } .usecase-card p{ margin:0; font-size:13.5px; line-height:1.65; color:var(--muted); } .usecase-card-stat{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); font-size:12.5px; font-weight:800; color:var(--primary-dark); line-height:1.6; } .usecase-card-link{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--secondary); transition:gap .3s ease, color .3s ease; } .usecase-card-link svg{ width:14px; height:14px; } .usecase-card:hover .usecase-card-link{ gap:12px; color:var(--primary-dark); } @media (max-width: 1100px){ .usecase-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 640px){ .usecase-grid{ grid-template-columns:1fr; } } /* ========================================================================== Industries quick-grid (services page) — modern card tiles, distinct from the homepage's .flagship-more chip rows (left untouched, still used there). Named .industry-tile (not .industry-card) — that name is already used by an unrelated, unused carousel-card component elsewhere in this file whose base rule sets opacity:0/visibility:hidden by default; reusing it here silently inherited that hidden state. ========================================================================== */ .industries-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; align-items:stretch; } .industry-tile{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; min-height:250px; padding:34px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .industry-tile::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .industry-tile:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; } .industry-tile:hover::before{ transform:scaleX(1); } .industry-tile-icon{ width:56px; height:56px; border-radius:16px; flex-shrink:0; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 22px -8px var(--primary-glow); transition:transform .35s var(--ease), box-shadow .35s ease; } .industry-tile:hover .industry-tile-icon{ transform:scale(1.08) rotate(-4deg); box-shadow:0 16px 28px -6px var(--primary-glow); } .industry-tile-icon svg{ width:26px; height:26px; } .industry-tile-title{ font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--secondary); line-height:1.3; } .industry-tile-desc{ margin:0; font-size:13.5px; line-height:1.6; color:var(--muted); } .industry-tile-arrow{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted-light); transition:color .3s ease, gap .3s ease; } .industry-tile:hover .industry-tile-arrow{ color:var(--primary-dark); gap:10px; } .industry-tile-arrow svg{ width:14px; height:14px; } @media (max-width: 1100px){ .industries-grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .industries-grid{ grid-template-columns:1fr; } } /* Bigger CTA bar under the industries grid — same dark-gradient bar language as .usecase-callout (now unused, safe to leave as-is) but sized up: larger type, larger button, more breathing room. */ .industry-cta-bar{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-top:40px; padding:44px 52px; border-radius:var(--radius-lg); background:linear-gradient(120deg, var(--secondary) 0%, var(--secondary-600) 100%); box-shadow:var(--shadow-lg); } .industry-cta-bar p{ margin:0; font-size:19px; line-height:1.6; color:rgba(255,255,255,.85); max-width:640px; } .industry-cta-bar strong{ color:var(--white); } .industry-cta-bar .btn{ flex-shrink:0; padding:18px 32px; font-size:16px; } @media (max-width: 700px){ .industry-cta-bar{ flex-direction:column; align-items:flex-start; padding:32px 28px; } .industry-cta-bar p{ font-size:17px; } .industry-cta-bar .btn { padding: 15px 20px; } } /* Mobile CTA buttons — the shared .btn class is white-space:nowrap by design (it needs that to keep icon + label on one line at desktop widths), but these CTA bars collapse to a narrow single column below ~700px without ever stretching the button itself, so a longer label keeps its full nowrap width and overflows past the card edge instead of wrapping. Forcing these specific buttons to full width + normal wrapping at phone widths keeps every CTA label inside its card at every breakpoint. Every industry/service page's own CSS used to restate this same fix individually — consolidated here since it's identical everywhere these classes are used. */ @media (max-width: 560px){ .industry-cta-bar .btn, .techstack-cta .btn, .recognition-cta .btn, .services-banner-cta .btn, .why-sticky-btn{ display:flex; width:100%; justify-content:center; text-align:center; white-space:normal; line-height:1.35; } } /* Tighten the gap between FAQ and the final CTA banner — FAQ's own bottom padding is trimmed inline; this trims the CTA section's top padding to match, instead of stacking two full 100px paddings. */ #get-started{ padding-top:40px; } /* ========================================================================== Intellectyx Preloader — standalone, self-contained Reuses the site's brand colors directly (not the homepage's --tokens) so this file works correctly on ANY WordPress page/template, independent of whether style.css happens to be loaded on that page. ========================================================================== */ html.ix-loading, html.ix-loading body{ overflow:hidden; height:100%; } #ix-preloader{ position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle 620px at 50% 40%, rgba(144,195,34,.12), transparent 70%), #ffffff; transition:opacity .35s cubic-bezier(.16,.84,.44,1), visibility .35s; } #ix-preloader.ix-loaded{ opacity:0; visibility:hidden; pointer-events:none; } #ix-preloader svg{ width:128px; height:128px; display:block; } @media (max-width: 480px){ #ix-preloader svg{ width:104px; height:104px; } } /* ========================================================================== Events Listing page — banner + a tabbed Upcoming/Past switcher with editorial overlay-style event cards. Reuses shared .page-banner / .container / .breadcrumb / .section / .section-header / .eyebrow / .h2 / .sub utility classes already defined in style.css, so this page matches the rest of the site exactly. Nothing in style.css is edited — only page-specific bits (tabs, cards) are added here, scoped under classes that can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ .events-listing-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .events-listing-section .container{ max-width:1480px; } } @media (min-width:2560px){ .events-listing-section .container{ max-width:1600px; } } /* ---------- Banner — same richer wash + subtle texture used on the About / Why Intellectyx pages, for visual consistency sitewide. ---------- */ .events-banner{ padding-top:190px; padding-bottom:50px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } @media (max-width:640px){ .events-banner{ padding-top:170px; padding-bottom:40px; } } /* Short accent divider — sits right at the seam between the banner and the listing below it. Replaces the earlier stats-row pill (removed per feedback: read as clutter rather than useful info) with a plain, deliberate mark instead of an empty gap. */ .events-divider{ display:flex; justify-content:center; padding:20px 0; } .events-divider span{ display:block; width:64px; height:4px; border-radius:var(--radius-full); background:linear-gradient(90deg, var(--primary), var(--primary-dark)); box-shadow:0 6px 16px rgba(144,195,34,.3); } .events-listing-section{ padding:56px 0 100px; } /* ---------- Tab switcher ---------- */ .events-tabs{ display:flex; width:fit-content; gap:6px; padding:6px; margin:0 auto 48px; border-radius:var(--radius-full); background:var(--bg-soft); border:1px solid var(--border); } .events-tab{ display:inline-flex; align-items:center; gap:8px; margin-top:0; padding:11px 24px; border:none; border-radius:var(--radius-full); background:transparent; font-family:var(--font-head); font-weight:800; font-size:14.5px; color:var(--muted); cursor:pointer; transition:background .25s ease, color .25s ease; } .events-tab:hover{ color:var(--secondary); background: transparent; } .events-tab.is-active{ background:var(--secondary); color:#fff; } .events-tab.is-active:hover{ color:#fff; } .events-tab-count{ padding:1px 9px; border-radius:var(--radius-full); font-size:12px; font-weight:800; background:rgba(0,39,54,.08); color:var(--secondary); } .events-tab.is-active .events-tab-count{ background:rgba(255,255,255,.18); color:#fff; } .events-panel[hidden]{ display:none; } /* ---------- Empty state ---------- */ .events-empty{ display:flex; align-items:center; gap:14px; padding:26px 28px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px dashed var(--border); font-size:14.5px; font-weight:600; color:var(--muted); } .events-empty::before{ content:''; flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--white); border:1px solid var(--border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a015' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } /* ---------- Card grid — editorial overlay cards ---------- The whole card is a single (image + gradient + copy all inside it), so there is exactly one link per card — no nested-anchor markup, and no separate white body block underneath the image. */ .events-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; } .event-card{ position:relative; display:block; overflow:hidden; aspect-ratio:4/5; border-radius:var(--radius-lg); background:var(--bg-soft); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .event-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); } .event-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .event-card:hover img{ transform:scale(1.08); } .event-card::before{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0, 39, 54, 0.6) 35%, rgba(0, 29, 39, .8) 66%, rgba(0, 18, 25, .94) 100%); } .event-card-badge{ position:absolute; top:18px; left:18px; z-index:2; padding:5px 13px; border-radius:var(--radius-full); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--primary); color:var(--secondary); } .event-card-badge--past{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); } .event-card-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; } .event-card-title{ display:block; font-family:var(--font-head); font-weight:800; font-size:19px; line-height:1.32; color:#fff; margin:0 0 14px; } .event-card-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:20px; } .event-card-meta-item{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.85); } .event-card-meta-item svg{ width:14px; height:14px; flex-shrink:0; color:var(--primary-light); } .event-card-cta{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:#fff; } .event-card-cta-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--primary); color:var(--secondary); transition:transform .3s var(--ease); } .event-card-cta-icon svg{ width:15px; height:15px; } .event-card:hover .event-card-cta-icon{ transform:translateX(4px); } @media (min-width:1600px){ .events-grid{ gap:32px; } } @media (max-width:1000px){ .events-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .events-grid{ grid-template-columns:1fr; } .events-listing-section{ padding:56px 0 72px; } .events-tabs{ width:100%; } .events-tab{ flex:1 1 auto; justify-content:center; } } /* ========================================================================== Single Event page — banner section only. Reuses the shared .page-banner / .container / .breadcrumb / .sub utility classes already defined in style.css (the same light interior-page banner treatment used on services/industries pages), so this page's container width and banner styling match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits (category tag, date/time meta row) are added here, scoped under .single-event-banner so they can never leak onto other pages. The rest of the page (image, body, lead form, etc.) is authored in WPBakery and rendered via the_content() — no custom styling applied to it here beyond matching container width. Load this AFTER style.css. ========================================================================== */ .single-event-page{ background:var(--white); } .single-categories{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:20px; } .single-category-tag{ display:inline-flex; align-items:center; padding:6px 16px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); box-shadow:var(--shadow-sm); transition:background .25s ease, border-color .25s ease; } .single-category-tag:hover{ background:var(--bg-soft); border-color:var(--primary-light); } /* Event date / time — separate ACF fields (event_date, event_time) */ .single-event-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; margin:22px 0 22px; } .single-event-meta-item{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:var(--secondary); } .single-event-meta-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--primary-dark); } .single-event-banner .sub p{ margin:0; } /* ---------- Content wrapper (the_content() / WPBakery output) ---------- Scoped container rule (not a bare .container) — same convention as style.css uses elsewhere — so this never affects other pages/templates. */ .single-content-section{ padding:60px 0 100px; } .single-content-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .single-content-section .container{ max-width:1480px; } } @media (min-width:2560px){ .single-content-section .container{ max-width:1600px; } } /* ========================================================================== Guides Listing page — static banner + dynamic guide grid. The grid itself reuses the shared .insights-grid / .insight-card / .insight-thumb / .insight-thumb-icon / .insight-thumb--photo / .insight-body / .insight-tags / .resource-link classes already defined in style.css (the exact same card the homepage's Insights section uses, icon-fallback included), so no new card CSS is needed here — only the banner and container-width scoping are page-specific. Load this AFTER style.css. ========================================================================== */ /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ .guides-listing-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .guides-listing-section .container{ max-width:1480px; } } @media (min-width:2560px){ .guides-listing-section .container{ max-width:1600px; } } /* ---------- Banner — same richer wash + subtle texture used on the About / Why Intellectyx / Events pages, for visual consistency. ---------- */ .guides-banner{ padding-top:190px; padding-bottom:70px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } .guides-banner .page-banner-inner{ max-width:760px; margin:0 auto; text-align:center; } @media (max-width:640px){ .guides-banner{ padding-top:170px; padding-bottom:80px; } } /* Separator between the banner and the listing below it. */ .guides-listing-section{ padding:76px 0 100px; border-top:1px solid var(--border); } /* ---------- Empty state — same dashed-card treatment as the Events listing page's empty state, for visual consistency across listings. ---------- */ .guides-empty{ display:flex; align-items:center; gap:14px; padding:26px 28px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px dashed var(--border); font-size:14.5px; font-weight:600; color:var(--muted); } .guides-empty::before{ content:''; flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--white); border:1px solid var(--border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a015' stroke-width='1.6'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } @media (max-width:640px){ .guides-listing-section{ padding:56px 0 72px; } } /* ---------- Center an incomplete last row ---------- The shared .insights-grid is a CSS grid, which anchors every card to its column regardless of how many rows are full — with fewer than 4 guides that leaves the last (only) row flush left with dead space on the right. Switched to flexbox here, scoped to this page only (same fix as the videos listing page), since justify-content:center naturally centers whatever cards don't fill a complete row while a 5th+ guide still wraps exactly like the grid did. Card width per breakpoint matches the grid's own column math so nothing about the card size changes, only how leftover space is distributed. */ .guides-listing-section .insights-grid{ display:flex; flex-wrap:wrap; justify-content:center; } .guides-listing-section .insight-card{ flex:0 0 calc(25% - 18px); max-width:calc(25% - 18px); } @media (max-width:1180px){ .guides-listing-section .insight-card{ flex-basis:calc(50% - 12px); max-width:calc(50% - 12px); } } @media (max-width:640px){ .guides-listing-section .insight-card{ flex-basis:100%; max-width:100%; } } /* ========================================================================== Single Guide page — banner, floating download panel, featured image, and article-body content typography. Reuses the shared .page-banner / .container / .breadcrumb / .btn / .sub utility classes already defined in style.css (the same light interior- page banner treatment used on services/industries/single-event pages), so this page's container width and banner styling match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under single-guide-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .single-guide-page{ background:var(--white); } /* ---------- Hero / banner ---------- */ .single-guide-banner .page-banner-inner{ max-width:820px; margin:0 auto; text-align:center; } .single-guide-categories{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:20px; } .single-guide-category-tag{ display:inline-flex; align-items:center; padding:6px 16px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); box-shadow:var(--shadow-sm); transition:background .25s ease, border-color .25s ease; } .single-guide-category-tag:hover{ background:var(--bg-soft); border-color:var(--primary-light); } .single-guide-excerpt{ margin-top:20px; max-width:680px; margin-inline:auto; font-size:17px; line-height:1.65; color:var(--muted); } .single-guide-excerpt p{ margin:0; } /* ---------- Floating download panel — overlaps the hero's bottom edge, pulling the primary conversion action (the ACF attachment) forward, same "floating card" language used on the single-event details panel. ---------- */ .guide-download-section{ padding:0 0 80px; } .guide-download-section .container{ position:relative; } .guide-download-panel{ position:relative; margin-top:-56px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:24px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:32px 36px; } .guide-download-icon{ flex-shrink:0; width:56px; height:56px; border-radius:var(--radius-md); background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 12px 24px -6px var(--primary-glow); } .guide-download-icon svg{ width:26px; height:26px; } .guide-download-copy{ flex:1 1 320px; } .guide-download-copy strong{ display:block; font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--secondary); } .guide-download-copy span{ display:block; margin-top:4px; font-size:14.5px; color:var(--muted); } .guide-download-cta{ flex:0 0 auto; margin-left:auto; } @media (max-width:900px){ .guide-download-panel{ margin-top:-40px; padding:28px 24px; flex-direction:column; align-items:stretch; text-align:center; } .guide-download-copy{ flex:1 1 auto; } .guide-download-cta{ margin-left:0; } .guide-download-cta .btn{ width:100%; justify-content:center; } } /* ---------- Featured image ---------- */ .single-guide-featured-image{ padding:0 0 80px; } .single-guide-featured-image .container{ width:100%; max-width:1040px; margin:0 auto; padding:0 15px; } .single-guide-featured-image img{ width:100%; height:auto; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); } /* ---------- Content body (the_content() output) ---------- */ .single-guide-content-section{ padding:0 0 100px; } .single-guide-content-section .container{ width:100%; max-width:760px; margin:0 auto; padding:0 15px; } .single-guide-content{ font-size:17px; line-height:1.75; color:var(--ink); } .single-guide-content > *:first-child{ margin-top:0; } .single-guide-content h2{ font-family:var(--font-head); font-size:clamp(22px,2.6vw,30px); font-weight:800; color:var(--secondary); letter-spacing:-.01em; margin:48px 0 18px; } .single-guide-content h3{ font-family:var(--font-head); font-size:clamp(19px,2.1vw,24px); font-weight:700; color:var(--secondary); margin:36px 0 14px; } .single-guide-content p{ margin:0 0 20px; color:var(--muted); } .single-guide-content strong{ color:var(--secondary); } .single-guide-content a{ color:var(--primary-dark); text-decoration:underline; text-underline-offset:2px; } .single-guide-content a:hover{ color:var(--primary); } .single-guide-content ul, .single-guide-content ol{ margin:0 0 20px; padding-left:24px; color:var(--muted); } .single-guide-content li{ margin-bottom:8px; line-height:1.65; } .single-guide-content li::marker{ color:var(--primary-dark); } .single-guide-content img{ width:100%; height:auto; border-radius:var(--radius-md); margin:28px 0; } .single-guide-content blockquote{ margin:32px 0; padding:20px 28px; border-left:3px solid var(--primary); background:var(--bg-soft); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:18px; font-style:italic; color:var(--secondary); } .single-guide-content blockquote p:last-child{ margin-bottom:0; } /* Bottom download repeat — same CTA again after the reader has finished the content, so they don't have to scroll back up for it. */ .single-guide-content-footer{ margin-top:56px; padding-top:40px; border-top:1px solid var(--border); text-align:center; } .single-guide-content-footer p{ font-size:19px; font-weight:800; color:var(--secondary); margin:0 0 24px; } .single-guide-content-footer .btn{ margin-top:0; } /* ---------- Container width — scoped rule (not a bare .container), same convention style.css uses elsewhere, so this never affects other pages. Only the download panel needs the site-wide width; the content section keeps its own narrower 760px reading width set above. ---------- */ .guide-download-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .guide-download-section .container{ max-width:1480px; } } @media (min-width:2560px){ .guide-download-section .container{ max-width:1600px; } } @media (max-width:640px){ .single-guide-banner{ padding-top:170px; padding-bottom:60px; } } /* ========================================================================== Videos Listing page — static banner + dynamic video grid. The grid itself reuses the shared .insights-grid / .insight-card / .insight-thumb / .insight-thumb-icon / .insight-thumb--photo / .insight-body / .insight-tags / .resource-link classes already defined in style.css (the exact same card the homepage's Insights section uses, icon-fallback included), so no new card CSS is needed here — only the banner and container-width scoping are page-specific. Load this AFTER style.css. ========================================================================== */ /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ .videos-listing-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .videos-listing-section .container{ max-width:1480px; } } @media (min-width:2560px){ .videos-listing-section .container{ max-width:1600px; } } /* ---------- Banner — same richer wash + subtle texture used on the About / Why Intellectyx / Events / Guides pages, for consistency. ---------- */ .videos-banner{ padding-top:190px; padding-bottom:70px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } .videos-banner .page-banner-inner{ max-width:760px; margin:0 auto; text-align:center; } @media (max-width:640px){ .videos-banner{ padding-top:170px; padding-bottom:60px; } } /* Separator between the banner and the listing below it. */ .videos-listing-section{ padding:76px 0 100px; border-top:1px solid var(--border); } /* ---------- Empty state — same dashed-card treatment as the Events/Guides listing pages' empty state, for visual consistency across listings. ---------- */ .videos-empty{ display:flex; align-items:center; gap:14px; padding:26px 28px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px dashed var(--border); font-size:14.5px; font-weight:600; color:var(--muted); } .videos-empty::before{ content:''; flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--white); border:1px solid var(--border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a015' stroke-width='1.6'%3E%3Crect x='3' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='M17 10l4-2v8l-4-2z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } @media (max-width:640px){ .videos-listing-section{ padding:56px 0 72px; } } /* ---------- Center an incomplete last row ---------- The shared .insights-grid is a CSS grid, which anchors every card to its column regardless of how many rows are full — with fewer than 4 videos that leaves the last (only) row flush left with dead space on the right. Switched to flexbox here, scoped to this page only, since justify-content:center naturally centers whatever cards don't fill a complete row while a 5th+ video still wraps exactly like the grid did. Card width per breakpoint matches the grid's own column math so nothing about the card size changes, only how leftover space is distributed. */ .videos-listing-section .insights-grid{ display:flex; flex-wrap:wrap; justify-content:center; } .videos-listing-section .insight-card{ flex:0 0 calc(25% - 18px); max-width:calc(25% - 18px); } @media (max-width:1180px){ .videos-listing-section .insight-card{ flex-basis:calc(50% - 12px); max-width:calc(50% - 12px); } } @media (max-width:640px){ .videos-listing-section .insight-card{ flex-basis:100%; max-width:100%; } } /* ========================================================================== Single Video page — banner, prominent video player, and article-body content typography. Reuses the shared .page-banner / .container / .breadcrumb / .sub utility classes already defined in style.css (the same light interior-page banner treatment used on services/single-event/single-guide pages), so this page's container width and banner styling match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under single-video-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .single-video-page{ background:var(--white); } /* ---------- Hero / banner ---------- */ .single-video-banner{ padding-bottom:225px; } .single-video-banner .page-banner-inner{ max-width:820px; margin:0 auto; text-align:center; } .single-video-categories{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:20px; } .single-video-category-tag{ display:inline-flex; align-items:center; padding:6px 16px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); box-shadow:var(--shadow-sm); transition:background .25s ease, border-color .25s ease; } .single-video-category-tag:hover{ background:var(--bg-soft); border-color:var(--primary-light); } @media (max-width:640px){ .single-video-banner{ padding-top:170px; padding-bottom:70px; } } /* ---------- Video player — the primary conversion element, given real visual weight instead of sitting flush against the page edges. Pulled up to overlap the banner by 30% of its own rendered height: since the player is 16:9 (height = 56.25% of its own width) and percentage margins resolve against the containing block's width (== the player's width here), a -16.875% top margin is exactly 30% of whatever height the player renders at, at every breakpoint. ---------- */ .single-video-player-section{ padding:0 0 80px; position:relative; z-index:2; } .single-video-player-section .container{ width:100%; max-width:960px; margin:0 auto; padding:0 15px; } .single-video-player{ position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:var(--radius-lg); background:var(--secondary); margin-top:-16.875%; box-shadow:0 40px 70px -24px rgba(0,20,30,.4), 0 14px 34px -10px rgba(0,20,30,.25); } @media (max-width:640px){ .single-video-player{ margin-top:-30px; } } .single-video-player iframe, .single-video-player embed, .single-video-player object{ position:absolute; inset:0; width:100%; height:100%; border:0; } .single-video-player-error{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:14px; font-weight:600; } /* ---------- Content body (the_content() output) ---------- */ .single-video-content-section{ padding:0 0 100px; } .single-video-content-section .container{ width:100%; max-width:760px; margin:0 auto; padding:0 15px; } .single-video-content{ font-size:17px; line-height:1.75; color:var(--ink); } .single-video-content > *:first-child{ margin-top:0; } .single-video-content h2{ font-family:var(--font-head); font-size:clamp(22px,2.6vw,30px); font-weight:800; color:var(--secondary); letter-spacing:-.01em; margin:48px 0 18px; } .single-video-content h3{ font-family:var(--font-head); font-size:clamp(19px,2.1vw,24px); font-weight:700; color:var(--secondary); margin:36px 0 14px; } .single-video-content p{ margin:0 0 20px; color:var(--muted); } .single-video-content strong{ color:var(--secondary); } .single-video-content a{ color:var(--primary-dark); text-decoration:underline; text-underline-offset:2px; } .single-video-content a:hover{ color:var(--primary); } .single-video-content ul, .single-video-content ol{ margin:0 0 20px; padding-left:24px; color:var(--muted); } .single-video-content li{ margin-bottom:8px; line-height:1.65; } .single-video-content li::marker{ color:var(--primary-dark); } .single-video-content img{ width:100%; height:auto; border-radius:var(--radius-md); margin:28px 0; } .single-video-content blockquote{ margin:32px 0; padding:20px 28px; border-left:3px solid var(--primary); background:var(--bg-soft); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:18px; font-style:italic; color:var(--secondary); } .single-video-content blockquote p:last-child{ margin-bottom:0; } @media (min-width:1600px){ .single-video-player-section .container{ max-width:1040px; } .single-video-content-section .container{ max-width:820px; } } /* ========================================================================== Blog Listing page — static banner, a large "Featured Article" spotlight that overlaps the banner's bottom edge, a wrapping category-pill filter bar, and the dynamic article grid. The grid itself reuses the shared .insights-grid / .insight-card / .insight-thumb / .insight-thumb-icon / .insight-thumb--photo / .insight-body / .insight-tags / .resource-link classes already defined in style.css (the exact same card the homepage's Insights section uses, icon-fallback included), so only the banner, spotlight and filter bar are page-specific. Load this AFTER style.css. ========================================================================== */ .blog-listing-page{ background:var(--white); } /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ .blog-featured-section .container, .blog-listing-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .blog-featured-section .container, .blog-listing-section .container{ max-width:1480px; } } @media (min-width:2560px){ .blog-featured-section .container, .blog-listing-section .container{ max-width:1600px; } } /* ---------- Banner — same richer wash + subtle texture used on the About / Why Intellectyx / Events / Guides / Videos pages, for consistency, but with extra bottom padding so the featured card below can float up and overlap its edge. ---------- */ .blog-banner{ padding-top:190px; padding-bottom:170px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } .blog-banner .page-banner-inner{ max-width:860px; margin:0 auto; text-align:center; } @media (max-width:640px){ .blog-banner{ padding-top:170px; padding-bottom:70px; } } /* ---------- Featured Article spotlight — floats up into the banner (same floating-card language as the single-guide download panel), the first visual thing a reader sees below the fold. ---------- */ .blog-featured-section{ padding:0 0 64px; } .blog-featured-card{ position:relative; margin-top:-120px; z-index:2; display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,20,30,.35), var(--shadow-lg); } .blog-featured-media{ position:relative; overflow:hidden; min-height:320px; background:var(--bg-soft-2); } .blog-featured-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .blog-featured-card:hover .blog-featured-media img{ transform:scale(1.05); } .blog-featured-badge{ position:absolute; top:20px; left:20px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:var(--radius-full); background:var(--primary); color:var(--white); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 8px 20px rgba(144,195,34,.4); } .blog-featured-badge svg{ width:13px; height:13px; } .blog-featured-body{ display:flex; flex-direction:column; justify-content:center; padding:44px 48px; } .blog-featured-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; } .blog-featured-topic{ display:inline-flex; align-items:center; padding:5px 14px; border-radius:var(--radius-full); background:var(--bg-soft); border:1px solid var(--border); font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-dark); } .blog-featured-date{ font-size:12.5px; font-weight:600; color:var(--muted-light); } .blog-featured-body h2{ font-family:var(--font-head); font-size:clamp(24px,2.6vw,32px); font-weight:800; line-height:1.25; color:var(--secondary); letter-spacing:-.01em; text-align: left; } .blog-featured-body h2 a{ color:inherit; } .blog-featured-body h2 a:hover{ color:var(--primary-dark); } .blog-featured-excerpt{ margin-top:16px; font-size:15.5px; line-height:1.7; color:var(--muted); } .blog-featured-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; } .blog-featured-author{ display:flex; align-items:center; gap:10px; } .blog-featured-author img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--border); } .blog-featured-author span{ font-size:13px; font-weight:700; color:var(--secondary); } @media (max-width:900px){ .blog-featured-card{ grid-template-columns:1fr; margin-top:-90px; } .blog-featured-media{ min-height:240px; } .blog-featured-body{ padding:32px; } } @media (max-width:560px){ .blog-featured-card{ margin-top:-56px; } .blog-featured-footer{ flex-direction:column; align-items:flex-start; gap:16px; } } /* ---------- Category filter bar ---------- */ .blog-listing-section{ padding:0 0 100px; } .blog-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; } /* ---------- AJAX loading state — assets/js/blog-listing.js adds this class to [data-blog-body] while a filter/pagination fetch is in flight, so the swap doesn't feel like a silent freeze. ---------- */ .blog-listing-body{ transition:opacity .2s ease; } .blog-listing-body.is-loading{ opacity:.45; pointer-events:none; } .blog-filter-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border) !important; font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--muted); cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } .blog-filter-pill:hover{ border: 1px solid var(--primary-light) !important; color:var(--secondary); background: transparent; } .blog-filter-pill.is-active{ background:var(--secondary); border-color:var(--secondary); color:#fff; box-shadow:0 10px 24px rgba(0,39,54,.22); } .blog-filter-pill.is-active:focus { background: var(--secondary) !important; border-color: var(--secondary) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(0, 39, 54, .22); } .blog-filter-count{ padding:1px 9px; border-radius:var(--radius-full); font-size:11.5px; font-weight:800; background:rgba(0,39,54,.08); color:var(--secondary); } .blog-filter-pill.is-active .blog-filter-count{ background:rgba(255,255,255,.2); color:#fff; } /* ---------- Empty state ---------- */ .blog-empty{ display:flex; align-items:center; gap:14px; padding:26px 28px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px dashed var(--border); font-size:14.5px; font-weight:600; color:var(--muted); } /* A plain .blog-empty{display:flex} rule outranks the browser's built-in [hidden]{display:none} default (same specificity, but this rule loads later), so the "no articles" message rendered even while the `hidden` attribute was set. Re-asserting display:none for the hidden state fixes that — same fix already applied to .insight-card[hidden] / .events-panel [hidden] elsewhere in this codebase. */ .blog-empty[hidden]{ display:none; } .blog-empty::before{ content:''; flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--white); border:1px solid var(--border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a015' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } /* ---------- Pagination — styled against WordPress's own paginate_links() output classes (.page-numbers / .current / .dots), so the real shortcode's markup needs no class-renaming hacks to match this design. ---------- */ .blog-pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:56px; } .blog-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--muted); text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease; } a.page-numbers:hover{ border-color:var(--primary-light); color:var(--secondary); } .blog-pagination .page-numbers.current{ background:var(--secondary); border-color:var(--secondary); color:#fff; } .blog-pagination .page-numbers.dots{ border:none; background:none; box-shadow:none; color:var(--muted-light); cursor:default; } .blog-pagination .page-numbers svg{ width:15px; height:15px; } @media (max-width:640px){ .blog-listing-section{ padding:0 0 72px; } /* Pills wrapping onto their own stacked rows reads broken on a phone — scroll them horizontally instead, the standard mobile pattern for a filter/category bar (same fix as the case-studies listing page). */ .blog-filter-bar{ flex-wrap:nowrap; overflow-x:auto; margin-left:-15px; margin-right:-15px; padding:2px 15px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .blog-filter-bar::-webkit-scrollbar{ display:none; } .blog-filter-pill{ flex-shrink:0; white-space:nowrap; } } /* ========================================================================== Single Blog Post page — banner, featured image, EEAT meta/trust signals (author, freshness, reading time, quick-answer, author bio box, on-page TOC), a sticky lead-gen sidebar, and a Related Articles grid. Reuses the shared .page-banner / .container / .breadcrumb / .btn / .sub / .eyebrow / .h2 / .insights-grid / .insight-card / .contact-form-panel utility classes already defined in style.css (the same interior-page banner, card and lead-form treatment used on services/single-event/ single-guide/single-video pages and the homepage's Insights section), so this page's container width, card language and form styling match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under single-post-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .single-post-page{ background:var(--white); } /* ---------- Theme override — the live WordPress theme centers headings (h1–h4) and body text by default, which fights this page's left-aligned layout hard enough to need !important. Scoped to .single-post-page's own elements only, and deliberately NOT applied to .single-post-related (that section's centered eyebrow/h2/sub is the intended homepage-style "section-header center" pattern, not a bug). ---------- */ .single-post-page .single-post-banner .breadcrumb, .single-post-page .single-post-banner .page-banner-title, .single-post-page .single-post-categories, .single-post-page .single-post-meta-author-text, .single-post-page .single-post-quick-answer-body, .single-post-page .single-post-content, .single-post-page .single-post-content h2, .single-post-page .single-post-content h3, .single-post-page .single-post-content h4, .single-post-page .single-post-content p, .single-post-page .single-post-author-name, .single-post-page .single-post-author-role, .single-post-page .single-post-author-desc, .single-post-page .single-post-trust h4, .single-post-page .single-post-sidebar .contact-form-panel h3, .single-post-page .single-post-sidebar .contact-form-panel > p{ text-align:left !important; } .single-post-page .single-post-hero--no-media .breadcrumb, .single-post-page .single-post-hero--no-media .single-post-categories, .single-post-page .single-post-hero--no-media .page-banner-title{ text-align:center !important; } /* ---------- Hero / banner — split layout: breadcrumb/category/title on the left, the featured image on the right, both sitting on the banner's own textured background (replaces the old centered-text banner plus a separate full-width image section below it). ---------- */ .single-post-banner{ text-align:left; padding-bottom:120px; } .single-post-banner .breadcrumb{ justify-content:flex-start; } /* The global .page-banner-title clamp (up to 52px) was sized for a centered, full-width banner — in this split layout the title only has ~55% of the banner's width to work with, so scale it down to match. */ .single-post-banner .page-banner-title{ font-size:clamp(26px, 2.8vw, 38px); } .single-post-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } /* No featured image to fill the right column — fall back to the old centered, single-column treatment used on the other single-* pages. */ .single-post-hero--no-media{ grid-template-columns:1fr; max-width:820px; margin:0 auto; text-align:center; } .single-post-hero--no-media .breadcrumb, .single-post-hero--no-media .single-post-categories{ justify-content:center; } .single-post-categories{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; margin-bottom:20px; } .single-post-category-tag{ display:inline-flex; align-items:center; padding:6px 16px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); box-shadow:var(--shadow-sm); transition:background .25s ease, border-color .25s ease; } .single-post-category-tag:hover{ background:var(--bg-soft); border-color:var(--primary-light); } .single-post-hero-media{ position:relative; } .single-post-hero-media img{ width:100%; display:block; height:350px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:0 30px 60px -20px rgba(0,20,30,.28), var(--shadow-lg); } @media (max-width:900px){ .single-post-hero{ grid-template-columns:1fr; gap:32px; } } @media (max-width:640px){ .single-post-banner{ padding-top:170px; padding-bottom:60px; } .single-post-hero-media img{ height:220px; } } /* ---------- Content columns — scoped container rule (not a bare .container), same convention style.css uses elsewhere. ---------- */ .single-post-section{ padding:64px 0 100px; } .single-post-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .single-post-section .container{ max-width:1480px; } } @media (min-width:2560px){ .single-post-section .container{ max-width:1600px; } } .single-post-columns{ display:grid; grid-template-columns:1fr .42fr; gap:64px; align-items:start; } .single-post-sidebar{ position:sticky; top:110px; display:flex; flex-direction:column; gap:24px; } /* ---------- EEAT meta bar — author, freshness (last updated), reading time and share, all in one scannable row right above the fold of the article — the trio Google's helpful-content guidance points to for "who wrote this, is it current, how substantial is it." ---------- */ .single-post-meta-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid var(--border); } .single-post-meta-left{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .single-post-meta-author{ display:flex; align-items:center; gap:10px; } .single-post-meta-author img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border); } .single-post-meta-author-text{ font-size:13.5px; line-height:1.3; } .single-post-meta-author-text span{ display:block; color:var(--muted-light); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; } .single-post-meta-author-text a{ font-weight:800; color:var(--secondary); } .single-post-meta-author-text a:hover{ color:var(--primary-dark); } .single-post-meta-fact{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; } .single-post-meta-fact svg{ width:15px; height:15px; flex-shrink:0; color:var(--primary-dark); } .single-post-share{ display:flex; align-items:center; gap:8px; } .single-post-share span{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-light); margin-right:2px; } .single-post-share a{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--bg-soft-2); border:1px solid var(--border); color:var(--secondary-400); transition:background .25s ease, color .25s ease, transform .25s ease; } .single-post-share a svg{ width:14px; height:14px; } .single-post-share a:hover{ background:var(--primary); border-color:var(--primary); color:var(--white); transform:translateY(-2px); } @media (max-width:640px){ .single-post-meta-bar{ flex-direction:column; align-items:flex-start; } } /* ---------- Quick Answer — a direct, extractable summary near the top of the article (the block AI answer engines and featured snippets most often lift), styled as a highlighted callout rather than a plain paragraph. ---------- */ .single-post-quick-answer{ display:flex; gap:16px; padding:22px 26px; margin-bottom:36px; background:var(--bg-soft); border-left:4px solid var(--primary); border-radius:0 var(--radius-md) var(--radius-md) 0; } .single-post-quick-answer-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; margin-top:2px; background:var(--white); border:1px solid var(--border); color:var(--primary-dark); } .single-post-quick-answer-icon svg{ width:17px; height:17px; } .single-post-quick-answer-body span.eyebrow{ margin-bottom:8px; } .single-post-quick-answer-body p{ margin:0; font-size:16px; line-height:1.65; color:var(--ink); } /* ---------- Floating Table of Contents — sticks to the viewport for the whole page (not just the content column), collapsed to a small toggle by default so it never competes with the article opening; clicking it opens a panel of heading links, and clicking a link jumps to that heading and closes the panel. Built entirely by assets/js/single-post.js at runtime by scanning .single-post-content's own h2/h3s, so it works whether or not a TOC plugin is active. If a TOC plugin still injects its own list into the content (e.g. Easy Table of Contents' #TOC / #ez-toc-container), hide that copy so the two never show at once. */ .single-post-content > #TOC, .single-post-content #ez-toc-container{ display:none; } .toc-float{ position:fixed; left:28px; bottom:28px; z-index:60; } .toc-float-toggle{ display:flex; align-items:center; gap:9px; padding:14px 22px; border:none; border-radius:var(--radius-full); background:var(--primary); color:#fff; font-family:var(--font-head); font-weight:800; font-size:13.5px; box-shadow:0 16px 34px rgba(0,20,30,.3); cursor:pointer; transition:background .25s ease, transform .25s ease, box-shadow .25s ease; } .toc-float-toggle svg{ width:16px; height:16px; flex-shrink:0; transition:transform .3s ease; } .toc-float-toggle:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 20px 40px rgba(0,20,30,.36); color:#fff; } .toc-float.is-open .toc-float-toggle svg{ transform:rotate(90deg); } .toc-float-panel{ position:absolute; left:0; bottom:calc(100% + 14px); width:290px; max-height:min(60vh, 420px); overflow-y:auto; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:20px 22px; opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; } .toc-float.is-open .toc-float-panel{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .25s var(--ease), transform .25s var(--ease); } .toc-float-panel-title{ font-family:var(--font-head); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--secondary); margin:0 0 12px; } .toc-float-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .toc-float-list a{ display:block; padding:8px 10px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; transition:background .2s ease, color .2s ease; } .toc-float-list a:hover{ background:var(--bg-soft); color:var(--secondary); } .toc-float-list a.is-h3{ padding-left:22px; font-weight:500; font-size:12.5px; } .toc-float-list a.is-active{ background:var(--bg-soft); color:var(--primary-dark); } @media (max-width:640px){ .toc-float{ left:auto; right:16px; bottom:16px; } .toc-float-toggle span{ display:none; } .toc-float-toggle{ padding:15px; border-radius:50%; } .toc-float-panel{ width:calc(100vw - 32px); left:auto; right:-8px; } } /* ---------- Article content (the_content() output) ---------- */ .single-post-content{ font-size:17px; line-height:1.75; color:var(--ink); } .single-post-content > *:first-child{ margin-top:0; } .single-post-content h2{ font-family:var(--font-head); font-size:clamp(22px,2.6vw,30px); font-weight:800; color:var(--secondary); letter-spacing:-.01em; margin:48px 0 18px; } .single-post-content h3{ font-family:var(--font-head); font-size:clamp(19px,2.1vw,24px); font-weight:700; color:var(--secondary); margin:36px 0 14px; } .single-post-content h4{ font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--secondary); margin:28px 0 12px; } .single-post-content p{ margin:0 0 20px; color:var(--muted); font-size: 16px; } .single-post-content strong{ color:var(--secondary); } .single-post-content a{ color:var(--primary-dark); text-decoration:underline; text-underline-offset:2px; } .single-post-content a:hover{ color:var(--primary); } .single-post-content ul, .single-post-content ol{ margin:0 0 20px; padding-left:24px; color:var(--muted); } .single-post-content li{ margin-bottom:8px; line-height:1.65; } .single-post-content li::marker{ color:var(--primary-dark); } .single-post-content img{ width:100%; height:auto; border-radius:var(--radius-md); margin:28px 0; } .single-post-content table{ width:100%; margin:28px 0; border-collapse:collapse; font-size:14.5px; } .single-post-content th{ text-align:left; padding:12px 16px; background:var(--bg-soft); color:var(--secondary); font-weight:800; border-bottom:2px solid var(--border); } .single-post-content td{ padding:12px 16px; border-bottom:1px solid var(--border); color:var(--muted); } .single-post-content blockquote{ margin:32px 0; padding:20px 28px; border-left:3px solid var(--primary); background:var(--bg-soft); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:18px; font-style:italic; color:var(--secondary); } .single-post-content blockquote p:last-child{ margin-bottom:0; } /* ---------- Author box — the strongest on-page E-E-A-T signal: a real person, their credential/role, a short bio and verifiable social profiles, plus a path to more of their work. ---------- */ .single-post-author-box{ display:flex; gap:22px; padding:28px; margin-top:52px; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-lg); } .single-post-author-photo img{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--white); box-shadow:var(--shadow-sm); } .single-post-author-body{ flex:1; } .single-post-author-name{ font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); margin:0; } .single-post-author-name a{ color:inherit; } .single-post-author-name a:hover{ color:var(--primary-dark); } .single-post-author-role{ display:block; margin-top:2px; font-size:12.5px; font-weight:700; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.03em; } .single-post-author-desc{ margin:12px 0 0; font-size:14.5px; line-height:1.7; color:var(--muted); } .single-post-author-links{ display:flex; align-items:center; gap:10px; margin-top:16px; } .single-post-author-links a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--secondary-400); } .single-post-author-links a:hover{ color:var(--primary-dark); } .single-post-author-links a[aria-label] { width:32px; height:32px; justify-content:center; border-radius:50%; background:var(--bg-soft-2); border:1px solid var(--border); transition:background .25s ease, color .25s ease, transform .25s ease; } .single-post-author-links a[aria-label]:hover{ background:var(--primary); border-color:var(--primary); color:var(--white); transform:translateY(-2px); } .single-post-author-links a svg{ width:15px; height:15px; } .single-post-author-links .single-post-author-viewall{ margin-left:auto; color:var(--primary-dark); } @media (max-width:560px){ .single-post-author-box{ flex-direction:column; text-align:center; } .single-post-author-photo{ margin:0 auto; } .single-post-author-links{ justify-content:center; flex-wrap:wrap; } .single-post-author-links .single-post-author-viewall{ margin-left:0; width:100%; justify-content:center; } /* The theme-override block above forces these left with !important at every width — re-center them here so the mobile stacked layout still reads centered as designed. */ .single-post-page .single-post-author-name, .single-post-page .single-post-author-role, .single-post-page .single-post-author-desc{ text-align:center !important; } } /* ---------- Sidebar — sticky lead-gen card reusing the homepage's own .contact-form-panel + Zoho .zf-* form styling verbatim, plus a compact trust/EEAT strip beneath it. ---------- */ .single-post-sidebar .contact-form-panel{ padding:32px; } .single-post-trust{ padding:24px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); } .single-post-trust h4{ font-family:var(--font-head); font-size:14px; font-weight:800; color:var(--secondary); margin:0 0 14px; } .single-post-trust ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .single-post-trust li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.55; color:var(--muted); } .single-post-trust li svg{ flex-shrink:0; width:17px; height:17px; margin-top:1px; color:var(--primary-dark); } @media (max-width:980px){ .single-post-columns{ grid-template-columns:1fr; gap:48px; } .single-post-sidebar{ position:static; } } /* ---------- Related Articles — always exactly 3 posts (see the PHP query), so the grid is fixed to 3 columns instead of inheriting the homepage's bare 4-column .insights-grid, which left an empty 4th track and pushed the row out of alignment. ---------- */ .single-post-related{ background:var(--bg-soft); border-top:1px solid var(--border); } /* This section's
was relying on the bare .container selector, which carries no width rule of its own (by design — see the file header) — so the grid rendered edge-to-edge instead of matching the rest of the page. Scoped here (not a bare .container edit), so it only ever affects this section on this page. */ .single-post-related .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .single-post-related .container{ max-width:1480px; } } @media (min-width:2560px){ .single-post-related .container{ max-width:1600px; } } .single-post-related .section-header{ max-width:640px; } .single-post-related .insights-grid{ grid-template-columns:repeat(3,1fr); } @media (max-width:1180px){ .single-post-related .insights-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .single-post-related .insights-grid{ grid-template-columns:1fr; } } @media (max-width:640px){ .single-post-section{ padding:40px 0 72px; } } /* ========================================================================== Success Stories (Case Studies) Listing page — static banner, an AJAX category filter bar, and a dynamic grid of case studies. Deliberately NOT the light .insights-grid / .insight-card system every other listing page (guides/videos/blog/events) already uses — case studies are about outcomes, so the card here leads with a big result number on a dark, photographic background instead of a thumbnail + date + "read more" link. Borrows its visual DNA from the homepage/ services-page .story-card (dark bg-image, icon+tag, title, stat) but as its own always-expanded grid card rather than that component's hover-to-expand horizontal-scroll-strip behavior, and under its own class names so this page can never affect that component elsewhere. Load this AFTER style.css. ========================================================================== */ .case-studies-listing-page{ background:var(--white); } /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ .case-banner .container, .case-listing-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .case-banner .container, .case-listing-section .container{ max-width:1480px; } } @media (min-width:2560px){ .case-banner .container, .case-listing-section .container{ max-width:1600px; } } /* ---------- Banner ---------- */ .case-banner{ padding-top:190px; padding-bottom:90px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } .case-banner .page-banner-inner{ max-width:780px; margin:0 auto; text-align:center; } @media (max-width:640px){ .case-banner{ padding-top:170px; padding-bottom:60px; } } /* Credibility strip — same "stand out" pill-row language as the AI Transformation Consulting page's banner trust points, re-authored here under this page's own class so the two never collide. */ .case-banner .stats-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px; margin:28px auto 0; padding:14px 30px; max-width:fit-content; border-radius:var(--radius-full); background:var(--bg-soft-2); border:1px solid var(--border); } .case-banner .stats-row span{ font-size:13.5px; font-weight:800; letter-spacing:.02em; color:var(--secondary); white-space:nowrap; } .case-banner .stats-row .divider{ width:4px; height:4px; border-radius:50%; background:var(--primary); } @media (max-width:640px){ .case-banner .stats-row{ padding:14px 22px; } } /* ---------- Category filter bar — same pill language as the blog listing page, re-scoped under this page's own class so the two stay independent. ---------- */ .case-listing-section{ padding:76px 0 100px; border-top:1px solid var(--border); } .case-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; justify-content: center; } .case-filter-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--muted); cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } .case-filter-pill:hover{ border-color:var(--primary-light); color:var(--secondary); } .case-filter-pill.is-active{ background:var(--secondary); border-color:var(--secondary); color:#fff; box-shadow:0 10px 24px rgba(0,39,54,.22); } .case-filter-pill.is-active:focus { color: rgb(255, 255, 255) !important; box-shadow: rgba(0, 39, 54, 0.22) 0px 10px 24px; background: var(--secondary) !important; border-color: var(--secondary) !important; } .case-filter-count{ padding:1px 9px; border-radius:var(--radius-full); font-size:11.5px; font-weight:800; background:rgba(0,39,54,.08); color:var(--secondary); } .case-filter-pill.is-active .case-filter-count{ background:rgba(255,255,255,.2); color:#fff; } /* AJAX loading state — case-studies-listing.js adds this while a filter/ pagination fetch is in flight. */ .case-listing-body{ transition:opacity .2s ease; } .case-listing-body.is-loading{ opacity:.45; pointer-events:none; } /* ---------- The case-study card — dark, photographic, stat-forward. ---------- */ .case-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; } .case-story-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; aspect-ratio:4/3; border-radius:var(--radius-lg); background:var(--secondary); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); color:#fff; text-decoration:none; } .case-story-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px -18px rgba(0,39,54,.45); } .case-story-card-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s var(--ease); } .case-story-card:hover .case-story-card-bg{ transform:scale(1.06); } .case-story-card-bg--empty{ background:linear-gradient(150deg, var(--secondary) 0%, var(--secondary-700) 100%); } .case-story-card::before{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0, 39, 54, .6) 0%, rgba(0, 29, 39, .9) 55%, rgba(0, 15, 20, .92) 100%); } .case-story-card-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:22px 22px 0; } .case-story-card-icon{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(4px); color:var(--primary-light); display: none; } .case-story-card-icon svg{ width:19px; height:19px; } .case-story-card-tag{ padding:6px 14px; border-radius:var(--radius-full); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(4px); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; } .case-story-card-body{ position:relative; z-index:2; margin-top:auto; padding:0 24px 26px; } .case-story-card-title{ font-family:var(--font-head); font-size:19px; font-weight:800; line-height:1.3; color:#fff; display: block; } .case-story-card-desc{ margin-top:10px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.72); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; display: none; } /* align-items:center (not the default baseline) — baseline aligned the number's single text line against only the label's *first* line, which looked lopsided whenever the label wrapped to two lines. Centering the whole label block against the number keeps it balanced either way. */ .case-story-card-stat{ display:flex; align-items:center; gap:10px; margin-top:18px; } .case-story-card-stat-num{ font-family:var(--font-head); font-size:34px; font-weight:800; line-height:1; color:var(--primary-light); white-space:nowrap; } .case-story-card-stat-label{ font-size:11.5px; font-weight:700; line-height:1.35; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.7); max-width:150px; } .case-story-card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:13.5px; font-weight:700; color:#fff; transition:gap .25s ease; } .case-story-card-link svg{ width:14px; height:14px; flex-shrink:0; } .case-story-card:hover .case-story-card-link{ gap:12px; color:var(--primary-light); } @media (max-width:1180px){ .case-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .case-grid{ grid-template-columns:1fr; } .case-listing-section{ padding:56px 0 72px; } /* Pills wrapping onto their own stacked rows reads broken on a phone — scroll them horizontally instead, the standard mobile pattern for a filter/category bar. Negative margin + matching padding lets the row bleed to the screen edges so the first/last pill isn't flush against the container gutter. */ .case-filter-bar{ flex-wrap:nowrap; overflow-x:auto; margin-left:-15px; margin-right:-15px; padding:2px 15px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; justify-content: flex-start; } .case-filter-bar::-webkit-scrollbar{ display:none; } .case-filter-pill{ flex-shrink:0; white-space:nowrap; } } /* ---------- Empty state ---------- */ .case-empty{ display:flex; align-items:center; gap:14px; padding:26px 28px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px dashed var(--border); font-size:14.5px; font-weight:600; color:var(--muted); } .case-empty[hidden]{ display:none; } .case-empty::before{ content:''; flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--white); border:1px solid var(--border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a015' stroke-width='1.6'%3E%3Cpath d='M3 17l6-6 4 4 8-8M21 11V7h-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; } /* ---------- Pagination — same WordPress paginate_links() classes the blog listing page styles (.page-numbers / .current / .dots). ---------- */ .case-pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:56px; } .case-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--muted); text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease; } .case-pagination a.page-numbers:hover{ border-color:var(--primary-light); color:var(--secondary); } .case-pagination .page-numbers.current{ background:var(--secondary); border-color:var(--secondary); color:#fff; } .case-pagination .page-numbers.dots{ border:none; background:none; box-shadow:none; color:var(--muted-light); cursor:default; } .case-pagination .page-numbers svg{ width:15px; height:15px; } /* ========================================================================== About Us page — hero + new components (story/timeline, mission & values, security grid, locations). Dedicated file, never mixed into style.css. Reuses shared .page-banner / .container / .section / .section-header / .split-head / .eyebrow / .h2 / .accent / .sub / .btn / .industries-grid / .industry-tile classes already defined in style.css, so this page matches the rest of the site exactly. New components below are scoped to classes that can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ /* Lighter bg-soft wash on Why Intellectyx and Security & Responsible AI, this page only. Safe to scope by id: about.css is never loaded on index.html, so #why-intellectyx's own background on the homepage is untouched even though the id matches — this rule simply never reaches that document. #security is a new id unique to this page. */ #why-intellectyx, #security{ background:var(--bg-soft); } /* Scoped container-width rule (not a bare .container) — same convention style.css uses sitewide, matching the homepage's own container scale (1360px / 1480px at 1600px+ / 1600px at 2560px+). Scoped to this page's own new section ids only, so it can never affect any other WordPress page or template. (#hero, #why-intellectyx, #results, #awards, #cta and #faq already get their width from style.css's own .page-banner / .why-section / .results-section / .awards-section / .cta-section / .contact-faq-section-alt rules, and #industries already matches style.css's own #industries selector — none of those need it here.) */ #our-story .container, #mission-values .container, #security .container, #locations .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #our-story .container, #mission-values .container, #security .container, #locations .container{ max-width:1480px; } } @media (min-width:2560px){ #our-story .container, #mission-values .container, #security .container, #locations .container{ max-width:1600px; } } /* ---------- Hero (lighter wash + a secondary-color touch) ---------- */ .about-hero{ padding-top:200px; padding-bottom:140px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(60% 85% at 100% 115%, rgba(0,39,54,.12), transparent 65%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } .about-hero .page-banner-inner{ max-width:1000px; margin:0 auto; text-align:center; } .about-hero .eyebrow{ margin-bottom:4px; } .about-hero .page-banner-title{ text-transform:none; } .about-hero .sub{ max-width:1000px; margin-left:auto; margin-right:auto; } .about-hero-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 32px; margin-top:32px; } .about-hero-link{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--secondary); border-bottom:2px solid var(--border); padding-bottom:4px; transition:color .25s ease, border-color .25s ease; } .about-hero-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .about-hero-link:hover{ color:var(--primary-dark); border-color:var(--primary); } .about-hero-link:hover svg{ transform:translateX(3px); } @media (max-width:640px){ .about-hero{ padding-top:170px; padding-bottom:80px; } } /* Lighter bg-soft wash on Our Story too, this page only — same reasoning as the #why-intellectyx / #security rule above. */ #our-story{ background:var(--bg-soft); } /* ---------- Our Story — sticky copy column + timeline column ---------- Same self-contained-left-column pattern as .why-columns/.why-sticky (see Why Intellectyx): the eyebrow/heading/intro live inside the sticky column itself rather than a separate full-width header, so the two sections read as one design language. Scoped under its own class names since this section's content and column ratio differ. */ .about-story-columns{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; margin-top:8px; } .about-story-copy{ position:sticky; top:120px; padding:44px 44px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); border-left:4px solid var(--primary); box-shadow:var(--shadow-sm); } .about-story-copy .h2{ font-size:clamp(26px, 2.7vw, 36px); text-align: left; } .about-story-copy .sub{ margin-top:18px; } .about-story-copy p{ font-size:16px; line-height:1.75; color:var(--muted); margin:20px 0 0; } .about-story-hq{ display:flex; align-items:flex-start; gap:14px; margin-top:28px !important; padding:20px 22px; border-radius:var(--radius-md); background:var(--bg-soft); border:1px solid var(--border); } .about-story-hq-icon{ flex-shrink:0; width:38px; height:38px; border-radius:11px; margin-top:1px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 18px -6px var(--primary-glow); } .about-story-hq-icon svg{ width:18px; height:18px; } .about-story-hq p{ margin:0 !important; color:var(--secondary) !important; font-size:15px !important; line-height:1.55 !important; } .about-story-hq strong{ color:var(--secondary); } /* Vertical timeline — card-based items with icons, hover lift, and a pulsing marker on the current (last) milestone. The line fades in from the top and grows strongest at the bottom, echoing the "we're building toward now" narrative of the copy. */ .about-timeline{ position:relative; } .about-timeline::before{ content:''; position:absolute; left:19px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, var(--border) 0%, var(--primary) 100%); } .timeline-item{ position:relative; padding:0 0 24px 60px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item::before{ content:''; position:absolute; left:10px; top:24px; width:20px; height:20px; border-radius:50%; background:var(--white); border:3px solid var(--border); z-index:1; transition:border-color .3s ease; } .timeline-item:last-child::before{ background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 5px var(--primary-glow); animation:timelinePulse 2.2s ease-in-out infinite; } @keyframes timelinePulse{ 0%, 100%{ box-shadow:0 0 0 5px var(--primary-glow); } 50%{ box-shadow:0 0 0 9px rgba(144,195,34,.16); } } .timeline-card{ padding:22px 26px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; } .timeline-item:hover .timeline-card{ transform:translateX(6px); box-shadow:var(--shadow-md); border-color:transparent; } .timeline-item:last-child .timeline-card{ background:linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%); border-color:var(--primary-light); } .timeline-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .timeline-icon{ flex-shrink:0; width:32px; height:32px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--border); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .timeline-icon svg{ width:16px; height:16px; } .timeline-year{ font-family:var(--font-head); font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--primary-dark); text-transform:uppercase; } .timeline-now-badge{ margin-left:auto; padding:3px 11px; border-radius:var(--radius-full); background:var(--secondary); color:var(--primary-light); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .timeline-item h3{ font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); margin:0 0 6px; text-align: left; } .timeline-item p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); } @media (max-width:900px){ .about-story-columns{ grid-template-columns:1fr; gap:40px; } .about-story-copy{ position:static; padding:32px 28px; } } /* ---------- Mission & Values ---------- */ /* A full-width dark panel (not floating text) so the quote reads as a deliberate, weighted statement rather than empty space with a caption. */ .mission-panel{ position:relative; overflow:hidden; margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 60px; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--secondary) 0%, var(--secondary-700) 100%); } .mission-panel::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 80% at 92% 8%, rgba(144,195,34,.18), transparent 60%); } .mission-panel-quote{ position:relative; z-index:1; } .mission-quote-mark{ display:block; font-family:var(--font-head); font-size:88px; line-height:1; font-weight:800; color:var(--primary); opacity:.55; margin-bottom:-20px; } .mission-panel-quote p{ font-family:var(--font-head); font-size:clamp(26px, 3vw, 38px); font-weight:800; font-style:italic; color:#fff; margin:0; line-height:1.25; } .mission-panel-body{ position:relative; z-index:1; } .mission-panel-body p{ font-size:16px; line-height:1.75; color:rgba(255,255,255,.72); margin:0 0 18px; } .mission-panel-body p:last-child{ margin-bottom:0; } @media (max-width:900px){ .mission-panel{ grid-template-columns:1fr; padding:40px 28px; gap:28px; } } /* Values grid reuses the site's dark, numbered .pillar-card component (see the services page) via the shared .pillars-grid, so six values read as a rich, premium set rather than thin filler cards. */ .values-grid{ margin-top:56px; } /* ---------- Industries — compact tiles (no description copy on this page, so the shared .industry-tile's 250px min-height leaves dead space) plus a small flag-icon badge instead of a text pill for "Flagship". Scoped to this page's #industries only — style.css's own .industry-tile is untouched, so the services page's taller cards (with description text) are unaffected. ---------- */ #industries .industry-tile{ min-height:0; padding:26px 24px; gap:12px; } .industry-tile-badge{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; background:var(--secondary); color:var(--primary-light); display:flex; align-items:center; justify-content:center; } .industry-tile-badge svg{ width:14px; height:14px; } /* ---------- Security & Responsible AI — sticky copy column + item grid ---------- Same grid/sticky mechanics as .why-columns/.why-sticky (see Why Intellectyx) and .about-story-columns (see Our Story), scoped under its own class names since this section's copy and column ratio differ. */ .security-columns{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; margin-top:56px; } .security-sticky{ position:sticky; top:120px; } .security-sticky .split-title{ margin-top:18px; font-size:clamp(26px, 2.7vw, 34px); text-align:left; } .security-sticky .sub{ margin-top:18px; text-align:left; } .security-sticky-btn{ margin-top:28px; } .about-security-note{ margin-top:20px; font-size:15px; line-height:1.7; color:var(--muted); } .security-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .security-item{ background:var(--white); padding:28px 26px; } .security-item-icon{ width:44px; height:44px; border-radius:12px; margin-bottom:16px; background:var(--bg-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary-dark); } .security-item-icon svg{ width:20px; height:20px; } .security-item h3{ font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--secondary); margin:0 0 8px; text-align: left; } .security-item p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); } @media (max-width:900px){ .security-columns{ grid-template-columns:1fr; gap:40px; } .security-sticky{ position:static; } } @media (max-width:560px){ .security-grid{ grid-template-columns:1fr; } } /* ---------- Our Locations — dark secondary-color section ---------- A deliberately darker band (matching the mission-panel/cta-section navy gradient already used on this page and sitewide) so the page closes its "where we are" story with more weight than a plain white section. Cards are translucent glass panels so they read against the dark ground instead of a white .location-card sitting oddly on it. */ #locations{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--secondary) 0%, var(--secondary-700) 100%); } #locations::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 80% at 8% 100%, rgba(144,195,34,.14), transparent 60%), radial-gradient(45% 70% at 95% 0%, rgba(144,195,34,.10), transparent 60%); } #locations .container{ position:relative; z-index:1; } #locations .h2 .accent{ color:var(--primary-light); } .locations-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:56px; } .location-card{ position:relative; padding:34px 30px; border-radius:var(--radius-lg); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease, border-color .3s ease; } .location-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -12px rgba(0,0,0,.35); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); } .location-badge{ display:inline-flex; margin-bottom:16px; padding:5px 14px; border-radius:var(--radius-full); background:var(--primary); color:var(--secondary); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .location-card h3{ font-family:var(--font-head); font-size:19px; font-weight:800; color:#fff; margin:0 0 14px; text-align: left; } .location-card address, .location-card p{ font-style:normal; margin:0 0 4px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68); } .location-card .location-contact{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); } .location-card .location-contact a{ display:block; margin-bottom:4px; font-size:14.5px; font-weight:700; color:#fff; } .location-card .location-contact a:hover{ color:var(--primary-light); } .location-card .location-roles-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px; font-weight:800; color:var(--primary-light); } .location-card .location-roles-link svg{ width:15px; height:15px; } @media (max-width:1000px){ .locations-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } } /* ========================================================================== Why Intellectyx page — banner + new components. Dedicated file, never mixed into style.css. Reuses shared .page-banner / .container / .section / .section-header / .split-head / .eyebrow / .h2 / .accent / .sub / .btn / .pillars-grid / .pillar-card / .why-columns / .why-sticky / .why-row / .results-section / .value-section / .contact-faq-section-alt / .services-banner classes already defined in style.css, so this page matches the rest of the site exactly. New components below are scoped to classes that can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ /* Lighter bg-soft wash on No Rip and Replace, for visual rhythm against the plain-white sections around it (same pattern used on the About page's Why Intellectyx / Security / Our Story sections). This section's id is prefixed (#why-systems, not the generic #systems) because this stylesheet isn't guaranteed to load only on why-intellectyx.html — pages are pasted section-by-section as raw HTML in WordPress with no page wrapper class to scope against, and everything is merged into one shared ix-style.css, so a generic id here would collide with any other page's same-named section. */ #why-systems{ background:var(--bg-soft); } /* FAQ sits directly under IX Value Engine's own white lower half (the value-steps cards), so the two sections were blending together with no visible boundary. A soft wash + a subtle top divider line separates them without introducing a hard section-break look. */ #why-faq{ background:var(--bg-soft); border-top:1px solid var(--border); } /* Scoped container-width rule (not a bare .container) — same convention style.css uses sitewide, matching the homepage's own container scale (1360px / 1480px at 1600px+ / 1600px at 2560px+). Scoped to this page's own new section ids only — #hero (.page-banner), #four-reasons (.why-section), #results (.results-section), #value-engine (.value-section), #why-faq (.contact-faq-section-alt) and #get-started already get their width from style.css's own rules for those classes/ids. */ #buying .container, #why-systems .container, #one-team .container, #why-platform .container, #different .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #buying .container, #why-systems .container, #one-team .container, #why-platform .container, #different .container{ max-width:1480px; } } @media (min-width:2560px){ #buying .container, #why-systems .container, #one-team .container, #why-platform .container, #different .container{ max-width:1600px; } } /* ---------- Hero — lighter wash + a secondary-color touch ---------- */ .why-hero{ padding-top:200px; padding-bottom:140px; background: radial-gradient(50% 65% at 15% -10%, var(--wash-tint), transparent 60%), radial-gradient(45% 60% at 85% -5%, rgba(144,195,34,.14), transparent 60%), radial-gradient(60% 85% at 100% 115%, rgba(0,39,54,.12), transparent 65%), radial-gradient(circle at 1px 1px, rgba(0,39,54,.06) 1px, transparent 0) 0 0/28px 28px, linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 75%); } .why-hero .page-banner-inner{ max-width:820px; margin:0 auto; text-align:center; } .why-hero .sub{ max-width:760px; margin-left:auto; margin-right:auto; } .why-hero-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 32px; margin-top:32px; } .why-hero-link{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--secondary); border-bottom:2px solid var(--border); padding-bottom:4px; transition:color .25s ease, border-color .25s ease; } .why-hero-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .why-hero-link:hover{ color:var(--primary-dark); border-color:var(--primary); } .why-hero-link:hover svg{ transform:translateX(3px); } @media (max-width:640px){ .why-hero{ padding-top:170px; padding-bottom:80px; } } /* ---------- What You're Actually Buying — 3 outcome cards ---------- Reuses .pillars-grid/.pillar-card (see the services page) for the same premium dark-card treatment; only the tag/heading/icon differ per item. */ .buying-grid{ margin-top:56px; } /* ---------- No Rip and Replace — sticky copy column + item grid ---------- Same grid/sticky mechanics as .why-columns/.why-sticky, scoped under its own class names since this section's copy and column ratio differ. */ .systems-columns{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; margin-top:56px; } .systems-sticky{ position:sticky; top:120px; } .systems-sticky .split-title{ margin-top:18px; font-size:clamp(26px, 2.7vw, 34px); text-align:left; } .systems-sticky .sub{ margin-top:18px; text-align:left; } .systems-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .systems-item{ background:var(--white); padding:28px 26px; } .systems-item-icon{ width:44px; height:44px; border-radius:12px; margin-bottom:16px; background:var(--bg-soft); border:1px solid var(--border); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .systems-item-icon svg{ width:20px; height:20px; } .systems-item h3{ font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--secondary); margin:0 0 8px; text-align: left; } .systems-item p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); } @media (max-width:900px){ .systems-columns{ grid-template-columns:1fr; gap:40px; } .systems-sticky{ position:static; } } @media (max-width:560px){ .systems-grid{ grid-template-columns:1fr; } } /* ---------- How We're Staffed — one statement + connected-node visual ---------- */ .one-team-body{ max-width:820px; margin:0 auto; text-align:center; } .one-team-body p{ font-size:17px; line-height:1.75; color:var(--muted); margin:0; } .one-team-flow{ display:flex; align-items:center; justify-content:center; gap:0; max-width:820px; margin:56px auto 0; } .one-team-node{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto; width:150px; } .one-team-node-icon{ width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 12px 24px -6px var(--primary-glow); } .one-team-node-icon svg{ width:24px; height:24px; } .one-team-node span{ font-family:var(--font-head); font-weight:800; font-size:13.5px; color:var(--secondary); text-align:center; } .one-team-connector{ flex:1 1 auto; height:2px; background:linear-gradient(90deg, var(--primary) 0%, var(--border) 50%, var(--primary) 100%); margin:0 -6px 32px; min-width:24px; } @media (max-width:700px){ .one-team-flow{ flex-direction:column; gap:16px; } .one-team-connector{ width:2px; height:32px; margin:0; background:linear-gradient(180deg, var(--primary) 0%, var(--border) 100%); } } /* ---------- Already Invested In A Platform? ---------- Two-column layout (left: context + platform badges, right: the old-question-to-new-question shift card) so the section reads as one cohesive block instead of a centered header floating above a separate card. Matches the same grid/sticky mechanics as .systems-columns and .why-columns elsewhere on this page. */ #why-platform{ background:var(--bg-soft); } .platform-columns{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:8px; } .platform-sticky{ position:sticky; top:120px; } .platform-sticky .split-title{ margin-top:18px; font-size:clamp(26px, 2.7vw, 34px); text-align:left; } .platform-sticky .sub{ margin-top:18px; text-align:left; } .platform-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .platform-badge{ padding:8px 18px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--border); font-size:13px; font-weight:700; color:var(--secondary); } .platform-shift{ position:relative; overflow:hidden; padding:44px 40px; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--secondary) 0%, var(--secondary-700) 100%); box-shadow:var(--shadow-lg); } .platform-shift::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 80% at 90% 8%, rgba(144,195,34,.18), transparent 60%); } .platform-shift > *{ position:relative; z-index:1; } .platform-shift-tag{ display:inline-flex; margin-bottom:26px; padding:6px 16px; border-radius:var(--radius-full); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-light); } .platform-shift-old, .platform-shift-new{ display:flex; align-items:flex-start; gap:14px; } .platform-shift-old{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); } .platform-shift-icon{ flex-shrink:0; margin-top:2px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .platform-shift-icon svg{ width:14px; height:14px; } .platform-shift-icon--old{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); } .platform-shift-icon--new{ background:var(--primary); color:var(--secondary); } .platform-shift-old p{ margin:0; font-size:17px; font-style:italic; color:rgba(255,255,255,.45); text-decoration:line-through; text-decoration-thickness:1.5px; line-height:1.4; } .platform-shift-new p{ margin:0; font-family:var(--font-head); font-size:clamp(18px, 1.8vw, 21px); font-weight:800; font-style:italic; color:#fff; line-height:1.35; } @media (max-width:900px){ .platform-columns{ grid-template-columns:1fr; gap:40px; } .platform-sticky{ position:static; } } @media (max-width:640px){ .platform-shift{ padding:32px 26px; } } /* ---------- How We're Different — comparison cards, Intellectyx highlighted ---------- */ .different-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:56px; align-items:stretch; } .different-card{ padding:30px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); display:flex; flex-direction:column; gap:12px; } .different-card h3{ font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--secondary); margin:0; text-align: left; line-height: 22px; } .different-card p{ margin:0; font-size:14px; line-height:1.65; color:var(--muted); } .different-card--highlight{ background:linear-gradient(135deg, var(--secondary) 0%, var(--secondary-700) 100%); border-color:transparent; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; } .different-card--highlight::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 80% at 90% 10%, rgba(144,195,34,.2), transparent 60%); } .different-card--highlight > *{ position:relative; z-index:1; } .different-card--highlight h3{ color:#fff; } .different-card--highlight p{ color:rgba(255,255,255,.78); } .different-card-badge{ align-self:flex-start; padding:3px 12px; border-radius:var(--radius-full); background:var(--primary); color:var(--secondary); font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } @media (max-width:1100px){ .different-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .different-grid{ grid-template-columns:1fr; } } /* ========================================================================== Responsible AI & Security page. Reuses the shared .page-banner / .container / .breadcrumb / .btn / .sub / .eyebrow / .h2 / .accent / .faq-list / .cta-section utility classes already defined in style.css, so this page's container width, banner treatment, FAQ accordion and final CTA all match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under rai-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .rai-page{ background:var(--white); } /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ #rai-approach .container, #rai-principles .container, #rai-control-plane .container, #rai-ownership .container, #rai-compliance .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #rai-approach .container, #rai-principles .container, #rai-control-plane .container, #rai-ownership .container, #rai-compliance .container{ max-width:1480px; } } @media (min-width:2560px){ #rai-approach .container, #rai-principles .container, #rai-control-plane .container, #rai-ownership .container, #rai-compliance .container{ max-width:1600px; } } /* ---------- Banner ---------- */ .rai-banner .page-banner-inner{ max-width:760px; margin:0 auto; text-align:center; } .rai-banner .hero-cta{ align-items:center; } .rai-secondary-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--secondary); padding:14px 8px; transition:color .25s ease, gap .25s ease; } .rai-secondary-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .rai-secondary-link:hover{ color:var(--primary-dark); gap:12px; } /* ---------- Our Approach ---------- */ #rai-approach{ padding:100px 0; } .rai-approach-columns{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:56px; } .rai-approach-card{ padding:36px 34px; border-radius:var(--radius-lg); background:var(--bg-soft); border:1px solid var(--border); border-top:4px solid var(--primary); } .rai-approach-card h3{ font-family:var(--font-head); font-size:21px; font-weight:800; color:var(--secondary); text-align: left; } .rai-approach-card p{ margin-top:12px; font-size:15px; line-height:1.7; color:var(--muted); } .rai-approach-statement{ display:flex; gap:18px; margin-top:40px; padding:26px 30px; background:var(--bg-soft); border-left:4px solid var(--primary); border-radius:0 var(--radius-md) var(--radius-md) 0; } .rai-approach-statement-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; margin-top:2px; background:var(--white); border:1px solid var(--border); color:var(--primary-dark); } .rai-approach-statement-icon svg{ width:19px; height:19px; } .rai-approach-statement p{ margin:0; font-size:16.5px; line-height:1.65; color:var(--secondary); font-weight:600; } @media (max-width:860px){ .rai-approach-columns{ grid-template-columns:1fr; } } /* ---------- Numbered card lists — shared flexbox pattern used by Principles / Control Plane / Ownership. Flex + wrap + justify-center (rather than CSS grid) so any remainder on the last row self-centers without needing per-section nth-child offset math. ---------- */ .rai-card-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:56px; } .rai-card{ flex:1 1 300px; max-width:360px; padding:32px 30px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .rai-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .rai-card-num{ font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--primary-dark); } .rai-card h3{ margin-top:14px; font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align: left; line-height: 28px; } .rai-card p{ margin-top:10px; font-size:14.5px; line-height:1.65; color:var(--muted); } /* ---------- Responsible AI Principles ---------- */ #rai-principles{ padding:100px 0; background:var(--bg-soft); } /* ---------- AI Control Plane — dark section, same "serious/technical" treatment as the homepage's dark results panel. ---------- */ #rai-control-plane{ padding:100px 0; position:relative; overflow:hidden; background:var(--secondary); } #rai-control-plane::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(60% 70% at 85% 0%, rgba(144,195,34,.16), transparent 60%); } #rai-control-plane .container{ position:relative; z-index:1; } #rai-control-plane .rai-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); } #rai-control-plane .rai-card-num{ color:var(--primary-light); } #rai-control-plane .rai-card h3{ color:#fff; text-align: left; } #rai-control-plane .rai-card p{ color:rgba(255,255,255,.65); } /* ---------- Data & Customer Ownership ---------- */ #rai-ownership{ padding:100px 0; } .rai-card--ownership h3{ display:flex; align-items:center; gap:10px; text-align: left; line-height: 28px; } .rai-card--ownership h3::before{ content:''; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3l3 3 6-7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); background-repeat:no-repeat, no-repeat; background-position:center, center; background-size:9px 9px, 22px 22px; } .rai-card--ownership p a{ color:var(--primary-dark); font-weight:700; text-decoration:underline; text-underline-offset:2px; } .rai-card--ownership p a:hover{ color:var(--primary); } /* ---------- Compliance — two-column layout (text left, certification badges right), same .85fr/1.15fr split already used by .why-columns. Badges reuse the .recognition-badge card look (shared with the manufacturing page's logo wall); flex-wrap with a 33% basis puts 3 per row, so the trailing 2-badge row wraps and centers on its own. ---------- */ #rai-compliance{ padding:100px 0; background:var(--bg-soft); } .rai-compliance-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; } .rai-compliance-inner{ text-align:left; } .rai-compliance-inner h2{ text-align:left; } .rai-compliance-inner > p{ margin-top:20px; font-size:16px; line-height:1.75; color:var(--muted); text-align:left; } .rai-compliance-badges{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px; } .rai-compliance-badges .recognition-badge{ display:flex; align-items:center; justify-content:center; width:170px; height:104px; padding:16px 6px; flex:none; } .rai-compliance-badges .recognition-badge img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; } @media (max-width:900px){ .rai-compliance-grid{ grid-template-columns:1fr; gap:40px; } } @media (max-width:640px){ #rai-approach, #rai-principles, #rai-control-plane, #rai-ownership, #rai-compliance{ padding:64px 0; } .rai-approach-statement{ flex-direction:column; } .rai-compliance-badges{ gap:16px; } .rai-compliance-badges .recognition-badge{ width:140px; height:84px; padding:12px 5px; } } /* ---------- FAQ → final CTA seam ---------- The FAQ section (.section, 100px top/bottom + .contact-faq-section-alt) and the final CTA (the shared .cta-section, 96px top/bottom) stack back-to-back as ~200px of combined padding with nothing in it, reading as a big empty gap. Trimmed on the FAQ side and rebalanced to an equal, more generous top/bottom on the CTA side. Scoped by this page's own ids (#rai-faq, #rai-cta) rather than a body class — pages are pasted section-by-section as raw HTML in WordPress with no page wrapper to key off, and .cta-section itself is a shared, sitewide class also used as-is on the homepage and About, so a bare class selector here would repaint their padding too. */ #rai-faq{ padding-bottom:100px; } #rai-cta.cta-section{ padding:96px 0; } /* ========================================================================== Manufacturing industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css. Only page-specific overrides are added here, scoped under #hero / #usecases so they can never leak onto other pages that also use .page-banner or .usecase-card (the homepage and other industry pages). Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer title and two-paragraph intro read better in a wider column. ---------- */ #hero .page-banner-copy{ max-width:980px; } /* ---------- Use case cards — a short "Agent Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the AI Strategy & Roadmap page's pillar list. ---------- */ #usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a 4-item "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. ---------- */ #manufacturing-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #manufacturing-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #manufacturing-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #manufacturing-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #manufacturing-services .industry-tile-arrow{ margin-top:4px; } /* ---------- Mobile CTA buttons — the shared .btn class is white-space:nowrap by design (it needs that to keep icon + label on one line at desktop widths), but every CTA bar on this page switches to a narrow single column below ~700px without ever stretching the button itself, so a longer label (e.g. "Share Your Manufacturing Use Case") keeps its full nowrap width and overflows past the card edge instead of wrapping. Forcing these specific buttons to full width + normal wrapping at phone widths keeps every CTA label inside its card at every breakpoint. ---------- */ @media (max-width:560px){ .industry-cta-bar .btn, .techstack-cta .btn, .recognition-cta .btn, .services-banner-cta .btn, .why-sticky-btn{ display:flex; width:100%; justify-content:center; text-align:center; white-space:normal; line-height:1.35; } } /* ---------- Tech stack columns — style.css already switches this shared 4-column logo wall to 2 columns at ≤900px; restated here, scoped to this page's own #tech-stack, so the mobile layout still holds even if that rule gets lost or reordered when merging every page's CSS into one shared stylesheet. ---------- */ @media (max-width:900px){ #tech-stack .techstack-columns{ grid-template-columns:repeat(2,1fr); height:460px; margin-top:36px; } #tech-stack .techstack-column:nth-child(3), #tech-stack .techstack-column:nth-child(4){ display:none; } } @media (max-width:480px){ #tech-stack .techstack-columns{ height:380px; } #tech-stack .techstack-tile{ min-height:120px; padding:14px 10px; } #tech-stack .techstack-tile img{ max-height:44px; } } /* ========================================================================== Contact Us page. Reuses the shared .page-banner / .container / .breadcrumb / .btn / .sub / .eyebrow / .h2 / .accent / .contact-form-panel / .logos-section / .stories-section / .results-section utility classes already defined in style.css, so this page's container width, banner treatment, lead-gen form, trusted-logo marquee, case studies and stats all match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under contact-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .contact-page{ background:var(--white); } /* #contact-next-steps introduces a new section id not already registered in style.css's shared container-width selector list, so its own container width is set here (same values/breakpoints as that list). */ #contact-next-steps .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #contact-next-steps .container{ max-width:1480px; } } @media (min-width:2560px){ #contact-next-steps .container{ max-width:1600px; } } /* ---------- Banner — left content column / right form column ---------- .page-banner sets text-align:center sitewide for the shorter, single- column banners it's normally used with; this page needs a left-aligned content column instead, scoped to just that column so nothing else inherits it. Container width is left to the existing sitewide `.page-banner .container` rule (style.css) — no need to repeat it here. */ .contact-banner{ padding-bottom:80px; } .contact-banner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } .contact-banner h1.page-banner-title { text-align: left; font-size: 46px; } .contact-banner .contact-form-panel .zf-group label { text-align: left; } .contact-banner-content{ text-align:left; } .contact-banner-content .breadcrumb{ justify-content:flex-start; } .contact-banner-desc{ margin-top:18px; font-size:16.5px; line-height:1.75; color:var(--muted); max-width:520px; } .contact-detail-list{ display:flex; flex-direction:column; gap:18px; margin-top:36px; } .contact-detail-item{ display:flex; align-items:center; gap:16px; } .contact-detail-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); box-shadow:0 10px 22px -6px var(--primary-glow); } .contact-detail-icon svg{ width:21px; height:21px; } .contact-detail-body{ display:flex; flex-direction:column; gap:2px; } .contact-detail-label{ font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-dark); } .contact-detail-body a{ font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--secondary); text-decoration:none; } .contact-detail-body a:hover{ color:var(--primary-dark); } .contact-address-list{ display:flex; flex-direction:column; gap:20px; margin-top:32px; padding-top:32px; border-top:1px solid var(--border); } .contact-address-item{ display:flex; align-items:flex-start; gap:14px; } .contact-address-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; margin-top:2px; background:var(--bg-soft); border:1px solid var(--border); color:var(--primary-dark); } .contact-address-icon svg{ width:18px; height:18px; } .contact-address-body strong{ font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); } .contact-address-body p{ margin-top:4px; font-size:14.5px; line-height:1.6; color:var(--muted); } .contact-social{ display:flex; align-items:center; gap:12px; margin-top:32px; } .contact-social a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--border); color:var(--secondary); transition:background .25s ease, color .25s ease, transform .25s ease; } .contact-social a svg{ width:17px; height:17px; } .contact-social a:hover{ background:var(--primary); color:var(--white); transform:translateY(-3px); } .contact-banner-form .contact-form-panel{ height:100%; box-sizing:border-box; } /* style.css sets .contact-form-panel h3 to text-align:left for the homepage's two-column FAQ layout, where the panel sits flush against a left-aligned intro paragraph. This page's form panel already inherits text-align:center from the sitewide .page-banner rule (its intro paragraph relies on that), so the title needs to be pulled back to center too, scoped to just this page's form. */ .contact-banner-form .contact-form-panel h3{ text-align:center; } /* ---------- Trusted-logo strip — merged into the banner itself (spans the full width below the two-column grid) rather than living as its own separately-backgrounded .logos-section further down the page. ---------- */ .contact-banner-logos{ margin-top:72px; padding-top:48px; border-top:1px solid var(--border); } .contact-banner-logos .trust-label{ margin-bottom:36px; } @media (max-width:960px){ .contact-banner-grid{ grid-template-columns:1fr; gap:48px; } .contact-banner-content .page-banner-title, .contact-banner-content .breadcrumb{ text-align:left; justify-content:flex-start; } .contact-banner-logos{ margin-top:56px; padding-top:40px; } } @media (max-width:640px){ .contact-banner{ padding-bottom:56px; } .contact-detail-list, .contact-address-list{ gap:16px; } .contact-banner-logos{ margin-top:48px; padding-top:32px; } .contact-banner h1.page-banner-title{ font-size:34px; } } /* ========================================================================== What Happens Next — a connected 4-step timeline explaining what happens after the contact form is submitted. Desktop: four columns with a horizontal connector line running through the numbered badges. Mobile: collapses to a vertical timeline (line running down the left edge) instead of a cramped 4-column squeeze. Scoped under #contact-next-steps since it introduces its own ids/classes not used elsewhere on the site. ========================================================================== */ /* Shared .section applies 100px top+bottom padding; the bottom half of that, stacked against the next section's own 100px top padding, left a ~200px dead gap before "Real Outcomes, Delivered at Scale" — tightened here since this section's own content is short. */ #contact-next-steps{ background:var(--bg-soft); padding-bottom:0; } #contact-next-steps .next-steps-row{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; margin-top:64px; } /* Connector line drawn behind the badges, spanning from the center of the first badge to the center of the last. With 4 equal columns and 3x 32px gaps between them, each column is (100% - 96px)/4 wide, so its center sits (100% - 96px)/8 in from that edge — NOT a flat 12.5%, which ignores the gaps and would leave the line's ends a few pixels off from the badges' true centers. */ #contact-next-steps .next-steps-row::before{ content:''; position:absolute; top:28px; left:calc((100% - 96px) / 8); right:calc((100% - 96px) / 8); height:2px; background:linear-gradient(90deg, var(--border) 0%, var(--primary) 50%, var(--border) 100%); z-index:0; } #contact-next-steps .next-step{ position:relative; z-index:1; text-align:center; padding:0 8px; } #contact-next-steps .next-step-num{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 24px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); font-family:var(--font-head); font-weight:800; font-size:19px; box-shadow:0 14px 28px -10px var(--primary-glow); } #contact-next-steps .next-step-title{ font-family:var(--font-head); font-size:18.5px; font-weight:800; color:var(--secondary); margin:0 0 10px; } #contact-next-steps .next-step-desc{ font-size:14.5px; line-height:1.65; color:var(--muted); max-width:250px; margin:0 auto; } @media (max-width:900px){ #contact-next-steps .next-steps-row{ grid-template-columns:1fr; gap:0; margin-top:48px; max-width:460px; margin-left:auto; margin-right:auto; } #contact-next-steps .next-steps-row::before{ display:none; } #contact-next-steps .next-step{ display:flex; align-items:flex-start; gap:20px; text-align:left; padding:0 0 40px; position:relative; } #contact-next-steps .next-step:not(:last-child)::after{ content:''; position:absolute; left:27px; top:56px; bottom:0; width:2px; background:var(--border); } #contact-next-steps .next-step-num{ margin:0; flex-shrink:0; } #contact-next-steps .next-step-desc{ max-width:none; } } /* ========================================================================== Careers page. Reuses the shared .page-banner / .container / .breadcrumb / .btn / .sub / .eyebrow / .h2 / .accent / .contact-form-panel utility classes already defined in style.css, so this page's container width, banner treatment and lead-gen form all match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under careers-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .careers-page{ background:var(--white); } /* Scoped container rule (not a bare .container) — same convention style.css uses elsewhere — so this never affects other pages/templates. */ #careers-why .container, #careers-perks .container, #careers-locations .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #careers-why .container, #careers-perks .container, #careers-locations .container{ max-width:1480px; } } @media (min-width:2560px){ #careers-why .container, #careers-perks .container, #careers-locations .container{ max-width:1600px; } } /* ---------- Banner ---------- */ .careers-banner .page-banner-inner{ max-width:1150px; margin:0 auto; text-align:center; } /* The global .page-banner-title clamp (up to 52px) was sized for shorter headlines — at that size this page's title wraps to 2 lines even inside the widened 1000px inner column above. Scaled down and locked to one line on wider screens; mobile falls back to normal wrapping so the text can never overflow a narrow viewport. */ /* Sized bigger than the page's own .h2 headings (capped at 42px) so H1 clearly reads as the largest, most prominent heading on the page — the previous, smaller clamp had shrunk it to the point that section H2s like "Why Join Intellectyx." looked equal to or larger than it. */ .careers-banner .page-banner-title{ font-size:clamp(32px, 4vw, 50px); white-space:nowrap; } @media (max-width:900px){ .careers-banner .page-banner-title{ white-space:normal; } } .careers-motto{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; font-family:var(--font-head); font-weight:800; font-size:14px; letter-spacing:.03em; color:var(--primary-dark); } .careers-motto .dot{ width:4px; height:4px; border-radius:50%; background:var(--primary); } .careers-banner p{ margin-top:16px; font-size:16.5px; line-height:1.75; color:var(--muted); } .careers-banner p + p{ margin-top:16px; } /* ---------- Why Join Intellectyx — dark gradient statement panel (same "serious/premium" treatment as the dark sections elsewhere on the site) instead of a plain white card with a left accent border, so this reads as a distinct visual moment rather than another text block. ---------- */ #careers-why{ padding:100px 0; background:var(--bg-soft); } .careers-why-inner{ position:relative; overflow:hidden; margin-top:56px; padding:56px 64px; background:linear-gradient(135deg, var(--secondary-500) 0%, var(--secondary) 100%); border-radius:var(--radius-lg); } .careers-why-inner::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(60% 80% at 90% 0%, rgba(144,195,34,.22), transparent 60%); } .careers-why-quote{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:24px; border-radius:15px; background:rgba(144,195,34,.16); color:var(--primary-light); } .careers-why-quote svg{ width:26px; height:20px; } .careers-why-inner > *{ position:relative; z-index:1; } .careers-why-lead{ font-family:var(--font-head); font-size:26px; font-weight:800; line-height:1.4; color:#fff; } .careers-why-inner p:not(.careers-why-lead){ margin-top:18px; font-size:16px; line-height:1.8; color:rgba(255,255,255,.68); } .careers-why-tags{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; } .careers-why-tag{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:var(--radius-full); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); font-family:var(--font-head); font-size:14px; font-weight:700; color:#fff; transition:background .25s ease, border-color .25s ease, transform .25s ease; } .careers-why-tag svg{ flex-shrink:0; width:14px; height:14px; padding:3px; box-sizing:content-box; border-radius:50%; background:var(--primary); color:var(--white); } .careers-why-tag:hover{ background:rgba(144,195,34,.16); border-color:rgba(144,195,34,.4); transform:translateY(-2px); } /* ---------- Perks grid — flexbox + wrap + justify-center so any leftover row (here: 6 items, so none) self-centers without per-item offset math. ---------- */ #careers-perks{ padding:100px 0; } .careers-perks-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:56px; } .careers-perk-card{ flex:1 1 300px; max-width:360px; padding:32px 30px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .careers-perk-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .careers-perk-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); box-shadow:0 10px 22px -6px var(--primary-glow); } .careers-perk-icon svg{ width:22px; height:22px; } .careers-perk-card h3{ margin-top:18px; font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align: left; } .careers-perk-card p{ margin-top:10px; font-size:14.5px; line-height:1.65; color:var(--muted); } .careers-perks-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:56px; padding:32px 40px; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--secondary-500) 0%, var(--secondary) 100%); color:#fff; } .careers-perks-cta p{ margin:0; font-family:var(--font-head); font-size:19px; font-weight:800; line-height:1.5; max-width:520px; } .careers-perks-cta .btn{ flex-shrink:0; } /* ---------- Locations + form — LA and Denver sit as sticky sidebar cards flanking the form: left = LA (HQ), middle = the "get in touch" form, right = Denver. Both cards stay pinned in view while the (taller) form scrolls past between them, so the address/contact info stays visible the whole time someone is filling the form in. align-items:start (not the grid default stretch) is required for position:sticky to actually engage — a stretched item's height already matches the tallest column, leaving nothing to stick within. ---------- */ #careers-locations{ padding:100px 0; background:var(--bg-soft); } .careers-locations-columns{ display:grid; grid-template-columns:280px 1fr 280px; gap:32px; align-items:start; margin-top:56px; } @media (max-width:1024px){ .careers-locations-columns{ grid-template-columns:1fr; gap:40px; } .careers-location-card{ position:static; } } /* ---------- Location cards — a colored header rail (pin, HQ tag where it applies, kicker + city name) over a plain minimal detail list. ---------- */ .careers-location-card{ position:sticky; top:120px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--white); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .careers-location-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .careers-location-side{ position:relative; overflow:hidden; padding:20px 22px; display:flex; align-items:flex-start; gap:16px; background:linear-gradient(165deg, var(--primary) 0%, var(--primary-dark) 100%); } .careers-location-side--denver{ background:linear-gradient(165deg, var(--secondary-500) 0%, var(--secondary) 100%); } .careers-location-side-pattern{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; pointer-events:none; } .careers-location-side-pin{ position:relative; z-index:1; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; } .careers-location-side-pin svg{ width:18px; height:18px; } .careers-location-tag{ display:inline-flex; vertical-align:middle; margin-left:8px; padding:3px 10px; border-radius:var(--radius-full); background:rgba(255,255,255,.95); color:var(--primary-dark); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .careers-location-side-foot{ position:relative; z-index:1; text-align:left; min-width:0; } .careers-location-kicker{ display:block; font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72); } .careers-location-side-foot h3{ margin-top:6px; font-family:var(--font-head); font-size:20px; font-weight:800; color:#fff; line-height:1.25; text-align: left; margin-top: 0; } .careers-location-content{ padding:20px 24px; border-top:1px solid var(--border); } .careers-location-detail{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:14px; line-height:1.5; color:var(--muted); } .careers-location-detail + .careers-location-detail{ border-top:1px solid var(--border); } .careers-location-detail-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:18px; height:18px; color:var(--primary-dark); } .careers-location-detail-icon svg{ width:16px; height:16px; } .careers-location-detail a{ color:var(--muted); text-decoration:none; } .careers-location-detail a:hover{ color:var(--primary-dark); } /* ---------- Final form — the homepage's own .contact-form-panel, reused verbatim, sitting in the middle column between the two location cards. ---------- */ .careers-form-inner .contact-form-panel{ box-sizing:border-box; } @media (max-width:640px){ #careers-why, #careers-perks, #careers-locations{ padding:64px 0; } .careers-why-inner{ padding:28px 26px; } .careers-perks-cta{ flex-direction:column; align-items:flex-start; text-align:left; } } /* ========================================================================== AI Development Services page. Reuses the shared .page-banner / .pillars-grid / .pillar-card / .industries-grid / .why-section / .results-section / .stories-section / .accelerator-section / .engagement-section / .awards-section / .contact-faq-section-alt classes already defined in style.css, so this page's container width, banner treatment, services grid, stats, case studies, tech stack, process, awards and FAQ all match the rest of the site exactly. This is a services page (matching AI Strategy & Roadmap section-for-section), not an industry page (like Manufacturing): "What We Do" is a static .pillars-grid of .pillar-card (not a scrollable .service-carousel of .industry-tile), and Recognitions uses the dark, auto-scrolling .awards-section/.awards-marquee (not Manufacturing's own light, static .recognition-section wall — style.css says that one is "manufacturing page only" and every other page keeps .awards-section untouched). Nothing in style.css is edited — only page-specific bits are added here. Section ids are prefixed (#aidev-hero, #aidev-services, #aidev-why, #aidev-industries, #aidev-faq) rather than reusing generic ones like #hero or #faq — those are shared across many pages (home, careers, about, manufacturing, why-intellectyx…) and every page's CSS ends up merged into one shared ix-style.css in WordPress with no page wrapper to scope against (each section is pasted individually as raw HTML), so a bare id here would collide with another page's same-named section. #results / #case-studies / #tech-stack / #process / #awards / #get-started are safe to reuse as-is: their width and layout come from the shared component classes above (registered by class in style.css), not from anything keyed to the id itself. Load this AFTER style.css. ========================================================================== */ .ai-development-page{ background:var(--white); } /* ---------- Banner — wider text column for the two-paragraph intro, same treatment used on the Manufacturing industry page. ---------- */ #aidev-hero .page-banner-copy{ max-width:980px; } /* ---------- Industries grid — .industries-grid carries no margin-top of its own in the shared stylesheet (unlike sibling grids such as .usecase-grid, which use 56px), so it sits flush against the .split-intro paragraph above it with no breathing room. ---------- */ #aidev-industries .industries-grid{ margin-top:56px; } /* ---------- Scoped container-width rules (not bare .container) — same convention used sitewide — for the two section ids this page introduces that aren't already registered by class elsewhere in style.css. ---------- */ #aidev-services .container, #aidev-industries .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #aidev-services .container, #aidev-industries .container{ max-width:1480px; } } @media (min-width:2560px){ #aidev-services .container, #aidev-industries .container{ max-width:1600px; } } /* ---------- Services grid — 4 cards read cleanly as their own single row at desktop widths (4 equal columns) rather than reusing the AI Strategy page's #ai-services 5-card 6-column split (its nth-child(4)/(5) center- ing math is built for exactly 5 cards and would misalign a 4th card with nothing to pair it with). ---------- */ @media (min-width:1101px){ #aidev-services .pillars-grid{ grid-template-columns:repeat(4, 1fr); } } /* Left-aligned checklist (one tag per row, a small checkmark badge instead of a pill background) instead of the default wrapping pill row — same "what's included" list treatment already established on the AI Strategy & Roadmap page's own pillar tags, replicated here since that rule is scoped to #ai-services specifically. */ #aidev-services .pillar-tags{ flex-direction:column; gap:12px; } #aidev-services .pillar-tag{ display:flex; align-items:center; gap:10px; width:auto; box-sizing:border-box; text-align:left; padding:0; border:none; background:none; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); } #aidev-services .pillar-tag::before{ content:''; flex-shrink:0; width:20px; height:20px; border-radius:50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3l3 3 6-7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); background-repeat:no-repeat, no-repeat; background-position:center, center; background-size:9px 9px, 20px 20px; } .industries-usecase { padding-top: 40px; } /* ---------- Mobile CTA buttons — same overflow fix used on the Manufacturing page: the shared .btn class is white-space:nowrap, but these CTA bars collapse to a narrow single column below ~700px without ever stretching the button itself, so a long label keeps its full nowrap width and overflows past the card edge instead of wrapping. ---------- */ @media (max-width:560px){ .industry-cta-bar .btn, .techstack-cta .btn, .services-banner-cta .btn, .why-sticky-btn{ display:flex; width:100%; justify-content:center; text-align:center; white-space:normal; line-height:1.35; } } /* ---------- Tech stack columns — style.css switches this shared 4-column logo wall to 2 columns at ≤900px, but leaves 4 .techstack-column elements in the DOM; without also hiding 2 of them, the 2-column grid just wraps them into 2 rows instead of 2 full-height columns, squeezing each vertical scroll track into half the height. Hiding the last 2 columns keeps the remaining 2 in a single row at full height. ---------- */ @media (max-width:900px){ #tech-stack .techstack-columns{ grid-template-columns:repeat(2,1fr); height:460px; margin-top:36px; } #tech-stack .techstack-column:nth-child(3), #tech-stack .techstack-column:nth-child(4){ display:none; } } @media (max-width:480px){ #tech-stack .techstack-columns{ height:380px; } #tech-stack .techstack-tile{ min-height:120px; padding:14px 10px; } #tech-stack .techstack-tile img{ max-height:44px; } } /* ========================================================================== AI Managed Services page. Reuses the shared .page-banner / .pillars-grid / .pillar-card / .industries-grid / .why-section / .results-section / .stories-section / .accelerator-section / .engagement-section / .awards-section / .contact-faq-section-alt classes already defined in style.css, so this page matches the AI Strategy & Roadmap services page section-for-section (static .pillars-grid of .pillar-card for "What We Do", dark auto-scrolling .awards-section/.awards-marquee for Recognitions — not Manufacturing's industry-page carousel/recognition-wall pattern). Nothing in style.css is edited — only page-specific bits are added here. Section ids are prefixed (#ams-hero, #ams-services, #ams-why, #ams-industries, #ams-faq) rather than reusing generic ones like #hero or #faq — those are shared across many pages and every page's CSS ends up merged into one shared ix-style.css in WordPress with no page wrapper to scope against (each section is pasted individually as raw HTML), so a bare id here would collide with another page's same-named section. #results / #case-studies / #tech-stack / #process / #awards / #get-started are safe to reuse as-is: their width and layout come from the shared component classes above (registered by class in style.css), not from anything keyed to the id itself. Load this AFTER style.css. ========================================================================== */ .ai-managed-services-page{ background:var(--white); } /* ---------- Scoped container-width rules (not bare .container) — same convention used sitewide — for the three section ids this page introduces that aren't already registered by class elsewhere in style.css. ---------- */ #ams-services .container, #ams-industries .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } #ams-hero .page-banner-copy { max-width: 1000px; } @media (min-width:1600px){ #ams-services .container, #ams-industries .container{ max-width:1480px; } } @media (min-width:2560px){ #ams-services .container, #ams-industries .container{ max-width:1600px; } } /* ---------- Services grid — 5 cards, same centering treatment already established on the AI Strategy & Roadmap page's own #ai-services (a 6-column grid with each card spanning 2, so cards 4 and 5 center themselves in the second row instead of card 4 sitting alone on the left). Replicated here since that rule is scoped to #ai-services specifically. ---------- */ @media (min-width:1101px){ #ams-services .pillars-grid{ grid-template-columns:repeat(6, 1fr); } #ams-services .pillars-grid .pillar-card{ grid-column:span 2; } #ams-services .pillars-grid .pillar-card:nth-child(4){ grid-column:2 / span 2; } #ams-services .pillars-grid .pillar-card:nth-child(5){ grid-column:4 / span 2; } } /* Left-aligned checklist (one tag per row, a small checkmark badge instead of a pill background) instead of the default wrapping pill row — same "what's included" list treatment already established on the AI Strategy & Roadmap page's own pillar tags, replicated here since that rule is scoped to #ai-services specifically. */ #ams-services .pillar-tags{ flex-direction:column; gap:12px; } #ams-services .pillar-tag{ display:flex; align-items:center; gap:10px; width:auto; box-sizing:border-box; text-align:left; padding:0; border:none; background:none; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); } #ams-services .pillar-tag::before{ content:''; flex-shrink:0; width:20px; height:20px; border-radius:50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3l3 3 6-7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); background-repeat:no-repeat, no-repeat; background-position:center, center; background-size:9px 9px, 20px 20px; } /* ---------- Industries grid — .industries-grid carries no margin-top of its own in the shared stylesheet (unlike sibling grids such as .usecase-grid, which use 56px), so it sits flush against the .split-intro paragraph above it with no breathing room. ---------- */ #ams-industries .industries-grid{ margin-top:56px; } /* ---------- Mobile CTA buttons — the shared .btn class is white-space: nowrap by design, but these CTA bars collapse to a narrow single column below ~700px without ever stretching the button itself, so a long label keeps its full nowrap width and overflows past the card edge instead of wrapping. ---------- */ @media (max-width:560px){ .industry-cta-bar .btn, .techstack-cta .btn, .services-banner-cta .btn, .why-sticky-btn{ display:flex; width:100%; justify-content:center; text-align:center; white-space:normal; line-height:1.35; } } /* ---------- Tech stack columns — style.css switches this shared 4-column logo wall to 2 columns at ≤900px, but leaves 4 .techstack-column elements in the DOM; without also hiding 2 of them, the 2-column grid just wraps them into 2 rows instead of 2 full-height columns, squeezing each vertical scroll track into half the height. Hiding the last 2 columns keeps the remaining 2 in a single row at full height. ---------- */ @media (max-width:900px){ #tech-stack .techstack-columns{ grid-template-columns:repeat(2,1fr); height:460px; margin-top:36px; } #tech-stack .techstack-column:nth-child(3), #tech-stack .techstack-column:nth-child(4){ display:none; } } @media (max-width:480px){ #tech-stack .techstack-columns{ height:380px; } #tech-stack .techstack-tile{ min-height:120px; padding:14px 10px; } #tech-stack .techstack-tile img{ max-height:44px; } } /* ========================================================================== Media and Entertainment industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css — same pattern as manufacturing.css. Only page-specific overrides are added here, scoped under #medent-* ids so they can never leak onto other pages that also use .page-banner or .usecase-card (the homepage and other industry pages). Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer intro reads better in a wider column. ---------- */ #medent-hero .page-banner-copy{ max-width:980px; } /* ---------- Use case cards — a short "AI Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the manufacturing page's own usecase cards. ---------- */ #medent-usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #medent-usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #medent-usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #medent-usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #medent-usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a 4-item "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. ---------- */ #medent-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #medent-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #medent-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #medent-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #medent-services .industry-tile-arrow{ margin-top:4px; } /* ========================================================================== Consumer Goods industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css — same pattern as manufacturing.css / media-entertainment.css. Container width for #cg-services / #cg-usecases is registered directly in style.css's shared container-width selector list (alongside #manufacturing-services, #usecases, #medent-services, #medent-usecases), not duplicated here — only genuine page-specific extras live in this file. Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer intro reads better in a wider column. ---------- */ #cg-hero .page-banner-copy{ max-width:980px; } /* ---------- Use case cards — a short "Agent Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the manufacturing page's own usecase cards. ---------- */ #cg-usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #cg-usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #cg-usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #cg-usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #cg-usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a 4-item "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. ---------- */ #cg-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #cg-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #cg-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #cg-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #cg-services .industry-tile-arrow{ margin-top:4px; } /* ========================================================================== Retail AI Consulting Services industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css — same pattern as manufacturing.css / media-entertainment.css / consumer-goods.css. Container width for #retail-services / #retail-usecases is registered directly in style.css's shared container-width selector list (alongside #manufacturing-services, #usecases, #medent-services, #medent-usecases, #cg-services, #cg-usecases), not duplicated here — only genuine page-specific extras live in this file. Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer intro reads better in a wider column. ---------- */ #retail-hero .page-banner-copy{ max-width:980px; } /* ---------- Use case cards — a short "AI Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the manufacturing page's own usecase cards. ---------- */ #retail-usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #retail-usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #retail-usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #retail-usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #retail-usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a 4-item "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. ---------- */ #retail-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #retail-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #retail-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #retail-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #retail-services .industry-tile-arrow{ margin-top:4px; } /* ========================================================================== Travel, Transportation & Logistics industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css — same pattern as manufacturing.css / media-entertainment.css / consumer-goods.css / retail-ai-consulting.css. Container width for #ttl-services / #ttl-usecases is registered directly in style.css's shared container-width selector list, not duplicated here — only genuine page-specific extras live in this file. Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer intro reads better in a wider column. ---------- */ #ttl-hero .page-banner-copy{ max-width:980px; } /* ---------- Use case cards — a short "Agent Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the manufacturing page's own usecase cards. ---------- */ #ttl-usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #ttl-usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #ttl-usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #ttl-usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #ttl-usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a 4-item "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. ---------- */ #ttl-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #ttl-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #ttl-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #ttl-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #ttl-services .industry-tile-arrow{ margin-top:4px; } /* ========================================================================== Energy and Utilities industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css — same pattern as manufacturing.css / media-entertainment.css / consumer-goods.css / retail-ai-consulting.css / travel-transportation- logistics.css. Container width for #eu-services / #eu-usecases is registered directly in style.css's shared container-width selector list, not duplicated here — only genuine page-specific extras live in this file. Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer intro reads better in a wider column. ---------- */ #eu-hero .page-banner-copy{ max-width:980px; } /* ---------- Use case cards — a short "AI Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the manufacturing page's own usecase cards. ---------- */ #eu-usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #eu-usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #eu-usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #eu-usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #eu-usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a 4-item "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. ---------- */ #eu-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #eu-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #eu-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #eu-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #eu-services .industry-tile-arrow{ margin-top:4px; } /* ========================================================================== Healthcare and Life Sciences industry page. Reuses the shared .page-banner / .service-carousel / .industry-tile / .usecase-card / .results-panel utility classes already defined in style.css — same pattern as manufacturing.css / media-entertainment.css / consumer-goods.css / retail-ai-consulting.css / travel-transportation- logistics.css / energy-utilities.css. Container width for #hls-services / #hls-usecases is registered directly in style.css's shared container-width selector list, not duplicated here — only genuine page-specific extras live in this file. Load this AFTER style.css. ========================================================================== */ /* ---------- Banner — the sitewide .page-banner-copy caps out at 760px, sized for shorter headlines; this page's longer intro reads better in a wider column. ---------- */ #hls-hero .page-banner-copy{ max-width:980px; } #hls-services .section-header { max-width: 900px; } /* ---------- Use case cards — a short "Capabilities" checklist replaces the single stat line, reusing the checkmark-chip pattern already validated on the manufacturing page's own usecase cards. ---------- */ #hls-usecases .usecase-card-caps{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:7px; } #hls-usecases .usecase-card-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #hls-usecases .usecase-card-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #hls-usecases .usecase-card-caps-icon svg{ width:8px; height:8px; } /* Extra breathing room between the checklist and the "Explore" link below it — the card's own flex gap read as too tight once the stat line became a 4-item list. */ #hls-usecases .usecase-card-link{ margin-top:10px; } /* ---------- Services carousel — each tile gets a "Service Areas" checklist between its description and its "Explore" link, reusing the same checkmark-chip pattern as the use-case cards above. This page's own brief lists 5 items per service (one more than other industry pages), so no extra column-count change needed — the checklist is a simple vertical stack regardless of item count. ---------- */ #hls-services .industry-tile-caps{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px dashed var(--border); } #hls-services .industry-tile-caps li{ display:flex; align-items:center; gap:8px; list-style:none; font-size:12.5px; line-height:1.5; color:var(--muted); } #hls-services .industry-tile-caps-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } #hls-services .industry-tile-caps-icon svg{ width:8px; height:8px; } #hls-services .industry-tile-arrow{ margin-top:4px; } /* ========================================================================== IX AI Foundry page. Reuses the shared .page-banner / .pillars-grid / .pillar-card / .flagship-* / .value-steps / .faq-list / .cta-section utility classes already defined in style.css, so this page's container width, card treatments, FAQ accordion and final CTA all match the rest of the site exactly. Nothing in style.css is edited — only page-specific bits are added here, scoped under foundry-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ .ai-foundry-page{ background:var(--white); } /* Section-header width overrides — the sitewide default (.section-header, max-width:680px in style.css) wrapped these particular headlines onto a second line; widened per section (same override pattern already used elsewhere, e.g. #results/#services .section-header) just enough for each headline to sit on one line at desktop widths, which also widens the paragraph below it proportionally. */ #foundry-whatitis .section-header{ max-width:900px; } #foundry-value .section-header{ max-width:900px; } #foundry-model .section-header{ max-width:920px; } #foundry-governance .section-header{ max-width:720px; } #foundry-deploy .section-header{ max-width:850px; } #foundry-stack .section-header{ max-width:860px; } /* Scoped container rule (not a bare .container) — same convention used by responsible-ai-security.css — for every section id this page introduces that isn't already registered by class elsewhere in style.css. The reused #ix-ai-foundry section needs nothing here: it keeps the .foundation-section class, which is already registered in style.css. */ #foundry-lifecycle .container, #foundry-whatitis .container, #foundry-inside .container, #foundry-value .container, #foundry-model .container, #foundry-integration .container, #foundry-governance .container, #foundry-deploy .container, #foundry-coexist .container, #foundry-stack .container, #foundry-framework .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #foundry-lifecycle .container, #foundry-whatitis .container, #foundry-inside .container, #foundry-value .container, #foundry-model .container, #foundry-integration .container, #foundry-governance .container, #foundry-deploy .container, #foundry-coexist .container, #foundry-stack .container, #foundry-framework .container{ max-width:1480px; } } @media (min-width:2560px){ #foundry-lifecycle .container, #foundry-whatitis .container, #foundry-inside .container, #foundry-value .container, #foundry-model .container, #foundry-integration .container, #foundry-governance .container, #foundry-deploy .container, #foundry-coexist .container, #foundry-stack .container, #foundry-framework .container{ max-width:1600px; } } /* ---------- Banner — 2-column: copy on the left, a standing "Foundry Lifecycle" panel on the right, so the hero itself demonstrates the Build→Connect→Deploy→Govern→Measure story instead of a plain centered headline. Replaces the old single centered column + a separate horizontal lifecycle strip further down the page (removed — its content now lives here instead of repeating right after the hero). ---------- */ .foundry-banner .page-banner-inner{ max-width:none; margin:0; text-align:left; } .foundry-hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch; gap:64px; } .foundry-hero-copy{ max-width:600px; } /* text-align is inherited here from .page-banner-inner above rather than set directly on the eyebrow/title/paragraph, which is fine on this static page but breaks once this markup is pasted into WordPress: the theme's own heading styles set h1/.h2 (and often .eyebrow/.sub) to text-align:center directly, and an explicit rule always wins over an inherited value regardless of specificity. Setting text-align:left directly on each element — with !important so it also beats a theme rule that loads after this stylesheet — keeps the hero left-aligned in both places. */ .foundry-hero-copy .eyebrow, .foundry-hero-copy .page-banner-title, .foundry-hero-copy .sub{ text-align:left !important; } #hero.foundry-banner .breadcrumb{ justify-content:flex-start; margin-left:0; } .foundry-banner .hero-cta{ justify-content:flex-start; } .foundry-secondary-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--secondary); padding:14px 8px; transition:color .25s ease, gap .25s ease; } .foundry-secondary-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .foundry-secondary-link:hover{ color:var(--primary-dark); gap:12px; } /* Standing lifecycle panel — an elevated card so it reads as a distinct "product visual" companion to the copy, not more body text. A vertical rail (numbered circles + connecting line, same visual language as the pillar/value-step numbering used elsewhere on this page) walks the same 5 stages the old horizontal strip did. */ .foundry-hero-lifecycle{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; padding:36px 32px; border-radius:var(--radius-lg); background:linear-gradient(165deg, var(--white) 0%, var(--bg-soft) 100%); border:1px solid rgba(144,195,34,.22); box-shadow:0 32px 64px -32px rgba(0,39,54,.22), 0 8px 24px -12px rgba(0,39,54,.08); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .foundry-hero-lifecycle:hover{ transform:translateY(-4px); box-shadow:0 40px 76px -30px rgba(0,39,54,.3), 0 10px 28px -12px rgba(0,39,54,.12); } /* Two corner glows (brand green opposite a faint navy, same pairing used by .flagship-card/.flagship-section elsewhere) plus a top accent bar — the "premium card" treatment already established sitewide, so the panel reads as a branded product visual instead of a plain white box. Turned up from the original .14/.06 opacities, which read as barely-there against a flat white background — a visible wash of color at rest, not just on hover, is the point here. */ .foundry-hero-lifecycle::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(55% 60% at 100% 0%, rgba(144,195,34,.22), transparent 65%), radial-gradient(46% 52% at 0% 100%, rgba(0,39,54,.1), transparent 65%); } .foundry-hero-lifecycle::after{ content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); } .foundry-hero-lifecycle > *{ position:relative; z-index:1; } .foundry-hero-lifecycle-label{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-light); } .foundry-hero-lifecycle-rail{ position:relative; margin-top:22px; display:flex; flex-direction:column; gap:22px; } .foundry-hero-lifecycle-rail::before{ content:''; position:absolute; top:4px; bottom:4px; left:13px; width:1px; background:linear-gradient(180deg, transparent, rgba(144,195,34,.4) 10%, rgba(144,195,34,.4) 90%, transparent); z-index:0; } .foundry-hero-lifecycle-step{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:16px; } .foundry-hero-lifecycle-num{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--wash-tint); border:1.5px solid rgba(144,195,34,.4); font-family:var(--font-head); font-size:11px; font-weight:800; color:var(--primary-dark); } .foundry-hero-lifecycle-step--result .foundry-hero-lifecycle-num{ background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); border-color:var(--primary); color:var(--white); box-shadow:0 6px 14px -4px var(--primary-glow); } /* Highlight the final ("you are here") step with a soft tinted band, so the rail reads as a real progression landing somewhere rather than a flat list of five equal rows. margin/padding are equal-and-opposite on each side so the badge/text don't shift position — only the background bleeds outward past the row's own content. */ .foundry-hero-lifecycle-step--result{ margin:-10px -14px; padding:10px 14px; border-radius:12px; background:var(--wash-tint); } /* text-align:left set directly on this and the other card/panel titles below (not just relied on from layout) for the same reason as .foundry-hero-copy/.foundry-integration-copy above: none of these titles sit inside a centered ancestor, they're just never centered on this static page — but an explicit rule always wins over an inherited or default value, so a WordPress theme's blanket centered h3/h4 would otherwise re-center every one of these once pasted into a Raw HTML block. !important also beats a theme rule that loads after this stylesheet. */ .foundry-hero-lifecycle-copy h3{ font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--secondary); text-align:left !important; line-height: 18px; } .foundry-hero-lifecycle-copy p{ margin-top:4px; font-size:12.5px; line-height:1.55; color:var(--muted); } /* Four differentiators (moved here from a plain pill row under the left copy) as a compact 2x2 grid inside the same standing card, separated from the lifecycle rail by a hairline — one cohesive "product facts" panel instead of two separate cards competing for space on the right. */ .foundry-hero-pillars{ margin-top:28px; padding-top:24px; border-top:1px solid rgba(144,195,34,.22); display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; } .foundry-hero-pillar{ padding:14px 16px; border-radius:var(--radius-md); background:var(--white); transition:background-color .25s var(--ease), transform .25s var(--ease); } .foundry-hero-pillar:hover{ background:var(--wash-tint); transform:translateY(-2px); } .foundry-hero-pillar h4{ font-family:var(--font-head); font-size:13.5px; font-weight:800; color:var(--secondary); text-align:left !important; } .foundry-hero-pillar h4::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:8px; margin-bottom:1px; border-radius:50%; background:var(--primary); vertical-align:middle; } .foundry-hero-pillar p{ margin-top:4px; font-size:11.5px; line-height:1.5; color:var(--muted); } /* ---------- What It Is ---------- */ .foundry-whatitis-grid{ grid-template-columns:repeat(4, 1fr); } .foundry-compare{ margin-top:64px; } .foundry-compare-label{ display:block; text-align:center; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-light); margin-bottom:24px; } .foundry-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .foundry-compare-col{ padding:36px 32px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-soft); } .foundry-compare-col--is{ background:var(--white); border-color:rgba(144,195,34,.3); box-shadow:var(--shadow-sm); } .foundry-compare-col h3{ font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align:left !important; } .foundry-compare-col ul{ margin-top:20px; display:flex; flex-direction:column; gap:14px; } .foundry-compare-col li{ list-style:none; display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.6; color:var(--muted); } .foundry-compare-icon{ flex-shrink:0; margin-top:1px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .foundry-compare-icon svg{ width:11px; height:11px; } .foundry-compare-icon--not{ background:rgba(220,38,38,.1); color:#dc2626; } .foundry-compare-icon--is{ background:var(--wash-tint); color:var(--primary-dark); } .foundry-compare-col--is li{ color:var(--secondary); } /* ---------- Inside The Foundry ---------- */ /* Editorial 2-column layout per layer: a fixed-width copy column (numbered eyebrow, headline, supporting paragraphs) beside a grid of capability cards, each with its own bulleted list — replaces the earlier icon-badge/tag-chip treatment with something closer to a real product spec sheet. Hairline dividers between layers instead of separate outer cards; the capability cards themselves carry the "premium card" depth (shadow, hover lift, gradient top accent on hover). */ #foundry-inside{ position:relative; overflow:hidden; background:var(--bg-soft); } #foundry-inside::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(40% 40% at 100% 0%, rgba(144,195,34,.07), transparent 60%), radial-gradient(35% 35% at 0% 100%, rgba(0,39,54,.05), transparent 60%); } #foundry-inside .container{ position:relative; z-index:1; } .foundry-layers{ display:flex; flex-direction:column; } .foundry-layer{ padding:64px 0; } .foundry-layer:first-child{ padding-top:8px; } .foundry-layer:not(:first-child){ border-top:1px solid var(--border); } .foundry-layer-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:start; } /* text-align:left set directly on each of these (not just relied on from layout/inheritance) for the same reason as .foundry-hero-copy above: an explicit rule always wins over an inherited value, so a WordPress theme's default centered h1/h2/h3 would otherwise re-center these once this markup is pasted into a Raw HTML block. !important also beats a theme rule that happens to load after this stylesheet. */ .foundry-layer-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-head); font-size:13.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--secondary); text-align:left !important; } .foundry-layer-eyebrow-num{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:28px; height:28px; border-radius:50%; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); font-size:11.5px; font-weight:800; box-shadow:0 8px 18px -6px var(--primary-glow); } .foundry-layer-lead{ margin-top:20px; font-family:var(--font-head); font-size:clamp(24px, 2.4vw, 30px); font-weight:800; line-height:1.28; color:var(--secondary); text-align:left !important; } .foundry-layer-note{ margin-top:16px; font-size:15.5px; line-height:1.8; color:var(--muted); text-align:left !important; } /* Button-styled (not a plain arrow-link like the hero's "Explore the architecture") — same outline-button visual language as .btn-outline-dark elsewhere on the site, since this is the one CTA inside "Inside The Foundry" pointing further down the page and deserves more visual weight. */ .foundry-layer-copy .foundry-secondary-link{ margin-top:20px; padding:14px 26px; border-radius:var(--radius-full); border:1px solid var(--primary); gap:10px; transition:color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .foundry-layer-copy .foundry-secondary-link:hover{ gap:10px; background:var(--bg-soft); border-color:var(--primary-dark); box-shadow:0 14px 32px rgba(144,195,34,.35); transform:translateY(-2px); } .foundry-layer-capgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } .foundry-layer-capcard{ position:relative; overflow:hidden; padding:28px 26px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .foundry-layer-capcard::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .foundry-layer-capcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .foundry-layer-capcard:hover::before{ transform:scaleX(1); } .foundry-layer-capcard h4{ font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); text-align:left !important; } .foundry-layer-capcard--wide{ grid-column:1 / -1; } .foundry-layer-capcard--wide .foundry-layer-caplist{ columns:3; } .foundry-layer-caplist{ margin-top:16px; columns:2; column-gap:22px; } .foundry-layer-caplist li{ break-inside:avoid; list-style:none; position:relative; padding-left:16px; font-size:13.5px; line-height:1.6; color:var(--muted); margin-bottom:10px; } .foundry-layer-caplist li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } /* Enterprise Integration — same 2-column "copy left, capability cards right" layout as each layer in "Inside The Foundry", reusing .foundry-layer-capgrid/-capcard/-caplist (bordered card, gradient hover accent) instead of the old ragged flex-wrapped tag pills. Its own card-header style (small uppercase label, no bullet dots, single column) reads more like a categorized reference list than the bold titled "sub-service" cards used elsewhere, since these 4 groups are flatter data groupings rather than product layers. */ .foundry-integration-layout{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:start; } .foundry-integration-copy{ position:sticky; top:120px; } /* text-align:left forced here for the same reason as .foundry-hero-copy above — this column has no ancestor that sets text-align at all (it's just never centered), so it's just as exposed to a WordPress theme's default centered .eyebrow/.h2/.sub. */ .foundry-integration-copy .eyebrow, .foundry-integration-copy .h2, .foundry-integration-copy .sub{ text-align:left !important; } .foundry-integration-copy .sub:first-of-type{ margin-top:20px; } #foundry-integration .foundry-layer-capcard h4{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); } #foundry-integration .foundry-layer-caplist{ columns:1; margin-top:18px; } #foundry-integration .foundry-layer-caplist li{ padding-left:0; margin-bottom:12px; } #foundry-integration .foundry-layer-caplist li::before{ display:none; } /* Shared small tag-chip look for capability lists elsewhere on this page (Model Independence, the original "What Gets Measured" proof section) — same spirit as .pillar-tag but usable outside a .pillar-card (soft tinted fill, no border) since these sit directly on the section background. */ .foundry-model-tags .pillar-tag, .foundry-measured-tags .pillar-tag{ background:var(--bg-soft-2); border:1px solid transparent; color:var(--secondary); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--radius-full); transition:background .2s ease, color .2s ease; } .foundry-model-tags .pillar-tag:hover, .foundry-measured-tags .pillar-tag:hover{ background:var(--wash-tint); color:var(--primary-dark); } /* ---------- Proof / IX Value Engine ---------- */ .foundry-measured{ margin-top:56px; text-align:center; } .foundry-measured-label{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-light); } .foundry-measured-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px; } /* Solid green button (same .btn.btn-primary as the header's "Talk to an AI Expert") instead of a plain text link — this is the main CTA at the end of the section, not a secondary "learn more". */ .foundry-measured-cta{ margin-top:28px; } /* ---------- Model Independence ---------- */ /* A soft tint instead of plain white so this section reads as its own band between the white "Proof" section above and the dark model cards it contains — same alternating rhythm as #foundry-inside further up. */ #foundry-model{ background:var(--bg-soft); } .foundry-model-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; margin-bottom:48px; } /* ---------- Governance & Customer Control ---------- */ /* Same dark-band treatment as the reused homepage foundation section (.foundation-section) — a deliberate dark break in this page's mostly light/soft-tint alternating rhythm, since "your rules, your control" reads with more weight on a dark, serious background. Cards stay white for contrast/readability rather than trying to invert their internals. */ #foundry-governance{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--secondary) 0%, var(--secondary-700) 100%); } #foundry-governance::before{ content:''; position:absolute; inset:0; opacity:.7; pointer-events:none; background:radial-gradient(55% 80% at 10% 0%, rgba(144,195,34,.18), transparent 60%), radial-gradient(45% 70% at 95% 100%, rgba(144,195,34,.12), transparent 60%); } #foundry-governance .container{ position:relative; z-index:1; } #foundry-governance .accent{ color:var(--primary-light); } .foundry-gov-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; } .foundry-gov-card{ padding:28px 24px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .foundry-gov-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(144,195,34,.3); } .foundry-gov-icon{ width:42px; height:42px; border-radius:12px; background:var(--bg-soft-2); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .foundry-gov-icon svg{ width:20px; height:20px; } .foundry-gov-card h3{ margin-top:16px; font-family:var(--font-head); font-size:15.5px; font-weight:800; color:var(--secondary); text-align:left !important; } .foundry-gov-card p{ margin-top:8px; font-size:13.5px; line-height:1.65; color:var(--muted); } /* ---------- Flexible Deployment ---------- */ /* 4 cards, not the shared .pillars-grid's default 3 columns (which left the 4th card stranded alone on its own row). */ .foundry-deploy-grid{ grid-template-columns:repeat(4, 1fr); } .foundry-deploy-grid .pillar-card{ text-align:left; } /* ---------- Section divider ---------- */ /* A quiet ornamental break between two light sections that otherwise meet with no visual transition at all — two fading gradient lines (same technique as .trust-label in the logo carousel) flanking a small glowing dot, rather than a plain flat rule. */ .foundry-divider{ display:flex; align-items:center; justify-content:center; gap:20px; max-width:1360px; margin:0 auto; padding:0 15px; } .foundry-divider-line{ height:1px; flex:1 1 auto; max-width:220px; background:linear-gradient(90deg, transparent, var(--border)); } .foundry-divider-line:last-child{ background:linear-gradient(90deg, var(--border), transparent); } .foundry-divider-dot{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 6px var(--wash-tint), 0 0 20px 2px var(--primary-glow); } /* Between two --bg-soft sections, the plain divider left a visible paler seam (page background showing through for the sliver of space it occupies). Full-bleed the same soft tint behind it here so it reads as one continuous band instead of a stripe. */ .foundry-divider--soft{ max-width:none; width:100%; background:var(--bg-soft); padding-top:12px; padding-bottom:12px; } /* ---------- From Foundation to Business Impact ---------- */ /* Horizontal row of 5 "spec sheet" cards (not the old vertically-stacked, line-connected rows) — label/description kept in the sitewide font (var(--font-head), same as everywhere else), just distinguished with letter-spacing/uppercase/color, with the final "Result" card picked out in a dark gradient so the eye lands on the payoff. */ #foundry-stack{ background:var(--bg-soft); } .foundry-stack-diagram{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; align-items:stretch; } .foundry-stack-layer, .foundry-stack-result{ position:relative; display:flex; flex-direction:column; padding:28px 22px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .foundry-stack-layer:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .foundry-stack-num{ font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-dark); } .foundry-stack-layer h3, .foundry-stack-result h3{ margin-top:14px; font-family:var(--font-head); font-size:17px; font-weight:800; line-height:1.3; color:var(--secondary); text-align:left !important; } .foundry-stack-layer p, .foundry-stack-result p{ margin-top:12px; font-family:var(--font-body); font-size:13px; line-height:1.6; color:var(--muted); } .foundry-stack-result{ overflow:hidden; background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); border-color:transparent; } .foundry-stack-result::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(65% 70% at 100% 0%, rgba(144,195,34,.22), transparent 60%); } .foundry-stack-result > *{ position:relative; z-index:1; } .foundry-stack-result .foundry-stack-num{ color:var(--primary-light); } .foundry-stack-result h3{ color:var(--white); } .foundry-stack-result p{ color:rgba(255,255,255,.68); } /* Equal-width columns — the shared .flagship-grid's default 1.35fr/1fr split was made for a "featured card + companion" pairing elsewhere; these two flagship industry packs are parallel/equal options, not a primary-vs-secondary pair. */ .foundry-pack-grid{ margin-top:64px; grid-template-columns:1fr 1fr; } .foundry-pack-list{ margin-top:16px; display:flex; flex-direction:column; gap:2px; } .foundry-pack-list li{ list-style:none; } .foundry-pack-list a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); text-decoration:none; transition:color .25s ease, gap .25s ease; } .foundry-pack-list a svg{ width:13px; height:13px; flex-shrink:0; opacity:.5; transition:opacity .25s ease, transform .25s ease; } .foundry-pack-list a:hover{ color:var(--primary-light); gap:14px; } .foundry-pack-list a:hover svg{ opacity:1; transform:translateX(2px); } li.foundry-pack-more{ padding:10px 4px 0 !important; font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.45) !important; border: unset !important; } .foundry-pack-list li{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.82); text-decoration:none; transition:color .25s ease, gap .25s ease; } .foundry-pack-list svg{ width:13px; height:13px; flex-shrink:0; opacity:.5; transition:opacity .25s ease, transform .25s ease; } .foundry-pack-list:hover{ color:var(--primary-light); } .foundry-pack-list:hover svg{ opacity:1; transform:translateX(2px); } /* ---------- Transformation Framework ---------- */ #foundry-framework{ background:var(--bg-soft); } .foundry-framework-note{ max-width:760px; margin:40px auto 0; text-align:center; font-size:15px; line-height:1.75; color:var(--muted); } @media (max-width: 1100px){ .foundry-whatitis-grid{ grid-template-columns:1fr 1fr; } .foundry-gov-grid{ grid-template-columns:1fr 1fr; } .foundry-deploy-grid{ grid-template-columns:1fr 1fr; } .foundry-hero-grid{ grid-template-columns:1fr; gap:40px; } .foundry-hero-copy{ max-width:none; } .foundry-hero-lifecycle{ max-width:600px; } .foundry-layer-grid{ grid-template-columns:1fr; gap:32px; } .foundry-integration-layout{ grid-template-columns:1fr; gap:32px; } .foundry-integration-copy{ position:static; } .foundry-stack-diagram{ grid-template-columns:repeat(3, 1fr); } } @media (max-width: 900px){ .foundry-compare-grid{ grid-template-columns:1fr; } .foundry-layer{ padding:48px 0; } .foundry-layer-capgrid{ grid-template-columns:1fr; } .foundry-layer-capcard--wide .foundry-layer-caplist{ columns:2; } .foundry-pack-grid{ grid-template-columns:1fr; } } @media (max-width: 700px){ .foundry-whatitis-grid{ grid-template-columns:1fr; } .foundry-gov-grid{ grid-template-columns:1fr; } .foundry-deploy-grid{ grid-template-columns:1fr; } .foundry-hero-lifecycle{ padding:28px 22px; } .foundry-hero-pillars{ grid-template-columns:1fr; } .foundry-layer{ padding:36px 0; } .foundry-layer-caplist{ columns:1; } .foundry-layer-capcard--wide .foundry-layer-caplist{ columns:1; } .foundry-stack-diagram{ grid-template-columns:1fr; } } @media (max-width: 560px){ /* The shared .hero-cta mobile rule (style.css) stretches its buttons to full width in a column stack — right for the homepage hero, but this page's CTA row should stay auto-width/left-aligned like every other breakpoint instead of becoming a full-bleed button + link stack. */ .foundry-banner .hero-cta{ flex-direction:row; flex-wrap:wrap; align-items:center; } .foundry-banner .hero-cta .btn{ width:auto; justify-content:flex-start; } } /* ========================================================================== Manufacturing AI Solution Pack — v2 page. Reuses shared sitewide utility classes already defined in style.css (.page-banner, .pillars-grid/.pillar-card, .value-steps, .faq-list, .cta-section, .stories-section, .value-section, .recognition-section, .engagement-section, .foundry-secondary-link/.foundry-divider — the last two are actually defined in ai-foundry.css, so this file also links after that page's patterns exist elsewhere; nothing here duplicates style.css). Only page-specific bits are added here, scoped under mfg-* classes so they can never leak onto other pages. Load this AFTER style.css and AFTER ai-foundry.css is NOT required — the two .foundry-secondary-link/.foundry-divider rules this page borrows are redefined locally below so this file has no hard dependency on ai-foundry.css being loaded. ========================================================================== */ .mfg-v2-page{ background:var(--white); } /* style.css trims #get-started's top padding to 40px sitewide, assuming the FAQ section right above it always trims its own bottom padding to match (see that rule's comment). This page's FAQ keeps full, symmetric top/bottom padding instead, so restore the CTA's default 96px top here to match its own bottom padding. */ .mfg-v2-page #get-started{ padding-top:96px !important; } /* Scoped container rule — same convention used by ai-foundry.css/ responsible-ai-security.css — for every section id this page introduces. */ #the-problem .container, #ai-journey .container, #solution-pack .container, #custom-solutions .container, #value-themes .container, #how-its-built .container, #enterprise-integration .container, #enterprise-trust .container, #related-insights .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #the-problem .container, #ai-journey .container, #solution-pack .container, #custom-solutions .container, #value-themes .container, #how-its-built .container, #enterprise-integration .container, #enterprise-trust .container, #related-insights .container{ max-width:1480px; } } @media (min-width:2560px){ #the-problem .container, #ai-journey .container, #solution-pack .container, #custom-solutions .container, #value-themes .container, #how-its-built .container, #enterprise-integration .container, #enterprise-trust .container, #related-insights .container{ max-width:1600px; } } /* Section-header width overrides — widened just enough for each headline to sit on as few lines as possible at desktop widths (same pattern used on the AI Foundry page). */ #the-problem .section-header{ max-width:920px; } #ai-journey .section-header{ max-width:820px; } #custom-solutions .section-header{ max-width:900px; } #value-themes .section-header{ max-width:900px; } #how-its-built .section-header{ max-width:820px; } #enterprise-trust .section-header{ max-width:860px; } /* Borrowed from ai-foundry.css — outline "learn more" link and the section-boundary ornament, redefined here so this page has no load-order dependency on ai-foundry.css. */ .foundry-secondary-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--secondary); padding:14px 8px; transition:color .25s ease, gap .25s ease; } .foundry-secondary-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .foundry-secondary-link:hover{ color:var(--primary-dark); gap:12px; } .foundry-divider{ display:flex; align-items:center; justify-content:center; gap:20px; max-width:1360px; margin:0 auto; padding:0 15px; } .foundry-divider-line{ height:1px; flex:1 1 auto; max-width:220px; background:linear-gradient(90deg, transparent, var(--border)); } .foundry-divider-line:last-child{ background:linear-gradient(90deg, var(--border), transparent); } .foundry-divider-dot{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 6px var(--wash-tint), 0 0 20px 2px var(--primary-glow); } .foundry-divider--soft{ max-width:none; width:100%; background:var(--bg-soft); padding-top:12px; padding-bottom:12px; } .foundry-compare-icon{ flex-shrink:0; margin-top:1px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .foundry-compare-icon svg{ width:10px; height:10px; } .foundry-compare-icon--not{ background:rgba(220,38,38,.1); color:#dc2626; } .foundry-compare-icon--is{ background:var(--wash-tint); color:var(--primary-dark); } /* ---------- Hero ---------- */ /* Centered single column (breadcrumb/eyebrow/h1/sub/CTA), same as the original manufacturing.html hero — the 4-pillar strip sits below the CTA row as one full-width row, not a separate right-side card. */ .mfg-hero-copy--center{ max-width:900px; margin:0 auto; text-align:center; } .mfg-hero-copy--center .breadcrumb{ justify-content:center; } .mfg-hero-copy--center .hero-cta{ justify-content:center; margin-top:32px; } .mfg-hero-pillars{ margin:44px auto 0; max-width:1100px; position:relative; overflow:hidden; isolation:isolate; padding:18px 28px; border-radius:18px; background:var(--white); border:1px solid var(--border); box-shadow:0 20px 44px -30px rgba(0,39,54,.22); } .mfg-hero-pillars--row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; } .mfg-hero-pillars::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); } .mfg-hero-pillars > *{ position:relative; z-index:1; } .mfg-hero-pillar{ position:relative; display:flex; align-items:center; gap:12px; text-align:left; padding:6px 16px; } @media (min-width:1101px){ .mfg-hero-pillar:not(:first-child)::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--border); } } .mfg-hero-pillar-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--wash-tint); color:var(--primary-dark); } .mfg-hero-pillar-icon svg{ width:16px; height:16px; } .mfg-hero-pillar-body{ min-width:0; } .mfg-hero-pillar h4{ font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--secondary); line-height:1.25; text-align:left !important; } .mfg-hero-pillar p{ margin-top:2px; font-size:12px; line-height:1.4; color:var(--muted); text-align:left !important; } /* ---------- The Problem ---------- */ .mfg-problem-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .mfg-problem-card{ position:relative; overflow:hidden; isolation:isolate; padding:32px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid rgba(144,195,34,.18); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-problem-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 65% at 100% 0%, rgba(144,195,34,.1), transparent 65%); } .mfg-problem-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .mfg-problem-card > *{ position:relative; z-index:1; } .mfg-problem-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .mfg-problem-card:hover::after{ transform:scaleX(1); } .mfg-problem-num{ font-family:var(--font-head); font-size:34px; font-weight:800; color:rgba(144,195,34,.28); line-height:1; } .mfg-problem-card h3{ margin-top:14px; font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left !important; } .mfg-problem-card p{ margin-top:10px; font-size:14px; line-height:1.65; color:var(--muted); } .mfg-problem-note{ margin:48px auto 0; max-width:700px; text-align:center; font-size:15px; font-weight:700; color:var(--secondary); } /* ---------- AI Transformation Journey ---------- */ #ai-journey{ background:var(--bg-soft); } .mfg-journey-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; } .mfg-journey-col{ padding:36px 32px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); } .mfg-journey-col--is{ border-color:rgba(144,195,34,.3); box-shadow:0 20px 44px -28px rgba(0,39,54,.18); } .mfg-journey-col h3{ font-family:var(--font-head); font-size:20px; font-weight:800; color:var(--secondary); text-align:left !important; } .mfg-journey-sub{ margin-top:6px; font-size:14px; font-weight:700; color:var(--muted); } .mfg-journey-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; } .mfg-journey-list li{ list-style:none; display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.6; color:var(--muted); } .mfg-journey-outcome{ margin-top:24px; padding-top:20px; border-top:1px solid var(--border); font-size:14.5px; font-weight:800; color:var(--secondary); } .mfg-journey-outcome--is{ color:var(--primary-dark); } .mfg-timeline-head{ margin-top:64px; text-align:center; } .mfg-timeline-label{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-light); } .mfg-timeline{ margin-top:24px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; align-items:stretch; } .mfg-timeline-step{ position:relative; display:flex; flex-direction:column; padding:28px 22px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-timeline-step:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .mfg-timeline-num{ font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-dark); } .mfg-timeline-step h3{ margin-top:14px; font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--secondary); text-align:left !important; } .mfg-timeline-step p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); } .mfg-timeline-step--result{ background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); border-color:transparent; overflow:hidden; } .mfg-timeline-step--result::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(65% 70% at 100% 0%, rgba(144,195,34,.22), transparent 60%); } .mfg-timeline-step--result > *{ position:relative; z-index:1; } .mfg-timeline-step--result .mfg-timeline-num{ color:var(--primary-light); } .mfg-timeline-step--result h3, .mfg-timeline-step--result p{ color:var(--white); } .mfg-timeline-step--result p{ color:rgba(255,255,255,.68); } .mfg-timeline-disclaimer{ margin:32px auto 0; max-width:960px; text-align:center; font-size:13px; font-style:italic; color:var(--muted-light); } /* ---------- Solution Pack ---------- */ /* 2-column header (left: eyebrow/title/first paragraph, right: second paragraph + CTA) instead of the sitewide centered .section-header — this section introduces the whole 9-family pack, so it carries more of an "editorial intro" weight than a plain centered blurb. */ .mfg-pack-header{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; text-align:left; } /* Text-align is inherited here rather than set directly on the eyebrow/ title/paragraph, which is fine on this static page but breaks once this markup is pasted into WordPress: the theme's own heading styles set .h2 (and often .eyebrow/.sub) to text-align:center directly, and an explicit rule always wins over an inherited value regardless of specificity. Setting text-align:left directly on each element — with !important so it also beats a theme rule that loads after this stylesheet — keeps this header left-aligned in both places. */ .mfg-pack-header-main .eyebrow, .mfg-pack-header-main .h2, .mfg-pack-header-main .sub, .mfg-pack-header-aside .sub{ text-align:left !important; } .mfg-pack-header-main .h2{ margin-top:16px; } .mfg-pack-header-main .sub, .mfg-pack-header-aside .sub{ margin-left:0; margin-right:0; } .mfg-pack-header-aside{ padding-top:64px; } .mfg-pack-header-aside .btn{ margin-top:24px; } .mfg-pack-steps{ margin-top:64px; display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; } .mfg-pack-step{ padding:22px 18px; border-radius:var(--radius-md); background:var(--bg-soft-2); text-align:center; } .mfg-pack-step-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--white); font-family:var(--font-head); font-size:11px; font-weight:800; } .mfg-pack-step h4{ margin-top:12px; font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--secondary); } .mfg-pack-step p{ margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--muted); } .mfg-family-grid{ margin-top:64px; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .mfg-family-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; padding:32px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-family-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .mfg-family-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .mfg-family-card:hover::before{ transform:scaleX(1); } .mfg-family-icon{ flex-shrink:0; width:48px; height:48px; border-radius:14px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 22px -6px var(--primary-glow); display:flex; align-items:center; justify-content:center; } .mfg-family-icon svg{ width:22px; height:22px; color:var(--white); } .mfg-family-card h3{ margin-top:18px; font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left !important; } .mfg-family-role{ display:block; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--primary-dark); text-align:left !important; } .mfg-family-list{ margin-top:16px; display:flex; flex-direction:column; gap:9px; padding-bottom:20px; } .mfg-family-list li{ list-style:none; position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:var(--muted); } .mfg-family-list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } .mfg-family-systems{ display:block; margin-top:auto; padding-top:16px; border-top:1px solid var(--border); font-size:12px; line-height:1.6; color:var(--muted-light); } /* ---------- Custom AI Solutions ---------- */ #custom-solutions{ background:var(--bg-soft); } .mfg-custom-panel{ position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:1.15fr 1fr; gap:56px; padding:56px 60px; border-radius:var(--radius-lg); background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); box-shadow:0 32px 64px -32px rgba(0,39,54,.35); } .mfg-custom-panel::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(55% 65% at 100% 0%, rgba(144,195,34,.22), transparent 60%); } .mfg-custom-panel > *{ position:relative; z-index:1; } /* text-align:left forced here for the same reason as .mfg-pack-header — see the comment there. This panel's copy column has no ancestor that sets text-align at all (it's just never centered), so it's just as exposed to a WordPress theme's default centered .h2/.eyebrow/.sub. */ .mfg-custom-panel-copy .eyebrow, .mfg-custom-panel-copy .h2, .mfg-custom-panel-copy .sub{ text-align:left !important; } .mfg-custom-panel-copy .h2{ color:var(--white); margin-top:16px; } .mfg-custom-panel-copy .sub{ color:rgba(255,255,255,.66); } .mfg-custom-panel-copy .sub + .sub{ margin-top:14px; } .mfg-custom-panel-list{ display:flex; flex-direction:column; gap:24px; padding-top:8px; } .mfg-custom-item{ padding-left:20px; border-left:2px solid var(--primary); } .mfg-custom-item h4{ font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--white); text-align: left; } .mfg-custom-item p{ margin-top:6px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6); } .mfg-custom-links{ margin-top:12px; padding-left:20px; display:flex; flex-wrap:wrap; gap:12px 16px; } .mfg-custom-btn-links { padding-left: 0; margin-top: 20px; } /* ---------- Where Value Shows Up First ---------- */ .mfg-theme-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .mfg-theme-card{ padding:30px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-theme-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .mfg-theme-card h3{ font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left !important; } .mfg-theme-card p{ margin-top:12px; font-size:13.5px; line-height:1.65; color:var(--muted); } /* ---------- How It Is Built ---------- */ #how-its-built{ position:relative; overflow:hidden; background:var(--bg-soft); } #how-its-built::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(40% 40% at 100% 0%, rgba(144,195,34,.07), transparent 60%), radial-gradient(35% 35% at 0% 100%, rgba(0,39,54,.05), transparent 60%); } #how-its-built .container{ position:relative; z-index:1; } .mfg-layers-diagram{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; align-items:stretch; } .mfg-layer-card{ position:relative; display:flex; flex-direction:column; padding:28px 22px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-layer-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .mfg-layer-num{ font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-dark); } .mfg-layer-card h3{ margin-top:14px; font-family:var(--font-head); font-size:16px; font-weight:800; line-height:1.3; color:var(--secondary); text-align:left !important; } .mfg-layer-card p{ margin-top:10px; font-size:13px; line-height:1.6; color:var(--muted); } .mfg-layer-card--result{ background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); border-color:transparent; overflow:hidden; } .mfg-layer-card--result::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(65% 70% at 100% 0%, rgba(144,195,34,.22), transparent 60%); } .mfg-layer-card--result > *{ position:relative; z-index:1; } .mfg-layer-card--result .mfg-layer-num{ color:var(--primary-light); } .mfg-layer-card--result h3{ color:var(--white); } .mfg-layer-card--result p{ color:rgba(255,255,255,.68); } /* ---------- Enterprise Integration ---------- */ .mfg-integration-layout{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:start; } .mfg-integration-copy{ position:sticky; top:120px; } /* text-align:left forced here for the same reason as .mfg-pack-header — see the comment there. */ .mfg-integration-copy .eyebrow, .mfg-integration-copy .h2, .mfg-integration-copy .sub{ text-align:left !important; } .mfg-integration-copy .btn{ margin-top:20px; } .mfg-integration-capgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } .mfg-integration-capcard{ position:relative; overflow:hidden; padding:28px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-integration-capcard::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .mfg-integration-capcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .mfg-integration-capcard:hover::before{ transform:scaleX(1); } .mfg-integration-capcard h4{ font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); text-align:left !important; } .mfg-integration-caplist{ margin-top:16px; display:flex; flex-direction:column; gap:9px; } .mfg-integration-caplist li{ list-style:none; position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:var(--muted); } .mfg-integration-caplist li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } /* ---------- Enterprise Trust ---------- */ /* Center the 4th/5th pillar cards in their own row instead of leaving an empty third slot — same technique used by #ai-services in style.css. */ @media (min-width:1101px){ #enterprise-trust .pillars-grid{ grid-template-columns:repeat(6, 1fr); } #enterprise-trust .pillars-grid .pillar-card{ grid-column:span 2; } #enterprise-trust .pillars-grid .pillar-card:nth-child(4){ grid-column:2 / span 2; } #enterprise-trust .pillars-grid .pillar-card:nth-child(5){ grid-column:4 / span 2; } } /* ---------- Related Insights ---------- */ #related-insights{ background:var(--bg-soft); } .mfg-related-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; } .mfg-related-card{ flex:0 1 calc(33.333% - 16px); min-width:0; display:flex; flex-direction:column; overflow:hidden; padding:0 0 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .mfg-related-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .mfg-related-thumb{ position:relative; height:170px; overflow:hidden; background:var(--bg-soft-2); } .mfg-related-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .mfg-related-card:hover .mfg-related-thumb img{ transform:scale(1.06); } .mfg-related-thumb--video{ background:linear-gradient(150deg, var(--secondary) 0%, var(--secondary-700) 100%); display:flex; align-items:center; justify-content:center; } .mfg-related-thumb--video::before{ content:''; position:absolute; inset:0; background:radial-gradient(70% 90% at 15% 0%, rgba(144,195,34,.22), transparent 60%); } .mfg-related-thumb-icon{ position:relative; width:64px; height:40px; color:var(--primary-light); transition:transform .4s var(--ease); } .mfg-related-card:hover .mfg-related-thumb-icon{ transform:scale(1.08); } .mfg-related-card > .mfg-related-tag{ margin:22px 26px 0; } .mfg-related-card > h3{ margin-left:26px; margin-right:26px; } .mfg-related-card > p{ margin-left:26px; margin-right:26px; } .mfg-related-card > .mfg-related-link{ margin-left:26px; margin-right:26px; } .mfg-related-tag{ display:inline-flex; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); background:var(--wash-tint); padding:4px 11px; border-radius:var(--radius-full); } .mfg-related-card h3{ margin-top:16px; font-family:var(--font-head); font-size:16.5px; font-weight:800; line-height:1.35; color:var(--secondary); text-align:left !important; } .mfg-related-card p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); } .mfg-related-link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:20px; font-size:13.5px; font-weight:700; color:var(--primary-dark); transition:gap .2s ease; } .mfg-related-link svg{ width:14px; height:14px; } .mfg-related-card:hover .mfg-related-link{ gap:12px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px){ .mfg-hero-pillars--row{ grid-template-columns:1fr 1fr; row-gap:18px; } .mfg-problem-grid{ grid-template-columns:1fr 1fr; } .mfg-pack-header{ grid-template-columns:1fr; gap:24px; } .mfg-pack-header-aside{ padding-top:0; } .mfg-journey-grid{ grid-template-columns:1fr; gap:28px; } .mfg-timeline{ grid-template-columns:1fr 1fr; } .mfg-pack-steps{ grid-template-columns:repeat(3, 1fr); } .mfg-family-grid{ grid-template-columns:1fr 1fr; } .mfg-custom-panel{ grid-template-columns:1fr; gap:36px; padding:44px 40px; } .mfg-theme-grid{ grid-template-columns:1fr 1fr; } .mfg-layers-diagram{ grid-template-columns:repeat(3, 1fr); } .mfg-integration-layout{ grid-template-columns:1fr; gap:32px; } .mfg-integration-copy{ position:static; } .mfg-related-card{ flex-basis:calc(50% - 12px); } } @media (max-width: 900px){ .mfg-integration-capgrid{ grid-template-columns:1fr; } } @media (max-width: 700px){ .mfg-problem-grid{ grid-template-columns:1fr; } .mfg-timeline{ grid-template-columns:1fr; } .mfg-pack-steps{ grid-template-columns:1fr 1fr; } .mfg-family-grid{ grid-template-columns:1fr; } .mfg-custom-panel{ padding:32px 24px; } .mfg-theme-grid{ grid-template-columns:1fr; } .mfg-layers-diagram{ grid-template-columns:1fr; } .mfg-related-card{ flex-basis:100%; } .mfg-hero-pillars--row{ grid-template-columns:1fr 1fr; } .mfg-hero-pillars{ padding:16px 20px; } } @media (max-width: 560px){ .mfg-hero-copy--center .hero-cta{ flex-direction:row; flex-wrap:wrap; } .mfg-hero-copy--center .hero-cta .btn{ width:auto; } .mfg-hero-pillars--row{ grid-template-columns:1fr; } } /* ========================================================================== Financial Services AI Solution Pack page. Reuses shared sitewide utility classes already defined in style.css (.page-banner, .pillars-grid/.pillar-card, .pillar-tags/.pillar-tag, .faq-list, .cta-section, .stories-section, .value-section, .engagement-section, .foundry-secondary-link/.foundry-divider — the last two are actually defined in ai-foundry.css, so this file also works when that page's patterns aren't loaded, since they're redefined locally below). Modeled directly on manufacturing-v2.html/.css — the same "premium card" and section patterns, renamed under fin-* classes so this page is self-contained and never depends on manufacturing-v2.css being loaded. ========================================================================== */ .fin-v2-page{ background:var(--white); } /* Mirrors the equivalent rule in manufacturing-v2.css: style.css trims #get-started's top padding to 40px sitewide, assuming the FAQ section right above it trims its own bottom padding to match. This page's FAQ keeps full, symmetric top/bottom padding instead, so restore the CTA's default 96px top here to match its own bottom padding. */ .fin-v2-page #get-started{ padding-top:96px; } /* Scoped container rule — same convention used by manufacturing-v2.css/ ai-foundry.css — for every section id this page introduces. */ #sectors .container, #the-problem .container, #solution-pack .container, #coverage .container, #enterprise-integration .container, #governance .container, #why-intellectyx .container, #recognition-awards .container, #related-insights .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #sectors .container, #the-problem .container, #solution-pack .container, #coverage .container, #enterprise-integration .container, #governance .container, #why-intellectyx .container, #recognition-awards .container, #related-insights .container{ max-width:1480px; } } @media (min-width:2560px){ #sectors .container, #the-problem .container, #solution-pack .container, #coverage .container, #enterprise-integration .container, #governance .container, #why-intellectyx .container, #recognition-awards .container, #related-insights .container{ max-width:1600px; } } /* Section-header width overrides — widened just enough for each headline to sit on as few lines as possible at desktop widths. */ #sectors .section-header{ max-width:900px; } #the-problem .section-header{ max-width:900px; } #coverage .section-header{ max-width:820px; } #governance .section-header{ max-width:860px; } #why-intellectyx .section-header{ max-width:860px; } /* Borrowed from ai-foundry.css — outline "learn more" link, redefined here so this page has no load-order dependency on ai-foundry.css. */ .foundry-secondary-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--secondary); padding:14px 8px; transition:color .25s ease, gap .25s ease; } .foundry-secondary-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .foundry-secondary-link:hover{ color:var(--primary-dark); gap:12px; } .foundry-divider{ display:flex; align-items:center; justify-content:center; gap:20px; max-width:1360px; margin:0 auto; padding:0 15px; } .foundry-divider-line{ height:1px; flex:1 1 auto; max-width:220px; background:linear-gradient(90deg, transparent, var(--border)); } .foundry-divider-line:last-child{ background:linear-gradient(90deg, var(--border), transparent); } .foundry-divider-dot{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 6px var(--wash-tint), 0 0 20px 2px var(--primary-glow); } .foundry-divider--soft{ max-width:none; width:100%; background:var(--bg-soft); padding-top:12px; padding-bottom:12px; } /* ---------- Hero ---------- */ .fin-hero-copy--center{ max-width:800px; margin:0 auto; text-align:center; } .fin-hero-copy--center .breadcrumb{ justify-content:center; } .fin-hero-copy--center .hero-cta{ justify-content:center; margin-top:32px; } .fin-hero-trust{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; margin-bottom:24px; font-size:13.5px; font-weight:700; color:var(--muted); } .fin-hero-trust-dot{ flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); } .fin-hero-pillars{ margin:36px auto 0; max-width:1100px; position:relative; overflow:hidden; isolation:isolate; padding:18px 28px; border-radius:18px; background:var(--white); border:1px solid var(--border); box-shadow:0 20px 44px -30px rgba(0,39,54,.22); } .fin-hero-pillars--row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; } .fin-hero-pillars::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); } .fin-hero-pillars > *{ position:relative; z-index:1; } .fin-hero-pillar{ position:relative; display:flex; align-items:center; gap:12px; text-align:left; padding:6px 16px; } @media (min-width:1101px){ .fin-hero-pillar:not(:first-child)::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--border); } } .fin-hero-pillar-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--wash-tint); color:var(--primary-dark); } .fin-hero-pillar-icon svg{ width:16px; height:16px; } .fin-hero-pillar-body{ min-width:0; } .fin-hero-pillar h4{ font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--secondary); line-height:1.25; text-align:left !important; } .fin-hero-pillar p{ margin-top:2px; font-size:12px; line-height:1.4; color:var(--muted); text-align:left !important; } /* ---------- Sectors We Serve ---------- */ #sectors{ background:var(--bg-soft); } .fin-sector-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .fin-sector-card{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; padding:30px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid rgba(144,195,34,.18); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fin-sector-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 65% at 100% 0%, rgba(144,195,34,.1), transparent 65%); } .fin-sector-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .fin-sector-card > *{ position:relative; z-index:1; } .fin-sector-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .fin-sector-card:hover::after{ transform:scaleX(1); } /* text-align:left set directly on this and the other card titles below (not just relied on from layout) for the same reason as .fin-pack-header/.fin-integration-copy above: none of these titles sit inside a centered ancestor, they're just never centered on this static page — but an explicit rule always wins over an inherited or default value, so a WordPress theme's blanket centered h3/h4 would otherwise re-center every one of these once pasted into a Raw HTML block. !important also beats a theme rule that loads after this stylesheet. */ .fin-sector-card h3{ font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align:left !important; } .fin-sector-card > p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); } .fin-sector-list{ margin-top:16px; display:flex; flex-direction:column; gap:9px; padding-top:16px; border-top:1px solid var(--border); } .fin-sector-list li{ list-style:none; position:relative; padding-left:16px; font-size:13px; line-height:1.5; color:var(--muted); } .fin-sector-list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } /* ---------- The Problem ---------- */ .fin-problem-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .fin-problem-card{ position:relative; overflow:hidden; isolation:isolate; padding:32px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid rgba(144,195,34,.18); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fin-problem-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 65% at 100% 0%, rgba(144,195,34,.1), transparent 65%); } .fin-problem-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .fin-problem-card > *{ position:relative; z-index:1; } .fin-problem-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .fin-problem-card:hover::after{ transform:scaleX(1); } .fin-problem-num{ font-family:var(--font-head); font-size:34px; font-weight:800; color:rgba(144,195,34,.28); line-height:1; } .fin-problem-card h3{ margin-top:14px; font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left !important; } .fin-problem-card p{ margin-top:10px; font-size:14px; line-height:1.65; color:var(--muted); } /* ---------- Solution Pack ---------- */ #solution-pack{ background:var(--bg-soft); } .fin-pack-header{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; text-align:left; } /* text-align is inherited here rather than set directly on the eyebrow/ title/paragraph, which is fine on this static page but breaks once this markup is pasted into WordPress: the theme's own heading styles set .h2 (and often .eyebrow/.sub) to text-align:center directly, and an explicit rule always wins over an inherited value regardless of specificity. Setting text-align:left directly on each element — with !important so it also beats a theme rule that loads after this stylesheet — keeps this header left-aligned in both places. */ .fin-pack-header-main .eyebrow, .fin-pack-header-main .h2, .fin-pack-header-main .sub, .fin-pack-header-aside .sub{ text-align:left !important; } .fin-pack-header-main .h2{ margin-top:16px; } .fin-pack-header-main .sub, .fin-pack-header-aside .sub{ margin-left:0; margin-right:0; } .fin-pack-header-aside{ padding-top:64px; } .fin-pack-header-aside .btn{ margin-top:24px; } .fin-pack-steps{ margin-top:64px; display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; } .fin-pack-step{ padding:22px 18px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--border); text-align:center; } .fin-pack-step-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--white); font-family:var(--font-head); font-size:11px; font-weight:800; } .fin-pack-step h4{ margin-top:12px; font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--secondary); } .fin-pack-step p{ margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--muted); } .fin-family-grid{ margin-top:64px; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .fin-family-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; padding:32px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fin-family-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .fin-family-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .fin-family-card:hover::before{ transform:scaleX(1); } .fin-family-icon{ flex-shrink:0; width:48px; height:48px; border-radius:14px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 22px -6px var(--primary-glow); display:flex; align-items:center; justify-content:center; } .fin-family-icon svg{ width:22px; height:22px; color:var(--white); } .fin-family-card h3{ margin-top:18px; font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left !important; } .fin-family-sectors{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .fin-sector-tag{ font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--primary-dark); background:var(--wash-tint); padding:3px 9px; border-radius:var(--radius-full); } .fin-family-role{ display:block; margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted); text-align:left !important; } .fin-family-list{ margin-top:16px; display:flex; flex-direction:column; gap:9px; padding-bottom:20px; } .fin-family-list li{ list-style:none; position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:var(--muted); } .fin-family-list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } .fin-family-systems{ display:block; margin-top:auto; padding-top:16px; border-top:1px solid var(--border); font-size:12px; line-height:1.6; color:var(--muted-light); } .fin-pack-cta{ margin-top:40px; display:flex; justify-content:center; } /* Center the 7th/8th family cards in their own row instead of leaving an empty third slot — same technique used on the Enterprise Trust section of manufacturing-v2.html and #ai-services in style.css. */ @media (min-width:1101px){ .fin-family-grid{ grid-template-columns:repeat(6, 1fr); } .fin-family-card{ grid-column:span 2; } .fin-family-card:nth-child(7){ grid-column:2 / span 2; } .fin-family-card:nth-child(8){ grid-column:4 / span 2; } } /* ---------- Coverage ---------- */ .fin-coverage-wrap{ margin-top:8px; overflow-x:auto; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); } .fin-coverage-table{ width:100%; min-width:720px; border-collapse:collapse; background:var(--white); } .fin-coverage-table thead th{ background:var(--bg-soft-2); color:var(--secondary); font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-align:center; padding:18px 14px; white-space:nowrap; border-bottom:2px solid var(--primary); } .fin-coverage-table thead th:first-child{ text-align:left; } .fin-coverage-table tbody th{ text-align:left; padding:16px 20px; font-size:14px; font-weight:700; color:var(--secondary); white-space:nowrap; } .fin-coverage-table tbody td{ text-align:center; padding:16px; } .fin-coverage-table tbody tr:not(:last-child) th, .fin-coverage-table tbody tr:not(:last-child) td{ border-bottom:1px solid var(--border); } .fin-coverage-table tbody tr:hover{ background:var(--bg-soft-2); } .fin-check{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--wash-tint); color:var(--primary-dark); } .fin-check svg{ width:12px; height:12px; } .fin-no{ color:var(--muted-light); font-size:15px; font-weight:700; } /* Below 700px the table collapses into stacked cards — one card per solution family, each row's column header restored as a label via data-label (classic responsive-table pattern) since a horizontally scrolling table of checkmarks is unreadable at phone widths. */ @media (max-width:700px){ .fin-coverage-wrap{ overflow-x:visible; border:none; box-shadow:none; background:none; } .fin-coverage-table{ min-width:0; display:block; } .fin-coverage-table thead{ display:none; } .fin-coverage-table tbody{ display:flex; flex-direction:column; gap:16px; } .fin-coverage-table tbody tr{ display:block; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); overflow:hidden; } .fin-coverage-table tbody tr:hover{ background:var(--white); } .fin-coverage-table tbody th[data-label]{ display:block; padding:16px 18px; background:var(--bg-soft-2); border-bottom:2px solid var(--primary); white-space:normal; font-size:14.5px; } .fin-coverage-table tbody tr:not(:last-child) th{ border-bottom:2px solid var(--primary); } .fin-coverage-table tbody td{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; text-align:left; } .fin-coverage-table tbody tr td:not(:last-child){ border-bottom:1px solid var(--border) !important; } .fin-coverage-table tbody td::before{ content:attr(data-label); font-size:13px; font-weight:700; color:var(--muted); } } /* ---------- Enterprise Integration ---------- */ .fin-integration-layout{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:start; } .fin-integration-copy{ position:sticky; top:120px; } /* text-align:left forced here for the same reason as .fin-pack-header above — this column has no ancestor that sets text-align at all (it's just never centered), so it's just as exposed to a WordPress theme's default centered .eyebrow/.h2/.sub. */ .fin-integration-copy .eyebrow, .fin-integration-copy .h2, .fin-integration-copy .sub{ text-align:left !important; } .fin-integration-copy .btn{ margin-top:20px; } .fin-integration-capgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } .fin-integration-capcard{ position:relative; overflow:hidden; padding:28px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fin-integration-capcard::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .fin-integration-capcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .fin-integration-capcard:hover::before{ transform:scaleX(1); } .fin-integration-capcard h4{ font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); text-align:left !important; } .fin-integration-caplist{ margin-top:16px; display:flex; flex-direction:column; gap:9px; } .fin-integration-caplist li{ list-style:none; position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:var(--muted); } .fin-integration-caplist li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } /* ---------- Governance & Control ---------- */ #governance{ background:var(--bg-soft); } .fin-gov-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .fin-gov-card{ padding:28px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fin-gov-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .fin-gov-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:var(--wash-tint); color:var(--primary-dark); } .fin-gov-icon svg{ width:20px; height:20px; } .fin-gov-card h3{ margin-top:16px; font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--secondary); line-height:1.3; text-align:left !important; } .fin-gov-card p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); } .fin-soc2-panel{ margin-top:24px; position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; gap:24px; padding:32px 36px; border-radius:var(--radius-lg); background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); box-shadow:0 24px 50px -28px rgba(0,39,54,.35); } .fin-soc2-panel::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(55% 80% at 100% 0%, rgba(144,195,34,.22), transparent 60%); } .fin-soc2-panel > *{ position:relative; z-index:1; } .fin-soc2-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--primary-light); } .fin-soc2-icon svg{ width:26px; height:26px; } .fin-soc2-body h3{ font-family:var(--font-head); font-size:19px; font-weight:800; color:var(--white); text-align:left !important; } .fin-soc2-body p{ margin-top:6px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.68); max-width:640px; } .fin-reg-tags{ margin-top:28px; justify-content:center; } .fin-reg-disclaimer{ margin:20px auto 0; max-width:820px; text-align:center; font-size:12.5px; line-height:1.6; color:var(--muted-light); } /* ---------- Why Intellectyx ---------- */ .fin-why{ background:#fff !important; } /* Center the 4th/5th pillar cards in their own row instead of leaving an empty third slot — same technique used on the Enterprise Trust section of manufacturing-v2.html and #ai-services in style.css. */ @media (min-width:1101px){ #why-intellectyx .pillars-grid{ grid-template-columns:repeat(6, 1fr); } #why-intellectyx .pillars-grid .pillar-card{ grid-column:span 2; } #why-intellectyx .pillars-grid .pillar-card:nth-child(4){ grid-column:2 / span 2; } #why-intellectyx .pillars-grid .pillar-card:nth-child(5){ grid-column:4 / span 2; } } /* ---------- Related Insights ---------- */ #related-insights{ background:var(--bg-soft); } .fin-related-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; } .fin-related-card{ flex:0 1 calc(33.333% - 16px); min-width:0; display:flex; flex-direction:column; overflow:hidden; padding:0 0 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .fin-related-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(0,39,54,.2); border-color:rgba(144,195,34,.3); } .fin-related-thumb{ position:relative; height:170px; overflow:hidden; background:var(--bg-soft-2); } .fin-related-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .fin-related-card:hover .fin-related-thumb img{ transform:scale(1.06); } .fin-related-thumb--video{ background:linear-gradient(150deg, var(--secondary) 0%, var(--secondary-700) 100%); display:flex; align-items:center; justify-content:center; } .fin-related-thumb--video::before{ content:''; position:absolute; inset:0; background:radial-gradient(70% 90% at 15% 0%, rgba(144,195,34,.22), transparent 60%); } .fin-related-thumb-icon{ position:relative; width:64px; height:40px; color:var(--primary-light); transition:transform .4s var(--ease); } .fin-related-card:hover .fin-related-thumb-icon{ transform:scale(1.08); } .fin-related-card > .fin-related-tag{ margin:22px 26px 0; } .fin-related-card > h3{ margin-left:26px; margin-right:26px; } .fin-related-card > p{ margin-left:26px; margin-right:26px; } .fin-related-card > .fin-related-link{ margin-left:26px; margin-right:26px; } .fin-related-tag{ display:inline-flex; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-dark); background:var(--wash-tint); padding:4px 11px; border-radius:var(--radius-full); } .fin-related-card h3{ margin-top:16px; font-family:var(--font-head); font-size:16.5px; font-weight:800; line-height:1.35; color:var(--secondary); text-align:left !important; } .fin-related-card p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); } .fin-related-link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:20px; font-size:13.5px; font-weight:700; color:var(--primary-dark); transition:gap .2s ease; } .fin-related-link svg{ width:14px; height:14px; } .fin-related-card:hover .fin-related-link{ gap:12px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px){ .fin-hero-pillars--row{ grid-template-columns:1fr 1fr; row-gap:18px; } .fin-related-card{ flex-basis:calc(50% - 12px); } .fin-sector-grid{ grid-template-columns:1fr 1fr; } .fin-problem-grid{ grid-template-columns:1fr 1fr; } .fin-pack-header{ grid-template-columns:1fr; gap:24px; } .fin-pack-header-aside{ padding-top:0; } .fin-pack-steps{ grid-template-columns:repeat(3, 1fr); } .fin-family-grid{ grid-template-columns:1fr 1fr; } .fin-integration-layout{ grid-template-columns:1fr; gap:32px; } .fin-integration-copy{ position:static; } .fin-gov-grid{ grid-template-columns:1fr 1fr; } .fin-soc2-panel{ flex-direction:column; align-items:flex-start; text-align:left; } } @media (max-width: 900px){ .fin-integration-capgrid{ grid-template-columns:1fr; } } @media (max-width: 700px){ .fin-sector-grid{ grid-template-columns:1fr; } .fin-problem-grid{ grid-template-columns:1fr; } .fin-pack-steps{ grid-template-columns:1fr 1fr; } .fin-family-grid{ grid-template-columns:1fr; } .fin-gov-grid{ grid-template-columns:1fr; } .fin-hero-pillars--row{ grid-template-columns:1fr 1fr; } .fin-hero-pillars{ padding:16px 20px; } .fin-related-card{ flex-basis:100%; } } @media (max-width: 560px){ .fin-hero-copy--center .hero-cta{ flex-direction:row; flex-wrap:wrap; } .fin-hero-copy--center .hero-cta .btn{ width:auto; } .fin-hero-pillars--row{ grid-template-columns:1fr; } .fin-hero-trust{ display:none; } } /* ========================================================================== Partners & Technology Ecosystem page. Reuses shared sitewide utility classes already defined in style.css (.page-banner, .pillars-grid/.pillar-card, .pillar-tag, .faq-list, .cta-section). Everything else — including the outline "learn more" link and the capability-card grid, which visually borrow from ai-foundry.css's .foundry-secondary-link and .foundry-layer-capgrid/ -capcard/-caplist — is redefined locally here under this page's OWN eco-* names (eco-secondary-link, eco-layer-capgrid/-capcard/-caplist, eco-compare*, eco-coexist) rather than reusing ai-foundry.css's class names verbatim. They were originally named to match ai-foundry.css exactly, which seemed harmless on this static site (each page loads only its own CSS file here) but collided once both pages' CSS ended up loaded together on the live WordPress site — identical class names, different rules, whichever stylesheet loads last silently wins on BOTH pages. Renamed everything to eco-* to remove any shared selector between the two pages' CSS entirely. Only page-specific bits are added here, scoped under eco-* classes so they can never leak onto other pages again. ========================================================================== */ .partners-page{ background:var(--white); } /* style.css trims #get-started's top padding to 40px sitewide, assuming the section right above it always trims its own bottom padding to match. This page's FAQ keeps full, symmetric top/bottom padding instead, so restore the CTA's default 96px top here to match its own bottom padding. */ .partners-page #get-started{ padding-top:96px; } /* Scoped container rule — same convention used by ai-foundry.css/ manufacturing-v2.css — for every section id this page introduces. */ #the-principle .container, #how-to-read .container, #ecosystem .container, #technologies .container, #systems .container, #coexistence .container, #partner-with-us .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ #the-principle .container, #how-to-read .container, #ecosystem .container, #technologies .container, #systems .container, #coexistence .container, #partner-with-us .container{ max-width:1480px; } } @media (min-width:2560px){ #the-principle .container, #how-to-read .container, #ecosystem .container, #technologies .container, #systems .container, #coexistence .container, #partner-with-us .container{ max-width:1600px; } } /* Section-header width overrides — widened just enough for each headline to sit on as few lines as possible at desktop widths. */ #the-principle .section-header{ max-width:820px; } #how-to-read .section-header{ max-width:820px; } #ecosystem .section-header{ max-width:820px; } #technologies .section-header{ max-width:780px; } #systems .section-header{ max-width:820px; } #partner-with-us .section-header{ max-width:820px; } /* Borrowed from ai-foundry.css — outline "learn more" link, the section-boundary ornament, the compare-column pattern and the capability-card grid, redefined here so this page has no load-order dependency on ai-foundry.css. */ .eco-secondary-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--secondary); padding:14px 8px; transition:color .25s ease, gap .25s ease; } .eco-secondary-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .eco-secondary-link:hover{ color:var(--primary-dark); gap:12px; } .eco-compare{ margin-top:16px; } .eco-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .eco-compare-col{ padding:36px 32px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-soft); } .eco-compare-col--is{ background:var(--white); border-color:rgba(144,195,34,.3); box-shadow:var(--shadow-sm); } .eco-compare-col h3{ font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align:left !important; } .eco-compare-col ul{ margin-top:20px; display:flex; flex-direction:column; gap:14px; } .eco-compare-col li{ list-style:none; display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.6; color:var(--muted); } .eco-compare-icon{ flex-shrink:0; margin-top:1px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .eco-compare-icon svg{ width:11px; height:11px; } .eco-compare-icon--is{ background:var(--wash-tint); color:var(--primary-dark); } .eco-compare-col--is li{ color:var(--secondary); } .eco-layer-capgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; } .eco-layer-capcard{ position:relative; overflow:hidden; isolation:isolate; padding:28px 26px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .eco-layer-capcard::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .eco-layer-capcard::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 65% at 100% 0%, rgba(144,195,34,.08), transparent 65%); } .eco-layer-capcard > *{ position:relative; z-index:1; } .eco-layer-capcard:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .eco-layer-capcard:hover::before{ transform:scaleX(1); } .eco-layer-capcard h4{ font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); text-align:left !important; } .eco-layer-caplist{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; column-gap:20px; } .eco-layer-caplist li{ list-style:none; position:relative; padding:9px 0 9px 15px; font-size:13px; line-height:1.4; color:var(--muted); border-bottom:1px solid var(--border); transition:border-color .3s var(--ease), color .3s var(--ease); } .eco-layer-caplist li::before{ content:''; position:absolute; left:0; top:16px; width:5px; height:5px; border-radius:50%; background:var(--primary); } .eco-layer-capcard:hover .eco-layer-caplist li{ border-color:rgba(144,195,34,.4); color:var(--secondary); } /* ---------- Hero ---------- */ .eco-hero-copy--center{ position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:center; } .eco-hero-copy--center .breadcrumb{ justify-content:center; } .eco-hero-copy--center .hero-cta{ justify-content:center; margin-top:32px; } #hero .eyebrow{ margin-bottom:10px; } .eco-hero-trust{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; margin-bottom:28px; font-size:13.5px; font-weight:700; color:var(--muted); } .eco-hero-trust-dot{ flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); } /* Decorative "network" motif behind the hero copy — a low-opacity node graph suggesting an ecosystem of connected platforms, purely visual. */ .eco-banner{ position:relative; overflow:hidden; } .eco-hero-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none; color:var(--primary); opacity:.16; } .eco-hero-mesh svg{ width:100%; height:100%; } .eco-banner .container{ position:relative; z-index:1; } .eco-hero-pillars{ position:relative; z-index:1; margin:36px auto 0; max-width:1100px; overflow:hidden; isolation:isolate; padding:18px 28px; border-radius:18px; background:var(--white); border:1px solid var(--border); box-shadow:0 20px 44px -30px rgba(0,39,54,.22); display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; } .eco-hero-pillars::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); } .eco-hero-pillars > *{ position:relative; z-index:1; } .eco-hero-pillar{ position:relative; display:flex; align-items:center; gap:12px; text-align:left; padding:6px 16px; } @media (min-width:1101px){ .eco-hero-pillar:not(:first-child)::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--border); } } .eco-hero-pillar-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--wash-tint); color:var(--primary-dark); } .eco-hero-pillar-icon svg{ width:16px; height:16px; } .eco-hero-pillar-body{ min-width:0; } .eco-hero-pillar h4{ font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--secondary); line-height:1.25; text-align:left !important; } .eco-hero-pillar p{ margin-top:2px; font-size:12px; line-height:1.4; color:var(--muted); } /* ---------- The Principle ---------- */ /* 2-column layout: plain-text copy on the left, a dark gradient panel on the right holding the three model-type mini-cards and the capability tag row — the "editorial copy beside a dark proof panel" pattern used elsewhere on the site (e.g. Financial Services' Custom AI Solutions panel), applied here so the model-type cards read as one cohesive product panel rather than a separate plain grid further down the page. */ #the-principle{ background:var(--bg-soft); } .eco-principle-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; text-align:left; } .eco-principle-copy h3{ font-family:var(--font-head); font-size:24px; font-weight:800; line-height:1.3; color:var(--secondary); text-align:left !important; } .eco-principle-copy p{ margin-top:16px; font-size:15px; line-height:1.75; color:var(--muted); text-align:left; } .eco-principle-copy .eco-secondary-link{ margin-top:8px; padding-left:0; } .eco-principle-panel{ position:relative; overflow:hidden; isolation:isolate; padding:36px 32px; border-radius:var(--radius-lg); background:linear-gradient(160deg, var(--secondary) 0%, var(--secondary-700) 100%); box-shadow:0 32px 64px -32px rgba(0,39,54,.35); } .eco-principle-panel::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(55% 65% at 100% 0%, rgba(144,195,34,.22), transparent 60%); } .eco-principle-panel > *{ position:relative; z-index:1; } .eco-principle-mini-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .eco-principle-mini-card{ padding:22px 18px; border-radius:var(--radius-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); } .eco-principle-mini-icon{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); box-shadow:0 8px 18px -6px var(--primary-glow); } .eco-principle-mini-icon svg{ width:17px; height:17px; } .eco-principle-mini-card h4{ margin-top:16px; font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--white); text-align:left !important; } .eco-principle-mini-card p{ margin-top:8px; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.62); } .eco-model-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); } .eco-model-tags .pillar-tag{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.85); font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--radius-full); transition:background .2s ease, border-color .2s ease; } .eco-model-tags .pillar-tag:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); } /* ---------- How To Read This Page ---------- */ .eco-relationship-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .eco-relationship-card{ position:relative; overflow:hidden; isolation:isolate; padding:32px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid rgba(144,195,34,.18); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .eco-relationship-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 65% at 100% 0%, rgba(144,195,34,.1), transparent 65%); } .eco-relationship-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .eco-relationship-card > *{ position:relative; z-index:1; } .eco-relationship-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .eco-relationship-card:hover::after{ transform:scaleX(1); } .eco-relationship-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 22px -6px var(--primary-glow); color:var(--white); } .eco-relationship-icon svg{ width:20px; height:20px; } .eco-relationship-card h3{ margin-top:16px; font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--secondary); text-align:left !important; } .eco-relationship-card > p{ margin-top:10px; font-size:13.5px; line-height:1.65; color:var(--muted); } .eco-relationship-list{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:9px; } .eco-relationship-list li{ list-style:none; position:relative; padding-left:16px; font-size:13px; line-height:1.5; color:var(--muted); } .eco-relationship-list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } /* ---------- Our Ecosystem ---------- */ #ecosystem{ background:var(--bg-soft); } .eco-brand-block{ margin-top:56px; } .eco-brand-block:first-of-type{ margin-top:0; } .eco-brand-block h3{ font-family:var(--font-head); font-size:19px; font-weight:800; color:var(--secondary); text-align:left !important; } .eco-brand-block > p{ margin-top:8px; font-size:14px; line-height:1.65; color:var(--muted); max-width:760px; } .eco-brand-grid{ margin-top:24px; display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; } .eco-brand-grid--five{ grid-template-columns:repeat(5, 1fr); } .eco-brand-tile{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px 16px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 12px 28px -22px rgba(0,39,54,.18); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .eco-brand-tile::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(65% 70% at 100% 0%, rgba(144,195,34,.1), transparent 65%); } .eco-brand-tile::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .eco-brand-tile > *{ position:relative; z-index:1; } .eco-brand-tile:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .eco-brand-tile:hover::after{ transform:scaleX(1); } .eco-brand-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:.01em; color:var(--white); background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 20px -6px var(--primary-glow); transition:transform .35s var(--ease); } .eco-brand-icon img{ width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(1); } .eco-brand-tile:hover .eco-brand-icon{ transform:scale(1.08) rotate(-4deg); } .eco-brand-name{ font-family:var(--font-head); font-size:14px; font-weight:800; color:var(--secondary); } .eco-brand-tag{ font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--primary-dark); } .eco-brand-note{ margin-top:20px; font-size:13px; font-style:italic; color:var(--muted-light); margin-top: 30px !important; } .eco-system-header{ margin-top:64px; text-align:center; max-width:780px; margin-left:auto; margin-right:auto; } .eco-system-label{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-dark); margin-bottom:10px; } .eco-system-header h3{ font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--secondary); } .eco-system-header p{ margin-top:10px; font-size:14.5px; line-height:1.65; color:var(--muted); } .eco-system-group{ margin-top:36px; } .eco-system-group-title{ display:block; font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--secondary); margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--primary); text-align:left !important; } .eco-system-list{ display:grid; grid-template-columns:repeat(3, 1fr); column-gap:32px; } .eco-system-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); font-size:13px; transition:border-color .25s var(--ease); } .eco-system-row b{ flex-shrink:0; font-family:var(--font-head); font-size:13.5px; font-weight:800; color:var(--secondary); } .eco-system-row span{ flex-shrink:1; min-width:0; font-size:12px; color:var(--muted-light); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .eco-system-row:hover{ border-color:rgba(144,195,34,.5); } .eco-system-row:hover b{ color:var(--primary-dark); } .eco-disclaimer{ margin:40px auto 0; max-width:960px; text-align:center; font-size:12.5px; line-height:1.6; color:var(--muted-light); } /* ---------- Technologies We Build On ---------- */ .eco-stack-grid{ grid-template-columns:repeat(3, 1fr); } /* ---------- Systems We Integrate With ---------- */ .eco-integrate{ background:var(--bg-soft); position:relative; overflow:hidden; } .eco-integrate-cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; } .eco-integrate-panel{ display:flex; flex-direction:column; padding:44px 40px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); } .eco-integrate-title{ font-family:var(--font-head); font-size:22px; font-weight:800; color:var(--secondary); text-align:left !important; } .eco-integrate-intro{ margin-top:12px; font-size:14px; line-height:1.65; color:var(--muted); } .eco-integrate-catgrid{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; column-gap:36px; row-gap:28px; margin-bottom:20px; } .eco-integrate-cat-label{ display:block; font-family:var(--font-head); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--primary-dark); margin-bottom:14px; text-align:left !important; } .eco-integrate-cat-list{ display:flex; flex-direction:column; gap:10px; } .eco-integrate-cat-list li{ list-style:none; font-size:13.5px; line-height:1.4; color:var(--muted); } .eco-disclaimer--panel{ margin-top:auto; padding-top:24px; border-top:1px solid var(--border); max-width:none; text-align:left; } /* ---------- Partner With Us ---------- */ .eco-partner{ background:var(--bg-soft); position:relative; overflow:hidden; } .eco-partner-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .eco-partner-card{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; padding:32px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 16px 36px -26px rgba(0,39,54,.2); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .eco-partner-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1; background:linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .eco-partner-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.3); } .eco-partner-card:hover::before{ transform:scaleX(1); } .eco-partner-num{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--white); background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 22px -6px var(--primary-glow); } .eco-partner-card h3{ margin-top:18px; font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align:left !important; } .eco-partner-card > p{ margin-top:10px; font-size:14px; line-height:1.65; color:var(--muted); margin-bottom: 20px; } .eco-partner-card .eco-relationship-list{ margin-top:auto; padding-top:20px; } .eco-partner-cta{ margin-top:40px; display:flex; justify-content:center; } /* ---------- Responsive ---------- */ @media (max-width: 1100px){ .eco-hero-pillars{ grid-template-columns:1fr 1fr; row-gap:18px; } .eco-principle-layout{ grid-template-columns:1fr; gap:36px; } .eco-relationship-grid{ grid-template-columns:1fr 1fr; } .eco-brand-grid{ grid-template-columns:repeat(3, 1fr); } .eco-system-list{ grid-template-columns:1fr 1fr; } .eco-stack-grid{ grid-template-columns:1fr 1fr; } .eco-integrate-cols{ grid-template-columns:1fr; } .eco-partner-grid{ grid-template-columns:1fr; } } @media (max-width: 900px){ .eco-layer-capgrid{ grid-template-columns:1fr; } .eco-compare-grid{ grid-template-columns:1fr; } } @media (max-width: 700px){ .eco-relationship-grid{ grid-template-columns:1fr; } .eco-brand-grid{ grid-template-columns:1fr 1fr; } .eco-stack-grid{ grid-template-columns:1fr; } .eco-integrate-panel{ padding:32px 26px; } .eco-integrate-catgrid{ grid-template-columns:1fr; row-gap:24px; } .eco-hero-pillars{ grid-template-columns:1fr 1fr; padding:16px 20px; } .eco-principle-mini-grid{ grid-template-columns:1fr; } .eco-principle-panel{ padding:28px 22px; } .eco-layer-caplist{ grid-template-columns:1fr; } } @media (max-width: 560px){ .eco-hero-copy--center .hero-cta{ flex-direction:row; flex-wrap:wrap; } .eco-hero-copy--center .hero-cta .btn{ width:auto; } .eco-hero-trust{ display:none; } .eco-hero-pillars{ grid-template-columns:1fr; } .eco-brand-grid{ grid-template-columns:1fr; } .eco-system-list{ grid-template-columns:1fr; } } /* ========================================================================== Services listing page. Reuses shared sitewide utility classes already defined in style.css (.page-banner, .section-header/.eyebrow/.h2/.sub, .services-grid/ .service-card and friends, .services-banner, .cta-section, .btn) — the same 3-card component the homepage's "What We Do" section already uses, deployed here unchanged so it reads identically everywhere. Only page-specific bits are added below, scoped under services- and engagement- prefixed classes so they can never leak onto (or be affected by) any other page. Load this AFTER style.css. ========================================================================== */ /* Scoped container rule (not a bare .container) — same convention every other listing page on this site uses, so this file can never affect any other page/template. */ .services-hero-banner .container, .services-grid-section .container, .services-engagement-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .services-hero-banner .container, .services-grid-section .container, .services-engagement-section .container{ max-width:1480px; } } @media (min-width:2560px){ .services-hero-banner .container, .services-grid-section .container, .services-engagement-section .container{ max-width:1600px; } } /* ---------- Banner ---------- .page-banner-inner has no built-in max-width of its own (that's normally supplied by a per-page wrapper) — without it the sub copy stretches to the full container width and reads as an oversized, edge-to-edge line. */ .services-hero-banner .page-banner-inner{ max-width:760px; margin:0 auto; text-align:center; } /* ---------- Three core services ---------- .services-grid/.service-card/.service-icon/.practice-list/.service-link are the homepage's own "What We Do" component, reused verbatim. The practice items are plain, non-interactive rows here (no sub-pages to link to) — same markup and classes as the homepage, just
instead of , so the hover crossfade effect is identical either way. */ .services-grid-section{ background:var(--white); } /* ---------- How We Work / engagement steps ---------- */ .services-engagement-section{ background:var(--bg-soft); } .engagement-steps{ margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; } .engagement-step{ position:relative; padding:34px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); } .engagement-step-num{ font-family:var(--font-head); font-size:15px; font-weight:800; letter-spacing:.04em; color:var(--primary-dark); background:var(--bg-soft-2); border-radius:999px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; } .engagement-step h3{ margin-top:18px; font-family:var(--font-head); font-size:19px; font-weight:800; color:var(--secondary); text-align:left !important; } .engagement-step p{ margin-top:10px; font-size:14px; line-height:1.65; color:var(--muted); text-align:left !important; } /* Connecting line between steps at desktop widths — a simple visual cue that these three run in sequence rather than as independent options. */ @media (min-width:901px){ .engagement-step:not(:last-child)::after{ content:''; position:absolute; top:52px; left:calc(100% + 6px); width:16px; height:2px; background:var(--border); } } /* ---------- CTA ---------- #get-started is reused as an id on the industry detail pages too, but each of those loads its own separate CSS file — this file is only ever linked from services-listing.html (or, on WordPress, only enqueued for this page's own template), so a bare #id selector here can never reach another page's markup. Equal top/bottom padding, matching the industries listing page's own CTA spacing. */ #get-started{ padding-top:100px; padding-bottom:100px; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .engagement-steps{ grid-template-columns:1fr; } } /* ========================================================================== Industries listing page. Reuses shared sitewide utility classes already defined in style.css (.page-banner, .stats-row, .section-header/.eyebrow/.h2/.sub, .flagship-section/.flagship-grid/.flagship-card and friends, .cta-section, .btn). Only page-specific bits are added here, scoped under industries-* classes so they can never leak onto other pages. Load this AFTER style.css. ========================================================================== */ /* Scoped container rule (not a bare .container) — same convention every other listing page on this site uses, so this file can never affect any other page/template. */ .industries-banner .container, .industries-flagship .container, .industries-grid-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .industries-banner .container, .industries-flagship .container, .industries-grid-section .container{ max-width:1480px; } } @media (min-width:2560px){ .industries-banner .container, .industries-flagship .container, .industries-grid-section .container{ max-width:1600px; } } /* ---------- Banner ---------- .page-banner-inner has no built-in max-width of its own (that's normally supplied by a per-page wrapper, e.g. .case-banner .page-banner-inner) — without it the sub copy stretches to the full 1360px container and reads as an oversized, edge-to-edge line. Constrained + centered here instead, with extra bottom breathing room now that the banner ends on the sub copy rather than a stats row. */ .industries-banner .page-banner-inner{ max-width:760px; margin:0 auto; text-align:center; } .industries-banner .sub{ margin-bottom:8px; } /* ---------- Flagship spotlight ---------- */ /* .flagship-section/.flagship-grid/.flagship-card/.flagship-icon/etc. are all defined once in style.css and already reused by index.html — deployed here unchanged so the flagship treatment reads identically everywhere. */ .industries-flagship{ background:var(--bg-soft); position:relative; overflow:hidden; } .industries-flagship .flagship-grid{ margin-top:48px; } /* ---------- All-industries grid ---------- Reuses the shared .industries-grid/.industry-tile component already defined once in style.css (built for the services page's industries quick-grid) instead of inventing a new one — style.css even carries a comment warning that the obvious name, .industry-card, is already used elsewhere in the file by an unrelated hidden-by-default carousel component, so reusing it here would silently inherit display:none. Only this section's 3-column layout (vs. the services page's 4-column) and the extra tagline line are added below, scoped to this page's section. */ .industries-grid-section{ background:var(--white); } .industries-grid-section .industries-grid{ margin-top:48px; grid-template-columns:repeat(3, 1fr); gap:28px; } .industries-grid-section .industry-tile{ min-height:auto; padding:36px 30px 32px; } /* text-align:left set directly (not just relied on from layout) for the same reason documented sitewide: an explicit rule always wins over an inherited/default value, so a WordPress theme's blanket centered-heading CSS would otherwise re-center these once pasted into a Raw HTML block. */ .industries-grid-section .industry-tile-title, .industries-grid-section .industry-tile-desc{ text-align:left !important; } /* ---------- CTA ---------- .cta-section's shared padding (96px top/bottom) reads fine when it follows another dark/soft section, but here it follows a plain white .section — the hard white-to-dark edge lands right at the top padding line with no easing, so the heading reads as cramped even though the number matches the bottom. #get-started is reused as an id on other industry pages too, but each of those loads its own separate CSS file — this file is only ever linked from industries-listing.html (or, on WordPress, only enqueued for this page's own template), so a bare #id selector here can never reach another page's markup. Not scoped under a wrapper class (e.g. a body/main class) since WordPress won't carry one over from this static template. */ #get-started{ padding-top:100px; padding-bottom:100px; } /* ---------- Responsive ---------- */ @media (max-width:1100px){ .industries-grid-section .industries-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:700px){ .industries-grid-section .industries-grid{ grid-template-columns:1fr; } .industries-flagship .flagship-grid{ grid-template-columns:1fr; } } /* ========================================================================== How We Measure AI ROI page. Reuses shared sitewide utility classes already defined in style.css (.eyebrow/.h2/.sub + --light variants, .section-header, .value-section/ .value-steps/.value-step (the pre-built 5-step IX Value Engine component, never wired into a page before this one), .faq-panel/.faq-item and friends, .cta-section/.cta-grid/.cta-next-card, .btn, .breadcrumb, .hero-cta). Only page-specific bits are added below, scoped under roi-* classes so they can never leak onto (or be affected by) any other page. Load this AFTER style.css. ========================================================================== */ /* Scoped container rule (not a bare .container) — same convention every other listing/detail page on this site uses, so this file can never affect any other page/template. */ .roi-hero .container, .roi-reasons-section .container, .roi-method-section .container, .roi-metrics-section .container, .roi-honest-section .container, .roi-attribution-section .container, .roi-baseline-section .container, .roi-audience-section .container, .roi-foundry-panel .container, .roi-straight-section .container, .roi-faq-section .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .roi-hero .container, .roi-reasons-section .container, .roi-method-section .container, .roi-metrics-section .container, .roi-honest-section .container, .roi-attribution-section .container, .roi-baseline-section .container, .roi-audience-section .container, .roi-foundry-panel .container, .roi-straight-section .container, .roi-faq-section .container{ max-width:1480px; } } @media (min-width:2560px){ .roi-hero .container, .roi-reasons-section .container, .roi-method-section .container, .roi-metrics-section .container, .roi-honest-section .container, .roi-attribution-section .container, .roi-baseline-section .container, .roi-audience-section .container, .roi-foundry-panel .container, .roi-straight-section .container, .roi-faq-section .container{ max-width:1600px; } } /* ---------- Hero ---------- The standard light .page-banner every listing/detail page on this site uses (radial white-to-soft-green wash), not a custom dark treatment — kept consistent with industries-listing.html / services-listing.html / ai-foundry.html rather than a one-off look. Only the width and the trust-row strip below are page-specific. */ .roi-hero .page-banner-inner{ max-width:920px; margin:0 auto; } .roi-hero .sub{ max-width:760px; margin-left:auto; margin-right:auto; } /* Secondary text-link + arrow, next to a primary button — same shape as the IX AI Foundry hero's "Explore the architecture" link, re-authored under this page's own class so the two never collide. Default color suits a dark background (the "Where It Lives" panel further down this page); the hero itself is light, so it's darkened contextually below. */ .roi-secondary-link{ display:inline-flex; align-items:center; gap:8px; margin-left:8px; font-family:var(--font-head); font-weight:800; font-size:14.5px; color:rgba(255,255,255,.82); transition:color .25s ease, gap .25s ease; } .roi-secondary-link svg{ width:15px; height:15px; transition:transform .3s var(--ease); } .roi-secondary-link:hover{ color:var(--primary-light); gap:12px; } .roi-hero .roi-secondary-link{ color:var(--secondary); } .roi-hero .roi-secondary-link:hover{ color:var(--primary-dark); } /* "Discuss your workflow" needed to read as a real button (global .btn design), not a text link — margin-top only, since .btn-outline-dark's own look is already correct as-is. */ .roi-honest-cta{ margin-top:28px; } /* Trust strip — four centered columns divided by a hairline rather than a left-aligned row, so a title that wraps to two lines never throws its checkmark out of line with its neighbours. */ .roi-trust-row{ margin-top:56px; padding-top:36px; border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(4, 1fr); } .roi-trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 20px; border-left:1px solid var(--border); } .roi-trust-item:first-child{ border-left:none; } .roi-trust-icon{ flex-shrink:0; width:30px; height:30px; margin-bottom:4px; border-radius:50%; background:var(--bg-soft-2); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .roi-trust-icon svg{ width:14px; height:14px; } .roi-trust-item strong{ font-family:var(--font-head); font-size:14.5px; font-weight:800; color:var(--secondary); } .roi-trust-item span{ font-size:13px; color:var(--muted); } /* ---------- Why This Matters (4 reasons) ---------- */ .roi-reasons-section{ background:var(--white); } .roi-reasons-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .roi-reason-card{ position:relative; padding:32px 26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .roi-reason-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(144,195,34,.3); } .roi-reason-num{ display:block; font-family:var(--font-head); font-size:34px; font-weight:800; color:var(--bg-soft-2); -webkit-text-stroke:1.5px rgba(144,195,34,.4); } .roi-reason-card h3{ margin-top:14px; font-family:var(--font-head); font-size:17.5px; font-weight:800; color:var(--secondary); text-align:left !important; } .roi-reason-card p{ margin-top:10px; font-size:13.5px; line-height:1.65; color:var(--muted); text-align:left !important; } /* ---------- The Method ---------- Reuses .value-section/.value-steps/.value-step verbatim (already fully designed, just never previously used on any page) but restacks each step into a horizontal row — icon+number rail on the left, title/desc/ bullets on the right — since these steps carry a bullet list each and read far better full-width than squeezed into a 5-column grid. */ /* .value-section (the shared base class) carries no padding of its own — it was built to sit inside an already-padded wrapper, not stand alone — so unlike every other section on this page (which use the sitewide .section class and its 100px top/bottom), this one had none at all. */ .roi-method-section{ background:var(--bg-soft); padding:100px 0; } .roi-method-steps{ grid-template-columns:1fr; gap:24px; margin-top:52px; } .roi-method-steps::before{ display:none; } .roi-method-steps .value-step{ display:flex; align-items:stretch; gap:36px; padding:44px 48px; isolation:isolate; } .roi-method-steps .value-step::before{ height:4px; } .roi-method-steps .value-step-top{ flex-direction:column; align-items:center; gap:14px; flex-shrink:0; width:100px; padding-right:36px; border-right:1px solid var(--border); justify-content:center; text-align:center; } .roi-method-steps .value-step--result .value-step-top{ border-right-color:rgba(255,255,255,.14); } .roi-method-steps .value-step-icon{ width:52px; height:52px; } .roi-method-steps .value-step-icon svg{ width:24px; height:24px; } .roi-method-steps .value-step-num{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; text-align:center; } .roi-method-steps .value-step-body{ flex:1; min-width:0; padding:2px 0; } .roi-method-steps .value-step-body h3{ margin-top:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; text-align:left !important; } .roi-step-sub{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--muted); text-align:left !important; } .roi-method-steps .value-step--result .roi-step-sub{ color:rgba(255,255,255,.6); } .roi-method-steps .value-step-body p{ margin-top:12px; max-width:760px; text-align:left !important; } .roi-method-steps .value-step-body ul{ margin:26px 0 0; padding-top:22px; border-top:1px solid var(--border); list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 40px; } .roi-method-steps .value-step--result .value-step-body ul{ border-top-color:rgba(255,255,255,.14); } .roi-method-steps .value-step-body ul li{ position:relative; padding-left:20px; font-size:13.5px; line-height:1.5; color:var(--muted); } .roi-method-steps .value-step-body ul li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--primary); } .roi-method-steps .value-step--result .value-step-body ul li{ color:rgba(255,255,255,.68); } .roi-method-steps .value-step--result .value-step-body ul li::before{ background:var(--primary-light); } @media (max-width:900px){ .roi-method-steps .value-step{ flex-direction:column; gap:20px; padding:32px 28px; } .roi-method-steps .value-step-top{ flex-direction:row; width:auto; padding-right:0; padding-bottom:20px; border-right:none; border-bottom:1px solid var(--border); } .roi-method-steps .value-step--result .value-step-top{ border-bottom-color:rgba(255,255,255,.14); } .roi-method-steps .value-step-body ul{ grid-template-columns:1fr; } } /* ---------- What We Measure ---------- */ .roi-metrics-section{ background:var(--white); } .roi-metrics-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; } .roi-metrics-col{ padding:32px 26px; border-left:1px solid var(--border); } .roi-metrics-col:first-child{ border-left:none; } .roi-metrics-icon{ width:44px; height:44px; border-radius:13px; background:linear-gradient(150deg, var(--bg-soft-2), var(--bg-soft)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary-dark); } .roi-metrics-icon svg{ width:21px; height:21px; } .roi-metrics-col h3{ margin-top:18px; font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--secondary); text-align:left !important; } .roi-metrics-col ul{ margin:16px 0 0; padding:0; list-style:none; } .roi-metrics-col ul li{ padding:8px 0; font-size:13.5px; line-height:1.4; color:var(--muted); border-top:1px solid var(--border); } .roi-metrics-col ul li:first-child{ border-top:none; padding-top:0; } @media (max-width:1100px){ .roi-metrics-grid{ grid-template-columns:1fr 1fr; } .roi-metrics-col:nth-child(3){ border-left:none; } .roi-metrics-col:nth-child(odd){ border-left:none; } .roi-metrics-col:nth-child(3), .roi-metrics-col:nth-child(4){ border-top:1px solid var(--border); } } @media (max-width:640px){ .roi-metrics-grid{ grid-template-columns:1fr; } .roi-metrics-col{ border-left:none !important; border-top:1px solid var(--border); } .roi-metrics-col:first-child{ border-top:none; } } /* ---------- The Honest Part ---------- */ .roi-honest-section{ background:var(--bg-soft); } .roi-honest-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; } .roi-honest-copy .sub{ text-align:left !important; } .roi-honest-copy .h2{ text-align:left !important; } .roi-honest-copy .eyebrow{ text-align:left !important; } .roi-ledger{ padding:36px 40px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-lg); } .roi-ledger-row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--border); font-size:14.5px; color:var(--secondary); } .roi-ledger-row span:first-child{ color:var(--muted); } .roi-ledger-row span:last-child{ font-family:var(--font-head); font-weight:800; } .roi-ledger-row--sub{ font-size:13.5px; } .roi-ledger-row--sub span:last-child{ font-weight:700; } .roi-ledger-row--neg span:last-child{ color:var(--muted); } .roi-ledger-row--total{ border-bottom:none; padding-top:20px; margin-top:4px; } .roi-ledger-row--total span:first-child{ font-family:var(--font-head); font-weight:800; color:var(--secondary); font-size:16px; } .roi-ledger-row--total span:last-child{ font-size:26px; color:var(--primary-dark); } .roi-ledger-footnote{ margin-top:20px; font-size:12px; line-height:1.6; color:var(--muted-light); } @media (max-width:900px){ .roi-honest-grid{ grid-template-columns:1fr; gap:40px; } .roi-ledger{ padding:28px 24px; } } /* ---------- Attribution ---------- Back to two columns (not the full-width single column tried earlier). The section header itself is widened below so the h2/sub get more room. The icon-alignment fix stays: icon sits beside the title only, in its own row, so it's vertically centered against a single line of text instead of against the whole two-line title+description block — that's what made it look off before, regardless of column count. */ .roi-attribution-section{ background:var(--white); } .roi-attribution-section .section-header{ max-width:920px; } .roi-checklist-grid{ margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; } .roi-checklist-head{ display:flex; align-items:center; gap:14px; } .roi-check-icon{ flex-shrink:0; width:30px; height:30px; border-radius:9px; background:var(--bg-soft-2); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .roi-check-icon svg{ width:15px; height:15px; } .roi-checklist-item strong{ font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); text-align:left !important; } .roi-checklist-item > span{ display:block; margin-top:8px; margin-left:44px; font-size:13.5px; line-height:1.55; color:var(--muted); text-align:left !important; } @media (max-width:700px){ .roi-checklist-grid{ grid-template-columns:1fr; } } /* ---------- The Baseline ---------- */ .roi-baseline-section{ background:var(--bg-soft); } .roi-baseline-steps{ position:relative; margin-top:48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; } .roi-baseline-steps::before{ content:''; position:absolute; top:14px; left:0; right:calc(15% + 8px); height:2px; z-index:0; background:linear-gradient(90deg, rgba(144,195,34,.15), var(--primary)); } .roi-baseline-step{ position:relative; z-index:1; padding:0 6px; } .roi-baseline-days{ display:inline-flex; align-items:center; justify-content:center; vertical-align:top; height:28px; padding:0 14px; border-radius:999px; font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--white); background:var(--primary-dark); } .roi-baseline-step h3{ margin-top:18px; font-family:var(--font-head); font-size:16.5px; font-weight:800; color:var(--secondary); text-align:left !important; } .roi-baseline-step p{ margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--muted); text-align:left !important; } .roi-callout{ margin-top:40px; padding:24px 32px; border-left:3px solid var(--primary); background:var(--white); border-radius:0 var(--radius-md) var(--radius-md) 0; } .roi-callout p{ margin:0; font-family:var(--font-head); font-size:16px; font-weight:700; line-height:1.5; color:var(--secondary); text-align:left !important; } @media (max-width:900px){ .roi-baseline-steps{ grid-template-columns:1fr 1fr; row-gap:32px; } .roi-baseline-steps::before{ display:none; } } @media (max-width:560px){ .roi-baseline-steps{ grid-template-columns:1fr; } } /* ---------- Reporting (3 audiences) ---------- */ .roi-audience-section{ background:var(--white); } .roi-audience-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; align-items:stretch; } .roi-audience-card{ padding:34px 28px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .roi-audience-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(144,195,34,.3); } .roi-audience-icon{ width:48px; height:48px; border-radius:14px; background:linear-gradient(150deg, var(--primary), var(--primary-dark)); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -6px var(--primary-glow); } .roi-audience-icon svg{ width:22px; height:22px; } .roi-audience-card h3{ margin-top:18px; font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--secondary); text-align:left !important; } .roi-audience-card > p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--muted); text-align:left !important; } .roi-audience-card ul{ margin:18px 0 0; padding:0; list-style:none; } .roi-audience-card ul li{ position:relative; padding:8px 0 8px 18px; font-size:13px; color:var(--muted); border-top:1px solid var(--border); } .roi-audience-card ul li:first-child{ border-top:none; } .roi-audience-card ul li::before{ content:''; position:absolute; left:0; top:16px; width:5px; height:5px; border-radius:50%; background:var(--primary); } @media (max-width:900px){ .roi-audience-grid{ grid-template-columns:1fr; } } /* ---------- Where It Lives ---------- */ .roi-foundry-panel{ position:relative; overflow:hidden; text-align:center; padding:88px 0; background:radial-gradient(120% 160% at 50% 0%, var(--secondary-500) 0%, var(--secondary) 60%, #001019 100%); } .roi-foundry-inner{ max-width:760px; margin:0 auto; } .roi-foundry-links{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; } @media (max-width:560px){ .roi-foundry-panel{ padding:64px 0; } .roi-foundry-links{ flex-direction:column; gap:18px; } } /* ---------- Straight Talk ---------- */ .roi-straight-section{ background:var(--bg-soft); } .roi-straight-list{ margin-top:48px; max-width:880px; margin-left:auto; margin-right:auto; display:flex; flex-direction:column; gap:14px; } .roi-straight-item{ display:flex; align-items:flex-start; gap:18px; padding:22px 26px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--border); } .roi-flag-icon{ flex-shrink:0; width:32px; height:32px; margin-top:1px; border-radius:9px; background:var(--bg-soft-2); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; } .roi-flag-icon svg{ width:16px; height:16px; } .roi-straight-item p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--secondary); text-align:left !important; } /* ---------- FAQ ---------- */ .roi-faq-section{ background:var(--white); } .roi-faq-section .faq-panel{ max-width:820px; margin:0 auto; } .roi-faq-section .faq-list{ margin-top:0; } /* ---------- CTA ---------- #get-started is reused as an id on several other pages, but each of those loads its own separate CSS file — this file is only ever linked from measure-ai-roi.html (or, on WordPress, only enqueued for this page's own template), so a bare #id selector here can never reach another page's markup. */ #get-started{ padding-top:100px; padding-bottom:100px; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .roi-trust-row{ grid-template-columns:1fr 1fr; row-gap:24px; } .roi-trust-item{ border-left:none; } .roi-trust-item:nth-child(odd){ border-right:1px solid var(--border); } .roi-reasons-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .roi-trust-row{ grid-template-columns:1fr; } /* :nth-child(odd) below is needed to beat the 900px breakpoint's own .roi-trust-item:nth-child(odd) border-right rule on specificity — a plain .roi-trust-item selector here loses that fight even though it comes later in the file, which is what let a leftover vertical line show up on the 1st/3rd items once the layout drops to 1 column. */ .roi-trust-item, .roi-trust-item:nth-child(odd){ border-right:none; padding:20px 0 0; border-top:1px solid var(--border); } .roi-trust-item:first-child{ border-top:none; padding-top:0; } .roi-reasons-grid{ grid-template-columns:1fr; } /* Base .hero-cta centers its row (justify-content + align-items:center) at every other width — stacking to a column here without keeping center alignment broke that consistency, leaving the button flush left while the centered heading/sub above it stayed centered. */ .roi-hero .hero-cta{ flex-direction:column; align-items:center; gap:16px; } .roi-hero .roi-secondary-link{ margin-left:0; } } /* ========================================================================== Sitewide contact modal ("Talk to an AI Expert" popup) — v3. Immersive single-column dark card with a pulsing "online" badge for urgency, and floating-label inputs instead of static labels. Everything here is namespaced under an "ix-" prefix (ix-modal-*, ix-field*, ix-sticky-cta, data-ix-modal*) instead of generic names like .modal-overlay/.is-open/data-toggle="modal" — this file and its markup will live alongside the real WordPress theme once migrated, and the theme (or an old Bootstrap-based popup still on the site) may already own those generic names/attributes. Bootstrap in particular binds its own JS to [data-toggle="modal"] / [data-dismiss="modal"] — reusing those exact attributes would let Bootstrap's modal script hijack this markup if it's ever loaded on the same page. The "ix-" prefix keeps this component fully independent of both. Opened by any [data-ix-modal="#ix-contact-modal"] trigger (the header CTA button and the sticky corner button both carry this) via the vanilla open/close logic in main.js. The embedded Zoho form is scoped under .ix-modal-inner selectors (never bare .zf-*), the same convention .contact-form-panel already documents in style.css: Zoho's own script reuses these class names verbatim on other embeds, so unscoped rules here would leak this theme onto those. Loaded on every page, after style.css. ========================================================================== */ body.ix-modal-active{ overflow:hidden; } .ix-modal-overlay{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,20,28,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s; } .ix-modal-overlay.ix-open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease), visibility 0s linear 0s; } .ix-modal-card{ position:relative; overflow:hidden; width:100%; max-width:640px; max-height:96vh; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; border-radius:var(--radius-lg); background:radial-gradient(130% 160% at 50% -10%, var(--secondary-500) 0%, var(--secondary) 55%, #001019 100%); box-shadow:0 40px 100px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); transform:translateY(24px) scale(.97); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease); } .ix-modal-card::-webkit-scrollbar{ display:none; } .ix-modal-overlay.ix-open .ix-modal-card{ transform:translateY(0) scale(1); opacity:1; } .ix-modal-close{ position:absolute; top:18px; right:18px; z-index:3; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .25s ease, transform .25s ease, border-color .25s ease; } .ix-modal-close svg{ width:15px; height:15px; } .ix-modal-close:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); transform:rotate(90deg); } .ix-modal-layout{ display:block; } .ix-modal-trustpanel{ display:none; } .ix-modal-inner{ position:relative; z-index:1; padding:36px 44px 30px; } /* ---------- Head ---------- */ .ix-modal-head{ text-align:center; margin-bottom: 14px; } .ix-modal-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px 7px 12px; border-radius:999px; background:rgba(144,195,34,.12); border:1px solid rgba(144,195,34,.3); font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--primary-light); } .ix-modal-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--primary-light); flex-shrink:0; } .ix-modal-dot::before{ content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--primary-light); animation:ixModalPulse 1.8s var(--ease) infinite; } @keyframes ixModalPulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(2.2); opacity:0; } } .ix-modal-head h3{ margin-top:14px; font-family:var(--font-head); font-size:clamp(22px,3vw,28px); font-weight:800; line-height:1.25; color:var(--white); } .ix-modal-head h3 .accent{ color:var(--primary-light); } .ix-modal-head p{ margin-top:8px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.62); max-width:440px; margin-left:auto; margin-right:auto; } /* ---------- Form ---------- */ .ix-modal-inner .zf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:0px; } .ix-modal-inner .zf-row:first-child{ margin-top:0; } .ix-modal-inner .zf-group{ display:flex; flex-direction:column; gap:6px; align-items: flex-start; } .ix-modal-inner .zf-group.zf-full{ grid-column:1 / -1; } /* Floating labels: label sits centered over the input at rest, then lifts into a small caption above it once the field is focused or has a value — driven purely by :placeholder-shown (needs a non-empty placeholder, hence placeholder=" " in the markup) so no JS is required. */ .ix-field{ position:relative; } .ix-field label{ position:absolute; left:14px; top:12px; z-index:1; font-size:14px; font-weight:600; color:rgba(255,255,255,.45); pointer-events:none; transform-origin:left top; transition:transform .2s var(--ease), color .2s ease, top .2s var(--ease); } .ix-field label .req{ color:var(--primary-light); } .ix-field .zf-input:focus + label, .ix-field .zf-input:not(:placeholder-shown) + label{ top:5px; transform:scale(.72); color:var(--primary-light); } .ix-field .zf-input{ padding-top:23px; padding-bottom:5px; } .ix-field--textarea .zf-input{ padding-top:25px; padding-bottom:5px; } .ix-field--select label{ position:static; display:block; margin-bottom:0px; transform:none; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:rgba(255,255,255,.5); line-height: 18px; } .ix-modal-inner .zf-input{ width:100%; height:48px !important; min-height:48px !important; box-sizing:border-box !important; background-color:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:10px; padding-left:14px; padding-right:14px; font-size:14px; line-height:1.3; color:var(--white) !important; font-family:inherit; transition:border-color .3s ease, background .3s ease, box-shadow .3s ease; } .ix-modal-inner .zf-input::placeholder{ color:transparent; } .ix-modal-inner .zf-input:focus{ outline:none; border-color:var(--primary); background-color:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(144,195,34,.18); } .ix-modal-inner select.zf-input{ height:44px !important; min-height:44px !important; padding:8px 38px 8px 12px; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b7e156' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px 8px !important; } .ix-modal-inner select.zf-input option{ color:var(--secondary); background:var(--white); } .ix-modal-inner .zf-textarea{ height:auto !important; min-height:72px !important; resize:vertical; } .ix-modal-inner .zf-err{ display:none; margin-top:2px; font-size:12px; color:#ff9d9d; } .ix-modal-inner .zfRecap{ min-height:50px; margin-top:4px; border-radius:12px; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); font-size:12.5px; text-align:center; padding:0 0; } .ix-modal-inner .zf-btn-submit{ width:100%; margin-top:3px; padding:13px 26px; border-radius:var(--radius-full); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); font-weight:800; font-size:15px; font-family:inherit; transition:box-shadow .3s var(--ease), transform .3s var(--ease), filter .3s ease; box-shadow:0 12px 30px -6px rgba(144,195,34,.5); } /* The live submit handler (intellectyx-main.js) checks the exact clicked element (e.target.classList.contains("zfSubmitBtn")), not its closest ancestor — so a click landing on this button's own / children (which is most of its visible clickable area) resolves e.target to that child, not the button, and the handler silently no-ops. pointer-events:none on the children makes the browser report every click's target as the button itself, regardless of where inside it you click. */ .ix-modal-inner .zf-btn-submit > *{ pointer-events:none; } .ix-modal-inner .zf-btn-submit svg{ width:16px; height:16px; transition:transform .3s var(--ease); } .ix-modal-inner .zf-btn-submit:hover{ filter:brightness(1.08); box-shadow:0 16px 36px -6px rgba(144,195,34,.65); transform:translateY(-2px); } .ix-modal-inner .zf-btn-submit:hover svg{ transform:translateX(3px); } /* ---------- Trust row ---------- */ .ix-modal-trust{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.5); text-align:center; } .ix-modal-trust-avatars{ display:flex; } .ix-modal-trust-avatar{ width:26px; height:26px; border-radius:50%; border:2px solid var(--secondary); margin-left:-8px; } .ix-modal-trust-avatars .ix-modal-trust-avatar:first-child{ margin-left:0; } /* ---------- Trust panel — desktop split layout only (≥920px) ---------- Below 920px the aside is hidden entirely and .ix-modal-inner runs full width exactly as before, so all the compact-field/viewport-fit work on mobile and small tablets is untouched. Declared after the base .ix-modal-trust rule above so this media query's override actually wins the cascade (equal specificity, so source order decides). */ @media (min-width:920px){ .ix-modal-card{ max-width:900px; } .ix-modal-layout{ display:flex; align-items:stretch; } .ix-modal-inner{ flex:1 1 auto; min-width:0; padding:36px 34px 30px; } .ix-modal-trust{ display:none; } .ix-modal-trustpanel{ display:flex; flex-direction:column; justify-content:space-between; gap:22px; width:420px; flex-shrink:0; padding:36px 32px; box-sizing:border-box; background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.3) 100%); border-right:1px solid rgba(255,255,255,.08); } .ix-modal-trustpanel > div:first-child{ margin-top:14px; } .ix-modal-trustpanel-eyebrow{ display:block; text-align:center; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:28px; } /* Logo marquee — a locally-named keyframe (ixTrustMarquee, not the sitewide "marquee" used by .marquee-track in style.css) since both stylesheets load on every page; reusing that name would silently let whichever file loads last override the other's animation everywhere. */ .ix-modal-trustpanel-logos{ overflow:hidden; margin:0 -4px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .ix-modal-trustpanel-logos-track{ display:flex; align-items:center; gap:26px; width:max-content; animation:ixTrustMarquee 60s linear infinite; } .ix-modal-trustpanel-logos-track img{ height:32px; width:100px; max-width:none; flex-shrink:0; object-fit:contain; filter:grayscale(1) invert(1) brightness(1.35); mix-blend-mode:screen; opacity:.7; } @keyframes ixTrustMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Testimonial carousel — visually highlighted as its own card (accent left border + tinted background) so it reads as the centerpiece of the trust panel rather than blending into the surrounding dark aside. */ .ix-modal-testimonial{ position:relative; margin:0; padding:18px 18px 16px 20px; background:linear-gradient(135deg, rgba(144,195,34,.14) 0%, rgba(144,195,34,.03) 100%); border:1px solid rgba(144,195,34,.22); border-left:3px solid var(--primary-light); border-radius:12px; } .ix-modal-testimonial-mark{ display:block; width:24px; height:19px; color:rgba(144,195,34,.6); margin-bottom:8px; } .ix-modal-testimonial-slides{ position:relative; min-height:168px; } .ix-modal-testimonial-slide{ display:none; margin:0; padding: 0; } .ix-modal-testimonial-slide.is-active{ display:block; animation:ixTestimonialIn .35s var(--ease); } .ix-modal-testimonial-slide p{ margin:0; font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.88); font-weight:500; } .ix-modal-testimonial-slide footer{ display:flex; align-items:center; gap:10px; margin-top:14px; } .ix-modal-testimonial-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; border:2px solid rgba(144,195,34,.45); } .ix-modal-testimonial-slide footer > div{ display:flex; flex-direction:column; gap:2px; } .ix-modal-testimonial-slide footer strong{ display:block; margin-bottom:0px; font-size:12.5px; color:var(--white); font-weight:700; } .ix-modal-testimonial-slide footer span{ display:block; font-size:11px; line-height:1.35; color:rgba(255,255,255,.55); } @keyframes ixTestimonialIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } } .ix-modal-testimonial-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; } .ix-modal-testimonial-arrow{ width:24px; height:24px; flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .2s ease, border-color .2s ease, color .2s ease; } .ix-modal-testimonial-arrow svg{ width:11px; height:11px; } .ix-modal-testimonial-arrow:hover{ background:rgba(144,195,34,.2); border-color:rgba(144,195,34,.5); color:var(--primary-light); } .ix-modal-testimonial-dots{ display:flex; gap:5px; } .ix-modal-testimonial-dots button{ width:5px; height:5px; border-radius:50%; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.25); transition:background .2s ease, transform .2s ease; } .ix-modal-testimonial-dots button.is-active{ background:var(--primary-light); transform:scale(1.4); } /* Stats — exactly 4 figures, a clean 2x2 grid needs no special alignment handling (unlike the earlier 5-stat 3-column layout). */ .ix-modal-trustpanel-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px 12px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); } .ix-modal-trustpanel-stats div{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; } .ix-modal-trustpanel-stats strong{ font-size:23px; font-weight:800; color:var(--primary-light); font-family:var(--font-head); line-height:1; } .ix-modal-trustpanel-stats span{ font-size:11px; line-height:1.3; color:rgba(255,255,255,.5); font-weight:600; } } /* ---------- Responsive ---------- */ @media (max-width:640px){ .ix-modal-inner{ padding:32px 24px 24px; } .ix-modal-inner .zf-row{ grid-template-columns:1fr; } .ix-modal-inner .zf-input{ height:42px !important; min-height:42px !important; } .ix-modal-inner select.zf-input{ height:36px !important; min-height:36px !important; } .ix-modal-inner .zf-textarea{ min-height:56px !important; } .ix-field .zf-input{ padding-top:19px; padding-bottom:3px; } .ix-field--textarea .zf-input{ padding-top:21px; padding-bottom:3px; } .ix-field label{ top:12px; } .ix-field .zf-input:focus + label, .ix-field .zf-input:not(:placeholder-shown) + label{ top:4px; } } @media (max-width:560px){ .ix-modal-overlay{ padding:0; } .ix-modal-card{ max-height:100vh; height:100%; border-radius:0; } .ix-modal-close{ top:14px; right:14px; } .ix-modal-trust{ flex-direction:column; gap:8px; } } @media (max-height:720px){ .ix-modal-head{ margin-bottom: 14px; } .ix-modal-badge{ display:none; } .ix-modal-head h3{ margin-top:0; } } /* ========================================================================== Sticky corner trigger — always-visible floating button that opens the same #ix-contact-modal via [data-ix-modal]. Sits well under the modal's own z-index (100000) so it's covered automatically whenever the modal is open. A rounded avatar bubble with a pulsing "online" dot (the same live-availability cue as the modal's own badge), a soft breathing glow, an occasional light sweep, a gentle idle nudge, and a one-time greeting tooltip (shown/dismissed via main.js, localStorage-gated so repeat visitors aren't pestered) work together to earn a first click without reading as a hard, busy blinking outline. ========================================================================== */ .ix-sticky-wrap{ position:fixed; right:24px; bottom:24px; z-index:9990; display:flex; flex-direction:column; align-items:flex-end; gap:12px; } .ix-sticky-cta{ position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; padding:6px 24px 6px 6px; border:none; cursor:pointer; border-radius:var(--radius-full); background:linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); font-family:inherit; font-weight:800; font-size:14.5px; white-space:nowrap; box-shadow:0 12px 28px -8px rgba(144,195,34,.55), 0 0 0 1px rgba(255,255,255,.08); transition:transform .25s var(--ease), box-shadow .25s ease, opacity .2s ease, visibility .2s ease; animation:ixStickyIn .6s var(--ease) .3s both, ixStickyGlow 3.4s ease-in-out 1s infinite, ixStickyNudge 7s ease-in-out 2.5s infinite; } .ix-sticky-cta::after{ content:''; position:absolute; top:0; left:-45%; width:30%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); animation:ixStickyShine 4.5s ease-in-out 1.4s infinite; pointer-events:none; } .ix-sticky-avatar{ position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); } .ix-sticky-avatar svg{ width:18px; height:18px; color:var(--white); } .ix-sticky-dot{ position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 2.5px var(--primary-dark); } .ix-sticky-dot::before{ content:''; position:absolute; inset:0; border-radius:50%; background:#3ddc84; animation:ixModalPulse 1.8s var(--ease) infinite; } .ix-sticky-cta:hover{ transform:translateY(-3px) scale(1.02) !important; box-shadow:0 18px 38px -8px rgba(144,195,34,.75), 0 0 0 1px rgba(255,255,255,.12) !important; background:linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%); color:var(--white); } .ix-sticky-cta:active{ transform:translateY(-1px) scale(1); } body.ix-modal-active .ix-sticky-wrap{ opacity:0; visibility:hidden; pointer-events:none; } @keyframes ixStickyIn{ 0%{ transform:translateY(30px) scale(.85); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } } @keyframes ixStickyGlow{ 0%, 100%{ box-shadow:0 12px 28px -8px rgba(144,195,34,.55), 0 0 0 1px rgba(255,255,255,.08); } 50%{ box-shadow:0 12px 36px -6px rgba(144,195,34,.85), 0 0 0 1px rgba(255,255,255,.14); } } @keyframes ixStickyShine{ 0%, 30%{ left:-45%; } 60%, 100%{ left:130%; } } @keyframes ixStickyNudge{ 0%, 88%, 100%{ transform:translateY(0); } 91%{ transform:translateY(-6px); } 94%{ transform:translateY(0); } 97%{ transform:translateY(-3px); } } /* ---------- Greeting tooltip ---------- */ .ix-sticky-tip{ position:relative; display:flex; align-items:center; gap:10px; max-width:250px; padding:14px 16px 14px 18px; background:var(--bg-soft); color:var(--secondary); border-radius:16px; border:1px solid rgba(144,195,34,.5); font-size:13.5px; font-weight:700; line-height:1.45; box-shadow:0 18px 44px -14px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.05); opacity:0; visibility:hidden; transform:translateY(10px) scale(.95); transform-origin:bottom right; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; } .ix-sticky-tip::after{ content:''; position:absolute; right:30px; bottom:-7px; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:8px solid var(--bg-soft); } .ix-sticky-tip.is-visible{ opacity:1; visibility:visible; transform:translateY(0) scale(1); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear 0s; } .ix-sticky-tip-close{ flex-shrink:0; width:20px; height:20px; border:none; border-radius:50%; background:rgba(0,20,28,.07); color:var(--secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .ix-sticky-tip-close svg{ width:10px; height:10px; } .ix-sticky-tip-close:hover{ background:rgba(0,20,28,.14); } @media (max-width:640px){ .ix-sticky-wrap{ right:16px; bottom:16px; } .ix-sticky-cta{ padding:5px; box-shadow:0 10px 26px -6px rgba(144,195,34,.55), 0 0 0 1px rgba(255,255,255,.08); } .ix-sticky-label{ display:none; } .ix-sticky-tip{ max-width:220px; font-size:13px; padding:13px 14px 13px 16px; } .ix-sticky-tip::after{ right:24px; } } @media (prefers-reduced-motion:reduce){ .ix-sticky-cta{ animation:none; } .ix-sticky-cta::after{ display:none; } } /* ========================================================================== Single Case Study page — bespoke, standalone design (not the shared .page-banner pattern used by other interior pages). Reuses shared tokens/utilities from style.css (colors, .btn, .cta-section, .eyebrow, .h2) but every layout piece here is scoped under .cs-* / .single-case- study-page so nothing leaks onto other pages. Load this AFTER style.css and ix-contact-modal.css. Design language: light, airy sections with soft gradient blobs and glass-panel cards instead of flat bordered boxes; a recurring "ring" motif (hero visual, result hero tile) ties sections together; the Problem/Approach diagrams use floating icon chips + a glowing hub instead of plain circles-and-lines. ========================================================================== */ .single-case-study-page{ background:var(--white); } .single-case-study-page .container{ width:100%; max-width:1360px; margin:0 auto; padding:0 15px; } @media (min-width:1600px){ .single-case-study-page .container{ max-width:1480px; } } @media (min-width:2560px){ .single-case-study-page .container{ max-width:1600px; } } /* ---------- Hero (centered, static mesh-gradient background, no canvas) ---------- */ .cs-hero{ position:relative; overflow:hidden; padding:220px 0 100px; text-align:center; background: radial-gradient(1.5px 1.5px at 24px 24px, rgba(0,39,54,.07) 1.5px, transparent 0), radial-gradient(52% 60% at 14% 8%, rgba(144,195,34,.18), transparent 70%), radial-gradient(55% 62% at 88% 0%, rgba(13,74,95,.14), transparent 70%), radial-gradient(60% 55% at 50% 108%, rgba(183,225,86,.22), transparent 70%), var(--white); background-size:26px 26px, auto, auto, auto, auto; color:var(--secondary); } .cs-hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:1000px; margin:0 auto; } .cs-hero-copy{ display:flex; flex-direction:column; align-items:center; max-width:1000px; } .cs-breadcrumb{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:28px; } .cs-breadcrumb a{ color:var(--secondary); text-decoration:none; transition:color .2s ease; } .cs-breadcrumb a:hover{ color:var(--primary-dark); } .cs-breadcrumb span{ color:var(--border); } .cs-breadcrumb-current{ color:var(--muted) !important; } .cs-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; background:rgba(144,195,34,.1); border:1px solid rgba(144,195,34,.3); font-family:var(--font-head); font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark); margin-bottom:24px; } .cs-hero-eyebrow svg{ width:14px; height:14px; } .cs-hero-title{ font-family:var(--font-head); font-size:clamp(30px,4.4vw,50px); font-weight:800; line-height:1.18; color:var(--secondary); text-align:center !important; margin:0; } .cs-hero-client{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding:8px 18px 8px 10px; border-radius:999px; background:var(--white); border:1px solid var(--border); box-shadow:0 10px 24px -16px rgba(0,39,54,.2); font-size:14px; font-weight:700; color:var(--secondary); } .cs-hero-client-icon{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--primary); color:var(--white); flex-shrink:0; } .cs-hero-client-icon svg{ width:13px; height:13px; } .cs-hero-summary{ margin:20px auto 0; max-width:700px; font-size:17px; line-height:1.7; color:var(--muted); text-align:center !important; } .cs-hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px; } /* ---------- Problem / Approach — plain heading + paragraph, no visuals ---------- */ .cs-story-section{ padding:100px 0; } .cs-story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .cs-story-card{ position:relative; overflow:hidden; padding:44px 40px; border-radius:28px; border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .cs-story-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(0,39,54,.25); } .cs-story-card--problem{ background:linear-gradient(160deg, #fdf6e6 0%, var(--white) 62%); } .cs-story-card--approach{ background:linear-gradient(160deg, #edf6e1 0%, var(--white) 62%); } .cs-story-icon{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; margin-bottom:24px; } .cs-story-card--problem .cs-story-icon{ background:linear-gradient(150deg,#eab63f,#c9871c); box-shadow:0 12px 24px -8px rgba(201,135,28,.4); } .cs-story-card--approach .cs-story-icon{ background:linear-gradient(150deg, var(--primary), var(--primary-dark)); box-shadow:0 12px 24px -8px var(--primary-glow); } .cs-story-icon svg{ width:24px; height:24px; stroke:var(--white); fill:none; } .cs-story-card h2{ position:relative; z-index:1; text-align:left !important; } .cs-story-card p{ position:relative; z-index:1; margin-top:16px; font-size:15.5px; line-height:1.75; color:var(--muted); text-align:left !important; } /* ---------- Section header (shared by agents / stack / results) ---------- */ .cs-section-header{ max-width:700px; margin-bottom:44px; } .cs-section-header h2{ margin-top:12px; text-align:left !important; } .cs-section-header p{ margin-top:12px; font-size:15.5px; line-height:1.65; color:var(--muted); text-align:left !important; } /* ---------- Agents grid ---------- */ .cs-agents-section{ padding:100px 0; background:var(--bg-soft); } .cs-agents-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } .cs-agents-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; } .cs-agents-grid .cs-agent-card{ flex:0 1 calc(33.333% - 14px); min-width:0; } .cs-agent-card{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; gap:16px; padding:26px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 12px 28px -22px rgba(0,39,54,.18); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .cs-agent-card::after{ content:''; position:absolute; top:0; left:0; bottom:0; width:3px; z-index:0; background:linear-gradient(180deg, var(--primary-light), var(--primary-dark)); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease); } .cs-agent-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .cs-agent-card:hover::after{ transform:scaleY(1); } .cs-agent-icon{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-shrink:0; width:48px; height:48px; border-radius:13px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 20px -6px var(--primary-glow); } .cs-agent-icon svg{ width:22px; height:22px; stroke:var(--white); } .cs-agent-name{ position:relative; z-index:1; font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); line-height:1.4; } /* ---------- Decorative section divider ---------- */ .cs-divider{ position:relative; z-index:1; background:var(--bg-soft); } .cs-divider-inner{ display:flex; align-items:center; justify-content:center; gap:14px; max-width:1360px; margin:0 auto; padding:0 15px; } .cs-divider-line{ flex:1; max-width:220px; height:1px; border:none; background:linear-gradient(90deg, transparent, var(--border) 50%, transparent); } .cs-divider-diamond{ flex-shrink:0; width:11px; height:11px; border-radius:3px; background:linear-gradient(150deg, var(--primary), var(--primary-dark)); box-shadow:0 0 0 6px var(--white), 0 0 0 7px var(--border), 0 8px 16px -6px var(--primary-glow); transform:rotate(45deg); } /* ---------- Product showcase — tabbed browser-frame gallery ---------- */ .cs-showcase-section{ padding:100px 0; background:var(--bg-soft); } .cs-showcase{ margin-top:44px; display:grid; grid-template-columns:340px 1fr; gap:32px; align-items:start; } .cs-showcase-tabs{ display:flex; flex-direction:column; gap:10px; } .cs-showcase-tab{ display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; padding:18px 20px; border-radius:16px; background:var(--white); border:1px solid var(--border); cursor:pointer; font-family:inherit; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; } .cs-showcase-tab:hover{ border-color:rgba(144,195,34,.35) !important; background: var(--white); } .cs-showcase-tab.is-active{ border: 1px solid var(--primary) !important; background:linear-gradient(160deg,#f2f8e9,var(--white)); box-shadow:0 14px 30px -20px rgba(0,39,54,.25); } .cs-showcase-tab-num{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--bg-soft); font-family:var(--font-head); font-size:12px; font-weight:800; color:var(--muted); transition:background .25s ease, color .25s ease; } .cs-showcase-tab.is-active .cs-showcase-tab-num{ background:var(--primary); color:var(--white); } .cs-showcase-tab strong{ display:block; font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--secondary); } .cs-showcase-tab small{ display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--muted); } .cs-showcase-frame{ position:relative; } .cs-browser-chrome{ display:flex; align-items:center; gap:6px; padding:14px 18px; border-radius:16px 16px 0 0; background:var(--secondary); } .cs-browser-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); } .cs-browser-dot:nth-child(1){ background:#e2554a; } .cs-browser-dot:nth-child(2){ background:#e2b04a; } .cs-browser-dot:nth-child(3){ background:#5fbf6c; } .cs-browser-url{ margin-left:10px; padding:5px 14px; border-radius:999px; background:rgba(255,255,255,.08); font-size:11.5px; font-weight:600; color:rgba(255,255,255,.6); } .cs-showcase-imgs{ position:relative; overflow:hidden; border-radius:0 0 20px 20px; border:1px solid var(--border); border-top:none; box-shadow:0 40px 80px -40px rgba(0,39,54,.35); background:var(--white); aspect-ratio:16/9; } .cs-showcase-imgs img{ display:none; width:100%; height:100%; object-fit:cover; object-position:top; } .cs-showcase-imgs img.is-active{ display:block; animation:csShowcaseIn .4s var(--ease); } @keyframes csShowcaseIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } /* ---------- Technology stack ---------- */ .cs-stack-section{ padding:100px 0; } .cs-stack-grid{ display:flex; flex-wrap:wrap; justify-content:left; gap:16px; } .cs-stack-grid .cs-stack-tile{ flex:0 1 calc(20% - 13px); min-width:0; } .cs-stack-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:26px 14px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--border); box-shadow:0 12px 28px -22px rgba(0,39,54,.18); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .cs-stack-tile:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -22px rgba(0,39,54,.28); border-color:rgba(144,195,34,.35); } .cs-stack-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; background:linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 10px 20px -6px var(--primary-glow); } .cs-stack-icon img{ width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(1); } .cs-stack-icon svg{ width:20px; height:20px; stroke:var(--white); fill:none; } .cs-stack-name{ font-family:var(--font-head); font-size:13px; font-weight:800; color:var(--secondary); } /* ---------- Results — modern bento grid on dark, glass tiles ---------- */ .cs-results-section{ padding:100px 0; background:var(--secondary); position:relative; overflow:hidden; } .cs-results-section::before{ content:''; position:absolute; width:520px; height:520px; z-index:0; pointer-events:none; top:-220px; right:-160px; background:radial-gradient(circle, rgba(144,195,34,.18), transparent 70%); } .cs-results-section::after{ content:''; position:absolute; width:420px; height:420px; z-index:0; pointer-events:none; bottom:-200px; left:-140px; background:radial-gradient(circle, rgba(144,195,34,.08), transparent 70%); } .cs-results-section .cs-section-header{ position:relative; z-index:1; } .cs-results-section .eyebrow{ color:var(--primary-light); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); } .cs-results-section .cs-section-header h2{ color:var(--white); } .cs-results-section .cs-section-header p{ color:rgba(255,255,255,.65); } .cs-results-grid{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; } .cs-results-grid .cs-result-tile{ flex:0 1 calc(33.333% - 12px); min-width:0; } .cs-result-tile{ position:relative; overflow:hidden; padding:30px 28px; border-radius:22px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .cs-result-tile:hover{ transform:translateY(-5px); background:rgba(255,255,255,.075); border-color:rgba(144,195,34,.4); } .cs-result-tile--stat{ background:linear-gradient(150deg, rgba(144,195,34,.16), rgba(144,195,34,.02)); border-color:rgba(144,195,34,.32); } .cs-result-badge{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; margin-bottom:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); transition:background .3s var(--ease), border-color .3s var(--ease); } .cs-result-badge::before{ content:''; width:10px; height:10px; border-radius:50%; background:var(--primary-light); box-shadow:0 0 0 5px rgba(144,195,34,.22); } .cs-result-tile:hover .cs-result-badge{ background:var(--primary); border-color:transparent; } .cs-result-tile:hover .cs-result-badge::before{ background:var(--white); box-shadow:0 0 0 5px rgba(255,255,255,.28); } .cs-result-num{ display:block; font-family:var(--font-head); font-size:22px; font-weight:800; color:var(--primary-light); } .cs-result-num--stat{ font-size:clamp(38px,4.2vw,48px); } .cs-result-label{ margin-top:10px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.68); } /* ---------- Explore more — full-bleed continuation strip ---------- */ .cs-explore-section{ position:relative; overflow:hidden; padding:80px 0; text-align:center; background: radial-gradient(50% 160% at 50% 0%, rgba(144,195,34,.16), transparent 65%), var(--secondary); } .cs-explore-section::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(1.5px 1.5px at 20px 20px, rgba(255,255,255,.08) 1.5px, transparent 0); background-size:26px 26px; -webkit-mask-image:radial-gradient(60% 100% at 50% 0%, #000 0%, transparent 80%); mask-image:radial-gradient(60% 100% at 50% 0%, #000 0%, transparent 80%); } .cs-explore-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; } .cs-explore-icon{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:20px; border-radius:16px; background:rgba(144,195,34,.14); border:1px solid rgba(144,195,34,.35); } .cs-explore-icon svg{ width:24px; height:24px; stroke:var(--primary-light); fill:none; } .cs-explore-section .eyebrow{ display:inline-flex; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--primary-light); } .cs-explore-section h2{ margin-top:16px; max-width:740px; color:var(--white); } .cs-explore-section p{ margin:16px auto 0; max-width:520px; font-size:16px; line-height:1.7; color:rgba(255,255,255,.62); } .cs-explore-section .btn{ margin-top:32px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:0 16px 36px -12px var(--primary-glow), 0 0 0 1px rgba(255,255,255,.08) inset; } .cs-explore-section .btn:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -12px var(--primary-glow), 0 0 0 1px rgba(255,255,255,.12) inset; } .cs-explore-section--soft{ background: radial-gradient(50% 160% at 50% 0%, rgba(144,195,34,.12), transparent 65%), var(--bg-soft); } .cs-explore-section--soft::before{ background-image:radial-gradient(1.5px 1.5px at 20px 20px, rgba(0,39,54,.07) 1.5px, transparent 0); } .cs-explore-section--soft .cs-explore-icon{ background:rgba(144,195,34,.12); border-color:rgba(144,195,34,.3); } .cs-explore-section--soft .cs-explore-icon svg{ stroke:var(--primary-dark); } .cs-explore-section--soft .eyebrow{ background:var(--bg-soft-2); border-color:var(--border); color:var(--secondary); } .cs-explore-section--soft h2{ color:var(--secondary); } .cs-explore-section--soft p{ color:var(--muted); } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .cs-agents-grid .cs-agent-card{ flex-basis:calc(50% - 10px); } .cs-stack-grid .cs-stack-tile{ flex-basis:calc(33.333% - 11px); } .cs-showcase{ grid-template-columns:1fr; } .cs-showcase-tabs{ flex-direction:row; flex-wrap:wrap; } .cs-showcase-tab{ width:calc(50% - 5px); } .cs-results-grid .cs-result-tile{ flex-basis:calc(50% - 9px); } } @media (max-width:860px){ .cs-story-grid{ grid-template-columns:1fr; } } @media (max-width:640px){ .cs-showcase-tab{ width:100%; } } @media (max-width:720px){ .cs-hero{ padding:150px 0 60px; } .cs-story-card{ padding:36px 28px; } .cs-agents-grid .cs-agent-card{ flex-basis:100%; } .cs-stack-grid .cs-stack-tile{ flex-basis:calc(50% - 8px); } .cs-results-grid .cs-result-tile{ flex-basis:100%; } .cs-explore-section{ padding:60px 0; } }