/*------------------------------ CarsonAlworth.com — Styles Monochrome editorial theme + Light/Dark mode tokens and toggle styles -------------------------------*/ /* 1) Modern Reset */ *, *::before, *::after { box-sizing: border-box; } html:focus-within { scroll-behavior: smooth; } html, body { height: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; } img, picture, svg, video, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* 2) Theme Tokens */ :root { /* Base palette (Light) */ --bg: #ffffff; --surface: #fafafa; --surface-2: #f4f4f4; --text: #111111; --text-muted: #5f5f5f; --text-soft: #7a7a7a; --text-lead: #202020; --line: #e8e8e8; --line-strong: #d6d6d6; --accent: #000000; --accent-contrast: #ffffff; /* UI chrome */ --header-blur-bg: rgba(255,255,255,0.7); --header-border: rgba(0,0,0,0.08); --radius-xs: 6px; --radius-sm: 10px; --radius: 12px; --radius-lg: 16px; --shadow-1: 0 1px 1px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); --shadow-2: 0 1px 2px rgba(0,0,0,0.06), 0 15px 40px rgba(0,0,0,0.10); --container: 72rem; --gutter: 1.25rem; --gutter-lg: 2rem; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --fs-hero: clamp(2rem, 1.2rem + 3vw, 3.25rem); --fs-h2: clamp(1.5rem, 1rem + 1.8vw, 2rem); --fs-h3: clamp(1.125rem, 1rem + 0.9vw, 1.375rem); --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --fs-small: 0.9375rem; --lh-tight: 1.15; --lh-title: 1.25; --lh-copy: 1.65; --underline-thickness: 1px; --underline-offset: 2px; --section-pad: clamp(3.5rem, 6vw, 6rem); } /* Auto dark scheme (OS preference) */ @media (prefers-color-scheme: dark) { :root { --bg: #0e0e0e; --surface: #151515; --surface-2: #1c1c1c; --text: #f1f1f1; --text-muted: #b9b9b9; --text-soft: #a6a6a6; --text-lead: #dfdfdf; --line: #262626; --line-strong: #333333; --accent: #ffffff; --accent-contrast: #000000; --header-blur-bg: rgba(0,0,0,0.6); --header-border: rgba(255,255,255,0.08); --shadow-1: 0 1px 1px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.45); --shadow-2: 0 1px 2px rgba(0,0,0,0.25), 0 15px 40px rgba(0,0,0,0.55); } html { color-scheme: dark; } } /* Manual override (JS sets data-theme on ) */ :root[data-theme="light"] { --bg: #ffffff; --surface: #fafafa; --surface-2: #f4f4f4; --text: #111111; --text-muted: #5f5f5f; --text-soft: #7a7a7a; --text-lead: #202020; --line: #e8e8e8; --line-strong: #d6d6d6; --accent: #000000; --accent-contrast: #ffffff; --header-blur-bg: rgba(255,255,255,0.7); --header-border: rgba(0,0,0,0.08); --shadow-1: 0 1px 1px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); --shadow-2: 0 1px 2px rgba(0,0,0,0.06), 0 15px 40px rgba(0,0,0,0.10); } html[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { --bg: #0e0e0e; --surface: #151515; --surface-2: #1c1c1c; --text: #f1f1f1; --text-muted: #b9b9b9; --text-soft: #a6a6a6; --text-lead: #dfdfdf; --line: #262626; --line-strong: #333333; --accent: #ffffff; --accent-contrast: #000000; --header-blur-bg: rgba(0,0,0,0.6); --header-border: rgba(255,255,255,0.08); --shadow-1: 0 1px 1px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.45); --shadow-2: 0 1px 2px rgba(0,0,0,0.25), 0 15px 40px rgba(0,0,0,0.55); } html[data-theme="dark"] { color-scheme: dark; } /* 3) Base */ html { color-scheme: light; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-copy); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .no-js .nav-toggle { display: none !important; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 2000; } .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 0.75rem; background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-xs); } /* 4) Typography */ h1, h2, h3, h4 { color: var(--text); font-weight: 700; line-height: var(--lh-title); letter-spacing: -0.01em; } h1 { font-size: var(--fs-hero); font-family: var(--font-serif); } h2 { font-size: var(--fs-h2); font-family: var(--font-serif); } h3 { font-size: var(--fs-h3); font-weight: 600; } p { color: var(--text); } .lead { font-size: clamp(1.0625rem, 1rem + 0.7vw, 1.375rem); color: var(--text-lead); } small, .small { font-size: var(--fs-small); color: var(--text-soft); } /* Subhead under section titles */ .subhead { color: var(--text-muted); margin-top: 0.375rem; } /* Editorial underline for links */ .link-underline { position: relative; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% var(--underline-thickness); padding-bottom: var(--underline-offset); transition: background-size 200ms ease; } a.link-underline:hover, a.link-underline:focus { background-size: 100% var(--underline-thickness); } /* Pills */ .pill { display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.8125rem; line-height: 1; color: var(--text); background: var(--surface); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; line-height: 1.1; transition: transform 120ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease; will-change: transform; } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .btn-solid:hover, .btn-solid:focus { opacity: 0.9; } .btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-outline:hover, .btn-outline:focus { background: var(--accent); color: var(--accent-contrast); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--text); } /* Icon-only theme toggle button */ .theme-toggle { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--line-strong); display: inline-grid; place-items: center; background: var(--surface); color: var(--text); transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease; } .theme-toggle:hover { background: var(--surface-2); } .theme-toggle:active { transform: translateY(1px); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Optional emoji icon via CSS; JS can replace with SVG if desired */ .theme-toggle::before { content: "☾"; font-size: 1rem; line-height: 1; } @media (prefers-color-scheme: dark) { .theme-toggle::before { content: "☀"; } } html[data-theme="light"] .theme-toggle::before { content: "☾"; } html[data-theme="dark"] .theme-toggle::before { content: "☀"; } /* 5) Header and Navigation */ .site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); background: var(--header-blur-bg); border-bottom: 1px solid var(--header-border); } .nav-container { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gutter); padding-block: 0.75rem; } .brand { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 700; } .brand .logo { width: 2.25rem; height: 2.25rem; border-radius: 8px; border: 1px solid var(--line-strong); display: inline-grid; place-items: center; font-weight: 800; letter-spacing: 0.5px; background: var(--bg); } .wordmark { letter-spacing: 0.2px; } .primary-nav { position: relative; } .primary-nav .menu { display: flex; align-items: center; gap: 1.25rem; } .primary-nav .menu li { list-style: none; } .primary-nav .menu-cta a.btn { padding-block: 0.55rem; } /* Active link (scrollspy) */ .primary-nav a.active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .nav-toggle { display: none; width: 2.25rem; height: 2.25rem; border-radius: 8px; border: 1px solid var(--line-strong); align-items: center; justify-content: center; } .nav-toggle .bar { display: block; width: 18px; height: 2px; background: var(--text); margin: 2px auto; border-radius: 1px; position: relative; } .nav-toggle .bar:nth-child(1) { top: -3px; } .nav-toggle .bar:nth-child(3) { top: 3px; } /* Mobile nav */ @media (max-width: 960px) { .nav-container { grid-template-columns: 1fr auto; } .nav-toggle { display: inline-flex; } .primary-nav .menu { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 0.5rem; display: none; flex-direction: column; min-width: 14rem; } .primary-nav.open .menu { display: flex; } .primary-nav .menu li a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-xs); } .primary-nav .menu li a:hover { background: var(--surface-2); } .no-js .primary-nav .menu { display: flex; position: static; flex-direction: row; box-shadow: none; border: 0; padding: 0; } .no-js .nav-toggle { display: none; } } /* 6) Sections */ .section { padding-block: var(--section-pad); background: var(--bg); } .section .section-header { margin-bottom: clamp(1.25rem, 1rem + 1.4vw, 2rem); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .section .section-header h2 { font-weight: 800; } .section .section-header .section-cta { font-weight: 600; color: var(--text); } /* 7) Hero */ .hero { position: relative; min-height: 92svh; display: grid; place-items: center; color: #fff; isolation: isolate; padding-top: clamp(5rem, 6vw, 7rem); /* space for sticky header */ } .hero .hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0d0d0d; } /* Canvas gets full-bleed, blurred slightly for softness */ #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: grayscale(1) contrast(1.1) brightness(0.8); } /* Animated black & white fallback (subtle moving gradients) */ .bw-fallback { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(900px 400px at 90% 30%, rgba(255,255,255,0.05), transparent 60%), radial-gradient(700px 500px at 40% 80%, rgba(255,255,255,0.04), transparent 60%), linear-gradient(180deg, #0b0b0b, #111); animation: bwFloat 18s ease-in-out infinite alternate; } @keyframes bwFloat { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 50% { background-position: 5% 2%, -3% 1%, 2% -3%, 0 0; } 100% { background-position: 8% 5%, -6% 3%, 4% -6%, 0 0; } } /* Grain overlay, subtle and light */ .grain-overlay { position: absolute; inset: -10%; pointer-events: none; opacity: 0.08; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.15) 0 2px, rgba(0,0,0,0) 2px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, rgba(0,0,0,0) 1px 3px); mix-blend-mode: overlay; animation: grainShift 1.5s steps(3) infinite; transform: translateZ(0); } @keyframes grainShift { 0% { transform: translate(0,0); } 25% { transform: translate(-1%, 1%); } 50% { transform: translate(1%, -1%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0,0); } } /* Hero layout */ .hero .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: clamp(2rem, 4vw, 4rem); } .hero .hero-copy h1 { color: #fff; } .hero .hero-copy .lead { color: #efefef; max-width: 38ch; } .hero .hero-ctas { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero .portrait { width: min(34vw, 560px); height: auto; filter: drop-shadow(0 18px 35px rgba(0,0,0,0.45)); animation: floatY 8s ease-in-out infinite alternate; } @keyframes floatY { from { transform: translateY(0px); } to { transform: translateY(-8px); } } /* Make buttons invert nicely on hero */ .hero .btn-outline { color: #fff; border-color: #fff; } .hero .btn-outline:hover { background: #fff; color: #000; } .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.2); } .hero a.link-underline { color: #fff; } /* Scroll hint */ .scroll-hint { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: #fff; opacity: 0.8; } @media (max-width: 1024px) { .hero .hero-inner { grid-template-columns: 1fr; text-align: left; } .hero .hero-copy { order: 1; } .hero .hero-portrait { order: 2; } .hero .portrait { width: min(65vw, 520px); margin-inline: auto; } } /* 8) Writing (Articles listing cards) */ .cards-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } .card.article { display: flex; flex-direction: column; gap: 0.625rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1rem; transition: border-color 150ms ease, transform 150ms ease, box-shadow 200ms ease; } .card.article:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); } .card.article .card-meta { display: flex; align-items: center; justify-content: space-between; color: var(--text-soft); font-size: 0.9rem; } .card.article h3 { font-weight: 700; letter-spacing: -0.01em; } .card.article p { color: var(--text); } .card.article .read-more { margin-top: auto; font-weight: 600; } @media (max-width: 1024px) { .cards-articles { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .cards-articles { grid-template-columns: 1fr; } } /* 9) Services */ .service-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.75rem, 2vw, 1rem); } .service-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; transition: background-color 200ms ease, border-color 200ms ease, transform 150ms ease; } .service-card:hover { background: var(--surface-2); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); } .service-card .icon { width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 10px; display: inline-grid; place-items: center; background: var(--surface-2); } .service-card h3 { margin-top: 0.25rem; } .service-card p { color: var(--text); } .service-card a { margin-top: auto; font-weight: 600; } @media (max-width: 1200px) { .service-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .service-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .service-grid { grid-template-columns: 1fr; } } /* 10) Contact */ .contact .contact-form { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.25rem); background: var(--surface); box-shadow: var(--shadow-1); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .field { display: grid; gap: 0.35rem; } label { font-weight: 600; font-size: 0.95rem; color: var(--text); } input[type="text"], input[type="email"], textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); padding: 0.65rem 0.75rem; transition: border-color 150ms ease, box-shadow 150ms ease; outline: none; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-soft); } input:focus, textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); } .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .form-note { color: var(--text-soft); } .form-status { margin-top: 0.75rem; min-height: 1.25rem; color: var(--text); } /* Stack fields on small screens */ @media (max-width: 760px) { .form-row { grid-template-columns: 1fr; } } /* 11) Daily Quote */ .quote .quote-box { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.5rem); box-shadow: var(--shadow-1); } #quote-text { font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); line-height: 1.5; color: var(--text); } #quote-author { margin-top: 0.5rem; color: var(--text-muted); font-style: italic; } .quote .quote-controls { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } /* 12) Reviews Carousel */ .reviews .carousel { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; } .carousel-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-strong); display: inline-grid; place-items: center; background: var(--surface); color: var(--text); transition: background-color 150ms ease, border-color 150ms ease; } .carousel-btn:hover { background: var(--surface-2); border-color: var(--line-strong); } .carousel-track { overflow: auto; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0.75rem; scroll-snap-type: x mandatory; scroll-padding: 0; /* was 1rem; prevents right-edge clipping */ border-radius: var(--radius); } .carousel-track::-webkit-scrollbar { height: 10px; } .carousel-track::-webkit-scrollbar-track { background: transparent; } .carousel-track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; } .testimonial { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-1); display: grid; gap: 0.5rem; } .testimonial .stars { color: var(--text); letter-spacing: 2px; } .testimonial p { color: var(--text); } .testimonial .meta { color: var(--text-soft); font-size: 0.95rem; } /* 13) Publications */ .pub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 2vw, 1rem); } .pub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; transition: transform 150ms ease, border-color 150ms ease, box-shadow 200ms ease; } .pub-card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); } .pub-card h3 { font-weight: 700; } .pub-card p { color: var(--text); } .pub-card .pub-meta { color: var(--text-soft); display: flex; gap: 0.5rem; margin-top: 0.5rem; } @media (max-width: 1200px) { .pub-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .pub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pub-grid { grid-template-columns: 1fr; } } /* 14) Footer */ .site-footer { background: #0f0f0f; color: #f1f1f1; margin-top: var(--section-pad); padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid rgba(255,255,255,0.08); } .footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; align-items: start; } .footer-brand .logo { width: 2rem; height: 2rem; border-radius: 8px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,0.4); margin-bottom: 0.5rem; } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .footer-nav a { color: #fff; } .footer-nav a:hover { opacity: 0.85; } .footer-meta { display: grid; gap: 0.5rem; justify-items: end; } .footer-meta .social { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; } .footer-meta a { color: #fff; } .footer-meta small { color: #cfcfcf; } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; gap: 1.25rem; } .footer-meta { justify-items: start; } } /* 15) Reveal-on-scroll */ .reveal, [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 600ms cubic-bezier(.21, .61, .35, 1); will-change: opacity, transform; } .reveal.is-visible, [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="75"] { transition-delay: 75ms; } [data-reveal-delay="100"] { transition-delay: 100ms; } [data-reveal-delay="150"] { transition-delay: 150ms; } [data-reveal-delay="225"] { transition-delay: 225ms; } [data-reveal-delay="300"] { transition-delay: 300ms; } .no-js .reveal, .no-js [data-reveal] { opacity: 1; transform: none; } /* 16) Reduced motion */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } .hero .portrait, .bw-fallback, .grain-overlay, .scroll-hint, .reveal, [data-reveal] { animation: none !important; transition: none !important; } } /* 17) Utility helpers */ .text-center { text-align: center; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .hide { display: none !important; } /* 18) Blog and Article/Post styles */ /* Blog index hero: single-column layout and slightly shorter height */ #blog-hero.hero { min-height: 56svh; } #blog-hero .hero-inner { grid-template-columns: 1fr; } /* Article hero: single-column layout and shorter height */ #article-hero.hero { min-height: 46svh; } #article-hero .hero-inner { grid-template-columns: 1fr; } #article-hero .hero-ctas { margin-top: 0.75rem; } /* Article layout wrappers */ .post-wrap { padding-block: var(--section-pad); } .post { display: grid; gap: clamp(1rem, 2.5vw, 1.25rem); } .post-header { border-bottom: 1px solid var(--line); padding-bottom: 1rem; } .post-header h1 { margin-bottom: 0.35rem; } .post-dek { color: var(--text-muted); max-width: 60ch; } .post-meta { margin-top: 0.5rem; color: var(--text-soft); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; font-size: 0.95rem; } .post-meta .sep { opacity: 0.5; } /* Reading tools (Focus / Print) */ .post-header .reading-tools { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Content + TOC columns */ .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; } @media (max-width: 1024px) { .post-layout { grid-template-columns: 1fr; } } /* Table of Contents */ .post-toc { position: sticky; top: calc(64px + 1rem); /* header height + breathing room */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.75rem; max-height: calc(100svh - 8rem); overflow: auto; } .post-toc h2 { font-size: 1rem; margin-bottom: 0.25rem; } .post-toc nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; } .post-toc nav ul ul { margin-left: 0.75rem; border-left: 1px solid var(--line); padding-left: 0.75rem; margin-top: 0.25rem; } .post-toc a { color: var(--text); } .post-toc a:hover { text-decoration: underline; } /* Mobile TOC as details */ @media (max-width: 1024px) { .post-toc { position: static; max-height: none; } .post-toc details { border-radius: var(--radius); } .post-toc summary { cursor: pointer; list-style: none; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; } .post-toc summary::-webkit-details-marker { display: none; } .post-toc .toc-inner { margin-top: 0.5rem; } } /* Article content styles */ .post-content { max-width: 74ch; } .post-content > * { margin: 1.1em 0; } .post-content h2 { margin-top: 1.6em; } .post-content h3 { margin-top: 1.2em; } .post-content p { color: var(--text); } .post-content blockquote { margin: 1.2em 0; padding-left: 1rem; border-left: 3px solid var(--text); color: var(--text); font-family: var(--font-serif); font-size: 1.08em; } .post-content img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .post-content figure { margin: 1.2em 0; } .post-content figcaption { font-size: 0.95rem; color: var(--text-soft); margin-top: 0.35rem; text-align: center; } .post-content code { font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0.05em 0.35em; font-size: 0.95em; } .post-content pre { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem; overflow: auto; } .post-content pre code { border: 0; background: transparent; padding: 0; font-size: 0.95em; } .post-content hr { border: 0; height: 1px; background: var(--line); margin: 2rem 0; } .post-content .callout { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); padding: 0.85rem 1rem; } .post-content .callout strong { display: block; margin-bottom: 0.25rem; } /* Footnotes (structured by Python-Markdown footnotes extension) */ .post-content sup.footnote-ref { font-size: 0.8em; line-height: 0; } .post-content sup.footnote-ref a { text-decoration: none; border-bottom: 1px dotted var(--line-strong); } .post-content sup.footnote-ref a:hover, .post-content sup.footnote-ref a:focus { border-color: var(--text); } .post-content .footnotes, .post-content .footnote { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 0.75rem; font-size: 0.95em; color: var(--text); } .post-content .footnotes ol, .post-content .footnote ol { list-style: decimal; padding-left: 1.4rem; margin: 0.5rem 0 0 0; } .post-content .footnotes li, .post-content .footnote li { margin: 0.35rem 0; } .post-content .footnotes li > p, .post-content .footnote li > p { margin: 0.25rem 0; } .post-content .footnote-backref { margin-left: 0.35rem; text-decoration: none; font-size: 0.95em; opacity: 0.8; } .post-content .footnote-backref:hover, .post-content .footnote-backref:focus { opacity: 1; text-decoration: underline; } /* Article footer + navigation */ .post-footer { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; display: grid; gap: 0.5rem; } .post-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; } .post-share { color: var(--text-soft); } /* 19) Print (focused on articles) */ @media print { @page { margin: 18mm 16mm; } /* Hide chrome and non-essential UI */ .site-header, .site-footer, .hero-bg, #article-hero, .post-toc, .post-share, .post-nav, .scroll-hint, .reading-tools, .fn-popover { display: none !important; } body { color: #000; background: #fff; } /* Content width and clean images */ .post-wrap { padding-block: 0; } .post-content { max-width: none; } .post-content img, .post-content figure { break-inside: avoid; page-break-inside: avoid; } /* Ensure headings don't get stranded */ .post-content h2, .post-content h3 { break-after: avoid; page-break-after: avoid; } .post-content p, .post-content li { orphans: 3; widows: 3; } /* Footnotes block keeps together if possible */ .post-content .footnotes, .post-content .footnote { break-inside: avoid; page-break-inside: avoid; } /* Print the URL after external links */ .post-content a[href^="http"]:not(.footnote-backref)::after { content: " (" attr(href) ")"; font-size: 0.9em; } /* Show print disclaimer */ .print-disclaimer { display: block !important; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid #b9b9b9; color: #000; font-size: 0.95rem; } /* Subtle watermark — domain at very low opacity */ body::before { content: attr(data-domain); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 8rem; color: #000; opacity: 0.035; pointer-events: none; z-index: 0; white-space: nowrap; } } /* Print disclaimer is hidden on screen by default */ .print-disclaimer { display: none; color: var(--text-soft); border-bottom: 1px dashed var(--line); margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; } /* 20) Brand-first Home Updates */ /* Dispatch (merged Latest + Subscribe) */ #dispatch .dispatch-grid { display: grid; grid-template-columns: 1.6fr 1fr; /* essay larger, subscribe smaller */ gap: clamp(1rem, 2.5vw, 1.5rem); align-items: stretch; /* equal-height tiles */ } @media (max-width: 900px) { #dispatch .dispatch-grid { grid-template-columns: 1fr; } } /* Ensure both tiles stretch to same height */ #dispatch .dispatch-grid > .card.article, #dispatch .dispatch-grid > .subscribe-card { height: 100%; } /* Subscribe card look */ #dispatch .subscribe-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1rem; /* unify with article card: no default shadow, hover only */ box-shadow: none; display: flex; flex-direction: column; gap: 0.625rem; transition: border-color 150ms ease, transform 150ms ease, box-shadow 200ms ease; } #dispatch .subscribe-card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); } /* Subhead width (replaces old .lead rule) */ #dispatch .subscribe-card .subhead { max-width: 66ch; } /* Row layout and alignment */ #dispatch .subscribe-form .form-row { align-items: end; gap: 0.75rem; } /* Hide the spacer label above the button */ #dispatch .subscribe-form .field:last-child > label { display: none; } /* Equal control heights + harmonized radius */ #dispatch .subscribe-form input[type="email"] { height: 48px; padding: 0 0.75rem; border-radius: var(--radius-sm); /* match button radius */ } #dispatch .subscribe-form #sub-submit.btn { height: 48px; padding-block: 0; width: 100%; align-self: end; line-height: 1; } /* Desktop: input grows, button hugs its text */ @media (min-width: 761px) { #dispatch .subscribe-form .form-row { grid-template-columns: 1fr auto; } } /* Mobile: stack and keep full-width button */ @media (max-width: 760px) { #dispatch .subscribe-form .form-row { align-items: stretch; } #dispatch .subscribe-form #sub-submit { width: 100%; } } /* Optional: tighten spacing between the top sections */ @media (min-width: 960px) { #dispatch.section, #editors-picks.section { padding-block: calc(var(--section-pad) - 0.75rem); } } /* Latest essay: featured treatment */ .latest-essay .section-header .small, .editors-picks .section-header .small { color: var(--text-soft); } .latest-essay .card.article { border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-1); padding: 1.25rem; } .latest-essay .card.article h3 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); letter-spacing: -0.012em; font-weight: 800; } .latest-essay .card.article p { color: var(--text); max-width: 72ch; } /* Editors’ picks: reuse cards grid, small polish */ .editors-picks .cards-articles .card.article p { max-width: 68ch; } /* Optional: tighten spacing between these top sections on large screens */ @media (min-width: 960px) { #author.section, #latest-essay.section, #editors-picks.section { padding-block: calc(var(--section-pad) - 0.75rem); } } /* 21) Focus Reading Mode */ body.focus-mode .site-header, body.focus-mode .site-footer, body.focus-mode #article-hero, body.focus-mode .post-toc, body.focus-mode .post-share, body.focus-mode .post-nav, body.focus-mode .scroll-hint { display: none !important; } body.focus-mode .post-wrap { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(2rem, 6vw, 3rem); } /* Collapse the two-column grid to a single column and remove gap */ body.focus-mode .post-layout { grid-template-columns: 1fr !important; gap: 0 !important; } /* Remove extra space from the tools row; only Exit Focus remains (fixed) */ body.focus-mode .post-header .reading-tools { margin-top: 0; } /* Hide Print/PDF in focus mode */ body.focus-mode #print-button { display: none !important; } /* Reading-optimized type + measure */ body.focus-mode .post-content { max-width: 68ch; margin: clamp(1rem, 4vh, 1.75rem) auto 0; font-family: var(--font-serif); font-size: calc(var(--fs-body) * 1.08); line-height: 1.75; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-variant-ligatures: common-ligatures; hyphens: auto; } /* Reposition the focus toggle to avoid overlapping the title */ body.focus-mode #focus-toggle { position: fixed; bottom: 1rem; right: 1rem; top: auto; left: auto; z-index: 1200; background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); box-shadow: var(--shadow-2); } body.focus-mode #focus-toggle:hover { opacity: 0.9; } /* 22) Footnote Popovers (JS-enhanced; hidden by default) */ .fn-popover { position: fixed; z-index: 2000; max-width: 42ch; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0.6rem 0.75rem; box-shadow: var(--shadow-2); font-size: 0.95rem; line-height: 1.45; display: none; } .fn-popover[data-show] { display: block; } .fn-popover .fn-popover-inner { max-width: 100%; } .fn-popover .fn-popover-arrow { position: absolute; width: 10px; height: 10px; background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .fn-popover { transition: none; } } /* 23) Subscribe Landing Page */ /* Fixed full-page background wrapper for animated canvas */ .page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0d0d0d; } /* Subscribe hero tweaks: single-column, centered copy */ #subscribe-hero.hero { min-height: 88svh; } #subscribe-hero .hero-inner { grid-template-columns: 1fr; text-align: center; } #subscribe-hero .hero-copy { max-width: 720px; margin-inline: auto; } /* Center the hero intro subheading block + its text */ #subscribe-hero .hero-copy .lead { text-align: center; margin-inline: auto; } /* Nice spacing between intro and the subscribe card on landing */ #subscribe-hero #dispatch .subscribe-card { margin-top: 1rem; } /* Ensure the Subscribe button is visible inside the card in light mode (overrides the generic .hero .btn-outline which is white) */ #subscribe-hero #dispatch .subscribe-card .btn-outline { color: var(--accent); border-color: var(--accent); background: transparent; } #subscribe-hero #dispatch .subscribe-card .btn-outline:hover, #subscribe-hero #dispatch .subscribe-card .btn-outline:focus { background: var(--accent); color: var(--accent-contrast); } /* Slightly tighter section spacing for the "Recent writing" on landing */ #latest.section { padding-block: calc(var(--section-pad) - 0.5rem); }