navaltoolbox-lib/docs/source/_static/custom.css

/* Custom CSS for NavalToolbox documentation */
/* Color scheme based on navaltoolbox.com */

/* ============================================================
   LIGHT MODE - NavalToolbox colors
   ============================================================ */
html {
    --pst-color-primary: #125C8B;
    --pst-color-secondary: #023246 !important;
    --pst-color-accent: #0094D3;
    --pst-color-link: #125C8B;
    --pst-color-link-hover: #0094D3;
}

/* ============================================================
   DARK MODE - NavalToolbox dark app colors
   Based on the app screenshot: dark navy blue background
   ============================================================ */
html[data-theme="dark"] {
    --pst-color-primary: #E8F0F5;
    --pst-color-secondary: #6DCFF6 !important;
    --pst-color-accent: #6DCFF6;
    --pst-color-link: #E8F0F5;
    --pst-color-link-hover: #6DCFF6;
    --pst-color-background: #1E3A4C;
    --pst-color-on-background: #2A4D5E;
    --pst-color-surface: #152936;
    --pst-color-on-surface: #E8F0F5;
    --pst-color-text-base: #E8F0F5;
    --pst-color-text-muted: #9BB8C9;
    --pst-color-border: #2A4D5E;
}

html[data-theme="dark"] body {
    background-color: #1E3A4C !important;
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */
.highlight pre {
    font-size: 0.9rem;
    line-height: 1.4;
}

.sig-name {
    font-weight: 600;
}

.sig-param {
    font-style: italic;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    background: linear-gradient(135deg, #0A3D5C 0%, #0E486C 50%, #125C8B 100%) !important;
    border-radius: 12px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
    color: white;
}

html[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0F1F2A 0%, #152936 50%, #1E3A4C 100%) !important;
    border: 1px solid #2A4D5E;
}

.hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: white !important;
}

.hero-section p {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 1.5rem;
    color: white !important;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.hero-btn:hover {
    text-decoration: none !important;
}

.hero-btn-primary {
    background: white;
    color: #0E486C !important;
}

.hero-btn-primary:hover {
    background: #f0f4f8;
    color: #125C8B !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .hero-btn-primary {
    background: #6DCFF6;
    color: #0F1F2A !important;
}

html[data-theme="dark"] .hero-btn-primary:hover {
    background: #9DDFF9;
    color: #0F1F2A !important;
}

.hero-btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white !important;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white !important;
    transform: translateY(-2px);
}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-card {
    background: var(--pst-color-surface);
    border: 1px solid var(--pst-color-border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.feature-card:hover {
    border-color: var(--pst-color-secondary);
    box-shadow: 0 4px 12px rgba(18, 92, 139, 0.15);
}

html[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 4px 12px rgba(109, 207, 246, 0.15);
}

.feature-card h3 {
    margin-top: 0;
    color: var(--pst-color-primary);
}

.feature-card p {
    margin-bottom: 0;
    color: var(--pst-color-text-base);
}

/* ============================================================
   SPHINX-DESIGN GRID CARDS - CRITICAL FOR DARK MODE
   ============================================================ */
.sd-card {
    border-color: var(--pst-color-border) !important;
    transition: all 0.2s ease;
}

.sd-card:hover {
    border-color: var(--pst-color-secondary) !important;
}

.sd-card-title {
    color: var(--pst-color-primary) !important;
}

/* Dark mode specific card styling */
html[data-theme="dark"] .sd-card {
    background-color: #152936 !important;
    border-color: #2A4D5E !important;
}

html[data-theme="dark"] .sd-card:hover {
    border-color: #6DCFF6 !important;
    box-shadow: 0 4px 12px rgba(109, 207, 246, 0.15);
}

html[data-theme="dark"] .sd-card-title {
    color: #E8F0F5 !important;
}

html[data-theme="dark"] .sd-card-body {
    color: #9BB8C9 !important;
}

html[data-theme="dark"] .sd-card-text {
    color: #9BB8C9 !important;
}

/* Card icon colors in dark mode */
html[data-theme="dark"] .sd-card-header {
    background-color: #1E3A4C !important;
    border-bottom-color: #2A4D5E !important;
}

/* ============================================================
   SIDEBAR AND NAVIGATION - DARK MODE
   ============================================================ */
html[data-theme="dark"] .bd-sidebar {
    background-color: #152936 !important;
}

html[data-theme="dark"] .bd-sidebar-primary {
    background-color: #152936 !important;
}

html[data-theme="dark"] .sidebar-container {
    background-color: #152936 !important;
}

/* ============================================================
   MAIN CONTENT AREA - DARK MODE
   ============================================================ */
html[data-theme="dark"] .bd-main {
    background-color: #1E3A4C !important;
}

html[data-theme="dark"] .bd-content {
    background-color: #1E3A4C !important;
}

html[data-theme="dark"] .bd-article-container {
    background-color: #1E3A4C !important;
}

/* ============================================================
   NAVBAR - DARK MODE
   ============================================================ */
html[data-theme="dark"] .bd-header {
    background-color: #0F1F2A !important;
    border-bottom-color: #2A4D5E !important;
}

html[data-theme="dark"] .navbar {
    background-color: #0F1F2A !important;
}

/* ============================================================
   FOOTER - DARK MODE
   ============================================================ */
html[data-theme="dark"] .bd-footer {
    background-color: #0F1F2A !important;
    border-top-color: #2A4D5E !important;
}

html[data-theme="dark"] .bd-footer-content {
    background-color: #0F1F2A !important;
}

/* ============================================================
   TOC (Table of Contents) - DARK MODE
   ============================================================ */
html[data-theme="dark"] .bd-toc {
    background-color: transparent !important;
}

html[data-theme="dark"] .toc-entry a {
    color: #9BB8C9 !important;
}

html[data-theme="dark"] .toc-entry a:hover {
    color: #6DCFF6 !important;
}

html[data-theme="dark"] .toc-entry a.active {
    color: #E8F0F5 !important;
}

/* ============================================================
   LINKS - DARK MODE
   ============================================================ */
html[data-theme="dark"] a {
    color: #E8F0F5;
}

html[data-theme="dark"] a:hover {
    color: #6DCFF6;
}

/* ============================================================
   HIDE FOOTER CREDITS
   ============================================================ */
.bd-footer .footer-items__end,
.bd-footer-content .footer-items__end,
footer .sphinx-bs,
.footer-item p:has(a[href*="sphinx"]),
.footer-item p:has(a[href*="pydata"]) {
    display: none !important;
}

/* Hide "Built with" and "Created using" text */
.bd-footer-content p,
footer p {
    display: none !important;
}

/* Keep copyright visible */
.bd-footer-content .copyright,
footer .copyright {
    display: block !important;
}