/*
* home.html utility classes — Wave 2 of the CSP `style-src 'unsafe-inline'`
* migration (BUG-0012 / BUG-0509). Follows the pattern established in
* public/css/admin-utilities.css.
*
* Kept separate from admin-utilities.css because home.html is the marketing
* landing page with a different visual language (warm cream + gold accents,
* Playfair Display type) than the admin dashboard. Utility classes here are
* scoped to the marketing surface.
*/
/* Batch 1: top-frequency home.html patterns */
.u-gold { color: #c9a95a; } /* 9× */
.u-tab-pill { padding: 10px 14px; font-size: 13px; font-weight: 600; color: #333; border-top: 2px solid #c9a95a; } /* 6× */
.u-split-2-160 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 160px; } /* 6× */
.u-card-rounded-shadow { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.1); background: #fff; } /* 6× */
.u-avatar-circle-lg { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-primary), #c9a95a); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; flex-shrink: 0; } /* 5× */
.u-testimonial-card { min-width: 100%; background: #fff; border-radius: 16px; padding: 40px; border: 1px solid #e4ddd0; box-shadow: 0 2px 16px rgba(0,0,0,.06); } /* 5× */
.u-testimonial-name { font-weight: 700; font-size: 14px; color: #1a0707; font-style: normal; } /* 5× */
.u-testimonial-role { font-size: 12px; color: #737373; margin-top: 2px; } /* 5× */
.u-testimonial-quote { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.8; color: #444; font-style: italic; margin: 0 0 24px; font-weight: 300; } /* 5× */
.u-flex-gap-14 { display: flex; align-items: center; gap: 14px; } /* 5× */
.u-gold-stars { color: #c9a95a; font-size: 20px; margin-bottom: 16px; letter-spacing: 2px; } /* 5× */
.u-text-center { text-align: center; } /* 4× */
.u-text-center-pad { text-align: center; padding: 0 16px; } /* 3× */
.u-flex-col-padded { padding: 18px; flex: 1; display: flex; flex-direction: column; } /* 3× */
.u-container-900 { max-width: 900px; margin: 0 auto; } /* 3× */
/* Batch 2: 3-instance patterns. */
.u-hidden { display: none !important; } /* 3× */
.u-white-14-bold { font-weight: 700; color: #fff; font-size: 14px; } /* 3× */
.u-big-number { font-size: 40px; margin-bottom: 8px; } /* 3× */
.u-meta-13 { font-size: 13px; color: #c8a888; margin-top: 4px; } /* 3× */
.u-body-13 { font-size: 13px; color: #666; line-height: 1.7; flex: 1; margin-bottom: 14px; } /* 3× */
.u-eyebrow-gold { font-size: 11px; color: #c9a95a; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } /* 3× */
.u-playfair-19-white { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 10px; } /* 3× */
.u-playfair-17-red { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; font-weight: 700; color: #1a0707; margin-bottom: 8px; line-height: 1.4; } /* 3× */
.u-inter-14-cream { font-family: 'Inter', sans-serif; font-size: 14px; color: #c8a888; line-height: 1.75; font-weight: 300; } /* 3× */
.u-primary-link-13 { color: var(--brand-primary); font-size: 13px; font-weight: 700; text-decoration: none; } /* 3× */
.u-white { color: #fff; } /* 3× */
.u-gold-bold { color: #c9a95a; font-weight: 700; } /* 3× */
.u-muted-neutral { color: #666; } /* 3× */
.u-red-deep { color: #1a0707; } /* 3× */
.u-card-cream { border-radius: 14px; background: #f9f5f0; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07); display: flex; flex-direction: column; } /* 3× */
.u-gold-gradient { background: linear-gradient(90deg, #c9a95a, #e8c97a); } /* 3× */
.u-bg-white { background: #fff; } /* 3× */
/* Batch 3: booking.html-specific patterns (also used by home.html where
* shared). Adding to home-utilities.css because both files already link it. */
.u-input-lg-2px { width: 100%; border: 2px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 16px; font-family: inherit; } /* booking 3× */
.u-field-label-uc { font-size: 12px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 5px; } /* booking 3× */
.u-icon-42 { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; margin-top: 2px; } /* booking 2×, home 2× */
.u-w-full-mb-12 { width: 100%; margin-bottom: 12px; } /* booking 2× */
.u-mb-10 { margin-bottom: 10px; } /* booking 2× */
.u-cta-sticky-label { font-weight: 700; font-size: 14px; color: #f5f0e8; line-height: 1.2; } /* booking 2×, home 2× */
.u-muted-11 { font-weight: 400; color: #767676; font-size: 11px; } /* booking 2× */
.u-muted-11-mt-4 { font-size: 11px; color: #767676; margin-top: 4px; } /* booking 2× */
.u-flex-1-min-0 { flex: 1; min-width: 0; } /* booking 2×, home 2× */
.u-divider-h { flex: 1; height: 1px; background: var(--border); } /* booking 2× */
.u-cta-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #1a0707; border-top: 2px solid #c9a95a; box-shadow: 0 -4px 24px rgba(0,0,0,.6); } /* booking 2×, home 2× */
.u-flex-between-row { display: flex; justify-content: space-between; align-items: center; } /* booking 2× */
.u-flex-start-gap-12 { display: flex; align-items: flex-start; gap: 12px; } /* booking 2×, home 2× */
.u-link-inherit { color: inherit; text-decoration: none; } /* booking 2× */
.u-text-link-btn { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; min-height: 44px; } /* booking 2× */
/* Contrast-aware nav-logo color (founder rule 2026-05-07).
No !important so per-template inline rules can win when they
intentionally set color (e.g. transparent nav over hero photo).
Variable fills in for pages that don't set nav-logo color. */
.nav-logo,
.nav-logo:link,
.nav-logo:visited,
.nav-logo:hover,
.nav-logo:active { color: var(--brand-text-on-primary, #fff); }
/* #11102 + #11185 — PWA banner kill on /booking.
The three install-prompt banners must NEVER appear on /booking (they
overlap step-4 Confirm form on mobile). The original #11102 fix put
inline `style="display:none !important"` directly on the divs;
#11185 found those inline attrs violate CSP `style-src` (nonces don't
cover style ATTRIBUTES). Moved to a stylesheet rule here — covered
by `style-src 'self'`, no nonce needed.
`!important` keeps the contract: stylesheet `!important` wins over
any later `el.style.display = 'block'` from a stale cached
pwa-install.js. The runtime DOM kill in pwa-install.js
`setProperty('display','none','important')` is the second line of
defense.
Scoped via `body.pm-booking-page` so the same banner IDs CAN still
render on home.html / manage-booking.html / template homes where the
install-prompt is intentional. booking.html sets that body class. */
body.pm-booking-page #pwa-install-banner,
body.pm-booking-page #pwa-ios-banner,
body.pm-booking-page #pwa-android-banner { display: none !important; }
/* #12269/#12271 — per-service photo carousel + zoom lightbox on the booking
page. The shared lightbox (PMGalleryUtils, /js/shared/gallery-utils.js) is
loaded outside the booking bundle; its .pm-gallery-lightbox styling lives in
tenant-template-utilities.css which booking.html does NOT load, so the
lightbox + carousel rules are mirrored here (the one stylesheet booking
already pulls). pinch-zoom is enabled on the lightbox image for mobile. */
.pm-gallery-lightbox[hidden] { display: none !important; }
.pm-gallery-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 1rem;
outline: 0;
}
.pm-gallery-lightbox-inner {
position: relative;
max-width: min(1200px, 95vw);
max-height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.pm-gallery-lightbox-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
display: block;
border-radius: 6px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
touch-action: pinch-zoom; /* #12271 — pinch-zoom on iOS Safari + Android Chrome */
}
.pm-gallery-lightbox-caption {
color: #f1f5f9;
font-size: 0.95rem;
text-align: center;
max-width: 80ch;
margin-top: 0.5rem;
min-height: 1.4em;
}
.pm-gallery-lightbox-close,
.pm-gallery-lightbox-prev,
.pm-gallery-lightbox-next {
position: absolute;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 999px;
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
width: 48px;
height: 48px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.15s ease;
}
.pm-gallery-lightbox-close:hover,
.pm-gallery-lightbox-prev:hover,
.pm-gallery-lightbox-next:hover { background: rgba(0, 0, 0, 0.8); }
.pm-gallery-lightbox-close:focus-visible,
.pm-gallery-lightbox-prev:focus-visible,
.pm-gallery-lightbox-next:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pm-gallery-lightbox-close { top: -56px; right: -8px; }
.pm-gallery-lightbox-prev { top: 50%; left: -56px; transform: translateY(-50%); }
.pm-gallery-lightbox-next { top: 50%; right: -56px; transform: translateY(-50%); }
@media (max-width: 720px) {
.pm-gallery-lightbox-close { top: -48px; right: 0; }
.pm-gallery-lightbox-prev { left: 4px; }
.pm-gallery-lightbox-next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.pm-gallery-lightbox-close,
.pm-gallery-lightbox-prev,
.pm-gallery-lightbox-next { transition: none; }
}
body.pm-gallery-lightbox-open { overflow: hidden; }
/* #11507 — per-stylist portfolio strip on staff cards. The mount stays hidden
(display:none via [hidden]) until PMStaffPortfolioUtils fills it; only the
ON + has-approved-work path reveals it. Thumbs are 44x44-min tap targets
(WCAG 2.5.5) and open the shared lightbox (with #11526 mobile swipe nav). */
.pm-staff-portfolio-mount[hidden] { display: none; }
.pm-staff-portfolio-heading {
font-size: 0.85rem;
font-weight: 600;
margin: 0.75rem 0 0.4rem;
opacity: 0.85;
}
.pm-staff-portfolio-strip {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.pm-staff-portfolio-thumb {
padding: 0;
border: 0;
background: none;
cursor: pointer;
width: 56px;
height: 56px;
min-width: 44px;
min-height: 44px;
border-radius: 8px;
overflow: hidden;
line-height: 0;
}
.pm-staff-portfolio-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pm-staff-portfolio-thumb:focus-visible,
.pm-staff-portfolio-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pm-staff-portfolio-more {
min-width: 44px;
min-height: 44px;
padding: 0 0.6rem;
border: 1px solid currentColor;
background: none;
color: inherit;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
}
/* Per-service carousel on the booking card. */
.svc-thumb-zoomable { cursor: zoom-in; }
.svc-carousel {
position: relative;
display: inline-block;
line-height: 0;
}
.svc-carousel-track { position: relative; }
.svc-carousel-img { cursor: zoom-in; }
.svc-carousel-img[hidden] { display: none; }
.svc-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: 0;
border-radius: 999px;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 0;
}
.svc-carousel-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.svc-carousel-prev { left: 2px; }
.svc-carousel-next { right: 2px; }
.svc-carousel-dots {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
display: flex;
gap: 4px;
justify-content: center;
line-height: 1;
z-index: 2;
}
.svc-carousel-dot {
width: 7px;
height: 7px;
min-width: 7px;
min-height: 7px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
}
.svc-carousel-dot.is-active { background: #fff; }
.svc-carousel-dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }