/* ========================================================================= Qubetech — main stylesheet Design system v2: layout/composition rebuilt from the original qubetech.us site's section richness, modernized. Hand-written, no build step. ========================================================================= */ /* ---- Fonts (self-hosted, variable) -------------------------------------- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Montserrat-Variable.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/Montserrat-Italic-Variable.woff2') format('woff2'); } /* ---- Design tokens -------------------------------------------------------*/ :root { /* Exact brand values, pulled from the original site's Elementor global Kit. */ --brand-navy: #002169; --brand-red: #CA0D2E; --navy-950: #050E33; --navy-900: #071A4D; --navy-800: #002169; --navy-700: #0B2E85; --navy-600: #16409E; --red-900: #5C0916; --red-800: #8C0A1F; --red-700: #A50B26; --red-600: #CA0D2E; --red-500: #E01536; --ink-900: #000000; --slate-600:#4B5162; --slate-400:#8A90A3; --mist-100: #F4F4F4; --mist-200: #ECEEF6; --line-200: #E4E6EF; --white: #FFFFFF; --fog-300: #B7BCD6; --hairline-dark: rgba(255,255,255,.08); --hairline-dark-2: rgba(255,255,255,.14); --grad-red: linear-gradient(135deg, var(--red-900) 0%, var(--red-600) 55%, var(--red-700) 100%); --grad-navy: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%); --grad-navy-red: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--red-700) 130%); --font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif; --font-body: 'Montserrat', 'Segoe UI', Arial, sans-serif; /* Matches the Kit's Primary (h1) / Secondary (h2) global typography exactly. */ --fs-h1: clamp(2.5rem, 4.6vw, 3.75rem); --fs-h2: clamp(1.875rem, 3.8vw, 3.125rem); --fs-h3: clamp(1.375rem, 2vw, 1.75rem); --fs-h4: 1.25rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --space-section: clamp(56px, 7vw, 108px); --space-block: clamp(28px, 4.5vw, 56px); --radius-card: 20px; --radius-card-lg: 28px; --radius-btn: 8px; --radius-pill: 6px; --shadow-card: 0 20px 40px rgba(10,20,64,.10); --shadow-card-lg: 0 30px 70px rgba(7,12,36,.22); --shadow-btn: 0 10px 24px rgba(211,16,39,.25); --container: 1280px; --container-wide: 1400px; --gutter: clamp(24px, 6vw, 80px); } /* ---- Reset / base ---------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-900); background: var(--white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; } h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--navy-900); letter-spacing: -.01em; } h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); letter-spacing: -.015em; } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 1.1em; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .wrap-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .skip-link:focus { position: fixed; top: 8px; left: 8px; background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 9999; } /* Clip horizontal bleed from decorative shapes without breaking the sticky header — overflow must NOT be set on or any ancestor of the header. */ /* NOTE: overflow-x must not be set on #main (or any ancestor of .stack-pin) — it forces overflow-y to compute as 'auto', which silently breaks position:sticky for descendants such as the scroll-pinned stack cards. Horizontal bleed from decorative shapes is instead contained locally via .overflow-clip / the hero's own overflow:hidden on each section. */ .site-footer, .topbar { overflow-x: hidden; } section { position: relative; } .section-pad { padding-block: var(--space-section); } .section-pad-sm { padding-block: clamp(40px, 5vw, 72px); } .overflow-clip { overflow: hidden; } .eyebrow { color: var(--red-600); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .6em; display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--red-600); display: inline-block; } .eyebrow.on-dark { color: #FF6B7D; } .section-head { max-width: 680px; margin-bottom: var(--space-block); } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { color: var(--slate-600); font-size: var(--fs-body-lg); } .section-head.on-dark p { color: var(--fog-300); } .section-head.on-dark h2 { color: #fff; } /* Band backgrounds — used to alternate section rhythm down the page */ .band-light { background: var(--white); } .band-mist { background: var(--mist-100); } .band-navy { background: var(--grad-navy); color: #fff; } .band-navy h2, .band-navy h3, .band-navy h4 { color: #fff; } .band-red { background: var(--grad-red); color: #fff; position: relative; } .band-red h2, .band-red h3, .band-red h4 { color: #fff; } .band-red::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.10) 0, transparent 45%); pointer-events: none; } /* decorative dot-grid pattern, absolute-positioned by caller */ .pattern-dots { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle at var(--mx,50%) var(--my,50%), #000 0%, transparent 70%); mask-image: radial-gradient(circle at var(--mx,50%) var(--my,50%), #000 0%, transparent 70%); } .pattern-rings { position: absolute; pointer-events: none; } .pattern-rings svg { display: block; } /* ---- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; padding: 14px 26px; border-radius: var(--radius-btn); border: 1.5px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; cursor: pointer; } .btn-arrow { transition: transform .2s ease; display: inline-block; } .btn:hover .btn-arrow { transform: translateX(4px); } .btn:hover { transform: translateY(-2px); } .btn-sm { padding: 10px 18px; font-size: .875rem; } .btn-primary { background: var(--red-600); color: #fff; box-shadow: var(--shadow-btn); } .btn-primary:hover { background: var(--red-700); } .btn-secondary { background: transparent; color: var(--navy-800); border-color: var(--navy-800); } .btn-secondary:hover { background: var(--navy-800); color: #fff; } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn-ghost-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; } .btn-white { background: #fff; color: var(--red-700); } .btn-white:hover { background: var(--mist-100); } /* ---- Topbar ------------------------------------------------------------ */ .topbar { background: var(--navy-950); color: var(--fog-300); font-size: .8125rem; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; gap: 16px; flex-wrap: wrap; } .topbar-contact { display: flex; gap: 24px; flex-wrap: wrap; } .topbar-contact a, .topbar-social a { color: var(--fog-300); } .topbar-contact a:hover, .topbar-social a:hover { color: #fff; } .topbar .ico { margin-right: 6px; opacity: .8; } .topbar-social { display: flex; gap: 10px; } .topbar-social a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: .7rem; } /* ---- Header -------------------------------------------------------------*/ .site-header { background: #fff; border-bottom: 1px solid var(--line-200); position: sticky; top: 0; z-index: 100; width: 100%; } .topbar > .wrap, .site-header > .wrap { max-width: none; width: 100%; padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); } .site-header-inner { display: flex; align-items: center; gap: 32px; padding-top: 14px; padding-bottom: 14px; } .site-logo img { height: 26px; width: auto; } .primary-nav { flex: 1; } #primary-menu { display: flex; align-items: center; gap: 2px; } #primary-menu > .menu-item { position: relative; } #primary-menu > .menu-item > .menu-link { display: flex; align-items: center; gap: 6px; padding: 10px 13px; font-weight: 600; font-size: .9125rem; color: var(--navy-900); border-radius: 8px; } #primary-menu > .menu-item > .menu-link:hover { background: var(--mist-100); color: var(--red-600); } .menu-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .6; } .sub-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--line-200); border-radius: 12px; box-shadow: var(--shadow-card-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s ease; z-index: 50; } .menu-item.has-children:hover > .sub-menu, .menu-item.has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .sub-menu .menu-item { position: relative; } .sub-menu .menu-link { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; font-size: .875rem; color: var(--slate-600); font-weight: 500; } .sub-menu .menu-link:hover { background: var(--mist-100); color: var(--red-600); } .sub-menu .sub-menu { top: -8px; left: 100%; } .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .menu-toggle span { width: 22px; height: 2px; background: var(--navy-900); border-radius: 2px; } /* ---- Breadcrumbs --------------------------------------------------------*/ .breadcrumbs { padding: 0 0 16px; font-size: .8125rem; color: var(--fog-300); position: relative; z-index: 2; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: rgba(255,255,255,.25); } .breadcrumbs a { color: var(--fog-300); } .breadcrumbs a:hover { color: #fff; } .breadcrumbs li[aria-current] { color: #fff; font-weight: 600; } .on-light .breadcrumbs, .on-light.breadcrumbs { color: var(--slate-400); } .on-light .breadcrumbs li:not(:last-child)::after { color: var(--line-200); } .on-light .breadcrumbs a { color: var(--slate-600); } .on-light .breadcrumbs li[aria-current] { color: var(--navy-900); } /* ---- Tags / pills ---------------------------------------------------------*/ .tag { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--mist-100); color: var(--slate-600); } .tag-dark { background: rgba(255,255,255,.1); color: #fff; } .tag-pdf { background: var(--red-600); color: #fff; } /* ---- Icon badges ----------------------------------------------------------*/ .icon-badge { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.25rem; font-family: var(--font-head); flex-shrink: 0; } .badge-blue{background:#4B67FF}.badge-purple{background:#A64BFF}.badge-pink{background:#ff1493}.badge-orange{background:#FF8A3D} .badge-green{background:#2ECC71}.badge-red{background:#FF5C7A}.badge-cyan{background:#1BCBEF}.badge-yellow{background:#F4B400} .badge-indigo{background:#6366F1}.badge-teal{background:#14B8A6}.badge-rose{background:#EC4899}.badge-lime{background:#84CC16} .badge-lily{background:#5e8020}.badge-snow{background:#7e2080}.badge-brown{background:#99574e}.badge-hot{background:#f51414} .badge-navy{background:var(--navy-800)} /* ========================================================================= HOME — hero (2-slide carousel, matches the original's split layout) ========================================================================= */ .hero-home { overflow: hidden; position: relative; background: var(--navy-800); display: grid; } .hero-slide { grid-area: 1 / 1; min-height: 675px; display: flex; flex-direction: row; overflow: hidden; background: var(--navy-800); opacity: 0; pointer-events: none; transition: opacity .9s ease; } .hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; } .hero-slide-text { width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 60px 64px 60px 50px; position: relative; overflow: hidden; z-index: 2; } .hero-slide-text .hero-geo { position: absolute; top: 50%; left: 50%; width: 130%; max-width: none; opacity: .16; transform: translate(-50%, -50%); animation: heroRotate 22s linear infinite; pointer-events: none; } @keyframes heroRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .hero-slide-text > * { position: relative; z-index: 1; } .hero-slide h1 { color: #fff; font-size: clamp(1.75rem, 3.3vw, 48px); line-height: 1.15; font-weight: 700; max-width: 22ch; } .hero-slide h1 em { font-style: normal; color: var(--red-600); } .hero-slide p { color: #fff; font-size: 1rem; max-width: 46ch; margin-top: 12px; } .hero-slide .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; } .hero-slide-photo { width: 50%; background-size: cover; background-position: left center; background-color: var(--navy-800); position: relative; } .hero-divider { position: absolute; z-index: 3; left: 63%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; pointer-events: none; } .hero-dots { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 10px; } .hero-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); border: 0; padding: 0; cursor: pointer; } .hero-dots button.active { background: #fff; } /* ---- Hero: generic inner-page (service pages) ----------------------------*/ .hero-simple { color: #fff; padding-block: clamp(48px,7vw,88px); position: relative; } .hero-simple .wrap { position: relative; z-index: 1; } .hero-simple h1 { color: #fff; max-width: 780px; } .hero-simple .hero-subtitle { color: var(--fog-300); font-size: var(--fs-body-lg); max-width: 620px; margin-bottom: 1.6em; } .hero-simple .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } /* ---- Tech marquee strip (real logos, dual opposite-direction scroll) -----*/ .marquee { overflow: hidden; padding: 20px 0; white-space: nowrap; } .marquee img { height: 50px; margin: 0 25px; display: inline-block; vertical-align: middle; } .marquee-content { display: inline-flex; } .marquee-left-anim { animation: scroll-left 22s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .marquee-right-anim { animation: scroll-right 22s linear infinite; } @keyframes scroll-right { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---- About Us: text + video row ------------------------------------------*/ .about-row { display: flex; gap: 48px; align-items: center; padding-block: 50px 30px; } .about-row-text { width: 50%; } .about-row-video { width: 50%; } .about-row-video video { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: block; } .line-heading { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--ink-900); margin-bottom: 14px; } .line-heading::after { content: ''; flex: 1; height: 2px; background: var(--ink-900); opacity: .15; max-width: 120px; } /* ========================================================================= Featured services — real 4-card row (Development / Digital Marketing / Graphics / AI Bots), image + heading + divider + text + button ========================================================================= */ .services-4col { display: flex; gap: 15px; flex-wrap: wrap; } .svc-card { flex: 1 1 0; min-width: 260px; padding: 15px; display: flex; flex-direction: column; border: 1px solid var(--line-200); border-radius: 16px; box-shadow: 0 10px 28px rgba(10,20,64,.07); transition: box-shadow .25s ease, transform .25s ease; } .svc-card:hover { box-shadow: 0 16px 36px rgba(10,20,64,.12); transform: translateY(-3px); } .svc-card img { border-radius: 10px; width: 100%; height: 190px; object-fit: cover; } .svc-card-body { padding: 15px; } .svc-card h3 { font-size: 1.375rem; margin-bottom: 10px; } .svc-card .svc-divider { width: 70px; height: 2px; background: var(--red-600); margin-bottom: 14px; } .svc-card p { color: var(--slate-600); font-size: .9375rem; margin-bottom: 16px; } .svc-card.reverse { display: flex; flex-direction: column-reverse; } /* ========================================================================= Red band deep-dive rows (Mobile Apps & Software Solutions) — real image background, stacked white cards, text-left / image-right consistently ========================================================================= */ .solutions-band { background-size: cover; background-position: center; background-repeat: no-repeat; padding-block: 70px; } .solutions-band > .wrap > .section-head h2, .solutions-band > .wrap > .section-head p { color: #fff; } .btn-ghost-amber { background: transparent; border-color: var(--navy-800); color: var(--navy-800); } .btn-ghost-amber:hover { background: var(--navy-800); color: #fff; } /* ---- Scroll-pinned stacked cards ------------------------------------------ Each card is absolutely positioned and slid into place as the user scrolls; translateY is driven purely by scroll position (see main.js), so the motion is 100% reversible and jump-free in both directions. */ .stack-wrap { position: relative; margin-top: 40px; height: calc((var(--count) - 1) * 70vh + 92vh); } .stack-pin { position: sticky; top: 104px; height: calc(92vh - 104px); max-height: 620px; overflow: hidden; border-radius: 20px; } .stack-card { position: absolute; inset: 0; background: #fff; border-radius: 20px; display: flex; align-items: center; gap: 30px; padding: clamp(28px,4vw,56px); box-shadow: 0 30px 70px rgba(0,0,0,.35); will-change: transform; } .stack-card-text { flex: 1 1 55%; } .stack-card-text h3 { margin-bottom: .5em; } .stack-card-text p { color: var(--slate-600); margin-bottom: 1.3em; } .stack-card-visual { flex: 1 1 40%; display: flex; justify-content: center; } .stack-card-visual img { width: 220px; height: 220px; object-fit: cover; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); } .stack-progress { display: flex; justify-content: center; gap: 8px; margin-top: 24px; } .stack-progress span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .25s, width .25s; } .stack-progress span.active { background: #fff; width: 22px; border-radius: 5px; } /* Below the breakpoint where the pin effect is disabled (see main.js), cards just stack normally in document flow — no absolute positioning needed. */ @media (max-width: 767px) { .stack-wrap { height: auto !important; } .stack-pin { position: static; height: auto; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 20px; border-radius: 0; } .stack-card { position: static; box-shadow: 0 20px 44px rgba(0,0,0,.22); flex-direction: column; text-align: center; } .stack-card-visual { order: -1; } .stack-progress { display: none; } } /* ========================================================================= Website dev / graphics carousels — infinite auto-scrolling track (no native scrollbar; driven by main.js, looped via a duplicated item set so it can wrap with no visible jump) ========================================================================= */ .carousel-viewport { overflow: hidden; } .carousel-track { display: flex; gap: 20px; width: max-content; } .snap-card { flex: 0 0 auto; width: 300px; background: #fff; border: 1px solid var(--line-200); border-radius: 16px; padding: 20px; text-align: center; } .snap-card img { width: 100%; height: 170px; object-fit: contain; border-radius: 10px; margin-bottom: 16px; background: var(--mist-100); } .snap-card h3 { font-size: 1.125rem; margin-bottom: 14px; } .graphics-snap .snap-card { width: 240px; padding: 0 0 20px; text-align: left; } .graphics-snap .snap-card img { height: 200px; object-fit: cover; border-radius: 10px 10px 0 0; margin-bottom: 12px; } .graphics-snap .snap-card h3 { font-size: 1rem; padding: 0 16px; } .snap-nav { display: flex; gap: 10px; justify-content: center; margin-top: 20px; } .snap-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-200); background: #fff; cursor: pointer; font-size: 1.125rem; color: var(--navy-900); } .snap-nav button:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); } /* ========================================================================= Digital Marketing services — image + connector + icon list (25/15/60) ========================================================================= */ .marketing-row { display: flex; align-items: center; gap: 0; } .marketing-image { width: 25%; } .marketing-image img { border-radius: 14px; } .marketing-connector { width: 15%; display: flex; justify-content: center; } .marketing-connector img { width: 70%; } .marketing-list { width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .marketing-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line-200); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-card); } .marketing-item .mi-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--red-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.0625rem; flex-shrink: 0; } .marketing-item span { font-weight: 700; font-size: .9375rem; font-family: var(--font-head); color: var(--navy-900); } /* ========================================================================= Inset CTA banner (90% width, real image bg) ========================================================================= */ .cta-inset { padding-block: 50px; } .cta-inset-card { width: 90%; margin-inline: auto; background-size: cover; background-position: center; border-radius: 20px; padding: 50px; text-align: left; position: relative; overflow: hidden; } .cta-inset-card::before { content: ''; position: absolute; inset: 0; background: rgba(5,10,30,.35); } .cta-inset-card > * { position: relative; z-index: 1; } .cta-inset-card .eyebrow { color: #fff; } .cta-inset-card .eyebrow::before { background: #fff; } .cta-inset-card h2 { color: #fff; max-width: 20ch; margin-bottom: 24px; } .cta-inset-card .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } /* ---- Process — real original graphic ------------------------------------*/ .process-image-section { text-align: center; padding-block: 70px 0; } .process-image-section img { width: 100%; max-width: 900px; margin: 30px auto 0; } /* ========================================================================= Why choose us — exact bullet/diamond list from the original's own CSS ========================================================================= */ .why-grid { display: flex; gap: 56px; align-items: flex-start; padding-block: 50px; } .why-grid-head { width: 40%; padding-top: 50px; position: sticky; top: 110px; } .why-grid-head .svc-divider { width: 90px; height: 2px; background: var(--red-600); margin-top: 14px; } .why-grid-body { width: 60%; } .services-section { max-width: 800px; position: relative; } .services-section::before { content: ''; position: absolute; left: 33px; top: 18px; bottom: 18px; width: 2px; background: #cc0033; opacity: .9; } .service-item { position: relative; padding-left: 70px; margin-bottom: 25px; color: #cbd5e1; font-size: 15px; line-height: 1.6; } .service-item span { display: block; color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 4px; } .service-item::before { content: ''; position: absolute; left: 25px; top: 10px; width: 16px; height: 16px; background: #cc0033; border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 0 5px rgba(204,0,51,.4); } /* ========================================================================= Stats — flat counter row + real photo/counter bento mosaic ========================================================================= */ .stats-bento { display: flex; gap: 18px; padding-block: 50px; align-items: stretch; } .sb-col { display: flex; flex-direction: column; gap: 15px; } .sb-col-photo { width: 30%; } .sb-col-wide { width: 40%; } .sb-photo-tile { position: relative; border-radius: 16px; overflow: hidden; flex: 1; min-height: 220px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 20px; box-shadow: 0 14px 32px rgba(10,20,64,.14); } .sb-photo-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,10,30,.75), transparent 60%); } .sb-photo-tile .sb-num, .sb-photo-tile .sb-label { position: relative; z-index: 1; color: #fff; } .sb-photo-tile .sb-num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; display: block; } .sb-flat-tile { border-radius: 16px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 14px 30px rgba(122,15,31,.22); flex: 1; } .sb-flat-tile.sb-grad, .sb-flat-tile.sb-plain { background: var(--grad-red); } .sb-flat-tile.sb-plain { flex-direction: column; align-items: flex-start; justify-content: center; } .sb-flat-tile .sb-num { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: #fff; } .sb-flat-tile .sb-label { color: rgba(255,255,255,.85); font-size: .875rem; } .sb-flat-tile .sb-ico { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--red-600); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } /* ========================================================================= Testimonials — single-card carousel with dot pagination ========================================================================= */ .testi-band { background: var(--grad-red); color: #fff; text-align: center; } .testi-track { position: relative; max-width: 760px; margin: 0 auto; min-height: 220px; } .testi-card { display: none; } .testi-card.active { display: block; animation: testiFade .4s ease; } @keyframes testiFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .testi-stars { color: #FFC94A; letter-spacing: 2px; margin-bottom: 14px; font-size: 1rem; } .testi-card p { font-size: 1.25rem; font-family: var(--font-head); font-weight: 600; line-height: 1.5; color: #fff; max-width: 640px; margin-inline: auto 1em; } .testi-author { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; } .testi-author img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); object-fit: cover; } .testi-author strong { display: block; font-size: .9375rem; } .testi-author span { font-size: .8125rem; color: rgba(255,255,255,.7); } .testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; } .testi-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); border: 0; padding: 0; cursor: pointer; } .testi-dots button.active { background: #fff; width: 22px; border-radius: 5px; } /* ========================================================================= Case study cards (grid) ========================================================================= */ .portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .project-card { position: relative; overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--hairline-dark); background-color: var(--navy-950); background-size: cover; background-position: center; min-height: 400px; display: flex; align-items: flex-end; transition: .35s ease; } .project-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7,13,28,.05) 0%, rgba(7,13,28,.2) 35%, rgba(7,13,28,.65) 62%, rgba(7,13,28,.97) 100%); z-index: 1; } .project-card:hover { transform: translateY(-8px); border-color: var(--red-600); box-shadow: 0 20px 40px rgba(211,16,39,.25); } .project-content { position: relative; z-index: 2; width: 100%; padding: 26px; } .project-top { margin-bottom: 16px; } .icon-badge.project-icon { margin-bottom: 20px; } .project-title { color: #fff; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .project-category { color: #94A9FF; font-size: .8125rem; margin-top: 6px; } .project-desc { margin-top: 16px; color: var(--fog-300); font-size: .9375rem; line-height: 1.7; margin-bottom: 22px; } .project-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--hairline-dark); } .project-footer span { color: #fff; font-size: .875rem; font-weight: 600; } .project-arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; transition: .3s; } .project-card:hover .project-arrow { background: var(--red-600); transform: translateX(3px); } .project-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .project-category.cat-blue { color: #94A9FF; } .project-category.cat-purple { color: #C4A0FF; } .project-category.cat-red { color: #FF8AA8; } .project-category.cat-orange { color: #FFB07A; } .project-category.cat-green { color: #7DDFB0; } .project-category.cat-teal { color: #5EEAD4; } /* ========================================================================= Case Studies hub ========================================================================= */ .cs-hub-hero { background: var(--grad-navy); color: #fff; padding-block: clamp(48px, 7vw, 88px) clamp(72px, 10vw, 110px); position: relative; overflow: hidden; } .cs-hub-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; z-index: 1; } .cs-hub-hero h1 { color: #fff; max-width: 14ch; } .cs-hub-hero h1 em { font-style: normal; color: #e91e8c; } .cs-hub-hero .hero-subtitle { color: var(--fog-300); font-size: var(--fs-body-lg); max-width: 520px; margin-bottom: 1.8em; } .cs-hub-stats { display: flex; gap: 22px; flex-wrap: wrap; } .cs-hub-stat { display: flex; flex-direction: column; gap: 2px; min-width: 110px; } .cs-hub-stat-ico { font-size: 1.25rem; margin-bottom: 4px; } .cs-hub-stat strong { font-family: var(--font-head); font-size: 1.75rem; color: #fff; line-height: 1.1; } .cs-hub-stat span { color: var(--fog-300); font-size: .8125rem; } .cs-hub-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .cs-hub-hero-visual::before { content: ''; position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(233,30,140,.35) 0%, transparent 68%); filter: blur(8px); } .cs-hub-hero-visual img { position: relative; z-index: 1; width: 100%; max-width: 520px; height: auto; } .cs-scroll-down { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--fog-300); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-align: center; text-decoration: none; z-index: 2; } .cs-scroll-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(166,75,255,.55); display: flex; align-items: center; justify-content: center; color: #c4a0ff; } .cs-portfolio { background: #070d1c; } .cs-portfolio .portfolio-grid { gap: 22px; } /* ========================================================================= Case study detail — dark glassmorphism layout matching live (body: radial #001A4D → black; glass cards; navy→red icon badges) ========================================================================= */ .cs-detail { --cs-glass: rgba(255,255,255,.06); --cs-glass-2: rgba(255,255,255,.03); --cs-line: rgba(255,255,255,.12); --cs-line-2: rgba(255,255,255,.18); --cs-text: rgba(255,255,255,.74); --cs-badge: linear-gradient(135deg, #002169, #CA0D2E); --cs-accent: linear-gradient(90deg, #FF0080 0%, #6F42C1 100%); background: radial-gradient(at top center, #001A4D 0%, #000 100%); color: #fff; overflow: clip; } .cs-detail h1, .cs-detail h2, .cs-detail h3, .cs-detail h4 { color: #fff; } .cs-detail p { color: var(--cs-text); } .cs-section { padding-block: clamp(22px, 3vw, 40px); } .cs-h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; margin: 0 0 .6em; } .cs-h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.25; margin: 0 0 .6em; } .cs-center { text-align: center; } .cs-intro { max-width: 820px; margin: 0 auto 28px; } .cs-svg { width: 1em; height: 1em; display: block; } .cs-card-ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--cs-badge); color: #fff; font-size: 20px; box-shadow: 0 10px 25px rgba(255,45,85,.25), inset 0 0 15px rgba(255,255,255,.08); } .cs-glass-card { background: var(--cs-glass); border: 1px solid var(--cs-line); border-radius: 20px; padding: 26px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .3s ease, border-color .3s ease; } .cs-glass-card:hover { transform: translateY(-4px); border-color: var(--cs-line-2); } .cs-glass-card h3 { font-size: 1.125rem; margin: 14px 0 .4em; } .cs-glass-card p { font-size: .9375rem; margin: 0; } .cs-grid { display: grid; gap: 22px; } .cs-grid-1 { grid-template-columns: 1fr; } .cs-grid-2 { grid-template-columns: repeat(2, 1fr); } .cs-grid-3 { grid-template-columns: repeat(3, 1fr); } .cs-grid-4 { grid-template-columns: repeat(4, 1fr); } .cs-mobile-only { display: none; } /* Rich text */ .cs-rich p { margin: 0 0 .8em; line-height: 1.65; } .cs-rich .cs-lead { color: #fff; font-weight: 700; font-size: 1.0625rem; margin-top: 1.1em; } .cs-rich .cs-lead:first-child { margin-top: 0; } .cs-rich strong { color: #fff; } .cs-subhead { font-size: 1.0625rem; margin: 1em 0 .5em; } .cs-list { list-style: none; margin: 0 0 1em; padding: 0; } .cs-list > li { position: relative; padding-left: 22px; margin-bottom: .5em; color: var(--cs-text); line-height: 1.6; } .cs-list > li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-accent); } .cs-list-sub { margin: .45em 0 .2em; } .cs-list-sub > li::before { background: transparent; border: 1.5px solid rgba(255,255,255,.55); } /* Hero */ .cs-hero { padding-block: clamp(40px, 6vw, 72px) 10px; position: relative; } .cs-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .cs-hero h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.15; margin: 0 0 .5em; } .cs-hero h1 .heading-main, .cs-hero h1 em { font-style: normal; background: var(--cs-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .cs-hero .hero-subtitle { color: var(--cs-text); font-size: var(--fs-body-lg); max-width: 580px; } .cs-label { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 50px; border: 1px solid rgba(233, 30, 140, .45); background: rgba(80, 10, 45, .72); backdrop-filter: blur(10px); color: #f8c4e0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; margin-bottom: 22px; } .cs-hero-visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); } .cs-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 24px; margin-top: 36px; background: var(--cs-glass); border: 1px solid var(--cs-line); border-radius: 20px; backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,.2); } .cs-highlight { display: flex; align-items: center; gap: 14px; font-size: .9375rem; font-weight: 600; color: #fff; line-height: 1.35; } .cs-highlight .hi-ico { --hl: #b84cff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; color: var(--hl); background: rgba(255,255,255,.03); border: 1px solid var(--hl); box-shadow: inset 0 0 12px rgba(255,255,255,.05), 0 0 12px color-mix(in srgb, var(--hl) 35%, transparent); } .cs-hl-icon2 .hi-ico { --hl: #ffb300; } .cs-hl-icon3 .hi-ico { --hl: #4da3ff; } .cs-hl-icon4 .hi-ico { --hl: #20d6a7; } /* Client overview — individual floating fact cards (live Elementor style) */ .cs-overview-lead { color: var(--cs-text); max-width: 860px; margin: 0 auto 36px; text-align: center; font-size: var(--fs-body-lg); } .cs-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; padding: 12px 0 0; background: transparent; border: 0; border-radius: 0; } .cs-facts-4 { grid-template-columns: repeat(4, 1fr); } .cs-facts-5 { grid-template-columns: repeat(3, 1fr); } .cs-facts-5 .cs-fact-card { grid-column: auto; } .cs-facts-5 .cs-fact-card:nth-child(4) { grid-column: auto; } .cs-facts-5 .cs-fact-card:nth-child(4), .cs-facts-5 .cs-fact-card:nth-child(5) { /* second row: center the last two on wide screens */ } @media (min-width: 1025px) { .cs-facts-5 { grid-template-columns: repeat(6, 1fr); } .cs-facts-5 .cs-fact-card { grid-column: span 2; } .cs-facts-5 .cs-fact-card:nth-child(4) { grid-column: 2 / span 2; } .cs-facts-5 .cs-fact-card:nth-child(5) { grid-column: 4 / span 2; } } .cs-fact-card { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 28px 22px 22px; margin-top: 18px; } .cs-fact-card .cf-ico { position: absolute; top: -18px; left: 22px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #e1062b, #c40d2e); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; box-shadow: 0 8px 18px rgba(211,16,39,.35); } .cs-fact-card strong { display: block; color: #fff; font-family: var(--font-head); font-size: 1rem; margin: 8px 0 .35em; } .cs-fact-card span { display: block; color: var(--cs-text); font-size: .875rem; line-height: 1.55; } /* Problem split box */ .cs-split-box { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; padding: 34px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 24px; backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0,0,0,.3); } .cs-split-sub { font-size: 1.125rem; margin: -.2em 0 .9em; } .cs-split-divider { align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; width: 42px; } .cs-split-divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.35), transparent); } .cs-split-divider span { position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cs-badge); font-size: 1.4rem; color: #fff; } .cs-split-side { padding: 28px; border-radius: 20px; background: linear-gradient(145deg, rgba(202,13,46,.22), rgba(0,33,105,.35)); border: 1px solid rgba(255,255,255,.16); } .cs-split-extra { margin-top: 24px; } /* Opportunity hub */ .cs-hub-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 30px; align-items: center; } .cs-hub-single { grid-template-columns: 1fr 1.1fr; } .cs-hub-col { display: grid; gap: 22px; } .cs-hub-item { display: flex; gap: 14px; padding: 20px; background: var(--cs-glass); border: 1px solid var(--cs-line); border-radius: 18px; } .cs-hub-item h3 { font-size: 1.0625rem; margin: 0 0 .3em; } .cs-hub-item p { font-size: .875rem; margin: 0; } .cs-hub-center { position: relative; z-index: 1; text-align: center; padding: 50px 30px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(20px); box-shadow: 0 12px 35px rgba(0,0,0,.35); } .cs-hub-center::before { content: ''; position: absolute; top: 50%; left: 50%; width: 120%; height: 140%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(202,13,46,.75), transparent 70%); filter: blur(60px); z-index: -1; pointer-events: none; } .cs-hub-center::after { content: ''; position: absolute; inset: -15px; border-radius: 32px; border: 1px solid rgba(202,13,46,.7); box-shadow: 0 0 35px rgba(202,13,46,.25); animation: cs-hub-pulse 2.8s ease-in-out infinite; pointer-events: none; z-index: -2; } @keyframes cs-hub-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } } .cs-hub-center h2 { font-size: clamp(1.1rem, 1.6vw, 1.375rem); text-transform: uppercase; line-height: 1.3; margin: 0; letter-spacing: .01em; } .cs-hub-kicker { display: block; font-size: .8125rem; letter-spacing: .2em; color: #ff5c8a; margin-bottom: .8em; } .cs-hub-center .cs-hub-kicker { display: inline; font-size: inherit; letter-spacing: inherit; color: inherit; margin: 0; } .cs-hub-grid { grid-template-columns: 1fr 1.26fr 1fr; gap: 36px; } .cs-hub-grid.cs-hub-single { grid-template-columns: 1fr 1.1fr; } .cs-hub-center { padding: 34px 24px; } .cs-hub-item { flex-direction: column; gap: 10px; padding: 20px 18px; background: linear-gradient(135deg, rgba(60,75,110,.5) 0%, rgba(20,30,55,.55) 72%, rgba(255,255,255,.07) 73%, rgba(20,30,55,.55) 80%); border-color: rgba(255,255,255,.1); } .cs-hub-item .cs-card-ico { align-self: flex-start; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: #CA0D2E; font-size: 20px; } .cs-hub-item h3 { color: #d82a50; font-size: 1.3125rem; font-weight: 500; margin: 0 0 .45em; } .cs-hub-item p { color: #fff; } .cs-split-box { grid-template-columns: 1fr 1fr; } .cs-split-divider { display: none; } .cs-hub-center p { margin: 1em 0 0; } /* Solution */ .cs-solution-box { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; padding: 22px; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border: 1px solid var(--cs-line-2); border-radius: 20px; backdrop-filter: blur(14px); box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15); } .cs-solution-media { border-radius: 16px; overflow: hidden; } .cs-solution-media img { width: 100%; height: auto; display: block; } .cs-solution-copy { padding: 34px; border-radius: 20px; background: linear-gradient(135deg, #243556 0%, #1D2D4C 70%, #202B46 100%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 18px 45px rgba(0,0,0,.2); } .cs-feature-list { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; } .cs-feature-list li { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 500; } .cs-feature-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-badge); font-size: 15px; flex-shrink: 0; } /* Principles */ .cs-principles { padding-top: 0; } .cs-principles-title { font-size: 1.625rem; font-weight: 600; margin: 0 0 22px; } .cs-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cs-principle-card { position: relative; padding: 18px; min-height: 270px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; backdrop-filter: blur(14px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .cs-principle-card:hover { transform: translateY(-8px); border-color: rgba(202,13,46,.45); box-shadow: 0 20px 60px rgba(0,0,0,.6); } .cs-principle-ico { position: absolute; top: 12px; left: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--cs-badge); box-shadow: 0 10px 25px rgba(0,0,0,.4); font-size: 16px; } .cs-principle-visual { height: 130px; border-radius: 14px; overflow: hidden; margin-bottom: 14px; } .cs-principle-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .cs-principle-card:hover .cs-principle-visual img { transform: scale(1.05); } .cs-principle-card h3 { font-size: 1.125rem; margin: 0 0 8px; } .cs-principle-card p { font-size: .875rem; line-height: 1.5; margin: 0; } .cs-principle-card .cs-principle-solo { color: #fff; font-size: 1rem; font-weight: 600; } /* Workflow */ .cs-workflow-panel { max-width: 900px; margin: 0 auto 22px; padding: 30px 34px; border-radius: 20px; background: linear-gradient(145deg, rgba(202,13,46,.18), rgba(0,33,105,.3)); border: 1px solid var(--cs-line-2); } .cs-workflow-panel h3 { font-size: 1.375rem; margin: 0 0 .6em; } /* Modules / core features */ .cs-modules-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .cs-module-card { flex: 0 1 calc(33.333% - 15px); padding: 26px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; transition: all .3s ease; } .cs-module-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.3); } .cs-module-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .cs-module-head h3 { font-size: 1.125rem; margin: 0 0 .25em; } .cs-module-sub { display: block; color: #ff6b8e; font-size: .8125rem; font-weight: 600; } .cs-module-card p { font-size: .9375rem; margin: 0; line-height: 1.6; color: #fff; } .cs-modules-grid { justify-content: flex-start; } .cs-module-card { --mi: #a855f7; } .cs-module-card:nth-child(6n+2) { --mi: #eab308; } .cs-module-card:nth-child(6n+3) { --mi: #3b82f6; } .cs-module-card:nth-child(6n+4) { --mi: #10b981; } .cs-module-card:nth-child(6n+5) { --mi: #ef4444; } .cs-module-card:nth-child(6n) { --mi: #06b6d4; } .cs-module-card .cs-card-ico { width: 36px; height: 36px; border-radius: 50%; font-size: 15px; background: rgba(255,255,255,.02); color: var(--mi); border: 1px solid var(--mi); box-shadow: 0 0 10px color-mix(in srgb, var(--mi) 35%, transparent); } .cs-module-card .cs-module-sub { color: rgba(255,255,255,.55); font-weight: 400; margin-top: .2em; } /* Architecture cards / tiles */ .cs-arch-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .cs-arch-head h3 { margin: 0 0 .2em; font-size: 1.25rem; } .cs-cards-showcase .cs-arch-card { text-align: center; padding: 25px; border-radius: 20px; backdrop-filter: none; -webkit-backdrop-filter: none; } .cs-cards-showcase .cs-tone-red { background: linear-gradient(180deg, rgba(202,13,46,.89) 0%, #000 100%); border: 2px solid #CA0D2E; } .cs-cards-showcase .cs-tone-blue { background: linear-gradient(180deg, rgba(0,33,105,.89) 0%, #000 100%); border: 2px solid #002169; } .cs-cards-showcase .cs-arch-head { flex-direction: column; gap: 12px; margin-bottom: 18px; } .cs-cards-showcase .cs-arch-head h3 { font-size: clamp(1.375rem, 2.1vw, 1.875rem); font-weight: 600; margin: 0 0 .35em; } .cs-cards-showcase .cs-module-sub { color: #fff; font-size: 1rem; font-weight: 400; } .cs-arch-visual { width: 180px; max-width: 60%; height: auto; display: block; margin: 4px auto 0; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); } .cs-cards-showcase .cs-rich p, .cs-cards-showcase .cs-list > li { color: #fff; } .cs-cards-showcase .cs-rich .cs-lead { font-size: 1rem; } .cs-cards-showcase .cs-rich .cs-lead:first-child { font-size: clamp(1.375rem, 2.3vw, 2rem); margin-bottom: .45em; } .cs-cards-showcase .cs-list > li { padding-left: 0; margin-bottom: .15em; } .cs-cards-showcase .cs-list > li::before { display: none; } .cs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; } .cs-tiles-4 { grid-template-columns: repeat(4, 1fr); } .cs-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 18px; background: var(--cs-glass); border: 1px solid var(--cs-line); border-radius: 18px; } .cs-icon-grid .cs-tile { align-items: flex-start; text-align: left; gap: 10px; padding: 22px 20px; background: linear-gradient(135deg, rgba(60,75,110,.45) 0%, rgba(30,40,70,.35) 70%, rgba(255,255,255,.08) 71%, rgba(30,40,70,.35) 76%); border-color: rgba(255,255,255,.1); } .cs-icon-grid .cs-card-ico { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: #CA0D2E; font-size: 20px; } .cs-icon-grid .cs-tile-label { font-weight: 500; font-size: .9375rem; } .cs-tile-label { color: #fff; font-weight: 600; line-height: 1.4; } .cs-tile-sub { color: var(--cs-text); font-size: .875rem; } /* Tabs */ /* Tabs — live Elementor nested tabs: underlined text titles, gradient panel cards */ .cs-tab-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-bottom: 34px; } .cs-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #fff; font: 500 1.0625rem/1.3 var(--font-body); padding: 5px 0 10px; border-radius: 0; cursor: pointer; transition: border-color .25s, color .25s; } .cs-tab:hover { border-bottom-color: rgba(202,13,46,.5); } .cs-tab.is-active { border-bottom-color: #CA0D2E; } .cs-tab-panel { display: grid; gap: 14px; } .cs-tab-panel[hidden] { display: none; } .cs-tab-pas { grid-template-columns: 1fr 1.06fr; } .cs-tab-pas .cs-tab-group:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } .cs-tab-multi { grid-template-columns: repeat(2, 1fr); } .cs-tab-group { padding: 30px; border-radius: 20px; background: linear-gradient(120deg, #1e2466 0%, #c20d2f 100%); } .cs-tab-pas .cs-tab-group:nth-child(3), .cs-tab-multi .cs-tab-group:nth-child(even) { background: linear-gradient(165deg, #0b2a70 0%, #2a3449 100%); } .cs-tab-group h3 { font-size: 1.375rem; font-weight: 600; margin: 0 0 .7em; color: #fff; } .cs-tab-group .cs-rich p, .cs-tab-group .cs-list > li { color: #fff; font-size: .9375rem; } /* Accordion — full-width gradient bars, red circle arrow on the left */ .cs-accordion { margin: 0 auto; display: grid; gap: 5px; } .cs-acc-item { background: transparent; border: 0; border-radius: 5px; } .cs-acc-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px; font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: #fff; border: 1px solid #d5d8dc; border-radius: 5px; background: linear-gradient(90deg, #1c2152 0%, #9b0f27 100%); } .cs-acc-item[open] summary { border-radius: 5px 5px 0 0; } .cs-acc-item summary::-webkit-details-marker { display: none; } .cs-acc-ico { flex-shrink: 0; color: #CA0D2E; font-size: 16px; line-height: 0; transition: transform .25s; } .cs-acc-item[open] .cs-acc-ico { transform: rotate(90deg); } .cs-acc-body { padding: 14px 28px 18px; border: 1px solid #d5d8dc; border-top: 0; border-radius: 0 0 5px 5px; } .cs-acc-body > :last-child, .cs-tab-group .cs-rich > :last-child { margin-bottom: 0; } .cs-acc-body .cs-rich p, .cs-acc-body p, .cs-acc-body .cs-list > li { color: #fff; font-size: .9375rem; } .cs-acc-body .cs-list > li::before, .cs-tab-group .cs-list > li::before { width: 5px; height: 5px; top: .72em; left: 6px; background: #fff; } .cs-acc-body .cs-list-sub > li::before, .cs-tab-group .cs-list-sub > li::before { background: transparent; border: 1px solid #fff; } /* Timeline (Key Differentiators) */ .cs-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 1140px; position: relative; } .cs-timeline::before { content: ''; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.85); } .cs-tl-item { position: relative; width: 50%; padding: 0 40px 34px; } .cs-tl-item.is-left { margin-right: auto; text-align: right; padding-left: 0; } .cs-tl-item.is-right { margin-left: auto; padding-right: 0; } .cs-tl-dot { position: absolute; top: 6px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cs-badge); font-size: 16px; z-index: 1; } .cs-tl-item.is-left .cs-tl-dot { right: -21px; } .cs-tl-item.is-right .cs-tl-dot { left: -21px; } .cs-timeline .cs-tl-dot { top: 18px; width: 42px; height: 42px; background: #fff; color: #6b7280; border: 3px solid #d5d8dc; font-size: 15px; } .cs-tl-num { position: absolute; top: 18px; font-size: 2.25rem; line-height: 42px; font-weight: 700; color: #fff; } .cs-tl-item.is-left .cs-tl-num { left: calc(100% + 34px); } .cs-tl-item.is-right .cs-tl-num { right: calc(100% + 34px); } .cs-tl-card { position: relative; padding: 24px 26px; background: #CA0D2E; border: 0; border-radius: 0; text-align: center; } .cs-tl-card::after { content: ''; position: absolute; top: 30px; border: 10px solid transparent; } .cs-tl-item.is-left .cs-tl-card::after { left: 100%; border-left-color: #CA0D2E; } .cs-tl-item.is-right .cs-tl-card::after { right: 100%; border-right-color: #CA0D2E; } .cs-tl-card h3 { font-size: 1.3125rem; font-weight: 700; margin: 0 0 .45em; } .cs-tl-card .cs-list { margin: 0; } .cs-tl-card .cs-list > li { padding-left: 0; margin-bottom: .1em; color: #fff; font-size: .9375rem; line-height: 1.55; } .cs-tl-card .cs-list > li::before { display: none; } /* User groups */ .cs-user-group + .cs-user-group { margin-top: 34px; } .cs-user-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .cs-user-heading .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); } .cs-user-heading h3 { margin: 0; font-size: 1.625rem; } .cs-user-heading .line { max-width: 220px; background: linear-gradient(90deg, transparent, rgba(202,13,46,.7)); } .cs-user-heading .line:last-child { background: linear-gradient(90deg, rgba(202,13,46,.7), transparent); } .cs-user-heading { justify-content: center; } .cs-user-heading .cs-card-ico { width: 40px; height: 40px; border-radius: 50%; font-size: 16px; background: rgba(202,13,46,.12); color: #CA0D2E; border: 1px solid rgba(202,13,46,.4); box-shadow: 0 0 16px rgba(202,13,46,.3); } .cs-ug-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 970px; margin: 0 auto; } .cs-ug-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .cs-ug-grid.is-single { max-width: 680px; grid-template-columns: 1fr; } .cs-ug-card { display: flex; align-items: center; gap: 0; padding: 26px 24px; border-radius: 18px; background: linear-gradient(135deg, rgba(0,33,105,.55), rgba(0,10,40,.6)); border: 1px solid rgba(80,110,200,.35); } .cs-ug-ico { flex-shrink: 0; width: 64px; height: 64px; margin: 0 28px 0 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #CA0D2E; font-size: 22px; background: rgba(202,13,46,.06); box-shadow: 0 0 18px rgba(202,13,46,.35), inset 0 0 10px rgba(202,13,46,.2); } .cs-ug-card > div { padding-left: 20px; border-left: 2px solid rgba(255,255,255,.55); } .cs-ug-card h3 { font-size: 1.0625rem; margin: 0 0 .45em; } .cs-ug-card p { font-size: .9375rem; margin: 0; color: #fff; } /* Platform access */ .cs-access-card h3 { font-size: 1.25rem; margin: 0 0 .3em; } .cs-steps { list-style: none; margin: 18px 0 0; padding: 0 0 0 22px; border-left: 2px solid rgba(202,13,46,.6); counter-reset: step; } .cs-steps li { position: relative; padding: 0 0 18px 14px; color: var(--cs-text); line-height: 1.6; } .cs-steps li::before { content: ''; position: absolute; left: -30px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: #CA0D2E; box-shadow: 0 0 0 4px rgba(202,13,46,.2); } .cs-step-ico { display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: var(--cs-badge); font-size: 13px; vertical-align: middle; margin-right: 8px; color: #fff; } .cs-badge { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; background: rgba(32,214,167,.15); color: #20d6a7; border: 1px solid rgba(32,214,167,.4); } .cs-badge-red { background: rgba(202,13,46,.15); color: #ff6b8e; border-color: rgba(202,13,46,.45); } .cs-social { display: flex; gap: 10px; margin-top: 10px; } .cs-social-ico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); font-size: 15px; color: #fff; } .cs-admin-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; } .cs-admin-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--cs-line); color: var(--cs-text); } .cs-admin-list .cs-step-ico { margin-right: 4px; } .cs-platform-access .cs-access-card { padding: 28px 22px; } .cs-platform-access .cs-access-card:first-child { background: linear-gradient(135deg, #1d3685 0%, #43297f 48%, #b8123a 100%); border-color: rgba(255,255,255,.14); } .cs-platform-access .cs-access-card:last-child { background: linear-gradient(180deg, #0a1f5e 0%, #06163f 100%); border-color: rgba(255,255,255,.1); } .cs-platform-access .cs-access-card .cs-module-sub { color: #fff; font-size: 1rem; font-weight: 400; } .cs-platform-access .cs-steps { border-left: 1px solid rgba(255,255,255,.8); padding-left: 12px; margin-left: 6px; } .cs-platform-access .cs-steps li { color: #fff; font-size: .9375rem; padding-bottom: 14px; } .cs-platform-access .cs-steps li::before { left: -18px; width: 10px; height: 10px; background: #fff; box-shadow: none; } .cs-platform-access .cs-step-ico { background: rgba(255,255,255,.12); border-radius: 6px; } .cs-platform-access .cs-badge { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; font-weight: 600; } .cs-platform-access .cs-admin-list { gap: 10px; } .cs-platform-access .cs-admin-list li { flex-wrap: nowrap; padding: 4px 0; background: transparent; border: 0; color: #fff; font-size: .9375rem; } .cs-platform-access .cs-admin-list li > span:nth-child(2) { flex: 1; } .cs-platform-access .cs-admin-list .cs-step-ico { background: transparent; color: #CA0D2E; font-size: 18px; width: 24px; } .cs-platform-access .cs-admin-list .cs-badge { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; max-width: 70px; text-align: left; line-height: 1.3; } .cs-social-img { width: 26px; height: 26px; display: block; } /* Integrations bento */ .cs-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 20px; } .cs-bento-title { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px 6px; } .cs-bento-title .cs-h2 { margin-bottom: .25em; } .cs-bento-title p { margin: 0; font-size: .9375rem; } .cs-bento-card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 158px; padding: 26px 24px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .cs-bento-card.is-wide { grid-column: span 2; } .cs-bento-card h4 { margin: 0; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); } .cs-logo-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; } .cs-logo-wrap img { height: 24px; max-width: 110px; width: auto; object-fit: contain; } .cs-logo-chip { font-weight: 700; font-size: .875rem; color: rgba(255,255,255,.88); padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.07); } .cs-bento-footer { text-align: center; margin: 34px 0 0; font-size: 1.0625rem; } /* Results */ .cs-results-grid { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: 22px; align-items: stretch; } .cs-results-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); } .cs-result-card { padding: 28px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); transition: transform .3s ease; } .cs-result-card:hover { transform: scale(1.03); } .cs-result-card { text-align: center; } .cs-result-card.is-featured { background: rgba(20,30,60,.55); border-color: rgba(202,13,46,.35); box-shadow: 0 0 40px rgba(202,13,46,.22); } .cs-result-card .cs-result-ico { width: 54px; height: 54px; border-radius: 14px; font-size: 20px; margin: 0 auto 16px; } .cs-result-card h3 { font-weight: 500; font-size: 1.1875rem; color: rgba(255,255,255,.88); } .cs-results .cs-check-list { text-align: left; padding-left: 26px; list-style: disc; } .cs-results .cs-check-list li { padding-left: 0; margin-bottom: .35em; font-size: .875rem; } .cs-results .cs-check-list li::before { display: none; } .cs-results .cs-check-list li::marker { color: rgba(255,255,255,.8); } .cs-result-ico { width: 75px; height: 75px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #001169, #CA0D2E); box-shadow: 0 10px 25px rgba(255,45,85,.35), inset 0 0 15px rgba(255,255,255,.08); font-size: 28px; color: #b8c4d6; margin-bottom: 18px; } .cs-result-card h3 { font-size: 1.375rem; margin: 0 0 .7em; } .cs-check-list { list-style: none; margin: 0; padding: 0; } .cs-check-list li { position: relative; padding-left: 28px; margin-bottom: .6em; color: var(--cs-text); line-height: 1.55; } .cs-check-list li::before { content: ''; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; border-radius: 50%; background: #CA0D2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; } /* Outcome */ .cs-outcome-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .cs-outcome-copy p { font-size: var(--fs-body-lg); line-height: 1.7; } .cs-underline { position: relative; display: inline-block; } .cs-underline::after { content: ''; position: absolute; left: 0; bottom: -8px; height: 3px; width: 66%; background: #CA0D2E; } .cs-achievements-card { padding: 30px; border-radius: 20px; background: var(--cs-glass); border: 1px solid var(--cs-line); backdrop-filter: blur(14px); } .cs-achievements-card h3 { font-size: 1.375rem; margin: 0 0 18px; } .cs-achievements { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .cs-achievements li { display: flex; gap: 12px; align-items: center; color: #fff; font-weight: 500; } .cs-ach-ico { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-badge); font-size: 16px; } /* Closing marquee moved to global footer (.footer-marquee) */ @media (max-width: 1024px) { .cs-solution-box, .cs-outcome-grid, .cs-hub-grid, .cs-hub-single { grid-template-columns: 1fr; } .cs-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 20px; } .cs-highlights, .cs-grid-3, .cs-grid-4, .cs-principles-grid, .cs-tiles, .cs-tiles-4 { grid-template-columns: repeat(2, 1fr); } .cs-facts-grid, .cs-facts-4 { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; } .cs-facts-5 .cs-fact-card, .cs-facts-5 .cs-fact-card:nth-child(4) { grid-column: auto; } .cs-hub-grid { gap: 22px; } .cs-hub-col { grid-template-columns: 1fr 1fr; gap: 16px; } .cs-hub-center { width: 76%; justify-self: center; } .cs-module-card { flex-basis: calc(50% - 11px); } .cs-results-grid, .cs-results-grid:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; } .cs-tab-list { gap: 12px 26px; } .cs-bento { grid-template-columns: repeat(2, 1fr); } .cs-bento-title { grid-column: 1 / -1; order: -1; } } @media (max-width: 767px) { .cs-mobile-only { display: block; } .cs-hide-mobile { display: none; } .cs-highlights, .cs-facts-grid, .cs-facts-4, .cs-grid-2, .cs-grid-3, .cs-grid-4, .cs-principles-grid, .cs-tiles, .cs-tiles-4, .cs-results-grid, .cs-results-grid:has(> :nth-child(4)), .cs-tab-pas { grid-template-columns: 1fr; } .cs-module-card { flex-basis: 100%; } .cs-split-box { padding: 22px; grid-template-columns: 1fr; } .cs-tab-multi { grid-template-columns: 1fr; } .cs-tab-pas .cs-tab-group:nth-child(3) { grid-column: auto; grid-row: auto; } .cs-tab-list { gap: 10px 20px; margin-bottom: 24px; } .cs-tab { font-size: 1rem; } .cs-tab-group { padding: 22px; } .cs-acc-item summary { font-size: 1.0625rem; } .cs-acc-body { padding: 12px 16px 16px; } .cs-bento-card.is-wide { grid-column: 1 / -1; } .cs-bento-card { min-height: 0; padding: 20px; } .cs-timeline::before { left: 20px; } .cs-tl-item, .cs-tl-item.is-left, .cs-tl-item.is-right { width: 100%; padding: 0 0 26px 58px; text-align: left; } .cs-tl-item.is-left .cs-tl-dot, .cs-tl-item.is-right .cs-tl-dot { left: 0; right: auto; top: 64px; } .cs-tl-item.is-left .cs-tl-num, .cs-tl-item.is-right .cs-tl-num { position: static; display: block; font-size: 1.75rem; margin-bottom: 8px; } .cs-tl-item.is-left .cs-tl-card::after, .cs-tl-item.is-right .cs-tl-card::after { left: auto; right: 100%; border-left-color: transparent; border-right-color: #CA0D2E; } .cs-ug-grid { grid-template-columns: 1fr; } .cs-ug-card { padding: 18px 14px; } .cs-ug-ico { width: 52px; height: 52px; margin: 0 16px 0 0; font-size: 18px; } .cs-ug-card > div { padding-left: 14px; } .cs-hero-grid { grid-template-columns: 1fr; } .cs-hero h1 { font-size: 1.5rem; } .cs-hero .hero-subtitle { font-size: .9375rem; } .cs-highlights { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; } .cs-highlight { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 18px 10px; font-size: .8125rem; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .cs-highlight .hi-ico { width: 44px; height: 44px; font-size: 17px; } } /* Mobile-only Mission/Goal card + principles carousel dots (live renders these only on phones) */ .cs-hub-mobile { text-align: center; padding: 26px 18px 22px; border-radius: 20px; background: linear-gradient(180deg, rgba(60,8,22,.85), rgba(12,6,20,.9)); border: 1px solid rgba(202,13,46,.75); box-shadow: 0 0 30px rgba(202,13,46,.3); } .cs-hub-mobile .cs-hub-kicker { color: #fff; font-size: .8125rem; letter-spacing: .06em; margin-bottom: .6em; } .cs-hub-mobile h2 { font-size: 1.25rem; line-height: 1.3; text-transform: uppercase; margin: 0 0 .6em; } .cs-hub-mobile p { color: #fff; font-size: .9375rem; margin: 0 0 20px; } .cs-hub-mobile-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cs-hub-mobile-icons h3 { font-size: .8125rem; font-weight: 600; line-height: 1.3; margin: 8px 0 0; } .cs-hub-mobile-ico { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; color: #CA0D2E; font-size: 17px; border: 1px solid rgba(202,13,46,.45); } .cs-carousel-dots { display: none; } @media (max-width: 767px) { .cs-section { padding-block: 22px; } .cs-detail .cs-h2 { text-align: center; } .cs-hub-has-mobile .cs-hub-grid { display: none; } /* Overview facts: compact rows, icon inline-start (live mobile-position-inline-start) */ .cs-facts-grid { gap: 12px; padding: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; } .cs-fact-card { flex-direction: row; gap: 12px; margin-top: 0; padding: 16px 14px; } .cs-fact-card .cf-ico { position: static; width: 38px; height: 38px; font-size: 15px; } .cs-fact-card strong { margin: 0 0 .15em; } /* Problem cards: icon left, outlined red */ .cs-problem-cards .cs-grid { gap: 12px; } .cs-problem-cards .cs-glass-card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 14px 16px; } .cs-problem-cards .cs-card-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; font-size: 15px; background: transparent; color: #CA0D2E; border: 1px solid rgba(202,13,46,.6); box-shadow: none; } .cs-problem-cards .cs-glass-card h3 { margin: 0 0 .25em; } /* Principles: one-card swipe carousel */ .cs-principles-title { text-align: center; } .cs-principles-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .cs-principles-grid::-webkit-scrollbar { display: none; } .cs-principle-card { flex: 0 0 100%; min-height: 0; scroll-snap-align: start; } .cs-principle-card:hover { transform: none; } .cs-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .cs-carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.35); cursor: pointer; transition: width .25s, background .25s; } .cs-carousel-dots button.is-active { width: 22px; background: #CA0D2E; } /* Modules: compact zig-zag cards, title + subtitle only (live hides descriptions on phones) */ .cs-modules-grid { flex-direction: column; gap: 12px; } .cs-module-card { flex-basis: auto; width: 80%; padding: 16px 14px; } .cs-module-card:nth-child(even) { margin-left: auto; } .cs-module-card:hover { transform: none; } .cs-module-head { margin-bottom: 0; align-items: center; } .cs-module-card > p, .cs-module-card > .cs-rich { display: none; } /* Results: icon beside the title */ .cs-result-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; text-align: left; padding: 22px 20px; } .cs-result-card .cs-result-ico { margin: 0; } .cs-result-card h3 { margin: 0; } .cs-result-card .cs-check-list { grid-column: 1 / -1; margin-top: 16px; } /* Architecture showcase: small icon inline with the title */ .cs-cards-showcase .cs-arch-card { text-align: left; padding: 20px 18px; } .cs-cards-showcase .cs-arch-head { flex-direction: row; align-items: center; gap: 12px; } .cs-cards-showcase .cs-arch-visual { order: -1; width: 64px; margin: 0; } .cs-cards-showcase .cs-module-sub { text-align: center; } } /* ========================================================================= Mid-page CTA card / closing CTA band ========================================================================= */ .cta-card { background: var(--grad-navy); color: #fff; border-radius: var(--radius-card); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block: var(--space-block); position: relative; overflow: hidden; } .cta-card::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(211,16,39,.4), transparent 70%); right: -60px; top: -60px; } .cta-card h3 { margin: 0; font-size: 1.375rem; color: #fff; position: relative; z-index: 1; } .cta-card > .btn { position: relative; z-index: 1; } .cta-band { background: var(--grad-red); color: #fff; text-align: center; padding-block: var(--space-block); position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 40%); } .cta-band .wrap { position: relative; } .cta-band h2 { color: #fff; margin-bottom: .6em; } .cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 1.75em; } .cta-band .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .statement-banner { background: var(--grad-red); padding-block: 34px; overflow: hidden; } .statement-banner h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); text-align: center; white-space: nowrap; margin: 0; } /* ========================================================================= Client logo strip ========================================================================= */ .logo-strip { display: flex; align-items: center; justify-content: center; gap: clamp(28px,5vw,64px); flex-wrap: wrap; } .logo-strip img { max-height: 34px; width: auto; filter: grayscale(1); opacity: .6; transition: .25s; } .logo-strip img:hover { filter: none; opacity: 1; } .clients-marquee { overflow: hidden; padding: 16px 0; } .clients-marquee .marquee-content { animation: scroll-right 26s linear infinite; align-items: center; } .clients-marquee img { height: 84px; width: auto; margin: 0 52px; filter: grayscale(1); opacity: .8; transition: opacity .25s, filter .25s; } .clients-marquee img:hover { filter: none; opacity: 1; } @media (max-width: 767px) { .clients-marquee img { height: 60px; margin: 0 30px; } } /* ---- FAQ ---------------------------------------------------------------- */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line-200); } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 20px 0; font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; color: var(--navy-900); display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .faq-q::after { content: '+'; font-size: 1.5rem; color: var(--red-600); font-weight: 400; } .faq-item.open .faq-q::after { content: '–'; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--slate-600); } .faq-item.open .faq-a { max-height: 400px; } .faq-a-inner { padding-bottom: 20px; } /* ---- Content body (Gutenberg content areas) ------------------------------*/ .entry-content { max-width: 780px; } .entry-content h2 { margin-top: 1.4em; } .entry-content h3 { margin-top: 1.2em; } .entry-content ul, .entry-content ol { margin: 0 0 1.2em 1.2em; } .entry-content li { margin-bottom: .4em; } .entry-content strong { color: var(--navy-900); } /* ---- Service page: sibling cross-sell ------------------------------------*/ .child-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .child-card { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-card); padding: 26px; transition: .25s; position: relative; } .child-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--navy-800); } .child-card h3 { font-size: 1.0625rem; } .child-card p { font-size: .875rem; color: var(--slate-600); } .child-card.cta-fill { background: var(--grad-navy); color: #fff; display: flex; flex-direction: column; justify-content: center; } .child-card.cta-fill h3 { color: #fff; } /* ---- Contact page ---------------------------------------------------------*/ .contact-hero { background: var(--grad-navy); color: #fff; padding-block: clamp(56px,8vw,96px); position: relative; overflow: hidden; } .contact-hero h1 { color: #fff; } .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; margin-top: -60px; position: relative; z-index: 3; } .contact-info-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card-lg); padding: 36px; } .contact-purpose { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .contact-purpose label { border: 1.5px solid var(--line-200); border-radius: 999px; padding: 9px 16px; font-size: .8125rem; font-weight: 600; cursor: pointer; color: var(--slate-600); display: inline-block; } .contact-purpose input { position: absolute; opacity: 0; width: 1px; height: 1px; } .contact-purpose label:has(input:checked) { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .contact-form-panel { background: var(--grad-navy); border-radius: var(--radius-card); padding: 40px; color: #fff; } .contact-form-panel label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 6px; color: var(--fog-300); } .contact-form-panel .field { margin-bottom: 18px; } .contact-form-panel .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-form-panel input, .contact-form-panel textarea, .contact-form-panel select { width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--hairline-dark-2); border-radius: 8px; color: #fff; padding: 12px 14px; font-family: var(--font-body); font-size: .9375rem; } .contact-form-panel input::placeholder, .contact-form-panel textarea::placeholder { color: var(--slate-400); } /* Light variant — used for "Let's Grow Together" on the homepage, where a navy panel isn't wanted; the main Contact page keeps the navy version. */ .contact-form-panel.form-light { background: #fff; border: 1px solid var(--line-200); box-shadow: var(--shadow-card); color: var(--ink-900); } .contact-form-panel.form-light label { color: var(--slate-600); } .contact-form-panel.form-light input, .contact-form-panel.form-light textarea, .contact-form-panel.form-light select { background: var(--mist-100); border: 1px solid var(--line-200); color: var(--ink-900); } .contact-form-panel.form-light input::placeholder, .contact-form-panel.form-light textarea::placeholder { color: var(--slate-400); } .contact-info-list { margin-top: 8px; } .contact-info-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line-200); font-size: .9375rem; } .contact-info-list li:first-child { border-top: 0; } .contact-info-list .ci-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--mist-100); color: var(--red-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-map { border-radius: var(--radius-card); overflow: hidden; margin-top: 24px; border: 1px solid var(--line-200); } .contact-map iframe { width: 100%; height: 260px; border: 0; display: block; } /* ---- Batch 1: About / Staff / Contact (live-fidelity) ---- */ .page-hero-dark { background: var(--grad-navy); color: #fff; padding-block: clamp(64px, 10vw, 120px); position: relative; overflow: hidden; } .page-hero-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(80,120,255,.18), transparent 45%), radial-gradient(ellipse at 80% 60%, rgba(200,20,50,.12), transparent 40%); pointer-events: none; } .page-hero-dark .wrap { position: relative; z-index: 1; } .page-hero-dark h1 { color: #fff; margin: 0; font-size: clamp(2.25rem, 5vw, 3.5rem); } .page-hero-center { text-align: center; } .page-hero-center h1 { margin-inline: auto; } .line-heading-accent { color: var(--ink-900); } .line-heading-accent::before { content: ''; width: 4px; height: 1.1em; background: var(--brand-red); border-radius: 2px; flex-shrink: 0; } .line-heading-accent::after { background: var(--brand-red); opacity: .35; } .about-who-grid, .about-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .about-who-text p, .about-team-text p, .about-company-head p { color: var(--slate-600); margin-bottom: 1em; line-height: 1.7; } .about-who-media img, .about-team-media img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; box-shadow: var(--shadow-card); } .about-company-head { display: grid; grid-template-columns: minmax(160px, 280px) 1fr; gap: 32px; align-items: start; margin-bottom: clamp(28px, 4vw, 48px); } .about-company-head .line-heading { margin-bottom: 0; } .about-company-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 48px); align-items: center; } .about-company-media video { width: 100%; border-radius: var(--radius-card); display: block; background: #0a0f2a; box-shadow: var(--shadow-card); } .about-stat-stack { display: flex; flex-direction: column; gap: 0; } .about-stat { padding: 22px 8px; border-bottom: 1px solid rgba(202,13,46,.22); } .about-stat:first-child { padding-top: 0; } .about-stat:last-child { border-bottom: 0; padding-bottom: 0; } .about-stat-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.05; color: var(--ink-900); } .about-stat-label { display: block; margin-top: 4px; color: var(--slate-600); font-size: .95rem; } .about-grow-cta .eyebrow { justify-content: flex-start; margin-bottom: 12px; } .about-grow-cta { text-align: left; } .about-grow-cta h2 { max-width: 720px; } .about-grow-cta .hero-cta { justify-content: flex-start; } .about-grow-cta p { margin-left: 0; } .staff-hero { position: relative; min-height: clamp(320px, 48vw, 460px); background-size: cover; background-position: center; color: #fff; display: flex; align-items: center; padding-bottom: 48px; } .staff-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; background: #fff; clip-path: polygon(0 55%, 100% 0, 100% 100%, 0 100%); z-index: 2; } .staff-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,20,60,.82) 0%, rgba(0,20,60,.55) 55%, rgba(0,20,60,.35) 100%); } .staff-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-block: clamp(48px, 7vw, 88px); } .staff-hero h1 { color: #fff; font-size: clamp(1.85rem, 4vw, 2.85rem); margin: 0; line-height: 1.15; } .staff-hero p { color: rgba(255,255,255,.92); font-size: var(--fs-body-lg); margin: 0; line-height: 1.65; } .staff-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .staff-intro-text h2 { margin-bottom: .75em; } .staff-intro-text p { color: var(--slate-600); margin-bottom: 1em; line-height: 1.7; } .staff-intro-media img { width: 100%; border-radius: var(--radius-card); display: block; box-shadow: var(--shadow-card); } .staff-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; } .staff-feature-card { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-card); padding: 28px 24px; box-shadow: var(--shadow-card); } .staff-feature-card h3 { font-size: 1.05rem; margin: 12px 0 10px; } .staff-feature-card p { color: var(--slate-600); font-size: .9375rem; line-height: 1.6; margin: 0; } .staff-feature-ico { width: 48px; height: 48px; border-radius: 12px; background: rgba(202,13,46,.1); color: var(--brand-red); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } .staff-feature-cta { background: var(--grad-red); border: none; color: #fff; display: flex; flex-direction: column; justify-content: center; } .staff-feature-cta h3 { color: #fff; font-size: 1.25rem; margin: 0; } .staff-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .staff-why-card { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-card); padding: 28px 24px; } .staff-why-card h3 { font-size: 1.05rem; margin: 12px 0 10px; } .staff-why-card p { color: var(--slate-600); font-size: .9375rem; line-height: 1.6; margin: 0; } .contact-page-hero { padding-bottom: clamp(100px, 14vw, 160px); } .contact-panel-section { margin-top: -80px; position: relative; z-index: 2; padding-bottom: var(--space-section); } .contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); background: #fff; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card-lg); padding: clamp(28px, 4vw, 48px); } .contact-panel-info h3, .contact-panel-form h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 0 0 14px; color: var(--ink-900); } .contact-panel-info > p { color: var(--slate-600); line-height: 1.7; margin-bottom: 28px; } .contact-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .contact-office h2 { font-size: 1.15rem; margin: 0 0 14px; color: var(--ink-900); } .contact-office-list { list-style: none; margin: 0; padding: 0; } .contact-office-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: .9375rem; color: var(--slate-700); line-height: 1.45; } .contact-office-list a { color: inherit; text-decoration: none; } .contact-office-list a:hover { color: var(--brand-red); } .co-ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem; color: #fff; } .co-ico-red { background: var(--brand-red); } .co-ico-navy { background: var(--brand-navy); } .contact-live-form .field { margin-bottom: 16px; } .contact-live-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-live-form input, .contact-live-form textarea, .contact-live-form select { width: 100%; border: 1px solid var(--line-200); border-radius: 6px; padding: 12px 14px; font: inherit; background: #fff; color: var(--ink-900); } .contact-live-form input::placeholder, .contact-live-form textarea::placeholder { color: var(--slate-400); } .contact-form-notice { background: rgba(0,33,105,.06); border-left: 3px solid var(--brand-navy); padding: 12px 14px; margin-bottom: 18px; font-size: .9375rem; color: var(--slate-700); } .grow-fields-3 { grid-template-columns: 1fr 1fr 1fr; } .contact-form-panel .field-row.grow-fields-3 { grid-template-columns: 1fr 1fr 1fr; } /* ---- About page (legacy unused chrome kept for other templates) -------- */ .about-hero { background: var(--grad-navy); color: #fff; text-align: center; padding-block: clamp(56px,9vw,100px); position: relative; overflow: hidden; } .about-hero .wrap { max-width: 760px; position: relative; z-index: 1; } .about-hero h1 { color: #fff; } .about-hero p { color: var(--fog-300); font-size: var(--fs-body-lg); } .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .about-visual { position: relative; border-radius: var(--radius-card-lg); background: var(--navy-950); aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; } .about-visual .av-badge { position: absolute; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-card-lg); display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: .875rem; color: var(--navy-900); } .about-visual .av-badge .ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(211,16,39,.12); color: var(--red-600); display: flex; align-items: center; justify-content: center; } .about-visual .av-1 { top: 10%; left: 8%; } .about-visual .av-2 { bottom: 12%; right: 8%; } .about-visual .av-core { width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--grad-red); opacity: .8; filter: blur(1px); } .about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .value-card { padding: 28px; border-radius: var(--radius-card); background: #fff; border: 1px solid var(--line-200); } .value-card .v-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(211,16,39,.1); color: var(--red-600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.25rem; } /* ========================================================================= Footer ========================================================================= */ .site-footer { background: var(--navy-950); color: var(--fog-300); } /* Global pre-footer moving text band */ .footer-marquee { overflow: hidden; white-space: nowrap; background: var(--red-600); padding: clamp(18px, 2.4vw, 28px) 0; line-height: 1; } .footer-marquee-track { display: inline-flex; align-items: center; animation: scroll-right 40s linear infinite; will-change: transform; } .footer-marquee-track span { font-family: var(--font-head); font-size: clamp(1.75rem, 4.5vw, 3.25rem); font-weight: 700; color: #fff; padding-right: clamp(48px, 8vw, 120px); flex-shrink: 0; } .footer-main { padding: var(--space-block) 0 40px; } .footer-columns { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 28px; } .footer-logo { margin-bottom: 16px; } .footer-col h4 { color: #fff; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; } .footer-col ul li { margin-bottom: 10px; } .footer-col a { color: var(--fog-300); font-size: .875rem; } .footer-col a:hover { color: #fff; } .footer-social { display: flex; gap: 10px; margin-top: 18px; } .footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: .75rem; } .footer-bottom { border-top: 1px solid var(--hairline-dark); padding: 20px 0; font-size: .8125rem; } .footer-bottom .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } /* ---- Development section ------------------------------------------------ */ .dev-hero { position: relative; min-height: clamp(340px, 52vw, 480px); background-size: cover; background-position: center center; background-repeat: no-repeat; color: #fff; display: flex; align-items: center; padding-bottom: 40px; } .dev-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,20,70,.88) 0%, rgba(0,20,70,.55) 60%, rgba(0,20,70,.35) 100%); } .dev-hero-inner { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 88px); max-width: 720px; margin-right: auto; margin-left: 0; text-align: left; } .dev-hero h1 { color: #fff; margin: 0 0 16px; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; text-align: left; } .dev-hero p { color: rgba(255,255,255,.92); font-size: var(--fs-body-lg); margin: 0; line-height: 1.65; text-align: left; } .dev-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: #fff; clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%); z-index: 2; } .dev-service-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; } .dev-service-stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 12px; width: 100%; } .dev-service-5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 12px; } .dev-service-5 .dev-service-card { flex: 0 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); min-width: 260px; } .dev-service-card { background: #fff; border-radius: var(--radius-card); border: 1px solid var(--line-200); box-shadow: var(--shadow-card); display: flex; flex-direction: column; padding: 20px; gap: 16px; } .dev-service-card-media { border-radius: calc(var(--radius-card) - 4px); overflow: hidden; } .dev-service-card-media img, .dev-service-card > img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: calc(var(--radius-card) - 4px); } .dev-service-stack .dev-service-card-media img { height: 160px; } .dev-service-card-body { padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .dev-service-card-body h3 { margin: 0; } .dev-service-card-body p { color: var(--slate-600); font-size: .9375rem; line-height: 1.6; margin: 0; flex: 1; } .dev-service-card-cta { display: flex; justify-content: center; margin-top: 4px; } .dev-process { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .dev-process-step { flex: 1 1 120px; text-align: center; padding: 20px 12px; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .dev-process-num { display: inline-flex; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center; background: var(--brand-red); color: #fff; font-weight: 800; margin-bottom: 10px; transition: transform .25s ease; } .dev-process-line { flex: 0 0 24px; height: 2px; background: rgba(202,13,46,.35); } @media (hover: hover) and (pointer: fine) { .dev-process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); border-color: rgba(202,13,46,.35); } .dev-process-step:hover .dev-process-num { transform: translateY(-2px) scale(1.06); } } .dev-about-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 48px); align-items: center; } .dev-about-media img { width: 100%; border-radius: var(--radius-card); display: block; box-shadow: var(--shadow-card); } .dev-about-text h2 { margin-bottom: .75em; } .dev-about-text p { color: var(--slate-600); line-height: 1.7; margin: 0; } .dev-about-text p + p { margin-top: 1em; } /* ---- Responsive ------------------------------------------------------- */ .site-header.is-scrolled { box-shadow: 0 4px 20px rgba(10,20,64,.08); } @media (max-width: 1180px) { .footer-columns { grid-template-columns: 1fr 1fr 1fr; } .marketing-image { width: 30%; } .marketing-connector { width: 10%; } .marketing-list { width: 60%; } } @media (max-width: 1024px) { .primary-nav { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 85vw); background: #fff; padding: 90px 24px 24px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.15); z-index: 90; } .primary-nav.is-open { display: block; } body.nav-open { overflow: hidden; } #primary-menu { flex-direction: column; align-items: stretch; gap: 0; } #primary-menu .menu-item { width: 100%; } .sub-menu { position: static; display: none; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; padding-left: 12px; } .menu-item.sub-open > .sub-menu { display: block; } .menu-item.has-children:hover > .sub-menu { display: none; } .menu-item.sub-open.has-children:hover > .sub-menu, .menu-item.sub-open > .sub-menu { display: block; } .site-header-cta { display: none; } .menu-toggle { display: flex; margin-left: auto; } .portfolio-grid, .child-grid, .about-values { grid-template-columns: repeat(2,1fr); } .about-split, .contact-grid, .about-who-grid, .about-team-grid, .about-company-grid, .about-company-head, .staff-hero-inner, .staff-intro-grid, .contact-panel, .contact-offices, .dev-about-split, .dev-service-3 { grid-template-columns: 1fr; } .dev-service-5 .dev-service-card { flex: 0 1 calc(50% - 12px); max-width: calc(50% - 12px); } .dev-service-stack { grid-template-columns: repeat(2, 1fr); } .staff-feature-grid, .staff-why-grid { grid-template-columns: repeat(2, 1fr); } .cs-hub-hero-grid { grid-template-columns: 1fr; } .cs-scroll-down { display: none; } .footer-columns { grid-template-columns: 1fr 1fr; } .contact-panel-section { margin-top: -48px; } .about-grow-cta { text-align: center; } .about-grow-cta .eyebrow, .about-grow-cta .hero-cta { justify-content: center; } .grow-fields-3 { grid-template-columns: 1fr 1fr !important; } .hero-slide { flex-direction: column; min-height: 0; } .hero-slide-text, .hero-slide-photo { width: 100%; } .hero-slide-photo { height: 320px; } .hero-divider { display: none; } .services-4col, .about-row, .solutions-row, .marketing-row, .stats-bento { flex-direction: column; } .about-row-text, .about-row-video { width: 100%; } .solutions-row-text, .solutions-row-visual { flex: 1 1 auto; width: 100%; } .marketing-image, .marketing-list { width: 100%; } .marketing-connector { width: 90px; max-width: 90px; margin-inline: auto; padding: 14px 0; transform: rotate(90deg); } .marketing-list { grid-template-columns: 1fr 1fr; } .sb-col, .sb-col-photo, .sb-col-wide { width: 100%; } } @media (max-width: 767px) { .portfolio-grid, .child-grid, .about-values, .footer-columns, .staff-feature-grid, .staff-why-grid { grid-template-columns: 1fr; } .dev-service-5 .dev-service-card { flex: 0 1 100%; max-width: 100%; } .dev-service-stack { grid-template-columns: 1fr; } .dev-hero { min-height: clamp(280px, 70vw, 380px); background-position: 65% center; padding-bottom: 28px; } .dev-hero-inner { max-width: 100%; padding-block: clamp(36px, 8vw, 56px); } .dev-process-line { display: none; } .footer-bottom .wrap { flex-direction: column; gap: 8px; text-align: center; } .topbar-contact { display: none; } .contact-form-panel .field-row, .contact-live-form .field-row, .grow-fields-3 { grid-template-columns: 1fr !important; } .services-4col .svc-card { min-width: 100%; } .marketing-list { grid-template-columns: 1fr; } .cta-inset-card { width: 100%; padding: 32px 24px; } .why-grid { flex-direction: column; } .why-grid-head { width: 100%; position: static; padding-top: 0; } .why-grid-body { width: 100%; } .staff-hero-inner { gap: 20px; } .contact-panel { padding: 22px 18px; } } /* ------------------------------------------------------------------------ * Digital Marketing * ---------------------------------------------------------------------- */ .dm-service-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; width: 100%; } .dm-service-6 .dev-service-card-media img { height: 180px; } /* ------------------------------------------------------------------------ * AI Bots & Solutions * ---------------------------------------------------------------------- */ .ai-service-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 12px; width: 100%; } .ai-service-4 .dev-service-card-media img { height: 160px; } .graphics-services { display: flex; flex-direction: column; gap: 40px; margin-top: 28px; } .graphics-service { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } .graphics-service.is-flip .graphics-service-media { order: 2; } .graphics-service.is-flip .graphics-service-body { order: 1; } .graphics-service-media { border-radius: var(--radius-card); overflow: hidden; background: var(--mist-100, #f3f5f8); } .graphics-service-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; } .graphics-service-body h3 { margin: 8px 0 12px; font-size: clamp(1.25rem, 2vw, 1.5rem); } .graphics-service-body p { margin: 0; color: var(--slate-600); line-height: 1.7; } .graphics-service-num { display: inline-block; font-weight: 700; font-size: 1.125rem; color: var(--brand-red, #e31c23); } .graphics-contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; margin-top: 28px; color: var(--slate-700); font-weight: 600; } .graphics-contact-row a { color: inherit; text-decoration: none; } .graphics-contact-row a:hover { color: var(--brand-red, #e31c23); } @media (max-width: 1024px) { .dm-service-6 { grid-template-columns: repeat(2, 1fr); } .ai-service-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .dm-service-6 { grid-template-columns: 1fr; } .ai-service-4 { grid-template-columns: 1fr; } .graphics-service, .graphics-service.is-flip { grid-template-columns: 1fr; } .graphics-service.is-flip .graphics-service-media, .graphics-service.is-flip .graphics-service-body { order: unset; } .graphics-contact-row { flex-direction: column; align-items: center; gap: 10px; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; animation-duration: .001ms !important; } }