theme.css

/* ============================================================
   Nightsky Theme for Soar Documentation
   A dark theme inspired by twilight skies - deep charcoal
   background, cyan/blue accents, amber highlights.
   ============================================================ */

/* --- Color Variables (override Ayu theme) --- */

.nightsky {
    --bg: #0d1117;
    --fg: #e6edf3;

    --sidebar-bg: #161b22;
    --sidebar-fg: #8b949e;
    --sidebar-non-existant: #6e7681;
    --sidebar-active: #58a6ff;
    --sidebar-spacer: #21262d;

    --scrollbar: #30363d;

    --icons: #8b949e;
    --icons-hover: #e6edf3;

    --links: #58a6ff;

    --inline-code-color: #f0883e;

    --theme-popup-bg: #161b22;
    --theme-popup-border: #30363d;
    --theme-hover: #1c2128;

    --quote-bg: rgba(56, 139, 253, 0.08);
    --quote-border: #58a6ff;

    --warning-border: #d29922;

    --table-border-color: #21262d;
    --table-header-bg: #161b22;
    --table-alternate-bg: rgba(22, 27, 34, 0.5);

    --searchbar-border-color: #30363d;
    --searchbar-bg: #161b22;
    --searchbar-fg: #e6edf3;
    --searchbar-shadow-color: rgba(88, 166, 255, 0.2);
    --searchresults-header-fg: #8b949e;
    --searchresults-border-color: #21262d;
    --searchresults-li-bg: #161b22;
    --search-mark-bg: rgba(210, 153, 34, 0.3);

    --color-scheme: dark;

    --copy-button-filter: invert(55%) sepia(5%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(90%);
    --copy-button-filter-hover: invert(70%) sepia(40%) saturate(400%) hue-rotate(180deg) brightness(105%) contrast(100%);

    --footnote-highlight: #2668a6;
    --overlay-bg: rgba(13, 17, 23, 0.5);

    --blockquote-note-color: #58a6ff;
    --blockquote-tip-color: #3fb9a2;
    --blockquote-important-color: #bc8cff;
    --blockquote-warning-color: #d29922;
    --blockquote-caution-color: #f85149;

    --sidebar-header-border-color: #58a6ff;
}


/* --- Typography --- */

.nightsky .content main {
    max-width: 840px;
    margin: 0 auto;
    line-height: 1.7;
}

.nightsky .content main p {
    margin-bottom: 1em;
}

.nightsky .content main h1,
.nightsky .content main h2,
.nightsky .content main h3,
.nightsky .content main h4 {
    color: #e6edf3;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    letter-spacing: -0.01em;
}

.nightsky .content main h1 {
    font-size: 2em;
    border-bottom: 1px solid #21262d;
    padding-bottom: 0.35em;
}

.nightsky .content main h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #21262d;
    padding-bottom: 0.3em;
}

.nightsky .content main h3 {
    font-size: 1.25em;
}

.nightsky .content main h4 {
    font-size: 1.1em;
    color: #8b949e;
}

.nightsky code {
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
    font-size: 0.875em;
}

.nightsky :not(pre) > code {
    color: #f0883e;
    background: rgba(240, 136, 62, 0.1);
    border-radius: 4px;
    padding: 0.15em 0.35em;
}

.nightsky .content main ul,
.nightsky .content main ol {
    margin-bottom: 1em;
}

.nightsky .content main li {
    margin-bottom: 0.3em;
}


/* --- Sidebar --- */

