/* === MASON OVERRIDES - managed by the client repo, build/theme/mason-overrides.css === */ /* * The last-resort layer. Anything YOOtheme can set as a setting is set there, * not here (website-build non-negotiables 2 and 13). Every rule below carries * a one-line WHY and the phase that added it. * * Served by functions.php (build/scripts/install_cachebust.mjs) with a * filemtime version, last in , so an edit is live on the next load. * Do not put Mason rules in custom.css: it is served under a fixed ?ver= and * browsers keep it for a week. * * Layout of this file, keep it: grouped by section in page order, then every * media query together at the end. */ /* --- Global ------------------------------------------------------------- */ /* * Bricolage Grotesque with optical sizing (Phase 3, 28/09/26). * WHY: the YOOtheme font picker self-hosts Google's STATIC cuts, at one * optical size, which set wider than the mockup's variable font: +6.6% at the * 60px H1, +2.3% at h2 (build/scripts/measure_heading_fonts.mjs). The picker * has no optical-size control, so this is not expressible as a setting. * These faces re-declare the picker's family, weights and latin range and win * because they are declared last. The picker stays authoritative for * everything else, and its non-latin subset files still serve those ranges. * Measured with this face: 1223.7px against the mockup's 1223.7px. * File: build/scripts/make_variable_font.py (OFL, licence alongside). * Remove both rules if the picker ever gains optical sizing. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url('../fonts/bricolage-grotesque-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url('../fonts/bricolage-grotesque-var-latin.woff2') format('woff2'); } /* --- Header and navigation ---------------------------------------------- */ /* * Header bottom rule (Phase 4). WHY: the mockup has a 1px #e4e4e0 rule under * the header; YOOtheme's horizontal header layouts expose no border setting * (the headerbar border variables only apply to the stacked layouts). */ .tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container { border-bottom: 1px solid #e4e4e0; } /* * Current nav item in bold (Phase 4). WHY: the mockup sets "Home" at 700 and * the rest at 500; this theme has a weight variable for nav items but not one * for the active state. */ .tm-header .uk-navbar-nav > li.uk-active > a { font-weight: 700; } /* --- Homepage sections -------------------------------------------------- */ /* --- Footer ------------------------------------------------------------- */ /* * iSonic attribution (Phase 5). WHY: the agency attribution is template HTML * on every iSonic build (build_footer.mjs), so it is styled here rather than * with inline styles. Inverse (white-text) variant for the continuous dark * footer, reversed wordmark; bottom-right on desktop, centred on mobile. */ .mason-credit { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.2; } .mason-credit-right { justify-content: flex-end; } .mason-credit-center { justify-content: center; } .mason-credit a { color: #85857f; text-decoration: none; } .mason-credit a:hover { color: #ffffff; } .mason-credit img { display: block; height: 22px; width: auto; } /* * Mobile floating call button (Phase 5). WHY: accepted scope, the primary * conversion path on phones; no builder element can be position:fixed, so this * is the template's floatingphone-mobile HTML (build_footer.mjs) restyled to * the brand. Replaces the seed's olive custom.css rules (deleted by * clean_seed_css.mjs). Hidden from 960px up by its uk-hidden@m class. */ .floatingphone-mobile { position: fixed; right: 16px; bottom: 16px; z-index: 980; } .floatingphone-mobile a { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 3px solid #ffffff; border-radius: 50%; background: #058429; color: #ffffff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .floatingphone-mobile a:hover, .floatingphone-mobile a:focus { background: #046b21; color: #ffffff; } /* --- Forms -------------------------------------------------------------- */ /* --- Media queries (all of them, here, smallest first) ------------------ */ /* * Phones and tablets: clear the floating call button (Phase 5). WHY: the * fixed 64px button sat over the copyright line at 375px (screenshot, * 28/09/26). Section padding has no per-breakpoint setting, and the button * only exists below 960px, so the clearance is scoped to the same range. */ /* !important: the section's padding-bottom setting renders a UIkit padding * utility class, which is itself !important (no specificity wins). */ @media (max-width: 959px) { .mason-footer { padding-bottom: 88px !important; } }