` in all SEVEN of `templates/{page,page-docs, * page-my-account,order-confirmation,single-product,checkout, * page-pricing}.html`, and restated for the parent's 404 in the rule right * below this one. * * Before this rule the five templates the defect named disagreed with each * other rather than with a design: `single-product.html` was the only one of * the five that declared a top padding at all (`spacing--40` in the block's * own `style` attribute), the other four declared none, and the jump was * visible on the one link a visitor is guaranteed to click right after paying * — the order-confirmation page's own link to `/docs/`. A single class * removes the four-vs-one split instead of copying `single-product.html`'s * value into four more `style` attributes, which would still be five places * to keep in sync by hand. * * The bottom half is the footer clearance. `page-my-account.html` used to * end its content with whatever margin the last paragraph in * `wp:post-content` happened to carry (~24px) rather than a page rhythm, so * the footer read as stuck to the cabinet's last line. `single-product.html` * already reserved a full `spacing--60` (4rem) before its own footer; this * gives every page that same reserve instead of an accident of its last * block. * * `checkout.html` and the then-existing `index.html` were not in the defect's * five-template list but carried the same problem for the same reason: * `checkout.html` set its own `spacing--50` top padding inline — a SIXTH * value, still a source of truth other than this class, on the one page in * the money path a buyer cannot avoid (card → checkout → thank-you). * `index.html` (the 404/search/archive fallback) set no padding at all, i.e. * the original zero-gap defect on a page nobody designs for but anybody can * land on after a typo. Both were folded in rather than left as a second and * third source of truth; `index.html` has since been deleted (#131 — the * parent theme answers all five of the routes it used to catch), and its half * of the story now lives in the 404 rule below. * * `page-pricing.html` arrived with #87, after this comment first listed * seven, and the list was not updated with it. That is the failure mode this * rule exists against, so the count is spelled out in words. Re-derive it, * never recall it: * `grep -rl ss-main themes/soglasie-shop/templates/`. * * `front-page.html` alone stays outside `.ss-main`: the hero fills to the * header's own hairline by design (Task 74, `landing.spec.ts`), which is a * deliberate zero, not a missing rule. */ .ss-main { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); } /* * The one page whose `

` this theme does not write: the 404. * * Since #131 an unresolved URL is answered by the PARENT's `templates/404.html` * — deliberately, because it renders a "not found" pattern with a search box * where the storefront's own fallback rendered an empty post loop, and * `theme.spec.ts` pins that. What comes with it is Twenty Twenty-Five's * spacing: `var:preset|spacing|50` on all four sides, serialised into the * template's own `style` attribute. Note what is hard-coded and what is not — * the parent fixes the TOKEN, and the 40px a browser computes are ours, * because `--wp--preset--spacing--50` is 2.5rem in this theme's scale. Change * that scale and the 404's padding follows it, which is one more reason to * state the rhythm here rather than leave it to a number nobody owns. * * That is a page rhythm a visitor sees between our header and our footer, so * it is ours to state, and `acceptance.spec.ts` measures it next to the other * `.ss-main` carriers. * * `!important` is not a shortcut here, it is the only tool: the value being * overridden is an INLINE style on the parent's `

