/* Nocturne tokens, trimmed to what this page uses — source of truth is the
Claude Design handoff bundle (WebSlicer Landing.dc.html + its nocturne
design-system styles.css). Retune here if the design system re-exports.
The Inter font itself is loaded via in (preconnect + direct
stylesheet), not @import here — @import serializes behind this file
finishing download first, while a lets the browser start
both fetches in parallel. See index.html/pricing.html/terms.html/
privacy.html's . */
:root {
--color-bg: #161826;
--color-surface: #232532;
--color-text: #e9e9ed;
--color-accent: #9184d9;
--color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
--color-neutral-300: #cfd3e5;
--color-neutral-400: #b2b6ca;
--color-neutral-700: #595d6c;
--color-neutral-800: #3f424d;
--color-neutral-900: #292b31;
--color-accent-100: #f5f4ff;
--color-accent-300: #d2cefd;
--color-accent-800: #423a6a;
--color-accent-900: #2b2741;
--font-heading: "Inter", system-ui, sans-serif;
--font-heading-weight: 500;
--font-body: "Inter", system-ui, sans-serif;
--space-2: 5.6px;
--space-3: 8.4px;
--radius-md: 8px;
--shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgba(0, 0, 0, 0.55);
}
* { box-sizing: border-box; }
/* Reserve the vertical scrollbar's width up front, always — without this,
the page loads short (no scrollbar), feed-ticker.js's async fetch then
adds enough live-feed/outlook rows to cross the scroll threshold, and the
scrollbar's sudden appearance steals ~15-17px from the viewport AFTER
the centered .shell card already computed its width/position against the
wider pre-scrollbar viewport — visually truncating its right edge until
something (a manual window resize) forces a full relayout. Reserving the
gutter unconditionally means the available width is constant from first
paint, so there's nothing to correct later. */
html {
scrollbar-gutter: stable;
}
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* — buttons — */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; text-decoration: none;
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 14px; line-height: 1.2; color: var(--color-text);
background: transparent; border: 1px solid transparent;
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: var(--radius-md);
}
.btn:hover { text-decoration: none; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: 2.8px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
/* — tags — */
.tag {
display: inline-flex; align-items: center; font-size: 11px;
letter-spacing: 0.02em; padding: 3px 10px; border-radius: 6px;
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* — nav — */
.nav {
position: sticky; top: 0; z-index: 10;
display: flex; align-items: center; justify-content: space-between;
padding: 18px clamp(20px, 5vw, 56px); gap: 16px; flex-wrap: wrap;
background: var(--color-bg);
border-bottom: 1px solid var(--color-neutral-700);
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo-box {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border: 1.5px solid var(--color-accent); border-radius: 6px;
font-family: var(--font-heading); font-weight: 700; font-size: 17px;
color: var(--color-accent); line-height: 1;
}
.wordmark {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 15px; letter-spacing: 0.01em; color: var(--color-neutral-300);
}
/* — the shell card wrapping hero / preview / features — */
.shell {
max-width: 1200px; margin: 12px auto 40px; overflow: hidden;
background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.hero {
padding: 56px clamp(20px, 5vw, 56px) 48px;
border-bottom: 1px solid var(--color-neutral-700);
}
.hero .tag { margin-bottom: 20px; }
.hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; max-width: 900px; }
.hero .lede {
font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 80%, transparent);
max-width: 620px; margin: 22px 0 0;
}
.cta-row { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
/* — live feed / outlook preview split — */
.split {
display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
border-bottom: 1px solid var(--color-neutral-700);
}
.feed-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px; border-bottom: 1px solid var(--color-neutral-700);
}
.feed-head span:first-child {
font-family: var(--font-heading); font-size: 13px; font-weight: var(--font-heading-weight);
color: var(--color-neutral-300);
}
.live-badge {
display: flex; align-items: center; gap: 6px; font-size: 10.5px;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-300);
}
.live-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
animation: ws-pulse 1.8s infinite;
}
@keyframes ws-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
70% { box-shadow: 0 0 0 6px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.feed-list { display: flex; flex-direction: column; }
.feed-item {
display: flex; gap: 10px; align-items: baseline; padding: 12px 24px;
border-bottom: 1px solid var(--color-neutral-800);
opacity: 0; transition: opacity 0.5s ease;
}
.feed-item.in { opacity: 1; }
.feed-item .tag { flex-shrink: 0; font-size: 10px; padding: 2px 6px; }
.feed-item p {
font-size: 12.5px; color: var(--color-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-item strong { font-weight: 500; }
.outlook-panel {
background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent-900) 55%, transparent), var(--color-neutral-900) 65%);
border-left: 1px solid var(--color-neutral-700);
padding: 24px 28px;
}
.outlook-panel .label {
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--color-accent-300); margin: 0 0 14px;
}
.outlook-rows { display: flex; flex-direction: column; gap: 13px; }
.outlook-rows.track { gap: 9px; }
.outlook-row { display: flex; justify-content: space-between; align-items: baseline; }
.outlook-row .metric { font-size: 13.5px; color: var(--color-text); }
.outlook-row .range { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.outlook-row .up { color: #4fd18b; }
.outlook-row .down { color: #f43f5e; }
.track .metric { font-size: 13px; }
.track .metric .muted { color: var(--color-neutral-400); }
.track .range { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.status-pill { border-radius: 5px; padding: 1px 6px; font-size: 10.5px; }
.status-pill.hit { background: color-mix(in srgb, #4fd18b 25%, transparent); color: #4fd18b; }
.status-pill.partial { background: color-mix(in srgb, #d9a406 25%, transparent); color: #d9a406; }
.status-pill.miss { background: color-mix(in srgb, #f43f5e 25%, transparent); color: #f43f5e; }
.panel-divider { height: 1px; background: var(--color-neutral-700); margin: 18px 0; }
/* — features — */
.features { padding: 48px clamp(20px, 5vw, 56px) 56px; }
.eyebrow {
display: block; font-size: 13px; line-height: 1; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-accent); margin-bottom: 32px;
}
.feature-row {
display: grid; grid-template-columns: minmax(56px, 120px) minmax(0, 320px) minmax(0, 1fr);
gap: 24px clamp(24px, 4vw, 56px); align-items: baseline; padding: 24px 0;
}
.feature-icon { position: relative; width: 36px; height: 36px; }
.feature-icon .badge {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border: 1.5px solid var(--color-accent); border-radius: 10px;
color: var(--color-accent); font-size: 18px;
}
.feature-icon .num {
position: absolute; top: -8px; right: -8px;
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: var(--color-bg); border: 1px solid var(--color-neutral-700);
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 10px; color: var(--color-accent);
}
.feature-row h2 { font-size: 22px; letter-spacing: -0.01em; }
.feature-row p {
font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent);
max-width: 52ch;
}
.feature-divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--color-neutral-700) 32px, var(--color-neutral-700) calc(100% - 32px), transparent);
}
/* — closing — */
.closing {
max-width: 720px; margin: 0 auto; padding: 64px clamp(20px, 5vw, 72px);
text-align: center;
}
.closing h3 { font-size: 26px; }
.closing p {
font-size: 15.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent);
margin: 10px 0 28px;
}
footer {
max-width: 1200px; margin: 0 auto; padding: 24px clamp(20px, 5vw, 72px) 40px;
font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 55%, transparent);
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
footer .legal-links { display: flex; gap: 16px; }
/* — pricing page (currently unlinked from nav — see www/pricing.html) — */
.pricing-hero { padding: 48px clamp(20px, 5vw, 56px) 8px; text-align: center; }
.pricing-hero h1 { font-size: clamp(30px, 4vw, 42px); }
.pricing-hero p { max-width: 620px; margin: 14px auto 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.provisional-note {
max-width: 620px; margin: 18px auto 0; padding: 10px 16px; border-radius: var(--radius-md);
border: 1px solid var(--color-neutral-700); background: var(--color-neutral-900);
font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.pricing-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px; padding: 32px clamp(20px, 5vw, 56px) 56px; max-width: 1200px; margin: 0 auto;
}
.price-card {
background: var(--color-surface); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
padding: 22px 20px; display: flex; flex-direction: column; gap: 12px;
}
.price-card.featured { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.price-card h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-accent-300); }
.price-card .price { font-size: 28px; font-family: var(--font-heading); }
.price-card .price .unit { font-size: 13px; color: var(--color-neutral-400); font-weight: 400; }
.price-card .price.tbd { color: var(--color-neutral-400); font-size: 20px; }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.price-card ul li::before { content: "✓ "; color: var(--color-accent); }
@media (max-width: 860px) {
.split { grid-template-columns: 1fr; }
.outlook-panel { border-left: none; border-top: 1px solid var(--color-neutral-700); }
}
@media (max-width: 560px) {
.feature-row { grid-template-columns: 40px 1fr; }
.feature-row h2 { grid-column: 2; }
.feature-row p { grid-column: 1 / -1; }
}
/* — track record page (www/track-record.html) — */
.tr-hero { padding: 48px clamp(20px, 5vw, 56px) 8px; border-bottom: 1px solid var(--color-neutral-700); }
.tr-hero .tag { margin-bottom: 18px; }
.tr-hero h1 { font-size: clamp(30px, 4vw, 42px); max-width: 720px; }
.tr-hero .lede {
font-size: 15.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 80%, transparent);
max-width: 640px; margin: 16px 0 32px;
}
.tr-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--color-neutral-700);
}
.stat-tile {
background: var(--color-surface); padding: 22px clamp(16px, 3vw, 28px);
display: flex; flex-direction: column; gap: 4px;
}
.stat-label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-300); }
.stat-value { font-family: var(--font-heading); font-weight: 600; font-size: clamp(24px, 3vw, 32px); }
.stat-sub { font-size: 12px; color: var(--color-neutral-400); }
.tr-stats-note {
padding: 12px clamp(20px, 5vw, 56px) 0; font-size: 12.5px;
color: color-mix(in srgb, var(--color-text) 65%, transparent); border-bottom: 1px solid var(--color-neutral-700);
}
.tr-stats-note:last-of-type { padding-bottom: 20px; }
.tr-section { padding: 36px clamp(20px, 5vw, 56px); border-bottom: 1px solid var(--color-neutral-700); max-width: 860px; }
.tr-section:last-child { border-bottom: none; }
.tr-section h2 { font-size: 20px; margin-bottom: 14px; }
.tr-section p { font-size: 14.5px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.tr-section p + p { margin-top: 12px; }
.tr-muted { font-size: 12.5px; color: var(--color-neutral-400); }
.tr-def-list { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-def-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.tr-def-list .status-pill { flex-shrink: 0; min-width: 62px; text-align: center; }
.tr-bymetric { max-width: 100%; }
.tr-legend { display: flex; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.tr-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-neutral-300); }
.tr-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.tr-swatch.hit { background: #4fd18b; }
.tr-swatch.partial { background: #d9a406; }
.tr-swatch.miss { background: #f43f5e; }
.tr-metric-table { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.tr-metric-row {
display: grid; grid-template-columns: 140px 1fr; gap: 4px 16px; align-items: center;
}
.tr-metric-label { font-size: 14px; font-weight: 500; color: var(--color-text); }
.tr-metric-n { grid-column: 2; font-size: 11.5px; color: var(--color-neutral-400); justify-self: end; }
.tr-bar-track {
grid-column: 1 / -1; display: flex; gap: 2px; height: 16px;
border-radius: 4px; overflow: hidden; background: var(--color-neutral-800);
}
.tr-bar-seg { height: 100%; }
.tr-bar-seg.hit { background: #4fd18b; }
.tr-bar-seg.partial { background: #d9a406; }
.tr-bar-seg.miss { background: #f43f5e; }
.tr-metric-rates { grid-column: 1 / -1; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.tr-live-card {
background: var(--color-surface); border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
padding: 18px 20px; max-width: 500px;
}
.tr-live-count { font-size: 15px; font-weight: 500; }
.tr-live-breakdown { font-size: 13px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin-top: 6px; }
.tr-live-card .tr-muted { margin-top: 10px; }
.tr-limits { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
@media (max-width: 760px) {
.tr-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.tr-stats { grid-template-columns: 1fr; }
.tr-metric-row { grid-template-columns: 1fr; }
.tr-metric-n { justify-self: start; }
}