/* ============================================================================ Booking homepage designs — one markup, six layouts. Served for /home/{accountName} through templates/bookingHomeDesigns.html + js/app-v2/bookingHomeDesignsView.js + templates/legacy/app-v2/bookingHomeDesignsTemplate.html. The business picks its layout in Online Booking → Booking Page → Homepage Settings ("APPEARANCE"); the value is stored on BookingPreferencesJDO.homePageDesign, allow-listed by Constants.HOME_PAGE_DESIGNS, and applied by the view as data-pts-design on .pt-home-shell. clean (base, default) balanced cards showcase large visual hero, 2-up with a featured wide tile directory dense list-first, minimal radii and shadows soft rounded and spacious, hero in a rounded frame spotlight hero-led landing page, flat identity row, 4-up tiles split sticky identity rail beside a scrolling content column Everything is scoped under .pt-home-shell with a pts- prefix and --pts-* tokens, so this file cannot affect newbookingpage.css or any existing booking template. Adding a design means adding one [data-pts-design="…"] block here plus one option in the settings dropdown and one entry in Constants.HOME_PAGE_DESIGNS — no markup or view changes. ============================================================================ */ /* Page-level reset — safe because only templates/bookingHomeDesigns.html loads this file. newbookingpage.css (loaded before this one, for the shared login/appointments modals) sets body{display:flex;flex-direction:column;overflow:auto}. An `overflow` value other than visible on an ancestor makes that ancestor the scrollport, which stops position:sticky from ever engaging — that would silently break the sticky header, section nav and split rail. */ html,body{overflow:visible} body{display:block;background:#f6f6f8} #pt-home-root{display:block} /* Visually hidden server-rendered SEO summary in the shell (outside .pt-home-shell). */ /* ========================================================================== BASE = "clean". Every other design overrides tokens and a handful of rules. ========================================================================== */ .pt-home-shell{ /* ACCENT — the merchant's BOOKING PAGE THEME. Only --pts-accent and --pts-accent-on are ever stated per theme (see the [data-pts-accent] blocks below); the other three are DERIVED from it, so a new theme is one line and the five can never drift out of step. What each one is for: --pts-accent the fill: Book-now buttons, the header brand mark, badge tints --pts-accent-on text ON that fill — white for every theme except yellow, which takes dark ink exactly as the classic .yellow-summary-color pair does --pts-accent-ink accent-hued text on a LIGHT surface (eyebrows, "Book now →" links, badge glyphs, active nav pills). Never use --pts-accent for text: at 9% of the themes it fails contrast outright (yellow on white is 1.8:1) --pts-accent-soft the pale tint behind badges, chips and today's hours row --pts-accent-hover the primary button's hover fill — a darkened accent, so --pts-accent-on stays readable on it and the button does not flip its text colour The purple below is the fallback when no theme resolves; it is also what every account rendered before the theme was wired in. The mixes reproduce the hand-picked values it used to carry (#f2ecff / #5521b5) to within a shade. */ --pts-accent:#6d28d9; --pts-accent-on:#fff; --pts-accent-rgb:109,40,217; --pts-accent-soft:#f2ecfc;--pts-accent-ink:#551fa9;--pts-accent-hover:#5e22bb; --pts-badge-sub:#e5d8f8;--pts-accent-fill:#e8ddf9;--pts-header-tint:#fbfafe;--pts-avatar-tint:#e5d8f8; --pts-edge-12:#d8d0e9;--pts-edge-14:#d6cce8;--pts-edge-18:#d1c5e8;--pts-edge-30:#c2aee6;--pts-edge-35:#bca4e5; --pts-map-water:#e4f2fa;--pts-review-mine-bg:#def5e7; --pts-badge-open-bg:#daf3e4;--pts-badge-open-today-bg:#cdf0db; --pts-badge-closed-bg:#fbe4e4;--pts-badge-closed-today-bg:#f9dbdb; --pts-bg:#f6f6f8;--pts-surface:#fff;--pts-surface-2:#fafafa; --pts-surface-rgb:255,255,255;--pts-bg-rgb:246,246,248;--pts-line-rgb:231,231,235; --pts-text:#18181b;--pts-muted:#6f6f78;--pts-line:#e7e7eb; --pts-success:#178642;--pts-warning:#e58a00;--pts-danger:#c92a2a; /* Pill FILL hues, siblings of the inks above (same naming idea as --pts-accent-soft). The inks are deep, so a pastel mixed from them comes out grey-green / grey-pink; these brighter hues mix to the mint and blush a status pill wants while the TEXT stays the semantic ink. Fill only — never text: they are too light to pass contrast on their own. ⚠️ NOT referenced by any rule any more, and NOT dead: these two are the SOURCE the precomputed --pts-badge-*-bg / --pts-review-mine-bg literals below are mixed from (see the accent-token note at the top — color-mix() had to leave the stylesheet for browser support). Change a hue here, then re-run scripts/gen-accent-tokens.py; deleting them loses the only record of where those fills came from, and BookingHomeDesignsColorCompatTest checks the literals against exactly these values. */ --pts-success-soft:#2fbf6a;--pts-danger-soft:#e35555; /* The floating "Ready when you are" pill, as TOKENS, because the footer's bottom padding is derived from them (see .pts-footer). --pts-cta-h is the pill's measured height with the shell's FULL stylesheet set (newbookingpage.css leaks into it) and the template's real markup — the button carries `pts-btn-small`, and a probe that drops that class reports 60px instead of 54px, which is how the footer ended up 7px too tall once already. Re-measure it if the pill's padding, type or content changes; nothing else needs touching, the padding follows. */ --pts-cta-h:54px;--pts-cta-gap:11px; /* Picktime's heart, for the footer credit. The brand value is #fb3957 — what every classic booking footer paints — but those footers are near-black, and the SAME red is a different colour to the eye on white: 4.62:1 on the classic's #1e1e1e against 3.61:1 here, where it goes pink and washed rather than red. So the hue is kept and darkened until it matches the classic's own contrast against its own ground (#d8314b, 4.71:1) — the same "a fill is not a foreground" reasoning as --pts-accent-ink. Dark appearance restores the raw brand value, which is exactly the classic's situation. */ --pts-heart:#d8314b; --pts-page:1120px;--pts-gap:28px; --pts-radius:12px;--pts-radius-sm:12px;--pts-shadow:0 18px 50px rgba(24,24,27,.08); --pts-header-h:66px;--pts-overlap:-58px;--pts-section:66px; /* The mark-to-wordmark gap of the brand lockup. ONE token because the page draws that lockup TWICE — .pts-brand in the header and .pts-footer-lockup in the footer — and the two are read as the same logo: the footer sat at 11px against the header's 6px and read as a looser, different lockup. The footer mark is the larger box (38px vs 34px), so the gap is the only thing that can hold them together; keep both on this token rather than restating a number in either place. */ --pts-brand-gap:6px; --pts-brand-max:260px; /* Banner sizing — see .pts-cover. The cover has NO fixed height: it derives one from the banner's own aspect ratio so the whole image is always visible. 2.5 is the shipped industry banners' ratio (1000x400) and the pre-load placeholder; bookingHomeDesignsView publishes the real ratio once the image has loaded. --pts-cover-max is only a guard against a near-square upload turning the hero into a viewport-tall block. --pts-cover-ar-default is the OTHER case: a per-industry stock banner, which the page crops to this measure instead of sizing itself to the source (see .pts-cover-default). 4 is not a taste call — it is the aspect the banner cropper locks merchant uploads to (imageParams.aspect = 4 in views/onlineBookingView.js), so a business that never uploaded a banner gets a hero the same height as one that did. */ --pts-cover-ar:2.5;--pts-cover-max:min(88vh,900px);--pts-cover-ar-default:4; /* ...and --pts-cover-w is the same guard on the OTHER axis. The four block designs run the banner full-bleed, so on a very wide display (a 1920px monitor, a 2560px one, a TV) it kept growing while every other thing on the page stayed inside the 1120px page measure: a ~700px-tall band of photograph above a narrow column of content, with the identity card floating in the middle of it. The cap is drawn on the LAPTOP line, which is the whole decision: a laptop keeps the full-bleed hero the merchant's banner was designed against, and every display wider than a laptop frames it instead. 1750 is that line — the widest ordinary laptop (16" MacBook = 1728 CSS px) plus a small allowance, so the fit is not knife-edge — and it stays well clear of a 1080p monitor, which must NOT go full-bleed. So the two numbers that matter are the bounds, not this exact value: keep it at or above 1728 and below 1920 (what the guard test asserts). Past the cap the box keeps its ratio and the auto inline margins centre it over the page (the same treatment `soft` already gives its framed banner). */ --pts-cover-w:1950px; --pts-tiles:3;--pts-rows:2;--pts-team:4; /* Category-block rhythm (see .pts-cat): space ABOVE a category header, and between the header and the items it introduces. Tokens rather than per-design rules on purpose — a design block would out-rank `.pts-cat:first-of-type{margin-top:0}` (0,2,0) with its own (0,3,0) selector and indent the FIRST category of every group. Re-point these instead of restating the margins. */ --pts-cat-gap:24px;--pts-cat-lead:14px; --pts-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* CONTENT TYPE SCALE (headings are separate — see the mobile blocks at the bottom of the file): 15px body / lead copy — section + panel intros, and the inherited default that buttons and the header brand pick up 14px primary text — links, prices, reviewer names, review + group-intro copy, header nav 13px secondary text — identity meta, tile copy, contact + detail rows, chips, nav pills, hours rows (13.5, half a step up so a row outweighs its status pill) 12px captions and labels — eyebrows, counts, tile meta, notes, footer, hours pill (12.5) 11px micro only — review dates, price sub-notes, CTA sublines Everything was one step (~1px) smaller, which read as cramped next to the 16-46px headings. Do not drop content below 11px, and keep every step relative: bumping one value in isolation is what flattens the hierarchy. Icon/initial glyph sizes (.pts-logo, .pts-*-avatar, .pts-*-icon, .pts-modal-close) are box-relative, NOT part of this scale — leave them out of any resize. TRACKING LADDER (letter-spacing) — the page has TWO systems, and every HEADING AND CARD TITLE belongs to the first: · DISPLAY text tightens as it grows, in 0.005em steps off the size: 28px -.04 · 27px -.045 (the business name, one notch tighter by design) 22px -.035 · 20px -.03 · 17-18px -.025 · 16px -.02 · 15px -.015 · 14px -.01 · MICRO UPPERCASE labels open up instead: .pts-eyebrow +.12em, .pts-subhead / .pts-cat-name +.06em. Body copy, prices, metas, buttons and sentence-case CTAs stay `normal`: tracking is for type that is either large enough to close up or small-and-capped enough to need air. ⚠️ A heading left at `normal` is not neutral, it is OFF the ladder — at 15-18px the browser default is looser than its neighbours, so the same offering name set visibly wider in a class row than in a service tile. Four surfaces sat outside it (.pts-row h4, .pts-team-card h3, .pts-faq summary, .pts-loc-card h3) and were brought on; BookingHomeDesignsContentScaleTest pins the table. ⚠️ TWO PAIRS ARE DELIBERATELY OFF-LADDER, and each is off it for the same reason — the two halves of ONE object must track alike, which beats matching their own size band. `.pts-footer-name` (17px) holds -.02em to stay in step with the header's `.pts-brand` (16px), because the two ARE one lockup (see the brand-gap note); `.pts-map-face strong` (15px) holds -.01em to stay in step with `.pts-map-note strong` (13px), the same branch name in the panel's other state. Do not "correct" either one to its size band — that splits a pair a visitor reads as a single mark. State tracking in `em`, never px, so the responsive size overrides at the bottom of the file scale it for free — they set the SIZE only and inherit this. */ display:block;background:var(--pts-bg);color:var(--pts-text); font-family:var(--pts-font);line-height:1.5;font-size:15px;min-height:100vh; /* 🔑 EVERY STRING ON THIS PAGE IS MERCHANT DATA, so one unbreakable run of characters must never be able to push the page sideways. `overflow-wrap` is INHERITED, so stating it once here covers every field — the business name, an offering's description, a FAQ answer, an address, a reservations email, a meeting URL — instead of a rule per text holder that the next new field would miss. Measured before this: a business name with a single unbroken run of 25 characters overflowed its own box at 320px and, because nothing upstream clips, propagated all the way to .pt-home-shell — a horizontal scrollbar on the whole page with content cut off, in all seven designs. At 55 characters it was +306px at 320px and still +234px at 768px. The same break hit the FAQ summary (which pushed .pts-faq-mark off-screen), the location contact rows (a long email overflowed even at 1240px), "About {name}", the footer copyright and the team card. ⚠️ `anywhere`, NOT `break-word`: only `anywhere` also lets the MIN-CONTENT size shrink, and these are flex items (contact rows, fact cells, cards) whose min-content contribution is what dragged their container wide. `break-word` would leave that intrinsic floor in place and keep overflowing. ⚠️ It cannot loosen anything deliberately clipped: `overflow-wrap` has no effect where wrapping is forbidden, so the one-line ellipsised names (.pts-name, .pts-user-name, .pts-brand-name, .pts-btn) keep their `white-space:nowrap` behaviour exactly. The team card's 2-line clamp DOES now break a run-on name rather than spilling out of the card, which is the point. */ overflow-wrap:anywhere; } .pt-home-shell *{box-sizing:border-box} /* ========================================================================== BOOKING PAGE THEME → ACCENT The merchant picks one of ten swatches in Online Booking → Settings ("BOOKING PAGE THEME"), stored on BookingPreferencesJDO.themeColor and already driving the booking FLOW through newbookingpagetheme.css's `-summary-color` classes. This page hands off to that flow, so it wears the same colour: bookingHomeDesignsView.accent() resolves the value against this exact allow-list and writes it as data-pts-accent on .pt-home-shell. The hexes are the swatches themselves (onlineBookingTemplate.html's `.colors-box` icons) — keep them in step with that picker. Note `default` is BLACK, not the purple this page used before the theme was wired in: an account that never touched the setting has a black-buttoned booking page, and the homepage matching it is the whole point. To go back to purple for unthemed accounts, delete the `default` block (the base fallback then applies) — but the flow will disagree. Only --pts-accent is stated; -soft / -ink / -hover derive from it in the base block above. Yellow is the one theme that needs more: it is too light for white text (so -on goes dark, mirroring .yellow-summary-color) and far too light for accent TEXT (#eeba0b on white is 1.8:1), so its ink is mixed much darker — 55% lands at 5.4:1 on white and 5.2:1 on its own soft tint. ========================================================================== */ .pt-home-shell[data-pts-accent="default"]{--pts-accent:#1e1e1e;--pts-accent-rgb:30,30,30; --pts-accent-soft:#f4f4f4;--pts-accent-ink:#171717;--pts-accent-hover:#1a1a1a;--pts-badge-sub:#d7d7d7; --pts-accent-fill:#dbdbdb;--pts-header-tint:#f9f9f9;--pts-avatar-tint:#f4f4f4; --pts-edge-12:#cfcfd2;--pts-edge-14:#cbcbce;--pts-edge-18:#c3c3c6;--pts-edge-30:#ababae;--pts-edge-35:#a1a1a3} .pt-home-shell[data-pts-accent="teal"]{--pts-accent:#008080;--pts-accent-rgb:0,128,128; --pts-accent-soft:#e8f4f4;--pts-accent-ink:#006464;--pts-accent-hover:#006e6e;--pts-badge-sub:#d1e8e8; --pts-accent-fill:#d6ebeb;--pts-header-tint:#f9fcfc;--pts-avatar-tint:#d1e8e8; --pts-edge-12:#cbdbde;--pts-edge-14:#c7d9dc;--pts-edge-18:#bdd4d8;--pts-edge-30:#a2c8cb;--pts-edge-35:#96c3c6} .pt-home-shell[data-pts-accent="violet"]{--pts-accent:#7b2cbf;--pts-accent-rgb:123,44,191; --pts-accent-soft:#f3ecf9;--pts-accent-ink:#602295;--pts-accent-hover:#6a26a4;--pts-badge-sub:#e7d9f3; --pts-accent-fill:#eaddf5;--pts-header-tint:#fcfafd;--pts-avatar-tint:#e7d9f3; --pts-edge-12:#dad1e6;--pts-edge-14:#d8cde5;--pts-edge-18:#d4c5e3;--pts-edge-30:#c7afde;--pts-edge-35:#c1a6dc} .pt-home-shell[data-pts-accent="pink"]{--pts-accent:#e05780;--pts-accent-rgb:224,87,128; --pts-accent-soft:#fcf0f4;--pts-accent-ink:#af4464;--pts-accent-hover:#c14b6e;--pts-badge-sub:#f9e1e8; --pts-accent-fill:#fae4eb;--pts-header-tint:#fefbfc;--pts-avatar-tint:#f9e1e8; --pts-edge-12:#e6d6de;--pts-edge-14:#e6d3dc;--pts-edge-18:#e6cdd8;--pts-edge-30:#e5bccb;--pts-edge-35:#e5b5c6} .pt-home-shell[data-pts-accent="green"]{--pts-accent:#41ac5e;--pts-accent-rgb:65,172,94; --pts-accent-soft:#eef8f1;--pts-accent-ink:#338649;--pts-accent-hover:#389451;--pts-badge-sub:#ddf0e2; --pts-accent-fill:#e1f2e5;--pts-header-tint:#fafdfb;--pts-avatar-tint:#ddf0e2; --pts-edge-12:#d3e0da;--pts-edge-14:#d0dfd7;--pts-edge-18:#c9dcd2;--pts-edge-30:#b5d5c1;--pts-edge-35:#add2ba} .pt-home-shell[data-pts-accent="orange"]{--pts-accent:#e76f51;--pts-accent-rgb:231,111,81; --pts-accent-soft:#fdf2ef;--pts-accent-ink:#b4573f;--pts-accent-hover:#c75f46;--pts-badge-sub:#fbe5e0; --pts-accent-fill:#fbe8e3;--pts-header-tint:#fefbfb;--pts-avatar-tint:#fbe5e0; --pts-edge-12:#e7d9d9;--pts-edge-14:#e7d6d5;--pts-edge-18:#e7d1cf;--pts-edge-30:#e7c3bd;--pts-edge-35:#e7bdb5} .pt-home-shell[data-pts-accent="blue"]{--pts-accent:#2088bf;--pts-accent-rgb:32,136,191; --pts-accent-soft:#ebf4f9;--pts-accent-ink:#196a95;--pts-accent-hover:#1c75a4;--pts-badge-sub:#d7eaf3; --pts-accent-fill:#dbecf5;--pts-header-tint:#f9fcfd;--pts-avatar-tint:#d7eaf3; --pts-edge-12:#cfdce6;--pts-edge-14:#cbdae5;--pts-edge-18:#c3d6e3;--pts-edge-30:#abcbde;--pts-edge-35:#a1c6dc} .pt-home-shell[data-pts-accent="darkblue"]{--pts-accent:#03045e;--pts-accent-rgb:3,4,94; --pts-accent-soft:#e8e8f1;--pts-accent-ink:#020349;--pts-accent-hover:#030351;--pts-badge-sub:#d2d2e2; --pts-accent-fill:#d7d7e5;--pts-header-tint:#f9f9fb;--pts-avatar-tint:#d2d2e2; --pts-edge-12:#ccccda;--pts-edge-14:#c7c7d7;--pts-edge-18:#bebed2;--pts-edge-30:#a3a3c1;--pts-edge-35:#9798ba} .pt-home-shell[data-pts-accent="yellow"]{--pts-accent:#eeba0b;--pts-accent-on:#1e1e1e;--pts-accent-rgb:238,186,11; --pts-accent-soft:#fdf9e9;--pts-accent-ink:#836606;--pts-accent-hover:#cda009;--pts-badge-sub:#433a1b; --pts-accent-fill:#fcf4d8;--pts-header-tint:#fffdf9;--pts-avatar-tint:#fcf3d3; --pts-edge-12:#e8e2d0;--pts-edge-14:#e8e1cc;--pts-edge-18:#e8dfc3;--pts-edge-30:#e9daa8;--pts-edge-35:#e9d79d} .pt-home-shell[data-pts-accent="red"]{--pts-accent:#d00000;--pts-accent-rgb:208,0,0; --pts-accent-soft:#fbe8e8;--pts-accent-ink:#a20000;--pts-accent-hover:#b30000;--pts-badge-sub:#f7d1d1; --pts-accent-fill:#f7d6d6;--pts-header-tint:#fef9f9;--pts-avatar-tint:#f7d1d1; --pts-edge-12:#e4cbcf;--pts-edge-14:#e4c7ca;--pts-edge-18:#e3bdc1;--pts-edge-30:#e0a2a5;--pts-edge-35:#df9699} /* Visually-hidden helper for the server-rendered crawlable summary in templates/bookingHomeDesigns.html (class="pts-sr-only"). ⚠️ USED BY THE THYMELEAF SHELL, not by the app-v2 template or the view — a dead-class audit that only scans bookingHomeDesignsTemplate.html + bookingHomeDesignsView.js will report it as unused. Deleting it makes the whole SEO block render as raw text above the header. Clip rather than display:none so the content stays available to crawlers and assistive tech. */ .pts-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;margin:-1px;padding:0;border:0} .pt-home-shell h1,.pt-home-shell h2,.pt-home-shell h3,.pt-home-shell h4{margin:0;text-wrap:balance} /* font-size:inherit is a LEAK RESET, not decoration: newbookingpage.css — loaded by this same shell — sets a bare `a{font-size:16px}`, which every link this page doesn't size picks up. That is why "Get directions" rendered 16px inside a 13px contact row and the footer credit 16px inside 12px footer text. A link belongs to the scale of the text it sits in; the two links that are deliberately larger (.pts-btn, .pts-brand-name) pin their own size below. Same class of bare-tag leak as the `section{padding:12px 0}` reset further down. Note this rule is (0,1,1), so anything sizing an must out-specify it or come later in the file. */ .pt-home-shell a{color:inherit;text-decoration:none;font-size:inherit} .pt-home-shell img{max-width:100%} /* newbookingpage.css — loaded by this same shell — styles bare tags, and BOTH .pts-section and .pts-group are
elements, so its `section{padding:12px 0}` silently added 24px to every section AND every group (~240px of dead page height, and every gap 24px looser than designed). The heading/anchor resets above already neutralise its h1/h2/h3 margins. This page owns its own vertical rhythm via --pts-section / .pts-group. */ .pt-home-shell section{padding:0} .pt-home-shell button{font:inherit;cursor:pointer} .pts-eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pts-accent-ink); margin-bottom: 12px;} /* shared centred measure */ .pts-rail,.pts-main{width:min(var(--pts-page),calc(100% - 36px));margin-left:auto;margin-right:auto} /* ---------- buttons ---------- */ /* 16px is one step above body — a primary CTA should be the loudest non-heading text on the page. It used to arrive by accident, inherited from newbookingpage.css's bare `a{font-size:16px}`; pinned here so the link reset above cannot silently shrink every Book-now button to body size. ⚠️ Shell-prefixed for SPECIFICITY: buttons are usually , and `.pt-home-shell a{font-size:inherit}` is (0,1,1), so a bare `.pts-btn{font-size}` (0,1,0) loses to it and the button renders at body size. */ .pt-home-shell .pts-btn{min-height:42px;padding:0 17px;border:0;border-radius:999px;display:inline-flex; align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:800;white-space:nowrap; transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease} .pts-btn:hover{transform:translateY(-1px)} /* .pt-home-shell a{color:inherit} is (0,1,1) and outranks a bare class, so anything colouring an must carry the shell prefix. */ /* The Book-now button IS the booking page theme — fill and text both. ⚠️ The text colour must be --pts-accent-on and not #fff: yellow (#eeba0b) carries white at 1.8:1, an unreadable button, which is exactly why the classic .yellow-summary-color pairs it with dark ink instead. And the hover fill is --pts-accent-hover (a darkened accent), NOT --pts-accent-ink: ink is tuned for readable TEXT, so on a light theme it is dark enough that the label would have to flip colour mid-hover. */ .pt-home-shell .pts-btn-primary{background:var(--pts-accent);color:var(--pts-accent-on); box-shadow:0 8px 22px rgba(var(--pts-accent-rgb),.24)} .pt-home-shell .pts-btn-primary:hover{background:var(--pts-accent-hover);color:var(--pts-accent-on)} .pt-home-shell .pts-btn-secondary{background:var(--pts-surface);color:var(--pts-text);border:1px solid var(--pts-line)} /* Same (0,2,0) shape as .pt-home-shell .pts-btn above and later in the file, so it wins for the small header pill; a bare .pts-btn-small would lose to both that and the reset. */ .pt-home-shell .pts-btn-small{min-height:36px;padding:0 14px;font-size:13px} .pt-home-shell :focus-visible{outline:3px solid rgba(var(--pts-accent-rgb),.45);outline-offset:3px} /* ---------- inline fontello icons ---------- */ /* Two glyphs that ride INSIDE a text run rather than in a box of their own: the CTA arrow (`Book now →`, on hosts from 12px to 16px) and the dropdown caret. Sized in `em` so one rule follows every host's own font-size — .pts-btn 16, .pts-link 14, .pts-tile-cta/.pts-row-cta/.pts-team-link 12 — instead of a per-host override that would drift. They were `→` / `▾` entities, i.e. at the mercy of whichever system font supplied them; `line-height:1` + the `:before` margin reset keep the glyph on the label's centre (the button/CTA rows are flex, so its own box is what gets centred). */ /* ⚠️ `align-self:center` is load-bearing: `.pts-team-link` is an inline-flex host with no align-items, so the default `stretch` put the arrow's short (line-height:1) box at the TOP of the label and it rendered superscripted. Inert in the block/inline hosts, where vertical-align does the centring. */ .pts-arrow,.pts-caret{flex:0 0 auto;align-self:center;line-height:1;font-size:.8em} /* ⚠️ In an INLINE host — `.pts-link` ("View all"), `.pts-tile-cta`, `.pts-row-cta` — NOTHING centres the icon: `align-self` above only does anything in a flex host, so the icon box is baseline-aligned, and this glyph's ink is not centred in its own em box (it rises .77em above the baseline and dips .06em below it). The arrow therefore hung **2.20px below the label's cap-height centre**, dipping past the baseline the text sits on — which is what reads as a sagging arrow beside "View all". The offset raises the icon box so the arrow's SHAFT (what the eye tracks, not the ink box) sits on that centre: measured +2.20px before → 0.00px after at a 15px label, ±0.10px at 12px. It is in `em` of the icon, so one value holds at every size. It is on `.pts-arrow` ALONE, deliberately: .18em is derived from this glyph's ink, not the chevron's, and every flex host (`.pts-btn`, `.pts-team-link`, and the caret's `.pts-lang`/`.pts-user-btn`) ignores `vertical-align` outright — so they keep the box-centring they already had. */ .pts-arrow{vertical-align:.18em} .pts-arrow:before,.pts-caret:before{margin:0;width:auto;line-height:1;vertical-align:middle} .pts-caret{font-size:.72em;opacity:.75} /* ---------- header ---------- ⚠️ EVERY backdrop-filter on this page is stated TWICE, -webkit- first. Safari only dropped the prefix in 18 (Sept 2024) — 9 through 17 need `-webkit-backdrop-filter`, so the unprefixed line alone means no glass on years of shipped iOS/macOS Safari. It degrades cleanly rather than breaking (the bar keeps the 95%-opaque `background` above, which is exactly why that background must stay a real rgba() colour and not lean on the blur to be legible) — but the same pairing is already the house pattern in css/app-v2/login-page-v2.css, so matching it costs one line. `BookingHomeDesignsBackdropFilterTest` fails on any unpaired declaration, INCLUDING a `none` reset (see the directory design's header). */ .pts-header{position:sticky;top:0;z-index:70;height:var(--pts-header-h); background:rgba(var(--pts-surface-rgb),.95); border-bottom:1px solid rgba(var(--pts-line-rgb),.88); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .pts-header-inner{height:100%;width:min(var(--pts-page),calc(100% - 36px));margin:auto; display:flex;align-items:center;justify-content:space-between;gap:20px} .pts-brand{display:flex;align-items:center;gap:var(--pts-brand-gap);font-weight:900; min-width:0;max-width:var(--pts-brand-max)} .pts-brand-logo{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:0 0 auto} /* width is pinned because newbookingpage.css sets a bare img{width:100%;height:auto}, which would otherwise stretch the mark across the header. NOTE: images/picktime-logo-nav.svg is NOT usable here — its fills are white/#E5E6E6 for the dark left sidenav, so it is invisible on this light header. This colour mark reads on both themes, and the wordmark beside it is text in currentColor so it follows the theme too. */ .pts-brand-picktime{width:34px;height:34px;border-radius:6px;object-fit:contain;flex:0 0 auto} .pts-brand-mark{width:34px;height:34px;border-radius:10px;background:var(--pts-accent);color:var(--pts-accent-on); display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto} /* Pinned for the same reason as .pts-btn — it also used to inherit the leaked bare `a{16px}`. */ .pts-brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px} /* The header's brand: the classic booking page's CREDIT BADGE (.branding / .powerwedby / .powerwedbyPT — "Powered by" over "Picktime") instead of the mark + wordmark lockup, minus the classic's 318deg corner-ribbon rotation, which only makes sense pinned to a banner's corner. ALL SEVEN designs and both appearances — the badge says what the lockup only implies, and a per-design split would show a visitor comparing two Picktime booking pages two different product credits. Emitted where the view says so (m.brandBadge = branding && badgesBrand()), so a white-labeled account still gets its own logo + name. Nothing here is per-design: one set of rules, and the plate follows each design's own accent token. Two things are load-bearing: (a) the plate WEARS THE MERCHANT'S BOOKING PAGE THEME — --pts-accent fill with --pts-accent-on ink, exactly like .pts-btn-primary, NOT the classic's literal #1e1e1e on #fff and not the near-black --pts-text this shipped with. Three reasons: the classic badge sits on a photograph while this one sits on the header's own ground; the header is the one place a second dark plate competes with the Book-now CTA beside it; and --pts-accent-on is the token that keeps the label readable on every swatch (white on the yellow theme is not — that pairing is the whole point of the token). It follows the appearance for free too: the accent is theme-independent and the header behind it is the surface in both. ⚠️ Never state a literal here, and never use --pts-accent as the TEXT colour (see --pts-accent-ink) — here it is a fill and the ink comes from -on. (b) it is sized against the 34px lockup it replaces — 5px padding + a 12px line + an 18px line ≈ 40px in a 66px header, i.e. still 13px of air top and bottom, and ~30px NARROWER than the lockup, which is the axis that matters: the header row's 320px fit was measured value by value and the brand is its ONE shrinkable item. Retune the type and the padding together. The classic sets its two lines at 7px/14px; 7px is below this page's 11px content floor (the badge is real text, not a glyph box), so the caption sits on the 11px micro tier and the padding pays the difference. The 2px row-gap is the badge's internal rhythm — at 0 the caption sat on the wordmark's ascenders. */ .pts-brand-badge{display:flex;flex-direction:column;align-items:center;justify-content:center; flex:0 0 auto;gap:3px;padding:7px 12px;border-radius:6px;background:var(--pts-accent); color:var(--pts-accent-on);letter-spacing:0;text-align:center} .pts-brand-badge-top{font-size:11px;font-weight:600;line-height:1.1; color:var(--pts-badge-sub)} .pts-brand-badge-name{font-size:15px;font-weight:800;line-height:1.15} .pts-header-nav{--pts-header-pill-h:38px; display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px; height:var(--pts-header-pill-h);min-width:0;overflow:hidden} .pt-home-shell .pts-header-nav a{font-size:14px;color:var(--pts-muted);padding:0 11px;border-radius:999px; height:var(--pts-header-pill-h);display:inline-flex;align-items:center;white-space:nowrap} .pts-header-nav a:hover{background:var(--pts-surface-2);color:var(--pts-text)} .pts-header-actions{display:flex;align-items:center;gap:9px} /* Shell-prefixed so the font-size actually applies: `.pt-home-shell button{font:inherit}` above is (0,1,1) and the `font` shorthand resets font-size, so a bare `.pts-login{font-size:…}` was dead and this button silently rendered at the inherited body size. 14px matches the header nav beside it. */ /* Language chip — same ghost-pill treatment as .pts-login beside it. Shell-prefixed for the same reason: `.pt-home-shell button{font:inherit}` is (0,1,1) and its `font` shorthand would reset a bare font-size. The label can be long ("English (US)", "French (Français)"), so it is capped and ellipsised rather than allowed to squeeze the rest of the header. */ .pt-home-shell .pts-lang{min-height:36px;padding:0 11px;border:none;border-radius:999px; background:var(--pts-surface);color:var(--pts-muted);font-size:13px;font-weight:700; display:inline-flex;align-items:center;gap:6px;max-width:170px;white-space:nowrap} .pt-home-shell .pts-lang:hover{background:var(--pts-surface-2);color:var(--pts-text)} .pts-lang-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* `white-space:nowrap` for the same reason `.pts-btn` carries it: this label is two words in English and longer in most locales ("Se connecter", "Anmelden"), and as a flex item of the actions row it would break across two lines on a phone and grow a 36px control inside a 66px header rather than staying one pill. It is the ONLY signed-out control in that row (see the ≤720 note), so it must not deform. */ .pt-home-shell .pts-login{min-height:36px;padding:0 13px;border:1px solid var(--pts-line);border-radius:999px; background:var(--pts-surface);color:var(--pts-text);font-size:14px;font-weight:800;white-space:nowrap} .pts-login:hover{background:var(--pts-surface-2)} .pts-user{position:relative} .pts-user-btn{min-height:38px;display:flex;align-items:center;gap:8px;padding:4px 8px 4px 5px; border:1px solid var(--pts-line);border-radius:999px;background:var(--pts-surface);color:var(--pts-text)} /* Same fill as .pts-lang and .pts-login, its two siblings in this row — and it is the ONE of the three that shipped without a hover, which reads as a chip that is not a control (it opens the user menu). The signed-in and signed-out headers occupy the same slot, so a visitor must not get feedback in one state and none in the other. */ .pts-user-btn:hover{background:var(--pts-surface-2)} .pts-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--pts-accent-soft);color:var(--pts-accent-ink);font-size:10px;font-weight:900;flex:0 0 auto} /* 130px, not 110: at the 13px content scale a two-word name ("Yashwanth Reddy") no longer fit 110px and ellipsised even on a desktop header that had room to spare. Phones cap it lower — see the ≤470 block. */ .pts-user-name{font-size:13px;font-weight:800;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pts-user-menu{position:absolute;right:0;top:calc(100% + 10px);width:220px;padding:8px;border:1px solid var(--pts-line); border-radius:14px;background:var(--pts-surface);box-shadow:0 18px 52px rgba(0,0,0,.18); opacity:0;transform:translateY(-5px) scale(.98);pointer-events:none;transform-origin:top right;transition:.18s ease} .pts-user.pts-open .pts-user-menu{opacity:1;transform:none;pointer-events:auto} .pts-user-menu-head{padding:9px 10px 11px;border-bottom:1px solid var(--pts-line);margin-bottom:5px} .pts-user-menu-head strong{display:block;font-size:13px} .pts-user-menu-head span{display:block;color:var(--pts-muted);font-size:11px;margin-top:1px;word-break:break-all} .pts-user-menu a{display:block;padding:9px 10px;border-radius:9px;font-size:12px} .pts-user-menu a:hover{background:var(--pts-surface-2)} /* ---------- cover / hero ---------- THE WHOLE BANNER IS ALWAYS VISIBLE, AT EVERY WIDTH. The box takes its height from the image's own ratio (`aspect-ratio`, so height = coverWidth / --pts-cover-ar) and the image is `contain`-fitted, so narrowing the viewport scales the banner down instead of cropping its left/right edges. It used to be a fixed per-design height (--pts-cover-h) + `object-fit:cover`, which cropped the sides at every width whose ratio was wider than the image's (~37% lost off a 1000x400 banner on a 1440px screen, and progressively more as the window narrowed). Consequences to keep in mind when touching this: · The per-design cover heights are GONE — at a given width every design is the same height, because any other height would have to crop or letterbox. Tune the shared look via --pts-cover-ar / --pts-cover-max, not by reintroducing a fixed height. · The image is absolutely positioned so the aspect-ratio box, not the image, owns the height (an in-flow child would fight it before the image has loaded). · The box is capped on BOTH axes: --pts-cover-max (height) and --pts-cover-w (width). The width cap is what stops the full-bleed designs from painting a 700px-tall band across a 2560px display while the rest of the page stays inside the 1120px page measure; it is a max-width, never a width, for exactly the reason `soft` states below — a definite width blocks the ratio's height-to-width transfer and letterboxes the banner on a short window instead of scaling it down. The three designs that frame the banner themselves (soft, split, splitwide) declare their own max-width at (0,3,0) and out-rank this one, so the cap reaches only the four full-bleed block designs. · margin-inline:auto is load-bearing on a SHORT window. When --pts-cover-max binds, the ratio transfers that limit to the width too (CSS Sizing 4), so the box narrows instead of growing taller — height-limited rather than width-limited — and the auto margins keep that narrower box centred instead of parked against the left page edge. In the two split designs the same auto margins do the centring on their own flex line, where the box is `flex:0 0 100%` capped by a max-width — so those blocks re-declare the margin as a shorthand (top offset + auto) rather than dropping it. (Under the previous GRID shells this was a trap: an auto inline margin cancels a grid item's stretch sizing, and with no in-flow content — the image is absolute — the cover collapsed to 0x0 and the banner vanished. Flex has no such interaction, but keep the shorthand: those designs still need their own top offset.) */ .pts-cover{position:relative;height:auto;aspect-ratio:var(--pts-cover-ar); max-height:var(--pts-cover-max);max-width:var(--pts-cover-w);margin-inline:auto; overflow:hidden;background:#15151a; transition:border-radius .24s ease,width .24s ease,margin .24s ease} .pts-cover img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:center;display:block} /* THE ONE EXCEPTION to "never crop the banner", and it is not the same picture: this is the per-industry stock photo the shell falls back to when the account has NO banner of its own (/bookingPage/banner/.jpg — see the th:with in bookingHomeDesigns.html). Nothing on it belongs to the business, so there is nothing to preserve, and its shipped 2.5:1 source is far squarer than the 4:1 the banner cropper locks merchant uploads to — full-bleed at 2.5:1 that was a ~585px band on an ordinary desktop, so an account that never uploaded a banner got a hero roughly twice the height of one that did. Cropping it to the same measure is what makes the two cases agree. Keep `contain` + the source ratio for a real upload: that image IS the merchant's art. bindCoverRatio() bails out for this class, or the published source ratio would override it. */ .pts-cover.pts-cover-default{aspect-ratio:var(--pts-cover-ar-default)} .pts-cover.pts-cover-default img{object-fit:cover} .pts-cover::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(7,7,10,.4),rgba(7,7,10,.05) 58%,rgba(7,7,10,.25))} /* hidden in clean/directory/split, shown by showcase/spotlight */ .pts-hero-msg{display:none;position:absolute;z-index:2;top:50%;transform:translateY(-50%); left:max(18px,calc((100% - var(--pts-page))/2));max-width:460px;color:#fff} .pts-hero-eyebrow{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#d8c5ff} .pts-hero-title{font-size:46px;line-height:1.02;margin:10px 0 16px;color:#fff; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pts-hero-cta{margin-top:4px} /* ---------- identity card + quick facts ---------- */ .pts-rail{position:relative;z-index:5;margin-top:var(--pts-overlap)} .pts-card{background:var(--pts-surface);border:1px solid var(--pts-line);border-radius:var(--pts-radius); box-shadow:var(--pts-shadow);padding:22px;display:flex;align-items:center;gap:18px} /* The middle child is the identity text block. Selected by exclusion so the template needs no extra class: the mark can be an OR a
, and the actions column carries its own. `min-width:0` is the flex equivalent of the old `minmax(0,1fr)` track — without it a long business name refuses to shrink. */ .pts-card > *{flex:0 0 auto} .pts-card > div:not(.pts-logo):not(.pts-rail-actions){flex:1 1 auto;min-width:0} /* Sized against the card's CONTENT, not in isolation: the identity card holds a 30px title + the meta row + the Share pill, so an 82px mark read undersized beside it. 104px matches that stack. The radius tracks the size at a constant ~0.29 (24/82 -> 30/104) — that ratio is the mark's squircle look; scaling the box without it makes a big mark read as a plain rounded square. Every per-design and responsive override below keeps its own ratio for the same reason. */ /* ⚠️ The initial plate WEARS THE MERCHANT'S BOOKING PAGE THEME — --pts-accent fill with --pts-accent-on ink, the same pairing as .pts-brand-mark and .pts-btn-primary. It shipped as a literal near-black (#1b1b20 on #fff), i.e. the DEFAULT theme's accent baked in, so a teal or violet account got a black square beside its themed buttons — the same class of bug as the team avatar's lilac gradient stop. --pts-accent stays a FILL here and never the text colour, and -on is what keeps the initial readable on the yellow theme (white on it is 1.8:1). */ .pts-logo{width:104px;height:104px;border-radius:12px;background:var(--pts-accent);color:var(--pts-accent-on); display:flex;align-items:center;justify-content:center; font-size:27px;font-weight:900;object-fit:cover;overflow:hidden} /* 🔑 THE BUSINESS NAME IS A HEADING THAT WRAPS, so it is sized and led for TWO lines, not one. It shipped at 32px/1.05 — display-poster values, right for the one-line name it was drawn with and wrong for the real field: merchants write long names ("Fitness Gym Fitness Gym Fitness Gym … Fi"), which wrap to two or three lines at the card's ~950px measure. Two things went wrong there and BOTH are measured, not taste: at 32px the pair of lines stood 67px tall in a 165px card and outweighed everything the card holds (a 28px section heading is the loudest type anywhere else on the page); and 1.05 leading is TIGHTER THAN THE INK — 33.6px of leading against 30.5px of ink for "Fitness Gym Fi" left a **3.1px** gap, so the descenders of one line all but touched the caps of the next and the block read as a slab. 30px/1.15 keeps a real step above the 28px h2 (weight + the negative tracking widen it further) and opens that gap to **5.9px**, i.e. ~0.20em — the same order as the h2's own 1.12. Keep the leading on this side of ~1.12: it is the only thing standing between a two-line name and overlapping ink, and every per-design (directory/split 27px) and responsive (22/19px) override inherits it. */ .pts-title{font-size:30px;line-height:1.15;letter-spacing: 0.2px} /* Industry · sub-industry under the business name (the classic's muted 12px
  • row, in this page's own token language at the secondary content size). The separator is a ::before dot on every span after the first, mirroring the classic's list-style:disc on its second item — so one value alone shows no stray punctuation. */ .pts-industry{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:5px 0 0 1px; font-size:13px;font-weight:500;color:var(--pts-muted)} .pts-industry span + span::before{content:"\2022";margin-right:9px;opacity:.6} .pts-meta{display:flex;flex-wrap:wrap;gap:7px 13px;margin:5px 0px 10px;color:var(--pts-muted);font-size:13px} .pts-rating{color:var(--pts-warning);font-weight:800} /* ⚠️ The chip is an when the reviews section exists, and the shell's `a{color:inherit}` reset is (0,1,1) — it out-ranks the bare `.pts-rating` (0,1,0) and would strip the chip's colour. Hence the element-qualified selector. No hover decoration: the pointer cursor is the whole affordance, and an underline on a coloured chip inside the meta row read as noise. */ .pt-home-shell a.pts-rating{color:var(--pts-warning);cursor:pointer} /* ⚠️ Scoped to .pts-meta, exactly like the dot below, and for the same reason: `.pts-open` is ALSO the user menu's open-state class (`.pts-user.pts-open` — see the toggle in bindInteractions). Unscoped, opening that menu painted its whole contents — the customer's name, their email and all three links — success GREEN at weight 760, because they simply inherit from the container the class lands on. The dot rule below was already scoped for this collision; the colour itself was missed. */ .pts-meta .pts-open{color:var(--pts-success);font-weight:800} .pts-meta .pts-closed{color:var(--pts-danger);font-weight:800} /* Status dot. MUST stay scoped to .pts-meta — `.pts-open` is also the user-menu's open-state class (.pts-user.pts-open), which must not sprout a bullet. */ .pts-meta .pts-open::before,.pts-meta .pts-closed::before{content:"";display:inline-block; width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor;vertical-align:middle} /* Share cluster — a ghost pill in the identity card that opens a popover of share targets, mirroring the classic mini-website's share tooltip. Styled off the user menu (same surface/radius/shadow) so the page has one popover language. `.pts-share-open` deliberately does NOT reuse `.pts-open`: that class is the identity card's "Open now" status AND the user menu's state hook, so it would tint this menu green. */ /* Social icons then the Share pill, on one line. 🔑 ONE WRAP CONTEXT: the icons are DIRECT children of this row — do not wrap them in a `.pts-socials` box (the FOOTER keeps one; its parent is a column, so its icons need their own row). ⚠️ Flex breaks lines on an item's HYPOTHETICAL main size — its flex-basis, `auto` = max-content — BEFORE it shrinks anything, so a wrapper is ONE item whose hypothetical size is every icon on a single line (6x34 + 5x9 = 249px). The pill was therefore pushed onto a line of its OWN the moment one icon would have wrapped (measured: a 234px card column on a phone), and only then did the wrapper shrink to the row and wrap INTERNALLY — leaving obvious free space beside the last icon that the pill could never move into, being a sibling of the wrapper rather than of the icons. Same trap as the split rail's content column and the banner's `flex:0 0 100%`, and the reason `.pts-socials` is footer-only. The gap is therefore ALSO the icon rhythm: it stays 9px, in step with `.pts-socials`, so the page's two icon rows read as one treatment. */ .pts-social-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:0px} .pts-share{position:relative} .pt-home-shell .pts-share-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px; border:1px solid var(--pts-line);border-radius:999px;background:var(--pts-surface);color:var(--pts-muted); font-size:12px;font-weight:800} .pt-home-shell .pts-share-btn:hover{background:var(--pts-surface-2);color:var(--pts-text)} /* NOTE: this z-index only orders the popover WITHIN .pts-rail, which is itself a stacking context (position:relative;z-index:5). The sticky .pts-nav sits at 60, so it paints over this entire subtree no matter how high a number goes here — see the .pts-share-lift rule further down, which raises the rail. */ /* ⚠️ The CLOSED popover must be `display:none`, NOT merely transparent. It used to hide with `opacity:0;pointer-events:none`, which leaves the box in layout: a 196px absolute panel anchored to the pill's left edge, so as soon as the pill sat far enough right — i.e. from the width where the social row fits on ONE line (~470px) up to ~630px, in ALL SEVEN designs — its right edge landed past the viewport and the whole PAGE gained a horizontal scrollbar (measured: document scrollWidth 616 at a 560px viewport) plus a card whose scroll box was 69px wider than the card. Invisible ink, real overflow. `visibility:hidden` would not have fixed it either — a hidden box still creates scrollable overflow; only taking it out of layout does. The fade therefore moves from a transition to an animation on the OPEN state (the reduced-motion block already clamps animation-duration), which is also why the transition is gone: display is not transitionable, so keeping one would only have delayed the paint. `max-width` is the belt to that braces: even with no JS at all (see clampShareMenu, which slides the open menu back inside the viewport) the panel can never be wider than the screen it opens on. NOTE: the z-index only orders the popover WITHIN .pts-rail, which is itself a stacking context (position:relative;z-index:5). The sticky .pts-nav sits at 60, so it paints over this entire subtree no matter how high a number goes here — see the .pts-share-lift rule further down, which raises the rail. */ .pts-share-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:196px; max-width:calc(100vw - 16px);padding:6px; background:var(--pts-surface);border:1px solid var(--pts-line);border-radius:var(--pts-radius-sm); box-shadow:var(--pts-shadow)} .pts-share.pts-share-open .pts-share-menu{display:block;animation:pts-share-pop .16s ease} @keyframes pts-share-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .pts-share-head{margin:0 0 4px;padding:7px 9px;border-bottom:1px solid var(--pts-line); color:var(--pts-muted);font-size:12px} .pts-share-menu a,.pt-home-shell .pts-share-copy{display:flex;align-items:center;gap:9px;width:100%; padding:8px 9px;border:0;border-radius:9px;background:none;color:var(--pts-text);font-size:13px; text-align:left;cursor:pointer} .pts-share-menu a:hover,.pt-home-shell .pts-share-copy:hover{background:var(--pts-surface-2)} .pt-home-shell .pts-share-copy.pts-share-copied{color:var(--pts-success)} /* FOOTER ONLY. The identity card's icons are direct children of `.pts-social-row` (see the ⚠️ above); this wrapper survives because the footer brand block is a flex COLUMN, where the icons need a row box of their own — and there is nothing beside them there to be pushed onto its own line. */ .pts-socials{display:flex;flex-wrap:wrap;gap:9px} .pt-home-shell /* Icon buttons. `line-height:1` plus flex centring keeps every glyph on the button's centre — fontello faces differ in ascent, so leaving the inherited line-height in place drops some of them a pixel or two (the classic patches its YouTube glyph with a hand-tuned `margin-top:4px` for exactly this reason). */ .pts-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:10px;border:1px solid var(--pts-line);background:var(--pts-surface);color:var(--pts-text); font-size:15px;line-height:1;transition:border-color .16s ease,color .16s ease} .pts-social i{display:block;line-height:1;width:auto;margin:0} .pt-home-shell .pts-social:hover{border-color:var(--pts-accent);color:var(--pts-accent-ink)} .pt-home-shell .pts-social:hover{color:var(--pts-accent-ink);background:var(--pts-accent-soft); border-color:var(--pts-edge-35)} .pts-rail-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .pts-note{font-size:12px;color:var(--pts-muted)} .pts-facts{margin-top:14px;display:flex;flex-wrap:wrap;--pts-fact-basis:25%;background:var(--pts-surface); border:1px solid var(--pts-line);border-radius:var(--pts-radius);box-shadow:var(--pts-shadow);overflow:hidden} .pts-fact{display:flex;align-items:center;gap:11px;padding:15px 17px;border-right:1px solid var(--pts-line); flex:0 1 var(--pts-fact-basis);min-width:0} .pts-fact:last-child{border-right:0} /* 🔑 THE ARRANGEMENT IS THE FACT COUNT'S — the same rule the gallery obeys through data-pts-gal, and for the same reason: never an unfilled cell. The strip is a bordered panel with dividers, so a row sized for four holding three ends in a visibly empty quarter, which reads as a failed render rather than a layout. That is exactly the failure the locations tile was added to prevent for one-location accounts (see buildLocationFact) — but the tile only gets an account to FOUR facts when it has all four to state. An account whose booking page lists no team members has three, and measured before this it left a 280px void at ≥1141px and a 432px void on the second line at 921-1140px. The count comes from the template as data-pts-facts (m.facts.length), so a new fact needs no CSS. 🔑 These are deliberately kept at (0,2,0) — the LOWEST specificity that still beats `.pts-facts` (0,1,0) — because two other rules have to out-rank them and would otherwise need matching inflation: · the split designs run this strip ONE PER LINE in their narrow rail, and their (0,3,0) rule below must keep winning (it is already void-free, so a count basis must not drag it into a multi-up row); · the responsive blocks re-state the basis, and a media query adds NO specificity of its own. An earlier revision wrote these as `[data-pts-design]:not([data-pts-design^="split"]) …` — (0,5,0), which silently beat BOTH, holding a 3-up row all the way down and rendering 116px cells at 375px. */ .pts-facts[data-pts-facts="1"]{--pts-fact-basis:100%} .pts-facts[data-pts-facts="2"]{--pts-fact-basis:50%} .pts-facts[data-pts-facts="3"]{--pts-fact-basis:33.3333%} /* ⚠️ The fact glyph is a FONTELLO icon, not a unicode character — the four facts used to draw `≡ ✓ ♦ ◎`, which are four unrelated codepoints from whatever system font resolves them, so at one font-size they rendered at wildly different optical sizes (`≡` and `◷` looked half the size of `♦`/`◎`). One icon font = one set of metrics, the same fix `.pts-social` already uses on this page. The class comes from the view (`buildFacts`); `:before` must reset fontello's `width:1em` + `margin:0 .2em`, or the box's flex centring is thrown off by that side margin. No `font-weight` — the icon font has one weight. */ .pts-fact-icon{width:34px;height:34px;flex:0 0 auto;border-radius:8px;background:var(--pts-accent-soft); color:var(--pts-accent-ink);display:flex;align-items:center;justify-content:center;font-size:18px; line-height:1} .pts-fact-icon:before{margin:0;width:auto;line-height:1} .pts-fact-copy{min-width:0} .pts-fact-copy strong{display:block;font-size:13px} .pts-fact-copy span{display:block;margin-top:1px;color:var(--pts-muted);font-size:12px; font-weight: 300; letter-spacing: 0.2px;} .pts-fact-copy strong,.pts-fact-copy span{display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} /* ---------- in-page nav ---------- */ /* Wrapper around the in-page nav + main. A plain block everywhere except the split designs, where it is the content COLUMN of the flex shell — see those blocks. */ .pts-col-main{display:block} /* 🔑 THE HAIRLINE UNDER THE PILLS HAS TWO STATES, and which one shows says whether the bar is FLOATING or STUCK. At rest it is the ROW's rule — inset to the pill row's own measure, so it reads as the end of that row and lines up with the cards and section heads above it. Once the bar sticks under the header it becomes the BAR's rule, edge to edge: a stuck bar is chrome laid across the page, and a line that stops short of both edges makes it read as a floating panel with the page sliding past either side of it. ⚠️ The 1px is ALWAYS in the box (`border-bottom` stays, only its COLOR is transparent at rest) and the at-rest line is painted in the border's own place (`bottom:-1px`) — toggling the border in and out would change the bar's height by a pixel at the exact moment it sticks and nudge the whole page. ⚠️ The at-rest line is anchored to the BAR, not to .pts-nav-inner, even though it is the inner's width it draws: the split designs give the bar a fixed --pts-nav-h (56px) that the row's own content (58px) overflows, so an inner-anchored line sits 2px BELOW the bar's bottom edge and would jump 3px the moment the border took over. Its geometry comes from --pts-nav-line-l/-w, which bindNavScroll MEASURES off .pts-nav-inner and republishes on resize — a measurement, not a fourth restatement of `min(--pts-page, 100% - 36px)`: that expression is already stated in four places (base, the split block, the ≤920 split reset, the 24px-gutter block) and a copy here would drift out of step with whichever one a later edit touches. The fallbacks make the line the full bar until JS measures. */ .pts-nav{position:sticky;top:var(--pts-header-h);z-index:60;margin-top:18px; background:rgba(var(--pts-bg-rgb),.87);border-bottom:1px solid transparent; -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .pts-nav::after{content:"";position:absolute;bottom:-1px;height:1px;pointer-events:none; left:var(--pts-nav-line-l,0px);width:var(--pts-nav-line-w,100%);background:var(--pts-line)} .pts-nav.pts-stuck{border-bottom-color:var(--pts-line)} .pts-nav.pts-stuck::after{display:none} /* ⚠️ The pill row OVERFLOWS and its scrollbar is deliberately hidden, so it needs its own affordance. The row is `overflow-x:auto` with `scrollbar-width:none` (a visible bar under a sticky glass bar reads as a broken panel), which is fine while every pill fits — and it does at the 1120px page measure. The split designs give the column ~752px, and a business with all the sections (Services · Classes · Resources · About · Team · Gallery · Reviews · Location · Working Hours) needs ~797px: the last pill was clipped with NO way to reach it — no bar, no arrows, no JS, and a vertical wheel scrolls the page. So the two ends carry arrow buttons, shown only when there is something that way (pts-can-left / pts-can-right, toggled by bindNavScroll in bookingHomeDesignsView.js). The width/centring lives on .pts-nav-inner rather than the scroller itself, so the arrows can anchor to the ROW's ends: the scroller is the overflow box and must stay flush with them — an arrow anchored to .pts-nav instead would sit out in the page gutter in the five non-split designs, whose row is centred inside a wider bar. Move the width and the arrows go with it. */ .pts-nav-inner{position:relative;width:min(var(--pts-page),calc(100% - 36px));margin:auto;display:flex} .pts-nav-scroll{flex:1 1 auto;min-width:0;display:flex;gap:5px; overflow-x:auto;scrollbar-width:none;padding:9px 0;scroll-behavior:smooth; /* The fade is now per-side and OFF by default, driven by the same two classes as the arrows — the old unconditional right-edge fade washed out the final pill even when it was the last one and nothing lay beyond it. Both stops collapse to a hard edge at 0px, so an unfaded side is fully opaque. */ --pts-nav-fade-l:0px;--pts-nav-fade-r:0px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--pts-nav-fade-l), #000 calc(100% - var(--pts-nav-fade-r)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--pts-nav-fade-l), #000 calc(100% - var(--pts-nav-fade-r)),transparent 100%)} .pts-nav-scroll::-webkit-scrollbar{display:none} .pts-nav.pts-can-left .pts-nav-scroll{--pts-nav-fade-l:34px} .pts-nav.pts-can-right .pts-nav-scroll{--pts-nav-fade-r:34px} /* ⚠️ HIDDEN EVERYWHERE BY DEFAULT — the only rule that reveals them is in the >920px SPLIT block, and that narrowness is deliberate, not an oversight: · below 921px the row is swiped, and a touch scroll is its own affordance — arrows there would be chrome overlaying the pills for a gesture the visitor already has; · the five block designs get the full 1120px page measure, where the row does not overflow at all. Everywhere they are not shown the FADE still is (it rides the same two classes) — a soft edge reading "more this way" costs nothing and is exactly the hint a swipe needs. Pointer affordance only, hence aria-hidden + tabindex=-1: a keyboard user tabs the pills and the browser scrolls each into view on focus, so as tab stops these would be two dead stops per page. They overlay the scroller's ends, which is why they are absolute rather than flex items: as a flex item each would permanently steal 34px from the row, making the overflow they exist to solve worse. Each is drawn as a ROUND BUTTON on the accent tint — the same fill/ink/hairline as an active pill (.pts-nav-scroll a.pts-active) — so it reads as a control of this row rather than a glyph floating over the pills. It must stay a circle centred on the row (top:50% + translateY), NOT the old full-height strip: a stretched box with a fill would paint a tinted band down the whole bar. The fill is opaque by construction (--pts-accent-soft mixes the accent into the page ground, it is not a translucent wash), which is what lets a pill scroll cleanly behind it; the edge fade (widened to 64px wherever the arrows are actually shown — see the >920px split block) dissolves the pill well before it reaches the button, so the two read as a dissolve rather than a collision. The soft drop shadow is what says "this floats above the row": without it a tinted chip sitting flush against a pill label reads as two controls that have run into each other. */ .pts-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px; display:none;align-items:center;justify-content:center;padding:0; border:1px solid rgba(var(--pts-accent-rgb),.2);border-radius:999px; background:var(--pts-accent-soft);color:var(--pts-accent-ink); box-shadow:0 2px 6px rgba(24,24,27,.09); font-size:12px;line-height:1;cursor:pointer;z-index:2} .pts-nav-arrow:hover{background:var(--pts-accent-fill); border-color:rgba(var(--pts-accent-rgb),.34);color:var(--pts-accent-ink)} .pts-nav-arrow i:before{margin:0;width:auto;line-height:1} .pts-nav-prev{left:0} .pts-nav-next{right:0} .pts-nav-scroll a{flex:0 0 auto;padding:9px 13px;border:1px solid transparent;border-radius:999px; color:var(--pts-muted);font-size:13px;font-weight:800} .pts-nav-scroll a:hover,.pts-nav-scroll a.pts-active{color:var(--pts-accent-ink);background:var(--pts-accent-soft); border-color:rgba(var(--pts-accent-rgb),.2)} /* ---------- sections ---------- */ .pts-main{padding:26px 0 80px} .pts-section{margin-top:var(--pts-section);scroll-margin-top:148px} /* The page's first section starts flush under main's own padding. This used to be the job of a `.pts-section-anchor` utility, which collapsed the empty #pts-overview announcement section that stood here; both went with the announcement bar (see the template) — #pts-offerings is main's first child now. */ .pts-section:first-child{margin-top:0} .pts-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px} .pts-section-head h2{font-size:28px;line-height:1.12;margin:4px 0} .pts-section-head p{margin:0;color:var(--pts-muted);font-size:15px; font-weight: 300; letter-spacing: 0.2;} /* The head's action stays whole and stays on the right at every width — it is the shrink-proof half of the row (the text block beside it carries min-width:0 and wraps instead). */ .pts-section-head > .pts-link{flex:0 0 auto;white-space:nowrap} .pt-home-shell .pts-link{color:var(--pts-accent-ink);font-size:14px;font-weight:800} /* scroll-margin so an in-page pill lands the group below the sticky header, not under it. */ .pts-group{margin-top:30px;scroll-margin-top:148px} .pts-group:first-child{margin-top:0} /* Long-category preview: everything past the limit is in the DOM but hidden until that category's own button flips data-pts-collapsed (see applyPreviewLimit / bindInteractions). The attribute rides the LIST CONTAINER, not the group — the limit is per category, so each long category collapses on its own and a short one beside it is untouched. The container is the one box both layouts have in the categorised AND the flat unlabelled case, which is why the state lives there. Scoped to the collapsed state, so a list that never had overflow — or one already expanded — is untouched. */ /* ⚠️ Shell-prefixed (0,4,0) on purpose. A design that re-declares `display` on its cards — `[data-pts-design="directory"] .pts-tile{display:flex}` — matches at the same 0,3,0 as the unprefixed form and wins on source order, so `directory` kept rendering every item while still showing the button. */ /* ⚠️ `.pts-team` joins the same rule rather than getting one of its own: a long TEAM previews behind the identical control (see TEAM_PREVIEW_LIMIT / buildTeam), and a second hide rule is the kind of copy that drifts — `directory` re-declaring a card's `display` broke the catalogue's rule exactly once already, and a separate team rule would have had to be found and fixed a second time. */ .pt-home-shell .pts-tiles[data-pts-collapsed="true"] .pts-overflow, .pt-home-shell .pts-rows[data-pts-collapsed="true"] .pts-overflow, .pt-home-shell .pts-team[data-pts-collapsed="true"] .pts-overflow{display:none} .pt-home-shell .pts-cat-more{display:block;margin:18px auto 0;padding:11px 22px;font-size:14px; font-weight:600;color:var(--pts-accent-ink);background:var(--pts-surface);border:1px solid var(--pts-line); border-radius:999px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease} .pt-home-shell .pts-cat-more:hover{border-color:var(--pts-accent);box-shadow:var(--pts-shadow)} /* 🔑 THE HEAD'S BOTTOM MARGIN *IS* THE SPACE ABOVE THE FIRST CATEGORY, so it reads the SAME TOKEN that separates every later one. It was a literal 16px against `--pts-cat-gap`'s 24 (34 in directory), so a group's first category header sat visibly tighter than its siblings — measured 16px above TREATMENTS and 34px above ASSESSMENTS in one group — and the row of category "tabs" had no single rhythm to read. ⚠️ Re-point the TOKEN, never this value: stated as a literal the two drift apart again the moment a design tunes `--pts-cat-gap` (which `directory` does), and they must move together by construction. ⚠️ `.pts-cat:first-of-type{margin-top:0}` STAYS — the head supplies that space now, so the two are not additive, and the reset is still what a per-design `.pts-cat` margin would out-rank (see the token comment at the top of the file). This is also why the fix is NOT "delete the reset and let the margins collapse": collapsing takes the LARGER of the two, so it is only even while the token exceeds the head's own margin, and a design that tuned the token below it would silently get the old 16px back. The flat `.pts-subhead` branch (no `.pts-cat` involved) keeps its own rhythm — its 22px `margin-top` collapses with this one exactly as it did before. */ .pts-group-head{display:flex;justify-content:space-between;align-items:end;gap:18px; margin-bottom:var(--pts-cat-gap)} .pts-group-head h3{font-size:22px} .pts-group-head p{margin:3px 0 0;color:var(--pts-muted);font-size:14px; font-weight: 300; letter-spacing: 0.2px;} .pts-count{border:1px solid var(--pts-line);border-radius:999px;background:var(--pts-surface);padding:7px 11px; font-size:12px;color:var(--pts-muted);font-weight:800;white-space:nowrap} .pts-subhead{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; color:var(--pts-muted);margin:22px 0 12px} /* ---------- category-wise catalogue (emitted only where the view asks: categorisesGroups) ---------- */ /* The merchant's own categories, listed the way the classic mini-website's catalogue lists them: a colour dot, the name, its count, and a caret that opens/closes the items. A native
    /, so the marker is suppressed the same way the FAQ rows do it (list-style + the -webkit pseudo-element) and the state costs no JS. Kept on the SAME type as .pts-subhead — 13px/850/uppercase/.06em — because it replaces that label and must read at the same rank, not as a new heading level. Deliberately unfilled: the classic uses a plain ruled row, and a filled bar above a row of bordered cards reads as a second card. The hairline + caret is the affordance, as on the FAQ rows. */ .pts-cat{margin-top:var(--pts-cat-gap)} .pts-cat:first-of-type{margin-top:0} .pts-cat-head{display:flex;align-items:center;gap:10px;padding:0 0 11px;margin-bottom:var(--pts-cat-lead); border-bottom:1px solid var(--pts-line);cursor:pointer;list-style:none} .pts-cat-head::-webkit-details-marker{display:none} /* The dot is the PAGE ACCENT — the merchant's booking page theme — not the category's own `categoryColor`. This page themes everything off one colour (Book now, the active pill, today's hours row), so per-category dots from the `bg-type-*` palette read as a second, unrelated colour system imported from the dashboard: a blue dot above black buttons on an unthemed account, and a clash with the accent on a themed one. Deliberate deviation from the classic catalogue's `.color-ball`, which carries the category colour. Because nothing else paints this element there is no `bg-type-*` specificity race, so the fill lives on the element's own rule. */ .pts-cat-ball{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--pts-accent)} /* min-width:0 so a long category name WRAPS inside its share of the row rather than pushing the count and the caret off the end — the name is the only item here that may be arbitrarily long, and the other two must never break (a count split across lines, or a caret on its own line, reads as a broken row). */ .pts-cat-name{min-width:0;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; color:var(--pts-text)} .pts-cat-count{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--pts-muted);white-space:nowrap} .pts-cat-count::before{content:"·";margin-right:6px;opacity:.6} /* Fontello caret (never a character — see the icons note). The box states its own font-size and resets the font's 1em width + side margins so the glyph sits on the flex centre. `margin-left:auto` right-aligns it — the standard accordion affordance, at the far end of the row it toggles. The `margin-right` is the design's inset: flush against the end of the hairline the glyph read as a rule terminating the section rather than as a control, so it is pulled 20px inboard. Keep BOTH — dropping the auto margin packs the caret against the count, dropping the inset restores the flush edge. ⚠️ It does NOT flip on the open state: the chevron points DOWN in both states, by design. So there is no `.pts-cat[open]` transform and no transform transition to animate one — re-adding either brings the up-arrow back. What the caret marks here is "this row expands", not which way it currently is. */ .pts-cat-caret{flex:0 0 auto;margin-left:auto;margin-right:20px;font-size:13px;line-height:1; color:var(--pts-muted)} .pts-cat-caret::before{margin:0;width:auto} /* ---------- offering tiles / rows (column counts come from the design tokens) ---------- */ /* N-up lists are flex-wrap + a calculated basis. The basis lives in a custom property so per-design and responsive overrides can restore it by name (e.g. showcase's lead tile goes 100% then back). `0 1 basis` — never `1 1` — keeps a short last row at column width instead of stretching it, matching the old grid. */ .pts-tiles{display:flex;flex-wrap:wrap;gap:14px; --pts-tile-basis:calc((100% - (var(--pts-tiles) - 1) * 14px) / var(--pts-tiles))} .pts-tiles > .pts-tile{flex:0 1 var(--pts-tile-basis);min-width:0} .pts-rows{display:flex;flex-wrap:wrap;gap:14px; --pts-row-basis:calc((100% - (var(--pts-rows) - 1) * 14px) / var(--pts-rows))} .pts-rows > .pts-row{flex:0 1 var(--pts-row-basis);min-width:0} .pts-tile{position:relative;display:flex;flex-direction:column;background:var(--pts-surface); border:1px solid var(--pts-line);border-radius:var(--pts-radius-sm);padding:18px; --pts-tile-h:218px;height:var(--pts-tile-h); transition:box-shadow .2s ease,border-color .2s ease} /* Same hover as .pts-row (the classes layout): accent border + shadow, and NO transform. Tiles used to translateY(-3px), which reads as the card jumping — worse in a tiled row, where lifting one tile leaves a visible step against its neighbours, and worse still when the pointer lands near a tile's edge and the lift moves the card out from under it (hover flickers on/off). Border + shadow alone give the same affordance without moving anything. Keep the two layouts' hover identical. */ .pts-tile:hover{box-shadow:var(--pts-shadow); border-color:var(--pts-edge-30)} /* The initials badge: ONE type size across services, classes and resources. The tile icon used to carry no font-size at all — it inherited the shell's 15px at weight 900 while the class row's badge was 12px/850, so the same initials rendered visibly larger on a service card than on a class row. The BOXES still differ (40px in a tile, 58px in a row) because the layouts do; only the type is shared. */ .pts-tile-icon, .pts-row-badge{font-size:14px;font-weight:900} .pts-tile-icon{width:40px;height:40px;border-radius:12px;background:var(--pts-accent-soft);color:var(--pts-accent-ink); display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;flex:0 0 auto} .pts-tile-icon img{width:100%;height:100%;object-fit:cover} .pts-tile h4{font-size:16px;margin-bottom:5px} /* An offering's NAME is ONE LINE, ellipsised — services, classes and resources alike (the row's own h4 picks this up below). A merchant who types a sentence into the name field ("Boxing Fitness - improve their overall fitness, and work toward their personal health and wellness goals.") got a three-line heading that dwarfed its own description and stretched every card sharing its flex line to match. ⚠️ Both hosts already carry `min-width:0` (`.pts-tiles > .pts-tile`, and the row's text column) — without it a nowrap heading sets the flex item's min-content width and blows the card out of its column. */ .pts-tile h4, .pts-row h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 🔑 The full name is a `title` on the NAME, so the tooltip appears over the name and NOWHERE ELSE. That is a two-part problem, and this pair is the whole answer: · the heading is UNDER `.pts-tile-link` (an absolute overlay across the entire card), so the pointer never reaches it — hence `position:relative;z-index:2` to lift it above the overlay. Putting the title on the overlay instead does fire, but from anywhere in the card: over the price, the meta, the empty ground. That is what this replaced. · ⚠️ but the heading's LINE BOX is the full width of the card, so lifting the whole h4 would also steal the click from every empty pixel beside a short name — a dead spot on a card that is supposed to be one big link. So the h4 is lifted with `pointer-events:none` and only the inline `.pts-name` takes `pointer-events:auto`: the glyphs hover and click, the blank remainder of the line passes straight through to the overlay. `.pts-name` is an to the same URL for exactly that reason — raising it takes the click off the overlay, and the name is the most natural thing on the card to click (it also gets middle-click / open-in-new-tab for free). ⚠️ …and being an is precisely why it must state `font:inherit`. `newbookingpage.css` styles BARE TAGS and leaks into this page — `a{font-weight:400;font-size:16px;color:#1e1e1e}` — and the shell's `.pt-home-shell a` reset neutralises the COLOUR and the SIZE but not the WEIGHT, so wrapping the heading's text in an anchor silently dropped every service, class and resource name from 700 to 400 (the whole catalogue stopped being bold). The shorthand covers family/size/weight/style/line-height in one declaration — the same fix `.pt-home-shell button{font:inherit}` already makes for buttons — and `letter-spacing` is not part of it, so the tile's -.02em keeps inheriting from the heading. */ .pts-tile h4, .pts-row h4{position:relative;z-index:2;pointer-events:none} .pts-name{font:inherit;pointer-events:auto} .pts-tile p{font-size:13px;color:var(--pts-muted);margin:0 0 14px} /* Two-line fold on an offering's description, same doctrine as the review comment's: the clamp is CSS (so it is exact at any width, whatever the tile's column count) and markClampedTiles() adds the button only to the descriptions that ACTUALLY clip — a character count cannot decide that. Depth is a token because it is a per-design choice: spotlight's taller tile has always previewed three lines, and it used to clamp them with no way at all to read the rest. ⚠️ The button MUST be painted above `.pts-tile-link` — the whole tile is a link, laid over the card as an absolute overlay, so a fold button below it is not clickable at all: every Read More would start a booking instead of unfolding the text. `.pts-tile-cta` sits at z-index 1 for the mirror-image reason (it must NOT swallow the click), so this one goes above both. */ .pts-tile{--pts-desc-lines:1} .pts-tile-desc.pts-clamp{display:-webkit-box;-webkit-line-clamp:var(--pts-desc-lines); -webkit-box-orient:vertical;overflow:hidden} /* The paragraph's own bottom margin is the air before the tile's meta row; left in place with a button after it, it reads as a control detached from the text it folds — so the fold moves that spacing onto the button (markClampedTiles marks the paragraph `pts-folded` for exactly as long as a button is attached). Beats `.pts-tile p` (0,1,1) on class count, so no element qualifier is needed. */ .pts-tile-desc.pts-folded{margin-bottom:0} .pt-home-shell .pts-tile-more{position:relative;z-index:2;align-self:flex-start;display:inline-block; margin:5px 0 14px;padding:0;font-size:12px;font-weight:400;color:var(--pts-accent-ink); background:none;border:0;cursor:pointer} .pts-tile-meta{display:flex;flex-wrap:wrap;gap:7px 12px;color:var(--pts-muted);font-size:12px; margin-top:auto;padding-top:11px;border-top:1px solid var(--pts-line)} .pts-price{font-size:14px;font-weight:900;color:var(--pts-text);margin-left:auto} /* ⚠️ `margin-top:auto` is the BASE, 12px the special case — the two swap round when the meta footer is absent. .pts-tile-meta is what holds the tile's bottom edge (its own `margin-top:auto`), and it is not rendered at all when SHOW DURATION and SHOW PRICE are both off; without this the CTA rode up under the description and the "Book now" labels across a row stopped lining up. `directory` resets it to 0 at (0,3,0), which still out-ranks the adjacent-sibling rule. */ .pts-tile-cta{position:relative;z-index:1;color:var(--pts-accent-ink);font-size:12px;font-weight:800;margin-top:auto; pointer-events:none} .pts-tile-meta + .pts-tile-cta{margin-top:12px} .pts-tile-link{position:absolute;inset:0;border-radius:inherit} .pts-row{position:relative;display:flex;gap:15px;align-items:center; background:var(--pts-surface);border:1px solid var(--pts-line);border-radius:var(--pts-radius-sm);padding:16px; transition:box-shadow .2s ease,border-color .2s ease} .pts-row:hover{border-color:var(--pts-edge-30);box-shadow:var(--pts-shadow)} .pts-row > *{flex:0 0 auto} /* 🔑 The text column is `flex:1 1 0`, NOT `1 1 auto` — a ZERO basis is what keeps it BESIDE the badge. ⚠️ Flex breaks lines on an item's flex-basis, before it shrinks anything, and `auto` resolves to max-content — which for this column is the whole NAME on one line (`.pts-row h4` is `white-space:nowrap`) plus its description. The ≤470 block wraps the row on purpose (price + CTA drop onto their own indented lines), so with an `auto` basis a long name pushed the WHOLE text column below the badge while a short one stayed beside it: the layout changed shape from item to item, exactly the "misaligned" reading. A zero basis can never overflow the line, and since this is the only growable item its rendered width is unchanged at every width (measured identical 320-1240px). Same trap, same fix, as the split shell's content column and the identity card's social row. */ .pts-row > div:not(.pts-row-badge):not(.pts-row-price){flex:1 1 0;min-width:0} .pts-row-badge{width:58px;height:58px;border-radius:14px;background:var(--pts-accent-soft);color:var(--pts-accent-ink); display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;overflow:hidden} .pts-row-badge img{width:100%;height:100%;object-fit:cover} .pts-row h4{font-size:15px;margin-bottom:3px} .pts-row p{font-size:12px;color:var(--pts-muted);margin:0} /* A class row describes itself exactly like a service tile — the same `.pts-tile-desc.pts-clamp` paragraph, so it goes through the same measure, the same clamp and the same Read More button. Only the spacing is this layout's own, and all three rules are (0,3,0)/(0,2,0) on purpose: ⚠️ `--pts-desc-lines` is declared on `.pts-tile`, and an undeclared custom property makes `-webkit-line-clamp:var(--pts-desc-lines)` invalid at computed-value time — i.e. NO clamp at all, an unfolded wall of text in the row. It has to be stated here too. ⚠️ `.pts-tile-desc.pts-folded{margin-bottom:0}` is (0,2,0) and declared EARLIER in this file, so a bare `.pts-row .pts-tile-desc{margin-bottom}` (also 0,2,0) would win on source order and keep the air under a folded description — hence the explicit folded rule, and the button's own trim: its base `14px` bottom is the air before a COLUMN tile's meta row, which is far too much above this row's one-line meta. */ .pts-row{--pts-desc-lines:1;--pts-row-h:104px;height:var(--pts-row-h)} .pts-row .pts-tile-desc{font-size:13px;margin:0 0 5px} .pts-row .pts-tile-desc.pts-folded{margin-bottom:0} .pt-home-shell .pts-row .pts-tile-more{margin:2px 0 5px} .pts-tile.pts-expanded{height:auto;min-height:var(--pts-tile-h)} .pts-row.pts-expanded{height:auto;min-height:var(--pts-row-h)} .pts-desc-row{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0 0 14px} .pts-desc-row .pts-tile-desc{flex:0 1 auto;min-width:0;margin:0; font-weight: 300; letter-spacing: 0.2px;} .pt-home-shell .pts-desc-row .pts-tile-desc + .pts-tile-more{flex:0 0 auto;margin:0;white-space:nowrap} .pts-row .pts-desc-row{margin-bottom:5px} /* 🔑 EXPANDED, the button flows INLINE AFTER THE LAST WORD — the row stops being a flex line. `align-items:baseline` aligns each item's FIRST baseline, which is exactly right while the paragraph is one clamped line and wrong the moment it is not: an unfolded description left "Read Less" parked beside line ONE, mid-sentence, with the rest of the text running on underneath it (measured at the 1120px page measure: the button at y=102 against a last line at 143..158, i.e. two lines above the end of the text it closes, and up to 423px to the right of the words on its own line in `soft`). It read as a control belonging to the line it sat on rather than to the block it folds. A flex item cannot flow with text, so the expanded wrapper turns back into a plain block and the paragraph into an inline run — which puts the button in the SAME inline formatting context as the description and lands it after the final word, wrapping onto its own line only when it does not fit. ⚠️ The 8px is stated here because it comes from the wrapper's `gap` while the row is flex, and a `gap` does nothing in block layout — and `markClampedText` inserts the button with `$p.after()`, so there is no whitespace text node between them: without it the label welds onto the last word ("hRead Less"). ⚠️ Scoped to the CARD's `pts-expanded` (toggled by bindTextFolds on `.pts-tile, .pts-row`), never to the absence of `pts-clamp`: a review comment matches neither of those cards, and its own button is deliberately a line of its own. (0,4,0)/(0,5,0), which is what beats the flex rules above — both the paragraph's own `.pts-desc-row .pts-tile-desc` and the button's `.pt-home-shell … + .pts-tile-more`. */ .pts-tile.pts-expanded .pts-desc-row,.pts-row.pts-expanded .pts-desc-row{display:block} .pts-tile.pts-expanded .pts-desc-row .pts-tile-desc, .pts-row.pts-expanded .pts-desc-row .pts-tile-desc{display:inline} .pt-home-shell .pts-tile.pts-expanded .pts-desc-row .pts-tile-more, .pt-home-shell .pts-row.pts-expanded .pts-desc-row .pts-tile-more{margin-left:8px} .pts-row-price{text-align:right;font-size:13px;font-weight:900} .pts-row-price span{display:block;color:var(--pts-muted);font-size:11px;font-weight:400;margin-top:3px; letter-spacing: 0.2px;} /* Row CTA — the classes layout's equivalent of .pts-tile-cta, in its OWN column so adding it does not grow the row's height. `pointer-events:none` for the same reason as the tile's: the whole row is the link (.pts-tile-link covers it), so the label must not swallow the click. */ .pts-row-cta{position:relative;z-index:1;color:var(--pts-accent-ink);font-size:12px;font-weight:800; white-space:nowrap;pointer-events:none} /* ---------- about / team / reviews / locations / footer ---------- */ .pts-panel{background:var(--pts-surface);border:1px solid var(--pts-line);border-radius:var(--pts-radius);padding:25px} .pts-panel h2{font-size:28px;margin:7px 0 13px} /* ⚠️ pre-line, for the same reason a FAQ answer gets it: this is the merchant's own prose and the line breaks inside a paragraph are content. aboutParagraphs() splits on a run of breaks and leaves single ones in the text, which only a pre-line box can render — the page escapes what it prints, so a
    is not an option. It cannot affect indentation: the template emits the text as the

    's only child, already trimmed. */ .pts-panel p{font-size:15px;color:var(--pts-muted);margin:0 0 12px;white-space:pre-line; line-height: 1.6;letter-spacing: 0.2px; font-weight: 300;} .pts-detail-row{display:flex;gap:15px;padding:12px 0; border-bottom:1px solid var(--pts-line);font-size:13px} .pts-detail-row > strong{flex:0 0 112px} .pts-detail-row > span{flex:1 1 auto;min-width:0} .pts-detail-row:last-child{border-bottom:0} .pts-detail-row span{color:var(--pts-muted)} .pts-team{display:flex;flex-wrap:wrap;gap:14px; --pts-team-basis:calc((100% - (var(--pts-team) - 1) * 14px) / var(--pts-team))} .pts-team > .pts-team-card{flex:0 1 var(--pts-team-basis);min-width:0} /* 🔑 EVERY TEAM CARD IS THE SAME SIZE, AND SO IS EVERY CARD'S CONTENT — the same doctrine as `.pts-tile` / `.pts-row`, and it takes the same two parts. · A FIXED HEIGHT, not a `min-height` and not the flex line's own `stretch`: a wrapping flex line equalises the cards that SHARE it and nothing more, so with the merchant's longest name on line 1 the rows below it came out shorter (measured, 4-up: 184px against 161.5px — one name wrapping to two lines, i.e. exactly one 22.5px line of difference between one row of cards and the next). · A flex COLUMN, which is what lets the card's last item claim the free space instead of leaving a ragged edge INSIDE it (see `.pts-team-link` below). 🔑 `--pts-team-h` IS DERIVED FROM WHAT THE CARD ACTUALLY RENDERS, term by term, and it is the TALLEST the content can be — 16 padding + 84 avatar + a two-line name (45) + 3 + a one-line designation (18) + 16 padding, plus the 1px borders under `newbookingpage.css`'s universal border-box = 184. Nothing can exceed it: the name is clamped at two lines, the designation ellipsised at one, and the ≤470 block's smaller heading only makes the content shorter (measured 181px), so it is a ceiling everywhere and never clips. ⚠️ THE ONE TERM THAT IS NOT IN THAT SUM IS THE "View availability" LINK, because the template does not currently render it (it is commented out there, not deleted). It was worth 28px — the link's own 18px line plus the 10px of air above it — so RESTORING THE LINK MEANS PUTTING 28px BACK ON THIS TOKEN (212). Restoring it without that is not a cosmetic slip: the card has no `overflow`, so the link would simply hang out of the bottom of every card. The `.pts-team-link` rule below is kept for the same reason the markup is — so restoring it is one uncomment plus this one number. ⚠️ And the content stays TOP-aligned — no `justify-content:center`. With the link gone the spare space is real (a member with no designation has ~40px of it), and centring the block would split it above and below, which pushes that card's avatar DOWN relative to its neighbours': the avatars are the row's strongest horizontal line, and breaking their alignment reads far worse than the space under a short card. */ .pts-team-card{background:var(--pts-surface);border:1px solid var(--pts-line);border-radius:var(--pts-radius); padding:16px;text-align:center;display:flex;flex-direction:column; --pts-team-h:184px;height:var(--pts-team-h)} .pts-team-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center; /* Second stop was a hard-coded lavender (#ded7ef) — the one place the purple survived a theme change, so a teal page grew lilac team avatars. Derived from the accent at the same weight. */ background:linear-gradient(145deg,var(--pts-accent-soft),var(--pts-avatar-tint)); color:var(--pts-accent-ink);font-size:20px; font-weight:900;overflow:hidden} .pts-team-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* 15px on the tracking ladder (see the CONTENT TYPE SCALE block) — a person's name is a card title like any other, and at `normal` it read looser than the offering names in the section above it. */ .pts-team-card h3{font-size:16px;margin-bottom:3px} /* A member's name is capped at TWO lines. The card is a fixed-width column in a 4-up row, so a long name pushed the role and the "View availability" link down and — a flex line stretching to its tallest item — took every card beside it with it. Two lines rather than the catalogue's one because a person's name is commonly two words and this card is far narrower than a tile. ⚠️ This is a CLAMP, not the catalogue's `text-overflow` — that only ever ellipsises a SINGLE line, so it cannot express "two lines, then …". The clamp overflows on the HEIGHT axis instead of the width, which is why markClippedNames() tests both axes. The full name is the `title` of the inline `.pts-team-name` (kept only while the name is really clipped); nothing has to be lifted here — unlike a tile or a row, this card has no `.pts-tile-link` overlay painted over its heading. */ .pts-team-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 🔑 THE DESIGNATION IS ONE LINE, ELLIPSISED, AND ITS FULL TEXT IS THE HOVER — the NAME's treatment above, not the catalogue's Read More fold. Merchants write real prose into this field, so it has to be capped either way; what the button cost was a LINE OF THE CARD, given to the one member whose designation ran long — i.e. it re-created the very height difference the cap exists to remove, and parked a second control under a card whose actual action ("View availability") sits right below it. A designation is a LABEL: one line of it identifies the member, and the rest is a tooltip away. ⚠️ The

    is the CLIPPING BOX and the inline `.pts-team-role` carries the `title` — the same split as the h3 / `.pts-team-name` above, and the reason markClippedNames() measures the parent (an inline element reports clientWidth 0, so measuring the child would title every designation on the page). ⚠️ And the paragraph deliberately carries NEITHER `.pts-tile-desc` NOR `.pts-clamp`: those two classes ARE markClampedText()'s selector and its clipped test, so dropping them is what guarantees no Read More can ever be attached here — there is no second rule to keep in step. */ .pts-team-card p{font-size:12px;color:var(--pts-muted);margin:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ⚠️ DORMANT: the template does not currently render this link (commented out there, not deleted), so this rule is kept in step with that markup rather than deleted with it — and restoring the one means restoring the other PLUS the 28px it is worth on `--pts-team-h`, which is stated on the card's own rule above. Everything below is what it needs the moment it comes back: `margin-top:auto` is what pins the link to the CARD'S BOTTOM, so every link on a line sits on one row however the names above them wrapped. The 10px is `padding-top`, not the margin it replaced: an `auto` margin absorbs the card's free space, and the tallest card on a line has none to give, which would leave that one link flush against its designation. ⚠️ `align-self:center` is load-bearing on a flex-column card, not decoration — see above. (The `align-self:center` on `.pts-arrow` is a different element solving a different problem: the arrow inside THIS link.) */ .pt-home-shell .pts-team-link{display:inline-flex;align-self:center;margin-top:auto;padding-top:10px; color:var(--pts-accent-ink);font-size:12px;font-weight:800} /* ---------- gallery (the merchant's own photos, after the team) ---------- 🔑 THE ARRANGEMENT IS THE PHOTO COUNT'S, and it obeys three rules: AT MOST 6 PHOTOS (Constants.GALLERY_MAX_COUNT), AT MOST 2 ROWS, and NEVER AN EMPTY CELL. A fixed "lead + two-up column" mosaic broke the last one at every count the column could not fill — 4 photos put two beside each other and left an empty square next to the third, which reads as a failed upload rather than a layout. 1 → one featured photo, the full measure (1 row) 2 → two equal halves (1 row) 3 → FEATURED photo spanning both rows + 2 stacked beside it (2 rows, 50% / 50%) 4 → an equal 2 × 2 grid (2 rows) 5 → FEATURED photo spanning both rows + a 2 × 2 block beside it (2 rows, 50% / 2 × 25%) 6 → an equal 3 × 2 grid (2 rows) So an ODD count features its first photo — the arrangement is uneven, and something has to carry the extra weight — while an EVEN count is a grid of equals, where no photo is more important than another. That is the MOSAIC family, which stops at 6; from 7 to 12 the section is a CONTACT SHEET instead (see the block further down). The view groups the photos accordingly and hands the raw count over as `data-pts-gal`; the tokens below are re-pointed per count and EVERY rule reads a token, so a count is a token block and nothing else. 2 and 4 need no block at all: they are the defaults. ⚠️ A THIRTEENTH photo has no column count that divides it and nowhere to go but a fourth row, so the cap and these blocks move together — design the count here before raising the constant. ⚠️ FLEXBOX ONLY, like the rest of this file. Grid is the obvious tool for a mosaic and is exactly what must not be used here (BookingHomeDesignsFlexLayoutTest fails on any Grid property; see the header comment). A flex line only puts items SIDE BY SIDE, so the column beside a featured photo has to be a real box — .pts-gallery-rest — with its own wrapping line. That box is the only structural reason the template emits two containers. Every cell is the same 3:2 the editor crops to, so a portrait upload cannot break the arrangement; object-fit:cover absorbs whatever ratio actually arrives (an older upload, or an API-written row). That shared ratio is what the widths are SOLVED against: a column of k photos of width C stands k·C/1.5 + (k−1)·g tall, so a featured photo is pinned to whatever makes it exactly that tall — otherwise the shorter side of the row leaves the very gap this is about. */ /* ⚠️ justify-content, NOT align-items (which would stop a featured photo spanning its two rows). It is a no-op for every arrangement whose lines are full — their cells sum to exactly 100% — and exists for the two PRIME contact-sheet counts, 7 and 11, where no column count divides the photos and one line is always short. A short line pushed against the left edge reads as a failed upload, which is the very thing this arrangement set exists to prevent; centred, it reads as the end of a sheet. It also covers the counts that become short-lined in the ≤920 collapse, where 4-and-5-across drop to thirds. */ .pts-gallery{display:flex;flex-wrap:wrap;gap:var(--pts-gal-gap);justify-content:center; --pts-gal-gap:14px; --pts-gal-ar:3/2; /* DEFAULTS = the even counts 2 and 4: equal halves, so 2 is one row and 4 wraps into 2 × 2. Note --pts-gal-item is read inside .pts-gallery-rest, where 100% is the COLUMN's width, so the same "half" token means half the column there. Everything is 0 1 — never 1 1: a growable cell stretches to the full width the moment it is alone on a line, and a growable cell on the SHORT line of a prime count would swell to fill the width the missing photo left, which is exactly the distortion the centring above replaces. */ --pts-gal-half:calc((100% - var(--pts-gal-gap)) / 2); --pts-gal-third:calc((100% - var(--pts-gal-gap) * 2) / 3); /* The contact-sheet columns (7-12). Each is an EXACT division of the line — n cells plus (n−1) gaps sum to precisely 100% — which is what lets a full line sit flush while justify-content only ever moves a SHORT one (see below). */ --pts-gal-quarter:calc((100% - var(--pts-gal-gap) * 3) / 4); --pts-gal-fifth:calc((100% - var(--pts-gal-gap) * 4) / 5); --pts-gal-lead:var(--pts-gal-half); --pts-gal-rest:var(--pts-gal-half); --pts-gal-item:var(--pts-gal-half); --pts-gal-tile:var(--pts-gal-half)} /* 3 — the featured photo SPANNING BOTH ROWS, at TWO THIRDS of the measure, with the other two stacked full-width in the third beside it. Solving L/1.5 = 2C/1.5 + g against L + C + g = 100% gives C = (100% − 2.5g)/3, and that solution is why the split is 2:1 rather than 50/50: at half the measure the two stacked photos are 3:2 each, so the column stands ~740px tall at the page measure and the featured photo has to stretch into a tall portrait to match it — a gallery taller than the viewport, with cells bigger than the section above it. Widening the featured photo shortens EVERYTHING (at 1120px: ~496px tall instead of ~741, stacked cells 241px instead of 364) and lets every cell keep the editor's 3:2 crop, so nothing is stretched at all. ⚠️ Do NOT "restore" 50/50 without re-solving the height. */ .pts-gallery[data-pts-gal="3"]{ --pts-gal-rest:calc((100% - var(--pts-gal-gap) * 2.5) / 3); --pts-gal-lead:calc(100% - var(--pts-gal-gap) - var(--pts-gal-rest)); --pts-gal-item:100%} /* 5 — the featured photo at ~50% beside two columns of ~25%, again spanning both rows. Here the span falls out of the arithmetic instead of needing a stretch: the column's photos are (R − g)/2 wide, so the column stands 2(R − g)/3 + g tall, and R = (100% − 1.5g)/2 makes the featured photo exactly that tall while still 3:2. That leaves it a HAIR wider than half — splitting the line dead down the middle leaves it ~5px short of the column, and a small gap is still a gap. */ .pts-gallery[data-pts-gal="5"]{ --pts-gal-rest:calc((100% - var(--pts-gal-gap) * 1.5) / 2); --pts-gal-lead:calc(100% - var(--pts-gal-gap) - var(--pts-gal-rest))} /* 4 — an equal 2 × 2 grid, and the ONE arrangement whose cells are the full half-measure repeated over TWO rows, so its natural 3:2 height doubles: ~740px at the page measure, against ~490 for both of the other two-row counts and the 520px cap a single photo gets. A cell here is therefore shown at 2:1 (~560px for the block) — object-fit:cover takes the extra crop off the 3:2 the editor produced. The ratio is per-count rather than a px `max-height` deliberately: a fixed cap would crop a wide viewport harder than a narrow one, while a ratio crops every width identically. */ .pts-gallery[data-pts-gal="4"]{--pts-gal-ar:2/1} /* 6 — an equal 3 × 2 grid: thirds all round, first cell included. Its cells are only a third wide, so 3:2 already lands the block at ~490 and it needs no such adjustment. */ .pts-gallery[data-pts-gal="6"]{--pts-gal-lead:var(--pts-gal-third);--pts-gal-tile:var(--pts-gal-third)} /* ---- 7 to 12: a CONTACT SHEET, not a mosaic ---------------------------------------------------------- Above six photos NOTHING is featured. Two reasons, and the first is the honest one: with a dozen pictures no single one is the hero — the section has become a sheet of the place rather than a composition about one view of it. The second is arithmetic: every featured shape here is a photo pinned to the exact height of the column beside it, and a column of 6, 8 or 10 stacked photos stands three to five times the height of the picture it would have to match. So each count is an equal grid whose COLUMN COUNT is chosen so the last line comes out full wherever the count allows: 7 → 4 across, 2 rows (4 + 3 — prime, short last line CENTRED) 8 → 4 across, 2 rows (4 + 4) 9 → 3 across, 3 rows (3 + 3 + 3, cells flattened to 2:1) 10 → 5 across, 2 rows (5 + 5) 11 → 4 across, 3 rows (4 + 4 + 3 — prime, short last line CENTRED) 12 → 4 across, 3 rows (4 + 4 + 4) Measured at the 1120px page measure: heights 373 · 373 · 574 · 298 · 567 · 567 against the mosaic's own 520 · 369 · 496 · 567 · 371 · 499 (re-measured in the same pass — the figures recorded elsewhere in this file read ~5px lower, so compare within one basis, not across the two). One band either way, so the height doctrine holds. Cells are 270 · 270 · 364 · 213 · 270 · 270 wide, and the narrowest cell the set ever shows is 211px, just above the ≤920 step; no width overflows the page. ⚠️ 9 needs the COUNT-4 TREATMENT and for the same reason. A third of the measure is 364px, so a 3:2 cell is 243px tall and three rows stand ~756px — half a viewport taller than anything else in the set. At 2:1 the block comes back to ~574px while its cells stay 364px WIDE, which is a better photograph than the 270px a 4-across row would give it; object-fit:cover takes the extra crop off the editor's 3:2. A per-count RATIO, never a px max-height (which crops a wide viewport harder than a narrow one). ⚠️ 10 is FIVE across rather than 4 + 4 + 2 deliberately: five fills both of its lines exactly, and the two-row block (~298px) is shorter than the three-row one (~567px) it would otherwise stand. It is also the narrowest cell in the set, so it is the one count that gives that up EARLY — at ≤1140px it takes quarters like its neighbours (see that block); by 921px five across is 166px. ⚠️ At the full measure only 7 and 11 are short-lined, because only they are prime. The narrow steps make short lines of other counts too, and the centring that handles all of them lives on .pts-gallery. */ .pts-gallery[data-pts-gal="7"],.pts-gallery[data-pts-gal="8"], .pts-gallery[data-pts-gal="11"],.pts-gallery[data-pts-gal="12"]{ --pts-gal-lead:var(--pts-gal-quarter);--pts-gal-tile:var(--pts-gal-quarter)} .pts-gallery[data-pts-gal="9"]{ --pts-gal-lead:var(--pts-gal-third);--pts-gal-tile:var(--pts-gal-third);--pts-gal-ar:2/1} .pts-gallery[data-pts-gal="10"]{ --pts-gal-lead:var(--pts-gal-fifth);--pts-gal-tile:var(--pts-gal-fifth)} .pts-gallery-lead{flex:0 1 var(--pts-gal-lead);min-width:0;margin:0} .pts-gallery-rest{flex:0 1 var(--pts-gal-rest);min-width:0; display:flex;flex-wrap:wrap;gap:var(--pts-gal-gap);align-content:flex-start} .pts-gallery-item{flex:0 1 var(--pts-gal-item);min-width:0;margin:0} /* The even counts' remaining cells. Siblings of the lead, not children of .pts-gallery-rest, precisely because nothing is featured: every cell is the same size, the first one included. */ .pts-gallery-tile{flex:0 1 var(--pts-gal-tile);min-width:0;margin:0} /* One photo: it is alone on the line, so it takes the whole measure rather than sitting in a half-width box beside nothing — but capped, since a full-measure 3:2 is 746px, a whole viewport of one picture. */ .pts-gallery-lead:only-child{flex-basis:100%;max-height:520px} .pts-gallery figure{position:relative;overflow:hidden;border-radius:var(--pts-radius); background:var(--pts-surface-2);border:1px solid var(--pts-line);aspect-ratio:var(--pts-gal-ar)} .pts-gallery img{width:100%;height:100%;object-fit:cover;display:block} /* The caption sits ON the photo, so it needs its own ground: a scrim, not just white text, or a label over a pale wall is unreadable. Fixed white/black — this is text over an arbitrary photograph, not a themed surface, so it must not follow --pts-accent-on or the page's text tokens. */ .pts-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px; color:#fff;font-size:13px;font-weight:800;line-height:1.35; background:linear-gradient(180deg,rgba(9,9,12,0),rgba(9,9,12,.72)); text-shadow:0 1px 2px rgba(0,0,0,.35)} /* A cell's hit area: a real