.nightsky .sidebar {
    background: #161b22;
    border-right: 1px solid #21262d;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

.nightsky .sidebar .sidebar-scrollbox {
    padding: 10px 0;
}

.nightsky .sidebar .sidebar-scrollbox::-webkit-scrollbar {
    width: 6px;
}

.nightsky .sidebar .sidebar-scrollbox::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

.nightsky .sidebar .sidebar-scrollbox::-webkit-scrollbar-track {
    background: transparent;
}

.nightsky .sidebar ol.chapter li a {
    color: #8b949e;
    padding: 5px 20px;
    display: block;
    border-left: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nightsky .sidebar ol.chapter li a:hover {
    color: #e6edf3;
    text-decoration: none;
}

.nightsky .sidebar ol.chapter li.chapter-item.expanded > a,
.nightsky .sidebar ol.chapter li a.active {
    color: #58a6ff;
    border-left-color: #58a6ff;
}

.nightsky .sidebar .on-this-page {
    display: none;
}

.nightsky .sidebar-resize-handle {
    background-color: #21262d;
    width: 2px;
}


/* --- Tables --- */

.nightsky table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #21262d;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.2em 0;
}

.nightsky table thead tr {
    background: #161b22;
}

.nightsky table thead th {
    color: #e6edf3;
    font-weight: 600;
    padding: 10px 16px;
    border-bottom: 1px solid #21262d;
    text-align: left;
}

.nightsky table tbody td {
    padding: 8px 16px;
    border-bottom: 1px solid #21262d;
}

.nightsky table tbody tr:last-child td {
    border-bottom: none;
}

.nightsky table tbody tr:nth-child(even) {
    background: rgba(22, 27, 34, 0.5);
}

.nightsky table tbody tr:hover {
    background: #1c2128;
}


/* --- Code Blocks --- */

.nightsky pre {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 16px;
    margin: 1.2em 0;
    position: relative;
}

.nightsky pre code {
    font-size: 0.85em;
    line-height: 1.55;
}

.nightsky .content main .buttons {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nightsky .content main pre:hover .buttons {
    opacity: 1;
}

.nightsky .content main .buttons button {
    background: #1c2128;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    cursor: pointer;
    padding: 4px 8px;
}

.nightsky .content main .buttons button:hover {
    color: #e6edf3;
    background: #30363d;
}

.nightsky .content main .buttons .fa::before {
    color: inherit;
}


/* --- Floating Search Modal --- */

.nightsky #mdbook-search-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12vh;
    background: rgba(1, 4, 9, 0.7);
    backdrop-filter: blur(4px);
}

.nightsky #mdbook-search-wrapper.hidden {
    display: none;
}

.nightsky #mdbook-search-wrapper .searchbar-outer {
    width: 100%;
    max-width: 620px;
    margin: 0 1em;
}

.nightsky #mdbook-search-wrapper .searchresults-outer {
    max-width: 620px;
    max-height: 55vh;
    overflow-y: auto;
    background: #161b22;
    border: 1px solid #30363d;
    border-top: none;
    border-radius: 0 0 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

.nightsky #mdbook-searchbar {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    color: #e6edf3;
    padding: 14px 18px;
    font-size: 1.05em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
}

.nightsky #mdbook-searchbar:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
    outline: none;
}

.nightsky .searchresults-outer:not(.hidden) ~ .searchbar-outer #mdbook-searchbar,
.nightsky #mdbook-searchbar.active {
    border-radius: 10px 10px 0 0;
}

.nightsky .searchresults-header {
    color: #8b949e;
    font-size: 0.85em;
    padding: 10px 16px;
    border-bottom: 1px solid #21262d;
}

.nightsky #mdbook-searchresults {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nightsky #mdbook-searchresults li {
    border-bottom: 1px solid #21262d;
}

.nightsky #mdbook-searchresults li:last-child {
    border-bottom: none;
}

.nightsky #mdbook-searchresults a {
    display: block;
    padding: 10px 16px;
    color: #e6edf3;
    text-decoration: none;
    transition: background 0.1s ease;
}

.nightsky #mdbook-searchresults a:hover,
.nightsky #mdbook-searchresults li.focus a {
    background: #253341;
}

.nightsky #mdbook-searchresults .searchresults-name {
    font-weight: 600;
    color: #58a6ff;
    font-size: 0.95em;
}

.nightsky #mdbook-searchresults .searchresults-body {
    color: #8b949e;
    font-size: 0.85em;
    margin-top: 2px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nightsky #mdbook-searchresults mark {
    background: rgba(210, 153, 34, 0.3);
    color: #e6edf3;
    border-radius: 2px;
    padding: 0 2px;
}


