/* ============================================================================ Author: N1CHO Made for LynxLayers ============================================================================ */ /* ============================================================================ LynxThemeN1CHO - Motion system (loaded globally; reveal targets the landing, nav state applies everywhere). Transform/opacity only (GPU-friendly). Reveal-hidden state is gated on html.ll-anim (added by motion.js) so content is NEVER hidden without JS. Fully neutralised under prefers-reduced-motion. ============================================================================ */ /* ---- Scroll reveal (only once JS is active) ---- */ html.ll-anim .ll-reveal { opacity: 0; transform: translateY(24px); } html.ll-anim .ll-reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--ll-delay, 0ms); } /* ---- Hero entrance choreography (one-shot on load). .ll-anim is set in before first paint, so these start hidden and assemble in sequence with no flash: emblem -> headline -> sub -> CTAs -> chips -> stats. The console band below the fold reveals on scroll via .ll-reveal instead. ---- */ html.ll-anim .ll-landing .hero-v3 .hero-emblem, html.ll-anim .ll-landing .hero-v3 .hero-copy > * { opacity: 0; animation: ll-rise .8s var(--ease-out) both; } html.ll-anim .ll-landing .hero-v3 .hero-emblem { animation-name: ll-fade-scale; animation-delay: .05s; } html.ll-anim .ll-landing .hero-v3 .hero-title { animation-delay: .14s; } html.ll-anim .ll-landing .hero-v3 .hero-sub { animation-delay: .26s; } html.ll-anim .ll-landing .hero-v3 .hero-ctas { animation-delay: .37s; } html.ll-anim .ll-landing .hero-v3 .hero-chips { animation-delay: .47s; } html.ll-anim .ll-landing .hero-v3 .hero-stats { animation-delay: .56s; } @keyframes ll-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes ll-fade-scale { from { opacity: 0; transform: translateY(12px) scale(.965); } to { opacity: 1; transform: none; } } /* CTA trust row staggers in WITH the card (driven by the card's own reliable reveal, not a bottom-of-page observer that could leave it stuck hidden). */ html.ll-anim .ll-landing .cta-card .cta-trust-item { opacity: 0; transform: translateY(8px); } html.ll-anim .ll-landing .cta-card.is-visible .cta-trust-item { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } html.ll-anim .ll-landing .cta-card.is-visible .cta-trust-item:nth-child(2) { transition-delay: .09s; } html.ll-anim .ll-landing .cta-card.is-visible .cta-trust-item:nth-child(3) { transition-delay: .18s; } /* ---- Smooth in-page scrolling on the landing + anchor offset under sticky nav ---- */ @media (prefers-reduced-motion: no-preference) { html:has(.ll-landing) { scroll-behavior: smooth; } } .ll-landing .section { scroll-margin-top: 96px; } /* ---- Scroll-progress bar (pure CSS scroll-timeline; progressive enhancement, hidden where unsupported or motion is reduced) ---- */ .ll-progress { display: none; } @supports (animation-timeline: scroll()) { html.ll-anim .ll-progress { display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 2000; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--primary-color), var(--primary-strong)); animation: ll-progress-grow linear both; animation-timeline: scroll(root block); } @keyframes ll-progress-grow { to { transform: scaleX(1); } } } /* ---- Hover micro-interactions (transform/shadow/border only) ---- */ .ll-landing .product, .ll-landing .card, .ll-landing .layer, .ll-landing .metric, .ll-landing .mini-q, .ll-landing .ann, .ll-landing .path, .ll-landing .pay-card, .ll-landing .feat-ic, .ll-landing .spot-avatar { transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out), color .25s var(--ease-out); } .ll-landing .btn { transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s var(--ease-out); } .ll-landing .product:hover .feat-ic, .ll-landing .product:hover .shop-ic { transform: scale(1.06); } /* icon nudge on primary CTAs */ .ll-landing .btn-primary svg, .ll-landing .btn-cart svg { transition: transform .25s var(--ease-out); } .ll-landing .btn-primary:hover svg, .ll-landing .btn-cart:hover svg { transform: translateX(3px); } /* ---- Navbar: condense + solidify on scroll ---- */ #main-menu .navbar.navbar-main { transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out); } html.ll-scrolled #main-menu .navbar.navbar-main { box-shadow: 0 14px 36px -22px rgba(0,0,0,.7); } @media (min-width: 992px) { #main-menu .navbar-main > .container { transition: padding .3s var(--ease-out); } html.ll-scrolled #main-menu .navbar-main > .container { padding-top: 9px; padding-bottom: 9px; } } /* ---- Dropdown enter motion (desktop) ---- */ @media (min-width: 992px) { #main-menu .navbar-nav > li.dropdown > .dropdown-menu, #main-menu .ll-actions > li.dropdown > .dropdown-menu { display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.985); transform-origin: top center; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; } #main-menu .navbar-nav > li.dropdown:hover > .dropdown-menu, #main-menu .navbar-nav > li.dropdown.open > .dropdown-menu, #main-menu .ll-actions > li.dropdown:hover > .dropdown-menu, #main-menu .ll-actions > li.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } } /* ---- Theme toggle: cross-fade the icon, gentle press ---- */ .ll-theme-toggle i { transition: opacity .25s var(--ease-out), transform .35s var(--ease-out); } .ll-theme-toggle:active { transform: scale(.92); } /* ---- Store (order form) cards: match the homepage remake ---- */ #order-standard_cart .product { transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); } #order-standard_cart .product:hover { transform: translateY(-5px); box-shadow: 0 28px 60px -30px rgba(0,0,0,.7), var(--shadow-glow); } #order-standard_cart .product .price, #order-standard_cart [id$="-price"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Pause hero decorative loops when scrolled past (saves CPU/GPU on long pages) */ html.ll-hero-out .ll-landing .emblem-glow, html.ll-hero-out .ll-landing .emblem-ring, html.ll-hero-out .ll-landing .orbit, html.ll-hero-out .ll-landing .lynx-mark, html.ll-hero-out .ll-landing .cbars i { animation-play-state: paused !important; } /* ---- Hover polish: smooth, consistent feedback across the whole UI --------- (additive — transitions only, no transforms that could fight element-specific hovers). Makes every link/button/row/field ease instead of snapping. */ .btn { transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .18s var(--ease-out), filter .2s var(--ease-out); } .ll-footer a, #footer a, .breadcrumb a, .main-content a:not(.btn):not(.list-group-item), .cart-body a:not(.btn) { transition: color .18s var(--ease-out), opacity .18s var(--ease-out); } .ll-footer a:hover, #footer a:hover, .breadcrumb a:hover { color: var(--primary-strong) !important; } .table > tbody > tr[onclick] { cursor: pointer; transition: background-color .18s var(--ease-out); } .form-control, select.form-control { transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out); } .dropdown-menu > li > a, .dropdown-item { transition: background-color .15s var(--ease-out), color .15s var(--ease-out), padding-left .15s var(--ease-out); } .badge, .label { transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out); } /* ---- Respect reduced motion: static + fully visible ---- */ @media (prefers-reduced-motion: reduce) { html.ll-anim .ll-reveal, html.ll-anim .ll-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } /* Disabling the entrance animation must NOT leave its elements stuck hidden. */ html.ll-anim .ll-landing .hero-v3 .hero-emblem, html.ll-anim .ll-landing .hero-v3 .hero-copy > *, html.ll-anim .ll-landing .cta-card .cta-trust-item { opacity: 1 !important; transform: none !important; animation: none !important; } .ll-progress { display: none !important; } .ll-landing *, #main-menu * { animation: none !important; } .ll-landing .product:hover, .ll-landing .card:hover, .ll-landing .layer:hover, .ll-landing .btn:hover, .ll-landing .pay-card:hover, #order-standard_cart .product:hover, .ll-footer .back-to-top:hover i { transform: none !important; } #main-menu .navbar-nav > li.dropdown > .dropdown-menu, #main-menu .ll-actions > li.dropdown > .dropdown-menu { transition: none !important; } }