/* ============================================================ VORA for Merchants - site styles ============================================================ */ @import url('vora-tokens.css'); /* Inter is self-hosted (assets/inter.css) so the primary typeface isn't render-blocked by a Google Fonts round-trip. The opt-in Tweaks "voice" fonts stay on Google below (not used in the default design). */ @import url('inter.css'); /* ------------------------------------------------------------ SITE-WIDE TWEAKS - three expressive, cross-page controls. Applied to . ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Serif:ital@0;1&family=Barlow+Condensed:wght@600;700;800&display=swap'); /* ============================================================ VORA TYPOGRAPHY SYSTEM - June 2026 Display: DM Serif Display (H1, hero, belief statements) UI/Body: Inter (everything else) Inter is the single site typeface (brand decision, July 2026). ============================================================ */ :root { --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-doc: 'Inter', sans-serif; /* Weight aliases per brief */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Tracking aliases per brief */ --tracking-snug: -0.01em; --tracking-wide: 0.01em; --leading-tight: 1.10; --leading-snug: 1.25; --leading-normal: 1.40; --leading-relaxed: 1.65; /* Type scale per brief - prefixed to avoid clobbering design-system --text-* tokens */ --vora-text-hero: clamp(2.5rem, 5vw, 4rem); --vora-text-h1: clamp(2rem, 4vw, 3rem); --vora-text-h2: clamp(1.5rem, 3vw, 2.25rem); --vora-text-h3: clamp(1.125rem, 2vw, 1.5rem); --vora-text-body: 1rem; --vora-text-small: 0.875rem; --vora-text-xs: 0.75rem; } html, body { font-family: var(--font-body); } /* iOS Safari: disable automatic text inflation that blows up type and overflows fixed-height boxes on phones */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Prevent any stray wide element from expanding the mobile layout viewport (which breaks all media queries) */ html, body { overflow-x: hidden; } /* H1 - one canonical size across the whole site (responsive clamp) */ h1, .h1, .hero h1 { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: clamp(40px, 5vw, 64px) !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; } /* H2 - Inter SemiBold */ h2, .h2 { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: clamp(28px, 3.2vw, 40px) !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } /* H3 - Inter Medium */ h3, .h3 { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: clamp(20px, 2vw, 24px) !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; } /* H4 - Inter Medium (smaller) */ h4, .h4 { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: clamp(17px, 1.4vw, 20px) !important; letter-spacing: -0.005em !important; line-height: 1.35 !important; } /* Body - Inter Regular 16, black per brief */ p, dd, dt, blockquote { font-family: var(--font-body); font-weight: 400; font-size: 16px !important; line-height: 1.65; letter-spacing: 0; color: #000000; } li { font-family: var(--font-body); font-weight: 400; line-height: 1.65; } /* Dark-on-light exception - never blacken text inside dark or navy sections */ .navy p, .navy li, .navy dd, .navy dt, .navy blockquote, .dark p, .dark li, .dark dd, .dark dt, .dark blockquote, .ed-section.dark p, .ed-section.dark li, .inv-section.inv-dark p, .inv-section.inv-dark li, .inv-hero p, .inv-hero li, .site-footer:not(.is-light) p, .site-footer:not(.is-light) li { color: inherit !important; } /* 68ch readability cap only on standalone prose paragraphs; lists, table cells, button text, and form/UI containers escape it so layout isn't disrupted. */ article p, section > p, section > .container > p, .prose p, .belief-statement, .hero-sub { max-width: 68ch; } /* Any capped paragraph that asks to be centered must also center its own box - the 68ch cap above otherwise leaves the block flush left and only the text inside it centers. Applies to inline text-align:center and .center-note alike. */ :is(article, section, .prose) :is(p, .belief-statement, .hero-sub)[style*="text-align:center"], :is(article, section, .prose) :is(p, .belief-statement, .hero-sub)[style*="text-align: center"], .center-note { margin-inline: auto; text-align: center; } /* Belief statement - H2-sized but Inter Light, used directly under hero H1 */ .belief-statement, .hero-sub, .lede-belief, .ed-belief { font-family: var(--font-body) !important; font-weight: 300 !important; font-size: 24px !important; line-height: 1.65 !important; letter-spacing: -0.01em !important; color: #000000; } /* Buttons - Inter Medium 14 */ button, .btn { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 14px; letter-spacing: 0.01em !important; } /* Badges / tags - Inter Medium 12 */ .badge, .tag, .chip, .pill, .eyebrow { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 12px; letter-spacing: 0.14em !important; } /* Nav items - Inter Medium 16 */ label, .nav-links a, .nav-dd-trigger, .nav-back, .lang-dd-trigger { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 16px; letter-spacing: 0.01em !important; } /* CTA / inline links ("Read more →") - Inter Medium 16 */ .ed-cta, a.cta, a.read-more { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 16px; letter-spacing: 0 !important; } /* Price / key metrics - Inter SemiBold 20 */ .price, .metric, .kpi-num, .stat-num { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 20px; letter-spacing: -0.01em; } /* Footer / legal - Inter Light 14 */ .site-footer, .site-footer p, .site-footer li, .site-footer a, .meta-text { font-family: var(--font-body) !important; font-weight: 300 !important; font-size: 14px; line-height: 1.4 !important; } /* Timestamps / metadata - Inter Light 12 */ .timestamp, .ed-image-cap, .ts, .meta-small { font-family: var(--font-body) !important; font-weight: 300 !important; font-size: 12px; line-height: 1.4 !important; } .site-footer h4 { font-family: var(--font-body) !important; font-weight: 500 !important; } /* Eyebrow / small caps labels stay Inter Medium with wider tracking */ .eyebrow, .ss-eyebrow, .mp-eyebrow, .ed-subhead, .hero-eyebrow { font-family: var(--font-body) !important; font-weight: 500 !important; letter-spacing: 0.14em !important; } /* Italic display variant - used for editorial accents inside h1 (.accent span) */ .hero h1 .accent, h1 .accent { font-style: italic; } /* @import line stays at top, but Instrument Serif + Barlow Condensed are still loaded so the existing voice/tone tweaks (editorial/industrial) keep working. */ /* ========================= SITE-WIDE MOTION ========================= */ .anim-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), transform 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: translateY(0); } /* Already in viewport at load - render instantly, no entrance motion */ [data-reveal].no-anim { transition: none !important; transform: none !important; opacity: 1 !important; } [data-reveal="auto"].ed-hero, [data-reveal="auto"].ed-section, [data-reveal="auto"].mp-section, [data-reveal="auto"].alt, [data-reveal="auto"].discover-section, [data-reveal="auto"].bt-section, [data-reveal="auto"].pricing-section, [data-reveal="auto"].site-footer { transform: translateY(40px); } /* Hero word-by-word */ .ed-hero h1 .word-rev, .inv-hero h1 .word-rev, .hero h1 .word-rev { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--w-delay, 0ms), transform 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--w-delay, 0ms); } .ed-hero h1.words-in .word-rev, .inv-hero h1.words-in .word-rev, .hero h1.words-in .word-rev { opacity: 1; transform: translateY(0); } /* Card tilt + lift on hover */ .discover-card, .inv-pillar, .inv-event, .feature, .bt-card, .plan { --tilt-x: 0deg; --tilt-y: 0deg; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1); } .discover-card:hover, .inv-pillar:hover, .inv-event:hover, .feature:hover, .bt-card:hover, .plan:hover { transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(-6px); box-shadow: 0 28px 56px -24px rgba(14,40,65,0.22); } /* Buttons: gentle press + glow */ .btn-primary { position: relative; overflow: hidden; transition: transform 200ms var(--ease-out), box-shadow 300ms var(--ease-out), background 200ms var(--ease-out); } .btn-primary::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.35), transparent 60%); opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(232,89,12,0.55); } .btn-primary:hover::after { opacity: 1; } .btn-primary:active { transform: translateY(0) scale(0.98); } /* Nav links: animated underline */ .nav-links a { position: relative; } .nav-links a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 2px; background: var(--vora-orange); transform: scaleX(0); transform-origin: center; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* CTA arrow nudge */ .ed-cta svg { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .ed-cta:hover svg { transform: translateX(4px); } /* Image-slot subtle hover zoom */ :is(image-slot,.static-slot) { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .ed-image:hover :is(image-slot,.static-slot) { transform: scale(1.02); } /* Site-wide page-load fade - nav appears instantly (the fade read as a blink when navigating) */ @keyframes pageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Brand mark heartbeat - two quick beats then rest. Plays twice on load ("wake up" moment), settles to static, and pulses continuously on hover. */ @keyframes brand-pulse { 0% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } 100% { transform: scale(1); } } .site-brand img.mark { transform-origin: center; will-change: transform; } .site-brand:hover img.mark, .site-brand:focus-visible img.mark { animation: brand-pulse 1.4s ease-in-out infinite; } /* Footer V mark - same heartbeat on hover */ .site-footer .ft-mark img { transform-origin: center; will-change: transform; } .site-footer .ft-mark:hover img, .site-footer .ft-mark:focus-visible img { animation: brand-pulse 1.4s ease-in-out infinite; } /* Floating background blobs for hero (decorative) */ .ed-hero::before, .ed-hero::after, .inv-hero::before { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); z-index: 0; opacity: 0.45; animation: blobFloat 14s ease-in-out infinite; } .ed-hero { position: relative; overflow: hidden; } .ed-hero > * { position: relative; z-index: 1; } .ed-hero::before { width: 360px; height: 360px; background: rgba(232,89,12,0.18); top: -80px; left: -120px; } .ed-hero::after { width: 420px; height: 420px; background: rgba(14,40,65,0.10); bottom: -120px; right: -80px; animation-delay: -7s; } .inv-hero::before { width: 480px; height: 480px; background: rgba(232,89,12,0.20); top: 10%; right: -120px; animation-delay: -3s; z-index: 0; } @keyframes blobFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(20px,-30px,0); } } /* Reduced motion guard */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .word-rev { opacity: 1 !important; transform: none !important; transition: none !important; } .ed-hero::before, .ed-hero::after, .inv-hero::before { animation: none !important; } .site-brand img.mark { animation: none !important; } } /* ========================= GLOBAL CENTER ALIGNMENT Apple / GSK-style centered structure for hero & section intros. AGGRESSIVE: every section centered, including two-column rows. ========================= */ .ed-hero, .ed-hero .container, .ed-section, .ed-section .container, .mp-section, .mp-section .container, .contact-page, .bt-section, .bt-section .container, .pricing-section, .pricing-section .container, .split, .split .container, .signup-card { text-align: center; } /* Center all common headings, paragraphs, and prose blocks inside any section */ .ed-section h1, .ed-section h2, .ed-section h3, .ed-section p, .ed-section .ed-subhead, .ed-section .ed-eyebrow, .ed-section .ed-prose, .ed-section .ed-cta { margin-left: auto; margin-right: auto; text-align: center; } /* Two-column .ed-row sections stack to center on every page */ .ed-section .ed-row, .ed-section .ed-row.reverse { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); } .ed-section .ed-row > * { width: 100%; max-width: 880px; text-align: center; } .ed-section .ed-row .ed-prose > * { margin-left: auto; margin-right: auto; text-align: center; } .ed-section .ed-row .ed-image { max-width: 880px; margin-left: auto; margin-right: auto; } /* Hero blocks */ .ed-hero h1, .ed-hero .ed-belief, .ed-hero p { margin-left: auto; margin-right: auto; text-align: center; } .ed-hero .ed-belief, .ed-hero p { max-width: 64ch; } .ed-hero h1 { max-width: 22ch; } /* Standalone section heads (used outside ed-row) center themselves */ .ed-section-head, .inv-section-head, .section-intro, .mp-head, .contact-hero { text-align: center; margin-left: auto; margin-right: auto; max-width: 880px; } .ed-section-head h2, .inv-section-head h2, .section-intro h2, .mp-head h2 { margin-left: auto; margin-right: auto; } .ed-section-head p, .inv-section-head p, .section-intro p, .mp-head p { margin-left: auto; margin-right: auto; max-width: 64ch; } /* Inline CTA links center inside their containers */ .ed-cta { margin-left: auto; margin-right: auto; display: inline-flex; } /* Discover / pillar grid headers center */ .discover-section > .container > h2, .discover-section > .container > p, .discover-section > .container > .ed-subhead, .inv-section > .container > h2, .inv-section > .container > .ed-subhead { text-align: center; display: block; margin-left: auto; margin-right: auto; } /* Cards centered text inside opportunity / pillar / feature grids */ .discover-card, .discover-card *, .feature, .feature *, .bt-card, .bt-card * { text-align: center; } .discover-card .illu, .feature .icon { margin-left: auto; margin-right: auto; } /* Hero of for-merchants & business-type pages */ .hero, .hero .hero-inner, .hero-content { text-align: center; margin-left: auto; margin-right: auto; } .hero h1, .hero p { margin-left: auto; margin-right: auto; } /* Promises band on for-merchants centers list */ .ed-section.dark .container > * { text-align: center; margin-left: auto; margin-right: auto; } /* Contact form + cards center inside their containers */ .contact-card { margin-left: auto; margin-right: auto; } .contact-side .info-card { text-align: left; } /* address blocks still need left for readability */ /* Pricing plan grid centers headers */ .pricing-section .container > h2, .pricing-section .container > p { text-align: center; margin-left: auto; margin-right: auto; } /* --- ACCENT - recolors CTAs, eyebrows, links, brand accents site-wide --- */ /* "spice" is default; only override when accent !== "spice" */ :root[data-accent="heritage"] { --vora-orange: #00868A; --vora-orange-300: #45B6BA; --vora-orange-500: #00868A; --vora-orange-700: #006B6E; --vora-orange-800: #054F52; } :root[data-accent="ink"] { --vora-orange: #0E2841; --vora-orange-300: #3E5367; --vora-orange-500: #0E2841; --vora-orange-700: #0A1E32; --vora-orange-800: #061523; } /* --- DENSITY - reshapes editorial / section vertical rhythm --- */ :root[data-density="cozy"] { --sp-12: 28px; --sp-14: 36px; --sp-16: 44px; --sp-18: 56px; --sp-20: 64px; } /* "standard" uses defaults */ :root[data-density="open"] { --sp-12: 60px; --sp-14: 72px; --sp-16: 88px; --sp-18: 108px; --sp-20: 128px; } :root[data-density="cozy"] .ed-section, :root[data-density="cozy"] .ed-hero { padding-top: 56px; padding-bottom: 48px; } :root[data-density="open"] .ed-section { padding-top: 120px; padding-bottom: 120px; } :root[data-density="open"] .ed-hero { padding-top: 144px; padding-bottom: 120px; } /* --- DISPLAY VOICE - swaps heading personality across every page --- */ /* default "geometric" uses Inter */ :root[data-voice="editorial"] h1, :root[data-voice="editorial"] h2, :root[data-voice="editorial"] .hero h1, :root[data-voice="editorial"] .ed-hero h1, :root[data-voice="editorial"] .ed-section h2, :root[data-voice="editorial"] .page-head h1, :root[data-voice="editorial"] .section-head h2, :root[data-voice="editorial"] .mp-title { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; font-style: italic; letter-spacing: -0.02em !important; line-height: 1.02; } :root[data-voice="editorial"] .hero h1 .accent, :root[data-voice="editorial"] h1 em, :root[data-voice="editorial"] h2 em { font-style: normal; } :root[data-voice="industrial"] h1, :root[data-voice="industrial"] h2, :root[data-voice="industrial"] h3, :root[data-voice="industrial"] .hero h1, :root[data-voice="industrial"] .ed-hero h1, :root[data-voice="industrial"] .ed-section h2, :root[data-voice="industrial"] .page-head h1, :root[data-voice="industrial"] .section-head h2, :root[data-voice="industrial"] .mp-title { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.005em !important; line-height: 0.95; } /* ========================= RTL - flip the few layouts that don't auto-mirror ========================= */ [dir="rtl"] .nav-back svg, [dir="rtl"] .ed-cta svg, [dir="rtl"] .nav-dd-title svg, [dir="rtl"] .discover-card .btn svg { transform: scaleX(-1); } [dir="rtl"] .site-brand .for-merchants { border-left: none; border-right: 1px solid var(--color-border-strong); padding-left: 0; padding-right: 10px; margin-left: 0; margin-right: 2px; } [dir="rtl"] .nav-mobile-panel .nmp-label, [dir="rtl"] .nmp-langs .nmp-label { letter-spacing: 0; } [dir="rtl"] .nav-dd-panel { right: auto; left: -8px; } [dir="rtl"] .lang-dd-panel { right: auto; left: 0; } [dir="rtl"] body { letter-spacing: 0; } [dir="rtl"] .ed-cta svg, [dir="rtl"] .nav-dd-title:hover svg { transform: scaleX(-1) translateX(-3px); } /* Anchor offset for fixed nav - keep scroll target below the floating bar */ :target { scroll-margin-top: 110px; } html { scroll-behavior: smooth; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-fg-1); font: var(--text-body-reg-md); letter-spacing: var(--tracking-tight); } body { padding-top: 68px; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-8); } /* Brand mark sits inside the header at left */ .site-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .site-brand img.mark { height: 26px; width: auto; display: block; } .site-brand img.wordmark { height: 21px; width: auto; display: block; position: relative; top: 0.5px; } .site-brand .for-merchants { display: inline-flex; align-items: center; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--color-border-strong); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--color-fg-2); font-size: 13px; white-space: nowrap; } /* ========================= NAV - unified top header bar ========================= */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(14, 40, 65, 0.08); box-shadow: 0 1px 0 rgba(14, 40, 65, 0.02); } /* Inner row: brand left, nav center, CTA right */ .site-nav .container.inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: 68px; min-height: 0; padding: 0 var(--sp-8); } .nav-links { display: flex; align-items: stretch; gap: var(--sp-5); list-style: none; padding: 0; margin: 0; } .nav-links > li { position: relative; display: flex; align-items: stretch; } .nav-links > li > a, .nav-links > li > button.nav-dd-trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; margin: 0; background: transparent; border: none; font-family: inherit; color: var(--color-fg-2); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); } .nav-links > li > a::after, .nav-links > li > button.nav-dd-trigger::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 1.5px; background: var(--color-fg-1); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out); pointer-events: none; } .nav-links > li > a:hover, .nav-links > li > button.nav-dd-trigger:hover, .nav-links > li.open > button.nav-dd-trigger, .nav-links > li:hover > button.nav-dd-trigger, .nav-links > li > a.active, .nav-links > li.is-current > button.nav-dd-trigger { color: var(--color-fg-1); } .nav-links > li > a:hover::after, .nav-links > li > button.nav-dd-trigger:hover::after, .nav-links > li:hover > button.nav-dd-trigger::after, .nav-links > li.open > button.nav-dd-trigger::after, .nav-links > li > a.active::after, .nav-links > li.is-current > button.nav-dd-trigger::after { transform: scaleX(1); } .nav-dd-trigger svg.chev { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); opacity: 0.7; } .nav-links > li:hover > .nav-dd-trigger svg.chev, .nav-links > li.open > .nav-dd-trigger svg.chev { transform: rotate(180deg); } /* Dropdown panel - floating glass card */ .nav-dd-panel { position: absolute; top: calc(100% + 12px); right: -8px; min-width: 260px; padding: var(--sp-5) var(--sp-6); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 18px 44px -18px rgba(14, 40, 65, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; gap: var(--sp-3); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); z-index: 100; } .nav-links > li:hover > .nav-dd-panel, .nav-links > li:focus-within > .nav-dd-panel, .nav-links > li.open > .nav-dd-panel { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear 0s; } .nav-dd-title { display: inline-flex; align-items: center; gap: 8px; color: var(--color-fg-2); font-weight: var(--fw-bold); font-size: 16px; padding: 0; letter-spacing: var(--tracking-tight); transition: color var(--dur-fast) var(--ease-out); } .nav-dd-title:hover { color: var(--vora-orange); } .nav-dd-title svg { transition: transform var(--dur-fast) var(--ease-out); } .nav-dd-title:hover svg { transform: translateX(3px); } .nav-dd-panel a:not(.nav-dd-title) { color: var(--color-fg-2); font-size: 15.5px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); transition: color var(--dur-fast) var(--ease-out); line-height: 1.3; } .nav-dd-panel a:not(.nav-dd-title):hover { color: var(--vora-orange); } /* Dropdown panel links don't need the .nav-links underline-on-hover indicator */ .nav-dd-panel a::after { display: none !important; } .nav-cta { display: flex; align-items: center; gap: var(--sp-3); } /* Small "back to main site" text link used in merchant nav */ .nav-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--color-fg-3); white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nav-back:hover { color: var(--color-fg-1); background: var(--color-bg-elev-2); } /* Search + language icon buttons in nav CTA area */ .nav-icon { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; background: transparent; border: none; border-radius: var(--radius-pill); font-family: inherit; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--color-fg-2); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nav-icon:hover { color: var(--color-fg-1); background: var(--color-bg-elev-2); } .nav-icon svg { width: 18px; height: 18px; flex: none; } .nav-icon.with-label svg { width: 16px; height: 16px; } .nav-icon svg.chev { width: 11px; height: 11px; margin-left: 2px; opacity: 0.7; transition: transform var(--dur-fast) var(--ease-out); } /* Language dropdown */ .lang-dd { position: relative; display: inline-flex; align-items: center; } .lang-dd:hover .nav-icon svg.chev, .lang-dd.open .nav-icon svg.chev { transform: rotate(180deg); } .lang-dd-panel { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; padding: 8px; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(14, 40, 65, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); z-index: 100; } .lang-dd:hover .lang-dd-panel, .lang-dd:focus-within .lang-dd-panel, .lang-dd.open .lang-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear 0s; } .lang-dd-panel a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--color-fg-2); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .lang-dd-panel a:hover { background: var(--color-bg-elev-2); color: var(--color-fg-1); } .lang-dd-panel a.active { color: var(--vora-orange); } /* ========================= BUTTONS ========================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 48px; padding: 0 var(--sp-6); border-radius: var(--radius-pill); font: var(--text-btn-lg); letter-spacing: var(--tracking-tight); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); white-space: nowrap; text-decoration: none; } .btn:active { transform: scale(0.97); } .btn-primary { position: relative; background: linear-gradient(135deg, var(--vora-orange) 0%, var(--vora-orange-700) 100%); color: #fff; isolation: isolate; } .btn-primary::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; background: radial-gradient(closest-side, var(--vora-orange) 0%, transparent 72%); opacity: 0.38; filter: blur(10px); z-index: -1; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), inset var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .btn-primary:hover { background: linear-gradient(135deg, var(--vora-orange-700) 0%, var(--vora-orange-800) 100%); } .btn-primary:hover::before { opacity: 0.58; inset: -8px; filter: blur(14px); } .btn-ghost { background: transparent; color: var(--color-fg-1); } .btn-ghost:hover { background: var(--color-bg-elev-2); } .btn-outline { background: transparent; color: var(--color-fg-1); border-color: var(--color-border-strong); } .btn-outline:hover { background: var(--color-bg-elev-1); border-color: var(--color-fg-1); } .btn-sm { height: 40px; padding: 0 var(--sp-5); font: var(--text-btn-md); letter-spacing: var(--tracking-tight); } .btn-lg { height: 56px; padding: 0 var(--sp-8); font-size: 17px; } .btn-block { width: 100%; } /* ========================= HERO ========================= */ .hero { position: relative; background: var(--vora-navy); color: #fff; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) contrast(1.02); } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,17,27,0.80) 0%, rgba(6,17,27,0.55) 35%, rgba(6,17,27,0.20) 65%, rgba(6,17,27,0.55) 100%), linear-gradient(180deg, rgba(6,17,27,0.25) 0%, rgba(6,17,27,0.55) 100%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; min-height: 720px; padding: var(--sp-16) 0 var(--sp-16); } /* ========================= MERCHANT MARQUEE - animated 3-state promise band ========================= */ .mp-section { background: #0B0F14; color: #fff; padding: var(--sp-20) 0; overflow: hidden; } .mp-head { text-align: center; max-width: 880px; margin: 0 auto var(--sp-12); } .mp-title { font: var(--text-display-2xl); font-size: clamp(40px, 5vw, 64px); letter-spacing: var(--tracking-display); line-height: 1.04; color: #fff; margin: 0 0 var(--sp-5); } .mp-title .underline { position: relative; display: inline-block; } .mp-title .underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; background: var(--vora-orange); border-radius: 2px; } .mp-sub { font-size: 18px; line-height: 1.55; color:var(--text-on-dark); margin: 0 auto var(--sp-8); max-width: 680px; } .mp-eyebrow { color: var(--vora-orange); font-weight: var(--fw-bold); letter-spacing:0.14em; text-transform: uppercase; font-size: 13px; margin: 0; } .mp-stage { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: start; margin-top: var(--sp-12); } /* LEFT: photo + cards */ .mp-visual { position: relative; aspect-ratio: 4/3; min-height: 480px; border-radius: var(--radius-2xl); overflow: hidden; } .mp-photo { position: absolute; inset: 0; border-radius: var(--radius-2xl); overflow: hidden; opacity: 0; pointer-events: none; transform: scale(1.04); transition: opacity 700ms var(--ease-out), transform 1200ms var(--ease-out); background: #14202B; } .mp-photo :is(image-slot,.static-slot) { display: block; width: 100%; height: 100%; } .mp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%); pointer-events: none; z-index: 1; } /* (illustration styles removed - :is(image-slot,.static-slot)s now fill the photo panels) */ .mp-photo-cap { position: absolute; bottom: 24px; left: 28px; z-index: 2; color:var(--text-on-dark-strong); font-size: 13px; letter-spacing:0.14em; text-transform: uppercase; font-weight: var(--fw-bold); text-shadow: 0 2px 12px rgba(0,0,0,0.6); } /* Floating product cards */ .mp-card { position: absolute; right: 24px; bottom: 24px; transform: translate(20px, 8px) scale(0.96); background: #fff; color: var(--color-fg-1); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55); width: min(380px, 70%); opacity: 0; transition: opacity 600ms var(--ease-out) 120ms, transform 700ms var(--ease-out) 120ms; overflow: hidden; } /* Active state - show only the active photo + card */ .mp-stage[data-active-state="1"] .mp-photo[data-state="1"], .mp-stage[data-active-state="2"] .mp-photo[data-state="2"], .mp-stage[data-active-state="3"] .mp-photo[data-state="3"] { opacity: 1; pointer-events: auto; transform: scale(1); } .mp-stage[data-active-state="1"] .mp-card[data-state="1"], .mp-stage[data-active-state="2"] .mp-card[data-state="2"], .mp-stage[data-active-state="3"] .mp-card[data-state="3"] { opacity: 1; transform: translate(0, 0) scale(1); } /* Card 1 - Order placed */ .mp-card-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--color-border); } .mp-card-head.dark { background: var(--color-fg-1); color: #fff; border-bottom: 0; } .mp-tick { width: 24px; height: 24px; border-radius: 50%; background: var(--color-fg-1); color: #fff; display: grid; place-items: center; flex: none; } .mp-card-title { font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing:0.14em; flex: 1; } .mp-card-status { background: var(--vora-teal-tint); color: var(--vora-teal-dark); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.06em; } .mp-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); } .mp-card-row.primary { padding-top: 18px; padding-bottom: 18px; } .mp-card-line { font-weight: var(--fw-bold); font-size: 15.5px; color: var(--color-fg-1); } .mp-card-sub { font-size: 12px; color: var(--color-fg-3); margin-top: 4px; } .mp-card-amt { font-weight: var(--fw-semibold); font-size: 15.5px; color: var(--color-fg-1); flex: none; } .mp-card-amt.strong { font-weight: 700; } .mp-card-foot { display: flex; justify-content: space-between; padding: 14px 18px; font-size: 14px; color: var(--color-fg-3); background: var(--color-bg-elev-1); } /* Card 2 - Payout */ .mp-card-eyebrow { font-size: 12px; font-weight: var(--fw-bold); letter-spacing:0.14em; text-transform: uppercase; color:var(--text-on-dark); } .mp-card-eyebrow.strong { color: var(--color-fg-1); letter-spacing: 0.14em; } .mp-card-body { padding: 22px 22px 22px; } .mp-payout-row { display: flex; align-items: center; gap: 14px; } .mp-payout-icon { width: 44px; height: 44px; border-radius: 50%; background: #1F8A5B; color: #fff; display: grid; place-items: center; flex: none; } .mp-payout-amt { font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: var(--color-fg-1); } .mp-payout-meta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-fg-3); } /* Card 3 - Today summary */ .mp-today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 22px 6px; } .mp-today-lbl { font-size: 12px; text-transform: uppercase; letter-spacing:0.14em; color: var(--color-fg-3); margin-bottom: 4px; font-weight: var(--fw-semibold); } .mp-today-num { font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--color-fg-1); } .mp-today-foot { padding: 12px 22px 18px; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--color-border); margin-top: 6px; } .mp-today-trend { color: #1F8A5B; font-weight: var(--fw-bold); font-size: 14px; } .mp-today-meta { font-size: 12px; color: var(--color-fg-3); } /* RIGHT: cycling promise list */ .mp-promises { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-7); } .mp-promises li { position: relative; padding-left: 24px; cursor: pointer; transition: color var(--dur-base) var(--ease-out); color: rgba(255,255,255,0.32); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-align: left; } .mp-promises li .bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--vora-orange); transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--ease-out); } .mp-promises li.active { color: #fff; } .mp-promises li.active .bar { transform: scaleY(1); } .mp-promises li:hover:not(.active) { color:var(--text-on-dark-faint); } @media (max-width: 1080px) { .mp-stage { gap: var(--sp-6); } .mp-visual { min-height: clamp(280px, 38vw, 480px); } } @media (max-width: 640px) { .mp-stage { grid-template-columns: 1fr; gap: var(--sp-8); } .mp-card { width: min(360px, 80%); } .mp-visual { min-height: 320px; aspect-ratio: 1/1; } .mp-card { width: 88%; right: 6%; bottom: 16px; } } /* SIGN UP CARD - DoorDash-style "your business could earn" merchant card */ .signup-card { background: #fff; border-radius: var(--radius-xl); padding: var(--sp-7) var(--sp-7) var(--sp-6); box-shadow: 0 24px 60px -16px rgba(0,0,0,0.45); width: 100%; max-width: 520px; justify-self: start; display: flex; flex-direction: column; gap: var(--sp-3); } .signup-card .earn-headline { font: var(--text-h1); font-weight: 700; letter-spacing: -0.005em; text-transform: uppercase; line-height: 1.15; color: var(--vora-orange-900); margin: 0; font-size: 22px; text-wrap: balance; word-break: normal; overflow-wrap: break-word; } .signup-card .earn-link { display: inline-block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-fg-1); text-decoration: underline; text-underline-offset: 3px; margin: 0 0 var(--sp-2); align-self: flex-start; } .signup-card .earn-link:hover { color: var(--vora-orange); } .field { position: relative; margin-bottom: var(--sp-3); } .signup-card .field { margin-bottom: 0; } .signup-card .field-grid-2 .field { margin-bottom: 0; } .field label { display: block; font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-fg-2); text-transform: uppercase; letter-spacing:0.14em; margin-bottom: 6px; } .signup-card .field label { display: none; } .field input, .field select, .field textarea { width: 100%; height: 52px; padding: 0 16px; background: #F2F2F0; border: 1px solid transparent; border-radius: var(--radius-md); font-size: 15.5px; letter-spacing: var(--tracking-tight); color: var(--color-fg-1); outline: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); -webkit-appearance: none; appearance: none; } .field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; color: var(--color-fg-3); } .field select:valid { color: var(--color-fg-1); } .field input::placeholder, .field textarea::placeholder { color: var(--color-fg-3); } .field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--vora-orange); box-shadow: 0 0 0 4px rgba(232,89,12,0.12); } .field textarea { height: auto; padding: 12px 16px; min-height: 96px; resize: vertical; } /* leading icon inside field */ .field.icon-field .field-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--color-fg-3); pointer-events: none; } .field.icon-field input { padding-left: 44px; } .field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .signup-card .small-terms { font-size: 12px; color: var(--color-fg-2); margin: var(--sp-2) 0 var(--sp-1); line-height: 1.5; letter-spacing: 0; } .signup-card .earn-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-1); } .signup-card .btn-cta { background: var(--vora-orange); color: #fff; height: 52px; padding: 0 32px; border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: 16px; border: none; } .signup-card .btn-cta:hover { background: var(--vora-orange-700); box-shadow: var(--shadow-cta); } /* ========================= SECTIONS / GENERIC ========================= */ section { padding: var(--sp-20) 0; } section.tight { padding: var(--sp-16) 0; } section.alt { background: #FFFFFF; } /* Doc-page wrapper (any page) - fixed 20px room above/below the paper, overriding the generic section rule and any density tweak above. */ section:has(> doc-page) { padding: 20px 0 !important; } .section-head { max-width: 720px; margin: 0 auto var(--sp-12); text-align: center; } .section-head .eyebrow { display: inline-block; color: var(--vora-orange); font-weight: var(--fw-bold); letter-spacing: 0.14em; margin-bottom: var(--sp-3); } .section-head h2 { font: var(--text-display-xl); font-size: clamp(32px, 4vw, 48px); letter-spacing: var(--tracking-display); line-height: 1.05; margin-bottom: var(--sp-4); } .section-head p { font-size: 18px; line-height: 1.55; color: var(--color-fg-3); } /* Feature grid */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .feature { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--sp-8); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); } .feature .icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--vora-orange-50); color: var(--vora-orange); display: grid; place-items: center; margin-bottom: var(--sp-5); } .feature h3 { font: var(--text-h2); letter-spacing: var(--tracking-display); margin-bottom: var(--sp-2); } .feature p { font-size: 15.5px; line-height: 1.6; color: var(--color-fg-3); } /* Steps row */ .step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 0; left: 0; font: var(--text-display-md); letter-spacing: var(--tracking-display); color: var(--vora-orange); font-size: 36px; } /* CTA band */ .cta-band { background: var(--vora-navy); color: #fff; border-radius: var(--radius-2xl); padding: var(--sp-16); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(232,89,12,0.55), transparent 70%); filter: blur(20px); } .cta-band h2 { font: var(--text-display-lg); letter-spacing: var(--tracking-display); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; color: #fff; margin-bottom: var(--sp-4); } .cta-band p { color:var(--text-on-dark); font-size: 17px; margin-bottom: 0; } .cta-band .actions { display: flex; gap: var(--sp-3); justify-self: end; position: relative; z-index: 1; } @media (max-width: 700px) { .cta-band { padding: var(--sp-8) var(--sp-6); text-align: center; } .cta-band .actions { flex-direction: column; align-items: stretch; justify-self: stretch; width: 100%; } .cta-band .actions .btn { width: 100%; justify-content: center; } } /* ========================= FOOTER (new - VORA-style, page-aware) ========================= */ .site-footer { background: var(--vora-navy); color:var(--text-on-dark); padding: var(--sp-16) 0 var(--sp-6); } /* Back-to-top - round arrow, pinned right of the footer, outside the content container */ .site-footer .ft-totop { position: absolute; bottom: var(--sp-6); right: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; background: var(--vora-orange); border: 0; border-radius: 999px; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(14,40,65,0.18); transition: transform 160ms cubic-bezier(0.22,1,0.36,1), background 120ms ease; } @media (max-width: 1420px) { .site-footer .ft-bottom { padding-right: 64px; } } .site-footer { position: relative; } .site-footer .ft-totop svg { transition: transform 160ms cubic-bezier(0.22,1,0.36,1); } .site-footer .ft-totop:hover { background: #A53F09; } .site-footer .ft-totop:hover svg { transform: translateY(-2px); } .site-footer .ft-totop:active { transform: scale(0.94); } /* Light variant - used on all non-home pages */ .site-footer.is-light { background: #F5F5F5; color: rgba(14,40,65,0.78); } .site-footer.is-light h4 { color: var(--vora-navy); } .site-footer.is-light a { color: rgba(14,40,65,0.72); } .site-footer.is-light a:hover { color: var(--vora-navy); } .site-footer.is-light .ft-bottom { border-top-color: rgba(14,40,65,0.10); } .site-footer.is-light .ft-mark img { filter: none; opacity: 1; } .site-footer.is-light .ft-legal { color: rgba(14,40,65,0.55); } .site-footer.is-light .ft-legal a { color: rgba(14,40,65,0.65); } .site-footer.is-light .ft-legal .copy { color: rgba(14,40,65,0.45); } .site-footer.is-light .ft-social a:hover { background: rgba(14,40,65,0.08); } .site-footer.is-light .ft-social a img { filter: none; opacity: 0.72; } .site-footer.is-light .ft-social a:hover img { opacity: 1; } .site-footer .ft-top { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--sp-10); align-items: start; padding-bottom: var(--sp-12); } .site-footer h4 { color: #fff; font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: 0; margin: 0 0 var(--sp-4); } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .site-footer a { color:var(--text-on-dark); font-size: 14px; transition: color var(--dur-fast) var(--ease-out); } .site-footer a:hover { color: #fff; } /* App store badge column */ .ft-apps { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 180px; } .ft-app-badge { display: inline-flex; position: relative; cursor: not-allowed; line-height: 0; width: fit-content; } .ft-app-badge img { display: block; height: 40px; width: auto; border-radius: 7px; transition: opacity var(--dur-fast) var(--ease-out); } .ft-app-badge[href]:not([aria-disabled="true"]) { cursor: pointer; } .ft-app-badge[href]:not([aria-disabled="true"]):hover img { opacity: 0.88; } .ft-app-badge .soon { position: absolute; top: -8px; right: -6px; background: var(--vora-orange); color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 999px; font-weight: var(--fw-bold); letter-spacing:0.14em; line-height: 1; text-transform: uppercase; z-index: 1; } /* Footer link for an app-only feature that hasn't shipped yet */ .ft-soon { display: inline-flex; align-items: baseline; gap: 6px; cursor: default; opacity: 0.55; pointer-events: none; } .ft-soon .soon-tag { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.72); line-height: 1; } /* Bottom row */ .site-footer .ft-bottom { border-top: 1px solid rgba(255,255,255,0.10); padding-top: var(--sp-5); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-6); } .ft-mark { width: 28px; height: 28px; display: grid; place-items: center; } .ft-mark img { width: 28px; height: 28px; filter: brightness(0) invert(1); opacity: 0.95; } .ft-legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: 13px; color:var(--text-on-dark-faint); } .ft-legal a { font-size: 13px; color:var(--text-on-dark-faint); } .ft-legal .copy { color: rgba(255,255,255,0.40); margin-left: var(--sp-3); } .ft-social { display: flex; gap: 0; align-items: center; } .ft-social a { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; line-height: 0; transition: background var(--dur-fast) var(--ease-out); } .ft-social a:hover { background: rgba(255,255,255,0.10); } .ft-social a img { display: block; width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: 0.75; transition: opacity var(--dur-fast) var(--ease-out); } /* LinkedIn + Instagram outlines came from a wider viewBox - give them a bit more width */ .ft-social a img[data-wide] { width: 28px; height: 22px; } .ft-social a:hover img { opacity: 1; } .site-footer .ft-br { display: none; } @media (max-width: 1080px) { .site-footer .ft-top { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .ft-apps { grid-column: 1 / -1; flex-direction: row; } } @media (max-width: 820px) { .site-footer .ft-bottom { grid-template-columns: auto 1fr; } .site-footer .ft-bottom .ft-legal { grid-column: 1 / -1; order: 3; } } @media (max-width: 640px) { /* Top link groups: one horizontal row, swipe left/right (Weee-style) */ .site-footer .ft-top { display: flex; flex-wrap: nowrap; gap: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-top: 12px; margin-top: -12px; padding-right: 12px; padding-bottom: var(--sp-6); } .site-footer .ft-top::-webkit-scrollbar { display: none; } .site-footer .ft-top > div { flex: 0 0 auto; min-width: 46vw; border: 0; } .site-footer .ft-top > div h4 { margin: 0 0 var(--sp-3); padding: 0; cursor: default; display: block; white-space: nowrap; } .site-footer .ft-top > div h4::after { display: none; } .site-footer .ft-top > div ul { display: flex !important; flex-direction: column; gap: var(--sp-3); padding: 0; margin: 0; } .ft-apps { min-width: 220px; } /* Bottom: legal links, then social, then V + copyright + back-to-top on one line */ .site-footer .ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 9px; padding-right: 0; text-align: center; } .site-footer .ft-bottom .ft-legal, .site-footer .ft-bottom .ft-social { display: contents; } .site-footer .ft-legal a { order: 2; } .site-footer .ft-legal .copy { order: 6; margin: 0; font-size: 10.5px; white-space: nowrap; } .site-footer .ft-social a { order: 4; } .site-footer .ft-mark { order: 6; width: 20px; height: 20px; } .site-footer .ft-mark img { width: 20px; height: 20px; } .site-footer .ft-totop { order: 6; position: static; margin: 0; width: 34px; height: 34px; flex: 0 0 auto; } .site-footer .ft-br { display: block; flex-basis: 100%; height: 0; margin: 0; padding: 0; } .site-footer .ft-br1 { order: 3; } .site-footer .ft-br2 { order: 5; } } /* ========================= INNER PAGE HEADER ========================= */ .page-head { padding: var(--sp-20) 0 var(--sp-12); background: #FFFFFF; border-bottom: 1px solid var(--color-border); } .page-head .container { max-width: 880px; } .page-head .eyebrow { color: var(--vora-orange); font-weight: var(--fw-bold); letter-spacing: 0.14em; margin-bottom: var(--sp-3); display: block; } .page-head h1 { font: var(--text-display-2xl); letter-spacing: var(--tracking-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.02; margin-bottom: var(--sp-5); } .page-head p { font-size: 19px; line-height: 1.5; color: var(--color-fg-3); max-width: 640px; } /* ========================= PRICING ========================= */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: stretch; } .plan { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-5); position: relative; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .plan.featured { border-color: var(--vora-orange); box-shadow: 0 24px 48px -20px rgba(232,89,12,0.30); transform: translateY(-8px); } .plan .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--vora-orange); color: #fff; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-bold); letter-spacing:0.14em; text-transform: uppercase; } .plan h3 { font: var(--text-h1); letter-spacing: var(--tracking-display); } .plan .desc { color: var(--color-fg-3); font-size: 14px; min-height: 40px; } .plan .price { display: flex; align-items: baseline; gap: 6px; padding: var(--sp-4) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .plan .price .pct { font: var(--text-display-2xl); font-size: 56px; letter-spacing: var(--tracking-display); color: var(--color-fg-1); line-height: 1; } .plan .price .unit { font-size: 16px; color: var(--color-fg-3); } .plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .plan ul li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 15.5px; color: var(--color-fg-2); } .plan ul li svg { color: var(--vora-orange); flex: none; margin-top: 3px; } .plan ul li.muted { color: var(--color-fg-4); } .plan ul li.muted svg { color: var(--color-fg-4); } .pricing-faq { max-width: 760px; margin: 0 auto; } .faq-item { border-top: 1px solid var(--color-border); padding: var(--sp-5) 0; } .faq-item:last-child { border-bottom: 1px solid var(--color-border); } .faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-fg-1); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .plus { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: grid; place-items: center; color: var(--color-fg-2); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .faq-item[open] summary .plus { transform: rotate(45deg); background: var(--vora-orange); color: #fff; border-color: var(--vora-orange); } .faq-item .answer { margin-top: var(--sp-4); color: var(--color-fg-3); font-size: 16px; line-height: 1.6; } /* ========================= CONTACT ========================= */ .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-12); align-items: start; } .contact-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: var(--sp-10); } .contact-side .info-card { background: var(--color-bg-elev-1); border-radius: var(--radius-xl); padding: var(--sp-6); margin-bottom: var(--sp-4); display: flex; gap: var(--sp-4); } .contact-side .info-card .icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); display: grid; place-items: center; color: var(--vora-orange); flex: none; } .contact-side .info-card h4 { font: var(--text-h4); letter-spacing: var(--tracking-display); margin-bottom: 4px; } .contact-side .info-card p { font-size: 14px; color: var(--color-fg-3); line-height: 1.5; } .contact-side .info-card a { color: var(--color-fg-1); font-weight: var(--fw-semibold); } /* ========================= EDITORIAL (Company / VEDIT / VEDIT & Purpose pages) Quiet, J&J-style institutional layout: big H1, belief paragraph, generous whitespace, alternating image + prose rows, no decoration. ========================= */ .editorial main { display: block; } .ed-hero { padding: var(--sp-20) 0 var(--sp-16); background: #fff; border-bottom: 1px solid var(--color-border); } .ed-hero .ed-eyebrow { font-size: 13px; letter-spacing:0.14em; text-transform: uppercase; font-weight: var(--fw-bold); color: var(--vora-orange); margin-bottom: var(--sp-6); } .ed-hero h1 { font: var(--text-display-2xl); font-size: clamp(56px, 7vw, 96px); letter-spacing: var(--tracking-display); color: var(--color-fg-1); line-height: 1.02; margin: 0 0 var(--sp-10); max-width: 18ch; font-weight: var(--fw-bold); } .ed-belief { font: var(--text-h3); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5; color: var(--color-fg-2); max-width: 62ch; margin: 0; font-weight: var(--fw-medium); letter-spacing: -0.01em; } .ed-section { padding: var(--sp-16) 0; border-bottom: 1px solid var(--color-border); } .ed-section:last-of-type { border-bottom: none; } .ed-section.tight { padding: var(--sp-12) 0; } .ed-section.dark { background: var(--vora-navy); color: #fff; border-bottom-color: rgba(255,255,255,0.10); } .ed-section.dark h2, .ed-section.dark h3 { color: #fff; } .ed-section.dark p { color:var(--text-on-dark); } .ed-section.dark .ed-cta { color: var(--vora-orange-300); } .ed-section h2 { font: var(--text-display-md); font-size: clamp(34px, 4vw, 54px); letter-spacing: var(--tracking-display); color: var(--color-fg-1); line-height: 1.08; margin: 0 auto var(--sp-6); max-width: 22ch; font-weight: var(--fw-bold); } .ed-section h3 { font: var(--text-h3); font-size: 22px; letter-spacing: var(--tracking-display); color: var(--color-fg-1); margin: 0 auto var(--sp-3); font-weight: var(--fw-bold); } .ed-section p { font-size: 17px; line-height: 1.6; color: var(--color-fg-2); max-width: 64ch; margin: 0 auto var(--sp-4); } .ed-section p:last-child { margin-bottom: 0; } .ed-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--vora-orange); font-weight: var(--fw-bold); font-size: 15.5px; letter-spacing: 0.02em; margin-top: var(--sp-6); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap var(--dur-fast) var(--ease-out); } .ed-cta:hover { gap: 12px; } /* Two-column row: prose left, image right (or vice versa) */ .ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); align-items: center; } .ed-row.reverse > :first-child { order: 2; } .ed-row .ed-prose > h3:first-child { margin-top: 0; } .ed-row .ed-prose .ed-subhead { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vora-orange); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); } /* Image placeholder - clean, muted, captioned with art direction */ .ed-image { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); overflow: hidden; background: linear-gradient(135deg, #F5F5F5 0%, #E9EAEB 100%); border: 1px solid var(--color-border); } .ed-image :is(image-slot,.static-slot) { display: block; width: 100%; height: 100%; } .ed-image .ed-image-cap { position: absolute; left: 20px; bottom: 20px; right: 20px; z-index: 2; font-size: 11px; letter-spacing:0.14em; text-transform: uppercase; color: rgba(14,40,65,0.45); font-weight: var(--fw-bold); pointer-events: none; } .ed-image.wide { aspect-ratio: 16 / 9; } .ed-image.tall { aspect-ratio: 3 / 4; } .ed-image.square { aspect-ratio: 1 / 1; } /* Stat band - VORA at a glance */ .ed-stat .num { font: var(--text-display-2xl); font-size: clamp(48px, 5vw, 80px); letter-spacing: var(--tracking-display); color: var(--vora-orange); line-height: 1; margin-bottom: var(--sp-4); font-weight: var(--fw-bold); } .ed-stat .num.tbd { color: var(--color-fg-4); font-size: clamp(34px, 3vw, 48px); font-style: italic; font-weight: var(--fw-medium); } .ed-stat .lbl { font-size: 16px; color: var(--color-fg-2); line-height: 1.4; max-width: 28ch; } @media (max-width: 1080px) { .ed-row { grid-template-columns: 1fr; gap: var(--sp-10); } .ed-row.reverse > :first-child { order: 0; } } @media (max-width: 640px) { .ed-hero { padding: var(--sp-12) 0 var(--sp-10); } .ed-section { padding: var(--sp-12) 0; } } @media (max-width: 1080px) { .hero-inner { grid-template-columns: 1fr; min-height: 0; padding: var(--sp-12) 0; } .signup-card { justify-self: stretch; max-width: none; } .feature-grid, .pricing-grid { grid-template-columns: 1fr 1fr; } .contact-grid, .cta-band { grid-template-columns: 1fr; } .site-footer .grid { grid-template-columns: 1fr 1fr; } } /* ========================= RESPONSIVE HARDENING ========================= */ /* Hand-placed pixel sizes/positions (from direct edits) release to natural flow below tablet */ @media (max-width: 980px) { section[style*="height:"] { height: auto !important; min-height: 0 !important; } h1[style*="width:"], h2[style*="width:"], h3[style*="width:"], p[style*="width:"] { width: auto !important; max-width: 100% !important; } h1[style*="height:"], h2[style*="height:"], h3[style*="height:"], p[style*="height:"] { height: auto !important; } h1[style*="position: absolute"], h2[style*="position: absolute"], h3[style*="position: absolute"], p[style*="position: absolute"] { position: static !important; } } video, iframe, embed, object { max-width: 100%; } body { overflow-x: clip; } /* Tablet: tighten nav so links fit */ @media (max-width: 1080px) { .nav-back { display: none; } .site-nav .container.inner { padding: 0 var(--sp-4); gap: var(--sp-4); } .nav-links { gap: var(--sp-3); } } /* Mobile hamburger (injected by nav.js) */ .nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: #F5F5F5; border: 1px solid #FFFFFF; border-radius: 999px; color: var(--vora-navy); cursor: pointer; } .nav-mobile-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: 0 12px 32px rgba(14,40,65,0.12); max-height: calc(100vh - 68px); overflow-y: auto; } .nav-mobile-panel ul { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-5); } .nav-mobile-panel a { display: block; padding: 13px 8px; font-size: 16px; font-weight: var(--fw-semibold); color: var(--color-fg-2); border-radius: 10px; } .nav-mobile-panel a:hover, .nav-mobile-panel a.active { color: var(--vora-orange); background: #FDEEE7; } .nav-mobile-panel .nmp-group { padding-top: var(--sp-2); } .nav-mobile-panel .nmp-label { display: block; padding: 12px 8px 4px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing:0.14em; text-transform: uppercase; color: var(--color-fg-4); } @media (max-width: 820px) { .site-nav nav { display: none; } .nav-back { display: none; } .nav-burger { display: inline-flex; } .site-nav.mobile-open .nav-mobile-panel { display: block; } .site-nav .container.inner { gap: 8px; padding: 0 12px; } .site-brand { flex: 0 1 auto; min-width: 0; } /* Search + language stay in the top bar, right before the burger; bar shrinks to fit */ .site-nav .nav-cta { gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; } .site-nav .nav-cta .js-get-started, .site-nav .nav-cta > .btn-primary { order: -1; height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; } .site-nav .nav-burger { order: 10; flex: 0 0 auto; } .site-nav .nav-cta .nav-icon { width: 34px; height: 34px; padding: 0; justify-content: center; } .site-nav .nav-cta .lang-dd-trigger span, .site-nav .nav-cta .lang-dd-trigger svg.chev { display: none; } .site-nav .nav-cta .lang-dd-trigger svg { width: 18px; height: 18px; } .site-nav .nav-burger { width: 34px; height: 34px; } .site-brand img.mark { height: 21px; } .site-brand img.wordmark { height: 17px; } /* No longer duplicated inside the hamburger drawer */ .nav-mobile-panel .nmp-actions { display: none; } } /* Very narrow phones: drop the "for Merchants" sublabel so the bar never overflows */ @media (max-width: 560px) { .site-brand .for-merchants { display: none; } } /* Mobile menu: search + language actions */ .nmp-actions { border-top: 1px solid var(--color-border); margin-top: var(--sp-3); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); } .nmp-action { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 16px; font-weight: 600; color: var(--vora-navy); cursor: pointer; } .nmp-action svg { width: 20px; height: 20px; } .nmp-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nmp-langs .nmp-label { flex: 1 1 100%; } .nmp-langs a { padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--color-fg-muted, #3E5367); } .nmp-langs a.active { border-color: var(--vora-orange); color: var(--vora-orange); background: #FDEEE7; } @media (max-width: 640px) { .container { padding: 0 var(--sp-4); } .nav-links { display: none; } .field-grid-2 { grid-template-columns: 1fr; } .feature-grid, .pricing-grid { grid-template-columns: 1fr; } .site-footer .grid { grid-template-columns: 1fr; } } /* ========================= DISCOVER - 3-card category carousel (Restaurants / Groceries / Marketplace) ========================= */ .discover-section { background: #fff; border-bottom-color: transparent !important; } .discover-section .ed-subhead { color: var(--vora-orange); } .discover-stage { position: relative; margin-top: var(--sp-10); } .discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: stretch; } .discover-card { background: #fff; border-radius: 24px; padding: var(--sp-8) var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); box-shadow: 0 14px 36px -20px rgba(14, 40, 65, 0.12); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .discover-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -20px rgba(14, 40, 65, 0.18); } .discover-card .illu { height: 180px; display: grid; place-items: center; margin-bottom: var(--sp-2); } .discover-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin: 0; color: var(--color-fg-1); } .discover-card p { font-size: 16px; line-height: 1.5; color: var(--color-fg-2); margin: 0; flex: 1; } .discover-card .btn { align-self: flex-start; margin-top: var(--sp-2); } @media (max-width: 900px) { .discover-grid { gap: var(--sp-4); } } @media (max-width: 640px) { .discover-grid { grid-template-columns: 1fr; gap: var(--sp-5); } } /* ========================= GET STARTED MODAL ========================= */ .gs-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-8); overflow-y: auto; } .gs-modal[data-open="true"] { display: flex; animation: gsFadeIn 220ms var(--ease-out); } @keyframes gsFadeIn { from { opacity: 0; } to { opacity: 1; } } .gs-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .gs-dialog { position: relative; width: min(1120px, 100%); max-height: calc(100vh - var(--sp-12)); margin: auto; overflow: auto; background: #fff; border-radius: 22px; padding: 40px 48px 44px; box-shadow: 0 32px 64px -16px rgba(14, 40, 65, 0.40); animation: gsRise 280ms var(--ease-out) both; display: flex; flex-direction: column; } @keyframes gsRise { from { transform: translateY(20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .gs-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: none; color: var(--color-fg-2); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .gs-close:hover { background: var(--color-bg-elev-2); color: var(--color-fg-1); } .gs-close svg { width: 18px; height: 18px; } .gs-title { font-family: var(--font-body); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; color: var(--color-fg-1); text-align: center; margin: 0 0 24px; padding-right: 0; flex: none; } .gs-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; gap: var(--sp-6); flex: 1; min-height: 0; } .gs-option { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 28px 22px; border-radius: 16px; transition: background var(--dur-fast) var(--ease-out); } .gs-option:hover { background: var(--color-bg-elev-1); } .gs-option .illu { flex: none; width: 180px; height: 180px; display: grid; place-items: center; } .gs-option .illu img { max-width: 100%; max-height: 100%; height: auto; display: block; } .gs-option .gs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .gs-option h3 { font-family: var(--font-body); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--color-fg-1); margin: 0; } .gs-option .gs-headline { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--vora-navy); margin: 0; } .gs-option p { font-size: 15.5px; line-height: 1.5; color: var(--color-fg-2); margin: 0; } .gs-option .gs-link { display: inline-flex; align-items: center; gap: 6px; color: var(--vora-orange); font-weight: var(--fw-bold); font-size: 14px; text-decoration: none; margin-top: 2px; } .gs-option .gs-link:hover { color: var(--vora-orange-700); } .gs-option .gs-link { white-space: nowrap; align-self: center; } [dir="rtl"] .gs-option { text-align: right; } [dir="rtl"] .gs-option .gs-link svg { transform: scaleX(-1); } @media (max-width: 720px) { /* Phone: stack as rows with a big image + title only (description hidden) */ .gs-dialog { padding: 46px 18px 22px; } .gs-options { grid-template-columns: 1fr; gap: 10px; } .gs-option { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--color-bg-elev-1); } .gs-option .illu { width: 96px; height: 96px; } .gs-option .gs-text { align-items: flex-start; gap: 2px; } .gs-option h3 { font-size: 18px; } .gs-option .gs-headline { font-size: 14px; color: var(--color-fg-2); font-weight: 500; } .gs-option p { display: none; } .gs-option .gs-link { font-size: 13px; white-space: nowrap; align-self: flex-start; margin-top: 4px; } .gs-title { font-size: 22px; margin-bottom: 18px; } } /* Vow-in-practice: orange sits behind the heading only, paragraph on white (mobile) */ @media (max-width: 640px) { [data-screen-label="Vow in practice"] { background: #FFFFFF !important; height: auto !important; } [data-screen-label="Vow in practice"] .vip-head { background: #E8590C; margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-8) var(--sp-4); } } [dir="rtl"] .gs-close { right: auto; left: 18px; } [dir="rtl"] .gs-title { padding-right: 0; padding-left: 40px; } /* Get-Started modal - arrow link CTA (used on merchant card) */ .gs-link { display: inline-flex; align-items: center; gap: 6px; color: var(--vora-orange); font-weight: var(--fw-bold); font-size: 15.5px; letter-spacing: var(--tracking-tight); transition: gap var(--dur-fast) var(--ease-out); margin-top: var(--sp-2); } .gs-link:hover { gap: 12px; } .gs-option .illu img { object-fit: contain; max-height: 180px; } [dir="rtl"] .gs-link svg { transform: scaleX(-1); } .gs-option .gs-headline { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--vora-navy); letter-spacing: -0.005em; margin: 0; } /* ========================= HOVER-PILL CTA (shared site-wide) Expanding-circle hover CTA - translated from framer-motion AnimatedDownloadButton. Starts as a 64×64 brand-orange disc with an arrow; expands to a 240px pill on hover, keeping the arrow visible on the right and revealing the label to its left. ========================= */ .hover-pill-cta { display: inline-grid; grid-template-columns: 0fr auto; align-items: center; justify-items: center; height: 64px; min-width: 64px; column-gap: 0; border-radius: 999px; background: var(--vora-orange); color: #fff !important; text-decoration: none !important; border: 0; overflow: hidden; position: relative; cursor: pointer; transition: grid-template-columns 720ms cubic-bezier(0.65, 0, 0.35, 1), column-gap 720ms cubic-bezier(0.65, 0, 0.35, 1), padding 720ms cubic-bezier(0.65, 0, 0.35, 1), background 260ms var(--ease-out); margin-top: 8px; padding: 0; } .hover-pill-cta .hp-label { font-family: 'Inter', sans-serif !important; font-weight: 300 !important; font-size: 14px !important; letter-spacing: 0.01em; white-space: nowrap; color: #fff !important; opacity: 0; overflow: hidden; min-width: 0; transition: opacity 360ms var(--ease-out) 240ms; text-align: left !important; } .hover-pill-cta .hp-icon { display: inline-flex; align-items: center; justify-content: center; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); flex: none; } .hover-pill-cta .hp-icon svg { width: 28px; height: 28px; stroke-width: 2.2; } .hover-pill-cta:hover, .hover-pill-cta:focus-visible { outline: none; grid-template-columns: 1fr auto; column-gap: 14px; padding: 0 22px 0 28px; } .hover-pill-cta:hover .hp-label, .hover-pill-cta:focus-visible .hp-label { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hover-pill-cta { grid-template-columns: 1fr auto; column-gap: 14px; padding: 0 22px 0 28px; transition: none; } .hover-pill-cta .hp-label { opacity: 1; } } /* Ghost variant - white pill, orange text + arrow. Used for secondary actions next to a primary hover-pill-cta. */ .hover-pill-cta--ghost { background: #fff; color: var(--vora-orange) !important; border: 1px solid #E6E7EA; } .hover-pill-cta--ghost .hp-label { color: var(--vora-orange) !important; } .hover-pill-cta--ghost .hp-icon svg { stroke: var(--vora-orange); } /* ========================= CONTACT PAGES - minimal header (logo + language only) ========================= */ body.contact-minimal-header .site-nav nav { display: none !important; } body.contact-minimal-header .site-nav .nav-cta > button.nav-icon:not(.lang-dd-trigger), body.contact-minimal-header .site-nav .nav-cta > .js-get-started { display: none !important; } body.contact-minimal-header .site-nav .container.inner { justify-content: space-between; } /* Flat VORA orange button treatment - applied site-wide to every .btn-primary. No gradient, no shadow, no hover lift/glow, no press scale. */ .btn-primary { background: var(--vora-orange) !important; box-shadow: none !important; } .btn-primary::before, .btn-primary::after { content: none !important; } .btn-primary:hover { background: var(--vora-orange) !important; transform: none !important; box-shadow: none !important; } .btn-primary:hover::before, .btn-primary:hover::after { opacity: 0 !important; } .btn-primary:active { transform: none !important; } /* ========================= TRANSLATED-LANGUAGE LAYOUT ROBUSTNESS English is the visual baseline; other languages (and RTL) run longer, so the English-tuned fixed heights / widths / absolute offsets overlap. Relax them - scoped to non-English only, so the English design is never affected. ========================= */ html:not([lang="en"]) h1, html:not([lang="en"]) h2, html:not([lang="en"]) h3 { height: auto !important; } /* Full-bleed colour bands given a fixed pixel height for English */ html:not([lang="en"]) .ed-hero.ed-hero-split, html:not([lang="en"]) .ed-section.ed-vedit-orange, html:not([lang="en"]) [data-screen-label="Our Vow"], html:not([lang="en"]) [data-screen-label="Hero"] { height: auto !important; } /* Company-home Discover lead is absolutely positioned for English - let it flow */ html:not([lang="en"]) .discover-section .hm-pillars-head { position: relative; } html:not([lang="en"]) .discover-section .hm-pillars-head > p[style*="absolute"] { position: static !important; left: auto !important; top: auto !important; width: auto !important; margin-top: 16px; } /* Headings/prose pinned to a fixed inline width for English → cap, don't clip */ html:not([lang="en"]) .hm-manifesto-heading, html:not([lang="en"]) .ed-hero.ed-hero-split .ed-belief, html:not([lang="en"]) .discover-section .hm-pillars-head h2 { width: auto !important; max-width: 100%; } /* ===== Form intake: error, challenge, busy states (assets/forms.js) ===== */ .form-error { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(230,46,46,0.07); border: 1px solid rgba(230,46,46,0.26); color: #B42318; font-size: 13px; line-height: 1.5; text-wrap: pretty; } .form-error[hidden] { display: none; } .vora-turnstile:not(:empty) { margin: 12px 0 0; } form.is-submitting button[type="submit"] { opacity: 0.55; cursor: progress; } img.static-slot{object-fit:cover}