/* nmbl Documentation Custom Styles */ /* Geekdoc Theme Customization */ /* ========================================== */ /* CSS Custom Properties (Variables) */ /* ========================================== */ :root { /* Light Mode Colors */ --body-color: #1e293b; --body-background: #ffffff; /* Primary brand color - Sky Blue */ --primary-color: #0284c7; --primary-color-dark: #0369a1; --primary-color-light: #38bdf8; /* Secondary color - Slate */ --secondary-color: #64748b; /* Link colors */ /* #004c78 on white → 8.14:1; on --accent-color-lite (#f4f6f7) → 7.51:1; passes WCAG AAA */ --link-color: #004c78; --link-color-visited: #004c78; /* Footer links: white on dark navy footer bg → 14.7:1, passes WCAG AAA */ --footer-link-color: #ffffff; --footer-link-color-visited: #ffffff; /* Border radius */ --border-radius: 0.5rem; --border-radius-sm: 0.375rem; --border-radius-lg: 0.75rem; /* Geekdoc variable overrides */ --accent-color: #0284c7; --code-background: #f1f5f9; --code-accent-color: #0284c7; } /* Dark Mode Colors */ /* Geekdoc sets color-theme="dark" on when the user toggles dark mode. */ /* Use :root[color-theme=dark] (specificity 0,2,0) to match and override Geekdoc's */ /* own :root[color-theme=dark] block; plain [color-theme=dark] (0,1,0) loses. */ :root[color-theme=dark] { /* Background colors */ --body-background: #0f172a; --body-color: #f1f5f9; --bg-secondary: #1e293b; --bg-tertiary: #334155; --bg-hover: #475569; /* Text colors */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; /* Accent colors */ --accent-primary: #38bdf8; --accent-secondary: #818cf8; /* #7dd3fc (sky-300): 7.51:1 on --accent-color-lite (#222d35) and 9.86:1 on body bg; WCAG AAA */ --link-color: #7dd3fc; --link-color-visited: #7dd3fc; /* Footer links: white on #1e293b footer bg → 14.6:1, passes WCAG AAA */ --footer-link-color: #ffffff; --footer-link-color-visited: #ffffff; /* Utility colors */ --accent-success: #34d399; --accent-warning: #fbbf24; --accent-error: #f87171; /* Borders */ --border-color: rgba(148, 163, 184, 0.2); --border-hover: rgba(56, 189, 248, 0.5); /* Geekdoc overrides for dark mode */ --accent-color: #38bdf8; --code-background: #1e293b; --code-accent-color: #38bdf8; --header-background: #1e293b; --footer-background: #1e293b; } /* ========================================== */ /* Typography */ /* ========================================== */ body { background-color: var(--body-background); color: var(--body-color); } h1, h2, h3, h4, h5, h6 { color: var(--text-primary, var(--body-color)); } /* Dark mode: override theme's more-specific .gdoc-markdown h* selectors for WCAG AA contrast */ [color-theme=dark] h1, [color-theme=dark] h2, [color-theme=dark] h3, [color-theme=dark] h4, [color-theme=dark] h5, [color-theme=dark] h6, [color-theme=dark] .gdoc-markdown h1, [color-theme=dark] .gdoc-markdown h2, [color-theme=dark] .gdoc-markdown h3, [color-theme=dark] .gdoc-markdown h4, [color-theme=dark] .gdoc-markdown h5, [color-theme=dark] .gdoc-markdown h6 { /* #f1f5f9 on #0f172a → contrast ratio ~16.4:1, well above WCAG AA (4.5:1) */ color: #f1f5f9; } a { color: var(--link-color); transition: color 0.2s ease; } /* Suppress the link color transition in dark mode so axe / WCAG contrast checks see the final settled colour (#7dd3fc), not a mid-transition intermediate that can fall below the 7:1 AAA threshold against a dark background. */ :root[color-theme=dark] a { transition: none; } a:hover { color: var(--primary-color-dark, var(--link-color)); } /* ========================================== */ /* Cards */ /* ========================================== */ .gdoc-card, .card { background-color: var(--bg-secondary, #ffffff); border-radius: var(--border-radius-lg); border: 1px solid var(--border-color, #e5e7eb); transition: all 0.2s ease; } .gdoc-card:hover, .card:hover { border-color: var(--border-hover, var(--accent-color)); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } [color-theme=dark] .gdoc-card:hover, [color-theme=dark] .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } /* ========================================== */ /* Navigation */ /* ========================================== */ .gdoc-nav nav, .gdoc-nav__entry { transition: background-color 0.2s ease; } .gdoc-nav__entry.is-active { /* Uses --link-color which passes WCAG AAA: #004c78 (8.14:1) light, #7dd3fc (9.86:1) dark */ color: var(--link-color); font-weight: 600; } .gdoc-nav__entry:hover { background-color: rgba(var(--accent-color-rgb, 2, 132, 199), 0.1); } /* ========================================== */ /* Buttons */ /* ========================================== */ .gdoc-button, .btn, .btn-primary { /* #0c4a6e with white text → 8.54:1 contrast, passes WCAG AAA */ background-color: #0c4a6e; border-radius: 9999px; /* pill shape */ padding: 0.75rem 1.5rem; font-weight: 500; border: none; transition: all 0.2s ease; } /* Use higher-specificity selectors so the white text colour always wins over the generic `a { color: var(--link-color) }` rule. Without this the button text inherits the link colour (#0369a1) and lands on a near-identical background, producing near-zero contrast. */ a.gdoc-button, a.btn, a.btn-primary, button.gdoc-button, button.btn, button.btn-primary, .gdoc-button, .btn, .btn-primary { color: #ffffff; } .gdoc-button:hover, .btn:hover, .btn-primary:hover { background-color: #083344; /* deep dark blue: white text → 12:1, passes WCAG AAA */ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); } a.gdoc-button:hover, a.btn:hover, a.btn-primary:hover { color: #ffffff; } /* ========================================== */ /* Logo Styling */ /* ========================================== */ /* Override Geekdoc's 2rem × 2rem square to preserve the logo's aspect ratio. nmbl-logo-497x169.png is ~2.94:1, so fix height and let width scale. */ .gdoc-brand__img { width: auto; height: 2rem; } .gdoc-brand img, .logo img { max-width: 200px; height: auto; } .gdoc-home img.logo, .homepage-logo { max-width: 300px; height: auto; margin-bottom: 2rem; } /* ========================================== */ /* Code Blocks */ /* ========================================== */ code { background-color: var(--code-background); color: var(--accent-color); padding: 0.2em 0.4em; border-radius: var(--border-radius-sm); font-size: 0.9em; } pre code { background: transparent; padding: 0; } /* ========================================== */ /* Breadcrumbs */ /* ========================================== */ .gdoc-breadcrumb { color: var(--text-secondary, #6b7280); } .gdoc-breadcrumb a { color: var(--link-color); } .gdoc-breadcrumb a:hover { color: var(--primary-color-dark); } /* ========================================== */ /* Search */ /* ========================================== */ .gdoc-search input { border-radius: var(--border-radius); border: 1px solid var(--border-color, #d1d5db); } .gdoc-search input:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb, 2, 132, 199), 0.1); } /* ========================================== */ /* Homepage Customization */ /* ========================================== */ .gdoc-home__header { text-align: center; padding: 3rem 1rem; } .gdoc-home__lead { font-size: 1.25rem; /* #374151 on #ffffff → ~10:1 contrast, passes WCAG AAA (7:1) */ color: #374151; margin-bottom: 2rem; } :root[color-theme=dark] .gdoc-home__lead { /* #cbd5e1 on #0f172a → ~11:1 contrast, passes WCAG AAA (7:1) */ color: #cbd5e1; } /* ========================================== */ /* Utility Classes */ /* ========================================== */ .text-center { text-align: center; } .mt-4 { margin-top: 1.5rem; } .mb-4 { margin-bottom: 1.5rem; } /* ========================================== Accessibility: WCAG AAA Syntax Highlight Fixes geekdocDarkModeCode = true permanently adds code-theme="dark" to in ALL modes (light page and dark page). The :root[code-theme=dark] block in the Geekdoc theme CSS sets --code-background ≈ rgb(34,45,53) — a dark background — that overrides the plain :root --code-background (#f1f5f9) due to higher specificity. When color-theme=dark is also set, our custom.css :root[color-theme=dark] block overrides it to #1e293b. Both dark backgrounds require LIGHT syntax token colors to pass WCAG AAA (7:1): #b0c0e8: 7.99:1 on rgb(34,45,53) / 8.31:1 on #1e293b (comments) #d0acff: 7.39:1 on rgb(34,45,53) / 7.69:1 on #1e293b (numbers) #ffb3e3: 8.58:1 on rgb(34,45,53) / 8.93:1 on #1e293b (name tags) ========================================== */ /* Comments: geekdoc code-theme=dark has #96a6d8 = 5.86:1 on dark bg — fails AAA */ :root[code-theme=dark] .chroma .c, :root[code-theme=dark] .chroma .ch, :root[code-theme=dark] .chroma .cm, :root[code-theme=dark] .chroma .c1, :root[code-theme=dark] .chroma .cs { color: #b0c0e8 !important; /* 7.99:1 on rgb(34,45,53); 8.31:1 on #1e293b — WCAG AAA */ font-style: italic !important; } /* Numbers: geekdoc code-theme=dark has #bd93f9 = 5.81:1 on dark bg — fails AAA */ :root[code-theme=dark] .chroma .m, :root[code-theme=dark] .chroma .mb, :root[code-theme=dark] .chroma .mf, :root[code-theme=dark] .chroma .mh, :root[code-theme=dark] .chroma .mi, :root[code-theme=dark] .chroma .il, :root[code-theme=dark] .chroma .mo { color: #d0acff !important; /* 7.39:1 on rgb(34,45,53); 7.69:1 on #1e293b — WCAG AAA */ } /* Name tags: geekdoc code-theme=dark has #ff79c6 = 5.90:1 on dark bg — fails AAA */ :root[code-theme=dark] .chroma .nt { color: #ffb3e3 !important; /* 8.58:1 on rgb(34,45,53); 8.93:1 on #1e293b — WCAG AAA */ }