/* ============================================================ qa-styles.css — Shared stylesheet for all Q&A pages Load BEFORE premium.css so premium.css overrides win on ties. Each page sets its own theme variables via inline etc. ============================================================ */ /* ---- Shadow layer — override per-page definitions ---- */ :root { --shadow-sm: 0 1px 1px rgba(15, 23, 42, 0.04), 0 2px 6px -2px rgba(15, 23, 42, 0.06); --shadow-md: 0 1px 1px rgba(15, 23, 42, 0.03), 0 6px 14px -6px rgba(15, 23, 42, 0.08), 0 22px 44px -22px rgba(15, 23, 42, 0.16); --shadow-lg: 0 1px 1px rgba(15, 23, 42, 0.03), 0 12px 28px -10px rgba(15, 23, 42, 0.10), 0 44px 80px -36px rgba(15, 23, 42, 0.22); --p-hairline: rgba(15, 23, 42, 0.08); --p-hairline-soft: rgba(15, 23, 42, 0.05); --p-wash: rgba(15, 23, 42, 0.035); --p-wash-strong: rgba(15, 23, 42, 0.06); } /* ============================================================ Foundations ============================================================ */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.7; margin: 0; padding: 0; color: var(--text-main, #1e293b); background-color: var(--bg-desk, #f4f7f6); } /* ============================================================ Top Navigation ============================================================ */ .top-nav { padding: 1rem 2.5rem; border-bottom: 1px solid var(--border-light, #e2e8f0); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; } .top-nav a { text-decoration: none; color: var(--text-muted, #64748b); font-weight: 600; font-size: 0.95rem; } .nav-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--text-main, #1e293b); letter-spacing: -0.5px; } /* ============================================================ Layout ============================================================ */ .layout { display: flex; max-width: 1440px; gap: 4rem; margin: 3.5rem auto 5rem; padding: 0 2rem; align-items: flex-start; } /* ============================================================ Sidebar ============================================================ */ .sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 7.5rem; } /* ---- TOC box — transparent rail style ---- */ .toc-box { background: transparent; border: none; box-shadow: none; padding: 0 0 0 1.4rem; border-left: 1px solid var(--p-hairline); border-radius: 0; max-height: calc(100vh - 11rem); overflow-y: auto; } .toc-box h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: none; padding-bottom: 0; margin-bottom: 1.4rem; opacity: 0.65; color: var(--text-main, #1e293b); } .toc-box ul { margin-top: 0; margin-bottom: 0; list-style: none; padding: 0; } .toc-box li { margin-bottom: 0.15rem; } .toc-box a { display: block; text-decoration: none; color: var(--text-muted, #64748b); font-size: 0.88rem; font-weight: 500; line-height: 1.45; padding: 0.55rem 0.75rem; margin-left: -0.75rem; border-radius: 8px; transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .toc-box a:hover { background: var(--p-wash); color: var(--primary, var(--p-accent, #3b82f6)); } /* .toc-foot styles moved to premium.css to provide a button feel */ .toc-box .toc-meta { display: block; margin-top: 0.15rem; font-size: 0.76rem; font-weight: 500; opacity: 0.6; letter-spacing: 0.01em; } .toc-box a.active { background: var(--p-wash-strong); color: var(--p-accent, var(--primary, #3b82f6)); box-shadow: inset 2px 0 0 var(--p-accent, var(--primary, #3b82f6)); } .toc-box a.active .toc-meta { opacity: 0.75; } /* ============================================================ Content ============================================================ */ .content { flex-grow: 1; min-width: 0; background: var(--bg-paper, #fefdfb); padding: 4.5rem 5rem 5rem; border-radius: 32px; box-shadow: var(--shadow-md); border: 1px solid var(--border-light, #e2e8f0); } .content:hover { box-shadow: var(--shadow-md); } /* ---- Section titles ---- */ .section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: #1a202c; border-bottom: 1px solid var(--p-hairline); padding-bottom: 1rem; margin: 4.5rem -5rem 3rem; padding-left: 5rem; letter-spacing: -0.02em; position: sticky; top: 4.6rem; z-index: 20; background: inherit; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .section-title:first-child { margin-top: -1.5rem; } /* ============================================================ Q&A Cards ============================================================ */ .content .qa-card { position: relative; margin-bottom: 2rem; padding: 2.1rem 2.3rem; border: 1px solid var(--p-hairline-soft); border-radius: 16px; background: var(--p-wash); scroll-margin-top: 9rem; transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms cubic-bezier(0.16, 1, 0.3, 1), background 280ms cubic-bezier(0.16, 1, 0.3, 1); } .content .qa-card:hover { border-color: var(--p-hairline); box-shadow: var(--shadow-md); } .content .qa-card:target { border-color: var(--p-accent, var(--primary, #3b82f6)); box-shadow: var(--shadow-md); } .section .qa-card { padding-bottom: 1.5rem; } /* ============================================================ Question & Answer Text ============================================================ */ .q-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.18rem; color: #2d3748; margin-bottom: 1.2rem; display: flex; gap: 0.9rem; line-height: 1.45; align-items: flex-start; } .q-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.02em; align-self: flex-start; margin-top: 0.1rem; flex-shrink: 0; } .a-text { padding-left: 0; border-left: none; font-size: 1rem; color: #4a5568; } .a-text:hover { border-left-color: transparent; } .a-text > p { max-width: 74ch; margin-top: 0; margin-bottom: 1.2rem; line-height: 1.8; } .a-text > ul, .a-text > ol { max-width: 74ch; margin-top: 0; margin-bottom: 1.2rem; padding-left: 1.5rem; line-height: 1.8; } .a-text li { margin-bottom: 0.6rem; } .answer > p, .answer > ul, .answer > ol { max-width: 74ch; } /* ============================================================ Diagrams ============================================================ */ .diagram-container { background: #f7fafc; border: 1px solid var(--border-light, #e2e8f0); border-radius: 12px; padding: 2rem; margin: 2rem 0; text-align: center; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); width: 100%; overflow-x: auto; overflow-y: visible; } .diagram-container svg { max-width: 100%; height: auto; } .diagram-caption { font-size: 0.9rem; color: var(--text-muted, #64748b); margin-top: 1.2rem; font-style: italic; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; } /* ============================================================ Tables ============================================================ */ table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 850px; margin: 2rem 0; font-size: 0.95rem; border: 1px solid var(--border-light, #e2e8f0); border-radius: 8px; overflow: hidden; } th, td { border-bottom: 1px solid var(--border-light, #e2e8f0); border-right: 1px solid var(--border-light, #e2e8f0); padding: 1rem 1.2rem; text-align: left; vertical-align: top; } th { background: #f7fafc; font-weight: 700; color: #2b6cb0; font-family: 'Plus Jakarta Sans', sans-serif; } tr:last-child td { border-bottom: none; } th:last-child, td:last-child { border-right: none; } tr:nth-child(even) { background: #fbfbfc; } /* ============================================================ Code Blocks ============================================================ */ .code-block { font-family: 'JetBrains Mono', 'Courier New', monospace; background: #1a202c; color: #e2e8f0; padding: 1.5rem; border-radius: 8px; overflow-x: auto; font-size: 0.9rem; margin: 1.5rem 0; line-height: 1.6; } code { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.9em; } pre { margin: 1.5rem 0; line-height: 1.6; } /* ============================================================ Note Skeleton ============================================================ */ .note-skeleton { border-radius: 10px; padding: 1.4rem 1.6rem; margin-top: 1.2rem; } .note-skeleton ul { margin: 0; padding-left: 1.5rem; } .note-skeleton li { margin-bottom: 0.5rem; } .note-skeleton b { color: #4a5568; } /* ============================================================ Mermaid ============================================================ */ .mermaid { text-align: center; margin-bottom: 1.5rem; width: 100%; max-width: 100%; } .mermaid svg { height: auto; overflow: visible !important; } /* ============================================================ Group Switch (sidebar navigator) ============================================================ */ .group-switch { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 1.4rem; border-left: 1px solid var(--p-hairline); } .gs-item { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: 0.85rem; padding: 0.7rem 0.8rem; margin-left: -0.8rem; border-radius: 10px; text-decoration: none; color: inherit; transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .gs-item:hover { background: var(--p-wash); } .gs-key { font-family: 'JetBrains Mono', monospace; font-size: 1.45rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; opacity: 0.28; font-variant-numeric: tabular-nums; transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .gs-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .gs-name { font-size: 0.92rem; font-weight: 600; line-height: 1.3; } .gs-marks { font-size: 0.76rem; font-weight: 500; opacity: 0.55; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .gs-item.is-current { background: var(--p-wash-strong); box-shadow: inset 2px 0 0 var(--p-accent, var(--primary, #3b82f6)); } .gs-item.is-current .gs-key { opacity: 1; color: var(--p-accent, var(--primary, #3b82f6)); } .gs-item.is-current .gs-name { color: var(--p-accent, var(--primary, #3b82f6)); } .gs-item.is-current .gs-marks { opacity: 0.7; } /* ============================================================ Group Pager (foot navigation) ============================================================ */ .group-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--p-hairline); } .pager { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.15rem 1.35rem; border: 1px solid var(--p-hairline-soft); border-radius: 16px; text-decoration: none; color: inherit; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1); } .pager-empty { border: none; } .pager-next { text-align: right; } .pager-dir { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-accent, var(--primary, #3b82f6)); } .pager-label { font-size: 1.02rem; font-weight: 600; line-height: 1.35; } .pager-prev:hover { transform: translateX(-3px); } .pager-next:hover { transform: translateX(3px); } .pager:hover { border-color: var(--p-hairline); box-shadow: var(--shadow-sm); } .pager.is-firing { transform: scale(0.985); box-shadow: none; } .pager-hint { margin: 1.25rem 0 0; text-align: center; font-size: 0.8rem; opacity: 0.5; } .pager-hint kbd { display: inline-block; min-width: 1.6rem; padding: 0.15rem 0.35rem; border: 1px solid var(--p-hairline); border-bottom-width: 2px; border-radius: 5px; background: var(--p-wash); font: inherit; font-size: 0.82em; line-height: 1.4; text-align: center; } .nav-code { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; background: rgba(0, 0, 0, 0.05); color: var(--primary, var(--p-accent, #3b82f6)); padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.1); } /* ============================================================ Responsive Breakpoints ============================================================ */ @media (max-width: 1024px) { .layout { flex-direction: column; gap: 2.5rem; margin-block: 2rem 3rem; align-items: stretch; } .sidebar { width: 100%; position: static; top: auto; } .toc-box { border-left: none; border-top: 1px solid var(--p-hairline); padding: 1.25rem 0 0; max-height: none; } .content { padding: 2.75rem 2.25rem 3rem; } .section-title { margin-inline: -2.25rem; padding-inline: 2.25rem; } } @media (max-width: 768px) { :root { --p-r-xl: 20px; --p-r-lg: 16px; --p-r-md: 12px; --p-r-sm: 10px; } [id] { scroll-margin-top: 5.5rem; } html, body { overflow-x: clip; } .layout { padding-inline: 1rem; gap: 1.5rem; } .sidebar { width: auto; } .top-nav { flex-wrap: wrap; row-gap: 0.35rem; } .nav-title { font-size: 0.9rem; } .content { padding: 1.75rem 1.25rem 2.25rem; } .section-title { top: 3.6rem; margin-inline: -1.25rem; padding: 0.8rem 1.25rem; } .qa-card { padding: 1.4rem 1.25rem; } .q-text { font-size: 1.05rem; gap: 0.7rem; } .group-switch { flex-direction: row; border-left: none; border-top: 1px solid var(--p-hairline); padding: 1rem 0 0; overflow-x: auto; } .gs-item { flex: 1; margin-left: 0; min-width: 0; } .group-pager { grid-template-columns: 1fr; } .pager-next { text-align: left; } .pager-prev:hover, .pager-next:hover { transform: none; } table { display: block; width: 100%; overflow-x: auto; } .card:hover, .chapter-card:hover { transform: none; } } /* ============================================================ Print Styles ============================================================ */ @media print { .top-nav, .sidebar, .back-link, .drawer-toggle, .jump-drawer, .search-wrapper, .flashcard-controls, .bookmark-btn, .progress-wrapper { display: none !important; } body { background: #fff !important; } .layout { display: block; margin: 0; padding: 0; max-width: none; } .content, .container, .folio-page, .qa-card, table, pre, .code-block, .formula-box, details, .diagram-container { box-shadow: none !important; border-radius: 0; max-width: none; } .content, .container, .folio-page { padding: 0; } .section-title { position: static; margin-inline: 0; padding-inline: 0; backdrop-filter: none; } .qa-card { background: none; border: none; padding: 0; margin-bottom: 1.5rem; } .qa-card, table, pre, .code-block, .formula-box, .diagram-container, .mermaid { break-inside: avoid; } h1, h2, h3, .section-title, .q-text, .qa-question { break-after: avoid; } a { text-decoration: none; } .mermaid svg { height: auto; } }