@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Base styling */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #F7F8FC; /* Aircall canvas (matches Statuspage admin "Body background") */
color: #333333; /* Dark gray text */
}
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, td, th, label,
button, input, select, textarea,
.cpt-button, .flat-button, .subscribe-btn,
.show-updates-dropdown, .updates-dropdown-section,
.subscribe-text-full, .subscribe-text-short,
.modal, .modal-header, .modal-body, .modal-footer,
.incident-title, .update-title, .actual-title,
.component-status, .component-container,
.layout-content, .container, .footer, .powered-by,
.color-secondary, .color-primary,
.font-regular, .font-small, .font-large, .font-largest,
p.color-secondary, p.font-regular,
p.color-secondary.font-regular {
font-family: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif !important;
}
/* Exception: leave .fa / FontAwesome icon classes on FontAwesome */
.fa, [class^="fa-"], [class*=" fa-"] {
font-family: 'FontAwesome' !important;
}
/* Header */
.statuspage-header {
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
padding: 16px 24px;
}
.statuspage-header .logo img {
max-height: 36px;
}
/* Components & incidents styling */
.scheduled-maintenances-container, .component-container, .unresolved-incidents, .components-status, .incident-container {
border-radius: 10px;
background-color: #F4F6F9; /* Light gray background */
border: 1px solid #e5e7eb;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* Component status text */
.component-status {
font-weight: 500;
color: #4BB796; /* Primary Green */
}
/* Incident title and updates */
.incident-title, .update-title {
font-weight: 600;
color: #333333; /* Dark gray for text */
}
/* Incident message content */
.update-body {
font-size: 15px;
color: #4b5563; /* Gray for better readability */
}
/* Smaller timestamps */
.font-small,small {
font-size: 14px;
color: #6B7280;
}
/* Footer */
.footer {
background-color: #ffffff;
color: #6b7280;
text-align: center;
font-size: 14px;
padding: 20px;
border-top: 1px solid #e5e7eb;
}
/* Links */
a {
color: #4BB796; /* Aircall Primary Green */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Page Title (Headings) */
h1, h2, h3 {
font-weight: 600;
color: #111827; /* Darker gray */
}
/* Status summary bar */
.components-status {
background-color: #ecfdf5; /* Very light green background */
color: #065f46; /* Dark green for contrast */
font-weight: 500;
}
/* Miscellaneous spacing cleanup */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
/* "About This Site" section — keep it discrete. */
.color-secondary {
font-size: 13px;
color: #6B7280;
line-height: 1.5;
}
/* =====================================================================
Logo — replicate the aircall.io header brand logo
---------------------------------------------------------------------
SVG path data extracted directly from aircall.io's React-rendered
header (viewBox 0 0 140 40). aircall.io's CSS overrides the SVG's
inline #00BD82 to render the icon as #002620 (deep forest green),
so we use that color here to match the live page exactly.
Wordmark fill: #012635 (Aircall brand ink).
===================================================================== */
.logo-container img,
.statuspage-header .logo img {
content: url("data:image/svg+xml;utf8,") !important;
width: auto !important;
height: 42px !important;
max-height: 42px !important;
}
/* =====================================================================
"Subscribe to Updates" header button
---------------------------------------------------------------------
The actual top-right header button on status.aircall.com is
— confirmed via DOM inspection.
.cpt-button / .subscribe-btn are different elements (modal subscribe
inputs on incident detail pages), so we target the correct selector
here.
Restyled to match aircall.io's top-right "GET FREE ACCESS" CTA exactly:
bg #216358 (deep forest green)
color #F7F6F0 (cream)
radius 8px (slightly rounded — NOT pill)
padding 12px 16px
font-size 12px, weight 600, UPPERCASE
Hover deepens to #002620 (the very dark forest used elsewhere in the
aircall.io header palette).
===================================================================== */
a.show-updates-dropdown,
.show-updates-dropdown {
background-color: #216358 !important;
color: #F7F6F0 !important;
border: 1px solid #216358 !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
box-shadow: none !important;
text-decoration: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.show-updates-dropdown:hover,
.show-updates-dropdown:hover {
background-color: #002620 !important;
border-color: #002620 !important;
color: #F7F6F0 !important;
text-decoration: none !important;
}
/* Inherit the button text color into the inner labels too,
since Statuspage hardcodes color on those spans. */
.show-updates-dropdown .subscribe-text-full,
.show-updates-dropdown .subscribe-text-short {
color: #F7F6F0 !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
}
/* Keep the modal-subscribe buttons (.cpt-button / .flat-button) on
their default Statuspage styling — they're separate components and
don't need the forest-green CTA treatment. */
/* =====================================================================
Rename "About This Site" → "Aircall Status Page"
---------------------------------------------------------------------
Statuspage hardcodes the heading text in HTML, so we use a CSS-only
trick: target the that's followed by a .color-secondary paragraph
(i.e. the about section heading), hide its text via font-size: 0, and
inject the new text via the ::before pseudo-element.
Uses :has() — supported in Chrome 105+, Safari 15.4+, Firefox 121+.
===================================================================== */
h2:has(+ p.color-secondary) {
font-size: 0 !important;
letter-spacing: 0 !important;
}
h2:has(+ p.color-secondary)::before {
content: "Aircall Status Page";
font-size: 1.75rem;
font-weight: 600;
color: #111827;
letter-spacing: normal;
display: inline-block;
}