/* * DfCDR documentation identity for the NextGen MIS User Guide. * * Brings the DfCDR "Documentation Style Guide" (the PDF/Word house style) onto * the public Zensical build: the navy primary palette and the callout-box look * (tinted background + coloured left border + small uppercase label). Wired in * via `extra_css` in mkdocs.public.yml — this file is PUBLIC-build only; the * internal engineering docs (mkdocs.yml) keep Material's stock indigo. * * Source of truth for the hex values is the DfCDR Documentation Style Guide * "Quick Reference — All Hex Codes". Keep these in sync if that guide changes. */ :root { /* DfCDR palette --------------------------------------------------------- */ --dfcdr-navy: #3d4476; /* headings, nav, primary UI */ --dfcdr-navy-dark: #2a2f55; /* hover / dark accents */ --dfcdr-teal-dark: #1a2e35; /* primary body text */ --dfcdr-sage: #657e6b; /* step / process */ --dfcdr-amber: #e19c2c; /* warnings, highlights */ --dfcdr-rust: #b65829; /* alerts, notes header */ --dfcdr-gray: #8792a8; /* neutral note border/label */ } /* Primary + accent — the palette entries use `custom`, so Material/Zensical * hangs these attributes on . We set them for both, and also on :root as * a belt-and-braces fallback for the alpha Zensical builder. */ [data-md-color-primary="custom"] { --md-primary-fg-color: var(--dfcdr-navy); --md-primary-fg-color--light: #565d94; --md-primary-fg-color--dark: var(--dfcdr-navy-dark); --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: #ffffffb3; } [data-md-color-accent="custom"] { --md-accent-fg-color: var(--dfcdr-rust); --md-accent-fg-color--transparent: #b6582914; --md-accent-bg-color: #ffffff; --md-accent-bg-color--light: #ffffffb3; } :root { --md-primary-fg-color: var(--dfcdr-navy); --md-accent-fg-color: var(--dfcdr-rust); } /* Links pick up the navy so body copy matches the header. */ .md-typeset a { color: var(--dfcdr-navy); } [data-md-color-scheme="slate"] .md-typeset a { color: #98a0d8; } /* ─── Callout boxes ─────────────────────────────────────────────────────── * DfCDR house style: the WHOLE box is tinted, a 3px left border carries the * type colour, and the title is a small uppercase coloured label. We drive it * off one per-type variable (--dfcdr-accent) and mix the tint against the * theme background with color-mix() so it stays readable in dark mode too. */ .md-typeset .admonition, .md-typeset details { --dfcdr-accent: var(--dfcdr-navy); border: none; border-left: 3px solid var(--dfcdr-accent); border-radius: 3px; background-color: color-mix(in srgb, var(--dfcdr-accent) 9%, var(--md-default-bg-color)); box-shadow: none; font-size: 0.72rem; } .md-typeset .admonition-title, .md-typeset summary { background-color: transparent; border: none; padding-top: 0.5rem; padding-bottom: 0.2rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; /* Nudge the label toward the theme text colour so navy/gray stay legible in * dark mode while keeping their hue. */ color: color-mix(in srgb, var(--dfcdr-accent), var(--md-default-fg-color) 20%); } .md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--dfcdr-accent); } /* Per-type accent colours — mapped from the DfCDR callout catalogue. */ .md-typeset .admonition.info, .md-typeset details.info { --dfcdr-accent: var(--dfcdr-navy); /* Information */ } .md-typeset .admonition.note, .md-typeset details.note { --dfcdr-accent: var(--dfcdr-gray); /* Note */ } .md-typeset .admonition.tip, .md-typeset details.tip, .md-typeset .admonition.success, .md-typeset details.success, .md-typeset .admonition.hint, .md-typeset details.hint { --dfcdr-accent: var(--dfcdr-sage); /* Step / Action */ } .md-typeset .admonition.warning, .md-typeset details.warning, .md-typeset .admonition.caution, .md-typeset details.caution, .md-typeset .admonition.attention, .md-typeset details.attention { --dfcdr-accent: var(--dfcdr-amber); /* Warning */ } .md-typeset .admonition.danger, .md-typeset details.danger, .md-typeset .admonition.failure, .md-typeset details.failure, .md-typeset .admonition.error, .md-typeset details.error, .md-typeset .admonition.bug, .md-typeset details.bug { --dfcdr-accent: var(--dfcdr-rust); /* Alert / Error */ } .md-typeset .admonition.question, .md-typeset details.question, .md-typeset .admonition.example, .md-typeset details.example, .md-typeset .admonition.quote, .md-typeset details.quote, .md-typeset .admonition.abstract, .md-typeset details.abstract { --dfcdr-accent: var(--dfcdr-navy); } /* ─── Headings ──────────────────────────────────────────────────────────── * DfCDR headings are navy. Keep body text on the theme default for contrast. */ .md-typeset h1, .md-typeset h2, .md-typeset h3 { color: var(--dfcdr-navy); } [data-md-color-scheme="slate"] .md-typeset h1, [data-md-color-scheme="slate"] .md-typeset h2, [data-md-color-scheme="slate"] .md-typeset h3 { color: #b7bde4; } /* ─── Tables ────────────────────────────────────────────────────────────── * DfCDR: navy header row, white header text, ice-blue zebra striping. */ .md-typeset table:not([class]) th { background-color: var(--dfcdr-navy); color: #ffffff; } .md-typeset table:not([class]) tr:nth-child(even) td { background-color: color-mix(in srgb, var(--dfcdr-navy) 6%, var(--md-default-bg-color)); }