/* =====================================================
Cavin — Deep Maroon Premium Design System
===================================================== */
/* ---------- Google Fonts (loaded from of every HTML page for reliability) ---------- */
/* ---------- Design Tokens (CSS Variables) ---------- */
:root {
/* Maroon Palette */
--maroon-deepest: #1A0307;
--maroon-darker: #2B050B;
--maroon-dark: #360A11;
--maroon-base: #4A0E17;
--maroon-light: #5A121C;
--maroon-lighter: #6B1A26;
/* Gold Accents */
--gold: #D4AF37;
--gold-champagne: #C9A961;
--gold-muted: #B8985C;
--gold-soft: rgba(212, 175, 55, 0.15);
/* Text */
--cream: #EAE6DF;
--offwhite: #F5F5F7;
--muted: #A89F94;
/* Typography */
--font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
--font-display: 'Cinzel', 'Cormorant Garamond', serif;
--font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
/* Transitions */
--ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-elegant: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------- Global Reset ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-sans);
font-weight: 300;
color: var(--offwhite);
background: var(--maroon-deepest);
background-image:
radial-gradient(ellipse at top, var(--maroon-base) 0%, var(--maroon-darker) 40%, var(--maroon-deepest) 100%),
linear-gradient(180deg, var(--maroon-darker) 0%, var(--maroon-deepest) 100%);
background-attachment: fixed;
line-height: 1.7;
letter-spacing: 0.02em;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--maroon-deepest);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--gold-champagne), var(--gold-muted));
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold);
}
/* ---------- Selection ---------- */
::selection {
background: var(--gold);
color: var(--maroon-deepest);
}
/* ---------- Typography ---------- */
.font-serif { font-family: var(--font-serif); }
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 400;
color: var(--cream);
line-height: 1.2;
letter-spacing: 0.01em;
}
p, li, a, span, blockquote, input, textarea, label, button {
font-family: var(--font-sans);
}
p, li, blockquote {
font-family: var(--font-sans);
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.7;
}
input, textarea {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.02em;
}
button, .btn, .btn-ghost, .btn-text {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.12em;
}
.heading-display {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.heading-serif {
font-family: var(--font-serif);
font-weight: 400;
}
.text-gold { color: var(--gold); }
.text-cream { color: var(--cream); }
.text-offwhite { color: var(--offwhite); }
.text-muted { color: var(--muted); }
.gold-gradient {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-champagne) 50%, var(--gold-muted) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tracking-luxe {
letter-spacing: 0.25em;
}
.tracking-wide {
letter-spacing: 0.15em;
}
.tracking-wider {
letter-spacing: 0.3em;
}
/* =====================================================
NAVIGATION BAR
===================================================== */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 1.75rem 0;
transition: all 600ms var(--ease-elegant);
background: transparent;
}
.navbar.scrolled {
background: rgba(26, 3, 7, 0.85);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
padding: 1rem 0;
border-bottom: 1px solid rgba(212, 175, 55, 0.08);
}
.navbar-brand {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.35em;
color: var(--cream);
text-decoration: none;
transition: color 400ms var(--ease-luxury);
}
.navbar-brand:hover {
color: var(--gold);
}
.navbar-brand-sub {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.4em;
color: var(--gold);
display: block;
margin-top: 2px;
font-weight: 300;
}
.nav-link {
position: relative;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--cream);
text-decoration: none;
padding: 0.5rem 0;
transition: color 400ms var(--ease-luxury);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--gold);
transition: all 500ms var(--ease-luxury);
transform: translateX(-50%);
}
.nav-link:hover,
.nav-link.active {
color: var(--gold);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 110;
}
.mobile-menu-btn span {
display: block;
width: 28px;
height: 1px;
background: var(--cream);
transition: all 400ms var(--ease-luxury);
}
.mobile-menu-btn.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
background: var(--gold);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
background: var(--gold);
}
/* =====================================================
BUTTONS
===================================================== */
.btn-ghost {
position: relative;
display: inline-block;
padding: 1rem 3rem;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cream);
background: transparent;
border: 1px solid var(--gold);
cursor: pointer;
text-decoration: none;
overflow: hidden;
transition: all 600ms var(--ease-luxury);
}
.btn-ghost::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--gold);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 700ms var(--ease-luxury), height 700ms var(--ease-luxury);
z-index: -1;
}
.btn-ghost:hover {
color: var(--maroon-deepest);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.4), 0 0 60px rgba(212, 175, 55, 0.2);
}
.btn-ghost:hover::before {
width: 400px;
height: 400px;
}
.btn-gold {
display: inline-block;
padding: 1.1rem 3.5rem;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--maroon-deepest);
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-champagne) 100%);
border: none;
cursor: pointer;
text-decoration: none;
transition: all 500ms var(--ease-luxury);
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
background: linear-gradient(135deg, var(--gold-champagne) 0%, var(--gold) 100%);
}
.btn-text {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
padding: 0.5rem 0;
transition: all 400ms var(--ease-luxury);
}
.btn-text::after {
content: '→';
font-size: 1rem;
transition: transform 400ms var(--ease-luxury);
}
.btn-text:hover {
color: var(--gold-champagne);
}
.btn-text:hover::after {
transform: translateX(6px);
}
/* =====================================================
HERO SECTION
===================================================== */
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding: 8rem 1.5rem 4rem;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(107, 26, 38, 0.4) 0%, transparent 50%),
radial-gradient(ellipse at center, transparent 0%, var(--maroon-deepest) 90%);
z-index: 1;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
background-size: 80px 80px;
z-index: 1;
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1100px;
}
/* Ensure CTA and scroll indicator have clear separation */
.hero-content { padding-bottom: 5.5rem; }
.hero-content .btn-ghost { position: relative; z-index: 3; display: inline-block; margin-top: 2rem; }
.hero-scroll { bottom: 2.25rem; z-index: 4; }
.hero-eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 300;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 2.5rem;
display: inline-block;
position: relative;
padding: 0 3rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
position: absolute;
top: 50%;
width: 2rem;
height: 1px;
background: var(--gold);
opacity: 0.6;
}
.hero-eyebrow::before { left: 0; }
.hero-eyebrow::after { right: 0; }
.hero-title {
font-family: var(--font-serif);
font-size: clamp(3rem, 9vw, 7.5rem);
font-weight: 300;
line-height: 1.05;
color: var(--cream);
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.hero-title,
.hero-title *,
.hero-title span,
.hero-title-line,
.hero-title-line span,
.hero-title-line * {
font-family: var(--font-serif) !important;
font-style: normal;
font-weight: 300;
}
.hero-title em {
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-champagne) 50%, var(--gold-muted) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle,
.hero-about {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--cream);
line-height: 1.6;
letter-spacing: 0.005em;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.hero-subtitle {
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
opacity: 0.9;
margin-bottom: 1.5rem;
}
.hero-about {
font-size: clamp(1.0rem, 1.3vw, 1.2rem);
opacity: 0.75;
margin-bottom: 3rem;
font-family: var(--font-serif);
font-style: normal;
font-weight: 300;
}
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-sans);
font-size: 0.65rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--muted);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.hero-scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(180deg, transparent, var(--gold));
animation: scrollPulse 2.5s var(--ease-luxury) infinite;
}
@keyframes scrollPulse {
0%, 100% { transform: scaleY(0); transform-origin: top; opacity: 0; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
50.01% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
/* =====================================================
SECTIONS — Common
===================================================== */
.section {
padding: 8rem 0;
position: relative;
}
.section-sm { padding: 5rem 0; }
.section-lg { padding: 10rem 0; }
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}
.section-eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
display: block;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4.5vw, 3.75rem);
font-weight: 300;
line-height: 1.15;
color: var(--cream);
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
.hero-title em,
.section-title em,
.featured-card-title em,
.page-header h1 em,
blockquote em,
p em {
font-family: inherit;
font-style: italic;
}
.section-title em,
.featured-card-title em {
color: var(--gold);
}
.section-intro {
font-family: var(--font-serif);
font-size: 1.15rem;
font-style: italic;
color: var(--cream);
opacity: 0.8;
max-width: 640px;
line-height: 1.7;
}
.divider-gold {
width: 60px;
height: 1px;
background: var(--gold);
margin: 2rem 0;
opacity: 0.7;
}
.divider-gold-center {
margin-left: auto;
margin-right: auto;
}
/* =====================================================
PHILOSOPHY (2-column)
===================================================== */
.philosophy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.image-frame {
position: relative;
padding: 1rem;
border: 1px solid var(--gold);
opacity: 0.85;
}
.image-frame::before,
.image-frame::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
border: 1px solid var(--gold);
}
.image-frame::before {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
}
.image-frame::after {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
}
.image-frame-inner {
position: relative;
overflow: hidden;
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--maroon-light), var(--maroon-darker));
}
.image-frame-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.4s var(--ease-luxury);
filter: brightness(0.85) contrast(1.05);
}
.image-frame:hover .image-frame-inner img {
transform: scale(1.05);
}
.placeholder-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.7rem;
letter-spacing: 0.4em;
color: var(--gold);
opacity: 0.5;
background:
radial-gradient(circle at center, rgba(212, 175, 55, 0.08), transparent),
linear-gradient(135deg, var(--maroon-light), var(--maroon-darker));
}
.philosophy-body p {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.85;
color: var(--cream);
opacity: 0.9;
margin-bottom: 1.5rem;
}
.philosophy-body p:first-of-type::first-letter {
font-family: var(--font-serif);
font-size: 4rem;
float: left;
line-height: 0.9;
padding-right: 0.75rem;
padding-top: 0.4rem;
color: var(--gold);
font-style: italic;
}
/* =====================================================
FEATURED GRID (Asymmetric)
===================================================== */
.featured-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 320px);
gap: 1.5rem;
margin-top: 5rem;
}
.featured-card {
position: relative;
overflow: hidden;
cursor: pointer;
background: linear-gradient(135deg, var(--maroon-light), var(--maroon-dark));
}
.featured-card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.featured-card:nth-child(2) { grid-column: span 5; }
.featured-card:nth-child(3) { grid-column: span 3; }
.featured-card:nth-child(4) { grid-column: span 2; }
.featured-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 1.6s var(--ease-luxury);
opacity: 0.55;
}
.featured-card:nth-child(1) .featured-card-bg {
background: linear-gradient(135deg, #2B050B 0%, #5A121C 100%);
}
.featured-card:nth-child(2) .featured-card-bg {
background: linear-gradient(135deg, #4A0E17 0%, #6B1A26 100%);
}
.featured-card:nth-child(3) .featured-card-bg {
background: linear-gradient(135deg, #360A11 0%, #5A121C 100%);
}
.featured-card:nth-child(4) .featured-card-bg {
background: linear-gradient(135deg, #2B050B 0%, #4A0E17 100%);
}
.featured-card:hover .featured-card-bg {
transform: scale(1.08);
opacity: 0.75;
}
.featured-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(26, 3, 7, 0.95) 100%);
}
.featured-card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2.5rem;
transform: translateY(30px);
transition: transform 800ms var(--ease-luxury);
}
.featured-card:hover .featured-card-content {
transform: translateY(0);
}
.featured-card-tag {
font-family: var(--font-sans);
font-size: 0.65rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.75rem;
}
.featured-card-title {
font-family: var(--font-serif);
font-size: 1.75rem;
color: var(--cream);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.featured-card:nth-child(1) .featured-card-title { font-size: 2.5rem; }
.featured-card-desc {
font-family: var(--font-sans);
font-size: 0.85rem;
color: var(--cream);
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 700ms var(--ease-luxury);
line-height: 1.6;
}
.featured-card:hover .featured-card-desc {
opacity: 0.85;
max-height: 100px;
margin-top: 0.75rem;
}
/* =====================================================
EDITORIAL QUOTE
===================================================== */
.editorial-quote {
text-align: center;
padding: 8rem 2rem;
position: relative;
}
.quote-mark {
font-family: var(--font-serif);
font-size: 6rem;
color: var(--gold);
opacity: 0.3;
line-height: 1;
margin-bottom: 1rem;
}
.editorial-quote blockquote {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-style: italic;
font-weight: 300;
line-height: 1.5;
color: var(--cream);
max-width: 900px;
margin: 0 auto 2.5rem;
}
.editorial-quote-line {
width: 80px;
height: 1px;
background: var(--gold);
margin: 0 auto;
}
.editorial-quote-line + .editorial-quote-line {
margin-top: 8px;
width: 30px;
}
/* =====================================================
PAGE HEADER (sub-pages)
===================================================== */
.page-header {
position: relative;
padding: 12rem 0 6rem;
text-align: center;
overflow: hidden;
border-bottom: 1px solid rgba(212, 175, 55, 0.08);
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(212, 175, 55, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(212, 175, 55, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.4;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.page-header::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.06), transparent 70%);
z-index: 0;
}
.page-header-content {
position: relative;
z-index: 1;
}
.page-header h1 {
font-family: var(--font-serif);
font-size: clamp(2.75rem, 6vw, 5rem);
font-weight: 300;
font-style: italic;
color: var(--cream);
margin-top: 1.5rem;
line-height: 1.1;
}
.page-header-line {
width: 1px;
height: 60px;
background: linear-gradient(180deg, transparent, var(--gold));
margin: 2rem auto 0;
}
/* =====================================================
TIMELINE (About page)
===================================================== */
.timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 3rem 0;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
transform: translateX(-50%);
opacity: 0.5;
}
.timeline-item {
position: relative;
width: 50%;
padding: 2rem 3rem;
opacity: 0;
transform: translateY(30px);
transition: all 1000ms var(--ease-luxury);
}
.timeline-item.reveal {
opacity: 1;
transform: translateY(0);
}
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }
.timeline-dot {
position: absolute;
top: 2.5rem;
width: 10px;
height: 10px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--maroon-deepest), 0 0 0 5px var(--gold);
}
.timeline-item:nth-child(odd) .timeline-dot { right: -5px; }
.timeline-item:nth-child(even) .timeline-dot { left: -5px; }
.timeline-year {
font-family: var(--font-display);
font-size: 0.85rem;
letter-spacing: 0.3em;
color: var(--gold);
margin-bottom: 0.75rem;
}
.timeline-title {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--cream);
margin-bottom: 0.75rem;
font-style: italic;
}
.timeline-desc {
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--cream);
opacity: 0.8;
line-height: 1.7;
}
/* =====================================================
ARTISANS GRID
===================================================== */
.artisan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
margin-top: 5rem;
}
.artisan-card {
position: relative;
overflow: hidden;
cursor: pointer;
}
.artisan-image {
aspect-ratio: 3/4;
background-size: cover;
background-position: center;
filter: grayscale(100%) brightness(0.85);
transition: filter 1.2s var(--ease-luxury), transform 1.6s var(--ease-luxury);
}
.artisan-card:nth-child(1) .artisan-image {
background: linear-gradient(135deg, #2B050B, #4A0E17);
}
.artisan-card:nth-child(2) .artisan-image {
background: linear-gradient(135deg, #360A11, #5A121C);
}
.artisan-card:nth-child(3) .artisan-image {
background: linear-gradient(135deg, #2B050B, #6B1A26);
}
.artisan-card:nth-child(4) .artisan-image {
background: linear-gradient(135deg, #4A0E17, #2B050B);
}
.artisan-card:hover .artisan-image {
filter: grayscale(0%) sepia(20%) brightness(1);
transform: scale(1.04);
}
.artisan-info {
padding: 1.5rem 0;
text-align: center;
}
.artisan-name {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--cream);
margin-bottom: 0.25rem;
}
.artisan-role {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
}
/* =====================================================
COLLECTION (Filter + Product Cards)
===================================================== */
.filter-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
margin-bottom: 4rem;
}
.filter-btn {
background: none;
border: none;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
cursor: pointer;
padding: 0.5rem 0;
position: relative;
transition: color 500ms var(--ease-luxury);
}
.filter-btn::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: var(--gold);
transition: all 500ms var(--ease-luxury);
transform: translateX(-50%);
}
.filter-btn:hover,
.filter-btn.active {
color: var(--gold);
}
.filter-btn.active::after,
.filter-btn:hover::after {
width: 100%;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2.5rem;
}
.product-card {
position: relative;
background: linear-gradient(180deg, var(--maroon-light) 0%, var(--maroon-dark) 100%);
overflow: hidden;
transition: transform 700ms var(--ease-luxury);
cursor: pointer;
border: 1px solid rgba(212, 175, 55, 0.05);
}
.product-card:hover {
transform: translateY(-6px);
border-color: rgba(212, 175, 55, 0.2);
}
.product-image {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: linear-gradient(135deg, var(--maroon-lighter), var(--maroon-darker));
}
.product-image-inner {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 1.4s var(--ease-luxury);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 0.65rem;
letter-spacing: 0.4em;
color: var(--gold);
opacity: 0.4;
}
.product-card:hover .product-image-inner {
transform: scale(1.08);
}
.product-card:nth-child(1) .product-image-inner { background: linear-gradient(135deg, #5A121C, #2B050B); }
.product-card:nth-child(2) .product-image-inner { background: linear-gradient(135deg, #4A0E17, #1A0307); }
.product-card:nth-child(3) .product-image-inner { background: linear-gradient(135deg, #6B1A26, #360A11); }
.product-card:nth-child(4) .product-image-inner { background: linear-gradient(135deg, #360A11, #4A0E17); }
.product-card:nth-child(5) .product-image-inner { background: linear-gradient(135deg, #2B050B, #5A121C); }
.product-card:nth-child(6) .product-image-inner { background: linear-gradient(135deg, #5A121C, #360A11); }
.product-view {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translate(-50%, 20px);
opacity: 0;
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
padding: 0.75rem 2rem;
background: rgba(26, 3, 7, 0.9);
backdrop-filter: blur(8px);
border: 1px solid var(--gold);
transition: all 700ms var(--ease-luxury);
}
.product-card:hover .product-view {
opacity: 1;
transform: translate(-50%, 0);
}
.product-info {
padding: 1.75rem;
text-align: center;
}
.product-category {
font-family: var(--font-sans);
font-size: 0.65rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.5rem;
}
.product-name {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--cream);
margin-bottom: 0.5rem;
font-style: italic;
}
.product-price {
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--cream);
opacity: 0.85;
letter-spacing: 0.1em;
}
/* =====================================================
CONTACT (Split-screen)
===================================================== */
.contact-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 100px);
margin-top: 100px;
}
.contact-info {
padding: 6rem 5rem;
background:
linear-gradient(135deg, rgba(26, 3, 7, 0.6), rgba(43, 5, 11, 0.4)),
radial-gradient(circle at top left, var(--maroon-base), transparent);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.contact-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(212, 175, 55, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(212, 175, 55, 0.04) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.5;
}
/* =====================================================
LANGUAGE SWITCHER
===================================================== */
.lang-switcher-wrap { position: relative; display: inline-block; }
.lang-trigger {
display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
font-family: var(--font-sans); font-size: .85rem; font-weight: 600;
color: #ffffff;
padding: .55rem .9rem; border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
transition: background .2s ease, transform .2s ease;
}
.lang-trigger:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
.lang-trigger .flag { font-size: 1.05rem; line-height: 1; }
.lang-trigger .lang-code { letter-spacing: .12em; font-size: .78rem; color: #ffffff; }
.lang-trigger .lang-label {
letter-spacing: .04em; font-size: .82rem; color: #ffffff;
font-family: var(--font-sans); font-weight: 500;
max-width: 0; overflow: hidden; opacity: 0;
transition: max-width .25s ease, opacity .25s ease;
}
.lang-trigger .caret {
display: inline-block; width: 0; height: 0;
margin-left: .15rem;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid rgba(255,255,255,0.9);
transition: transform .2s ease;
}
.lang-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-trigger:hover .lang-label, .lang-trigger:focus .lang-label {
max-width: 120px; opacity: 1; margin-left: .15rem;
}
/* =====================================================
VISUAL ENHANCEMENTS - GLOWS & ANIMATIONS
===================================================== */
/* Enhanced Card Hover Effects */
.artisan-card {
transition: transform 300ms var(--ease-luxury), box-shadow 400ms var(--ease-luxury);
will-change: transform;
}
.artisan-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2),
0 0 30px rgba(212, 175, 55, 0.15);
}
.artisan-card:hover .artisan-image {
filter: grayscale(0%) sepia(15%) brightness(1.1);
}
/* Enhanced Featured Cards */
.featured-card {
transition: transform 300ms var(--ease-luxury), box-shadow 400ms var(--ease-luxury);
will-change: transform;
}
.featured-card:hover {
transform: translateY(-6px);
box-shadow: 0 30px 50px rgba(212, 175, 55, 0.25),
inset 0 1px 0 rgba(212, 175, 55, 0.2);
}
/* Timeline Dot Glow Effect - Optimized for Performance */
@keyframes timeline-dot-glow {
0%, 100% {
box-shadow: 0 0 0 4px var(--maroon-deepest), 0 0 0 5px var(--gold), 0 0 15px rgba(212, 175, 55, 0.3);
}
50% {
box-shadow: 0 0 0 4px var(--maroon-deepest), 0 0 0 5px var(--gold), 0 0 25px rgba(212, 175, 55, 0.6);
}
}
.timeline-dot {
will-change: box-shadow;
box-shadow: 0 0 0 4px var(--maroon-deepest), 0 0 0 5px var(--gold), 0 0 15px rgba(212, 175, 55, 0.3);
}
/* Only animate on hover to save battery */
.timeline-item:hover .timeline-dot {
animation: timeline-dot-glow 2s ease-in-out forwards;
}
/* Quote Section Glow & Enhancement - Optimized */
@keyframes quote-glow {
0%, 100% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
50% { text-shadow: 0 0 40px rgba(212, 175, 55, 0.4); }
}
.editorial-quote blockquote {
transition: all 500ms var(--ease-luxury);
will-change: text-shadow;
}
.editorial-quote:hover blockquote {
animation: quote-glow 2s ease-in-out forwards;
}
.quote-mark {
transition: all 500ms var(--ease-luxury);
text-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}
.editorial-quote:hover .quote-mark {
text-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
transform: scale(1.05);
}
/* Enhanced Button States */
.btn-ghost, .btn-text, .btn-primary {
transition: all 400ms var(--ease-luxury);
position: relative;
}
.btn-ghost:hover, .btn-text:hover, .btn-primary:hover {
transform: translateY(-2px);
letter-spacing: 0.08em;
}
.btn-ghost {
box-shadow: inset 0 0 0 1px var(--gold);
transition: all 400ms var(--ease-luxury);
}
.btn-ghost:hover {
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 0 1px var(--gold);
background: rgba(212, 175, 55, 0.08);
}
/* Section Title Enhancement */
.section-title {
transition: all 400ms var(--ease-luxury);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 40px;
height: 2px;
background: var(--gold);
opacity: 0;
transition: all 400ms var(--ease-luxury);
}
.section-title em {
transition: all 300ms var(--ease-luxury);
}
/* Page Reveal Animation on Scroll */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal {
animation: fade-in-up 800ms var(--ease-luxury) forwards;
opacity: 0;
}
.reveal.reveal-delay-1 { animation-delay: 100ms; }
.reveal.reveal-delay-2 { animation-delay: 200ms; }
.reveal.reveal-delay-3 { animation-delay: 300ms; }
.reveal.reveal-delay-4 { animation-delay: 400ms; }
.reveal.reveal-delay-5 { animation-delay: 500ms; }
/* Decorative Gold Line Under Section Intro */
.section-intro {
position: relative;
padding-bottom: 1.5rem;
}
.section-intro::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 1px;
background: linear-gradient(90deg, var(--gold), transparent);
}
/* Enhanced Link Hover */
a.nav-link {
position: relative;
transition: color 300ms var(--ease-luxury);
}
a.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width 400ms var(--ease-luxury);
}
a.nav-link:hover::after {
width: 100%;
}
/* Smooth Transitions for Interactive Elements */
.artisan-info {
transition: all 400ms var(--ease-luxury);
}
.artisan-card:hover .artisan-info {
transform: translateY(-4px);
}
.artisan-name {
transition: color 300ms var(--ease-luxury);
}
.artisan-card:hover .artisan-name {
color: var(--gold);
}
@media (min-width: 980px) {
.lang-trigger .lang-label { max-width: 120px; opacity: 1; margin-left: .15rem; }
}
@media (max-width: 720px) {
.lang-trigger .lang-label { display: none; }
}
.lang-switcher {
position: absolute; right: 0; top: calc(100% + .6rem);
background: #1c0709;
border: 1px solid rgba(212, 175, 55, 0.35);
padding: .55rem; border-radius: 8px;
display: none; min-width: 180px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
z-index: 9999;
}
.lang-switcher.open { display: block; }
.lang-switcher button {
display: block; width: 100%; text-align: left;
padding: .6rem .8rem; background: transparent; border: none;
color: #f3ede1;
font-family: var(--font-sans); font-size: .92rem; cursor: pointer;
border-radius: 6px;
transition: background .2s ease, color .2s ease;
}
.lang-switcher button:hover { background: rgba(212, 175, 55, 0.12); color: var(--gold); }
.lang-switcher button.active { color: var(--gold); font-weight: 600; }
/* =====================================================
PHOTO LIGHTBOX
===================================================== */
.lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10,6,6,0.8); z-index: 9999; }
.lightbox.open { display: flex; }
.lightbox .inner { max-width:90%; max-height:90%; border: 1px solid rgba(212,175,55,0.08); }
.lightbox img { max-width:100%; max-height:100%; display:block; }
.lightbox .close { position:absolute; top:2rem; right:2rem; background:var(--gold); color:var(--maroon-deepest); border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
/* =====================================================
VIDEO CARDS
===================================================== */
.video-card { position: relative; overflow:hidden; border-radius:8px; }
.video-card .thumb { aspect-ratio:16/9; background:var(--maroon-darker); display:flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--font-display); }
.video-card .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; background:rgba(212,175,55,0.95); color:var(--maroon-deepest); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer; box-shadow:0 8px 30px rgba(212,175,55,0.18); }
/* =====================================================
SOCIAL CARDS
===================================================== */
.social-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.social-card { background: linear-gradient(180deg, rgba(212,175,55,0.03), transparent); border:1px solid rgba(212,175,55,0.05); padding:1rem; border-radius:8px; display:flex; align-items:center; gap:1rem; }
.social-card .icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(212,175,55,0.08); color:var(--gold); }
.contact-info > * { position: relative; z-index: 1; }
.contact-eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
}
.contact-info h2 {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.5rem);
font-style: italic;
font-weight: 300;
color: var(--cream);
margin-bottom: 1rem;
line-height: 1.15;
}
.contact-info > p {
font-family: var(--font-serif);
font-size: 1.1rem;
font-style: italic;
color: var(--cream);
opacity: 0.8;
margin-bottom: 4rem;
max-width: 450px;
line-height: 1.7;
}
.contact-detail {
display: flex;
align-items: flex-start;
gap: 1.25rem;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}
.contact-detail:last-of-type { border-bottom: none; }
.contact-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
}
.contact-detail-text strong {
display: block;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.5rem;
}
.contact-detail-text span,
.contact-detail-text a {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--cream);
text-decoration: none;
font-style: italic;
transition: color 400ms var(--ease-luxury);
line-height: 1.6;
display: block;
}
.contact-detail-text a:hover { color: var(--gold); }
.contact-social {
display: flex;
gap: 1rem;
margin-top: 3rem;
}
.contact-social a {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
color: var(--gold);
text-decoration: none;
font-family: var(--font-serif);
font-size: 0.9rem;
letter-spacing: 0.05em;
transition: all 500ms var(--ease-luxury);
}
.contact-social a:hover {
background: var(--gold);
color: var(--maroon-deepest);
transform: translateY(-3px);
}
/* ---------- Contact Form ---------- */
.contact-form-wrap {
padding: 6rem 5rem;
background: linear-gradient(180deg, var(--maroon-deepest), var(--maroon-darker));
display: flex;
flex-direction: column;
justify-content: center;
}
.form-eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
}
.contact-form-wrap h2 {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.5rem);
font-style: italic;
font-weight: 300;
color: var(--cream);
margin-bottom: 0.75rem;
line-height: 1.15;
}
.contact-form-wrap > p {
font-family: var(--font-serif);
font-style: italic;
color: var(--cream);
opacity: 0.8;
margin-bottom: 3rem;
font-size: 1.05rem;
}
.form-group {
position: relative;
margin-bottom: 2.25rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
padding: 1rem 0 0.75rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 300;
color: var(--cream);
outline: none;
transition: border-color 500ms var(--ease-luxury);
}
.form-group textarea {
resize: none;
min-height: 100px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-bottom-color: var(--gold);
}
.form-group label {
position: absolute;
top: 1rem;
left: 0;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
pointer-events: none;
transition: all 400ms var(--ease-luxury);
}
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
top: -0.5rem;
font-size: 0.65rem;
color: var(--gold);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-submit {
margin-top: 1rem;
}
.form-submit .btn-gold {
width: 100%;
cursor: pointer;
}
/* =====================================================
FOOTER
===================================================== */
.footer {
background: var(--maroon-deepest);
padding: 5rem 0 2rem;
border-top: 1px solid rgba(212, 175, 55, 0.08);
position: relative;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 4rem;
margin-bottom: 4rem;
}
.footer-brand h3 {
font-family: var(--font-display);
font-size: 1.75rem;
letter-spacing: 0.35em;
color: var(--cream);
margin-bottom: 0.5rem;
}
.footer-brand .navbar-brand-sub {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.4em;
color: var(--gold);
margin-bottom: 1.5rem;
display: block;
}
.footer-brand p {
font-family: var(--font-serif);
font-style: italic;
color: var(--cream);
opacity: 0.7;
font-size: 0.95rem;
line-height: 1.7;
max-width: 320px;
}
.footer-col h4 {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 0.85rem;
}
.footer-col a {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--cream);
opacity: 0.75;
text-decoration: none;
transition: all 400ms var(--ease-luxury);
font-style: italic;
}
.footer-col a:hover {
opacity: 1;
color: var(--gold);
padding-left: 6px;
}
.footer-newsletter p {
font-family: var(--font-serif);
font-style: italic;
color: var(--cream);
opacity: 0.75;
font-size: 0.95rem;
margin-bottom: 1.25rem;
line-height: 1.6;
}
.newsletter-form {
display: flex;
border-bottom: 1px solid var(--gold);
}
.newsletter-form input {
flex: 1;
background: transparent;
border: none;
padding: 0.75rem 0;
font-family: var(--font-sans);
font-size: 0.85rem;
color: var(--cream);
outline: none;
}
.newsletter-form input::placeholder {
color: var(--muted);
letter-spacing: 0.1em;
}
.newsletter-form button {
background: transparent;
border: none;
color: var(--gold);
font-size: 1.2rem;
cursor: pointer;
padding: 0 0.5rem;
transition: transform 400ms var(--ease-luxury);
}
.newsletter-form button:hover {
transform: translateX(4px);
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(212, 175, 55, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
font-family: var(--font-sans);
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--muted);
margin: 0;
}
.footer-bottom-links {
display: flex;
gap: 2rem;
}
.footer-bottom-links a {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 400ms var(--ease-luxury);
}
.footer-bottom-links a:hover {
color: var(--gold);
}
/* =====================================================
ANIMATIONS — Reveal on Scroll
===================================================== */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 1200ms var(--ease-luxury), transform 1200ms var(--ease-luxury);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 150ms; }
.reveal-delay-2 { transition-delay: 300ms; }
.reveal-delay-3 { transition-delay: 450ms; }
.reveal-delay-4 { transition-delay: 600ms; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* =====================================================
CREATIVE ADDITIONS — Cavin Premium Touches
===================================================== */
/* ---------- 1. LUXURY PRELOADER ---------- */
.cavin-preloader {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--maroon-deepest);
background-image:
radial-gradient(ellipse at center, var(--maroon-darker) 0%, var(--maroon-deepest) 70%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 800ms var(--ease-luxury), visibility 800ms var(--ease-luxury);
}
.cavin-preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.preloader-logo {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 500;
letter-spacing: 0.5em;
color: var(--cream);
margin-bottom: 2rem;
position: relative;
animation: preloaderFade 1.4s var(--ease-luxury) infinite alternate;
}
.preloader-logo::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: var(--gold);
}
.preloader-ring {
position: relative;
width: 60px;
height: 60px;
margin-top: 1.5rem;
}
.preloader-ring::before,
.preloader-ring::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid transparent;
border-top-color: var(--gold);
border-radius: 50%;
animation: preloaderSpin 1.4s linear infinite;
}
.preloader-ring::after {
inset: 8px;
border-top-color: var(--gold-champagne);
animation-duration: 1.8s;
animation-direction: reverse;
}
.preloader-text {
margin-top: 2rem;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 300;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.6;
}
@keyframes preloaderFade {
from { opacity: 0.6; letter-spacing: 0.45em; }
to { opacity: 1; letter-spacing: 0.55em; }
}
@keyframes preloaderSpin {
to { transform: rotate(360deg); }
}
body:not(.loaded) { overflow: hidden; }
/* ---------- 2. CUSTOM GOLD CURSOR ---------- */
.cavin-cursor,
.cavin-cursor-dot {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9998;
will-change: transform;
mix-blend-mode: difference;
}
.cavin-cursor {
width: 36px;
height: 36px;
border: 1px solid var(--gold);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 350ms var(--ease-luxury), height 350ms var(--ease-luxury), border-color 350ms var(--ease-luxury), background 350ms var(--ease-luxury), opacity 300ms var(--ease-luxury);
opacity: 0;
mix-blend-mode: normal;
}
.cavin-cursor-dot {
width: 5px;
height: 5px;
background: var(--gold);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
transition: opacity 200ms var(--ease-luxury);
}
body.cursor-active .cavin-cursor { opacity: 0.7; }
body.cursor-active .cavin-cursor-dot { opacity: 1; }
.cavin-cursor.hover {
width: 60px;
height: 60px;
background: rgba(212, 175, 55, 0.08);
border-color: var(--gold-champagne);
}
@media (max-width: 1024px) {
.cavin-cursor, .cavin-cursor-dot { display: none; }
}
/* ---------- 3. MARQUEE TICKER ---------- */
.cavin-marquee {
position: relative;
padding: 3rem 0;
overflow: hidden;
border-top: 1px solid rgba(212, 175, 55, 0.08);
border-bottom: 1px solid rgba(212, 175, 55, 0.08);
background: linear-gradient(90deg, var(--maroon-deepest), var(--maroon-darker), var(--maroon-deepest));
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
display: flex;
width: max-content;
animation: marqueeScroll 40s linear infinite;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 3rem;
padding: 0 3rem;
font-family: var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-style: italic;
font-weight: 300;
color: var(--cream);
white-space: nowrap;
}
.marquee-item .dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
.marquee-item em {
font-style: italic;
color: var(--gold);
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.cavin-marquee:hover .marquee-track { animation-play-state: paused; }
/* ---------- 4. MAGNETIC BUTTONS ---------- */
.btn-ghost, .btn-gold, .btn-text, .nav-link {
transition: transform 400ms var(--ease-luxury);
}
/* ---------- 5. GOLD SHIMMER ON TEXT ---------- */
.shimmer {
position: relative;
display: inline-block;
background: linear-gradient(
90deg,
var(--gold) 0%,
var(--gold-champagne) 25%,
var(--offwhite) 50%,
var(--gold-champagne) 75%,
var(--gold) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
/* ---------- 6. REVEAL DIRECTIONS ---------- */
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.92); }
.reveal.revealed.reveal-left,
.reveal.revealed.reveal-right { transform: translateX(0); }
.reveal.revealed.reveal-scale { transform: scale(1); }
/* ---------- 7. PARALLAX IMAGE FRAME (premium tilt) ---------- */
.image-frame {
transform-style: preserve-3d;
transition: transform 1200ms var(--ease-luxury);
}
/* ---------- 8. GLOWING ORB ACCENT (decorative) ---------- */
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.glow-orb.gold {
background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
}
.glow-orb.maroon {
background: radial-gradient(circle, var(--maroon-lighter) 0%, transparent 70%);
}
/* ---------- 9. DIVIDER WITH CENTER ORNAMENT ---------- */
.divider-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 4rem auto;
max-width: 400px;
}
.divider-ornament::before,
.divider-ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider-ornament .ornament {
color: var(--gold);
font-size: 1.2rem;
letter-spacing: 0.5em;
opacity: 0.8;
}
/* ---------- 10. GALLERY LIGHTBOX (image hover lift) ---------- */
.image-frame:hover { transform: translateY(-4px); }
/* ---------- 11. NAVBAR LANG SWITCHER — elevated ---------- */
.lang-switcher-wrap { z-index: 200; }
/* ---------- 12. SECTION EYEBROW ANIMATED LINE ---------- */
.section-eyebrow {
position: relative;
display: inline-block;
}
.section-eyebrow::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 30px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 800ms var(--ease-luxury);
transition-delay: 200ms;
}
.reveal.revealed .section-eyebrow::after,
.section-eyebrow.revealed::after { transform: scaleX(1); }
/* Center-aligned eyebrows */
[style*="text-align: center"] .section-eyebrow::after,
[style*="text-align:center"] .section-eyebrow::after {
left: 50%;
transform: translateX(-50%) scaleX(0);
}
.reveal.revealed[style*="text-align: center"] .section-eyebrow::after,
.reveal.revealed[style*="text-align:center"] .section-eyebrow::after {
transform: translateX(-50%) scaleX(1);
}
/* ---------- 13. KEN BURNS — subtle image zoom animation ---------- */
@keyframes kenBurns {
0% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.08) translate(-1%, -1%); }
100% { transform: scale(1) translate(0, 0); }
}
.placeholder-image.ken-burns {
animation: kenBurns 16s var(--ease-luxury) infinite;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 1024px) {
.container { padding: 0 1.5rem; }
.philosophy-grid { gap: 4rem; }
.contact-info, .contact-form-wrap { padding: 5rem 3rem; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
.featured-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 280px);
}
.featured-card:nth-child(1) { grid-column: span 6; grid-row: span 1; }
.featured-card:nth-child(2) { grid-column: span 3; }
.featured-card:nth-child(3) { grid-column: span 3; }
.featured-card:nth-child(4) { grid-column: span 6; }
}
@media (max-width: 768px) {
.section { padding: 5rem 0; }
.hero { padding: 7rem 1.5rem 4rem; min-height: 90vh; }
.mobile-menu-btn { display: flex; }
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 75%;
max-width: 360px;
height: 100vh;
background: var(--maroon-deepest);
backdrop-filter: blur(30px);
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 6rem 3rem;
transition: right 700ms var(--ease-luxury);
border-left: 1px solid rgba(212, 175, 55, 0.1);
}
.nav-menu.active { right: 0; }
.nav-menu .nav-link {
font-size: 1rem;
margin-bottom: 1.5rem;
width: 100%;
}
.philosophy-grid { grid-template-columns: 1fr; gap: 3rem; }
.contact-split { grid-template-columns: 1fr; margin-top: 80px; }
.contact-info, .contact-form-wrap { padding: 4rem 2rem; min-height: auto; }
.form-row { grid-template-columns: 1fr; gap: 0; }
.timeline::before { left: 1rem; }
.timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding: 1.5rem 1.5rem 1.5rem 3rem; }
.timeline-item .timeline-dot { left: 0.5rem !important; right: auto !important; }
.featured-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.featured-card { grid-column: span 1 !important; min-height: 320px; }
.footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
.hero-title { font-size: 2.75rem; }
.hero-eyebrow { padding: 0 1.5rem; font-size: 0.6rem; letter-spacing: 0.3em; }
.hero-eyebrow::before, .hero-eyebrow::after { width: 1rem; }
.btn-ghost, .btn-gold { padding: 0.9rem 2rem; font-size: 0.7rem; }
.product-grid { grid-template-columns: 1fr; }
.filter-nav { gap: 1.25rem; }
}
/* =====================================================
FHD & RESPONSIVE OPTIMIZATIONS
===================================================== */
/* Base image rendering for high-DPI displays */
img, video, .placeholder-image, .artisan-image, .featured-card-bg {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
/* Ensure all images scale properly on all devices */
img {
max-width: 100%;
height: auto;
display: block;
}
/* FHD Desktop (1920x1080) - Optimal spacing */
@media (min-width: 1920px) {
.container {
max-width: 1600px;
padding: 0 3rem;
}
.hero {
padding: 10rem 2rem 5rem;
}
.section {
padding: 10rem 0;
}
.hero-content {
max-width: 1280px;
}
.hero-title {
font-size: clamp(3.5rem, 5vw, 5.5rem);
}
.hero-subtitle {
font-size: 1.3rem;
}
.hero-about {
font-size: 1.1rem;
}
.section-title {
font-size: clamp(2.75rem, 4vw, 4.5rem);
}
}
/* 2K/4K displays - Premium content density */
@media (min-width: 2560px) {
.container {
max-width: 2000px;
padding: 0 4rem;
}
.hero-title {
font-size: clamp(4rem, 4vw, 6rem);
}
.section-title {
font-size: clamp(3rem, 3.5vw, 5.5rem);
}
}
/* Laptop FHD (1366x768 - most common) */
@media (min-width: 1366px) and (max-width: 1919px) {
.container {
max-width: 1280px;
}
}
/* Standard Desktop (1280-1365) */
@media (min-width: 1280px) and (max-width: 1365px) {
.container {
max-width: 1200px;
padding: 0 2rem;
}
}
/* Tablet landscape to small desktop (1024-1279) */
@media (min-width: 1024px) and (max-width: 1279px) {
.container {
max-width: 100%;
padding: 0 2.5rem;
}
}
/* Tablet portrait (768-1023) */
@media (min-width: 768px) and (max-width: 1023px) {
.container {
max-width: 100%;
padding: 0 1.5rem;
}
}
/* Mobile Large (414-767) - iPhone Plus/Pro Max */
@media (min-width: 414px) and (max-width: 767px) {
.container {
padding: 0 1.5rem;
}
}
/* Mobile Standard (375-413) - iPhone X/11/12/13/14 */
@media (min-width: 375px) and (max-width: 413px) {
.container {
padding: 0 1.25rem;
}
}
/* Mobile Small (320-374) - iPhone SE */
@media (max-width: 374px) {
.container {
padding: 0 1rem;
}
}
/* High-DPI mobile optimization (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
}
/* Landscape orientation on mobile */
@media (max-width: 900px) and (orientation: landscape) {
.hero {
min-height: 100vh;
padding: 5rem 1.5rem 2rem;
}
.section {
padding: 4rem 0;
}
}
/* =====================================================
PERFORMANCE OPTIMIZATIONS
===================================================== */
/* Support for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal, .timeline-item { opacity: 1 !important; transform: none !important; }
.hero { background-attachment: scroll !important; }
}
/* Optimize animations on low-end devices (reduce motion) */
@media (max-width: 768px) {
/* Reduce animation intensity on mobile */
.reveal { animation-duration: 600ms; }
.reveal-delay-1 { animation-delay: 0ms; }
.reveal-delay-2 { animation-delay: 0ms; }
.reveal-delay-3 { animation-delay: 0ms; }
.reveal-delay-4 { animation-delay: 0ms; }
.reveal-delay-5 { animation-delay: 0ms; }
/* Disable box-shadows on mobile for better performance */
.artisan-card:hover { box-shadow: none; }
.featured-card:hover { box-shadow: 0 15px 30px rgba(212, 175, 55, 0.15); }
/* Reduce parallax on mobile */
.hero { background-attachment: scroll; }
/* Simplify transitions on mobile */
* { transition-duration: 200ms !important; }
}
/* Battery saver: Disable animations on very slow connections or old devices */
@media (prefers-color-scheme: light) {
/* Light mode users typically have older devices */
.timeline-dot { animation: none; }
}
/* GPU acceleration for smooth animations */
.hero-title,
.hero-subtitle,
.section-title,
.featured-card-bg,
.artisan-image,
.timeline-dot,
.editorial-quote blockquote {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* =====================================================
PHOTO CARDS — Real ![]()
rendering
===================================================== */
.product-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.4s var(--ease-luxury), filter 800ms var(--ease-luxury);
filter: brightness(0.92) contrast(1.04) saturate(0.95);
background: var(--maroon-darker);
}
.product-card:hover .product-image img {
transform: scale(1.08);
filter: brightness(1) contrast(1.06) saturate(1);
}
/* Hide the legacy placeholder div once an ![]()
is present */
.product-image:has(img) .product-image-inner { display: none; }
/* =====================================================
VIDEO CARDS — Real ![]()
poster + iframe swap
===================================================== */
.video-card .thumb {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: linear-gradient(135deg, var(--maroon-darker), var(--maroon-base));
}
.video-card .thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.4s var(--ease-luxury), filter 800ms var(--ease-luxury);
filter: brightness(0.92) saturate(0.95);
}
.video-card:hover .thumb img {
transform: scale(1.06);
filter: brightness(1) saturate(1);
}
.video-card .play {
width: 72px;
height: 72px;
transition: transform 400ms var(--ease-luxury), box-shadow 400ms var(--ease-luxury);
}
.video-card:hover .play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 10px 40px rgba(212, 175, 55, 0.45);
}
.play-triangle {
display: inline-block;
width: 0; height: 0;
border-left: 18px solid var(--maroon-deepest);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
margin-left: 4px; /* optical centering */
}
/* The iframe slot — absolute-fill the card */
.video-card .video-frame {
position: absolute;
inset: 0;
display: none;
z-index: 3;
background: #000;
}
.video-card .video-frame iframe,
.video-card .video-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-card.is-playing .thumb,
.video-card.is-playing .play { display: none; }
.video-card.is-playing .video-frame { display: block; }
/* =====================================================
PHOTO LIGHTBOX
===================================================== */
.photo-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 2, 5, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transition: opacity 500ms var(--ease-luxury), visibility 500ms var(--ease-luxury);
padding: 4rem 5rem;
}
.photo-lightbox.open {
opacity: 1;
visibility: visible;
}
.lightbox-figure {
max-width: 1100px;
max-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.lightbox-figure img {
max-width: 100%;
max-height: 78vh;
object-fit: contain;
border: 1px solid rgba(212, 175, 55, 0.35);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
0 0 0 8px rgba(212, 175, 55, 0.05);
background: var(--maroon-deepest);
transform: scale(0.96);
transition: transform 600ms var(--ease-luxury);
}
.photo-lightbox.open .lightbox-figure img {
transform: scale(1);
}
.lightbox-figure figcaption {
text-align: center;
max-width: 600px;
}
.lightbox-category {
font-family: var(--font-sans);
font-size: 0.65rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
}
.lightbox-title {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: var(--cream);
font-size: 1.5rem;
margin: 0.5rem 0 0;
}
.lightbox-close,
.lightbox-nav {
position: absolute;
background: transparent;
border: 1px solid rgba(212, 175, 55, 0.3);
color: var(--gold);
cursor: pointer;
font-family: var(--font-serif);
transition: all 400ms var(--ease-luxury);
z-index: 10001;
}
.lightbox-close {
top: 1.75rem; right: 1.75rem;
width: 48px; height: 48px;
font-size: 1.5rem;
line-height: 1;
border-radius: 50%;
}
.lightbox-nav {
top: 50%;
transform: translateY(-50%);
width: 56px; height: 56px;
font-size: 1.25rem;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.lightbox-prev { left: 1.75rem; }
.lightbox-next { right: 1.75rem; }
.lightbox-close:hover,
.lightbox-nav:hover {
background: rgba(212, 175, 55, 0.12);
border-color: var(--gold);
color: var(--gold-champagne);
}
body.no-scroll { overflow: hidden; }
@media (max-width: 768px) {
.photo-lightbox { padding: 5rem 1.25rem 1.5rem; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-close { top: 0.75rem; right: 0.75rem; }
}