` (block templates * serialise `style` into the markup), and inline beats every selector an * author stylesheet can write. Author `!important` is the one thing that * outranks it. * * The horizontal half restates the root padding rather than a number, because * the parent's template uses `layout: default` and so never gets the * `has-global-padding` class every storefront page is inset by. */ body.error404 main.wp-block-group { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) !important; padding-inline: var(--wp--style--root--padding-right) !important; } /* --- Documentation (Task 11) --------------------------------------------- */ /* * The contents column rides along on desktop only. `align-self: flex-start` is * load-bearing for the same reason it is on `.ss-buybox`: `wp:columns` is a * flex container whose items stretch to the row height, and an item exactly as * tall as its scroll container has nothing for `position: sticky` to travel * through — the rule would apply and do nothing at all. * * 64rem is above core's own 782px column-stacking breakpoint, so the sidebar is * only ever sticky while it actually sits beside the text. Below it the list * stacks under the page title and above the body, which is the reading order a * contents list wants anyway. */ @media (width >= 64rem) { .ss-docs__aside { position: sticky; inset-block-start: 1.5rem; align-self: flex-start; max-block-size: calc(100vh - 3rem); overflow-y: auto; } } .ss-docs__toc-title { margin-block-end: 0.5rem; font-size: var(--wp--preset--font-size--small); font-weight: 640; letter-spacing: 0; text-transform: uppercase; } .ss-docs__toc-list { margin: 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); line-height: 1.45; } .ss-docs__toc-item { margin-block: 0.35rem; } .ss-docs__toc-item--level-3 { padding-inline-start: 0.75rem; } /* * No underline at rest here, unlike body copy links — and the exception is * deliberate rather than an oversight of the rule stated above * `.soglasie-152-cookie-banner-trigger`. WCAG 1.4.1 is about a link being * distinguishable from the text AROUND it; every item in this list is a link, * so there is no surrounding prose to be confused with. The same reasoning * already governs `.ss-tiers a`, the other pure navigation control in this * theme. Hover and keyboard focus still bring the underline back, so the * affordance is never absent when a pointer or a Tab key asks for it. */ .ss-docs .ss-docs__toc-list a { display: inline-block; min-block-size: 1.5rem; color: var(--wp--preset--color--muted); text-decoration: none; } .ss-docs .ss-docs__toc-list a:hover, .ss-docs .ss-docs__toc-list a:focus-visible { color: var(--wp--preset--color--foreground); text-decoration: underline; outline-offset: 2px; } .ss-docs .ss-docs__toc-list a:focus-visible { outline: 2px solid var(--wp--preset--color--foreground); } /* * A heading the sidebar links to must not land under the sticky header space * once it is scrolled to; without this the browser puts it flush against the * viewport edge and the section title reads as if it belonged to the previous * block. */ .ss-docs h2[id], .ss-docs h3[id] { scroll-margin-block-start: 1.5rem; } .ss-docs .wp-block-post-content h2 { margin-block-start: 2rem; } .ss-docs .wp-block-post-content h3 { margin-block-start: 1.5rem; } /* --- My Account authentication --- */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .otp-verify-conditional { inline-size: 100%; max-inline-size: 34rem; } .woocommerce-account .woocommerce-form-login { box-sizing: border-box; display: grid; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40); text-align: start; } .woocommerce-account .woocommerce-form-login > p { float: none; clear: both; inline-size: auto; margin: 0; } .woocommerce-account .woocommerce-form-login .otp-verify-code-wrap, .woocommerce-account .woocommerce-form-login .otp-verify-resend, .woocommerce-account .woocommerce-form-login .otp-verify-restart, .woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme { text-align: start; } .woocommerce-account .woocommerce-form-login:has(#otp-verify-code) .lost_password { display: none; } .woocommerce-account .otp-verify-conditional { padding: var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--foreground); } .woocommerce-account .woocommerce-form-login button, .woocommerce-account .otp-verify-secondary-action { min-block-size: 44px; } .woocommerce-account .otp-verify-secondary-action { color: var(--wp--preset--color--foreground); background: transparent; border-color: var(--wp--preset--color--hairline); } .woocommerce-account .woocommerce-form-login .lost_password a, .woocommerce-account .woocommerce-form-login .otp-verify-restart a { display: inline-flex; align-items: center; min-block-size: 44px; } .woocommerce-account .woocommerce-form-login input:focus-visible { outline: 2px solid var(--wp--preset--color--foreground); outline-offset: 2px; } .woocommerce-account .ss-account-license-note { inline-size: 100%; max-inline-size: 34rem; margin: var(--wp--preset--spacing--60) 0 0; } @media (width < 30rem) { .woocommerce-account .woocommerce-form-login { padding: var(--wp--preset--spacing--30); } }