/* ══════════════════════════════════════════════════════════════ INTAKE — Interaction Layer CSS-native. No libraries. Every effect earned from first principles. Wraps the existing design system without touching its logic. NOTE: Classes were renamed from zarvo-* to intake-* to make this layer reusable across client deployments (AFC, future forms). The HTML counterparts in index.html and interactions.js must match. Design tokens inherited from style.css: --bg, --surface, --surface-2, --border, --text-hi, --text-mid, --accent, --input-bg ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ 0. SMOOTH SCROLL ══════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } /* Keep native scrolling but hide visible scrollbars everywhere. */ *, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ══════════════════════════════════════════════════════════ 1. CUSTOM CURSOR Dot: instant, follows mouse via CSS custom properties set by JS. Ring: lags behind via rAF lerp in JS, positioned via .style. State classes toggled by JS on . ══════════════════════════════════════════════════════════ */ /* Custom cursor is disabled for AFC: keep native cursor rendering. */ #intake-cursor-host { display: none !important; } /* #cursor-dot and #cursor-ring now live inside a Shadow DOM (#intake-cursor-host). Their styles are injected inline by JS. External CSS cannot reach them. State classes (cursor--input etc.) are read via :host-context() inside shadow DOM. */ /* ══════════════════════════════════════════════════════════ 2. PAGE CURTAIN Full-screen #202020 cover. Slides off via CSS animation. No JS needed — fires on every page load automatically. ══════════════════════════════════════════════════════════ */ #intake-curtain { position: fixed; inset: 0; background: #202020; z-index: 99990; pointer-events: none; animation: curtainLift 0.9s ease 80ms forwards; } @keyframes curtainLift { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } /* ══════════════════════════════════════════════════════════ 3. SCROLL REVEALS JS adds .is-revealed via IntersectionObserver. CSS owns all timing, easing, stagger via --reveal-delay. ══════════════════════════════════════════════════════════ */ .intake-reveal { opacity: 0; transition: opacity 0.35s ease var(--reveal-delay, 0s); } .intake-reveal-label { opacity: 0; transition: opacity 0.28s ease var(--reveal-delay, 0s); } /* Horizontal rules: scaleX 0 → 1 from left */ .intake-reveal-rule { transform-origin: left; transform: scaleX(0); transition: transform 0.45s ease var(--reveal-delay, 0s); } html[dir="rtl"] .intake-reveal-rule { transform-origin: right; } /* Revealed state */ .intake-reveal-label.is-revealed, .intake-reveal.is-revealed { opacity: 1; } .intake-reveal-rule.is-revealed { transform: scaleX(1); } /* ══════════════════════════════════════════════════════════ 4. HERO WORD REVEAL JS splits .hero-title text into .word-wrap > .word-inner. Sets --word-delay inline per span. CSS animates. ══════════════════════════════════════════════════════════ */ .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; margin-bottom: -0.06em; } .word-inner { display: inline-block; transform: translateY(108%); animation: wordSlide 0.7s ease var(--word-delay, 0.55s) forwards; } @keyframes wordSlide { from { transform: translateY(108%); } to { transform: translateY(0); } } /* ══════════════════════════════════════════════════════════ 5. INPUT MICRO-INTERACTIONS :focus-within handles label state — no JS. :not(:placeholder-shown) handles filled blur state — no JS. JS only adds .intake-shake for the empty-blur whisper. FOCUS STYLE CHANGE (v2): moved from a 2px bottom border trick to box-shadow for the accent underline. This keeps the layout stable (box-shadow does not affect document flow) and allows the 1px border to remain, making the focus ring visually distinct without a padding jump. .search-box is excluded to avoid affecting the dashboard search input. ══════════════════════════════════════════════════════════ */ /* Hover: warm bg pull */ input:not(:focus):not([type="checkbox"]):not([type="radio"]):not(.honeypot):hover, select:not(:focus):hover, textarea:not(:focus):hover { background: var(--surface-2) !important; transition: background 0.25s ease !important; } /* AFC override — keep transparent on hover */ .intake-form-root input:not(:focus):not([type="checkbox"]):not([type="radio"]):not(.honeypot):hover, .intake-form-root select:not(:focus):hover, .intake-form-root textarea:not(:focus):hover { background: transparent !important; } /* Focus: 1px accent border + 3px box-shadow underline — no layout shift */ input:not([type="checkbox"]):not([type="radio"]):not(.honeypot):not(.search-box):focus, select:focus, textarea:focus { border: 1px solid var(--accent) !important; border-bottom-width: 1px !important; box-shadow: 0 3px 0 0 var(--accent) !important; outline: 0 !important; padding: 14px 16px !important; background: var(--input-bg) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease !important; } /* AFC override — bottom line only, no box, no shadow (excludes statement textareas) */ .intake-form-root input:not([type="checkbox"]):not([type="radio"]):not(.honeypot):focus, .intake-form-root select:focus, .intake-form-root textarea:not(.intake-qs-textarea):focus { border: none !important; border-bottom: 1px solid var(--text-hi) !important; box-shadow: none !important; padding: 12px 0 !important; background: transparent !important; caret-color: var(--text-hi) !important; } /* AFC — no label tracking change on focus */ .intake-form-root .client-field:focus-within > label { color: inherit !important; letter-spacing: inherit !important; } /* Label: accent + letter-spacing open when any child input is focused */ .client-field:focus-within > label { color: var(--accent) !important; letter-spacing: 0.04em !important; transition: color 0.2s ease, letter-spacing 0.2s ease; } /* q-card label brightens on focus-within */ .q-card:focus-within .q-label, .q-card:focus-within > .q-header .q-label { color: var(--text-hi); transition: color 0.2s ease; } /* Blur + filled: clean handoff — border and shadow reset */ input:not([type="checkbox"]):not([type="radio"]):not(:focus):not(:placeholder-shown):not(.honeypot), textarea:not(:focus):not(:placeholder-shown) { border-color: var(--border) !important; border-width: 1px !important; box-shadow: none !important; } /* AFC override — keep bottom-line-only on blur (excludes statement textareas) */ .intake-form-root input:not([type="checkbox"]):not([type="radio"]):not(:focus):not(:placeholder-shown):not( .honeypot ), .intake-form-root textarea:not(.intake-qs-textarea):not(:focus):not(:placeholder-shown) { border: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } /* Shake — empty blur whisper. JS adds/removes class. */ @keyframes intakeShake { 0% { transform: translateX(0); } 18% { transform: translateX(-3px); } 54% { transform: translateX(3px); } 78% { transform: translateX(-1.5px); } 100% { transform: translateX(0); } } .intake-shake { animation: intakeShake 0.22s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; } /* ══════════════════════════════════════════════════════════ 6. SUBMIT BUTTON — Wipe + text shift + press + loading ══════════════════════════════════════════════════════════ */ .submit-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.15s ease; } /* Keep text above the wipe */ .submit-btn > * { position: relative; z-index: 1; } /* Accent wipe: slides left → right via ::before */ .submit-btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; z-index: 0; } .submit-btn:hover::before { transform: scaleX(1); } /* Override flat style.css hover — wipe provides the color change */ .submit-btn:hover { background: var(--text-hi) !important; border-color: var(--text-hi) !important; color: var(--bg) !important; } /* Text inner wrapper — shifts right on hover */ .intake-btn-inner { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 1; transition: transform 0.3s ease; } .submit-btn:hover .intake-btn-inner { transform: translateX(3px); } /* Click press */ .submit-btn:active { transform: scale(0.97) !important; } /* Loading: em-dash trio, sequential blink */ .submit-btn[data-loading="true"] { pointer-events: none; } .intake-loading-dashes { display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 1; } .intake-loading-dashes .d { display: inline-block; opacity: 0.2; animation: dashBlink 0.9s ease-in-out infinite; font-weight: 900; } .intake-loading-dashes .d:first-child { animation-delay: 0s; } .intake-loading-dashes .d:nth-child(2) { animation-delay: 0.2s; } .intake-loading-dashes .d:nth-child(3) { animation-delay: 0.4s; } @keyframes dashBlink { 0%, 100% { opacity: 0.2; } 45% { opacity: 1; } } /* ══════════════════════════════════════════════════════════ 7. SUCCESS STATE Horizontal rule draws across. Type rises below. JS adds .is-visible then .is-revealed in sequence. ══════════════════════════════════════════════════════════ */ #intake-success { position: fixed; inset: 0; z-index: 8900; background: var(--bg); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } #intake-success.is-visible { opacity: 1; pointer-events: all; } .intake-success-rule { position: absolute; top: 50%; left: 0; height: 1px; width: 0; background: var(--text-hi); transition: width 0.8s ease 0.15s; } #intake-success.is-revealed .intake-success-rule { width: 100%; } .intake-success-copy { position: relative; z-index: 2; text-align: center; padding: 0 var(--sp4, 32px); } .intake-success-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s; } .intake-success-headline { display: block; font-family: "Mona Sans", Norsal, sans-serif; font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; color: var(--text-hi); line-height: 0.9; font-stretch: 125%; font-variation-settings: "opsz" 100, "wdth" 125; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease 0.85s, transform 0.7s ease 0.85s; } #intake-success.is-revealed .intake-success-eyebrow, #intake-success.is-revealed .intake-success-headline { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════ 8. SWISS ELEVATION — depth without shadows Extra bottom padding grounds the q-card visually. 2px focused vs 1px default = depth system. ══════════════════════════════════════════════════════════ */ .q-card { padding-bottom: calc(var(--sp3, 24px) + 16px); } /* ══════════════════════════════════════════════════════════ 9. CHROME REVEALS Header and stepper: CSS animation on load. Footer: via IntersectionObserver in JS. ══════════════════════════════════════════════════════════ */ .site-header, .legal-header { animation: chromeFadeIn 0.6s ease 0.65s both; } .page-stepper { animation: chromeFadeIn 0.5s ease 0.75s both; } @keyframes chromeFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════ 10. FORM PAGE TRANSITIONS Slight directional slide when wizard advances or goes back. ══════════════════════════════════════════════════════════ */ .form-page { display: none; } .form-page.active { display: block; animation: pageIn 0.18s ease both; } .form-page.slide-back.active { animation: pageInBack 0.18s ease both; } @keyframes pageIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes pageInBack { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } /* ══════════════════════════════════════════════════════════ 11. MICRO-UPGRADES — existing elements Small, invisible improvements that compound the quality. ══════════════════════════════════════════════════════════ */ /* Checkbox / radio: spring on check */ .check-label input[type="checkbox"], .check-label input[type="radio"] { transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .check-label input[type="checkbox"]:checked, .check-label input[type="radio"]:checked { transform: scale(1.08); } /* Step number spring */ .step-num { transition: background 0.3s ease, border-color 0.3s ease, color 0.2s ease, transform 0.3s ease; } /* Wizard nav buttons: press */ .wizard-btn { transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease; } .wizard-btn:active { transform: scale(0.97); } /* Social link lift */ .footer-social-link { transition: color 0.18s ease, transform 0.2s ease; } .footer-social-link:hover { transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════ 12. DASHBOARD + LEGAL REVEALS Same IntersectionObserver pattern. Lighter stagger. ══════════════════════════════════════════════════════════ */ .login-card, .submission-list-item, .stat-card, .legal-content > * { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease var(--reveal-delay, 0s), transform 0.5s ease var(--reveal-delay, 0s); } .login-card.is-revealed, .submission-list-item.is-revealed, .stat-card.is-revealed, .legal-content > *.is-revealed { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════ 13. PREFERS-REDUCED-MOTION All motion collapses to instant. Form remains fully usable. ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; animation-delay: 0s !important; } /* Hide the shadow host — this hides the cursor ring inside it */ #intake-cursor-host, #intake-curtain { display: none !important; } /* Restore system cursor — cursor: none is gated on .has-custom-cursor (JS never adds that class when REDUCED is true) but this is a belt- and-suspenders fallback in case the class somehow leaks through. */ *, *::before, *::after { cursor: auto !important; } .word-inner { transform: none !important; animation: none !important; } .intake-reveal, .intake-reveal-label, .intake-reveal-rule, .login-card, .submission-list-item, .stat-card, .legal-content > * { opacity: 1 !important; transform: none !important; transition: none !important; } .site-header, .legal-header, .page-stepper { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ══════════════════════════════════════════════════════════ 14. TOUCH DEVICES JS adds .is-touch-device to . Restores system cursor. ══════════════════════════════════════════════════════════ */ html.is-touch-device *, html.is-touch-device *::before, html.is-touch-device *::after { cursor: auto !important; } html.is-touch-device #intake-cursor-host { display: none !important; } /* ── Dark mode contrast corrections ── */ /* Label on focus: use bright near-white instead of lime for better contrast */ [data-theme="dark"] .client-field:focus-within > label { color: var(--text-hi) !important; } /* Hover bg on inputs: use surface-2 which is dark enough in dark mode */ [data-theme="dark"] input:not(:focus):not([type="checkbox"]):not([type="radio"]):not(.honeypot):hover, [data-theme="dark"] select:not(:focus):hover, [data-theme="dark"] textarea:not(:focus):hover { background: var(--surface-2) !important; }