html { scroll-padding-top: 80px; }
/* =====================================================
PEONELLA AESTHETICS — v4 DESIGN SYSTEM
Dual brand: Laser (deep teal) · Beauty (light teal)
Lora + Poppins · Embedded fonts
===================================================== */
@import url('fonts.css');
:root {
/* ── PRIMARY TEAL (core brand) ── */
--laser: #14A7A0;
--laser-deep: #0D7377;
--laser-mid: #5FD6CF;
--laser-lite: #E8F7F6;
--laser-glow: rgba(20,167,160,.15);
--laser-grad: linear-gradient(135deg, #0D7377, #14A7A0);
/* ── BEAUTY BRAND (distinct from laser) ── */
--beauty: #0ABAB5;
--beauty-mid: #4DCFCA;
--beauty-lite: #F0FBFB;
--beauty-deep: #087370;
--beauty-glow: rgba(10,186,181,.12);
/* ── BACKGROUND SYSTEM ── */
--cream: #F7F3EE;
--cream-deep: #EFE7DF;
--cream-border: #E2D8CF;
/* ── DARK SYSTEM ── */
--dark: #2B2B2B;
--dark-card: #3A3A3A;
--charcoal: #2B2B2B;
/* ── TEXT ── */
--ink: #2B2B2B;
--mid: #555555;
--muted: #9A9A9A;
--white: #FFFFFF;
/* ── ACCENT (sparingly — icons, highlights only) ── */
--accent: #E8BFA3;
/* ── LEGACY ALIASES (keep pages working) ── */
--sand: #E2D8CF;
--sand-lite: #EFE7DF;
/* ── TYPOGRAPHY ── */
--serif: 'Lora', 'Georgia', serif;
--sans: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
/* ── SPACING / RADIUS ── */
--r: 6px;
--rl: 14px;
--rx: 24px;
/* ── SHADOWS ── */
--sh1: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
--sh2: 0 4px 16px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.10);
--sh3: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
--sh4: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
/* ── TRANSITION ── */
--t: .22s cubic-bezier(.4,0,.2,1);
}
/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* HYBRID: Poppins default, Lora for h1/h2 only */
body { padding-top: 68px; font-family: var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 600; }
html { overflow-x: hidden; }
* { box-sizing: border-box; }
body { overflow-x: hidden; font-family: var(--sans); font-weight: 400; background: var(--cream); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1,h2 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
h3,h4,h5 { font-family: var(--sans); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
/* ── LAYOUT ─────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.wrap-sm { max-width: 760px; margin: 0 auto; padding: 0 32px; }
/* ── BUTTONS ─────────────────────────────────────────── */
.btn { border-radius: 6px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 32px; height: 52px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; border-radius: var(--r); transition: all var(--t); white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-laser { background: var(--laser); color: var(--white); }
.btn-laser:hover { background: var(--laser-mid); transform: translateY(-1px); box-shadow: var(--sh2); }
.btn-outline-laser:hover { box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.btn-beauty { background: var(--beauty); color: var(--white); }
.btn-beauty:hover { background: var(--beauty-mid); transform: translateY(-1px); box-shadow: var(--sh2); }
.btn-primary { background: var(--laser); color: var(--white); box-shadow: 0 2px 12px rgba(13,115,119,.25); }
.btn-primary:hover { background: var(--laser-deep); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,115,119,.35); }
.btn-outline { background: transparent; color: var(--laser); border: 1.5px solid var(--laser); }
.btn-outline:hover { background: var(--laser); color: var(--white); box-shadow: 0 4px 14px rgba(13,115,119,.2); }
.btn-outline-beauty { background: transparent; color: var(--beauty-deep); border: 1.5px solid var(--beauty); }
.btn-outline-beauty:hover { background: var(--beauty); color: var(--white); }
.btn-white { background: var(--white); color: var(--laser-deep); }
.btn-white:hover { background: var(--white); color: var(--laser); box-shadow: 0 6px 20px rgba(0,0,0,.15); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background: rgba(255,255,255,.15); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.btn-sand { background: var(--sand-lite); color: var(--ink); border: 1.5px solid var(--sand); }
.btn-sm { height: 42px; padding: 0 20px; font-size:12px; }
.btn-lg { height: 60px; padding: 0 36px; font-size: 12px; }
.btn-full { width: 100%; }
/* ── WIREFRAME PLACEHOLDER ──────────────────────────── */
/* Grey Figma-style photo placeholder */
.ph {
background: #C8CDD4;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; position: relative; overflow: hidden;
}
.ph::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(160deg, #D4D9E0 0%, #BFC5CC 100%);
}
.ph-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-icon {
width: 48px; height: 48px;
background: rgba(255,255,255,.5);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.ph-icon svg { opacity: .55; }
.ph-label {
font-family: var(--sans); font-size: 11px; font-weight: 500;
color: rgba(0,0,0,.35); letter-spacing: .04em;
background: rgba(255,255,255,.55); padding: 3px 10px; border-radius: 20px;
}
/* Sizes */
.ph-hero { height: 100%; min-height: 420px; }
.ph-card { height: 180px; }
.ph-card-lg { height: 220px; }
.ph-thumb { height: 140px; }
.ph-portrait { height: 320px; }
.ph-tall { height: 480px; }
/* Camera icon SVG (inline as data URI background — works offline) */
.ph-icon::after {
content: '';
display: block; width: 24px; height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='22' height='14' rx='2'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M8 5l2-4h4l2 4'/%3E%3C/svg%3E");
background-size: contain; background-repeat: no-repeat;
}
/* ── PROTOTYPE BANNER ────────────────────────────────── */
/* ── NAV ──────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(255,255,255,.99); backdrop-filter: blur(24px); border-bottom: 1px solid var(--cream-deep); box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-logo { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nav-logo-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--laser); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-logo-icon span { font-family: var(--sans); font-size: 15px; color: #fff; font-weight: 600; letter-spacing: .05em; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo-main { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--laser-deep); letter-spacing: .2em; text-transform: uppercase; }
.nav-logo-sub { font-family: var(--sans); font-weight: 300; font-size:12px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; }
.nav-links > li > a { font-size: 11px; font-weight: 500; color: var(--mid); text-decoration: none; letter-spacing: .04em; transition: color var(--t); padding: 28px 16px; display: block; }
.nav-links > li > a:hover { color: var(--laser); }
/* Beauty nav items */
.nav-links > li.beauty-nav > a { color: var(--beauty-deep); }
.nav-links > li.beauty-nav > a:hover { color: var(--beauty); }
.nav-actions { display: flex; gap: 10px; }
/* NAV DROPDOWN */
.dd { position: relative; }
.dd > a::after { content: ''; }
.dd-menu { display: none; position: absolute; top: 100%; left: -12px; min-width: 220px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--rl); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); padding: 8px; z-index: 250; }
.dd:hover .dd-menu { display: block; }
.dd-menu a { display: block; padding: 10px 14px; font-size: 12px; color: var(--ink); text-decoration: none; border-radius: var(--r); transition: background var(--t); letter-spacing: .01em; }
.dd-menu a:hover { background: var(--cream); }
.dd-menu .laser-link:hover { background: var(--laser-lite); color: var(--laser); }
.dd-menu .beauty-link:hover { background: var(--beauty-lite); color: var(--beauty-deep); }
.dd-menu .dd-secondary { font-size: 11px !important; color: var(--mid) !important; padding: 7px 14px !important; }
.dd-menu .dd-section-label { font-family: var(--sans); font-size:12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 4px; margin: 0; }
.dd-menu .dd-section-label:first-child { padding-top: 4px; }
.dd-menu .dd-secondary:hover { color: var(--ink) !important; background: var(--cream) !important; }
.dd-sep { border: none; border-top: 1px solid var(--cream-deep); margin: 6px 0; }
/* MOBILE */
.mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--white); border-top: 1px solid var(--cream-deep); padding: 12px 16px; gap: 10px; box-shadow: 0 -8px 32px rgba(0,0,0,.1); }
.mobile-bar .btn { border-radius: 6px !important; flex: 1; height: 48px; font-size:12px; }
/* ── PAGE NUMBER ──────────────────────────────────────── */
/* Large faded number top-left of page hero */
.page-num {
position: absolute;
top: 20px; left: 32px;
font-family: var(--serif); font-size: 120px; font-weight: 400;
line-height: 1; letter-spacing: -.04em;
color: rgba(255,255,255,.07);
pointer-events: none; user-select: none;
z-index: 1;
}
@media (max-width: 600px) { .page-num { font-size: 72px; top: 12px; } }
/* ── PAGE HERO ───────────────────────────────────────── */
.page-hero { padding: 72px 0 48px; position: relative; overflow: hidden; }
.page-hero.laser-hero { background: #0a0a0a; }
.page-hero.beauty-hero { background: #0a0a0a; }
.page-hero.neutral-hero { background: #0a0a0a; }
/* Marble texture — full image, slightly dimmed for elegance */
.page-hero-bg { position: absolute; inset: 0; z-index: 0; background: url('images/hero-marble.jpg') center center / cover no-repeat; opacity: 0.85; pointer-events: none; }
/* Darkening overlay — heavier on the left where text sits, fades toward the right */
.page-hero-glow { position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.15) 100%); pointer-events: none; }
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.35); margin-bottom: 10px; letter-spacing: .02em; }
.breadcrumb a { color: rgba(255,255,255,.35); text-decoration: none; transition: color var(--t); }
.breadcrumb a:hover { color: rgba(255,255,255,.65); }
.breadcrumb span { opacity: .4; }
.page-hero h1 { color: var(--white); font-size: clamp(32px,4.5vw,54px); margin-bottom: 14px; letter-spacing: -.02em; }
.page-hero p { font-size: 15px; color: rgba(255,255,255,.88); max-width: 560px; line-height: 1.65; }
/* ── SECTION HELPERS ─────────────────────────────────── */
/* Hairline section divider — drop between two sections to separate same-tone backgrounds */
.sec-divider { height: 1px; background: rgba(8,115,112,0.1); border: 0; margin: 0; }
.sec-divider-dark { height: 1px; background: rgba(255,255,255,0.06); border: 0; margin: 0; }
.section { padding: 24px 0; }
.section-sm { padding: 16px 0; }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-cream-deep { background: var(--cream-deep); }
.bg-charcoal { background: var(--charcoal); }
.bg-laser { background: var(--laser); }
.bg-laser-lite { background: var(--laser-lite); }
.bg-beauty-lite { background: var(--beauty-lite); }
.bg-beauty { background: var(--beauty-deep); }
.sec-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sec-label-line { width: 32px; height: 1px; background: var(--laser-mid); flex-shrink: 0; }
.sec-label span { font-size:12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--laser-mid); }
.sec-label.beauty .sec-label-line { background: var(--beauty); }
.sec-label.beauty span { color: var(--beauty-deep); }
.sec-label.light .sec-label-line { background: rgba(255,255,255,.3); }
.sec-label.light span { color: rgba(255,255,255,.45); }
.sec-head { margin-bottom: 24px; }
.sec-head h2 { font-size: clamp(30px,4vw,48px); margin-bottom: 16px; color: var(--laser-deep); }
.sec-head.beauty h2 { color: var(--beauty-deep); }
.sec-head p { font-size: 15px; color: var(--mid); max-width: 480px; line-height: 1.75; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin: 0 auto; }
.sec-head.light h2 { color: var(--white); }
.sec-head.light p { color: rgba(255,255,255,.6); }
/* ── GALLERY CARD ────────────────────────────────────── */
/* Shared between laser and beauty pages */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.gallery-card { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--rl); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: all .2s cubic-bezier(.4,0,.2,1); box-shadow: var(--sh1); }
.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--sh3); }
.gallery-card.laser-card:hover { border-color: var(--laser-mid); }
.gallery-card.beauty-card:hover { border-color: var(--beauty); }
.gallery-card-img { aspect-ratio: 3/4; flex-shrink: 0; position: relative; overflow: hidden; }
.gallery-card-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.5); border-radius: 20px; padding: 3px 10px; font-size:12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--laser); }
.gallery-card.beauty-card .gallery-card-badge { color: var(--beauty-deep); }
.gallery-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.gallery-card-type { font-size:12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--laser-mid); margin-bottom: 6px; }
.gallery-card.beauty-card .gallery-card-type { color: var(--beauty); }
.gallery-card-body h3 { font-size: 17px; color: var(--laser-deep); margin-bottom: 7px; }
.gallery-card.beauty-card h3 { color: var(--beauty-deep); }
.gallery-card-body p { font-size: 13px; color: var(--muted); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.gallery-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; margin: 0 -20px -20px; background: var(--laser-lite); border-top: 1px solid var(--cream-deep); border-radius: 0 0 var(--rl) var(--rl); }
.gallery-card-price { font-family: var(--sans); font-size: 22px; color: var(--laser-deep); font-weight: 600; }
.gallery-card.beauty-card .gallery-card-price { color: var(--beauty-deep); }
.gallery-card-dur { font-size: 11px; color: var(--muted); }
.gallery-card-link { font-size:12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); }
.gallery-card.beauty-card .gallery-card-link { color: var(--beauty); }
/* Category headers on laser page */
.cat-header { display: flex; align-items: center; gap: 20px; margin: 56px 0 24px; padding-bottom: 16px; border-bottom: 2px solid var(--laser-lite); }
.cat-header h2 { font-size: 28px; color: var(--laser-deep); }
.cat-header .cat-count { font-size: 12px; color: var(--muted); }
.cat-header .cat-see-all { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); text-decoration: none; margin-left: auto; }
.cat-header .cat-see-all:hover { color: var(--laser); }
/* ── CONCERN / FYT TILES ─────────────────────────────── */
.fyt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--cream-deep); border: 1px solid var(--cream-deep); border-radius: var(--rx); overflow: hidden; }
.fyt-tile { background: var(--white); padding: 32px 28px; text-decoration: none; display: block; transition: background var(--t); }
.fyt-tile:hover { background: var(--cream); }
.fyt-type { font-size:12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; margin-bottom: 14px; display: inline-block; }
.fyt-type.laser-tag { background: var(--laser-lite); color: var(--laser); }
.fyt-type.beauty-tag { background: var(--beauty-lite); color: var(--beauty-deep); }
.fyt-tile h3 { font-size: 18px; margin-bottom: 8px; color: var(--laser-deep); }
.fyt-tile p { font-size: 13px; color: var(--mid); line-height: 1.65; margin-bottom: 16px; }
.fyt-arrow { font-size:12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); display: flex; align-items: center; gap: 6px; transition: gap var(--t); }
.fyt-tile:hover .fyt-arrow { gap: 10px; }
/* ── PRICING TABLE ───────────────────────────────────── */
.price-section-title { font-size: 22px; color: var(--laser-deep); margin: 52px 0 4px; display: flex; align-items: center; gap: 12px; }
.price-section-title::after { content: ''; flex: 1; height: 1px; background: var(--laser-lite); }
.price-section-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.price-tbl { width: 100%; border-collapse: collapse; margin-bottom: 4px; border-radius: var(--r); overflow: hidden; }
.price-tbl thead tr { background: var(--laser); }
.price-tbl th { text-align: left; padding: 13px 16px; color: var(--white); font-size:12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-family: var(--sans); }
.price-tbl th:not(:first-child) { text-align: right; }
.price-tbl tbody tr:nth-child(even) { background: rgba(224,244,244,.3); }
.price-tbl tbody tr:hover { background: var(--laser-lite); }
.price-tbl td { padding: 13px 16px; border-bottom: 1px solid rgba(224,244,244,.6); font-size: 13px; color: var(--mid); vertical-align: middle; }
.price-tbl td:first-child { color: var(--ink); font-size: 14px; }
.price-tbl td:not(:first-child) { text-align: right; font-family: var(--sans); font-size: 17px; color: var(--laser-deep); font-weight: 500; }
.price-tbl .best-val { background: var(--laser-lite) !important; }
.price-tbl .best-val td:not(:first-child) { font-weight: 600; }
.price-tbl .best-val td:last-child::after { content: ' ⭐'; font-size: 12px; }
.price-tbl .note-cell { font-size: 12px; color: var(--muted); font-family: var(--sans); font-style: italic; }
/* ── BOOKING CARD ────────────────────────────────────── */
.book-card { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--rx); padding: 32px; box-shadow: var(--sh2); position: sticky; top: 88px; }
.book-card h3 { font-size: 26px; margin-bottom: 4px; color: var(--laser-deep); }
.book-card.beauty-book h3 { color: var(--beauty-deep); }
.book-card .sub { font-size: 12px; color: var(--muted); margin-bottom: 24px; display: block; }
/* ── £30 BOOKING FEE NOTE ─────────────────────────────── */
/* Used everywhere the consultation CTA appears */
.consult-note {
background: var(--laser-lite); border-radius: var(--r);
padding: 14px 16px; margin-top: 12px;
font-size: 12px; color: var(--laser-deep); line-height: 1.7; text-align: center;
border-left: 3px solid var(--laser-mid);
}
.consult-note strong { display: block; font-size: 14px; font-family: var(--sans); font-weight: 600; margin-bottom: 3px; }
.consult-note.beauty-note { background: var(--beauty-lite); color: var(--beauty-deep); border-left-color: var(--beauty); }
/* ── PRICING TIERS (booking widget) ──────────────────── */
.price-tiers { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--rl); overflow: hidden; margin: 24px 0; }
.p-tier { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--cream-deep); transition: background var(--t); }
.p-tier:last-child { border-bottom: none; }
.p-tier:hover { background: var(--cream); }
.p-tier.best { background: var(--laser-lite); border-left: 3px solid var(--laser); }
.p-tier.best:hover { background: #c8e8e8; }
.p-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.p-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.p-badge { display: inline-block; background: var(--laser); color: var(--white); font-size:12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; margin-top: 5px; }
.p-amount { font-family: var(--sans); font-size: 26px; color: var(--laser-deep); font-weight: 600; white-space: nowrap; }
.p-save { display: block; font-size: 11px; color: var(--laser-mid); font-family: var(--sans); }
/* ── CALLOUT BLOCKS ──────────────────────────────────── */
.callout { background: var(--laser-lite); border-radius: var(--rl); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--sh1); border: 1px solid rgba(13,115,119,.15); }
.callout h3 { font-size: 20px; color: var(--laser-deep); margin-bottom: 6px; }
.callout p { font-size: 13px; color: var(--mid); }
.callout.beauty-callout { background: var(--beauty-lite); border-color: rgba(10,186,181,.2); }
.callout.beauty-callout h3 { color: var(--beauty-deep); }
.dark-callout { background: var(--laser); border-radius: var(--rl); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.dark-callout h3 { font-size: 28px; color: var(--white); margin-bottom: 10px; }
.dark-callout p { font-size: 14px; color: rgba(255,255,255,.65); max-width: 480px; }
.dark-callout.beauty-dark { background: var(--beauty-deep); }
/* ── TABS ────────────────────────────────────────────── */
.tab-row { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--cream-deep); margin-bottom: 40px; overflow: visible; }
.tab-btn { padding: 14px 22px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: var(--sans); white-space: nowrap; transition: all var(--t); }
.tab-btn:hover { color: var(--laser); }
.tab-btn.on { color: var(--laser); border-bottom-color: var(--laser); }
.beauty-tabs .tab-btn:hover { color: var(--beauty-deep); }
.beauty-tabs .tab-btn.on { color: var(--beauty-deep); border-bottom-color: var(--beauty); }
/* ── FEATURES LIST ───────────────────────────────────── */
.feat-list { list-style: none; margin: 24px 0 32px; }
.feat-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cream-deep); font-size: 14px; color: var(--mid); }
.feat-list li:last-child { border-bottom: none; }
.feat-check { width: 20px; height: 20px; flex-shrink: 0; background: var(--laser-lite); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size:12px; color: var(--laser); margin-top: 1px; }
.feat-check.beauty { background: var(--beauty-lite); color: var(--beauty-deep); }
/* ── INFO LIST ───────────────────────────────────────── */
.info-list { list-style: none; }
.info-list li { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--cream-deep); font-size: 14px; color: var(--mid); }
.info-list li:last-child { border-bottom: none; }
.info-list .k { font-weight: 500; color: var(--ink); min-width: 120px; flex-shrink: 0; }
/* ── FAQ ─────────────────────────────────────────────── */
details { border: 1px solid var(--cream-deep); border-radius: var(--r); margin-bottom: 8px; }
details summary { padding: 18px 20px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background var(--t); }
details summary:hover { background: var(--cream); }
details summary::after { content: '+'; font-size: 18px; color: var(--laser-mid); flex-shrink: 0; }
details[open] summary::after { content: '−'; }
details .faq-body { padding: 0 20px 20px; font-size: 14px; color: var(--mid); line-height: 1.75; }
/* ── SESSIONS BOX ────────────────────────────────────── */
.sessions-box { background: var(--laser-lite); border-radius: var(--rl); padding: 22px 24px; margin: 24px 0; border-left: 3px solid var(--laser); }
.sessions-box h4 { font-size: 13px; font-weight: 600; color: var(--laser-deep); font-family: var(--sans); margin-bottom: 6px; }
.sessions-box p { font-size: 13px; color: var(--mid); line-height: 1.7; }
/* ── REVIEW CARDS ────────────────────────────────────── */
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.rev-card { user-select: none; -webkit-user-select: none; background: var(--white); border-radius: var(--rl); padding: 30px; border: 1px solid rgba(0,0,0,.05); }
.rev-card * { user-select: none; -webkit-user-select: none; }
.rev-stars { color: #c8a84b; font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
.rev-text { font-family: var(--sans); font-size: 15px; font-style: normal; font-weight: 400; color: var(--ink); line-height: 1.75; margin-bottom: 22px; }
.rev-author { display: flex; align-items: center; gap: 12px; }
.rev-init { width: 38px; height: 38px; background: var(--laser-lite); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--laser); flex-shrink: 0; }
.rev-name { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.rev-detail { font-size: 11px; color: var(--muted); }
/* ── TEAM / ABOUT ────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: center; }
.about-vis { border-radius: var(--rx); overflow: hidden; }
.cred-list { list-style: none; margin: 24px 0 32px; }
.cred-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cream-deep); font-size: 13px; color: var(--mid); }
.cred-list li:last-child { border-bottom: none; }
.cred-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--laser-mid); flex-shrink: 0; }
/* ── EMAIL CAPTURE ───────────────────────────────────── */
.email-inner { text-align: center; max-width: 520px; margin: 0 auto; }
.email-inner h2 { color: var(--white); margin-bottom: 14px; }
.email-inner > p { font-size: 15px; color: rgba(255,255,255,.45); margin-bottom: 32px; line-height: 1.7; }
.email-form { display: flex; gap: 10px; margin-bottom: 14px; }
.email-form input { flex: 1; height: 52px; padding: 0 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r); color: var(--white); font-family: var(--sans); font-size: 14px; outline: none; transition: border-color var(--t); }
.email-form input::placeholder { color: rgba(255,255,255,.25); }
.email-form input:focus { border-color: rgba(255,255,255,.35); }
.email-fine { font-size: 11px; color: rgba(255,255,255,.25); }
/* ── FOOTER ──────────────────────────────────────────── */
.footer { background: var(--charcoal); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: 56px; margin-bottom: 48px; }
.footer-logo { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; margin-bottom: 14px; }
.footer-logo em { font-style: italic; font-weight: 300; font-size: 11px; letter-spacing: .22em; color: var(--laser-mid); }
.footer-brand p { font-size: 12px; color: rgba(255,255,255,.3); line-height: 1.8; }
.footer-addr { font-size: 11px; color: rgba(255,255,255,.25); margin-top: 12px; line-height: 1.8; }
.footer-col h4 { font-size:12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 16px; font-family: var(--sans); }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul a { font-size: 12px; color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--t); }
.footer-col ul a:hover { color: var(--white); }
.footer-col ul a.laser-link:hover { color: var(--laser-mid); }
.footer-col ul a.beauty-link:hover { color: var(--beauty-mid); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.35); text-align: center; line-height: 1.6; }
.footer-bottom .fb-clinic { color: rgba(255,255,255,.55); }
.footer-bottom .fb-legal, .footer-bottom .fb-tech { color: rgba(255,255,255,.35); }
@media (max-width: 700px) {
.footer-bottom { font-size: 11px; padding-top: 18px; }
}
/* ── FRESHA HANDOFF PAGE ─────────────────────────────── */
.fresha-transition-banner {
background: linear-gradient(135deg, var(--laser) 0%, var(--laser-mid) 100%);
border-radius: var(--rl); padding: 28px 32px;
display: flex; align-items: center; gap: 20px;
margin-bottom: 32px;
}
.fresha-transition-icon {
width: 52px; height: 52px; flex-shrink: 0;
background: rgba(255,255,255,.15); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
}
.fresha-transition-text h3 { font-size: 18px; color: var(--white); margin-bottom: 5px; }
.fresha-transition-text p { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.6; }
.fresha-mock-frame {
border: 2px dashed var(--cream-deep);
border-radius: var(--rx); overflow: hidden;
position: relative;
}
.fresha-mock-label {
position: absolute; top: 0; left: 0; right: 0;
background: repeating-linear-gradient(45deg, #f0c040, #f0c040 10px, #2C1810 10px, #2C1810 20px);
height: 6px;
z-index: 10;
}
.fresha-mock-topbar {
background: var(--white); border-bottom: 1px solid var(--cream-deep);
padding: 12px 20px 12px; display: flex; align-items: center; gap: 12px;
margin-top: 6px;
}
.fresha-mock-url {
flex: 1; background: var(--cream); border: 1px solid var(--cream-deep);
border-radius: 20px; padding: 7px 16px; font-size: 12px; color: var(--mid);
display: flex; align-items: center; gap: 8px;
}
.fresha-mock-url::before { content: '🔒'; font-size: 11px; }
.fresha-logo-badge {
font-size: 13px; font-weight: 700; color: #00b398;
letter-spacing: -.02em;
}
/* ── PACKAGE ROWS ────────────────────────────────────── */
.pkg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); text-decoration: none; transition: all var(--t); }
.pkg-row:hover { background: rgba(255,255,255,.11); transform: translateX(3px); }
.pkg-row.featured-row { background: var(--white); border-color: var(--white); }
.pkg-row.featured-row .pkg-row-name { color: var(--laser-deep); }
.pkg-row.featured-row .pkg-row-price { color: var(--laser-deep); }
.pkg-row.featured-row .pkg-row-desc { color: var(--mid); }
.pkg-row-info { flex: 1; }
.pkg-row-name { font-size: 15px; color: var(--white); font-family: var(--sans); font-weight: 500; margin-bottom: 3px; }
.pkg-row-desc { font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.5; }
.pkg-row-price { font-family: var(--sans); font-size: 22px; color: var(--white); font-weight: 600; white-space: nowrap; }
.pkg-row-badge { font-size:12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--laser-lite); color: var(--laser-deep); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
/* ── DIVIDER ─────────────────────────────────────────── */
hr.div { border: none; border-top: 1px solid var(--cream-deep); margin: 48px 0; }
/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.about-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
/* v443 — .gallery-grid 2-col rule removed; goes 3-col straight to 1-col at ≤600 */
.review-grid { grid-template-columns: 1fr; }
.fyt-grid { grid-template-columns: repeat(2,1fr); }
.nav-links { display: none; }
.nav-actions .btn-outline { display: none; }
.mobile-bar { display: flex; }
body { padding-bottom: 76px; }
.dark-callout { flex-direction: column; gap: 24px; padding: 28px 24px; }
}
@media (max-width: 600px) {
.wrap { padding: 0 20px; }
/* v445 — .gallery-grid 1-col rule removed; stays 3-up at all widths */
.fyt-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.email-form { flex-direction: column; }
.page-num { font-size: 64px; }
}
/* ── TREATMENT IMAGES (real photos via Unsplash CDN) ─── */
.treat-img {
width: 100%; height: 100%; object-fit: cover;
display: block; position: absolute; inset: 0;
transition: transform .4s ease;
}
.gallery-card:hover .treat-img { transform: scale(1.04); }
.gallery-card-img { position: relative; }
/* Fallback ph shown only when img fails */
.gallery-card-img .ph {
position: absolute; inset: 0; z-index: 1;
}
.gallery-card-img img.loaded + .ph { display: none; }
/* ── LOGO text fix ─────────────────────────────────────── */
/* ensure nav logo subtitle is readable on cream bg */
.nav-logo em { color: var(--laser-mid) !important; }
/* ── FIX: white text on light laser-lite backgrounds ─── */
.page-hero.laser-hero .page-num { color: rgba(255,255,255,.06); }
/* Ensure proper contrast on page hero variants */
.page-hero h1, .page-hero p, .page-hero .breadcrumb,
.page-hero .breadcrumb a { /* already white - fine */ }
/* Fix light-background section headings that were inheriting white */
.sec-head h2 { color: var(--laser-deep); }
.sec-head.beauty h2 { color: var(--beauty-deep); }
/* ── PACKAGES page fix ─────────────────────────────────── */
.pkg-detail-grid { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: start; }
/* ── SKIN CONCERNS page ────────────────────────────────── */
.concern-full-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.concern-full-card {
flex: 0 0 calc((100% - 48px) / 3);
background: var(--white);
border: 1px solid var(--cream-deep);
border-radius: var(--rl);
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: all var(--t);
box-shadow: 0 2px 14px rgba(55,50,44,.05);
}
.concern-full-card:hover { border-color: var(--laser-mid); transform: translateY(-2px); box-shadow: var(--sh2); }
.concern-full-card.beauty-concern { }
.concern-full-card.beauty-concern:hover { border-color: var(--beauty); }
.concern-card-img { width: 100%; height: 220px; flex-shrink: 0; position: relative; overflow: hidden; }
.concern-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.concern-full-card:hover .concern-card-img img { transform: scale(1.05); }
/* tap/press feedback — touch devices have no :hover */
.concern-full-card:active { transform: scale(.985); box-shadow: var(--sh2); border-color: var(--laser-mid); }
.concern-full-card.beauty-concern:active { border-color: var(--beauty); }
/* persistent "tap to open" affordance so cards read as interactable on mobile */
.concern-full-card .concern-card-img::after {
content: none;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.94); color: var(--laser-deep);
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 600; line-height: 1;
box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 3; transition: all var(--t);
}
.concern-full-card.beauty-concern .concern-card-img::after { color: var(--beauty); }
.concern-full-card:hover .concern-card-img::after,
.concern-full-card:active .concern-card-img::after { background: var(--laser-deep); color: #fff; }
.concern-full-card.beauty-concern:hover .concern-card-img::after,
.concern-full-card.beauty-concern:active .concern-card-img::after { background: var(--beauty); color: #fff; }
.beauty-concern .concern-card-img { height: 280px; }
.beauty-concern .concern-card-img img { object-position: 72% center; }
.concern-card-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.concern-card-body .concern-type { font-size:12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; display: inline-block; padding: 3px 9px; border-radius: 20px; }
.concern-card-body h3 { font-size: 17px; color: var(--laser-deep); margin-bottom: 7px; }
.concern-card-body.beauty-body h3 { color: var(--beauty-deep); }
.concern-card-body p { font-size: 13px; color: var(--mid); line-height: 1.65; margin-bottom: 14px; }
.concern-arrow { font-size:12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--laser-mid); display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; }
.concern-full-card.beauty-concern .concern-arrow { color: var(--beauty); }
.concern-group-h { font-family: var(--serif); font-size: clamp(23px,2.7vw,32px); color: var(--ink); text-align: center; margin: 0 0 6px; font-weight: 500; }
.concern-group-sub { text-align: center; color: var(--mid); font-size: 14px; margin: 0 auto 34px; max-width: 540px; line-height: 1.6; }
.tx-teal .concern-group-h { color: #fff; }
.tx-teal .concern-group-sub { color: rgba(255,255,255,.78); }
@media (max-width: 1000px) { .concern-full-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 560px) { .concern-full-grid { gap: 10px; margin-left: -12px; margin-right: -12px; } .concern-full-card { flex-basis: calc((100% - 10px) / 2); } .concern-card-img, .beauty-concern .concern-card-img { height: 150px !important; } }
@media (max-width: 800px) {
.concern-full-grid { grid-template-columns: 1fr; }
.pkg-detail-grid { grid-template-columns: 1fr; }
}
/* Mobile (phone-portrait): stack each concern card vertically so the body isn't crushed */
@media (max-width: 600px) {
.concern-full-card { flex-direction: column; }
.concern-card-img { width: 100%; height: 200px; }
.concern-card-body { padding: 20px; }
.concern-card-body h3 { font-size: 16px; }
.concern-card-body p { font-size: 13px; }
}
/* ── INDEX.HTML supplementary classes ─────────────────── */
/* Logo splash */
.logo-splash{display:none}
.logo-mark{width:64px;height:64px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:32px;color:var(--white);font-weight:600;margin-bottom:2px}
.logo-name{font-family:var(--sans);font-size:clamp(26px,5vw,48px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white);line-height:1}
.logo-tag{font-family:var(--sans);font-size:clamp(12px,2vw,16px);font-weight:300;letter-spacing:.22em;color:var(--laser-mid)}
.logo-div{width:40px;height:1px;background:rgba(255,255,255,.18);margin:4px 0}
.logo-creds{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.35);text-transform:uppercase}
.logo-sep{opacity:.3}
/* Site nav (new naming) */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(248,244,238,.96);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.07)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-btns{display:flex;gap:8px}
.has-dd{position:relative}
.has-dd .dd{display:none;position:absolute;top:100%;left:-12px;min-width:210px;background:var(--white);border:1px solid var(--cream-deep);border-radius:var(--rl);box-shadow:var(--sh2);padding:8px;z-index:250}
.has-dd:hover .dd{display:block}
.has-dd .dd a{display:block;padding:9px 13px;font-size:12px;color:var(--ink);text-decoration:none;border-radius:var(--r);transition:background var(--t)}
.has-dd .dd a:hover{background:var(--laser-lite);color:var(--laser)}
.beauty-item .dd a:hover{background:var(--beauty-lite);color:var(--beauty-deep)}
.has-dd .dd hr{border:none;border-top:1px solid var(--cream-deep);margin:5px 0}
.beauty-item>a{color:var(--beauty-deep)!important}
/* Mobile bar (new) */
.mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--white);border-top:1px solid var(--cream-deep);padding:10px 16px;gap:8px;box-shadow:0 -6px 24px rgba(0,0,0,.09)}
.mob-bar .btn{flex:1;height:48px;font-size:12px}
/* Buttons (new short names) */
.btn-pr{background:var(--laser);color:var(--white)}
.btn-pr:hover{background:var(--laser-mid);transform:translateY(-1px);box-shadow:var(--sh2)}
.btn-ol{background:transparent;color:var(--laser);border:1.5px solid var(--laser)}
.btn-ol:hover{background:var(--laser);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,115,119,.35)}
.btn-wh{background:var(--white);color:var(--laser-deep)}
.btn-wh:hover{background:var(--white);color:var(--laser);box-shadow:0 6px 20px rgba(0,0,0,.15);transform:translateY(-2px)}
.btn-gh{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25)}
.btn-gh:hover{background:rgba(255,255,255,.12)}
/* Explore cards (homepage hero) */
.explore-grid{display:grid;grid-template-columns:1fr 1fr}
.exp-card{position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 44px;text-decoration:none}
.lsr{background:var(--dark)}
.bty{background:var(--dark)}
.exp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .4s,transform .4s}
.exp-card:hover .exp-photo{opacity:.45;transform:scale(1.03)}
.exp-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 65%);z-index:1}
.exp-body{position:relative;z-index:2}
.exp-eye{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.exp-card h2{font-size:clamp(28px,3.5vw,42px);color:var(--white);margin-bottom:10px;line-height:1.08}
.exp-card h2 em{font-style:italic;font-weight:300}
.exp-desc{font-size:13px;color:rgba(255,255,255,.68);line-height:1.65;max-width:340px;margin-bottom:20px}
.exp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.exp-tag{font-size:12px;color:rgba(255,255,255,.5);padding:3px 9px;border:1px solid rgba(255,255,255,.18);border-radius:20px}
.exp-btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;background:var(--white);border-radius:4px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all .2s}
.lsr .exp-btn{color:var(--laser-deep)}
.bty .exp-btn{color:var(--beauty-deep)}
.exp-btn:hover{background:var(--cream);transform:translateY(-1px)}
/* Home intro */
.home-intro{background:var(--dark);padding:48px 0 48px;text-align:center}
.priv-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mid);background:var(--white);border:1px solid var(--cream-deep);border-radius:20px;padding:5px 14px;margin-bottom:28px}
.home-h1{font-size:clamp(38px,5vw,60px);color:var(--laser-deep);margin-bottom:14px;line-height:1.08}
.home-h1 em{font-style:italic;font-weight:300;color:var(--laser-mid)}
.home-p{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:0;max-width:560px;margin-left:auto;margin-right:auto}
.home-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
/* Section tag (new) */
.sec-tag{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-tag-line{width:28px;height:1px;background:var(--dark);flex-shrink:0}
.sec-tag span{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--laser-mid)}
.sec-tag.light .sec-tag-line{background:rgba(255,255,255,.3)}
.sec-tag.light span{color:rgba(255,255,255,.45)}
/* BG helpers (new) */
.bg-L{background:var(--laser)}
.bg-c2{background:var(--cream-deep)}
.bg-choc{background:var(--charcoal)}
/* Footer (new) */
.site-footer{background:var(--charcoal);padding:60px 0 24px}
.footer-cols{display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:52px;margin-bottom:44px}
.footer-addr{font-size:11px;color:rgba(255,255,255,.22);margin-top:10px;line-height:1.75}
.footer-addr span{color:rgba(255,255,255,.18)}
/* Rev grid (new) */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.explore-grid{grid-template-columns:1fr}.exp-card{min-height:360px;padding:28px}.mob-bar{display:flex}body{padding-bottom:72px}.rev-grid{grid-template-columns:1fr}}
@media(max-width:600px){.home-ctas{flex-direction:column;align-items:center}.footer-cols{grid-template-columns:1fr;gap:24px}}
/* ── Photo ID labels (remove this block when going live) ── */
.photo-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.photo-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-wrap::after {
content: attr(data-pid);
position: absolute;
top: 6px;
left: 6px;
background: rgba(0,0,0,.72);
color: #fff;
font-size:12px;
font-family: monospace;
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
z-index: 10;
line-height: 1.4;
}
/* For position:absolute images (hero cards etc) */
.photo-abs-wrap {
position: absolute;
inset: 0;
}
.photo-abs-wrap::after {
content: attr(data-pid);
position: absolute;
top: 6px;
left: 6px;
background: rgba(0,0,0,.72);
color: #fff;
font-size:12px;
font-family: monospace;
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
z-index: 10;
line-height: 1.4;
}
.photo-abs-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── TREATMENT SIDEBAR LAYOUT ── */
.treat-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 36px;
align-items: start;
padding: 0;
}
@media(max-width:800px){
.treat-layout { grid-template-columns: 1fr; }
.treat-sidebar { display: none; }
}
.treat-sidebar {
background: var(--white);
border: 1px solid var(--cream-deep);
border-radius: var(--rl);
padding: 20px;
position: sticky;
top: 80px;
}
.tsb-header {
display: flex; align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.tsb-title {
font-size: 15px; font-weight: 600;
color: var(--ink);
}
.tsb-clear {
font-size: 11px; color: var(--laser);
background: none; border: none;
cursor: pointer; text-decoration: underline;
padding: 0; display: none;
}
.tsb-group { margin-bottom: 8px; border-top: 1px solid var(--cream-deep); padding-top: 14px; }
.tsb-group-btn {
width: 100%; display: flex; align-items: center;
justify-content: space-between;
font-size: 13px; font-weight: 600; color: var(--ink);
background: none; border: none; cursor: pointer;
padding: 0 0 10px; text-align: left;
}
.tsb-chevron { font-size: 12px; transition: transform .2s; }
.tsb-group-btn.collapsed .tsb-chevron { transform: rotate(-90deg); }
.tsb-group-body { display: flex; flex-direction: column; gap: 8px; }
.tsb-group-body.hidden { display: none; }
.tsb-check {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--mid); cursor: pointer;
}
.tsb-check input[type=checkbox] {
width: 16px; height: 16px; accent-color: var(--laser);
cursor: pointer; flex-shrink: 0;
}
.tsb-check span:first-of-type { flex: 1; }
.tsb-count {
font-size: 11px; color: var(--muted);
background: var(--cream-deep); border-radius: 10px;
padding: 1px 7px;
}
/* Topbar */
.treat-topbar {
display: flex; align-items: center;
gap: 12px; flex-wrap: wrap;
margin-bottom: 20px; min-height: 28px;
}
.treat-count {
font-size: 13px; color: var(--muted);
}
.treat-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.treat-pill {
display: flex; align-items: center; gap: 5px;
background: var(--laser-lite); border: 1px solid rgba(13,115,119,.2);
border-radius: 20px; padding: 3px 10px;
font-size: 11px; font-weight: 600; color: var(--laser-deep);
text-transform: capitalize;
}
.treat-pill-x {
cursor: pointer; font-size: 13px; line-height: 1;
color: var(--laser); margin-left: 2px;
}
/* Pagination */
.treat-pagination {
display: flex; align-items: center;
justify-content: center; gap: 20px;
margin-top: 0; padding-top: 16px;
border-top: 1px solid var(--cream-deep);
}
.tpg-btn {
font-size: 13px; font-weight: 600;
color: var(--laser); background: none;
border: 1.5px solid var(--laser);
border-radius: var(--r); padding: 8px 20px;
cursor: pointer; transition: all .15s;
}
.tpg-btn:hover { background: var(--laser); color: #fff; }
.tpg-btn:disabled { opacity: .3; cursor: not-allowed; }
.tpg-btn:disabled:hover { background: none; color: var(--laser); }
.tpg-info {
font-size: 13px; color: var(--muted);
}
.treat-pagination-top {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--cream-deep);
border-top: none;
padding-top: 0;
margin-top: 0;
}
.gallery-card.beauty-card .gallery-card-footer { background: var(--beauty-lite, #fdf6f9); }
/* Bundle cards — prominent savings display (v246) */
.gallery-card.bundle-card {
position: relative;
border: 1.5px solid var(--laser-mid);
box-shadow: 0 2px 12px rgba(20, 167, 160, 0.08);
}
.gallery-card.bundle-card:hover {
border-color: var(--laser);
box-shadow: 0 4px 18px rgba(20, 167, 160, 0.15);
}
.gallery-card-badge.bundle-badge {
background: rgba(20, 167, 160, .5);
color: #fff;
font-weight: 700;
letter-spacing: 0.1em;
padding: 6px 12px;
font-size: 11px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.gallery-card-type.bundle-type {
color: var(--laser);
font-weight: 700;
letter-spacing: 0.14em;
}
.bundle-savings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin: 12px 0;
background: var(--laser-lite);
border-radius: 8px;
border-left: 3px solid var(--laser);
}
.bundle-price-line {
display: flex;
flex-direction: column;
gap: 2px;
}
.bundle-price {
font-family: var(--sans);
font-size: 22px;
font-weight: 600;
color: var(--laser-deep);
line-height: 1;
}
.bundle-strike {
font-size: 11px;
color: var(--muted);
text-decoration: line-through;
font-weight: 500;
}
.bundle-save-pill {
background: var(--laser-deep);
color: #fff;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* ============================================================
TEXTURE SYSTEM v250
Per the texture brief: textures should be FELT not seen.
Subtle overlays on top of solid colour bases.
Distribution: Plaster 45% / Paper 20% / Graphite 15% / Teal 12% / Marble 5% / Glass 3%
============================================================ */
/* 01 — Warm Clinical Plaster (the base wall) */
.tx-plaster {
position: relative;
background: var(--cream);
}
.tx-plaster::before {
content: '';
position: absolute; inset: 0;
background: url('images/01_WARM_CLINICAL_PLASTER.jpg') repeat;
opacity: 0.40;
pointer-events: none;
z-index: 0;
}
.tx-plaster > * { position: relative; z-index: 1; }
/* 02 — Dark Graphite Brushed Charcoal */
.tx-graphite {
position: relative;
background: #2B2B2B;
}
.tx-graphite::before {
content: '';
position: absolute; inset: 0;
background: url('images/02_DARK_GRAPHITE_BRUSHED_CHARCOAL.jpg') repeat;
opacity: 0.70;
pointer-events: none;
z-index: 0;
}
.tx-graphite > * { position: relative; z-index: 1; }
/* 03 — Mineral Teal Surface (premium teal panels) */
.tx-teal {
position: relative;
background: var(--beauty-deep);
}
.tx-teal::before {
content: '';
position: absolute; inset: 0;
background: url('images/03_MINERAL_TEAL_SURFACE.jpg') repeat;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.tx-teal > * { position: relative; z-index: 1; }
/* Variant: Laser teal */
.tx-teal-laser {
position: relative;
background: var(--laser-deep);
}
.tx-teal-laser::before {
content: '';
position: absolute; inset: 0;
background: url('images/03_MINERAL_TEAL_SURFACE.jpg') repeat;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.tx-teal-laser > * { position: relative; z-index: 1; }
/* 04 — Refined Dark Marble (rare, statement-only) */
.tx-marble {
position: relative;
background: #1a3f3e url('images/04_REFINED_DARK_MARBLE.jpg') repeat;
}
.tx-marble::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(8, 115, 112, 0.55) 0%, rgba(10, 60, 58, 0.7) 100%);
pointer-events: none;
z-index: 0;
}
.tx-marble > * { position: relative; z-index: 1; }
/* 05 — Luxury Paper Soft Grain (information density) */
.tx-paper {
position: relative;
background: #FAFAF8;
}
.tx-paper::before {
content: '';
position: absolute; inset: 0;
background: url('images/05_LUXURY_PAPER_SOFT_GRAIN.jpg') repeat;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.tx-paper > * { position: relative; z-index: 1; }
/* 06 — Frosted Mineral Glass (overlays, modals) */
.tx-glass {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.tx-glass-image {
position: relative;
}
.tx-glass-image::before {
content: '';
position: absolute; inset: 0;
background: url('images/06_FROSTED_MINERAL_GLASS.jpg') repeat;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.tx-glass-image > * { position: relative; z-index: 1; }
.tx-graphite-soft {
position: relative;
background: #3a3a3a;
}
.tx-graphite-soft::before {
content: '';
position: absolute; inset: 0;
background: url('images/02_DARK_GRAPHITE_BRUSHED_CHARCOAL.jpg') repeat;
opacity: 0.85;
pointer-events: none;
z-index: 0;
}
.tx-graphite-soft > * { position: relative; z-index: 1; }
/* Text colour overrides inside dark sections */
.tx-graphite-soft h2 { color: #ffffff !important; }
.tx-graphite-soft p { color: rgba(255,255,255,0.78) !important; }
.tx-graphite-soft .sec-tag span { color: rgba(255,255,255,0.55) !important; }
.tx-graphite-soft .sec-tag-line { background: rgba(255,255,255,0.25) !important; }
.tx-graphite-soft .cat-header h2,
.tx-graphite-soft .cat-header { border-color: rgba(255,255,255,0.15) !important; }
.tx-graphite-soft .cat-header h2 { color: #fff !important; }
.tx-graphite-soft .cat-count { color: rgba(255,255,255,0.6) !important; }
/* Re-establish dark text inside white cards that live in dark sections (v280, extended v295) */
.tx-graphite-soft .rev-card p,
.tx-graphite-soft .rev-card .rev-name,
.tx-graphite-soft .rev-card .rev-detail,
.tx-graphite-soft .rev-card .rev-text { color: var(--ink) !important; }
.tx-graphite-soft .rev-card .rev-detail { color: var(--mid) !important; }
/* Gallery cards inside dark sections — body text must stay dark on white card bg */
.tx-graphite-soft .gallery-card:not(.premium-flagship) h3 { color: var(--laser-deep) !important; }
.tx-graphite-soft .gallery-card.beauty-card:not(.premium-flagship) h3 { color: var(--beauty-deep) !important; }
.tx-graphite-soft .gallery-card:not(.premium-flagship) p { color: var(--mid) !important; }
.tx-graphite-soft .gallery-card:not(.premium-flagship) .gallery-card-type { color: var(--mid) !important; }
.tx-graphite-soft .gallery-card:not(.premium-flagship) .gallery-card-dur { color: var(--mid) !important; }
/* Debug label */
/* tx-marble-section — Dark marble for full-section backgrounds (Programmes section etc) */
.tx-marble-section {
position: relative;
background: #1a1a1a url('images/04_REFINED_DARK_MARBLE.jpg') repeat;
}
.tx-marble-section::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(8, 115, 112, 0.65) 0%, rgba(10, 50, 48, 0.8) 100%);
pointer-events: none;
z-index: 0;
}
.tx-marble-section > * { position: relative; z-index: 1; }
/* Text colour overrides inside marble sections */
.tx-marble-section h2 { color: #ffffff !important; }
.tx-marble-section p { color: rgba(255,255,255,0.78) !important; }
.tx-marble-section .sec-tag span { color: var(--accent) !important; }
.tx-marble-section .sec-tag-line { background: rgba(232,191,163,0.4) !important; }
.tx-marble-section .cat-header h2,
.tx-marble-section .cat-header { border-color: rgba(255,255,255,0.15) !important; }
.tx-marble-section .cat-count { color: rgba(255,255,255,0.6) !important; }
/* Debug label */
.page-hero.p01-logo-hero {
background: #2B2B2B url('images/hero-marble.jpg') center / cover no-repeat;
padding: 88px 0 88px;
min-height: 520px;
display: flex;
align-items: center;
position: relative;
}
.page-hero.p01-logo-hero .page-hero-bg {
background:
linear-gradient(100deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 35%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0) 100%),
linear-gradient(135deg, rgba(8, 115, 112, 0.35) 0%, rgba(10, 50, 48, 0.55) 100%);
opacity: 1;
z-index: 1;
}
.page-hero.p01-logo-hero .page-hero-glow { display: none; }
.page-hero.p01-logo-hero .page-hero-inner { position: relative; z-index: 2; width: 100%; }
.p01-hero-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 56px;
align-items: center;
}
.p01-hero-copy { max-width: 480px; }
.p01-hero-eyebrow {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 16px;
font-weight: 500;
}
.page-hero.p01-logo-hero h1 {
font-family: var(--serif);
color: #fff;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.15;
letter-spacing: -.015em;
margin-bottom: 16px;
font-weight: 600;
}
.page-hero.p01-logo-hero h1 em {
color: var(--laser-mid);
font-style: italic;
}
.page-hero.p01-logo-hero p {
font-size: 14px;
color: rgba(255,255,255,.82);
line-height: 1.7;
max-width: none;
}
.p01-hero-logo {
display: flex;
align-items: center;
justify-content: center;
}
.p01-hero-logo img {
width: 100%;
height: auto;
max-width: 620px;
display: block;
}
/* Stack vertically on smaller screens — logo above, copy below */
@media (max-width: 880px) {
.p01-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.p01-hero-logo { order: -1; }
.p01-hero-logo img { max-width: 480px; margin: 0 auto; }
.page-hero.p01-logo-hero { padding: 56px 0 56px; min-height: 0; }
}
/* p01 homepage hero — launch corner ribbon (v967). Bold promotional banner pinned
to the top-left of the marble, rising lower-left to upper-right. Clipped by the
hero's existing overflow:hidden. Promo yellow, dark teal text, large on desktop.
Three lines on desktop; the qualifier line drops on mobile to keep it readable. */
.hero-ribbon { position: absolute; top: 0; left: 0; width: 258px; height: 258px; overflow: hidden; z-index: 3; pointer-events: none; }
.hero-ribbon .hrb-band { position: absolute; left: -85px; top: 48px; width: 360px; transform: rotate(-45deg); background: rgba(255,196,0,0.5); color: #0C3B38; text-align: center; padding: 11px 0; box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.hero-ribbon .hrb-l1 { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.hero-ribbon .hrb-l2 { display: block; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; font-weight: 700; line-height: 1.02; margin: 2px 0; }
.hero-ribbon .hrb-l3 { display: block; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; font-weight: 500; opacity: .92; }
@media (max-width: 880px) {
.hero-ribbon { width: 168px; height: 168px; }
.hero-ribbon .hrb-band { left: -58px; top: 36px; width: 236px; padding: 8px 0; background: #FFC400; box-shadow: 0 4px 16px rgba(0,0,0,0.34); }
.hero-ribbon .hrb-l1 { font-size: 9.5px; letter-spacing: .12em; }
.hero-ribbon .hrb-l2 { font-size: 17px; }
.hero-ribbon .hrb-l3 { display: none; }
}
/* v1018 — on narrower desktops the hero copy drifts toward the left corner, so
the ribbon mirrors to the top-right (band rises lower-right to upper-left). */
@media (min-width: 881px) and (max-width: 1500px) {
.hero-ribbon { left: auto; right: 0; }
.hero-ribbon .hrb-band { left: auto; right: -85px; transform: rotate(45deg); background: #FFC400; box-shadow: 0 4px 16px rgba(0,0,0,0.34); }
}
/* v969 — hide the corner ribbon on mobile for the laser/beauty photo heroes only,
where it overlapped the headline. Homepage keeps it (logo is centred). */
@media (max-width: 880px) {
.laser-hero .hero-ribbon, .beauty-hero .hero-ribbon { display: none; }
}
/* ============================================================
p01 LOGO HERO — variant A (matches iteration A)
Marble backdrop + teal diagonal wash · logo above · copy centred
============================================================ */
.page-hero.p01-logo-hero {
position: relative;
padding: 90px 0;
background: #2B2B2B url('images/hero-marble.jpg') center / cover no-repeat;
overflow: hidden;
}
.page-hero.p01-logo-hero .page-hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(43, 43, 43, 0.25) 0%, rgba(20, 20, 20, 0.40) 100%);
pointer-events: none;
z-index: 1;
}
.page-hero.p01-logo-hero .page-hero-inner {
position: relative;
z-index: 2;
}
.p01-hero-logo {
margin: 0 auto 36px;
text-align: center;
}
.p01-hero-logo img {
display: block;
margin: 0 auto;
max-width: 900px;
width: 90%;
height: auto;
}
.p01-hero-copy {
max-width: 580px;
margin: 0 auto;
text-align: center;
}
.p01-hero-eyebrow {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin-bottom: 14px;
font-weight: 500;
}
.page-hero.p01-logo-hero h1 {
font-family: var(--serif);
font-weight: 600;
color: #fff;
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.15;
letter-spacing: -.015em;
margin-bottom: 16px;
}
.page-hero.p01-logo-hero h1 em {
color: var(--laser-mid);
font-style: italic;
}
.page-hero.p01-logo-hero p {
font-size: 14px;
color: rgba(255,255,255,.78);
line-height: 1.7;
max-width: none;
}
@media (max-width: 880px) {
.page-hero.p01-logo-hero { padding: 56px 0; }
.p01-hero-logo img { max-width: 480px; width: 90%; }
}
/* Footer logo image (replaces text-based footer logo, v279) */
.footer-logo {
display: block !important;
margin-bottom: 14px;
}
.footer-logo-img {
display: block;
width: 100%;
max-width: 280px;
height: auto;
}
@media (max-width: 880px) {
.footer-logo-img { max-width: 220px; }
}
/* ── p12 laser-skin: new sections (v303) ─────────────────── */
/* How it works — 3-step grid */
.ls-how-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 800px) { .ls-how-grid { grid-template-columns: 1fr; } }
.ls-how-step {
padding: 28px 24px;
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.12);
border-radius: var(--rl);
position: relative;
}
.ls-how-num {
font-family: var(--serif);
font-size: 36px;
color: var(--accent);
font-weight: 500;
line-height: 1;
margin-bottom: 16px;
opacity: 0.85;
}
.ls-how-step h3 {
font-family: var(--serif);
font-size: 18px;
color: var(--beauty-deep);
margin: 0 0 10px;
font-weight: 500;
}
.ls-how-step p {
font-size: 13.5px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* What to expect — 4-tile grid */
.ls-expect-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 880px) { .ls-expect-grid { grid-template-columns: repeat(2, 1fr); } }
.ls-expect-tile {
padding: 26px 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--rl);
text-align: center;
}
.ls-expect-icon {
font-size: 22px;
color: var(--accent);
margin-bottom: 12px;
opacity: 0.7;
}
.ls-expect-label {
font-size:12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8px;
}
.ls-expect-value {
font-family: var(--serif);
font-size: 20px;
color: #fff;
font-weight: 500;
line-height: 1.2;
margin-bottom: 6px;
}
.ls-expect-note {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
}
/* Your journey — 4-step vertical list */
.ls-journey {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
}
.ls-journey-step {
display: flex;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid rgba(13, 115, 119, 0.1);
}
.ls-journey-step:last-child { border-bottom: none; }
.ls-journey-num {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--beauty-deep);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
}
.ls-journey-body { flex: 1; }
.ls-journey-body h4 {
font-family: var(--serif);
font-size: 17px;
color: var(--beauty-deep);
margin: 0 0 8px;
font-weight: 500;
}
.ls-journey-body p {
font-size: 13.5px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* FAQ accordion */
.ls-faqs { display: flex; flex-direction: column; gap: 10px; }
.ls-faq {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.12);
border-radius: 8px;
overflow: hidden;
}
.ls-faq summary {
padding: 18px 22px;
font-size: 14px;
font-weight: 500;
color: var(--beauty-deep);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 44px;
user-select: none;
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
content: '+';
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: var(--accent);
font-weight: 400;
transition: transform .2s;
}
.ls-faq[open] summary::after { content: '–'; }
.ls-faq p {
padding: 0 22px 20px;
font-size: 13.5px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* ── p12 laser-skin: before/after results section (v309) ─── */
.ls-results-frame {
position: relative;
max-width: 720px;
margin: 0 auto;
border-radius: var(--rl);
overflow: hidden;
box-shadow: 0 8px 28px rgba(13, 60, 60, 0.18);
}
.ls-results-frame img {
display: block;
width: 100%;
height: auto;
}
.ls-results-label {
position: absolute;
top: 14px;
padding: 6px 14px;
background: rgba(43, 43, 43, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size:12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 4px;
font-family: var(--sans);
}
.ls-label-before { left: 14px; }
.ls-label-after { right: 14px; }
.ls-results-disclaimer {
font-size: 11.5px;
color: var(--mid);
margin: 18px auto 0;
max-width: 640px;
text-align: center;
line-height: 1.55;
font-style: italic;
opacity: 0.85;
font-family: var(--sans);
}
@media (max-width: 600px) {
.ls-results-label { font-size:12px; padding: 4px 10px; top: 10px; }
.ls-label-before { left: 10px; }
.ls-label-after { right: 10px; }
}
/* ── p12 laser-skin: split intro section (v310) ───────────── */
.ls-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.ls-split-left { min-width: 0; }
.ls-split-right { min-width: 0; }
.ls-meta-pill {
display: inline-block;
padding: 6px 14px;
background: rgba(13, 115, 119, 0.08);
color: var(--beauty-deep);
font-size: 11.5px;
font-weight: 500;
border-radius: 100px;
font-family: var(--sans);
margin-right: 8px;
margin-bottom: 8px;
border: 1px solid rgba(13, 115, 119, 0.15);
letter-spacing: 0.03em;
}
/* When image column hidden (vascular/rejuvenation): text takes full width */
.ls-split.no-image { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.ls-split.no-image .ls-split-right { display: none; }
@media (max-width: 800px) {
.ls-split { grid-template-columns: 1fr; gap: 32px; }
.ls-split-right { order: -1; } /* image first on mobile */
}
/* ── p12 laser-skin: inline How-it-works steps inside split (v311) ─ */
.ls-split { align-items: start; } /* override align-items:center now that left is taller */
.ls-split-steps {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(13, 115, 119, 0.15);
}
.ls-split-steps-header {
font-size:12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
font-family: var(--sans);
}
.ls-split-step {
display: flex;
gap: 14px;
margin-bottom: 14px;
}
.ls-split-step:last-child { margin-bottom: 0; }
.ls-split-step-num {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 12.5px;
font-weight: 500;
margin-top: 1px;
}
.ls-split-step-body { flex: 1; min-width: 0; }
.ls-split-step-title {
font-size: 13.5px;
font-weight: 600;
color: var(--beauty-deep);
margin: 0 0 3px;
line-height: 1.3;
font-family: var(--sans);
}
.ls-split-step-text {
font-size: 12.5px;
color: var(--mid);
margin: 0;
line-height: 1.55;
font-family: var(--sans);
}
/* Shrink the photo so left column doesn't dominate visually */
.ls-split-right .ls-results-frame {
max-width: 460px;
margin: 0 auto;
}
/* ── p12 laser-skin: v313 — Gaida strip, reviews, cross-discovery, real icons ── */
/* Gaida credentials strip */
.ls-gaida-strip { padding: 22px 0 24px; border-top: 1px solid rgba(13, 115, 119, 0.08); border-bottom: 1px solid rgba(13, 115, 119, 0.08); }
.ls-gaida-inner {
display: flex;
align-items: center;
gap: 22px;
max-width: 820px;
margin: 0 auto;
}
.ls-gaida-avatar {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--beauty-deep), var(--accent));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.04em;
box-shadow: 0 3px 10px rgba(13, 60, 60, 0.18);
}
.ls-gaida-avatar span { line-height: 1; }
.ls-gaida-text { flex: 1; min-width: 0; }
.ls-gaida-credentials {
font-size: 14px;
color: var(--ink);
line-height: 1.55;
margin: 0 0 6px;
font-family: var(--sans);
}
.ls-gaida-credentials strong { color: var(--beauty-deep); font-weight: 600; }
.ls-gaida-link {
font-size: 12.5px;
color: var(--accent);
text-decoration: none;
font-family: var(--sans);
font-weight: 500;
letter-spacing: 0.02em;
}
.ls-gaida-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
.ls-gaida-inner { flex-direction: column; text-align: center; gap: 14px; }
.ls-gaida-avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 19px; }
}
/* SVG icons in the typical-session tiles */
.ls-expect-icon svg {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
color: var(--accent);
opacity: 0.85;
}
/* "See more results" link below the photo */
.ls-results-more-link {
display: inline-block;
margin-top: 10px;
font-size: 12.5px;
color: var(--accent);
text-decoration: none;
font-family: var(--sans);
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
}
.ls-split-right { text-align: center; }
.ls-results-more-link:hover { text-decoration: underline; }
/* Reviews row — 3 quote cards */
.ls-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 800px) {
.ls-reviews-grid { grid-template-columns: 1fr; gap: 12px; }
}
.ls-review-card {
padding: 22px 20px;
background: #fff;
border-radius: var(--rl);
border: 1px solid rgba(13, 115, 119, 0.1);
display: flex;
flex-direction: column;
gap: 14px;
}
.ls-review-quote {
font-family: var(--serif);
font-size: 14.5px;
color: var(--beauty-deep);
line-height: 1.5;
font-style: italic;
flex: 1;
}
.ls-review-attrib {
font-size: 12px;
color: var(--mid);
font-family: var(--sans);
letter-spacing: 0.02em;
}
/* Cross-discovery strip */
.ls-cross-discovery { border-top: 1px solid rgba(13, 115, 119, 0.08); }
.ls-cross-inner {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
}
.ls-cross-label {
font-size:12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mid);
font-family: var(--sans);
}
.ls-cross-links {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.ls-cross-link {
display: flex;
flex-direction: column;
padding: 12px 20px;
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.15);
border-radius: var(--rs);
text-decoration: none;
transition: all .15s;
min-width: 200px;
}
.ls-cross-link:hover {
border-color: var(--accent);
background: rgba(13, 115, 119, 0.03);
transform: translateY(-1px);
}
.ls-cross-link-title {
font-family: var(--serif);
font-size: 15px;
color: var(--beauty-deep);
font-weight: 500;
margin-bottom: 3px;
}
.ls-cross-link-sub {
font-size: 12px;
color: var(--mid);
font-family: var(--sans);
}
/* ── p12 laser-skin: v315 — 3-column split (text | photo | bullets) ── */
.ls-split-3col {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
gap: 36px;
align-items: start;
}
.ls-split-text { min-width: 0; }
.ls-split-photo { min-width: 0; text-align: center; }
.ls-split-photo .ls-results-frame { max-width: 360px; margin: 0 auto; }
.ls-split-bullets { min-width: 0; }
.ls-bullets-header {
font-size:12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
font-family: var(--sans);
}
.ls-bullet {
display: flex;
gap: 12px;
margin-bottom: 18px;
align-items: flex-start;
}
.ls-bullet:last-child { margin-bottom: 0; }
.ls-bullet-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 13px;
font-weight: 500;
margin-top: 1px;
}
.ls-bullet-body { flex: 1; min-width: 0; }
.ls-bullet-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--beauty-deep);
margin: 0 0 4px;
font-family: var(--sans);
}
.ls-bullet-text {
font-size: 12.5px;
color: var(--mid);
margin: 0;
line-height: 1.55;
font-family: var(--sans);
}
/* When image hidden (vascular/rejuvenation no photo yet): collapse to 2-col */
.ls-split-3col.no-image {
grid-template-columns: 1.2fr 1fr;
}
.ls-split-3col.no-image .ls-split-photo { display: none; }
@media (max-width: 1024px) {
.ls-split-3col { grid-template-columns: 1fr 1fr; gap: 32px; }
.ls-split-bullets { grid-column: 1 / -1; }
.ls-split-bullets .ls-bullet { display: flex; }
/* On medium screens, show bullets as a horizontal 3-col row beneath */
.ls-bullets-grid-md {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
}
@media (max-width: 720px) {
.ls-split-3col { grid-template-columns: 1fr; gap: 28px; }
}
/* Expanded notes (v316) — accommodate longer practical detail */
.ls-expect-note {
font-size: 12px !important;
line-height: 1.5 !important;
margin-top: 8px !important;
}
.ls-expect-tile {
padding: 22px 18px !important;
text-align: left !important;
}
.ls-expect-icon {
text-align: center;
margin-bottom: 14px !important;
}
.ls-expect-label {
text-align: center;
margin-bottom: 6px !important;
}
.ls-expect-value {
text-align: center;
margin-bottom: 6px !important;
}
/* Hero gets curved bottom edge via polygon approximation of Bezier curve */
.page-hero.has-curve-bottom {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 30px),
93.7% calc(100% - 51px),
84.4% calc(100% - 62.5px),
75% calc(100% - 61.6px),
65.6% calc(100% - 56px),
56.3% calc(100% - 48px),
46.9% calc(100% - 40px),
37.5% calc(100% - 33.6px),
28.1% calc(100% - 30.5px),
18.8% calc(100% - 32.4px),
9.4% calc(100% - 41px),
0 calc(100% - 60px)
);
/* keep glow inside the clipped region */
overflow: hidden;
}
/* Section immediately below the curved hero — extend up to fill the clipped curve area */
.after-curve-hero {
margin-top: -60px;
padding-top: 100px !important;
position: relative;
z-index: 1;
}
/* Hide the old SVG wave styling on p12 — no longer needed */
.has-curve-bottom .hero-curve { display: none; }
@media (max-width: 700px) {
/* Smaller curve depth on mobile */
.page-hero.has-curve-bottom {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 20px),
93.7% calc(100% - 33px),
84.4% calc(100% - 40px),
75% calc(100% - 40px),
65.6% calc(100% - 36px),
56.3% calc(100% - 31px),
46.9% calc(100% - 26px),
37.5% calc(100% - 22px),
28.1% calc(100% - 20px),
18.8% calc(100% - 21px),
9.4% calc(100% - 27px),
0 calc(100% - 39px)
);
}
.after-curve-hero {
margin-top: -40px;
padding-top: 70px !important;
}
}
/* Laser treatment 4-card grid (v320) */
.gallery-grid.cols-4-laser {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1100px) {
.gallery-grid.cols-4-laser { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.gallery-grid.cols-4-laser { grid-template-columns: 1fr; }
}
/* Treatment cards with stacked session options (v321) — used on polynucleotides + pigmentation */
.treat-stack-grid {
display: grid;
gap: 18px;
}
.treat-stack-3 { grid-template-columns: repeat(3, 1fr); }
.treat-stack-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 960px) {
.treat-stack-3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.treat-stack-2 { grid-template-columns: 1fr; }
}
.treat-stack-card {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.12);
border-radius: var(--rl);
overflow: hidden;
display: flex;
flex-direction: column;
}
.treat-stack-header {
padding: 22px 22px 18px;
border-bottom: 1px solid rgba(13, 115, 119, 0.08);
}
.treat-stack-header h3 {
font-family: var(--serif);
font-size: 20px;
color: var(--beauty-deep);
margin: 0 0 6px;
font-weight: 500;
line-height: 1.25;
}
.treat-stack-header p {
font-size: 13px;
color: var(--mid);
line-height: 1.55;
margin: 0;
font-family: var(--sans);
}
.treat-stack-sessions {
display: flex;
flex-direction: column;
}
.treat-stack-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: center;
padding: 16px 22px;
border-top: 1px solid rgba(13, 115, 119, 0.06);
text-decoration: none;
color: inherit;
transition: background .15s;
}
.treat-stack-row:first-child { border-top: none; }
.treat-stack-row:hover { background: rgba(13, 115, 119, 0.03); }
.treat-stack-row.featured { background: rgba(13, 115, 119, 0.04); }
.treat-stack-row.featured:hover { background: rgba(13, 115, 119, 0.07); }
.treat-stack-label {
font-size: 14px;
color: var(--ink);
font-family: var(--sans);
font-weight: 500;
}
.treat-stack-save {
display: inline-block;
font-size:12px;
color: var(--accent);
background: rgba(13, 115, 119, 0.08);
padding: 2px 8px;
border-radius: 100px;
font-weight: 600;
letter-spacing: 0.03em;
margin-left: 8px;
vertical-align: middle;
}
.treat-stack-price {
font-family: var(--serif);
font-size: 20px;
color: var(--beauty-deep);
font-weight: 500;
white-space: nowrap;
}
.treat-stack-cta {
font-size: 12px;
color: var(--accent);
font-weight: 600;
letter-spacing: 0.04em;
white-space: nowrap;
}
/* v322 — fix cat-header excessive top gap inside section[data-cat-section] */
section[data-cat-section] .cat-header {
margin-top: 0;
}
/* v322 — photo at top of treat-stack-card */
.treat-stack-photo {
width: 100%;
height: 200px;
overflow: hidden;
background: #f0ede8;
position: relative;
}
.treat-stack-photo .photo-wrap,
.treat-stack-photo img {
width: 100%;
height: 100%;
display: block;
}
.treat-stack-photo img {
object-fit: cover;
}
.treat-stack-photo .ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f4ede4, #e8dfd3);
}
/* v325 — beauty page typography normalization */
/* Canonical section h2 for all beauty pages — matches laser-skin pattern */
.beauty-h2-section {
font-family: var(--serif);
font-size: clamp(24px, 3vw, 32px);
color: var(--beauty-deep);
margin: 0 0 16px;
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.005em;
}
/* Variant: tighter margin for headers immediately followed by sub-text/lede */
.beauty-h2-section--tight { margin: 0 0 8px; }
/* Variant: hero CTA section, white text */
.beauty-h2-section--invert {
color: #fff;
font-size: clamp(22px, 3vw, 36px);
margin: 0 0 12px;
}
/* Canonical hero subtitle for beauty pages — small, dimmed, max-width */
.beauty-hero-sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.78);
margin: 12px 0 0;
line-height: 1.6;
font-family: var(--sans);
max-width: 540px;
}
/* v328 — canonical session selector (ported from treatment.html so it works in style.css too) */
.session-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border: 1.5px solid var(--cream-deep);
border-radius: var(--r);
margin-bottom: 6px;
cursor: pointer;
transition: all .15s ease;
text-decoration: none;
color: var(--ink);
background: #fff;
user-select: none;
}
.session-option:hover { border-color: var(--laser-mid); background: var(--laser-lite); }
.session-option.beauty-opt:hover { border-color: var(--beauty); background: var(--beauty-lite); }
.session-option.best-val { border: 2px solid var(--laser-mid); }
.session-option.beauty-opt.best-val { border-color: var(--beauty); }
.sess-left { flex: 1; min-width: 0; }
.sess-name { font-size: 16px; font-weight: 500; color: var(--ink); font-family: var(--sans); }
.sess-dur { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; letter-spacing: 0.01em; }
.session-option.selected .sess-dur { color: rgba(255,255,255,.6); }
.sess-saving { font-size: 13px; color: var(--laser-deep); margin-top: 3px; font-weight: 500; font-family: var(--sans); }
.session-option.beauty-opt .sess-saving { color: var(--beauty-deep); }
.sess-badge {
display: inline-block;
margin-top: 6px;
font-size:12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 20px;
background: var(--laser);
color: #fff;
}
.session-option.beauty-opt .sess-badge { background: var(--beauty); }
.sess-right { text-align: right; flex-shrink: 0; }
.sess-price { font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--laser-deep); line-height: 1; }
.session-option.beauty-opt .sess-price { color: var(--beauty-deep); }
.sess-was { font-size: 13px; color: var(--muted); text-decoration: line-through; margin-top: 4px; font-family: var(--sans); }
/* v330 — Book button (ported from treatment.html, was inline) */
.sess-book-btn {
display: block;
width: 100%;
text-align: center;
padding: 16px;
border-radius: var(--r);
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: all .18s ease;
margin-top: 10px;
background: var(--cream-deep);
color: var(--muted);
pointer-events: none;
cursor: default;
border: none;
font-family: var(--sans);
}
.sess-book-btn.active {
background: var(--laser);
color: #fff;
pointer-events: auto;
cursor: pointer;
}
.sess-book-btn.active:hover {
background: var(--laser-mid);
transform: translateY(-1px);
box-shadow: var(--sh2);
}
.sess-book-btn.beauty-btn.active {
background: var(--beauty);
color: #fff;
pointer-events: auto;
cursor: pointer;
}
.sess-book-btn.beauty-btn.active:hover {
background: var(--beauty-mid);
transform: translateY(-1px);
}
/* Selected state for session-option (cross-page parity) */
.session-option.selected {
border: 2px solid var(--laser-deep);
background: var(--laser-deep);
color: #fff;
box-shadow: 0 0 0 3px rgba(9,83,86,.2);
}
.session-option.beauty-opt.selected {
border-color: var(--beauty-deep);
background: var(--beauty-deep);
box-shadow: 0 0 0 3px rgba(8,115,112,.2);
}
.session-option.selected .sess-name,
.session-option.selected .sess-price { color: #fff; }
/* v394 — guarantee price visibility on selected beauty cards regardless of source order */
.session-option.beauty-opt.selected .sess-price { color: #fff; }
.session-option.selected .sess-saving { color: rgba(255,255,255,.85); }
.session-option.selected .sess-was { color: rgba(255,255,255,.5); }
.session-option.selected .sess-badge { background: rgba(255,255,255,.25); }
/* v331 — vertical center alignment for split intro columns with photo */
.ls-split-3col {
align-items: center !important;
}
/* v331 — add a little breathing room around "See more results →" */
.ls-results-more-link {
display: inline-block;
margin-top: 14px;
}
/* v332 — laser-skin cat-header upsize: prominent section heading */
section[data-cat-section] .cat-header {
border-bottom: 1px solid rgba(13, 115, 119, 0.15);
padding-bottom: 18px;
margin-bottom: 32px;
}
section[data-cat-section] .cat-header h2 {
font-family: var(--serif) !important;
font-size: clamp(28px, 4vw, 42px) !important;
color: var(--beauty-deep) !important;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.15;
}
section[data-cat-section] .cat-header .cat-count {
font-size: 14px !important;
color: var(--mid);
font-family: var(--sans);
margin-left: 16px;
font-style: italic;
}
/* When section has dark bg, invert colors */
section[data-cat-section].tx-graphite-soft .cat-header {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
section[data-cat-section].tx-graphite-soft .cat-header h2 {
color: #fff !important;
}
section[data-cat-section].tx-graphite-soft .cat-header .cat-count {
color: rgba(255, 255, 255, 0.65);
}
/* The "Larger or different areas" consultation CTA stays on white — already pops on dark bg */
/* v334 — Refined consult card on light bg (no longer transparent) */
.treat-stack-card.consult-card {
background: #fff;
}
.consult-only-block {
padding: 20px 6px 6px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 14px;
min-height: 200px; /* matches typical Nose/Face card session area height */
}
.consult-only-copy {
font-size: 13.5px;
line-height: 1.6;
color: var(--mid);
margin: 0;
font-family: var(--sans);
text-align: left;
}
.consult-only-copy strong {
color: var(--ink);
font-weight: 600;
display: block;
margin-bottom: 6px;
}
.treat-stack-card.consult-card .sess-book-btn {
margin-top: auto;
}
/* v334 — split intro text card + cards-light bg adjustments */
/* Wrap the description column in a visually distinct card */
.ls-split-text {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.10);
border-left: 3px solid var(--accent);
border-radius: 6px;
padding: 24px 26px;
}
.ls-split-text .sec-tag { margin-top: 0; }
/* The new "cards-light" section background — warmer mid-tone taupe */
.tx-cards-light {
position: relative;
}
.tx-cards-light .treat-stack-card {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.08);
}
/* Consultation-only card variant — restored for v334 with refined sizing */
.treat-stack-card.consult-card {
background: #fff;
}
.consult-only-block {
padding: 20px 4px 4px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 14px;
height: 100%;
}
.consult-only-copy {
font-size: 13.5px;
line-height: 1.6;
color: var(--mid);
margin: 0;
font-family: var(--sans);
}
.consult-only-copy strong {
color: var(--beauty-deep);
font-weight: 600;
}
.treat-stack-card.consult-card .sess-book-btn {
margin-top: auto;
}
/* Make sure 3-card grid collapses well */
@media (max-width: 1100px) {
.treat-stack-grid.treat-stack-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.treat-stack-grid.treat-stack-3 { grid-template-columns: 1fr; }
}
/* v334 — boxed text card in the split intro left column */
.ls-split-text {
background: #fff;
padding: 28px 30px;
border-radius: 10px;
border: 1px solid rgba(13, 115, 119, 0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
/* v334 — consultation-only treatment-stack-card polish */
.treat-stack-card.consult-card {
background: #fff;
}
.consult-only-block {
padding: 22px 22px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.consult-only-copy {
font-size: 14px;
line-height: 1.65;
color: var(--mid);
margin: 0;
font-family: var(--sans);
}
.treat-stack-card.consult-card .sess-book-btn {
margin-top: 6px;
}
/* v335 — bullets vertically distributed across full column height, more space between each */
.ls-split-bullets {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
height: 100%;
}
.ls-bullet {
margin-bottom: 0 !important; /* gap on parent handles spacing now */
}
/* v335 — make split rows stretch so bullets can fill column height */
.ls-split-3col {
align-items: stretch !important;
}
.ls-split-text,
.ls-split-bullets,
.ls-split-photo {
display: flex;
flex-direction: column;
justify-content: center;
}
/* v335 — ensure What to Expect tiles render correctly on dark bg */
.tx-graphite-soft .ls-expect-tile {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
}
.tx-graphite-soft .ls-expect-icon { color: rgba(255, 255, 255, 0.7); }
.tx-graphite-soft .ls-expect-label { color: rgba(255, 255, 255, 0.55); }
.tx-graphite-soft .ls-expect-value { color: #fff; }
.tx-graphite-soft .ls-expect-note { color: rgba(255, 255, 255, 0.7); }
/* v336 — tx-cream: warm cream matching p04 treat-body background */
.tx-cream {
position: relative;
background: var(--cream); /* #F7F3EE — same as p04 .treat-body */
}
.tx-cream > * { position: relative; z-index: 1; }
/* v351 — white frame card wraps ONLY the photo (no text inside); caption sits below as plain text */
.ls-photo-frame-card {
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.16);
border-radius: 12px;
padding: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
max-width: 396px; /* matches p04 sidebar (essentials + 25%, then -10%) */
margin: 0 auto;
}
.ls-photo-frame-card .ls-results-frame {
margin: 0;
max-width: none;
}
.ls-photo-frame-card .ls-results-frame img {
width: 100%;
height: auto;
display: block;
}
.ls-photo-caption-card {
margin-top: 16px;
text-align: center;
}
.ls-photo-caption-card-eyebrow {
font-size:12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--beauty-deep);
margin-bottom: 10px;
display: block;
}
.ls-photo-caption-card .ls-results-disclaimer {
font-size: 12.5px;
color: var(--muted);
margin: 0 0 8px;
line-height: 1.5;
font-style: italic;
}
.ls-photo-caption-card .ls-results-more-link {
display: inline-block;
font-size: 13px;
color: var(--beauty-deep);
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
}
.ls-photo-caption-card .ls-results-more-link:hover {
text-decoration: underline;
}
/* v341 — results.html photo with caption-below pattern */
.results-photo-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--rl);
overflow: hidden;
}
.results-photo-card .photo-wrap {
aspect-ratio: 3/4;
}
.results-photo-caption {
padding: 14px 18px;
}
.results-photo-caption-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--beauty-deep);
font-weight: 700;
margin-bottom: 4px;
}
.results-photo-caption-detail {
font-size: 14px;
color: var(--ink);
font-weight: 500;
}
/* v344 — photo filename badge (dev/QA aid: shows photo-XXX.jpg on every image) */
.photo-wrap { position: relative; }
.photo-wrap[data-pid]::after {
content: attr(data-pid);
position: absolute;
top: 6px;
left: 6px;
font-family: monospace;
font-size: 11px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.78);
padding: 3px 7px;
border-radius: 3px;
pointer-events: none;
z-index: 12;
letter-spacing: 0.02em;
max-width: calc(100% - 12px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Fallback badge for imgs without .photo-wrap parent (added via JS) */
.photo-fn-badge {
position: absolute;
top: 6px;
left: 6px;
font-family: monospace;
font-size: 11px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.78);
padding: 3px 7px;
border-radius: 3px;
pointer-events: none;
z-index: 12;
letter-spacing: 0.02em;
}
/* v349 — equal-height treat-stack-headers so sessions start at same Y across cards */
.treat-stack-card .treat-stack-header {
display: flex;
flex-direction: column;
}
.treat-stack-card .treat-stack-header p {
flex: 1;
}
.treat-stack-grid .treat-stack-card .treat-stack-header {
min-height: 200px; /* v397 — fits longest current description (Vascular Small/Medium ~180px); shorter descriptions pad to match for cross-card row alignment */
}
/* v359 — Pigmentation: text box matches photo height; tight gap to bullets */
.ls-split-2col-photo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch; /* both columns equal height */
}
@media (max-width: 900px) {
.ls-split-2col-photo { grid-template-columns: 1fr; gap: 32px; }
}
/* Plain text column — no card; vertically centered. Overrides legacy .ls-split-text rules. */
.ls-split-2col-photo .ls-split-text {
background: transparent;
border: none;
border-left: none;
border-radius: 0;
box-shadow: none;
padding: 0 8px 0 0;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Compressed gap to horizontal bullets (no divider line; tighter margins) */
.ls-bullets-horizontal {
margin-top: 28px;
}
.ls-bullets-horizontal .ls-bullets-header {
text-align: center;
margin-bottom: 18px;
}
.ls-bullets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 900px) {
.ls-bullets-grid { grid-template-columns: 1fr; gap: 24px; }
}
.ls-bullet.ls-bullet-horizontal {
margin-bottom: 0;
}
/* v383: Hide containers that previously held graphical bullets/emojis */
.care-check { display: none !important; }
.treat-benefit-icon { display: none !important; }
/* Reclaim space — adjust grid where care-check sat */
.care-item { gap: 0 !important; }
.feat-check { display: none !important; }
/* v393 — Align sess-book-btn to bottom of treat-stack-card regardless of
session-option content height. Cards in a grid are already equal-height
(CSS Grid stretch); this makes the sessions area fill remaining space
and pushes the book button to the bottom. The consult-card variant is
handled separately above (.treat-stack-card.consult-card .sess-book-btn). */
.treat-stack-sessions {
flex: 1;
}
.treat-stack-sessions > .sess-book-btn {
margin-top: auto;
}
/* v395 — Uniform session-option heights across all cards in a treat-stack-grid.
Without this, content variations (RECOMMENDED badge, "was £X" line, savings
text length) cause cards with simpler session-options to have visibly
smaller boxes than cards with richer ones. Min-height enforces a floor;
align-items: center keeps content vertically centered within the box. */
.treat-stack-card .session-option {
min-height: 80px;
}
/* v395 — Make consult-only-block fill the sessions area (flex: 1) so its
button bottom-aligns with regular cards' buttons. The v334 min-height: 200px
stays as a floor for cards in sparser layouts. */
.treat-stack-card.consult-card .consult-only-block {
flex: 1;
}
/* v396 — Button shape consistency between regular cards and consult-card
variant. Three duplicate consult-card sess-book-btn rules exist (lines
2257, 2306, 2345) and the last one (margin-top: 6px) was winning, putting
the button near the top of the consult-only-block with white space below.
Plus consult-only-block padding inset the button from card edges, unlike
regular cards where buttons extend flush. This override block (after all
duplicates) makes the consult-card button match regular cards: full card
width, flush to bottom edge, no surrounding white space. */
.treat-stack-card.consult-card .consult-only-block {
padding: 22px 0 0; /* top only — horizontal moves to text, bottom removed */
}
.treat-stack-card.consult-card .consult-only-copy {
padding: 0 22px; /* horizontal padding applied to text instead */
}
.treat-stack-card.consult-card .sess-book-btn {
margin: auto 0 0; /* push to bottom, no horizontal margins, no fixed gap */
}
/* ================================================================
v410 — HOMEPAGE MOBILE PASS (first page only)
Activates only below 700px viewport. Desktop layout above 700px
is mechanically untouched. Use !important sparingly and only
where inline styles in HTML force it.
================================================================ */
@media (max-width: 700px) {
/* --- Section spacing: compress generous desktop padding --- */
.section { padding-top: 44px !important; padding-bottom: 44px !important; }
.sec { padding-top: 44px !important; padding-bottom: 44px !important; }
.wrap { padding-left: 18px; padding-right: 18px; }
/* --- Typography: scale headlines down so they don't dominate --- */
h1 { font-size: clamp(28px, 7.5vw, 38px); line-height: 1.15; }
h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
/* --- Buttons: enforce 44px tap target (Apple/Google guideline) --- */
.btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
/* --- Hero intro band --- */
.home-intro { padding-top: 28px !important; }
.home-h1 { font-size: clamp(28px, 7.5vw, 38px); margin-bottom: 12px; }
.home-p { font-size: 15px; line-height: 1.65; padding: 0 4px; margin-bottom: 22px; }
.home-ctas { margin-bottom: 36px; }
.priv-badge { font-size:12px; padding: 4px 12px; margin-bottom: 22px; }
/* --- "Explore" cards (Laser / Beauty) --- */
.exp-card { min-height: 320px; padding: 26px 22px; }
.exp-card h2 { font-size: clamp(24px, 6.5vw, 30px); }
.exp-desc { font-size: 13px; max-width: 100%; margin-bottom: 16px; }
.exp-btn { font-size:12px; height: 40px; padding: 0 18px; }
/* --- "What are you looking to treat?" tiles (.fyt-*) --- */
.fyt-tile { padding: 22px 18px; }
.fyt-tile h3 { font-size: 16px; }
.fyt-tile p { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.fyt-arrow { font-size:12px; }
/* --- Homepage hero video: cap height so it doesn't fill the screen --- */
#candela-video { max-height: 60vw; object-fit: cover; }
/* --- Override the most-common large inline paddings on section bands.
These attribute selectors catch desktop-spec padding values that
were set inline (so media queries can't reach them without
this hack). Safe because: (a) only fires below 700px, (b) only
affects elements that already had heavy padding. --- */
[style*="padding:64px"], [style*="padding: 64px"] { padding-top: 38px !important; padding-bottom: 38px !important; }
[style*="padding:56px"], [style*="padding: 56px"] { padding-top: 34px !important; padding-bottom: 34px !important; }
[style*="padding:52px"], [style*="padding: 52px"] { padding-top: 32px !important; padding-bottom: 32px !important; }
[style*="padding:48px"], [style*="padding: 48px"] { padding-top: 30px !important; padding-bottom: 30px !important; }
/* --- Section labels (eyebrow text) - keep legible but smaller --- */
.sec-label { font-size:12px; letter-spacing: .14em; }
}
/* --- Narrow phones (iPhone SE, Galaxy A series) --- */
@media (max-width: 480px) {
.wrap { padding-left: 14px; padding-right: 14px; }
.home-h1 { font-size: 27px; }
.home-p { font-size: 14px; }
.exp-card { padding: 22px 18px; }
.exp-card h2 { font-size: 24px; }
.home-ctas .btn { width: 100%; max-width: 320px; }
}
/* ================================================================
End v410 homepage mobile pass
================================================================ */
/* ================================================================
v411 — HOMEPAGE: deep mobile pass (Duncan-confirmed strategy)
Hides 4 secondary sections on mobile, side-by-side cards,
compressed hero. Desktop above 700px is untouched except for
the .mobile-only / .mobile-hide class system (which has no
effect on desktop because .mobile-only is hidden by default).
================================================================ */
/* --- Mobile-only / mobile-hide markers --- */
.mobile-only { display: none; }
@media (max-width: 700px) {
.mobile-hide { display: none !important; }
.mobile-only { display: block; }
}
@media (max-width: 700px) {
/* --- Hero: tighter top, smaller logo, closer location-to-headline --- */
.p01-logo-hero { padding-top: 12px !important; padding-bottom: 16px !important; }
.p01-hero-logo { margin-bottom: 6px !important; }
.p01-hero-logo img { max-width: 260px !important; width: 78% !important; }
.p01-hero-eyebrow { font-size:12px !important; letter-spacing: .14em; margin-bottom: 6px !important; }
/* --- H1: punchy version, scaled for mobile --- */
.page-hero-inner h1 { font-size: clamp(28px, 7.8vw, 34px) !important; line-height: 1.12 !important; margin-bottom: 6px !important; }
/* --- Long hero paragraph hidden on mobile (replaced by subhead) --- */
.p01-hero-copy > p { display: none; }
/* --- Mobile-only subhead under H1 --- */
.p01-mobile-sub { font-size: 13.5px; color: rgba(255,255,255,0.72); margin: 0 auto 20px; font-family: var(--sans); text-align: center; letter-spacing: .01em; max-width: 280px; line-height: 1.5; }
/* --- Two cards SIDE-BY-SIDE on mobile (override stacking rule) --- */
.explore-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 !important; margin-top: 28px !important; }
.exp-card { min-height: 240px !important; padding: 16px 14px !important; }
.exp-card .exp-body { padding: 0; }
.exp-eye { font-size:12px !important; letter-spacing: .12em; margin-bottom: 4px !important; line-height: 1.3; }
.exp-card h2 { font-size: 19px !important; line-height: 1.1 !important; margin-bottom: 6px !important; }
.exp-desc { display: none !important; }
.exp-tags { display: none !important; }
.exp-btn { font-size:12px !important; height: 34px !important; padding: 0 12px !important; margin-top: auto; }
/* --- Hero video: cap height so it doesn't dominate --- */
#candela-video { max-height: 56vw; object-fit: cover; }
#vol-bar { padding: 5px 10px !important; gap: 6px !important; bottom: 10px !important; right: 10px !important; }
#vol-slider { width: 50px !important; }
}
/* --- Narrow phones (iPhone SE, etc.): even tighter --- */
@media (max-width: 380px) {
.exp-card { padding: 14px 11px !important; min-height: 220px !important; }
.exp-card h2 { font-size: 17px !important; }
.p01-hero-logo img { max-width: 220px !important; }
}
/* ================================================================
End v411
================================================================ */
/* ================================================================
v412 — Hide photo pid debug overlays on mobile
The data-pid overlays (photo-XXX.jpg labels in the top-left of
every image) are useful for desktop QA but eat screen space on
mobile. Hide on small screens only. Keep .dbg-label visible.
================================================================ */
@media (max-width: 700px) {
.photo-wrap::after,
.photo-wrap[data-pid]::after,
.photo-abs-wrap::after,
.team-photo-wrap[data-pid]::after {
display: none !important;
}
}
/* ================================================================
v414 — Mobile footer collapse (universal, all 35 pages)
Desktop footer has logo + 3 link columns + legal strip = ~600px
tall on mobile when stacked. Nav menu already exposes every
link in the footer columns, so the columns are pure redundancy
on phone. Collapse to legal/clinic strip only — tight block.
================================================================ */
@media (max-width: 700px) {
.site-footer { padding: 24px 0 20px !important; }
.footer-cols { display: none !important; }
.footer-bottom { border-top: none !important; padding-top: 0 !important; gap: 6px !important; font-size:12px !important; line-height: 1.55 !important; }
.footer-bottom .fb-clinic { font-size: 11px !important; }
}
/* ================================================================
v416 — Remove cream gap between marble hero and explore-grid
The v411 block added margin-top: 28px to .explore-grid for
breathing room. Duncan wants cards flush to bottom of marble:
marble ends → cards begin immediately, no body-cream showing.
Hero's own bottom padding (16px, inside the dark marble) stays
so the headline keeps its breathing room inside the marble.
================================================================ */
@media (max-width: 700px) {
.explore-grid { margin-top: 0 !important; }
}
/* ================================================================
v417 — Mobile minimum font size floor (11px for caps/labels)
v411 went very aggressive on density to fit side-by-side cards
in a ~196px column. Result: eyebrows at 8.5px, buttons at 9.5px
— below readable. 11px floor applied to all uppercase/label
text on mobile. Lowercase body (.exp-desc 13px) already fine.
Card eyebrow may now wrap to 2 lines on narrow viewports —
acceptable, readability > single-line fit.
================================================================ */
@media (max-width: 700px) {
.exp-eye { font-size: 11px !important; line-height: 1.25; }
.exp-btn { font-size: 11px !important; height: 36px !important; padding: 0 14px !important; }
.sec-label { font-size: 11px !important; }
.p01-hero-eyebrow { font-size: 11px !important; }
}
/* ================================================================
v418 — Gallery-grid 3-up on mobile (site-wide)
Default cascade: 3 cols desktop → 2 cols ≤900 → 1 col ≤600.
Stacked 1-col on phone gave huge cards eating massive vertical
space. Forcing 3-up at ≤700 with compressed card sizing keeps
the grid dense and scannable. Description hidden, footer link
hidden, paddings and fonts shrunk. Photo's 3/4 aspect stays —
it's the recognition element.
Affects all 9 pages using .gallery-grid: laser, laser-men,
laser-skin, beauty, area-face/arms/bikini/legs/torso.
================================================================ */
@media (max-width: 700px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.gallery-card-body { padding: 10px 8px !important; }
.gallery-card-type { font-size:12px !important; letter-spacing: .08em; margin-bottom: 4px !important; line-height: 1.2; }
.gallery-card-body h3 { font-size: 13px !important; line-height: 1.2 !important; margin-bottom: 4px !important; }
.gallery-card-body p { display: none !important; }
.gallery-card-footer { padding: 8px !important; margin: 0 -8px -10px !important; flex-direction: column; align-items: flex-start; gap: 2px; }
.gallery-card-price { font-size: 15px !important; }
.gallery-card-dur { font-size:12px !important; }
.gallery-card-link { display: none !important; }
.gallery-card-badge { font-size:12px !important; padding: 2px 6px !important; top: 6px !important; right: 6px !important; }
}
/* v418 — laser.html tab filter: horizontal scroll instead of wrap.
7 tabs wrapping to 3 rows on mobile = clutter. Horizontal scroll
with hidden scrollbar reads as a tab strip the user can swipe. */
@media (max-width: 700px) {
.itab-bar { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.itab-bar::-webkit-scrollbar { display: none; }
.itab { flex-shrink: 0; padding: 10px 12px !important; font-size: 12px !important; }
}
/* ================================================================
v424 — Allow long buttons to wrap on mobile (site-wide)
.btn has white-space:nowrap + fixed height:52px from line 85.
That clips long CTAs like "Book a Free Consultation →"
instead of wrapping them. On mobile, let them wrap
naturally (typically at the em-dash) and grow height to fit.
Applies to 29 instances of this CTA pattern across 28 files
plus any other long .btn anywhere on the site.
================================================================ */
@media (max-width: 700px) {
.btn { white-space: normal !important; height: auto !important; line-height: 1.3; }
}
/* ================================================================
v425 — Reinforce button wrap on mobile + override inline padding
Rescue CTA buttons have inline style="padding:16px 32px" which
reserves 64px horizontal padding regardless of viewport. Even
with white-space:normal from v424, that inline padding leaves
too little width for text to wrap usefully. This override uses
the inline-style attribute selector to specifically target the
16px/32px inline pattern and shrink it on mobile. Plus belt-
and-braces re-assertion of wrap behaviour at higher specificity.
================================================================ */
@media (max-width: 700px) {
.btn[style*="padding:16px 32px"],
.btn[style*="padding: 16px 32px"] {
padding: 12px 16px !important;
}
a.btn, button.btn {
white-space: normal !important;
height: auto !important;
min-height: 44px;
line-height: 1.3;
}
}
/* ================================================================
v429 — Bump sub-12px mobile text where reflow risk is low
Across previous mobile blocks (v411, v414, v418), several text
elements landed at 8.5–10.5px to fit tight layouts. Per Duncan:
if larger fits, larger should be used — no point in sub-readable
text when there's slack. Selectors at 11px already (eyebrows,
buttons) stay there: they sit in ~115px-wide card columns where
12px risks wrap.
================================================================ */
@media (max-width: 700px) {
/* Site-wide gallery card text — all 9 pages using .gallery-grid */
.gallery-card-type { font-size: 11px !important; }
.gallery-card-dur { font-size: 11px !important; }
.gallery-card-badge { font-size:12px !important; padding: 3px 8px !important; }
/* Universal footer legal strip — all 35 pages */
.footer-bottom { font-size: 11.5px !important; }
.footer-bottom .fb-clinic { font-size: 12px !important; }
/* Homepage privacy badge */
.priv-badge { font-size: 12px !important; }
}
/* ================================================================
v436 — Tighter vertical compression on mobile
v410 reduced inline section padding 48→30, 56→34 etc. Per Duncan's
"compress vertical space when not used", going further: 48→20, etc.
Plus laser.html-specific header margins (ind-divider + itab-bar)
which were sitting at desktop values inside the Individual
Treatments section, creating extra dead space between sections.
================================================================ */
@media (max-width: 700px) {
[style*="padding:48px"], [style*="padding: 48px"] { padding-top: 20px !important; padding-bottom: 20px !important; }
[style*="padding:52px"], [style*="padding: 52px"] { padding-top: 22px !important; padding-bottom: 22px !important; }
[style*="padding:56px"], [style*="padding: 56px"] { padding-top: 24px !important; padding-bottom: 24px !important; }
[style*="padding:64px"], [style*="padding: 64px"] { padding-top: 28px !important; padding-bottom: 28px !important; }
/* Laser.html header spacing — was margin-top: 16px on ind-divider and
margin: 28px 0 20px on itab-bar, totalling ~50px above the grid */
.ind-divider { margin-top: 4px !important; }
.itab-bar { margin: 14px 0 12px !important; }
}
/* ================================================================
v437 — Push gallery-card footer to bottom of card on mobile
The card body has flex:1 so it fills the card. Normally the
description has flex:1 too, pushing the footer to the bottom.
On mobile I hide the description (v418), so the footer was
stacking right under the title with blank white space below it.
margin-top: auto flexes it to the bottom regardless. Fixes the
"price floating mid-card" look Duncan flagged on both individual
and bundle cards (they share the same .gallery-card-footer).
================================================================ */
@media (max-width: 700px) {
.gallery-card-footer { margin-top: auto !important; }
}
/* ================================================================
v440 — Prevent row-stretching of treatment cards on mobile
CSS Grid default align-items: stretch makes every card in a row
fill the row's tallest height. Body has flex:1 so it grows into
the extra space; footer with margin-top:auto sits at the bottom,
leaving an empty middle between title and price. align-items:
start collapses each card to its own content, eliminating the
empty space. Applied to both .gallery-grid (defensive) and
.pkg-grid (the visible problem).
================================================================ */
@media (max-width: 700px) {
.gallery-grid { align-items: start !important; }
.pkg-grid { align-items: start !important; }
}
/* ================================================================
v442 — Normalize gallery card heights on mobile by reserving
2 lines of title space. Some bundles ("Underarms + Bikini Standard",
"Upper Lip + Chin + Sideburns") have longer names that wrap to
2 lines while siblings stay on 1 line, making rows uneven now
that align-items: start lets cards size to content (v440). With
min-height: 2.4em on h3 (font 13px line-height 1.2 → ~31px =
2 lines), every title block reserves the same height and cards
align across the row. Short-titled cards get a small empty band
inside the title block (sitting under the text, top-aligned),
which reads as breathing room rather than the "floating middle"
problem v437 solved.
================================================================ */
@media (max-width: 700px) {
.gallery-card-body h3 { min-height: 2.4em !important; }
}
/* ================================================================
v446 — "Most popular" badges at 25% alpha (others stay at 50%)
Per Duncan: drop the Most popular pill from 50% to 25% so it
recedes more on the photo. Two contexts: pkg-section uses peach
accent (#laser-pkg-section override), elsewhere uses white base.
Both reduced to .25 alpha.
================================================================ */
.gallery-card-badge.mp-badge { background: rgba(255, 255, 255, .25) !important; }
#laser-pkg-section .gallery-card-badge.mp-badge { background: rgba(232, 191, 163, .25) !important; }
/* ================================================================
v447 — "This package/bundle includes" block on treatment.html
Renders the t.includes array for packages and (future) bundles
with multi-area composition. Visually distinct from body copy:
tinted laser-lite box, teal accent border, checkmark bullets.
Sits right after the about paragraph so the user reads "what
the treatment is" → "what's in it" → session picker.
================================================================ */
.treat-includes {
background: var(--laser-lite);
border-left: 4px solid var(--laser);
border-radius: 8px;
padding: 18px 22px 16px;
margin: 0 0 24px;
}
.treat-includes-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--laser-deep);
margin-bottom: 12px;
}
.treat-includes-list {
margin: 0;
padding: 0;
list-style: none;
}
.treat-includes-list li {
position: relative;
padding: 8px 0 8px 26px;
font-size: 15px;
line-height: 1.45;
color: var(--ink);
border-bottom: 1px solid rgba(13,115,119,.1);
}
.treat-includes-list li:last-child {
border-bottom: none;
}
.treat-includes-list li::before {
content: '✓';
position: absolute;
left: 4px;
top: 8px;
font-size: 14px;
color: var(--laser);
font-weight: 700;
}
.treat-includes-note {
font-size: 12px;
color: var(--muted);
font-style: italic;
margin-top: 10px;
}
@media (max-width: 700px) {
.treat-includes { padding: 14px 16px 12px; margin-bottom: 18px; }
.treat-includes-list li { font-size: 14px; padding: 7px 0 7px 22px; }
.treat-includes-label { font-size:12px; margin-bottom: 8px; }
}
/* ================================================================
v448 — Photo grid "What's included" for packages with components,
+ dynamic savings line. Replaces the v447 checklist for packages
that have a `components: ['slug1','slug2',...]` array. Bespoke
packages without components (Total Body) keep the v447 checklist.
Each component card uses a 1:1 photo of the zone (zone-{slug}.jpg)
with the area boundary drawn — visual answer to "where exactly
is Half Legs?". Cards link through to the underlying single-area
treatment for users who want to see that area on its own.
Placeholder pattern (.pkg-component-ph) matches the site's ph
convention: shows when the image 404s, stays until the photo is
delivered. Filename slot per slug ready to receive real photos.
================================================================ */
.pkg-includes-block { margin: 0 0 24px; }
.pkg-includes-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--laser-deep);
margin-bottom: 12px;
}
.pkg-components-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 0 0 16px;
}
.pkg-components-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.pkg-components-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.pkg-component {
text-decoration: none;
color: inherit;
display: block;
transition: transform .15s ease;
}
.pkg-component:hover { transform: translateY(-2px); }
.pkg-component-photo {
aspect-ratio: 1/1;
background: var(--cream-deep);
border-radius: 8px;
overflow: hidden;
position: relative;
border: 1px solid rgba(13,115,119,.1);
}
.pkg-component-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pkg-component-ph {
position: absolute;
inset: 0;
background: var(--laser-lite);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px;
text-align: center;
}
.pkg-component-ph-name {
font-size: 12px;
font-weight: 600;
color: var(--laser-deep);
line-height: 1.25;
}
.pkg-component-ph-sub {
font-size:12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--laser);
opacity: .8;
}
.pkg-component-label {
font-size: 13px;
font-weight: 500;
color: var(--ink);
margin-top: 8px;
text-align: center;
line-height: 1.3;
}
.pkg-savings {
background: rgba(232, 191, 163, 0.20);
border-left: 4px solid var(--accent);
border-radius: 6px;
padding: 14px 18px;
margin: 0 0 4px;
font-size: 15px;
color: var(--laser-deep);
font-weight: 600;
}
.pkg-savings span {
display: block;
color: var(--mid);
font-weight: 400;
font-size: 12px;
margin-top: 4px;
}
@media (max-width: 700px) {
.pkg-components-grid { gap: 8px; margin-bottom: 14px; }
.pkg-component-label { font-size: 12px; margin-top: 6px; }
.pkg-component-ph-name { font-size: 11px; }
.pkg-component-ph-sub { font-size:12px; }
.pkg-savings { padding: 12px 14px; font-size: 13.5px; }
.pkg-savings span { font-size: 11.5px; }
.pkg-includes-label { font-size:12px; margin-bottom: 8px; }
}
/* ================================================================
v449 — Treatment hero photo on mobile.
Puts the treatment image at the very top of the hero (above name +
tagline + pills) so the photo leads the page. Desktop is unchanged
— the existing sidebar already shows the photo on the right.
The .mobile-only utility hides the block on ≥701px; this block
only styles the mobile presentation.
================================================================ */
@media (max-width: 700px) {
/* v462 — Body already has padding-top: 68px for nav clearance.
I was adding another 68-84px on the hero, which is what created
the persistent 70-100px of "extra" marble above the h1 across
every screenshot. Now: hero padding 16/0 + h1 margin 0/16
→ ~16px marble above text, ~16px below, h1 sits centred. */
.treat-hero { padding: 16px 0 0 !important; }
.treat-breadcrumb { display: none !important; }
.treat-hero h1 { font-size: 28px !important; margin: 0 0 16px !important; line-height: 1.1; }
#treat-hero-photo { margin: 0 -20px 8px !important; overflow: hidden; }
.treat-hero-sub {
font-size: 13px !important;
line-height: 1.45;
margin: 0 auto 6px !important;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.20);
border-radius: 999px;
padding: 8px 18px;
text-align: center;
display: block;
width: fit-content;
max-width: 100%;
}
.treat-hero-meta { justify-content: center; }
.treat-hero-meta { gap: 6px; margin-top: 8px !important; }
#hero-booking-slot { margin-top: 10px !important; }
}
/* ================================================================
v451 — Hero restructure to 2-column on desktop, stacked on mobile.
Per Duncan + LCUK reference: text/booking on the left, photo on
the right (desktop); on mobile name → photo → tagline → pills →
booking. The session picker now lives in the hero instead of in
the main column, so the booking decision is above-the-fold next
to the photo. The old .treat-sidebar is empty and hidden.
================================================================ */
.treat-hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 48px;
align-items: start;
margin-top: 8px;
}
.treat-hero-text { min-width: 0; }
.treat-hero-visual { min-width: 0; }
#treat-hero-photo-desktop {
overflow: hidden;
border-radius: 10px;
background: var(--cream-deep);
border: 1px solid rgba(13,115,119,.08);
}
#treat-hero-photo-desktop > img {
width: 100%;
height: auto;
display: block;
}
/* Dual-photo treatments (e.g. Upper Body Men): stack the two photos
vertically rather than side by side, full width within the rounded
hero container. */
.hero-dual-photo { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hero-dual-photo > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 40%; display: block; }
/* Hero booking slot styling — picker block tightened up so it fits in
the half-width column without feeling cramped. Stays full width on
mobile because the column collapses to 1. */
#hero-booking-slot { margin-top: 24px; }
#hero-booking-slot .treat-picker-block {
background: var(--white);
border: 1px solid var(--cream-deep);
border-radius: 8px;
padding: 18px;
}
#hero-booking-slot .treat-picker-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--laser-deep);
margin-bottom: 12px;
}
/* Stack at 860px to match the existing breakpoint for treat-grid. Photo
stays inline (#treat-hero-photo, the mobile-only one) between h1 and
tagline; desktop visual column hides. v539 — extend #treat-hero-photo
visibility to iPad widths so the photo appears between title and
booking (not below the booking widgets). */
@media (max-width: 860px) {
.treat-hero-grid { grid-template-columns: 1fr; gap: 0; margin-top: 4px; }
.treat-hero-visual { display: none; }
#hero-booking-slot { margin-top: 16px; }
#hero-booking-slot .treat-picker-block { padding: 14px; }
#treat-hero-photo { display: block !important; margin: 0 0 16px !important; border-radius: 12px; overflow: hidden; }
#treat-hero-photo > img { width: 100% !important; height: auto !important; display: block !important; }
}
/* ================================================================
v452 — Mobile .page-hero reduction.
Base hero padding 72px+48px = 120px + 68px nav clearance ate the
entire first fold on mobile. Cutting padding roughly in half and
trimming h1 size so the page content (browse-by-area cards, etc.)
appears closer to the top. Affects all .page-hero usages site-wide:
laser, laser-men, laser-skin, beauty, area-* pages.
================================================================ */
@media (max-width: 700px) {
.page-hero { padding: 32px 0 20px !important; }
.page-hero h1 { font-size: 24px !important; margin-bottom: 8px !important; line-height: 1.15; }
.page-hero p { font-size: 13px !important; line-height: 1.5; }
.page-hero .breadcrumb { font-size: 11px; margin-bottom: 8px; }
}
/* ================================================================
v454 — Mobile bar removed (duplicate of nav Book Now on mobile).
Both the fixed top nav and the sticky bottom .mobile-bar showed
the same primary CTA on mobile — sandwich UI, two thumb targets
for the same action, ate the bottom thumb-zone unnecessarily.
Nav stays sticky at the top with its primary CTA, that's enough.
Body padding-bottom (added at ≤900 to clear the mobile-bar) also
removed.
================================================================ */
.mobile-bar { display: none !important; }
@media (max-width: 900px) {
body { padding-bottom: 0 !important; }
}
/* ================================================================
v457 — Kill .mob-bar too (homepage variant of .mobile-bar).
index.html had a separate sticky bottom bar using .mob-bar (not
.mobile-bar) so v454 missed it. Same duplicate-CTA problem with
the nav's primary button. Markup also removed from index.html.
================================================================ */
.mob-bar { display: none !important; }
/* ================================================================
v458 — Additional mobile hero compression. The block above tightens
the per-element margins; this one ensures the photo img still fills
its container and the grid doesn't add its own top margin. */
@media (max-width: 700px) {
#treat-hero-photo > img { width: 100%; height: auto; display: block; }
#treat-hero-photo { background: var(--cream-deep); position: relative; border-radius: 0; }
.treat-hero-grid { margin-top: 0 !important; }
}
/* ================================================================
v459 — Benefits cards stack 1-per-row on mobile.
3-up at narrow viewport gave ~110px per card and 3-line body wraps,
visually squashed. 1-up = each card spans full width, horizontal
shape, body wraps to 1-2 lines.
================================================================ */
@media (max-width: 700px) {
.treat-benefits {
grid-template-columns: 1fr !important;
gap: 8px !important;
margin: 16px 0 20px !important;
}
.treat-benefit { padding: 12px 14px !important; }
.treat-benefit-icon { display: none; }
.treat-benefit-title { font-size: 13px !important; margin-bottom: 3px !important; }
.treat-benefit-body { font-size: 12px !important; }
}
/* ================================================================
v466 — Round 1: savings line + page-hero desktop padding cut.
- .treat-savings-line: small commercial hook for packages, peach
accent (matches "First time" callout), sits below about.
- .page-hero desktop padding 72/48 → 40/28 (~45% cut) per Duncan
— mobile got the cut in v452, desktop didn't. Affects laser,
beauty, area-* pages site-wide.
================================================================ */
.treat-savings-line {
background: rgba(232, 191, 163, 0.16);
border-left: 3px solid var(--accent);
border-radius: 4px;
padding: 10px 14px;
margin: -8px 0 20px;
font-size: 13.5px;
color: var(--laser-deep);
line-height: 1.5;
}
.treat-savings-line strong { font-weight: 700; }
@media (max-width: 700px) {
.treat-savings-line { font-size: 12.5px; padding: 8px 12px; margin: -4px 0 14px; }
}
.page-hero { padding: 40px 0 28px; }
/* ================================================================
v468 — Highlight the "First time at Peonella?" callout when the
book button activates. Brief peach glow pulse draws attention to
the patch-test info at the moment of commitment, then settles
into a stronger persistent state so it remains visually anchored.
Applies to all laser treatment pages (the callout only renders
on non-beauty, non-consultOnly treatments).
================================================================ */
.first-time-callout.highlighted {
background: rgba(232, 191, 163, 0.32) !important;
border-color: rgba(232, 191, 163, 0.85) !important;
animation: ftc-pulse 1.6s ease-out 1;
}
@keyframes ftc-pulse {
0% { box-shadow: 0 0 0 0 rgba(232, 191, 163, 0); }
35% { box-shadow: 0 0 0 6px rgba(232, 191, 163, 0.40); }
100% { box-shadow: 0 0 0 0 rgba(232, 191, 163, 0); }
}
/* ================================================================
v469 — Why Peonella trust strip on homepage.
Sits between the hero and the explore (laser/beauty/appointment)
cards so users see the clinic's credentials BEFORE picking a
pillar. Four pillars, 4-up on desktop, 2x2 at tablet, 1-up on
mobile. Each pillar: numeric step, short title, ~80-130 char body.
Brand rule respected: speaks to clinic standard, not named
practitioner (Liudmyla only named on about.html + reviews).
================================================================ */
.why-peonella {
background: var(--cream);
padding: 56px 0;
border-top: 1px solid var(--cream-deep);
}
.why-head {
text-align: center;
margin-bottom: 36px;
}
.why-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--laser);
margin-bottom: 10px;
}
.why-head h2 {
font-family: var(--serif);
font-size: clamp(26px, 3.4vw, 40px);
color: var(--laser-deep);
margin: 0;
line-height: 1.15;
letter-spacing: -.01em;
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.why-item {
background: var(--white);
border: 1px solid var(--cream-deep);
border-radius: 8px;
padding: 22px 20px 24px;
position: relative;
}
.why-num {
font-family: var(--serif);
font-size: 22px;
color: var(--laser);
margin-bottom: 10px;
letter-spacing: -.02em;
opacity: .55;
}
.why-title {
font-size: 14px;
font-weight: 700;
color: var(--laser-deep);
margin-bottom: 8px;
letter-spacing: .01em;
}
.why-body {
font-size: 13px;
color: var(--mid);
line-height: 1.55;
}
@media (max-width: 1000px) {
.why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.why-peonella { padding: 32px 0; }
.why-head { margin-bottom: 22px; }
.why-head h2 { font-size: 22px; }
.why-grid { grid-template-columns: 1fr; gap: 10px; }
.why-item { padding: 14px 16px 16px; }
.why-num { font-size: 18px; margin-bottom: 6px; }
.why-title { font-size: 13.5px; margin-bottom: 5px; }
.why-body { font-size: 12.5px; }
}
/* ================================================================
v471 — Why Peonella re-skinned for new bottom-of-page placement.
Sits between the two consultation CTAs now. Uses clinic-room.jpg
as full-bleed background with a dark teal gradient overlay for
text legibility. Trust pillars rendered as frosted-glass cards
over the photo. Overrides v469 cream-background styling above.
================================================================ */
.why-peonella {
position: relative;
background: url('images/clinic-room.jpg') center center / cover no-repeat;
padding: 80px 0;
overflow: hidden;
border-top: none;
}
.why-peonella-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(13, 30, 30, 0.88) 0%, rgba(13, 30, 30, 0.68) 50%, rgba(13, 30, 30, 0.88) 100%);
pointer-events: none;
}
.why-peonella-inner {
position: relative;
z-index: 1;
}
.why-peonella .why-eyebrow {
color: rgba(255, 255, 255, 0.72);
}
.why-peonella .why-head h2 {
color: #fff;
}
.why-peonella .why-item {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
}
.why-peonella .why-num {
color: rgba(255, 255, 255, 0.55);
opacity: 1;
}
.why-peonella .why-title {
color: #fff;
}
.why-peonella .why-body {
color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 700px) {
.why-peonella { padding: 48px 0; }
.why-peonella-overlay {
background: linear-gradient(180deg, rgba(13, 30, 30, 0.90) 0%, rgba(13, 30, 30, 0.78) 50%, rgba(13, 30, 30, 0.90) 100%);
}
}
/* ================================================================
v472 — Why Peonella restructured: 3 dedicated-space photos
(Reception / Laser room / Beauty room) sit above the 4 trust
pillars to make the "dedicated rooms" claim visible, not just
stated. Background switches from a single clinic photo with
overlay (v471) to a solid dark teal gradient so the 3 evidence
photos pop instead of competing with a backdrop. Pillar 04 copy
reworked around separate treatment rooms.
Overrides v471 photo-background rules above.
================================================================ */
.why-peonella {
background: linear-gradient(160deg, #0a1f1f 0%, #0d2a2a 45%, #103838 100%);
}
.why-peonella-overlay { display: none; }
.why-spaces {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0 0 48px;
}
.why-space {
display: flex;
flex-direction: column;
}
.why-space-photo {
aspect-ratio: 4 / 3;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
margin-bottom: 12px;
}
.why-space-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.why-space-label {
font-size: 13px;
font-weight: 700;
color: #fff;
letter-spacing: .02em;
margin-bottom: 2px;
}
.why-space-sub {
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.4;
}
@media (max-width: 900px) {
.why-spaces { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
.why-space-photo { margin-bottom: 8px; }
.why-space-label { font-size: 12px; }
.why-space-sub { font-size: 11px; }
}
@media (max-width: 600px) {
.why-spaces { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
.why-space-photo { aspect-ratio: 16 / 10; }
.why-space-label { font-size: 13px; }
.why-space-sub { font-size: 12px; }
}
/* ================================================================
v473 — Logo art on each Why Peonella pillar.
.why-num replaced by .why-logo. Pillars 01/03 get partner logos
(Candela SVG wordmark placeholder, DMK PNG); pillars 02/04 get
inline SVG icons (mortarboard for Doctorate, two-room floor plan
for Separate rooms). Fixed-height logo slot keeps the 4 cards
visually aligned regardless of asset shape.
================================================================ */
.why-logo {
height: 48px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 14px;
}
.why-logo img,
.why-logo .logo-art {
max-height: 100%;
width: auto;
display: block;
}
.why-logo img {
max-width: 140px;
object-fit: contain;
}
@media (max-width: 700px) {
.why-logo { height: 40px; margin-bottom: 10px; }
.why-logo img { max-width: 120px; }
}
/* ================================================================
v476 — Footer "Get directions" link next to clinic address.
Links to a Google Maps directions URL with the full Richmond House
address pre-filled as the destination. Map-pin SVG icon sits
inline before the label. Inherits footer text colour, underline
on hover.
================================================================ */
.fb-directions {
display: inline-flex;
align-items: center;
gap: 4px;
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
padding-bottom: 1px;
transition: opacity .2s, border-color .2s;
}
.fb-directions:hover { opacity: 1; border-bottom-style: solid; }
.fb-directions svg { flex-shrink: 0; }
/* ================================================================
v478 — Why Peonella pillars beefed up.
Previous cards felt light against the 3 large space photos above.
Now: bigger padding, peach accent bar at top, larger title, more
line-height in body, brighter body text. Reads as substantive
trust-building content, not just labels.
================================================================ */
.why-peonella .why-item {
padding: 28px 24px 26px;
position: relative;
overflow: hidden;
}
.why-peonella .why-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, rgba(232, 191, 163, 0.4) 100%);
}
.why-peonella .why-num {
font-size: 26px;
margin-bottom: 14px;
color: rgba(232, 191, 163, 0.85);
}
.why-peonella .why-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.25;
letter-spacing: -.005em;
}
.why-peonella .why-body {
font-size: 13.5px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 700px) {
.why-peonella .why-item { padding: 22px 18px 20px; }
.why-peonella .why-num { font-size: 22px; margin-bottom: 10px; }
.why-peonella .why-title { font-size: 15px; margin-bottom: 8px; }
.why-peonella .why-body { font-size: 13px; line-height: 1.6; }
}
/* ================================================================
v479 — Footer solidarity strip.
Small UK/Ukraine flag image with a short dignified message,
sits between the footer link columns and the legal/address row.
Quiet, not a banner — flag carries the emotional weight.
================================================================ */
.footer-solidarity {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 0 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 8px;
}
.solidarity-flag {
width: 56px;
height: auto;
border-radius: 4px;
flex-shrink: 0;
}
.solidarity-copy {
text-align: left;
max-width: 420px;
}
.solidarity-head {
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 3px;
}
.solidarity-slava {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 15px;
color: #FFD700;
margin: 1px 0 5px;
}
.solidarity-sub {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
@media (max-width: 600px) {
.footer-solidarity {
flex-direction: column;
text-align: center;
gap: 10px;
padding: 20px 0 16px;
}
.solidarity-copy { text-align: center; max-width: none; padding: 0 20px; }
.solidarity-flag { width: 48px; }
.solidarity-head { font-size: 11.5px; }
.solidarity-sub { font-size: 11.5px; }
}
/* ================================================================
v481 — Solidarity strip relocated to very bottom of footer and
fully centred. Flag now sits above the text (centred), text
centred below. Sits AFTER .footer-bottom so it's the last thing
on every page. Overrides v479 left-aligned flex layout.
================================================================ */
.footer-solidarity {
flex-direction: column;
text-align: center;
gap: 8px;
padding: 18px 0 22px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 4px;
}
.footer-solidarity .solidarity-flag {
width: 52px;
margin: 0 auto;
}
.footer-solidarity .solidarity-head {
text-align: center;
margin-bottom: 2px;
}
.footer-solidarity .solidarity-sub {
text-align: center;
max-width: 460px;
margin: 0 auto;
}
/* ================================================================
v482 — Language switcher pill (EN ↔ UA).
Small rounded pill in the nav next to the Book Consultation button.
Indicates the OTHER language available (so on EN page shows "UA",
on UA page shows "EN"). Click swaps to the equivalent page.
================================================================ */
.lang-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 38px;
padding: 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
color: var(--laser-deep);
background: var(--cream);
border: 1px solid var(--cream-deep);
border-radius: 16px;
text-decoration: none;
margin-right: 10px;
transition: background .2s, color .2s, border-color .2s;
}
.lang-pill:hover {
background: var(--laser-deep);
color: #fff;
border-color: var(--laser-deep);
}
@media (max-width: 700px) {
.lang-pill { height: 28px; min-width: 32px; font-size:12px; padding: 0 8px; margin-right: 6px; }
}
/* ================================================================
v484 — Bridge page styling for /uk/booking-next.html.
Pre-Fresha explainer page for Ukrainian visitors. Clean centred
layout with 3-step explainer + WhatsApp/phone help + Continue
button. Reuses brand tokens — no new colours.
================================================================ */
.bridge-wrap { background: var(--cream); min-height: 70vh; }
.bridge-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--laser);
margin-bottom: 14px;
}
.bridge-h1 {
font-family: var(--serif);
font-size: clamp(28px, 4vw, 42px);
color: var(--laser-deep);
line-height: 1.15;
margin: 0 0 18px;
}
.bridge-lead {
font-size: 16px;
color: var(--mid);
line-height: 1.7;
margin: 0 0 36px;
}
.bridge-steps {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 36px;
}
.bridge-step {
display: flex;
align-items: flex-start;
gap: 16px;
background: #fff;
border: 1px solid var(--cream-deep);
border-radius: 8px;
padding: 18px 20px;
}
.bridge-step-num {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--laser);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
}
.bridge-step-title {
font-size: 15px;
font-weight: 700;
color: var(--laser-deep);
margin-bottom: 4px;
}
.bridge-step-text {
font-size: 14px;
color: var(--mid);
line-height: 1.55;
}
.bridge-help {
background: rgba(232, 191, 163, 0.16);
border-left: 4px solid var(--accent);
border-radius: 6px;
padding: 20px 22px;
margin-bottom: 36px;
}
.bridge-help-title {
font-size: 15px;
font-weight: 700;
color: var(--laser-deep);
margin-bottom: 6px;
}
.bridge-help-text {
font-size: 14px;
color: var(--mid);
line-height: 1.6;
margin-bottom: 14px;
}
.bridge-help-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.bridge-continue {
text-align: center;
padding-top: 8px;
}
.bridge-back {
margin-top: 16px;
font-size: 13px;
}
.bridge-back a { color: var(--mid); text-decoration: none; border-bottom: 1px dotted currentColor; }
.bridge-back a:hover { color: var(--laser-deep); border-bottom-style: solid; }
@media (max-width: 600px) {
.bridge-step { padding: 14px 16px; gap: 12px; }
.bridge-step-num { width: 28px; height: 28px; font-size: 14px; }
.bridge-help { padding: 16px 18px; }
.bridge-help-actions .btn { flex: 1; min-width: 0; }
}
/* ================================================================
v487 — Flag SVG inside language pill (replaces EN/UA text).
Compact 18×9px aspect-ratio flag inside the existing pill.
================================================================ */
.lang-pill .lang-flag {
height: 14px;
width: auto;
display: block;
border-radius: 2px;
}
.lang-pill {
/* slimmer when content is just a flag */
padding: 0 8px;
min-width: 32px;
}
@media (max-width: 700px) {
.lang-pill .lang-flag { height: 12px; }
.lang-pill { padding: 0 7px; min-width: 28px; }
}
/* ================================================================
v488 — Mobile pass for beauty.html.
Three fixes:
1. Credibility intro 2-col grid: stack on mobile (was inline-only)
2. Team panel: tighter padding on small screens
3. Hero h1/paragraph mobile sizing (h1 was too large)
Affects only beauty.html (uses .beauty-credibility + .beauty-team-panel
classes added in v488).
================================================================ */
@media (max-width: 800px) {
.beauty-credibility {
grid-template-columns: 1fr !important;
gap: 28px !important;
padding-bottom: 28px;
}
.beauty-team-panel {
padding: 22px 20px !important;
}
.beauty-team-panel + a,
.beauty-team-panel a[href="about.html"] {
margin-top: 16px !important;
}
}
/* Beauty hero on small screens — bring h1 down a notch */
@media (max-width: 700px) {
.page-hero.beauty-hero h1 {
font-size: clamp(28px, 7vw, 36px);
line-height: 1.1;
}
.page-hero.beauty-hero p {
font-size: 14px;
line-height: 1.55;
}
}
/* DMK + Advanced Facials compact-grid: ensure visual breathing room
inside the 3-col mobile layout. Existing global rule sets 3 cols at
<700px which is correct, but card body needs slight tightening for
the DMK 6-card grid specifically. */
@media (max-width: 700px) {
.compact-grid .gallery-card-body { padding: 8px 7px 9px !important; }
.compact-grid .gallery-card-body h3 { font-size: 12.5px !important; }
}
/* ================================================================
v490 — Mobile-only Liudmyla credentials strip on beauty.html.
Renders only at <=700px (.mobile-only). Since the full credibility
section is mobile-hide'd, this surfaces the lead practitioner's
credentials on phones so the doctorate-led positioning isn't lost.
================================================================ */
.liudmyla-mobile-strip {
background: var(--beauty-deep);
color: #fff;
padding: 18px 0;
}
.liudmyla-mobile-strip .wrap { text-align: center; }
.liudmyla-mobile-strip .lms-eyebrow {
font-size:12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
margin-bottom: 8px;
}
.liudmyla-mobile-strip .lms-name {
font-size: 14px;
color: #fff;
margin-bottom: 6px;
letter-spacing: .01em;
}
.liudmyla-mobile-strip .lms-name strong {
font-weight: 600;
font-family: var(--serif);
font-size: 16px;
letter-spacing: -.005em;
}
.liudmyla-mobile-strip .lms-creds {
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.55;
max-width: 460px;
margin: 0 auto;
}
/* ================================================================
v491 — Candela credibility mark on beauty.html Laser Skin block.
Desktop/tablet: compact branded card to the right of the section
title. Mobile: full-width strip below the title for proper logo
visibility. Uses the wide Candela wordmark image (800x296).
================================================================ */
.candela-mark {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 18px;
background: #fff;
border: 1px solid rgba(13, 115, 119, 0.18);
border-radius: 8px;
min-width: 200px;
max-width: 240px;
}
.candela-mark-eyebrow {
font-size:12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--beauty-deep);
text-align: center;
}
.candela-mark-logo {
max-width: 100%;
width: auto;
height: auto;
display: block;
}
.candela-mark-sub {
font-size:12px;
color: var(--mid);
letter-spacing: .05em;
text-align: center;
line-height: 1.4;
}
@media (max-width: 700px) {
.candela-mark {
max-width: none;
width: 100%;
flex-basis: 100%;
padding: 20px 24px;
gap: 10px;
}
.candela-mark-logo { max-width: 360px; }
.candela-mark-eyebrow { font-size:12px; }
.candela-mark-sub { font-size: 11px; }
}
/* ================================================================
v494 — DMK partner mark: mobile full-width treatment.
On mobile the card background blends into the section background
(var(--cream)) so only the green DMK logo wordmark sits on the
page, centred, at full screen width without stretching.
================================================================ */
@media (max-width: 700px) {
.dmk-partner-mark {
max-width: none !important;
width: 100% !important;
flex-basis: 100% !important;
background: transparent !important;
border: none !important;
padding: 12px 0 0 !important;
box-shadow: none !important;
gap: 10px !important;
}
.dmk-partner-mark img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
max-height: 96px;
margin: 0 auto !important;
}
.dmk-partner-mark > div:first-child,
.dmk-partner-mark > div:last-child {
font-size:12px !important;
}
}
/* ================================================================
v495 — Compress injectables cards on mobile.
Targets the 3 dark feature cards (Profhilo / Polynucleotides /
Mesotherapy) on beauty.html — cut padding, smaller h3, hide
description so each card is roughly half its previous height.
Desktop unchanged.
================================================================ */
@media (max-width: 700px) {
.injectables-card {
padding: 14px 16px 14px !important;
}
.injectables-card > div:first-child {
font-size:12px !important;
margin-bottom: 6px !important;
}
.injectables-card h3 {
font-size: 20px !important;
margin: 0 0 6px !important;
}
.injectables-card > p {
display: none !important;
}
.injectables-card > div:last-child {
padding-top: 10px !important;
}
.injectables-card > div:last-child > div > div:first-child {
font-size:12px !important;
margin-bottom: 1px !important;
}
.injectables-card > div:last-child > div > div:nth-child(2) {
font-size: 20px !important;
}
.injectables-card > div:last-child > div > div:nth-child(3) {
display: none !important;
}
.injectables-card > div:last-child > span {
font-size: 11px !important;
}
}
/* ================================================================
v496 — Liudmyla mobile strip with photo (placeholder on left).
Photo left (72px circle), credentials right. Text left-aligned.
Onerror fallback shows coloured circle with "L" if photo missing.
================================================================ */
.liudmyla-mobile-strip .lms-row {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
}
.liudmyla-mobile-strip .lms-photo-wrap {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.18);
}
.liudmyla-mobile-strip .lms-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.liudmyla-mobile-strip .lms-photo-fallback {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--beauty-deep);
}
.liudmyla-mobile-strip .lms-photo-fallback span {
font-family: var(--serif);
font-size: 30px;
font-weight: 500;
}
.liudmyla-mobile-strip .lms-text {
flex: 1;
min-width: 0;
}
.liudmyla-mobile-strip .lms-eyebrow {
text-align: left;
margin-bottom: 4px;
}
.liudmyla-mobile-strip .lms-name {
margin-bottom: 4px;
}
.liudmyla-mobile-strip .lms-creds {
font-size: 11.5px;
line-height: 1.5;
max-width: none;
margin: 0;
}
/* ================================================================
v500 — Laser hero gradient + text contrast fix.
v503 — Bigger h1, vertical centering, more breathing room so the
text fills the beige space rather than huddling at the top.
================================================================ */
.page-hero.laser-hero-photo {
background: #2b2b2b;
min-height: 520px;
padding: 56px 0 56px;
}
.page-hero.laser-hero-photo .page-hero-bg {
background: url('images/laser-hero.jpg') center 71% / cover no-repeat;
opacity: 0.92;
}
.page-hero.laser-hero-photo .page-hero-glow {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0.62) 0%,
rgba(10, 10, 10, 0.32) 30%,
rgba(10, 10, 10, 0.08) 55%,
rgba(10, 10, 10, 0) 80%
);
}
.page-hero.laser-hero-photo .page-hero-inner {
max-width: 720px;
width: 100%;
}
.page-hero.laser-hero-photo h1 {
color: #fff;
font-size: clamp(40px, 6.5vw, 76px);
line-height: 1.02;
letter-spacing: -.025em;
margin-bottom: 22px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.page-hero.laser-hero-photo h1 em {
color: #5FD6CF;
font-style: italic;
}
.page-hero.laser-hero-photo p {
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
max-width: 320px;
font-size: 17px;
line-height: 1.55;
margin-bottom: 28px;
}
.page-hero.laser-hero-photo .hero-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--laser);
color: #fff;
text-decoration: none;
padding: 14px 26px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
transition: background .2s ease, transform .2s ease;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.page-hero.laser-hero-photo .hero-cta:hover {
background: var(--laser-deep);
transform: translateY(-1px);
}
.page-hero.laser-hero-photo .hero-cta-sub {
display: block;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin-top: 12px;
letter-spacing: .02em;
}
@media (max-width: 700px) {
.page-hero.laser-hero-photo {
min-height: 480px;
padding: 36px 0 0;
}
.page-hero.laser-hero-photo .page-hero-bg {
background-image: url('images/laser-hero-mobile.jpg');
background-position: 7% 55%;
background-size: 188%;
}
.page-hero.laser-hero-photo .page-hero-glow {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0.72) 0%,
rgba(10, 10, 10, 0.40) 35%,
rgba(10, 10, 10, 0.10) 65%,
rgba(10, 10, 10, 0) 90%
);
}
.page-hero.laser-hero-photo h1 {
font-size: clamp(34px, 9vw, 48px);
margin-bottom: 16px;
}
.page-hero.laser-hero-photo p {
font-size: 15px;
margin-bottom: 22px;
max-width: 240px;
}
.page-hero.laser-hero-photo .hero-cta {
padding: 13px 22px;
font-size: 12px;
}
}
/* ================================================================
v509 — Beauty hero: dark + white text + gradient (as v506) but
using contain instead of cover so the entire portrait shows
(smile no longer cropped). Photo positioned on the right.
================================================================ */
.page-hero.beauty-hero-photo {
background: #2b2b2b;
min-height: 520px;
padding: 56px 0 56px;
}
.page-hero.beauty-hero-photo .page-hero-bg {
background: url('images/photo-311.jpg') 0% 27% / 104% no-repeat;
opacity: 0.92;
}
.page-hero.beauty-hero-photo .page-hero-glow {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0.62) 0%,
rgba(10, 10, 10, 0.32) 30%,
rgba(10, 10, 10, 0.08) 55%,
rgba(10, 10, 10, 0) 80%
);
}
.page-hero.beauty-hero-photo .page-hero-inner {
max-width: 720px;
width: 100%;
}
.page-hero.beauty-hero-photo h1 {
color: #fff;
font-size: clamp(40px, 6.5vw, 76px);
line-height: 1.02;
letter-spacing: -.025em;
margin-bottom: 22px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.page-hero.beauty-hero-photo h1 em {
color: var(--beauty-mid);
font-style: italic;
}
.page-hero.beauty-hero-photo p {
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
max-width: 320px;
font-size: 17px;
line-height: 1.55;
margin-bottom: 0;
}
@media (max-width: 700px) {
.page-hero.beauty-hero-photo {
min-height: 480px;
padding: 36px 0 0;
}
.page-hero.beauty-hero-photo .page-hero-bg {
background-image: url('images/photo-311.jpg');
background-position: center center;
background-size: cover;
}
.page-hero.beauty-hero-photo .page-hero-glow {
background: linear-gradient(
180deg,
rgba(10, 10, 10, 0.72) 0%,
rgba(10, 10, 10, 0.40) 35%,
rgba(10, 10, 10, 0.10) 65%,
rgba(10, 10, 10, 0) 90%
);
}
.page-hero.beauty-hero-photo h1 {
font-size: clamp(34px, 9vw, 48px);
margin-bottom: 16px;
}
.page-hero.beauty-hero-photo p {
font-size: 15px;
max-width: 240px;
}
}
/* ================================================================
v537 — Dual-photo treatment cards. When .gallery-card-img has
.dual-photo class, split horizontally so two .photo-wrap divs
render side-by-side. Used on Upper Body Men package card to show
front + back of the male model in one card.
================================================================ */
.gallery-card-img.dual-photo {
display: flex;
gap: 1px;
background: var(--cream-deep);
}
.gallery-card-img.dual-photo .photo-wrap {
flex: 1;
position: relative;
height: 100%;
overflow: hidden;
}
.gallery-card-img.dual-photo .photo-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
}
/* v538 — Mobile override. The .pkg-grid mobile rule forces every
.photo-wrap inside .gallery-card-img to position: absolute; inset: 0,
which makes both dual-photo wraps stack and only one shows. Restore
the side-by-side flex behaviour for dual-photo at mobile widths too. */
@media (max-width: 700px) {
.pkg-grid .gallery-card-img.dual-photo,
.gallery-card-img.dual-photo {
display: flex !important;
flex-direction: row !important;
}
.pkg-grid .gallery-card-img.dual-photo > .photo-wrap,
.gallery-card-img.dual-photo > .photo-wrap {
position: relative !important;
inset: auto !important;
width: auto !important;
height: 100% !important;
flex: 1 1 0 !important;
}
}
/* ================================================================
v540 — Dual hero photo on treatment pages. Used when a treatment
has both a front and back photo (e.g. Upper Body Men). Renders
50/50 horizontal split with 1px divider, matching the .dual-photo
pattern used on the laser.html card.
================================================================ */
/* (superseded) Dual hero photos now stack vertically — see .hero-dual-photo
rule earlier in this file. */
/* ================================================================
v547 — Consultation callout under the treatment grid on laser.html.
Catches the user when they've scrolled the whole grid and haven't
found what they want. Sits inside .treat-main below #treat-grid.
================================================================ */
.treat-consult-callout {
margin: 28px 0 0;
padding: 26px 32px;
background: var(--laser-lite);
border: 1px solid var(--cream-deep);
border-radius: var(--rl);
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.treat-consult-callout .tcc-text { flex: 1; }
.treat-consult-callout .tcc-text h3 {
font-size: 20px;
color: var(--laser-deep);
margin: 0 0 6px;
line-height: 1.25;
}
.treat-consult-callout .tcc-text p {
font-size: 14px;
color: var(--mid);
line-height: 1.6;
margin: 0;
}
.treat-consult-callout .btn { flex-shrink: 0; }
@media (max-width: 700px) {
.treat-consult-callout {
flex-direction: column;
align-items: stretch;
padding: 20px 18px;
gap: 14px;
text-align: center;
}
.treat-consult-callout .tcc-text h3 { font-size: 17px; }
.treat-consult-callout .tcc-text p { font-size: 13px; }
}
/* ── v599 — TEXTURE UTILITY CLASSES (brand-aligned) ──────────────────────── */
/* Warm plaster texture: cream tone with plaster grain. For beauty/cream contexts. */
.tx-warm-plaster {
position: relative;
background: var(--cream);
}
.tx-warm-plaster::before {
content: '';
position: absolute; inset: 0;
background: url('images/01_WARM_CLINICAL_PLASTER.jpg') repeat;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.tx-warm-plaster > * { position: relative; z-index: 1; }
/* Mineral teal texture: deep teal with mineral surface grain. For laser/teal contexts. */
.tx-mineral-teal {
position: relative;
background: #087370;
border-color: transparent !important;
}
.tx-mineral-teal::before {
content: '';
position: absolute; inset: 0;
background: url('images/03_MINERAL_TEAL_SURFACE.jpg') repeat;
opacity: 0.7;
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.tx-mineral-teal > * { position: relative; z-index: 1; }
.tx-mineral-teal h2,
.tx-mineral-teal h3,
.tx-mineral-teal h4 { color: #fff !important; }
.tx-mineral-teal p { color: rgba(255, 255, 255, 0.85) !important; }
.tx-mineral-teal .tcc-text h3 { color: #fff !important; }
.tx-mineral-teal .tcc-text p { color: rgba(255, 255, 255, 0.88) !important; }
/* v599b — tx-mineral-teal extensions for full-section use (cards inside) */
.tx-mineral-teal .sec-tag span { color: rgba(255,255,255,0.6) !important; }
.tx-mineral-teal .sec-tag-line { background: rgba(255,255,255,0.28) !important; }
/* Gallery cards inside teal sections — body text must stay dark on white card bg */
.tx-mineral-teal .gallery-card:not(.premium-flagship) h3 { color: var(--beauty-deep) !important; }
.tx-mineral-teal .gallery-card:not(.premium-flagship) p { color: var(--mid) !important; }
.tx-mineral-teal .gallery-card:not(.premium-flagship) .gallery-card-type { color: var(--mid) !important; }
.tx-mineral-teal .gallery-card:not(.premium-flagship) .gallery-card-dur { color: var(--mid) !important; }
.tx-mineral-teal .gallery-card:not(.premium-flagship) .gallery-card-price { color: var(--beauty-deep) !important; }
.tx-mineral-teal .gallery-card:not(.premium-flagship) .gallery-card-link { color: var(--beauty-deep) !important; }
/* ── v611 — PHOTO FILENAME DEBUG LABELS DISABLED ──────────────────────────
The photo-XXX.jpg overlay badges (originally a dev/QA aid) are no longer
wanted in production per Duncan. The data-pid attributes in HTML are kept
so QA mode can flip the labels back on with a single toggle if needed.
This rule sits at the end of the file to override every earlier ::after
declaration without needing to edit each one. */
.photo-wrap::after,
.photo-wrap[data-pid]::after,
.photo-abs-wrap::after,
.team-photo-wrap[data-pid]::after,
.photo-fn-badge {
content: none !important;
display: none !important;
}
/* v628 — FAQ grid: stacked on mobile, 2-col at 880px+ for readability */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 880px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
/* Shaving-vs-laser comparison: fill the card width on desktop (was capped
at 840px, leaving wasted side space and extra wrapping); stack on mobile. */
.compare-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 auto; }
@media (max-width: 640px) { .compare-inner { grid-template-columns: 1fr; } }
/* Site-wide: all links carry a smooth hover transition (buttons, cards and
tiles already animate via their own transition declarations). */
a { transition: color var(--t), opacity var(--t); }
/* Injectables intro banner (v743) — photo right, text over cream-left */
.injectables-intro, .photo-intro { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.injectables-intro-media, .photo-intro-media { position: absolute; inset: 0; z-index: 1; }
.injectables-intro-photo, .photo-intro-photo { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.injectables-intro-title-m, .photo-intro-title-m { display: none; }
.injectables-intro-inner { position: relative; z-index: 2; padding: 56px 0; width: 100%; max-width: none; margin: 0; padding-left: clamp(24px, 4vw, 72px); box-sizing: border-box; }
.photo-intro-inner { position: relative; z-index: 2; padding: 56px 32px; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
.injectables-intro-text, .photo-intro-text { max-width: 520px; text-align: left; }
@media (max-width: 760px) {
.injectables-intro, .photo-intro { display: block; min-height: 0; }
.injectables-intro-media, .photo-intro-media { position: relative; inset: auto; z-index: auto; }
.injectables-intro-photo, .photo-intro-photo { position: static; width: 100%; height: auto; }
.injectables-intro-title-m { display: block; position: absolute; top: 50%; left: clamp(20px, 6vw, 28px); transform: translateY(-50%); max-width: 58%; margin: 0; z-index: 3; }
.photo-intro { position: relative; }
.photo-intro-photo { height: clamp(320px,82vw,400px) !important; object-fit: cover; }
.photo-intro-media::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(8,8,8,.74) 0%, rgba(8,8,8,.45) 24%, rgba(8,8,8,.12) 46%, transparent 64%); }
.photo-intro-title-m { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 2; max-width: none; margin: 0; padding: 26px 18px 0; }
.injectables-intro-title-d, .photo-intro-title-d { display: none; }
.injectables-intro-inner, .photo-intro-inner { padding: 24px 24px 32px; }
.injectables-intro-text, .photo-intro-text { max-width: none; }
}
/* Injectables — boxed info cards (v748) */
.inj-box { background: #fff; border: 1px solid #e8e4df; border-radius: 16px; padding: 26px 24px; box-shadow: 0 1px 3px rgba(40,33,28,.05); }
.inj-box--step { padding-top: 28px; }
/* Light marble background + adjustable dark tint (v751) */
.tx-marble-light { position: relative; background: #f3efe8 url('images/marble-light.jpg') center center / cover no-repeat; }
.tx-marble-light::before { content: ''; position: absolute; inset: 0; background: rgba(38, 33, 27, var(--marble-tint, 0.10)); pointer-events: none; }
.tx-marble-light > * { position: relative; z-index: 1; }
/* 1px boundary line between background sections (v752) — dark on light bg, white on dark bg */
.sec-divider, .sec-divider-dark { display: none; }
.tx-cream, .tx-paper, .tx-plaster, .tx-warm, .tx-cards, .tx-marble-light, .bg-cream, .bg-white { border-top: 1px solid rgba(0,0,0,0.16); }
.tx-mineral-teal, .tx-graphite, .tx-teal, .tx-marble, .tx-glass { border-top: 1px solid rgba(255,255,255,0.18); }
/* Advanced Facials on charcoal — light section text, cards stay dark (v757) */
.adv-facials h2, .adv-facials h3, .adv-facials h4 { color: #fff !important; }
.adv-facials p { color: rgba(255,255,255,0.82) !important; }
.adv-facials .sec-tag span { color: rgba(255,255,255,0.55) !important; }
.adv-facials .sec-tag-line { background: rgba(255,255,255,0.28) !important; }
.adv-facials .gallery-card:not(.premium-flagship) h3,
.adv-facials .gallery-card:not(.premium-flagship) h4 { color: var(--beauty-deep) !important; }
.adv-facials .gallery-card:not(.premium-flagship) p { color: var(--mid) !important; }
/* ===== Mobile menu (hamburger) — v768 ===== */
.nav-burger { display: none; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; padding: 6px 10px; margin: 0; -webkit-tap-highlight-color: transparent; }
@media (max-width: 900px) {
.nav-burger { display: block; }
body.mnav-open .nav-links {
display: flex !important; flex-direction: column; align-items: stretch;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--cream-deep);
box-shadow: 0 14px 34px rgba(0,0,0,.14);
padding: 6px 0 10px; gap: 0; max-height: calc(100vh - var(--top-offset, 68px) - 84px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.mnav-open .nav-links > li { width: 100%; border-top: 1px solid rgba(0,0,0,.05); }
body.mnav-open .nav-links > li:first-child { border-top: 0; }
body.mnav-open .nav-links > li > a { padding: 13px 24px; font-size: 15px; }
body.mnav-open .nav-links .dd-menu,
body.mnav-open .nav-links .has-dd .dd {
display: block !important; position: static !important; top: auto !important; left: auto !important;
box-shadow: none !important; border: 0 !important; background: transparent !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
min-width: 0 !important; padding: 0 0 8px !important;
}
body.mnav-open .nav-links .dd-menu a,
body.mnav-open .nav-links .has-dd .dd a { padding: 9px 24px 9px 40px !important; font-size: 13px !important; display: block; }
body.mnav-open .nav-links .dd-menu hr,
body.mnav-open .nav-links .has-dd .dd hr { display: none; }
}
/* beauty-hero-sub is white (dark-hero subtitle); darken on light sections so it's readable (v769) */
.tx-cream .beauty-hero-sub, .tx-paper .beauty-hero-sub, .tx-plaster .beauty-hero-sub,
.tx-warm .beauty-hero-sub, .tx-cards .beauty-hero-sub, .tx-marble-light .beauty-hero-sub,
.bg-cream .beauty-hero-sub, .bg-white .beauty-hero-sub { color: var(--mid) !important; }
/* v789 — laser-skin before/after frames: fixed 4:3 so all three views match + fill */
.ls-photo-frame-card .ls-results-frame.ls-ba { aspect-ratio: 4 / 3; }
.ls-photo-frame-card .ls-results-frame.ls-ba img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* =============================================================
REVIEWS HIDDEN PRE-LAUNCH — placeholder reviews hidden site-wide.
TO RESTORE before go-live: delete this single rule.
============================================================= */
/* Goal-page photo-intro — consistent: bold teal headline + white body (desktop overlay) */
.goal-photo-white .photo-intro-title-d,
.goal-photo-white .photo-intro-title-m { color: var(--beauty-deep) !important; font-weight: 700 !important; }
@media (min-width: 761px) { .goal-photo-white .photo-intro-text p { color: #fff !important; } }
@media (max-width: 760px) {
.goal-photo-white .photo-intro-title-m, .photo-intro-title-m { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
}
/* ===== Mobile responsive hardening (v823) ===== */
img, video { max-width: 100%; }
small { font-size: max(11px, 0.85em); }
.fresha-mock-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; }
.nav-book-mobile { display: none; }
@media (max-width: 600px) {
.nav-logo img { height: 46px !important; }
/* v1025 — keep the header Book CTA visible on mobile (was display:none, which hid
the laser/treatment .btn-primary booking button and created a booking dead-end). */
.nav-actions > .btn-primary { display: inline-flex; align-items: center; padding: 9px 14px; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
body.mnav-open .nav-links .nav-book-mobile { display: block; }
body.mnav-open .nav-book-mobile > a { padding: 13px 24px; font-size: 15px; color: var(--laser); font-weight: 600; display: block; }
.fresha-mock-cols { grid-template-columns: 1fr !important; }
}
/* ===== Mobile gallery: 2 across (v827) — half-screen cards, small centre gap (v864) ===== */
@media (max-width: 700px) {
.gallery-grid, .gallery-grid.compact-grid, .gallery-grid.injectables-grid-4,
.gallery-grid.laser-skin-4col, .gallery-grid.cols-4-laser,
.gallery-grid.compact-grid.injectables-grid-4 {
grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; align-items: start !important;
margin-left: -12px !important; margin-right: -12px !important;
}
}
/* ===== v870 — .m-fullgrid: any 2-up box grid fills full mobile width (matches gallery) ===== */
@media (max-width: 700px) {
.m-fullgrid { margin-left: -12px !important; margin-right: -12px !important; gap: 10px !important; width: auto !important; max-width: none !important; }
}
/* ===== Hero treatment banners (photo): bottom-left teal heading + dark bottom fade (v827) ===== */
.laser-hero-photo, .beauty-hero-photo {
display: flex; align-items: flex-end;
min-height: clamp(340px, 42vw, 480px);
padding-top: 0 !important; padding-bottom: 40px !important;
}
.laser-hero-photo .page-hero-glow, .beauty-hero-photo .page-hero-glow {
background: linear-gradient(to top, rgba(8,8,8,.86) 0%, rgba(8,8,8,.5) 20%, rgba(8,8,8,.12) 38%, transparent 56%) !important;
}
.laser-hero-photo h1, .beauty-hero-photo h1 { color: #fff !important; }
.laser-hero-photo h1 em, .beauty-hero-photo h1 em { color: #5FD6CF !important; }
@media (max-width: 700px) { .beauty-faq-grid { grid-template-columns: 1fr !important; } }
/* ============================================================
HERO PHOTO — TOP TEMPLATE (reusable). Text pinned top-left,
fade darkest at the TOP of the photo (per Duncan's spec).
Usage on any page: add class "hero-photo-top" to the
.page-hero plus a page-specific .page-hero-bg background image.
============================================================ */
.page-hero.hero-photo-top { background:#0a0a0a; display:block !important; min-height: clamp(420px,56vw,560px); padding: 30px 0 48px !important; }
.page-hero.hero-photo-top .page-hero-glow {
background: linear-gradient(to bottom,
rgba(8,8,8,.85) 0%, rgba(8,8,8,.55) 18%,
rgba(8,8,8,.2) 38%, transparent 60%) !important;
}
.page-hero.hero-photo-top .wrap { padding-left: 22px; }
.page-hero.hero-photo-top .page-hero-inner { max-width: 640px; width:100%; }
.page-hero.hero-photo-top h1 { color:#fff !important; font-size: clamp(38px,6.5vw,72px); line-height:1.03; letter-spacing:-.025em; margin-bottom:18px; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.page-hero.hero-photo-top h1 em { color: #5FD6CF !important; font-style: italic; }
.page-hero.hero-photo-top p { color: rgba(255,255,255,.94); text-shadow:0 1px 4px rgba(0,0,0,.35); max-width:340px; font-size:16px; line-height:1.55; margin-bottom:24px; }
@media (max-width:760px){
.page-hero.hero-photo-top { min-height: clamp(360px,74vw,460px); padding: 24px 0 38px !important; }
.page-hero.hero-photo-top .wrap { padding-left: 14px; }
.page-hero.hero-photo-top p { max-width: 280px; }
}
/* ============================================================
MARBLE HEROS — size to header text only. The hero-photo-top
template gives a tall banner for real photos; texture/marble
heros (no -photo class) should just back the header text, so
drop the big min-height and use compact padding.
============================================================ */
.page-hero.hero-photo-top:not(.laser-hero-photo):not(.beauty-hero-photo):not(.candela-hero) {
min-height: 0 !important;
padding: 30px 0 34px !important;
}
@media (max-width:760px){
.page-hero.hero-photo-top:not(.laser-hero-photo):not(.beauty-hero-photo):not(.candela-hero) {
padding: 24px 0 28px !important;
}
}
/* ============================================================
p29–p36 goal-page top headline — match p20 / p02 photo-hero
header treatment: white Lora serif + mint italic em (v846).
Scoped to .goal-hero-headline so other hero-photo-top pages
keep their default teal heading.
============================================================ */
.page-hero.hero-photo-top.goal-hero-headline h1 {
color: #fff !important;
font-size: clamp(40px, 6.5vw, 76px);
line-height: 1.02;
margin-bottom: 22px;
}
.page-hero.hero-photo-top.goal-hero-headline h1 em {
color: #5FD6CF !important;
font-style: italic;
}
@media (max-width: 760px) {
.page-hero.hero-photo-top.goal-hero-headline h1 {
font-size: clamp(34px, 9vw, 48px);
margin-bottom: 16px;
}
}
/* ============================================================
p29–p36 goal PHOTO-HERO (v848) — marble removed; concern
title sits over the goal photo, matching p20. Shared by all
8 goal pages via .goal-photohero.
============================================================ */
.goal-photohero .concern-hero-h1 { font-family:var(--serif); font-weight:600; color:#fff; font-size:clamp(40px,6.5vw,76px); line-height:1.02; letter-spacing:-.025em; margin:0 0 22px; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.goal-photohero .concern-hero-h1 em { color:#5FD6CF; font-style:italic; }
.goal-photohero .concern-subline { color:rgba(255,255,255,.94); text-shadow:0 1px 4px rgba(0,0,0,.3); font-size:17px; line-height:1.55; margin:0; max-width:30em; }
@media (min-width:761px){
.goal-photohero .photo-intro-media::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg,rgba(10,10,10,.80) 0%,rgba(10,10,10,.48) 36%,rgba(10,10,10,.08) 60%,transparent 76%); }
.goal-photohero .photo-intro-inner { z-index:2; }
}
@media (max-width:760px){
.goal-photohero .concern-hero-h1 { font-size:clamp(34px,9vw,48px); margin-bottom:16px; }
.goal-photohero .photo-intro-title-m .concern-subline { font-size:15px; max-width:75%; }
/* mobile: the inner only holds the desktop heading (hidden here) — drop it so there's no empty padded gap after the photo */
.goal-photohero .photo-intro-inner { display:none; }
}
/* v883 — laser-skin 2-col section photos fill their column (was capped 396px, leaving whitespace) */
.ls-split-2col-photo .ls-photo-frame-card { max-width: none; width: 100%; }
/* ROLLOUT: hide dev version stamp. Delete this line to show version markers again in dev. */
/* PROMO BAR (launch offer) — v923 */
.promo-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:#0D7377;color:#fff;font-family:var(--sans);font-size:13px;line-height:1.45;padding:9px 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;text-decoration:none}
.promo-bar:hover{background:#0a5e62}
.promo-code{display:inline-block;font-weight:700;letter-spacing:.06em;border:1px solid rgba(255,255,255,.55);border-radius:4px;padding:1px 8px;white-space:nowrap}
.promo-full .promo-code{margin:0 3px}
.promo-cta{font-weight:600;border:1px solid rgba(255,255,255,.6);border-radius:4px;padding:3px 12px;white-space:nowrap}
.promo-mini{display:none}
@media(max-width:700px){
.promo-full,.promo-cta{display:none}
.promo-mini{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;line-height:1.25;font-weight:500}
.promo-bar{padding:9px 14px;gap:0}
}
/* v926 — extra scroll room below footer on mobile so footer links (Contact) clear the fixed bottom bar + iPhone home indicator */
@media(max-width:900px){
.site-footer{ padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
}
/* Card hover lift (CSS-based, replaces inline JS hover so it is not blocked by CSP/extensions) */
.lift-card { transition: transform .2s ease, box-shadow .2s ease; }
.lift-card:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0,0,0,.14) !important; }
/* v990 — Treatment finder (beauty.html / uk) full-cell nav links */
.tf-card{background:#fff;border:1px solid var(--cream-border);border-radius:14px;max-width:760px;margin:0 auto;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.tf-table{width:100%;border-collapse:collapse;font-size:14px}
.tf-table th{padding:12px 24px;text-align:left;font-weight:600;color:var(--mid);border-bottom:1px solid var(--cream-border)}
.tf-table td{border-bottom:1px solid var(--cream-border);vertical-align:top}
.tf-table tr:last-child td{border-bottom:none}
.tf-table .gf-concern{color:var(--mid);padding:12px 24px}
.tf-table .gf-pick-cell{padding:0}
.guide-link{display:block;padding:12px 24px;color:var(--beauty-deep);font-weight:600;text-decoration:none;transition:background var(--t),color var(--t)}
.guide-link + .guide-link{border-top:1px solid var(--cream-border)}
.guide-link:hover,.guide-link:focus{background:var(--beauty-lite);color:var(--beauty-deep);outline:none}
.gf-cons{color:var(--mid);font-weight:400}
/* v1023 — social icons in footer-bottom: mobile only (footer-cols is hidden <=700px,
which removed the brand-column icons on phones). Desktop keeps the column version. */
.footer-social-mobile { display: none; }
@media (max-width: 700px) {
.footer-social-mobile { display: flex; justify-content: center; gap: 28px; margin-bottom: 14px; }
.footer-social-mobile a { color: rgba(255,255,255,.75); display: inline-flex; padding: 8px; }
}
/* desktop brand-column icons: readable resting colour, teal on hover */
.footer-social a { color: rgba(255,255,255,.75) !important; transition: color .2s; }
.footer-social a:hover { color: var(--laser-mid) !important; }
/* v1025 — guard against header overflow on very small phones with the Book CTA now visible */
@media (max-width: 360px) {
.nav-actions > .btn-primary { padding: 8px 11px; font-size: 10.5px; }
.nav-logo img { height: 40px !important; }
}
/* v1027 — homepage hero promo line (replaces the corner ribbon flash).
Matches hero eyebrow/sub: same sans font + white, sits under the doctorate-led copy. */
.p01-hero-promo {
font-family: var(--sans);
font-size: 13px;
letter-spacing: .04em;
color: rgba(255,255,255,.72);
margin-top: 16px;
line-height: 1.5;
}
.p01-hero-promo strong { color: var(--laser-mid); font-weight: 600; }
@media (max-width: 700px) {
.p01-hero-promo { font-size: 12.5px; text-align: center; max-width: 300px; margin: 14px auto 0; }
}
/* v1030 — full-width yellow promo band across the homepage hero. Brand gold (#FFC400),
deep-teal text for contrast/legibility. Replaces the retired corner ribbon. */
.hero-promo-band {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 10px 14px; width: 100%; box-sizing: border-box;
background: #FFC400; color: #0C3B38; text-decoration: none;
font-family: var(--sans); padding: 14px 24px; text-align: center;
border-top: 1px solid rgba(0,0,0,.06);
}
.hero-promo-band:hover { background: #FFD028; }
.hero-promo-band .hpb-strong { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.hero-promo-band .hpb-sep { opacity: .5; font-weight: 700; }
.hero-promo-band .hpb-text { font-weight: 500; font-size: 13.5px; opacity: .92; }
@media (max-width: 600px) {
.hero-promo-band { padding: 12px 18px; gap: 4px 10px; }
.hero-promo-band .hpb-strong { font-size: 14.5px; }
.hero-promo-band .hpb-sep { display: none; }
.hero-promo-band .hpb-text { font-size: 12px; flex-basis: 100%; }
}
/* v1033 — marble spacer below the hero promo band (same marble as the hero), half-depth. */
.hero-promo-gap {
height: 20px;
background: #2B2B2B url('images/hero-marble.jpg') center / cover no-repeat;
}