/* ========================================================================== NIVAD PHARMED SALAMAT — Home Slide Deck The home page is not a scrolling document: each section is a fixed full-viewport slide, and slides cover one another as the user scrolls. landing.js stamps .fullpage-active on when the deck engine runs; without it (mobile, reduced-motion, no GSAP) the page falls back to a normal scrolling document with gentle proximity snap. ========================================================================== */ /* -------------------------------------------------------------------------- FALLBACK (engine off): plain document with proximity snap -------------------------------------------------------------------------- */ html.home-snap { scroll-snap-type: y proximity; scroll-padding-top: var(--header-h); } @media (prefers-reduced-motion: reduce) { html.home-snap { scroll-snap-type: none; } } @media (max-width: 760px), (max-height: 580px) { html.home-snap { scroll-snap-type: none; } } .snap-section { scroll-snap-align: start; } /* full-screen treatment for sections that don't define their own */ .features.snap-section { min-height: 100dvh; height: 100dvh; position: relative; } .about-preview.snap-section, .products.snap-section, .partners.snap-section, .cta.snap-section { min-height: 100dvh; display: flex; align-items: center; } /* -------------------------------------------------------------------------- SLIDE DECK MODE (desktop, engine on) -------------------------------------------------------------------------- */ @media (min-width: 761px) and (min-height: 581px) { html.fullpage-active, html.fullpage-active body { overflow: hidden; /* no page scrollbar — the deck owns movement */ height: 100%; } html.fullpage-active .home-slide { position: fixed; inset: 0; height: 100dvh; min-height: 0; display: none; overflow: hidden; padding: 0; margin: 0; will-change: transform; } html.fullpage-active .home-slide.slide-visible { display: flex; align-items: center; } html.fullpage-active .features.home-slide.slide-visible { display: block; height: 100dvh; } html.fullpage-active .features { --hub-size: clamp(330px, 52.8vh, 550px); height: 100dvh; } html.fullpage-active .features .container { position: absolute; inset: 0; left: 0; right: 0; width: min(1240px, 100% - 48px); margin-inline: auto; } html.fullpage-active .footer.home-slide.slide-visible { flex-direction: column; justify-content: center; } /* sections normally separate themselves with a top hairline — not slides */ html.fullpage-active .home-slide::before { display: none; } /* the marquee strip lives between slides in the document and has no slide of its own */ html.fullpage-active .marquee { display: none; } /* --- Compaction: every slide must fit one viewport ------------------- */ html.fullpage-active .section-head { margin-bottom: clamp(16px, 3.4vh, 40px); } html.fullpage-active .section-title { font-size: clamp(22px, 2.6vw, 32px); } html.fullpage-active .section-lead { font-size: 14.5px; } html.fullpage-active .eyebrow { margin-bottom: 12px; padding: 6px 14px; } /* hero */ html.fullpage-active .hero-meta { margin-top: clamp(20px, 4vh, 44px); padding-top: clamp(14px, 2.6vh, 26px); } /* features bento */ html.fullpage-active .b-card { padding: clamp(16px, 2.6vh, 26px) 22px; } html.fullpage-active .b-card p { font-size: 13.5px; } /* features hub */ html.fullpage-active .section-head--hub { margin: 0; } html.fullpage-active .features .hub-ring { width: var(--hub-size); margin: 0; } /* about preview */ html.fullpage-active .about-preview-text p { font-size: 14px; line-height: 1.8; margin-bottom: 10px; } html.fullpage-active .about-preview .stat-box { padding: clamp(12px, 2vh, 20px) 14px; } html.fullpage-active .about-preview .stat-num { font-size: clamp(22px, 2.4vw, 30px); } html.fullpage-active .about-preview .media-frame img { height: min(46vh, 440px); } /* products */ html.fullpage-active .prod-thumb { height: clamp(120px, 19vh, 180px); } html.fullpage-active .prod-body { padding: 16px 18px 18px; } html.fullpage-active .prod-body p { font-size: 13px; } html.fullpage-active .products .container > div:last-child { margin-top: 20px !important; } /* footer as final slide */ html.fullpage-active .footer .footer-grid { margin-bottom: clamp(18px, 3vh, 40px); } } /* -------------------------------------------------------------------------- HOME HERO — full-viewport photo + spotlight under transparent header -------------------------------------------------------------------------- */ html.fullpage-active #heroSection.slide-visible .hero-photo, html.fullpage-active #heroSection.slide-visible .hero-veil { position: fixed; inset: 0; width: 100%; height: 100%; } .page-home .header.transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; box-shadow: none; } html[data-theme="dark"] .page-home .header.transparent { background: transparent; border-bottom: none; box-shadow: none; } /* -------------------------------------------------------------------------- GLASS POLISH — KPI strip, bento cards, product cards -------------------------------------------------------------------------- */ .page-home .hero-meta > div { padding: 10px 20px; border-radius: var(--r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); transition: var(--tr); } .page-home .hero-meta > div:hover { background: rgba(255,255,255,.1); } /* -------------------------------------------------------------------------- HOME FIRST VIEW — no motion on load -------------------------------------------------------------------------- */ .page-home .preloader-logo, .page-home .preloader-bar span { animation: none; } .page-home .section-guide { animation: none; } .page-home .section-guide-link.active .section-guide-dot::before { animation: none; } .page-home .assist-widget { animation: assistEnter .7s var(--e-out) .6s both !important; } .page-home .assist-btn { animation: assistFloat 4.8s ease-in-out infinite, assistBtnGlow 2.6s ease-in-out infinite !important; } .page-home .assist-btn::after { animation: assistRipple 2.6s ease-out infinite !important; } .page-home .assist-btn::before { animation: assistHaloSpin 7s linear infinite !important; } .page-home .assist-btn i { animation: assistIconPulse 2.6s ease-in-out infinite !important; } .page-home .assist-widget.panel-open .assist-btn::after { animation: none !important; opacity: 0; } /* canvas animation is JS-driven; keep CSS motion off hero text/chrome */ .page-home .hero .hero-content h1, .page-home .hero .hero-content h1 *, .page-home .hero .hero-content p, .page-home .hero .hero-content .hero-cta, .page-home .hero .hero-scroll { animation: none !important; } .page-home .hero .hero-tag, .page-home .hero .hero-tag::after, .page-home .hero .hero-tag .dot, .page-home .eyebrow, .page-home .eyebrow::after, .page-home .eyebrow i { animation: unset; } .page-home .hero .hero-tag { animation: sectionLabelShineLight 3.4s ease-in-out infinite !important; } .page-home .hero .hero-tag::after { animation: sectionLabelSweep 5.2s ease-in-out infinite !important; } .page-home .hero .hero-tag .dot { animation: heroDotPulse 2.4s ease-in-out infinite !important; } .page-home .eyebrow { animation: sectionLabelShine 3.4s ease-in-out infinite !important; } .page-home .eyebrow.light { animation: sectionLabelShineLight 3.4s ease-in-out infinite !important; } .page-home .eyebrow::after { animation: sectionLabelSweep 5s ease-in-out infinite !important; } .page-home .eyebrow i { animation: sectionIconPulse 3.4s ease-in-out infinite !important; } .page-home .stat-box { background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.16)); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 10px 30px rgba(9,28,38,.08), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="dark"] .page-home .stat-box { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); } /* .b-feature keeps its own dark ink gradient (white text) — glass would wash it out */ .page-home .b-card:not(.b-feature) { background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.5)); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } html[data-theme="dark"] .page-home .b-card:not(.b-feature) { background: linear-gradient(160deg, rgba(14,42,55,.7), rgba(7,25,33,.55)); } .page-home .prod-card, .page-home .partner-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* -------------------------------------------------------------------------- FLOATING ASSIST WIDGET — idle affordance -------------------------------------------------------------------------- */ .page-home .assist-btn { transform-origin: 50% 100%; } /* -------------------------------------------------------------------------- MOTION-SAFE GUARANTEE Content must never be permanently hidden if GSAP fails to load or a user has reduced-motion enabled — landing.js only ever hides elements it can also reveal, and this rule is a last-resort safety net. -------------------------------------------------------------------------- */ .no-js .anim, .no-gsap .anim { opacity: 1; transform: none; filter: none; }