@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Cormorant+Garamond:wght@300;400;500;600&display=swap'); /* ═══════════════════════════════════════════════════════════════════════════════════════ PORTED, NOT REWRITTEN. This file is `global.css` and the landing half of `surfaces.css` from V_A/frontend/src/styles, copied unedited. The page they style is a static port of `LandingPage.tsx`. Keeping the rules byte-for-byte is the point: it is the same design, not a reconstruction of it, and a change made there can be brought here by re-running the port rather than by matching colours from a screenshot. Only two things are added, at the very bottom, and both are marked. ═══════════════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ═══════════════════════════════════════════════════════════════════════════ SURFACE COLOUR IDENTITY ─────────────────────────────────────────────────────────────────────────── Every surface (subdomain) gets its own palette, selected by the `data-surface` attribute that App.tsx stamps onto at boot. The rule for adding a surface: override the FOUNDATION tokens only. Everything downstream is derived from `--accent-rgb`, so components never need to know which surface they are on. landing electric blue on midnight cinematic, premium, "presence" demo brand blue on near-white calm workspace; UI recedes behind content stories amethyst + candle gold enchanted threshold, magical realm careers teal on soft mint growth, patience, safe practice hr bronze on warm sand human judgement, fair and considered hri steel cyan on graphite instrumentation, robotics lab admin near-monochrome slate backstage control room; colour = meaning ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Accent hue as an RGB triplet so every tint can be derived from one value. */ --accent-rgb: 37, 99, 235; /* Foundations */ --bg: #f4f7ff; --bg-panel: #ffffff; --bg-card: rgba(var(--accent-rgb), 0.04); --bg-card-hover: rgba(var(--accent-rgb), 0.07); --bg-elevated: rgba(var(--accent-rgb), 0.06); --border: rgba(var(--accent-rgb), 0.10); /* Primary — derived from the accent triplet */ --primary: rgb(var(--accent-rgb)); --primary-dim: rgba(var(--accent-rgb), 0.08); --primary-border: rgba(var(--accent-rgb), 0.22); --primary-glow: rgba(var(--accent-rgb), 0.25); /* Secondary accent — only surfaces that need a second hue set this. */ --accent-2: var(--primary); /* Status — deliberately NOT themed. Green means good everywhere. */ --green: #059669; --green-dim: rgba(5,150,105,0.10); --green-glow: rgba(5,150,105,0.30); --amber: #d97706; --amber-dim: rgba(217,119,6,0.10); --amber-border: rgba(217,119,6,0.22); --danger: #dc2626; --danger-dim: rgba(220,38,38,0.08); /* Text hierarchy */ --text-1: #0f1729; --text-2: #3d5070; --text-3: #8fa3c0; /* Type */ --font-mono: 'JetBrains Mono', monospace; --font-sans: 'Inter', -apple-system, sans-serif; --font-display: var(--font-sans); /* Shape */ --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; /* Shadows */ --shadow: 0 2px 12px rgba(var(--accent-rgb), 0.08); --shadow-lg: 0 8px 32px rgba(var(--accent-rgb), 0.12); /* Legacy aliases */ --bg-legacy: var(--bg); --surface: var(--bg-card); --surface-2: rgba(var(--accent-rgb), 0.03); --text: var(--text-1); --text-muted: var(--text-3); --success: var(--green); --success-light: var(--green-dim); } /* ══════════════════════════════════════════════════════════════════════════ BRAND — landing + demo ────────────────────────────────────────────────────────────────────────── These two are one product: the public face and the thing it is showing off. They share a single identity — blue on white / blue on black — and they are the only surfaces with a light/dark switch (`data-theme`, set by theme.ts). Greys here are NEUTRAL, not blue-tinted: blue is the accent, white and black are the grounds. Every value below clears WCAG AA (4.5:1) including the muted `--text-3` tier. ══════════════════════════════════════════════════════════════════════════ */ /* Light — the default. */ :root[data-surface="landing"], :root[data-surface="demo"] { color-scheme: light; --accent-rgb: 37, 99, 235; /* #2563eb */ --on-primary: #ffffff; /* label colour on a filled accent */ --bg: #f7f8fa; --bg-panel: #ffffff; --bg-card: rgba(11,15,25,0.04); --bg-card-hover: rgba(11,15,25,0.07); --bg-elevated: rgba(11,15,25,0.06); --border: rgba(11,15,25,0.11); --text-1: #0b0f19; /* 18.0:1 */ --text-2: #46505f; /* 7.7:1 */ --text-3: #5f6b7d; /* 5.1:1 — was 2.40:1 and failing */ --shadow: 0 2px 12px rgba(11,15,25,0.07); --shadow-lg: 0 8px 32px rgba(11,15,25,0.11); } /* Dark — blue on black. The accent lightens so it stays legible as text and as a border; `--on-primary` flips to near-black so filled buttons keep a high-contrast label (white on a light blue would only be 3.7:1). */ :root[data-surface="landing"][data-theme="dark"], :root[data-surface="demo"][data-theme="dark"] { color-scheme: dark; --accent-rgb: 96, 165, 250; /* #60a5fa — 7.7:1 on the background */ --on-primary: #0a0b0f; --bg: #0a0b0f; --bg-panel: #13151b; --bg-card: rgba(255,255,255,0.045); --bg-card-hover: rgba(255,255,255,0.08); --bg-elevated: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.11); --text-1: #f2f5f9; /* 18.0:1 */ --text-2: #b3bcc9; /* 10.3:1 */ --text-3: #8b95a5; /* 6.5:1 */ --shadow: 0 2px 20px rgba(0,0,0,0.5); --shadow-lg: 0 12px 44px rgba(0,0,0,0.6); } /* ── stories — the magical threshold ─────────────────────────────────────── Deep violet night with candle-gold as the second accent. Serif display face. This surface is meant to feel like an entrance, not an interface. */ :root[data-surface="stories"] { color-scheme: dark; --accent-rgb: 168, 85, 247; --bg: #0b0616; --bg-panel: #150c26; --border: rgba(var(--accent-rgb), 0.18); --accent-2: #f0c46a; --text-1: #f4ecff; --text-2: #b9a6d4; --text-3: #8776a1; /* 4.9:1 / 4.6:1 on panel (was 4.16 / 3.94) */ --font-display: 'Cormorant Garamond', Georgia, serif; --shadow: 0 2px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 56px rgba(0,0,0,0.65); } /* ── careers — profile, roles, and rehearsal ─────────────────────────────── Teal on soft mint. Encouraging rather than corporate; a place you are allowed to be bad at something while you get better. */ :root[data-surface="careers"] { --accent-rgb: 13, 148, 136; --bg: #f2f9f7; --bg-panel: #ffffff; --text-1: #0c1f1c; --text-2: #35564f; --text-3: #5a7770; /* 4.6:1 (was 2.52 — failing) */ } /* ── hr — hiring judgement ───────────────────────────────────────────────── Bronze on warm sand. Deliberately not "tech blue": hiring is a human decision, and the surface should feel considered and fair, not automated. */ :root[data-surface="hr"] { --accent-rgb: 180, 83, 9; --bg: #faf7f2; --bg-panel: #ffffff; --text-1: #1f1710; --text-2: #5c4a37; --text-3: #7e6e5a; /* 4.6:1 (was 2.93 — failing) */ } /* ── hri — human/robot interaction ───────────────────────────────────────── Steel cyan on graphite. Reads as instrumentation and telemetry. */ :root[data-surface="hri"] { color-scheme: dark; --accent-rgb: 34, 211, 238; --bg: #070d10; --bg-panel: #0d171c; --border: rgba(var(--accent-rgb), 0.16); --text-1: #e2f4f8; --text-2: #8fb3bd; --text-3: #648692; /* 5.0:1 / 4.6:1 on panel (was 4.14 / 3.85) */ --font-display: var(--font-mono); --shadow: 0 2px 24px rgba(0,0,0,0.5); --shadow-lg: 0 12px 48px rgba(0,0,0,0.6); } /* ── admin — governance / control room ───────────────────────────────────── Near-monochrome by design. This is backstage, not a product surface, and colour is reserved for meaning (danger, warning, live) rather than identity. Borders use neutral slate rather than the accent so it stays grey. */ :root[data-surface="admin"] { color-scheme: dark; --accent-rgb: 56, 189, 248; --bg: #0c0e12; --bg-panel: #14181f; --bg-card: rgba(148,163,184,0.05); --bg-card-hover: rgba(148,163,184,0.09); --bg-elevated: rgba(148,163,184,0.07); --border: rgba(148,163,184,0.14); --text-1: #e6ebf2; --text-2: #9aa6b8; --text-3: #768393; /* 5.0:1 / 4.6:1 on panel (was 3.83 / 3.53) */ --shadow: 0 2px 16px rgba(0,0,0,0.45); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55); } html, body, #root { height: 100%; } body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text-1); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Layout ────────────────────────────────────────────────────────────────── */ .app { min-height: 100vh; display: flex; flex-direction: column; } .header { background: var(--bg-panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); padding: 0 32px; height: 60px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; } .header-logo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text-1); } .header-logo svg { width: 20px; height: 20px; color: var(--primary); } .header-badge { font-size: 10px; font-weight: 600; color: var(--primary); background: var(--primary-dim); border: 1px solid var(--primary-border); border-radius: 6px; padding: 2px 8px; letter-spacing: 1px; text-transform: uppercase; } .main { flex: 1; max-width: 1100px; margin: 0 auto; width: 100%; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 24px; } .session-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } @media (max-width: 768px) { .session-grid { grid-template-columns: 1fr; } } /* ── Cards ─────────────────────────────────────────────────────────────────── */ .card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 10px; font-weight: 600; color: var(--text-3); letter-spacing: 1.5px; text-transform: uppercase; } .card-body { padding: 20px; } /* ── Video Preview ─────────────────────────────────────────────────────────── */ .video-wrapper { position: relative; background: #0f1729; border-radius: 0; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; } .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-3); } .video-placeholder svg { width: 48px; height: 48px; opacity: 0.3; } .video-placeholder p { font-size: 13px; } .video-overlay { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; } .rec-badge { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: rgba(255,255,255,0.9); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 6px; letter-spacing: 0.5px; } .rec-dot { width: 7px; height: 7px; background: var(--danger); border-radius: 50%; animation: pulse-dot 1.2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.75); } } .timer-badge { background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; padding: 5px 10px; border-radius: 6px; letter-spacing: 1px; } /* ── Controls Panel ────────────────────────────────────────────────────────── */ .controls-panel { display: flex; flex-direction: column; gap: 16px; } .status-block { display: flex; flex-direction: column; gap: 6px; } .status-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); } .status-value { font-size: 14px; font-weight: 500; color: var(--text-1); display: flex; align-items: center; gap: 8px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-dot.idle { background: #cbd5e1; } .status-dot.ready { background: var(--green); } .status-dot.recording { background: var(--danger); animation: pulse-dot 1.2s infinite; } .status-dot.busy { background: var(--amber); animation: pulse-dot 1s infinite; } .status-dot.done { background: var(--green); } .status-dot.error { background: var(--danger); } /* ── Steps ─────────────────────────────────────────────────────────────────── */ .steps { display: flex; flex-direction: column; gap: 0; } .step { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 14px; font-size: 13px; color: var(--text-3); border-left: 1px solid var(--border); margin-left: 7px; position: relative; } .step:first-child { padding-top: 0; } .step:last-child { border-left-color: transparent; padding-bottom: 0; } .step-icon { position: absolute; left: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; } .step.done { color: var(--text-2); } .step.done .step-icon { background: var(--green); color: #fff; border-color: var(--green); } .step.active { color: var(--text-1); font-weight: 500; } .step.active .step-icon { background: var(--primary); border-color: var(--primary); color: #fff; animation: pulse-ring 1.5s infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.4); } 70% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); } } /* ── Buttons ───────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: filter 0.15s, transform 0.1s, opacity 0.15s; width: 100%; letter-spacing: 0.2px; font-family: inherit; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 2px 12px rgba(var(--accent-rgb),0.25); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .btn-danger { background: var(--danger); color: white; box-shadow: 0 2px 12px rgba(220,38,38,0.2); } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn-ghost { background: var(--bg-panel); color: var(--text-2); border: 1px solid var(--border); } .btn-ghost:hover:not(:disabled) { background: var(--bg-card); color: var(--text-1); border-color: var(--primary-border); } /* ── Device selector ───────────────────────────────────────────────────────── */ .device-select { width: 100%; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-1); font-size: 13px; font-family: inherit; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; } .device-select:focus { border-color: var(--primary); } .device-select option { background: var(--bg-panel); color: var(--text-1); } /* ── Summary / Results ─────────────────────────────────────────────────────── */ .summary-section { display: flex; flex-direction: column; gap: 20px; } .summary-overview { font-size: 15px; line-height: 1.75; color: var(--text-1); } .summary-block { display: flex; flex-direction: column; gap: 8px; } .summary-block-title { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); } .topic-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; } .topic-chip { font-size: 12px; padding: 4px 10px; background: var(--primary-dim); border: 1px solid var(--primary-border); color: var(--primary); border-radius: 20px; font-weight: 500; } .moments-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .moment-item { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; } .moment-time { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--primary); flex-shrink: 0; padding-top: 2px; } .moment-note { color: var(--text-2); } .transcript-box { font-size: 13px; line-height: 1.7; color: var(--text-2); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; max-height: 240px; overflow-y: auto; white-space: pre-wrap; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .caveat-box { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2); padding: 10px 14px; background: var(--amber-dim); border: 1px solid var(--amber-border); border-radius: var(--radius-sm); } /* ── Chat ──────────────────────────────────────────────────────────────────── */ .chat-messages { display: flex; flex-direction: column; gap: 14px; max-height: 360px; overflow-y: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .chat-message { display: flex; flex-direction: column; gap: 4px; } .chat-message.user { align-items: flex-end; } .chat-message.assistant { align-items: flex-start; } .chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6; } .chat-message.user .chat-bubble { background: var(--primary); color: var(--on-primary, #fff); border-bottom-right-radius: 3px; } .chat-message.assistant .chat-bubble { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-1); border-bottom-left-radius: 3px; } .chat-input-row { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); } .chat-input { flex: 1; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-1); font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.2s; } .chat-input:focus { border-color: var(--primary); } .chat-input::placeholder { color: var(--text-3); } .chat-send { padding: 9px 16px; background: var(--primary); color: var(--on-primary, #fff); border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter 0.15s; } .chat-send:hover:not(:disabled) { filter: brightness(1.08); } .chat-send:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Error ─────────────────────────────────────────────────────────────────── */ .error-banner { padding: 12px 16px; background: var(--danger-dim); border: 1px solid rgba(220,38,38,0.2); border-radius: var(--radius-sm); color: var(--danger); font-size: 13px; display: flex; gap: 8px; align-items: center; } /* ── Live view video panel ─────────────────────────────────────────────────── */ .vp-wrap { position:relative; width:100%; height:100%; background:#0f1729; overflow:hidden; } .vp-video { width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1); } .vp-mesh { position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); pointer-events:none; } .vp-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; height:100%; color:var(--text-3); } .vp-placeholder p { font-size:13px; } .vp-grad { position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(transparent,rgba(15,23,41,0.85)); pointer-events:none; } .vp-wave { position:absolute; bottom:10px; left:0; right:0; width:100%; height:44px; pointer-events:none; } .vp-hud-left { position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); border-radius:6px; padding:5px 10px; } .vp-hud-right { position:absolute; top:16px; right:16px; display:flex; gap:6px; } .vp-rec-dot { width:7px; height:7px; border-radius:50%; background:var(--danger); animation:pulse-dot 1s infinite; flex-shrink:0; } .vp-rec-text { font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(255,255,255,0.85); } .vp-ctrl-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); border:none; border-radius:6px; cursor:pointer; color:rgba(255,255,255,0.4); transition:background 0.15s,color 0.15s; } .vp-ctrl-btn:hover { background:rgba(0,0,0,0.7); color:rgba(255,255,255,0.8); } .vp-ctrl-btn.active { color:var(--green); background:var(--green-dim); } /* ── Misc ──────────────────────────────────────────────────────────────────── */ .divider { height:1px; background:var(--border); } /* ── Scrollbars ────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.15); border-radius: 4px; } /* ── Nav ───────────────────────────────────────────────────────────────────── */ .ps-nav { height: 52px; background: var(--bg-panel); border-bottom: 1px solid var(--border); box-shadow: 0 1px 16px rgba(var(--accent-rgb),0.06); display: flex; align-items: center; padding: 0 24px; gap: 0; position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .ps-nav-logo { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: var(--text-1); text-decoration: none; margin-right: 32px; flex-shrink: 0; } .ps-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; } .ps-nav-link { padding: 5px 11px; font-size: 12px; font-weight: 500; letter-spacing: 0.2px; color: var(--text-3); text-decoration: none; border-radius: var(--radius-xs); transition: color 0.15s, background 0.15s; } .ps-nav-link:hover { color: var(--text-2); background: var(--bg-card); } .ps-nav-link.active { color: var(--primary); background: var(--primary-dim); font-weight: 600; } .ps-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .ps-nav-user { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); } .ps-nav-role-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .ps-nav-role { font-family: var(--font-mono); font-size: 9px; color: var(--text-3); background: var(--bg-card); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.5px; } .ps-nav-btn { padding: 5px 12px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-3); font-size: 11px; font-family: var(--font-sans); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .ps-nav-btn:hover { color: var(--text-2); border-color: var(--primary-border); } /* ── Chip / badge ──────────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .chip-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(5,150,105,0.2); } .chip-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-border); } .chip-indigo { background: var(--primary-dim); color: var(--primary); border: 1px solid var(--primary-border); } .chip-dim { background: var(--bg-card); color: var(--text-3); border: 1px solid var(--border); } /* ── Monospace label ───────────────────────────────────────────────────────── */ .mono-label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); } /* ── Inline status dot ─────────────────────────────────────────────────────── */ .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green-glow); animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } .live-dot.speaking { background: var(--amber); box-shadow: 0 0 6px rgba(217,119,6,0.4); } .live-dot.idle { background: #cbd5e1; box-shadow: none; animation: none; } /* ═══════════════════════════════════════════════════════════════════════════ Surface pages — landing, stories, placeholders, governance. Every colour here comes from the surface tokens in global.css, so each page inherits its own identity automatically from `data-surface` on . ═══════════════════════════════════════════════════════════════════════════ */ /* ── Shared: ambient light ────────────────────────────────────────────────── */ .amb { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .amb::before, .amb::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; } .amb::before { width: 46vw; height: 46vw; top: -14vw; left: -8vw; background: radial-gradient(circle, var(--primary-glow), transparent 68%); animation: amb-drift-a 26s ease-in-out infinite alternate; } .amb::after { width: 38vw; height: 38vw; bottom: -12vw; right: -6vw; background: radial-gradient(circle, var(--accent-2), transparent 68%); opacity: 0.22; animation: amb-drift-b 32s ease-in-out infinite alternate; } @keyframes amb-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw, 5vh, 0) scale(1.12); } } @keyframes amb-drift-b { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-5vw, -4vh, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .amb::before, .amb::after { animation: none; } } /* ── Shared: page scaffold ────────────────────────────────────────────────── */ .pg { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .pg-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 28px; } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); } /* ═══════════════════════════════════════════════════════════════════════════ Placeholder — careers. / hr. / hri. Reserved namespace. Should look deliberate, not broken. ═══════════════════════════════════════════════════════════════════════════ */ .sp { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; padding: 80px 28px; } .sp-title { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-1); } .sp-tagline { font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.65; color: var(--text-2); max-width: 46ch; } .sp-status { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 100px; border: 1px solid var(--primary-border); background: var(--primary-dim); color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: 0.6px; } .sp-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: pulse-dot 2s ease-in-out infinite; } .sp-back { margin-top: 8px; font-size: 13px; color: var(--text-3); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.18s, border-color 0.18s; } .sp-back:hover { color: var(--primary); border-bottom-color: var(--primary-border); } /* ═══════════════════════════════════════════════════════════════════════════ Landing — the apex domain. Dark, stage-lit, the product's first impression. ═══════════════════════════════════════════════════════════════════════════ */ /* Faint technical grid — reads as instrumentation without competing. */ .ld-grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--accent-rgb), 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), 0.055) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%); } .ld-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .ld-logo { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: var(--text-1); text-decoration: none; } .ld-by { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); } /* Tabs across the public pages */ .ld-tabs { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 14px; } .ld-tab { padding: 7px 14px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 500; color: var(--text-3); text-decoration: none; transition: color 0.16s, background 0.16s; } .ld-tab:hover { color: var(--text-1); background: var(--primary-dim); } .ld-tab.active { color: var(--primary); background: var(--primary-dim); font-weight: 600; } .ld-nav-cta { padding: 9px 18px; border-radius: var(--radius-xs); border: 1px solid var(--primary-border); background: var(--primary-dim); color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.16s, filter 0.16s; } .ld-nav-cta:hover { background: var(--primary); color: var(--on-primary, #fff); } @media (max-width: 640px) { .ld-by { display: none; } .ld-tabs { margin-right: 8px; } .ld-tab { padding: 7px 10px; font-size: 12.5px; } } /* ── Page header shared by /services and /contact ─────────────────────────── */ .ld-pagehead { padding: clamp(52px, 9vh, 92px) 0 clamp(28px, 4vh, 48px); display: flex; flex-direction: column; gap: 16px; max-width: 62ch; } .ld-pagehead h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; color: var(--text-1); } .ld-pagehead p { font-size: clamp(0.98rem, 2vw, 1.12rem); line-height: 1.75; color: var(--text-2); } /* ── Services ─────────────────────────────────────────────────────────────── */ .sv-list { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(56px, 9vh, 96px); } .sv-item { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 30px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .sv-item:hover { border-color: var(--primary-border); transform: translateY(-2px); box-shadow: var(--shadow-lg); } @media (max-width: 620px) { .sv-item { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; } } .sv-num { font-family: var(--font-mono); font-size: 26px; font-weight: 300; color: var(--primary); opacity: 0.5; line-height: 1; } .sv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .sv-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); } .sv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; border: 1px solid var(--border); color: var(--text-3); } .sv-chip.live { color: var(--green); border-color: rgba(5,150,105,0.32); background: var(--green-dim); } .sv-chip.soon { color: var(--amber); border-color: var(--amber-border); background: var(--amber-dim); } .sv-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sv-chip.live .dot { animation: pulse-dot 2s ease-in-out infinite; } .sv-lede { font-size: 14.5px; line-height: 1.75; color: var(--text-2); max-width: 62ch; } .sv-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .sv-points li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: rgba(var(--accent-rgb), 0.05); color: var(--text-2); } .sv-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .sv-link { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .sv-link span { transition: transform 0.18s; } .sv-link:hover span { transform: translateX(4px); } .sv-host { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: auto; } /* A visible, honest note on things that do not exist yet. */ .sv-note { margin-top: 14px; padding: 12px 15px; border-left: 2px solid var(--amber); background: var(--amber-dim); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: 12.5px; line-height: 1.65; color: var(--text-2); } /* ── Contact ──────────────────────────────────────────────────────────────── */ .ct-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; padding-bottom: clamp(56px, 9vh, 96px); align-items: start; } @media (max-width: 800px) { .ct-grid { grid-template-columns: 1fr; } } .ct-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 26px; } .ct-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .ct-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3); } .ct-input, .ct-textarea { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text-1); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.18s, background 0.18s; } .ct-input:focus, .ct-textarea:focus { border-color: var(--primary); background: var(--primary-dim); } .ct-input::placeholder, .ct-textarea::placeholder { color: var(--text-3); } .ct-textarea { resize: vertical; min-height: 132px; line-height: 1.65; } .ct-reasons { display: flex; flex-wrap: wrap; gap: 7px; } .ct-reason { padding: 7px 14px; border-radius: 100px; border: 1px solid var(--border); background: transparent; color: var(--text-3); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color 0.16s, border-color 0.16s, background 0.16s; } .ct-reason:hover { color: var(--text-1); border-color: var(--text-3); } .ct-reason.on { color: var(--primary); border-color: var(--primary-border); background: var(--primary-dim); } .ct-submit { width: 100%; margin-top: 4px; padding: 14px 22px; border: none; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary, #fff); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 0 40px var(--primary-glow); transition: filter 0.16s, transform 0.14s, opacity 0.16s; } .ct-submit:hover:not(:disabled) { filter: brightness(1.09); transform: translateY(-1px); } .ct-submit:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } /* Tells the visitor exactly what the button will do. No hidden surprises. */ .ct-hint { margin-top: 11px; font-size: 12px; line-height: 1.6; color: var(--text-3); text-align: center; } .ct-aside { display: flex; flex-direction: column; gap: 18px; } .ct-block { display: flex; flex-direction: column; gap: 6px; } .ct-block-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary); } .ct-block-value { font-size: 14px; line-height: 1.7; color: var(--text-2); } .ct-block-value a { color: var(--text-1); text-decoration: none; border-bottom: 1px solid var(--primary-border); } .ct-block-value a:hover { color: var(--primary); } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .ld-hero { min-height: calc(100vh - 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 64px 28px 88px; } /* The face: a landmark-detection wireframe. It draws itself once, then floats. */ .ld-face { width: clamp(168px, 22vw, 224px); aspect-ratio: 200 / 220; margin-bottom: 18px; color: var(--primary); animation: ld-float 5.5s ease-in-out infinite; } .ld-face svg { width: 100%; height: 100%; filter: drop-shadow(0 0 28px var(--primary-glow)); } .ld-trace { stroke-dasharray: 1000; animation: ld-draw 2.8s ease forwards; } .ld-scan { animation: ld-scan-move 4.5s ease-in-out infinite; } @keyframes ld-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes ld-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } @keyframes ld-scan-move { 0%, 100% { transform: translateY(-46px); opacity: 0.15; } 50% { transform: translateY(46px); opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .ld-face { animation: none; } .ld-trace { animation: none; stroke-dashoffset: 0; } .ld-scan { animation: none; } } .ld-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 100px; border: 1px solid var(--primary-border); background: var(--primary-dim); color: var(--primary); font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; } .ld-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); animation: pulse-dot 2s ease-in-out infinite; } .ld-wordmark { font-family: var(--font-mono); font-size: clamp(2.6rem, 9vw, 5.4rem); font-weight: 300; letter-spacing: 0.16em; text-indent: 0.16em; color: var(--text-1); text-shadow: 0 0 80px var(--primary-glow); } .ld-tagline { font-size: clamp(1.05rem, 2.5vw, 1.45rem); font-weight: 300; line-height: 1.5; color: var(--text-1); max-width: 26ch; } .ld-subtagline { font-size: clamp(0.9rem, 1.8vw, 1.02rem); font-weight: 300; line-height: 1.7; color: var(--text-3); max-width: 56ch; } .ld-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; } .ld-cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; text-decoration: none; transition: filter 0.16s, transform 0.14s, background 0.16s, border-color 0.16s; } .ld-cta:active { transform: scale(0.985); } .ld-cta span { transition: transform 0.18s; } .ld-cta:hover span { transform: translateX(4px); } .ld-cta-primary { background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 0 48px var(--primary-glow), var(--shadow); } .ld-cta-primary:hover { filter: brightness(1.1); transform: translateY(-2px); } .ld-cta-ghost { border: 1px solid var(--border); color: var(--text-2); } .ld-cta-ghost:hover { color: var(--text-1); border-color: var(--primary-border); background: var(--primary-dim); } .ld-hero-note { font-size: 12px; color: var(--text-3); letter-spacing: 0.4px; } /* ── Sections ─────────────────────────────────────────────────────────────── */ .ld-section { padding: clamp(64px, 10vh, 104px) 0; } .ld-section.bordered { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(var(--accent-rgb), 0.03); } .ld-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; } .ld-h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 300; line-height: 1.28; color: var(--text-1); margin-bottom: 20px; } .ld-body { font-size: 15px; line-height: 1.85; color: var(--text-2); max-width: 66ch; } /* Signal cards */ .ld-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 44px; } .ld-signal { padding: 26px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s; } .ld-signal:hover { border-color: var(--primary-border); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .ld-signal-icon { font-size: 23px; display: block; margin-bottom: 13px; } .ld-signal h3 { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; } .ld-signal p { font-size: 13px; line-height: 1.7; color: var(--text-3); } /* Three streams → sync → context */ .ld-streams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; } @media (max-width: 720px) { .ld-streams { grid-template-columns: 1fr; } } .ld-stream { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 11px; } .ld-stream-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); text-align: center; margin-bottom: 8px; } .ld-pill { display: block; width: 100%; text-align: center; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(var(--accent-rgb), 0.05); font-family: var(--font-mono); font-size: 10px; color: var(--text-2); } .ld-merge { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 10px; } .ld-merge-lines { display: flex; justify-content: space-between; width: 66%; height: 26px; } .ld-merge-line { width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, var(--primary)); opacity: 0.5; } .ld-merge-node { padding: 7px 20px; border: 1px solid var(--primary-border); border-radius: 100px; background: var(--primary-dim); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); } .ld-merge-arrow { font-size: 19px; color: var(--primary); opacity: 0.55; line-height: 1.5; } .ld-context { border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 10px; background: rgba(var(--accent-rgb), 0.05); padding: 20px 24px; } .ld-context-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; } .ld-context-text { font-size: 13.5px; line-height: 1.75; color: var(--text-2); } .ld-context-text em { font-style: italic; color: var(--text-1); } /* Stats */ .ld-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 44px; } .ld-stat { background: var(--bg-panel); padding: 26px 18px; text-align: center; } .ld-stat-num { display: block; font-family: var(--font-mono); font-size: 27px; font-weight: 500; color: var(--primary); margin-bottom: 6px; } .ld-stat-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); } /* Surface directory */ .ld-surfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 14px; margin-top: 44px; } .ld-card { display: flex; flex-direction: column; gap: 9px; padding: 24px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .ld-card:hover { border-color: var(--primary-border); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .ld-card[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .ld-card-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--primary); opacity: 0.75; } .ld-card-name { font-size: 15px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; } .ld-card-desc { font-size: 13px; line-height: 1.65; color: var(--text-3); } /* Team */ .ld-team { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); flex-wrap: wrap; } .ld-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 16px; letter-spacing: 1px; color: var(--primary); border: 1px solid var(--primary-border); background: var(--primary-dim); } .ld-team-name { font-size: 15px; font-weight: 600; color: var(--text-1); } .ld-team-role { font-size: 13px; color: var(--text-3); margin-top: 2px; } .ld-team-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 100px; border: 1px solid var(--amber-border); background: var(--amber-dim); color: var(--amber); font-size: 11px; font-weight: 500; } /* Closing CTA */ .ld-close { text-align: center; padding: clamp(64px, 10vh, 104px) 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .ld-close h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 300; line-height: 1.3; color: var(--text-1); max-width: 22ch; } .ld-close p { font-size: 14.5px; line-height: 1.8; color: var(--text-2); max-width: 56ch; } .ld-foot { margin-top: auto; padding: 26px 28px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ld-foot-logo { font-family: var(--font-mono); letter-spacing: 4px; text-transform: uppercase; } .th-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-xs); border: 1px solid var(--border); background: transparent; color: var(--text-3); cursor: pointer; transition: color 0.16s, border-color 0.16s, background 0.16s; } .th-toggle:hover { color: var(--primary); border-color: var(--primary-border); background: var(--primary-dim); } .th-toggle svg { width: 17px; height: 17px; } /* Pinned variant for demo, which has no nav bar for signed-out visitors and whose presentation UI owns the top of the viewport. */ .th-toggle.floating { position: fixed; right: 16px; bottom: 16px; z-index: 200; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-panel); box-shadow: var(--shadow); } /* ═══════════════════════════════════════════════════════════════════════════════════════ ADDED HERE. Not in V_A: these say what THIS deployment does not have. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* A surface card that leads nowhere. It keeps the shape of a card -- the visitor should see what the product is made of -- and refuses the click, rather than looking broken or, worse, linking to a subdomain that is not part of this deployment. */ .ld-card.is-off { cursor: default; opacity: 0.62; } .ld-card.is-off:hover { transform: none; border-color: var(--border); box-shadow: none; } .ld-off-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-3); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; } /* The Oracle Protocol, on the front page. The old green landing led with it and the new one dropped it; it is back, in this build's blue, as its own panel rather than a sixth card -- it is a study someone SITS for, not a surface they browse. */ .ld-oracle { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; margin-top: 30px; padding: 26px 28px; border: 1px solid var(--primary-border); border-radius: var(--radius); background: var(--primary-dim); } .ld-oracle-body { flex: 1 1 320px; } .ld-oracle h3 { font-size: 17px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; } .ld-oracle p { font-size: 13.5px; line-height: 1.75; color: var(--text-2); } .ld-oracle .ld-cta { flex: 0 0 auto; } /* The nav bar on a phone. V_A has no narrow rule for it and the live site overflows the same way: at 390px "See it live" runs off the right edge. The byline goes first -- it is a credit, not navigation -- then the tabs, whose destinations are all on the page below anyway. */ @media (max-width: 620px) { .ld-nav { padding-left: 16px; padding-right: 16px; gap: 10px; } .ld-by { display: none; } } @media (max-width: 460px) { .ld-tabs { display: none; } } /* The access code box. Monospace, because the code is typed character by character and often from a phone, and a proportional face makes a transposed pair invisible. */ .ld-tokenbox { display: flex; gap: 10px; width: 100%; max-width: 460px; } .ld-tokenbox input { flex: 1; min-width: 0; padding: 14px 16px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; } .ld-tokenbox input::placeholder { color: var(--text-3); } .ld-tokenbox input:focus { outline: none; border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--primary-dim); } .ld-tokenerr { min-height: 20px; font-size: 13px; color: var(--danger); } .ld-tokenfine { font-size: 12.5px; line-height: 1.7; color: var(--text-3); max-width: 46ch; } @media (max-width: 480px) { .ld-tokenbox { flex-direction: column; } }