/*
Theme Name: Aesthetics by Hayley
Theme URI: https://aestheticsbyhayley.co.uk/
Author: Aesthetics by Hayley
Description: Custom block theme for Aesthetics by Hayley, King's Cross. Teal and champagne gold ("Gold Foil Evening"), owned. Design tokens live in theme.json; this file holds only what theme.json cannot express.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.2.3
License: GNU General Public License v2 or later
Text Domain: abh
*/
/* ---------- Base ---------- */
:root {
--abh-gutter: clamp(1rem, 4vw, 2rem);
--abh-radius: 6px;
--abh-pill: 999px;
--abh-ease: 160ms ease;
--abh-rule: 1px solid var(--wp--preset--color--rule);
/* Gold dark enough for small text on ivory and champagne (4.5:1 and over). */
--abh-gold-text: #7D5F26;
--abh-gold-grad: var(--wp--custom--gold-grad);
--abh-ivory-84: rgb(247 243 236 / 0.84);
/* The header sits over the dark band at the top of every page; this is its height. */
--abh-header-h: 100px;
/* The "night" surface: deep teal to near black, a champagne glow, faint marble veins. */
--abh-night-bg:
radial-gradient(60% 70% at 74% 58%, rgb(194 164 106 / 0.26) 0%, rgb(194 164 106 / 0) 70%),
linear-gradient(160deg, #10504F 0%, #0B4142 32%, #072F31 66%, #041E20 100%);
}
@media (max-width: 1023px) { :root { --abh-header-h: 76px; } }
html { scroll-padding-top: calc(var(--abh-header-h) + 1rem); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
p, li { text-wrap: pretty; }
img { height: auto; }
::selection { background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--wp--preset--color--teal);
outline-offset: 3px;
border-radius: 2px;
}
.is-style-section-deep :focus-visible,
.is-style-section-teal :focus-visible,
.abh-header :focus-visible,
.abh-footer :focus-visible { outline-color: var(--wp--preset--color--white); }
.skip-link.screen-reader-text:focus {
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--ink);
z-index: 100000;
}
.is-hidden { display: none !important; }
.has-text-align-center { margin-inline: auto; }
/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
transition: background-color var(--abh-ease), color var(--abh-ease), border-color var(--abh-ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--teal-deep);
border: 1px solid var(--wp--preset--color--teal-deep);
padding: calc(0.95rem - 1px) calc(1.6rem - 1px);
}
.wp-block-button__link { transition: background-color var(--abh-ease), color var(--abh-ease), border-color var(--abh-ease), transform var(--abh-ease), box-shadow var(--abh-ease); }
/* On the dark bands: champagne gold buttons, gold outlines. */
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) .wp-block-button:not(.is-style-outline):not(.is-style-text) > .wp-block-button__link,
.abh-header__book .wp-block-button__link,
.abh-mobile-bar .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
background: var(--abh-gold-grad);
color: var(--wp--preset--color--ink);
box-shadow: 0 10px 30px -12px rgb(194 164 106 / 0.55);
}
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) .wp-block-button:not(.is-style-outline):not(.is-style-text) > .wp-block-button__link:hover,
.abh-header__book .wp-block-button__link:hover,
.abh-mobile-bar .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
background: var(--abh-gold-grad);
color: var(--wp--preset--color--ink);
transform: translateY(-1px);
box-shadow: 0 14px 34px -12px rgb(194 164 106 / 0.7);
}
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) .wp-block-button.is-style-outline > .wp-block-button__link { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-light); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgb(194 164 106 / 0.14); color: var(--wp--preset--color--white); }
/* The opening hero and the closing band: buttons in sentence case, as words to read. */
:is(.abh-hero, .abh-cta, .abh-treatment-hero) .wp-block-button__link { text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; padding-inline: 1.7rem; }
.abh-cta .wp-block-button.is-style-outline > .wp-block-button__link { border-color: rgb(247 243 236 / 0.55); color: var(--wp--preset--color--base); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: var(--wp--preset--color--teal-deep);
color: var(--wp--preset--color--white);
}
/* A row of buttons always sits on one line where it fits, side by side. */
.wp-block-buttons { gap: 0.75rem 1rem; }
.wp-block-button.is-style-text > .wp-block-button__link {
background: none;
color: inherit;
padding: 0;
min-height: 0;
text-transform: none;
letter-spacing: 0;
font-size: inherit;
font-weight: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.abh-pill {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.7rem 1.3rem;
border: 1px solid var(--wp--preset--color--teal-deep);
border-radius: var(--abh-pill);
color: var(--wp--preset--color--teal-deep);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: background-color var(--abh-ease), color var(--abh-ease);
}
.abh-pill:hover, .abh-pill:focus-visible { background: var(--wp--preset--color--teal-deep); color: var(--wp--preset--color--base); }
/* ---------- Typography helpers ---------- */
.is-style-lead { font-size: var(--wp--preset--font-size--lg); line-height: 1.5; color: var(--wp--preset--color--ink-2); }
/* A section's introduction sits just above body size, as in the reference. */
.abh-section > p.is-style-lead { font-size: 1.05rem; line-height: 1.6; max-width: 36em; }
.is-style-eyebrow {
display: flex;
align-items: center;
gap: 0.9rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--abh-gold-text);
}
.is-style-eyebrow::before { content: ""; flex: 0 0 28px; height: 1px; background: var(--wp--preset--color--gold); }
.has-text-align-center.is-style-eyebrow { justify-content: center; }
.is-style-price {
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--teal-deep);
font-variant-numeric: lining-nums tabular-nums;
}
p:empty, .abh-package-card > p:empty, .abh-facts > p:empty { display: none; }
/* The headline device: "Ready when you are. Book your consultation" is one heading for
search engines and screen readers, shown as a small eyebrow line above a large serif heading. */
.is-style-device {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
gap: 1rem;
font-family: var(--wp--preset--font-family--sans);
font-style: normal;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.75rem;
line-height: 1.4;
color: var(--abh-gold-text);
/* The short gold rule before the label line (the label is plain text, so it is drawn here). */
background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) no-repeat 0 0.68em / 28px 1px;
/* Room for the rule as padding, not text-indent: Safari indents the label line of a flex
heading differently, which left the rule out of line with the words (Hayley, 10 Oct). The
large line steps back out of the padding. */
padding-left: calc(28px + 0.9rem);
}
.is-style-device em {
display: block;
margin-left: calc(-28px - 0.9rem);
font-family: var(--wp--preset--font-family--serif);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: -0.005em;
font-size: var(--wp--preset--font-size--xxl);
line-height: 1.08;
color: var(--wp--preset--color--teal);
}
h1.is-style-device em { font-size: var(--wp--preset--font-size--display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.04; }
.has-text-align-center.is-style-device { align-items: center; background: none; padding-left: 0; }
.has-text-align-center.is-style-device em { margin-left: 0; }
/* Upright headings; an inside a heading is the italic accent, in the lighter teal. */
:where(h1, h2, h3) em { font-style: italic; }
:where(h2):not(.is-style-device) em { color: var(--wp--preset--color--teal); }
@media (forced-colors: active) { .abh-wordmark__name { background: none; color: CanvasText; } }
/* ---------- Header ---------- */
header.wp-block-template-part {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0);
z-index: 50;
}
/* Transparent over the dark band at the top of the page; teal-black once the page scrolls. */
.abh-header {
position: relative;
isolation: isolate;
background: transparent;
color: var(--wp--preset--color--base);
transition: box-shadow 200ms ease;
}
/* The blur sits on a layer behind the header, not on the header itself: a backdrop-filter on the
header would make it the containing block for the fixed phone menu, which would then open
squeezed inside the header bar. */
.abh-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(4 30 32 / 0.9);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.is-scrolled .abh-header::before { opacity: 1; }
.is-scrolled .abh-header { box-shadow: 0 1px 0 rgb(194 164 106 / 0.28), 0 12px 30px -18px rgb(0 0 0 / 0.5); }
/* The page starts under the header, so the dark band runs behind it. */
.wp-site-blocks > main { margin-top: calc(-1 * var(--abh-header-h)) !important; }
.abh-header__inner { min-height: var(--abh-header-h); gap: 2rem; }
.abh-header a:not(.wp-element-button) { color: inherit; text-decoration: none; }
/* Logotype: "Aesthetics by Hayley" in gold-gradient Newsreader, the place line under it. */
.abh-wordmark { margin: 0; line-height: 1; flex: none; }
.abh-wordmark a { display: inline-flex; flex-direction: column; gap: 0.35rem; text-decoration: none; }
.abh-wordmark__name {
font-family: var(--wp--preset--font-family--serif);
font-weight: 400;
font-size: 1.85rem;
letter-spacing: 0.005em;
white-space: nowrap;
background: var(--abh-gold-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.abh-wordmark__name em { font-style: italic; }
.abh-wordmark__place { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); padding-left: 0.05rem; }
.abh-nav { flex: 1 1 auto; }
.abh-nav .wp-block-navigation__container { gap: 2.1rem; }
.abh-nav .wp-block-navigation-item__content { padding-block: 0.75rem; font-size: 0.78rem; letter-spacing: 0.16em; color: rgb(247 243 236 / 0.88); }
/* Seven links fit beside the logo and Book from 1180px; on smaller laptops they sit closer. */
@media (min-width: 1024px) and (max-width: 1179px) {
.abh-nav .wp-block-navigation__container { gap: 1.05rem; }
.abh-nav .wp-block-navigation-item__content { font-size: 0.74rem; letter-spacing: 0.12em; }
}
.abh-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--white); text-decoration: underline; text-underline-offset: 0.45em; text-decoration-color: var(--wp--preset--color--gold); }
.abh-nav .wp-block-navigation__responsive-container-open {
width: 40px;
height: 40px;
min-width: 40px;
align-items: center;
justify-content: center;
border: 1px solid rgb(247 243 236 / 0.4);
border-radius: var(--abh-pill);
color: var(--wp--preset--color--base);
}
.abh-nav .wp-block-navigation__responsive-container-open svg { display: none; }
/* Three thin lines, as in the reference (the core icon has two). */
.abh-nav .wp-block-navigation__responsive-container-open::before { content: ""; width: 16px; height: 1px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
@media (forced-colors: active) {
.abh-nav .wp-block-navigation__responsive-container-open::before { display: none; }
.abh-nav .wp-block-navigation__responsive-container-open svg { display: block; width: 18px; height: 18px; }
}
.abh-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--wp--preset--color--base); }
.abh-nav .wp-block-navigation__responsive-container.is-menu-open {
background: var(--wp--preset--color--teal-black) !important;
color: var(--wp--preset--color--base) !important;
padding: 1.5rem var(--abh-gutter);
}
.abh-nav .is-menu-open .wp-block-navigation__container { gap: 0.25rem; }
.abh-nav .is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--serif);
font-style: italic;
font-weight: 300;
font-size: 2rem;
letter-spacing: 0;
text-transform: none;
padding-block: 0.5rem;
color: var(--wp--preset--color--base);
}
.abh-header__book { flex-shrink: 0; }
.abh-header__book .wp-block-button__link { min-height: 44px; padding: 0.7rem 1.45rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 600px) and (max-width: 1023px) {
.abh-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.abh-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
.abh-nav { flex: 0 0 auto; order: 3; }
.abh-header__inner > .abh-wordmark { margin-right: auto; }
}
@media (max-width: 1023px) {
.abh-wordmark__name { font-size: 1.5rem; }
.abh-header__inner { gap: 0.9rem; }
}
@media (max-width: 599px) {
.abh-wordmark__name { font-size: 1.3rem; }
.abh-wordmark__place { font-size: 0.625rem; letter-spacing: 0.2em; }
.abh-header__book .wp-block-button__link { min-height: 40px; padding: 0.5rem 1.1rem; letter-spacing: 0.14em; }
.abh-nav { flex: 0 0 auto; order: 3; }
.abh-header__inner > .abh-wordmark { margin-right: auto; }
}
/* The smallest phones (up to 369 wide): a little tighter, so the menu button stays on screen. */
@media (max-width: 369px) {
.abh-wordmark__name { font-size: 1.12rem; }
.abh-wordmark__place { font-size: 0.56rem; letter-spacing: 0.16em; }
.abh-header__inner { gap: 0.55rem; }
.abh-header__book .wp-block-button__link { padding: 0.5rem 0.85rem; letter-spacing: 0.1em; }
}
/* Mobile book bar: appears after the hero on small screens. */
.wp-block-buttons.abh-mobile-bar {
position: fixed;
inset: auto 0 0 0;
z-index: 40;
display: flex;
gap: 0.5rem;
padding: 0.6rem var(--abh-gutter) calc(0.6rem + env(safe-area-inset-bottom));
background: var(--wp--preset--color--teal-black);
border-top: 1px solid rgb(194 164 106 / 0.35);
transform: translateY(110%);
transition: transform 200ms ease;
}
.is-past-hero .abh-mobile-bar { transform: none; }
.abh-mobile-bar .wp-block-button { flex: 1; }
.abh-mobile-bar .wp-block-button__link { width: 100%; min-height: 46px; }
.abh-mobile-bar .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--base); border-color: rgb(247 243 236 / 0.55); }
@media (min-width: 600px) { .wp-block-buttons.abh-mobile-bar { display: none; } }
/* ---------- Sections ---------- */
/* Full-width bands sit flush against each other and against the header and footer. */
main.wp-block-group > * { margin-block: 0; }
main.wp-block-group > .wp-block-post-content:not(.abh-page-wide):not(:has(> .abh-hero:first-child)) { padding-top: clamp(2.5rem, 6vw, 4rem); }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }
.wp-block-post-content > .alignfull + :not(.alignfull) { margin-block-start: var(--wp--preset--spacing--50); }
.abh-section { padding-block: var(--wp--preset--spacing--70); }
/* Inside a section, text lines up with the left edge of the wide (card) column. */
/* (Centred headings, text and button rows stay centred.) */
.abh-section.is-layout-constrained > :where(:not(.alignwide):not(.alignfull):not(.has-text-align-center):not(.is-content-justification-center):not(.abh-chooser):not(.wp-block-abh-chooser):not(.abh-pullquote)) {
margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
margin-right: auto !important;
}
.abh-section > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.is-style-section-deep, .is-style-section-teal {
--wp--preset--color--link: var(--wp--preset--color--white);
}
.is-style-section-deep :where(h1, h2, h3, h4, p, li, .is-style-device, .is-style-eyebrow, .is-style-price),
.is-style-section-teal :where(h1, h2, h3, h4, p, li, .is-style-device, .is-style-eyebrow, .is-style-price) { color: var(--wp--preset--color--white); }
.is-style-section-deep a:where(:not(.wp-element-button)),
.is-style-section-teal a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--white); }
.is-style-section-deep .is-style-outline > .wp-block-button__link,
.is-style-section-teal .is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white); }
.is-style-section-deep .is-style-outline > .wp-block-button__link:hover,
.is-style-section-teal .is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--teal-deep); }
.is-style-section-deep .abh-pill { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white); }
/* ---------- Night surfaces: the hero, page headers, Kind words, the closing band ---------- */
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) {
position: relative;
isolation: isolate;
background: var(--abh-night-bg) !important;
color: var(--abh-ivory-84);
border: 0;
}
/* Faint marble veins (screen blend at 5%) over the gradient. The veins are the texture's alpha used
as a mask over their own warm ivory colour, which looks the same as painting the texture but keeps
it out of the browser's Largest Contentful Paint (a large background image would count). The
texture is decoration, so it is fetched on the first scroll or shortly after the page has loaded
(functions.php adds .abh-marble) and fades in; it stays off the critical path for the first paint. */
:root.abh-marble :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(214 200 170);
-webkit-mask: url(assets/images/marble-veins.webp) 0 0 / 1400px 900px repeat;
mask: url(assets/images/marble-veins.webp) 0 0 / 1400px 900px repeat;
opacity: 0.05;
mix-blend-mode: screen;
pointer-events: none;
animation: abh-marble-in 0.8s ease both;
}
@keyframes abh-marble-in { from { opacity: 0; } }
/* Hayley, 8 Oct: the marble veins read a little like water. ?bg= (functions.php) tries fine champagne
gold lines in their place on the dark sections, after her references: arches (tall arches, as on
her green paper), deco (a grid of arcs and lines), soft (overlapping circles that leave small
four-point stars) or plain (no texture). They show at once, not after the first scroll like the
veins. Preview only, until she picks one. */
:root:is(.abh-bg-arches, .abh-bg-deco, .abh-bg-soft, .abh-bg-plain) :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(194 164 106);
mix-blend-mode: normal;
pointer-events: none;
animation: none;
}
:root.abh-bg-arches :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cpath d='M0 80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 240a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 -80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0z' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cpath d='M0 80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 240a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 -80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0z' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat; opacity: 0.18; }
:root.abh-bg-deco :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 1H240M0 120H240M1 0V240M120 0V240M0 0a120 120 0 0 1 120 120M120 120a60 60 0 0 1 120 0M0 240L120 120M240 120a120 120 0 0 0-120 120M150 240V180a30 30 0 0 1 60 0v60' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 1H240M0 120H240M1 0V240M120 0V240M0 0a120 120 0 0 1 120 120M120 120a60 60 0 0 1 120 0M0 240L120 120M240 120a120 120 0 0 0-120 120M150 240V180a30 30 0 0 1 60 0v60' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat; opacity: 0.16; }
:root.abh-bg-soft :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M120 60a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0Z' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M120 60a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0Z' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat; opacity: 0.14; }
:root.abh-bg-plain :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { display: none; }
/* ?bg=soft-light (Hayley, 12 Oct): the favourite with her clients, the circles of soft but much fainter. */
:root.abh-bg-soft.abh-bg-light :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { opacity: 0.07; }
@media (prefers-reduced-motion: reduce) {
:root.abh-marble :is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { animation: none; }
}
@media (forced-colors: active) {
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band)::before { display: none; }
}
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) :where(h1, h2, h3, h4, .abh-chooser__q) { color: var(--wp--preset--color--base); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) :where(p, li, figcaption, .wp-block-post-excerpt) { color: var(--abh-ivory-84); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--gold-light); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) :is(.is-style-eyebrow, .is-style-device, .is-style-price) { color: var(--wp--preset--color--gold-light); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) .is-style-device em { color: var(--wp--preset--color--base); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) :focus-visible { outline-color: var(--wp--preset--color--gold-light); }
:is(.abh-hero, .abh-cta, .abh-kind, .abh-page-hero, .abh-page-head, .abh-reviews-band) .abh-crumbs ol { color: rgb(247 243 236 / 0.7); }
/* ---------- Closing book band (patterns/cta-band.php) ---------- */
.abh-cta { text-align: center; padding-block: clamp(5rem, 9vw, 8rem) !important; }
.abh-cta .is-style-device { gap: 1rem; }
.abh-cta .is-style-device em { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 300; line-height: 1.05; }
.abh-cta > p { max-width: 34em; font-size: 1.08rem; font-weight: 300; margin-top: 1.2rem !important; }
.abh-cta .wp-block-buttons { margin-top: 2.2rem !important; gap: 0.9rem; }
/* ---------- Inner page header (parts/page-hero.html) ---------- */
/* Every inner page opens the same way: a shorter night band under the header, with the breadcrumb,
the heading in light italic and the introduction. */
.abh-page-hero {
padding-block: calc(var(--abh-header-h) + clamp(1.75rem, 5vw, 3.5rem)) clamp(2.5rem, 5vw, 4rem);
}
.abh-page-hero__inner > * { margin-block: 0; }
.abh-page-hero h1 {
font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem);
font-style: italic;
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.06;
max-width: 17em;
margin-block: 1.1rem 0 !important;
}
.abh-page-hero__lead { max-width: 38rem; margin-top: 1.2rem !important; font-weight: 300; }
/* ---------- Reading pages: text with a booking card beside it (templates/page.html) ---------- */
.abh-page-body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
.abh-page-body__cols { gap: clamp(2rem, 6vw, 5.5rem) !important; align-items: flex-start !important; margin-block: 0 !important; }
.abh-page-body__main { min-width: 0; }
.abh-page-body__main .wp-block-post-content { max-width: 44rem; }
.abh-page-body__main .wp-block-post-content > :first-child { margin-top: 0; }
.abh-page-body__main .wp-block-post-content > h2:not(:first-child) { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: var(--abh-rule); }
.abh-page-body__aside { position: sticky; top: 104px; }
@media (max-width: 781px) {
/* On phones the closing band and the book bar do this job. */
.abh-page-body__aside { display: none; }
}
.abh-aside-card {
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-top: 3px solid var(--wp--preset--color--gold);
border-radius: var(--abh-radius);
padding: clamp(1.5rem, 2.5vw, 2rem);
box-shadow: 0 18px 40px -24px rgb(11 65 66 / 0.35);
}
.abh-aside-card > * { margin-block: 0; }
.abh-aside-card__title { font-size: var(--wp--preset--font-size--xl); margin-top: 0.5rem !important; }
.abh-aside-card__text { margin-top: 0.75rem !important; color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); }
.abh-aside-card__buttons { margin-top: 1.25rem !important; display: grid !important; gap: 0.6rem; }
.abh-aside-card__buttons .wp-block-button, .abh-aside-card__buttons .wp-block-button__link { width: 100%; }
.abh-aside-card__facts { margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: var(--abh-rule); display: grid; gap: 0.85rem; }
.abh-aside-card__facts > * { margin: 0 !important; }
/* A line of contact detail with its icon: phone, address, hours, email. */
.abh-fact-line {
position: relative;
padding-left: 2.25rem;
min-height: 1.6rem;
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--ink-2);
line-height: 1.55;
}
/* The icons are drawn as masks over the gold, so the SVGs' currentColor is honoured. */
.abh-fact-line::before, .abh-icon-card::before {
content: "";
position: absolute;
left: 0;
top: -0.1rem;
width: 1.6rem;
height: 1.6rem;
background: var(--wp--preset--color--gold-dark);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.abh-fact-line--phone::before, .abh-icon-card--phone::before { -webkit-mask-image: url(assets/icons/phone.svg); mask-image: url(assets/icons/phone.svg); }
.abh-fact-line--pin::before, .abh-icon-card--pin::before { -webkit-mask-image: url(assets/icons/pin.svg); mask-image: url(assets/icons/pin.svg); }
.abh-fact-line--clock::before { -webkit-mask-image: url(assets/icons/clock.svg); mask-image: url(assets/icons/clock.svg); }
.abh-fact-line--mail::before { -webkit-mask-image: url(assets/icons/mail.svg); mask-image: url(assets/icons/mail.svg); }
.abh-fact-line--message::before, .abh-icon-card--message::before { -webkit-mask-image: url(assets/icons/message.svg); mask-image: url(assets/icons/message.svg); }
.abh-icon-card--calendar::before { -webkit-mask-image: url(assets/icons/calendar.svg); mask-image: url(assets/icons/calendar.svg); }
.abh-fact-line .wp-block-button__link { min-height: 0; color: var(--wp--preset--color--teal-deep); font-weight: 500; text-decoration: none; }
/* ---------- Sections on designed pages (templates/page-wide.html) ---------- */
.abh-page-wide { margin-block: 0 !important; }
.abh-page-wide > .abh-section:first-child { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.abh-muted { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); }
/* Text beside a photo. */
.abh-split { gap: clamp(2rem, 6vw, 5rem) !important; }
.abh-split > .wp-block-column > * { margin-block: 0; }
.abh-split > .wp-block-column > * + * { margin-top: 1.25rem; }
.abh-split .wp-block-buttons { margin-top: 2rem !important; }
.abh-portrait { margin: 0; }
.abh-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--abh-radius); box-shadow: 0 30px 60px -40px rgb(11 65 66 / 0.55); }
@media (max-width: 781px) { .abh-portrait img { aspect-ratio: 4 / 3; } }
/* Price menu: name on the left (with a small note under it), price on the right, hairlines. */
.abh-menu-layout { gap: clamp(2rem, 6vw, 5rem) !important; }
.abh-menu-layout > .wp-block-column > * { margin-block: 0; }
.abh-menu-layout > .wp-block-column > * + * { margin-top: 1rem; }
.abh-price-menu { margin: 0; overflow: visible; }
.abh-price-menu table { border-collapse: collapse; table-layout: auto; width: 100%; font-size: var(--wp--preset--font-size--md); }
.abh-price-menu thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.abh-price-menu td { border: 0 !important; border-bottom: var(--abh-rule) !important; padding: 1.15rem 0 !important; background: none; vertical-align: baseline; }
.abh-price-menu tr:first-child td { border-top: var(--abh-rule) !important; }
.abh-price-menu td:first-child { font-family: var(--wp--preset--font-family--serif); font-size: 1.3rem; line-height: 1.3; color: var(--wp--preset--color--teal-deep); padding-right: 1.5rem !important; }
.abh-price-menu td:first-child a { color: inherit; text-decoration: none; }
.abh-price-menu td:first-child a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 0.2em; }
.abh-price-menu td:last-child { text-align: right; white-space: nowrap; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep); }
.abh-price-menu__note { display: block; margin-top: 0.3rem; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
/* Small cards in a row. */
.abh-card-row { gap: 1.5rem !important; margin-top: var(--wp--preset--spacing--40) !important; }
.abh-section > .abh-card-row:first-child { margin-top: 0 !important; }
.abh-card-row > .wp-block-column { display: flex; }
.abh-mini-card {
flex: 1;
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 2.5vw, 2rem);
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-radius: var(--abh-radius);
}
.abh-mini-card > * { margin: 0 !important; }
.abh-mini-card > * + * { margin-top: 0.85rem !important; }
.abh-mini-card :is(h2, h3) { font-size: var(--wp--preset--font-size--xl); }
.abh-mini-card > p:not([class]) { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); line-height: 1.6; }
.abh-mini-card__kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--abh-gold-text); }
.abh-mini-card__prices { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--teal-deep); padding-top: 0.85rem; border-top: var(--abh-rule); }
.abh-mini-card .wp-block-buttons { margin-top: auto !important; padding-top: 1.25rem; }
.abh-mini-card__icon { width: 3rem; height: 3rem; margin-bottom: 0.25rem !important; }
/* Cards with an icon on top (contact). */
.abh-icon-card::before { position: static; display: block; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; }
/* With a picture, the picture runs edge to edge across the top of the card instead of the icon. */
.abh-icon-card:has(> .abh-icon-card__picture) { overflow: hidden; }
.abh-icon-card:has(> .abh-icon-card__picture)::before { display: none; }
.abh-mini-card.abh-icon-card > .abh-icon-card__picture {
margin: calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) 0.6rem !important;
max-width: none !important;
}
.abh-icon-card__picture img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.abh-contact-lines { line-height: 1.9; }
.abh-contact-lines a { color: var(--wp--preset--color--teal-deep); font-weight: 500; }
.abh-address { font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; line-height: 1.45; color: var(--wp--preset--color--teal-deep); }
.abh-prose > * { margin-block: 0; }
.abh-prose > * + * { margin-top: 1.1rem; }
.abh-prose > h3 { margin-top: 2.25rem; }
.abh-prose .wp-block-buttons { margin-top: 1.5rem; }
.abh-hours td:first-child { font-size: 1.1rem !important; }
.abh-hours td:last-child { letter-spacing: 0.08em !important; }
.abh-form-card { padding: clamp(1.5rem, 3vw, 2.5rem); }
.abh-form-card .abh-form { max-width: none; margin: 0; }
/* Rating card (reviews). */
.abh-rating {
text-align: center;
padding: clamp(2rem, 4vw, 3rem) 1.5rem;
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-top: 3px solid var(--wp--preset--color--gold);
border-radius: var(--abh-radius);
box-shadow: 0 30px 60px -45px rgb(11 65 66 / 0.55);
}
.abh-rating > * { margin: 0 !important; }
.abh-rating__score { font-family: var(--wp--preset--font-family--serif); font-size: clamp(4rem, 3rem + 4vw, 6rem); line-height: 1; color: var(--wp--preset--color--teal-deep); }
.abh-rating__stars { margin-top: 0.75rem !important; font-size: 1.35rem; }
.abh-rating__stars .abh-stars { margin: 0; letter-spacing: 0.2em; }
/* Google's own multicolour G beside the rating (Hayley, 10 Oct: looks more authentic). */
.abh-google { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.15em; background: url(assets/icons/google-g.svg) center / contain no-repeat; }
.abh-hero .abh-google { background-color: #fff; border-radius: 50%; background-size: 70%; width: 1.35em; height: 1.35em; vertical-align: -0.35em; }
.abh-rating__label .abh-google { width: 1.5em; height: 1.5em; vertical-align: -0.45em; margin-right: 0.5em; }
.abh-rating__label { margin-top: 0.5rem !important; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.abh-rating .wp-block-buttons { margin-top: 1.75rem !important; justify-content: center; }
.abh-quotes--two { margin-top: 1.5rem !important; }
.abh-quotes--two + .abh-quotes--two { margin-top: 1.5rem !important; }
/* Pull quote. */
.abh-pullquote { max-width: 52rem; margin: 0 auto !important; padding: 0; text-align: center; border: 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.45; color: var(--wp--preset--color--teal-deep); }
.abh-pullquote::before { content: "“"; display: block; font-size: 4rem; line-height: 0.6; color: var(--wp--preset--color--gold); margin-bottom: 1rem; font-style: normal; }
.abh-pullquote p { margin: 0; }
.abh-pullquote cite { display: block; margin-top: 1.5rem; font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
/* Numbered steps. */
.abh-steps { gap: 1.25rem !important; margin-top: var(--wp--preset--spacing--40) !important; counter-reset: step; }
.abh-steps > .wp-block-column { display: flex; }
.abh-step { flex: 1; padding: 1.75rem 1.5rem; background: var(--wp--preset--color--white); border: var(--abh-rule); border-radius: var(--abh-radius); }
.abh-step > * { margin: 0; }
.abh-step__num { font-family: var(--wp--preset--font-family--serif); font-size: 2.75rem; line-height: 1; color: var(--wp--preset--color--gold-dark); margin-bottom: 1rem !important; }
.abh-after-steps { margin-top: var(--wp--preset--spacing--40) !important; max-width: 44rem; }
/* Booking page: the calendar in a card, the help beside it. */
.abh-book-layout { gap: clamp(1.5rem, 4vw, 3.5rem) !important; align-items: flex-start !important; }
/* Arriving from a Book button (functions.php): the calendar comes straight after the heading. */
:root.abh-book-direct :is(.abh-page-hero__lead, .abh-book-steps) { display: none; }
:root.abh-book-direct .abh-page-hero { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
:root.abh-book-direct .abh-page-hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.abh-book-card { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--wp--preset--color--white); border: var(--abh-rule); border-radius: var(--abh-radius); min-height: 22rem; }
.abh-book-card .abh-book__loading { padding: 0.5rem 0 0; }
.abh-book-card .abh-book__loading > p { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; color: var(--wp--preset--color--teal-deep); }
.abh-book__skeleton { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-top: 1.5rem; }
.abh-book__skeleton span { height: 3rem; border-radius: var(--abh-radius); background: linear-gradient(90deg, var(--wp--preset--color--champagne) 0%, var(--wp--preset--color--base) 50%, var(--wp--preset--color--champagne) 100%); background-size: 200% 100%; animation: abh-shimmer 1.4s ease-in-out infinite; }
.abh-book__skeleton span:first-child { grid-column: 1 / -1; width: 60%; height: 2.25rem; }
@keyframes abh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .abh-book__skeleton span { animation: none; } }
.abh-book-steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0 0 1.5rem; padding: 0 0 1.25rem; list-style: none; counter-reset: step; border-bottom: var(--abh-rule); }
.abh-book-steps li { counter-increment: step; display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--wp--preset--color--teal-deep); }
.abh-book-steps li::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--wp--preset--color--gold); border-radius: 50%; font-family: var(--wp--preset--font-family--serif); font-size: 0.95rem; color: var(--abh-gold-text); }
.abh-book-aside { position: sticky; top: 104px; }
.abh-book-aside .abh-aside-card__buttons { grid-template-columns: 1fr; }
/* Package cards: price block, summary, checklist, the rest folded away. */
.abh-section--packages .abh-package-list { margin-top: var(--wp--preset--spacing--40) !important; }
.abh-package-card { gap: 0.9rem; }
.abh-package-card__badge { color: var(--abh-gold-text) !important; }
.abh-package-card__pricing > :empty { display: none !important; }
.abh-package-card__pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; padding-bottom: 0.9rem; border-bottom: var(--abh-rule); }
.abh-package-card__pricing > * { margin: 0 !important; }
.abh-package-card__summary { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); }
.abh-package-card__summary .wp-block-post-excerpt__excerpt { margin: 0; }
.abh-package-card__summary .wp-block-post-excerpt__more-text { display: none; }
.abh-package-card .abh-meta-list, .abh-package-card ul { font-size: var(--wp--preset--font-size--sm); margin: 0; }
.abh-package-card__more { border-bottom: 0 !important; border-top: var(--abh-rule); padding-block: 0 !important; }
.abh-package-card__more summary { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; padding-block: 0.9rem !important; }
.abh-package-card__more[open] { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-package-card__more .wp-block-post-content > * { margin-block: 0 0 0.75rem; }
/* ---------- Treatment pages: the text beside contents, Hayley and a booking card ---------- */
.abh-treatment-body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.abh-treatment-body__cols { gap: clamp(2rem, 5vw, 5rem) !important; margin-block: 0 !important; }
.abh-treatment-body__main { min-width: 0; }
.abh-treatment-body__main .wp-block-post-content { max-width: 44rem; }
.abh-treatment-body__main .wp-block-post-content > :first-child { margin-top: 0; }
.abh-treatment-body__main .wp-block-post-content > p:first-child { font-size: var(--wp--preset--font-size--lg); line-height: 1.55; }
/* Each main section starts on a hairline, so the page reads as chapters. */
.abh-treatment-body__main .wp-block-post-content > h2,
.abh-treatment-faqs .abh-faqs > h2 { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: var(--abh-rule); scroll-margin-top: 104px; }
.abh-treatment-body__main .wp-block-post-content > h3 { margin-top: 2.25rem; font-size: 1.375rem; }
/* Reading pages keep their section headings smaller than the designed sections' headings. */
:is(.abh-treatment-body__main, .abh-page-body__main) .wp-block-post-content > h2, .abh-treatment-faqs .abh-faqs > h2, .abh-related-band .abh-related > h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); }
.abh-treatment-body__main .wp-block-post-content > ul.wp-block-list:not([class*="is-style"]),
.abh-page-body__main .wp-block-post-content > ul.wp-block-list:not([class*="is-style"]) { list-style: none; padding-left: 0; }
.abh-treatment-body__main .wp-block-post-content > ul.wp-block-list:not([class*="is-style"]) > li,
.abh-page-body__main .wp-block-post-content > ul.wp-block-list:not([class*="is-style"]) > li { position: relative; padding-left: 1.5rem; margin-block: 0.55rem; }
.abh-treatment-body__main .wp-block-post-content > ul.wp-block-list:not([class*="is-style"]) > li::before,
.abh-page-body__main .wp-block-post-content > ul.wp-block-list:not([class*="is-style"]) > li::before { content: ""; position: absolute; left: 0.15rem; top: 0.68em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wp--preset--color--gold); }
.abh-treatment-faqs { max-width: 44rem; }
.abh-treatment-body__aside { display: flex; flex-direction: column; gap: 1.5rem; }
.abh-treatment-book { position: sticky; top: 104px; }
.abh-treatment-book .wp-block-post-title { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--xl); line-height: 1.2; color: var(--wp--preset--color--teal-deep); margin-top: 0.6rem !important; }
.abh-treatment-book__price { margin-top: 0.35rem !important; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.abh-treatment-book__note { padding-top: 1.1rem; margin-top: 1.25rem !important; border-top: var(--abh-rule); }
.abh-treatment-book__consult { margin-top: 0.25rem !important; }
.abh-treatment-book__consult .wp-block-button__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--wp--preset--color--teal-deep); }
/* "More detail" sections, folded to their heading (inc/toc.php). */
details.abh-more { margin-top: var(--wp--preset--spacing--60); border-top: var(--abh-rule); }
details.abh-more + details.abh-more { margin-top: 0; }
.abh-more__summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 1.4rem 3rem 1.4rem 0; }
.abh-more__summary::-webkit-details-marker { display: none; }
.abh-more__summary::before { content: "More detail"; display: block; margin-bottom: 0.45rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--abh-gold-text); }
.abh-more__summary h2 { margin: 0; font-size: var(--wp--preset--font-size--xl); line-height: 1.25; scroll-margin-top: 104px; }
.abh-more__summary::after {
content: "";
position: absolute;
right: 0.6rem;
top: 50%;
width: 0.65rem;
height: 0.65rem;
margin-top: -0.2rem;
border-right: 1.5px solid var(--wp--preset--color--gold-dark);
border-bottom: 1.5px solid var(--wp--preset--color--gold-dark);
transform: translateY(-50%) rotate(45deg);
transition: transform var(--abh-ease);
}
.abh-more[open] > .abh-more__summary::after { transform: translateY(-20%) rotate(-135deg); }
.abh-more__summary:hover h2 { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.abh-more__body { padding-bottom: 1.5rem; }
.abh-more__body > :first-child { margin-top: 0; }
.abh-more__body > h3 { margin-top: 2rem; font-size: 1.375rem; }
.abh-more__body > ul.wp-block-list:not([class*="is-style"]) { list-style: none; padding-left: 0; }
.abh-more__body > ul.wp-block-list:not([class*="is-style"]) > li { position: relative; padding-left: 1.5rem; margin-block: 0.55rem; }
.abh-more__body > ul.wp-block-list:not([class*="is-style"]) > li::before { content: ""; position: absolute; left: 0.15rem; top: 0.68em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wp--preset--color--gold); }
/* On this page. */
.abh-toc__title { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--abh-gold-text); }
.abh-toc__list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.abh-toc__list li { margin: 0; }
.abh-toc__list a { display: block; padding: 0.4rem 0 0.4rem 1rem; border-left: 1px solid var(--wp--preset--color--rule); font-size: var(--wp--preset--font-size--sm); line-height: 1.4; color: var(--wp--preset--color--ink-2); text-decoration: none; }
.abh-toc__list a:hover, .abh-toc__list a:focus-visible { color: var(--wp--preset--color--teal-deep); border-left-color: var(--wp--preset--color--gold); }
.abh-toc--collapsible { margin: 0 0 2rem; padding: 0 1.25rem; background: var(--wp--preset--color--white); border: var(--abh-rule); border-radius: var(--abh-radius); }
.abh-toc--collapsible summary { padding-block: 1rem !important; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.abh-toc--collapsible .abh-toc__list { margin: 0 0 1rem; }
.abh-toc__title--more { margin-top: 1.5rem; }
.abh-toc--collapsible .abh-toc__title--more { margin: 0 0 0.5rem; }
/* Your practitioner. */
.abh-practitioner { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0 1rem; padding: 1.5rem; background: var(--wp--preset--color--champagne); border-radius: var(--abh-radius); }
.abh-practitioner > * { margin: 0 !important; }
.abh-practitioner__photo img { display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.abh-practitioner__name { font-family: var(--wp--preset--font-family--serif); font-size: 1.3rem; line-height: 1.2; color: var(--wp--preset--color--teal-deep); }
.abh-practitioner__name span { display: block; margin-top: 0.3rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.abh-practitioner__text { grid-column: 1 / -1; margin-top: 1rem !important; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-practitioner__text a { white-space: nowrap; font-weight: 500; }
@media (min-width: 1024px) {
.abh-toc--phone { display: none; }
}
@media (max-width: 599px) {
.abh-treatment-hero .wp-block-buttons > .wp-block-button { width: 100%; }
.abh-treatment-hero .wp-block-button__link { width: 100%; }
}
@media (max-width: 1023px) {
/* Tablets and phones: the text full width, the cards after it. */
.abh-treatment-body__cols { flex-wrap: wrap !important; }
.abh-treatment-body__cols > .wp-block-column { flex-basis: 100% !important; }
.abh-aside-toc { display: none; }
.abh-treatment-book { position: static; }
.abh-treatment-body__aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
}
.abh-related-band .abh-related > h2 { margin-top: 0; }
/* Tables: words never split. Tables of three or more columns become label and value cards on
phones (content-filters.php adds the labels). */
/* Specific enough to beat core's break-word on fixed-layout tables, which split words mid-letter. */
.wp-block-table table :is(td, th), .wp-block-table table.has-fixed-layout :is(td, th) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wp-block-table table { border-collapse: collapse; }
.wp-block-table:not(.abh-price-menu) th { background: none; border: 0; border-bottom: 1px solid var(--wp--preset--color--teal-deep); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep); padding: 0.75rem 0.9rem 0.75rem 0; }
.wp-block-table:not(.abh-price-menu) td { border: 0; border-bottom: var(--abh-rule); padding: 0.85rem 0.9rem 0.85rem 0; }
@media (max-width: 599px) {
.abh-table--stack table, .abh-table--stack tbody, .abh-table--stack tr, .abh-table--stack td { display: block; width: 100%; }
.abh-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.abh-table--stack tr { padding: 1rem 0; border-bottom: var(--abh-rule); }
.abh-table--stack td { border: 0 !important; padding: 0.2rem 0 !important; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; }
.abh-table--stack td::before { content: attr(data-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); padding-top: 0.2rem; }
.abh-table--stack td:first-child { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; color: var(--wp--preset--color--teal-deep); padding-bottom: 0.4rem !important; }
.abh-table--stack td:first-child::before { content: none; }
.abh-price-menu td:first-child { font-size: 1.125rem; }
}
/* ---------- Home hero ---------- */
/* The words on the left; Hayley, cut out of her own photo, standing in the glow on the right and
fading into the band at the bottom. */
.abh-hero {
display: flex;
flex-direction: column;
min-height: min(100vh, 860px);
overflow: hidden;
padding-block: calc(var(--abh-header-h) + 1.5rem) 0 !important;
}
.abh-hero > * { width: 100%; }
.abh-hero > .wp-block-columns { flex: 1; align-items: center !important; margin-block: 0 !important; padding-bottom: 3rem; }
.abh-hero .abh-hero__text { position: relative; z-index: 2; flex: 0 1 620px !important; max-width: min(620px, 50%); }
.abh-hero .wp-block-columns > .wp-block-column:last-child {
position: absolute;
z-index: 1;
top: 2.5rem;
bottom: 2.5rem;
/* Just inside the right edge of the content column, as in the reference. */
right: calc(max(var(--abh-gutter), (100% - var(--wp--style--global--wide-size)) / 2) + 12px);
width: min(46vw, 720px);
flex: none !important;
margin: 0 !important;
display: flex;
justify-content: center;
align-items: flex-end;
pointer-events: none;
}
.abh-hero .wp-block-image { height: 100%; max-width: none !important; margin: 0; display: flex; align-items: flex-end; justify-content: center; }
/* The soft gold glow sits on the figure, not the photo: on the photo, the fade (a mask) would clip
the glow at the photo's edges and leave a faint vertical line beside her. */
.abh-hero .wp-block-image { filter: drop-shadow(0 0 70px rgb(194 164 106 / 0.22)); }
.abh-hero .wp-block-image img {
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
object-position: bottom;
border-radius: 0;
-webkit-mask-image: linear-gradient(to bottom, #000 72%, rgb(0 0 0 / 0) 100%);
mask-image: linear-gradient(to bottom, #000 72%, rgb(0 0 0 / 0) 100%);
}
.abh-hero__text > * { margin-block: 0; }
.abh-hero .is-style-device { color: var(--wp--preset--color--gold-light); gap: 1.4rem; }
.abh-hero h1.is-style-device em { font-size: clamp(2.6rem, 5.6vw, 5rem); color: var(--wp--preset--color--base); }
.abh-hero__text > p:not(.is-style-eyebrow):not(.abh-rating-line) { font-size: clamp(1.02rem, 1.3vw, 1.22rem); font-weight: 300; line-height: 1.55; max-width: 34em; margin-top: 1.4rem; }
/* Who the clinic is for, picked out in gold in the introduction (the words are unchanged). */
.abh-hero .abh-hero__who { font-weight: 500; color: var(--wp--preset--color--gold-light); white-space: nowrap; }
.abh-hero__text .wp-block-buttons { margin-top: 2.1rem; gap: 0.9rem; }
.abh-hero__text .abh-rating-line { margin-top: 1.6rem; font-size: 0.95rem; }
.abh-hero .abh-rating-line, .abh-hero .abh-rating-line a { color: rgb(247 243 236 / 0.86); }
/* The address on a thin gold rule at the foot of the hero. */
.abh-hero__foot {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 1.2rem;
margin: 0 auto !important;
padding-bottom: 1.4rem;
max-width: var(--wp--style--global--wide-size) !important;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
white-space: nowrap;
color: var(--wp--preset--color--gold-light) !important;
}
.abh-hero__foot::before, .abh-hero__foot::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(194 164 106 / 0), rgb(194 164 106 / 0.7)); }
.abh-hero__foot::after { background: linear-gradient(90deg, rgb(194 164 106 / 0.7), rgb(194 164 106 / 0)); }
@media (max-width: 900px) {
/* Phones and small tablets: one column, as in the reference. The words come first and Hayley
stands below them, full width, with the same soft fade at her foot; nothing sits behind the
text. */
.abh-hero { min-height: 0; }
.abh-hero > .wp-block-columns { flex-direction: column; align-items: stretch !important; padding-bottom: 0; gap: 0; }
.abh-hero .abh-hero__text { flex: none !important; max-width: min(100%, 34rem); }
.abh-hero .wp-block-columns > .wp-block-column:last-child {
position: relative;
top: auto;
right: auto;
bottom: auto;
width: 100%;
height: min(66vh, 520px);
margin-top: 1.5rem !important;
}
.abh-hero .wp-block-image { width: 100%; }
.abh-hero .wp-block-image img { height: 100%; width: auto; max-width: 100%; }
.abh-hero__foot { white-space: normal; text-align: center; padding-top: 0.4rem; }
}
@media (max-width: 559px) {
/* The headline always breaks after "never". */
.abh-hero h1.is-style-device em { max-width: 17rem; font-size: 2.55rem; }
.abh-hero .is-style-device { letter-spacing: 0.14em; }
.abh-hero .wp-block-button, .abh-cta .wp-block-button { flex: 1 1 100%; }
.abh-hero .wp-block-button__link, .abh-cta .wp-block-button__link { width: 100%; }
}
/* Hero C (?hero=needle): Hayley's photo stays; the home page card pictures show the needle set. */
.abh-hc-alt { display: none !important; }
:root.abh-hero-needle .abh-hc-alt { display: block !important; }
:root.abh-hero-needle .abh-hc-base { display: none !important; }
/* ---------- Before and after: the slider (home Hero B, ?hero=slider) and the split thumbnail ---------- */
/* Hero A shows Hayley; with ?hero=slider (a class set in the head before first paint) the slider
takes her place. The slider's photos are lazy, so Hero A never downloads them. */
.abh-hero .abh-baslider { display: none; }
:root.abh-hero-slider .abh-hero .wp-block-image { display: none; }
:root.abh-hero-slider .abh-hero .abh-baslider { display: block; pointer-events: auto; }
:root.abh-hero-slider .abh-hero .wp-block-columns > .wp-block-column:last-child {
top: calc(var(--abh-header-h) + 1.5rem);
bottom: 4rem;
align-items: center;
}
.abh-baslider { width: min(100%, 440px, calc((100svh - 20rem) * 0.8)); min-width: min(100%, 300px); margin-inline: auto; }
/* Landscape photos: a wider frame, kept to the right so it never reaches the words. */
.abh-baslider.is-wide { width: min(100% - 1.5rem, 560px); margin-right: 0; }
.abh-baslider__pair, .abh-bathumb { margin: 0; }
.abh-baslider__pair[hidden] { display: none; }
.abh-baslider__frame {
position: relative;
overflow: hidden;
border: 1px solid rgb(194 164 106 / 0.7);
border-radius: 4px;
background: var(--wp--preset--color--base);
box-shadow: 0 24px 60px rgb(4 30 32 / 0.35);
-webkit-user-select: none;
user-select: none;
}
.abh-baslider .abh-baslider__frame { cursor: ew-resize; touch-action: pan-y; }
.abh-baslider__frame:has(.abh-baslider__range:focus-visible) { outline: 2px solid var(--wp--preset--color--gold-light); outline-offset: 4px; }
.abh-baslider__img { position: absolute; inset: 0; }
.abh-baslider__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* A side-by-side pair (a full face): two halves with a hairline between, nothing to drag. */
.abh-baslider .abh-baslider__frame.is-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--wp--preset--color--gold); cursor: default; }
.abh-baslider__frame.is-side .abh-baslider__img { position: relative; inset: auto; min-height: 0; }
.abh-baslider__frame.is-side .abh-baslider__img--after { -webkit-clip-path: none; clip-path: none; }
.abh-baslider__frame.is-side .abh-baslider__label--after { right: auto; left: calc(50% + 0.8rem); }
/* The after photo shows to the right of the handle. */
.abh-baslider__img--after { -webkit-clip-path: inset(0 0 0 var(--pos)); clip-path: inset(0 0 0 var(--pos)); }
/* Until consented photos arrive: an obvious placeholder, never a stand-in face. */
.abh-baslider__ph {
position: absolute;
inset: 0;
display: grid;
/* Below the handle, so the words stay readable. */
place-items: end center;
padding: 1.5rem 1.5rem 18%;
background: var(--wp--preset--color--base);
box-shadow: inset 0 0 0 10px var(--wp--preset--color--base), inset 0 0 0 11px var(--wp--preset--color--gold);
text-align: center;
}
.abh-baslider__ph--after { background: var(--wp--preset--color--champagne); box-shadow: inset 0 0 0 10px var(--wp--preset--color--champagne), inset 0 0 0 11px var(--wp--preset--color--gold); }
.abh-baslider__ph span { max-width: 11rem; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--wp--preset--color--teal-deep); }
.abh-baslider__label {
position: absolute;
top: 0.8rem;
z-index: 2;
padding: 0.3rem 0.6rem;
border-radius: 2px;
background: rgb(4 30 32 / 0.72);
color: var(--wp--preset--color--gold-light);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
pointer-events: none;
}
.abh-baslider__label--before { left: 0.8rem; }
.abh-baslider__label--after { right: 0.8rem; }
.abh-baslider__handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--pos);
z-index: 2;
width: 2px;
margin-left: -1px;
background: var(--wp--preset--color--gold);
pointer-events: none;
}
.abh-baslider__handle:not(.abh-baslider__handle--line)::after {
content: "\2039\00a0\203A";
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 2px solid var(--wp--preset--color--gold-light);
border-radius: 50%;
background: var(--wp--preset--color--gold);
box-shadow: 0 4px 16px rgb(4 30 32 / 0.4);
color: var(--wp--preset--color--teal-black);
font-size: 1.3rem;
line-height: 1;
transform: translate(-50%, -50%);
}
/* The native range input carries the keyboard and screen reader; dragging is handled on the frame. */
.abh-baslider__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
pointer-events: none;
}
.abh-baslider__caption { margin-top: 0.8rem; font-size: 0.8rem; line-height: 1.5; text-align: center; color: var(--abh-ivory-84); }
.abh-bathumb .abh-baslider__caption { color: var(--wp--preset--color--ink-2); }
.abh-baslider__nav { display: flex; align-items: center; justify-content: center; gap: 0.2rem; margin-top: 0.5rem; }
.abh-baslider__nav button {
display: grid;
place-items: center;
min-width: 32px;
height: 32px;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--gold-light);
font-size: 1.1rem;
cursor: pointer;
}
.abh-baslider__nav { gap: 0.6rem; margin-top: 0.8rem; }
.abh-baslider__nav :is(.abh-baslider__prev, .abh-baslider__next) { width: 44px; height: 44px; border: 1px solid rgb(194 164 106 / 0.75); border-radius: 50%; color: var(--wp--preset--color--gold-light); font-size: 1.15rem; transition: background-color 160ms ease, color 160ms ease; }
.abh-baslider__nav :is(.abh-baslider__prev, .abh-baslider__next):hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--teal-black); }
.abh-bathumb ~ .abh-baslider__nav, .abh-tile .abh-baslider__nav { color: var(--wp--preset--color--teal-deep); }
.abh-baslider[data-dir="next"] .abh-baslider__pair:not([hidden]) { animation: abh-ba-next 320ms ease both; }
.abh-baslider[data-dir="prev"] .abh-baslider__pair:not([hidden]) { animation: abh-ba-prev 320ms ease both; }
@keyframes abh-ba-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes abh-ba-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* As specific as the two rules above, so it wins over them. */
@media (prefers-reduced-motion: reduce) { .abh-baslider[data-dir] .abh-baslider__pair:not([hidden]) { animation: none; } }
.abh-baslider__dot::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--wp--preset--color--gold); border-radius: 50%; }
.abh-baslider__dot[aria-current="true"]::before { background: var(--wp--preset--color--gold); }
.abh-baslider__nav button:focus-visible { outline: 2px solid var(--wp--preset--color--gold-light); outline-offset: 1px; border-radius: 2px; }
@media (max-width: 900px) {
/* Phones and small tablets: the slider sits below the words, full width. */
:root.abh-hero-slider .abh-hero .wp-block-columns > .wp-block-column:last-child { top: auto; bottom: auto; height: auto; margin-top: 2rem !important; padding-bottom: 2rem; }
.abh-baslider { width: min(100%, 420px); }
.abh-baslider.is-wide { width: 100%; margin-inline: auto; }
}
/* Hero E (?hero=photo-slider, classes abh-hero-photo and abh-hero-slider): Hayley stays, moved in
towards the words, and the face pairs sit in a framed card in front of her lower half, to the
right, clear of her face. The card is still: it changes pair only when the visitor asks.
--abh-hero-cl is the left edge of the content (percentages here are of the hero's width). */
.abh-baslider--faces,
:root:not(.abh-hero-photo) .abh-hero .abh-baslider--faces { display: none; }
:root.abh-hero-photo .abh-hero .wp-block-image { display: flex; }
:root.abh-hero-photo .abh-hero .abh-baslider { display: none; }
:root.abh-hero-photo .abh-hero .wp-block-columns > .wp-block-column:last-child {
--abh-hero-cl: max(var(--abh-gutter), (100% - var(--wp--style--global--wide-size)) / 2);
/* From a little inside the words' column (min(620px, 50%), as above) to the content's right edge. */
top: 2.5rem;
bottom: 2.5rem;
left: calc(var(--abh-hero-cl) + min(620px, (100% - 2 * var(--abh-hero-cl)) / 2) - 3rem);
right: var(--abh-hero-cl);
width: auto;
align-items: flex-end;
container-type: size;
}
/* Her face is 64% of the way across the photo (which is 75% as wide as it is tall, and as tall as
the column). That point goes about a third of the way into the column, or further right where
the words are wide, so that her arm (a third of the photo's width to the left of her face, level
with the paragraph) stays clear of the words' column. */
:root.abh-hero-photo .abh-hero .wp-block-image {
position: absolute;
bottom: 0;
left: 32%;
left: max(32cqw, 3rem + 26cqh);
transform: translateX(-64%);
}
/* Just above the phone layout the two buttons nearly fill the words' column: a little more room
for her hand. */
@media (min-width: 901px) and (max-width: 1000px) {
:root.abh-hero-photo .abh-hero .wp-block-image { left: max(32cqw, 3rem + 29cqh); }
}
:root.abh-hero-photo .abh-hero .abh-baslider--faces {
display: grid;
position: absolute;
right: 0;
bottom: 10%;
z-index: 1;
box-sizing: border-box;
width: clamp(280px, 64%, 460px);
min-width: 0;
margin: 0;
padding: 0.65rem 0.65rem 0.5rem;
border: 1px solid rgb(194 164 106 / 0.6);
border-radius: var(--abh-radius);
background: rgb(4 30 32 / 0.76);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 30px 70px -24px rgb(0 0 0 / 0.6);
pointer-events: auto;
}
/* The pairs share one cell, so the one going can stay underneath while the next fades in. */
.abh-baslider--faces .abh-baslider__pair { grid-area: 1 / 1; z-index: 1; }
.abh-baslider--faces .abh-baslider__pair.is-leaving { z-index: 0; }
.abh-baslider--faces .abh-baslider__nav { grid-area: 2 / 1; gap: 0.35rem; margin-top: 0.35rem; }
.abh-baslider--faces .abh-baslider__dot { min-width: 26px; }
/* Narrow phones (test report, 16 Oct, D12): the arrows and seven dots needed 315px, wider than the
card at 320 to 360px, so the photos ran to the screen edge. Slimmer padding, gaps and arrows
bring the row to about 267px; the dots keep a 24px target (WCAG 2.5.8). */
@media (max-width: 400px) {
:root.abh-hero-photo .abh-hero .abh-baslider--faces { grid-template-columns: minmax(0, 1fr); padding: 0.5rem 0.5rem 0.4rem; }
.abh-baslider--faces .abh-baslider__nav { gap: 0.15rem; }
.abh-baslider--faces .abh-baslider__dot { min-width: 24px; }
.abh-baslider--faces .abh-baslider__nav :is(.abh-baslider__prev, .abh-baslider__next) { width: 40px; height: 40px; }
}
.abh-baslider--faces .abh-baslider__frame { border-color: rgb(194 164 106 / 0.45); border-radius: 3px; box-shadow: none; }
/* Two lines for every pair, so the card keeps its height: the treatment and area in the headline
italic, then the timeframe and "Results vary". */
.abh-baslider--faces .abh-baslider__caption { margin-top: 0.55rem; font-size: 0.74rem; line-height: 1.45; letter-spacing: 0.02em; }
.abh-baslider--faces .abh-baslider__what { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.08rem; font-style: italic; letter-spacing: 0; color: var(--wp--preset--color--base); }
.abh-baslider--faces .abh-baslider__sep { display: none; }
.abh-baslider--faces .abh-baslider__rest { display: block; }
.abh-baslider--faces .abh-baslider__rest::first-letter { text-transform: uppercase; }
.abh-baslider--faces[data-dir] .abh-baslider__pair.is-leaving { animation: none; }
@media (prefers-reduced-motion: no-preference) {
.abh-baslider--faces[data-dir] .abh-baslider__pair:not([hidden]):not(.is-leaving) { animation: abh-ba-fade 300ms ease both; }
}
@keyframes abh-ba-fade { from { opacity: 0; } }
@media (max-width: 900px) {
/* Phones and small tablets: the words, then Hayley, with the card over the lower part of her
photo, full width on a phone. */
:root.abh-hero-photo .abh-hero .wp-block-columns > .wp-block-column:last-child {
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
container-type: normal;
width: 100%;
height: auto;
flex-direction: column;
align-items: center;
margin-top: 1.5rem !important;
padding-bottom: 1.5rem;
}
/* Her face, 64% of the way across the photo, in the middle of the screen. */
:root.abh-hero-photo .abh-hero .wp-block-image { position: relative; left: auto; height: min(58vh, 440px); transform: none; }
:root.abh-hero-photo .abh-hero .wp-block-image img { transform: translateX(-14%); }
:root.abh-hero-photo .abh-hero .abh-baslider--faces { position: relative; right: auto; bottom: auto; width: min(100%, 440px); margin-top: calc(min(58vh, 440px) * -0.36); }
}
/* Phones: a row of buttons becomes full-width buttons of equal size. The small uppercase buttons
in cards, Meet Hayley and Kind words keep their own width, as in the reference. */
@media (max-width: 599px) {
.wp-block-post-content .wp-block-buttons:not(:is(.abh-package, .abh-meet, .abh-kind) *) > .wp-block-button:not(.is-style-text) { flex: 1 1 100%; }
.wp-block-post-content .wp-block-buttons:not(:is(.abh-package, .abh-meet, .abh-kind) *) > .wp-block-button:not(.is-style-text) > .wp-block-button__link { width: 100%; }
}
/* "★★★★★ 5.0 on Google from 100+ reviews" */
.abh-rating-line { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-rating-line a { color: inherit; text-decoration: none; }
.abh-rating-line a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); }
.abh-stars { color: var(--wp--preset--color--gold); letter-spacing: 0.08em; margin-right: 0.55rem; }
/* ---------- Trust strip ---------- */
/* Teal black, gold hairlines, gold-light capitals with small diamonds between them. */
.abh-trust { background: var(--wp--preset--color--teal-black); border-block: 1px solid rgb(194 164 106 / 0.28); }
.abh-trust__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 0;
margin: 0 auto;
padding: 1.15rem var(--abh-gutter);
max-width: var(--wp--style--global--wide-size);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--gold-light);
}
.abh-trust__list > * { display: flex; align-items: center; margin: 0 !important; padding: 0 1.6rem; color: var(--wp--preset--color--gold-light); }
.abh-trust__list > * + *::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 1.6rem 0 -1.6rem; background: var(--wp--preset--color--gold); transform: rotate(45deg); opacity: 0.9; }
.abh-trust__list a { color: inherit; }
@media (max-width: 559px) {
.abh-trust__list > * { padding: 0 0.9rem; font-size: 0.6875rem; letter-spacing: 0.14em; }
.abh-trust__list > * + *::before { display: none; }
}
/* ---------- Treatment tiles (patterns/treatment-cards.php) ---------- */
.abh-tiles { margin-top: 2.8rem !important; }
.abh-tiles .wp-block-post-template { gap: 1.4rem; }
.abh-tile {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-radius: var(--abh-radius);
overflow: hidden;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.abh-tile:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgb(11 65 66 / 0.35); }
.abh-tile > *, .abh-tile .wp-block-post-featured-image { margin: 0 !important; }
.abh-tile .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: 0; }
/* No photo yet: the treatment's line icon, in gold, on a soft ivory field (content-filters.php). */
.abh-tile .abh-still, .abh-package__still {
display: grid;
place-items: center;
max-width: none;
box-sizing: border-box;
min-height: 164px;
margin: 0;
padding: 1rem;
aspect-ratio: auto;
border-radius: 0;
background: radial-gradient(70% 70% at 50% 50%, #ffffff 0%, var(--wp--preset--color--base) 100%);
color: var(--wp--preset--color--gold-dark);
}
.abh-tile .abh-still svg { width: 76px; height: 76px; }
.abh-tile__body { display: flex; flex-direction: column; flex: 1; gap: 0.7rem; padding: 1.4rem 1.5rem 1.5rem; }
/* /options/ (noindex): the same cards with each style of picture, side by side for Hayley. */
.abh-options__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.4rem; margin-top: 2rem !important; }
.abh-options__grid > .abh-tile { margin: 0 !important; }
.abh-options__grid .abh-tile .wp-block-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.abh-tile .abh-bathumb .abh-baslider__frame { aspect-ratio: 3 / 2 !important; border: 0; border-bottom: 1px solid rgb(194 164 106 / 0.7); border-radius: 0; box-shadow: none; }
.abh-tile .abh-bathumb .abh-baslider__ph { padding-bottom: 12%; }
.abh-tile .abh-bathumb .abh-baslider__caption { margin: 0; padding: 0.7rem 1.5rem 0; font-size: 0.75rem; text-align: left; }
.abh-tile__body > * { margin: 0 !important; }
.abh-tile__title { font-size: 1.45rem; line-height: 1.15; }
.abh-tile__title a { color: var(--wp--preset--color--teal-deep); text-decoration: none; }
/* The title link covers the whole tile. */
.abh-tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.abh-tile__title a:focus-visible { outline: none; }
.abh-tile:focus-within { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
.abh-tile__text { color: var(--wp--preset--color--ink-2); font-size: 0.93rem; line-height: 1.55; }
.abh-tile__text .wp-block-post-excerpt__excerpt { margin: 0; }
.abh-tile__text .wp-block-post-excerpt__more-text { display: none; }
.abh-tile__price {
margin-top: auto !important;
padding-top: 0.9rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--abh-gold-text);
}
.abh-tile__price::after { content: "→"; font-size: 1rem; letter-spacing: 0; color: var(--wp--preset--color--gold-dark); transition: transform 160ms ease; }
.abh-tile:hover .abh-tile__price::after { transform: translateX(4px); }
@media (max-width: 900px) {
.abh-tiles .wp-block-post-template { grid-template-columns: 1fr !important; gap: 1rem; }
}
/* ---------- Treatment cards ---------- */
.abh-cards .wp-block-post-template { gap: 1.5rem; }
.abh-card {
background: var(--wp--preset--color--white);
border-radius: var(--abh-radius);
padding: clamp(1.25rem, 3vw, 2rem);
height: 100%;
display: grid;
grid-template-columns: 64px 1fr;
column-gap: 1.25rem;
align-content: start;
box-shadow: 0 1px 2px rgb(11 65 66 / 0.06);
}
.abh-card > * { grid-column: 2; margin: 0; }
.abh-card > .abh-card__icon { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.abh-card__icon img { width: 64px !important; height: 64px !important; object-fit: contain; }
.abh-card .wp-block-post-title { font-size: var(--wp--preset--font-size--xl); margin-bottom: 0.35rem; }
.abh-card .wp-block-post-title a { color: var(--wp--preset--color--teal-deep); text-decoration: none; }
.abh-card .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 0.2em; }
.abh-card .wp-block-post-excerpt { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--md); }
.abh-card .wp-block-post-excerpt__more-text { display: none; }
.abh-card .is-style-price { margin-top: 0.75rem; }
.abh-card .wp-block-buttons { margin-top: 1rem; gap: 0.75rem 1.25rem; align-items: center; }
@media (max-width: 599px) {
.abh-card { grid-template-columns: 48px 1fr; column-gap: 1rem; }
.abh-card__icon img { width: 48px !important; height: 48px !important; }
}
/* ---------- Packages (home) ---------- */
.abh-packages { margin-top: 2.8rem !important; gap: 1.4rem !important; }
.abh-packages > .wp-block-column { display: flex; }
.abh-package {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-radius: var(--abh-radius);
overflow: hidden;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.abh-package:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgb(11 65 66 / 0.35); }
.abh-package > * { margin: 0 !important; }
.abh-package > :not(.abh-package__still) { padding-inline: 1.5rem; }
/* Until Hayley's photos arrive, each card shows its treatments' icons in gold, drawn as masks over
the gold colour so the SVGs' currentColor is honoured. A photo placed in the box covers them. */
.abh-package__still { position: relative; margin-bottom: 1.4rem !important; }
.abh-package__still::before { content: ""; position: absolute; inset: 0; background: currentColor; }
.abh-package__still:has(img)::before { display: none; }
.abh-package__still--polynucleotides::before {
-webkit-mask: url(assets/icons/polynucleotides.svg) center / 76px 76px no-repeat;
mask: url(assets/icons/polynucleotides.svg) center / 76px 76px no-repeat;
}
.abh-package__still--microneedling::before {
-webkit-mask: url(assets/icons/microneedling.svg) center / 76px 76px no-repeat;
mask: url(assets/icons/microneedling.svg) center / 76px 76px no-repeat;
}
.abh-package__still--transformation::before {
-webkit-mask:
url(assets/icons/anti-wrinkle.svg) calc(50% - 63px) center / 56px 56px no-repeat,
url(assets/icons/filler.svg) center / 56px 56px no-repeat,
url(assets/icons/skin-boosters.svg) calc(50% + 63px) center / 56px 56px no-repeat;
mask:
url(assets/icons/anti-wrinkle.svg) calc(50% - 63px) center / 56px 56px no-repeat,
url(assets/icons/filler.svg) center / 56px 56px no-repeat,
url(assets/icons/skin-boosters.svg) calc(50% + 63px) center / 56px 56px no-repeat;
}
.abh-package__still:has(img) { aspect-ratio: 3 / 2; min-height: 0; padding: 0; }
.abh-package__still figure { position: absolute; inset: 0; margin: 0; max-width: none !important; }
.abh-package__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abh-package h3 { font-size: 1.45rem; line-height: 1.15; color: var(--wp--preset--color--teal-deep); }
.abh-package h3 + p { margin-top: 0.7rem !important; color: var(--wp--preset--color--ink-2); font-size: 0.93rem; line-height: 1.55; }
.abh-package .is-style-price { margin-top: auto !important; padding-top: 1.1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--abh-gold-text); }
.abh-package .wp-block-buttons { margin-top: 0.9rem !important; padding-bottom: 1.5rem; }
:is(.abh-package, .abh-meet, .abh-kind, .abh-footer) .wp-block-button:not(.is-style-text) > .wp-block-button__link { min-height: 44px; padding: 0.8rem 1.35rem; font-size: 0.78rem; }
/* ---------- Packages page (query) ---------- */
.abh-package-list .wp-block-post-template { gap: 1.5rem; }
.abh-package-card {
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-radius: var(--abh-radius);
padding: clamp(1.25rem, 3vw, 2rem);
height: 100%;
display: flex;
flex-direction: column;
gap: 0.6rem;
scroll-margin-top: 110px;
}
.abh-package-card:target { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; }
.abh-package-card .wp-block-post-title { font-size: var(--wp--preset--font-size--xl); margin: 0; }
.abh-package-card > * { margin: 0; }
.abh-package-card .abh-package-card__price { font-family: var(--wp--preset--font-family--serif); font-style: normal; font-variant-numeric: lining-nums; font-size: var(--wp--preset--font-size--xxl); color: var(--wp--preset--color--teal-deep); line-height: 1; }
.abh-package-card .abh-package-card__was { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--sm); }
.abh-package-card .abh-package-card__save { display: inline-block; width: fit-content; background: var(--wp--preset--color--champagne); color: var(--abh-gold-text); border-radius: var(--abh-pill); padding: 0.15rem 0.7rem; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.abh-package-card .abh-package-card__badge { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--teal); font-weight: 500; }
.abh-package-card .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; }
.abh-ticks, .is-style-ticks { list-style: none; padding-left: 0; }
.abh-ticks li, .is-style-ticks li { position: relative; padding-left: 1.6rem; margin-block: 0.35rem; }
.abh-ticks li::before, .is-style-ticks li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.45em;
width: 0.7rem;
height: 0.4rem;
border-left: 1.5px solid var(--wp--preset--color--teal);
border-bottom: 1.5px solid var(--wp--preset--color--teal);
transform: rotate(-45deg);
}
/* ---------- Meet Hayley ---------- */
.abh-meet .wp-block-columns { align-items: center; gap: clamp(2rem, 6vw, 5.5rem); }
.abh-meet .wp-block-column > * { margin-block: 0; }
/* The photo with a gold hairline frame set 14px behind it. */
.abh-meet .wp-block-image { position: relative; max-width: 440px; }
.abh-meet .wp-block-image::after { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border: 1px solid var(--wp--preset--color--gold); border-radius: 4px; pointer-events: none; }
.abh-meet .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 4px; width: 100%; }
.abh-meet h2 { margin-top: 1rem !important; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.abh-meet p:not(.is-style-eyebrow) { margin-top: 1.1rem !important; max-width: 36em; font-size: 1.05rem; color: var(--wp--preset--color--ink-2); }
.abh-meet .wp-block-buttons { margin-top: 1.8rem !important; gap: 0.8rem; }
/* A photo held to its own size (content-filters.php, cap_image) sits in the middle of its column. */
.wp-block-image.abh-capped { margin-inline: auto; }
/* Before-and-after pairs: never stretched far past the size the photos were taken at. */
.abh-ba__pair { max-width: 28.5rem; }
.abh-ba--slider .abh-ba__pair { margin-inline: auto; }
/* ---------- Treatment page ---------- */
/* The treatment header (and the 404 page's) is a night band like the home hero, a little shorter. */
.abh-page-head { padding-block: calc(var(--abh-header-h) + clamp(1.5rem, 4vw, 3rem)) clamp(2.5rem, 5vw, 4rem); }
.abh-page-head .wp-block-heading, .abh-page-head h1 { margin-block: 1rem 0.9rem; }
.abh-page-head h1 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.2rem); font-style: italic; font-weight: 300; letter-spacing: -0.01em; line-height: 1.06; }
.abh-treatment-hero .wp-block-post-excerpt { font-size: clamp(1.02rem, 1.3vw, 1.22rem); font-weight: 300; max-width: 34em; }
.abh-treatment-hero .wp-block-post-excerpt__more-text { display: none; }
.abh-treatment-hero .is-style-price { font-size: 0.78rem; letter-spacing: 0.18em; }
.abh-treatment-hero .wp-block-buttons { gap: 0.9rem; margin-top: 1.8rem; }
/* A treatment's picture sits in the same arch as the icon it replaces, with the gold inner line. */
.abh-treatment-hero .wp-block-post-featured-image { width: 100%; max-width: 21rem; margin: 0 0 0 auto; }
.abh-treatment-hero .wp-block-post-featured-image img {
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 11rem 11rem var(--abh-radius) var(--abh-radius);
outline: 1px solid rgb(194 164 106 / 0.7);
outline-offset: -14px;
box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.6);
}
@media (max-width: 781px) {
.abh-treatment-hero .wp-block-post-featured-image { display: none; }
}
/* No photo yet: the treatment's icon on a plain panel (abh-core, content-filters.php). It is
decoration, so phones, where the columns stack, skip it. */
.abh-still {
margin: 0 0 0 auto;
max-width: 24rem;
aspect-ratio: 1;
display: grid;
place-items: center;
background: var(--wp--preset--color--white);
border-radius: var(--abh-radius);
color: var(--wp--preset--color--gold-dark);
}
.abh-still svg { width: 36%; height: auto; }
/* On a treatment page: an arch with a gold inner line, glowing faintly on the night band. */
.abh-treatment-hero .abh-still {
width: 100%;
max-width: 21rem;
aspect-ratio: 4 / 5;
background: radial-gradient(70% 60% at 50% 45%, rgb(222 200 154 / 0.16) 0%, rgb(247 243 236 / 0.03) 100%);
border-radius: 11rem 11rem var(--abh-radius) var(--abh-radius);
outline: 1px solid rgb(194 164 106 / 0.7);
outline-offset: -14px;
box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.6);
color: var(--wp--preset--color--gold-light);
}
.abh-treatment-hero .abh-still svg { width: 34%; }
@media (max-width: 781px) {
.abh-still { display: none; }
}
/* The summary strip under the treatment header: styled like the trust strip. */
.abh-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
gap: 0;
background: var(--wp--preset--color--teal-black);
border-block: 1px solid rgb(194 164 106 / 0.28);
margin-block: 0 !important;
}
.abh-facts { padding-inline: max(var(--abh-gutter), calc((100% - var(--wp--style--global--wide-size)) / 2)); }
.abh-facts > p { margin: 0; padding: 1.1rem 1.25rem; border-right: 1px solid rgb(194 164 106 / 0.22); color: var(--wp--preset--color--base); }
.abh-facts > p:first-of-type { padding-left: 0; }
.abh-facts > p:last-child, .abh-facts > p:not(:has(~ p:not(:empty))) { border-right: 0; }
@media (max-width: 599px) {
.abh-facts { grid-template-columns: 1fr 1fr; }
.abh-facts > p { padding: 0.9rem 0.75rem 0.9rem 0; border-right: 0; border-bottom: 1px solid rgb(194 164 106 / 0.22); }
.abh-facts > p:nth-last-child(-n+2) { border-bottom: 0; }
/* Five facts (with Back to work): the last one, the course, takes the full row. */
.abh-facts > p:nth-child(5):not(:empty) { grid-column: 1 / -1; }
.abh-facts:has(> p:nth-child(5):not(:empty)) > p:nth-child(4) { border-bottom: 1px solid rgb(194 164 106 / 0.22); }
/* Four facts (no course): the third and fourth make the last row. */
.abh-facts:has(> p:nth-child(5):empty) > p:nth-child(3) { border-bottom: 0; }
}
.abh-fact__label { display: block; margin-bottom: 0.2rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); }
.abh-fact__value { color: var(--wp--preset--color--base); font-weight: 400; }
.wp-block-post-content > h2 { margin-top: var(--wp--preset--spacing--60); }
.wp-block-post-content > h3 { margin-top: var(--wp--preset--spacing--40); }
.wp-block-table table { width: 100%; font-size: var(--wp--preset--font-size--sm); }
.wp-block-table th { text-align: left; }
.wp-block-table td { vertical-align: top; }
/* Columns size to their content, so long words are never forced to split. */
.wp-block-table .has-fixed-layout { table-layout: auto; }
.wp-block-table { overflow-x: auto; }
/* FAQs: Details blocks and the treatment FAQ block look the same. */
.wp-block-details, .abh-faq { border-bottom: var(--abh-rule); padding-block: 0.25rem; }
.wp-block-details + .wp-block-details { margin-block-start: 0 !important; }
.wp-block-details summary, .abh-faq summary, .abh-toc--collapsible summary {
cursor: pointer;
list-style: none;
padding: 0.9rem 2.25rem 0.9rem 0;
position: relative;
font-weight: 500;
color: var(--wp--preset--color--teal-deep);
}
.wp-block-details summary::-webkit-details-marker, .abh-faq summary::-webkit-details-marker, .abh-toc--collapsible summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after, .abh-faq summary::after, .abh-toc--collapsible summary::after {
content: "";
position: absolute;
right: 0.5rem;
top: 1.25rem;
width: 0.55rem;
height: 0.55rem;
border-right: 1.5px solid var(--wp--preset--color--gold-dark);
border-bottom: 1.5px solid var(--wp--preset--color--gold-dark);
transform: rotate(45deg);
transition: transform var(--abh-ease);
}
.wp-block-details[open] summary::after, .abh-faq[open] summary::after, .abh-toc--collapsible[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.wp-block-details > :not(summary), .abh-faq__answer { color: var(--wp--preset--color--ink-2); padding-bottom: 0.75rem; margin-top: 0; }
.abh-related__list { list-style: none; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.abh-related__item { position: relative; background: var(--wp--preset--color--white); border: var(--abh-rule); border-radius: var(--abh-radius); padding: 1.1rem 1.25rem; transition: box-shadow 200ms ease; }
.abh-related__item:hover { box-shadow: 0 16px 30px -24px rgb(11 65 66 / 0.5); }
.abh-related__item a::after { content: ""; position: absolute; inset: 0; }
.abh-related__kind { display: block; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); margin-bottom: 0.25rem; }
.abh-related__item a { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--lg); line-height: 1.3; color: var(--wp--preset--color--teal-deep); text-decoration: none; }
.abh-related__item a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); }
.abh-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.abh-crumbs li { white-space: nowrap; }
.abh-crumbs li:last-child { white-space: normal; } /* a long page name wraps on the narrowest phones */
.abh-crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--wp--preset--color--gold); }
.abh-crumbs a { color: inherit; text-decoration: none; }
.abh-crumbs a:hover { text-decoration: underline; }
/* Opening hours: each group of days on its own line, its hours under it. */
.abh-footer .abh-hours__days, .abh-fact-line--clock .abh-hours__days { display: block; margin-top: 0.6rem; font-weight: 500; }
.abh-footer .abh-hours__days { font-size: 0.93rem; font-weight: 400; color: rgb(247 243 236 / 0.85); }
.abh-footer .abh-hours__days:first-child, .abh-fact-line--clock .abh-hours__days:first-child { margin-top: 0; }
.abh-footer p:has(> .abh-hours__days) br, .abh-fact-line--clock br { display: none; }
/* ---------- Review cards ---------- */
/* Reviews on treatment pages (blocks/reviews): heading and rating, then the cards. */
.abh-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.abh-reviews__head h2 { margin: 0; }
.abh-reviews__head .abh-rating-line { margin: 0; }
.abh-reviews__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; margin-top: var(--wp--preset--spacing--40); }
.abh-quotes { gap: 1.5rem !important; margin-top: var(--wp--preset--spacing--50) !important; }
.abh-quotes .wp-block-column { display: flex; }
.abh-quotes .wp-block-quote, .abh-review {
position: relative;
flex: 1;
margin: 0;
padding: 2.25rem 1.75rem 1.75rem;
background: var(--wp--preset--color--white);
border: var(--abh-rule);
border-radius: var(--abh-radius);
font-family: var(--wp--preset--font-family--serif);
font-style: normal;
font-size: 1.1875rem;
line-height: 1.5;
color: var(--wp--preset--color--teal-deep);
}
.abh-quotes .wp-block-quote::before, .abh-review::before {
content: "★★★★★";
display: block;
margin-bottom: 1rem;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.95rem;
letter-spacing: 0.18em;
color: var(--wp--preset--color--gold);
}
.abh-quotes .wp-block-quote p, .abh-review p { margin: 0; }
.abh-quotes .wp-block-quote cite, .abh-review cite {
display: block;
margin-top: 1.25rem;
font-family: var(--wp--preset--font-family--sans);
font-style: normal;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--ink-2);
}
/* Kind words (home) and the reviews on treatment pages sit on the night band: translucent ivory
cards with a gold hairline. */
.abh-kind .is-style-device em { color: var(--wp--preset--color--gold-light); }
.abh-kind .abh-quotes { margin-top: 2.8rem !important; gap: 1.4rem !important; }
:is(.abh-kind, .abh-reviews-band) :is(.abh-quotes .wp-block-quote, .abh-review) {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.8rem 1.7rem;
background: rgb(247 243 236 / 0.045);
border: 1px solid rgb(194 164 106 / 0.35);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
font-weight: 300;
font-size: 1.12rem;
color: var(--wp--preset--color--base);
}
:is(.abh-kind, .abh-reviews-band) :is(.abh-quotes .wp-block-quote, .abh-review)::before { margin: 0; font-size: 0.9rem; letter-spacing: 0.08em; }
:is(.abh-kind, .abh-reviews-band) :is(.abh-quotes .wp-block-quote, .abh-review) p { color: var(--wp--preset--color--base); }
:is(.abh-kind, .abh-reviews-band) :is(.abh-quotes .wp-block-quote, .abh-review) cite { margin-top: auto; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--wp--preset--color--gold-light); }
.abh-kind > .wp-block-buttons { margin-top: 2.2rem !important; }
:is(.abh-kind, .abh-reviews-band) .abh-rating-line, :is(.abh-kind, .abh-reviews-band) .abh-rating-line a { color: rgb(247 243 236 / 0.86); }
/* The band's heading reads like Kind words on the home page: italic, in gold-light. */
.abh-reviews__head h2 { font-style: italic; font-weight: 400; }
.abh-reviews-band .abh-reviews__head h2 { color: var(--wp--preset--color--gold-light); }
.abh-kind :is(.abh-ba__quote, .abh-ba__quote p) { color: var(--wp--preset--color--base); }
.abh-kind :is(.abh-ba__quote cite, .abh-ba__caption) { color: rgb(247 243 236 / 0.7); }
.abh-kind .abh-ba__kicker { color: var(--wp--preset--color--gold-light); }
.abh-kind .abh-ba__title { color: var(--wp--preset--color--base); }
.abh-kind .abh-ba__line { color: rgb(247 243 236 / 0.8); }
.abh-kind :is(.abh-ba__prev, .abh-ba__next) { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-light); }
.abh-kind .abh-ba__dot::before { background: rgb(247 243 236 / 0.3); }
.abh-kind .abh-ba__img figcaption { color: rgb(247 243 236 / 0.86); }
.abh-kind .abh-ba__img--after figcaption { color: var(--wp--preset--color--gold-light); }
.abh-kind .abh-ba__dot[aria-current="true"]::before { background: var(--wp--preset--color--gold); }
/* ---------- Results slider and gallery ---------- */
.abh-ba__slide { display: grid; gap: clamp(1.25rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: center; }
.abh-ba__slide[hidden], .abh-chooser__step[hidden], .abh-chooser__result[hidden] { display: none; }
.abh-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.abh-ba__img { position: relative; margin: 0; }
.abh-ba__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 2px; }
/* The label sits in a slim band above each photo, never on it. */
.abh-ba__img figcaption { display: flex; align-items: center; gap: 0.55rem; padding: 0 0 0.45rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep); }
.abh-ba__img figcaption::before { content: ""; flex: 0 0 18px; height: 1px; background: var(--wp--preset--color--gold); }
/* Shown whole, as taken. */
.abh-ba__pair--natural { align-items: start; }
.abh-ba__pair--natural .abh-ba__img img { height: auto; object-fit: fill; }
.abh-ba__pair--stacked { grid-template-columns: 1fr; gap: 0.9rem; }
.abh-ba__stars { color: var(--wp--preset--color--gold); letter-spacing: 0.15em; font-size: var(--wp--preset--font-size--lg); margin: 0; }
.abh-ba__quote { margin: 0.5rem 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: var(--wp--preset--font-size--lg); line-height: 1.45; color: var(--wp--preset--color--teal-deep); border: 0; padding: 0; }
.abh-ba__quote cite { display: block; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.abh-ba__caption { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-ba__story > * { margin: 0; }
.abh-ba__kicker { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--abh-gold-text); }
.abh-ba__title { margin-top: 0.6rem !important; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.08; color: var(--wp--preset--color--teal-deep); }
.abh-ba__line { margin-top: 0.9rem !important; max-width: 26rem; color: var(--wp--preset--color--ink-2); }
.abh-ba__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 1.1rem !important; }
.abh-ba__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.04em; }
.abh-ba__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.abh-ba__prev, .abh-ba__next { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--teal); background: none; color: var(--wp--preset--color--teal); cursor: pointer; font-size: 1.1rem; }
.abh-ba__dots { display: flex; gap: 0; }
.abh-ba__dot { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.abh-ba__dot::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--wp--preset--color--rule); }
.abh-ba__dot[aria-current="true"]::before { background: var(--wp--preset--color--teal); }
.abh-ba__grid { list-style: none; padding: 0; display: grid; gap: 1.75rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.abh-ba__grid .abh-ba__card { display: flex; flex-direction: column; padding: 1rem 1rem 1.1rem; background: var(--wp--preset--color--white); border: var(--abh-rule); border-radius: var(--abh-radius); box-shadow: 0 18px 40px -30px rgb(4 30 32 / 0.35); }
.abh-ba__grid .abh-ba__caption { margin: auto 0.25rem 0; padding-top: 0.85rem; }
.abh-ba__grid.is-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.abh-results-page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.abh-results-page__intro > :first-child { margin-top: 0; }
.abh-results-page .abh-ba { margin-top: var(--wp--preset--spacing--50) !important; }
.abh-ba__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.abh-ba__filter :is(a, button) { min-height: 36px; padding: 0.35rem 1rem; border: 1px solid var(--wp--preset--color--teal); border-radius: var(--abh-pill); background: none; color: var(--wp--preset--color--teal-deep); text-decoration: none; font: inherit; font-size: var(--wp--preset--font-size--sm); cursor: pointer; }
.abh-ba__filter :is(a[aria-current], button[aria-pressed="true"]) { background: var(--wp--preset--color--teal); color: #fff; }
.abh-ba__filter button:focus-visible { outline: 2px solid var(--wp--preset--color--teal-deep); outline-offset: 2px; }
.abh-ba__card[hidden], .abh-ba__none[hidden] { display: none !important; }
.abh-ba__count { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-ba__count:empty { display: none; }
.abh-ba__none { margin: 0 0 1.5rem; padding: 1.4rem 1.5rem; border: 1px dashed var(--wp--preset--color--gold); border-radius: var(--abh-radius); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink-2); }
.abh-ba__note { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-ba__more-wrap { display: flex; justify-content: center; margin: 2rem 0 1.25rem; }
.abh-ba__more { min-height: 48px; padding: 0.8rem 1.8rem; border: 1.5px solid var(--wp--preset--color--teal); border-radius: var(--abh-pill); background: none; color: var(--wp--preset--color--teal-deep); font: inherit; font-size: var(--wp--preset--font-size--sm); letter-spacing: 0.06em; cursor: pointer; }
.abh-ba__more:hover { background: var(--wp--preset--color--teal); color: #fff; }
.abh-ba__more:focus-visible { outline: 2px solid var(--wp--preset--color--teal-deep); outline-offset: 3px; }
.abh-ba__more[hidden] { display: none; }
/* Treatment pages: that treatment's results, between the page and the reviews. */
.abh-results-band { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.abh-results-band > h2 { margin-top: 0; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 781px) { .abh-ba__slide { grid-template-columns: 1fr; } }
/* Six dots and two arrows do not fit the narrowest phones; the arrows are enough there. */
@media (max-width: 359px) { .abh-ba__dots { display: none; } }
/* ---------- Chooser ---------- */
#chooser > h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
#chooser > p { margin-top: 1rem !important; max-width: 36em; font-size: 1.05rem; color: var(--wp--preset--color--ink-2); }
.abh-chooser { max-width: 46rem; margin-inline: auto; margin-top: 2.4rem !important; text-align: center; }
.abh-chooser__step { border: 0; margin: 0; padding: 0; }
.abh-chooser__q { text-wrap: balance; font-family: var(--wp--preset--font-family--serif); font-style: normal; font-size: 1.6rem; color: var(--wp--preset--color--teal-deep); margin: 0 auto 1.4rem; padding: 0; }
.abh-chooser__count { display: block; font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--abh-gold-text); margin-bottom: 0.6rem; }
.abh-chooser__answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.abh-chooser__result { background: var(--wp--preset--color--white); border-radius: var(--abh-radius); padding: clamp(1.25rem, 3vw, 2rem); }
.abh-chooser__result:focus { outline: none; }
.abh-chooser__lead { margin: 0; font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--ink-2); }
.abh-chooser__title { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: var(--wp--preset--font-size--xxl); margin: 0.25rem 0; }
.abh-chooser__title a { color: var(--wp--preset--color--teal-deep); }
.abh-chooser__result .wp-block-buttons { justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.abh-chooser__again { background: none; border: 0; text-decoration: underline; color: var(--wp--preset--color--teal); cursor: pointer; font: inherit; }
/* ---------- Book page ---------- */
.abh-book__frame { min-height: 640px; position: relative; }
.abh-book.is-ready .abh-book__frame { min-height: 0; }
.abh-book__loading { padding: 2rem 0; color: var(--wp--preset--color--ink-2); }
.abh-book__showing { background: var(--wp--preset--color--teal-tint); padding: 0.75rem 1rem; border-radius: var(--abh-radius); font-size: var(--wp--preset--font-size--sm); }
.abh-book__fallback { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-book.is-failed .abh-book__fallback { font-size: var(--wp--preset--font-size--md); color: var(--wp--preset--color--ink); background: var(--wp--preset--color--teal-tint); padding: 1rem; border-radius: var(--abh-radius); }
/* ---------- Forms ---------- */
.abh-form { max-width: 36rem; }
.abh-form__field { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.abh-form label { font-weight: 500; font-size: var(--wp--preset--font-size--sm); }
.abh-form input:not([type="hidden"]), .abh-form textarea {
box-sizing: border-box;
font: inherit;
padding: 0.7rem 0.85rem;
border: 1px solid #9aa3a8;
border-radius: var(--abh-radius);
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--ink);
width: 100%;
}
.abh-form__optional { font-weight: 400; color: var(--wp--preset--color--ink-2); }
.abh-form__privacy { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--ink-2); }
.abh-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.abh-form__ok, .abh-form__error { padding: 0.75rem 1rem; border-radius: var(--abh-radius); }
.abh-form__ok { background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal-deep); }
.abh-form__error { background: #fbeaea; color: #7a1d1d; }
.abh-form button { border: 0; cursor: pointer; }
/* ---------- Journal ---------- */
.abh-journal-list .wp-block-post-template { gap: 2rem 1.5rem; }
.abh-journal-list .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--abh-radius); }
.abh-journal-list .wp-block-post-title a { color: var(--wp--preset--color--teal-deep); text-decoration: none; }
/* ---------- Footer ---------- */
.abh-footer {
background: var(--wp--preset--color--teal-black);
color: rgb(247 243 236 / 0.78);
font-size: 0.93rem;
border-top: 1px solid rgb(194 164 106 / 0.25);
padding-top: 4.5rem !important;
padding-bottom: 2rem !important;
}
/* On phones the fixed Book / WhatsApp bar covers the bottom of the screen: the footer's last line
(the legal links) scrolls clear of it. The bar is 46px buttons, 0.6rem padding each side, a 1px
rule and the iPhone home-bar inset. */
@media (max-width: 599px) {
.abh-footer { padding-bottom: calc(2rem + 46px + 1.2rem + 1px + env(safe-area-inset-bottom)) !important; }
}
.abh-footer :where(h2, h3, p, li, a:not(.wp-element-button)) { color: rgb(247 243 236 / 0.78); }
.abh-footer h2 { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); }
.abh-footer .wp-block-column > p { line-height: 1.6; }
.abh-footer .wp-block-column > p + p { margin-top: 1rem; }
.abh-footer .wp-block-column:first-child > p:nth-of-type(3) { font-size: 0.9rem; color: rgb(247 243 236 / 0.6); }
.abh-footer .abh-wordmark { margin-bottom: 1.3rem; }
.abh-footer ul { list-style: none; padding: 0; margin: 0; }
.abh-footer li { margin-block: 0; }
.abh-footer li a, .abh-footer .is-style-text .wp-block-button__link { display: inline-block; padding-block: 0.3rem; }
@media (max-width: 781px) {
.abh-footer li a, .abh-footer .is-style-text .wp-block-button__link { padding-block: 0.65rem; min-height: 44px; }
}
@media (max-width: 1099px) {
.abh-footer .wp-block-columns { flex-wrap: wrap !important; row-gap: 2.5rem; }
.abh-footer .wp-block-columns > .wp-block-column { flex: 0 0 calc(50% - 1.5rem) !important; }
}
@media (max-width: 559px) {
.abh-footer .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}
.abh-footer a { text-decoration: none; }
.abh-footer a:hover { color: var(--wp--preset--color--white); text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); }
/* Book online: a gold outline here. */
.abh-footer .wp-block-buttons { margin-top: 1.4rem !important; }
.abh-footer .wp-block-button:not(.is-style-text) > .wp-block-button__link { background: transparent; border: 1px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold-light); }
.abh-footer .wp-block-button:not(.is-style-text) > .wp-block-button__link:hover { background: rgb(194 164 106 / 0.14); color: var(--wp--preset--color--white); }
.abh-footer .wp-block-button.is-style-text .wp-block-button__link { color: rgb(247 243 236 / 0.78); font-size: 0.93rem; text-decoration: none; justify-content: flex-start; text-align: left; word-break: normal; overflow-wrap: normal; white-space: nowrap; }
.abh-footer .wp-block-button.is-style-text .wp-block-button__link:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
/* Opening hours: the days, and the hours under them, smaller. */
.abh-footer p:has(> .abh-hours__days) { font-size: 0.85rem; color: rgb(247 243 236 / 0.55); }
.abh-footer__base { margin-top: 3.5rem !important; border-top: 1px solid rgb(247 243 236 / 0.12); padding-top: 1.4rem; font-size: 0.78rem; }
.abh-footer__base p { color: rgb(247 243 236 / 0.55); }
/* The legal links, separated by gold middots (the dots are the paragraph's own text). */
.abh-footer__base p:last-child { color: var(--wp--preset--color--gold); }
.abh-footer__base p:last-child a { color: rgb(247 243 236 / 0.55); }
/* ---------- Consent banner ---------- */
.abh-consent {
position: fixed;
z-index: 60;
left: var(--abh-gutter);
right: var(--abh-gutter);
bottom: var(--abh-gutter);
max-width: 34rem;
margin-inline: auto;
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--ink);
border: 1px solid var(--wp--preset--color--rule);
border-radius: var(--abh-radius);
box-shadow: 0 8px 30px rgb(11 65 66 / 0.18);
padding: 1.25rem;
font-size: var(--wp--preset--font-size--sm);
}
.abh-consent[hidden], .abh-consent-set .abh-consent { display: none; }
.abh-consent__text { margin: 0 0 1rem; }
.abh-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
/* Pill buttons like the rest of the site. Both choices look the same: saying no is as easy as
saying yes (ICO guidance on cookie consent). */
.abh-consent__btn {
min-height: 44px;
padding: 0.6rem 1.35rem;
border-radius: var(--abh-pill);
border: 1px solid var(--wp--preset--color--teal-deep);
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--teal-deep);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
.abh-consent__btn:hover { background: var(--wp--preset--color--teal-deep); color: var(--wp--preset--color--white); }
/* ---------- Review markers and preview banner (staging only) ---------- */
mark.abh-confirm {
background: #fff1b8;
color: #5c4700;
font-family: var(--wp--preset--font-family--sans);
font-style: normal;
font-size: 0.72em;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.05em 0.4em;
border-radius: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
mark.abh-confirm--launch { background: #ffd966; color: #3d2f00; box-shadow: inset 0 0 0 1px #b38f00; }
.abh-preview-banner { background: #fff1b8; color: #3d2f00; text-align: center; padding: 0.5rem var(--abh-gutter); font-size: var(--wp--preset--font-size--sm); }
.abh-preview-banner a { color: inherit; }
/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* ---------- Social icons (header menu and footer, core Social Icons block) ---------- */
/* Ivory glyphs, gold on hover: the block's own brand colours (a pink Instagram, a blue Facebook)
do not belong on the dark bands. Each icon is a 44px target. */
.abh-social.wp-block-social-links { gap: 0.15rem; margin: 0; padding: 0; }
.abh-social.wp-block-social-links.is-style-logos-only .wp-social-link { color: rgb(247 243 236 / 0.88); background: none; }
.abh-social.wp-block-social-links .wp-social-link a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: inherit; }
.abh-social.wp-block-social-links .wp-social-link svg { width: 18px; height: 18px; }
.abh-social.wp-block-social-links.is-style-logos-only .wp-social-link:hover,
.abh-social.wp-block-social-links.is-style-logos-only .wp-social-link:focus-within { color: var(--wp--preset--color--gold-light); transform: none; }
.abh-social .wp-social-link a:focus-visible { outline: 2px solid var(--wp--preset--color--gold-light); outline-offset: -4px; border-radius: 999px; }
/* In the header, after the menu, set off by a thin gold rule. Wide screens only: between phone and
wide-screen sizes the header has no room, and on phones they sit at the foot of the menu. */
.abh-social--header { margin-left: 0.2rem; padding-left: 0.9rem; border-left: 1px solid rgb(194 164 106 / 0.35); }
@media (min-width: 782px) and (max-width: 1279px) {
.abh-nav .wp-block-navigation-item:has(> .abh-social--header), .abh-social--header { display: none; }
}
/* Wide screens: seven links, three icons, the logo and Book share one line, with room to spare even
where the fonts draw wider (macOS). The links sit a little closer, the header icons are 36px
targets (44px in the phone menu), and the row never breaks onto two lines. */
@media (min-width: 1024px) {
.abh-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.abh-nav .wp-block-navigation-item__content { white-space: nowrap; }
}
@media (min-width: 1180px) {
.abh-nav .wp-block-navigation__container { gap: 1.5rem; }
.abh-social--header.wp-block-social-links .wp-social-link a { width: 36px; height: 36px; }
.abh-social--header { padding-left: 0.6rem; }
}
.wp-block-navigation__responsive-container.is-menu-open .abh-social--header { border-left: 0; padding-left: 0; margin: 1.5rem 0 0 -13px; }
.wp-block-navigation__responsive-container.is-menu-open .abh-social--header .wp-social-link svg { width: 22px; height: 22px; }
.abh-social--footer { margin: 0.8rem 0 0 -13px !important; }
/* ---------- Map (contact page, abh/map) ---------- */
/* Google's map, edge to edge under the page header. On a page with a map the header's night band
settles to teal black at its foot, and the map starts under a fade from the same teal black, so
the two meet in one colour at every width. */
main:has(.abh-map) .abh-page-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
z-index: -1;
height: min(70%, 16rem);
pointer-events: none;
background: linear-gradient(to bottom, rgb(4 30 32 / 0) 0%, rgb(4 30 32 / 0.55) 45%, var(--wp--preset--color--teal-black) 100%);
}
.abh-map {
position: relative;
margin-block: 0 !important;
background: var(--wp--preset--color--teal-black);
}
/* Google centres its map on the pin and puts its own card in the top-left corner. The map is drawn
--abh-map-crop taller than the band and moved up by that much, which cuts off Google's card (or,
under 400px wide, its "Open in Maps" link) and puts the pin's tip at (H - crop) / 2 from the top.
The card below sits just above the pin: the pin is about 34px tall. */
.abh-map__frame {
--abh-map-h: clamp(620px, 40vw, 680px);
--abh-map-crop: 150px;
position: relative;
height: var(--abh-map-h);
overflow: hidden;
}
@media (max-width: 399px) {
.abh-map__frame { --abh-map-h: 540px; --abh-map-crop: 56px; }
}
.abh-map__frame::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: 2;
height: clamp(1.75rem, 3.5vw, 3rem);
pointer-events: none;
background: linear-gradient(to bottom, var(--wp--preset--color--teal-black) 0%, rgb(4 30 32 / 0.45) 30%, rgb(4 30 32 / 0.12) 65%, rgb(4 30 32 / 0) 100%);
}
.abh-map__frame iframe {
position: absolute;
left: 0;
top: calc(-1 * var(--abh-map-crop));
width: 100%;
height: calc(100% + var(--abh-map-crop));
border: 0;
filter: saturate(0.75) sepia(0.06);
}
.abh-map__card {
position: absolute;
z-index: 3;
left: 50%;
bottom: calc((var(--abh-map-h) + var(--abh-map-crop)) / 2 + 50px);
transform: translateX(-50%);
width: min(21.5rem, calc(100% - 2rem));
padding: 1rem 1.15rem 1.05rem;
border-radius: 8px;
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--ink);
box-shadow: 0 18px 40px -18px rgb(4 30 32 / 0.55), 0 2px 6px rgb(4 30 32 / 0.12);
text-align: center;
transition: opacity 0.3s ease, visibility 0.3s;
}
/* The pointer down to the pin. */
.abh-map__card::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 18px;
height: 9px;
transform: translateX(-50%);
background: var(--wp--preset--color--base);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.abh-map.is-exploring .abh-map__card { opacity: 0; visibility: hidden; }
.abh-map__card > * { margin: 0; }
.abh-map__name { font-family: var(--wp--preset--font-family--serif); font-size: 1.35rem; line-height: 1.15; color: var(--wp--preset--color--teal-deep); }
.abh-map__address { margin-top: 0.3rem !important; font-size: 0.82rem; line-height: 1.45; color: rgb(28 35 40 / 0.78); }
.abh-map__rating { margin-top: 0.35rem !important; font-size: 0.82rem; }
.abh-map__rating a { color: inherit; text-decoration: none; }
.abh-map__rating a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); }
.abh-map__rating .abh-stars { color: var(--wp--preset--color--gold-dark); letter-spacing: 0.06em; }
.abh-map__links { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem !important; }
.abh-map__link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0.45rem 1rem;
border: 1px solid rgb(11 65 66 / 0.35);
border-radius: 999px;
font-size: 0.8rem;
font-weight: 500;
color: var(--wp--preset--color--teal-deep);
text-decoration: none;
white-space: nowrap;
}
.abh-map__link--route { border-color: transparent; background: var(--abh-gold-grad); color: var(--wp--preset--color--ink); }
.abh-map__link:hover { border-color: var(--wp--preset--color--gold); }
.abh-map__link:focus-visible, .abh-map__rating a:focus-visible { outline: 2px solid var(--wp--preset--color--teal-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .abh-map__card { transition: none; } }
/* Small laptops (1024 to 1099 wide): a little less space above the hero text, so the Google
rating line sits above the fold on a 768-high screen. */
@media (min-width: 1024px) and (max-width: 1099px) {
.abh-hero { padding-top: calc(var(--abh-header-h) + 0.5rem) !important; }
}
/* ---------- The 15% new-client offer (abh-core/inc/signup.php) ---------- */
/* A small card in the corner, never a full-screen pop-up. On phones it sits above the Book bar. */
.abh-signup {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 60;
box-sizing: border-box;
width: min(22rem, calc(100% - 2rem));
padding: 1.4rem 1.4rem 1.1rem;
border: 1px solid rgb(194 164 106 / 0.7);
border-radius: var(--abh-radius);
background: var(--wp--preset--color--base);
box-shadow: 0 24px 60px -20px rgb(4 30 32 / 0.45);
color: var(--wp--preset--color--ink);
opacity: 0;
transform: translateY(12px);
transition: opacity 250ms ease, transform 250ms ease;
}
.abh-signup[hidden] { display: none; }
.abh-signup.is-open { opacity: 1; transform: none; }
.abh-signup__close { position: absolute; top: 0.35rem; right: 0.35rem; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--wp--preset--color--ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.abh-signup__eyebrow { margin: 0 0 0.3rem; color: var(--wp--preset--color--gold-dark); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.abh-signup__title { margin: 0 2rem 0.5rem 0; color: var(--wp--preset--color--teal-deep); font-family: var(--wp--preset--font-family--serif); font-size: 1.45rem; line-height: 1.2; }
.abh-signup__text { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.5; color: var(--wp--preset--color--ink-2); }
.abh-signup__form { display: flex; flex-direction: column; gap: 0.5rem; }
.abh-signup__form input[type="email"] { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0.55rem 0.8rem; border: 1px solid var(--wp--preset--color--rule); border-radius: 4px; background: #fff; font: inherit; font-size: 1rem; }
.abh-signup__form button { min-height: 44px; border: 0; border-radius: var(--abh-pill); background: var(--abh-gold-grad, var(--wp--preset--color--gold)); color: var(--wp--preset--color--teal-black); font: inherit; font-weight: 500; cursor: pointer; }
.abh-signup :focus-visible { outline: 2px solid var(--wp--preset--color--teal-deep); outline-offset: 2px; }
.abh-signup__small { margin: 0.7rem 0 0; font-size: 0.75rem; color: var(--wp--preset--color--ink-2); }
@media (max-width: 599px) {
.abh-signup { right: 1rem; bottom: calc(46px + 1.2rem + 0.75rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .abh-signup { transition: none; } }
/* ---------- Hero on white (?bg=white-green, ?bg=white-gold) ---------- */
/* Hayley, 9 Oct, on the hero she chose: "try it with a white background (instead of green) with
either green or gold subtle pattern ... reverse the white & greens". Preview only, until she
picks one. Only the home hero changes, and the header above it; the page heads, Kind words, the
closing band and the reviews band keep their default look (the generic ?bg= rule near the top of
this file lists the four older names, so these two do not reach them).
Colours: white ground, the arches in teal (#126364) or champagne gold, words in teal-deep
(11.4:1 on white), the eyebrow and the emphasised "women 40+" in teal (7.0:1). Plain gold and
gold-dark (2.9:1 on white) are decoration only here, never words.
The two must tell apart at a glance (Dan, 9 Oct: at 7% and 9% he could not), so the pattern is
strong enough to see on a phone, and the small lines, the slider handle and the glow behind
Hayley follow the variant: teal on white-green, gold on white-gold. The stars stay gold on both.
--abh-wh-accent is the line colour, --abh-wh-glow the glow behind Hayley. */
:root.abh-bg-white-green { --abh-wh-line: 18 99 100; --abh-wh-op: 0.18; --abh-wh-accent: 18 99 100; --abh-wh-glow: 220 235 232; }
/* Gold: the darker champagne (#B6924D). Gold is far lighter than teal, so it needs about twice the
strength to look as present. */
:root.abh-bg-white-gold { --abh-wh-line: 182 146 77; --abh-wh-op: 0.32; --abh-wh-accent: 182 146 77; --abh-wh-glow: 239 230 216; }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero { background: var(--wp--preset--color--white) !important; color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(var(--abh-wh-line));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cpath d='M0 80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 240a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 -80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0z' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cpath d='M0 80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 240a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0zM160 -80a80 80 0 0 1 160 0v160a80 80 0 0 1-160 0z' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
opacity: var(--abh-wh-op);
mix-blend-mode: normal;
animation: none;
pointer-events: none;
}
@media (forced-colors: active) { :root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero::before { display: none; } }
/* Circles (?bg=white-green-circles, ?bg=white-gold-circles). Hayley, 10 Oct, on ?bg=soft: "is it
possible to have the white & gold / white & green with this pattern". The same white hero in the
same colours, with the overlapping circles of ?bg=soft (the same tile and size) in place of the
arches. The circles carry more line than the arches, so they sit a little lighter. */
:root.abh-bg-circles:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M120 60a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0Z' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M120 60a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 0a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM60 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0ZM180 120a60 60 0 1 1-120 0a60 60 0 1 1 120 0Z' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
}
/* Hayley and Dan, 15 Oct: the launch look, with the circles faint so the words stand out (they
were 0.15). */
:root.abh-bg-circles.abh-bg-white-green { --abh-wh-op: 0.1; }
:root.abh-bg-circles.abh-bg-white-gold { --abh-wh-op: 0.28; }
/* The words. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero :where(h1, h2, h3, h4, p, li, figcaption) { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .is-style-device {
color: var(--wp--preset--color--teal);
background: linear-gradient(rgb(var(--abh-wh-accent)), rgb(var(--abh-wh-accent))) no-repeat 0 0.68em / 28px 1px;
}
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero h1.is-style-device em { color: var(--wp--preset--color--teal-deep); }
/* Hayley's clients, 15 Oct: the words stood out more on the green. On white the introduction goes
from light (300) to regular (400), and the headline a touch heavier (350 of Newsreader's 300 to
400), so the contrast comes from both the fainter circles and the type. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero__text > p:not(.is-style-eyebrow):not(.abh-rating-line) { font-weight: 400; }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero h1.is-style-device em { font-weight: 350; }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .abh-hero__who { color: var(--wp--preset--color--teal); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--abh-wh-accent)); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .abh-stars { color: var(--wp--preset--color--gold-dark); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .abh-rating-line, :root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .abh-rating-line a { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero__foot { color: var(--wp--preset--color--teal-deep) !important; }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero__foot::before { background: linear-gradient(90deg, rgb(var(--abh-wh-accent) / 0), rgb(var(--abh-wh-accent) / 0.75)); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero__foot::after { background: linear-gradient(90deg, rgb(var(--abh-wh-accent) / 0.75), rgb(var(--abh-wh-accent) / 0)); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero :focus-visible { outline-color: var(--wp--preset--color--teal-deep); }
/* Buttons: teal-deep with white words, and a teal-deep outline. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-button:not(.is-style-outline):not(.is-style-text) > .wp-block-button__link {
background: var(--wp--preset--color--teal-deep);
color: var(--wp--preset--color--white);
box-shadow: 0 10px 26px -12px rgb(11 65 66 / 0.55);
}
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-button:not(.is-style-outline):not(.is-style-text) > .wp-block-button__link:hover {
background: var(--wp--preset--color--teal);
color: var(--wp--preset--color--white);
box-shadow: 0 14px 30px -12px rgb(11 65 66 / 0.6);
}
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
border-color: var(--wp--preset--color--teal-deep);
color: var(--wp--preset--color--teal-deep);
}
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: var(--wp--preset--color--teal-deep);
border-color: var(--wp--preset--color--teal-deep);
color: var(--wp--preset--color--white);
}
/* Hayley: a soft glow behind her, teal-tint on white-green and warm champagne on white-gold, so she
stands in the light rather than floating on the white. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-image { filter: drop-shadow(0 0 26px rgb(var(--abh-wh-accent) / 0.12)); }
/* Her outline was cut for the dark teal and shows a faint dark line and a few white specks on
white: these two variants use a copy with the outline recoloured from the figure and the
specks closed (scripts/make-hero-cutout-white.py). The default hero keeps the original file. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-image img { content: url(assets/images/hayley-hero-cutout-white.webp); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-image::before {
content: "";
position: absolute;
inset: -2% -34% -2% -34%;
z-index: -1;
/* Fades to nothing before the edge of the box (centre on her face, 64% across the photo), so no
edge shows. */
background: radial-gradient(ellipse 40% 44% at 58% 46%, rgb(var(--abh-wh-glow) / 0.95) 0%, rgb(var(--abh-wh-glow) / 0.6) 42%, rgb(var(--abh-wh-glow) / 0) 100%);
pointer-events: none;
}
@media (max-width: 900px) {
:root:is(.abh-bg-white-green, .abh-bg-white-gold) .abh-hero .wp-block-image::before {
background: radial-gradient(ellipse 36% 46% at 50% 46%, rgb(var(--abh-wh-glow) / 0.95) 0%, rgb(var(--abh-wh-glow) / 0.6) 42%, rgb(var(--abh-wh-glow) / 0) 100%);
}
}
/* The before and after card: a white card with teal-deep words in place of the dark glass one. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider--faces {
border-color: rgb(18 99 100 / 0.3);
background: rgb(255 255 255 / 0.92);
box-shadow: 0 28px 60px -26px rgb(11 65 66 / 0.5), 0 2px 12px rgb(11 65 66 / 0.08);
}
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider--faces .abh-baslider__frame { border-color: rgb(11 65 66 / 0.4); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider--faces .abh-baslider__what { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__label { background: rgb(11 65 66 / 0.88); color: var(--wp--preset--color--white); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__nav button { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__nav :is(.abh-baslider__prev, .abh-baslider__next) { border-color: rgb(11 65 66 / 0.7); color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__nav :is(.abh-baslider__prev, .abh-baslider__next):hover { background: var(--wp--preset--color--teal-deep); color: var(--wp--preset--color--white); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__dot::before { border-color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__dot[aria-current="true"]::before { background: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark) .abh-hero .abh-baslider__nav button:focus-visible { outline-color: var(--wp--preset--color--teal-deep); }
/* The slider handle follows the variant: teal on white-green; white-gold keeps the gold one. */
:root.abh-bg-white-green:not(.abh-bg-dark) .abh-hero .abh-baslider__handle { background: var(--wp--preset--color--teal); }
:root.abh-bg-white-green:not(.abh-bg-dark) .abh-hero .abh-baslider__handle:not(.abh-baslider__handle--line)::after {
border-color: var(--wp--preset--color--teal-tint);
background: var(--wp--preset--color--teal);
color: var(--wp--preset--color--white);
}
/* The header over the white hero (home page only: inner pages still open on a dark band): teal
words and logo, a teal-deep Book button, and a white bar once the page scrolls. The phone menu
keeps its own dark panel and ivory words. */
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-header { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-header .abh-wordmark__name { background: none; color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-header .abh-wordmark__place { color: var(--wp--preset--color--teal); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--teal); text-decoration-color: var(--wp--preset--color--gold-dark); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .abh-social.wp-block-social-links.is-style-logos-only .wp-social-link { color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .abh-social.wp-block-social-links.is-style-logos-only .wp-social-link:hover { color: var(--wp--preset--color--teal); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-nav .wp-block-navigation__responsive-container-open { border-color: rgb(11 65 66 / 0.5); color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-header__book .wp-block-button__link { background: var(--wp--preset--color--teal-deep); color: var(--wp--preset--color--white); box-shadow: 0 8px 22px -10px rgb(11 65 66 / 0.5); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-header__book .wp-block-button__link:hover { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--white); box-shadow: 0 12px 26px -10px rgb(11 65 66 / 0.6); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero) .abh-header :focus-visible { outline-color: var(--wp--preset--color--teal-deep); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero).is-scrolled .abh-header::before { background: rgb(255 255 255 / 0.94); }
:root:is(.abh-bg-white-green, .abh-bg-white-gold):not(.abh-bg-dark):has(.abh-hero).is-scrolled .abh-header { box-shadow: 0 1px 0 rgb(18 99 100 / 0.16), 0 12px 30px -18px rgb(11 65 66 / 0.3); }
/* Dark header and card (?bg=white-gold-dark, ?bg=white-green-dark, and the same after -circles).
Hayley, 12 Oct, on the white hero: "would it look better if this box was darker, basically like
this colour [the dark hero], but against the white? ... And could the top bit then be the same
colouring as that?" The same white hero, with the header as a solid teal bar and the before and
after card in the same teal, both with the default dark-hero words, gold lines and gold Book pill.
The trust strip under the hero is already teal-black, so the white hero sits between two dark
bands. Preview only, beside the four white options (which stay as they were). */
:root.abh-bg-dark { --abh-dark-teal: linear-gradient(160deg, #10504F 0%, #0B4142 45%, #072F31 100%); }
:root.abh-bg-dark:has(.abh-hero) .abh-header::before { opacity: 1; background: var(--abh-dark-teal); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.abh-bg-dark:has(.abh-hero) .abh-header { box-shadow: 0 1px 0 rgb(194 164 106 / 0.35); }
:root.abh-bg-dark:has(.abh-hero).is-scrolled .abh-header { box-shadow: 0 1px 0 rgb(194 164 106 / 0.35), 0 12px 30px -18px rgb(0 0 0 / 0.45); }
:root.abh-bg-dark .abh-hero .abh-baslider--faces {
border-color: rgb(194 164 106 / 0.6);
background: var(--abh-dark-teal);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 30px 60px -24px rgb(4 30 32 / 0.6), 0 2px 12px rgb(4 30 32 / 0.12);
}
:root.abh-bg-dark .abh-hero .abh-baslider--faces .abh-baslider__caption { color: var(--abh-ivory-84); }
:root.abh-bg-dark .abh-hero .abh-baslider--faces .abh-baslider__what { color: var(--wp--preset--color--base); }