fix: refine typography

- Scale inline code in headings to 0.85em with font-weight 400
- Reduce inline code in paragraphs from 0.96em to 0.88em
- Match line-height (1.5rem) across p, ul, and ol elements
- Widen condensed text from wdth 80 to 87.5
- Reduce heading margin-top from 2rem to 1.5rem

.gitattributes

@@ -1,4 +1,3 @@
 * text=auto
 
 *.css text eol=lf
-

.github/workflows/sync-boostlook-css.yml

@@ -0,0 +1,72 @@
+name: Sync boostlook.css to website-v2 & website-v2-docs
+
+on:
+  push:
+    branches: ["develop"]
+    paths:
+      - "boostlook.css"
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  update-css:
+    runs-on: ubuntu-latest
+    if: github.repository == 'boostorg/boostlook'
+    steps:
+      - name: Checkout current repository
+        uses: actions/checkout@v6
+
+      - name: Checkout website-v2 repository
+        uses: actions/checkout@v6
+        with:
+          repository: boostorg/website-v2
+          ref: develop
+          path: website-v2
+          token: ${{ secrets.WEBSITE_V2_PAT }}
+
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.13"
+
+      - name: Copy boostlook.css to website-v2
+        run: |
+          cp -v boostlook.css website-v2/static/css/boostlook.css
+      - name: Install pre-commit
+        if: success()
+        run: |
+          pip install pre-commit
+      - name: Run pre-commit hooks on boostlook.css
+        if: success()
+        working-directory: website-v2
+        run: |
+          pre-commit run --files static/css/boostlook.css
+      - name: Commit and push changes to develop branch
+        if: success()
+        working-directory: website-v2
+        env:
+          GH_TOKEN: ${{ secrets.WEBSITE_V2_PAT }}
+        run: |
+          git config user.name "${{ github.actor }}"
+          git config user.email "${{ github.actor }}@users.noreply.github.com"
+          git add static/css/boostlook.css
+          if ! git diff-index --quiet HEAD; then
+              git commit -m "chore: Update boostlook.css from boostlook repository"
+              git push origin develop
+          else
+              echo "No changes to commit. Skipping commit to develop."
+          fi
+      - name: Trigger website-v2-docs ui-release workflow
+        if: success()
+        env:
+          GH_TOKEN: ${{ secrets.WEBSITE_V2_PAT }}
+        run: |
+          gh workflow run ui-release.yml --repo boostorg/website-v2-docs --ref develop
+      - name: Trigger website-v2-docs publish workflow
+        if: success()
+        env:
+          GH_TOKEN: ${{ secrets.WEBSITE_V2_PAT }}
+        run: |
+          gh workflow run publish.yml --repo boostorg/website-v2-docs --ref develop

.github/workflows/update-website-v2.yml

@@ -1,70 +0,0 @@
-name: Update boostlook.css in website-v2
-
-on:
-  push:
-    branches: [ "master" ]
-    paths:
-      - 'boostlook.css'
-
-permissions:
-  pull-requests: write
-
-jobs:
-  update-css:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout boostlook repository
-        uses: actions/checkout@v4
-        with:
-          repository: boostorg/boostlook
-
-      - name: Checkout website-v2 repository
-        uses: actions/checkout@v4
-        with:
-          repository: boostorg/website-v2
-          ref: develop
-          path: website-v2
-          token: ${{ secrets.WEBSITE_V2_PAT }}
-
-      - name: Set up Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.11'
-
-      - name: Copy boostlook.css to website-v2
-        run: |
-          cp boostlook.css website-v2/static/css/boostlook.css
-
-      - name: Install pre-commit
-        if: success()
-        run: |
-          pip install pre-commit
-
-      - name: Run pre-commit hooks on boostlook.css
-        if: success()
-        working-directory: website-v2
-        run: |
-          pre-commit run --files static/css/boostlook.css
-        continue-on-error: false
-
-      - name: Commit and push changes to a new branch
-        if: success()
-        working-directory: website-v2
-        env:
-          GH_TOKEN: ${{ secrets.WEBSITE_V2_PAT }}
-        run: |
-          git config user.name "${{ github.actor }}"
-          git config user.email "${{ github.actor }}@users.noreply.github.com"
-          git add static/css/boostlook.css
-          if ! git diff-index --quiet HEAD; then
-              git commit -m "Update boostlook.css from boostlook repository"
-              branch_name="update-boostlook-css-$(date +'%Y%m%d%H%M%S')"
-              git checkout -b "$branch_name"
-              git push origin "$branch_name"
-              gh pr create --title "Update boostlook.css from boostlook repository" \
-                           --body "Automated PR to update boostlook.css" \
-                           --base develop \
-                           --head "$branch_name"
-          else
-              echo "No changes to commit. Skipping PR creation."
-          fi

.gitignore

@@ -1 +1,2 @@
 doc/html
+.DS_Store

README.md

@@ -15,3 +15,97 @@ html mp11.html : mp11.adoc
 Noto font files are covered under the Open Font License:
 
 https://fonts.google.com/noto/use
