jekyll-theme-zer0 1.19.1 → 1.20.2

data/_sass/custom.scss

@@ -1,1132 +1,34 @@
 // ==============================================================================
-// CUSTOM STYLES - Zer0-Mistakes Theme Customizations
+// CUSTOM STYLES barrel — Zer0-Mistakes "custom layer"
 // ==============================================================================
 //
-// DEPRECATION NOTICE — As of v1.8, this monolithic partial is being decomposed.
-// Token-aware replacements live alongside it and are imported BEFORE this file
-// from assets/css/main.scss:
-//   - components/cookie-banner   (was lines ~189-234 below)
-//   - components/back-to-top     (was lines ~263-305 below)
-//   - components/notes           (was lines ~1069-1295 below)
-//   - components/skeleton        (was lines ~1040-1050 below)
-//   - layouts/landing            (was the .landing-hero / .landing-feature blocks)
-//   - layouts/navbar-extras      (was the .bd-toc-fab positioning block)
-//   - utilities/motion           (consolidates prefers-reduced-motion rules)
-//   - utilities/focus            (shared :focus-visible ring)
+// This file used to be a ~1,100-line monolith mixing @imports with a grab-bag of
+// rules (navbar, search modal, UI polish, grids, …). It has been decomposed into
+// the focused partials imported below. It remains as a thin barrel so:
+//   1. the compiled cascade order is unchanged (the partials are imported in the
+//      same order their rules originally appeared), and
+//   2. forks that `@import "custom"` directly keep working.
 //
-// The legacy blocks remain here for one minor version so that forks which
-// import `custom.scss` directly keep working. They will be removed in v2.0.
-// Migration: delete the legacy block from your fork (or just rely on the new
-// partials, which use --zer0-* tokens for dark-mode safety).
+// The core nav/content partials (notebooks, nav-tree, sidebar-categories,
+// navbar, offcanvas-panels, obsidian) are imported directly from
+// assets/css/main.scss § 7b, immediately before this barrel. The navbar fixed/
+// grid layout and the search modal were relocated to core/_navbar.scss and
+// components/_search-modal.scss respectively.
 // ==============================================================================
 
-// Import notebook-specific styles
-@import "notebooks";
+// Page-frame globals: base resets, sticky helper, bottom shadow, min-height,
+// landing-hero media placeholder shim.
+@import "layouts/global-chrome";
 
-// Import navigation tree styles
-@import "core/nav-tree";
-@import "core/sidebar-categories";
+// Table-of-contents styling (#TableOfContents + .toc sticky sidebar + collapse).
+@import "core/toc";
 
-// Import navbar styles (extracted from navbar.html)
-@import "core/navbar";
-@import "core/offcanvas-panels";
+// Sidebar / TOC active states + cookie-banner & back-to-top responsive shims.
+@import "core/sidebar-extras";
 
-// Obsidian-flavoured markdown features (wiki-links, callouts, backlinks, …)
-@import "core/obsidian";
+// Bootstrap component polish: buttons, cards, hero, code blocks, motion, mobile,
+// focus, print — the "UI/UX enhancements" layer.
+@import "components/ui-enhancements";
 
