/* Palette/type matched to sitedoc.bg's own site: Onest font, emerald brand green (#10b981) as the accent/"operational" color, near-black on near-white in light mode. */ :root { --bg: #fafffd; --surface: #ffffff; --border: #e3e9e6; --text: #111917; --text-muted: #5b6663; --up: #10b981; --down: #dc2626; --maintenance: #d97706; --pending: #d1d5db; --accent: #10b981; --radius: 12px; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #0b1210; --surface: #111917; --border: #24312c; --text: #eafff6; --text-muted: #8ba39a; --up: #34d399; --down: #ef4444; --maintenance: #f59e0b; --pending: #2f3b36; --accent: #34d399; } } /* Manual override via the toggle button (app.js sets data-theme on and remembers it in localStorage). Higher specificity than the plain :root rules above, so it wins over prefers-color-scheme either way. Absence of the attribute just falls back to the OS setting as before. */ :root[data-theme="light"] { --bg: #fafffd; --surface: #ffffff; --border: #e3e9e6; --text: #111917; --text-muted: #5b6663; --up: #10b981; --down: #dc2626; --maintenance: #d97706; --pending: #d1d5db; --accent: #10b981; } :root[data-theme="dark"] { --bg: #0b1210; --surface: #111917; --border: #24312c; --text: #eafff6; --text-muted: #8ba39a; --up: #34d399; --down: #ef4444; --maintenance: #f59e0b; --pending: #2f3b36; --accent: #34d399; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .page { max-width: 760px; margin: 0 auto; padding: 48px 20px 32px; } .brand { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .brand__id { display: flex; align-items: center; gap: 10px; } .brand__logo { height: 28px; width: auto; } .brand__name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .brand__right { display: flex; align-items: center; gap: 14px; } .brand__tagline { color: var(--text-muted); font-size: 14px; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--text); } .banner { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: var(--radius); font-size: 17px; font-weight: 600; margin-bottom: 32px; background: color-mix(in srgb, var(--up) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--up) 30%, var(--border)); color: var(--text); } .banner--down { background: color-mix(in srgb, var(--down) 12%, var(--surface)); border-color: color-mix(in srgb, var(--down) 30%, var(--border)); } .banner--maintenance { background: color-mix(in srgb, var(--maintenance) 12%, var(--surface)); border-color: color-mix(in srgb, var(--maintenance) 30%, var(--border)); } .banner__icon { width: 12px; height: 12px; border-radius: 50%; background: var(--up); flex-shrink: 0; } .banner--down .banner__icon { background: var(--down); } .banner--maintenance .banner__icon { background: var(--maintenance); } .section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 12px; } .incidents { margin-bottom: 32px; } .incident-list, .monitor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .incident-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .incident-item__title { font-weight: 600; margin-bottom: 4px; } .incident-item__meta { font-size: 12px; color: var(--text-muted); } .incident-item__content { margin-top: 8px; font-size: 14px; color: var(--text-muted); } .monitor-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .monitor-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .monitor-item__name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pending); flex-shrink: 0; } .status-dot--up { background: var(--up); } .status-dot--down { background: var(--down); } .status-dot--maintenance { background: var(--maintenance); } .monitor-item__uptime { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .heatmap { display: flex; align-items: flex-end; gap: 2px; height: 34px; /* 90 bars at 2px min-width + 2px gaps need ~358px minimum — wider than a phone screen's card. Without this, they overflow the card instead of shrinking (flex min-width is a hard floor, not a suggestion). */ overflow: hidden; } .heatmap__bar { flex: 1 1 0; min-width: 1px; height: 100%; border-radius: 2px; background: var(--pending); cursor: pointer; transition: opacity 0.1s ease; } @media (max-width: 480px) { .heatmap { gap: 1px; } } .heatmap__bar:hover { opacity: 0.7; } .heatmap__bar--up { background: var(--up); } .heatmap__bar--down { background: var(--down); } .heatmap__bar--maintenance { background: var(--maintenance); } .heatmap__bar--partial { background: linear-gradient(var(--maintenance), var(--maintenance)); } .heatmap__bar--empty { background: var(--pending); opacity: 0.4; } .heatmap__labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-muted); } .footer { margin-top: 40px; text-align: center; font-size: 12px; color: var(--text-muted); } .tooltip { position: fixed; z-index: 10; background: var(--text); color: var(--bg); font-size: 12px; padding: 6px 10px; border-radius: 6px; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; } .empty-state { color: var(--text-muted); font-size: 14px; padding: 20px; text-align: center; }