1468 lines
38 KiB
Plaintext
1468 lines
38 KiB
Plaintext
---
|
|
import Layout from "@/layouts/main.astro"
|
|
import { siteContent } from "@/content/site-content"
|
|
|
|
const navItems = [
|
|
{ label: "Leistungen", href: "#leistungen" },
|
|
{ label: "Team", href: "#team" },
|
|
{ label: "Zeiten", href: "#zeiten" },
|
|
{ label: "Kontakt", href: "#kontakt" },
|
|
]
|
|
---
|
|
|
|
<Layout title="Haarscharf Crimmitschau | Friseur in der Annenstraße">
|
|
<a class="skip-link" href="#top">Zum Inhalt springen</a>
|
|
|
|
<header class="site-header-v2">
|
|
<a class="brand-lockup" href="#top" aria-label="Haarscharf Startseite">
|
|
<span class="brand-mark">H</span>
|
|
<span>
|
|
<span class="block font-heading text-lg leading-none">{siteContent.business.name}</span>
|
|
<span class="brand-descriptor">{siteContent.business.descriptor}</span>
|
|
</span>
|
|
</a>
|
|
|
|
<nav aria-label="Hauptnavigation" class="hidden items-center gap-1 md:flex">
|
|
{navItems.map((item) => <a class="nav-link-v2" href={item.href}>{item.label}</a>)}
|
|
</nav>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
class="mobile-nav-toggle md:hidden"
|
|
aria-expanded="false"
|
|
aria-controls="mobile-nav"
|
|
aria-label="Menü öffnen"
|
|
type="button"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
|
|
<line x1="3" y1="5" x2="17" y2="5" />
|
|
<line x1="3" y1="10" x2="17" y2="10" />
|
|
<line x1="3" y1="15" x2="17" y2="15" />
|
|
</svg>
|
|
</button>
|
|
<a class="button-link-v2 button-link-v2--compact" href={siteContent.cta.primary.href}>
|
|
Anrufen
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="mobile-nav" class="mobile-nav" aria-label="Mobile Navigation" role="dialog" aria-modal="true">
|
|
<div class="mobile-nav-backdrop"></div>
|
|
<div class="mobile-nav-panel">
|
|
<button class="mobile-nav-close" aria-label="Menü schließen" type="button">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
|
|
<line x1="4" y1="4" x2="16" y2="16" />
|
|
<line x1="16" y1="4" x2="4" y2="16" />
|
|
</svg>
|
|
</button>
|
|
<ul class="mobile-nav-list">
|
|
{navItems.map((item) => (
|
|
<li><a class="mobile-nav-link" href={item.href}>{item.label}</a></li>
|
|
))}
|
|
</ul>
|
|
<a class="mobile-nav-phone" href={siteContent.business.phone.href}>
|
|
<span class="contact-label">Telefon</span>
|
|
<strong>{siteContent.business.phone.display}</strong>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<main>
|
|
<!-- Hero: asymmetric, oversized typography, decorative H -->
|
|
<section id="top" class="hero-v2" aria-labelledby="hero-title">
|
|
<div class="hero-deco" aria-hidden="true">H</div>
|
|
<div class="hero-v2__copy">
|
|
<p class="eyebrow-v2">{siteContent.hero.eyebrow}</p>
|
|
<h1 id="hero-title">{siteContent.hero.title}</h1>
|
|
<p class="hero-v2__intro">{siteContent.hero.intro}</p>
|
|
|
|
<div class="hero-v2__actions">
|
|
<a class="button-link-v2" href={siteContent.cta.primary.href}>
|
|
{siteContent.cta.primary.label}
|
|
</a>
|
|
<a class="button-link-v2 button-link-v2--ghost" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
|
|
{siteContent.cta.secondary.label}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="hero-v2__meta" aria-label="Saloninformationen">
|
|
<div>
|
|
<dt>Adresse</dt>
|
|
<dd>{siteContent.business.address.display}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Telefon</dt>
|
|
<dd>{siteContent.business.phone.display}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{siteContent.hours[0].day}</dt>
|
|
<dd>{siteContent.hours[0].time}</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
<!-- Salon Promise: dark background, asymmetric -->
|
|
<section class="section-v2 promise-v2" aria-labelledby="promise-title">
|
|
<div class="promise-v2__intro">
|
|
<p class="eyebrow-v2">Salonversprechen</p>
|
|
<h2 id="promise-title">Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.</h2>
|
|
</div>
|
|
|
|
<div class="promise-v2__grid">
|
|
{
|
|
siteContent.promise.map((item, index) => (
|
|
<article class="promise-v2__card">
|
|
<span class="index-label-v2">{String(index + 1).padStart(2, "0")}</span>
|
|
<h3>{item.title}</h3>
|
|
<p>{item.text}</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Editorial image break: full-bleed, no radius -->
|
|
<figure class="editorial-v2">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=1600&q=80"
|
|
alt="Warm beleuchteter Salon-Innenraum mit Friseurstühlen und Spiegeln"
|
|
width="1600"
|
|
height="900"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>Atmosphäre im Salon</figcaption>
|
|
</figure>
|
|
|
|
<!-- Services: asymmetric offset grid -->
|
|
<section id="leistungen" class="section-v2 services-v2" aria-labelledby="services-title">
|
|
<div class="section-heading-v2">
|
|
<p class="eyebrow-v2">Leistungen</p>
|
|
<h2 id="services-title">Alles, was ein guter Salonbesuch braucht.</h2>
|
|
<p>Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.</p>
|
|
</div>
|
|
|
|
<div class="services-v2__grid">
|
|
{
|
|
siteContent.services.map((service, index) => (
|
|
<article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3rem;" : undefined}>
|
|
<span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span>
|
|
<h3>{service.title}</h3>
|
|
<p>{service.text}</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team: warm surface, bold presentation -->
|
|
<section id="team" class="section-v2 team-v2" aria-labelledby="team-title">
|
|
<div class="section-heading-v2 section-heading-v2--centered">
|
|
<p class="eyebrow-v2">Unser Team</p>
|
|
<h2 id="team-title">Die Menschen hinter den Scheren.</h2>
|
|
</div>
|
|
|
|
<figure class="team-image-v2">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1711274093746-b588a17d2716?auto=format&fit=crop&w=1200&q=82"
|
|
alt="Eine Friseurin bei der Arbeit mit Schere"
|
|
width="1200"
|
|
height="600"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>Handwerk mit Präzision</figcaption>
|
|
</figure>
|
|
|
|
<div class="team-v2__grid">
|
|
{
|
|
siteContent.team.map((member) => (
|
|
<article class="team-v2__card">
|
|
<div class="team-v2__avatar">
|
|
<span>{member.initials}</span>
|
|
</div>
|
|
<h3>{member.name}</h3>
|
|
<p class="team-v2__role">{member.role}</p>
|
|
<p>{member.bio}</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Hours: asymmetric -->
|
|
<section id="zeiten" class="section-v2 hours-v2" aria-labelledby="hours-title">
|
|
<div class="section-heading-v2">
|
|
<p class="eyebrow-v2">Öffnungszeiten</p>
|
|
<h2 id="hours-title">Planbar von Montag bis Samstag.</h2>
|
|
<p>Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.</p>
|
|
</div>
|
|
|
|
<div class="hours-v2__panel">
|
|
{
|
|
siteContent.hours.map((entry) => (
|
|
<div class="hours-v2__row">
|
|
<span>{entry.day}</span>
|
|
<time>{entry.time}</time>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trust: dramatic, oversized number -->
|
|
<section class="trust-v2" aria-labelledby="trust-title">
|
|
<div class="trust-v2__rating">
|
|
<p class="eyebrow-v2">Lokales Vertrauen</p>
|
|
<h2 id="trust-title">{siteContent.reviewSummary.rating}</h2>
|
|
</div>
|
|
<p class="trust-v2__copy">
|
|
<strong>{siteContent.reviewSummary.count}</strong>
|
|
<span>{siteContent.reviewSummary.text}</span>
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Contact: asymmetric, large address -->
|
|
<section id="kontakt" class="section-v2 contact-v2" aria-labelledby="contact-title">
|
|
<div class="section-heading-v2">
|
|
<p class="eyebrow-v2">Kontakt & Anfahrt</p>
|
|
<h2 id="contact-title">Mitten in Crimmitschau.</h2>
|
|
<p class="contact-note">Der schnellste Weg zum Termin: ein kurzer Anruf.</p>
|
|
</div>
|
|
|
|
<div class="contact-v2__layout">
|
|
<div class="contact-v2__left">
|
|
<address class="contact-v2__address">
|
|
<span>{siteContent.business.name}</span>
|
|
<span>{siteContent.business.address.street}</span>
|
|
<span>{siteContent.business.address.postalCode} {siteContent.business.address.city}</span>
|
|
</address>
|
|
|
|
<figure class="contact-image-v2">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=800&q=80"
|
|
alt="Friseur-Werkzeuge: Schere und Kamm auf einer Marmor-Arbeitsfläche"
|
|
width="800"
|
|
height="600"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>Detail & Sorgfalt</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
<div class="contact-v2__actions contact-v2__card">
|
|
<a class="contact-v2__line" href={siteContent.business.phone.href}>
|
|
<span class="contact-label-v2">Telefon</span>
|
|
<strong>{siteContent.business.phone.display}</strong>
|
|
</a>
|
|
<a class="contact-v2__line" href={`mailto:${siteContent.business.email}`}>
|
|
<span class="contact-label-v2">E-Mail</span>
|
|
<strong>{siteContent.business.email}</strong>
|
|
</a>
|
|
<a class="button-link-v2" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
|
|
Route über Google Maps
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA: full-bleed, high contrast -->
|
|
<section class="final-cta-v2" aria-labelledby="final-cta-title">
|
|
<p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
|
|
<h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
|
|
<div class="final-cta-v2__actions">
|
|
<a class="button-link-v2 button-link-v2--light" href={siteContent.cta.primary.href}>
|
|
{siteContent.business.phone.display}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script is:inline>
|
|
(function() {
|
|
const toggle = document.querySelector('.mobile-nav-toggle');
|
|
const nav = document.querySelector('#mobile-nav');
|
|
if (!toggle || !nav) return;
|
|
|
|
const closeBtn = nav.querySelector('.mobile-nav-close');
|
|
const backdrop = nav.querySelector('.mobile-nav-backdrop');
|
|
const links = nav.querySelectorAll('a');
|
|
|
|
function open() {
|
|
nav.classList.add('is-open');
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
document.body.style.overflow = 'hidden';
|
|
if (links.length) {
|
|
setTimeout(() => links[0].focus(), 0);
|
|
}
|
|
document.addEventListener('keydown', onKeyDown);
|
|
}
|
|
|
|
function close() {
|
|
nav.classList.remove('is-open');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
document.removeEventListener('keydown', onKeyDown);
|
|
toggle.focus();
|
|
}
|
|
|
|
function onKeyDown(e) {
|
|
if (e.key === 'Escape') close();
|
|
}
|
|
|
|
toggle.addEventListener('click', open);
|
|
if (closeBtn) closeBtn.addEventListener('click', close);
|
|
if (backdrop) backdrop.addEventListener('click', close);
|
|
links.forEach(link => link.addEventListener('click', close));
|
|
})();
|
|
|
|
/* Scroll-triggered section reveals */
|
|
(function() {
|
|
var revealSelectors = [
|
|
'.promise-v2__intro',
|
|
'.promise-v2__card',
|
|
'.editorial-v2',
|
|
'.section-heading-v2',
|
|
'.services-v2__card',
|
|
'.team-image-v2',
|
|
'.team-v2__card',
|
|
'.hours-v2__row',
|
|
'.trust-v2__rating',
|
|
'.trust-v2__copy',
|
|
'.contact-v2__left',
|
|
'.contact-v2__actions',
|
|
'.final-cta-v2'
|
|
];
|
|
|
|
var revealElements = document.querySelectorAll(revealSelectors.join(','));
|
|
if (!revealElements.length) return;
|
|
|
|
var observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.12,
|
|
rootMargin: '0px 0px -40px 0px'
|
|
});
|
|
|
|
revealElements.forEach(function(el) {
|
|
observer.observe(el);
|
|
});
|
|
})();
|
|
</script>
|
|
</Layout>
|
|
|
|
<style>
|
|
/* ─── V2 Design Tokens ─── */
|
|
:root {
|
|
--v2-bg: oklch(0.965 0.016 78);
|
|
--v2-fg: oklch(0.13 0.035 35);
|
|
--v2-primary: oklch(0.36 0.145 42);
|
|
--v2-primary-dim: oklch(0.3 0.12 42);
|
|
--v2-accent: oklch(0.78 0.14 62);
|
|
--v2-muted: oklch(0.52 0.03 42);
|
|
--v2-surface: oklch(0.94 0.022 75);
|
|
--v2-surface-dark: oklch(0.2 0.04 45);
|
|
--v2-surface-warm: oklch(0.93 0.028 72);
|
|
--v2-hairline: color-mix(in oklch, var(--v2-fg) 14%, transparent);
|
|
--v2-hero-ink: oklch(0.98 0.012 82);
|
|
--v2-radius: 0.25rem;
|
|
|
|
/* Animation */
|
|
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
|
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ─── Animation Keyframes ─── */
|
|
@keyframes fade-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.94);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* ─── Hero Load Choreography ─── */
|
|
.hero-deco {
|
|
opacity: 0;
|
|
animation: scale-in 1.2s var(--ease-out-expo) 0.15s forwards;
|
|
}
|
|
|
|
.hero-v2__copy .eyebrow-v2 {
|
|
opacity: 0;
|
|
animation: fade-up 0.7s var(--ease-out-expo) 0.3s forwards;
|
|
}
|
|
|
|
.hero-v2__copy h1 {
|
|
opacity: 0;
|
|
animation: fade-up 0.75s var(--ease-out-expo) 0.42s forwards;
|
|
}
|
|
|
|
.hero-v2__intro {
|
|
opacity: 0;
|
|
animation: fade-up 0.7s var(--ease-out-expo) 0.54s forwards;
|
|
}
|
|
|
|
.hero-v2__actions {
|
|
opacity: 0;
|
|
animation: fade-up 0.6s var(--ease-out-expo) 0.64s forwards;
|
|
}
|
|
|
|
.hero-v2__meta {
|
|
opacity: 0;
|
|
animation: fade-up 0.7s var(--ease-out-expo) 0.8s forwards;
|
|
}
|
|
|
|
/* ─── Scroll-Triggered Reveals ─── */
|
|
.promise-v2__intro,
|
|
.promise-v2__card,
|
|
.editorial-v2,
|
|
.section-heading-v2,
|
|
.services-v2__card,
|
|
.team-image-v2,
|
|
.team-v2__card,
|
|
.hours-v2__row,
|
|
.trust-v2__rating,
|
|
.trust-v2__copy,
|
|
.contact-v2__left,
|
|
.contact-v2__actions,
|
|
.final-cta-v2 {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
|
|
}
|
|
|
|
.promise-v2__intro.is-visible,
|
|
.promise-v2__card.is-visible,
|
|
.editorial-v2.is-visible,
|
|
.section-heading-v2.is-visible,
|
|
.services-v2__card.is-visible,
|
|
.team-image-v2.is-visible,
|
|
.team-v2__card.is-visible,
|
|
.hours-v2__row.is-visible,
|
|
.trust-v2__rating.is-visible,
|
|
.trust-v2__copy.is-visible,
|
|
.contact-v2__left.is-visible,
|
|
.contact-v2__actions.is-visible,
|
|
.final-cta-v2.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Stagger delays */
|
|
.promise-v2__card:nth-child(1) { transition-delay: 0ms; }
|
|
.promise-v2__card:nth-child(2) { transition-delay: 100ms; }
|
|
.promise-v2__card:nth-child(3) { transition-delay: 200ms; }
|
|
|
|
.services-v2__card:nth-child(1) { transition-delay: 0ms; }
|
|
.services-v2__card:nth-child(2) { transition-delay: 120ms; }
|
|
.services-v2__card:nth-child(3) { transition-delay: 240ms; }
|
|
.services-v2__card:nth-child(4) { transition-delay: 360ms; }
|
|
|
|
.team-v2__card:nth-child(1) { transition-delay: 0ms; }
|
|
.team-v2__card:nth-child(2) { transition-delay: 100ms; }
|
|
.team-v2__card:nth-child(3) { transition-delay: 200ms; }
|
|
|
|
.hours-v2__row:nth-child(1) { transition-delay: 0ms; }
|
|
.hours-v2__row:nth-child(2) { transition-delay: 60ms; }
|
|
.hours-v2__row:nth-child(3) { transition-delay: 120ms; }
|
|
.hours-v2__row:nth-child(4) { transition-delay: 180ms; }
|
|
.hours-v2__row:nth-child(5) { transition-delay: 240ms; }
|
|
.hours-v2__row:nth-child(6) { transition-delay: 300ms; }
|
|
|
|
/* Trust number dramatic entrance */
|
|
.trust-v2__rating h2 {
|
|
transition: transform 0.9s var(--ease-out-expo);
|
|
transform: scale(0.9);
|
|
}
|
|
.trust-v2__rating.is-visible h2 {
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* ─── Micro-interactions ─── */
|
|
.button-link-v2:active {
|
|
transform: scale(0.97) translateY(-1px);
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
.button-link-v2--compact:active,
|
|
.button-link-v2--ghost:active,
|
|
.button-link-v2--light:active {
|
|
transform: scale(0.97);
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
/* Team avatar hover */
|
|
.team-v2__avatar {
|
|
transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
|
|
}
|
|
.team-v2__card:hover .team-v2__avatar {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
/* Image subtle zoom on hover */
|
|
.editorial-v2 img,
|
|
.team-image-v2 img,
|
|
.contact-image-v2 img {
|
|
transition: transform 0.9s var(--ease-out-quart);
|
|
}
|
|
.editorial-v2:hover img,
|
|
.team-image-v2:hover img,
|
|
.contact-image-v2:hover img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Mobile nav link stagger */
|
|
.mobile-nav.is-open .mobile-nav-list li {
|
|
opacity: 0;
|
|
animation: fade-up 0.45s var(--ease-out-expo) forwards;
|
|
}
|
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(1) { animation-delay: 0.08s; }
|
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(2) { animation-delay: 0.14s; }
|
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(3) { animation-delay: 0.20s; }
|
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(4) { animation-delay: 0.26s; }
|
|
|
|
.mobile-nav.is-open .mobile-nav-phone {
|
|
opacity: 0;
|
|
animation: fade-up 0.45s var(--ease-out-expo) 0.32s forwards;
|
|
}
|
|
|
|
/* Reduced motion: ensure visibility */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-deco,
|
|
.hero-v2__copy .eyebrow-v2,
|
|
.hero-v2__copy h1,
|
|
.hero-v2__intro,
|
|
.hero-v2__actions,
|
|
.hero-v2__meta,
|
|
.promise-v2__intro,
|
|
.promise-v2__card,
|
|
.editorial-v2,
|
|
.section-heading-v2,
|
|
.services-v2__card,
|
|
.team-image-v2,
|
|
.team-v2__card,
|
|
.hours-v2__row,
|
|
.trust-v2__rating,
|
|
.trust-v2__copy,
|
|
.contact-v2__left,
|
|
.contact-v2__actions,
|
|
.final-cta-v2 {
|
|
opacity: 1;
|
|
transform: none;
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
.trust-v2__rating h2 {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* ─── Base overrides for v2 ─── */
|
|
body {
|
|
background: var(--v2-bg);
|
|
color: var(--v2-fg);
|
|
}
|
|
|
|
/* ─── Header ─── */
|
|
.site-header-v2 {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem);
|
|
color: var(--v2-fg);
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
.site-header-v2 .brand-lockup {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
width: fit-content;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-header-v2 .brand-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 999px;
|
|
font-family: var(--font-heading);
|
|
font-size: 1.05rem;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-header-v2 .brand-descriptor {
|
|
display: block;
|
|
color: color-mix(in oklch, currentColor 65%, transparent);
|
|
font-size: 0.78rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.nav-link-v2 {
|
|
border-radius: 999px;
|
|
color: inherit;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
padding: 0.55rem 0.9rem;
|
|
text-decoration: none;
|
|
transition: background-color 180ms ease, color 180ms ease;
|
|
}
|
|
|
|
.nav-link-v2:hover,
|
|
.nav-link-v2:focus-visible {
|
|
background: color-mix(in oklch, currentColor 14%, transparent);
|
|
}
|
|
|
|
/* ─── Buttons ─── */
|
|
.button-link-v2 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 2.8rem;
|
|
width: fit-content;
|
|
border: 1.5px solid var(--v2-primary);
|
|
border-radius: var(--v2-radius);
|
|
background: var(--v2-primary);
|
|
color: var(--v2-hero-ink);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 0.85rem 1.35rem;
|
|
text-decoration: none;
|
|
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, border-color 180ms ease;
|
|
}
|
|
|
|
.button-link-v2:hover,
|
|
.button-link-v2:focus-visible {
|
|
background: var(--v2-primary-dim);
|
|
border-color: var(--v2-primary-dim);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.button-link-v2--compact {
|
|
min-height: 2.45rem;
|
|
padding: 0.55rem 0.95rem;
|
|
background: transparent;
|
|
border-color: color-mix(in oklch, currentColor 45%, transparent);
|
|
color: inherit;
|
|
}
|
|
|
|
.button-link-v2--compact:hover,
|
|
.button-link-v2--compact:focus-visible {
|
|
background: var(--v2-fg);
|
|
border-color: var(--v2-fg);
|
|
color: var(--v2-bg);
|
|
}
|
|
|
|
.button-link-v2--ghost {
|
|
background: transparent;
|
|
color: var(--v2-fg);
|
|
border-color: var(--v2-fg);
|
|
}
|
|
|
|
.button-link-v2--ghost:hover,
|
|
.button-link-v2--ghost:focus-visible {
|
|
background: var(--v2-fg);
|
|
color: var(--v2-bg);
|
|
}
|
|
|
|
.button-link-v2--light {
|
|
background: var(--v2-hero-ink);
|
|
border-color: var(--v2-hero-ink);
|
|
color: var(--v2-primary);
|
|
}
|
|
|
|
.button-link-v2--light:hover,
|
|
.button-link-v2--light:focus-visible {
|
|
background: var(--v2-accent);
|
|
border-color: var(--v2-accent);
|
|
color: var(--v2-fg);
|
|
}
|
|
|
|
/* ─── Eyebrow ─── */
|
|
.eyebrow-v2 {
|
|
color: var(--v2-primary);
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* ─── Hero: asymmetric, oversized ─── */
|
|
.hero-v2 {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
|
|
gap: clamp(2rem, 5vw, 5rem);
|
|
align-items: end;
|
|
min-height: 100svh;
|
|
overflow: hidden;
|
|
padding: clamp(8rem, 16vw, 12rem) clamp(1rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem);
|
|
background:
|
|
linear-gradient(170deg, color-mix(in oklch, var(--v2-surface-warm) 60%, transparent) 0%, transparent 55%);
|
|
}
|
|
|
|
.hero-deco {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: var(--font-heading);
|
|
font-size: 55vw;
|
|
font-weight: 600;
|
|
line-height: 0.8;
|
|
color: color-mix(in oklch, var(--v2-primary) 4%, transparent);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-v2__copy {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 52rem;
|
|
}
|
|
|
|
.hero-v2__copy .eyebrow-v2 {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.hero-v2__copy h1 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(3.8rem, 11vw, 10rem);
|
|
font-weight: 600;
|
|
line-height: 0.88;
|
|
margin: 0 0 1.6rem;
|
|
max-width: 14ch;
|
|
}
|
|
|
|
.hero-v2__intro {
|
|
max-width: 38ch;
|
|
color: var(--v2-muted);
|
|
font-size: clamp(1.15rem, 2vw, 1.5rem);
|
|
line-height: 1.55;
|
|
margin: 0;
|
|
}
|
|
|
|
.hero-v2__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.hero-v2__meta {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: grid;
|
|
gap: 0;
|
|
align-self: end;
|
|
margin: 0;
|
|
border-top: 1.5px solid var(--v2-hairline);
|
|
}
|
|
|
|
.hero-v2__meta div {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
padding: 1.1rem 0;
|
|
border-bottom: 1.5px solid var(--v2-hairline);
|
|
}
|
|
|
|
.hero-v2__meta dt {
|
|
color: var(--v2-muted);
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-v2__meta dd {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ─── Sections ─── */
|
|
.section-v2 {
|
|
padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem);
|
|
}
|
|
|
|
.section-heading-v2 {
|
|
display: grid;
|
|
gap: 1rem;
|
|
max-width: 44rem;
|
|
}
|
|
|
|
.section-heading-v2--centered {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-heading-v2 h2,
|
|
.promise-v2__intro h2,
|
|
.final-cta-v2 h2 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(2.8rem, 6.5vw, 6.5rem);
|
|
font-weight: 600;
|
|
line-height: 0.95;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-heading-v2 p:not(.eyebrow-v2) {
|
|
color: var(--v2-muted);
|
|
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ─── Promise: dark, asymmetric ─── */
|
|
.promise-v2 {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
|
|
gap: clamp(3rem, 6vw, 6rem);
|
|
background: var(--v2-surface-dark);
|
|
color: var(--v2-hero-ink);
|
|
position: relative;
|
|
}
|
|
|
|
.promise-v2__intro {
|
|
position: sticky;
|
|
top: 6rem;
|
|
align-self: start;
|
|
}
|
|
|
|
.promise-v2__intro .eyebrow-v2 {
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.promise-v2__intro h2 {
|
|
color: var(--v2-hero-ink);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.promise-v2__grid {
|
|
display: grid;
|
|
gap: 0;
|
|
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent);
|
|
}
|
|
|
|
.promise-v2__card {
|
|
display: grid;
|
|
grid-template-columns: minmax(4rem, 0.2fr) minmax(0, 0.8fr);
|
|
column-gap: clamp(1.2rem, 3vw, 2.5rem);
|
|
border-bottom: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent);
|
|
padding: clamp(1.5rem, 2.5vw, 2.5rem) 0;
|
|
}
|
|
|
|
.index-label-v2 {
|
|
color: var(--v2-accent);
|
|
display: block;
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(2.5rem, 5vw, 5rem);
|
|
line-height: 0.85;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.promise-v2__card h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(1.4rem, 2.2vw, 2.2rem);
|
|
line-height: 1.05;
|
|
margin: 0 0 0.75rem;
|
|
color: var(--v2-hero-ink);
|
|
}
|
|
|
|
.promise-v2__card p {
|
|
color: color-mix(in oklch, var(--v2-hero-ink) 72%, transparent);
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ─── Editorial image: full-bleed, sharp ─── */
|
|
.editorial-v2 {
|
|
margin: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
height: clamp(22rem, 55vw, 38rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editorial-v2 img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
display: block;
|
|
filter: saturate(0.85) contrast(1.05);
|
|
}
|
|
|
|
.editorial-v2 figcaption {
|
|
position: absolute;
|
|
right: clamp(1rem, 4vw, 3rem);
|
|
bottom: 1.25rem;
|
|
z-index: 2;
|
|
padding: 0.35rem 0.75rem;
|
|
background: oklch(0.1 0.02 28 / 55%);
|
|
color: oklch(0.95 0.01 84);
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ─── Services: asymmetric offset grid ─── */
|
|
.services-v2 {
|
|
background: var(--v2-bg);
|
|
}
|
|
|
|
.services-v2__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: clamp(2rem, 4vw, 4rem);
|
|
margin-top: clamp(3rem, 5vw, 5rem);
|
|
}
|
|
|
|
.services-v2__card {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding-bottom: clamp(2rem, 3vw, 3rem);
|
|
border-bottom: 1.5px solid var(--v2-hairline);
|
|
}
|
|
|
|
.services-v2__card:nth-child(even) {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.service-index-v2 {
|
|
color: var(--v2-primary);
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(3rem, 6vw, 6rem);
|
|
line-height: 0.85;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.services-v2__card h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
}
|
|
|
|
.services-v2__card p {
|
|
color: var(--v2-muted);
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
max-width: 36ch;
|
|
}
|
|
|
|
/* ─── Team: warm surface ─── */
|
|
.team-v2 {
|
|
background: var(--v2-surface-warm);
|
|
}
|
|
|
|
.team-image-v2 {
|
|
margin: clamp(2rem, 4vw, 3.5rem) auto 0;
|
|
max-width: 72rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.team-image-v2 img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 21 / 9;
|
|
object-fit: cover;
|
|
display: block;
|
|
filter: saturate(0.85) contrast(1.05);
|
|
}
|
|
|
|
.team-image-v2 figcaption {
|
|
position: absolute;
|
|
right: 1.25rem;
|
|
bottom: 1rem;
|
|
color: oklch(0.95 0.01 84);
|
|
font-size: 0.78rem;
|
|
text-shadow: 0 1px 4px oklch(0.1 0.02 28 / 50%);
|
|
}
|
|
|
|
.team-v2__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 0;
|
|
margin-top: clamp(2rem, 4vw, 4rem);
|
|
border-top: 1.5px solid var(--v2-hairline);
|
|
border-left: 1.5px solid var(--v2-hairline);
|
|
}
|
|
|
|
.team-v2__card {
|
|
display: grid;
|
|
justify-items: start;
|
|
gap: 0.625rem;
|
|
border-bottom: 1.5px solid var(--v2-hairline);
|
|
border-right: 1.5px solid var(--v2-hairline);
|
|
padding: clamp(2.2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
|
|
transition: background-color 200ms ease;
|
|
}
|
|
|
|
.team-v2__card:hover {
|
|
background: color-mix(in oklch, var(--v2-bg) 55%, transparent);
|
|
}
|
|
|
|
.team-v2__avatar {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
margin-bottom: 0.75rem;
|
|
border-radius: 999px;
|
|
background: var(--v2-surface-dark);
|
|
font-family: var(--font-heading);
|
|
font-size: 1.35rem;
|
|
font-weight: 600;
|
|
color: var(--v2-hero-ink);
|
|
}
|
|
|
|
.team-v2__card h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(1.25rem, 2vw, 1.6rem);
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
.team-v2__role {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
color: var(--v2-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.team-v2__card > p:last-child {
|
|
color: var(--v2-muted);
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ─── Hours ─── */
|
|
.hours-v2 {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
|
|
gap: clamp(3rem, 6vw, 6rem);
|
|
background: var(--v2-surface);
|
|
}
|
|
|
|
.hours-v2__panel {
|
|
border-top: 2px solid var(--v2-fg);
|
|
background: color-mix(in oklch, var(--v2-bg) 50%, transparent);
|
|
padding: 0 clamp(0.2rem, 1vw, 0.8rem);
|
|
}
|
|
|
|
.hours-v2__row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
border-bottom: 1.5px solid color-mix(in oklch, var(--v2-fg) 16%, transparent);
|
|
padding: 1.15rem 0;
|
|
}
|
|
|
|
.hours-v2__row span {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hours-v2__row time {
|
|
color: var(--v2-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ─── Trust: dramatic, oversized ─── */
|
|
.trust-v2 {
|
|
display: grid;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
background: var(--v2-primary);
|
|
color: var(--v2-hero-ink);
|
|
padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
|
|
}
|
|
|
|
.trust-v2 .eyebrow-v2 {
|
|
color: var(--v2-accent);
|
|
}
|
|
|
|
.trust-v2 h2 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(6rem, 14vw, 13rem);
|
|
line-height: 0.85;
|
|
margin: 0.6rem 0 0;
|
|
}
|
|
|
|
.trust-v2__copy {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
font-size: clamp(1.15rem, 2vw, 1.5rem);
|
|
line-height: 1.55;
|
|
max-width: 38ch;
|
|
margin: 0;
|
|
color: color-mix(in oklch, var(--v2-hero-ink) 82%, transparent);
|
|
}
|
|
|
|
.trust-v2__copy strong {
|
|
color: var(--v2-hero-ink);
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* ─── Contact ─── */
|
|
.contact-v2__layout {
|
|
display: grid;
|
|
gap: clamp(3rem, 6vw, 6rem);
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
margin-top: clamp(2.5rem, 5vw, 4.5rem);
|
|
}
|
|
|
|
.contact-v2__left {
|
|
display: grid;
|
|
gap: clamp(2rem, 4vw, 3rem);
|
|
align-content: start;
|
|
}
|
|
|
|
.contact-v2__address {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(2.2rem, 4.5vw, 4.2rem);
|
|
font-style: normal;
|
|
line-height: 1.05;
|
|
color: var(--v2-fg);
|
|
}
|
|
|
|
.contact-image-v2 {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.contact-image-v2 img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
display: block;
|
|
filter: saturate(0.85) contrast(1.05);
|
|
}
|
|
|
|
.contact-image-v2 figcaption {
|
|
color: var(--v2-muted);
|
|
font-size: 0.82rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.contact-v2__actions {
|
|
display: grid;
|
|
gap: 0;
|
|
align-content: start;
|
|
}
|
|
|
|
.contact-v2__card {
|
|
border-top: 2px solid var(--v2-fg);
|
|
border-bottom: 1.5px solid var(--v2-hairline);
|
|
}
|
|
|
|
.contact-v2__line {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
border: 0;
|
|
border-bottom: 1.5px solid var(--v2-hairline);
|
|
color: inherit;
|
|
padding: 1.25rem 0;
|
|
text-decoration: none;
|
|
transition: border-color 200ms ease, background-color 200ms ease;
|
|
}
|
|
|
|
.contact-v2__line:hover,
|
|
.contact-v2__line:focus-visible {
|
|
background: color-mix(in oklch, var(--v2-surface) 45%, transparent);
|
|
border-color: var(--v2-primary);
|
|
}
|
|
|
|
.contact-label-v2 {
|
|
display: block;
|
|
color: var(--v2-muted);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.contact-v2__line strong {
|
|
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
|
|
}
|
|
|
|
.contact-v2__actions > .button-link-v2 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/* ─── Final CTA: full-bleed, dark ─── */
|
|
.final-cta-v2 {
|
|
display: grid;
|
|
gap: 1.75rem;
|
|
justify-items: start;
|
|
background: var(--v2-surface-dark);
|
|
color: var(--v2-hero-ink);
|
|
padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.final-cta-v2::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 40% at 80% 120%, color-mix(in oklch, var(--v2-primary) 35%, transparent) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.final-cta-v2 .eyebrow-v2 {
|
|
color: var(--v2-accent);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.final-cta-v2 h2 {
|
|
max-width: 14ch;
|
|
position: relative;
|
|
z-index: 2;
|
|
color: var(--v2-hero-ink);
|
|
}
|
|
|
|
.final-cta-v2__actions {
|
|
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 28%, transparent);
|
|
padding-top: 1.5rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ─── Mobile Navigation ─── */
|
|
.mobile-nav-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border: 1.5px solid color-mix(in oklch, currentColor 30%, transparent);
|
|
border-radius: var(--v2-radius);
|
|
background: color-mix(in oklch, currentColor 10%, transparent);
|
|
color: inherit;
|
|
cursor: pointer;
|
|
transition: background-color 180ms ease, border-color 180ms ease;
|
|
}
|
|
|
|
.mobile-nav-toggle:hover,
|
|
.mobile-nav-toggle:focus-visible {
|
|
background: color-mix(in oklch, currentColor 18%, transparent);
|
|
border-color: color-mix(in oklch, currentColor 50%, transparent);
|
|
}
|
|
|
|
.mobile-nav {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 60;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.mobile-nav.is-open {
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
|
|
.mobile-nav-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: oklch(0.1 0.02 28 / 60%);
|
|
opacity: 0;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.mobile-nav.is-open .mobile-nav-backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mobile-nav-panel {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: min(22rem, 85vw);
|
|
background: var(--v2-bg);
|
|
color: var(--v2-fg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
padding: 1.5rem;
|
|
transform: translateX(100%);
|
|
transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: -8px 0 32px oklch(0.1 0.02 28 / 15%);
|
|
}
|
|
|
|
.mobile-nav.is-open .mobile-nav-panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.mobile-nav-close {
|
|
align-self: flex-end;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border: 1.5px solid var(--v2-hairline);
|
|
border-radius: var(--v2-radius);
|
|
background: transparent;
|
|
color: var(--v2-fg);
|
|
cursor: pointer;
|
|
transition: background-color 180ms ease;
|
|
}
|
|
|
|
.mobile-nav-close:hover,
|
|
.mobile-nav-close:focus-visible {
|
|
background: var(--v2-surface);
|
|
}
|
|
|
|
.mobile-nav-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.mobile-nav-link {
|
|
display: block;
|
|
padding: 0.9rem 0.5rem;
|
|
border-radius: var(--v2-radius);
|
|
color: var(--v2-fg);
|
|
font-size: 1.35rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background-color 180ms ease;
|
|
min-height: 44px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.mobile-nav-link:hover,
|
|
.mobile-nav-link:focus-visible {
|
|
background: var(--v2-surface);
|
|
}
|
|
|
|
.mobile-nav-phone {
|
|
margin-top: auto;
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
padding: 1rem;
|
|
border-radius: var(--v2-radius);
|
|
border: 1.5px solid var(--v2-hairline);
|
|
background: color-mix(in oklch, var(--v2-surface) 50%, transparent);
|
|
color: var(--v2-fg);
|
|
text-decoration: none;
|
|
transition: background-color 180ms ease, border-color 180ms ease;
|
|
}
|
|
|
|
.mobile-nav-phone:hover,
|
|
.mobile-nav-phone:focus-visible {
|
|
background: var(--v2-surface);
|
|
border-color: var(--v2-primary);
|
|
}
|
|
|
|
.mobile-nav-phone strong {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ─── Mobile overrides ─── */
|
|
@media (max-width: 820px) {
|
|
.hero-v2 {
|
|
grid-template-columns: 1fr;
|
|
min-height: 100svh;
|
|
}
|
|
|
|
.hero-v2__copy h1 {
|
|
font-size: clamp(2.8rem, 12vw, 5rem);
|
|
}
|
|
|
|
.hero-v2__meta {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.promise-v2,
|
|
.hours-v2,
|
|
.trust-v2,
|
|
.contact-v2__layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.promise-v2__intro {
|
|
position: static;
|
|
}
|
|
|
|
.services-v2__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.services-v2__card:nth-child(even) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.trust-v2 h2 {
|
|
font-size: clamp(4.5rem, 18vw, 8rem);
|
|
}
|
|
|
|
.site-header-v2 {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|
|
}
|
|
</style>
|