.scoundrel-site {
--bg: #0a0a0a;
--bg-soft: #111111;
--panel: rgba(255,255,255,0.03);
--line: rgba(214, 179, 95, 0.22);
--gold: #d6b35f;
--gold-soft: #b99647;
--text: #f2ead8;
--muted: #b9ac90;
--white-soft: rgba(255,255,255,0.92);
background:
radial-gradient(circle at top, rgba(214,179,95,0.10), transparent 35%),
linear-gradient(180deg, #080808 0%, #0c0c0c 45%, #090909 100%);
color: var(--text);
font-family: 'Inter', sans-serif;
width: 100%;
overflow: hidden;
}
.scoundrel-site * {
box-sizing: border-box;
}
.scoundrel-wrap {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
.scoundrel-topbar {
border-bottom: 1px solid var(--line);
background: rgba(0,0,0,0.65);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 50;
}
.scoundrel-nav {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-kicker {
font-size: 11px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.brand-name {
font-family: 'Cormorant Garamond', serif;
font-size: 38px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--gold);
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.nav-links a {
color: var(--white-soft);
text-decoration: none;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color .25s ease, opacity .25s ease;
opacity: 0.88;
}
.nav-links a:hover {
color: var(--gold);
opacity: 1;
}
.book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border: 1px solid var(--gold);
color: #111;
background: var(--gold);
text-decoration: none;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.book-btn:hover {
transform: translateY(-1px);
background: transparent;
color: var(--gold);
}
.hero {
position: relative;
padding: 96px 0 84px;
border-bottom: 1px solid var(--line);
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 42px;
align-items: center;
}
.eyebrow {
display: inline-block;
color: var(--muted);
font-size: 12px;
letter-spacing: 0.34em;
text-transform: uppercase;
margin-bottom: 22px;
}
.hero h1 {
margin: 0 0 20px;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(56px, 8vw, 112px);
line-height: 0.92;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text);
}
.hero h1 .gold {
color: var(--gold);
display: block;
}
.hero p {
margin: 0;
max-width: 640px;
font-size: 17px;
line-height: 1.8;
color: var(--muted);
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.ghost-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border: 1px solid var(--line);
color: var(--text);
background: transparent;
text-decoration: none;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: all .25s ease;
}
.ghost-btn:hover {
border-color: var(--gold);
color: var(--gold);
}
.hero-card {
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
rgba(0,0,0,0.35);
padding: 30px;
position: relative;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.hero-card:before,
.hero-card:after {
content: "";
position: absolute;
width: 60px;
height: 60px;
border-color: var(--gold);
opacity: 0.7;
pointer-events: none;
}
.hero-card:before {
top: 12px;
left: 12px;
border-top: 1px solid;
border-left: 1px solid;
}
.hero-card:after {
right: 12px;
bottom: 12px;
border-right: 1px solid;
border-bottom: 1px solid;
}
.card-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--muted);
margin-bottom: 18px;
}
.card-big {
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
line-height: 1;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
}
.card-copy {
color: var(--muted);
line-height: 1.8;
font-size: 15px;
max-width: 340px;
}
.detail-list {
display: grid;
gap: 14px;
margin-top: 28px;
}
.detail-item {
display: flex;
justify-content: space-between;
gap: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 14px;
line-height: 1.5;
}
.detail-item span:first-child {
color: var(--text);
opacity: 0.95;
}
.detail-item span:last-child {
color: var(--gold);
text-align: right;
white-space: nowrap;
}
.section {
padding: 82px 0;
border-bottom: 1px solid var(--line);
}
.section-heading {
margin-bottom: 34px;
text-align: center;
}
.section-heading .mini {
display: inline-block;
color: var(--muted);
font-size: 12px;
letter-spacing: 0.34em;
text-transform: uppercase;
margin-bottom: 12px;
}
.section-heading h2 {
margin: 0;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(34px, 5vw, 58px);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--gold);
}
.section-heading p {
max-width: 760px;
margin: 16px auto 0;
color: var(--muted);
line-height: 1.8;
font-size: 16px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.service-card {
border: 1px solid var(--line);
background: var(--panel);
padding: 26px 24px;
transition: transform .2s ease, border-color .2s ease;
}
.service-card:hover {
transform: translateY(-3px);
border-color: rgba(214,179,95,0.45);
}
.service-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 10px;
}
.service-name {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text);
}
.service-price {
color: var(--gold);
font-size: 18px;
font-weight: 600;
white-space: nowrap;
}
.service-desc {
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
.two-col {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 26px;
}
.info-card {
border: 1px solid var(--line);
background: var(--panel);
padding: 28px;
height: 100%;
}
.info-card h3 {
margin: 0 0 18px;
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--gold);
}
.hours-list {
display: grid;
gap: 12px;
}
.hours-row {
display: flex;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding-bottom: 10px;
font-size: 15px;
line-height: 1.5;
}
.hours-row span:first-child {
color: var(--text);
}
.hours-row span:last-child {
color: var(--muted);
text-align: right;
}
.contact-copy,
.contact-copy a {
color: var(--muted);
text-decoration: none;
line-height: 1.9;
font-size: 15px;
}
.contact-copy a:hover {
color: var(--gold);
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.team-card {
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
padding: 28px 22px;
text-align: center;
}
.team-mark {
width: 76px;
height: 76px;
border: 1px solid rgba(214,179,95,0.45);
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 auto 18px;
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
color: var(--gold);
}
.team-name {
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text);
margin-bottom: 8px;
}
.team-role {
color: var(--muted);
font-size: 13px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.quote-card {
border: 1px solid var(--line);
background: var(--panel);
padding: 28px 24px;
min-height: 230px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.quote-mark {
color: var(--gold);
font-family: 'Cormorant Garamond', serif;
font-size: 48px;
line-height: 1;
margin-bottom: 12px;
}
.quote-text {
color: var(--muted);
font-size: 15px;
line-height: 1.9;
margin-bottom: 18px;
}
.quote-name {
color: var(--text);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cta {
padding: 92px 0;
text-align: center;
background:
linear-gradient(180deg, rgba(214,179,95,0.08), rgba(214,179,95,0.02)),
transparent;
}
.cta h2 {
margin: 0 0 16px;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(40px, 6vw, 72px);
line-height: 0.96;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gold);
}
.cta p {
max-width: 720px;
margin: 0 auto 30px;
color: var(--muted);
line-height: 1.8;
font-size: 16px;
}
.footer {
border-top: 1px solid var(--line);
padding: 22px 0 32px;
}
.footer-inner {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
color: var(--muted);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 991px) {
.hero-grid,
.two-col,
.team-grid,
.testimonials-grid,
.services-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
.hero {
padding: 72px 0 64px;
}
.hero-card {
min-height: unset;
}
.brand-name {
font-size: 30px;
}
}
@media (max-width: 767px) {
.scoundrel-wrap {
padding: 0 18px;
}
.brand-name {
font-size: 24px;
}
.brand-kicker,
.eyebrow,
.section-heading .mini,
.nav-links a,
.book-btn,
.ghost-btn {
letter-spacing: 0.16em;
}
.hero h1 {
font-size: 52px;
}
.service-top {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.service-name {
font-size: 24px;
}
.section,
.cta {
padding: 62px 0;
}
.info-card,
.service-card,
.team-card,
.quote-card,
.hero-card {
padding: 22px 18px;
}
}
Barbering With Character
The Bearded
Scoundrel
Classic cuts, straight razor shaves, hot towel tradition, and a shop atmosphere built with old-school grit and modern polish.
Established Character
Sharp Cuts.
Proper Service.
A refined neighborhood barbershop with a darker, tailored feel—built for gentlemen who appreciate precision, atmosphere, and tradition.
Phone
(555) 555-5555
Address
123 Main Street, Your City
Walk-ins / Appointments
Available
Services & Pricing
The Cut List
Swap in your exact services and prices from the screenshots here.
Precision cut finished with styling and a clean silhouette.
Detailed shaping and beard cleanup for a polished finish.
Full grooming service combining your cut and beard work in one session.
Traditional hot towel shave with clean lines and classic finishing touch.
Clean, comfortable cut for younger clients with the same attention to detail.
Upgrade package with added treatment, hot towel, and elevated finish.
Hours
Monday9:00 AM – 6:00 PM
Tuesday9:00 AM – 6:00 PM
Wednesday9:00 AM – 6:00 PM
Thursday9:00 AM – 7:00 PM
Friday9:00 AM – 7:00 PM
Saturday10:00 AM – 4:00 PM
SundayClosed
Meet The Team
The Barbers
Client Words
Testimonials
“
Best shop in town. Clean cuts, good atmosphere, and they actually take their time.
Local Client
“
Old-school feel with modern skill. Exactly the kind of barbershop I’ve been looking for.
Returning Customer
“
Sharp beard work, clean fades, and a shop that actually has personality.
Regular Guest
Book Your Next Cut
Traditional service. Strong atmosphere. Clean results. Step into the chair and leave looking dangerous.
Book Appointment