/* ========================================================================== ConvertlyTool — premium motion layer (transform/opacity-first) Loaded after _conv_style.css; respects .ct-reduced-motion on ========================================================================== */ :root { --ct-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ct-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* Slower, confident “luxury product” easing */ --ct-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); --ct-duration-fast: 0.22s; --ct-duration-mid: 0.52s; --ct-duration-slow: 0.82s; --ct-duration-luxe: 1.05s; --ct-reveal-y: 16px; --ct-reveal-y-mobile: 8px; --ct-cta-glow: 0 0 0 1px rgba(47, 217, 154, 0.18), 0 20px 52px rgba(7, 7, 7, 0.14), 0 0 44px rgba(47, 217, 154, 0.11); --ct-magnetic-well: radial-gradient( ellipse 85% 65% at 50% 88%, rgba(47, 217, 154, 0.22) 0%, rgba(15, 107, 82, 0.08) 42%, transparent 72% ); } /* ----- Accessibility: no universal animation kill (would break spinners / focus cues) ----- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal--pending.reveal--up, .reveal--pending.reveal--left, .reveal--pending.reveal--right { opacity: 1 !important; transform: none !important; } .reveal { transition: none; } } /* ----- Hero gravitas: layered lighting planes (center of visual mass) ----- */ .hero-gravitas { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .hero-field { position: absolute; inset: 0; transform: translate3d(0, 0, 0); } /* Slow atmospheric wash — draws eye toward lower-center (scan zone) */ .hero-field--ambient { background: radial-gradient(ellipse 120% 80% at 50% 108%, rgba(47, 217, 154, 0.14) 0%, transparent 58%), radial-gradient(ellipse 70% 45% at 18% 22%, rgba(255, 250, 240, 0.22) 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 82% 18%, rgba(15, 107, 82, 0.09) 0%, transparent 50%); opacity: 0.85; mix-blend-mode: soft-light; } /* Magnetic well — tighter glow pool behind URL + CTA stack */ .hero-field--magnetic { top: auto; bottom: -18%; left: 50%; width: min(118vw, 920px); height: min(72vh, 520px); transform: translate3d(-50%, 0, 0); background: var(--ct-magnetic-well); filter: blur(2px); opacity: 0.95; } /* Top rim light — separates hero from nav, adds cinematic depth */ .hero-field--rim { inset: auto 0 auto 0; height: 38%; top: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 38%, transparent 100% ); opacity: 0.55; } @keyframes ctFieldAmbientShift { 0%, 100% { opacity: 0.78; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: 0.92; transform: translate3d(-1.5%, 1%, 0) scale(1.02); } } @keyframes ctFieldMagneticPulse { 0%, 100% { opacity: 0.88; transform: translate3d(-50%, 0, 0) scale(1); } 50% { opacity: 1; transform: translate3d(-50%, -2%, 0) scale(1.04); } } .page-flow.page-elite .hero-inner--calm { position: relative; z-index: 6; } /* Hero: layered depth & calm ambient motion ----- */ @keyframes ctHeroSpotDrift { 0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) translate3d(14px, -10px, 0) scale(1.05); opacity: 0.88; } } @keyframes ctHeroZoneBreath { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42) inset, 0 28px 72px rgba(0, 0, 0, 0.38), 0 0 64px rgba(47, 217, 154, 0.07), 0 -32px 80px rgba(0, 0, 0, 0.25); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.52) inset, 0 36px 88px rgba(0, 0, 0, 0.42), 0 0 88px rgba(47, 217, 154, 0.11), 0 -28px 72px rgba(0, 0, 0, 0.22); } } @keyframes ctCtaMagnetic { 0%, 100% { box-shadow: -14px 0 36px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(47, 217, 154, 0), inset 0 1px 0 rgba(255, 255, 255, 0.06); } 50% { box-shadow: -16px 0 44px rgba(0, 0, 0, 0.38), 0 0 36px rgba(47, 217, 154, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08); } } @media (prefers-reduced-motion: no-preference) { html:not(.ct-motion-mobile) .hero-field--ambient { animation: ctFieldAmbientShift 42s var(--ct-ease-soft) infinite; } html:not(.ct-motion-mobile) .hero-field--magnetic { animation: ctFieldMagneticPulse 18s var(--ct-ease-soft) infinite; } .page-flow.page-elite .hero-spotlight { animation: ctHeroSpotDrift 32s var(--ct-ease-soft) infinite; will-change: transform, opacity; } .page-flow.page-elite .hero-decision__zone--wow { animation: ctHeroZoneBreath 12s var(--ct-ease-soft) infinite; } .page-flow.page-elite .input-tool--wow:not(:focus-within) button[type="submit"]:not(:disabled) { animation: ctCtaMagnetic 6s var(--ct-ease-soft) infinite; } } html.ct-motion-mobile .hero-field--ambient, html.ct-motion-mobile .hero-field--magnetic { animation: none !important; } html.ct-motion-mobile .page-flow.page-elite .hero-spotlight { animation: none; } html.ct-motion-mobile .page-flow.page-elite .hero-decision__zone--wow { animation: none; } html.ct-motion-mobile .page-flow.page-elite .input-tool--wow:not(:focus-within) button[type="submit"]:not(:disabled) { animation: none; } /* Scan island: glass mass + isolation (reads “expensive control surface”) */ .page-flow.page-elite .hero-decision__zone--wow { position: relative; isolation: isolate; border-radius: clamp(10px, 2vw, 16px); border-color: rgba(255, 255, 255, 0.12); background: linear-gradient( 165deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(0, 0, 0, 0.18) 100% ); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 32px 90px rgba(0, 0, 0, 0.42), 0 0 80px rgba(47, 217, 154, 0.05); } @supports not (backdrop-filter: blur(1px)) { .page-flow.page-elite .hero-decision__zone--wow { background: rgba(22, 20, 18, 0.82); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Calmer legal/microcopy so the scan surface dominates */ .page-flow.page-elite .scan-consent-hint { opacity: 0.72; max-width: 42ch; } .page-flow.page-elite .hero-micro--wow { opacity: 0.55; } /* Nav primary CTA: subtle always-on halo so action stays top-of-mind */ @media (prefers-reduced-motion: no-preference) { .site-header .nav-actions .primary-cta.btn-dark { box-shadow: var(--shadow-cta), 0 0 28px rgba(47, 217, 154, 0.12); } } /* Hero title / sub: restrained entrance (only when motion OK & not mobile) */ @media (prefers-reduced-motion: no-preference) { html:not(.ct-motion-mobile) .hero-inner--calm .hero-title--calm { animation: ctFadeLift var(--ct-duration-luxe) var(--ct-ease-cinematic) both; text-shadow: 0 2px 36px rgba(0, 0, 0, 0.55), 0 0 60px rgba(47, 217, 154, 0.06); } html:not(.ct-motion-mobile) .hero-inner--calm .hero-sub--wow { animation: ctFadeLift calc(var(--ct-duration-luxe) - 0.08s) var(--ct-ease-cinematic) 0.1s both; } } @keyframes ctFadeLift { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* ----- Scroll reveal: tighter travel on small screens ----- */ @media (max-width: 768px) { .reveal--pending.reveal--up { transform: translate3d(0, var(--ct-reveal-y-mobile), 0); } .reveal--pending.reveal--left { transform: translate3d(calc(var(--ct-reveal-y-mobile) * -1), 0, 0); } .reveal--pending.reveal--right { transform: translate3d(var(--ct-reveal-y-mobile), 0, 0); } } .reveal { transition: opacity var(--ct-duration-slow) var(--ct-ease-cinematic), transform var(--ct-duration-slow) var(--ct-ease-cinematic); } /* ----- Staggered section children ----- */ .ct-stagger-children > * { opacity: 1; transform: none; transition: opacity var(--ct-duration-slow) var(--ct-ease-out), transform var(--ct-duration-slow) var(--ct-ease-out); } .reveal--pending.ct-stagger-children > * { opacity: 0; transform: translate3d(0, 12px, 0); } .reveal.is-visible.ct-stagger-children > * { opacity: 1; transform: translate3d(0, 0, 0); } .reveal.is-visible.ct-stagger-children > *:nth-child(1) { transition-delay: 0.04s; } .reveal.is-visible.ct-stagger-children > *:nth-child(2) { transition-delay: 0.1s; } .reveal.is-visible.ct-stagger-children > *:nth-child(3) { transition-delay: 0.16s; } .reveal.is-visible.ct-stagger-children > *:nth-child(4) { transition-delay: 0.22s; } .reveal.is-visible.ct-stagger-children > *:nth-child(5) { transition-delay: 0.28s; } .reveal.is-visible.ct-stagger-children > *:nth-child(6) { transition-delay: 0.34s; } html.ct-motion-mobile .reveal.is-visible.ct-stagger-children > * { transition-delay: 0s !important; } /* How-it-works cards */ @media (prefers-reduced-motion: no-preference) { .sec-how.reveal--pending .how-card { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--ct-duration-slow) var(--ct-ease-out), transform var(--ct-duration-slow) var(--ct-ease-out); } .sec-how.reveal.is-visible .how-card:nth-child(1) { transition-delay: 0.05s; } .sec-how.reveal.is-visible .how-card:nth-child(2) { transition-delay: 0.11s; } .sec-how.reveal.is-visible .how-card:nth-child(3) { transition-delay: 0.17s; } .sec-how.reveal.is-visible .how-card:nth-child(4) { transition-delay: 0.23s; } .sec-how.reveal.is-visible .how-card { opacity: 1; transform: translate3d(0, 0, 0); } } /* Trust strip */ @media (prefers-reduced-motion: no-preference) { .trust-strip-intl.reveal--pending li { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.55s var(--ct-ease-out), transform 0.55s var(--ct-ease-out); } .trust-strip-intl.reveal.is-visible li:nth-child(1) { transition-delay: 0.03s; } .trust-strip-intl.reveal.is-visible li:nth-child(2) { transition-delay: 0.08s; } .trust-strip-intl.reveal.is-visible li:nth-child(3) { transition-delay: 0.13s; } .trust-strip-intl.reveal.is-visible li:nth-child(4) { transition-delay: 0.18s; } .trust-strip-intl.reveal.is-visible li { opacity: 1; transform: translate3d(0, 0, 0); } } /* Pricing grid stagger */ @media (prefers-reduced-motion: no-preference) { .sec-pricing.reveal--pending .plan-card { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--ct-duration-slow) var(--ct-ease-out), transform var(--ct-duration-slow) var(--ct-ease-out); } .sec-pricing.reveal.is-visible .plan-card:nth-child(1) { transition-delay: 0.04s; } .sec-pricing.reveal.is-visible .plan-card:nth-child(2) { transition-delay: 0.1s; } .sec-pricing.reveal.is-visible .plan-card:nth-child(3) { transition-delay: 0.16s; } .sec-pricing.reveal.is-visible .plan-card:nth-child(4) { transition-delay: 0.22s; } .sec-pricing.reveal.is-visible .plan-card { opacity: 1; transform: translate3d(0, 0, 0); } } /* Demo split: copy then mock — unfolding product story */ @media (prefers-reduced-motion: no-preference) { .sec-demo.reveal--pending .demo-copy, .sec-demo.reveal--pending .demo-stage { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--ct-duration-luxe) var(--ct-ease-cinematic), transform var(--ct-duration-luxe) var(--ct-ease-cinematic); } .sec-demo.reveal.is-visible .demo-copy { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.08s; } .sec-demo.reveal.is-visible .demo-stage { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.26s; } } /* ----- CTA micro-interactions ----- */ .btn-dark, .primary-cta.btn-dark { transition: transform var(--ct-duration-mid) var(--ct-ease-cinematic), box-shadow var(--ct-duration-mid) var(--ct-ease-cinematic), filter var(--ct-duration-fast) ease; } @media (prefers-reduced-motion: no-preference) { .btn-dark:hover, .primary-cta.btn-dark:hover { transform: translate3d(0, -3px, 0) scale(1.012); box-shadow: var(--ct-cta-glow); } .btn-dark:active, .primary-cta.btn-dark:active { transform: translate3d(0, 1px, 0) scale(0.982); } } .btn-ghost { transition: transform var(--ct-duration-fast) var(--ct-ease-out), box-shadow var(--ct-duration-fast) var(--ct-ease-out), border-color var(--ct-duration-fast) ease; } @media (prefers-reduced-motion: no-preference) { .btn-ghost:hover { transform: translate3d(0, -2px, 0); } } .btn-xl, .btn-xl--terminal { transition: transform var(--ct-duration-fast) var(--ct-ease-out), box-shadow 0.28s var(--ct-ease-out), filter var(--ct-duration-fast) ease; } @media (prefers-reduced-motion: no-preference) { .btn-xl:hover, .btn-xl--terminal:hover { transform: translate3d(0, -3px, 0) scale(1.015); filter: brightness(1.06); } .btn-xl:active, .btn-xl--terminal:active { transform: translate3d(0, -1px, 0) scale(0.99); } } .plan-card { transition: transform var(--ct-duration-mid) var(--ct-ease-cinematic), box-shadow var(--ct-duration-mid) var(--ct-ease-cinematic), border-color var(--ct-duration-fast) ease, filter var(--ct-duration-mid) var(--ct-ease-cinematic); } /* Tier mass: Growth / Pro feel heavier & more “intelligent” than Starter */ .plan-card--starter, .plan-card--entry { filter: saturate(0.94); } .plan-card--pro { border-color: rgba(180, 210, 255, 0.14); box-shadow: 0 22px 56px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(120, 170, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .plan-hot.plan-card--growth { isolation: isolate; } .plan-card__value-kicker { margin: 0.35rem 0 0.15rem; padding: 0 0.15rem; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(47, 217, 154, 0.92); } .plan-hot.plan-card--growth::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 95% 70% at 50% -8%, rgba(92, 255, 212, 0.14) 0%, transparent 58% ); opacity: 0.85; } @media (prefers-reduced-motion: no-preference) { .plan-hot.plan-card--growth::before { animation: ctGrowthHalo 14s var(--ct-ease-soft) infinite; } .plan-hot.plan-card--growth .plan-badge, .plan-hot.plan-card--growth .plan-card__head, .plan-hot.plan-card--growth .plan-card__bul, .plan-hot.plan-card--growth .plan-card__btn { position: relative; z-index: 1; } } html.ct-motion-mobile .plan-hot.plan-card--growth::before { animation: none !important; } @keyframes ctGrowthHalo { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.02); } } @media (prefers-reduced-motion: no-preference) { .plan-card:hover { transform: translate3d(0, -5px, 0); } .plan-hot.plan-card--growth:hover { transform: translate3d(0, -8px, 0) scale(1.014); box-shadow: 0 36px 88px rgba(23, 144, 94, 0.28), 0 0 0 1px rgba(47, 217, 154, 0.35), 0 0 72px rgba(47, 217, 154, 0.15); filter: saturate(1.06); } .plan-card--pro:hover { transform: translate3d(0, -7px, 0); box-shadow: 0 32px 72px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(140, 190, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); filter: saturate(1.05); } } .plan-card__btn { transition: transform var(--ct-duration-mid) var(--ct-ease-cinematic), box-shadow var(--ct-duration-mid) var(--ct-ease-cinematic), filter var(--ct-duration-fast) ease; } @media (prefers-reduced-motion: no-preference) { .plan-card__btn:hover:not(:disabled) { transform: translate3d(0, -3px, 0); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); filter: brightness(1.03); } .plan-card__btn:active:not(:disabled) { transform: translate3d(0, 1px, 0) scale(0.987); } } /* ----- URL input: premium focus & validation ----- */ .input-tool { transition: transform 0.22s var(--ct-ease-out), border-color 0.25s var(--ct-ease-out), box-shadow 0.28s var(--ct-ease-out); } .input-tool:focus-within { transform: translate3d(0, -2px, 0); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .page-flow.page-elite .input-tool--wow:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(47, 217, 154, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92); transform: translate3d(0, -2px, 0); } } .input-tool input:focus-visible { outline: none; } @media (prefers-reduced-motion: no-preference) { .input-tool:has(input:user-valid) { border-color: rgba(15, 107, 82, 0.55); } .input-tool:has(input:user-valid):focus-within { box-shadow: 0 28px 72px rgba(7, 7, 7, 0.14), 0 0 0 2px rgba(47, 217, 154, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95); } } .input-tool button[type="submit"] { transition: filter 0.18s ease, transform 0.14s var(--ct-ease-out), box-shadow 0.25s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .input-tool button[type="submit"]:hover:not(:disabled) { transform: scale(1.01); filter: brightness(1.15); } } /* ----- Home scan loading & preview hydrate ----- */ @keyframes ctScanBarShimmer { 0% { transform: translate3d(-100%, 0, 0); opacity: 0.35; } 50% { opacity: 0.95; } 100% { transform: translate3d(100%, 0, 0); opacity: 0.35; } } .home-scan-loading { position: relative; overflow: hidden; } .home-scan-loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 105deg, transparent 0%, rgba(47, 217, 154, 0.08) 45%, rgba(255, 255, 255, 0.35) 50%, rgba(47, 217, 154, 0.08) 55%, transparent 100% ); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .home-scan-loading:not([hidden])::after { opacity: 1; animation: ctScanBarShimmer 2.4s var(--ct-ease-soft) infinite; } } .home-scan-loading__pulse { position: relative; overflow: hidden; transform-origin: center; } /* Live preview island — reads as product surface, not flat HTML */ #homeScanPreview:not([hidden]) { margin-top: 16px; padding: clamp(14px, 3vw, 22px); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient( 168deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(0, 0, 0, 0.22) 100% ); box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(47, 217, 154, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); } @supports not (backdrop-filter: blur(1px)) { #homeScanPreview:not([hidden]) { background: rgba(28, 28, 28, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-motion: no-preference) { #homeScanPreview:not([hidden]) .home-decision, #homeScanPreview:not([hidden]) .home-upgrade-strip { animation: ctFadeLift var(--ct-duration-mid) var(--ct-ease-cinematic) both; } #homeScanPreview:not([hidden]) .home-decision__issue { animation: ctFadeLift calc(var(--ct-duration-mid) - 0.06s) var(--ct-ease-cinematic) both; } #homeScanPreview:not([hidden]) .home-decision__issue:nth-child(1) { animation-delay: 0.04s; } #homeScanPreview:not([hidden]) .home-decision__issue:nth-child(2) { animation-delay: 0.1s; } #homeScanPreview:not([hidden]) .home-decision__issue:nth-child(3) { animation-delay: 0.16s; } #homeScanPreview:not([hidden]) .home-decision__issue:nth-child(4) { animation-delay: 0.22s; } } #homeScanPreview:not([hidden]) .home-decision__issue--critical { position: relative; z-index: 0; } @media (prefers-reduced-motion: no-preference) { #homeScanPreview:not([hidden]) .home-decision__issue--critical { box-shadow: 0 0 0 1px rgba(47, 217, 154, 0.15), 0 16px 40px rgba(7, 7, 7, 0.08); } } /* ----- Mock browser: living product frame (no fake UI theater) ----- */ @keyframes ctMockFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } } @keyframes ctShineSweep { 0% { transform: translate3d(-55%, 0, 0); opacity: 0; } 12% { opacity: 0.55; } 50% { transform: translate3d(55%, 0, 0); opacity: 0.45; } 100% { transform: translate3d(55%, 0, 0); opacity: 0; } } .mock-browser--wow { position: relative; overflow: hidden; transition: transform var(--ct-duration-mid) var(--ct-ease-cinematic), box-shadow var(--ct-duration-mid) var(--ct-ease-cinematic); } .mock-browser--wow::after { content: ""; position: absolute; inset: -40% -30%; pointer-events: none; background: linear-gradient( 118deg, transparent 36%, rgba(255, 255, 255, 0.07) 48%, transparent 60% ); mix-blend-mode: soft-light; opacity: 0; } @media (prefers-reduced-motion: no-preference) { html:not(.ct-motion-mobile) .sec-demo.reveal.is-visible .demo-stage .mock-browser--wow { animation: ctMockFloat 16s var(--ct-ease-soft) infinite; } html:not(.ct-motion-mobile) .sec-demo.reveal.is-visible .mock-browser--wow::after { animation: ctShineSweep 22s var(--ct-ease-soft) infinite; } .sec-demo.reveal.is-visible .mock-browser--wow:hover { animation-play-state: paused; transform: translate3d(0, -10px, 0) scale(1.01); box-shadow: 0 36px 96px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(47, 217, 154, 0.12); } } @media (prefers-reduced-motion: no-preference) { .demo-scanlines__i--pulse { animation: ctDemoLinePulse 3.4s var(--ct-ease-soft) infinite; } } @keyframes ctDemoLinePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } html.ct-motion-mobile .mock-browser--wow { transition-duration: 0.25s; } /* ----- Nav polish ----- */ .site-header { transition: box-shadow 0.35s var(--ct-ease-out), border-color 0.25s ease; } .nav-links a { transition: border-color 0.2s ease, color 0.2s ease, transform 0.18s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .nav-links a:hover { transform: translate3d(0, -1px, 0); } } /* ========================================================================== Dashboard (.app-shell) ========================================================================== */ @keyframes ctDashScanPulse { 0%, 100% { border-color: rgba(47, 217, 154, 0.22); box-shadow: 0 0 0 0 rgba(47, 217, 154, 0); } 50% { border-color: rgba(47, 217, 154, 0.42); box-shadow: 0 0 24px rgba(47, 217, 154, 0.08); } } @keyframes ctSpinnerTurn { to { transform: rotate(360deg); } } .app-shell .dash-hero { transition: border-color 0.35s ease, box-shadow 0.45s var(--ct-ease-out), transform 0.35s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { body.ct-ready .app-shell .dash-hero:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35); } } .app-shell .dash-scan-panel.state-panel.show { transition: border-color 0.3s ease, box-shadow 0.35s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .app-shell .dash-scan-panel.state-panel.show { animation: ctDashScanPulse 3.2s var(--ct-ease-soft) infinite; } } html.ct-motion-mobile .app-shell .dash-scan-panel.state-panel.show { animation: none; } @media (prefers-reduced-motion: reduce) { .app-shell .dash-scan-panel.state-panel.show { animation: none !important; } } .app-shell .scan-row { transition: transform 0.22s var(--ct-ease-out), border-color 0.22s ease, box-shadow 0.28s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .app-shell .scan-row:hover { transform: translate3d(4px, 0, 0); border-color: rgba(255, 255, 255, 0.2); } .app-shell .scan-row.is-focused { transform: translate3d(2px, 0, 0) scale(1.01); } } .app-shell .card#resultsCard { transition: border-color 0.3s ease, box-shadow 0.4s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { body.ct-ready .app-shell .card#resultsCard:hover { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42); border-color: rgba(255, 255, 255, 0.16); } } .app-shell .scan-input { transition: border-color 0.22s ease, box-shadow 0.28s var(--ct-ease-out), transform 0.18s var(--ct-ease-out); } .app-shell .scan-input:focus { outline: none; } @media (prefers-reduced-motion: no-preference) { .app-shell .scan-input:focus { border-color: rgba(47, 217, 154, 0.45); box-shadow: 0 0 0 2px rgba(47, 217, 154, 0.15), 0 12px 32px rgba(0, 0, 0, 0.35); transform: translate3d(0, -1px, 0); } } .app-shell .btn { transition: transform var(--ct-duration-fast) var(--ct-ease-cinematic), box-shadow var(--ct-duration-mid) var(--ct-ease-cinematic), opacity 0.2s ease, background 0.22s ease, border-color 0.22s ease; } @media (prefers-reduced-motion: no-preference) { .app-shell .btn:hover:not(:disabled) { transform: translate3d(0, -3px, 0); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4); } .app-shell .btn:active:not(:disabled) { transform: translate3d(0, 1px, 0) scale(0.985); } } .app-shell .spinner { animation: ctSpinnerTurn 0.75s var(--ct-ease-soft) infinite; border-top-color: rgba(47, 217, 154, 0.95); } .app-shell .dash-trio__card { transition: transform 0.35s var(--ct-ease-out), border-color 0.25s ease, box-shadow 0.35s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .app-shell .dash-trio__card:hover { transform: translate3d(0, -3px, 0); border-color: rgba(255, 255, 255, 0.16); } } /* ========================================================================== Auth / checkout surfaces ========================================================================== */ .page-auth .l-card, .page-checkout .flow { transition: transform 0.35s var(--ct-ease-out), box-shadow 0.4s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .page-auth .l-card:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 16px 48px rgba(17, 16, 9, 0.12); } } .page-auth input[type="email"], .page-auth input[type="password"], .page-auth input[type="text"], .page-checkout input[type="email"], .page-checkout input[type="text"], .page-checkout input[type="password"], .page-checkout .ct-auth-field input { transition: border-color 0.2s ease, box-shadow 0.28s var(--ct-ease-out); } @media (prefers-reduced-motion: no-preference) { .page-auth input:focus, .page-checkout input:focus, .page-checkout .ct-auth-field input:focus { outline: none; box-shadow: 0 0 0 3px rgba(26, 122, 63, 0.18); } } .page-auth .l-btn, .page-checkout .cta-btn, .page-checkout .ct-modal-primary { transition: transform 0.16s var(--ct-ease-out), box-shadow 0.25s var(--ct-ease-out), filter 0.18s ease; } @media (prefers-reduced-motion: no-preference) { .page-auth .l-btn:hover:not(:disabled), .page-checkout .cta-btn:hover:not(:disabled), .page-checkout .ct-modal-primary:hover:not(:disabled) { transform: translate3d(0, -2px, 0); filter: brightness(1.04); } } /* ========================================================================== Homepage free preview (lite) + pricing intro honesty strip ========================================================================== */ .pricing-intro-banner { max-width: 44rem; margin: 0.35rem auto 1rem; padding: 0.65rem 1rem; font-size: 0.92rem; line-height: 1.45; color: rgba(255, 250, 240, 0.82); background: rgba(47, 217, 154, 0.09); border: 1px solid rgba(47, 217, 154, 0.22); border-radius: 12px; } .pricing-payment-clarity { max-width: 40rem; margin: 0 auto 1.1rem; font-size: 0.88rem; line-height: 1.45; color: rgba(255, 250, 240, 0.68); } .pricing-one-liner { max-width: 36rem; margin: 0.5rem auto 1.35rem; font-size: 0.9rem; line-height: 1.45; color: rgba(255, 250, 240, 0.76); } .plan-card__price-current { margin: 0.15rem 0 0; font-size: 1.35rem; font-weight: 780; letter-spacing: -0.02em; color: rgba(255, 250, 240, 0.96); } .plan-card__pricing-stack--featured .plan-card__price-current { font-size: 1.48rem; } .plan-card__price-current--intro { margin-top: 0; font-size: 1.52rem; font-weight: 820; letter-spacing: -0.028em; color: rgba(255, 250, 240, 0.98); } .plan-card__pricing-stack--featured .plan-card__price-current--intro { font-size: 1.66rem; } .plan-card__price-was { margin: 0.12rem 0 0; font-size: 0.8rem; font-weight: 600; color: rgba(255, 250, 240, 0.52); } .plan-card__price-was del { text-decoration: line-through; text-decoration-thickness: 1px; } .plan-card__pricing-inner--intro .plan-card__price-duration { margin: 0.18rem 0 0; } .plan-card__price-duration { margin: 0.28rem 0 0; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em; color: rgba(255, 250, 240, 0.62); } .plan-card__price-was--introsecondary { margin: 0.22rem 0 0; font-size: 0.72rem; font-weight: 600; color: rgba(255, 250, 240, 0.48); } .plan-card__price-was--introsecondary del { text-decoration: line-through; text-decoration-thickness: 1px; } .plan-card__price-then { margin: 0.28rem 0 0; font-size: 0.65rem; font-weight: 560; line-height: 1.35; letter-spacing: 0.01em; color: rgba(255, 250, 240, 0.52); } .plan-card__tagline:empty { display: none; margin: 0; min-height: 0; } .plan-card__price-intro { margin: 0.35rem 0 0; font-size: 0.88rem; font-weight: 650; line-height: 1.35; color: rgba(92, 255, 212, 0.92); } .plan-card__intro-price { margin: 0.4rem 0 0; font-size: 0.78rem; line-height: 1.35; letter-spacing: 0.02em; color: rgba(255, 250, 240, 0.72); } .plan-card__intro-price--growth { padding: 0.35rem 0.55rem; margin-top: 0.55rem; border-radius: 8px; background: rgba(47, 217, 154, 0.12); border: 1px solid rgba(47, 217, 154, 0.28); color: rgba(255, 250, 240, 0.88); font-weight: 600; } .plan-card__pricing-stack { margin: 0.35rem 0 0.5rem; display: flex; flex-direction: column; gap: 0.28rem; } .plan-card__pricing-inner { display: flex; flex-direction: column; gap: 0.12rem; } @media (min-width: 1081px) { .plans-grid--four .plan-card--growth.plan-card--hero-pricing { box-shadow: 0 28px 72px rgba(7, 7, 7, 0.14), 0 0 0 1px rgba(47, 217, 154, 0.12); } .plan-card--growth .plan-card__value-kicker { font-size: 0.76rem; letter-spacing: 0.04em; } } .home-preview-micro-intel { margin: 0.35rem 0 0.25rem; padding: 0.45rem 0.65rem; max-width: 26rem; font-size: 0.78rem; font-weight: 650; line-height: 1.4; color: rgba(255, 250, 240, 0.82); background: rgba(47, 217, 154, 0.08); border: 1px solid rgba(47, 217, 154, 0.2); border-radius: 8px; } .plan-card__pricing-stack--featured .plan-card__line--intro-primary { font-size: 1.05rem; font-weight: 750; } .plan-card__line { margin: 0; line-height: 1.35; } .plan-card__line--normal { font-size: 0.78rem; color: rgba(255, 250, 240, 0.62); } .plan-card__strike-wrap--active .plan-card__amount { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.72; } .plan-card__line--intro-primary { font-size: 0.95rem; font-weight: 700; color: rgba(255, 250, 240, 0.95); } .plan-card__intro-fallback { font-weight: 600; color: rgba(255, 250, 240, 0.82); } .plan-card__line--3mo { font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 250, 240, 0.58); } .plan-card__line--after { font-size: 0.78rem; color: rgba(255, 250, 240, 0.72); } html.ct-motion-mobile .plan-card__pricing-stack { gap: 0.22rem; } .home-preview--lite { display: flex; flex-direction: column; gap: 1rem; max-width: 38rem; margin-left: auto; margin-right: auto; } .home-preview-intel { padding: 0.85rem 1rem; border-radius: 14px; background: rgba(17, 16, 9, 0.06); border: 1px solid rgba(17, 16, 9, 0.1); } .home-preview-intel__k { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17, 16, 9, 0.48); } .home-preview-intel__t { margin: 0 0 0.65rem; font-size: 0.92rem; line-height: 1.45; } .home-preview-intel__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; } .home-preview-intel__link { font-size: 0.88rem; color: rgba(17, 16, 9, 0.65); text-decoration: underline; text-underline-offset: 3px; } .home-decision__btn--growth { background: linear-gradient(135deg, rgba(47, 217, 154, 0.95), rgba(26, 122, 63, 0.92)); color: #0b0f0d; border: none; box-shadow: 0 10px 28px rgba(26, 122, 63, 0.22); } .home-preview-meta__host { margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; } .home-preview-meta__expl { margin: 0.35rem 0 0; font-size: 0.88rem; line-height: 1.45; color: rgba(17, 16, 9, 0.62); } .home-preview-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; padding: 0.65rem 0; border-top: 1px solid rgba(17, 16, 9, 0.08); border-bottom: 1px solid rgba(17, 16, 9, 0.08); font-size: 0.88rem; } .home-preview-metrics .lbl { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(17, 16, 9, 0.48); margin-bottom: 0.2rem; } .home-preview-primary { padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255, 250, 240, 0.65); border: 1px solid rgba(17, 16, 9, 0.08); box-shadow: 0 18px 42px rgba(17, 16, 9, 0.06); } .home-preview-primary__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(17, 16, 9, 0.45); } .home-preview-primary h3 { margin: 0 0 0.45rem; font-size: 1.15rem; line-height: 1.25; } .home-preview-primary__impact { margin: 0 0 0.5rem; font-size: 0.88rem; color: rgba(17, 16, 9, 0.55); } .home-preview-primary__one { margin: 0; font-size: 0.92rem; line-height: 1.5; } .home-preview-proof { margin-top: 0.75rem; } .home-preview-proof .lbl { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(17, 16, 9, 0.45); margin-bottom: 0.35rem; } .home-preview-proof img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(17, 16, 9, 0.1); } .home-preview-proof-fallback { margin: 0.65rem 0 0; font-size: 0.82rem; color: rgba(17, 16, 9, 0.55); } .home-preview-teaser { padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(17, 16, 9, 0.04); border: 1px dashed rgba(17, 16, 9, 0.14); } .home-preview-teaser__blur { margin: 0 0 0.35rem; font-size: 0.85rem; line-height: 1.4; color: rgba(17, 16, 9, 0.35); filter: blur(3px); user-select: none; } .home-preview-teaser__note { margin: 0; font-size: 0.82rem; line-height: 1.45; color: rgba(17, 16, 9, 0.58); } .home-preview-trust, .home-preview-foot { text-align: center; } body[data-ct-plan="growth"] .app-shell, body[data-ct-plan="pro"] .app-shell, body[data-ct-plan="agency"] .app-shell { box-shadow: inset 0 1px 0 rgba(47, 217, 154, 0.14); }