/* ============================================================= FULLNESS — STATUS · BUREAU AESTHETIC These tokens are mirrored from `apps/marketing/src/styles/v3.css` (the canonical source is `packages/ui/src/tokens/v3.ts`). Keep the values below in lock-step with the marketing v3 tokens so the status page reads as a folio of the same publication. Both light and dark modes are supported. The mode resolves in this order: 1. Explicit `data-theme` attribute on (set by the theme toggle, persisted in localStorage). 2. `prefers-color-scheme` media query. 3. Falls back to dark — the bureau's native home. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── Dark (default) tokens ── */ :root { --v3-ink: 40 20% 92%; --v3-ink-2: 40 14% 78%; --v3-ink-3: 40 10% 55%; --v3-ink-4: 220 10% 32%; --v3-paper: 220 40% 4%; --v3-paper-2: 220 36% 6%; --v3-paper-3: 220 30% 9%; --v3-seal: 38 55% 55%; --v3-seal-deep: 28 52% 42%; --v3-signed: 152 36% 56%; /* Status-specific accents (derived; not in the marketing tokens) */ --v3-warn: 38 80% 60%; --v3-danger: 0 70% 60%; --v3-serif: 'Fraunces', 'Times New Roman', Georgia, serif; --v3-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --v3-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Light tokens (system preference) ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --v3-ink: 220 32% 10%; --v3-ink-2: 220 22% 22%; --v3-ink-3: 220 14% 38%; --v3-ink-4: 220 10% 55%; --v3-paper: 40 28% 96%; --v3-paper-2: 40 24% 92%; --v3-paper-3: 40 20% 87%; --v3-seal: 32 72% 32%; --v3-seal-deep: 22 62% 28%; --v3-signed: 152 44% 30%; --v3-warn: 28 72% 38%; --v3-danger: 0 62% 38%; } } /* ── Light tokens (explicit toggle) ── */ :root[data-theme="light"] { --v3-ink: 220 32% 10%; --v3-ink-2: 220 22% 22%; --v3-ink-3: 220 14% 38%; --v3-ink-4: 220 10% 55%; --v3-paper: 40 28% 96%; --v3-paper-2: 40 24% 92%; --v3-paper-3: 40 20% 87%; --v3-seal: 32 72% 32%; --v3-seal-deep: 22 62% 28%; --v3-signed: 152 44% 30%; --v3-warn: 28 72% 38%; --v3-danger: 0 62% 38%; } /* ── Reset & root ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: hsl(var(--v3-paper)); color: hsl(var(--v3-ink)); font-family: var(--v3-sans); letter-spacing: -0.004em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } body { background-image: radial-gradient(1200px 600px at 5% -10%, hsl(38 40% 10% / 0.22), transparent 60%), radial-gradient(900px 700px at 100% 100%, hsl(220 44% 10% / 0.55), transparent 55%), repeating-linear-gradient(0deg, transparent 0 2px, hsl(40 20% 92% / 0.006) 2px 3px); } :root[data-theme="light"] body { background-image: radial-gradient(900px 600px at 5% -10%, hsl(40 36% 90% / 0.6), transparent 60%), radial-gradient(900px 700px at 100% 100%, hsl(220 24% 86% / 0.4), transparent 55%); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body { background-image: radial-gradient(900px 600px at 5% -10%, hsl(40 36% 90% / 0.6), transparent 60%), radial-gradient(900px 700px at 100% 100%, hsl(220 24% 86% / 0.4), transparent 55%); } } a { color: hsl(var(--v3-ink)); text-decoration: none; } ::selection { background: hsl(var(--v3-seal) / 0.35); color: hsl(var(--v3-ink)); } /* ── Layout primitives ────────────────────────────────────── */ .container { max-width: 1180px; margin: 0 auto; padding: 0 1.75rem; } @media (max-width: 640px) { .container { padding: 0 1.25rem; } } /* ── Top "issued by" meta line ────────────────────────────── */ .meta-line { border-bottom: 1px solid hsl(var(--v3-ink) / 0.10); padding: 0.45rem 0; font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .meta-line__inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .meta-line__inner > span:nth-child(2) { color: hsl(var(--v3-ink-2)); } /* ── Masthead ─────────────────────────────────────────────── */ .masthead { background: hsl(var(--v3-paper) / 0.92); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid hsl(var(--v3-ink) / 0.20); position: sticky; top: 0; z-index: 50; } .masthead__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1rem 0 0.875rem; } .wordmark { font-family: var(--v3-serif); font-weight: 500; font-size: clamp(1.5rem, 2.5vw, 1.875rem); letter-spacing: 0.005em; color: hsl(var(--v3-ink)); white-space: nowrap; } .wordmark em { font-style: italic; font-weight: 300; color: hsl(var(--v3-ink-3)); margin-left: 0.375rem; font-size: 0.7em; letter-spacing: 0.04em; } .masthead__nav { display: flex; gap: 1.5rem; align-items: baseline; } .masthead__link { font-family: var(--v3-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); transition: color 0.15s ease; } .masthead__link:hover { color: hsl(var(--v3-ink)); } .theme-toggle { font-family: var(--v3-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); background: transparent; border: 1px solid hsl(var(--v3-ink) / 0.18); padding: 0.4rem 0.75rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: hsl(var(--v3-ink) / 0.45); color: hsl(var(--v3-ink)); } /* ── Section primitives ───────────────────────────────────── */ .section { padding: 4.5rem 0; position: relative; } .section--tight { padding: 2rem 0; } @media (max-width: 640px) { .section { padding: 3rem 0; } } /* ── Folio header ─────────────────────────────────────────── */ .folio { font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--v3-ink-4)); margin-bottom: 1.25rem; } .eyebrow { font-family: var(--v3-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); margin-bottom: 0.75rem; } .display { font-family: var(--v3-serif); font-weight: 400; line-height: 0.96; letter-spacing: -0.022em; font-variation-settings: 'opsz' 144; color: hsl(var(--v3-ink)); font-size: clamp(2.75rem, 6vw, 4.5rem); margin: 0 0 1.5rem; } .lead { font-family: var(--v3-serif); font-style: italic; font-weight: 300; font-size: clamp(1.125rem, 1.8vw, 1.4375rem); line-height: 1.42; color: hsl(var(--v3-ink-2)); letter-spacing: -0.005em; max-width: 56ch; margin: 0 0 1.25rem; } .byline { font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .byline__dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-right: 0.5rem; vertical-align: middle; background: hsl(var(--v3-ink-3)); } /* Pulse the dot when overall = operational */ [data-overall-status="operational"] .byline__dot { background: hsl(var(--v3-signed)); box-shadow: 0 0 0 0 hsl(var(--v3-signed) / 0.5); animation: pulse-signed 2.4s ease-in-out infinite; } [data-overall-status="degraded"] .byline__dot { background: hsl(var(--v3-warn)); } [data-overall-status="outage"] .byline__dot { background: hsl(var(--v3-danger)); box-shadow: 0 0 0 0 hsl(var(--v3-danger) / 0.5); animation: pulse-danger 1.4s ease-in-out infinite; } @keyframes pulse-signed { 0% { box-shadow: 0 0 0 0 hsl(var(--v3-signed) / 0.45); } 70% { box-shadow: 0 0 0 8px hsl(var(--v3-signed) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--v3-signed) / 0); } } @keyframes pulse-danger { 0% { box-shadow: 0 0 0 0 hsl(var(--v3-danger) / 0.6); } 70% { box-shadow: 0 0 0 10px hsl(var(--v3-danger) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--v3-danger) / 0); } } /* ── Rules ────────────────────────────────────────────────── */ .rule-thin { height: 1px; background: hsl(var(--v3-ink) / 0.16); border: 0; margin: 0; } .rule-double { border-top: 1px solid hsl(var(--v3-ink) / 0.40); border-bottom: 1px solid hsl(var(--v3-ink) / 0.40); height: 5px; background: transparent; margin: 0; } /* ── Section head (eyebrow + roman + title row) ──────────── */ .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1.5rem; margin-bottom: 2rem; } .section-head__eyebrow { font-family: var(--v3-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .section-head__roman { font-family: var(--v3-serif); font-style: italic; font-weight: 300; color: hsl(var(--v3-ink-3)); font-size: 1.5rem; } /* ── Ledger table ─────────────────────────────────────────── */ .ledger { border: 1px solid hsl(var(--v3-ink) / 0.18); background: hsl(var(--v3-paper-2)); } .ledger__head, .ledger__row { display: grid; grid-template-columns: minmax(60px, 90px) /* period */ minmax(0, 2.5fr) /* service name */ minmax(0, 1.5fr) /* team */ minmax(110px, 1fr) /* avail 30d */ minmax(110px, 1fr) /* avail 7d */ minmax(110px, 1fr) /* target */ minmax(140px, 1fr); /* status */ align-items: center; gap: 1rem; padding: 0.875rem 1.25rem; } .ledger__head { background: hsl(var(--v3-paper-3)); border-bottom: 1px solid hsl(var(--v3-ink) / 0.18); font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .ledger__row { border-bottom: 1px solid hsl(var(--v3-ink) / 0.08); font-family: var(--v3-sans); font-size: 0.9375rem; color: hsl(var(--v3-ink-2)); position: relative; transition: background 0.15s ease; } .ledger__row:last-child { border-bottom: 0; } .ledger__row:hover { background: hsl(var(--v3-paper-3) / 0.55); } .ledger__period { font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .ledger__name { color: hsl(var(--v3-ink)); font-weight: 500; font-size: 1rem; } .ledger__team { font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .ledger__avail { font-family: var(--v3-mono); font-size: 0.875rem; font-feature-settings: 'tnum' on; color: hsl(var(--v3-ink)); } .ledger__avail--null { color: hsl(var(--v3-ink-4)); } .ledger__target { font-family: var(--v3-mono); font-size: 0.75rem; font-feature-settings: 'tnum' on; color: hsl(var(--v3-ink-3)); } .ledger__status { font-family: var(--v3-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .ledger__status::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: hsl(var(--v3-ink-4)); flex-shrink: 0; } .ledger__row[data-status="operational"] .ledger__status { color: hsl(var(--v3-signed)); } .ledger__row[data-status="operational"] .ledger__status::before { background: hsl(var(--v3-signed)); } .ledger__row[data-status="degraded"] .ledger__status { color: hsl(var(--v3-warn)); } .ledger__row[data-status="degraded"] .ledger__status::before { background: hsl(var(--v3-warn)); } .ledger__row[data-status="outage"] .ledger__status { color: hsl(var(--v3-danger)); } .ledger__row[data-status="outage"] .ledger__status::before { background: hsl(var(--v3-danger)); } .ledger__row[data-status="unknown"] .ledger__status { color: hsl(var(--v3-ink-4)); } .ledger__row[data-criticality="critical"] .ledger__name::after { content: "·"; margin-left: 0.5rem; color: hsl(var(--v3-seal)); } /* The mobile fall-back row (showing 30d / 7d / target inline) is hidden on wide viewports — the dedicated table columns carry that information. */ .ledger__avail-wrap { display: none; } /* ── Skeleton (loading placeholder) ──────────────────────── */ .ledger__row--skeleton { background: linear-gradient( 100deg, hsl(var(--v3-paper-3) / 0.5) 30%, hsl(var(--v3-paper) / 0.7) 50%, hsl(var(--v3-paper-3) / 0.5) 70% ); background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite; color: transparent; } .ledger__row--skeleton * { color: transparent !important; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Mobile / narrow ledger (cards instead of table) ──────── */ @media (max-width: 880px) { .ledger__head { display: none; } .ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "team team" "avail avail"; row-gap: 0.625rem; column-gap: 1rem; padding: 1rem 1.125rem; } .ledger__period { display: none; } .ledger__name { grid-area: name; } .ledger__team { grid-area: team; color: hsl(var(--v3-ink-3)); } .ledger__status { grid-area: status; justify-self: end; } .ledger__avail-wrap { grid-area: avail; display: flex; gap: 1.5rem; flex-wrap: wrap; border-top: 1px dashed hsl(var(--v3-ink) / 0.10); padding-top: 0.625rem; color: hsl(var(--v3-ink-3)); font-family: var(--v3-mono); font-size: 0.75rem; letter-spacing: 0.04em; } /* Hide the explicit 30d / 7d / target columns on narrow viewports — their values surface inline via .ledger__avail-wrap instead. */ .ledger__row > .ledger__avail, .ledger__row > .ledger__target { display: none; } .ledger__avail-wrap > span > strong { color: hsl(var(--v3-ink)); font-family: var(--v3-mono); font-weight: 500; margin-left: 0.4rem; } } /* ── Banner (error / stale state) ─────────────────────────── */ .banner { border: 1px solid hsl(var(--v3-warn) / 0.5); background: hsl(var(--v3-warn) / 0.06); color: hsl(var(--v3-ink)); padding: 0.875rem 1.25rem; font-family: var(--v3-mono); font-size: 0.75rem; letter-spacing: 0.04em; margin-bottom: 1.5rem; } /* ── Colophon (footer) ────────────────────────────────────── */ .colophon { border-top: 1px solid hsl(var(--v3-ink) / 0.16); padding: 2.5rem 0 4rem; font-family: var(--v3-mono); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: hsl(var(--v3-ink-3)); } .colophon__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .colophon a { color: hsl(var(--v3-ink-2)); } .colophon a:hover { color: hsl(var(--v3-ink)); }