/* ============================================================================ Tau Square Academy — shared motion layer (motion.css + motion.js) Linked by every page AFTER styles.css. All classes here are custom (tsq-*, fx, nav-scrolled…) on purpose: styles.css is pre-built Tailwind (see BUILD-CSS.md) and nothing in this file may depend on new Tailwind utilities. Everything honours prefers-reduced-motion at the bottom of this file. ========================================================================== */ ::selection { background: rgba(200, 169, 107, .28); color: #fff; } /* --- Reading-progress bar (injected by motion.js, above the fixed nav) ----- */ #scrollProgress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 60; background: linear-gradient(90deg, #AA8C56, #D4AF37); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } /* --- Nav gains weight once the reader commits to scrolling ---------------- */ nav { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; } nav.nav-scrolled { background: rgba(3, 7, 12, .96); border-bottom-color: rgba(200, 169, 107, .12); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .6); } /* --- Scroll-reveal -------------------------------------------------------- Elements are hidden ONLY after motion.js adds .fx-on to , so no-JS readers (and crawlers) always see the full page. The transition lives on .fx-in — NOT on .fx — so the initial hiding is instant and only the entrance animates (no first-paint flicker). */ html.fx-on .fx { opacity: 0; transform: translateY(26px); } html.fx-on .fx:not(.fx-in) { transition: none; } /* beat utilities like transition-all */ html.fx-on .fx.fx-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--fxd, 0) * 80ms); } @media print { html.fx-on .fx { opacity: 1 !important; transform: none !important; } } /* --- Primary CTAs — a gold sheen sweeps across on hover ------------------- motion.js auto-applies .btn-shine to solid CTA links/buttons. */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(200, 169, 107, .45), transparent); transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; } .btn-shine:hover::after { left: 130%; } /* --- Quiet life on cards and figures --------------------------------------- */ .p-10.bg-navy-900 { transition: border-color .35s ease, box-shadow .35s ease; } .p-10.bg-navy-900:hover { border-color: rgba(200, 169, 107, .25); box-shadow: 0 18px 50px -26px rgba(0, 0, 0, .9); } #proof .group:hover { border-color: rgba(200, 169, 107, .35); box-shadow: 0 18px 50px -22px rgba(200, 169, 107, .12); } section figure img { transition: filter .5s ease; } section figure:hover img { filter: brightness(1.07); } /* --- Conference marquee (index trust row) --------------------------------- Pure CSS so it runs without JS; pauses on hover so tooltips stay readable. */ .tsq-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .tsq-marquee-track { display: flex; width: max-content; animation: tsqMarquee 38s linear infinite; } .tsq-marquee:hover .tsq-marquee-track { animation-play-state: paused; } .tsq-marquee-set { display: flex; align-items: center; gap: 4rem; padding-right: 4rem; } @keyframes tsqMarquee { to { transform: translateX(-50%); } } /* --- Testimonial slider ---------------------------------------------------- Scroll-snap filmstrip: native swipe on touch, arrows + keyboard on desktop, gentle autoplay until the reader takes control (motion.js). */ .tsq-slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; } .tsq-slider-ctrl { display: flex; align-items: center; gap: .75rem; } .tsq-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; color: #C8A96B; margin-right: .5rem; white-space: nowrap; } .tsq-nav-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, .15); color: #d1d5db; font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .25s ease, color .25s ease, background-color .25s ease; } .tsq-nav-btn:hover { border-color: rgba(200, 169, 107, .6); color: #C8A96B; background: rgba(200, 169, 107, .05); } .tsq-nav-btn:focus-visible { outline: 1px solid #C8A96B; outline-offset: 2px; } .tsq-slider { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; } .tsq-slider::-webkit-scrollbar { display: none; } .tsq-slider:focus-visible { outline: 1px solid rgba(200, 169, 107, .5); outline-offset: 6px; } .tsq-slide { flex: 0 0 auto; width: min(85vw, 30rem); scroll-snap-align: start; display: flex; flex-direction: column; } /* The quote must NOT flex-stretch: clamp detection compares scrollHeight to clientHeight, and a stretched box hides the overflow. The attribution's margin-top:auto pins it to the card bottom instead. */ .tsq-quote p + p { margin-top: 1rem; } .tsq-quote.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; overflow: hidden; } .tsq-attr { margin-top: auto; padding-top: 2rem; } .tsq-more { margin-top: 1rem; align-self: flex-start; background: none; border: none; border-bottom: 1px solid rgba(200, 169, 107, .4); padding: 0 0 2px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #C8A96B; cursor: pointer; transition: border-color .25s ease, color .25s ease; } .tsq-more:hover { color: #D4AF37; border-color: #D4AF37; } @media print { .tsq-quote.clamped { display: block; -webkit-line-clamp: none; overflow: visible; } } /* --- Vertical timeline (homepage journey) ---------------------------------- A gold line draws itself down the track as the reader scrolls; each node ignites as the line reaches it. motion.js injects the fill + tip and drives --tlp (0→1). Without JS (or with reduced motion) nothing is armed and the authored static look remains. */ .tsq-timeline { position: relative; } .tsq-tl-fill { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, #AA8C56, #D4AF37); transform: scaleY(var(--tlp, 0)); transform-origin: top; pointer-events: none; } .tsq-tl-tip { position: absolute; left: -3px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #D4AF37; box-shadow: 0 0 12px rgba(212, 175, 55, .8); pointer-events: none; } .tsq-timeline.tsq-armed .tsq-tl-dot { background: #0a0f18; border: 1px solid rgba(200, 169, 107, .35); box-shadow: none; transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; } .tsq-timeline.tsq-armed .tsq-tl-dot.lit { background: #C8A96B; border-color: #C8A96B; animation: tsqDotGlow 3.2s ease-in-out infinite; } @keyframes tsqDotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 107, .4); } 50% { box-shadow: 0 0 0 7px rgba(200, 169, 107, 0); } } /* --- Horizontal march (how-it-works, 8-week timeline) ---------------------- One-shot: when the section scrolls into view the line draws left→right and the week nodes ignite in sequence. Armed by motion.js; static without it. */ .tsq-march.tsq-armed .tsq-march-line { background: linear-gradient(90deg, #AA8C56, #D4AF37); transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.25, .6, .3, 1); } .tsq-march.tsq-armed.go .tsq-march-line { transform: scaleX(1); } .tsq-march.tsq-armed .tsq-march-node > div:first-child { border-color: rgba(255, 255, 255, .1); transition: border-color .5s ease, box-shadow .5s ease; transition-delay: calc(var(--i, 0) * .34s); } .tsq-march.tsq-armed .tsq-march-node > div:first-child > div { background: rgba(255, 255, 255, .2); transition: background-color .5s ease; transition-delay: calc(var(--i, 0) * .34s); } .tsq-march.tsq-armed.go .tsq-march-node > div:first-child { border-color: rgba(200, 169, 107, .6); box-shadow: 0 0 14px rgba(200, 169, 107, .18); } .tsq-march.tsq-armed.go .tsq-march-node > div:first-child > div { background: #C8A96B; } /* --- Accessibility: honour reduced motion everywhere ----------------------- */ @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } .tsq-marquee { -webkit-mask-image: none; mask-image: none; } .tsq-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; } .tsq-marquee-set { flex-wrap: wrap; justify-content: center; gap: 2rem; padding-right: 0; } .tsq-marquee-set[aria-hidden] { display: none; } html.fx-on .fx { opacity: 1; transform: none; transition: none; } .btn-shine::after { display: none; } .tsq-slider { scroll-behavior: auto; } }