` — the ordinary sticky-footer arrangement, on the wrapper WordPress already gives every block theme, so no markup changes and it covers templates not written yet. Measured on the homepage and Clients Served before writing it: every band's width, the list's 16px offset, document height and scroll width are identical with the rule and without it, and the sticky header still pins at the same offset. A flex container was the one thing here that could plausibly have disturbed either. ========================================================================== */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; } .wp-site-blocks > main { flex: 1; } /* ========================================================================== Global — hover transitions Site-wide standard, David 2026-08-07: every mouseover eases into its highlight rather than snapping to it. Declared once here rather than repeated on each component, so a new link or button inherits the behaviour without anyone remembering to add it. Only the four properties the theme's hovers actually change are listed — `transition: all` would also catch layout and paint properties and animate things nobody asked to animate. 200ms: long enough to read as a fade, short enough that a button still feels like it responds the instant you touch it. Anything past ~250ms starts to feel like lag on a pointer. `ease-out` rather than `ease`: it moves most of the way immediately and settles, which reads as responsive. `ease` eases in as well, which on a change this short just looks slow to start. ========================================================================== */ a, .wp-block-button__link, .wp-block-search__button, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out; } /* Motion is a preference, not a given. Paired with the same guard on the mobile menu's height animation further down. */ @media (prefers-reduced-motion: reduce) { a, .wp-block-button__link, .wp-block-search__button, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { transition: none; } } /* ========================================================================== Components — Call-to-action button The orange button, shared by every CTA on the site. Add `barbella-cta` to a core Button block's Additional CSS Class field and it looks like this one; a second class alongside it carries anything unique to that instance (the resume button's fixed 300px width, an icon). Written as a component the second time it was needed rather than the fifth. theme.json's `elements.button` already supplies the orange, the white text and the square corners — only what it cannot express is here. ========================================================================== */ .barbella-cta .wp-block-button__link { /* Core does not set this on the link, and without it the 21px padding and 1px border push a width-constrained button past its stated width. */ box-sizing: border-box; /* Type is the “Button Text - Large” style, defined in `styles/` and editable in Appearance > Editor > Styles > Blocks. Deliberately not restated here: the variation emits `:root :where(...)`, which a single class in this file already ties with and beats on source order — so anything left behind would quietly win and the CMS control would look broken. */ /* The live site's `11px 21px 16px` is corrected here, David 2026-08-07 — the deeper bottom padding pushes the label *up*, and on barbella.com it sits visibly closer to the top of the button than the bottom. The numbers, measured rather than eyeballed. A label with no descenders ("View David's Resume") has ink running cap-top to baseline: 14.19px tall at this size, 0.09px below the baseline. Inside the original's box that left 16.66px of clear space above the ink and 22.76px below it — the label sat 6.1px high. Centring wants 19.71px on each side, which is the baseline 3.05px lower, so 3px moves from the bottom padding to the top. The vertical total stays 27px, so the button keeps the original's measured 53.7px height, and the remaining imbalance is 0.1px. Not symmetrical padding: 13.5px each would centre the *line box*, which reserves descender space at the bottom these labels never use, and would leave them looking high again by half that reserve. */ padding: 14px 21px 13px; /* Same colour as the fill, so the border is invisible — but it is 2px of the button's measured width and 1px of its height. Dropping it would shrink every button against the original. */ border: 1px solid var(--wp--preset--color--button); /* 0.075em = the measured 1.425px at 19px. */ text-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5); } /* Hover deliberately departs from the live site. The original goes *brighter* (#f56102) and swaps the label to dark grey (#3b3b3b), which reads as a rollover artefact and drops the text below WCAG contrast on the new fill. David's decision: darken instead and keep the label white. The fade itself comes from the global transition above. */ .barbella-cta .wp-block-button__link:hover, .barbella-cta .wp-block-button__link:focus { background-color: #a84300; border-color: #a84300; } /* --- Button icons --------------------------------------------------------- The original appends FontAwesome glyphs inside the link (`