/* Downtown Barber — sitewide stylesheet. Breakpoints: mobile ≤767px, tablet 768–1199px, desktop ≥1200px. Everything above the Sections divider is also inlined in each page's as critical CSS by tools/sync-shared.js (with the fonts from partials/fonts.css); run the script after editing. */ /* ---------- Fonts: partials/fonts.css, inlined by tools/sync-shared.js; never declared here (see that file) ---------- */ /* ---------- Tokens ---------- */ :root { --burgundy: #7b1e2b; --burgundy-dark: #5e1620; --cream: #f7f3ec; --cream-2: #efe8dc; --brown: #2e1a12; --text: #4a3f39; --gold: #c9a24a; --line: #d9cfc0; --muted: #8a7b70; --footer-line: #4a2f27; --footer-muted: #b9a99a; --font-body: Lato, "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 111px; } /* sticky header height: 111 mobile, 103 tablet, 142 desktop */ body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--burgundy); text-decoration: none; } a:hover { color: var(--burgundy-dark); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, p { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 28px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; white-space: nowrap; } .btn-solid { background: var(--burgundy); color: #fff; } .btn-solid:hover { background: var(--burgundy-dark); color: #fff; } .btn-outline { border: 2px solid var(--burgundy); color: var(--burgundy); } .btn-outline:hover { background: var(--burgundy); color: #fff; } .btn-light { background: #fff; color: var(--brown); height: 60px; padding: 0 44px; font-size: 16px; letter-spacing: 0.1em; } .btn-light:hover { background: var(--cream-2); color: var(--brown); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 18px 64px 14px; background: var(--cream); border-bottom: 1px solid var(--line); } .logo { display: block; } .logo img { width: 190px; height: auto; } .menu-toggle { position: absolute; right: 12px; top: 35px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--burgundy); } .menu-toggle svg { width: 26px; height: 26px; } .menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .site-nav, .header-book, .header-phone { display: none; } .site-header.is-open .site-nav, .site-header.is-open .header-book, .site-header.is-open .header-phone { display: flex; } .header-actions { display: contents; } .header-book { order: 2; width: 100%; margin-top: 18px; height: 56px; font-size: 15px; letter-spacing: 0.1em; border-radius: 4px; } .header-phone { order: 4; align-items: center; gap: 12px; width: 100%; padding: 16px 0 12px; border-top: 1px solid var(--line); font-weight: 700; font-size: 18px; line-height: 28px; color: var(--brown); } .header-phone svg { width: 24px; height: 24px; color: var(--burgundy); } .header-phone:hover { color: var(--burgundy); } .header-book .book-long { display: inline; } .header-book .book-short { display: none; } .site-nav { order: 3; flex-direction: column; width: 100%; padding: 8px 0 12px; } .nav-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brown); } .nav-link:hover { color: var(--burgundy); } .site-nav > .nav-link { padding: 14px 0; border-bottom: 1px solid var(--line); } .nav-areas { padding-top: 14px; } .nav-areas-toggle { display: block; padding: 0 0 8px; pointer-events: none; } .nav-areas-toggle svg { display: none; } .nav-areas-list { list-style: none; margin: 0; padding: 0; } .nav-areas-list a { display: block; padding: 10px 0; font-size: 16px; color: var(--text); } .nav-areas-list a:hover { color: var(--burgundy); } @media (min-width: 768px) { html { scroll-padding-top: 103px; } .site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 8px 32px; } .logo { order: 2; } .logo img { width: 210px; } .menu-toggle { display: none; } .site-nav, .header-book, .header-phone { display: flex; } .site-nav { order: 1; flex-direction: row; align-items: center; gap: 32px; width: auto; padding: 0; } .site-nav > .nav-link { padding: 0; border: 0; } .header-actions { display: flex; order: 3; justify-self: end; align-items: center; gap: 32px; } .header-book { order: 0; flex-shrink: 0; width: auto; margin: 0; height: 60px; padding: 0 40px; font-size: 17px; box-shadow: 0 4px 14px rgba(46, 26, 18, 0.18); } .header-phone { order: 0; flex-shrink: 0; width: auto; padding: 0; border: 0; gap: 10px; font-size: 20px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; } .header-phone svg { width: 26px; height: 26px; } .header-book .book-long { display: none; } .header-book .book-short { display: inline; } .nav-areas { position: relative; padding: 0; } .nav-areas-toggle { display: inline-flex; padding: 0; pointer-events: auto; } .nav-areas-toggle svg { display: block; width: 14px; height: 14px; } .nav-areas-list { position: absolute; left: -16px; top: 100%; z-index: 20; display: none; min-width: 220px; margin-top: 12px; padding: 8px 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(46, 26, 18, 0.14); } .nav-areas-list::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-areas:hover .nav-areas-list, .nav-areas:focus-within .nav-areas-list, .nav-areas-toggle[aria-expanded="true"] + .nav-areas-list { display: block; } .nav-areas-list a { padding: 10px 20px; font-size: 15px; white-space: nowrap; } .nav-areas-list a:hover { background: var(--cream); } } @media (min-width: 768px) and (max-width: 1079px) { /* Tablet portrait: the number does not fit beside a full Book Now below 1080px, so an icon-only call button (burgundy disc) and Book Now with 20px side padding (owner's choice). */ .header-book { padding: 0 20px; } .header-actions { gap: 20px; } .header-phone { width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: var(--burgundy); color: #fff; } .header-phone:hover { background: var(--burgundy-dark); color: #fff; } .header-phone svg { width: 24px; height: 24px; color: #fff; stroke-width: 2.5; } .header-phone-number { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (min-width: 768px) and (max-width: 775px) { .header-actions { gap: 12px; } /* 768 exactly: 8px short of room for the 20px gap */ } @media (min-width: 1080px) and (max-width: 1199px) { /* Tablets in landscape: the full number one step smaller than desktop so Book Now keeps its size. */ .header-actions { gap: 16px; } .header-phone { font-size: 17px; } .header-phone svg { width: 22px; height: 22px; } } @media (min-width: 1200px) { html { scroll-padding-top: 142px; } .site-header { padding: 12px 64px; } .logo img { width: 285px; } } /* ---------- Hero ---------- */ /* Mobile and tablet follow design/MOBILE-TABLET-HERO.md: photo, then a cream card holding the headline and the Book button (tablet: also the paragraph) riding up over the photo's bottom edge. Desktop is the split layout as signed off. The card is in normal flow (negative top margin), nothing absolute, so no layout shift. */ .hero { background: var(--cream); } .hero-media img { width: 100%; height: 332px; object-fit: cover; object-position: 50% 62%; } .hero-card { position: relative; margin: -92px 24px 0; padding: 20px 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--cream); border-radius: 8px; box-shadow: 0 12px 32px rgba(46, 26, 18, 0.22); } .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 0.96; letter-spacing: -0.01em; color: var(--brown); } /* Town pages: the longer H1 ("Barber Shop in , NJ") sized so its longest line, "Wall Township, NJ", fits the mobile card (card width is 100vw - 92px); 40px at 390, 37px at 360. Tablet and desktop keep the home sizes. */ .hero-town h1 { font-size: 40px; font-size: min(48px, calc((100vw - 92px) / 7.3)); } .btn-hero { width: 100%; height: 56px; margin-top: 8px; gap: 10px; font-size: 15px; letter-spacing: 0.12em; border-radius: 6px; box-shadow: 0 8px 22px rgba(46, 26, 18, 0.28); } .btn-hero svg { width: 20px; height: 20px; flex: 0 0 20px; } /* Call link inside the card, under the Book button (mobile and tablet portrait only). */ .hero-phone { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 8px; font-weight: 700; font-size: 18px; line-height: 28px; letter-spacing: 0.02em; color: var(--brown); white-space: nowrap; } .hero-phone:hover { color: var(--burgundy); } .hero-phone svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--burgundy); } .hero-intro { padding: 26px 24px 8px; font-size: 17px; line-height: 1.5; text-align: center; text-wrap: pretty; } .hero-icons { padding: 12px 8px 28px; border-bottom: 1px solid var(--line); } .hero-icons ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 auto; padding: 0; } .hero-icons li + li { border-left: 1px solid var(--line); } .hero-icon { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 6px; } .hero-icons img { width: 46px; height: 46px; } .hero-icons span { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown); text-align: center; } @media (min-width: 768px) { /* Tablet portrait: the card holds headline, paragraph and button; values run from the 768 column to the 1024 column of the spec and hold above 1024. Owner's change 2026-09-06: the card overlaps the photo by 200-240px (spec: 100-120) with 24-32px padding and 14px gaps, so the icon row also clears the fold on a portrait iPad. Owner's change 2026-09-07: photo 60px shorter (440-640px, was 500-700px) so the icon labels sit well above the fold. */ /* Each clamp() is preceded by its 768 value: browsers without clamp() (Safari before 13.4, Chrome before 79) drop the clamp() line and keep the fixed one, so they still get the cropped photo and the overlapping card. */ .hero-media img { height: 440px; height: clamp(440px, calc(440px + (100vw - 768px) * 0.78125), 640px); object-position: 50% 60%; } .hero-body { position: relative; width: 560px; width: clamp(560px, calc(560px + (100vw - 768px) * 0.46875), 680px); margin: -214px auto 0; margin: calc(-1 * clamp(214px, calc(214px + (100vw - 768px) * 0.15625), 254px)) auto 0; padding: 24px; padding: clamp(24px, calc(24px + (100vw - 768px) * 0.03125), 32px); padding-bottom: 16px; padding-bottom: clamp(16px, calc(16px + (100vw - 768px) * 0.03125), 24px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--cream); border-radius: 10px; box-shadow: 0 12px 32px rgba(46, 26, 18, 0.22); } .hero-card { display: contents; } .hero h1 { font-size: 60px; font-size: clamp(60px, calc(60px + (100vw - 768px) * 0.0625), 76px); } .hero-intro { order: 1; padding: 0; font-size: 17px; font-size: clamp(17px, calc(17px + (100vw - 768px) * 0.00390625), 18px); line-height: 1.55; } .btn-hero { order: 2; width: auto; height: 56px; height: clamp(56px, calc(56px + (100vw - 768px) * 0.015625), 60px); margin-top: 6px; padding: 0 36px; font-size: 16px; } .hero-phone { order: 3; } .hero-icons { padding: 16px 0 20px; } .hero-icons ul { max-width: 960px; } .hero-icons img { width: 52px; height: 52px; } .hero-icons span { font-size: 13px; } .hero-icon { gap: 10px; } } @media (min-width: 768px) and (max-width: 1199px) and (max-height: 899px) { /* Short, wide tablet viewports (a tablet held in landscape): the stacked card cannot fit in under 900px of height, so the hero uses the desktop treatment: photo left, headline, paragraph and button right, no card. */ .hero-split { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; min-height: 340px; min-height: clamp(340px, calc(100vh - 300px), 560px); } .hero-media { position: relative; } .hero-media img { position: absolute; inset: 0; height: 100%; object-position: 50% 50%; } .hero-body { width: auto; margin: 0; padding: 24px 40px; padding: 24px clamp(40px, 5vw, 80px); gap: 14px; justify-content: center; background: none; border-radius: 0; box-shadow: none; } .hero h1 { font-size: 56px; font-size: clamp(56px, 4.2vw, 72px); line-height: 0.98; } .hero-intro { max-width: 760px; margin-bottom: 4px; font-size: 19px; line-height: 1.5; } .btn-hero { height: 60px; margin-top: 0; padding: 0 40px; font-size: 17px; gap: 12px; box-shadow: 0 6px 18px rgba(46, 26, 18, 0.18); } .btn-hero svg { width: 22px; height: 22px; } .hero-phone { display: none; } } @media (min-width: 1200px) { /* Desktop split hero as signed off: icon row above the fold down to a 1366x768 laptop. */ .hero-split { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; min-height: clamp(340px, calc(100vh - 300px), 560px); } .hero-media { position: relative; } .hero-media img { position: absolute; inset: 0; height: 100%; object-position: 50% 50%; } .hero-body { width: auto; margin: 0; padding: 24px clamp(40px, 5vw, 80px) 14px; gap: 14px; justify-content: center; border-radius: 0; box-shadow: none; } .hero h1 { font-size: clamp(56px, 4.2vw, 72px); line-height: 0.98; } .hero-intro { max-width: 760px; margin-bottom: 4px; font-size: 19px; line-height: 1.5; } .btn-hero { height: 60px; margin-top: 10px; padding: 0 40px; font-size: 17px; gap: 12px; box-shadow: 0 6px 18px rgba(46, 26, 18, 0.18); } .btn-hero svg { width: 22px; height: 22px; } .hero-phone { display: none; } } /* ---------- Section frame: critical, since a section heading can sit inside the first viewport on pages without the icon row (town pages), and must not jump when the stylesheet lands ---------- */ .section { padding: 48px 20px; } .section-alt { background: var(--cream-2); } .wrap { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .wrap-narrow { max-width: 960px; } .section-title { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 30px; line-height: 1.1; text-transform: uppercase; text-align: center; color: var(--burgundy); } .section-title-plain { padding: 0; border: 0; } @media (min-width: 768px) { .section { padding: 64px 40px; } .wrap { gap: 28px; } .section-title { padding-bottom: 16px; font-size: 40px; } } @media (min-width: 1200px) { .section { padding: 80px 40px; } .wrap { gap: 32px; } .section-title { font-size: 44px; } } .section-after-head { padding-top: 0; } /* a text section straight under the page head */ /* Prose blocks (town intro and history, Careers): critical, a prose section can sit inside the first viewport */ .prose { display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.6; text-wrap: pretty; } .prose a { font-weight: 700; } @media (min-width: 768px) { .prose { gap: 24px; font-size: 18px; line-height: 1.65; } } /* ---------- Page header (gallery, careers, community): crumb, H1, intro; critical, it is the first viewport ---------- */ .page-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px 24px; text-align: center; } .crumb { font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } /* Same sizes as the hero h1 at every size (one h1 level site-wide): 48 on phones, 60-76 fluid on a portrait tablet, 56 on a landscape tablet, 56-72 on desktop. */ .page-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.01em; color: var(--brown); } .page-intro { font-size: 17px; line-height: 1.5; text-wrap: pretty; } .page-intro a { font-weight: 700; } @media (min-width: 768px) { .page-head { gap: 14px; padding: 56px 40px 32px; } .page-head h1 { font-size: 60px; font-size: clamp(60px, calc(60px + (100vw - 768px) * 0.0625), 76px); } .page-intro { font-size: 19px; } } @media (min-width: 768px) and (max-width: 1199px) and (max-height: 899px) { .page-head h1 { font-size: 56px; } } @media (min-width: 1200px) { .page-head { padding: 72px 40px 40px; } .page-head h1 { font-size: clamp(56px, 4.2vw, 72px); } .page-intro { font-size: 20px; } } /* ---------- Sections ---------- */ /* ---------- Photo grid (gallery) ---------- */ .photos { padding: 0 20px 48px; } .photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; } .photo-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--cream-2); } @media (min-width: 768px) { .photos { padding: 0 40px 64px; } .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1200px) { .photos { padding: 0 40px 80px; } .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } /* ---------- Services ---------- */ .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px; background: var(--burgundy); border-radius: 6px; text-align: center; } .tile:hover { background: var(--burgundy-dark); } .tile h3 { font-weight: 700; font-size: 18px; line-height: 1.2; color: #fff; } .tile p { display: none; } /* the option line stays in the HTML for search but is never shown (owner, 2026-09-06) */ @media (min-width: 768px) { .services { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .tile { flex: 0 0 218px; width: 218px; } .tile h3 { font-size: 19px; } } @media (min-width: 1200px) { .services { gap: 20px; } .tile { flex-basis: 285px; width: 285px; } .tile h3 { font-size: 22px; } } /* ---------- Carousels (gallery, reviews) ---------- */ .carousel { position: relative; } .track { --gap: 12px; display: flex; gap: var(--gap); align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .track::-webkit-scrollbar { display: none; } .track > * { flex: 0 0 auto; scroll-snap-align: start; } /* Embla running (site.js): the carousel clips and Embla moves the track with transforms, so the track stops scrolling itself. Spacing moves from gap to a margin on each slide: Embla reads the last slide's margin to space the loop seam. */ .carousel.is-embla { overflow: hidden; } .carousel.is-embla .track { gap: 0; overflow: visible; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y pinch-zoom; } .carousel.is-embla .track > * { margin-right: var(--gap); } .track img { flex-basis: 272px; width: 272px; aspect-ratio: 4 / 5; object-fit: cover; } .carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; } .carousel-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--brown); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .carousel-btn:hover { color: var(--burgundy); } .carousel-btn svg { width: 22px; height: 22px; } .dots { display: flex; justify-content: center; gap: 8px; min-width: 60px; min-height: 10px; } .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .dots .is-active { background: var(--burgundy); } .center { display: flex; justify-content: center; } .center > .btn { width: 100%; } @media (min-width: 768px) { .track { --gap: 20px; } .track img { flex-basis: 285px; width: 285px; } .carousel-nav { gap: 28px; } .carousel-btn { flex-basis: 48px; width: 48px; height: 48px; } .carousel-btn svg { width: 24px; height: 24px; } .dots span { width: 10px; height: 10px; } .center > .btn { width: auto; } } /* ---------- Reviews ---------- */ .reviews-title { display: flex; flex-direction: column; align-items: center; gap: 14px; } .stars { display: block; fill: var(--gold); } .stars-lg { width: 174px; height: 30px; } .stars-sm { width: 98px; height: 18px; } .review { display: flex; flex-direction: column; gap: 10px; width: 300px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } /* Card per design/REVIEW-BADGES.md: stamp row (stars left, platform badge right), name with the platform in words under it, text */ .review-stamp { display: flex; align-items: center; justify-content: space-between; } .review-badge { display: block; flex: 0 0 auto; width: 28px; height: 28px; } .review-who { display: flex; flex-direction: column; gap: 2px; } .review-name { font-weight: 700; font-size: 15px; color: var(--brown); } .review-source { font-size: 12px; color: #75665b; } /* 4.5:1 on white; the design's #8a7b70 fails contrast at this size */ .review-text { font-size: 15px; line-height: 1.6; } .review-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .read-more { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--burgundy); } @media (max-width: 767px) { .read-more { min-height: 44px; margin-top: 0; margin-bottom: -12px; } } /* 44px tap target on phones without moving the text */ .read-more:hover { color: var(--burgundy-dark); } @media (min-width: 768px) { .stars-lg { width: 204px; height: 36px; } .review { width: 384px; padding: 28px; } .review-badge { width: 32px; height: 32px; } .review-name { font-size: 16px; } } @media (min-width: 1200px) { .track-reviews { --gap: 24px; } } /* ---------- About ---------- */ .about { display: grid; gap: 18px; } .about img { width: 100%; aspect-ratio: 400 / 519; object-fit: cover; } .about-text { display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.6; text-wrap: pretty; } .about-text a { font-weight: 700; } @media (min-width: 768px) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "img title" "img text"; align-items: center; column-gap: 48px; row-gap: 20px; } .about .section-title { grid-area: title; align-self: end; } .about img { grid-area: img; max-width: 460px; justify-self: center; } .about-text { grid-area: text; align-self: start; font-size: 18px; line-height: 1.65; } } @media (min-width: 1200px) { .about { column-gap: 64px; } } /* ---------- Town titles ---------- */ .town-title { text-wrap: balance; } /* Phones: fitted so the heading's longest line, "Neighborhood Barber Shop", sits on two lines for every town (22.7px at 390, 20.8 at 360) and the block stays shorter than the h1 above it; from 768 up the section-title sizes apply. */ @media (max-width: 767px) { .town-title { font-size: min(30px, calc((100vw - 40px) / 15.4)); } } /* ---------- Careers: three perks, the inquiry form ---------- */ .perks { display: grid; gap: 16px; } .perk { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--burgundy); border-radius: 8px; } .perk h3 { font-size: 18px; line-height: 1.2; color: var(--brown); } .perk p { font-size: 16px; line-height: 1.6; } .form-card { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .form-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown); } .form-card input, .form-card textarea { padding: 0 16px; font: inherit; font-size: 16px; /* 16px so iOS Safari does not zoom on tap */ color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 6px; } .form-card input { height: 50px; } .form-card textarea { padding: 12px 16px; line-height: 1.5; resize: vertical; } /* five lines by rows="5"; grows if dragged */ .form-card input:focus-visible, .form-card textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--burgundy); } .form-card .btn { margin-top: 4px; } .gotcha { display: none; } .form-sent { display: none; scroll-margin-top: 16px; padding: 16px 20px; font-weight: 700; color: var(--brown); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--burgundy); border-radius: 8px; } .form-sent:target { display: block; } /* shown when Formspree sends the visitor back to /careers#sent */ @media (min-width: 768px) { .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .perk { padding: 28px; } .perk h3 { font-size: 20px; } .form-card { padding: 32px; } } @media (min-width: 1200px) { .perk h3 { font-size: 22px; } } /* ---------- Community: post cards (the whole card is the link), the Connect With Us buttons ---------- */ .posts { display: flex; flex-direction: column; gap: 16px; } .post-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--text); } .post-card:hover { border-color: var(--burgundy); color: var(--text); } .post-eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burgundy); } .post-card h2 { font-size: 26px; line-height: 1.1; color: var(--brown); } .post-card p { font-size: 16px; line-height: 1.6; } .connect { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .social { display: inline-flex; border-radius: 50%; color: var(--burgundy); } /* the disc in the sprite is currentColor */ .social:hover, .social:focus-visible { color: var(--burgundy-dark); } .social svg { display: block; } @media (min-width: 768px) { .post-card { padding: 28px 32px; } .post-card h2 { font-size: 30px; } .post-card p { font-size: 17px; } } /* ---------- FAQ ---------- */ .faq { display: flex; flex-direction: column; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; } .faq details[open] summary { padding-bottom: 16px; } /* the answer sits close to its question; the bigger gap is below the answer */ .faq summary::-webkit-details-marker { display: none; } .faq h3 { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--brown); } .faq-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-2); color: var(--burgundy); transition: transform 0.2s; } .faq-icon svg { width: 20px; height: 20px; } .faq details[open] .faq-icon { transform: rotate(45deg); } .faq-answer { padding: 0 0 28px; font-size: 17px; line-height: 1.6; text-wrap: pretty; } /* full column, the same measure as the About copy; the icon is beside the question, not the answer */ .faq-answer a { font-weight: 700; } @media (min-width: 768px) { .faq h3 { font-size: 19px; } } /* ---------- Booking band ---------- */ .band { padding: 48px 24px; background: var(--burgundy); text-align: center; } .band .wrap { align-items: center; gap: 20px; } .band h2 { font-weight: 700; font-size: 32px; line-height: 1.1; color: #fff; } .band .btn { width: 100%; height: 58px; } @media (min-width: 768px) { .band { padding: 64px 40px; } .band .wrap { gap: 24px; } .band h2 { font-size: 40px; } .band .btn { width: auto; height: 60px; } } /* ---------- Contact ---------- */ .contact { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .contact-name { font-weight: 700; font-size: 22px; color: var(--brown); } .contact-line { font-size: 16px; line-height: 1.5; } .contact-phone { font-weight: 700; font-size: 18px; } .contact h3 { margin-top: 16px; font-weight: 700; font-size: 20px; color: var(--brown); } .contact-hours { display: flex; flex-direction: column; gap: 4px; } .contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; } @media (min-width: 768px) { .contact { gap: 12px; } .contact-name { font-size: 26px; } .contact-line { font-size: 18px; } .contact-phone { font-size: 20px; } .contact h3 { font-size: 22px; } } /* ---------- Map ---------- */ .map { position: relative; height: 280px; background: var(--cream-2); } .map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 24px; text-align: center; color: var(--text); } .map-placeholder strong { font-size: 18px; color: var(--brown); } .map-placeholder .map-load { font-size: 14px; } .map iframe { display: block; width: 100%; height: 100%; border: 0; } @media (min-width: 768px) { .map { height: 420px; } } /* ---------- Footer ---------- */ .site-footer { padding: 40px 20px 36px; background: var(--brown); color: var(--line); } .site-footer .wrap { gap: 28px; } .footer-grid { display: grid; gap: 28px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-brand { font-weight: 700; font-size: 24px; color: #fff; } .footer-address { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.5; } .footer-phone { font-weight: 700; font-size: 20px; color: #fff; } .footer-phone:hover { color: var(--gold); } .footer-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--footer-muted); } .footer-hours { display: flex; flex-direction: column; } .footer-hours div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--footer-line); font-size: 15px; } .footer-hours div:last-child { border-bottom: 0; } .footer-hours .open { color: #fff; } .footer-hours .closed { color: var(--footer-muted); } /* the design's #8a7b70 is 4.04:1 on the footer brown */ .footer-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .footer-pages a, .footer-social a { font-size: 15px; color: #fff; } .footer-pages a:hover, .footer-social a:hover { color: var(--gold); } .footer-rule { height: 1px; background: var(--footer-line); } .footer-bottom { display: flex; flex-direction: column; gap: 28px; } .footer-social { display: flex; gap: 20px; } .footer-social a { font-size: 14px; } .footer-copy { font-size: 13px; color: var(--footer-muted); } @media (min-width: 768px) { .site-footer { padding: 56px 40px 40px; } .site-footer .wrap { gap: 32px; } .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .footer-col { gap: 12px; } .footer-pages { gap: 10px 20px; } .footer-bottom { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 24px; } .footer-social { gap: 24px; } .footer-copy { font-size: 14px; } }