/* Marketing site — matches the existing voca-voca landing page structure. Scoped under .vv-mkt */ html, body { margin: 0; padding: 0; } /* ============ Platform-aware CTAs ============ gets is-desktop / is-mobile / is-ios / is-android / is-instagram from the platform-detection script in . CTAs ship as paired elements (.vv-cta-chrome for the Web Store, .vv-cta-ios for the waitlist modal). The non-active one is display:none. */ .vv-cta-ios { display: none !important; } .vv-cta-chrome { /* default visible */ } html.is-mobile .vv-cta-chrome { display: none !important; } html.is-mobile .vv-cta-ios { display: inline-flex !important; } /* Helper text under mobile CTA */ .vv-cta-helper { font-size: 13px; color: var(--gray-500); margin: 10px 0 0; } .vv-mkt { font-family: var(--font-sans); color: var(--gray-900); background: #fff; line-height: 1.5; font-size: calc(1rem * var(--font-scale, 1)); margin: 0; } .vv-mkt * { box-sizing: border-box; } .vv-mkt img { max-width: 100%; display: block; } .vv-mkt button { font-family: inherit; cursor: pointer; } .vv-container { max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* ============ NAV ============ */ .vv-nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(229,231,235,0.6); } .vv-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .vv-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .vv-nav-logo:hover, .vv-nav-logo:focus, .vv-nav-logo:active { text-decoration: none; } .vv-nav-logo:hover .wm { text-decoration: none; } .vv-nav-logo img { width: 30px; height: 30px; border-radius: 7px; } .vv-nav-logo .wm { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1; color: var(--gray-900); display: inline-flex; align-items: center; gap: 2px; } .vv-nav-logo .wm .pip { display: inline-block; width: 11px; height: 5px; background: var(--pip-color, #f59e0b); border-radius: 1px; transform: translateY(-1px); } .vv-nav-links { display: flex; gap: 28px; align-items: center; } .vv-nav-links a:not(.btn) { color: var(--gray-700); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 150ms; } .vv-nav-links a:not(.btn):hover { color: var(--gray-900); } /* ============ BUTTONS — the headline fix ============ */ .btn { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 22px; border-radius: 10px; border: 0; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: all 150ms cubic-bezier(.2,.7,.2,1); white-space: nowrap; } /* Bullet-proof color on every anchor state — browsers default-style :visited/:active otherwise */ .btn-primary, .btn-primary:link, .btn-primary:visited, .btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: #fff; text-decoration: none; } .btn-primary { background: var(--brand-primary, var(--indigo-600)); box-shadow: 0 1px 2px rgba(79,70,229,0.15); } .btn-primary:hover { background: color-mix(in srgb, var(--brand-primary, var(--indigo-600)) 85%, #000); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(79,70,229,0.28); } .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(79,70,229,0.15); } .btn-on-indigo, .btn-on-indigo:link, .btn-on-indigo:visited, .btn-on-indigo:hover, .btn-on-indigo:active, .btn-on-indigo:focus { color: var(--indigo-600); text-decoration: none; } .btn-on-indigo { background: #fff; } .btn-on-indigo:hover { background: var(--gray-50); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); } .btn-sm { font-size: 13px; padding: 9px 16px; border-radius: 8px; } .btn-lg { font-size: 16px; padding: 16px 28px; border-radius: 12px; } /* ============ HERO ============ */ .vv-hero { padding: 88px 0 104px; text-align: center; /* Grid lines layered over the indigo→amber wash — restores the squared architectural feel from the design preview's data-pattern="grid". */ background-image: linear-gradient(rgba(79, 70, 229, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, 0.07) 1px, transparent 1px), linear-gradient(135deg, #eef0ff 0%, #f9fafb 55%, #fef3c7 100%); background-size: 32px 32px, 32px 32px, 100% 100%; background-repeat: repeat, repeat, no-repeat; position: relative; overflow: hidden; } .vv-hero[data-bg="plain"] { background: #fff; } .vv-hero[data-bg="plain"]::before, .vv-hero[data-bg="plain"]::after { display: none; } .vv-hero[data-bg="indigo"] { background: linear-gradient(135deg, var(--indigo-600), var(--indigo-700)); color: #fff; } .vv-hero[data-bg="indigo"] h1, .vv-hero[data-bg="indigo"] h1 .lit { color: #fff; } .vv-hero[data-bg="indigo"] .sub { color: rgba(255,255,255,0.88); } .vv-hero[data-bg="indigo"] .vv-hero-pill { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.30); } .vv-hero[data-bg="indigo"] .btn-primary { background: #fff; } .vv-hero[data-bg="indigo"] .btn-primary, .vv-hero[data-bg="indigo"] .btn-primary:link, .vv-hero[data-bg="indigo"] .btn-primary:visited, .vv-hero[data-bg="indigo"] .btn-primary:hover, .vv-hero[data-bg="indigo"] .btn-primary:active { color: var(--indigo-700); } .vv-hero[data-bg="indigo"] .btn-primary:hover { background: var(--gray-50); } .vv-hero[data-pill="off"] .vv-hero-pill { display: none; } .vv-hero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(252, 211, 77, 0.32), transparent 62%); pointer-events: none; } .vv-hero::after { content: ""; position: absolute; left: -100px; bottom: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(99, 102, 241, 0.10), transparent 65%); pointer-events: none; } .vv-hero > * { position: relative; z-index: 1; } .vv-hero-pill { display: inline-block; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--indigo-700); background: rgba(238, 240, 255, 0.7); border: 1px solid rgba(99, 102, 241, 0.18); padding: 7px 16px; border-radius: 999px; margin-bottom: 28px; backdrop-filter: blur(8px); } .vv-hero h1 { font-family: var(--font-sans); font-size: clamp(48px, 6.5vw, 84px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 24px; color: var(--indigo-900); } .vv-hero h1 .line { display: block; opacity: 0; transform: translateY(14px); animation: vv-hero-line 700ms cubic-bezier(.2,.7,.2,1) forwards; } .vv-hero h1 .line-1 { animation-delay: 80ms; } .vv-hero h1 .line-2 { animation-delay: 340ms; } .vv-hero h1 .pip { display: inline-block; width: 0.18em; height: 0.18em; background: var(--pip-color, #f59e0b); border-radius: 0.05em; vertical-align: baseline; margin-left: 0.05em; opacity: 0; transform: scale(0.4); animation: vv-hero-pip 420ms cubic-bezier(.34,1.56,.64,1) 760ms forwards; } @keyframes vv-hero-line { to { opacity: 1; transform: translateY(0); } } @keyframes vv-hero-pip { to { opacity: 1; transform: scale(1); } } .vv-hero-pill, .vv-hero .sub, .vv-hero .cta { opacity: 0; animation: vv-hero-fade 600ms cubic-bezier(.2,.7,.2,1) forwards; } .vv-hero-pill { animation-delay: 0ms; } .vv-hero .sub { animation-delay: 900ms; } .vv-hero .cta { animation-delay: 1060ms; } @keyframes vv-hero-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .vv-hero h1 .line, .vv-hero h1 .pip, .vv-hero-pill, .vv-hero .sub, .vv-hero .cta { animation: none; opacity: 1; transform: none; } } .vv-hero h1 .lit { font-family: var(--font-sans); font-style: normal; font-weight: 800; color: var(--indigo-600); letter-spacing: -0.035em; } .vv-hero .sub { font-family: var(--font-sans); font-size: 19px; font-weight: 400; line-height: 1.55; color: var(--gray-700); max-width: 580px; margin: 0 auto 36px; } .vv-hero .cta { display: inline-flex; } /* ============ HIGHLIGHT ANY WORD ============ */ .vv-band { background: var(--gray-50); padding: 96px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); } .vv-section-head { text-align: center; margin-bottom: 56px; } .vv-section-head h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 14px; color: var(--gray-900); } .vv-section-head p { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 17px; color: var(--gray-600); margin: 0; } /* Showcase images replacing the old constructed mocks */ .vv-showcase { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06); overflow: hidden; } .vv-showcase img { display: block; width: 100%; height: auto; } .vv-demo-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 24px; align-items: center; max-width: 920px; margin: 0 auto; } .vv-demo-arrow { display: flex; align-items: center; justify-content: center; color: var(--indigo-500); } /* Mock article (left side) */ .vv-mock-article { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 28px; box-shadow: 0 8px 24px rgba(17,24,39,0.06); position: relative; min-height: 280px; font-family: var(--font-serif); font-size: 15px; line-height: 1.7; color: var(--gray-700); overflow: hidden; } .vv-mock-article .word-mark { background: #fde68a; padding: 1px 4px; border-radius: 3px; color: var(--gray-900); position: relative; } /* fake browser context menu */ .vv-mock-menu { position: absolute; top: 38px; left: 110px; width: 240px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: 0 16px 36px rgba(17,24,39,0.18), 0 4px 8px rgba(17,24,39,0.10); padding: 6px 0; font-family: var(--font-sans); font-size: 13px; color: var(--gray-800); line-height: 1.2; } .vv-mock-menu .item { padding: 7px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vv-mock-menu .item.hl { background: var(--indigo-600); color: #fff; font-weight: 600; } .vv-mock-menu .item.hl::before { content: ""; display: inline-block; width: 14px; height: 14px; background: url("assets/logo-mark-on-indigo.svg") center/cover; border-radius: 3px; margin-right: 4px; } .vv-mock-menu hr { border: 0; border-top: 1px solid var(--gray-100); margin: 4px 0; } .vv-mock-menu .item .chev { color: var(--gray-400); } .vv-mock-menu .item.muted { color: var(--gray-500); } /* Side-panel mock (right side) */ .vv-mock-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; box-shadow: 0 8px 24px rgba(17,24,39,0.06); overflow: hidden; min-height: 280px; } .vv-mock-panel .head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--gray-100); } .vv-mock-panel .head h3 { margin: 0; font-size: 16px; font-weight: 700; } .vv-mock-panel .head .ic { display: flex; gap: 10px; color: var(--gray-400); } .vv-mock-panel .tabs { display: flex; border-bottom: 1px solid var(--gray-200); } .vv-mock-panel .tabs .t { flex: 1; padding: 11px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -1px; } .vv-mock-panel .tabs .t.active { color: var(--indigo-600); border-color: var(--indigo-600); } .vv-mock-panel .body { padding: 16px 18px; } .vv-mock-panel .word { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .vv-mock-panel .pron { font-family: var(--font-serif); font-style: italic; color: var(--gray-500); font-size: 13px; margin-top: 2px; display: flex; align-items: center; gap: 6px; } .vv-mock-panel .def-card { background: var(--gray-50); border-left: 3px solid var(--indigo-600); border-radius: 4px 8px 8px 4px; padding: 10px 14px; margin-top: 12px; } .vv-mock-panel .pos { display: inline-block; font-size: 11px; font-weight: 700; background: var(--indigo-600); color: #fff; padding: 2px 8px; border-radius: 999px; } .vv-mock-panel .def-text { font-family: var(--font-serif); font-size: 14px; color: var(--gray-800); line-height: 1.5; margin-top: 6px; } .vv-mock-panel .ctx-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin-top: 14px; } .vv-mock-panel .ctx { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 12px; font-family: var(--font-serif); font-size: 13px; line-height: 1.55; color: var(--gray-700); margin-top: 6px; } .vv-mock-panel .ctx mark { background: #fde68a; color: var(--gray-900); padding: 0 2px; border-radius: 2px; } .vv-mock-panel .src { font-size: 11px; color: var(--gray-400); margin-top: 4px; } .vv-mock-panel .add { display: inline-block; background: var(--indigo-600); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-top: 12px; } /* ============ FEATURE GRID ============ */ .vv-section { padding: 96px 0; } .vv-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; margin: 0 auto; } .vv-feat { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 16px; padding: 26px; transition: all 200ms cubic-bezier(.2,.7,.2,1); position: relative; overflow: hidden; } .vv-feat:hover { background: #fff; border-color: var(--gray-200); box-shadow: 0 12px 32px rgba(17,24,39,0.06); transform: translateY(-2px); } .vv-feat .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--indigo-100); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .vv-feat h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; color: var(--gray-900); } .vv-feat p { font-size: 14px; line-height: 1.6; color: var(--gray-600); margin: 0; } .vv-feat .gamepad { position: absolute; bottom: -10px; right: -20px; width: 120px; height: 80px; opacity: 0.95; } /* ============ 5 MINUTES ============ */ .vv-five { background: #fff; padding: 96px 0 16px; } /* tight handoff to .vv-takeit — was 48 */ .vv-five .vv-section-head p { max-width: 580px; margin: 0 auto; } .vv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto 32px; } .vv-step { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; padding: 24px; } .vv-step .pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-700); margin-bottom: 14px; } .vv-step h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; } .vv-step p { font-size: 14px; line-height: 1.6; color: var(--gray-600); margin: 0; } .vv-science { font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--gray-600); text-align: center; max-width: 740px; margin: 0 auto; } .vv-science a { color: var(--indigo-600); text-decoration: underline; text-decoration-color: var(--indigo-200); text-underline-offset: 3px; } /* ============ TAKE WITH YOU ============ */ .vv-takeit { background: #fff; /* Tighter top and bottom — phone section was floating in too much whitespace between the science line above and the indigo CTA band below. */ padding: 16px 0 var(--takeit-pad, 32px); position: relative; overflow: hidden; } .vv-takeit[data-bullets="off"] .vv-takeit-bullets { display: none; } .vv-takeit[data-bg="glow"]::before { content: ""; position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 520px; height: 520px; background: radial-gradient(circle, rgba(99, 102, 241, 0.10), transparent 65%); pointer-events: none; } .vv-takeit[data-bg="amber"]::before { content: ""; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 520px; height: 520px; background: radial-gradient(circle, rgba(252, 211, 77, 0.20), transparent 65%); pointer-events: none; } .vv-takeit[data-bg="tinted"] { background: linear-gradient(135deg, #eef0ff 0%, #f9fafb 60%, #fef3c7 100%); } .vv-takeit-inner { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; max-width: 1040px; margin: 0 auto; position: relative; z-index: 1; } .vv-takeit[data-layout="text-right"] .vv-takeit-inner { grid-template-columns: auto 1fr; } .vv-takeit[data-layout="text-right"] .vv-takeit-inner .vv-takeit-text { order: 2; } .vv-takeit[data-layout="text-right"] .vv-takeit-inner .vv-phone-wrap { order: 1; } .vv-takeit h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 16px; color: var(--gray-900); } .vv-takeit-text > p { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 17px; color: var(--gray-700); line-height: 1.55; margin: 0; max-width: 460px; } .vv-takeit-bullets { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; } .vv-takeit-bullets li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--gray-800); } .vv-takeit-bullets .ic { width: 24px; height: 24px; border-radius: 7px; background: var(--indigo-50); color: var(--indigo-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Proportional phone — full pre-rendered mockup (hand + iPhone + screen) */ .vv-phone-wrap { position: relative; width: calc(var(--phone-w, 260px) * 2.2); /* mockup is wider than just-the-phone, so account; 30% bigger than original 1.7 */ flex-shrink: 0; display: flex; justify-content: flex-end; /* anchor right within the grid cell */ } /* Desktop: bleed the phone aggressively past the right viewport edge so the hand truly reaches in from off-screen rather than floating mid-page. The calc puts the phone's right edge ~100px past the viewport right; clamp() keeps it sane on narrow desktops. */ .vv-takeit .vv-phone-wrap { margin-right: clamp(-400px, calc(420px - 50vw), 0px); } /* Soft-fade the bottom of the mockup so the wrist dissolves into the page instead of terminating in a hard cutoff. Only the bottom ~18% fades — the iPhone itself stays fully opaque. This is the design fix for the "hand coming out of the air" problem: hard cutoffs read as a cropping accident; a feathered edge reads as intentional vignetting. */ .vv-takeit .vv-phone-mockup { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); } .vv-phone-mockup { display: block; width: 100%; height: auto; user-select: none; transform: rotate(var(--phone-tilt, 0deg)); transition: transform 250ms cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 calc(28px * var(--phone-shadow-strength, 1)) calc(36px * var(--phone-shadow-strength, 1)) rgba(17, 24, 39, calc(0.16 * var(--phone-shadow-strength, 1)))) drop-shadow(0 calc(8px * var(--phone-shadow-strength, 1)) calc(14px * var(--phone-shadow-strength, 1)) rgba(17, 24, 39, calc(0.10 * var(--phone-shadow-strength, 1)))); } /* ============ FINAL CTA ============ */ .vv-cta-band { background: var(--brand-primary, var(--indigo-600)); padding: 80px 0; text-align: center; color: #fff; } .vv-cta-band h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 14px; color: #fff; } .vv-cta-band p { font-family: var(--font-sans); font-style: normal; font-weight: 400; font-size: 17px; color: rgba(255,255,255,0.85); margin: 0 0 28px; } /* ============ FOOTER ============ */ .vv-footer { background: #fff; border-top: 1px solid var(--gray-200); padding: 32px 0; } .vv-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .vv-footer-logo { display: flex; align-items: center; gap: 8px; } .vv-footer-logo img { width: 22px; height: 22px; border-radius: 5px; } .vv-footer-logo .wm { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--gray-900); display: inline-flex; align-items: center; gap: 2px; } .vv-footer-logo .wm .pip { display: inline-block; width: 8px; height: 4px; background: var(--pip-color, #f59e0b); border-radius: 1px; transform: translateY(-1px); } .vv-footer-links { display: flex; gap: 24px; font-size: 13px; } .vv-footer-links a { color: var(--gray-600); text-decoration: none; } .vv-footer-links a:hover { color: var(--gray-900); } .vv-footer-copy { font-size: 12px; color: var(--gray-500); } @media (max-width: 900px) { /* Hide the section links but keep the primary CTA button visible. */ .vv-nav-links a:not(.btn) { display: none; } .vv-feat-grid, .vv-steps { grid-template-columns: 1fr; } .vv-takeit-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; } .vv-demo-row { grid-template-columns: 1fr; } .vv-demo-arrow { transform: rotate(90deg); } /* On mobile the phone bleeds to the right viewport edge — the hand reaches in from off-screen rather than floating centered. Less air, more grounded. */ .vv-takeit .vv-phone-wrap { width: 100%; max-width: none; margin: 0; display: block; /* drop flex centering — anchor right via image margin */ } .vv-takeit .vv-phone-mockup { display: block; width: 80%; max-width: 380px; margin-left: auto; /* push to right within column */ margin-right: -28px; /* cancel .vv-container's right padding → kiss viewport edge */ } .vv-takeit[data-layout="text-left"] .vv-takeit-inner .vv-takeit-text { order: 1; } .vv-takeit[data-layout="text-left"] .vv-takeit-inner .vv-phone-wrap { order: 2; } .vv-takeit-inner { gap: 32px; } .vv-takeit-text { max-width: 100%; } .vv-takeit-text > p { margin-left: auto; margin-right: auto; } .vv-takeit-bullets { display: inline-flex; align-items: flex-start; } } @media (max-width: 480px) { /* Slightly shrink the hero on small phones so each line fits on one row. */ .vv-hero { padding: 64px 0 80px; } .vv-hero h1 { font-size: clamp(36px, 11vw, 48px); } .vv-hero .sub { font-size: 17px; } .vv-container { padding: 0 20px; } /* Reduce section padding on small phones */ .vv-band, .vv-section, .vv-five { padding: 64px 0; } .vv-cta-band { padding: 64px 0; } /* Take-with-you: drop bottom padding so the phone-with-hand visually lands directly on the indigo CTA band below (no floating-in-the-air feel). */ .vv-takeit { padding: 56px 0 0; } .vv-takeit-inner { gap: 24px; } /* At ≤480px the container's right padding shrinks to 20px — match it. */ .vv-takeit .vv-phone-mockup { margin-right: -20px; } } /* ============ Cookie consent banner ============ */ /* Bump specificity so the `hidden` attribute actually hides the banner — #vv-cookie below sets display:flex (specificity 100), which beats the UA stylesheet's [hidden]{display:none} (specificity 10). Without this rule, el.hidden = true does nothing and the banner shows on every load. */ #vv-cookie[hidden] { display: none; } #vv-cookie { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); width: max-content; padding: 10px 12px 10px 18px; background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 4px 8px rgba(17, 24, 39, 0.06); animation: vv-cookie-in 240ms cubic-bezier(.2,.7,.2,1); font-family: var(--font-sans); } #vv-cookie.vv-cookie-out { animation: vv-cookie-out 200ms cubic-bezier(.4,0,.2,1) forwards; } @keyframes vv-cookie-in { from { opacity: 0; transform: translate(-50%, 16px); } } @keyframes vv-cookie-out { to { opacity: 0; transform: translate(-50%, 16px); } } .vv-cookie-msg { margin: 0; font-size: 13px; line-height: 1.4; color: var(--gray-700); white-space: nowrap; } .vv-cookie-msg a { color: var(--indigo-600); text-decoration: underline; text-underline-offset: 2px; } #vv-cookie .btn-sm { padding: 8px 18px; font-size: 13px; } .vv-cookie-no { background: transparent; border: 0; padding: 6px 4px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--gray-500); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .vv-cookie-no:hover { color: var(--gray-800); } @media (max-width: 560px) { #vv-cookie { flex-wrap: wrap; border-radius: 16px; padding: 12px 14px; left: 16px; right: 16px; transform: none; width: auto; max-width: none; } #vv-cookie.vv-cookie-out { animation: vv-cookie-out-mobile 200ms forwards; } @keyframes vv-cookie-in { from { opacity: 0; transform: translateY(16px); } } @keyframes vv-cookie-out-mobile { to { opacity: 0; transform: translateY(16px); } } .vv-cookie-msg { white-space: normal; flex: 1 1 100%; } #vv-cookie .btn-sm { flex: 1; } } /* ============ "Undergoing Apple review" status pill ============ */ .vv-review-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 9px 3px 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--indigo-700); background: var(--indigo-50); border: 1px solid var(--indigo-100); border-radius: 999px; white-space: nowrap; } .vv-review-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-500); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); animation: vv-review-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite; } @keyframes vv-review-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } } @media (prefers-reduced-motion: reduce) { .vv-review-dot { animation: none; } } /* On narrow screens the pill flows under the bullet text */ @media (max-width: 480px) { .vv-takeit-bullets li { flex-wrap: wrap; row-gap: 6px; } .vv-review-pill { margin-left: 0; } } /* ============ iOS waitlist modal ============ */ .vv-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--font-sans); animation: vv-modal-in 240ms cubic-bezier(.2,.7,.2,1); } .vv-modal[hidden] { display: none; } @keyframes vv-modal-in { from { opacity: 0; } to { opacity: 1; } } .vv-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vv-modal-content { position: relative; background: #fff; border-radius: 18px; padding: 32px 28px 26px; max-width: 440px; width: 100%; box-shadow: 0 20px 50px rgba(17, 24, 39, 0.22); animation: vv-modal-pop 260ms cubic-bezier(.2,.7,.2,1); } @keyframes vv-modal-pop { from { transform: translateY(12px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } } .vv-modal-close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; font-size: 26px; line-height: 1; width: 36px; height: 36px; cursor: pointer; color: var(--gray-500); border-radius: 10px; font-family: inherit; } .vv-modal-close:hover { color: var(--gray-900); background: var(--gray-100); } .vv-modal-content h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--gray-900); } .vv-modal-content > p { margin: 0 0 20px; color: var(--gray-600); font-size: 15px; line-height: 1.55; } .vv-modal-content form { display: flex; flex-direction: column; gap: 10px; } .vv-modal-content input[type=email] { padding: 13px 14px; font-size: 16px; border: 1px solid var(--gray-300); border-radius: 12px; font-family: inherit; color: var(--gray-900); width: 100%; } .vv-modal-content input[type=email]:focus { outline: 2px solid var(--indigo-500); outline-offset: 1px; border-color: var(--indigo-500); } .vv-modal-content .btn { width: 100%; } .vv-waitlist-msg { margin-top: 4px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; } .vv-waitlist-msg.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .vv-waitlist-msg.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .vv-waitlist-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray-500); } /* On narrow phones, eat the page padding so the modal can be wider */ @media (max-width: 480px) { .vv-modal { padding: 12px; } .vv-modal-content { padding: 26px 20px 22px; } }