Igloo MCP

/** * Living Reports - Quarto Stylesheet * * Professional styling for Quarto-rendered reports. * This file is copied to the report directory during render. * * Design principles: * - Tufte CSS-inspired typography * - Optimal reading width (65ch for prose) * - Professional table styling with tabular figures * - Accessible color contrast (WCAG AA) * - Print-friendly output */ /* ============================================ Typography & Layout ============================================ */ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.75; color: #1e293b; max-width: 1200px; margin: 0 auto; padding: 2rem 3rem; } /* Constrain prose to optimal reading width */ p, li { max-width: 65ch; } h1, h2, h3, h4, h5, h6 { color: #0f172a; margin-top: 2rem; margin-bottom: 1rem; } h1 { font-size: 2.25rem; border-bottom: 2px solid #2563eb; padding-bottom: 0.5rem; } h2 { font-size: 1.75rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; } h3 { font-size: 1.333rem; } /* ============================================ Tables - Professional Data Styling ============================================ */ table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; } thead { border-bottom: 2px solid #cbd5e1; } th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8125rem; font-weight: 600; background: #f8fafc; padding: 0.875rem 1rem; text-align: left; color: #64748b; } td { padding: 0.875rem 1rem; border-bottom: 1px solid #e2e8f0; font-variant-numeric: tabular-nums; vertical-align: top; } /* Zebra striping */ tbody tr:nth-child(even) { background: #f8fafc; } /* Hover state */ tbody tr:hover { background: #f1f5f9; } /* Right-align numeric columns when marked */ td.numeric, th.numeric { text-align: right; } /* ============================================ Callouts & Insights ============================================ */ .callout { border-left: 4px solid #2563eb; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 1rem 1.5rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0; } .callout-note { border-left-color: #2563eb; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); } .callout-warning { border-left-color: #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); } .callout-important { border-left-color: #dc2626; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); } .callout-tip { border-left-color: #22c55e; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); } /* ============================================ Code Blocks ============================================ */ pre { background: #1e293b; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.875rem; line-height: 1.6; margin: 1rem 0; } code { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; font-size: 0.875rem; } :not(pre) > code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; } /* ============================================ Blockquotes ============================================ */ blockquote { border-left: 4px solid #cbd5e1; margin: 1.5rem 0; padding: 0.75rem 1.25rem; background: #f8fafc; border-radius: 0 0.25rem 0.25rem 0; color: #64748b; font-style: italic; } blockquote p { margin: 0; } /* ============================================ Lists ============================================ */ ul, ol { margin-left: 2rem; margin-bottom: 1rem; } li { margin-bottom: 0.375rem; } /* Nested lists */ li > ul, li > ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } /* ============================================ Links ============================================ */ a { color: #2563eb; text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================ Images & Figures ============================================ */ img { max-width: 100%; height: auto; border-radius: 0.5rem; } figure { margin: 1.5rem 0; text-align: center; } figcaption { font-size: 0.875rem; color: #64748b; margin-top: 0.5rem; font-style: italic; } /* ============================================ Dark Mode ============================================ */ @media (prefers-color-scheme: dark) { body { background: #0f172a; color: #f1f5f9; } h1, h2, h3, h4, h5, h6 { color: #f1f5f9; } h1 { border-bottom-color: #3b82f6; } h2 { border-bottom-color: #334155; } th { background: #1e293b; color: #94a3b8; } td { border-bottom-color: #334155; } tbody tr:nth-child(even) { background: #1e293b; } tbody tr:hover { background: #334155; } .callout { background: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%); } .callout-warning { background: linear-gradient(135deg, #422006 0%, #451a03 100%); } .callout-important { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); } .callout-tip { background: linear-gradient(135deg, #052e16 0%, #14532d 100%); } pre { background: #0f172a; border: 1px solid #334155; } :not(pre) > code { background: #1e293b; } blockquote { background: #1e293b; border-left-color: #475569; } } /* ============================================ Print Styles ============================================ */ @media print { body { max-width: none; padding: 1rem; font-size: 11pt; line-height: 1.5; color: #000; background: #fff; } h1, h2, h3, h4, h5, h6 { color: #000; page-break-after: avoid; } h1 { border-bottom-color: #333; } h2 { border-bottom-color: #666; } table { page-break-inside: avoid; font-size: 10pt; } th { background: #f5f5f5 !important; color: #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; } tbody tr:nth-child(even) { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .callout { background: #f5f5f5 !important; border-left-color: #333 !important; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; } pre { background: #f5f5f5 !important; color: #333 !important; border: 1px solid #ccc; page-break-inside: avoid; } a { color: inherit; text-decoration: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } /* Hide navigation elements */ .toc, .sidebar, nav { display: none !important; } } /* ============================================ Responsive Design ============================================ */ @media (max-width: 768px) { body { padding: 1rem 1.5rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.5rem; } table { font-size: 0.875rem; } th, td { padding: 0.5rem 0.75rem; } }