/* Theme Name: Bizuno Theme Theme URI: https://bizuno.com/ Description: Child theme for GeneratePress, tuned for bizuno.com — dark-mode default, single-column prose, low-chrome navigation. Template: generatepress Author: PhreeSoft Author URI: https://phreesoft.com/ Version: 1.0.0 License: GNU Affero General Public License v3 License URI: https://www.gnu.org/licenses/agpl-3.0.html Text Domain: bizuno-theme */ /* ========================================================================== 1. Design tokens (Section 10 of PLAN.md) ========================================================================== */ :root { /* Dark palette — the default experience */ --bz-bg: #0f1419; --bz-surface: #1a2029; --bz-surface-2: #0a0e14; /* code block background */ --bz-border: #2a3340; --bz-text: #e6e8eb; --bz-text-muted: #a0a8b0; --bz-accent: #4fc3f7; --bz-accent-hover: #81d4fa; --bz-warning: #ffb74d; --bz-error: #e57373; --bz-success: #81c784; /* Typography */ --bz-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bz-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --bz-fs-base: 16px; --bz-lh-base: 1.6; /* Layout */ --bz-prose-max: 720px; --bz-grid-max: 1080px; --bz-gap-xs: 4px; --bz-gap-sm: 8px; --bz-gap-md: 16px; --bz-gap-lg: 32px; --bz-gap-xl: 64px; --bz-radius: 6px; } /* Optional light mode — activated by user toggle (class on ) or via prefers-color-scheme. Not blocking launch per Section 10. */ body.bz-light, @media (prefers-color-scheme: light) { body:not(.bz-dark) { --bz-bg: #fdfdfc; --bz-surface: #f4f5f6; --bz-surface-2: #eeeff1; --bz-border: #d8dde2; --bz-text: #15181c; --bz-text-muted: #5c6770; --bz-accent: #0277bd; --bz-accent-hover: #01579b; } } /* ========================================================================== 2. Base reset and typography ========================================================================== */ html { font-size: var(--bz-fs-base); } body { background: var(--bz-bg); color: var(--bz-text); font-family: var(--bz-font-ui); line-height: var(--bz-lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--bz-font-ui); color: var(--bz-text); font-weight: 700; line-height: 1.25; margin-top: var(--bz-gap-lg); margin-bottom: var(--bz-gap-md); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } p, ul, ol, blockquote, pre { margin: 0 0 var(--bz-gap-md); } a { color: var(--bz-accent); text-decoration: none; } a:hover, a:focus { color: var(--bz-accent-hover); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--bz-border); margin: var(--bz-gap-lg) 0; } /* ========================================================================== 3. Layout ========================================================================== */ .inside-article, .inside-page-header, .site-main > article .entry-content { max-width: var(--bz-prose-max); margin-left: auto; margin-right: auto; padding-left: var(--bz-gap-md); padding-right: var(--bz-gap-md); } .bz-wide { /* override for landing pages */ max-width: var(--bz-grid-max); } .site-header, .main-navigation, .site-footer { background: var(--bz-bg); border-bottom: 1px solid var(--bz-border); } .site-footer { border-top: 1px solid var(--bz-border); border-bottom: 0; } /* ========================================================================== 4. Code blocks with copy button ========================================================================== */ code, kbd, samp { font-family: var(--bz-font-mono); font-size: 0.9em; background: var(--bz-surface); padding: 2px 6px; border-radius: 4px; } pre { position: relative; background: var(--bz-surface-2); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: var(--bz-gap-md); overflow-x: auto; font-family: var(--bz-font-mono); font-size: 0.875rem; line-height: 1.5; } pre code { background: transparent; padding: 0; } .bz-copy { position: absolute; top: var(--bz-gap-sm); right: var(--bz-gap-sm); background: var(--bz-surface); color: var(--bz-text-muted); border: 1px solid var(--bz-border); border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer; } .bz-copy:hover { color: var(--bz-accent); border-color: var(--bz-accent); } .bz-copy.is-copied { color: var(--bz-success); } /* ========================================================================== 5. Buttons and forms ========================================================================== */ .wp-block-button__link, button, .bz-btn { background: var(--bz-accent); color: var(--bz-bg); font-family: var(--bz-font-ui); font-weight: 600; border: 0; border-radius: var(--bz-radius); padding: 10px 20px; cursor: pointer; transition: background 120ms ease; } .wp-block-button__link:hover, .bz-btn:hover { background: var(--bz-accent-hover); text-decoration: none; } .wp-block-button.is-style-outline .wp-block-button__link, .bz-btn--outline { background: transparent; color: var(--bz-accent); border: 1px solid var(--bz-accent); } .bz-btn--outline:hover { background: var(--bz-accent); color: var(--bz-bg); } input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, select { background: var(--bz-surface); color: var(--bz-text); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: 8px 12px; font-family: var(--bz-font-ui); font-size: 1rem; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--bz-accent); outline-offset: 1px; } /* ========================================================================== 6. Patterns — card grids, feature cards, release/roadmap/forum items ========================================================================== */ .bz-cards { display: grid; gap: var(--bz-gap-lg); grid-template-columns: repeat(3, 1fr); max-width: var(--bz-grid-max); margin: var(--bz-gap-lg) auto; } .bz-cards--two { grid-template-columns: repeat(2, 1fr); } .bz-cards--five { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1024px) { .bz-cards, .bz-cards--five { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bz-cards, .bz-cards--two, .bz-cards--five { grid-template-columns: 1fr; } } .bz-card { background: var(--bz-surface); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: var(--bz-gap-lg); display: flex; flex-direction: column; gap: var(--bz-gap-md); } .bz-card h3 { margin: 0; font-size: 1.125rem; } .bz-card p { margin: 0; color: var(--bz-text-muted); } .bz-card__footer { margin-top: auto; } .bz-release, .bz-roadmap-item, .bz-forum-topic { border-bottom: 1px solid var(--bz-border); padding: var(--bz-gap-md) 0; display: flex; gap: var(--bz-gap-md); align-items: baseline; } .bz-release:last-child, .bz-roadmap-item:last-child, .bz-forum-topic:last-child { border-bottom: 0; } .bz-release__version, .bz-forum-topic__meta { color: var(--bz-text-muted); font-family: var(--bz-font-mono); font-size: 0.875rem; } .bz-roadmap-item__status { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--bz-border); color: var(--bz-text-muted); } .bz-roadmap-item__status--shipped { color: var(--bz-success); border-color: var(--bz-success); } .bz-roadmap-item__status--progress { color: var(--bz-accent); border-color: var(--bz-accent); } .bz-roadmap-item__status--planned { color: var(--bz-warning); border-color: var(--bz-warning); } /* ========================================================================== 7. Accessibility ========================================================================== */ :focus-visible { outline: 2px solid var(--bz-accent); outline-offset: 2px; } .bz-skip-link { position: absolute; left: -9999px; top: 0; background: var(--bz-accent); color: var(--bz-bg); padding: 8px 16px; z-index: 9999; } .bz-skip-link:focus { left: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }