/* =================================== Clean Scientific Programmer Theme Light & Dark Mode Support =================================== */ /* Light Mode (Default) */ :root { /* Colors - Enhanced for WCAG AA contrast compliance */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #1a1a1a; --text-secondary: #2d3748; /* Improved from #4a5568 for better contrast */ --text-muted: #4a5568; /* Improved from #718096 for better contrast */ --accent: #1e40af; /* Improved from #2563eb for better contrast */ --accent-hover: #1e3a8a; /* Darker for better contrast */ --border: #e2e8f0; --code-bg: #f1f5f9; --color-warning: #92400e; /* Improved from #b45309 for better contrast */ /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif; --font-serif: "Merriweather", "Georgia", "Times New Roman", serif; --font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Consolas", monospace; /* Fluid Typography Scale */ --step--1: clamp(0.8333rem, 0.8176rem + 0.0787vw, 0.884rem); --step-0: clamp(1rem, 0.9223rem + 0.3883vw, 1.125rem); --step-1: clamp(1.2rem, 1.0237rem + 0.8816vw, 1.5rem); --step-2: clamp(1.44rem, 1.1109rem + 1.6454vw, 2rem); --step-3: clamp(1.728rem, 1.1669rem + 2.8053vw, 2.5rem); --step-4: clamp(2.074rem, 1.1654rem + 4.5412vw, 3rem); /* --step--1: clamp(0.8333rem, 0.8176rem + 0.0787vw, 0.884rem); --step-0: clamp(1rem, 0.9223rem + 0.3883vw, 1.25rem); --step-1: clamp(1.2rem, 1.0237rem + 0.8816vw, 1.7675rem); --step-2: clamp(1.44rem, 1.1109rem + 1.6454vw, 2.4992rem); --step-3: clamp(1.728rem, 1.1669rem + 2.8053vw, 3.5339rem); --step-4: clamp(2.0736rem, 1.1654rem + 4.5412vw, 4.997rem); --step-5: clamp(2.4883rem, 1.0662rem + 7.1105vw, 7.0657rem); --step-6: clamp(2.986rem, 0.8097rem + 10.8815vw, 9.9909rem); --step-7: clamp(3.5832rem, 0.3074rem + 16.379vw, 14.1272rem); --step-8: clamp(4.2998rem, -0.5704rem + 24.3511vw, 19.9759rem); */ /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; /* Layout */ --max-width: 720px; --content-padding: var(--space-md); /* Transitions */ --transition: all 0.3s ease; } /* Dark Mode - Enhanced for WCAG AA contrast compliance */ @media (prefers-color-scheme: dark) { :root { --bg-primary: #0f172a; --bg-secondary: #1e293b; --text-primary: #f1f5f9; --text-secondary: #e2e8f0; /* Improved from #cbd5e1 for better contrast */ --text-muted: #cbd5e1; /* Improved from #94a3b8 for better contrast */ --accent: #60a5fa; /* Improved from #3b82f6 for better contrast */ --accent-hover: #93c5fd; /* Lighter for better contrast on dark bg */ --border: #334155; --code-bg: #1e293b; } } /* Manual dark mode toggle (add class to or ) - Enhanced for WCAG AA */ .dark-mode { --bg-primary: #0f172a; --bg-secondary: #1e293b; --text-primary: #f1f5f9; --text-secondary: #e2e8f0; /* Improved from #cbd5e1 for better contrast */ --text-muted: #cbd5e1; /* Improved from #94a3b8 for better contrast */ --accent: #60a5fa; /* Improved from #3b82f6 for better contrast */ --accent-hover: #93c5fd; /* Lighter for better contrast on dark bg */ --border: #334155; --code-bg: #1e293b; } /* =================================== Base Styles =================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.7; color: var(--text-primary); background-color: var(--bg-primary); display: flex; flex-direction: column; min-height: 100vh; transition: var(--transition); } /* =================================== Accessibility =================================== */ /* Skip to main content link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent); color: white; padding: var(--space-sm); text-decoration: none; font-weight: 600; z-index: 100; border-radius: 0 0 4px 0; } .skip-link:focus { top: 0; outline: 2px solid var(--accent-hover); outline-offset: 2px; } main { flex: 1; padding: var(--space-lg) 0; } main:focus { outline: none; } /* =================================== Typography =================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--text-primary); margin-bottom: var(--space-sm); margin-top: var(--space-lg); } h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } h1 { font-size: var(--step-4); letter-spacing: -0.02em; } h2 { font-size: var(--step-3); letter-spacing: -0.01em; } h3 { font-size: var(--step-2); } h4, h5, h6 { font-size: var(--step-1); } p { margin-bottom: var(--space-md); color: var(--text-secondary); } a { color: var(--accent); text-decoration: underline; /* Changed from none to underline for accessibility */ text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--transition); } a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; } a:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } strong, b { font-weight: 600; color: var(--text-primary); } em, i { font-style: italic; } small { font-size: var(--step--1); color: var(--text-muted); } /* =================================== Layout & Container =================================== */ #main-content { padding-left: var(--content-padding); padding-right: var(--content-padding); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--content-padding); width: 100%; } /* =================================== Code & Pre =================================== */ code { font-family: var(--font-mono); font-size: 0.9em; background-color: var(--code-bg); padding: 0.2em 0.4em; border-radius: 3px; color: var(--text-primary); } pre { font-family: var(--font-mono); font-size: 0.9em; background-color: var(--code-bg); padding: var(--space-md); border-radius: 6px; overflow-x: auto; margin-bottom: var(--space-md); border: 1px solid var(--border); } pre code { background-color: transparent; padding: 0; } /* =================================== Lists =================================== */ ul, ol { margin-bottom: var(--space-md); padding-left: var(--space-lg); color: var(--text-secondary); } li { margin-bottom: var(--space-xs); } li::marker { color: var(--accent); } /* =================================== Images & Media =================================== */ img { max-width: 100%; height: auto; display: block; border-radius: 6px; } figure { margin: var(--space-lg) 0; } figcaption { font-size: var(--step--1); color: var(--text-muted); text-align: center; margin-top: var(--space-xs); } /* =================================== Horizontal Rule =================================== */ hr { border: none; border-top: 1px solid var(--border); margin: var(--space-xl) 0; } /* =================================== Blockquote =================================== */ blockquote { border-left: 4px solid var(--accent); padding-left: var(--space-md); margin: var(--space-lg) 0; font-style: italic; color: var(--text-secondary); } /* =================================== Tables =================================== */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); } th, td { padding: var(--space-sm); text-align: left; border-bottom: 1px solid var(--border); } th { font-weight: 600; color: var(--text-primary); background-color: var(--bg-secondary); } /* =================================== Utilities =================================== */ .text-center { text-align: center; } .text-muted { color: var(--text-muted); } /* Screen reader only - for accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } /* =================================== Responsive Design =================================== */ @media (max-width: 768px) { :root { --content-padding: var(--space-sm); } main { padding: var(--space-md) 0; } h1 { font-size: var(--step-3); } h2 { font-size: var(--step-2); } } .btn-primary, .btn-secondary { flex: 1; padding: var(--space-xs) var(--space-sm); text-align: center; font-size: var(--step--2); font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: block; letter-spacing: 0.02em; border-radius: 4px; } .btn-primary { background: var(--text-primary); color: var(--bg-primary); border: 2px solid var(--text-primary); } .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: white; } .btn-primary:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--text-primary); } .btn-secondary:hover { background: var(--bg-secondary); border-color: var(--accent); color: var(--accent); } .btn-secondary:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .warning { background-color: var(--bg-secondary); border: 1px solid var(--color-warning); color: var(--color-warning); padding: var(--space-sm); border-radius: 4px; margin-bottom: var(--space-md); } /* =================================== Blog/Insights Styles =================================== */ .blog { max-width: 800px; margin: 0 auto; } .blog h1 { margin-bottom: var(--space-lg); } .posts-list { display: flex; flex-direction: column; gap: var(--space-lg); } .post-preview { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border); } .post-preview:last-child { border-bottom: none; } .post-preview h2 { margin-bottom: var(--space-xs); } .post-preview h2 a { color: var(--text-primary); text-decoration: none; } .post-preview h2 a:hover { color: var(--accent); } .post-meta { color: var(--text-muted); font-size: var(--step--1); margin-bottom: var(--space-sm); } .post-description { color: var(--text-secondary); margin-bottom: var(--space-sm); } .read-more { color: var(--accent); text-decoration: none; font-weight: 500; } .read-more:hover { color: var(--accent-hover); } /* Individual Post Page */ .post { max-width: 800px; margin: 0 auto; } .post-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); } .post-header h1 { margin-bottom: var(--space-sm); } .post-content { line-height: 1.7; } .post-content h1, .post-content h2, .post-content h3 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); } .post-content h1 { font-size: var(--step-3); } .post-content h2 { font-size: var(--step-2); } .post-content h3 { font-size: var(--step-1); } .post-content p { margin-bottom: var(--space-md); } .post-content ul, .post-content ol { margin-bottom: var(--space-md); padding-left: var(--space-lg); } .post-content li { margin-bottom: var(--space-xs); } .post-content code { background: var(--code-bg); padding: 0.2em 0.4em; border-radius: 3px; font-family: var(--font-mono); font-size: 0.9em; } .post-content pre { background: var(--code-bg); padding: var(--space-md); border-radius: 4px; overflow-x: auto; margin-bottom: var(--space-md); } .post-content pre code { background: none; padding: 0; } .post-footer { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border); } .post-footer a { color: var(--accent); text-decoration: none; } .post-footer a:hover { color: var(--accent-hover); } .post-image { max-width: 400px; margin: var(--space-lg) auto; text-align: center; } .post-image img { width: 100%; height: auto; border-radius: 4px; opacity: 0.9; } .image-caption { font-size: var(--step--1); color: var(--text-muted); font-style: italic; margin-top: var(--space-xs); margin-bottom: 0; } .ai-disclosure { font-size: 0.85em; color: #666; font-style: italic; margin-bottom: 1rem; } /* =================================== Print Styles - Simple & Automatic =================================== */ @media print { /* Force light theme */ * { background: white !important; color: black !important; } /* Hide navigation elements */ /* Keep content visible */ .ai-disclosure, .image-caption { display: block !important; } /* Remove shadows and transitions */ * { box-shadow: none !important; text-shadow: none !important; } /* Smart page breaks */ h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } img, pre, blockquote, table { page-break-inside: avoid; } } /* =================================== News Post Layout (Clean & Stylish) =================================== */ .news-post { max-width: 800px; margin: 0 auto; } .news-post .post-header { text-align: center; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 4px double var(--border); } .news-post h1 { font-family: var(--font-serif); font-weight: 900; font-size: var(--step-4); line-height: 1.1; margin-bottom: var(--space-md); letter-spacing: -0.02em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; } .news-post .post-meta { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); display: inline-block; padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .news-post .intro { font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-muted); background-color: var(--bg-secondary); padding: var(--space-md); border-radius: 4px; margin-bottom: var(--space-xl); border-left: 3px solid var(--color-warning); } .news-post .post-content { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.8; color: var(--text-primary); } /* Style the generated markdown headers within the news post */ .news-post .post-content h2 { font-family: var(--font-sans); font-weight: 800; font-size: var(--step-2); margin-top: var(--space-2xl); margin-bottom: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--text-primary); /* text-transform: uppercase; */ letter-spacing: 0.05em; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; } .news-post .post-content p { margin-bottom: var(--space-lg); text-align: justify; hyphens: auto; } /* Drop cap for the first paragraph of each section? Hard to target specifically without more markup, but we can try targeting the first p after an h2 */ .news-post .post-content h2 + p::first-letter { float: left; font-size: 3.5em; line-height: 0.85; padding-right: 0.1em; padding-top: 0.05em; font-weight: 700; color: var(--text-primary); } .news-post .post-content a { text-decoration: none; border-bottom: 1px solid var(--accent); color: var(--text-primary); font-weight: 600; } .news-post .post-content a:hover { background-color: var(--accent); color: white; border-bottom: none; } /* Separator between articles */ .news-post .post-content hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin: var(--space-2xl) 0; } /* Dark mode adjustments for news */ @media (prefers-color-scheme: dark) { .news-post .post-content hr { background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); } } /* Legal Disclaimer in News Posts */ .legal-disclaimer { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.5; font-style: italic; }