/* ============================================================ SQUARE SALON THEME (client-specific — Las Vegas) ------------------------------------------------------------ Las Vegas. Every Square Salon brand value lives here. The reusable components in ../lib/ read only the token contract. Direction: high-fashion editorial meets contemporary gallery. Rich black and warm bone, hairline structure, a muted champagne metal used sparingly, and a professional ten-step colour-level chart as the one ornamental device. No yellow gold, no marble, no gradients, no glow, no rounded cards. Contrast: every pairing below was measured with real WCAG luminance maths — 26/26 pass at AA. See docs/ACCESSIBILITY.md. ============================================================ */ :root { /* ---- 1. COLOR ---- */ --c-paper: #ffffff; /* clean white */ --c-bone: #f0ece3; /* warm bone */ --c-smoke: #e2e0da; /* soft smoke */ --c-ink: #0e0d0b; /* rich black, warm-shifted 19.4:1 */ --c-ink-2: #3a3630; /* secondary text 12.0:1 */ --c-ink-3: #635e53; /* muted text 6.5:1 */ --c-metal: #8f7850; /* champagne, DECORATIVE 4.4:1 */ --c-metal-text: #6f5c3c; /* champagne, text-safe 6.4:1 */ --c-ink-ground: #0e0d0b; --c-on-ink: #f0ece3; /* bone on black 16.5:1 */ --c-on-ink-2: #c6c0b4; /* 10.7:1 */ --c-on-ink-3: #9b9488; /* 6.5:1 */ --c-metal-on-ink: #c0a878; /* 8.4:1 */ --c-line: rgba(14, 13, 11, 0.14); --c-line-strong: rgba(14, 13, 11, 0.32); --c-line-on-ink: rgba(240, 236, 227, 0.20); --c-focus: #0a58ca; /* Colourist level chart — cream through espresso. The one ornamental motif. Deliberately pale at the top: it is a real level scale, not a decorative ramp, so swatches 1-4 are exempt from the 3:1 floor and the strip carries a hairline border to define its edge. */ --level-1: #f3ead9; --level-2: #e6d3b2; --level-3: #d8bb8d; --level-4: #c6a06a; --level-5: #b08553; --level-6: #946a41; --level-7: #745032; --level-8: #543926; --level-9: #38251a; --level-10: #1c1310; /* ---- 2. TYPOGRAPHY ---- Libre Bodoni — a true didone for the fashion-editorial voice. Archivo — a squared neo-grotesque for architectural precision (and a quiet nod to the name). Both variable, both loaded from Google Fonts in the page head. */ --font-display: 'Libre Bodoni', Georgia, 'Times New Roman', serif; --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Square runs its display type tighter than the neutral default. */ --tr-tight: -0.025em; --tr-label: 0.18em; } /* ------------------------------------------------------------ Hero photography. Set as direct rules, not tokens: a relative url() inside a CSS variable resolves against lib/components.css (where the variable is consumed), not against this file. ------------------------------------------------------------ */ .hero-media picture, .hero-media img { object-position: 62% 42%; } /* Scrim retuned for a low-key hero. The stock scrim in lib/ is built for a bright, high-key photograph — over this near-black frame it crushed the colour melt to flat black. Weakening the vertical pass (no type sits at the top on desktop) and steepening the horizontal one reveals ~3x more of the photograph AND raises worst-case type contrast, because the copy column now sits over a darker ground than before. Measured worst case over the copy column, brightest pixel: --c-on-ink #f4f3f1 15.6:1 (was 14.6) --c-on-ink-3 #9d9c99 6.3:1 (was 5.9) <- binding case, rail labels Both clear AA. Re-measure if the photograph is replaced. */ /* Mobile: the band carries no type — copy sits on solid ink beneath it — so the scrim only needs to blend the photograph's foot into that ink. This base rule must precede the desktop block: same specificity, so source order decides the cascade. */ .hero-media::after { background: linear-gradient(to top, rgba(14,13,11,0.85) 0%, rgba(14,13,11,0.10) 45%, rgba(14,13,11,0.06) 100%); } @media (min-width: 768px) { .hero-media::after { background: linear-gradient(to right, rgba(14,13,11,0.96) 0%, rgba(14,13,11,0.93) 46%, rgba(14,13,11,0.26) 74%, rgba(14,13,11,0) 100%), linear-gradient(to top, rgba(14,13,11,0.74) 0%, rgba(14,13,11,0.02) 42%, rgba(14,13,11,0.14) 100%); } } /* ------------------------------------------------------------ WORDMARK — Square runs its logo larger than the neutral default. With the hero kicker and display headline gone, the logo is what carries the brand, so it is scaled up ~20% at every width: 30 -> 36px below 1024, 40 -> 46-48px above it. Below 1024 the height is flat, as the stock 30px was: a vw-scaled floor dropped it to +13% on a 320px phone, which is under the intended step-up for no benefit — at 320px the mark is 100px wide and still clears the menu button by ~137px. Above 1024 it stays fluid, clamped at both ends: the ceiling keeps it inside --header-h (72px / 88px), which is what stops it colliding with the nav and the Book button, and the floor holds the increase at 1024 itself, the tightest width the nav has to fit in. width:auto throughout — the image is never scaled on one axis. ------------------------------------------------------------ */ .wordmark img { height: 36px; } @media (min-width: 1024px) { .wordmark img { height: clamp(46px, 3.75vw, 48px); } } /* ------------------------------------------------------------ HERO — a three-line display headline on the scrimmed left side. Only the hero is touched; every other section keeps the stock rhythm from lib/components.css. HEIGHT. 86svh, capped at 880px so it does not become a void on a tall desktop monitor. Between the stock 92svh and the 68svh this carried while the hero was a single sentence. SIZE. Not the stock --t-5xl (52 -> 128px): that is built for two or three words, and "Cutting with precision." at 128px is ~1500px of line — it would run off the scrim and across the hair. This clamp is sized from the longest line instead, so all three clear the photograph's dark side at every width: 375px -> 30px (line ~310px inside a 335px column) 768px -> 37px (the binding case: the photograph is full-bleed here and the hair falls nearest the middle, so the longest line has to stop short of it) 1440px -> 58px (line ~570px, ends well before the hair) LEADING. 1.06 — tight enough that the three lines read as one block, loose enough that Bodoni's ascenders and descenders do not collide between "intention." and "Cutting". ------------------------------------------------------------ */ @media (min-width: 768px) { .hero { min-height: min(86svh, 880px); padding-top: 128px; } } .hero__body { padding-bottom: var(--s-8); } .hero__eyebrow { margin-bottom: var(--s-5); } .hero__title { font-size: clamp(1.875rem, 0.8rem + 3.2vw, 3.625rem); line-height: 1.06; letter-spacing: var(--tr-tight); color: var(--c-on-ink); } /* Each sentence is its own line by construction. lib/ already blocks the .italic; the spans need the same so the rag cannot change with the container width. */ .hero__line { display: block; } /* "Uniquely yours." — italic AND champagne, the theme's text-safe accent on dark (#c0a878, 8.4:1 on ink). It clears AA here where the .kicker's darker champagne could not, and this sits on the deepest part of the scrim; the same token already carries the privacy link over the same ground. */ .hero__line--accent { color: var(--c-metal-on-ink); } .hero__cta { margin-top: var(--s-8); } /* Quieter than stock, as a footnote to the buttons rather than a third voice in the stack: one step down in tone and a shorter measure. Held at --c-on-ink-2 (10.7:1) rather than dropped to -3, because on desktop this sits over photography — see the note in lib/components.css. The quiet comes from width and rhythm here, not from taking contrast out of small text. */ .hero__note { margin-top: var(--s-6); font-size: var(--t-2xs); line-height: var(--lh-normal); max-width: 44ch; } /* Quiet architectural ground behind the philosophy section. */ .philosophy::before { background-image: url('assets/editorial/plaster-1600.jpg'); } /* ------------------------------------------------------------ STAFF ENTRANCE — Square wants the team's way in easier to spot than the neutral default, which inherits .footer-bottom's 11px micro-label size and normal weight. +25% off that inherited size, expressed against the token so it tracks the type scale rather than freezing at a pixel value: 11 -> 13.75px. The weight is a real 700 — Archivo's variable range is requested as 300..700 in every page head for this, so the browser never has to synthesise the bold and smear the strokes. Colour and hover behaviour stay as lib/ defines them. ------------------------------------------------------------ */ .footer-staff { font-size: calc(var(--t-3xs) * 1.25); font-weight: 700; } /* ============================================================ RELEASE SWITCH — e-commerce ------------------------------------------------------------ Release 1 ships without the shop. `data-shop="off"` on (see the comment at the top of index.html) takes every tagged element off the page: the Square Edit section, the three Shop links, the bag button, the bag drawer and its overlay. display:none, not visibility or opacity — the elements leave the accessibility tree too, so a screen reader never reaches a Shop link that goes nowhere. A stylesheet is render-blocking, so this applies before first paint and nothing flashes. Release 2: set data-shop="on". Nothing here changes. ============================================================ */ [data-shop='off'] [data-shop-only] { display: none; }