/** * SEVA /demo GSAP preview — layout-safe overrides */ .seva-demo-banner { position: sticky; top: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.55rem 2.5rem 0.55rem 1rem; background: linear-gradient(90deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%); color: #e2e8f0; font-size: 0.875rem; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.35); border-bottom: 1px solid rgba(56, 189, 248, 0.35); } .seva-demo-banner__badge { display: inline-block; margin-right: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(56, 189, 248, 0.2); color: #7dd3fc; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .seva-demo-banner a { color: #7dd3fc; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .seva-demo-banner a:hover { color: #bae6fd; } .seva-demo-banner__close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #94a3b8; font-size: 1.35rem; line-height: 1; padding: 0.15rem 0.45rem; cursor: pointer; } .seva-demo-banner__close:hover { color: #fff; } /* Dark-mode toggle in the navbar (official site — banner removed). */ .seva-theme-toggle--nav { border: 0; background: transparent; color: inherit; font-size: 1.05rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: 0.5rem; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .seva-theme-toggle--nav:hover { color: var(--seva-blue, #2563eb); background-color: rgba(37, 99, 235, 0.08); } html.seva-dark .seva-theme-toggle--nav:hover { color: #7dd3fc; background-color: rgba(125, 211, 252, 0.1); } /* Hide preview banner styles when not used. */ .seva-demo-banner { display: none !important; } /* ---------------------------------------------------------------------------- * Reveal handoff — let GSAP own motion without fighting CSS. * * Default state is VISIBLE (no !important) so content is readable if JS fails. * This selector out-specifies seva-modern's `[data-seva-reveal]{opacity:0}`, so * the hidden live-site state never applies here. GSAP writes inline styles, * which beat these normal declarations and take over the animation. * ------------------------------------------------------------------------- */ body.seva-gsap-demo [data-seva-reveal] { opacity: 1; transform: none; transition: none; will-change: auto; } /* First-paint gate: while html.seva-pre is set (added in , before the * hero paints), hide reveal targets so GSAP can take over with no flash. The * bootstrap drops .seva-pre after 2.2s as a hard JS-fail safety net. */ html.seva-pre body.seva-gsap-demo [data-seva-reveal] { opacity: 0; } @media (prefers-reduced-motion: reduce) { body.seva-gsap-demo [data-seva-reveal] { opacity: 1; transform: none; } } /* ---------------------------------------------------------------------------- * Card hover transitions — smooth, not abrupt (demo only). * A gentle ~0.22s eased lift reads as premium; the old 0.1s snapped harshly. * Overrides inline transition rules on service-page card classes. * ------------------------------------------------------------------------- */ body.seva-gsap-demo .service-card, body.seva-gsap-demo .product-card, body.seva-gsap-demo .leadership-card, body.seva-gsap-demo .industry-card, body.seva-gsap-demo .gallery-item, body.seva-gsap-demo .seva-card, body.seva-gsap-demo .seva-icon-card { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important; } /* ---------------------------------------------------------------------------- * Navbar — translucent frosted state once scrolled (demo only). * ------------------------------------------------------------------------- */ body.seva-gsap-demo .seva-navbar { transition: box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease; } body.seva-gsap-demo .seva-navbar.seva-navbar--scrolled { background-color: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); } /* ---------------------------------------------------------------------------- * Hero dotted-grid parallax — driven by --seva-grid-y from GSAP. * Oversized + z-index:-1 so the drift never exposes an edge or shifts layout. * ------------------------------------------------------------------------- */ body.seva-gsap-demo .seva-hero::before { inset: -64px 0 -16px; transform: translate3d(0, var(--seva-grid-y, 0px), 0); will-change: transform; } /* ---------------------------------------------------------------------------- * Phase 3 — anchor offset + magnetic buttons (demo only). * ------------------------------------------------------------------------- */ /* Native / reduced-motion anchor jumps clear the sticky banner + navbar. */ html { scroll-padding-top: 6.5rem; } /* GSAP owns the button's transform (magnetic pull); keep the other transitions * so colour/shadow hover states stay smooth. */ body.seva-gsap-demo .seva-btn { transition: background-color 0.25s var(--seva-ease), border-color 0.25s var(--seva-ease), color 0.25s var(--seva-ease), box-shadow 0.25s var(--seva-ease); } /* ---------------------------------------------------------------------------- * Scroll progress indicator — thin line riding the bottom edge of the navbar. * The navbar is position:sticky, so it's the containing block for this child. * ------------------------------------------------------------------------- */ body.seva-gsap-demo .seva-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left center; background: linear-gradient( 90deg, var(--seva-cyan, #38bdf8), var(--seva-blue, #2563eb) ); z-index: 5; pointer-events: none; } /* ---------------------------------------------------------------------------- * Product-specific hero motif canvas — sits above the hero's dotted grid but * below its content, so the themed animation reads as a subtle backdrop. * ------------------------------------------------------------------------- */ body.seva-gsap-demo .seva-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; } body.seva-gsap-demo .seva-hero--motif > .container, body.seva-gsap-demo .seva-hero--motif > .seva-hero__inner { position: relative; z-index: 1; } /* ---------------------------------------------------------------------------- * Pinned scene crossfade (homepage prototype) — each content section becomes a * centred, full-viewport scene with an opaque background, so when the next * scene crossfades over the pinned one there's no see-through. * ------------------------------------------------------------------------- */ /* Opaque background on every hybrid content section, so a pinned scene never * shows through the section stacked above it during a crossfade. */ body.seva-gsap-demo .seva-hybrid { position: relative; background-color: #ffffff; } html.seva-dark body.seva-gsap-demo .seva-hybrid { background-color: #090d16; } /* Screen-fitting scenes that get pinned: centred and one viewport tall. */ body.seva-gsap-demo .seva-scene { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* ---------------------------------------------------------------------------- * Section enter — GSAP drives a one-shot opacity + y reveal (played at a fixed * ease, not scrubbed). GSAP manages will-change for the duration of the tween * and clears it on completion, so no persistent layer promotion is needed here. * ------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- * Interactive 3D product viewers (demo only, TactiLink grid). * The shell matches the flat image it replaces (same 200px card-image band) so * card height and the grid rhythm are unchanged. * ------------------------------------------------------------------------- */ body.seva-gsap-demo .seva-3d__shell { position: relative; height: 200px; border-top-left-radius: inherit; border-top-right-radius: inherit; overflow: hidden; background: radial-gradient(120% 120% at 50% 30%, #f1f5f9 0%, #e2e8f0 100%); } html.seva-dark body.seva-gsap-demo .seva-3d__shell { background: radial-gradient(120% 120% at 50% 30%, #16203a 0%, #0e1422 100%); } body.seva-gsap-demo model-viewer.seva-3d { width: 100%; height: 100%; display: block; background-color: transparent; --poster-color: transparent; /* Let vertical page scroll pass through; horizontal drag rotates. */ touch-action: pan-y; cursor: grab; } body.seva-gsap-demo model-viewer.seva-3d:active { cursor: grabbing; } /* "Drag to rotate" affordance — parked in the corner so it never covers the * product, and fades out once the user grabs the model. */ body.seva-gsap-demo .seva-3d__hint { position: absolute; right: 0.45rem; bottom: 0.45rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(15, 23, 42, 0.62); color: #e2e8f0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } body.seva-gsap-demo .seva-3d__shell:hover .seva-3d__hint { opacity: 0; } @media (prefers-reduced-motion: reduce) { body.seva-gsap-demo .seva-3d__hint { transition: none; } } /* ---------------------------------------------------------------------------- * Lenis momentum smooth-scroll (recommended baseline styles). * ------------------------------------------------------------------------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---------------------------------------------------------------------------- * Slim, on-brand scrollbar (demo only). The earlier build hid the scrollbar * entirely, which removed a familiar position/drag affordance. A thin, subtle * track keeps the immersive look while giving users their scroll bearings; the * progress line under the navbar complements it. * ------------------------------------------------------------------------- */ html::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } html::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.6); background-clip: content-box; } html { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.4) transparent; } html.seva-dark::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); background-clip: content-box; } html.seva-dark::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); background-clip: content-box; } html.seva-dark { scrollbar-color: rgba(148, 163, 184, 0.35) transparent; } /* ---------------------------------------------------------------------------- * Theme toggle button (lives in the demo banner). * ------------------------------------------------------------------------- */ .seva-theme-toggle { position: absolute; right: 2.4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #94a3b8; font-size: 0.95rem; line-height: 1; padding: 0.2rem 0.45rem; cursor: pointer; transition: color 0.2s ease; } .seva-theme-toggle:hover { color: #ffffff; } /* ============================================================================ * DARK THEME (demo only) — toggled by adding .seva-dark to . * Built on a single blue-grey hue (~222deg) with lightness steps for elevation * (bg < surface < raised), accents brightened for legibility on dark, and * low-alpha hairline borders — a designed theme, not "everything navy". The * colored *-stats brand bands are intentional and left untouched. * * elevation 0 (page) #090d16 * elevation 1 (cards) #131b2c * elevation 1- (recessed) #0e1422 (media wells, inputs, .bg-light) * elevation 2 (raised) #1b2540 (chat bubbles, chips) * navbar #0c1322 * ========================================================================== */ html.seva-dark { --seva-ink: #e7ecf4; /* primary text (~13:1 on page) */ --seva-ink-soft: #aeb9cb; /* headings / secondary */ --seva-muted: #8a97ab; /* captions (~4.6:1 on cards) */ --seva-line: rgba(150, 170, 205, 0.13); --seva-surface: #131b2c; --seva-blue: #4d8bf2; /* brightened so CTAs/links pop on dark */ --seva-blue-strong: #6aa1f7; --seva-cyan: #4cc4fd; color-scheme: dark; background-color: #090d16; } html.seva-dark body { background-color: #090d16; color: var(--seva-ink); } /* Elevation 1 surfaces — cards across the homepage and service pages * (service-page variants are inline-styled `background: white` in source). */ html.seva-dark .seva-card, html.seva-dark .seva-icon-card, html.seva-dark .card, html.seva-dark .product-card, html.seva-dark .leadership-card, html.seva-dark .industry-card, html.seva-dark .register-card, html.seva-dark .verify-card, html.seva-dark .account-card, html.seva-dark .order-card, html.seva-dark .cart-item, html.seva-dark .timeline-item { background-color: #131b2c !important; color: var(--seva-ink); border-color: var(--seva-line); } /* Recessed wells */ html.seva-dark .seva-card__media, html.seva-dark .bg-light, html.seva-dark .photo-gallery { background-color: #0e1422 !important; } html.seva-dark .bg-white { background-color: #131b2c !important; } /* Navbar */ html.seva-dark .seva-navbar { background-color: #0c1322; border-bottom-color: var(--seva-line); } html.seva-dark .seva-navbar.seva-navbar--scrolled { background-color: rgba(12, 19, 34, 0.86); } html.seva-dark .seva-navbar .nav-link { color: var(--seva-ink-soft); } html.seva-dark .seva-navbar .nav-link:hover, html.seva-dark .seva-navbar .nav-link.active { color: #ffffff; } /* The logo PNG has a baked-in white background. Invert its luminance (white * field → black, mark → light), then `screen` blend so the black field maps * exactly onto the navbar colour — the box vanishes and only the mark shows. */ html.seva-dark .navbar-brand img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; } html.seva-dark .navbar-toggler-icon { filter: invert(1) brightness(1.6); } /* Text + forms */ html.seva-dark .text-muted { color: var(--seva-muted) !important; } html.seva-dark .text-dark { color: var(--seva-ink) !important; } html.seva-dark .form-control, html.seva-dark .form-select { background-color: #0e1422; border-color: var(--seva-line); color: var(--seva-ink); } html.seva-dark .form-control::placeholder { color: var(--seva-muted); } /* Hero bottom-fade blends into the dark page instead of white */ html.seva-dark .seva-hero::after { background: linear-gradient(to bottom, transparent, #090d16); } /* Site assistant (chatbot) widget */ html.seva-dark .seva-bot__panel { background-color: #131b2c; color: var(--seva-ink); border-color: var(--seva-line); } html.seva-dark .seva-bot__log { background-color: #0e1422; } html.seva-dark .seva-bot__bubble--bot .seva-bot__bubble-content, html.seva-dark .seva-bot__bubble--system .seva-bot__bubble-content { background-color: #1b2540; color: var(--seva-ink); } html.seva-dark .seva-bot__form { background-color: #131b2c; border-color: var(--seva-line); } html.seva-dark .seva-bot__input { background-color: #0e1422; color: var(--seva-ink); border-color: var(--seva-line); } html.seva-dark .seva-bot__chip { background-color: #1b2540; color: var(--seva-ink-soft); border-color: var(--seva-line); } /* TactiLink slide-out cart (Bootstrap offcanvas) + its summary panel */ html.seva-dark .offcanvas { background-color: #131b2c; color: var(--seva-ink); } html.seva-dark .cart-summary { background-color: #0e1422 !important; color: var(--seva-ink); border-color: var(--seva-line); } /* Embedded Google map — tint toward dark so it doesn't glare in dark mode */ html.seva-dark .map-container iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9); } /* ---------------------------------------------------------------------------- * Smooth theme crossfade — applied only for ~450ms during a toggle (added by * the toggle handler, then removed) so the colour change eases instead of * snapping, without ever affecting scroll-time performance. * ------------------------------------------------------------------------- */ html.seva-theme-anim, html.seva-theme-anim * { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease !important; }