-html, body {
-    max-width: 100%;
-    // overflow-x: hidden;
-  }
-  
-  * {
-    box-sizing: border-box;
-  }
-  
-.make-me-sticky {
-    position: -webkit-sticky;
-	position: sticky;
-	top: 0;
-    padding: 0 15px;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.bottom-shadow {
-    // background-color: rgba(255,255,255,0.95);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
-}
-
-// Vendored Bootstrap build may omit vh utilities; landing hero uses this for stable min height
-.min-vh-50 {
-    min-height: 50vh;
-}
-
-// MOVED → _sass/layouts/_landing.scss (token-aware version)
-// Retained shim: keeps the inline-loading aspect-ratio fallback for the hero
-// media slot so existing inline `aspect-ratio` markup in landing.html still
-// has a visible placeholder background while the image streams in.
-.landing-hero .landing-hero-media {
-    background-color: rgba(255, 255, 255, 0.06);
-}
-
-#TableOfContents {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    // white-space: nowrap;
-}
-
-.toc {
-    grid-area: toc;
-    padding-top: 5rem;
-    top: 0;
-    right: 5rem;
-}
-
-
-@media (min-width: 992px) {
-    .toc {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 5rem;
-        right: 5rem;
-        z-index: 2;
-        height: calc(100vh - 7rem);
-        overflow-y: auto
-    }
-}
-
-.toc nav {
-    font-size: .875rem
-}
-
-.toc nav ul {
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none
-}
-
-.toc nav ul ul {
-    padding-left: 1rem;
-    margin-top: .25rem
-}
-
-.toc nav li {
-    margin-bottom: .25rem
-}
-
-.toc nav a {
-    color: inherit
-}
-
-.toc nav a:not(:hover) {
-    text-decoration: none
-}
-
-.toc nav a code {
-    font: inherit
-}
-
-.toc-toggle {
-    display: flex;
-    align-items: center
-}
-
-
-@media (max-width: 989.98px) {
-    .toc-collapse nav {
-        padding:1.25rem;
-        background-color: var(--bs-tertiary-bg);
-        border: 1px solid var(--bs-border-color);
-        border-radius: var(--bs-border-radius)
-    }
-}
-
-@media (min-width: 990px) {
-    .toc-collapse {
-        display:block !important
-    }
-}
-
-
-// Sidebar / docs layout: _sass/core/_docs-layout.scss
-
-// ==============================================================================
-// SIDEBAR & TOC ENHANCEMENTS
-// ==============================================================================
-
-// MOVED → _sass/layouts/_navbar-extras.scss (token-aware FAB stacking)
-// MOVED → _sass/components/_cookie-banner.scss (token-aware, dark-mode-safe)
-// Retained shim: keep stacked-button responsive sizing inside the banner
-// because it is a banner-internal concern, not a banner-shell concern.
-.cookie-consent-banner {
-    @media (max-width: 768px) {
-        .btn {
-            width: 100%;
-            margin-bottom: 0.5rem;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-// Active TOC link highlighting
-.bd-toc nav a.active {
-    font-weight: 600;
-    background-color: rgba(var(--bs-primary-rgb), 0.1);
-    border-left-color: var(--bs-primary) !important;
-}
-
-// Smooth scroll behavior is declared once below (see "Smooth Scroll Enhancement")
-
-// Category sidebar active state (nav-tree--categories)
-.nav-tree--categories .sidebar-categories-link.active {
-    font-weight: var(--zer0-font-weight-medium);
-    background-color: color-mix(in srgb, var(--zer0-color-primary) 10%, transparent);
-    color: var(--zer0-color-primary);
-}
-
-// Improve sidebar link hover states
-.bd-sidebar .list-group-item:hover,
-.bd-sidebar .list-group-item-action:hover {
-    background-color: rgba(var(--bs-primary-rgb), 0.05);
-    transition: background-color 0.2s ease;
-}
-
-// ==============================================================================
-// https://designkojo.com/add-ellipse-truncated-text-css-single-line-and-multi-line-options
-
-
-// MOVED → _sass/components/_back-to-top.scss (token-aware version)
-// Retained shim: keep the initial `display: none` (JS toggles it on scroll)
-// and the text/arrow label swap, which are content-level concerns the
-// component partial doesn't need to know about.
-#backToTopBtn {
-    display: none;
-
-    .text { display: inline-block; }
-    .arrow { display: none; }
-
-    @media (max-width: 600px) {
-        .text { display: none; }
-        .arrow { display: inline-block; }
-    }
-}
-
-img {
-    display: inline-block;
-    max-width: 100%;
-    height: auto;
-}
-
-// Navbar logo: global img { max-width: 100% } shrinks it inside tight flex/grid cells on small viewports
-// (Use a.navbar-brand only — div.navbar-brand.site-title should still shrink/truncate.)
-#navbar a.navbar-brand {
-    flex-shrink: 0;
-}
-#navbar .navbar-brand img {
-    width: 30px;
-    height: 30px;
-    min-width: 30px;
-    min-height: 30px;
-    max-width: none;
-    object-fit: contain;
-    flex-shrink: 0;
-}
-
-// ============================================
-// NAVBAR - Fixed positioning with auto-hide
-// ============================================
-// Uses Bootstrap's fixed-top class for positioning (z-index: 1030)
-// JavaScript adds/removes .navbar-hidden class on scroll
-
-#navbar {
-    // Transition for smooth hide/show animation
-    transition: transform 0.3s ease-in-out !important;
-    
-    // Ensure navbar background is opaque
-    background-color: var(--bs-body-bg);
-}
-
-// Keep the outer Bootstrap navbar shell on one row (nanobar + nav); avoids rare wrap on wide pages
-#navbar > .navbar.navbar-expand-lg {
-    flex-wrap: nowrap !important;
-    align-items: center;
-}
-
-#navbar .navbar-main {
-    align-items: center;
-}
-
-#navbar .site-title-text,
-#navbar .site-subtitle-text {
-    display: inline-block;
-}
-
-#navbar .nav-search-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-// Desktop (lg+): 3-column grid — [brand/title | main nav | utilities] so nav cannot paint over Search/Settings
-@media (min-width: 992px) {
-    #navbar .navbar-main {
-        display: grid !important;
-        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
-        align-items: center;
-        column-gap: 0.5rem;
-        row-gap: 0.25rem;
-        flex-wrap: unset !important;
-        container-type: inline-size;
-        container-name: navbar-main;
-    }
-
-    #navbar .navbar-main-start {
-        grid-column: 1;
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        min-width: 0;
-        max-width: none;
-        flex-shrink: 1;
-    }
-
-    #navbar #bdNavbar {
-        grid-column: 2;
-        width: 100%;
-        max-width: 100%;
-        min-width: 0;
-        justify-self: stretch;
-    }
-
-    #navbar .navbar-utility-controls {
-        grid-column: 3;
-        justify-self: end;
-        flex-shrink: 0;
-        min-width: 0;
-        max-width: max-content;
-        display: inline-flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        gap: 0.25rem;
-        padding-left: 0.25rem;
-    }
-
-    #navbar .navbar-utility-controls .nav-search-button,
-    #navbar .navbar-utility-controls .nav-settings-button {
-        flex: 0 1 auto;
-        min-width: 0;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-    }
-
-    // Brand cluster: logo stays fixed; title flexes and ellipsizes only when crowded
-    #navbar .navbar-brand-group {
-        display: inline-flex;
-        align-items: center;
-        flex-shrink: 0;
-        flex-wrap: nowrap;
-        gap: 0.375rem;
-        min-width: 0;
-    }
-
-    #navbar .navbar-home-links {
-        flex-shrink: 0;
-        display: none;
-    }
-
-    #navbar .site-title,
-    #navbar .site-subtitle {
-        flex-shrink: 1;
-        min-width: 0;
-    }
-
-    #navbar .site-title {
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-
-    #navbar .site-title .site-title-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        vertical-align: bottom;
-        max-width: none;
-    }
-
-    #navbar .site-subtitle .site-subtitle-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: inline-block;
-        vertical-align: bottom;
-        max-width: none;
-    }
-
-    // Progressive brand degradation (container width, not viewport)
-    @container navbar-main (min-width: 80rem) {
-        #navbar .navbar-home-links {
-            display: inline-flex !important;
-        }
-    }
-
-    @container navbar-main (max-width: 68rem) {
-        #navbar .site-subtitle {
-            display: none !important;
-        }
-    }
-
-    @container navbar-main (max-width: 50rem) {
-        #navbar .site-title .site-title-text {
-            max-width: 100%;
-        }
-    }
-}
-
-// Hidden state - slides up out of view
-// Using higher specificity to override Bootstrap's fixed-top
-#navbar.navbar-hidden {
-    transform: translateY(-100%) !important;
-}
-
-// Respect user's motion preferences
-@media (prefers-reduced-motion: reduce) {
-    #navbar {
-        transition: none !important;
-    }
-}
-
-@media (max-width: 991.98px) {
-    #navbar .navbar-main {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 0.5rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-    }
-
-    #navbar .navbar-main-start {
-        flex: 1 1 auto;
-        min-width: 0;
-    }
-
-    #navbar .navbar-brand-group {
-        flex: 0 1 auto;
-        min-width: 0;
-    }
-
-    #navbar .site-title {
-        flex: 1 1 auto;
-        min-width: 0;
-    }
-
-    #navbar .site-title .nav-link {
-        padding: 0;
-        min-height: 2.5rem;
-        align-items: center;
-    }
-
-    // Title fills the gap between logo and utility controls; ellipsis when crowded
-    #navbar .site-title-text {
-        max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-    }
-
-    #navbar .navbar-toggler {
-        width: 2.5rem;
-        height: 2.5rem;
-    }
-
-    #navbar .nav-search-button {
-        width: 2.5rem;
-        height: 2.5rem;
-        padding: 0;
-        justify-content: center;
-    }
-}
-
-.search-modal .modal-content {
-    border-radius: 0.75rem;
-}
-
-.search-modal .input-group-text {
-    background-color: var(--bs-tertiary-bg);
-    border-color: var(--bs-border-color);
-}
-
-.search-modal kbd {
-    background-color: var(--bs-tertiary-bg);
-    color: var(--bs-body-color);
-}
-
-.search-modal .search-results {
-    max-height: 50vh;
-    overflow-y: auto;
-}
-
-.search-modal .list-group-item {
-    border-color: var(--bs-border-color-translucent);
-}
-
-.nested-list-group {
-    display: none;
-  }
-  .nested-list-group.show {
-    display: block;
-  }
-  .folder {
-    cursor: pointer;
-  }
-
-// ==============================================================================
-// UI/UX ENHANCEMENTS - Modern, polished interactions
-// ==============================================================================
-
-// Hero Section Enhancements
-// NOTE: Exclude .zer0-bg-hero so skin-specific gradients from _backgrounds.scss take precedence
-.bg-primary:not(.zer0-bg-hero) {
-  position: relative;
-  overflow: hidden;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
-    pointer-events: none;
-  }
-}
-
-// Hero content animations
-.bg-primary .container-xl {
-  animation: fadeInUp 0.8s ease-out;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// Enhanced Button Styles
-.btn {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-  }
-  
-  &:hover::before {
-    width: 300px;
-    height: 300px;
-  }
-  
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  }
-  
-  &:active {
-    transform: translateY(0);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  }
-  
-  &.btn-lg {
-    padding: 0.75rem 1.5rem;
-    font-size: 1.125rem;
-  }
-}
-
-.btn-outline-light:hover {
-  background-color: rgba(255, 255, 255, 0.95);
-  color: var(--bs-primary);
-  border-color: rgba(255, 255, 255, 0.95);
-}
-
-.btn-light:hover {
-  background-color: rgba(255, 255, 255, 0.9);
-  transform: translateY(-2px);
-}
-
-// Enhanced Card Styles
-.card {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  
-  &:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
-    border-color: rgba(var(--bs-primary-rgb), 0.2);
-  }
-  
-  .card-header {
-    transition: all 0.3s ease;
-  }
-  
-  &:hover .card-header {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-}
-
-// Feature Cards - Icon Animation
-.card-body {
-  .rounded-circle {
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  
-  i {
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-}
-
-.card:hover .rounded-circle {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.card:hover .rounded-circle i {
-  transform: scale(1.2);
-}
-
-// Code Block Enhancements
-pre {
-  position: relative;
-  transition: all 0.3s ease;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  
-  &:hover {
-    border-color: rgba(var(--bs-primary-rgb), 0.3);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-  
-  code {
-    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-    font-size: 0.875rem;
-    line-height: 1.6;
-  }
-}
-
-// Quick Links Bar Enhancements
-.bg-dark {
-  .btn-outline-light {
-    transition: all 0.3s ease;
-    border-width: 2px;
-    
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.95);
-      color: var(--bs-dark);
-      transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-    }
-  }
-}
-
-// Smooth Scroll Enhancement
-html {
-  scroll-behavior: smooth;
-  scroll-padding-top: 80px; // Account for fixed navbar
-}
-
-// Section Spacing Improvements
-// Ensure anchored elements clear the fixed navbar when scrolled to
-section,
-.py-5,
-[id] {
-  scroll-margin-top: 80px;
-}
-
-// Landing Page Quick Links Animation
-.bg-dark {
-  animation: slideDown 0.6s ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// Feature Section Cards Stagger Animation
-.bg-body-tertiary .row.g-4 > * {
-  animation: fadeInUp 0.6s ease-out backwards;
-  
-  &:nth-child(1) { animation-delay: 0.1s; }
-  &:nth-child(2) { animation-delay: 0.2s; }
-  &:nth-child(3) { animation-delay: 0.3s; }
-}
-
-// Installation Cards Enhancement
-#get-started .card {
-  border-top: 3px solid transparent;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  
-  &:hover {
-    border-top-color: var(--bs-primary);
-  }
-  
-  &.card-header.bg-primary ~ .card-body {
-    border-top-color: var(--bs-primary);
-  }
-  
-  &.card-header.bg-info ~ .card-body {
-    border-top-color: var(--bs-info);
-  }
-  
-  &.card-header.bg-secondary ~ .card-body {
-    border-top-color: var(--bs-secondary);
-  }
-}
-
-// Mobile Responsiveness Improvements
-@media (max-width: 768px) {
-  .bg-primary .display-4 {
-    font-size: 2rem;
-  }
-  
-  .bg-primary .lead {
-    font-size: 1rem;
-  }
-  
-  .btn-lg {
-    padding: 0.625rem 1.25rem;
-    font-size: 1rem;
-  }
-  
-  .card {
-    margin-bottom: 1rem;
-  }
-  
-  // Reduce hover effects on mobile for better performance
-  .card:hover {
-    transform: translateY(-4px);
-  }
-  
-  .btn:hover {
-    transform: none;
-  }
-}
-
-// Loading State for Images
-img {
-  transition: opacity 0.3s ease;
-  
-  &[loading="lazy"] {
-    opacity: 0;
-    
-    &.loaded {
-      opacity: 1;
-    }
-  }
-}
-
-// Focus States for Accessibility
-.btn:focus-visible,
-.card:focus-visible,
-a:focus-visible {
-  outline: 3px solid rgba(var(--bs-primary-rgb), 0.5);
-  outline-offset: 2px;
-}
-
-// Reduce Motion for Users Who Prefer It
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-// Table Enhancements
-.table {
-  transition: all 0.3s ease;
-  
-  tbody tr {
-    transition: background-color 0.2s ease;
-    
-    &:hover {
-      background-color: rgba(var(--bs-primary-rgb), 0.05);
-    }
-  }
-}
-
-// Badge Enhancements
-.badge {
-  transition: all 0.3s ease;
-  
-  &:hover {
-    transform: scale(1.05);
-  }
-}
-
-// Feature category badges on /features/
-.feature-categories {
-  .badge {
-    &:hover,
-    &:focus-visible {
-      color: var(--bs-badge-color, #fff);
-      text-decoration: none;
-      filter: brightness(1.12);
-      transform: scale(1.05);
-      outline: 2px solid rgba(var(--bs-primary-rgb), 0.55);
-      outline-offset: 2px;
-    }
-  }
-}
-
-// Link Enhancements
-a:not(.btn) {
-  transition: color 0.2s ease;
-  text-decoration: none;
-  
-  &:hover {
-    text-decoration: underline;
-    text-underline-offset: 3px;
-  }
-}
-
-// Container Enhancements
-.container-xl {
-  position: relative;
-}
-
-// Hero Image Animation
-.bg-primary img {
-  animation: fadeInRight 1s ease-out 0.3s backwards;
-  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
-  transition: transform 0.3s ease;
-  
-  &:hover {
-    transform: scale(1.02);
-  }
-}
-
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-// Improved Shadow Utilities
-.shadow-sm {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
-}
-
-.shadow {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
-}
-
-.shadow-lg {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
-}
-
-// Button Ripple Effect
-.btn {
-  position: relative;
-  overflow: hidden;
-  
-  .ripple {
-    position: absolute;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.6);
-    transform: scale(0);
-    animation: ripple-animation 0.6s ease-out;
-    pointer-events: none;
-  }
-}
-
-@keyframes ripple-animation {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-// Mobile Navigation Enhancements
-@media (max-width: 991.98px) {
-  .navbar-collapse {
-    background-color: var(--bs-body-bg);
-    border-radius: 0.5rem;
-    margin-top: 1rem;
-    padding: 1rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-  
-  .navbar-nav .nav-link {
-    padding: 0.75rem 1rem;
-    border-radius: 0.375rem;
-    transition: all 0.2s ease;
-    
-    &:hover {
-      background-color: rgba(var(--bs-primary-rgb), 0.1);
-    }
-  }
-}
-
-// Improved Mobile Hero Section
-@media (max-width: 768px) {
-  .bg-primary {
-    padding: 2rem 0 !important;
-    
-    .display-4 {
-      font-size: 1.75rem;
-      line-height: 1.3;
-    }
-    
-    .lead {
-      font-size: 0.95rem;
-    }
-    
-    .btn-lg {
-      width: 100%;
-      margin-bottom: 0.5rem;
-    }
-  }
-  
-  // Better card spacing on mobile
-  .row.g-4 > * {
-    margin-bottom: 1rem;
-  }
-  
-  // Improved code block readability on mobile
-  pre {
-    font-size: 0.8rem;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-
-    &:not(.highlight) {
-      padding: var(--zer0-space-2);
-    }
-  }
-
-  .highlight:not(pre) pre,
-  pre.highlight {
-    padding: 0;
-  }
-}
-
-// Touch-friendly tap targets
-@media (hover: none) and (pointer: coarse) {
-  .btn,
-  .card,
-  a {
-    min-height: 44px; // iOS HIG recommendation
-    min-width: 44px;
-  }
-  
-  // Disable hover effects on touch devices
-  .card:hover {
-    transform: none;
-  }
-  
-  .btn:hover {
-    transform: none;
-  }
-}
-
-// Improved focus visibility for keyboard navigation
-*:focus-visible {
-  outline: 2px solid var(--bs-primary);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
-}
-
-// Enhanced active link states
-.nav-link.active,
-.btn.active {
-  position: relative;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80%;
-    height: 2px;
-    background-color: currentColor;
-    border-radius: 2px;
-  }
-}
-
-// Better table responsiveness
-@media (max-width: 768px) {
-  .table-responsive {
-    border-radius: 0.5rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-  
-  .table {
-    font-size: 0.875rem;
-    
-    th, td {
-      padding: 0.5rem;
-    }
-  }
-}
-
-// Improved badge styling
-.badge {
-  font-weight: 500;
-  letter-spacing: 0.025em;
-  padding: 0.35em 0.65em;
-}
-
-// Enhanced form controls
-.form-control:focus,
-.form-select:focus {
-  border-color: var(--bs-primary);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
-  transform: translateY(-1px);
-  transition: all 0.2s ease;
-}
-
-// MOVED → _sass/components/_skeleton.scss (token-aware, dark-mode-safe)
-
-// Print optimizations
-@media print {
-  .btn,
-  .card:hover,
-  .navbar,
-  .footer {
-    box-shadow: none !important;
-    transform: none !important;
-  }
-  
-  a[href^="#"]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.8em;
-    color: #666;
-  }
-}
-
-// ==============================================================================
-// NOTES LAYOUT STYLES
-// ==============================================================================
-// MOVED → _sass/components/_notes.scss (token-aware, dark-mode-safe)
-// The .note-header / .note-content / .related-notes / .note-navigation rules
-// are now defined in the components partial. Difficulty badges remain here
-// because they map to fixed semantic colors per the existing API.
-
-// Difficulty badge colors (semantic — kept as fixed values)
-.badge-beginner {
-  background-color: var(--zer0-color-success, #198754) !important;
-}
-
-.badge-intermediate {
-  background-color: var(--zer0-color-warning, #ffc107) !important;
-  color: #212529 !important;
-}
-
-.badge-advanced {
-  background-color: var(--zer0-color-danger, #dc3545) !important;
-}
-
-// Share buttons
-.share-buttons {
-  margin-top: 2rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid #dee2e6;
-  
-  .btn-share {
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    transition: transform 0.2s ease;
-    
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-}
-
-// Notes index page styles
-#notes-grid {
-  .note-card {
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    
-    &[style*="display: none"] {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-  
-  .card {
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    
-    &:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-    }
-  }
-}
-
-// ==============================================================================
-// NOTEBOOKS INDEX PAGE STYLES
-// ==============================================================================
-
-#notebooks-grid {
-  .notebook-card {
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    
-    &[style*="display: none"] {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-  
-  .card {
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    border-left: 4px solid #0d6efd;
-    
-    &:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-    }
-    
-    .card-header {
-      border-bottom: none;
-    }
-  }
-}
+// Notes & notebooks index-page grids + difficulty badges.
+@import "components/notes-index";