/* =========================================================== VISIBILITY FIX — restore light backgrounds for sections that use dark text (#000/#2c2c2c/#333 etc.) but had no background of their own, so they no longer sit invisible against the page's black body background. Applies site-wide since every service page links this stylesheet after its inline critical CSS, so these rules win the cascade. =========================== */ .clientLogos, .tableMain, .flutterReact, .swo, .cspSlider, .crossTabs, .advancedTech, .industrySpecific, .odooKeyFeatures, .whyChoose { background-color: #ffffff; } /* Comparison-table body cells inherited the page's global white body text color (no color of their own), making the first two columns invisible against the table's white background. */ .tableMain .cmp-table td { color: #2c2c2c; } .tableMain .cmp-table tbody td:last-child { color: #EE3D25; } /* =========================== RESET & BASE =========================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --red: #EE3D25; --red-bright: #FF6A4D; --black: #0a0a0a; --panel: #141414; --panel-light: #1c1c1c; --text-white: #ffffff; --text-gray: #b3b3b3; --text-gray-dim: #8a8a8a; --border-dim: #2a2a2a; --font: 'Segoe UI', Arial, Helvetica, sans-serif; } /* Off-canvas mobile nav/mega-menu panels use position:fixed + transform to slide in from off-screen. Even though they're translated out of view, browsers still extend the document's scrollable width to fit them unless overflow-x is clipped here — that was cutting every page's visible content roughly in half on mobile. */ /* NOTE: overflow-x MUST be "clip" here, not "hidden". Setting overflow-x to any non-"visible"/"clip" value (like "hidden") forces the browser to also compute overflow-y as "auto" on this element (per the CSS Overflow spec's paired-axis rule), which turns / into a scroll container of their own. That breaks position:sticky for every descendant on the page (their sticky offset gets computed against this new container instead of the real viewport), which is why sections like the sticky case-studies stack on the homepage stopped pinning to the top after the first card. "clip" is exempt from that forcing rule, so it still clips horizontal overflow without creating a scroll container. */ html { overflow-x: clip; width: 100%; } body { font-family: var(--font); background: var(--black); color: var(--text-white); overflow-x: clip; width: 100%; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; } /* =========================== HEADER / TOP BAR =========================== */ .site-header { position: relative; background: var(--black); z-index: 1000; } .header-bar { width: 100%; border-bottom: 3px solid var(--red); position: relative; /* Must stay above .mega-overlay (900) so the off-canvas mobile nav it contains stays clickable once the dimmed backdrop is active, but below .mega-menu (950 desktop / 1060 mobile) so the drill-down submenu panel still visually covers the nav list when it opens. */ z-index: 1000; } .header-inner { max-width: 1500px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; gap: 24px; } .logo img { height: 34px; display: block; object-fit: contain; } .logo-fallback { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 0.5px; } /* .main-nav .nav-link { color: #ffffff !important; } */ .main-nav ul { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; } .nav-link { font-size: 15px; font-weight: 500; color: var(--text-white) !important; padding: 8px 0; position: relative; white-space: nowrap; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s ease; } .nav-item.is-open .nav-link, .nav-link:hover { color: var(--text-white); } .nav-item.is-open .nav-link::after, .nav-link:hover::after { transform: scaleX(1); } /* Static (non-clickable) nav label, e.g. "Platforms" until it has a real destination. Keeps the same look but no pointer/hover affordance. */ .nav-link--static { cursor: default; opacity: 1; } .nav-link--static:hover { color: var(--text-white) !important; } .btn-discussion { background: var(--red); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 22px; border-radius: 4px; white-space: nowrap; border: 1.5px solid var(--red); transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; display: inline-block; position: relative; overflow: hidden; } .btn-discussion::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); transform: translateX(-105%); transition: transform 0.45s ease; pointer-events: none; } .btn-discussion:hover { background: transparent; border-color: #ffffff; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(238, 61, 37, 0.35); } .btn-discussion:hover::before { transform: translateX(0); } /* =========================== MOBILE HEADER TOGGLE =========================== */ .mobile-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; min-width: 40px; background: transparent; border: none; padding: 0; position: relative; z-index: 1100; } .mobile-toggle-bar { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--text-white); transition: transform 0.25s ease, opacity 0.2s ease; } .site-header.mobile-nav-open .mobile-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.mobile-nav-open .mobile-toggle-bar:nth-child(2) { opacity: 0; } .site-header.mobile-nav-open .mobile-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Back button injected at the top of each mega-menu for mobile drill-down */ .mega-back { display: none; align-items: center; gap: 8px; width: 100%; padding: 16px 20px; font-size: 14px; font-weight: 600; color: var(--text-white); background: transparent; border: none; border-bottom: 1px solid var(--border-dim); text-align: left; } .mega-back svg { width: 16px; height: 16px; flex-shrink: 0; } /* Cloned mobile CTA is desktop-hidden by default; the media query below turns it back on only inside the off-canvas nav on small screens. */ .btn-discussion-mobile { display: none; } /* Dedicated submenu-expand button, injected by script.js next to each mega nav item's link. Hidden on desktop; the media query below turns it on for mobile so tapping the label still visits the page while tapping this arrow expands the drill-down panel. */ .mega-toggle { display: none; } @media (max-width: 900px) { .header-inner { padding: 12px 20px; gap: 14px; } .mobile-toggle { display: flex; } /* Off-canvas main nav panel */ .main-nav { position: fixed; top: var(--header-height, 66px); right: 0; width: min(88vw, 360px); height: calc(100vh - var(--header-height, 66px)); background: var(--panel); border-left: 1px solid var(--border-dim); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1050; } .site-header.mobile-nav-open .main-nav { transform: translateX(0); } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; } .main-nav .nav-item { border-bottom: 1px solid var(--border-dim); } .main-nav .nav-link { display: flex; align-items: center; padding: 16px 22px; font-size: 16px; white-space: normal; } /* Items with a submenu become a two-target row: the label (left) is a normal link that navigates to its page, and the arrow button (right) expands the drill-down panel. Keeps both tap targets full height. */ .main-nav .nav-item.has-mega { display: flex; align-items: stretch; } .main-nav .nav-item.has-mega .nav-link { flex: 1; min-width: 0; padding-right: 10px; } .main-nav .mega-toggle { display: flex; align-items: center; justify-content: center; width: 54px; min-width: 54px; background: transparent; border: none; border-left: 1px solid var(--border-dim); color: var(--text-white); } .main-nav .mega-toggle::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s ease; flex-shrink: 0; } .main-nav .nav-item.is-open .mega-toggle::before { transform: rotate(45deg); } .nav-item.is-open .nav-link::after { display: none; } .header-inner > .btn-discussion { display: none; } .main-nav .btn-discussion-mobile { display: block; margin: 6px 22px 18px; text-align: center; } /* Mega menus become full-screen drill-down panels on mobile */ .mega-menu { position: fixed; top: var(--header-height, 66px); left: auto; right: 0; bottom: 0; width: min(88vw, 360px); background: var(--panel); border-top: none; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1060; opacity: 1; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform 0.25s ease; } .mega-menu.is-visible { visibility: visible; pointer-events: auto; transform: translateX(0); } .mega-back { display: flex; } .mega-inner, .svc-inner { flex-direction: column; padding: 8px 20px 28px; gap: 24px; } .mega-col-art { display: none; } .mega-col-list { min-width: 0; } } @media (max-width: 380px) { .main-nav, .mega-menu { width: 100vw; } } /* =========================== OVERLAY =========================== */ .mega-overlay { position: fixed; top: var(--header-height, 71px); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 900; } .site-header.menu-open .mega-overlay, .site-header.mobile-nav-open .mega-overlay { opacity: 1; pointer-events: auto; } /* =========================== MEGA MENU SHELL =========================== */ .mega-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--border-dim); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease; z-index: 950; } .mega-menu.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .mega-inner { max-width: 1500px; margin: 0 auto; padding: 40px 32px; display: flex; gap: 40px; } /* shared list column (left nav inside mega menu) */ .mega-col-list { display: flex; flex-direction: column; min-width: 290px; background: var(--panel-light); border-radius: 6px; padding: 6px; flex-shrink: 0; align-self: flex-start; gap: 2px; } .mega-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 15px; font-weight: 500; color: var(--text-white); background: transparent; border: none; border-radius: 4px; text-align: left; width: 100%; border-bottom: 1px solid var(--border-dim); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, padding-left 0.2s ease; } .mega-col-list > *:last-child { border-bottom: none; } .mega-list-item:hover { background: var(--red); color: #ffffff; border-bottom-color: var(--red); padding-left: 20px; } .mega-list-item:hover .mega-icon { color: #ffffff; transform: scale(1.08); } .mega-list-item.is-active { background: var(--red); color: #ffffff; border-bottom: 1px solid var(--red); } .mega-list-item.is-active:hover { background: var(--red); color: #ffffff; border-bottom-color: var(--red); padding-left: 20px; } .mega-list-item.is-active:hover .mega-icon { color: #ffffff; transform: scale(1.08); } .mega-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; color: inherit; transition: transform 0.2s ease; } .mega-icon svg { width: 100%; height: 100%; } /* =========================== ABOUT US MENU =========================== */ .mega-about-layout { align-items: center; } .mega-col-feature { flex: 1; max-width: 420px; } .mega-col-feature h3 { font-size: 26px; font-weight: 700; margin-bottom: 14px; } .mega-col-feature p { font-size: 15px; color: var(--text-gray); line-height: 1.6; margin-bottom: 22px; } .btn-discussion--inline { padding: 13px 24px; } .mega-col-art { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .art-circle { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #EE3D25 0%, #8a0e10 60%, #4a0608 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .art-bars { width: 70px; height: 70px; color: #fff; opacity: 0.95; } .art-circle-img { width: 200px; height: 200px; border-radius: 50%; display: block; object-fit: cover; } /* =========================== SERVICES MENU =========================== */ .mega-services-layout { position: relative; padding-bottom: 24px; } .mega-col-links { display: flex; gap: 60px; flex: 1; padding-top: 4px; } .mega-link-group { display: flex; flex-direction: column; gap: 22px; } .mega-arrow-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--text-white); white-space: nowrap; transition: color 0.12s ease, gap 0.12s ease; } .mega-arrow-link svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.15s ease; } .mega-arrow-link:hover { color: var(--red); gap: 12px; } .mega-arrow-link:hover svg { transform: translateX(2px); } .mega-arrow-link--white { color: var(--text-white); } .mega-watermark { position: absolute; top: 30px; right: 32px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; z-index: 0; } .wm-line { font-size: 30px; font-weight: 800; color: rgba(255,255,255,0.045); letter-spacing: 0.5px; white-space: nowrap; } .mega-cta-bar { background: #f3f3f3; color: #111; margin: 0 32px 32px; border-radius: 6px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 15px; font-weight: 500; } .mega-cta-bar .btn-discussion { flex-shrink: 0; } /* =========================== INDUSTRIES MENU =========================== */ .mega-industries-layout { align-items: flex-start; } .mega-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 300px; background: var(--panel-light); border-radius: 6px; padding: 6px; flex-shrink: 0; align-self: flex-start; } .mega-grid-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 14px; font-weight: 500; color: var(--text-white); background: transparent; border: none; border-radius: 4px; text-align: left; width: 100%; transition: background 0.2s ease, color 0.2s ease; } .mega-grid-item:hover { background: var(--red); color: #ffffff; } .mega-grid-item.is-active { background: var(--red); color: #ffffff; } .mega-col-detail { flex: 1; display: flex; flex-direction: column; } .mega-col-detail .detail-desc { font-size: 15px; color: var(--text-gray); line-height: 1.6; margin-bottom: 22px; max-width: 700px; } .mega-col-detail h4 { font-size: 16px; font-weight: 700; margin-bottom: 14px; } .detail-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 26px; } .detail-links a { display: inline-block; width: auto; font-size: 14px; color: var(--text-gray); text-decoration: underline; text-decoration-color: var(--text-gray-dim); } .detail-links a:hover { color: var(--text-white); } .detail-bullet { display: flex; align-items: center; gap: 10px; } .detail-bullet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--text-gray-dim); flex-shrink: 0; } .detail-image { width: 100%; max-width: 760px; height: 220px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #0d2840 0%, #103a52 100%); position: relative; } .detail-image svg { width: 100%; height: 100%; } .detail-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* =========================== RESOURCES MENU =========================== */ .mega-resources-layout { align-items: flex-start; } .mega-resources-layout .mega-col-list { min-width: 290px; } .mega-resource-panel { display: flex; align-items: flex-start; gap: 32px; flex: 1; } .mega-blog-card { flex: 1; max-width: 260px; display: flex; flex-direction: column; gap: 14px; } .mega-blog-img { width: 100%; height: 140px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); } .mega-blog-img svg, .mega-blog-img img { width: 100%; height: 100%; display: block; object-fit: cover; } .mega-blog-card p { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-white); } .mega-col-viewall { align-self: flex-end; margin-left: auto; white-space: nowrap; padding-top: 6px; } .mega-col-viewall .mega-arrow-link { font-weight: 600; } /* Podcast cards */ .mega-podcast-card { flex: 1; max-width: 260px; display: flex; flex-direction: column; gap: 14px; } .mega-podcast-img { width: 100%; height: 320px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #2a0a0a 0%, #5a1010 100%); } .mega-podcast-img img { width: 100%; height: 100%; display: block; object-fit: cover; } .mega-podcast-card p { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text-white); } /* App Cost Calculator panel */ .mega-calc-panel { align-items: center; justify-content: space-between; gap: 48px; } .mega-calc-text { max-width: 420px; flex-shrink: 0; } .mega-calc-text h3 { font-size: 26px; font-weight: 700; margin-bottom: 14px; } .mega-calc-text p { font-size: 15px; color: var(--text-gray); line-height: 1.6; margin-bottom: 22px; } .mega-calc-text .mega-arrow-link { font-weight: 600; font-size: 15px; } .mega-calc-img { flex: 1; max-width: 420px; height: 220px; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #2a0a0a 0%, #c83c32 100%); } .mega-calc-img img { width: 100%; height: 100%; display: block; object-fit: cover; } /* generic fallback tint if an image 404s and gets removed */ .img-fallback { display: flex; align-items: center; justify-content: center; } /* =========================== PAGE PLACEHOLDER =========================== */ .page-placeholder { padding: 80px 32px; text-align: center; color: var(--text-gray); font-size: 16px; } /* =========================== RESPONSIVE =========================== */ @media (max-width: 1100px) { .main-nav ul { gap: 18px; } .nav-link { font-size: 14px; } .mega-inner { flex-direction: column; } .mega-watermark { display: none; } } @media (max-width: 768px) { .mega-col-grid { grid-template-columns: 1fr; } } /* =========================== HERO BANNER =========================== */ .hero-banner { position: relative; width: 100%; height: 100vh; min-height: 500px; overflow: hidden; background: #0a0a0a; } .hero-banner--fallback { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); } .hero-video { background: #0a0a0a; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.92) 100% ); } .hero-content { position: absolute; bottom: 140px; left: 60px; z-index: 10; } .hero-sub { font-size: 30px; font-weight: 400; color: #ffffff; margin-bottom: 8px; letter-spacing: 0.2px; } .hero-title { font-size: clamp(56px, 6.5vw, 96px); font-weight: 800; color: #ffffff; line-height: 1.0; letter-spacing: -1px; } .hero-cta { position: absolute; bottom: 110px; right: 60px; z-index: 10; width: 140px; height: 140px; border-radius: 50%; border: 1.5px solid #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #ffffff; text-decoration: none; gap: 5px; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease; background: rgba(238, 61, 37, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: heroCtaPulse 2.6s ease-in-out infinite, heroCtaSpin 14s linear infinite; will-change: transform; } @keyframes heroCtaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); } 50% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } } @keyframes heroCtaSpin { 0% { border-color: #ffffff; } 50% { border-color: rgba(255, 255, 255, 0.45); } 100% { border-color: #ffffff; } } .hero-cta:hover { background: #c92e1a; border-color: #ffffff; color: #ffffff; transform: scale(1.1) rotate(-4deg); animation-play-state: paused; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } .hero-cta-arrow { font-size: 32px; line-height: 1; display: inline-block; transition: color 0.22s ease, transform 0.3s ease; } .hero-cta:hover .hero-cta-arrow { color: #ffffff; transform: translate(3px, -3px) rotate(8deg); } .hero-cta-text { font-size: 16px; line-height: 1.45; letter-spacing: 0.2px; transition: color 0.22s ease, transform 0.25s ease; } .hero-cta:hover .hero-cta-text { color: #ffffff; transform: translateY(-1px); } .hero-cta-text strong { display: block; font-weight: 700; } @media (max-width: 768px) { .hero-content { bottom: 110px; left: 24px; } .hero-sub { font-size: 22px; } .hero-cta { bottom: 24px; right: 24px; width: 110px; height: 110px; } .hero-cta-arrow { font-size: 20px; } .hero-cta-text { font-size: 11px; } } /* =========================== LOGO ANIMATION =========================== */ .logo-animated { display: flex; align-items: center; gap: 10px; } .logo-icon-anim { width: 36px; height: 36px; flex-shrink: 0; } /* bars animate up from bottom on load */ .logo-bar { transform-origin: bottom center; transform-box: fill-box; animation: barGrow 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .logo-bar-1 { animation-delay: 0.05s; } .logo-bar-2 { animation-delay: 0.15s; } .logo-bar-3 { animation-delay: 0.25s; } .logo-bar-4 { animation-delay: 0.35s; } @keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .logo-text-anim { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0.3px; animation: fadeSlideIn 0.55s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* also animate the real logo img if it loads */ .logo img { animation: fadeSlideIn 0.55s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both; } /* =========================== SERVICES MEGA MENU – DARK LAYOUT =========================== */ .mega-menu--light { background: var(--panel); color: var(--text-white); border-top: 1px solid var(--border-dim); } .svc-inner { max-width: 1500px; margin: 0 auto; padding: 36px 40px 32px; } /* ---- top section ---- */ .svc-section-title { font-size: 17px; font-weight: 700; color: var(--text-white); margin-bottom: 22px; } .svc-grid--top { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0; } .svc-divider { border: none; border-top: 1px solid var(--border-dim); margin: 28px 0; } /* ---- bottom section ---- */ .svc-grid--bottom { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0; } /* ---- group ---- */ .svc-group { padding: 0 28px 0 0; border-right: 1px solid var(--border-dim); margin-right: 0; } .svc-group:last-child { border-right: none; padding-right: 0; } .svc-group + .svc-group { padding-left: 28px; } .svc-group--sub { border-right: none; padding-top: 44px; } .svc-group--wide .svc-group-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } /* ---- group header ---- */ .svc-group-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .svc-icon-box { width: 38px; height: 38px; border-radius: 10px; background: #EE3D25 !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #ffffff; transition: background 0.2s ease, transform 0.2s ease; } .svc-icon-box svg { width: 20px; height: 20px; } .svc-group-title { font-size: 15px; font-weight: 700; color: var(--text-white); transition: color 0.2s ease; } .svc-group-header:hover .svc-group-title { color: var(--red) !important; } .svc-group-header:hover .svc-icon-box { background: var(--red-bright) !important; transform: scale(1.08); box-shadow: 0 8px 20px rgba(238, 61, 37, 0.45); } /* ---- link list ---- */ .svc-link-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .svc-link-list--offset { padding-top: 0; } .svc-link-list li a { font-size: 14px; color: var(--text-gray); text-decoration: none; transition: color 0.15s ease; display: inline-block; } .svc-link-list li a:hover { color: var(--red); } @media (max-width: 1100px) { .svc-grid--top { grid-template-columns: 1fr 1fr; } .svc-grid--bottom { grid-template-columns: 1fr 1fr; } .svc-group--wide { grid-column: span 2; margin-top: 20px; border-right: none; border-top: 1px solid var(--border-dim); padding-top: 20px; } } @media (max-width: 768px) { .svc-grid--top, .svc-grid--bottom { grid-template-columns: 1fr; } .svc-group { border-right: none; border-bottom: 1px solid var(--border-dim); padding: 0 0 16px 0; margin-bottom: 16px; } .svc-group + .svc-group { padding-left: 0; } } /* =========================== INDUSTRIES – 2-COLUMN LIST =========================== */ .ind-grid-2col { display: grid !important; grid-template-columns: 1fr 1fr !important; min-width: 340px; width: 340px; } .ind-grid-2col .mega-grid-item { border-bottom: 1px solid var(--border-dim); border-radius: 0; padding: 13px 16px; font-size: 14px; font-weight: 500; color: var(--text-white); background: transparent; transition: background 0.2s ease, color 0.2s ease; display: flex; align-items: center; gap: 10px; } .ind-grid-2col .mega-grid-item:hover { background: var(--red); color: #ffffff; border-bottom-color: var(--red); } .ind-grid-2col .mega-grid-item.is-active { background: var(--red); color: #ffffff; border-bottom-color: var(--red); } .ind-grid-2col .mega-icon { width: 16px; height: 16px; flex-shrink: 0; } .mega-item-arrow { width: 15px; height: 15px; flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.55; transform: translateX(-3px); transition: opacity 0.2s ease, transform 0.2s ease; } .mega-item-arrow svg { width: 100%; height: 100%; } .ind-grid-2col .mega-grid-item:hover .mega-item-arrow, .ind-grid-2col .mega-grid-item.is-active .mega-item-arrow { opacity: 1; transform: translateX(0); } /* =========================== INDUSTRIES – RED UNDERLINE ON HOVER/ACTIVE =========================== */ .ind-grid-2col .mega-grid-item { position: relative; } .ind-grid-2col .mega-grid-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; /* background: #e8222a; */ transform: scaleX(0); transform-origin: left center; transition: transform 0.18s ease; } .ind-grid-2col .mega-grid-item:hover::after, .ind-grid-2col .mega-grid-item.is-active::after { transform: scaleX(1); } /* detail panel links – red underline on hover */ .detail-links a { text-decoration: none !important; position: relative; padding-bottom: 2px; color: var(--text-gray); transition: color 0.15s ease; } .detail-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 0.18s ease; } .detail-links a:hover { color: var(--red) !important; } .detail-links a:hover::after { transform: scaleX(1); } /* =========================== PARTNERSHIPS MARQUEE STRIP =========================== */ .partners-strip { background: var(--black); border-bottom: 1px solid var(--border-dim); overflow: hidden; } .partners-inner { display: flex; align-items: center; max-width: 100%; padding: 18px 32px; gap: 24px; } .partners-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-white); white-space: nowrap; flex-shrink: 0; } .partners-dot { width: 8px; height: 8px; border-radius: 50%; background: #EE3D25 !important; flex-shrink: 0; display: inline-block; } .partners-sep { width: 1px; height: 22px; background: var(--border-dim); flex-shrink: 0; } .partners-track-wrap { flex: 1; overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .partners-track { display: flex; width: max-content; animation: partnersScroll 24s linear infinite; } .partners-track:hover { animation-play-state: paused; } .partners-set { display: flex; align-items: center; gap: 40px; padding-right: 40px; flex-shrink: 0; } .partner-logo { display: flex; align-items: center; flex-shrink: 0; transition: opacity 0.2s ease, transform 0.2s ease; opacity: 0.9; width: 100px; height: 40px; overflow: hidden; border-radius: 8px; background: #1c1c1c; border: 1px solid #2a2a2a; } .partner-logo:hover { opacity: 1; transform: scale(1.05); } .partner-logo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } .partner-logo svg { flex-shrink: 0; } .partner-logo em { font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: 0.2px; } .partner-rating { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #ffffff; white-space: nowrap; } .partner-star { width: 13px; height: 13px; fill: var(--red); flex-shrink: 0; } @keyframes partnersScroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (max-width: 768px) { .partners-inner { padding: 14px 20px; gap: 14px; } .partners-label { font-size: 12px; } .partner-logo em { font-size: 15px; } .partners-set { gap: 24px; padding-right: 24px; } /* .partner-logo { width: 96px; height: 38px; padding: 6px 10px; } */ } /* =========================== WHAT WE OFFER – STICKY SCROLL =========================== */ .wwo-section { background: var(--black); padding: 80px 0 100px; border-top: 1px solid var(--border-dim); } .wwo-inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; display: flex; gap: 80px; align-items: flex-start; } /* LEFT sticky column */ .wwo-left { flex: 0 0 420px; position: sticky; top: 120px; } .wwo-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-gray); margin-bottom: 20px; letter-spacing: 0.3px; } .wwo-dot { width: 8px; height: 8px; border-radius: 50%; background: #EE3D25; flex-shrink: 0; } .wwo-heading { font-size: clamp(32px, 3.2vw, 48px); font-weight: 800; color: #ffffff; line-height: 1.15; margin-bottom: 22px; } .wwo-accent { color: #EE3D25; } .wwo-desc { font-size: 15px; color: var(--text-gray); line-height: 1.75; margin-bottom: 36px; max-width: 380px; } .wwo-btn { display: inline-block; background: #EE3D25; color: #fff; font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 6px; border: 1.5px solid #EE3D25; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .wwo-btn:hover { background: transparent; border-color: #ffffff; color: #ffffff; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3); } /* =========================================================== UNIFIED BUTTON HOVER ANIMATION (site-wide) Gives every primary CTA button — on the homepage and on every service page (.av-primary-btn / .scs__btn / .wab__btn etc.) — the same lift + glow motion as the "View Our Work" button. Uses !important on transition only, so each page's own background/color hover swap still applies underneath. =========================== */ .av-primary-btn, .av-border-btn, .scs__btn, .wab__btn, .wwo-btn, .wwo-btn-primary, .wwo-btn-outline, .brands-btn, .cs-view-all-btn, .icta__btn, .dev-services__btn, .svc-cta__btn, .mediaCta__btn, .btn-discussion, .btn-discussion--inline, .quote-submit, .ctaBanner__submit button, .av-form button[type="submit"], .del-btn, .ind-scale-btn, .recog-cta, .cs-slider__cta, .ctaButton { transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease !important; cursor: pointer; } .av-primary-btn:hover, .av-border-btn:hover, .scs__btn:hover, .wab__btn:hover, .wwo-btn:hover, .wwo-btn-primary:hover, .wwo-btn-outline:hover, .brands-btn:hover, .cs-view-all-btn:hover, .icta__btn:hover, .dev-services__btn:hover, .svc-cta__btn:hover, .mediaCta__btn:hover, .btn-discussion:hover, .btn-discussion--inline:hover, .quote-submit:hover, .ctaBanner__submit button:hover, .av-form button[type="submit"]:hover, .del-btn:hover, .ind-scale-btn:hover, .recog-cta:hover, .cs-slider__cta:hover, .ctaButton:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3); } /* RIGHT: vertical auto-sliding cards */ .wwo-right { flex: 1; position: relative; height: 640px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .wwo-track { display: flex; flex-direction: column; gap: 20px; animation: wwoSlideUp 42s linear infinite; } .wwo-right:hover .wwo-track { animation-play-state: paused; } .wwo-cards-set { display: flex; flex-direction: column; gap: 20px; } @keyframes wwoSlideUp { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* Card */ .wwo-card { background: #141414; border-radius: 16px; padding: 32px 32px 28px; border: 1px solid #2a2a2a; opacity: 0; transform: translateY(40px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.2s ease; } .wwo-card.is-visible { opacity: 1; transform: translateY(0); } .wwo-card:hover { border-color: #EE3D25; transform: translateY(-2px); } .wwo-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .wwo-card-icon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wwo-card-icon svg { width: 28px; height: 28px; color: #fff; } .wwo-card-icon img { width: 28px; height: 28px; object-fit: contain; } .wwo-icon--purple { background: rgba(109, 40, 217, 0.55); border: 1.5px solid rgba(139,92,246,0.4); } .wwo-icon--green { background: rgba(22, 163, 74, 0.55); border: 1.5px solid rgba(34,197,94,0.4); } .wwo-icon--pink { background: rgba(232, 34, 42, 0.45); border: 1.5px solid rgba(248,113,113,0.4); } .wwo-icon--blue { background: rgba(37, 99, 235, 0.55); border: 1.5px solid rgba(59,130,246,0.4); } .wwo-icon--orange { background: rgba(217, 119, 6, 0.55); border: 1.5px solid rgba(251,146,60,0.4); } .wwo-icon--teal { background: rgba(13, 148, 136, 0.55); border: 1.5px solid rgba(45,212,191,0.4); } .wwo-card-header h3 { font-size: 22px; font-weight: 700; color: #ffffff; line-height: 1.2; } .wwo-card-desc { font-size: 15px; color: #a0a0a0; line-height: 1.7; margin-bottom: 20px; } .wwo-card-tags { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 24px; } .wwo-card-tags span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #b0b0b0; } .wwo-card-tags span i { width: 7px; height: 7px; border-radius: 50%; background: #EE3D25; flex-shrink: 0; font-style: normal; display: inline-block; } .wwo-card-btns { display: flex; gap: 14px; flex-wrap: wrap; } .wwo-btn-primary { background: #EE3D25; color: #fff; font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 6px; border: 1.5px solid #EE3D25; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; white-space: nowrap; } .wwo-btn-primary:hover { background: transparent; border-color: #ffffff; color: #ffffff; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3); } .wwo-btn-outline { background: transparent; color: #fff; font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 6px; border: 1.5px solid #fff; text-decoration: none; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease; white-space: nowrap; } .wwo-btn-outline:hover { border-color: #EE3D25; color: #fff; background: #EE3D25; transform: translateY(-2px); } /* staggered reveal delay */ .wwo-card:nth-child(1) { transition-delay: 0s; } .wwo-card:nth-child(2) { transition-delay: 0.1s; } .wwo-card:nth-child(3) { transition-delay: 0.15s; } .wwo-card:nth-child(4) { transition-delay: 0.2s; } @media (max-width: 1100px) { .wwo-inner { flex-direction: column; gap: 48px; padding: 0 28px; } .wwo-left { position: relative; top: auto; flex: none; width: 100%; } } @media (max-width: 768px) { .wwo-section { padding: 60px 0; } .wwo-inner { padding: 0 20px; } .wwo-card { padding: 24px 20px; } .wwo-card-header h3 { font-size: 18px; } /* On small screens the continuous marquee is harder to read/tap, so let the cards sit in a normal static stack instead. */ .wwo-right { height: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; } .wwo-track { animation: none; gap: 20px; } .wwo-cards-set[aria-hidden="true"] { display: none; } } /* =========================== PARTNERING WITH TOP BRANDS =========================== */ .brands-section { background: var(--black); padding: 90px 0 100px; border-top: 1px solid var(--border-dim); } .brands-inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; display: flex; gap: 72px; align-items: flex-start; } /* LEFT sticky */ .brands-left { flex: 0 0 280px; position: sticky; top: 120px; } .brands-heading { font-size: clamp(28px, 2.8vw, 42px); font-weight: 800; color: #ffffff; line-height: 1.2; margin-bottom: 18px; } .brands-desc { font-size: 14.5px; color: var(--text-gray); line-height: 1.75; margin-bottom: 32px; } .brands-btn { display: inline-block; background: transparent; color: #fff; font-size: 14px; font-weight: 700; padding: 12px 26px; border-radius: 5px; border: 2px solid #EE3D25; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .brands-btn:hover { background: #EE3D25; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(238, 61, 37, 0.3); } /* RIGHT grid */ .brands-right { flex: 1; display: flex; flex-direction: column; gap: 20px; } .brands-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Card */ .brands-card { position: relative; border-radius: 14px; overflow: hidden; background: #141414; border: 1px solid #2a2a2a; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(30px); text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.5s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .brands-card.is-visible { opacity: 1; transform: translateY(0); } .brands-card:hover { border-color: #EE3D25; transform: translateY(-6px); box-shadow: 0 16px 32px rgba(238, 59, 37, 0.22); } .brands-card img, .brands-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .brands-card:hover img, .brands-card:hover video { transform: scale(1.06); } /* dark gradient overlay over image */ .brands-card--img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.1) 100%); z-index: 1; transition: background 0.35s ease; } .brands-card--img:hover::before { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(238,61,37,0.28) 55%, rgba(0,0,0,0.15) 100%); } /* fallback when no image */ .brands-card--nophoto { background: #181818; } .brands-card--nophoto img, .brands-card--nophoto video { display: none; } .brands-card-info { position: relative; z-index: 2; padding: 20px 18px 16px; } .brands-card-client { font-size: 12px; font-weight: 600; color: #a0a0a0; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px; } .brands-card-title { font-size: 17px; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 12px; } .brands-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .brands-card-tags span { font-size: 11.5px; color: #ccc; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; border-radius: 20px; white-space: nowrap; } /* "View Case Study" prompt — hidden by default, fades in on hover */ .brands-card--img::after { content: 'View Case Study →'; position: absolute; top: 18px; right: 18px; z-index: 3; font-size: 12px; font-weight: 600; color: #fff; background: rgba(238, 61, 37, 0.9); padding: 7px 14px; border-radius: 20px; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; white-space: nowrap; } .brands-card--img:hover::after { opacity: 1; transform: translateY(0); } /* stagger reveal delays */ .brands-row:nth-child(1) .brands-card:nth-child(1) { transition-delay: 0s; } .brands-row:nth-child(1) .brands-card:nth-child(2) { transition-delay: 0.1s; } .brands-row:nth-child(1) .brands-card:nth-child(3) { transition-delay: 0.2s; } .brands-row:nth-child(2) .brands-card:nth-child(1) { transition-delay: 0.05s; } .brands-row:nth-child(2) .brands-card:nth-child(2) { transition-delay: 0.15s; } .brands-row:nth-child(2) .brands-card:nth-child(3) { transition-delay: 0.25s; } .brands-row:nth-child(3) .brands-card:nth-child(1) { transition-delay: 0.1s; } .brands-row:nth-child(3) .brands-card:nth-child(2) { transition-delay: 0.2s; } @media (max-width: 1100px) { .brands-inner { flex-direction: column; gap: 40px; padding: 0 28px; } .brands-left { position: relative; top: auto; flex: none; } .brands-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .brands-section { padding: 60px 0; } .brands-inner { padding: 0 20px; } .brands-row { grid-template-columns: 1fr; } } /* =========================== CASE STUDIES / PORTFOLIO =========================== */ .cs-section { background: var(--black); padding: 100px 0 120px; border-top: 1px solid var(--border-dim); } /* Header */ .cs-header { text-align: center; margin-bottom: 52px; padding: 0 24px; } .cs-eyebrow { font-size: 13px; font-weight: 500; color: var(--text-gray-dim); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 14px; } .cs-heading { font-size: clamp(34px, 4vw, 56px); font-weight: 800; color: #ffffff; line-height: 1.15; margin-bottom: 18px; } .cs-accent { color: #EE3D25; } .cs-subhead { font-size: 15px; color: var(--text-gray); line-height: 1.7; max-width: 660px; margin: 0 auto; } /* Tab Nav */ .cs-tabs { display: flex; align-items: center; justify-content: center; gap: 0; border-bottom: 1px solid #2a2a2a; margin-bottom: 40px; padding: 0 24px; } .cs-tab { background: none; border: none; color: var(--text-gray); font-size: 15px; font-weight: 500; padding: 14px 32px; cursor: pointer; position: relative; transition: color 0.18s ease; white-space: nowrap; font-family: inherit; } .cs-tab::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #EE3D25; transform: scaleX(0); transition: transform 0.2s ease; } .cs-tab:hover { color: #ffffff; } .cs-tab.is-active { color: #ffffff; font-weight: 700; } .cs-tab.is-active::after { transform: scaleX(1); } /* Panels */ .cs-panels { max-width: 1300px; margin: 0 auto; padding: 0 40px; } .cs-panel { display: none; background: var(--cs-grad, linear-gradient(135deg, #1a0a0a 0%, #0a0404 100%)); border-radius: 20px; border: 1px solid #2a2a2a; padding: 48px 48px 44px; gap: 56px; align-items: center; animation: csFadeIn 0.4s ease; } .cs-panel.is-active { display: flex; } @keyframes csFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Left content */ .cs-panel-left { flex: 0 0 500px; max-width: 500px; display: flex; flex-direction: column; gap: 0; } .cs-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #ccc; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 5px 14px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 22px; width: fit-content; } .cs-panel-left h3 { font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; color: #ffffff; line-height: 1.35; margin-bottom: 18px; } .cs-panel-left p { font-size: 14px; color: #a0a0a0; line-height: 1.75; margin-bottom: 30px; } /* Stats */ .cs-stats { display: flex; gap: 32px; margin-bottom: 36px; flex-wrap: wrap; } .cs-stat { display: flex; flex-direction: column; gap: 5px; min-width: 70px; } .cs-stat strong { font-size: 28px; font-weight: 800; color: #ffffff; line-height: 1; } .cs-stat span { font-size: 12px; color: #888; line-height: 1.4; max-width: 110px; } .cs-link { font-size: 14px; font-weight: 700; color: #ffffff; background: #EE3D25; border: 1.5px solid #EE3D25; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 6px; margin-top: auto; width: fit-content; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, gap 0.18s ease, transform 0.25s ease, box-shadow 0.25s ease; } .cs-link:hover { background: transparent; border-color: #ffffff; color: #ffffff; gap: 10px; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3); } /* Right image */ .cs-panel-right { flex: 1; min-height: 360px; border-radius: 16px; overflow: hidden; background: #1a1a1a; position: relative; } .cs-panel-right img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 360px; } .cs-panel-right video { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 360px; } .cs-img--fallback { background: linear-gradient(135deg, #222 0%, #333 100%); } @media (max-width: 1100px) { .cs-panel { flex-direction: column; gap: 32px; padding: 32px 28px; } .cs-panel-left { flex: none; max-width: 100%; } .cs-panel-right { min-height: 260px; width: 100%; } .cs-panel-right img { min-height: 260px; } .cs-tabs { overflow-x: auto; justify-content: flex-start; } .cs-tab { padding: 12px 20px; font-size: 14px; } } @media (max-width: 640px) { .cs-section { padding: 60px 0 80px; } .cs-panels { padding: 0 16px; } .cs-stats { gap: 20px; } .cs-stat strong { font-size: 22px; } .cs-tab { padding: 10px 16px; font-size: 13px; } } /* =========================== INDUSTRY SCALING ACCORDION =========================== */ .ind-scale-section { background: var(--black); padding: 90px 0 80px; border-top: 1px solid var(--border-dim); } .ind-scale-header { text-align: center; margin-bottom: 44px; padding: 0 24px; } .ind-scale-eyebrow { font-size: 12px; font-weight: 500; color: var(--text-gray-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .ind-scale-heading { font-size: clamp(28px, 3.2vw, 48px); font-weight: 800; color: #ffffff; line-height: 1.2; } .ind-scale-accent { color: #EE3D25; } .ind-scale-subhead { font-size: 15.5px; color: var(--text-gray-dim); line-height: 1.6; max-width: 640px; margin: 16px auto 0; } .ind-scale-num { color: #EE3D25; } /* Track */ .ind-scale-track { display: flex; height: 420px; max-width: 1400px; margin: 0 auto; padding: 0 40px; gap: 6px; overflow: hidden; } /* Each item */ .ind-scale-item { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; flex: 0 0 64px; transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1); display: block; text-decoration: none; color: inherit; } .ind-scale-item.is-active { flex: 1; } .ind-scale-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; } .ind-scale-item:hover img, .ind-scale-item.is-active img { transform: scale(1.04); } /* Dark overlay */ .ind-scale-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.15) 100% ); z-index: 1; transition: background 0.3s ease; } /* inactive tint */ .ind-scale-item:not(.is-active) .ind-scale-overlay { background: rgba(0,0,0,0.62); } /* Content – shown only when active */ .ind-scale-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 28px 28px 24px; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s; pointer-events: none; } .ind-scale-item.is-active .ind-scale-content { opacity: 1; transform: translateY(0); pointer-events: auto; } .ind-scale-title { font-size: 22px; font-weight: 800; color: #ffffff; margin-bottom: 10px; } .ind-scale-desc { font-size: 13.5px; color: #cccccc; line-height: 1.65; margin-bottom: 16px; max-width: 440px; } .ind-scale-tags { display: flex; flex-wrap: wrap; gap: 8px; } .ind-scale-tags span { font-size: 11.5px; font-weight: 500; color: #ffffff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); padding: 5px 12px; border-radius: 20px; white-space: nowrap; backdrop-filter: blur(4px); } /* Bottom-anchored label – shown when NOT active, sits inside the image at the bottom (mirrors the layout of the expanded panel's heading) */ .ind-scale-label-vert { position: absolute; bottom: 18px; left: 14px; right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.2px; z-index: 3; transition: opacity 0.25s ease; pointer-events: none; } .ind-scale-item.is-active .ind-scale-label-vert { opacity: 0; } /* CTA button */ .ind-scale-cta { text-align: center; margin-top: 40px; } .ind-scale-btn { display: inline-block; background: #EE3D25; color: #ffffff; font-size: 14px; font-weight: 700; padding: 14px 34px; border-radius: 6px; border: 1.5px solid #EE3D25; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .ind-scale-btn:hover { background: transparent; border-color: #ffffff; color: #ffffff; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3); } @media (max-width: 900px) { .ind-scale-track { height: auto; flex-direction: column; gap: 12px; padding: 0 20px; } .ind-scale-item { flex: 0 0 60px !important; border-radius: 12px; } .ind-scale-item.is-active { flex: 0 0 320px !important; } .ind-scale-label-vert { bottom: auto; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); text-align: center; } } /* =========================== AWARDS & RECOGNITION – REVIEW MARQUEE =========================== */ .rev-awards-section { background: var(--black); padding: 80px 0 90px; border-top: 1px solid var(--border-dim); overflow: hidden; } .rev-awards-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text-white); padding: 0 40px; margin-bottom: 32px; } .rev-awards-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; display: inline-block; } .rev-awards-track-wrap { overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .rev-awards-track { display: flex; width: max-content; animation: revAwardsScroll 36s linear infinite; } .rev-awards-track:hover { animation-play-state: paused; } .rev-awards-set { display: flex; align-items: stretch; gap: 20px; padding-right: 20px; flex-shrink: 0; } .rev-award-card { flex-shrink: 0; width: 340px; background: var(--panel); border: 1px solid var(--border-dim); border-radius: 14px; padding: 28px 26px; } .rev-award-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; } .rev-award-logo { height: 30px; max-width: 140px; width: auto; object-fit: contain; object-position: left center; display: block; } .rev-award-rating { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--text-white); font-size: 18px; font-weight: 700; } .rev-award-rating svg { width: 18px; height: 18px; fill: var(--red); flex-shrink: 0; } .rev-award-desc { font-size: 14.5px; line-height: 1.6; color: var(--text-gray); } @keyframes revAwardsScroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (max-width: 768px) { .rev-awards-label { padding: 0 20px; font-size: 13px; } .rev-award-card { width: 280px; padding: 22px 20px; } .rev-award-desc { font-size: 13.5px; } } /* =========================== WHY CLIENTS TRUST US — TESTIMONIAL MARQUEE Same visual language as the Awards & Recognition strip above. =========================== */ .rev-testi-section { background: var(--black); padding: 80px 0 90px; border-top: 1px solid var(--border-dim); overflow: hidden; } .rev-testi-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text-white); padding: 0 40px; margin-bottom: 32px; } .rev-testi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; display: inline-block; } .rev-testi-track-wrap { overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .rev-testi-track { display: flex; width: max-content; animation: revTestiScroll 42s linear infinite; } .rev-testi-track:hover { animation-play-state: paused; } .rev-testi-set { display: flex; align-items: stretch; gap: 20px; padding-right: 20px; flex-shrink: 0; } .rev-testi-card { flex-shrink: 0; width: 360px; background: var(--panel); border: 1px solid var(--border-dim); border-radius: 14px; padding: 28px 26px; } .rev-testi-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .rev-testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--red) 0%, #8a1a0e 100%); color: #ffffff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rev-testi-who { min-width: 0; } .rev-testi-name { font-size: 15px; font-weight: 700; color: var(--text-white); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rev-testi-role { font-size: 12.5px; color: var(--text-gray-dim); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rev-testi-desc { font-size: 14.5px; line-height: 1.6; color: var(--text-gray); } @keyframes revTestiScroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (max-width: 768px) { .rev-testi-label { padding: 0 20px; font-size: 13px; } .rev-testi-card { width: 280px; padding: 22px 20px; } .rev-testi-desc { font-size: 13.5px; } } /* =========================== HOW APPVERTICALS DELIVERS – TABBED SECTION =========================== */ .del-section { background: var(--black); padding: 90px 0 100px; border-top: 1px solid var(--border-dim); } .del-container { max-width: 1500px; margin: 0 auto; padding: 0 40px; } /* Top row: heading + intro */ .del-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-bottom: 56px; } .del-heading { font-size: clamp(26px, 2.7vw, 40px); font-weight: 800; color: #ffffff; line-height: 1.28; flex: 0 0 auto; max-width: 560px; } .del-accent { color: #EE3D25; } .del-intro { font-size: 14px; color: var(--text-gray-dim); line-height: 1.7; max-width: 320px; text-align: left; flex: 0 0 auto; padding-top: 4px; } /* Body: tabs | panel | media */ .del-body { display: flex; align-items: stretch; gap: 0; } /* Tabs column */ .del-tabs { display: flex; flex-direction: column; gap: 34px; flex: 0 0 210px; padding-right: 40px; border-right: 1px solid var(--border-dim); } .del-tab { position: relative; background: none; border: none; text-align: left; font-family: var(--font); font-size: clamp(22px, 2vw, 30px); font-weight: 800; color: #4a4a4a; cursor: pointer; padding: 0; transition: color 0.25s ease; line-height: 1.2; } .del-tab:hover { color: #9a9a9a; } .del-tab.is-active { color: #4a4a4a; } /* "Slide into theme color" reveal — an orange duplicate of the label wipes down over the muted-gray text when a tab becomes active. */ .del-tab::after { content: attr(data-label); position: absolute; left: 0; top: 0; width: 100%; color: #EE3D25; clip-path: inset(0 0 100% 0); transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; white-space: nowrap; } .del-tab.is-active::after { clip-path: inset(0 0 0 0); } /* Content panel */ .del-panels { flex: 1 1 380px; max-width: 420px; padding: 4px 40px 0; } .del-panel { display: none; animation: delFade 0.4s ease; } .del-panel.is-active { display: block; } @keyframes delFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .del-panel-title { font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1.3; margin-bottom: 16px; } .del-panel-desc { font-size: 14px; color: var(--text-gray); line-height: 1.75; margin-bottom: 26px; max-width: 400px; } .del-btn { display: inline-block; background: #EE3D25; color: #ffffff; font-size: 14px; font-weight: 700; padding: 14px 30px; border-radius: 6px; border: 1.5px solid #EE3D25; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .del-btn:hover { background: transparent; border-color: #ffffff; color: #ffffff; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(238, 61, 37, 0.3); } /* Media column */ .del-media { flex: 1 1 380px; max-width: 420px; } .del-media-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; margin-bottom: 20px; } .del-media-img { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; } .del-media-img.is-active { opacity: 1; visibility: visible; } .del-media-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .del-checklist-wrap { position: relative; } .del-checklist { display: none; flex-direction: column; gap: 14px; animation: delFade 0.4s ease; } .del-checklist.is-active { display: flex; } .del-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-gray); line-height: 1.5; } .del-checklist li svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; } .del-checklist li span { flex: 1; } @media (max-width: 1100px) { .del-body { flex-wrap: wrap; } .del-tabs { flex-direction: row; flex-wrap: wrap; gap: 24px; flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--border-dim); padding-right: 0; padding-bottom: 24px; margin-bottom: 32px; } .del-tab { font-size: 18px; } .del-panels { padding: 0; max-width: 100%; flex: 1 1 320px; } .del-media { max-width: 100%; flex: 1 1 320px; } } @media (max-width: 720px) { .del-top { flex-direction: column; gap: 20px; margin-bottom: 40px; } .del-intro { max-width: 100%; } .del-body { flex-direction: column; } .del-panels, .del-media { flex-basis: auto; } } /* =========================== SITE FOOTER =========================== */ :root{ --accent:#EE3D25 !important; --bg:#141414; --text-heading:#ffffff; --text-link:#c9c9d6; --text-muted:#8f8f9a; --border:#2a2a2e; --pill-bg:#1c1c20; } *{box-sizing:border-box;} body{ margin:0; background:var(--bg); font-family:'Segoe UI', Arial, sans-serif; } footer.site-footer{ background:var(--bg); color:var(--text-link); padding:60px 60px 30px; } .footer-columns{ display:flex; flex-wrap:wrap; gap:40px; max-width:1400px; margin:0 auto; } .footer-col{ flex:1; min-width:180px; } .col-title{ display:flex; align-items:center; gap:10px; color:var(--text-heading); font-size:19px; font-weight:600; margin-bottom:22px; } .col-title .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; flex-shrink:0; } .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; } .footer-col a{ color:var(--text-link); text-decoration:none; font-size:15px; transition:color .2s ease; } .footer-col a:hover, .footer-col a:focus-visible{ color:var(--accent); outline:none; } .pill-links{ display:flex; flex-direction:column; gap:14px; } .pill{ display:inline-block; width:fit-content; padding:10px 20px; border-radius:24px; background:var(--pill-bg); border:1px solid var(--border); color:var(--text-link); text-decoration:none; font-size:14px; transition:border-color .2s ease, color .2s ease; } .pill:hover, .pill:focus-visible{ border-color:var(--accent); color:#ffffff; outline:none; } .footer-divider-row{ display:flex; flex-wrap:wrap; max-width:1400px; margin:50px auto 0; border-top:1px solid var(--border); } .footer-block{ flex:1; min-width:260px; padding:34px 40px 34px 0; } .footer-block + .footer-block{ border-left:1px solid var(--border); padding-left:40px; } .block-title{ display:flex; align-items:center; gap:10px; color:var(--text-heading); font-size:18px; font-weight:600; margin-bottom:20px; } .block-title .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; flex-shrink:0; } .location-text{ font-size:15px; line-height:1.6; color:var(--text-link); margin:0; } .contact-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .icon-circle{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#ffffff; transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .icon-circle svg{ width:18px; height:18px; transition:transform .3s ease; } .contact-text{ font-size:15px; color:var(--text-link); word-break:break-word; transition:color .3s ease; } .contact-pair{ display:flex; align-items:center; gap:12px; } .contact-pair:hover .icon-circle{ background:var(--accent); border-color:var(--accent); color:#ffffff; transform:translateY(-4px) scale(1.08); box-shadow:0 8px 20px rgba(238,61,37,.35); } .contact-pair:hover .icon-circle svg{ transform:scale(1.1); } .contact-pair:hover .contact-text{ color:var(--accent); } .contact-two{ display:flex; flex-wrap:wrap; gap:28px; } .social-row{ display:flex; gap:14px; flex-wrap:wrap; } .social-row a.icon-circle{ text-decoration:none; cursor:pointer; } .social-row a.icon-circle:hover, .social-row a.icon-circle:focus-visible{ background:var(--accent); border-color:var(--accent); outline:none; transform:translateY(-4px) scale(1.08); box-shadow:0 8px 20px rgba(238,61,37,.35); } .social-row a.icon-circle:hover svg, .social-row a.icon-circle:focus-visible svg{ transform:scale(1.1); } .footer-bottom{ max-width:1400px; margin:0 auto; padding-top:36px; } .bottom-links{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--border); } .bottom-links a{ color:var(--text-link); text-decoration:none; font-size:15px; } .bottom-links a:hover, .bottom-links a:focus-visible{ color:var(--accent); outline:none; } .legal-row{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; padding-top:28px; padding-bottom:10px; } .copyright{ font-size:14px; color:var(--text-muted); line-height:1.6; max-width:100%; width:100%; margin:0; text-align:center; } .payments{ display:none; align-items:center; gap:12px; flex-wrap:wrap; } .payments span{ font-size:14px; color:var(--text-link); margin-right:6px; } .payment-badge{ height:26px; padding:4px 8px; border-radius:5px; background:#ffffff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#1a1a1a; font-family:Arial, sans-serif; letter-spacing:.3px; } .payment-badge.dark{ background:#000000; color:#ffffff; } .payment-badge.paypal{ color:#003087; } .payment-badge.amex{ background:#1f72cd; color:#fff; } .payment-badge.wise{ background:#9fe870; color:#0d3d2c; } .payment-badge.zelle{ background:#6d1ed4; color:#fff; } .payment-badge.mc{ background:#EE3D25; color:#fff; } @media (max-width:900px){ footer.site-footer{padding:40px 24px 20px;} .footer-divider-row{margin-top:34px;} .footer-block{padding:26px 0;border-left:none !important;padding-left:0 !important;border-bottom:1px solid var(--border);} .footer-block:last-child{border-bottom:none;} .legal-row{flex-direction:column;align-items:center;} } /* =========================== QUOTE REQUEST MODAL =========================== */ .quote-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(3px); z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .quote-modal-overlay.is-open { opacity: 1; visibility: visible; } .quote-modal-overlay.is-open .quote-modal { animation: quotePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes quotePopIn { 0% { opacity: 0; transform: translateY(24px) scale(0.92); } 60% { opacity: 1; transform: translateY(-4px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .quote-modal { position: relative; background: var(--black); border: 1px solid var(--border-dim); border-radius: 14px; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; padding: 36px 38px 30px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03); transform: translateY(16px) scale(0.98); } .quote-modal::-webkit-scrollbar { width: 8px; } .quote-modal::-webkit-scrollbar-track { background: transparent; } .quote-modal::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 8px; } .quote-modal-close { display: none; } .quote-modal-close svg { width: 22px; height: 22px; } .quote-modal-close:hover { background: var(--red); color: #ffffff; transform: rotate(90deg); } .quote-modal-title { font-size: 23px; font-weight: 800; letter-spacing: 0.3px; color: #ffffff; margin-bottom: 26px; padding-right: 0; text-align: center; } .quote-form { display: flex; flex-direction: column; gap: 16px; } .quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .quote-input { width: 100%; height: 48px; min-width: 0; background: #161616; border: 1px solid var(--border-dim); border-radius: 7px; color: #ffffff; font-family: var(--font); font-size: 13.5px; padding: 14px 15px; outline: none; box-sizing: border-box; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .quote-input::placeholder { color: #7a7a7a; } .quote-input:hover { border-color: #3a3a3a; } .quote-input:focus { border-color: var(--red); background: #1a1a1a; box-shadow: 0 0 0 3px rgba(238, 61, 37, 0.14); } .quote-select { appearance: none; -webkit-appearance: none; color: #7a7a7a; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 15px center; background-size: 15px; padding-right: 38px; cursor: pointer; } .quote-select:valid { color: #ffffff; } .quote-select option { color: #ffffff; background: #1a1a1a; } .quote-subtitle { font-size: 19px; font-weight: 800; color: #ffffff; margin-top: 6px; margin-bottom: 4px; } .quote-checks { display: grid; grid-template-columns: 1fr 1fr; row-gap: 15px; column-gap: 20px; } .quote-check { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: #e8e8e8; cursor: pointer; user-select: none; transition: color 0.15s ease; } .quote-check:hover { color: #ffffff; } .quote-check:has(input:checked), .quote-check.is-checked { color: var(--red); } .quote-check input { position: absolute; opacity: 0; width: 0; height: 0; accent-color: var(--red); } .quote-box { flex: 0 0 19px; width: 19px; height: 19px; border: 1.5px solid #5a5a5a; border-radius: 4px; position: relative; transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease; } .quote-check:hover .quote-box { border-color: var(--red); } .quote-check input:checked + .quote-box { background: var(--red); border-color: var(--red); } .quote-check input:checked + .quote-box::after { content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .quote-textarea { background: #161616; border: 1px solid var(--border-dim); border-radius: 7px; color: #ffffff; font-family: var(--font); font-size: 13.5px; padding: 15px; min-height: 92px; resize: vertical; outline: none; margin-top: 6px; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .quote-textarea::placeholder { color: #7a7a7a; } .quote-textarea:hover { border-color: #3a3a3a; } .quote-textarea:focus { border-color: var(--red); background: #1a1a1a; box-shadow: 0 0 0 3px rgba(238, 61, 37, 0.14); } .quote-submit { align-self: flex-start; background: #EE3D25; color: #ffffff; font-family: var(--font); font-size: 14px; font-weight: 700; border: none; border-radius: 7px; padding: 14px 46px; cursor: pointer; margin-top: 8px; box-shadow: 0 8px 22px rgba(238, 61, 37, 0.28); transition: filter 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease; } .quote-submit:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(238, 61, 37, 0.38); } .quote-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .quote-submit:active { transform: translateY(0); } .quote-status { font-size: 13px; font-weight: 600; margin-top: 6px; min-height: 1px; } .quote-status.is-success { color: #3ecf7a; } .quote-status.is-error { color: #EE3D25; } .quote-disclaimer { font-size: 11.5px; color: #7a7a7a; margin-top: 4px; } @media (max-width: 640px) { .quote-modal { padding: 26px 20px 22px; } .quote-row { grid-template-columns: 1fr; } .quote-checks { grid-template-columns: 1fr; } } /* =========================== CASE STUDIES INTRO HEADER =========================== */ .case-studies-intro { text-align: center; margin-bottom: 60px; } .case-studies-intro-title { font-family: var(--font); font-size: 42px; font-weight: 700; color: var(--ink, #12141a); margin-bottom: 16px; line-height: 1.2; } .case-studies-intro-highlight { color: var(--red); } .case-studies-intro-desc { font-family: var(--font); font-size: 16px; color: var(--ink-dim, #5a5f6b); max-width: 900px; margin: 0 auto; line-height: 1.6; } /* =========================== LIFECYCLE SECTION =========================== */ .lc-section{ max-width:1180px; margin:0 auto; padding:70px 24px 90px; position:relative; } .lc-heading{ font-size:38px; font-weight:800; line-height:1.2; margin:0 0 18px; letter-spacing:-0.5px; } .lc-heading .accent{ color:var(--red); } .lc-subtext{ max-width:700px; color:var(--text-dim, #8a8a8a); font-size:15px; line-height:1.6; margin:0 0 40px; } .lc-layout{ display:grid; grid-template-columns:1fr 1.3fr; gap:28px; align-items:start; border:1px solid var(--border-dim); border-radius:16px; padding:32px; background: radial-gradient(480px 280px at 100% 0%, rgba(238,61,37,0.10), transparent 70%), #0c0c0c; } .lc-steps-slider{ position:relative; height:460px; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); } .lc-steps{ display:flex; flex-direction:column; gap:14px; position:absolute; top:0; left:0; right:0; animation:lcStepsScroll 32s linear infinite; } .lc-steps-slider:hover .lc-steps{ animation-play-state:paused; } @keyframes lcStepsScroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } } .lc-step{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-radius:8px; border:1px solid var(--border-dim); background:#111111; cursor:pointer; text-align:left; font-family:inherit; flex:0 0 auto; transition:border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease; } .lc-step:hover{ border-color:#EE3D25; transform:translateX(4px); box-shadow:0 8px 20px rgba(238,61,37,0.15); } .lc-step-num{ font-size:11px; font-weight:800; color:#555; letter-spacing:0.5px; flex:0 0 auto; transition:color .25s ease; } .lc-step:hover .lc-step-num{ color:#EE3D25; } .lc-step.active .lc-step-num{ color:#EE3D25; } .lc-step .lc-check{ width:20px; height:20px; flex:0 0 20px; border-radius:50%; border:1.5px solid var(--text-dim, #8a8a8a); display:flex; align-items:center; justify-content:center; transition:border-color .25s ease, background .25s ease, transform .25s ease; } .lc-step .lc-check svg{ width:11px; height:11px; stroke:var(--text-dim, #8a8a8a); transition:stroke .25s ease; } .lc-step .lc-label{ color:var(--text-dim, #8a8a8a); font-size:15px; font-weight:600; transition:color .25s ease; } .lc-step.active{ border-color:var(--red); background:linear-gradient(90deg, rgba(238,61,37,0.12), rgba(238,61,37,0.02)); box-shadow:0 0 0 1px rgba(238,61,37,0.25), 0 10px 24px rgba(238,61,37,0.18); } .lc-step.active .lc-check{ border-color:#EE3D25; background:#EE3D25; transform:scale(1.08); } .lc-step.active .lc-check svg{ stroke:#fff; } .lc-step.active .lc-label{ color:#fff; } .lc-panel{ border:1px solid var(--red); border-radius:10px; padding:32px; background: radial-gradient(360px 220px at 100% 0%, rgba(238,61,37,0.10), transparent 70%), rgba(238,28,28,0.03); min-height:460px; box-shadow:0 20px 45px rgba(0,0,0,0.35); } .lc-panel-title{ display:flex; align-items:center; gap:12px; font-size:20px; font-weight:800; color:#fff; margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid rgba(238,61,37,0.25); } .lc-panel-title-num{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:#EE3D25; color:#fff; font-size:12px; font-weight:800; } .lc-panel p{ color:var(--text-body, #c9c9c9); font-size:15px; line-height:1.7; margin:0 0 18px; } .lc-panel p:last-child{ margin-bottom:0; } .lc-panel-content{ animation:fadeIn .35s ease; } @keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:800px){ .lc-layout{ grid-template-columns:1fr; padding:20px; } .lc-heading{ font-size:28px; } .lc-steps-slider{ height:360px; } .lc-panel{ min-height:auto; } } /* ---------- Recognition section ---------- */ .recog-section{ max-width:1180px; margin:0 auto; padding:0 24px 90px; } .recog-card{ position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; border:1px solid var(--border-dim); border-radius:16px; padding:56px; overflow:hidden; background: radial-gradient(420px 260px at 8% 100%, rgba(238,28,28,0.20), transparent 70%), #0c0c0c; } .recog-heading{ font-size:38px; font-weight:800; color:#fff; line-height:1.2; margin:0 0 20px; letter-spacing:-0.3px; } .recog-text{ font-size:15px; line-height:1.7; color:#9a9a9a; max-width:440px; margin:0 0 32px; } .recog-cta{ display:inline-block; background:var(--red); color:#fff; font-weight:700; font-size:14px; border:1.5px solid var(--red); border-radius:6px; padding:15px 26px; cursor:pointer; font-family:inherit; transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } .recog-cta:hover{ background:transparent; border-color:#ffffff; color:#ffffff; transform:translateY(-3px) scale(1.02); box-shadow:0 10px 24px rgba(238,61,37,0.3); } .recog-slider{ position:relative; height:300px; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); } .recog-track{ position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:16px; animation:recogScroll 24s linear infinite; } .recog-slider:hover .recog-track{ animation-play-state:paused; } @keyframes recogScroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } } .recog-item{ display:flex; align-items:center; gap:16px; background:#141414; border:1px solid #262626; border-radius:10px; padding:14px 20px; flex:0 0 auto; position:relative; overflow:hidden; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } /* white shimmer sweep on hover */ .recog-item::before{ content:''; position:absolute; top:0; left:-60%; width:35%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.16), transparent); transform:skewX(-20deg); transition:left .65s ease; pointer-events:none; } .recog-item:hover{ transform:translateX(4px) scale(1.015); border-color:rgba(255,255,255,0.45); box-shadow:0 10px 26px rgba(255,255,255,0.10); background:#181818; } .recog-item:hover::before{ left:130%; } .recog-badge{ width:64px; height:52px; flex:0 0 64px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#ffffff; overflow:hidden; transition:transform .35s ease, box-shadow .35s ease; } .recog-badge img{ width:100%; height:100%; object-fit:contain; padding:7px; display:block; } .recog-item:hover .recog-badge{ transform:scale(1.08); box-shadow:0 0 0 3px rgba(255,255,255,0.18); } .recog-item .title{ font-size:15px; font-weight:700; color:#fff; line-height:1.35; transition:color .3s ease; } .recog-rating{ display:flex; align-items:center; gap:4px; margin-left:auto; padding-left:14px; font-size:13px; font-weight:700; color:#fff; white-space:nowrap; flex-shrink:0; transition:transform .35s ease, color .35s ease; } .recog-rating .partner-star{ width:13px; height:13px; fill:var(--red); flex-shrink:0; transition:transform .35s ease, fill .35s ease; } .recog-item:hover .title{ color:#ffffff; text-shadow:0 0 12px rgba(255,255,255,0.35); } .recog-item:hover .recog-rating{ transform:scale(1.08); color:var(--red-bright); } .recog-item:hover .recog-rating .partner-star{ fill:var(--red-bright); transform:rotate(-14deg) scale(1.25); } @media (max-width:800px){ .recog-card{ grid-template-columns:1fr; padding:36px 24px; } .recog-slider{ height:240px; } } /* =========================== SCROLL-IN ANIMATIONS (data-av-animate) Applies to any element with data-av-animate="fade-up | fade-down | fade-left | fade-right | stagger". Optional data-av-delay="0.2" (seconds) adds an extra delay before the animation starts. =========================== */ [data-av-animate] { opacity: 0; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } [data-av-animate="fade-up"] { transform: translateY(32px); } [data-av-animate="fade-down"] { transform: translateY(-32px); } [data-av-animate="fade-left"] { transform: translateX(40px); } [data-av-animate="fade-right"] { transform: translateX(-40px); } [data-av-animate="stagger"] { opacity: 1; transform: none; transition: none; } [data-av-animate].av-in-view { opacity: 1; transform: none; } /* "stagger" animates its direct children one-by-one instead of itself */ [data-av-animate="stagger"] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } [data-av-animate="stagger"].av-in-view > * { opacity: 1; transform: none; } [data-av-animate="stagger"] > *:nth-child(1) { transition-delay: 0s; } [data-av-animate="stagger"] > *:nth-child(2) { transition-delay: 0.08s; } [data-av-animate="stagger"] > *:nth-child(3) { transition-delay: 0.16s; } [data-av-animate="stagger"] > *:nth-child(4) { transition-delay: 0.24s; } [data-av-animate="stagger"] > *:nth-child(5) { transition-delay: 0.32s; } [data-av-animate="stagger"] > *:nth-child(6) { transition-delay: 0.4s; } [data-av-animate="stagger"] > *:nth-child(7) { transition-delay: 0.48s; } [data-av-animate="stagger"] > *:nth-child(8) { transition-delay: 0.56s; } [data-av-animate="stagger"] > *:nth-child(9) { transition-delay: 0.64s; } [data-av-animate="stagger"] > *:nth-child(10) { transition-delay: 0.72s; } @media (prefers-reduced-motion: reduce) { [data-av-animate], [data-av-animate="stagger"] > * { opacity: 1 !important; transform: none !important; transition: none !important; } }