/* Shared CSS across the site. Keep this file limited to styles that are truly cross-page; most layout uses Tailwind via CDN. */ /* SVG icon fill used on the landing page */ .icon-fill { fill: #4b5563; } .dark .icon-fill { fill: #d1d5db; } /* Mobile viewport height stability for pages that use a fixed bottom nav */ body { min-height: max(884px, 100dvh); } /* Fallback for browsers that don't support 100dvh */ @supports not (height: 100dvh) { body { min-height: 884px; } } /* Theme variables (light by default, can be toggled by setting `data-theme="dark"` on or adding `dark` class on `). These keep the site simple and allow the bottom nav script to toggle theme. */ :root { --bg: #ffffff; --text: #111827; --muted: #6b7280; --link: #2563eb; } [data-theme="dark"] { --bg: #0f1724; --text: #e6eef8; --muted: #9ca3af; --link: #60a5fa; } /* Provide a fallback selector for pages that use `body.dark` classes */ body.dark { background-color: var(--bg); color: var(--text); } html { background-color: var(--bg); color: var(--text); } /* Respect system preference only when visitor hasn't chosen a theme yet */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0f1724; --text: #e6eef8; --muted: #9ca3af; --link: #60a5fa; } } /* Map common Tailwind utility classes to theme-aware values in dark mode */ body.dark .text-gray-600, .dark .text-gray-600, [data-theme="dark"] .text-gray-600 { color: var(--muted) !important; } body.dark .text-gray-900, .dark .text-gray-900, [data-theme="dark"] .text-gray-900 { color: var(--text) !important; } body.dark .bg-white, .dark .bg-white, [data-theme="dark"] .bg-white { background-color: transparent !important; } body.dark .bg-gray-50, .dark .bg-gray-50, [data-theme="dark"] .bg-gray-50 { background-color: rgba(255,255,255,0.02) !important; } /* utility for small text in dark mode */ body.dark .text-sm, .dark .text-sm, [data-theme="dark"] .text-sm { color: var(--muted) !important; } /* Tailwind Typography (.prose) variable overrides for dark theme */ body.dark :where(.prose), .dark :where(.prose), [data-theme="dark"] :where(.prose) { --tw-prose-body: var(--text); --tw-prose-headings: var(--text); --tw-prose-lead: var(--muted); --tw-prose-links: var(--link); --tw-prose-bold: var(--text); --tw-prose-counters: var(--muted); --tw-prose-bullets: var(--muted); --tw-prose-hr: rgba(255,255,255,0.06); --tw-prose-quotes: var(--muted); --tw-prose-quote-borders: rgba(255,255,255,0.04); --tw-prose-captions: var(--muted); --tw-prose-code: var(--text); --tw-prose-pre-code: var(--text); --tw-prose-pre-bg: rgba(255,255,255,0.02); }