/* ========================================================================== Public status page (/status) -------------------------------------------------------------------------- Enterprise trust surface. Restrained, technical, legible. Uses the existing EVE design tokens (--bg-*, --text-*, --surface-*, --accent-*) so it inherits light/dark theming and brand colour without redefining any of it. Layout rules that matter: * Nothing may overflow horizontally at 320px. The 90-day bar strip is the one genuinely wide element, so it scrolls inside its own container rather than widening the page. * Component cards, not a table. A desktop table of eight components with six columns each is unreadable on a phone, and the "transform the table" trick produces worse output than simply designing the card first. * Status is never communicated by colour alone: every state carries a text label and a distinct dot, for accessibility and for print. ========================================================================== */ .st-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; } /* ---------- State colours ------------------------------------------------ */ .st-wrap { --st-ok: var(--accent-safe, #1f9d55); --st-warn: var(--accent-warning, #d97706); --st-crit: var(--accent-alert, #dc2626); --st-maint: #3b82f6; --st-unknown: #6b7280; /* Visible enough to read as "this day was not measured", muted enough that a sparse history never looks like an outage. */ --st-nodata: color-mix(in srgb, var(--st-unknown) 45%, transparent); } /* ---------- Page head ---------------------------------------------------- */ .st-pagehead { margin: 0 0 24px; } .st-pagehead h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--text-primary); } .st-pagehead p { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 62ch; line-height: 1.55; } /* ---------- Hero --------------------------------------------------------- */ .st-hero { border: 1px solid var(--surface-1-border); border-left: 4px solid var(--st-unknown); border-radius: 6px; background: var(--surface-1); padding: 22px 24px; margin-bottom: 22px; } .st-hero--ok { border-left-color: var(--st-ok); } .st-hero--warn { border-left-color: var(--st-warn); } .st-hero--crit { border-left-color: var(--st-crit); } .st-hero--maint { border-left-color: var(--st-maint); } .st-hero--unknown { border-left-color: var(--st-unknown); } .st-hero-main { display: flex; align-items: flex-start; gap: 14px; } .st-hero-title { font-size: clamp(18px, 3.2vw, 24px); font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--text-primary); } .st-hero-detail { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; } .st-hero-meta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--surface-1-border); color: var(--text-secondary); font-size: 12.5px; } /* ---------- Status dot --------------------------------------------------- */ .st-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: var(--st-unknown); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-unknown) 20%, transparent); } .st-dot--ok { background: var(--st-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ok) 20%, transparent); } .st-dot--warn { background: var(--st-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-warn) 20%, transparent); } .st-dot--crit { background: var(--st-crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-crit) 20%, transparent); } .st-dot--maint { background: var(--st-maint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-maint) 20%, transparent); } /* ---------- Metric strip ------------------------------------------------- */ .st-metrics { display: grid; gap: 1px; margin-bottom: 30px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); background: var(--surface-1-border); border: 1px solid var(--surface-1-border); border-radius: 6px; overflow: hidden; } .st-metric { background: var(--surface-1); padding: 16px 18px; min-width: 0; } .st-metric-value { font-size: clamp(20px, 3.4vw, 26px); font-weight: 600; line-height: 1.1; color: var(--text-primary); overflow-wrap: anywhere; } .st-metric-label { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); } .st-metric-sub { margin-top: 3px; font-size: 12px; color: var(--text-secondary); } /* ---------- Sections ----------------------------------------------------- */ .st-section { margin-bottom: 34px; } .st-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .st-section-title { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 10px; } .st-section-head .st-section-title { margin: 0; } .st-subtitle { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 22px 0 8px; } .st-section-lede { margin: 0 0 14px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; max-width: 72ch; } .st-section-foot { margin: 12px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; } .st-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; padding: 4px 10px; border-radius: 3px; white-space: nowrap; border: 1px solid currentColor; } .st-badge--ok { color: var(--st-ok); } .st-badge--crit { color: var(--st-crit); } .st-badge--unknown { color: var(--st-unknown); } .st-empty { margin: 0; padding: 16px 18px; border-radius: 6px; border: 1px dashed var(--surface-1-border); color: var(--text-secondary); font-size: 13.5px; } .st-empty--ok { border-style: solid; border-left: 3px solid var(--st-ok); } /* ---------- Governance chain --------------------------------------------- */ .st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--surface-1-border); border: 1px solid var(--surface-1-border); border-radius: 6px; overflow: hidden; } .st-step { background: var(--surface-1); padding: 12px 16px; display: grid; grid-template-columns: 18px 1fr; gap: 4px 10px; align-items: start; } .st-step-mark { grid-row: 1 / span 2; width: 16px; height: 16px; border-radius: 50%; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--st-unknown); } .st-step--pass .st-step-mark { background: var(--st-ok); } .st-step--pass .st-step-mark::after { content: "\2713"; } .st-step--fail .st-step-mark { background: var(--st-crit); } .st-step--fail .st-step-mark::after { content: "\2715"; } .st-step--skipped .st-step-mark { background: var(--st-unknown); } .st-step--skipped .st-step-mark::after { content: "\2013"; } .st-step-label { font-size: 14px; font-weight: 500; color: var(--text-primary); } .st-step-detail { grid-column: 2; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; } /* ---------- Components --------------------------------------------------- */ .st-comp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .st-comp { border: 1px solid var(--surface-1-border); border-radius: 6px; background: var(--surface-1); padding: 16px 18px; min-width: 0; } .st-comp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .st-comp-id { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .st-comp-name { font-size: 15px; font-weight: 600; margin: 0; color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; } .st-comp-state { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 3px; white-space: nowrap; border: 1px solid currentColor; color: var(--st-unknown); } .st-comp-state--ok { color: var(--st-ok); } .st-comp-state--warn { color: var(--st-warn); } .st-comp-state--crit { color: var(--st-crit); } .st-comp-state--maint { color: var(--st-maint); } .st-comp-desc { margin: 0 0 6px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; } .st-comp-detail { margin: 0 0 12px; font-size: 12.5px; color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; } /* 90-day strip: scrolls inside itself so it can never widen the page. The strip carries its own inset background so a mostly-"no data" history reads as an empty *measurement window* rather than as a broken element — which is what it looked like when the no-data bars were near-transparent against the card. */ .st-bars { display: flex; gap: 1px; align-items: stretch; height: 26px; overflow-x: auto; overflow-y: hidden; padding: 3px; margin-bottom: 10px; border-radius: 3px; background: color-mix(in srgb, var(--text-secondary) 8%, transparent); scrollbar-width: thin; } .st-bar { flex: 1 0 3px; min-width: 3px; border-radius: 1px; background: var(--st-nodata); } .st-bar--up { background: var(--st-ok); } .st-bar--partial { background: var(--st-warn); } .st-bar--degraded { background: var(--st-warn); } .st-bar--down { background: var(--st-crit); } .st-bar--no_data { background: var(--st-nodata); } .st-bars-caption { margin: -4px 0 10px; font-size: 11px; color: var(--text-secondary); letter-spacing: 0.02em; } .st-comp-foot { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--surface-1-border); } .st-comp-uptime { font-size: 15px; font-weight: 600; color: var(--text-primary); } .st-comp-period { font-size: 12px; color: var(--text-secondary); } .st-comp-meta { font-size: 12px; color: var(--text-secondary); margin-left: auto; } /* ---------- Incidents & maintenance -------------------------------------- */ .st-incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .st-incident, .st-maint { border: 1px solid var(--surface-1-border); border-left-width: 3px; border-radius: 4px; background: var(--surface-1); padding: 12px 16px; } .st-incident--crit { border-left-color: var(--st-crit); } .st-incident--ok { border-left-color: var(--st-ok); } .st-maint--scheduled { border-left-color: var(--st-maint); } .st-maint--in_progress { border-left-color: var(--st-maint); } .st-maint--completed { border-left-color: var(--st-unknown); } .st-incident-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .st-incident-title { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; } .st-incident-status { font-size: 12px; color: var(--text-secondary); margin-left: auto; } .st-incident-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; overflow-wrap: anywhere; } /* Incident detail. The meta line used to carry eight dot-separated facts in a single 211-character run; the two durations that matter were buried in the middle of it. Timeline and facts are separated so the numbers are findable. */ .st-inc-timeline { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .st-inc-step b { font-weight: 600; color: var(--text-primary); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; } .st-inc-facts { margin: 10px 0 0; display: grid; gap: 8px 22px; grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); } .st-inc-fact dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); font-weight: 600; } .st-inc-fact dd { margin: 2px 0 0; font-size: 13.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .st-sev { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid currentColor; color: var(--st-unknown); white-space: nowrap; } .st-sev--critical, .st-sev--high, .st-sev--major { color: var(--st-crit); } .st-sev--medium, .st-sev--minor { color: var(--st-warn); } .st-sev--low { color: var(--st-unknown); } .st-sev--maint { color: var(--st-maint); } /* ---------- SLA ---------------------------------------------------------- */ .st-sla-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: start; } .st-sla-fig { border: 1px solid var(--surface-1-border); border-radius: 6px; background: var(--surface-1); padding: 16px 18px; } .st-sla-table { border-collapse: collapse; width: 100%; border: 1px solid var(--surface-1-border); border-radius: 6px; background: var(--surface-1); font-size: 13px; } .st-sla-table th, .st-sla-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--surface-1-border); color: var(--text-primary); } .st-sla-table thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); } .st-sla-table tbody tr:last-child th, .st-sla-table tbody tr:last-child td { border-bottom: 0; } /* ---------- API list ----------------------------------------------------- */ .st-api-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .st-api-list li { font-size: 13px; color: var(--text-secondary); line-height: 1.6; padding: 9px 14px; border-radius: 4px; border: 1px solid var(--surface-1-border); background: var(--surface-1); overflow-wrap: anywhere; } .st-api-list code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-primary); } /* ---------- Refresh affordance ------------------------------------------- */ .st-refresh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; font-size: 12.5px; color: var(--text-secondary); } .st-refresh button { font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 12px; border-radius: 4px; border: 1px solid var(--surface-1-border); background: var(--surface-1); color: var(--text-primary); } .st-refresh button:hover { border-color: var(--text-secondary); } .st-refresh button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .st-refresh button[aria-busy="true"] { opacity: 0.6; cursor: progress; } /* Visible keyboard focus everywhere on this page. */ .st-wrap a:focus-visible, .st-wrap button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 2px; } /* ---------- Narrow viewports --------------------------------------------- */ @media (max-width: 640px) { .st-hero { padding: 18px 16px; } .st-metric { padding: 14px 15px; } .st-comp { padding: 14px 15px; } .st-comp-head { flex-direction: column; align-items: flex-start; gap: 6px; } .st-comp-meta { margin-left: 0; } .st-incident-status { margin-left: 0; } .st-step { grid-template-columns: 16px 1fr; padding: 11px 14px; } } @media (prefers-reduced-motion: reduce) { .st-wrap * { transition: none !important; animation: none !important; } } /* ---------- Audit-period selector ---------------------------------------- */ /* Links, not a