/* ════════════════════════════════════════════════════════════ TRAILINX · MODERN MOTION LAYER (shared) — zero color changes · uses existing CSS vars only — Safe to include on any Trailinx page. Toggle lite mode via: ════════════════════════════════════════════════════════════ */ img.twemoji{height:1.2em;width:1.2em;margin:0 .05em 0 .1em;vertical-align:-0.2em;display:inline;max-width:100%} .sport-btn-icon img.twemoji{height:28px;width:28px;margin:0} .stat-icon img.twemoji,.how-icon img.twemoji,.feature-icon img.twemoji{height:1em;width:1em} .sidebar-item .icon img.twemoji{height:18px;width:18px;margin:0} h1 img.twemoji,h2 img.twemoji{height:1em;width:1em} :root{ --r:18px;--r-sm:12px;--r-lg:28px;--r-xl:36px; --max-w:1240px; --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-smooth:cubic-bezier(.22,1,.36,1); } html{scroll-behavior:auto} body{font-feature-settings:"ss01","cv11";letter-spacing:-.005em} /* ── Scroll progress bar ── */ .tlx-progress{ position:fixed;top:0;left:0;height:3px;width:0;z-index:9999; background:linear-gradient(90deg,var(--sky),var(--ice)); box-shadow:0 0 12px rgba(0,82,204,.4); transition:width .1s linear;pointer-events:none; } /* ── Noise texture (premium surfaces) ── */ .hero,.cta{position:relative} .hero::after,.cta::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay;opacity:.55; } .hero > *:not(.hero-carousel):not(.hero-bg),.cta > *{position:relative;z-index:1} /* ── Neutralize legacy reveal · GSAP drives ── */ .reveal{opacity:1;transform:none;transition:none} .reveal.visible{opacity:1;transform:none} /* ── Section rhythm (landing only by default; non-landing pages rarely define .section so this is safe) ── */ .section{padding:140px 0} .container{padding:0 32px;max-width:var(--max-w)} @media(max-width:768px){.section{padding:96px 0}.container{padding:0 22px}} /* ── Hero typography refinement ── */ .hero h1{ font-size:clamp(42px,5.8vw,76px); line-height:1.06;letter-spacing:-.035em;margin-bottom:30px; } .hero-sub{font-size:19px;line-height:1.75;margin-bottom:48px;max-width:520px} .section-title{ font-size:clamp(32px,4vw,54px); line-height:1.08;letter-spacing:-.025em;margin-bottom:22px; } .section-label{font-size:12px;letter-spacing:2.4px;margin-bottom:20px} .section-desc{font-size:18px;line-height:1.7} /* ── Hero layout ── */ .hero .container{gap:72px;padding-top:140px;padding-bottom:120px} .hero-actions{gap:18px;margin-bottom:56px} .hero-stats{gap:48px} .hero-stat-num{font-size:36px;letter-spacing:-.02em} /* ── Word split helper ── */ .hero h1 .word{ display:inline-block;overflow:hidden;vertical-align:top; padding:0 .05em .18em;margin:0 -.01em; } .hero h1 .word > span{display:inline-block;transform:translateY(110%);will-change:transform} /* ── Cards · softer radii, more air ── */ .feature-card,.testimonial-card{ border-radius:var(--r-lg); padding:44px 34px; transition:transform .6s var(--ease-smooth),box-shadow .6s var(--ease-smooth),border-color .6s var(--ease-smooth); position:relative;overflow:hidden;isolation:isolate; } .pricing-card{ border-radius:var(--r-lg); padding:44px 32px; transition:transform .6s var(--ease-smooth),box-shadow .6s var(--ease-smooth),border-color .6s var(--ease-smooth); position:relative;isolation:isolate; } .feature-icon{width:60px;height:60px;font-size:30px;margin-bottom:26px;transition:transform .6s var(--ease-spring)} .feature-card:hover .feature-icon{transform:translateY(-4px) scale(1.06)} .feature-card h3{font-size:20px;margin-bottom:12px;letter-spacing:-.01em} .feature-card p{font-size:15px;line-height:1.7} .features-grid{gap:28px;margin-top:72px} .how-grid{gap:28px} .testimonial-grid{gap:28px} .pricing-grid{gap:28px} /* ── Cursor spotlight on cards · uses existing --accent ── */ .feature-card::after, .testimonial-card::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), var(--accent) 0%,transparent 58%); opacity:0;transition:opacity .55s var(--ease-smooth);z-index:-1; } .feature-card:hover::after, .testimonial-card:hover::after{opacity:.6} /* ── Button shine sweep ── */ .btn-primary,.btn-secondary,.nav-cta,.pricing-btn,.hero-card-btn{ position:relative;overflow:hidden;isolation:isolate; } .btn-primary,.nav-cta,.pricing-btn.primary,.hero-card-btn{ transition:transform .55s var(--ease-spring),box-shadow .55s var(--ease-smooth); } .btn-primary::after, .nav-cta::after, .pricing-btn.primary::after, .hero-card-btn::after{ content:'';position:absolute;top:0;left:-120%;width:55%;height:100%; background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.30) 50%,transparent 82%); transform:skewX(-18deg);transition:left .95s var(--ease-smooth);pointer-events:none;z-index:1; } .btn-primary:hover::after, .nav-cta:hover::after, .pricing-btn.primary:hover::after, .hero-card-btn:hover::after{left:150%} .nav-cta::before{display:none} /* ── Ripple click feedback ── */ .ripple{ position:absolute;border-radius:50%;background:rgba(255,255,255,.45); transform:scale(0);animation:tlx-ripple .72s var(--ease-smooth) forwards; pointer-events:none;z-index:2;mix-blend-mode:screen; } @keyframes tlx-ripple{to{transform:scale(4);opacity:0}} /* ── Featured pricing pulse ring ── */ .pricing-card.featured{ box-shadow:0 14px 50px rgba(5,10,48,.12),0 0 0 2px var(--sky); animation:tlx-pulse 3.2s var(--ease-smooth) infinite; } @keyframes tlx-pulse{ 0%,100%{box-shadow:0 14px 50px rgba(5,10,48,.12),0 0 0 2px var(--sky),0 0 0 0 rgba(0,82,204,0)} 50%{box-shadow:0 14px 50px rgba(5,10,48,.12),0 0 0 2px var(--sky),0 0 0 14px rgba(0,82,204,.09)} } /* ── How it works · timeline line draw-in ── */ .how-grid::before{ background:linear-gradient(90deg,transparent,var(--sky),transparent); transform:scaleX(0);transform-origin:left; transition:transform 1.6s var(--ease-smooth) .15s; } .how-grid.in::before{transform:scaleX(1)} .how-num{transition:transform .55s var(--ease-spring),background .4s,color .4s,border-color .4s,box-shadow .55s} .how-step:hover .how-num{transform:scale(1.14) rotate(-4deg)} .how-step{transition:transform .5s var(--ease-smooth)} .how-step:hover{transform:translateY(-4px)} /* ── Navbar polish ── */ .navbar{transition:background .5s var(--ease-smooth),padding .5s var(--ease-smooth),box-shadow .5s var(--ease-smooth),backdrop-filter .5s} .nav-links a{transition:color .4s var(--ease-smooth)} .nav-links a::after{transition:width .45s var(--ease-smooth)} .logo-icon{transition:transform .5s var(--ease-spring)} .logo:hover .logo-icon{transform:rotate(-8deg) scale(1.08)} /* ── Hero card · lift + pause float on hover for tilt ── */ .hero-card{transition:transform .8s var(--ease-smooth),box-shadow .8s var(--ease-smooth)} .hero-card:hover{animation-play-state:paused;box-shadow:0 28px 80px rgba(5,10,48,.18)} /* ── School benefit hover ── */ .school-benefit{transition:transform .5s var(--ease-smooth)} .school-benefit:hover{transform:translateX(6px)} .school-benefit-icon{transition:transform .5s var(--ease-spring)} .school-benefit:hover .school-benefit-icon{transform:rotate(-6deg) scale(1.08)} /* ── Footer socials ── */ .footer-socials a{transition:transform .5s var(--ease-spring),background .4s} .footer-socials a:hover{transform:translateY(-3px) scale(1.08)} /* ── Will-change hints ── */ .btn-primary,.nav-cta,.pricing-btn.primary{will-change:transform} /* ── Focus-visible (a11y) ── */ a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px} /* ── Lite mode trims (for dashboards) ── */ body[data-motion="lite"] .tlx-progress{height:2px;box-shadow:none} body[data-motion="lite"] .hero::after, body[data-motion="lite"] .cta::after{display:none} /* ── Reduced motion ── */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .hero h1 .word>span{transform:none!important} .pricing-card.featured{animation:none!important} .tlx-progress{display:none} .hero::after,.cta::after{display:none} }