/* ========================================================================== S4Core Docs - Stylesheet Dark theme inspired by S4Core Docs. Organized into logical sections for maintainability. ========================================================================== */ /* -------------------------------------------------------------------------- Design Tokens (CSS Custom Properties) -------------------------------------------------------------------------- Theme system uses data-theme attribute on element. - Dark theme is the default (fallback in :root) - Light theme overrides via [data-theme="light"] - System preference respected via prefers-color-scheme media query -------------------------------------------------------------------------- */ :root { /* ====================================================================== Dark Theme (Default) ====================================================================== */ /* Background colors */ --color-bg-default: #171321; --color-bg-subtle: #1e1c28; --color-bg-elevated: #252330; --color-bg-header: #171321; --color-bg-sidebar: #1e1c28; --color-bg-card: #252330; --color-bg-code: #2b2838; --color-bg-hover: rgba(255, 255, 255, 0.05); --color-bg-active: rgba(226, 67, 41, 0.08); /* Text colors */ --color-text-default: #d4d4d8; --color-text-subtle: #89888d; --color-text-strong: #ffffff; --color-text-link: #7b8cf5; --color-text-code: #ff9e64; /* Accent & brand (consistent across themes) */ --color-accent: #e24329; --color-accent-hover: #fc6d26; /* Borders & dividers */ --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.15); /* ====================================================================== Shared Design Tokens (theme-independent) ====================================================================== */ /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* Layout dimensions */ --header-top-height: 56px; --header-nav-height: 48px; --header-height: calc(var(--header-top-height) + var(--header-nav-height)); --sidebar-width: 280px; --content-max-width: 900px; --layout-max-width: 1400px; /* Animation */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } /* ========================================================================== Light Theme ========================================================================== GitLab-inspired light color palette. Activated via data-theme="light" on the element. ========================================================================== */ [data-theme="light"] { /* Background colors */ --color-bg-default: #ffffff; --color-bg-subtle: #fafafa; --color-bg-elevated: #f5f5f5; --color-bg-header: #ffffff; --color-bg-sidebar: #fafafa; --color-bg-card: #ffffff; --color-bg-code: #f6f8fa; --color-bg-hover: rgba(0, 0, 0, 0.04); --color-bg-active: rgba(226, 67, 41, 0.08); /* Text colors */ --color-text-default: #1f1f1f; --color-text-subtle: #626262; --color-text-strong: #000000; --color-text-link: #1068bf; --color-text-code: #c41a16; /* Borders & dividers */ --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: rgba(0, 0, 0, 0.15); } /* Override highlight.js theme for light mode */ [data-theme="light"] pre code.hljs { color: var(--color-text-default); } /* Search highlight in light mode */ [data-theme="light"] .search-result-title mark, [data-theme="light"] .search-result-snippet mark { background: rgba(226, 67, 41, 0.15); color: #c41a16; } /* -------------------------------------------------------------------------- Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: scroll; /* always show scrollbar — prevents layout shift */ } body { font-family: var(--font-sans); background-color: var(--color-bg-default); color: var(--color-text-default); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--color-text-strong); font-weight: 600; line-height: 1.3; } h1 { font-size: 2rem; margin-bottom: 1.5rem; } h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.75rem; } h4 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } p { margin-bottom: 1rem; } a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); text-decoration: underline; } ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; } li { margin-bottom: 0.4rem; } /* Inline code */ code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-code); color: var(--color-text-code); padding: 0.15em 0.4em; border-radius: var(--radius-sm); } /* Code blocks */ pre { background: var(--color-bg-code); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.5rem; overflow-x: auto; line-height: 1.5; } pre code { background: none; padding: 0; font-size: 0.85rem; color: var(--color-text-default); } /* Override highlight.js background */ pre code.hljs { background: transparent !important; padding: 0 !important; } /* Code block wrapper with copy button */ .code-block { position: relative; margin-bottom: 1.5rem; } .code-block pre { margin-bottom: 0; } .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-subtle); font-family: var(--font-sans); font-size: 0.75rem; cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .code-block:hover .copy-btn { opacity: 1; } .copy-btn:hover { background: var(--color-bg-hover); color: var(--color-text-strong); } .copy-btn.copied { color: #4ade80; border-color: #4ade80; } /* Heading anchor links */ .heading-anchor { display: inline-flex; align-items: center; margin-left: 0.5rem; color: var(--color-text-subtle); opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); vertical-align: middle; } h2:hover .heading-anchor, h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; } .heading-anchor:hover { color: var(--color-accent); text-decoration: none; } /* Tables */ table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } th { color: var(--color-text-strong); font-weight: 600; background: var(--color-bg-subtle); } tr:hover td { background: var(--color-bg-hover); } /* Horizontal rules */ hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; } /* Blockquotes */ blockquote { border-left: 3px solid var(--color-accent); padding: 0.75rem 1.25rem; margin: 0 0 1.5rem 0; background: var(--color-bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } blockquote p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Site Header -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--color-bg-header); border-bottom: 1px solid var(--color-border); } /* Centered inner wrapper */ .header-inner { max-width: var(--layout-max-width); margin: 0 auto; } /* Top row: logo + hamburger (mobile) */ .header-top { display: flex; align-items: center; justify-content: space-between; height: var(--header-top-height); padding: 0 2rem; border-bottom: 1px solid var(--color-border); } .site-logo { display: flex; align-items: center; gap: 0.625rem; color: var(--color-text-strong); text-decoration: none; font-weight: 700; font-size: 1.7rem; } .site-logo:hover { color: var(--color-text-strong); text-decoration: none; } .logo-icon { flex-shrink: 0; } /* Hamburger button (hidden on desktop) */ .sidebar-toggle { display: none; /* shown via media query */ align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-default); cursor: pointer; transition: background var(--transition-fast); } .sidebar-toggle:hover { background: var(--color-bg-hover); } /* Bottom row: section tabs */ .header-nav { height: var(--header-nav-height); padding: 0 2rem; display: flex; align-items: center; overflow-x: auto; } .header-tabs { display: flex; list-style: none; gap: 1.5rem; margin: 0; padding: 0; height: 100%; white-space: nowrap; } .header-tabs li { margin: 0; height: 100%; display: flex; align-items: center; } .header-tabs a { display: flex; align-items: center; height: 100%; color: var(--color-text-subtle); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 0 0.25rem; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .header-tabs a:hover { color: var(--color-text-strong); text-decoration: none; } .header-tabs a.active { color: var(--color-text-strong); border-bottom-color: var(--color-accent); } /* --- Header Search --- */ .header-search { position: relative; flex: 1; max-width: 480px; margin: 0 1.5rem; } .search-input-wrap { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 0.75rem; color: var(--color-text-subtle); pointer-events: none; } .search-input { width: 100%; height: 36px; padding: 0 2.5rem 0 2.25rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-default); font-family: var(--font-sans); font-size: 0.875rem; outline: none; transition: border-color var(--transition-fast), background var(--transition-fast); } .search-input::placeholder { color: var(--color-text-subtle); } .search-input:focus { border-color: var(--color-border-strong); background: var(--color-bg-elevated); } /* Clear the native search cancel button */ .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .search-kbd { position: absolute; right: 0.5rem; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 0.375rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-default); color: var(--color-text-subtle); font-family: var(--font-sans); font-size: 0.6875rem; line-height: 1; pointer-events: none; } /* Search results dropdown */ .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 400px; overflow-y: auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); z-index: 200; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } .search-results[hidden] { display: none; } .search-result-item { display: block; padding: 0.75rem 1rem; color: var(--color-text-default); text-decoration: none; border-bottom: 1px solid var(--color-border); transition: background var(--transition-fast); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover, .search-result-item.focused { background: var(--color-bg-hover); text-decoration: none; color: var(--color-text-default); } .search-result-title { font-size: 0.875rem; font-weight: 600; color: var(--color-text-strong); margin-bottom: 0.25rem; } .search-result-snippet { font-size: 0.8125rem; color: var(--color-text-subtle); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result-title mark, .search-result-snippet mark { background: rgba(226, 67, 41, 0.25); color: var(--color-accent-hover); border-radius: 2px; padding: 0 1px; } .search-no-results { padding: 1.5rem 1rem; text-align: center; color: var(--color-text-subtle); font-size: 0.875rem; } /* --- Header Links (GitHub, Website icons) --- */ .header-links { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; margin-right: 1rem; } .header-icon-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--color-text-subtle); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .header-icon-link:hover { color: var(--color-text-strong); background: var(--color-bg-hover); text-decoration: none; } /* --- Version Selector --- */ .version-selector { position: relative; } .version-selector summary { display: flex; align-items: center; gap: 0.375rem; height: 36px; padding: 0 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-subtle); color: var(--color-text-default); font-size: 0.8125rem; font-weight: 600; cursor: pointer; list-style: none; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .version-selector summary::-webkit-details-marker { display: none; } .version-selector summary:hover { border-color: var(--color-border-strong); background: var(--color-bg-hover); color: var(--color-text-strong); } .version-chevron { flex-shrink: 0; transition: transform var(--transition-fast); } .version-selector[open] .version-chevron { transform: rotate(180deg); } .version-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; padding: 0.375rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-elevated); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); z-index: 210; } .version-menu-item { display: block; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); color: var(--color-text-subtle); font-size: 0.8125rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .version-menu-item:hover { background: var(--color-bg-hover); color: var(--color-text-strong); text-decoration: none; } .version-menu-item.active { background: rgba(226, 67, 41, 0.14); color: var(--color-accent-hover); } /* --- Theme Toggle Button --- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-subtle); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } .theme-toggle:hover { color: var(--color-text-strong); background: var(--color-bg-hover); } /* Show/hide icons based on current theme */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { width: 20px; height: 20px; } /* Dark theme: show sun icon (to switch to light) */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } /* Light theme: show moon icon (to switch to dark) */ [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* -------------------------------------------------------------------------- Site Layout (sidebar + content) -------------------------------------------------------------------------- */ .site-layout { display: flex; margin-top: var(--header-height); min-height: calc(100vh - var(--header-height)); width: 100%; max-width: var(--layout-max-width); margin-left: auto; margin-right: auto; flex: 1; } /* -------------------------------------------------------------------------- Sidebar -------------------------------------------------------------------------- */ .sidebar { position: sticky; top: var(--header-height); width: var(--sidebar-width); height: calc(100vh - var(--header-height)); flex-shrink: 0; overflow-y: auto; overflow-x: hidden; padding: 1.5rem 1rem; border-right: 1px solid var(--color-border); background: var(--color-bg-sidebar); scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; } /* --- Navigation items --- */ .nav-item { margin-bottom: 1px; } .nav-link { display: block; padding: 0.375rem 0.75rem; color: var(--color-text-default); font-size: 0.875rem; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); } .nav-link:hover { color: var(--color-text-strong); background: var(--color-bg-hover); text-decoration: none; } .nav-link.active { color: var(--color-accent); background: var(--color-bg-active); font-weight: 600; } .nav-link.active-trail { color: var(--color-text-strong); font-weight: 600; } /* --- Collapsible sections (using
) --- */ .nav-section { margin-bottom: 1px; } .nav-section > summary { display: flex; align-items: center; list-style: none; /* remove default marker */ cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); } /* Hide the native disclosure triangle */ .nav-section > summary::-webkit-details-marker { display: none; } .nav-section > summary::marker { display: none; content: ""; } .nav-section > summary:hover { background: var(--color-bg-hover); } .nav-section > summary .nav-link, .nav-section > summary .nav-label { flex: 1; display: block; padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--color-text-default); text-decoration: none; border-radius: var(--radius-sm); } .nav-section > summary .nav-label { font-weight: 600; color: var(--color-text-subtle); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .nav-section > summary .nav-link.active-trail { color: var(--color-text-strong); font-weight: 600; } .nav-section > summary .nav-link.active { color: var(--color-accent); font-weight: 600; } /* Chevron arrow */ .chevron { flex-shrink: 0; width: 16px; height: 16px; margin-right: 0.5rem; color: var(--color-text-subtle); transition: transform var(--transition-fast); } .nav-section[open] > summary .chevron { transform: rotate(90deg); } /* Nested children */ .nav-children { padding-left: 0.75rem; margin-left: 0.75rem; border-left: 1px solid var(--color-border); } /* -------------------------------------------------------------------------- Main Content -------------------------------------------------------------------------- */ .main-content { flex: 1; min-width: 0; display: flex; flex-direction: row; } .content-area { max-width: var(--content-max-width); width: 100%; padding: 2rem 3rem; flex: 1; min-width: 0; } /* -------------------------------------------------------------------------- TOC Sidebar (right) -------------------------------------------------------------------------- */ .toc-sidebar { position: sticky; top: var(--header-height); width: 220px; height: calc(100vh - var(--header-height)); flex-shrink: 0; overflow-y: auto; padding: 2rem 1rem 2rem 0; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } .toc-sidebar::-webkit-scrollbar { width: 4px; } .toc-sidebar::-webkit-scrollbar-track { background: transparent; } .toc-sidebar::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; } .toc-nav { border-left: 1px solid var(--color-border); padding-left: 1rem; } .toc-heading { font-size: 0.75rem; font-weight: 600; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .toc-nav ul { list-style: none; padding: 0; margin: 0; } .toc-nav li { margin-bottom: 0.25rem; } .toc-nav a { display: block; padding: 0.25rem 0; font-size: 0.8125rem; color: var(--color-text-subtle); text-decoration: none; line-height: 1.4; transition: color var(--transition-fast); } .toc-nav a:hover { color: var(--color-text-strong); text-decoration: none; } .toc-nav a.active { color: var(--color-accent); font-weight: 500; } /* Nested TOC items (h3 under h2) */ .toc-nav ul ul { padding-left: 0.75rem; } .toc-nav ul ul a { font-size: 0.75rem; } /* --- Breadcrumbs --- */ .breadcrumbs { margin-bottom: 1.5rem; font-size: 0.8125rem; } .breadcrumb-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .breadcrumb-item { display: flex; align-items: center; margin: 0; } .breadcrumb-item + .breadcrumb-item::before { content: ">"; margin: 0 0.5rem; color: var(--color-text-subtle); font-size: 0.75rem; } .breadcrumb-item a { color: var(--color-text-subtle); text-decoration: none; } .breadcrumb-item a:hover { color: var(--color-text-link); } .breadcrumb-item.current span { color: var(--color-text-default); } /* --- Document content wrapper --- */ .doc-content { margin-bottom: 3rem; } /* --- Card grid (shown on index pages) --- */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; margin-top: 2rem; margin-bottom: 2rem; } .card { display: flex; flex-direction: column; padding: 1.25rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-default); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .card:hover { border-color: var(--color-border-strong); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); text-decoration: none; color: var(--color-text-default); } .card-title { font-weight: 700; color: var(--color-text-strong); margin-bottom: 0.5rem; font-size: 1rem; } .card-text { color: var(--color-text-subtle); font-size: 0.875rem; line-height: 1.5; } /* --- Page feedback --- */ .page-feedback { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .feedback-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .feedback-label { font-size: 0.875rem; color: var(--color-text-default); } .btn-feedback { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-default); font-family: var(--font-sans); font-size: 0.8125rem; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .btn-feedback:hover { background: var(--color-bg-hover); border-color: var(--color-text-subtle); } .btn-feedback svg { width: 16px; height: 16px; } /* --- Page navigation (prev/next) --- */ .page-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .page-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-default); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); max-width: 48%; } .page-nav-link:hover { border-color: var(--color-border-strong); background: var(--color-bg-elevated); text-decoration: none; } .page-nav-link.prev { margin-right: auto; } .page-nav-link.next { margin-left: auto; text-align: right; } .page-nav-link svg { flex-shrink: 0; color: var(--color-text-subtle); } .page-nav-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .page-nav-label { font-size: 0.75rem; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.05em; } .page-nav-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); padding: 3rem 1.5rem; margin-top: auto; } .footer-inner { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; max-width: var(--layout-max-width); margin: 0 auto; } .footer-brand { display: flex; flex-direction: column; gap: 1rem; } .footer-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-strong); text-decoration: none; font-weight: 700; font-size: 0.9375rem; } .footer-logo:hover { color: var(--color-text-strong); text-decoration: none; } .footer-col h3 { font-size: 0.875rem; font-weight: 700; color: var(--color-text-strong); margin-bottom: 1rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.5rem; } .footer-col a { color: var(--color-text-subtle); font-size: 0.875rem; text-decoration: none; } .footer-col a:hover { color: var(--color-text-link); } /* -------------------------------------------------------------------------- Responsive Design -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .toc-sidebar { display: none; } } @media (max-width: 1024px) { .sidebar-toggle { display: flex; } .sidebar { position: fixed; left: 0; top: var(--header-height); z-index: 50; transform: translateX(-100%); transition: transform var(--transition-normal); } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); } .content-area { padding: 1.5rem; } } @media (max-width: 768px) { .header-top { padding: 0 1rem; } .header-nav { padding: 0 1rem; } .header-search { margin: 0 0.75rem; } .footer-inner { grid-template-columns: repeat(2, 1fr); } .cards-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; } .header-tabs { gap: 1rem; } .search-kbd { display: none; } .header-search { margin: 0 0.5rem; } .version-selector summary { padding: 0 0.5rem; } .version-label { max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }