/* ============================================================ ConvaIQ — website styles Design tokens, base element styles, animation keyframes, and the small set of hover/interactive utility classes that back the hand-authored inline layout in index.html. ============================================================ */ /* Fonts are loaded via tags in each page's (faster than a CSS @import, which serializes the font-CSS fetch behind this file). */ /* ---------- Design tokens ---------- */ :root { /* Base palette */ --blue-600: #2563EB; --blue-700: #1D4FD7; --blue-100: #DBEAFE; --blue-50: #EFF5FF; --teal-500: #14B8A6; --teal-600: #0FA292; --teal-700: #0B7C70; /* darkest teal — passes WCAG AA for small text on white */ --teal-100: #CCF3EE; --navy-900: #0B1633; --slate-100: #E9EEF5; --white: #FFFFFF; /* Derived neutrals */ --ink-1: #0B1633; --ink-2: #3A465F; --ink-3: #616C88; /* darkened from #6B7590 for WCAG AA contrast on tinted surfaces */ --ink-4: #9AA3B8; --line-1: #D7DEE9; --line-2: #E9EEF5; /* Semantic — text */ --text-heading: var(--navy-900); --text-body: var(--ink-2); --text-muted: var(--ink-3); --text-on-brand: var(--white); --wordmark-ink: var(--navy-900); /* brand board: "Conva" in Midnight Navy, "IQ" in Electric Blue */ --text-link: var(--blue-600); /* Semantic — surfaces */ --surface-page: var(--white); --surface-subtle: #F4F7FB; --surface-card: var(--white); --surface-inset: var(--slate-100); --surface-brand: var(--blue-600); --surface-accent: var(--teal-500); --surface-ink: var(--navy-900); /* Semantic — interactive */ --action-primary: var(--blue-600); --action-primary-hover: var(--blue-700); --action-accent: var(--teal-500); --action-accent-hover: var(--teal-600); --focus-ring: rgba(37, 99, 235, 0.35); /* Semantic — status */ --status-success: var(--teal-500); --status-info: var(--blue-600); --status-warning: #D97706; --status-danger: #DC2626; /* Typography */ --font-display: 'Sora', 'Inter', system-ui, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --tracking-tight: -0.02em; --tracking-caps: 0.08em; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Shadows */ --shadow-card: 0 1px 2px rgba(11, 22, 51, 0.05), 0 4px 16px rgba(11, 22, 51, 0.06); --shadow-raised: 0 8px 30px rgba(11, 22, 51, 0.12); --shadow-overlay: 0 16px 48px rgba(11, 22, 51, 0.18); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 200ms; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } * { box-sizing: border-box; } body { margin: 0; background: var(--surface-page); font-family: var(--font-ui); color: var(--text-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } a { color: var(--text-link); text-decoration: none; } a:hover { color: var(--action-primary-hover); } button { font-family: inherit; } /* ---------- Brand assets ---------- */ .brand-link { display: flex; align-items: center; text-decoration: none; } .brand-logo { display: block; height: auto; } .brand-logo-nav { width: 178px; } .brand-logo-footer { width: 230px; max-width: 100%; } .brand-logo-legal { width: 190px; } /* ---------- Keyframes ---------- */ @keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } } @keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes spinSlow { to { transform: rotate(360deg); } } @keyframes marqueeX { to { transform: translateX(-50%); } } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes dotPulse { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @keyframes slot1 { 0%, 3% { opacity: 0; transform: translateY(10px) scale(0.97); } 5.5%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } } @keyframes slot2 { 0%, 13% { opacity: 0; transform: translateY(10px) scale(0.97); } 15.5%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } } @keyframes slot3 { 0%, 18% { opacity: 0; transform: translateY(8px); } 19.5%, 26.5% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: none; } } @keyframes slot4 { 0%, 28.5% { opacity: 0; transform: translateY(10px) scale(0.97); } 31%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } } @keyframes slot5 { 0%, 44% { opacity: 0; transform: translateY(10px) scale(0.97); } 46.5%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } } @keyframes slot6 { 0%, 56% { opacity: 0; transform: translateY(10px) scale(0.97); } 58.5%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } } @keyframes slot7 { 0%, 68% { opacity: 0; transform: translateY(8px) scale(0.9); } 70.5%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } } @keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes lang1 { 0% { opacity: 0; transform: translateY(14px); } 2%, 18% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(-14px); } } @keyframes lang2 { 0%, 20% { opacity: 0; transform: translateY(14px); } 22%, 38% { opacity: 1; transform: none; } 42%, 100% { opacity: 0; transform: translateY(-14px); } } @keyframes lang3 { 0%, 40% { opacity: 0; transform: translateY(14px); } 42%, 58% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(-14px); } } @keyframes lang4 { 0%, 60% { opacity: 0; transform: translateY(14px); } 62%, 78% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-14px); } } @keyframes lang5 { 0%, 80% { opacity: 0; transform: translateY(14px); } 82%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); } } /* ---------- Scroll-reveal ---------- */ /* Native scroll-driven timelines where supported; JS adds .in-view as a fallback for browsers without animation-timeline. */ .reveal { animation: rise 1ms var(--ease-out) both; animation-timeline: view(); } @supports not (animation-timeline: view()) { .reveal { animation: none; opacity: 0; transform: translateY(38px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.in-view { opacity: 1; transform: none; } } /* Bar-chart grow: native timeline, else grow when parent scrolls in */ .bar { transform-origin: bottom; animation: growUp 1ms var(--ease-out) both; animation-timeline: view(); } @supports not (animation-timeline: view()) { .bar { animation: none; transform: scaleY(0); transition: transform 0.8s var(--ease-out); } .in-view .bar { transform: scaleY(1); } } /* ---------- Hover / interactive utility classes ---------- */ .nav-link:hover { color: var(--blue-600); text-decoration: none; } .btn-ghost { transition: background 0.15s var(--ease-out); } .btn-ghost:hover { background: var(--surface-subtle); text-decoration: none; color: var(--action-primary); } .btn-primary { transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out); } .btn-primary:hover { background: var(--action-primary-hover); text-decoration: none; color: #fff; transform: translateY(-1px); } .btn-primary-lg { transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out); } .btn-primary-lg:hover { background: var(--action-primary-hover); text-decoration: none; color: #fff; transform: translateY(-2px); } .btn-white { transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out); } .btn-white:hover { background: var(--blue-50); text-decoration: none; color: var(--action-primary); transform: translateY(-2px); } .channel-card { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out); } .channel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-raised); border-color: var(--blue-100); background: var(--surface-card); } .lift-card { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .lift-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-raised); } .faq-card { transition: box-shadow 0.2s var(--ease-out); } .faq-card:hover { box-shadow: var(--shadow-card); } .link-hover { transition: color 0.15s var(--ease-out); } .link-hover:hover { color: var(--action-primary-hover); text-decoration: none; } .footer-link:hover { color: var(--blue-600); text-decoration: none; } /* ---------- FAQ accordion ---------- */ .faq-rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-out); } .faq-card.open .faq-rows { grid-template-rows: 1fr; } .faq-chip { transform: rotate(0deg); background: var(--blue-50); color: var(--blue-600); transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out); } .faq-card.open .faq-chip { transform: rotate(180deg); background: var(--blue-600); color: #fff; } /* ---------- Range inputs ---------- */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--line-2); outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid currentColor; box-shadow: var(--shadow-card); cursor: pointer; margin-top: -1px; } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid currentColor; box-shadow: var(--shadow-card); cursor: pointer; } #leadsRange { color: var(--blue-600); } #valueRange { color: var(--teal-500); } /* ---------- Anchor offset under sticky nav ---------- */ section[id], header[id] { scroll-margin-top: 84px; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy-900); color: #fff; font: 600 14px var(--font-ui); padding: 12px 20px; border-radius: 0 0 12px 0; } .skip-link:focus { left: 0; color: #fff; } /* ---------- Focus visibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ---------- Mobile nav (hidden on desktop) ---------- */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--line-1); border-radius: 12px; cursor: pointer; } .nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink-1); transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow-raised); padding: 10px 24px 20px; } .nav-menu.open { display: flex; } .nav-menu a { font: 500 16px var(--font-ui); color: var(--ink-1); padding: 13px 4px; border-bottom: 1px solid var(--line-2); } .nav-menu a:last-child { border-bottom: none; } .nav-menu .nav-menu-cta { margin-top: 12px; text-align: center; color: #fff; background: var(--action-primary); border-radius: 999px; padding: 13px 22px; font-weight: 600; } .nav-menu .nav-menu-cta:hover { background: var(--action-primary-hover); color: #fff; } /* ---------- Lead capture modal ---------- */ .lead-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(11, 22, 51, 0.55); backdrop-filter: blur(4px); padding: 24px; overflow-y: auto; } .lead-overlay[hidden] { display: none; } .lead-dialog { width: 100%; max-width: 560px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface-card); border-radius: 24px; box-shadow: var(--shadow-overlay); overflow: hidden; animation: heroIn 0.35s var(--ease-out) both; } .lead-head { display: flex; align-items: center; gap: 14px; flex-shrink: 0; padding: 18px 22px; background: var(--surface-ink); } .lead-head h3 { font: 700 18px var(--font-display); color: #fff; margin: 0; letter-spacing: var(--tracking-tight); } .lead-head p { font: 400 12px var(--font-ui); color: rgba(255,255,255,0.6); margin: 3px 0 0; } .lead-close { margin-left: auto; width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: none; border-radius: 50%; color: rgba(255,255,255,0.8); cursor: pointer; transition: background 0.15s var(--ease-out); } .lead-close:hover { background: rgba(255,255,255,0.16); color: #fff; } .lead-body { padding: 24px 26px 26px; overflow-y: auto; } .lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lead-span2 { grid-column: span 2; } .lead-field span { display: block; font: 600 12.5px var(--font-ui); color: var(--ink-2); margin-bottom: 6px; } .lead-field em { font-style: normal; font-weight: 400; color: var(--ink-4); } .lead-field input, .lead-field select, .lead-field textarea { width: 100%; box-sizing: border-box; font: 400 14.5px var(--font-ui); color: var(--ink-1); background: var(--surface-page); border: 1px solid var(--line-1); border-radius: 12px; padding: 12px 14px; transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); } .lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--focus-ring); } .lead-field input::placeholder, .lead-field textarea::placeholder { color: var(--ink-4); } .lead-field textarea { resize: vertical; min-height: 76px; } .lead-field.invalid input { border-color: var(--status-danger); } .lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Turnstile container — takes up no space until the widget renders into it. */ .lead-turnstile { margin-top: 14px; } .lead-turnstile:empty { display: none; margin: 0; } .lead-error { font: 500 13.5px/1.5 var(--font-ui); color: var(--status-danger); background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px; padding: 11px 14px; margin: 14px 0 0; } .lead-error a { color: var(--status-danger); text-decoration: underline; } .lead-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 52px; margin-top: 18px; font: 600 16px var(--font-ui); color: #fff; background: var(--action-primary); border: none; border-radius: 999px; cursor: pointer; transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out); } .lead-submit:hover { background: var(--action-primary-hover); transform: translateY(-1px); } .lead-submit:disabled { opacity: 0.65; cursor: wait; transform: none; } .lead-fineprint { font: 400 12px var(--font-ui); color: var(--ink-3); text-align: center; margin: 12px 0 0; } .lead-success { text-align: center; padding: 26px 10px 12px; } .lead-success-icon { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; background: var(--teal-100); color: var(--teal-600); display: flex; align-items: center; justify-content: center; } .lead-success h3 { font: 700 24px var(--font-display); color: var(--text-heading); margin: 18px 0 0; letter-spacing: var(--tracking-tight); } .lead-success p { font: 400 15px/1.6 var(--font-ui); color: var(--text-body); margin: 10px auto 0; max-width: 340px; } .lead-done { margin-top: 22px; height: 46px; padding: 0 34px; font: 600 15px var(--font-ui); color: var(--action-primary); background: var(--surface-page); border: 1px solid var(--line-1); border-radius: 999px; cursor: pointer; transition: background 0.15s var(--ease-out); } .lead-done:hover { background: var(--surface-subtle); } .lead-embed iframe { width: 100%; min-height: 600px; border: none; border-radius: 12px; } body.lead-open { overflow: hidden; } /* The GHL chat widget paints above the modal overlay, so suppress its bubble while the demo form is open — otherwise two lead CTAs compete on screen. */ body.lead-open chat-widget { visibility: hidden; pointer-events: none; } /* ---------- Legal pages ---------- */ .legal-page { min-height: 100vh; background: var(--surface-subtle); color: var(--text-body); } .legal-nav { background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--line-2); } .legal-nav-inner { max-width: 900px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .legal-brand { display: flex; align-items: center; gap: 10px; color: var(--wordmark-ink); font: 700 20px var(--font-display); letter-spacing: var(--tracking-tight); } .legal-brand img { display: block; } .legal-home { font: 600 14px var(--font-ui); color: var(--action-primary); } .legal-content { max-width: 900px; margin: 0 auto; padding: 64px 24px 80px; } .legal-card { background: var(--surface-card); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-card); padding: 44px; } .legal-card h1 { font: 800 40px/1.15 var(--font-display); margin: 0; } .legal-updated { margin: 10px 0 0; font: 400 14px var(--font-ui); color: var(--text-muted); } .legal-card h2 { margin: 34px 0 10px; font: 700 19px/1.3 var(--font-display); } .legal-card p, .legal-card li { font: 400 15.5px/1.7 var(--font-ui); } .legal-card ul { margin: 10px 0 0; padding-left: 22px; } .legal-note { margin-top: 32px; padding: 14px 16px; border-radius: 12px; background: var(--blue-50); color: var(--ink-2); font: 500 14px/1.6 var(--font-ui); } @media (max-width: 640px) { .lead-grid { grid-template-columns: 1fr; } .lead-span2 { grid-column: span 1; } /* leave a real tappable backdrop strip above the sheet */ .lead-overlay { padding: 56px 12px 12px; align-items: flex-end; } .lead-dialog { max-height: calc(100vh - 68px); border-radius: 20px 20px 12px 12px; } .lead-head { gap: 10px; padding: 16px 14px; } .lead-head h3 { font-size: 16px; } .lead-close { width: 44px; height: 44px; } .legal-nav-inner { padding: 16px 18px; } .legal-content { padding: 32px 18px 56px; } .legal-card { padding: 28px 22px; border-radius: 14px; } .legal-card h1 { font-size: 30px; } } /* Short announcement copy is mobile-only (see responsive.css) */ .announce-short { display: none; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .bar { transform: scaleY(1) !important; } /* The chat-loop keyframes end at opacity:0 — show the conversation statically instead (typing dots are hidden; they look odd frozen). */ [style*="animation:slot"] { animation: none !important; opacity: 1 !important; transform: none !important; } [style*="animation:slot3"] { display: none !important; } /* Language rotator: pin the first word instead of stacking all five. */ .lang-word { animation: none !important; opacity: 0 !important; } .lang-rotator .lang-word:first-child { opacity: 1 !important; transform: none !important; } } /* Demo-modal SMS consent row */ .lead-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: 13px; color: var(--text-muted, #6b7280); cursor: pointer; } .lead-consent input { margin-top: 2px; accent-color: var(--blue-600, #2563EB); }