/* ========================================================== THEME TOGGLE + DARK MODE — append to assets/css/main.css Also adjusts logo treatment (mono caps stack) for both themes ========================================================== */ /* ---------------------------------------------------------- 1. LIGHT THEME (default) — re-declared for clarity, identical to your existing values. Already on :root, no change needed. Keep this comment as a reference. ---------------------------------------------------------- */ /* ---------------------------------------------------------- 2. DARK THEME — Rust + Coffee Activated by [data-theme="dark"] on . Also activated by hover preview class .theme-preview-dark. ---------------------------------------------------------- */ :root[data-theme="dark"] { --white: #1f1611; --paper: #1a120e; --ivory: #2a1d15; --ink: #f1e6d4; --ink-soft: #e8d9c0; --mute: #a89478; --faint: #6e5e48; --rule: rgba(241, 230, 212, 0.14); --crimson: #d97a3c; --crimson-dim: rgba(217, 122, 60, 0.55); } /* Hero gradient swap for dark mode */ :root[data-theme="dark"] .hero { background: radial-gradient( ellipse at 50% 40%, #2a1d15 0%, #1f1611 55%, #14100c 100% ); } /* Dark closing / footer */ :root[data-theme="dark"] .closing, :root[data-theme="dark"] .footer { background: #14100c; } :root[data-theme="dark"] .closing__rss:hover { background: var(--crimson); color: #1f1611; } /* Post card dark surface */ :root[data-theme="dark"] .post-card { background: #2a1d15; border-color: rgba(241, 230, 212, 0.08); } :root[data-theme="dark"] .post-card:hover { border-color: var(--crimson); } /* Post body / single-post dark surface */ :root[data-theme="dark"] .post-body { background: #1f1611; } /* Sticky post-nav header on subpages — must follow theme */ :root[data-theme="dark"] .post-nav { background: rgba(31, 22, 17, 0.95); border-bottom-color: rgba(241, 230, 212, 0.14); } :root[data-theme="dark"] .post-nav .logo { color: var(--ink); } :root[data-theme="dark"] .post-nav__menu a { color: var(--mute); } :root[data-theme="dark"] .post-nav__menu a:hover { color: var(--crimson); } /* Archive hero in dark mode — no extra rule, just lower opacity on bottom border */ :root[data-theme="dark"] .archive-hero { border-bottom-color: rgba(241, 230, 212, 0.14); } /* Slow, gentle transitions across the theme switch */ html, body, .hero, .recent, .post-card, .closing, .footer, .post-body, .ui--tl, .ui--tr, .ui--bl, .ui--br, .logo, .meta, .stat, .annotations .anno-line, .annotations .anno-dot, .annotations .anno-label, .annotations .anno-val { transition: background 1.1s cubic-bezier(0.4,0,0.2,1), background-color 1.1s cubic-bezier(0.4,0,0.2,1), color 1.1s cubic-bezier(0.4,0,0.2,1), fill 1.1s cubic-bezier(0.4,0,0.2,1), stroke 1.1s cubic-bezier(0.4,0,0.2,1), border-color 1.1s cubic-bezier(0.4,0,0.2,1); } /* ---------------------------------------------------------- 3. LOGO — mono caps stack (applies to BOTH themes) Replaces the previous Fraunces wordmark. ---------------------------------------------------------- */ .logo { font-family: var(--f-mono) !important; font-size: 12.5px !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase; line-height: 1.35 !important; white-space: pre-line; /* respect the literal newline */ margin-bottom: 12px !important; } /* ---------------------------------------------------------- 4. THEME TOGGLE — sits in .ui--tl directly below meta lines ---------------------------------------------------------- */ .theme-toggle { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; user-select: none; -webkit-user-select: none; } .theme-toggle__btn { background: none; border: none; padding: 4px; cursor: pointer; color: var(--mute); display: inline-flex; align-items: center; justify-content: center; transition: color 0.25s ease, transform 0.25s ease; } .theme-toggle__btn:hover { color: var(--ink); transform: translateY(-1px); } .theme-toggle__btn[aria-pressed="true"] { color: var(--crimson); } .theme-toggle__btn svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } /* The // separator between sun and moon */ .theme-toggle__sep { color: var(--faint); font-weight: 400; letter-spacing: 0; pointer-events: none; } /* Mobile: shrink */ @media (max-width: 720px) { .theme-toggle { margin-top: 10px; font-size: 10px; gap: 8px; } .theme-toggle__btn svg { width: 14px; height: 14px; } }