/** * HypeMillDoc — layout, header, sidebar, ToC, dark/light mode. * Content typography (headings/lists/tables/code/etc.) lives in blocks.css. */ :root { --hmd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hmd-font-bengali: 'Noto Sans Bengali', 'Inter', sans-serif; --hmd-bg: #ffffff; --hmd-bg-subtle: #f7f7f9; --hmd-bg-sidebar: #fafafa; --hmd-text: #1f2328; --hmd-text-muted: #66707a; --hmd-border: #e4e4e8; --hmd-accent: #4f46e5; --hmd-accent-soft: #eef1ff; --hmd-header-bg: #ffffff; --hmd-code-bg: #f4f4f7; --hmd-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --hmd-header-height: 64px; --hmd-sidebar-width: 260px; --hmd-toc-width: 240px; --hmd-scrollbar-thumb: #c7c9d1; --hmd-scrollbar-thumb-hover: #a9acb6; --hmd-scrollbar-track: transparent; } [data-hmd-theme="dark"] { --hmd-bg: #14151a; --hmd-bg-subtle: #1b1c22; --hmd-bg-sidebar: #17181d; --hmd-text: #e7e8ea; --hmd-text-muted: #9a9fa6; --hmd-border: #2a2b32; --hmd-accent: #818cf8; --hmd-accent-soft: #21223a; --hmd-header-bg: #17181d; --hmd-code-bg: #1e1f26; --hmd-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --hmd-scrollbar-thumb: #3a3c46; --hmd-scrollbar-thumb-hover: #4c4f5c; --hmd-scrollbar-track: transparent; } /* ------------------------------ Scrollbars ------------------------------ * * The ::-webkit-scrollbar pseudo-elements apply to EVERY scrollable * element on the page (the ::-webkit-scrollbar selector itself isn't * scoped to :root/body) — so this one rule set covers the main page, * the sidebar, the ToC, the search-results dropdown, and code blocks * alike, with no need for a separate class on each. Firefox only * supports the coarser scrollbar-width/scrollbar-color pair (no * separate track/thumb-hover styling), set on so it inherits * everywhere Firefox is concerned. */ html { scrollbar-width: thin; scrollbar-color: var(--hmd-scrollbar-thumb) var(--hmd-scrollbar-track); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--hmd-scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--hmd-scrollbar-thumb); border-radius: 8px; border: 2px solid var(--hmd-bg); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--hmd-scrollbar-thumb-hover); } ::-webkit-scrollbar-corner { background: transparent; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--hmd-font-sans); background: var(--hmd-bg); color: var(--hmd-text); font-size: 16px; line-height: 1.65; transition: background-color 0.15s ease, color 0.15s ease; } :lang(bn), [lang="bn"] { font-family: var(--hmd-font-bengali); } a { color: var(--hmd-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } /* ------------------------------- Header ------------------------------- */ .hmd-header { position: sticky; top: 0; z-index: 50; background: var(--hmd-header-bg); border-bottom: 1px solid var(--hmd-border); height: var(--hmd-header-height); } .hmd-header__inner { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 20px; } /* The four auth pages (login/register/forgot-password/reset-password) get a bare header — see header.php's $hmd_is_auth_page docblock — so the only thing left in .hmd-header__inner is the brand/logo. Centering it here (rather than leaving the default space-between, which would just pin a lone item to the left) is what actually needs the modifier class; everything else about .hmd-header--auth's header looks and behaves the same as the normal one. */ .hmd-header__inner--auth { justify-content: center; } .hmd-header__brand img { max-height: 36px; max-width: 100px; display: block; } .hmd-header__site-name { font-size: 18px; font-weight: 700; color: var(--hmd-text); } .hmd-header__right { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: flex-end; } .hmd-header__nav { display: flex; } .hmd-header__menu { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; } .hmd-header__menu a { color: var(--hmd-text); font-size: 14px; font-weight: 500; } .hmd-header__menu a:hover { color: var(--hmd-accent); text-decoration: none; } /* Lives at the top of the left sidebar (above the category tree) so search is the first thing available while browsing docs, rather than competing for space in the top header. */ .hmd-sidebar__search { position: relative; width: 100%; margin-bottom: 20px; } .hmd-sidebar__search input { width: 100%; padding: 8px 12px; border: 1px solid var(--hmd-border); border-radius: 8px; background: var(--hmd-bg-subtle); color: var(--hmd-text); font-size: 14px; font-family: inherit; } .hmd-sidebar__search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--hmd-bg); border: 1px solid var(--hmd-border); border-radius: 8px; box-shadow: var(--hmd-shadow); max-height: 320px; overflow-y: auto; z-index: 60; } .hmd-search-result, .hmd-search-empty { display: block; padding: 10px 14px; font-size: 14px; color: var(--hmd-text); border-bottom: 1px solid var(--hmd-border); } .hmd-search-result:hover { background: var(--hmd-accent-soft); text-decoration: none; } .hmd-search-empty { color: var(--hmd-text-muted); font-style: italic; } /* A real button, not a plain text link: filled with the accent color so "Log in" reads as the header's one clear call to action. "Log out" (shown instead, in the same header slot, once signed in) uses a quieter outline style — still a proper button, just visually secondary since it's a less-frequent action than logging in. */ .hmd-header__auth-link { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--hmd-accent); background: var(--hmd-accent); color: #ffffff; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .hmd-header__auth-link:hover { filter: brightness(0.92); color: #ffffff; text-decoration: none; } .hmd-header__auth-link--logout { background: transparent; border-color: var(--hmd-border); color: var(--hmd-text); } .hmd-header__auth-link--logout:hover { background: var(--hmd-accent-soft); border-color: var(--hmd-accent); color: var(--hmd-accent); opacity: 1; } /* ---------------------------- Theme switch ---------------------------- * * A scaled-down, self-contained take on a sun<->moon sliding toggle * (checkbox + label, no JS needed for the animation itself — app.js * only keeps it in sync with the stored preference). */ .hmd-theme-switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; } .hmd-theme-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .hmd-theme-switch__track { position: relative; width: 56px; height: 28px; border-radius: 999px; background: linear-gradient(to bottom, #7ec8ec, #b3e0f2); border: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; transition: background 0.4s ease; } .hmd-theme-switch input:checked + .hmd-theme-switch__track { background: linear-gradient(to bottom, #10121f, #1e2140); } /* The track's own default border (rgba(0,0,0,0.08), set above) is basically invisible once the header itself goes dark -- a near-black border on a near-black track/header just disappears, so the switch was blending into the background with no visible edge. A light, low-opacity border here gives it a visible outline specifically in dark mode, without needing to touch the light-mode look at all. */ [data-hmd-theme="dark"] .hmd-theme-switch__track { border-color: rgba(255, 255, 255, 0.25); } .hmd-theme-switch input:focus-visible + .hmd-theme-switch__track { outline: 2px solid var(--hmd-accent); outline-offset: 2px; } .hmd-theme-switch__stars { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .hmd-theme-switch input:checked + .hmd-theme-switch__track .hmd-theme-switch__stars { opacity: 1; } .hmd-theme-switch__stars span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #fff; } .hmd-theme-switch__stars span:nth-child(1) { top: 6px; left: 10px; } .hmd-theme-switch__stars span:nth-child(2) { top: 16px; left: 6px; width: 2px; height: 2px; } .hmd-theme-switch__stars span:nth-child(3) { top: 9px; left: 18px; width: 2px; height: 2px; } .hmd-theme-switch__stars span:nth-child(4) { top: 19px; left: 16px; } .hmd-theme-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffd166; display: flex; align-items: center; justify-content: center; color: #fff8e1; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, color 0.4s ease; box-shadow: 0 0 8px rgba(255, 209, 102, 0.7); } .hmd-theme-switch input:checked + .hmd-theme-switch__track .hmd-theme-switch__thumb { transform: translateX(28px); background: #e8e8f0; color: #9a9fc9; box-shadow: 0 0 6px rgba(232, 232, 240, 0.6); } .hmd-theme-switch__sun-rays { width: 14px; height: 14px; transition: opacity 0.3s ease, transform 0.4s ease; } .hmd-theme-switch input:checked + .hmd-theme-switch__track .hmd-theme-switch__sun-rays { opacity: 0; transform: rotate(90deg) scale(0.5); } .hmd-theme-switch__crater { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, 0.12); opacity: 0; transition: opacity 0.3s ease 0.1s; } .hmd-theme-switch__crater--1 { width: 5px; height: 5px; top: 4px; left: 5px; } .hmd-theme-switch__crater--2 { width: 3px; height: 3px; top: 11px; left: 11px; } .hmd-theme-switch input:checked + .hmd-theme-switch__track .hmd-theme-switch__crater { opacity: 1; } .hmd-theme-switch:active .hmd-theme-switch__thumb { transform: scale(0.88); } .hmd-theme-switch input:checked:active + .hmd-theme-switch__track .hmd-theme-switch__thumb { transform: translateX(28px) scale(0.88); } /* Mobile-only group: the theme switch + hamburger, pinned together at the right edge of row 1 — hidden by default so the theme switch doesn't duplicate the desktop copy in .hmd-header__right; see the max-width media query below for where it actually becomes visible. */ .hmd-header__mobile-controls { display: none; align-items: center; gap: 14px; } /* Row 1's hamburger (opens the right-hand nav offcanvas) and row 3's bar icon (opens the left-hand categories offcanvas) share this same plain icon-button look. Both are mobile-only — see the max-width media query below, which is also where .hmd-header__menu-toggle and .hmd-header__sidebar-toggle actually get display: flex. */ .hmd-header__menu-toggle, .hmd-header__sidebar-toggle { display: none; align-items: center; justify-content: center; background: none; border: 1px solid var(--hmd-border); border-radius: 8px; color: var(--hmd-text); width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; padding: 0; } .hmd-header__menu-toggle { flex-direction: column; gap: 4px; border: none; width: auto; height: auto; padding: 8px; } .hmd-header__menu-toggle span { width: 22px; height: 2px; background: var(--hmd-text); display: block; } .hmd-header__sidebar-toggle svg { width: 20px; height: 20px; } /* ------------------------- Mobile header rows -------------------------- * * Hidden entirely on desktop (see the max-width: 960px media query, * which is the ONLY place these get display: flex) -- row 2 (log * in/out + theme switch) and row 3 (search + categories toggle) stack * underneath row 1 (logo + nav-offcanvas hamburger, which is just * .hmd-header__inner reused as-is). */ .hmd-header__mobile-row { display: none; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--hmd-border); } .hmd-header__mobile-row--utils { justify-content: space-between; } .hmd-header__mobile-row--search { justify-content: stretch; } .hmd-header__mobile-row--search .hmd-sidebar__search { flex: 1; margin-bottom: 0; } /* ---------------------- Right-hand nav offcanvas ------------------------ * * Fixed, full-screen container; the dark overlay and the sliding panel * are both children so one .is-open toggle on the container drives * both at once via descendant selectors. Desktop never sees this at * all in practice (nothing opens it there), but it's kept * pointer-events: none while closed as a defensive measure regardless * of viewport width. */ .hmd-nav-offcanvas { position: fixed; inset: 0; z-index: 80; pointer-events: none; } .hmd-nav-offcanvas__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.2s ease; } .hmd-nav-offcanvas__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 280px; max-width: 82vw; background: var(--hmd-bg); box-shadow: var(--hmd-shadow); padding: 20px 16px; transform: translateX(100%); transition: transform 0.2s ease; overflow-y: auto; } .hmd-nav-offcanvas.is-open { pointer-events: auto; } .hmd-nav-offcanvas.is-open .hmd-nav-offcanvas__overlay { opacity: 1; } .hmd-nav-offcanvas.is-open .hmd-nav-offcanvas__panel { transform: translateX(0); } .hmd-nav-offcanvas__close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; margin-bottom: 12px; background: none; border: 1px solid var(--hmd-border); border-radius: 8px; color: var(--hmd-text); cursor: pointer; } .hmd-nav-offcanvas__close svg { width: 18px; height: 18px; } .hmd-nav-offcanvas__nav .hmd-header__menu { flex-direction: column; gap: 4px; } .hmd-nav-offcanvas__nav .hmd-header__menu a { display: block; padding: 10px 8px; border-radius: 6px; } .hmd-nav-offcanvas__nav .hmd-header__menu a:hover { background: var(--hmd-accent-soft); } /* Log in/out, now living inside the nav drawer instead of its own mobile header row — separated from the menu links with a divider and stretched to the full width of the panel so it reads as a distinct action, not just another link. */ .hmd-nav-offcanvas__auth { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hmd-border); } .hmd-nav-offcanvas__auth .hmd-header__auth-link { display: flex; width: 100%; } /* -------------------------------- Shell -------------------------------- */ .hmd-shell { display: flex; align-items: flex-start; max-width: 1400px; margin: 0 auto; } .hmd-sidebar { width: var(--hmd-sidebar-width); flex-shrink: 0; position: sticky; top: var(--hmd-header-height); height: calc(100vh - var(--hmd-header-height)); overflow-y: auto; border-right: 1px solid var(--hmd-border); padding: 24px 16px; } /* Mobile-only close (×) button inside the categories drawer — see the max-width media query for where it actually becomes visible. On desktop the sidebar is a normal static column, so it's never shown. There's deliberately no dark overlay/backdrop behind the drawer: it isn't modal, so the page stays visible and scrollable while it's open (tap the × or a category link to close it instead). */ .hmd-sidebar__close { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; margin-bottom: 12px; background: none; border: 1px solid var(--hmd-border); border-radius: 8px; color: var(--hmd-text); cursor: pointer; } .hmd-sidebar__close svg { width: 18px; height: 18px; } .hmd-sidebar-category { margin-bottom: 6px; } /* Accordion toggle — a real