/* cinematic.css — WebGL, magnetic UI, Spline 3D, range calculator overlays. */ /* ── WCAG AA contrast tokens (all verified ≥4.5:1 on slate-950 #020617) ── */ :root { --cin-text-body: #CBD5E1; /* ~11:1 — primary body copy */ --cin-text-muted: #C8D4E4; /* ≥4.6:1 — secondary / subheadlines */ --cin-text-label: #B0BDD0; /* ≥4.5:1 — small uppercase eyebrows / labels */ /* Accent gradient tokens (overridable per client) */ --cin-accent-from: #f43f5e; /* ember-500 */ --cin-accent-to: #0891b2; /* cyan-600 */ --cin-accent-to-rgb: 8,145,178; /* for rgba() usage */ /* Header height tokens (matches base.html main pt-16 / lg:pt-[4.5rem]) */ --cin-header-h: 4rem; --cin-header-h-lg: 4.5rem; /* Legal card watermark numeral — uses already-loaded Space Grotesk display face */ --cin-legal-watermark-font: "Space Grotesk", Inter, sans-serif; } /* Scroll-margin utility — compensates for sticky header on anchor targets */ .cin-scroll-mt { scroll-margin-top: var(--cin-header-h); } @media (min-width: 1024px) { .cin-scroll-mt { scroll-margin-top: var(--cin-header-h-lg); } } /* Site-wide contrast fix: remap the muted Tailwind utilities that were rendering ≈#8a9ab0 (3.2:1) to the token values above. These overrides only fire inside .cin-page-root (set on by base.html Phase-0 patch) so they do not bleed into other template sets. NOTE: We use a body-level class to avoid !important proliferation. */ body.cin-page { overflow-x: clip; } body.cin-page .text-slate-300 { color: var(--cin-text-body); } body.cin-page .text-slate-400 { color: var(--cin-text-muted); } body.cin-page .text-slate-500 { color: var(--cin-text-label); } /* Utility classes for direct use */ .cin-text-body { color: var(--cin-text-body); } .cin-text-muted { color: var(--cin-text-muted); } .cin-text-label { color: var(--cin-text-label); } /* Section eyebrow grammar — teal/wire; reserve ember for headline emphasis */ .cin-section-eyebrow { font-family: "Space Grotesk", Inter, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #22d3ee; } .btn-magnetic--primary { position: relative; display: inline-flex; align-items: center; justify-content: center; transform: translate3d(0, 0, 0); backface-visibility: hidden; transition: box-shadow 0.25s ease; } @media (prefers-reduced-motion: reduce) { .btn-magnetic--primary { will-change: auto; transform: none !important; transition: none; } } /* ── Stat cards + secondary CTA glow tokens ───────────────────────────── */ .cin-stat-card { border: 1px solid transparent; background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)) padding-box, linear-gradient(120deg, rgba(244, 63, 94, 0.55), rgba(34, 211, 238, 0.55)) border-box; box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.4); } .cin-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid rgba(51, 65, 85, 0.65); background: rgba(15, 23, 42, 0.6); color: #fff; font-weight: 600; padding: 0.875rem 1.75rem; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .cin-btn-secondary:hover { border-color: rgba(6, 182, 212, 0.5); box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.4); background: rgba(15, 23, 42, 0.85); } /* ── WebGL / CSS Before-After ─────────────────────────────────────────── */ .cin-ba-shell { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; } .cin-ba-wrapper { position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(51, 65, 85, 0.65); cursor: col-resize; user-select: none; touch-action: none; min-height: 280px; background: #020617; } .cin-ba-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; } .cin-ba-fallback__before, .cin-ba-fallback__after { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center top; pointer-events: none; } @media (max-width: 639px) { .cin-ba-fallback__before, .cin-ba-fallback__after { object-fit: contain; object-position: center center; } } .cin-ba-fallback__after { clip-path: inset(0 0 0 35%); } .cin-ba-handle { position: absolute; top: 0; left: 35%; height: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; transform: translateX(-50%); z-index: 2; } .cin-ba-handle__line { flex: 1; width: 2px; background: linear-gradient(to bottom, transparent, rgba(244, 63, 94, 0.8), transparent); } .cin-ba-handle__grip { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: linear-gradient(135deg, #f43f5e, #22d3ee); color: #fff; box-shadow: 0 4px 20px -4px rgba(244, 63, 94, 0.6); } /* ── Range calculator ─────────────────────────────────────────────────── */ .cin-range-calc { border: 1px solid transparent; background: linear-gradient(rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.97)) padding-box, linear-gradient(120deg, rgba(244, 63, 94, 0.55), rgba(34, 211, 238, 0.55)) border-box; } .cin-range-input { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: linear-gradient( to right, #f43f5e 0%, #22d3ee var(--range-pct, 50%), rgba(51, 65, 85, 0.6) var(--range-pct, 50%) ); outline: none; cursor: pointer; } .cin-range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 9999px; background: linear-gradient(135deg, #f43f5e, #22d3ee); box-shadow: 0 2px 10px rgba(244, 63, 94, 0.5); cursor: pointer; will-change: transform; transition: transform 0.15s ease; } .cin-range-input::-webkit-slider-thumb:hover { transform: scale(1.25); } .cin-range-input::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 9999px; background: linear-gradient(135deg, #f43f5e, #22d3ee); box-shadow: 0 2px 10px rgba(244, 63, 94, 0.5); cursor: pointer; } /* ── Spline 3D ────────────────────────────────────────────────────────── */ .cin-spline-wrapper { pointer-events: none; position: relative; width: 100%; max-width: 100%; min-width: 0; } .cin-spline-wrapper .cin-spline-viewer { pointer-events: auto; } .cin-spline-wrapper--hero { border: 1px solid transparent; background: linear-gradient(rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.35)) padding-box, linear-gradient(120deg, rgba(244, 63, 94, 0.55), rgba(34, 211, 238, 0.55)) border-box; box-shadow: 0 0 40px -12px rgba(34, 211, 238, 0.35), inset 0 0 60px rgba(2, 6, 23, 0.45); overflow: hidden; } /* ── Index hero compositional ambient layer ───────────────────────────────── */ /* Spans headline + globe columns on lg: — radial teal→violet→transparent bleeding left so copy and globe read as part of the same composition. */ .cin-hero-ambient-layer { background: radial-gradient(ellipse 55% 70% at 72% 50%, rgba(34, 211, 238, 0.16) 0%, transparent 65%), radial-gradient(ellipse 35% 50% at 42% 48%, rgba(139, 92, 246, 0.12) 0%, transparent 60%); pointer-events: none; } @media (min-width: 1024px) { .cin-hero-ambient-layer { background: radial-gradient(ellipse 65% 80% at 78% 50%, rgba(34, 211, 238, 0.18) 0%, transparent 65%), radial-gradient(ellipse 45% 60% at 38% 46%, rgba(139, 92, 246, 0.14) 0%, transparent 60%), radial-gradient(ellipse 30% 40% at 18% 55%, rgba(244, 63, 94, 0.10) 0%, transparent 55%); } } /* Hero globe: circular crop masks Spline watermark + softens edges */ .cin-spline-wrapper--circle { /* Slightly larger on mobile (was 78vw max) — prevents "accidental crop" read */ width: min(320px, 84vw); aspect-ratio: 1; height: auto !important; margin-inline: auto; border-radius: 50%; isolation: isolate; } @media (min-width: 640px) { .cin-spline-wrapper--circle { width: min(340px, 72vw); } } /* Globe bloom: radial brand bloom behind the globe + edge-fade mask. Fixes QA finding: "globe appears unstyled / floating". */ .cin-spline-wrapper--circle::before { content: ''; position: absolute; inset: -25%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(34, 211, 238, 0.18) 0%, rgba(244, 63, 94, 0.12) 40%, transparent 70%); animation: cin-globe-bloom 6s ease-in-out infinite; } .cin-spline-wrapper--circle spline-viewer, .cin-spline-wrapper--circle canvas { position: relative; z-index: 1; /* Radial mask: globe fades to transparent at edges, hides Spline watermark */ -webkit-mask-image: radial-gradient(circle 48% at 50% 50%, black 40%, rgba(0,0,0,0.6) 60%, transparent 75%); mask-image: radial-gradient(circle 48% at 50% 50%, black 40%, rgba(0,0,0,0.6) 60%, transparent 75%); } @keyframes cin-globe-bloom { 0%, 100% { opacity: 0.65; transform: scale(0.97); } 50% { opacity: 1.0; transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .cin-spline-wrapper--circle::before { animation: none; } } .cin-spline-wrapper--hero spline-viewer, .cin-spline-wrapper--hero .cin-spline-viewer { transform: scale(1.33); transform-origin: center center; } /* Bottom horizon slice — wire border + solid cap hides Spline badge */ .cin-spline-bottom-slice { position: absolute; inset: auto 0 0 0; height: 9%; z-index: 3; pointer-events: none; border-radius: 0 0 999px 999px; overflow: hidden; } .cin-spline-bottom-slice::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1.5px; z-index: 2; border-radius: 999px; background: linear-gradient( 90deg, transparent 0%, rgba(244, 63, 94, 0.65) 22%, rgba(34, 211, 238, 0.85) 50%, rgba(244, 63, 94, 0.65) 78%, transparent 100% ); box-shadow: 0 0 14px rgba(34, 211, 238, 0.35); } .cin-spline-bottom-slice::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 0 0 999px 999px; background: linear-gradient( to bottom, rgba(2, 6, 23, 0.05) 0%, rgba(2, 6, 23, 0.82) 28%, #020617 58% ); } .cin-spline-wrapper--circle::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient( circle at 50% 42%, transparent 52%, rgba(2, 6, 23, 0.12) 78%, rgba(2, 6, 23, 0.42) 100% ); } .cin-spline-wrapper--hero::before { opacity: 0.25; } .cin-spline-wrapper.cin-spline-loading::before { opacity: 0.35; } .cin-spline-wrapper::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 110deg, rgba(15, 23, 42, 0.55) 0%, rgba(34, 211, 238, 0.06) 50%, rgba(15, 23, 42, 0.55) 100% ); background-size: 200% 100%; animation: cin-spline-shimmer 1.8s ease-in-out infinite; opacity: 0.4; transition: opacity 0.5s ease; } .cin-spline-wrapper.cin-spline-loaded::before { opacity: 0; } @keyframes cin-spline-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes cin-rule-shimmer { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } /* ── Thank-you page animated checkmark ─────────────────────────────────── */ .cin-check-path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: cin-check-draw 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards; } #cin-success-icon { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 48px -6px rgba(34, 211, 238, 0.55), 0 0 64px -8px rgba(244, 63, 94, 0.30); } @keyframes cin-check-draw { to { stroke-dashoffset: 0; } } @keyframes cin-icon-bloom { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } @keyframes cin-success-pulse { 0% { opacity: 0.5; transform: translateX(-50%) translateY(-50%) scale(0.97); } 50% { opacity: 0.9; transform: translateX(-50%) translateY(-50%) scale(1.03); } 100% { opacity: 0.5; transform: translateX(-50%) translateY(-50%) scale(0.97); } } @media (prefers-reduced-motion: reduce) { .cin-check-path { animation: none; stroke-dashoffset: 0; } [style*="cin-check-draw"], [style*="cin-icon-bloom"], [style*="cin-success-pulse"] { animation: none !important; } } @media (prefers-reduced-motion: reduce) { [style*="cin-rule-shimmer"] { animation: none !important; } } .cin-split-text { overflow: hidden; } .cin-word-wrap { display: inline-block; overflow: hidden; vertical-align: top; } .cin-split-text .cin-word { display: inline-block; will-change: transform, opacity; } .cin-spline-viewer { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-height: 240px; background: transparent; } /* ── Weather status chip ──────────────────────────────────────────────── */ .cin-weather-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem 0.3rem 0.55rem; border-radius: 9999px; border: 1px solid rgba(34, 211, 238, 0.18); background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cin-text-muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Pulsing dot indicator before chip text */ .cin-weather-chip::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 9999px; background: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, 0.8); animation: cin-chip-pulse 2.5s ease-in-out infinite; } @keyframes cin-chip-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1.0; transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .cin-weather-chip::before { animation: none; opacity: 1; } } /* ── Always-visible ambient motion (G7) ──────────────────────────────────── */ /* Slow, low-amplitude pulses that read as "designed glow" in static screenshots. Hero bloom, globe bloom, and a gentle stat-card shimmer. All gated by prefers-reduced-motion. */ @keyframes cin-hero-bloom-pulse { 0%, 100% { opacity: 0.85; transform: scale(0.99); } 50% { opacity: 1.0; transform: scale(1.01); } } @keyframes cin-stat-pulse { 0%, 100% { box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.35); } 50% { box-shadow: 0 0 32px -4px rgba(34, 211, 238, 0.55); } } /* ── cin-hero wrapper ─────────────────────────────────────────────────── */ /* Usage: add class="cin-hero" to a section's outermost relative container. The ::before pseudo creates a radial bloom layer. Add "cin-hero--grain" for a faint noise overlay. Add "cin-hero--legal" for the ember-from-top-left legal variant. */ .cin-hero { position: relative; overflow: hidden; } .cin-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 30% 35%, rgba(244, 63, 94, 0.32) 0%, transparent 62%), radial-gradient(ellipse 75% 65% at 72% 55%, rgba(var(--cin-accent-to-rgb), 0.28) 0%, transparent 62%); animation: cin-hero-bloom-pulse 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cin-hero::before { animation: none; background: radial-gradient(ellipse 85% 75% at 30% 35%, rgba(244, 63, 94, 0.34) 0%, transparent 62%), radial-gradient(ellipse 75% 65% at 72% 55%, rgba(var(--cin-accent-to-rgb), 0.30) 0%, transparent 62%); } } .cin-hero--grain::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cin-hero > * { position: relative; z-index: 1; } /* Legal variant: ember bloom from top-left, subdued */ .cin-hero--legal::before { background: radial-gradient(ellipse 60% 55% at 20% 35%, rgba(244, 63, 94, 0.16) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 80% 70%, rgba(34, 211, 238, 0.10) 0%, transparent 65%); } /* Per-page legal bloom accents */ .cin-hero--legal-msa::before { background: radial-gradient(ellipse 65% 60% at 22% 30%, rgba(244, 63, 94, 0.22) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 80% 70%, rgba(34, 211, 238, 0.08) 0%, transparent 65%); } .cin-hero--legal-privacy::before { background: radial-gradient(ellipse 65% 60% at 28% 32%, rgba(34, 211, 238, 0.20) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 78% 72%, rgba(8, 145, 178, 0.12) 0%, transparent 65%); } .cin-hero--legal-terms::before { background: radial-gradient(ellipse 55% 55% at 25% 35%, rgba(244, 63, 94, 0.14) 0%, transparent 65%), radial-gradient(ellipse 55% 55% at 75% 65%, rgba(34, 211, 238, 0.14) 0%, transparent 65%); } /* ── cin-card-glass ───────────────────────────────────────────────────── */ /* Glassmorphism card: glass bg + top-edge highlight + hover lift/glow. Add alongside existing rounded/border Tailwind classes. */ .cin-card-glass { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 32px -12px rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .cin-card-glass:hover { border-color: rgba(34, 211, 238, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 24px -6px rgba(34, 211, 238, 0.26), 0 8px 32px -12px rgba(0, 0, 0, 0.6); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .cin-card-glass:hover { transform: none; } } /* ── cin-btn-primary / cin-btn-ghost ──────────────────────────────────── */ /* Canonical CTA buttons. Pair .cin-btn-primary with .btn-magnetic--primary to retain the magnetic hover JS hook without renaming. */ .cin-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; padding: 0.875rem 1.75rem; color: #fff; font-weight: 600; font-size: 0.9375rem; background: linear-gradient(90deg, var(--cin-accent-from) 0%, #e11d48 40%, var(--cin-accent-to) 100%); box-shadow: 0 4px 24px -6px rgba(244, 63, 94, 0.50), 0 4px 24px -6px rgba(var(--cin-accent-to-rgb), 0.30); transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; white-space: nowrap; } .cin-btn-primary:hover { filter: brightness(1.10); box-shadow: 0 6px 32px -6px rgba(244, 63, 94, 0.65), 0 6px 32px -6px rgba(34, 211, 238, 0.45); transform: translateY(-1px); } .cin-btn-primary:active { transform: scale(0.97); filter: brightness(0.95); } @media (prefers-reduced-motion: reduce) { .cin-btn-primary { transition: none; } .cin-btn-primary:hover { transform: none; filter: brightness(1.08); } .cin-btn-primary:active { transform: none; } } .cin-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; padding: 0.875rem 1.75rem; color: #fff; font-weight: 600; font-size: 0.9375rem; border: 1px solid rgba(51, 65, 85, 0.75); background: rgba(15, 23, 42, 0.50); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; white-space: nowrap; } .cin-btn-ghost:hover { border-color: rgba(6, 182, 212, 0.55); background: rgba(15, 23, 42, 0.75); box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.30); } @media (prefers-reduced-motion: reduce) { .cin-btn-ghost { transition: none; } } /* ── Mobile nav scrim + panel ─────────────────────────────────────────── */ /* Applied via Alpine x-transition to the full-viewport overlay */ .cin-nav-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(2, 6, 23, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.cin-nav-open { overflow: hidden; } .cin-nav-panel .cin-nav-link:focus-visible, .cin-nav-panel .cin-nav-close:focus-visible, .cin-nav-panel a:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; } /* ── GSAP block reveals ───────────────────────────────────────────────── */ [data-cin-reveal] { will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { [data-cin-reveal] { will-change: auto; opacity: 1 !important; transform: none !important; } } /* ── Pricing snapshot card ────────────────────────────────────────────── */ .cin-pricing-snapshot { border: 2px solid transparent; width: 100%; max-width: 100%; min-width: 0; background: linear-gradient(rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.97)) padding-box, linear-gradient(120deg, rgba(244, 63, 94, 0.75), rgba(34, 211, 238, 0.75)) border-box; box-shadow: 0 0 36px -6px rgba(34, 211, 238, 0.45), 0 0 28px -8px rgba(244, 63, 94, 0.28); } .cin-pricing-addons-label { font-family: "Space Grotesk", Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #22d3ee; } .cin-pricing-snapshot-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.30); color: #fff; font-weight: 600; font-size: 0.9375rem; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .cin-pricing-snapshot-cta:hover { background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 20px -6px rgba(34, 211, 238, 0.45); } .cin-hero-visual-stack { position: relative; } .cin-hero-visual-stack::before { content: ''; position: absolute; top: 8%; left: 50%; width: min(600px, 120%); height: min(600px, 90%); transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.14) 0%, transparent 68%); pointer-events: none; z-index: 0; } .cin-hero-visual-stack > * { position: relative; z-index: 1; } .cin-stat-card--featured { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.55), 0 0 32px -2px rgba(34, 211, 238, 0.65) !important; } .cin-stat-card--featured .font-display { font-size: 1.65rem; } .cin-nav-desktop.is-active, .cin-nav-link.is-active { color: #22d3ee; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(34, 211, 238, 0.35); font-weight: 600; box-shadow: inset 3px 0 0 #f43f5e; } .cin-nav-contact-current { box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55), 0 0 24px -4px rgba(34, 211, 238, 0.45) !important; font-weight: 700; } .cin-portfolio-card[data-accent="teal"] { border-top: 3px solid #14b8a6; } .cin-portfolio-card[data-accent="orange"] { border-top: 3px solid #f97316; } .cin-portfolio-card[data-accent="blue"] { border-top: 3px solid #3b82f6; } .cin-portfolio-card--featured { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 28px -8px rgba(34, 211, 238, 0.4) !important; } .cin-portfolio-featured-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #022c22; background: #2dd4bf; box-shadow: 0 0 16px rgba(45, 212, 191, 0.45); } .cin-cta-band { position: relative; padding-top: 5.5rem; padding-bottom: 5.5rem; } .cin-cta-band::before { content: ''; position: absolute; inset: 10% 10% auto; height: 70%; background: radial-gradient(ellipse at 50% 40%, rgba(34, 211, 238, 0.07), transparent 70%); pointer-events: none; } /* ── Lenis + scroll stability (prevents horizontal twitch) ─────────────── */ html { scrollbar-gutter: stable; overflow-x: clip; /* Always reserve + show custom track — stops layout shift when scroll starts */ overflow-y: scroll; } body { overflow-x: clip; } html.lenis, html.lenis body { height: auto; } html.lenis, html.lenis.lenis-smooth { overflow-y: scroll !important; scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } /* ── .cin-field — form input with brand focus glow ───────────────────────── */ .cin-field { background: rgba(15, 23, 42, 0.88); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .cin-field::placeholder { color: rgba(255, 255, 255, 0.55); } .cin-field:focus { outline: none; border-color: rgba(244, 63, 94, 0.65); background: rgba(15, 23, 42, 0.95); box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.14), 0 0 24px -4px rgba(244, 63, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { .cin-field { transition: none; } .cin-field:focus { box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.28); } } .cin-form-card { position: relative; border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 56px -10px rgba(244, 63, 94, 0.28), 0 0 40px -12px rgba(34, 211, 238, 0.16), 0 8px 32px -12px rgba(0, 0, 0, 0.55) !important; } .cin-form-card::after { content: ''; position: absolute; inset: -24% -12% auto; height: 60%; background: radial-gradient(ellipse at 50% 0%, rgba(244, 63, 94, 0.18), transparent 70%); pointer-events: none; z-index: 0; } .cin-form-card > * { position: relative; z-index: 1; } .cin-btn-primary--glow { min-height: 3.5rem; font-weight: 700; box-shadow: 0 0 24px 4px rgba(220, 50, 50, 0.45), 0 4px 24px -6px rgba(244, 63, 94, 0.50) !important; } .cin-btn-primary--glow:hover { box-shadow: 0 0 40px 6px rgba(220, 50, 50, 0.65), 0 6px 32px -6px rgba(244, 63, 94, 0.65) !important; } .cin-direct-line-card { border-left: 3px solid transparent; border-image: linear-gradient(to bottom, #f43f5e, #22d3ee) 1; } .cin-direct-line-card dt { font-size: 11px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.58); } .cin-direct-line-card dd { font-weight: 500; color: rgba(255, 255, 255, 0.92); } .cin-promise-card { position: relative; border: 1px solid rgba(244, 63, 94, 0.28); background: rgba(244, 63, 94, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 28px -8px rgba(244, 63, 94, 0.25); padding: 1.5rem 1.5rem 1.5rem 1.75rem; } .cin-promise-card::before { content: ''; position: absolute; top: 0.75rem; bottom: 0.75rem; left: 0; width: 3px; border-radius: 999px; background: linear-gradient(to bottom, #f43f5e, #22d3ee); } /* ── .cin-card-glass--ember — left ember stripe accent ───────────────────── */ /* Usage: add class alongside cin-card-glass for the left ember accent strip */ .cin-card-glass--ember { position: relative; overflow: hidden; } .cin-card-glass--ember::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 999px 0 0 999px; background: linear-gradient(to bottom, var(--cin-accent-from), rgba(244, 63, 94, 0.2)); pointer-events: none; } /* ── .cin-legal-card — glass card with left accent + watermark numeral ────── */ .cin-legal-card { position: relative; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px -12px rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; max-width: 68ch; font-size: 15px; line-height: 1.7; } /* Left accent strip: ember→wire→transparent */ .cin-legal-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 999px 0 0 999px; background: linear-gradient(to bottom, var(--cin-accent-from), var(--cin-accent-to), transparent); pointer-events: none; } /* Watermark numeral from data-cin-num attribute */ .cin-legal-card::after { content: attr(data-cin-num); position: absolute; bottom: -0.5rem; right: 1rem; font-size: 7.5rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.07); filter: blur(1.5px); pointer-events: none; user-select: none; font-family: var(--cin-legal-watermark-font); z-index: 0; clip-path: inset(0 0 8% 0); } .cin-legal-card > * { position: relative; z-index: 1; } .cin-legal-body { color: var(--cin-text-muted, #c8d4e4); font-size: 15px; line-height: 1.7; } .cin-legal-hero-meta { position: relative; padding-left: 0.85rem; } .cin-legal-hero-meta::before { content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 3px; border-radius: 999px; background: linear-gradient(to bottom, var(--cin-accent-from, #f43f5e), var(--cin-accent-to, #22d3ee)); } .cin-btn-legal-secondary, .cin-btn-glass { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; border-radius: 0.75rem; padding: 0.75rem 1.5rem; color: #fff; font-weight: 600; font-size: 0.9375rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; white-space: nowrap; } .cin-btn-legal-secondary:hover, .cin-btn-glass:hover { border-color: rgba(34, 211, 238, 0.45); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.28); } .toc-link.is-active { color: #22d3ee !important; background: rgba(34, 211, 238, 0.12); font-weight: 600; box-shadow: inset 3px 0 0 #f43f5e; } .cin-faq-item { position: relative; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px -16px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } .cin-faq-item::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, #22d3ee, rgba(34, 211, 238, 0.15)); pointer-events: none; } .cin-faq-eyebrow { background: linear-gradient(90deg, #fb7185, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; } .cin-thankyou-headline { background: linear-gradient(105deg, #fff 10%, #67e8f9 55%, #fb7185 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(34, 211, 238, 0.35)); } .cin-success-halo { background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 70%); filter: blur(6px); animation: cin-success-pulse 3.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cin-legal-card { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── .cin-stat-card per-card accent modifiers ─────────────────────────────── */ /* Wire (teal) — for 48h stat; slow ambient pulse so glow reads in screenshots */ .cin-stat-card--wire { border: 1px solid transparent; background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)) padding-box, linear-gradient(120deg, rgba(34, 211, 238, 0.55), rgba(8, 145, 178, 0.45)) border-box; animation: cin-stat-pulse 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cin-stat-card--wire { box-shadow: 0 0 24px -6px rgba(34, 211, 238, 0.35); animation: none; } } /* Ember (rose) — for $0 upfront stat */ .cin-stat-card--ember { border: 1px solid transparent; background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)) padding-box, linear-gradient(120deg, rgba(244, 63, 94, 0.55), rgba(225, 29, 72, 0.45)) border-box; box-shadow: 0 0 24px -6px rgba(244, 63, 94, 0.35); } /* Neutral — for $200/mo stat (subtle, dual-tone) */ .cin-stat-card--neutral { border: 1px solid transparent; background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)) padding-box, linear-gradient(120deg, rgba(244, 63, 94, 0.40), rgba(34, 211, 238, 0.40)) border-box; box-shadow: 0 0 18px -8px rgba(34, 211, 238, 0.25); } /* ── Pricing featured card drama ─────────────────────────────────────────── */ /* Animated border-glow pulse on the featured tier card */ @keyframes cin-featured-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.12), 0 12px 48px -16px rgba(244, 63, 94, 0.35), 0 12px 48px -16px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07); } 50% { box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.30), 0 16px 60px -12px rgba(244, 63, 94, 0.55), 0 16px 60px -12px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10); } } .pricing-card-featured { animation: cin-featured-glow 3.5s ease-in-out infinite; /* Still-frame readable hierarchy (visible without waiting for animation mid-point) */ box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.35), 0 0 40px -8px rgba(244, 63, 94, 0.35), 0 0 40px -8px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .cin-addon-card--onetime { border-left: 3px solid #f59e0b; background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.05), transparent 55%); } .cin-addon-card--monthly { border-left: 3px solid rgba(34, 211, 238, 0.55); } .cin-services-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 48px -12px rgba(34, 211, 238, 0.28), 0 0 40px -14px rgba(244, 63, 94, 0.18); } @media (prefers-reduced-motion: reduce) { .pricing-card-featured { animation: none; box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.40), 0 0 36px -8px rgba(244, 63, 94, 0.40), 0 0 36px -8px rgba(34, 211, 238, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10); } } /* Buyout tier: distinct muted glass so it feels premium but subordinate */ .pricing-card-secondary { border: 1px solid rgba(51, 65, 85, 0.45); background: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)) padding-box, linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px -8px rgba(0, 0, 0, 0.5); } /* ── Portfolio cards — wire-tinted top-edge highlight ─────────────────────── */ .cin-portfolio-card { max-width: 100%; min-width: 0; border-color: rgba(34, 211, 238, 0.22); box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.22), 0 0 0 1px rgba(34, 211, 238, 0.08), 0 8px 32px -12px rgba(0, 0, 0, 0.65); } .cin-portfolio-card:hover { border-color: rgba(34, 211, 238, 0.32); box-shadow: inset 0 1px 0 rgba(34, 211, 238, 0.32), 0 0 0 1px rgba(34, 211, 238, 0.12), 0 0 28px -6px rgba(34, 211, 238, 0.24), 0 8px 32px -12px rgba(0, 0, 0, 0.65); } /* ── Wide bento add-on card (lg:col-span-6 / Rush Delivery) ──────────────── */ @media (min-width: 1024px) { .cin-addon-card--wide .relative.flex { flex-direction: row; align-items: center; gap: 2rem; } .cin-addon-card--wide .relative.flex > :first-child { flex: 1 1 0%; } .cin-addon-card--wide .relative.flex > :last-child { flex-shrink: 0; } } /* ── About page pull-quote ────────────────────────────────────────────────── */ .cin-about-pull-quote { position: relative; padding: 1.5rem 1.75rem 1.5rem 2rem; max-width: 72ch; border-radius: 1rem; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 48px -12px rgba(34, 211, 238, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .cin-about-pull-quote > p { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; font-style: normal; line-height: 1.4; color: #F0F0F0; } .cin-about-pull-quote::before { content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0; width: 5px; border-radius: 999px; background: linear-gradient(to bottom, #f43f5e, #22d3ee); } .cin-about-pull-quote::after { content: ''; position: absolute; top: 0; left: 0; width: 55%; height: 55%; border-radius: 1rem 0 40% 0; background: radial-gradient(ellipse at top left, rgba(20, 184, 166, 0.14), transparent 70%); pointer-events: none; } .cin-about-micro-rule { width: 2.5rem; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #f43f5e, #22d3ee); } /* Founder photo frame — bloom + grain visible in stills */ .cin-founder-frame { filter: drop-shadow(0 0 36px rgba(244, 63, 94, 0.38)) drop-shadow(0 0 48px rgba(34, 211, 238, 0.28)); } .cin-founder-photo { border-radius: 1rem; box-shadow: 0 0 72px 16px rgba(244, 63, 94, 0.32), 0 0 96px 20px rgba(34, 211, 238, 0.22); -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 45%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 92% 92% at 50% 45%, #000 62%, transparent 100%); } .cin-founder-grain { opacity: 0.16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cin-service-area-card { border-color: rgba(255, 255, 255, 0.12) !important; border-bottom: 1px solid rgba(34, 211, 238, 0.35) !important; } .cin-service-area-icon { width: 3rem; height: 3rem; border-radius: 0.875rem; background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(34, 211, 238, 0.22)); border: 1px solid rgba(34, 211, 238, 0.35); box-shadow: 0 0 18px rgba(34, 211, 238, 0.35); } /* ── Footer premium polish ────────────────────────────────────────────────── */ .cin-footer { position: relative; background: #020617; } .cin-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.55), rgba(34, 211, 238, 0.55), transparent); pointer-events: none; } .cin-footer-col-label { font-family: "Space Grotesk", Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #22d3ee; } .cin-footer-nav { margin-top: 1rem; list-style: none; padding: 0; } .cin-footer-nav > li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); } /* Logo mark halo glow */ .cin-footer-logo-mark { box-shadow: 0 0 12px -2px rgba(244, 63, 94, 0.45), 0 0 24px -6px rgba(34, 211, 238, 0.35); transition: box-shadow 0.3s ease; } .cin-footer .group:hover .cin-footer-logo-mark { box-shadow: 0 0 20px -2px rgba(244, 63, 94, 0.65), 0 0 36px -6px rgba(34, 211, 238, 0.55); } /* Nav link underline slide-in + tap targets */ .cin-footer-link { position: relative; display: inline-block; font-size: 1rem; line-height: 1.25; padding: 0.75rem 0; color: rgba(255, 255, 255, 0.85); min-height: 44px; } .cin-footer-link::after { content: ''; position: absolute; bottom: 10px; left: 0; width: 0; height: 1px; background: linear-gradient(90deg, #f43f5e, #22d3ee); transition: width 0.25s ease; } .cin-footer-link:hover::after { width: 100%; } .cin-footer-link:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; border-radius: 0.25rem; color: #fff; } /* Icon+label row variant — overrides base display:inline-block for flex-row links (e.g. Manage Billing) */ .cin-footer-link--row { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; } .cin-footer-link--row svg { display: block; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .cin-footer-logo-mark { transition: none; } .cin-footer-link::after { transition: none; } } /* ── Premium scrollbar — always visible on cinematic pages (desktop) ───────── */ @media (hover: hover) and (pointer: fine) { html { scrollbar-width: thin; scrollbar-color: rgba(34, 211, 238, 0.55) rgba(15, 23, 42, 0.6); } html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); } html::-webkit-scrollbar-thumb { border-radius: 9999px; background: linear-gradient(180deg, rgba(244, 63, 94, 0.85), rgba(34, 211, 238, 0.85)); border: 2px solid rgba(15, 23, 42, 0.6); } html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(251, 113, 133, 0.95), rgba(103, 232, 249, 0.95)); } }