/* ============================================================================ VectorLabz docs — tactical HUD theme (navy + brass). Dark ("slate") is default; light ("default") is a clean warm-paper mode. Shared navy header + purposeful brass accents; surfaces adapt per scheme. ============================================================================ */ :root { --vl-brass: #b58a3e; --vl-brass-bright: #e0bd77; /* accents on dark */ --vl-brass-deep: #8a6521; /* accents on light (AA) */ --vl-navy: #0b1220; --vl-navy-2: #10192c; --vl-navy-3: #16223a; --vl-paper: #faf8f2; --vl-paper-2: #f2ede1; --vl-ink: #171d29; --md-admonition-icon--brass: url('data:image/svg+xml;charset=utf-8,'); } /* Brass as primary + accent, both schemes. */ [data-md-color-scheme="slate"], [data-md-color-scheme="default"] { --md-primary-fg-color: var(--vl-brass); --md-primary-fg-color--light: var(--vl-brass-bright); --md-primary-fg-color--dark: var(--vl-brass-deep); } /* Force brass content links — Zensical re-sets --md-typeset-a-color on after extra.css, so we override the color property directly (higher specificity than Material's `.md-typeset a`). Buttons + nav keep their own styling. */ [data-md-color-scheme="slate"] .md-content .md-typeset a:not(.md-button) { color: var(--vl-brass-bright); } [data-md-color-scheme="default"] .md-content .md-typeset a:not(.md-button) { color: var(--vl-brass-deep); } .md-content .md-typeset a:not(.md-button) { transition: color .15s ease, text-decoration-color .15s ease; } .md-content .md-typeset a:not(.md-button):hover { color: var(--md-primary-fg-color); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Fluid: smooth scroll + gentle content entrance on navigation. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: no-preference) { .md-content__inner > * { animation: vl-rise .34s cubic-bezier(.22,.61,.36,1) both; } @keyframes vl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } } /* ── Dark mode ────────────────────────────────────────────────────────────── */ [data-md-color-scheme="slate"] { --md-default-bg-color: var(--vl-navy); --md-default-fg-color: #dde5f1; --md-default-fg-color--light: #aab6c8; --md-default-fg-color--lighter: #7b8699; --md-typeset-a-color: var(--vl-brass-bright); --md-accent-fg-color: var(--vl-brass-bright); --md-code-bg-color: #0a101c; --md-code-fg-color: #ecd8ad; --md-typeset-table-color: color-mix(in oklab, var(--vl-brass) 30%, transparent); --md-footer-bg-color: #070c16; --vl-surface: var(--vl-navy-2); --vl-surface-2: var(--vl-navy-3); --vl-hair: color-mix(in oklab, var(--vl-brass) 22%, transparent); } /* ── Light mode ───────────────────────────────────────────────────────────── */ [data-md-color-scheme="default"] { --md-default-bg-color: var(--vl-paper); --md-default-fg-color: var(--vl-ink); --md-default-fg-color--light: #46505f; --md-default-fg-color--lighter: #7a8394; --md-typeset-a-color: var(--vl-brass-deep); --md-accent-fg-color: var(--vl-brass-deep); --md-code-bg-color: #f2ecdf; --md-code-fg-color: #7a5713; --md-typeset-table-color: color-mix(in oklab, var(--vl-brass-deep) 28%, transparent); --md-footer-bg-color: var(--vl-navy); --vl-surface: #ffffff; --vl-surface-2: var(--vl-paper-2); --vl-hair: color-mix(in oklab, var(--vl-brass-deep) 26%, transparent); } /* ── Navy glass header (both schemes) ─────────────────────────────────────── */ .md-header { background: color-mix(in oklab, var(--vl-navy) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in oklab, var(--vl-brass) 40%, transparent); color: #eaf0f8; } .md-header__title { letter-spacing: .015em; color: #f3f6fb; font-weight: 600; } .md-tabs { background: transparent; } .md-tabs__link { color: #c6d0e0; opacity: .92; transition: color .15s ease; } .md-tabs__link:hover { color: #fff; opacity: 1; } .md-tabs__link--active { color: var(--vl-brass-bright); opacity: 1; } .md-search__form { background: color-mix(in oklab, #ffffff 12%, transparent); border-radius: 8px; } .md-search__form:hover { background: color-mix(in oklab, #ffffff 18%, transparent); } .md-search__input::placeholder { color: #aeb9cb; } /* ── Headings: brass eyebrow rule on h2 for rhythm ────────────────────────── */ .md-typeset h1 { font-weight: 700; letter-spacing: -.01em; } .md-typeset h2 { font-weight: 700; padding-top: .4em; border-top: 1px solid var(--vl-hair); margin-top: 2.4em; } .md-typeset h2::before { content: ""; display: inline-block; width: 1.5rem; height: 3px; margin-right: .55rem; vertical-align: middle; border-radius: 2px; background: linear-gradient(90deg, var(--md-primary-fg-color), transparent); } .md-typeset h3 { font-weight: 600; } /* ── Sidebar + TOC active state → brass (kills the stock lilac pill) ──────── */ .md-nav__link--active, .md-nav__link:focus, .md-nav__link:hover { color: var(--md-primary-fg-color--dark); } .md-nav__item .md-nav__link--active { color: var(--md-primary-fg-color--dark); font-weight: 600; background: color-mix(in oklab, var(--vl-brass) 12%, transparent); border-radius: 6px; } [data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active { color: var(--vl-brass-bright); } .md-nav__link--passed { color: var(--md-default-fg-color--light); } /* right-hand TOC */ .md-nav--secondary .md-nav__link--active { border-left: 2px solid var(--md-primary-fg-color); } /* ── Tables: brass-tinted header, hairlines, hover ───────────────────────── */ .md-typeset table:not([class]) { border: 1px solid var(--vl-hair); border-radius: 10px; overflow: hidden; } .md-typeset table:not([class]) th { background: color-mix(in oklab, var(--vl-brass) 14%, transparent); color: var(--md-default-fg-color); font-weight: 700; border-bottom: 1px solid var(--vl-hair); } .md-typeset table:not([class]) td { border-top: 1px solid color-mix(in oklab, var(--vl-brass) 10%, transparent); } .md-typeset table:not([class]) tr:hover td { background: color-mix(in oklab, var(--vl-brass) 6%, transparent); } /* ── Grid cards → glass panels, per-scheme surface, brass edge on hover ───── */ .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { background: var(--vl-surface); border: 1px solid var(--vl-hair); border-radius: 12px; padding: 1.1rem 1.2rem; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .md-typeset .grid.cards > ul > li:hover { border-color: var(--md-primary-fg-color); transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in oklab, var(--vl-brass) 16%, transparent); } .md-typeset .grid.cards > ul > li > :first-child { font-size: 1.02rem; } /* ── Admonitions + collapsibles: brass rule ──────────────────────────────── */ .md-typeset .admonition, .md-typeset details { border: 1px solid var(--vl-hair); border-left: 3px solid var(--md-primary-fg-color); border-radius: 8px; background: var(--vl-surface); } .md-typeset .admonition-title, .md-typeset summary { background: color-mix(in oklab, var(--vl-brass) 9%, transparent); } /* ── Code: hairline + rounded ────────────────────────────────────────────── */ .md-typeset pre > code { border: 1px solid var(--vl-hair); border-radius: 10px; } .md-typeset code { border-radius: 5px; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .md-typeset .md-button { border-color: var(--md-primary-fg-color); color: var(--md-primary-fg-color--dark); border-radius: 8px; } .md-typeset .md-button--primary { background: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); color: #0b1220; } .md-typeset .md-button:hover { background: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); color: #0b1220; } /* ── Hero (home) ─────────────────────────────────────────────────────────── */ .md-typeset .vl-hero { margin: .5rem 0 2.2rem; padding: 2.2rem 2rem; border: 1px solid var(--vl-hair); border-radius: 16px; background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--vl-brass) 12%, transparent), transparent 55%), var(--vl-surface); } .md-typeset .vl-hero h1 { margin: 0 0 .4rem; font-size: 2.1rem; } .md-typeset .vl-hero p { font-size: 1.02rem; color: var(--md-default-fg-color--light); max-width: 46rem; } .md-typeset .vl-hero .vl-eyebrow { display: inline-block; margin-bottom: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--md-primary-fg-color--dark); padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--vl-hair); background: color-mix(in oklab, var(--vl-brass) 10%, transparent); } [data-md-color-scheme="slate"] .md-typeset .vl-hero .vl-eyebrow { color: var(--vl-brass-bright); } /* Footer stays navy in both modes for brand cohesion. */ .md-footer, .md-footer-meta { color: #cfd8e6; } /* Belt-and-suspenders: hide the "Made with Zensical" line, keep our copyright. */ .md-copyright { font-size: 0 !important; } .md-copyright__highlight { font-size: .64rem !important; } .md-copyright a[href*="zensical"] { display: none !important; } /* HUD-style eyebrow (echoes the vectorlabz.io "[ … ]" tactical labels). */ .md-typeset .vl-hero .vl-eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; } /* Inter tuning: crisper heading weights + comfortable reading measure. */ .md-typeset { font-feature-settings: "cv11", "ss01"; } .md-typeset h1 { font-weight: 800; letter-spacing: -.02em; } .md-typeset h2 { font-weight: 750; letter-spacing: -.01em; } .md-typeset h3 { font-weight: 700; letter-spacing: -.005em; } .md-typeset p, .md-typeset li { line-height: 1.7; }