/* ===========================================================================
* Campus — carbon-core.css
* IBM Carbon Design System v11, hand-authored. No Sass, no build step.
*
* Load order (see src/views/partials/head.ejs):
* 1. carbon-core.css <- this file: tokens, reset, type, grid,
* buttons, links, UI Shell, footer shell
* 2. carbon-components.css forms, tiles, tags, tables, notifications,
* modal, tabs, accordion, progress, pagination
* 3. campus.css product-specific composition
*
* The IBM Plex webfont lives in head.ejs — this file only declares the
* stacks. Nothing here makes an external request.
*
* HARD RULE: nothing in Carbon has rounded corners. `border-radius: 0` is set
* on the universal selector below; only Carbon tags and the loading spinner
* (both in carbon-components.css) are permitted to override it.
*
* HARD RULE: display type is weight 300 or 400. The only 600s in the whole
* scale are heading-compact-01, heading-01 and heading-02.
*
* Contents
* 1. Colour tokens (White theme) + grey / blue ramps + tag accents
* 1b. Colour tokens (Gray 100 dark theme) — token overrides only
* 2. Type tokens
* 3. Spacing, sizing, layout and z-index tokens
* 4. Motion tokens
* 5. Reset
* 6. Type scale — utilities and element defaults
* 7. Grid — 16 column Carbon flex grid
* 8. Buttons
* 9. Links
* 10. UI Shell header
* 11. Skip to content
* 12. Shell content region
* 13. Site footer shell (.campus-footer)
* 14. Focus, utilities
* 15. Print
* 16. Reduced motion
* ======================================================================== */
/* ---------------------------------------------------------------------------
* 1. COLOUR TOKENS — Carbon White theme
* ------------------------------------------------------------------------ */
:root {
/* --- Core surfaces ---------------------------------------------------- */
--cds-background: #ffffff;
--cds-background-inverse: #393939;
--cds-background-inverse-hover: #474747;
--cds-background-hover: #e8e8e8;
--cds-background-active: #c6c6c6;
--cds-background-selected: #e0e0e0;
--cds-background-selected-hover: #d1d1d1;
--cds-background-brand: #0f62fe;
--cds-layer-01: #f4f4f4;
--cds-layer-02: #ffffff;
--cds-layer-03: #f4f4f4;
--cds-layer-hover-01: #e8e8e8;
--cds-layer-hover-02: #e8e8e8;
--cds-layer-active-01: #c6c6c6;
--cds-layer-active-02: #c6c6c6;
--cds-layer-selected-01: #e0e0e0;
--cds-layer-selected-02: #e0e0e0;
--cds-layer-selected-hover-01: #d1d1d1;
--cds-layer-selected-inverse: #161616;
--cds-layer-accent-01: #e0e0e0;
--cds-layer-accent-02: #e0e0e0;
--cds-layer-accent-hover-01: #d1d1d1;
--cds-field-01: #f4f4f4;
--cds-field-02: #ffffff;
--cds-field-hover-01: #e8e8e8;
--cds-field-hover-02: #e8e8e8;
/* --- Borders ---------------------------------------------------------- */
--cds-border-subtle-00: #e0e0e0;
--cds-border-subtle-01: #c6c6c6;
--cds-border-subtle-02: #e0e0e0;
--cds-border-strong-01: #8d8d8d;
--cds-border-strong-02: #8d8d8d;
--cds-border-inverse: #161616;
--cds-border-interactive: #0f62fe;
--cds-border-disabled: #f4f4f4;
/* --- Text ------------------------------------------------------------- */
--cds-text-primary: #161616;
--cds-text-secondary: #525252;
--cds-text-placeholder: #a8a8a8;
--cds-text-helper: #6f6f6f;
--cds-text-on-color: #ffffff;
--cds-text-on-color-disabled: #8d8d8d;
--cds-text-inverse: #ffffff;
--cds-text-error: #da1e28;
--cds-text-disabled: rgba(22, 22, 22, 0.25);
/* --- Status TEXT ------------------------------------------------------
* The --cds-support-* colours below are ICON and BORDER colours. They are
* tuned for 3:1 against the page (enough for a 16px glyph or a 1px rule)
* and FAIL the 4.5:1 minimum for body text — Green 50 #24a148 is 2.9:1 on
* white and Yellow 30 #f1c21b is 1.7:1. Never set text in a support token;
* use these instead. Light values are Green 70, Red 70, a darkened Yellow
* and Blue 70 — every one of them clears 4.5:1 on --cds-background.
* Utility classes: .cds--text-success / -error / -warning / -info.
* -------------------------------------------------------------------- */
--cds-text-success: #0e6027;
--cds-text-error-secondary: #a2191f;
--cds-text-warning-secondary: #684e00;
--cds-text-info-secondary: #0043ce;
/* --- Links ------------------------------------------------------------ */
--cds-link-primary: #0f62fe;
--cds-link-primary-hover: #0043ce;
--cds-link-secondary: #0043ce;
--cds-link-visited: #8a3ffc;
--cds-link-inverse: #78a9ff;
/* --- Icons ------------------------------------------------------------ */
--cds-icon-primary: #161616;
--cds-icon-secondary: #525252;
--cds-icon-on-color: #ffffff;
--cds-icon-inverse: #ffffff;
--cds-icon-interactive: #0f62fe;
--cds-icon-disabled: rgba(22, 22, 22, 0.25);
/* --- Support / status -------------------------------------------------- */
--cds-support-error: #da1e28;
--cds-support-success: #24a148;
--cds-support-warning: #f1c21b;
--cds-support-info: #0043ce;
--cds-support-caution-major: #ff832b;
--cds-support-error-inverse: #fa4d56;
--cds-support-success-inverse: #42be65;
--cds-support-warning-inverse: #f1c21b;
--cds-support-info-inverse: #4589ff;
--cds-notification-background-error: #fff1f1;
--cds-notification-background-success: #defbe6;
--cds-notification-background-warning: #fdf6dd;
--cds-notification-background-info: #edf5ff;
/* Translucent hover wash for the close button that sits ON a notification.
Carbon has no token for it; it must follow the theme, because a black
wash is invisible on a Gray 90 notification surface. */
--cds-notification-close-hover: rgba(0, 0, 0, 0.08);
/* --- Interactive / focus ----------------------------------------------- */
--cds-interactive: #0f62fe;
--cds-highlight: #d0e2ff;
--cds-focus: #0f62fe;
--cds-focus-inset: #ffffff;
--cds-focus-inverse: #ffffff;
--cds-overlay: rgba(22, 22, 22, 0.5);
--cds-toggle-off: #8d8d8d;
--cds-shadow: rgba(0, 0, 0, 0.3);
--cds-skeleton-background: #e8e8e8;
--cds-skeleton-element: #c6c6c6;
/* --- Buttons ----------------------------------------------------------- */
--cds-button-primary: #0f62fe;
--cds-button-primary-hover: #0353e9;
--cds-button-primary-active: #002d9c;
--cds-button-secondary: #393939;
--cds-button-secondary-hover: #4c4c4c;
--cds-button-secondary-active: #6f6f6f;
--cds-button-tertiary: #0f62fe;
--cds-button-tertiary-hover: #0353e9;
--cds-button-tertiary-active: #002d9c;
--cds-button-ghost-hover: #e8e8e8;
--cds-button-ghost-active: #c6c6c6;
--cds-button-danger-primary: #da1e28;
--cds-button-danger-hover: #ba1b23;
--cds-button-danger-active: #750e13;
--cds-button-danger-secondary: #da1e28;
--cds-button-disabled: #c6c6c6;
--cds-button-separator: #e0e0e0;
/* --- Grey ramp --------------------------------------------------------- */
--cds-gray-10: #f4f4f4;
--cds-gray-20: #e0e0e0;
--cds-gray-30: #c6c6c6;
--cds-gray-40: #a8a8a8;
--cds-gray-50: #8d8d8d;
--cds-gray-60: #6f6f6f;
--cds-gray-70: #525252;
--cds-gray-80: #393939;
--cds-gray-90: #262626;
--cds-gray-100: #161616;
/* --- Blue ramp --------------------------------------------------------- */
--cds-blue-10: #edf5ff;
--cds-blue-20: #d0e2ff;
--cds-blue-30: #a6c8ff;
--cds-blue-40: #78a9ff;
--cds-blue-50: #4589ff;
--cds-blue-60: #0f62fe;
--cds-blue-70: #0043ce;
--cds-blue-80: #002d9c;
/* --- Accent ramps (tags, status, charts) -------------------------------- */
--cds-green-10: #defbe6;
--cds-green-20: #a7f0ba;
--cds-green-40: #42be65;
--cds-green-50: #24a148;
--cds-green-60: #0e6027;
--cds-red-10: #fff1f1;
--cds-red-20: #ffd7d9;
--cds-red-50: #fa4d56;
--cds-red-60: #da1e28;
--cds-red-70: #a2191f;
--cds-red-80: #750e13;
--cds-teal-20: #9ef0f0;
--cds-teal-70: #005d5d;
--cds-purple-20: #e8daff;
--cds-purple-60: #6929c4;
--cds-magenta-20: #ffd6e8;
--cds-magenta-70: #9f1853;
--cds-cyan-20: #bae6ff;
--cds-cyan-70: #00539a;
--cds-yellow-20: #fddc69;
--cds-orange-40: #ff832b;
--cds-cool-gray-20: #dde1e6;
--cds-cool-gray-70: #343a3f;
--cds-warm-gray-20: #e5e0df;
--cds-warm-gray-70: #3c3838;
/* --- Tag colour pairs (background / label) ------------------------------ */
--cds-tag-background-blue: #d0e2ff;
--cds-tag-color-blue: #0043ce;
--cds-tag-hover-blue: #b8d3ff;
--cds-tag-background-green: #a7f0ba;
--cds-tag-color-green: #0e6027;
--cds-tag-hover-green: #74e792;
--cds-tag-background-red: #ffd7d9;
--cds-tag-color-red: #a2191f;
--cds-tag-hover-red: #ffb3b8;
--cds-tag-background-teal: #9ef0f0;
--cds-tag-color-teal: #005d5d;
--cds-tag-hover-teal: #57e5e5;
--cds-tag-background-purple: #e8daff;
--cds-tag-color-purple: #6929c4;
--cds-tag-hover-purple: #dcc7ff;
--cds-tag-background-magenta: #ffd6e8;
--cds-tag-color-magenta: #9f1853;
--cds-tag-hover-magenta: #ffafd2;
--cds-tag-background-cyan: #bae6ff;
--cds-tag-color-cyan: #00539a;
--cds-tag-hover-cyan: #97d5ff;
--cds-tag-background-gray: #e0e0e0;
--cds-tag-color-gray: #393939;
--cds-tag-hover-gray: #d1d1d1;
--cds-tag-background-cool-gray: #dde1e6;
--cds-tag-color-cool-gray: #343a3f;
--cds-tag-hover-cool-gray: #cdd3da;
--cds-tag-background-warm-gray: #e5e0df;
--cds-tag-color-warm-gray: #3c3838;
--cds-tag-hover-warm-gray: #d8d0cf;
--cds-tag-background-high-contrast: #393939;
--cds-tag-color-high-contrast: #ffffff;
--cds-tag-hover-high-contrast: #474747;
/* --- UI Shell (always Gray 100 — never follows the page theme) ---------- */
--cds-shell-background: #161616;
--cds-shell-border: #393939;
--cds-shell-hover: #353535;
--cds-shell-text-primary: #f4f4f4;
--cds-shell-text-secondary: #c6c6c6;
--cds-shell-text-muted: #8d8d8d;
--cds-shell-focus: #ffffff;
/* -------------------------------------------------------------------------
* 2. TYPE TOKENS
* ---------------------------------------------------------------------- */
--cds-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
--cds-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
--cds-font-weight-light: 300;
--cds-font-weight-regular: 400;
--cds-font-weight-semibold: 600;
/* -------------------------------------------------------------------------
* 3. SPACING, SIZING, LAYOUT, Z-INDEX
* ---------------------------------------------------------------------- */
--cds-spacing-01: 0.125rem; /* 2px */
--cds-spacing-02: 0.25rem; /* 4px */
--cds-spacing-03: 0.5rem; /* 8px */
--cds-spacing-04: 0.75rem; /* 12px */
--cds-spacing-05: 1rem; /* 16px */
--cds-spacing-06: 1.5rem; /* 24px */
--cds-spacing-07: 2rem; /* 32px */
--cds-spacing-08: 2.5rem; /* 40px */
--cds-spacing-09: 3rem; /* 48px */
--cds-spacing-10: 4rem; /* 64px */
--cds-spacing-11: 5rem; /* 80px */
--cds-spacing-12: 6rem; /* 96px */
--cds-spacing-13: 10rem; /* 160px */
--cds-size-xs: 1.5rem; /* 24px */
--cds-size-sm: 2rem; /* 32px */
--cds-size-md: 2.5rem; /* 40px */
--cds-size-lg: 3rem; /* 48px */
--cds-size-xl: 4rem; /* 64px */
--cds-size-2xl: 5rem; /* 80px */
/* Breakpoints. Media queries cannot read custom properties — these exist
for JS and for documentation. The literal values below are authoritative:
sm 320px = 20rem (no media query — mobile first)
md 672px = 42rem
lg 1056px = 66rem
xlg 1312px = 82rem
max 1584px = 99rem */
--cds-breakpoint-sm: 20rem;
--cds-breakpoint-md: 42rem;
--cds-breakpoint-lg: 66rem;
--cds-breakpoint-xlg: 82rem;
--cds-breakpoint-max: 99rem;
--cds-grid-max-width: 99rem;
--cds-grid-gutter: 2rem;
--cds-grid-gutter-half: 1rem;
--cds-grid-gutter-condensed: 0.0625rem;
--cds-header-height: 3rem;
--cds-z-header: 8000;
--cds-z-overlay: 6000;
--cds-z-dropdown: 7000;
--cds-z-modal: 9000;
--cds-z-floating: 10000;
/* -------------------------------------------------------------------------
* 4. MOTION
* ---------------------------------------------------------------------- */
--cds-duration-fast-01: 70ms;
--cds-duration-fast-02: 110ms;
--cds-duration-moderate-01: 150ms;
--cds-duration-moderate-02: 240ms;
--cds-duration-slow-01: 400ms;
--cds-duration-slow-02: 700ms;
--cds-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
--cds-ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
--cds-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
color-scheme: light;
}
/* ---------------------------------------------------------------------------
* 1b. COLOUR TOKENS — Carbon Gray 100 dark theme
*
* partials/head.ejs stamps `data-theme` on from localStorage
* ('campus-theme') and /js/theme.js flips it; with no stored preference the
* page follows the OS. Both paths land here:
*
* @media (prefers-color-scheme: dark) + :root:not([data-theme="light"])
* -> OS dark, no explicit opt-out
* :root[data-theme="dark"] -> explicit choice, beats the OS
*
* THESE TWO BLOCKS MUST STAY IN SYNC. They redefine token custom properties
* ONLY — no component rule may be declared here, or the two themes will drift.
*
* NOT overridden, deliberately:
* --cds-gray-* / --cds-blue-* / accent ramps absolute palette values
* --cds-shell-* the UI Shell header and the
* site footer are Gray 100 in BOTH themes (Carbon's shell does not follow
* the page theme, see docs/DESIGN-SYSTEM.md §1); their focus rings are
* pinned to --cds-shell-focus so they stay white either way
* --cds-tag-* a tag paints its own pill, so its light background/label
* pair keeps its contrast on any page colour
* ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* --- Core surfaces -------------------------------------------------- */
--cds-background: #161616;
--cds-background-inverse: #f4f4f4;
--cds-background-inverse-hover: #e5e5e5;
--cds-background-hover: #353535;
--cds-background-active: #525252;
--cds-background-selected: #393939;
--cds-background-selected-hover: #4c4c4c;
--cds-layer-01: #262626;
--cds-layer-02: #393939;
--cds-layer-03: #525252;
--cds-layer-hover-01: #333333;
--cds-layer-hover-02: #474747;
--cds-layer-active-01: #525252;
--cds-layer-active-02: #6f6f6f;
--cds-layer-selected-01: #393939;
--cds-layer-selected-02: #4c4c4c;
--cds-layer-selected-hover-01: #4c4c4c;
--cds-layer-selected-inverse: #f4f4f4;
--cds-layer-accent-01: #393939;
--cds-layer-accent-02: #525252;
--cds-layer-accent-hover-01: #4c4c4c;
--cds-field-01: #262626;
--cds-field-02: #393939;
--cds-field-hover-01: #333333;
--cds-field-hover-02: #474747;
/* --- Borders -------------------------------------------------------- */
--cds-border-subtle-00: #262626;
--cds-border-subtle-01: #393939;
--cds-border-subtle-02: #525252;
--cds-border-strong-01: #6f6f6f;
--cds-border-strong-02: #8d8d8d;
--cds-border-inverse: #f4f4f4;
--cds-border-interactive: #4589ff;
--cds-border-disabled: #393939;
/* --- Text ----------------------------------------------------------- */
--cds-text-primary: #f4f4f4;
--cds-text-secondary: #c6c6c6;
--cds-text-placeholder: #6f6f6f;
--cds-text-helper: #a8a8a8;
--cds-text-on-color: #ffffff;
--cds-text-on-color-disabled: #8d8d8d;
--cds-text-inverse: #161616;
--cds-text-error: #ff8389;
--cds-text-disabled: rgba(244, 244, 244, 0.25);
/* --- Status text (see the light block for why these exist) ---------- */
--cds-text-success: #42be65;
--cds-text-error-secondary: #ff8389;
--cds-text-warning-secondary: #f1c21b;
--cds-text-info-secondary: #78a9ff;
/* --- Links ---------------------------------------------------------- */
--cds-link-primary: #78a9ff;
--cds-link-primary-hover: #a6c8ff;
--cds-link-secondary: #a6c8ff;
--cds-link-visited: #be95ff;
--cds-link-inverse: #0f62fe;
/* --- Icons ---------------------------------------------------------- */
--cds-icon-primary: #f4f4f4;
--cds-icon-secondary: #c6c6c6;
--cds-icon-on-color: #ffffff;
--cds-icon-inverse: #161616;
--cds-icon-interactive: #ffffff;
--cds-icon-disabled: rgba(244, 244, 244, 0.25);
/* --- Support / status ------------------------------------------------ */
--cds-support-error: #fa4d56;
--cds-support-success: #42be65;
--cds-support-warning: #f1c21b;
--cds-support-info: #4589ff;
--cds-support-caution-major: #ff832b;
--cds-support-error-inverse: #da1e28;
--cds-support-success-inverse: #24a148;
--cds-support-warning-inverse: #f1c21b;
--cds-support-info-inverse: #0043ce;
--cds-notification-background-error: #262626;
--cds-notification-background-success: #262626;
--cds-notification-background-warning: #262626;
--cds-notification-background-info: #262626;
--cds-notification-close-hover: rgba(255, 255, 255, 0.1);
/* --- Interactive / focus --------------------------------------------- */
--cds-interactive: #4589ff;
--cds-highlight: #0043ce;
--cds-focus: #ffffff;
--cds-focus-inset: #161616;
--cds-focus-inverse: #0f62fe;
--cds-overlay: rgba(0, 0, 0, 0.65);
--cds-toggle-off: #6f6f6f;
--cds-shadow: rgba(0, 0, 0, 0.8);
--cds-skeleton-background: #292929;
--cds-skeleton-element: #393939;
/* --- Buttons --------------------------------------------------------- */
--cds-button-primary: #0f62fe;
--cds-button-primary-hover: #0353e9;
--cds-button-primary-active: #002d9c;
--cds-button-secondary: #6f6f6f;
--cds-button-secondary-hover: #606060;
--cds-button-secondary-active: #393939;
--cds-button-tertiary: #ffffff;
--cds-button-tertiary-hover: #f4f4f4;
--cds-button-tertiary-active: #c6c6c6;
--cds-button-ghost-hover: #353535;
--cds-button-ghost-active: #525252;
--cds-button-danger-primary: #da1e28;
--cds-button-danger-hover: #ba1b23;
--cds-button-danger-active: #750e13;
--cds-button-danger-secondary: #ff8389;
--cds-button-disabled: #525252;
--cds-button-separator: #161616;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
/* --- Core surfaces ---------------------------------------------------- */
--cds-background: #161616;
--cds-background-inverse: #f4f4f4;
--cds-background-inverse-hover: #e5e5e5;
--cds-background-hover: #353535;
--cds-background-active: #525252;
--cds-background-selected: #393939;
--cds-background-selected-hover: #4c4c4c;
--cds-layer-01: #262626;
--cds-layer-02: #393939;
--cds-layer-03: #525252;
--cds-layer-hover-01: #333333;
--cds-layer-hover-02: #474747;
--cds-layer-active-01: #525252;
--cds-layer-active-02: #6f6f6f;
--cds-layer-selected-01: #393939;
--cds-layer-selected-02: #4c4c4c;
--cds-layer-selected-hover-01: #4c4c4c;
--cds-layer-selected-inverse: #f4f4f4;
--cds-layer-accent-01: #393939;
--cds-layer-accent-02: #525252;
--cds-layer-accent-hover-01: #4c4c4c;
--cds-field-01: #262626;
--cds-field-02: #393939;
--cds-field-hover-01: #333333;
--cds-field-hover-02: #474747;
/* --- Borders ---------------------------------------------------------- */
--cds-border-subtle-00: #262626;
--cds-border-subtle-01: #393939;
--cds-border-subtle-02: #525252;
--cds-border-strong-01: #6f6f6f;
--cds-border-strong-02: #8d8d8d;
--cds-border-inverse: #f4f4f4;
--cds-border-interactive: #4589ff;
--cds-border-disabled: #393939;
/* --- Text ------------------------------------------------------------- */
--cds-text-primary: #f4f4f4;
--cds-text-secondary: #c6c6c6;
--cds-text-placeholder: #6f6f6f;
--cds-text-helper: #a8a8a8;
--cds-text-on-color: #ffffff;
--cds-text-on-color-disabled: #8d8d8d;
--cds-text-inverse: #161616;
--cds-text-error: #ff8389;
--cds-text-disabled: rgba(244, 244, 244, 0.25);
/* --- Status text (see the light block for why these exist) ------------ */
--cds-text-success: #42be65;
--cds-text-error-secondary: #ff8389;
--cds-text-warning-secondary: #f1c21b;
--cds-text-info-secondary: #78a9ff;
/* --- Links ------------------------------------------------------------ */
--cds-link-primary: #78a9ff;
--cds-link-primary-hover: #a6c8ff;
--cds-link-secondary: #a6c8ff;
--cds-link-visited: #be95ff;
--cds-link-inverse: #0f62fe;
/* --- Icons ------------------------------------------------------------ */
--cds-icon-primary: #f4f4f4;
--cds-icon-secondary: #c6c6c6;
--cds-icon-on-color: #ffffff;
--cds-icon-inverse: #161616;
--cds-icon-interactive: #ffffff;
--cds-icon-disabled: rgba(244, 244, 244, 0.25);
/* --- Support / status -------------------------------------------------- */
--cds-support-error: #fa4d56;
--cds-support-success: #42be65;
--cds-support-warning: #f1c21b;
--cds-support-info: #4589ff;
--cds-support-caution-major: #ff832b;
--cds-support-error-inverse: #da1e28;
--cds-support-success-inverse: #24a148;
--cds-support-warning-inverse: #f1c21b;
--cds-support-info-inverse: #0043ce;
--cds-notification-background-error: #262626;
--cds-notification-background-success: #262626;
--cds-notification-background-warning: #262626;
--cds-notification-background-info: #262626;
--cds-notification-close-hover: rgba(255, 255, 255, 0.1);
/* --- Interactive / focus ----------------------------------------------- */
--cds-interactive: #4589ff;
--cds-highlight: #0043ce;
--cds-focus: #ffffff;
--cds-focus-inset: #161616;
--cds-focus-inverse: #0f62fe;
--cds-overlay: rgba(0, 0, 0, 0.65);
--cds-toggle-off: #6f6f6f;
--cds-shadow: rgba(0, 0, 0, 0.8);
--cds-skeleton-background: #292929;
--cds-skeleton-element: #393939;
/* --- Buttons ----------------------------------------------------------- */
--cds-button-primary: #0f62fe;
--cds-button-primary-hover: #0353e9;
--cds-button-primary-active: #002d9c;
--cds-button-secondary: #6f6f6f;
--cds-button-secondary-hover: #606060;
--cds-button-secondary-active: #393939;
--cds-button-tertiary: #ffffff;
--cds-button-tertiary-hover: #f4f4f4;
--cds-button-tertiary-active: #c6c6c6;
--cds-button-ghost-hover: #353535;
--cds-button-ghost-active: #525252;
--cds-button-danger-primary: #da1e28;
--cds-button-danger-hover: #ba1b23;
--cds-button-danger-active: #750e13;
--cds-button-danger-secondary: #ff8389;
--cds-button-disabled: #525252;
--cds-button-separator: #161616;
color-scheme: dark;
}
/* ---------------------------------------------------------------------------
* 5. RESET
* ------------------------------------------------------------------------ */
*,
*::before,
*::after {
box-sizing: border-box;
/* Nothing in Carbon is rounded. Tags and the loading spinner override this
in carbon-components.css; nothing else may. */
border-radius: 0;
}
html {
font-size: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
/* The UI Shell header is `position: fixed`; this keeps page content clear of
it on every page, including ones that do not use `.cds--content`. */
padding-top: var(--cds-header-height);
background-color: var(--cds-background);
color: var(--cds-text-primary);
font-family: var(--cds-font-sans);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.42857;
letter-spacing: 0.16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, dt, pre, fieldset, ul, ol, li {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
fieldset {
border: 0;
min-width: 0;
}
legend {
padding: 0;
}
img, svg, video, canvas, picture {
display: block;
max-width: 100%;
}
img, video {
height: auto;
}
svg {
fill: currentColor;
flex-shrink: 0;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea,
optgroup {
font: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-align: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th {
text-align: left;
font-weight: 600;
}
hr {
border: 0;
border-top: 1px solid var(--cds-border-subtle-01);
margin: 0;
height: 0;
}
code, kbd, samp, pre {
font-family: var(--cds-font-mono);
font-size: 0.875rem;
}
strong, b {
font-weight: 600;
}
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
details summary {
cursor: pointer;
}
/* Skip-link and programmatic focus targets must not paint a stray ring. */
[tabindex="-1"]:focus {
outline: none;
}
::selection {
background-color: var(--cds-highlight);
color: var(--cds-text-primary);
}
::placeholder {
color: var(--cds-text-placeholder);
opacity: 1;
}
/* ---------------------------------------------------------------------------
* 6. TYPE SCALE
* Utility classes AND element defaults. Display type is 300/400 — the only
* 600 weights in the entire scale are heading-compact-01, heading-01 and
* heading-02, which are small UI labels, not display type.
* ------------------------------------------------------------------------ */
.cds--type-label-01 {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.33333;
letter-spacing: 0.32px;
}
.cds--type-helper-text-01 {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.33333;
letter-spacing: 0.32px;
}
.cds--type-legal-01 {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.33333;
letter-spacing: 0.32px;
}
.cds--type-body-compact-01 {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0.16px;
}
.cds--type-body-compact-02 {
font-size: 1rem;
font-weight: 400;
line-height: 1.375;
letter-spacing: 0;
}
.cds--type-body-01 {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.42857;
letter-spacing: 0.16px;
}
.cds--type-body-02 {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
}
.cds--type-heading-compact-01 {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.28572;
letter-spacing: 0.16px;
}
.cds--type-heading-compact-02 {
font-size: 1rem;
font-weight: 600;
line-height: 1.375;
letter-spacing: 0;
}
.cds--type-heading-01 {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.42857;
letter-spacing: 0.16px;
}
.cds--type-heading-02 {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
}
.cds--type-heading-03 {
font-size: 1.25rem;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
}
.cds--type-heading-04 {
font-size: 1.75rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0;
}
.cds--type-heading-05 {
font-size: 2rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: 0;
}
.cds--type-heading-06 {
font-size: 2.625rem;
font-weight: 300;
line-height: 1.199;
letter-spacing: 0;
}
.cds--type-heading-07 {
font-size: 3.375rem;
font-weight: 300;
line-height: 1.19;
letter-spacing: 0;
}
.cds--type-code-01 {
font-family: var(--cds-font-mono);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.33333;
letter-spacing: 0.32px;
}
.cds--type-code-02 {
font-family: var(--cds-font-mono);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.42857;
letter-spacing: 0.32px;
}
/* --- Element defaults ---------------------------------------------------- */
h1 {
font-size: 2.625rem;
font-weight: 300;
line-height: 1.199;
letter-spacing: 0;
}
h2 {
font-size: 2rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: 0;
}
h3 {
font-size: 1.75rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0;
}
h4 {
font-size: 1.25rem;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
}
h5 {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
}
h6 {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.42857;
letter-spacing: 0.16px;
}
@media (max-width: 41.98rem) {
h1 {
font-size: 2rem;
line-height: 1.25;
}
h2 {
font-size: 1.75rem;
line-height: 1.28572;
}
h3 {
font-size: 1.25rem;
line-height: 1.4;
}
}
p {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.42857;
letter-spacing: 0.16px;
}
small {
font-size: 0.75rem;
font-weight: 400;
line-height: 1.33333;
letter-spacing: 0.32px;
color: var(--cds-text-helper);
}
/* --- Colour helpers ------------------------------------------------------ */
.cds--text-primary { color: var(--cds-text-primary); }
.cds--text-secondary { color: var(--cds-text-secondary); }
.cds--text-helper { color: var(--cds-text-helper); }
.cds--text-on-color { color: var(--cds-text-on-color); }
.cds--text-brand { color: var(--cds-interactive); }
/* Status text. These take the *text* tokens, never --cds-support-*: the
support colours are icon/border values and fail 4.5:1 as running text.
`.cds--text-error` uses the Red 70 secondary rather than Carbon's
--cds-text-error (Red 60, 5:1) so the whole set clears the same bar;
--cds-text-error is still the token for form-field error messages
(.cds--form-requirement), which is Carbon's own usage.
Colour still never carries meaning alone — pair them with an icon or a
word (docs/DESIGN-SYSTEM.md §8). */
.cds--text-success { color: var(--cds-text-success); }
.cds--text-error { color: var(--cds-text-error-secondary); }
.cds--text-warning { color: var(--cds-text-warning-secondary); }
.cds--text-info { color: var(--cds-text-info-secondary); }
/* ---------------------------------------------------------------------------
* 7. GRID — Carbon 16 column flex grid
*
* Gutter is 32px: the row pulls back 1rem on each side and every column pads
* 1rem on each side, so content lines up with the grid's own 2rem padding.
*
* .cds--grid max-width 99rem, auto margins, 2rem padding
* .cds--grid--full-width no max-width
* .cds--grid--condensed 1px gutter
* .cds--grid--narrow gutter on the right edge only
* .cds--row flex, wrap, -1rem inline margins
* .cds--col-sm-N N of 4 (all widths — mobile first)
* .cds--col-md-N N of 8 (>= 42rem)
* .cds--col-lg-N N of 16 (>= 66rem)
* .cds--col-xlg-N N of 16 (>= 82rem)
* .cds--col-max-N N of 16 (>= 99rem)
* .cds--offset-{bp}-N left offset in the same units
* ------------------------------------------------------------------------ */
.cds--grid {
margin-right: auto;
margin-left: auto;
max-width: 99rem;
padding-right: 2rem;
padding-left: 2rem;
width: 100%;
}
@media (max-width: 41.98rem) {
.cds--grid {
padding-right: 1rem;
padding-left: 1rem;
}
}
.cds--grid--full-width {
max-width: 100%;
}
.cds--grid--no-gutter {
padding-right: 0;
padding-left: 0;
}
.cds--row {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
.cds--row--no-wrap {
flex-wrap: nowrap;
}
.cds--col,
[class*="cds--col-"] {
flex: 1 0 0%;
padding-right: 1rem;
padding-left: 1rem;
width: 100%;
max-width: 100%;
}
.cds--col-auto {
flex: 0 0 auto;
width: auto;
max-width: none;
}
/* Condensed: 1px gutter (0.5px each side). */
.cds--grid--condensed .cds--row,
.cds--row--condensed {
margin-right: -0.03125rem;
margin-left: -0.03125rem;
}
.cds--grid--condensed [class*="cds--col-"],
.cds--grid--condensed .cds--col,
.cds--row--condensed [class*="cds--col-"],
.cds--row--condensed .cds--col {
padding-right: 0.03125rem;
padding-left: 0.03125rem;
}
.cds--grid--condensed .cds--row + .cds--row,
.cds--row--condensed + .cds--row--condensed {
margin-top: 0.0625rem;
}
/* Narrow: gutter on the right edge only. */
.cds--grid--narrow .cds--row,
.cds--row--narrow {
margin-right: -1rem;
margin-left: 0;
}
.cds--grid--narrow [class*="cds--col-"],
.cds--grid--narrow .cds--col,
.cds--row--narrow [class*="cds--col-"],
.cds--row--narrow .cds--col {
padding-right: 1rem;
padding-left: 0;
}
.cds--no-gutter,
.cds--no-gutter--left {
padding-left: 0;
}
.cds--no-gutter,
.cds--no-gutter--right {
padding-right: 0;
}
/* --- sm: 4 columns, applies at every width ------------------------------- */
.cds--col-sm-0 { display: none; }
.cds--col-sm-1 { flex: 0 0 25%; max-width: 25%; }
.cds--col-sm-2 { flex: 0 0 50%; max-width: 50%; }
.cds--col-sm-3 { flex: 0 0 75%; max-width: 75%; }
.cds--col-sm-4 { flex: 0 0 100%; max-width: 100%; }
.cds--offset-sm-0 { margin-left: 0; }
.cds--offset-sm-1 { margin-left: 25%; }
.cds--offset-sm-2 { margin-left: 50%; }
.cds--offset-sm-3 { margin-left: 75%; }
/* --- md: 8 columns, >= 672px --------------------------------------------- */
@media (min-width: 42rem) {
.cds--col-md-0 { display: none; }
.cds--col-md-1 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
.cds--col-md-2 { display: block; flex: 0 0 25%; max-width: 25%; }
.cds--col-md-3 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
.cds--col-md-4 { display: block; flex: 0 0 50%; max-width: 50%; }
.cds--col-md-5 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
.cds--col-md-6 { display: block; flex: 0 0 75%; max-width: 75%; }
.cds--col-md-7 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
.cds--col-md-8 { display: block; flex: 0 0 100%; max-width: 100%; }
.cds--offset-md-0 { margin-left: 0; }
.cds--offset-md-1 { margin-left: 12.5%; }
.cds--offset-md-2 { margin-left: 25%; }
.cds--offset-md-3 { margin-left: 37.5%; }
.cds--offset-md-4 { margin-left: 50%; }
.cds--offset-md-5 { margin-left: 62.5%; }
.cds--offset-md-6 { margin-left: 75%; }
.cds--offset-md-7 { margin-left: 87.5%; }
}
/* --- lg: 16 columns, >= 1056px ------------------------------------------- */
@media (min-width: 66rem) {
.cds--col-lg-0 { display: none; }
.cds--col-lg-1 { display: block; flex: 0 0 6.25%; max-width: 6.25%; }
.cds--col-lg-2 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
.cds--col-lg-3 { display: block; flex: 0 0 18.75%; max-width: 18.75%; }
.cds--col-lg-4 { display: block; flex: 0 0 25%; max-width: 25%; }
.cds--col-lg-5 { display: block; flex: 0 0 31.25%; max-width: 31.25%; }
.cds--col-lg-6 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
.cds--col-lg-7 { display: block; flex: 0 0 43.75%; max-width: 43.75%; }
.cds--col-lg-8 { display: block; flex: 0 0 50%; max-width: 50%; }
.cds--col-lg-9 { display: block; flex: 0 0 56.25%; max-width: 56.25%; }
.cds--col-lg-10 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
.cds--col-lg-11 { display: block; flex: 0 0 68.75%; max-width: 68.75%; }
.cds--col-lg-12 { display: block; flex: 0 0 75%; max-width: 75%; }
.cds--col-lg-13 { display: block; flex: 0 0 81.25%; max-width: 81.25%; }
.cds--col-lg-14 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
.cds--col-lg-15 { display: block; flex: 0 0 93.75%; max-width: 93.75%; }
.cds--col-lg-16 { display: block; flex: 0 0 100%; max-width: 100%; }
.cds--offset-lg-0 { margin-left: 0; }
.cds--offset-lg-1 { margin-left: 6.25%; }
.cds--offset-lg-2 { margin-left: 12.5%; }
.cds--offset-lg-3 { margin-left: 18.75%; }
.cds--offset-lg-4 { margin-left: 25%; }
.cds--offset-lg-5 { margin-left: 31.25%; }
.cds--offset-lg-6 { margin-left: 37.5%; }
.cds--offset-lg-7 { margin-left: 43.75%; }
.cds--offset-lg-8 { margin-left: 50%; }
.cds--offset-lg-9 { margin-left: 56.25%; }
.cds--offset-lg-10 { margin-left: 62.5%; }
.cds--offset-lg-11 { margin-left: 68.75%; }
.cds--offset-lg-12 { margin-left: 75%; }
.cds--offset-lg-13 { margin-left: 81.25%; }
.cds--offset-lg-14 { margin-left: 87.5%; }
.cds--offset-lg-15 { margin-left: 93.75%; }
}
/* --- xlg: 16 columns, >= 1312px ------------------------------------------ */
@media (min-width: 82rem) {
.cds--col-xlg-0 { display: none; }
.cds--col-xlg-1 { display: block; flex: 0 0 6.25%; max-width: 6.25%; }
.cds--col-xlg-2 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
.cds--col-xlg-3 { display: block; flex: 0 0 18.75%; max-width: 18.75%; }
.cds--col-xlg-4 { display: block; flex: 0 0 25%; max-width: 25%; }
.cds--col-xlg-5 { display: block; flex: 0 0 31.25%; max-width: 31.25%; }
.cds--col-xlg-6 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
.cds--col-xlg-7 { display: block; flex: 0 0 43.75%; max-width: 43.75%; }
.cds--col-xlg-8 { display: block; flex: 0 0 50%; max-width: 50%; }
.cds--col-xlg-9 { display: block; flex: 0 0 56.25%; max-width: 56.25%; }
.cds--col-xlg-10 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
.cds--col-xlg-11 { display: block; flex: 0 0 68.75%; max-width: 68.75%; }
.cds--col-xlg-12 { display: block; flex: 0 0 75%; max-width: 75%; }
.cds--col-xlg-13 { display: block; flex: 0 0 81.25%; max-width: 81.25%; }
.cds--col-xlg-14 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
.cds--col-xlg-15 { display: block; flex: 0 0 93.75%; max-width: 93.75%; }
.cds--col-xlg-16 { display: block; flex: 0 0 100%; max-width: 100%; }
.cds--offset-xlg-0 { margin-left: 0; }
.cds--offset-xlg-1 { margin-left: 6.25%; }
.cds--offset-xlg-2 { margin-left: 12.5%; }
.cds--offset-xlg-3 { margin-left: 18.75%; }
.cds--offset-xlg-4 { margin-left: 25%; }
.cds--offset-xlg-5 { margin-left: 31.25%; }
.cds--offset-xlg-6 { margin-left: 37.5%; }
.cds--offset-xlg-7 { margin-left: 43.75%; }
.cds--offset-xlg-8 { margin-left: 50%; }
.cds--offset-xlg-9 { margin-left: 56.25%; }
.cds--offset-xlg-10 { margin-left: 62.5%; }
.cds--offset-xlg-11 { margin-left: 68.75%; }
.cds--offset-xlg-12 { margin-left: 75%; }
.cds--offset-xlg-13 { margin-left: 81.25%; }
.cds--offset-xlg-14 { margin-left: 87.5%; }
.cds--offset-xlg-15 { margin-left: 93.75%; }
}
/* --- max: 16 columns, >= 1584px ------------------------------------------ */
@media (min-width: 99rem) {
.cds--col-max-0 { display: none; }
.cds--col-max-1 { display: block; flex: 0 0 6.25%; max-width: 6.25%; }
.cds--col-max-2 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
.cds--col-max-3 { display: block; flex: 0 0 18.75%; max-width: 18.75%; }
.cds--col-max-4 { display: block; flex: 0 0 25%; max-width: 25%; }
.cds--col-max-5 { display: block; flex: 0 0 31.25%; max-width: 31.25%; }
.cds--col-max-6 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
.cds--col-max-7 { display: block; flex: 0 0 43.75%; max-width: 43.75%; }
.cds--col-max-8 { display: block; flex: 0 0 50%; max-width: 50%; }
.cds--col-max-9 { display: block; flex: 0 0 56.25%; max-width: 56.25%; }
.cds--col-max-10 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
.cds--col-max-11 { display: block; flex: 0 0 68.75%; max-width: 68.75%; }
.cds--col-max-12 { display: block; flex: 0 0 75%; max-width: 75%; }
.cds--col-max-13 { display: block; flex: 0 0 81.25%; max-width: 81.25%; }
.cds--col-max-14 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
.cds--col-max-15 { display: block; flex: 0 0 93.75%; max-width: 93.75%; }
.cds--col-max-16 { display: block; flex: 0 0 100%; max-width: 100%; }
.cds--offset-max-0 { margin-left: 0; }
.cds--offset-max-1 { margin-left: 6.25%; }
.cds--offset-max-2 { margin-left: 12.5%; }
.cds--offset-max-3 { margin-left: 18.75%; }
.cds--offset-max-4 { margin-left: 25%; }
.cds--offset-max-5 { margin-left: 31.25%; }
.cds--offset-max-6 { margin-left: 37.5%; }
.cds--offset-max-7 { margin-left: 43.75%; }
.cds--offset-max-8 { margin-left: 50%; }
.cds--offset-max-9 { margin-left: 56.25%; }
.cds--offset-max-10 { margin-left: 62.5%; }
.cds--offset-max-11 { margin-left: 68.75%; }
.cds--offset-max-12 { margin-left: 75%; }
.cds--offset-max-13 { margin-left: 81.25%; }
.cds--offset-max-14 { margin-left: 87.5%; }
.cds--offset-max-15 { margin-left: 93.75%; }
}
/* ---------------------------------------------------------------------------
* 8. BUTTONS
*
* Carbon buttons are asymmetric: the label sits hard left, the icon rides the
* far right. Every button carries a 3px transparent border which becomes the
* focus ring, so no variant changes size when focused.
*
* `--tertiary` draws its resting 1px rule with `outline` rather than `border`
* so that the 3px focus border is still available and the box never resizes.
* ------------------------------------------------------------------------ */
.cds--btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
max-width: 20rem;
min-height: 3rem;
padding: calc(0.875rem - 3px) 4rem calc(0.875rem - 3px) 1rem;
border: 3px solid transparent;
background-color: transparent;
color: var(--cds-text-on-color);
cursor: pointer;
font-family: var(--cds-font-sans);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0.16px;
text-align: left;
text-decoration: none;
vertical-align: top;
transition:
background-color var(--cds-duration-fast-01) var(--cds-ease-entrance),
border-color var(--cds-duration-fast-01) var(--cds-ease-entrance),
color var(--cds-duration-fast-01) var(--cds-ease-entrance),
outline-color var(--cds-duration-fast-01) var(--cds-ease-entrance);
}
.cds--btn:focus-visible {
border-color: var(--cds-focus);
outline: 1px solid var(--cds-focus-inset);
outline-offset: -3px;
}
.cds--btn__icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-left: auto;
fill: currentColor;
}
/* Label and icon never touch: `margin-left: auto` above plus the 4rem right
padding hold them apart at any button width. */
/* --- Variants ------------------------------------------------------------ */
.cds--btn--primary {
background-color: var(--cds-button-primary);
color: var(--cds-text-on-color);
}
.cds--btn--primary:hover {
background-color: var(--cds-button-primary-hover);
}
.cds--btn--primary:active {
background-color: var(--cds-button-primary-active);
}
.cds--btn--secondary {
background-color: var(--cds-button-secondary);
color: var(--cds-text-on-color);
}
.cds--btn--secondary:hover {
background-color: var(--cds-button-secondary-hover);
}
.cds--btn--secondary:active {
background-color: var(--cds-button-secondary-active);
}
.cds--btn--tertiary {
background-color: transparent;
color: var(--cds-button-tertiary);
outline: 1px solid var(--cds-button-tertiary);
outline-offset: -1px;
}
/* Once the tertiary button fills, its label is painted on the button colour
itself, so it takes --cds-text-inverse, not --cds-text-on-color. The two are
both #ffffff in the White theme; in Gray 100 the tertiary button is white
(Carbon's g100 value) and the label has to go dark to stay legible. */
.cds--btn--tertiary:hover {
background-color: var(--cds-button-tertiary-hover);
color: var(--cds-text-inverse);
outline-color: var(--cds-button-tertiary-hover);
}
.cds--btn--tertiary:active {
background-color: var(--cds-button-tertiary-active);
color: var(--cds-text-inverse);
outline-color: var(--cds-button-tertiary-active);
}
.cds--btn--tertiary:focus-visible {
background-color: var(--cds-button-tertiary);
color: var(--cds-text-inverse);
border-color: var(--cds-focus);
outline: 1px solid var(--cds-focus-inset);
outline-offset: -3px;
}
.cds--btn--ghost {
padding-right: 1rem;
background-color: transparent;
color: var(--cds-link-primary);
}
.cds--btn--ghost .cds--btn__icon {
margin-left: 0.5rem;
}
.cds--btn--ghost:hover {
background-color: var(--cds-button-ghost-hover);
color: var(--cds-link-primary-hover);
}
.cds--btn--ghost:active {
background-color: var(--cds-button-ghost-active);
color: var(--cds-link-primary-hover);
}
.cds--btn--danger {
background-color: var(--cds-button-danger-primary);
color: var(--cds-text-on-color);
}
.cds--btn--danger:hover {
background-color: var(--cds-button-danger-hover);
}
.cds--btn--danger:active {
background-color: var(--cds-button-danger-active);
}
.cds--btn--danger--tertiary {
background-color: transparent;
color: var(--cds-button-danger-secondary);
outline: 1px solid var(--cds-button-danger-secondary);
outline-offset: -1px;
}
.cds--btn--danger--tertiary:hover,
.cds--btn--danger--tertiary:active {
background-color: var(--cds-button-danger-hover);
color: var(--cds-text-on-color);
outline-color: var(--cds-button-danger-hover);
}
.cds--btn--danger--ghost {
padding-right: 1rem;
background-color: transparent;
color: var(--cds-button-danger-secondary);
}
.cds--btn--danger--ghost:hover,
.cds--btn--danger--ghost:active {
background-color: var(--cds-button-danger-hover);
color: var(--cds-text-on-color);
}
/* --- Sizes --------------------------------------------------------------- */
.cds--btn--sm {
min-height: 2rem;
padding-top: calc(0.375rem - 3px);
padding-bottom: calc(0.375rem - 3px);
}
.cds--btn--md {
min-height: 2.5rem;
padding-top: calc(0.675rem - 3px);
padding-bottom: calc(0.675rem - 3px);
}
.cds--btn--lg {
min-height: 3rem;
padding-top: calc(0.875rem - 3px);
padding-bottom: calc(0.875rem - 3px);
}
.cds--btn--xl {
min-height: 4rem;
padding-top: calc(0.875rem - 3px);
padding-bottom: calc(0.875rem - 3px);
align-items: flex-start;
}
.cds--btn--2xl {
min-height: 5rem;
padding-top: calc(0.875rem - 3px);
padding-bottom: calc(0.875rem - 3px);
align-items: flex-start;
}
/* Expressive: marketing CTAs. body-02 type on a 48px+ body. */
.cds--btn--expressive {
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
}
.cds--btn--expressive .cds--btn__icon {
width: 1.25rem;
height: 1.25rem;
}
.cds--btn--xl.cds--btn--expressive .cds--btn__icon,
.cds--btn--2xl.cds--btn--expressive .cds--btn__icon {
margin-top: 0.125rem;
}
/* --- Modifiers ----------------------------------------------------------- */
.cds--btn--icon-only {
justify-content: center;
min-width: 3rem;
padding-right: calc(0.875rem - 3px);
padding-left: calc(0.875rem - 3px);
}
.cds--btn--icon-only.cds--btn--sm { min-width: 2rem; }
.cds--btn--icon-only.cds--btn--md { min-width: 2.5rem; }
.cds--btn--icon-only .cds--btn__icon {
margin-left: 0;
padding-left: 0;
}
.cds--btn--full-width {
max-width: none;
width: 100%;
}
.cds--btn:disabled,
.cds--btn--disabled,
.cds--btn[aria-disabled="true"] {
background-color: var(--cds-button-disabled);
color: var(--cds-text-on-color-disabled);
outline: none;
border-color: transparent;
cursor: not-allowed;
pointer-events: none;
}
.cds--btn--ghost:disabled,
.cds--btn--tertiary:disabled {
background-color: transparent;
color: var(--cds-text-disabled);
outline: 1px solid var(--cds-border-disabled);
outline-offset: -1px;
}
/* Button set — Carbon lays adjacent buttons flush with a 1px separator. */
.cds--btn-set {
display: flex;
flex-wrap: wrap;
gap: var(--cds-spacing-03);
}
.cds--btn-set--stacked {
flex-direction: column;
align-items: flex-start;
}
/* ---------------------------------------------------------------------------
* 9. LINKS
* ------------------------------------------------------------------------ */
.cds--link {
display: inline;
color: var(--cds-link-primary);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.42857;
letter-spacing: 0.16px;
text-decoration: none;
outline: none;
transition: color var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cds--link:hover {
color: var(--cds-link-primary-hover);
text-decoration: underline;
}
.cds--link:active {
color: var(--cds-text-primary);
text-decoration: underline;
}
.cds--link:visited {
color: var(--cds-link-visited);
}
.cds--link:visited:hover {
color: var(--cds-link-primary-hover);
}
/* Inline links sit inside running text, so the focus ring goes just outside
the glyphs rather than inset over them. */
.cds--link:focus-visible {
outline: 2px solid var(--cds-focus);
outline-offset: 2px;
}
.cds--link--inline {
text-decoration: underline;
text-underline-offset: 0.125rem;
}
.cds--link--inline:visited {
color: var(--cds-link-visited);
text-decoration: underline;
}
.cds--link--sm {
font-size: 0.75rem;
line-height: 1.33333;
letter-spacing: 0.32px;
}
.cds--link--lg {
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0;
}
.cds--link--disabled,
.cds--link[aria-disabled="true"] {
color: var(--cds-text-disabled);
cursor: not-allowed;
pointer-events: none;
text-decoration: none;
}
.cds--link--disabled:hover {
color: var(--cds-text-disabled);
text-decoration: none;
}
.cds--link--visited:visited {
color: var(--cds-link-visited);
}
.cds--link__icon {
display: inline-flex;
align-items: center;
width: 1rem;
height: 1rem;
margin-left: 0.25rem;
vertical-align: middle;
}
/* ---------------------------------------------------------------------------
* 10. UI SHELL HEADER
*
* The shell is ALWAYS Gray 100 with white text. It does not follow the page
* theme — that is Carbon behaviour, not an oversight.
*
* .cds--header fixed 48px banner
* .cds--header__name wordmark link
* .cds--header__name--prefix "Campus"
* .cds--header__nav desktop nav (hidden below 66rem)
* .cds--header__nav--expanded nav revealed as a panel on narrow screens
* .cds--header__menu-bar of nav items
* .cds--header__menu-item nav
* .cds--header__global right-aligned action cluster
* .cds--header__action 48x48 icon action
* .cds--header__menu-toggle hamburger, hidden from 66rem up
* .cds--header__submenu wrapper for a global menu
* .cds--header-panel panel dropped from a global action
* .cds--switcher list of items inside a header panel
* .cds--header__action--notification-count unread badge on an action
* ------------------------------------------------------------------------ */
.cds--header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 8000;
display: flex;
align-items: center;
height: 3rem;
border-bottom: 1px solid var(--cds-shell-border);
background-color: var(--cds-shell-background);
color: var(--cds-shell-text-primary);
font-family: var(--cds-font-sans);
}
.cds--header a,
.cds--header button {
font-family: inherit;
}
/* --- Wordmark ------------------------------------------------------------ */
.cds--header__name {
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--cds-spacing-07) 0 var(--cds-spacing-05);
border: 2px solid transparent;
color: var(--cds-shell-text-primary);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.28572;
letter-spacing: 0.16px;
text-decoration: none;
outline: none;
user-select: none;
white-space: nowrap;
transition: border-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}
.cds--header__name:hover {
color: #ffffff;
}
.cds--header__name:focus-visible {
border-color: var(--cds-shell-focus);
}
.cds--header__name--prefix {
font-weight: 400;
letter-spacing: 0.16px;
}
/* When the wordmark is prefix + product name, separate them. */
.cds--header__name--prefix + * {
margin-left: 0.25rem;
}
/* --- Navigation ---------------------------------------------------------- */
.cds--header__nav {
position: relative;
display: none;
height: 100%;
padding-left: var(--cds-spacing-05);
}
.cds--header__nav::before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 1px;
height: 1.5rem;
background-color: var(--cds-shell-border);
content: "";
transform: translateY(-50%);
}
@media (min-width: 66rem) {
.cds--header__nav {
display: block;
}
}
.cds--header__menu-bar {
display: flex;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.cds--header__menu-item {
position: relative;
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--cds-spacing-05);
/* 3px top border keeps the label optically centred against the 3px bottom
border that becomes the active indicator. */
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
background-color: transparent;
color: var(--cds-shell-text-secondary);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0.16px;
text-decoration: none;
white-space: nowrap;
outline: none;
transition:
background-color var(--cds-duration-fast-01) var(--cds-ease-standard),
border-color var(--cds-duration-fast-01) var(--cds-ease-standard),
color var(--cds-duration-fast-01) var(--cds-ease-standard);
}
.cds--header__menu-item:hover {
background-color: var(--cds-shell-hover);
border-bottom-color: var(--cds-border-interactive);
color: var(--cds-shell-text-primary);
}
.cds--header__menu-item:active,
.cds--header__menu-item--current,
.cds--header__menu-item[aria-current="page"] {
background-color: var(--cds-shell-hover);
border-bottom-color: var(--cds-border-interactive);
color: var(--cds-shell-text-primary);
}
.cds--header__menu-item:focus-visible {
border-color: var(--cds-shell-focus);
outline: none;
}
/* --- Global actions ------------------------------------------------------ */
.cds--header__global {
display: flex;
height: 100%;
flex: 1 1 0;
align-items: center;
justify-content: flex-end;
}
.cds--header__action {
display: flex;
width: 3rem;
height: 3rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 0;
border: 2px solid transparent;
background-color: transparent;
color: var(--cds-shell-text-primary);
cursor: pointer;
outline: none;
transition:
background-color var(--cds-duration-fast-01) var(--cds-ease-standard),
border-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}
.cds--header__action:hover {
background-color: var(--cds-shell-hover);
}
.cds--header__action:focus-visible {
border-color: var(--cds-shell-focus);
}
.cds--header__action--active {
background-color: var(--cds-shell-hover);
border-right-color: var(--cds-shell-border);
border-left-color: var(--cds-shell-border);
}
.cds--header__action svg {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
/* A plain text label sitting in the global cluster (e.g. account email). */
.cds--header__global-text {
display: none;
max-width: 16rem;
overflow: hidden;
padding: 0 var(--cds-spacing-05);
color: var(--cds-shell-text-muted);
font-size: 0.75rem;
line-height: 1.33333;
letter-spacing: 0.32px;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 42rem) {
.cds--header__global-text {
display: block;
}
}
/* --- Narrow screens ------------------------------------------------------ */
.cds--header__menu-toggle {
display: flex;
width: 3rem;
height: 3rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 0;
border: 2px solid transparent;
background-color: transparent;
color: var(--cds-shell-text-primary);
cursor: pointer;
outline: none;
transition: background-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}
.cds--header__menu-toggle:hover {
background-color: var(--cds-shell-hover);
}
.cds--header__menu-toggle:focus-visible {
border-color: var(--cds-shell-focus);
}
.cds--header__menu-toggle svg {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
@media (min-width: 66rem) {
.cds--header__menu-toggle,
.cds--header__menu-toggle--hidden {
display: none;
}
}
/* Below 66rem the nav can be revealed as a panel under the header by adding
`cds--header__nav--expanded` (toggled from the menu button). */
@media (max-width: 65.98rem) {
.cds--header__nav--expanded {
position: fixed;
top: 3rem;
right: 0;
left: 0;
z-index: 7999;
display: block;
height: auto;
max-height: calc(100vh - 3rem);
overflow-y: auto;
padding-left: 0;
border-bottom: 1px solid var(--cds-shell-border);
background-color: var(--cds-shell-background);
}
.cds--header__nav--expanded::before {
display: none;
}
.cds--header__nav--expanded .cds--header__menu-bar {
flex-direction: column;
height: auto;
}
.cds--header__nav--expanded .cds--header__menu-item {
height: 3rem;
border-top: 0;
border-bottom: 1px solid var(--cds-shell-border);
border-left: 3px solid transparent;
}
.cds--header__nav--expanded .cds--header__menu-item:hover,
.cds--header__nav--expanded .cds--header__menu-item--current,
.cds--header__nav--expanded .cds--header__menu-item[aria-current="page"] {
border-bottom-color: var(--cds-shell-border);
border-left-color: var(--cds-border-interactive);
}
}
/* --- Global-cluster composition ------------------------------------------
* Carbon's shell has no canonical slot for a marketing CTA, so the primary
* button is trimmed to shell density (32px, tighter right padding) — the
* asymmetric page-level button shape is untouched everywhere else.
* ------------------------------------------------------------------------ */
.cds--header__global .cds--header__menu-item {
flex-shrink: 0;
}
.cds--header__global .cds--btn {
min-height: 2rem;
padding-right: var(--cds-spacing-05);
margin-right: var(--cds-spacing-05);
margin-left: var(--cds-spacing-03);
}
@media (max-width: 41.98rem) {
/* At 320px the shell fits the wordmark, the toggles and one CTA — no more.
The nav panel's own "Log in" (#campus-nav-login) takes over below 42rem. */
.cds--header__name {
padding-right: var(--cds-spacing-05);
}
.cds--header__global .cds--header__menu-item {
display: none;
}
.cds--header__global .cds--btn {
margin-right: var(--cds-spacing-03);
margin-left: 0;
}
}
@media (min-width: 42rem) {
#campus-nav-login {
display: none;
}
}
/* --- Header panel and its disclosure -------------------------------------
* `.cds--header__submenu` wraps a native ; its carries
* `.cds--header__action`, so the notification bell and the account menu open
* with no JavaScript. `.cds--header` is `position: fixed` and is therefore the
* containing block: every panel drops flush with the header's right edge
* instead of hanging off its trigger.
* ------------------------------------------------------------------------ */
.cds--header__submenu {
display: flex;
height: 100%;
align-items: center;
}
.cds--header__submenu > summary {
list-style: none;
}
.cds--header__submenu > summary::-webkit-details-marker {
display: none;
}
.cds--header__submenu[open] > .cds--header__action {
background-color: var(--cds-shell-hover);
border-right-color: var(--cds-shell-border);
border-left-color: var(--cds-shell-border);
}
.cds--header__action {
position: relative;
}
/* Unread count. Square — Carbon's only radii are the tag and the spinner. */
.cds--header__action--notification-count {
position: absolute;
top: 0.5rem;
right: 0.5rem;
min-width: 1rem;
height: 1rem;
padding: 0 0.1875rem;
background-color: var(--cds-support-error);
color: #ffffff;
font-size: 0.625rem;
font-weight: 600;
line-height: 1rem;
letter-spacing: 0.32px;
text-align: center;
}
.cds--header-panel {
position: absolute;
top: var(--cds-header-height);
right: 0;
width: 20rem;
max-width: 100vw;
max-height: calc(100vh - var(--cds-header-height));
overflow-y: auto;
border: 1px solid var(--cds-shell-border);
border-top: 0;
background-color: var(--cds-gray-90);
color: var(--cds-shell-text-secondary);
}
/* --- Switcher — the list inside a header panel --------------------------- */
.cds--switcher {
display: flex;
flex-direction: column;
padding: var(--cds-spacing-03) 0;
margin: 0;
list-style: none;
}
.cds--switcher__item {
width: 100%;
}
.cds--switcher__item-link {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: var(--cds-spacing-05);
padding: var(--cds-spacing-04) var(--cds-spacing-05);
background-color: transparent;
color: var(--cds-shell-text-secondary);
font-family: var(--cds-font-sans);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0.16px;
text-align: left;
text-decoration: none;
transition:
background-color var(--cds-duration-fast-01) var(--cds-ease-standard),
color var(--cds-duration-fast-01) var(--cds-ease-standard);
}
.cds--switcher__item-link:hover,
.cds--switcher__item-link--selected {
background-color: var(--cds-shell-hover);
color: #ffffff;
}
.cds--switcher__item--divider {
padding: var(--cds-spacing-03) var(--cds-spacing-05);
}
.cds--switcher__item--divider hr {
border-top-color: var(--cds-shell-border);
}
/* --- Panel contents specific to Campus -----------------------------------
* Carbon has no notification-panel component in the open-source shell; these
* few classes compose one out of shell tokens.
* ------------------------------------------------------------------------ */
.campus-header-panel__title {
padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-04);
border-bottom: 1px solid var(--cds-shell-border);
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.28572;
letter-spacing: 0.16px;
}
.campus-header-panel__account {
padding: var(--cds-spacing-04) var(--cds-spacing-05);
color: var(--cds-shell-text-muted);
font-size: 0.75rem;
line-height: 1.33333;
letter-spacing: 0.32px;
overflow-wrap: anywhere;
}
.campus-notification {
padding: var(--cds-spacing-04) var(--cds-spacing-05);
}
.campus-notification + .campus-notification {
border-top: 1px solid var(--cds-shell-border);
}
.campus-notification__meta {
color: var(--cds-shell-text-muted);
font-family: var(--cds-font-mono);
font-size: 0.75rem;
line-height: 1.33333;
letter-spacing: 0.32px;
}
.campus-notification__text {
margin-top: var(--cds-spacing-02);
color: var(--cds-shell-text-secondary);
font-size: 0.875rem;
line-height: 1.28572;
letter-spacing: 0.16px;
overflow-wrap: anywhere;
}
.campus-notification__empty {
padding: var(--cds-spacing-05);
color: var(--cds-shell-text-muted);
font-size: 0.875rem;
line-height: 1.42857;
letter-spacing: 0.16px;
}
/* ---------------------------------------------------------------------------
* 11. SKIP TO CONTENT
* First focusable element on every page. Visually hidden until focused.
* ------------------------------------------------------------------------ */
.cds--skip-to-content {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
border: 0;
margin: -1px;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.cds--skip-to-content:focus {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
width: auto;
height: 3rem;
align-items: center;
padding: 0 var(--cds-spacing-05);
border: 4px solid var(--cds-focus);
margin: 0;
clip: auto;
background-color: var(--cds-background);
color: var(--cds-text-primary);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.28572;
letter-spacing: 0.16px;
outline: none;
overflow: visible;
text-decoration: none;
}
/* ---------------------------------------------------------------------------
* 12. SHELL CONTENT REGION
* `body` already carries the 3rem offset for the fixed header, so
* `.cds--content` only supplies the shell's standard inner padding.
* ------------------------------------------------------------------------ */
.cds--content {
display: block;
padding: var(--cds-spacing-07);
}
@media (max-width: 41.98rem) {
.cds--content {
padding: var(--cds-spacing-05);
}
}
.cds--content--flush {
padding: 0;
}
/* ---------------------------------------------------------------------------
* 13. SITE FOOTER SHELL (.campus-footer)
*
* Class contract for src/views/partials/footer.ejs — use these names exactly.
* Like the UI Shell header, the footer is always Gray 100; it does not follow
* the page theme.
*
* .campus-footer