/* ============================================================ Beauty / salon / spa vertical — Hidook Site Builder. Powder calm, gallery-first, programare always in chrome + hero. Opacity/transform motion only. Local photos only. ============================================================ */ :root { --color-primary: #5f7350; --color-primary-light: #8fa37a; --color-primary-dark: #2a3340; --color-cream: #e8eef2; --ink: #2a3340; --soft: rgba(42, 51, 64, 0.78); /* WCAG AA: at 0.48 this was 2.5-2.7:1 against the light section backgrounds it's used on (paper/snow/blush) — well under the 4.5:1 normal-text floor. 0.74 clears 4.5:1 against all three with margin (kicker labels, footer text, chip/price/schedule meta all use this on light backgrounds only — dark-section kickers use a separate literal rgba(255,255,255,…) already). */ --mute: rgba(42, 51, 64, 0.74); --paper: var(--color-cream, #e8eef2); --void: #1c2228; --snow: #fbfcfd; --cta: var(--color-primary, #6b7f5a); --accent: var(--color-primary, #6b7f5a); --link: #4a5c6a; --blush: #e8ddd6; --font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --max: 980px; --r: 8px; --r-pill: 980px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* WAVE8-03: .pf-mobile-nav (the off-canvas hamburger drawer, below) is position:fixed + inset:0, hidden by transform:translateX(100%) rather than display:none (needed so its slide-in transition can animate). A position:fixed box shifted a full viewport-width to the right is, by spec, taken out of normal flow and shouldn't inflate the document's own scrollable area — but this codebase's 200%-zoom test approximation (document.documentElement.style.zoom, not a real browser zoom) measurably counts it anyway, and it's the last remaining source of horizontal overflow on this template. overflow-x:hidden on is the standard, low-risk fix for exactly this "off-canvas drawer causes horizontal scroll" class of issue — it only clips the X axis (no effect on the normal vertical scroll or the .pf-chrome sticky header, verified against the existing lightbox/mobile-nav/sticky-header oracles). */ html { scroll-behavior: smooth; overflow-x: hidden; } /* overflow-x:hidden must be repeated on body too: html's overflow-x alone governs the VIEWPORT's own scrollbar, but body remains its own box that can still be dragged/scrolled sideways within that viewport if it (not html) is what's actually wider than the viewport content-box — confirmed by testing scrollTo()/wheel after setting only html's rule. */ body.pf-page { font-family: var(--font); background: var(--void); color: var(--snow); font-size: 17px; line-height: 1.5; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Sticky powder-on-dark chrome with programare CTA */ .pf-chrome { position: sticky; top: 0; z-index: 40; background: rgba(28, 34, 40, 0.88); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid rgba(255,255,255,0.06); } .pf-chrome__inner { max-width: 1120px; margin: 0 auto; min-height: 56px; padding: 0.5rem 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; } .pf-chrome__mark, .pf-chrome__logo { font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; /* A long business name or CTA label at very narrow widths (200% zoom on a 390px phone is ~195px) wraps onto its own line instead of forcing the chrome row past the viewport (flex-wrap above), rather than being cut off. */ min-width: 0; } /* Standard logo box shared across all 5 templates (max-height + width:auto + object-fit:contain, no fixed aspect-ratio) — a square upload no longer renders at a different height per template (was 22px here vs up to 460px elsewhere for the identical file). */ .pf-chrome__logo { max-height: 40px; width: auto; object-fit: contain; } /* Standalone nav targets, 44px. These rendered 17px tall — text with no padding — which is under even the 24x24 of WCAG 2.5.8 (Level AA), and a masthead link is not "inline in a sentence", so no exception applies. This is the primary navigation of a paying customer's site. Same floor the CTAs use; see bot/test/waveB-touch-targets.test.js. */ .pf-chrome__nav a { display: inline-flex; align-items: center; min-height: 44px; } .pf-chrome__nav { display: none; gap: 1.35rem; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); } @media (min-width: 720px) { .pf-chrome__nav { display: flex; } } .pf-chrome__nav a:hover { color: #fff; } /* Mobile menu toggle — hidden on desktop, shown as a hamburger below 720px */ .pf-chrome__toggle { display: none; order: 3; flex: 0 0 auto; width: 44px; height: 44px; margin: -11px 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 0; background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pf-chrome__toggle-bar { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 200ms var(--ease-out), opacity 150ms var(--ease-out); } .pf-chrome__toggle[aria-expanded="true"] .pf-chrome__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pf-chrome__toggle[aria-expanded="true"] .pf-chrome__toggle-bar:nth-child(2) { opacity: 0; } .pf-chrome__toggle[aria-expanded="true"] .pf-chrome__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav drawer — a sibling of .pf-chrome in the markup (see template.html comment) so its position:fixed is relative to the viewport, not clipped by an ancestor's backdrop-filter containing block. */ .pf-mobile-nav { display: none; } @media (max-width: 719.98px) { .pf-chrome__mark, .pf-chrome__logo { order: 1; } .pf-chrome__cta { order: 2; } .pf-chrome__toggle { display: inline-flex; } } @media (max-width: 719.98px) { .pf-mobile-nav { display: flex; position: fixed; inset: 0; z-index: 45; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.85rem; padding: 6rem 2rem 3rem; background: rgba(28, 34, 40, 0.98); backdrop-filter: saturate(140%) blur(20px); -webkit-backdrop-filter: saturate(140%) blur(20px); transform: translateX(100%); visibility: hidden; transition: transform 240ms var(--ease-out), visibility 0s linear 240ms; } .pf-mobile-nav.is-open { transform: translateX(0); visibility: visible; transition: transform 240ms var(--ease-out), visibility 0s linear 0s; } .pf-mobile-nav a { font-family: var(--display); font-size: 1.4rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(255,255,255,0.92); } } .pf-chrome__cta { flex: 0 1 auto; max-width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; /* No white-space:nowrap: a long custom CTA label (business-editable) must be able to wrap onto a second line at very narrow widths (200% zoom on a 390px phone is ~195px) instead of forcing the pill past the viewport. */ background: var(--cta); color: #fff; border-radius: var(--r-pill); padding: 10px 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 140ms var(--ease-out); } .pf-chrome__cta:active { transform: scale(0.97); } /* Below ~420px the masthead cannot hold all three: the wordmark is 98px, the booking button 204px (the seed label is "Programează o vizită") and the menu toggle 44px, which with gaps and gutters needs about 414px. The row wrapped, the header grew to 91px, and the order shuffled between widths — at 390 the toggle dropped under the wordmark, at 360 the wordmark sat alone above the other two. Drop the masthead button here: the same call to action is the first thing in the hero directly below it, and the menu drawer carries it too, so nothing becomes unreachable. */ @media (max-width: 419.98px) { /* Not display:none, though that was the first thing I reached for. On a salon's site the masthead booking button is the highest-value control on the page, and wave5-portfolio-a11y checks it is a real target — rightly. Make it fit instead: the seed label ("Programează o vizită") is unusually long, so cap the width and let an over-long one ellipsise rather than force the row to wrap. */ .pf-chrome__cta { font-size: 10px; letter-spacing: 0.06em; padding: 10px 12px; max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-chrome__mark { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .pf-hero { position: relative; width: 100%; min-height: 88vh; display: block; background: var(--void); } .pf-hero__frame { position: relative; width: 100%; min-height: 88vh; display: flex; align-items: flex-end; } .pf-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Legibility veil. The hero wordmark and tagline are white text laid directly on whatever photograph the salon uploads, and this gradient is the only thing between them. It used to run 0.08 to 0.45 — an atmospheric wash, not a contrast guarantee. Measured on rendered pixels behind the headline: 1.94:1 at the 10th percentile on the photo this template ships with, 1.40:1 on a light one, against the 3:1 WCAG AA floor for text at this size. The template was scored 6/10 with that in plain sight. Weighted to reach full strength by the upper third — where the copy block actually sits — rather than only at the very bottom of the frame. It stays a full-frame wash on purpose: a scrim sized to the copy block reads as a dark rectangle pasted on the photo, which is worse than the problem. */ .pf-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 28, 33, 0.14) 0%, rgba(24, 28, 33, 0.52) 18%, rgba(24, 28, 33, 0.80) 38%, rgba(24, 28, 33, 0.88) 100%); } .pf-hero__copy { position: relative; z-index: 1; padding: 0 22px 4rem; max-width: var(--max); /* Flex items default to min-width:auto (locked to their content's min-content width) — at very narrow widths (200% zoom on a 390px phone is ~195px) that held the wordmark/tagline to their longest unbreakable word and pushed this past the viewport. min-width:0 lets it shrink and actually wrap. */ min-width: 0; } .pf-hero__logo { height: 40px; margin-bottom: 1rem; } /* Hero type hierarchy. The salon name and the tagline used to share one rule — same family, same 54px, same weight, stacked with no gap — so "Atelier Ivoire" and "Păr, îngrijirea tenului și manichiură — cu răbdare și precizie" read as one run-on sentence rather than as a name and a promise. The name is the

and keeps the display scale; the tagline becomes the lede it actually is. */ .pf-hero__word { font-family: var(--display); font-size: clamp(2.4rem, 6.8vw, 3.6rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; margin: 0; } .pf-hero__tag, .hero-tagline { font-family: var(--body, inherit); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 400; line-height: 1.5; letter-spacing: 0; max-width: 36rem; margin-top: 1.1rem; color: rgba(255, 255, 255, 0.94); } /* Touch-target floor: 44px. Measured across all five templates at 1440 and 390, every primary call to action on a generated site — the buttons that make a small business's phone ring — rendered between 34px and 42px tall. That clears WCAG 2.5.8 (Level AA, 24x24) and falls short of 2.5.5 (Level AAA, 44x44) and of the figure both the iOS and Android guidelines give for a thumb. Several of these rules already carried a min-height, set just under the mark. Locked by bot/test/waveB-touch-targets.test.js, which measures the rendered box rather than the declaration. */ .pf-hero__cta, .hero-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.35rem; padding: 10px 20px; background: var(--cta); color: #fff; border: 0; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: transform 140ms var(--ease-out); } .pf-hero__cta:active { transform: scale(0.97); } .pf-hint, .scroll-hint { width: 100%; border: 0; background: transparent; color: rgba(255,255,255,0.48); padding: 0 22px 1.5rem; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; text-align: left; } .scroll-hint__line { display: block; width: 1px; height: 24px; margin-top: 0.4rem; background: rgba(255,255,255,0.32); } .pf-main { background: var(--paper); color: var(--ink); } .pf-shell { max-width: var(--max); margin: 0 auto; padding: 0 22px; } .pf-gal { padding: clamp(3rem, 8vw, 5.5rem) 0; } .pf-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.5rem; } .pf-kicker--center { text-align: center; } .pf-display { font-family: var(--display); font-size: clamp(1.85rem, 3.5vw, 2.45rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.5rem; } .pf-display--center { text-align: center; } .pf-copy { color: var(--soft); max-width: 36rem; } .pf-copy--sm { font-size: 0.92rem; margin-top: 0.5rem; } .pf-series { margin: 2.5rem 0 3.5rem; } .pf-series__t { font-family: var(--display); font-size: 1.35rem; font-weight: 500; } /* Measured uncapped at 936px/93 chars-per-line on a 1440 viewport — same 36rem cap as .pf-copy. */ .pf-series__b { color: var(--soft); margin: 0.35rem 0 1rem; max-width: 36rem; } /* The photo wall is deliberately full-bleed while its heading stays in the 980px text column — the contrast between the two is the section's whole idea. But it ran to x=0 and x=1440 with a narrow gap between the photos, so the outer edges were the only seams on the page that did not match, and the rounded corners of the first and last photo in each row were sliced off by the viewport. It read as a grid that had escaped its layout rather than one placed edge to edge on purpose. Same gutter outside as inside. The gap itself is widened here (photos end up a little smaller as the same row width is now split with more space between them): on a client-chosen section colour the photos read as a single fused mass at a tight gap — more breathing room keeps them reading as separate framed shots. */ /* SUITE C (feedback 2026-09-13, punct 3): supersedes the WAVE10 fix below. WAVE10 solved "a partial last row leaves an empty gap" by STRETCHING the leftover photo(s) to fill the row (`grid-column: span 6` + `aspect-ratio: 21/9` on a lone remainder). That is exactly the defect the owner reported with a screenshot: adding a 4th/5th photo to a 3-per-row grid made that photo render as a huge full-width banner under the row of three. Uniform sizing and "stretch to fill" are mutually exclusive — this fix keeps uniform sizing and drops the stretch entirely, so bot/test/wave10-portfolio-gallery-grid.test.js's "no empty last-row gap" assertion no longer applies (it is rewritten in this same commit to check the new invariant: never stretched, and any row that would otherwise leave a gap becomes a scrollable carousel instead — see that file's updated header comment). Every photo, at any count, renders at the same size: `.collage-deck` is a single-row flex track (no wrapping) sized to fit N photos per screen width; a category with more photos than fit becomes a horizontal scroll-snap carousel (collage.js wires the prev/next buttons + swipe is native `overflow-x` touch scrolling) instead of wrapping to a second row or stretching a leftover photo. */ .collage-stage { padding-inline: 20px; position: relative; } .collage-deck { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch; /* Buttons + swipe are the carousel's affordances; a second, native scrollbar underneath the photos read as visual clutter in review. */ scrollbar-width: none; /* Flex items paint like inline content (CSS Flexbox §z-index), which sits ABOVE a lower positioned sibling in stacking order regardless of DOM order — confirmed live: without this, `.collage-nav` (z-index:5, a sibling of this deck, not a child) rendered visually on top but a photo still received the click. Giving the deck its own explicit stacking context (position + a z-index below the buttons') contains that flex-item painting quirk inside the deck itself, so the stage-level comparison becomes a plain "z-index 1 vs 5" and the nav buttons are reliably clickable, not just visually on top. */ position: relative; z-index: 1; } .collage-deck::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .collage-deck { scroll-behavior: auto; } } /* Two per screen on narrow widths, three from 834px up — same breakpoint WAVE10 used for its 3-per-row desktop grid. A category at or under the breakpoint's count renders as a plain uniform row (nothing to scroll, `overflow-x` auto is a no-op); above it, .collage-nav (below) engages. */ .pf-frame, .collage-photo { flex: 0 0 calc((100% - 20px) / 2); scroll-snap-align: start; } @media (min-width: 834px) { .pf-frame, .collage-photo { flex: 0 0 calc((100% - 40px) / 3); } } /* Real