/* ============================================================================ 1. TOKENS ========================================================================= */ :root { /* Type. Add 'Clario' back in front of Arial here if the webfont is ever hosted - this is the only line that needs to change. */ --tr-font: Arial, Helvetica, sans-serif; /* Layout. --tr-max is the header width; --tr-content is the reading width used by body copy, the footer tabs and the bottom container. If the components grid looks misaligned against the header, adjust --tr-max. */ --tr-max: 1200px; --tr-content: 850px; --tr-gutter: 20px; /* Brand colours - unchanged from v1, all AA-compliant against white: #1868DB 5.1:1 | #D64000 4.6:1 | #757575 4.7:1 | #333333 12.6:1 */ --tr-blue: #1868DB; --tr-blue-dark: #145AB8; --tr-orange: #D64000; --tr-orange-dark: #C23800; --tr-orange-tint: #FFF4E0; --tr-ink: #333333; --tr-muted: #757575; --tr-rule: #E0E0E0; --tr-band: #F5F5F5; --tr-radius: 4px; } /* ============================================================================ 2. SKIP LINK (WCAG 2.4.1 Bypass Blocks, Level A) Statuspage provides no skip link and .page-header contains no links, so this is additive - it suppresses nothing. Off-screen until focused; must use :focus rather than :focus-visible so it appears on Tab. ========================================================================= */ .tr-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 12px 20px; background: #ffffff; color: var(--tr-blue) !important; font-family: var(--tr-font); font-size: 1rem; font-weight: 500; text-decoration: underline; border: 2px solid var(--tr-blue); border-radius: var(--tr-radius); white-space: nowrap; } .tr-skip-link:focus { left: 10px; top: 10px; } /* The skip target is given tabindex="-1" by script so it can receive focus. Suppress the ring - the user asked to go here, no need to outline it. */ #tr-main-content:focus { outline: none; } /* ============================================================================ 3. PAGE-TYPE VISIBILITY Requires the class script - see NOTE B. Harmless without it. ========================================================================= */ /* The welcome band and header buttons belong on the index page only. */ .sp-detail .custom-header-description, .sp-history .custom-header-description, .sp-subscribe .custom-header-description, .sp-detail .custom-header-actions, .sp-history .custom-header-actions, .sp-subscribe .custom-header-actions { display: none !important; } /* The custom tabbed footer and bottom container are index-only too. */ .sp-detail #custom-tabbed-footer, .sp-history #custom-tabbed-footer, .sp-subscribe #custom-tabbed-footer, .sp-detail #bottom-container-wrapper, .sp-history #bottom-container-wrapper, .sp-subscribe #bottom-container-wrapper { display: none !important; } /* On incident pages Statuspage renders the incident name as its own h1. Demote ours so there is one page heading, not two competing ones. */ .sp-detail .custom-page-title { display: none; } /* ============================================================================ 4. HEADER ========================================================================= */ .page-header, .page-header::before, .page-header::after { display: none !important; } .custom-header-container { background-color: #ffffff; border-bottom: none !important; margin-bottom: 0 !important; } .custom-header-content { max-width: var(--tr-max); margin: 0 auto; padding: var(--tr-gutter) var(--tr-gutter) 15px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; background-color: #ffffff; } .custom-logo { flex: 0 0 auto; } .header-logo-img { height: 40px; width: auto; display: block; } .custom-page-title { flex: 0 0 100%; order: 3; margin: 15px 0 0; text-align: center; } .custom-page-title h1 { font-size: 1.75rem; font-weight: 500; font-family: var(--tr-font); color: var(--tr-ink); margin: 0; padding: 0; line-height: 1.3; } /* h1 needs tabindex="-1" in the HTML for programmatic focus to work. Suppress the outline when focus is moved there by script. */ .custom-page-title h1:focus { outline: none; } .custom-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; } /* --- Shared button base ------------------------------------------------- */ .custom-help-button, #subscribe-button-placeholder .updates-dropdown-container > button, #subscribe-button-placeholder .updates-dropdown-container > a.show-updates-dropdown { display: inline-block; padding: 10px 20px; color: #ffffff !important; text-decoration: none; border-radius: var(--tr-radius); font-size: 0.875rem; font-weight: 500; font-family: var(--tr-font); cursor: pointer; transition: background-color 0.2s ease; white-space: nowrap; border: 2px solid transparent; } .custom-help-button { background-color: var(--tr-blue); } .custom-help-button:hover { background-color: var(--tr-blue-dark); } .custom-help-button:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 2px; } /* --- Welcome band -------------------------------------------------------- */ .custom-header-description { max-width: 100%; margin: 0 0 30px 0; padding: 20px 0; background-color: var(--tr-band); border-top: 1px solid var(--tr-rule); border-bottom: none; } .custom-header-description p { max-width: 68ch; /* was 850px - ~110 chars/line, too wide */ margin: 0 auto 14px auto; padding: 0 var(--tr-gutter); font-size: 1rem; /* was 14px */ font-family: var(--tr-font); color: var(--tr-ink); line-height: 1.6; /* was 1.5 */ } .custom-header-description p:last-child { margin-bottom: 0; } .custom-header-description strong { color: var(--tr-ink); font-weight: 700; /* was 500 - indistinguishable from body */ font-family: var(--tr-font); } /* ============================================================================ 5. SUBSCRIBE MODAL ========================================================================= */ #subscribe-button-placeholder .updates-dropdown-container > button, #subscribe-button-placeholder .updates-dropdown-container > a.show-updates-dropdown { background-color: var(--tr-orange) !important; } #subscribe-button-placeholder .updates-dropdown-container > button:hover, #subscribe-button-placeholder .updates-dropdown-container > a.show-updates-dropdown:hover { background-color: var(--tr-orange-dark) !important; } #subscribe-button-placeholder .updates-dropdown-container > button:focus-visible, #subscribe-button-placeholder .updates-dropdown-container > a.show-updates-dropdown:focus-visible { outline: 3px solid var(--tr-orange); outline-offset: 2px; } #subscribe-button-placeholder .updates-dropdown-container { display: inline-block !important; position: relative; } #subscribe-button-placeholder .updates-dropdown { position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; margin-top: 10px !important; z-index: 9999 !important; max-height: 80vh !important; overflow-y: auto !important; background-color: #ffffff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; border-radius: var(--tr-radius) !important; padding: var(--tr-gutter) !important; min-width: 400px !important; border: 1px solid var(--tr-rule) !important; box-sizing: border-box !important; } @media (max-width: 750px) { #subscribe-button-placeholder .updates-dropdown { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; width: 90vw !important; max-width: 500px !important; min-width: 0 !important; margin: 0 !important; } } @media (max-width: 480px) { #subscribe-button-placeholder .updates-dropdown { width: calc(100% - 40px) !important; max-width: none !important; padding: 15px !important; } } @media (max-width: 360px) { #subscribe-button-placeholder .updates-dropdown { width: calc(100% - 20px) !important; padding: 12px !important; } } /* Inline links inside the dropdown must not inherit button styling. */ #subscribe-button-placeholder .updates-dropdown a[href*="privacy"], #subscribe-button-placeholder .updates-dropdown a[href*="terms"], #subscribe-button-placeholder .updates-dropdown a[href*="support"], #subscribe-button-placeholder .terms_and_privacy_information a, #subscribe-button-placeholder .updates-dropdown-section.support a, #subscribe-button-placeholder .updates-dropdown-section.atom a { background-color: transparent !important; color: var(--tr-blue) !important; padding: 0 !important; border-radius: 0 !important; border: none !important; text-decoration: underline !important; display: inline !important; font-size: inherit !important; font-weight: normal !important; min-width: auto !important; } #subscribe-button-placeholder .updates-dropdown a[href*="privacy"]:hover, #subscribe-button-placeholder .updates-dropdown a[href*="terms"]:hover, #subscribe-button-placeholder .updates-dropdown a[href*="support"]:hover { color: var(--tr-blue-dark) !important; background-color: transparent !important; } #subscribe-button-placeholder .updates-dropdown a[href*="privacy"]:focus-visible, #subscribe-button-placeholder .updates-dropdown a[href*="terms"]:focus-visible, #subscribe-button-placeholder .updates-dropdown a[href*="support"]:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 2px; } #subscribe-button-placeholder .updates-dropdown input[type="submit"], #subscribe-button-placeholder .updates-dropdown button.flat-button { background-color: var(--tr-orange) !important; color: #ffffff !important; padding: 10px 20px !important; border-radius: var(--tr-radius) !important; border: none !important; font-weight: 500 !important; font-family: var(--tr-font); cursor: pointer !important; display: block !important; } #subscribe-button-placeholder .updates-dropdown input[type="submit"]:hover, #subscribe-button-placeholder .updates-dropdown button.flat-button:hover { background-color: var(--tr-orange-dark) !important; } #subscribe-button-placeholder .updates-dropdown input[type="submit"]:focus-visible, #subscribe-button-placeholder .updates-dropdown button.flat-button:focus-visible { outline: 3px solid var(--tr-orange); outline-offset: 2px; } /* ============================================================================ 6. FOOTER TABS ========================================================================= */ /* v1 styled .page-footer here (position / order / margin-top) while line 421 hid it outright - two rules fighting over one element. The footer is now handled entirely in section 8 once it has been moved into the placeholder. */ #custom-tabbed-footer { max-width: var(--tr-content); margin: 10px auto 0; padding: 0 var(--tr-gutter) 50px; /* was 0 0 50px 0 - no side gutters */ width: 100%; box-sizing: border-box; position: relative; z-index: 1; } .tab-content-wrapper { width: 100%; min-height: 80px; padding-bottom: 30px; } .tab-navigation { width: 100%; margin: 0 0 30px 0; display: flex; border-bottom: 2px solid var(--tr-rule); } .tab-btn { background: none; border: none; padding: 12px 24px; font-size: 1rem; font-weight: 500; font-family: var(--tr-font); cursor: pointer; color: var(--tr-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; /* was `transition: all` - name the properties so layout is not animated */ transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .tab-btn.active { color: var(--tr-ink); border-bottom: 3px solid var(--tr-orange); background-color: transparent !important; } .tab-btn:hover:not(.active) { color: var(--tr-ink); background-color: #E5F5FF; } .tab-btn:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: -3px; } .tab-count { font-weight: 400; margin-left: 5px; } .tab-content { display: none; } .tab-content.active { display: block; } /* Clear focus rings left by pointer clicks and programmatic focus, while preserving them for keyboard users. Footer HTML v2 removes tabindex="0" and the panel.focus() call that caused the stray outline box, so this is now a safety net rather than the primary fix - keep it either way. */ .tab-btn:focus:not(:focus-visible), .tab-content:focus:not(:focus-visible) { outline: none; } /* Keyboard focus on a panel should look deliberate, not like a stray box. */ .tab-content:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 4px; } /* Show the lists that have been moved into the custom tab panels. */ #scheduled-maintenance-content .scheduled-maintenances-container, #past-incidents-content .incidents-list, #past-incidents-content .incidents-container { display: block !important; } /* Hide the ORIGINAL, un-moved lists - but ONLY on the index page. In v1 these two rules were global, so they also hid the History page's own month-by-month incident lists and anything similar on detail pages. html:not(...) keeps this correct whether or not the page-type script has been added. */ html:not(.sp-history):not(.sp-detail):not(.sp-subscribe) .incidents-list:not(#past-incidents-content .incidents-list), html:not(.sp-history):not(.sp-detail):not(.sp-subscribe) .scheduled-maintenances-container:not(#scheduled-maintenance-content .scheduled-maintenances-container) { display: none !important; } /* ============================================================================ 7. BOTTOM CONTAINER (INCIDENT HISTORY + POWERED BY) Requires the #bottom-container-wrapper markup - see NOTE A. ========================================================================= */ #bottom-container-wrapper { max-width: var(--tr-content); margin: 40px auto 20px; padding: 0 var(--tr-gutter); display: flex; justify-content: space-between; align-items: center; gap: var(--tr-gutter); position: relative; z-index: 2; } #incident-history-link-container { flex: 0 0 auto; } #powered-by-placeholder { flex: 0 0 auto; margin-left: auto; } #incident-history-link-container a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; background-color: #ffffff; color: var(--tr-orange) !important; text-decoration: none; border-radius: var(--tr-radius); font-size: 0.875rem; font-weight: 500; font-family: var(--tr-font); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; border: 2px solid var(--tr-orange); white-space: nowrap; } #incident-history-link-container a:hover { background-color: var(--tr-orange-tint); border-color: var(--tr-orange-dark); color: var(--tr-orange-dark) !important; /* 5.0:1 on the tint - AA pass */ } #incident-history-link-container a:focus-visible { outline: 3px solid var(--tr-orange); outline-offset: 2px; } /* ============================================================================ 8. NATIVE FOOTER RELOCATION ========================================================================= */ /* Hide the native history link once it has been cloned into our container. */ .history-footer-link:not(#incident-history-link-container .history-footer-link) { display: none !important; } /* Hide the native footer in its original position - index page only. In v1 this was global, and because the footer JS returns early on history / detail / subscription pages the move never ran there, so the Atlassian attribution disappeared entirely instead of relocating. Scoping it means the attribution stays visible on those pages even if the move has not run. */ html:not(.sp-history):not(.sp-detail):not(.sp-subscribe) .page-footer:not(#powered-by-placeholder .page-footer) { display: none !important; } #powered-by-placeholder .page-footer { margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; min-height: auto !important; position: static !important; } #powered-by-placeholder .page-footer .powered-by { margin: 0 !important; padding: 0 !important; font-size: 0.875rem; color: var(--tr-muted); font-family: var(--tr-font); } #powered-by-placeholder .page-footer a { color: var(--tr-blue) !important; text-decoration: none; } #powered-by-placeholder .page-footer a:hover { color: var(--tr-blue-dark) !important; text-decoration: underline; } #powered-by-placeholder .page-footer a:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 2px; } /* ============================================================================ 9. SUBSCRIPTION / COMPONENT-SELECTION PAGES Scoped to .sp-subscribe so none of this can affect the index, history, incident pages, or the subscribe modal on the index. Statuspage ships an inverted hierarchy here: group headers render as unclassed at 14.4px/400, while their child components are .grouped-item-label at 16px/500 - so children read as more important than their parents. Measured values, not assumed. Group headers carry no class of their own, hence the attribute-based selector. If Statuspage ever adds a class to them, this rule stops matching and the headers revert to 14.4px - it fails safe, not broken. ========================================================================= */ /* Page description - was 14px, matching the index body copy at 1rem. */ .sp-subscribe .heading .instructions { font-family: var(--tr-font); font-size: 1rem; line-height: 1.6; max-width: 68ch; } .sp-subscribe .heading .subscriber { font-family: var(--tr-font); font-size: 0.9375rem; } .sp-subscribe .heading .title { font-family: var(--tr-font); } /* Group headers - larger and heavier than their children. */ .sp-subscribe .grouped-items-selector span:not([class]), .sp-subscribe .grouped-items-selector span[class=""] { font-family: var(--tr-font); font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.4; color: var(--tr-ink); } /* Child components drop from 500 to regular weight so the group name is clearly the parent. Delete this rule to keep the original 500. */ .sp-subscribe .grouped-items-selector .grouped-item-label { font-family: var(--tr-font); font-size: 1rem !important; font-weight: 400 !important; } /* ============================================================================ 10. RESPONSIVE ========================================================================= */ @media (max-width: 768px) { #bottom-container-wrapper { flex-direction: column; align-items: flex-start; gap: 15px; } #powered-by-placeholder { margin-left: 0; align-self: flex-start; } } /* v1 had no small-screen handling for the header: logo plus two buttons on one row overflows below roughly 600px. */ @media (max-width: 600px) { .custom-header-content { justify-content: center; text-align: center; } .custom-header-actions { flex: 0 0 100%; margin-left: 0; justify-content: center; flex-wrap: wrap; } .custom-page-title h1 { font-size: 1.5rem; } .custom-header-description p { padding: 0 15px; } .tab-btn { padding: 12px 14px; font-size: 0.9375rem; } } /* ============================================================================ 11. REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { .custom-help-button, #subscribe-button-placeholder .updates-dropdown-container > button, #subscribe-button-placeholder .updates-dropdown-container > a.show-updates-dropdown, .tab-btn, #incident-history-link-container a { transition: none; } } /* ============================================================================ 12. COMPONENT GRID Statuspage's .two-columns uses CSS multi-column layout, which flows items as a continuous stream and breaks them wherever the height falls. That looks like a grid only while every item is the same height. On pages that mix component GROUPS (taller, with an expander) and standalone COMPONENTS (shorter), the columns go ragged and the borders stop lining up. CSS Grid aligns rows by definition, so mixed heights no longer matter. It also flows left-to-right instead of top-to-bottom, which matches reading order - multi-column put item 2 at the top of the right column. Deliberately generic (> *) rather than naming child classes, so it does not depend on Statuspage's internal markup. ========================================================================= */ .components-container.two-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; /* columns sit flush, as they do today */ column-count: auto !important; /* cancel the multi-column behaviour */ columns: auto !important; } .components-container.two-columns > * { width: auto !important; margin: 0 !important; float: none !important; break-inside: auto; } /* Single column on small screens - grid would otherwise force two. */ @media (max-width: 600px) { .components-container.two-columns { grid-template-columns: 1fr; } }