/* VIAxVOICE — public site * Fleet Brand Guidelines (Bryan/VIAxLOGIN, 2026-07-01): refined-cyberpunk * "neural deck" — near-black canvas, cyan+gold accents, mono terminal type, * cut-corner glass panels, slow living motion. VIAxVOICE node colour = rose. * Quiet, powerful, never arcade-y. All motion gated on prefers-reduced-motion. */ /* ── Fonts: Chakra Petch (UI) + Share Tech Mono (data/labels). The wordmark x is Georgia italic gold — never the UI font. Loaded non-render-blocking via a in each page's ; a strong fallback stack keeps the page correct (and instantly painted) if the CDN is slow/blocked. ── */ :root { --ink: #0a0c11; --ink-2: #0d1017; --text: #e9f7f8; --muted: #7a8993; --line: #2a3b44; --panel: rgba(31, 41, 52, .74); --panel-solid: #141a22; --cyan: #00f0ff; --gold: #fcee0a; --green: #27f3a0; --red: #ff2e57; --amber: #f5a623; --rose: #fb7185; /* VIAxVOICE node */ --rose-dim: #b25563; --ui: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --mono: 'Share Tech Mono', 'Cascadia Code', ui-monospace, monospace; --ease: cubic-bezier(.2, .8, .2, 1); --maxw: 1120px; --cut: 14px; /* corner cut for clip-path panels */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--ui); color: var(--text); background: radial-gradient(1100px 620px at 78% -8%, rgba(251, 113, 133, .10), transparent 60%), radial-gradient(900px 560px at 8% 4%, rgba(0, 240, 255, .07), transparent 55%), var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: var(--cyan); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: #8ff8ff; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ── Wordmark ─────────────────────────────────────────────────────────── */ .wm { font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .wm .a, .wm .b { font-family: var(--ui); font-weight: 700; } .wm .x { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; background: linear-gradient(180deg, #fff7b0, var(--gold) 55%, #b79b00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 18px rgba(252, 238, 10, .35); padding: 0 .02em; } /* mono label — UPPERCASE terminal tag */ .tag { font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--muted); } /* ── Header ───────────────────────────────────────────────────────────── */ header.site { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(9px); background: linear-gradient(180deg, rgba(10, 12, 17, .92), rgba(10, 12, 17, .62)); border-bottom: 1px solid var(--line); } header.site .bar { display: flex; align-items: center; gap: 18px; height: 62px; } .brandmark { display: flex; align-items: center; gap: 11px; font-size: 1.15rem; } .node { width: 11px; height: 11px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(251, 113, 133, .16), 0 0 16px rgba(251, 113, 133, .6); flex: none; } nav.top { margin-left: auto; display: flex; gap: 22px; align-items: center; } nav.top a { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } nav.top a:hover { color: var(--text); } nav.top a.cta { color: var(--ink); background: var(--gold); padding: 8px 15px; border-radius: 7px; font-weight: 700; box-shadow: 0 0 20px rgba(252, 238, 10, .22); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } nav.top a.cta:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 0 28px rgba(252, 238, 10, .4); } @media (max-width: 720px) { nav.top .hide-sm { display: none; } } /* ── Panels (cut-corner glass) ────────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: border-color .25s var(--ease), transform .25s var(--ease); position: relative; } .panel:hover { border-color: var(--rose-dim); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { padding: 78px 0 54px; position: relative; } .hero .eyebrow { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; margin-bottom: 20px; } .hero h1 .accent { background: linear-gradient(100deg, var(--rose), var(--cyan) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero p.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: #c6d3d6; max-width: 620px; margin-bottom: 32px; } .hero .actions { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ui); font-weight: 600; font-size: .96rem; padding: 12px 22px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .btn.primary { background: var(--gold); color: var(--ink); box-shadow: 0 0 24px rgba(252, 238, 10, .22); } .btn.primary:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 0 34px rgba(252, 238, 10, .42); } .btn.ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn.ghost:hover { border-color: var(--cyan); color: #bff6ff; } /* ── Heartbeat (hero visual) — speech-envelope waveform on canvas. Idle-replays fleet "business conversations"; gold = played, cyan = ahead, with a running playhead. Ported from the VIAxVOICE Console — the piece that makes the service visualize the very thing it does. Reduced-motion → a still frame. ── */ .hero-wave-wrap { margin: 40px 0 4px; position: relative; } .hero-wave { display: block; width: 100%; height: 132px; background: radial-gradient(120% 140% at 85% -20%, rgba(0, 240, 255, .06), transparent 60%), linear-gradient(180deg, rgba(31, 41, 52, .40), rgba(20, 26, 34, .25)); border: 1px solid var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); } .hero-cap { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .hero-cap .ld { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none; } .hero-cap .ld.live { background: var(--green); box-shadow: 0 0 8px var(--green); } .hero-cap b { color: var(--text); font-weight: 400; letter-spacing: .06em; } /* ── Section scaffolding ──────────────────────────────────────────────── */ section { padding: 56px 0; } section > .wrap > .head { margin-bottom: 34px; max-width: 680px; } section h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.01em; margin: 8px 0 12px; } section h2 .x { /* reuse wordmark x if needed */ } section .sub { color: var(--muted); font-size: 1.02rem; } .rule { height: 1px; background: linear-gradient(90deg, var(--line), transparent); border: 0; } /* ── Card grids ───────────────────────────────────────────────────────── */ .grid { display: grid; gap: 18px; } .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c4 { grid-template-columns: repeat(4, 1fr); } .grid.c2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } } .card { padding: 24px 22px; } .card .ico { width: 40px; height: 40px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 9px; background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .3); } .card .ico svg { width: 20px; height: 20px; stroke: var(--rose); } .card h3 { font-size: 1.14rem; font-weight: 600; margin-bottom: 8px; } .card p { color: var(--muted); font-size: .94rem; } .card .kv { font-family: var(--mono); font-size: .78rem; color: var(--cyan); margin-top: 12px; letter-spacing: .04em; } /* ── Pipeline strip ("under the hood") — ported from the Console. text → Piper → envelope → the avatar tiers. Live stages glow green, staged tiers sit muted. ── */ .pipe { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .stage { flex: 1 1 132px; min-width: 132px; position: relative; padding: 15px 16px; border: 1px solid var(--line); border-radius: 9px; margin-right: 26px; margin-bottom: 14px; background: var(--panel); transition: border-color .25s var(--ease), transform .25s var(--ease); } .stage:hover { border-color: var(--rose-dim); transform: translateY(-2px); } .stage::after { content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--mono); } .stage:last-child::after { content: ""; } .stage b { font-family: var(--mono); font-size: .8rem; letter-spacing: .05em; display: block; color: var(--text); } .stage span { font-size: .78rem; color: var(--muted); display: block; margin-top: 4px; line-height: 1.4; } .stage .sdot { position: absolute; top: 15px; right: 14px; width: 7px; height: 7px; border-radius: 50%; } .stage .sdot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); } .stage .sdot.soon { background: var(--muted); } @media (max-width: 620px) { .stage { margin-right: 0; } .stage::after { content: ""; } } /* ── Voice cards ──────────────────────────────────────────────────────── */ .voice { padding: 20px; } .voice .row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .voice .name { font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; } .voice .id { font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } .voice p { color: #aeb9bd; font-size: .88rem; } .voice .mini { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 14px; opacity: .8; } .voice .mini i { flex: 1; background: var(--rose); border-radius: 2px; opacity: .5; } /* ── Code / terminal panel ────────────────────────────────────────────── */ .term { background: #070a0e; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-family: var(--mono); font-size: .84rem; line-height: 1.7; } .term .head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #0b0f14; } .term .head .dot { width: 9px; height: 9px; border-radius: 50%; background: #24303a; } .term .head .dot.rose { background: var(--rose); } .term .head span.t { margin-left: 6px; color: var(--muted); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; } .term pre { padding: 16px 18px; overflow-x: auto; color: #cfe9ec; } .term .cm { color: #5c7079; } /* comment */ .term .k { color: var(--rose); } /* method/keyword */ .term .s { color: var(--green); } /* string */ .term .p { color: var(--gold); } /* punctuation/key */ /* endpoint list */ .ep { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; font-family: var(--mono); font-size: .86rem; } .ep .m { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; } .ep .path { color: var(--cyan); } .ep .d { grid-column: 2; color: var(--muted); font-family: var(--ui); font-size: .84rem; margin-bottom: 10px; } /* ── Lanes (connect summary) ──────────────────────────────────────────── */ .lane { padding: 26px 24px; } .lane .who { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--rose); margin-bottom: 10px; } .lane h3 { font-size: 1.28rem; margin-bottom: 8px; } .lane p { color: var(--muted); font-size: .92rem; margin-bottom: 14px; } .lane .how { font-family: var(--mono); font-size: .8rem; color: var(--cyan); } /* ── Status chips ─────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line); text-transform: uppercase; } .chip .d { width: 8px; height: 8px; border-radius: 50%; } .chip.live .d { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2s var(--ease) infinite; } .chip.next .d { background: var(--amber); } .chip.plan .d { background: var(--muted); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } @media (prefers-reduced-motion: reduce) { .chip.live .d { animation: none; } } .roadmap { display: grid; gap: 12px; } .roadmap .r { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; padding: 14px 18px; } @media (max-width: 620px) { .roadmap .r { grid-template-columns: 1fr; gap: 6px; } } .roadmap .r .label { font-weight: 600; } .roadmap .r .desc { color: var(--muted); font-size: .9rem; } /* ── Footer ───────────────────────────────────────────────────────────── */ footer.site { border-top: 1px solid var(--line); padding: 40px 0 60px; margin-top: 40px; } footer.site .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; } footer.site .fine { color: var(--muted); font-size: .84rem; max-width: 420px; } footer.site .flinks { display: flex; gap: 18px; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; } footer.site .sig { margin-top: 22px; font-family: var(--mono); font-size: .76rem; color: var(--muted); } footer.site .sig b { color: var(--rose); font-weight: 400; } /* ── util ─────────────────────────────────────────────────────────────── */ .center { text-align: center; } .mono { font-family: var(--mono); } .rose { color: var(--rose); } .gold { color: var(--gold); } .cyan { color: var(--cyan); } .mt8 { margin-top: 8px; } .mt24 { margin-top: 24px; } .mt40 { margin-top: 40px; } .pill-row { display: flex; gap: 10px; flex-wrap: wrap; }