+
+## Live Preview for AsciiDoc Documentation
+
+BoostLook includes a **live preview** feature to streamline local development and review of AsciiDoc documentation. This allows for automatic rendering and real-time browser preview of changes made to [`specimen.adoc`](/doc/specimen.adoc) and [`boostlook.css`](/boostlook.css) files.
+
+### Overview
+
+The preview functionality is handled by a Ruby script ([`boostlook_preview.rb`](./boostlook_preview.rb)). This script monitors AsciiDoc, HTML, and CSS files for changes, automatically rebuilding and opening the rendered HTML in your default web browser.
+
+---
+
+### Prerequisites
+
+Ensure the following dependencies are installed:
+
+- **Ruby** (>= 2.7 recommended)
+- **Asciidoctor** – Install via `gem install asciidoctor`
+- **Listen Gem** – Install via `gem install listen`
+- **Boost.Build (b2)** – Required for builds invoked by the script. Ensure it is installed and available in your system's PATH.
+
+---
+
+### Usage and Detailed Steps
+
+1. **Install Ruby and Required Gems**:
+    - Ensure Ruby is installed on your system. You can check by running:
+      ```bash
+      ruby -v
+      ```
+      If Ruby is not installed, follow the instructions on [ruby-lang.org](https://www.ruby-lang.org/en/documentation/installation/) to install it.
+    - Install Asciidoctor:
+      ```bash
+      gem install asciidoctor
+      ```
+    - Install the Listen gem:
+      ```bash
+      gem install listen
+      ```
+
+2. **Install Boost.Build (b2)**:
+    - Follow the instructions on the [Boost.Build website](https://boostorg.github.io/build/) to install `b2`.
+    - Ensure `b2` is available in your system's PATH by running:
+      ```bash
+      which b2
+      ```
+
+3. **Locate Specimen AsciiDoc File**:
+    - Place your AsciiDoc files in the `doc` directory. The default file is `doc/specimen.adoc`.
+    -  The default file structure should include:
+
+    ```
+     /boostlook
+       ├── doc
+       │   └── specimen.adoc <--
+       │   └── ...
+       ├── boostlook.css
+       └── boostlook_preview.rb
+       └── boostlook.rb
+       └── ...
+     ```
+
+4. **Navigate to the project directory**:
+    ```bash
+    cd /path/to/boostlook
+    ```
+
+5. **Run the preview script**:
+    - Ensure you're in the root folder
+    ```bash
+    ruby boostlook_preview.rb
+    ```
+
+6. **Edit and Preview**:
+    - Edit your AsciiDoc (specimen.adoc) or CSS (boostlook.css) files.
+    - The script will automatically detect changes and rebuild the documentation.
+    - Refresh the browser to see changes.
+
+7. **Refresh Your Browser** to view changes.
+
+---
+
+### Troubleshooting
+
+- **Script Not Running**:
+  - Ensure all prerequisites are installed correctly.
+  - Check for any error messages in the terminal and resolve them accordingly.
+
+- **Changes Not Reflecting**:
+  - Ensure the files being edited are within the monitored directories (`doc` and root directory).
+  - Verify that the browser is refreshing automatically or manually refresh the browser.
+
+- **Boost.Build (b2) Not Found**:
+  - Ensure `b2` is installed and available in your system's PATH.
+  - Run `which b2` to verify its availability.

boostlook.rb

@@ -1,74 +1,75 @@
 Asciidoctor::Extensions.register do
   postprocessor do
     process do |doc, output|
-      output = output.sub(/<body(.*?)>/, '<body\\1><div class="boostlook">')
-      output = output.sub(/<\/body>/, "</div></body>")
-      output = output.sub(/(<div id="toc".*?>)/, '<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>\\1')
-
-      output = output.sub(/(<div id="footer".*?>)/, '</div>\\1')
-
-      inline_script = <<~SCRIPT
-        <script>
-        (function() {
-          var isVisible = localStorage.getItem('tocVisible') === 'true';
-          var isPinned = localStorage.getItem('tocPinned') === 'true';
-          document.documentElement.classList.toggle('toc-visible', isVisible);
-          document.documentElement.classList.toggle('toc-hidden', !isVisible);
-          document.documentElement.classList.toggle('toc-pinned', isPinned);
-        })();
-        </script>
-      SCRIPT
-      output = output.sub(/<\/head>/, "#{inline_script}</head>")
+      output = output.sub(/(<body[^>]*>)/, '\1<div class="boostlook">')
+      output = output.sub('</body>', '</div></body>')
+      # Comment out toggle button - TOC should always be visible
+      # output = output.sub(/(<body.*?<div[^>]*id="toc"[^>]*>)/m, '\1<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>')
+      output = output.sub(/(<body.*?<div[^>]*id="footer"[^>]*>)/m, '</div>\1')
 
       script_tag = <<~SCRIPT
         <script>
-        document.addEventListener("DOMContentLoaded", (event) => {
-          const tocButton = document.getElementById("toggle-toc");
-          const toc = document.getElementById("toc");
+        (function() {
           const html = document.documentElement;
+          // Always show TOC - no toggle functionality needed
+          html.classList.add('toc-visible');
+          html.classList.add('toc-pinned');
+          html.classList.remove('toc-hidden');
 
-          let isVisible = localStorage.getItem("tocVisible") === "true";
-          let isPinned = localStorage.getItem("tocPinned") === "true";
+          // Comment out toggle functionality since TOC should always be visible
+          /*
+          const isPinned = localStorage.getItem('tocPinned') === 'true';
 
-          function updateTocVisibility(visible) {
-            html.classList.toggle("toc-visible", visible);
-            html.classList.toggle("toc-hidden", !visible);
-            tocButton.setAttribute("aria-expanded", visible);
-            tocButton.textContent = visible ? "×" : "☰";
-            tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
+          html.classList.add('toc-hidden');
+          if (isPinned) {
+            html.classList.add('toc-pinned');
+            html.classList.add('toc-visible');
+            html.classList.remove('toc-hidden');
           }
 
-          function updateTocPinned(pinned) {
-            html.classList.toggle("toc-pinned", pinned);
-            localStorage.setItem("tocPinned", pinned);
-          }
+          document.addEventListener("DOMContentLoaded", () => {
+            const tocButton = document.getElementById("toggle-toc");
+            const toc = document.getElementById("toc");
 
-          tocButton.addEventListener("click", () => {
-            isVisible = !isVisible;
-            isPinned = !isPinned;
-            updateTocVisibility(isVisible);
-            updateTocPinned(isPinned);
-            localStorage.setItem("tocVisible", isVisible);
-            localStorage.setItem("tocPinned", isPinned);
-          });
+            if (!tocButton || !toc) return;
 
-          tocButton.addEventListener("mouseenter", () => {
-            if (!isVisible) {
-              updateTocVisibility(true);
+            let isPinned = localStorage.getItem('tocPinned') === 'true';
+
+            function updateTocVisibility(visible) {
+              html.classList.toggle("toc-visible", visible);
+              html.classList.toggle("toc-hidden", !visible);
+              tocButton.setAttribute("aria-expanded", visible);
+              tocButton.textContent = visible ? "×" : "☰";
+              tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
             }
-          });
 
-          toc.addEventListener("mouseleave", () => {
-            if (!isVisible) {
-              updateTocVisibility(false);
-            }
-          });
+            tocButton.addEventListener("click", () => {
+              isPinned = !isPinned;
+              localStorage.setItem('tocPinned', isPinned);
+              html.classList.toggle('toc-pinned', isPinned);
+              updateTocVisibility(isPinned);
+            });
 
-          updateTocVisibility(isVisible);
-        });
+            tocButton.addEventListener("mouseenter", () => {
+              if (!isPinned) {
+                updateTocVisibility(true);
+              }
+            });
+
+            toc.addEventListener("mouseleave", () => {
+              if (!isPinned) {
+                updateTocVisibility(false);
+              }
+            });
+
+            updateTocVisibility(isPinned);
+          });
+          */
+        })();
         </script>
       SCRIPT
-      output = output.sub(/<\/body>/, "#{script_tag}</body>")
+
+      output = output.sub('</body>', "#{script_tag}</body>")
 
       output
     end

boostlook_preview.rb

@@ -0,0 +1,163 @@
+#!/usr/bin/env ruby
+
+require 'asciidoctor'
+require 'listen'
+require 'pathname'
+require 'logger'
+
+# AsciidocRenderer handles building AsciiDoc files, monitoring changes, and rendering the output in a browser.
+class AsciidocRenderer
+  # Define our relevant constant paths
+  PATHS = {
+    jamfile: 'doc/Jamfile',
+    specimen_docinfo_footer: 'doc/specimen-docinfo-footer.html',
+    specimen_adoc: 'doc/specimen.adoc',
+    css: 'boostlook.css',
+    boostlook_rb: 'boostlook.rb',
+    output_dir: 'doc/html'
+  }.freeze
+
+  # OS-specific commands to open the default web browser
+  OS_BROWSER_COMMANDS = {
+    /darwin/       => 'open',       # macOS
+    /linux/        => 'xdg-open',   # Linux
+    /mingw|mswin/  => 'start'        # Windows
+  }.freeze
+
+  def initialize
+    # Initialize the logger
+    @logger = Logger.new($stdout)
+    @logger.level = Logger::INFO
+    @logger.formatter = ->(_, _, _, msg) { "#{msg}\n" }
+
+    @file_opened = false          # Flag to prevent multiple browser openings
+    @shutdown_requested = false   # Flag to handle graceful shutdown
+    validate_b2                    # Ensure Boost.Build is installed
+  end
+
+  # Entry point to run the renderer
+  def run
+    validate_files      # Check for the presence of required files
+    initial_build       # Perform the initial build and render
+    setup_signal_traps  # Setup signal handlers for graceful shutdown
+    watch_files         # Start watching for file changes
+  end
+
+  private
+
+  # Validates that all required files are present
+  def validate_files
+    required_files = [PATHS[:jamfile], PATHS[:specimen_docinfo_footer], PATHS[:specimen_adoc], PATHS[:css], PATHS[:boostlook_rb]]
+    missing_files = required_files.reject { |file| File.exist?(file) }
+    unless missing_files.empty?
+      missing_files.each { |file| @logger.error("Required file #{file} not found") }
+      exit 1
+    end
+  end
+
+  # Checks if the 'b2' command (Boost.Build) is available
+  def validate_b2
+    unless system('which b2 > /dev/null 2>&1')
+      @logger.error("'b2' command not found. Please install Boost.Build and ensure it's in your PATH.")
+      exit 1
+    end
+  end
+
+  # Builds the AsciiDoc project using Boost.Build
+  def build_asciidoc
+    Dir.chdir('doc') do
+      if system('b2')
+        @logger.info("Build successful")
+        true
+      else
+        @logger.error("Build failed")
+        false
+      end
+    end
+  end
+
+  # Opens the generated HTML file in the default web browser
+  def open_in_browser
+    return if @file_opened
+
+    cmd = OS_BROWSER_COMMANDS.find { |platform, _| RUBY_PLATFORM =~ platform }&.last
+    if cmd
+      system("#{cmd} #{PATHS[:output_dir]}/specimen.html")
+      @file_opened = true
+    else
+      @logger.warn("Unsupported OS. Please open #{PATHS[:output_dir]}/specimen.html manually")
+    end
+  end
+
+  # Performs the initial build and opens the result in the browser
+  def initial_build
+    if build_asciidoc && File.exist?("#{PATHS[:output_dir]}/specimen.html")
+      open_in_browser
+      @logger.info("Rendered #{PATHS[:specimen_adoc]} to #{PATHS[:output_dir]}/specimen.html")
+    else
+      @logger.error("Failed to generate #{PATHS[:output_dir]}/specimen.html")
+    end
+  end
+
+  # Sets up file listeners to watch for changes and trigger rebuilds
+  def watch_files
+    @listener = Listen.to('doc', '.') do |modified, added, removed|
+      handle_file_changes(modified, added, removed)
+    end
+
+    @listener.ignore(/doc\/html/) # Ignore changes in the output directory
+    @listener.start
+    @logger.info("Watching for changes in 'doc' and root directories (excluding 'doc/html')...")
+
+    # Keep the script running until a shutdown is requested
+    until @shutdown_requested
+      sleep 1
+    end
+
+    shutdown # Perform shutdown procedures
+  end
+
+  # Handles detected file changes by determining if a rebuild is necessary
+  def handle_file_changes(modified, added, removed)
+    @logger.debug("Modified files: #{modified.join(', ')}")
+    @logger.debug("Added files: #{added.join(', ')}") if added.any?
+    @logger.debug("Removed files: #{removed.join(', ')}") if removed.any?
+
+    relevant_files = [
+      File.expand_path(PATHS[:jamfile]),
+      File.expand_path(PATHS[:specimen_docinfo_footer]),
+      File.expand_path(PATHS[:specimen_adoc]),
+      File.expand_path(PATHS[:css]),
+      File.expand_path(PATHS[:boostlook_rb])
+    ]
+
+    # Check if any of the changed files are relevant for rebuilding
+    changes_relevant = (modified + added + removed).any? do |file|
+      relevant_files.include?(File.expand_path(file))
+    end
+
+    if changes_relevant
+      @logger.info("Relevant changes detected, rebuilding...")
+      if build_asciidoc && File.exist?("#{PATHS[:output_dir]}/specimen.html")
+        open_in_browser
+        @logger.info("Re-rendered successfully")
+      end
+    end
+  end
+
+  # Sets up signal traps to handle graceful shutdown on interrupt or terminate signals
+  def setup_signal_traps
+    Signal.trap("INT") { @shutdown_requested = true }
+    Signal.trap("TERM") { @shutdown_requested = true }
+  end
+
+  # Performs shutdown procedures, such as stopping the file listener
+  def shutdown
+    @logger.info("Shutting down...")
+    @listener.stop if @listener
+    exit
+  end
+end
+
+# Instantiate and run the AsciidocRenderer
+AsciidocRenderer.new.run

build-css.sh

@@ -0,0 +1,21 @@
+#!/bin/sh
+# Concatenate CSS modules into boostlook-v3.css
+cat \
+  src/css/00-header.css \
+  src/css/01-variables.css \
+  src/css/02-themes.css \
+  src/css/03-fonts.css \
+  src/css/04-reset.css \
+  src/css/05-global-typography.css \
+  src/css/06-global-links.css \
+  src/css/07-global-code.css \
+  src/css/08-global-components.css \
+  src/css/09-global-tables-images.css \
+  src/css/10-scrollbars.css \
+  src/css/11-template-layout.css \
+  src/css/12-asciidoctor.css \
+  src/css/13-antora.css \
+  src/css/14-quickbook.css \
+  src/css/15-readme.css \
+  src/css/16-responsive-toc.css \
+  > boostlook-v3.css

doc/specimen-docinfo-footer.html

@@ -1,6 +1,6 @@
 <style>
 
-*:not(pre)>code { background: none; color: #600000; }
-:not(pre):not([class^=L])>code { background: none; color: #600000; }
+*:not(pre)>code { background: none; }
+:not(pre):not([class^=L])>code { background: none; }
 
 </style>

doc/specimen.adoc

@@ -438,7 +438,7 @@ See <<chars_format overview>> for description.
 [#integral_usage_notes_]
 * All built-in integral types are allowed except bool which is deleted
 * from_chars for integral type is constexpr (BOOST_CHARCONV_CONSTEXPR is defined) when:
-** compiled using `-std=c++14` or newer 
+** compiled using `-std=c++14` or newer
 ** using a compiler with `\__builtin_ is_constant_evaluated`
 * These functions have been tested to support `\__int128` and `unsigned __int128`
 
@@ -993,4 +993,3 @@ This documentation is copyright 2022-2023 Peter Dimov and Matt Borland and is di
 the http://www.boost.org/LICENSE_1_0.txt[Boost Software License, Version 1.0].
 
 :leveloffset: -1
-

src/css/00-header.css

@@ -0,0 +1,115 @@
+/**
+ * Boost Look v3 — Development Build
+ * New design and development for the Boost C++ Libraries website (boost.io),
+ * in collaboration with MetaLab.
+ * Built from modular sources in src/css/ via build-css.sh
+ * Note: boostlook.css remains the current production stylesheet.
+ * License: BSL-1.0
+ */
+
+/**
+ * File Structure Overview (src/css/):
+ * 00-header.css          - License, file overview
+ * 01-variables.css       - Root CSS custom properties, spacing, typography, icons
+ * 02-themes.css          - Light/dark theme variable mappings
+ * 03-fonts.css           - @font-face declarations (Noto Sans, Monaspace)
+ * 04-reset.css           - CSS reset (box-sizing, margins, defaults)
+ * 05-global-typography.css - Base container, headings h1-h6, heading anchors
+ * 06-global-links.css    - Paragraph styling, links, footnotes
+ * 07-global-code.css     - Code blocks, inline code, syntax highlighting (hljs)
+ * 08-global-components.css - Quotes, pagination, admonitions, lists, edit-page link
+ * 09-global-tables-images.css - Tables, image styles
+ * 10-scrollbars.css      - Scrollbar styling (Firefox + WebKit)
+ * 11-template-layout.css - Template-specific scrolling, iframe, TOC common styles
+ * 12-asciidoctor.css     - AsciiDoctor-specific styles, Rouge syntax highlighting
+ * 13-antora.css          - Antora navigation, toolbar, breadcrumbs, tabs, search
+ * 14-quickbook.css       - Quickbook legacy wrapper, titles, TOC, tables, footer
+ * 15-readme.css          - Library README styles
+ * 16-responsive-toc.css  - AsciiDoctor responsive TOC layout (768px → 1920px)
+ */
+
+/**
+ * Template Structure:
+ * The framework supports these main documentation templates:
+ *
+ * 1. AsciiDoctor Template:
+ * example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html
+ * <div class="boostlook">
+ *   <div class="header">
+ *     <h1>Title</h1>
+ *     <div id="toc" class="toc2">
+ *         <button id="toggle-toc">Show Table of Contents</button>
+ *         <ul class="sectlevel1">TOC Links</ul>
+ *     </div>
+ *   </div>
+ *   <div id="content">
+ *     <div class="sect1">Content Sections</div>
+ *   </div>
+ *   <div id="footer">Footer Content</div>
+ * </div>
+ *
+ * 2. Antora Template:
+ * example: https://www.boost.io/doc/libs/1_87_0/doc/antora/url/index.html
+ * <div class="boostlook">
+ *   <div id="header">
+ *     <div id="toc" class="nav-container toc2">Navigation</div>
+ *   </div>
+ *   <div id="content">
+ *     <article class="doc max-width-reset">
+ *       <div class="toolbar">Breadcrumbs and Spirit Nav</div>
+ *       <h1>Title</h1>
+ *       <div class="sect1">Content Sections</div>
+ *     </article>
+ *   </div>
+ *   <div id="footer">Footer Content</div>
+ * </div>
+ *
+ * 3. Quickbook Template:
+ * example: https://www.boost.io/doc/libs/1_87_0/doc/html/accumulators.html
+ * <div class="boostlook">
+ *    <div class="spirit-nav">Navigation</div>
+ *    <div class="chapter">  <!-- might also be .section, .refentry, .document, or .book -->
+ *        <div class="titlepage">Title and information</div>
+ *        <div class="toc">Table of Contents</div>
+ *        <div class="section>Content</div>
+ *        <div class="copyright-footer">Footer</div>
+ *    </div>
+ * </div>
+ *
+ * 4. README Template:
+ * example: https://www.boost.io/library/1.87.0/beast/
+ * <section id="libraryReadMe" class="boostlook">ReadMe Content</section>
+ */
+
+/**
+ * Design Philosophy:
+ * - Consistent styling across different documentation templates
+ * - Responsive design with mobile-first approach
+ * - Dark/Light theme support
+ * - Accessible typography and color schemes
+ * - Modern scrolling and navigation experience
+ */
+
+/**
+ * Framework Selector Conventions
+ *
+ * The framework uses the following selector prefixes:
+ *
+ * 1. .boostlook
+ *    - Primary selector for cross-template styles
+ *    - Applies to all documentation formats
+ *    - Used for common components and layouts
+ *
+ * 2. .boostlook:not(:has(.doc)),
+ *    .boostlook#boost-legacy-docs-wrapper - (DEPRECATED),
+ *    .boostlook#antora-template-wrapper,
+ *    div.source-docs-antora.boostlook:not(:has(>.boostlook)) - (Fallback)
+ *    - Specific to legacy Quickbook templates
+ *    - Maintains backward compatibility
+ *    - Handles specialized Quickbook formatting
+ *
+ * 3. .boostlook#libraryReadMe
+ *    - Dedicated to README template styling
+ *    - Optimized for library documentation
+ *    - Ensures consistent README presentation
+ */

src/css/01-variables.css

@@ -0,0 +1,345 @@
+
+/*----------------- Root Variables - Start -----------------*/
+
+/* Root CSS Variables
+ * Defines core design tokens used throughout the framework.
+ * Organized into:
+ * 1. General Variables - Global settings used across themes
+ * 2. Color System - Comprehensive color palette including brand, state, and UI colors
+ * 3. Typography - Font sizes, line heights, and text styling variables
+ * 4. Spacing System - Padding, margins, and layout spacing tokens
+ * 5. Icons - SVG icon definitions for light and dark themes
+ * 6. Responsive Design - Mobile-first breakpoint variables
+ */
+
+:root {
+  /* General Variables - Core design tokens for all themes */
+  --bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */
+
+  /*----------------- New Look Variables Start -----------------*/
+  /* New Look Primitives */
+  /* Colors Shades of Grey */
+  --colors-neutral-0: #ffffff;
+  --colors-neutral-50: #f5f6f8;
+  --colors-neutral-100: #e4e7ea;
+  --colors-neutral-200: #c7cccf;
+  --colors-neutral-250: #f9f9f9;
+  --colors-neutral-300: #afb3b6;
+  --colors-neutral-400: #949a9e;
+  --colors-neutral-500: #798086;
+  --colors-neutral-600: #62676b;
+  --colors-neutral-700: #494d50;
+  --colors-neutral-800: #393b3f;
+  --colors-neutral-900: #18191b;
+  --colors-neutral-950: #0d0e0f;
+
+  /* Colors Brand Shades */
+  --colors-brand-orange-50: #fbf2e6;
+  --colors-brand-orange-100: #ffeaca;
+  --colors-brand-orange-200: #ffd897;
+  --colors-brand-orange-300: #ffc364;
+  --colors-brand-orange-400: #ffb030;
+  --colors-brand-orange-500: #ff9f00;
+  --colors-brand-orange-600: #cd7e00;
+  --colors-brand-orange-700: #9b5f00;
+  --colors-brand-orange-800: #694000;
+  --colors-brand-orange-900: #352000;
+  --colors-brand-orange-950: #1e1200;
+
+  /* Colors Negative Shades */
+  --colors-negative-50: #fdf1f3ff;
+  --colors-negative-100: #ffe6ea;
+  --colors-negative-200: #ffcad2;
+  --colors-negative-300: #fe9aab;
+  --colors-negative-400: #f9677f;
+  --colors-negative-500: #eb3856;
+  --colors-negative-600: #bc233c;
+  --colors-negative-700: #8d1529;
+  --colors-negative-800: #600d1b;
+  --colors-negative-900: #39070f;
+  --colors-negative-950: #1d0408;
+
+  /* Colors Positive Shades */
+  --colors-positive-0: #f8fefb;
+  --colors-positive-50: #f0fef7ff;
+  --colors-positive-100: #def7eb;
+  --colors-positive-200: #bdeed6;
+  --colors-positive-300: #9ce6c2;
+  --colors-positive-400: #7bddad;
+  --colors-positive-500: #5ad599;
+  --colors-positive-600: #48ac7b;
+  --colors-positive-700: #36825d;
+  --colors-positive-800: #255940;
+  --colors-positive-850: #1c4431;
+  --colors-positive-900: #132f22;
+  --colors-positive-950: #0a1b13;
+
+  /* Colors Warning Shades */
+  --colors-warning-0: rgba(255, 248, 243, 0.5);
+  --colors-warning-50: #fff8f3ff;
+  --colors-warning-100: #ffefe2;
+  --colors-warning-200: #ffd4b3;
+  --colors-warning-300: #feb780;
+  --colors-warning-400: #ff9442;
+  --colors-warning-500: #fd760f;
+  --colors-warning-600: #c25909;
+  --colors-warning-700: #914104;
+  --colors-warning-800: #5d2a02;
+  --colors-warning-900: #341700;
+  --colors-warning-950: #1f0e01;
+
+  /* Colors Blue Shades */
+  --colors-blue-0: #f6fafd;
+  --colors-blue-25: #ebf4f9;
+  --colors-blue-50: #daeef9;
+  --colors-blue-100: #c2e2f4;
+  --colors-blue-200: #92cbe9;
+  --colors-blue-300: #62b3dd;
+  --colors-blue-400: #329cd2;
+  --colors-blue-500: #0284c7;
+  --colors-blue-600: #026a9f;
+  --colors-blue-700: #014f77;
+  --colors-blue-800: #013550;
+  --colors-blue-850: #01283c;
+  --colors-blue-900: #001a28;
+  --colors-blue-950: #000d14;
+
+  /* Colors Code Syntax Pallette */
+  --colors-code-colors-red: var(--colors-negative-400);
+  --colors-code-colors-green: var(--colors-positive-500);
+  --colors-code-colors-blue: var(--colors-blue-300);
+  --colors-code-colors-black: var(--colors-neutral-950);
+  --colors-code-colors-yellow: #ebc419;
+  --colors-code-colors-purple: #b350ed;
+  --colors-code-colors-turquoise: #67eaf9;
+  --colors-code-colors-white: var(--colors-neutral-0);
+  --colors-code-colors-red-contrast: var(--colors-negative-500);
+  --colors-code-colors-green-contrast: var(--colors-positive-600);
+  --colors-code-colors-blue-contrast: var(--colors-blue-400);
+  --colors-code-colors-yellow-contrast: #d7a200;
+  --colors-code-colors-purple-contrast: #9f26e5;
+  --colors-code-colors-turquoise-contrast: #0dc4d5;
+  --colors-code-colors-navy: #5469f7;
+  --colors-code-colors-navy-contrast: #162ec6;
+
+  /* Atom One Dark Theme Colors */
+  --atom-one-dark-bg: #282c34;
+  --atom-one-dark-text: #abb2bf;
+  --atom-one-dark-comment: #5c6370;
+  --atom-one-dark-keyword: #c678dd;
+  --atom-one-dark-operator: #e06c75;
+  --atom-one-dark-function: #61aeee;
+  --atom-one-dark-string: #98c379;
+  --atom-one-dark-variable: #d19a66;
+  --atom-one-dark-constant: #56b6c2;
+  --atom-one-dark-class: #e6c07b;
+
+  /* Atom One Light Theme Colors */
+  --atom-one-light-bg: #fafafa;
+  --atom-one-light-text: #383a42;
+  --atom-one-light-comment: #a0a1a7;
+  --atom-one-light-keyword: #a626a4;
+  --atom-one-light-operator: #e45649;
+  --atom-one-light-function: #4078f2;
+  --atom-one-light-string: #50a14f;
+  --atom-one-light-variable: #986801;
+  --atom-one-light-constant: #0184bb;
+  --atom-one-light-class: #c18401;
+
+  /* Colors Other */
+  --colors-neutral-150: #d5d7d9;
+  --colors-neutral-850: #2a2c30;
+  --colors-neutral-750: #1c1c1c;
+  --colors-overlay-overlay-white-40: rgba(255 255 255 / 0.4);
+  --colors-overlay-overlay-black-40: rgba(13 14 15 / 0.4);
+  --colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64);
+  --colors-overlay-overlay-black-64: rgba(13 14 15 / 0.64);
+  --colors-overlay-overlay-white-88: rgba(255 255 255 / 0.88);
+  --colors-overlay-overlay-black-88: rgba(13 14 15 / 0.88);
+
+  /* Spacings And Sizes */
+  --spacing-size-size-0: 0rem;
+  --spacing-size-4xs: 0.125rem;
+  --spacing-size-3xs: 0.25rem;
+  --spacing-size-2xs: 0.5rem;
+  --spacing-size-xs: 0.75rem;
+  --spacing-size-sm: 1rem;
+  --spacing-size-md: 1.125rem;
+  --spacing-size-2md: 1.3rem;
+  --spacing-size-lg: 1.5rem;
+  --spacing-size-xl: 2rem;
+  --spacing-size-2xl: 2.5rem;
+  --spacing-size-3xl: 3rem;
+  --main-container: 90rem;
+
+  /* New Look Typography */
+  --font-family-body: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  --font-family-code: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-size-3xs: 0.625rem;
+  --font-size-2xs: 0.75rem;
+  --font-size-xs: 0.875rem;
+  --font-size-sm: 1rem;
+  --font-size-2sm: 1.2rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-2md: 1.3rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 1.75rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  --font-line-height-xs: 0.75rem;
+  --font-line-height-sm: 1rem;
+  --font-line-height-md: 1.25rem;
+  --font-line-height-lg: 1.5rem;
+  --font-line-height-xl: 1.75rem;
+  --font-line-height-2xl: 2rem;
+  --font-line-height-3xl: 2.5rem;
+  --font-line-height-4xl: 3rem;
+
+  /* New Look Icons */
+  /* Themed Headings Anchor Icon */
+  --icon-anchor-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_10452)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_10452%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
+  --icon-anchor-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_7189)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_7189%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
+
+  /* Themed Left Arrow Icon */
+  --icon-arrow-left-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-arrow-left-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed Right Arrow Icon */
+  --icon-arrow-right-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-arrow-right-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed Up Arrow Icon */
+  --icon-arrow-up-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-arrow-up-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed Clipboard Icon */
+  --icon-clipboard-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-clipboard-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed Home Icon */
+  --icon-home-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1192%203.23498C11.177%202.24329%2012.823%202.24329%2013.8808%203.23498L19.8808%208.85998C20.4354%209.37986%2020.75%2010.1061%2020.75%2010.8662V18.9997C20.75%2019.9662%2019.9665%2020.7497%2019%2020.7497H15C14.5858%2020.7497%2014.25%2020.414%2014.25%2019.9997V15.9998C14.25%2015.8617%2014.1381%2015.7498%2014%2015.7498H10C9.86193%2015.7498%209.75%2015.8617%209.75%2015.9998V19.9997C9.75%2020.414%209.41421%2020.7497%209%2020.7497H5C4.0335%2020.7497%203.25%2019.9662%203.25%2018.9997V10.8662C3.25%2010.1061%203.56462%209.37986%204.11916%208.85998L10.1192%203.23498ZM12.8549%204.32929C12.3741%203.87852%2011.6259%203.87852%2011.1451%204.32929L5.14507%209.95429C4.89301%2010.1906%204.75%2010.5207%204.75%2010.8662V18.9997C4.75%2019.1378%204.86193%2019.2497%205%2019.2497H8.25V15.9998C8.25%2015.0333%209.0335%2014.2498%2010%2014.2498H14C14.9665%2014.2498%2015.75%2015.0333%2015.75%2015.9998V19.2497H19C19.1381%2019.2497%2019.25%2019.1378%2019.25%2018.9997V10.8662C19.25%2010.5207%2019.107%2010.1906%2018.8549%209.95429L12.8549%204.32929Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-home-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1192%203.23523C11.177%202.24353%2012.823%202.24353%2013.8808%203.23523L19.8808%208.86023C20.4354%209.38011%2020.75%2010.1063%2020.75%2010.8665V19C20.75%2019.9665%2019.9665%2020.75%2019%2020.75H15C14.5858%2020.75%2014.25%2020.4142%2014.25%2020V16C14.25%2015.8619%2014.1381%2015.75%2014%2015.75H10C9.86193%2015.75%209.75%2015.8619%209.75%2016V20C9.75%2020.4142%209.41421%2020.75%209%2020.75H5C4.0335%2020.75%203.25%2019.9665%203.25%2019V10.8665C3.25%2010.1063%203.56462%209.38011%204.11916%208.86023L10.1192%203.23523ZM12.8549%204.32953C12.3741%203.87876%2011.6259%203.87876%2011.1451%204.32953L5.14507%209.95453C4.89301%2010.1908%204.75%2010.5209%204.75%2010.8665V19C4.75%2019.1381%204.86193%2019.25%205%2019.25H8.25V16C8.25%2015.0335%209.0335%2014.25%2010%2014.25H14C14.9665%2014.25%2015.75%2015.0335%2015.75%2016V19.25H19C19.1381%2019.25%2019.25%2019.1381%2019.25%2019V10.8665C19.25%2010.5209%2019.107%2010.1908%2018.8549%209.95453L12.8549%204.32953Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed File Icon */
+  --icon-file-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%2362676B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%2362676B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-file-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%23949A9E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%23949A9E%22%2F%3E%3C%2Fsvg%3E");
+
+  /* Themed Menu Icon */
+  --icon-menu-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
+  --icon-menu-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
+
+  /* New Look Responsive Mobile First */
+  /* Spacing */
+  --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
+  --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
+  --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
+  --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
+  --padding-padding-lg: var(--spacing-size-md);
+  --padding-padding-sm: var(--spacing-size-xs);
+  --padding-padding-2sm: var(--spacing-size-2md);
+  --padding-padding-xs: var(--spacing-size-xs);
+  --padding-padding-2xs: var(--spacing-size-2xs);
+  --padding-padding-3xs: var(--spacing-size-3xs);
+  --padding-padding-xl: var(--spacing-size-xl);
+  --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
+  --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
+  --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
+  --padding-padding-md: var(--spacing-size-sm);
+  --main-margin: var(--spacing-size-sm);
+  --main-max-width-leftbar: 0rem;
+  --main-content-width: 54rem;
+  --icons-24: 1.5rem;
+  --icons-20: 1.25rem;
+  --icons-16: 1rem;
+  --icons-12: 0.75rem;
+
+  /* Typography */
+  --typography-font-size-3xs: var(--font-size-3xs);
+  --typography-font-size-2xs: var(--font-size-2xs);
+  --typography-font-size-xs: var(--font-size-xs);
+  --typography-font-size-sm: var(--font-size-xs);
+  --typography-font-size-md: var(--font-size-sm);
+  --typography-font-size-2md: var(--font-size-2sm);
+  --typography-font-size-lg: var(--font-size-md);
+  --typography-font-size-xl: var(--font-size-lg);
+  --typography-font-size-2xl: var(--font-size-xl);
+  --typography-font-size-3xl: var(--font-size-2xl);
+  --typography-font-size-4xl: var(--font-size-3xl);
+  --typography-line-height-xs: var(--font-line-height-xs);
+  --typography-line-height-sm: var(--font-line-height-sm);
+  --typography-line-height-md: var(--font-line-height-md);
+  --typography-line-height-lg: var(--font-line-height-md);
+  --typography-line-height-xl: var(--font-line-height-lg);
+  --typography-line-height-2xl: var(--font-line-height-lg);
+  --typography-line-height-3xl: var(--font-line-height-2xl);
+  --typography-line-height-4xl: var(--font-line-height-3xl);
+  /*----------------- New Look Variables End -----------------*/
+}
+
+/*----------------- New Look Responsive Desktop Start -----------------*/
+@media (min-width: 768px) {
+  :root {
+    /* Spacing */
+    --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
+    --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
+    --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
+    --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
+    --padding-padding-lg: var(--spacing-size-lg);
+    --padding-padding-sm: var(--spacing-size-sm);
+    --padding-padding-xs: var(--spacing-size-xs);
+    --padding-padding-2xs: var(--spacing-size-2xs);
+    --padding-padding-3xs: var(--spacing-size-3xs);
+    --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
+    --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
+    --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
+    --padding-padding-md: var(--spacing-size-md);
+    --main-margin: var(--spacing-size-xl);
+    --main-max-width-leftbar: 18.25rem;
+    --icons-24: 1.5rem;
+    --icons-20: 1.25rem;
+    --icons-16: 1rem;
+    --icons-12: 0.75rem;
+
+    /* Typography */
+    --typography-font-size-3xs: var(--font-size-3xs);
+    --typography-font-size-2xs: var(--font-size-2xs);
+    --typography-font-size-xs: var(--font-size-xs);
+    --typography-font-size-sm: var(--font-size-sm);
+    --typography-font-size-md: var(--font-size-md);
+    --typography-font-size-2md: var(--font-size-2md);
+    --typography-font-size-lg: var(--font-size-lg);
+    --typography-font-size-xl: var(--font-size-xl);
+    --typography-font-size-2xl: var(--font-size-2xl);
+    --typography-font-size-3xl: var(--font-size-3xl);
+    --typography-font-size-4xl: var(--font-size-4xl);
+    --typography-line-height-xs: var(--font-line-height-xs);
+    --typography-line-height-sm: var(--font-line-height-sm);
+    --typography-line-height-md: var(--font-line-height-md);
+    --typography-line-height-lg: var(--font-line-height-lg);
+    --typography-line-height-xl: var(--font-line-height-xl);
+    --typography-line-height-2xl: var(--font-line-height-2xl);
+    --typography-line-height-3xl: var(--font-line-height-3xl);
+    --typography-line-height-4xl: var(--font-line-height-4xl);
+
+    /* Heading */
+    --typography-font-size-h1: var(--font-size-2xl);
+    --typography-font-size-h2: var(--font-size-xl);
+    --typography-font-size-h3: var(--font-size-2md);
+    --typography-font-size-h4: var(--font-size-md);
+
+    /*
+*/
+  }
+}
+
+@media (min-width: 990px) {
+  :root {
+    --main-max-width-leftbar: 21.25rem;
+    --main-margin: var(--spacing-size-3xl);
+  }
+}
+
+/*----------------- New Look Responsive Desktop End -----------------*/
+
+/*----------------- Root Variables - End -----------------*/

src/css/02-themes.css

@@ -0,0 +1,243 @@
+
+/*----------------- HTML Variables - Start -----------------*/
+
+/**
+ * HTML Theme Variables
+ * These variables are applied to the HTML element and control the active theme.
+ * The framework supports two themes:
+ * 1. Light Theme (default)
+ * 2. Dark Theme (activated by html.dark class)
+ */
+
+/* Light Theme (Default) Configuration */
+html {
+  /*----------------- New Look Variables Start -----------------*/
+  --icon-anchor: var(--icon-anchor-light);
+  --icon-arrow-left: var(--icon-arrow-left-light);
+  --icon-arrow-right: var(--icon-arrow-right-light);
+  --icon-arrow-up: var(--icon-arrow-up-light);
+  --icon-clipboard: var(--icon-clipboard-light);
+  --icon-home: var(--icon-home-light);
+  --icon-file: var(--icon-file-light);
+  --icon-menu: var(--icon-menu-light);
+
+  --text-buttons-button-label-primary-default: var(--colors-neutral-0);
+  --text-buttons-button-label-secondary-default: var(--colors-neutral-900);
+  --text-buttons-button-label-inactive: var(--colors-neutral-500);
+
+  --text-main-text-primary: var(--colors-neutral-900);
+  --text-main-text-link-blue-secondary: var(--colors-blue-500);
+  --text-main-text-link-blue-tetriary: var(--colors-blue-400);
+  --text-main-text-body-secondary: var(--colors-neutral-700);
+  --text-main-text-body-quaternary: var(--colors-neutral-400);
+  --text-main-text-body-tetriary: var(--colors-neutral-600);
+  --text-main-text-body-primary: var(--colors-neutral-850);
+  --text-main-text-link-blue: var(--colors-blue-600);
+
+  --text-states-text-warning-tetriary: var(--colors-warning-600);
+  --text-states-text-warning-secondary: var(--colors-warning-500);
+  --text-states-text-positive-secondary: var(--colors-positive-500);
+  --text-states-text-positive-tetriary: var(--colors-positive-600);
+  --text-states-text-negative-secondary: var(--colors-negative-500);
+  --text-states-text-negative-tetriary: var(--colors-negative-600);
+  --text-states-text-warning: var(--colors-warning-400);
+  --text-states-text-positive: var(--colors-positive-400);
+  --text-states-text-negative: var(--colors-negative-400);
+  --text-states-text-additional: var(--colors-blue-400);
+  --text-states-text-additional-secondary: var(--colors-blue-500);
+  --text-states-text-additional-tetriary: var(--colors-blue-600);
+
+  --text-code-red: var(--atom-one-light-operator);
+  --text-code-green: var(--atom-one-light-string);
+  --text-code-blue: var(--atom-one-light-function);
+  --text-code-yellow: var(--atom-one-light-variable);
+  --text-code-purple: var(--atom-one-light-keyword);
+  --text-code-turquoise: var(--atom-one-light-constant);
+  --text-code-neutral: var(--atom-one-light-text);
+  --text-code-navy: var(--atom-one-light-class);
+
+  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-400);
+  --surface-button-button-bg-primary-default: var(--colors-blue-700);
+  --surface-button-button-bg-primary-pressed: var(--colors-blue-700);
+  --surface-button-button-bg-primary-inactive: var(--colors-neutral-200);
+  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500);
+  --surface-button-button-bg-primary-hover: var(--colors-blue-800);
+  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400);
+  --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-200);
+
+  --surface-background-main-base-primary: var(--colors-neutral-0);
+  --surface-background-main-surface-primary: var(--colors-neutral-50);
+  --surface-background-main-surface-secondary: var(--colors-neutral-100);
+  --surface-background-main-surface-tetriary: var(--colors-neutral-150);
+  --surface-background-main-surface-blue-primary: var(--colors-blue-0);
+  --surface-background-main-surface-blue-secondary: var(--colors-blue-50);
+  --surface-background-main-surface-blue-tetriary: var(--colors-blue-100);
+  --surface-background-main-surface-blue-quaternary: var(--colors-blue-200);
+  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-white-64);
+  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-black-40);
+  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88);
+
+  --surface-background-states-surface-warning-primary: var(--colors-warning-0);
+  --surface-background-states-surface-warning-secondary: var(--colors-warning-100);
+  --surface-background-states-surface-warning-tetriary: var(--colors-warning-200);
+  --surface-background-states-surface-warning-quaternary: var(--colors-warning-300);
+  --surface-background-states-surface-positive-primary: var(--colors-positive-50);
+  --surface-background-states-surface-positive-secondary: var(--colors-positive-100);
+  --surface-background-states-surface-positive-tetriary: var(--colors-positive-200);
+  --surface-background-states-surface-positive-quaternary: var(--colors-positive-300);
+  --surface-background-states-surface-negative-primary: var(--colors-negative-50);
+  --surface-background-states-surface-negative-secondary: var(--colors-negative-100);
+  --surface-background-states-surface-negative-tetriary: var(--colors-negative-200);
+  --surface-background-states-surface-negative-quaternary: var(--colors-negative-300);
+  --surface-background-states-surface-additional-secondary: var(--colors-blue-100);
+  --surface-background-states-surface-additional-tetriary: var(--colors-blue-200);
+  --surface-background-states-surface-additional-quaternary: var(--colors-blue-300);
+
+  --surface-icons-icon-primary: var(--colors-neutral-900);
+  --surface-icons-icon-button-primary: var(--colors-neutral-0);
+  --surface-icons-icon-button-secondary: var(--colors-neutral-900);
+  --surface-icons-icon-button-inactive: var(--colors-neutral-500);
+  --surface-icons-icon-secondary: var(--colors-neutral-600);
+  --surface-icons-icon-quaternary: var(--colors-neutral-200);
+  --surface-icons-icon-cta: var(--colors-brand-orange-500);
+  --surface-icons-icon-hover: var(--colors-brand-orange-400);
+  --surface-icons-icon-tetriary: var(--colors-neutral-400);
+  --surface-icons-icon-warning: var(--colors-warning-600);
+  --surface-icons-icon-positive: var(--colors-positive-600);
+  --surface-icons-icon-negative: var(--colors-negative-600);
+  --surface-icons-icon-brand-orange: var(--colors-brand-orange-600);
+  --surface-icons-icon-blue: var(--colors-blue-600);
+  --surface-icons-icon-blue-light: var(--colors-blue-200);
+
+  --border-border-primary: var(--colors-neutral-100);
+  --border-border-secondary: var(--colors-neutral-150);
+  --border-border-tetriary: var(--colors-neutral-300);
+  --border-border-quaternary: var(--colors-neutral-600);
+  --border-border-active: var(--colors-neutral-900);
+  --border-border-brand-orange: var(--colors-brand-orange-200);
+  --border-border-warning: var(--colors-warning-200);
+  --border-border-positive: var(--colors-positive-200);
+  --border-border-negative: var(--colors-negative-200);
+  --border-border-blue: var(--colors-blue-200);
+  --border-border-blue-primary: var(--colors-blue-100);
+  --border-border-blue-hover: var(--colors-blue-400);
+
+  /*----------------- New Look Variables End -----------------*/
+}
+
+/* Dark Theme Configuration */
+html.dark {
+  /*----------------- New Look Variables Dark Mode Start -----------------*/
+  --icon-anchor: var(--icon-anchor-dark);
+  --icon-arrow-left: var(--icon-arrow-left-dark);
+  --icon-arrow-right: var(--icon-arrow-right-dark);
+  --icon-arrow-up: var(--icon-arrow-up-dark);
+  --icon-clipboard: var(--icon-clipboard-dark);
+  --icon-home: var(--icon-home-dark);
+  --icon-file: var(--icon-file-dark);
+  --icon-menu: var(--icon-menu-dark);
+
+  --text-buttons-button-label-primary-default: var(--colors-neutral-0);
+  --text-buttons-button-label-secondary-default: var(--colors-neutral-950);
+  --text-buttons-button-label-inactive: var(--colors-neutral-500);
+
+  --text-main-text-primary: var(--colors-neutral-0);
+  --text-main-text-link-blue-secondary: var(--colors-blue-500);
+  --text-main-text-link-blue-tetriary: var(--colors-blue-600);
+  --text-main-text-link-blue: var(--colors-blue-400);
+  --text-main-text-body-secondary: var(--colors-neutral-200);
+  --text-main-text-body-tetriary: var(--colors-neutral-300);
+  --text-main-text-body-quaternary: var(--colors-neutral-600);
+  --text-main-text-body-primary: var(--colors-neutral-50);
+
+  --text-states-text-warning-tetriary: var(--colors-warning-400);
+  --text-states-text-warning-secondary: var(--colors-warning-500);
+  --text-states-text-warning: var(--colors-warning-600);
+  --text-states-text-positive-secondary: var(--colors-positive-500);
+  --text-states-text-positive-tetriary: var(--colors-positive-400);
+  --text-states-text-positive: var(--colors-positive-600);
+  --text-states-text-negative-secondary: var(--colors-negative-500);
+  --text-states-text-negative-tetriary: var(--colors-negative-400);
+  --text-states-text-negative: var(--colors-negative-600);
+  --text-states-text-additional: var(--colors-blue-600);
+  --text-states-text-additional-secondary: var(--colors-blue-500);
+  --text-states-text-additional-tetriary: var(--colors-blue-400);
+
+  --text-code-red: var(--atom-one-dark-operator);
+  --text-code-green: var(--atom-one-dark-string);
+  --text-code-blue: var(--atom-one-dark-function);
+  --text-code-yellow: var(--atom-one-dark-variable);
+  --text-code-purple: var(--atom-one-dark-keyword);
+  --text-code-turquoise: var(--atom-one-dark-constant);
+  --text-code-neutral: var(--atom-one-dark-text);
+  --text-code-navy: var(--atom-one-dark-class);
+
+  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500);
+  --surface-button-button-bg-primary-default: var(--colors-blue-800);
+  --surface-button-button-bg-primary-pressed: var(--colors-blue-800);
+  --surface-button-button-bg-primary-inactive: var(--colors-neutral-800);
+  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400);
+  --surface-button-button-bg-primary-hover: var(--colors-blue-700);
+  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500);
+  --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-800);
+
+  --surface-background-main-base-primary: var(--colors-neutral-950);
+  --surface-background-main-surface-primary: var(--colors-neutral-900);
+  --surface-background-main-surface-secondary: var(--colors-neutral-850);
+  --surface-background-main-surface-tetriary: var(--colors-neutral-800);
+  --surface-background-main-surface-blue-primary: var(--colors-blue-900);
+  --surface-background-main-surface-blue-secondary: var(--colors-blue-900);
+  --surface-background-main-surface-blue-tetriary: var(--colors-blue-850);
+  --surface-background-main-surface-blue-quaternary: var(--colors-blue-800);
+  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-black-64);
+  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-white-40);
+  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-black-88);
+
+  --surface-background-states-surface-warning-primary: var(--colors-warning-950);
+  --surface-background-states-surface-warning-secondary: var(--colors-warning-950);
+  --surface-background-states-surface-warning-tetriary: var(--colors-warning-800);
+  --surface-background-states-surface-warning-quaternary: var(--colors-warning-700);
+  --surface-background-states-surface-positive-primary: var(--colors-positive-950);
+  --surface-background-states-surface-positive-secondary: var(--colors-positive-950);
+  --surface-background-states-surface-positive-tetriary: var(--colors-positive-800);
+  --surface-background-states-surface-positive-quaternary: var(--colors-positive-700);
+  --surface-background-states-surface-negative-primary: var(--colors-negative-950);
+  --surface-background-states-surface-negative-secondary: var(--colors-negative-950);
+  --surface-background-states-surface-negative-tetriary: var(--colors-negative-800);
+  --surface-background-states-surface-negative-quaternary: var(--colors-negative-700);
+  --surface-background-states-surface-additional-secondary: var(--colors-blue-950);
+  --surface-background-states-surface-additional-tetriary: var(--colors-blue-800);
+  --surface-background-states-surface-additional-quaternary: var(--colors-blue-700);
+
+  --surface-icons-icon-primary: var(--colors-neutral-0);
+  --surface-icons-icon-button-primary: var(--colors-neutral-0);
+  --surface-icons-icon-button-secondary: var(--colors-neutral-950);
+  --surface-icons-icon-button-inactive: var(--colors-neutral-600);
+  --surface-icons-icon-secondary: var(--colors-neutral-400);
+  --surface-icons-icon-quaternary: var(--colors-neutral-600);
+  --surface-icons-icon-cta: var(--colors-brand-orange-500);
+  --surface-icons-icon-hover: var(--colors-brand-orange-600);
+  --surface-icons-icon-warning: var(--colors-warning-400);
+  --surface-icons-icon-positive: var(--colors-positive-400);
+  --surface-icons-icon-negative: var(--colors-negative-400);
+  --surface-icons-icon-brand-orange: var(--colors-brand-orange-400);
+  --surface-icons-icon-blue: var(--colors-blue-400);
+  --surface-icons-icon-blue-light: var(--colors-blue-700);
+
+  --border-border-primary: var(--colors-neutral-850);
+  --border-border-secondary: var(--colors-neutral-800);
+  --border-border-tetriary: var(--colors-neutral-700);
+  --border-border-quaternary: var(--colors-neutral-500);
+  --border-border-active: var(--colors-neutral-0);
+  --border-border-brand-orange: var(--colors-brand-orange-900);
+  --border-border-warning: var(--colors-warning-800);
+  --border-border-positive: var(--colors-positive-800);
+  --border-border-negative: var(--colors-negative-800);
+  --border-border-blue: var(--colors-blue-700);
+  --border-border-blue-primary: var(--colors-blue-850);
+  --border-border-blue-hover: var(--colors-blue-500);
+
+  /*----------------- New Look Variables Dark Mode Start -----------------*/
+}
+
+/*----------------- HTML Variables - End -----------------*/