/* --- Menu Bar --- */

.nightsky #menu-bar {
    border-bottom: 1px solid #21262d;
    background: #0d1117;
}

.nightsky #menu-bar i {
    color: #8b949e;
}

.nightsky #menu-bar i:hover {
    color: #e6edf3;
}

.nightsky .theme-popup {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.nightsky .theme-popup .theme:hover {
    background: #1c2128;
}

.nightsky .theme-popup .theme.selected {
    color: #58a6ff;
}


/* --- Blockquotes --- */

.nightsky blockquote {
    background: rgba(56, 139, 253, 0.08);
    border: 1px solid #21262d;
    border-left: 4px solid #58a6ff;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 1.2em 0;
    color: #8b949e;
}

.nightsky blockquote p {
    margin: 0.4em 0;
}

.nightsky blockquote p:first-child {
    margin-top: 0;
}

.nightsky blockquote p:last-child {
    margin-bottom: 0;
}

/* Warning-style blockquotes (contain "warning" or "[!WARNING]") */
.nightsky blockquote.warning,
.nightsky .warning blockquote {
    border-left-color: #d29922;
    background: rgba(210, 153, 34, 0.08);
}

/* Caution-style blockquotes */
.nightsky blockquote.caution,
.nightsky .caution blockquote {
    border-left-color: #f85149;
    background: rgba(248, 81, 73, 0.08);
}

/* Tip-style blockquotes */
.nightsky blockquote.tip,
.nightsky .tip blockquote {
    border-left-color: #3fb9a2;
    background: rgba(63, 185, 162, 0.08);
}

/* Important-style blockquotes */
.nightsky blockquote.important,
.nightsky .important blockquote {
    border-left-color: #bc8cff;
    background: rgba(188, 140, 255, 0.08);
}


/* --- Horizontal Rules --- */

.nightsky hr {
    border: none;
    border-top: 1px solid #21262d;
    margin: 2em 0;
}


/* --- Selection --- */

.nightsky ::selection {
    background: rgba(88, 166, 255, 0.25);
    color: #e6edf3;
}


/* --- Smooth Scroll --- */

html {
    scroll-behavior: smooth;
}


/* --- Navigation Arrows --- */

.nightsky .nav-chapters {
    color: #8b949e;
    transition: color 0.15s ease;
}

.nightsky .nav-chapters:hover {
    color: #58a6ff;
}


/* --- Page Footer (edit link) --- */

.nightsky .content footer {
    border-top: 1px solid #21262d;
    margin-top: 3em;
    padding-top: 1em;
    color: #6e7681;
}

.nightsky .content footer a {
    color: #58a6ff;
}


/* --- Responsive --- */

@media (max-width: 768px) {
    .nightsky .content main {
        line-height: 1.6;
    }

    .nightsky .sidebar {
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
    }

    .nightsky table {
        font-size: 0.9em;
    }

    .nightsky table thead th,
    .nightsky table tbody td {
        padding: 6px 10px;
    }

    .nightsky pre {
        padding: 12px;
        border-radius: 6px;
    }

    .nightsky pre code {
        font-size: 0.8em;
    }

    .nightsky .sidebar ol.chapter li a {
        padding: 8px 20px;
    }
}

@media (max-width: 480px) {
    .nightsky .content main h1 {
        font-size: 1.6em;
    }

    .nightsky .content main h2 {
        font-size: 1.3em;
    }

    .nightsky table {
        font-size: 0.85em;
        display: block;
        overflow-x: auto;
    }
}


/* --- Page TOC (right sidebar) --- */

.page-toc {
    display: none;
    position: fixed;
    top: 80px;
    right: 7em;
    width: 200px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
    z-index: 10;
}

.page-toc-title {
    font-size: 0.75em;
    font-weight: 600;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.6em;
    margin-bottom: 0.4em;
    border-bottom: 1px solid #21262d;
}

.page-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-toc li {
    margin: 0;
}

.page-toc li.toc-indent {
    padding-left: 0.8em;
}

.page-toc a {
    display: block;
    padding: 3px 0 3px 10px;
    font-size: 0.8em;
    color: #6e7681;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}

.page-toc a:hover {
    color: #e6edf3;
}

.page-toc a.active {
    color: #58a6ff;
    border-left-color: #58a6ff;
}

@media (min-width: 1920px) {
    .page-toc {
        display: block;
    }
}


/* --- Mermaid Diagrams --- */

pre.mermaid {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 1.5em;
    margin: 1.5em 0;
    text-align: center;
    overflow-x: auto;
}

pre.mermaid svg {
    max-width: 100%;
    height: auto;
}


/* --- Landing Page --- */

.landing-hero {
    text-align: center;
    padding: 3em 1em 2em;
    margin-bottom: 1em;
}

.landing-hero .landing-title {
    font-size: 3.5em;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.15em;
    border: none;
    padding: 0;
    background: linear-gradient(135deg, #58a6ff 0%, #3fb9a2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-hero .landing-tagline {
    font-size: 1.4em;
    color: #e6edf3;
    margin: 0 0 0.5em;
    font-weight: 500;
}

.landing-hero .landing-subtitle {
    font-size: 1.05em;
    color: #8b949e;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

.landing-install {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 10px;
    padding: 1.2em 1.5em;
    margin: 0 auto 2em;
    max-width: 640px;
}

.landing-install p {
    color: #8b949e;
    font-size: 0.9em;
    margin: 0.8em 0 0.4em;
}

.landing-install p:first-child {
    margin-top: 0;
}

.landing-install pre {
    margin: 0.5em 0;
    border: none;
    background: #0d1117;
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 1.5em 0;
}

.feature-card {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 1.2em 1.4em;
    transition: border-color 0.15s ease;
}

.feature-card:hover {
    border-color: #30363d;
}

.feature-card h3 {
    color: #e6edf3;
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 0.5em;
    border: none;
    padding: 0;
}

.feature-card p {
    color: #8b949e;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0;
}

.feature-card a {
    color: #58a6ff;
}

.landing-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 1.5em 0;
}

.nav-card {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 1.2em 1.4em;
}

.nav-card h4 {
    color: #e6edf3;
    font-size: 0.95em;
    font-weight: 600;
    margin: 0 0 0.6em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #21262d;
}

.nav-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-card li {
    margin: 0.35em 0;
}

.nav-card a {
    color: #8b949e;
    font-size: 0.9em;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-card a:hover {
    color: #58a6ff;
}


/* --- 404 Page --- */

.page-404 {
    text-align: center;
    padding: 6em 1em 4em;
}

.page-404 h1 {
    font-size: 6em;
    font-weight: 800;
    margin: 0 0 0.1em;
    border: none;
    padding: 0;
    background: linear-gradient(135deg, #30363d 0%, #21262d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-404 .msg {
    font-size: 1.2em;
    color: #8b949e;
    margin-bottom: 2em;
}

.page-404 .actions {
    margin-top: 1.5em;
}

.page-404 .actions a {
    color: #58a6ff;
}

.page-404 .actions p {
    margin: 0.5em 0;
    color: #6e7681;
    font-size: 0.95em;
}


/* --- Landing Page Responsive --- */

@media (max-width: 768px) {
    .landing-hero {
        padding: 2em 1em 1.5em;
    }

    .landing-hero .landing-title {
        font-size: 2.5em;
    }

    .landing-hero .landing-tagline {
        font-size: 1.15em;
    }

    .landing-install {
        padding: 1em;
    }

    .landing-features {
        grid-template-columns: 1fr;
    }

    .landing-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .landing-hero .landing-title {
        font-size: 2em;
    }

    .landing-nav {
        grid-template-columns: 1fr;
    }

    .page-404 h1 {
        font-size: 4em;
    }
}