:root { color-scheme: dark; } * { box-sizing:border-box; } body { margin:0; min-width:320px; background:#0b1119; color:#edf3fa; font:15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; } button,input { font:inherit; } .status-page { width:min(1160px,calc(100% - 32px)); margin:auto; padding:26px 0 56px; } .status-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 2px 26px; } .status-header>div:first-child { display:flex; gap:11px; align-items:center; } .status-header small { display:block; color:#94a2b5; font-size:10px; font-weight:800; letter-spacing:.13em; } .status-header strong { display:block; font-size:18px; } .status-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(145deg,#fa5ca7,#9d37ff); color:#fff; font-size:12px; font-weight:900; letter-spacing:-.05em; } .status-header-actions { display:flex; align-items:center; gap:14px; color:#9aaabd; font-size:12px; } .status-header button { border:1px solid #3a4757; border-radius:9px; padding:8px 11px; background:#131d2a; color:#dce5ef; cursor:pointer; } .status-hero { display:flex; align-items:center; justify-content:space-between; gap:26px; padding:30px; border:1px solid #2e3a49; border-radius:20px; background:radial-gradient(circle at 82% 18%,#273b5b 0,transparent 34%),#141e2b; } .status-hero h1 { margin:4px 0 8px; font-size:clamp(26px,5vw,42px); line-height:1.08; letter-spacing:-.045em; } .status-hero p:not(.status-eyebrow) { margin:0; color:#b4c0cf; } .status-eyebrow { margin:0; color:#ee62aa; font-size:11px; font-weight:900; letter-spacing:.13em; } .status-overall-pill { padding:10px 14px; border:1px solid #246c58; border-radius:999px; background:#17362f; color:#6ce0bb; font-size:12px; font-weight:900; letter-spacing:.08em; } .state-degraded .status-overall-pill { border-color:#735b25; background:#3a3018; color:#f4c65a; } .state-outage .status-overall-pill { border-color:#823b4d; background:#3b1f28; color:#ff829e; } .status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; } .status-service-card { overflow:hidden; border:1px solid #2c3948; border-radius:16px; background:#151f2c; } .status-service-card>header { display:flex; align-items:flex-start; gap:11px; padding:19px 19px 12px; } .status-service-card h2 { margin:0; font-size:16px; } .status-service-card header p { margin:2px 0 0; color:#9caaba; font-size:12px; } .status-service-card header strong { margin-left:auto; color:#67dcb7; font-size:10px; letter-spacing:.08em; } .status-service-card.state-degraded header strong { color:#f0c44e; } .status-service-card.state-down header strong { color:#ff7f98; } .status-service-card.state-unknown header strong { color:#9aaabd; } .status-state-dot { flex:0 0 auto; width:9px; height:9px; margin-top:7px; border-radius:50%; background:#51d4aa; box-shadow:0 0 0 4px #1f493e; } .state-degraded .status-state-dot { background:#f2bc3d; box-shadow:0 0 0 4px #4a3a1b; } .state-down .status-state-dot { background:#f36b86; box-shadow:0 0 0 4px #49232d; } .state-unknown .status-state-dot { background:#8694a5; box-shadow:0 0 0 4px #2b3541; } .status-service-card dl { display:grid; grid-template-columns:1fr 1fr; gap:8px 15px; margin:0; padding:13px 19px; border-top:1px solid #293645; } .status-service-card dt { color:#7f8da0; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .status-service-card dd { margin:2px 0 0; color:#e5ecf5; font-size:12px; overflow-wrap:anywhere; } .status-reason { margin:0; padding:0 19px 14px; color:#b0bdcb; font-size:12px; } .status-service-card details { border-top:1px solid #293645; } .status-service-card summary { padding:12px 19px; color:#b9c8d7; cursor:pointer; font-size:12px; font-weight:700; } .status-service-card pre { max-height:190px; overflow:auto; margin:0; padding:0 19px 16px; color:#9bb2c9; font:11px/1.4 ui-monospace,monospace; white-space:pre-wrap; } .status-login-wrap { display:grid; min-height:100vh; place-items:center; padding:22px; background:radial-gradient(circle at 55% 18%,#242653 0,transparent 33%),#0b1119; } .status-login-card { width:min(440px,100%); padding:34px; border:1px solid #2e3b4b; border-radius:20px; background:#151f2c; box-shadow:0 20px 70px #0007; } .status-login-card h1 { margin:14px 0 7px; font-size:31px; letter-spacing:-.045em; } .status-login-card>p { margin:0; color:#aebccc; } .status-login-form { display:grid; gap:15px; margin:24px 0 19px; } .status-login-form label { display:grid; gap:6px; color:#dce5ee; font-size:12px; font-weight:800; } .status-login-form input { width:100%; min-height:45px; padding:0 12px; border:1px solid #3a4858; border-radius:10px; background:#101822; color:#f3f6fa; } .status-login-form button { min-height:46px; border:0; border-radius:10px; background:linear-gradient(100deg,#e84d9a,#a63bf6); color:#fff; font-weight:800; cursor:pointer; } .status-login-card>small { color:#8190a2; font-size:11px; } .status-error { color:#ff8da4; } @media(max-width:720px) { .status-page { width:min(100% - 22px,1160px); padding-top:18px; } .status-header,.status-hero { align-items:flex-start; flex-direction:column; } .status-header-actions { width:100%; justify-content:space-between; } .status-grid { grid-template-columns:1fr; } .status-hero { padding:23px; } }
.state-awaiting .status-overall-pill { border-color:#735b25; background:#3a3018; color:#f4c65a; }
.status-header .status-install { border-color:#9951db; background:linear-gradient(115deg,#7a3ec5,#bc4ea0); color:#fff; font-weight:800; } .status-footer { display:flex; justify-content:flex-end; margin-top:24px; padding:8px 2px; } .status-footer button { border:1px solid #3a4757; border-radius:9px; padding:8px 11px; background:#131d2a; color:#dce5ef; cursor:pointer; } @media(min-width:721px) { .status-grid { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); } }
@media(max-width:720px) { .status-header { align-items:center; flex-direction:row; } }
@supports (padding: env(safe-area-inset-top)) { .status-page { padding-top:max(26px,calc(env(safe-area-inset-top) + 14px)); padding-bottom:max(56px,calc(env(safe-area-inset-bottom) + 20px)); } @media(max-width:720px) { .status-page { padding-top:calc(env(safe-area-inset-top) + 12px); padding-bottom:calc(env(safe-area-inset-bottom) + 22px); } } }
@media(max-width:720px) { body { font-size:14px; } .status-page { width:min(100% - 16px,1160px); padding:10px 0 22px; } .status-header { gap:8px; padding:0 2px 10px; } .status-header strong { font-size:15px; } .status-mark { width:31px; height:31px; border-radius:9px; } .status-header-actions { margin-left:auto; width:auto; gap:6px; } .status-refresh { display:none; } .status-header button { padding:7px 9px; font-size:11px; } .status-hero { align-items:center; flex-direction:row; gap:10px; padding:12px 13px; border-radius:13px; } .status-hero h1 { margin:1px 0 0; font-size:18px; line-height:1.15; letter-spacing:-.025em; } .status-hero p:not(.status-eyebrow) { display:none; } .status-eyebrow { font-size:9px; } .status-overall-pill { flex:0 0 auto; padding:7px 8px; font-size:9px; } .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:9px; } .status-service-card { min-height:62px; border-radius:11px; } .status-service-card>header { align-items:center; gap:7px; min-height:62px; padding:9px; } .status-service-card h2 { font-size:12px; line-height:1.15; } .status-service-card header p, .status-service-card dl, .status-service-card.state-healthy .status-reason, .status-service-card.state-healthy details { display:none; } .status-service-card header strong { margin-left:auto; font-size:8px; letter-spacing:.04em; } .status-state-dot { width:7px; height:7px; margin-top:0; box-shadow:0 0 0 3px #1f493e; } .status-service-card:not(.state-healthy) { grid-column:1 / -1; } .status-service-card:not(.state-healthy)>header { align-items:flex-start; } .status-service-card:not(.state-healthy) dl { display:grid; grid-template-columns:1fr; gap:5px; padding:9px; } .status-service-card:not(.state-healthy) .status-reason { padding:0 9px 9px; font-size:11px; } .status-service-card:not(.state-healthy) details { display:block; } .status-service-card summary { padding:9px; } .status-footer { margin-top:12px; } }