:root { --moss-accent: #2d5a2d; --moss-font-body: "Inter", -apple-system, sans-serif; --moss-content-width: 72ch; } /* Beta badge — inline superscript after site name */ .site-name::after { content: "BETA"; font-size: 0.45em; font-weight: 600; background: var(--moss-accent); color: var(--moss-color-bg, #faf8f5); padding: 1px 6px; border-radius: 8px; margin-left: 0.3em; vertical-align: super; letter-spacing: 0.5px; } /* Muted footnote below download buttons — left-aligned to match buttons */ .moss-buttons + p { font-size: 0.8rem; color: var(--moss-color-muted, #9b9590); margin-top: 0.5rem; } .nav-content { border-bottom: none; } header { padding-bottom: var(--moss-space-lg); } /* ── Sunlight theme — "kindle under sunlight" ambient mode ── Activated by script.js via data-theme="sunlight" on . Extends light color scheme with warmer tones. */ [data-theme="sunlight"] { --moss-color-bg: #f5efe3; --moss-color-surface: #efe8da; --moss-color-text: #2c2825; --moss-color-muted: #8a7d6f; --moss-border-light: #e0d8c8; --moss-border-medium: #d1c8b4; --moss-code-background: #f0eadc; --moss-code-border: #ddd5c3; } /* Leaf shadow video overlay — full viewport, blended via multiply. White areas of the video become transparent; dark areas darken the page content as natural-looking shadows. */ #sunlight-leaves { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: multiply; pointer-events: none; z-index: 999; opacity: 0; transition: opacity 1.2s ease-out; } /* Video stays hidden when sunlight activates — .video-ready (added by JS after playback starts) fades it in. */ [data-theme="sunlight"] #sunlight-leaves { opacity: 0; } [data-theme="sunlight"] #sunlight-leaves.video-ready { opacity: 0.3; } /* Warm color wash — barely perceptible amber tint. Just enough to unify the page under a warm light without yellowing text. */ #sunlight-wash { position: fixed; inset: 0; background: rgba(255, 210, 120, 0.02); mix-blend-mode: multiply; pointer-events: none; z-index: 998; opacity: 0; transition: opacity 1.2s ease-out; } [data-theme="sunlight"] #sunlight-wash { opacity: 1; } /* Paper grain texture — tiny repeating noise for analog feel */ [data-theme="sunlight"] body { background-image: url("/grain.png"); background-repeat: repeat; background-blend-mode: multiply; } /* Accessibility: disable the animated video for users who prefer reduced motion. The warm color shift and grain texture remain (they're static). */ @media (prefers-reduced-motion: reduce) { #sunlight-leaves { display: none; } }