/* * ╔══════════════════════════════════════════════════════════════════════════════╗ * ║ CommDocs — Global Stylesheet ║ * ║ css/style.css ║ * ║ ║ * ║ This single file governs ALL pages on the site. ║ * ║ To create a new page: link this file in and you get the full ║ * ║ design system — tokens, layout, components, responsive breakpoints. ║ * ║ ║ * ║ Structure ║ * ║ ───────────────────────────────────────────────────────────────────────── ║ * ║ § 1 Design tokens (CSS custom properties / :root) ║ * ║ § 2 CSS reset & base styles ║ * ║ § 3 Utility classes ║ * ║ § 4 Button component ║ * ║ § 5 Fixed header ║ * ║ § 6 Breadcrumb bar ║ * ║ § 7 Page layout grid ║ * ║ § 8 Left sidebar ║ * ║ § 9 Sidebar overlay (mobile) ║ * ║ § 10 Main content area ║ * ║ § 11 Content components (cards, tables, callouts, code blocks …) ║ * ║ § 12 Right-hand TOC ║ * ║ § 13 Footer ║ * ║ § 14 Responsive breakpoints ║ * ║ § 15 Print styles ║ * ╚══════════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════════ SECTION 1 — DESIGN TOKENS (CSS CUSTOM PROPERTIES) ─────────────────────────────────────────────────────────────────────── All colours, spacing, and timing values live here. Change these variables to retheme the entire site instantly. Colour naming convention: --bg-* Background layers (darkest → lightest) --surface-* Card / panel surfaces --text-* Text colours (primary → muted) --accent-* Brand / highlight colour variants --border-* Border colours (subtle → strong) Layout tokens: --header-height Fixed header bar height --breadcrumb-height Fixed breadcrumb bar height --sidebar-width Left sidebar width on desktop ═══════════════════════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --bg-primary: #0b1220; /* page background */ --bg-secondary: #0f172a; /* breadcrumb / subtle areas */ --bg-tertiary: #111827; /* rarely used extra layer */ /* Surfaces (cards, panels) */ --surface-1: #111827; --surface-2: #1f2937; --surface-hover:#243041; /* Typography */ --text-primary: #f9fafb; --text-secondary:#d1d5db; --text-muted: #9ca3af; --text-code: #7dd3fc; /* inline code text */ /* Brand accent */ --accent-primary: #f59e0b; --accent-hover: #fbbf24; --accent-soft: rgba(245,158,11,0.12); /* Borders */ --border-subtle: #1f2937; --border-strong: #374151; /* Callout colours */ --callout-info-bg: rgba(59, 130, 246, 0.1); --callout-info-border:#3b82f6; --callout-warn-bg: rgba(245, 158, 11, 0.1); --callout-warn-border:#f59e0b; --callout-danger-bg: rgba(239, 68, 68, 0.1); --callout-danger-border:#ef4444; --callout-tip-bg: rgba(34, 197, 94, 0.1); --callout-tip-border:#22c55e; /* Code block */ --code-bg: #0d1117; --code-border: #30363d; /* Layout dimensions */ --header-height: 64px; --breadcrumb-height:40px; --sidebar-width: 260px; --toc-width: 240px; --max-content-width:760px; /* Motion */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 2 — CSS RESET & BASE STYLES ─────────────────────────────────────────────────────────────────────── Minimal reset: box-sizing border-box, zero margins/padding, smooth scrolling, and base font settings. ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Prevent layout shift on scrollbar appear */ scrollbar-gutter: stable; } body { font-family: 'Inter', sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.75; min-height: 100vh; font-size: 0.9375rem; /* 15px base */ } /* Global focus ring — visible for keyboard nav, suppressed for mouse */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* Typography scale */ h1, h2, h3, h4, h5, h6 { font-family: 'Libre Baskerville', Georgia, serif; line-height: 1.3; margin-bottom: 0.75rem; } h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); } h2 { font-size: clamp(1.2rem, 3vw, 1.45rem); margin-top: 2.5rem; } h3 { font-size: 1.1rem; margin-top: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 600; } h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-family: 'Inter', sans-serif; } p { margin-bottom: 1rem; color: var(--text-secondary); } ul, ol { margin-left: 1.5rem; margin-bottom: 1rem; color: var(--text-secondary); } li { margin-bottom: 0.35rem; } a { color: var(--accent-primary); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: none; border-top: 1px solid var(--border-subtle); margin: 2rem 0; } /* Inline code */ code { font-family: 'DM Mono', 'Courier New', monospace; font-size: 0.85em; background: var(--code-bg); color: var(--text-code); padding: 0.1em 0.35em; border-radius: var(--radius-sm); border: 1px solid var(--code-border); } /* Preformatted / code block */ pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; overflow-x: auto; margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.6; } pre code { background: none; border: none; padding: 0; color: var(--text-secondary); } /* Images */ img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-md); } /* ═══════════════════════════════════════════════════════════════════════ SECTION 3 — UTILITY CLASSES ─────────────────────────────────────────────────────────────────────── Small, reusable helper classes for spacing, display, and text control. These don't replace a full utility framework — keep them minimal. ═══════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent-primary); } .text-sm { font-size: 0.85rem; } .text-mono { font-family: 'DM Mono', monospace; } .mt-0 { margin-top: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 4 — SHARED BUTTON COMPONENT ─────────────────────────────────────────────────────────────────────── .btn → base ghost button style .btn.primary → filled brand-coloured action button .btn.sm → compact variant .btn.icon → icon-only circular button .btn.hamburger→ mobile menu toggle (hidden on desktop) ═══════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); border-radius: var(--radius-md); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base), transform var(--transition-fast); text-decoration: none; } .btn:hover { border-color: var(--accent-primary); background: var(--accent-soft); } .btn:active { transform: scale(0.97); } /* Filled primary variant */ .btn.primary { background: var(--accent-primary); color: #000; border-color: transparent; font-weight: 600; } .btn.primary:hover { background: var(--accent-hover); } /* Compact size modifier */ .btn.sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; } /* Icon-only circular button */ .btn.icon { padding: 0.45rem; border-radius: 50%; width: 36px; height: 36px; justify-content: center; } /* Hamburger — hidden on desktop, shown on mobile via media query below */ .btn.hamburger { display: none; font-size: 1.5rem; background: transparent; border: none; color: var(--text-primary); padding: 0.25rem 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 5 — FIXED HEADER ─────────────────────────────────────────────────────────────────────── The header is always visible at the top of the viewport. Contents (left → right): · .logo → brand mark + site name · .btn.hamburger → mobile menu toggle (mobile only) · nav.nav → desktop navigation links · .header-actions → secondary CTAs (login, get started) Header uses backdrop-filter blur for a glassmorphism effect over scrolled content. The --header-height token keeps layout in sync. ═══════════════════════════════════════════════════════════════════════ */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: rgba(17, 24, 39, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-subtle); z-index: 1000; gap: 1rem; } /* Logo: colour swatch + text name */ .logo { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; flex-shrink: 0; } .logo-img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; flex-shrink: 0; background: #ffffff; padding: 4px; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.35); transition: transform var(--transition-base), box-shadow var(--transition-base); } .logo:hover .logo-img { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 0 2px var(--accent-primary), 0 4px 14px rgba(245,158,11,0.25); } .logo span { color: var(--accent-primary); } /* Desktop navigation links */ .nav { display: flex; gap: 1.5rem; align-items: center; } .nav a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; position: relative; padding-bottom: 2px; } /* Animated underline on hover */ .nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent-primary); border-radius: 1px; transition: width var(--transition-slow); } .nav a:hover::after { width: 100%; } .nav a:hover { color: var(--text-primary); transition: color var(--transition-base); } /* Active page indicator */ .nav a[aria-current="page"] { color: var(--text-primary); } .nav a[aria-current="page"]::after { width: 100%; } /* Search pill in header (optional — wire up JS as needed) */ .header-search { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; transition: border-color var(--transition-base); } .header-search:hover { border-color: var(--accent-primary); } .header-search kbd { font-family: 'DM Mono', monospace; font-size: 0.7rem; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 4px; color: var(--text-muted); } /* Right-side action buttons */ .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Version badge (optional) */ .version-badge { font-family: 'DM Mono', monospace; font-size: 0.7rem; background: var(--accent-soft); color: var(--accent-primary); border: 1px solid var(--accent-primary); border-radius: 999px; padding: 0.1rem 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 6 — BREADCRUMB BAR ─────────────────────────────────────────────────────────────────────── A thin contextual navigation strip fixed just below the header. It shows the current page hierarchy and updates dynamically via IntersectionObserver as the user scrolls through sections. Customise: add/remove ancestors to match your content tree. #breadcrumb-current text is updated by JS — see SECTION 17. ═══════════════════════════════════════════════════════════════════════ */ .breadcrumb { position: fixed; top: var(--header-height); left: 0; right: 0; height: var(--breadcrumb-height); display: flex; align-items: center; gap: 0.4rem; padding: 0 1.25rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle); z-index: 900; font-size: 0.825rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .breadcrumb::-webkit-scrollbar { display: none; } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color var(--transition-base); flex-shrink: 0; } .breadcrumb a:hover { color: var(--text-primary); } .breadcrumb .sep { color: var(--border-strong); user-select: none; } /* Active page crumb (updated by JS) */ .breadcrumb .active { color: var(--accent-primary); font-weight: 500; } /* Breadcrumb right-side: edit link (optional) */ .breadcrumb-actions { margin-left: auto; flex-shrink: 0; display: flex; gap: 0.5rem; } .breadcrumb-actions a { font-size: 0.775rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; } .breadcrumb-actions a:hover { color: var(--accent-primary); } /* ═══════════════════════════════════════════════════════════════════════ SECTION 7 — PAGE LAYOUT GRID ─────────────────────────────────────────────────────────────────────── Three-column CSS Grid. Column counts change at breakpoints: mobile → 1 column (sidebar off-canvas) tablet → 2 columns (sidebar + main) desktop → 3 columns (sidebar + main + toc) margin-top pushes content below the two fixed bars. ═══════════════════════════════════════════════════════════════════════ */ .layout { display: grid; grid-template-columns: 1fr; margin-top: calc(var(--header-height) + var(--breadcrumb-height)); min-height: calc(100vh - var(--header-height) - var(--breadcrumb-height)); } /* ═══════════════════════════════════════════════════════════════════════ SECTION 8 — LEFT SIDEBAR (DOCUMENTATION NAVIGATION) ─────────────────────────────────────────────────────────────────────── The sidebar is the primary doc-tree navigator. STRUCTURE: .sidebar → panel container h3 → panel heading "Documentation" .sidebar-section → one collapsible group (repeat as needed) button.nav-label → group toggle (aria-expanded controls state) .sidebar-links → collapsible link list CUSTOMISE: · Add more .sidebar-section blocks for new topic groups · Set aria-current="page" on the active link · Expand a section on load by adding .expanded to its .sidebar-links and aria-expanded="true" to its button (JS handles this automatically for the link marked .active — see SECTION 17) MOBILE: sidebar slides in from the left, triggered by .hamburger click. A .sidebar-overlay dims the rest of the screen. ═══════════════════════════════════════════════════════════════════════ */ .sidebar { position: fixed; top: calc(var(--header-height) + var(--breadcrumb-height)); left: 0; width: var(--sidebar-width); height: calc(100vh - var(--header-height) - var(--breadcrumb-height)); background: var(--surface-1); padding: 1.5rem 1rem 2rem; border-right: 1px solid var(--border-subtle); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; /* Off-canvas on mobile */ transform: translateX(-100%); transition: transform var(--transition-slow); z-index: 1100; box-shadow: 4px 0 16px rgba(0,0,0,0.4); } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; } /* Visible state (toggled by JS on mobile; always visible on desktop) */ .sidebar.open { transform: translateX(0); } /* Sidebar top heading */ .sidebar > h3 { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 1rem; padding: 0 0.75rem; } /* Optional: version selector dropdown inside sidebar */ .sidebar-version { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); font-size: 0.8rem; margin-bottom: 1.25rem; cursor: pointer; } .sidebar-version select { background: transparent; border: none; color: var(--text-primary); font-size: 0.8rem; font-family: 'Inter', sans-serif; cursor: pointer; flex: 1; } .sidebar-version select:focus { outline: none; } /* Collapsible group wrapper */ .sidebar-section { margin-bottom: 0.5rem; } /* Section toggle button */ .nav-label.collapsible { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: none; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0.6rem 0.75rem; border-radius: var(--radius-md); transition: color var(--transition-base), background var(--transition-base); } .nav-label.collapsible:hover { color: var(--text-primary); background: var(--surface-2); } /* Chevron icon */ .toggle-icon { font-size: 0.7rem; transition: transform var(--transition-slow); color: var(--accent-primary); display: inline-block; } /* Rotate when expanded */ .nav-label.collapsible[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); } /* Animated link list — max-height technique for CSS transition */ .sidebar-links { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .sidebar-links.expanded { max-height: 600px; } /* Individual nav link */ .sidebar a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast); } .sidebar a:hover { background: var(--surface-hover); color: var(--text-primary); transform: translateX(3px); } /* Currently active page */ .sidebar a.active { background: var(--accent-soft); color: var(--accent-primary); font-weight: 500; } /* Optional: small dot or icon before link text */ .sidebar a .link-icon { font-size: 0.7rem; opacity: 0.6; } /* "New" badge on sidebar links */ .sidebar a .badge-new { font-size: 0.65rem; font-weight: 700; background: var(--accent-primary); color: #000; border-radius: 999px; padding: 0 5px; margin-left: auto; } /* Divider line within sidebar groups */ .sidebar-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0.75rem 0.75rem; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 9 — SIDEBAR OVERLAY (MOBILE) ─────────────────────────────────────────────────────────────────────── Semi-transparent overlay that dims content behind the open sidebar on small screens. Clicking it closes the sidebar. ═══════════════════════════════════════════════════════════════════════ */ .sidebar-overlay { display: none; /* block only on mobile when sidebar is open */ position: fixed; inset: 0; top: calc(var(--header-height) + var(--breadcrumb-height)); background: rgba(0, 0, 0, 0.55); z-index: 1050; animation: fadeIn 0.2s ease; } .sidebar-overlay.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════ SECTION 10 — MAIN CONTENT AREA ─────────────────────────────────────────────────────────────────────── The scrollable primary reading area. Constrained to --max-content-width for comfortable line lengths (~75ch). Each top-level topic is a
with data-title="…" The id is used for: · TOC anchor links · IntersectionObserver highlights The data-title updates the breadcrumb label on scroll. ADDING A NEW SECTION: 1. Add
in
2. Add matching My Topic in .toc nav ═══════════════════════════════════════════════════════════════════════ */ .main { padding: 2.5rem 1.5rem 4rem; max-width: var(--max-content-width); margin: 0 auto; width: 100%; } /* Offset anchors so fixed bars don't cover headings on jump */ section[id] { scroll-margin-top: calc(var(--header-height) + var(--breadcrumb-height) + 24px); margin-bottom: 3.5rem; } /* Section heading decoration line */ .main h2 { border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.5rem; } /* Introductory paragraph after h1 */ .lead { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.8; } /* "Last updated" metadata line */ .page-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); } .page-meta .tag { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 11 — CONTENT COMPONENTS ─────────────────────────────────────────────────────────────────────── Reusable building blocks for the content area. Components: .card → bordered panel for individual facts/terms dl/dt/dd → definition list (used in terminology sections) table → data tables with proper thead/th .callout → info / warning / danger / tip banners .step-list → numbered procedure steps .code-block → copyable code block with header .image-figure → image with caption .key-points → summarised take-aways box .two-col → two-column responsive grid for comparisons ═══════════════════════════════════════════════════════════════════════ */ /* ── Card ── */ .card { background: var(--surface-1); padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); margin-bottom: 1rem; transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); } .card:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .card-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; } /* ── Definition list (terminology) ── */ dl { margin-bottom: 1rem; } dt { font-weight: 600; color: var(--accent-primary); margin-bottom: 0.2rem; } dd { color: var(--text-secondary); margin-left: 0; margin-bottom: 0.75rem; } /* ── Data table ── */ .table-wrapper { overflow-x: auto; margin-bottom: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } thead { background: var(--surface-2); } th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-subtle); } td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: top; } td:first-child { font-weight: 600; color: var(--accent-primary); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-hover); } /* ── Callout banners ── */ .callout { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); border-left: 3px solid; margin-bottom: 1.25rem; font-size: 0.9rem; } .callout .callout-icon { flex-shrink: 0; font-size: 1rem; margin-top: 0.1rem; } .callout p { margin: 0; } .callout strong { display: block; margin-bottom: 0.25rem; } .callout.info { background: var(--callout-info-bg); border-color: var(--callout-info-border); color: #93c5fd; } .callout.warn { background: var(--callout-warn-bg); border-color: var(--callout-warn-border); color: #fcd34d; } .callout.danger { background: var(--callout-danger-bg); border-color: var(--callout-danger-border); color: #fca5a5; } .callout.tip { background: var(--callout-tip-bg); border-color: var(--callout-tip-border); color: #86efac; } .callout p { color: inherit; } /* ── Numbered step list ── */ .step-list { list-style: none; margin: 0; padding: 0; counter-reset: steps; } .step-list li { display: flex; gap: 1rem; margin-bottom: 1.25rem; counter-increment: steps; } .step-list li::before { content: counter(steps); display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; background: var(--accent-soft); color: var(--accent-primary); border: 1px solid var(--accent-primary); border-radius: 50%; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; margin-top: 0.15rem; } .step-list li p { margin: 0; } /* ── Code block with copy button ── */ .code-block { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius-md); margin-bottom: 1.5rem; overflow: hidden; } .code-block-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--code-border); font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--text-muted); } .copy-btn { font-size: 0.75rem; padding: 0.2rem 0.5rem; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); transition: color var(--transition-base), border-color var(--transition-base); } .copy-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); } .copy-btn.copied { color: #22c55e; border-color: #22c55e; } .code-block pre { margin: 0; border: none; border-radius: 0; padding: 1rem 1.25rem; } /* ── Figure / image with caption ── */ .image-figure { margin: 1.5rem 0; } .image-figure img { width: 100%; border: 1px solid var(--border-subtle); } figcaption { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; font-style: italic; } /* ── Key points / summary box ── */ .key-points { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 2rem 0; } .key-points h4 { color: var(--accent-primary); margin-bottom: 0.75rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .key-points ul { margin: 0; } .key-points li { font-size: 0.9rem; } /* ── Two-column comparison grid ── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } @media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } } /* ── Pagination / previous-next nav ── */ .doc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-subtle); } .doc-nav a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--transition-base), transform var(--transition-base); } .doc-nav a:hover { border-color: var(--accent-primary); transform: translateY(-2px); } .doc-nav a span.label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .doc-nav a span.title { color: var(--accent-primary); font-weight: 500; } .doc-nav a.prev { align-items: flex-start; } .doc-nav a.next { align-items: flex-end; text-align: right; } /* ── Feedback bar ── */ .feedback-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding: 1rem 1.25rem; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--text-muted); } .feedback-bar .feedback-btns { display: flex; gap: 0.5rem; margin-left: auto; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 12 — RIGHT-HAND TABLE OF CONTENTS (TOC) ─────────────────────────────────────────────────────────────────────── Shows page sections for quick in-page navigation. Only rendered on wide (≥1100px) screens. Active item updates via IntersectionObserver (see SECTION 17). CUSTOMISE: Mirror every
with a link here. ═══════════════════════════════════════════════════════════════════════ */ .toc { display: none; /* shown only at ≥1100px via media query below */ position: sticky; top: calc(var(--header-height) + var(--breadcrumb-height) + 24px); max-height: calc(100vh - var(--header-height) - var(--breadcrumb-height) - 48px); overflow-y: auto; padding: 1.5rem 1rem 1.5rem 1.25rem; border-left: 1px solid var(--border-subtle); scrollbar-width: none; } .toc::-webkit-scrollbar { display: none; } .toc h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.75rem; } .toc nav a { display: block; padding: 0.35rem 0.6rem; font-size: 0.825rem; color: var(--text-muted); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: color var(--transition-base), background var(--transition-base), border-left-color var(--transition-base); margin-bottom: 0.1rem; } .toc nav a:hover { color: var(--text-primary); background: var(--surface-hover); } /* Active state set by IntersectionObserver */ .toc nav a.active { color: var(--accent-primary); border-left-color: var(--accent-primary); background: var(--accent-soft); } /* "Back to top" link at the bottom of TOC */ .toc-top-link { display: flex; align-items: center; gap: 0.3rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); font-size: 0.775rem; color: var(--text-muted); text-decoration: none; transition: color var(--transition-base); } .toc-top-link:hover { color: var(--accent-primary); } /* ═══════════════════════════════════════════════════════════════════════ SECTION 13 — FOOTER ─────────────────────────────────────────────────────────────────────── Full-width page footer with copyright, nav links, and optional social icons. Sits inside
after content sections so it scrolls with the page (not fixed). ═══════════════════════════════════════════════════════════════════════ */ .footer { border-top: 1px solid var(--border-subtle); margin-top: 4rem; padding: 2rem 0; } .footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; font-size: 0.825rem; color: var(--text-muted); } .footer nav a { color: var(--text-muted); text-decoration: none; margin: 0 0.4rem; transition: color var(--transition-base); } .footer nav a:hover { color: var(--accent-primary); } .footer .footer-logo { color: var(--accent-primary); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 14 — RESPONSIVE BREAKPOINTS ─────────────────────────────────────────────────────────────────────── Three layout tiers managed via media queries. ═══════════════════════════════════════════════════════════════════════ */ /* TABLET ≥ 800px: sidebar becomes visible, two-column grid */ @media (min-width: 800px) { .layout { grid-template-columns: var(--sidebar-width) 1fr; } .sidebar { /* Switch from off-canvas to sticky in-flow panel */ position: sticky; top: calc(var(--header-height) + var(--breadcrumb-height)); transform: none !important; box-shadow: none; height: calc(100vh - var(--header-height) - var(--breadcrumb-height)); align-self: start; } /* Hide hamburger — sidebar always visible */ .btn.hamburger { display: none !important; } } /* DESKTOP ≥ 1100px: add right TOC column */ @media (min-width: 1100px) { .layout { grid-template-columns: var(--sidebar-width) 1fr var(--toc-width); } .toc { display: block; } /* reveal TOC */ .main { padding: 2.5rem 2.5rem 4rem; } } /* MOBILE < 800px: compact everything */ @media (max-width: 799px) { :root { --header-height: 48px; --breadcrumb-height:32px; } .nav { display: none; } /* hide desktop nav links */ .btn.hamburger { display: inline-flex; } /* show hamburger */ .header { padding: 0 1rem; } .header-search { display: none; } /* hide search pill on very small */ .main { padding: 1.5rem 1rem 3rem; } .doc-nav { grid-template-columns: 1fr; } .feedback-bar .feedback-btns { margin-left: 0; } /* Reduce font sizes a touch */ h1 { font-size: 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════ SECTION 15 — PRINT STYLES ─────────────────────────────────────────────────────────────────────── Clean print output: hide chrome, expand content to full width. ═══════════════════════════════════════════════════════════════════════ */ @media print { .header, .breadcrumb, .sidebar, .toc, .feedback-bar, .doc-nav, .sidebar-overlay, .btn { display: none !important; } body { background: #fff; color: #000; } .layout { display: block; margin-top: 0; } .main { max-width: 100%; padding: 0; } a { color: inherit; text-decoration: underline; } pre, code { background: #f5f5f5; color: #333; } }