/* ============================================================= XOS — Buyer landing page Dark neon-glass, mirroring the live marketing site (xos.astevesmind.com). Signature element: the animated "liquidity engine" pipeline. Ambient light is a single full-viewport field (body::before) so it never terminates at a hard section edge — the fix for the hero cut-off. Content is progressively enhanced: hidden-until-revealed only applies when has .js, so absent/broken JS still renders the whole page. The JS DOM contract in app.js is preserved (ids, names, .reveal, honeypots, error slots). ============================================================= */ @property --border-angle { syntax: ''; initial-value: 0deg; inherits: false; } :root { --bg: #0b0514; --bg-alt: #130a24; --accent: #00e5ff; --accent2: #d946ef; --accent3: #a855f7; --amber: #ffaa00; --teal: #2dd4bf; --text: #f8fafc; --text-muted: #cbd5e1; --text-dim: #8b9cb3; --border: rgba(217, 70, 239, 0.15); --border-cyan: rgba(0, 229, 255, 0.22); --glow: rgba(0, 229, 255, 0.12); --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius: 16px; --radius-sm: 8px; --accent-grad: linear-gradient(135deg, var(--accent), var(--accent2)); --bad: #fb7185; --shadow-card: 0 8px 40px var(--glow); --maxw: 1080px; } * { box-sizing: border-box; } ::selection { background: rgba(0, 229, 255, 0.35); color: #fff; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ── Ambient light field ────────────────────────────────────────── Full-viewport, fixed, feathers to transparent on every side, so the page reads as lit-from-within instead of a colored rectangle with a hard border. This replaces the old clipped .hero::before. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(48% 42% at 14% 8%, rgba(0, 229, 255, 0.16), transparent 62%), radial-gradient(42% 40% at 88% 14%, rgba(217, 70, 239, 0.15), transparent 60%), radial-gradient(50% 46% at 60% 62%, rgba(168, 85, 247, 0.10), transparent 64%), radial-gradient(60% 50% at 30% 108%, rgba(45, 212, 191, 0.06), transparent 66%); animation: drift 22s ease-in-out infinite alternate; } /* Faint instrument-grid texture, kept barely perceptible. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%); } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(1.5%, -2%) scale(1.03); } 100% { transform: translate(-2%, 1.5%) scale(1.02); } } h1, h2, h3 { font-family: var(--font-heading); font-weight: 300; letter-spacing: -0.01em; margin: 0; } img { max-width: 100%; display: block; } button { cursor: pointer; font-family: inherit; } /* ── Skip link (keyboard) ─────────────────────────────────────── */ .skip { position: absolute; left: 12px; top: -48px; z-index: 10; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--border-cyan); color: var(--text); font-size: 0.9rem; text-decoration: none; transition: top .2s ease; } .skip:focus { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Reveal-on-scroll (progressive enhancement) ───────────────── */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .js .reveal.in { opacity: 1; transform: none; } @media (scripting: none) { .reveal { opacity: 1 !important; transform: none !important; } } /* ── Eyebrow micro-label (mono) ───────────────────────────────── */ .eyebrow { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); flex-shrink: 0; } .eyebrow-center { justify-content: center; width: 100%; } /* ── Top bar ──────────────────────────────────────────────────── */ .topbar { display: flex; align-items: baseline; gap: 12px; padding: 20px 24px; max-width: var(--maxw); margin: 0 auto; border-bottom: 1px solid var(--border); } .brand { font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.02em; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand-sub { color: var(--text-dim); font-size: 0.85rem; font-weight: 300; } .topbar-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .topbar-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse-dot 2.4s ease-in-out infinite; } main { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Shared section lede */ .section-lede { color: var(--text-muted); font-weight: 300; font-size: 1.02rem; max-width: 60ch; } .section-head { text-align: center; margin-bottom: 40px; } .section-head .section-lede { margin: 12px auto 0; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 200; } /* ── Hero ─────────────────────────────────────────────────────── */ .hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 52px; align-items: center; padding: 64px 0 76px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 100px; border: 1px solid var(--border-cyan); background: rgba(0, 229, 255, 0.06); color: var(--accent); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } } .hero-copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.05rem); font-weight: 200; line-height: 1.12; margin: 0 0 18px; letter-spacing: -0.02em; } .hero-copy h1 em { font-style: normal; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .lede { color: var(--text-muted); font-size: 1.1rem; font-weight: 300; margin: 0 0 30px; max-width: 46ch; } .hero-trust { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-dim); } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ── Buttons (conic-gradient border, spins only on interaction) ── */ .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); padding: 15px 30px; font: inherit; font-weight: 500; color: var(--text); background: var(--bg); z-index: 1; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .btn-primary::before { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--radius-sm) + 2px); background: conic-gradient(from var(--border-angle), var(--accent), var(--accent2), var(--accent3), var(--accent2), var(--accent)); z-index: -2; } .btn-primary::after { content: ''; position: absolute; inset: 2px; border-radius: var(--radius-sm); background: var(--accent-grad); z-index: -1; } @keyframes borderSpin { to { --border-angle: 360deg; } } .btn-primary:hover::before, .btn-primary:focus-visible::before { animation: borderSpin 3s linear infinite; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--glow); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; } .btn-primary:disabled::before { animation: none; } /* ── VSL facade ───────────────────────────────────────────────── */ .hero-video { position: relative; } .vsl-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: radial-gradient(120% 120% at 50% 120%, rgba(0, 229, 255, 0.18), transparent 55%), linear-gradient(155deg, #130a24 0%, #2a1140 40%, #55187a 72%, #0a5f70 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; box-shadow: var(--shadow-card); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .vsl-facade::after { content: 'Walkthrough'; position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; } .vsl-facade:hover, .vsl-facade:focus-visible { border-color: var(--border-cyan); box-shadow: 0 0 0 3px var(--accent), 0 8px 40px var(--glow); transform: translateY(-2px); } /* "Coming soon" state — no play affordance, no broken embed, honest label. */ .vsl-facade.is-soon { cursor: default; } .vsl-facade.is-soon .vsl-play { display: none; } .vsl-facade.is-soon::after { content: 'Coming soon'; } .vsl-facade.is-soon:hover, .vsl-facade.is-soon:focus-visible { transform: none; box-shadow: var(--shadow-card); border-color: var(--border); } .vsl-facade.is-soon:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .vsl-play { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-size: 1.3rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: glow-pulse 3s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.3)); } 50% { opacity: 1; filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5)); } } .vsl-label { color: #fff; font-size: 0.92rem; font-weight: 500; padding: 0 16px; text-align: center; } #vslMount { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } #vslMount iframe { width: 100%; height: 100%; border: 0; display: block; } /* ── Section dividers ─────────────────────────────────────────── */ .section-divider { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 0; } /* ── Signature: the liquidity engine pipeline ─────────────────── */ .engine { padding: 68px 0; } .pipeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; } /* the rail the "deal" travels along */ .pipeline::before { content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--border-cyan), var(--border), var(--border-cyan)); z-index: 0; } .pipeline::after { content: ''; position: absolute; top: 25px; left: 8%; height: 6px; border-radius: 6px; background: radial-gradient(closest-side, rgba(0,229,255,0.9), rgba(0,229,255,0.15) 60%, transparent); width: 64px; animation: flow-x 4.5s cubic-bezier(.55,0,.45,1) infinite; z-index: 1; filter: drop-shadow(0 0 8px var(--accent)); } @keyframes flow-x { 0% { left: 8%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 92%; opacity: 0; } } .pnode { position: relative; z-index: 2; text-align: center; padding: 0 8px; } .pnode-dot { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-alt); border: 1px solid var(--border-cyan); color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; position: relative; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .pnode-dot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid transparent; transition: border-color .3s ease; } .pnode:hover .pnode-dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,229,255,0.08), 0 0 22px var(--glow); transform: translateY(-2px); } .pnode:hover .pnode-dot::before { border-color: rgba(0,229,255,0.25); } .pnode h3 { font-family: var(--font-heading); font-weight: 400; font-size: 0.95rem; margin: 0 0 6px; color: var(--text); } .pnode p { margin: 0; color: var(--text-muted); font-size: 0.86rem; font-weight: 300; line-height: 1.45; } /* ── Precision vs. blast list ─────────────────────────────────── */ .compare, .coverage-section { padding: 64px 0; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } .compare-col { border-radius: var(--radius); padding: 26px 24px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .compare-col.is-them { opacity: 0.9; } .compare-col.is-us { border-color: var(--border-cyan); background: radial-gradient(120% 90% at 100% 0%, rgba(0,229,255,0.07), transparent 60%), rgba(255, 255, 255, 0.03); box-shadow: var(--shadow-card); } .compare-col h3 { font-family: var(--font-mono); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .compare-col.is-them h3 { color: var(--text-dim); } .compare-col.is-us h3 { color: var(--accent); } .compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .compare-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; font-weight: 300; line-height: 1.45; } .compare-list .mark { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 1px; } .is-them .compare-list li { color: var(--text-dim); } .is-them .mark { background: rgba(139, 156, 179, 0.12); color: var(--text-dim); } .is-us .compare-list li { color: var(--text-muted); } .is-us .mark { background: rgba(45, 212, 191, 0.14); color: var(--teal); } /* ── Coverage: markets + structures ───────────────────────────── */ .coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } .cov-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .cov-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.1rem; margin: 0 0 6px; } .cov-card .section-lede { font-size: 0.92rem; margin: 0 0 18px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); font-size: 0.86rem; font-weight: 300; color: var(--text-muted); transition: border-color .25s ease, color .25s ease, transform .25s ease; } .chip:hover { border-color: var(--border-cyan); color: var(--text); transform: translateY(-1px); } .chip .tag { font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent); letter-spacing: 0.06em; } .chip .tag.teal { color: var(--teal); } /* ── Forms section ────────────────────────────────────────────── */ .forms { padding: 24px 0 40px; } .forms-lede { text-align: center; max-width: 56ch; margin: 0 auto 28px; color: var(--text-muted); font-weight: 300; } .tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 28px; max-width: 680px; margin-left: auto; margin-right: auto; } .tab { flex: 1; border: 0; background: none; padding: 14px 8px; font: inherit; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .tab-fade { animation: fadeIn .3s ease; } [role="tabpanel"][hidden] { display: none; } /* ── Form controls ────────────────────────────────────────────── */ #panelBuyer, #panelProject { max-width: 680px; margin: 0 auto; } fieldset { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 0 0 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } fieldset.nested { margin: 12px 0 0; padding: 16px; background: rgba(255, 255, 255, 0.03); } legend { font-weight: 500; padding: 0 8px; font-family: var(--font-heading); color: var(--text); } label { display: block; margin: 12px 0 4px; font-weight: 500; font-size: 0.95rem; color: var(--text); } .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 16px; } .checkbox-label input { width: auto; } .hint { font-weight: 300; color: var(--text-muted); font-size: 0.85rem; margin: 0 0 4px; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: rgba(255, 255, 255, 0.03); color: var(--text); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } input::placeholder, textarea::placeholder { color: var(--text-dim); } select option { background: var(--bg-alt); color: var(--text); } textarea { min-height: 110px; resize: vertical; } input:focus, select:focus, textarea:focus, .tab:focus-visible, .btn-primary:focus-visible, #ctaScroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input:focus, select:focus, textarea:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 3px var(--glow); } input[type=checkbox], input[type=radio] { accent-color: var(--accent); } .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 8px; } .checks label, .choice label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; color: var(--text-muted); } .checks input, .choice input { width: auto; } .choice { display: flex; gap: 24px; margin-top: 8px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .addr-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 16px; } .err { color: var(--bad); font-size: 0.85rem; margin: 4px 0 0; font-weight: 400; } .banner { border: 1px solid rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); color: #ffc2cc; border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } form .btn-primary { width: 100%; text-align: center; } form button:disabled { opacity: 0.6; cursor: default; } /* Honeypot: visually hidden but present in the DOM (not display:none/hidden, which bot heuristics increasingly skip) — real users never see or reach it. */ .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .success-view { background: radial-gradient(120% 90% at 50% 0%, rgba(45,212,191,0.08), transparent 60%), rgba(255, 255, 255, 0.02); border: 1px solid var(--border-cyan); border-radius: var(--radius); padding: 40px 28px; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card); } .success-view h2 { margin: 0 0 8px; font-weight: 300; color: var(--teal); } .success-view p { margin: 0 0 8px; color: var(--text-muted); } /* ── Footer ───────────────────────────────────────────────────── */ .foot { text-align: center; padding: 40px 24px 52px; color: var(--text-muted); font-size: 0.85rem; font-weight: 300; border-top: 1px solid var(--border); } .foot p { margin: 0 0 6px; } .foot .foot-trust { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; max-width: 60ch; margin: 0 auto; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 1040px) { .hero { grid-template-columns: 1fr; gap: 40px; } .pipeline { grid-template-columns: 1fr; gap: 8px; text-align: left; max-width: 460px; margin: 0 auto; } .pipeline::before { top: 0; bottom: 0; left: 26px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--border-cyan), var(--border), var(--border-cyan)); } .pipeline::after { top: 0; left: 24px; right: auto; width: 6px; height: 64px; background: radial-gradient(closest-side, rgba(0,229,255,0.9), rgba(0,229,255,0.15) 60%, transparent); animation: flow-y 4.5s cubic-bezier(.55,0,.45,1) infinite; } .pnode { display: grid; grid-template-columns: 54px 1fr; gap: 0 18px; align-items: start; padding: 12px 0; text-align: left; } .pnode-dot { margin: 0; } .pnode h3 { margin-top: 6px; } } @keyframes flow-y { 0% { top: 2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 92%; opacity: 0; } } @media (max-width: 820px) { .compare-grid, .coverage { grid-template-columns: 1fr; } } @media (max-width: 540px) { .checks, .two-col, .addr-row { grid-template-columns: 1fr; } .tablist { flex-direction: column; border-bottom: none; } .tab { border-bottom: 1px solid var(--border); } .tab[aria-selected="true"] { border-bottom-color: var(--accent); } .topbar-status { display: none; } } /* ── Reduced motion ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .pipeline::after { display: none; } }