/* * Modern CSS Foundation - No Framework * Uses cutting-edge CSS features for brianln.ai */ /* ============================================ FONTS ============================================ */ /* Fonts loaded via Google Fonts in for better performance and caching */ /* ============================================ CSS RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { height: 100%; color-scheme: light dark; hanging-punctuation: first last; } body { min-height: 100%; display: flex; flex-direction: column; line-height: 1.5; -webkit-font-smoothing: antialiased; } main { flex: 1; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ============================================ DESIGN TOKENS ============================================ */ :root { /* Typography */ --font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-size-base: 1rem; --line-height: 1.6; /* Spacing Scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Container */ --container-max: 768px; --container-padding: var(--space-lg); /* Border */ --border-radius: 0.375rem; /* Light Theme (Default) */ --color-bg: #ffffff; --color-text: #0a0a0a; --color-muted: #666666; --color-border: #e5e5e5; --color-card-bg: #fafafa; --color-highlight-bg: #fdd387; --color-highlight-text: #4c061d; } /* Dark Theme */ @media (prefers-color-scheme: dark) { :root { --color-bg: #1e2a31; --color-text: #ededed; --color-muted: #cae5ff; --color-border: #2d3e47; --color-card-bg: #15202a; --color-highlight-bg: #fdd387; --color-highlight-text: #15202a; } } /* Force Light Theme */ [data-theme="light"] { color-scheme: light; --color-bg: #ffffff; --color-text: #1a1a1a; --color-muted: #666666; --color-border: #e5e5e5; --color-card-bg: #fafafa; --color-highlight-bg: #fdd387; --color-highlight-text: #4c061d; } /* Force Dark Theme */ [data-theme="dark"] { color-scheme: dark; --color-bg: #1e2a31; --color-text: #ededed; --color-muted: #cae5ff; --color-border: #2d3e47; --color-card-bg: #15202a; --color-highlight-bg: #fdd387; --color-highlight-text: #15202a; } /* Warm Light Variant */ [data-theme="light"][data-variant="warm"] { --color-bg: #faf8f5; --color-text: #2c2520; --color-muted: #6b6460; --color-border: #e6e0d8; --color-card-bg: #f5f2ed; } /* Cream Light Variant */ [data-theme="light"][data-variant="cream"] { --color-bg: #fcfaf7; --color-text: #3a3531; --color-muted: #78716c; --color-border: #ebe7e0; --color-card-bg: #f7f5f1; } /* Warm Dark Variant */ [data-theme="dark"][data-variant="warm"] { --color-bg: #1c1816; --color-text: #e8e4df; --color-muted: #b0a99f; --color-border: #3d3834; --color-card-bg: #262320; } /* Espresso Dark Variant */ [data-theme="dark"][data-variant="espresso"] { --color-bg: #1a1614; --color-text: #ebe6e0; --color-muted: #b8aea3; --color-border: #3a342f; --color-card-bg: #241f1d; } /* Soft Dark Variant */ [data-theme="dark"][data-variant="soft"] { --color-bg: #1a1a1a; --color-text: #e5e5e5; --color-muted: #a3a3a3; --color-border: #404040; --color-card-bg: #242424; } /* Cool Dark Variant */ [data-theme="dark"][data-variant="cool"] { --color-bg: #0f172a; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-border: #334155; --color-card-bg: #1e293b; } /* Accent Colors - Default burgundy for light, cream for dark */ :root { --color-accent: #4c061d; } @media (prefers-color-scheme: dark) { :root { --color-accent: #fdd387; } } [data-theme="light"] { --color-accent: #4c061d; } [data-theme="dark"] { --color-accent: #fdd387; } /* Alternative Accent Palettes (optional) */ [data-palette="blue"] { --color-accent: #0066cc; } [data-palette="teal"] { --color-accent: #0d9488; } [data-palette="purple"] { --color-accent: #7c3aed; } [data-palette="amber"] { --color-accent: #d97706; } [data-palette="slate"] { --color-accent: #475569; } [data-palette="green"] { --color-accent: #059669; } [data-palette="rose"] { --color-accent: #e11d48; } [data-palette="burgundy"] { --color-accent: #4c061d; } /* ============================================ BASE STYLES ============================================ */ body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); background-color: var(--color-bg); color: var(--color-text); } /* Container */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } /* Typography */ h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 700; margin-top: 2em; margin-bottom: 0.75em; } h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; margin-top: 2.5em; } h3 { font-size: 1.125rem; } /* Paragraphs and spacing */ p { margin-bottom: 1.5em; line-height: 1.7; } /* Blockquotes */ blockquote { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border-left: 4px solid var(--color-accent); background: var(--color-card-bg); font-style: italic; font-size: 1.05rem; color: #0a0a0a; } blockquote p { margin-bottom: 0.5em; } blockquote p:last-child { margin-bottom: 0; } /* Attribution in blockquotes (lists or em/cite within blockquotes) */ blockquote ul, blockquote ol, blockquote cite, blockquote footer { text-align: right; font-size: 0.9em; margin-top: 0.75em; font-style: normal; list-style: none; padding-left: 0; } blockquote ul li, blockquote ol li { margin-bottom: 0; } /* Note/Aside callouts - for commentary and observations */ aside.note { margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border-left: 3px solid #3b82f6; /* Blue accent instead of main accent */ background: rgba(59, 130, 246, 0.05); font-style: normal; /* Not italic like blockquotes */ color: var(--color-text); font-size: 0.95rem; border-radius: 0 var(--border-radius) var(--border-radius) 0; } aside.note p { margin-bottom: 0.5em; line-height: 1.6; } aside.note p:last-child { margin-bottom: 0; } aside.note ul { margin-top: 0.5em; margin-bottom: 0.5em; } aside.note li { margin-bottom: 0.25em; font-size: 0.9em; } aside.note strong { color: #3b82f6; font-size: 1em; } aside.note a { word-break: break-word; } /* Dark mode adjustments for notes */ @media (prefers-color-scheme: dark) { aside.note { background: rgba(59, 130, 246, 0.1); border-left-color: #60a5fa; } aside.note strong { color: #60a5fa; } } [data-theme="dark"] aside.note { background: rgba(59, 130, 246, 0.1); border-left-color: #60a5fa; } [data-theme="dark"] aside.note strong { color: #60a5fa; } /* Endnote reference markers */ .endnote-ref { display: inline-block; vertical-align: super; font-size: 0.75em; margin-left: 0.125em; color: var(--color-accent); text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .endnote-ref:hover { color: var(--color-link-hover); text-decoration: underline; } /* Endnotes section */ .endnotes { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 2px solid var(--color-border); max-width: 42rem; } .endnotes h2 { font-size: 1.5rem; margin-bottom: var(--space-lg); color: var(--color-text); } .endnotes ol { counter-reset: endnote; list-style: none; padding-left: 0; } /* Only apply custom numbering to direct children of the ol */ .endnotes > ol > li { counter-increment: endnote; margin-bottom: var(--space-lg); padding-left: 2rem; position: relative; font-size: 0.9rem; line-height: 1.6; } .endnotes > ol > li::before { content: counter(endnote); position: absolute; left: 0; top: 0; font-weight: 600; color: var(--color-accent); font-size: 0.85em; } .endnotes p { margin-bottom: 0.75em; } .endnotes p:last-child { margin-bottom: 0; } /* Nested lists should use normal list styling */ .endnotes ul { margin-top: 0.5em; margin-bottom: 0.5em; list-style-type: disc; list-style-position: outside; padding-left: 1.5em; } .endnotes ul li { margin-bottom: 0.25em; padding-left: 0; font-size: inherit; } .endnotes ul li::marker { font-family: system-ui, sans-serif; color: var(--color-text); } .endnote-backlink { display: inline-block; margin-left: 0.5em; color: var(--color-accent); text-decoration: none; font-size: 1.2em; transition: color 0.2s ease; } .endnote-backlink:hover { color: var(--color-link-hover); } /* Lists */ ul, ol { margin-top: 1.5em; margin-bottom: 1.5em; padding-left: 1.5em; } li { margin-bottom: 0.5em; line-height: 1.7; } li:last-child { margin-bottom: 0; } /* Italics and emphasis */ em, i { font-style: italic; color: var(--color-muted); } /* Images */ img { margin: var(--space-xl) 0; border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Figure and figcaption - semantic image captions */ figure { margin: var(--space-xl) 0; } figure img { margin: 0; display: block; width: 100%; height: auto; } figcaption { text-align: center; font-size: 0.875rem; margin-top: var(--space-sm); color: var(--color-muted); font-style: italic; } /* Legacy support: Image with caption (img followed by em or paragraph with em) */ img + p em, img + em { display: block; text-align: center; font-size: 0.875rem; margin-top: calc(-1 * var(--space-lg)); margin-bottom: var(--space-xl); color: var(--color-muted); } /* Links */ a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Buttons */ button, [role="button"] { background: var(--color-accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); cursor: pointer; font-weight: 600; } button:hover { opacity: 0.9; } /* Header & Nav */ header { border-bottom: 1px solid var(--color-border); } nav { display: flex !important; justify-content: space-between; align-items: center; padding-block: 0.5rem; padding-inline: var(--container-padding) !important; position: relative; max-width: var(--container-max); margin-inline: auto; } nav > a.logo { display: flex; align-items: center; gap: var(--space-sm); font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--color-text); /* Normal text color */ background: none; border: none; padding: 0; } .logo-icon { display: block; height: 3rem; width: auto; flex-shrink: 0; color: #4c061d; /* Burgundy in light mode */ } /* Logo icon color in dark mode */ @media (prefers-color-scheme: dark) { .logo-icon { color: #fdd387; /* Warm amber in dark mode */ } } [data-theme="dark"] .logo-icon { color: #fdd387; /* Warm amber in dark mode */ } .nav-wrapper { display: flex; align-items: center; gap: var(--space-md); position: relative; } /* Hamburger menu button - always visible */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; font-size: 1.5rem; font-weight: 300; cursor: pointer; line-height: 1; color: var(--color-text); opacity: 0.8; transform: translateY(-0.125rem); } .nav-toggle:hover { opacity: 0.7; } /* Reset list styles */ nav ul { list-style: none; padding: 0 !important; margin: 0 !important; } nav ul li { margin: 0 !important; } /* Primary navigation - hidden on small mobile, horizontal on larger */ .primary-nav { display: none; } @media (min-width: 480px) { .primary-nav { display: flex; gap: var(--space-md); align-items: center; } .primary-nav li a { color: var(--color-text); text-decoration: none; font-size: 1.125rem; padding-bottom: 0.25rem; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; } .primary-nav li a:hover { border-bottom-color: var(--color-muted); } .primary-nav li a.active { color: var(--color-accent); border-bottom-color: var(--color-accent); } } /* Dropdown menu - always available via hamburger */ .dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); margin-top: 0.5rem; display: none !important; min-width: 200px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 100; } .dropdown-menu.nav-open { display: block !important; } .dropdown-menu li { display: block; border-bottom: 1px solid var(--color-border); } .dropdown-menu li:last-child { border-bottom: none; } .dropdown-menu li a, .dropdown-menu li button { display: block; padding: var(--space-md); width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: inherit; color: inherit; } .dropdown-menu li a:hover, .dropdown-menu li button:hover { background: var(--color-card-bg); text-decoration: none; } .dropdown-menu li #theme-toggle { border: none; } .dropdown-menu li #theme-toggle:hover { background: var(--color-card-bg); } /* Mobile-only items - hidden when primary nav is visible */ @media (min-width: 480px) { .dropdown-menu li.mobile-only { display: none; } } #theme-toggle .theme-label { margin-left: 0.5rem; } /* Main Content */ main { margin-block: var(--space-lg); } /* Thinking List Header */ .thinking-header { margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-border); } .thinking-header h1 { margin-top: 0; margin-bottom: 0; } .thinking-subtitle { font-size: 1.25rem; color: var(--color-text); margin-bottom: 0; font-weight: 500; font-style: normal; } .thinking-indicator { display: inline-block; margin-left: 0.5rem; color: var(--color-muted); font-weight: 300; width: 2em; text-align: left; } .thinking-indicator::after { content: ''; animation: thinking-dots 2s steps(4, end) infinite; } @keyframes thinking-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* Articles - Post Listing */ .post-list { max-width: 48rem; margin: 0 auto; } article { margin-bottom: var(--space-2xl); padding-bottom: 0; } article:not(:last-child) { border-bottom: none; } article .article-link { display: block; text-decoration: none; color: inherit; padding: var(--space-md); margin: calc(-1 * var(--space-md)); border-radius: var(--border-radius); transition: background-color 0.2s ease, transform 0.2s ease; } article .article-link:hover { background-color: var(--color-card-bg); transform: translateX(0.25rem); } article h3 { font-size: 1.5rem; margin-top: 0; margin-bottom: var(--space-sm); line-height: 1.3; color: var(--color-text); transition: color 0.2s ease; } article .article-link:hover h3 { color: var(--color-accent); } article .article-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); flex-wrap: wrap; } article time { display: inline-block; color: var(--color-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } article .article-keywords { display: flex; gap: var(--space-xs); flex-wrap: wrap; } article .keyword { display: inline-block; padding: 0.125rem 0.5rem; background: var(--color-highlight-bg); color: var(--color-highlight-text); font-size: 0.75rem; border-radius: calc(var(--border-radius) / 2); font-weight: 500; text-transform: lowercase; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; } article .keyword:hover { opacity: 0.8; transform: scale(1.05); } article .keyword.active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } article p { color: var(--color-muted); margin-top: var(--space-sm); margin-bottom: 0; line-height: 1.6; } /* Sidebar/Aside */ aside { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--space-lg); } aside h2 { font-size: 1rem; margin-bottom: var(--space-sm); } aside p { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 0.75rem; } /* Footer */ footer { margin-top: var(--space-xl); padding-block: var(--space-lg); text-align: center; } footer p { margin-block: var(--space-xs); } /* Horizontal Rule */ hr { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-lg); } /* Time Element */ time { display: block; } /* ============================================ UTILITIES ============================================ */ .text-muted { color: var(--color-muted); } .text-small { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } /* Grid Layouts */ .grid-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-xl); align-items: start; } @media (max-width: 768px) { .grid-sidebar { grid-template-columns: 1fr; } } /* ============================================ POST LAYOUT ============================================ */ .post { max-width: 100%; } .post-header { max-width: 42rem; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .post-header h1 { margin-top: 0; margin-bottom: var(--space-sm); font-size: 2rem; line-height: 1.2; } .post-header time { display: block; font-size: 0.875rem; color: var(--color-muted); font-weight: 400; } /* Post content - centered with max-width */ .post-content { margin-bottom: var(--space-2xl); max-width: 42rem; } /* Endnote reference markers */ .endnote-ref { display: inline-block; vertical-align: super; font-size: 0.75em; margin-left: 0.125em; color: var(--color-accent); text-decoration: none; font-weight: 600; } .endnote-ref:hover { text-decoration: underline; } .post-links { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); font-size: 0.9rem; } .post-links a { color: var(--color-muted); text-decoration: none; } .post-links a:hover { color: var(--color-accent); text-decoration: underline; } @media (max-width: 480px) { .post-links { flex-direction: column; align-items: flex-start; } }