src/css/03-fonts.css

@@ -0,0 +1,93 @@
+
+/* Override for Antora default styles */
+html:has(.boostlook) {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 1rem;
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+/*----------------- Font-Face Declarations start -----------------*/
+
+/**
+ * Typography Configuration
+ * The framework uses Noto Sans family as its primary font system:
+ * 1. Noto Sans Display: Main text font with variable weight support
+ * 2. Monaspace Neon: Monospace font for code blocks
+ *
+ * Font Loading Strategy:
+ * - Multiple source paths for resilient loading
+ * - Variable fonts for optimal performance
+ * - Font-display: block to prevent FOIT (Flash of Invisible Text)
+ */
+
+/* Noto Sans Display - Regular */
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 62.5% 100%;
+  font-variation-settings: "wght" 400, "wdth" 62.5;
+  font-display: block;
+  src: url("../font/NotoSansDisplay.ttf") format("truetype"),
+    url("/static/font/notosans.woff2") format("woff2"),
+    url("../../../../tools/boostlook/notosans.woff2") format("woff2"),
+    url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
+/* Noto Sans Display - Italic */
+@font-face {
+  font-family: "Noto Sans";
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: 62.5% 100%;
+  font-variation-settings: "wght" 400, "wdth" 62.5;
+  font-display: block;
+  src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
+    url("/static/font/notosans_ext.woff2") format("woff2"),
+    url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"),
+    url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype");
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
+/* Monaspace Neon - Regular */
+@font-face {
+  font-family: "Monaspace Neon";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../font/MonaspaceNeonFrozen-Regular.ttf") format("truetype"),
+    url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"),
+    url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"),
+    url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2");
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
+/* Monaspace Xenon - Italic */
+@font-face {
+  font-family: "Monaspace Xenon";
+  font-style: italic;
+  font-weight: 400;
+  font-display: block;
+  src: url("../font/MonaspaceXenonFrozen-Italic.ttf") format("truetype"),
+    url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"),
+    url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"),
+    url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2");
+  size-adjust: 100%;
+  ascent-override: 92%;
+  descent-override: 22%;
+  line-gap-override: 0%;
+}
+
+/*----------------- Font-Face Declarations end -----------------*/

src/css/04-reset.css

@@ -0,0 +1,105 @@
+
+/*----------------- CSS Reset start -----------------*/
+
+/**
+ * Modern CSS Reset
+ * A minimal CSS reset that:
+ * 1. Uses the modern box-sizing model
+ * 2. Removes default margins
+ * 3. Improves text rendering
+ * 4. Ensures responsive media elements
+ * 5. Normalizes form elements
+ * 6. Prevents text overflow issues
+ * 7. Provides a proper stacking context
+ * 8. Resets legacy table and adjacent element styles
+ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+* {
+  margin: 0;
+}
+
+html body {
+  margin: 0;
+}
+
+/* Body defaults */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  /* Improves text rendering on WebKit */
+}
+
+/* Media elements */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  /* Responsive media elements */
+}
+
+/* Form elements */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  /* Inherit typography */
+}
+
+/* Text elements */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  /* Prevent text overflow */
+}
+
+body :not(pre):not([class^="L"]) > code {
+  /* overrides builtin colors */
+  color: var(--text-code-neutral, #0d0e0f);
+  border: 0;
+  background-color: unset;
+}
+
+/* Stacking context */
+#root,
+#__next {
+  isolation: isolate;
+  /* Create new stacking context */
+}
+
+/* Reset Legacy Table and Next to Table Element Styles */
+.boostlook .tablecontainer,
+.boostlook .tablecontainer + *,
+.boostlook :not(.tablecontainer) > table.tableblock,
+.boostlook :not(.tablecontainer) > table.tableblock + *,
+.boostlook .doc .tablecontainer,
+.boostlook .doc .tablecontainer + *,
+.boostlook .doc :not(.tablecontainer) > table.tableblock,
+.boostlook .doc :not(.tablecontainer) > table.tableblock + *,
+.boostlook.boostlook:not(:has(.doc)) table.table,
+.boostlook.boostlook:not(:has(.doc)) table.table + * {
+  margin: revert;
+}
+
+.boostlook .underline:has(> code:only-child) {
+  text-decoration-line: none;
+}
+
+/*----------------- CSS Reset end -----------------*/

src/css/05-global-typography.css

