/* ══════════════════════════════════════════════════════════════════════ M & K Knifeworx Design language: hard-edged editorial blocks. Nothing is rounded, the accent is used as large flat panels rather than tints, and every action is a rectangle with a contrasting square icon tile welded to its side. Three tones only — near-black, paper, and one blue. ══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap'); :root { /* The single accent. It does every job the reference gives its orange: hero panel, buttons, numerals, bullets, icon tiles, hover states. */ --accent: #2b5ce0; --accent-deep: #1c3fa8; --accent-light: #6d94ff; --accent-soft: #eef2ff; /* Near-black. Dark bands, icon tiles, and the square welded to buttons. */ --ink: #17181c; --ink-2: #202128; --ink-3: #2c2e37; --background: #ffffff; --surface: #f4f5f7; --card: #ffffff; --foreground: #16181d; --muted: #6a707d; --muted-dark: #a2a7b2; --border: #e3e5ea; --border-dark: #34363f; --hero-text: #ffffff; --accent-rgb: 43, 92, 224; --ink-rgb: 23, 24, 28; --max-width: 1400px; --gutter: 1.5rem; --header-h: 5.5rem; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tile: 4.5rem; } @media (min-width: 768px) { :root { --gutter: 2.5rem; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html { /* Only the scroll root clips horizontally. Putting overflow on makes it a scroll container sitting between the sticky header and the viewport, which makes the header judder as you scroll. */ overflow-x: hidden; } html, body.site-home, body.site-sub { margin: 0; background-color: var(--background); color: var(--foreground); font-family: 'Figtree', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.site-home, body.site-sub { min-height: 100vh; display: flex; flex-direction: column; } body.site-home > main, body.site-sub > main { flex: 1; } ::selection { background: var(--accent); color: #fff; } :where(body.site-home, body.site-sub) a { color: inherit; text-decoration: none; } :where(body.site-home, body.site-sub) a:hover { color: var(--accent); } body.site-home :focus-visible, body.site-sub :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .on-dark :focus-visible, header :focus-visible, .hero__panel :focus-visible { outline-color: #fff; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--foreground); } /* Skip link */ body.site-home > a[href="#main"], body.site-sub > a[href="#main"] { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 0.85rem 1.5rem; background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } body.site-home > a[href="#main"]:focus, body.site-sub > a[href="#main"]:focus { left: 0; } /* ─────────────────────────── primitives ─────────────────────────── */ .section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } :target, body.site-sub main h2[id], body.site-sub main section[id] { scroll-margin-top: calc(var(--header-h) + 2rem); } /* Eyebrow: a small solid accent square, then a spaced-out uppercase label. */ .subheading { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.1rem; } .subheading::before { content: ''; width: 0.5rem; height: 0.5rem; background: var(--accent); flex-shrink: 0; } .subheading span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .on-dark .subheading span, .hero__panel .subheading span { color: rgba(255, 255, 255, 0.72); } .hero__panel .subheading::before { background: #fff; } /* Hairline with square accent caps at both ends. */ .rule-caps { position: relative; height: 1px; background: var(--border); margin: 3rem 0; } .rule-caps::before, .rule-caps::after { content: ''; position: absolute; top: 50%; width: 0.5rem; height: 0.5rem; transform: translateY(-50%); background: var(--accent); } .rule-caps::before { left: 0; } .rule-caps::after { right: 0; } .on-dark .rule-caps { background: var(--border-dark); } /* Dark band */ .on-dark { background: var(--ink); color: var(--hero-text); } .on-dark :where(h1, h2, h3, h4) { color: #fff; } .on-dark :where(p, li, dd, address, figcaption) { color: var(--muted-dark); } /* ─────────────────────────── buttons ─────────────────────────── */ /* A button is a rectangle plus a welded square. The square always carries the opposite tone of the block it is attached to. */ .btn { display: inline-flex; align-items: stretch; border: 0; padding: 0; font-family: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; cursor: pointer; text-decoration: none; transition: background 0.25s, color 0.25s, border-color 0.25s; } .btn > span:first-child { display: flex; align-items: center; padding: 1.15rem 1.5rem; } .btn__arrow { display: flex; align-items: center; justify-content: center; width: 3.25rem; flex-shrink: 0; background: var(--ink); color: #fff; transition: background 0.25s, color 0.25s; } .btn--accent { background: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-deep); color: #fff; } .btn--light { background: #fff; color: var(--foreground); } .btn--light:hover { background: var(--accent); color: #fff; } .btn--outline { background: transparent; color: var(--foreground); border: 1px solid var(--border); } .btn--outline .btn__arrow { margin: -1px -1px -1px 0; } .btn--outline:hover { border-color: var(--accent); color: var(--accent); } .btn--outline:hover .btn__arrow { background: var(--accent); } .on-dark .btn--outline { color: #fff; border-color: var(--border-dark); } .on-dark .btn--outline .btn__arrow { background: var(--accent); } .on-dark .btn--outline:hover { border-color: var(--accent); color: #fff; } .action-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ─────────────────────────── header ─────────────────────────── */ /* `top` is set inline by the layout engine to minus the height of the strips above the nav row, so those scroll away and the nav row pins. The header's own height never changes — changing it while stuck reflows the whole page under the reader. */ body.site-home > header, body.site-sub > header { position: sticky; top: 0; z-index: 100; background: var(--ink); transition: box-shadow 0.3s; } header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } /* Utility strip */ .top-bar { margin: 0; padding: 0.65rem var(--gutter); text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); background: var(--ink-2); border-bottom: 1px solid var(--border-dark); } /* Contact blocks: accent square tile, small label, bold value. */ .header-info { display: none; max-width: var(--max-width); margin: 0 auto; padding: 1.5rem var(--gutter); gap: 3rem; border-bottom: 1px solid var(--border-dark); } @media (min-width: 1024px) { .header-info { display: flex; align-items: center; } } .header-info__item { display: flex; align-items: center; gap: 1rem; } .header-info__icon { width: 3rem; height: 3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } .header-info__label { display: block; margin-bottom: 0.25rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .header-info__value { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: #fff; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: var(--max-width); margin: 0 auto; padding: 0.85rem var(--gutter); } .site-logo { flex-shrink: 0; display: flex; align-items: center; } .site-logo img { height: 60px; width: auto; object-fit: contain; } @media (min-width: 768px) { .site-logo img { height: 74px; } } /* The phone lives in the info strip now; the header keeps a CTA instead. */ .header-phone { display: none; } .header-cta { display: none; } /* Below this the CTA would push the nav onto a second line. */ @media (min-width: 1400px) { .header-cta { display: inline-flex; } } /* Nav */ .site-nav { position: fixed; inset: 0; z-index: 200; padding: 6rem 1.5rem 2rem; background: var(--ink); color: #fff; opacity: 0; visibility: hidden; overflow-y: auto; transition: opacity 0.25s, visibility 0.25s; } .site-nav.is-open { opacity: 1; visibility: visible; } @media (min-width: 1024px) { .site-nav { position: static; padding: 0; background: transparent; opacity: 1; visibility: visible; overflow: visible; } } .site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } /* Eight top-level items have to share the bar with the logo and the CTA, so the gap opens up only once there is width to spend on it. */ @media (min-width: 1024px) { .site-nav > ul { flex-direction: row; align-items: center; gap: 1.25rem; } } @media (min-width: 1500px) { .site-nav > ul { gap: 2rem; } } .site-nav > ul > li { position: relative; } .site-nav > ul > li > a { display: block; padding: 0.85rem 0; font-size: 1rem; font-weight: 600; color: #fff; transition: color 0.2s; } @media (min-width: 1024px) { /* Short rule above each item — the reference's nav tick. */ .site-nav > ul > li > a { font-size: 0.9375rem; padding: 1.35rem 0 1.25rem; } .site-nav > ul > li > a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.18); transition: background 0.25s; } .site-nav > ul > li:hover > a::before, .site-nav > ul > li > a[aria-current="page"]::before { background: var(--accent); } } .site-nav > ul > li > a[aria-current="page"] { color: var(--accent); } @media (min-width: 1024px) { .site-nav > ul > li > a[aria-current="page"] { color: #fff; } } .site-nav > ul > li > ul { list-style: none; margin: 0; padding: 0 0 0 1rem; } @media (min-width: 1024px) { .site-nav > ul > li > ul { position: absolute; top: 100%; left: -1.25rem; min-width: 15rem; padding: 0.5rem 0; background: var(--ink-2); border-top: 2px solid var(--accent); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 50; } /* The panel fades out over 0.2s, staying visible — and therefore hit-testable — the whole time. pointer-events is not transitioned, so it releases the moment the pointer leaves and clicks reach the hero. */ .site-nav > ul > li > ul { pointer-events: none; } .site-nav > ul > li:hover > ul, .site-nav > ul > li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } } .site-nav > ul > li > ul a { display: block; padding: 0.65rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); transition: background 0.2s, color 0.2s; } .site-nav > ul > li > ul a:hover { background: var(--accent); color: #fff; } .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 3rem; height: 3rem; padding: 0; border: 0; background: var(--accent); cursor: pointer; flex-shrink: 0; transition: background 0.2s; } .menu-toggle:hover { background: var(--accent-deep); } @media (min-width: 1024px) { .menu-toggle { display: none; } } .menu-toggle span { display: block; width: 1.1rem; height: 2px; background: #fff; transition: transform 0.3s, opacity 0.3s; } .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.is-active span:nth-child(2) { opacity: 0; } .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─────────────────────── page furniture ─────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); z-index: 300; pointer-events: none; } .back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: var(--accent); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--ink); } /* Reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } body.site-home:not(.is-ready) main > section, body.site-sub:not(.is-ready) > main > * { opacity: 0; } body.is-ready main > section, body.site-sub.is-ready > main > * { opacity: 1; transition: opacity 0.3s; } /* ═══════════════════════════ HOME ═══════════════════════════ */ /* ─── Hero: photo bleed with a solid accent panel laid over it ─── */ .hero-wrap { padding: 0; } .hero { position: relative; min-height: 34rem; display: flex; align-items: stretch; background: var(--ink); overflow: hidden; } @media (min-width: 1024px) { .hero { min-height: 42rem; } } .hero__bg { position: absolute; inset: 0; background-color: var(--ink); background-size: cover; /* The photography is portrait, so a wide viewport crops it to a narrow horizontal band. Biasing above centre keeps the handles and grips in frame instead of showing bare blade. */ background-position: 50% 38%; background-repeat: no-repeat; } .hero__bg--layer { opacity: 0; transition: opacity 1.2s var(--ease-out); } .hero__bg--layer.is-active { opacity: 1; } .hero__bg.media-placeholder { background-image: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(23, 24, 28, 0.82) 0%, rgba(23, 24, 28, 0.35) 55%, rgba(23, 24, 28, 0.15) 100% ); } @media (min-width: 1024px) { .hero__overlay { background: linear-gradient( to right, rgba(23, 24, 28, 0.55) 0%, rgba(23, 24, 28, 0.3) 100% ); } } .hero__content { position: relative; z-index: 20; display: flex; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); align-items: stretch; } /* The panel is the hero. Solid accent, hard edges, everything inside it. */ .hero__panel { position: relative; width: 100%; padding: 3rem 2rem; background: var(--accent); color: #fff; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } @media (min-width: 768px) { .hero__panel { padding: 4rem 3.5rem; } } @media (min-width: 1024px) { .hero__panel { width: 56%; max-width: 45rem; padding: 5rem 4rem; } } /* Faint angular line-work — the reference's panel decoration. */ .hero__panel::before, .hero__panel::after { content: ''; position: absolute; border: 1px solid rgba(255, 255, 255, 0.16); pointer-events: none; } .hero__panel::before { top: -3rem; left: -6rem; width: 22rem; height: 11rem; transform: skewX(-28deg); } .hero__panel::after { bottom: -5rem; right: -4rem; width: 20rem; height: 12rem; transform: skewX(-28deg); } .hero__text { position: relative; z-index: 2; } .hero__text h1 { margin: 0 0 1.5rem; font-size: clamp(2.125rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; text-transform: uppercase; color: #fff; } .hero__rule { display: none; } .hero__text > p:not(.subheading):not(.hero__hours) { margin: 0 0 1rem; max-width: 34rem; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.88); } .hero__hours { margin: 0 !important; font-size: 0.8125rem !important; font-weight: 500; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.72) !important; } .hero__hours strong { font-weight: 700; color: #fff; } .hero__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .hero-cta__divider { display: none; } /* Hero CTAs use the same welded-square anatomy as .btn. */ .hero-cta { display: inline-flex; align-items: stretch; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: #fff; color: var(--foreground); transition: background 0.25s, color 0.25s; } .hero-cta > span:first-child { display: flex; align-items: center; padding: 1.15rem 1.5rem; } .hero-cta__icon { display: flex; align-items: center; justify-content: center; width: 3.25rem; flex-shrink: 0; background: var(--ink); color: #fff; transition: background 0.25s; } .hero-cta:hover { background: var(--ink); color: #fff; } .hero-cta:hover .hero-cta__icon { background: var(--accent); } /* The second CTA reads as the quiet one. */ .hero__actions > .hero-cta:last-child { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); } .hero__actions > .hero-cta:last-child .hero-cta__icon { background: rgba(255, 255, 255, 0.16); } .hero__actions > .hero-cta:last-child:hover { background: #fff; color: var(--foreground); } .hero__actions > .hero-cta:last-child:hover .hero-cta__icon { background: var(--ink); color: #fff; } /* Slide controls */ .hero__dots { position: absolute; right: var(--gutter); bottom: 1.5rem; z-index: 30; display: none; gap: 0.4rem; } @media (min-width: 1024px) { .hero__dots { display: flex; } } .hero__dot { width: 1.75rem; height: 0.25rem; padding: 0; border: 0; background: rgba(255, 255, 255, 0.7); /* The slides are not all dark, so the dots carry their own separation. */ box-shadow: 0 0 0 1px rgba(23, 24, 28, 0.3); cursor: pointer; transition: background 0.25s, width 0.25s var(--ease-out); } .hero__dot.is-active { background: var(--accent); width: 3rem; } .hero__scroll-cue { display: none; } /* ─── Brand ticker ─── */ .brands-strip { padding: 1.5rem 0; background: var(--ink-2); overflow: hidden; } .brands-strip__inner { display: flex; align-items: center; gap: 2rem; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .brands-strip__label { display: none; flex-shrink: 0; margin: 0; padding-right: 2rem; border-right: 1px solid var(--border-dark); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } @media (min-width: 768px) { .brands-strip__label { display: block; } } .brands-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .brands-track { display: flex; align-items: center; gap: 3rem; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 42s linear infinite; } .brands-marquee:hover .brands-track, .brands-marquee:focus-within .brands-track { animation-play-state: paused; } .brands-track li { display: flex; align-items: center; gap: 3rem; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, 0.68); } .brands-track li::after { content: ''; width: 0.375rem; height: 0.375rem; background: var(--accent); flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .brands-track { animation: none; } } /* ─── About ─── */ .about-section { padding: 5rem 0; } @media (min-width: 768px) { .about-section { padding: 7rem 0; } } .about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } } .about-text h2 { margin: 0 0 1.5rem; font-size: clamp(1.875rem, 3.6vw, 2.75rem); } .about-text > p { margin: 0 0 1.15rem; font-size: 1rem; line-height: 1.75; color: var(--muted); } .about-side { display: flex; flex-direction: column; gap: 3rem; min-width: 0; } /* Photo with a solid accent block anchored over its corner. */ .about-media { position: relative; aspect-ratio: 4 / 3; margin-left: 3rem; } .about-media__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--ink); } .about-media__badge { position: absolute; left: -3rem; bottom: -1px; max-width: 17rem; padding: 1.35rem 1.5rem; background: var(--accent); color: #fff; font-size: 0.875rem; font-weight: 500; line-height: 1.5; } .about-media__badge strong { display: block; margin-bottom: 0.4rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } /* ─── Services ─── */ .services-section { position: relative; padding: 5rem 0; background: var(--surface); } @media (min-width: 768px) { .services-section { padding: 7rem 0; } } .services-header { max-width: 44rem; margin-bottom: 4rem; } .services-header h2 { margin: 0; font-size: clamp(1.875rem, 3.6vw, 2.75rem); } .services-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } /* Card with a dark icon tile hung off its top-left corner. */ .service-card { position: relative; display: flex; flex-direction: column; margin-top: calc(var(--tile) / 2); padding: 3.25rem 2rem 2rem; background: var(--card); border: 1px solid var(--border); transition: border-color 0.3s, box-shadow 0.3s; } .service-card:hover { border-color: var(--accent); box-shadow: 0 18px 40px rgba(23, 24, 28, 0.08); } .service-card__icon { position: absolute; top: calc(var(--tile) / -2); left: 2rem; width: var(--tile); height: var(--tile); display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; transition: background 0.3s; } .service-card:hover .service-card__icon { background: var(--accent); } .service-card h3 { margin: 0 0 0.85rem; font-size: 1.3125rem; } .service-card p { flex: 1; margin: 0 0 1.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--muted); } .service-card > a { display: inline-flex; align-items: center; gap: 0.6rem; width: 100%; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--foreground); transition: color 0.2s, gap 0.2s; } .service-card > a:hover { color: var(--accent); gap: 1rem; } .service-card__tag { position: absolute; top: 0; right: 0; padding: 0.5rem 0.9rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; background: var(--accent); color: #fff; z-index: 3; } /* Feature card: photo ground, white type, spans two columns. */ .service-card--feature { overflow: hidden; border-color: var(--ink); } @media (min-width: 640px) { .service-card--feature { grid-column: span 2; min-height: 22rem; justify-content: flex-end; } } .service-card--feature .service-card__media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s var(--ease-out); } .service-card--feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(23, 24, 28, 0.95) 25%, rgba(23, 24, 28, 0.75) 65%, rgba(23, 24, 28, 0.5) 100% ); } .service-card--feature:hover .service-card__media { transform: scale(1.06); } /* Lift the card's own children above the photo scrim — but not the tag, which is absolutely positioned and would be stretched by this. */ .service-card--feature > *:not(.service-card__media):not(.service-card__tag) { position: relative; z-index: 2; } .service-card--feature h3 { max-width: 20ch; font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; } .service-card--feature p { flex: 0 0 auto; max-width: 46ch; color: rgba(255, 255, 255, 0.78); } .service-card--feature > a { color: #fff; border-top-color: rgba(255, 255, 255, 0.22); } .service-card--feature > a:hover { color: #fff; } /* ─── Reviews ─── */ .reviews-section { padding: 5rem 0; background: var(--surface); } @media (min-width: 768px) { .reviews-section { padding: 7rem 0; } } .reviews-header { max-width: 44rem; margin-bottom: 3.5rem; } .reviews-header h2 { margin: 0; font-size: clamp(1.875rem, 3.6vw, 2.75rem); } .reviews-masonry { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 768px) { .reviews-masonry { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .reviews-masonry { grid-template-columns: repeat(3, 1fr); } } .review-card { position: relative; padding: 2.25rem 2rem; background: var(--card); border: 1px solid var(--border); transition: border-color 0.3s, box-shadow 0.3s; } .review-card:hover { border-color: var(--accent); box-shadow: 0 18px 40px rgba(23, 24, 28, 0.08); } .review-card__quote-mark { position: absolute; top: 1.25rem; right: 1.75rem; font-size: 4rem; line-height: 1; font-weight: 800; color: var(--accent-soft); user-select: none; pointer-events: none; } .review-card__avatar { position: relative; z-index: 1; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 1.25rem; font-weight: 700; } .review-card__stars { display: flex; gap: 0.2rem; margin-bottom: 1rem; color: var(--accent); } .review-card blockquote { margin: 0; } .review-card blockquote p { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.75; color: var(--muted); } .review-card__divider { width: 2.5rem; height: 2px; margin-bottom: 1.25rem; background: var(--accent); } .review-card footer { font-size: 0.9375rem; font-weight: 700; color: var(--foreground); } .review-card__source { display: block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ─── Closing CTA + map ─── */ .cta-section { padding: 0; } .cta-panel { position: relative; padding: 4.5rem 0 0; background: var(--ink); color: #fff; text-align: center; } .cta-panel .subheading { justify-content: center; } .cta-panel h2 { margin: 0 auto 1rem; max-width: 24ch; padding: 0 var(--gutter); font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: #fff; } .cta-panel > p { margin: 0 auto; max-width: 46rem; padding: 0 var(--gutter); font-size: 1rem; line-height: 1.7; color: var(--muted-dark); } .cta-panel p a { color: #fff; font-weight: 600; border-bottom: 2px solid var(--accent); } .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2.25rem 0 3.5rem; padding: 0 var(--gutter); } .map-embed iframe { display: block; width: 100%; border: 0; min-height: 380px; } /* ─── Visit strip ─── */ .visit-strip { padding: 4.5rem 0; background: var(--surface); } .visit-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .visit-grid { grid-template-columns: repeat(3, 1fr); } } .visit-block { padding: 2rem; background: var(--card); border: 1px solid var(--border); transition: border-color 0.3s; } .visit-block:hover { border-color: var(--accent); } .visit-block__icon { width: 3rem; height: 3rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } .visit-block h2 { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .visit-block address, .visit-block p, .visit-block dl { margin: 0; font-style: normal; font-size: 1rem; font-weight: 500; line-height: 1.7; color: var(--foreground); } .visit-block dl { display: grid; gap: 0.6rem; } .visit-block dt { font-size: 0.8125rem; font-weight: 700; color: var(--foreground); } .visit-block dd { margin: 0.1rem 0 0; color: var(--muted); } .visit-block a:hover { color: var(--accent); } .visit-social-link { display: inline-flex; align-items: center; margin-top: 0.5rem; color: var(--accent); } /* ═══════════════════════════ SUBPAGES ═══════════════════════════ */ body.site-sub > main.sub-shell { max-width: none; padding: 0; } .page-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; } .page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.35; } .page-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(23, 24, 28, 0.94) 30%, rgba(23, 24, 28, 0.55) 100% ); } .page-hero__inner { position: relative; z-index: 2; padding-top: 3.5rem; padding-bottom: 3.5rem; } @media (min-width: 768px) { .page-hero__inner { padding-top: 5rem; padding-bottom: 5rem; } } .page-hero h1 { margin: 0 0 1.25rem; max-width: 22ch; font-size: clamp(1.875rem, 4.4vw, 3.25rem); font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; color: #fff; } .page-hero__lead { margin: 0; max-width: 46rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, 0.78); } .page-hero__rule { width: 4rem; height: 3px; margin-top: 2rem; background: var(--accent); } /* Breadcrumb */ .breadcrumb { margin-bottom: 1.5rem; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; padding: 0; list-style: none; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .breadcrumb li { display: flex; align-items: center; gap: 0.6rem; } .breadcrumb li + li::before { content: ''; width: 0.3rem; height: 0.3rem; background: var(--accent); } .breadcrumb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .breadcrumb a:hover { color: #fff; } .breadcrumb [aria-current='page'] { color: var(--accent); } /* Two-column shell */ .sub-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 4.5rem; align-items: start; } @media (min-width: 1024px) { .sub-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; padding-top: 5rem; padding-bottom: 6rem; } } .sub-main { min-width: 0; display: flex; flex-direction: column; gap: 3rem; } :where(body.site-sub > main) :where(p, li) { color: var(--muted); } :where(body.site-sub) main :where(p, li, address, dd, figcaption) a { color: var(--foreground); font-weight: 600; border-bottom: 2px solid var(--accent); } :where(body.site-sub) main :where(p, li, address, dd, figcaption) a:hover { color: var(--accent); } /* Content sections: a hard rule above each heading with an accent inset. */ .content-section { margin: 0; padding: 0; } body.site-sub .content-section > h2 { position: relative; margin: 0 0 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border); font-size: clamp(1.375rem, 2.6vw, 1.875rem); } body.site-sub .content-section > h2::before { content: ''; position: absolute; top: -2px; left: 0; width: 4rem; height: 2px; background: var(--accent); } .content-section > p { margin: 0 0 1.15rem; font-size: 1rem; line-height: 1.75; } .content-section > p:last-child { margin-bottom: 0; } /* Lists become bordered rows with an accent square. */ .feature-list { display: grid; grid-template-columns: 1fr; margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); } @media (min-width: 640px) { .feature-list { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } } .feature-list--stack { grid-template-columns: 1fr; } .feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--border); font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--foreground); transition: padding-left 0.25s var(--ease-out), color 0.25s; } .feature-list li:hover { padding-left: 0.75rem; color: var(--accent); } .feature-list li::before { content: ''; flex-shrink: 0; margin-top: 0.45rem; width: 0.375rem; height: 0.375rem; background: var(--accent); } /* Pull quote */ .pull-quote { position: relative; margin: 0; padding: 2.5rem 2rem; background: var(--ink); border-left: 4px solid var(--accent); color: #fff; } @media (min-width: 768px) { .pull-quote { padding: 3rem; } } .pull-quote__mark { position: absolute; top: 1rem; right: 2rem; font-size: 5rem; line-height: 1; font-weight: 800; color: rgba(255, 255, 255, 0.08); user-select: none; pointer-events: none; } .pull-quote p { position: relative; margin: 0 0 1.25rem; font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 500; line-height: 1.5; color: #fff !important; } .pull-quote footer { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } /* Closing band */ .sub-cta { padding: 2.5rem 2rem; background: var(--ink); } @media (min-width: 768px) { .sub-cta { padding: 3rem; } } /* ─── Rail ─── */ .sub-rail { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } @media (min-width: 1024px) { .sub-rail { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .rail-card { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); } .rail-card h2 { margin: 0 0 1.25rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .rail-card--dark { background: var(--ink); border-color: var(--ink); color: #fff; } .rail-card--dark h2 { border-bottom-color: var(--border-dark); color: var(--accent); } body.site-sub .rail-card :where(p, address, dd, dt) { margin: 0; font-style: normal; font-size: 0.9375rem; line-height: 1.65; } .rail-card--dark address { margin-bottom: 1.25rem !important; color: rgba(255, 255, 255, 0.72); } .rail-card dl { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; } .rail-card--dark dt { font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .rail-card--dark dd { color: #fff; } .rail-card__phone { display: block; margin-bottom: 1.25rem !important; font-size: 1.5rem !important; font-weight: 800; letter-spacing: -0.02em; color: #fff; } .rail-card--dark a:not(.btn) { color: #fff; border-bottom: 0; } .rail-card--dark a:not(.btn):hover { color: var(--accent); } .rail-card .btn { width: 100%; justify-content: space-between; } /* On this page */ .toc { margin: 0; padding: 0; list-style: none; } .toc a { display: block; padding: 0.7rem 0 0.7rem 1rem; border-left: 2px solid var(--border); font-size: 0.875rem; font-weight: 500; line-height: 1.45; color: var(--muted); text-decoration: none; transition: color 0.2s, border-color 0.2s, padding-left 0.2s; } .toc a:hover { color: var(--accent); padding-left: 1.25rem; } .toc a.is-active { border-left-color: var(--accent); color: var(--foreground); font-weight: 700; } /* ─── Gallery ─── */ .gallery-grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: 1.5rem 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-card { position: relative; margin: 0; } .gallery-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity 0.4s var(--ease-out); } .gallery-card:hover img { opacity: 0.86; } .gallery-card figcaption { padding-top: 0.6rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); } body.site-sub .gallery-card figcaption a { color: var(--foreground); border-bottom: 0; } body.site-sub .gallery-card figcaption a:hover { color: var(--accent); } .gallery-card.is-missing { border: 1px solid var(--border); } .gallery-card.is-missing img { display: none; } .gallery-card__placeholder { display: none; } .gallery-card.is-missing .gallery-card__placeholder { display: flex; min-height: 15rem; height: 100%; align-items: center; justify-content: center; color: var(--muted-dark); } /* ─── Contact form ─── */ .contact-form { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (min-width: 640px) { .contact-form { grid-template-columns: repeat(2, 1fr); } .contact-form .form-field--wide, .contact-form .form-actions { grid-column: 1 / -1; } } .form-field { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; } .form-field label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .form-field input, .form-field textarea { width: 100%; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: 0; background: var(--surface); font-family: inherit; font-size: 0.9375rem; color: var(--foreground); transition: border-color 0.2s, background 0.2s; } .form-field textarea { min-height: 10rem; resize: vertical; } .form-field input:focus, .form-field textarea:focus { outline: none; background: #fff; border-color: var(--accent); } .form-actions { margin: 0; } /* ─── Hours table ─── */ .hours-table { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font-size: 0.9375rem; } .hours-table th, .hours-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } .hours-table thead th { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); } .hours-table tbody th { font-weight: 600; color: var(--foreground); } .hours-table tbody td { color: var(--muted); } .hours-table tbody tr.is-today { background: var(--accent-soft); } .hours-table tbody tr.is-today th { box-shadow: inset 3px 0 0 var(--accent); } .hours-table__today { display: inline-block; margin-left: 0.6rem; padding: 0.2rem 0.5rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--accent); color: #fff; } .sub-main .map-embed { margin-top: 1.5rem; } .sub-main .map-embed iframe { min-height: 340px; } /* ═══════════════════════════ FOOTER ═══════════════════════════ */ body.site-home > footer, body.site-sub > footer { background: var(--ink); color: var(--muted-dark); padding: 4rem var(--gutter) 0; } .site-footer__inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: var(--max-width); margin: 0 auto; padding-bottom: 3rem; } @media (min-width: 640px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 3rem; } } .site-footer__brand img { height: 76px; width: auto; object-fit: contain; margin-bottom: 1.25rem; } body.site-home > footer .site-footer__brand p, body.site-sub > footer .site-footer__brand p { max-width: 26rem; margin: 0; font-size: 0.9375rem; line-height: 1.75; color: var(--muted-dark); } .site-footer__col h2 { margin: 0 0 1.35rem; font-size: 1rem; font-weight: 700; color: #fff; } .site-footer__col address, .site-footer__col p, .site-footer__col li, .site-footer__col dd { font-style: normal; font-size: 0.9375rem; line-height: 1.7; color: var(--muted-dark); } .site-footer__col address { margin: 0 0 0.75rem; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; } .site-footer__col li, .site-footer__col p { margin: 0; } .site-footer__col li + li, .site-footer__col p + p { margin-top: 0.6rem; } /* Accent square in front of every footer link row. */ .site-footer__col li a, .site-footer__col p a { display: inline-flex; align-items: baseline; gap: 0.6rem; transition: color 0.2s, gap 0.2s; } .site-footer__col li a::before, .site-footer__col p a::before { content: ''; width: 0.3rem; height: 0.3rem; flex-shrink: 0; background: var(--accent); } .site-footer__col li a:hover, .site-footer__col p a:hover { color: #fff; gap: 0.85rem; } .site-footer__col dl { margin: 0; } .site-footer__col dt { margin-top: 0.85rem; font-size: 0.875rem; font-weight: 700; color: #fff; } .site-footer__col dt:first-child { margin-top: 0; } .site-footer__col dd { margin: 0.15rem 0 0; } .site-footer__legal { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 0; border-top: 1px solid var(--border-dark); text-align: center; } body.site-home > footer .site-footer__legal, body.site-sub > footer .site-footer__legal { font-size: 0.8125rem; color: var(--muted-dark); } /* The service-card link is a full-width row: label left, arrow pinned right. */ .service-card > a iconify-icon { margin-left: auto; } /* The prose-link rule matches any `li a`, which catches the rail and the breadcrumb. Those are navigation, not prose — no underline rule applies. */ .toc a, .breadcrumb a, .gallery-card figcaption a { border-bottom: 0; } /* On a near-black band the accent button's black square disappears into the background. Step it down to the deep blue so the two-tone anatomy still reads as one object. */ .on-dark .btn--accent .btn__arrow, .cta-panel .btn--accent .btn__arrow, .sub-cta .btn--accent .btn__arrow, .rail-card--dark .btn--accent .btn__arrow { background: var(--accent-deep); } .on-dark .btn--accent:hover .btn__arrow, .cta-panel .btn--accent:hover .btn__arrow, .sub-cta .btn--accent:hover .btn__arrow, .rail-card--dark .btn--accent:hover .btn__arrow { background: var(--ink); } /* ─── Spec list ─── Term/value rows for factual detail (year established, hours, languages). Same bordered-row rhythm as .feature-list so the two read as one family. */ .content-section dl { display: grid; grid-template-columns: 1fr; margin: 1.5rem 0 0; border-top: 1px solid var(--border); } @media (min-width: 560px) { .content-section dl { grid-template-columns: minmax(9rem, 12rem) 1fr; } } .content-section dt { padding: 0.85rem 0 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .content-section dd { margin: 0; padding: 0 0 0.85rem; border-bottom: 1px solid var(--border); font-size: 0.9375rem; font-weight: 500; line-height: 1.6; color: var(--foreground); } @media (min-width: 560px) { .content-section dt { padding: 0.9rem 1.5rem 0.9rem 0; border-bottom: 1px solid var(--border); } .content-section dd { padding: 0.9rem 0; } } /* ─── Store photo strip ─── Full-bleed shelf photography between the category carousel and the reviews. Edge to edge, so the photographs themselves form the band rather than sitting on one. */ .photo-strip { padding: 5rem 0 0; } @media (min-width: 768px) { .photo-strip { padding-top: 7rem; } } .photo-strip__header { max-width: 44rem; margin-bottom: 3rem; } .photo-strip__header h2 { margin: 0 0 1rem; font-size: clamp(1.875rem, 3.6vw, 2.75rem); } .photo-strip__header p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--muted); } .photo-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; } @media (min-width: 1024px) { .photo-strip__grid { grid-template-columns: repeat(4, 1fr); } } .photo-tile { position: relative; overflow: hidden; background: var(--ink); } .photo-tile > a { display: block; height: 100%; } .photo-tile figure { position: relative; margin: 0; height: 100%; } .photo-tile__arrow { position: absolute; top: 0; right: 0; z-index: 3; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; opacity: 0; transform: translateY(-0.5rem); transition: opacity 0.3s, transform 0.3s var(--ease-out); } .photo-tile:hover .photo-tile__arrow, .photo-tile > a:focus-visible .photo-tile__arrow { opacity: 1; transform: translateY(0); } /* The caption is the link's label, so it brightens with the rest of the tile. */ .photo-tile:hover figcaption { color: #fff; } .photo-tile img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.8s var(--ease-out); } .photo-tile:hover img { transform: scale(1.06); } /* The caption stays legible over any photo by riding its own scrim. */ .photo-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.25rem 1.15rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: linear-gradient(to top, rgba(23, 24, 28, 0.92), transparent); } /* A hairline of accent along the top edge on hover, to tie the tiles to the rest of the system without adding chrome at rest. */ .photo-tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease-out); z-index: 2; } .photo-tile:hover::after { transform: scaleX(1); } /* ══════════════════════════════════════════════════════════════════════ MOBILE REFINEMENTS Layout already reflows correctly at every width — no page scrolls horizontally. What phones need beyond that is finger-sized targets and a floor under the small uppercase labels the design leans on. Nothing here changes content or desktop rendering. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── Touch targets ── Standalone links sat at 17–29px tall. Padding lifts them toward the 44px finger target without moving anything visually, since the extra height is absorbed by the gaps already between them. Links inside a sentence are deliberately excluded: WCAG exempts inline targets, and padding them would break the line box around them. */ .site-footer__col li a, .site-footer__col p a, .site-footer__brand a { padding-top: 0.5rem; padding-bottom: 0.5rem; } .site-footer__col li + li, .site-footer__col p + p { margin-top: 0; } .breadcrumb ol { gap: 0.35rem 0.6rem; } .breadcrumb a, .breadcrumb [aria-current='page'] { display: inline-block; padding: 0.4rem 0; } .toc a { padding-top: 0.9rem; padding-bottom: 0.9rem; } .header-info__value, .rail-card__phone a, .visit-block address a, .visit-block p a { display: inline-block; padding: 0.3rem 0; } .gallery-card figcaption a, .photo-tile figcaption { display: inline-block; padding: 0.35rem 0; } /* A paragraph that is nothing but a link is a standalone target, not an inline one, so it does not get the inline exemption. :only-child keeps this off links sitting inside a sentence. */ .content-section p > a:only-child { display: inline-block; padding: 0.5rem 0; } /* Icon-only links need a real box, not just the glyph's own size. */ .visit-social-link, .site-footer__col a[aria-label] { min-width: 2.75rem; min-height: 2.75rem; align-items: center; } .feature-list li { padding-top: 1rem; padding-bottom: 1rem; } /* Where a list row is entirely a link, the anchor — not the row — has to be the target. Negative margin keeps the row's height unchanged. */ .feature-list li a { display: block; padding: 0.55rem 0; margin: -0.55rem 0; } /* ── Small-label legibility ── The uppercase micro-labels run 10–11px, which is fine on a desktop at arm's length and tight on a handset. 12px is the floor. */ .top-bar, .breadcrumb ol, .rail-card h2, .form-field label, .content-section dt, .photo-tile figcaption, .hours-table thead th, .hours-table__today, .header-info__label, .about-media__badge strong, .service-card__tag, .category-card__count { font-size: 0.75rem; } /* compounds on an already-small parent, landing near 10px. Match the parent rather than setting an absolute size, which would make the copyright larger than the footer text above it. */ .site-footer__legal small { font-size: inherit; } /* The back-to-top button is fixed to the bottom-right corner and sits over the centred legal line once the page is scrolled to the end. */ body.site-home > footer, body.site-sub > footer { padding-bottom: 5.5rem; } /* Letterspacing at these sizes costs more legibility than it buys. */ .top-bar, .breadcrumb ol { letter-spacing: 0.1em; } } /* ─── Lightbox ─── Click-to-enlarge for galleries marked [data-lightbox]. */ .gallery-grid--zoomable .gallery-card { cursor: zoom-in; } /* The zoom control covers the tile, so the whole photo is the target, with a visible square appearing at the corner on hover and on keyboard focus. */ .gallery-card__zoom { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: flex-end; padding: 0; border: 0; background: transparent; color: #fff; cursor: zoom-in; } .gallery-card__zoom iconify-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: var(--accent); opacity: 0; transform: translateY(-0.5rem); transition: opacity 0.3s, transform 0.3s var(--ease-out); } .gallery-card:hover .gallery-card__zoom iconify-icon, .gallery-card__zoom:focus-visible iconify-icon { opacity: 1; transform: translateY(0); } .gallery-card__zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Clicks on the caption belong to the tile's zoom control beneath it. */ .gallery-grid--zoomable .gallery-card figcaption { pointer-events: none; } .lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; background: rgba(23, 24, 28, 0.97); opacity: 0; transition: opacity 0.25s var(--ease-out); } .lightbox.is-open { opacity: 1; } .lightbox[hidden] { display: none; } .lightbox__stage { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .lightbox__figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .lightbox__figure img { display: block; max-width: 100%; max-height: 74vh; object-fit: contain; transform: scale(0.98); transition: transform 0.25s var(--ease-out); } .lightbox.is-open .lightbox__figure img { transform: scale(1); } .lightbox__figure figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 1rem; text-align: center; } .lightbox__caption { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; } .lightbox__count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--accent-light); } .lightbox__close, .lightbox__nav { flex-shrink: 0; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: background 0.2s; } .lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); } .lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; } .lightbox__nav[hidden] { display: none; } @media (max-width: 767px) { /* Thumbs reach the bottom of a phone far more easily than the sides. */ .lightbox { flex-wrap: wrap; align-content: center; padding: 1rem 1rem 5.5rem; } .lightbox__stage { flex: 0 0 100%; order: 1; } .lightbox__nav { order: 2; width: 3.5rem; height: 3.5rem; background: rgba(255, 255, 255, 0.14); } .lightbox__figure img { max-height: 62vh; } } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__figure img, .gallery-card__zoom iconify-icon { transition: none; } }