/* =========================================================================== status.vibewrightlabs.com Modelled on status.claude.com: a narrow centred column, a single wide status banner, one card of components each carrying a 90-day uptime strip, then a dated list of past incidents. Quiet, flat, no ornament — the layout does the work and colour is reserved for state. Light values are taken from that page directly. Dark is the counterpart it doesn't have: the same warm neutral family inverted, with the status hues lifted enough to hold contrast on a dark ground. =========================================================================== */ /* --- Tokens -------------------------------------------------------------- * Dark is declared twice, on purpose: @media (prefers-color-scheme: dark) + :not([data-theme="light"]) covers auto — the default, and anyone who never touches the control. The :not() is what lets an explicit "light" beat a dark OS setting. :root[data-theme="dark"] covers an explicit choice, in a browser set to light. Keeping literal values in both blocks means the page renders correctly with no JavaScript and no `light-dark()` support, which matters more here than avoiding a duplicated list. Edit both — a test compares them. */ :root { color-scheme: light dark; --paper: #FAF9F5; /* warm off-white, the reference's page ground */ --panel: #FFFFFF; --ink: #141413; --muted: #87867F; --rule: #DEDCD1; --up: #76AD2A; /* operational */ --degraded: #FAA72A; /* minor */ --major: #E86235; /* partial outage */ --down: #E04343; /* critical */ --info: #2C84DB; /* maintenance */ --none: #DEDCD1; /* a day with no recorded data */ /* The uptime strip reads these; SVG fill resolves var() like anything else. */ --bar-up: var(--up); --bar-degraded: var(--degraded); --bar-down: var(--down); --bar-none: var(--none); --banner-ink: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #1B1B19; --panel: #232320; --ink: #F0EFE9; --muted: #9C9B92; --rule: #35342F; --up: #8CC63F; --degraded: #E8B14A; --major: #EE7F58; --down: #EC6262; --info: #5AA3E8; --none: #35342F; --bar-up: var(--up); --bar-degraded: var(--degraded); --bar-down: var(--down); --bar-none: var(--none); --banner-ink: #16160F; } } :root[data-theme="dark"] { --paper: #1B1B19; --panel: #232320; --ink: #F0EFE9; --muted: #9C9B92; --rule: #35342F; --up: #8CC63F; --degraded: #E8B14A; --major: #EE7F58; --down: #EC6262; --info: #5AA3E8; --none: #35342F; --bar-up: var(--up); --bar-degraded: var(--degraded); --bar-down: var(--down); --bar-none: var(--none); --banner-ink: #16160F; } /* Native scrollbars, form controls and the canvas behind the page follow the chosen scheme rather than the OS one. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* The banner colour, keyed off the overall state on . */ html[data-state="up"] { --signal: var(--up); } html[data-state="degraded"] { --signal: var(--degraded); } html[data-state="down"] { --signal: var(--down); } html[data-state="unknown"] { --signal: var(--muted); } /* --- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); /* The reference's stack, minus the Atlassian face we don't have. Nothing is fetched — see fonts() in src/page.js. */ font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px; } .layout { max-width: 960px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 24px) 64px; } .color-secondary { color: var(--muted); } /* --- Masthead ------------------------------------------------------------ */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; } .brand-mark { flex: none; display: block; height: 26px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; } /* Only present when SITE.logo.dark is set, in which case both files are in the markup and this chooses between them. Same three-selector shape as the palette: the media query covers auto, the attribute covers an explicit choice, and :not([data-theme="light"]) lets a forced light win. */ .brand-mark--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark--light { display: none; } :root:not([data-theme="light"]) .brand-mark--dark { display: block; } } :root[data-theme="dark"] .brand-mark--light { display: none; } :root[data-theme="dark"] .brand-mark--dark { display: block; } /* --- Theme control ------------------------------------------------------- * Sits where the reference puts "Subscribe to Updates". Hidden until public/theme.js marks the document, so a reader without JavaScript is never shown a control that can't do anything — they still get the right palette from prefers-color-scheme. */ .theme { display: none; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; } html[data-theme-ui] .theme { display: inline-flex; } .theme-btn { appearance: none; -webkit-appearance: none; margin: 0; padding: 6px 8px; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--muted); line-height: 0; cursor: pointer; } .theme-btn:first-child { border-left: 0; } .theme-btn:hover { color: var(--ink); } .theme-btn[aria-pressed="true"] { background: var(--panel); color: var(--ink); } .theme-btn svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* The one solid shape: the filled half of the auto icon. */ .theme-btn svg .fill { fill: currentColor; stroke: none; } /* Labels stay in the accessibility tree; the icon carries the meaning. */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- The status banner --------------------------------------------------- * One wide block stating the whole system in a sentence. It carries the only large area of colour on the page, which is what makes the state readable from across a room. */ .page-status { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px; border-radius: 5px; background: var(--signal); color: var(--banner-ink); } .page-status .status { margin: 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em; } .last-updated { font-size: 0.8125rem; opacity: 0.85; } /* --- Components ---------------------------------------------------------- */ .components { margin-top: 30px; } .components-uptime-link { margin: 0 0 6px; text-align: right; font-size: 0.75rem; color: var(--muted); } .components-container { border: 1px solid var(--rule); border-radius: 5px; background: var(--panel); } .component { padding: 16px 18px 14px; border-top: 1px solid var(--rule); } .component:first-child, .component-group:first-child .component:first-child { border-top: 0; } .group-name { margin: 0; padding: 12px 18px 10px; border-top: 1px solid var(--rule); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .component-group:first-child .group-name { border-top: 0; } .component-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .component .name { font-size: 0.9375rem; color: var(--ink); } .component-status { flex: none; font-size: 0.8125rem; color: var(--up); } .component[data-state="degraded"] .component-status { color: var(--degraded); } .component[data-state="down"] .component-status { color: var(--down); } .component[data-state="unknown"] .component-status { color: var(--muted); } /* --- The 90-day uptime strip --------------------------------------------- */ .uptime-graphic { display: block; width: 100%; height: 34px; margin-top: 12px; } .uptime-day:hover { opacity: 0.6; } .uptime-legend { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 0.75rem; color: var(--muted); } .legend-item { flex: none; } /* Hairlines either side of the uptime figure, as in the reference. */ .legend-spacer { flex: 1 1 auto; height: 1px; background: var(--rule); } .reason { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid var(--down); font-size: 0.8125rem; color: var(--down); } /* --- Past incidents ------------------------------------------------------ */ .incidents { margin-top: 44px; } .incidents-heading { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .status-day { padding: 14px 0 18px; } .status-day .date { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: 1rem; font-weight: 600; } .status-day > p { margin: 0; font-size: 0.875rem; } .incident-container { margin-bottom: 18px; } .incident-container:last-child { margin-bottom: 0; } /* Impact is the incident's severity, chosen when it's posted — the same four levels the reference uses, plus maintenance for planned work. */ .incident-title { margin-bottom: 7px; font-size: 1rem; color: var(--degraded); } .incident-title.impact-none { color: var(--ink); } .incident-title.impact-minor { color: var(--degraded); } .incident-title.impact-major { color: var(--major); } .incident-title.impact-critical { color: var(--down); } .incident-title.impact-maintenance { color: var(--info); } .update { margin-bottom: 10px; font-size: 0.875rem; } .update:last-child { margin-bottom: 0; } .update strong { font-weight: 600; } .update small { display: inline-block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); } /* --- Announcement -------------------------------------------------------- * The one part of the page a human writes. It sits above the status banner because during an incident it is the most useful thing here — the probes below only know whether a request succeeded, not what we're doing about it. */ .notice { margin-bottom: 18px; padding: 15px 17px 16px; background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--notice); border-radius: 5px; } .notice[data-level="investigating"], .notice[data-level="identified"] { --notice: var(--major); } .notice[data-level="monitoring"] { --notice: var(--degraded); } .notice[data-level="resolved"] { --notice: var(--up); } .notice[data-level="maintenance"], .notice[data-level="info"] { --notice: var(--info); } .notice-level { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--notice); } .notice-mark { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--notice); } .notice-since { color: var(--muted); letter-spacing: 0.04em; font-weight: 400; } .notice-title { margin: 9px 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .notice-body { margin: 7px 0 0; max-width: 68ch; font-size: 0.9375rem; color: var(--muted); } .notice-log { margin: 15px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); } .notice-log li { display: flex; gap: 14px; padding: 9px 0 0; font-size: 0.8125rem; } .notice-log li:first-child { padding-top: 11px; } .notice-log .when { flex: none; /* Wide enough for a full "2026-07-28 14:52 UTC" stamp without wrapping. */ width: 13.5em; font-size: 0.6875rem; line-height: 1.75; color: var(--muted); font-variant-numeric: tabular-nums; } .notice-log p { margin: 0; color: var(--muted); } .notice-link { margin: 13px 0 0; font-size: 0.8125rem; } /* --- The admin form ------------------------------------------------------ * /admin, where incidents are written. Not linked from anywhere and behind the ADMIN_KEY secret, so it's styled for legibility on a phone at 3am rather than to match the public page. */ .admin { max-width: 720px; } .admin-back { font-size: 0.8125rem; color: var(--muted); } .admin-error { margin: 0 0 16px; padding: 10px 14px; border-radius: 5px; border: 1px solid var(--down); color: var(--down); font-size: 0.875rem; } .admin-heading { margin: 34px 0 12px; font-size: 1.125rem; } .admin-card { margin-bottom: 16px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--rule); border-radius: 5px; } .admin-card h2 { margin: 0 0 14px; font-size: 1rem; } .admin-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .admin-card-head .incident-title { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .admin-card label { display: block; margin-bottom: 12px; font-size: 0.8125rem; color: var(--muted); } .admin-card input, .admin-card select, .admin-card textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9375rem; } .admin-card textarea { resize: vertical; } /* Impact / status / time sit on one line on a laptop and stack on a phone. */ .admin-row { display: flex; flex-wrap: wrap; gap: 12px; } .admin-row label { flex: 1 1 10rem; } .admin-card button { padding: 9px 16px; border: 0; border-radius: 4px; background: var(--ink); color: var(--paper); font: inherit; font-size: 0.875rem; cursor: pointer; } .admin-hint { margin: 12px 0 0; font-size: 0.75rem; color: var(--muted); } .admin-updates { margin: 0 0 14px; padding: 0; /* No markers: the list is newest-first, so numbering it reads as a ranking. */ list-style: none; font-size: 0.875rem; } .admin-updates li { margin-bottom: 6px; } .admin-updates small { display: block; color: var(--muted); font-size: 0.75rem; } .admin-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .admin-inline input, .admin-inline select { width: auto; margin-top: 0; } .admin-inline input[name="text"] { flex: 1 1 14rem; } /* Needs to out-specify `.admin-card button`, or destructive reads as primary. */ .admin-card button.admin-delete { background: transparent; color: var(--down); padding-left: 0; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 3px; } /* --- Footer -------------------------------------------------------------- */ .page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--muted); } .links { display: inline-flex; gap: 16px; } /* --- Narrow screens ------------------------------------------------------ */ @media (max-width: 640px) { body { font-size: 14px; } .layout { padding-top: 20px; } /* Before app.js runs the timestamp is a full UTC stamp, which needs the room. Wrapping beats overflowing. */ .masthead { flex-wrap: wrap; row-gap: 10px; } .brand-mark { height: 22px; max-width: 104px; } .brand-name { min-width: 0; overflow-wrap: break-word; } /* A 13px icon in 6px of padding is a 25px target. Grow the hit area on touch screens without growing the icons. */ .theme-btn { padding: 8px 9px; } .component { padding: 14px 14px 12px; } /* Half the window fits comfortably on a phone; the rest is noise. The SVG scales rather than reflowing, so this crops it by widening the viewBox window instead — see the aspect ratio below. */ .uptime-graphic { height: 30px; } .incidents-heading { font-size: 1.3125rem; } /* A 13.5em gutter for the time is most of a phone screen. Stack instead. */ .notice-log li { display: block; padding-top: 10px; } .notice-log .when { display: block; width: auto; line-height: 1.5; } .page-footer { flex-direction: column; gap: 8px; } }