/* ================================================================= OmniVantis — Contrast Fixes (no Tailwind build needed) ----------------------------------------------------------------- LOAD ORDER in : 1. output.css 2. brand.css 3. THIS FILE ← must be last Why text-white breaks: Tailwind v4 puts utilities inside @layer utilities. brand.css is unlayered (outside any layer), so the browser gives it higher cascade priority — even without !important. brand.css also uses !important on h1-h6 color, which beats every Tailwind utility. This file sits outside any layer and uses !important, so it wins over everything. ================================================================= */ /* ----------------------------------------------------------------- Global: hide viewport scrollbars (wheel / touch / Lenis unchanged) Lenis adds classes to ; keep bars hidden in all states. ----------------------------------------------------------------- */ html, html.lenis, html.lenis-smooth, body { -ms-overflow-style: none !important; scrollbar-width: none !important; } html::-webkit-scrollbar, html.lenis::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* ----------------------------------------------------------------- 1. GLOBAL: .text-white must always produce white text Fixes every element that has class="... text-white ..." where brand.css was overriding it. ----------------------------------------------------------------- */ h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white, .h1.text-white, .h2.text-white, .h3.text-white, .h4.text-white, .h5.text-white, .h6.text-white, p.text-white, span.text-white, a.text-white, div.text-white, li.text-white, small.text-white { color: #ffffff !important; } /* ----------------------------------------------------------------- 2. DARK NAVY BALLS — bg-dark-deep (#31336b) "Select Channels", "Track Performance", "Optimize Results" ----------------------------------------------------------------- */ .bg-dark-deep h1, .bg-dark-deep h2, .bg-dark-deep h3, .bg-dark-deep h4, .bg-dark-deep h5, .bg-dark-deep h6, .bg-dark-deep .h1, .bg-dark-deep .h2, .bg-dark-deep .h3, .bg-dark-deep .h4, .bg-dark-deep .h5, .bg-dark-deep .h6, .bg-dark-deep p, .bg-dark-deep span { color: #ffffff !important; } /* ----------------------------------------------------------------- 3. TEAL BALLS — bg-sky-deep (#1b89aa) "Launch Campaigns", "Scale & Iterate" ----------------------------------------------------------------- */ .bg-sky-deep h1, .bg-sky-deep h2, .bg-sky-deep h3, .bg-sky-deep h4, .bg-sky-deep h5, .bg-sky-deep h6, .bg-sky-deep .h1, .bg-sky-deep .h2, .bg-sky-deep .h3, .bg-sky-deep .h4, .bg-sky-deep .h5, .bg-sky-deep .h6, .bg-sky-deep p, .bg-sky-deep span { color: #ffffff !important; } /* ----------------------------------------------------------------- 4. HOT PINK BALL — bg-pink (#fd1774) "API & CRM Integration" ----------------------------------------------------------------- */ .bg-pink h1, .bg-pink h2, .bg-pink h3, .bg-pink h4, .bg-pink h5, .bg-pink h6, .bg-pink .h1, .bg-pink .h2, .bg-pink .h3, .bg-pink .h4, .bg-pink .h5, .bg-pink .h6, .bg-pink p, .bg-pink span { color: #ffffff !important; } /* ----------------------------------------------------------------- 5. CRIMSON BALLS & SECTIONS — bg-main-600 (#C62828) "Understand Your Goals", "DLT & Compliance", industries pills ----------------------------------------------------------------- */ .bg-main-600 h1, .bg-main-600 h2, .bg-main-600 h3, .bg-main-600 h4, .bg-main-600 h5, .bg-main-600 h6, .bg-main-600 .h1, .bg-main-600 .h2, .bg-main-600 .h3, .bg-main-600 .h4, .bg-main-600 .h5, .bg-main-600 .h6, .bg-main-600 p, .bg-main-600 span { color: #ffffff !important; } /* ----------------------------------------------------------------- 6. NEAR-BLACK SECTION — bg-main-two-600 (#1A1A1A) The whole "How It Works" dark section wrapper. ----------------------------------------------------------------- */ .bg-main-two-600 h1, .bg-main-two-600 h2, .bg-main-two-600 h3, .bg-main-two-600 h4, .bg-main-two-600 h5, .bg-main-two-600 h6, .bg-main-two-600 .h1, .bg-main-two-600 .h2, .bg-main-two-600 .h3, .bg-main-two-600 .h4, .bg-main-two-600 .h5, .bg-main-two-600 .h6 { color: #ffffff !important; } .bg-main-two-600 p, .bg-main-two-600 .splitTextStyleOne { color: rgba(255, 255, 255, 0.72) !important; } .bg-main-two-600 .counter, .bg-main-two-600 .text-white { color: #ffffff !important; } .bg-main-two-600 .text-neutral-400, .bg-main-two-600 .text-neutral-500 { color: rgba(255, 255, 255, 0.70) !important; } /* ----------------------------------------------------------------- 7. ANNOUNCEMENT / TOP STRIP Image 3: red pill/bar — white text ----------------------------------------------------------------- */ [class*="announcement"] span, [class*="announcement"] p, [class*="top-strip"] span, [class*="top-strip"] p { color: #ffffff !important; } /* ----------------------------------------------------------------- 8. FOOTER — near-black bg, needs readable text ----------------------------------------------------------------- */ .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer .h1, .footer .h2, .footer .h3, .footer .h4, .footer .h5, .footer .h6 { color: #ffffff !important; } .footer p, .footer li, .footer address { color: rgba(255, 255, 255, 0.68) !important; } .footer a { color: rgba(255, 255, 255, 0.78) !important; } .footer a:hover { color: #EF6C00 !important; } .footer a[href^="tel"] { color: #ffffff !important; font-weight: 700; } .footer a[href^="mailto"] { color: rgba(255, 255, 255, 0.85) !important; word-break: break-word; } /* ----------------------------------------------------------------- 9. SKY BLUE NUMBER BADGES on balls (01–08) bg-sky (#41a5fa) ----------------------------------------------------------------- */ .bg-sky { background: #ef6c00 !important; color: #ffffff !important; } /* ----------------------------------------------------------------- 10. USE-CASE ACCORDION — keep titles readable (not theme orange) ----------------------------------------------------------------- */ .border-left-style .accordion-button, .border-left-style .accordion-button span { color: #111111 !important; } .border-left-style .accordion-button:hover, .border-left-style .accordion-button:hover span { color: #1a1a1a !important; } /* ----------------------------------------------------------------- 11. HOMEPAGE ICON PALETTE — see brand.css (OmniVantis blue) ----------------------------------------------------------------- */ /* Keep icons white on dark/colored blocks */ .home-one .bg-main-600 img[src*="assets/images/icons/"], .home-one .bg-main-two-600 img[src*="assets/images/icons/"], .home-one .bg-dark-deep img[src*="assets/images/icons/"], .home-one .bg-sky-deep img[src*="assets/images/icons/"], .home-one .bg-pink img[src*="assets/images/icons/"], .home-one .footer img[src*="assets/images/icons/"], .home-one .bg-main-600 i[class*="ph-"], .home-one .bg-main-two-600 i[class*="ph-"], .home-one .bg-dark-deep i[class*="ph-"], .home-one .bg-sky-deep i[class*="ph-"], .home-one .bg-pink i[class*="ph-"], .home-one .footer i[class*="ph-"] { filter: brightness(0) invert(1) !important; color: #ffffff !important; } /* Explicit black icon utility for light cards when needed */ .home-one .icon-black, .home-one .icon-black i[class*="ph-"] { filter: brightness(0) !important; color: #111111 !important; } /* Keep store badges original (avoid white-wash) */ .home-one img[src*="assets/images/icons/store"] { filter: none !important; } /* Navbar always above floating widgets/content */ .header, .header.fixed-header { z-index: 9999 !important; } /* Restore theme-like cursor style */ .cursor { width: 32px !important; height: 32px !important; border: 1px solid #111111 !important; border-radius: 999px !important; background: transparent !important; color: #111111 !important; mix-blend-mode: difference !important; box-shadow: none !important; transition: none !important; z-index: 9998 !important; pointer-events: none !important; } .dot { width: 4px !important; height: 4px !important; border-radius: 999px !important; background: #ffffff !important; mix-blend-mode: difference !important; box-shadow: none !important; transition: none !important; z-index: 9999 !important; pointer-events: none !important; } /* Default OS cursor stays visible alongside .cursor + .dot (no cursor:none). */ /* Footer: word wrap only (line-height follows theme output.css) */ .footer p { overflow-wrap: break-word; } /* Footer contact: icon column lines up with copy */ .footer-contact-rows { max-width: 100%; } /* Flexbox: allow text column to shrink so copy wraps (intrinsic min-width was clipping right edge) */ .footer .footer-contact-row > :not(.footer-contact-icon) { flex: 1 1 0%; min-width: 0; } .footer .footer-contact-row p { overflow-wrap: anywhere; } /* Trust bullets: same flex-shrink pattern as contact rows */ .footer .footer__trust-list li > p { flex: 1 1 0%; min-width: 0; } .footer-contact-icon { width: 2rem; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; line-height: 1; padding-top: 0.15rem; } .footer-contact-icon i { font-size: 1.25rem; line-height: 1; vertical-align: top; } .footer-contact-row--phone .footer-contact-icon { padding-top: 0.5rem; } /* Hero: use relevant local image with balanced composition */ .hero-banner .hero-media { max-width: 620px; margin-inline-start: auto; isolation: isolate; } .hero-banner .hero-main-image { width: 100%; max-height: 560px; object-fit: cover; object-position: center; aspect-ratio: 4 / 3.9; border-radius: 56% 44% 49% 51% / 45% 56% 44% 55%; border: 8px solid rgba(255, 255, 255, 0.76); box-shadow: 0 32px 56px rgba(17, 24, 39, 0.2), 0 8px 26px rgba(51, 166, 207, 0.12); position: relative; z-index: 2; } /* Gradient placeholder uses same frame as photo */ .hero-banner div.hero-main-image { object-fit: unset; overflow: hidden; background-size: cover; background-position: center; } .hero-banner .hero-media::before { content: ""; position: absolute; width: 74%; height: 74%; inset-inline-end: 4%; inset-block-start: 7%; z-index: 1; border-radius: 52% 48% 36% 64% / 59% 37% 63% 41%; background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.78), transparent 52%), radial-gradient(ellipse 70% 55% at 78% 70%, rgba(186, 29, 58, 0.12), transparent 55%), linear-gradient(140deg, rgba(239, 108, 0, 0.2), rgba(186, 29, 58, 0.18)); filter: blur(2px); } .hero-banner .hero-media::after { content: ""; position: absolute; width: 68%; height: 68%; inset-inline-end: 8%; inset-block-start: 12%; z-index: 0; border-radius: 56% 44% 58% 42% / 36% 62% 38% 64%; background: radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.45), transparent 45%), linear-gradient(165deg, rgba(255, 255, 255, 0.58), rgba(245, 230, 224, 0.22)); } /* Remove decorative peach/pink gradient blobs behind hero portrait */ .hero-banner .hero-media::before, .hero-banner .hero-media::after { content: none !important; display: none !important; } .hero-banner .hero-media > .bg-white, .hero-banner .hero-media > .bg-\[\#ffffffb3\], .hero-banner .hero-media > .bg-main-600 { box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12); } .hero-banner .hero-channel-card { min-width: 214px; } .hero-banner .hero-channel-text { display: flex; gap: 0.6rem; align-items: center; } .hero-banner .hero-channel-label { color: #6b7280; font-size: 0.9rem; font-weight: 500; line-height: 1; } .hero-banner .hero-channel-icon img { width: 2.65rem !important; height: 2.65rem !important; } .hero-banner { --hero-spot-x: 50%; --hero-spot-y: 50%; background-image: radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.72) 0%, transparent 58%), radial-gradient(circle at 11% 24%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 249, 245, 0.94) 48%, rgba(255, 245, 242, 0.91) 100%), linear-gradient(115deg, rgba(186, 29, 58, 0.09), rgba(239, 108, 0, 0.08)), url("../images/origin/banner-bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Ambient mesh orbs (under content; drift + optional GSAP parallax on inner) */ .hero-banner__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0.85; } .hero-banner__ambient-parallax { position: absolute; inset: -12% -8%; will-change: transform; } .hero-banner__spotlight { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.46; mix-blend-mode: soft-light; background: radial-gradient( min(85vw, 720px) circle at var(--hero-spot-x, 50%) var(--hero-spot-y, 50%), rgba(186, 29, 58, 0.14) 0%, rgba(239, 108, 0, 0.09) 32%, transparent 60% ); } .hero-banner__orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.55; mix-blend-mode: multiply; } /* Remove large hero ambient blob in first section */ .hero-banner__orb { display: none !important; } .hero-banner__orb--1 { width: min(52vw, 520px); height: min(52vw, 520px); inset-inline-start: -8%; inset-block-start: -6%; background: radial-gradient(circle at 35% 35%, rgba(186, 29, 58, 0.45) 0%, rgba(186, 29, 58, 0.08) 55%, transparent 70%); animation: hero-orb-drift-a 28s ease-in-out infinite alternate; } .hero-banner__orb--2 { width: min(44vw, 440px); height: min(44vw, 440px); inset-inline-end: -6%; inset-block-start: 18%; background: radial-gradient(circle at 60% 40%, rgba(239, 108, 0, 0.35) 0%, rgba(255, 200, 160, 0.12) 50%, transparent 68%); animation: hero-orb-drift-b 32s ease-in-out infinite alternate; animation-delay: -6s; } .hero-banner__orb--3 { width: min(38vw, 380px); height: min(38vw, 380px); inset-inline-start: 28%; inset-block-end: -12%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 236, 228, 0.35) 45%, transparent 65%); opacity: 0.4; mix-blend-mode: soft-light; animation: hero-orb-drift-c 24s ease-in-out infinite alternate; animation-delay: -12s; } @keyframes hero-orb-drift-a { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(4%, 6%) scale(1.06); } } @keyframes hero-orb-drift-b { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-5%, 4%) scale(1.05); } } @keyframes hero-orb-drift-c { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(3%, -5%) scale(1.08); } } /* Fine line grid + vignette mask (parallax on .hero-banner__ambient-parallax--grid) */ .hero-banner__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 30px, rgba(17, 24, 39, 0.045) 30px, rgba(17, 24, 39, 0.045) 31px ), repeating-linear-gradient( 90deg, transparent 0, transparent 30px, rgba(17, 24, 39, 0.045) 30px, rgba(17, 24, 39, 0.045) 31px ); -webkit-mask-image: radial-gradient( ellipse 78% 68% at 50% 44%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 52%, transparent 82% ); mask-image: radial-gradient( ellipse 78% 68% at 50% 44%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 52%, transparent 82% ); animation: hero-grid-breathe 44s ease-in-out infinite alternate; } @keyframes hero-grid-breathe { 0% { opacity: 0.38; } 50% { opacity: 0.54; } 100% { opacity: 0.44; } } @media (max-width: 639px) { .hero-banner__grid { animation: none; opacity: 0.34; } } @media (prefers-reduced-motion: reduce) { .hero-banner__orb--1, .hero-banner__orb--2, .hero-banner__orb--3 { animation: none; } .hero-banner__grid { animation: none; opacity: 0.42; } .hero-banner__spotlight { opacity: 0; visibility: hidden; } } /* Social proof: client logos in circular frames */ .hero-brand-logo__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 3px; } .hero-banner .hero-brand-logo { background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 4px 12px rgba(17, 24, 39, 0.06); } .hero-brand-logo--on-dark { background: rgba(255, 255, 255, 0.98); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 16px rgba(0, 0, 0, 0.28); } @media (max-width: 1280px) { .hero-banner .hero-media { padding-inline-start: 38px !important; } } @media (max-width: 1024px) { .hero-banner .hero-media { padding-inline-start: 0 !important; max-width: 100%; } .hero-banner .hero-main-image { max-height: 480px; border-width: 6px; } .hero-banner .hero-media::before { width: 80%; height: 80%; inset-inline-end: 2%; inset-block-start: 8%; } .hero-banner .hero-media::after { width: 76%; height: 76%; inset-inline-end: 4%; inset-block-start: 10%; } .hero-banner .hero-channel-card { padding-inline: 1rem !important; padding-block: 0.85rem !important; gap: 0.9rem !important; } } /* Scroll-growing video — palette in brand.css; layout below */ .scroll-grow-video-section { position: relative; overflow-x: hidden; max-width: 100%; width: 100%; } /* Desktop pin+scrub: allow frame to scale past viewport edges (centered cover zoom) */ @media (min-width: 769px) { .scroll-grow-video-section:not(.scroll-grow-video-section--reduced) { overflow-x: visible; overflow-y: visible; } .scroll-grow-video-section:not(.scroll-grow-video-section--reduced) .scroll-grow-video__pin { overflow-x: visible; overflow-y: visible; position: relative; } } .scroll-grow-video__pin { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.75rem, 1.2vw, 1.15rem); padding-block: clamp(1.25rem, 3vh, 2.5rem); } .scroll-grow-video__frame { position: relative; overflow: hidden; flex-shrink: 0; width: 100%; max-width: 100%; margin-inline: auto; border-radius: 24px; aspect-ratio: 16 / 9; background: var(--ov-dark-bg, #0d0f14); box-sizing: border-box; transform-origin: center center; } /* End of scrub: viewport fill (pin uses pinType:fixed so this is viewport-relative, not transform-contained) */ @media (min-width: 769px) { .scroll-grow-video-section:not(.scroll-grow-video-section--reduced) .scroll-grow-video__frame.scroll-grow-video__frame--viewport-fill { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; aspect-ratio: unset !important; border-radius: 0 !important; z-index: 9990; box-shadow: none; transform: none !important; min-height: 100vh !important; min-height: 100dvh !important; } .scroll-grow-video-section:not(.scroll-grow-video-section--reduced) .scroll-grow-video__frame.scroll-grow-video__frame--viewport-fill .scroll-grow-video__media { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center center !important; } } .scroll-grow-video__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; } /* Mobile: full screen control (no pin/zoom; see custom-gsap.js initScrollGrowMobileFullscreen) */ @media (max-width: 768px) { .scroll-grow-video__fullscreen-btn { position: absolute; bottom: max(0.65rem, env(safe-area-inset-bottom)); right: max(0.65rem, env(safe-area-inset-right)); z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; min-width: 44px; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(0, 0, 0, 0.58); color: #fff; font-size: 0.75rem; font-weight: 600; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .scroll-grow-video__fullscreen-btn-text { line-height: 1.2; } .scroll-grow-video__fullscreen-close { position: absolute; top: max(0.65rem, env(safe-area-inset-top)); right: max(0.65rem, env(safe-area-inset-right)); z-index: 4; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0, 0, 0, 0.52); color: #fff; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .scroll-grow-video__frame.scroll-grow-video__frame--mobile-fullscreen { position: fixed !important; inset: 0 !important; z-index: 9990; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; background: #0a0a0a; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .scroll-grow-video__frame.scroll-grow-video__frame--mobile-fullscreen .scroll-grow-video__media { pointer-events: auto; } .scroll-grow-video__frame.scroll-grow-video__frame--mobile-fullscreen .scroll-grow-video__fullscreen-btn { display: none; } } @media (min-width: 769px) { .scroll-grow-video__pin { min-height: 92svh; } .scroll-grow-video__eyebrow { margin-bottom: 0; } /* Pin+scrub only: eyebrow out of flex flow so the frame is vertically centered in the viewport; avoids top-heavy crop when scaling to cover */ .scroll-grow-video-section:not(.scroll-grow-video-section--reduced) .scroll-grow-video__eyebrow { position: absolute; top: clamp(1rem, 3vh, 2.5rem); left: 0; right: 0; margin-bottom: 0; z-index: 2; text-align: center; } } @media (prefers-reduced-motion: reduce) { .scroll-grow-video-section .scroll-grow-video__pin { min-height: 0; padding-block: 3rem; } .scroll-grow-video-section .scroll-grow-video__frame { width: 100% !important; max-width: 100% !important; border-radius: 16px !important; margin-inline: auto; transform: none !important; } } .scroll-grow-video-section--reduced .scroll-grow-video__pin { min-height: 0; padding-block: 3rem; } .scroll-grow-video-section--reduced .scroll-grow-video__frame { width: 100%; max-width: 100%; border-radius: 16px; margin-inline: auto; transform: none; } .store-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 136px; justify-content: center; padding: 8px 14px; border-radius: 999px; background: #1f1f1f; border: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff !important; font-size: 13px; font-weight: 600; } .store-badge i { color: #ef6c00 !important; font-size: 17px; line-height: 1; } .store-badge:hover { border-color: #ef6c00; color: #ffffff !important; } /* Recolor decorative roadmap line dots away from blue */ .home-one img[src*="curve-line.png"] { filter: hue-rotate(-182deg) saturate(320%) brightness(1.02) contrast(1.08) !important; } /* Choose Us: match brand (crimson + orange) over cohesive hero-style base */ .choose-us-section { background-image: radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 249, 245, 0.92) 44%, rgba(255, 245, 240, 0.9) 100%), linear-gradient(130deg, rgba(198, 40, 40, 0.08), rgba(239, 108, 0, 0.07)), url("../images/thumbs/about-two-img-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; } #box-wrapper { border-radius: 1rem; position: relative; overflow: visible !important; } #box-wrapper::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient( 145deg, rgba(198, 40, 40, 0.07) 0%, transparent 44%, transparent 56%, rgba(239, 108, 0, 0.08) 100% ); } #box-wrapper .choose-us-base { position: relative; z-index: 0; aspect-ratio: 4 / 5; min-height: 430px; max-height: 520px; width: 100%; height: 100%; object-fit: cover; object-position: center top; box-shadow: 0 18px 42px rgba(17, 24, 39, 0.16); } #box-wrapper .choose-us-float { width: 102px; height: 102px; border-radius: 16px; position: absolute; z-index: 12; background: #ffffff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(17, 24, 39, 0.06); box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12); } /* Medallion: echoes .choose-us-card__icon gradient disc */ #box-wrapper .choose-us-service-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; width: 4rem; height: 4rem; border-radius: 50%; box-sizing: border-box; } #box-wrapper .choose-us-service-icon--red { background: linear-gradient( 145deg, rgba(51, 166, 207, 0.16), rgba(20, 120, 212, 0.08) ); border: 1px solid rgba(51, 166, 207, 0.28); } #box-wrapper .choose-us-service-icon--orange { background: linear-gradient( 145deg, rgba(138, 155, 184, 0.2), rgba(51, 166, 207, 0.06) ); border: 1px solid rgba(138, 155, 184, 0.32); } #box-wrapper .choose-us-service-icon i { font-size: 2rem; line-height: 1; } #box-wrapper .choose-us-service-icon--red i { color: #33A6CF; } #box-wrapper .choose-us-service-icon--orange i { color: #8A9BB8; } #box-wrapper .choose-us-float--tl { left: -20px; top: 24px; } #box-wrapper .choose-us-float--tr { right: 28px; top: 28px; } #box-wrapper .choose-us-float--ml { left: 92px; top: 178px; } #box-wrapper .choose-us-float--br { right: 30px; bottom: 58px; } .choose-us-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .choose-us-card { min-height: 198px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); background: #f8f9fb; border-color: #eceff3 !important; list-style: none; } .choose-us-card h2 { margin-bottom: 0.6rem !important; line-height: 1.2; list-style: none; } .choose-us-card h2::marker { content: none; } .choose-us-card p { line-height: 1.7; font-size: 0.95rem; } /* Feature-card medallions: scale + palette aligned with #box-wrapper floats */ .choose-us-card__icon { width: 3.75rem; height: 3.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; flex-shrink: 0; line-height: 0; box-sizing: border-box; box-shadow: 0 10px 22px rgba(17, 24, 39, 0.08); } .choose-us-card__icon--red { background: linear-gradient( 145deg, rgba(51, 166, 207, 0.16), rgba(20, 120, 212, 0.08) ); border: 1px solid rgba(51, 166, 207, 0.28); } .choose-us-card__icon--orange { background: linear-gradient( 145deg, rgba(138, 155, 184, 0.2), rgba(51, 166, 207, 0.06) ); border: 1px solid rgba(138, 155, 184, 0.32); } .choose-us-card__icon i { font-size: 1.875rem; line-height: 1; } .choose-us-card__icon--red i { color: #33A6CF; } .choose-us-card__icon--orange i { color: #8A9BB8; } .choose-us-pill { background: #33A6CF !important; } .choose-us-stat h3 { color: #33A6CF !important; } .choose-us-stat p { color: #1f2937 !important; } /* Footer CTA: eyebrow matches brand medallion/pill energy; lead copy spacing */ .cta-eyebrow { display: inline-block; padding: 0.35rem 1.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: capitalize; color: #fff; border-radius: 999px; background: linear-gradient(145deg, #c62828 0%, #9e1a1a 52%, #b71c1c 100%); box-shadow: 0 6px 18px rgba(198, 40, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.22); margin-bottom: 0.65rem; } .cta-block .cta-lead { margin-bottom: 0; } .cta-block .btn-main-two { max-width: 100%; } @media (max-width: 1024px) { #box-wrapper .choose-us-base { aspect-ratio: 4 / 5; min-height: 360px; max-height: 430px; } #box-wrapper .choose-us-float { width: 84px; height: 84px; } #box-wrapper .choose-us-float--ml { left: 64px; top: 154px; } #box-wrapper .choose-us-service-icon { width: 3.5rem; height: 3.5rem; } #box-wrapper .choose-us-service-icon i { font-size: 1.75rem; } .choose-us-card__icon { width: 3.25rem; height: 3.25rem; } .choose-us-card__icon i { font-size: 1.625rem; } } @media (max-width: 640px) { #box-wrapper .choose-us-float { display: none !important; } .choose-us-card { min-height: auto; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } } /* Unique roadmap redesign (non-template look) */ @property --shine-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes shine-rotate { to { --shine-angle: 360deg; } } @keyframes roadmap-chip-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(1.12); } } #roadmap-section { background: radial-gradient(circle at 8% 10%, rgba(51, 166, 207, 0.10), transparent 34%), radial-gradient(circle at 96% 12%, rgba(91, 58, 237, 0.08), transparent 36%), linear-gradient(145deg, #0d0f14, #161922 52%, #12151c); } .roadmap-body { text-align: center; padding-bottom: clamp(0.5rem, 2vw, 1rem); } .roadmap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); align-content: start; padding-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-inline: clamp(0px, 1vw, 0.5rem); position: relative; } .roadmap-grid::before, .roadmap-grid::after { display: none; } .roadmap-headline-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; margin-top: 0; margin-bottom: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.82rem; font-weight: 600; } .roadmap-headline-chip i { color: var(--ov-blue); animation: roadmap-chip-pulse 2s ease-in-out infinite; } .roadmap-node { position: relative; min-height: clamp(148px, 14vw, 168px); border-radius: 22px; padding: clamp(18px, 2vw, 22px) clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 24px rgba(5, 7, 12, 0.28); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; backdrop-filter: blur(2px); z-index: 1; overflow: hidden; isolation: isolate; will-change: transform, filter, opacity; transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } .roadmap-node::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px; background: conic-gradient(from var(--shine-angle), transparent 75%, rgba(51, 166, 207, 0.55) 88%, rgba(102, 184, 212, 0.4) 92%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2; } .roadmap-node:hover::before { opacity: 1; animation: shine-rotate 4s linear infinite; } .roadmap-node:nth-child(odd) { transform: translateY(6px); } .roadmap-node:nth-child(even) { transform: translateY(-4px); } .roadmap-node:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 0 0 1px rgba(51, 166, 207, 0.25), 0 18px 30px rgba(5, 7, 12, 0.36), 0 0 28px rgba(51, 166, 207, 0.12); } .roadmap-node--active { box-shadow: inset 0 0 0 1px rgba(51, 166, 207, 0.35), 0 0 0 1px rgba(51, 166, 207, 0.2), 0 16px 28px rgba(5, 7, 12, 0.36); } .roadmap-node img { width: 30px; height: 30px; object-fit: contain; margin-bottom: 10px; position: relative; z-index: 1; } .roadmap-node h2 { color: #fff; font-size: 1.02rem; line-height: 1.22; font-weight: 600; margin: 0; position: relative; z-index: 1; } .roadmap-node p { color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; letter-spacing: 0.02em; margin-top: 6px; margin-bottom: 0; text-transform: uppercase; position: relative; z-index: 1; } .roadmap-node__index { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #fff; background: rgba(51, 166, 207, 0.88); border: 1px solid rgba(255, 255, 255, 0.28); display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .roadmap-node--blue, .roadmap-node--red, .roadmap-node--indigo, .roadmap-node--teal, .roadmap-node--violet, .roadmap-node--deep, .roadmap-node--purple, .roadmap-node--pink { background: linear-gradient(145deg, rgba(22, 25, 34, 0.92), rgba(13, 15, 20, 0.96)); } @media (max-width: 1200px) { .roadmap-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); padding-top: 20px; } } @media (max-width: 768px) { .roadmap-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); } .roadmap-grid::before, .roadmap-grid::after { display: none; } .roadmap-node:nth-child(odd), .roadmap-node:nth-child(even) { transform: none; } } @media (max-width: 480px) { .roadmap-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px; } } /* Industries impact orbit — premium glass; copy + heading left, orbit right */ .industry-impact-orbit { position: relative; } .industry-impact-orbit__shell { position: relative; border-radius: 24px; padding: clamp(1.15rem, 2.2vw, 1.75rem); background: linear-gradient( 105deg, rgba(255, 250, 249, 0.97) 0%, rgba(255, 252, 250, 0.94) 38%, rgba(255, 255, 255, 0.92) 72%, rgba(255, 249, 244, 0.9) 100% ); border: 1px solid rgba(255, 255, 255, 0.92); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 32px 64px -12px rgba(17, 24, 39, 0.08), 0 12px 28px -8px rgba(198, 40, 40, 0.06); backdrop-filter: blur(16px) saturate(1.06); -webkit-backdrop-filter: blur(16px) saturate(1.06); isolation: isolate; overflow: hidden; } .industry-impact-orbit__shell::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 85% 70% at 12% 45%, rgba(255, 228, 224, 0.45), transparent 55%), radial-gradient(ellipse 60% 50% at 88% 55%, rgba(255, 237, 220, 0.35), transparent 50%); opacity: 1; pointer-events: none; } .industry-impact-orbit__shell::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 120% 100% at 50% 100%, rgba(17, 24, 39, 0.04), transparent 48%); pointer-events: none; } .industry-impact-orbit__copy { display: flex; flex-direction: column; gap: clamp(0.85rem, 2vw, 1.35rem); min-width: 0; width: 100%; } .industry-impact-orbit__header { position: relative; z-index: 2; text-align: center; max-width: 42rem; margin-inline: auto; margin-bottom: 0; } .industry-impact-orbit__header h3.splitTextStyleOne { letter-spacing: -0.02em; color: #111827 !important; } .industry-impact-orbit__lead { font-size: clamp(0.8125rem, 1.35vw, 0.9375rem); line-height: 1.5; color: #64748b !important; margin-bottom: 0; max-width: 38rem; margin-inline: auto; } .industry-impact-orbit__eyebrow { display: inline-flex; align-items: center; margin-bottom: 0.55rem; padding: 0.28rem 0.85rem; border-radius: 999px; border: 1px solid rgba(198, 40, 40, 0.18); background: rgba(255, 255, 255, 0.78); color: #9a1c1c !important; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .industry-impact-orbit__main { display: flex; flex-direction: column; align-items: stretch; gap: clamp(1.25rem, 3vw, 2rem); position: relative; z-index: 2; } .industry-impact-orbit__visual { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 100%; padding-block: clamp(0.35rem, 1.5vw, 1rem); } .industry-impact-orbit__details { width: 100%; min-width: 0; } .industry-impact-orbit__stage { --orbit-size: min(92vw, 520px); position: relative; z-index: 2; width: var(--orbit-size); height: var(--orbit-size); margin: 0 auto; border-radius: 50%; perspective: 880px; transform-style: preserve-3d; } .industry-impact-orbit__ring { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .industry-impact-orbit__ring--outer { width: 100%; height: 100%; border: 1px solid rgba(198, 40, 40, 0.14); background: radial-gradient(circle, rgba(255, 224, 224, 0.22), rgba(255, 236, 228, 0.1) 55%, rgba(255, 248, 242, 0.04) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 12px rgba(198, 40, 40, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 16px 40px rgba(198, 40, 40, 0.08); } .industry-impact-orbit__ring--inner { width: 62%; height: 62%; border: 1px solid rgba(239, 108, 0, 0.16); background: radial-gradient(circle at 42% 38%, rgba(255, 252, 248, 0.95), rgba(255, 236, 214, 0.5) 68%, rgba(255, 220, 188, 0.18) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 10px rgba(239, 108, 0, 0.07), 0 8px 22px rgba(239, 108, 0, 0.08); } .industry-impact-orbit__core { position: absolute; left: 50%; top: 50%; width: 29%; height: 29%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #d9483c 0%, #b32e24 48%, #8b221c 100%); border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 10px 22px rgba(89, 24, 20, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 2px 6px rgba(255, 255, 255, 0.22), inset 0 -4px 10px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.35rem 0.45rem; color: #fff; } .industry-impact-orbit__core-label { font-size: clamp(0.48rem, 1.05vw, 0.6rem); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.88; max-width: 100%; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .industry-impact-orbit__core-value { font-size: clamp(1.05rem, 2vw, 1.65rem); line-height: 1.05; font-weight: 700; } .industry-impact-orbit__core-copy { font-size: clamp(0.42rem, 0.9vw, 0.56rem); opacity: 0.88; max-width: 100%; line-height: 1.25; } .impact-orbit-node { --node-size: 92px; position: absolute; left: 50%; top: 50%; width: var(--node-size); min-height: var(--node-size); padding: 0.58rem; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); border: 1px solid rgba(255, 255, 255, 0.82); background: linear-gradient(158deg, rgba(255, 255, 255, 0.92), rgba(255, 246, 240, 0.72)); box-shadow: 0 10px 22px rgba(17, 24, 39, 0.1), 0 4px 10px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95); transform-origin: center center; cursor: pointer; transition: box-shadow 0.25s ease, transform 0.25s ease; } .impact-orbit-node__value { display: block; font-size: clamp(0.82rem, 1.55vw, 1.08rem); line-height: 1.08; font-weight: 700; color: #7f1d1d; } .impact-orbit-node__label { display: block; margin-top: 0.2rem; font-size: clamp(0.5rem, 0.92vw, 0.64rem); line-height: 1.28; color: #64748b; } /* Node-specific classes remain for semantic identity; placement is angle-driven in GSAP. */ .impact-orbit-node.is-active { box-shadow: 0 14px 28px rgba(17, 24, 39, 0.12), 0 6px 14px rgba(166, 31, 31, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98); } .industry-impact-orbit__legend { margin-top: 0; display: grid; grid-template-columns: 1fr; gap: 0.7rem; } .industry-impact-orbit__legend p { margin: 0; padding: 0.65rem 0.75rem; border-radius: 12px; font-size: 0.8125rem; line-height: 1.45; color: #64748b; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.88); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset; transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .industry-impact-orbit__legend p strong { font-weight: 700; color: #b42323; } /* Scroll-scrub sync (matches active orbit node) */ .industry-impact-orbit__legend p.is-active { background: rgba(255, 255, 255, 0.88); border-color: rgba(198, 40, 40, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 6px 18px rgba(17, 24, 39, 0.06); } /* Orbit node hover — paired legend highlight */ .industry-impact-orbit__legend p.is-orbit-hover { background: rgba(255, 248, 246, 0.96); border-color: rgba(198, 40, 40, 0.38); box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 10px 26px rgba(166, 31, 31, 0.12); transform: translateY(-1px); } /* Legend row hover — paired orbit node */ .impact-orbit-node.is-legend-hover { box-shadow: 0 16px 34px rgba(17, 24, 39, 0.14), 0 6px 16px rgba(166, 31, 31, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.98); } @media (hover: hover) { .impact-orbit-node:hover { box-shadow: 0 16px 32px rgba(17, 24, 39, 0.12), 0 6px 14px rgba(239, 108, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.98); } .industry-impact-orbit__legend p:hover:not(.is-orbit-hover):not(.is-active) { background: rgba(255, 255, 255, 0.88); box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 8px 20px rgba(17, 24, 39, 0.06); } } @media (prefers-reduced-motion: reduce) { .impact-orbit-node { transition: none; } } @media (min-width: 900px) { .industry-impact-orbit__shell { border-radius: 28px; padding: clamp(1.35rem, 2vw, 1.85rem) clamp(1.25rem, 2.2vw, 2rem); max-height: none; } .industry-impact-orbit__header { text-align: left; margin-inline: 0; max-width: none; } .industry-impact-orbit__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.75rem, 4vw, 3.25rem); } .industry-impact-orbit__copy { align-self: center; gap: clamp(1rem, 2.2vw, 1.5rem); } .industry-impact-orbit__lead { margin-inline: 0; max-width: 38rem; } .industry-impact-orbit__visual { justify-content: center; padding-block: clamp(0.35rem, 1.2vw, 1rem); padding-inline: clamp(0.35rem, 1.8vw, 1.25rem); } .industry-impact-orbit__details { align-self: stretch; } .industry-impact-orbit__stage { --orbit-size: min(min(52vmin, 58vw), 540px); margin: 0; } .impact-orbit-node { --node-size: 96px; padding: 0.5rem 0.55rem; } .industry-impact-orbit__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; max-height: none; overflow-y: visible; padding-right: 0; } .industry-impact-orbit__legend p { font-size: 0.78rem; padding: 0.8rem 0.9rem; line-height: 1.42; } } /* Short viewports: allow legend scroll when needed */ @media (min-width: 900px) and (max-height: 720px) { .industry-impact-orbit__legend { max-height: min(42vh, 320px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } } @media (max-width: 899px) { .industry-impact-orbit__shell { border-radius: 20px; padding: 1rem 0.85rem; } .industry-impact-orbit__stage { --orbit-size: min(92vw, 460px); } .impact-orbit-node { --node-size: 86px; padding: 0.42rem 0.48rem; } .industry-impact-orbit__main { flex-direction: column; align-items: stretch; } .industry-impact-orbit__visual { margin-inline: auto; } } @media (max-width: 640px) { .industry-impact-orbit__stage { width: 100%; height: auto; aspect-ratio: 1 / 1; } .impact-orbit-node { --node-size: 84px; } .industry-impact-orbit__core { width: 34%; height: 34%; } .industry-impact-orbit__core-copy { display: none; } } @media (prefers-reduced-motion: reduce) { .impact-orbit-node, .industry-impact-orbit__ring, .industry-impact-orbit__core { transition: none !important; animation: none !important; transform: none; } } /* Services — premium gradient bento (6 tiles) */ .offer-bento[data-services-bento-root] { --services-bento-heading-space: 2.6rem; --services-bento-card-min: 200px; } @media (min-width: 1024px) { .offer-bento[data-services-bento-root] { --services-bento-heading-space: clamp(1.75rem, 3.2vh, 2.75rem); --services-bento-card-min: clamp(168px, 16.5vh, 200px); /* Comfortable vertical rhythm — clear space above headline and below grid */ padding-top: clamp(2.25rem, 5vh, 4rem) !important; padding-bottom: clamp(2.25rem, 5vh, 4rem) !important; overflow-x: visible; overflow-y: visible; } .offer-bento[data-services-bento-root] > .container { width: 100%; } .offer-bento[data-services-bento-root] > .container > .mb-13 { margin-bottom: var(--services-bento-heading-space); } .offer-bento[data-services-bento-root] > .container > .mb-13 > div.flex { gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: flex-start; justify-content: space-between; } .offer-bento[data-services-bento-root] > .container > .mb-13 > div.flex > div, .offer-bento[data-services-bento-root] > .container > .mb-13 > div.flex > p.splitTextStyleOne { min-width: 0; } .offer-bento[data-services-bento-root] > .container > .mb-13 > div.flex > div:first-child { flex: 1 1 52%; max-width: min(672px, 100%); } .offer-bento[data-services-bento-root] > .container > .mb-13 > div.flex > p.splitTextStyleOne { flex: 1 1 38%; max-width: min(500px, 100%); } .offer-bento[data-services-bento-root] .services-bento__card--theme { min-height: var(--services-bento-card-min); padding: clamp(0.75rem, 1.25vh, 1.05rem) clamp(0.85rem, 1.05vw, 1.1rem) clamp(2.1rem, 2.85vh, 2.65rem); } .offer-bento[data-services-bento-root] .services-bento__mini-icon { margin-bottom: 0.26rem; } .offer-bento[data-services-bento-root] .services-bento__eyebrow { margin-bottom: 0.22rem; } .offer-bento[data-services-bento-root] .services-bento__desc { margin-top: 0.26rem; line-height: 1.42; } .offer-bento[data-services-bento-root] > .container > .mb-13 .splitTextStyleOne.py-1.px-7\.5 { padding: 0.24rem 0.8rem !important; font-size: 0.7rem !important; margin-bottom: 0.35rem !important; } .offer-bento[data-services-bento-root] > .container > .mb-13 h3.splitTextStyleOne { font-size: clamp(1.55rem, 2.4vw, 2.1rem) !important; line-height: 1.18 !important; overflow-wrap: anywhere; } .offer-bento[data-services-bento-root] > .container > .mb-13 p.splitTextStyleOne { font-size: clamp(0.8rem, 0.9vw, 0.9rem) !important; line-height: 1.42 !important; } .offer-bento[data-services-bento-root] .services-bento__mini-icon { width: 1.72rem; height: 1.72rem; font-size: 0.82rem; } .offer-bento[data-services-bento-root] .services-bento__eyebrow { font-size: 0.67rem; letter-spacing: 0.045em; } .offer-bento[data-services-bento-root] .services-bento__title { font-size: clamp(1.05rem, 1.55vw, 1.4rem); line-height: 1.08 !important; max-width: 16ch !important; } .offer-bento[data-services-bento-root] .services-bento__desc { font-size: 0.8125rem; line-height: 1.42; -webkit-line-clamp: 3; line-clamp: 3; } /* Stacked right column: extra line room + slightly smaller figures so copy clears */ .offer-bento[data-services-bento-root] .services-bento__wa .services-bento__desc, .offer-bento[data-services-bento-root] .services-bento__btl .services-bento__desc { -webkit-line-clamp: 4; line-clamp: 4; } .offer-bento[data-services-bento-root] .services-bento__wa .services-bento__figure, .offer-bento[data-services-bento-root] .services-bento__btl .services-bento__figure { width: min(40%, 152px); aspect-ratio: 4 / 3; height: auto; max-height: 52%; right: 5%; bottom: 9%; } .offer-bento[data-services-bento-root] .services-bento__wa .services-bento__body, .offer-bento[data-services-bento-root] .services-bento__btl .services-bento__body { max-width: 64%; } .offer-bento[data-services-bento-root] .services-bento__sms .services-bento__desc, .offer-bento[data-services-bento-root] .services-bento__digital .services-bento__desc { -webkit-line-clamp: 4; line-clamp: 4; max-width: 36ch; } .offer-bento[data-services-bento-root] .services-bento__arrow { width: 2.25rem; height: 2.25rem; right: 0.72rem; top: 0.72rem; font-size: 1rem; } } @media (min-width: 1024px) and (max-height: 820px) { .offer-bento[data-services-bento-root] { --services-bento-heading-space: clamp(1.25rem, 2.4vh, 1.85rem); --services-bento-card-min: clamp(148px, 15vh, 172px); padding-top: clamp(1.35rem, 2.8vh, 2.25rem) !important; padding-bottom: clamp(1.35rem, 2.8vh, 2.25rem) !important; } .offer-bento[data-services-bento-root] > .container > .mb-13 h3.splitTextStyleOne { font-size: clamp(1.4rem, 2.1vw, 1.75rem) !important; } .offer-bento[data-services-bento-root] > .container > .mb-13 p.splitTextStyleOne { font-size: 0.78rem !important; line-height: 1.36 !important; } .offer-bento .services-bento { gap: clamp(0.65rem, 0.9vw, 0.85rem); } } .offer-bento .services-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: stretch; grid-auto-rows: minmax(200px, auto); } @media (min-width: 1024px) { .offer-bento .services-bento { grid-auto-rows: minmax(var(--services-bento-card-min, 228px), auto); gap: clamp(0.85rem, 1.1vw, 1.1rem); } } .services-bento__cell { min-width: 0; display: flex; } .services-bento__card { flex: 1; width: 100%; isolation: isolate; transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease; text-decoration: none; color: inherit; border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1); } @media (min-width: 1024px) { .offer-bento[data-services-bento-root] .services-bento { perspective: 1400px; perspective-origin: 50% 45%; } .offer-bento[data-services-bento-root] { --services-ecosystem-glow: 0; --services-ecosystem-focus: 0; } .offer-bento[data-services-bento-root] .services-bento__card { transform-style: preserve-3d; will-change: transform, opacity; backface-visibility: hidden; } .offer-bento[data-services-bento-root] .services-bento__card::before { background: linear-gradient( 168deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.01) 100% ); /* Wider response range so pull / lock phases read clearly without harsh flashes */ opacity: calc(0.72 + (var(--services-ecosystem-focus, 0) * 0.2)); } .offer-bento[data-services-bento-root] .services-bento__card::after { opacity: calc(0.38 + (var(--services-ecosystem-glow, 0) * 0.28)); } .offer-bento[data-services-bento-root] .services-bento__pattern { opacity: calc(0.22 + (var(--services-ecosystem-focus, 0) * 0.16)); } .offer-bento[data-services-bento-root] .services-bento__figure-img { filter: saturate(1.05) contrast(1.02) drop-shadow(0 12px 22px rgba(15, 23, 42, 0.12)); } } .services-bento__card--theme { position: relative; display: block; min-height: 260px; overflow: hidden; padding: 1.35rem 1.35rem 4.25rem; box-sizing: border-box; border-radius: 36px !important; } .services-bento__card--theme:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16) !important; filter: saturate(1.03); } .services-bento__card--theme:hover .services-bento__figure-img { transform: translateY(2px) scale(1.05); } .services-bento__pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.38; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 88% 88%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%); } .services-bento__card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(165deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.03) 100%); } .services-bento__card::after { content: ""; position: absolute; bottom: -40%; right: -18%; width: min(70%, 260px); height: min(85%, 320px); border-radius: 999px; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 68%); opacity: 0.85; } .services-bento__figure { position: absolute; z-index: 2; right: -2%; bottom: 6%; width: min(52%, 220px); aspect-ratio: 4 / 3; height: auto; max-height: 48%; pointer-events: none; display: flex; align-items: flex-end; justify-content: flex-end; overflow: hidden; border-radius: 22px; } .services-bento__figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(15, 23, 42, 0.28) 100%); pointer-events: none; } .services-bento__figure-img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center 38%; display: block; border-radius: inherit; border: 2px solid rgba(255, 255, 255, 0.66); filter: saturate(1.08) contrast(1.04) drop-shadow(0 16px 30px rgba(15, 23, 42, 0.16)); transition: transform 0.45s ease; } .services-bento__body { position: relative; z-index: 3; max-width: 58%; padding-top: 0.15rem; box-sizing: border-box; } @media (min-width: 1024px) { .offer-bento[data-services-bento-root] .services-bento__card--theme { padding: clamp(0.75rem, 1.25vh, 1.05rem) clamp(0.85rem, 1.05vw, 1.1rem) clamp(2.1rem, 2.85vh, 2.65rem); } .services-bento__body { max-width: 56%; padding-top: 0.12rem; } .services-bento__figure { width: min(46%, 200px); aspect-ratio: 4 / 3; height: auto; max-height: 46%; right: 2%; bottom: 8%; } } /* Narrow viewports: figure is absolute bottom-right — reserve space so copy never sits on the image */ @media (max-width: 767px) { .services-bento__body { max-width: none; width: 100%; /* Figure band ~min(46%,168px) wide; keep copy clear of the photo */ padding-inline-end: calc(min(46%, 168px) + 18px); box-sizing: border-box; } .services-bento__title, .services-bento__desc { max-width: 100%; } .services-bento__desc { overflow-wrap: anywhere; word-wrap: break-word; } .services-bento__figure { width: min(46%, 168px); aspect-ratio: 4 / 3; height: auto; max-height: 44%; right: 0; bottom: 7%; opacity: 0.98; } /* Extra bottom room so multi-line titles + desc clear the photo vertically */ .services-bento__card--theme { padding-bottom: 5.25rem; } } .services-bento__eyebrow { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; line-height: 1.2; } .services-bento__mini-icon { width: 2.15rem; height: 2.15rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.55rem; font-size: 1.05rem; color: #fff; background: rgba(15, 23, 42, 0.28); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16); } .services-bento__title { margin: 0 !important; max-width: 16ch !important; font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 700 !important; line-height: 1.12 !important; color: #0f172a !important; text-shadow: none; letter-spacing: -0.02em; } .services-bento__desc { margin: 0.55rem 0 0; padding: 0; font-size: 0.875rem; line-height: 1.45; font-weight: 500; color: #64748b; max-width: 32ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } @media (min-width: 1024px) { .services-bento__sms .services-bento__desc, .services-bento__digital .services-bento__desc { -webkit-line-clamp: 4; line-clamp: 4; max-width: 36ch; } } /* Campaign scenarios slider: reveal CTA when hovering anywhere on the card. Class name must NOT contain "-card" — brand.css [class*="-card"] breaks it. Image link stacks above the CTA unless z-index is explicit; Phosphor can fail if CDN is slow/blocked — inline SVG is the visible arrow. */ .show-case .group-item .relative > a:not(.show-case__arrow) { position: relative; z-index: 0; } .show-case .show-case__arrow { z-index: 3; box-sizing: border-box; width: 3.75rem; height: 3.75rem; min-width: 3.75rem; min-height: 3.75rem; border-radius: 9999px !important; background: #ffffff !important; color: #171717 !important; pointer-events: none; opacity: 0; transition: opacity 0.3s ease, color 0.2s ease; } .show-case .show-case__arrow-icon { display: block; flex-shrink: 0; pointer-events: none; } .show-case .group-item:hover .show-case__arrow, .show-case .group-item:focus-within .show-case__arrow { pointer-events: auto; opacity: 1; } .show-case .group-item:hover .show-case__arrow:hover, .show-case .group-item:focus-within .show-case__arrow:hover { /* Base uses bg #fff !important, which beats Tailwind hover:bg-main-600 — without this, hover turns the icon white while the circle stays white (arrow “vanishes”). */ background-color: var(--color-main-600) !important; color: #ffffff !important; } /* Touch / coarse pointers: no reliable hover — keep CTA visible */ @media (hover: none) { .show-case .show-case__arrow { pointer-events: auto; opacity: 1; } } /* Campaign scenarios: 28px rounded media stack (all viewports — Swiper + desktop) */ #show-case-section .swiper-slide .group-item .relative { border-radius: 1.75rem; overflow: hidden; } #show-case-section .group-item .relative > a:not(.show-case__arrow) { border-radius: 1.75rem; overflow: hidden; max-height: none; } html.home-one { --showcase-arch-overlap: clamp(3rem, 10vw, 7rem); } /* Campaign scenarios: 3D arc — perspective for Swiper coverflow + desktop scrub */ #show-case-section.show-case { position: relative; z-index: 2; isolation: isolate; /* Clip the section itself so the black edge visibly curves end-to-end. */ background-color: var(--color-main-two-600, #1a1a1a) !important; /* Let rotated / lifted cards paint past the content box (beats Tailwind overflow-hidden) */ overflow-x: clip; overflow-y: visible; /* Wider, subtler overlap: reduce the extra bottom room. */ padding-bottom: clamp(3rem, 8vmin, 5.5rem); /* Non-desktop: keep straight edge. */ -webkit-clip-path: none; clip-path: none; } /* * Bottom lip: smooth oval arc using radial mask (browser-safe). * Center is lifted, sides remain lower to match showcase card direction. */ #show-case-section.show-case::before { --lip-peak: clamp(64px, 13vw, 152px); content: none; position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: calc(100% + var(--showcase-arch-overlap, clamp(3rem, 10vw, 7rem))); z-index: -1; background-color: var(--color-main-two-600, #1a1a1a); pointer-events: none; } /* Fallback for browsers with weak clip-path support */ @supports not (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) { #show-case-section.show-case { clip-path: none; } } #show-case-section .show-case-slider { perspective: 1200px; perspective-origin: 50% 42%; overflow: visible !important; padding: clamp(2rem, 7vmin, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 12vmin, 7rem); box-sizing: border-box; } /* Desktop: campaign scenarios — flex row for GSAP horizontal scrub (Swiper destroyed in JS) */ @media (min-width: 1024px) { #show-case-section.show-case--horizontal-scroll .show-case-slider { width: 100%; max-width: 100%; } #show-case-section.show-case--horizontal-scroll .swiper-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 24px; width: max-content; box-sizing: border-box; transform-style: preserve-3d; padding-block: 0.5rem 1.5rem; } #show-case-section.show-case--horizontal-scroll .swiper-slide { width: min(380px, 28vw); min-width: 260px; flex-shrink: 0; height: auto; margin: 0 !important; box-sizing: border-box; transform-style: preserve-3d; transition: none; will-change: transform; border-radius: 1.75rem; overflow: visible; } #show-case-section.show-case--horizontal-scroll .swiper-slide .group-item { border-radius: 1.75rem; overflow: visible; } } /* Show full artwork in the frame (letterbox if needed — avoids cropping image edges) */ #show-case-section .pd-ph--showcase-slide { background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: #1a1a1e; border-radius: 1.75rem; overflow: hidden; transition: transform 0.35s ease, filter 0.35s ease; } #show-case-section .group-item:hover .relative, #show-case-section .group-item:focus-within .relative { box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38); transition: box-shadow 0.35s ease; } #show-case-section .group-item .relative { transition: box-shadow 0.35s ease; } #show-case-section .group-item:hover .pd-ph--showcase-slide, #show-case-section .group-item:focus-within .pd-ph--showcase-slide { filter: brightness(1.1) contrast(1.06); transform: scale(1.28); } @media (prefers-reduced-motion: reduce) { #show-case-section .pd-ph--showcase-slide { transition: filter 0.2s ease; } #show-case-section .group-item:hover .pd-ph--showcase-slide, #show-case-section .group-item:focus-within .pd-ph--showcase-slide { transform: none; filter: brightness(1.05) contrast(1.03); } } @media (min-width: 1024px) { #show-case-section.show-case { /* Laptop/desktop only: wide, subtle, end-to-end center-up arc. */ -webkit-clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 95% 99.2%, 90% 98.5%, 85% 97.8%, 80% 97.1%, 75% 96.5%, 70% 95.9%, 65% 95.4%, 60% 95.0%, 55% 94.7%, 50% 94.6%, 45% 94.7%, 40% 95.0%, 35% 95.4%, 30% 95.9%, 25% 96.5%, 20% 97.1%, 15% 97.8%, 10% 98.5%, 5% 99.2%, 0% 100% ); clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 95% 99.2%, 90% 98.5%, 85% 97.8%, 80% 97.1%, 75% 96.5%, 70% 95.9%, 65% 95.4%, 60% 95.0%, 55% 94.7%, 50% 94.6%, 45% 94.7%, 40% 95.0%, 35% 95.4%, 30% 95.9%, 25% 96.5%, 20% 97.1%, 15% 97.8%, 10% 98.5%, 5% 99.2%, 0% 100% ); } #testimonials-section { /* Force overlap so no white seam remains between sections. */ margin-top: clamp(-4.5rem, -9vw, -2.5rem); padding-top: clamp(0.5rem, 1.5vw, 1.1rem); } #show-case-section.show-case--horizontal-scroll .show-case-slider { cursor: grab; touch-action: pan-y; } #show-case-section.show-case--horizontal-scroll.show-case--dragging .show-case-slider { cursor: grabbing; user-select: none; } } @media (prefers-reduced-motion: reduce) { @media (min-width: 1024px) { #show-case-section.show-case--horizontal-scroll .swiper-slide { transform: none !important; will-change: auto; } } } /* Testimonials: smooth hover / active expand (opacity + motion + flex) */ #testimonials-section { position: relative; z-index: 1; /* Remove extra separation so sections meet without a large white gap. */ padding-top: clamp(1rem, 2.4vmin, 1.8rem); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #testimonials-section h3, #testimonials-section .testimonials-item__desc { text-rendering: optimizeLegibility; } @media (min-width: 1024px) { #testimonials-section .testimonials-item-wrapper { align-items: stretch; } } #testimonials-section .testimonials-item-wrapper .testimonials-item { position: relative; transition: flex 0.55s cubic-bezier(0.33, 1, 0.68, 1); display: flex; flex-direction: column; } #testimonials-section .testimonials-item__media { flex: 1; min-height: 0; } #testimonials-section .testimonials-item .current-content, #testimonials-section .testimonials-item .hidden-content { transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s ease; will-change: opacity, transform; } #testimonials-section .testimonials-item .current-content { opacity: 1; visibility: visible; transform: translateY(0); z-index: 1; } #testimonials-section .testimonials-item .hidden-content { display: block !important; opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; box-sizing: border-box; z-index: 0; } #testimonials-section .testimonials-item.active .hidden-content { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; position: relative; top: auto; left: auto; right: auto; width: auto; z-index: 2; flex: 1; display: flex !important; flex-direction: column; min-height: 0; } #testimonials-section .testimonials-item.active .current-content { display: block !important; opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; z-index: 0; } #testimonials-section .testimonials-item:not(.active) .current-content { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; overflow: visible; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; } @media (prefers-reduced-motion: reduce) { #testimonials-section .testimonials-item-wrapper .testimonials-item, #testimonials-section .testimonials-item .current-content, #testimonials-section .testimonials-item .hidden-content { transition-duration: 0.01ms !important; } } .services-bento__arrow { position: absolute; z-index: 4; right: 1.15rem; top: 1.15rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: #c62828; font-size: 1.25rem; box-shadow: 0 10px 24px rgba(198, 40, 40, 0.35); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; pointer-events: none; } .services-bento__card--theme:hover .services-bento__arrow { transform: scale(1.06); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2); } .services-bento__sms .services-bento__eyebrow { color: #33A6CF; } .services-bento__sms .services-bento__mini-icon { background: #33A6CF; } .services-bento__sms .services-bento__arrow { background: #33A6CF; box-shadow: 0 10px 24px rgba(51, 166, 207, 0.35); } .services-bento__sms .services-bento__card--theme:hover .services-bento__arrow { background: #2789AD; } .services-bento__wa .services-bento__eyebrow { color: #2789AD; } .services-bento__wa .services-bento__mini-icon { background: #161922; } .services-bento__wa .services-bento__arrow { background: #161922; box-shadow: 0 10px 24px rgba(22, 25, 34, 0.32); } .services-bento__wa .services-bento__card--theme:hover .services-bento__arrow { background: #0D0F14; } .services-bento__digital .services-bento__eyebrow { color: #2789AD; } .services-bento__digital .services-bento__mini-icon { background: #2789AD; } .services-bento__digital .services-bento__arrow { background: #2789AD; box-shadow: 0 10px 24px rgba(20, 120, 212, 0.28); } .services-bento__digital .services-bento__card--theme:hover .services-bento__arrow { background: #33A6CF; } .services-bento__btl .services-bento__eyebrow { color: #8A9BB8; } .services-bento__btl .services-bento__mini-icon { background: #8A9BB8; } .services-bento__btl .services-bento__arrow { background: #8A9BB8; box-shadow: 0 10px 24px rgba(138, 155, 184, 0.32); } .services-bento__btl .services-bento__card--theme:hover .services-bento__arrow { background: #6B7A96; } .services-bento__events .services-bento__eyebrow { color: #33A6CF; } .services-bento__events .services-bento__mini-icon { background: #33A6CF; } .services-bento__events .services-bento__arrow { background: #33A6CF; box-shadow: 0 10px 24px rgba(51, 166, 207, 0.3); } .services-bento__events .services-bento__card--theme:hover .services-bento__arrow { background: #2789AD; } .services-bento__stalls .services-bento__eyebrow { color: #8A9BB8; } .services-bento__stalls .services-bento__mini-icon { background: #161922; } .services-bento__stalls .services-bento__arrow { background: #161922; box-shadow: 0 10px 24px rgba(22, 25, 34, 0.28); } .services-bento__stalls .services-bento__card--theme:hover .services-bento__arrow { background: #0D0F14; } /* Subtle tinted shells — OmniVantis blue palette */ .services-bento__sms .services-bento__card { background: linear-gradient(152deg, #E8F5FA 0%, #f0f8fb 52%, #d4ecf7 100%) !important; } .services-bento__wa .services-bento__card { background: linear-gradient(152deg, #f5f7fb 0%, #eef2f7 54%, #e2e8f0 100%) !important; } .services-bento__digital .services-bento__card { background: linear-gradient(150deg, #E8F5FA 0%, #f1f5f9 54%, #d4ecf7 100%) !important; } .services-bento__btl .services-bento__card { background: linear-gradient(152deg, #f5f7fb 0%, #eef2f7 54%, #e8edf4 100%) !important; } .services-bento__events .services-bento__card { background: linear-gradient(152deg, #E8F5FA 0%, #f0f7fa 54%, #d4ecf7 100%) !important; } .services-bento__stalls .services-bento__card { background: linear-gradient(150deg, #f7f9fc 0%, #eef2f7 50%, #e5ebf3 100%) !important; } .services-bento__digital .services-bento__card--theme { min-height: 100%; } /* Desktop bento: two tall feature columns + stacked right column + twin footer row */ @media (min-width: 1024px) { .services-bento__sms { grid-column: 1 / span 4; grid-row: 1 / span 2; } .services-bento__digital { grid-column: 5 / span 4; grid-row: 1 / span 2; } .services-bento__wa { grid-column: 9 / span 4; grid-row: 1; } .services-bento__btl { grid-column: 9 / span 4; grid-row: 2; } .services-bento__events { grid-column: 1 / span 6; grid-row: 3; } .services-bento__stalls { grid-column: 7 / span 6; grid-row: 3; } .services-bento__sms .services-bento__figure, .services-bento__digital .services-bento__figure { width: min(44%, 200px); aspect-ratio: 4 / 3; height: auto; max-height: 44%; right: 5%; bottom: 11%; } .services-bento__sms .services-bento__body, .services-bento__digital .services-bento__body { max-width: 70%; } .services-bento__sms .services-bento__card--theme, .services-bento__digital .services-bento__card--theme { min-height: max(calc(var(--services-bento-card-min, 180px) - 12px), 148px); } .services-bento__stalls .services-bento__card--theme { min-height: max(var(--services-bento-card-min, 240px), 184px); } .services-bento__stalls .services-bento__title { max-width: 14ch !important; } .services-bento__events .services-bento__figure { width: min(38%, 320px); aspect-ratio: 16 / 9; height: auto; max-height: 58%; right: 1%; bottom: 7%; } .services-bento__stalls .services-bento__figure { width: min(40%, 300px); aspect-ratio: 16 / 9; height: auto; max-height: 58%; right: 1%; bottom: 7%; } } /* Tablet: balanced pairs */ @media (min-width: 640px) and (max-width: 1023px) { .services-bento__sms { grid-column: 1 / span 6; } .services-bento__wa { grid-column: 7 / span 6; } .services-bento__digital { grid-column: 1 / span 6; } .services-bento__btl { grid-column: 7 / span 6; } .services-bento__events { grid-column: 1 / span 6; } .services-bento__stalls { grid-column: 7 / span 6; } } @media (max-width: 639px) { .offer-bento .services-bento { grid-template-columns: 1fr; } .services-bento__sms, .services-bento__wa, .services-bento__digital, .services-bento__btl, .services-bento__events, .services-bento__stalls { grid-column: 1 / -1 !important; grid-row: auto !important; } .services-bento__title { max-width: 28ch !important; } .services-bento__card--theme { min-height: 240px; } } @media (prefers-reduced-motion: reduce) { .offer-bento[data-services-bento-root] .services-bento__card, .offer-bento[data-services-bento-root] .services-bento__figure-img, .offer-bento[data-services-bento-root] .services-bento__arrow { transition-duration: 0.01ms !important; animation: none !important; transform: none !important; } } /* Mobile drawer rendering fixes */ @media (max-width: 1024px) { .mobile-menu { position: fixed !important; top: 0 !important; left: 0 !important; height: 100dvh !important; width: min(86vw, 380px) !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box; border-right: 1px solid #e5e7eb !important; box-shadow: 14px 0 28px rgba(15, 23, 42, 0.08); padding: 1.1rem 1.1rem 2.25rem !important; z-index: 10002 !important; } .side-overlay { position: fixed !important; inset: 0 !important; z-index: 10001 !important; visibility: hidden; opacity: 0; pointer-events: none; } .mobile-menu .mobile-menu__inner, .mobile-menu .mobile-menu__menu { width: 100%; max-width: 100%; overflow-x: hidden; } .mobile-menu .mobile-menu__inner { padding-top: 2.6rem; } .mobile-menu .nav-menu, .mobile-menu .nav-menu__item, .mobile-menu .nav-menu__link { width: 100%; max-width: 100%; } .mobile-menu .nav-menu { margin-top: 1rem !important; } .mobile-menu .nav-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0 !important; border-bottom: 1px solid #eef1f6; font-size: 1.05rem; font-weight: 600; } .mobile-menu .nav-submenu { position: static !important; display: none; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-top: 0.15rem; overflow: hidden; box-sizing: border-box; border: 0 !important; box-shadow: none !important; padding: 0 0 0.35rem 0.45rem !important; } .mobile-menu .nav-submenu__link { width: 100%; white-space: normal; word-break: break-word; border-radius: 0.5rem; padding: 0.55rem 0.65rem !important; font-size: 0.94rem; line-height: 1.4; } .mobile-menu .close-button { position: absolute; top: 0.7rem; right: 0.7rem; width: 2.5rem; height: 2.5rem; background: #f3f4f6 !important; color: #111827 !important; border: 1px solid #e5e7eb; z-index: 3; } } /* ── Homepage mobile polish (index): testimonials, ticker, hero floats ── */ @media (max-width: 1023px) { #testimonials-section .testimonials-item-wrapper { flex-direction: column; align-items: stretch; gap: 1.25rem; } #testimonials-section .testimonials-item-wrapper .testimonials-item { width: 100%; max-width: 100%; flex: none !important; box-sizing: border-box; } } /* Hero primary CTA: hug content on sm+ (column flex can still stretch w-auto) */ @media (min-width: 640px) { .hero-banner .hero-banner__cta { width: max-content; max-width: 100%; } } /* Top ticker: single-line chips for horizontal marquee (wrap was fighting scroll) */ @media (max-width: 639px) { .top-features-slider .flex.items-center.gap-4 { gap: 0.5rem; flex-shrink: 0; align-items: center; } .top-features-slider .flex.items-center.gap-4 > .text-heading.font-medium { font-size: 0.8125rem; line-height: 1.2; white-space: nowrap; } .top-features-slider .flex.items-center.gap-4 > span.w-8 { width: 1.65rem; height: 1.65rem; flex-shrink: 0; font-size: 0.85rem; } .top-features-slider .flex.items-center.gap-4 > span.text-lg { font-size: 0.85rem; } .top-features-slider .js-marquee { gap: 1rem !important; } } @media (max-width: 480px) { .hero-banner .hero-media .common-shadow-two { max-width: min(52vw, 200px); padding: 0.85rem 0.9rem !important; inset-inline-end: 0; margin-top: 0; } .hero-banner .hero-media .common-shadow-two .text-lg { font-size: 0.9rem; line-height: 1.25; } .hero-banner .hero-channel-card { min-width: 0; max-width: calc(100% - 0.5rem); padding: 0.75rem 0.9rem !important; gap: 0.65rem !important; flex-wrap: wrap; } .hero-banner .hero-channel-label { font-size: 0.78rem; } .hero-banner .hero-channel-icon img { width: 2.25rem !important; height: 2.25rem !important; } } /* Industry grid: Pan-India card — offset only when multi-column grid is active (not stacked ≤899px) */ @media (min-width: 900px) { .industry-impact-grid .impact-pill__desc--pan-india-offset { margin-top: -100px; } } /* Blog section header: "View all" — compact pill; avoid full-width bar on mobile */ .blog .blog-section__header { align-items: stretch; } .blog .blog-section__view-all.btn { flex: 0 0 auto; align-self: flex-start; box-sizing: border-box; line-height: 1.2; padding-block: 0.55rem !important; padding-inline: 1.25rem !important; } .blog .blog-section__header .splitTextStyleOne { min-width: 0; } .blog .blog-section__view-all { width: auto; max-width: 100%; } @media (min-width: 640px) { .blog .blog-section__view-all { width: max-content; } } /* Footer: clip horizontal bleed; containers use theme .container padding only */ .footer { overflow: hidden; } /* Main footer grid: allow columns to shrink on narrow viewports */ .footer .container.container-two .grid.grid-cols-1 { min-width: 0; width: 100%; max-width: 100%; } .footer .container.container-two .grid > [class*="col-span"] { min-width: 0; max-width: 100%; } .footer .footer-contact-row a { display: inline-block; max-width: 100%; vertical-align: top; overflow-wrap: anywhere; } .footer .footer-contact-row--phone a { word-break: normal; overflow-wrap: anywhere; } @media (max-width: 639px) { .footer { overflow-x: hidden; max-width: 100%; box-sizing: border-box; } /* Every footer container stays within viewport (theme padding + border-box) */ .footer .container, .footer .container-two { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* Top strip: allow stats + trust row to wrap within viewport */ .footer > .container:first-of-type > .flex { flex-wrap: wrap; min-width: 0; } .footer > .container:first-of-type .max-w-\[514px\] { min-width: 0; max-width: 100%; } .footer > .container:first-of-type .max-w-\[514px\].flex.items-center { flex-wrap: wrap; } .footer .footer__trust-list li { min-width: 0; max-width: 100%; } .footer > .container:first-of-type .pt-8.flex { min-width: 0; max-width: 100%; } .footer .store-badges { min-width: 0; max-width: 100%; } /* Newsletter: stack fills width; button not wider than screen */ .footer .form-submit { align-items: stretch; } .footer .form-submit .footer-newsletter-btn, .footer .form-submit button[type="submit"] { width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; flex-shrink: 1; min-width: 0; } /* Legal line under form */ .footer .form-submit ~ p { overflow-wrap: anywhere; } /* Industries + contact copy */ .footer .container.container-two .grid > [class*="col-span"] p, .footer .container.container-two .grid > [class*="col-span"] a { max-width: 100%; } .footer .container.container-two p.text-neutral-400 { overflow-wrap: anywhere; } /* Footer bottom: stack so long copyright + social fits */ .footer .border-t .container .flex.items-center.justify-between { flex-direction: column; align-items: flex-start; } .footer .border-t .container .flex.items-center.justify-between > ul { width: 100%; flex-wrap: wrap; row-gap: 0.75rem; } .footer .border-t .container .flex.items-center.justify-between > ul a { min-width: 0; } .footer .store-badge { min-width: 0 !important; max-width: 100%; flex: 1 1 auto; justify-content: center; } } /* Footer newsletter: contain flex children + match Sign Up height to email field */ .footer .form-submit { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .footer .form-submit > .relative { min-width: 0; } .footer .form-submit input[type="email"] { box-sizing: border-box; } @media (min-width: 640px) { .footer .form-submit .footer-newsletter-btn, .footer .form-submit button[type="submit"] { width: auto; max-width: none; flex-shrink: 0; } }