/*
Theme Name: IL Health 1
Theme URI: https://www.izolink.com
Author: Izolink Ltd
Author URI: https://www.izolink.com
Description: IL Health 1 — Izolink Healthcare Theme 1. Premium FSE theme for medical aesthetics clinics.
Version: 1.12.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: il-health-1
*/
/* ═══════════════════════════════════════════
DESIGN TOKENS — match theme.json exactly
═══════════════════════════════════════════ */
:root {
--gold: #8B7355;
--gold-light: #B09A78;
--gold-pale: #D4C4A8;
--cream: #FAF8F4;
--cream-dark: #F2EDE4;
--warm-white: #FDFCFA;
--charcoal: #2C2825;
--charcoal-mid: #4A4540;
--text-muted: #7A7268;
--body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--display-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--header-h: 72px;
}
/* ═══════════════════════════════════════════
GLOBAL BASE — Inter everywhere, 15px/400
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
font-family: var(--body-font) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: var(--charcoal) !important;
background: var(--warm-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
margin: 0;
padding: 0 !important;
}
/* Inter for ALL text elements — no exceptions for prose */
p, li, a, span, td, th, label, dt, dd,
input, textarea, select, button,
.wp-block-paragraph, .wp-block-list, .wp-block-button__link,
.wp-block-navigation a, .wp-block-navigation-item__content,
.wp-block-site-title a {
font-family: var(--body-font) !important;
}
/* Minimum 14px everywhere */
p, li, a, span, label,
.wp-block-paragraph, .wp-block-navigation-item__content,
.wp-block-button__link {
font-size: max(14px, 1em);
}
/* Cormorant only for H1–H4 */
h1, h2, h3, h4,
.wp-block-heading,
.aura-display {
font-family: var(--display-font) !important;
}
/* Push content below fixed header */
.wp-site-blocks { padding-top: var(--header-h) !important; }
/* ═══════════════════════════════════════════
HEADER — Fixed glass bar, shrinks on scroll
═══════════════════════════════════════════ */
.aura-header {
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 9990;
height: var(--header-h);
background: rgba(253,252,250,0.97) !important;
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
border-bottom: 1px solid rgba(139,115,85,0.14) !important;
padding: 0 clamp(24px,4.5vw,72px) !important;
transition: height 0.3s ease, box-shadow 0.3s ease;
display: flex !important;
align-items: center !important;
gap: 20px;
}
.aura-header.scrolled {
height: 58px !important;
box-shadow: 0 2px 24px rgba(44,40,37,0.1) !important;
}
/* Logo */
.aura-header .wp-block-site-logo img {
width: 58px !important; height: 58px !important;
object-fit: contain !important;
transition: width 0.3s, height 0.3s;
}
.aura-header.scrolled .wp-block-site-logo img {
width: 40px !important; height: 40px !important;
}
/* Site title */
.aura-header .wp-block-site-title a {
font-family: var(--display-font) !important;
font-size: 1.42rem !important;
font-weight: 400 !important;
color: var(--charcoal) !important;
text-decoration: none !important;
letter-spacing: 0.02em;
transition: font-size 0.3s;
white-space: nowrap;
}
.aura-header.scrolled .wp-block-site-title a { font-size: 1.18rem !important; }
/* ── ALL nav items: Inter 600 14px, NO button style ── */
.aura-header .wp-block-navigation-item__content,
.aura-nav-primary .wp-block-navigation-item > a,
.aura-nav-primary .wp-block-navigation-item > .wp-block-navigation-item__content {
font-family: var(--body-font) !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--charcoal) !important;
text-decoration: none !important;
/* Remove ALL button-like styling */
border: none !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 6px 11px !important;
letter-spacing: 0.005em;
transition: color 0.18s;
white-space: nowrap;
outline: none !important;
}
.aura-header .wp-block-navigation-item__content:hover,
.aura-nav-primary .wp-block-navigation-item > a:hover {
color: var(--gold) !important;
background: none !important;
}
/* ── Active page: current nav item gets gold color ── */
.aura-nav-primary .current-menu-item > .wp-block-navigation-item__content,
.aura-nav-primary .current-menu-item > a,
.aura-nav-primary .current-page-ancestor > .wp-block-navigation-item__content,
.aura-nav-primary .current-page-ancestor > a,
.aura-nav-primary .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
color: var(--gold) !important;
font-weight: 700 !important;
position: relative !important;
}
/* Gold underline dot on active item */
.aura-nav-primary .current-menu-item > .wp-block-navigation-item__content::after,
.aura-nav-primary .current-menu-item > a::after {
content: '' !important;
display: block !important;
width: 4px !important; height: 4px !important;
background: var(--gold) !important;
border-radius: 50% !important;
margin: 2px auto 0 !important;
}
/* ── EXPLICITLY remove button styling from Contact link ── */
/* WP sometimes renders the last nav item with button classes */
.wp-block-navigation-item a[href*="contact"],
.wp-block-navigation-item.contact-page-item a,
.wp-block-navigation .wp-block-navigation-item:last-of-type
> .wp-block-navigation-item__content,
.wp-block-navigation .wp-element-button,
.aura-nav-primary .wp-block-navigation-item
> .wp-block-navigation-item__content.wp-element-button {
background: none !important;
color: var(--charcoal) !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 6px 11px !important;
font-weight: 600 !important;
font-size: 14px !important;
text-decoration: none !important;
}
.wp-block-navigation-item a[href*="contact"]:hover,
.wp-block-navigation .wp-block-navigation-item:last-of-type
> .wp-block-navigation-item__content:hover {
color: var(--gold) !important;
background: none !important;
}
/* ── Book Now: gold pill stays styled ── */
.aura-nav-cta .wp-block-button__link {
font-family: var(--body-font) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 10px 22px !important;
background: var(--gold) !important;
color: #fff !important;
border: none !important;
border-radius: 0 !important;
text-decoration: none !important;
transition: background 0.2s !important;
white-space: nowrap;
}
.aura-nav-cta .wp-block-button__link:hover { background: var(--charcoal) !important; }
/* ═══════════════════════════════════════════
STANDARD DROPDOWN — polished card
═══════════════════════════════════════════ */
.wp-block-navigation .wp-block-navigation-submenu__container {
position: absolute !important;
top: calc(100% + 6px) !important;
left: 0 !important;
min-width: 270px !important;
background: #fff !important;
border: none !important;
border-top: 2px solid var(--gold) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 10px 40px rgba(44,40,37,0.13), 0 2px 8px rgba(44,40,37,0.06) !important;
padding: 8px 0 10px !important;
z-index: 9985 !important;
overflow: hidden;
/* Remove any inherited button styles */
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
}
/* Dropdown items */
.wp-block-navigation .wp-block-navigation-submenu__container
.wp-block-navigation-item__content {
font-family: var(--body-font) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--charcoal) !important;
padding: 11px 22px 11px 16px !important;
display: block !important;
text-decoration: none !important;
background: none !important;
border: none !important;
border-left: 3px solid transparent !important;
box-shadow: none !important;
line-height: 1.45 !important;
transition: background 0.13s, color 0.13s, border-color 0.13s, padding 0.13s !important;
}
.wp-block-navigation .wp-block-navigation-submenu__container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content {
background: var(--cream-dark) !important;
color: var(--gold) !important;
border-left-color: var(--gold) !important;
padding-left: 22px !important;
}
/* ═══════════════════════════════════════════
MEGA MENU — Treatments: full-width panel
═══════════════════════════════════════════ */
.aura-nav-treatments .wp-block-navigation-submenu__container {
position: fixed !important;
top: var(--header-h) !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
min-width: 100vw !important;
border-radius: 0 !important;
border-top: 2px solid var(--gold) !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 0 14px 50px rgba(44,40,37,0.14) !important;
padding: 0 !important;
display: none;
z-index: 9984;
}
.aura-nav-treatments:hover .wp-block-navigation-submenu__container,
.aura-nav-treatments:focus-within .wp-block-navigation-submenu__container {
display: block !important;
}
/* "Our Treatments" header inside mega panel */
.aura-nav-treatments .wp-block-navigation-submenu__container::before {
content: 'Our Treatments';
display: block;
padding: 18px clamp(28px,5vw,80px) 14px;
font-family: var(--display-font) !important;
font-size: 1rem !important;
font-weight: 400 !important;
color: var(--text-muted) !important;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(139,115,85,0.1);
background: #fff;
}
/* 4-column grid of treatment links */
.aura-nav-treatments .wp-block-navigation-submenu__container
> .wp-block-navigation__submenu-container,
.aura-nav-treatments .wp-block-navigation-submenu__container > ul {
display: grid !important;
grid-template-columns: repeat(4,1fr) !important;
padding: 0 clamp(28px,5vw,80px) 0 !important;
background: #fff;
margin: 0 !important;
list-style: none !important;
}
.aura-nav-treatments .wp-block-navigation-submenu__container
.wp-block-navigation-item {
border-right: 1px solid rgba(139,115,85,0.08) !important;
}
.aura-nav-treatments .wp-block-navigation-submenu__container
.wp-block-navigation-item:last-child { border-right: none !important; }
.aura-nav-treatments .wp-block-navigation-submenu__container
.wp-block-navigation-item__content {
font-weight: 500 !important;
padding: 17px 20px 17px 20px !important;
border-left: none !important;
border-bottom: 2px solid transparent !important;
font-size: 14px !important;
}
.aura-nav-treatments .wp-block-navigation-submenu__container
.wp-block-navigation-item:hover > .wp-block-navigation-item__content {
background: var(--cream) !important;
color: var(--gold) !important;
border-left: none !important;
border-bottom-color: var(--gold) !important;
padding-left: 20px !important;
}
/* Adjust mega menu top when header scrolled */
.aura-header.scrolled ~ .wp-site-blocks .aura-nav-treatments
.wp-block-navigation-submenu__container {
top: 58px !important;
}
/* ═══════════════════════════════════════════
MOBILE DRAWER — slides from right
═══════════════════════════════════════════ */
.wp-block-navigation__responsive-container-open {
background: none !important;
border: none !important;
padding: 6px !important;
cursor: pointer !important;
width: 36px !important; height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.wp-block-navigation__responsive-container-open svg {
color: var(--charcoal) !important;
}
/* Animated 3-bar hamburger */
.aura-hamburger {
display: flex; flex-direction: column; gap: 5px; width: 22px;
}
.aura-ham-bar {
display: block; height: 2px;
background: var(--charcoal); border-radius: 2px;
transform-origin: center;
transition: transform 0.26s ease, opacity 0.2s ease;
}
.aura-nav-open .aura-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aura-nav-open .aura-ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.aura-nav-open .aura-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Backdrop overlay */
.wp-block-navigation__responsive-container.is-menu-open {
background: rgba(44,40,37,0.5) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
animation: overlayIn 0.28s ease !important;
display: flex !important;
justify-content: flex-end !important;
align-items: stretch !important;
padding: 0 !important;
}
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
/* Drawer panel */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
background: #fff !important;
width: min(340px, 88vw) !important;
height: 100vh !important;
overflow-y: auto !important;
padding: 0 !important; margin: 0 !important;
flex-shrink: 0 !important;
box-shadow: -6px 0 32px rgba(44,40,37,0.18) !important;
animation: drawerIn 0.3s cubic-bezier(0.16,1,0.3,1) !important;
display: flex !important; flex-direction: column !important;
}
@keyframes drawerIn { from { transform:translateX(100%); } to { transform:translateX(0); } }
/* Gold top bar on drawer */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content::before {
content: '';
display: block;
height: 4px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-pale) 100%);
flex-shrink: 0;
}
/* Close button row */
.wp-block-navigation__responsive-container-close {
position: sticky !important; top: 0 !important;
background: var(--charcoal) !important;
border: none !important;
color: rgba(255,255,255,0.6) !important;
width: 100% !important;
padding: 15px 24px !important;
display: flex !important;
align-items: center !important; justify-content: space-between !important;
cursor: pointer !important;
font-family: var(--body-font) !important;
font-size: 11px !important; font-weight: 600 !important;
letter-spacing: 0.2em !important; text-transform: uppercase !important;
}
.wp-block-navigation__responsive-container-close::before {
content: 'Menu'; color: rgba(255,255,255,0.4);
}
.wp-block-navigation__responsive-container-close svg {
color: rgba(255,255,255,0.6) !important;
transition: transform 0.2s !important;
}
.wp-block-navigation__responsive-container-close:hover svg {
transform: rotate(90deg) !important;
}
/* Drawer nav items */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
font-size: 15px !important; font-weight: 500 !important;
color: var(--charcoal) !important;
padding: 14px 28px !important;
border-bottom: 1px solid rgba(139,115,85,0.09) !important;
border-left: 3px solid transparent !important;
background: none !important; box-shadow: none !important;
display: block !important; text-decoration: none !important;
transition: background 0.14s, border-color 0.14s, color 0.14s !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:hover > .wp-block-navigation-item__content {
background: var(--cream-dark) !important;
border-left-color: var(--gold) !important; color: var(--gold) !important;
}
/* Sub-items in drawer */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__container
.wp-block-navigation-item__content {
font-size: 14px !important; font-weight: 400 !important;
padding: 11px 28px 11px 44px !important;
color: var(--text-muted) !important;
}
/* ═══════════════════════════════════════════
HERO COVER PADDING — definitive fix
Applied at multiple levels to survive WP overrides
═══════════════════════════════════════════ */
.wp-block-cover.aura-hero-fullbg,
.wp-block-cover.aura-hero-v3 {
padding-left: clamp(40px, 7vw, 120px) !important;
padding-right: clamp(40px, 7vw, 120px) !important;
}
/* The inner container inside any cover */
.wp-block-cover__inner-container {
padding-left: clamp(40px, 7vw, 120px);
padding-right: clamp(40px, 7vw, 120px);
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* But if the cover block already has its own padding, don't double-up */
.aura-hero-fullbg .wp-block-cover__inner-container,
.aura-hero-v3 .wp-block-cover__inner-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Page heros */
.aura-page-hero .wp-block-cover__inner-container {
padding-left: clamp(40px,7vw,120px) !important;
padding-right: clamp(40px,7vw,120px) !important;
}
/* Page hero overlay — not too dark */
.aura-page-hero .wp-block-cover__background { opacity: 0.42 !important; }
/* Overlay helper classes for editors */
.aura-overlay-light .wp-block-cover__background { opacity: 0.20 !important; }
.aura-overlay-medium .wp-block-cover__background { opacity: 0.38 !important; }
.aura-overlay-dark .wp-block-cover__background { opacity: 0.60 !important; }
.aura-overlay-very-dark .wp-block-cover__background { opacity: 0.78 !important; }
/* ═══════════════════════════════════════════
HERO COMPONENT STYLES
═══════════════════════════════════════════ */
.aura-hero-fullbg { min-height: 90vh; position: relative; }
.aura-hero-inner { max-width: 620px; }
.aura-hero-eyebrow {
display: flex; align-items: center; gap: 12px;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: 0.22em !important; text-transform: uppercase !important;
color: var(--gold-pale) !important; margin-bottom: 20px !important;
}
.aura-hero-eyebrow::before {
content: ''; width: 28px; height: 1px;
background: var(--gold-pale); flex-shrink: 0;
}
.aura-hero-title {
font-family: var(--display-font) !important;
font-size: clamp(3rem,5.5vw,5.5rem) !important;
font-weight: 300 !important;
line-height: 1.06 !important;
color: #fff !important;
margin-bottom: 22px !important;
}
.aura-hero-title em { font-style: italic; color: var(--gold-pale); }
.aura-hero-body {
font-family: var(--body-font) !important;
font-size: 16px !important; font-weight: 400 !important;
line-height: 1.75 !important;
color: rgba(255,255,255,0.78) !important;
margin-bottom: 32px !important; max-width: 480px;
}
.aura-hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.aura-btn-primary {
display: inline-block; font-family: var(--body-font) !important;
font-size: 13px !important; font-weight: 600 !important;
letter-spacing: 0.1em !important; text-transform: uppercase !important;
color: var(--charcoal) !important; background: var(--gold-pale);
padding: 14px 30px; text-decoration: none !important;
transition: background 0.2s;
}
.aura-btn-primary:hover { background: #fff; }
.aura-btn-outline {
display: inline-block; font-family: var(--body-font) !important;
font-size: 13px !important; font-weight: 600 !important;
letter-spacing: 0.1em !important; text-transform: uppercase !important;
color: rgba(255,255,255,0.85) !important;
border: 1px solid rgba(255,255,255,0.36);
padding: 14px 30px; text-decoration: none !important;
transition: border-color 0.2s, color 0.2s;
}
.aura-btn-outline:hover { border-color: rgba(255,255,255,0.8); color: #fff !important; }
/* ─ Social icons ─ */
.aura-social-row { display: flex; gap: 10px; margin-top: 28px; }
.aura-social-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border: 1px solid rgba(255,255,255,0.22); border-radius: 50%;
color: rgba(255,255,255,0.6) !important; text-decoration: none !important;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.aura-social-icon:hover {
border-color: var(--gold-pale); color: var(--gold-pale) !important;
background: rgba(212,196,168,0.08);
}
.aura-social-icon.dark {
border-color: rgba(44,40,37,0.22); color: var(--charcoal-mid) !important;
}
.aura-social-icon.dark:hover { border-color: var(--gold); color: var(--gold) !important; }
/* ─ Stats strip ─ */
.aura-stats-row {
display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
max-width: 1280px; margin: 0 auto;
}
.aura-stat-item {
text-align: center; padding: 12px 16px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.aura-stat-item:last-child { border-right: none; }
.aura-stat-num {
font-family: var(--display-font) !important;
font-size: clamp(2rem,3.5vw,2.8rem) !important;
font-weight: 300 !important; color: var(--gold-pale) !important;
line-height: 1 !important; margin-bottom: 6px !important;
}
.aura-stat-label {
font-family: var(--body-font) !important;
font-size: 12px !important; font-weight: 400 !important;
color: rgba(255,255,255,0.45) !important;
letter-spacing: 0.08em !important; text-transform: uppercase !important;
}
/* ═══════════════════════════════════════════
SECTION HELPERS
═══════════════════════════════════════════ */
.aura-section-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--body-font) !important;
font-size: 11px !important; font-weight: 600 !important;
letter-spacing: 0.22em !important; text-transform: uppercase !important;
color: var(--gold) !important; margin-bottom: 18px !important;
}
.aura-section-eyebrow::before {
content: ''; width: 24px; height: 1px;
background: var(--gold); flex-shrink: 0;
}
/* Two-column image + text sections */
.aura-two-col-section {
display: grid; grid-template-columns: 44% 1fr; min-height: 560px;
}
.aura-col-img-wrap { overflow: hidden; }
.aura-col-image {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s; filter: saturate(0.85);
}
.aura-col-image:hover { transform: scale(1.03); }
.aura-two-col-content {
padding: clamp(40px,5vw,80px) clamp(32px,5vw,80px);
display: flex; flex-direction: column; justify-content: center;
}
/* ═══════════════════════════════════════════
TREATMENT CARDS
═══════════════════════════════════════════ */
.aura-treatments-grid {
display: grid; grid-template-columns: repeat(3,1fr);
gap: 1px; background: var(--cream-dark);
}
.aura-treatment-card {
background: var(--warm-white); display: flex;
flex-direction: column; overflow: hidden;
transition: box-shadow 0.25s;
}
.aura-treatment-card:hover {
box-shadow: 0 8px 32px rgba(44,40,37,0.1); z-index: 1; position: relative;
}
.aura-treatment-card .card-image { overflow: hidden; position: relative; }
.aura-treatment-card .card-image::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 3px; background: var(--gold);
transform: scaleX(0); transition: transform 0.3s;
}
.aura-treatment-card:hover .card-image::after { transform: scaleX(1); }
.aura-treatment-card .card-image img {
width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
transition: transform 0.5s; filter: saturate(0.85);
}
.aura-treatment-card:hover .card-image img { transform: scale(1.05); }
.aura-treatment-card .card-body {
padding: 26px 24px 24px; flex: 1;
display: flex; flex-direction: column;
}
.aura-treatment-card .card-num {
font-family: var(--display-font) !important;
font-size: 1.8rem !important; font-weight: 300 !important;
color: var(--gold-pale) !important; opacity: 0.6;
line-height: 1; margin-bottom: 8px !important;
}
/* Title: Inter 600 — medium bold */
.aura-treatment-card .card-name {
font-family: var(--body-font) !important;
font-size: 16px !important; font-weight: 600 !important;
color: #1a1816 !important;
margin-bottom: 10px !important; line-height: 1.3 !important;
}
.aura-treatment-card .card-desc {
font-family: var(--body-font) !important;
font-size: 14px !important; line-height: 1.75 !important;
color: var(--text-muted) !important; font-weight: 400 !important;
flex: 1; margin-bottom: 20px !important;
}
/* "Learn More" gold button */
.aura-treatment-card .card-link {
display: inline-flex !important; align-items: center !important;
gap: 8px !important; font-family: var(--body-font) !important;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: 0.1em !important; text-transform: uppercase !important;
color: #fff !important; background: var(--gold) !important;
padding: 10px 18px !important; text-decoration: none !important;
border: none !important; transition: background 0.2s, gap 0.2s !important;
align-self: flex-start !important; margin-top: auto !important;
}
.aura-treatment-card .card-link:hover {
background: var(--charcoal) !important; gap: 12px !important;
}
.aura-treatment-card .card-link::after { content: none; }
/* ── Treatment card gold pill button (replaces is-style-link) ── */
.aura-card-btn .wp-block-button__link {
background-color: var(--wp--preset--color--gold, #8B7355) !important;
color: #ffffff !important;
border-radius: 24px !important;
padding: 12px 22px !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: background 0.2s ease, transform 0.15s ease !important;
display: inline-block !important;
}
.aura-card-btn .wp-block-button__link:hover {
background-color: var(--wp--preset--color--charcoal, #2C2825) !important;
transform: translateY(-1px) !important;
}
.aura-treatment-card .wp-block-buttons,
.wp-block-column.aura-treatment-card .wp-block-buttons {
margin-top: auto !important;
padding-top: 18px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
.aura-treatment-card .wp-block-buttons .wp-block-button,
.wp-block-column.aura-treatment-card .wp-block-buttons .wp-block-button {
width: auto !important;
flex: 0 0 auto !important;
}
.aura-card-btn.wp-block-button {
width: auto !important;
}
/* ═══════════════════════════════════════════
TEAM CARDS
═══════════════════════════════════════════ */
.aura-team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; align-items: start; }
.aura-team-card { text-align: center; display: flex; flex-direction: column; }
/* Uniform image height for all team cards */
.aura-team-card img,
.aura-team-card .team-photo,
.aura-team-card .member-photo {
width: 100% !important;
height: 280px !important;
aspect-ratio: unset !important;
object-fit: cover !important;
object-position: top center !important;
margin-bottom: 20px !important;
filter: saturate(0.88) contrast(1.04) !important;
display: block !important;
}
/* Support BOTH class naming schemes */
.aura-team-card .team-name,
.aura-team-card .member-name { font-family: var(--display-font) !important; font-size: 1.25rem !important; font-weight: 300 !important; color: var(--charcoal) !important; margin-bottom: 4px !important; }
.aura-team-card .team-role,
.aura-team-card .member-role { font-family: var(--body-font) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 10px !important; }
.aura-team-card .team-bio,
.aura-team-card .member-bio { font-family: var(--body-font) !important; font-size: 13.5px !important; color: var(--text-muted) !important; line-height: 1.75 !important; margin-top: 8px !important; flex: 1; }
.aura-team-card .member-quals,
.aura-team-card .team-quals { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.qual-badge { background: var(--cream-dark,#F2EDE4); padding: 4px 10px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-mid,#4A4540); font-weight: 500; }
/* ═══════════════════════════════════════════
PROCESS STEPS
═══════════════════════════════════════════ */
.aura-process-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.aura-process-step { padding: 40px 32px; border-right: 1px solid rgba(139,115,85,0.12); }
.aura-process-step:last-child { border-right: none; }
.aura-step-num { font-family: var(--display-font) !important; font-size: 2.5rem !important; font-weight: 300 !important; color: var(--gold-pale) !important; margin-bottom: 16px !important; }
.aura-step-title { font-family: var(--body-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--charcoal) !important; margin-bottom: 10px !important; }
.aura-step-text { font-family: var(--body-font) !important; font-size: 14px !important; color: var(--text-muted) !important; line-height: 1.75 !important; }
/* ═══════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════ */
.aura-testimonials-strip { background: var(--cream-dark); padding: 80px clamp(28px,5vw,80px); }
.aura-testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1280px; margin: 0 auto; }
.aura-testimonial-card { background: var(--warm-white); padding: 32px 28px; border-top: 2px solid var(--gold-pale); }
.aura-testimonial-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.aura-testimonial-text { font-family: var(--body-font) !important; font-size: 14px !important; line-height: 1.85 !important; font-style: italic; color: var(--charcoal) !important; margin-bottom: 18px !important; }
.aura-testimonial-author { font-family: var(--body-font) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 2px !important; }
.aura-testimonial-date { font-family: var(--body-font) !important; font-size: 11px !important; color: var(--text-muted) !important; }
/* ═══════════════════════════════════════════
PRICE TEASER & PRICELIST
═══════════════════════════════════════════ */
.aura-price-teaser { background: #3D3530; padding: 72px clamp(28px,5vw,80px); }
.aura-price-item {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 20px; padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.08); max-width: 580px;
}
.aura-price-item-name { font-family: var(--body-font) !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.75) !important; flex: 1 !important; margin: 0 !important; }
.aura-price-item-price { font-family: var(--display-font) !important; font-size: 1.1rem !important; font-weight: 400 !important; color: var(--gold-pale) !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 0 !important; }
.aura-price-category { margin-bottom: 36px; }
.aura-price-category h3 { font-family: var(--display-font) !important; font-size: 1.4rem !important; font-weight: 300 !important; color: var(--charcoal) !important; margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }
.aura-price-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 13px 0; border-bottom: 1px solid rgba(139,115,85,0.1); }
.aura-price-row:last-child { border-bottom: none; }
.aura-price-row-name { font-family: var(--body-font) !important; font-size: 15px !important; font-weight: 400 !important; color: var(--charcoal) !important; flex: 1; line-height: 1.45; }
.aura-price-row-price { font-family: var(--body-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--gold) !important; white-space: nowrap !important; flex-shrink: 0 !important; }
/* ═══════════════════════════════════════════
SPLIT CTA
═══════════════════════════════════════════ */
.aura-split-cta { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
.aura-split-cta-text { background: #4A3F38; padding: clamp(48px,5vw,80px) clamp(32px,4vw,72px); display: flex; flex-direction: column; justify-content: center; }
.aura-split-cta-image { overflow: hidden; }
.aura-split-cta-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8); }
/* ═══════════════════════════════════════════
INSTAGRAM SECTION
═══════════════════════════════════════════ */
.aura-instagram-section { padding: 72px clamp(28px,5vw,80px); background: var(--cream); }
.aura-instagram-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; }
.aura-instagram-handle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body-font) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--charcoal) !important; text-decoration: none !important; border: 1.5px solid rgba(139,115,85,0.28); padding: 9px 16px; transition: border-color 0.2s, color 0.2s; }
.aura-instagram-handle:hover { border-color: var(--gold); color: var(--gold) !important; }
.aura-instagram-placeholder-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; }
.aura-insta-placeholder { aspect-ratio: 1; background-size: cover; background-position: center; display: block; transition: opacity 0.3s; }
.aura-insta-placeholder:hover { opacity: 0.82; }
/* ═══════════════════════════════════════════
HOMEPAGE V2 — Split Screen
═══════════════════════════════════════════ */
/* ─── V2 HERO ─── */
.aura-hero-v2 {
display: grid;
grid-template-columns: 52% 48%;
min-height: calc(100vh - var(--header-h, 72px));
overflow: hidden;
width: 100%;
}
.aura-hero-v2-panel {
background: var(--warm-white, #FDFCFA);
display: flex;
align-items: center;
padding: 0;
min-height: 100%;
overflow: hidden;
}
.aura-hero-v2-content {
width: 100%;
max-width: 600px;
padding: clamp(60px,7vh,100px) clamp(32px,4.5vw,72px) clamp(48px,6vh,80px);
}
.aura-hero-v2-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 28px;
}
.aura-hero-v2-line { width: 32px; height: 1px; background: var(--gold,#8B7355); display: block; flex-shrink: 0; }
.aura-hero-v2-eyebrow span:last-child {
font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
font-weight: 600; color: var(--gold,#8B7355);
}
.aura-hero-v2-title {
font-family: var(--display-font, 'Cormorant Garamond', serif);
font-size: clamp(2.4rem, 3vw, 3.8rem);
font-weight: 300; line-height: 1.1;
color: var(--charcoal,#2C2825);
margin: 0 0 24px;
}
.aura-hero-v2-title em { font-style: italic; color: var(--gold,#8B7355); }
.aura-hero-v2-body {
font-size: 1rem; line-height: 1.9; font-weight: 300;
color: var(--text-muted,#5C5650); margin-bottom: 38px;
}
.aura-hero-v2-btns { display: flex; gap: 12px; flex-wrap: nowrap; margin-bottom: 48px; }
.aura-btn-v2-primary {
display: inline-block; padding: 13px 26px;
background: var(--gold,#8B7355); color: #fff;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none;
border-radius: 24px; transition: background 0.2s, transform 0.15s;
border: none;
}
.aura-btn-v2-primary:hover { background: var(--charcoal,#2C2825); transform: translateY(-1px); }
.aura-btn-v2-outline {
display: inline-block; padding: 12px 26px;
background: transparent; color: var(--charcoal,#2C2825);
border: 1.5px solid rgba(139,115,85,0.45);
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none;
border-radius: 24px; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.aura-btn-v2-outline:hover { border-color: var(--gold,#8B7355); color: var(--gold,#8B7355); background: rgba(139,115,85,0.05); }
.aura-hero-v2-stats {
display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
margin-bottom: 20px;
}
.aura-v2-stat { padding: 16px; }
.aura-v2-stat--light { background: var(--cream-dark,#F2EDE4); }
.aura-v2-stat--gold { background: var(--gold,#8B7355); }
.aura-v2-stat-num {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: 1.85rem; font-weight: 300; line-height: 1;
margin: 0 0 4px; color: var(--charcoal,#2C2825);
}
.aura-v2-stat--gold .aura-v2-stat-num { color: #fff; }
.aura-v2-stat-label {
font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-muted,#5C5650);
}
.aura-v2-stat--gold .aura-v2-stat-label { color: rgba(255,255,255,0.72); }
.aura-hero-v2-social { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.aura-v2-follow-label {
font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted,#5C5650); margin-right: 4px;
}
.aura-v2-social-link {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(139,115,85,0.25);
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-muted,#5C5650); text-decoration: none;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.aura-v2-social-link:hover { color: var(--gold,#8B7355); border-color: var(--gold,#8B7355); background: rgba(139,115,85,0.06); }
/* Photo panel */
.aura-hero-v2-photo {
position: relative; overflow: hidden;
min-height: 100%; height: 100%;
background: var(--cream-dark,#F2EDE4);
}
.aura-hero-v2-photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
}
/* ─── V2 PHILOSOPHY SECTION ─── */
.aura-v2-philosophy {
padding: var(--section-gap, 96px) 0;
background: var(--warm-white, #FDFCFA);
}
.aura-v2-phil-inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(24px,5vw,80px);
display: grid;
grid-template-columns: 55% 45%;
gap: clamp(48px,7vw,96px);
align-items: center;
}
.aura-v2-phil-heading {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(2rem,3.2vw,2.85rem);
font-weight: 300; line-height: 1.12;
color: var(--charcoal,#2C2825);
margin: 8px 0 22px;
}
.aura-v2-phil-heading em { font-style: italic; color: var(--gold,#8B7355); }
.aura-v2-phil-body {
font-size: 0.95rem; line-height: 1.9; font-weight: 300;
color: var(--text-muted,#5C5650); margin-bottom: 16px;
}
.aura-v2-phil-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.aura-v2-phil-img { position: relative; overflow: hidden; border-radius: 0; }
.aura-v2-phil-img img { width: 100%; height: auto; display: block; object-fit: cover; }
/* Mobile V2 */
@media (max-width: 900px) {
.aura-hero-v2 { grid-template-columns: 1fr; min-height: auto; }
.aura-hero-v2-photo { min-height: 340px; height: 340px; }
.aura-v2-phil-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
.aura-hero-v2-content { padding: 56px 20px 44px; }
.aura-hero-v2-photo { min-height: 260px; height: 260px; }
}
/* ═══════════════════════════════════════════
HOMEPAGE V3 — Light & Centred
═══════════════════════════════════════════ */
.aura-hero-v3 { min-height: 88vh; }
.aura-hero-v3-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.aura-benefit-card { background: #fff; border: 1px solid rgba(139,115,85,0.1); padding: 28px 24px; }
.aura-benefit-title { font-family: var(--body-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--gold) !important; margin-bottom: 8px !important; }
.aura-benefit-text { font-family: var(--body-font) !important; font-size: 14px !important; color: var(--text-muted) !important; line-height: 1.7 !important; }
.aura-v3-treatment-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.aura-v3-card { display: block; text-decoration: none !important; overflow: hidden; background: #fff; }
.aura-v3-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.4s; filter: saturate(0.85); }
.aura-v3-card:hover img { transform: scale(1.04); }
.aura-v3-card-body { padding: 16px 18px 20px; }
.aura-v3-card-body h3 { font-family: var(--body-font) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--charcoal) !important; margin-bottom: 10px !important; }
.aura-v3-find-out { display: inline-block; font-family: var(--body-font) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--charcoal) !important; border: 1.5px solid rgba(44,40,37,0.22); padding: 7px 14px; text-decoration: none !important; transition: border-color 0.2s, color 0.2s; }
.aura-v3-find-out:hover { border-color: var(--gold); color: var(--gold) !important; }
.aura-v3-testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.aura-v3-testimonial { padding: 28px 24px; background: var(--cream-dark); border-top: 2px solid var(--gold-pale); }
.aura-v3-testimonial .stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.aura-v3-testimonial p { font-family: var(--body-font) !important; font-size: 14px !important; line-height: 1.8 !important; color: var(--charcoal) !important; font-style: italic; margin-bottom: 12px !important; }
.aura-v3-testimonial span { font-family: var(--body-font) !important; font-size: 12px !important; color: var(--text-muted) !important; font-weight: 600 !important; }
/* ═══════════════════════════════════════════
ABOUT PAGE COMPONENTS
═══════════════════════════════════════════ */
.aura-values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: rgba(139,115,85,0.08); }
.aura-value-card { background: var(--warm-white); padding: 36px 28px; }
.aura-value-icon { font-size: 1.5rem; margin-bottom: 16px; }
.aura-value-title { font-family: var(--body-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--charcoal) !important; margin-bottom: 10px !important; }
.aura-value-text { font-family: var(--body-font) !important; font-size: 14px !important; color: var(--text-muted) !important; line-height: 1.75 !important; }
.aura-accreditation-badge,
.aura-accred-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 20px 24px;
background: var(--warm-white,#FDFCFA);
border: 1px solid rgba(139,115,85,0.15);
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.aura-accred-badge:hover {
border-color: rgba(139,115,85,0.4);
box-shadow: 0 4px 20px rgba(139,115,85,0.1);
}
/* The shield/badge icon bar at top */
.aura-accred-badge::before {
content: '';
display: block;
width: 32px;
height: 3px;
background: var(--gold,#8B7355);
margin: 0 auto 20px;
}
.aura-accred-badge strong {
font-family: var(--display-font,'Cormorant Garamond',serif) !important;
font-size: 1.5rem !important;
font-weight: 300 !important;
color: var(--charcoal,#2C2825) !important;
letter-spacing: 0.04em;
line-height: 1;
margin-bottom: 8px;
display: block;
}
.aura-accred-badge span {
font-family: var(--body-font,'Inter',sans-serif) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: var(--gold,#8B7355) !important;
line-height: 1.4;
display: block;
}
.aura-accred-grid {
display: grid;
grid-template-columns: repeat(6,1fr);
gap: 2px;
}
@media (max-width:1100px) { .aura-accred-grid { grid-template-columns: repeat(3,1fr); gap:12px; } }
@media (max-width:640px) { .aura-accred-grid { grid-template-columns: repeat(2,1fr); gap:10px; } }
/* ═══════════════════════════════════════════
TREATMENT PAGE COMPONENTS
═══════════════════════════════════════════ */
.aura-check-list { display: flex; flex-direction: column; gap: 10px; }
.aura-check-item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--body-font) !important; font-size: 14px !important; color: var(--text-muted) !important; line-height: 1.6 !important; }
.aura-check { color: var(--gold); font-size: 0.5rem; flex-shrink: 0; margin-top: 6px; }
.aura-reviews-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.aura-review-card { background: #fff; padding: 26px 22px; border-top: 2px solid var(--gold-pale); }
.aura-review-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.aura-review-text { font-family: var(--body-font) !important; font-size: 14px !important; line-height: 1.8 !important; font-style: italic; color: var(--charcoal) !important; margin-bottom: 14px !important; }
.aura-review-author { font-family: var(--body-font) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 !important; }
/* ═══════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════ */
.aura-contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.aura-contact-info { padding: clamp(48px,5vw,80px) clamp(32px,4vw,64px); background: var(--cream-dark); }
.aura-contact-form { padding: clamp(48px,5vw,80px) clamp(32px,4vw,64px); background: var(--warm-white); }
.aura-contact-detail { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.aura-contact-detail-icon { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.aura-contact-detail-text { font-family: var(--body-font) !important; font-size: 14px !important; color: var(--text-muted) !important; line-height: 1.65 !important; }
.aura-contact-detail-text a { color: var(--gold) !important; text-decoration: none !important; }
/* ═══════════════════════════════════════════
FADE-UP ANIMATION
═══════════════════════════════════════════ */
/* Fade-up animation — JS adds .aura-fade-up--visible via IntersectionObserver */
html.js .aura-fade-up, body.js .aura-fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.58s ease, transform 0.58s ease; }
html.js .aura-stagger-1, body.js .aura-stagger-1 { transition-delay: 0.08s; }
html.js .aura-stagger-2, body.js .aura-stagger-2 { transition-delay: 0.16s; }
html.js .aura-stagger-3, body.js .aura-stagger-3 { transition-delay: 0.24s; }
html.js .aura-stagger-4, body.js .aura-stagger-4 { transition-delay: 0.32s; }
html.js .aura-stagger-5, body.js .aura-stagger-5 { transition-delay: 0.40s; }
/* When visible — added by IntersectionObserver */
.aura-fade-up--visible { opacity: 1 !important; transform: translateY(0) !important; }
/* No-JS fallback — always show */
html.no-js .aura-fade-up, body.no-js .aura-fade-up, .no-js .aura-fade-up { opacity: 1 !important; transform: none !important; }
/* Editor / admin — always show */
.wp-admin .aura-fade-up,
.editor-styles-wrapper .aura-fade-up { opacity: 1 !important; transform: none !important; }
/* ═══════════════════════════════════════════
FOOTER — complete, no conflicts
═══════════════════════════════════════════ */
.aura-footer {
background: var(--charcoal) !important;
padding-top: 64px; padding-bottom: 0;
}
.aura-footer .wp-block-column { min-width: 0; overflow: hidden; }
/* Links column — each link on its OWN line */
.aura-footer-links {
display: flex !important; flex-direction: column !important;
gap: 0 !important; flex-wrap: nowrap !important;
padding: 0 !important; margin: 0 !important; list-style: none !important;
}
.aura-footer-links a {
font-family: var(--body-font) !important;
font-size: 14px !important; font-weight: 400 !important;
color: rgba(255,255,255,0.55) !important;
text-decoration: none !important;
display: block !important;
padding: 6px 0 !important;
white-space: nowrap !important;
overflow: hidden !important; text-overflow: ellipsis !important;
transition: color 0.2s, padding-left 0.18s !important;
line-height: 1.5 !important;
}
.aura-footer-links a:hover {
color: var(--gold-pale) !important; padding-left: 5px !important;
}
/* Contact column */
.aura-footer-contact p {
font-family: var(--body-font) !important;
font-size: 14px !important; font-weight: 400 !important;
color: rgba(255,255,255,0.52) !important;
margin-bottom: 8px !important; line-height: 1.65 !important;
}
.aura-footer-contact a {
color: rgba(255,255,255,0.55) !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.aura-footer-contact a:hover { color: var(--gold-pale) !important; }
.aura-footer-hours { font-size: 13px !important; color: rgba(255,255,255,0.35) !important; margin-top: 10px !important; }
/* Bottom bar */
.aura-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08) !important;
padding: 20px clamp(28px,5vw,80px) !important;
margin-top: 48px;
}
.aura-footer-bar {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px 20px !important;
}
@media (max-width:768px) {
.aura-footer-bar { flex-direction: column; gap: 12px; text-align: center; }
.aura-footer-legal { justify-content: center; }
}
/* Copyright — clearly visible */
.aura-footer-bar p {
font-family: var(--body-font) !important;
font-size: 13px !important; font-weight: 400 !important;
color: rgba(255,255,255,0.55) !important;
margin: 0 !important; line-height: 1.5 !important;
}
/* Izolink link */
.aura-footer-bar a {
font-family: var(--body-font) !important;
color: var(--gold-pale) !important;
text-decoration: none !important; font-weight: 500 !important;
transition: color 0.2s !important;
}
.aura-footer-bar a:hover { color: #fff !important; }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.aura-treatments-grid { grid-template-columns: repeat(2,1fr); }
.aura-v3-treatment-grid { grid-template-columns: repeat(3,1fr); }
.aura-process-grid { grid-template-columns: repeat(2,1fr); }
.aura-values-grid { grid-template-columns: repeat(2,1fr); }
.aura-stats-row { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
:root { --header-h: 64px; }
.wp-site-blocks { padding-top: 64px !important; }
.aura-two-col-section,
.aura-split-cta,
.aura-hero-v2,
.aura-contact-grid { grid-template-columns: 1fr !important; }
.aura-col-img-wrap { max-height: 300px; }
.aura-two-col-content { padding: 36px 24px !important; }
.aura-testimonials-grid, .aura-v3-testimonials { grid-template-columns: 1fr !important; }
.aura-reviews-row { grid-template-columns: 1fr !important; }
.aura-treatments-grid, .aura-v3-treatment-grid { grid-template-columns: repeat(2,1fr) !important; }
.aura-instagram-placeholder-grid { grid-template-columns: repeat(3,1fr) !important; }
.aura-footer .wp-block-columns { flex-direction: column !important; }
.aura-footer .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
.aura-footer-bar { flex-direction: column !important; text-align: center !important; align-items: center !important; }
.aura-process-grid { grid-template-columns: 1fr !important; }
.aura-process-step { border-right: none; border-bottom: 1px solid rgba(139,115,85,0.12); }
/* Mega menu off on mobile */
.aura-nav-treatments .wp-block-navigation-submenu__container {
position: static !important; width: auto !important;
min-width: 0 !important; box-shadow: none !important; border-top: none !important;
}
}
@media (max-width: 500px) {
.aura-treatments-grid, .aura-v3-treatment-grid { grid-template-columns: 1fr !important; }
.aura-hero-buttons { flex-direction: column; }
.aura-btn-primary, .aura-btn-outline { text-align: center; }
}
/* ═══════════════════════════════════════════════════════
STATS STRIP — horizontal 4-column band
═══════════════════════════════════════════════════════ */
.aura-stats-strip .aura-stats-row,
.aura-stats-strip > .aura-stats-row {
display: grid !important;
grid-template-columns: repeat(4,1fr) !important;
gap: 0;
max-width: 1280px;
margin: 0 auto;
list-style: none;
padding: 0;
}
/* Stats strip rendered as flat divs (no wrapper .aura-stats-row) */
.aura-stats-strip .aura-stat-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 12px 20px !important;
border-right: 1px solid rgba(255,255,255,0.08);
}
.aura-stats-strip .aura-stat-item:last-child { border-right: none; }
.aura-stats-strip .aura-stat-item strong {
display: block;
font-family: var(--display-font) !important;
font-size: clamp(2rem,3.5vw,2.8rem) !important;
font-weight: 300 !important;
color: var(--gold-pale) !important;
line-height: 1;
margin-bottom: 6px;
letter-spacing: 0;
}
.aura-stats-strip .aura-stat-item span {
font-family: var(--body-font) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.5) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
.aura-stat-divider { display: none; } /* hide old dividers */
/* When stats strip renders without wrapper (direct children) */
.aura-stats-strip > .aura-stat-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 12px 20px !important;
border-right: 1px solid rgba(255,255,255,0.08) !important;
}
/* ═══════════════════════════════════════════════════════
PROCESS STEPS — 4-column horizontal
═══════════════════════════════════════════════════════ */
.aura-process-steps {
display: grid !important;
grid-template-columns: repeat(4,1fr) !important;
gap: 0;
}
.aura-process-step {
padding: 36px 32px !important;
border-right: 1px solid rgba(139,115,85,0.14) !important;
position: relative;
}
.aura-process-step:last-child { border-right: none !important; }
/* Connecting line between steps */
.aura-process-steps::after {
display: none; /* clean, no connector line */
}
.step-dot {
font-family: var(--display-font) !important;
font-size: 2.4rem !important;
font-weight: 300 !important;
color: var(--gold-pale) !important;
line-height: 1;
margin-bottom: 20px;
opacity: 0.7;
}
.step-title {
font-family: var(--body-font) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--charcoal) !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
}
.step-desc {
font-family: var(--body-font) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--text-muted) !important;
line-height: 1.75 !important;
margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════
TREATMENT CARDS — rounded buttons, no double arrow
═══════════════════════════════════════════════════════ */
.aura-treatment-card .card-link {
border-radius: 20px !important;
padding: 10px 22px !important;
}
/* Remove inline → arrow from HTML; keep only the CSS ::after arrow */
.aura-treatment-card .card-link {
font-size: 13px !important;
}
/* View All Treatments button */
.wp-block-button .wp-block-button__link,
.is-style-aura-outline .wp-block-button__link {
border-radius: 20px !important;
}
/* Gold filled buttons */
.wp-block-button.has-gold-background-color .wp-block-button__link,
.wp-block-button__link.has-gold-background-color {
border-radius: 20px !important;
}
/* All WP buttons get rounded */
.wp-element-button, .wp-block-button__link {
border-radius: 20px !important;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
/* Gold button hover: deepen + lift */
.wp-block-button__link.has-gold-background-color:hover,
.wp-element-button.has-gold-background-color:hover {
background-color: #6e5c44 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(139,115,85,0.3) !important;
}
/* Charcoal/dark button hover: gold */
.wp-block-button__link.has-charcoal-background-color:hover,
.wp-element-button.has-charcoal-background-color:hover {
background-color: var(--gold,#8B7355) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(44,40,37,0.25) !important;
}
/* Outline/ghost button hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--gold,#8B7355) !important;
color: #fff !important;
border-color: var(--gold,#8B7355) !important;
transform: translateY(-2px) !important;
}
/* Nav CTA Book Now */
.aura-nav-cta .wp-block-button__link:hover {
background-color: #6e5c44 !important;
transform: translateY(-1px) !important;
}
/* ═══════════════════════════════════════════════════════
EYEBROW TEXT — minimum 12px with proper Inter styling
═══════════════════════════════════════════════════════ */
.aura-eyebrow {
font-family: var(--body-font) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--gold) !important;
margin-bottom: 14px !important;
display: flex;
align-items: center;
gap: 10px;
}
.aura-eyebrow::before {
content: '';
width: 22px; height: 1px;
background: currentColor;
flex-shrink: 0;
}
.aura-eyebrow.center { justify-content: center; }
.aura-eyebrow.center::before { display: none; }
.aura-eyebrow.light { color: rgba(255,255,255,0.45) !important; }
/* ═══════════════════════════════════════════════════════
TESTIMONIAL CARDS — proper text sizing
═══════════════════════════════════════════════════════ */
.aura-testimonial-card {
background: var(--warm-white);
padding: 32px 28px;
border-top: 2px solid var(--gold-pale);
}
.aura-testimonial-card .stars {
color: var(--gold);
font-size: 15px;
letter-spacing: 2px;
margin-bottom: 14px;
}
.aura-testimonial-card .review-text {
font-family: var(--body-font) !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.85 !important;
color: var(--charcoal) !important; /* DARKER — was text-muted */
font-style: italic;
margin-bottom: 18px !important;
}
.aura-testimonial-card .reviewer-name {
font-family: var(--body-font) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
color: var(--charcoal) !important; /* DARKER */
margin-bottom: 2px !important;
text-transform: uppercase;
}
.aura-testimonial-card .reviewer-treatment {
font-family: var(--body-font) !important;
font-size: 13px !important;
color: var(--gold) !important;
margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════
PRICE LIST — items flush, price visible & semi-bold
═══════════════════════════════════════════════════════ */
/* Price teaser items (dark background) */
.aura-price-teaser [style*="justify-content:space-between"],
.aura-price-teaser div > div {
padding: 14px 20px !important;
}
.aura-price-teaser span:first-child {
font-family: var(--body-font) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(255,255,255,0.82) !important; /* DARKER */
}
.aura-price-teaser span:last-child {
font-family: var(--display-font) !important;
font-size: 1.15rem !important;
font-weight: 600 !important; /* SEMI-BOLD */
color: var(--gold-pale) !important;
white-space: nowrap;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════
TEXT READABILITY — make all light text 2 shades darker
═══════════════════════════════════════════════════════ */
/* Body text (was text-muted #7A7268 → #5C5650) */
.has-text-color[style*="text-muted"],
[style*="color:var(--wp--preset--color--text-muted)"],
.has-text-color[style*="#7A7268"] {
color: #5C5650 !important;
}
/* Generic muted text in patterns */
p[style*="rgba(255,255,255,0.45)"] { color: rgba(255,255,255,0.72) !important; }
p[style*="rgba(255,255,255,0.62)"] { color: rgba(255,255,255,0.80) !important; }
p[style*="rgba(255,255,255,0.42)"] { color: rgba(255,255,255,0.68) !important; }
/* Footer */
.aura-footer-links a { color: rgba(255,255,255,0.68) !important; }
.aura-footer-contact p { color: rgba(255,255,255,0.68) !important; }
.aura-footer-bar p { color: rgba(255,255,255,0.65) !important; }
/* ═══════════════════════════════════════════════════════
HAMBURGER — ONLY show on mobile, hide on desktop
═══════════════════════════════════════════════════════ */
/* WP shows the open button only below overlayMenu breakpoint.
Force it to stay hidden on large screens. */
.wp-block-navigation__responsive-container-open {
display: none !important;
}
@media (max-width: 781px) {
.wp-block-navigation__responsive-container-open {
display: flex !important;
}
/* Hide desktop nav items on mobile */
.aura-nav-primary > .wp-block-navigation__container {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════
OVERLAY COLOR HELPER — allows editor to set overlay tint
Add class to any Cover block in Site Editor → Advanced
═══════════════════════════════════════════════════════ */
/* Warm cream overlays */
.overlay-cream .wp-block-cover__background { background: rgba(250,248,244,0.55) !important; opacity: 1 !important; }
/* Gold tint overlay */
.overlay-gold .wp-block-cover__background { background: rgba(139,115,85,0.5) !important; opacity: 1 !important; }
/* Very light (show image prominently) */
.overlay-minimal .wp-block-cover__background { opacity: 0.15 !important; }
/* Standard (balanced) */
.overlay-balanced .wp-block-cover__background { opacity: 0.38 !important; }
/* Strong (text-heavy) */
.overlay-strong .wp-block-cover__background { opacity: 0.62 !important; }
/* Price row styles defined in PRICE TEASER & PRICELIST section above */
/* ═══════════════════════════════════════════════════════
OUTLINE BUTTON STYLE
═══════════════════════════════════════════════════════ */
.is-style-aura-outline .wp-block-button__link {
background: transparent !important;
color: var(--charcoal) !important;
border: 1.5px solid rgba(44,40,37,0.3) !important;
border-radius: 20px !important;
transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.is-style-aura-outline .wp-block-button__link:hover {
background: var(--charcoal) !important;
color: #fff !important;
border-color: var(--charcoal) !important;
}
/* Outline on dark bg */
.has-charcoal-background-color .is-style-aura-outline .wp-block-button__link,
[style*="background:var(--wp--preset--color--charcoal)"] .is-style-aura-outline .wp-block-button__link {
color: rgba(255,255,255,0.75) !important;
border-color: rgba(255,255,255,0.3) !important;
}
/* ═══════════════════════════════════════════════════════
MOBILE RESPONSIVE — stats & process steps stack
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.aura-stats-strip .aura-stat-item,
.aura-stats-strip > .aura-stat-item {
border-right: none !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.aura-stats-strip > .aura-stats-row {
grid-template-columns: repeat(2,1fr) !important;
}
.aura-process-steps {
grid-template-columns: 1fr !important;
}
.aura-process-step {
border-right: none !important;
border-bottom: 1px solid rgba(139,115,85,0.1) !important;
}
}
/* ═══════════════════════════════════════════════════════
FONT ENFORCEMENT — Inter everywhere, min 14px
Override any inline style="font-size:0.68rem" etc
═══════════════════════════════════════════════════════ */
/* Force Inter on all WP block elements */
.wp-block-group, .wp-block-columns, .wp-block-column,
.wp-block-cover, .wp-block-html,
.has-text-color, .has-background {
font-family: var(--body-font) !important;
}
/* Small font sizes in inline styles — bump up to 14px */
p[style*="0.68rem"],
p[style*="0.72rem"],
p[style*="0.74rem"],
p[style*="0.8rem"],
p[style*="0.82rem"],
p[style*="0.84rem"],
p[style*="0.88rem"],
span[style*="0.68rem"],
span[style*="0.74rem"] {
font-size: 13px !important; /* Still allow small labels, but not sub-12px */
}
/* But NOT headings — they use Cormorant and can be small */
h1[style*="0.68rem"],
h2[style*="0.68rem"] { font-size: inherit !important; }
/* All paragraph text minimum 14px */
.wp-block-group p:not(.aura-eyebrow):not([class*="eyebrow"]) {
font-size: 14px;
font-weight: 400;
line-height: 1.75;
}
/* ═══════════════════════════════════════════════════════
ADMIN — Star rating styling + Site Editor notice style
═══════════════════════════════════════════════════════ */
#il-stars {
user-select: none;
}
#il-stars .star {
font-size: 28px !important;
cursor: pointer;
transition: color 0.15s, transform 0.1s;
}
#il-stars .star:hover { transform: scale(1.1); }
/* ═══════════════════════════════════════════════════════
GENERAL SITE IMPROVEMENTS
═══════════════════════════════════════════════════════ */
/* Better link styling throughout */
.wp-block-group a:not(.wp-block-button__link):not(.card-link):not(.aura-footer-links a) {
color: var(--gold);
text-decoration: none;
transition: color 0.2s;
}
.wp-block-group a:not(.wp-block-button__link):not(.card-link):not(.aura-footer-links a):hover {
color: var(--charcoal);
}
/* Better hero image brightness for all covers */
.wp-block-cover__image-background {
filter: saturate(0.88) brightness(0.92);
}
/* Ensure headers on FSE pages always show above content */
.wp-site-blocks > header { z-index: 9990; position: relative; }
/* ═══════════════════════════════════════════════════════
BACK TO TOP BUTTON
═══════════════════════════════════════════════════════ */
.aura-back-to-top {
position: fixed;
bottom: 28px; right: 28px;
width: 42px; height: 42px;
background: var(--gold);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s, background 0.2s;
z-index: 999;
text-decoration: none;
box-shadow: 0 4px 16px rgba(139,115,85,0.3);
}
.aura-back-to-top.visible { opacity: 1; transform: translateY(0); }
.aura-back-to-top:hover { background: var(--charcoal); }
/* ═══════════════════════════════════════════════════════
NEW HEADER — custom mobile drawer, no WP overlay
═══════════════════════════════════════════════════════ */
/* Hide WP navigation overlay bar entirely */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.hidden-by-default,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
display: none !important;
}
/* ── Hide image captions globally — alt text must not show as caption ── */
.wp-block-image figcaption,
.wp-block-image .wp-element-caption,
figure.wp-block-image figcaption,
.aura-col-image figcaption,
.wp-block-image figcaption:empty { display: none !important; }
/* Desktop nav — visible only above 900px breakpoint */
@media (min-width: 901px) {
.aura-nav-desktop {
display: flex !important;
}
.aura-nav-desktop .wp-block-navigation__container {
display: flex !important;
align-items: center !important;
gap: 2px !important;
flex-wrap: nowrap !important;
}
}
/* At 900px and below: always hide desktop nav, always show hamburger */
@media (max-width: 900px) {
.aura-nav-desktop,
.aura-nav-primary,
nav.aura-nav-desktop,
.wp-block-navigation.aura-nav-desktop,
.wp-block-navigation.aura-nav-primary,
.aura-header .wp-block-navigation,
.aura-header .wp-block-navigation__container { display: none !important; }
.aura-hamburger-btn,
.aura-header .aura-hamburger-btn { display: flex !important; }
.aura-header-social { display: none !important; }
.aura-nav-cta { display: none !important; }
}
/* Show logo image; hide site-title text when logo image is set */
.aura-logo-img img { display: block; }
/* When no logo uploaded, show text title; when logo is there, hide text */
.aura-header-brand .wp-block-site-logo:has(img) + .aura-site-title-text { display: none; }
.aura-site-title-text .wp-block-site-title a {
font-family: var(--display-font) !important;
font-size: 1.42rem !important; font-weight: 400 !important;
color: var(--charcoal) !important; text-decoration: none !important;
letter-spacing: 0.02em; white-space: nowrap;
}
/* Header right zone */
.aura-header-right {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-shrink: 0 !important;
}
/* Social icons in header */
.aura-header-social {
display: flex;
align-items: center;
gap: 8px;
}
.aura-social-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important; height: 32px !important;
color: var(--text-muted) !important;
text-decoration: none !important;
border: 1px solid rgba(139,115,85,0.2) !important;
border-radius: 50% !important;
transition: color 0.18s, border-color 0.18s, background 0.18s !important;
}
.aura-social-link:hover {
color: var(--gold) !important;
border-color: var(--gold) !important;
background: rgba(139,115,85,0.06) !important;
}
.aura-social-link svg { display: block; flex-shrink: 0; }
/* Hide header social on small screens */
@media (max-width: 960px) {
.aura-header-social { display: none !important; }
}
/* ═══════════════════════════════════════════════════════
CUSTOM HAMBURGER BUTTON — mobile only
═══════════════════════════════════════════════════════ */
.aura-hamburger-btn {
display: none; /* Hidden on desktop */
flex-direction: column;
gap: 5px;
width: 36px; height: 36px;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.aura-hamburger-btn .aura-ham-bar {
display: block;
width: 22px; height: 2px;
background: var(--charcoal);
border-radius: 2px;
transform-origin: center;
transition: transform 0.26s ease, opacity 0.2s ease, width 0.2s ease;
}
.aura-hamburger-btn.is-open .aura-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aura-hamburger-btn.is-open .aura-ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.aura-hamburger-btn.is-open .aura-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Nav responsive rules now handled in 900px block above */
/* ═══════════════════════════════════════════════════════
CUSTOM MOBILE DRAWER
═══════════════════════════════════════════════════════ */
.aura-mobile-drawer {
position: fixed;
inset: 0;
z-index: 99990;
pointer-events: none;
visibility: hidden;
}
.aura-mobile-drawer.is-open {
pointer-events: all;
visibility: visible;
}
/* Overlay blur backdrop */
.aura-drawer-overlay {
position: absolute;
inset: 0;
background: rgba(30,24,20,0.52);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
}
.aura-mobile-drawer.is-open .aura-drawer-overlay { opacity: 1; }
/* Slide-in panel */
.aura-drawer-panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(320px, 88vw);
background: #fff;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.aura-drawer-panel::before {
content: '';
display: block; height: 3px; flex-shrink: 0;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-pale) 100%);
}
.aura-mobile-drawer.is-open .aura-drawer-panel { transform: translateX(0); }
/* Drawer header row */
.aura-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(139,115,85,0.1);
flex-shrink: 0;
}
.aura-drawer-brand {
font-family: var(--body-font) !important;
font-size: 11px; font-weight: 600;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-muted);
}
.aura-drawer-close {
background: none; border: none;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 16px; color: var(--text-muted);
transition: color 0.2s, transform 0.2s;
}
.aura-drawer-close:hover { color: var(--charcoal); transform: rotate(90deg); }
/* Drawer nav list */
.aura-drawer-nav {
list-style: none;
margin: 0; padding: 8px 0;
flex: 1; overflow-y: auto;
}
.aura-drawer-nav > li > a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px;
font-family: var(--body-font) !important;
font-size: 15px; font-weight: 500;
color: var(--charcoal); text-decoration: none;
border-left: 3px solid transparent;
transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.aura-drawer-nav > li > a:hover,
.aura-drawer-nav > li.open > a {
background: var(--cream-dark);
border-left-color: var(--gold);
color: var(--gold);
}
/* Sub-menu toggle arrow */
.aura-drawer-nav .has-submenu > a::after {
content: '›';
font-size: 18px; line-height: 1;
transition: transform 0.2s;
color: var(--text-muted);
}
.aura-drawer-nav .has-submenu.open > a::after { transform: rotate(90deg); }
/* Sub-menu */
.aura-drawer-sub {
list-style: none; margin: 0; padding: 0;
max-height: 0; overflow: hidden;
transition: max-height 0.28s ease;
background: var(--cream);
}
.aura-drawer-nav .has-submenu.open .aura-drawer-sub { max-height: 400px; }
.aura-drawer-sub a {
display: block;
padding: 10px 20px 10px 32px;
font-family: var(--body-font) !important;
font-size: 14px; font-weight: 400;
color: var(--charcoal-mid); text-decoration: none;
transition: color 0.14s, padding-left 0.14s;
}
.aura-drawer-sub a:hover { color: var(--gold); padding-left: 38px; }
/* Drawer footer CTA */
.aura-drawer-footer {
padding: 16px 20px;
border-top: 1px solid rgba(139,115,85,0.1);
flex-shrink: 0;
}
.aura-drawer-cta {
display: block;
width: 100%; padding: 13px;
background: var(--gold);
color: #fff !important;
text-align: center;
font-family: var(--body-font) !important;
font-size: 13px !important; font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border-radius: 20px;
transition: background 0.2s;
}
.aura-drawer-cta:hover { background: var(--charcoal) !important; }
/* ═══════════════════════════════════════════════════════
FOOTER SEPARATOR
═══════════════════════════════════════════════════════ */
.aura-footer-separator {
height: 1px;
background: rgba(139,115,85,0.15);
margin: 0;
display: block;
}
/* ═══════════════════════════════════════════════════════
HERO SOCIAL ICONS
═══════════════════════════════════════════════════════ */
.aura-hero-social-icon:hover {
border-color: var(--gold-pale) !important;
color: var(--gold-pale) !important;
background: rgba(212,196,168,0.1) !important;
}
/* ═══════════════════════════════════════════════════════
TESTIMONIALS — centered header
═══════════════════════════════════════════════════════ */
.aura-testimonials-header-centered {
text-align: center !important;
margin: 0 auto 48px !important;
max-width: 600px !important;
}
/* ═══════════════════════════════════════════════════════
LOGIN PAGE — extra polish to make inputs feel native
═══════════════════════════════════════════════════════ */
body.login #loginform {
/* Ensure the card doesn't inherit any WP positioning */
position: relative !important;
float: none !important;
}
/* Prevent "Welcome back" / "logged out" notices from breaking layout */
body.login .message,
body.login #login_error {
width: 380px !important;
max-width: calc(100vw - 48px) !important;
margin: 0 auto 12px !important;
box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════
BLOCK EDITOR — suppress "attempt recovery" trigger
This hides the invalid block notice in the editor
by targeting the pattern renderer which fails silently
═══════════════════════════════════════════════════════ */
/* NOTE: "Attempt recovery" appears because the homepage uses
wp:pattern blocks that WP's Gutenberg can't render in the
page editor. This is by design in FSE — patterns should be
edited in Appearance → Editor (Site Editor), not the page editor.
The notices are suppressed via the admin notice added in functions.php. */
/* ═══════════════════════════════════════════════════════
MOBILE CLEANUP
═══════════════════════════════════════════════════════ */
@media (max-width: 781px) {
/* Ensure header social icons are hidden on mobile — in drawer instead */
.aura-header-social { display: none !important; }
/* Prevent hero text overflow on mobile */
.aura-hero-fullbg .wp-block-cover__inner-container {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE OVERRIDES (from responsive-fixes.css)
Duplicated here as belt-and-braces fallback
═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) { .aura-header-social { display: none !important; } }
@media (max-width: 1024px) {
:root { --header-h: 68px; }
.wp-site-blocks { padding-top: 68px !important; }
.aura-nav-primary .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 13px !important; padding: 5px 8px !important; }
.aura-two-col-section .wp-block-columns { flex-direction: column !important; }
.aura-two-col-section .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
.aura-treatments-grid { grid-template-columns: repeat(2, 1fr) !important; }
.aura-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
.aura-process-steps { grid-template-columns: repeat(2, 1fr) !important; }
.aura-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
.aura-split-cta { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
:root { --header-h: 64px; }
.aura-nav-desktop { display: none !important; }
.aura-hamburger-btn { display: flex !important; }
.aura-header-social { display: none !important; }
/* Ensure Book Now button also hides at this breakpoint to save space */
.aura-nav-cta { display: none !important; }
.wp-block-columns:not(.aura-keep-cols) { flex-direction: column !important; }
.wp-block-column { flex-basis: 100% !important; min-width: 0 !important; }
.aura-hero-fullbg, .wp-block-cover.aura-hero-fullbg { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 640px) {
:root { --header-h: 60px; }
.wp-site-blocks { padding-top: 60px !important; }
/* FIX 1: Header padding on mobile — ensure logo/hamburger are properly spaced */
.aura-header {
padding: 0 16px !important;
height: 60px !important;
min-height: 60px !important;
}
/* FIX 3: Our Approach + What We Offer — add horizontal padding on mobile */
/* These sections use constrained layout or direct padding — override both */
.aura-about-intro,
.aura-about-intro .wp-block-group,
.aura-about-intro .wp-block-columns {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* What We Offer / Treatments grid section */
.wp-block-group[style*="background:var(--wp--preset--color--cream-dark)"],
.wp-block-group[class*="aura-"] > .wp-block-columns,
.wp-block-group > .wp-block-columns {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Global: any constrained group that uses clamp padding — enforce 16px min on mobile */
.wp-block-group[style*="clamp("],
.wp-block-group[style*="var(--wp--preset--spacing--section)"] {
padding-left: max(16px, 4vw) !important;
padding-right: max(16px, 4vw) !important;
}
/* Process steps, about grid, approach sections */
.aura-process-steps { padding-left: 0 !important; padding-right: 0 !important; }
.aura-process-step { border-right: none !important; border-bottom: 1px solid rgba(139,115,85,0.1) !important; padding: 28px 20px !important; }
.aura-process-steps { grid-template-columns: 1fr !important; }
/* Hero */
.aura-hero-fullbg, .wp-block-cover.aura-hero-fullbg {
padding-left: 20px !important; padding-right: 20px !important; min-height: 78vh !important;
}
.aura-hero-fullbg h1, .wp-block-cover.aura-hero-fullbg h1 {
font-size: clamp(2.1rem, 8vw, 2.8rem) !important; line-height: 1.08 !important;
}
/* FIX 4: Hero eyebrow "Wokingham · Berkshire" — make fully visible */
.aura-hero-fullbg p[style*="gold-pale"],
.wp-block-cover.aura-hero-fullbg p[style*="gold-pale"],
.wp-block-cover__inner-container p[style*="gold-pale"],
.wp-block-cover__inner-container .has-text-color[style*="gold-pale"] {
color: var(--gold-pale) !important;
opacity: 1 !important;
font-size: 0.72rem !important;
letter-spacing: 0.2em !important;
}
/* Grids all single column */
.aura-treatments-grid { grid-template-columns: 1fr !important; }
.aura-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
.aura-instagram-placeholder-grid { grid-template-columns: repeat(2, 1fr) !important; }
.aura-testimonials-grid, .aura-v3-testimonials { grid-template-columns: 1fr !important; }
.aura-reviews-row { grid-template-columns: 1fr !important; }
.aura-v3-treatment-grid { grid-template-columns: repeat(2, 1fr) !important; }
.aura-values-grid { grid-template-columns: 1fr !important; }
/* Footer stack */
.aura-footer .wp-block-columns { flex-direction: column !important; }
.aura-footer .wp-block-column { flex-basis: 100% !important; min-width: 0 !important; padding-bottom: 24px !important; }
.aura-footer-bar { flex-direction: column !important; text-align: center !important; gap: 6px !important; }
/* Pricelist */
.aura-price-row { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; }
.aura-price-row-price { font-size: 16px !important; min-width: auto !important; }
.aura-price-category h3 { font-size: 1.2rem !important; }
/* Contact form — stack */
.il-form-grid { grid-template-columns: 1fr !important; }
.il-contact-info-card { position: static !important; top: auto !important; }
.il-cic-block { padding: 16px 20px !important; }
/* Treatment sidebar stacks */
.aura-treatment-sidebar { position: static !important; top: auto !important; }
.aura-thm-item { padding: 10px 14px !important; }
.aura-treatment-hero-meta { flex-wrap: wrap !important; }
/* Split CTA */
.aura-split-cta { grid-template-columns: 1fr !important; }
.aura-split-cta .wp-block-column:first-child { display: none !important; }
/* Section padding */
.wp-block-group[style*="var(--wp--preset--spacing--section)"] {
padding-top: 52px !important; padding-bottom: 52px !important;
}
}
@media (max-width: 400px) {
.aura-header { padding: 0 14px !important; }
.aura-hero-fullbg h1 { font-size: 1.95rem !important; }
.aura-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
.aura-v3-treatment-grid { grid-template-columns: 1fr !important; }
.aura-treatments-grid { grid-template-columns: 1fr !important; }
}
/* ─── REVIEWS PAGE ─── */
.aura-reviews-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px;
}
.aura-review-card {
background: var(--cream,#FAF8F4);
padding: 28px;
display: flex;
flex-direction: column;
border-bottom: 3px solid transparent;
transition: border-color 0.2s, box-shadow 0.2s;
}
.aura-review-card:hover {
border-bottom-color: var(--gold,#8B7355);
box-shadow: 0 4px 24px rgba(44,40,37,0.08);
}
.aura-review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.aura-review-stars { color: var(--gold,#8B7355); font-size: 16px; letter-spacing: 2px; }
.aura-review-platform {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted,#5C5650);
background: var(--cream-dark,#F2EDE4);
padding: 4px 10px;
}
.aura-review-text {
font-size: 14px;
line-height: 1.8;
font-weight: 300;
color: var(--charcoal-mid,#4A4540);
font-style: italic;
flex: 1;
margin-bottom: 20px;
}
.aura-review-footer { margin-top: auto; }
.aura-reviewer-name {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: 1.05rem;
font-weight: 300;
color: var(--charcoal,#2C2825);
margin-bottom: 2px;
}
.aura-reviewer-treatment {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold,#8B7355);
font-weight: 600;
}
@media (max-width: 900px) { .aura-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .aura-reviews-grid { grid-template-columns: 1fr; } }
/* ─── SPLIT CTA FULL WIDTH ─── */
/* Force full viewport width regardless of parent container */
.aura-split-cta {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
/* ═══════════════════════════════════════════════════════
VERTICAL SOCIAL SIDEBAR — fixed right edge
Shows on desktop (≥1024px), hidden on mobile
═══════════════════════════════════════════════════════ */
.aura-social-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 999; /* Above page content, below overlays */
display: flex;
flex-direction: column;
align-items: flex-end;
}
/* Push down when wp-admin bar is showing */
.admin-bar .aura-social-sidebar {
top: calc(50% + 16px);
}
.aura-social-sidebar-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
/* Remove panel box — each icon is now its own circle */
background: transparent;
border: none;
box-shadow: none;
padding: 4px 8px;
}
.aura-social-sidebar-link {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: var(--wp--preset--color--gold, #8B7355) !important;
text-decoration: none !important;
border: 1px solid rgba(139,115,85,0.3);
border-radius: 50%;
background: rgba(253,252,250,0.92);
box-shadow: 0 1px 6px rgba(44,40,37,0.08);
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.aura-social-sidebar-link:last-child { border-bottom: none; }
.aura-social-sidebar-link:hover {
background: var(--wp--preset--color--gold, #8B7355) !important;
border-color: var(--wp--preset--color--gold, #8B7355) !important;
color: #ffffff !important;
box-shadow: 0 3px 12px rgba(139,115,85,0.3);
}
.aura-social-sidebar-link svg { display: block; pointer-events: none; width: 15px; height: 15px; }
/* Label strip — vertical text */
.aura-social-sidebar-label {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--charcoal,#2C2825);
padding: 16px 0;
user-select: none;
background: rgba(253,252,250,0.97);
border: 1px solid rgba(139,115,85,0.2);
border-right: none;
border-bottom: none;
}
@media (max-width: 1024px) {
.aura-social-sidebar { display: none !important; }
}
/* ── MOBILE HEADER SOCIAL STRIP ─────────────────────── */
/* Sits between hamburger and logo in mobile header */
.aura-mobile-header-social {
display: none;
align-items: center;
gap: 8px;
}
.aura-mobile-header-social a {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: var(--charcoal-mid,#4A4540) !important;
text-decoration: none !important;
transition: color 0.2s;
}
.aura-mobile-header-social a:hover { color: var(--gold,#8B7355) !important; }
@media (max-width: 900px) {
.aura-mobile-header-social { display: flex !important; }
}
/* ── HAMBURGER — 15–20% bigger ───────────────────────── */
.aura-hamburger-btn {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
}
.aura-ham-bar {
width: 24px !important;
height: 2px !important;
}
/* ─── TRANSPORT / GETTING HERE CARDS ─── */
.aura-transport-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 2px;
}
.aura-transport-card {
background: var(--cream-dark,#F2EDE4);
padding: 44px 28px 36px;
text-align: center;
transition: background 0.22s;
display: flex;
flex-direction: column;
align-items: center;
}
.aura-transport-card:hover { background: var(--warm-white,#FDFCFA); }
.aura-transport-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(139,115,85,0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: var(--gold,#8B7355);
transition: background 0.22s, color 0.22s;
}
.aura-transport-card:hover .aura-transport-icon {
background: var(--gold,#8B7355);
color: #fff;
}
.aura-transport-title {
font-family: var(--display-font,'Cormorant Garamond',serif) !important;
font-size: 1.15rem !important;
font-weight: 300 !important;
color: var(--charcoal,#2C2825) !important;
margin-bottom: 10px !important;
}
.aura-transport-desc {
font-size: 13.5px !important;
line-height: 1.8 !important;
color: var(--text-muted,#5C5650) !important;
font-weight: 300 !important;
}
@media (max-width: 900px) { .aura-transport-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .aura-transport-grid { grid-template-columns: 1fr; } }
/* ─── FOOTER LEGAL LINKS ─── */
.aura-footer-legal {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.aura-footer-legal a {
color: rgba(255,255,255,0.55) !important;
font-size: 12px !important;
text-decoration: none !important;
transition: color 0.2s;
}
.aura-footer-legal a:hover { color: var(--gold-pale,#D4C4A8) !important; }
.aura-footer-legal span { color: rgba(255,255,255,0.25); font-size: 10px; }
/* ─── TREATMENT CARD — editable wp:image block ─── */
/* When using wp:image blocks inside treatment cards */
.aura-treatment-card .card-image-block {
margin: 0 !important;
padding: 0 !important;
}
.aura-treatment-card .card-image-block img {
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
display: block !important;
}
.aura-treatments-grid-wrapper > div:first-child,
.aura-treatments-grid-wrapper .wp-block-html:first-child { display: contents; }
/* ─── ANS BOOKING EMBED ─── */
.aura-ans-embed {
width: 100%;
min-height: 700px;
border: 1px solid rgba(139,115,85,0.12);
background: var(--warm-white,#FDFCFA);
}
.aura-ans-embed iframe {
width: 100%;
min-height: 700px;
border: none;
display: block;
}
.aura-ans-redirect {
text-align: center;
padding: 60px 20px;
}
.aura-ans-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gold,#8B7355) !important;
color: #fff !important;
font-family: var(--body-font,'Inter',sans-serif) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
padding: 16px 40px !important;
border-radius: 2px !important;
border: none !important;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.aura-ans-btn:hover {
background: var(--charcoal,#2C2825) !important;
transform: translateY(-1px);
}
.aura-ans-note {
margin-top: 16px !important;
font-size: 13px !important;
color: var(--text-muted,#5C5650) !important;
}
.aura-ans-placeholder {
background: #fff8e7;
border: 2px dashed #e8a800;
padding: 24px;
border-radius: 4px;
font-family: var(--body-font,'Inter',sans-serif);
font-size: 14px;
color: #5a3e00;
}
.aura-ans-placeholder a {
color: var(--gold,#8B7355);
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════
TESTIMONIALS SECTION — Used on front-page & homepage-v2
═══════════════════════════════════════════════════════ */
.aura-testimonials-section {
background: var(--warm-white, #FDFCFA);
padding: clamp(64px,8vh,100px) clamp(24px,5vw,80px);
}
.aura-testimonials-inner {
max-width: 1240px;
margin: 0 auto;
}
.aura-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 900px) {
.aura-testimonials-grid { grid-template-columns: 1fr; gap: 20px; }
}
.aura-testimonial-card {
background: #fff;
border: 1px solid rgba(139,115,85,0.12);
border-top: 3px solid var(--gold,#8B7355);
padding: 32px 28px;
display: flex; flex-direction: column;
transition: box-shadow 0.2s, transform 0.2s;
}
.aura-testimonial-card:hover {
box-shadow: 0 8px 32px rgba(44,40,37,0.08);
transform: translateY(-3px);
}
.aura-tc-stars {
color: var(--gold,#8B7355);
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 16px;
}
.aura-tc-quote {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.05rem,1.5vw,1.2rem);
font-weight: 300;
font-style: italic;
line-height: 1.7;
color: var(--charcoal,#2C2825);
margin: 0 0 20px;
flex: 1;
border: none; padding: 0;
}
.aura-tc-author {
display: flex; flex-direction: column; gap: 3px;
padding-top: 16px;
border-top: 1px solid rgba(139,115,85,0.12);
}
.aura-tc-name {
font-family: var(--body-font,'Inter',sans-serif);
font-size: 13px; font-weight: 600;
color: var(--charcoal,#2C2825);
}
.aura-tc-treatment {
font-family: var(--body-font,'Inter',sans-serif);
font-size: 11px; font-weight: 400;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold,#8B7355);
}
/* ═══════════════════════════════════════════════════════
TREATMENTS PAGE — Full Treatment List
═══════════════════════════════════════════════════════ */
.aura-treatments-full-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: 48px;
}
@media (max-width: 960px) { .aura-treatments-full-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .aura-treatments-full-grid { grid-template-columns: 1fr; } }
.aura-treatment-full-card {
position: relative; overflow: hidden;
background: var(--cream-dark,#F2EDE4);
aspect-ratio: 4/3;
display: block; text-decoration: none;
}
.aura-treatment-full-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.aura-treatment-full-card:hover img { transform: scale(1.04); }
.aura-treatment-full-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(44,40,37,0.82) 0%, rgba(44,40,37,0.15) 55%, transparent 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 28px 24px;
transition: background 0.3s;
}
.aura-treatment-full-card:hover .aura-treatment-full-overlay {
background: linear-gradient(to top, rgba(44,40,37,0.9) 0%, rgba(44,40,37,0.3) 55%, transparent 100%);
}
.aura-tfc-num {
font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gold,#8B7355);
margin-bottom: 6px;
}
.aura-tfc-name {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.1rem,2vw,1.4rem);
font-weight: 300; color: #fff; line-height: 1.2;
margin-bottom: 8px;
}
.aura-tfc-desc {
font-size: 12px; font-weight: 300; line-height: 1.5;
color: rgba(255,255,255,0.75); margin-bottom: 14px;
}
.aura-tfc-link {
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--gold,#8B7355);
display: inline-flex; align-items: center; gap: 6px;
transition: gap 0.18s;
}
.aura-treatment-full-card:hover .aura-tfc-link { gap: 10px; }
/* CTA button on treatment cards — always visible, pill style */
.aura-tfc-cta-btn {
display: inline-block;
margin-top: 16px;
padding: 9px 22px;
font-family: var(--body-font,'Inter'), sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase;
color: #2C2825;
background: rgba(255,255,255,0.95);
border-radius: 24px;
border: 1.5px solid rgba(255,255,255,0.9);
transition: background 0.22s, color 0.22s, transform 0.18s, border-color 0.22s;
white-space: nowrap;
cursor: pointer;
}
.aura-treatment-full-card:hover .aura-tfc-cta-btn {
background: var(--gold,#8B7355);
color: #ffffff;
border-color: var(--gold,#8B7355);
transform: translateY(-2px);
}
/* ═══════════════════════════════════════════════════════
HOMEPAGE V3 — Rebuilt sections
═══════════════════════════════════════════════════════ */
/* Trust strip */
.aura-v3-trust-strip {
display: flex; align-items: center; justify-content: center;
gap: 0;
background: var(--charcoal,#2C2825);
padding: 20px clamp(24px,5vw,80px);
}
.aura-v3-trust-item {
display: flex; flex-direction: column; align-items: center;
padding: 0 clamp(24px,3vw,48px);
}
.aura-v3-trust-item strong {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 400;
color: var(--gold,#8B7355); display: block;
}
.aura-v3-trust-item span {
font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(255,255,255,0.55);
margin-top: 2px;
}
.aura-v3-trust-divider {
width: 1px; height: 36px;
background: rgba(255,255,255,0.12); flex-shrink: 0;
}
@media (max-width: 640px) {
.aura-v3-trust-strip { flex-wrap: wrap; gap: 16px; padding: 20px; }
.aura-v3-trust-divider { display: none; }
}
/* About split — true 50/50 */
.aura-v3-about-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 540px;
}
.aura-v3-about-img {
overflow: hidden;
position: relative;
}
.aura-v3-about-img img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
transition: transform 0.6s ease;
}
.aura-v3-about-split:hover .aura-v3-about-img img { transform: scale(1.03); }
.aura-v3-about-content {
background: var(--cream,#FAF8F4);
display: flex; flex-direction: column; justify-content: center;
padding: clamp(48px,6vw,88px) clamp(36px,5vw,72px);
}
.aura-v3-about-eyebrow {
font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold,#8B7355);
margin-bottom: 14px;
}
.aura-v3-about-heading {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.8rem,2.8vw,2.6rem);
font-weight: 300; line-height: 1.15;
color: var(--charcoal,#2C2825);
margin-bottom: 20px;
}
.aura-v3-about-heading em { font-style: italic; color: var(--gold,#8B7355); }
.aura-v3-about-body {
font-size: 0.93rem; line-height: 1.9; font-weight: 300;
color: var(--text-muted,#5C5650);
margin-bottom: 20px;
}
.aura-v3-about-points {
list-style: none; padding: 0; margin: 0 0 8px;
}
.aura-v3-about-points li {
font-size: 0.87rem; font-weight: 500;
color: var(--charcoal,#2C2825);
padding: 6px 0 6px 20px;
border-bottom: 1px solid rgba(139,115,85,0.1);
position: relative;
}
.aura-v3-about-points li::before {
content: '✦';
position: absolute; left: 0;
color: var(--gold,#8B7355); font-size: 8px; top: 9px;
}
@media (max-width: 768px) {
.aura-v3-about-split { grid-template-columns: 1fr; }
.aura-v3-about-img { min-height: 300px; }
}
/* V3 Treatments section */
.aura-v3-treatments-section {
background: var(--cream-dark,#F2EDE4);
padding: clamp(60px,8vh,96px) clamp(24px,5vw,80px);
}
.aura-v3-section-header {
text-align: center;
max-width: 600px; margin: 0 auto 48px;
}
.aura-v3-eyebrow-label {
font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold,#8B7355);
margin-bottom: 12px;
}
.aura-v3-section-title {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.9rem,3.5vw,2.8rem);
font-weight: 300; color: var(--charcoal,#2C2825);
margin-bottom: 14px;
}
.aura-v3-section-title em { font-style: italic; color: var(--gold,#8B7355); }
.aura-v3-section-sub {
font-size: 0.9rem; line-height: 1.8; font-weight: 300;
color: var(--text-muted,#5C5650);
}
.aura-v3-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1240px; margin: 0 auto;
}
@media (max-width: 900px) { .aura-v3-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .aura-v3-cards-grid { grid-template-columns: 1fr; } }
.aura-v3-tcard {
background: #fff;
text-decoration: none;
display: flex; flex-direction: column;
border-radius: 2px;
overflow: hidden;
transition: box-shadow 0.25s, transform 0.25s;
box-shadow: 0 2px 12px rgba(44,40,37,0.06);
}
.aura-v3-tcard:hover {
box-shadow: 0 10px 36px rgba(44,40,37,0.13);
transform: translateY(-4px);
}
.aura-v3-tcard-img {
overflow: hidden;
height: 200px;
}
.aura-v3-tcard-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.aura-v3-tcard:hover .aura-v3-tcard-img img { transform: scale(1.05); }
.aura-v3-tcard-body {
padding: 22px 20px 20px;
display: flex; flex-direction: column;
flex: 1;
}
.aura-v3-tcard-body h3 {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: 1.2rem; font-weight: 400;
color: var(--charcoal,#2C2825);
margin: 0 0 8px; line-height: 1.25;
}
.aura-v3-tcard-body p {
font-size: 0.83rem; line-height: 1.65; font-weight: 300;
color: var(--text-muted,#5C5650);
margin: 0 0 14px; flex: 1;
}
.aura-v3-tcard-link {
display: inline-block !important;
align-self: flex-start !important;
width: auto !important;
background: var(--wp--preset--color--gold, #8B7355);
color: #ffffff !important;
padding: 10px 22px;
border-radius: 24px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 14px;
transition: background 0.2s, transform 0.15s;
text-decoration: none !important;
}
.aura-v3-tcard:hover .aura-v3-tcard-link {
background: var(--wp--preset--color--charcoal, #2C2825) !important;
transform: translateY(-1px);
}
/* The card body must be flex-col so align-self works on the span */
.aura-v3-tcard-body {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* V3 CTA buttons */
.aura-v3-cta-btn {
display: inline-block;
padding: 13px 28px;
background: var(--gold,#8B7355); color: #fff;
font-family: var(--body-font,'Inter',sans-serif);
font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none;
border-radius: 20px;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
border: 2px solid var(--gold,#8B7355);
}
.aura-v3-cta-btn:hover {
background: #6e5c44; border-color: #6e5c44;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139,115,85,0.3);
}
.aura-v3-cta-btn.aura-v3-cta-outline {
background: transparent; color: var(--charcoal,#2C2825);
border-color: var(--charcoal,#2C2825);
}
.aura-v3-cta-btn.aura-v3-cta-outline:hover {
background: var(--charcoal,#2C2825); color: #fff;
box-shadow: 0 6px 20px rgba(44,40,37,0.2);
}
/* ═══════════════════════════════════════════════════════
HOMEPAGE V2 — Photo contained, top margin
═══════════════════════════════════════════════════════ */
/* Contained photo variant — not full-bleed, centred with padding */
.aura-hero-v2-photo--contained {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(32px,4vh,56px) clamp(20px,3vw,48px) clamp(32px,4vh,56px) 0;
background: var(--cream,#FAF8F4) !important;
}
.aura-hero-v2-photo--contained img {
position: static !important;
width: 100% !important; height: 100% !important;
max-height: 520px !important;
object-fit: cover !important;
object-position: center top !important;
border-radius: 2px !important;
box-shadow: 0 16px 48px rgba(44,40,37,0.14) !important;
display: block !important;
}
/* Top margin on hero for header clearance */
.aura-hero-v2 {
margin-top: 0;
padding-top: var(--header-h, 72px);
}
/* ═══════════════════════════════════════════════════════
TREATMENTS PAGE — Section wrapper
═══════════════════════════════════════════════════════ */
.aura-treatments-page-section {
background: var(--cream,#FAF8F4);
padding: clamp(48px,6vh,80px) 0 0;
}
.aura-treatments-page-inner {
max-width: 1440px; margin: 0 auto;
}
.aura-treatments-full-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
@media (max-width: 960px) { .aura-treatments-full-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .aura-treatments-full-grid { grid-template-columns: 1fr; } }
.aura-treatment-full-card {
position: relative; overflow: hidden;
background: var(--cream-dark,#F2EDE4);
aspect-ratio: 4/3;
display: block; text-decoration: none;
}
.aura-tfc-featured { grid-column: span 1; }
.aura-treatment-full-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
display: block;
}
.aura-treatment-full-card:hover img { transform: scale(1.05); }
.aura-treatment-full-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(44,40,37,0.85) 0%, rgba(44,40,37,0.2) 50%, transparent 100%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 28px 26px;
transition: background 0.3s;
}
.aura-treatment-full-card:hover .aura-treatment-full-overlay {
background: linear-gradient(to top, rgba(44,40,37,0.92) 0%, rgba(44,40,37,0.35) 55%, transparent 100%);
}
.aura-tfc-num {
font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gold,#8B7355);
margin-bottom: 6px;
}
.aura-tfc-name {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.1rem,2vw,1.5rem);
font-weight: 300; color: #fff; line-height: 1.2;
margin-bottom: 8px;
}
.aura-tfc-desc {
font-size: 12.5px; font-weight: 300; line-height: 1.55;
color: rgba(255,255,255,0.78); margin-bottom: 12px;
max-height: 0; overflow: hidden;
transition: max-height 0.3s ease, margin 0.3s;
}
.aura-treatment-full-card:hover .aura-tfc-desc { max-height: 80px; }
.aura-tfc-link {
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--gold,#8B7355);
display: inline-flex; align-items: center; gap: 6px;
transition: gap 0.2s, color 0.2s;
}
.aura-treatment-full-card:hover .aura-tfc-link { gap: 10px; color: #fff; }
/* CTA button on full-grid treatment cards — always visible */
.aura-treatments-full-grid .aura-tfc-cta-btn {
display: inline-block; margin-top: 14px; padding: 9px 20px;
font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; font-family: var(--body-font,'Inter'), sans-serif;
color: #2C2825; background: rgba(255,255,255,0.95);
border-radius: 24px; border: 1.5px solid rgba(255,255,255,0.9);
white-space: nowrap; transition: background 0.22s, color 0.22s, transform 0.18s;
}
.aura-treatments-full-grid .aura-treatment-full-card:hover .aura-tfc-cta-btn {
background: var(--gold,#8B7355); color: #fff;
border-color: var(--gold,#8B7355); transform: translateY(-2px);
}
/* CTA strip below treatments */
.aura-treatments-cta-strip {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
background: var(--charcoal,#2C2825);
padding: clamp(36px,4vw,56px) clamp(24px,5vw,80px);
}
.aura-treatments-cta-text h3 {
font-family: var(--display-font,'Cormorant Garamond',serif);
font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 300;
color: #fff; margin-bottom: 8px;
}
.aura-treatments-cta-text p {
font-size: 0.9rem; font-weight: 300; line-height: 1.8;
color: rgba(255,255,255,0.62); max-width: 520px;
}
.aura-treatments-cta-btn {
display: inline-block;
padding: 15px 36px; white-space: nowrap;
background: var(--gold,#8B7355); color: #fff;
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; text-decoration: none;
border-radius: 20px; flex-shrink: 0;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.aura-treatments-cta-btn:hover {
background: var(--gold-light,#B09A78);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139,115,85,0.35);
}
/* ═══════════════════════════════════════════════════════
ANS BOOKING PAGE
═══════════════════════════════════════════════════════ */
/* Trust strip */
.ans-trust-strip {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 0;
background: var(--charcoal,#2C2825);
padding: 16px clamp(20px,5vw,80px);
}
.ans-trust-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 24px;
font-family: var(--body-font,'Inter'),sans-serif;
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: rgba(255,255,255,0.8);
}
.ans-trust-icon { color: var(--gold,#8B7355); font-size: 14px; }
.ans-trust-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.1); }
/* Booking wrapper */
.ans-booking-wrapper { max-width: 1040px; margin: 0 auto; }
.ans-booking-intro { margin-bottom: 36px; }
/* iframe wrapper */
.ans-method-block {
background: #fff;
border: 1px solid rgba(139,115,85,0.15);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(44,40,37,0.08);
}
/* Methods section */
.ans-methods-section { max-width: 1040px; margin: 0 auto; }
.ans-method-card {
background: var(--warm-white,#FDFCFA);
border: 1px solid rgba(139,115,85,0.15);
border-radius: 4px; overflow: hidden;
margin-bottom: 40px;
box-shadow: 0 2px 12px rgba(44,40,37,0.06);
}
.ans-method-label {
font-family: var(--body-font,'Inter'),sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; padding: 10px 20px;
}
.ans-label-recommended {
background: var(--gold,#8B7355); color: #fff;
}
.ans-label-alt {
background: var(--cream-dark,#F2EDE4); color: var(--charcoal-mid,#4A4540);
}
.ans-method-desc {
padding: 16px 20px; font-size: 13px; line-height: 1.75;
color: var(--text-muted,#5C5650); border-bottom: 1px solid rgba(139,115,85,0.1);
}
.ans-method-desc code {
background: rgba(139,115,85,0.08); padding: 2px 6px;
border-radius: 3px; font-size: 12px; font-family: monospace;
}
.ans-code-block {
background: #2C2825; padding: 18px 20px; overflow-x: auto;
}
.ans-code-block code {
font-family: 'Courier New',monospace; font-size: 12px;
line-height: 1.7; color: rgba(212,196,168,0.92); white-space: pre;
}
.ans-method-preview {
padding: 0; background: #f8f6f2;
}
.ans-method-note {
background: rgba(139,115,85,0.06); border: 1px solid rgba(139,115,85,0.2);
border-left: 4px solid var(--gold,#8B7355);
border-radius: 0 4px 4px 0;
padding: 16px 20px; font-size: 13px; line-height: 1.75;
color: var(--charcoal-mid,#4A4540); margin-top: 8px;
}
/* Reassurance grid */
.ans-reassurance-grid {
display: grid; grid-template-columns: repeat(4,1fr); gap: 2px;
background: rgba(139,115,85,0.08);
}
.ans-reassure-item {
background: var(--warm-white,#FDFCFA);
padding: 36px 28px; text-align: center;
}
.ans-reassure-icon {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(139,115,85,0.1);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px; color: var(--gold,#8B7355);
}
.ans-reassure-item h3 {
font-family: var(--body-font,'Inter'),sans-serif !important;
font-size: 15px !important; font-weight: 600 !important;
color: var(--charcoal,#2C2825) !important; margin-bottom: 10px !important;
}
.ans-reassure-item p {
font-size: 14px !important; line-height: 1.75 !important;
color: var(--text-muted,#5C5650) !important; font-weight: 300 !important;
}
@media (max-width: 900px) {
.ans-trust-divider { display: none; }
.ans-trust-strip { gap: 4px 0; padding: 12px 16px; }
.ans-trust-item { padding: 6px 14px; font-size: 11px; }
.ans-reassurance-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
.ans-reassurance-grid { grid-template-columns: 1fr; }
.ans-trust-strip { flex-direction: column; gap: 4px; padding: 14px 16px; }
}
/* ═══════════════════════════════════════════════════════
TREATMENTS PAGE — Stats strip + full card grid
═══════════════════════════════════════════════════════ */
.aura-treatments-stats-strip {
display: flex; align-items: center; justify-content: center;
background: var(--charcoal,#2C2825);
padding: 20px clamp(20px,5vw,80px);
gap: 0; flex-wrap: wrap;
}
.aura-tstat-item {
display: flex; flex-direction: column; align-items: center;
padding: 8px 40px; text-align: center;
}
.aura-tstat-num {
font-family: var(--display-font,'Cormorant Garamond'),serif;
font-size: 1.8rem; font-weight: 300; line-height: 1;
color: var(--gold-pale,#D4C4A8); margin-bottom: 4px;
}
.aura-tstat-label {
font-family: var(--body-font,'Inter'),sans-serif;
font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.aura-tstat-div {
width: 1px; height: 36px; background: rgba(255,255,255,0.1);
flex-shrink: 0;
}
/* Full treatment grid — 3 cols using same aura-treatment-card component */
.aura-treatments-grid--full {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 3px !important;
background: rgba(139,115,85,0.08) !important;
padding: 0 clamp(20px,4vw,60px) !important;
}
@media (max-width: 900px) {
.aura-tstat-div { display: none; }
.aura-tstat-item { padding: 8px 20px; }
.aura-treatments-grid--full { grid-template-columns: repeat(2,1fr) !important; padding: 0 20px !important; }
}
@media (max-width: 560px) {
.aura-treatments-stats-strip { flex-direction: column; gap: 4px; padding: 16px; }
.aura-tstat-item { padding: 4px 20px; }
.aura-treatments-grid--full { grid-template-columns: 1fr !important; padding: 0 16px !important; }
}
/* ═══════════════════════════════════════════════════════
v1.3.6 COMPREHENSIVE FIXES
Issues 1–15 CSS layer
═══════════════════════════════════════════════════════ */
/* ── Issue 3 / 6: Figcaption hide + hero outline button white ── */
.wp-block-image figcaption,
.wp-block-image .wp-element-caption,
figure.wp-block-image figcaption,
.aura-col-image figcaption,
.wp-block-image figcaption:empty,
.wp-block-image .wp-caption-text { display: none !important; }
/* Hero outline button — always white text regardless of WP stripping inline color */
.aura-hero-fullbg .wp-block-button.is-style-outline .wp-block-button__link,
.aura-hero-fullbg .wp-block-button.is-style-outline a,
.aura-hero-outline-btn,
.aura-hero-fullbg .wp-block-buttons .wp-block-button:last-child .wp-block-button__link {
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.65) !important;
background: transparent !important;
}
.aura-hero-fullbg .wp-block-button.is-style-outline .wp-block-button__link:hover,
.aura-hero-outline-btn:hover {
background: rgba(255,255,255,0.1) !important;
border-color: rgba(255,255,255,0.9) !important;
color: #ffffff !important;
}
/* ── Issue 5: Prevent social icon duplication — only ONE instance shown ── */
/* Hide any extra .aura-header-social injected outside header-right */
body > .aura-header-social,
/* body > .aura-mobile-header-social — removed: JS teleport moves this into header-right */
/* Desktop: show social in header-right; mobile: hide */
@media (min-width: 961px) {
.aura-header-right .aura-header-social { display: flex !important; }
}
@media (max-width: 960px) {
.aura-header-right .aura-header-social { display: none !important; }
}
/* ── Issue 7: Prevent WP from stripping cover block padding on save ── */
/* This ensures section padding is preserved via CSS even if inline styles are stripped */
.aura-about-intro, .wp-block-group.aura-about-intro {
padding-top: var(--section,80px) !important;
padding-bottom: var(--section,80px) !important;
}
/* ── Issue 13: Logo size — consistent across all pages including front-page ── */
.aura-header .wp-block-site-logo img,
.home .aura-header .wp-block-site-logo img,
.front-page .aura-header .wp-block-site-logo img {
width: 70px !important;
height: 70px !important;
object-fit: contain !important;
}
.aura-header.scrolled .wp-block-site-logo img,
.home .aura-header.scrolled .wp-block-site-logo img {
width: 46px !important;
height: 46px !important;
}
/* Header top padding so logo has breathing room */
.aura-header {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* ── Issue 14: Active nav item colour ── */
.aura-nav-primary .current-menu-item > .wp-block-navigation-item__content,
.aura-nav-primary .current-menu-item > a,
.aura-nav-primary .current-page-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.aura-header .wp-block-navigation-item.current-menu-item > a,
.aura-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
color: var(--gold,#8B7355) !important;
}
.aura-nav-primary .current-menu-item > .wp-block-navigation-item__content::after,
.aura-nav-primary .current-menu-item > a::after {
content: '' !important;
position: absolute !important;
bottom: -2px !important;
left: 0 !important;
width: 100% !important;
height: 2px !important;
background: var(--gold,#8B7355) !important;
border-radius: 1px !important;
}
/* ── Issue 15: V2 homepage buttons — gold, rounded ── */
.aura-btn-v2-primary {
background: var(--gold,#8B7355) !important;
color: #ffffff !important;
border-radius: 24px !important;
border: none !important;
text-decoration: none !important;
}
.aura-btn-v2-primary:hover {
background: #7A6244 !important;
color: #ffffff !important;
transform: translateY(-1px);
}
.aura-btn-v2-outline {
background: transparent !important;
color: var(--charcoal,#2C2825) !important;
border: 1.5px solid rgba(139,115,85,0.5) !important;
border-radius: 24px !important;
text-decoration: none !important;
}
.aura-btn-v2-outline:hover {
border-color: var(--gold,#8B7355) !important;
color: var(--gold,#8B7355) !important;
background: rgba(139,115,85,0.06) !important;
}
/* V2 hero title line-break enforcement */
.aura-hero-v2-title {
white-space: pre-line !important;
}
/* ── Reviews page: improved platform badges ── */
.aura-reviews-platform-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(44,40,37,0.08);
}
.aura-reviews-platform-card {
background: #fff;
padding: 32px 24px;
text-align: center;
border-right: 1px solid rgba(139,115,85,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.aura-reviews-platform-card:last-child { border-right: none; }
.aura-reviews-platform-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(44,40,37,0.1); }
.aura-reviews-platform-card.is-featured { background: var(--gold,#8B7355); }
.aura-platform-stars { font-size: 1.6rem; margin-bottom: 8px; line-height: 1; }
.aura-platform-score {
font-family: var(--display-font,'Cormorant Garamond'),serif;
font-size: 2.2rem; font-weight: 300; line-height: 1;
color: var(--charcoal,#2C2825); margin-bottom: 4px;
}
.aura-reviews-platform-card.is-featured .aura-platform-score { color: #fff; }
.aura-platform-name {
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
font-weight: 600; color: var(--text-muted,#5C5650); margin-bottom: 3px;
}
.aura-reviews-platform-card.is-featured .aura-platform-name { color: rgba(255,255,255,0.8); }
.aura-platform-count { font-size: 11px; color: var(--text-muted,#5C5650); font-weight: 300; }
.aura-reviews-platform-card.is-featured .aura-platform-count { color: rgba(255,255,255,0.7); }
@media (max-width: 700px) {
.aura-reviews-platform-grid { grid-template-columns: repeat(2,1fr); }
.aura-reviews-platform-card { border-right: none; border-bottom: 1px solid rgba(139,115,85,0.1); }
}
@media (max-width: 420px) {
.aura-reviews-platform-grid { grid-template-columns: 1fr; }
}
/* ── Reviews CTA section ── */
.aura-reviews-cta-section {
text-align: center;
margin-top: 72px;
padding: 56px clamp(24px,5vw,80px);
background: var(--cream-dark,#F2EDE4);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.aura-reviews-cta-section::before {
content: '★★★★★';
position: absolute; top: -10px; right: 40px;
font-size: 5rem; opacity: 0.04; color: var(--gold,#8B7355);
pointer-events: none; line-height: 1;
}
.aura-reviews-cta-section h3 {
font-family: var(--display-font,'Cormorant Garamond'),serif;
font-size: clamp(1.6rem,2.5vw,2.2rem); font-weight: 300;
color: var(--charcoal,#2C2825); margin-bottom: 10px;
}
.aura-reviews-cta-section p {
font-size: 0.9rem; color: var(--text-muted,#5C5650);
font-weight: 300; margin-bottom: 28px; line-height: 1.8;
}
.aura-reviews-cta-btns {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.aura-reviews-cta-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: var(--gold,#8B7355); color: #fff !important;
padding: 13px 28px; font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none !important;
border-radius: 24px; transition: background 0.2s, transform 0.15s;
}
.aura-reviews-cta-btn-primary:hover { background: #7A6244; transform: translateY(-1px); }
.aura-reviews-cta-btn-outline {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--charcoal,#2C2825) !important;
border: 1.5px solid rgba(44,40,37,0.25); padding: 12px 28px;
font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none !important;
border-radius: 24px; transition: border-color 0.2s, color 0.2s;
}
.aura-reviews-cta-btn-outline:hover {
border-color: var(--gold,#8B7355); color: var(--gold,#8B7355) !important;
}
/* ── Admin icon gap ultra-fix ── */
#adminmenu li.menu-top > a.menu-top {
display: flex !important;
align-items: center !important;
flex-direction: row !important;
}
#adminmenu .wp-menu-image,
#adminmenu .wp-menu-image.svg {
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 26px !important;
min-width: 26px !important;
max-width: 26px !important;
margin-right: 0 !important;
padding: 0 !important;
}
#adminmenu .wp-menu-image::before,
#adminmenu .wp-menu-image.svg::before {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
font-size: 14px !important;
}
#adminmenu .wp-menu-name {
padding-left: 4px !important;
margin-left: 0 !important;
}
/* ── Native block treatment card grid (front-page) ── */
.aura-treatments-grid-wrap { margin-top: 44px !important; }
.aura-treatments-grid-row.wp-block-columns {
gap: 3px !important;
margin-bottom: 3px !important;
align-items: stretch !important;
}
/* Each column = one card */
.wp-block-column.aura-treatment-card {
background: #fff;
display: flex !important;
flex-direction: column !important;
overflow: hidden;
transition: box-shadow 0.22s, transform 0.22s;
cursor: default;
padding: 0 !important;
}
.wp-block-column.aura-treatment-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 36px rgba(44,40,37,0.12);
z-index: 2;
}
/* Card image */
.wp-block-column.aura-treatment-card .card-image.wp-block-image {
margin: 0 !important;
overflow: hidden;
line-height: 0;
}
.wp-block-column.aura-treatment-card .card-image.wp-block-image img {
width: 100% !important;
height: 240px !important;
object-fit: cover !important;
transition: transform 0.4s;
display: block;
aspect-ratio: unset !important;
}
.wp-block-column.aura-treatment-card:hover .card-image.wp-block-image img {
transform: scale(1.04);
}
/* Card body */
.wp-block-column.aura-treatment-card .card-body.wp-block-group {
padding: 24px 22px 22px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
/* Card number */
.wp-block-column.aura-treatment-card .card-body .card-num {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
color: var(--gold,#8B7355) !important;
margin: 0 0 10px !important;
opacity: 0.8;
}
/* Card title */
.wp-block-column.aura-treatment-card .card-body .card-name {
font-family: var(--display-font,'Cormorant Garamond'),serif !important;
font-size: 1.22rem !important;
font-weight: 400 !important;
color: var(--charcoal,#2C2825) !important;
line-height: 1.3 !important;
margin: 0 0 10px !important;
}
/* Card description */
.wp-block-column.aura-treatment-card .card-body .card-desc {
font-size: 0.82rem !important;
line-height: 1.7 !important;
color: var(--text-muted,#5C5650) !important;
font-weight: 300 !important;
margin: 0 0 16px !important;
flex: 1 !important;
}
/* Card link button */
.wp-block-column.aura-treatment-card .card-body .card-link {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--gold,#8B7355) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
margin-top: auto !important;
}
.wp-block-column.aura-treatment-card .card-body .card-link:hover {
color: var(--charcoal,#2C2825) !important;
}
/* Override WP column defaults for grid layout */
.aura-treatments-grid-row .wp-block-column { margin: 0 !important; }
@media (max-width: 900px) {
.aura-treatments-grid-row.wp-block-columns { flex-wrap: wrap !important; }
.aura-treatments-grid-row .wp-block-column { min-width: calc(50% - 2px) !important; }
}
@media (max-width: 560px) {
.aura-treatments-grid-row .wp-block-column { min-width: 100% !important; }
}
/* ── Price list category navigation — pill style, max-width contained ── */
.aura-price-cat-nav {
background: transparent;
position: sticky;
top: var(--header-h, 72px);
z-index: 100;
padding: 20px clamp(24px, 5vw, 80px) 0;
}
.aura-price-cat-nav-inner {
display: flex;
gap: 8px;
flex-wrap: wrap;
overflow-x: auto;
scrollbar-width: none;
max-width: 900px;
margin: 0 auto;
padding: 14px 20px;
background: var(--cream-dark, #F2EDE4);
border-radius: 12px;
border: 1px solid rgba(139,115,85,0.12);
box-shadow: 0 2px 12px rgba(44,40,37,0.06);
margin-bottom: 32px;
}
.aura-price-cat-nav-inner::-webkit-scrollbar { display: none; }
.aura-price-cat-nav-link {
display: inline-flex;
align-items: center;
padding: 8px 18px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted, #5C5650) !important;
text-decoration: none !important;
border-radius: 24px;
border: 1.5px solid transparent;
transition: color 0.18s, background 0.18s, border-color 0.18s;
white-space: nowrap;
}
.aura-price-cat-nav-link:hover,
.aura-price-cat-nav-link.is-active {
color: var(--gold, #8B7355) !important;
background: rgba(139,115,85,0.08);
border-color: rgba(139,115,85,0.28);
}
@media (max-width: 768px) {
.aura-price-cat-nav { padding: 12px 16px 0; }
.aura-price-cat-nav-inner { padding: 10px 12px; gap: 6px; border-radius: 10px; }
.aura-price-cat-nav-link { padding: 6px 12px; font-size: 9.5px; }
}
/* ═══════════════════════════════════════════════════════════════
v1.3.7 FIXES
═══════════════════════════════════════════════════════════════ */
/* ── FIX: Hero V1 heading — prevent "Medically" and "refined" splitting
The heading reads: Medically refined
aesthetic care
On screens wider than ~1200px the font hits its max (4.4rem ≈ 70px)
and the 680px container cannot fit both words. We reduce the cap
and use white-space:nowrap on a wrapper span so "Medically refined"
always stays on the same line across ALL screen sizes. */
.aura-hero-fullbg h1,
.wp-block-cover.aura-hero-fullbg h1 {
font-size: clamp(2.4rem, 4.2vw, 3.8rem) !important;
line-height: 1.08 !important;
word-break: keep-all !important;
}
/* Nowrap wrapper — set in front-page.html via .aura-hero-h1-nowrap span */
.aura-hero-h1-nowrap { white-space: nowrap !important; }
/* ── FIX: Split CTA section — ensure dark column bg & padding never lost on save */
.aura-split-cta {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
min-height: 420px !important;
align-items: stretch !important;
}
.aura-split-cta > .wp-block-column {
margin: 0 !important;
}
.aura-split-cta-dark {
background-color: var(--wp--preset--color--charcoal, #2C2825) !important;
padding: clamp(56px,7vw,88px) clamp(40px,5vw,72px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-self: stretch !important;
/* Ensure the column itself is a flex container so content centres */
min-height: 420px;
}
/* Force the columns wrapper to equal height children */
.aura-split-cta.wp-block-columns {
align-items: stretch !important;
}
.aura-split-cta > .wp-block-column {
align-self: stretch !important;
}
/* The cover image must fill its container completely */
.aura-split-cta-img > .wp-block-cover {
height: 100% !important;
min-height: 100% !important;
position: absolute !important;
top: 0; left: 0; right: 0; bottom: 0;
}
.aura-split-cta-img {
position: relative !important;
overflow: hidden !important;
min-height: 420px !important;
}
.aura-split-cta-dark .wp-block-heading { color: #ffffff !important; }
.aura-split-cta-dark .wp-block-paragraph { color: rgba(255,255,255,0.65) !important; }
.aura-split-cta-dark .wp-block-buttons .wp-block-button.aura-btn-primary .wp-block-button__link {
background-color: var(--gold, #8B7355) !important;
color: #ffffff !important;
border-radius: 24px !important;
padding: 14px 28px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.aura-split-cta-dark .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: rgba(255,255,255,0.85) !important;
border: 1.5px solid rgba(255,255,255,0.38) !important;
border-radius: 24px !important;
padding: 13px 28px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.aura-split-cta-dark .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
color: #ffffff !important;
border-color: rgba(255,255,255,0.65) !important;
background: rgba(255,255,255,0.07) !important;
}
.aura-split-cta-img { overflow: hidden !important; min-height: 420px !important; }
.aura-split-cta-img .wp-block-cover,
.aura-split-cta-img .wp-block-cover__image-background {
min-height: 100% !important;
height: 100% !important;
}
@media (max-width: 768px) {
.aura-split-cta {
flex-direction: column !important;
}
.aura-split-cta > .wp-block-column { flex-basis: 100% !important; }
.aura-split-cta-img { display: none !important; }
.aura-split-cta-dark {
padding: 52px 24px !important;
}
}
/* ── FIX: V2/V3 hero — force proper stacking on actual mobile devices.
With viewport meta now correctly set (width=device-width,initial-scale=1),
these breakpoints should fire correctly on real phones/tablets. */
@media (max-width: 900px) {
/* V2 hero: text panel above, photo below */
.aura-hero-v2 {
display: grid !important;
grid-template-columns: 1fr !important;
min-height: auto !important;
}
.aura-hero-v2-panel { order: 1; }
.aura-hero-v2-photo {
order: 2;
min-height: 320px !important;
height: 42vw !important;
max-height: 360px !important;
}
/* V3 hero: single col */
.aura-hero-v3 .wp-block-cover__inner-container {
padding: 80px 24px 48px !important;
}
}
@media (max-width: 640px) {
.aura-hero-v2-content { padding: 60px 20px 40px !important; }
.aura-hero-v2-photo {
min-height: 240px !important;
height: 60vw !important;
max-height: 280px !important;
}
.aura-hero-v2-title {
font-size: clamp(1.9rem, 7vw, 2.6rem) !important;
line-height: 1.1 !important;
}
.aura-hero-v2-btns { flex-direction: column !important; gap: 10px !important; }
.aura-btn-v2-primary, .aura-btn-v2-outline {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
}
/* ── FIX: Treatments page — ensure heading and grid display correctly */
.aura-treatments-page-header { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.aura-treatments-page-header h1 {
font-family: var(--display-font, 'Cormorant Garamond', serif);
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 2.8rem);
color: var(--charcoal, #2C2825);
margin: 10px 0 16px;
}
.aura-treatments-page-header p {
font-size: 0.95rem;
line-height: 1.9;
color: var(--text-muted, #5C5650);
}
/* ── FIX: Ensure editor block validation labels don't show on front-end */
.aura-editor-label { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
v1.4.0 ADDITIONS
═══════════════════════════════════════════════════════════════ */
/* ── Pricelist: breathing room above Book Consultation button ── */
.aura-price-intro .wp-block-buttons { margin-top: 36px !important; }
/* ── CTA split: outline button on dark background ── */
.aura-split-cta-dark .wp-block-button.is-style-outline .wp-block-button__link {
color: rgba(255,255,255,0.85) !important;
border-color: rgba(255,255,255,0.38) !important;
background: transparent !important;
border-width: 1.5px !important;
border-style: solid !important;
}
.aura-split-cta-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
color: #ffffff !important;
border-color: rgba(255,255,255,0.65) !important;
background: rgba(255,255,255,0.07) !important;
}
/* Consistent 24px radius on all CTA buttons */
.aura-split-cta-dark .wp-block-buttons .wp-block-button__link { border-radius: 24px !important; }
/* ── Legal pages typography ── */
.aura-legal-content {
max-width: 780px; margin: 0 auto;
padding: clamp(48px,7vw,96px) clamp(24px,5vw,60px);
font-size: 0.95rem; line-height: 1.9; color: var(--text-muted, #5C5650);
}
.aura-legal-content h2 {
font-family: var(--wp--preset--font-family--cormorant);
font-size: clamp(1.5rem,2.5vw,1.9rem); font-weight: 300;
color: var(--charcoal, #2C2825); margin: 48px 0 16px;
padding-bottom: 10px; border-bottom: 1px solid rgba(139,115,85,0.15);
}
.aura-legal-content h3 {
font-size: 0.87rem; font-weight: 700; letter-spacing: 0.05em;
color: var(--charcoal, #2C2825); margin: 28px 0 8px; text-transform: uppercase;
}
.aura-legal-content p { margin-bottom: 16px; }
.aura-legal-content ul, .aura-legal-content ol { padding-left: 24px; margin-bottom: 16px; }
.aura-legal-content li { margin-bottom: 8px; }
.aura-legal-content a { color: var(--gold, #8B7355); text-decoration: underline; }
.aura-legal-last-updated {
font-size: 0.8rem; color: rgba(92,86,80,0.6); letter-spacing: 0.05em;
margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(139,115,85,0.12);
}
.aura-legal-content table { width: 100%; border-collapse: collapse; font-size: 0.87rem; margin-bottom: 24px; }
.aura-legal-content th { text-align: left; padding: 10px 12px; font-weight: 700; border-bottom: 2px solid rgba(139,115,85,0.2); }
.aura-legal-content td { padding: 10px 12px; border-bottom: 1px solid rgba(139,115,85,0.1); }
/* ── Treatment card: Explore link button text visibility ── */
.aura-treatment-card .wp-block-button.is-style-link .wp-block-button__link,
.aura-treatment-card .wp-block-button.is-style-link a,
.aura-treatment-card .card-link {
color: var(--gold, #8B7355) !important;
text-decoration: none !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.aura-treatment-card .wp-block-button.is-style-link .wp-block-button__link:hover,
.aura-treatment-card .card-link:hover {
color: var(--charcoal, #2C2825) !important;
letter-spacing: 0.16em !important;
}
/* ── About page: Our Values cards ── */
.aura-values-grid { align-items: stretch !important; }
.aura-value-card {
padding: 40px 32px !important;
background: var(--cream-dark, #F2EDE4) !important;
transition: background 0.25s ease !important;
}
.aura-value-card:hover { background: #FDFCFA !important; }
.aura-value-icon {
font-size: 1.5rem !important;
margin: 0 0 18px !important;
color: var(--gold, #8B7355) !important;
line-height: 1 !important;
}
.aura-value-title {
font-family: var(--wp--preset--font-family--cormorant) !important;
font-size: 1.25rem !important;
font-weight: 400 !important;
color: var(--charcoal, #2C2825) !important;
margin: 0 0 12px !important;
}
.aura-value-body {
font-size: 0.85rem !important;
line-height: 1.8 !important;
color: var(--text-muted, #5C5650) !important;
font-weight: 300 !important;
margin: 0 !important;
}
@media (max-width: 768px) {
.aura-value-card { padding: 28px 20px !important; }
.aura-values-grid { flex-direction: column !important; }
}
/* ── Price list FAQ: proper padding on all screen sizes ── */
.aura-faq-list {
padding: 0 !important;
}
.aura-faq-item {
padding-left: 0 !important;
padding-right: 0 !important;
}
.aura-faq-question {
padding-left: 4px !important;
padding-right: 4px !important;
}
.aura-faq-answer {
padding-left: 4px !important;
}
/* Wide screens: ensure FAQ container has breathing room */
@media (min-width: 769px) {
.aura-faq-list {
padding: 0 !important;
}
.aura-faq-question {
padding: 20px 8px !important;
}
.aura-faq-item.is-open .aura-faq-answer {
padding: 0 8px 24px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
v1.4.0 — CTA + V2 hero + treatments card link hardening
═══════════════════════════════════════════════════════════════ */
/* CTA: also target by grid position in case className is stripped */
.aura-split-cta > .wp-block-group:last-child,
.aura-split-cta-dark {
background-color: var(--charcoal, #2C2825) !important;
padding: clamp(48px, 6vw, 90px) clamp(36px, 5vw, 72px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* Text colours */
.aura-split-cta > .wp-block-group:last-child .wp-block-heading,
.aura-split-cta-dark .wp-block-heading {
color: #ffffff !important;
font-family: var(--wp--preset--font-family--cormorant) !important;
}
.aura-split-cta > .wp-block-group:last-child .wp-block-paragraph,
.aura-split-cta-dark .wp-block-paragraph {
color: rgba(255,255,255,0.65) !important;
}
/* Primary button: works even without aura-btn-primary wrapper class */
.aura-split-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.aura-split-cta-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background-color: var(--gold, #8B7355) !important;
color: #ffffff !important;
border-radius: 24px !important;
padding: 14px 28px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-block !important;
}
/* Outline button on dark bg */
.aura-split-cta .wp-block-button.is-style-outline .wp-block-button__link,
.aura-split-cta-dark .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: rgba(255,255,255,0.85) !important;
border: 1.5px solid rgba(255,255,255,0.38) !important;
border-radius: 24px !important;
padding: 13px 28px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-block !important;
}
.aura-split-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.aura-split-cta-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
color: #ffffff !important;
border-color: rgba(255,255,255,0.65) !important;
background: rgba(255,255,255,0.08) !important;
}
/* V2 hero: prevent buttons stacking on 1200-1500px screens */
@media (min-width: 901px) {
.aura-hero-v2-btns {
flex-wrap: nowrap !important;
align-items: center !important;
}
.aura-btn-v2-primary,
.aura-btn-v2-outline {
white-space: nowrap !important;
flex-shrink: 0 !important;
}
}
/* ── Testimonials — native block version ── */
.aura-testimonials-section { background: #ffffff; }
.aura-testimonial-card {
background: var(--wp--preset--color--cream, #FAF8F4);
padding: 32px 28px;
border-top: 2px solid var(--wp--preset--color--gold, #8B7355);
}
.aura-testimonial-card .aura-tc-stars { font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 14px; }
.aura-testimonial-card .wp-block-quote {
border: none !important;
padding: 0 !important;
margin: 0 0 16px !important;
font-style: normal !important;
}
.aura-testimonial-card .wp-block-quote p {
font-size: 0.9rem !important;
line-height: 1.8 !important;
color: var(--wp--preset--color--charcoal, #2C2825) !important;
font-style: italic !important;
}
.aura-testimonial-card .wp-block-quote p::before { content: "\201C"; }
.aura-testimonial-card .wp-block-quote p::after { content: "\201D"; }
.aura-tc-name { font-weight: 600; font-size: 0.88rem; color: var(--wp--preset--color--charcoal, #2C2825); }
.aura-tc-treatment { display: block; font-size: 0.75rem; color: var(--wp--preset--color--text-muted, #7A7268); margin-top: 2px; }
.aura-testimonials-grid { gap: 24px; }
/* ── Treatments page stats strip ── */
.aura-treatments-stats-strip .aura-tstat-item { text-align: center; padding: 24px 12px; }
.aura-treatments-stats-strip .aura-tstat-num {
font-size: 2.4rem !important;
font-weight: 300 !important;
margin: 0 0 4px !important;
}
.aura-treatments-stats-strip .aura-tstat-label { margin: 0 !important; }
/* ── Instagram section — native block version ── */
.aura-instagram-header { align-items: center; margin-bottom: 28px !important; }
.aura-instagram-handle.is-style-outline .wp-block-button__link {
border: 1.5px solid var(--wp--preset--color--gold, #8B7355) !important;
color: var(--wp--preset--color--gold, #8B7355) !important;
border-radius: 24px !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
}
.aura-insta-col .wp-block-cover { transition: transform 0.3s ease; overflow: hidden; }
.aura-insta-col:hover .wp-block-cover { transform: scale(1.03); }
.aura-instagram-placeholder-grid { overflow: hidden; }
.aura-instagram-fallback { overflow: hidden; }
/* ── Native testimonial view all link button ── */
.is-style-aura-text-link .wp-block-button__link {
background: transparent !important;
color: var(--wp--preset--color--gold, #8B7355) !important;
font-size: 0.74rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(139,115,85,0.3) !important;
padding: 0 0 2px !important;
border-radius: 0 !important;
}
.is-style-aura-text-link .wp-block-button__link:hover {
color: var(--wp--preset--color--charcoal, #2C2825) !important;
border-color: rgba(44,40,37,0.3) !important;
}
/* ── About page: founder image vertical center ── */
.aura-col-img-wrap {
display: flex !important;
align-items: center !important;
align-self: center !important;
}
.aura-col-img-wrap .wp-block-image {
width: 100%;
}
.aura-col-img-wrap .wp-block-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* ── Active nav link: gold colour matching hover — comprehensive selectors ── */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current_page_item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.aura-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.aura-header .wp-block-navigation-item.current-menu-item > a,
.aura-nav-primary .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.aura-nav-primary .wp-block-navigation-item.current-menu-item > a,
.aura-nav-primary .current-menu-item > .wp-block-navigation-item__content,
.aura-nav-primary .current-menu-item > a {
color: var(--gold, #8B7355) !important;
opacity: 1 !important;
}
/* ── Contact page: Send Enquiry button — gold default, charcoal hover, rounded ── */
.il-form-submit {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: var(--wp--preset--color--gold, #8B7355) !important;
color: #ffffff !important;
border: none !important;
border-radius: 24px !important;
padding: 14px 32px !important;
font-size: 0.74rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.2s ease, transform 0.15s ease !important;
margin-top: 8px !important;
}
.il-form-submit:hover,
.il-form-submit:focus {
background: var(--wp--preset--color--charcoal, #2C2825) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
.il-submit-arrow {
font-size: 1rem;
line-height: 1;
transition: transform 0.2s;
}
.il-form-submit:hover .il-submit-arrow {
transform: translateX(3px);
}
/* ══════════════════════════════════════════════════════
STATS STRIP — light cream background, gold numbers
Clean, modern, fully readable
══════════════════════════════════════════════════════ */
.aura-stats-strip {
background: #ffffff;
border-top: 1px solid rgba(139,115,85,0.12);
border-bottom: 1px solid rgba(139,115,85,0.12);
padding: 0 !important;
width: 100%;
}
.aura-stats-strip .aura-stats-row.wp-block-columns,
.aura-stats-strip > .wp-block-columns {
margin: 0 !important;
gap: 0 !important;
max-width: 100% !important;
}
.aura-stats-strip .wp-block-column.aura-stat-item,
.aura-stats-strip .aura-stat-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 36px 24px !important;
border-right: 1px solid rgba(139,115,85,0.1) !important;
margin: 0 !important;
}
.aura-stats-strip .aura-stat-item:last-child { border-right: none !important; }
/* Gold heading number */
.aura-stats-strip .aura-stat-item .wp-block-heading,
.aura-stats-strip .aura-stat-item h3 {
font-family: var(--display-font,'Cormorant Garamond',serif) !important;
font-size: clamp(2.2rem,3.5vw,3rem) !important;
font-weight: 300 !important;
color: var(--wp--preset--color--gold,#8B7355) !important;
line-height: 1 !important;
margin: 0 0 8px !important;
letter-spacing: 0.02em !important;
}
/* Label text */
.aura-stats-strip .aura-stat-item p,
.aura-stats-strip .aura-stat-item .wp-block-paragraph {
font-size: 0.67rem !important;
font-weight: 600 !important;
color: var(--wp--preset--color--text-muted,#5C5650) !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* Old freeform stat items */
.aura-stats-strip .aura-stat-item strong {
display: block;
font-family: var(--display-font,'Cormorant Garamond',serif) !important;
font-size: clamp(2.2rem,3.5vw,3rem) !important;
font-weight: 300 !important;
color: var(--wp--preset--color--gold,#8B7355) !important;
line-height: 1;
margin-bottom: 8px;
}
.aura-stats-strip .aura-stat-item span {
font-size: 0.67rem !important;
font-weight: 600 !important;
color: var(--wp--preset--color--text-muted,#5C5650) !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
}
.aura-stat-divider { display: none; }
@media (max-width: 640px) {
.aura-stats-strip .aura-stats-row.wp-block-columns {
flex-wrap: wrap !important;
}
.aura-stats-strip .wp-block-column.aura-stat-item {
flex-basis: 50% !important;
min-width: 50% !important;
border-right: 1px solid rgba(139,115,85,0.1) !important;
border-bottom: 1px solid rgba(139,115,85,0.1) !important;
}
.aura-stats-strip .wp-block-column.aura-stat-item:nth-child(2n) { border-right: none !important; }
}
/* ── Treatments page stats strip — same light style ── */
.aura-treatments-stats-strip {
background: #ffffff;
border-top: 1px solid rgba(139,115,85,0.12);
border-bottom: 1px solid rgba(139,115,85,0.12);
padding: 0 !important;
}
.aura-treatments-stats-strip .wp-block-columns { margin: 0 !important; gap: 0 !important; }
.aura-treatments-stats-strip .aura-tstat-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 32px 20px !important;
border-right: 1px solid rgba(139,115,85,0.1) !important;
margin: 0 !important;
}
.aura-treatments-stats-strip .aura-tstat-item:last-child { border-right: none !important; }
.aura-treatments-stats-strip .aura-tstat-num.wp-block-heading,
.aura-treatments-stats-strip h3.aura-tstat-num {
font-family: var(--display-font,'Cormorant Garamond',serif) !important;
font-size: clamp(2rem,3vw,2.8rem) !important;
font-weight: 300 !important;
color: var(--wp--preset--color--gold,#8B7355) !important;
margin: 0 0 6px !important;
line-height: 1 !important;
}
.aura-treatments-stats-strip .aura-tstat-label.wp-block-paragraph,
.aura-treatments-stats-strip p.aura-tstat-label {
font-size: 0.67rem !important;
font-weight: 600 !important;
color: var(--wp--preset--color--text-muted,#5C5650) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* ── Fix: No coloured gap between Instagram section and CTA ── */
.aura-instagram-section + .aura-split-cta,
.aura-instagram-section + .wp-block-columns.aura-split-cta {
margin-top: 0 !important;
}
/* Remove WP default block top margin on the CTA columns block */
.wp-block-columns.aura-split-cta {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Ensure no extra padding bleeds from the instagram section */
.aura-instagram-section {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* When instagram fallback grid directly precedes CTA */
.aura-instagram-fallback {
margin-bottom: 0 !important;
}
/* Fix 5: Treatment card title — true black for maximum readability */
.wp-block-column.aura-treatment-card .card-name,
.aura-treatment-card .card-name,
.wp-block-column.aura-treatment-card .card-body .card-name.wp-block-heading,
.aura-treatment-card h3.card-name {
color: #1a1816 !important;
}
/* V2/V3 card titles also black */
.aura-v3-tcard-body h3 {
color: #1a1816 !important;
}
/* ══════════════════════════════════════════════════════
GLOBAL MINIMUM FONT SIZE — 14px
PROJECT RULE: No body text below 14px anywhere on site.
Eyebrow labels and table headers may use 0.68rem (≈10.9px)
but general paragraphs, list items, buttons must be ≥14px.
══════════════════════════════════════════════════════ */
body,
.wp-block-paragraph,
.wp-block-list li,
.wp-block-table td,
.wp-block-table th,
.wp-block-quote p,
.aura-treatment-card .card-desc,
.aura-v3-tcard-body p,
.aura-testimonial-card .wp-block-quote p,
.il-contact-form label,
.il-contact-form input,
.il-contact-form select,
.il-contact-form textarea,
.aura-faq-answer,
.aura-value-body,
.aura-price-item-name,
.aura-price-item-desc,
.wp-block-navigation-item__content {
font-size: max(14px, 0.875rem);
}
/* Smaller allowed for deliberate UI micro-labels */
.aura-eyebrow,
.aura-tstat-label,
.aura-stat-item p,
.card-num,
.aura-about-sig + p,
[class*="eyebrow"],
.wp-block-button__link,
.aura-card-btn .wp-block-button__link,
.aura-v3-tcard-link {
/* These are intentional small labels — preserve */
font-size: inherit;
}
/* ── Mobile drawer social icons ── */
.aura-drawer-social {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 28px;
border-top: 1px solid rgba(139,115,85,0.15);
margin-top: 8px;
}
.aura-drawer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--wp--preset--color--gold, #8B7355) !important;
border: 1px solid rgba(139,115,85,0.25);
border-radius: 50%;
transition: background 0.2s, border-color 0.2s, color 0.2s;
text-decoration: none !important;
}
.aura-drawer-social-link:hover {
background: var(--wp--preset--color--gold, #8B7355);
border-color: var(--wp--preset--color--gold, #8B7355);
color: #ffffff !important;
}
.aura-drawer-social-link svg {
width: 18px;
height: 18px;
display: block;
}
/* ── Card button: lock font-size so WP recovery can't resize it ── */
.aura-card-btn .wp-block-button__link,
.wp-block-button.aura-card-btn .wp-block-button__link {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 11px 22px !important;
border-radius: 24px !important;
width: auto !important;
display: inline-block !important;
background-color: var(--wp--preset--color--gold, #8B7355) !important;
color: #ffffff !important;
text-decoration: none !important;
line-height: 1.4 !important;
}
/* ── Fix 1: CTA button wrapper — kill inherited cream background ── */
.wp-block-button.aura-btn-primary {
background: transparent !important;
padding: 0 !important;
display: inline-block !important;
}
/* Ensure the CTA buttons area has zero background */
.aura-split-cta-dark .wp-block-buttons {
background: transparent !important;
}
.aura-split-cta-dark .wp-block-button {
background: transparent !important;
}
/* ── Fix 2: Drawer social icons — visible and properly spaced ── */
.aura-drawer-social {
display: flex !important;
align-items: center;
gap: 16px;
padding: 20px 24px 28px;
border-top: 1px solid rgba(139,115,85,0.15);
margin-top: auto;
}
.aura-drawer-social-link {
display: flex !important;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(139,115,85,0.3);
color: var(--wp--preset--color--gold, #8B7355) !important;
text-decoration: none !important;
transition: background 0.2s, color 0.2s, border-color 0.2s;
flex-shrink: 0;
}
.aura-drawer-social-link:hover {
background: var(--wp--preset--color--gold, #8B7355) !important;
border-color: var(--wp--preset--color--gold, #8B7355) !important;
color: #fff !important;
}
.aura-drawer-social-link svg { display: block; width: 17px; height: 17px; }
/* ── Fix 3: Treatment card title — black (#1a1816), medium weight ── */
h3.card-name,
.card-name.wp-block-heading,
.wp-block-column.aura-treatment-card h3,
.wp-block-column.aura-treatment-card .card-body h3,
.wp-block-column.aura-treatment-card .card-body .card-name,
.aura-treatment-card h3.wp-block-heading.card-name,
.aura-treatments-grid-row .aura-treatment-card h3 {
color: #1a1816 !important;
font-weight: 600 !important;
font-size: 1rem !important;
font-family: var(--body-font, 'Inter', sans-serif) !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
/* ── Fix 4: Instagram section — bottom spacing buffer before CTA ── */
.aura-instagram-section {
padding-bottom: clamp(32px, 5vw, 64px) !important;
margin-bottom: 0 !important;
}
/* Remove previous zero override */
.aura-instagram-section + .aura-split-cta,
.aura-instagram-section + .wp-block-columns.aura-split-cta {
margin-top: 0 !important;
}
/* ── Fix 5: Stats strip — compact, centred, polished ── */
.aura-stats-strip {
background: #ffffff !important;
border-top: 1px solid rgba(139,115,85,0.1) !important;
border-bottom: 1px solid rgba(139,115,85,0.1) !important;
}
.aura-stats-strip .wp-block-columns,
.aura-stats-strip .aura-stats-row {
max-width: 860px !important;
margin: 0 auto !important;
gap: 0 !important;
}
.aura-stats-strip .wp-block-column.aura-stat-item,
.aura-stats-strip .aura-stat-item {
padding: 28px 20px !important;
border-right: 1px solid rgba(139,115,85,0.12) !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
}
.aura-stats-strip .aura-stat-item:last-child { border-right: none !important; }
/* Number: Cormorant, gold, elegant but not oversized */
.aura-stats-strip .aura-stat-item .wp-block-heading,
.aura-stats-strip .aura-stat-item h3 {
font-family: var(--display-font, 'Cormorant Garamond', serif) !important;
font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
font-weight: 300 !important;
color: var(--wp--preset--color--gold, #8B7355) !important;
line-height: 1 !important;
margin: 0 !important;
letter-spacing: 0.01em !important;
}
/* Label: small, spaced, muted */
.aura-stats-strip .aura-stat-item p,
.aura-stats-strip .aura-stat-item .wp-block-paragraph {
font-size: 0.6rem !important;
font-weight: 600 !important;
color: var(--wp--preset--color--text-muted, #7A7268) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* Treatments page stats — same compact style */
.aura-treatments-stats-strip .wp-block-columns {
max-width: 860px !important;
margin: 0 auto !important;
}
.aura-treatments-stats-strip .aura-tstat-item {
padding: 28px 20px !important;
text-align: center !important;
border-right: 1px solid rgba(139,115,85,0.12) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
}
.aura-treatments-stats-strip .aura-tstat-item:last-child { border-right: none !important; }
.aura-treatments-stats-strip h3.aura-tstat-num {
font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
font-weight: 300 !important;
margin: 0 !important;
}
.aura-treatments-stats-strip p.aura-tstat-label {
font-size: 0.6rem !important;
letter-spacing: 0.18em !important;
margin: 0 !important;
}
/* ── Fix 6: Dr signature block — spacing & separator ── */
.aura-dr-sig {
margin-top: 40px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(139,115,85,0.2) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
.aura-dr-sig .wp-block-heading {
margin-bottom: 2px !important;
line-height: 1.2 !important;
}
.aura-dr-sig .wp-block-paragraph {
margin-top: 2px !important;
margin-bottom: 0 !important;
}
/* ══════════════════════════════════════════════
MOBILE HEADER SOCIAL — shows on ≤900px
Sits to the left of the hamburger in header
══════════════════════════════════════════════ */
.aura-mobile-header-social {
/* Teleported by JS into .aura-header-right before the hamburger button */
display: none;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.aura-mobile-header-social a {
display: flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
color: var(--wp--preset--color--gold, #8B7355) !important;
text-decoration: none !important;
border: 1px solid rgba(139,115,85,0.25);
border-radius: 50%;
transition: background 0.2s, border-color 0.2s, color 0.2s;
flex-shrink: 0;
}
.aura-mobile-header-social a:hover {
background: var(--wp--preset--color--gold, #8B7355) !important;
border-color: var(--wp--preset--color--gold, #8B7355) !important;
color: #ffffff !important;
}
.aura-mobile-header-social svg { display: block; flex-shrink: 0; width: 14px; height: 14px; }
/* Shown on mobile/tablet only — JS places it in header */
@media (max-width: 900px) {
.aura-mobile-header-social { display: flex !important; }
}
@media (min-width: 901px) {
.aura-mobile-header-social { display: none !important; }
}
/* Drawer social list item — removes list styling */
.aura-drawer-nav .aura-drawer-social-item {
list-style: none !important;
border-top: 1px solid rgba(139,115,85,0.12);
margin-top: 0;
padding: 0;
}
/* Drawer social icons row — compact, left-aligned under CTA */
.aura-drawer-nav .aura-drawer-social {
display: flex !important;
align-items: center;
gap: 14px;
padding: 16px 24px;
border-top: none;
margin-top: 0;
}
/* ══════════════════════════════════════
PAGE HERO H1 — capped at 50px (3.125rem)
PROJECT RULE: No hero H1 above 50px
══════════════════════════════════════ */
.aura-page-hero h1.wp-block-heading,
.aura-page-hero .wp-block-post-title,
.aura-page-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.125rem) !important;
}
/* ── Fix 5: CTA buttons — enforce gap between buttons ── */
.aura-split-cta-dark .wp-block-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
align-items: center !important;
}
.aura-split-cta-dark .wp-block-buttons .wp-block-button {
flex: 0 0 auto !important;
margin: 0 !important;
}
/* About intro section buttons — same treatment */
.wp-block-buttons.aura-fade-up .wp-block-button + .wp-block-button {
margin-left: 0 !important;
}
/* Global: ensure all multi-button rows have gap */
.wp-block-buttons[style*="blockGap"],
.wp-block-buttons[class*="aura"] {
gap: 14px !important;
}
/* ══════════════════════════════════════════════════════════════
ACTIVE NAV LINK — terminal override
Uses maximum practical specificity so nothing can beat it.
Target: #8B7355 gold — identical to hover colour.
All WP class variants covered.
══════════════════════════════════════════════════════════════ */
header.aura-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header.aura-header .wp-block-navigation-item.current-menu-item > a,
header.aura-header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
header.aura-header .wp-block-navigation-item.current_page_item > a,
header.aura-header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
header.aura-header .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.wp-block-group.aura-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.wp-block-group.aura-header .wp-block-navigation .current-menu-item > a,
.aura-nav-primary .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.aura-nav-primary .wp-block-navigation-item.current-menu-item > a,
.aura-nav-primary .current-menu-item > .wp-block-navigation-item__content,
.aura-nav-primary .current-menu-item > a {
color: #8B7355 !important;
opacity: 1 !important;
}