/*
* Lynn Beauty Care — Self-hosted fonts
* Cormorant Garamond 400 + 600, DM Sans 400 + 500
* Latin subset only (Australian English site — no Cyrillic/Vietnamese needed)
* font-display: swap prevents invisible text during font load (Core Web Vitals)
*/
/* Cormorant Garamond — Latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* DM Sans — Latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* ======================================================================
Lynn Beauty Care — global stylesheet (all HTML pages)
Structure
1. Design tokens (:root)
2. Reset & base typography
3. Home / marketing layout — nav, hero, sections, blog, responsive
4. Site footer (.site-footer)
5. Inner-page components (services.html — pricing from assets/services-menu.json, modals, FAQ)
Marketing home: index.html, without .page-services. Services hub: services.html, .
New pages: link this file + Google Fonts (Cormorant Garamond, DM Sans, Jost); add
+ at top of body.
====================================================================== */
/* --- 1. Design tokens --- */
/* Nav uses --sans (DM Sans). Load DM Sans from Google Fonts on every page (see HTML ). */
:root {
/* Color */
--charcoal: #2E2A27;
--white: #FDFCFB;
--blush: #F7EFED;
--blush-mid: #F7EFED;
--blush-deep: #e3226c;
--ink: #1A1512;
--ink-soft: #3D3330;
--ink-muted: #7A6E6B;
--gold: #C9A979;
--pink: #e3226c;
/* Typography — families */
--sans: 'DM Sans', system-ui, sans-serif;
--font-body: 'Jost', sans-serif;
--font-display: 'Cormorant Garamond', serif;
/* Type scale */
--text-2xs: 9px;
--text-xs: 10px;
--text-caption: 11px;
--text-sm: 12px;
--text-label: 12px;
--text-eyebrow: 14px;
--text-body: 16px;
--text-lead: 18px;
--text-stat: 20px;
--leading-body: 1.8;
--leading-prose: 1.78;
--leading-relaxed: 1.75;
--leading-snug: 1.65;
--leading-tight: 1.25;
--leading-section: 1.15;
--leading-display: 1.05;
--tracking-tight: 0.06em;
--tracking-caption: 0.1em;
--tracking-ui: 0.12em;
--tracking-ui-wide: 0.14em;
--tracking-author: 0.15em;
--tracking-mid: 0.16em;
--tracking-wide: 0.18em;
--tracking-eyebrow: 0.25em;
--tracking-eyebrow-wide: 0.28em;
--tracking-footer-col: 0.22em;
/* Space */
--space-2xs: 6px;
--space-xs: 10px;
--space-sm: 14px;
--space-md: 18px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 40px;
--space-3xl: 48px;
--space-4xl: 52px;
--space-5xl: 56px;
--space-section-y: 96px;
--space-section-y-md: 88px;
--space-section-y-tall: 120px;
--space-section-y-mobile: 64px;
--pad-page-x: 48px;
--pad-page-x-mobile: 24px;
--pad-hero-x: 80px;
--pad-hero-b: 80px;
--pad-hero-b-mobile: 56px;
--pad-content-x: 72px;
--pad-content-y: 80px;
--pad-studio-x: 64px;
--pad-training: 80px;
--pad-training-y: 120px;
/* Surfaces & motion */
--radius-pill: 999px;
--border-blush: 1px solid rgba(237, 217, 207, 0.85);
--shadow-card: 0 24px 64px rgba(26, 21, 18, 0.09);
--duration-fast: 0.2s;
--duration-base: 0.3s;
--duration-nav: 0.4s;
--duration-reveal: 0.72s;
--ease-service: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--space-block-lg: 52px;
--space-block-md: 44px;
--space-block-sm: 36px;
--pad-tight-y: 56px;
--pad-compact-y: 80px;
--pad-footer-y: 48px;
/* Inner-page (services hub) surfaces */
--cream: #FAF8F5;
--cream2: #F7EFED;
--blush-lt: #F7EFED;
--blush-vlt: #F7EFED;
--blush-dk: #e3226c;
--charcoal-deep: #141413;
--mid: #6B6560;
--light: #A8A29E;
--rule: #E8E2DC;
--section-pad-x: clamp(16px, 5vw, 48px);
--section-pad-y: clamp(64px, 10vw, 96px);
--section-inner-max: 1300px;
--nav-height: 72px;
--serif: 'Cormorant Garamond', Georgia, serif;
}
/* --- 2. Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Form controls: the * reset removes UA margin/padding so third-party forms (Lead Machine,
Fluent Forms, etc.) often lose field/button chrome unless they ship very high-specificity CSS.
Revert to UA defaults for these elements only; plugin rules can still override. */
input,
textarea,
select,
button,
fieldset {
margin: revert;
padding: revert;
}
fieldset {
border: revert;
min-inline-size: revert;
}
legend {
padding: revert;
}
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
background: var(--white);
color: var(--ink);
overflow-x: hidden;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
/* --- 3. Home / shared marketing layout --- */
/* NAV — layout + typography defined once; only CSS vars change (hero overlay vs solid bar) */
#nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--nav-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--pad-page-x);
font-family: var(--sans);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
transition: background var(--duration-nav), box-shadow var(--duration-nav);
/* Hero / transparent bar */
--nav-brand-color: var(--white);
--nav-link-color: rgba(255, 255, 255, 0.85);
--nav-logo-filter: brightness(0) invert(1);
--nav-hamburger-bg: var(--white);
--nav-cta-bg: var(--blush);
--nav-cta-border: var(--blush-mid);
--nav-cta-color: var(--ink);
}
body.page-services #nav,
body.page-service-single #nav,
body.page-template-page-service-single-php #nav,
body.single-post #nav,
body.archive #nav,
body.search #nav,
body.error404 #nav,
body.page-template-page-gift-card-landing-php #nav,
body.lynn-nav-open #nav,
#nav.scrolled {
background: rgba(253, 252, 251, 0.97);
backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(26, 21, 18, 0.08);
--nav-brand-color: var(--charcoal);
--nav-link-color: var(--ink-soft);
--nav-logo-filter: brightness(0);
--nav-hamburger-bg: var(--ink);
--nav-cta-bg: #de276c;
--nav-cta-border: #de276c;
--nav-cta-color: var(--white);
}
body:not(.page-services):not(.page-service-single):not(.page-template-page-service-single-php):not(.single-post):not(.archive):not(.search):not(.error404):not(.page-template-page-gift-card-landing-php):not(.lynn-nav-open) #nav:not(.scrolled) {
background: transparent;
box-shadow: none;
}
#nav .nav-logo {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
color: inherit;
}
#nav .nav-logo-img {
height: 40px;
width: 40px;
object-fit: contain;
flex-shrink: 0;
transition: filter var(--duration-nav);
filter: var(--nav-logo-filter);
}
#nav .nav-brand {
font-family: var(--sans);
font-size: var(--text-lead);
font-weight: 300;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--nav-brand-color);
transition: opacity var(--duration-base), color var(--duration-nav);
white-space: nowrap;
min-width: 0;
}
#nav .nav-links {
align-self: stretch;
display: flex;
align-items: stretch;
gap: var(--space-xl);
list-style: none;
margin: 0;
padding: 0;
}
#nav .nav-links > li {
display: flex;
align-items: center;
}
#nav .nav-links a {
font-family: var(--sans);
text-decoration: none;
font-size: var(--text-sm);
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
font-weight: 400;
color: var(--nav-link-color);
transition: opacity var(--duration-fast);
}
#nav .nav-links a:hover { opacity: 0.55; }
#nav .nav-links .nav-item {
position: relative;
align-items: center;
}
/* Invisible hit bridge: abs dropdown is out of flow, so the strip under the trigger was not part of :hover — pointer “fell through” and the menu closed. */
#nav .nav-item--has-dropdown::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 14px;
z-index: 108;
}
#nav .nav-item--has-dropdown .nav-dropdown-trigger::after {
content: '';
display: inline-block;
margin-left: 5px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
opacity: 0.55;
vertical-align: 0.15em;
}
#nav .nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 228px;
margin: 0;
/* Top padding = continuous hit target from li bottom into the panel (no dead air gap). */
padding: 12px 0 10px;
list-style: none;
background: rgba(253, 252, 251, 0.98);
backdrop-filter: blur(10px);
box-shadow: 0 16px 48px rgba(26, 21, 18, 0.12);
border: 1px solid rgba(26, 21, 18, 0.08);
border-radius: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 110;
}
#nav .nav-item--has-dropdown:hover .nav-dropdown,
#nav .nav-item--has-dropdown:focus-within .nav-dropdown,
#nav .nav-item--has-dropdown.is-dropdown-open .nav-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#nav .nav-dropdown a {
display: block;
padding: 10px 20px;
font-size: 13px;
text-transform: none;
letter-spacing: 0.03em;
font-weight: 400;
color: var(--ink-soft);
white-space: nowrap;
}
#nav .nav-dropdown a:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.04);
}
#nav .nav-cta {
box-sizing: border-box;
padding: 9px 22px;
border-radius: var(--radius-pill);
font-size: var(--text-caption) !important;
letter-spacing: var(--tracking-ui-wide) !important;
font-weight: 400 !important;
font-family: var(--sans) !important;
line-height: 1.2 !important;
background: var(--nav-cta-bg) !important;
border: 1px solid var(--nav-cta-border) !important;
color: var(--nav-cta-color) !important;
transition: background var(--duration-base), color var(--duration-base), border-color var(--duration-base), opacity var(--duration-fast) !important;
}
#nav .nav-hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px 6px;
flex-direction: column;
gap: 5px;
font: inherit;
color: inherit;
}
#nav .nav-hamburger span {
display: block;
width: 22px;
height: 1.5px;
transform-origin: center;
transition: transform var(--duration-nav), opacity var(--duration-nav), background var(--duration-nav);
background: var(--nav-hamburger-bg);
}
#nav .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
#nav .nav-hamburger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
#nav .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* -------------------------------------------------------------
Mobile navigation panel
Full-height drawer, fade + slide. No sticky footer (chat bubble
overlaps), CTA is placed prominently at the top of the content.
------------------------------------------------------------- */
.lynn-nav-panel {
position: fixed;
inset: 0;
z-index: 99;
background: var(--white);
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity 0.28s ease,
transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
visibility 0s linear 0.32s;
-webkit-overflow-scrolling: touch;
}
.lynn-nav-panel.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 0.28s ease,
transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
visibility 0s linear 0s;
}
.lynn-nav-panel__inner {
width: 100%;
max-width: 560px;
margin: 0 auto;
padding: calc(var(--nav-height) + 24px) var(--pad-page-x-mobile)
calc(28px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Primary CTA — prominent, inline with flow (not sticky) */
.lynn-nav-panel__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 100%;
box-sizing: border-box;
padding: 16px 22px;
border-radius: var(--radius-pill);
background: var(--blush-deep);
border: 1px solid var(--blush-deep);
color: var(--white);
text-decoration: none;
font-family: var(--sans);
font-weight: 500;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.lynn-nav-panel__cta:hover,
.lynn-nav-panel__cta:focus-visible {
background: #c71a5d;
border-color: #c71a5d;
color: var(--white);
}
.lynn-nav-panel__cta:active { transform: translateY(1px); }
.lynn-nav-panel__cta-label {
font-size: var(--text-sm);
}
.lynn-nav-panel__cta-hint {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--white);
font-weight: 400;
opacity: 0.8;
}
/* List */
.lynn-nav-panel__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.lynn-nav-panel__item {
border-bottom: 1px solid rgba(26, 21, 18, 0.08);
}
.lynn-nav-panel__item:last-child { border-bottom: 0; }
.lynn-nav-panel__link {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 2px;
font-family: var(--sans);
font-size: 18px;
font-weight: 400;
line-height: 1.2;
color: var(--ink);
text-decoration: none;
letter-spacing: 0.01em;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
transition: color 0.18s ease, opacity 0.18s ease;
}
.lynn-nav-panel__link:hover,
.lynn-nav-panel__link:focus-visible { color: var(--blush-deep); }
.lynn-nav-panel__link:focus-visible {
outline: 2px solid var(--blush-deep);
outline-offset: 4px;
border-radius: 4px;
}
/* Caret for Services trigger */
.lynn-nav-panel__caret {
width: 9px;
height: 9px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.25s ease;
opacity: 0.6;
flex: 0 0 auto;
}
.lynn-nav-panel__trigger[aria-expanded="true"] .lynn-nav-panel__caret {
transform: rotate(-135deg);
opacity: 0.9;
}
/* Submenu accordion using grid-template-rows trick (glitch-free) */
.lynn-nav-panel__sub-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lynn-nav-panel__item--has-sub.is-expanded .lynn-nav-panel__sub-wrap {
grid-template-rows: 1fr;
}
.lynn-nav-panel__submenu {
min-height: 0;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.lynn-nav-panel__item--has-sub.is-expanded .lynn-nav-panel__submenu {
opacity: 1;
transform: translateY(0);
}
.lynn-nav-panel__sublink {
display: block;
padding: 12px 2px 12px 14px;
font-family: var(--sans);
font-size: 15px;
line-height: 1.3;
color: var(--ink-soft);
text-decoration: none;
letter-spacing: 0.01em;
border-left: 1px solid var(--blush-mid);
margin-left: 4px;
transition: color 0.18s ease, border-color 0.18s ease;
}
.lynn-nav-panel__sublink:hover,
.lynn-nav-panel__sublink:focus-visible {
color: var(--blush-deep);
border-color: var(--blush-deep);
}
@media (prefers-reduced-motion: reduce) {
.lynn-nav-panel,
.lynn-nav-panel__sub-wrap,
.lynn-nav-panel__submenu,
.lynn-nav-panel__caret,
.nav-hamburger span { transition: none !important; }
}
/* HERO */
.hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-image: url('../images/lynn-beauty-care-newstead-brisbane-lash-salon.webp'); background-size: cover; background-position: center 20%; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,21,18,0.3) 0%, rgba(26,21,18,0.45) 35%, rgba(26,21,18,0.1) 100%); }
.hero-content { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad-hero-x) var(--pad-hero-b); }
.hero-eyebrow { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: var(--space-md); }
.hero-headline { font-family: var(--font-display); font-size: clamp(54px, 7.5vw, 96px); font-weight: 300; color: var(--white); line-height: var(--leading-display); margin-bottom: var(--space-lg); max-width: 720px; }
.hero-headline em { font-style: italic; }
.hero-sub {
font-size: 18px;
color: rgba(255,255,255,0.75);
margin-bottom: 44px;
max-width: 600px;
line-height: var(--leading-relaxed);
}
.hero-btns { display: flex; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-5xl); flex-wrap: wrap; }
.btn-primary { background: var(--blush); color: var(--ink); padding: var(--space-sm) 36px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 500; text-decoration: none; display: inline-block; transition: background var(--duration-fast), transform 0.15s; border: 1px solid var(--blush-mid); }
.btn-primary:hover { background: var(--blush-mid); transform: translateY(-1px); }
.btn-secondary { border: 1px solid rgba(255,255,255,0.45); color: var(--white); padding: 13px 34px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 300; text-decoration: none; display: inline-block; transition: background var(--duration-fast), transform 0.15s; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.hero-proof { display: flex; gap: var(--space-2xl); padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.18); flex-wrap: wrap; }
.proof-item { display: flex; flex-direction: column; gap: 3px; }
.proof-num { font-family: var(--font-display); font-size: var(--text-stat); font-weight: 400; color: var(--white); line-height: 1; }
.proof-label { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255,255,255,0.55); }
/* TRUST BAR */
.trust-bar {
background: var(--pink);
padding: 16px var(--pad-page-x);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
flex-wrap: wrap;
color: var(--white);
}
.trust-item {
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--white);
font-weight: 400;
}
.trust-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
flex-shrink: 0;
}
/* AS FEATURED IN */
.featured-in {
background: var(--white);
padding: 25px var(--pad-page-x) 10px;
border-bottom: var(--border-blush);
}
.featured-in-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.featured-in-label {
font-size: var(--text-xs);
letter-spacing: var(--tracking-eyebrow-wide);
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: var(--space-sm);
font-weight: 400;
}
.featured-in-logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: clamp(40px, 7vw, 80px); flex-wrap: wrap; }
.featured-in-logos li { margin: 0; padding: 0; }
.featured-in-logo {
display: flex;
align-items: center;
justify-content: center;
height: 75px;
color: var(--ink-soft);
opacity: 0.4;
transition: opacity 0.35s ease;
}
.featured-in-logo:hover { opacity: 0.58; }
.featured-in-logo img { height: 100%; width: auto; max-width: min(280px, 55vw); object-fit: contain; object-position: center; display: block; }
/* SHARED — section typography & actions */
.section-eyebrow { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blush-deep); margin-bottom: var(--space-sm); font-weight: 500; }
.section-title { font-family: var(--font-display); font-size: clamp(34px, 4vw, 50px); font-weight: 300; line-height: var(--leading-section); color: var(--ink); margin-bottom: var(--space-md); }
.section-title em { font-style: italic; }
.btn-dark { background: var(--ink); color: var(--white); padding: var(--space-sm) 40px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 400; text-decoration: none; display: inline-block; transition: background var(--duration-fast), transform 0.15s; }
.btn-dark:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn-outline-dark { border: 1px solid rgba(26,21,18,0.28); color: var(--ink-soft); padding: 13px 36px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 300; text-decoration: none; display: inline-block; transition: border-color var(--duration-fast), transform 0.15s; }
.btn-outline-dark:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-outline-white { border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); padding: 13px 36px; border-radius: var(--radius-pill); font-size: var(--text-caption); letter-spacing: var(--tracking-ui-wide); text-transform: uppercase; font-weight: 300; text-decoration: none; display: inline-block; transition: border-color var(--duration-fast), color var(--duration-fast); white-space: nowrap; }
.btn-outline-white:hover { border-color: rgba(255,255,255,0.55); color: var(--white); }
.text-link { font-size: var(--text-caption); letter-spacing: var(--tracking-ui-wide); text-transform: uppercase; color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--blush-mid); padding-bottom: 3px; transition: color var(--duration-fast), border-color var(--duration-fast); white-space: nowrap; }
.text-link:hover { color: var(--ink); border-color: var(--blush-deep); }
/* Uppercase “read more” treatment — shared by blog cards and standalone links */
.link-read-more,
.blog-card-cta {
font-size: var(--text-caption);
font-weight: 400;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
border-bottom: 1px solid var(--blush-mid);
padding-bottom: 3px;
width: fit-content;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
a.link-read-more { display: inline-block; }
.link-read-more:hover,
.blog-card-hit:hover .blog-card-cta { color: var(--ink); border-color: var(--blush-deep); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-reveal) ease, transform var(--duration-reveal) ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Inner-page section shell (services hub, etc.) — typography uses global .section-eyebrow / .section-title */
.section-wrap {
padding: var(--section-pad-y) var(--section-pad-x);
max-width: var(--section-inner-max);
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.section-lead {
font-size: var(--text-body);
color: var(--ink-muted);
font-weight: 300;
max-width: 560px;
line-height: var(--leading-relaxed);
margin: 0 auto 40px;
}
/* SERVICES */
.services { padding: var(--space-section-y) var(--pad-content-x); background: var(--white); }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-block-lg); }
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
overflow: hidden;
}
.service-card { position: relative; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; text-decoration: none; display: block; }
.service-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.65s var(--ease-service); }
.service-card:hover .service-img { transform: scale(1.07); }
.service-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,21,18,0.8) 0%, rgba(26,21,18,0) 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 22px; }
.service-tag { font-size: var(--text-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 5px; }
.service-name { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: var(--space-xs); }
.service-link { font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 5px; }
.service-link::after { content: '→'; }
.service-card:hover .service-link { color: var(--white); }
/* TRAINING */
.training {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
}
.training-bg {
position: absolute;
left: 0;
right: 0;
/* Extra height so scale() zoom never shows gaps at .training edges */
top: 0;
bottom: 0;
width: 100%;
transform-origin: center center;
background-image: url('../images/lash-tech-courses-brisbane-learn-eyelash-extensions-eyebrows-c.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
will-change: transform;
}
.training-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(26,21,18,0.52) 0%, rgba(26,21,18,0.35) 55%, rgba(26,21,18,0.2) 100%);
}
.training-content {
position: relative;
z-index: 2;
padding: var(--pad-training-y) var(--pad-training);
max-width: 680px;
}
.training-eyebrow { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow-wide); text-transform: uppercase; color: var(--blush-vlt); margin-bottom: var(--space-md); font-weight: 500; }
.training-title { font-family: var(--font-display); font-size: clamp(42px, 5vw, 68px); font-weight: 300; color: var(--white); line-height: 1.08; margin-bottom: var(--space-lg); }
.training-title em { font-style: italic; }
.training-body { font-size: var(--text-body); line-height: var(--leading-body); color: rgba(255,255,255,0.72); margin-bottom: var(--space-3xl); max-width: 480px; }
.training-btns { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.btn-white { background: var(--white); color: var(--ink); padding: var(--space-sm) 40px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 500; text-decoration: none; display: inline-block; transition: background var(--duration-fast), transform 0.15s; }
.btn-white:hover { background: var(--blush); transform: translateY(-1px); }
.btn-ghost-white { border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.75); padding: 13px 36px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 300; text-decoration: none; display: inline-block; transition: border-color var(--duration-fast), color var(--duration-fast), transform 0.15s; }
.btn-ghost-white:hover { border-color: rgba(255,255,255,0.7); color: var(--white); transform: translateY(-1px); }
/* DIFFERENCE */
.difference { display: grid; grid-template-columns: 1fr 1fr; }
.about-story {
background: var(--white);
}
.about-story .diff-content {
background: var(--white);
}
.diff-image { position: relative; overflow: hidden; min-height: 640px; }
.diff-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.8s ease; }
.diff-image:hover img { transform: scale(1.03); }
/* Before/After Slider */
.ba-slider { position: relative; overflow: hidden; width: 100%; height: 100%; cursor: col-resize; user-select: none; -webkit-user-select: none; touch-action: none; }
.ba-slider:hover .ba-img-after { transform: none; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: none; transform: none !important; }
.ba-img-before { clip-path: inset(0 50% 0 0); }
.ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,0.85); transform: translateX(-50%); pointer-events: none; transition: left 0s; }
.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; cursor: col-resize; pointer-events: none; padding: 0; }
.ba-label { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: white; background: rgba(0,0,0,0.32); padding: 4px 10px; border-radius: 2px; pointer-events: none; }
.ba-label-before { left: 12px; }
.ba-label-after { right: 12px; }
.diff-content {
padding: var(--pad-content-y) var(--pad-content-x);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--blush-vlt);
}
.diff-body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-muted); max-width: 440px; }
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-block-sm); margin-top: var(--space-3xl); }
.diff-item {
background-color: rgba(255, 255, 255, 0.5);
padding: 20px !important;
border-radius: 4px;
transition: transform 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
box-shadow: 0 0 0 rgba(26, 21, 18, 0);
}
.diff-item:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(26, 21, 18, 0.08);
background-color: rgba(255, 255, 255, 0.82);
}
@media (prefers-reduced-motion: reduce) {
.diff-item { transition: box-shadow 0.35s ease, background-color 0.35s ease; }
.diff-item:hover { transform: none; }
}
.diff-bar { width: 28px; height: 1px; background: var(--blush-deep); margin: 14px 0; }
.diff-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); margin: 0; line-height: var(--leading-tight); }
/* About page — core values grid (Quality, Value, Confidence, Longevity) */
.about-core-values .diff-title { font-size: 35px; }
.about-core-values .diff-item svg {
color: var(--pink);
}
/* About page — certainty diagram + philosophy (image left, copy right) */
.about-certainty {
padding: var(--space-section-y) var(--pad-content-x);
}
.about-certainty-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 72px);
align-items: center;
max-width: 1120px;
margin: 0 auto;
}
.about-certainty-visual {
position: relative;
}
.about-certainty-img {
width: 100%;
height: auto;
display: block;
vertical-align: top;
}
.about-certainty-copy .diff-body {
max-width: none;
margin: 0 0 var(--space-md);
}
.about-certainty-copy .diff-body:last-child {
margin-bottom: 0;
}
.about-certainty-copy .section-title {
margin-bottom: var(--space-lg);
}
@media (max-width: 960px) {
.about-certainty {
padding: var(--space-section-y-mobile) var(--pad-page-x-mobile);
}
.about-certainty-inner {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.about-certainty-visual {
max-width: 420px;
margin: 0 auto;
}
}
/* Lash extensions — What to expect (process steps only) */
.lash-process-expect .diff-title { font-size: 26px; }
.diff-desc { font-size: var(--text-body); line-height: var(--leading-prose); color: var(--ink-muted); margin: 0; }
body.page-reviews .diff-desc { font-size: 15px; }
/* Refills page — aftercare (same salon interior asset as home hero) */
.refills-aftercare {
position: relative;
overflow: hidden;
background: var(--charcoal);
}
.refills-aftercare::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: url('../images/lynn-beauty-care-salon-interior-hero-background.webp');
background-size: cover;
background-position: center 20%;
}
.refills-aftercare::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: rgba(44, 42, 40, 0.55);
}
.refills-aftercare .section-wrap {
position: relative;
z-index: 1;
}
.refills-aftercare .section-eyebrow { color: rgba(255, 255, 255, 0.65); }
.refills-aftercare .section-title,
.refills-aftercare .section-title em { color: var(--white); }
.refills-aftercare .section-lead { color: rgba(255, 255, 255, 0.78); }
.refills-aftercare .diff-title { color: var(--white); }
.refills-aftercare .diff-desc { color: rgba(255, 255, 255, 0.78); }
.refills-aftercare .diff-bar { background: var(--blush-mid); }
.refills-aftercare .diff-item {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 rgba(26, 21, 18, 0);
}
.refills-aftercare .diff-item:hover {
background-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}
/* Refills service page — “Refill rules” + “Aftercare reminder” cards (not inside .difference, so the global portrait diff-grid rule does not apply) */
@media (max-width: 960px) {
body.page-service-single section[aria-labelledby="refill-rules-heading"] .diff-grid,
body.page-template-page-service-single-php section[aria-labelledby="refill-rules-heading"] .diff-grid,
body.page-service-single .refills-aftercare .diff-grid,
body.page-template-page-service-single-php .refills-aftercare .diff-grid {
grid-template-columns: 1fr !important;
}
}
/* REVIEWS */
.reviews { background: var(--ink); padding: var(--space-section-y) var(--pad-content-x); }
.reviews .section-eyebrow { color: var(--blush-vlt); }
.reviews-intro { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-block-lg); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
/* Reviews page only: masonry (CSS columns) */
body.page-reviews .reviews-grid {
display: block;
column-count: 3;
column-gap: 20px;
}
body.page-reviews .review-card {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 20px;
display: inline-block;
width: 100%;
vertical-align: top;
box-sizing: border-box;
}
.review-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); padding: 36px 32px; position: relative; transition: transform var(--duration-base) var(--ease-service), opacity var(--duration-base) var(--ease-service); }
.review-stars {
font-size: 13px;
color: var(--pink);
letter-spacing: 2px;
margin-bottom: 20px;
}
.review-quote { font-family: var(--font-display); font-size: var(--text-lead); font-weight: 300; font-style: italic; color: rgba(255,255,255,0.82); line-height: var(--leading-snug); margin-bottom: var(--space-lg); }
.review-author { font-size: var(--text-xs); letter-spacing: var(--tracking-author); text-transform: uppercase; color: var(--ink-muted); }
@media (min-width: 961px) {
.reviews-grid:has(.review-card:hover) .review-card:not(:hover) {
opacity: 0.7;
}
.reviews-grid:has(.review-card:hover) .review-card:hover {
opacity: 1;
transform: scale(1.024);
z-index: 1;
}
}
@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
.reviews .review-card { transition: opacity var(--duration-base); }
.reviews-grid:has(.review-card:hover) .review-card:hover { transform: none; }
}
/* Masonry (CSS columns): sibling opacity dim + column fragmentation fight hover/stacking — keep scale only */
@media (min-width: 961px) {
body.page-reviews .reviews-grid:has(.review-card:hover) .review-card:not(:hover) {
opacity: 1;
}
body.page-reviews .reviews-grid {
overflow: visible;
}
body.page-reviews .reviews-grid:has(.review-card:hover) .review-card:hover {
z-index: 2;
}
}
/* OFFER */
.offer { background: var(--blush-mid); padding: var(--space-section-y) var(--pad-content-x); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.offer-body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-muted); max-width: 400px; margin: var(--space-md) 0 var(--space-block-sm); }
.offer-conditions { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--ink-muted); text-transform: uppercase; line-height: 2; margin-top: 12px; }
.offer-card {
background: var(--white);
padding: 0px;
text-align: center;
box-shadow: var(--shadow-card);
overflow: hidden;
border-radius: 0 300px 300px 0;
}
.offer-card img { width: 100%; height: auto; display: block; vertical-align: top; }
/* STUDIO */
.studio { display: grid; grid-template-columns: 1.1fr 0.9fr; }
.studio-image { position: relative; overflow: hidden; min-height: 520px; }
.studio-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.studio-image:hover img { transform: scale(1.03); }
.studio-content {
padding: var(--pad-content-y) var(--pad-studio-x);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--blush-vlt);
}
.studio-quote { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: var(--leading-tight); color: var(--ink); margin-bottom: 20px; }
.studio-quote em { font-style: italic; }
.studio-body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-muted); margin-bottom: var(--space-2xl); }
.studio-details { display: flex; flex-direction: column; gap: 22px; }
.studio-detail { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.studio-detail-label {
font-size: var(--text-label);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--blush-deep);
margin-bottom: 0;
display: block;
}
.studio-detail-value { font-size: var(--text-body); color: var(--ink-soft); line-height: var(--leading-snug); }
.studio-map-link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-soft); text-decoration: none; margin-top: 28px; border-bottom: 1px solid var(--blush-deep); padding-bottom: 3px; width: fit-content; transition: opacity var(--duration-fast); }
.studio-map-link:hover { opacity: 0.6; }
/* INSTAGRAM */
.instagram { background: var(--white); padding: var(--space-section-y-md) var(--pad-content-x); text-align: center; }
.instagram-handle { font-size: var(--text-caption); letter-spacing: var(--tracking-mid); color: var(--ink-muted); margin-bottom: var(--space-xs); text-transform: uppercase; }
.instagram-handle a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--blush-mid); padding-bottom: 2px; transition: color var(--duration-fast), border-color var(--duration-fast); }
.instagram-handle a:hover { color: var(--ink-soft); border-color: var(--blush-deep); }
.instagram-handle a:focus-visible { outline: 2px solid var(--blush-deep); outline-offset: 4px; border-radius: 2px; }
.instagram-sub { font-size: var(--text-body); color: var(--ink-muted); margin-bottom: var(--space-block-md); }
.instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 36px; }
.insta-cell { aspect-ratio: 1; overflow: hidden; }
.insta-cell img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; }
.insta-cell:hover img { transform: scale(1.06); }
.btn-ink { background: var(--ink); color: var(--white); padding: var(--space-sm) 40px; border-radius: var(--radius-pill); font-size: var(--text-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; font-weight: 400; text-decoration: none; display: inline-block; transition: background var(--duration-fast), transform 0.15s; }
.btn-ink:hover { background: var(--ink-soft); transform: translateY(-1px); }
/* Home — chat widget mockup (visual only; index.html) */
body.page-home .chat-widget-mockup {
position: fixed;
right: clamp(18px, 4vw, 28px);
bottom: clamp(18px, 4vw, 28px);
z-index: 50;
line-height: 0;
cursor: default;
transition: transform 0.4s var(--ease-service), filter 0.4s ease;
filter: drop-shadow(0 10px 28px rgba(26, 21, 18, 0.14));
}
body.page-home .chat-widget-mockup:hover {
transform: translateY(-5px);
filter: drop-shadow(0 14px 32px rgba(26, 21, 18, 0.2));
}
body.page-home .chat-widget-mockup img {
display: block;
width: min(370px, calc(100vw - 36px));
height: auto;
max-width: 180px;
}
/* FINAL CTA */
.final-cta { background: var(--blush); padding: var(--space-section-y-tall) var(--pad-content-x); text-align: center; }
.final-cta .section-title { font-size: clamp(40px, 5.5vw, 68px); max-width: 560px; margin: 0 auto var(--space-md); }
.final-cta-body { font-size: var(--text-body); color: var(--ink-muted); margin: 0 auto var(--space-3xl); max-width: 340px; line-height: var(--leading-relaxed); }
.final-btns { display: flex; gap: var(--space-sm); justify-content: center; align-items: center; flex-wrap: wrap; }
/* BLOG */
/* section.blog only — body.blog on the /blog/ index also has class "blog", so a bare
.blog selector incorrectly applied this padding to the entire page. */
section.blog { background: var(--white); padding: 100px 25px; border-top: var(--border-blush); }
.blog-inner { max-width: 1200px; margin: 0px auto; }
.blog-header { text-align: center; margin-bottom: clamp(48px, 8vw, 80px); }
.blog-heading-title { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 44px); font-weight: 300; line-height: var(--leading-section); color: var(--ink); font-style: normal; margin-bottom: var(--space-lg); }
.blog-heading-title em { font-style: italic; }
.blog-all-link {
font-size: var(--text-caption);
font-weight: 400;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--ink-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.blog-all-link:hover { color: var(--ink-soft); border-color: var(--blush-mid); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 6vw, 64px); align-items: start; }
.blog-card { margin: 0; }
.blog--has-carousel .blog-carousel {
position: relative;
overflow: hidden;
}
.blog--has-carousel .blog-grid {
--blog-gap: clamp(40px, 6vw, 64px);
display: flex;
gap: var(--blog-gap);
align-items: stretch;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.blog--has-carousel .blog-card {
flex: 0 0 calc((100% - (var(--blog-gap) * 2)) / 3);
}
.blog-carousel[data-blog-carousel-mode="single"] .blog-card {
flex: 0 0 100%;
max-width: 100%;
}
.blog-dots {
margin-top: clamp(22px, 3vw, 34px);
display: flex;
justify-content: center;
gap: 8px;
}
.blog-dot {
width: 8px;
height: 8px;
border-radius: 999px;
border: 0;
padding: 0;
background: rgba(26, 21, 18, 0.2);
cursor: pointer;
transition: width var(--duration-fast), background var(--duration-fast), opacity var(--duration-fast);
}
.blog-dot:hover {
background: rgba(26, 21, 18, 0.35);
}
.blog-dot.is-active {
width: 22px;
background: var(--ink);
}
.blog-card-hit {
display: block;
text-decoration: none;
color: inherit;
}
.blog-card-hit:focus-visible { outline: 2px solid var(--blush-deep); outline-offset: 6px; }
.blog-card-media {
margin: 0 0 var(--space-xl);
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--blush);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.85s ease; }
.blog-card-hit:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body { padding: 0 4px; }
.blog-card-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.35vw, 1.25rem);
font-weight: 400;
line-height: 1.38;
color: var(--ink);
margin-bottom: var(--space-md);
}
.blog-card-excerpt {
font-size: 15px;
font-weight: 300;
line-height: 1.65;
color: var(--ink-muted);
margin-bottom: var(--space-xl);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
body.page-home .chat-widget-mockup { transition: none; }
body.page-home .chat-widget-mockup:hover { transform: none; }
.blog-card-media img { transition: none; }
.blog-card-hit:hover .blog-card-media img { transform: none; }
.services-pricing-modal__backdrop,
.services-pricing-modal__dialog { transition: none; }
.services-pricing-modal--open .services-pricing-modal__dialog { transform: none; }
.reveal { transition: none; opacity: 1; transform: none; }
}
/* RESPONSIVE */
@media (max-width: 1180px) and (min-width: 961px) {
#nav .nav-links { gap: 14px; }
}
@media (max-width: 960px) {
#nav { padding: 0 var(--pad-page-x-mobile); }
#nav .nav-links { display: none; }
#nav .nav-hamburger { display: flex; }
.hero-content { padding: 0 var(--pad-page-x-mobile) var(--pad-hero-b-mobile); }
body.page-home .hero-headline { font-size: clamp(48px, 7.5vw, 96px); }
body.page-home #offer .section-title { font-size: 40px; }
.hero-proof { gap: 20px; }
.hero-proof .proof-item--hide-on-mobile { display: none; }
.hero-btns { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.hero .hero-btns .btn-secondary {
border: 0;
background: transparent;
padding: 0;
border-radius: 0;
color: rgba(255, 255, 255, 0.75);
font-size: var(--text-caption);
font-weight: 300;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
padding-bottom: 3px;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.hero .hero-btns .btn-secondary:hover,
.hero .hero-btns .btn-secondary:focus-visible {
background: transparent;
transform: none;
color: var(--white);
border-color: var(--white);
}
.trust-bar { padding: var(--space-sm) var(--pad-page-x-mobile); gap: 16px; }
.featured-in { padding: 16px var(--pad-page-x-mobile) 6px; }
.featured-in-logos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 12px;
align-items: center;
justify-items: center;
}
.featured-in-logo {
height: 56px;
width: 100%;
}
.featured-in-logo img {
max-width: 100%;
max-height: 100%;
}
.services, .instagram, section.blog { padding: var(--space-section-y-mobile) var(--pad-page-x-mobile); }
.services-grid { grid-template-columns: 1fr 1fr; }
.services-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.difference, .studio { grid-template-columns: 1fr; }
.diff-image, .studio-image { min-height: 300px; }
.diff-content, .studio-content { padding: var(--pad-tight-y) var(--pad-page-x-mobile); }
.reviews { padding: var(--space-section-y-mobile) var(--pad-page-x-mobile); }
.reviews-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
.reviews-grid { grid-template-columns: 1fr; gap: 16px; }
body.page-reviews .reviews-grid {
column-count: 1;
column-gap: 16px;
}
body.page-reviews .review-card { margin-bottom: 16px; }
.offer { grid-template-columns: 1fr; padding: var(--space-section-y-mobile) var(--pad-page-x-mobile); gap: 40px; }
.training-content { padding: var(--pad-compact-y) var(--pad-page-x-mobile); max-width: 100%; }
.instagram-grid { grid-template-columns: repeat(3, 1fr); }
.final-cta { padding: var(--pad-compact-y) var(--pad-page-x-mobile); }
.blog-grid { grid-template-columns: 1fr; gap: clamp(48px, 10vw, 72px); }
.blog--has-carousel .blog-grid {
--blog-gap: clamp(24px, 6vw, 36px);
}
.blog--has-carousel .blog-card {
flex-basis: 100%;
}
.final-btns { flex-direction: column; }
}
@media (min-width: 600px) and (max-width: 960px) {
body.page-reviews .reviews-grid {
column-count: 2;
column-gap: 20px;
}
body.page-reviews .review-card {
margin-bottom: 20px;
}
}
/* Lynn Difference + About core values + single-service process cards:
stack only on portrait mobile. Keep 2-col in landscape and larger.
The service-page selector targets every "How it works" / "What to
expect" grid on page-service-single.php (all variants) — they all
share aria-labelledby="process-heading". Not scoped to a body class
because WP's template class is `page-template-page-service-single`. */
@media (max-width: 960px) and (orientation: portrait) {
.difference .diff-grid,
.about-core-values .diff-grid,
section[aria-labelledby="process-heading"] .diff-grid {
grid-template-columns: 1fr !important;
}
/* Centre the pink divider between value title and description on mobile
to match the centred icon, title and copy inside each value card. */
.about-core-values .diff-bar {
margin-left: auto;
margin-right: auto;
}
/* Minimal gap between stacked process cards so they read as one
clean vertical stack rather than four disconnected tiles. */
section[aria-labelledby="process-heading"] .diff-grid {
gap: 12px !important;
}
}
/* Hero headline: compact size on portrait mobile to reduce crowding. */
@media (max-width: 960px) and (orientation: portrait) {
body .hero .hero-headline { font-size: 46px; }
}
/* Home page — portrait mobile only:
- Force the header into its "filled" state (like about / services)
so nav, logo, and hamburger are always visible against the hero.
- Hide the hero proof row (trust signals beneath the CTA).
- Hide the trailing "Lash & Brow Courses" item in the trust bar. */
@media (max-width: 960px) and (orientation: portrait) {
body.home #nav {
background: rgba(253, 252, 251, 0.97) !important;
backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(26, 21, 18, 0.08) !important;
--nav-brand-color: var(--charcoal);
--nav-link-color: var(--ink-soft);
--nav-logo-filter: brightness(0);
--nav-hamburger-bg: var(--ink);
--nav-cta-bg: #de276c;
--nav-cta-border: #de276c;
--nav-cta-color: var(--white);
}
body.home .hero-proof { display: none; }
body.home .trust-bar > .trust-item:last-child,
body.home .trust-bar > .trust-sep:last-of-type {
display: none;
}
body.home #offer .section-title { font-size: 42px; }
}
/* -------------------------------------------------------------
Mobile hardening pass — stacked inline layouts / tap targets
------------------------------------------------------------- */
@media (max-width: 768px) {
/* Several templates still use inline two-column grid declarations. */
body.page-service-single main div[style*="grid-template-columns:repeat(2,1fr)"],
body.page-service-single main div[style*="grid-template-columns:repeat(2, 1fr)"],
body.page-service-single main div[style*="grid-template-columns:1fr 1fr"],
body.page-template-page-service-single-php main div[style*="grid-template-columns:repeat(2,1fr)"],
body.page-template-page-service-single-php main div[style*="grid-template-columns:repeat(2, 1fr)"],
body.page-template-page-service-single-php main div[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Full-width, touch-friendly button rows on mobile. */
body.page-service-single main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"],
body.page-template-page-service-single-php main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"],
body.page-reviews main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"],
body.page-faq main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"],
body.page-about main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"],
body.page-services main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"],
body.page-contact main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] {
flex-direction: column;
align-items: stretch !important;
gap: 12px !important;
}
body.page-service-single main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
body.page-template-page-service-single-php main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
body.page-reviews main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
body.page-faq main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
body.page-about main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
body.page-services main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a,
body.page-contact main div[style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a {
width: 100%;
text-align: center;
box-sizing: border-box;
}
/* Keep rating rows readable on very small screens. */
body.page-reviews main [role="group"][aria-label*="star rating"] {
gap: 10px !important;
}
body.page-reviews main [role="group"][aria-label*="star rating"] > span[aria-hidden="true"] {
min-width: 52px !important;
font-size: 10px !important;
letter-spacing: 1px !important;
}
body.page-reviews main [role="group"][aria-label*="star rating"] > span:last-child {
min-width: 32px !important;
}
/* Footer columns should not crowd on narrow handsets. */
.site-footer .footer-top {
grid-template-columns: 1fr !important;
}
.site-footer .footer-legal {
gap: 12px;
flex-wrap: wrap;
}
}
/* --- 4. Site footer (all pages) --- */
/* Explicit weight + family so footer ignores any future body-level font overrides. */
.site-footer {
background: var(--ink);
color: rgba(255, 255, 255, 0.45);
padding: 64px var(--pad-content-x) 44px;
font-family: var(--font-body);
font-weight: 300;
}
.site-footer .footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--space-3xl);
padding-bottom: var(--space-block-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: var(--space-block-sm);
}
.site-footer .footer-logo-img {
height: 44px;
width: 44px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.65;
margin-bottom: 18px;
display: block;
}
.site-footer .footer-tagline {
font-family: var(--font-display);
font-size: var(--text-body);
color: rgba(255, 255, 255, 0.5);
line-height: 1.6;
font-style: italic;
margin-bottom: var(--space-sm);
}
.site-footer .footer-address {
font-size: var(--text-body);
line-height: 1.9;
color: rgba(255, 255, 255, 0.38);
margin-bottom: 0;
}
.site-footer .footer-maps-link {
display: inline-block;
margin-top: var(--space-md);
font-size: var(--text-caption);
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: 2px;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.site-footer .footer-maps-link:hover {
color: rgba(255, 255, 255, 0.72);
border-color: rgba(255, 255, 255, 0.28);
}
.site-footer .footer-social {
display: flex;
align-items: center;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
.site-footer .footer-social-link {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.38);
transition: color var(--duration-fast);
}
.site-footer .footer-social-link:hover {
color: rgba(255, 255, 255, 0.78);
}
.site-footer .footer-social-link svg {
width: 22px;
height: 22px;
display: block;
}
.site-footer .footer-col-title {
font-size: var(--text-2xs);
letter-spacing: var(--tracking-footer-col);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.28);
margin-bottom: var(--space-md);
}
.site-footer .footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
.site-footer .footer-links a {
text-decoration: none;
color: rgba(255, 255, 255, 0.45);
font-size: var(--text-body);
transition: color var(--duration-fast);
}
.site-footer .footer-links a:hover {
color: rgba(255, 255, 255, 0.85);
}
.site-footer .footer-hours-status {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--text-caption);
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.52);
margin-bottom: var(--space-lg);
line-height: 1.5;
max-width: 280px;
}
.site-footer .footer-hours-status.is-open {
color: rgba(255, 255, 255, 0.7);
}
.site-footer .footer-hours-status-icon {
flex-shrink: 0;
margin-top: 0.12em;
color: rgba(255, 255, 255, 0.38);
transition: color var(--duration-fast);
}
.site-footer .footer-hours-status-icon svg {
width: 17px;
height: 17px;
display: block;
margin-top: -2px;
}
.site-footer .footer-hours-status.is-open .footer-hours-status-icon {
color: rgba(255, 255, 255, 0.52);
}
.site-footer .footer-hours {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer .footer-hours-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
line-height: 1.5;
transition: color var(--duration-fast), border-color var(--duration-fast), padding var(--duration-fast);
border-left: 2px solid transparent;
padding-left: 0;
margin-left: 0;
}
.site-footer .footer-hours-day {
flex-shrink: 0;
min-width: 5.5rem;
}
.site-footer .footer-hours-time {
text-align: right;
opacity: 0.95;
}
.site-footer .footer-hours-row.is-today {
color: rgba(255, 255, 255, 0.92);
border-left-color: var(--blush-deep, var(--blush-dk));
padding-left: 12px;
margin-left: -2px;
}
.site-footer .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
letter-spacing: var(--tracking-tight);
flex-wrap: wrap;
gap: 12px;
}
.site-footer .footer-bottom a {
color: rgba(255, 255, 255, 0.3);
text-decoration: none;
transition: color var(--duration-fast);
}
.site-footer .footer-bottom a:hover {
color: rgba(255, 255, 255, 0.6);
}
.site-footer .footer-legal {
display: flex;
gap: 20px;
}
@media (max-width: 960px) {
.site-footer .footer-top {
grid-template-columns: 1fr 1fr;
gap: var(--space-block-sm);
}
.site-footer {
padding: var(--pad-footer-y) var(--pad-page-x-mobile) 32px;
}
}
/* --- 5. Inner pages: services hub (unique components only) --- */
/* Filled-header pages: the nav is position:fixed, so body content
starts underneath it. Push the whole page down by the nav height
so every first-hero (page-hero, post-featured-image, archive
masthead, gc-hero, etc.) sits cleanly below the nav without each
template needing its own offset rule. */
body.page-services,
body.page-service-single,
body.page-template-page-service-single-php,
body.single-post,
body.archive,
body.search,
body.error404,
body.page-template-page-gift-card-landing-php {
padding-top: var(--nav-height);
}
/* Content link reset. Exclude pricing header + button / UI links: (0,2,3) on main a was overriding .btn-* and .text-link (0,1,0). */
body.page-services main a:not(.services-pricing-category__link):not([class*='btn-']):not(.text-link):not(.link-read-more):not(.blog-all-link):not(.blog-card-hit),
body.page-service-single main a:not(.services-pricing-category__link):not([class*='btn-']):not(.text-link):not(.link-read-more):not(.blog-all-link):not(.blog-card-hit),
body.page-template-page-service-single-php main a:not(.services-pricing-category__link):not([class*='btn-']):not(.text-link):not(.link-read-more):not(.blog-all-link):not(.blog-card-hit) {
color: inherit;
text-decoration: none;
}
/* ============================================================
Grid helpers
============================================================ */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }
/* ============================================================
Page Hero — Short
============================================================ */
.page-hero {
background: var(--white);
border-bottom: 1px solid var(--rule);
}
.page-hero--has-bg {
background: var(--charcoal);
border-bottom: none;
position: relative;
overflow: hidden;
}
.page-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.page-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}
.page-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: rgba(44, 42, 40, 0.55);
}
.page-hero--short {
padding-top: calc(var(--section-pad-y) * 0.6);
padding-bottom: calc(var(--section-pad-y) * 0.6);
}
.page-hero--has-bg .section-wrap {
position: relative;
z-index: 1;
text-align: center;
}
.page-hero--has-bg h1,
.page-hero--has-bg .section-title,
.page-hero--has-bg p,
.page-hero--has-bg .section-lead { color: var(--white); }
.page-hero--short .section-title,
.page-hero--short h1 {
font-family: var(--font-display);
font-size: clamp(42px, 5.5vw, 72px);
font-weight: 300;
line-height: 1.15;
letter-spacing: 0.01em;
margin-bottom: var(--space-md);
}
/* ============================================================
Services Hub Cards
============================================================ */
.services-hub { background: var(--white); }
/* Full card is an (injected from services-menu.json) */
a.services-hub-card {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.services-hub-card:focus-visible {
outline: 2px solid var(--blush-deep);
outline-offset: 3px;
}
.grid-4 > .services-hub-card {
height: 100%;
min-height: 0;
}
.services-hub-card {
background: var(--cream2);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.services-hub-card:hover {
box-shadow: 0 4px 16px rgba(44, 42, 40, 0.07);
transform: translateY(-2px);
}
.services-hub-card__image {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--cream);
}
.services-hub-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.services-hub-card:hover .services-hub-card__image img { transform: scale(1.04); }
.services-hub-card__image-placeholder {
width: 100%;
height: 100%;
min-height: 180px;
background: var(--cream);
}
.services-hub-card__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.services-hub-card__title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--charcoal);
line-height: 1.3;
margin: 0;
}
.services-hub-card__desc {
font-size: 14px;
color: var(--mid);
line-height: 1.7;
margin: 0;
flex: 1;
}
.services-hub-card__link,
.services-hub-card__cta {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: var(--blush-dk);
text-decoration: none;
margin-top: 8px;
letter-spacing: 0.02em;
transition: color 0.2s ease;
}
.services-hub-card:hover .services-hub-card__cta,
.services-hub-card__link:hover { color: var(--charcoal); }
/* ============================================================
Services Pricing
============================================================ */
.services-pricing { background: var(--cream); }
.services-pricing__cta { text-align: center; margin-top: 2.5rem; }
.services-pricing-categories { max-width: 840px; margin: 0 auto; }
.services-pricing-error {
text-align: center;
color: var(--mid);
padding: 2rem 1rem;
font-size: 15px;
}
.services-pricing-category { margin-bottom: 2.5rem; }
.services-pricing-category__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--blush);
padding-bottom: 0.5rem;
margin-bottom: 0;
}
.services-pricing-category__title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--charcoal);
margin: 0;
letter-spacing: 0.02em;
}
.services-pricing-category__link {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blush-dk);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.2s ease;
}
.services-pricing-category__link:hover { color: var(--charcoal); }
/* Services overview — Full pricing: stack category title and link on mobile */
@media (max-width: 960px) {
.services-pricing-category__header {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.4rem;
}
.services-pricing-category__title {
width: 100%;
text-align: left;
line-height: 1.15;
}
.services-pricing-category__link {
display: block;
width: 100%;
text-align: right;
white-space: normal;
flex-shrink: 1;
}
}
.services-pricing-category table {
width: 100%;
border-collapse: collapse;
}
.services-pricing-category table td {
padding: 9px 10px;
font-size: 14px;
color: var(--mid);
border-bottom: 1px solid var(--rule);
line-height: 1.5;
transition: background 0.15s ease;
}
.services-pricing-category table tr:hover td { background: rgba(0,0,0,0.03); }
.services-pricing-category table td:first-child { width: 100%; }
.services-pricing-category table td:nth-child(2) {
text-align: right;
color: var(--charcoal);
font-weight: 500;
white-space: nowrap;
}
.services-pricing-category table td:nth-child(3) {
text-align: right;
color: var(--light);
font-size: 12px;
white-space: nowrap;
min-width: 56px;
}
.services-pricing-row--interactive { cursor: pointer; }
.services-pricing-row--interactive:focus { outline: 2px solid var(--blush-dk); outline-offset: 2px; }
.services-pricing-row--interactive:focus:not(:focus-visible) { outline: none; }
.services-pricing-row--interactive:hover td { background: rgba(0,0,0,0.05); }
/* Refills page — pricing table (refills.html) */
.refill-pricing-table tbody tr {
transition: background-color 0.22s ease;
}
.refill-pricing-table tbody tr:hover {
background-color: rgba(26, 21, 18, 0.04);
}
@media (prefers-reduced-motion: reduce) {
.refill-pricing-table tbody tr { transition: none; }
}
.services-pricing-refill-note {
font-size: 12px;
color: var(--light);
font-style: italic;
text-align: center;
margin: -0.5rem auto 2.5rem;
max-width: 840px;
}
/* Pricing description modal */
.services-pricing-modal {
position: fixed;
inset: 0;
z-index: 10050;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
box-sizing: border-box;
}
.services-pricing-modal[hidden] { display: none !important; }
.services-pricing-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(26, 21, 18, 0.45);
opacity: 0;
transition: opacity 0.28s ease;
}
.services-pricing-modal--open .services-pricing-modal__backdrop { opacity: 1; }
.services-pricing-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
max-height: min(78vh, 680px);
display: flex;
flex-direction: column;
margin: 0;
padding: 2.25rem 2.25rem 1.85rem;
background: linear-gradient(180deg, #fffdfb 0%, var(--white) 48px);
border: 1px solid rgba(237, 217, 207, 0.65);
border-radius: 14px;
box-shadow: 0 28px 72px rgba(26, 21, 18, 0.2);
opacity: 0;
transform: translateY(12px) scale(0.98);
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.services-pricing-modal--open .services-pricing-modal__dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
.services-pricing-modal__close {
position: absolute;
top: 12px; right: 12px;
width: 40px; height: 40px;
border: none;
background: transparent;
color: var(--light);
font-size: 28px;
line-height: 1;
cursor: pointer;
border-radius: 8px;
transition: color 0.2s ease, background 0.2s ease;
}
.services-pricing-modal__close:hover { color: var(--charcoal); background: rgba(0,0,0,0.04); }
.services-pricing-modal__title {
font-family: var(--font-display);
font-size: clamp(22px, 3.5vw, 28px);
font-weight: 400;
color: var(--charcoal);
margin: 0 2.5rem 0.35rem 0;
line-height: 1.25;
letter-spacing: 0.02em;
}
.services-pricing-modal__meta {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blush-deep);
margin: 0 2.5rem 1rem 0;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--blush-lt);
}
.services-pricing-modal__meta[hidden] { display: none !important; }
.services-pricing-modal__body {
overflow-y: auto;
flex: 1;
min-height: 0;
font-size: 15px;
line-height: 1.65;
color: var(--mid);
white-space: pre-line;
padding-right: 4px;
}
/* ============================================================
Gift Vouchers
============================================================ */
.services-gift-vouchers--has-bg {
position: relative;
overflow: hidden;
min-height: clamp(320px, 48vh, 540px);
padding: clamp(4rem, 10vw, 6.5rem) var(--section-pad-x);
background: var(--charcoal);
display: flex;
align-items: center;
}
.services-gift-vouchers__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.services-gift-vouchers__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.services-gift-vouchers__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(155deg, rgba(26,21,18,0.72) 0%, rgba(26,21,18,0.55) 45%, rgba(26,21,18,0.68) 100%);
pointer-events: none;
}
.services-gift-vouchers__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--section-inner-max);
margin: 0 auto;
}
.services-gift-vouchers__panel {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
background: rgba(255,252,248,0.96);
box-shadow: 0 20px 50px rgba(26,21,18,0.2);
backdrop-filter: blur(8px);
}
.services-gift-vouchers__panel .section-title { margin-bottom: 1rem; }
.services-gift-vouchers__lead {
margin-left: auto;
margin-right: auto;
margin-bottom: 1.75rem;
max-width: 36em;
}
.services-gift-vouchers__actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
/* ============================================================
FAQ Accordion
============================================================ */
.services-faq { background: var(--white); }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
width: 100%;
background: none;
border: none;
cursor: pointer;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
text-align: left;
font-family: var(--sans);
font-size: 16px;
font-weight: 400;
color: var(--charcoal);
line-height: 1.5;
}
.faq-q:hover { color: var(--blush-dk); }
.faq-chevron {
flex-shrink: 0;
font-size: 16px;
color: var(--blush-dk);
display: inline-block;
transition: transform 0.3s ease;
}
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 0 20px; }
.faq-a[hidden] { display: none; }
.faq-a div { font-size: 15px; color: var(--mid); line-height: 1.75; }
.services-faq__more { text-align: center; margin-top: 2rem; }
/* ============================================================
CTA Banner
============================================================ */
.cta-banner {
padding: var(--section-pad-y) var(--section-pad-x);
}
.cta-banner .section-wrap { text-align: center; }
.cta-banner .btn-primary {
background: var(--charcoal);
color: var(--white);
border-color: var(--charcoal);
}
.cta-banner .btn-primary:hover { background: var(--charcoal-deep); color: var(--white); }
.cta-banner .btn-secondary {
border-color: var(--charcoal);
color: var(--charcoal);
}
.cta-banner .btn-secondary:hover { background: rgba(0,0,0,0.06); color: var(--charcoal); }
@media (max-width: 640px) {
.services-gift-vouchers__panel { padding: 1.5rem 1.25rem; }
}
/* =============================================================
WordPress-specific additions — appended to base HTML styles
============================================================= */
/* WordPress admin bar compensation */
.admin-bar #nav,
.admin-bar .site-header { top: 32px; }
.admin-bar .lynn-nav-panel {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar #nav,
.admin-bar .site-header { top: 46px; }
.admin-bar .lynn-nav-panel {
top: 46px;
}
}
/* Blog card — 16:9 aspect ratio (board specification) */
.blog-card-media { aspect-ratio: 16 / 9; }
/* -------------------------------------------------------------
Blog single — layout, spacing, tags, featured image
------------------------------------------------------------- */
/* Tighten heading line-height across single article pages — the default
display line-height can feel airy on long titles and in-body subheads. */
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6,
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 {
line-height: 1.3;
}
/* Featured image: full-bleed. Desktop keeps an editorial crop;
mobile shows the image at its natural aspect so subjects aren't cut off. */
.single-post .post-featured-image {
padding: 0;
background: var(--blush-vlt);
}
/* Per-post override: "Force full image height" checkbox in the editor
(see inc/featured-image-options.php). Applies on all viewport sizes
— the image fills viewport width and keeps its natural height, so
only the sides can ever be cropped, never top or bottom. */
.single-post .post-featured-image--full-height img {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: initial !important;
object-position: center center !important;
}
.single-post .post-featured-image img {
display: block;
width: 100%;
max-width: 100%;
}
/* Reset the blanket "no padding" we had before and scope padding properly
so content doesn't touch screen edges on mobile. */
.single-post .section-wrap { padding: 0; }
.single-post .post-header .section-wrap,
.single-post .post-content-area .section-wrap {
padding: var(--space-section-y) var(--pad-content-x);
max-width: var(--section-inner-max);
margin: 0 auto;
}
/* Tighten the title block: the featured image and content area already
provide breathing room, so the header just needs compact padding and
no bottom padding. We also zero the content-area's top padding so the
meta's own margin-bottom is the only spacer between title and body. */
.single-post .post-header .section-wrap {
padding-top: 3rem;
padding-bottom: 0;
}
.single-post .post-content-area .section-wrap {
padding-top: 0;
}
/* Override the inline 2.5rem bottom margin on .post-meta with a
calmer value that matches the new rhythm. */
.single-post .post-meta {
margin-bottom: 1.75rem !important;
}
.post-content-area .entry-content { margin-bottom: 60px; }
/* Tags: flex-wrap container so long tag names never exceed the viewport. */
.single-post .post-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--rule);
max-width: 100%;
}
.post-tag {
display: inline-flex;
align-items: center;
max-width: 100%;
margin: 0 !important;
padding: 4px 10px !important;
font-size: 8px !important;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
border-radius: var(--radius-pill) !important;
background: var(--blush);
color: var(--ink);
text-decoration: none;
word-break: break-word;
overflow-wrap: anywhere;
transition: background var(--duration-fast), color var(--duration-fast);
}
.post-tag:hover,
.post-tag:focus-visible {
background: var(--blush-deep);
color: var(--white);
}
/* Paragraph rhythm inside blog post bodies: tight top, airy bottom
so paragraphs breathe from the heading/image above without double
spacing, and give a clear beat before the next block. */
.post-body.entry-content p {
margin: 10px 0 30px;
}
/* Post meta row — author avatar + category icon
Both items align on a baseline grid with their leading visual,
so the eye reads "[face] David [tag] Beauty" as two compact units. */
.single-post .post-meta__author,
.single-post .post-meta__category {
display: inline-flex;
align-items: center;
gap: 0.5rem;
line-height: 1;
}
.single-post .post-meta__avatar {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.single-post .post-meta__icon {
display: block;
color: var(--blush);
flex-shrink: 0;
}
.single-post .post-meta__category a {
text-decoration: none;
transition: color var(--duration-fast);
}
.single-post .post-meta__category a:hover,
.single-post .post-meta__category a:focus-visible {
color: var(--blush-deep) !important;
}
/* -------------------------------------------------------------
Blog sidebar — widgets
------------------------------------------------------------- */
/* Widget container: consistent rhythm between stacked widgets, with a
hairline divider below each (except the last) for clean separation. */
.post-sidebar .sidebar-widget {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--rule);
}
.post-sidebar .sidebar-widget:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
/* Widget title: upgraded to h2 for correct hierarchy under the post h1,
styled larger and in the display serif so it reads as a distinct
section heading rather than an item label. */
.post-sidebar .widget-title {
margin: 0 0 1.25rem;
font-family: var(--serif);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
}
/* Subtle dividers between items in list-style widgets (Recent Posts,
Recent Comments, Categories, Archives, Pages, Meta, nav menus, and
any custom list widgets). */
.post-sidebar .sidebar-widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.post-sidebar .sidebar-widget ul li {
padding: 0.75rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
font-size: 0.95rem;
line-height: 1.5;
}
.post-sidebar .sidebar-widget ul li:first-child {
padding-top: 0;
}
.post-sidebar .sidebar-widget ul li:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.post-sidebar .sidebar-widget ul li a {
color: var(--ink);
text-decoration: none;
transition: color var(--duration-fast);
}
.post-sidebar .sidebar-widget ul li a:hover,
.post-sidebar .sidebar-widget ul li a:focus-visible {
color: var(--blush-deep);
}
/* Blog: never show publish dates in the UI (sidebar widgets, classic Recent Posts, blocks). */
.post-sidebar .post-date,
.post-sidebar .rss-date,
.post-sidebar .wp-block-latest-posts__post-date,
.post-sidebar .wp-block-post-date,
.post-sidebar li > time,
.single-post .post-body .wp-block-latest-posts__post-date,
.single-post .post-body .wp-block-post-date,
.single-post .posted-on,
.single-post .entry-date,
.single-post time.entry-date {
display: none !important;
}
/* Nested lists (e.g. hierarchical categories/pages): indent without
picking up the outer divider styling. */
.post-sidebar .sidebar-widget ul ul {
margin-top: 0.5rem;
padding-left: 1rem;
}
.post-sidebar .sidebar-widget ul ul li:first-child {
padding-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}
/* Mobile: generous page padding, stacked layout, uncropped feature image. */
@media (max-width: 960px) {
.single-post .post-header .section-wrap,
.single-post .post-content-area .section-wrap {
padding: var(--space-section-y-mobile) var(--pad-page-x-mobile);
}
.single-post .post-header .section-wrap {
padding-top: 1rem;
padding-bottom: 0;
}
.single-post .post-content-area .section-wrap {
padding-top: 0;
}
.single-post .post-featured-image img {
/* Inline markup sets max-height:500px + object-fit:cover, which can
clip the top/bottom of subjects on narrow screens. Override so the
image always renders at its natural aspect (full height), scaling
to viewport width — any excess is absorbed horizontally, never
vertically. */
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: initial !important;
object-position: center center !important;
}
.single-post .post-layout {
gap: 2rem !important;
}
.single-post .post-sidebar {
padding: 1.5rem !important;
margin-top: 1rem;
}
.single-post .post-meta {
gap: 1rem !important;
margin-bottom: 1.75rem !important;
}
.post-content-area .entry-content { margin-bottom: 2.5rem; }
}
/* -------------------------------------------------------------
Services page — service-item component
(used on individual lash-extensions, lash-lift, brow pages)
------------------------------------------------------------- */
.services-category { overflow: hidden; }
.service-item {
background: var(--cream2);
border-radius: 8px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow 0.25s ease;
}
.service-item:hover {
box-shadow: 0 4px 16px rgba(44,42,40,0.07);
}
.service-item--featured {
border: 1px solid var(--blush);
background: var(--blush-vlt);
}
.service-item__header {
display: flex;
flex-direction: column;
gap: 6px;
}
.service-item__header h3 {
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
color: var(--charcoal);
line-height: 1.3;
margin: 0;
}
.service-item__note {
font-family: var(--sans);
font-size: 12px;
color: var(--mid);
font-weight: 300;
}
.service-item__price-row {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.service-item__price {
font-family: var(--sans);
font-size: 13px;
font-weight: 300;
color: var(--light);
letter-spacing: 0.01em;
}
.service-item__meta {
font-size: 13px;
color: var(--light);
font-weight: 300;
}
.service-item__meta::before {
content: '\00B7';
margin: 0 0.45em;
color: var(--light);
opacity: 0.6;
}
.service-item__desc {
font-size: 14px;
color: var(--mid);
line-height: 1.7;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-item .btn-secondary,
.service-item .btn-primary {
margin-top: auto;
width: 100%;
text-align: center;
}
.service-item--solo {
max-width: 520px;
margin: 0 auto;
}
/* Services editorial break panel */
.services-editorial-break {
width: 100%;
overflow: hidden;
line-height: 0;
}
.services-editorial-break img {
width: 100%;
height: 440px;
object-fit: cover;
display: block;
}
/* Services How It Works — icon-step layout */
.services-how-it-works {
padding: var(--section-pad-y) var(--section-pad-x);
background: var(--white);
}
.how-it-works-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: 3rem;
}
.how-icon-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.how-icon-step__icon-wrap {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
}
.how-icon-step__icon {
width: 48px;
height: 48px;
}
.how-icon-step__badge {
position: absolute;
top: -8px;
left: -8px;
width: 24px;
height: 24px;
background: var(--blush);
border-radius: 50%;
color: var(--white);
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.how-icon-step h3 {
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
color: var(--charcoal);
margin: 0;
}
.how-icon-step p {
font-size: 14px;
color: var(--mid);
line-height: 1.6;
margin: 0;
}
@media (max-width: 640px) {
.how-it-works-grid { grid-template-columns: 1fr; }
.service-item--solo { max-width: 100%; }
}
.service-note {
font-size: 13px;
color: var(--mid);
margin-bottom: 24px;
}
.service-table-wrap {
overflow-x: auto;
}
/* -------------------------------------------------------------
Bug fixes — DON-78 (2026-03-30)
------------------------------------------------------------- */
/* Fix: #difference section eyebrow + heading not centred */
#difference .section-eyebrow,
#difference .section-title,
#difference .section-lead {
text-align: center;
display: block;
}
/* Fix: section.platform-badges and section.contact-split use display:grid
on a section wrapper — override so inner grid-N handles layout. */
section.platform-badges,
section.contact-split {
display: block;
}
/* -------------------------------------------------------------
Training page — course cards, tier badges, career pathway
------------------------------------------------------------- */
.course-card {
background: var(--white);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
.course-card h3 {
font-family: var(--serif);
font-size: 30px;
font-weight: 400;
color: var(--charcoal);
line-height: 1.1;
margin: 10px 0;
}
.course-card__meta {
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
color: var(--blush);
margin: 0;
}
.course-card__who {
font-size: 14px;
color: var(--mid);
margin: 0;
font-style: italic;
}
.course-card p {
font-size: 14px;
color: var(--mid);
line-height: 1.6;
margin: 0;
}
.course-card__includes {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.course-card__includes li {
font-size: 13px;
color: var(--mid);
padding-left: 20px;
position: relative;
line-height: 1.5;
}
.course-card__includes li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--blush);
font-weight: 600;
}
.course-card .btn-primary {
margin-top: auto;
width: 100%;
text-align: center;
}
.course-card__tier-badge {
display: inline-block;
padding: 4px 12px;
background: var(--blush-vlt);
color: var(--blush);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
border-radius: 20px;
letter-spacing: 0.03em;
align-self: flex-start;
}
.course-card__tier-badge--best-value {
background: var(--charcoal);
color: var(--white);
}
.course-card--featured {
background: var(--cream2);
border-color: transparent;
padding: 48px;
}
.course-card--featured h3 {
font-size: 34px;
}
.career-pathway {
background: var(--white);
padding: 48px var(--section-pad-x);
}
.career-pathway__flow {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.career-pathway__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.career-pathway__pill {
display: inline-block;
padding: 8px 20px;
background: var(--white);
border: 1px solid var(--rule);
border-radius: 24px;
font-family: var(--sans);
font-size: 13px;
color: var(--charcoal);
white-space: nowrap;
}
.career-pathway__label {
font-family: var(--sans);
font-size: 11px;
color: var(--light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.career-pathway__arrow {
flex-shrink: 0;
margin-top: -16px;
}
@media (max-width: 768px) {
.career-pathway__flow {
flex-direction: column;
gap: 8px;
}
.career-pathway__arrow {
transform: rotate(90deg);
margin-top: 0;
}
.course-card--featured {
padding: 32px;
}
}
/* About page — portrait image + value cards */
.about-split {
display: grid;
grid-template-columns: 55% 45%;
gap: var(--space-lg);
align-items: start;
}
.about-split__image {
max-width: 420px;
justify-self: end;
}
.about-portrait {
width: 420px;
height: 560px;
max-width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
max-height: 520px;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 8px 32px rgba(44,42,40,0.10);
display: block;
}
.value-card {
background: var(--cream2);
border-radius: 8px;
padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.value-card__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
}
.value-card h3 {
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
color: var(--charcoal);
margin: 0;
}
.value-card p {
font-size: 14px;
color: var(--mid);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.about-split { grid-template-columns: 1fr; }
.about-split__image { justify-self: center; max-width: 320px; }
.about-portrait { width: 100%; height: auto; max-height: 400px; }
}
/* -------------------------------------------------------------
Services Hub — Services subnav (WP-only SEO crawlability strip)
------------------------------------------------------------- */
.services-subnav {
background: var(--cream2);
border-bottom: 1px solid var(--rule);
}
.services-subnav__inner {
max-width: var(--section-inner-max);
margin: 0 auto;
padding: 0 var(--section-pad-x);
}
.services-subnav__list {
display: flex;
flex-wrap: wrap;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.services-subnav__list li a {
display: block;
padding: 13px 18px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.services-subnav__list li a:hover {
color: var(--charcoal);
border-bottom-color: var(--blush);
}
@media (max-width: 1024px) {
.services-subnav__list li a { padding: 12px 14px; }
}
@media (max-width: 640px) {
.services-subnav__list { justify-content: flex-start; }
.services-subnav__list li a { padding: 12px; font-size: 11px; }
}
/* Services Hub — article.services-hub-card (WP PHP-rendered cards use not ) */
article.services-hub-card {
text-decoration: none;
color: inherit;
}
/* Services Hub — board revision fixes (2026-04-03) */
/* Nav — always dark on services hub + single service templates */
body.page-services nav#nav,
body.page-template-page-services-php nav#nav,
body.page-template-page-service-single-php nav#nav {
background: rgba(253,252,251,0.97);
backdrop-filter: blur(8px);
box-shadow: 0 1px 0 rgba(26,21,18,0.08);
}
body.page-services nav#nav .nav-links a,
body.page-template-page-services-php nav#nav .nav-links a,
body.page-template-page-service-single-php nav#nav .nav-links a { color: var(--ink-soft); }
body.page-services nav#nav .nav-logo-img,
body.page-template-page-services-php nav#nav .nav-logo-img,
body.page-template-page-service-single-php nav#nav .nav-logo-img { filter: brightness(0); }
body.page-services nav#nav .nav-brand,
body.page-template-page-services-php nav#nav .nav-brand,
body.page-template-page-service-single-php nav#nav .nav-brand { color: var(--charcoal); }
body.page-services nav#nav .nav-hamburger span,
body.page-template-page-services-php nav#nav .nav-hamburger span,
body.page-template-page-service-single-php nav#nav .nav-hamburger span { background: var(--ink); }
body.page-services nav#nav .nav-cta,
body.page-template-page-services-php nav#nav .nav-cta,
body.page-template-page-service-single-php nav#nav .nav-cta { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--white) !important; }
/* Hero heading on short-hero pages */
.page-hero--short .section-title,
.page-hero--short h1 {
font-family: var(--serif);
font-size: clamp(54px, 7.5vw, 96px);
font-weight: 300;
line-height: 1.15;
letter-spacing: 0.01em;
margin-bottom: var(--space-md);
}
/* Service single (lash / lift / brows / refills) — tighter hero headline when it wraps */
body.page-template-page-service-single-php .page-hero--short .section-title,
body.page-template-page-service-single-php .page-hero--short h1 {
line-height: 1.05;
}
/* Service single — hero CTAs equal width on mobile/tablet narrow viewports */
@media (max-width: 960px) {
body.page-template-page-service-single-php .page-hero__actions {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
body.page-template-page-service-single-php .page-hero__actions > a {
width: 100%;
text-align: center;
box-sizing: border-box;
}
/* Lash lift — comparison table: edge-to-edge within viewport, no horizontal scroll */
body.page-template-page-service-single-php #lash-lift-vs-extensions {
overflow-x: hidden;
}
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-table-outer {
overflow-x: hidden;
max-width: none;
width: calc(100% + 2 * var(--section-pad-x));
margin-left: calc(-1 * var(--section-pad-x));
margin-right: calc(-1 * var(--section-pad-x));
}
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-table {
width: 100% !important;
max-width: 100%;
table-layout: fixed;
font-size: 0.78rem !important;
}
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-table th,
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-table td {
padding: 0.45rem 0.28rem !important;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
vertical-align: middle;
line-height: 1.25;
}
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-table th {
font-size: 0.68rem !important;
letter-spacing: 0.02em !important;
}
/* Lash lift — CTA under table: hide “or”, stack with more space before extensions link */
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-cta__or {
display: none;
}
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
margin-top: 2rem !important;
text-align: center;
}
body.page-template-page-service-single-php #lash-lift-vs-extensions .lash-lift-compare-cta .btn-dark {
margin: 0;
}
}
/* ─────────────────────────────────────────────────────────────
Training page — What's Included grid
───────────────────────────────────────────────────────────── */
.training-included__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-md);
list-style: none;
padding: 0;
margin: 0;
}
.training-included__item {
background: var(--white);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 28px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
.training-included__icon {
display: block;
font-size: 18px;
color: var(--blush);
line-height: 1;
}
.training-included__item strong {
font-family: var(--serif);
font-weight: 400;
font-size: 17px;
color: var(--charcoal);
line-height: 1.3;
}
.training-included__item p {
font-size: 13px;
color: var(--mid);
line-height: 1.65;
margin: 0;
}
@media (max-width: 1024px) {
.training-included__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.training-included__grid { grid-template-columns: 1fr; }
}