:root { color-scheme: light; --ink: #172235; --muted: #667287; --line: #dfe6ef; --surface: #fff; --canvas: #f7f9fc; --accent: #2864dc; --good: #13845d; --good-soft: #e8f7f1; --danger: #c43d4f; --danger-soft: #fff0f2; --warning: #ad6d0a; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root.theme-blue { --accent: #2563eb; }:root.theme-green { --accent: #0f8a5f; }:root.theme-amber { --accent: #b45309; }:root.theme-violet { --accent: #6d4aff; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: linear-gradient(180deg, #fbfcfe 0, var(--canvas) 420px); color: var(--ink); } a { color: inherit; } :focus-visible { outline: 3px solid #77a8ff; outline-offset: 3px; }.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .7rem 1rem; border-radius: 8px; background: white; }.skip-link:focus { top: 1rem; }
.site-header { width: min(1080px, calc(100% - 2rem)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.site-identity { display: flex; align-items: center; gap: .7rem; text-decoration: none; }.status-logo { display: flex; align-items: flex-end; gap: 2px; width: 25px; height: 26px; }.status-logo i { display: block; width: 6px; border-radius: 3px; background: var(--accent); }.status-logo i:nth-child(1) { height: 10px; opacity: .55; }.status-logo i:nth-child(2) { height: 18px; opacity: .78; }.status-logo i:nth-child(3) { height: 25px; }.site-header nav { display: flex; gap: 1.5rem; }.site-header nav a { color: var(--muted); font-size: .82rem; text-decoration: none; }.site-header nav a:hover { color: var(--ink); }
main, footer { width: min(960px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }.eyebrow { margin: 0 0 .5rem; color: #748095; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }.hero { padding: clamp(3rem, 6vw, 4.75rem) 0 3rem; }.hero-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.hero h1 { margin: 0; max-width: 700px; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.042em; }.hero-heading p { margin: .75rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }.global-indicator { flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgba(23,34,53,.04); border-radius: 24px; background: #e9edf3; box-shadow: 0 12px 28px rgba(30,50,80,.08); }.global-indicator span { width: 22px; height: 22px; border: 6px solid #7c8795; border-radius: 50%; }.global-indicator.state-up { background: var(--good-soft); }.global-indicator.state-up span { border-color: var(--good); }.global-indicator.state-down { background: var(--danger-soft); }.global-indicator.state-down span { border-color: var(--danger); }.global-indicator.state-degraded, .global-indicator.state-maintenance { background: #fff5df; }.global-indicator.state-degraded span, .global-indicator.state-maintenance span { border-color: var(--warning); }.freshness { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--muted); font-size: .78rem; }.freshness-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(19,132,93,.1); }.freshness-dot.is-stale { background: var(--warning); box-shadow: 0 0 0 4px rgba(173,109,10,.1); }
.stale-warning { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #edcc8c; border-radius: 12px; background: #fff8e9; color: #68450c; }.stale-warning strong, .stale-warning span { display: block; }.stale-warning span { margin-top: .25rem; font-size: .84rem; line-height: 1.5; }.section-heading { margin-bottom: 1.3rem; }.section-heading h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.025em; }.section-heading-row { display: flex; align-items: end; justify-content: space-between; }.legend { color: var(--muted); font-size: .72rem; }.legend i { display: inline-block; width: 8px; height: 8px; margin-right: .35rem; border-radius: 2px; background: var(--good); }
.incidents, .components, .history { margin-bottom: 4.5rem; }.incident-card { overflow: hidden; margin-bottom: 1rem; border: 1px solid #f0c9ce; border-left: 4px solid var(--danger); border-radius: 14px; background: white; }.incident-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 1.3rem; }.incident-heading h3 { margin: .35rem 0 0; font-size: 1.05rem; }.incident-heading time { color: var(--muted); font-size: .75rem; }.incident-status { color: var(--danger); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.incident-timeline { padding: 0 1.3rem 1.2rem; }.timeline-item { display: grid; grid-template-columns: 12px 1fr; gap: .7rem; padding-top: .85rem; }.timeline-dot { width: 8px; height: 8px; margin-top: .38rem; border: 2px solid var(--danger); border-radius: 50%; }.timeline-item p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }.timeline-item .timeline-meta { margin-bottom: .25rem; color: var(--ink); font-size: .7rem; font-weight: 750; text-transform: capitalize; }
.component-groups { display: grid; gap: 1.1rem; }.component-group { overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 12px 34px rgba(30,50,80,.055); }.group-heading { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-radius: 16px 16px 0 0; background: #fbfcfe; border-bottom: 1px solid var(--line); }.group-heading h3 { margin: 0; font-size: .95rem; }.group-heading span { color: var(--muted); font-size: .7rem; }.component-row { padding: 1.15rem 1.25rem 1.05rem; border-top: 1px solid #edf1f5; }.component-row:last-child { border-radius: 0 0 16px 16px; }.group-heading + .component-row { border-top: 0; }.component-top, .component-lower { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.component-top { margin-bottom: .85rem; }.component-name strong { font-size: .92rem; }.component-metrics { display: flex; align-items: center; gap: 1rem; }.latency { color: var(--muted); font-size: .72rem; }.component-status { color: var(--good); font-size: .75rem; font-weight: 750; }.component-down .component-status { color: var(--danger); }.component-degraded .component-status, .component-pending-down .component-status, .component-maintenance .component-status { color: var(--warning); }.component-paused .component-status, .component-unknown .component-status { color: #707b8d; }.history-chart { min-width: 0; flex: 1; }.uptime-bars { position: relative; display: grid; grid-template-columns: repeat(var(--history-days), minmax(3px, 1fr)); gap: clamp(1px, .22vw, 3px); height: 24px; }.bar { position: relative; min-width: 1px; border-radius: 3px; background: var(--good); cursor: help; transition: transform 120ms ease, filter 120ms ease; }.bar:hover, .bar:focus-visible { z-index: 4; transform: translateY(-2px) scaleY(1.12); filter: saturate(1.15); }.bar::after { position: absolute; left: 50%; bottom: calc(100% + .6rem); z-index: 8; width: max-content; max-width: min(230px, 70vw); padding: .48rem .62rem; border-radius: 7px; background: #111d30; color: white; box-shadow: 0 8px 24px rgba(17,29,48,.22); content: attr(data-tooltip); font-size: .68rem; font-weight: 650; line-height: 1.35; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 120ms ease, transform 120ms ease; }.bar:first-child::after { left: 0; transform: translate(0, 4px); }.bar:last-child::after { right: 0; left: auto; transform: translate(0, 4px); }.bar:hover::after, .bar:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }.bar:first-child:hover::after, .bar:first-child:focus-visible::after, .bar:last-child:hover::after, .bar:last-child:focus-visible::after { transform: translate(0, 0); }.bar.component-down { background: var(--danger); }.bar.component-degraded, .bar.component-pending-down, .bar.component-maintenance { background: #dca642; }.bar.component-paused, .bar.component-unknown { background: #dce2e9; }.history-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: .38rem; color: #8a95a5; font-size: .61rem; }.history-range { min-width: 58px; padding: .32rem .48rem; border: 1px solid var(--line); border-radius: 999px; background: #fbfcfe; color: var(--muted); font-size: .68rem; font-weight: 750; text-align: center; }.history-empty { display: flex; flex: 1; align-items: center; gap: .55rem; min-height: 24px; color: var(--muted); font-size: .72rem; }.history-empty-dot { width: 8px; height: 8px; border: 2px solid #aeb7c4; border-radius: 50%; }.empty-group { padding: 2rem; text-align: center; }.empty-group h3 { margin: 0; }.empty-group p { color: var(--muted); }.loading-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: white; }.loading-card span { display: block; height: 12px; margin: .8rem 0; border-radius: 8px; background: #edf1f5; }.loading-card span:nth-child(2) { width: 72%; }.loading-card span:nth-child(3) { width: 88%; }
.history-list .incident-card { border-color: var(--line); border-left-color: var(--good); }.history-list .incident-status { color: var(--good); }.history-list .timeline-dot { border-color: var(--good); }.empty-copy { padding: 1.5rem; border: 1px dashed #ccd5e2; border-radius: 12px; color: var(--muted); text-align: center; }
footer { min-height: 90px; display: flex; align-items: center; gap: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; } footer span:first-child { color: var(--ink); font-weight: 750; } footer a { margin-left: auto; }
@media (max-width: 680px) { body { padding-bottom: env(safe-area-inset-bottom); }.site-header { min-height: 64px; padding-top: env(safe-area-inset-top); }.site-header nav { display: none; }.hero { padding: 2.5rem 0 2.25rem; }.hero-heading { align-items: flex-start; gap: 1rem; }.hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.5rem); overflow-wrap: anywhere; }.global-indicator { width: 54px; height: 54px; border-radius: 17px; }.global-indicator span { width: 17px; height: 17px; border-width: 5px; }.freshness { align-items: flex-start; line-height: 1.4; }.incidents, .components, .history { margin-bottom: 3.25rem; }.section-heading-row { align-items: flex-start; gap: 1rem; }.legend { max-width: 9rem; text-align: right; line-height: 1.35; }.component-row { padding: 1rem; }.component-top { align-items: flex-start; }.component-metrics { flex-direction: column-reverse; align-items: flex-end; gap: .25rem; text-align: right; }.component-lower { align-items: flex-start; }.uptime-bars { gap: 2px; height: 20px; }.history-axis { font-size: .57rem; }.history-range { min-width: 48px; }.incident-heading { display: grid; gap: .5rem; }.incident-timeline { padding-left: 1rem; padding-right: 1rem; } footer { flex-wrap: wrap; padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); } footer a { min-height: 44px; margin-left: 0; display: inline-flex; align-items: center; } }
@media (max-width: 380px) { main, footer, .site-header { width: min(100% - 1.25rem, 900px); }.hero-heading { display: grid; }.global-indicator { grid-row: 1; }.section-heading-row { display: grid; }.legend { max-width: none; text-align: left; }.component-top { display: grid; }.component-metrics { align-items: flex-start; text-align: left; }.uptime-value { min-width: 52px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }