/* ========================================================================== YourBrandedAI — Custom styles Layered on top of Tailwind (CDN). Tokens live in tailwind.config in . ========================================================================== */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/bricolage-grotesque-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Screen-reader-only utility — mirrors Tailwind's .sr-only for use in non-Tailwind contexts and as a fallback declaration. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { --brand-blue: #2563EB; --brand-cyan: #06B6D4; --brand-navy: #0F172A; --brand-slate: #1E293B; --brand-soft: #F8FAFC; --grad-cta: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--brand-slate); background: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-display { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; } /* Wordmark gradient on "AI" */ .wordmark-ai { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; /* color is the a11y-visible fallback; -webkit-text-fill-color supplies the gradient fill in all modern browsers. Lighthouse contrast auditor reads `color`, not `-webkit-text-fill-color`, so it sees a solid passing value rather than throwing an error on `transparent`. */ color: #06B6D4; -webkit-text-fill-color: transparent; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: 0.75rem; padding: 0.875rem 1.5rem; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; white-space: nowrap; line-height: 1.1; } .btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } .btn-primary { background: var(--grad-cta); color: #ffffff; box-shadow: 0 10px 25px -10px rgba(37, 99, 235, 0.55); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(6, 182, 212, 0.6); } .btn-ghost { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); } .btn-lg { padding: 1.05rem 1.85rem; font-size: 1.05rem; } /* ---------- Sticky nav glass ---------- */ .nav-glass { background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .nav-glass-dark { background: rgba(15, 23, 42, 0.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* ---------- Hero gradient mesh ---------- */ .hero-mesh { background-color: #0F172A; background-image: radial-gradient(ellipse 60% 50% at 12% 20%, rgba(37, 99, 235, 0.35), transparent 60%), radial-gradient(ellipse 50% 40% at 88% 80%, rgba(6, 182, 212, 0.28), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(37, 99, 235, 0.18), transparent 70%); } .lead-mesh { background-color: #ffffff; background-image: radial-gradient(ellipse 50% 50% at 0% 0%, rgba(37, 99, 235, 0.12), transparent 60%), radial-gradient(ellipse 50% 50% at 100% 100%, rgba(6, 182, 212, 0.14), transparent 60%); } /* ---------- Hero abstract visual (CSS only) ---------- */ .hero-visual { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 480px; margin-left: auto; } .hero-visual .orb { position: absolute; border-radius: 9999px; filter: blur(28px); opacity: 0.7; } .hero-visual .orb-a { inset: 6% 30% 50% 6%; background: radial-gradient(circle, #2563EB 0%, transparent 70%); } .hero-visual .orb-b { inset: 35% 6% 12% 30%; background: radial-gradient(circle, #06B6D4 0%, transparent 70%); } .hero-visual .panel { position: absolute; inset: 12% 10% 12% 10%; border-radius: 1.25rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); display: flex; flex-direction: column; padding: 1.25rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); } .chat-row { display: flex; gap: 0.6rem; margin-top: 0.65rem; align-items: flex-start; } .chat-row.r { flex-direction: row-reverse; } .chat-bubble { padding: 0.55rem 0.85rem; border-radius: 0.85rem; font-size: 0.78rem; line-height: 1.35; max-width: 78%; color: #E2E8F0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08); } .chat-bubble.user { background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(6, 182, 212, 0.85)); color: #ffffff; border-color: transparent; } .chat-avatar { width: 1.6rem; height: 1.6rem; border-radius: 9999px; background: linear-gradient(135deg, #2563EB, #06B6D4); flex-shrink: 0; display: grid; place-items: center; font-size: 0.7rem; color: #fff; font-weight: 700; } .chat-avatar.muted { background: rgba(255, 255, 255, 0.12); } .typing { display: inline-flex; gap: 3px; align-items: center; } .typing span { width: 5px; height: 5px; border-radius: 9999px; background: #94A3B8; animation: typing 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ---------- Cards ---------- */ .card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 1rem; padding: 1.75rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.18); border-color: rgba(37, 99, 235, 0.2); } .card-dark { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; padding: 1.75rem; color: #CBD5E1; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .card-dark:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.06); border-color: rgba(6, 182, 212, 0.35); } .icon-tile { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12)); color: var(--brand-blue); margin-bottom: 1rem; } .icon-tile-dark { background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(6, 182, 212, 0.25)); color: #67E8F9; } /* ---------- Step number ---------- */ .step-num { display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; color: #67E8F9; background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.3); padding: 0.3rem 0.7rem; border-radius: 9999px; margin-bottom: 1rem; } /* ---------- Comparison table ---------- */ .comparison { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.08); } .comparison th, .comparison td { padding: 1rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .comparison thead th { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 1rem; background: #F1F5F9; } .comparison thead th.brand { background: var(--grad-cta); color: #ffffff; } .comparison tbody tr:last-child td { border-bottom: none; } .comparison td.brand { background: rgba(37, 99, 235, 0.04); color: var(--brand-slate); font-weight: 500; } .comparison td.old { color: #64748B; } /* Tighter padding + smaller type on mobile so long cells don't truncate awkwardly */ @media (max-width: 640px) { .comparison th, .comparison td { padding: 0.75rem 0.85rem; font-size: 0.875rem; } .comparison thead th { font-size: 0.9rem; } } /* ---------- FAQ accordion ---------- */ .faq-item { border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; text-align: left; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--brand-slate); background: none; border: 0; cursor: pointer; } .faq-trigger:focus-visible { outline: 3px solid #93c5fd; outline-offset: 4px; border-radius: 6px; } .faq-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 9999px; background: rgba(37, 99, 235, 0.08); color: var(--brand-blue); transition: transform 0.25s ease; } .faq-trigger[aria-expanded="true"] .faq-icon { transform: rotate(45deg); } .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-panel-inner { padding: 0 0 1.25rem 0; color: #475569; line-height: 1.6; } /* ---------- Form ---------- */ .field-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--brand-slate); margin-bottom: 0.4rem; } .field-input, .field-select, .field-textarea { width: 100%; padding: 0.75rem 0.95rem; border: 1px solid rgba(15, 23, 42, 0.15); border-radius: 0.65rem; background: #ffffff; /* 16px min prevents iOS Safari auto-zoom on focus */ font-size: 1rem; color: var(--brand-slate); transition: border-color 0.15s ease, box-shadow 0.15s ease; font-family: inherit; } .field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .field-textarea { min-height: 90px; resize: vertical; } .honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: 0.85rem; font-size: 0.9rem; border-radius: 0.55rem; padding: 0.65rem 0.85rem; display: none; } .form-status.is-success { display: block; background: rgba(16, 185, 129, 0.1); color: #047857; border: 1px solid rgba(16, 185, 129, 0.3); } .form-status.is-error { display: block; background: rgba(239, 68, 68, 0.08); color: #B91C1C; border: 1px solid rgba(239, 68, 68, 0.3); } /* ---------- Mobile nav ---------- */ .mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); background: #0F172A; color: #fff; padding: 5rem 1.75rem 2rem; transform: translateX(100%); transition: transform 0.3s ease; z-index: 60; box-shadow: -20px 0 50px -10px rgba(0, 0, 0, 0.4); } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav a { display: block; padding: 0.85rem 0; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 55; } .mobile-nav-overlay.is-open { opacity: 1; pointer-events: auto; } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .typing span { animation: none; } } /* ---------- Niche pills ---------- */ .niche-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: 9999px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); font-size: 0.9rem; color: var(--brand-slate); font-weight: 500; } .niche-pill svg { color: var(--brand-blue); } /* ---------- Stat block ---------- */ .stat-num { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: #2563EB; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } /* ---------- Trust badges ---------- */ .trust-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.85rem; font-size: 0.8rem; color: #64748B; } .trust-row span { display: inline-flex; align-items: center; gap: 0.35rem; } /* ---------- Section headings ---------- */ .eyebrow { display: inline-block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 0.85rem; } .eyebrow-light { color: #67E8F9; } /* ---------- Container helper ---------- */ .container-x { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 768px) { .container-x { padding-inline: 2rem; } } /* ========================================================================== Apple-inspired motion & effects ========================================================================== */ /* ---------- Scroll progress bar ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--grad-cta); z-index: 100; transform-origin: left; transform: scaleX(0); will-change: transform; pointer-events: none; } /* ---------- Staggered reveal ---------- */ .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); } /* ---------- Scale reveal ---------- */ .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-scale.is-visible { opacity: 1; transform: scale(1); } /* ---------- Blur reveal ---------- */ .reveal-blur { opacity: 0; filter: blur(8px); transform: translateY(16px); transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease; } .reveal-blur.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); } /* ---------- Floating animation ---------- */ .float { animation: float 6s ease-in-out infinite; } .float-delay-1 { animation-delay: -2s; } .float-delay-2 { animation-delay: -4s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ---------- Glow pulse ---------- GPU-composited: animate only opacity + transform (no `filter` keyframes — blur is locked to 28px on .hero-visual .orb above). Lighthouse flagged the prior `filter` keyframe as a non-composited animation; this fix keeps the visual intent (size/brightness pulse) while staying off the main thread. */ .glow { animation: glowPulse 4s ease-in-out infinite; will-change: opacity, transform; } @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.18); } } /* ---------- Parallax layers ---------- */ .parallax-layer { will-change: transform; transition: transform 0.1s linear; } /* ---------- Nav scroll transition ---------- */ .nav-glass.is-scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 4px 20px -4px rgba(15, 23, 42, 0.08); } /* ---------- Magnetic button ---------- */ .btn-magnetic { transition: transform 0.2s ease; } /* ---------- 3D card tilt ---------- */ .card-tilt { transform-style: preserve-3d; perspective: 800px; transition: transform 0.3s ease; } .card-tilt:hover { transform: translateY(-3px) rotateX(2deg) rotateY(-2deg); } /* ---------- Hero ambient mesh animation ---------- */ .hero-mesh { position: relative; } .hero-mesh::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 30% 50%, rgba(37, 99, 235, 0.15), transparent 60%), radial-gradient(ellipse 40% 50% at 70% 60%, rgba(6, 182, 212, 0.12), transparent 60%); animation: meshShift 12s ease-in-out infinite alternate; pointer-events: none; } @keyframes meshShift { 0% { transform: translate(-2%, -2%) scale(1); } 100% { transform: translate(2%, 2%) scale(1.05); } } /* ---------- Smooth section transitions ---------- */ section { position: relative; } /* ---------- Enhanced focus states ---------- */ :focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .float, .glow, .hero-mesh::before { animation: none; } .reveal-stagger > * { transition: none; opacity: 1; transform: none; } .reveal-scale, .reveal-blur { transition: none; opacity: 1; transform: none; filter: none; } .parallax-layer { transition: none; } .scroll-progress { display: none; } .marquee-track, .client-logo-track { animation: none; } .cursor-glow { display: none; } .particle-canvas { display: none; } } /* ========================================================================== NEW: Enhanced animations & effects (Remodel v2) ========================================================================== */ /* ---------- Particle canvas ---------- */ .particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.5; } /* ---------- Cursor glow ---------- */ .cursor-glow { position: fixed; top: 0; left: 0; width: 350px; height: 350px; border-radius: 9999px; pointer-events: none; z-index: 9999; mix-blend-mode: screen; background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(6, 182, 212, 0.06) 40%, transparent 70%); transform: translate(-50%, -50%); transition: opacity 0.3s ease; opacity: 0; } .cursor-glow.is-active { opacity: 1; } /* ---------- Matrix canvas background ---------- */ #matrix-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.12; } /* ---------- Scroll indicator ---------- */ .scroll-indicator { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.5); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; animation: bounceDown 2s ease-in-out infinite; pointer-events: none; } @keyframes bounceDown { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; } 50% { transform: translateX(-50%) translateY(8px); opacity: 0.9; } } /* ---------- Marquee ---------- */ .marquee-section { overflow: hidden; background: #0F172A; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 1.25rem 0; } .marquee-track { display: flex; flex-wrap: nowrap; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 2rem; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; /* #CBD5E1 (slate-300) on the section's #0F172A navy = 9.5:1 contrast. Also helps axe correctly detect the contrast in case it misreads the inherited background; explicit background-color anchors the check. */ color: #CBD5E1; background-color: #0F172A; white-space: nowrap; } .marquee-item svg { color: #06B6D4; flex-shrink: 0; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---------- Client Logo Marquee ---------- */ .client-logo-marquee { background: #FFFFFF; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; padding: 3rem 0 2.5rem; overflow: hidden; } .client-logo-marquee .eyebrow { display: block; text-align: center; color: #06B6D4; margin-bottom: 1.75rem; } .client-logo-viewport { position: relative; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .client-logo-track { display: flex; flex-wrap: nowrap; width: max-content; animation: marqueeScroll 40s linear infinite; } .client-logo-item { display: inline-flex; align-items: center; justify-content: center; padding: 0 2.75rem; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: #94A3B8; white-space: nowrap; transition: color 0.2s ease; } .client-logo-item:hover { color: #475569; } /* ---------- Video showcase ---------- */ .video-showcase { background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%); } .video-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 768px) { .video-grid { grid-template-columns: repeat(2, 1fr); } } .video-card { position: relative; border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .video-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -15px rgba(37, 99, 235, 0.25); border-color: rgba(37, 99, 235, 0.3); } .video-card .video-thumb { position: relative; aspect-ratio: 16 / 9; background: #0F172A; overflow: hidden; } .video-card .video-thumb iframe, .video-card .video-thumb img { width: 100%; height: 100%; object-fit: cover; border: none; } .video-card .video-meta { padding: 1.25rem; } .video-card .video-meta h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: #F1F5F9; } .video-card .video-meta p { margin-top: 0.35rem; font-size: 0.85rem; color: #94A3B8; line-height: 1.5; } /* ---------- Terminal aesthetic block ---------- */ .terminal-block { background: #0B1120; border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 0.85rem; padding: 1.25rem 1.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.6; color: #94A3B8; overflow-x: auto; } .terminal-block .term-prompt { color: #06B6D4; } .terminal-block .term-cmd { color: #E2E8F0; } .terminal-block .term-output { color: #64748B; } .terminal-block .term-success { color: #34D399; } .terminal-header { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; } .terminal-header span { width: 10px; height: 10px; border-radius: 9999px; } .term-dot-red { background: #EF4444; } .term-dot-yellow { background: #F59E0B; } .term-dot-green { background: #10B981; } /* ---------- Line divider with glow ---------- */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.4), rgba(6, 182, 212, 0.4), transparent); position: relative; } .section-divider::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 9999px; background: #06B6D4; box-shadow: 0 0 12px 2px rgba(6, 182, 212, 0.5); } /* ---------- Enhanced hover states ---------- */ .card-dark, .card { position: relative; overflow: hidden; } .card-dark::before, .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(6, 182, 212, 0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .card-dark:hover::before, .card:hover::before { opacity: 1; } /* ---------- Glow text effect ---------- */ .glow-text { text-shadow: 0 0 30px rgba(37, 99, 235, 0.3), 0 0 60px rgba(6, 182, 212, 0.15); } /* ---------- Ken Burns fallback for video poster ---------- */ @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } .ken-burns { animation: kenBurns 20s ease-in-out infinite alternate; } /* ---------- Particle canvas reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .particle-canvas { display: none; } .cursor-glow { display: none; } .marquee-track { animation: none; } .scroll-indicator { animation: none; opacity: 0.5; } } /* ========================================================================== Tier 2B additions — micro-type, split-text, link-reveal, before/after, ROI calculator, resource grid, sticky CTA ========================================================================== */ /* ---------- Micro-type captions (scoped to tier2b sections to avoid collision with a future global .caption-1/.caption-2 system) ---------- */ .tier2b-caption { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-blue); padding: 4px 10px; border: 1px solid rgba(37, 99, 235, 0.25); border-radius: 999px; background: rgba(37, 99, 235, 0.06); } .tier2b-caption.is-light { color: #67E8F9; border-color: rgba(103, 232, 249, 0.35); background: rgba(6, 182, 212, 0.08); } /* ---------- Split-text fade reveal (applied via JS wrapping words) ---------- */ .h-split .hs-word { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(6px); transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease; transition-delay: calc(var(--hs-i, 0) * 70ms); } .h-split.is-visible .hs-word, .h-split.is-split-ready .hs-word { opacity: 1; transform: translateY(0); filter: blur(0); } @media (prefers-reduced-motion: reduce) { .h-split .hs-word { opacity: 1; transform: none; filter: none; } } /* ========================================================================== Typography accent: Fraunces italic for About + pull-quotes Keeps Space Grotesk/Inter as the core stack; this is a scoped serif accent echoing Clay's "tiny serif accent in otherwise sans system" pattern. ========================================================================== */ .font-serif-accent { font-family: 'Fraunces', 'Georgia', serif; font-weight: 400; letter-spacing: -0.005em; } .font-serif-accent em, .font-serif-accent .serif-italic { font-style: italic; } .pullquote { font-family: 'Fraunces', 'Georgia', serif; font-weight: 400; font-size: 1.15rem; line-height: 1.5; letter-spacing: -0.005em; font-style: italic; color: #F1F5F9; } @media (min-width: 768px) { .pullquote { font-size: 1.25rem; } } /* ========================================================================== Tier 2 #12: Wordmark mask-wipe hover (Graphite mask-wipe pattern) Two copies of the wordmark stacked; a gradient mask wipes across on hover, revealing the brand-gradient version underneath. ========================================================================== */ .wordmark-mask { position: relative; display: inline-block; overflow: hidden; isolation: isolate; } .wordmark-mask-inner { position: relative; display: inline-block; } .wordmark-mask-inner::before, .wordmark-mask-inner::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; white-space: nowrap; } .wordmark-mask-footer .wordmark-mask-inner::before { color: #ffffff; } .wordmark-mask-inner::before { color: var(--brand-navy); -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%); mask: linear-gradient(90deg, #000 50%, transparent 50%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 0% 0%; mask-position: 0% 0%; transition: -webkit-mask-position 0.6s cubic-bezier(0.76, 0, 0.24, 1), mask-position 0.6s cubic-bezier(0.76, 0, 0.24, 1); } .wordmark-mask-inner::after { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: #06B6D4; -webkit-text-fill-color: transparent; -webkit-mask: linear-gradient(90deg, transparent 50%, #000 50%); mask: linear-gradient(90deg, transparent 50%, #000 50%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 100% 0%; mask-position: 100% 0%; transition: -webkit-mask-position 0.6s cubic-bezier(0.76, 0, 0.24, 1), mask-position 0.6s cubic-bezier(0.76, 0, 0.24, 1); } .wordmark-mask:hover .wordmark-mask-inner::before, .wordmark-mask:focus-visible .wordmark-mask-inner::before { -webkit-mask-position: -100% 0%; mask-position: -100% 0%; } .wordmark-mask:hover .wordmark-mask-inner::after, .wordmark-mask:focus-visible .wordmark-mask-inner::after { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } /* Hide the base text visually during hover since ::before/::after take over. Use -webkit-text-fill-color instead of color: transparent so Lighthouse can still read the computed `color` value for contrast checks. */ .wordmark-mask-inner { color: #0F172A !important; -webkit-text-fill-color: transparent !important; } .wordmark-mask-inner .wordmark-ai { opacity: 0; } @media (prefers-reduced-motion: reduce) { .wordmark-mask-inner::before, .wordmark-mask-inner::after { transition: none; } } /* ---------- Link reveal underline ---------- */ .link-reveal { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--brand-blue); font-weight: 600; } .link-reveal::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0.3); transform-origin: left; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } /* ========================================================================== Tier 2 #11: Nav scroll counter (Graphite scroll-progress mask pattern) Shows "02 / 14 — Services" next to the wordmark, updates on scroll. ========================================================================== */ .nav-section-counter { display: none; align-items: center; gap: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: #64748B; padding: 0.35rem 0.75rem; border-radius: 9999px; border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.5); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; } @media (min-width: 1024px) { .nav-section-counter { display: inline-flex; } } .nav-glass.is-scrolled .nav-section-counter { color: #0F172A; border-color: rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.8); } .nav-section-counter .nsc-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--grad-cta); flex-shrink: 0; } .nav-section-counter .nsc-label { color: var(--brand-blue); font-weight: 600; letter-spacing: 0.18em; } /* ========================================================================== Tier 2 #10: Uppercase micro-caption system (Adchitects caption-1 / caption-2) caption-1 is the primary eyebrow label; caption-2 is a smaller section counter/tag that pairs under it ("06 — Testimonials"). ========================================================================== */ .caption-1 { display: inline-block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-blue); } .eyebrow-light.caption-1, .caption-1.eyebrow-light { color: #67E8F9; } .caption-2 { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #64748B; margin-top: 0.35rem; } .bg-brand-navy .caption-2, .hero-mesh .caption-2, .case-studies .caption-2, .testimonials .caption-2, .video-showcase .caption-2 { color: #94A3B8; } /* ========================================================================== Tier 2 #6: .link-reveal — hover-reveal underline (Huge v2__link--reveal) ========================================================================== */ .link-reveal { position: relative; display: inline-block; padding-bottom: 2px; transition: color 0.25s ease; } .link-reveal::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1); } .link-reveal:hover::after, .link-reveal:focus-visible::after { transform: scaleX(1); } .link-reveal .lr-arrow { transition: transform 0.3s ease; } .link-reveal:hover .lr-arrow { transform: translateX(3px); } /* .link-reveal on dark (navy) backgrounds — override brand blue (#2563EB) which only achieves 3.5:1 contrast on #0F172A. #93C5FD (blue-300) gives ~8:1 on navy while keeping the accent-blue family. */ .bg-brand-navy .link-reveal, footer .link-reveal { color: #93C5FD; } .bg-brand-navy .link-reveal:hover, footer .link-reveal:hover { color: #ffffff; } /* ---------- BEFORE / AFTER SLIDER ---------- */ .ba-slider { margin-top: 3rem; max-width: 960px; margin-left: auto; margin-right: auto; } .ba-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 1rem; overflow: hidden; background: #0f172a; box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.35); --ba-split: 50%; } .ba-layer { position: absolute; inset: 0; width: 100%; height: 100%; } .ba-layer svg { width: 100%; height: 100%; display: block; } .ba-after { clip-path: inset(0 0 0 var(--ba-split)); will-change: clip-path; } .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--ba-split); width: 2px; background: linear-gradient(180deg, rgba(6, 182, 212, 0.9), rgba(37, 99, 235, 0.9)); transform: translateX(-1px); pointer-events: none; } .ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 999px; background: var(--grad-cta); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 10px 24px -6px rgba(6, 182, 212, 0.5); display: flex; align-items: center; justify-content: center; } .ba-handle::before, .ba-handle::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: block; } .ba-handle::before { border-right: 6px solid #fff; margin-right: 6px; } .ba-handle::after { border-left: 6px solid #fff; margin-left: 6px; } .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; } .ba-range:focus-visible + .ba-divider .ba-handle, .ba-range:focus-visible ~ .ba-divider .ba-handle { box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(37, 99, 235, 0.6); } .ba-chip { position: absolute; top: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; pointer-events: none; z-index: 2; } .ba-chip-before { left: 14px; background: rgba(255, 255, 255, 0.9); color: #475569; border: 1px solid #E2E8F0; } .ba-chip-after { right: 14px; background: rgba(15, 23, 42, 0.75); color: #67E8F9; border: 1px solid rgba(103, 232, 249, 0.35); backdrop-filter: blur(6px); } @media (prefers-reduced-motion: reduce) { .ba-after { clip-path: inset(0 0 0 50%); } } /* ---------- ROI CALCULATOR ---------- */ .roi-field { padding: 1.25rem 1.5rem; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 0.875rem; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .roi-field:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .roi-field-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .roi-label { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--brand-navy); letter-spacing: -0.01em; } .roi-number-wrap { display: inline-flex; align-items: center; gap: 0.35rem; background: #fff; border: 1px solid #CBD5E1; border-radius: 0.5rem; padding: 0.3rem 0.6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; /* 16px min prevents iOS Safari auto-zoom when tapping the roi-number input */ font-size: 1rem; color: var(--brand-navy); } .roi-number { width: 4ch; border: none; outline: none; background: transparent; font: inherit; color: inherit; text-align: right; -moz-appearance: textfield; } .roi-number::-webkit-outer-spin-button, .roi-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .roi-unit { font-size: 0.75rem; color: #64748B; letter-spacing: 0.02em; } .roi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: #E2E8F0; border-radius: 999px; outline: none; background-image: var(--grad-cta); background-repeat: no-repeat; background-size: var(--roi-fill, 25%) 100%; } .roi-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 3px solid var(--brand-blue); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); cursor: grab; transition: transform 0.15s ease; } .roi-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); } .roi-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 3px solid var(--brand-blue); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); cursor: grab; } .roi-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3); } /* Larger thumb on touch devices for ergonomic drag */ @media (hover: none) { .roi-range::-webkit-slider-thumb { width: 32px; height: 32px; } .roi-range::-moz-range-thumb { width: 32px; height: 32px; } } .roi-scale { display: flex; justify-content: space-between; margin-top: 0.4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: #94A3B8; letter-spacing: 0.08em; } .roi-output { background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%); color: #fff; border-radius: 1rem; padding: 2rem 1.75rem; position: relative; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(37, 99, 235, 0.35); } .roi-output::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; transform-origin: left center; } @media (prefers-reduced-motion: reduce) { .link-reveal::after { transition: none; transform: scaleX(1); } } /* ========================================================================== Hero workflow animation (pure SVG + CSS, ~14s loop) Narrates "watch the automation happen": cursor moves to "New Automation", clicks, form fields populate, a missed-call toast slides in, an AI reply types, and a calendar slot is auto-confirmed with a checkmark. Uses luminosity blend to sit behind the mesh and chat panel without competing. Replaces the prior abstract dashboard loop. ========================================================================== */ .hero-video-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45; mix-blend-mode: luminosity; overflow: hidden; } /* Radial darken behind the foreground chat panel so it stays readable now that the background animation is more visually active. */ .hero-video-layer::after { content: ''; position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: radial-gradient(ellipse at 70% 50%, rgba(11, 17, 32, 0.55) 0%, rgba(11, 17, 32, 0.25) 45%, transparent 70%); mix-blend-mode: normal; pointer-events: none; } /* Ensure the matrix canvas sits above the mock video */ #matrix-canvas { z-index: 1; } .hero-video-layer svg { width: 100%; height: 100%; display: block; } @media (min-width: 1024px) { .hero-video-layer svg { min-width: 1100px; } } /* ---- Browser chrome ---- */ .hv-browser { fill: #0B1120; stroke: rgba(148, 163, 184, 0.25); stroke-width: 1; } .hv-browser-bar { fill: rgba(30, 41, 59, 0.85); stroke: none; } .hv-dot-red { fill: #EF4444; } .hv-dot-amber { fill: #F59E0B; } .hv-dot-green { fill: #10B981; } .hv-url { fill: rgba(15, 23, 42, 0.9); stroke: rgba(148, 163, 184, 0.2); stroke-width: 1; } .hv-url-text { fill: #94A3B8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; dominant-baseline: middle; } .hv-url-lock { fill: #10B981; } /* ---- Base panels / rails ---- */ .hv-panel { fill: rgba(15, 23, 42, 0.9); stroke: rgba(148, 163, 184, 0.18); stroke-width: 1; } .hv-rail-logo { fill: rgba(148, 163, 184, 0.55); } .hv-rail-item { fill: rgba(148, 163, 184, 0.22); } .hv-rail-active { fill: rgba(6, 182, 212, 0.55); animation: hvRailPulse 14s ease-in-out infinite; } @keyframes hvRailPulse { 0%, 10%, 100% { fill: rgba(148, 163, 184, 0.22); } 14%, 95% { fill: rgba(6, 182, 212, 0.55); } } .hv-heading { fill: rgba(226, 232, 240, 0.85); } .hv-subhead { fill: rgba(148, 163, 184, 0.45); } /* ---- CTA: "+ New Automation" ---- */ .hv-cta-bg { fill: url(#hvBtn); opacity: 0.82; animation: hvCtaPulse 14s ease-in-out infinite; } .hv-cta-text { fill: #ffffff; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11px; font-weight: 600; dominant-baseline: middle; opacity: 0.95; } @keyframes hvCtaPulse { 0%, 8% { opacity: 0.82; transform: scale(1); } 12% { opacity: 1; transform: scale(1.04); } 16%, 100% { opacity: 0.82; transform: scale(1); } } .hv-cta { transform-origin: 964px 193px; transform-box: fill-box; } /* ---- Form fields ---- */ .hv-field-label { fill: rgba(148, 163, 184, 0.5); } .hv-field { fill: rgba(15, 23, 42, 0.6); stroke: rgba(148, 163, 184, 0.22); stroke-width: 1; } .hv-field-trigger { stroke: rgba(6, 182, 212, 0.45); } .hv-field-fill { fill: rgba(6, 182, 212, 0.18); } .hv-field-text { fill: #E2E8F0; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; dominant-baseline: middle; opacity: 0; clip-path: inset(0 100% 0 0); } /* Fill-width sweep per field (staggered) */ .hv-fill-trigger { animation: hvFillWidth-trigger 14s ease-in-out infinite; } .hv-fill-action { animation: hvFillWidth-action 14s ease-in-out infinite; } .hv-fill-calendar { animation: hvFillWidth-calendar 14s ease-in-out infinite; } @keyframes hvFillWidth-trigger { 0%, 18% { width: 0; } 24% { width: 300px; } 95% { width: 300px; } 100% { width: 0; } } @keyframes hvFillWidth-action { 0%, 28% { width: 0; } 36% { width: 620px; } 95% { width: 620px; } 100% { width: 0; } } @keyframes hvFillWidth-calendar { 0%, 40% { width: 0; } 48% { width: 340px; } 95% { width: 340px; } 100% { width: 0; } } /* Text reveal (typewriter-style clip) per field */ .hv-text-trigger { animation: hvTypeTrigger 14s steps(1, end) infinite; } .hv-text-action { animation: hvTypeAction 14s steps(1, end) infinite; } .hv-text-calendar { animation: hvTypeCalendar 14s steps(1, end) infinite; } @keyframes hvTypeTrigger { 0%, 19% { opacity: 0; clip-path: inset(0 100% 0 0); } 20%, 94% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 100% 0 0); } } @keyframes hvTypeAction { 0%, 29% { opacity: 0; clip-path: inset(0 100% 0 0); } 30%, 94% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 100% 0 0); } } @keyframes hvTypeCalendar { 0%, 41% { opacity: 0; clip-path: inset(0 100% 0 0); } 42%, 94% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 100% 0 0); } } /* ---- Save button (glows at the end) ---- */ .hv-save-bg { fill: rgba(71, 85, 105, 0.6); stroke: rgba(148, 163, 184, 0.3); stroke-width: 1; animation: hvSaveGlow 14s ease-in-out infinite; } .hv-save-text { fill: #E2E8F0; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 12px; font-weight: 600; dominant-baseline: middle; } @keyframes hvSaveGlow { 0%, 55% { fill: rgba(71, 85, 105, 0.6); } 62%, 94% { fill: url(#hvBtn); } 100% { fill: rgba(71, 85, 105, 0.6); } } /* ---- Incoming call/lead toast (slides in top-right) ---- */ .hv-toast { opacity: 0; transform: translate(1060px, 148px) translateX(40px); animation: hvToastIn 14s ease-in-out infinite; } .hv-toast-bg { fill: rgba(15, 23, 42, 0.95); stroke: rgba(6, 182, 212, 0.5); stroke-width: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4)); } .hv-toast-icon { fill: #06B6D4; } .hv-toast-title { fill: #F1F5F9; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 12px; font-weight: 600; dominant-baseline: middle; } .hv-toast-sub { fill: #94A3B8; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; dominant-baseline: middle; } @keyframes hvToastIn { 0%, 42% { opacity: 0; transform: translate(1060px, 148px) translateX(40px); } 46% { opacity: 1; transform: translate(1060px, 148px) translateX(0); } 80% { opacity: 1; transform: translate(1060px, 148px) translateX(0); } 86%, 100% { opacity: 0; transform: translate(1060px, 148px) translateX(40px); } } /* ---- AI chat reply bubble ---- */ .hv-chat { opacity: 0; animation: hvChatIn 14s ease-in-out infinite; } .hv-chat-bg { fill: rgba(15, 23, 42, 0.88); stroke: rgba(37, 99, 235, 0.45); stroke-width: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)); } .hv-chat-avatar { fill: url(#hvBtn); } .hv-chat-avatar-label { fill: #ffffff; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 10px; font-weight: 700; dominant-baseline: middle; } .hv-chat-line1, .hv-chat-line2 { fill: #E2E8F0; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; dominant-baseline: middle; clip-path: inset(0 100% 0 0); animation: hvChatType 14s steps(1, end) infinite; } .hv-chat-line2 { animation-delay: 0.6s; } .hv-chat-link { fill: #67E8F9; text-decoration: underline; } @keyframes hvChatType { 0%, 55% { clip-path: inset(0 100% 0 0); } 58%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } } @keyframes hvChatIn { 0%, 50% { opacity: 0; } 54%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } } .hv-typing circle { fill: #67E8F9; animation: hvTypingBlink 1.2s ease-in-out infinite; } .hv-typing circle:nth-child(2) { animation-delay: 0.2s; } .hv-typing circle:nth-child(3) { animation-delay: 0.4s; } @keyframes hvTypingBlink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } } /* ---- Calendar grid + checkmark ---- */ .hv-cal-grid rect { fill: rgba(148, 163, 184, 0.12); } .hv-cal-slot { fill: rgba(148, 163, 184, 0.12); animation: hvSlotHighlight 14s ease-in-out infinite; } @keyframes hvSlotHighlight { 0%, 62% { fill: rgba(148, 163, 184, 0.12); } 66%, 94% { fill: rgba(16, 185, 129, 0.7); } 100% { fill: rgba(148, 163, 184, 0.12); } } .hv-check { opacity: 0; animation: hvCheckIn 14s ease-in-out infinite; } .hv-check-bg { fill: #10B981; } .hv-check-mark { stroke: #ffffff; } @keyframes hvCheckIn { 0%, 68% { opacity: 0; transform: translate(1190px, 500px) scale(0.3); } 72% { opacity: 1; transform: translate(1190px, 500px) scale(1.15); } 76%, 94% { opacity: 1; transform: translate(1190px, 500px) scale(1); } 100% { opacity: 0; transform: translate(1190px, 500px) scale(0.3); } } /* ---- Cursor path (moves → clicks CTA → down to fields → toast → calendar) ---- */ .hv-cursor { animation: hvCursorMove 14s cubic-bezier(0.65, 0, 0.35, 1) infinite; } .hv-cursor-ring { animation: hvCursorClick 14s ease-out infinite; } /* Translate-only keyframes — the cursor's 13-point narrative walk */ @keyframes hvCursorMove { 0% { transform: translate(260px, 620px); } 10% { transform: translate(640px, 350px); } 14% { transform: translate(964px, 193px); } /* over CTA */ 18% { transform: translate(964px, 193px); } /* click hold */ 26% { transform: translate(550px, 292px); } /* trigger field */ 36% { transform: translate(700px, 364px); } /* action field */ 48% { transform: translate(570px, 436px); } /* calendar field */ 60% { transform: translate(452px, 494px); } /* save */ 64% { transform: translate(452px, 494px); } /* click hold */ 72% { transform: translate(1190px, 500px); } /* calendar slot */ 85% { transform: translate(1190px, 500px); } 100% { transform: translate(260px, 620px); } /* loop back */ } @keyframes hvCursorClick { 0%, 13%, 16%, 63%, 66% { r: 0; opacity: 0; } 14% { r: 4; opacity: 1; } 15% { r: 18; opacity: 0; } 64% { r: 4; opacity: 1; } 65% { r: 18; opacity: 0; } 100% { r: 0; opacity: 0; } } /* ---- Reduced motion: freeze on the "final confirmed" representative frame ---- */ @media (prefers-reduced-motion: reduce) { .hero-video-layer { opacity: 0.3; } .hv-rail-active { fill: rgba(6, 182, 212, 0.55); animation: none; } .hv-cta-bg { animation: none; } .hv-fill-trigger { width: 300px; animation: none; } .hv-fill-action { width: 620px; animation: none; } .hv-fill-calendar { width: 340px; animation: none; } .hv-text-trigger, .hv-text-action, .hv-text-calendar { opacity: 1; clip-path: inset(0 0 0 0); animation: none; } .hv-save-bg { fill: url(#hvBtn); animation: none; } .hv-toast { opacity: 1; transform: translate(1060px, 148px); animation: none; } .hv-chat { opacity: 1; animation: none; } .hv-chat-line1, .hv-chat-line2 { clip-path: inset(0 0 0 0); animation: none; } .hv-typing circle { animation: none; opacity: 0.2; } .hv-cal-slot { fill: rgba(16, 185, 129, 0.7); animation: none; } .hv-check { opacity: 1; transform: translate(1190px, 500px); animation: none; } .hv-cursor { animation: none; transform: translate(1190px, 500px); } .hv-cursor-ring { animation: none; } } /* ========================================================================== Tier 1 #4: Testimonials carousel (scroll-snap, no library) ========================================================================== */ .testimonials { background: #0F172A; position: relative; overflow: hidden; } .testimonials::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 20% 20%, rgba(37, 99, 235, 0.22), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(6, 182, 212, 0.18), transparent 60%); pointer-events: none; } .testimonial-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82%, 82%); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 1.25rem 2rem; margin: 0 -1.25rem; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; } @media (min-width: 768px) { .testimonial-track { grid-auto-columns: minmax(54%, 54%); padding: 0.5rem 2rem 2rem; margin: 0 -2rem; } } @media (min-width: 1024px) { .testimonial-track { grid-auto-columns: minmax(38%, 38%); } } .testimonial-track::-webkit-scrollbar { height: 6px; } .testimonial-track::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 9999px; } .testimonial-card { scroll-snap-align: start; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.15rem; padding: 1.75rem; color: #E2E8F0; display: flex; flex-direction: column; gap: 1.15rem; min-height: 100%; } .testimonial-stars { display: inline-flex; gap: 0.2rem; color: #FBBF24; } .testimonial-stars svg { width: 16px; height: 16px; } .testimonial-quote { font-size: 1.02rem; line-height: 1.55; color: #F1F5F9; } .testimonial-person { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .testimonial-avatar { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 9999px; display: grid; place-items: center; color: #fff; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; background: linear-gradient(135deg, #2563EB, #06B6D4); } .testimonial-meta-name { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; color: #F8FAFC; } .testimonial-meta-title { font-size: 0.8rem; color: #94A3B8; } .testimonial-nav { display: inline-flex; gap: 0.6rem; } .testimonial-nav button { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: #E2E8F0; border: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease; cursor: pointer; } .testimonial-nav button:hover { background: rgba(6, 182, 212, 0.15); color: #67E8F9; } .testimonial-nav button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } /* Bump to 44px tap target on mobile */ @media (max-width: 640px) { .testimonial-nav button { width: 2.75rem; height: 2.75rem; } } /* ========================================================================== Tier 1 #3: Partner recognition strip Grayscale-by-default with colorize-on-hover (DD.NYC "agency of the year" strip + Digital Silk partner badges pattern). ========================================================================== */ .partner-strip { background: #F8FAFC; border-top: 1px solid rgba(15, 23, 42, 0.06); border-bottom: 1px solid rgba(15, 23, 42, 0.06); padding: 2.5rem 0 2.75rem; } .partner-strip .partner-label { text-align: center; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #64748B; margin-bottom: 1.5rem; } .partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: center; justify-items: center; } @media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .partner-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .partner-logo { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 0.6rem; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem; color: #475569; filter: grayscale(1); opacity: 0.65; transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease, color 0.25s ease; white-space: nowrap; } .partner-logo:hover, .partner-logo:focus-visible { filter: grayscale(0); opacity: 1; transform: translateY(-2px); color: #0F172A; } /* Touch devices never fire :hover — keep logos fully colored there */ @media (hover: none) { .partner-logo { filter: grayscale(0); opacity: 1; color: #0F172A; } } .partner-logo svg { flex-shrink: 0; } .partner-logo .partner-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .partner-logo { transition: none; } } /* ========================================================================== Tier 1 #2: Case-study / work grid Clay-style hover-reveal tiles, Bop/TCM-style stat chips. ========================================================================== */ .case-studies { background: linear-gradient(180deg, #0F172A 0%, #12213B 100%); } .case-card { position: relative; display: flex; flex-direction: column; gap: 1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.15rem; padding: 1.75rem; color: #E2E8F0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; overflow: hidden; } .case-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(6, 182, 212, 0.55)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .roi-output-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #67E8F9; } .roi-output-value { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -0.03em; background: linear-gradient(90deg, #fff 0%, #67E8F9 50%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: #ffffff; -webkit-text-fill-color: transparent; animation: roiShimmer 5s ease-in-out infinite; margin-top: 0.35rem; line-height: 1.05; } @keyframes roiShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .roi-output-value { animation: none; } } .roi-output-breakdown { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 0.5rem; } .roi-breakdown-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: #CBD5E1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .roi-breakdown-row span:last-child { color: #fff; } .roi-fine-print { margin-top: 1rem; font-size: 0.75rem; line-height: 1.5; color: #94A3B8; } /* ---------- Resource / Insights grid ---------- */ .resource-card { display: flex; flex-direction: column; padding: 1.75rem 1.5rem; min-height: 240px; } .resource-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .resource-tag { display: inline-flex; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-blue); padding: 3px 8px; border: 1px solid rgba(37, 99, 235, 0.25); border-radius: 4px; background: rgba(37, 99, 235, 0.04); } .resource-status { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #94A3B8; display: inline-flex; align-items: center; gap: 0.35rem; } .resource-status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); } .resource-card a.link-reveal { margin-top: auto; } .resource-card a.link-reveal[aria-disabled="true"] { color: #64748B; pointer-events: none; opacity: 0.7; } .resource-newsletter { margin-top: 3rem; padding: 1.75rem 1.75rem; border-radius: 1rem; background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%); border: 1px solid #E2E8F0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; } @media (min-width: 768px) { .resource-newsletter { grid-template-columns: 1.4fr 1fr; gap: 2rem; padding: 2rem 2.25rem; } } .resource-newsletter-form { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; } .resource-newsletter-form .field-input { min-width: 0; flex: 1 1 200px; } .resource-newsletter-form .form-status { flex-basis: 100%; font-size: 0.8rem; margin-top: 0.25rem; } .resource-newsletter-form .form-status.is-success { color: #059669; } .resource-newsletter-form .form-status.is-error { color: #DC2626; } /* ---------- Sticky side contact widget ---------- */ .sticky-cta { position: fixed; right: 1.5rem; right: max(1.5rem, env(safe-area-inset-right)); bottom: 1.5rem; bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 0.35rem; opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .sticky-cta-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.15rem; border-radius: 999px; background: var(--grad-cta); color: #fff; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.25s ease; } .sticky-cta-pill:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(6, 182, 212, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; } .sticky-cta-pill:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; } .sticky-cta-dot { width: 8px; height: 8px; border-radius: 999px; background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35); animation: stickyPulse 2.4s ease-in-out infinite; } @keyframes stickyPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.1); } } .sticky-cta-arrow { transition: transform 0.2s ease; } .sticky-cta-pill:hover .sticky-cta-arrow { transform: translateX(3px); } .sticky-cta-close { width: 30px; height: 30px; border-radius: 999px; background: rgba(15, 23, 42, 0.88); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.45); transition: background 0.2s ease, transform 0.2s ease; } .sticky-cta-close:hover { background: rgba(15, 23, 42, 1); transform: scale(1.05); } .sticky-cta-close:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; } @media (max-width: 640px) { .sticky-cta-pill { padding: 0.7rem 0.95rem; font-size: 0.85rem; } /* 40px min for comfortable tap target — was 26px, below WCAG 44×44 guideline but balanced against visual footprint of the whole pill */ .sticky-cta-close { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .sticky-cta-dot { animation: none; } .sticky-cta { transition: none; } } /* Case-card gradient overlay (PR #6) — hidden by default, shown on hover */ .case-card::before { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .case-card:hover::before { opacity: 1; } .case-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.05); border-color: rgba(6, 182, 212, 0.25); box-shadow: 0 30px 60px -30px rgba(6, 182, 212, 0.35); } .case-meta { display: flex; align-items: center; justify-content: space-between; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: #67E8F9; } .case-meta .case-industry { color: #94A3B8; } .case-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: #F8FAFC; letter-spacing: -0.01em; } .case-outcome { color: #CBD5E1; font-size: 0.95rem; line-height: 1.55; } .case-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; } .case-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 9999px; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.22); font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.78rem; color: #E0F2FE; } .case-stat strong { font-weight: 700; color: #67E8F9; letter-spacing: -0.01em; } .illustrative-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: #94A3B8; padding: 0.35rem 0.7rem; border: 1px dashed rgba(148, 163, 184, 0.3); border-radius: 9999px; background: rgba(148, 163, 184, 0.04); } /* ========================================================================== Tier 1: Split-text line-by-line reveals Inspired by Clay, Digital Silk, Graphite — line fade-position on scroll. ========================================================================== */ .h-split .h-split-line { display: block; overflow: hidden; position: relative; } .h-split .h-split-line-inner { display: block; transform: translateY(110%); opacity: 0; transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; } .h-split.is-split-visible .h-split-line:nth-child(1) .h-split-line-inner { transition-delay: 0.04s; transform: translateY(0); opacity: 1; } .h-split.is-split-visible .h-split-line:nth-child(2) .h-split-line-inner { transition-delay: 0.14s; transform: translateY(0); opacity: 1; } .h-split.is-split-visible .h-split-line:nth-child(3) .h-split-line-inner { transition-delay: 0.24s; transform: translateY(0); opacity: 1; } .h-split.is-split-visible .h-split-line:nth-child(4) .h-split-line-inner { transition-delay: 0.34s; transform: translateY(0); opacity: 1; } .h-split.is-split-visible .h-split-line:nth-child(5) .h-split-line-inner { transition-delay: 0.44s; transform: translateY(0); opacity: 1; } .h-split.is-split-visible .h-split-line:nth-child(6) .h-split-line-inner { transition-delay: 0.54s; transform: translateY(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .h-split .h-split-line-inner { transform: none !important; opacity: 1 !important; transition: none !important; } }