/* Theme Name: Amanda Hensby Garden Maker Theme URI: https://amandahensby-gardenmaker.co.uk Description: Child theme of Neve for amandahensby-gardenmaker.co.uk. The only WordPress code tracked in git; everything else (core, Neve, all plugins) is installed on the box by wp-cli against deploy/versions.env. Author: Dan Hensby Template: neve Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ahgm */ /* ----------------------------------------------------------------------------- * Every rule here is a deliberate fix for a MEASURED difference against * .migration-baseline/live/ (the captured baseline). Record what each one corrects and how it was * found — see docs/11-THEME-PARITY.md. * -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Full-bleed blocks (.alignfull) * * Found on: home desktop + mobile — the testimonial pullquote and the image * gallery both ran off the right edge and were clipped mid-sentence. * * Measured: on the live site `figure.alignfull` computes to * margin-left: -245.5px, which pulls it out of the 789px content column to the * viewport edge (x=0). On Neve 4.2.9 it computes to margin-left: 0, so the * element keeps width:100vw but starts at the content column's x=246 and * overflows by 246px. The DOM is otherwise byte-for-byte identical. * * Cause: Neve 2.8.4 shipped this rule in its stylesheet; Neve 4.2.9 dropped it. * Reproduced verbatim from the live theme's style.min.css so the result is * identical rather than approximated — including `padding: 0 15px`, which is * also why the live pullquote had 15px side padding and the new one had 20px. * -------------------------------------------------------------------------- */ .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0 15px; } body.nv-sidebar-left .alignfull, body.nv-sidebar-left .alignwide, body.nv-sidebar-right .alignfull, body.nv-sidebar-right .alignwide { max-width: 100%; margin-left: auto; } /* ----------------------------------------------------------------------------- * Button typography * * Found on: the header CONTACT button, which is the most prominent single * difference in the whole design. Measured live vs new: * * live new source * font-size 12.8px 16px Neve 2.8.4's `.8em` * weight 600 700 * transform UPPERCASE none "CONTACT" vs "Contact" * line-height normal 25.6px * height 32px 42px <- and this pushed the nav bar 52px -> 66px * * The button's LABEL is the theme mod "Contact"; the capitals came from CSS, so * this is a stylesheet difference, not a setting. Neve 2.8.4 shipped these four * properties on its base button selector and 4.2.9 does not. * * Padding (8px 12px) and border-radius already match and are deliberately not * restated here; border-radius comes from a theme mod. * * IMPLEMENTED AS CUSTOM PROPERTIES, not as a competing rule. Neve 4 styles * buttons through variables with fallbacks: * * font-size: var(--btnfs, var(--bodyfontsize)); * font-weight: var(--btnfontweight, 700); * line-height: var(--btnlineheight, 1.6); * text-transform: var(--btntexttransform, none); * * A plain `.button { font-size: .8em }` override was tried first and LOST - * Neve's rule sits later in the cascade at equal specificity, so nothing * changed. Setting the variables works with the theme's design system instead * of against it, needs no !important, and keeps working if Neve reorders or * renames its selectors. * * The uppercase applies on the same footing as live, so form submit buttons * match too - they were uppercase on the live site for exactly this reason. * -------------------------------------------------------------------------- */ :root { --btnfs: 0.8em; --btnfontweight: 600; --btntexttransform: uppercase; --btnlineheight: normal; } /* ----------------------------------------------------------------------------- * Block separators * * Found on: every page - these are the decorative rules under headings and * between sections, so getting them wrong is visible everywhere. * * Neve changed the technique completely. 2.8.4 drew a filled bar; 4.2.9 draws * a border: * * live new * fill background #8f98a1, 2px transparent * border none 2px solid #404248 (4px when wide) * width 100px (default), 100% wide full width always * margin 40px auto 10px / 20px * display block inline-block * * Restored verbatim from Neve 2.8.4's stylesheet. `border: none` is required, * not incidental: without it Neve 4's border would sit on top of the bar. * -------------------------------------------------------------------------- */ .wp-block-separator { display: block; margin: 40px auto; width: 100px; border: none; background-color: #8f98a1; height: 2px; } .wp-block-separator.is-style-wide { height: 1px; } .wp-block-separator.is-style-dots, .wp-block-separator.is-style-wide { width: 100%; } /* ----------------------------------------------------------------------------- * Heading type scale and block rhythm * * Found on: every page. Neve's DEFAULT type metrics changed between majors and * this site never customised them, so it inherited whatever the theme shipped: * * live (2.8.4) Neve 4.2.9 * h2 size 1.75em (28px) 32px * h* weight 600 700 * h* leading 1.68421 1.2 * h* margin 0.8rem (12.8px) 30px * p margin 20px 30px * * Sizes, weights and leading go through Neve 4's own custom properties, for the * same reason as the buttons: a competing rule loses the cascade. The two * margins are literals in Neve's stylesheet, so those need real rules. * * An earlier attempt set these as plain rules and was reverted because it made * the page-height metric worse. That metric was wrong - it cannot see colour or * weight, and the height gap comes from the separators above, not from here. * Judged now on computed-style parity, which is what actually determines * appearance. See docs/11-THEME-PARITY.md. * -------------------------------------------------------------------------- */ :root { --h1fontsize: 2em; --h2fontsize: 1.75em; --h3fontsize: 1.5em; --h4fontsize: 1.25em; --h5fontsize: 1em; --h6fontsize: 1em; --h1fontweight: 600; --h2fontweight: 600; --h3fontweight: 600; --h4fontweight: 600; --h5fontweight: 600; --h6fontweight: 600; --h1lineheight: 1.68421; --h2lineheight: 1.68421; --h3lineheight: 1.68421; --h4lineheight: 1.68421; --h5lineheight: 1.68421; --h6lineheight: 1.68421; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.8rem; } p { margin-bottom: 20px; } /* ----------------------------------------------------------------------------- * Pullquote (the customer testimonial on the home page) * * Found on: home desktop + mobile. Live renders the quote at 48px across two * lines; the new build rendered it at 36px on one, which reads as a smaller, * less prominent testimonial. * * live .wp-block-pullquote blockquote p { font-size: 2em; margin-bottom: 20px } * new .wp-block-pullquote p { font-size: 1.5em !important } * * !important is used here only because Neve 4 uses it - without matching force * the declaration loses regardless of specificity. It is deliberately scoped to * this one block rather than applied broadly. * -------------------------------------------------------------------------- */ .wp-block-pullquote p, .wp-block-pullquote blockquote p { font-size: 2em !important; margin-bottom: 20px; } /* ----------------------------------------------------------------------------- * Body type at mobile widths * * Found on: every page at 390px. Neve 4 emits --bodyfontsize: 15px as its * mobile-first base and raises it to 16px only in min-width media queries. * Neve 2.8.4 used 16px at every breakpoint, so on mobile the whole document * inherited 15px/1.6 instead of 16px/1.68421 - every element on the page, not * just body text. * * Setting the variables here wins at all breakpoints because this stylesheet * loads after Neve's: same specificity, later source order. That restores 16px * on mobile without disturbing desktop, which was already 16px. * -------------------------------------------------------------------------- */ :root { --bodyfontsize: 16px; --bodylineheight: 1.68421; } /* ----------------------------------------------------------------------------- * Wide blocks (.alignwide) at mobile widths * * Found on: portfolio mobile, which was 667px (28%) taller than live - by far * the largest single discrepancy left after the other fixes. * * Not a plugin problem, despite the page being a Visual Portfolio gallery. * Neve 2.8.4 sets .alignwide to 70vw at every width; Neve 4.2.9 uses 98vw as * its mobile base and only narrows to 70vw above a breakpoint. At a 390px * viewport that is 273px against 382px - exactly the measured container widths. * The images preserve their aspect ratio, so a 40% wider gallery is also * proportionally taller, which accounts for essentially the whole gap. * * margin-right is left at 0 to match live, which sets only margin-left. * -------------------------------------------------------------------------- */ .alignwide { width: 70vw; max-width: 70vw; margin-left: calc(50% - 35vw); margin-right: 0; } /* ----------------------------------------------------------------------------- * Portfolio gallery hover overlay * * Found on: /portfolio/ - hovering an image dimmed it to SOLID BLACK instead of * the live site's translucent charcoal, which looks like a broken image rather * than a caption reveal. * * live rgba(46, 43, 48, 0.67) translucent * new rgb(0, 0, 0) opaque * * Cause: the gallery's stored block attribute is still Visual Portfolio 2.x's * `items_style_fade__bg_color`. 3.7.1 reads the colour from the CSS variable * --vp-items-style-fade--overlay__background instead, so the old attribute is * ignored and the variable falls back to black. * * Set as the variable rather than by rewriting the block attribute in post * content: the content is the customer's data and is migrated verbatim, and * this keeps the fix reviewable in git. Scoped to the fade style so it cannot * affect any other gallery layout. * -------------------------------------------------------------------------- */ .vp-portfolio__items-style-fade { --vp-items-style-fade--overlay__background: rgba(46, 43, 48, 0.67); }