/* ACMS public status page — tokens lifted from the ACMS Customer Portal design system (colors_and_type.css). Only the subset this page uses is reproduced here so the page stays a single self-contained deployable with no cross-repo asset dependency. */ /* Museo Sans 500 is the only weight the page draws; 700 is synthesised from it, as the brand has no 700 file. font-display: swap keeps first paint off the font's critical path. */ @font-face { font-family: "Museo Sans"; font-weight: 500; font-style: normal; src: url("fonts/Museo-Sans-500.otf") format("opentype"); font-display: swap; } :root { --abalta-blue: #1B3281; --abalta-slate: #747E8E; --abalta-slate-700: #676F7E; --bg-app: #F1F2F4; --bg-surface: #FFFFFF; --border-soft: rgba(116, 126, 142, 0.20); --border-row: rgba(116, 126, 142, 0.12); --bg-foot: rgba(116, 126, 142, 0.06); --shadow-card: 0 1px 2px -1px rgba(16, 24, 40, 0.10), 0 1px 3px 0 rgba(16, 24, 40, 0.10); --radius-sm: 4px; --radius-pill: 999px; --font-sans: "Museo Sans", "Mulish", "Inter", system-ui, -apple-system, sans-serif; --fw-regular: 500; --fw-bold: 700; } /* Status tokens. Each element carrying data-status re-declares the triple, so any descendant badge/dot picks up the right colour without a rule per state. */ [data-status="Operational"] { --s-color: #88C76F; --s-tint: rgba(136, 199, 111, 0.14); --s-text: #3F7A2C; } [data-status="Degraded"] { --s-color: #F58C58; --s-tint: rgba(245, 140, 88, 0.14); --s-text: #B85A20; } [data-status="Outage"] { --s-color: #F27066; --s-tint: rgba(242, 112, 102, 0.14); --s-text: #B4322A; } [data-status="Unknown"] { --s-color: #747E8E; --s-tint: rgba(116, 126, 142, 0.14); --s-text: #676F7E; } [data-status="Checking"] { --s-color: #C7CBD2; --s-tint: rgba(116, 126, 142, 0.08); --s-text: #747E8E; } [data-status="Scheduled"] { --s-color: #4BA5DC; --s-tint: rgba(75, 165, 220, 0.14); --s-text: #1F6B96; } [data-status="In Progress"] { --s-color: #20B9A1; --s-tint: rgba(32, 185, 161, 0.14); --s-text: #12796A; } * { box-sizing: border-box; } /* Class-level `display` would otherwise beat the UA stylesheet's [hidden] rule. */ [hidden] { display: none !important; } /* One shell serves the environment picker and the per-environment status page. The script sets data-view from the URL, so only one is ever painted. */ :root[data-view="picker"] .view-status, :root[data-view="status"] .view-picker { display: none !important; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--bg-app); font-family: var(--font-sans); font-weight: var(--fw-regular); color: var(--abalta-slate); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .page { padding: 32px 32px 64px; display: flex; justify-content: center; } .column { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 24px; } /* ---------- Card ---------- */ .card { background: var(--bg-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border-soft); } .card-head h1, .card-head h2 { margin: 0; font-weight: var(--fw-bold); font-size: 16px; line-height: 1.3; color: var(--abalta-blue); } .card-head-note { font-size: 12px; color: var(--abalta-slate); white-space: nowrap; } .card-foot { padding: 12px 16px; background: var(--bg-foot); } .card-foot p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--abalta-slate); text-wrap: pretty; } /* ---------- Summary ---------- */ .summary { display: flex; align-items: flex-start; gap: 16px; padding: 24px; } .summary-dot { flex: none; width: 16px; height: 16px; margin-top: 5px; border-radius: var(--radius-pill); background: var(--s-color); } .summary-text { flex: 1; display: flex; flex-direction: column; gap: 6px; } .eyebrow { font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--abalta-slate); } .summary-text h1 { margin: 0; font-weight: var(--fw-bold); font-size: 24px; line-height: 1.2; color: var(--abalta-blue); } .summary-text p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--abalta-slate); text-wrap: pretty; } .summary-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 4px; } .meta-label { font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--abalta-slate); } .meta-value { font-size: 12px; color: var(--abalta-slate-700); white-space: nowrap; } /* ---------- AWS advisory ---------- */ .advisory { display: flex; align-items: flex-start; gap: 16px; padding: 18px 24px; border-left: 3px solid #4BA5DC; } .advisory-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: var(--radius-pill); background: #4BA5DC; } .advisory-text { display: flex; flex-direction: column; gap: 4px; } .advisory-text h2 { margin: 0; font-weight: var(--fw-bold); font-size: 14px; line-height: 1.4; color: var(--abalta-blue); } .advisory-text p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--abalta-slate); text-wrap: pretty; } .advisory-meta { color: var(--abalta-slate-700); } /* ---------- Rows ---------- */ .rows { margin: 0; padding: 0; list-style: none; } .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 16px; border-bottom: 1px solid var(--border-row); } .row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .row-name { font-weight: var(--fw-bold); font-size: 14px; line-height: 1.4; color: var(--abalta-blue); } .row-scope { font-size: 12px; line-height: 1.45; color: var(--abalta-slate); } .row-message { margin-top: 3px; padding-left: 8px; border-left: 2px solid var(--s-color); font-size: 12px; line-height: 1.45; color: var(--s-text); text-wrap: pretty; } .badge { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: var(--radius-pill); background: var(--s-tint); } .badge-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--s-color); } .badge-label { font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.01em; color: var(--s-text); white-space: nowrap; } /* ---------- Maintenance ---------- */ .row.maintenance { align-items: flex-start; justify-content: flex-start; } .row.maintenance .badge { margin-top: 2px; } .row.maintenance .row-text { flex: 1; gap: 4px; } .empty { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--abalta-slate); } /* ---------- Footer ---------- */ .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; font-size: 12px; line-height: 1.45; color: var(--abalta-slate); } .foot-right { display: flex; align-items: center; gap: 6px; } /* Which environment this page is reporting on. Deliberately quiet and last: confirmation for someone checking they are on the right page, not a heading. */ .served-for { margin: -8px 0 0; padding: 0 4px; font-size: 11px; line-height: 1.45; color: var(--abalta-slate); } .served-for code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--abalta-slate-700); } .foot a { color: var(--abalta-blue); text-decoration: none; } .foot a:hover { text-decoration: underline; } /* ---------- Environment picker ---------- */ .row-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 16px; border-bottom: 1px solid var(--border-row); text-decoration: none; transition: background 120ms ease-out; } .row-link:hover { background: var(--bg-row-hover, rgba(27, 50, 129, 0.04)); } .row-link .row-name { color: var(--abalta-blue); } .row-chevron { flex: none; color: var(--abalta-slate); font-size: 16px; line-height: 1; } /* ---------- Narrow viewports ---------- */ @media (max-width: 640px) { .page { padding: 16px 16px 40px; } .column { gap: 16px; } .summary { flex-wrap: wrap; padding: 20px; } .summary-text { flex-basis: calc(100% - 32px); } .summary-meta { align-items: flex-start; width: 100%; padding-top: 12px; } .row, .row.maintenance { flex-direction: column; align-items: flex-start; gap: 10px; } .foot { flex-direction: column; align-items: flex-start; gap: 4px; } }