/* ════════════════════════════════════════════════════════════ SellerVine — Motion Layer Scroll reveals · card lift · hero aurora · button polish · sticky story SAFETY: every rule that HIDES something is gated behind `.sv-motion` on , which sv-motion.js sets as its very first action. If that JS ever fails to load, the class is never added and all content renders in its natural, fully-visible state — no blank sections. This site has a history of invisible-content bugs, so nothing here may hide content unless JS is confirmed alive to reveal it again. Written as plain CSS (not Tailwind utilities) because the shipped Tailwind bundle is purged — new utility classes would render unstyled. ════════════════════════════════════════════════════════════ */ /* ── 1. Scroll reveals ─────────────────────────────────────── */ .sv-motion .sv-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; } .sv-motion .sv-reveal.sv-in { opacity: 1; transform: none; } /* once revealed, drop the compositor hint */ .sv-motion .sv-reveal.sv-done { will-change: auto; } /* ── 2. Card lift (feature/card sections) ──────────────────── */ .sv-lift { transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease, border-color .32s ease; } .sv-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 44px -12px rgba(15, 23, 42, .16), 0 4px 14px rgba(15, 23, 42, .05); border-color: rgba(59, 130, 246, .35); } /* ── 3. Animated pastel gradient (hero) ────────────────────── */ /* Drifts the hero's existing soft colour blobs + mesh layer. Slow, low-contrast, pastel — depth without a light show. */ @keyframes sv-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -6%, 0) scale(1.12); } } @keyframes sv-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); } 50% { transform: translate3d(-5%, 5%, 0) scale(1); } } @keyframes sv-mesh-shift { 0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .30; } 50% { transform: scale(1.08) translate3d(0, -1%, 0); opacity: .42; } } .sv-motion .sv-aurora-blob { animation: sv-drift-a 20s ease-in-out infinite; } .sv-motion .sv-aurora-blob:nth-of-type(even) { animation-name: sv-drift-b; animation-duration: 26s; } .sv-motion .sv-aurora-mesh { animation: sv-mesh-shift 24s ease-in-out infinite; } /* ── 4. Refined button interactions ────────────────────────── */ .sv-btn { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, filter .22s ease; } .sv-btn:hover { transform: translateY(-2px); filter: brightness(1.04); } .sv-btn:active { transform: translateY(0) scale(.985); filter: brightness(.98); } .sv-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; } /* solid/gradient CTAs get a lift shadow; outline buttons stay flat */ .sv-btn-solid:hover { box-shadow: 0 12px 28px -8px rgba(59, 130, 246, .45); } /* ── 5. Sticky storytelling section ────────────────────────── */ .sv-story-grid { display: grid; gap: 48px; align-items: start; } @media (min-width: 1024px) { .sv-story-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } .sv-story-aside { position: sticky; top: 120px; align-self: start; } } .sv-story-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #6b7280; margin: 0 0 10px; } .sv-story-num { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.03em; background: linear-gradient(135deg, #3b82f6 0%, #22d3ee 50%, #7c3aed 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: opacity .35s ease; } .sv-story-title { font-size: 24px; font-weight: 600; color: #1b2233; margin: 12px 0 8px; letter-spacing: -.01em; transition: opacity .35s ease; } .sv-story-desc { font-size: 14px; line-height: 1.7; color: #6b7280; margin: 0; transition: opacity .35s ease; } /* progress rail */ .sv-story-rail { margin-top: 26px; display: flex; flex-direction: column; gap: 9px; } .sv-story-tick { height: 4px; border-radius: 999px; background: #e5e7eb; overflow: hidden; position: relative; transition: background .35s ease; } .sv-story-tick.sv-on { background: linear-gradient(90deg, #3b82f6, #22d3ee, #7c3aed); } /* de-emphasise milestones that aren't the active one */ .sv-motion .sv-story-step { transition: opacity .45s ease, filter .45s ease; } @media (min-width: 1024px) { .sv-motion .sv-story-step { opacity: .55; } .sv-motion .sv-story-step.sv-active { opacity: 1; } } /* ── 6. FAQ accordion panels ───────────────────────────────── */ /* Deliberately NOT gated behind .sv-motion and never hidden in CSS: the answers ship visible in the HTML, and the JS collapses them on load. So if the JS ever fails, every answer stays readable instead of vanishing. */ .sv-faq-panel { transition: height .32s cubic-bezier(.4, 0, .2, 1), opacity .28s ease; } /* ── Accessibility: honour reduced-motion ──────────────────── */ @media (prefers-reduced-motion: reduce) { .sv-motion .sv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .sv-motion .sv-aurora-blob, .sv-motion .sv-aurora-mesh { animation: none !important; } .sv-lift, .sv-btn, .sv-faq-panel { transition: none !important; } .sv-lift:hover, .sv-btn:hover, .sv-btn:active { transform: none !important; } .sv-motion .sv-story-step { opacity: 1 !important; } }