/* ============================================================ LocalShouts — Early access landing Style: soft lavender + white, premium friendly SaaS ============================================================ */ :root { --hero-bg: radial-gradient(1200px 700px at 85% -10%, #efe9ff 0%, rgba(239,233,255,0) 60%), radial-gradient(900px 600px at -10% 30%, #f3efff 0%, rgba(243,239,255,0) 55%), linear-gradient(180deg, #fbfaff 0%, #ffffff 60%); --glass: rgba(255, 255, 255, 0.72); --glass-border: rgba(124, 58, 237, 0.10); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg); background: #fbfaff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { display: block; max-width: 100%; } ::selection { background: var(--brand-purple-200); color: var(--brand-navy); } /* ── App shell ─────────────────────────────────────────── */ .app { min-height: 100vh; background: var(--hero-bg); /* `clip` (not `hidden`) — `overflow-x: hidden` implicitly turns overflow-y from visible into auto, creating a scroll container that breaks `position: sticky` on the header. `clip` clips overflow without introducing a scroll container. Fallback handled at body. */ overflow-x: clip; } /* Fallback for browsers without `overflow: clip` (Safari < 16) — push the X-axis clip up to , which keeps sticky working on most engines. Adding it at body is also a safety net against any other bleed past the viewport. */ body { overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ── Header ────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 50; /* Translucent at top — the hero gradient + page background bleed through the blur. Becomes a frosted-glass bar on scroll (see body.is-scrolled rule below). */ background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid transparent; transition: background 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), backdrop-filter 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)); } /* Scrolled state — frosted-glass chrome + soft shadow so the header reads clearly over the page content beneath. `is-scrolled` is toggled by the scroll listener in app.jsx once you scroll > ~40px. */ body.is-scrolled .header { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom-color: rgba(124, 58, 237, 0.12); box-shadow: 0 8px 28px -18px rgba(30, 27, 75, 0.22); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; /* Don't let the flex parent squeeze the logo when the right-hand CTA / nav competes for space on narrow viewports. */ flex-shrink: 0; } .brand:hover { text-decoration: none; } /* CTA label swap defaults — desktop sees the long copy, mobile media query below flips to the short variant. */ .nav-cta-short { display: none; } .nav-cta-long { display: inline; } .brand-logo { height: 30px; width: auto; display: block; /* Belt-and-braces: the height + width:auto pair preserves intrinsic aspect ratio, but a flex ancestor with min-width:auto could still shrink the box on tiny screens. max-width:none keeps the natural width regardless of flex behavior. */ max-width: none; /* Drop shadow keeps the dark "Local" half legible on the translucent at-top state where the page bleeds through behind. */ filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5)); } .nav { display: flex; align-items: center; gap: 4px; } .nav-link { padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--fg-2); border-radius: 10px; transition: background var(--t-fast), color var(--t-fast); } .nav-link:hover { background: rgba(124, 58, 237, 0.06); color: var(--brand-navy); } .lang-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(124,58,237,0.1); font-size: 13px; font-weight: 600; color: var(--brand-navy); cursor: pointer; transition: all var(--t-fast); } .lang-pill:hover { background: white; border-color: var(--brand-purple-200); } .lang-pill.active { background: var(--brand-purple); color: white; border-color: var(--brand-purple); } .flag { width: 18px; height: 18px; border-radius: 999px; background: var(--bg-alt); display: inline-grid; place-items: center; overflow: hidden; font-size: 12px; } .hamburger { display: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); background: white; border-radius: 10px; align-items: center; justify-content: center; } /* ── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: all var(--t-fast) var(--ease-out); white-space: nowrap; letter-spacing: -0.005em; } .btn-primary { background: var(--brand-purple); color: white; box-shadow: 0 6px 18px -6px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255,255,255,.18); } .btn-primary:hover { background: var(--brand-purple-600); transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255,255,255,.18); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: rgba(255,255,255,0.7); color: var(--brand-navy); border: 1px solid rgba(124, 58, 237, 0.14); backdrop-filter: blur(8px); } .btn-ghost:hover { background: white; border-color: var(--brand-purple-200); } .btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 14px; } .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; } /* ── Hero ──────────────────────────────────────────────── */ .hero { padding: 56px 0 72px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1.1fr; gap: 56px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; background: rgba(255,255,255,0.75); border: 1px solid rgba(124,58,237,0.16); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--brand-purple-700); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 12px -6px rgba(124,58,237,.18); } .eyebrow .sparkle { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #a78bfa, #7c3aed); color: white; } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.18); animation: pulse 1.8s var(--ease-out) infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } } .headline { font-size: clamp(44px, 6vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--brand-navy); margin: 20px 0 18px; text-wrap: balance; } .headline .grad { background: linear-gradient(120deg, #7c3aed 0%, #a855f7 40%, #ec4899 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; white-space: nowrap; } .headline .grad::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(90deg, rgba(124,58,237,0.25), rgba(236,72,153,0.25)); border-radius: 999px; filter: blur(2px); } .subhead { font-size: 18px; line-height: 1.55; color: var(--fg-2); margin: 0 0 32px; max-width: 480px; text-wrap: pretty; } .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .trust-text { display: flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--fg-3); font-weight: 500; } /* ── Hero illustration stage ───────────────────────────── */ .stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 580px; margin-left: auto; } /* Soft purple glow behind hero stage */ .stage::before { content: ''; position: absolute; inset: -8% -10% -4% -8%; background: radial-gradient(closest-side at 70% 30%, rgba(167, 139, 250, 0.35), transparent 70%), radial-gradient(closest-side at 20% 80%, rgba(236, 72, 153, 0.22), transparent 70%); filter: blur(40px); z-index: -1; pointer-events: none; animation: glowBreath 8s var(--ease-in-out) infinite; } @keyframes glowBreath { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .stage-card { position: absolute; inset: 0; background: linear-gradient(160deg, #ffffff 0%, #f7f3ff 100%); border-radius: 32px; border: 1px solid rgba(124,58,237,0.1); box-shadow: 0 30px 80px -20px rgba(124, 58, 237, 0.22), 0 12px 40px -10px rgba(30, 27, 75, 0.08), inset 0 1px 0 rgba(255,255,255,0.6); overflow: hidden; } .stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .stage-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; } .stage-dots button { width: 22px; height: 6px; border-radius: 999px; background: rgba(124, 58, 237, 0.18); border: 0; padding: 0; cursor: pointer; transition: all var(--t-base) var(--ease-out); } .stage-dots button.on { background: var(--brand-purple); width: 36px; } .stage-dots button:hover { background: rgba(124, 58, 237, 0.5); } .scene-label { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(124,58,237,0.12); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--brand-navy); z-index: 4; box-shadow: 0 8px 24px -12px rgba(124,58,237,0.25); } .scene-label .scene-num { background: var(--brand-purple); color: white; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; } /* Floating star/sparkle decorations around the stage */ .float-deco { position: absolute; pointer-events: none; z-index: 3; } .float-deco svg { width: 100%; height: 100%; display: block; } .float-deco.s1 { top: -14px; left: 8%; width: 36px; animation: floaty 4s var(--ease-in-out) infinite; } .float-deco.s2 { bottom: 18%; right: -16px; width: 30px; animation: floaty 5s var(--ease-in-out) infinite reverse; } .float-deco.s3 { top: 14%; right: -20px; width: 42px; animation: floaty 6s var(--ease-in-out) infinite; } .float-deco.s4 { bottom: -16px; left: 22%; width: 28px; animation: floaty 4.5s var(--ease-in-out) infinite reverse; } @keyframes floaty { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(8deg); } } /* ── Steps ─────────────────────────────────────────────── */ .section { padding: 96px 0; position: relative; } .section-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-purple); padding: 6px 12px; background: var(--brand-purple-50); border-radius: 999px; margin-bottom: 16px; } .section-title { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.025em; color: var(--brand-navy); margin: 0 0 14px; line-height: 1.1; } .section-lede { font-size: 17px; color: var(--fg-2); max-width: 580px; line-height: 1.55; margin: 0 0 48px; } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; } .step-card { position: relative; background: white; border: 1px solid rgba(124, 58, 237, 0.08); border-radius: 20px; padding: 28px 24px 24px; transition: all var(--t-base) var(--ease-out); overflow: hidden; } .step-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(124,58,237,0.05), transparent 50%); opacity: 0; transition: opacity var(--t-base); } .step-card:hover { border-color: rgba(124, 58, 237, 0.2); transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(124, 58, 237, 0.25); } .step-card:hover::before { opacity: 1; } .step-num { position: absolute; top: 24px; right: 24px; font-size: 13px; font-weight: 700; color: var(--brand-purple); letter-spacing: 0.08em; } .step-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(140deg, #f5f1ff, #ede9fe); border: 1px solid rgba(124, 58, 237, 0.14); display: grid; place-items: center; color: var(--brand-purple); margin-bottom: 20px; position: relative; z-index: 1; } .step-card h3 { font-size: 17px; font-weight: 700; color: var(--brand-navy); margin: 0 0 8px; letter-spacing: -0.01em; position: relative; z-index: 1; } .step-card p { font-size: 14px; color: var(--fg-3); line-height: 1.55; margin: 0; position: relative; z-index: 1; } /* ── Demo section ──────────────────────────────────────── */ .demo { background: radial-gradient(800px 500px at 90% 10%, #efe9ff 0%, transparent 60%), radial-gradient(800px 500px at 10% 90%, #fbf2ff 0%, transparent 60%), #fbfaff; border-top: 1px solid rgba(124,58,237,0.06); border-bottom: 1px solid rgba(124,58,237,0.06); } .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; /* center the right preview card vertically against the taller left form, so the short review block doesn't trail a big empty white area beneath. */ align-items: center; } .demo-card { background: white; border-radius: 24px; border: 1px solid rgba(124, 58, 237, 0.1); padding: 28px; box-shadow: 0 16px 40px -20px rgba(30,27,75,.12); } .demo-card h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-purple); margin: 0 0 18px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--brand-navy); margin-bottom: 6px; } .field input, .field select { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); font-size: 14px; color: var(--fg); font-family: inherit; transition: all var(--t-fast); } .field input:focus, .field select:focus { outline: none; border-color: var(--brand-purple); background: white; box-shadow: var(--ring-focus); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: white; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; color: var(--fg-2); cursor: pointer; transition: all var(--t-fast); } .chip:hover { border-color: var(--brand-purple-200); color: var(--brand-purple); } .chip.on { background: var(--brand-purple); border-color: var(--brand-purple); color: white; } /* Google-style review preview */ .review-preview { background: white; border-radius: 16px; border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; /* Let height follow the actual review content rather than stretching to the left form's height — the grid now centers the card vertically. */ position: relative; } .review-preview::before { content: ''; position: absolute; inset: -20px; background: radial-gradient(closest-side at 80% 20%, rgba(167, 139, 250, 0.25), transparent 70%), radial-gradient(closest-side at 10% 100%, rgba(236, 72, 153, 0.15), transparent 70%); filter: blur(36px); z-index: -1; pointer-events: none; } .gp-head { display: flex; align-items: center; gap: 12px; } .gp-avatar { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, #fcd34d, #f59e0b); display: grid; place-items: center; color: white; font-weight: 700; font-size: 15px; } .gp-meta strong { display: block; font-size: 14px; color: var(--brand-navy); font-weight: 700; } .gp-meta span { font-size: 12px; color: var(--fg-3); } .gp-stars { display: flex; gap: 2px; color: #fbbf24; align-items: center; } .gp-stars svg { width: 18px; height: 18px; } .copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: white; color: var(--fg-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--t-fast); } .copy-btn:hover:not(:disabled) { background: var(--brand-purple-50); border-color: var(--brand-purple-200); color: var(--brand-purple); } .copy-btn:disabled { opacity: 0.5; cursor: not-allowed; } .copy-btn.copied, .copy-btn:has(svg[stroke-width="2.6"]) { background: #ecfdf5; border-color: #a7f3d0; color: #0d7c4a; } .gp-body { font-size: 15px; color: var(--fg); line-height: 1.6; font-weight: 400; min-height: 80px; } .gp-typing { display: inline-block; width: 8px; height: 18px; background: var(--brand-purple); border-radius: 1px; vertical-align: middle; animation: blink 1s steps(2) infinite; margin-left: 2px; } @keyframes blink { 50% { opacity: 0; } } .gp-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px dashed var(--line-strong); } .gp-ready { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--success); font-weight: 600; } .gp-google { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); font-weight: 500; } .gp-google img { width: 14px; height: 14px; } .gp-post-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--brand-purple); background: var(--brand-purple); color: white; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all var(--t-fast, 160ms) var(--ease-out, cubic-bezier(.16,1,.3,1)); box-shadow: 0 4px 12px -4px rgba(124,58,237,0.55); } .gp-post-btn:hover:not(:disabled) { background: var(--brand-purple-600, #6d28d9); transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(124,58,237,0.55); } .gp-post-btn:disabled { background: var(--bg-alt, #f3f4f6); color: var(--fg-4, #6b7280); border-color: var(--line-strong, #e5e7eb); box-shadow: none; cursor: not-allowed; } .gp-post-btn.on { background: #16a34a; border-color: #16a34a; color: white; box-shadow: 0 4px 12px -4px rgba(16,163,74,0.55); } .gp-post-btn.on:disabled { background: #16a34a; color: white; border-color: #16a34a; box-shadow: 0 4px 12px -4px rgba(16,163,74,0.45); } /* ── Feature strip ─────────────────────────────────────── */ .feature-strip { padding: 56px 0 96px; } .feature-grid { display: grid; /* 4-up on desktop for the 8-card "Outcomes you can measure" layout (was 6-up when the strip had 6 generic cards). */ grid-template-columns: repeat(4, 1fr); gap: 14px; } .feat { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px; background: white; border-radius: 16px; border: 1px solid rgba(124,58,237,0.08); transition: all var(--t-base); } .feat:hover { transform: translateY(-2px); border-color: rgba(124,58,237,0.18); box-shadow: 0 12px 24px -16px rgba(124,58,237,.3); } .feat-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-purple-50); color: var(--brand-purple); display: grid; place-items: center; } .feat strong { font-size: 13px; font-weight: 700; color: var(--brand-navy); letter-spacing: -0.005em; } .feat span { font-size: 12px; color: var(--fg-3); line-height: 1.4; } /* ── Modal ─────────────────────────────────────────────── */ .modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(30, 27, 75, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; padding: 20px; animation: fade .25s var(--ease-out); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 480px; background: white; border-radius: 24px; padding: 32px; position: relative; box-shadow: 0 30px 80px -16px rgba(30,27,75,.4); animation: rise .35s var(--ease-out); } @keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--bg-alt); color: var(--fg-3); display: grid; place-items: center; transition: all var(--t-fast); } .modal-close:hover { background: var(--brand-purple-50); color: var(--brand-purple); } .modal-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; background: var(--brand-purple-50); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--brand-purple); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; } .modal-eyebrow .sparkle { width: 18px; height: 18px; background: linear-gradient(135deg, #a78bfa, #7c3aed); border-radius: 999px; display: grid; place-items: center; } .modal h2 { font-size: 26px; font-weight: 800; color: var(--brand-navy); margin: 0 0 8px; letter-spacing: -0.02em; } .modal p { font-size: 15px; color: var(--fg-2); line-height: 1.55; margin: 0 0 22px; } .modal-form { display: flex; flex-direction: column; gap: 4px; } .modal-success { text-align: center; padding: 8px 0; } .success-ring { width: 72px; height: 72px; border-radius: 999px; background: #dcfce7; display: grid; place-items: center; margin: 0 auto 16px; position: relative; } .success-ring::before { content: ''; position: absolute; inset: -8px; border-radius: 999px; border: 2px solid rgba(16,185,129,.2); animation: ring-out 1.5s var(--ease-out) infinite; } @keyframes ring-out { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } /* ── Footer ───────────────────────────────────────────── */ /* ── Footer ───────────────────────────────────────────── */ /* ── Fade-in on scroll ─────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Micro-copy under primary CTA ──────────────────────── */ .cta-micro { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 500; color: var(--fg-3); } .cta-micro svg { color: var(--success); } /* ── Ready pulse on review preview when typewriter done ─ */ .review-preview.ready { box-shadow: 0 0 0 1px rgba(16,185,129,0.18), 0 12px 32px -16px rgba(16,185,129,0.18); } .review-preview.ready .gp-ready { animation: readyPop 0.6s var(--ease-out); } @keyframes readyPop { 0% { transform: scale(0.92); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } } /* ── Sticky mobile CTA bar ─────────────────────────────── */ .mobile-cta { display: none; } @media (max-width: 768px) { .mobile-cta { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(124,58,237,0.12); border-radius: 18px; box-shadow: 0 16px 40px -12px rgba(30,27,75,0.18); align-items: center; } .mobile-cta .label { flex: 1; font-size: 13px; font-weight: 600; color: var(--brand-navy); line-height: 1.25; } .mobile-cta .label span { display:block; font-size:11px; color: var(--fg-3); font-weight: 500; } .mobile-cta .btn { padding: 10px 14px; font-size: 13px; } body { padding-bottom: 84px; } } /* ── Floating LINE chat button ─────────────────────────── */ .line-fab { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; background: #06c755; color: white; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 14px 32px -10px rgba(6,199,85,0.55), 0 4px 10px -4px rgba(0,0,0,0.2); cursor: pointer; transition: all var(--t-base) var(--ease-out); } .line-fab::before { content: ''; position: absolute; inset: -4px; border-radius: 999px; background: rgba(6,199,85,0.35); z-index: -1; animation: lineHalo 2.4s var(--ease-out) infinite; } @keyframes lineHalo { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } } .line-fab:hover { transform: translateY(-2px); } .line-fab .ico { width: 28px; height: 28px; border-radius: 999px; background: white; color: #06c755; display: grid; place-items: center; font-weight: 900; font-size: 13px; letter-spacing: -0.05em; } /* WhatsApp variant — same FAB chrome, swap to WhatsApp green + circular icon containing the WhatsApp glyph (rendered as inline SVG in JSX). */ .line-fab.wa-fab { background: #25d366; box-shadow: 0 14px 32px -10px rgba(37,211,102,0.55), 0 4px 10px -4px rgba(0,0,0,0.2); } .line-fab.wa-fab::before { background: rgba(37,211,102,0.35); } .line-fab.wa-fab .ico { color: #25d366; } @media (max-width: 768px) { .line-fab { bottom: 92px; right: 16px; padding: 10px; } .line-fab .lbl { display: none; } .line-fab .ico { width: 32px; height: 32px; font-size: 15px; } } /* ── SEO footer paragraph ──────────────────────────────── */ .seo-footer { max-width: 720px; margin: 0 auto 18px; font-size: 12.5px; line-height: 1.65; color: var(--fg-4); text-align: center; padding: 0 16px; } .footer { padding: 32px 0 48px; text-align: center; border-top: 1px solid rgba(124,58,237,0.08); background: white; } .footer p { font-size: 13px; color: var(--fg-3); margin: 0; } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 960px) { .hero { padding: 32px 0 56px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .stage { margin: 0 auto; max-width: 480px; } .nav .hide-md { display: none; } .steps-grid { grid-template-columns: repeat(2, 1fr); } .demo-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .section { padding: 64px 0; } } @media (max-width: 640px) { .container { padding: 0 18px; } .header-inner { height: 64px; gap: 10px; } /* Allow the nav row to actually shrink — flex children default to min-width: auto which would prevent it from going below content size and force the button off-screen. */ .nav { min-width: 0; flex-wrap: nowrap; } /* Smaller logo on phones — leaves room for the "Join Early Access" CTA without either side getting cramped. */ .brand-logo { height: 24px; } /* The header button is the flexible piece on mobile, not the brand. */ .nav .btn-primary { padding: 7px 12px; font-size: 13px; min-width: 0; white-space: nowrap; } /* Language pills stay visible on mobile but drop their text label — flag-only chip saves ~32px per pill which the CTA reclaims. */ .lang-pill-text { display: none; } .lang-pill { padding: 6px 8px; gap: 0; } /* CTA label swap — long copy on desktop, "Join" / "สมัคร" on mobile. */ .nav-cta-long { display: none; } .nav-cta-short { display: inline; } .hamburger { display: inline-flex; } .nav .hide-sm { display: none; } .steps-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .demo-card { padding: 22px; } .headline { font-size: 38px; } .subhead { font-size: 16px; } } /* ── SEO content blocks ───────────────────────────────── */ /* Platform-capabilities section between FeatureStrip and FAQ. Six short semantic blurbs (article > h3 + p) in a calm 3-up grid. Designed to add keyword-rich SEO surface without dominating visually — quiet borders, modest padding, no card glow. The FeatureStrip above keeps the marketing energy; this section is the substance Google reads. */ .seo-blocks-section { padding-top: 0; } .seo-blocks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .seo-block { background: white; border: 1px solid rgba(124, 58, 237, 0.10); border-radius: 18px; padding: 26px 24px; transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .seo-block:hover { border-color: rgba(124, 58, 237, 0.22); transform: translateY(-2px); box-shadow: 0 16px 40px -20px rgba(76, 29, 149, 0.18); } .seo-block h3 { font-size: 18px; font-weight: 700; color: var(--brand-navy); margin: 0 0 10px; letter-spacing: -0.01em; } .seo-block p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; } /* ── FAQ ──────────────────────────────────────────────── */ /* Native

accordion. The answer text is always in the initial DOM (open or not) so Google can crawl it without running JS; only the visual collapse is interactive. Clicking the row toggles open state via the browser; the FAQPage JSON-LD schema in mirrors the same Q&A so structured-data matches what users see. */ .faq-section { padding-top: 32px; } .faq-list { max-width: 820px; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: white; border: 1px solid rgba(124, 58, 237, 0.10); border-radius: 16px; overflow: hidden; transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .faq-item[open] { border-color: rgba(124, 58, 237, 0.22); box-shadow: 0 16px 40px -20px rgba(76, 29, 149, 0.16); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; user-select: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q::marker { content: ''; } .faq-q h3 { font-size: 16px; font-weight: 700; color: var(--brand-navy); margin: 0; letter-spacing: -0.005em; line-height: 1.35; } .faq-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--brand-purple-50); color: var(--brand-purple); transition: transform var(--t-base) var(--ease-out); } .faq-item[open] .faq-toggle { transform: rotate(180deg); } .faq-a { padding: 0 22px 22px; font-size: 15px; line-height: 1.65; color: var(--fg-2); } @media (max-width: 960px) { .seo-blocks-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .seo-blocks-grid { grid-template-columns: 1fr; } .seo-block { padding: 22px 20px; } .faq-q { padding: 18px 18px; } .faq-a { padding: 0 18px 20px; } } /* ── Hero proof badges ────────────────────────────────── */ /* Three short factual capability pills under the hero CTAs (rendered by hero.jsx). Staggered fade-in via inline animationDelay so they feel alive without being noisy. */ .proof-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .proof-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(124, 58, 237, 0.12); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--brand-navy); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); animation: pbFade 600ms var(--ease-out) forwards; } .proof-badge svg { color: var(--brand-purple); } @keyframes pbFade { to { opacity: 1; transform: translateY(0); } } /* ── CTA banner — premium replacement ─────────────────── */ /* Replaces the previous inline-styled CTA section in app.jsx with a deeper purple gradient, twinkling stars, eyebrow pill with pulsing dot, gradient accent on the headline's anchor phrase, dual CTAs, and three urgency chips. All copy is preserved from the previous version. */ .cta-banner { position: relative; padding: 88px 0 96px; background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #6d28d9 100%); color: white; text-align: center; overflow: hidden; isolation: isolate; } .cta-bg { position: absolute; inset: 0; background: radial-gradient(600px 400px at 85% 20%, rgba(255, 255, 255, 0.18), transparent 60%), radial-gradient(500px 300px at 15% 85%, rgba(236, 72, 153, 0.28), transparent 60%), radial-gradient(800px 500px at 50% 50%, rgba(167, 139, 250, 0.10), transparent 60%); pointer-events: none; } .cta-stars { position: absolute; inset: 0; pointer-events: none; } .cta-star { position: absolute; width: 5px; height: 5px; background: white; border-radius: 999px; box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.6); opacity: 0; animation: ctaTwinkle 4s ease-in-out infinite; } @keyframes ctaTwinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.8; transform: scale(1.2); } } .cta-inner { position: relative; z-index: 1; } .cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 18px; } .cta-eyebrow-dot { width: 7px; height: 7px; border-radius: 999px; background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.20); animation: ctaDotPulse 1.6s var(--ease-out) infinite; } @keyframes ctaDotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.20); } 50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.06); } } .cta-title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin: 0 auto 14px; max-width: 820px; text-wrap: balance; } .cta-grad { background: linear-gradient(120deg, #fde68a 0%, #fbbf24 50%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta-sub { font-size: 17px; line-height: 1.55; opacity: 0.88; margin: 0 auto 30px; max-width: 580px; text-wrap: pretty; } .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; } .cta-primary { background: white; color: var(--brand-purple); font-weight: 800; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transition: all var(--t-base) var(--ease-out); position: relative; } .cta-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(0, 0, 0, 0.45), 0 0 0 1px white inset, 0 0 0 6px rgba(255, 255, 255, 0.10); } .cta-secondary { background: rgba(255, 255, 255, 0.08); color: white; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cta-secondary:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.40); } .cta-urgency { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 13px; font-weight: 600; opacity: 0.92; } .cta-urg-item { display: inline-flex; align-items: center; gap: 6px; } .cta-urg-item svg { color: #fde68a; } @media (max-width: 600px) { .cta-banner { padding: 64px 0 80px; } .cta-urgency { gap: 10px 18px; font-size: 12.5px; } } /* ── Outcomes you can measure — FeatureStrip KPI badges ── */ /* The 8-card "Outcomes" strip from the Claude Design new-landing handoff. Each .feat card carries title + short description + a measurable KPI pill (.feat-kpi). The card itself fades in with a staggered delay via inline animationDelay; the entrance reuses the pbFade keyframe defined earlier for hero proof badges. */ .feat { position: relative; opacity: 0; transform: translateY(10px); animation: pbFade 600ms var(--ease-out) forwards; } /* Selector is `.feat .feat-kpi` (specificity 0,2,0) so it beats the existing `.feat span` (0,1,1) rule that styles the description text. */ .feat .feat-kpi { display: inline-flex; align-items: center; padding: 3px 9px; margin-top: 4px; background: linear-gradient(135deg, var(--brand-purple-50), #fff); border: 1px solid rgba(124, 58, 237, 0.16); border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--brand-purple); letter-spacing: -0.005em; white-space: nowrap; line-height: 1.3; } /* ── Industries — "Made for every local business" ─────── */ /* Card grid of local-business segments (café, restaurant, salon, clinic, hotel, gym, retail). Each card carries an illustrative example review with a 5-star row and an "Example review" footer pill so placeholder quotes aren't mistaken for real customer testimonials. Card entrance reuses the pbFade keyframe defined earlier. */ .industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .industry-card { background: white; border: 1px solid rgba(124, 58, 237, 0.08); border-radius: 18px; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 12px; transition: all var(--t-base) var(--ease-out); position: relative; overflow: hidden; opacity: 0; transform: translateY(10px); animation: pbFade 600ms var(--ease-out) forwards; } .industry-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(124, 58, 237, 0.06), transparent 50%); opacity: 0; transition: opacity var(--t-base); } .industry-card:hover { border-color: rgba(124, 58, 237, 0.22); transform: translateY(-3px); box-shadow: 0 14px 36px -18px rgba(124, 58, 237, 0.30); } .industry-card:hover::before { opacity: 1; } .ind-head { display: flex; align-items: center; gap: 10px; position: relative; } .ind-ico { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, #f5f1ff, #ede9fe); border: 1px solid rgba(124, 58, 237, 0.14); color: var(--brand-purple); display: grid; place-items: center; } .ind-head strong { font-size: 15px; font-weight: 700; color: var(--brand-navy); letter-spacing: -0.01em; } .ind-quote { position: relative; z-index: 1; } .ind-stars { display: block; color: #fbbf24; font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; } .ind-quote p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); font-style: italic; text-wrap: pretty; } .ind-foot { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(124, 58, 237, 0.14); font-size: 11px; font-weight: 600; color: var(--fg-3); letter-spacing: 0.02em; text-transform: uppercase; } .ind-foot svg { color: var(--brand-purple); } @media (max-width: 960px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .industries-grid { grid-template-columns: 1fr; } } /* ── Comparison — Traditional vs Localshouts ──────────── */ /* Two-column positioning block with a glowing VS badge in the middle. "Traditional" column is intentionally desaturated; "Localshouts" column has the elevated, glassy treatment + ambient purple glow (glowBreath keyframe defined earlier in the hero section). Collapses to a single column on tablet/mobile via the .compare-grid breakpoint. */ .compare-title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-wrap: balance; } .compare-title-b { position: relative; font-size: 0.74em; font-weight: 700; color: var(--brand-purple); letter-spacing: -0.015em; display: inline-flex; align-items: center; gap: 12px; } .compare-title-b::before { content: ''; display: inline-block; width: 36px; height: 2px; background: linear-gradient(90deg, var(--brand-purple), transparent); border-radius: 999px; } .comparison .compare-grid { display: grid; grid-template-columns: 1fr auto 1.05fr; gap: 20px; align-items: stretch; } .compare-col { border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; isolation: isolate; transition: all 320ms var(--ease-out); } .compare-col::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; } .compare-old { background: linear-gradient(180deg, rgba(248, 247, 250, 0.92) 0%, rgba(241, 240, 245, 0.92) 100%); border: 1px solid rgba(30, 27, 75, 0.10); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 14px -10px rgba(30, 27, 75, 0.12); } .compare-old::before { background: radial-gradient(closest-side at 30% 0%, rgba(30, 27, 75, 0.04), transparent 70%); } .compare-old:hover { transform: translateY(-1px); } .compare-new { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 243, 255, 0.92) 100%); border: 1px solid rgba(124, 58, 237, 0.22); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 56px -24px rgba(124, 58, 237, 0.42), 0 8px 18px -12px rgba(124, 58, 237, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .compare-new::after { content: ''; position: absolute; inset: -10% -8% -14% -8%; background: radial-gradient(closest-side at 70% 80%, rgba(167, 139, 250, 0.32), transparent 70%), radial-gradient(closest-side at 20% 20%, rgba(236, 72, 153, 0.18), transparent 70%); filter: blur(28px); z-index: -2; pointer-events: none; border-radius: inherit; animation: glowBreath 8s var(--ease-in-out) infinite; } .compare-new::before { background: radial-gradient(closest-side at 0% 0%, rgba(255, 255, 255, 0.7), transparent 50%), radial-gradient(closest-side at 100% 100%, rgba(167, 139, 250, 0.10), transparent 60%); } .compare-new:hover { transform: translateY(-2px); } .compare-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed rgba(124, 58, 237, 0.10); } .compare-old .compare-head { border-bottom-color: rgba(30, 27, 75, 0.10); } .compare-sub { font-size: 12px; font-weight: 500; color: var(--fg-3); letter-spacing: -0.005em; line-height: 1.4; text-wrap: pretty; } .compare-sub-new { color: var(--brand-purple-700); font-weight: 600; } .compare-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .compare-badge-old { background: rgba(30, 27, 75, 0.06); color: var(--fg-3); } .compare-badge-old svg { width: 18px; height: 18px; background: rgba(30, 27, 75, 0.10); border-radius: 999px; padding: 3px; color: var(--fg-3); } .compare-badge-new { background: linear-gradient(135deg, var(--brand-purple), #6d28d9); color: white; box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.55); } .compare-badge-new svg { width: 18px; height: 18px; background: rgba(255, 255, 255, 0.20); border-radius: 999px; padding: 3px; } .compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .compare-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; text-wrap: pretty; } .compare-old .compare-list li { color: var(--fg-3); font-weight: 500; } .compare-new .compare-list li { color: var(--brand-navy); font-weight: 500; } .cmp-ico { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; } .cmp-x { background: rgba(30, 27, 75, 0.08); color: var(--fg-4); } .cmp-check { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; box-shadow: 0 2px 6px -2px rgba(22, 163, 74, 0.30); } .compare-divider { display: grid; place-items: center; position: relative; width: 60px; } .compare-divider::before, .compare-divider::after { content: ''; position: absolute; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.30), transparent); z-index: -1; } .compare-divider::before { top: 0; height: calc(50% - 30px); } .compare-divider::after { bottom: 0; height: calc(50% - 30px); } .vs-badge { position: relative; width: 54px; height: 54px; border-radius: 999px; background: linear-gradient(135deg, #ffffff 0%, #f5f1ff 100%); border: 1px solid rgba(124, 58, 237, 0.22); display: grid; place-items: center; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 26px -10px rgba(124, 58, 237, 0.50), 0 0 0 6px rgba(124, 58, 237, 0.05); isolation: isolate; } .vs-text { font-size: 13px; font-weight: 800; color: var(--brand-purple); letter-spacing: 0.08em; text-transform: uppercase; } .vs-glow { position: absolute; inset: -3px; border-radius: 999px; background: conic-gradient(from 0deg, rgba(124, 58, 237, 0.45), rgba(236, 72, 153, 0.32), rgba(124, 58, 237, 0.45)); z-index: -1; opacity: 0.6; filter: blur(7px); animation: vsPulse 3.2s var(--ease-in-out) infinite; } @keyframes vsPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.18); opacity: 0.85; } } @media (max-width: 820px) { .comparison .compare-grid { grid-template-columns: 1fr; gap: 14px; } .compare-divider { width: auto; padding: 4px 0; } .compare-divider::before, .compare-divider::after { position: static; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.30), transparent); transform: none; align-self: center; } } /* ============================================================ QR Mockups + Testimonials — pulled from the v3 design handoff (sections.jsx adds and to the home page). Copied verbatim from the design's upgrades.css; the Testimonials rules also style the empty-state placeholder card we ship until real customer quotes land — see .testi-empty. ============================================================ */ /* ── QR MOCKUPS ─────────────────────────────────────────── */ .qr-mockups { background: radial-gradient(800px 500px at 10% 10%, #efe9ff 0%, transparent 60%), radial-gradient(800px 500px at 90% 90%, #fbf2ff 0%, transparent 60%), #fbfaff; border-top: 1px solid rgba(124,58,237,0.06); border-bottom: 1px solid rgba(124,58,237,0.06); } .qr-mock-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .qr-mock { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 18px; transition: all var(--t-base) var(--ease-out); opacity: 0; transform: translateY(10px); animation: pbFade 600ms var(--ease-out) forwards; } .qr-mock:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(124,58,237,0.40); border-color: rgba(124,58,237,0.22); } .qr-mock-stage { aspect-ratio: 1; background: linear-gradient(160deg, #f7f3ff 0%, #f0eaff 100%); border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; } .qr-mock-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side at 30% 30%, rgba(255,255,255,0.6), transparent 70%); pointer-events: none; } .qr-mock-meta { display: flex; flex-direction: column; gap: 2px; } .qr-mock-meta strong { font-size: 14px; color: var(--brand-navy); font-weight: 700; letter-spacing: -0.005em; } .qr-mock-meta span { font-size: 12px; color: var(--fg-3); } /* The QR pattern used inside mockups */ .qr-pattern { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: white; border-radius: 4px; padding: 3px; } .qd { display: block; aspect-ratio: 1; } .qd.on { background: #1e1b4b; } /* Table tent */ .ts-tent { position: relative; width: 64%; perspective: 600px; } .ts-tent-front { background: linear-gradient(180deg, #fff 0%, #f7f3ff 100%); border: 1px solid rgba(124,58,237,0.20); border-radius: 10px; padding: 14px 12px 12px; box-shadow: 0 16px 32px -16px rgba(30,27,75,0.30); text-align: center; transform: rotateX(8deg); transform-origin: bottom center; animation: tentSway 6s ease-in-out infinite; } @keyframes tentSway { 0%, 100% { transform: rotateX(8deg) rotateY(-3deg); } 50% { transform: rotateX(8deg) rotateY(3deg); } } .ts-tent-base { height: 4px; background: linear-gradient(180deg, rgba(30,27,75,0.18), transparent); border-radius: 999px; margin: 2px 8px 0; filter: blur(2px); } .ts-script { font-family: var(--font-script); font-size: 18px; color: var(--brand-navy); display: block; line-height: 1; margin-bottom: 2px; } .ts-stars { display: block; color: #fbbf24; font-size: 10px; letter-spacing: 1.5px; margin-bottom: 6px; } .ts-qr { width: 60%; margin: 0 auto; } .ts-qr-lg { width: 70%; } .ts-brand { display: block; margin-top: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--brand-purple); text-transform: uppercase; } /* Counter display */ .ts-counter { position: relative; width: 70%; } .ts-counter-card { background: white; border: 1px solid rgba(124,58,237,0.16); border-radius: 14px; padding: 14px 12px; text-align: center; box-shadow: 0 14px 28px -16px rgba(30,27,75,0.28); position: relative; animation: counterFloat 5s ease-in-out infinite; } @keyframes counterFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .ts-eyebrow { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--brand-purple); text-transform: uppercase; margin-bottom: 8px; } .ts-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 5px 10px; background: var(--brand-purple); color: white; border-radius: 999px; font-size: 9.5px; font-weight: 700; } .ts-counter-base { height: 6px; margin: -2px 14px 0; background: linear-gradient(180deg, rgba(124,58,237,0.18), transparent); border-radius: 0 0 8px 8px; filter: blur(1px); } /* Window sticker */ .ts-window { position: relative; width: 80%; height: 80%; background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(255,255,255,0.6)); border: 2px solid rgba(124,58,237,0.18); border-radius: 6px; display: grid; place-items: center; overflow: hidden; } .ts-window-glare { position: absolute; top: -20%; left: -20%; width: 60%; height: 140%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent); transform: rotate(20deg); animation: glareSweep 5s ease-in-out infinite; } @keyframes glareSweep { 0%, 100% { transform: translateX(-30%) rotate(20deg); opacity: 0.5; } 50% { transform: translateX(120%) rotate(20deg); opacity: 0.9; } } .ts-sticker { position: relative; width: 58%; aspect-ratio: 1; border-radius: 999px; background: white; border: 2px solid var(--brand-purple); display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255,255,255,0.6), 0 12px 24px -12px rgba(124,58,237,0.30); animation: stickerSpin 24s linear infinite; } @keyframes stickerSpin { to { transform: rotate(360deg); } } .ts-sticker-ring { width: 70%; height: 70%; border-radius: 999px; background: white; display: grid; place-items: center; animation: stickerSpin 24s linear infinite reverse; } .ts-sticker-ring .ts-qr { width: 90%; } .ts-sticker-text { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .ts-sticker-text::before { /* Use SVG textPath would be ideal — fallback: just hide text, the QR + circle reads */ content: ''; } /* Packaging insert */ .ts-box { position: relative; width: 80%; } .ts-box-lid { height: 8px; background: linear-gradient(180deg, #c4b5fd, #a78bfa); border-radius: 6px 6px 0 0; } .ts-box-card { background: white; border: 1px solid rgba(124,58,237,0.14); border-top: 0; border-radius: 0 0 10px 10px; padding: 12px; box-shadow: 0 14px 28px -16px rgba(30,27,75,0.28); } .ts-thanks { display: block; font-family: var(--font-script); font-size: 16px; color: var(--brand-navy); margin-bottom: 8px; } .ts-card-row { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; } .ts-card-row .ts-qr { width: 36px; } .ts-card-row strong { display: block; font-size: 11px; font-weight: 700; color: var(--brand-navy); letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 2px; } .ts-card-row span { font-size: 9.5px; color: var(--fg-3); line-height: 1.3; } /* Receipt */ .ts-receipt { position: relative; width: 56%; background: white; border: 1px solid rgba(30,27,75,0.10); border-radius: 4px; padding: 12px 10px 14px; box-shadow: 0 14px 28px -16px rgba(30,27,75,0.28); font-family: var(--font-mono); } /* Torn bottom edge */ .ts-receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px; background: radial-gradient(circle at 4px 0, white 3px, transparent 3.5px) 0 0 / 8px 6px repeat-x; } .ts-receipt-lines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .rl { display: block; height: 4px; border-radius: 2px; background: rgba(30,27,75,0.18); } .rl-1 { width: 70%; } .rl-2 { width: 55%; } .rl-3 { width: 65%; } .rl-4 { width: 40%; } .rl-divider { border-top: 1px dashed rgba(30,27,75,0.20); background: transparent; height: 4px; border-radius: 0; } .rl-5 { width: 50%; background: rgba(124,58,237,0.30); } .ts-receipt-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; } .ts-receipt-qr .ts-qr { width: 60%; } .ts-receipt-qr span { font-family: var(--font-sans); font-size: 9px; font-weight: 700; color: var(--brand-purple); letter-spacing: 0.05em; text-transform: uppercase; } @media (max-width: 1100px) { .qr-mock-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .qr-mock-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .qr-mock { padding: 14px; } } @media (max-width: 420px) { .qr-mock-grid { grid-template-columns: 1fr; } } /* ── TESTIMONIALS ──────────────────────────────────────── */ .testimonials { background: radial-gradient(700px 400px at 90% 10%, rgba(239,233,255,0.6), transparent 60%), #fbfaff; } .testi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .testi-card { background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 20px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; transition: all var(--t-base) var(--ease-out); position: relative; overflow: hidden; opacity: 0; transform: translateY(10px); animation: pbFade 600ms var(--ease-out) forwards; } .testi-card::before { content: '"'; position: absolute; top: -22px; right: 12px; font-family: Georgia, serif; font-size: 100px; color: rgba(124,58,237,0.06); line-height: 1; pointer-events: none; } .testi-card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.22); box-shadow: 0 18px 40px -22px rgba(124,58,237,0.30); } .testi-head { display: flex; align-items: center; gap: 10px; } .testi-av { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: white; font-weight: 700; font-size: 15px; flex-shrink: 0; box-shadow: 0 4px 10px -4px rgba(30,27,75,0.20); } .testi-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .testi-meta strong { font-size: 13.5px; font-weight: 700; color: var(--brand-navy); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testi-meta span { font-size: 11.5px; color: var(--fg-3); } .testi-stars { display: flex; gap: 1px; } .testi-text { font-size: 14px; line-height: 1.6; color: var(--fg); margin: 0; text-wrap: pretty; flex: 1; } .testi-kpi { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; align-self: flex-start; background: var(--brand-purple-50); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--brand-purple); margin-top: 4px; } .testi-kpi svg { color: var(--brand-purple); } @media (max-width: 1100px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .testi-grid { grid-template-columns: 1fr; } } /* Testimonials empty-state placeholder — full-width card shown when the items array is intentionally absent (no fabricated quotes). */ .testi-grid-empty { grid-template-columns: 1fr; } .testi-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 28px; border-radius: 16px; background: #fff; border: 1px dashed rgba(124,58,237,0.25); text-align: center; } .testi-empty svg { color: var(--brand-purple); opacity: 0.7; } .testi-empty p { margin: 0; font: 500 14px/1.5 var(--font-sans); color: var(--fg-3); max-width: 38ch; } /* AI demo — Review-language pill row. Was lost when the AI demo was simplified to follow the page-level EN/TH toggle; restored alongside the GB/TH/IN/AE selector that lets the live preview render reviews in any of four locales. Flags are inline SVGs (see header.jsx ) so they render the same on Windows, which lacks emoji-flag glyphs. */ .rev-lang-row { display: flex; flex-wrap: wrap; gap: 6px; } .rev-lang { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: white; border: 1px solid var(--line-strong); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fg-2); cursor: pointer; transition: all var(--t-fast); } .rev-lang:hover { border-color: var(--brand-purple-200); color: var(--brand-purple); } .rev-lang.on { background: var(--brand-purple); color: white; border-color: var(--brand-purple); box-shadow: 0 4px 12px -4px rgba(124,58,237,0.45); } .rl-flag { display: inline-flex; line-height: 1; } /* ── AI demo: state pipeline (drafting → polishing → ready → posted) ── */ .state-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 12px 14px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); position: relative; margin-bottom: 14px; } .sp-step { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 12px; font-weight: 600; color: var(--fg-4, #6b7280); position: relative; transition: color 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)); } .sp-step + .sp-step::before { content: ''; position: absolute; left: -10px; top: 50%; width: 14px; height: 1px; background: rgba(124,58,237,0.18); } .sp-dot { width: 22px; height: 22px; border-radius: 999px; background: var(--bg-alt, #f3f4f6); color: var(--fg-3, #6b7280); display: grid; place-items: center; font-weight: 700; font-size: 11px; border: 1px solid rgba(124,58,237,0.10); transition: all 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)); flex-shrink: 0; } .sp-step.active { color: var(--brand-navy, #1e1b4b); } .sp-step.active .sp-dot { background: var(--brand-purple); color: white; border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(124,58,237,0.16); animation: spPulse 1.4s var(--ease-in-out, ease-in-out) infinite; } @keyframes spPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(124,58,237,0.16); } 50% { box-shadow: 0 0 0 7px rgba(124,58,237,0.05); } } .sp-step.done { color: var(--brand-navy, #1e1b4b); } .sp-step.done .sp-dot { background: #dcfce7; color: #16a34a; border-color: #a7f3d0; } .sp-label { white-space: nowrap; } /* ── AI demo: QR mini-mockup card ── */ .qr-mini { display: flex; align-items: center; gap: 16px; padding: 16px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); margin-top: 14px; } .qr-mini-card { position: relative; width: 132px; flex-shrink: 0; padding: 12px 12px 10px; background: linear-gradient(180deg, #fff 0%, #f7f3ff 100%); border-radius: 12px; border: 1px solid rgba(124,58,237,0.12); box-shadow: 0 10px 28px -14px rgba(124,58,237,0.30); text-align: center; } .qr-mini-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; } .qr-mini-script { font-family: var(--font-script, 'Caveat', cursive); font-size: 18px; color: var(--brand-navy, #1e1b4b); letter-spacing: -0.01em; line-height: 1; } .qr-mini-stars { color: #fbbf24; font-size: 11px; letter-spacing: 1px; } .qr-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; width: 84px; margin: 0 auto 8px; padding: 6px; background: white; border-radius: 8px; border: 1px solid rgba(30,27,75,0.08); } .qg { display: block; aspect-ratio: 1; background: transparent; } .qg.on { background: #1e1b4b; border-radius: 1px; } .qr-mini-foot { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--fg-3, #6b7280); font-weight: 600; } .qr-scan-ring { position: absolute; inset: 8px; border-radius: 12px; border: 2px solid var(--brand-purple); opacity: 0; pointer-events: none; animation: scanRing 2.4s var(--ease-out, cubic-bezier(.16,1,.3,1)) infinite; } @keyframes scanRing { 0% { transform: scale(0.85); opacity: 0; } 40% { opacity: 0.55; } 100% { transform: scale(1.1); opacity: 0; } } .qr-mini-meta { display: flex; flex-direction: column; gap: 2px; } .qr-mini-meta strong { font-size: 14px; font-weight: 700; color: var(--brand-navy, #1e1b4b); letter-spacing: -0.01em; } .qr-mini-meta span { font-size: 12.5px; color: var(--fg-3, #6b7280); line-height: 1.5; } @media (max-width: 768px) { .state-pipe { grid-template-columns: repeat(4, 1fr); padding: 10px 8px; } .sp-step { flex-direction: column; gap: 6px; text-align: center; font-size: 10.5px; padding: 4px 2px; } .sp-step + .sp-step::before { display: none; } .sp-label { white-space: normal; line-height: 1.2; } .qr-mini { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; } .qr-mini-card { width: 150px; margin: 0 auto; } .qr-mini-meta { align-items: center; } } @media (max-width: 540px) { .state-pipe { padding: 8px 6px; gap: 2px; } .sp-dot { width: 18px; height: 18px; font-size: 10px; } .sp-label { font-size: 9.5px; } } @media (max-width: 380px) { .sp-label { display: none; } .state-pipe { padding: 8px; } .sp-step { gap: 0; } } /* ════════════════════════════════════════════════════════════════ SUB-PAGES — shared shell for About / Careers / Contact / Help / FAQs / Privacy / Terms / Cookies. Stays close to the home design language (gradient hero band, soft cards on a tinted surface). ════════════════════════════════════════════════════════════════ */ .app-subpage { background: linear-gradient(180deg, #fbfaff 0%, #f4f1ff 100%); } .page-hero { position: relative; padding: 72px 0 36px; background: linear-gradient(180deg, rgba(124,58,237,0.08) 0%, rgba(124,58,237,0) 100%); text-align: center; } .page-eyebrow { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-purple); background: white; border: 1px solid var(--brand-purple-200, rgba(124,58,237,0.18)); border-radius: 999px; box-shadow: 0 4px 12px -8px rgba(124,58,237,0.30); margin-bottom: 14px; } .page-title { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-navy, #1e1b4b); margin: 0 auto 14px; max-width: 820px; text-wrap: balance; } .page-lede { font-size: 17px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0 auto; max-width: 720px; text-wrap: pretty; } .page-body { padding: 36px 0 80px; } .page-container { max-width: 1040px; } .page-section-title { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: var(--brand-navy, #1e1b4b); margin: 40px 0 18px; } .page-card { background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; padding: 26px 26px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .page-card-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--brand-navy, #1e1b4b); margin: 0 0 12px; } .page-card-body p { font-size: 15.5px; line-height: 1.65; color: var(--fg-2, #4b5563); margin: 0 0 12px; } .page-card-body p:last-child { margin-bottom: 0; } .prose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .page-bullets { margin: 0; padding-left: 18px; color: var(--fg-2, #4b5563); } .page-bullets li { font-size: 15px; line-height: 1.6; margin-bottom: 8px; } .page-bullets li::marker { color: var(--brand-purple); } .page-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; } .page-steps li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(124,58,237,0.01)); border: 1px solid rgba(124,58,237,0.10); border-radius: 12px; } .page-steps li strong { font-size: 14.5px; font-weight: 800; color: var(--brand-navy, #1e1b4b); } .page-steps li span { font-size: 14.5px; color: var(--fg-2, #4b5563); line-height: 1.55; } .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 8px; } .value-card { padding: 22px 22px 20px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .value-card h3 { font-size: 16px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0 0 8px; letter-spacing: -0.01em; } .value-card p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2, #4b5563); margin: 0; } .careers-cta { margin-top: 40px; padding: 36px 28px; text-align: center; background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(124,58,237,0.02)); border: 1px solid rgba(124,58,237,0.18); border-radius: 18px; } .careers-cta h2 { font-size: 24px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0 0 10px; letter-spacing: -0.01em; } .careers-cta p { font-size: 15.5px; color: var(--fg-2, #4b5563); margin: 0 auto 18px; max-width: 540px; line-height: 1.55; } /* ── Contact page ── */ .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; } .contact-form { display: grid; gap: 14px; } .contact-field { display: grid; gap: 6px; } .contact-field span { font-size: 13px; font-weight: 600; color: var(--fg-2, #4b5563); } .contact-field input, .contact-field select, .contact-field textarea { font: inherit; font-size: 15px; padding: 11px 13px; background: white; border: 1px solid rgba(124,58,237,0.18); border-radius: 10px; color: var(--brand-navy, #1e1b4b); transition: border-color 160ms var(--ease-out, ease-out), box-shadow 160ms var(--ease-out, ease-out); width: 100%; } .contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: none; border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(124,58,237,0.12); } .contact-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; } .contact-hint { font-size: 12.5px; color: var(--fg-3, #6b7280); margin: 4px 0 0; } .contact-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; } .contact-dl dt { font-size: 12.5px; font-weight: 700; color: var(--fg-3, #6b7280); text-transform: uppercase; letter-spacing: 0.05em; align-self: center; } .contact-dl dd { font-size: 15px; color: var(--brand-navy, #1e1b4b); margin: 0; } .contact-dl dd a { color: var(--brand-purple); text-decoration: none; font-weight: 600; } .contact-dl dd a:hover { text-decoration: underline; } /* ── FAQ accordion ── */ .faq-list { display: grid; gap: 10px; max-width: 800px; margin: 0 auto; } .faq-item { background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 12px; overflow: hidden; transition: border-color 180ms var(--ease-out, ease-out), box-shadow 180ms var(--ease-out, ease-out); } .faq-item.is-open { border-color: rgba(124,58,237,0.30); box-shadow: 0 6px 22px -14px rgba(124,58,237,0.30); } .faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 700; text-align: left; color: var(--brand-navy, #1e1b4b); gap: 14px; } .faq-q svg { flex-shrink: 0; color: var(--brand-purple); transition: transform 180ms var(--ease-out, ease-out); } .faq-item.is-open .faq-q svg { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 240ms var(--ease-out, ease-out); } .faq-item.is-open .faq-a { max-height: 400px; } .faq-a p { font-size: 15px; line-height: 1.65; color: var(--fg-2, #4b5563); margin: 0; padding: 0 18px 16px; } /* ── Legal pages ── */ .legal-draft-banner { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff8e1; border: 1px solid #f5d570; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #7c5e10; margin: 0 0 24px; } .legal-draft-banner svg { flex-shrink: 0; color: #b8860b; } .legal-doc { max-width: 820px; margin: 0 auto; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; padding: 32px 36px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .legal-doc section { margin-bottom: 22px; } .legal-doc section:last-child { margin-bottom: 0; } .legal-doc h2 { font-size: 18px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0 0 8px; letter-spacing: -0.01em; } .legal-doc p { font-size: 15px; line-height: 1.7; color: var(--fg-2, #4b5563); margin: 0; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .page-hero { padding: 56px 0 28px; } .page-body { padding: 28px 0 64px; } .legal-doc { padding: 24px 22px; } .page-card { padding: 22px 20px; } } /* ════════════════════════════════════════════════════════════════ v2 sub-pages — richer page shell, section primitives, all the new blocks pages.jsx uses (stats, timeline, sticky TOC, help search, role cards, video cards, contact channels, cookie type cards…). ════════════════════════════════════════════════════════════════ */ /* Page hero (richer than the original) ─────────────────────────── */ .page-hero { position: relative; padding: 96px 0 60px; overflow: hidden; text-align: center; } .page-hero-bg { position: absolute; inset: 0; background: radial-gradient(800px 360px at 20% 0%, rgba(124,58,237,0.13), transparent 60%), radial-gradient(800px 360px at 80% 0%, rgba(219,39,119,0.10), transparent 60%), linear-gradient(180deg, rgba(124,58,237,0.05) 0%, rgba(124,58,237,0) 100%); pointer-events: none; z-index: 0; } .page-hero-inner { position: relative; z-index: 1; } .page-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px; background: white; border: 1px solid rgba(124,58,237,0.18); border-radius: 999px; color: var(--brand-purple); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 14px -8px rgba(124,58,237,0.32); margin-bottom: 18px; } .page-eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--brand-purple); box-shadow: 0 0 0 4px rgba(124,58,237,0.18); animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(124,58,237,0.18); } 50% { box-shadow: 0 0 0 7px rgba(124,58,237,0.06); } } .page-title { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-navy, #1e1b4b); margin: 0 auto 16px; max-width: 880px; text-wrap: balance; } .page-lede { font-size: 18px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0 auto 24px; max-width: 720px; text-wrap: pretty; } .hero-cta-row { display: inline-flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } /* Section primitives ───────────────────────────────────────────── */ .page-section { padding: 72px 0; } .page-section-alt { background: linear-gradient(180deg, rgba(124,58,237,0.025) 0%, rgba(124,58,237,0.06) 100%); border-top: 1px solid rgba(124,58,237,0.06); border-bottom: 1px solid rgba(124,58,237,0.06); } .section-title-block { margin: 0 auto 40px; max-width: 760px; } .section-title-block.align-center { text-align: center; } .section-title-block.align-left { text-align: left; margin-left: 0; } .section-title-eyebrow { display: inline-block; padding: 4px 11px; background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.18); border-radius: 999px; color: var(--brand-purple); font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 12px; } .section-title-h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.015em; color: var(--brand-navy, #1e1b4b); margin: 0 0 12px; line-height: 1.12; text-wrap: balance; } .section-title-lede { font-size: 16.5px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0; } /* Reusable IconCard grid ───────────────────────────────────────── */ .icon-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .icon-card-grid-2 { grid-template-columns: repeat(2, 1fr); } .icon-card-grid-3 { grid-template-columns: repeat(3, 1fr); } .icon-card-grid-4 { grid-template-columns: repeat(4, 1fr); } .icon-card { position: relative; padding: 24px 22px 22px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); transition: transform 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)); } .icon-card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.30); box-shadow: 0 14px 28px -16px rgba(124,58,237,0.30); } .icon-card-ico { width: 44px; height: 44px; display: inline-grid; place-items: center; background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(124,58,237,0.04)); color: var(--brand-purple); border-radius: 12px; margin-bottom: 14px; } .icon-card-title { font-size: 17px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0 0 8px; letter-spacing: -0.01em; } .icon-card-body { font-size: 14.5px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0; } .icon-card.icon-card-filled { background: linear-gradient(135deg, rgba(124,58,237,0.06), white); } /* About — story + mission/vision ───────────────────────────────── */ .story-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; } .story-prose p { font-size: 16px; line-height: 1.7; color: var(--fg-2, #4b5563); margin: 0 0 16px; } .story-aside { position: sticky; top: 96px; } .story-quote { padding: 24px; background: white; border: 1px solid rgba(124,58,237,0.16); border-radius: 14px; box-shadow: 0 4px 18px -12px rgba(124,58,237,0.30); } .story-quote svg { color: var(--brand-purple); margin-bottom: 12px; } .story-quote p { font-size: 16px; font-style: italic; line-height: 1.6; color: var(--brand-navy, #1e1b4b); margin: 0; } .mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .mv-card { padding: 32px 28px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 18px; box-shadow: 0 8px 24px -16px rgba(30,27,75,0.12); text-align: left; } .mv-card-ico { width: 56px; height: 56px; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--brand-purple), #a78bfa); color: white; border-radius: 14px; margin-bottom: 18px; box-shadow: 0 8px 18px -10px rgba(124,58,237,0.50); } .mv-card h3 { font-size: 22px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0 0 10px; letter-spacing: -0.01em; } .mv-card p { font-size: 15.5px; line-height: 1.65; color: var(--fg-2, #4b5563); margin: 0; } /* Stats (animated counters) ────────────────────────────────────── */ .page-section-stats { background: linear-gradient(135deg, var(--brand-purple), #4f46e5); color: white; } .page-section-stats .section-title-eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); color: white; } .page-section-stats .section-title-h2 { color: white; } .page-section-stats .section-title-lede { color: rgba(255,255,255,0.85); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-counter { text-align: center; } .stat-counter-num { font-size: clamp(40px, 5.5vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: white; margin-bottom: 8px; } .stat-counter-suf { font-size: 0.6em; opacity: 0.85; margin-left: 2px; } .stat-counter-label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.4; } /* Careers — culture, roles, timeline ──────────────────────────── */ .culture-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; } .culture-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .culture-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 16px; color: var(--fg-2, #4b5563); line-height: 1.6; } .culture-list-ico { width: 22px; height: 22px; display: grid; place-items: center; background: rgba(16,163,74,0.12); color: #16a34a; border-radius: 999px; margin-top: 2px; } .role-list { display: grid; gap: 12px; } .role-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 22px 24px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; text-decoration: none; color: inherit; transition: transform 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease); } .role-card:hover { transform: translateY(-2px); border-color: rgba(124,58,237,0.30); box-shadow: 0 14px 28px -16px rgba(124,58,237,0.30); } .role-meta { display: grid; gap: 4px; } .role-dept { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-purple); } .role-card h3 { font-size: 18px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 2px 0 0; } .role-loc { font-size: 13.5px; color: var(--fg-3, #6b7280); } .role-actions { display: flex; align-items: center; gap: 12px; } .role-tag { padding: 4px 10px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #fcd34d; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: 0.06em; } .role-apply { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-purple); font-weight: 700; font-size: 14px; } .timeline { list-style: none; margin: 0; padding: 0 0 0 0; max-width: 760px; } .timeline-item { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 18px 0; position: relative; } .timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 22px; top: 64px; bottom: -10px; width: 2px; background: linear-gradient(180deg, var(--brand-purple), rgba(124,58,237,0.10)); } .timeline-step { width: 46px; height: 46px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-purple), #a78bfa); color: white; border-radius: 14px; font-weight: 800; font-size: 14px; box-shadow: 0 8px 18px -10px rgba(124,58,237,0.55); position: relative; z-index: 1; } .timeline-body h3 { font-size: 17px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 6px 0 6px; letter-spacing: -0.01em; } .timeline-body p { font-size: 15px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0; } /* Contact — wide grid + channel cards + visit + hours ─────────── */ .contact-grid-wide { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; } .contact-form-pro { display: grid; gap: 16px; margin-top: 8px; } .contact-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .channel-list { display: grid; gap: 10px; margin-top: 8px; } .channel-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 16px 18px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 12px; text-decoration: none; color: inherit; transition: transform 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease); } .channel-card:hover { transform: translateY(-2px); border-color: rgba(124,58,237,0.30); box-shadow: 0 12px 24px -16px rgba(124,58,237,0.30); } .channel-ico { width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(124,58,237,0.04)); color: var(--brand-purple); border-radius: 12px; } .channel-text { display: grid; gap: 2px; } .channel-text strong { font-size: 15px; color: var(--brand-navy, #1e1b4b); font-weight: 700; } .channel-text span { font-size: 13px; color: var(--fg-3, #6b7280); } .channel-text em { font-size: 13.5px; color: var(--brand-purple); font-style: normal; font-weight: 600; } .visit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } .visit-card { background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .visit-map { height: 140px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(124,58,237,0.05) 0 14px, transparent 14px 28px), linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.02)); color: var(--brand-purple); position: relative; font-weight: 600; font-size: 13px; } .visit-map svg { margin-bottom: 4px; } .visit-map span { display: block; } .visit-map-alt { background: repeating-linear-gradient(-45deg, rgba(219,39,119,0.04) 0 14px, transparent 14px 28px), linear-gradient(135deg, rgba(219,39,119,0.10), rgba(124,58,237,0.04)); color: #be185d; } .visit-body { padding: 18px 20px; } .visit-body h3 { font-size: 16px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 0 0 6px; } .visit-body p { font-size: 14px; line-height: 1.5; color: var(--fg-2, #4b5563); margin: 0; } .hours-card { padding: 22px 22px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .hours-ico { width: 40px; height: 40px; display: inline-grid; place-items: center; background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(124,58,237,0.04)); color: var(--brand-purple); border-radius: 12px; margin-bottom: 14px; } .hours-card h3 { font-size: 17px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 0 0 12px; } .hours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .hours-list li { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 7px; border-bottom: 1px dashed rgba(124,58,237,0.18); font-size: 14px; } .hours-list li:last-child { border-bottom: 0; padding-bottom: 0; } .hours-list span { color: var(--fg-3, #6b7280); } .hours-list strong { color: var(--brand-navy, #1e1b4b); font-weight: 700; } /* Help center — search + categories + popular + quickstart + video */ .help-search-row { max-width: 680px; margin: 0 auto; } .help-search { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; background: white; border: 1px solid rgba(124,58,237,0.18); border-radius: 999px; box-shadow: 0 14px 30px -16px rgba(30,27,75,0.18); transition: border-color 180ms var(--ease-out, ease), box-shadow 180ms var(--ease-out, ease); } .help-search:focus-within { border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(124,58,237,0.14), 0 14px 30px -16px rgba(30,27,75,0.18); } .help-search svg { color: var(--brand-purple); flex-shrink: 0; } .help-search input { flex: 1; border: 0; background: transparent; outline: 0; font: inherit; font-size: 16px; padding: 12px 0; color: var(--brand-navy, #1e1b4b); } .help-search-clear { width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(124,58,237,0.10); color: var(--brand-purple); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .help-search-results { margin-top: 12px; padding: 12px 16px; background: white; border: 1px solid rgba(124,58,237,0.14); border-radius: 14px; text-align: left; font-size: 14px; color: var(--fg-2, #4b5563); box-shadow: 0 10px 24px -16px rgba(30,27,75,0.16); } .help-search-results ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .help-search-results li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; } .help-search-results em { font-style: normal; color: var(--fg-3, #6b7280); font-size: 12.5px; } .article-list { list-style: none; margin: 0; padding: 0; max-width: 760px; display: grid; gap: 8px; } .article-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 14px; align-items: center; padding: 16px 20px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 12px; transition: transform 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease); cursor: pointer; } .article-row:hover { transform: translateY(-2px); border-color: rgba(124,58,237,0.30); } .article-row > svg:first-child { color: var(--brand-purple); } .article-title { font-size: 15px; font-weight: 600; color: var(--brand-navy, #1e1b4b); } .article-time { font-size: 12px; color: var(--fg-3, #6b7280); padding: 3px 8px; background: rgba(124,58,237,0.08); border-radius: 999px; } .quickstart { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 760px; } .quickstart-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 20px 22px; background: linear-gradient(135deg, rgba(124,58,237,0.04), white); border: 1px solid rgba(124,58,237,0.12); border-radius: 14px; transition: transform 220ms var(--ease-out, ease); } .quickstart-step:hover { transform: translateY(-2px); } .quickstart-num { width: 38px; height: 38px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-purple), #a78bfa); color: white; border-radius: 12px; font-weight: 800; font-size: 16px; box-shadow: 0 8px 18px -10px rgba(124,58,237,0.55); } .quickstart-body h3 { font-size: 16px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 4px 0 4px; } .quickstart-body p { font-size: 14.5px; color: var(--fg-2, #4b5563); margin: 0; line-height: 1.5; } .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .video-card { background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; overflow: hidden; transition: transform 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease); cursor: pointer; } .video-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(124,58,237,0.30); } .video-thumb { position: relative; aspect-ratio: 16/9; background: radial-gradient(60% 60% at 50% 50%, rgba(124,58,237,0.25), rgba(124,58,237,0.05)); display: grid; place-items: center; } .video-play { width: 52px; height: 52px; display: grid; place-items: center; background: white; color: var(--brand-purple); border-radius: 999px; box-shadow: 0 10px 22px -8px rgba(124,58,237,0.55); transition: transform 200ms var(--ease-out, ease); } .video-card:hover .video-play { transform: scale(1.08); } .video-len { position: absolute; bottom: 10px; right: 10px; padding: 3px 8px; background: rgba(15,15,30,0.7); color: white; border-radius: 6px; font-size: 11.5px; font-weight: 600; } .video-card h3 { padding: 14px 16px 16px; font-size: 14.5px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 0; line-height: 1.4; } /* Help — support cards (with bottom action label) ─────────────── */ .support-card { display: grid; padding: 24px 22px 22px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; text-decoration: none; color: inherit; transition: transform 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease); } .support-card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.30); box-shadow: 0 14px 28px -16px rgba(124,58,237,0.30); } .support-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--brand-purple); font-weight: 700; font-size: 14px; } /* FAQ page — search/filter + grouped accordions ──────────────── */ .faq-filter-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; } .faq-filter { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: white; border: 1px solid rgba(124,58,237,0.18); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--fg-2, #4b5563); cursor: pointer; transition: all 160ms var(--ease-out, ease); } .faq-filter:hover { border-color: var(--brand-purple-200, rgba(124,58,237,0.30)); color: var(--brand-purple); } .faq-filter.is-active { background: var(--brand-purple); color: white; border-color: var(--brand-purple); box-shadow: 0 6px 14px -6px rgba(124,58,237,0.55); } .faq-filter.is-active svg { color: white; } .faq-filter svg { color: var(--brand-purple); } .faq-group { margin-bottom: 40px; } .faq-group-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(124,58,237,0.14); } .faq-group-ico { width: 36px; height: 36px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(124,58,237,0.04)); color: var(--brand-purple); border-radius: 10px; } .faq-group-title { font-size: 22px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0; letter-spacing: -0.01em; flex: 1; } .faq-group-count { padding: 4px 10px; background: rgba(124,58,237,0.10); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--brand-purple); } .faq-q-idx { font-size: 11.5px; font-weight: 800; color: var(--brand-purple); background: rgba(124,58,237,0.10); padding: 3px 7px; border-radius: 6px; letter-spacing: 0.04em; flex-shrink: 0; } .faq-q-text { flex: 1; } .faq-empty { text-align: center; font-size: 15px; color: var(--fg-3, #6b7280); padding: 32px 0; } /* Legal — sticky TOC + doc layout ────────────────────────────── */ .legal-meta { display: inline-flex; align-items: center; gap: 18px; padding: 10px 18px; background: white; border: 1px solid rgba(124,58,237,0.14); border-radius: 999px; font-size: 13.5px; color: var(--fg-2, #4b5563); margin-top: 6px; } .legal-meta span { display: inline-flex; align-items: center; gap: 6px; } .legal-meta svg { color: var(--brand-purple); } .legal-section { padding-top: 48px; padding-bottom: 80px; } .legal-container { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; max-width: 1100px; } .legal-toc { position: sticky; top: 96px; } .legal-toc-inner { padding: 22px 20px; background: white; border: 1px solid rgba(124,58,237,0.12); border-radius: 14px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.08); } .legal-toc-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--brand-purple); margin-bottom: 12px; } .legal-toc-list { list-style: none; padding: 0; margin: 0; counter-reset: tocnum; } .legal-toc-list li { counter-increment: tocnum; } .legal-toc-list a { display: block; padding: 7px 10px 7px 14px; font-size: 14px; color: var(--fg-3, #6b7280); text-decoration: none; border-left: 2px solid transparent; transition: color 160ms var(--ease-out, ease), border-color 160ms var(--ease-out, ease), background 160ms var(--ease-out, ease); border-radius: 0 8px 8px 0; } .legal-toc-list a:hover { color: var(--brand-purple); background: rgba(124,58,237,0.04); } .legal-toc-list a.is-active { color: var(--brand-purple); border-left-color: var(--brand-purple); background: rgba(124,58,237,0.06); font-weight: 700; } .legal-doc-pro { background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 18px; padding: 40px 44px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .legal-doc-pro .legal-block { scroll-margin-top: 96px; margin-bottom: 32px; } .legal-doc-pro .legal-block:last-child { margin-bottom: 0; } .legal-doc-pro h2 { font-size: 22px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0 0 14px; letter-spacing: -0.01em; } .legal-doc-pro p { font-size: 15.5px; line-height: 1.75; color: var(--fg-2, #4b5563); margin: 0 0 14px; } .legal-doc-pro p:last-child { margin-bottom: 0; } .legal-bullets { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; } .legal-bullets li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.6; color: var(--fg-2, #4b5563); } .legal-bullets li svg { margin-top: 4px; color: #16a34a; background: rgba(16,163,74,0.12); border-radius: 999px; padding: 2px; width: 18px; height: 18px; } .legal-foot { margin-top: 28px; padding-top: 20px; border-top: 1px dashed rgba(124,58,237,0.18); font-size: 13.5px; font-style: italic; color: var(--fg-3, #6b7280); } /* Cookie page — types + prose ────────────────────────────────── */ .cookie-prose { max-width: 760px; margin: 0 auto; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; padding: 24px 28px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.08); } .cookie-prose p { font-size: 15.5px; line-height: 1.7; color: var(--fg-2, #4b5563); margin: 0 0 14px; } .cookie-prose p:last-child { margin-bottom: 0; } .cookie-prose .page-bullets { margin-top: 8px; } .cookie-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .cookie-type-card { padding: 22px 22px; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 14px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); transition: transform 220ms var(--ease-out, ease); } .cookie-type-card:hover { transform: translateY(-2px); } .cookie-type-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cookie-type-ico { width: 36px; height: 36px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(124,58,237,0.04)); color: var(--brand-purple); border-radius: 10px; } .cookie-type-card h3 { font-size: 16px; font-weight: 800; color: var(--brand-navy, #1e1b4b); margin: 0; flex: 1; } .cookie-type-card p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0; } .cookie-type-pill { padding: 3px 9px; background: rgba(16,163,74,0.10); color: #16a34a; border: 1px solid rgba(16,163,74,0.25); border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .cookie-type-pill-optional { background: rgba(124,58,237,0.10); color: var(--brand-purple); border-color: rgba(124,58,237,0.25); } .cookie-type-pill-not-used { background: rgba(107,114,128,0.10); color: var(--fg-3, #6b7280); border-color: rgba(107,114,128,0.25); } /* CTA section (reusable) ─────────────────────────────────────── */ .page-cta { position: relative; padding: 80px 0; overflow: hidden; color: white; text-align: center; } .page-cta-bg { position: absolute; inset: 0; background: radial-gradient(600px 300px at 20% 30%, rgba(255,255,255,0.10), transparent 60%), radial-gradient(600px 300px at 80% 70%, rgba(255,255,255,0.08), transparent 60%), linear-gradient(135deg, var(--brand-purple), #4f46e5); z-index: 0; } .page-cta-inner { position: relative; z-index: 1; } .page-cta-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.30); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; } .page-cta-title { font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 auto 12px; max-width: 760px; text-wrap: balance; } .page-cta-lede { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.90); margin: 0 auto 26px; max-width: 580px; } .page-cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .page-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--brand-purple); font-weight: 800; border: 0; cursor: pointer; text-decoration: none; box-shadow: 0 14px 32px -10px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.6) inset; transition: transform 200ms var(--ease-out, ease), box-shadow 200ms var(--ease-out, ease); } .page-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.36), 0 0 0 1px white inset, 0 0 0 6px rgba(255,255,255,0.12); } .page-cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.10); color: white; font-weight: 600; border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(8px); text-decoration: none; cursor: pointer; transition: background 200ms var(--ease-out, ease), border-color 200ms var(--ease-out, ease); } .page-cta-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.50); } /* Mobile / tablet refinements ────────────────────────────────── */ @media (max-width: 1000px) { .legal-container { grid-template-columns: 1fr; gap: 24px; } .legal-toc { position: relative; top: 0; } .legal-toc-list { display: flex; flex-wrap: wrap; gap: 4px; } .legal-toc-list a { padding: 6px 12px; border-radius: 999px; border-left: 0; } .legal-toc-list a.is-active { background: var(--brand-purple); color: white; } .story-grid, .culture-grid, .contact-grid-wide { grid-template-columns: 1fr; } .story-aside { position: relative; top: 0; } .visit-grid { grid-template-columns: 1fr; } .video-grid { grid-template-columns: repeat(2, 1fr); } .icon-card-grid-4 { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 640px) { .page-hero { padding: 64px 0 40px; } .page-section { padding: 52px 0; } .section-title-block { margin-bottom: 28px; } .icon-card-grid, .icon-card-grid-2, .icon-card-grid-3 { grid-template-columns: 1fr; } .mv-grid { grid-template-columns: 1fr; } .contact-row-2 { grid-template-columns: 1fr; } .legal-doc-pro { padding: 28px 22px; } .video-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .role-card { grid-template-columns: 1fr; gap: 10px; } .role-actions { justify-content: space-between; } .page-cta { padding: 64px 0; } .timeline-item { grid-template-columns: 44px 1fr; gap: 16px; } .timeline-item:not(:last-child)::before { left: 16px; } } /* ════════════════════════════════════════════════════════════════ BLOG — index grid + single-post article shell + markdown typography. Inherits PageHero from the v2 sub-page system. ════════════════════════════════════════════════════════════════ */ .blog-empty { text-align: center; font-size: 15.5px; color: var(--fg-3, #6b7280); padding: 48px 0; } .blog-load-more { display: flex; justify-content: center; margin-top: 32px; } /* Index grid + cards ───────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 22px; } .blog-card { display: flex; flex-direction: column; background: white; border: 1px solid rgba(124,58,237,0.10); border-radius: 16px; text-decoration: none; color: inherit; overflow: hidden; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); transition: transform 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow 220ms var(--ease-out, cubic-bezier(.16,1,.3,1)); } .blog-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.30); box-shadow: 0 18px 36px -20px rgba(124,58,237,0.32); } .blog-card-hero { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.02)); overflow: hidden; } .blog-card-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease-out, ease); } .blog-card:hover .blog-card-hero img { transform: scale(1.04); } .blog-card-hero-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(124,58,237,0.45); background: radial-gradient(60% 60% at 50% 40%, rgba(124,58,237,0.18), rgba(124,58,237,0.02)); } .blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; } .blog-card-tag { align-self: flex-start; padding: 3px 9px; background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.22); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--brand-purple); text-transform: uppercase; letter-spacing: 0.04em; } .blog-card-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--brand-navy, #1e1b4b); margin: 2px 0 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-excerpt { font-size: 14.5px; line-height: 1.55; color: var(--fg-2, #4b5563); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--fg-3, #6b7280); } .blog-card-dot { opacity: 0.5; } /* Single article ──────────────────────────────────────────────── */ .blog-article-hero { position: relative; padding: 80px 0 40px; overflow: hidden; text-align: center; } .blog-article-hero-bg { position: absolute; inset: 0; background: radial-gradient(800px 360px at 20% 0%, rgba(124,58,237,0.13), transparent 60%), radial-gradient(800px 360px at 80% 0%, rgba(219,39,119,0.10), transparent 60%), linear-gradient(180deg, rgba(124,58,237,0.05) 0%, rgba(124,58,237,0) 100%); z-index: 0; } .blog-article-hero > .container { position: relative; z-index: 1; } .blog-article-back { /* `flex` (not inline-flex) so this link sits on its own row above the tag pills instead of sharing a line with them. fit-content keeps the hit area tight to the text; margin auto re-centers under the parent's text-align: center. */ display: flex; align-items: center; justify-content: center; gap: 4px; width: fit-content; margin: 0 auto 18px; font-size: 13.5px; font-weight: 600; color: var(--brand-purple); text-decoration: none; } .blog-article-back:hover { text-decoration: underline; } .blog-article-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .blog-article-tag { padding: 4px 10px; background: white; border: 1px solid rgba(124,58,237,0.18); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--brand-purple); text-transform: uppercase; letter-spacing: 0.05em; } .blog-article-title { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-navy, #1e1b4b); margin: 0 auto 18px; max-width: 800px; text-wrap: balance; } .blog-article-excerpt { font-size: 18px; line-height: 1.6; color: var(--fg-2, #4b5563); margin: 0 auto 22px; max-width: 680px; text-wrap: pretty; } .blog-article-meta { display: inline-flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--fg-3, #6b7280); padding: 12px 22px; background: white; border: 1px solid rgba(124,58,237,0.12); border-radius: 999px; box-shadow: 0 4px 14px -10px rgba(30,27,75,0.10); } .blog-article-meta span { display: inline-flex; align-items: center; gap: 6px; } .blog-article-meta svg { color: var(--brand-purple); } .blog-article-ai { background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(124,58,237,0.02)); padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(124,58,237,0.18); font-weight: 700; color: var(--brand-purple) !important; } .blog-article-image { margin: 12px auto 0; } .blog-article-image img { display: block; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(30,27,75,0.30); } .blog-article-body-wrap { padding: 56px 0 32px; } .blog-article-body { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.78; color: var(--fg-1, #1f2937); } .blog-article-body p { margin: 0 0 22px; } .blog-article-body h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--brand-navy, #1e1b4b); margin: 44px 0 14px; line-height: 1.2; } .blog-article-body h3 { font-size: 20px; font-weight: 700; color: var(--brand-navy, #1e1b4b); margin: 32px 0 12px; line-height: 1.25; } .blog-article-body a { color: var(--brand-purple); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 600; } .blog-article-body a:hover { color: #6d28d9; } .blog-article-body strong { font-weight: 700; color: var(--brand-navy, #1e1b4b); } .blog-article-body em { font-style: italic; } .blog-article-body ul, .blog-article-body ol { padding-left: 22px; margin: 0 0 22px; } .blog-article-body li { margin-bottom: 8px; } .blog-article-body ul li::marker { color: var(--brand-purple); } .blog-article-body blockquote { margin: 28px 0; padding: 18px 24px; border-left: 3px solid var(--brand-purple); background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.01)); border-radius: 0 12px 12px 0; font-style: italic; color: var(--fg-2, #4b5563); } .blog-article-body blockquote p:last-child { margin: 0; } .blog-article-body code { font-family: var(--font-mono, monospace); font-size: 0.9em; padding: 2px 6px; background: rgba(124,58,237,0.08); border-radius: 5px; color: var(--brand-navy, #1e1b4b); } .blog-article-body pre { margin: 22px 0; padding: 18px 22px; background: #1e1b4b; color: #f7f3ff; border-radius: 12px; overflow-x: auto; font-size: 14px; line-height: 1.55; } .blog-article-body pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; } .blog-article-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 22px 0; box-shadow: 0 14px 40px -20px rgba(30,27,75,0.30); } .blog-article-body hr { border: 0; border-top: 1px dashed rgba(124,58,237,0.30); margin: 36px 0; } .blog-article-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; } .blog-article-body th, .blog-article-body td { padding: 10px 14px; border-bottom: 1px solid rgba(124,58,237,0.12); text-align: left; } .blog-article-body th { font-weight: 700; color: var(--brand-navy, #1e1b4b); background: rgba(124,58,237,0.05); } .blog-article-share { max-width: 720px; margin: 40px auto 0; padding-top: 22px; border-top: 1px dashed rgba(124,58,237,0.20); display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; gap: 12px; font-size: 13.5px; color: var(--fg-3, #6b7280); } .blog-article-share a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: white; border: 1px solid rgba(124,58,237,0.18); color: var(--brand-purple); transition: transform 180ms var(--ease-out, ease), background 180ms var(--ease-out, ease); } .blog-article-share a:hover { transform: translateY(-2px); background: rgba(124,58,237,0.08); } @media (max-width: 640px) { .blog-article-hero { padding: 56px 0 32px; } .blog-article-body-wrap { padding: 36px 0 24px; } .blog-article-body { font-size: 16.5px; } .blog-article-body h2 { font-size: 22px; margin: 32px 0 12px; } .blog-article-body h3 { font-size: 18px; margin: 24px 0 10px; } .blog-article-meta { gap: 12px; padding: 10px 18px; font-size: 12.5px; } } @media (max-width: 480px) { /* Drop the pill shape so the meta row can wrap cleanly on tiny phones instead of bulging past the viewport. */ .blog-article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 10px 16px; border-radius: 14px; } } @media (max-width: 380px) { /* iPhone SE and similar — collapse the card grid to a single column instead of relying on minmax(280, 1fr) which has zero breathing room. */ .blog-grid { grid-template-columns: 1fr; } }