/* Theme Name: Watershed Wellness (Blocks) Theme URI: https://watershedwellnessastoria.com Author: Watershed Wellness Author URI: https://watershedwellnessastoria.com Description: Block theme for Watershed Wellness, Astoria. Replaces the SeedProd theme-builder layer so templates live in files and are editable over the REST API. Visual target is the SeedProd design as it stood 2026-07-29. Version: 0.1.0 Requires at least: 6.7 Tested up to: 7.0.2 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ww-block-theme Tags: blog, one-column, custom-colors, custom-menu, block-templates, full-site-editing */ /* Nearly all styling belongs in theme.json rather than here. This file exists for the theme header above and for the few rules that theme.json cannot express. Palette and type were lifted from the SeedProd Global CSS record (post 8155) on production, 2026-07-29. Do not "tidy" these values -- they are the look-and-feel contract, and drift here is drift on the live site. */ /* Underline links in content, matching the SeedProd global rule a{text-decoration:underline}. */ .wp-block-post-content a:where(:not(.wp-element-button)), .entry-content a:where(:not(.wp-element-button)) { text-decoration: underline; } /* h1 and h4 are uppercase in the SeedProd global CSS; theme.json has no textTransform for individual heading levels in a way that survives all contexts, so they live here. */ h1, .wp-block-post-title { text-transform: uppercase; } h4 { text-transform: uppercase; } /*-------------------------------------------------------------- Wave section dividers Ported from the SeedProd Single Page template (record 8163). The SVGs live in patterns/wave-divider-{top,bottom}.php; these rules reproduce the sizing and fill from that template's inline CSS exactly. Changing a value here changes the live look. --------------------------------------------------------------*/ .ww-wave { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; pointer-events: none; } .ww-wave svg { position: relative; left: 50%; display: block; width: 100%; } .ww-wave--top { top: 0; } .ww-wave--top svg { height: 35px; transform: translateX(-50%) rotateY(180deg); } .ww-wave--top .seedprod-shape-fill { fill: #cccccc; } .ww-wave--bottom { bottom: 0; } .ww-wave--bottom svg { height: 75px; transform: translateX(-50%); } .ww-wave--bottom .seedprod-shape-fill { fill: #396f9d; } /* Sections that host wave dividers need a positioning context and room for them. */ .ww-section--waves { position: relative; } /*-------------------------------------------------------------- Header — ported from SeedProd record 8157 --------------------------------------------------------------*/ /* The header owns a stacking context above the page, so its dropdowns are never painted over by page decoration. Without this the grey wave went IN FRONT of an open submenu. The wave is an absolutely positioned ::after on the title band carrying z-index 2, and the band comes after the header in document order -- so with the header unpositioned, the wave won every overlap. Dropdowns hang down into exactly the strip the wave occupies, which is why it showed up the moment a menu was opened and never otherwise. 100 rather than 3: the "Schedule Now" tab and any future sticky element should also lose to the navigation. */ .ww-header { position: relative; z-index: 100; } .ww-header .wp-block-navigation { --wp--style--block-gap: 0; } .ww-header .wp-block-navigation .wp-block-navigation-item { padding: 0 3px; } .ww-header .wp-block-navigation a { color: #1a3c57; text-decoration: none; } .ww-header .wp-block-navigation a:hover, .ww-header .wp-block-navigation a:focus { color: #396f9d; } /* Dropdowns: white, rounded, with the original two-layer shadow. */ .ww-header .wp-block-navigation .wp-block-navigation__submenu-container { padding: 7px; border: 0; border-radius: 6px; background-color: #ffffff; line-height: 21px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.6); } .ww-header .wp-block-navigation .wp-block-navigation__submenu-container a { color: #1a3c57; } .ww-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover { color: #396f9d; } /* Mobile hamburger matches the original bar colour. */ .ww-header .wp-block-navigation__responsive-container-open, .ww-header .wp-block-navigation__responsive-container-close { color: #1a3c57; } /*-------------------------------------------------------------- Footer — ported from SeedProd record 8158 --------------------------------------------------------------*/ .ww-footer__search .wp-block-search__input { height: 45px; border: 0; border-radius: 0; background: #ffffff; color: #1a3c57; padding-left: 1rem; } .ww-footer__search .wp-block-search__button { height: 45px; margin: 0; border: 0; border-radius: 0; background: #c95426; color: #ffffff; padding: 0 0.75rem; } .ww-footer__search .wp-block-search__button svg { fill: currentColor; } .ww-footer__links a { color: #ffffff; text-decoration: none; } .ww-footer__links a:hover { text-decoration: underline; } .ww-footer__divider { padding: 0 10px; } /* Original icons render at 40px; core's "large" preset is 36px. */ .ww-footer__social.has-large-icon-size { --wp--preset--font-size--normal: 40px; font-size: 40px; } .ww-footer__social .wp-social-link svg { width: 40px; height: 40px; fill: #ffffff; } .ww-footer__social .wp-social-link { background-color: transparent; padding: 0; } /* Nav item spacing: SeedProd used padding 0 3px per item with no flex gap. Core navigation's default gap is far wider and pushed "Gift Cards" onto a second row at 1276px viewport. */ .ww-header .wp-block-navigation.is-content-justification-right { gap: 6px; } .ww-header .wp-block-navigation .wp-block-navigation__container { gap: 6px; } /* Waves are direct children of a constrained-layout group, so WordPress caps them at contentSize (1000px) via .is-layout-constrained > :where(:not(.alignfull)) { max-width: ... } They carry .alignfull to opt out. This belt-and-braces rule keeps them full-bleed even if the class is lost in an edit, because a clipped divider is very visible. */ .ww-wave { max-width: none; } /*-------------------------------------------------------------- Homepage — ported from SeedProd record 8160 --------------------------------------------------------------*/ /* The hero statement box is capped at 650px and centred, matching the original row style (background #396F9D, width auto, max-width 650px). */ .ww-hero__statement { margin-inline: auto; } /* Google Maps embed in the location section. */ .ww-map iframe { display: block; width: 100%; border: 0; } /* Service cards: keep image heights consistent across the two rows so the headings line up. The source images vary (568-600px wide). */ .ww-services .wp-block-image img { width: 100%; height: auto; } /* Service card buttons line up even when the copy above them does not. Columns already stretch to the tallest in their row, so the ragged edge comes from the button sitting immediately after a paragraph of whatever length -- "Massage Therapy" runs longer than its neighbours and pushes its own button down. Making each column a flex column lets the button block absorb the slack, pinning every button to the same baseline without touching the copy. The padding replaces the margin, and is not decoration. `margin-top: auto` consumes the block's own top margin, so in the TALLEST column of each row -- the one with no slack to absorb -- the 24px gap above the button vanished and the whole section lost 48px. Moving that 24px into padding restores the gap in the tallest column while still letting the shorter ones stretch. */ .ww-services .wp-block-column { display: flex; flex-direction: column; } .ww-services .wp-block-column > .wp-block-buttons { margin-top: auto; padding-top: 24px; } /* Blog cards: post titles run one to three lines depending on the post, which shifts the excerpt below them and leaves the row ragged. Reserving three lines on every title lands all three excerpts on the same baseline and costs nothing on the posts that already use three. 1.7em is the title's own 34px line-height over its 20px size, so this tracks the font rather than hard-coding pixels. Deliberately NOT the flex treatment used for the service cards above: `post-featured-image` sizes itself from an `aspectRatio` attribute via `height: 100%`, which has nothing to resolve against inside a flex column. It stretched the 3/2 images to square and made the section 127px taller than production. */ .wp-block-post-template > li > .wp-block-post-title { min-height: calc(3 * 1.7em); } /* The grey wave, attached to the bottom edge of every navy title banner. Jisho: "it should be ATTACHED to the banner, not just below. And it should be consistent across most pages." Both halves of that were broken. The wave sat 24px low because the root layout puts a block gap between the banner group and main, and the 12 converted pages had no wave at all -- their banner lives inside post-content, where the template's pattern never reached. Drawing it as a pseudo-element on the banner fixes both at once: it cannot drift from the banner because it is anchored to it, and it follows the banner wherever the banner lives, template or content. It also cannot be deleted by accident while editing content, which a pattern block sitting in the content stream can. The shape is the same SeedProd path as patterns/wave-divider-top.php, inlined as a data %3Csvg fill='%23cccccc' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 27.8' preserveAspectRatio='none'%3E %3Cpath class='seedprod-shape-fill' d='M283.5,9.7c0,0-7.3,4.3-14,4.6c-6.8,0.3-12.6,0-20.9-1.5c-11.3-2-33.1-10.1-44.7-5.7 s-12.1,4.6-18,7.4c-6.6,3.2-20,9.6-36.6,9.3C131.6,23.5,99.5,7.2,86.3,8c-1.4,0.1-6.6,0.8-10.5,2c-3.8,1.2-9.4,3.8-17,4.7 c-3.2,0.4-8.3,1.1-14.2,0.9c-1.5-0.1-6.3-0.4-12-1.6c-5.7-1.2-11-3.1-15.8-3.7C6.5,9.2,0,10.8,0,10.8V0h283.5V9.7z M260.8,11.3 c-0.7-1-2-0.4-4.3-0.4c-2.3,0-6.1-1.2-5.8-1.1c0.3,0.1,3.1,1.5,6,1.9C259.7,12.2,261.4,12.3,260.8,11.3z M242.4,8.6 c0,0-2.4-0.2-5.6-0.9c-3.2-0.8-10.3-2.8-15.1-3.5c-8.2-1.1-15.8,0-15.1,0.1c0.8,0.1,9.6-0.6,17.6,1.1c3.3,0.7,9.3,2.2,12.4,2.7 C239.9,8.7,242.4,8.6,242.4,8.6z M185.2,8.5c1.7-0.7-13.3,4.7-18.5,6.1c-2.1,0.6-6.2,1.6-10,2c-3.9,0.4-8.9,0.4-8.8,0.5 c0,0.2,5.8,0.8,11.2,0c5.4-0.8,5.2-1.1,7.6-1.6C170.5,14.7,183.5,9.2,185.2,8.5z M199.1,6.9c0.2,0-0.8-0.4-4.8,1.1 c-4,1.5-6.7,3.5-6.9,3.7c-0.2,0.1,3.5-1.8,6.6-3C197,7.5,199,6.9,199.1,6.9z M283,6c-0.1,0.1-1.9,1.1-4.8,2.5s-6.9,2.8-6.7,2.7 c0.2,0,3.5-0.6,7.4-2.5C282.8,6.8,283.1,5.9,283,6z M31.3,11.6c0.1-0.2-1.9-0.2-4.5-1.2s-5.4-1.6-7.8-2C15,7.6,7.3,8.5,7.7,8.6 C8,8.7,15.9,8.3,20.2,9.3c2.2,0.5,2.4,0.5,5.7,1.6S31.2,11.9,31.3,11.6z M73,9.2c0.4-0.1,3.5-1.6,8.4-2.6c4.9-1.1,8.9-0.5,8.9-0.8 c0-0.3-1-0.9-6.2-0.3S72.6,9.3,73,9.2z M71.6,6.7C71.8,6.8,75,5.4,77.3,5c2.3-0.3,1.9-0.5,1.9-0.6c0-0.1-1.1-0.2-2.7,0.2 C74.8,5.1,71.4,6.6,71.6,6.7z M93.6,4.4c0.1,0.2,3.5,0.8,5.6,1.8c2.1,1,1.8,0.6,1.9,0.5c0.1-0.1-0.8-0.8-2.4-1.3 C97.1,4.8,93.5,4.2,93.6,4.4z M65.4,11.1c-0.1,0.3,0.3,0.5,1.9-0.2s2.6-1.3,2.2-1.2s-0.9,0.4-2.5,0.8C65.3,10.9,65.5,10.8,65.4,11.1 z M34.5,12.4c-0.2,0,2.1,0.8,3.3,0.9c1.2,0.1,2,0.1,2-0.2c0-0.3-0.1-0.5-1.6-0.4C36.6,12.8,34.7,12.4,34.5,12.4z M152.2,21.1 c-0.1,0.1-2.4-0.3-7.5-0.3c-5,0-13.6-2.4-17.2-3.5c-3.6-1.1,10,3.9,16.5,4.1C150.5,21.6,152.3,21,152.2,21.1z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M269.6,18c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3 C267.7,18.8,269.7,18,269.6,18z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M227.4,9.8c-0.2-0.1-4.5-1-9.5-1.2c-5-0.2-12.7,0.6-12.3,0.5c0.3-0.1,5.9-1.8,13.3-1.2 S227.6,9.9,227.4,9.8z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M204.5,13.4c-0.1-0.1,2-1,3.2-1.1c1.2-0.1,2,0,2,0.3c0,0.3-0.1,0.5-1.6,0.4 C206.4,12.9,204.6,13.5,204.5,13.4z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M201,10.6c0-0.1-4.4,1.2-6.3,2.2c-1.9,0.9-6.2,3.1-6.1,3.1c0.1,0.1,4.2-1.6,6.3-2.6 S201,10.7,201,10.6z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M154.5,26.7c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3 C152.6,27.5,154.6,26.8,154.5,26.7z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M41.9,19.3c0,0,1.2-0.3,2.9-0.1c1.7,0.2,5.8,0.9,8.2,0.7c4.2-0.4,7.4-2.7,7-2.6 c-0.4,0-4.3,2.2-8.6,1.9c-1.8-0.1-5.1-0.5-6.7-0.4S41.9,19.3,41.9,19.3z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M75.5,12.6c0.2,0.1,2-0.8,4.3-1.1c2.3-0.2,2.1-0.3,2.1-0.5c0-0.1-1.8-0.4-3.4,0 C76.9,11.5,75.3,12.5,75.5,12.6z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M15.6,13.2c0-0.1,4.3,0,6.7,0.5c2.4,0.5,5,1.9,5,2c0,0.1-2.7-0.8-5.1-1.4 C19.9,13.7,15.7,13.3,15.6,13.2z'%3E%3C/path%3E %3C/svg%3E with its #cccccc fill baked in. scaleX(-1) reproduces the rotateY(180deg) that production applies. Do not redraw these curves by hand -- they are the brand. Production's equivalent is absolutely positioned at top:0 of the section FOLLOWING the banner, which lands in the same place; anchoring to the banner is the same result with one less thing to keep in sync. */ .ww-title-band { position: relative; } .ww-title-band::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 35px; background-image: url("data:image/svg+xml,%3Csvg fill='%23cccccc' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 27.8' preserveAspectRatio='none'%3E %3Cpath class='seedprod-shape-fill' d='M283.5,9.7c0,0-7.3,4.3-14,4.6c-6.8,0.3-12.6,0-20.9-1.5c-11.3-2-33.1-10.1-44.7-5.7 s-12.1,4.6-18,7.4c-6.6,3.2-20,9.6-36.6,9.3C131.6,23.5,99.5,7.2,86.3,8c-1.4,0.1-6.6,0.8-10.5,2c-3.8,1.2-9.4,3.8-17,4.7 c-3.2,0.4-8.3,1.1-14.2,0.9c-1.5-0.1-6.3-0.4-12-1.6c-5.7-1.2-11-3.1-15.8-3.7C6.5,9.2,0,10.8,0,10.8V0h283.5V9.7z M260.8,11.3 c-0.7-1-2-0.4-4.3-0.4c-2.3,0-6.1-1.2-5.8-1.1c0.3,0.1,3.1,1.5,6,1.9C259.7,12.2,261.4,12.3,260.8,11.3z M242.4,8.6 c0,0-2.4-0.2-5.6-0.9c-3.2-0.8-10.3-2.8-15.1-3.5c-8.2-1.1-15.8,0-15.1,0.1c0.8,0.1,9.6-0.6,17.6,1.1c3.3,0.7,9.3,2.2,12.4,2.7 C239.9,8.7,242.4,8.6,242.4,8.6z M185.2,8.5c1.7-0.7-13.3,4.7-18.5,6.1c-2.1,0.6-6.2,1.6-10,2c-3.9,0.4-8.9,0.4-8.8,0.5 c0,0.2,5.8,0.8,11.2,0c5.4-0.8,5.2-1.1,7.6-1.6C170.5,14.7,183.5,9.2,185.2,8.5z M199.1,6.9c0.2,0-0.8-0.4-4.8,1.1 c-4,1.5-6.7,3.5-6.9,3.7c-0.2,0.1,3.5-1.8,6.6-3C197,7.5,199,6.9,199.1,6.9z M283,6c-0.1,0.1-1.9,1.1-4.8,2.5s-6.9,2.8-6.7,2.7 c0.2,0,3.5-0.6,7.4-2.5C282.8,6.8,283.1,5.9,283,6z M31.3,11.6c0.1-0.2-1.9-0.2-4.5-1.2s-5.4-1.6-7.8-2C15,7.6,7.3,8.5,7.7,8.6 C8,8.7,15.9,8.3,20.2,9.3c2.2,0.5,2.4,0.5,5.7,1.6S31.2,11.9,31.3,11.6z M73,9.2c0.4-0.1,3.5-1.6,8.4-2.6c4.9-1.1,8.9-0.5,8.9-0.8 c0-0.3-1-0.9-6.2-0.3S72.6,9.3,73,9.2z M71.6,6.7C71.8,6.8,75,5.4,77.3,5c2.3-0.3,1.9-0.5,1.9-0.6c0-0.1-1.1-0.2-2.7,0.2 C74.8,5.1,71.4,6.6,71.6,6.7z M93.6,4.4c0.1,0.2,3.5,0.8,5.6,1.8c2.1,1,1.8,0.6,1.9,0.5c0.1-0.1-0.8-0.8-2.4-1.3 C97.1,4.8,93.5,4.2,93.6,4.4z M65.4,11.1c-0.1,0.3,0.3,0.5,1.9-0.2s2.6-1.3,2.2-1.2s-0.9,0.4-2.5,0.8C65.3,10.9,65.5,10.8,65.4,11.1 z M34.5,12.4c-0.2,0,2.1,0.8,3.3,0.9c1.2,0.1,2,0.1,2-0.2c0-0.3-0.1-0.5-1.6-0.4C36.6,12.8,34.7,12.4,34.5,12.4z M152.2,21.1 c-0.1,0.1-2.4-0.3-7.5-0.3c-5,0-13.6-2.4-17.2-3.5c-3.6-1.1,10,3.9,16.5,4.1C150.5,21.6,152.3,21,152.2,21.1z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M269.6,18c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3 C267.7,18.8,269.7,18,269.6,18z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M227.4,9.8c-0.2-0.1-4.5-1-9.5-1.2c-5-0.2-12.7,0.6-12.3,0.5c0.3-0.1,5.9-1.8,13.3-1.2 S227.6,9.9,227.4,9.8z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M204.5,13.4c-0.1-0.1,2-1,3.2-1.1c1.2-0.1,2,0,2,0.3c0,0.3-0.1,0.5-1.6,0.4 C206.4,12.9,204.6,13.5,204.5,13.4z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M201,10.6c0-0.1-4.4,1.2-6.3,2.2c-1.9,0.9-6.2,3.1-6.1,3.1c0.1,0.1,4.2-1.6,6.3-2.6 S201,10.7,201,10.6z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M154.5,26.7c-0.1-0.1-4.6,0.3-7.2,0c-7.3-0.7-17-3.2-16.6-2.9c0.4,0.3,13.7,3.1,17,3.3 C152.6,27.5,154.6,26.8,154.5,26.7z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M41.9,19.3c0,0,1.2-0.3,2.9-0.1c1.7,0.2,5.8,0.9,8.2,0.7c4.2-0.4,7.4-2.7,7-2.6 c-0.4,0-4.3,2.2-8.6,1.9c-1.8-0.1-5.1-0.5-6.7-0.4S41.9,19.3,41.9,19.3z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M75.5,12.6c0.2,0.1,2-0.8,4.3-1.1c2.3-0.2,2.1-0.3,2.1-0.5c0-0.1-1.8-0.4-3.4,0 C76.9,11.5,75.3,12.5,75.5,12.6z'%3E%3C/path%3E %3Cpath class='seedprod-shape-fill' d='M15.6,13.2c0-0.1,4.3,0,6.7,0.5c2.4,0.5,5,1.9,5,2c0,0.1-2.7-0.8-5.1-1.4 C19.9,13.7,15.7,13.3,15.6,13.2z'%3E%3C/path%3E %3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; transform: scaleX(-1); pointer-events: none; z-index: 2; } /* Whatever follows the banner has to leave room for the wave to lie over. */ .ww-title-band + * { padding-top: 40px; } /* Accordions on the modality pages. Jisho: "On all of these accordions (all modality pages) I'd like the text to be bigger." Production's summary line sits at 18px; 20px for the question and 17px for the answer body reads a step up from that without shouting. He also mentioned production puts each item on a white background and that he does not mind either way, so that is left alone. */ /* Each item sits on white, which Jisho noticed was missing: "maybe it's the lack of the white background?" He was right -- production's
elements are rgb(255,255,255) against the section's faint grey, with a 14.5px gap between them. Production runs them at zero padding, so the white is exactly the text box; a little padding here gives the relaxed feel he asked for on this page without changing the rhythm. */ .wp-block-details { margin-bottom: 14px; background-color: #ffffff; padding: 4px 18px; } /* Weight stays at production's 400. Bumping the size to 20px was what Jisho asked for; bumping the weight along with it was not, and at 20px semibold the questions read as shouting -- "it seems VERY intense compared to production". Size up, weight unchanged. */ .wp-block-details > summary { font-size: 20px; font-weight: 400; padding: 12px 0; cursor: pointer; } .wp-block-details > :not(summary) { font-size: 17px; } /* Byline on a single post. Jisho wanted it centred rather than left-justified, and the author photo round -- "I don't really care if the image is square or circle but circle I guess looks more modern." */ .ww-postinfo .wp-block-avatar img { border-radius: 50%; } /* Section dividers lifted from production's Acupuncture page. Jisho, twice: "there's a blue wave form looking thing below that button that separates the sections", and of the "learn more" header, "there's a stylistic choice with some jaggedness on the bottom edge... these little elements take the site from being a boring template to being something that represents our brand." SeedProd injects these with JavaScript -- the shape divs are empty in the HTML and stay empty in the DOM until its script fills them, which is why they vanished in the port. Reading them out of the live DOM and inlining them here removes that dependency entirely: the shapes are now ours, in a file, with no plugin and no script. Both are drawn as ::after on the section they belong to, the same construction as the title band's wave, so they cannot drift from their section and cannot be deleted by accident while editing content. Production positions them absolutely at the bottom of the section, which is the same result. FOLD: viewBox 0 0 283.5 19.6, four nested bands, #396F9D, 39px tall. JAGGED: viewBox 0 0 1800 5.8, one 2685-character sawtooth, white, 22px tall. Transcribed verbatim -- do not "simplify" it to a generated zigzag, the irregularity is the character of it. */ .ww-divider-fold, .ww-divider-jagged { position: relative; } .ww-divider-fold::after, .ww-divider-jagged::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 2; } .ww-divider-fold::after { height: 39px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 19.6' preserveAspectRatio='none' fill='%23396F9D'%3E%3Cpath d='M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z'/%3E%3Cpath d='M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z'/%3E%3Cpath d='M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z'/%3E%3Cpath d='M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z'/%3E%3C/svg%3E"); } /* Rotated, and this is the bit that was missing rather than the shape itself. Every sp-section-bottom holder on production carries transform: matrix(-1,0,0,-1,0,0), a flat 180 degree flip. Without it the white fill sits the wrong way round: spikes point UP into the gold band instead of gold spikes pointing DOWN into white, which reads as a completely different ornament. Jisho: "much longer, thinner spikes and was pointed in the opposite direction." The path itself was already exact -- 2685 characters, hashing identical to the one in production's DOM -- so nothing about the transcription needed redoing. */ .ww-divider-jagged::after { transform: rotate(180deg); height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 5.8' preserveAspectRatio='none' fill='%23FFFFFF'%3E%3Cpath d='M5.4.4l5.4 5.3L16.5.4l5.4 5.3L27.5.4 33 5.7 38.6.4l5.5 5.4h.1L49.9.4l5.4 5.3L60.9.4l5.5 5.3L72 .4l5.5 5.3L83.1.4l5.4 5.3L94.1.4l5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.4 5.3L161 .4l5.4 5.3L172 .4l5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3L261 .4l5.4 5.3L272 .4l5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3L361 .4l5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.6-5.4 5.5 5.3L461 .4l5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1L550 .4l5.4 5.3L561 .4l5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2L650 .4l5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2L750 .4l5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.4h.2L850 .4l5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.4 5.3 5.7-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.4 5.3 5.7-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.4h.2l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.7-5.4 5.4 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.5 5.4h.1l5.6-5.4 5.5 5.3 5.6-5.3 5.5 5.3 5.6-5.3 5.4 5.3 5.7-5.3 5.4 5.3 5.6-5.3 5.5 5.4V0H-.2v5.8z'/%3E%3C/svg%3E"); } /* Room for the divider to sit in, so it never lies over the last line of copy. */ .ww-divider-fold { padding-bottom: 55px; } /* No gap between full-bleed sections, anywhere. This is the actual source of the white strips, and it was never specific to the gold band. The root layout puts a 24px block gap between every top-level block, so on a converted page EVERY pair of sections is separated by 24px of nothing. Wherever the two backgrounds differ the page shows through as a stripe -- gold against grey is simply the pair with enough contrast to notice. A sweep found five such gaps on /acupuncture/ alone. Sections carry their own generous padding (30-118px), so the vertical rhythm does not depend on this gap and nothing collapses without it. */ .wp-block-post-content > * + * { margin-block-start: 0; } /* Air around the gold band WITHOUT a white strip. Jisho asked for "more space above and below the learn more section" and I gave it 48px of margin. That was the wrong instrument. These are full-bleed bands, so a margin between two of them is not space -- it is a window onto the page background, which reads as an unexplained white stripe. He came back with "I'm really not feeling the white strip above the learn more bands... not sure why they are there." The air is the same; it just lives in padding now, so a background fills it. The band carries its own top padding, and the section that follows carries the bottom half. Nothing between two bands is ever left transparent. General rule for this theme: between full-bleed sections, use PADDING. A margin there will always show through. */ .ww-divider-jagged { margin-top: 0; margin-bottom: 0; padding-top: 48px; padding-bottom: 34px; } .ww-divider-jagged + * { padding-top: 48px; } /* The multi-hued blue wave that sits on top of the footer. Jisho: "there's a multi hued blue wave situation attached to the top of the footer dark blue band on the production side", and without it the converted pages just stop into a pale band and then the navy starts -- the white strip he kept noticing. Production draws it as the bottom shape of the last content section: viewBox 0 0 1000 100, three #396F9D paths at opacity 0.33 / 0.66 / 1.0 (that layering IS the multi-hued look), 42px tall, rotated 180 degrees like every other sp-section-bottom shape. Attaching it to the FOOTER rather than to the last section is the difference that matters here: the footer is a template part, so this puts the wave on every page automatically -- including the 12 converted ones, whose last section is different on each page and would otherwise each need their own copy. Same shape, same place, one rule. The shape is patterns/wave-divider-bottom.php inlined; keep the two in step if either changes. */ .ww-footer { position: relative; } .ww-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none' fill='%23396F9D'%3E%3Cpath opacity='0.33' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z'/%3E%3Cpath opacity='0.66' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z'/%3E%3Cpath opacity='1' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; transform: rotate(180deg); pointer-events: none; } /* Button labels at 19px/700. This is an ACCESSIBILITY fix that deliberately does not touch the brand colour. White on #C95426 measures 4.39:1. WCAG asks 4.5:1 of normal text but only 3:1 of "large" text, which starts at 18.66px when bold -- so raising the label to 19px bold clears the bar with room to spare and leaves Deep Orange exactly as it is. Darkening the orange would have been the other route, and it would have meant changing a brand colour to fix a type size. Applies to every wp-element-button, so buttons read consistently sitewide. */ .wp-element-button, .wp-block-button__link { font-size: 19px; font-weight: 700; } /* Support staff role line, under the name and above the bio. Quieter than body copy so the card reads name -> role -> detail rather than as three equal blocks of text. */ .ww-staff-role { margin-top: 2px; color: #396f9d; text-transform: uppercase; letter-spacing: 0.04em; /* Two lines reserved, the same trick the blog card titles use. "Front Desk & Esthetics Program" wraps where the others do not, and without this it pushes one bio down and the row stops reading as a row. */ min-height: calc(2 * 1.6em); } /* Blog listing cards. Jisho: "each blog post is in a kind of box with some shadowing on it, and I like that look, they are totally flat in staging". The shadow and 20px padding are production's exact values, measured off its .sp-posts-single-block. Scoped to the blog listing rather than every post query, because the homepage's three-across row is flat on production too and should stay that way. */ .ww-blog-cards .wp-block-post-template > li { padding: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Service gallery captions. These labels sit over the modality images and are the only wayfinding on that page, so they have to read at a glance. Jisho: "the text is weirdly inconsistent over the images. I want it to be bigger and all bold. Massage therapy is somehow not bolded." He was reading production, where every caption is font-weight 900 except MASSAGE THERAPY at 600 -- its had simply been dropped from the content at some point. The is restored in the content on both sites, but the weight is pinned here as well, because a caption's boldness living in per-item markup is precisely what drifted. 18px is his "touch bigger than production", which sat at 16. */ .wp-block-gallery figcaption.wp-element-caption, .wp-block-gallery figcaption.wp-element-caption a, .wp-block-gallery figcaption.wp-element-caption strong { font-size: 18px; font-weight: 900; } /* Card images fill their column, so the grid is a grid. A stamped height alone is not enough. `aligncenter` makes wp-block-image `display: table`, which shrink-wraps to the image's own aspect ratio -- so once every portrait is 350px tall, each one takes a DIFFERENT width (231-316px against production's uniform 327) and the Practitioners grid comes out ragged. The class is stripped from those figures in the content; this backs it up for any that get re-centred later in the editor. */ .ww-card-image, .wp-block-image.ww-card-image, .wp-block-image.aligncenter.ww-card-image { display: block; width: 100%; margin-left: 0; margin-right: 0; } /* The link wrapper has to be block too, and this is the part that is easy to miss. Most card images are links. An is inline-block, so it shrink-wraps to its content -- and its content is an image with a fixed height and `width: 100%`, which then resolves against the 's own shrunken width. The result is circular: every photo ends up as wide as its natural aspect ratio allows at that height, so a row of four uniform 25% columns rendered images at 257, 132, 132 and 160px. The columns were never wrong. */ .ww-card-image > a, .wp-block-image.ww-card-image > a { display: block; width: 100%; } /* No white stripes between the full-width bands. The root layout puts a 24px block gap between header, main and footer. main carries a tinted background and the footer is navy, so that gap shows the white page through -- Jisho's "weird white strip" at the bottom of the Practitioners page. It is the same block gap that was holding the wave 24px off the banner. */ .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; } /* The self-drawing underline on "Last Saturday of the month" (Community Acupuncture). Jisho: "there's just broken code where that should be... the code and that weird dark blue blob needs to go. If we cannot do this type of thing b/c we don't have the skills, that's OK." We can. SeedProd drew it with a plugin script, and the port carried the markup across without the styling, which produced both symptoms: an SVG path with no `fill: none` on it renders as a solid filled shape, which is the blob, and the script's bootstrap call was sitting in the content as a literal paragraph of visible jQuery. The mechanism underneath is four lines. Stroke the path instead of filling it, then walk stroke-dasharray from "0 1500" to "1500 1500" so the line draws itself. The #C95426 comes from production's own --stroke-color on style-9811.css, and the dasharray figures are its sp-title-highlight keyframes. No plugin, no jQuery. */ .sp-highlighted-text-wrapper { position: relative; display: inline-block; } .sp-highlighted-text-wrapper svg { position: absolute; top: 50%; left: 50%; width: calc(100% + 0.15em); height: calc(100% + 0.75em); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; } .sp-highlighted-text-wrapper svg path { fill: none; stroke: #c95426; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 1500; animation: ww-underline-draw 6s ease-in-out infinite; } @keyframes ww-underline-draw { 0% { stroke-dasharray: 0 1500; } 25%, 75% { stroke-dasharray: 1500 1500; } 100% { stroke-dasharray: 0 1500; } } /* A line that redraws itself every six seconds is exactly the kind of motion that triggers vestibular symptoms, so honour the system setting and simply leave it drawn. */ @media (prefers-reduced-motion: reduce) { .sp-highlighted-text-wrapper svg path { animation: none; stroke-dasharray: 1500 1500; } } /* Full-bleed sections on the converted pages. Production builds every page as full-width sections whose backgrounds run edge to edge, with a 1100px content row inside. The port had post-content constrained to 1000px, which capped the sections themselves -- Jisho: "these pages are just not wide enough, the header only goes about 900px or something, this is a big problem". post-content is now alignfull with a 1100px content size, and each converted section is alignfull. Escaping the root gutter is the cost of that, and this puts it back. Without it the inner row runs to 100% on a narrow screen and text sits flush against the glass -- the same failure that read as "clipped text" during the responsive pass. The 1100px row is unaffected on desktop: 1280 minus 48 still leaves room for it. */ .wp-block-post-content > .alignfull { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); } /* Reception hours table on Location & Hours. Jisho asked for visible lines "for clarity". This one is his preference rather than a match: production draws no lines at all -- every border on its business-hours rows computes to 0px, and it renders the hours as flex divs rather than a table. Rules between the rows, plus a divider between the day and the time, which is what actually makes a day/time pair scannable. Nothing around the outside; a full box would read heavier than the rest of the page. */ .ww-hours table { width: 100%; border-collapse: collapse; } .ww-hours td { padding: 9px 14px; border: 0; border-bottom: 1px solid var(--wp--preset--color--border); } .ww-hours td:first-child { border-right: 1px solid var(--wp--preset--color--border); } .ww-hours tr:last-child td { border-bottom: 0; } /* Separators ported from SeedProd's dividers on the Single Post template (record 8162): a 50%-wide 2px accent rule and a 90%-wide 4px soft rule, both centred. */ .ww-rule { margin-inline: auto; border-bottom: 0; } .ww-rule--accent { width: 50%; border-top: 2px solid #396f9d; } .ww-rule--soft { width: 90%; border-top: 4px solid #eaeaea; } /* The 404 is a standalone page with no header or footer, matching the original. */ .ww-404 { min-height: 70vh; } /*-------------------------------------------------------------- Contrast — the cover block's white-text default WordPress core ships: :where(.wp-block-cover:not(.has-text-color)) { color: #fff } :root :where(.wp-block-cover h1:not(.has-text-color)) { color: inherit } That assumes a cover sits over a dark, dimmed photograph. Ours use dimRatio 0 over light photos of Astoria, so every un-coloured heading inherited WHITE -- including "COMMUNITY ACUPUNCTURE NOW AVAILABLE" on a 58%-white box, which was unreadable. Jisho reported it as white-on-white and asked for a sitewide contrast audit; this is the root cause of that whole class of problem, on the homepage and on every converted page with a background-image section. Default cover text to the brand Dark Blue instead. Sections that genuinely want white (the newsletter band, which sits on a dark image) set it explicitly and still win, because `has-text-color` beats this. --------------------------------------------------------------*/ .wp-block-cover:not(.has-text-color), .wp-block-cover:not(.has-text-color) :where(h1, h2, h3, h4, h5, h6, p, li, .wp-block-heading):not(.has-text-color) { color: var(--wp--preset--color--contrast); } /*-------------------------------------------------------------- Card images — real production sizing SeedProd sized these with object-fit:cover plus a FIXED PIXEL HEIGHT (200px and 235px on the modality pages, 350px on the homepage), held in the per-page stylesheet under a render-time id. Those heights are invisible to the converter, so `bin/extract-heights.py` reads them off production and `sp2blocks.py --heights` stamps them onto each image inline. An earlier attempt guessed a single `aspect-ratio: 3/2` for everything. That was wrong: the values differ per row and per page, and production is uniform *within a row* rather than globally. The inline heights are authoritative; this rule only supplies the fallback behaviour. --------------------------------------------------------------*/ .ww-card-image { display: block; } /* Icons inside feature cards: the wp:html block is opaque to block layout, so the wrapper carries the alignment itself. */ .ww-icon-wrap { line-height: 0; } .ww-icon-wrap .ww-icon { color: var(--wp--preset--color--contrast); } /* Hero banner: production's white box hugs its content rather than filling the row. Narrowed to 760px and centred. Jisho asked for "a narrower banner" -- this is a considered starting value, not a measured one, and is worth his eye. */ .ww-hero__banner { margin-inline: auto; } /*-------------------------------------------------------------- Cover image focal point SeedProd's .spBgcover / .spBgcoverscroll are: background-size: cover; background-repeat: no-repeat; background-position: center top; WordPress's cover block defaults its image to object-position: 50% 50% (centre CENTRE). On tall photographs that shows a different vertical slice entirely, which is why text that sits legibly over the sky on production ended up over dark water here. Anchor to the top to match. The newsletter section is the exception: production gives it .spBgcustom with an explicit `background-position: 0px -307px` at natural size rather than cover. Handled separately below. --------------------------------------------------------------*/ .wp-block-cover .wp-block-cover__image-background, .wp-block-cover video.wp-block-cover__video-background { object-position: center top; } /* Parallax on the "holistic healthcare for everyone" band only. Production distinguishes two background classes and uses each deliberately: `.spBgcover` is `background-attachment: fixed`, `.spBgcoverscroll` is `scroll`. Exactly one section on the homepage carries the fixed variant, and it is that one -- every other photo band scrolls normally. The `hasParallax` cover attribute is the block equivalent; it swaps the child for a background-image on the cover itself, which is why the object-position rule above does not reach it. Both escape hatches are production's, not additions: iOS Safari cannot composite a fixed background against momentum scrolling and renders it as a stretched, jumping mess, so SeedProd disabled it there with the same @supports test. Reduced-motion is the same argument made by the user rather than the platform. */ .wp-block-cover.has-parallax, .wp-block-cover .wp-block-cover__image-background.has-parallax { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } @supports (-webkit-touch-callout: none) { .wp-block-cover.has-parallax, .wp-block-cover .wp-block-cover__image-background.has-parallax { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { .wp-block-cover.has-parallax, .wp-block-cover .wp-block-cover__image-background.has-parallax { background-attachment: scroll; } } /* Text panels on the photo sections. Production puts the heading, body and button in a SOLID WHITE column at 40% width with 30px side padding, and lets the photograph fill the rest of the row -- it never lays text directly over the image. Reproducing that is what makes those sections readable; anchoring the image alone was not enough. */ .ww-text-panel { align-self: flex-start; } /*-------------------------------------------------------------- Responsive Ported from production's per-element media rules, which reduce to three consistent behaviours repeated across every page: <= 1024px spacers collapse to 10px; headings stay centred; body copy goes LEFT <= 480px body type drops to 14px SeedProd expressed these as hundreds of `#sp-xxxx { ... !important }` rules, one per element, because its builder writes per-element CSS. The same result is a handful of rules here. `!important` is used deliberately on the alignment overrides: the converted content carries `has-text-align-center` as a class on individual paragraphs, and production overrode exactly the same way for exactly the same reason. --------------------------------------------------------------*/ @media (max-width: 1024px) { /* Production collapses nearly every spacer to 10px at this breakpoint. */ main .wp-block-spacer { height: 10px !important; } /* Headings stay centred, body copy left-aligns for readability on narrow screens. */ main .wp-block-column p.has-text-align-center, main .ww-text-panel p.has-text-align-center, main .wp-block-cover p.has-text-align-center { text-align: left !important; } /* The empty column that lets the photograph show through beside a text panel has no purpose once columns stack -- it would just leave a gap. */ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:empty { display: none; } /* Card images are shorter when they are full width rather than one of three. */ .ww-card-image { height: 220px !important; } /* Full-bleed bands carry large desktop padding (83-177px) so their heights match production's. That padding is dead space once the content stacks, so it comes back down here. The desktop figures are measured, not chosen -- see PORTING-NOTES. */ .ww-band { padding-top: 56px !important; padding-bottom: 56px !important; } } @media (max-width: 480px) { body { font-size: 14px; line-height: 1.6; } /* The hero statement box and banner should not be pinned to desktop widths. */ .ww-hero__statement, .ww-hero__banner { max-width: 100%; } .ww-card-image { height: 200px !important; } } /*-------------------------------------------------------------- Navigation: collapse to the overlay much earlier than core does Core only swaps `core/navigation` for its hamburger below 600px: @media (min-width: 600px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block } } Six uppercase top-level items need far more room than 600px. Between roughly 600 and 900 they wrapped onto two lines and broke mid-word -- "ABOU / T", "PRACTITIONE / RS". SeedProd collapsed at its `sm` breakpoint (640px) and never had the problem. This forces the overlay below 900px by re-asserting core's own two rules in the other direction. --------------------------------------------------------------*/ @media (max-width: 899px) { .ww-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } /* ...but hide it once the menu IS open, or the hamburger sits there alongside the close X and both do the same thing. Jisho: "it seems like the hamburger menu should disappear when the menu is expanded... clicking both will close the menu." WordPress puts has-modal-open on while the panel is open, which is a plain ancestor class -- no :has() needed, so this works everywhere. */ html.has-modal-open .ww-header .wp-block-navigation__responsive-container-open { display: none !important; } .ww-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } } /* Below 900px the header STACKS: logo on its own line, nav beneath it. The two-column header is the reason the open menu looked catastrophic. Logo left, nav right -- so once the menu panel became an inline element it grew INSIDE the nav column, beside the logo. The header ballooned to full height, the logo ended up floating in the middle of it, and the submenu was squeezed into half the width so every practitioner's name wrapped onto two lines. Jisho's screenshot at ~764px shows all of it at once. Stacking removes the problem at its root rather than compensating for it. Closed, that gives logo above a centred hamburger, which is exactly what production does. Open, the panel spans the full width beneath the logo, so nothing is beside anything and names have room not to wrap. Previously this range was split -- side-by-side from 600-899px, stacked below 600 -- which is what left the 764px case broken. One rule for the whole range now. */ @media (max-width: 899px) { .ww-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .ww-header .wp-block-columns { flex-wrap: wrap !important; } .ww-header .wp-block-column { flex-basis: 100% !important; width: 100% !important; } .ww-header .wp-block-columns { padding-top: 20px !important; padding-bottom: 20px !important; } .ww-header .wp-block-site-logo, .ww-header .wp-block-site-logo img { display: block; margin-inline: auto; max-width: 100%; } .ww-header .wp-block-navigation { justify-content: center !important; } .ww-header .wp-block-navigation__responsive-container-open, .ww-header .wp-block-navigation__responsive-container-close { font-size: 30px !important; } .ww-header .wp-block-navigation__responsive-container-open { margin-top: 12px; } /* The panel itself: inline, full width, page still visible below it. */ .ww-header .wp-block-navigation__responsive-container.is-menu-open { position: static; height: auto; max-height: none; width: 100%; padding: 0 0 20px; background-color: #ffffff; overflow: visible; z-index: auto; } .ww-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: static; } .ww-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: static; display: block; margin: 4px auto 10px; } /* Full-width list, left-aligned, with submenus indented rather than floated as cards. */ .ww-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; width: 100%; } .ww-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; width: 100% !important; min-width: 0 !important; box-shadow: none !important; padding-left: 18px !important; background-color: transparent !important; } } /* Collapse submenus inside the mobile overlay. Core's overlay renders every submenu expanded, so the menu opened as a 1500px wall listing all seventeen practitioners and every service at once. Jisho: "they render fully open, showing all subitems instead of on production where it renders normally like just the top level nav, and you click on each to open." This rule alone would have STRANDED them. In the default hover mode the caret button is decorative -- it carries no data-wp bindings and clicking it does nothing -- so hiding the submenus would have made them unreachable with no way to open them. openSubmenusOnClick on the navigation block is what wires the button to the Interactivity API; only then is it safe to hide anything. That switch has a cost, which is why the menu content changed too: with it on, a parent stops being a link and becomes a button, so /about-us/, /practitioners/, /services/, /patient-tools/ and /education/ would have dropped out of the navigation entirely. Each is now the first item inside its own submenu. */ @media (max-width: 899px) { /* !important because core's overlay rule carries four classes and would otherwise win. */ .ww-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container { display: none !important; } .ww-header .wp-block-navigation__responsive-container.is-menu-open .has-child [aria-expanded="true"] ~ .wp-block-navigation__submenu-container { display: block !important; } } /* Phone. Let the columns stack, which is what production does: the logo gets a full-width line of its own and the toggle sits centred beneath it, large enough to be an obvious target rather than a 24px afterthought in the corner. */ @media (max-width: 599px) { .ww-header .wp-block-columns { flex-wrap: wrap !important; } .ww-header .wp-block-column { flex-basis: 100% !important; width: 100% !important; } .ww-header .wp-block-columns { padding-top: 20px !important; padding-bottom: 20px !important; } .ww-header .wp-block-site-logo, .ww-header .wp-block-site-logo img { display: block; margin-inline: auto; max-width: 100%; } .ww-header .wp-block-navigation { justify-content: center !important; margin-top: 14px; } .ww-header .wp-block-navigation__responsive-container-open { font-size: 30px !important; } .ww-header .wp-block-navigation__responsive-container-close { font-size: 30px !important; } } /* Never let a nav label break mid-word, at any width. */ .wp-block-navigation-item__label { word-break: keep-all; overflow-wrap: normal; }