/* ========================================================================== Ventra Sciences v4 — vsc-pages.css Shared stylesheet for the static content pages: LEGAL / ABOUT / CONTACT. OWNERSHIP NOTE (multi-agent build): - The .vsc-legal block below is complete. - .vsc-about and .vsc-contact blocks get APPENDED at the bottom of this file, below the marker. Do not edit each other's blocks. Design system (BUILD-SPEC §0.4): dark navy page #0F1620 -> #12202E, cards are a 1px hairline rgba(255,255,255,.07) with radius 16-20px and NO drop shadows, fill one step lighter than the page. Buttons are full pills. Eyebrow = short cyan rule + uppercase letter-spaced cyan label. Display headings are light/regular weight, never black. Font is Inter (already loaded by the theme). ACCENT: never hardcode a cyan. Everything reads --pg-cyan, which resolves to the theme token --vsc-cyan. The fallback exists ONLY because --vsc-cyan is not defined in vsc-core.css yet (BUILD-SPEC §0.1 is a separate agent's job); once that token lands, this file inherits it automatically with no edit. ========================================================================== */ .vsc-legal { /* Local aliases — one place to change, and resilient to token load order. */ --pg-cyan: var(--vsc-cyan, #0EA5E9); --pg-cyan-hover: var(--vsc-cyan-hover, #38BDF8); --pg-bg-a: #0F1620; --pg-bg-b: #12202E; --pg-card: rgba(255, 255, 255, .028); --pg-line: rgba(255, 255, 255, .07); --pg-line-2: rgba(255, 255, 255, .045); --pg-ink: #EAF0F6; /* headings / key terms */ --pg-body: #A7B6C6; /* body copy */ --pg-muted: #74889C; /* meta, numbers */ --pg-shell: 1160px; /* hero + footer rail width */ --pg-read: 760px; /* the readable measure — do not exceed */ /* The page paints its own dark surface, so it is correct even if the theme's `vsc-dark` gate has not been extended to the legal slugs yet. */ background: linear-gradient(180deg, var(--pg-bg-a) 0%, var(--pg-bg-b) 100%); background-attachment: fixed; color: var(--pg-body); font-family: 'Inter', system-ui, -apple-system, sans-serif; display: block; min-height: 70vh; padding-bottom: 8px; /* Belt-and-braces against 390px horizontal overflow from any long token. */ overflow-x: clip; } .vsc-legal *, .vsc-legal *::before, .vsc-legal *::after { box-sizing: border-box; } .vsc-legal-shell { width: 100%; max-width: var(--pg-shell); margin: 0 auto; padding-inline: 24px; } /* ── HERO ───────────────────────────────────────────────────────────────── Slim by design: this is a document, not a landing page. Title + one meta line, then straight into the text. */ .vsc-legal-hero { padding: 72px 0 40px; border-bottom: 1px solid var(--pg-line-2); } .vsc-legal-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pg-cyan); margin-bottom: 18px; } /* The short cyan rule that precedes every eyebrow in this design system. */ .vsc-legal-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--pg-cyan); flex: none; } .vsc-legal-hero h1 { margin: 0; font-size: clamp(34px, 5.6vw, 56px); font-weight: 300; /* light display weight, per §0.4 */ line-height: 1.08; letter-spacing: -.02em; color: #fff; } .vsc-legal-meta { display: flex; flex-wrap: wrap; /* wraps instead of overflowing at 390px */ align-items: baseline; gap: 8px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--pg-muted); } .vsc-legal-date { color: var(--pg-body); } .vsc-legal-dot { color: var(--pg-line); } /* ── LAYOUT ─────────────────────────────────────────────────────────────── Desktop: sticky ToC rail + the readable column. Mobile: single column, ToC collapses into
. */ .vsc-legal-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 56px; padding-bottom: 88px; } /* ── STICKY TOC (desktop) ─────────────────────────────────────────────── */ .vsc-legal-toc { position: sticky; top: 96px; /* clears the sticky site header */ max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--pg-line) transparent; } .vsc-legal-toc::-webkit-scrollbar { width: 4px; } .vsc-legal-toc::-webkit-scrollbar-thumb { background: var(--pg-line); border-radius: 4px; } .vsc-legal-toc-ttl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); padding: 0 0 14px 13px; } .vsc-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; } .vsc-legal-toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px 7px 12px; border-left: 2px solid transparent; /* becomes the cyan active rule */ font-size: 13.5px; line-height: 1.45; color: var(--pg-muted); text-decoration: none; transition: color .16s ease, border-color .16s ease, background-color .16s ease; } .vsc-legal-toc a .n { flex: none; min-width: 16px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--pg-line); transition: color .16s ease; } .vsc-legal-toc a:hover { color: var(--pg-ink); background: rgba(255, 255, 255, .022); } .vsc-legal-toc a.is-active { color: var(--pg-ink); border-left-color: var(--pg-cyan); background: rgba(255, 255, 255, .028); } .vsc-legal-toc a.is-active .n { color: var(--pg-cyan); } /* ── MOBILE TOC ───────────────────────────────────────────────────────── */ .vsc-legal-toc-m { display: none; } /* desktop: the sticky rail is used */ .vsc-legal-toc-m { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 16px; margin-bottom: 28px; overflow: hidden; } .vsc-legal-toc-m > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; /* >= 40px tap target */ padding: 14px 18px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--pg-ink); } .vsc-legal-toc-m > summary::-webkit-details-marker { display: none; } .vsc-legal-toc-m > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--pg-cyan); border-bottom: 1.5px solid var(--pg-cyan); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; } .vsc-legal-toc-m[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .vsc-legal-toc-count { font-size: 12px; font-weight: 400; color: var(--pg-muted); } .vsc-legal-toc-m ol { list-style: none; margin: 0; padding: 4px 0 10px; border-top: 1px solid var(--pg-line-2); counter-reset: vsctoc; } .vsc-legal-toc-m li { counter-increment: vsctoc; } .vsc-legal-toc-m a { display: flex; gap: 10px; align-items: baseline; min-height: 40px; /* tap target */ padding: 10px 18px; font-size: 14px; line-height: 1.45; color: var(--pg-body); text-decoration: none; } .vsc-legal-toc-m a::before { content: counter(vsctoc); flex: none; min-width: 16px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--pg-cyan); } .vsc-legal-toc-m a:active { background: rgba(255, 255, 255, .03); } /* ── DOCUMENT ─────────────────────────────────────────────────────────── */ .vsc-legal-doc { max-width: var(--pg-read); min-width: 0; /* lets the grid child actually shrink */ } .vsc-legal-doc--solo { margin-inline: auto; } .vsc-legal-sec { padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px solid var(--pg-line-2); /* hairline divider per section */ /* Anchor jumps must clear the sticky site header. */ scroll-margin-top: 104px; } .vsc-legal-sec:last-of-type { border-bottom: 0; margin-bottom: 8px; } .vsc-legal-sec h2 { display: flex; gap: 12px; align-items: baseline; margin: 0 0 16px; font-size: clamp(19px, 2.4vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -.012em; color: #fff; } .vsc-legal-num { flex: none; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--pg-cyan); transform: translateY(-1px); } /* Body copy — 17px, generous leading. This is the whole point of the page. */ .vsc-legal-sec p, .vsc-legal-sec li, .vsc-legal-prose p, .vsc-legal-prose li { font-size: 17px; line-height: 1.78; color: var(--pg-body); margin: 0 0 16px; } .vsc-legal-sec p:last-child, .vsc-legal-sec li:last-child { margin-bottom: 0; } .vsc-legal-sec ul, .vsc-legal-sec ol, .vsc-legal-prose ul, .vsc-legal-prose ol { margin: 0 0 18px; padding-left: 22px; } .vsc-legal-sec li, .vsc-legal-prose li { margin-bottom: 10px; } .vsc-legal-sec li::marker, .vsc-legal-prose li::marker { color: var(--pg-cyan); } /* Key terms lift to white — the "bold-white key terms" rule from §10. */ .vsc-legal-sec strong, .vsc-legal-prose strong { color: var(--pg-ink); font-weight: 600; } .vsc-legal-sec a, .vsc-legal-prose a, .vsc-legal-pending a { color: var(--pg-cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(14, 165, 233, .38); /* fallback */ text-decoration-color: color-mix(in srgb, var(--pg-cyan) 38%, transparent); /* Long emails/URLs must never blow out the 390px viewport. */ overflow-wrap: anywhere; transition: color .16s ease, text-decoration-color .16s ease; } .vsc-legal-sec a:hover, .vsc-legal-prose a:hover, .vsc-legal-pending a:hover { color: var(--pg-cyan-hover); text-decoration-color: currentColor; } /* ── CALLOUT ────────────────────────────────────────────────────────────── Waivers, warranty disclaimers, liability caps and the arbitration clause. These have to be CONSPICUOUS to be enforceable — that is the job of this box, not decoration. Cyan left rule + tinted fill, no shadow (§0.4). */ .vsc-legal-callout { position: relative; padding: 22px 24px; border: 1px solid rgba(14, 165, 233, .22); /* fallback */ border: 1px solid color-mix(in srgb, var(--pg-cyan) 22%, transparent); border-left: 2px solid var(--pg-cyan); border-radius: 14px; background: rgba(14, 165, 233, .05); /* fallback */ background: color-mix(in srgb, var(--pg-cyan) 5%, transparent); } .vsc-legal-callout p { font-size: 15.5px; line-height: 1.72; color: #C6D4E1; margin-bottom: 12px; } .vsc-legal-callout p:last-child { margin-bottom: 0; } .vsc-legal-callout strong { color: #fff; } /* ── PENDING (no copy yet) ─────────────────────────────────────────────── Deliberately makes no legal statement. */ .vsc-legal-pending { padding: 40px 32px; border: 1px solid var(--pg-line); border-radius: 20px; background: var(--pg-card); text-align: center; } .vsc-legal-pending-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-cyan); margin-bottom: 14px; } .vsc-legal-pending h2 { margin: 0 0 14px; font-size: clamp(21px, 3vw, 26px); font-weight: 400; line-height: 1.3; color: #fff; } .vsc-legal-pending p { max-width: 52ch; margin: 0 auto 12px; font-size: 16px; line-height: 1.72; color: var(--pg-body); } .vsc-legal-pending p:last-child { margin-bottom: 0; } /* ── SIGNATURE + CROSS-LINKS ─────────────────────────────────────────── */ .vsc-legal-sig { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--pg-line-2); font-size: 13px; line-height: 1.6; color: var(--pg-muted); } .vsc-legal-more { border-top: 1px solid var(--pg-line-2); padding: 34px 0 60px; } .vsc-legal-more .vsc-legal-shell { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; } .vsc-legal-more-ttl { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); } .vsc-legal-more ul { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; } .vsc-legal-more a { display: inline-flex; align-items: center; min-height: 40px; /* tap target */ padding: 8px 18px; border: 1px solid var(--pg-line); border-radius: 999px; /* full pill (§0.4) */ font-size: 13.5px; color: var(--pg-body); text-decoration: none; transition: color .16s ease, border-color .16s ease, background-color .16s ease; } .vsc-legal-more a:hover { color: #fff; border-color: rgba(14, 165, 233, .45); /* fallback */ border-color: color-mix(in srgb, var(--pg-cyan) 45%, transparent); background: rgba(14, 165, 233, .07); /* fallback */ background: color-mix(in srgb, var(--pg-cyan) 7%, transparent); } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ /* Tablet: the 240px rail stops earning its keep. */ @media (max-width: 1024px) { .vsc-legal-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 36px; padding-bottom: 64px; } .vsc-legal-toc { display: none; } .vsc-legal-toc-m { display: block; } .vsc-legal-doc { max-width: var(--pg-read); margin-inline: auto; } } /* Phone. Verified against a 390px viewport: no horizontal overflow. */ @media (max-width: 640px) { .vsc-legal-shell { padding-inline: 20px; } .vsc-legal-hero { padding: 44px 0 30px; } .vsc-legal-hero h1 { font-size: clamp(30px, 8.4vw, 38px); } .vsc-legal-meta { font-size: 13.5px; gap: 6px; } /* Drop the interpunct so date + summary stack cleanly instead of colliding. */ .vsc-legal-dot { display: none; } .vsc-legal-date { flex-basis: 100%; } .vsc-legal-sec { padding-bottom: 26px; margin-bottom: 26px; scroll-margin-top: 88px; } .vsc-legal-sec h2 { gap: 9px; font-size: 19px; } .vsc-legal-sec p, .vsc-legal-sec li { font-size: 16px; line-height: 1.72; } .vsc-legal-sec ul, .vsc-legal-sec ol { padding-left: 19px; } .vsc-legal-callout { padding: 18px 18px; border-radius: 12px; } .vsc-legal-callout p { font-size: 15px; } .vsc-legal-pending { padding: 32px 22px; } .vsc-legal-more { padding: 28px 0 48px; } .vsc-legal-more .vsc-legal-shell { gap: 12px 16px; } } /* ── A11Y ───────────────────────────────────────────────────────────────── */ .vsc-legal a:focus-visible, .vsc-legal summary:focus-visible { outline: 2px solid var(--pg-cyan); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .vsc-legal *, .vsc-legal *::before, .vsc-legal *::after { transition: none !important; animation: none !important; } } @media print { .vsc-legal { background: #fff; color: #111; } .vsc-legal-toc, .vsc-legal-toc-m, .vsc-legal-more { display: none; } .vsc-legal-doc { max-width: none; } .vsc-legal-hero h1, .vsc-legal-sec h2 { color: #000; } .vsc-legal-sec p, .vsc-legal-sec li { color: #222; } } /* ========================================================================== END .vsc-legal ── APPEND .vsc-about AND .vsc-contact BLOCKS BELOW THIS LINE ── ========================================================================== */