/* ────────────────────────────────────────────────────────────────────── * vibe-apps brand skin for the public Hex Trust Help portal. * * The portal inherits structural layout from assets/hextrust.css (header * alignment, sidebar, mobile drawer, full-card click overlay, .home-h1-hide). * That file's COLOUR + TYPE choices are the old internal-docs theme (muted * grayscale, "not marketing"). This layer — loaded AFTER it — re-skins to the * cf-vibe-design system (Hex Safe 2 brand): navy spine, cyan accent, Poppins. * * Mechanism: hextrust.css consumes a handful of --ht-* tokens everywhere, so * remapping those to --cvd-* brand values re-skins it wholesale; the rest is * brand polish (header, cards, callouts) using cf-vibe-design tokens. * Tokens: site-src/cf-vibe-design/tokens.css. * ────────────────────────────────────────────────────────────────────── */ :root { /* Remap the legacy internal-docs palette → cf-vibe-design brand. */ --ht-ink: var(--cvd-color-text-primary); /* navy-900 */ --ht-ink-soft: var(--cvd-color-navy-800); --ht-rule: var(--cvd-color-stroke); /* #E6E7EB */ --ht-muted: var(--cvd-color-text-remark); /* gray-40 */ --ht-accent: var(--cvd-color-accent); /* cyan-10 #00B2AC */ --ht-bg-soft: var(--cvd-color-bg-subtle); /* navy-50 */ /* Brand fonts (Poppins UI + JetBrains mono). mkdocs theme.font also loads Poppins from the font CDN; this sets the var Material reads. */ --md-text-font: var(--cvd-font-sans); --md-code-font: var(--cvd-font-mono); } /* Material defines its --md-* theme vars on the via data-attributes (e.g. [data-md-color-primary=black]). A :root () override is SHADOWED for body descendants — inherited custom properties resolve from the closest ancestor (body), regardless of cascade order. So override at the SAME body-level attribute selectors Material uses; loaded after palette.css these win and reach the header + all primary-derived chrome. */ [data-md-color-primary] { --md-primary-fg-color: var(--cvd-color-navy-900); /* deep brand navy — matches footer */ --md-primary-fg-color--light: var(--cvd-color-navy-800); --md-primary-fg-color--dark: var(--cvd-color-navy-900); } [data-md-color-accent] { --md-accent-fg-color: var(--cvd-color-accent); /* cyan */ } [data-md-color-scheme="default"] { --md-default-bg-color: var(--cvd-color-bg-page); /* #F8F9FD */ --md-typeset-a-color: var(--cvd-color-link); /* cyan-5 (dark teal on white) */ } /* Dark mode: links brand cyan too (was Material/hextrust blue #8ea7c2). */ [data-md-color-scheme="slate"] { --md-typeset-a-color: var(--cvd-color-cyan-50); /* #8AD2CE — light teal on dark */ } /* ── Header: brand navy spine — navy-900, identical to the footer bar. * (!important as belt-and-suspenders over Material's primary rule.) ── */ .md-header { background-color: var(--cvd-color-navy-900) !important; } .md-tabs { background-color: var(--cvd-color-navy-900); } /* ── Typography: a touch larger + friendlier than the institutional 0.84rem, * while staying docs-appropriate (not the full 18px app body). ───────── */ .md-typeset { font-size: 0.9rem; line-height: var(--cvd-line-loose); } .md-typeset h1, .md-typeset h2, .md-typeset h3 { color: var(--cvd-color-text-header); } /* navy-800 */ [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: var(--cvd-color-gray-100); } /* ── Cards: brand surface — rounder, navy-tinted elevation, teal lift ──── */ .md-typeset .grid.cards > ul > li, .md-typeset .grid.cards > :is(ul, ol) > li { border: 1px solid var(--cvd-color-stroke); border-radius: var(--cvd-radius-lg); /* 12px */ box-shadow: var(--cvd-shadow-sm); background: var(--cvd-color-bg-surface); transition: border-color var(--cvd-dur-base) var(--cvd-ease), box-shadow var(--cvd-dur-base) var(--cvd-ease), transform var(--cvd-dur-base) var(--cvd-ease); } .md-typeset .grid.cards > ul > li:hover { border-color: var(--cvd-color-accent); box-shadow: var(--cvd-shadow-md); transform: translateY(-2px); } /* Card category icon → brand accent (cyan). */ .md-typeset .grid.cards > ul > li .twemoji, .md-typeset .grid.cards > ul > li svg { color: var(--cvd-color-accent); fill: var(--cvd-color-accent); } /* ── "tip" callout (Welcome / Looking-for-something) → brand cyan ──────── */ .md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--cvd-color-accent); border-left-width: 3px; } .md-typeset .tip > .admonition-title, .md-typeset .tip > summary { /* Translucent cyan wash — adapts to light AND dark (cyan-90 was near-white and broke the title bar in slate/dark mode). */ background-color: rgba(0, 178, 172, 0.10); color: var(--cvd-color-cyan-5); } [data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title, [data-md-color-scheme="slate"] .md-typeset .tip > summary { color: var(--cvd-color-cyan-50); /* lighter teal on dark */ } .md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { background-color: var(--cvd-color-accent); } /* ── Search field: brand focus accent ─────────────────────────────────── */ .md-search__input:hover { background-color: rgba(255, 255, 255, 0.18); } /* ── Footer: brand navy to match the header spine ─────────────────────── */ .md-footer { background-color: var(--cvd-color-navy-900); } .md-footer-meta { background-color: var(--cvd-color-gray-10); }