/* Uptimia status page. Ported from docs/status-page-mockup-v19.html. ============================================================ v19 — quiet editorial language: white page, hairline-divided sections, zinc + brand-green, system sans + mono + one serif-italic accent word in the verdict. Key numbers sit as a hairline row at the foot of the hero (no dark band, no bento cards). Services are per-category hairline cards whose member rows expand to their own 90-day timelines. Past incidents are flat dash-divided rows with per-update timelines. Contract kept from the previous build (do not break): - JS reads tokens --seg-ok/--seg-warn/--seg-bad/--seg-maint (favicon), --bg (theme-color) and --brand/--warn/--bad/--info (metric chart accent); inline JS styles use --muted / --good-ink / --bad. All are defined below. - Sub-pages (history / maintenance / single article) share .wrap .sp-crumb .section-h .month .month-h .inc .badge .dur .inc-meta .updates .upd-item .upd-stage .upd-text .upd-time .inc-more .inc-summary .quiet. - Behavior hooks: .seg-u bars, .row/.row-head/.row-detail, .group-head[aria-expanded], #expandAll, #tzSeg, #themeBtn, subscribe popover, #tip, metric ids. ============================================================ */ :root, [data-theme="light"] { --bg:#ffffff; --bg-2:#fafafa; --bg-3:#f4f4f5; --surface:#ffffff; --line:#ececec; --line-2:#d4d4d4; --line-3:#a1a1aa; --ink:#0a0a0a; --ink-2:#27272a; --muted:#71717a; --soft:#a1a1aa; --faint:#d4d4d8; --ink-deep:#0a0a0a; --btn:#00994F; --btn-hover:#007E42; --btn-2:#11B865; --green-soft:#ecf8f1; --green-line:#c6e8d4; --good:#16a34a; --good-soft:#ecfdf3; --good-line:#bbf0ce; --warn:#ca8a04; --warn-soft:#fefce8; --warn-line:#fde68a; --bad:#dc2626; --bad-soft:#fef2f2; --bad-line:#fecaca; --maint:#4f63d2; --maint-soft:#eef1fc; --maint-line:#c9d3f5; --seg-none:#f0f0f2; --sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif; --mono:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace; --serif:'New York','Iowan Old Style','Charter',Georgia,serif; --radius:14px; --radius-sm:10px; --radius-xs:7px; --container:920px; --nav-bg:rgba(255,255,255,.78); /* Legacy aliases — read by status-page.js and owner custom CSS. */ --brand:var(--btn); --brand-2:var(--btn-hover); --brand-soft:var(--green-soft); --good-ink:var(--btn-hover); --warn-ink:var(--warn); --bad-ink:var(--bad); --info:var(--maint); --info-soft:var(--maint-soft); --info-line:var(--maint-line); --info-ink:var(--maint); --seg-ok:var(--good); --seg-warn:var(--warn); --seg-bad:var(--bad); --seg-maint:var(--maint); --canvas:var(--bg-3); --surface-2:var(--bg-2); --subtle:var(--soft); --brand-custom:var(--btn); } [data-theme="dark"] { --bg:#0a0a0e; --bg-2:#131319; --bg-3:#1c1c24; --surface:#14141a; --line:#25252e; --line-2:#353540; --line-3:#5a5a66; --ink:#f5f5f6; --ink-2:#d4d4d8; --muted:#9a9aa3; --soft:#6e6e7a; --faint:#353540; --ink-deep:#06060a; --btn:#11B865; --btn-hover:#00d96f; --btn-2:#11B865; --green-soft:rgba(17,184,101,.10); --green-line:rgba(17,184,101,.30); --good:#22c55e; --good-soft:rgba(34,197,94,.12); --good-line:rgba(34,197,94,.32); --warn:#f59e0b; --warn-soft:rgba(245,158,11,.12); --warn-line:rgba(245,158,11,.32); --bad:#f87171; --bad-soft:rgba(248,113,113,.12); --bad-line:rgba(248,113,113,.32); --maint:#8b9cf3; --maint-soft:rgba(139,156,243,.12); --maint-line:rgba(139,156,243,.32); --seg-none:#1c1c24; --nav-bg:rgba(10,10,14,.78); } /* State accent, driven by (set server-side from the verdict). */ body[data-state="ok"] { --accent:var(--good); --accent-soft:var(--good-soft); --accent-line:var(--good-line); --accent-em:var(--btn-hover); } body[data-state="warn"] { --accent:var(--warn); --accent-soft:var(--warn-soft); --accent-line:var(--warn-line); --accent-em:var(--warn); } body[data-state="bad"] { --accent:var(--bad); --accent-soft:var(--bad-soft); --accent-line:var(--bad-line); --accent-em:var(--bad); } body[data-state="maint"] { --accent:var(--maint); --accent-soft:var(--maint-soft); --accent-line:var(--maint-line); --accent-em:var(--maint); } *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01','ss03'; transition:background .25s ease,color .25s ease; } ::selection { background:var(--btn); color:#fff; } a { color:inherit; } button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; } input { font:inherit; color:inherit; } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; } .num { font-variant-numeric:tabular-nums; } .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; } :focus-visible { outline:none; box-shadow:0 0 0 3px var(--green-line); border-radius:6px; } .container { max-width:var(--container); margin:0 auto; padding:0 24px; } .t-cap { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); font-weight:700; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} } /* Skip link */ .skip { position:fixed; top:10px; left:10px; z-index:100; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); padding:8px 14px; border-radius:8px; font-weight:600; font-size:13px; box-shadow:0 8px 24px -10px rgba(0,0,0,.18); transform:translateY(-160%); transition:transform .15s; } .skip:focus-visible { transform:none; } /* ───────── Top bar ───────── */ .topbar { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:var(--nav-bg); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); } .topbar-inner { height:64px; display:flex; align-items:center; gap:10px; max-width:var(--container); margin:0 auto; padding:0 24px; } .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; min-width:0; } .brand .logo { flex:none; display:inline-flex; align-items:center; } .brand .logo img { height:26px; width:auto; max-width:150px; object-fit:contain; display:block; } /* Uptimia fallback wordmark: dark-text variant on light themes, white on dark. */ .brand .logo-up .dk { display:none; } .brand .logo-up .lt { display:block; } [data-theme="dark"] .brand .logo-up .lt { display:none; } [data-theme="dark"] .brand .logo-up .dk { display:block; } .brand .bn { font-size:15px; font-weight:600; letter-spacing:-0.3px; color:var(--ink); white-space:nowrap; } .topbar .spacer { flex:1; } .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; border:1px solid transparent; font-size:13.5px; font-weight:500; cursor:pointer; font-family:var(--sans); letter-spacing:-0.05px; transition:all .12s; text-decoration:none; } .btn svg { width:14px; height:14px; } .btn, .btn-primary { background:var(--brand-custom); border-color:var(--brand-custom); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 14px -4px rgba(0,153,79,.45); } [data-theme="dark"] .btn, [data-theme="dark"] .btn-primary { color:#04120b; } .btn:hover { filter:brightness(.95); transform:translateY(-1px); } .btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:none; font-weight:500; } .btn.ghost:hover { background:var(--bg-3); filter:none; transform:none; border-color:var(--line-3); } .btn-text, .tlink { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px; color:var(--ink-2); background:transparent; font-size:13.5px; font-weight:500; text-decoration:none; } .btn-text:hover, .tlink:hover { background:var(--bg-3); color:var(--ink); } .tlink svg { width:15px; height:15px; } .iconbtn { width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center; transition:all .15s; } .iconbtn:hover { border-color:var(--line-2); color:var(--ink); } .iconbtn svg { width:16px; height:16px; } .theme-toggle { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); padding:6px 6px 6px 12px; border-radius:99px; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; transition:all .15s; } .theme-toggle:hover { border-color:var(--line-2); color:var(--ink); } .theme-toggle .pill-t { background:var(--ink-deep); color:#fff; padding:3px 9px; border-radius:99px; font-size:10px; letter-spacing:0.4px; border:1px solid var(--line-2); } [data-theme="dark"] .theme-toggle .pill-t { background:#fff; color:var(--ink-deep); } /* segmented (tz toggle + metric range) — quiet mono pill */ .seg { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:99px; background:var(--surface); padding:2px; } .seg button { height:26px; padding:0 11px; border-radius:99px; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); transition:all .12s; } .seg button:hover { color:var(--ink); } .seg button[aria-selected="true"], .seg button.active { background:var(--ink-deep); color:#fff; } [data-theme="dark"] .seg button[aria-selected="true"], [data-theme="dark"] .seg button.active { background:#fff; color:var(--ink-deep); } /* ───────── Sections ───────── */ main > section { padding:44px 0; } main > section.hero { padding:52px 0 46px; } main > section.alt { background:var(--bg-2); border-block:1px solid var(--line); } section[id], .notice, .inc, .upcoming { scroll-margin-top:76px; } .sec-h { display:flex; align-items:baseline; gap:12px; margin-bottom:22px; } .sec-h h1, .sec-h h2 { margin:0; font-size:20px; font-weight:600; letter-spacing:-0.5px; color:var(--ink); } .sec-h .sh-r { margin-left:auto; letter-spacing:0.6px; color:var(--soft); } .sec-h a.sh-link { margin-left:auto; font-size:12.5px; color:var(--btn-hover); text-decoration:none; font-weight:500; } .sec-h a.sh-link:hover { text-decoration:underline; } .group-h, .month-h { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; margin:28px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px; } .month:first-of-type .month-h { margin-top:0; } .month { margin-bottom:6px; } .group-h .gh-r, .month-h .gh-r { margin-left:auto; letter-spacing:0.4px; color:var(--soft); font-weight:600; } /* in-hero sub-headings (active notices / upcoming maintenance) */ .hero-subhead { display:flex; align-items:baseline; gap:10px; margin:30px 0 0; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; } .hero-subhead a { margin-left:auto; color:var(--btn-hover); text-decoration:none; letter-spacing:0.6px; } .hero-subhead a:hover { text-decoration:underline; } /* ───────── Hero / verdict ───────── */ .hero-grid { display:flex; align-items:flex-start; gap:32px; } .hero-main { flex:1; min-width:0; } .v-title { margin:0 0 12px; font-size:42px; font-weight:600; letter-spacing:-1.6px; line-height:1.08; color:var(--ink); } .v-title em { font-family:var(--serif); font-style:italic; font-weight:500; color:var(--accent-em); letter-spacing:-1px; transition:color .25s; } .v-sub { font-size:15px; color:var(--muted); line-height:1.55; display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; } .v-sub b { color:var(--ink); font-weight:600; } .v-sub > .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); flex-shrink:0; margin-top:7px; transition:background .25s; } body[data-state="bad"] .v-sub > .dot { animation:pulse 1.6s ease-in-out infinite; } .live-pill { display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--accent-em); vertical-align:1px; } .live-pill .pulse { width:7px; height:7px; border-radius:50%; background:var(--accent); } body[data-state="ok"] .live-pill .pulse { animation:ring 1.8s ease-out infinite; } @keyframes ring { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)} 100%{box-shadow:0 0 0 8px transparent} } .v-lede { margin:16px 0 0; font-size:14px; color:var(--muted); line-height:1.6; max-width:640px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; } .v-lede .o-impact { color:var(--ink); font-weight:600; } .v-lede a.o-anchor { color:var(--btn-hover); font-weight:500; text-decoration:none; white-space:nowrap; } .v-lede a.o-anchor:hover { text-decoration:underline; } /* right-hand quiet figure (streak when ok, 90-day uptime otherwise) */ .hero-aside { flex:none; text-align:right; padding-left:28px; border-left:1px solid var(--line); } .st-lab { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:9px; } .st-num { font-size:30px; font-weight:600; letter-spacing:-1.3px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .st-num sup { font-size:.45em; font-weight:600; letter-spacing:-0.3px; color:var(--btn-hover); margin-left:2px; vertical-align:super; } .st-num .u { font-size:.45em; font-weight:500; letter-spacing:-0.2px; color:var(--muted); margin-left:3px; } .st-num .u.nodata { font-size:15px; } .st-num.warn { color:var(--warn); } .st-num.bad { color:var(--bad); } .st-desc { font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:7px; } .hero-aside .st-num { font-size:26px; letter-spacing:-1px; } /* ───────── 90-day ribbon (in-hero) ───────── */ .ribbon { margin-top:30px; } .rbar { display:flex; gap:2px; height:34px; } .rlabels, .alabels { display:flex; align-items:center; gap:12px; margin-top:10px; } .rlabels .ln, .alabels .ln { flex:1; border-top:1px dashed var(--line); } .rlabels .mid .mono { color:var(--ink-2); } /* uptime segments + non-color channels (WCAG 1.4.1) */ .seg-u { flex:1; min-width:0; border-radius:3px; padding:0; display:block; cursor:pointer; appearance:none; border:none; background-color:var(--good); transition:opacity .12s,transform .12s; } .seg-u:hover { opacity:.75; transform:scaleY(1.08); } .seg-u.warn { background-color:var(--warn); background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.45) 0 1px,transparent 1px 3px); } .seg-u.bad { background-color:var(--bad); box-shadow:inset 0 -5px 0 -2px rgba(0,0,0,.25); } .seg-u.maint { background-color:var(--maint); background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px); } .seg-u.none { background-color:var(--seg-none); cursor:default; } [data-theme="dark"] .seg-u.warn { background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px); } [data-theme="dark"] .seg-u.maint { background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px); } /* ───────── Key numbers (quiet, in-hero) ───────── */ .stats { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:22px 32px; } /* ───────── Status dots & pills ───────── */ .dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; vertical-align:middle; } .dot.up { background:var(--good); box-shadow:0 0 0 3px var(--good-soft); } .dot.down { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); animation:pulse 1.6s ease-in-out infinite; } .dot.warn { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .dot.maint { background:var(--maint); box-shadow:0 0 0 3px var(--maint-soft); } .pill { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.3px; padding:1px 7px; border-radius:5px; border:1px solid transparent; white-space:nowrap; } .pill.ok { background:var(--good-soft); color:var(--good); border-color:var(--good-line); } .pill.warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); } .pill.bad { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); } .pill.maint { background:var(--maint-soft); color:var(--maint); border-color:var(--maint-line); } .pill.neutral { background:var(--bg-2); color:var(--muted); border-color:var(--line); } /* ───────── Cards ───────── */ .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .15s,box-shadow .15s; } .card:hover { border-color:var(--green-line); box-shadow:0 1px 0 rgba(0,153,79,.04),0 8px 24px -10px rgba(0,153,79,.18); } [data-theme="dark"] .card:hover { box-shadow:0 8px 24px -10px rgba(17,184,101,.28); } /* ───────── Live notice cards (incidents / maintenance / announcements) ───────── */ .notice { margin-top:28px; overflow:hidden; } .notice.tone-bad { border-color:var(--bad-line); } .notice.tone-warn { border-color:var(--warn-line); } .notice.tone-info { border-color:var(--maint-line); } .notice.tone-note { border-color:var(--line-2); } .notice.tone-bad:hover { border-color:var(--bad-line); box-shadow:0 8px 24px -10px color-mix(in srgb,var(--bad) 22%,transparent); } .notice.tone-warn:hover { border-color:var(--warn-line); box-shadow:0 8px 24px -10px color-mix(in srgb,var(--warn) 22%,transparent); } .notice.tone-info:hover { border-color:var(--maint-line); box-shadow:0 8px 24px -10px color-mix(in srgb,var(--maint) 22%,transparent); } .notice.tone-note:hover { border-color:var(--line-2); box-shadow:none; } .notice-head { display:flex; align-items:center; gap:9px; padding:11px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; font-weight:600; flex-wrap:wrap; } /* leading status dot + tone tint on the head band */ .notice-head::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--line-3); flex:none; } .tone-bad .notice-head { background:color-mix(in srgb,var(--bad) 4%,var(--surface)); color:var(--bad); border-bottom-color:var(--bad-line); } .tone-bad .notice-head::before { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); } .tone-warn .notice-head { background:color-mix(in srgb,var(--warn) 5%,var(--surface)); color:var(--warn); border-bottom-color:var(--warn-line); } .tone-warn .notice-head::before { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .tone-info .notice-head { background:color-mix(in srgb,var(--maint) 4%,var(--surface)); color:var(--maint); border-bottom-color:var(--maint-line); } .tone-info .notice-head::before { background:var(--maint); box-shadow:0 0 0 3px var(--maint-soft); } .tone-note .notice-head::before { background:var(--maint); box-shadow:0 0 0 3px var(--maint-soft); } .notice-head .nh-r { margin-left:auto; letter-spacing:0.3px; } .notice-head .pill { margin-left:auto; } .notice-body { padding:15px 18px 5px; } .notice-title { font-size:17px; font-weight:600; letter-spacing:-0.4px; line-height:1.35; color:var(--ink); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .notice-body > .updates { margin:13px 0 16px; } /* affected-services / next-update chips */ .affected { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; } .tagx { font-family:var(--mono); font-size:11px; background:var(--bg-3); padding:2px 8px; border-radius:5px; color:var(--ink-2); } /* ───────── Update timelines (live notices + past incidents + sub-pages) ───────── */ .updates { margin-top:15px; padding-left:17px; display:flex; flex-direction:column; gap:14px; } .upd-item { position:relative; } .upd-item::before { content:''; position:absolute; left:-22px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--faint); box-shadow:0 0 0 3px var(--bg-3); } /* per-item rail segment — stops at the last dot instead of running past it */ .upd-item::after { content:''; position:absolute; left:-19px; top:18px; bottom:-14px; width:2px; border-radius:1px; background:var(--line); } .upd-item:last-child::after { content:none; } .upd-item.investigating::before { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); } .upd-item.identified::before, .upd-item.acknowledged::before, .upd-item.in_progress::before { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .upd-item.monitoring::before, .upd-item.scheduled::before, .upd-item.update::before { background:var(--maint); box-shadow:0 0 0 3px var(--maint-soft); } .upd-item.resolved::before, .upd-item.completed::before, .upd-item.closed::before { background:var(--good); box-shadow:0 0 0 3px var(--good-soft); } .upd-stage { display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-right:8px; color:var(--muted); } .upd-stage.investigating { color:var(--bad); } .upd-stage.identified, .upd-stage.acknowledged, .upd-stage.in_progress { color:var(--warn); } .upd-stage.monitoring, .upd-stage.scheduled, .upd-stage.update { color:var(--maint); } .upd-stage.resolved, .upd-stage.completed, .upd-stage.closed { color:var(--good); } .upd-stage.open { color:var(--muted); } /* meta-first layout: STAGE · TIME on one mono line, message below */ .upd-meta { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .upd-meta .upd-stage { margin-right:0; } .upd-meta .upd-time { margin-top:0; } .upd-meta .upd-time::before { content:'·'; margin-right:8px; color:var(--faint); } .upd-meta + .upd-text { margin-top:4px; } .upd-text { font-size:13.5px; color:var(--ink-2); line-height:1.6; } div.upd-text { max-width:640px; } .upd-time { font-family:var(--mono); font-size:11px; color:var(--soft); margin-top:4px; } /* ───────── Upcoming maintenance strip ───────── */ .upcoming { margin-top:14px; display:flex; align-items:center; gap:11px; padding:13px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; color:var(--ink-2); flex-wrap:wrap; transition:border-color .15s; } .upcoming:hover { border-color:var(--maint-line); } .upcoming .up-txt { flex:1 1 0; min-width:200px; } .upcoming b { font-weight:600; color:var(--ink); } .upcoming .when { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); } /* ───────── Components (collapsible category groups) ───────── */ .gcard { overflow:hidden; } .gcard + .gcard { margin-top:14px; } .group-head { width:100%; display:flex; align-items:center; gap:11px; padding:14px 18px 12px; text-align:left; flex-wrap:wrap; border-radius:var(--radius) var(--radius) 0 0; } .group-head:hover { background:var(--bg-2); } .group-head .chev { width:16px; height:16px; color:var(--soft); transition:transform .18s; flex:none; } .group-head[aria-expanded="true"] .chev { transform:rotate(90deg); } .group-head .gname { font-weight:600; font-size:14.5px; letter-spacing:-0.2px; color:var(--ink); } .group-head .gcount { font-family:var(--mono); font-size:11px; color:var(--soft); font-weight:600; } .group-head .gright { margin-left:auto; display:flex; align-items:center; gap:10px; } .group-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .18s ease; border-top:1px solid var(--line); } .group-head[aria-expanded="false"] + .group-body { grid-template-rows:0fr; border-top-color:transparent; } .group-body > .gb-in { overflow:hidden; min-height:0; } .row { border-top:1px solid var(--line); } .row:first-child { border-top:none; } .row-head { width:100%; display:flex; align-items:center; gap:11px; padding:12px 18px 12px 45px; text-align:left; } .row-head:hover { background:var(--bg-2); } .cname { min-width:0; flex:1; display:flex; align-items:baseline; gap:9px; overflow:hidden; } .cname .cn { font-weight:600; font-size:14px; letter-spacing:-0.2px; color:var(--ink); line-height:1.25; white-space:nowrap; } .cname .cd { font-family:var(--mono); font-size:11px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rright { margin-left:auto; display:flex; align-items:center; gap:9px; flex:none; } .pct { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--good); min-width:54px; text-align:right; } .pct.warn { color:var(--warn); } .pct.bad { color:var(--bad); } /* Reserved status column: only non-operational rows render a pill, but the slot is always present so percentages stack in one column. */ .pill-slot { min-width:96px; display:flex; justify-content:flex-start; align-items:center; flex:none; } .mchev { width:14px; height:14px; color:var(--soft); transition:transform .18s; flex:none; } .row-head[aria-expanded="true"] .mchev { transform:rotate(90deg); } .row-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .16s ease; } .row.expanded .row-detail { grid-template-rows:1fr; } .row-detail > .rd-in { overflow:hidden; min-height:0; } .uptime { margin:0; padding:2px 18px 14px 45px; } .ubar { display:flex; gap:2px; height:22px; } .ubar .seg-u { border-radius:2px; } .ulabels { display:flex; align-items:center; gap:12px; margin-top:8px; } .ulabels .ln { flex:1; border-top:1px dashed var(--line); } .rcaption { margin-top:9px; font-size:11px; color:var(--muted); } .xall { margin-left:auto; color:var(--btn-hover); cursor:pointer; letter-spacing:1.2px; } .xall:hover { text-decoration:underline; } .legend { display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); } .legend .li { display:inline-flex; align-items:center; gap:6px; } .legend .sw { width:12px; height:10px; border-radius:2.5px; } .legend .sw.ok { background:var(--good); } .legend .sw.warn { background:var(--warn); background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.45) 0 1px,transparent 1px 3px); } .legend .sw.bad { background:var(--bad); box-shadow:inset 0 -4px 0 -2px rgba(0,0,0,.25); } .legend .sw.maint { background:var(--maint); background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px); } .legend .sw.none { background:var(--seg-none); border:1px solid var(--line); } .legend .spacer { flex:1; } .legend .t-cap { letter-spacing:0.6px; } /* ───────── System metrics ───────── */ .metrics-card { overflow:hidden; } .panel-head { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; } .panel-title { font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); } .metric-tabs { display:inline-flex; gap:4px; margin-left:auto; } .metric-tabs button { height:27px; padding:0 10px; border-radius:7px; color:var(--muted); font-size:12px; font-weight:600; } .metric-tabs button:hover { background:var(--bg-3); color:var(--ink); } .metric-tabs button.active { background:var(--green-soft); color:var(--btn-hover); } .metric-body { padding:15px 18px; } .metric-stat { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .metric-stat .mv { font-size:23px; font-weight:600; letter-spacing:-0.6px; } .metric-stat .mv .unit { font-size:13px; color:var(--soft); font-weight:500; } .metric-stat .mdelta { font-size:12px; font-weight:600; color:var(--good); } .metric-stat .mdelta.bad { color:var(--bad); } .metric-stat .mrange { margin-left:auto; } .metric-stat .mrange button { height:24px; padding:0 10px; } .rt-chart { width:100%; height:120px; display:block; } .rt-axis { display:flex; justify-content:space-between; font-size:10.5px; color:var(--soft); margin-top:2px; } .metric-legend { display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:11.5px; font-weight:600; color:var(--muted); } .metric-swatch { width:11px; height:11px; border-radius:3px; background:var(--brand); flex:none; } .metric-plot { position:relative; margin-top:8px; } .rt-yaxis { position:absolute; top:0; bottom:0; left:0; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; pointer-events:none; font-size:10px; line-height:1; color:var(--soft); } .rt-yaxis span { background:color-mix(in srgb,var(--surface) 82%,transparent); padding:0 4px 0 0; border-radius:3px; } /* ───────── History (past incidents) ───────── */ .inc { padding:18px 0; border-top:1px dashed var(--line); transition:background .3s; } .inc:first-of-type { border-top:none; padding-top:6px; } .inc.flash { background:var(--accent-soft); } .inc-h { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; } .inc-h .id { width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px; } .inc-h .id.ok { background:var(--good); box-shadow:0 0 0 3px var(--good-soft); } .inc-h .id.warn { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .inc-h .id.bad { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); } .inc-h .id.info { background:var(--maint); box-shadow:0 0 0 3px var(--maint-soft); } .inc-h .it { font-size:15px; font-weight:600; letter-spacing:-0.25px; color:var(--ink); min-width:0; overflow-wrap:anywhere; } .badge { display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.3px; padding:1px 7px; border-radius:5px; white-space:nowrap; flex:none; margin-top:1px; background:var(--good-soft); color:var(--good); border:1px solid var(--good-line); } .badge.completed { background:var(--maint-soft); color:var(--maint); border-color:var(--maint-line); } .badge.open { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); } .inc-h .dur { margin-left:auto; flex:none; white-space:nowrap; margin-top:3px; font-family:var(--mono); font-size:11px; color:var(--soft); font-variant-numeric:tabular-nums; } .inc-meta { font-family:var(--mono); font-size:11px; color:var(--soft); margin:5px 0 0 18px; letter-spacing:0.2px; text-transform:uppercase; display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:6px; } .inc-meta .svc-chip { text-transform:none; } .inc-meta .meta-when { white-space:nowrap; } .inc-meta .meta-svc { display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; } .inc-meta .meta-svc::before { content:'·'; margin-right:7px; color:var(--muted); } .inc-meta .svc-chip { font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:0; line-height:1.5; padding:2px 9px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line); color:var(--ink-2); } .inc .updates { margin:14px 0 6px 18px; max-width:640px; } .quiet { display:flex; align-items:center; gap:9px; padding:16px 0 4px; color:var(--muted); font-size:13px; } .quiet svg { width:16px; height:16px; flex:none; color:var(--good); } .quiet .dot { width:6px; height:6px; } /* sub-pages: full history / upcoming maintenance / single status update */ .wrap { max-width:var(--container); margin:0 auto; padding:0 24px; } .wrap > section { padding:10px 0 44px; } .sp-crumb { margin:26px 2px 0; } .sp-crumb a { font-size:13px; color:var(--muted); text-decoration:none; font-weight:500; } .sp-crumb a:hover { color:var(--ink); text-decoration:underline; } .section-h { display:flex; align-items:baseline; gap:12px; margin-bottom:22px; } .section-h h1, .section-h h2 { margin:0; font-size:20px; font-weight:600; letter-spacing:-0.5px; color:var(--ink); } .section-h a { margin-left:auto; font-size:12.5px; color:var(--btn-hover); text-decoration:none; font-weight:500; } .section-h a:first-child { margin-left:0; } .section-h a:hover { text-decoration:underline; } .inc-summary { margin-top:12px; font-size:13.5px; color:var(--ink); line-height:1.55; padding-left:18px; } .inc-more { margin-top:12px; padding-left:18px; } .inc-more a { font-size:12.5px; font-weight:500; color:var(--btn-hover); text-decoration:none; } .inc-more a:hover { text-decoration:underline; } /* ───────── Footer ───────── */ .page-foot { padding:30px 0 38px; border-top:1px solid var(--line); } .foot-in { display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--soft); font-size:13px; } .pw { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--muted); font-size:13px; font-weight:500; } .pw .pw-logo { height:16px; width:auto; display:block; } .pw .pw-logo.dk { display:none; } [data-theme="dark"] .pw .pw-logo.lt { display:none; } [data-theme="dark"] .pw .pw-logo.dk { display:block; } .pw:hover { color:var(--ink); } .foot-links { margin-left:auto; display:flex; gap:18px; font-size:13px; } .foot-links a { color:var(--muted); text-decoration:none; } .foot-links a:hover { color:var(--ink); } /* ───────── Subscribe popover ───────── */ .pop-wrap { position:relative; } .pop { position:absolute; right:0; top:calc(100% + 8px); width:318px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 32px -12px rgba(0,0,0,.28); padding:16px; z-index:60; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .14s,transform .14s; } .pop.open { opacity:1; transform:none; pointer-events:auto; } .pop h4 { margin:0 0 4px; font-size:14px; font-weight:600; letter-spacing:-0.2px; display:flex; align-items:center; gap:7px; } .pop p { margin:0 0 12px; font-size:12px; color:var(--muted); } .pop .field { display:flex; gap:7px; } .pop-msg { display:none; margin-top:10px; font-size:12px; } .pop input[type=email] { flex:1; height:36px; padding:0 11px; border:1px solid var(--line-2); border-radius:8px; background:var(--bg-2); font-size:13px; } .pop input[type=email]:focus-visible { background:var(--surface); border-color:var(--btn); } .pop .field .btn { transform:none; } .pop .chans { display:flex; gap:8px; margin-top:12px; } .pop .chan { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border:1px solid var(--line); border-radius:9px; background:var(--bg-2); font-size:10px; font-weight:600; color:var(--muted); } .pop .chan svg { width:15px; height:15px; } /* ───────── Tooltip ───────── */ #tip { position:fixed; z-index:70; pointer-events:none; background:var(--ink-deep); color:#fff; border:1px solid var(--line-2); border-radius:8px; padding:8px 11px; font-size:12px; line-height:1.45; box-shadow:0 8px 24px -8px rgba(0,0,0,.35); opacity:0; transform:translateY(4px); transition:opacity .1s; max-width:240px; } #tip.show { opacity:1; transform:none; } #tip .tt-d { font-family:var(--mono); font-size:11px; } #tip .tt-s { display:flex; align-items:center; gap:6px; margin-top:3px; color:rgba(255,255,255,.65); } #tip .tt-s .dd { width:7px; height:7px; border-radius:2px; flex:none; } /* ───────── Responsive ───────── */ @media (max-width:880px) { .stats { grid-template-columns:1fr 1fr; } } @media (max-width:720px) { main > section { padding:34px 0; } main > section.hero { padding:40px 0 36px; } .v-title { font-size:30px; letter-spacing:-1.1px; } .st-num { font-size:26px; letter-spacing:-1px; } .hero-grid { flex-direction:column; gap:0; } .hero-aside { border-left:none; border-top:1px solid var(--line); padding:14px 0 0; margin-top:18px; text-align:left; width:100%; } .group-head { padding:12px 16px 10px; } .row-head { padding:10px 16px 10px 41px; } .uptime { padding:2px 16px 12px 41px; } .ubar { height:18px; } .btn .blabel { display:none; } .theme-toggle { padding:5px; } .theme-toggle .tt-lab { display:none; } /* Header fits on phones: drop the flex spacer and let the brand take the slack. */ .topbar .spacer { display:none; } .brand { flex:1 1 auto; } .brand .bn { font-size:14px; overflow:hidden; text-overflow:ellipsis; } /* Touch targets >= ~40px */ .iconbtn { width:40px; height:40px; } .tlink.hist { min-height:40px; } .theme-toggle { min-height:40px; min-width:40px; justify-content:center; } .seg button { min-height:34px; } .inc-more a, .foot-links a, .sp-crumb a { display:inline-block; padding:8px 4px; } .sec-h a.sh-link, .section-h a { padding:6px 2px; } .inc-meta, .inc-h .dur { font-size:12px; } /* Stack timestamp over affected-services on phones (no room for one row). */ .inc-meta { display:block; } .inc-meta .meta-when { display:block; white-space:normal; } .inc-meta .meta-svc { margin-top:8px; } .inc-meta .meta-svc::before { content:none; } .notice-head { row-gap:4px; } .notice-head .nh-r, .notice-head .pill { margin-left:0; } .pct { min-width:0; } .pill-slot { min-width:0; } } @media (max-width:560px) { .cname .cd { display:none; } } /* On phones the wide wordmark + controls leave no room for the page name. */ @media (max-width:500px) { .brand .bn { display:none; } } /* On touch devices the 90-day ribbon segments are ~3px wide — drop the per-day tap/hover affordance (the aggregate uptime % is always shown). */ @media (hover:none) and (pointer:coarse) { .seg-u { pointer-events:none; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }