/* ============================================================================= MASTER personalcare-barber-cutsandbruises-static, concept preview by PXLNorth. Recreated from templates/blueprints/personalcare/barber-cutsandbruises (cutsandbruisesbarbershop.com, Stoke Newington, captured 2026-08-09) and built first for The Edge Barber Shop, Nanaimo (the source build, runs/edgebarbershop-barber.test). What the blueprint gives and this keeps: an identity-led black hero (the shop's own name or mark, where it is, how to get in the chair), a transparent price MENU with leaders instead of cards, the work as proof, a thin-ruled contact card with the week of hours, and one accent on a monochrome base. What it fixes: a real phone layout, the work as photographs on the page instead of an embed, and a map beside the card. VOICES (data-voice on , chosen by fill-static from their own material): chair the default. Oswald 500/600/700 capitals over Work Sans: a shop sign and a price board. Their photograph takes the right half. heritage a founding year before 1980. Playfair Display 700/800/900 over Source Sans 3: an old shop's lettering. The name centred between rules, their photograph in a window, the menu one centred column. emblem a trusted logo and few photographs. Antonio 600/700 (a condensed sign face) over Public Sans. Their real mark at hero scale, as the blueprint sets its own, with round buttons. Never Fraunces. Every font weight painted below is requested by its voice's Google Fonts href (faux-bold). COLOUR (paletteMode pro, site-first, signalPalette). The blueprint's one accent on black and white: --night / --night-2 the black ground (masthead, hero, the work band, the inverse bands, footer), derived from their brand hue; --paper / --paper-2 the light ground of the menu and the type bands; --accent their colour as their own page paints it, a FILL with --accent-ink on it; --accent-on-night is the same hue lifted to 4.5:1 on the black ground (the h1 accent word, the prices and links on black). Filled buttons are --accent everywhere (round 2: one action colour). ROUND 2 VOICE STRUCTURE (the cross-page read: "one template recoloured"): heritage sets its masthead, hero and footer on PAPER and its reviews as quotations between rules; emblem drops the mark from the bar (the mark is the hero); chair keeps the blueprint's black. ========================================================================= */ :root { --ink: #241e19; --ink-2: #4b423a; --ink-3: #70675f; --brand: #8f5828; --brand-deep: #673f1d; --canvas: #ffffff; --paper: #fdfdfc; --paper-2: #F1EFEE; --line: #e5e1de; --night: color-mix(in srgb, #1B1714 45%, #0c0c0c); --night-2: color-mix(in srgb, #312B25 55%, #171717); --footer: color-mix(in srgb, #1E1A17 45%, #0c0c0c); --accent: #8F5828; --accent-ink: #FFFFFF; --accent-on-night: #E6C4A7; --on-night: #ffffff; --on-night-2: rgba(255, 255, 255, .78); --on-night-line: rgba(255, 255, 255, .2); --display: "Oswald", "Arial Narrow", system-ui, sans-serif; --sans: "Work Sans", "Segoe UI", system-ui, sans-serif; --wrap: 1180px; --pad: clamp(16px, 4vw, 40px); --band: clamp(60px, 7vw, 104px); --radius: 4px; } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); } img { display: block; max-width: 100%; } picture { display: block; } a { color: inherit; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 14px; } .skip:focus { left: 8px; } :focus-visible { outline: 3px solid var(--accent-on-night); outline-offset: 3px; } [id] { scroll-margin-top: 20px; } .wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; } .display { font: 600 clamp(36px, 4.6vw, 60px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; } .eyebrow { font: 600 13px/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brand); } .band-head { text-align: center; margin-bottom: clamp(32px, 4.5vw, 56px); } .band-head .display { margin-top: 10px; } .band-head .display::after { content: ""; display: block; width: 44px; height: 3px; margin: 18px auto 0; background: var(--accent); } .band-lede { margin: 16px auto 0; max-width: 620px; color: var(--ink-2); font-size: 17px; } [data-band-as="inverse"] .band-lede { color: var(--on-night-2); } [data-band-as="inverse"] .eyebrow { color: var(--accent-on-night); } [data-band-as="inverse"] .band-head .display::after { background: var(--accent-on-night); } /* Round 2 (strict readers: headings switched between centred and left): every band head is centred. */ .band-head--row { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--radius); font: 600 15px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn-sm { min-height: 42px; padding: 0 16px; font-size: 13px; } .btn-accent { background: var(--accent); color: var(--accent-ink); } /* Round 2 (three readers: two filled-button colours on one page): ONE filled action, their colour with its own ink, on every ground. --accent-on-night stays for text on black only. */ .btn-accent:hover { filter: brightness(1.12); } .btn-line { border-color: var(--on-night-line); color: var(--on-night); } .btn-line:hover { border-color: var(--on-night); } .btn-ghost { border-color: var(--on-night); color: var(--on-night); } .btn-ghost:hover { background: var(--on-night); color: var(--night); } /* ------------------------------------------------------------------ masthead */ .masthead { position: relative; z-index: 10; background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--on-night-line); } .mh-row { display: flex; align-items: center; gap: 28px; min-height: 76px; } .mh-brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; } .mh-word { font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .mh-logo { max-height: 52px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; } .mh-logo-plate { display: inline-flex; align-items: center; min-width: 0; } .mh-logo-plate--light { background: var(--paper); padding: 6px 10px; border-radius: var(--radius); } .mh-nav { margin-left: auto; } .mh-nav ul { display: flex; gap: 30px; } .mh-nav li:empty { display: none; } .mh-nav a { font: 500 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--on-night-2); white-space: nowrap; } .mh-nav a:hover { color: var(--on-night); } .mh-actions { display: flex; align-items: center; gap: 10px; } .mh-call-label { white-space: nowrap; } .mh-book-short { display: none; } [data-voice="heritage"] .mh-row { justify-content: space-between; } [data-voice="heritage"] .mh-brand { order: 2; } [data-voice="heritage"] .mh-nav { order: 1; margin-left: 0; } [data-voice="heritage"] .mh-actions { order: 3; } [data-voice="heritage"] .mh-word { font-weight: 800; letter-spacing: .04em; text-transform: none; font-size: 26px; } [data-voice="emblem"] .mh-nav { margin-left: 0; margin-right: auto; } /* emblem: the mark is the hero, so the bar does not repeat it (round 2: "the brand shows three times") */ [data-voice="emblem"] .mh-brand { display: none; } /* heritage: an old shop's paper sign, not the black bar (round 2 cross read: "every page a near-black canvas") */ [data-voice="heritage"] .masthead { background: var(--paper); color: var(--ink); border-bottom: 4px double var(--ink); } [data-voice="heritage"] .mh-nav a { color: var(--ink-2); } [data-voice="heritage"] .mh-nav a:hover { color: var(--ink); } [data-voice="heritage"] .btn-line { border-color: var(--line); color: var(--ink); } [data-voice="heritage"] .btn-line:hover { border-color: var(--ink); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; background: var(--night); color: var(--on-night); } .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; } .hero-main { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; } .hero-place { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--on-night-2); } .hero-place .ico { color: var(--accent-on-night); } .hero-title { margin-top: 22px; font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: .01em; } .hero-title > span { display: block; } .h1-lead { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: .34em; color: var(--on-night-2); margin-bottom: 8px; } .h1-accent { font-size: clamp(76px, 10.5vw, 158px); color: var(--accent-on-night); } .h1-tail { font-size: clamp(30px, 3.9vw, 56px); font-weight: 600; letter-spacing: .12em; margin-top: 10px; } .hero-sub { margin-top: 26px; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--on-night-2); } .hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } .hero-policy { margin-top: 14px; font-size: 14px; color: var(--on-night-2); } .hero-policy a { text-underline-offset: 3px; } .hero-facts { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--on-night-line); display: grid; gap: 10px; font-size: 15px; color: var(--on-night-2); } .hero-facts li { display: flex; align-items: center; gap: 10px; } .hero-facts .ico { color: var(--accent-on-night); } .hero-facts a { text-decoration: none; border-bottom: 1px solid var(--on-night-line); } .hero-facts a:hover { border-color: var(--on-night); } [data-hours-today][data-state="open"] { color: var(--on-night); font-weight: 600; } .hero-photo { margin: 0; } .hero-photo picture { height: 100%; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; } /* split: their frame takes the right half, edge to edge; the copy column runs the band's full height */ .hero--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 760px; } .hero--split .hero-photo { grid-column: 2; grid-row: 1; position: relative; } .hero--split .hero-photo img { position: absolute; inset: 0; object-position: 50% 55%; } .hero--split .hero-copy { grid-column: 1; grid-row: 1; justify-content: center; padding: 84px clamp(28px, 4vw, 64px) 88px max(var(--pad), (100vw - var(--wrap)) / 2); } /* window: their frame sits inside the band beside the name */ /* round 2 (strict readers: "a small framed box floating in the right column, dead space under it"): the frame runs the copy column's full height */ .hero--window { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; gap: clamp(32px, 5vw, 72px); padding: 72px max(var(--pad), (100vw - var(--wrap)) / 2) 80px; } .hero--window .hero-photo { grid-column: 2; grid-row: 1; position: relative; min-height: 440px; border: 1px solid var(--on-night-line); } .hero--window .hero-photo img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-position: 50% 40%; } .hero--window .hero-copy { grid-column: 1; grid-row: 1; } /* type: no frame, the name alone on the black ground */ .hero--type { padding: 96px max(var(--pad), (100vw - var(--wrap)) / 2) 104px; } .hero--type .hero-copy, .hero--type .hero-main { align-items: center; text-align: center; } .hero--type .hero-sub { margin-inline: auto; } .hero--type .hero-actions { justify-content: center; } /* heritage: the name centred between rules, a serif lockup */ [data-voice="heritage"] .hero-title { text-transform: none; letter-spacing: 0; line-height: .95; } [data-voice="heritage"] .h1-lead { font-size: clamp(30px, 3vw, 44px); font-weight: 700; letter-spacing: .02em; color: var(--on-night); } [data-voice="heritage"] .h1-accent { font-size: clamp(72px, 9vw, 136px); font-weight: 900; font-style: italic; } [data-voice="heritage"] .h1-tail { font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .hero-since { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; font: 600 14px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-on-night); } .hero-since::before, .hero-since::after { content: ""; width: 36px; height: 1px; background: currentColor; } /* heritage hero on paper: their name in ink, the accent word in the text-safe brand */ [data-voice="heritage"] .hero { background: var(--paper-2); color: var(--ink); } [data-voice="heritage"] .hero-place, [data-voice="heritage"] .hero-sub, [data-voice="heritage"] .hero-policy, [data-voice="heritage"] .hero-facts { color: var(--ink-2); } [data-voice="heritage"] .hero-place .ico, [data-voice="heritage"] .hero-facts .ico { color: var(--brand); } [data-voice="heritage"] .h1-lead, [data-voice="heritage"] .h1-tail { color: var(--ink); } [data-voice="heritage"] .h1-accent { color: var(--brand-deep); } [data-voice="heritage"] .hero-since { color: var(--brand-deep); } [data-voice="heritage"] .btn-ghost { border-color: var(--ink); color: var(--ink); } [data-voice="heritage"] .btn-ghost:hover { background: var(--ink); color: var(--paper); } [data-voice="heritage"] .hero-facts { border-top-color: var(--line); } [data-voice="heritage"] .hero-facts a { border-bottom-color: var(--line); } [data-voice="heritage"] [data-hours-today][data-state="open"] { color: var(--ink); } [data-voice="heritage"] .hero--window .hero-photo { border-color: var(--line); background: var(--canvas); } /* emblem: their real mark at hero scale, the blueprint's round buttons */ .hero-emblem-wrap { margin-bottom: 26px; max-width: 100%; } /* the mark at its own pixels, never past them (photo-resolution): on a phone the source's 2x descriptor halves its intrinsic width */ .hero-emblem { width: auto; height: auto; max-width: 100%; } .hero-emblem-plate picture { display: block; } .hero-emblem-plate { display: inline-block; background: var(--paper); padding: clamp(14px, 2vw, 24px); border-radius: 6px; } [data-voice="emblem"] .hero-title { margin-top: 26px; } [data-voice="emblem"] .h1-lead, [data-voice="emblem"] .h1-accent, [data-voice="emblem"] .h1-tail { display: inline; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .2em; margin: 0; } [data-voice="emblem"] .h1-accent { font-weight: 700; } [data-voice="emblem"] .hero-actions .btn { border-radius: 999px; min-width: 116px; min-height: 116px; padding: 0 18px; flex-direction: column; gap: 8px; font-size: 13px; } /* ------------------------------------------------------------------ prices */ .prices { padding-block: var(--band); background: var(--paper); } .prices[data-tone="b"] { background: var(--paper-2); } /* round 2 (strict readers: "a short group leaves a dead hole"): the groups flow through two balanced columns and never split, so a two-line group sits under a longer one instead of beside empty space */ .menu { max-width: 1040px; margin-inline: auto; columns: 2; column-gap: 72px; } .menu[data-groups="1"] { max-width: 640px; columns: 1; } .menu-group { break-inside: avoid; margin-bottom: clamp(32px, 4vw, 48px); } .menu-title { font: 600 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .1em; padding-bottom: 14px; border-bottom: 2px solid var(--ink); } .menu-list { margin-top: 6px; } .menu-item { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); } .menu-name { font-weight: 500; font-size: 17px; } .menu-mark { color: var(--brand); margin-left: 6px; font-weight: 600; } .menu-lead { flex: 1 1 auto; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 28%, transparent); transform: translateY(-5px); } .menu-price { font: 600 20px/1 var(--display); letter-spacing: .02em; color: var(--brand-deep); white-space: nowrap; } .menu-item { display: grid; grid-template-columns: minmax(0, max-content) minmax(16px, 1fr) auto; column-gap: 10px; } .menu-note { grid-column: 1 / -1; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .menu-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .menu-legend { font-size: 15px; color: var(--ink-2); } .menu-also { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; font-size: 15px; color: var(--ink-2); } .menu-also > span:not(.menu-also-label) { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); } .menu-also-label { width: 100%; font: 600 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brand); } .signoff { max-width: 560px; font-style: italic; font-size: 16px; color: var(--ink-2); } .menu-fine { font-size: 14px; color: var(--ink-3); } .menu-foot .btn { margin-top: 10px; } /* heritage: the blueprint's own form, one centred column, name over price */ [data-voice="heritage"] .menu[data-groups="2"] { max-width: 720px; columns: 1; } [data-voice="heritage"] .menu-title { text-align: center; border-bottom-style: double; border-bottom-width: 4px; font-weight: 800; text-transform: none; letter-spacing: .02em; font-size: 28px; } [data-voice="heritage"] .menu-price { font-weight: 800; } /* ------------------------------------------------------------------ work */ .work { padding-block: var(--band); background: var(--night); color: var(--on-night); } /* bleed (the band rhythm's second choice, when the band above is contained): the strip runs to the right edge */ .work[data-band-as="bleed"] .work-inner { width: auto; margin-left: max(var(--pad), (100vw - var(--wrap)) / 2); margin-right: 0; } .work[data-band-as="bleed"] .band-head { padding-right: max(var(--pad), (100vw - var(--wrap)) / 2); } .work .band-lede { color: var(--on-night-2); } .work .display::after { background: var(--accent-on-night); } .socials { display: flex; flex-wrap: wrap; gap: 10px; } .socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--on-night-line); border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .socials a:hover { border-color: var(--on-night); } .socials .ico { color: var(--accent-on-night); } /* The strip fits its count (no empty track): six columns, two rows. The lead takes three columns and both rows; each support is one column and both rows (portrait, as phone photographs of a cut are). 2 = lead 4 + one of 2; 3 = lead 4 + two of 1; 4 = lead 3 + three of 1; 5 = lead 2 + four of 1; 6 or more = lead 3 + supports in two rows of three (photoHierarchy keeps the best five). */ .strip { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 240px; } .shot { margin: 0; overflow: hidden; background: var(--night-2); } .shot picture, .shot img { width: 100%; height: 100%; } .shot img { object-fit: cover; object-position: 50% 30%; } .strip .shot--lead { grid-column: span 3; grid-row: span 2; } .strip .shot--tile { grid-column: span 1; grid-row: span 2; } .strip[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 480px; max-width: 900px; margin-inline: auto; } .strip[data-count="1"] .shot--lead { grid-column: auto; grid-row: auto; } .strip[data-count="2"] .shot--lead, .strip[data-count="3"] .shot--lead { grid-column: span 4; } .strip[data-count="2"] .shot--tile { grid-column: span 2; } .strip[data-count="5"] .shot--lead { grid-column: span 2; } .strip[data-count="6"] .shot--tile, .strip[data-count="7"] .shot--tile, .strip[data-count="8"] .shot--tile { grid-row: span 1; } /* ------------------------------------------------------------------ barbers */ .barbers { padding-block: var(--band); background: var(--paper); } .barbers[data-tone="b"] { background: var(--paper-2); } .crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .crew-card { flex: 1 1 300px; max-width: 380px; display: grid; grid-template-rows: auto auto 1fr; padding: 30px 28px 32px; background: var(--canvas); border: 1px solid var(--line); border-top: 4px solid var(--accent); } .crew-name { font: 600 28px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; } .crew-role { margin-top: 8px; font: 600 12.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brand); min-height: 17px; } .crew-bio { margin-top: 20px; display: grid; gap: 12px; align-content: start; } .crew-bio li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--ink-2); } .crew-bio li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--accent); } .crew-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font: 600 clamp(24px, 3vw, 36px)/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; } [data-band-as="inverse"].barbers { background: var(--night); color: var(--on-night); } [data-band-as="inverse"].barbers .crew-card { background: var(--night-2); border-color: var(--on-night-line); border-top-color: var(--accent-on-night); } [data-band-as="inverse"].barbers .crew-role { color: var(--accent-on-night); } [data-band-as="inverse"].barbers .crew-bio li { color: var(--on-night-2); } [data-band-as="inverse"].barbers .display::after { background: var(--accent-on-night); } /* ------------------------------------------------------------------ reviews */ .reviews { padding-block: var(--band); background: var(--paper); } [data-band-as="inverse"].reviews { background: var(--night); color: var(--on-night); } .rev-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; margin-bottom: clamp(28px, 4vw, 44px); } .rev-head .display::after { content: ""; display: block; width: 44px; height: 3px; margin: 18px auto 0; background: var(--accent); } [data-band-as="inverse"].reviews .rev-head .display::after { background: var(--accent-on-night); } .rev-agg { display: grid; justify-items: center; gap: 6px; } .rating-line { font-size: 15px; } .rating-line strong { font: 600 22px/1 var(--display); margin-right: 4px; } .rev-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--brand-deep); } [data-band-as="inverse"].reviews .rev-link { color: var(--accent-on-night); } .stars { display: inline-flex; gap: 3px; color: #f2a900; } .stars svg { width: 18px; height: 18px; fill: currentColor; stroke: rgba(120, 80, 0, .55); stroke-width: .8; } .stars-agg { position: relative; display: inline-block; } .stars-agg .stars-row { display: flex; flex-wrap: nowrap; gap: 4px; } .stars-agg svg { flex: none; width: 26px; height: 26px; } .stars-agg .stars-base { color: var(--line); } [data-band-as="inverse"].reviews .stars-agg .stars-base { color: rgba(255, 255, 255, .26); } .stars-agg .stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f2a900; } .stars-agg.sf-5 .stars-fill { width: 100%; } .stars-agg.sf-4 .stars-fill { width: calc(4 * 30px); } .stars-agg.sf-3 .stars-fill { width: calc(3 * 30px); } .stars-agg.sf-2 .stars-fill { width: calc(2 * 30px); } .stars-agg.sf-1 .stars-fill { width: calc(1 * 30px); } .stars-agg.sf-4.sq-1 .stars-fill { width: calc(4 * 30px + 7px); } .stars-agg.sf-4.sq-2 .stars-fill { width: calc(4 * 30px + 13px); } .stars-agg.sf-4.sq-3 .stars-fill { width: calc(4 * 30px + 19px); } .stars-agg.sf-3.sq-1 .stars-fill { width: calc(3 * 30px + 7px); } .stars-agg.sf-3.sq-2 .stars-fill { width: calc(3 * 30px + 13px); } .stars-agg.sf-3.sq-3 .stars-fill { width: calc(3 * 30px + 19px); } .stars[data-n="4"] svg:nth-child(n+5), .stars[data-n="3"] svg:nth-child(n+4), .stars[data-n="2"] svg:nth-child(n+3), .stars[data-n="1"] svg:nth-child(n+2) { fill: none; stroke: currentColor; stroke-width: 1.4; } .rev-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .rev-card { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; padding: 28px; background: var(--canvas); color: var(--ink); border: 1px solid var(--line); } [data-band-as="inverse"].reviews .rev-card { border-color: transparent; } /* heritage: reviews as quotations between rules, not cards (round 2 cross read: "the same shared block") */ [data-voice="heritage"] .rev-card { background: transparent; color: inherit; border: 0; border-top: 1px solid currentColor; padding: 26px 4px 8px; } [data-voice="heritage"] .rev-quote { font: italic 500 20px/1.5 var(--display); color: inherit; } [data-voice="heritage"] .rev-date { color: inherit; opacity: .78; } .rev-quote { font-size: 16.5px; line-height: 1.62; color: var(--ink); } .rev-card .stars { margin-top: auto; padding-top: 20px; } .rev-name { margin-top: 8px; font-weight: 600; } .rev-date { margin-top: 2px; font-size: 13px; color: var(--ink-2); } /* ------------------------------------------------------------------ visit */ .visit { padding-block: var(--band); background: var(--paper); } .visit[data-tone="b"] { background: var(--paper-2); } [data-band-as="inverse"].visit { background: var(--night); color: var(--on-night); } .visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; } .visit-grid--solo { grid-template-columns: minmax(0, 640px); justify-content: center; } .visit-card { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); padding: clamp(28px, 4vw, 48px); background: var(--canvas); color: var(--ink); } .visit-card .display::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 18px; background: var(--accent); } .visit-where { margin-top: 20px; font-size: 18px; font-weight: 500; } .visit-lines { margin-top: 18px; display: grid; gap: 12px; } .visit-lines li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; overflow-wrap: anywhere; } .vl-ico { display: inline-flex; flex: none; } .visit-lines .ico, .hours-title .ico { margin-top: 3px; color: var(--brand); } .visit-lines a { text-decoration: none; border-bottom: 1px solid var(--line); } .visit-lines a:hover { border-color: var(--ink); } .visit-note { margin-top: 16px; font-size: 15px; color: var(--ink-2); } .hours { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } .hours-title { display: flex; align-items: center; gap: 12px; font: 600 13px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; } .hours-list { margin-top: 12px; display: grid; } .hours-row { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 7px 0 7px 18px; font-size: 15.5px; border-bottom: 1px dotted var(--line); } .hours-row:last-child { border-bottom: 0; } .hours-time { color: var(--ink-2); text-align: right; } .hours-row[data-today="true"] { font-weight: 600; } .hours-row[data-today="true"] .hours-time { color: var(--ink); } .hours-row[data-today="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 0; margin-top: -5px; border-left: 7px solid var(--accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .hours-row[data-state="closed"][data-today="true"]::before { border-left-color: var(--ink-3); } .visit-media { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-height: 520px; } .visit-media--one { grid-template-rows: minmax(0, 1fr); } .visit-photo { margin: 0; position: relative; overflow: hidden; background: var(--night-2); } .visit-photo picture, .visit-photo img { width: 100%; height: 100%; } .visit-photo img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 45%; } .visit-map { position: relative; min-height: 240px; background: var(--paper-2); border: 1px solid var(--line); } .visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------------ footer */ .site-footer { background: var(--footer); color: var(--on-night-2); padding-block: 56px 28px; } .foot-grid { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 32px; align-items: start; } .foot-name { font: 700 26px/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--on-night); } .foot-place { margin-top: 8px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; } .foot-logo img { max-height: 96px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; } .foot-logo-plate { display: inline-block; padding: 12px 16px; border-radius: 6px; } .foot-logo-plate--light { background: var(--paper); } .foot-logo-plate--dark, .foot-logo-plate--self { background: transparent; padding: 0; } .foot-contact { display: grid; gap: 8px; font-size: 15px; overflow-wrap: anywhere; } .foot-contact a, .foot-social a { text-decoration: none; } .foot-contact a:hover, .foot-social a:hover { color: var(--on-night); } .foot-social { display: grid; gap: 8px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; } .foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--on-night-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; } .foot-legal a { color: var(--on-night); } [data-voice="heritage"] .site-footer { background: var(--paper-2); color: var(--ink-2); border-top: 4px double var(--ink); } [data-voice="heritage"] .foot-name, [data-voice="heritage"] .foot-legal a { color: var(--ink); } [data-voice="heritage"] .foot-contact a:hover, [data-voice="heritage"] .foot-social a:hover { color: var(--ink); } [data-voice="heritage"] .foot-legal { border-top-color: var(--line); } [data-voice="heritage"] .foot-grid { text-align: center; grid-template-columns: 1fr; justify-items: center; } [data-voice="heritage"] .foot-name { text-transform: none; font-weight: 800; font-size: 34px; letter-spacing: 0; } [data-voice="heritage"] .foot-social { display: flex; gap: 20px; } [data-voice="emblem"] .foot-grid { grid-template-columns: auto 1fr 1fr; } /* ------------------------------------------------------------------ preview badge */ .preview-badge { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; gap: 6px; align-items: center; background: rgba(15, 17, 20, .9); color: #fff; font: 600 12.5px/1.2 var(--sans); padding: 6px 6px 6px 12px; border-radius: 999px; } .preview-badge a { color: #fff; text-decoration: none; } .preview-badge-cta { background: #fff; color: #111 !important; padding: 6px 10px; border-radius: 999px; } /* ------------------------------------------------------------------ tablet */ @media (max-width: 1080px) { .mh-nav ul { gap: 20px; } .mh-call-label { display: none; } .foot-grid { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------ phone */ @media (max-width: 760px) { body { font-size: 16px; } .mh-row { flex-wrap: wrap; gap: 0 10px; min-height: 0; padding-top: 12px; } .mh-brand { flex: 1 1 0; } .mh-word { font-size: 15px; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; } .mh-book-long { display: none; } .mh-book-short { display: inline; } .mh-logo { max-height: 40px; } .mh-actions { gap: 8px; } .mh-call { padding: 0 12px; } .mh-nav, [data-voice="heritage"] .mh-nav, [data-voice="emblem"] .mh-nav { order: 5; flex: 1 1 100%; margin: 10px 0 0; border-top: 1px solid var(--on-night-line); } .mh-nav ul { justify-content: space-between; gap: 8px; padding: 12px 0; } .mh-nav a { font-size: 12.5px; letter-spacing: .14em; } [data-voice="heritage"] .mh-brand { order: 0; } [data-voice="heritage"] .mh-word { font-size: 20px; } /* Phone: the name, the line and the actions, then their photograph, then today and the address (hero-copy dissolves so its two halves can sit either side of the frame). */ .hero--split, .hero--window { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; gap: 0; } .hero--split .hero-copy, .hero--window .hero-copy { display: contents; } .hero--split .hero-main, .hero--window .hero-main { order: 1; padding: 28px var(--pad) 30px; } .hero--split .hero-emblem-wrap, .hero--window .hero-emblem-wrap { order: 0; margin: 0; padding: 28px var(--pad) 0; } .hero--split .hero-facts, .hero--window .hero-facts { order: 3; margin: 0; padding: 18px var(--pad) 26px; border-top: 0; } .hero--split .hero-photo, .hero--window .hero-photo { order: 2; position: relative; height: 300px; min-height: 0; border: 0; padding: 0; } .hero--window .hero-photo img { aspect-ratio: auto; position: absolute; inset: 0; width: 100%; height: 100%; } .hero--window .hero-photo { margin-inline: var(--pad); border: 0; } .hero--type { padding: 44px var(--pad) 52px; } .hero-title { margin-top: 16px; } .h1-accent { font-size: clamp(64px, 21vw, 92px); } .h1-tail { font-size: clamp(26px, 8vw, 36px); } [data-voice="heritage"] .h1-accent { font-size: clamp(60px, 18vw, 84px); } .hero-sub { margin-top: 18px; font-size: 16.5px; } .hero-actions { margin-top: 24px; width: 100%; } .hero-actions .btn { flex: 1 1 100%; } [data-voice="emblem"] .hero-actions .btn { flex: 1 1 100%; min-width: 0; min-height: 52px; border-radius: var(--radius); flex-direction: row; font-size: 15px; } .hero-facts { margin-top: 22px; } .band-head--row { align-items: flex-start; } .menu, .menu[data-groups], [data-voice="heritage"] .menu[data-groups] { columns: 1; } .menu-name { font-size: 16px; } .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; } .strip .shot--lead, .strip[data-count="2"] .shot--lead, .strip[data-count="3"] .shot--lead, .strip[data-count="5"] .shot--lead { grid-column: 1 / -1; grid-row: span 2; } .strip .shot--tile, .strip[data-count="2"] .shot--tile { grid-column: auto; grid-row: span 2; } .strip[data-count="2"] .shot--tile, .strip[data-count="4"] .shot--tile:last-child, .strip[data-count="6"] .shot--tile:last-child, .strip[data-count="8"] .shot--tile:last-child { grid-column: 1 / -1; } .strip[data-count="2"] .shot--tile { grid-row: span 1; } .strip[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 300px; } .crew-card { max-width: none; } .rev-agg { justify-items: center; } .rev-card { max-width: none; flex-basis: 100%; } .visit-grid { grid-template-columns: minmax(0, 1fr); } .visit-media { min-height: 0; grid-template-rows: 240px 260px; } .visit-media--one { grid-template-rows: 260px; } .foot-grid, [data-voice="emblem"] .foot-grid { grid-template-columns: minmax(0, 1fr); } .foot-legal { padding-bottom: 56px; } } /* ------------------------------------------------------------------ motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }