full-bleed with core/post-content direct. Authors who want * prose pick the new "Prose" custom template from Page Attributes → * Template (registered in theme.json customTemplates). * - ARCHIVE/SEARCH/404 unchanged — they keep prose-group because their * content is query-loops + small text, not Launch compositions. * - LOGO PICKER SELECTOR FIX: .ssla-chrome-logo-slot:not(:has(...)) * was using the wrong predicate. core/site-logo always renders its * wrapper element even when no logo image is uploaded, so * :not(:has(.wp-block-site-logo)) always matched false and the * picker affordance never painted. Flipped to * :not(:has(.wp-block-site-logo img)) — checks for the actual img * descendant. Bug present since v1.7.0 introduced the rule; * diagnosed during v1.10.0 staging walk. * * v1.10.0 changes from v1.9.01 — full-bleed-default architectural pivot: * - Templates restructured:

ships at full bleed (already true in * theme.json since v1.9.01); inner constrained groups removed from * single, page, archive, search, 404 templates. Constraint moves * into a registered block pattern users drop where needed. * - inc/patterns.php registers simple-theme/prose-group block pattern * and a matching block style on core/group, both keyed off * className "is-style-prose-group". * - This stylesheet adds the .is-style-prose-group selector block (at * the bottom of this file). Structural rhythm only — vertical spacing, * list/blockquote treatment, link affordances inside prose. NO * hardcoded colors; NO imposed font ramp. Presets and users override * paint via theme.json + global styles. Theme provides the bones. * - The 5 affected templates apply is-style-prose-group as the * className on their content wrapper, so the same selectors paint * both the dropped pattern and the rendered template. One rule set, * two authoring surfaces. * * v1.9.01 changes from v1.9.0 — frontend full-bleed + broader template filter: * Two staging-walk findings from v1.9.0: * (A) Frontend pages showed ~50px left/right padding on the * simple-content group. v1.8.04's padding-zero was editor-scoped; * frontend inherited WP-core's .has-global-padding rule with * parent-theme (TT5) padding tokens. Fixed by declaring * theme.json styles.spacing.padding.left/right = 0 site-wide. * --wp--style--root--padding-* now resolves to 0 in frontend * and editor both. Block-level groups that author their own * padding still get it (their padding reads block attrs, not * root vars). * (B) Site Editor's Templates admin screen still showed Launch * combo entries and TT5 inheritance (Index, All Archives, * page-no-title, Blog Home). v1.9.0's theme_templates filter * only catches the post-editor picker. Added get_block_templates * filter that drops any wp_template whose slug isn't in our * templates/*.html file inventory. Catches Launch combos AND * TT5 inheritance regardless of registration source. * * Pure additive. No CSS rule changes (the v1.8.04 editor-canvas * padding-zero rule is now redundant but harmless; left in for * defense-in-depth). * * v1.9.0 changes from v1.8.04 — Template ownership contract v2: * - Substantive scope change. Theme now owns ALL wp_template + * wp_template_part posts. Launch owns patterns + pages only. * - Deleted parts/header-standard.html + parts/footer-minimal.html * (orphaned by Launch deprecating combo template registrations). * Removed corresponding theme.json templateParts entries and * .simple-footer-simple CSS rules. * - Backfilled all 7 templates with corrected pattern: outer

* is layout:default (full-bleed) for every template. Page templates * wrap post-content in an explicit constrained inner group at * 760/1200 (1200/1400 for single.html with sidebar layout). Default * template stays full-bleed-all-the-way for Launch sections. * - New migration inc/migrations/v1_9_0.php sweeps wp_template + * wp_template_part posts on activation/version-change. Trashes * orphans (no matching file) and diverged db copies (file is source * of truth). Idempotent, registered in loader. * - New theme_templates filter in functions.php hides parent-theme * (TT5) inherited templates from the picker. Picker now shows only * entries from simple_theme_get_template_manifest(). * - New admin notice on Site Editor / Themes screens explains the * filesystem-ownership contract. Dismissible per-user. * * v1.8.04 changes from v1.8.03 — kill .has-global-padding gutters: * - v1.8.03 made the editor canvas full-width, but WP-core applies a * separate set of root-level padding vars to .has-global-padding * (which lands on .is-root-container by default). The result was * ~40-60px left/right gutters on the writing canvas regardless of * max-width values. Direct DevTools trace confirmed (Glenn 2026-05-09): * * :where(.editor-styles-wrapper) .has-global-padding { * padding-right: var(--wp--style--root--padding-right); * padding-left: var(--wp--style--root--padding-left); * } * * - Extended the v1.8.03 .editor-styles-wrapper rule to also zero * --wp--style--root--padding-left and --wp--style--root--padding-right. * The :where() selector around WP's rule has zero specificity so the * existing class-level rule wins; just had to declare the vars. * - Block-level groups that authored their own padding still render with * their authored padding because they read from their own block attrs, * not these root vars. Editor canvas is now true edge-to-edge. * * No theme.json or template changes. CSS-only. Pure additive. * * v1.8.03 changes from v1.8.02 — Gutenberg post-editor canvas parity: * - v1.8.02 relaxed theme.json layout root for Site Editor full-bleed. * Gutenberg POST editor (the smaller iframe used when editing pages * and posts) doesn't read theme.json layout cleanly — WP-core hardcodes * a content-size on .editor-styles-wrapper itself that overrides * theme.json values for the writing canvas. * - Added a chrome.css rule scoped to .editor-styles-wrapper that * overrides --wp--style--global--content-size + --wp--style--global--wide-size * CSS vars to 100% and forces max-width: 100% on the wrapper. * Propagates through any block reading those vars. * - Block-level constrained groups (like page.html's inner 760/1200 * group) still self-constrain because they read from their own block * attrs, not from these global vars. Editing experience now matches * v1.8.02's frontend full-bleed behavior. * * No theme.json or template changes in this band. CSS-only. * * v1.8.02 changes from v1.8.01 — full-bleed editor canvas: * - theme.json settings.layout root values: contentSize/wideSize * changed from 1200px/1400px to 100%/100%. The 1200px root constraint * was choking full-width page designs in the editor canvas. Default- * aligned Launch sections paint at section width on frontend (via * section CSS) but the editor canvas applied the root constraint * globally, making everything feel narrow. * - templates/page.html: wp:post-content now lives inside an explicit * constrained wp:group (contentSize 760px, wideSize 1200px) per the * v0.8.0 sketch. Prose-style pages still get readable line width; * full-width Launch sections paint align-full and break out of the * constraint cleanly. The constraint moved FROM root (where it * applied to everything) TO the page-level group (where it only * applies to non-aligned content inside that specific group). * * No CSS rule changes in this band. Pure layout-contract correction. * * v1.8.01 changes from v1.8.0 — Templates regression fix + canvas width: * - Restored templates/page.html (was deleted in v1.8.0). Falling through * to TT5 parent's page.html caused the homepage to render a "Home" title * above the hero (TT5's page template includes wp:post-title) and applied * TT5's narrower contentSize constraint to the editor canvas. The * restored page.html follows the v0.8.0 sketch: full-bleed

