/* Fonts loaded via HTML for better performance */
:root {
--bg-color: #050505;
--bg-surface: #0a0a0a;
--text-main: #fcfcfc;
--text-muted: #888888;
--accent: #b9a36a;
--accent-hover: #d1bd7f;
--accent-cool: #5d4a66;
--border: rgba(255, 255, 255, 0.08);
--font-head: 'Oswald', sans-serif;
--font-body: 'Inter', sans-serif;
--anim: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
--page-max: 1600px;
--page-pad: clamp(20px, 4vw, 56px);
--header-h: 120px;
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scrollbar-gutter: stable;
}
::selection {
background: var(--text-main);
color: var(--bg-color);
}
body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: var(--font-body);
font-weight: 300;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
overflow-x: hidden;
}
body.page-transitioning {
overflow: hidden;
}
/* Background noise texture for organic feel */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
opacity: 0.024;
z-index: 0;
pointer-events: none;
}
h1,
h2,
h3,
h4,
.head-font {
font-family: var(--font-head);
font-weight: 500;
text-transform: uppercase;
line-height: 1.1;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
/* --- STRUCTURE --- */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
z-index: 10;
}
.page-transition-loader {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ffffff;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.page-transition-loader.is-active {
visibility: visible;
pointer-events: auto;
}
.page-transition-mark {
width: clamp(170px, 13.5vw, 245px);
aspect-ratio: 272 / 150;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.page-transition-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(22px, 2.2vw, 34px);
text-align: center;
}
.page-transition-mark img {
display: block;
position: absolute;
left: -42.28%;
top: -106.67%;
width: 183.82%;
max-width: none;
height: auto;
filter: brightness(0);
}
.page-transition-word {
color: #050505;
font-family: var(--font-head);
font-size: clamp(18px, 2vw, 32px);
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
padding-left: 0.16em;
}
/* --- EDITORIAL HEADER (Fixed, Minimal) --- */
.site-header {
display: flex;
justify-content: center;
align-items: center;
height: var(--header-h);
padding: 0 var(--page-pad);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
/* Safari/Mac: backdrop-filter on a fixed header repaints every scroll
frame and causes jank — use a near-opaque solid bg instead. */
background: rgba(5, 5, 5, 0.94);
transition: all 0.4s ease;
}
.header-container {
width: 100%;
max-width: var(--page-max);
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.brand-logo {
display: flex;
align-items: center;
text-decoration: none;
gap: 4px;
min-width: 0;
}
.brand-logo img {
height: 140px;
width: auto;
transition: transform 0.3s var(--anim);
display: block;
margin-left: -20px;
/* Slight offset for PNG whitespace */
}
.logo-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
line-height: 1;
min-width: 0;
}
.logo-title {
display: flex;
align-items: baseline;
gap: 12px;
line-height: 0.95;
}
.logo-text,
.logo-subtext {
font-family: var(--font-head);
font-size: 24px;
font-weight: 500;
letter-spacing: 2px;
color: var(--text-main);
text-transform: uppercase;
white-space: nowrap;
}
.logo-address {
color: var(--text-muted);
font-size: 10px;
letter-spacing: 2.4px;
text-transform: uppercase;
white-space: nowrap;
}
.brand-logo:hover img {
transform: scale(1.05);
/* slightly scale the bull */
}
.nav-links {
display: flex;
gap: 40px;
}
.nav-links a {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
position: relative;
padding-bottom: 5px;
color: var(--text-muted);
}
.nav-links a:hover,
.nav-links a.active {
color: var(--text-main);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background: var(--text-main);
transition: width var(--anim);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.header-right {
display: flex;
align-items: center;
gap: 30px;
}
.header-phone {
font-size: 12px;
letter-spacing: 1px;
color: var(--text-main);
}
.btn-outline {
border: 1px solid var(--border);
padding: 12px 24px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
background: transparent;
color: var(--text-main);
cursor: pointer;
transition: all 0.4s ease;
font-family: var(--font-body);
font-weight: 500;
}
.btn-outline:hover {
border-color: var(--text-main);
}
.btn-primary {
background: var(--accent);
color: #fff;
padding: 12px 30px;
border-radius: 50px;
border: none;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
cursor: pointer;
transition: all 0.4s ease;
}
.btn-primary:hover {
background: var(--accent-hover);
transform: scale(1.05);
}
/* --- MOBILE TOGGLE & MENU --- */
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
z-index: 3001;
border: 0;
background: transparent;
padding: 8px;
}
.menu-toggle span {
display: block;
width: 28px;
height: 1px;
background: var(--text-main);
transition: var(--anim);
transform-origin: center;
}
.menu-toggle.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
body.menu-open {
overflow: hidden;
}
body.menu-open .contact-bubble,
body.menu-open .booking-bubble {
display: none !important;
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background: var(--bg-color);
z-index: 1900;
padding: calc(132px + var(--safe-top)) max(5vw, var(--safe-right)) max(30px, var(--safe-bottom)) max(5vw, var(--safe-left));
display: flex;
flex-direction: column;
transform: translateY(-100%);
opacity: 1;
visibility: hidden;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.55s;
}
.mobile-menu.active {
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
}
.close-btn {
font-size: 36px;
line-height: 1;
cursor: pointer;
color: var(--text-muted);
transition: 0.3s;
}
.close-btn:hover {
color: var(--text-main);
}
.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 30px;
flex: 1;
justify-content: flex-start;
}
.mobile-nav-links a {
font-size: 32px;
color: var(--text-muted);
}
.mobile-nav-links a.active,
.mobile-nav-links a:hover {
color: var(--text-main);
}
.mobile-menu-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
border-top: 1px solid var(--border);
padding-top: 30px;
margin-bottom: 30px;
}
/* --- HERO SECTION --- */
.hero {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 0 var(--page-pad);
height: 100vh;
height: 100svh;
min-height: 720px;
background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?q=80&w=2500&auto=format&fit=crop');
background-size: cover;
background-position: center;
filter: grayscale(1);
}
.hero-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url('images/gallery-7.jpg');
background-size: cover;
background-position: center;
opacity: 0.25;
filter: grayscale(100%) contrast(1.1) brightness(0.5);
pointer-events: none;
}
.hero-bg-text {
position: absolute;
font-family: var(--font-head);
font-size: 22vw;
color: rgba(255, 255, 255, 0.02);
white-space: nowrap;
z-index: 1;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
}
.hero-content {
position: relative;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding-top: 80px;
}
.hero-text-block {
max-width: 400px;
}
.hero-subtitle {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 4px;
color: var(--text-muted);
margin-bottom: 20px;
display: block;
}
.hero-title {
font-size: 96px;
margin-bottom: 40px;
letter-spacing: -2px;
line-height: 1.05;
}
.hero-desc {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 40px;
line-height: 1.8;
}
.hero-art {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -45%);
width: 35vw;
height: 70vh;
z-index: 5;
background: rgba(255, 255, 255, 0.01);
}
.hero-art img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.vertical-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-muted);
}
/* --- PARTICLE CANVAS --- */
#particle-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
opacity: 0.24;
}
/* --- MODALS (Forms, Barber details, Zoom) --- */
.modal-overlay,
.img-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(15px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--anim);
}
#contactModal {
z-index: 3000;
}
.modal-overlay.active,
.img-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content-box {
background: var(--bg-color);
padding: 60px 40px;
position: relative;
border: 1px solid var(--border);
transform: scale(0.95);
transition: transform var(--anim);
}
.modal-overlay.active .modal-content-box {
transform: scale(1);
}
/* --- BARBER SLIDER --- */
.barber-slider-container {
position: relative;
width: 100%;
overflow: hidden;
padding: 20px 0;
}
.team-feature {
position: relative;
width: 100%;
aspect-ratio: 16/7;
overflow: hidden;
margin: -42px 0 78px;
border: 1px solid var(--border);
background: var(--bg-surface);
}
.team-feature::after {
content: "FERDINAND TEAM";
position: absolute;
left: 32px;
bottom: 28px;
z-index: 2;
color: rgba(255, 255, 255, 0.76);
font-family: var(--font-head);
font-size: clamp(28px, 5vw, 86px);
line-height: 1;
letter-spacing: 2px;
text-transform: uppercase;
}
.team-feature img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(1.04) contrast(1.04) brightness(0.86);
}
.barber-slider {
display: flex;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
gap: 1px;
background: var(--border);
}
.barber-slider .card {
min-width: calc(33.333% - 0.66px);
/* 3 cards on desktop */
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.card-img-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: saturate(1.08) contrast(1.03) brightness(0.94);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
z-index: 0;
}
.card:hover .card-img-bg {
transform: scale(1.05);
filter: saturate(1.2) contrast(1.04) brightness(1);
}
.card-content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
background: none;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.barber-card .card-content>div:last-child {
width: min(100%, 360px);
padding: 22px;
background: rgba(4, 4, 4, 0.68);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: none;
}
.barber-card .card-num {
align-self: flex-start;
padding: 8px 10px;
background: rgba(4, 4, 4, 0.45);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: none;
}
.slider-nav {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.slider-arrow {
width: 50px;
height: 50px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s;
font-size: 20px;
color: var(--text-muted);
}
.slider-arrow:hover {
background: var(--text-main);
color: var(--bg-color);
border-color: var(--text-main);
}
/* --- FULLSCREEN BARBER MODAL --- */
.modal-overlay.barber-modal {
background: var(--bg-color);
}
.barber-box.modal-content-box {
width: 100vw;
height: 100vh;
max-width: none;
border: none;
display: flex;
flex-direction: row;
padding: 0;
overflow: hidden;
transform: translateY(30px);
opacity: 0;
}
.modal-overlay.active .barber-box.modal-content-box {
transform: translateY(0);
opacity: 1;
}
.barber-modal .close-barber {
position: fixed;
top: 34px !important;
right: 4vw !important;
z-index: 3005 !important;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(0, 0, 0, 0.34);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(10px);
}
.barber-modal .close-barber:hover {
color: #fff;
background: rgba(0, 0, 0, 0.58);
}
.barber-modal-img {
width: 50%;
height: 100vh;
flex-shrink: 0;
background-size: cover;
background-position: center top;
}
.barber-modal-info {
width: 50%;
padding: 80px 6vw;
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
}
.barber-modal-info h2 {
font-size: clamp(40px, 5vw, 90px);
margin-bottom: 20px;
line-height: 1;
}
.barber-modal-info .barber-role {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 4px;
margin-bottom: 30px;
display: block;
text-transform: uppercase;
}
.barber-modal-info .barber-desc {
font-size: 15px;
line-height: 1.8;
color: var(--text-muted);
max-width: 500px;
}
@media (max-width: 1024px) {
.barber-slider .card {
min-width: calc(50% - 0.5px);
}
.team-feature {
aspect-ratio: 4/3;
margin: -42px 0 54px;
}
.barber-box.modal-content-box {
flex-direction: column;
overflow-y: auto;
height: 100vh;
}
.barber-modal-img {
width: 100%;
height: 55vh;
flex-shrink: 0;
}
.barber-modal-info {
width: 100%;
padding: 40px;
}
}
@media (max-width: 768px) {
.barber-slider .card {
min-width: 100%;
}
.team-feature {
aspect-ratio: 3/4;
margin: -24px 0 42px;
}
.team-feature::after {
left: 20px;
bottom: 18px;
}
.barber-modal-img {
height: 45vh;
}
.barber-modal-info {
padding: 30px 20px;
}
.barber-modal-info h2 {
font-size: clamp(32px, 10vw, 56px);
}
}
@media (max-width: 640px) {
.barber-slider-container {
padding: 8px 0;
}
.barber-slider {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
transform: none !important;
}
.barber-slider .card {
min-width: 0;
width: 100%;
aspect-ratio: 3/4;
}
.barber-card .card-content {
padding: 0 14px 14px;
justify-content: flex-end;
background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}
.barber-card .card-content > div:last-child {
width: 100%;
padding: 0;
background: none;
border: none;
}
.barber-card .card-num,
.barber-card .btn-outline {
display: none;
}
.barber-card .card-title {
font-size: 17px;
margin-bottom: 2px;
}
.barber-card .card-subtitle {
font-size: 11px;
opacity: 0.85;
}
.barber-card .card-meta {
display: none;
}
.slider-nav {
display: none;
}
}
.barber-role {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
display: block;
margin-bottom: 25px;
}
.barber-desc {
color: var(--text-muted);
font-size: 14px;
line-height: 1.8;
}
.close-modal {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
font-size: 32px;
line-height: 1;
color: var(--text-muted);
transition: 0.3s;
z-index: 10;
}
.close-modal:hover {
color: var(--text-main);
}
.close-img-modal {
right: 4vw;
top: 40px;
font-size: 50px;
}
/* Contact Form Specifics */
.contact-form {
width: 100%;
max-width: 480px;
}
.form-group {
margin-bottom: 30px;
}
.form-group input {
width: 100%;
padding: 15px 0;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-main);
outline: none;
font-size: 14px;
font-family: inherit;
transition: 0.3s;
}
.form-group input:focus {
border-bottom-color: var(--text-main);
}
/* Image Modal Zoom */
.img-modal-content {
max-width: 90vw;
max-height: 90vh;
transform: scale(0.95);
transition: transform var(--anim);
}
.img-modal-overlay.active .img-modal-content {
transform: scale(1);
}
.img-modal-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.img-zoom {
cursor: zoom-in;
}
/* --- INTERIOR PAGES --- */
.page-container {
padding: 220px 0 140px;
width: min(calc(100% - (var(--page-pad) * 2)), var(--page-max));
max-width: none;
margin: 0 auto;
flex: 1;
}
.section-head {
margin-bottom: 100px;
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1px solid var(--border);
padding-bottom: 40px;
}
.section-title {
font-size: 80px;
letter-spacing: -1px;
}
.section-meta {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
}
/* --- GRID FOR BARBERS / SHOP --- */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.card {
background: var(--bg-surface);
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 500px;
position: relative;
transition: transform var(--anim), box-shadow var(--anim), background 0.4s ease;
border: 1px solid var(--border);
}
.card:hover {
background: #0f0f0f;
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.barber-card {
cursor: pointer;
}
/* specifically barber */
.card-num {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 60px;
font-family: var(--font-head);
letter-spacing: 1px;
}
.card-title {
font-size: 36px;
margin-bottom: 10px;
}
.card-subtitle {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
.card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
}
.card-chip {
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.72);
padding: 7px 10px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
background: rgba(5, 5, 5, 0.35);
backdrop-filter: none;
}
.barber-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 34px;
max-width: 560px;
}
.barber-gallery img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
filter: grayscale(100%);
border: 1px solid var(--border);
}
.barber-gallery img:hover {
filter: grayscale(0%);
}
.barber-gallery {
display: none;
}
/* ABOUT */
.about-page {
min-height: 100vh;
background: #030303;
}
.about-cinematic {
background: #030303;
}
.about-hero {
min-height: 100vh;
min-height: 100svh;
padding: 0 4vw;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: #030303;
}
.about-bg-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 1;
transform: translateX(110%) scale(1);
transition: transform 1.35s cubic-bezier(0.76, 0, 0.24, 1);
filter: grayscale(28%) contrast(1.02) brightness(1.1);
will-change: transform;
}
.about-bg-slide.active {
transform: translateX(0) scale(1);
z-index: 2;
}
.about-bg-slide.exiting {
transform: translateX(110%) scale(1);
z-index: 3;
}
.about-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(3, 3, 3, 0.18) 0%, rgba(3, 3, 3, 0.01) 42%, rgba(3, 3, 3, 0.24) 100%),
radial-gradient(circle at center, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.1) 74%);
z-index: 1;
}
.about-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.14));
mix-blend-mode: multiply;
}
.about-veil {
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
width: 18vw;
pointer-events: none;
backdrop-filter: blur(2px);
opacity: 0.08;
}
.about-veil-left {
left: 0;
background: linear-gradient(90deg, #030303, transparent);
}
.about-veil-right {
right: 0;
background: linear-gradient(270deg, #030303, transparent);
}
.about-content {
position: relative;
z-index: 4;
width: min(1200px, 100%);
text-align: center;
}
.about-wordmark {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
color: rgba(255, 255, 255, 0.48);
font-size: clamp(74px, 12.6vw, 180px);
line-height: 0.88;
letter-spacing: 0.025em;
text-transform: uppercase;
text-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}
.about-editorial {
padding: 150px 4vw 170px;
background:
radial-gradient(circle at 18% 0%, rgba(93, 74, 102, 0.18), transparent 34%),
linear-gradient(180deg, #030303 0%, #070707 100%);
}
.about-editorial-head {
display: grid;
grid-template-columns: 0.8fr 1.2fr 1fr;
gap: 5vw;
align-items: end;
margin-bottom: 90px;
border-bottom: 1px solid var(--border);
padding-bottom: 42px;
}
.about-editorial-title {
font-size: clamp(44px, 7vw, 116px);
max-width: 720px;
}
.about-editorial-copy {
color: rgba(255, 255, 255, 0.68);
font-size: clamp(14px, 1.15vw, 18px);
line-height: 1.9;
max-width: 520px;
}
.about-editorial-grid {
display: grid;
grid-template-columns: 1fr 1.22fr 0.82fr;
gap: 18px;
align-items: stretch;
}
.about-editorial-card {
position: relative;
overflow: hidden;
min-height: 540px;
border: 1px solid var(--border);
background: var(--bg-surface);
}
.about-editorial-card-tall {
min-height: 680px;
transform: translateY(-60px);
}
.about-editorial-card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.08) brightness(0.78);
transform: scale(1.04);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
}
.about-editorial-card:hover img {
transform: scale(1.1);
filter: grayscale(20%) contrast(1.06) brightness(0.9);
}
.reveal-up,
.image-reveal {
will-change: transform, opacity;
}
/* ABOUT (Static / Editorial flow) */
.about-main {
padding-top: var(--header-h);
}
.about-hero-static {
position: relative;
width: 100%;
margin: 0 auto;
height: clamp(520px, calc(100svh - var(--header-h)), 820px);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--border);
}
.about-hero-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.about-hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
filter: contrast(1.04) saturate(0.98) brightness(0.94);
transform: translateX(-108%);
opacity: 0;
transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
will-change: transform, opacity;
}
.about-hero-slide.is-active {
transform: translateX(0);
opacity: 1;
}
.about-hero-slide.is-exiting {
transform: translateX(108%);
opacity: 1;
}
.about-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(1200px 600px at 50% 18%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0)),
linear-gradient(180deg, rgba(5, 5, 5, 0.10) 0%, rgba(5, 5, 5, 0.26) 72%, rgba(5, 5, 5, 0.50) 100%);
pointer-events: none;
z-index: 1;
}
.about-wordmark-static {
position: relative;
z-index: 2;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(66px, 13vw, 190px);
line-height: 0.95;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.66);
text-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
}
.about-studio,
.about-motion-gallery,
.about-experience {
width: min(calc(100% - (var(--page-pad) * 2)), var(--page-max));
margin: 0 auto;
}
.about-studio {
padding: clamp(60px, 7vw, 110px) 0 clamp(48px, 6vw, 82px);
}
.about-studio-lede {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
gap: clamp(28px, 6vw, 96px);
align-items: end;
padding-bottom: clamp(42px, 5vw, 72px);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.about-studio-lede .about-kicker {
grid-column: 1 / -1;
margin-bottom: -8px;
color: var(--accent);
}
.about-studio-lede h2 {
font-size: clamp(44px, 7vw, 116px);
line-height: 0.88;
letter-spacing: 0;
max-width: 920px;
}
.about-studio-lede p {
color: #d4d4d4;
font-size: clamp(17px, 1.35vw, 22px);
line-height: 1.62;
max-width: 520px;
margin: 0;
}
.about-signature-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 1px;
margin-top: 34px;
background: var(--border);
border: 1px solid var(--border);
}
.about-signature-card {
min-height: clamp(320px, 30vw, 480px);
padding: clamp(26px, 3vw, 48px);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.006) 58%),
#070707;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
}
.about-signature-card::before {
content: "FERDINAND";
position: absolute;
top: 24px;
left: 26px;
font-family: var(--font-head);
font-size: clamp(54px, 7vw, 112px);
line-height: 0.8;
color: rgba(255, 255, 255, 0.025);
pointer-events: none;
}
.about-signature-card-dark {
background:
linear-gradient(145deg, rgba(185, 163, 106, 0.18), rgba(255, 255, 255, 0.018) 54%),
#080808;
}
.about-signature-card span,
.about-experience-panel span {
color: var(--accent);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
}
.about-signature-card h3 {
font-size: clamp(32px, 3.8vw, 62px);
line-height: 0.95;
margin: 20px 0 18px;
max-width: 520px;
}
.about-signature-card p {
color: var(--text-muted);
font-size: 15px;
line-height: 1.7;
max-width: 48ch;
}
.about-motion-gallery {
padding: clamp(42px, 6vw, 86px) 0;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.about-gallery-head {
display: flex;
justify-content: space-between;
gap: 32px;
align-items: end;
margin-bottom: clamp(26px, 4vw, 48px);
}
.about-gallery-head h2 {
max-width: 760px;
font-size: clamp(36px, 5.4vw, 84px);
line-height: 0.92;
}
.about-infinite-gallery {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.about-loop-track {
display: flex;
gap: clamp(14px, 2vw, 28px);
width: max-content;
animation: aboutLoop 36s linear infinite;
will-change: transform;
}
.about-loop-track figure {
width: clamp(230px, 24vw, 380px);
margin: 0;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #0a0a0a;
overflow: hidden;
}
.about-loop-track img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: saturate(1.04) contrast(1.04) brightness(0.92);
}
.about-loop-track figcaption {
position: absolute;
left: 16px;
bottom: 14px;
color: rgba(255, 255, 255, 0.82);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
}
@keyframes aboutLoop {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(calc(-50% - clamp(7px, 1vw, 14px)), 0, 0);
}
}
.about-experience {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
gap: clamp(34px, 6vw, 96px);
align-items: stretch;
padding: clamp(80px, 9vw, 140px) 0 clamp(92px, 10vw, 156px);
}
.about-experience-copy {
display: flex;
flex-direction: column;
justify-content: center;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: clamp(34px, 5vw, 72px) 0;
}
.about-experience-copy h2 {
font-size: clamp(38px, 5.8vw, 92px);
line-height: 0.92;
max-width: 820px;
}
.about-experience-copy p {
margin-top: 28px;
max-width: 680px;
color: #d5d5d5;
font-size: clamp(17px, 1.35vw, 22px);
line-height: 1.65;
}
.about-experience-panel {
display: grid;
min-height: 520px;
border: 1px solid rgba(185, 163, 106, 0.24);
background:
radial-gradient(circle at 72% 16%, rgba(185, 163, 106, 0.16), transparent 38%),
linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.006) 62%),
#080808;
}
.about-experience-panel div {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 3.5vw, 46px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.about-experience-panel div:last-child {
border-bottom: 0;
}
.about-experience-panel strong {
margin-top: 12px;
font-family: var(--font-head);
font-size: clamp(28px, 3.4vw, 52px);
line-height: 0.98;
text-transform: uppercase;
font-weight: 500;
}
.about-flow {
padding: 92px var(--page-pad) 28px;
max-width: var(--page-max);
margin: 0 auto;
}
.about-kicker {
font-family: var(--font-head);
letter-spacing: 3px;
font-size: 12px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 18px;
}
.about-title {
font-size: clamp(34px, 4.6vw, 64px);
line-height: 0.98;
margin-bottom: 16px;
text-wrap: balance;
}
.about-subtitle {
font-size: clamp(22px, 2.3vw, 30px);
margin-bottom: 18px;
letter-spacing: 1px;
}
.about-paragraph {
font-size: 16px;
line-height: 1.72;
color: #d6d6d6;
margin-bottom: 14px;
max-width: none;
}
.about-lede {
border-bottom: 1px solid var(--border);
padding-bottom: 34px;
margin-bottom: 34px;
}
.about-lede-v2 {
padding: 26px 28px 30px;
margin-bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(90deg, rgba(185, 163, 106, 0.22), rgba(185, 163, 106, 0) 42%),
radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.05), transparent 45%),
rgba(255, 255, 255, 0.01);
}
.about-lede-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: clamp(18px, 4vw, 64px);
align-items: end;
}
.about-paragraph-lede {
font-size: 17px;
color: #d3d3d3;
max-width: none;
}
.about-lede-grid>p.about-paragraph-lede {
border-left: 2px solid rgba(185, 163, 106, 0.45);
padding-left: 18px;
}
.about-hrows {
position: relative;
margin-top: clamp(56px, 7vw, 104px);
display: grid;
gap: clamp(28px, 3.5vw, 56px);
padding: clamp(38px, 5vw, 72px) 0 clamp(46px, 5.5vw, 86px);
border-top: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
isolation: isolate;
}
.about-hrows::before {
content: "";
position: absolute;
inset: 0 7vw auto auto;
width: min(34vw, 480px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(185, 163, 106, 0.72), transparent);
z-index: -1;
}
.about-hrows::after {
content: "FERDINAND METHOD";
position: absolute;
top: clamp(28px, 3.8vw, 54px);
right: 0;
font-family: var(--font-head);
font-size: clamp(46px, 9vw, 132px);
line-height: 0.82;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.025);
pointer-events: none;
z-index: -1;
}
.about-hrow {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
gap: clamp(34px, 6vw, 108px);
align-items: stretch;
padding: clamp(24px, 3.6vw, 48px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 0;
border-right: 0;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.006) 48%, transparent 72%),
rgba(255, 255, 255, 0.006);
}
.about-hrow:first-child {
min-height: min(760px, 82vh);
border-color: rgba(185, 163, 106, 0.34);
background:
linear-gradient(120deg, rgba(185, 163, 106, 0.2), rgba(255, 255, 255, 0.025) 38%, rgba(255, 255, 255, 0) 68%),
radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.08), transparent 42%),
rgba(255, 255, 255, 0.01);
}
.about-hrows .about-hrow:first-child {
border-top: 1px solid rgba(185, 163, 106, 0.36);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding: clamp(26px, 4vw, 58px);
}
.about-hrow-text .about-kicker {
margin-bottom: clamp(18px, 2.4vw, 34px);
font-size: clamp(15px, 1.7vw, 24px);
letter-spacing: 0.28em;
color: rgba(185, 163, 106, 0.86);
}
.about-hrow-text {
max-width: none;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.about-hrow-text .about-subtitle {
font-size: clamp(42px, 7.2vw, 112px);
line-height: 0.86;
letter-spacing: 0.02em;
margin-bottom: clamp(20px, 2.5vw, 34px);
}
.about-hrow .about-paragraph {
max-width: 52ch;
font-size: clamp(18px, 1.8vw, 26px);
line-height: 1.46;
color: #eeeeee;
margin-bottom: 0;
}
.about-hrow-media {
display: flex;
justify-content: flex-end;
align-self: stretch;
min-height: 100%;
}
.about-portrait-card {
width: min(460px, 100%);
border: 1px solid rgba(255, 255, 255, 0.07);
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.03), transparent 50%),
rgba(255, 255, 255, 0.01);
padding: 14px;
}
.about-swipe {
width: 100%;
max-width: 620px;
border: 1px solid rgba(255, 255, 255, 0.16);
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.03), transparent 50%),
rgba(255, 255, 255, 0.01);
padding: clamp(10px, 1.2vw, 16px);
overflow: hidden;
box-shadow: 0 38px 90px rgba(0, 0, 0, 0.52);
min-height: 100%;
}
.about-swipe-track {
position: relative;
min-height: 0;
}
.about-swipe-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(-110%);
transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease;
will-change: transform, opacity;
}
.about-swipe-slide.is-active {
position: relative;
opacity: 1;
transform: translateX(0);
}
.about-swipe-slide.is-exiting {
opacity: 1;
transform: translateX(110%);
}
.about-caption {
margin-top: 14px;
font-size: 13px;
letter-spacing: 0.06em;
color: rgba(252, 252, 252, 0.78);
opacity: 0.9;
text-transform: uppercase;
}
.about-hrow:last-child {
grid-template-columns: 1fr 1fr;
gap: clamp(22px, 3vw, 44px);
padding: 0;
border: 0;
background: transparent;
}
.about-hrow:last-child .about-hrow-text {
min-height: clamp(300px, 33vw, 460px);
border-top: 1px solid rgba(255, 255, 255, 0.13);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.006) 62%),
rgba(255, 255, 255, 0.004);
padding: clamp(26px, 3.4vw, 48px);
transition: transform 0.55s var(--anim), border-color 0.55s ease, background 0.55s ease;
}
.about-hrow:last-child .about-hrow-text:hover {
transform: translateY(-6px);
border-top-color: rgba(185, 163, 106, 0.42);
background:
linear-gradient(150deg, rgba(185, 163, 106, 0.12), rgba(255, 255, 255, 0.01) 62%),
rgba(255, 255, 255, 0.006);
}
.about-hrow:last-child .about-hrow-text .about-subtitle {
font-size: clamp(36px, 5.2vw, 78px);
}
.about-hrow:last-child .about-hrow-text .about-paragraph {
font-size: clamp(17px, 1.45vw, 21px);
color: #d8d8d8;
}
.about-portrait {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border: 1px solid var(--border);
filter: grayscale(26%) contrast(1.05) brightness(0.92);
transition: transform 0.55s var(--anim), filter 0.55s ease;
will-change: transform, filter;
}
.about-portrait:hover {
transform: translateY(-6px) scale(1.01);
filter: grayscale(10%) contrast(1.06) brightness(0.98);
}
.about-advantages {
padding: 56px var(--page-pad) 88px;
max-width: var(--page-max);
margin: 0 auto;
}
.about-advantages-v2 {
padding-top: clamp(96px, 10vw, 156px);
}
.about-advantages-head {
margin-bottom: 30px;
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
border-top: 1px solid var(--border);
padding-top: 20px;
}
.advantages-grid-v2 {
grid-template-columns: 1fr 1fr;
gap: 28px 56px;
padding-top: 34px;
}
.advantage-row {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.advantage-row .adv-num {
margin: 0;
padding-top: 6px;
}
.advantage-row .adv-title {
margin-bottom: 8px;
}
.advantage-row .adv-desc {
margin: 0;
max-width: 46ch;
}
.advantage-tile {
padding: 26px 22px;
background:
radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.045), transparent 40%),
rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.07);
transition: transform 0.55s var(--anim), border-color 0.55s ease, background 0.55s ease;
}
.advantage-tile:hover {
transform: translateY(-4px);
border-color: rgba(185, 163, 106, 0.26);
background:
radial-gradient(circle at 20% 10%, rgba(185, 163, 106, 0.09), transparent 46%),
rgba(255, 255, 255, 0.012);
}
.adv-num {
display: inline-block;
font-family: var(--font-head);
font-size: 12px;
letter-spacing: 3px;
color: var(--text-muted);
margin-bottom: 14px;
}
.adv-title {
font-size: 18px;
letter-spacing: 1px;
margin-bottom: 12px;
}
.adv-desc {
font-size: 13px;
line-height: 1.7;
color: #b9b9b9;
margin: 0;
}
.card-price {
font-family: var(--font-head);
font-size: 24px;
margin-bottom: 30px;
}
.card .btn-outline {
align-self: flex-start;
margin-top: auto;
}
/* SHOP SPECIFIC */
.product-card {
align-items: center;
text-align: center;
}
.product-mosaic {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.product-tile {
min-height: 520px;
padding: 38px;
background:
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.055), transparent 38%),
#090909;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
border: 1px solid transparent;
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background 0.55s ease;
}
.product-tile-large {
grid-column: span 2;
min-height: 640px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.product-tile-wide {
grid-column: span 2;
flex-direction: row;
align-items: center;
justify-content: center;
}
.product-tile-tall {
grid-row: span 2;
min-height: 700px;
}
.product-tile:hover {
background:
radial-gradient(circle at 50% 16%, rgba(185, 163, 106, 0.14), transparent 42%),
#0d0d0d;
transform: translateY(-4px);
}
.product-tile .product-img-wrapper {
flex: 1;
margin: 0 auto;
max-width: 400px;
max-height: 360px;
}
.product-tile-large .product-img-wrapper,
.product-tile-wide .product-img-wrapper {
flex: 0 1 48%;
height: 360px;
max-width: 520px;
max-height: 400px;
}
.product-tile-tall .product-img-wrapper {
max-height: 430px;
}
.product-info {
position: relative;
z-index: 2;
text-align: left;
width: 100%;
max-width: 360px;
}
.product-tile .card-num {
margin-bottom: 24px;
}
.product-tile .card-subtitle {
margin-bottom: 24px;
}
.product-tile .btn-outline {
max-width: 220px;
}
.product-img-wrapper {
width: 100%;
aspect-ratio: 4/5;
margin-bottom: 40px;
overflow: hidden;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.product-img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .product-img,
.product-tile:hover .product-img {
transform: scale(1.1) translateY(-10px);
}
.shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: -56px 0 42px;
color: var(--text-muted);
}
.shop-toolbar p {
max-width: 620px;
font-size: 15px;
line-height: 1.7;
}
.cart-toggle-btn {
white-space: nowrap;
}
.cart-toggle-btn span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
margin-left: 10px;
border-radius: 999px;
background: var(--text-main);
color: var(--bg-color);
letter-spacing: 0;
}
.cart-backdrop {
position: fixed;
inset: 0;
z-index: 2500;
background: rgba(0, 0, 0, 0.58);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.cart-backdrop.active {
opacity: 1;
pointer-events: auto;
}
.cart-panel {
position: fixed;
top: 0;
right: 0;
z-index: 2600;
width: min(100vw, 460px);
height: 100vh;
height: 100dvh;
padding: max(34px, calc(24px + var(--safe-top))) max(34px, var(--safe-right)) max(34px, var(--safe-bottom)) 34px;
background: #050505;
border-left: 1px solid var(--border);
box-shadow: -24px 0 80px rgba(0, 0, 0, 0.52);
transform: translateX(105%);
transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cart-panel.active {
transform: translateX(0);
}
body.cart-open {
overflow: hidden;
}
.cart-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 26px;
}
.cart-panel-head h2 {
margin-top: 8px;
font-size: 46px;
}
.close-cart {
width: 42px;
height: 42px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-main);
font-size: 28px;
cursor: pointer;
}
.cart-items {
display: grid;
gap: 12px;
}
.cart-line {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
padding: 16px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--border);
border-radius: 8px;
}
.cart-line span,
.cart-line small {
display: block;
color: var(--text-muted);
font-size: 11px;
letter-spacing: 1px;
}
.cart-line strong {
display: block;
margin: 4px 0;
font-size: 16px;
letter-spacing: 0.5px;
}
.cart-line-controls {
display: grid;
grid-template-columns: 32px 28px 32px 32px;
align-items: center;
gap: 6px;
}
.cart-line-controls button {
width: 32px;
height: 32px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-main);
cursor: pointer;
}
.cart-line-controls b {
text-align: center;
font-weight: 500;
}
.cart-empty {
padding: 26px;
color: var(--text-muted);
border: 1px dashed var(--border);
text-align: center;
}
.cart-empty[hidden] {
display: none;
}
.cart-summary {
display: flex;
align-items: center;
justify-content: space-between;
margin: 24px 0;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 15px;
}
.cart-summary strong {
font-family: var(--font-head);
font-size: 28px;
}
.cart-form .btn-outline {
width: 100%;
}
.form-group textarea {
width: 100%;
min-height: 98px;
resize: vertical;
padding: 14px 0;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-main);
outline: none;
font-size: 14px;
font-family: inherit;
}
.form-group textarea:focus {
border-bottom-color: var(--text-main);
}
.cart-result {
margin-top: 20px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.6;
}
.cart-result a {
display: inline-flex;
margin-top: 12px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
/* NEW GALLERY MASONRY */
.gallery-masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.masonry-item {
position: relative;
overflow: hidden;
aspect-ratio: 1/1;
border-radius: 8px;
cursor: zoom-in;
}
.masonry-item.large {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: 1/1;
}
.masonry-item.wide {
grid-column: span 2;
aspect-ratio: 2/1;
}
.masonry-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: transform var(--anim), filter 0.5s ease;
}
.masonry-item:hover img {
transform: scale(1.05);
filter: grayscale(0%);
}
/* PORTFOLIO */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.2vw, 22px);
background: transparent;
border: 0;
}
.portfolio-item {
aspect-ratio: 3/4;
background: var(--bg-color);
position: relative;
overflow: hidden;
border: 1px solid var(--border);
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.6s ease, transform 0.6s ease;
}
.portfolio-item video {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.6s ease, transform 0.6s ease;
display: block;
}
.portfolio-item:hover img,
.portfolio-item:hover video {
filter: grayscale(0%);
transform: scale(1.05);
}
.portfolio-item::before {
content: "PHOTO";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 4px;
z-index: 0;
}
.portfolio-video::before {
content: none;
}
/* SERVICES */
.service-intro {
display: flex;
justify-content: space-between;
gap: 32px;
align-items: flex-end;
margin: -52px 0 42px;
color: var(--text-muted);
}
.service-intro p {
max-width: 680px;
font-size: clamp(16px, 1.35vw, 22px);
line-height: 1.55;
color: #c8c8c8;
}
.service-intro span {
color: var(--accent);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
white-space: nowrap;
}
.service-list {
display: grid;
gap: 12px;
}
.service-row {
display: grid;
grid-template-columns: 58px minmax(210px, 1.2fr) minmax(260px, 1.35fr) minmax(170px, 0.85fr);
gap: 24px;
align-items: center;
padding: 26px 28px;
border: 1px solid var(--border);
cursor: default;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 42%),
rgba(255, 255, 255, 0.018);
transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
border-radius: 8px;
}
.service-row:hover {
background:
linear-gradient(135deg, rgba(185, 163, 106, 0.1), transparent 44%),
rgba(255, 255, 255, 0.03);
border-color: rgba(185, 163, 106, 0.24);
transform: translateY(-2px);
}
.service-row:hover .service-name {
color: var(--text-main);
}
.service-index {
color: var(--accent);
font-size: 11px;
letter-spacing: 2px;
}
.service-name {
font-size: clamp(23px, 2.2vw, 36px);
transition: color 0.4s ease;
}
.service-desc {
color: var(--text-muted);
font-size: 14px;
line-height: 1.65;
}
.service-price {
text-align: right;
font-size: clamp(22px, 2vw, 30px);
font-family: var(--font-head);
color: var(--text-main);
white-space: nowrap;
}
.services-cta {
margin-top: 54px;
text-align: center;
}
.services-cta .btn-outline {
padding: 18px 48px;
font-size: 13px;
}
/* --- MEDIA QUERIES --- */
@media (max-width: 1024px) {
:root {
--header-h: 80px;
}
.site-header {
position: fixed;
top: 0;
left: 0;
height: 80px;
padding: 0 var(--page-pad);
background: rgba(5, 5, 5, 0.95);
backdrop-filter: blur(10px);
z-index: 2000;
width: 100%;
}
.site-header .brand-logo img {
height: 110px;
/* Increased from 90px for better visibility */
top: 0;
}
.nav-desktop,
.header-phone {
display: none;
}
/* Hide mostly everything but logo and burger */
.menu-toggle {
display: flex;
}
.site-header .brand-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: calc(100vw - 112px);
justify-content: center;
}
.mobile-menu-header {
position: relative;
justify-content: center;
}
.mobile-menu-header .close-btn {
position: absolute;
left: 0;
}
.hero-content {
flex-direction: column;
text-align: center;
}
.hero-art {
display: none;
}
.vertical-text {
display: none;
}
.service-intro {
flex-direction: column;
align-items: flex-start;
margin-top: -48px;
}
.service-row {
grid-template-columns: 44px 1fr;
gap: 14px 20px;
}
.service-desc,
.service-price {
grid-column: 2;
text-align: left;
}
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.product-mosaic {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-tile,
.product-tile-tall,
.product-tile-large {
min-height: 560px;
}
.gallery-masonry {
grid-template-columns: repeat(2, 1fr);
}
.masonry-item.large {
grid-column: span 2;
grid-row: span 1;
aspect-ratio: 2/1;
}
.barber-box {
flex-direction: column;
overflow-y: auto;
max-height: 90vh;
}
.barber-modal-img,
.barber-modal-info {
width: 100%;
}
.barber-modal-img {
height: 300px;
}
.barber-modal-info {
padding: 30px;
}
}
@media (max-width: 768px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
.barber-modal-img {
height: 45vh;
}
.barber-modal-info {
padding: 30px 20px;
}
.barber-modal-info h2 {
font-size: clamp(32px, 10vw, 56px);
}
}
/* --- SMALL SCREEN ADAPTIVE 320–425px --- */
@media (max-width: 425px) {
.page-container {
padding: 160px 0 80px;
}
.section-title {
font-size: 42px;
}
.section-head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 60px;
padding-bottom: 20px;
}
.hero-title {
font-size: clamp(36px, 13vw, 60px);
}
.hero-desc {
font-size: 13px;
}
.hero-content {
gap: 20px;
}
.card {
padding: 30px 20px;
min-height: 380px;
}
.card-title {
font-size: 26px;
}
.card-content {
padding: 24px;
}
.slider-nav {
margin-top: 20px;
}
.service-name {
font-size: 24px;
}
.service-price {
font-size: 20px;
}
.service-row {
grid-template-columns: 1fr;
padding: 24px 20px;
}
.service-desc,
.service-price {
grid-column: auto;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.grid {
grid-template-columns: 1fr;
}
.product-mosaic {
grid-template-columns: 1fr;
}
.product-tile,
.product-tile-large,
.product-tile-wide,
.product-tile-tall {
grid-column: span 1;
grid-row: span 1;
min-height: auto;
padding: 30px 22px;
flex-direction: column;
align-items: stretch;
}
.product-tile .product-img-wrapper {
max-width: 290px;
aspect-ratio: 1/1;
margin-bottom: 24px;
}
.product-info {
text-align: center;
}
.product-tile .btn-outline {
max-width: none;
}
.barber-modal-img {
height: 42vh;
}
.barber-modal-info {
padding: 24px 16px;
}
.barber-modal-info h2 {
font-size: 32px;
}
.mobile-nav-links a {
font-size: clamp(28px, 9vw, 44px);
}
.mobile-menu-footer {
padding: 20px;
}
.contact-form {
padding: 30px 20px;
}
.form-group input {
font-size: 13px;
}
/* Symmetric mobile brand: logo + FERDINAND BARBERSHOP */
.site-header {
height: 80px;
position: fixed;
top: 0;
justify-content: center;
}
.site-header .brand-logo {
gap: 12px;
margin: 0 auto;
}
.site-header .brand-logo img {
height: 44px;
width: auto;
}
.site-header .logo-info {
align-items: center;
text-align: center;
}
.site-header .logo-address {
display: none;
}
.site-header .logo-text {
font-size: 18px;
letter-spacing: 2px;
}
.site-header .logo-subtext {
font-size: 11px;
letter-spacing: 3px;
}
.product-img-wrapper {
aspect-ratio: 1/1;
width: 100%;
margin: 0 0 20px 0;
}
.gallery-masonry {
grid-template-columns: 1fr;
}
.masonry-item.large,
.masonry-item.wide {
grid-column: span 1;
grid-row: span 1;
aspect-ratio: 4/3;
}
/* About layout on small screens */
.about-wordmark-static {
font-size: clamp(46px, 13vw, 66px);
}
.about-flow {
padding: 80px 5vw 20px;
}
.about-lede-grid {
grid-template-columns: 1fr;
align-items: start;
}
.about-split {
grid-template-columns: 1fr;
gap: 26px;
padding: 44px 0;
}
.advantages-grid {
grid-template-columns: 1fr;
}
.about-hrow {
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
}
.about-hrow:first-child {
min-height: auto;
}
.about-hrow:last-child {
grid-template-columns: 1fr;
gap: 20px;
}
.about-hrow:last-child .about-hrow-text {
min-height: auto;
}
.about-hrow-media {
justify-content: center;
}
.about-swipe {
width: 100%;
max-width: 100%;
}
.advantages-grid-v2 {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 375px) {
.hero-title {
font-size: clamp(30px, 11vw, 48px);
}
.section-title {
font-size: 36px;
}
.card-title {
font-size: 22px;
}
.barber-modal-info h2 {
font-size: 28px;
}
}
/* RIVAL MOUSE ANIMATION */
.scroll-mouse {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
z-index: 10;
}
.scroll-mouse::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 6px;
background: #fff;
border-radius: 2px;
animation: mouseWheel 2s infinite;
}
@keyframes mouseWheel {
0% {
opacity: 1;
transform: translate(-50%, 0);
}
100% {
opacity: 0;
transform: translate(-50%, 15px);
}
}
.map-section {
width: 100%;
height: 100vh;
position: relative;
background: var(--bg-color);
}
.accent-text {
color: var(--accent);
font-style: italic;
}
.map-overlay-full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 5;
pointer-events: none;
}
.map-center-marker {
position: absolute;
bottom: 80px;
left: 50%;
z-index: 10;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-size: 20px;
transform: translateX(-50%);
}
.map-caption {
position: absolute;
bottom: 40px;
left: 50%;
z-index: 10;
width: min(calc(100% - (var(--page-pad) * 2)), var(--page-max));
color: #fff;
font-size: 11px;
transform: translateX(-50%);
}
.map-caption-title {
font-weight: 700;
margin-bottom: 5px;
}
.map-caption-address {
opacity: 0.6;
}
/* --- MOBILE HEADER REDESIGN --- */
@media (max-width: 768px) {
:root {
--header-h: 78px;
}
.about-main {
padding-top: var(--header-h);
}
.site-header {
height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--page-pad);
position: fixed;
background: rgba(0, 0, 0, 0.96);
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.site-header .header-container>.brand-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
order: 1;
z-index: 5;
white-space: nowrap;
display: flex;
align-items: center;
gap: 12px;
max-width: calc(100vw - 116px);
}
.site-header .header-container>.brand-logo img {
height: 108px !important;
width: auto;
margin: -18px -8px -18px 0;
filter: brightness(1.1) contrast(1.08) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}
.site-header .header-container>.brand-logo .logo-info {
display: flex !important;
flex-direction: column !important;
align-items: flex-start;
z-index: 6;
gap: 4px;
}
.site-header .header-container>.brand-logo .logo-title {
flex-direction: column;
gap: 3px;
line-height: 0.9;
}
.site-header .header-container>.brand-logo .logo-text,
.site-header .header-container>.brand-logo .logo-subtext {
font-family: var(--font-head) !important;
font-weight: 700 !important;
color: var(--text-main);
text-shadow: 0 10px 22px rgba(0, 0, 0, 0.72);
}
.site-header .header-container>.brand-logo .logo-text {
font-size: 19px !important;
letter-spacing: 1.4px !important;
}
.site-header .header-container>.brand-logo .logo-subtext {
font-size: 13px !important;
letter-spacing: 1.65px !important;
}
.site-header .header-container>.brand-logo .logo-address {
display: none;
}
.about-main {
padding-top: var(--header-h);
}
.about-page .about-hero-static {
height: clamp(380px, calc(100svh - var(--header-h)), 620px);
min-height: 0;
}
.menu-toggle {
order: 0;
/* Back to the left */
margin: 0;
padding: 5px;
z-index: 10;
margin-left: -10px;
}
.m-book-btn {
display: none !important;
/* Fully removed from header as requested */
}
}
/* --- CONTACT BUBBLES --- */
.contact-bubble,
.booking-bubble {
position: fixed;
left: 4vw;
height: 50px;
padding: 0 20px;
background: #fff;
color: #000;
border-radius: 50px;
display: none;
align-items: center;
gap: 10px;
z-index: 1500;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
text-decoration: none;
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.contact-bubble {
bottom: 30px;
}
.booking-bubble {
bottom: 95px;
}
.contact-bubble:hover,
.booking-bubble:hover {
transform: translateY(-5px);
background: #f8f8f8;
}
.m-book-btn {
display: none !important;
}
@media (max-width: 768px) {
.contact-bubble,
.booking-bubble {
display: flex;
}
}
@media (max-width: 768px) {
.about-studio,
.about-motion-gallery,
.about-experience {
width: min(calc(100% - (var(--page-pad) * 2)), var(--page-max));
}
.about-studio {
padding-top: 58px;
}
.about-studio-lede,
.about-experience {
grid-template-columns: 1fr;
}
.about-signature-grid {
grid-template-columns: 1fr;
}
.about-signature-card {
min-height: 280px;
}
.about-gallery-head {
display: block;
}
.about-loop-track {
animation-duration: 42s;
}
.about-loop-track figure {
width: min(72vw, 320px);
}
.about-experience-panel {
min-height: 0;
}
.shop-toolbar {
flex-direction: column;
align-items: stretch;
margin-top: -46px;
}
.cart-toggle-btn {
width: 100%;
}
.cart-panel {
width: 100vw;
padding: 24px 20px 32px;
}
.cart-panel-head h2 {
font-size: 38px;
}
.cart-line {
grid-template-columns: 1fr;
}
.cart-line-controls {
grid-template-columns: 36px 32px 36px 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.about-loop-track {
animation: none;
}
}
@media (max-width: 768px) {
.barber-gallery {
grid-template-columns: repeat(3, 1fr);
}
.about-page~.contact-bubble,
.about-page~.booking-bubble {
display: none;
}
.about-hero {
min-height: 100svh;
padding: 0 6vw;
align-items: center;
}
.about-wordmark {
font-size: clamp(40px, 12vw, 58px);
line-height: 0.9;
letter-spacing: 0.012em;
}
.about-content {
width: 100%;
max-width: calc(100vw - 40px);
margin: 0 auto;
}
.about-veil {
width: 28vw;
opacity: 0.22;
}
.about-editorial {
padding: 96px 6vw 120px;
}
.about-editorial-head {
display: block;
margin-bottom: 54px;
padding-bottom: 30px;
}
.about-editorial-title {
margin: 22px 0 24px;
}
.about-editorial-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.about-editorial-card,
.about-editorial-card-tall {
min-height: auto;
aspect-ratio: 4/5;
transform: none;
}
}
@media (max-width: 425px) {
.site-header .logo-text,
.site-header .logo-subtext {
font-size: 13px !important;
}
.site-header .logo-address {
max-width: 52vw;
font-size: 7px;
}
.barber-gallery {
grid-template-columns: repeat(2, 1fr);
}
.about-wordmark {
font-size: clamp(38px, 11.5vw, 50px);
}
.about-editorial-copy {
font-size: 13px;
line-height: 1.75;
}
}
@media (max-width: 1024px) {
.site-header .logo-address {
display: none;
}
.mobile-menu-header {
position: relative;
justify-content: center;
}
.mobile-menu-header .close-btn {
position: absolute;
left: 0;
}
}
.mobile-menu.active~.booking-bubble,
.mobile-menu.active~.contact-bubble {
display: none;
}
@media (max-width: 1280px) {
.site-header .logo-address {
display: none;
}
.site-header .nav-desktop,
.site-header .header-phone {
display: none !important;
}
.site-header .menu-toggle {
display: flex !important;
}
.site-header .brand-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: calc(100vw - 112px);
justify-content: center;
}
}
/* --- PREMIUM GLOBAL FOOTER --- */
.site-footer {
border-top: 1px solid var(--border);
padding: clamp(84px, 8vw, 132px) var(--page-pad) clamp(48px, 5vw, 74px);
background: #030303;
}
.footer-container {
max-width: var(--page-max);
margin: 0 auto;
}
.footer-brand-block {
display: grid;
grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
gap: clamp(40px, 7vw, 120px);
align-items: end;
padding-bottom: clamp(54px, 6vw, 86px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand-logo {
position: static;
transform: none;
justify-content: flex-start;
width: max-content;
max-width: 100%;
margin: 0;
color: var(--text-main);
}
.footer-brand-logo .logo-address {
color: rgba(252, 252, 252, 0.48);
}
.footer-statement {
max-width: 980px;
justify-self: end;
font-size: clamp(42px, 5.6vw, 104px);
line-height: 0.94;
letter-spacing: 0;
text-align: right;
color: rgba(252, 252, 252, 0.95);
}
.footer-main-grid {
display: grid;
grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1fr) minmax(260px, 1fr) minmax(320px, 1.25fr);
gap: clamp(32px, 5vw, 86px);
align-items: start;
padding: clamp(46px, 5vw, 76px) 0;
}
.footer-col {
min-width: 0;
}
.footer-col-title {
display: block;
font-size: 13px;
letter-spacing: 2.6px;
color: var(--text-main);
margin-bottom: 22px;
font-weight: 500;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 13px;
}
.footer-links a,
.footer-link-button,
.footer-secondary-link {
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: color 0.3s ease;
}
.footer-link-button {
width: max-content;
padding: 0;
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
}
.footer-links a:hover,
.footer-link-button:hover,
.footer-secondary-link:hover {
color: var(--text-main);
}
.footer-contact-links {
align-items: flex-start;
}
.footer-phone {
color: var(--text-main) !important;
font-size: 15px !important;
letter-spacing: 1px;
}
.footer-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 26px;
}
.footer-action {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 14px 26px;
text-align: center;
font-size: 12px !important;
}
.footer-address-col {
font-style: normal;
}
.footer-address-col p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 15px;
}
.footer-hours {
font-size: 12px !important;
}
.footer-cta-panel {
padding: clamp(26px, 3vw, 38px);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.018);
}
.footer-cta-panel p {
max-width: 390px;
color: #cfcfcf;
font-size: 15px;
line-height: 1.7;
}
.footer-bottom {
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--text-muted);
}
@media (max-width: 1024px) {
.footer-brand-block {
grid-template-columns: 1fr;
gap: 34px;
}
.footer-brand-logo {
position: static;
left: auto;
transform: none;
justify-content: flex-start;
margin: 0;
}
.footer-statement {
justify-self: start;
text-align: left;
max-width: 860px;
}
.footer-main-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1280px) {
.footer-brand-logo .logo-address {
display: none;
}
}
@media (max-width: 768px) {
.site-footer {
padding: 68px var(--page-pad) 42px;
}
.footer-brand-block,
.footer-main-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.footer-brand-block {
padding-bottom: 42px;
}
.footer-brand-logo {
position: static;
left: auto;
transform: none;
justify-content: flex-start;
align-items: center;
gap: 4px;
margin: 0;
max-width: 100%;
}
.footer-brand-logo img {
height: 172px !important;
margin: -46px -48px -46px -32px;
transform: scale(1.02);
transform-origin: center;
}
.footer-brand-logo .logo-info {
display: flex !important;
flex-direction: column !important;
align-items: flex-start;
gap: 5px;
margin-left: 10px;
}
.footer-brand-logo .logo-title {
flex-direction: column;
gap: 4px;
line-height: 0.9;
}
.footer-brand-logo .logo-text,
.footer-brand-logo .logo-subtext {
font-family: var(--font-head) !important;
font-weight: 700 !important;
color: var(--text-main);
}
.footer-brand-logo .logo-text {
font-size: 18px !important;
letter-spacing: 1.25px !important;
}
.footer-brand-logo .logo-subtext {
font-size: 12.5px !important;
letter-spacing: 1.45px !important;
}
.footer-statement {
font-size: clamp(38px, 12vw, 64px);
}
.footer-main-grid {
padding: 40px 0;
}
.footer-cta-panel {
padding: 24px;
}
.footer-actions {
align-items: stretch;
flex-direction: column;
gap: 16px;
}
.footer-action {
width: 100%;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: 12px;
text-align: left;
}
}
@media (max-width: 768px) {
.site-header {
height: 78px;
position: fixed;
padding: 0 var(--page-pad);
}
.about-page .about-main {
padding-top: var(--header-h);
}
.site-header .header-container>.brand-logo {
gap: 4px;
max-width: calc(100vw - 116px);
}
.site-header .header-container>.brand-logo img {
height: 172px !important;
margin: -46px -48px -46px -32px;
transform: scale(1.02);
transform-origin: center;
}
.site-header .header-container>.brand-logo .logo-info {
gap: 5px;
margin-left: 10px;
}
.site-header .header-container>.brand-logo .logo-title {
gap: 4px;
}
.site-header .header-container>.brand-logo .logo-text {
font-size: 18px !important;
letter-spacing: 1.25px !important;
}
.site-header .header-container>.brand-logo .logo-subtext {
font-size: 12.5px !important;
letter-spacing: 1.45px !important;
}
}
@media (max-width: 375px) {
.site-header .header-container>.brand-logo {
gap: 2px;
max-width: calc(100vw - 96px);
}
.footer-brand-logo {
gap: 2px;
}
.site-header .header-container>.brand-logo img {
height: 158px !important;
margin: -44px -46px -42px -34px;
}
.footer-brand-logo img {
height: 158px !important;
margin: -44px -46px -42px -34px;
}
.site-header .header-container>.brand-logo .logo-subtext {
font-size: 12px !important;
letter-spacing: 1.25px !important;
}
.footer-brand-logo .logo-subtext {
font-size: 12px !important;
letter-spacing: 1.25px !important;
}
}
@media (max-width: 768px) {
.barber-modal .close-barber {
top: 96px !important;
right: 5vw !important;
}
.barber-box.modal-content-box {
display: block;
overflow-y: auto;
background: #030303;
}
.barber-modal-img {
width: 100% !important;
height: 68svh !important;
min-height: 520px;
background-position: center top;
}
.barber-modal-info {
width: 100% !important;
min-height: auto;
padding: 26px 5vw 72px !important;
justify-content: flex-start;
background: #030303;
}
.barber-modal-info .barber-desc {
max-width: none;
font-size: 15px;
line-height: 1.75;
}
.barber-modal-info .barber-role,
.barber-modal-info h2,
.barber-gallery {
display: none !important;
}
}
@supports (padding: max(0px)) {
.site-header,
.hero,
.site-footer {
padding-left: max(var(--page-pad), var(--safe-left));
padding-right: max(var(--page-pad), var(--safe-right));
}
.page-container,
.about-flow,
.about-advantages,
.about-studio,
.about-motion-gallery,
.about-experience {
width: min(calc(100% - max(var(--page-pad), var(--safe-left)) - max(var(--page-pad), var(--safe-right))), var(--page-max));
}
.contact-bubble,
.booking-bubble {
right: max(30px, var(--safe-right));
}
.contact-bubble {
bottom: max(30px, var(--safe-bottom));
}
.booking-bubble {
bottom: max(90px, calc(var(--safe-bottom) + 90px));
}
}
@media (min-width: 1800px) {
:root {
--page-max: 1840px;
--page-pad: clamp(56px, 4.2vw, 92px);
--header-h: 128px;
}
.site-header {
height: var(--header-h);
}
.brand-logo img {
height: 150px;
}
.logo-text,
.logo-subtext {
font-size: 26px;
letter-spacing: 2.2px;
}
.logo-address {
font-size: 11px;
}
.nav-links {
gap: clamp(42px, 2.8vw, 72px);
}
.header-right {
gap: clamp(30px, 2.2vw, 48px);
}
.hero {
min-height: 820px;
}
.hero-content {
padding-top: var(--header-h);
}
.hero-text-block {
max-width: 520px;
}
.hero-title {
font-size: clamp(108px, 5vw, 138px);
letter-spacing: 0;
}
.hero-subtitle {
font-size: 12px;
letter-spacing: 4.6px;
}
.hero-desc {
max-width: 500px;
font-size: 16px;
}
.hero-bg-text {
font-size: clamp(280px, 17vw, 380px);
}
.vertical-text {
font-size: 12px;
}
.page-container {
padding-top: clamp(220px, 12vw, 292px);
padding-bottom: clamp(150px, 8vw, 220px);
}
.section-head {
margin-bottom: clamp(96px, 5.2vw, 138px);
}
.section-title {
font-size: clamp(88px, 4.7vw, 126px);
}
.team-feature {
aspect-ratio: 21 / 8;
margin-bottom: clamp(78px, 4.8vw, 112px);
}
.barber-slider .card {
min-width: calc(25% - 0.75px);
min-height: clamp(560px, 32vw, 680px);
}
.card-content {
padding: clamp(42px, 2.6vw, 58px);
}
.portfolio-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gallery-masonry {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.product-mosaic {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.product-grid-new {
gap: clamp(30px, 1.8vw, 44px) !important;
}
.product-card-premium .info-container-premium {
padding: clamp(26px, 1.8vw, 36px) !important;
}
.service-row {
grid-template-columns: 72px minmax(280px, 1.05fr) minmax(420px, 1.4fr) minmax(190px, 0.7fr);
gap: clamp(28px, 2.4vw, 54px);
padding: clamp(30px, 2vw, 42px) clamp(34px, 2.4vw, 54px);
}
.service-desc {
font-size: 16px;
}
.footer-brand-block {
grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
}
.footer-statement {
max-width: 1120px;
font-size: clamp(86px, 5vw, 126px);
}
.footer-main-grid {
grid-template-columns: minmax(180px, 0.7fr) minmax(240px, 0.9fr) minmax(300px, 1fr) minmax(380px, 1.1fr);
}
}
@media (min-width: 2200px) {
:root {
--page-max: 1960px;
--page-pad: clamp(72px, 5vw, 124px);
--header-h: 136px;
}
.brand-logo img {
height: 158px;
}
.hero {
min-height: 900px;
}
.hero-title {
font-size: clamp(128px, 5vw, 156px);
}
.hero-bg-text {
font-size: clamp(360px, 16vw, 460px);
}
.about-hrow:first-child {
min-height: min(860px, 74vh);
}
.about-swipe {
max-width: 720px;
}
.portfolio-grid {
gap: clamp(18px, 1vw, 28px);
}
}
/* --- ABOUT HERO: Premium Cinematic Block --- */
.about-hero-content-new {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
text-align: center;
opacity: 0;
animation: aboutHeroIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
/* Massive bull — the main visual event */
.about-hero-logo {
width: clamp(180px, 30vw, 480px);
height: auto;
display: block;
filter:
brightness(0) invert(1)
drop-shadow(0 0 60px rgba(185, 163, 106, 0.18))
drop-shadow(0 30px 80px rgba(0, 0, 0, 0.9));
transform-origin: center bottom;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.6s ease;
animation: logoFloat 6s ease-in-out infinite;
will-change: transform;
}
.about-hero-logo:hover {
filter:
brightness(0) invert(1)
drop-shadow(0 0 80px rgba(185, 163, 106, 0.35))
drop-shadow(0 30px 80px rgba(0, 0, 0, 0.9));
transform: scale(1.04);
animation-play-state: paused;
}
/* Gold divider line between logo and wordmark */
.about-hero-divider {
width: clamp(60px, 8vw, 120px);
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
margin: clamp(18px, 2.5vw, 32px) 0;
opacity: 0;
animation: aboutHeroIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
/* FERDINAND wordmark — restrained, spaced, refined */
.about-hero-title-new {
font-family: var(--font-head);
font-size: clamp(20px, 2.8vw, 40px);
font-weight: 400;
letter-spacing: 0.55em;
padding-left: 0.55em;
color: rgba(252, 252, 252, 0.92);
text-shadow: none;
line-height: 1;
margin: 0;
opacity: 0;
animation: aboutHeroIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}
/* Sub-label under the wordmark */
.about-hero-sub {
margin-top: clamp(10px, 1.2vw, 16px);
font-size: clamp(9px, 1vw, 11px);
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--accent);
font-family: var(--font-body);
font-weight: 400;
opacity: 0;
animation: aboutHeroIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}
/* Entrance */
@keyframes aboutHeroIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Subtle breathing float on the bull */
@keyframes logoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Deeper, heavier overlay for the about hero specifically */
.about-hero-static .about-hero-overlay {
background:
radial-gradient(ellipse 120% 80% at 50% 0%, rgba(5,5,5,0.12), rgba(0,0,0,0)),
linear-gradient(180deg,
rgba(5,5,5,0.55) 0%,
rgba(5,5,5,0.25) 40%,
rgba(5,5,5,0.65) 100%
);
}
/* Slide background: slight zoom-in on active slide for cinematic feel */
.about-hero-slide.is-active {
transform: translateX(0) scale(1.04) !important;
transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.85s ease !important;
}
.about-hero-slide.is-exiting {
transform: translateX(108%) scale(1) !important;
}
/* =============================================================
LUXURY HERO — Tom Ford / Saint Laurent energy
Pure darkness, ghost bull, brand mark, grain atmosphere.
No photos. No salon clichés. One mark. Power through restraint.
============================================================= */
/* ─── Section shell ─────────────────────────────────────────── */
.lux-hero {
position: relative;
width: 100%;
/* 85svh: leaves ~15vh of next section visible on desktop */
height: clamp(500px, 85svh, 85svh);
min-height: 500px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* Near-black: not pure #000, but rich graphite with warm undertone */
background-color: #060504;
/* Fade bottom into next section — no hard cut */
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
/* ─── Ultra-low-opacity background wordmark ─────────────────── */
/*
FERDINAND at ~18-20vw font size sits behind the bull at 2-3% opacity.
It reads as a texture, not text. Like a watermark in luxury paper.
The bull sits on top of it, anchoring the brand field.
*/
.lux-bg-word {
position: absolute;
z-index: 0;
pointer-events: none;
user-select: none;
font-family: var(--font-head);
font-weight: 700;
font-size: clamp(80px, 18vw, 280px);
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
color: #ffffff;
/* 2-3% opacity — texture, not text */
opacity: 0.025;
/* Center precisely */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* No animation — completely still, anchored */
will-change: auto;
}
/* ─── Ghost bull silhouette — the room's secret ─────────────── */
/*
The bull logo scaled to ~70% viewport, placed dead center,
filtered pure white and set to near-zero opacity.
Breathes once over 90 seconds. Presence without intrusion.
*/
.lux-bull-ghost {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
}
.lux-bull-ghost img {
/* +25% from 72vw → 90vw, cap raised from 1040px → 1300px */
width: clamp(420px, 90vw, 1300px);
height: auto;
display: block;
/* Slightly more visible: 0.038 → 0.065 */
filter: brightness(0) invert(1);
opacity: 0.065;
transform-origin: center center;
/* Slow breath — 90s */
animation: bullBreathe 90s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes bullBreathe {
0%, 100% { transform: scale(1.00); opacity: 0.065; }
50% { transform: scale(1.08); opacity: 0.09; }
}
/* ─── Atmospheric overlays (stacked, z-index 2-4) ───────────── */
/* 1. Edge vignette — pulls focus to center like a spotlight */
.lux-overlay-vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
/* Edge vignette */
radial-gradient(
ellipse 90% 90% at 50% 50%,
transparent 25%,
rgba(4, 3, 2, 0.50) 68%,
rgba(4, 3, 2, 0.88) 100%
),
/* Extra depth at bottom — leads eye downward */
linear-gradient(
to bottom,
transparent 50%,
rgba(4, 3, 2, 0.55) 100%
);
}
/* 2. Film grain texture — the luxury tactile layer */
.lux-overlay-grain {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0.48;
/* SVG fractal noise grain — no external file needed */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
background-size: 256px 256px;
background-repeat: repeat;
mix-blend-mode: overlay;
}
/* 3. Warm amber radial — subtle warmth around the logo, like candlelight */
.lux-overlay-radial {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
/* Wider, warmer glow — more depth around the bull */
background: radial-gradient(
ellipse 70% 65% at 50% 48%,
rgba(185, 163, 106, 0.07) 0%,
rgba(185, 163, 106, 0.02) 50%,
transparent 75%
);
}
/* ─── Foreground brand mark ──────────────────────────────────── */
.lux-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
/* Staggered entrance — each child animates in sequence */
opacity: 0;
animation: luxFadeUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes luxFadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* Foreground logo — crisp, confident, mid-size */
.lux-logo {
width: clamp(88px, 10vw, 148px);
height: auto;
display: block;
/* White — cuts through the darkness */
filter: brightness(0) invert(1)
drop-shadow(0 0 40px rgba(185, 163, 106, 0.22));
opacity: 0;
animation: luxFadeUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
/* Gold hairline rule */
.lux-rule {
width: clamp(48px, 6vw, 96px);
height: 1px;
margin: clamp(20px, 2.8vw, 36px) 0 clamp(18px, 2.4vw, 30px);
background: linear-gradient(90deg,
transparent 0%,
rgba(185, 163, 106, 0.9) 50%,
transparent 100%
);
opacity: 0;
animation: luxFadeIn 1.4s ease 0.75s forwards;
}
@keyframes luxFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* FERDINAND wordmark — architecturally spaced, not screamed */
.lux-wordmark {
font-family: var(--font-head);
font-weight: 300;
font-size: clamp(18px, 2.2vw, 34px);
letter-spacing: 0.62em;
padding-left: 0.62em; /* compensate for letter-spacing indent */
text-transform: uppercase;
color: rgba(252, 252, 252, 0.95);
line-height: 1;
margin: 0;
opacity: 0;
animation: luxFadeUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}
/* Sub-label — accent gold, minimal */
.lux-sub {
margin-top: clamp(12px, 1.4vw, 18px);
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(9px, 0.85vw, 11px);
letter-spacing: 0.30em;
text-transform: uppercase;
color: rgba(185, 163, 106, 0.75);
line-height: 1;
opacity: 0;
animation: luxFadeIn 1.4s ease 1.2s forwards;
}
/* ─── Corner metadata — geo + heritage ──────────────────────── */
/*
Tom Ford / Bentley device: minimal factual text in a corner.
Not decorative. Just precise. Like a watch bezel inscription.
*/
.lux-coord {
position: absolute;
z-index: 10;
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(8px, 0.7vw, 10px);
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(185, 163, 106, 0.38);
line-height: 1;
bottom: clamp(24px, 3.5vw, 40px);
opacity: 0;
animation: luxFadeIn 1.2s ease 1.6s forwards;
}
.lux-coord--bl { left: clamp(24px, 3.5vw, 48px); }
.lux-coord--br { right: clamp(24px, 3.5vw, 48px); }
/* ─── Mobile adaptations ─────────────────────────────────────── */
@media (max-width: 640px) {
.lux-hero {
/* On mobile show ~85svh so next section peeks */
height: 85svh;
min-height: 460px;
}
.lux-bull-ghost img {
width: 110vw;
}
.lux-wordmark {
font-size: clamp(14px, 5vw, 22px);
letter-spacing: 0.42em;
padding-left: 0.42em;
}
.lux-coord {
display: none;
}
}
/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.lux-bull-ghost img,
.lux-content,
.lux-logo,
.lux-rule,
.lux-wordmark,
.lux-sub,
.lux-coord,
.lux-bg-word {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* bg-word keeps its reduced opacity even with reduced motion */
.lux-bg-word {
opacity: 0.025 !important;
}
}
/* ─── Reveal-flash guard ─────────────────────────────────────────
Blocks that GSAP fades in are hidden up-front (via .reveal-init on
, set inline in ) so they never flash visible → hidden.
GSAP's fromTo sets an inline opacity that overrides this; reduced-motion
(and the 2.5s inline safety) fall back to fully visible. No !important
here on purpose — GSAP's inline styles must be able to win. */
.reveal-init .hero-text-block > *,
.reveal-init .section-head > *,
.reveal-init .reveal-up,
.reveal-init [data-reveal] {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.reveal-init .hero-text-block > *,
.reveal-init .section-head > *,
.reveal-init .reveal-up,
.reveal-init [data-reveal] {
opacity: 1;
}
}