/* ============================================================ * status.css — standalone status page styling. * Theme tokens, fonts, Tailwind, and base utilities (.mono, .hairline, * .card-elevated, .stat-card, .gradient-text, .pulse-dot, .capability-badge, * .badge-*) come from status.html's (copied from the docs layout). * This file is the status-specific layer. * ============================================================ */ /* ── fonts (self-hosted, mirrors the docs) ────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); } /* ── theme tokens (mirror the docs layout) ────────────────── */ html.dark { --bg: hsl(222 16% 12%); --bg-elev: hsl(222 16% 13%); --bg-card: hsl(222 14% 15%); --bg-card-2: hsl(222 14% 16%); --border: hsl(220 13% 20%); --border-strong: hsl(220 14% 26%); --text: hsl(210 20% 96%); --text-muted: hsl(218 13% 68%); --text-faint: hsl(218 13% 50%); --accent: hsl(217 91% 60%); --teal: hsl(160 84% 39%); --grad-1: hsl(160 84% 39%); --grad-2: hsl(172 66% 50%); --grad-3: hsl(190 84% 45%); --amber: hsl(38 92% 50%); --red: hsl(0 84% 62%); --purple: #a78bfa; --pink: #f472b6; --header-bg: hsl(222 16% 12% / 0.78); --row-hover: hsl(222 14% 17% / 0.5); --btn-ghost-hover: rgba(255,255,255,0.04); --neutral-chip-bg: rgba(255,255,255,0.02); --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.25), 0 4px 16px 0 rgb(0 0 0 / 0.12); --shadow-stat: 0 1px 2px 0 rgb(0 0 0 / 0.2); --shadow-stat-hover: 0 4px 16px 0 rgb(0 0 0 / 0.18); color-scheme: dark; } html.light { --bg: hsl(0 0% 100%); --bg-elev: hsl(0 0% 98%); --bg-card: hsl(0 0% 100%); --bg-card-2: hsl(210 40% 96.1%); --border: hsl(214.3 31.8% 91.4%); --border-strong: hsl(214.3 25% 82%); --text: hsl(222.2 84% 4.9%); --text-muted: hsl(215.4 16.3% 38%); --text-faint: hsl(215.4 13% 55%); --accent: hsl(217 91% 50%); --teal: hsl(160 84% 32%); --grad-1: hsl(160 84% 32%); --grad-2: hsl(172 66% 38%); --grad-3: hsl(190 84% 36%); --amber: hsl(38 92% 42%); --red: hsl(0 84% 50%); --purple: #7c3aed; --pink: #db2777; --header-bg: hsl(0 0% 100% / 0.82); --row-hover: hsl(210 40% 96.1% / 0.7); --btn-ghost-hover: hsl(214 32% 91% / 0.5); --neutral-chip-bg: hsl(210 40% 96.1%); --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 4px 16px 0 rgb(15 23 42 / 0.06); --shadow-stat: 0 1px 2px 0 rgb(15 23 42 / 0.04); --shadow-stat-hover: 0 4px 16px 0 rgb(15 23 42 / 0.08); color-scheme: light; } * { -webkit-font-smoothing: antialiased; } html, body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01'; margin: 0; } @media (hover: none) and (pointer: coarse) { input, textarea, select { font-size: 16px !important; } } code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .tabular-nums { font-variant-numeric: tabular-nums; } .min-w-0 { min-width: 0; } /* ── base utilities (mirror the docs layout) ──────────────── */ .gradient-text { background: linear-gradient(135deg, var(--grad-1), var(--grad-2), var(--grad-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; padding-bottom: 0.12em; } .hairline { border-color: var(--border); } .hairline-strong { border-color: var(--border-strong); } .pulse-dot { animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hero-color, var(--teal)) 60%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } .card-elevated { box-shadow: 0 0 0 1px var(--border), var(--shadow-card); background: var(--bg-card); } .stat-card { background: linear-gradient(135deg, var(--bg-card-2), var(--bg-card)); border: 1px solid var(--border); box-shadow: var(--shadow-stat); } .capability-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; border: 1px solid var(--border-strong); background: var(--neutral-chip-bg); } .badge-tools { color: var(--accent); border-color: hsl(217 91% 60% / 0.3); background: hsl(217 91% 60% / 0.06); } .badge-vision { color: var(--pink); border-color: rgba(244,114,182,0.3); background: rgba(244,114,182,0.06); } .badge-reason { color: var(--purple); border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.06); } .badge-embed { color: var(--grad-3); border-color: hsl(190 84% 45% / 0.3); background: hsl(190 84% 45% / 0.06); } /* ── minimal utilities (replaces the Tailwind CDN — render-blocking JIT isn't worth it on a page people load during an outage) ──────── */ .min-h-screen { min-height: 100vh; } .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .text-center { text-align: center; } .font-medium { font-weight: 500; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .gap-3 { gap: 0.75rem; } .gap-1\.5 { gap: 0.375rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .mt-1 { margin-top: 0.25rem; } .rounded-md { border-radius: 0.375rem; } .max-w-xs { max-width: 20rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── layout shell ─────────────────────────────────────────── */ .status-wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem; } .status-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--header-bg); backdrop-filter: blur(16px); } .status-header-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .status-header-brand span { color: var(--text-faint); font-size: 0.95rem; font-weight: 500; } .status-header-brand .wm { height: 22px; width: auto; } html.dark .wm-on-light { display: none; } html.light .wm-on-dark { display: none; } .status-header-actions { display: flex; align-items: center; gap: 0.5rem; } .ghost-btn { padding: 0.4rem 0.8rem; border-radius: 0.5rem; font-size: 0.82rem; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px solid var(--border); cursor: pointer; text-decoration: none; } .ghost-btn:hover { background: var(--btn-ghost-hover); color: var(--text); } .icon-btn { display: inline-flex; padding: 0.4rem; border-radius: 0.5rem; color: var(--text-muted); background: transparent; border: 1px solid var(--border); cursor: pointer; } .icon-btn:hover { background: var(--btn-ghost-hover); color: var(--text); } html.light .icon-btn .i-moon { display: none; } html.dark .icon-btn .i-sun { display: none; } .section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 2rem 0 0.75rem; } /* ── hero verdict ─────────────────────────────────────────── */ .hero { display: flex; align-items: center; gap: 0.9rem; padding: 2.25rem 0 1.5rem; } .hero-dot { width: 0.85rem; height: 0.85rem; border-radius: 9999px; flex-shrink: 0; background: var(--hero-color, var(--teal)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hero-color, var(--teal)) 20%, transparent); } .hero[data-state="loading"] .hero-dot, .hero[data-state="operational"] .hero-dot { animation: pulse 2s infinite; } .hero-verdict { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; } .hero-sub { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-faint); } /* ── board ────────────────────────────────────────────────── */ .status-board { overflow: hidden; border-radius: 0.85rem; } .status-row-grid { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(0,1.5fr) 52px 52px 56px 78px max-content 18px; align-items: center; gap: 0.75rem; } .status-group + .status-group { border-top: 1px solid var(--border); } .status-group-head { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.7rem 1.125rem; background: transparent; border: 0; cursor: pointer; text-align: left; } .status-group-head:hover { background: var(--row-hover); } .status-group-head .chev { transition: transform 0.2s ease; color: var(--text-faint); flex-shrink: 0; } .status-group-head[aria-expanded="false"] .chev { transform: rotate(-90deg); } .status-group-head[aria-expanded="false"] + .status-group-body { display: none; } .group-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .group-count { margin-left: auto; font-size: 0.72rem; color: var(--text-faint); } .status-row { padding: 0.8rem 1.125rem; cursor: pointer; } .status-row + .status-row { border-top: 1px solid var(--border); } .status-row:hover { background: var(--row-hover); } .status-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .status-row-name { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .status-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; } .status-row-title { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-row-slug { display: block; font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-row-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; } .metric { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; } .metric-k { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .metric-v { font-size: 0.82rem; } .col-90d .metric-v { font-size: 0.92rem; font-weight: 600; } .col-chev .chev { transition: transform 0.2s ease; color: var(--text-faint); } .status-row[aria-expanded="true"] .col-chev .chev { transform: rotate(180deg); } .uptime-bar { display: flex; gap: 2px; margin-top: 0.7rem; height: 30px; align-items: stretch; } .uptime-seg { flex: 1 1 0; min-width: 0; border-radius: 2px; opacity: 0.9; transition: opacity 0.12s ease; } .uptime-seg:hover { opacity: 1; outline: 1px solid var(--text-faint); } .status-row-axis { display: flex; justify-content: space-between; margin-top: 0.45rem; font-size: 0.7rem; color: var(--text-faint); } .status-row-axis :nth-child(2) { color: var(--text-muted); font-weight: 500; } .status-maint-msg { margin-top: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 0.5rem; font-size: 0.8rem; color: var(--text-muted); background: color-mix(in srgb, var(--purple) 10%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); } .board-meta-line { margin-top: 0.5rem; font-size: 0.72rem; color: var(--text-faint); } #activeBanner { margin-top: 0.6rem; } /* ── status pill ──────────────────────────────────────────── */ .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 9999px; border: 1px solid currentColor; font-size: 0.72rem; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, currentColor 9%, transparent); } .status-pill-dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; } /* ── expand detail ────────────────────────────────────────── */ .status-detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; } .status-detail-wrap.open { grid-template-rows: 1fr; } .status-detail-wrap > div { overflow: hidden; } .status-detail { padding: 0.5rem 1.125rem 1.1rem; background: var(--bg-card-2); border-top: 1px solid var(--border); } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.6rem 0 0.4rem; } .stat-grid .stat-card { border-radius: 0.6rem; padding: 0.7rem 0.8rem; } .stat-val { font-size: 0.95rem; font-weight: 500; color: var(--text); } .stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-top: 0.2rem; } .detail-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-top: 0.8rem; font-size: 0.8rem; color: var(--text-muted); } .meta-k { color: var(--text-faint); } .detail-desc { margin-top: 0.6rem; font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; } .detail-usewhen { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-faint); } .detail-subhead { margin-top: 1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); } .legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: 0.72rem; color: var(--text-muted); } .legend i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; } .downtime-list { margin-top: 0.5rem; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--text-muted); } .downtime-list i { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; margin-right: 0.45rem; vertical-align: middle; } .detail-empty { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-faint); } /* ── incident feed ────────────────────────────────────────── */ .incident { padding: 1rem 1.125rem; margin-bottom: 0.875rem; border-radius: 0.75rem; } .incident-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .incident-title { font-weight: 600; font-size: 0.95rem; color: var(--text); } .incident-type { font-size: 0.68rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; } .incident-type.is-maint { color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); } .incident-type.is-incident { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); } .incident-window { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); } .incident-affected { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .incident-affected-chip { font-size: 0.7rem; padding: 0.12rem 0.45rem; border-radius: 0.35rem; color: var(--text-muted); background: var(--neutral-chip-bg); border: 1px solid var(--border); } .incident-updates { margin-top: 0.75rem; padding-left: 0.85rem; border-left: 2px solid var(--border-strong); display: flex; flex-direction: column; gap: 0.7rem; } .incident-update-meta { display: flex; align-items: center; gap: 0.55rem; } .incident-update-meta time { font-size: 0.7rem; color: var(--text-faint); } .incident-update-body { font-size: 0.83rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.5; } .incident-status-pill { font-size: 0.66rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 9999px; border: 1px solid currentColor; text-transform: capitalize; background: color-mix(in srgb, currentColor 9%, transparent); } .active-incident-wrap { border-radius: 0.85rem; padding: 0.25rem; margin-bottom: 0.875rem; border: 1px solid color-mix(in srgb, var(--banner-color) 45%, transparent); background: color-mix(in srgb, var(--banner-color) 7%, transparent); } .active-incident-wrap .incident { margin-bottom: 0; } /* ── subscribe ────────────────────────────────────────────── */ .subscribe { padding: 1.25rem; border-radius: 0.85rem; margin: 0.5rem 0 1rem; } .subscribe-title { font-weight: 600; font-size: 0.95rem; color: var(--text); display: inline-flex; align-items: center; gap: 0.4rem; } .subscribe-title .rss-glyph { color: var(--amber); } .subscribe-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; } .subscribe-feed { display: flex; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; } .subscribe-feed-url { flex: 1 1 240px; padding: 0.5rem 0.7rem; border-radius: 0.5rem; font-size: 0.8rem; font-family: var(--font-mono, ui-monospace, monospace); background: var(--bg); border: 1px solid var(--border-strong); color: var(--text-muted); } .subscribe-feed-url:focus { outline: none; border-color: var(--accent); } .subscribe-feed .ghost-btn { white-space: nowrap; } .subscribe-hints { margin-top: 0.7rem; font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; } .subscribe-hints code { font-size: 0.74rem; padding: 0.05rem 0.3rem; border-radius: 0.3rem; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); } .subscribe-fine { margin-top: 0.6rem; font-size: 0.72rem; color: var(--text-faint); } /* ── footer ───────────────────────────────────────────────── */ .status-footer { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: space-between; padding: 2rem 0 3rem; margin-top: 2rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-faint); } .status-footer a { color: var(--text-muted); text-decoration: none; } .status-footer a:hover { color: var(--text); } /* ── responsive ───────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .status-row-grid { grid-template-columns: minmax(0,2.2fr) minmax(0,1.4fr) 56px 60px max-content 18px; } .col-24h, .col-lat { display: none; } } @media (max-width: 767px) { .status-row-grid { grid-template-columns: 1fr max-content 18px; grid-template-areas: "name status chev" "badges badges badges"; row-gap: 0.45rem; } .status-row-name { grid-area: name; } .status-row-badges { grid-area: badges; } .col-status { grid-area: status; } .col-chev { grid-area: chev; } /* Keep the 90d uptime number visible on mobile (next to status); hide the rest. */ .col-90d { grid-area: m90; display: flex; flex-direction: row; align-items: baseline; gap: 0.3rem; } .col-90d .metric-k { font-size: 0.6rem; } .status-row-grid { grid-template-areas: "name m90 status chev" "badges badges badges badges"; grid-template-columns: 1fr max-content max-content 18px; } .col-24h, .col-7d, .col-lat { display: none; } .stat-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .chev, .status-detail-wrap, .uptime-seg { transition: none; } .pulse-dot, .hero-dot, .hero[data-state] .hero-dot { animation: none !important; } } /* Relative time appended to a scheduled-maintenance window line. */ .incident-window-rel { color: var(--text-faint); font-weight: 400; }