, inner * constrained wp:post-content so paragraph blocks self-constrain to * readable width while align-full/align-wide breaks out cleanly. No * wp:post-title — pages render their own titles via content sections. * - Added theme.json settings.layout = { contentSize: 1200px, wideSize: * 1400px } so the editor canvas inherits the same content max as Launch * section paint surface, instead of TT5 parent's tighter 620px default. * - Added parts/header-standard.html (mirrors header-simple, same className * so it inherits all chrome.css rules) so Launch's combo templates that * reference slug "header-standard" resolve correctly. Backward-compat * preserved for templates/compact.html which still uses header-simple. * - Added parts/footer-minimal.html — new single-line-copyright footer * for Launch's "Minimal" combo templates. Uses className * simple-footer-simple with .ssla-chrome-footer-copyright-slot wrapper * so chrome-binder still wires the copyright field for inline edit. * - Added chrome.css rules for .simple-footer-simple (~20 LOC). * * Net: Launch's 4 combo templates (Standard+Simple, Standard+Minimal, * Expanded+Simple, Expanded+Minimal) all resolve to existing parts. The * "template part has been deleted or is unavailable" red bars in the * picker disappear. * * Out of scope for v1.8.01 (still routed to Mia per v1.8.0 handoff): * - Header bar entire-element hotspot, footer link routing, FE inline-edit * gate (overlay.js band) * - Preset color/font integration (v3.6.4 Manage>Theme tab) * - LearnDash courses + better blog templates (multi-arc, item C from * today's screenshot review — opens as v1.10.x design-mockup-first) * * v1.8.0 changes from v1.7.0 — UI cleanup band: * - Header brand-group: logo placed to the LEFT of the site title rather * than stacked above. Previously .nav-brand-group rendered as a vertical * flex column (logo top, title middle, tagline bottom). New layout uses * CSS Grid in header-expanded so the tagline stacks under the title only, * not under the logo+title row — keeping the brand silhouette compact. * Header-simple (no tagline) uses a simpler flex-row override. Logo slot * vertically centered against the title baseline. Mobile preserves the * compact 28px logo footprint and inherits the same row layout. * - Template prune: removed templates/{home,index,page,article}.html. * None were declared in functions.php's manifest (which has only default * and compact). home.html and index.html now fall through to the TT5 * parent (matching the v0.8.0 thesis "TT5 owns WordPress defaults"). * page.html was a byte-identical duplicate of default.html; removed * to keep one source of truth. article.html was an unused stub. * * Out of scope for v1.8.0 (routed to Mia's Launch thread — see * ssla-handoff-v1.8.0-ui-cleanup.md): * - Header bar entire-element hotspot triggering menu modal (overlay.js) * - Footer menu link forwards to admin instead of opening menu modal * - Subtitle still editable in viewing mode (FE inline-edit gate) * - Front-end UI treatment for article/search/sidebar + Events / Members / * LearnDash FE templates (multi-arc; sub-arc A first) * - Preset color/font integration + light/dark + font selector * (depends on Manage>Theme tab in Launch v3.6.4) * * v1.7.0 changes from v1.6.0 — staging-walk fixes: * - Logo placeholder when no logo set: 44×44 (28×28 mobile) dashed-border * box with mild gray fill, painted on .ssla-chrome-logo-slot when its * child .wp-block-site-logo is absent. Conditional break from the v1.3.3 * "slots are visually transparent" contract — only paints when there's * no rendered logo to interfere with. Two new tokens: * --simple-chrome--placeholder-fill (#EFEFEF) and * --simple-chrome--placeholder-border (#B0B0B0). * - Footer submenus render as indented sub-bullets, not flyout dropdowns. * Scoped to .simple-footer-expanded .footer-links — header nav submenus * unaffected. Strips dropdown card chrome (background, border, shadow, * absolute positioning), makes submenus render in-flow as a vertical * list with a hairline rail. Submenu toggle chevron hidden. * - Footer link spacing tightened. Explicit gap: 6px on .footer-links * overrides core's default --wp--style--block-gap which was reading as * too spaced-out. * * Out of scope for v1.7.0 (routed to Mia's Launch thread): * - Header bar entire-element hotspot triggering menu modal * - FE inline-edit input not inheriting painted style until save+reload * - Dark editor-affordance tones (black bg + white text in chrome edit * mode regardless of preset) * * v1.6.0 changes from v1.5.0 — mobile responsive (sub-delivery 3): * - Switched core/navigation `overlayMenu` from "never" to "mobile" on both * header parts. Below 768px the inline nav collapses into core's hamburger * overlay (top-down, full-viewport). We get focus-trap, esc-to-close, and * ARIA plumbing free from core — no parallel infrastructure. * - Restyled core's overlay panel to match Simple Theme paint surface: * paper bg, hairline rules between items, Georgia 18px nav typography. * - Hover-bridge from v1.4.0 sub-delivery 1 wrapped in * `@media (hover: hover) and (pointer: fine)` so it doesn't fire on touch. * Touch-side gets simple tap-to-open submenu via core's overlay structure. * - Header brand stack at mobile: tagline hidden (header-expanded only, * where tagline lives), logo + site title remain. Logo slot 28px square * instead of 36px. * - Footer collapse changed from direct 4 → 1 at 768px to three-stage * 4 → 2 → 1 (≥768 = 4col, 481–767 = 2col, ≤480 = 1col stacked). * - Existing flex-wrap mobile rules on `.simple-header-*` retained as * fallback for the brief moment before core's overlay JS hydrates. * * v1.5.0 changes from v1.4.0: * - No CSS changes. Version stamp updated for lockstep with the v1.5.0 * ship. Fix is template-part + render_block filter (PHP-side). * See inc/class-simple-theme-chrome-binder.php for the * chrome-field handshake v2 implementation. * * v1.4.0 changes from v1.3.3: * - Submenu hover-gap bug fix. v1.3.x used `margin-top: 6px` on the * submenu container, which created a transparent hit-corridor that * dropped :hover state and collapsed the menu mid-traverse. Replaced * with a transparent ::before bridge of the same height — visual gap * preserved, hover continuity restored. Also added small vertical * padding on parent (has-child) trigger anchors with negative margin * offset, so a diagonal cursor path off the label stays on a hovered * surface. Baseline alignment unchanged. * - Inter-section margin override. WP-core's * `:where(.is-layout-flow) > * { margin-block-start: 1.2rem }` was * stacking 19.2px between every Launch section on the page, breaking * design consistency for edge-to-edge sections. Zeroed on * `.ssla-section` directly — internal section flow rhythm * (paragraphs, headings inside a section) untouched. * * v1.3.3 changes from v1.3.2: * - .ssla-chrome-*-slot wrappers introduced in template parts to carry * data-ssla-chrome-field attributes on logo, site-title, tagline, and * footer text fields (per Mia's chrome-field handshake for v3.6.11 * inline-edit). Slots must be VISUALLY TRANSPARENT — Launch ships * hover/click affordance via its own .ssla-ov-chrome-hover CSS; * theme-side slots are layout passthrough only. * - Logo slot added to header-simple (was site-title-only); logo block * now appears in compact-template pages too. * * v1.3.2 changes from v1.3.1: * - Editor-only post title hide rule. Targets the WP 6.5+ wrapper class * (.editor-visual-editor__post-title-wrapper) plus legacy fallbacks. * Editor-only — front-end core/post-title is untouched. * - Chrome-utility custom block styles (login + expandable search). * * v1.3.1 changes from v1.3.0: * - Sticky now targets header.wp-block-template-part wrapper (not inner group) * — wrapper is what needs to escape document flow; inner group has no room. * - Inter-section gap zeroed (chrome flush against page content). * - Sub-menu padding increased (was smooshed at 6px → now 12px/14px). * - Footer column ratios → 1.4fr 0.8fr 1.6fr 1.2fr (was 1.6fr 1fr 1.6fr 1.2fr). * - Brand column treated as wordmark, not eyebrow-matched heading. * - Header search input styled to match chrome typography. * - Logo swap rule: site-logo present hides wordmark via :has() selector. * * See README.md for the token contract. */ /* =================================================================== * STICKY CASCADE FIX * position: sticky requires every ancestor to NOT have overflow:hidden|clip. * TT5-derivative themes set overflow on .wp-site-blocks and friends, which * silently breaks sticky. We override on the documented set of ancestors. * If a future TT5 update adds a new wrapper, add it here. * =================================================================== */ .wp-site-blocks, body > .wp-site-blocks > main, body > .wp-site-blocks > .wp-block-group, body.wp-singular, body.home { overflow: visible; } /* =================================================================== * BODY + HEADING FONT BINDING (v1.18.0) * * The runtime paint emitter outputs --wp--custom--simple-chrome--font-family * driven by the chrome admin Typography setting. These rules bind that * variable to body text and headings so the user's font choice paints * site-wide, not just inside chrome rules. * * Fallback stack mirrors the system-sans authored default so a missing * variable does not crash typography. Per-block paint via Global Styles * still takes precedence over these rules (no !important). * =================================================================== */ body { font-family: var(--wp--custom--simple-chrome--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); } h1, h2, h3, h4, h5, h6 { font-family: var(--wp--custom--simple-chrome--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); } /* =================================================================== * INTER-SECTION GAP — FLUSH CHROME * WP-core block-gap defaults add space between top-level template parts. * We zero it so chrome sits flush against page content. (Per Glenn, * v1.3.1 punch-list item 1.) Page content can still set its own internal * spacing; this only zeros the gap BETWEEN top-level sections. * =================================================================== */ body > .wp-site-blocks { gap: 0; } body > .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; } /* =================================================================== * STICKY HEADER — APPLIED TO WRAPPER * * v1.3.0 BUG: sticky was applied to .simple-header-* (inner group). The * outer

wrapper is the same height * as the inner group, so sticky had no room to travel — element pinned to * top of an 82px box that scrolls away with the page. * * v1.3.1 FIX: sticky on the wrapper. :has() scopes it to Simple Theme's * headers only, so other themes/parts using core/template-part aren't * affected. :has() supported in Safari 15.4+, Chrome 105+, Firefox 121+. * * Background lives on the wrapper too so the sticky zone is visually * complete (not transparent over scrolled content). * =================================================================== */ header.wp-block-template-part:has(.simple-header-simple), header.wp-block-template-part:has(.simple-header-expanded) { position: sticky; top: 0; z-index: 100; background: var(--wp--custom--simple-chrome--chrome-bg, #FAFAFA); box-shadow: 0 1px 0 var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5), 0 4px 12px rgba(0, 0, 0, 0.04); } /* Editor parity: disable sticky inside Site Editor iframe so the editor * canvas behaves like a static document. Otherwise editor scroll feels * broken when the header refuses to move. */ .editor-styles-wrapper header.wp-block-template-part:has(.simple-header-simple), .editor-styles-wrapper header.wp-block-template-part:has(.simple-header-expanded) { position: relative; box-shadow: 0 1px 0 var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5); } /* Editor-only: hide the post title surface from Gutenberg. * * Glenn's preference: the editor title input gets in the way when the * page itself contains a hero/H1 rendered by a section block. Hiding it * in the editor surface only — front-end core/post-title remains usable * by templates that want it (e.g. single.html, archive.html). * * Targets all known WP-core selectors. Class names have shifted across * versions (5.x → 6.x → 6.5+). Listing both wrapper and legacy classes * keeps the rule resilient to version drift without needing a per-version * branch. * * Scoped to .editor-styles-wrapper so it only applies inside Gutenberg * iframes (post editor, site editor) and never leaks to front-end render. * * post_type_support for 'title' is intentionally NOT removed — that * would break REST writes and migration imports that set post_title. * This is a surface-only hide. */ /* =================================================================== * EDITOR CANVAS — FULL-BLEED LAYOUT (v1.8.03) * * The Gutenberg post editor (and to a lesser extent the Site Editor) * applies a writing-area constraint to .editor-styles-wrapper that * doesn't always read theme.json's settings.layout values cleanly. With * theme.json layout root at 100%/100% (v1.8.02), the frontend renders * full-bleed correctly but the editor canvas still felt narrow because * WP-core hardcodes a content-size on the wrapper. * * Override the global CSS custom properties WP-core reads for layout * computations, plus enforce max-width: 100% on the wrapper itself. * Block-level constrained groups (e.g. page.html's inner 760/1200 group) * still self-constrain because they read from their own block attrs. * * Editor canvas now matches frontend: full-bleed default, with explicit * constrained groups inside content for prose-readable line widths. * =================================================================== */ .editor-styles-wrapper { --wp--style--global--content-size: 100%; --wp--style--global--wide-size: 100%; max-width: 100%; /* v1.8.04: WP applies .has-global-padding to .is-root-container which * pulls these vars to paint left/right gutters on the writing canvas. * Zero them here so editor canvas is true edge-to-edge. Block-level * groups that DO want padding still get it via their own block attrs. */ --wp--style--root--padding-left: 0; --wp--style--root--padding-right: 0; } /* Inside the editor, .wp-site-blocks (the WP root content wrapper) also * sometimes carries an inline max-width that doesn't honor the var. Pin * it to 100% so default-aligned blocks fill the canvas. */ .editor-styles-wrapper .wp-site-blocks { max-width: 100%; } .editor-styles-wrapper .editor-visual-editor__post-title-wrapper, .editor-styles-wrapper .wp-block-post-title.editor-post-title, .editor-styles-wrapper .editor-post-title, .editor-styles-wrapper .editor-post-title__input { display: none; } /* =================================================================== * EDITOR CANVAS GUTTER (prose-family templates only) * * v1.19.04 — Glenn report: post.php editor canvas renders flush to viewport * edge for posts on the Prose template because the .simple-main-prose * wrapper only exists in the rendered template, not in the post-content * edit canvas. * * functions.php :: simple_theme_admin_body_class_for_template() appends * the .simple-editor-prose-gutter class to on post.php / post-new.php * when the assigned template is one of: prose, single, single-with-sidebar, * single-with-topbar. Default + Compact templates are excluded — those are * layout-canvases meant to host full-bleed blocks. * * We pad the iframe body when the class is present, and the editor wrapper * inside the iframe (WP propagates body classes into the editor iframe). * Vertical rhythm + inline gutter both — Glenn's note included "no padding * at all" not just left/right. * =================================================================== */ /* =================================================================== * EDITOR CANVAS PARITY (v1.19.09 — comprehensive rebuild) * * Glenn report: "shouldn't back end look pretty close to the fe?" * * Root cause of v1.19.07's editor-gutter failure: the body class * .simple-editor-prose-gutter was being added to wp-admin by * admin_body_class filter, but the editor canvas is an IFRAME with its * OWN . WP does not propagate admin body classes into iframe * bodies. So every rule scoped `body.simple-editor-prose-gutter ...` * never matched anything inside the editor. * * Fix: drop body-class scoping for in-iframe rules. chrome.css is * enqueued inside the iframe via add_editor_style(), so any rule * targeting `.editor-styles-wrapper` (the canvas root inside the * iframe) will fire. Apply gutter + typography rhythm unconditionally * to the canvas so the editor previews chrome-accurate body content. * * Scope: this block intentionally mirrors what frontend templates * apply via .is-style-prose-group + .simple-main-prose, but targets * the editor canvas instead. Frontend rules remain authoritative for * shipped pages; this block aligns the editor preview to them. * * Three pieces: * 1. Canvas gutter — padding-block + padding-inline on the wrapper * so content doesn't run flush to the iframe edges. * 2. Canvas typography — bind the wrapper's font-family explicitly * so the editor doesn't fall back to the iframe's browser default * (Times-class serif on most browsers). Match the chrome --font-family * so the editor shows what the frontend will show. * 3. Canvas type rhythm — H1/H2/H3/p/ul/ol margins match prose-group. * Without this, all blocks render with WP-core default rhythm * (tight, undifferentiated), and authors can't see hierarchy * as they edit. * * Note: this is NOT a substitute for the frontend's .simple-main + * .simple-article-body styling. The editor canvas approximates; * frontend renders the structural template wrappers that the editor * cannot show (header chrome, hero split, footer). Preview button * remains the source of truth for full-page accuracy. * =================================================================== */ /* (1) Canvas gutter — replaces the v1.19.07 body-class-scoped rules. */ .editor-styles-wrapper { padding-block: clamp(32px, 6vw, 80px); padding-inline: clamp(24px, 4vw, 48px); } @media (max-width: 600px) { .editor-styles-wrapper { padding-inline: 20px; } } /* (2) Canvas typography — force chrome --font-family so the iframe * doesn't render Times-class browser default. */ .editor-styles-wrapper, .editor-styles-wrapper p, .editor-styles-wrapper li, .editor-styles-wrapper ul, .editor-styles-wrapper ol, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 { font-family: var(--wp--custom--simple-chrome--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); } .editor-styles-wrapper { color: var(--wp--custom--simple-chrome--text, #1A1A1A); } .editor-styles-wrapper p { line-height: 1.65; } /* (3) Canvas type rhythm — mirror prose-group margins so headings * render with visible hierarchy. */ .editor-styles-wrapper h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--wp--custom--simple-chrome--heading, #0F0F0F); margin-block: 0 var(--wp--preset--spacing--40, 1.5rem); } .editor-styles-wrapper h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--wp--custom--simple-chrome--heading, #0F0F0F); margin-block: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--30, 0.75rem); } .editor-styles-wrapper h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.25; color: var(--wp--custom--simple-chrome--heading, #0F0F0F); margin-block: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--20, 0.5rem); } .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 { font-weight: 600; color: var(--wp--custom--simple-chrome--heading, #0F0F0F); margin-block: var(--wp--preset--spacing--40, 1.25rem) var(--wp--preset--spacing--20, 0.5rem); } .editor-styles-wrapper ul, .editor-styles-wrapper ol, .editor-styles-wrapper .wp-block-list { padding-inline-start: var(--wp--preset--spacing--50, 1.5rem); } .editor-styles-wrapper li + li { margin-block-start: var(--wp--preset--spacing--20, 0.5rem); } .editor-styles-wrapper li > ul, .editor-styles-wrapper li > ol { margin-block-start: var(--wp--preset--spacing--20, 0.5rem); } /* v1.20.0 — Editor canvas previews journalistic wrap. * * When a single template renders in the editor (post.php or site-editor.php), * the .simple-article-body-wrap container shows the featured image as * the first child, intended to float left into the lede. The editor * needs to preview that float so authors see what readers will see. * * Same float rules as frontend, scoped to .editor-styles-wrapper so the * iframe canvas renders the pattern. Mobile breakpoint matches frontend * — at ≤600px iframe width, image becomes full-width above body. */ .editor-styles-wrapper .simple-article-body-wrap .simple-article-featured-wrap, .editor-styles-wrapper .simple-article-body-wrap .wp-block-post-featured-image.simple-article-featured-wrap { float: left; width: 42%; margin: 6px var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--40, 1rem) 0; } .editor-styles-wrapper .simple-article-body-wrap .simple-article-featured-wrap img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; } .editor-styles-wrapper .simple-article-body-wrap h2, .editor-styles-wrapper .simple-article-body-wrap h3, .editor-styles-wrapper .simple-article-body-wrap .wp-block-heading { clear: both; } @media (max-width: 600px) { .editor-styles-wrapper .simple-article-body-wrap .simple-article-featured-wrap { float: none; width: 100%; margin: 0 0 var(--wp--preset--spacing--40, 1.25rem) 0; } } /* Editor drop cap — first paragraph of the post-content block in the * editor canvas previews the same drop cap the frontend will render. * Targets .wp-block-post-content (when content is wrapped) AND the * raw .block-editor-block-list__layout (when editing a standalone post * where no wrapper is rendered in the editor). */ .editor-styles-wrapper .wp-block-post-content > p:first-of-type::first-letter, .editor-styles-wrapper .block-editor-block-list__layout > .wp-block-paragraph:first-of-type p::first-letter { float: left; font-family: var(--wp--custom--simple-chrome--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: 4.5em; line-height: 0.85; padding: 6px 12px 0 0; color: var(--wp--custom--simple-chrome--accent, #666666); font-weight: 700; } /* =================================================================== * SHARED CHROME TYPOGRAPHY * =================================================================== */ .simple-header-simple, .simple-header-expanded, .simple-footer-expanded { font-family: var(--wp--custom--simple-chrome--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); } /* =================================================================== * HEADER — SIMPLE VARIANT * Brand left, nav right, single-row layout. * =================================================================== */ .simple-header-simple { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(24px, 5vw, 64px); color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A); background: var(--wp--custom--simple-chrome--chrome-bg, #FFFFFF); } .simple-header-simple .nav-brand { color: var(--wp--custom--simple-chrome--chrome-text, #0F0F0F); font-size: 16px; font-weight: var(--wp--custom--simple-chrome--heading-weight, 700); letter-spacing: var(--wp--custom--simple-chrome--heading-letter-spacing, 0.5px); text-decoration: none; } .simple-header-simple .nav-links { display: flex; gap: 32px; } .simple-header-simple .nav-links a { color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A); font-size: 12px; font-weight: var(--wp--custom--simple-chrome--link-weight, 500); letter-spacing: var(--wp--custom--simple-chrome--link-letter-spacing, 1px); text-transform: var(--wp--custom--simple-chrome--link-text-transform, uppercase); text-decoration: none; /* v1.19.03 — parity with .simple-header-expanded: animated underline * + accent-flip on hover. Prior rule painted hover color to chrome-text * (same as rest), which read as no hover affordance at all. */ position: relative; transition: color 0.2s ease; } .simple-header-simple .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--wp--custom--simple-chrome--accent, #D4740E); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .simple-header-simple .nav-links a:hover { color: var(--wp--custom--simple-chrome--accent, #D4740E); } .simple-header-simple .nav-links a:hover::after { transform: scaleX(1); } .simple-header-simple .nav-links .current-menu-item a::after { transform: scaleX(1); } /* Submenu chevron — small breathing room between label and arrow. */ .simple-header-simple .nav-links .wp-block-navigation-item__label { margin-right: 4px; } @media (max-width: 768px) { .simple-header-simple { padding: 14px 24px; flex-wrap: wrap; gap: 12px; background: var(--wp--custom--simple-chrome--chrome-bg, #FFFFFF); } .simple-header-simple .nav-links { gap: 16px; flex-wrap: wrap; } } /* =================================================================== * HEADER — EXPANDED VARIANT * Brand + tagline grouped left, nav right, search trailing. * =================================================================== */ .simple-header-expanded { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(24px, 5vw, 64px); color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A); gap: 32px; background: var(--wp--custom--simple-chrome--chrome-bg, #FFFFFF); } .simple-header-expanded .nav-brand-group { display: flex; flex-direction: column; gap: 2px; } .simple-header-expanded .nav-brand { color: var(--wp--custom--simple-chrome--chrome-text, #0F0F0F); font-size: 18px; font-weight: var(--wp--custom--simple-chrome--heading-weight, 700); letter-spacing: var(--wp--custom--simple-chrome--heading-letter-spacing, 0.5px); text-decoration: none; } .simple-header-expanded .nav-tagline { color: var(--wp--custom--simple-chrome--chrome-muted, #666666); font-size: 11px; font-weight: 500; letter-spacing: 1px; } /* Right-side cluster: nav + search */ .simple-header-expanded .nav-cluster { display: flex; align-items: center; gap: 24px; } .simple-header-expanded .nav-links { display: flex; gap: 32px; align-items: center; } .simple-header-expanded .nav-links a { color: var(--wp--custom--simple-chrome--chrome-text, #1A1A1A); font-size: 12px; font-weight: var(--wp--custom--simple-chrome--link-weight, 500); letter-spacing: var(--wp--custom--simple-chrome--link-letter-spacing, 1px); text-transform: var(--wp--custom--simple-chrome--link-text-transform, uppercase); text-decoration: none; /* v1.19.01 — Animated underline. ::after pseudo-element scales from * 0 to 100% width on hover, accent-colored, centered. Color of the * link label also flips to accent so the affordance reads clearly. */ position: relative; transition: color 0.2s ease; } .simple-header-expanded .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--wp--custom--simple-chrome--accent, #D4740E); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } .simple-header-expanded .nav-links a:hover { color: var(--wp--custom--simple-chrome--accent, #D4740E); } .simple-header-expanded .nav-links a:hover::after { transform: scaleX(1); } /* Active-page underline state — persists for the current page's nav item. * WP core navigation block adds .current-menu-item class to the active link. */ .simple-header-expanded .nav-links .current-menu-item a::after { transform: scaleX(1); } /* Submenu chevron — small breathing room between label and arrow. */ .simple-header-expanded .nav-links .wp-block-navigation-item__label { margin-right: 4px; } /* Site logo — when present, replaces wordmark AND tagline as the * primary brand identity. A strong logo is the title; tagline is * supporting copy that becomes redundant against a real brand mark. * * v1.10.03 — Extended from v1.7.0's title-only hide rule. Original * intent shipped `.nav-brand` (the inner site-title

* depending on whether the page is the home page. Empty blogname renders * an empty inner element, so the slot's text content is whitespace-only. * :has() with a text-empty inner element is awkward in CSS, so we use * a class hook (ssla-chrome-site-title-empty) that Launch adds at boot * when it detects empty title text. Style applies regardless of which * inner element type is present. */ body.ssla-ov-editing .ssla-chrome-site-title-slot.ssla-chrome-site-title-empty { min-width: 120px; min-height: 24px; background: var(--wp--custom--simple-chrome--placeholder-fill, #EFEFEF); border: 1px dashed var(--wp--custom--simple-chrome--placeholder-border, #B0B0B0); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; position: relative; } body.ssla-ov-editing .ssla-chrome-site-title-slot.ssla-chrome-site-title-empty::after { content: '+ Site title'; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wp--custom--simple-chrome--placeholder-border, #B0B0B0); pointer-events: none; } /* When the empty class is active, hide the inner block's empty rendering * (the bare with no text) so only the placeholder shows. */ body.ssla-ov-editing .ssla-chrome-site-title-slot.ssla-chrome-site-title-empty .wp-block-site-title { display: none; } /* v1.10.03 — Populated-state boundary affordance. * * Even when populated, the logo slot and site-title slot need a visible * click-target boundary in editing mode so the admin can find them. * Pre-v1.10.03 the populated state was visually flush — admin had to * guess the click location, especially for logo slots that hadn't been * sized yet. Same dashed-border idiom as the empty-state rules, but * lighter (subtle outline only, no background fill — populated content * is the visual focus, the outline is a quiet hint). * * Editing-mode only (body.ssla-ov-editing scope). The slots become * flush again the moment the admin exits editing mode, so public * visitors never see boundary outlines. * * Logo: outlined when populated (img child present). The empty-state * rule above keeps the fill+placeholder when no img. * * Site title: outlined when NOT carrying the empty class (i.e. populated * with real text). The empty-state rule above paints fill+placeholder * when class is present. * * Tagline: outlined when present (no empty-state branch — the tagline * block ships placeholder copy "Subtitle" by default that visually * suffices). Outline only. * * Hover gives a slightly stronger outline so the affordance feels * interactive. No layout shift on hover (outline doesn't push content). */ body.ssla-ov-editing .ssla-chrome-logo-slot:has(.wp-block-site-logo img), body.ssla-ov-editing .ssla-chrome-site-title-slot:not(.ssla-chrome-site-title-empty), body.ssla-ov-editing .ssla-chrome-tagline-slot { outline: 1px dashed var(--wp--custom--simple-chrome--placeholder-border, #B0B0B0); outline-offset: 2px; transition: outline-color 0.15s ease; } body.ssla-ov-editing .ssla-chrome-logo-slot:has(.wp-block-site-logo img):hover, body.ssla-ov-editing .ssla-chrome-site-title-slot:not(.ssla-chrome-site-title-empty):hover, body.ssla-ov-editing .ssla-chrome-tagline-slot:hover { outline-color: #1A1D21; } /* =================================================================== * NAVIGATION SUBMENUS — DROPDOWN BREATHING ROOM * * v1.3.0 had submenu items with WP-core default ~6px vertical padding, * which read as "smooshed". Bump to 12px vertical / 14px horizontal, * with 6px gap from trigger. * * Targets all chrome-level navigations (header simple + expanded), not * footer nav (footer-links uses different layout). * * v1.4.0: hover-gap bug fix. * v1.3.x used `margin-top: 6px` to create the visual gap between the * trigger and the dropdown card. That margin is a transparent corridor * the cursor must cross — and crossing it drops both `:hover` states * (parent

and submenu container), so WP-core's hover-open logic * collapses the submenu before the cursor reaches a child item. * * Fix: keep the 6px visual gap, replace the margin with a transparent * `::before` bridge of the same height. The bridge is part of the * submenu container's box, so :hover stays sticky as the cursor * traverses it. Visual paint is unchanged from v1.3.2 — the card edge * still starts 6px below the trigger baseline. * * Also added: small vertical padding on the trigger anchor itself * (header-expanded + header-simple). The trigger's previous hover hit * area was the text height alone; a diagonal cursor path could exit * the trigger before reaching the bridge. Padding extends the trigger * hit zone vertically without changing baseline alignment. * =================================================================== */ .simple-header-simple .wp-block-navigation__submenu-container, .simple-header-expanded .wp-block-navigation__submenu-container { background: var(--wp--custom--simple-chrome--chrome-bg, #FAFAFA); border: 1px solid var(--wp--custom--simple-chrome--chrome-hairline, #E5E5E5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); padding: 8px 0; min-width: 200px; /* v1.4.0: margin-top removed — see ::before bridge below. */ } /* Hover-bridge — 6px transparent extension above the submenu card so the * cursor never traverses an unhovered surface between trigger and items. * Width matches the submenu container; height matches the prior 6px gap. * * v1.6.0: wrapped in `@media (hover: hover) and (pointer: fine)` so the * bridge only paints on devices with cursor hover. On touch devices core's * mobile overlay (overlayMenu="mobile") replaces the dropdown entirely, * so the bridge is moot — and at intermediate widths above the overlay * threshold the bridge is genuinely useful. The hit-zone padding below * is wrapped in the same guard for the same reason: tap targets don't * need a hover-corridor preserve. */ @media (hover: hover) and (pointer: fine) { .simple-header-simple .wp-block-navigation__submenu-container::before, .simple-header-expanded .wp-block-navigation__submenu-container::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; background: transparent; } /* Trigger hit-zone padding — small vertical pad on parent anchors so a * diagonal cursor path off the label still lands on a hovered surface * before reaching the bridge. Negative margin offsets the layout shift * so brand/title baseline stays where it was in v1.3.x. */ .simple-header-simple .nav-links .wp-block-navigation-item.has-child > a, .simple-header-expanded .nav-links .wp-block-navigation-item.has-child > a { padding-block: 6px; margin-block: -6px; } } .simple-header-simple .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .simple-header-expanded .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 12px 14px; display: block; } .simple-header-simple .wp-block-navigation__submenu-container .wp-block-navigation-item:hover, .simple-header-expanded .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { background: rgba(0, 0, 0, 0.02); } /* =================================================================== * INTER-SECTION FLOW (v1.4.0) * * WP-core emits `:root :where(.is-layout-flow) > * { margin-block-start: * 1.2rem }` from theme.json defaults — applied to every direct child of * any `.is-layout-flow` container. On Simple Theme pages, Launch sections * sit at `

.is-layout-flow >

.entry-content.is-layout-flow > *

with no inline padding. Frontend and Site Editor * canvas both showed content flush to viewport edge. Banner region gets * a negative-margin override so it can break out edge-to-edge. * * For post.php (post editor), the body class .simple-editor-prose-gutter * (added by simple_theme_admin_body_class_for_template in functions.php) * pads the editor canvas directly — see rule above. * =================================================================== */ .simple-main-article { padding-block: clamp(32px, 6vw, 80px); padding-inline: clamp(24px, 4vw, 48px); } @media (max-width: 600px) { .simple-main-article { padding-inline: 20px; } } /* Banner exception — featured-image hero region must break out to viewport * edges. Inside a padded .simple-main-article, the banner needs negative * margin to claw back the parent gutter. Uses calc(-1 * padding) so it * always matches whatever the responsive clamp resolved to. */ .simple-main-article .simple-article-banner { margin-inline: calc(-1 * clamp(24px, 4vw, 48px)); margin-block-start: calc(-1 * clamp(32px, 6vw, 80px)); } @media (max-width: 600px) { .simple-main-article .simple-article-banner { margin-inline: -20px; } } /* =================================================================== * PROSE TEMPLATE — explicit gutter + vertical rhythm * * v1.19.03 — Glenn report: "no padding even when using the Prose theme * page. The front end result is smooshed text and just a not gracious * design page." Root cause:

; regions choose their own width. * * The regions: * .simple-article-banner — full bleed, optional featured image * .simple-article-header — 65%/1200px, eyebrow + title + meta * .simple-article-body — 65%/1200px, prose (uses .is-style-prose-group) * .simple-article-footer — 65%/1200px, tags * .simple-article-pagination — 65%/1200px, 2-col prev/next * .simple-article-related — 1200px, 3-col query grid * .simple-article-sidebar-feature — 1200px, sidebar-as-region (variant only) * * Architectural anchor: each region uses a className hook that doubles * as a block pattern slot. Users dropping the same pattern into other * templates (or rebuilding regions from scratch via Site Editor) get * the same paint because they get the same className. * * Agnostic color contract: every paint reference goes through chrome * tokens. Theme ships neutral defaults; presets paint via theme.json * settings.custom.simple-chrome overrides OR via Launch's globalStyles * surface. No hardcoded brand colors anywhere in this section. * * Specificity strategy: bare className selectors (0,1,0) — same as * prose-group. theme.json / Site Editor styles override cleanly. No * !important. Block-element-modifier sub-rules at (0,2,0). * ===================================================================== */ /* --- Region 1: Hero (v1.20.0 — journalistic wrap pattern) ---------- * * Glenn report on v1.19.x ship cycle: the split-column hero * (image 1/3, masthead 2/3) reads as two stacked sections, not one * editorial unit. The image and the lede are spatially disconnected; * a "shelf" sits between hero and first paragraph. * * Replacement pattern (newspaper / magazine convention): the masthead * (eyebrow + title + meta) spans full content column above. Below, the * featured image floats LEFT into the body and the first 2-3 paragraphs * wrap around it. After the wrap clears, body returns to full column. * * Markup contract (single.html, single-with-sidebar.html, single-with-topbar.html): * * .simple-article-hero.simple-article-hero-masthead (constrained 820px) * > .simple-article-eyebrow (post-terms — accent) * > .simple-article-title (post-title h1) * > .simple-article-meta (byline / date / read-time, with rules) * * .simple-article-body.simple-article-body-wrap.is-style-prose-group (constrained 820px) * > .simple-article-featured-wrap (post-featured-image, floats left) * > [post-content rendered here] (first

wraps around image) * * The featured image MUST be the first child of the body block so it * floats into paragraph 1. Mobile (≤600px): image becomes full-width * above the body, no float. No-image case: figure with no child * collapses via :has() detection, body reads as title-dominant flow. * * The .simple-article-hero-split selector and its rules are retained * below as deprecated — any in-flight templates referencing them will * still paint, but new shipped templates use -masthead + -body-wrap. * ---------------------------------------------------------------------- */ /* Hero masthead — eyebrow + title + meta, full 820px column */ .simple-article-hero { margin-block-end: var(--wp--preset--spacing--60, 2rem); } .simple-article-hero-masthead { display: flex; flex-direction: column; } .simple-article-hero-masthead .simple-article-eyebrow, .simple-article-hero-masthead .simple-article-eyebrow a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--wp--custom--simple-chrome--eyebrow-tracking, 0.15em); color: var(--wp--custom--simple-chrome--accent, #666666); margin: 0 0 var(--wp--preset--spacing--30, 1rem); text-decoration: none; } .simple-article-hero-masthead .simple-article-title { font-family: var(--wp--custom--simple-chrome--font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--wp--custom--simple-chrome--heading, #0F0F0F); margin: 0 0 var(--wp--preset--spacing--40, 1.5rem); } .simple-article-hero-masthead .simple-article-meta { display: flex; gap: var(--wp--preset--spacing--40, 1.25rem); align-items: center; flex-wrap: wrap; padding-block: var(--wp--preset--spacing--30, 0.85rem); border-block-start: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5); border-block-end: 1px solid var(--wp--custom--simple-chrome--hairline, #E5E5E5); font-size: 13px; color: var(--wp--custom--simple-chrome--muted, #666666); margin: 0; } .simple-article-hero-masthead .simple-article-byline { color: var(--wp--custom--simple-chrome--text, #1A1A1A); font-weight: 500; } /* Body wrap — featured image floats into first paragraphs */ .simple-article-body-wrap { margin-block-end: var(--wp--preset--spacing--70, 3rem); } .simple-article-body-wrap .simple-article-featured-wrap, .simple-article-body-wrap .wp-block-post-featured-image.simple-article-featured-wrap { float: left; width: 42%; margin: 6px var(--wp--preset--spacing--50, 2rem) var(--wp--preset--spacing--40, 1rem) 0; } .simple-article-body-wrap .simple-article-featured-wrap img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; } /* Subheads inside the body force clear so they break out of the wrap * rather than getting trapped inside the floated image's column. */ .simple-article-body-wrap h2, .simple-article-body-wrap h3, .simple-article-body-wrap .wp-block-heading { clear: both; } /* Mobile: image becomes full-width above the body. No float. */ @media (max-width: 600px) { .simple-article-body-wrap .simple-article-featured-wrap, .simple-article-body-wrap .wp-block-post-featured-image.simple-article-featured-wrap { float: none; width: 100%; margin: 0 0 var(--wp--preset--spacing--40, 1.25rem) 0; } .simple-article-body-wrap .simple-article-featured-wrap img { aspect-ratio: 16 / 9; } } /* --- No-featured-image fallback (v1.20.0) -------------------------- * * When the post has no featured image, WP renders an empty