/* Company top navigation header (ported from protomia_docs) placed above the * Furo documentation layout. Loaded last in html_css_files so it can offset the * sticky/fixed Furo elements below the header. * * Primary breakpoint for the header itself: 768px (mirrors protomia's `md:`). * Note: Furo switches to its mobile layout at 1008px (63em), which is handled * in the "Furo coordination" section below. */ /* ------------------------------------------------------------------ tokens */ :root { --xacs-header-h: 56px; /* collapsed header height, mobile */ --protomia-ink: #102033; --protomia-accent: #019af7; --protomia-accent-strong: #2344e7; --protomia-accent-soft: rgba(1, 154, 247, 0.14); /* Surface and ink of the bar itself, as tokens so dark mode can swap the colours without touching any of the geometry below. These are exactly the values the bar shipped with, so light mode is unchanged. */ --xacs-bar-bg: rgba(255, 255, 255, 0.78); --xacs-bar-border: rgba(16, 32, 51, 0.08); --xacs-bar-ink: #102033; --xacs-panel-bg: rgba(255, 255, 255, 0.95); --xacs-panel-border: rgba(0, 0, 0, 0.1); } /* Dark mode. The bar is hardcoded light, so without this it stays a white strip above a dark page. Furo puts the theme on and follows the OS preference while the toggle is on "auto", hence both selectors; the values are furo's own dark palette so the bar matches the page underneath it. Colours only. */ body[data-theme="dark"] { --xacs-bar-bg: rgba(19, 20, 22, 0.78); /* furo dark --color-background-primary */ --xacs-bar-border: rgba(255, 255, 255, 0.10); --xacs-bar-ink: #cfd0d0; /* furo dark --color-foreground-primary */ --xacs-panel-bg: rgba(26, 28, 30, 0.95); /* furo dark --color-background-secondary */ --xacs-panel-border: rgba(255, 255, 255, 0.12); } @media (prefers-color-scheme: dark) { body:not([data-theme="light"]) { --xacs-bar-bg: rgba(19, 20, 22, 0.78); --xacs-bar-border: rgba(255, 255, 255, 0.10); --xacs-bar-ink: #cfd0d0; --xacs-panel-bg: rgba(26, 28, 30, 0.95); --xacs-panel-border: rgba(255, 255, 255, 0.12); } } @media (min-width: 768px) { :root { --xacs-header-h: 53px; /* collapsed header height, desktop — matches aitomistic.com */ } } /* ------------------------------------------------------------- top bar */ /* `.xacs-topbar a { color: inherit }` (0,1,1) outranks `.xacs-login` (0,1,0), so the Log In button rendered with ink text instead of white. */ .xacs-topbar a.xacs-login { color: #fff; } .xacs-topbar { position: sticky; top: 0; z-index: 1000; display: flex; width: 100%; min-height: var(--xacs-header-h); align-items: center; border-bottom: 1px solid var(--xacs-bar-border); background: var(--xacs-bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--xacs-bar-ink); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; box-sizing: border-box; } .xacs-topbar *, .xacs-topbar *::before, .xacs-topbar *::after { box-sizing: border-box; } .xacs-topbar a { color: inherit; text-decoration: none; } .xacs-topbar button { font-family: inherit; box-sizing: border-box; } .xacs-topbar__inner { display: flex; width: 100%; max-width: 100%; margin: 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 1rem; } /* Tailwind's `container`, which is what aitomistic.com and the Protomia docs use. A flat max-width put every item 60px left of theirs at 1440px. */ @media (min-width: 640px) { .xacs-topbar__inner { max-width: 640px; } } @media (min-width: 768px) { .xacs-topbar__inner { max-width: 768px; } } @media (min-width: 1024px) { .xacs-topbar__inner { max-width: 1024px; } } @media (min-width: 1280px) { .xacs-topbar__inner { max-width: 1280px; } } @media (min-width: 1536px) { .xacs-topbar__inner { max-width: 1536px; } } @media (min-width: 768px) { .xacs-topbar__inner { padding: 0 1.5rem; } } /* ---------------------------------------------------------------- logo */ .xacs-logo { display: flex; align-items: center; color: inherit; } .xacs-logo img { height: auto; display: block; } .xacs-logo--mobile { padding: 0.5rem 0; } .xacs-logo--mobile img { height: 2rem; } .xacs-logo--desktop { display: none; } @media (min-width: 768px) { .xacs-logo--mobile { display: none; } .xacs-logo--desktop { display: flex; cursor: pointer; } .xacs-logo--desktop img { width: 4rem; } } /* ------------------------------------------------------------ hamburger */ .xacs-nav-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .xacs-hamburger { display: flex; align-items: center; justify-content: center; padding: 0.5rem; margin-right: -0.5rem; color: var(--xacs-bar-ink); cursor: pointer; } .xacs-hamburger svg { width: 1.5rem; height: 1.5rem; display: block; } .xacs-hamburger .xacs-icon-close { display: none; } #xacs-nav-toggle:checked ~ .xacs-hamburger .xacs-icon-burger { display: none; } #xacs-nav-toggle:checked ~ .xacs-hamburger .xacs-icon-close { display: block; } @media (min-width: 768px) { .xacs-hamburger { display: none; } } /* ------------------------------------------------- nav / mobile menu */ .xacs-nav-wrap { display: none; width: 100%; } #xacs-nav-toggle:checked ~ .xacs-nav-wrap { display: block; padding-bottom: 0.25rem; } @media (min-width: 768px) { .xacs-nav-wrap { display: flex; flex: 1; width: auto; align-items: center; justify-content: space-between; } } .xacs-nav { display: flex; flex-direction: column; } @media (min-width: 768px) { .xacs-nav { flex-direction: row; align-items: center; gap: 2rem; } } @media (min-width: 1280px) { .xacs-nav { gap: 5rem; } } /* dropdown items inside the mobile menu render as static stacked lists */ @media (max-width: 767.98px) { .xacs-dropdown__btn { padding: 0.75rem 0; } .xacs-dropdown__menu { position: static; padding: 0 0 0.5rem 0; opacity: 1; transform: none; pointer-events: auto; } .xacs-dropdown__panel { min-width: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; padding: 0; } .xacs-dropdown__panel a { display: block; padding: 0.5rem 0; text-align: left; font-size: 0.875rem; color: var(--xacs-bar-ink); } .xacs-dropdown__panel a:hover { color: var(--protomia-accent); } } @media (min-width: 768px) { .xacs-dropdown { position: relative; } .xacs-dropdown__menu { position: absolute; left: 50%; top: 100%; padding-top: 0.5rem; z-index: 1000; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity 0.15s ease; } .xacs-dropdown:hover .xacs-dropdown__menu, .xacs-dropdown:focus-within .xacs-dropdown__menu { opacity: 1; pointer-events: auto; } .xacs-dropdown__panel { min-width: 160px; overflow: hidden; border: 1px solid var(--xacs-panel-border); border-radius: 1rem; background: var(--xacs-panel-bg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .xacs-dropdown__panel a { display: block; white-space: nowrap; padding: 0.75rem 1.5rem; text-align: center; font-size: 0.875rem; color: var(--xacs-bar-ink); } .xacs-dropdown__panel a:hover { background: var(--protomia-accent-soft); color: var(--protomia-accent); } } /* ------------------------------------------------------------ dropdowns */ .xacs-dropdown__btn { display: inline-flex; align-items: center; padding: 1rem 0; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.025em; color: var(--xacs-bar-ink); background: transparent; border: none; cursor: pointer; transition: color 0.2s ease; } .xacs-dropdown__btn:hover, .xacs-dropdown__btn:focus-visible { color: var(--protomia-accent); } @media (min-width: 768px) { .xacs-dropdown__btn { padding: 0; } } /* ---------------------------------------------------------- contact link */ .xacs-nav__contact { display: inline-flex; align-items: center; padding: 1rem 0 0.25rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.025em; color: var(--xacs-bar-ink); transition: color 0.2s ease; } .xacs-nav__contact:hover { color: var(--protomia-accent); } @media (min-width: 768px) { .xacs-nav__contact { padding: 0; } } /* ----------------------------------------------------------- login button */ .xacs-login { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.25rem; border-radius: 9999px; background: var(--protomia-accent); color: #fff; font-size: 0.875rem; font-weight: 500; white-space: nowrap; box-shadow: 0 12px 30px rgba(1, 154, 247, 0.24); transition: background 0.2s ease, transform 0.2s ease; } .xacs-login:hover { background: var(--protomia-accent-strong); transform: translateY(-2px); color: #fff; } .xacs-mobile-right { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-top: 1rem; } .xacs-desktop-right { display: none; } @media (min-width: 768px) { .xacs-mobile-right { display: none; } .xacs-desktop-right { display: flex; align-items: center; gap: 1rem; margin-left: 1.5rem; } } /* --------------------------------------------------- Furo coordination */ /* Desktop (>=1008px): the sticky sidebar / TOC panels sit below the header. */ .sidebar-sticky, .toc-sticky { top: var(--xacs-header-h) !important; height: calc(100vh - var(--xacs-header-h)) !important; } /* Furo mobile layout (max-width:1008px): its own header and the fixed * sidebar / TOC drawers start below our header. */ @media (max-width: 63em) { .mobile-header { top: var(--xacs-header-h) !important; } .sidebar-drawer, .toc-drawer { top: var(--xacs-header-h) !important; height: calc(100vh - var(--xacs-header-h)) !important; } #__navigation:checked ~ .page .sidebar-drawer { top: var(--xacs-header-h) !important; } #__toc:checked ~ .page .toc-drawer { top: var(--xacs-header-h) !important; } } /* Anchor jumps must account for our sticky header. */ :target { scroll-margin-top: calc(var(--xacs-header-h) + 1.5rem); }