/* * BrainX brand header — canonical CSS. * All selectors are namespaced with .bx- so this file can drop into any host * (Astro landing, Sphinx book theme) without colliding. * * Dark mode is triggered by `.dark` on , matching Tailwind's class * strategy and sphinx_book_theme's data-theme behavior (we mirror via JS). */ .bx-header { --bx-fg: var(--bx-ink, #1c1610); --bx-fg-soft: var(--bx-ink-soft, #3a2e1f); --bx-bg: rgba(251, 246, 233, 0.82); --bx-menu-bg: var(--bx-paper, #fbf6e9); --bx-border: var(--bx-rule, #d8cfb8); --bx-brand: var(--bx-coral, #bd5430); --bx-accent: var(--bx-bronze, #7a6840); --bx-shadow: 0 6px 24px rgba(60, 40, 20, 0.08); position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.25rem; padding: 0.75rem 1.25rem; font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; color: var(--bx-fg); background: var(--bx-bg); border-bottom: 1px solid var(--bx-border); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: var(--bx-shadow); } html.dark .bx-header, [data-theme="dark"] .bx-header { --bx-fg: var(--bx-ink, #f1e7d2); --bx-fg-soft: var(--bx-ink-soft, #d4c5a8); --bx-bg: rgba(26, 19, 10, 0.78); --bx-menu-bg: var(--bx-paper-deep, #251a0d); --bx-border: var(--bx-rule, #3a2e1f); --bx-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } /* brand */ .bx-brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; } .bx-logo { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--bx-brand) 0%, var(--bx-accent) 100%); box-shadow: 0 6px 20px rgba(189, 84, 48, 0.42); } .bx-wordmark { display: flex; flex-direction: column; line-height: 1; } .bx-wordmark-strong { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; background: linear-gradient(90deg, var(--bx-brand), var(--bx-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .bx-wordmark-sub { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bx-fg-soft); margin-top: 2px; } /* nav */ .bx-nav { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; } .bx-nav a { position: relative; display: inline-flex; align-items: center; padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.92rem; font-weight: 500; color: var(--bx-fg-soft); text-decoration: none; transition: color 160ms ease, background 160ms ease; } .bx-nav a:hover { color: var(--bx-fg); background: rgba(189, 84, 48, 0.10); } .bx-nav a[aria-current="page"] { color: var(--bx-fg); } .bx-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--bx-brand), var(--bx-accent)); } /* dropdown */ .bx-dropdown { position: relative; display: inline-flex; } .bx-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem; border: none; background: transparent; border-radius: 8px; font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--bx-fg-soft); cursor: pointer; transition: color 160ms ease, background 160ms ease; } .bx-dropdown-trigger:hover, .bx-dropdown-trigger[aria-expanded="true"] { color: var(--bx-fg); background: rgba(189, 84, 48, 0.10); } .bx-dropdown-caret { transition: transform 160ms ease; } .bx-dropdown-trigger[aria-expanded="true"] .bx-dropdown-caret { transform: rotate(180deg); } .bx-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; padding: 0.4rem; background: var(--bx-menu-bg); border: 1px solid var(--bx-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(60, 40, 20, 0.16); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); display: none; z-index: 100; } .bx-dropdown-trigger[aria-expanded="true"] + .bx-dropdown-menu { display: flex; flex-direction: column; } .bx-dropdown-menu a { padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--bx-fg-soft); text-decoration: none; transition: color 140ms ease, background 140ms ease; } .bx-dropdown-menu a:hover, .bx-dropdown-menu a:focus-visible { color: var(--bx-fg); background: rgba(189, 84, 48, 0.12); outline: none; } .bx-dropdown-sep { height: 1px; margin: 0.35rem 0.5rem; background: var(--bx-border); } /* theme toggle */ .bx-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--bx-border); border-radius: 10px; background: transparent; color: var(--bx-fg-soft); cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; } .bx-theme-toggle:hover { color: var(--bx-fg); background: rgba(189, 84, 48, 0.10); } .bx-theme-icon-sun { display: none; } .bx-theme-icon-moon { display: block; } html.dark .bx-theme-icon-sun, [data-theme="dark"] .bx-theme-icon-sun { display: block; } html.dark .bx-theme-icon-moon, [data-theme="dark"] .bx-theme-icon-moon { display: none; } /* burger (mobile) */ .bx-burger { display: none; width: 36px; height: 36px; border: 1px solid var(--bx-border); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .bx-burger span { width: 16px; height: 2px; background: var(--bx-fg); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; } /* responsive */ @media (max-width: 800px) { .bx-burger { display: inline-flex; } .bx-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem; background: var(--bx-menu-bg); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--bx-border); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .bx-header.bx-open .bx-nav { opacity: 1; transform: translateY(0); pointer-events: auto; } .bx-nav a { padding: 0.75rem 1rem; } .bx-nav a[aria-current="page"]::after { display: none; } /* mobile: dropdown collapses inline */ .bx-dropdown { display: block; } .bx-dropdown-trigger { width: 100%; justify-content: space-between; padding: 0.75rem 1rem; } .bx-dropdown-menu { position: static; min-width: 0; margin-top: 0.25rem; background: transparent; border: none; box-shadow: none; backdrop-filter: none; padding: 0 0 0 0.75rem; } } /* --- brainx-sphinx-header docs-site overrides --- */ /* Hide pydata_sphinx_theme / sphinx_book_theme native top bars. The BrainX header replaces them visually; their functional buttons remain in the DOM (display: none) so the JS below can still click them. */ header.bd-header, .bd-header-article, .header-article-items.header-article__inner { display: none !important; } body { padding-top: 0 !important; } /* brainx-sphinx-header: inline SVG icons replacing FontAwesome JS bundle. */ /* Mirrors FA visual API: i.fa-NAME -> SVG via mask+currentColor. */ i[class*='fa-']::before { content: none; } /* clear any FA pseudo-element */ i.fa-github::before, .fa-github::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-bars::before, .fa-bars::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-chevron-down::before, .fa-chevron-down::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-angle-right::before, .fa-angle-right::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-arrow-up::before, .fa-arrow-up::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-circle-half-stroke::before, .fa-circle-half-stroke::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-moon::before, .fa-moon::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-sun::before, .fa-sun::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-magnifying-glass::before, .fa-magnifying-glass::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-download::before, .fa-download::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-expand::before, .fa-expand::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-file::before, .fa-file::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-file-pdf::before, .fa-file-pdf::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } i.fa-list::before, .fa-list::before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; vertical-align: -0.125em; } /* FA size modifier */ i.fa-lg::before, .fa-lg::before { width: 1.33em; height: 1.33em; }