/* πŸ”΄ BOLD MUST BE ABSOLUTE, NOT RELATIVE. The UA default for / is `font-weight: bolder`, computed RELATIVE to the inherited weight. Legacy's body is 300 and its still renders 700, because Canvas pinned it. With only `bolder` inherited from 300, ours computed to 400 β€” visibly not bold. Measured via CDP getMatchedStylesForNode. Root weight stays at 300 to MATCH LEGACY (measured: body=300, p=300); the bold is pinned absolutely so the light body weight cannot flatten it. */ strong, b, .wp-block-post-content strong, .wp-block-post-content b, .hw-sidebar strong, .hw-sidebar b { font-weight: 700; } /* ---- LIST FORMATTING, measured against legacy ---------------------------- Legacy: ul mb=15, li mb=0, nested ul mb=0, and nested bullets are `disc` (NOT the browser default `circle`). The block theme's defaults introduced 4.5px between items, 18px under nested lists, and a different bullet glyph β€” which is why second-level bullets and line spacing read differently. */ .wp-block-post-content ul, .wp-block-post-content ul ul, .wp-block-post-content ul ul ul { list-style-type: disc; } /* Theme Name: HWTheme Theme URI: https://www.healthways.com.au Author: Healthways Description: Block theme for Healthways Recreation & Aquatic Centres. Fully owned; no third-party framework heritage. Design tokens live in theme.json. Version: 1.1.2 Requires at least: 6.7 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: hwtheme */ :root { /* Height of the pinned nav bar. Measured at runtime by the inline script in functions.php, because the menu wraps to a DIFFERENT number of rows per site and per viewport width: Box Hill's wraps to 2 rows (88px), Ringwood's to 3 (132px). A hardcoded offset parks the sticky sidebar UNDERNEATH the nav on whichever site has more rows, hiding the contact details. The value below is only a fallback for before the script runs. */ --hw-nav-h: 88px; --hw-sticky-top: calc(var(--hw-nav-h) + 14px); } /* Heading spacing: legacy puts the gap BELOW a heading (mb=14/8, mt=0); the block theme defaulted to mt=24/mb=0, which reads as a gap in the wrong place and detaches a heading from the text it introduces. Measured on both stacks. */ .wp-block-post-content h1, .wp-block-post-content h2 { margin-top: 0; margin-bottom: 14px; line-height: 1.1; } .wp-block-post-content h3, .wp-block-post-content h4, .wp-block-post-content h5, .wp-block-post-content h6 { margin-top: 0; margin-bottom: 8px; } /* πŸ”΄ BOLD MUST BE ABSOLUTE, NOT RELATIVE. The UA default for / is `font-weight: bolder`, which is computed RELATIVE to the inherited weight. theme.json set root weight to 300, so "bolder than 300" resolved to 400 β€” i.e. not bold at all. Every in the migrated content (38 in one post alone) rendered flat against legacy's 700. Measured with CDP getMatchedStylesForNode, not guessed. Root weight is now 400, and bold is pinned to an absolute value so it can never be knocked out by an inherited weight again. */ strong, b, .wp-block-post-content strong, .wp-block-post-content b, .hw-sidebar strong, .hw-sidebar b { font-weight: 700; } /* ============================================================ HWTheme β€” supplementary CSS Design tokens are in theme.json. This file holds only what theme.json cannot express: layout chrome, the boxed card, navigation behaviour and legacy-content compatibility. ============================================================ */ /* ---- DECISION 1: boxed layout ON by default -------------- */ .hw-boxed .wp-block-post-content, .hw-card { background: var(--wp--preset--color--hw-white); padding: 0 35px 40px; border-radius: 5px; } /* blog1 landing overrides this via front-page.html (.hw-unboxed) */ .hw-unboxed .hw-card { background: transparent; padding: 0; border-radius: 0; } /* ---- 960px wrapper -------------------------------------- */ .hw-wrap { width: 960px; max-width: 100%; margin: 0 auto; } /* ---- DECISION 2: navigation, weight 300 ----------------- */ .hw-nav { background: var(--wp--preset--color--hw-teal-pale); } .hw-nav a, .hw-nav .wp-block-navigation-item__content { font: 300 14px/1 Arial, sans-serif; color: var(--wp--preset--color--hw-teal-dark); padding: 14px; text-decoration: none; } .hw-nav a:hover, .hw-nav .current-menu-item > a { background: var(--wp--preset--color--hw-teal-accent); } /* ---- DECISION 3: breadcrumbs (off on front-page) -------- */ .hw-breadcrumb { font-size: 14px; color: var(--wp--preset--color--hw-teal-dark); padding: 20px 0 6px; margin: 0; } .hw-unboxed .hw-breadcrumb { display: none; } /* ---- Canvas column split: 577px main / 284px sidebar ----- The card has 35px padding each side, so the inner width is 960 - 70 = 890px. Canvas rendered 577 + 284 + ~29px gap. flex-basis alone lets columns shrink; pin width explicitly. */ .hw-cols { gap: 29px; align-items: flex-start; } .hw-cols > .wp-block-column:first-child { flex: 0 0 577px; width: 577px; max-width: 577px; min-width: 0; } .hw-cols > .wp-block-column:last-child { flex: 0 0 284px; width: 284px; max-width: 284px; min-width: 0; } .hw-cols.hw-sidebar-left > .wp-block-column:first-child { order: 2; } .hw-cols.hw-sidebar-left > .wp-block-column:last-child { order: 1; } /* ---- sidebar -------------------------------------------- */ .hw-sidebar hr { border: 0; border-top: 1px solid var(--wp--preset--color--hw-rule); margin: 14px 0; } .hw-sidebar img { display: block; width: 100%; height: auto; margin: 0 0 14px; } .hw-sidebar li { margin: 0 0 8px; font-size: 13px; } /* ---- legacy content compatibility ----------------------- */ /* wp-table-reloaded output (48 uses / 25 pages) */ .wp-block-post-content table { width: 100%; border-collapse: collapse; } .wp-block-post-content table td { padding: 12px 8px; border-bottom: 1px solid var(--wp--preset--color--hw-rule); vertical-align: top; } /* Conversion wrapped inline images in
, which broke float-based 2x2 button grids on 63 pages. Restore side-by-side flow. */ .wp-block-post-content .alignleft { float: left; margin: 0 1em 1em 0; } .wp-block-post-content .alignright { float: right; margin: 0 0 1em 1em; } .wp-block-post-content figure.wp-block-image.alignleft, .wp-block-post-content figure.wp-block-image.alignright { display: inline-block; } /* πŸ”΄ CONVERSION SIDE-EFFECT: rawHandler wrapped inline images in
. A
is display:block, so an image that used to float out of the text now takes a whole line and pushes the words below it β€” measured on the "Why swim with Healthways?" heading, where legacy flows text beside a float:right image and ours left a block of white space. The wrapper has NO wp-block-image class when it sits inside a heading, so it must be matched by the float class on either the figure or the img it holds. */ .wp-block-post-content figure:has(> img.alignright), .wp-block-post-content figure.alignright { float: right; margin: 0 0 1em 1em; display: inline; } .wp-block-post-content figure:has(> img.alignleft), .wp-block-post-content figure.alignleft { float: left; margin: 0 1em 1em 0; display: inline; } /* the img inside such a figure must not float again */ .wp-block-post-content figure > img.alignright, .wp-block-post-content figure > img.alignleft { float: none; margin: 0; } /* A heading containing a floated figure must NOT establish a block formatting context or clear the float β€” otherwise the float is trapped and the following heading is pushed below the whole image. Measured: legacy leaves 14px between "Why swim with Healthways?" and "Industry awards and recognition:"; ours left 173px because the second heading cleared the float. */ .wp-block-post-content h1:has(figure), .wp-block-post-content h2:has(figure), .wp-block-post-content h3:has(figure), .wp-block-post-content h4:has(figure) { overflow: visible; display: block; clear: none; } /* headings after a floated image flow beside it, as in legacy */ .wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3, .wp-block-post-content h4, .wp-block-post-content h5, .wp-block-post-content h6 { clear: none; } /* ---- Canvas [button] shortcode replacement -------------- */ .hw-button { display: inline-block; background: var(--wp--preset--color--hw-teal); color: var(--wp--preset--color--hw-white) !important; padding: 7px 14px; border-radius: 3px; font: 700 13px/1.4 Arial, sans-serif; text-transform: uppercase; text-decoration: none; margin: 0 0 10px; } .hw-button:hover { background: var(--wp--preset--color--hw-teal-dark); } /* ---- footer --------------------------------------------- */ .hw-footer { border-top: 1px solid rgba(255,255,255,.3); margin-top: 30px; padding: 16px 0; font-size: 12px; color: rgba(255,255,255,.85); } .hw-footer a { color: rgba(255,255,255,.85) !important; } /* ---- front page ------------------------------------------ */ /* Base-site splash: no card, no breadcrumb, no news loop. */ .hw-unboxed .hw-card { background: transparent; padding: 0; border-radius: 0; } .hw-unboxed .hw-breadcrumb, .hw-unboxed .hw-front-news { display: none; } /* Centre front pages keep the card and show the news loop. */ .hw-front-news .wp-block-post-featured-image img { max-width: 100%; height: auto; } .hw-front-news > .wp-block-post-template > li { margin-bottom: 2.5em; } /* ---- CTA rails (synced patterns) ------------------------- */ .hw-cta-rail { margin: 1.5em 0; } .hw-cta-rail figure { margin: 0 0 10px; } .hw-cta-rail img { max-width: 100%; height: auto; display: block; } .hw-cta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .hw-cta-grid figure { margin: 0; } @media (max-width: 600px) { .hw-cta-grid { grid-template-columns: 1fr; } } /* ---- responsive ------------------------------------------ */ @media (max-width: 980px) { .hw-wrap { width: 100%; padding: 0 12px; } /* Core ships `.wp-block-columns.is-layout-flex{display:flex}` β€” TWO classes, specificity 0-2-0. A bare `.hw-cols{display:block}` (0-1-0) loses to it, so the columns stayed side by side at every width: 354px + 284px crammed into a 390px phone. Match core's specificity and force the stack. Verified by measuring getComputedStyle at 390/768/1366/1920, not by reading the CSS. */ .hw-cols.wp-block-columns.is-layout-flex, .hw-cols.wp-block-columns { display: block !important; } .hw-cols > .wp-block-column, .hw-cols.is-layout-flex > .wp-block-column { flex-basis: auto !important; width: 100% !important; /* core writes an inline/derived px width */ max-width: 100% !important; margin-bottom: 2em; } .hw-cols > .wp-block-column:last-child { margin-bottom: 0; } .hw-card { padding: 0 18px 24px; } .hw-logo img { width: 100% !important; max-width: 600px; } } @media (max-width: 600px) { .hw-nav a, .hw-nav .wp-block-navigation-item__content { padding: 10px; font-size: 13px; } .hw-footer { display: block; text-align: center; } .wp-block-post-content .alignleft, .wp-block-post-content .alignright { float: none; margin: 0 0 1em; } } /* ============================================================ PHASE G β€” pixel tuning against baseline/prod Conversion wrapped every inline image in
, which introduced block margins and killed float-based grids. ============================================================ */ /* 1. Kill the stacked vertical gaps between converted images. */ .wp-block-post-content figure.wp-block-image { margin: 0 0 1em; } .wp-block-post-content figure.wp-block-image:has(+ figure.wp-block-image) { margin-bottom: .5em; } /* Hide genuinely empty paragraphs left by the block conversion β€” but NOT paragraphs that merely contain a
alongside real text (addresses). */ .wp-block-post-content p:empty { display: none; } .hw-loc-address, .hw-loc-phone, .hw-loc-heading { display: block !important; } /* 2. Restore side-by-side image rows. Canvas floated inline images; blocks stack them full width. Measured on prod: content column 578px, paired images 278px each. */ .wp-block-post-content figure.wp-block-image.alignleft, .wp-block-post-content figure.wp-block-image.alignright { display: inline-block; vertical-align: top; max-width: 100%; } /* Consecutive alignnone images sat two-up in Canvas at ~278px. */ .wp-block-post-content figure.wp-block-image.alignnone:not(.size-full):not(.aligncenter) { display: inline-block; vertical-align: top; margin: 0 12px 12px 0; max-width: 278px; } .wp-block-post-content figure.wp-block-image.alignnone:not(.size-full) img { width: auto; max-width: 100%; } .wp-block-post-content figure.wp-block-image.alignleft { float: left; margin: 0 1em 1em 0; } .wp-block-post-content figure.wp-block-image.alignright { float: right; margin: 0 0 1em 1em; } .wp-block-post-content figure.wp-block-image.aligncenter { display: block; margin-left: auto; margin-right: auto; } /* Headings must NOT clear floats β€” legacy flows them beside a float:right image. `clear: both` here pushed "Industry awards and recognition:" below the whole image, leaving 173px of white space where legacy has 14px. Measured on /ringwood/2025/10/06/come-swim-at-healthways/. Only the LAST heading before a new full-width section should clear, which the content itself controls. */ .wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3 { clear: none; } /* 3. Images must fill their column, not sit at intrinsic size. */ .wp-block-post-content img { max-width: 100%; height: auto; } .wp-block-post-content figure.size-full img { width: auto; max-width: 100%; } .wp-block-post-content figure.aligncenter img { width: auto; max-width: 100%; } /* ============================================================ DESKTOP NAV SEARCH A flex sibling of the menu INSIDE .hw-nav β€” not positioned over it. The nav's last row has 488px free on Box Hill and 620px on Ringwood (measured), so the search sits at the end of the row without forcing another wrap. Canvas had `woo_nav_search = false`: this is a deliberate ADDITION. ============================================================ */ .hw-navsearch { display: none; } @media (min-width: 601px) { .hw-navsearch { display: flex; align-items: center; margin-left: auto; /* push to the end of the flex row */ position: relative; /* anchor for the results dropdown */ /* Sit on the LAST existing row rather than creating one. The nav wraps, so a plain flex child claims a new line; pinning it to the bottom-right of the wrapped row keeps the nav at its measured height (Box Hill 88px, Ringwood 132px) instead of growing to 146/190. */ position: absolute; right: 6px; bottom: 4px; z-index: 40; } /* the search is a child of .hw-nav, so anchor against it */ .hw-nav { position: relative; } .hw-navsearch form { position: relative; margin: 0; display: flex; align-items: center; } .hw-navsearch input[type="search"] { width: 0; opacity: 0; padding: 0; border: 0; min-width: 0; box-sizing: border-box; font-size: 14px; background: #fff; color: var(--wp--preset--color--hw-teal-dark, #184e52); border-radius: 3px; transition: width .22s ease, opacity .18s ease, padding .22s ease; } .hw-navsearch.is-open input[type="search"] { width: 240px; opacity: 1; padding: 6px 10px; border: 1px solid rgba(24,78,82,.28); } .hw-navsearch-btn { width: 34px; height: 34px; flex: 0 0 34px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--wp--preset--color--hw-teal-dark, #184e52); display: flex; align-items: center; justify-content: center; } .hw-navsearch-btn svg { width: 17px; height: 17px; fill: currentColor; } .hw-navsearch-btn:hover { color: var(--wp--preset--color--hw-link, #29558d); } .hw-navsearch .hw-nav-hits { display: none; } .hw-navsearch.hw-filtering .hw-nav-hits { display: block; position: absolute; top: calc(100% + 8px); right: 0; width: 320px; z-index: 60; background: #fff; border: 1px solid rgba(24,78,82,.18); border-radius: 3px; overflow: hidden; } } /* ============================================================ MOBILE NAV β€” off-canvas drawer + persistent search The nav carries 61 items across 3 levels. Core's overlay renders every submenu expanded (2683px of scroll on a 412x915 device) on a white ground. Replaced with a right-hand drawer: submenus collapsed behind disclosure toggles, site palette, and SEARCH LIFTED OUT into the nav bar itself so it is reachable without opening the menu (Bstew, 2026-08-30). Slide from the right = thumb-friendly on a phone. ============================================================ */ /* --- the bar: search + burger, side by side --- */ /* !important: the bar is injected as a plain
, and core's layout rules for children of the header group set `display:block` at higher specificity. */ .hw-mobilebar { display: none !important; } @media (max-width: 600px) { .hw-mobilebar { display: flex !important; align-items: center; gap: 8px; padding: 8px 12px; background: var(--wp--preset--color--hw-nav-bg, #e9f3f3); border-top: 1px solid rgba(24,78,82,.10); } .hw-mobilebar form { flex: 1 1 auto; margin: 0; position: relative; } .hw-mobilebar input[type="search"] { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; /* 16px = no iOS zoom on focus */ border: 1px solid rgba(24,78,82,.22); border-radius: 3px; background: #fff; color: var(--wp--preset--color--hw-teal-dark, #184e52); } /* core's own burger is replaced by ours, inside the bar */ .wp-block-navigation__responsive-container-open { display: none !important; } .hw-burger { flex: 0 0 auto; width: 44px; height: 44px; /* 44px = min touch target */ border: 1px solid rgba(24,78,82,.22); border-radius: 3px; background: #fff; cursor: pointer; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .hw-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--wp--preset--color--hw-teal-dark, #184e52); transition: transform .22s ease, opacity .18s ease; } .hw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } } /* --- scrim behind the drawer --- */ .hw-scrim { position: fixed; inset: 0; z-index: 998; background: rgba(10,40,42,.45); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; } body.hw-drawer-open .hw-scrim { opacity: 1; visibility: visible; } /* --- the drawer itself --- */ .hw-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 999; width: min(86vw, 360px); background: var(--wp--preset--color--hw-nav-bg, #e9f3f3); /* No drop shadow β€” Bstew, 2026-08-30: it distracts from the content behind. A single hairline edge separates the drawer without casting over the page. */ border-right: 1px solid rgba(24,78,82,.18); transform: translateX(-100%); transition: transform .26s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; overscroll-behavior: contain; } body.hw-drawer-open .hw-drawer { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .hw-drawer, .hw-scrim { transition: none; } } .hw-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(24,78,82,.14); flex: 0 0 auto; } .hw-drawer-title { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--hw-meta, #7a8f91); } .hw-drawer-close { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 26px; line-height: 1; color: var(--wp--preset--color--hw-teal-dark, #184e52); } .hw-drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 32px; } /* --- menu rows inside the drawer --- */ .hw-drawer .hw-mrow { display: flex; align-items: stretch; border-bottom: 1px solid rgba(24,78,82,.10); } .hw-drawer .hw-mrow > a { flex: 1 1 auto; padding: 14px 16px; font-size: 16px; text-decoration: none; color: var(--wp--preset--color--hw-teal-dark, #184e52); } .hw-drawer .hw-mrow > a:hover { background: var(--wp--preset--color--hw-nav-active, #d4e7e8); } .hw-drawer .hw-mtoggle { flex: 0 0 48px; border: 0; border-left: 1px solid rgba(24,78,82,.10); background: transparent; cursor: pointer; position: relative; color: var(--wp--preset--color--hw-teal-dark, #184e52); } .hw-drawer .hw-mtoggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -6px 0 0 -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; } .hw-drawer li.hw-open > .hw-mrow .hw-mtoggle::after { transform: rotate(-135deg); margin-top: -2px; } .hw-drawer ul { list-style: none; margin: 0; padding: 0; } .hw-drawer li > ul { display: none; background: rgba(255,255,255,.5); border-left: 3px solid rgba(24,78,82,.16); margin-left: 16px; } .hw-drawer li.hw-open > ul { display: block; } .hw-drawer li > ul .hw-mrow > a { padding-left: 16px; font-size: 15px; } .hw-drawer li > ul ul .hw-mrow > a { font-size: 14px; } /* --- live menu filter results --- */ .hw-nav-hits { display: none; } .hw-filtering .hw-nav-hits { display: block; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1001; background: #fff; border: 1px solid rgba(24,78,82,.18); border-radius: 3px; overflow: hidden; } .hw-nav-hit { display: block; padding: 12px; font-size: 15px; text-decoration: none; color: var(--wp--preset--color--hw-teal-dark, #184e52); border-bottom: 1px solid rgba(24,78,82,.08); } .hw-nav-hit:last-child { border-bottom: 0; } .hw-nav-hit:hover, .hw-nav-hit:focus { background: var(--wp--preset--color--hw-nav-active, #d4e7e8); } .hw-nav-nohit { display: block; padding: 12px; font-size: 14px; color: #777; } /* tier label: "Did you mean…" / "From site content" / "Searching the site…" */ .hw-nav-note { display: block; padding: 8px 12px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--hw-meta, #7a8f91); background: rgba(24,78,82,.05); border-bottom: 1px solid rgba(24,78,82,.10); } /* hide the core overlay entirely β€” the drawer replaces it */ @media (max-width: 600px) { .wp-block-navigation__responsive-container { display: none !important; } } /* ---- EMBEDS (YouTube etc.) ------------------------------------------------- Legacy wraps each iframe in a

, which carries margin-bottom: 18px, so text never sits flush under a video. The block editor emits with NO bottom margin, so the following heading or paragraph butted straight against the player. Measured on both stacks: legacy 18px, ours 0px. */ .wp-block-post-content .wp-block-embed, .wp-block-post-content figure.wp-block-embed { /* 25px, not 18: legacy wraps the iframe in a

whose 18px margin sits below the line box, giving 25px of VISUAL space. Measured on screen, both stacks. */ margin: 0 0 25px; } .wp-block-post-content .wp-block-embed__wrapper { margin: 0; } /* an embed that follows text needs breathing room above it too */ .wp-block-post-content p + .wp-block-embed, .wp-block-post-content h1 + .wp-block-embed, .wp-block-post-content h2 + .wp-block-embed, .wp-block-post-content h3 + .wp-block-embed, .wp-block-post-content h4 + .wp-block-embed { margin-top: 6px; } /* 4. Paragraph and list rhythm β€” MEASURED from legacy, not estimated. Legacy computed values: ul margin-bottom 15px, li margin-bottom 0. The earlier 1.2em/.3em were guesses and added visible space between every list item, which is what made the awards list read differently. */ .wp-block-post-content p { margin: 0 0 1.2em; } .wp-block-post-content ul, .wp-block-post-content ol { margin: 0 0 15px; padding-left: 30px; } .wp-block-post-content li { margin: 0 0 0; } /* nested lists sit flush inside their parent item */ .wp-block-post-content ul ul, .wp-block-post-content ul ol, .wp-block-post-content ol ul, .wp-block-post-content ol ol { margin: 0; } /* ---- FIX: remove double padding on post content ---------- theme.json's root padding was cascading onto .wp-block-post-content, which sits INSIDE the already-padded .hw-card. Net effect was 577 - 70 = 507px usable, so every image rendered ~13% too small and pages ran ~23% taller than Canvas. */ .wp-block-post-content, .entry-content.wp-block-post-content { padding-left: 0 !important; padding-right: 0 !important; max-width: none; } .hw-wrap { padding-left: 0; padding-right: 0; } .hw-cols > .wp-block-column { padding: 0; } /* ---- FIX: consecutive images must flow side-by-side ------- Classic->blocks conversion dropped alignment classes, leaving bare `wp-block-image is-resized` figures that stack full-width. Canvas floated these, fitting 2 per row at ~278px. Restore inline flow so sized images sit together instead of one per line. */ .wp-block-post-content figure.wp-block-image.is-resized { display: inline-block; vertical-align: top; margin: 0 12px 12px 0; width: auto; max-width: 100%; } .wp-block-post-content figure.wp-block-image.is-resized img { width: auto; max-width: 100%; height: auto; } /* A resized image that is genuinely full width keeps its own line. */ .wp-block-post-content figure.wp-block-image.is-resized img[width="577"], .wp-block-post-content figure.wp-block-image.aligncenter { display: block; } /* ============================================================ PHASE G β€” chrome corrections measured against prod prod: logo 890x137 top 40 | nav h=90 | card top 349 white background is on #wrapper, so the FOOTER sits INSIDE the white area, not on the teal. ============================================================ */ /* There are THREE .hw-wrap elements (header part, body, footer part). Painting each white produces three panels with teal gaps between, and a white-on-white logo. Paint ONE continuous panel on the page container instead, and keep the wraps transparent. */ .hw-wrap { background: transparent; } /* The logo is a WHITE png and must sit on the TEAL, above the panel. So the white starts at the nav bar and runs to the footer β€” exactly as Canvas did (#wrapper white, logo outside it). */ body.hw-boxed .wp-site-blocks { background: transparent; } /* The footer is a SIBLING