/* ============================================================================ Base Operations Help Center — brand bridge ---------------------------------------------------------------------------- Maps the Base Operations design system onto MkDocs Material's variables. Rule from the design system readme: "Link styles.css. Never redeclare values." So this file declares NO colors, sizes or spacing of its own — every value below is a var() reference into design-system/tokens/. If a token changes upstream, re-copy tokens/ and this file needs no edits. Token source: 3-Resources/design-system (synced from claude.ai/design project 827352e4-a5e0-4f23-84e4-7ece68c90d5e). ========================================================================== */ @import url("design-system/tokens/fonts.css"); @import url("design-system/tokens/colors.css"); @import url("design-system/tokens/typography.css"); @import url("design-system/tokens/spacing.css"); @import url("design-system/tokens/motion.css"); /* ---------------------------------------------------------------- type ---- */ :root { --md-text-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --md-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* --------------------------------------------------------- dark (default) -- */ /* Material sets data-md-color-scheme on , NOT on :root. That matters: whichever scheme block matches redefines the semantic layer for everything below it, so the two blocks must be symmetric. Each one restates the full semantic set — otherwise switching to light leaves light values inherited when you switch back, and the themes bleed into each other. These are token references, not new values: the dark semantics come from the primitives in colors.css, which is the same ramp its own :root block uses. */ [data-md-color-scheme="baseops-dark"] { --surface-primary: var(--gray-800); --surface-secondary: var(--gray-700); --surface-elevated: var(--gray-700); --text-primary: var(--white); --text-secondary: var(--gray-400); --text-tertiary: var(--gray-500); --text-muted: var(--gray-600); --border-default: var(--gray-600); --border-strong: var(--gray-400); --accent-text: var(--base-yellow); --accent-surface: rgba(253, 216, 53, 0.10); --focus-ring: var(--base-yellow); --md-default-bg-color: var(--surface-primary); --md-default-bg-color--light: var(--surface-secondary); --md-default-bg-color--lighter: var(--surface-tertiary); --md-default-fg-color: var(--text-primary); --md-default-fg-color--light: var(--text-secondary); --md-default-fg-color--lighter: var(--text-tertiary); --md-default-fg-color--lightest: var(--text-muted); --md-primary-fg-color: var(--base-black); --md-primary-fg-color--light: var(--surface-secondary); --md-primary-fg-color--dark: var(--base-black); --md-primary-bg-color: var(--text-primary); --md-primary-bg-color--light: var(--text-secondary); --md-accent-fg-color: var(--base-yellow); --md-accent-fg-color--transparent: var(--accent-surface); --md-accent-bg-color: var(--on-accent); --md-typeset-color: var(--text-primary); --md-typeset-a-color: var(--accent-text); --md-typeset-mark-color: var(--accent-surface); --md-code-bg-color: var(--gray-900); --md-code-fg-color: var(--text-secondary); --md-footer-bg-color: var(--base-black); --md-footer-bg-color--dark: var(--base-black); --md-footer-fg-color: var(--text-primary); --md-footer-fg-color--light: var(--text-tertiary); --md-footer-fg-color--lighter: var(--text-muted); --bo-rule: var(--border-default); --bo-hairline: var(--gray-700); color-scheme: dark; } /* ------------------------------------------------------------------ light -- */ /* The design system keeps light for "print, PDF and long-form reading" — which is what a help center is — so it is a first-class theme here, not a afterthought. Values come from the [data-theme="light"] block in colors.css, re-pointed onto this scheme. */ [data-md-color-scheme="baseops-light"] { --surface-primary: #FAFAFA; --surface-secondary: #F3F4F7; --surface-tertiary: #E4E7EC; --surface-elevated: #FFFFFF; --text-primary: #1C1D1F; --text-secondary: #505967; --text-tertiary: #8A93A1; --text-muted: #BFC4CC; --border-default: #E4E7EC; --border-strong: #31393A; --accent-text: #C6A700; --accent-surface: rgba(253, 216, 53, 0.12); --focus-ring: #C6A700; --md-default-bg-color: var(--surface-primary); --md-default-bg-color--light: var(--surface-secondary); --md-default-bg-color--lighter: var(--surface-tertiary); --md-default-fg-color: var(--text-primary); --md-default-fg-color--light: var(--text-secondary); --md-default-fg-color--lighter: var(--text-tertiary); --md-default-fg-color--lightest: var(--text-muted); --md-primary-fg-color: var(--base-black); --md-primary-bg-color: var(--white); --md-accent-fg-color: var(--dark-yellow); --md-accent-fg-color--transparent: var(--accent-surface); --md-typeset-color: var(--text-primary); --md-typeset-a-color: var(--accent-text); --md-code-bg-color: var(--gray-100); --md-code-fg-color: var(--gray-800); --md-footer-bg-color: var(--base-black); --md-footer-bg-color--dark: var(--base-black); --md-footer-fg-color: var(--white); --md-footer-fg-color--light: var(--gray-400); --bo-rule: var(--border-default); --bo-hairline: var(--gray-200); color-scheme: light; } /* ============================ typographic ramp ============================ */ /* The system specifies one weight per heading level and intentional tracking. Material's defaults are lighter and looser, so restate the ramp using the type tokens. Sizes step down on small screens — the tokens are the desktop ceiling, not a fixed value. */ .md-typeset h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.35rem); font-weight: var(--font-bold); line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); } .md-typeset h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.7rem); font-weight: var(--font-bold); line-height: 1.2; letter-spacing: -0.005em; color: var(--text-primary); margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--bo-hairline); } .md-typeset h3 { font-size: 1.25rem; font-weight: var(--font-bold); line-height: 1.25; color: var(--text-primary); margin-top: var(--space-8); } .md-typeset h4 { font-size: 1.05rem; font-weight: var(--font-semibold); line-height: 1.3; color: var(--text-primary); } .md-typeset h5, .md-typeset h6 { font-size: var(--text-body); font-weight: var(--font-semibold); text-transform: none; letter-spacing: 0; color: var(--text-primary); } /* The first h2 on a page follows the lead paragraph — no rule needed there. */ .md-typeset h1 + h2 { border-top: 0; margin-top: var(--space-8); padding-top: 0; } .md-typeset { line-height: var(--leading-body); color: var(--text-primary); } .md-typeset p, .md-typeset li, .md-typeset td { color: var(--text-primary); } /* Lead paragraph: the sentence under the h1 carries the page. */ .md-typeset h1 + p { font-size: var(--text-body-lg); color: var(--text-secondary); max-width: 62ch; } /* Measure. Long-form reading is the job; full-bleed prose is not. */ .md-typeset p, .md-typeset li { max-width: 78ch; } /* Every figure that sits in a column gets tabular numerals. */ .md-typeset table td, .md-typeset table th { font-variant-numeric: tabular-nums; } /* ================================= chrome ================================= */ /* Header is the true-black marketing canvas, not the charcoal UI surface. */ .md-header { background: var(--base-black); border-bottom: 1px solid var(--bo-hairline); box-shadow: none; } .md-header--shadow { box-shadow: none; } .md-header__title { font-weight: var(--font-semibold); letter-spacing: -0.01em; } .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.4rem; width: auto; } .md-tabs { background: var(--base-black); } /* Sidebars */ .md-nav { font-size: var(--text-body-sm); } .md-nav__title { font-size: var(--text-micro); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--text-tertiary); } .md-nav__link { transition: color var(--motion-fast) var(--easing); } .md-nav__link--active, .md-nav__link[aria-current="page"] { color: var(--accent-text); font-weight: var(--font-medium); } /* Section labels in the left nav read as overlines. */ .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { font-size: var(--text-micro); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--text-tertiary); } /* Search */ .md-search__form { border-radius: var(--radius-md); } [data-md-color-scheme="baseops-dark"] .md-search__form { background: var(--surface-secondary); } [data-md-color-scheme="baseops-dark"] .md-search__form:hover { background: var(--surface-tertiary); } /* Footer */ .md-footer-meta { background: var(--base-black); } /* ================================ content ================================= */ /* Links: yellow is the only warm color and it signals action. Underline on hover rather than permanently, so body copy stays calm. */ /* Link colour is set explicitly per scheme rather than relying on --md-typeset-a-color: Material also assigns that variable inside media blocks, which beat our token mapping and left light-theme links at the bright #FDD835 — roughly 1.5:1 on #FAFAFA, i.e. unreadable. The darker #C6A700 the design system specifies for light clears 4.5:1. */ body[data-md-color-scheme="baseops-dark"] .md-typeset a { color: var(--base-yellow); } body[data-md-color-scheme="baseops-light"] .md-typeset a { color: var(--dark-yellow); } /* #C6A700 on #FAFAFA measures 2.25:1 — brand-correct but under WCAG AA (4.5:1). Until that is decided, light links carry a permanent underline so colour is not the only thing marking them. Dark mode measures 12.09:1 and needs none. */ body[data-md-color-scheme="baseops-light"] .md-typeset a { border-bottom-color: currentColor; } .md-typeset a { text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--motion-fast) var(--easing), border-color var(--motion-fast) var(--easing); } body[data-md-color-scheme="baseops-dark"] .md-typeset a:hover { color: var(--base-yellow); border-bottom-color: var(--base-yellow); } body[data-md-color-scheme="baseops-light"] .md-typeset a:hover { color: var(--base-black); border-bottom-color: var(--base-black); } /* Tables — analyst-grade density. */ .md-typeset table:not([class]) { border: 1px solid var(--bo-rule); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--text-body-sm); box-shadow: none; } .md-typeset table:not([class]) th { background: var(--surface-secondary); color: var(--text-primary); font-weight: var(--font-semibold); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--bo-rule); } .md-typeset table:not([class]) td { border-top: 1px solid var(--bo-hairline); } .md-typeset table:not([class]) tr:hover td { background: var(--accent-surface); } /* Code */ .md-typeset code { border-radius: var(--radius-sm); font-size: 0.85em; } .md-typeset pre > code { border-radius: var(--radius-md); } /* Admonitions — squared to the system's radii, hairline borders, no shadow. Colors stay semantic: info/note carry the accent, danger carries --alert. */ .md-typeset .admonition, .md-typeset details { border-radius: var(--radius-lg); border: 1px solid var(--bo-rule); border-left-width: 3px; box-shadow: none; font-size: var(--text-body-sm); background: var(--surface-secondary); } .md-typeset .admonition-title, .md-typeset summary { font-weight: var(--font-semibold); letter-spacing: 0; background: transparent; } .md-typeset .admonition.note, .md-typeset .admonition.info, .md-typeset .admonition.tip { border-left-color: var(--base-yellow); } .md-typeset .note > .admonition-title::before, .md-typeset .info > .admonition-title::before, .md-typeset .tip > .admonition-title::before { background-color: var(--base-yellow); } .md-typeset .admonition.warning { border-left-color: var(--warning); } .md-typeset .warning > .admonition-title::before { background-color: var(--warning); } .md-typeset .admonition.danger { border-left-color: var(--alert); } .md-typeset .danger > .admonition-title::before { background-color: var(--alert); } /* Screenshots — cropped tight, never stretched, hero radius. */ .md-typeset img { border-radius: var(--radius-lg); border: 1px solid var(--bo-hairline); } /* Figures are shrink-to-fit by default, which collapsed a width:100% iframe. Force the figure to the full content column. */ .md-typeset figure.bo-video { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .md-typeset .bo-video video { width: 100%; border-radius: var(--radius-lg); } /* The explainer is responsive (#app is min(100%,1080px), #stage is 16/9) but it also renders ~85px of controls under the stage plus 24px body padding top and bottom. A plain 16/9 iframe therefore clips it and produces a scrollbar. Reserve the ratio plus that chrome: measured 85 + 48 = 133px, less the 32px of horizontal body padding the stage does not span. */ .md-typeset .bo-video-frame { position: relative; width: 100%; padding-top: calc(56.25% + 120px); } .md-typeset .bo-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); background: var(--base-black); } /* Focus ring per the system. */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* ========================= BaseScore quintile ramp ========================= */ /* The ramp is RESERVED for BaseScore risk tiers. Used here on the canonical tier table only — so a reader who has seen Q5 magenta in the product reads the same signal here. Never applied decoratively. Color never carries meaning alone: the tier name is always present. */ .bo-tier { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-semibold); white-space: nowrap; } .bo-tier::before { content: ""; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); flex: none; } .bo-tier--very-low::before { background: var(--q1); } .bo-tier--low::before { background: var(--q2); } .bo-tier--medium::before { background: var(--q3); } .bo-tier--high::before { background: var(--q4); } .bo-tier--critical::before { background: var(--q5); } .bo-range { font-variant-numeric: tabular-nums; color: var(--text-tertiary); font-size: var(--text-caption); display: block; } /* ================================== home ================================== */ /* The only permitted background art is the H3 hex grid, watermark strength, never rotated: <=15% dark, <=8% light. */ .bo-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--bo-rule); padding: var(--space-16) var(--space-12); margin-bottom: var(--space-12); background: var(--base-black); } /* The design system permits the H3 hex grid as background art at watermark strength. The shipped asset (assets/hero-map-texture.png) is unusable — it is a truncated screen capture, ~90% blank white, with the platform's own header chrome baked into the top strip. Flagged upstream. Until a real tileable hex asset exists, the hero stays a plain base-black canvas, which is what the system calls for anyway: "90% of any surface is --base-black". A faint accent hairline marks the top edge instead. */ .bo-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--base-yellow), transparent 55%); opacity: 0.6; pointer-events: none; } .bo-hero > * { position: relative; z-index: 1; } .md-typeset .bo-hero .bo-eyebrow { font-size: var(--text-caption); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--base-yellow); margin: 0 0 var(--space-4); } .md-typeset .bo-hero h1 { color: var(--white); margin: 0 0 var(--space-4); max-width: 20ch; } .md-typeset .bo-hero p { color: var(--gray-400); font-size: var(--text-body-lg); max-width: 52ch; margin: 0; } .md-typeset .bo-hero .bo-tagline { color: var(--base-yellow); font-weight: var(--font-medium); margin-top: var(--space-6); font-size: var(--text-body); } /* Landing cards */ .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { border: 1px solid var(--bo-rule); border-radius: var(--radius-lg); box-shadow: none; transition: border-color var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing); } .md-typeset .grid.cards > ul > li:hover { border-color: var(--base-yellow); background: var(--accent-surface); box-shadow: none; } /* Stat strip on the home page. */ .md-typeset ul.bo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-6); margin: var(--space-10) 0 var(--space-12); padding: 0; list-style: none; } .md-typeset ul.bo-stats > li { margin: 0; max-width: none; list-style: none; } .md-typeset ul.bo-stats > li::marker { content: none; } .md-typeset ul.bo-stats .bo-stat-n { display: block; font-size: var(--text-h3); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.1; } .md-typeset ul.bo-stats .bo-stat-l { display: block; font-size: var(--text-caption); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-top: var(--space-2); } /* Print: the system says light is the print theme. */ @media print { .bo-hero { background: none; border: 1px solid var(--bo-rule); } .bo-hero::after { display: none; } }