/* OptionExplicit design tokens — light + dark modes Loaded by both the frontend (functions.php) and the block editor (add_editor_style). The dark palette is the default. The light palette overrides via: - .light class on (explicit user toggle) - prefers-color-scheme: light AND no .dark class (system preference) We override the WordPress preset variables (--wp--preset--color--*) so blocks that use color presets (set via theme.json palette) automatically follow the mode. */ :root { /* === Type scale (1.25 modular ratio) === */ --font-size-sm: 0.8rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5625rem; --font-size-xxl: 1.953rem; --font-size-huge: 2.441rem; --font-size-mega: 3.052rem; /* === Spacing scale (4px base × multiples) === */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* === Border radius === */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; /* === Type families === */ --font-prose: 'Fraunces', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* === Dark palette (default) === */ --color-bg: #14110F; --color-fg: #F1ECE3; --color-fg-muted: #A39B8E; --color-accent: #D9A455; --color-accent-soft: #E8C285; --color-border: #2A241F; --color-code-bg: #1B1815; --color-selection: rgba(217, 164, 85, 0.3); /* Mirror tokens into WordPress preset variables so theme.json palette automatically follows the active mode. */ --wp--preset--color--bg: var(--color-bg); --wp--preset--color--fg: var(--color-fg); --wp--preset--color--fg-muted: var(--color-fg-muted); --wp--preset--color--accent: var(--color-accent); --wp--preset--color--border: var(--color-border); --wp--preset--color--code-bg: var(--color-code-bg); } /* Light mode — explicit class wins over system preference */ html.light { --color-bg: #FAF7F1; --color-fg: #1F1A14; --color-fg-muted: #6B6356; --color-accent: #B47B2C; --color-accent-soft: #C99A50; --color-border: #E5DED1; --color-code-bg: #F2EDE3; --color-selection: rgba(180, 123, 44, 0.2); --wp--preset--color--bg: var(--color-bg); --wp--preset--color--fg: var(--color-fg); --wp--preset--color--fg-muted: var(--color-fg-muted); --wp--preset--color--accent: var(--color-accent); --wp--preset--color--border: var(--color-border); --wp--preset--color--code-bg: var(--color-code-bg); } /* System preference — only when no explicit toggle is set */ @media (prefers-color-scheme: light) { html:not(.dark):not(.light) { --color-bg: #FAF7F1; --color-fg: #1F1A14; --color-fg-muted: #6B6356; --color-accent: #B47B2C; --color-accent-soft: #C99A50; --color-border: #E5DED1; --color-code-bg: #F2EDE3; --color-selection: rgba(180, 123, 44, 0.2); --wp--preset--color--bg: var(--color-bg); --wp--preset--color--fg: var(--color-fg); --wp--preset--color--fg-muted: var(--color-fg-muted); --wp--preset--color--accent: var(--color-accent); --wp--preset--color--border: var(--color-border); --wp--preset--color--code-bg: var(--color-code-bg); } } /* === Self-hosted variable fonts === */ /* Font files are not committed. Run scripts/download-fonts.sh to fetch them. */ @font-face { font-family: 'Fraunces'; src: url('./fonts/fraunces.woff2') format('woff2-variations'), url('./fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('./fonts/fraunces-italic.woff2') format('woff2-variations'), url('./fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('./fonts/inter.woff2') format('woff2-variations'), url('./fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('./fonts/jetbrains-mono.woff2') format('woff2-variations'), url('./fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } /* === Header === */ .oe-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); } .oe-site-title a { font-family: var(--font-prose); font-weight: 600; font-size: var(--font-size-lg); color: var(--color-fg); text-decoration: none; } .oe-site-title a:hover, .oe-site-title a:focus-visible { color: var(--color-accent); } /* === Primary navigation === */ nav.oe-nav { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; } /* Element + class selectors to win against WP's global a:where() link rule */ nav.oe-nav a { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500; color: var(--color-fg-muted); text-decoration: none; letter-spacing: 0.01em; transition: color 0.15s ease; } nav.oe-nav a:hover, nav.oe-nav a:focus-visible { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; } nav.oe-nav a[aria-current="page"] { color: var(--color-fg); } /* === Section padding === */ .oe-section { padding-top: 3rem; padding-bottom: 3rem; } .oe-section--tight { padding-top: 1.5rem; padding-bottom: 3rem; } /* === Footer === */ .oe-footer { padding: 2.5rem 1.5rem; border-top: 1px solid var(--color-border); } .oe-footer__text { color: var(--color-fg-muted); font-family: var(--font-ui); font-size: var(--font-size-sm); margin: 0; text-align: center; } /* === Entry summary in lists/archives === */ .oe-entry { padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); } .oe-entry__meta { color: var(--color-fg-muted); font-family: var(--font-ui); font-size: var(--font-size-sm); } /* === Inline meta (date, terms) === */ .oe-meta, .oe-meta a { color: var(--color-fg-muted); font-family: var(--font-ui); font-size: var(--font-size-sm); } /* === 404 page === */ .oe-404-title { font-family: var(--font-mono); font-size: var(--font-size-huge); } /* === Snippet browser mount === */ .oe-snippet-browser-mount { padding-top: 1rem; padding-bottom: 3rem; } .oe-noscript { text-align: center; padding: 2rem; color: var(--color-fg-muted); } /* === Sticky-footer layout — footer pins to bottom on short pages === */ html, body { min-height: 100vh; } body { display: flex; flex-direction: column; } .wp-site-blocks { flex: 1 0 auto; display: flex; flex-direction: column; } .wp-site-blocks > main { flex: 1 0 auto; } /* === Base reset === */ *, *::before, *::after { box-sizing: border-box; } ::selection { background-color: var(--color-selection); color: var(--color-fg); } html { scroll-behavior: smooth; color-scheme: dark light; } /* === Homepage (front-page.html) — Option B: Code-Forward === */ /* Stat pills — monospace counts with accent highlighting */ .oe-stat-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-12); } .oe-stat-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-fg-muted); } .oe-stat-pill strong { color: var(--color-accent); font-weight: 600; } /* Featured snippets list */ .oe-home-featured { margin-bottom: var(--space-12); } .oe-home-featured__label { font-family: var(--font-ui); font-size: var(--font-size-sm); color: var(--color-fg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-4) 0; } .oe-home-featured__list { list-style: none; padding: 0; margin: 0; } .oe-home-featured__item { display: flex; align-items: baseline; gap: var(--space-4); border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; } .oe-home-featured__link { font-family: var(--font-ui); font-weight: 500; color: var(--color-fg); text-decoration: none; transition: color 0.15s ease; flex-shrink: 0; } .oe-home-featured__link:hover, .oe-home-featured__link:focus-visible { color: var(--color-accent); } .oe-home-featured__tags { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-left: auto; flex-shrink: 0; } /* === Theme Switcher (persistent header) === */ .oe-theme-group { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; } .oe-theme-switcher { display: flex; gap: var(--space-1); background: var(--color-code-bg); border-radius: var(--radius-sm); padding: var(--space-1); flex-shrink: 0; } .oe-theme-btn { background: none; border: none; border-radius: var(--radius-sm); padding: var(--space-1); font-family: var(--font-ui); font-size: var(--font-size-lg); color: var(--color-fg-muted); cursor: pointer; transition: all 0.1s ease; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; line-height: 1; } .oe-theme-btn:hover, .oe-theme-btn:focus-visible { color: var(--color-fg); cursor: pointer; } .oe-theme-btn--active { background: var(--color-bg); color: var(--color-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }