:root { --bg: #f7f8fa; --surface: #ffffff; --surface-muted: #f1f3f6; --border: #e5e7eb; --text: #0f172a; --text-muted: #64748b; --accent: #0f172a; --status-operational: #16a34a; --status-operational-bg: #dcfce7; --status-degraded: #d97706; --status-degraded-bg: #fef3c7; --status-partial: #ea580c; --status-partial-bg: #ffedd5; --status-major: #dc2626; --status-major-bg: #fee2e2; --status-unknown: #64748b; --status-unknown-bg: #e2e8f0; --status-not-monitored: #94a3b8; --status-not-monitored-bg: #e5e7eb; --radius: 10px; --radius-sm: 6px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.06); --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* Dark theme palette — applied either when the OS prefers dark and the user has not overridden, or when the user has explicitly chosen dark via the masthead toggle (which sets data-theme on ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1020; --surface: #111827; --surface-muted: #0f172a; --border: #1f2937; --text: #e2e8f0; --text-muted: #94a3b8; --accent: #e2e8f0; --status-operational-bg: rgba(22, 163, 74, 0.15); --status-degraded-bg: rgba(217, 119, 6, 0.18); --status-partial-bg: rgba(234, 88, 12, 0.18); --status-major-bg: rgba(220, 38, 38, 0.2); --status-unknown-bg: rgba(100, 116, 139, 0.2); --status-not-monitored: #475569; --status-not-monitored-bg: rgba(148, 163, 184, 0.16); } } :root[data-theme="dark"] { --bg: #0b1020; --surface: #111827; --surface-muted: #0f172a; --border: #1f2937; --text: #e2e8f0; --text-muted: #94a3b8; --accent: #e2e8f0; --status-operational-bg: rgba(22, 163, 74, 0.15); --status-degraded-bg: rgba(217, 119, 6, 0.18); --status-partial-bg: rgba(234, 88, 12, 0.18); --status-major-bg: rgba(220, 38, 38, 0.2); --status-unknown-bg: rgba(100, 116, 139, 0.2); --status-not-monitored: #475569; --status-not-monitored-bg: rgba(148, 163, 184, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .container { max-width: 880px; margin: 0 auto; padding: 0 24px; } /* Masthead — fixed dark in both color schemes so the wordmark stays legible */ .masthead { background: #0f172a; color: #f8fafc; border-bottom: 1px solid #1f2937; } .masthead__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; } .brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .brand__logo { display: block; height: 28px; width: auto; } .masthead__nav { display: flex; gap: 18px; font-size: 14px; } .masthead__nav a { color: rgba(248, 250, 252, 0.75); text-decoration: none; line-height: 32px; } .masthead__nav a:hover { color: #f8fafc; } /* Theme toggle (sun/moon). Lives in the masthead nav and flips `data-theme` on via app.js, persisting the choice. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid rgba(248, 250, 252, 0.18); background: transparent; color: rgba(248, 250, 252, 0.75); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: #f8fafc; background: rgba(248, 250, 252, 0.08); border-color: rgba(248, 250, 252, 0.32); } .theme-toggle:focus-visible { outline: 2px solid rgba(248, 250, 252, 0.5); outline-offset: 2px; } .theme-toggle__icon { display: block; } /* Default: assume light mode → show moon (clicking switches to dark) */ .theme-toggle__icon--sun { display: none; } /* Dark mode (system or explicit): show sun (clicking switches to light) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; } :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; } } :root[data-theme="dark"] .theme-toggle__icon--sun { display: block; } :root[data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* Explicit light override beats the system pref */ :root[data-theme="light"] .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--moon { display: block; } main.container { padding: 24px; } /* Banner */ .banner { border-radius: var(--radius); padding: 28px 28px 24px; margin-bottom: 40px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: background 0.2s ease, border-color 0.2s ease; } .banner__content { display: flex; align-items: center; gap: 14px; } .banner__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .banner__meta { margin: 14px 0 0 28px; font-size: 13px; color: var(--text-muted); } .banner__dot { display: inline-block; width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; } .banner--none { background: var(--status-operational-bg); border-color: rgba(22, 163, 74, 0.2); } .banner--none .banner__dot { background: var(--status-operational); } .banner--minor { background: var(--status-degraded-bg); border-color: rgba(217, 119, 6, 0.25); } .banner--minor .banner__dot { background: var(--status-degraded); } .banner--major { background: var(--status-partial-bg); border-color: rgba(234, 88, 12, 0.3); } .banner--major .banner__dot { background: var(--status-partial); } .banner--critical { background: var(--status-major-bg); border-color: rgba(220, 38, 38, 0.3); } .banner--critical .banner__dot { background: var(--status-major); } .banner--unknown .banner__dot { background: var(--status-unknown); } /* Sections */ .section__heading { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; margin: 0 0 12px; } .section__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .section__header .section__heading { margin: 0; } /* Window toggle */ .window-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface); } .window-toggle button { appearance: none; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .window-toggle button:hover { color: var(--text); } .window-toggle button[aria-selected="true"] { background: var(--text); color: var(--surface); } /* Components list */ .components { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 40px; } .components__group { border-top: 1px solid var(--border); } .components__group:first-child { border-top: none; } .components__group-title { margin: 0; padding: 14px 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); background: var(--surface-muted); } .component { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); } .component:first-of-type { border-top: none; } .component__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .component__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .component__name { font-weight: 500; letter-spacing: -0.005em; } .component__description { font-size: 13px; color: var(--text-muted); } .component__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); } .component__range { font-variant-numeric: tabular-nums; } .component__uptime { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .component__uptime--muted { color: var(--text-muted); font-weight: 400; } /* Daily-uptime strip */ .strip { display: flex; gap: 2px; height: 30px; align-items: stretch; } .strip--loading, .strip--empty { background: var(--surface-muted); border-radius: var(--radius-sm); animation: pulse 1.4s ease-in-out infinite; } .strip__cell { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--status-not-monitored-bg); transition: transform 0.12s ease, filter 0.12s ease; cursor: default; } .strip__cell:hover, .strip__cell:focus-visible { transform: scaleY(1.08); filter: brightness(1.05); outline: none; } .strip__cell--operational { background: var(--status-operational); } .strip__cell--degraded_performance { background: var(--status-degraded); } .strip__cell--partial_outage { background: var(--status-partial); } .strip__cell--major_outage { background: var(--status-major); } .strip__cell--under_maintenance { background: var(--status-unknown); } .strip__cell--not_monitored { background: var(--status-not-monitored-bg); border: 1px dashed var(--status-not-monitored); box-sizing: border-box; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .components__placeholder { margin: 0; padding: 24px 20px; color: var(--text-muted); font-size: 14px; } /* Status pills */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; white-space: nowrap; } .pill::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.7; } .pill--operational { color: var(--status-operational); background: var(--status-operational-bg); } .pill--degraded_performance { color: var(--status-degraded); background: var(--status-degraded-bg); } .pill--partial_outage { color: var(--status-partial); background: var(--status-partial-bg); } .pill--major_outage { color: var(--status-major); background: var(--status-major-bg); } .pill--under_maintenance { color: var(--status-unknown); background: var(--status-unknown-bg); } .pill--not_monitored { color: var(--status-not-monitored); background: var(--status-not-monitored-bg); } /* Legend */ .legend { margin-bottom: 32px; } .legend__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 14px; color: var(--text-muted); } .legend__list li { display: flex; align-items: center; gap: 12px; } @media (min-width: 640px) { .legend__list { grid-template-columns: 1fr 1fr; } } /* Footer */ .footer { border-top: 1px solid var(--border); background: var(--surface); padding: 32px 0; } .footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--text-muted); } .footer p { margin: 0; } .footer__brand { display: flex; flex-direction: column; gap: 8px; } .footer__logo-link { display: inline-flex; } .footer__logo { display: block; height: 19px; width: auto; } /* Footer logo: dark wordmark on light surfaces, light wordmark on dark. Mirrors the same-mode logic the masthead toggle uses. */ .footer__logo--light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer__logo--dark { display: none; } :root:not([data-theme="light"]) .footer__logo--light { display: block; } } :root[data-theme="dark"] .footer__logo--dark { display: none; } :root[data-theme="dark"] .footer__logo--light { display: block; } :root[data-theme="light"] .footer__logo--dark { display: block; } :root[data-theme="light"] .footer__logo--light { display: none; } .footer__copy { font-size: 13px; color: var(--text-muted); } .footer__links { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; text-align: right; } .footer__links a { color: var(--text); text-decoration: none; } .footer__links a:hover { text-decoration: underline; } @media (max-width: 520px) { .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; } .footer__links { align-items: flex-start; text-align: left; } } .muted { color: var(--text-muted); } /* Tooltip */ .tooltip { position: absolute; top: 0; left: 0; pointer-events: none; background: #0f172a; color: #f8fafc; padding: 6px 10px; font-size: 12px; border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; white-space: nowrap; z-index: 50; } .tooltip[aria-hidden="false"] { opacity: 1; transform: translateY(0); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tooltip { background: #f8fafc; color: #0f172a; } } :root[data-theme="dark"] .tooltip { background: #f8fafc; color: #0f172a; }