/* Theme Name: Briskcovey Custom Theme Theme URI: https://briskcovey.com Author: Briskcovey Team Author URI: https://briskcovey.com Description: Production-ready custom WordPress theme for Briskcovey Technologies - Enterprise AI Solutions and Rapid Engineering. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: briskcovey Tags: custom-theme, ai, enterprise, responsive-layout, dark-mode, gsap */ /* CSS Reset & Variable Definitions */ :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 194 100% 50%; /* #00C2FF */ --primary-foreground: 194 100% 8%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 194 100% 50%; --radius: 0.75rem; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: hsl(var(--border)); } html, body { background-color: #0A0D16; color: hsl(var(--foreground)); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* Clip horizontal overflow at the root only. Setting overflow-x on (a non-root element) forces its paired overflow-y to compute as `auto` per the CSS overflow spec, silently turning body into its own scroll container and breaking `position: sticky` for every descendant. Scoping the clip to avoids that while still preventing horizontal scroll. */ html { overflow-x: hidden; } /* Glassmorphism & UI Utilities */ .glass-panel { background-color: rgba(4, 7, 13, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3); } .glass-panel-hover { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .glass-panel-hover:hover { background-color: rgba(15, 23, 42, 0.85); border-color: rgba(0, 194, 255, 0.3); box-shadow: 0 10px 30px -5px rgba(0, 194, 255, 0.15); } .text-gradient-primary { background: linear-gradient(135deg, hsl(var(--primary)) 0%, #38bdf8 50%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bg-gradient-radial-dark { background: radial-gradient(circle at 50% 50%, rgba(0, 194, 255, 0.12) 0%, transparent 70%); } .glow-effect { box-shadow: 0 0 40px -5px rgba(0, 194, 255, 0.25); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #04070D; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.5); } /* Page Transition */ .page-transition { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Header The header overlays the page rather than sitting above it, so a full-bleed hero runs all the way to the top of the viewport behind the logo and nav. At rest it carries no solid background; once main.js adds `.is-scrolled` (see the "Transparent → Solid Header on Scroll" block in main.js) it fades to an opaque bar, so text scrolling underneath never shows through the nav. This used to be scoped to the AI Services & Solutions page, the only template with a full-bleed hero at the time. It is now the sitewide default, and that page-specific override is gone with it. `position: fixed` takes the header out of flow — that is what produces the overlay. A page whose first section is *not* a full-bleed hero therefore needs its own top offset, or its first line lands underneath the bar; see the `--bc-header-h` offsets further down. */ :root { --bc-header-h: 71px; } .bc-site-header { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; background-color: transparent; border-bottom: 1px solid transparent; /* blur(0) rather than `none`: the two are not interpolable, so `none` would make the blur snap on instead of easing in alongside the background. */ backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background-color 320ms ease, border-color 320ms ease, backdrop-filter 320ms ease, -webkit-backdrop-filter 320ms ease; } /* The at-rest scrim: a soft fade, not a flat colour. Hero images in this theme are bright exactly where the nav sits (screens, lab coats, glass buildings) and white links over bare artwork become unreadable. The gradient dies out completely before the header's lower edge, so the bar still reads as transparent while keeping the links legible. It lives on a pseudo-element rather than the header's own background-image because a gradient and `none` are not interpolable: as a background-image it snapped off the instant `.is-scrolled` landed, leaving the nav sitting on bare hero artwork for the 320ms the solid colour was still fading in. As an opacity it crossfades against that colour instead. */ .bc-site-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 8, 15, 0.72), rgba(3, 8, 15, 0)); transition: opacity 320ms ease; } .bc-site-header.is-scrolled::before { opacity: 0; } .bc-site-header.is-scrolled { background-color: rgba(4, 7, 13, 0.92); border-bottom-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Someone who has asked for less motion still needs the background to change — it is what keeps the nav readable — but it should not glide. */ @media (prefers-reduced-motion: reduce) { .bc-site-header, .bc-site-header::before { transition: none; } } /* Templates that open with plain content instead of a full-bleed hero. Everywhere else the first section is a hero whose image or video is meant to run up behind the header, so it must NOT be pushed down — that is the whole point of the overlay. These three have nothing to run behind it, so without the offset their first heading sits under the bar. If a new template is added that starts with a heading rather than a hero, it belongs in this list. `body.archive` covers the category, tag, author and date listings in one go. `body.blog` is deliberately NOT here: this site's front page carries it alongside `body.home`, and matching it would push the homepage hero down. */ body.page-template-page-contact-php #main-content, body.page-template-page-services-php #main-content, body.search #main-content, body.archive #main-content { padding-top: var(--bc-header-h); } .bc-header-inner { /* Above .bc-site-header::before — a positioned pseudo-element would otherwise paint over this static one, putting the scrim in front of the logo and nav instead of behind them. */ position: relative; z-index: 1; width: min(100% - 48px, 1680px); height: 70px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .bc-site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; } .bc-site-logo img, .bc-site-logo .custom-logo { display: block; width: auto; height: auto; max-width: 160px; object-fit: contain; } .bc-primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 42px); flex: 1 1 auto; } .bc-primary-nav>a, .bc-nav-item>a, .bc-mobile-nav a { color: #ffffff; text-decoration: none; font-weight: 500; font-size: 15px; transition: color 180ms ease, opacity 180ms ease; } .bc-primary-nav>a, .bc-nav-item>a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; white-space: nowrap; } .bc-primary-nav>a:hover, .bc-nav-item>a:hover, .bc-mobile-nav a:hover { color: #00c2ff; } .bc-primary-nav>a svg, .bc-nav-item>a svg { width: 14px; height: 14px; stroke-width: 2.2; opacity: 0.72; } .bc-header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } /* ========================================================================== Header "Contact Us" CTA Layer order (all decorative layers sit BEHIND the icon/label because they come earlier in DOM order — no z-index juggling needed): 1. `.bc-header-cta-glow` — a blurred halo on a sibling BEHIND the button (not a child with negative z-index, which would paint *above* the button's own background per CSS stacking rules and smear the halo across the button's face instead of around it). Its opacity/scale breathe continuously for the ambient glow. 2. `.bc-header-cta::before` — the spinning "shine" ring. A static conic-gradient masked down to a thin band (the same mask-composite: exclude technique as `.stats-orbit__card::before` elsewhere in this theme) rotated via `transform`, not by animating the gradient's own angle — keeps this compositor-only. 3. `.bc-header-cta-fx` — an inset:0 wrapper with its own `overflow: hidden`, clipping the two effects below to the pill shape. Deliberately NOT on `.bc-header-cta` itself — that element casts its own box-shadow, and `overflow: hidden` on the same box that casts a shadow clips the shadow too. - `.bc-header-cta-pulse` — a border ring that ping-expands and fades every few seconds (mostly dormant between pulses). - `.bc-header-cta-sheen` — a diagonal light band that sweeps across on a slow loop, translated (not left/right-positioned) so it's compositor-only too. 4. Icon + label, on top of all of the above. Every continuous/periodic animation here only touches `transform` and `opacity` — no layout or paint-triggering properties — so four concurrent loops on a persistent header element stay cheap. All of them (plus the hover transition) are disabled under reduced-motion. ========================================================================== */ .bc-header-cta-wrap { position: relative; display: inline-flex; } .bc-header-cta-glow { position: absolute; inset: -8px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(0, 194, 255, 0.55), transparent 70%); filter: blur(10px); pointer-events: none; animation: bcCtaGlowBreathe 3.2s ease-in-out infinite; will-change: transform, opacity; } @keyframes bcCtaGlowBreathe { 0%, 100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 0.7; transform: scale(1.05); } } .bc-header-cta { position: relative; isolation: isolate; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: 999px; background: linear-gradient(135deg, #00c2ff 0%, #38bdf8 45%, #7c3aed 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 800; box-shadow: 0 14px 34px rgba(0, 194, 255, 0.3); transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, background 260ms ease; } @keyframes bcCtaBorderSpin { to { transform: rotate(360deg); } } .bc-header-cta-fx { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } .bc-header-cta-pulse { position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.75); opacity: 0; pointer-events: none; animation: bcCtaPulseRing 4.5s ease-out infinite; will-change: transform, opacity; } @keyframes bcCtaPulseRing { 0% { transform: scale(1); opacity: 0.5; } 20% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1.2); opacity: 0; } } .bc-header-cta-sheen { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%); transform: translateX(-180%) skewX(-20deg); pointer-events: none; animation: bcCtaSheenSweep 5.5s ease-in-out infinite; will-change: transform; } @keyframes bcCtaSheenSweep { 0%, 82%, 100% { transform: translateX(-180%) skewX(-20deg); } 40% { transform: translateX(320%) skewX(-20deg); } } .bc-header-cta:hover { transform: translateY(-2px) scale(1.045); box-shadow: 0 20px 46px rgba(0, 194, 255, 0.45), 0 0 0 6px rgba(124, 58, 237, 0.16); background: linear-gradient(135deg, #22d3ff 0%, #4cc9ff 45%, #8b5cf6 100%); } .bc-header-cta:active { transform: translateY(-1px) scale(0.98); } .bc-header-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } .bc-header-cta svg { position: relative; width: 15px; height: 15px; stroke-width: 2.6; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); } .bc-header-cta:hover svg { transform: rotate(-14deg) scale(1.15); } @media (prefers-reduced-motion: reduce) { .bc-header-cta, .bc-header-cta::before, .bc-header-cta-glow, .bc-header-cta-pulse, .bc-header-cta-sheen, .bc-header-cta svg { animation: none !important; transition: none !important; } } .bc-mobile-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; } .bc-mobile-toggle svg { width: 21px; height: 21px; } .bc-mobile-drawer { position: fixed; inset: 0; z-index: 80; padding: 24px; background: rgba(4, 7, 13, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); flex-direction: column; justify-content: space-between; } .bc-mobile-drawer.hidden { display: none; } .bc-mobile-drawer.flex { display: flex; } .bc-mobile-drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .bc-mobile-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 22px; } .bc-mobile-nav a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 18px; } .bc-mobile-drawer-bottom { padding-top: 20px; } .bc-mobile-drawer-bottom .bc-header-cta-wrap { display: flex; width: 100%; } .bc-mobile-drawer-bottom .bc-header-cta { width: 100%; } /* ========================================================================== Mega Menu (desktop hover panels) Panels are `position: fixed`, centered on the viewport at a constant 70vw regardless of which trigger opened them (rather than anchored under the individual nav link) — matches a page-centered mega menu. The nav item still spans the full header height with the panel's `top` touching the header's bottom edge exactly, so there's no dead gap for the pointer to cross when moving from the trigger down into the panel. ========================================================================== */ .bc-nav-item { display: flex; align-items: center; height: 92px; } .bc-nav-item>a { height: 100%; } .bc-nav-chevron { transition: transform 220ms ease; } .bc-nav-item.is-open>a .bc-nav-chevron, .bc-nav-item:hover>a .bc-nav-chevron, .bc-nav-item:focus-within>a .bc-nav-chevron { transform: rotate(180deg); } .bc-mega { position: fixed; top: 80px; left: 50%; z-index: 60; width: 70vw; max-width: 1240px; min-width: 700px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -10px); transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 260ms; display: flex; flex-direction: column; background: rgba(9, 14, 23, 0.95); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); overflow: hidden; } .bc-nav-item:hover .bc-mega, .bc-nav-item:focus-within .bc-mega, .bc-nav-item.is-open .bc-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } .bc-mega-scroll { padding: 28px; overflow-y: auto; max-height: min(75vh, 600px); } .bc-mega-cols { display: grid; gap: 8px; } .bc-mega-cols--intro-list-feature { grid-template-columns: 250px minmax(0, 1fr) 250px; } .bc-mega-cols--list-feature { grid-template-columns: minmax(0, 1fr) 280px; } .bc-mega-cols--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bc-mega-col { padding: 0 8px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .bc-mega-col+.bc-mega-col { border-left: 1px solid rgba(255, 255, 255, 0.07); padding-left: 20px; margin-left: 8px; } .bc-mega-group+.bc-mega-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .bc-mega-toplink { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(0, 194, 255, 0.1); border: 1px solid rgba(0, 194, 255, 0.28); color: #00c2ff; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; } .bc-mega-toplink:hover, .bc-mega-toplink:focus-visible { background: rgba(0, 194, 255, 0.18); border-color: rgba(0, 194, 255, 0.5); transform: translateX(2px); } .bc-mega-toplink svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 200ms ease; } .bc-mega-toplink:hover svg { transform: translateX(3px); } .bc-mega-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .bc-mega-heading svg { width: 14px; height: 14px; color: #00c2ff; } .bc-mega-items { display: flex; flex-direction: column; gap: 2px; } .bc-mega-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; opacity: 0; transform: translateY(6px); transition: background 180ms ease, opacity 180ms ease, transform 180ms ease; } .bc-nav-item:hover .bc-mega-item, .bc-nav-item:focus-within .bc-mega-item, .bc-nav-item.is-open .bc-mega-item { opacity: 1; transform: translateY(0); transition-delay: min(calc(var(--i, 0) * 25ms), 260ms); } .bc-mega-item:hover, .bc-mega-item:focus-visible { background: rgba(255, 255, 255, 0.06); } .bc-nav-item:hover .bc-mega-item:hover, .bc-nav-item:focus-within .bc-mega-item:focus-visible { transform: translateX(4px); } .bc-mega-item--plain { padding: 9px 12px; } .bc-mega-item--grid { align-items: center; gap: 10px; padding: 8px 10px; } .bc-mega-item--grid .bc-mega-item-icon { width: 30px; height: 30px; } .bc-mega-item--grid .bc-mega-item-icon svg { width: 15px; height: 15px; } .bc-mega-item--grid .bc-mega-item-title { font-size: 12.5px; font-weight: 600; } .bc-mega-item-plus { flex: 0 0 auto; width: 13px; height: 13px; margin-left: auto; opacity: 0.4; } .bc-mega-item-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 194, 255, 0.1); color: #00c2ff; transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .bc-mega-item-icon svg { width: 16px; height: 16px; } .bc-mega-item:hover .bc-mega-item-icon, .bc-mega-item:focus-visible .bc-mega-item-icon { background: #00c2ff; color: #021019; transform: scale(1.08); } .bc-mega-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .bc-mega-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.92); transition: color 180ms ease; } .bc-mega-item:hover .bc-mega-item-title, .bc-mega-item:focus-visible .bc-mega-item-title { color: #00c2ff; } .bc-mega-item-desc { font-size: 11.5px; color: rgba(255, 255, 255, 0.48); line-height: 1.4; } .bc-mega-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(0, 194, 255, 0.16); color: #00c2ff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.6; } .bc-mega-cta { margin-top: auto; padding: 18px; border-radius: 14px; background: linear-gradient(160deg, rgba(0, 194, 255, 0.14), rgba(0, 194, 255, 0.03)); border: 1px solid rgba(0, 194, 255, 0.2); } .bc-mega-cta p { margin: 0 0 12px; color: rgba(255, 255, 255, 0.82); font-size: 12.5px; font-weight: 600; line-height: 1.45; } .bc-mega-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border-radius: 999px; background: #00c2ff; color: #021019; font-size: 12.5px; font-weight: 800; text-decoration: none; transition: background 180ms ease, transform 180ms ease; } .bc-mega-cta-btn:hover, .bc-mega-cta-btn:focus-visible { background: #28d0ff; transform: translateY(-1px); } .bc-mega-cta-btn svg { width: 14px; height: 14px; } .bc-mega-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .bc-mega-intro-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 194, 255, 0.12); color: #00c2ff; } .bc-mega-intro-icon svg { width: 20px; height: 20px; } .bc-mega-intro-title { margin: 0; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .bc-mega-intro-subtitle { margin: 3px 0 0; color: rgba(255, 255, 255, 0.5); font-size: 12.5px; font-weight: 600; } .bc-mega-divider { height: 1px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.08); } .bc-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .bc-mega-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } .bc-mega-footer p { margin: 0; max-width: 580px; color: rgba(255, 255, 255, 0.72); font-size: 13px; font-weight: 600; line-height: 1.5; } .bc-mega-footer .bc-mega-cta-btn { width: auto; flex: 0 0 auto; padding: 0 22px; } .bc-mega-feature { display: flex; flex-direction: column; } .bc-mega-feature-eyebrow { display: block; margin-bottom: 12px; color: rgba(255, 255, 255, 0.42); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .bc-mega-feature-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); text-decoration: none; transition: border-color 200ms ease, transform 200ms ease; } .bc-mega-feature-card:hover, .bc-mega-feature-card:focus-visible { border-color: rgba(0, 194, 255, 0.4); transform: translateY(-2px); } .bc-mega-feature-card img { width: 100%; height: 120px; display: block; object-fit: cover; } .bc-mega-feature-body { padding: 14px 16px 16px; } .bc-mega-feature-body h4 { margin: 0 0 10px; color: #fff; font-size: 13.5px; font-weight: 800; line-height: 1.35; } .bc-mega-feature-link { display: inline-flex; align-items: center; gap: 6px; color: #00c2ff; font-size: 12px; font-weight: 800; } .bc-mega-feature-link svg { width: 13px; height: 13px; transition: transform 180ms ease; } .bc-mega-feature-card:hover .bc-mega-feature-link svg { transform: translate(2px, -2px); } .bc-nav-item>a:focus-visible, .bc-mega-item:focus-visible, .bc-mega-toplink:focus-visible, .bc-mega-cta-btn:focus-visible, .bc-mega-feature-card:focus-visible { outline: 2px solid #00c2ff; outline-offset: 3px; border-radius: 8px; } @media (max-width: 1200px) { .bc-mega { width: min(90vw, 760px); min-width: 0; } .bc-mega-cols--intro-list-feature, .bc-mega-cols--list-feature { grid-template-columns: minmax(0, 1fr); } .bc-mega-cols--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bc-mega-col+.bc-mega-col { border-left: 0; padding-left: 8px; margin-left: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .bc-mega-feature { display: none; } .bc-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bc-mega-footer { flex-direction: column; align-items: flex-start; } .bc-mega-footer .bc-mega-cta-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .bc-mega, .bc-mega-item { transition: none !important; } } /* ========================================================================== Mobile Drawer Accordion (submenus inside the mobile navigation drawer) ========================================================================== */ .bc-mobile-nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .bc-mobile-nav-row { display: flex; align-items: center; } .bc-mobile-nav-row a { flex: 1 1 auto; padding: 15px 0; border-bottom: 0; } .bc-mobile-nav-chevron-btn { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: none; background: none; color: rgba(255, 255, 255, 0.55); cursor: pointer; } .bc-mobile-nav-chevron-btn svg { width: 18px; height: 18px; transition: transform 260ms ease; } .bc-mobile-nav-item.active .bc-mobile-nav-chevron-btn { color: #00c2ff; } .bc-mobile-nav-item.active .bc-mobile-nav-chevron-btn svg { transform: rotate(180deg); } .bc-mobile-submenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease; } .bc-mobile-nav-item.active .bc-mobile-submenu { max-height: 900px; opacity: 1; transition: max-height 480ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease 60ms; } .bc-mobile-submenu-inner { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 18px 4px; } .bc-mobile-submenu-inner a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border-bottom: 0; color: rgba(255, 255, 255, 0.66); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 180ms ease, color 180ms ease; } .bc-mobile-submenu-inner a:hover, .bc-mobile-submenu-inner a:focus-visible { background: rgba(255, 255, 255, 0.06); color: #00c2ff; } .bc-mobile-submenu-inner a svg { width: 16px; height: 16px; flex: 0 0 auto; color: #00c2ff; } /* ========================================================================== AI Services Hero — full-bleed video hero + scroll-triggered glass header ========================================================================== */ .ai-hero { position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #04070d; } .ai-hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .ai-hero-video-wrap video { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; will-change: transform; } .ai-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 7, 13, 0.86) 0%, rgba(4, 7, 13, 0.55) 32%, rgba(4, 7, 13, 0.72) 68%, rgba(4, 7, 13, 0.94) 100%), radial-gradient(circle at 50% 40%, rgba(0, 194, 255, 0.1) 0%, transparent 60%); } .ai-hero-content { position: relative; z-index: 2; text-align: -webkit-center; } .ai-hero-scroll-cue { position: absolute; bottom: 28px; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.55); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); transition: color 180ms ease; } .ai-hero-scroll-cue:hover { color: #00c2ff; } .ai-hero-scroll-cue svg { width: 16px; height: 16px; animation: aiHeroScrollBounce 1.8s ease-in-out infinite; } .btn-hero-group { margin-top: 30px; } .title-space { margin: 16px 0; } @keyframes aiHeroScrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(6px); opacity: 1; } } @media (max-width: 640px) { .ai-hero { min-height: 100svh; } } @media (prefers-reduced-motion: reduce) { .ai-hero-scroll-cue svg { animation: none; } } /* ========================================================================== AI Delivery Capabilities — glass panel with a 5-up icon/description grid ========================================================================== */ .mx-auto { margin-left: auto; margin-right: auto; } .ai-capabilities-glow { position: absolute; top: -12%; left: 50%; z-index: 0; width: 900px; height: 480px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 194, 255, 0.12) 0%, transparent 70%); pointer-events: none; } .ai-capabilities-heading { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 40px 0 48px; } .ai-capabilities-heading-line { height: 1px; width: clamp(32px, 6vw, 80px); background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.5)); } .ai-capabilities-heading-line:last-child { background: linear-gradient(90deg, rgba(0, 194, 255, 0.5), transparent); } .ai-capabilities-heading-text { flex: 0 0 auto; color: #00c2ff; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .ai-capabilities-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .ai-capabilities-card { position: relative; padding: 32px 24px; transition: background 280ms ease, transform 280ms ease; } .ai-capabilities-card:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.07); } .ai-capabilities-card:hover { background: rgba(255, 255, 255, 0.03); } .ai-capabilities-icon { transition: background 220ms ease, color 220ms ease, transform 220ms ease; } .ai-capabilities-card:hover .ai-capabilities-icon { background: #00c2ff; color: #021019; transform: scale(1.08); } .ai-capabilities-desc { margin-top: 22px; color: rgba(255, 255, 255, 0.72); font-size: 13.5px; line-height: 1.55; } .ai-capabilities-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.35); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .ai-capabilities-card-footer svg { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.35); transition: color 220ms ease, transform 220ms ease; } .ai-capabilities-card:hover .ai-capabilities-card-footer svg { color: #00c2ff; transform: translate(2px, -2px); } @media (max-width: 1024px) { .ai-capabilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-capabilities-card:nth-child(2n+1) { border-left: 0; } .ai-capabilities-card:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.07); } } @media (max-width: 640px) { .ai-capabilities-heading { gap: 10px; } .ai-capabilities-grid { grid-template-columns: minmax(0, 1fr); } .ai-capabilities-card { border-left: 0 !important; } .ai-capabilities-card:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.07); } } @media (prefers-reduced-motion: reduce) { .ai-capabilities-card, .ai-capabilities-icon, .ai-capabilities-card-footer svg { transition: none !important; } } /* ========================================================================== AI Impact Stats — badge/heading intro + a 3x2 stat card grid ========================================================================== */ .ai-impact-glow { position: absolute; top: -8%; left: 50%; z-index: 0; width: 1000px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 194, 255, 0.1) 0%, transparent 70%); pointer-events: none; } .ai-impact-heading { margin-top: 24px; color: #fff; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .ai-impact-subtitle { max-width: 620px; margin: 16px auto 0; color: rgba(255, 255, 255, 0.68); font-size: 16px; line-height: 1.6; } .ai-impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; text-align: left; } .ai-impact-card { position: relative; overflow: hidden; padding: 32px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.35); transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease; } .ai-impact-card::before { content: ""; position: absolute; top: -40%; left: -20%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(0, 194, 255, 0.14) 0%, transparent 70%); pointer-events: none; } .ai-impact-card:hover { transform: translateY(-4px); border-color: rgba(0, 194, 255, 0.32); box-shadow: 0 16px 40px -8px rgba(0, 194, 255, 0.18); } .ai-impact-icon { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0, 194, 255, 0.1); color: #00c2ff; transition: background 220ms ease, color 220ms ease, transform 220ms ease; } .ai-impact-card:hover .ai-impact-icon { background: #00c2ff; color: #021019; transform: scale(1.08); } .ai-impact-value { position: relative; display: block; margin-top: 22px; color: #fff; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .ai-impact-label { position: relative; display: block; margin-top: 10px; color: rgba(255, 255, 255, 0.68); font-size: 14.5px; font-weight: 600; } @media (max-width: 1024px) { .ai-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ai-impact-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .ai-impact-card { padding: 28px; } } @media (prefers-reduced-motion: reduce) { .ai-impact-card, .ai-impact-icon { transition: none !important; } } /* ========================================================================== AI Application Development Tabs — vertical tab list + detail panel ========================================================================== */ .ai-app-tabs-glow { position: absolute; top: 10%; left: 50%; z-index: 0; width: 1000px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 194, 255, 0.09) 0%, transparent 70%); pointer-events: none; } .ai-app-tabs-heading { color: #fff; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .ai-app-tabs-subtitle { margin: 16px auto 0; color: rgba(255, 255, 255, 0.68); font-size: 16px; line-height: 1.6; } .ai-tabs { position: relative; z-index: 1; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 56px; } /* Tab list */ .ai-tabs-list { display: flex; flex-direction: column; gap: 12px; } .ai-tab-trigger { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 16px; border-style: solid; border-width: 1px 1px 1px 3px; border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) transparent; background: rgba(255, 255, 255, 0.02); text-align: left; font-family: inherit; cursor: pointer; transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; } .ai-tab-trigger:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(0, 194, 255, 0.22) rgba(0, 194, 255, 0.22) rgba(0, 194, 255, 0.22) transparent; transform: translateX(3px); } .ai-tab-trigger.is-active { background: linear-gradient(135deg, rgba(0, 194, 255, 0.14), rgba(0, 194, 255, 0.02)); border-color: rgba(0, 194, 255, 0.32) rgba(0, 194, 255, 0.32) rgba(0, 194, 255, 0.32) #00c2ff; box-shadow: 0 14px 8px -14px rgba(0, 194, 255, 0.4); } .ai-tab-trigger:focus-visible { outline: 2px solid #00c2ff; outline-offset: 2px; } .ai-tab-trigger-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 194, 255, 0.1); color: #00c2ff; transition: background 220ms ease, color 220ms ease; } .ai-tab-trigger-icon svg { width: 18px; height: 18px; } .ai-tab-trigger.is-active .ai-tab-trigger-icon { background: #00c2ff; color: #021019; } .ai-tab-trigger-text { min-width: 0; } .ai-tab-trigger-title { display: block; color: #fff; font-size: 14.5px; font-weight: 700; } .ai-tab-trigger-desc { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.5); font-size: 12px; line-height: 1.4; } .ai-tab-trigger.is-active .ai-tab-trigger-desc { color: rgba(0, 194, 255, 0.78); } /* Detail panel */ .ai-tabs-panel-wrap { position: relative; } .ai-tab-panel { padding: 36px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5); } .ai-tab-panel[hidden] { display: none; } .ai-tab-panel-head { display: flex; align-items: flex-start; gap: 16px; } .ai-tab-panel-icon { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(0, 194, 255, 0.12); border: 1px solid rgba(0, 194, 255, 0.3); color: #00c2ff; } .ai-tab-panel-icon svg { width: 24px; height: 24px; } .ai-tab-panel-head h3 { margin: 0; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .ai-tab-panel-head p { margin: 4px 0 0; color: #00c2ff; font-size: 13.5px; font-weight: 600; } .ai-tab-panel-desc { margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); font-size: 14.5px; line-height: 1.7; } .ai-tab-panel-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 24px; } .ai-tab-list-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .ai-tab-list-heading svg { width: 14px; height: 14px; } .ai-tab-list-heading--capabilities { color: #a78bfa; } .ai-tab-list-heading--usecases { color: #f472b6; } .ai-tab-panel-lists ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ai-tab-panel-lists li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255, 255, 255, 0.78); font-size: 13.5px; line-height: 1.5; } .ai-tab-panel-lists li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: #00c2ff; } .ai-tab-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px; border-radius: 999px; background: #f472b6; } .ai-tab-panel-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; } .ai-tab-meta-card { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); } .ai-tab-meta-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .ai-tab-meta-label svg { width: 13px; height: 13px; } .ai-tab-meta-label--benefit { color: #00c2ff; } .ai-tab-meta-label--stack { color: #a78bfa; } .ai-tab-meta-label--timeline { color: #22c55e; } .ai-tab-meta-value { display: block; margin-top: 8px; color: #fff; font-size: 14.5px; font-weight: 700; } .ai-tab-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ai-tab-meta-pills span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); font-size: 11px; font-weight: 600; } @media (max-width: 900px) { .ai-tabs { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { .ai-tab-panel-meta { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ai-tab-panel { padding: 24px; border-radius: 20px; } .ai-tab-panel-lists { grid-template-columns: minmax(0, 1fr); gap: 24px; } } @media (prefers-reduced-motion: reduce) { .ai-tab-trigger, .ai-tab-trigger-icon { transition: none !important; } } /* ========================================================================== AI CTA Band — light premium card breaking up the dark page ========================================================================== */ .ai-cta-card { position: relative; display: flex; align-items: center; gap: 56px; padding: 56px 64px; border-radius: 32px; background: #ffffff; box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.5); transition: transform 320ms ease, box-shadow 320ms ease; } .ai-cta-card:hover { transform: translateY(-3px); box-shadow: 0 36px 84px -18px rgba(0, 0, 0, 0.55); } .ai-cta-card-content { flex: 1 1 420px; min-width: 0; } .ai-cta-card-heading { color: #0b0f19; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; } .ai-cta-card-desc { max-width: 480px; margin-top: 20px; color: #55606f; font-size: 16px; line-height: 1.65; } .ai-cta-card-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 16px 28px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 16px 32px -10px rgba(37, 99, 235, 0.55); transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; } .ai-cta-card-btn:hover { background: #3b76f6; transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.6); } .ai-cta-card-btn svg { width: 16px; height: 16px; transition: transform 220ms ease; } .ai-cta-card-btn:hover svg { transform: translateX(3px); } .ai-cta-card-media { flex: 1 1 420px; min-width: 0; } .ai-cta-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 46px -16px rgba(0, 0, 0, 0.4); transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); } .ai-cta-card:hover .ai-cta-card-media img { transform: scale(1.025); } @media (max-width: 900px) { .ai-cta-card { flex-direction: column; padding: 40px 32px; border-radius: 28px; gap: 32px; } .ai-cta-card-content, .ai-cta-card-media { flex: 1 1 auto; width: 100%; } .ai-cta-card-desc { max-width: none; } } @media (max-width: 640px) { .ai-cta-card { padding: 32px 24px; border-radius: 24px; gap: 28px; } .ai-cta-card-btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .ai-cta-card, .ai-cta-card-media img, .ai-cta-card-btn { transition: none !important; } } /* ========================================================================== AI Solutions We Deliver Across Business Functions — numbered row list ========================================================================== */ .ai-solutions-functions-heading { color: #fff; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .ai-solutions-functions-subtitle { max-width: 830px; margin: 16px auto 0; color: rgba(255, 255, 255, 0.65); font-size: 16px; line-height: 1.65; } .ai-solutions-rows { margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .ai-solutions-row { display: flex; align-items: flex-start; gap: 24px; padding: 32px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: background 240ms ease, padding-left 240ms ease; } .ai-solutions-row:hover { background: rgba(255, 255, 255, 0.02); padding-left: 18px; } .ai-solutions-row-index { flex: 0 0 auto; padding-top: 3px; color: #00c2ff; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; } .ai-solutions-row-divider { flex: 0 0 auto; width: 1px; align-self: stretch; background: rgba(0, 194, 255, 0.35); } .ai-solutions-row-body { flex: 1 1 auto; min-width: 0; } .ai-solutions-row-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .ai-solutions-row-title { color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; } .ai-solutions-row-arrow { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; color: rgba(255, 255, 255, 0.4); transition: color 240ms ease, transform 240ms ease; } .ai-solutions-row:hover .ai-solutions-row-arrow { color: #00c2ff; transform: translate(3px, -3px); } .ai-solutions-row-desc { display: block; margin-top: 10px; max-width: 760px; color: rgba(255, 255, 255, 0.62); font-size: 14.5px; line-height: 1.65; } @media (max-width: 640px) { .ai-solutions-rows { margin-top: 40px; } .ai-solutions-row { gap: 16px; padding: 24px 4px; } .ai-solutions-row:hover { padding-left: 10px; } .ai-solutions-row-title { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .ai-solutions-row, .ai-solutions-row-arrow { transition: none !important; } } /* ========================================================================== Why Choose Briskcovey — blue gradient intro + white accordion panel ========================================================================== */ .ai-why-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border-radius: 32px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55); } .ai-why-intro { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 25% 15%, rgba(59, 130, 246, 0.55), transparent 55%), linear-gradient(160deg, #0c1f52 0%, #081536 55%, #04081c 100%); } .ai-why-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; margin-bottom: 24px; } .ai-why-icon svg { width: 24px; height: 24px; } .ai-why-heading { color: #fff; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; } .ai-why-desc { margin-top: 18px; color: rgba(255, 255, 255, 0.76); font-size: 15px; line-height: 1.7; } .ai-why-accordion { padding: 12px 40px; background: #ffffff; display: flex; flex-direction: column; justify-content: center; } .ai-why-item { border-bottom: 1px solid rgba(10, 20, 40, 0.08); } .ai-why-item:last-child { border-bottom: 0; } .ai-why-question { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 4px; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; } .ai-why-question:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 6px; } .ai-why-index { flex: 0 0 auto; color: #94a3b8; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 220ms ease; } .ai-why-title { flex: 1 1 auto; color: #0b0f19; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; transition: color 220ms ease; } .ai-why-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: #94a3b8; transition: transform 260ms ease, color 220ms ease; } .ai-why-item.is-active .ai-why-index, .ai-why-item.is-active .ai-why-title, .ai-why-item.is-active .ai-why-chevron { color: #2563eb; } .ai-why-item.is-active .ai-why-chevron { transform: rotate(90deg); } .ai-why-answer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease; } .ai-why-item.is-active .ai-why-answer { max-height: 500px; opacity: 1; transition: max-height 480ms cubic-bezier(0.16, 1, 0.3, 1), opacity 380ms ease 60ms; } .ai-why-answer-inner { margin: 0; padding: 0 30px 22px 4px; color: #55606f; font-size: 14.5px; line-height: 1.65; } @media (max-width: 900px) { .ai-why-card { grid-template-columns: minmax(0, 1fr); } .ai-why-intro { padding: 44px 36px; } .ai-why-accordion { padding: 8px 32px 12px; } } @media (max-width: 640px) { .ai-why-intro { padding: 36px 24px; } .ai-why-accordion { padding: 4px 20px 8px; } .ai-why-question { gap: 12px; padding: 18px 2px; } .ai-why-answer-inner { padding-right: 20px; } } @media (prefers-reduced-motion: reduce) { .ai-why-chevron, .ai-why-answer { transition: none !important; } } /* ========================================================================== AI Case Studies — 3-up project carousel ========================================================================== */ .ai-case-studies-glow { position: absolute; top: -6%; left: 50%; z-index: 0; width: 1000px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 194, 255, 0.09) 0%, transparent 70%); pointer-events: none; } .ai-case-studies-heading { position: relative; z-index: 1; color: #fff; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .ai-case-studies-subtitle { position: relative; z-index: 1; max-width: 780px; margin: 16px auto 0; color: rgba(255, 255, 255, 0.65); font-size: 16px; line-height: 1.65; } .ai-case-studies-slider-wrap { position: relative; z-index: 1; margin-top: 56px; padding: 0 64px; } .ai-case-studies-swiper { overflow: hidden; } .ai-case-card { display: flex; flex-direction: column; height: 100%; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.5); transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease; } .ai-case-card:hover { transform: translateY(-6px); border-color: rgba(0, 194, 255, 0.32); box-shadow: 0 30px 60px -18px rgba(0, 194, 255, 0.2); } .ai-case-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #050a12; } .ai-case-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .ai-case-card:hover .ai-case-card-media img { transform: scale(1.06); } .ai-case-card-category { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(4, 7, 13, 0.75); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #00c2ff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .ai-case-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 24px; } .ai-case-card-title { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.32; } .ai-case-card-desc { flex: 1 1 auto; margin-top: 10px; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; line-height: 1.6; } .ai-case-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .ai-case-card-tags span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 600; } .ai-case-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #00c2ff; font-size: 13px; font-weight: 800; text-decoration: none; transition: color 200ms ease; } .ai-case-card-cta svg { width: 15px; height: 15px; transition: transform 200ms ease; } .ai-case-card-cta:hover svg { transform: translateX(3px); } .ai-case-studies-nav { position: absolute; top: 38%; z-index: 5; display: grid; width: 48px; height: 48px; transform: translateY(-50%); place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background 220ms ease, border-color 220ms ease, color 220ms ease; } .ai-case-studies-nav:hover { background: #00c2ff; border-color: #00c2ff; color: #021019; } .ai-case-studies-nav:focus-visible { outline: 2px solid #00c2ff; outline-offset: 3px; } .ai-case-studies-nav.swiper-button-disabled { opacity: 0.3; pointer-events: none; } .ai-case-studies-nav svg { width: 20px; height: 20px; } .ai-case-studies-nav--prev { left: 0; } .ai-case-studies-nav--next { right: 0; } .ai-case-studies-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; } .ai-case-studies-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.2); opacity: 1; cursor: pointer; transition: background 220ms ease, width 220ms ease; } .ai-case-studies-pagination .swiper-pagination-bullet-active { width: 24px; background: #00c2ff; } @media (max-width: 1024px) { .ai-case-studies-slider-wrap { padding: 0 56px; } } @media (max-width: 640px) { .ai-case-studies-slider-wrap { margin-top: 40px; padding: 0; } .ai-case-studies-nav { display: none; } .ai-case-card-title { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .ai-case-card, .ai-case-card-media img, .ai-case-studies-nav { transition: none !important; } } /* ========================================================================== Honest Experiences — GSAP scroll-stacking testimonial cards Each card lives in its own tall `.ai-stack-card-wrap` and is itself `position: sticky`, so the "stacking" positioning is native browser behavior — not a GSAP `pin`. That's deliberate: this page already runs Lenis smooth scroll, and layering GSAP's pin-spacer DOM manipulation on top of virtualized scrolling is exactly where this kind of effect tends to glitch. GSAP (see main.js) only drives the scale/opacity/parallax scrub on each outgoing card as the next one's wrapper scrolls into place — the stacking itself can never desync from the scrollbar because it isn't animated at all. ========================================================================== */ .ai-testimonials-stack-heading { color: #fff; text-align: center; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 64px; } .ai-stack-track { position: relative; max-width: 880px; margin: 0 auto; padding-bottom: 8vh; } .ai-stack-card-wrap { position: relative; display: flex; align-items: flex-start; gap: 20px; justify-content: center; } .ai-stack-card { position: sticky; top: 140px; width: 100%; display: flex; align-items: center; gap: 40px; padding: 40px 44px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55); transform-origin: center top; will-change: transform, opacity; } .ai-stack-card-person { display: flex; flex: 0 0 210px; align-items: center; gap: 14px; } .ai-stack-card-avatar { flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; border: 2px solid rgba(0, 194, 255, 0.35); } .ai-stack-card-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .ai-stack-card-person>span:last-child { display: flex; flex-direction: column; min-width: 0; } .ai-stack-card-name { display: block; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .ai-stack-card-country { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.5); font-size: 13px; font-weight: 600; } .ai-stack-card-quote { flex: 1 1 auto; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 16.5px; font-style: italic; line-height: 1.7; } @media (max-width: 900px) { .ai-stack-card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; } } @media (max-width: 640px) { .ai-stack-card { top: 108px; padding: 26px; border-radius: 20px; gap: 16px; } .ai-stack-card-quote { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .ai-stack-card { transition: none !important; } } /* ========================================================================== Custom AI Solutions for Every Industry — icon grid ========================================================================== */ .ai-industries-glow { position: absolute; top: -8%; left: 50%; z-index: 0; width: 1000px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 194, 255, 0.09) 0%, transparent 70%); pointer-events: none; } .ai-industries-heading { position: relative; z-index: 1; color: #fff; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .ai-industries-subtitle { position: relative; z-index: 1; max-width: 720px; margin: 16px auto 0; color: rgba(255, 255, 255, 0.65); font-size: 16px; line-height: 1.65; } .ai-industries-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; } .ai-industry-card { padding: 28px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 260ms ease, border-color 260ms ease, background 260ms ease, box-shadow 260ms ease; } .ai-industry-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5); } .ai-industry-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; transition: transform 260ms ease; } .ai-industry-card:hover .ai-industry-icon { transform: scale(1.08); } .ai-industry-icon svg { width: 21px; height: 21px; } .ai-industry-title { margin-top: 20px; color: #fff; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; } .ai-industry-desc { margin-top: 8px; color: rgba(203, 213, 225, 0.68); font-size: 13px; line-height: 1.6; } @media (max-width: 1100px) { .ai-industries-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .ai-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 480px) { .ai-industries-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } } @media (prefers-reduced-motion: reduce) { .ai-industry-card, .ai-industry-icon { transition: none !important; } } /* ========================================================================== Your Trusted AI Development Agency — light section, 6-card feature grid ========================================================================== */ .ai-agency-trust-heading { color: #0b0f19; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .ai-agency-trust-subtitle { max-width: 680px; margin: 16px auto 0; color: #55606f; font-size: 16px; line-height: 1.65; } .ai-agency-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; } .ai-agency-trust-card { padding: 32px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .ai-agency-trust-card:hover { transform: translateY(-4px); border-color: rgba(0, 194, 255, 0.32); box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.18); } .ai-agency-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: #fff; transition: transform 260ms ease; } .ai-agency-trust-card:hover .ai-agency-trust-icon { transform: scale(1.08); } .ai-agency-trust-icon svg { width: 22px; height: 22px; } .ai-agency-trust-title { margin-top: 20px; color: #0b0f19; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } .ai-agency-trust-desc { margin-top: 10px; color: #55606f; font-size: 13.5px; line-height: 1.65; } .ai-agency-trust-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(15, 23, 42, 0.08); } .ai-agency-trust-tags span { padding: 5px 12px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 11.5px; font-weight: 600; } @media (max-width: 1024px) { .ai-agency-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ai-agency-trust-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 16px; } .ai-agency-trust-card { padding: 26px; } } @media (prefers-reduced-motion: reduce) { .ai-agency-trust-card, .ai-agency-trust-icon { transition: none !important; } } /* ========================================================================== Trusted Technology Partnerships — light section, partner chip list ========================================================================== */ .ai-tech-partners-heading { color: #0b0f19; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; } .ai-tech-partners-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .ai-tech-partner-chip { padding: 12px 22px; border-radius: 999px; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.08); color: #0b0f19; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .ai-tech-partner-chip:hover { transform: translateY(-2px); background: #fff; border-color: rgba(0, 194, 255, 0.4); box-shadow: 0 10px 24px -10px rgba(0, 194, 255, 0.3); } @media (max-width: 640px) { .ai-tech-partners-list { gap: 8px; margin-top: 24px; } .ai-tech-partner-chip { padding: 10px 16px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .ai-tech-partner-chip { transition: none !important; } } /* ========================================================================== Agile Roadmap to AI Development — 6-step numbered process grid ========================================================================== */ .ai-roadmap-glow { position: absolute; top: -8%; left: 50%; z-index: 0; width: 1000px; height: 520px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 194, 255, 0.09) 0%, transparent 70%); pointer-events: none; } .ai-roadmap-heading { position: relative; z-index: 1; color: #fff; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .ai-roadmap-subtitle { position: relative; z-index: 1; max-width: 620px; margin: 16px auto 0; color: rgba(255, 255, 255, 0.65); font-size: 16px; line-height: 1.65; } .ai-roadmap-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; } .ai-roadmap-card { padding: 28px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); border: 1px solid rgba(0, 194, 255, 0.14); transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; } .ai-roadmap-card:hover { transform: translateY(-4px); border-color: rgba(0, 194, 255, 0.4); box-shadow: 0 24px 48px -20px rgba(0, 194, 255, 0.22); } .ai-roadmap-card-head { display: flex; align-items: center; justify-content: space-between; } .ai-roadmap-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 194, 255, 0.08); border: 1px solid rgba(0, 194, 255, 0.35); color: #00c2ff; transition: transform 260ms ease; } .ai-roadmap-card:hover .ai-roadmap-icon { transform: scale(1.08); } .ai-roadmap-icon svg { width: 20px; height: 20px; } .ai-roadmap-index { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(0, 194, 255, 0.35); color: #00c2ff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .ai-roadmap-title { margin-top: 20px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.32; } .ai-roadmap-desc { margin-top: 10px; color: rgba(255, 255, 255, 0.62); font-size: 13.5px; line-height: 1.65; } .ai-roadmap-list { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 9px; } .ai-roadmap-list li { position: relative; padding-left: 16px; color: #8fdcff; font-size: 12.5px; font-weight: 600; } .ai-roadmap-list li::before { content: ""; position: absolute; top: 6px; left: 0; width: 5px; height: 5px; border-radius: 999px; background: #00c2ff; } @media (max-width: 1024px) { .ai-roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ai-roadmap-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 16px; } .ai-roadmap-card { padding: 24px; } } @media (prefers-reduced-motion: reduce) { .ai-roadmap-card, .ai-roadmap-icon { transition: none !important; } } /* ========================================================================== FAQ + "Have a Query" card Re-skins the sitewide `.faq-item` accordion (see template-parts/home/faq.php and main.js's FAQ Accordion Handler) into a flat divided-row list instead of its default boxed-card look, scoped entirely under `.ai-faq-list` so the homepage FAQ's styling is untouched. ========================================================================== */ .ai-faq-heading { color: #fff; text-align: center; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 56px; } .ai-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; } .ai-faq-list.faq-list { max-width: none; display: flex; flex-direction: column; gap: 0; } .ai-faq-list .faq-item { background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; box-shadow: none !important; } .ai-faq-list .faq-item:last-child { border-bottom: 0; } .ai-faq-list .faq-question { padding: 22px 4px; font-size: 15.5px; font-weight: 700; transition: color 220ms ease; } .ai-faq-list .faq-item.active .faq-question { color: #00c2ff; } .ai-faq-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.4); transition: transform 260ms ease, color 220ms ease; } .ai-faq-list .faq-item.active .ai-faq-chevron { color: #00c2ff; transform: rotate(90deg); } .ai-faq-list .faq-answer-inner { padding: 0 30px 22px 4px; color: rgba(255, 255, 255, 0.6); font-size: 13.5px; line-height: 1.65; } .ai-faq-card { padding: 36px 32px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5); } .ai-faq-card-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: #00c2ff; margin-bottom: 24px; } .ai-faq-card-icon svg { width: 24px; height: 24px; } .ai-faq-card-title { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; } .ai-faq-card-btn { display: flex; align-items: center; justify-content: center; margin-top: 28px; height: 52px; border-radius: 999px; background: #00c2ff; color: #021019; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 16px 32px -10px rgba(0, 194, 255, 0.5); transition: background 200ms ease, transform 200ms ease; } .ai-faq-card-btn:hover { background: #28d0ff; transform: translateY(-2px); } @media (max-width: 900px) { .ai-faq-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ai-faq-heading { margin-bottom: 40px; } .ai-faq-card { padding: 28px 24px; } } @media (prefers-reduced-motion: reduce) { .ai-faq-chevron, .ai-faq-card-btn { transition: none !important; } } /* ========================================================================== Related Blogs — latest post cards ========================================================================== */ .ai-related-blogs-heading { color: #fff; font-size: clamp(28px, 3.6vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 40px; } .ai-related-blogs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ai-related-blog-card { display: block; text-decoration: none; transition: transform 280ms ease; } .ai-related-blog-card:hover { transform: translateY(-4px); } .ai-related-blog-media { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); background: #0b1120; } .ai-related-blog-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .ai-related-blog-card:hover .ai-related-blog-media img { transform: scale(1.06); } .ai-related-blog-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.3); } .ai-related-blog-media-fallback svg { width: 32px; height: 32px; } .ai-related-blog-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 20px; min-height: 2.7em; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; } .ai-related-blog-footer { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .ai-related-blog-readmore { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color 200ms ease, gap 200ms ease; } .ai-related-blog-card:hover .ai-related-blog-readmore { color: #00c2ff; gap: 10px; } .ai-related-blog-readmore svg { width: 14px; height: 14px; } @media (max-width: 1024px) { .ai-related-blogs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ai-related-blogs-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } } @media (prefers-reduced-motion: reduce) { .ai-related-blog-card, .ai-related-blog-media img, .ai-related-blog-readmore { transition: none !important; } } .bc-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #04070d; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .bc-hero-bg, .bc-hero-shade { position: absolute; inset: 0; } .bc-hero-bg { background-position: center right; background-size: cover; } .bc-hero-bg video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center right; filter: brightness(1.08) saturate(1.12) contrast(1.03); } .bc-hero-shade { background: linear-gradient(100deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.6) 32%, rgba(4, 7, 13, 0.28) 55%, rgba(4, 7, 13, 0.08) 75%, rgba(4, 7, 13, 0) 100%); } .bc-hero-inner { position: relative; z-index: 2; margin: 0 auto; padding-top: 90px; padding-bottom: 54px; } .bc-hero-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 13px; border: 1px solid rgba(0, 194, 255, 0.75); border-radius: 999px; color: #00c2ff; background: rgba(0, 194, 255, 0.06); font-size: 12px; font-weight: bold; letter-spacing: 0.25em; line-height: 1; text-transform: uppercase; } .bc-hero-title { max-width: 760px; margin: 24px 0 18px; color: #fff; font-size: clamp(54px, 6.4vw, 58px); font-weight: 900; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; } .bc-hero-spark { position: relative; display: inline-block; width: 0.58em; height: 0.58em; margin-left: 14px; transform: translateY(-0.06em); filter: drop-shadow(0 0 18px rgba(0, 194, 255, 0.8)); } .bc-hero-spark::before, .bc-hero-spark::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 100%; height: 22%; border-radius: 999px; background: #00c2ff; transform: translate(-50%, -50%) rotate(0deg); } .bc-hero-spark::after { transform: translate(-50%, -50%) rotate(90deg); } .bc-hero-copy { max-width: 672px; margin: 0; color: #ffffff; font-size: clamp(18px, 1.55vw, 18px); font-weight: 400; line-height: 1.75; } .bc-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 24px; } .bc-hero-primary, .bc-hero-arrow { display: inline-flex; align-items: center; justify-content: center; height: 49px; border-radius: 999px; background: #00c2ff; color: #ffffff; text-decoration: none; font-weight: 900; box-shadow: 0 18px 44px rgba(0, 194, 255, 0.26); } .bc-hero-primary { min-width: 224px; padding: 0 30px; font-size: 14px; } .bc-hero-arrow { width: 49px; flex: 0 0 49px; } .bc-hero-arrow svg { width: 19px; height: 19px; stroke-width: 2.4; } .bc-hero-pill { width: 224px; height: 54px; display: block; overflow: hidden; border: 1px solid rgba(0, 194, 255, 0.24); border-radius: 999px; background: rgba(4, 7, 13, 0.8); } .bc-hero-pill img { width: 100%; height: 100%; display: block; object-fit: cover; } .bc-hero-compass { position: absolute; left: 20px; bottom: 21px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: rgba(255, 255, 255, 0.78); font-family: Georgia, serif; font-size: 19px; line-height: 1; } .bc-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(100px, 140px)); gap: 16px; margin-top: 30px; position: absolute; bottom: 18px; right: 70px; } .bc-hero-stat { min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; background: hsla(0, 0%, 100%, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .bc-hero-stat img { height: 70px; width: auto; } .bc-hero-stat strong { color: #5f93ff; font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: 0; } .bc-hero-stat span { margin-top: 6px; color: rgba(241, 246, 255, 0.84); font-size: 12px; font-weight: 700; } .bc-services-section { position: relative; overflow: hidden; padding: 88px 0 106px; background: #000000; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .bc-services-inner { /* width: min(100% - 48px, 1140px); */ margin: 0 auto; } .bc-services-header { max-width: 660px; margin: 0 auto; text-align: center; } .bc-section-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 15px; border: 1px solid rgba(0, 194, 255, 0.42); border-radius: 999px; background: rgba(0, 194, 255, 0.1); color: #00c2ff; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; } .bc-section-badge svg { width: 15px; height: 15px; stroke-width: 2.4; } .bc-services-header h2 { margin: 24px 0 0; color: #fff; font-size: clamp(36px, 4vw, 40px); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; } .bc-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 68px; } .bc-service-card { min-height: 286px; display: flex; flex-direction: column; padding: 32px; border: 1px solid #5b5b5b; border-radius: 16px; background: #1b1b1b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } .bc-service-card:hover { transform: translateY(-6px); border-color: #1A3696; box-shadow: 0 8px 20px rgba(26, 54, 150, 0.12), 0 20px 40px rgba(26, 54, 150, 0.18), 0 40px 80px rgba(26, 54, 150, 0.08); } .bc-service-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid #1A3696; border-radius: 12px; background: rgb(193 193 193 / 11%); color: #ffffff; } .bc-service-icon svg { width: 22px; height: 22px; stroke-width: 2; } .bc-service-card h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 900; line-height: 1.28; letter-spacing: -0.02em; } .bc-service-card p { margin: 16px 0 24px; color: #94a3b8; font-size: 14px; font-weight: normal; line-height: 24px; } .bc-service-card a { display: flex; align-items: center; gap: 12px; margin-top: auto; color: #ffffff; text-decoration: none; font-size: 12px; font-weight: 400; letter-spacing: 0.02em; border: 1px solid #ffffff; width: fit-content; padding: 10px 16px; border-radius: 40px; } .bc-service-card a svg { width: 15px; height: 15px; stroke-width: 2; transform: rotate(45deg); } @media (max-width: 1280px) { .bc-header-inner { width: min(100% - 32px, 1140px); height: 78px; } } @media (max-width: 980px) { .bc-header-inner { width: 100%; height: 70px; } .bc-primary-nav, .bc-header-actions .bc-header-cta-wrap { display: none; } .bc-mobile-toggle { display: grid; } .bc-site-logo img, .bc-site-logo .custom-logo { height: 34px; max-width: 176px; } .bc-hero { min-height: 720px; } .bc-hero-inner { width: min(100% - 32px, 1140px); padding-top: 60px; padding-bottom: 42px; } .bc-hero-bg { background-position: 62% center; } .bc-hero-stats { grid-template-columns: repeat(4, minmax(130px, 1fr)); max-width: 520px; margin-top: 24px; } .bc-services-section { padding: 76px 0 88px; } .bc-services-inner { width: min(100% - 32px, 1140px); } .bc-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; } } @media (max-width: 640px) { .bc-header-inner { width: min(100% - 28px, 1140px); } .bc-site-logo img, .bc-site-logo .custom-logo { height: 34px; max-width: 158px; } .bc-hero-pill { display: none; } .bc-hero { min-height: 650px; } .bc-hero-inner { width: min(100% - 28px, 1140px); padding-top: 60px; } .bc-hero-badge { max-width: 100%; font-size: 10px; letter-spacing: 0.24em; } .bc-hero-title { margin-top: 24px; font-size: clamp(34px, 8vw, 58px); line-height: 1.3; } .bc-hero-copy { font-size: 16px; } .bc-hero-actions { align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .bc-hero-primary { min-width: min(100%, 200px); } .bc-hero-pill { width: 178px; height: 48px; } .bc-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; right: 5px; bottom: 5px; } .bc-hero-stat { min-height: 74px; } .bc-hero-stat strong { font-size: 27px; } .bc-hero-compass { display: none; } .bc-services-section { padding: 64px 0 72px; } .bc-services-inner { width: min(100% - 28px, 1140px); } .bc-services-header { text-align: left; } .bc-services-header h2 { font-size: clamp(28px, 10vw, 28px); } .bc-services-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; } .bc-service-card { min-height: 266px; padding: 28px; } } /* ========================================================================== Scroll-Reveal Animations (GSAP + ScrollTrigger, driven by assets/js/main.js) ========================================================================== */ /* Visible by default: no-JS / GSAP-load-failure fallback. Only hidden once `html.js` confirms JS ran, so content never gets stuck invisible. */ .scroll-reveal, .scroll-reveal-item { opacity: 1; } html.js .scroll-reveal, html.js .scroll-reveal-item { opacity: 0; /* transform is set inline by GSAP right before animating; this only prevents a pre-JS flash of the final (visible) state. */ } /* Respect reduced-motion at the CSS layer too, as a safety net alongside the JS-level check in main.js. */ @media (prefers-reduced-motion: reduce) { html.js .scroll-reveal, html.js .scroll-reveal-item { opacity: 1; } } /* Transformation section: pinned sequential card reveal (see main.js). Only the first card starts visible; the rest are hidden pre-animation so there's no flash of all-cards-visible before GSAP sets their positions. */ /* html.js [data-pin-reveal] .bc-service-card:not(:first-child) { opacity: 0; } */ @media (prefers-reduced-motion: reduce) { html.js [data-pin-reveal] .bc-service-card:not(:first-child) { opacity: 1; } }