/* ===== Load Inter (no Custom Header HTML on this plan, so @import must live here) =====
NOTE: @import must be the very first rule(s) in the stylesheet, before anything else,
or the browser will ignore it. If your Statyspage plan's CSS sanitizer strips remote
@import (some do for CSP reasons), delete this line and uncomment the @font-face block
further down instead. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ---- Fallback: uncomment this block (and remove the @import above) if Inter isn't
rendering after publish. Self-hosts the font instead of relying on @import. ---- */
/*
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/
/* ===== OEC / NitroUI (OUI) design tokens ===== */
:root {
--oui-brand: #003c71;
--oui-brand-hover: #002053;
--oui-brand-tint: #e3edf7;
--oui-gray-900: #202020;
--oui-gray-700: #4d4e53;
--oui-gray-600: #656565;
--oui-gray-400: #949494;
--oui-gray-300: #c7c7c7;
--oui-gray-200: #dcdcdc;
--oui-gray-50: #f5f5f5;
--oui-success: #3a6f3b;
--oui-warning: #bd5f15;
--oui-error: #c23f2e;
--oui-error-hover: #a62113;
--oui-info: #1f6fa8;
--oui-focus: #5fa9d9;
}
/* Typography */
body,
.status-index,
.incident-title,
.updates {
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--oui-gray-700);
}
h1, h2, h3, h4,
.incident-title.font-large {
color: var(--oui-gray-900);
font-weight: 700;
}
/* Masthead / nav */
.masthead .updates-dropdown-container .show-updates-dropdown {
background-color: #003c71;
color: #ffffff;
border-radius: 0.25rem;
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
/* Links */
a,
.history-footer-link {
color: var(--oui-brand);
}
a:hover,
.history-footer-link:hover {
color: var(--oui-brand-hover);
}
/* Borders / dividers */
.component-container.border-color,
.border-color {
border-color: var(--oui-gray-200) !important;
}
/* Focus visibility (WCAG 2.2 AA, matches OUI a11y-focus-indicators) */
a:focus-visible,
button:focus-visible,
.show-updates-dropdown:focus-visible {
outline: 2px solid var(--oui-focus);
outline-offset: 2px;
}
/* Subtle background for grouped components */
.component-container.is-group {
background-color: var(--oui-gray-50);
border-radius: 0.25rem;
}
/* Footer — styling Statuspage's existing default footer (no Custom Footer HTML on this
plan, so we can't inject new markup like OFooter's actual content/links, only restyle
what's already rendered: the "Incident History" link and "Powered by" line). */
.page-footer.border-color {
border-color: var(--oui-gray-200) !important;
font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--oui-gray-600);
}
.page-footer .history-footer-link,
.page-footer .history-footer-link:hover {
color: var(--oui-brand);
}
.page-footer .powered-by,
.page-footer .powered-by a {
color: var(--oui-gray-400);
}