:root { --black:#0b0b0c; --charcoal:#151517; --charcoal-2:#202023; --cream:#f0eee9; --muted:#aaa7a1; --red:#df2434; --line:rgba(240,238,233,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--black); color:var(--cream); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; } img { display:block; width:100%; object-fit:cover; } h1,h2,h3,p { margin-top:0; } h1,h2,h3,.logo { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; line-height:.93; }
:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; border-bottom:1px solid var(--line); position:absolute; z-index:10; width:100%; }
.logo { font-size:1.65rem; font-weight:700; letter-spacing:.03em; line-height:.75; display:flex; flex-direction:column; } .logo span { color:var(--red); font-size:.8rem; letter-spacing:.21em; margin-left:1px; }
.main-nav { display:flex; align-items:center; gap:2rem; font-size:.86rem; text-transform:uppercase; letter-spacing:.1em; } .main-nav a:not(.nav-cta) { color:#d7d4cf; transition:color .2s; } .main-nav a:hover { color:var(--red); }
.nav-cta,.button { background:var(--red); color:white; padding:.8rem 1.2rem; text-transform:uppercase; font-size:.78rem; font-weight:600; letter-spacing:.1em; transition:background .2s, transform .2s; display:inline-flex; align-items:center; gap:1.1rem; } .nav-cta:hover,.button:hover { background:#f23344; transform:translateY(-2px); }
.menu-toggle { display:none; background:transparent; border:0; padding:8px 0 8px 10px; } .menu-toggle span { width:25px; height:2px; display:block; margin:5px 0; background:var(--cream); transition:.25s; }
.hero { min-height:720px; height:100vh; max-height:920px; display:flex; align-items:center; padding:100px 8vw 50px; position:relative; background:linear-gradient(90deg,rgba(8,8,9,.92) 10%,rgba(8,8,9,.65) 56%,rgba(8,8,9,.28)),url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=2000&q=90") center/cover; }
.hero-content { max-width:720px; animation:rise .8s ease-out both; } .eyebrow { color:var(--red); text-transform:uppercase; font-size:.75rem; font-weight:600; letter-spacing:.18em; margin-bottom:1.4rem; } h1 { font-size:clamp(4.8rem,10vw,9.5rem); letter-spacing:-.03em; margin-bottom:1.5rem; } h1 em { color:var(--red); font-style:normal; } .hero-text { color:#d2cfca; font-size:1.1rem; max-width:420px; margin-bottom:2rem; }
.scroll-cue { position:absolute; bottom:32px; left:8vw; display:flex; align-items:center; color:var(--muted); text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; gap:12px; } .scroll-cue span { display:block; height:1px; width:46px; background:var(--red); }
.section { padding:110px 8vw; } .section-label { color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.16em; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:75px; }
.about { background:var(--charcoal); } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; } h2 { font-size:clamp(3rem,6vw,5.4rem); letter-spacing:-.02em; margin-bottom:0; } .about-copy { color:#cbc8c2; max-width:510px; } .about-copy p { margin-bottom:1.2rem; } .text-link { display:inline-flex; margin-top:1.1rem; color:var(--cream); text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; font-weight:600; gap:12px; border-bottom:1px solid var(--red); padding-bottom:7px; } .text-link span { color:var(--red); }
.services { background:var(--black); } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:48px; } .section-heading>p { color:var(--muted); font-size:.82rem; max-width:225px; margin:0; }
.service-list { border-top:1px solid var(--line); } .service { display:grid; grid-template-columns:70px 1.1fr 1fr auto; gap:20px; align-items:center; padding:27px 0; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; } .service:hover { background:var(--charcoal); padding-left:18px; padding-right:18px; } .service span { color:var(--red); font-family:"Barlow Condensed"; font-size:1.1rem; } .service h3 { font-size:1.8rem; margin:0; } .service p { color:var(--muted); font-size:.86rem; margin:0; } .service strong { font-family:"Barlow Condensed"; font-size:1.8rem; color:var(--red); }
.team { background:var(--charcoal); } .team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .barber-card { background:var(--charcoal-2); } .barber-card img { aspect-ratio: .82; filter:grayscale(1); transition:filter .3s, transform .3s; } .barber-card:hover img { filter:grayscale(0); transform:scale(1.02); } .barber-card div { padding:22px; } .barber-card h3 { font-size:1.8rem; margin-bottom:6px; } .barber-card p { color:var(--muted); font-size:.78rem; margin:0; } .placeholder-note { color:#827f79; font-size:.73rem; margin:20px 0 0; font-style:italic; }
.gallery { padding:110px 5.5vw; background:#0e0e10; } .gallery-intro { margin:0 0 45px 2.5vw; } .gallery-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr 1.2fr; gap:14px; height:470px; } .gallery-grid img { height:100%; filter:grayscale(.5); transition:filter .3s,transform .35s; } .gallery-grid img:nth-child(2),.gallery-grid img:nth-child(3) { margin-top:65px; height:calc(100% - 65px); } .gallery-grid img:hover { filter:grayscale(0); transform:translateY(-7px); } .gallery-note { margin-left:2.5vw; }
.visit { background:var(--red); color:white; } .visit .eyebrow { color:#190b0d; } .visit-top { display:flex; justify-content:space-between; align-items:end; padding-bottom:70px; } .visit .button { background:var(--black); } .visit .button:hover { background:var(--charcoal); } .visit-grid { border-top:1px solid rgba(255,255,255,.35); padding-top:30px; display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:50px; } .visit h3 { font-size:1.3rem; margin-bottom:18px; } address { font-style:normal; margin-bottom:14px; } .visit small { display:block; margin-top:12px; opacity:.7; font-size:.72rem; } .visit-grid a:not(.text-link) { display:block; margin-bottom:7px; font-size:.92rem; } .visit .text-link { border-color:var(--black); } .visit .text-link span { color:var(--black); } .hours { list-style:none; padding:0; margin:0; } .hours li { display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.25); padding:0 0 8px; margin-bottom:8px; font-size:.85rem; }
footer { background:#080809; padding:45px 5.5vw; display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--muted); font-size:.73rem; } footer p { margin:0; } .back-top { color:var(--cream); text-transform:uppercase; letter-spacing:.1em; }
@keyframes rise { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (max-width:760px) { .site-header { height:70px; padding:0 6vw; position:absolute; } .menu-toggle { display:block; z-index:11; } .main-nav { display:none; position:absolute; top:70px; left:0; right:0; background:#111113; border-bottom:1px solid var(--line); padding:20px 6vw 25px; flex-direction:column; align-items:flex-start; gap:20px; } .main-nav.open { display:flex; } .menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity:0; } .menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .hero { min-height:650px; padding:110px 7vw 50px; background-position:62% center; } .hero h1 { font-size:clamp(3.65rem,15.5vw,4.8rem); } .scroll-cue { left:7vw; } .section { padding:76px 7vw; } .section-label { margin-bottom:45px; } .about-grid,.visit-grid { grid-template-columns:1fr; gap:32px; } .section-heading,.visit-top { align-items:flex-start; flex-direction:column; } .service { grid-template-columns:35px 1fr auto; gap:10px; } .service p { grid-column:2/4; } .service h3,.service strong { font-size:1.5rem; } .team-grid { grid-template-columns:1fr; gap:18px; } .barber-card { display:grid; grid-template-columns:130px 1fr; align-items:center; } .barber-card img { aspect-ratio:1; } .gallery { padding:75px 7vw; } .gallery-intro { margin-left:0; } .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:250px 250px; height:auto; gap:10px; } .gallery-grid img { height:100%; } .gallery-grid img:nth-child(2),.gallery-grid img:nth-child(3) { margin-top:35px; height:calc(100% - 35px); } .gallery-note { margin-left:0; } .visit-top { padding-bottom:45px; } .visit-grid { gap:26px; } footer { flex-wrap:wrap; padding:35px 7vw; } }