/* Theme Name: Ergo Atelier Theme URI: https://ergonomicsforcreatives.com Author: Ergonomics for Creatives Author URI: https://ergonomicsforcreatives.com Description: The Curated Sanctuary — an editorial, ergonomics-first block theme for creative professionals. A tonal, "no-line" design system delivered as a full-site-editing block theme where theme.json is the single source of truth for every design token. Newsreader + Inter typography, sage-green accent, light tonal layering, zero page builders. Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 Version: 1.0.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ergo-atelier Tags: full-site-editing, blog, news, magazine, editorial, one-column, custom-colors, custom-logo, custom-menu, block-patterns, featured-images, threaded-comments */ /* ============================================================================= Custom CSS — the deliberate minimum theme.json cannot express. Per DESIGN.md §7, hand-written CSS is reserved for the glass fallback, the focus ring, the CTA gradient, the ghost button, and the asymmetric article layout. EVERY color below references a --wp--preset--color--* custom property (defined exactly once in theme.json) — there is no hard-coded hex in this file. ============================================================================= */ /* --- Glassmorphism navigation (DESIGN.md §2). backdrop-filter and its accessibility fallbacks are not expressible in theme.json. --------------- */ .ergo-glass { background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--wp--preset--shadow--glass); z-index: 100; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ergo-glass { background: color-mix(in srgb, var(--wp--preset--color--surface) 96%, transparent); } } @media (prefers-reduced-transparency: reduce) { .ergo-glass { background: var(--wp--preset--color--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* --- CTA gradient (DESIGN.md §2; hard constraint #8). A linear-gradient with named stops cannot be a theme.json color preset, so it lives here — but it is still composed purely from preset vars, never raw hex. ----------------- */ .wp-block-button.has-gradient-primary > .wp-block-button__link, .wp-block-button .wp-block-button__link.has-gradient-primary { background-color: var(--wp--preset--color--primary); background-image: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-container)); border: 0; color: var(--wp--preset--color--on-primary); } /* --- Ghost / tertiary button (DESIGN.md §5): no border, transparent at rest, a soft surface wash on hover. -------------------------------------------- */ .wp-block-button.is-ghost > .wp-block-button__link { background-color: transparent; background-image: none; color: var(--wp--preset--color--primary); } .wp-block-button.is-ghost > .wp-block-button__link:hover, .wp-block-button.is-ghost > .wp-block-button__link:focus { background-color: var(--wp--preset--color--surface-container-high); opacity: 1; } /* --- Button motion (DESIGN.md §5): a 90% opacity hover. opacity is not a theme.json style property, so the transition lives here. ----------------- */ .wp-block-button .wp-block-button__link { transition: opacity 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } .wp-block-button:not(.is-ghost) > .wp-block-button__link:hover { opacity: 0.9; } /* --- Focus ring (DESIGN.md §4.4). Layout borders are banned, so keyboard focus needs its own deliberate, visible 2px ring (accessibility outranks the no-line rule). ----------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, .wp-block-button__link, .wp-block-navigation-item__content, .wp-block-search__input):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: var(--wp--custom--radius--sm); } /* --- Inline search → a single recessed pill (DESIGN.md §4.1). Strip the core "button-inside" wrapper outline (the stray box border — no-line rule), make the wrapper itself the pill, and keep the input + icon button transparent so it reads as one continuous field. ---------------------------------------- */ .wp-block-search__button-inside .wp-block-search__inside-wrapper { border: 0; padding: 0; overflow: hidden; border-radius: var(--wp--custom--radius--full); background-color: var(--wp--preset--color--surface-container-high); } .wp-block-search__button-inside .wp-block-search__input { border: 0; background: transparent; padding-left: var(--wp--preset--spacing--20); } .wp-block-search__button-inside .wp-block-search__button { margin: 0; border: 0; background: transparent; color: var(--wp--preset--color--on-surface-variant); } /* --- Asymmetric editorial article body (DESIGN.md §8 "Do" — magazine margins). The constrained layout alone cannot offset content asymmetrically. -------- */ @media (min-width: 1024px) { .ergo-article-body { margin-left: 10%; margin-right: 20%; } .ergo-article-body > .wp-block-post-content, .ergo-article-body .wp-block-post-content > * { max-width: none; } } /* --- Sticky footer: on short pages (single posts, light pages) the content doesn't fill the screen, so the page background used to show as a broken- looking gap below the footer. Make the whole document a full-height column and let the footer take the slack, pinning it to the bottom of the viewport. Long pages are unaffected — the footer simply flows after the content. ---- */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child { margin-top: auto; } /* --- Mobile header: a single compact row. Swap the full lockup for the icon-only logo, hide the wide search field, and stop the row from wrapping, leaving [icon] · menu · account · Start Here on one line. ----------------- */ .ergo-logo-icon { display: none; margin: 0; } @media (max-width: 781px) { .ergo-logo-full { display: none; } .ergo-logo-icon { display: block; } .ergo-glass .wp-block-search { display: none; } .ergo-header-row { flex-wrap: nowrap; } } /* --- Mobile nav overlay (open menu): match the editorial design. The open overlay's