@@ -0,0 +1,261 @@
+
+/*----------------- Global Styles for .boostlook start -----------------*/
+
+/**
+ * Global Styles for .boostlook
+ * Core styles that apply to all .boostlook containers regardless of template.
+ * These styles establish:
+ * 1. Base container styling
+ * 2. Typography hierarchy and spacing
+ * 3. Link appearances and interactions
+ * 4. Code block formatting and syntax highlighting
+ * 5. List and table styles
+ * 6. Special block elements (quotes, admonitions, etc.)
+ * 7. Pagination and navigation elements
+ * 8. Layout structure and spacing
+ */
+
+/* Base Container */
+.boostlook {
+  font-family: var(--font-family-body, "Noto Sans") !important;
+  font-variation-settings: "wght" 350, "wdth" 80;
+  background: var(--surface-background-main-base-primary, #fff);
+}
+
+/* Typography Hierarchy
+ * Establishes consistent heading sizes and spacing
+ * while maintaining proper visual hierarchy
+ */
+.boostlook h1,
+.boostlook .doc h1,
+.boostlook h2,
+.boostlook .doc h2,
+.boostlook h3,
+.boostlook .doc h3,
+.boostlook h4,
+.boostlook .doc h4,
+.boostlook h5,
+.boostlook .doc h5,
+.boostlook h6,
+.boostlook .doc h6 {
+  color: var(--text-main-text-primary, #18191b);
+  display: block;
+  line-height: var(--typography-line-height-xl, 1.75rem);
+  margin-top: var(--padding-padding-xl, 2rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  margin-bottom: 0.5rem;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  position: relative;
+}
+
+/* Heading Sizes */
+.boostlook h1,
+.boostlook .doc h1 {
+  font-size: var(--typography-font-size-h1, 1.75rem);
+  line-height: var(--typography-line-height-3xl, 2.5rem); /* 142.857% */
+}
+
+/* Primary headings */
+.boostlook h2,
+.boostlook .doc h2 {
+  font-size: var(--typography-font-size-h2, 1.5rem);
+}
+
+/* Section headings */
+.boostlook h3,
+.boostlook .doc h3 {
+  font-size: var(--typography-font-size-h3, 1.3rem);
+  line-height: var(--typography-line-height-xl, 1.85rem); /* 155.556% */
+}
+
+/* Subsection headings */
+.boostlook h4,
+.boostlook .doc h4 {
+  font-size: var(--typography-font-size-h4, 1.125rem);
+  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
+}
+
+/* Topic headings */
+.boostlook h5,
+.boostlook .doc h5 {
+  font-size: var(--font-size-sm, 1rem);
+  line-height: var(--font-line-height-lg, 1.5rem);
+}
+
+/* Subtopic headings */
+.boostlook h6,
+.boostlook .doc h6 {
+  font-size: var(--font-size-xs, 0.875rem);
+  line-height: var(--font-line-height-md, 1.25rem);
+}
+
+/* Document-specific headings adjustments */
+.boostlook .doc h2:not(.discrete) {
+  /* website-v2-doc styles overrides */
+  margin-left: 0;
+  padding-left: 0;
+  border-bottom: revert;
+  margin-right: revert;
+  padding: revert;
+}
+
+.boostlook h2:has(+ .sectionbody > .sect2:first-child > h3),
+.boostlook .doc h2:has(+ .sectionbody > .sect2:first-child > h3) {
+  margin-bottom: 0;
+}
+
+.boostlook h3:has(+ .sect3 > h4:first-child),
+.boostlook .doc h2:has(+ .sect3 > h4:first-child) {
+  margin-bottom: 0;
+}
+
+/* Override default docs site css */
+.boostlook .doc .dlist,
+.boostlook .doc .exampleblock,
+.boostlook .doc .hdlist,
+.boostlook .doc .imageblock,
+.boostlook .doc .listingblock,
+.boostlook .doc .literalblock,
+.boostlook .doc .olist,
+.boostlook .doc .paragraph,
+.boostlook .doc .partintro,
+.boostlook .doc .quoteblock,
+.boostlook .doc .sidebarblock,
+.boostlook .doc .tabs,
+.boostlook .doc .ulist,
+.boostlook .doc .verseblock,
+.boostlook .doc .videoblock,
+.boostlook .doc details,
+.boostlook .doc hr {
+  margin: revert;
+}
+
+/* Anchor positioning within headings */
+.boostlook .doc h1:has(.anchor),
+.boostlook .doc h2:has(.anchor),
+.boostlook .doc h3:has(.anchor),
+.boostlook .doc h4:has(.anchor),
+.boostlook .doc h5:has(.anchor),
+.boostlook .doc h6:has(.anchor),
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) {
+  display: inline-block;
+  /* Anchor width and spacing compensation */
+  padding-right: 3rem;
+}
+
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href] {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Heading Anchors */
+.boostlook .doc h1 .anchor,
+.boostlook .doc h2 .anchor,
+.boostlook .doc h3 .anchor,
+.boostlook .doc h4 .anchor,
+.boostlook .doc h5 .anchor,
+.boostlook .doc h6 .anchor,
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id],
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: revert;
+  width: 2rem;
+  height: 2rem;
+  border: 1px;
+  visibility: hidden;
+  opacity: 0;
+  text-decoration: none;
+  border-radius: var(--spacing-size-lg, 1.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-base-primary, #fff);
+  transform: translateY(-50%);
+  transition: all 0.2s ease;
+}
+
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id] {
+  visibility: visible;
+}
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
+  content: "";
+}
+
+.boostlook .doc h1 .anchor::before,
+.boostlook .doc h2 .anchor::before,
+.boostlook .doc h3 .anchor::before,
+.boostlook .doc h4 .anchor::before,
+.boostlook .doc h5 .anchor::before,
+.boostlook .doc h6 .anchor::before,
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
+  content: var(--icon-anchor);
+  display: block;
+  line-height: 1;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+}
+
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  line-height: 0;
+  transform: translateY(-50%);
+  transition: all 0.2s ease;
+}
+
+.doc h1:hover .anchor,
+.doc h2:hover .anchor,
+.doc h3:hover .anchor,
+.doc h4:hover .anchor,
+.doc h5:hover .anchor,
+.doc h6:hover .anchor,
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:before {
+  opacity: 1;
+  visibility: visible;
+}
+
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:after {
+  opacity: 0.6;
+  visibility: visible;
+}
+
+.boostlook .doc h1 .anchor:hover,
+.boostlook .doc h2 .anchor:hover,
+.boostlook .doc h3 .anchor:hover,
+.boostlook .doc h4 .anchor:hover,
+.boostlook .doc h5 .anchor:hover,
+.boostlook .doc h6 .anchor:hover,
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]:hover) a[href]:before {
+  border-color: var(--border-border-blue, #92cbe9);
+}
+
+.boostlook .doc h1 .anchor:active,
+.boostlook .doc h2 .anchor:active,
+.boostlook .doc h3 .anchor:active,
+.boostlook .doc h4 .anchor:active,
+.boostlook .doc h5 .anchor:active,
+.boostlook .doc h6 .anchor:active,
+.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:active:before {
+  border-color: var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+.boostlook .doc h1 .anchor:hover::before,
+.boostlook .doc h2 .anchor:hover::before,
+.boostlook .doc h3 .anchor:hover::before,
+.boostlook .doc h4 .anchor:hover::before,
+.boostlook .doc h5 .anchor:hover::before,
+.boostlook .doc h6 .anchor:hover::before {
+  opacity: 1;
+}

src/css/06-global-links.css

@@ -0,0 +1,152 @@
+
+/* Paragraph Styling */
+.boostlook p {
+  padding-top: initial !important;
+  padding-bottom: initial !important;
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-sm, 1rem);
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
+}
+
+/* Components margins */
+.boostlook .paragraph + .paragraph {
+  margin-top: var(--padding-padding-md, 1rem);
+}
+
+.boostlook:not(:has(.doc)) .section > p + p,
+.boostlook:not(:has(.doc)) .chapter > p + p,
+.boostlook div.blockquote blockquote p + p,
+.boostlook#libraryReadMe > p:not(:first-child) + p,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > p + p,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > p + p,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > p + p {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+.boostlook #content .admonitionblock + .tabs,
+.boostlook .paragraph + .tabs {
+  margin-top: var(--spacing-size-2md, 1.3rem);
+}
+
+.boostlook #content .paragraph + .admonitionblock,
+.boostlook #content .tabs + .paragraph,
+.boostlook #content .colist + .paragraph,
+.boostlook #content .admonitionblock + .admonitionblock,
+.boostlook #content .olist + .admonitionblock,
+.boostlook #content .olist + .paragraph,
+.boostlook:not(:has(.doc)) div.orderedlist + p,
+.boostlook:not(:has(.doc)) p + div.orderedlist,
+.boostlook:not(:has(.doc)) .itemizedlist + p,
+.boostlook:not(:has(.doc)) div.itemizedlist:has(+ a[id^="bind"]) + a + *,
+.boostlook:not(:has(.doc)) div.table:has(+ .table-break) + .table-break + *,
+.boostlook #content .paragraph + .olist,
+.boostlook #content .ulist + .admonitionblock,
+.boostlook #content .ulist + .paragraph,
+.boostlook #content .colist + .admonitionblock,
+.boostlook #content .admonitionblock + .paragraph,
+.boostlook #content .paragraph + table.tableblock,
+.boostlook.boostlook:not(:has(.doc)) p + table.table,
+.boostlook.boostlook:not(:has(.doc)) p + .informaltable,
+.boostlook #content table.tableblock + .paragraph,
+.boostlook #content table.tableblock + .admonitionblock,
+.boostlook:not(:has(.doc)) .informaltable + p,
+.boostlook #content .imageblock + .paragraph,
+.boostlook:not(:has(.doc)) .inlinemediaobject + p,
+.boostlook:not(:has(.doc)) p:has(> .inlinemediaobject:only-child) + p,
+.boostlook#libraryReadMe > p + table,
+.boostlook#libraryReadMe > table + p,
+.boostlook#libraryReadMe > ul + p,
+.boostlook#libraryReadMe .literalblock + .paragraph,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) + p,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) + p,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) + p {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook #content .dlist + .paragraph,
+.boostlook #content .dlist + .listingblock,
+.boostlook:not(:has(.doc)) div.blockquote + p,
+.boostlook:not(:has(.doc)) .variablelist + p {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook h2 + .tabs,
+.boostlook .doc h2 + .tabs,
+.boostlook h3 + .tabs,
+.boostlook .doc h3 + .tabs,
+.boostlook h4 + .tabs,
+.boostlook .doc h4 + .tabs,
+.boostlook h5 + .tabs,
+.boostlook .doc h5 + .tabs,
+.boostlook h5 + .tabs,
+.boostlook .doc h6 + .tabs {
+  margin-top: var(--padding-padding-sm, 0.75rem);
+}
+
+.boostlook #content .sectionbody .olist:first-child,
+.boostlook:not(:has(.doc)) .section div.orderedlist:first-child {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook .olist .imageblock .content,
+.boostlook .ulist .imageblock .content {
+  margin-bottom: var(--padding-padding-xs, 0.75rem);
+}
+
+/* Special paragraph cases */
+.boostlook table p,
+.boostlook ul p {
+  margin: 0;
+}
+
+/* Link Styling */
+.boostlook a,
+.boostlook .doc a {
+  color: var(--text-main-text-link-blue, #026a9f);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+/* Link Hover States */
+.boostlook a:hover,
+.boostlook .doc a:hover {
+  color: var(--text-states-text-warning, #FF9442);
+  cursor: pointer;
+}
+
+/* Emphasis within code */
+.boostlook code em,
+.boostlook code i,
+.boostlook pre em,
+.boostlook pre i {
+  font-family: "Monaspace Xenon", monospace;
+  font-size: inherit;
+  font-style: italic;
+}
+
+.boostlook em {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: italic;
+}
+
+/* Text Emphasis */
+.boostlook b,
+.boostlook strong {
+  font-variation-settings: "wght" 600, "wdth" 80;
+  text-shadow: none;
+}
+
+/* Comments within code (inline and blocks) */
+.boostlook code span.c,
+.boostlook code span.ch,
+.boostlook code span.cm,
+.boostlook code span.cp,
+.boostlook code span.cpf,
+.boostlook code span.c1,
+.boostlook code span.cs,
+.boostlook code span.comment {
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
+}

src/css/07-global-code.css

@@ -0,0 +1,592 @@
+
+/* Code Block Styling */
+.boostlook .doc .listingblock,
+.boostlook .listingblock {
+  position: relative;
+}
+
+.boostlook .doc .listingblock code,
+.boostlook .listingblock code {
+  display: initial;
+}
+
+.boostlook .hljs {
+  background: transparent;
+}
+
+.boostlook code {
+  font-family: var(--font-family-code, "Monaspace Neon"), monospace;
+}
+
+.boostlook table thead code {
+  background: inherit;
+}
+
+.boostlook pre code,
+.boostlook pre code.hljs,
+.boostlook .doc .content pre code,
+.boostlook .doc pre.highlight code {
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-feature-settings: "calt" 1, "liga" 0;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  color: var(--text-main-text-primary, #18191b);
+  padding: revert;
+  border: none;
+}
+
+.boostlook pre code .conum[data-value]::after,
+.boostlook pre code.hljs .conum[data-value]::after,
+.boostlook .doc .content pre code .conum[data-value]::after,
+.boostlook .doc pre.highlight code .conum[data-value]::after {
+  content: "("attr(data-value)")";
+}
+
+.boostlook pre:not(:has(> code)),
+.boostlook pre:not(:has(> code)):has(p, span) {
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook pre,
+.boostlook pre.rouge,
+.boostlook .doc .content pre,
+.boostlook .doc pre.highlight,
+.boostlook .doc .listingblock pre:not(.highlight),
+.boostlook .doc .literalblock pre
+.boostlook .literalblock pre,
+.boostlook .listingblock > .content > pre,
+.boostlook .listingblock > .content > pre:not(.highlight),
+.boostlook .literalblock > .content > pre:not(.highlight),
+.boostlook .exampleblock > .content,
+.boostlook .sidebarblock {
+  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
+  background: var(--atom-one-light-bg, #fafafa) !important;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+
+.boostlook .sidebarblock {
+  margin-top: 20px;
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+}
+
+/* Dark theme code block background */
+html.dark .boostlook pre,
+html.dark .boostlook pre.rouge,
+html.dark .boostlook .doc .content pre,
+html.dark .boostlook .doc pre.highlight,
+html.dark .boostlook .doc .listingblock pre:not(.highlight),
+html.dark .boostlook .doc .literalblock pre,
+html.dark .boostlook#libraryReadMe > pre:not(:last-child),
+html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)),
+html.dark .boostlook .doc .literalblock pre,
+html.dark .boostlook .literalblock pre,
+html.dark .boostlook .literalblock > .content > pre:not(.highlight),
+html.dark .boostlook .listingblock > .content > pre,
+html.dark .boostlook .sidebarblock,
+html.dark .boostlook .exampleblock > .content,
+html.dark .boostlook .listingblock > .content > pre {
+  background: var(--atom-one-dark-bg, #282c34) !important;
+}
+
+.boostlook .doc pre {
+  padding: initial;
+}
+
+.boostlook .content:has(> pre),
+.boostlook .content:has(> pre.highlight) {
+  border-radius: 0;
+  /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
+  background: var(--surface-background-main-surface-secondary, #e4e7ea);
+}
+
+.boostlook pre.programlisting,
+.boostlook pre.synopsis,
+.boostlook pre.literallayout,
+.boostlook#libraryReadMe > pre {
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+}
+
+/* Code Block Regular Title */
+.boostlook .doc .listingblock .title,
+.boostlook .listingblock .title {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-variation-settings: "wght" 600, "wdth" 80;
+  line-height: var(--typography-line-height-md, 1.25rem);
+  letter-spacing: unset;
+  padding-bottom: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .doc .listingblock .title a,
+.boostlook .listingblock .title a {
+  font: inherit;
+  text-decoration: none;
+}
+
+/* Code Block Title With File Name.
+ * Applies only if codeblock has child with class .toolbox
+ * and it`s title doesn`t includes any other elems as children
+*/
+.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)),
+.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) {
+  position: absolute;
+  top: 1px;
+  height: 2rem;
+  max-width: calc(100% - 5rem);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0;
+  padding-left: var(--spacing-size-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-size-2xs, 0.5rem);
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-family: "Noto Sans";
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  z-index: 1;
+  display: none;
+}
+
+.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before,
+.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before {
+  content: var(--icon-file);
+  line-height: 0;
+}
+
+/* Code Block Margins */
+.boostlook .listingblock:has(> .content > pre),
+.boostlook .listingblock:has(> .content > pre.highlight),
+.boostlook:not(:has(.doc)) pre.programlisting,
+.boostlook:not(:has(.doc)) pre.synopsis,
+.boostlook#libraryReadMe > pre,
+.boostlook#libraryReadMe .literalblock:has(pre),
+.boostlook#libraryReadMe div.highlight:has(> pre) {
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  padding:0;
+}
+
+/* Apply left margin only if code block not in definition block or in table */
+.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)),
+.boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)),
+.boostlook:not(:has(.doc)) pre.programlisting:not(:is(dd pre, td pre)),
+.boostlook:not(:has(.doc)) pre.synopsis:not(:is(dd pre, td pre)),
+.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)),
+.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)),
+.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) {
+  /*margin-left: var(--spacing-size-xl);*/
+  /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
+  background: var(--atom-one-light-bg, #fafafa);
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)) {
+  margin-left: var(--spacing-size-xl);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+}
+.boostlook .olist.arabic > ol > li .listingblock:has(> .content > pre):not(:is(dd pre, td pre)),
+.boostlook:not(:has(.doc)) .orderedlist > ol > li .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) {
+  margin-left: 0;
+}
+.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)), .boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) {
+  margin-left: var(--spacing-size-xl);
+}
+
+.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)):has(.title) {
+  border: none;
+  background: none;
+}
+
+.boostlook .listingblock:has(> .content > pre):not(:last-child),
+.boostlook .listingblock:has(> .content > pre.highlight):not(:last-child),
+.boostlook:not(:has(.doc)) pre.programlisting:not(:last-child),
+.boostlook:not(:has(.doc)) pre.synopsis:not(:last-child),
+.boostlook#libraryReadMe > pre:not(:last-child) {
+  margin-bottom: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.boostlook .highlight pre,
+.boostlook .content:has(> pre) pre.highlight,
+.boostlook .literalblock > .content > pre:not(.highlight) {
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+  border-radius: 0;
+}
+.boostlook .content:has(> pre):has(> .source-toolbox) pre {
+  /*border: 1px solid var(--border-border-secondary, #d5d7d9);*/
+  /*border-radius: var(--spacing-size-2xs, 0.5rem);*/
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox {
+  position: static;
+  order: 0;
+  display: flex;
+  visibility: visible;
+  top: unset;
+  right: unset;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-family: inherit;
+  z-index: 1;
+  padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem);
+  /*min-height: 2rem;*/
+  height: 0;
+  max-height: 0;
+  min-height: 0;
+  padding: 0;
+  /*margin-top: -1px;*/
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox  {
+  min-height: 0;
+  height: 0;
+  padding: 0 !important;
+  margin-bottom: -1px;
+}
+.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox .copy-button {
+  top: 0.25rem;
+}
+.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  text-align: right;
+  font-family: "Noto Sans";
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-transform: uppercase;
+  margin-left: auto;
+  display: none;
+}
+.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang::after {
+  content: none;
+}
+
+/* Code Block Copy to Clipboard Icon */
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
+  position: absolute;
+  top: 2.25rem;
+  right: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: inherit;
+  outline: none;
+  font-size: inherit;
+  line-height: inherit;
+  width: 2rem;
+  height: 2rem;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover {
+  border: 1px solid var(--border-border-blue, #92cbe9);
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button {
+  opacity: 1;
+  visibility: visible;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button img {
+  display: none;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button::before {
+  content: var(--icon-clipboard);
+  width: var(--icons-24, 1.5rem);
+  height: var(--icons-24, 1.5rem);
+  aspect-ratio: 1/1;
+}
+
+/* Code Block Copied Toast */
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast {
+  flex: none;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-xs, 0.75rem);
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1em;
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+  color: var(--text-main-text-primary, #18191b);
+  cursor: auto;
+  opacity: 0;
+  transition: opacity 0.5s ease 0.5s;
+}
+
+.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast::after {
+  content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2011.95L11.6569%206.2931L6%200.636243L0.343146%206.2931L6%2011.95Z%22%20fill%3D%22%23F5F6F8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.343146%206.2931L6%200.636243L11.6569%206.2931L10.9497%207.0002L6%202.05046L1.05025%207.0002L0.343146%206.2931Z%22%20fill%3D%22%23E4E7EA%22%2F%3E%3C%2Fsvg%3E");
+  position: absolute;
+  top: -62%;
+  width: 1em;
+  height: 1em;
+  border: unset;
+  border-left-color: unset;
+  transform: unset;
+  transform-origin: unset;
+  color: var(--text-main-text-primary, #18191b);
+  text-align: center;
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
+}
+
+/* Code Styling */
+.boostlook p code:not(:has(> code)),
+.boostlook li code:not(:has(> code)),
+.boostlook .doc p code:not(:has(> code)),
+.boostlook .doc .colist > table code:not(:has(> code)) {
+  display: inline;
+  color: var(--text-code-neutral, #0d0e0f);
+  font-size: 0.96em;
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-md);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook p:not(:is(table p)) code:not(:has(> code)),
+.boostlook li code:not(:has(> code)),
+.boostlook .doc p:not(:is(table p)) code:not(:has(> code)),
+.boostlook .doc .colist > table code:not(:has(> code)) {
+  border-radius: unset;
+  padding: unset;
+  /* border: 1px solid var(--border-border-secondary, #d5d7d9); */
+  background: transparent !important;
+}
+
+/* Code Links */
+.boostlook p:not(:is(table p)) a code,
+.boostlook li:not(:is(table li)) a code,
+.boostlook .doc p:not(:is(table p)) a code,
+.boostlook .doc table a code,
+.boostlook .doc .colist > table a code,
+.boostlook code:has(> a:first-child:last-child),
+.boostlook code:has(> a:only-child),
+.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child),
+.boostlook p:not(:is(table p)) code:has(> a:only-child),
+.boostlook li:not(:is(table li)) code:has(> a:first-child:last-child),
+.boostlook li:not(:is(table li)) code:has(> a:only-child),
+.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child),
+.boostlook .doc p:not(:is(table p)) code:has(> a:only-child),
+.boostlook .doc .colist > table code:has(> a:first-child:last-child),
+.boostlook .doc .colist > table code:has(> a:only-child) {
+  /* transition: all 0.2s ease; */
+  border-radius: unset;
+  border: none;
+  background: transparent !important;
+  color: inherit;
+}
+
+/* Applies to links in code in case where only one link tag inside code */
+/* .boostlook code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook p code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook li code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook li code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook .doc p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
+.boostlook .doc p code:not(.tableblock code, .table code):has(> a:only-child) a,
+.boostlook .doc .colist > table code:has(> a:first-child:last-child) a,
+.boostlook .doc .colist > table code:has(> a:only-child) a {
+  text-decoration: none;
+  font: inherit;
+  color: inherit;
+} */
+
+/* .boostlook .doc table.tableblock code a,
+.boostlook:not(:has(.doc)) table.table code a { */
+/* text-decoration-color: transparent; */
+/* color: var(--text-code-blue, #329cd2); */
+/* line-height: var(--typography-line-height-lg, 1.5rem); */
+/* } */
+
+/* Code Link Hover States */
+/* .boostlook p:not(:is(table p)) a:hover code,
+.boostlook li a:hover code,
+.boostlook .doc p:not(:is(table p)) a:hover code,
+.boostlook .doc table a:hover code,
+.boostlook .doc .colist > table a:hover code,
+.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
+.boostlook p:not(:is(table p)) code:has(> a:only-child):hover,
+.boostlook li code:has(> a:first-child:last-child):hover,
+.boostlook li code:has(> a:only-child):hover,
+.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
+.boostlook .doc p:not(:is(table p)) code:has(> a:only-child):hover,
+.boostlook .doc .colist > table code:has(> a:first-child:last-child):hover,
+.boostlook .doc .colist > table code:has(> a:only-child):hover {
+  border-color: var(--border-border-blue-hover, #329cd2);
+  background: var(--surface-background-main-surface-blue-tetriary, #c2e2f4) !important;
+} */
+
+.boostlook a:hover code {
+  color: inherit;
+}
+
+.boostlook .doc table.tableblock code:hover a,
+.boostlook:not(:has(.doc)) table.table code:hover a,
+.boostlook .doc table.tableblock code a:focus-visible,
+.boostlook:not(:has(.doc)) table.table code a:focus-visible {
+  text-decoration-color: var(--border-border-blue, #92cbe9);
+}
+
+/* Syntax Highlighting */
+.boostlook .hljs-keyword,
+.boostlook .hljs-selector-tag,
+.boostlook .hljs-subst,
+.boostlook pre span.k,
+.boostlook pre span.kc,
+.boostlook pre span.kd,
+.boostlook pre span.kn,
+.boostlook pre span.kp,
+.boostlook pre span.kr,
+.boostlook pre span.kt,
+.boostlook pre span.keyword,
+.boostlook pre span.property {
+  color: var(--text-code-purple, #9f26e5);
+}
+
+.boostlook pre span.n,
+.boostlook pre span.na,
+.boostlook pre span.nb,
+.boostlook pre span.bp,
+.boostlook pre span.nc,
+.boostlook pre span.no,
+.boostlook pre span.nd,
+.boostlook pre span.ni,
+.boostlook pre span.ne,
+.boostlook pre span.nf,
+.boostlook pre span.py,
+.boostlook pre span.nl,
+.boostlook pre span.nn,
+.boostlook pre span.nx,
+.boostlook pre span.nt,
+.boostlook pre span.nv,
+.boostlook pre span.vc,
+.boostlook pre span.vg,
+.boostlook pre span.vi,
+.boostlook pre span.identifier {
+  color: var(--text-main-text-body-primary, #2a2c30);
+}
+
+.boostlook pre span.c,
+.boostlook pre span.ch,
+.boostlook pre span.cm,
+.boostlook pre span.cp,
+.boostlook pre span.cpf,
+.boostlook pre span.c1,
+.boostlook pre span.cs,
+.boostlook pre span.sd,
+.boostlook pre span.sh,
+.boostlook pre span.comment,
+.boostlook .hljs-comment,
+.boostlook .cpp-comment,
+.boostlook .hljs-quote,
+.boostlook .hljs-addition,
+.boostlook .hljs-built_in,
+.boostlook .hljs-bullet,
+.boostlook .hljs-code {
+  color: var(--atom-one-light-comment, #a0a1a7);
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
+}
+
+/* Dark theme comment color */
+html.dark .boostlook pre span.c,
+html.dark .boostlook pre span.ch,
+html.dark .boostlook pre span.cm,
+html.dark .boostlook pre span.cp,
+html.dark .boostlook pre span.cpf,
+html.dark .boostlook pre span.c1,
+html.dark .boostlook pre span.cs,
+html.dark .boostlook pre span.sd,
+html.dark .boostlook pre span.sh,
+html.dark .boostlook pre span.comment,
+html.dark .boostlook .hljs-comment,
+html.dark .boostlook .cpp-comment,
+html.dark .boostlook .hljs-quote,
+html.dark .boostlook .hljs-addition,
+html.dark .boostlook .hljs-built_in,
+html.dark .boostlook .hljs-bullet,
+html.dark .boostlook .hljs-code {
+  color: var(--atom-one-dark-comment, #5c6370);
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
+}
+
+.boostlook pre span.s,
+.boostlook pre span.sa,
+.boostlook pre span.sb,
+.boostlook pre span.dl,
+.boostlook pre span.s2,
+.boostlook pre span.se,
+.boostlook pre span.si,
+.boostlook pre span.sx,
+.boostlook pre span.sr,
+.boostlook pre span.s1,
+.boostlook pre span.ss,
+.boostlook pre span.string,
+.boostlook .hljs-doctag,
+.boostlook .hljs-string,
+.boostlook .hljs-deletion,
+.boostlook .hljs-number,
+.boostlook .hljs-quote,
+.boostlook .hljs-selector-class,
+.boostlook .hljs-selector-id,
+.boostlook .hljs-template-tag,
+.boostlook .hljs-type {
+  color: var(--text-code-red, #f9677f);
+}
+
+.boostlook .hljs-section,
+.boostlook .hljs-selector-id,
+.boostlook .hljs-title {
+  color: var(--text-code-blue, #329cd2);
+}
+
+.boostlook .hljs-attribute,
+.boostlook .hljs-name,
+.boostlook .hljs-tag {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Syntax Defaults */
+.boostlook .hljs-attribute,
+.boostlook .hljs-doctag,
+.boostlook .hljs-keyword,
+.boostlook .hljs-meta .hljs-keyword,
+.boostlook .hljs-name,
+.boostlook .hljs-selector-tag,
+.boostlook .hljs-section,
+.boostlook .hljs-title {
+  font-weight: inherit;
+}
+
+.boostlook .hljs-meta {
+  color: inherit;
+}

src/css/08-global-components.css

@@ -0,0 +1,878 @@
+
+/* Table Headings */
+.boostlook h6:has(+ table) {
+  margin-left: 1em;
+}
+
+/* Quote Blocks */
+.boostlook .quoteblock,
+.boostlook .doc .quoteblock,
+.boostlook .verseblock,
+.boostlook .doc .verseblock,
+.boostlook div.blockquote {
+  padding: var(--padding-padding-md, 1.125rem) var(--padding-padding-lg, 1.5rem);
+  border-radius: var(--spacing-size-size-0, 0rem);
+  border-left: 2px solid var(--border-border-active, #18191b);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-sm, 1rem);
+  line-height: var(--typography-line-height-lg, 1.5rem);
+}
+
+/* Add intendation */
+.boostlook .sectionbody .quoteblock,
+.boostlook .sectionbody .doc .quoteblock,
+.boostlook .sectionbody .verseblock,
+.boostlook .sectionbody .doc .verseblock,
+.boostlook .sectionbody div.blockquote,
+.boostlook .section .quoteblock,
+.boostlook .section .doc .quoteblock,
+.boostlook .section .verseblock,
+.boostlook .section .doc .verseblock,
+.boostlook .section div.blockquote {
+  margin-left: var(--spacing-size-xl, 2rem);
+}
+
+.boostlook .quoteblock:not(:first-child),
+.boostlook .doc .quoteblock:not(:first-child),
+.boostlook .verseblock:not(:first-child),
+.boostlook .doc .verseblock:not(:first-child),
+.boostlook div.blockquote:not(:first-child) {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .quoteblock blockquote,
+.boostlook .doc .quoteblock blockquote,
+.boostlook .verseblock blockquote,
+.boostlook .doc .verseblock blockquote,
+.boostlook div.blockquote blockquote {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.boostlook .quoteblock blockquote .paragraph,
+.boostlook .doc .quoteblock blockquote .paragraph,
+.boostlook .verseblock blockquote .paragraph,
+.boostlook .doc .verseblock blockquote .paragraph,
+.boostlook div.blockquote blockquote p {
+  font: inherit;
+}
+
+.boostlook .quoteblock blockquote p,
+.boostlook .doc .quoteblock blockquote p,
+.boostlook .verseblock blockquote p,
+.boostlook .doc .verseblock blockquote p {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.boostlook .quoteblock blockquote:before {
+  content: none;
+}
+
+/* Pagination */
+.boostlook nav.pagination {
+  border-top: revert;
+  line-height: initial;
+  margin: revert;
+  display: flex;
+  padding: var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
+  align-items: stretch;
+  gap: var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook nav.pagination > span {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  backdrop-filter: blur(8px);
+  padding-right: revert;
+  padding-left: revert;
+  margin-left: revert;
+}
+.boostlook nav.pagination > span.next {
+  text-align: right;
+}
+
+.boostlook nav.pagination span::before {
+  content: none !important;
+}
+
+.boostlook nav.pagination > span a {
+  /* Container padding + two paddings of arrow icon container + arrow icon width + gap between arrow and content */
+  --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-3xs) * 2) + var(--icons-24) + var(--padding-padding-md));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--padding-padding-xs, 0.75rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  padding: var(--padding-padding-xs, 0.75rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-decoration: none;
+  transition: background-color 0.3s ease;
+}
+
+.boostlook nav.pagination > span:hover a {
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: inherit;
+}
+
+.boostlook nav.pagination > span.prev a {
+  padding-left: var(--_arrow-based-padding);
+}
+.boostlook nav.pagination > span.next a {
+  padding-right: var(--_arrow-based-padding);
+}
+
+@media screen and (min-width: 990px) {
+  .boostlook nav.pagination > span a {
+    --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-xs) * 2) + var(--icons-24) + var(--padding-padding-md));
+  }
+}
+
+.boostlook nav.pagination > span a::before {
+  width: auto;
+  position: static;
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  transform: revert;
+}
+
+.boostlook nav.pagination > span.prev a::before {
+  content: "Previous";
+}
+.boostlook nav.pagination > span.next a::before {
+  content: "Next";
+}
+
+.boostlook nav.pagination > span a::after {
+  --_arrow-size: calc((var(--spacing-size-3xs, 0.25rem) * 2) + var(--icons-24));
+  position: absolute;
+  top: 50%;
+  display: flex;
+  width: var(--_arrow-size);
+  height: var(--_arrow-size);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  background: var(--surface-background-main-base-primary, #fff);
+  transition: all 0.2s ease;
+  transform: translateY(-50%);
+}
+
+@media screen and (min-width: 990px) {
+  .boostlook nav.pagination > span a::after {
+    --_arrow-size: calc((var(--spacing-size-xs, 0.75rem) * 2) + var(--icons-24));
+  }
+}
+
+.boostlook nav.pagination > span.prev a::after {
+  content: var(--icon-arrow-left);
+  left: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook nav.pagination > span.next a::after {
+  content: var(--icon-arrow-right);
+  right: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook nav.pagination > span:hover a::after {
+  border-color: var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+/* Admonitions */
+.boostlook #content .admonitionblock,
+.boostlook:not(:has(.doc)) div.note,
+.boostlook:not(:has(.doc)) div.tip,
+.boostlook:not(:has(.doc)) div.important,
+.boostlook:not(:has(.doc)) div.caution,
+.boostlook:not(:has(.doc)) div.warning,
+.boostlook:not(:has(.doc)) div.blurb,
+.boostlook:not(:has(.doc)) p.blurb {
+  padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
+  border-radius: var(--spacing-size-size-0, 0rem);
+  border: 1px solid transparent;
+  margin: revert;
+  margin-left: var(--spacing-size-xl);
+  background: transparent;
+}
+
+.boostlook #content li .admonitionblock,
+.boostlook:not(:has(.doc)) li div.note,
+.boostlook:not(:has(.doc)) li div.tip,
+.boostlook:not(:has(.doc)) li div.important,
+.boostlook:not(:has(.doc)) li div.caution,
+.boostlook:not(:has(.doc)) li div.warning,
+.boostlook:not(:has(.doc)) li div.blurb,
+.boostlook:not(:has(.doc)) li p.blurb {
+  margin-left: 0;
+}
+
+/* Readme Template Admonitionblock */
+.boostlook:not(:has(.doc)) .notices {
+  background-image: none !important;
+}
+
+.boostlook #content .admonitionblock > table,
+.boostlook:not(:has(.doc)) div.note > table,
+.boostlook:not(:has(.doc)) div.tip > table,
+.boostlook:not(:has(.doc)) div.important > table,
+.boostlook:not(:has(.doc)) div.caution > table,
+.boostlook:not(:has(.doc)) div.warning > table,
+.boostlook:not(:has(.doc)) div.blurb > table,
+.boostlook:not(:has(.doc)) p.blurb > table {
+  all: revert;
+  table-layout: fixed;
+  position: relative;
+  width: 100%;
+}
+
+.boostlook #content .admonitionblock > table tr,
+.boostlook:not(:has(.doc)) div.note tbody,
+.boostlook:not(:has(.doc)) div.tip tbody,
+.boostlook:not(:has(.doc)) div.important tbody,
+.boostlook:not(:has(.doc)) div.caution tbody,
+.boostlook:not(:has(.doc)) div.warning tbody,
+.boostlook:not(:has(.doc)) div.blurb tbody,
+.boostlook:not(:has(.doc)) p.blurb tbody,
+.boostlook:not(:has(.doc)) .notices {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook #content .admonitionblock > table tr td {
+  padding: 0;
+  border: unset;
+}
+
+.boostlook #content .admonitionblock > table tr td.icon,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices .heading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-size-2xs, 0.5rem);
+  /* Removes legacy icon */
+  background: transparent;
+}
+
+.boostlook:not(:has(.doc)) .notices .heading {
+  margin: 0;
+}
+
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th > *,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th > *,
+.boostlook #content .admonitionblock > table tr td.icon > *,
+.boostlook:not(:has(.doc)) .notices .heading {
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-variation-settings: "wght" 600, "wdth" 62.5;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  /* text-transform: uppercase; */
+}
+.boostlook #content .admonitionblock > table tr td.icon > * {
+  padding: 0;
+  font-family: var(--font-family-body, "Noto Sans");
+}
+
+.boostlook #content .admonitionblock > table tr td.icon i.fa::after {
+  content: attr(title);
+}
+
+.boostlook #content .admonitionblock > table tr td.content,
+  /* Leagcy Doc */
+.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p,
+.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td,
+.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p,
+  /* Antora Template Correction*/
+.boostlook #content .admonitionblock > table tr td.content p,
+.boostlook:not(:has(.doc)) .notices .message p {
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-variation-settings: "wght" 400, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook:not(:has(.doc)) .notices .message {
+  margin: 0;
+}
+
+.boostlook #content .admonitionblock > table code,
+.boostlook:not(:has(.doc)) div.note > table code,
+.boostlook:not(:has(.doc)) div.tip > table code,
+.boostlook:not(:has(.doc)) div.important > table code,
+.boostlook:not(:has(.doc)) div.caution > table code,
+.boostlook:not(:has(.doc)) div.warning > table code,
+.boostlook:not(:has(.doc)) div.blurb > table code,
+.boostlook:not(:has(.doc)) p.blurb > table code {
+  margin: revert;
+  padding: 0;
+}
+
+/* Note */
+.boostlook #content .admonitionblock.note,
+.boostlook:not(:has(.doc)) div.note,
+.boostlook:not(:has(.doc)) .notices.note {
+  border-color: var(--border-border-blue-primary, #c2e2f4); /* var(--border-border-blue-primary, #c2e2f4) */
+  background-color: var(--surface-background-main-surface-blue-primary, #f6fafd);
+}
+
+.boostlook #content .admonitionblock.note > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.note .heading {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Tip */
+.boostlook #content .admonitionblock.tip,
+.boostlook:not(:has(.doc)) div.tip,
+.boostlook:not(:has(.doc)) .notices.tip {
+  border-color: var(--border-border-positive, #f8fefb);
+  background-color: var(--surface-background-states-surface-positive-primary, #f6fafd);
+}
+/* .boostlook #content .admonitionblock.tip > table tr td.icon,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.tip .heading {
+  background: var(--border-border-positive, #bdeed6);
+} */
+.boostlook #content .admonitionblock.tip > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.tip .heading {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Important */
+.boostlook #content .admonitionblock.important,
+.boostlook #content .admonitionblock.caution,
+.boostlook:not(:has(.doc)) div.important,
+.boostlook:not(:has(.doc)) div.caution,
+.boostlook:not(:has(.doc)) .notices.important {
+  border-color: var(--border-border-brand-orange, #ffd897);
+  background-color: var(--surface-background-states-surface-warning-primary, #fefcf9);
+}
+/* .boostlook #content .admonitionblock.important > table tr td.icon,
+.boostlook #content .admonitionblock.caution > table tr td.icon,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.important {
+  background: var(--surface-background-states-surface-warning-tetriary, #ffd4b3);
+} */
+.boostlook #content .admonitionblock.important > table tr td.icon > *,
+.boostlook #content .admonitionblock.caution > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
+.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.important {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Warning */
+.boostlook #content .admonitionblock.warning,
+.boostlook:not(:has(.doc)) div.warning,
+.boostlook:not(:has(.doc)) .notices.warning {
+  border-color: var(--border-border-negative, #ffcad2);
+  background-color: var(--surface-background-states-surface-negative-primary, #fdf1f3);
+}
+/* .boostlook #content .admonitionblock.warning > table tr td.icon,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.warning .heading {
+  background: var(--surface-background-states-surface-negative-tetriary, #ffcad2);
+} */
+.boostlook #content .admonitionblock.warning > table tr td.icon > *,
+.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
+.boostlook:not(:has(.doc)) .notices.warning .heading {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Dlist  */
+/* Apply top margin only for root list */
+.boostlook #content .dlist:not(:first-child):not(.dlist .dlist),
+.boostlook .dlist dl dt:not(:first-child):not(.dlist .dlist),
+.boostlook:not(:has(.doc)) .variablelist:not(:first-child):not(.variablelist .variablelist),
+.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child):not(.variablelist .variablelist) {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
+  background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9);
+  border: 1px solid transparent; /* var(--border-border-blue-primary, #c2e2f4) */
+  padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
+  margin-left: var(--spacing-size-xl);
+}
+
+.boostlook #content .colist.arabic > table > tbody > tr td .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
+  margin-left: 0;
+}
+
+.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) .hdlist1 {
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-variation-settings: "wght" 600, "wdth" 62.5;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  font-weight: 600;
+  color: #000 !important;
+  /*margin-bottom: var(--spacing-size-2xs, 0.5rem);*/
+}
+.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd  a:hover {
+  color: var(--text-states-text-warning, #FF9442);
+  cursor: pointer;
+}
+.boostlook #content .olist.arabic > ol > li table.tableblock:not(:first-child),
+.boostlook #content  .olist.arabic > ol > li .dlist:not(:first-child):not(.dlist .dlist) {
+  margin-left: 0;
+}
+.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd  a {
+  color: var(--text-main-text-link-blue, #026a9f);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd {
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-variation-settings: "wght" 400, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook .dlist dl,
+.boostlook:not(:has(.doc)) .variablelist dl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-size-2xs, 0.5rem);
+}
+
+/* Where is this used */
+.boostlook .dlist dl dt,
+.boostlook:not(:has(.doc)) .variablelist dl dt {
+  display: block;
+  width: fit-content;
+  padding: initial;
+  border-radius: initial;
+  border: initial;
+  /* border-bottom-left-radius: unset; */
+  background: initial;
+  color: var(--text-code-neutral, #0d0e0f);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  margin-bottom: 0;
+}
+
+/* styles for nested list */
+.boostlook .dlist:is(.dlist .dlist) dl dt,
+.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dt {
+  font-size: var(--typography-font-size-sm, 1rem);
+}
+
+.boostlook .dlist dl dt code,
+.boostlook:not(:has(.doc)) .variablelist dl dt code {
+  border: none;
+  padding: 0;
+  background: transparent !important;
+}
+
+.boostlook .dlist dl dt .term,
+.boostlook:not(:has(.doc)) .variablelist dl dt .term {
+  font: inherit;
+  font-weight: inherit;
+}
+
+.boostlook .dlist dl dt code,
+.boostlook:not(:has(.doc)) .variablelist dl dt code {
+  font-variation-settings: "wght" 600, "wdth" 80;
+  font-family: var(--font-family-code, 'Monaspace Neon');
+}
+
+.boostlook .dlist dl dd,
+.boostlook:not(:has(.doc)) .variablelist dl dd {
+  margin: unset;
+  margin-top: -1px;
+  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-sm, 1rem);
+  border-radius: var(--spacing-size-size-0, 0rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  line-height: var(--typography-line-height-lg, 1.5rem);
+}
+
+/* styles for nested list */
+.boostlook .dlist:is(.dlist .dlist) dl dd,
+.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dd {
+  border: none;
+  padding: initial;
+}
+
+/* styles for block if it has nested list */
+.boostlook .dlist dl dd:has(>.dlist),
+.boostlook:not(:has(.doc)) .variablelist dl dd:has(>.variablelist) {
+  padding: var(--padding-padding-sm, 1rem);
+}
+
+/* apply margin only for top level list */
+.boostlook .dlist dl > dd:not(:is(dl dl dd)),
+.boostlook:not(:has(.doc)) .variablelist dl > dd:not(:is(dl dl dd)) {
+  margin-left: var(--spacing-size-xl);
+}
+
+.boostlook .dlist dl dd p,
+.boostlook:not(:has(.doc)) .variablelist dl dd p {
+  font: inherit;
+  margin: 0;
+}
+
+.boostlook .dlist dl dd em,
+.boostlook:not(:has(.doc)) .variablelist dl dd em {
+  font: inherit;
+  font-variation-settings: "wght" 500, "wdth" 80;
+}
+
+/* Edit Page Link */
+.boostlook .edit-this-page {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  text-align: right;
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  padding: 0 var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .edit-this-page a {
+  all: inherit;
+}
+
+/* Layout Structure */
+.boostlook #header,
+.boostlook #content,
+.boostlook #footer {
+  padding-left: var(--main-margin);
+  padding-right: var(--main-margin);
+}
+
+.boostlook #header {
+  padding-top: 1.25rem;
+}
+
+.boostlook #footer {
+  padding-top: var(--padding-padding-sm);
+  padding-bottom: var(--padding-padding-sm);
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-xs);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Unordered Lists */
+/* Reset Legacy and Common */
+.boostlook .doc .dlist .dlist,
+.boostlook .doc .dlist .olist,
+.boostlook .doc .dlist .ulist,
+.boostlook .doc .olist .dlist,
+.boostlook .doc .olist .olist,
+.boostlook .doc .olist .ulist,
+.boostlook .doc .olist li + li,
+.boostlook .doc .ulist .dlist,
+.boostlook .doc .ulist .olist,
+.boostlook .doc .ulist .ulist,
+.boostlook .doc .ulist:not(.tablist) li + li,
+.boostlook:not(:has(.doc)) div.orderedlist li + li {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook .doc .dlist .dlist,
+.boostlook .doc .dlist .olist,
+.boostlook .doc .dlist .ulist,
+.boostlook .doc .olist .dlist,
+.boostlook .doc .olist .olist,
+.boostlook .doc .olist .ulist,
+.boostlook .doc .ulist .dlist,
+.boostlook .doc .ulist .olist,
+.boostlook .doc .ulist .ulist,
+.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
+  margin-bottom: var(--padding-padding-2xs, 0.5rem);
+}
+
+/* Default List */
+.boostlook div.itemizedlist:has(> ul.itemizedlist):not(:first-child),
+.boostlook :not(div.itemizedlist) > ul.itemizedlist,
+.boostlook .ulist:not(:first-child):not(.tablist),
+.boostlook .ulist:not(:first-child).disc,
+.boostlook#libraryReadMe ul:not(:first-child),
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook ul.itemizedlist,
+.boostlook .ulist:not(.tablist) > ul,
+.boostlook .ulist.disc > ul,
+.boostlook#libraryReadMe ul,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
+  list-style: none;
+  padding: 0;
+}
+
+.boostlook ul.itemizedlist {
+  list-style: none !important;
+}
+
+.boostlook ul.itemizedlist > li,
+.boostlook .ulist:not(.tablist) > ul > li,
+.boostlook .ulist.disc > ul > li,
+.boostlook#libraryReadMe ul > li,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class])> li,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li {
+  position: relative;
+  padding-left: 2rem;
+}
+
+.boostlook ul.itemizedlist > li,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ul:not([class]) li,
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ol:not([class]) li,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content ul:not([class]) li,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content ol:not([class]) li,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li {
+  font: inherit;
+}
+
+.boostlook ul.itemizedlist > li + li,
+.boostlook .ulist:not(.tablist) > ul > li + li,
+.boostlook .ulist.disc > ul > li + li,
+.boostlook#libraryReadMe ul > li + li,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li + li,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li + li,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li + li {
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+.boostlook ul.itemizedlist > li::before,
+.boostlook .ulist:not(.tablist) > ul > li::before,
+.boostlook .ulist.disc > ul > li::before,
+.boostlook#libraryReadMe ul > li::before,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li::before,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li::before,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li::before {
+  content: "\2022";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Ordered Lists */
+.boostlook .olist.arabic > ol,
+.boostlook .olist.loweralpha > ol,
+.boostlook:not(:has(.doc)) .orderedlist > ol {
+  list-style: none;
+  counter-reset: list-counter;
+  padding-left: 0;
+  padding-bottom: 1rem;
+}
+
+/* Arabic Ordered List */
+.boostlook .olist.arabic > ol > li,
+.boostlook:not(:has(.doc)) .orderedlist > ol > li {
+  position: relative;
+  padding-left: 2rem;
+  counter-increment: list-counter;
+}
+
+.boostlook .olist.arabic > ol > li::before,
+.boostlook:not(:has(.doc)) .orderedlist > ol > li::before {
+  content: counter(list-counter)".";
+  position: absolute;
+  left: 0;
+  top: -4px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-sm, 1rem);
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+}
+
+.boostlook .olist.arabic > ol > li::after,
+.boostlook:not(:has(.doc)) .orderedlist > ol > li::after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 0px;
+  width: 30px;
+  height: 24px;
+  /*border: 1px solid var(--border-border-tetriary);*/
+  /* Mask to make square brackets for marker to make it look like [ 01 ] */
+  /*clip-path: polygon(0 0, 3px 0, 3px 3px, 27px 3px, 27px 0, 30px 0, 30px 24px, 27px 24px, 27px 21px, 3px 21px, 3px 24px, 0 24px);*/
+}
+
+/* LowerAlfa Ordered List */
+.boostlook .olist.loweralpha > ol > li {
+  position: relative;
+  padding-left: 2rem;
+  counter-increment: list-counter;
+}
+
+.boostlook .olist.loweralpha > ol > li::before {
+  content: counter(list-counter, lower-alpha) ". ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Conum */
+.boostlook .doc .conum[data-value] {
+  position: relative;
+  border: none;
+  border-radius: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-variation-settings: "wght" 350, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem);
+  font-size: var(--typography-font-size-sm, 1rem);
+  text-align: center;
+  width: 32px;
+  height: 32px;
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-indent: unset;
+  color: var(--text-main-text-primary, #18191b);
+  text-align: center;
+  /*background: var(--surface-background-main-surface-secondary, #e4e7ea);*/
+}
+.boostlook .doc code .conum[data-value] {
+  background: transparent;
+  width: auto;
+  height: auto;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: var(--text-main-text-primary, #18191b);
+}
+
+.boostlook .doc .conum[data-value]::after {
+  content: attr(data-value)".";
+  font: inherit;
+}
+
+.boostlook .doc .conum[data-value] + b {
+  display: none;
+}
+
+/* Collist */
+.boostlook .colist.arabic {
+  margin: revert;
+}
+.boostlook .colist.arabic > table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--text-main-text-body-primary);
+}
+
+.boostlook .colist.arabic > table > tbody > tr td,
+.boostlook .colist.arabic > table > tr td {
+  /* Reset Legacy */
+  padding: revert;
+  padding-top: var(--padding-padding-3xs, 0.25rem);
+  padding-bottom: 0;
+  font-size: var(--typography-font-size-sm, 1rem);
+}
+
+.boostlook .colist.arabic > table > tbody > tr > :first-child,
+.boostlook .colist.arabic > table > tr > :first-child {
+  padding-left: 0;
+  padding-right: 0;
+  vertical-align: top;
+  /* to make first column fit its content  */
+  width: 1%;
+  white-space: nowrap;
+}
+
+.boostlook .colist.arabic > table > tbody > tr > :first-child:has(.conum),
+.boostlook .colist.arabic > table > tr > :first-child:has(.conum) {
+  padding-top: 0;
+}

src/css/09-global-tables-images.css

@@ -0,0 +1,272 @@
+
+/* Tables */
+/* Reset Antora Table Styles */
+.boostlook #content table.tableblock tr,
+.boostlook #content table.tableblock td,
+.boostlook #content table.tableblock th,
+.boostlook #content table.tableblock thead,
+.boostlook #content table.tableblock tbody,
+.boostlook #content table.tableblock tfoot,
+.boostlook #content table.tableblock caption,
+.boostlook #content table.tableblock colgroup,
+.boostlook #content table.tableblock col,
+.boostlook #content table.tableblock,
+.boostlook:not(:has(.doc)) table.table tr,
+.boostlook:not(:has(.doc)) table.table td,
+.boostlook:not(:has(.doc)) table.table th,
+.boostlook:not(:has(.doc)) table.table thead,
+.boostlook:not(:has(.doc)) table.table tbody,
+.boostlook:not(:has(.doc)) table.table tfoot,
+.boostlook:not(:has(.doc)) table.table caption,
+.boostlook:not(:has(.doc)) table.table colgroup,
+.boostlook:not(:has(.doc)) table.table col,
+.boostlook:not(:has(.doc)) table.table,
+.boostlook#libraryReadMe > table,
+.boostlook#libraryReadMe > table tr,
+.boostlook#libraryReadMe > table td,
+.boostlook#libraryReadMe > table th,
+.boostlook#libraryReadMe > table thead,
+.boostlook#libraryReadMe > table tbody,
+.boostlook#libraryReadMe > table tfoot,
+.boostlook#libraryReadMe > table caption,
+.boostlook#libraryReadMe > table colgroup,
+.boostlook#libraryReadMe > table col {
+  all: unset;
+  display: revert;
+}
+
+/* Add intendation */
+.boostlook #content .sectionbody > table.tableblock,
+.boostlook #content .section > table.tableblock,
+.boostlook .sectionbody > div.informaltable:not(:is(.informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))))),
+.boostlook .section > div.informaltable:not(:is(.informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))))),
+.boostlook:not(:has(.doc)) .sectionbody > div.table .table-contents,
+.boostlook:not(:has(.doc)) .section > div.table .table-contents,
+.boostlook#libraryReadMe > table {
+  margin-left: var(--spacing-size-xl, 2rem);
+}
+
+.boostlook #content table.tableblock:not(:first-child),
+.boostlook:not(:has(.doc)) .table:not(:first-child),
+.boostlook#libraryReadMe > table:not(:first-child) {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook #content table.tableblock.stretch,
+.boostlook:not(:has(.doc)) table.table,
+.boostlook#libraryReadMe > table.stretch {
+  min-width: 100%;
+  margin-left: var(--spacing-size-xl, 2rem);
+}
+
+.boostlook #content table.tableblock caption,
+.boostlook:not(:has(.doc)) div.table .title {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-variation-settings: "wght" 600, "wdth" 80;
+  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
+  padding: 0;
+  padding-bottom: var(--padding-padding-2xs, 0.5rem);
+}
+
+.boostlook #content table.tableblock caption > *,
+.boostlook:not(:has(.doc)) div.table .title > * {
+  font: inherit;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  text-decoration: none;
+}
+
+.boostlook:not(:has(.doc)) div.table .title {
+  padding-bottom: var(--padding-padding-2xs, 0.5rem) !important;
+}
+
+.boostlook #content table.tableblock th,
+.boostlook #content table.tableblock td,
+.boostlook:not(:has(.doc)) table.table th,
+.boostlook:not(:has(.doc)) table.table td,
+.boostlook#libraryReadMe > table th,
+.boostlook#libraryReadMe > table td {
+  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
+  text-align: left;
+  border-top: 1px solid var(--border-border-primary, #e4e7ea);
+  border-left: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook #content table.tableblock th:last-child,
+.boostlook #content table.tableblock td:last-child,
+.boostlook:not(:has(.doc)) table.table th:last-child,
+.boostlook:not(:has(.doc)) table.table td:last-child,
+.boostlook#libraryReadMe > table th:last-child,
+.boostlook#libraryReadMe > table td:last-child {
+  border-right: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook #content table.tableblock tr:last-child td,
+.boostlook:not(:has(.doc)) table.table tr:last-child td,
+.boostlook#libraryReadMe > table tr:last-child td {
+  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook #content table.tableblock:has(thead) th:first-child,
+.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child,
+.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child,
+.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child,
+.boostlook#libraryReadMe > table:has(thead) th:first-child,
+.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:first-child {
+  /*border-top-left-radius: var(--spacing-size-2xs, 0.5rem);*/
+}
+
+.boostlook #content table.tableblock:has(thead) th:last-child,
+.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child,
+.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child,
+.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child,
+.boostlook#libraryReadMe > table:has(thead) th:last-child,
+.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:last-child {
+  /*border-top-right-radius: var(--spacing-size-2xs, 0.5rem);*/
+}
+
+.boostlook #content table.tableblock tr:last-child td:first-child,
+.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child,
+.boostlook#libraryReadMe > table tr:last-child td:first-child {
+  /*border-bottom-left-radius: var(--spacing-size-2xs, 0.5rem);*/
+}
+
+.boostlook #content table.tableblock tr:last-child td:last-child,
+.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child,
+.boostlook#libraryReadMe > table tr:last-child td:last-child {
+  /*border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem);*/
+}
+
+.boostlook #content table.tableblock th,
+.boostlook #content table.tableblock th strong,
+.boostlook:not(:has(.doc)) table.table th,
+.boostlook:not(:has(.doc)) table.table th strong,
+.boostlook#libraryReadMe > table th,
+.boostlook#libraryReadMe > table th strong {
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-main-text-primary, #000000);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+}
+
+.boostlook #content table.tableblock td,
+.boostlook:not(:has(.doc)) table.table td,
+.boostlook#libraryReadMe > table td {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook#libraryReadMe > table td {
+  vertical-align: middle;
+}
+
+.boostlook #content table.tableblock td.valign-top,
+.boostlook:not(:has(.doc)) table.table td.valign-top,
+.boostlook#libraryReadMe > table td.valign-top {
+  vertical-align: top;
+}
+
+.boostlook #content table.tableblock td.valign-bottom,
+.boostlook:not(:has(.doc)) table.table td.valign-bottom,
+.boostlook#libraryReadMe > table td.valign-bottom {
+  vertical-align: bottom;
+}
+
+.boostlook #content table.tableblock td.valign-center,
+.boostlook:not(:has(.doc)) table.table td.valign-center,
+.boostlook#libraryReadMe > table td.valign-center {
+  vertical-align: middle;
+}
+
+.boostlook #content table.tableblock td.halign-left,
+.boostlook:not(:has(.doc)) table.table td.halign-left,
+.boostlook#libraryReadMe > table td.halign-left {
+  text-align: left;
+}
+
+.boostlook #content table.tableblock td.halign-center,
+.boostlook:not(:has(.doc)) table.table td.halign-center,
+.boostlook#libraryReadMe > table td.halign-center {
+  text-align: center;
+}
+
+.boostlook #content table.tableblock th p,
+.boostlook #content table.tableblock td p,
+.boostlook:not(:has(.doc)) table.table th p,
+.boostlook:not(:has(.doc)) table.table td p,
+.boostlook#libraryReadMe > table th p,
+.boostlook#libraryReadMe > table td p {
+  font: inherit;
+  color: inherit;
+}
+
+.boostlook #content table.tableblock td strong,
+.boostlook:not(:has(.doc)) table.table td strong,
+.boostlook#libraryReadMe > table td strong {
+  font-variation-settings: "wght" 600, "wdth" 80;
+}
+
+.boostlook #content table.tableblock td code,
+.boostlook:not(:has(.doc)) table.table td code,
+.boostlook#libraryReadMe > table td code {
+  background: transparent !important;
+  padding: 0;
+  border: none;
+}
+
+.boostlook #content table.tableblock .footnotes tr td,
+.boostlook:not(:has(.doc)) table.table .footnotes tr td {
+  border: none;
+  border-radius: 0;
+  padding: var(--padding-padding-xs) 0;
+}
+
+/* Image Styles */
+.boostlook .doc .imageblock,
+.boostlook .doc .videoblock {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.boostlook:not(#libraryReadMe) .image:has(> img),
+.boostlook .content:has(> img),
+.boostlook .mediaobject:has(> embed) {
+  display: flex;
+  padding: var(--padding-padding-md, 1.125rem);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--spacing-size-xs, 0.75rem);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  width: 100%;
+  margin-top: var(--padding-padding-xs, 0.75rem);
+}
+
+.boostlook:not(#libraryReadMe) .image:has(> img),
+.boostlook .content:has(> img) {
+  background-color: transparent;
+}
+
+.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) {
+  display: inline-block;
+  vertical-align: text-bottom;
+  line-height: 0;
+}
+
+.doc ul.checklist p>i.fa-check-square-o:first-child, .doc ul.checklist p>i.fa-square-o:first-child {
+  display: none;
+}
+
+.boostlook .doc .imageblock .content:has(img) {
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/*----------------- Global Styles for .boostlook end -----------------*/

src/css/10-scrollbars.css

@@ -0,0 +1,122 @@
+
+/* ----------- Scrollbars Styles Start ------------- */
+
+/**
+ *
+ * Scrollbar Styling
+ *
+ * This stylesheet provides comprehensive scrollbar customization for different contexts.
+ *
+ * Features:
+ * 1. Global Scrollbar Styles:
+ *    - Applies thin scrollbar width and custom colors to the HTML element.
+ *    - Customizes scrollbar appearance for elements within the `.boostlook` class.
+ *
+ * 2. Media Query Adjustments:
+ *    - For screens with a minimum width of 768px, further customizes scrollbar colors for specific elements.
+ *    - Changes scrollbar thumb color on hover for better visibility.
+ *
+ * 3. Webkit Scrollbar Customization:
+ *    - Sets the width and height of the scrollbar.
+ *    - Customizes the scrollbar track and thumb with specific colors and border-radius.
+ *    - Adjusts scrollbar appearance for elements within the `.boostlook` class and its descendants.
+ *
+ * 4. Hover Effects:
+ *    - Changes the scrollbar thumb color on hover for better user interaction.
+ *
+ */
+
+@supports (scrollbar-width: thin) {
+  /* HTML Matches its scroll background to content background */
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-border-tetriary, #afb3b6) var(--surface-background-main-base-primary, #fff);
+  }
+
+  .boostlook,
+  .boostlook *,
+  .boostlook pre,
+  .boostlook code,
+  .boostlook:has(:not(.doc)) div.table .table-contents {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
+  }
+
+  @media screen and (min-width: 768px) {
+    .boostlook pre,
+    .boostlook code,
+    .boostlook:has(:not(.doc)) div.table .table-contents {
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+
+    .boostlook pre:hover,
+    .boostlook code:hover,
+    .boostlook:has(:not(.doc)) div.table .table-contents:hover {
+      scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
+    }
+  }
+}
+
+html::-webkit-scrollbar,
+.boostlook::-webkit-scrollbar,
+.boostlook *::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
+}
+
+html::-webkit-scrollbar-track {
+  background: var(--surface-background-main-base-primary, #fff);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook::-webkit-scrollbar-track,
+.boostlook *::-webkit-scrollbar-track,
+.boostlook pre::-webkit-scrollbar-track,
+.boostlook code::-webkit-scrollbar-track,
+.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-track {
+  width: 6px;
+  background: transparent;
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+}
+
+html::-webkit-scrollbar-thumb,
+.boostlook::-webkit-scrollbar-thumb,
+.boostlook *::-webkit-scrollbar-thumb,
+.boostlook pre::-webkit-scrollbar-thumb,
+.boostlook code::-webkit-scrollbar-thumb,
+.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
+  width: 6px;
+  background: var(--border-border-tetriary, #afb3b6);
+}
+
+@media screen and (min-width: 768px) {
+  .boostlook pre::-webkit-scrollbar-thumb,
+  .boostlook code::-webkit-scrollbar-thumb,
+  .boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  .boostlook pre:hover::-webkit-scrollbar-thumb,
+  .boostlook code:hover::-webkit-scrollbar-thumb,
+  .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb {
+    background-color: var(--border-border-tetriary, #afb3b6);
+  }
+}
+
+.boostlook .doc pre,
+.boostlook p code,
+.boostlook table code,
+.boostlook p tt,
+.boostlook p kbd,
+.boostlook p samp,
+.boostlook p pre,
+.boostlook:not(:has(.doc)) pre,
+.boostlook code,
+.boostlook pre code,
+.boostlook .doc .content pre code,
+.boostlook#libraryReadMe pre code {
+  overflow-x: auto;
+}
+
+/* ----------- Scrollbars Styles End ------------- */

src/css/11-template-layout.css

@@ -0,0 +1,323 @@
+
+/* Template-specific Adjustments */
+
+/* Hide root scrollbars for Antora template */
+html:has(.article > .boostlook) {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Iframe container scrollbar handling */
+html:has(#docsiframe) {
+  overflow-y: hidden;
+}
+
+/* Chrome/Edge scrollbar for iframe container */
+html:has(#docsiframe)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+/* Antora template - Scrollable content area */
+.boostlook #content:has(> .doc) {
+  overflow-y: auto;
+}
+
+/* Asciidoc template - Content overflow handling */
+.boostlook:has(#content > .sect1) {
+  overflow-y: auto;
+  height: 100vh;
+}
+
+/* Table Container */
+.boostlook .content div:has(> table),
+.boostlook .doc table.tableblock,
+.boostlook #content .sect3:has(.tableblock) {
+  overflow-x: auto !important;
+}
+
+/* Article Layout */
+.article.toc2.toc-left {
+  min-height: 100vh;
+  /* Simplified: always use offset behavior, never center */
+  margin-left: var(--main-max-width-leftbar);
+  background: var(--surface-background-main-base-primary, #fff);
+  position: relative;
+  overflow-y: auto;
+}
+
+/* TOC Common start */
+/* Background Colors */
+.boostlook #toc.toc2,
+.boostlook #header:not(:has(.nav-container)),
+.boostlook #content,
+.boostlook #footer {
+  background: var(--surface-background-main-base-primary, #fff);
+}
+/* TOC Scrolling */
+.boostlook #toc.toc2 {
+  overflow-y: auto;
+  scrollbar-color: inherit;
+}
+/* TOC Positioning */
+.boostlook #toc.toc2,
+#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
+#antora-template-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
+div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook)) #toc.toc2.is-active {
+  position: static;
+}
+
+/* TOC Toggle Button */
+.boostlook #toggle-toc {
+  visibility: hidden;
+  height: 0;
+  width: 0;
+}
+
+/* TOC Navigation Menu */
+.boostlook #toc ul,
+.boostlook:not(:has(.doc)) div.toc dd {
+  margin: 0;
+  padding: 0 0 0 var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-md, 1.25rem);
+  list-style: none;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 0;
+}
+
+.boostlook #toc .nav-menu > .nav-list,
+.boostlook #toc .nav-menu > .nav-list > .nav-list,
+.boostlook #toc > ul.sectlevel1 {
+  padding-left: 0;
+}
+
+.boostlook .nav-menu .nav-list li,
+.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)),
+.boostlook #toc > ul.sectlevel1 li:has(> ul) a,
+.boostlook:not(:has(.doc)) div.toc dt {
+  position: relative;
+  padding: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
+}
+
+.boostlook .nav-menu .nav-list li:has(.nav-text),
+.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) {
+  margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem);
+}
+
+.boostlook .nav-text,
+.boostlook #toc > ul.sectlevel1 li:has(> ul) > a {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Table of Contents Links */
+.boostlook #toc a,
+.boostlook:not(:has(.doc)) div.toc a {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-sm, 1rem); /* 142.857% */
+  text-decoration: none;
+}
+
+.boostlook #toc a:hover,
+.boostlook #toc a:focus,
+.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:hover,
+.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:focus,
+.boostlook:not(:has(.doc)) div.toc a:hover,
+.boostlook:not(:has(.doc)) div.toc a:focus {
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
+  text-decoration: none;
+}
+/*
+.boostlook #toc .nav-link:visited:not(:hover),
+.boostlook #toc .sectlevel1 li:not(:has(> ul)) a:visited:not(:hover),
+.boostlook:not(:has(.doc)) div.toc a:visited:not(:hover) {
+  color: var(--text-main-text-link-viewed, #62b3dd);
+}
+*/
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"]),
+.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li,
+.boostlook:not(:has(.doc)) div.toc dd dt {
+  margin-left: calc(var(--leftbar-paddings-leftbar-padding-2xs) * -1);
+  padding-left: calc(var(--padding-padding-sm, 1rem) + var(--leftbar-paddings-leftbar-padding-2xs));
+}
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"])::before,
+.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li::before,
+.boostlook:not(:has(.doc)) div.toc dd dt:before {
+  content: "";
+  position: absolute;
+  left: var(--leftbar-paddings-leftbar-padding-2xs);
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background: var(--border-border-secondary, #d5d7d9);
+}
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"]):hover::before,
+.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)):hover::before,
+.boostlook:not(:has(.doc)) div.toc dd dt:hover:before {
+  background-color: var(--border-border-blue-hover, #329cd2);
+  isolation: isolate;
+  z-index: 1;
+}
+
+/* Navigation Menu Title */
+.boostlook #toc #toctitle,
+.boostlook .nav-menu h3.title {
+  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  font-variation-settings: "wght" 600, "wdth" 80;
+}
+
+/* TOC code in links */
+.boostlook #toc a code,
+.boostlook:not(:has(.doc)) div.toc a code {
+  /* slightly reduce code elements font size in side menu */
+  font-size: 0.96em;
+  display: inline;
+  background: none !important;
+  padding: 0;
+  border: none;
+  color: inherit;
+  transition: none;
+}
+
+/* Content */
+.boostlook #content .doc,
+.boostlook #content > .sect1,
+.boostlook #header > *,
+.boostlook #footer > * {
+  max-width: var(--main-content-width);
+  margin-left: 0;
+}
+
+.boostlook #preamble + .sect1,
+.boostlook .doc .sect1 + .sect1 {
+  margin-top: revert;
+}
+
+html:not(.is-clipped--nav):has(.boostlook) div#content {
+  display: block;
+  visibility: visible;
+}
+
+html.is-clipped--nav:has(.boostlook) div#content {
+  display: none;
+  visibility: hidden;
+}
+
+/* Responsive Design */
+@media screen and (min-width: 768px) {
+  .article.toc2.toc-left {
+    padding: 0 1rem 0 1rem;
+  }
+
+  .boostlook #toggle-toc {
+    visibility: visible;
+    height: auto;
+    width: auto;
+  }
+
+  .boostlook #toc.toc2 {
+    position: fixed;
+    width: var(--main-max-width-leftbar);
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    height: 100vh;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid var(--border-border-primary, #e4e7ea);
+    visibility: visible;
+  }
+
+  .boostlook #toc.toc2:not(.nav-container) {
+    padding: 1rem 1.5rem;
+  }
+
+  .boostlook #toc.toc2:not(.nav-container):has(#toggle-toc) {
+    /* Extra left padding if toc toggle exists */
+    padding: 1rem 1.5rem 1rem 2.2rem;
+  }
+
+
+  /* TOC Toggle Button */
+  .boostlook #toggle-toc {
+    position: fixed;
+    top: 2rem;
+    left: 1rem;
+    background-color: var(--surface-background-main-base-primary);
+    box-shadow: 0 0px 3px var(--surface-background-main-surface-transparent-inverse);
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 1rem;
+    height: 2rem;
+    width: 2rem;
+    text-indent: -9999px;
+    z-index: 1001;
+  }
+
+  /* Hidden TOC */
+  html.toc-hidden .boostlook {
+    margin-left: 0;
+  }
+
+  html.toc-hidden .boostlook #toggle-toc {
+    left: 2px;
+  }
+
+  /* Visible TOC */
+  html.toc-visible .boostlook #toggle-toc {
+    left: 2px;
+    background-color: var(--surface-background-main-base-primary);
+  }
+
+  html.toc-visible .boostlook {
+    margin-left: 0;
+  }
+
+  html.toc-hidden .boostlook #toc.toc2 {
+    visibility: hidden;
+  }
+
+  html.toc-visible #toc.toc2 {
+    opacity: 1;
+    visibility: visible;
+    /* width: 250px;
+    padding-left: 1.5rem; */
+  }
+
+  /* TOC Shadow States */
+  html.toc-visible:not(.toc-pinned) #toc.toc2 {
+    box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  /* TOC Pin States */
+  html.toc-visible.toc-pinned #toggle-toc {
+    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E");
+  }
+
+  /* html.toc-visible.toc-pinned .boostlook {
+    margin-left: var(--main-max-width-leftbar);
+  } */
+}
+/* TOC Common End */
+

src/css/12-asciidoctor.css

@@ -0,0 +1,100 @@
+/*----------------- Styles specific to AsciiDoctor content start -----------------*/
+
+/**
+ * AsciiDoctor-Specific Styles
+ * Styles that apply specifically to content generated by AsciiDoctor.
+ * These styles handle:
+ * 1. Article layout and structure
+ * 2. Table of contents (TOC) styling
+ * 3. Content formatting
+ * 4. Responsive design adjustments
+ */
+
+/* Header Adjustments */
+.boostlook #header > h1 {
+  margin-top: 0;
+}
+
+.boostlook #header .author {
+  display: inline-block;
+  margin-top: var(--padding-padding-md, 1.125rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-lg, 1.25rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-xl, 1.75rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Rouge Syntax Highlighting */
+/* Light theme Rouge syntax highlighting */
+.boostlook pre.rouge .k { /* Keywords like const, auto */
+  color: var(--atom-one-light-keyword, #a626a4);
+}
+.boostlook pre.rouge .kt { /* Types like char, int */
+  color: var(--atom-one-light-keyword, #a626a4);
+}
+.boostlook pre.rouge .n,
+.boostlook pre.rouge .nf { /* Names, identifiers, functions */
+  color: var(--atom-one-light-text, #383a42);
+}
+.boostlook pre.rouge .o { /* Operators */
+  color: var(--atom-one-light-operator, #e45649);
+}
+.boostlook pre.rouge .s,
+.boostlook pre.rouge .s1,
+.boostlook pre.rouge .s2 { /* Strings */
+  color: var(--atom-one-light-string, #50a14f);
+}
+.boostlook pre.rouge .mi,
+.boostlook pre.rouge .mf { /* Numbers */
+  color: var(--atom-one-light-variable, #986801);
+}
+.boostlook pre.rouge .p { /* Punctuation */
+  color: var(--atom-one-light-text, #383a42);
+}
+.boostlook pre.rouge .c,
+.boostlook pre.rouge .c1,
+.boostlook pre.rouge .cm { /* Comments */
+  color: var(--atom-one-light-comment, #a0a1a7);
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
+}
+
+/* Dark theme Rouge syntax highlighting */
+html.dark .boostlook pre.rouge .k,
+html.dark .boostlook pre.rouge .kt {
+  color: var(--atom-one-dark-keyword, #c678dd);
+}
+html.dark .boostlook pre.rouge .n,
+html.dark .boostlook pre.rouge .nf {
+  color: var(--atom-one-dark-text, #abb2bf);
+}
+html.dark .boostlook pre.rouge .o {
+  color: var(--atom-one-dark-operator, #e06c75);
+}
+html.dark .boostlook pre.rouge .s,
+html.dark .boostlook pre.rouge .s1,
+html.dark .boostlook pre.rouge .s2 {
+  color: var(--atom-one-dark-string, #98c379);
+}
+html.dark .boostlook pre.rouge .mi,
+html.dark .boostlook pre.rouge .mf {
+  color: var(--atom-one-dark-variable, #d19a66);
+}
+html.dark .boostlook pre.rouge .p {
+  color: var(--atom-one-dark-text, #abb2bf);
+}
+html.dark .boostlook pre.rouge .c,
+html.dark .boostlook pre.rouge .c1,
+html.dark .boostlook pre.rouge .cm {
+  color: var(--atom-one-dark-comment, #5c6370);
+  font-family: "Monaspace Xenon", monospace;
+  font-style: italic;
+}
+
+.boostlook pre.rouge code span {
+  font-style: normal;
+}
+
+/*----------------- Styles specific to AsciiDoctor content end -----------------*/

src/css/13-antora.css

@@ -0,0 +1,616 @@
+
+/*----------------- Styles specific to Antora Templates start -----------------*/
+
+/**
+ * Antora Template Styles
+ * Specific styles for Antora-generated documentation.
+ * These styles handle:
+ * 1. Header and navigation layout
+ * 2. Typography customization
+ * 3. Navigation menu structure
+ * 4. Content layout and formatting
+ * 5. Responsive design adaptations
+ */
+
+/* Table of Contents */
+.boostlook .nav {
+  height: 100%;
+  padding: var(--spacing-size-sm, 1rem) var(--spacing-size-lg, 1.5rem);
+  position: static;
+  background-color: unset;
+  box-shadow: none;
+  height: auto;
+  overflow-y: auto;
+}
+
+/* Toc Navigation */
+.boostlook #toc .nav-menu h3.title a {
+  color: inherit;
+  font: inherit;
+}
+
+.boostlook #toc .nav-menu h3.title a:focus,
+.boostlook #toc .nav-menu h3.title a:hover {
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
+}
+
+/* Navigation Menu */
+.boostlook .nav-panel-menu {
+  overflow: visible;
+}
+
+.boostlook .nav-close {
+  display: none;
+}
+
+.boostlook .nav-menu > .nav-list > .nav-list {
+  margin-left: 0;
+}
+
+.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before {
+  background-color: var(--text-main-text-primary, #18191b);
+}
+
+/* Active Page Indicator */
+.boostlook .nav-list .is-current-page.is-active {
+  position: relative;
+  border-radius: var(--padding-padding-3xs, 0.25rem);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+.boostlook #toc .nav-list .is-current-page.is-active > .nav-link {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+/* Header Layout */
+.boostlook #header:has(.nav-container) {
+  padding: 0;
+}
+
+/* Typography */
+.boostlook .doc,
+.boostlook .doc i {
+  font: inherit;
+}
+.boostlook .doc i {
+  color: inherit;
+}
+
+/* TOC Container */
+.boostlook #toc.toc2.nav-container {
+  position: fixed;
+}
+
+.boostlook #toc.toc2.nav-container.is-active {
+  position: static;
+  height: 100vh;
+  padding: 0;
+  overflow-y: auto;
+}
+
+/* Nav Toggle */
+.boostlook #content .nav-toggle {
+  display: flex;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  align-items: center;
+  border: none;
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  outline: none;
+  line-height: inherit;
+  height: unset;
+  width: unset;
+  margin-right: var(--padding-padding-xs, 0.5rem);
+
+  background: var(--surface-background-main-base-primary, #fff);
+  background-size: auto;
+  background-position-x: auto;
+}
+
+.boostlook #content .nav-toggle:before {
+  content: var(--icon-menu);
+  line-height: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .boostlook #content .nav-toggle {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+/* Layout */
+.boostlook .article .content {
+  gap: 1rem;
+}
+
+.boostlook #content:has(.toc.sidebar) {
+  display: flex;
+}
+
+.boostlook #footer:has(> script):not(:has(> div)) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* Toolbar */
+.boostlook .toolbar {
+  position: static;
+  height: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-padding-md, 1.125rem) 0;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  background-color: transparent;
+  box-shadow: unset;
+}
+
+.boostlook .toolbar + h1 {
+  margin-top: 0;
+}
+
+/* Breadcrumbs */
+.boostlook .breadcrumbs {
+  display: block;
+  flex: 1 1;
+  padding: 0;
+  font-size: inherit;
+  line-height: revert;
+  overflow: auto;
+  scrollbar-width: none;
+  margin-right: var(--spacing-size-3xs);
+}
+
+.boostlook .breadcrumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.boostlook .breadcrumbs ul {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook .breadcrumbs ul li {
+  font: inherit;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 767px) {
+  .boostlook .breadcrumbs ul li:not(:first-child):not(:last-child) {
+    display: none;
+  }
+}
+
+.boostlook .breadcrumbs ul li a {
+  font: inherit;
+  color: var(--text-main-text-link-blue-secondary, #0284c7);
+  text-decoration: none;
+  position: relative;
+}
+
+.boostlook .breadcrumbs ul li a:hover {
+  text-decoration: underline;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  margin-right: var(--padding-padding-xs, 0.75rem);
+  gap: var(--spacing-size-2xs, 0.5rem);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  border: 1px solid var(--border-border-primary, #e4e7ea);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+}
+
+.boostlook .breadcrumbs ul li:first-of-type::after {
+  content: none;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-size-3xs, 0.25rem);
+  line-height: 0;
+  color: var(--text-main-text-primary, #18191b);
+  text-decoration: none;
+}
+
+.boostlook .breadcrumbs ul li::after {
+  content: "";
+  display: inline-block;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: var(--surface-icons-icon-tetriary, #949a9e);
+  padding: 0;
+  margin: 0 var(--spacing-size-2xs, 0.5rem);
+}
+
+.boostlook .breadcrumbs ul li:first-of-type::after,
+.boostlook .breadcrumbs ul li:last-of-type::after {
+  content: none;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type a svg {
+  display: none;
+}
+
+.boostlook .breadcrumbs ul li:first-of-type a::before {
+  content: var(--icon-home);
+}
+
+/* Spirit Navigation */
+.boostlook .toolbar .spirit-nav,
+.boostlook:not(:has(.doc)) .spirit-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.boostlook .toolbar .spirit-nav .disabled,
+.boostlook:not(:has(.doc)) .spirit-nav .disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav {
+  padding-top: var(--padding-padding-md, 1.125rem);
+  justify-content: flex-end;
+}
+
+.boostlook .toolbar .spirit-nav a,
+.boostlook:not(:has(.doc)) .spirit-nav a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-size-2xs, 0.5rem);
+  border-radius: var(--spacing-size-2xs, 0.5rem);
+  /* border: 1px solid var(--border-border-primary, #e4e7ea); */
+  /* background: var(--surface-background-main-base-primary, #fff); */
+  width: 32px;
+  height: 32px;
+  text-decoration: none;
+  padding: 0;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.boostlook .toolbar .spirit-nav a:hover,
+.boostlook:not(:has(.doc)) .spirit-nav a:hover {
+  border: 1px solid var(--border-border-blue, #92cbe9);
+  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
+}
+
+.boostlook .toolbar .spirit-nav a span {
+  overflow: hidden;
+  position: relative;
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav a img {
+  display: none;
+  border-width: 0px;
+}
+
+/* hide default icons if elemnts exists */
+.boostlook .toolbar .spirit-nav a span[title*="Previous"],
+.boostlook .toolbar .spirit-nav a span[title*="Next"],
+.boostlook .toolbar .spirit-nav a span[title*="Up"] {
+  color: transparent;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
+.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
+.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey]::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 0;
+}
+
+.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="p"]::after {
+  content: var(--icon-arrow-left);
+}
+.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="n"]::after {
+  content: var(--icon-arrow-right);
+}
+.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
+  content: var(--icon-arrow-up);
+}
+.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
+  content: var(--icon-arrow-up);
+}
+
+.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after {
+  content: var(--icon-home);
+}
+
+/* Tabs Elements */
+.boostlook .tabs .tabpanel {
+  border: revert;
+  padding: var(--padding-padding-xs, 0.75rem) 0;
+  background: transparent;
+}
+
+.boostlook .tablist,
+.boostlook .tabs .tabpanel {
+  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
+}
+
+.boostlook .tablist > ul[role="tablist"] {
+  background-color: var(--colors-neutral-250, #f9f9f9);
+}
+.dark .boostlook .tablist > ul[role="tablist"] {
+  background-color: var(--colors-neutral-750, #1c1c1c);
+}
+.boostlook .tablist > ul .tab {
+  position: relative;
+  display: flex;
+  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-md, 1.125rem);
+  justify-content: center;
+  align-items: center;
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.boostlook .tabs.is-loading .tablist li:first-child::after,
+.boostlook .tabs:not(.is-loading) .tablist li.is-selected::after {
+  content: "";
+  display: block;
+  height: 1px;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--text-main-text-primary, #18191b);
+}
+
+.boostlook .tablist > ul .tab * {
+  color: inherit;
+}
+
+.boostlook .tablist > ul .tab.is-selected,
+.boostlook .tablist > ul .tab:hover {
+  color: var(--text-main-text-primary, #18191b);
+}
+
+.boostlook .tablist.ulist > ul li + li {
+  margin-left: unset;
+}
+
+.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) {
+  background-color: transparent;
+}
+
+/* Search Field Container */
+#search-field {
+  display: flex;
+  position: relative;
+}
+
+/* Search Input */
+#search-input {
+  padding: 0.15rem 0.75rem 0.15rem 1.75rem !important;
+  border: 1px solid var(--border-border-secondary);
+  border-radius: 6px;
+  background-color: var(--surface-background-main-surface-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 0.35rem center;
+  background-size: 16px 16px;
+  color: var(--text-main-text-body-primary);
+  font-family: inherit;
+  font-size: 1rem !important; /* 16px minimum prevents iOS zoom on focus */
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+#search-input::placeholder {
+  color: var(--text-main-text-body-tetriary);
+}
+
+#search-input:focus {
+  outline: none;
+  border-color: var(--border-border-blue-primary);
+  box-shadow: 0 0 0 3px var(--colors-blue-50);
+}
+
+#search-input:disabled {
+  background: var(--colors-neutral-100);
+  color: var(--text-main-text-body-tetriary);
+  cursor: not-allowed;
+}
+
+/* Results Dropdown */
+.search-result-dropdown-menu {
+  position: absolute;
+  z-index: 100;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  min-width: 400px;
+  border-radius: 8px;
+  background: var(--surface-background-main-base-primary);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.search-result-dataset {
+  padding: 0.5rem;
+  border: 1px solid var(--border-border-secondary);
+  border-radius: 8px;
+  min-width: 580px;
+  max-height: calc(100vh - 6rem);
+  overflow: auto;
+}
+
+/* Result Component Header */
+.search-result-component-header {
+  padding: 0.5rem 0.75rem;
+  margin: 0.25rem 0;
+  border-bottom: 1px solid var(--border-border-secondary);
+  color: var(--text-main-text-body-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+/* Result Item */
+.search-result-item {
+  display: flex;
+  margin: 0.25rem 0;
+  border-radius: 6px;
+}
+
+.search-result-item:hover {
+  background: var(--colors-neutral-50);
+}
+
+.search-result-item .no-result {
+  padding: 1rem;
+  color: var(--text-main-text-body-tetriary);
+  text-align: center;
+}
+
+/* Result Document Title (Left Column) */
+.search-result-document-title {
+  width: 25%;
+  padding: 0.625rem 0.75rem;
+  border-right: 1px solid var(--border-border-secondary);
+  color: var(--text-main-text-body-tetriary);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+/* Result Document Hit (Right Column) */
+.search-result-document-hit {
+  flex: 1;
+  color: var(--text-main-text-body-secondary);
+  font-size: 0.8125rem;
+}
+
+.search-result-document-hit > a {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.search-result-document-hit > a:hover {
+  background: transparent;
+}
+
+.search-result-document-hit .search-result-section-title {
+  margin-bottom: 0.25rem;
+  color: var(--text-main-text-body-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.search-result-document-hit .search-result-highlight {
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  background: var(--colors-blue-50);
+  color: var(--text-main-text-link-blue);
+  font-weight: 500;
+}
+
+/* Search Responsive: Mobile (< 768px) */
+@media screen and (max-width: 767px) {
+  .boostlook .toolbar {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .search-container {
+    order: 99;
+    flex: 1 0 100%;
+  }
+
+  #search-input {
+    width: 100% !important;
+    min-width: unset;
+    font-size: 1rem !important; /* Prevents iOS zoom on focus */
+  }
+
+  .search-result-dropdown-menu {
+    position: fixed;
+    top: 6rem;
+    left: 1rem;
+    right: 1rem;
+    min-width: unset;
+    max-width: unset;
+    width: auto;
+  }
+
+  .search-result-dataset {
+    min-width: unset;
+  }
+}
+
+/* Search Responsive: Tablet (768px - 1023px) */
+@media screen and (min-width: 768px) {
+  #search-input {
+    width: unset !important;
+    min-width: unset !important;
+  }
+
+  .search-result-dropdown-menu {
+    position: fixed;
+    top: 4rem;
+    left: calc(var(--main-max-width-leftbar) + 1rem);
+    right: 1rem;
+    min-width: unset;
+    max-width: unset;
+    width: auto;
+  }
+
+  .search-result-dataset {
+    min-width: unset;
+  }
+}
+
+/* Search Responsive: Desktop (1024px+) */
+@media screen and (min-width: 1024px) {
+  #search-input {
+    min-width: 200px !important;
+    z-index: 1001;
+  }
+
+  .search-result-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: auto;
+    right: 0;
+    width: clamp(530px, 45vw, 600px);
+  }
+}
+
+/*----------------- Styles specific to Antora Templates end -----------------*/

src/css/14-quickbook.css

@@ -0,0 +1,513 @@
+
+/*---------- Quickbook docs styling fixes -----------*/
+
+/**
+ * Quickbook Documentation Styles
+ * Comprehensive styling for Quickbook-generated documentation, including:
+ * 1. Typography and heading hierarchy
+ * 2. Content blocks and spacing
+ * 3. Navigation and spirit-nav elements
+ * 4. Special elements (notes, tips, etc.)
+ * 5. Code and syntax highlighting
+ */
+
+#boost-legacy-docs-wrapper:has(> .boostlook),
+#antora-template-wrapper:has(> .boostlook),
+div.source-docs-antora.boostlook:has(> .boostlook) {
+  /* CharConv template fix */
+  margin: auto;
+}
+
+/* Legacy boostlook container */
+.boostlook#boost-legacy-docs-wrapper,
+.boostlook#antora-template-wrapper,
+div.source-docs-antora.boostlook {
+  margin-top: 0;
+  max-width: unset;
+  overflow: hidden;
+  position: relative;
+  min-height: 100vh;
+}
+
+.boostlook#boost-legacy-docs-wrapper > #header,
+.boostlook#boost-legacy-docs-wrapper > #content,
+.boostlook#boost-legacy-docs-wrapper > #footer,
+.boostlook#boost-legacy-docs-wrapper > #footnotes,
+.boostlook#antora-template-wrapper > #header,
+.boostlook#antora-template-wrapper > #content,
+.boostlook#antora-template-wrapper > #footer,
+.boostlook#antora-template-wrapper > #footnotes,
+div.source-docs-antora.boostlook > #header,
+div.source-docs-antora.boostlook > #content,
+div.source-docs-antora.boostlook > #footer,
+div.source-docs-antora.boostlook > #footnotes {
+  /* width: auto;
+  max-width: unset;
+  margin-left: auto; */
+  padding-left: unset;
+  padding-right: unset;
+}
+
+/* Add Side margin for legacy boostlook container */
+#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
+#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) {
+  padding: 0 var(--main-margin, 3rem);
+}
+
+/* Title Block Common */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type {
+  margin-bottom: var(--padding-padding-md, 1.125rem);
+}
+
+/* Title Styles */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .title,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .title {
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xl, 1.75rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-3xl, 2.5rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  margin: 0;
+}
+
+/* Title Author */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .author,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .author,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .author,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content .author,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .author {
+  margin: 0;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-lg, 1.25rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-xl, 1.75rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Top margin for first Author in title */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div.author,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div.author,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.author,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.author,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content div.author {
+  margin-top: var(--padding-padding-md, 1.125rem);
+}
+
+/* Reduce top margin for next authors in authors group */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .authorgroup div.author:not(:first-child) {
+  margin-top: var(--padding-padding-2xs);
+}
+
+/* Remove Top Margin for next .copyright  */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author {
+  margin-top: var(--padding-padding-3xs);
+}
+
+/* Title Copyright */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .copyright,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .copyright,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .copyright,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content .copyright,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .copyright {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+/* Remove Top Margin for next .copyright  */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright {
+  margin-top: 0;
+}
+
+/* Title Legalnotice */
+.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .legalnotice,
+.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .legalnotice,
+  /* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .legalnotice {
+  color: var(--text-main-text-body-primary, #2a2c30);
+  font-size: var(--typography-font-size-sm, 1rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-lg, 1.5rem);
+  margin-top: var(--padding-padding-2xs, 0.5rem);
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .legalnotice {
+  margin-bottom: var(--padding-padding-md, 1.125rem);
+}
+
+/* Remove <hr/>s  */
+.boostlook:not(:has(.doc)) .titlepage hr {
+  display: none;
+}
+
+/* Table of Contents */
+.boostlook:not(:has(.doc)) div.toc {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-family: var(--font-family-body, "Noto Sans");
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-md, 1.25rem);
+  margin: 0;
+  margin-bottom: var(--padding-padding-md, 1.125rem);
+  padding: 0;
+  border: none;
+}
+
+.boostlook:not(:has(.doc)) div.toc > p {
+  display: flex;
+  padding: var(--spacing-size-3xs, 0.25rem);
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-2xs, 0.75rem);
+  font-variation-settings: "wght" 600, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+.boostlook:not(:has(.doc)) div.toc > p > * {
+  font: inherit;
+  color: inherit;
+}
+
+.boostlook:not(:has(.doc)) div.toc .toc dt {
+  color: var(--text-main-text-body-secondary, #494d50);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  line-height: var(--typography-line-height-md, 1.25rem);
+}
+
+.boostlook:not(:has(.doc)) div.toc dd dd {
+  padding-left: var(--leftbar-paddings-leftbar-padding-sm);
+}
+
+/* Section Layout */
+.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
+.boostlook#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * {
+  /* max-width: var(--main-content-width);
+  margin-left: inherit;
+  margin-right: inherit; */
+  margin: 0 auto;
+}
+
+/* hide footer spirit nav since it wasn't visible before */
+.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav,
+.boostlook#boost-legacy-docs-wrapper div.spirit-nav:last-child,
+.boostlook#antora-template-wrapper div.spirit-nav:last-child,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spirit-nav:last-child {
+  display: none !important;
+}
+
+/* hidden elems */
+.boostlook:not(:has(.doc)) > hr,
+.boostlook:not(:has(.doc)) .table-break {
+  display: none;
+}
+
+/* Content Blocks */
+.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img):first-child:last-child {
+  margin: var(--padding-padding-xs, 0.75rem) 0;
+}
+
+.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
+  background: transparent !important;
+  border: none;
+  font-size: inherit;
+  color: inherit;
+  padding: 0;
+  display: initial;
+  transition: none;
+}
+
+/* Special Blocks */
+/* hide legacy icon */
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).note > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).tip > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).important > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).caution > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).warning > table tr:first-child td,
+.boostlook:not(:has(.doc)) div:not(.admonitionblock).blurb > table tr:first-child td,
+.boostlook:not(:has(.doc)) p.blurb > table tr:first-child td {
+  display: none;
+}
+
+/* Special Blocks Margins */
+.boostlook:not(:has(.doc)) div.note,
+.boostlook:not(:has(.doc)) div.tip,
+.boostlook:not(:has(.doc)) div.important,
+.boostlook:not(:has(.doc)) div.caution,
+.boostlook:not(:has(.doc)) div.warning,
+.boostlook:not(:has(.doc)) div.blurb,
+.boostlook:not(:has(.doc)) p.blurb {
+  margin-top: var(--padding-padding-xs, 0.75rem);
+  margin-bottom: var(--padding-padding-2xs);
+}
+
+.boostlook:not(:has(.doc)) .titlepage + div.note,
+.boostlook:not(:has(.doc)) .titlepage + div.tip,
+.boostlook:not(:has(.doc)) .titlepage + div.important,
+.boostlook:not(:has(.doc)) .titlepage + div.caution,
+.boostlook:not(:has(.doc)) .titlepage + div.warning,
+.boostlook:not(:has(.doc)) .titlepage + div.blurb,
+.boostlook:not(:has(.doc)) .titlepage + p.blurb {
+  margin-top: var(--padding-padding-2xs);
+}
+
+/* Tables */
+/* Make div with Table display block */
+.boostlook:has(:not(.doc)) div.table {
+  display: block;
+}
+
+/* Enable Horizontal Scroll */
+.boostlook:has(:not(.doc)) div.table .table-contents,
+.boostlook:has(:not(.doc)) .informaltable:has(> .table) {
+  overflow: auto;
+}
+
+/* References Table */
+/* This is specific selector for refences tables which containes many tables and only tables as direct children */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-padding-md, 1.125rem);
+  /* border: 2px solid red; */
+}
+
+/* Disable margins for all Headings inside table */
+.boostlook:has(:not(.doc)) .informaltable:has(> .table) :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+}
+
+/* Table has inner table th  */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) th {
+  border: none;
+  padding: 0 0 var(--padding-padding-xs, 0.75rem) 0;
+  background: none;
+  color: var(--text-main-text-primary, #18191b);
+  font-size: var(--typography-font-size-md, 1.125rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Disable global cell paddings */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) > tbody > tr > td {
+  padding: 0;
+}
+
+/* Add border radius to tbody first row */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child {
+  border-top-left-radius: var(--spacing-size-2xs, 0.5rem);
+  overflow: hidden;
+}
+
+/* Add border radius to tbody first row */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:last-child {
+  border-top-right-radius: var(--spacing-size-2xs, 0.5rem);
+  overflow: hidden;
+}
+
+/* Select Inner Headings and make it look as table head */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tbody :is(h1, h2, h3, h4, h5, h6) {
+  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
+  gap: var(--spacing-size-xs, 0.75rem);
+  background: var(--surface-background-main-surface-primary, #f5f6f8);
+  color: var(--text-main-text-body-tetriary, #62676b);
+  font-size: var(--typography-font-size-xs, 0.875rem);
+  font-style: normal;
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+}
+
+/* Inner table styles */
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist {
+  width: 100%;
+}
+
+.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td {
+  border: none;
+  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
+}
+
+/* Footnotes */
+.boostlook:has(:not(.doc)) .footnotes {
+  margin-top: var(--padding-padding-lg);
+  border-top: 1px solid var(--border-border-primary);
+}
+
+.boostlook:has(:not(.doc)) .footnotes hr {
+  display: none;
+}
+
+/* Copyright Footer */
+/* If Footer has no content than use it as bottom spacer */
+.boostlook .copyright-footer:empty {
+  padding-top: var(--main-margin);
+}
+
+/* If Footer has content */
+.boostlook .copyright-footer:not(:empty) {
+  padding: var(--padding-padding-lg) 0;
+}
+
+/* Footer Content */
+.boostlook:not(:has(.doc)) .copyright-footer {
+  color: var(--text-main-text-body-quaternary, #949a9e);
+  font-size: var(--typography-font-size-xs);
+  font-variation-settings: "wght" 500, "wdth" 80;
+  line-height: var(--typography-line-height-sm, 1rem);
+  letter-spacing: var(--spacing-size-size-0, 0rem);
+  text-align: left;
+}
+
+/* Footer Content  */
+.boostlook:not(:has(.doc)) .copyright-footer p {
+  text-align: inherit;
+  font-size: var(--typography-font-size-2xs);
+  color: var(--text-main-text-body-primary, #2a2c30);
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content hr,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content hr {
+  display: none;
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet {
+  position: relative;
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) {
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) pre,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre) pre,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) pre {
+  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
+  margin-top: var(--padding-padding-3xs, 0.25rem);
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]) {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]):not(:last-child),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]):not(:last-child),
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:not(:last-child) pre,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:not(:last-child) pre {
+  margin-bottom: var(--padding-padding-xs, 0.75rem);
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small),
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content + p:has(> small),
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content + p:has(> small) {
+  padding: var(--padding-padding-lg) 0 !important;
+}
+
+/* Outcome 2.2 Weird Template fix */
+.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes,
+.boostlook:not(:has(.doc))#antora-template-wrapper > #content .footnotes,
+div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .footnotes {
+  padding-top: var(--padding-padding-xs, 0.75rem);
+}
+
+@media screen and (min-width: 768px) {
+  body.article:has(.boostlook#boost-legacy-docs-wrapper),
+  body.article:has(.boostlook#antora-template-wrapper),
+  body.article:has(div.source-docs-antora.boostlook) {
+    /* !important ovverides website own styles !important
+    * Adjust this to "padding: 0 1rem 0 1rem"
+    * when website container width will be used as in new look design
+    */
+    padding: 0 !important;
+  }
+
+  #boost-legacy-docs-wrapper .boostlook #toc.toc2,
+  #antora-template-wrapper .boostlook #toc.toc2,
+  div.source-docs-antora.boostlook:has(> .boostlook) .boostlook #toc.toc2 {
+    /* Adjust this to "max(1rem, 50% - 45rem)"
+    * when website container width will be used as in new look design
+    */
+    left: max(0rem, 50% - 45rem);
+  }
+}
+/* TOC Common End */
+
+/*----------------- Quickbook Documentation Styles end -----------------*/

src/css/15-readme.css

@@ -0,0 +1,38 @@
+
+/*----------------- Library README Styles start -----------------*/
+
+.boostlook#libraryReadMe {
+  margin-left: 0;
+}
+
+.boostlook#libraryReadMe > * {
+  max-width: unset;
+  margin-left: inherit;
+  margin-right: inherit;
+}
+
+.boostlook#libraryReadMe > h1:first-child {
+  margin-top: 0;
+}
+
+.boostlook#libraryReadMe div.highlight:has(> pre) {
+  background: transparent !important;
+}
+
+.boostlook#libraryReadMe p:has(> a img ) {
+  display:flex;
+  flex-wrap:wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.boostlook#libraryReadMe p a:has(> img ) {
+  margin-left:.5rem;
+}
+
+.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)) {
+  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
+  border: 1px solid var(--border-border-secondary, #d5d7d9);
+}
+
+/*----------------- Library README Styles end -----------------*/

src/css/16-responsive-toc.css

@@ -0,0 +1,67 @@
+
+/*----------------- AsciiDoctor-Specific Responsive TOC Layout start -----------------*/
+
+/* Prevent header/content/footer padding from jumping at 990px breakpoint */
+@media (min-width: 990px) {
+  :root {
+    --main-max-width-leftbar: 18.25rem;
+    --main-margin: var(--spacing-size-xl);
+  }
+}
+
+/* === Tablet/Desktop: TOC Sidebar Layout (768px+) === */
+@media screen and (min-width: 768px) {
+  .boostlook #toc.toc2 {
+    position: fixed !important;
+    left: 0 !important;
+    width: var(--main-max-width-leftbar) !important;
+    top: 0 !important;
+    height: 100vh !important;
+  }
+
+  .boostlook #toggle-toc {
+    position: fixed !important;
+    left: 1rem !important;
+    top: 2rem !important;
+  }
+
+  .toc2 .boostlook:has(> #content .doc) {
+    margin-left: 0;
+  }
+
+  html.toc-visible .boostlook {
+    margin-left: 0 !important;
+  }
+
+  .article.toc2.toc-left {
+    max-width: none !important;
+  }
+  html:not(.toc-hidden, .toc-visible) .article.toc2.toc-left,
+  .toc-visible.toc-pinned .article.toc2.toc-left {
+    margin-left: var(--main-max-width-leftbar) !important;
+  }
+}
+
+/* === Wide Screens: Expanded Content Width (1536px+) === */
+@media screen and (min-width: 1536px) {
+  :root {
+    --main-content-width: 1100px;
+    --main-content-left-spacing: 2rem;
+  }
+}
+
+/* === Ultra-Wide Screens: Maximum content width (1920px+) === */
+@media screen and (min-width: 1920px) {
+  :root {
+    --main-content-width: 1300px;
+    --main-content-left-spacing: 4rem;
+  }
+
+  .boostlook #content,
+  .boostlook #header > h1,
+  .boostlook #header .author {
+    margin-left: var(--main-content-left-spacing);
+  }
+}
+
+/*----------------- AsciiDoctor-Specific Responsive TOC Layout end -----------------*/

src/css/README.md

@@ -0,0 +1,51 @@
+# Boostlook v3 CSS — Modular Source
+
+## Overview
+
+`boostlook-v3.css` is the next iteration of the Boost Look CSS framework, built from modular source files in `src/css/`. It replaces the monolithic `boostlook.css` with an organized, maintainable file structure while preserving full backward compatibility.
+
+The production `boostlook-v3.css` is generated by concatenating all modules in order via `build-css.sh`.
+
+## File Structure
+
+| File | Description |
+|------|-------------|
+| `00-header.css` | License, file overview, template structure docs, selector conventions |
+| `01-variables.css` | Root CSS custom properties — spacing, typography, icons |
+| `02-themes.css` | Light/dark theme variable mappings |
+| `03-fonts.css` | `@font-face` declarations (Noto Sans, Monaspace) |
+| `04-reset.css` | CSS reset (box-sizing, margins, defaults) |
+| `05-global-typography.css` | Base container, headings h1–h6, heading anchors |
+| `06-global-links.css` | Paragraph styling, links, footnotes |
+| `07-global-code.css` | Code blocks, inline code, syntax highlighting (hljs) |
+| `08-global-components.css` | Quotes, pagination, admonitions, lists, edit-page link |
+| `09-global-tables-images.css` | Tables, image styles |
+| `10-scrollbars.css` | Scrollbar styling (Firefox + WebKit) |
+| `11-template-layout.css` | Template-specific scrolling, iframe, TOC common styles |
+| `12-asciidoctor.css` | AsciiDoctor-specific styles, Rouge syntax highlighting |
+| `13-antora.css` | Antora navigation, toolbar, breadcrumbs, tabs, search |
+| `14-quickbook.css` | Quickbook legacy wrapper, titles, TOC, tables, footer |
+| `15-readme.css` | Library README styles |
+| `16-responsive-toc.css` | AsciiDoctor responsive TOC layout (768px to 1920px) |
+
+## Build Instructions
+
+Run from the repository root:
+
+```sh
+sh build-css.sh
+```
+
+This concatenates all modules (in numeric order) into `boostlook-v3.css` at the repo root.
+
+## CSS Tooling Roadmap
+
+> **Status:** Decision deferred — documenting options for future reference.
+
+The current build uses a simple shell concatenation script (`build-css.sh`). As the framework matures, we may adopt proper CSS tooling. Options under consideration:
+
+- **Lightning CSS** — Fast bundler/minifier with modern CSS transforms and browser-target downleveling
+- **PostCSS** — Plugin-based pipeline (autoprefixer, nesting, custom media queries)
+- **stylelint + minification** — Linting for consistency, paired with a dedicated minifier (e.g., cssnano)
+
+Criteria for the eventual decision: build speed, browser compatibility needs, developer ergonomics, and minimal dependency footprint.