html {
overflow-x: hidden;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0b0b0b;
font-family: Inter, sans-serif;
color: white;
overflow-x: hidden;
}
/* Background Glow */
body:before {
content: '';
position: fixed;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
background: radial-gradient(circle,
rgba(139, 16, 24, .20),
transparent 70%);
filter: blur(40px);
pointer-events: none;
}
/* NAVBAR */
nav {
position: fixed;
top: 22px;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 75px;
padding: 0 35px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(15, 15, 15, .82);
backdrop-filter: blur(22px);
border: 1px solid rgba(212, 175, 55, .10);
border-radius: 60px;
z-index: 999;
transition: all .45s ease;
}
nav.scrolled {
height: 62px;
background: rgba(8, 8, 8, .92);
border: 1px solid rgba(212, 175, 55, .28);
box-shadow:
0 12px 40px rgba(0, 0, 0, .35);
}
.logo {
font-family: "Cormorant Garamond", serif;
font-size: 38px;
font-weight: 700;
letter-spacing: .5px;
}
.menu {
display: flex;
gap: 38px;
align-items: center;
}
.menu a {
text-decoration: none;
color: #bcbcbc;
font-size: 14px;
letter-spacing: 2px;
transition: .3s;
font-weight: 600;
}
.menu a:hover {
color: #d4af37;
}
.whatsapp-btn {
text-decoration: none;
padding: 14px 28px;
border-radius: 40px;
background: #681111;
color: white;
font-size: 14px;
letter-spacing: 2px;
font-weight: 600;
transition: .35s;
border: 1px solid rgba(255, 255, 255, .12);
}
.whatsapp-btn:hover {
background: #8d1a1a;
transform: translateY(-2px);
}
.menu-toggle {
display: none;
font-size: 30px;
cursor: pointer;
color: #fff;
transition: .3s;
}
.menu-toggle:hover {
color: #d4af37;
}
/* HERO */
.hero {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 120px 40px 80px;
}
.hero-content {
max-width: 900px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-label {
display: inline-block;
letter-spacing: 5px;
font-size: 12px;
text-transform: uppercase;
opacity: .7;
margin-top: 30px;
}
.hero h1 {
font-size: clamp(48px, 7vw, 82px);
line-height: 1.05;
margin: 25px 0;
}
.hero p {
max-width: 700px;
margin: 0 auto;
font-size: 18px;
line-height: 1.8;
opacity: .8;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 45px;
flex-wrap: wrap;
}
.primary-btn {
padding: 16px 32px;
border: 1px solid white;
text-decoration: none;
color: white;
transition: .35s;
}
.primary-btn:hover {
background: white;
color: black;
}
.secondary-btn {
padding: 16px 32px;
border: 1px solid rgba(255, 255, 255, .25);
text-decoration: none;
color: white;
}
.circle {
width: 360px;
height: 360px;
border-radius: 50%;
background: linear-gradient(145deg, #f8ece7, #f3ddd5);
border: 2px solid #c59b47;
display: flex;
justify-content: center;
align-items: center;
box-shadow:
0 0 60px rgba(190, 90, 90, .15),
0 0 120px rgba(120, 20, 20, .20);
overflow: hidden;
transition: .5s;
}
.circle:hover {
transform: scale(1.03);
}
.circle img {
display: block;
margin: auto;
width: 78%;
object-fit: contain;
}
.tagline {
margin-top: 35px;
letter-spacing: 4px;
font-size: 18px;
color: #8e8686;
font-weight: 600;
}
.divider {
margin-top: 20px;
font-size: 26px;
color: #9b7a2d;
letter-spacing: 16px;
}
/* Responsive */
@media(max-width:900px) {
.menu {
display: none;
}
.logo {
font-size: 28px;
}
.circle {
width: 360px;
height: 360px;
margin: 0 auto;
flex-shrink: 0;
border-radius: 50%;
}
.tagline {
font-size: 14px;
padding: 0 20px;
text-align: center;
}
}
/* ===========================
SHOWCASE SECTION
=========================== */
.showcase {
position: relative;
background: #0b0b0b;
padding: 80px 0 120px;
display: flex;
justify-content: center;
overflow: hidden;
}
.showcase img {
width: 95%;
max-width: 1700px;
display: block;
border-radius: 18px;
opacity: 0;
transform: translateY(120px) scale(1.05);
filter: blur(8px);
transition:
opacity 1.4s ease,
transform 1.4s ease,
filter 1.4s ease;
box-shadow:
0 30px 100px rgba(0, 0, 0, .5);
}
/* Top Fade */
.showcase::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 220px;
background: linear-gradient(to bottom, #0b0b0b, transparent);
pointer-events: none;
z-index: 5;
}
/* Bottom Fade */
.showcase::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 220px;
background: linear-gradient(to top, #0b0b0b, transparent);
pointer-events: none;
z-index: 5;
}
/* =====================================================
COLLECTIONS SECTION
===================================================== */
.collections-section {
position: relative;
padding: 180px 7%;
background: #0b0b0b;
overflow: hidden;
}
/* Huge Background Text */
.bg-text {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
user-select: none;
opacity: .04;
z-index: 0;
}
.bg-text span {
font-family: "Cormorant Garamond", serif;
font-size: 105px;
font-weight: 700;
letter-spacing: 3px;
line-height: .9;
white-space: nowrap;
color: white;
}
/* Header */
.collections-header {
position: relative;
z-index: 2;
text-align: center;
max-width: 760px;
margin: 0 auto 80px;
}
.small-title {
color: #b89b44;
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.collections-header h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(36px, 5vw, 60px);
font-weight: 700;
line-height: 1.05;
margin-bottom: 22px;
color: #f4f0eb;
}
.subtitle {
max-width: 520px;
margin: auto;
font-size: 16px;
line-height: 1.8;
color: #8e8e8e;
}
/* Grid */
.collections-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
/* ===================================
COLLECTION CARD
=================================== */
.collection-card {
width: 100%;
background: #111111;
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 24px;
padding: 16px;
transition: .45s ease;
cursor: pointer;
overflow: hidden;
position: relative;
opacity: 0;
transform: translateY(80px);
display: block;
text-decoration: none;
color: inherit;
}
.collection-card:hover {
transform: translateY(-14px);
border-color: rgba(212, 175, 55, .45);
box-shadow:
0 25px 70px rgba(0, 0, 0, .45),
0 0 45px rgba(212, 175, 55, .08);
}
/* ======================================
CARD SCROLL ANIMATION
====================================== */
.collection-card {
opacity: 0;
transform: translateY(80px);
transition:
opacity .8s ease,
transform .8s ease,
box-shadow .4s ease,
border-color .4s ease;
}
.collection-card.show {
opacity: 1;
transform: translateY(0);
}
/* Delay for each card */
.collection-card:nth-child(1) {
transition-delay: .10s;
}
.collection-card:nth-child(2) {
transition-delay: .20s;
}
.collection-card:nth-child(3) {
transition-delay: .30s;
}
.collection-card:nth-child(4) {
transition-delay: .40s;
}
.collection-card:nth-child(5) {
transition-delay: .50s;
}
.collection-card:nth-child(6) {
transition-delay: .60s;
}
/* IMAGE */
.image-box {
height: 260px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: #181818;
border-radius: 22px;
}
.image-box img {
width: 100%;
height: 100%;
object-fit: contain;
transition:
transform .6s ease,
filter .6s ease;
}
.collection-card:hover .image-box img {
transform: scale(1.08);
filter: brightness(1.06);
}
/* CATEGORY */
.category {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: #b89b44;
text-transform: uppercase;
margin-bottom: 10px;
}
/* TITLE */
.collection-card h3 {
font-family: "Cormorant Garamond", serif;
font-size: 34px;
font-weight: 700;
color: #f5f2ec;
transition: .35s;
margin-bottom: 14px;
color: #f7edd6;
}
/* DESCRIPTION */
.description {
font-size: 15px;
line-height: 1.7;
color: #888;
}
/* ======================================
WHATSAPP BUTTON
====================================== */
.collections-button {
display: flex;
justify-content: center;
margin-top: 70px;
}
.collections-button a {
padding: 14px 34px;
border-radius: 50px;
background: #6b1116;
border: 1px solid rgba(255, 255, 255, .08);
color: white;
text-decoration: none;
font-size: 13px;
letter-spacing: 2px;
font-weight: 700;
transition: .4s;
text-transform: uppercase;
}
.collections-button a:hover {
transform: translateY(-4px);
background: #8d1b22;
box-shadow:
0 15px 35px rgba(107, 17, 22, .45);
}
/* ======================================================
FEATURED PRODUCTS
====================================================== */
.featured-products {
width: 88%;
max-width: 1500px;
margin: 140px auto;
display: flex;
flex-direction: column;
gap: 35px;
}
/* BIG BLOCK */
.feature {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
padding: 38px;
border-radius: 28px;
overflow: hidden;
align-items: center;
position: relative;
transition: .45s;
}
.feature:hover {
transform: translateY(-8px);
}
/* DARK */
.feature.dark {
background: #111111;
border: 1px solid rgba(255, 255, 255, .06);
}
/* LIGHT */
.feature.light {
background: #efe8df;
color: #111;
}
/* Reverse Layout */
.feature.reverse {
grid-template-columns: 1fr 1.1fr;
}
/* TEXT */
.feature-text {
padding: 10px;
}
.feature-tag {
display: block;
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
color: #b89b44;
margin-bottom: 18px;
}
.feature-text h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(36px, 5vw, 60px);
line-height: 1.05;
font-weight: 700;
margin-bottom: 24px;
}
.feature.light h2 {
color: #111;
}
.feature.dark h2 {
color: white;
}
.feature-text p {
font-size: 17px;
line-height: 1.9;
max-width: 520px;
opacity: .78;
}
/* BUTTON */
.feature-text a {
display: inline-block;
margin-top: 28px;
padding: 14px 30px;
background: #7d1218;
color: white;
text-decoration: none;
border-radius: 40px;
font-size: 13px;
letter-spacing: 2px;
font-weight: 700;
transition: .35s;
}
.feature-text a:hover {
transform: translateY(-3px);
background: #981920;
}
/* ======================================================
FEATURE IMAGE
====================================================== */
.feature-image {
height: 520px;
border-radius: 24px;
background: linear-gradient(145deg,
#202020,
#131313);
border: 1px solid rgba(255, 255, 255, .05);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: .45s;
}
.feature.light .feature-image {
background: linear-gradient(145deg,
#faf7f2,
#ece3d8);
border: 1px solid rgba(0, 0, 0, .08);
}
.feature-image:hover {
transform: scale(1.02);
}
/* Decorative glow */
.feature-image::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(184, 155, 68, .12),
transparent 70%);
filter: blur(25px);
}
/* Placeholder */
.feature-image::after {
position: absolute;
font-size: 15px;
letter-spacing: 4px;
font-weight: 700;
color: rgba(255, 255, 255, .28);
}
.feature.light .feature-image::after {
color: rgba(0, 0, 0, .22);
}
/* ======================================================
MINI CARDS
====================================================== */
.feature-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.mini-card {
background: #151212;
border: 1px solid rgba(255, 255, 255, .05);
border-radius: 28px;
padding: 42px;
min-height: 320px;
position: relative;
overflow: hidden;
transition: .45s;
}
.mini-card:hover {
transform: translateY(-10px);
border-color: rgba(184, 155, 68, .25);
box-shadow:
0 18px 50px rgba(0, 0, 0, .35),
0 0 35px rgba(184, 155, 68, .08);
}
.mini-card h2 {
font-family: "Cormorant Garamond", serif;
font-size: 48px;
line-height: 1.05;
margin-bottom: 28px;
color: white;
position: relative;
z-index: 5;
max-width: 58%;
}
.mini-card p {
font-size: 16px;
line-height: 1.8;
color: #8c8c8c;
position: relative;
z-index: 5;
max-width: 58%;
max-width: 420px;
}
/* Soft glow */
.mini-card::before {
content: "";
position: absolute;
width: 380px;
height: 380px;
right: -150px;
bottom: -150px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(125, 18, 24, .12),
transparent 70%);
}
/* MINI CARD IMAGE */
.mini-image {
position: absolute;
right: 20px;
bottom: 0;
width: 42%;
height: 85%;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.mini-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 25px 40px rgba(0, 0, 0, .35));
transition: .45s ease;
}
.mini-card:hover .mini-image img {
transform: scale(1.06);
}
/* =====================================================
COMMISSION SECTION
===================================================== */
.commission {
width: 88%;
max-width: 1500px;
margin: 140px auto 90px;
}
.commission-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 45px;
background: #f3ede5;
border-radius: 34px;
align-items: center;
}
/* LEFT */
.commission-left {
display: flex;
justify-content: center;
align-items: center;
}
.logo-box {
width: 420px;
height: 320px;
background: #171313;
border-radius: 28px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
/* Spotlight */
.logo-box::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(125, 18, 24, .28),
transparent 70%);
filter: blur(35px);
}
/* Logo */
.logo-box img {
width: 170px;
position: relative;
z-index: 2;
animation: logoFloat 5s ease-in-out infinite;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35));
}
/* Floating */
@keyframes logoFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/* RIGHT */
.commission-right {
color: #111;
}
.commission-tag {
font-size: 12px;
letter-spacing: 3px;
font-weight: 700;
color: #8f6d3d;
margin-bottom: 18px;
}
.commission-right h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(38px, 5vw, 62px);
line-height: 1.05;
margin-bottom: 28px;
}
.commission-text {
font-size: 18px;
line-height: 1.9;
max-width: 520px;
color: #555;
}
.commission-btn {
display: inline-block;
margin-top: 35px;
padding: 16px 34px;
border-radius: 40px;
background: #7d1218;
color: white;
text-decoration: none;
letter-spacing: 2px;
font-size: 13px;
font-weight: 700;
transition: .35s;
}
.commission-btn:hover {
transform: translateY(-3px);
background: #981920;
}
/* ===========================
REVIEWS
=========================== */
.reviews {
width: 88%;
max-width: 1500px;
margin: 140px auto;
text-align: center;
}
.section-mini {
font-size: 12px;
letter-spacing: 3px;
color: #b89b44;
font-weight: 700;
margin-bottom: 15px;
}
.reviews h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(38px, 5vw, 64px);
margin-bottom: 60px;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.review-card {
background: #171313;
padding: 45px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, .05);
transition: .4s;
}
.review-card:hover {
transform: translateY(-10px);
}
.review-card p {
margin: 25px 0;
color: #bdbdbd;
line-height: 1.8;
}
.review-card h4 {
color: #b89b44;
}
footer {
margin-top: 140px;
padding: 80px 0;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, .05);
}
footer h2 {
font-family: "Cormorant Garamond", serif;
font-size: 52px;
margin-bottom: 20px;
}
footer p {
color: #888;
margin-bottom: 40px;
}
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
row-gap: 16px;
column-gap: 40px;
margin-bottom: 40px;
}
.footer-links a {
color: white;
text-decoration: none;
transition: .3s;
}
.footer-links a:hover {
color: #b89b44;
}
footer small {
color: #666;
}
/* =====================================================
LOOKBOOK
===================================================== */
.lookbook {
width: 88%;
max-width: 1500px;
margin: 160px auto;
text-align: center;
}
.lookbook h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(40px, 6vw, 72px);
margin: 20px 0;
}
.lookbook-sub {
max-width: 620px;
margin: 0 auto 70px;
color: #888;
font-size: 18px;
line-height: 1.8;
}
.lookbook-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.lookbook-grid img {
width: 100%;
height: 420px;
object-fit: contain;
border-radius: 24px;
transition: .45s;
cursor: pointer;
box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
}
.lookbook-grid img:hover {
transform: translateY(-12px) scale(1.02);
}
.lookbook-btn {
display: inline-block;
margin-top: 60px;
padding: 18px 38px;
background: #7d1218;
color: white;
border-radius: 40px;
text-decoration: none;
letter-spacing: 2px;
font-size: 13px;
font-weight: 700;
transition: .35s;
}
.lookbook-btn:hover {
background: #981920;
transform: translateY(-4px);
}
/* ==========================================
HOW IT WORKS
========================================== */
.process {
width: 88%;
max-width: 1500px;
margin: 140px auto;
text-align: center;
}
.process-tag {
font-size: 12px;
letter-spacing: 3px;
color: #b89b44;
font-weight: 700;
margin-bottom: 18px;
}
.process h2 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(38px, 5vw, 64px);
margin-bottom: 70px;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.step {
background: #171313;
border: 1px solid rgba(255, 255, 255, .05);
border-radius: 24px;
padding: 45px;
text-align: left;
transition: .35s;
}
.step:hover {
transform: translateY(-10px);
border-color: #b89b44;
}
.step span {
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
color: #b89b44;
margin-bottom: 35px;
}
.step p {
font-size: 17px;
line-height: 1.8;
color: #bdbdbd;
}
/* ==========================================
LOADER
========================================== */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #090909;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999999;
transition: opacity 1.2s ease,
visibility 1.2s ease;
}
.loader-logo {
width: 150px;
margin-bottom: 30px;
animation: logoFloat 4s ease-in-out infinite;
filter: drop-shadow(0 0 35px rgba(140, 20, 20, .45));
}
#loader h2 {
font-family: "Cormorant Garamond", serif;
font-size: 62px;
font-weight: 600;
margin-bottom: 12px;
color: #f5f1ec;
letter-spacing: .5px;
}
#loader p {
font-size: 15px;
letter-spacing: 4px;
text-transform: uppercase;
color: #9d9d9d;
margin-bottom: 50px;
text-align: center;
max-width: 340px;
}
.loader-line {
width: 220px;
height: 2px;
background: rgba(255, 255, 255, .08);
overflow: hidden;
border-radius: 10px;
}
.loader-line span {
display: block;
width: 0%;
height: 100%;
background: linear-gradient(90deg, #6d1116, #d4af37, #6d1116);
animation: loadingBar 2.8s ease forwards;
}
.loader-hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@keyframes loadingBar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes logoFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/* ==========================================
CURSOR GLOW
========================================== */
#cursor-glow {
position: fixed;
width: 420px;
height: 420px;
border-radius: 50%;
pointer-events: none;
left: 0;
top: 0;
transform: translate(-50%, -50%);
background:
radial-gradient(circle,
rgba(130, 18, 22, .18),
rgba(212, 175, 55, .08),
transparent 72%);
filter: blur(45px);
z-index: -1;
transition:
transform .08s linear;
}
/* ==========================================
SCROLL REVEAL
========================================== */
.reveal {
opacity: 0;
transform: translateY(80px);
transition:
opacity 1s ease,
transform 1s ease;
will-change: transform, opacity;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
#frames-card .image-box {
height: 380px !important;
}
#frames-card .image-box img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 20px !important;
}
/* =====================================================
RESPONSIVE SYSTEM
===================================================== */
/* ---------- TABLET ---------- */
@media (max-width:1024px) {
nav {
width: 95%;
padding: 0 20px;
}
.collections-grid {
grid-template-columns: repeat(2, 1fr);
}
.feature,
.commission-card {
grid-template-columns: 1fr;
gap: 40px;
}
.process-grid,
.lookbook-grid,
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
.circle {
width: 300px;
height: 300px;
margin: 0 auto;
}
}
/* ---------- MOBILE ---------- */
@media (max-width:768px) {
html,
body {
overflow-x: hidden;
}
nav {
width: 94%;
height: 65px;
padding: 0 18px;
top: 15px;
border-radius: 40px;
}
.logo {
font-size: 28px;
letter-spacing: 1px;
}
.whatsapp-btn {
padding: 10px 16px;
font-size: 11px;
letter-spacing: 1px;
}
.hero {
min-height: 100vh;
padding: 100px 20px 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.circle {
width: 260px;
height: 260px;
margin: 0 auto 30px;
}
.circle img {
width: 78%;
display: block;
margin: auto;
}
.hero-label {
text-align: center;
letter-spacing: 4px;
}
.hero h1 {
font-size: 42px;
line-height: 1.1;
margin: 20px auto;
}
.hero p {
max-width: 95%;
margin: auto;
font-size: 15px;
}
.hero-buttons {
width: 100%;
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}
.primary-btn,
.secondary-btn {
width: 100%;
text-align: center;
}
.collections-grid {
grid-template-columns: 1fr;
gap: 26px;
}
.collection-card {
width: 100%;
border-radius: 22px;
}
.feature,
.commission-card,
.feature-row {
grid-template-columns: 1fr;
gap: 35px;
}
.process-grid,
.reviews-grid,
.lookbook-grid {
grid-template-columns: 1fr;
}
.feature-image,
.logo-box {
height: auto;
}
.feature-image img,
.logo-box img,
.image-box img {
width: 100%;
height: auto;
object-fit: contain;
}
footer {
text-align: center;
}
.footer-links {
flex-direction: column;
gap: 20px;
}
.product-card {
padding: 18px;
}
.product-card h3 {
font-size: 22px;
}
.product-btn {
width: 100%;
text-align: center;
}
.collection-hero {
padding: 130px 25px 50px;
}
.collection-hero h1 {
font-size: 42px;
}
.hero-description {
font-size: 15px;
}
.featured-product {
grid-template-columns: 1fr;
gap: 40px;
}
.featured-content {
text-align: center;
}
.featured-content h2 {
font-size: 36px;
}
/* ---------- MOBILE NAV ---------- */
.menu {
display: none;
}
.menu-toggle {
display: block;
}
.product-page {
grid-template-columns: 1fr;
gap: 50px;
padding: 130px 20px 80px;
}
.product-info {
text-align: center;
}
.product-info h1 {
font-size: 38px;
}
.thumbnail-row {
justify-content: center;
}
/* When menu opens */
.menu.active {
display: flex;
flex-direction: column;
position: absolute;
top: 80px;
left: 3%;
width: 94%;
background: #111;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 22px;
padding: 25px;
gap: 18px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.menu.active a {
color: #fff;
text-decoration: none;
font-size: 15px;
letter-spacing: 2px;
padding: 8px 0;
}
.menu.active a:hover {
color: #d4af37;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
}
.nav-actions {
display: flex;
align-items: center;
gap: 14px;
}
/* ===========================================
COLLECTION PAGE
=========================================== */
.collections-page {
padding: 170px 8% 120px;
}
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
margin-top: 50px;
}
/* ===========================
PRODUCT GRID
=========================== */
.product-card {
background: #141414;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 24px;
padding: 24px;
transition: .35s;
overflow: hidden;
}
.product-card:hover {
transform: translateY(-10px);
border-color: #D4AF37;
box-shadow:
0 25px 60px rgba(0, 0, 0, .45);
}
.product-card img {
width: 100%;
aspect-ratio: 1/1;
object-fit: contain;
margin-bottom: 18px;
}
.product-card h3 {
font-size: 26px;
margin-bottom: 10px;
}
.product-card p {
color: #bcbcbc;
line-height: 1.7;
margin-bottom: 24px;
}
.product-btn {
display: inline-block;
padding: 14px 24px;
border-radius: 40px;
background: #681111;
color: #fff;
text-decoration: none;
transition: .3s;
}
.product-btn:hover {
background: #8d1a1a;
}
/* ===========================
COLLECTION HERO
=========================== */
.collection-hero {
padding: 170px 8% 70px;
text-align: center;
}
.collection-hero h1 {
font-size: 72px;
margin: 15px 0;
}
.hero-label {
color: #D4AF37;
letter-spacing: 5px;
font-size: 13px;
}
.hero-description {
max-width: 700px;
margin: auto;
color: #AFAFAF;
line-height: 1.8;
}
/* ===========================================
FEATURED PRODUCT
=========================================== */
.featured-product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 120px;
}
.featured-image {
background: #141414;
border-radius: 30px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, .08);
}
.featured-image img {
width: 100%;
display: block;
}
.featured-content h2 {
font-size: 56px;
margin: 18px 0;
}
.featured-content p {
color: #bdbdbd;
line-height: 1.8;
margin-bottom: 30px;
}
/* ==========================================
PRODUCT PAGE
========================================== */
.product-page {
padding: 180px 8% 100px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.product-gallery {
background: #141414;
padding: 35px;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, .08);
}
.main-product-image {
width: 100%;
margin-bottom: 25px;
}
.thumbnail-row {
display: flex;
gap: 15px;
}
.thumbnail-row img {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 14px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, .08);
transition: .3s;
}
.thumbnail-row img:hover {
border-color: #D4AF37;
}
.product-info h1 {
font-size: 60px;
margin: 18px 0;
}
.product-description {
color: #bcbcbc;
line-height: 1.9;
margin-bottom: 35px;
}
.product-features {
list-style: none;
padding: 0;
margin-bottom: 40px;
}
.product-features li {
margin-bottom: 16px;
font-size: 17px;
color: #dedede;
}
/* =====================================================
COLLECTIONS PAGE
===================================================== */
.collections-page{
padding:170px 8% 120px;
}
.section-heading{
max-width:750px;
margin:0 auto 70px;
text-align:center;
}
.section-heading p{
color:#D4AF37;
letter-spacing:4px;
font-size:13px;
font-weight:700;
margin-bottom:18px;
}
.section-heading h1{
font-family:"Cormorant Garamond",serif;
font-size:72px;
margin-bottom:20px;
color:#fff;
}
.section-heading span{
display:block;
max-width:650px;
margin:auto;
color:#9a9a9a;
line-height:1.9;
font-size:17px;
}
/* GRID */
.collection-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}
/* CARD */
.collection-category{
display:block;
text-decoration:none;
background:#151515;
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
overflow:hidden;
transition:.4s;
}
.collection-category:hover{
transform:translateY(-10px);
border-color:#D4AF37;
box-shadow:0 25px 70px rgba(0,0,0,.35);
}
/* IMAGE */
.collection-category img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
display:block;
transition:.45s ease;
}
.collection-category:hover img{
transform:scale(1.05);
}
/* CONTENT */
.collection-content{
padding:35px;
}
.collection-content h2{
font-family:"Cormorant Garamond",serif;
font-size:40px;
color:white;
margin-bottom:15px;
}
.collection-content p{
color:#A5A5A5;
line-height:1.8;
margin-bottom:25px;
}
.collection-content span{
color:#D4AF37;
letter-spacing:2px;
font-weight:700;
}
/* ================= MOBILE ================= */
@media(max-width:992px){
.collection-grid{
grid-template-columns:1fr;
}
}
@media(max-width:768px){
.collections-page{
padding:130px 20px 80px;
}
.section-heading h1{
font-size:46px;
}
.section-heading span{
font-size:15px;
}
.collection-category img{
height:240px;
}
.collection-content{
padding:24px;
}
.collection-content h2{
font-size:30px;
}
}
/* ===============================
CUSTOM CTA
=============================== */
.cta-section{
padding:120px 20px;
text-align:center;
}
.cta-section h2{
font-family:"Cormorant Garamond",serif;
font-size:58px;
margin-bottom:20px;
}
.cta-section p{
max-width:650px;
margin:auto;
color:#9d9d9d;
line-height:1.8;
margin-bottom:40px;
}
.product-info{
padding:22px;
}
.product-description{
color:#a5a5a5;
line-height:1.7;
margin:15px 0 22px;
min-height:78px;
}
.price-row{
display:flex;
justify-content:space-between;
align-items:center;
}
.price{
color:#D4AF37;
font-size:22px;
font-weight:700;
}
/* ==============================
PRODUCT CARD
============================== */
.product-card{
background:#141414;
border-radius:28px;
overflow:hidden;
transition:.35s;
border:1px solid rgba(255,255,255,.08);
}
.product-card:hover{
transform:translateY(-8px);
border-color:#D4AF37;
box-shadow:0 25px 60px rgba(0,0,0,.4);
}
.product-image{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
transition:.35s;
}
.product-info{
padding:28px;
}
.product-info h3{
font-size:30px;
margin-bottom:15px;
}
.product-description{
color:#9d9d9d;
line-height:1.8;
margin-bottom:25px;
min-height:95px;
}
.price-row{
display:flex;
justify-content:space-between;
align-items:center;
}
.price{
font-size:30px;
font-family:"Cormorant Garamond",serif;
color:#D4AF37;
font-weight:700;
}
.product-btn{
text-decoration:none;
padding:14px 22px;
background:#681111;
color:white;
border-radius:40px;
transition:.3s;
font-size:13px;
letter-spacing:1px;
}
.product-btn:hover{
background:#8d1a1a;
}
/* =========================================================
PRODUCT PAGE
========================================================= */
.product-page{
width:min(1400px,92%);
margin:170px auto 120px;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:80px;
align-items:start;
}
/* =========================
LEFT SIDE
========================= */
.gallery-section{
position:sticky;
top:120px;
}
.main-image-container{
width:100%;
aspect-ratio:1/1;
background:#141414;
border:1px solid rgba(255,255,255,.08);
border-radius:34px;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
transition:.45s;
}
.main-image-container:hover{
border-color:#D4AF37;
transform:translateY(-5px);
}
.main-image-container img{
width:100%;
height:100%;
object-fit:contain;
transition:.45s;
}
.thumbnail-container{
display:flex;
gap:18px;
margin-top:25px;
}
.thumbnail{
width:110px;
height:110px;
border-radius:20px;
background:#141414;
border:2px solid transparent;
object-fit:cover;
cursor:pointer;
transition:.35s;
}
.thumbnail:hover{
border-color:#D4AF37;
transform:translateY(-5px);
}
.thumbnail.active{
border-color:#D4AF37;
}
/* =========================
RIGHT SIDE
========================= */
.product-details{
display:flex;
flex-direction:column;
justify-content:center;
}
.product-details h1{
font-size:64px;
line-height:1;
margin:18px 0;
font-family:"Cormorant Garamond",serif;
}
.price{
font-size:52px;
color:#D4AF37;
font-family:"Cormorant Garamond",serif;
margin-bottom:30px;
}
.product-description{
color:#a5a5a5;
line-height:2;
font-size:17px;
margin-bottom:40px;
}
/* =========================
FEATURES
========================= */
.feature-box{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:40px;
}
.feature-item{
padding:18px;
background:#141414;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
transition:.35s;
}
.feature-item:hover{
border-color:#D4AF37;
}
/* =========================
BUTTONS
========================= */
.button-row{
display:flex;
gap:20px;
margin-bottom:40px;
}
.button-row a{
flex:1;
text-align:center;
}
/* =========================
DELIVERY
========================= */
.delivery-card{
padding:30px;
background:#141414;
border-radius:24px;
border:1px solid rgba(255,255,255,.08);
}
.delivery-card h3{
margin-bottom:15px;
}
.delivery-card p{
color:#a5a5a5;
line-height:1.8;
}
/* =========================
RELATED PRODUCTS
========================= */
.related-section{
width:min(1400px,92%);
margin:100px auto;
}
.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:35px;
margin-top:50px;
}
/* =========================
FOOTER
========================= */
footer{
padding:80px 0;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
margin-top:120px;
}
footer h2{
font-family:"Cormorant Garamond",serif;
font-size:42px;
margin-bottom:10px;
}
footer p{
color:#888;
}
/* =====================================================
NEW: PRODUCT BADGE, META, RELATED GRID, ORDER CTA
===================================================== */
.product-card {
position: relative;
}
.product-badge {
position: absolute;
top: 16px;
left: 16px;
background: #D4AF37;
color: #141414;
font-size: 11px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 30px;
z-index: 2;
}
.product-meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
color: #bcbcbc;
font-size: 15px;
}
.product-meta .stars {
color: #D4AF37;
letter-spacing: 1px;
}
.product-price-row {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 30px;
}
.product-price-row .current-price {
font-size: 34px;
font-family: "Cormorant Garamond", serif;
color: #fff;
}
.product-price-row .original-price {
font-size: 18px;
color: #888;
text-decoration: line-through;
}
.product-price-row .discount-tag {
font-size: 13px;
color: #D4AF37;
border: 1px solid rgba(212, 175, 55, .4);
padding: 4px 10px;
border-radius: 30px;
}
.whatsapp-order-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 20px 28px;
border-radius: 40px;
background: #25D366;
color: #0b0b0b;
font-weight: 600;
font-size: 17px;
text-decoration: none;
transition: .3s;
margin-bottom: 20px;
}
.whatsapp-order-btn:hover {
background: #1ebe5a;
transform: translateY(-3px);
}
.product-note {
color: #888;
font-size: 14px;
line-height: 1.7;
margin-bottom: 40px;
}
.related-heading {
font-size: 32px;
font-family: "Cormorant Garamond", serif;
margin: 100px 0 30px;
padding: 0 8%;
}
#relatedProducts {
padding: 0 8% 60px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 35px;
}
@media (max-width: 900px) {
.related-heading {
padding: 0 6%;
margin-top: 70px;
}
#relatedProducts {
padding: 0 6% 60px;
}
}
/* ===========================================
CART ICON (NAVBAR)
=========================================== */
.cart-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, .25);
background: rgba(255, 255, 255, .04);
color: #fff;
cursor: pointer;
transition: .3s;
font-size: 18px;
}
.cart-icon-btn:hover {
border-color: #D4AF37;
background: rgba(212, 175, 55, .1);
}
.cart-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 50%;
background: #8b1018;
color: #fff;
font-size: 11px;
font-weight: 600;
align-items: center;
justify-content: center;
display: none;
}
@media (max-width: 768px) {
.cart-icon-btn {
width: 38px;
height: 38px;
font-size: 16px;
}
}
/* ===========================================
CART DRAWER + OVERLAY
=========================================== */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity .35s ease, visibility .35s ease, background .35s ease;
}
.cart-overlay.cart-overlay-open {
opacity: 1;
visibility: visible;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(3px);
}
.cart-drawer {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 420px;
max-width: 92vw;
background: #111;
border-left: 1px solid rgba(212, 175, 55, .15);
box-shadow: -25px 0 60px rgba(0, 0, 0, .5);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.cart-overlay-open .cart-drawer {
transform: translateX(0);
}
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 26px 28px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cart-drawer-header h3 {
font-family: "Cormorant Garamond", serif;
font-size: 26px;
font-weight: 700;
}
.cart-close-btn {
background: none;
border: none;
color: #bcbcbc;
font-size: 18px;
cursor: pointer;
transition: .3s;
}
.cart-close-btn:hover {
color: #D4AF37;
}
.cart-drawer-body {
flex: 1;
overflow-y: auto;
padding: 22px 28px;
}
.cart-step-back {
color: #D4AF37;
font-size: 13px;
letter-spacing: .5px;
cursor: pointer;
margin-bottom: 20px;
}
/* ---- Cart items ---- */
.cart-items-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.cart-item {
display: flex;
gap: 16px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, .06);
position: relative;
}
.cart-item img {
width: 74px;
height: 74px;
object-fit: contain;
background: #1a1a1a;
border-radius: 14px;
flex-shrink: 0;
}
.cart-item-info {
flex: 1;
}
.cart-item-info h4 {
font-size: 15px;
font-weight: 500;
margin-bottom: 6px;
padding-right: 20px;
}
.cart-item-size {
display: block;
color: #999;
font-size: 12px;
margin-bottom: 4px;
}
.cart-item-price {
display: block;
color: #D4AF37;
font-size: 14px;
margin-bottom: 10px;
}
.cart-qty-control {
display: inline-flex;
align-items: center;
gap: 14px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 30px;
padding: 4px 6px;
}
.cart-qty-control button {
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .06);
color: #fff;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.cart-qty-control button:hover {
background: #D4AF37;
color: #0b0b0b;
}
.cart-qty-control span {
min-width: 14px;
text-align: center;
font-size: 13px;
}
.remove-item {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
color: #777;
cursor: pointer;
font-size: 13px;
transition: .3s;
}
.remove-item:hover {
color: #8b1018;
}
/* ---- Empty cart ---- */
.cart-empty {
text-align: center;
padding: 80px 10px;
color: #999;
}
.cart-empty-emoji {
font-size: 34px;
margin-bottom: 14px;
}
.cart-empty p {
color: #fff;
font-size: 17px;
margin-bottom: 6px;
}
.cart-empty span {
font-size: 13px;
color: #777;
}
/* ---- Footer / subtotal ---- */
.cart-drawer-footer {
padding: 22px 28px 28px;
border-top: 1px solid rgba(255, 255, 255, .08);
display: flex;
flex-direction: column;
gap: 12px;
}
.cart-footer-disabled .cart-primary-btn {
opacity: .4;
pointer-events: none;
}
.cart-subtotal-row {
display: flex;
justify-content: space-between;
font-size: 16px;
margin-bottom: 6px;
}
.cart-subtotal-row span:last-child {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
color: #D4AF37;
}
.cart-primary-btn {
width: 100%;
padding: 16px;
border-radius: 40px;
border: none;
background: #681111;
color: #fff;
font-weight: 600;
font-size: 14px;
letter-spacing: .5px;
cursor: pointer;
transition: .3s;
}
.cart-primary-btn:hover {
background: #8d1a1a;
}
.cart-whatsapp-btn {
background: #25D366;
color: #0b0b0b;
}
.cart-whatsapp-btn:hover {
background: #1ebe5a;
}
.cart-secondary-btn {
width: 100%;
padding: 14px;
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, .15);
background: transparent;
color: #ddd;
font-size: 13px;
cursor: pointer;
transition: .3s;
}
.cart-secondary-btn:hover {
border-color: #D4AF37;
color: #D4AF37;
}
/* ---- Customer details form ---- */
.customer-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.customer-form label {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
color: #bcbcbc;
letter-spacing: .3px;
}
.customer-form input,
.customer-form textarea,
.customer-form select {
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
padding: 13px 16px;
color: #fff;
font-family: Inter, sans-serif;
font-size: 14px;
resize: none;
outline: none;
transition: .3s;
}
.customer-form input:focus,
.customer-form textarea:focus,
.customer-form select:focus {
border-color: #D4AF37;
}
.payment-note {
font-size: 12.5px;
color: #9a9a9a;
line-height: 1.6;
background: #1a1a1a;
border: 1px solid rgba(212, 175, 55, .15);
border-radius: 12px;
padding: 12px 14px;
}
.payment-methods-note {
text-align: center;
font-size: 11.5px;
letter-spacing: .6px;
color: #7a7a7a;
margin-top: 12px;
text-transform: uppercase;
}
.delivery-estimate-note {
text-align: center;
font-size: 13px;
color: #D4AF37;
margin-top: 14px;
padding: 10px 14px;
background: rgba(212, 175, 55, .08);
border: 1px solid rgba(212, 175, 55, .2);
border-radius: 12px;
}
/* ---- Review step ---- */
.review-items {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.review-line {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #ddd;
}
.review-total-row {
display: flex;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .08);
margin-bottom: 26px;
font-size: 16px;
}
.review-total-row span:last-child {
font-family: "Cormorant Garamond", serif;
font-size: 22px;
color: #D4AF37;
}
.review-customer {
background: #1a1a1a;
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 26px;
font-size: 13px;
color: #bcbcbc;
line-height: 1.8;
}
.review-customer p:first-child {
color: #fff;
}
@media (max-width: 480px) {
.cart-drawer-header,
.cart-drawer-body,
.cart-drawer-footer {
padding-left: 20px;
padding-right: 20px;
}
}
/* ===========================================
PRODUCT PAGE — SIZE + QUANTITY SELECTORS
=========================================== */
.size-label {
display: block;
font-size: 13px;
letter-spacing: 1px;
color: #999;
text-transform: uppercase;
margin-bottom: 12px;
}
.size-selector {
margin-bottom: 26px;
}
.size-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.size-option {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .15);
background: transparent;
color: #ddd;
cursor: pointer;
font-size: 13px;
transition: .3s;
}
.size-option:hover {
border-color: #D4AF37;
}
.size-option.active {
background: #D4AF37;
border-color: #D4AF37;
color: #0b0b0b;
font-weight: 600;
}
.qty-selector {
margin-bottom: 22px;
}
.qty-selector-control {
display: inline-flex;
align-items: center;
gap: 22px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 40px;
padding: 10px 22px;
}
.qty-selector-control button {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .08);
color: #fff;
font-size: 16px;
cursor: pointer;
transition: .3s;
}
.qty-selector-control button:hover {
background: #D4AF37;
color: #0b0b0b;
}
.qty-selector-control span {
min-width: 16px;
text-align: center;
font-size: 15px;
}
.add-to-cart-btn {
background: #681111;
color: #fff;
}
.add-to-cart-btn:hover {
background: #8d1a1a;
transform: translateY(-3px);
}
/* ===========================================
RAZORPAY PAYMENT STEP
=========================================== */
.cart-pay-btn {
background: #8b1018;
color: #fff;
margin-bottom: 12px;
}
.cart-pay-btn:hover {
background: #a4141d;
}
.cart-pay-btn:disabled {
opacity: .5;
cursor: not-allowed;
}
.payment-status {
font-size: 13px;
color: #D4AF37;
text-align: center;
margin-bottom: 14px;
line-height: 1.6;
}
.payment-status-error {
color: #ff6b6b;
}
/* ===========================================
INFO PAGES
(About, Contact, Terms, Privacy, Exchange)
=========================================== */
.info-page {
padding: 0 8% 120px;
max-width: 900px;
margin: 0 auto;
}
.info-page h2 {
font-family: "Cormorant Garamond", serif;
font-size: 34px;
margin: 50px 0 20px;
}
.info-page h2:first-child {
margin-top: 0;
}
.info-page p {
color: #bcbcbc;
line-height: 1.9;
font-size: 16px;
margin-bottom: 18px;
}
.info-page ul {
color: #bcbcbc;
line-height: 1.9;
font-size: 16px;
margin: 0 0 24px 22px;
}
.info-page ul li {
margin-bottom: 8px;
}
.info-page strong {
color: #fff;
}
/* ---- Contact cards ---- */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin: 40px 0 20px;
}
.contact-card {
background: #141414;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 20px;
padding: 28px;
transition: .3s;
}
.contact-card:hover {
border-color: #D4AF37;
transform: translateY(-6px);
}
.contact-card .contact-icon {
font-size: 26px;
margin-bottom: 14px;
display: block;
}
.contact-card h3 {
font-size: 15px;
letter-spacing: 1px;
text-transform: uppercase;
color: #D4AF37;
margin-bottom: 12px;
}
.contact-card p {
color: #ddd;
margin: 0;
font-size: 15px;
}
.contact-card a {
color: #ddd;
text-decoration: none;
transition: .3s;
}
.contact-card a:hover {
color: #D4AF37;
}
@media (max-width: 900px) {
.info-page {
padding: 0 6% 90px;
}
}
/* =================================================================
FINAL MOBILE OVERRIDES
------------------------------------------------------------------
The stylesheet grew over time and several sections re-declare the
same selectors (product page, collection hero, featured product,
logo box, etc.) further down the file WITHOUT being wrapped in a
media query. Because plain CSS rules of equal specificity always
let "last one in the file wins", those later unconditional rules
were silently cancelling out the earlier mobile-only rules and
forcing desktop grid/font sizes onto phone screens.
Rather than untangle every duplicate individually (risky), this
block is placed at the very end of the file on purpose so it is
guaranteed to win the cascade on mobile, while doing nothing on
desktop. It reinstates single-column layouts, sane type scale,
and fixes elements that overflow the viewport (logo box, nav
logo, loader copy).
================================================================= */
@media (max-width: 768px) {
/* ---------- Loader ---------- */
#loader {
padding: 0 28px;
}
.loader-logo {
width: 110px;
margin-bottom: 24px;
}
#loader h2 {
font-size: 38px;
margin-bottom: 10px;
}
#loader p {
font-size: 12px;
letter-spacing: 3px;
text-align: center;
max-width: 260px;
margin: 0 auto 40px;
}
.loader-line {
width: 180px;
}
/* ---------- Nav / logo ---------- */
nav {
padding: 0 16px;
gap: 6px;
}
.logo {
font-size: 21px;
line-height: 1;
white-space: nowrap;
letter-spacing: 0;
}
.nav-actions {
gap: 8px;
}
.whatsapp-btn {
padding: 9px 14px;
font-size: 10px;
letter-spacing: .5px;
}
.menu-toggle {
font-size: 22px;
}
/* ---------- Commission / logo box (was fixed 420px, overflowed) ---------- */
.commission-card {
padding: 26px 20px;
border-radius: 24px;
gap: 30px;
}
.logo-box {
width: 100%;
max-width: 320px;
height: 220px;
margin: 0 auto;
}
.logo-box img {
width: 120px;
}
.commission-right {
text-align: center;
}
.commission-btn {
width: 100%;
text-align: center;
}
/* ---------- Collection hero (title was clipping off-screen) ---------- */
.collection-hero h1 {
font-size: 40px !important;
line-height: 1.15;
margin: 15px 0 !important;
}
.hero-label {
letter-spacing: 3px;
}
.hero-description {
font-size: 15px;
padding: 0 6px;
}
/* ---------- Featured product banner ---------- */
.featured-product {
grid-template-columns: 1fr !important;
gap: 30px !important;
margin-bottom: 70px !important;
}
.featured-image {
padding: 24px;
border-radius: 22px;
}
.featured-content {
text-align: center;
}
.featured-content h2 {
font-size: 30px !important;
margin: 14px 0 !important;
}
/* ---------- Product listing cards ---------- */
.collection-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.product-card {
padding: 18px;
}
.product-card h3 {
font-size: 22px;
}
/* ---------- PRODUCT PAGE (core fix: was staying 2-column on mobile,
which is why the copy overlapped the gallery and Add to Cart
was pushed off the right edge of the screen) ---------- */
.product-page {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
margin: 100px 0 60px !important;
padding: 0 20px !important;
gap: 34px !important;
}
.product-gallery,
.gallery-section {
width: 100%;
padding: 16px;
border-radius: 22px;
position: static;
}
.main-product-image,
.main-image-container {
width: 100%;
margin-bottom: 16px;
}
.thumbnail-row,
.thumbnail-container {
justify-content: center;
flex-wrap: wrap;
}
.thumbnail-row img,
.thumbnail {
width: 72px;
height: 72px;
}
.product-info,
.product-details {
text-align: center;
padding: 0 !important;
}
.product-info h1,
.product-details h1 {
font-size: 30px !important;
line-height: 1.15;
margin: 14px 0 !important;
}
.product-meta {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
font-size: 13px;
}
.product-price-row {
justify-content: center;
}
.product-price-row .current-price {
font-size: 28px;
}
.product-description {
text-align: left;
font-size: 15px;
}
.product-features {
text-align: left;
max-width: 340px;
margin: 0 auto 30px;
}
.product-features li {
font-size: 15px;
}
#sizeSelector,
#cartPurchaseBlock {
text-align: left;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
.size-options {
justify-content: flex-start;
}
.qty-selector-control {
display: flex;
width: fit-content;
}
.whatsapp-order-btn,
.add-to-cart-btn {
width: 100%;
padding: 17px 20px;
font-size: 15px;
}
.product-note {
max-width: 340px;
margin: 0 auto 30px;
font-size: 13px;
}
.related-heading {
text-align: center;
font-size: 26px;
padding: 0 20px;
}
}
@media (max-width: 400px) {
.logo {
font-size: 18px;
}
.whatsapp-btn {
padding: 8px 12px;
font-size: 9px;
}
.collection-hero h1 {
font-size: 34px !important;
}
.product-info h1,
.product-details h1 {
font-size: 26px !important;
}
}
/* ======================================================================
SOFT LAUNCH — REFINED DESIGN SYSTEM (v2)
Tokens, depth, motion polish, and a final mobile-safe pass.
This section is intentionally last in the cascade so it can safely
correct the older, duplicated rules above it without deleting them.
====================================================================== */
:root {
/* Palette */
--sl-bg: #0b0b0b;
--sl-surface: #141414;
--sl-surface-2: #171214;
--sl-maroon: #681111;
--sl-maroon-2: #8d1a1a;
--sl-gold: #D4AF37;
--sl-gold-soft: rgba(212, 175, 55, .35);
--sl-cream: #f8ece7;
--sl-text-muted: #bcbcbc;
--sl-border: rgba(255, 255, 255, .08);
--sl-border-strong: rgba(255, 255, 255, .14);
/* Spacing scale */
--sl-space-1: 8px;
--sl-space-2: 14px;
--sl-space-3: 22px;
--sl-space-4: 32px;
--sl-space-5: 48px;
--sl-space-6: 72px;
/* Radius scale */
--sl-radius-sm: 12px;
--sl-radius-md: 18px;
--sl-radius-lg: 24px;
--sl-radius-xl: 32px;
/* Type scale (fluid, single source of truth for new/overridden rules) */
--sl-type-xs: clamp(11px, 1.6vw, 13px);
--sl-type-sm: clamp(13px, 1.8vw, 15px);
--sl-type-base: clamp(15px, 2vw, 17px);
--sl-type-md: clamp(18px, 2.4vw, 22px);
--sl-type-lg: clamp(24px, 3.6vw, 32px);
--sl-type-xl: clamp(32px, 5vw, 44px);
--sl-type-hero: clamp(38px, 7.5vw, 82px);
/* Layered shadow system: ambient (soft/far) + contact (tight/near) */
--sl-shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.25);
--sl-shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 20px 45px rgba(0,0,0,.35);
--sl-shadow-lg: 0 4px 12px rgba(0,0,0,.45), 0 40px 90px rgba(0,0,0,.45);
--sl-shadow-gold: 0 2px 6px rgba(0,0,0,.4), 0 20px 50px rgba(212,175,55,.12);
}
/* ---------- Subtle film-grain texture on the dark background ----------
Classic trick that kills the "flat #0b0b0b" look without adding weight. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sl-bg); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3a3a3a, #202020);
border-radius: 10px;
border: 2px solid var(--sl-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--sl-maroon); }
html { scrollbar-color: #3a3a3a var(--sl-bg); scrollbar-width: thin; }
/* ---------- Hero: robust, viewport-safe sizing (fixes oversized mobile circle) ---------- */
.hero {
padding: clamp(90px, 16vw, 120px) clamp(20px, 5vw, 40px) clamp(60px, 10vw, 80px);
}
.circle {
width: clamp(190px, 55vw, 360px);
height: clamp(190px, 55vw, 360px);
max-width: 100%;
}
.hero h1 {
font-size: var(--sl-type-hero);
letter-spacing: -0.01em;
}
.hero-buttons {
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 480px) {
.hero-buttons { flex-direction: column; }
.primary-btn, .secondary-btn { width: 100%; }
}
/* ---------- Showcase image: contained + graded, never edge-to-edge huge ---------- */
.showcase {
padding: clamp(50px, 10vw, 80px) 0 clamp(70px, 12vw, 120px);
}
.showcase img {
width: min(92%, 1700px);
border-radius: clamp(12px, 2vw, 18px);
}
@media (max-width: 768px) {
.showcase { padding: 40px 0 60px; }
.showcase img {
width: 90%;
border-radius: 14px;
}
}
/* ---------- Magnetic-feeling button hovers ---------- */
.primary-btn, .secondary-btn, .product-btn, .whatsapp-btn, .whatsapp-order-btn {
transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.primary-btn:hover, .secondary-btn:hover, .product-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: var(--sl-shadow-gold);
}
.whatsapp-btn:hover, .whatsapp-order-btn:hover {
transform: translateY(-2px);
box-shadow: var(--sl-shadow-md);
}
/* ---------- Product cards: real layered depth + gold hairline on hover ---------- */
.product-card, .collection-category {
box-shadow: var(--sl-shadow-sm);
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
position: relative;
}
.product-card:hover, .collection-category:hover {
box-shadow: var(--sl-shadow-lg);
border-color: var(--sl-gold-soft);
}
/* Image zoom-on-hover, cropped cleanly by a wrapper */
.product-card img.product-image {
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover img.product-image {
transform: scale(1.045);
}
/* ---------- Single flagship product layout (Canvas / Spotify / Keychains) ---------- */
.collection-grid.single-product {
grid-template-columns: minmax(280px, 440px);
justify-content: center;
max-width: 460px;
margin: 50px auto 0;
}
/* ---------- Product page: sticky gallery on desktop, dynamic thumbnails ---------- */
@media (min-width: 901px) {
.product-gallery {
position: sticky;
top: 110px;
align-self: start;
}
}
.main-image-frame {
border-radius: var(--sl-radius-lg);
overflow: hidden;
}
.main-product-image {
transition: opacity .15s ease;
aspect-ratio: 1 / 1;
object-fit: contain;
background: radial-gradient(circle, #1c1c1c, #0f0f0f);
}
.thumbnail-row img {
opacity: .55;
transition: opacity .3s ease, border-color .3s ease, transform .3s ease;
}
.thumbnail-row img:hover { opacity: .85; }
.thumbnail-row img.active {
opacity: 1;
border-color: var(--sl-gold);
transform: translateY(-2px);
}
/* ---------- Trust badges on PDP ---------- */
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 22px;
}
.trust-badge {
font-size: var(--sl-type-xs);
letter-spacing: .3px;
color: #ddd;
background: rgba(212, 175, 55, .08);
border: 1px solid var(--sl-gold-soft);
border-radius: 40px;
padding: 8px 14px;
white-space: nowrap;
}
/* ---------- Typography scale cleanup on key large headings ---------- */
.collection-hero h1,
.product-info h1,
.product-details h1 {
font-size: var(--sl-type-xl);
line-height: 1.08;
}
.section-heading h1 {
font-size: var(--sl-type-xl);
}
/* ======================================================================
FINAL MOBILE PASS — consolidated, comes last so it wins the cascade.
====================================================================== */
@media (max-width: 768px) {
/* Nothing should ever be visually wider than the viewport */
img, .circle, .showcase img, .main-product-image {
max-width: 100%;
}
.circle {
width: clamp(170px, 48vw, 240px);
height: clamp(170px, 48vw, 240px);
margin: 0 auto 24px;
}
.hero h1 { margin: 16px auto; }
.product-page {
padding: 140px 6% 70px !important;
gap: 36px !important;
}
.product-gallery {
padding: 20px !important;
}
.thumbnail-row img {
width: 64px !important;
height: 64px !important;
}
.product-card { padding: 18px !important; }
.collection-grid.single-product {
max-width: 100%;
margin-top: 30px;
}
.trust-badges { gap: 8px; }
.trust-badge { font-size: 11px; padding: 7px 12px; }
}
@media (max-width: 400px) {
.circle { width: 160px; height: 160px; }
.hero h1 { font-size: 34px; }
}
/* ---------- Reduced-motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}