only — never combine status-page + docs-page on (avoids stray padding rules) */ .status-page .docs-hero { margin-top: clamp(4rem, 10vh, 6rem); margin-bottom: clamp(2.5rem, 6vh, 4rem); } .status-banner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.75rem 1.75rem 1.5rem; border-radius: 0.75rem; border: 1px solid hsl(0 0% 100% / 0.08); background: hsl(0 0% 4%); margin-bottom: 2rem; } .status-banner__main { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; flex: 1 1 16rem; } .status-banner__dot { width: 0.75rem; height: 0.75rem; margin-top: 0.45rem; border-radius: 50%; flex-shrink: 0; background: #7a7a7a; box-shadow: 0 0 0 4px hsl(0 0% 100% / 0.04); } .status-banner.is-ok .status-banner__dot { background: #4ade80; box-shadow: 0 0 12px hsl(142 76% 45% / 0.45); } .status-banner.is-degraded .status-banner__dot, .status-banner.is-warn .status-banner__dot { background: #fbbf24; box-shadow: 0 0 12px hsl(43 96% 56% / 0.35); } .status-banner.is-fail .status-banner__dot { background: #f87171; box-shadow: 0 0 12px hsl(0 84% 70% / 0.4); } .status-banner__title { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: #e4e4e4; line-height: 1.2; } .status-banner__message { margin: 0; font-size: 1rem; line-height: 1.55; color: #b0b0b0; max-width: 40rem; } .status-banner__updated { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #7a7a7a; } .status-pill { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; border: 1px solid hsl(0 0% 100% / 0.1); background: hsl(0 0% 100% / 0.04); color: #e4e4e4; flex-shrink: 0; } .status-pill--ok { border-color: hsl(142 76% 45% / 0.35); background: hsl(142 76% 45% / 0.12); color: #86efac; } .status-pill--degraded, .status-pill--warn { border-color: hsl(43 96% 56% / 0.35); background: hsl(43 96% 56% / 0.12); color: #fcd34d; } .status-pill--fail { border-color: hsl(0 84% 70% / 0.35); background: hsl(0 84% 70% / 0.12); color: #fca5a5; } .status-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .status-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .status-metric { padding: 1.25rem 1.35rem; border-radius: 0.75rem; border: 1px solid hsl(0 0% 100% / 0.08); background: hsl(0 0% 4%); } .status-metric__label { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: #7a7a7a; text-transform: uppercase; letter-spacing: 0.06em; } .status-metric__value { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; color: #e4e4e4; line-height: 1.1; } .status-metric__meta { margin: 0.35rem 0 0; font-size: 0.8125rem; color: #7a7a7a; line-height: 1.4; } .status-section { margin-bottom: 2.5rem; } .status-section__head { margin-bottom: 1rem; } .status-section__title { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 800; color: #e4e4e4; letter-spacing: -0.02em; } .status-section__desc { margin: 0; font-size: 0.9375rem; color: #7a7a7a; line-height: 1.5; } .status-table-wrap { overflow-x: auto; border-radius: 0.75rem; border: 1px solid hsl(0 0% 100% / 0.08); background: hsl(0 0% 4%); } .status-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .status-table th, .status-table td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid hsl(0 0% 100% / 0.06); } .status-table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #7a7a7a; background: hsl(0 0% 100% / 0.02); } .status-table tr:last-child td { border-bottom: none; } .status-table td { color: #b0b0b0; } .status-table__route { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8125rem; color: #e4e4e4; word-break: break-all; } .status-code { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; } .status-code--ok { background: hsl(142 76% 45% / 0.15); color: #86efac; } .status-code--fail { background: hsl(0 84% 70% / 0.15); color: #fca5a5; } .status-code--warn { background: hsl(43 96% 56% / 0.15); color: #fcd34d; } .status-table__latency { font-variant-numeric: tabular-nums; white-space: nowrap; } .status-table__row--fail td { background: hsl(0 84% 70% / 0.04); } .status-empty { padding: 2rem 1.25rem; text-align: center; color: #7a7a7a; font-size: 0.9375rem; } .status-page p.status-footnote.body-font { margin-top: 0 !important; margin-bottom: 4rem !important; font-size: 0.8125rem; line-height: 1.55; color: #7a7a7a; } .status-footnote { margin-top: 0 !important; margin-bottom: 4rem !important; } @media (min-width: 768px) { .status-page p.status-footnote.body-font { margin-bottom: 5rem !important; } } .status-footnote a { color: #e4e4e4; text-decoration: underline; text-underline-offset: 2px; } .status-footnote a:hover { color: #fff; } .status-unavailable { padding: 2rem 1.5rem; margin-bottom: clamp(4rem, 12vh, 7rem); border-radius: 0.75rem; border: 1px solid hsl(0 0% 100% / 0.08); background: hsl(0 0% 4%); color: #b0b0b0; font-size: 0.9375rem; line-height: 1.55; }