/* ========================================================================== responsive.css — shared cross-device safety net for RAG Learning Linked last in on every top-level page so it can fill gaps without fighting each page's own styles. Three concerns: 1. A universal safety net so no page overflows the screen on any device. 2. Responsive fixes for the shared marketing nav (.nav-* classes). 3. The shared app off-canvas sidebar pattern for .app pages on phones. ========================================================================== */ /* ── 1. Universal safety net ────────────────────────────────────────────── */ /* Stop iOS from auto-inflating text. We deliberately do NOT hide horizontal overflow — fit-to-screen.js scales the page down to fit instead, so nothing is ever cut off. (Hiding overflow would clip content AND hide it from the fit calculation, which is the opposite of what we want.) */ html { -webkit-text-size-adjust: 100%; } /* Media should shrink to fit its container, never push the page wider. */ img, svg, video, canvas { max-width: 100%; } img, video { height: auto; } /* Wide tables and code blocks scroll inside themselves instead of the page. */ table { max-width: 100%; } pre { max-width: 100%; overflow-x: auto; } /* ── 2. Marketing nav (index, features, pricing, subjects, support …) ────── */ /* On narrow phones the Sign in / Register buttons used to clip off-screen. */ @media (max-width: 600px) { .nav-wrap { gap: 12px; } .nav-right { gap: 6px; } .nav-btn { padding: 8px 14px; font-size: 11.5px; letter-spacing: 0.05em; } } @media (max-width: 380px) { .nav-wrap { gap: 8px; } .nav-btn { padding: 7px 11px; letter-spacing: 0.03em; } .logo-name { font-size: 17px; } } /* ── 3. App pages: collapse the fixed sidebar into an off-canvas drawer ──── */ /* Scoped to .app so marketing pages are untouched. Pages that already ship this pattern inline keep working; pages that don't now get it for free. */ @media (max-width: 768px) { .app .sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 100; } .app .sidebar.open { transform: translateX(0); } .app .main { margin-left: 0; } /* Give the hamburger room above the page title when it appears. */ .app .topbar > .mobile-menu-btn { margin-bottom: 14px; } } /* Hamburger toggle + dimming overlay (hidden on desktop, shown on phones). */ .mobile-menu-btn { display: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); align-items: center; justify-content: center; cursor: pointer; font-size: 18px; flex-shrink: 0; } @media (max-width: 768px) { .mobile-menu-btn { display: flex; } } .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 99; } .mobile-overlay.active { display: block; } /* ── 4. Focus-visible — keyboard navigation (#14) ───────────────────────── */ /* Show a clear outline only when navigating by keyboard, not on mouse click. */ :focus-visible { outline: 2px solid var(--accent, #2563EB); outline-offset: 2px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* ── 5. Dark mode — system preference (#13) ─────────────────────────────── */ /* Overrides the CSS custom properties so every component that uses them automatically flips. No markup changes needed on individual pages. */ @media (prefers-color-scheme: dark) { :root { --bg: #0F1B2D; --surface: #162035; --surface2: #1C2A42; --surface3: #243350; --border: #2C3F5C; --border-hover: #3B82F6; --text: #E2ECFB; --muted: #7B98BF; --muted2: #506A8A; --accent: #3B82F6; --accent-dark: #60A5FA; --accent-dim: rgba(59,130,246,0.15); --accent-glow: rgba(59,130,246,0.28); --red: #F87171; --red-bg: rgba(248,113,113,0.12); --red-border: rgba(248,113,113,0.28); --red-text: #FCA5A5; --amber: #FBBF24; --amber-bg: rgba(251,191,36,0.12); --amber-border: rgba(251,191,36,0.28); --amber-text: #FDE68A; --green: #4ADE80; --green-bg: rgba(74,222,128,0.12); --green-border: rgba(74,222,128,0.28); --green-text: #86EFAC; } /* Soften heavy orb blobs so they don't over-power the dark background */ .orb { opacity: 0.5; } /* Landing-page grid overlay is too harsh in dark mode */ body::before { opacity: 0.4; } /* Nav background in dark mode */ nav { background: rgba(22,32,53,0.92); } /* Frosted-glass cards need an adjusted shimmer */ .preview-card { background: var(--surface); } } /* ── 6. Explicit dark/light — user toggle overrides system preference ─────── */ /* html[data-theme="dark"] has specificity (0,1,1) which beats :root (0,1,0), so it always wins regardless of which stylesheet defined the light values. theme.js sets this attribute synchronously before first paint. */ html[data-theme="dark"] { --bg: #0F1B2D; --surface: #162035; --surface2: #1C2A42; --surface3: #243350; --border: #2C3F5C; --border-hover: #3B82F6; --text: #E2ECFB; --muted: #7B98BF; --muted2: #506A8A; --accent: #3B82F6; --accent-dark: #60A5FA; --accent-dim: rgba(59,130,246,0.15); --accent-glow: rgba(59,130,246,0.28); --red: #F87171; --red-bg: rgba(248,113,113,0.12); --red-border: rgba(248,113,113,0.28); --red-text: #FCA5A5; --amber: #FBBF24; --amber-bg: rgba(251,191,36,0.12); --amber-border: rgba(251,191,36,0.28); --amber-text: #FDE68A; --green: #4ADE80; --green-bg: rgba(74,222,128,0.12); --green-border: rgba(74,222,128,0.28); --green-text: #86EFAC; } html[data-theme="dark"] .orb { opacity: 0.5; } html[data-theme="dark"] body::before { opacity: 0.4; } html[data-theme="dark"] nav { background: rgba(22,32,53,0.92); } html[data-theme="dark"] .preview-card { background: var(--surface); } /* Force light — overrides system dark preference when user chose light */ html[data-theme="light"] { --bg: #EAF2FC; --surface: #FFFFFF; --surface2: #F0F6FD; --surface3: #DBE8F6; --border: #B8D0E8; --border-hover: #2563EB; --text: #0B1E3F; --muted: #445F85; --muted2: #7891B0; --accent: #2563EB; --accent-dark: #1D4ED8; --accent-dim: rgba(37,99,235,0.1); --accent-glow: rgba(37,99,235,0.2); --red: #DC2626; --red-bg: rgba(220,38,38,0.07); --red-border: rgba(220,38,38,0.18); --red-text: #B91C1C; --amber: #D97706; --amber-bg: rgba(217,119,6,0.07); --amber-border: rgba(217,119,6,0.18); --amber-text: #B45309; --green: #16A34A; --green-bg: rgba(22,163,74,0.07); --green-border: rgba(22,163,74,0.18); --green-text: #15803D; }