/** Shopify CDN: Minification failed
Line 5183:0 All "@import" rules must come first
**/
/* ================================================================
TIMEisMONEY – Luxury Watch Theme | Full White Edition
================================================================ */
:root {
--white: #ffffff;
--off-white: #faf9f7;
--cream: #f5f1ea;
--light: #f0ede7;
--border: #e8e3da;
--border2: #d8d2c6;
--muted: #a09890;
--mid: #6e665d;
--dark: #2a2420;
--black: #111010;
--gold: #c8a850;
--gold-d: #a8882a;
--gold-l: #dfc070;
--gold-pale: #faf3e0;
--ff-d: 'Playfair Display', Georgia, serif;
--ff-b: 'Inter', 'Helvetica Neue', sans-serif;
--sh-sm: 0 2px 12px rgba(42,36,32,.07);
--sh-md: 0 8px 36px rgba(42,36,32,.11);
--sh-lg: 0 24px 72px rgba(42,36,32,.15);
--ease: cubic-bezier(.4,0,.2,1);
--t: .35s;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--white);
color:var(--dark);
font-family:var(--ff-b);
font-size:15px;
line-height:1.7;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* ── CONTAINER ─────────────────────────────────────────────────── */
.container{max-width:1320px;margin:0 auto;padding:0 48px}
@media(max-width:768px){.container{padding:0 20px}}
/* ── TYPE ───────────────────────────────────────────────────────── */
.section-eyebrow{
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:10px;
}
.section-title{
font-family:var(--ff-d);
font-size:clamp(28px,4vw,52px);
font-weight:400;color:var(--dark);
line-height:1.1;letter-spacing:-.01em;
}
.section-title em{font-style:italic;color:var(--gold)}
.title-underline{width:48px;height:2px;background:var(--gold);margin-top:16px}
.section-sub{margin-top:14px;font-size:15px;color:var(--muted);max-width:520px}
/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn-gold{
display:inline-block;background:var(--gold);color:#fff;
padding:15px 34px;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;border:2px solid var(--gold);
transition:background var(--t) var(--ease),transform var(--t) var(--ease),
box-shadow var(--t) var(--ease);cursor:pointer;
}
.btn-gold:hover{
background:var(--gold-d);border-color:var(--gold-d);
transform:translateY(-3px);
box-shadow:0 10px 28px rgba(200,168,80,.4);
}
.btn-dark{
display:inline-block;background:var(--dark);color:#fff;
padding:15px 34px;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;border:2px solid var(--dark);
transition:background var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn-dark:hover{background:var(--black);transform:translateY(-3px)}
.btn-outline-white{
display:inline-block;background:transparent;color:#fff;
padding:15px 34px;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;font-weight:500;
border:2px solid rgba(255,255,255,.55);
transition:border-color var(--t),background var(--t);
}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-link-gold{
display:inline-block;color:var(--gold);font-size:13px;
letter-spacing:.06em;font-weight:500;
border-bottom:1px solid var(--gold);padding-bottom:2px;
transition:opacity var(--t);
}
.btn-link-gold:hover{opacity:.7}
/* ── SCROLL REVEAL ──────────────────────────────────────────────── */
.reveal-item{
opacity:0;
transform:translateY(36px);
transition:opacity .75s var(--ease),transform .75s var(--ease);
transition-delay:var(--delay,0s);
}
.reveal-item.is-visible{opacity:1;transform:translateY(0)}
/* ── KEYFRAMES ──────────────────────────────────────────────────── */
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes heroUp{to{opacity:1;transform:translateY(0)}}
@keyframes float{
0%,100%{transform:translateY(0) rotate(-4deg)}
50%{transform:translateY(-18px) rotate(-4deg)}
}
@keyframes scrollPulse{
0%{top:0;height:0;opacity:1}
80%{height:50px;opacity:1}
100%{top:50px;height:50px;opacity:0}
}
@keyframes shimmer{
0%{background-position:-200% center}
100%{background-position:200% center}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeInScale{
from{opacity:0;transform:scale(.92)}
to{opacity:1;transform:scale(1)}
}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes glowPulse{
0%,100%{box-shadow:0 0 0 0 rgba(200,168,80,.3)}
50%{box-shadow:0 0 0 12px rgba(200,168,80,0)}
}
/* ── ANNOUNCEMENT BAR ───────────────────────────────────────────── */
.announcement-bar{background:var(--dark);overflow:hidden;height:38px}
.announcement-inner{overflow:hidden;height:100%;display:flex;align-items:center}
.announcement-track{
display:flex;gap:64px;
animation:ticker 28s linear infinite;
white-space:nowrap;
}
.announcement-track span{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-l);font-weight:400;flex-shrink:0;
}
/* ── HEADER ─────────────────────────────────────────────────────── */
.site-header{
position:sticky;top:0;z-index:200;
background:rgba(255,255,255,.97);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
box-shadow:var(--sh-sm);
transition:box-shadow var(--t) var(--ease);
}
.site-header.scrolled{box-shadow:var(--sh-md)}
.header-inner{
max-width:1320px;margin:0 auto;padding:0 48px;
display:flex;align-items:center;justify-content:space-between;
height:76px;gap:24px;
}
.header-contact{
display:flex;gap:20px;font-size:12px;color:var(--muted);
}
.header-contact a{
display:flex;align-items:center;gap:6px;
transition:color var(--t);
}
.header-contact a:hover{color:var(--gold)}
.site-logo{
font-family:var(--ff-d);font-size:25px;letter-spacing:.04em;
line-height:1;white-space:nowrap;
}
.logo-time{color:var(--dark);font-weight:700}
.logo-is{
color:var(--gold);font-style:italic;font-weight:400;
font-size:21px;margin:0 3px;
}
.logo-money{color:var(--dark);font-weight:700}
.main-nav{display:flex;gap:32px}
.main-nav a{
font-size:12px;letter-spacing:.13em;text-transform:uppercase;
color:var(--mid);font-weight:500;padding:4px 0;
border-bottom:2px solid transparent;
transition:color var(--t),border-color var(--t);
}
.main-nav a:hover,.main-nav a.active{color:var(--gold);border-bottom-color:var(--gold)}
.header-actions{display:flex;align-items:center;gap:14px}
.header-icon{
width:38px;height:38px;display:flex;align-items:center;justify-content:center;
color:var(--mid);transition:color var(--t);position:relative;
}
.header-icon:hover{color:var(--gold)}
.cart-count{
position:absolute;top:2px;right:2px;width:17px;height:17px;
background:var(--gold);color:#fff;border-radius:50%;
font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.mobile-menu-btn{
display:none;flex-direction:column;justify-content:space-between;
width:24px;height:18px;background:none;border:none;cursor:pointer;padding:0;
}
.mobile-menu-btn span{
display:block;height:2px;background:var(--dark);
transition:transform var(--t),opacity var(--t);
}
.mobile-menu{
position:fixed;top:0;right:-100%;width:300px;height:100vh;
background:var(--white);z-index:300;padding:80px 40px;
transition:right var(--t) var(--ease);box-shadow:var(--sh-lg);
}
.mobile-menu.open{right:0}
.mobile-menu-close{
position:absolute;top:24px;right:24px;font-size:20px;
background:none;border:none;cursor:pointer;color:var(--mid);
}
.mobile-nav{display:flex;flex-direction:column;gap:0}
.mobile-nav a{
font-size:18px;font-family:var(--ff-d);color:var(--dark);
border-bottom:1px solid var(--border);padding:18px 0;
transition:color var(--t),padding-left var(--t);
}
.mobile-nav a:hover{color:var(--gold);padding-left:8px}
.mobile-overlay{
display:none;position:fixed;inset:0;
background:rgba(0,0,0,.5);z-index:250;
}
.mobile-overlay.open{display:block}
/* ── HERO ───────────────────────────────────────────────────────── */
.hero-section{
position:relative;height:92vh;min-height:620px;overflow:hidden;
}
.hero-slides{position:absolute;inset:0}
.hero-slide{
position:absolute;inset:0;opacity:0;
transition:opacity 1.1s var(--ease);
display:flex;align-items:center;
}
.hero-slide.active{opacity:1}
.hero-bg-img{
position:absolute;inset:0;
background-size:cover;background-position:center;
transition:transform 8s ease;
transform:scale(1.07);
}
.hero-slide.active .hero-bg-img{transform:scale(1)}
/* WHITE gradient overlay – makes it feel light/white */
.hero-overlay{
position:absolute;inset:0;
background:linear-gradient(
110deg,
rgba(255,255,255,.93) 0%,
rgba(255,255,255,.82) 40%,
rgba(255,255,255,.35) 75%,
rgba(255,255,255,.05) 100%
);
}
.hero-content{
position:relative;max-width:1320px;margin:0 auto;
padding:0 48px;width:100%;
}
.hero-eyebrow{
display:flex;align-items:center;gap:14px;
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:18px;
}
.eyebrow-line{display:block;width:40px;height:1px;background:var(--gold)}
.hero-title{
font-family:var(--ff-d);
font-size:clamp(58px,9.5vw,124px);
font-weight:400;line-height:.93;
letter-spacing:-.025em;color:var(--dark);
max-width:680px;margin-bottom:24px;
}
.hero-title em{
display:block;font-style:italic;
color:var(--gold);font-weight:300;
}
.hero-sub{
font-size:15px;color:var(--mid);
max-width:400px;line-height:1.85;margin-bottom:42px;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-btns .btn-outline-white{
color:var(--dark);border-color:var(--dark);
}
.hero-btns .btn-outline-white:hover{background:var(--dark);color:#fff}
/* Floating watch */
.hero-watch-float{
position:absolute;right:9%;top:50%;
width:260px;background:#fff;
box-shadow:var(--sh-lg);overflow:hidden;
animation:float 5.5s ease-in-out infinite;
transform-origin:center center;
}
.hero-watch-img{width:100%;height:260px;object-fit:cover}
.hero-watch-badge{
padding:16px 20px;background:#fff;
border-top:3px solid var(--gold);
}
.badge-brand{
display:block;font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px;
}
.badge-name{display:block;font-family:var(--ff-d);font-size:18px;color:var(--dark)}
.badge-price{display:block;font-size:13px;color:var(--muted);margin-top:4px}
/* Slider controls */
.hero-controls{
position:absolute;bottom:44px;left:50%;transform:translateX(-50%);
display:flex;gap:10px;z-index:10;
}
.hero-dot{
width:9px;height:9px;border-radius:50%;
background:rgba(42,36,32,.2);border:none;cursor:pointer;
transition:background var(--t),transform var(--t);padding:0;
}
.hero-dot.active{background:var(--gold);transform:scale(1.45)}
.hero-arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:10;
width:50px;height:50px;
background:rgba(255,255,255,.92);
border:1px solid var(--border);
cursor:pointer;display:flex;align-items:center;justify-content:center;
color:var(--dark);transition:background var(--t),color var(--t);
box-shadow:var(--sh-sm);
}
.hero-arrow:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.hero-prev{left:24px}
.hero-next{right:24px}
.hero-scroll-hint{
position:absolute;bottom:44px;right:52px;
display:flex;flex-direction:column;align-items:center;gap:8px;
font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.scroll-line{width:1px;height:52px;background:var(--gold);position:relative;overflow:hidden}
.scroll-line::after{
content:'';position:absolute;width:100%;background:#fff;
animation:scrollPulse 2s ease-in-out infinite;
}
.animate-up{opacity:0;transform:translateY(26px)}
.hero-slide.active .animate-up{animation:heroUp .75s ease forwards}
.hero-slide.active .delay-1{animation-delay:.1s}
.hero-slide.active .delay-2{animation-delay:.28s}
.hero-slide.active .delay-3{animation-delay:.46s}
.hero-slide.active .delay-4{animation-delay:.62s}
/* ── USP STRIP ──────────────────────────────────────────────────── */
.usp-section{
background:var(--white);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.usp-inner{
max-width:1320px;margin:0 auto;padding:0 48px;
display:flex;align-items:stretch;
}
.usp-item{
flex:1;padding:44px 32px;
display:flex;align-items:flex-start;gap:20px;
transition:background var(--t);
}
.usp-item:hover{background:var(--gold-pale)}
.usp-divider{width:1px;background:var(--border);flex-shrink:0}
.usp-icon{
width:46px;height:46px;flex-shrink:0;color:var(--gold);
transition:transform var(--t) var(--ease);
}
.usp-item:hover .usp-icon{transform:scale(1.15) rotate(-5deg)}
.usp-icon svg{width:100%;height:100%}
.usp-text h3{
font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--dark);font-weight:700;margin-bottom:7px;
}
.usp-text p{font-size:13px;color:var(--muted);line-height:1.65}
/* ── PRODUCTS ───────────────────────────────────────────────────── */
.products-section{padding:100px 0;background:var(--white)}
.section-header{margin-bottom:56px}
.products-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:24px;margin-bottom:52px;
}
.product-card{
background:var(--white);border:1px solid var(--border);
overflow:hidden;position:relative;
transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),
border-color var(--t);
animation:fadeInScale .6s ease both;
animation-play-state:paused;
}
.product-card.is-visible{animation-play-state:running}
.product-card:hover{
box-shadow:var(--sh-lg);
transform:translateY(-8px);
border-color:var(--gold);
}
.product-badge{
position:absolute;top:16px;left:16px;z-index:2;
background:var(--dark);color:#fff;
font-size:9px;letter-spacing:.18em;text-transform:uppercase;
padding:5px 12px;font-weight:600;
}
.product-badge--gold{background:var(--gold)}
.product-img-wrap{
display:block;aspect-ratio:4/3;overflow:hidden;position:relative;
}
.product-img{
width:100%;height:100%;object-fit:cover;
transition:transform .65s ease;
}
.product-card:hover .product-img{transform:scale(1.07)}
.product-overlay{
position:absolute;inset:0;
background:rgba(42,36,32,0);
display:flex;align-items:center;justify-content:center;
transition:background var(--t);
}
.product-card:hover .product-overlay{background:rgba(42,36,32,.22)}
.overlay-btn{
background:#fff;color:var(--dark);
padding:10px 24px;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;font-weight:600;
opacity:0;transform:translateY(10px);
transition:opacity var(--t),transform var(--t);
}
.product-card:hover .overlay-btn{opacity:1;transform:translateY(0)}
.product-info{
padding:20px 24px 26px;
border-top:3px solid var(--gold-pale);
transition:border-color var(--t);
}
.product-card:hover .product-info{border-top-color:var(--gold)}
.product-brand{
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:6px;
}
.product-name{
font-family:var(--ff-d);font-size:19px;font-weight:400;
color:var(--dark);line-height:1.3;margin-bottom:14px;
}
.product-footer{display:flex;align-items:center;justify-content:space-between}
.product-price{font-size:16px;font-weight:700;color:var(--dark)}
.product-link{
font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold);font-weight:600;
border-bottom:1px solid var(--gold);padding-bottom:1px;
transition:gap var(--t),opacity var(--t);
}
.product-link:hover{opacity:.7}
.section-cta{text-align:center}
/* ── BRANDS ─────────────────────────────────────────────────────── */
.brands-section{
background:var(--off-white);padding:90px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.brands-ticker{
display:grid;grid-template-columns:repeat(6,1fr);
gap:1px;background:var(--border);
border:1px solid var(--border);
margin-top:52px;
}
.brand-item{
background:var(--white);
padding:30px 20px;
display:flex;align-items:center;justify-content:center;
transition:background var(--t),transform var(--t);
position:relative;overflow:hidden;cursor:pointer;
}
.brand-item::before{
content:'';position:absolute;inset:0;
background:var(--gold-pale);
transform:scaleY(0);transform-origin:bottom;
transition:transform .4s var(--ease);
}
.brand-item:hover::before{transform:scaleY(1)}
.brand-item::after{
content:'';position:absolute;bottom:0;left:0;right:0;
height:3px;background:var(--gold);
transform:scaleX(0);transition:transform .4s var(--ease);
}
.brand-item:hover::after{transform:scaleX(1)}
.brand-logo-box{
text-align:center;color:var(--muted);
transition:color var(--t),transform var(--t);
position:relative;z-index:1;
}
.brand-item:hover .brand-logo-box{color:var(--gold-d);transform:scale(1.08)}
.brand-svg{height:38px;width:auto;max-width:140px}
.brand-crown{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity var(--t)}
.brand-crown svg{width:14px;height:8px;fill:var(--gold);stroke:none}
.brand-omega-symbol{
position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
font-size:16px;color:var(--gold);opacity:0;transition:opacity var(--t);
}
.brand-item:hover .brand-crown,
.brand-item:hover .brand-omega-symbol{opacity:1}
.brands-scroll-track{
overflow:hidden;background:var(--dark);padding:14px 0;margin-top:1px;
}
.brands-scroll-inner{
display:flex;gap:36px;
animation:ticker 22s linear infinite;
white-space:nowrap;
}
.brands-scroll-inner span{
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold-l);flex-shrink:0;font-weight:500;
}
/* ── ABOUT ──────────────────────────────────────────────────────── */
.about-section{padding:100px 0;background:var(--white)}
.about-grid{
max-width:1320px;margin:0 auto;padding:0 48px;
display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;
}
.about-images{
position:relative;
display:grid;grid-template-columns:1fr .44fr;gap:16px;align-items:start;
}
.about-img-main{position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.about-img-main img{
width:100%;aspect-ratio:3/4;object-fit:cover;
transition:transform .8s ease;
}
.about-img-main:hover img{transform:scale(1.05)}
.about-img-tag{
position:absolute;bottom:20px;left:20px;
background:var(--gold);color:#fff;
padding:8px 16px;font-size:11px;letter-spacing:.13em;
text-transform:uppercase;font-weight:600;
display:flex;align-items:center;gap:7px;
}
.about-img-side{overflow:hidden;box-shadow:var(--sh-md);margin-top:64px}
.about-img-side img{
width:100%;aspect-ratio:3/4;object-fit:cover;
transition:transform .8s ease;
}
.about-img-side:hover img{transform:scale(1.05)}
.about-content>p{
font-size:15px;color:var(--mid);line-height:1.9;margin-bottom:16px;
}
.about-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
margin:38px 0 34px;padding-top:34px;border-top:1px solid var(--border);
}
.stat{text-align:center}
.stat-number{
font-family:var(--ff-d);font-size:38px;font-weight:400;
color:var(--gold);line-height:1;display:inline;
}
.stat-suffix{font-family:var(--ff-d);font-size:26px;color:var(--gold);display:inline}
.stat-label{
font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin-top:8px;
}
.about-btns{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
/* ── SERVICES ───────────────────────────────────────────────────── */
.services-section{
background:var(--off-white);padding:100px 0;
border-top:1px solid var(--border);
}
.services-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:20px;margin-top:56px;
}
.service-card{
background:var(--white);padding:44px 30px;
border:1px solid var(--border);position:relative;overflow:hidden;
transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),
border-color var(--t);
}
.service-card:hover{
box-shadow:var(--sh-lg);transform:translateY(-7px);
border-color:var(--gold);
}
.service-card--featured{
background:var(--dark);border-color:var(--dark);
}
.service-card--featured:hover{border-color:var(--gold)}
.service-card--featured h3{color:#fff}
.service-card--featured p{color:rgba(255,255,255,.55)}
.service-card--featured .service-link{color:var(--gold);border-color:var(--gold)}
.service-card--featured .service-num{color:rgba(255,255,255,.07)}
.service-card--featured .service-icon{color:var(--gold)}
.service-num{
position:absolute;top:14px;right:18px;
font-family:var(--ff-d);font-size:68px;font-weight:700;
color:var(--light);line-height:1;pointer-events:none;
transition:color var(--t);
}
.service-card:not(.service-card--featured):hover .service-num{color:var(--gold-pale)}
.service-icon{
width:52px;height:52px;color:var(--gold);margin-bottom:22px;
transition:transform var(--t) var(--ease);
}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-8deg)}
.service-icon svg{width:100%;height:100%}
.service-card h3{
font-family:var(--ff-d);font-size:22px;font-weight:400;
color:var(--dark);margin-bottom:12px;line-height:1.2;
}
.service-card p{
font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:24px;
}
.service-link{
display:inline-flex;align-items:center;gap:6px;
font-size:11px;letter-spacing:.15em;text-transform:uppercase;
color:var(--gold);font-weight:600;
border-bottom:1px solid var(--gold);padding-bottom:2px;
transition:gap var(--t);
}
.service-link:hover{gap:12px}
.service-bg-num{
position:absolute;bottom:-12px;right:12px;
font-family:var(--ff-d);font-size:100px;font-weight:700;
opacity:.03;line-height:1;pointer-events:none;color:var(--dark);
}
.service-card--featured .service-bg-num{color:#fff;opacity:.05}
/* ── PARALLAX CTA ───────────────────────────────────────────────── */
.parallax-cta{
position:relative;padding:130px 48px;
overflow:hidden;text-align:center;
}
.parallax-bg{
position:absolute;inset:-70px;
background-size:cover;background-position:center;
will-change:transform;
}
.parallax-overlay{
position:absolute;inset:0;
background:rgba(17,16,16,.75);
}
.parallax-content{position:relative;max-width:700px;margin:0 auto}
.parallax-title{
font-family:var(--ff-d);
font-size:clamp(30px,4.5vw,58px);
font-weight:400;color:#fff;line-height:1.1;
margin:12px 0 20px;
}
.parallax-title em{display:block;font-style:italic;color:var(--gold-l)}
.parallax-sub{
font-size:15px;color:rgba(255,255,255,.7);
line-height:1.8;margin-bottom:38px;
}
.parallax-btns{
display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
}
/* ── SALON / CONTACT ────────────────────────────────────────────── */
.salon-section{background:var(--white);padding:100px 0}
.salon-grid{
display:grid;grid-template-columns:1.2fr 1fr;
gap:60px;margin-top:56px;align-items:start;
}
.salon-map{
height:480px;border:1px solid var(--border);
overflow:hidden;box-shadow:var(--sh-md);
}
.salon-map iframe{
width:100%;height:100%;border:none;
filter:grayscale(15%) contrast(95%);
}
.salon-info{display:flex;flex-direction:column;gap:16px}
.salon-card{
display:flex;align-items:flex-start;gap:18px;
padding:20px 24px;background:var(--off-white);
border:1px solid var(--border);
transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.salon-card:hover{
border-color:var(--gold);box-shadow:var(--sh-sm);transform:translateX(4px);
}
.salon-icon{width:38px;height:38px;flex-shrink:0;color:var(--gold);margin-top:3px}
.salon-card h4{
font-size:11px;letter-spacing:.15em;text-transform:uppercase;
color:var(--muted);margin-bottom:4px;font-weight:600;
}
.salon-card p,.salon-card a{font-size:15px;color:var(--dark);line-height:1.6}
.salon-card a{transition:color var(--t)}
.salon-card a:hover{color:var(--gold)}
.salon-hours{
background:var(--off-white);border:1px solid var(--border);padding:24px;
}
.salon-hours h4{
font-size:11px;letter-spacing:.17em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:16px;
}
.hours-table{border-top:1px solid var(--border)}
.hours-row{
display:flex;justify-content:space-between;align-items:center;
padding:11px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.hours-day{color:var(--dark);font-weight:500}
.hours-time{color:var(--muted)}
.hours-row--closed .hours-time{font-size:13px}
/* ── FOOTER ─────────────────────────────────────────────────────── */
.site-footer{background:var(--dark);color:var(--cream)}
.footer-inner{
max-width:1320px;margin:0 auto;padding:80px 48px 48px;
display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:60px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo{
font-family:var(--ff-d);font-size:28px;letter-spacing:.04em;
line-height:1;margin-bottom:16px;
}
.footer-tagline{
font-size:13px;color:rgba(255,255,255,.4);
line-height:1.8;margin-bottom:28px;
}
.footer-social{display:flex;gap:10px}
.footer-social a{
width:38px;height:38px;
border:1px solid rgba(255,255,255,.15);
display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.45);
transition:border-color var(--t),color var(--t),background var(--t),transform var(--t);
}
.footer-social a:hover{
border-color:var(--gold);color:var(--gold);
background:rgba(200,168,80,.1);transform:translateY(-3px);
}
.footer-col h4{
font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);margin-bottom:22px;font-weight:600;
}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{
font-size:13px;color:rgba(255,255,255,.45);
transition:color var(--t),padding-left var(--t);
display:inline-block;
}
.footer-col ul li a:hover{color:var(--cream);padding-left:6px}
.footer-bottom{
max-width:1320px;margin:0 auto;padding:20px 48px;
display:flex;justify-content:space-between;align-items:center;
font-size:12px;color:rgba(255,255,255,.3);
}
/* ── CURSOR GLOW ────────────────────────────────────────────────── */
@media(hover:hover){
.cursor-glow{
pointer-events:none;position:fixed;width:320px;height:320px;
border-radius:50%;
background:radial-gradient(circle,rgba(200,168,80,.07) 0%,transparent 68%);
transform:translate(-50%,-50%);
z-index:9999;
transition:opacity .3s;
}
}
/* ── GOLD SHIMMER on section eyebrows ───────────────────────────── */
.section-eyebrow{
background:linear-gradient(90deg,var(--gold),var(--gold-l),var(--gold));
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:shimmer 4s linear infinite;
}
/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:1200px){
.services-grid{grid-template-columns:repeat(2,1fr)}
.brands-ticker{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1024px){
.products-grid{grid-template-columns:repeat(2,1fr)}
.about-grid{grid-template-columns:1fr;gap:48px}
.about-stats{grid-template-columns:repeat(2,1fr)}
.footer-inner{grid-template-columns:1fr 1fr}
.header-contact{display:none}
.main-nav{display:none}
.mobile-menu-btn{display:flex}
.hero-watch-float{display:none}
}
@media(max-width:768px){
.header-inner{padding:0 20px}
.hero-section{height:80vh}
.hero-content{padding:0 20px}
.hero-title{font-size:52px}
.usp-inner{flex-direction:column;padding:0 20px}
.usp-divider{width:100%;height:1px}
.usp-item{padding:28px 0}
.products-grid{grid-template-columns:1fr}
.brands-ticker{grid-template-columns:repeat(2,1fr)}
.about-grid{padding:0 20px}
.about-images{grid-template-columns:1fr}
.about-img-side{display:none}
.about-stats{grid-template-columns:repeat(2,1fr)}
.services-grid{grid-template-columns:1fr}
.salon-grid{grid-template-columns:1fr}
.salon-map{height:300px}
.footer-inner{grid-template-columns:1fr;padding:48px 20px;gap:36px}
.footer-bottom{flex-direction:column;gap:8px;padding:16px 20px;text-align:center}
.parallax-cta{padding:80px 20px}
.parallax-btns{flex-direction:column;align-items:center}
.hero-scroll-hint{display:none}
.hero-prev{left:10px}
.hero-next{right:10px}
}
/* ---------------------------------------------------------------
LANGUAGE & CURRENCY SELECTORS
--------------------------------------------------------------- */
.lang-selector,
.currency-selector {
position: relative;
}
.lang-btn,
.currency-btn {
display: flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid rgba(200, 169, 110, 0.35);
color: #c8a96e;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
padding: 5px 10px;
border-radius: 2px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.lang-btn:hover,
.currency-btn:hover {
border-color: #c8a96e;
background: rgba(200, 169, 110, 0.08);
}
.lang-dropdown,
.currency-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #111;
border: 1px solid rgba(200, 169, 110, 0.25);
min-width: 130px;
z-index: 1000;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.2s, transform 0.2s;
}
.lang-dropdown.open,
.currency-dropdown.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.lang-option,
.currency-option {
display: block;
width: 100%;
background: transparent;
border: none;
color: #aaa;
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.5px;
padding: 10px 14px;
text-align: left;
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.lang-option:hover,
.currency-option:hover {
color: #c8a96e;
background: rgba(200, 169, 110, 0.08);
}
.lang-option.active,
.currency-option.active {
color: #c8a96e;
}
@media (max-width: 768px) {
.lang-selector,
.currency-selector {
display: none;
}
}
/* =============================================================
PAGE HERO (shared) — about, contact, watches, search, cart
============================================================= */
.page-hero {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
margin-top: 0;
}
.page-hero--small { min-height: 280px; }
.page-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.4);
}
.page-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.85) 100%);
}
.page-hero-content {
position: relative; z-index: 2;
max-width: 800px;
padding: 80px 24px 60px;
}
.page-hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(36px, 5vw, 64px);
font-weight: 500;
color: #fff;
margin: 14px 0 14px;
line-height: 1.1;
}
.page-hero-content h1 em {
font-style: italic;
color: #c8a96e;
}
.page-hero-content p {
color: #bbb;
font-size: 16px;
letter-spacing: 0.5px;
max-width: 540px;
margin: 0 auto;
}
/* =============================================================
ABOUT PAGE
============================================================= */
.page-about-wrap { background: #0a0a0a; }
.about-intro-section { padding: 100px 24px; background: #0a0a0a; }
.about-intro-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
}
.about-intro-img {
position: relative;
}
.about-intro-img img {
width: 100%; height: 600px; object-fit: cover;
filter: brightness(0.85);
}
.about-intro-badge {
position: absolute; bottom: 30px; left: 30px;
background: #c8a96e; color: #0a0a0a;
padding: 24px 32px;
font-family: 'Playfair Display', serif;
text-align: center; line-height: 1;
}
.about-intro-badge span { font-size: 12px; letter-spacing: 3px; opacity: 0.7; }
.about-intro-badge strong { display: block; font-size: 36px; font-weight: 600; margin-top: 6px; }
.about-intro-text h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 3.5vw, 44px);
color: #fff; font-weight: 500;
line-height: 1.2; margin: 12px 0 8px;
}
.about-intro-text h2 em { font-style: italic; color: #c8a96e; }
.about-intro-text p {
color: #aaa; font-size: 15px; line-height: 1.85;
margin: 18px 0;
}
.about-stats-band {
background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
padding: 60px 24px;
border-top: 1px solid rgba(200, 169, 110, 0.15);
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.about-stats-inner {
max-width: 1280px; margin: 0 auto;
display: flex; align-items: center; justify-content: center;
gap: 0; flex-wrap: wrap;
}
.astat {
flex: 1; min-width: 160px;
text-align: center;
padding: 20px;
position: relative;
}
.astat-num {
display: inline-block;
font-family: 'Playfair Display', serif;
font-size: 56px; color: #c8a96e; font-weight: 600;
line-height: 1;
}
.astat-suf { display: inline-block; font-size: 32px; color: #c8a96e; vertical-align: top; }
.astat-label {
color: #888; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
margin-top: 12px;
}
.astat-divider { width: 1px; height: 80px; background: rgba(200, 169, 110, 0.2); }
.about-values-section { padding: 100px 24px; background: #0a0a0a; }
.values-grid {
max-width: 1280px; margin: 60px auto 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.value-card {
background: #111; border: 1px solid rgba(200, 169, 110, 0.1);
padding: 40px 28px; text-align: center;
transition: all 0.3s;
}
.value-card:hover { border-color: rgba(200, 169, 110, 0.4); transform: translateY(-4px); }
.value-icon {
width: 64px; height: 64px;
margin: 0 auto 20px;
color: #c8a96e;
}
.value-card h3 {
font-family: 'Playfair Display', serif;
font-size: 20px; color: #fff; font-weight: 500;
margin-bottom: 12px;
}
.value-card p { color: #888; font-size: 13px; line-height: 1.7; }
.about-experience-section { padding: 100px 24px; background: #111; }
.about-exp-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.about-exp-text h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 3vw, 40px);
color: #fff; font-weight: 500; line-height: 1.2;
margin: 12px 0 8px;
}
.about-exp-text h2 em { font-style: italic; color: #c8a96e; }
.about-exp-text p { color: #aaa; line-height: 1.85; margin: 16px 0; font-size: 14.5px; }
.exp-list { list-style: none; padding: 0; margin: 28px 0 0; }
.exp-list li {
position: relative; padding: 10px 0 10px 28px;
color: #ccc; font-size: 14px;
border-bottom: 1px solid rgba(200, 169, 110, 0.1);
}
.exp-list li:before {
content: '✦'; position: absolute; left: 0; color: #c8a96e; font-size: 12px;
}
.about-exp-images {
position: relative; height: 540px;
}
.exp-img-main {
position: absolute; top: 0; left: 0;
width: 75%; height: 75%; object-fit: cover;
}
.exp-img-side {
position: absolute; bottom: 0; right: 0;
width: 55%; height: 50%; object-fit: cover;
border: 8px solid #111;
}
.about-brands-band { padding: 80px 24px; background: #0a0a0a; border-top: 1px solid rgba(200, 169, 110, 0.1); }
.about-brands-list {
display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 56px;
margin-top: 12px;
}
.about-brands-list span {
color: #c8a96e; font-family: 'Playfair Display', serif; font-size: 22px;
letter-spacing: 1.5px; opacity: 0.7;
transition: opacity 0.3s;
}
.about-brands-list span:hover { opacity: 1; }
.about-cta-section { padding: 120px 24px; text-align: center; background: #0a0a0a; }
.about-cta-inner h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 3.5vw, 44px);
color: #fff; font-weight: 500; margin-bottom: 16px;
}
.about-cta-inner h2 em { font-style: italic; color: #c8a96e; }
.about-cta-inner p { color: #aaa; margin-bottom: 36px; }
.about-cta-btns { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.btn-outline-gold {
display: inline-block;
padding: 16px 36px;
border: 1px solid #c8a96e; color: #c8a96e;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 12px; letter-spacing: 2.5px;
text-transform: uppercase; font-weight: 500;
transition: all 0.3s; cursor: pointer; background: transparent;
}
.btn-outline-gold:hover { background: #c8a96e; color: #0a0a0a; }
/* =============================================================
WATCHES / COLLECTION PAGE
============================================================= */
.watches-page-wrap { background: #0a0a0a; min-height: 100vh; }
.watches-page-hero {
position: relative; min-height: 320px;
display: flex; align-items: center; justify-content: center;
text-align: center; overflow: hidden;
}
.watches-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.35);
}
.watches-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.85) 100%);
}
.watches-hero-content { position: relative; z-index: 2; padding: 70px 24px 50px; }
.watches-hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(36px, 5vw, 60px);
color: #fff; font-weight: 500;
margin: 12px 0; line-height: 1.1;
}
.watches-hero-content h1 em { font-style: italic; color: #c8a96e; }
.watches-hero-content p { color: #bbb; }
.watches-layout {
max-width: 1440px; margin: 0 auto;
display: grid; grid-template-columns: 280px 1fr;
gap: 40px; padding: 60px 24px 100px;
}
/* SIDEBAR */
.watches-sidebar {
background: #111;
padding: 32px 24px;
border: 1px solid rgba(200, 169, 110, 0.1);
align-self: start;
position: sticky; top: 100px;
max-height: calc(100vh - 120px); overflow-y: auto;
}
.sidebar-header {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 16px; margin-bottom: 24px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.sidebar-header h3 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 18px; font-weight: 500;
}
.sidebar-reset {
background: none; border: none;
color: #c8a96e; font-size: 11px; letter-spacing: 1px;
cursor: pointer; text-transform: uppercase;
}
.sidebar-reset:hover { text-decoration: underline; }
.filter-group { margin-bottom: 28px; }
.filter-label {
display: block;
color: #c8a96e; font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; margin-bottom: 14px; font-weight: 500;
}
.filter-search-wrap { position: relative; }
.filter-search-wrap input {
width: 100%; padding: 10px 36px 10px 14px;
background: #0a0a0a; border: 1px solid rgba(200, 169, 110, 0.2);
color: #eee; font-size: 13px; font-family: inherit;
outline: none; transition: border 0.2s;
}
.filter-search-wrap input:focus { border-color: #c8a96e; }
.filter-search-wrap svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #c8a96e; }
.filter-checks { display: flex; flex-direction: column; gap: 8px; }
.filter-check {
display: flex; align-items: center; gap: 10px;
color: #ccc; font-size: 13px;
cursor: pointer; padding: 4px 0;
transition: color 0.2s;
}
.filter-check:hover { color: #c8a96e; }
.filter-check input {
appearance: none; width: 14px; height: 14px;
border: 1px solid rgba(200, 169, 110, 0.4); background: transparent;
cursor: pointer; position: relative; flex-shrink: 0;
}
.filter-check input:checked { background: #c8a96e; border-color: #c8a96e; }
.filter-check input:checked:after {
content: '✓'; position: absolute; top: -3px; left: 1px;
color: #0a0a0a; font-size: 12px; font-weight: bold;
}
.filter-count { margin-left: auto; color: #666; font-size: 11px; }
.price-range-wrap { display: flex; flex-direction: column; gap: 8px; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input {
flex: 1; padding: 8px 10px;
background: #0a0a0a; border: 1px solid rgba(200, 169, 110, 0.2);
color: #eee; font-size: 12px; outline: none;
}
.price-inputs input:focus { border-color: #c8a96e; }
.price-inputs span { color: #c8a96e; }
.price-display-row { color: #aaa; font-size: 11px; letter-spacing: 1px; }
.filter-select {
width: 100%; padding: 10px 14px;
background: #0a0a0a; border: 1px solid rgba(200, 169, 110, 0.2);
color: #eee; font-size: 13px; font-family: inherit; cursor: pointer;
outline: none;
}
.filter-apply-btn {
width: 100%; padding: 14px;
background: #c8a96e; color: #0a0a0a;
border: none; cursor: pointer;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
font-weight: 600; transition: background 0.2s;
display: none;
}
.filter-apply-btn:hover { background: #b59558; }
/* MAIN GRID */
.watches-main { min-width: 0; }
.watches-toolbar {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 28px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.watches-count { color: #aaa; font-size: 13px; }
.watches-count strong, .watches-count #visible-count { color: #c8a96e; font-weight: 600; font-size: 15px; }
.mobile-filter-btn {
display: none; align-items: center; gap: 8px;
background: #111; border: 1px solid rgba(200, 169, 110, 0.3);
color: #c8a96e; padding: 10px 18px;
font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer;
}
.watches-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.watches-no-results {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 80px 20px; color: #888;
background: #111; border: 1px solid rgba(200, 169, 110, 0.1);
}
.watches-no-results svg { color: #c8a96e; opacity: 0.5; margin-bottom: 20px; }
/* Product card additions */
.watch-card .product-ref-mini {
color: #666; font-size: 11px; letter-spacing: 1px;
margin-top: 4px; font-family: 'Inter', monospace;
}
.product-add-btn {
display: inline-flex; align-items: center; gap: 6px;
background: transparent;
border: 1px solid rgba(200, 169, 110, 0.4);
color: #c8a96e;
padding: 7px 14px;
font-family: 'Inter', sans-serif; font-size: 10px;
letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: all 0.25s;
margin-left: auto;
}
.product-add-btn:hover { background: #c8a96e; color: #0a0a0a; border-color: #c8a96e; }
.product-add-btn.added { background: #4caf50; border-color: #4caf50; color: #fff; }
.product-add-btn.added:after { content: '✓'; margin-left: 4px; }
/* PRODUCT MODAL */
.product-modal-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 9999;
display: none;
align-items: center; justify-content: center;
padding: 20px;
backdrop-filter: blur(6px);
}
.product-modal-overlay.open { display: flex; animation: fadeIn 0.25s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.product-modal {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.25);
max-width: 1000px; width: 100%;
max-height: 90vh; overflow-y: auto;
position: relative;
animation: slideUp 0.3s;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close {
position: absolute; top: 16px; right: 16px;
background: rgba(0,0,0,0.5);
border: 1px solid rgba(200,169,110,.3); color: #c8a96e;
width: 36px; height: 36px; border-radius: 50%;
font-size: 18px; cursor: pointer; z-index: 10;
}
.modal-inner { display: grid; grid-template-columns: 1fr 1fr; }
.modal-gallery { position: relative; background: #0a0a0a; min-height: 500px; }
.modal-gallery img { width: 100%; height: 100%; object-fit: cover; min-height: 500px; }
.modal-badges { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 8px; }
.modal-info { padding: 50px 40px; }
.modal-brand {
color: #c8a96e; font-size: 11px; letter-spacing: 3px;
text-transform: uppercase; margin-bottom: 8px;
}
.modal-name {
font-family: 'Playfair Display', serif;
font-size: 32px; color: #fff; font-weight: 500;
margin-bottom: 8px; line-height: 1.2;
}
.modal-ref {
color: #888; font-size: 12px; letter-spacing: 1.5px;
font-family: 'Inter', monospace; margin-bottom: 20px;
}
.modal-price {
font-family: 'Playfair Display', serif;
font-size: 32px; color: #c8a96e; font-weight: 600;
margin-bottom: 24px;
}
.modal-desc { color: #aaa; line-height: 1.8; font-size: 14px; margin-bottom: 24px; }
.modal-specs { border-top: 1px solid rgba(200,169,110,.15); padding-top: 20px; margin-bottom: 28px; }
.spec-row {
display: flex; justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
color: #aaa; font-size: 13px;
}
.spec-row span:first-child { color: #888; }
.spec-row span:last-child { color: #eee; }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.modal-actions .btn-gold { flex: 1; min-width: 180px; cursor: pointer; border: none; }
/* =============================================================
PRODUCT PAGE
============================================================= */
.product-page-wrap {
background: #0a0a0a;
padding: 60px 24px 100px;
min-height: 90vh;
}
.product-page-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px;
}
.product-page-gallery {
position: relative;
background: #111;
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
}
.product-page-gallery img {
width: 100%; height: 100%; object-fit: cover;
}
.product-page-badges {
position: absolute; top: 20px; left: 20px;
display: flex; flex-direction: column; gap: 8px;
}
.product-page-info { padding-top: 20px; }
.pp-back-link {
display: inline-flex; align-items: center; gap: 6px;
color: #888; font-size: 12px; letter-spacing: 1.5px;
text-decoration: none; text-transform: uppercase;
margin-bottom: 36px; transition: color 0.2s;
}
.pp-back-link:hover { color: #c8a96e; }
.pp-brand {
color: #c8a96e; font-size: 13px; letter-spacing: 3px;
text-transform: uppercase; margin-bottom: 10px;
}
.pp-name {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 3.5vw, 44px);
color: #fff; font-weight: 500;
line-height: 1.1; margin-bottom: 12px;
}
.pp-ref {
color: #888; font-size: 13px;
font-family: 'Inter', monospace; letter-spacing: 1.5px;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.pp-price {
font-family: 'Playfair Display', serif;
font-size: 40px; color: #c8a96e;
font-weight: 600; margin-bottom: 28px;
}
.pp-desc { color: #ccc; line-height: 1.9; font-size: 15px; margin-bottom: 32px; }
.pp-specs h4 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 16px; font-weight: 500;
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 14px;
}
.pp-specs { margin-bottom: 36px; }
.pp-add-cart {
display: block; width: 100%;
padding: 18px;
font-size: 12px; letter-spacing: 3px;
border: none; cursor: pointer;
margin-bottom: 28px;
}
.pp-trust-list {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px;
padding-top: 24px;
border-top: 1px solid rgba(200, 169, 110, 0.15);
}
.pp-trust {
display: flex; align-items: center; gap: 10px;
color: #aaa; font-size: 12px;
}
.pp-trust svg { color: #c8a96e; flex-shrink: 0; }
/* =============================================================
SEARCH PAGE & HEADER SEARCH
============================================================= */
.search-main { padding: 60px 24px 100px; background: #0a0a0a; min-height: 60vh; }
.search-container { max-width: 1280px; margin: 0 auto; }
.search-form-box {
display: flex; gap: 0;
max-width: 720px; margin: 0 auto 40px;
background: #111;
border: 1px solid rgba(200, 169, 110, 0.25);
}
.search-form-box input {
flex: 1; padding: 18px 24px;
background: transparent; border: none;
color: #fff; font-size: 15px; outline: none;
font-family: inherit;
}
.search-form-box input::placeholder { color: #666; }
.search-form-box button {
background: #c8a96e; color: #0a0a0a;
border: none; padding: 0 28px;
cursor: pointer; display: flex; align-items: center; gap: 8px;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
font-weight: 600;
}
.search-form-box button:hover { background: #b59558; }
.search-results-meta {
color: #aaa; text-align: center; margin-bottom: 32px; font-size: 14px;
}
.search-results-meta strong { color: #c8a96e; }
.search-results-meta em { color: #fff; font-style: normal; }
/* Header search bar */
.header-search-bar {
position: absolute; top: 100%; left: 0; right: 0;
background: #111;
border-bottom: 1px solid rgba(200, 169, 110, 0.2);
display: none; padding: 16px 24px;
z-index: 999;
}
.header-search-bar.open { display: block; animation: slideDown 0.2s; }
@keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.search-bar-inner {
max-width: 720px; margin: 0 auto;
display: flex; gap: 8px; align-items: center;
background: #0a0a0a; border: 1px solid rgba(200, 169, 110, 0.25);
}
.search-bar-inner input {
flex: 1; padding: 14px 18px;
background: transparent; border: none;
color: #fff; font-size: 14px; outline: none; font-family: inherit;
}
.search-bar-inner button {
background: transparent; border: none; cursor: pointer;
color: #c8a96e; padding: 14px 16px;
}
.search-bar-inner button:hover { color: #fff; }
.search-suggestions {
max-width: 720px; margin: 8px auto 0;
background: #0a0a0a;
border: 1px solid rgba(200, 169, 110, 0.15);
max-height: 420px; overflow-y: auto;
display: none;
}
.search-suggestions.show { display: block; }
.sug-item {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px;
text-decoration: none; color: inherit;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.2s;
}
.sug-item:hover { background: rgba(200, 169, 110, 0.08); }
.sug-item img { width: 50px; height: 50px; object-fit: cover; flex-shrink: 0; }
.sug-item > div { flex: 1; min-width: 0; }
.sug-brand { color: #c8a96e; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.sug-name { color: #fff; font-size: 13px; margin-top: 2px; }
.sug-ref { color: #666; font-size: 11px; margin-top: 2px; font-family: monospace; }
.sug-price { color: #c8a96e; font-weight: 600; font-size: 14px; }
.sug-none { padding: 20px; color: #888; text-align: center; font-size: 13px; }
/* =============================================================
CART PAGE
============================================================= */
.cart-main-section { padding: 60px 24px 100px; background: #0a0a0a; min-height: 60vh; }
.cart-container { max-width: 1280px; margin: 0 auto; }
.cart-empty {
flex-direction: column; align-items: center; justify-content: center;
padding: 80px 20px; text-align: center;
background: #111; border: 1px solid rgba(200, 169, 110, 0.1);
}
.cart-empty svg { color: #c8a96e; opacity: 0.4; margin-bottom: 24px; }
.cart-empty h2 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 26px; font-weight: 500; margin-bottom: 12px;
}
.cart-empty p { color: #888; margin-bottom: 28px; }
.cart-content {
display: grid; grid-template-columns: 1fr 380px; gap: 40px;
}
.cart-table-head {
display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr 40px;
gap: 16px; padding: 14px 16px;
background: #111;
color: #c8a96e; font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.cart-items-list { background: #0f0f0f; }
.cart-item {
display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr 40px;
gap: 16px; padding: 24px 16px;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cart-item-product { display: flex; align-items: center; gap: 16px; }
.cart-item-product img { width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.cart-item-brand { color: #c8a96e; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.cart-item-name { color: #fff; font-size: 14px; margin: 4px 0; font-family: 'Playfair Display', serif; }
.cart-item-ref { color: #666; font-size: 11px; font-family: monospace; }
.cart-item-price { color: #ccc; }
.cart-item-qty {
display: flex; align-items: center; gap: 10px;
}
.qty-btn {
width: 28px; height: 28px;
background: #111; border: 1px solid rgba(200, 169, 110, 0.3);
color: #c8a96e; cursor: pointer; font-size: 16px;
display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: #c8a96e; color: #0a0a0a; }
.cart-item-qty span { min-width: 24px; text-align: center; color: #fff; }
.cart-item-total { color: #c8a96e; font-weight: 600; font-size: 16px; }
.cart-item-remove {
background: transparent; border: none; cursor: pointer;
color: #666; padding: 6px;
}
.cart-item-remove:hover { color: #c8a96e; }
.cart-actions-row {
display: flex; justify-content: space-between; align-items: center;
padding: 24px 16px;
background: #111;
border-top: 1px solid rgba(200, 169, 110, 0.1);
}
.cart-continue-link {
display: flex; align-items: center; gap: 8px;
color: #aaa; font-size: 12px; letter-spacing: 1.5px;
text-transform: uppercase; text-decoration: none;
}
.cart-continue-link:hover { color: #c8a96e; }
.cart-clear-btn {
background: transparent; border: 1px solid rgba(255, 100, 100, 0.3);
color: #d77;
padding: 10px 20px; cursor: pointer;
font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.cart-clear-btn:hover { background: rgba(255,100,100,0.1); }
.cart-summary {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.15);
padding: 32px 28px;
position: sticky; top: 100px;
}
.cart-summary h3 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 20px; font-weight: 500;
padding-bottom: 16px; margin-bottom: 20px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.cart-sum-row {
display: flex; justify-content: space-between; padding: 10px 0;
color: #aaa; font-size: 14px;
}
.cart-sum-row--total {
border-top: 1px solid rgba(200, 169, 110, 0.15);
margin-top: 12px; padding-top: 16px;
color: #fff; font-size: 18px; font-weight: 600;
}
.cart-sum-row--total span:last-child {
color: #c8a96e;
font-family: 'Playfair Display', serif;
font-size: 22px;
}
.cart-checkout-btn {
display: block; width: 100%;
padding: 18px; margin-top: 24px;
text-align: center; font-size: 12px; letter-spacing: 2.5px;
text-decoration: none;
}
.cart-trust-icons {
display: flex; flex-direction: column; gap: 8px;
margin-top: 20px; padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.cart-trust {
display: flex; align-items: center; gap: 8px;
color: #888; font-size: 12px;
}
.cart-trust svg { color: #c8a96e; flex-shrink: 0; }
/* =============================================================
CHECKOUT PAGE
============================================================= */
.checkout-page-wrap { background: #0a0a0a; min-height: 100vh; }
.checkout-top {
background: #111;
border-bottom: 1px solid rgba(200, 169, 110, 0.1);
padding: 24px;
}
.checkout-top-inner {
max-width: 1280px; margin: 0 auto;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 20px;
}
.checkout-logo {
font-family: 'Playfair Display', serif; font-size: 24px;
text-decoration: none;
}
.checkout-logo .logo-time, .checkout-logo .logo-money { color: #fff; }
.checkout-logo .logo-is { color: #c8a96e; font-style: italic; }
.checkout-steps {
display: flex; align-items: center; gap: 12px;
color: #666; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.cstep { display: flex; align-items: center; gap: 8px; }
.cstep-num {
width: 26px; height: 26px; border-radius: 50%;
background: #1a1a1a; color: #666;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
}
.cstep.done .cstep-num { background: #c8a96e; color: #0a0a0a; }
.cstep.done { color: #aaa; }
.cstep.active .cstep-num { background: #c8a96e; color: #0a0a0a; }
.cstep.active { color: #c8a96e; }
.cstep-sep { color: #444; }
.checkout-main { padding: 60px 24px 100px; }
.checkout-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 420px;
gap: 40px; align-items: start;
}
.checkout-block {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.1);
padding: 28px;
margin-bottom: 24px;
}
.checkout-block-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 18px; margin-bottom: 22px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
.checkout-block-head h2 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 19px; font-weight: 500;
}
.ck-secure-tag {
display: inline-flex; align-items: center; gap: 6px;
color: #c8a96e; font-size: 11px; letter-spacing: 1px;
}
.form-row { display: flex; gap: 16px; }
.form-row--2 > .form-field { flex: 1; }
.form-row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; }
.form-field label {
display: block;
color: #aaa; font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase; margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%; padding: 12px 14px;
background: #0a0a0a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff; font-size: 14px; font-family: inherit;
outline: none; transition: border 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: #c8a96e; }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field .field-error { border-color: #d77 !important; }
.form-check {
display: flex; align-items: center; gap: 10px;
color: #aaa; font-size: 13px; cursor: pointer;
padding: 6px 0;
}
.form-check input {
appearance: none; width: 16px; height: 16px;
border: 1px solid rgba(200, 169, 110, 0.4); background: transparent;
cursor: pointer; flex-shrink: 0; position: relative;
}
.form-check input:checked { background: #c8a96e; border-color: #c8a96e; }
.form-check input:checked:after {
content: '✓'; color: #0a0a0a; font-size: 12px;
position: absolute; top: -2px; left: 2px;
}
.terms-check { margin: 16px 0 24px; }
.pay-methods { display: flex; flex-direction: column; gap: 12px; }
.pay-method {
display: block; cursor: pointer;
background: #0a0a0a;
border: 1px solid rgba(200, 169, 110, 0.15);
transition: border 0.25s;
}
.pay-method:hover { border-color: rgba(200, 169, 110, 0.4); }
.pay-method.active { border-color: #c8a96e; }
.pay-method input[type=radio] { display: none; }
.pay-method-head {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 20px; color: #fff;
font-size: 14px; letter-spacing: 0.5px;
position: relative; padding-left: 50px;
}
.pay-method-head:before {
content: ''; position: absolute; left: 20px; top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(200, 169, 110, 0.4);
}
.pay-method.active .pay-method-head:before {
border-color: #c8a96e;
box-shadow: inset 0 0 0 4px #c8a96e;
}
.pay-logos { display: flex; gap: 8px; }
.pay-logo {
background: #1a1a1a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #ccc; font-size: 10px; font-weight: 600;
padding: 4px 8px; letter-spacing: 0.5px;
font-family: 'Inter', sans-serif;
}
.pay-method-body {
padding: 20px;
border-top: 1px solid rgba(200, 169, 110, 0.1);
display: none;
}
.pay-method.active .pay-method-body { display: block; }
.pay-method-body p { color: #aaa; font-size: 13px; line-height: 1.7; margin: 0; }
.checkout-submit-btn {
display: block; width: 100%;
padding: 20px; margin-top: 8px;
font-size: 13px; letter-spacing: 2.5px;
border: none; cursor: pointer;
}
.checkout-success {
flex-direction: column; align-items: center; text-align: center;
padding: 60px 24px; display: flex;
}
.checkout-success svg { color: #4caf50; margin-bottom: 20px; }
.checkout-success h3 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 24px; font-weight: 500;
margin-bottom: 12px;
}
.checkout-success p { color: #aaa; line-height: 1.7; margin-bottom: 28px; max-width: 480px; }
.checkout-summary {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.15);
padding: 28px;
position: sticky; top: 20px;
}
.checkout-summary h3 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 18px; font-weight: 500;
padding-bottom: 14px; margin-bottom: 18px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.ck-summary-items {
display: flex; flex-direction: column; gap: 12px;
padding-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid rgba(200, 169, 110, 0.1);
}
.ck-sum-item {
display: flex; align-items: center; gap: 12px;
}
.ck-sum-item img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.ck-sum-info { flex: 1; min-width: 0; }
.ck-sum-brand { color: #c8a96e; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.ck-sum-name { color: #fff; font-size: 13px; margin: 3px 0; font-family: 'Playfair Display', serif; }
.ck-sum-qty { color: #888; font-size: 11px; }
.ck-sum-price { color: #c8a96e; font-weight: 600; font-size: 14px; }
.ck-sum-row {
display: flex; justify-content: space-between;
padding: 6px 0; color: #aaa; font-size: 13px;
}
.ck-sum-row--total {
border-top: 1px solid rgba(200, 169, 110, 0.15);
margin-top: 10px; padding-top: 14px;
color: #fff; font-size: 17px; font-weight: 600;
}
.ck-sum-row--total span:last-child {
color: #c8a96e;
font-family: 'Playfair Display', serif;
font-size: 22px;
}
.ck-trust-block {
display: flex; flex-direction: column; gap: 8px;
margin-top: 20px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* =============================================================
CONTACT PAGE
============================================================= */
.contact-page-wrap { background: #0a0a0a; }
.contact-main-section { padding: 100px 24px; }
.contact-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;
align-items: start;
}
.contact-description h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 3.5vw, 42px);
color: #fff; font-weight: 500;
line-height: 1.2; margin: 12px 0 8px;
}
.contact-description h2 em { font-style: italic; color: #c8a96e; }
.contact-description p { color: #aaa; line-height: 1.85; margin: 18px 0; font-size: 15px; }
.contact-trust-points {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
margin: 32px 0;
}
.trust-point {
display: flex; align-items: center; gap: 10px;
color: #ccc; font-size: 13px;
}
.trust-point svg { color: #c8a96e; flex-shrink: 0; }
.contact-details-block {
margin-top: 40px; padding-top: 36px;
border-top: 1px solid rgba(200, 169, 110, 0.15);
display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
.contact-detail-item {
display: flex; align-items: flex-start; gap: 14px;
}
.contact-detail-icon {
width: 42px; height: 42px;
border: 1px solid rgba(200, 169, 110, 0.3);
display: flex; align-items: center; justify-content: center;
color: #c8a96e; flex-shrink: 0;
}
.contact-detail-label {
color: #c8a96e; font-size: 10px; letter-spacing: 2px;
text-transform: uppercase; margin-bottom: 4px;
}
.contact-detail-value { color: #fff; font-size: 14px; line-height: 1.5; }
.contact-detail-value a { color: #fff; text-decoration: none; }
.contact-detail-value a:hover { color: #c8a96e; }
.contact-form-wrap {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.15);
padding: 40px 36px;
position: sticky; top: 100px;
}
.contact-form-header { padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid rgba(200, 169, 110, 0.15); }
.contact-form-header h3 {
font-family: 'Playfair Display', serif;
color: #fff; font-size: 24px; font-weight: 500; margin-bottom: 8px;
}
.contact-form-header p { color: #888; font-size: 13px; }
.form-submit-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 30px;
border: none; cursor: pointer; margin-top: 8px;
}
.form-success {
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.3);
color: #8c8;
padding: 16px 20px;
margin-top: 16px;
font-size: 14px;
}
/* =============================================================
CART TOAST
============================================================= */
.cart-toast {
position: fixed; bottom: 30px; right: 30px;
background: #111;
border: 1px solid #c8a96e;
padding: 18px 24px;
color: #fff;
display: flex; align-items: center; gap: 14px;
min-width: 280px; max-width: 360px;
z-index: 10000;
transform: translateX(120%); opacity: 0;
transition: transform 0.4s, opacity 0.4s;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.cart-toast.show { transform: translateX(0); opacity: 1; }
.cart-toast svg { color: #4caf50; flex-shrink: 0; }
.cart-toast strong { color: #c8a96e; font-family: 'Playfair Display', serif; font-size: 15px; }
.cart-toast span { font-size: 13px; line-height: 1.4; color: #ccc; }
/* Cart badge has-items animation */
.cart-count.has-items {
background: #c8a96e !important;
color: #0a0a0a !important;
}
/* =============================================================
MOBILE SWITCHERS (in mobile menu)
============================================================= */
.mobile-switchers {
padding: 24px;
border-top: 1px solid rgba(200,169,110,0.1);
margin-top: auto;
}
.mobile-lang-row {
display: flex; align-items: center; gap: 14px;
color: #888; font-size: 13px;
margin-bottom: 12px;
}
.mobile-lang-btn, .mobile-curr-btn {
background: transparent; border: 1px solid rgba(200, 169, 110, 0.3);
color: #c8a96e; padding: 6px 14px;
font-size: 11px; letter-spacing: 1.5px; cursor: pointer;
}
/* =============================================================
RESPONSIVE
============================================================= */
@media (max-width: 1100px) {
.watches-layout { grid-template-columns: 1fr; }
.watches-sidebar { position: relative; top: auto; max-height: none; display: none; }
.watches-sidebar.open { display: block; }
.mobile-filter-btn { display: inline-flex; }
.filter-apply-btn { display: block; }
.watches-grid { grid-template-columns: repeat(2, 1fr); }
.checkout-grid { grid-template-columns: 1fr; }
.checkout-summary { position: relative; top: auto; }
}
@media (max-width: 900px) {
.about-intro-grid, .about-exp-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
.values-grid { grid-template-columns: repeat(2, 1fr); }
.product-page-grid { grid-template-columns: 1fr; gap: 40px; }
.modal-inner { grid-template-columns: 1fr; }
.modal-gallery { min-height: 350px; }
.modal-gallery img { min-height: 350px; }
.cart-content { grid-template-columns: 1fr; }
.cart-table-head { display: none; }
.cart-item { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 12px; }
.cart-item-product { grid-column: 1 / -1; }
.pp-trust-list { grid-template-columns: 1fr; }
.contact-details-block { grid-template-columns: 1fr; }
.about-stats-inner .astat-divider { display: none; }
.astat { flex: 1 0 45%; }
.checkout-steps { font-size: 10px; gap: 6px; }
.contact-form-wrap { position: relative; top: auto; }
}
@media (max-width: 600px) {
.watches-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
.about-intro-text h2, .contact-description h2, .about-exp-text h2 { font-size: 28px; }
.form-row--3 { grid-template-columns: 1fr; }
.form-row--2 { flex-direction: column; }
.modal-info { padding: 30px 24px; }
.contact-form-wrap { padding: 28px 20px; }
.checkout-block { padding: 20px; }
.about-cta-btns { flex-direction: column; }
.about-cta-btns a { width: 100%; text-align: center; }
.cart-toast { left: 16px; right: 16px; min-width: 0; }
}
/* ===============================================================
NOBLE WATCH LOGO (snippet)
=============================================================== */
.nw-logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.nw-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nw-mark svg {
width: 38px;
height: 38px;
display: block;
filter: drop-shadow(0 2px 6px rgba(200, 169, 110, 0.25));
transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.nw-logo:hover .nw-mark svg {
transform: rotate(18deg);
}
.nw-word {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: 1.5px;
}
.nw-noble {
font-weight: 600;
font-size: 22px;
background: linear-gradient(180deg, #efd9a8 0%, #c8a96e 60%, #8d6f3a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nw-sep {
color: #c8a96e;
font-size: 16px;
opacity: 0.45;
margin-top: -2px;
}
.nw-watch {
font-style: italic;
font-weight: 400;
font-size: 20px;
color: #e8d8b3;
letter-spacing: 2px;
}
/* Variants */
.nw-logo--small .nw-mark svg { width: 30px; height: 30px; }
.nw-logo--small .nw-noble { font-size: 17px; }
.nw-logo--small .nw-watch { font-size: 15px; }
.nw-logo--small .nw-word { gap: 6px; }
.nw-logo--large .nw-mark svg { width: 56px; height: 56px; }
.nw-logo--large .nw-noble { font-size: 32px; letter-spacing: 2px; }
.nw-logo--large .nw-watch { font-size: 28px; }
.nw-logo--large .nw-word { gap: 12px; }
.nw-logo--white .nw-noble {
background: linear-gradient(180deg, #fff 0%, #ddd 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nw-logo--white .nw-watch { color: #fff; }
/* Logo entrance animation */
@keyframes nwShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.site-logo .nw-noble {
background: linear-gradient(90deg, #c8a96e 0%, #efd9a8 50%, #c8a96e 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: nwShimmer 6s linear infinite;
}
/* ===============================================================
HEADER — refined layout (no email, tighter alignment)
=============================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background: rgba(10, 10, 10, 0.92);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
transition: padding 0.3s, background 0.3s;
}
.site-header.scrolled {
background: rgba(10, 10, 10, 0.98);
border-bottom-color: rgba(200, 169, 110, 0.22);
}
.header-inner {
max-width: 1440px;
margin: 0 auto;
padding: 18px 32px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 30px;
transition: padding 0.3s;
}
.site-header.scrolled .header-inner { padding: 12px 32px; }
.site-logo {
justify-self: start;
text-decoration: none;
}
.main-nav {
justify-self: center;
display: flex;
align-items: center;
gap: 8px;
}
.main-nav .nav-link {
position: relative;
display: inline-block;
padding: 10px 22px;
color: #d8d8d8;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s;
}
.main-nav .nav-link span {
position: relative;
display: inline-block;
}
.main-nav .nav-link span::before,
.main-nav .nav-link span::after {
content: '';
position: absolute;
bottom: -6px;
width: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
transition: width 0.4s cubic-bezier(.16,1,.3,1);
}
.main-nav .nav-link span::before { left: 50%; }
.main-nav .nav-link span::after { right: 50%; }
.main-nav .nav-link:hover { color: #c8a96e; }
.main-nav .nav-link:hover span::before,
.main-nav .nav-link:hover span::after { width: 50%; }
.header-actions {
justify-self: end;
display: flex;
align-items: center;
gap: 14px;
}
.header-icons {
display: flex;
align-items: center;
gap: 6px;
padding-left: 6px;
margin-left: 6px;
border-left: 1px solid rgba(200, 169, 110, 0.18);
}
.header-icon {
position: relative;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #d8d8d8;
text-decoration: none;
border-radius: 50%;
transition: all 0.3s;
}
.header-icon:hover {
color: #c8a96e;
background: rgba(200, 169, 110, 0.08);
}
.cart-icon .cart-count {
position: absolute;
top: 2px;
right: 2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: #444;
color: #fff;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
transition: all 0.3s;
}
.cart-icon .cart-count.has-items {
background: #c8a96e !important;
color: #0a0a0a !important;
animation: cartPulse 0.6s ease-out;
}
@keyframes cartPulse {
0% { transform: scale(1); }
35% { transform: scale(1.45); }
60% { transform: scale(0.92); }
100% { transform: scale(1); }
}
/* Hide old header-contact / email-in-header if it sneaks through */
.header-contact { display: none !important; }
/* Mobile menu logo */
.mobile-menu-logo {
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(200, 169, 110, 0.1);
margin-bottom: 20px;
display: flex;
justify-content: center;
}
/* ===============================================================
GLOBAL ANIMATIONS
=============================================================== */
/* Smooth fade-up reveal */
.reveal-item {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
transition-delay: var(--delay, 0s);
}
.reveal-item.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Slide in from left */
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
transition-delay: var(--delay, 0s);
}
.reveal-left.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Scale-in for cards */
.reveal-scale {
opacity: 0;
transform: scale(0.94);
transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(.16,1,.3,1);
transition-delay: var(--delay, 0s);
}
.reveal-scale.is-visible {
opacity: 1;
transform: scale(1);
}
/* Image elegant reveal with clip */
.reveal-clip {
clip-path: inset(0 100% 0 0);
transition: clip-path 1.2s cubic-bezier(.65,.05,.36,1);
transition-delay: var(--delay, 0s);
}
.reveal-clip.is-visible { clip-path: inset(0 0 0 0); }
/* Soft floating loop for hero badges/images */
@keyframes nwFloat {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-12px) rotate(0.5deg); }
}
.animate-float { animation: nwFloat 5.5s ease-in-out infinite; }
/* Slow shimmer on golden text headlines */
.shimmer-gold {
background: linear-gradient(90deg, #c8a96e 0%, #f3e2b7 50%, #c8a96e 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: nwShimmer 6s linear infinite;
}
/* Product card hover lift */
.product-card,
.watch-card {
transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s;
}
.product-card:hover,
.watch-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px -20px rgba(200, 169, 110, 0.25);
}
.product-img {
transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter 0.6s;
}
.product-card:hover .product-img,
.watch-card:hover .product-img {
transform: scale(1.07);
filter: brightness(1.06);
}
.product-overlay {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s, transform 0.5s;
}
.product-card:hover .product-overlay,
.watch-card:hover .product-overlay {
opacity: 1;
transform: translateY(0);
}
/* Buttons elegant hover */
.btn-gold,
.btn-outline-gold {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-gold::before,
.btn-outline-gold::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
transform: translateX(-150%);
transition: transform 0.7s cubic-bezier(.16,1,.3,1);
z-index: 1;
pointer-events: none;
}
.btn-gold:hover::before,
.btn-outline-gold:hover::before { transform: translateX(150%); }
/* Section eyebrow underline animation */
.section-eyebrow {
position: relative;
display: inline-block;
}
.section-eyebrow::after {
content: '';
display: inline-block;
width: 30px;
height: 1px;
background: #c8a96e;
vertical-align: middle;
margin-left: 12px;
transform-origin: left;
animation: nwLineGrow 1.2s cubic-bezier(.16,1,.3,1);
}
@keyframes nwLineGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Page hero parallax-ish zoom */
.page-hero-bg,
.watches-hero-bg {
transform: scale(1.08);
animation: nwHeroZoom 12s ease-out forwards;
}
@keyframes nwHeroZoom {
to { transform: scale(1); }
}
/* Title em color soft pulse */
.page-hero-content h1 em,
.about-intro-text h2 em,
.about-exp-text h2 em,
.contact-description h2 em,
.watches-hero-content h1 em {
background: linear-gradient(90deg, #c8a96e 0%, #f3e2b7 50%, #c8a96e 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: nwShimmer 7s linear infinite;
}
/* Counter pulse during count-up */
.astat-num.counting,
.stat-number.counting {
animation: nwCount 0.4s ease-out;
}
@keyframes nwCount {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
/* Cart icon pulse when items present (subtle, on header load) */
@keyframes nwSubtle {
0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0); }
50% { box-shadow: 0 0 0 6px rgba(200, 169, 110, 0.2); }
}
/* Page transitions on load */
main#main-content {
animation: nwPageIn 0.7s cubic-bezier(.16,1,.3,1);
}
@keyframes nwPageIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Smooth scroll for whole site */
html { scroll-behavior: smooth; }
/* ===============================================================
HEADER RESPONSIVE OVERRIDES
=============================================================== */
@media (max-width: 980px) {
.header-inner { grid-template-columns: auto 1fr auto; padding: 14px 20px; }
.main-nav { display: none; }
.lang-selector, .currency-selector { display: none; }
.header-actions { gap: 6px; }
.header-icons { border-left: none; padding-left: 0; margin-left: 0; }
}
@media (max-width: 480px) {
.nw-noble { font-size: 18px; }
.nw-watch { font-size: 16px; }
.nw-mark svg { width: 32px; height: 32px; }
}
/* ===============================================================
RICH PAGE (Terms, Privacy, Shipping, FAQ etc.)
=============================================================== */
.rich-page-wrap { background: #0a0a0a; min-height: 70vh; }
.rich-page-content {
padding: 80px 24px 120px;
}
.rich-page-inner {
max-width: 820px;
margin: 0 auto;
color: #ccc;
}
.rich-h2 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: clamp(24px, 3vw, 32px);
font-weight: 500;
margin: 48px 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(200, 169, 110, 0.18);
}
.rich-h2:first-child { margin-top: 0; }
.rich-h3 {
font-family: 'Playfair Display', serif;
color: #c8a96e;
font-size: 20px;
font-weight: 500;
margin: 32px 0 12px;
}
.rich-p {
font-size: 15px;
line-height: 1.85;
margin-bottom: 16px;
}
.rich-p p { margin-bottom: 14px; }
.rich-p ul, .rich-p ol { padding-left: 22px; margin: 12px 0; }
.rich-p li { margin-bottom: 8px; }
.rich-p a { color: #c8a96e; text-decoration: underline; }
.rich-p strong { color: #fff; }
.rich-divider {
height: 1px;
background: rgba(200, 169, 110, 0.15);
margin: 36px 0;
}
.rich-callout {
background: linear-gradient(135deg, rgba(200, 169, 110, 0.07), rgba(200, 169, 110, 0.02));
border-left: 3px solid #c8a96e;
padding: 22px 26px;
margin: 28px 0;
}
.rich-callout h4 {
font-family: 'Playfair Display', serif;
color: #c8a96e;
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
letter-spacing: 0.5px;
}
.contact-rich-text p { margin-bottom: 14px; color: #aaa; line-height: 1.85; }
/* ===============================================================
LIVE CHAT WIDGET
=============================================================== */
.nw-chat-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9998;
font-family: 'Inter', sans-serif;
width: 60px;
}
.nw-chat-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #d8b87a 0%, #c8a96e 50%, #8d6f3a 100%);
border: none;
color: #0a0a0a;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 32px rgba(200, 169, 110, 0.4), 0 2px 8px rgba(0,0,0,0.3);
transition: all 0.4s cubic-bezier(.16,1,.3,1);
position: relative;
animation: nwChatPulse 3s ease-in-out infinite;
}
@keyframes nwChatPulse {
0%, 100% { box-shadow: 0 10px 32px rgba(200, 169, 110, 0.4), 0 0 0 0 rgba(200, 169, 110, 0.35); }
50% { box-shadow: 0 10px 32px rgba(200, 169, 110, 0.4), 0 0 0 14px rgba(200, 169, 110, 0); }
}
.nw-chat-toggle:hover {
transform: scale(1.08);
}
.nw-chat-toggle .nw-chat-icon-close { display: none; }
.nw-chat-widget.open .nw-chat-toggle { animation: none; transform: rotate(90deg); }
.nw-chat-widget.open .nw-chat-icon-open { display: none; }
.nw-chat-widget.open .nw-chat-icon-close { display: inline-flex; }
.nw-chat-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
background: #d33;
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #0a0a0a;
animation: nwChatPulse 1.5s ease-in-out infinite;
}
.nw-chat-panel {
position: absolute;
bottom: 78px;
right: 0;
width: 380px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 110px);
background: #111;
border: 1px solid rgba(200, 169, 110, 0.25);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
transform: translateY(20px) scale(0.96);
opacity: 0;
pointer-events: none;
transition: all 0.35s cubic-bezier(.16,1,.3,1);
}
.nw-chat-widget.open .nw-chat-panel {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.nw-chat-header {
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
padding: 18px 18px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
}
.nw-chat-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.nw-chat-avatar {
width: 42px;
height: 42px;
position: relative;
flex-shrink: 0;
}
.nw-chat-avatar svg { width: 100%; height: 100%; border-radius: 50%; }
.nw-chat-status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: #4caf50;
border: 2px solid #0f0f0f;
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
animation: nwStatus 2s ease-out infinite;
}
@keyframes nwStatus {
0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
60% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}
.nw-chat-title {
color: #fff;
font-family: 'Playfair Display', serif;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
}
.nw-chat-subtitle {
color: #888;
font-size: 11px;
margin-top: 3px;
letter-spacing: 0.3px;
}
.nw-chat-status-text { color: #8c8; }
.nw-chat-min {
background: transparent;
border: none;
color: #888;
cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nw-chat-min:hover { background: rgba(255,255,255,0.06); color: #c8a96e; }
.nw-chat-body {
flex: 1;
overflow-y: auto;
padding: 20px 18px;
}
.nw-chat-body::-webkit-scrollbar { width: 6px; }
.nw-chat-body::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.3); border-radius: 3px; }
.nw-chat-welcome h3 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
}
.nw-chat-welcome p {
color: #aaa;
font-size: 13px;
line-height: 1.6;
margin-bottom: 18px;
}
.nw-chat-form { display: flex; flex-direction: column; gap: 12px; }
.nw-chat-field label {
display: block;
color: #c8a96e;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 5px;
}
.nw-chat-field input,
.nw-chat-field select,
.nw-chat-field textarea {
width: 100%;
padding: 10px 12px;
background: #0a0a0a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
font-size: 13px;
font-family: inherit;
outline: none;
border-radius: 6px;
transition: border-color 0.2s;
}
.nw-chat-field input:focus,
.nw-chat-field select:focus,
.nw-chat-field textarea:focus { border-color: #c8a96e; }
.nw-chat-field textarea { resize: vertical; min-height: 70px; }
.nw-chat-submit {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #d8b87a 0%, #c8a96e 100%);
color: #0a0a0a;
border: none;
cursor: pointer;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 4px;
}
.nw-chat-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(200, 169, 110, 0.35);
}
.nw-chat-quick { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); }
.nw-chat-quick-label {
color: #888;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}
.nw-chat-quick-btn {
display: block;
width: 100%;
text-align: left;
background: rgba(200, 169, 110, 0.06);
border: 1px solid rgba(200, 169, 110, 0.18);
color: #ddd;
padding: 10px 14px;
margin-bottom: 6px;
font-size: 12.5px;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
font-family: inherit;
}
.nw-chat-quick-btn:hover {
background: rgba(200, 169, 110, 0.12);
border-color: rgba(200, 169, 110, 0.45);
color: #c8a96e;
transform: translateX(2px);
}
/* Conversation view */
.nw-chat-conversation { display: flex; flex-direction: column; gap: 0; padding-bottom: 8px; }
.nw-chat-ticket-info {
background: rgba(200, 169, 110, 0.08);
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 14px;
font-size: 11px;
}
.nw-ticket-id { color: #c8a96e; letter-spacing: 0.5px; }
.nw-ticket-id strong { font-weight: 600; }
.nw-ticket-meta { color: #888; margin-top: 2px; }
.nw-chat-messages { display: flex; flex-direction: column; gap: 14px; }
.nw-msg {
max-width: 85%;
border-radius: 12px;
padding: 10px 13px;
font-size: 13px;
line-height: 1.5;
animation: nwMsgIn 0.3s ease-out;
}
@keyframes nwMsgIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.nw-msg-meta {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 10px;
margin-bottom: 4px;
opacity: 0.75;
}
.nw-msg--me {
align-self: flex-end;
background: linear-gradient(135deg, #c8a96e 0%, #b59558 100%);
color: #0a0a0a;
border-bottom-right-radius: 3px;
}
.nw-msg--bot, .nw-msg--admin {
align-self: flex-start;
background: #1a1a1a;
color: #e8e8e8;
border: 1px solid rgba(200, 169, 110, 0.15);
border-bottom-left-radius: 3px;
}
.nw-msg--admin {
border-color: rgba(76, 175, 80, 0.3);
}
.nw-msg--admin .nw-msg-meta { color: #8c8; }
.nw-chat-reply-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
background: #0d0d0d;
border-top: 1px solid rgba(200, 169, 110, 0.15);
}
.nw-chat-reply-bar input {
flex: 1;
background: #1a1a1a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
padding: 9px 12px;
border-radius: 20px;
font-size: 13px;
outline: none;
font-family: inherit;
}
.nw-chat-reply-bar input:focus { border-color: #c8a96e; }
.nw-chat-reply-bar button {
width: 36px;
height: 36px;
border-radius: 50%;
background: #c8a96e;
color: #0a0a0a;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.nw-chat-reply-bar button:hover { background: #d8b87a; }
.nw-chat-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px 10px;
font-size: 10px;
color: #555;
background: #0a0a0a;
border-top: 1px solid rgba(255,255,255,0.04);
}
.nw-chat-new {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid rgba(200, 169, 110, 0.25);
color: #c8a96e;
padding: 4px 10px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 12px;
cursor: pointer;
}
.nw-chat-new:hover { background: rgba(200, 169, 110, 0.1); }
.nw-chat-powered { letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 480px) {
.nw-chat-widget { bottom: 16px; right: 16px; }
.nw-chat-panel { width: calc(100vw - 32px); right: 0; max-height: calc(100vh - 100px); }
}
/* ===============================================================
ADMIN DASHBOARD
=============================================================== */
.admin-support-wrap { background: #0a0a0a; min-height: 100vh; }
.admin-support-main { padding: 60px 24px 100px; }
.admin-login {
max-width: 460px;
margin: 0 auto;
background: transparent;
border: none;
padding: 0;
}
.admin-login-inner { text-align: center; }
.admin-login-icon { color: #c8a96e; margin-bottom: 16px; display: flex; justify-content: center; }
.admin-login h2 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 26px;
font-weight: 500;
margin-bottom: 8px;
}
.admin-login p { color: #aaa; margin-bottom: 28px; font-size: 14px; }
.admin-login .form-field { text-align: left; margin-bottom: 16px; }
.admin-login-error {
background: rgba(220, 60, 60, 0.1);
border: 1px solid rgba(220, 60, 60, 0.3);
color: #f88;
padding: 10px 14px;
margin-top: 14px;
font-size: 12px;
border-radius: 4px;
}
.admin-login-hint { margin-top: 24px; color: #555; }
.admin-login-hint small { font-size: 11px; }
.admin-dashboard { max-width: 1440px; margin: 0 auto; }
.admin-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.admin-stat {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.15);
padding: 22px 24px;
border-radius: 4px;
}
.admin-stat-label {
color: #888;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.admin-stat-value {
font-family: 'Playfair Display', serif;
font-size: 36px;
color: #fff;
font-weight: 500;
}
.admin-stat-value--gold { color: #c8a96e; }
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.admin-filters { display: flex; gap: 4px; background: #111; padding: 4px; border-radius: 6px; border: 1px solid rgba(200, 169, 110, 0.1); }
.admin-filter-btn {
background: transparent;
border: none;
color: #aaa;
padding: 7px 16px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
font-family: inherit;
}
.admin-filter-btn:hover { color: #fff; }
.admin-filter-btn.active { background: #c8a96e; color: #0a0a0a; }
.admin-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-actions input {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
padding: 8px 14px;
font-size: 12px;
border-radius: 4px;
outline: none;
min-width: 240px;
font-family: inherit;
}
.admin-actions input:focus { border-color: #c8a96e; }
.admin-action-btn {
background: #111;
border: 1px solid rgba(200, 169, 110, 0.25);
color: #c8a96e;
padding: 8px 14px;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.admin-action-btn:hover { background: rgba(200, 169, 110, 0.1); }
.admin-action-btn--danger { color: #e88; border-color: rgba(220, 100, 100, 0.3); }
.admin-action-btn--danger:hover { background: rgba(220, 100, 100, 0.1); }
.admin-layout {
display: grid;
grid-template-columns: 360px 1fr;
gap: 20px;
background: #0d0d0d;
border: 1px solid rgba(200, 169, 110, 0.1);
border-radius: 6px;
overflow: hidden;
min-height: 600px;
}
.admin-ticket-list {
background: #111;
border-right: 1px solid rgba(200, 169, 110, 0.1);
overflow-y: auto;
max-height: 700px;
}
.admin-ticket-list::-webkit-scrollbar { width: 6px; }
.admin-ticket-list::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.3); border-radius: 3px; }
.admin-empty {
padding: 60px 24px;
text-align: center;
color: #555;
font-size: 14px;
}
.admin-ticket-row {
padding: 16px 18px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.2s;
position: relative;
}
.admin-ticket-row:hover { background: rgba(200, 169, 110, 0.05); }
.admin-ticket-row.active {
background: rgba(200, 169, 110, 0.12);
border-left: 3px solid #c8a96e;
}
.admin-ticket-row.has-unread::before {
content: '';
position: absolute;
top: 18px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #c8a96e;
box-shadow: 0 0 8px rgba(200, 169, 110, 0.5);
}
.admin-ticket-row-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.admin-ticket-name { color: #fff; font-weight: 500; font-size: 14px; }
.admin-ticket-status {
font-size: 9px;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.admin-ticket-status--open { background: rgba(200, 169, 110, 0.18); color: #c8a96e; }
.admin-ticket-status--resolved { background: rgba(76, 175, 80, 0.15); color: #8c8; }
.admin-ticket-row-id { color: #888; font-size: 11px; letter-spacing: 0.5px; font-family: monospace; margin-bottom: 6px; }
.admin-ticket-row-preview { color: #aaa; font-size: 12px; line-height: 1.5; }
.admin-ticket-row-time { color: #555; font-size: 10px; margin-top: 6px; }
.admin-ticket-detail {
padding: 28px 32px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.admin-pick-prompt {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #555;
text-align: center;
}
.admin-pick-prompt svg { margin-bottom: 16px; }
.admin-detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 18px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
margin-bottom: 18px;
flex-wrap: wrap;
gap: 14px;
}
.admin-detail-header h2 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 22px;
font-weight: 500;
margin-bottom: 4px;
}
.admin-detail-id { color: #c8a96e; font-family: monospace; font-size: 16px; }
.admin-detail-meta {
color: #888;
font-size: 12px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.admin-detail-actions { display: flex; gap: 8px; }
.admin-detail-thread {
flex: 1;
overflow-y: auto;
background: #0a0a0a;
border-radius: 6px;
padding: 18px;
margin-bottom: 18px;
max-height: 420px;
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-detail-thread::-webkit-scrollbar { width: 6px; }
.admin-detail-thread::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.3); border-radius: 3px; }
.admin-msg {
max-width: 75%;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.6;
}
.admin-msg-meta {
display: flex;
justify-content: space-between;
gap: 14px;
font-size: 10px;
margin-bottom: 4px;
opacity: 0.7;
}
.admin-msg--user {
align-self: flex-start;
background: #1a1a1a;
color: #eee;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-msg--bot {
align-self: flex-start;
background: rgba(200, 169, 110, 0.08);
color: #ddd;
border: 1px dashed rgba(200, 169, 110, 0.3);
}
.admin-msg--admin {
align-self: flex-end;
background: linear-gradient(135deg, #c8a96e 0%, #b59558 100%);
color: #0a0a0a;
}
.admin-reply { display: flex; flex-direction: column; gap: 12px; }
.admin-reply textarea {
width: 100%;
background: #1a1a1a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
padding: 12px 14px;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
outline: none;
resize: vertical;
}
.admin-reply textarea:focus { border-color: #c8a96e; }
.admin-reply-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.admin-reply-actions select {
background: #1a1a1a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #ccc;
padding: 8px 12px;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
font-family: inherit;
}
.admin-reply-actions .btn-gold { padding: 10px 24px; font-size: 11px; }
@media (max-width: 980px) {
.admin-stats { grid-template-columns: repeat(2, 1fr); }
.admin-layout { grid-template-columns: 1fr; }
.admin-ticket-list { max-height: 320px; }
}
/* ===============================================================
FILTERS — refined look
=============================================================== */
.watches-sidebar {
background: linear-gradient(180deg, #131313 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.18);
border-radius: 12px;
padding: 28px 24px;
box-shadow: 0 12px 32px -16px rgba(0,0,0,0.6);
}
.sidebar-header h3 {
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 13px;
font-family: 'Inter', sans-serif;
}
.filter-label {
position: relative;
padding-bottom: 8px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(200, 169, 110, 0.1);
}
.filter-search-wrap input,
.filter-select,
.price-inputs input {
border-radius: 6px;
background: rgba(0,0,0,0.4);
padding: 11px 14px;
transition: all 0.25s;
}
.filter-search-wrap input:focus,
.filter-select:focus,
.price-inputs input:focus {
border-color: #c8a96e;
box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.1);
}
.filter-check {
padding: 6px 0;
border-radius: 4px;
transition: all 0.2s;
}
.filter-check:hover {
padding-left: 4px;
color: #c8a96e !important;
}
.filter-check input {
border-radius: 3px;
}
.filter-apply-btn {
border-radius: 6px;
font-weight: 600;
}
.mobile-filter-btn {
border-radius: 24px;
padding: 10px 22px;
}
/* ===============================================================
ROUNDED IMAGES THROUGHOUT THE SITE
=============================================================== */
.product-img-wrap,
.product-card .product-img-wrap,
.watch-card .product-img-wrap {
border-radius: 14px;
overflow: hidden;
}
.hero-watch-img,
.about-intro-img img,
.exp-img-main,
.exp-img-side,
.modal-gallery img,
.product-page-gallery,
.product-page-gallery img,
.cart-item-product img,
.ck-sum-item img,
.sug-item img {
border-radius: 12px;
}
.about-intro-img img { border-radius: 16px; }
.exp-img-main { border-radius: 16px; }
.exp-img-side { border-radius: 12px; }
.product-img {
border-radius: 14px;
}
.product-img-wrap {
position: relative;
}
/* Page hero softened corners */
.page-hero,
.watches-page-hero {
border-radius: 0 0 18px 18px;
overflow: hidden;
}
/* Hero section — give it elegant bottom rounding */
.hero-section {
border-radius: 0 0 24px 24px;
overflow: hidden;
}
/* Brand boxes rounded */
.brand-logo-box {
border-radius: 10px;
}
/* USP card refined */
.usp-section {
border-radius: 18px;
margin: 30px auto;
max-width: calc(100% - 40px);
overflow: hidden;
}
/* ===============================================================
EXTRA ANIMATIONS
=============================================================== */
/* Gentle tilt on watch card hover */
.product-card,
.watch-card {
transform-style: preserve-3d;
perspective: 1000px;
}
.product-card:hover,
.watch-card:hover {
transform: translateY(-8px) rotateX(2deg);
box-shadow: 0 30px 60px -25px rgba(200, 169, 110, 0.35),
0 0 0 1px rgba(200, 169, 110, 0.15);
}
/* Image elegant zoom + parallax */
.product-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
opacity: 0;
transition: opacity 0.6s;
pointer-events: none;
border-radius: inherit;
}
/* Gradient border glow on hover */
@keyframes goldGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0); }
50% { box-shadow: 0 0 20px 4px rgba(200, 169, 110, 0.25); }
}
/* Fade-in stagger for grid items */
.watches-grid > .product-card,
.products-grid > .product-card {
animation: cardIn 0.7s cubic-bezier(.16,1,.3,1) backwards;
}
.watches-grid > .product-card:nth-child(1), .products-grid > .product-card:nth-child(1) { animation-delay: 0.05s; }
.watches-grid > .product-card:nth-child(2), .products-grid > .product-card:nth-child(2) { animation-delay: 0.10s; }
.watches-grid > .product-card:nth-child(3), .products-grid > .product-card:nth-child(3) { animation-delay: 0.15s; }
.watches-grid > .product-card:nth-child(4), .products-grid > .product-card:nth-child(4) { animation-delay: 0.20s; }
.watches-grid > .product-card:nth-child(5), .products-grid > .product-card:nth-child(5) { animation-delay: 0.25s; }
.watches-grid > .product-card:nth-child(6), .products-grid > .product-card:nth-child(6) { animation-delay: 0.30s; }
@keyframes cardIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Floating particles in hero (subtle) */
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(200, 169, 110, 0.4), transparent),
radial-gradient(1px 1px at 60% 70%, rgba(200, 169, 110, 0.3), transparent),
radial-gradient(2px 2px at 80% 20%, rgba(200, 169, 110, 0.2), transparent),
radial-gradient(1px 1px at 40% 80%, rgba(200, 169, 110, 0.3), transparent),
radial-gradient(2px 2px at 90% 50%, rgba(200, 169, 110, 0.25), transparent);
background-size: 400px 400px;
animation: particleFloat 25s linear infinite;
pointer-events: none;
z-index: 1;
opacity: 0.6;
}
@keyframes particleFloat {
from { transform: translateY(0); }
to { transform: translateY(-400px); }
}
/* About page image elegant pop on scroll */
.about-intro-img img,
.exp-img-main,
.exp-img-side {
transition: transform 1s cubic-bezier(.16,1,.3,1), filter 1s;
}
.about-intro-img:hover img,
.about-exp-images:hover .exp-img-main,
.about-exp-images:hover .exp-img-side {
transform: scale(1.03);
filter: brightness(1.05);
}
/* Cloud status indicator (admin) */
.admin-cloud-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: #111;
border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 20px;
color: #aaa;
font-size: 11px;
letter-spacing: 1px;
margin-bottom: 20px;
font-family: 'Inter', sans-serif;
}
.admin-cloud-status .cs-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #666;
display: inline-block;
}
.admin-cloud-status.cs-online .cs-dot { background: #4caf50; box-shadow: 0 0 8px rgba(76,175,80,0.6); }
.admin-cloud-status.cs-error .cs-dot { background: #f44336; }
.admin-cloud-status.cs-online { color: #8c8; }
.admin-cloud-status.cs-error { color: #f88; border-color: rgba(244, 67, 54, 0.3); }
/* Contact page: form feedback */
.contact-form input.field-error,
.contact-form textarea.field-error,
.contact-form select.field-error {
border-color: #d77;
box-shadow: 0 0 0 3px rgba(220, 100, 100, 0.15);
}
/* Smooth page transitions */
main#main-content {
animation: pageFadeIn 0.6s cubic-bezier(.16,1,.3,1);
}
@keyframes pageFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Buttons subtle scale on press */
.btn-gold:active,
.btn-outline-gold:active,
.product-add-btn:active,
.nw-chat-submit:active {
transform: scale(0.97);
transition: transform 0.1s;
}
/* ===============================================================
PAYMENT LOGOS (refined)
=============================================================== */
.pay-logos { display: inline-flex; gap: 6px; align-items: center; }
.pay-logo {
background: transparent;
border: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 24px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: transform 0.25s;
}
.pay-logo:hover { transform: translateY(-1px) scale(1.05); }
.pay-logo svg { width: 100%; height: 100%; display: block; }
.admin-cloud-status.cs-local .cs-dot { background: #c8a96e; box-shadow: 0 0 6px rgba(200,169,110,0.5); }
.admin-cloud-status.cs-local { color: #c8a96e; }
.admin-cloud-status a:hover { opacity: 0.8; }
/* ===============================================================
FILTERS — refined v2 (proper checkboxes, no weird strips)
=============================================================== */
/* Sidebar with elegant background */
.watches-sidebar {
background: linear-gradient(180deg, #131313 0%, #0c0c0c 100%);
border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 14px;
padding: 28px 22px;
box-shadow:
0 20px 50px -20px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.03);
}
/* Sidebar header — refined title */
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(200, 169, 110, 0.18);
}
.sidebar-header h3 {
font-family: 'Playfair Display', serif !important;
color: #fff !important;
font-size: 19px !important;
font-weight: 500 !important;
letter-spacing: 0.5px !important;
text-transform: none !important;
margin: 0;
}
.sidebar-reset {
background: rgba(200, 169, 110, 0.08);
border: 1px solid rgba(200, 169, 110, 0.2);
color: #c8a96e;
padding: 5px 12px;
border-radius: 14px;
font-family: 'Inter', sans-serif;
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
}
.sidebar-reset:hover {
background: #c8a96e;
color: #0a0a0a;
text-decoration: none;
}
/* Filter group with subtle separator */
.filter-group {
margin-bottom: 26px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(200, 169, 110, 0.07);
}
.filter-group:last-of-type {
border-bottom: none;
margin-bottom: 0;
}
.filter-label {
display: flex !important;
align-items: center;
color: #c8a96e !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
letter-spacing: 2.2px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
margin-bottom: 14px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
.filter-label::before {
content: '';
display: inline-block;
width: 18px;
height: 1px;
background: #c8a96e;
margin-right: 10px;
opacity: 0.6;
}
/* Brand checkbox list with scroll */
#filter-brands {
max-height: 280px;
overflow-y: auto;
padding-right: 6px;
margin-right: -6px;
}
#filter-brands::-webkit-scrollbar { width: 5px; }
#filter-brands::-webkit-scrollbar-track { background: transparent; }
#filter-brands::-webkit-scrollbar-thumb {
background: rgba(200, 169, 110, 0.25);
border-radius: 3px;
}
#filter-brands::-webkit-scrollbar-thumb:hover { background: rgba(200, 169, 110, 0.4); }
.filter-checks {
display: flex;
flex-direction: column;
gap: 2px;
}
/* THE KEY FIX: clean custom checkbox */
.filter-check {
display: flex !important;
align-items: center;
gap: 12px;
padding: 9px 10px !important;
border-radius: 7px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
color: #d8d8d8 !important;
font-family: 'Inter', sans-serif;
font-size: 13px !important;
user-select: none;
position: relative;
}
.filter-check:hover {
background: rgba(200, 169, 110, 0.06);
color: #fff !important;
padding-left: 12px !important;
}
/* Hide native checkbox */
.filter-check input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0 !important;
height: 0 !important;
margin: 0;
border: 0;
}
/* Custom checkbox via pseudo-element on the label */
.filter-check::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
border: 1.5px solid rgba(200, 169, 110, 0.4);
border-radius: 4px;
background: rgba(0, 0, 0, 0.3);
flex-shrink: 0;
transition: all 0.25s cubic-bezier(.16,1,.3,1);
position: relative;
}
.filter-check:hover::before {
border-color: #c8a96e;
}
/* Checked state */
.filter-check:has(input:checked)::before {
background: linear-gradient(135deg, #d8b87a 0%, #c8a96e 100%);
border-color: #c8a96e;
box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12);
}
/* Checkmark via after */
.filter-check:has(input:checked)::after {
content: '';
position: absolute;
left: 14px;
top: 50%;
width: 4px;
height: 8px;
border: solid #0a0a0a;
border-width: 0 2px 2px 0;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
/* Label text grows */
.filter-check .fc-label {
flex: 1;
line-height: 1.3;
}
/* Count badge */
.fc-count,
.filter-count {
background: rgba(200, 169, 110, 0.08);
color: #888;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
min-width: 22px;
text-align: center;
font-family: 'Inter', sans-serif;
letter-spacing: 0;
transition: all 0.2s;
}
.filter-check:has(input:checked) .fc-count,
.filter-check:has(input:checked) .filter-count {
background: rgba(200, 169, 110, 0.18);
color: #c8a96e;
}
/* Price range inputs */
.price-range-wrap {
display: flex;
flex-direction: column;
gap: 12px;
}
.price-inputs {
display: flex;
align-items: center;
gap: 10px;
}
.price-inputs input {
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff !important;
padding: 10px 12px !important;
border-radius: 7px;
font-size: 13px !important;
font-family: 'Inter', sans-serif;
outline: none;
transition: all 0.25s;
-moz-appearance: textfield;
}
.price-inputs input::-webkit-outer-spin-button,
.price-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-inputs input:focus {
border-color: #c8a96e;
box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12);
}
.price-inputs span {
color: #c8a96e;
font-weight: 600;
}
.price-display-row {
color: #aaa;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
padding: 6px 10px;
background: rgba(200, 169, 110, 0.05);
border-radius: 6px;
}
/* Search field in sidebar */
.filter-search-wrap {
position: relative;
}
.filter-search-wrap input {
width: 100%;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
padding: 11px 38px 11px 14px;
border-radius: 7px;
font-size: 13px;
font-family: 'Inter', sans-serif;
outline: none;
transition: all 0.25s;
}
.filter-search-wrap input::placeholder { color: #666; }
.filter-search-wrap input:focus {
border-color: #c8a96e;
box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.12);
}
.filter-search-wrap svg {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
color: #c8a96e;
pointer-events: none;
}
/* Sort dropdown */
.filter-select {
width: 100%;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
padding: 11px 14px;
border-radius: 7px;
font-size: 13px;
font-family: 'Inter', sans-serif;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
transition: all 0.25s;
}
.filter-select:focus,
.filter-select:hover {
border-color: #c8a96e;
}
/* Apply button — mobile */
.filter-apply-btn {
margin-top: 8px;
background: linear-gradient(135deg, #d8b87a 0%, #c8a96e 100%);
color: #0a0a0a;
font-family: 'Inter', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 11px;
padding: 14px;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
transition: all 0.25s;
}
.filter-apply-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(200, 169, 110, 0.35);
}
/* ===============================================================
FIX: Block horizontal scroll + hide ugly scrollbar
=============================================================== */
html, body {
max-width: 100%;
}
body { overflow-x: clip; }
html {
position: relative;
}
/* Hide default scrollbar globally except where we explicitly want it */
html {
scrollbar-width: thin;
scrollbar-color: rgba(200, 169, 110, 0.4) transparent;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: #0a0a0a; }
html::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #c8a96e, #8d6f3a);
border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover { background: #c8a96e; }
html::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
/* Kill any horizontal overflow inside sections */
.watches-layout,
.watches-sidebar,
.watches-main,
.watches-grid,
.products-grid,
.products-section,
.about-intro-grid,
.about-exp-grid,
.contact-grid,
.checkout-grid,
.cart-content {
max-width: 100%;
overflow-x: hidden;
}
/* Force all images to stay within bounds */
img { max-width: 100%; height: auto; }
/* Prevent any element from exceeding the container width */
* { max-width: 100%; }
/* Sidebar internal scroll only when needed */
.watches-sidebar {
overflow-x: hidden;
}
/* ===============================================================
FIX: Wider sidebar + price inputs visibility
=============================================================== */
/* Wider sidebar */
.watches-layout {
grid-template-columns: 320px 1fr !important;
gap: 32px !important;
}
/* Price inputs — make sure both Min and Max are fully visible */
.price-inputs {
display: grid !important;
grid-template-columns: 1fr 14px 1fr !important;
gap: 8px !important;
align-items: center;
width: 100%;
}
.price-inputs input {
width: 100% !important;
min-width: 0 !important;
padding: 10px 10px !important;
font-size: 13px !important;
text-align: center;
}
.price-inputs span {
text-align: center;
font-size: 14px;
}
/* Make number inputs narrower visually but still functional */
.price-inputs input[type="number"] {
appearance: textfield;
-moz-appearance: textfield;
}
/* Responsive: collapse to one column on mobile */
@media (max-width: 1180px) {
.watches-layout {
grid-template-columns: 1fr !important;
}
}
/* Revert sidebar width to original */
.watches-layout {
grid-template-columns: 280px 1fr !important;
gap: 40px !important;
}
@media (max-width: 1100px) {
.watches-layout {
grid-template-columns: 1fr !important;
}
}
/* ===============================================================
FULLY ROUNDED PRODUCT CARDS — cleaner look
=============================================================== */
.product-card,
.watch-card {
border-radius: 16px !important;
overflow: hidden;
background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.12);
transition: all 0.5s cubic-bezier(.16,1,.3,1);
}
/* Image wrap inherits the card's rounding only at top */
.product-card .product-img-wrap,
.watch-card .product-img-wrap {
border-radius: 0 !important;
overflow: hidden;
display: block;
position: relative;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
aspect-ratio: 1 / 1;
}
/* Image fills the wrap, square aspect */
.product-card .product-img,
.watch-card .product-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 !important;
display: block;
}
/* Info section at bottom inherits bottom rounding */
.product-info {
background: #fafafa;
color: #0a0a0a;
padding: 22px 22px 24px;
border-radius: 0 0 16px 16px;
}
.product-info .product-brand {
color: #c8a96e;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
}
.product-info .product-name {
color: #0a0a0a;
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 6px;
}
.product-info .product-ref-mini {
color: #888;
font-size: 11px;
letter-spacing: 0.5px;
font-family: 'Inter', monospace;
margin-bottom: 14px;
}
.product-info .product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.product-info .product-price {
color: #0a0a0a !important;
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0;
}
.product-info .product-link {
color: #c8a96e;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 600;
}
.product-info .product-link:hover { color: #8d6f3a; }
.product-info .product-add-btn {
border: 1px solid #0a0a0a;
color: #0a0a0a;
background: transparent;
padding: 8px 14px;
border-radius: 22px;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.25s;
}
.product-info .product-add-btn:hover {
background: #0a0a0a;
color: #c8a96e;
border-color: #0a0a0a;
}
.product-info .product-add-btn.added {
background: #4caf50;
color: #fff;
border-color: #4caf50;
}
/* Badge sits above image, top-left */
.product-card .product-badge,
.watch-card .product-badge {
position: absolute;
top: 14px;
left: 14px;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(8px);
color: #c8a96e;
padding: 6px 14px;
border-radius: 20px;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
z-index: 5;
border: 1px solid rgba(200, 169, 110, 0.3);
}
.product-badge--gold {
background: linear-gradient(135deg, #d8b87a, #c8a96e) !important;
color: #0a0a0a !important;
border-color: #c8a96e !important;
}
/* Overlay only on hover */
.product-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 50%);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 24px;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.product-card:hover .product-overlay,
.watch-card:hover .product-overlay {
opacity: 1;
}
.overlay-btn {
background: rgba(255, 255, 255, 0.95);
color: #0a0a0a;
padding: 9px 22px;
border-radius: 22px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
}
/* Hover effect for full card */
.product-card:hover,
.watch-card:hover {
transform: translateY(-6px);
border-color: rgba(200, 169, 110, 0.35);
box-shadow:
0 30px 60px -20px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(200, 169, 110, 0.15),
0 0 30px -5px rgba(200, 169, 110, 0.2);
}
/* Slight image zoom on hover */
.product-card:hover .product-img,
.watch-card:hover .product-img {
transform: scale(1.05);
}
.product-card .product-img,
.watch-card .product-img {
transition: transform 1s cubic-bezier(.16,1,.3,1);
}
/* Shrink "no results" panel + add breathing room */
.watches-no-results {
padding: 50px 24px !important;
max-width: 520px;
margin: 40px auto !important;
background: transparent !important;
border: 1px dashed rgba(200, 169, 110, 0.2) !important;
border-radius: 14px;
}
.watches-no-results svg {
width: 36px !important;
height: 36px !important;
}
.watches-no-results p {
font-size: 13px;
letter-spacing: 0.5px;
}
/* Push the content slightly right from sidebar */
.watches-layout {
gap: 50px !important;
}
/* Add proper padding around watches-main */
.watches-main {
padding-top: 8px;
}
/* ===============================================================
COMPACT LAYOUTS — narrower content areas (as in original screenshot)
=============================================================== */
/* Contact page: narrower grid */
.contact-grid {
max-width: 1180px !important;
margin: 0 auto !important;
grid-template-columns: 1fr 1fr !important;
gap: 60px !important;
padding: 0 40px;
}
.contact-main-section {
padding: 80px 24px !important;
}
/* About page: narrower content */
.about-intro-grid,
.about-exp-grid {
max-width: 1180px !important;
margin: 0 auto !important;
padding: 0 40px;
gap: 60px !important;
}
.about-intro-section,
.about-experience-section {
padding: 80px 24px !important;
}
.values-grid {
max-width: 1180px !important;
margin: 50px auto 0 !important;
padding: 0 40px;
}
.about-cta-inner {
max-width: 720px;
margin: 0 auto;
}
/* Watches page: narrower layout */
.watches-layout {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 60px 40px 100px !important;
grid-template-columns: 260px 1fr !important;
gap: 50px !important;
}
/* Hero on subpages — limit text width */
.page-hero-content,
.watches-hero-content {
max-width: 800px;
margin: 0 auto;
padding: 70px 24px 50px !important;
}
/* Featured products + Cards container narrower */
.products-section .container,
.products-grid {
max-width: 1280px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.watches-layout {
grid-template-columns: 1fr !important;
padding: 40px 20px 80px !important;
}
.contact-grid,
.about-intro-grid,
.about-exp-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
padding: 0 20px;
}
}
/* ===============================================================
FIX: Trust points alignment + wider no-results panel
=============================================================== */
/* Trust points — vertically aligned at top, icon doesn't shift with multi-line text */
.contact-trust-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 28px;
margin: 30px 0 36px;
}
.trust-point {
display: flex !important;
align-items: flex-start !important;
gap: 12px;
color: #ccc !important;
font-size: 13.5px !important;
line-height: 1.5;
min-height: 24px;
}
.trust-point svg {
flex-shrink: 0;
margin-top: 2px;
color: #c8a96e;
}
.trust-point span {
line-height: 1.5;
display: block;
}
/* No-results panel — wider, more like original */
.watches-no-results {
padding: 80px 40px !important;
max-width: none !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(200, 169, 110, 0.1) !important;
border-radius: 12px;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.watches-no-results svg {
width: 48px !important;
height: 48px !important;
margin-bottom: 20px;
}
.watches-no-results p {
font-size: 14px;
letter-spacing: 0.3px;
color: #888;
margin: 0;
}
/* ===============================================================
FIX: Force visibility for Shopify product cards (override reveal)
=============================================================== */
.watches-grid-simple .product-card,
.watches-grid-simple .watch-card {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
display: flex !important;
flex-direction: column !important;
}
.watches-grid-simple .watch-card.wcard-hidden,
.watches-grid-simple .product-card.wcard-hidden {
display: none !important;
}
.watches-grid-simple {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 32px !important;
min-height: 200px;
}
/* Ensure images in product cards are visible */
.watches-grid-simple .product-img-wrap {
display: block !important;
position: relative;
aspect-ratio: 1 / 1;
background: #1a1a1a;
}
.watches-grid-simple .product-img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
}
/* ===============================================================
FIX: Product page visibility
=============================================================== */
.product-page-wrap,
.product-page-grid,
.product-page-gallery,
.product-page-info,
.product-page-wrap *:not(script):not(style) {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
.product-page-wrap {
background: #0a0a0a;
padding: 60px 24px 100px;
min-height: 80vh;
}
.product-page-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
@media (max-width: 900px) {
.product-page-grid { grid-template-columns: 1fr; gap: 30px; }
}
.product-page-gallery {
position: relative;
background: #1a1a1a;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 1/1;
}
.product-page-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-page-badges {
position: absolute; top: 20px; left: 20px;
display: flex; flex-direction: column; gap: 8px;
}
.pp-back-link {
display: inline-flex; align-items: center; gap: 8px;
color: #c8a96e !important;
text-decoration: none;
font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
margin-bottom: 30px;
transition: opacity 0.2s;
}
.pp-back-link:hover { opacity: 0.7; }
.pp-brand {
color: #c8a96e !important;
font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
margin-bottom: 8px;
}
.pp-name {
font-family: 'Playfair Display', serif !important;
color: #fff !important;
font-size: 36px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
margin: 0 0 12px !important;
}
.pp-ref {
color: #888 !important;
font-family: 'Inter', monospace;
font-size: 13px; letter-spacing: 1px;
margin-bottom: 20px;
}
.pp-price {
font-family: 'Playfair Display', serif !important;
color: #c8a96e !important;
font-size: 32px !important;
font-weight: 600 !important;
margin-bottom: 24px !important;
}
.pp-compare-price {
color: #888;
font-size: 16px;
margin-bottom: 16px;
}
.pp-desc {
color: #ccc !important;
line-height: 1.8 !important;
margin-bottom: 30px !important;
font-size: 14px;
}
.pp-desc h4 {
font-family: 'Playfair Display', serif;
color: #c8a96e;
font-size: 16px;
margin: 20px 0 12px;
}
.pp-desc ul {
list-style: none;
padding: 0;
}
.pp-desc ul li {
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
color: #ccc;
}
.pp-desc ul li strong { color: #fff; }
.pp-add-cart {
width: 100%;
padding: 16px 28px !important;
background: linear-gradient(135deg, #d8b87a, #c8a96e) !important;
color: #0a0a0a !important;
border: none !important;
border-radius: 8px !important;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.25s;
margin-bottom: 28px;
}
.pp-add-cart:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(200, 169, 110, 0.4);
}
.pp-trust-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
padding-top: 24px;
border-top: 1px solid rgba(200, 169, 110, 0.15);
}
.pp-trust {
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
font-size: 13px;
}
.pp-trust svg {
color: #c8a96e;
flex-shrink: 0;
}
/* ===============================================================
CART TOAST — elegant feedback after Add to Cart
=============================================================== */
#nw-cart-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(120%);
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
border: 1px solid rgba(200, 169, 110, 0.4);
border-radius: 14px;
padding: 16px 22px;
display: flex;
align-items: center;
gap: 16px;
z-index: 99999;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
min-width: 320px;
max-width: 90vw;
transition: transform 0.4s cubic-bezier(.16,1,.3,1);
opacity: 0;
pointer-events: none;
}
#nw-cart-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
#nw-cart-toast .toast-icon {
width: 36px;
height: 36px;
background: #c8a96e;
color: #0a0a0a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#nw-cart-toast .toast-body {
flex: 1;
}
#nw-cart-toast .toast-title {
color: #fff;
font-weight: 600;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 2px;
}
#nw-cart-toast .toast-sub {
color: #aaa;
font-size: 12px;
}
#nw-cart-toast .toast-link {
background: #c8a96e;
color: #0a0a0a;
text-decoration: none;
padding: 9px 18px;
border-radius: 22px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: all 0.2s;
}
#nw-cart-toast .toast-link:hover {
background: #d8b87a;
}
/* Improved Add button feedback */
.product-add-btn.adding {
background: #888 !important;
border-color: #888 !important;
color: #fff !important;
cursor: wait;
}
.product-add-btn.added {
background: #4caf50 !important;
border-color: #4caf50 !important;
color: #fff !important;
}
/* ===============================================================
CART PAGE — Professional design
=============================================================== */
.nw-cart-page {
background: #0a0a0a;
min-height: 80vh;
padding-bottom: 80px;
}
/* Hero */
.nw-cart-hero {
position: relative;
height: 280px;
overflow: hidden;
border-radius: 0 0 20px 20px;
margin-bottom: 50px;
}
.nw-cart-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.4) saturate(0.6);
transform: scale(1.05);
}
.nw-cart-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.85) 100%);
}
.nw-cart-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 70px 24px 0;
animation: nwFadeUp 0.7s cubic-bezier(.16,1,.3,1);
}
.nw-cart-eyebrow {
color: #c8a96e;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 600;
}
.nw-cart-hero-content h1 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 56px;
font-weight: 500;
line-height: 1;
margin: 0 0 16px;
}
.nw-cart-hero-content h1 em {
color: #c8a96e;
font-style: italic;
}
.nw-cart-subtitle {
color: #aaa;
font-size: 14px;
letter-spacing: 1px;
margin: 0;
}
@keyframes nwFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Container */
.nw-cart-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* Progress steps */
.nw-cart-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 50px;
animation: nwFadeUp 0.7s 0.1s cubic-bezier(.16,1,.3,1) backwards;
}
.nw-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.nw-step-num {
width: 34px; height: 34px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid rgba(200, 169, 110, 0.3);
color: #888;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
}
.nw-step.active .nw-step-num {
background: linear-gradient(135deg, #d8b87a, #c8a96e);
color: #0a0a0a;
border-color: #c8a96e;
box-shadow: 0 0 0 4px rgba(200, 169, 110, 0.12);
}
.nw-step-lbl {
color: #888;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
}
.nw-step.active .nw-step-lbl { color: #c8a96e; }
.nw-step-line {
width: 80px;
height: 1px;
background: rgba(200, 169, 110, 0.2);
margin: 0 14px;
margin-bottom: 22px;
}
/* Main grid */
.nw-cart-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: 40px;
align-items: start;
animation: nwFadeUp 0.7s 0.2s cubic-bezier(.16,1,.3,1) backwards;
}
@media (max-width: 1024px) {
.nw-cart-grid { grid-template-columns: 1fr; }
}
/* Items list */
.nw-cart-items {
background: linear-gradient(180deg, #131313 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.12);
border-radius: 16px;
padding: 32px;
}
.nw-cart-items-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
.nw-cart-items-head h2 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 24px;
font-weight: 500;
margin: 0;
}
.nw-item-counter {
color: #c8a96e;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
background: rgba(200, 169, 110, 0.08);
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(200, 169, 110, 0.18);
}
/* Cart item */
.nw-cart-item {
display: grid;
grid-template-columns: 130px 1fr auto;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: all 0.4s;
animation: nwFadeUp 0.5s cubic-bezier(.16,1,.3,1) backwards;
}
.nw-cart-item:last-of-type { border-bottom: none; }
.nw-cart-item.nw-removing {
opacity: 0;
transform: translateX(-30px);
}
.nw-cart-item:nth-child(2) { animation-delay: 0.05s; }
.nw-cart-item:nth-child(3) { animation-delay: 0.1s; }
.nw-cart-item:nth-child(4) { animation-delay: 0.15s; }
.nw-cart-item:nth-child(5) { animation-delay: 0.2s; }
/* Item image */
.nw-ci-image {
display: block;
width: 130px;
height: 130px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
position: relative;
transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.nw-ci-image:hover { transform: scale(1.03); }
.nw-ci-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nw-ci-image-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
/* Item info */
.nw-ci-info {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 4px;
}
.nw-ci-brand {
color: #c8a96e;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
}
.nw-ci-title {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 19px;
font-weight: 500;
text-decoration: none;
line-height: 1.3;
margin: 4px 0 6px;
transition: color 0.2s;
}
.nw-ci-title:hover { color: #c8a96e; }
.nw-ci-sku {
color: #666;
font-size: 11px;
letter-spacing: 0.5px;
font-family: 'Inter', monospace;
margin-bottom: 14px;
}
/* Actions row */
.nw-ci-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: auto;
}
.nw-qty-control {
display: inline-flex;
align-items: center;
background: #0a0a0a;
border: 1px solid rgba(200, 169, 110, 0.25);
border-radius: 22px;
overflow: hidden;
}
.nw-qty-btn {
background: transparent;
border: none;
color: #c8a96e;
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.nw-qty-btn:hover { background: rgba(200, 169, 110, 0.12); }
.nw-qty-btn:disabled { opacity: 0.4; cursor: wait; }
.nw-qty-val {
color: #fff;
font-size: 13px;
font-weight: 600;
min-width: 32px;
text-align: center;
font-family: 'Inter', sans-serif;
}
.nw-remove {
background: transparent;
border: none;
color: #777;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Inter', sans-serif;
transition: color 0.2s;
}
.nw-remove:hover { color: #e88; }
/* Item price */
.nw-ci-price {
text-align: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 4px;
}
.nw-ci-total {
font-family: 'Playfair Display', serif;
color: #c8a96e;
font-size: 22px;
font-weight: 600;
}
.nw-ci-unit {
color: #666;
font-size: 11px;
letter-spacing: 0.5px;
}
/* Continue shopping link */
.nw-continue-shopping {
display: inline-flex;
align-items: center;
gap: 8px;
color: #c8a96e;
text-decoration: none;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid rgba(200, 169, 110, 0.1);
transition: all 0.25s;
}
.nw-continue-shopping:hover {
color: #d8b87a;
gap: 12px;
}
/* Summary */
.nw-cart-summary {
position: sticky;
top: 100px;
}
.nw-summary-card {
background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.18);
border-radius: 16px;
padding: 32px;
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
}
.nw-summary-card h3 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 22px;
font-weight: 500;
margin: 0 0 20px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
/* Promo */
.nw-promo {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin-bottom: 22px;
}
.nw-promo input {
background: #0a0a0a;
border: 1px solid rgba(200, 169, 110, 0.2);
color: #fff;
padding: 11px 14px;
border-radius: 8px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.25s;
}
.nw-promo input:focus { border-color: #c8a96e; }
.nw-promo button {
background: rgba(200, 169, 110, 0.12);
border: 1px solid rgba(200, 169, 110, 0.3);
color: #c8a96e;
padding: 0 18px;
border-radius: 8px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: all 0.25s;
}
.nw-promo button:hover {
background: #c8a96e;
color: #0a0a0a;
}
.nw-promo button.nw-applied {
background: #4caf50;
color: #fff;
border-color: #4caf50;
}
/* Summary rows */
.nw-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
color: #aaa;
font-size: 14px;
}
.nw-summary-row span:last-child {
color: #fff;
font-weight: 500;
}
.nw-free { color: #4caf50 !important; font-size: 12px !important; }
.nw-discount span:last-child { color: #4caf50 !important; }
.nw-summary-divider {
height: 1px;
background: rgba(200, 169, 110, 0.12);
margin: 14px 0 18px;
}
/* Total */
.nw-summary-total {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 24px;
}
.nw-total-label {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 22px;
font-weight: 500;
}
.nw-total-amount {
text-align: right;
}
.nw-total-price {
display: block;
font-family: 'Playfair Display', serif;
color: #c8a96e;
font-size: 30px;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
}
.nw-total-tax {
color: #666;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Checkout button */
.nw-checkout-form { margin-bottom: 22px; }
.nw-checkout-btn {
width: 100%;
background: linear-gradient(135deg, #d8b87a 0%, #c8a96e 50%, #b59558 100%);
background-size: 200% 100%;
background-position: 0% 50%;
color: #0a0a0a;
border: none;
padding: 18px 24px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Inter', sans-serif;
transition: all 0.35s cubic-bezier(.16,1,.3,1);
box-shadow: 0 8px 24px rgba(200, 169, 110, 0.25);
position: relative;
overflow: hidden;
}
.nw-checkout-btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.7s;
}
.nw-checkout-btn:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(200, 169, 110, 0.4);
}
.nw-checkout-btn:hover::before { left: 100%; }
.nw-checkout-btn:active { transform: translateY(0); }
.nw-checkout-btn svg {
transition: transform 0.3s;
}
.nw-checkout-btn:hover svg { transform: translateX(4px); }
/* Trust row */
.nw-trust-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 22px;
border-top: 1px solid rgba(200, 169, 110, 0.08);
}
.nw-trust {
display: flex;
align-items: center;
gap: 6px;
color: #888;
font-size: 10px;
letter-spacing: 0.5px;
font-weight: 500;
}
.nw-trust svg { color: #c8a96e; flex-shrink: 0; }
/* Payment block */
.nw-payment-block {
margin-top: 20px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(200, 169, 110, 0.1);
border-radius: 16px;
padding: 22px 24px;
animation: nwFadeUp 0.7s 0.3s cubic-bezier(.16,1,.3,1) backwards;
}
.nw-payment-title {
color: #c8a96e;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 14px;
text-align: center;
}
.nw-payment-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin-bottom: 14px;
}
.nw-pay {
width: 52px;
aspect-ratio: 38/24;
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
transition: all 0.3s cubic-bezier(.16,1,.3,1);
cursor: pointer;
display: block;
line-height: 0;
flex: 0 0 auto;
}
.nw-pay svg {
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
}
.nw-payment-note {
color: #666;
font-size: 10px;
line-height: 1.5;
text-align: center;
margin: 0;
letter-spacing: 0.3px;
}
@media (max-width: 700px) {
.nw-cart-hero-content h1 { font-size: 36px; }
.nw-payment-grid { grid-template-columns: repeat(4, 1fr); }
.nw-cart-item { grid-template-columns: 90px 1fr; }
.nw-ci-image { width: 90px; height: 90px; }
.nw-ci-price { grid-column: 1 / -1; text-align: left; align-items: flex-start; padding-top: 8px; }
.nw-cart-grid { gap: 20px; }
.nw-step-line { width: 30px; margin: 0 6px; margin-bottom: 22px; }
.nw-cart-items, .nw-summary-card { padding: 22px; }
}
/* Empty state */
.nw-cart-empty {
max-width: 540px;
margin: 80px auto;
text-align: center;
padding: 80px 32px;
background: linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 20px;
animation: nwFadeUp 0.7s cubic-bezier(.16,1,.3,1);
}
.nw-empty-icon-wrap {
width: 120px; height: 120px;
margin: 0 auto 28px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(200, 169, 110, 0.1) 0%, transparent 70%);
display: flex;
align-items: center;
justify-content: center;
animation: nwPulse 3s ease-in-out infinite;
}
@keyframes nwPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
.nw-cart-empty h2 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 32px;
font-weight: 500;
margin: 0 0 12px;
}
.nw-cart-empty p {
color: #aaa;
line-height: 1.7;
margin: 0 0 32px;
}
.nw-empty-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #d8b87a, #c8a96e);
color: #0a0a0a;
text-decoration: none;
padding: 16px 32px;
border-radius: 10px;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
transition: all 0.3s;
box-shadow: 0 8px 24px rgba(200, 169, 110, 0.3);
}
.nw-empty-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(200, 169, 110, 0.4);
}
.nw-empty-cta svg { transition: transform 0.3s; }
.nw-empty-cta:hover svg { transform: translateX(4px); }
/* ===============================================================
PRICE FONT — Modern elegant typography for all prices
=============================================================== */
/* Cormorant Garamond is a refined serif perfect for luxury prices */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');
.product-price,
.pp-price,
.nw-ci-total,
.nw-total-price,
.product-info .product-price {
font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
letter-spacing: -0.5px !important;
font-feature-settings: 'lnum' 1, 'tnum' 1 !important;
}
.product-info .product-price {
font-size: 22px !important;
font-weight: 600 !important;
color: #0a0a0a !important;
}
.pp-price {
font-size: 38px !important;
font-weight: 600 !important;
color: #c8a96e !important;
line-height: 1 !important;
}
.nw-ci-total {
font-size: 26px !important;
font-weight: 600 !important;
color: #c8a96e !important;
}
.nw-total-price {
font-size: 36px !important;
font-weight: 700 !important;
}
/* Cart page typography refinement */
.nw-cart-page,
.nw-cart-page * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nw-ci-title,
.nw-cart-items-head h2,
.nw-summary-card h3,
.nw-cart-hero-content h1,
.nw-cart-empty h2 {
font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
font-weight: 500;
letter-spacing: 0;
}
.nw-cart-hero-content h1 {
font-weight: 600 !important;
letter-spacing: -1px !important;
}
.nw-ci-title {
font-size: 20px !important;
font-weight: 600 !important;
}
.nw-cart-items-head h2 {
font-size: 26px !important;
font-weight: 600 !important;
}
.nw-summary-card h3 {
font-size: 24px !important;
font-weight: 600 !important;
}
/* ===============================================================
CHECKOUT PAGE — Luxury pre-checkout design
=============================================================== */
.nw-checkout-page {
background: #0a0a0a;
min-height: 100vh;
padding-bottom: 60px;
}
/* Top bar */
.nw-co-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 40px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(20px);
}
.nw-co-logo {
display: flex;
align-items: center;
text-decoration: none;
}
.nw-co-secure {
display: inline-flex;
align-items: center;
gap: 8px;
color: #4caf50;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
padding: 8px 16px;
background: rgba(76, 175, 80, 0.08);
border: 1px solid rgba(76, 175, 80, 0.2);
border-radius: 24px;
}
/* Progress */
.nw-co-progress {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px 30px;
animation: nwFadeUp 0.6s cubic-bezier(.16,1,.3,1);
}
.nw-checkout-page .nw-step {
display: flex;
align-items: center;
gap: 12px;
flex-direction: row;
}
.nw-checkout-page .nw-step-num {
width: 36px; height: 36px;
border-radius: 50%;
background: #1a1a1a;
border: 1.5px solid rgba(200, 169, 110, 0.25);
color: #888;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
}
.nw-checkout-page .nw-step.done .nw-step-num {
background: #4caf50;
border-color: #4caf50;
color: #fff;
}
.nw-checkout-page .nw-step.active .nw-step-num {
background: linear-gradient(135deg, #d8b87a, #c8a96e);
border-color: #c8a96e;
color: #0a0a0a;
box-shadow: 0 0 0 5px rgba(200, 169, 110, 0.12);
animation: nwPulseGold 2s ease-in-out infinite;
}
@keyframes nwPulseGold {
0%, 100% { box-shadow: 0 0 0 5px rgba(200, 169, 110, 0.12); }
50% { box-shadow: 0 0 0 10px rgba(200, 169, 110, 0.05); }
}
.nw-checkout-page .nw-step span {
color: #888;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
}
.nw-checkout-page .nw-step.active span { color: #c8a96e; }
.nw-checkout-page .nw-step.done span { color: #ccc; }
.nw-checkout-page .nw-step-line {
width: 60px;
height: 2px;
background: rgba(200, 169, 110, 0.15);
margin: 0 16px;
border-radius: 1px;
transition: background 0.3s;
}
.nw-checkout-page .nw-step-line.done {
background: linear-gradient(90deg, #4caf50, rgba(200, 169, 110, 0.15));
}
/* Container */
.nw-co-container {
max-width: 1200px;
margin: 0 auto;
padding: 30px 32px 0;
display: grid;
grid-template-columns: 1fr 440px;
gap: 50px;
align-items: start;
}
@media (max-width: 980px) {
.nw-co-container { grid-template-columns: 1fr; padding: 20px 20px 0; }
}
/* Form blocks */
.nw-co-block {
background: linear-gradient(180deg, #131313 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.12);
border-radius: 16px;
padding: 32px;
margin-bottom: 24px;
animation: nwFadeUp 0.6s cubic-bezier(.16,1,.3,1) backwards;
}
.nw-co-block:nth-child(2) { animation-delay: 0.1s; }
.nw-co-block:nth-child(3) { animation-delay: 0.2s; }
.nw-co-block h2 {
font-family: 'Cormorant Garamond', serif;
color: #fff;
font-size: 26px;
font-weight: 600;
margin: 0 0 6px;
letter-spacing: -0.3px;
}
.nw-co-sub {
color: #888;
font-size: 13px;
margin: 0 0 24px;
}
/* Floating-label fields */
.nw-co-field {
position: relative;
margin-bottom: 14px;
}
.nw-co-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.nw-co-field input,
.nw-co-field select {
width: 100%;
background: #0a0a0a;
border: 1.5px solid rgba(200, 169, 110, 0.18);
border-radius: 10px;
padding: 18px 16px 8px;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 14px;
outline: none;
transition: all 0.25s;
appearance: none;
-webkit-appearance: none;
}
.nw-co-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.nw-co-field label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #888;
font-size: 13px;
letter-spacing: 0.3px;
pointer-events: none;
transition: all 0.2s cubic-bezier(.16,1,.3,1);
background: transparent;
}
.nw-co-field input:focus,
.nw-co-field select:focus,
.nw-co-field input:not(:placeholder-shown),
.nw-co-field select:valid {
border-color: #c8a96e;
}
.nw-co-field input:focus + label,
.nw-co-field input:not(:placeholder-shown) + label,
.nw-co-field select:focus + label,
.nw-co-field select:valid + label {
top: 12px;
transform: translateY(0);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #c8a96e;
font-weight: 600;
}
.nw-co-field.nw-error input,
.nw-co-field.nw-error select {
border-color: #e84343;
box-shadow: 0 0 0 3px rgba(232, 67, 67, 0.1);
}
/* Checkbox */
.nw-co-check {
display: flex;
align-items: center;
gap: 10px;
color: #aaa;
font-size: 13px;
margin-top: 14px;
cursor: pointer;
user-select: none;
}
.nw-co-check input {
width: 18px;
height: 18px;
accent-color: #c8a96e;
cursor: pointer;
}
/* Radio shipping */
.nw-co-radio {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: #0a0a0a;
border: 1.5px solid rgba(200, 169, 110, 0.18);
border-radius: 12px;
cursor: pointer;
margin-bottom: 10px;
transition: all 0.25s;
}
.nw-co-radio:hover { border-color: rgba(200, 169, 110, 0.4); }
.nw-co-radio.active {
border-color: #c8a96e;
background: rgba(200, 169, 110, 0.05);
box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.1);
}
.nw-co-radio input[type=radio] {
width: 18px;
height: 18px;
accent-color: #c8a96e;
flex-shrink: 0;
cursor: pointer;
}
.nw-radio-info { flex: 1; }
.nw-radio-title {
color: #fff;
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.nw-radio-sub {
color: #888;
font-size: 12px;
}
.nw-radio-price {
color: #c8a96e;
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.5px;
}
/* Back link */
.nw-co-back {
display: inline-flex;
align-items: center;
gap: 8px;
color: #c8a96e;
text-decoration: none;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-top: 8px;
padding: 12px 20px;
border: 1px solid rgba(200, 169, 110, 0.25);
border-radius: 24px;
transition: all 0.25s;
}
.nw-co-back:hover {
background: rgba(200, 169, 110, 0.08);
gap: 12px;
}
/* SUMMARY column */
.nw-co-summary {
background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.18);
border-radius: 16px;
padding: 32px;
position: sticky;
top: 110px;
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
}
.nw-co-summary h2 {
font-family: 'Cormorant Garamond', serif;
color: #fff;
font-size: 26px;
font-weight: 600;
margin: 0 0 22px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
/* Items */
.nw-co-items {
max-height: 280px;
overflow-y: auto;
margin-bottom: 8px;
padding-right: 6px;
}
.nw-co-items::-webkit-scrollbar { width: 4px; }
.nw-co-items::-webkit-scrollbar-thumb { background: rgba(200, 169, 110, 0.25); border-radius: 2px; }
.nw-co-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 14px;
align-items: center;
padding: 10px 0;
}
.nw-co-item-img {
position: relative;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
background: #1a1a1a;
}
.nw-co-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nw-co-item-qty {
position: absolute;
top: -6px;
right: -6px;
background: #c8a96e;
color: #0a0a0a;
font-size: 10px;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nw-co-item-brand {
color: #c8a96e;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 2px;
}
.nw-co-item-name {
color: #fff;
font-size: 13px;
font-weight: 500;
font-family: 'Cormorant Garamond', serif;
}
.nw-co-item-price {
color: #c8a96e;
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
font-weight: 600;
}
.nw-co-divider {
height: 1px;
background: rgba(200, 169, 110, 0.12);
margin: 16px 0;
}
.nw-co-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
color: #aaa;
font-size: 13px;
}
.nw-co-line span:last-child {
color: #fff;
font-weight: 500;
}
.nw-co-line .nw-free {
color: #4caf50 !important;
font-weight: 700;
letter-spacing: 1px;
}
.nw-co-total {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 18px 0 22px;
}
.nw-co-total > span {
font-family: 'Cormorant Garamond', serif;
color: #fff;
font-size: 22px;
font-weight: 600;
}
.nw-co-total-amount {
text-align: right;
display: flex;
align-items: baseline;
gap: 6px;
}
.nw-currency-mini {
color: #888;
font-size: 11px;
letter-spacing: 1px;
font-family: 'Inter', sans-serif;
}
.nw-total-val {
font-family: 'Cormorant Garamond', serif;
color: #c8a96e;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1;
}
/* Continue button */
.nw-co-pay-btn {
width: 100%;
background: linear-gradient(135deg, #d8b87a 0%, #c8a96e 50%, #b59558 100%);
background-size: 200% 100%;
background-position: 0% 50%;
color: #0a0a0a;
border: none;
padding: 18px 24px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Inter', sans-serif;
transition: all 0.4s cubic-bezier(.16,1,.3,1);
box-shadow: 0 10px 28px rgba(200, 169, 110, 0.3);
position: relative;
overflow: hidden;
}
.nw-co-pay-btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.7s;
}
.nw-co-pay-btn:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(200, 169, 110, 0.45);
}
.nw-co-pay-btn:hover::before { left: 100%; }
.nw-co-pay-btn.nw-shake { animation: nwShake 0.5s; }
@keyframes nwShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
.nw-spin { animation: nwSpin 1s linear infinite; }
@keyframes nwSpin { to { transform: rotate(360deg); } }
/* Payment methods */
.nw-co-pay-methods {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid rgba(200, 169, 110, 0.1);
}
.nw-co-pay-title {
color: #888;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
margin: 0 0 12px;
}
.nw-co-pay-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.nw-co-pay-grid .nw-pay {
width: 100%;
aspect-ratio: 38/24;
border-radius: 5px;
overflow: hidden;
transition: transform 0.25s;
}
.nw-co-pay-grid .nw-pay:hover { transform: translateY(-2px); }
.nw-co-pay-grid .nw-pay svg { width: 100%; height: 100%; }
/* Trust block */
.nw-co-trust-block {
margin-top: 20px;
padding: 24px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(200, 169, 110, 0.1);
border-radius: 16px;
}
.nw-trust-item {
display: flex;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nw-trust-item:last-child { border-bottom: none; padding-bottom: 0; }
.nw-trust-item:first-child { padding-top: 0; }
.nw-trust-item svg { flex-shrink: 0; margin-top: 2px; }
.nw-trust-item strong {
display: block;
color: #fff;
font-size: 13px;
font-weight: 600;
margin-bottom: 3px;
}
.nw-trust-item p {
color: #888;
font-size: 11px;
line-height: 1.4;
margin: 0;
}
/* Empty cart on checkout */
.nw-co-empty {
text-align: center;
padding: 40px 20px;
}
.nw-co-empty p {
color: #888;
margin-bottom: 16px;
}
.nw-link-gold {
color: #c8a96e;
text-decoration: none;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Footer */
.nw-co-footer {
max-width: 1200px;
margin: 50px auto 0;
padding: 30px 32px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(200, 169, 110, 0.08);
color: #666;
font-size: 11px;
letter-spacing: 0.5px;
}
.nw-co-footer-links { display: flex; gap: 20px; }
.nw-co-footer-links a {
color: #888;
text-decoration: none;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
transition: color 0.2s;
}
.nw-co-footer-links a:hover { color: #c8a96e; }
@media (max-width: 700px) {
.nw-co-top { padding: 18px 20px; }
.nw-co-block { padding: 22px; }
.nw-co-summary { padding: 22px; }
.nw-co-row { grid-template-columns: 1fr; gap: 0; }
.nw-co-pay-grid { grid-template-columns: repeat(4, 1fr); }
.nw-checkout-page .nw-step-line { width: 24px; margin: 0 8px; }
.nw-checkout-page .nw-step span { display: none; }
}
/* ===============================================================
CHECKOUT OVERLAY MODAL
=============================================================== */
.nw-checkout-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(.16,1,.3,1);
padding: 20px;
}
.nw-checkout-overlay.nw-open {
opacity: 1;
pointer-events: auto;
}
.nw-checkout-modal {
background: linear-gradient(180deg, #0e0e0e 0%, #060606 100%);
border: 1px solid rgba(200, 169, 110, 0.18);
border-radius: 20px;
max-width: 1200px;
width: 100%;
max-height: 92vh;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(40px) scale(0.97);
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
box-shadow: 0 50px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(200, 169, 110, 0.1);
}
.nw-checkout-overlay.nw-open .nw-checkout-modal {
transform: translateY(0) scale(1);
}
/* Top bar */
.nw-mod-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 30px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
background: linear-gradient(180deg, #131313 0%, #0e0e0e 100%);
flex-shrink: 0;
}
.nw-mod-close {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: #aaa;
width: 38px; height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s;
}
.nw-mod-close:hover {
background: rgba(200,169,110,0.1);
border-color: #c8a96e;
color: #c8a96e;
transform: rotate(90deg);
}
.nw-mod-logo {
display: flex;
align-items: center;
}
.nw-mod-secure {
display: inline-flex;
align-items: center;
gap: 6px;
color: #4caf50;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
padding: 6px 12px;
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.25);
border-radius: 20px;
}
/* Progress */
.nw-mod-progress {
display: flex;
align-items: center;
justify-content: center;
padding: 28px 24px 22px;
background: linear-gradient(180deg, #0d0d0d 0%, transparent 100%);
flex-shrink: 0;
}
.nw-mod-progress .nw-step { display: flex; align-items: center; gap: 10px; }
.nw-mod-progress .nw-step-num {
width: 32px; height: 32px;
border-radius: 50%;
background: #1a1a1a;
border: 1.5px solid rgba(200, 169, 110, 0.25);
color: #888;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 13px;
font-weight: 600;
}
.nw-mod-progress .nw-step.done .nw-step-num { background: #4caf50; border-color: #4caf50; color: #fff; }
.nw-mod-progress .nw-step.active .nw-step-num {
background: linear-gradient(135deg, #d8b87a, #c8a96e);
border-color: #c8a96e;
color: #0a0a0a;
box-shadow: 0 0 0 4px rgba(200, 169, 110, 0.12);
}
.nw-mod-progress .nw-step span {
color: #888;
font-size: 10px;
letter-spacing: 1.8px;
text-transform: uppercase;
font-weight: 600;
}
.nw-mod-progress .nw-step.active span { color: #c8a96e; }
.nw-mod-progress .nw-step.done span { color: #ccc; }
.nw-mod-progress .nw-step-line {
width: 60px;
height: 2px;
background: rgba(200, 169, 110, 0.15);
margin: 0 14px;
}
.nw-mod-progress .nw-step-line.done {
background: linear-gradient(90deg, #4caf50, rgba(200, 169, 110, 0.15));
}
/* Body */
.nw-mod-body {
display: grid;
grid-template-columns: 1fr 400px;
gap: 30px;
padding: 24px 32px 32px;
overflow-y: auto;
flex: 1;
}
.nw-mod-body::-webkit-scrollbar { width: 6px; }
.nw-mod-body::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.25); border-radius: 3px; }
.nw-mod-form-col .nw-co-block:not(:last-child) { margin-bottom: 18px; }
.nw-mod-form-col .nw-co-block { padding: 24px; }
.nw-mod-form-col .nw-co-block h2 { font-size: 22px; }
/* Summary col */
.nw-mod-summary {
background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%);
border: 1px solid rgba(200, 169, 110, 0.2);
border-radius: 14px;
padding: 26px;
position: sticky;
top: 0;
}
.nw-mod-summary h3 {
font-family: 'Cormorant Garamond', serif;
color: #fff;
font-size: 22px;
font-weight: 600;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(200, 169, 110, 0.12);
}
.nw-mod-trust {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(200, 169, 110, 0.08);
}
.nw-trust-mini {
display: inline-flex;
align-items: center;
gap: 4px;
color: #888;
font-size: 9px;
letter-spacing: 0.5px;
font-weight: 600;
}
@media (max-width: 880px) {
.nw-mod-body { grid-template-columns: 1fr; padding: 18px; }
.nw-mod-top { padding: 14px 18px; }
.nw-mod-progress { padding: 18px 14px 14px; }
.nw-mod-progress .nw-step span { display: none; }
.nw-mod-progress .nw-step-line { width: 30px; margin: 0 8px; }
.nw-checkout-modal { max-height: 100vh; border-radius: 0; }
.nw-checkout-overlay { padding: 0; }
}
/* ===============================================================
FIX: Floating labels not overlapping content
=============================================================== */
.nw-co-field input,
.nw-co-field select {
padding: 22px 16px 10px !important;
font-size: 14px !important;
min-height: 56px;
line-height: 1.4;
}
.nw-co-field label {
top: 18px !important;
transform: none !important;
font-size: 13px !important;
transition: all 0.2s cubic-bezier(.16,1,.3,1) !important;
}
.nw-co-field input:focus + label,
.nw-co-field input:not(:placeholder-shown) + label,
.nw-co-field select:focus + label,
.nw-co-field select:valid + label {
top: 7px !important;
font-size: 9px !important;
letter-spacing: 1.5px !important;
}
.nw-co-field select {
padding-right: 40px !important;
}
/* Footer bottom links */
.footer-bottom-links {
display: inline-flex;
align-items: center;
gap: 4px;
}
.footer-bottom-links a {
color: #888;
text-decoration: none;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
padding: 4px 10px;
transition: color 0.2s;
}
.footer-bottom-links a:hover { color: #c8a96e; }
.footer-sep { color: #444; }
/* ===============================================================
TERMS ACCEPTANCE CHECKBOX
=============================================================== */
.nw-terms-check {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: rgba(200, 169, 110, 0.05);
border: 1px solid rgba(200, 169, 110, 0.18);
border-radius: 10px;
margin-bottom: 14px;
cursor: pointer;
transition: all 0.25s;
position: relative;
}
.nw-terms-check:hover {
background: rgba(200, 169, 110, 0.08);
border-color: rgba(200, 169, 110, 0.35);
}
.nw-terms-check.nw-terms-error-state {
background: rgba(232, 67, 67, 0.08);
border-color: rgba(232, 67, 67, 0.5);
animation: nwShake 0.5s;
}
.nw-terms-check input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.nw-terms-box {
width: 18px;
height: 18px;
border: 1.5px solid rgba(200, 169, 110, 0.5);
border-radius: 4px;
background: #0a0a0a;
flex-shrink: 0;
margin-top: 1px;
position: relative;
transition: all 0.25s;
}
.nw-terms-check:hover .nw-terms-box {
border-color: #c8a96e;
}
.nw-terms-check input:checked + .nw-terms-box {
background: linear-gradient(135deg, #d8b87a, #c8a96e);
border-color: #c8a96e;
box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}
.nw-terms-check input:checked + .nw-terms-box::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #0a0a0a;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.nw-terms-text {
color: #ccc;
font-size: 12px;
line-height: 1.5;
flex: 1;
}
.nw-terms-text a {
color: #c8a96e;
text-decoration: underline;
text-decoration-color: rgba(200, 169, 110, 0.4);
text-underline-offset: 2px;
transition: text-decoration-color 0.2s;
}
.nw-terms-text a:hover {
text-decoration-color: #c8a96e;
}
.nw-terms-error {
color: #e88;
font-size: 11px;
letter-spacing: 0.5px;
margin-bottom: 12px;
padding-left: 14px;
}
/* Disabled proceed button look */
.nw-co-pay-btn:disabled {
background: linear-gradient(135deg, #666 0%, #444 100%) !important;
color: rgba(255,255,255,0.5) !important;
cursor: not-allowed;
box-shadow: none !important;
transform: none !important;
}
.nw-co-pay-btn:disabled::before { display: none; }
.nw-co-pay-btn:disabled:hover {
transform: none !important;
}
/* ===============================================================
QUALITY / TRUST GRID (replaces brand logos section)
=============================================================== */
.quality-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 50px 0 40px;
}
@media (max-width: 900px) { .quality-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .quality-grid { grid-template-columns: 1fr; } }
.quality-card {
background: linear-gradient(180deg, rgba(200, 169, 110, 0.05) 0%, rgba(0,0,0,0) 100%);
border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 16px;
padding: 32px 28px;
text-align: center;
transition: all 0.4s cubic-bezier(.16,1,.3,1);
position: relative;
overflow: hidden;
}
.quality-card::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
transition: left 0.8s;
}
.quality-card:hover {
transform: translateY(-6px);
border-color: rgba(200, 169, 110, 0.4);
background: linear-gradient(180deg, rgba(200, 169, 110, 0.08) 0%, rgba(0,0,0,0) 100%);
box-shadow: 0 20px 50px -20px rgba(200, 169, 110, 0.2);
}
.quality-card:hover::before { left: 100%; }
.quality-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
color: #c8a96e;
background: radial-gradient(circle at center, rgba(200, 169, 110, 0.12) 0%, transparent 70%);
border-radius: 50%;
transition: transform 0.4s;
}
.quality-card:hover .quality-icon { transform: scale(1.1) rotate(-5deg); }
.quality-icon svg { width: 36px; height: 36px; }
.quality-card h3 {
font-family: 'Playfair Display', 'Cormorant Garamond', serif;
color: #fff;
font-size: 18px;
font-weight: 500;
margin: 0 0 10px;
letter-spacing: 0.3px;
}
.quality-card p {
color: #aaa;
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.quality-bottom-banner {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 32px;
background: linear-gradient(90deg, rgba(200, 169, 110, 0.08), rgba(200, 169, 110, 0.03));
border: 1px solid rgba(200, 169, 110, 0.2);
border-radius: 14px;
margin-top: 16px;
}
.qbb-icon {
width: 48px; height: 48px;
flex-shrink: 0;
background: linear-gradient(135deg, #d8b87a, #c8a96e);
color: #0a0a0a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.qbb-icon svg { width: 26px; height: 26px; }
.qbb-title {
font-family: 'Playfair Display', 'Cormorant Garamond', serif;
color: #fff;
font-size: 17px;
font-weight: 500;
margin-bottom: 4px;
}
.qbb-sub {
color: #aaa;
font-size: 13px;
}
@media (max-width: 600px) {
.quality-bottom-banner { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
}
/* ===============================================================
FIX: section-sub readable color (was blending with bg)
=============================================================== */
.section-sub-light,
.brands-section .section-sub,
.brands-section p.section-sub {
color: #c8a96e !important;
font-size: 15px;
letter-spacing: 0.5px;
max-width: 640px;
margin: 14px auto 0;
text-align: center;
line-height: 1.6;
opacity: 0.92;
}
/* ===============================================================
BLURRED BRAND LOGOS SHOWCASE
=============================================================== */
.brand-showcase {
margin-top: 60px;
padding: 50px 40px 36px;
background:
radial-gradient(ellipse at top, rgba(200, 169, 110, 0.04) 0%, transparent 70%),
linear-gradient(180deg, #0e0e0e 0%, #060606 100%);
border: 1px solid rgba(200, 169, 110, 0.12);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.brand-showcase::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.5), transparent);
}
.brand-showcase-eyebrow {
color: #c8a96e;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
text-align: center;
margin-bottom: 36px;
opacity: 0.85;
}
.brand-blur-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-bottom: 24px;
}
@media (max-width: 900px) { .brand-blur-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .brand-blur-grid { grid-template-columns: repeat(2, 1fr); } }
.brand-blur-tile {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(200, 169, 110, 0.08);
border-radius: 12px;
padding: 22px 18px;
display: flex;
align-items: center;
justify-content: center;
min-height: 70px;
transition: all 0.4s cubic-bezier(.16,1,.3,1);
position: relative;
overflow: hidden;
}
.brand-blur-tile:hover {
border-color: rgba(200, 169, 110, 0.25);
background: rgba(200, 169, 110, 0.04);
transform: translateY(-2px);
}
.brand-blur-tile:hover .brand-blur-svg {
filter: blur(4.5px) saturate(0.6) opacity(0.7);
}
.brand-blur-svg {
width: 100%;
height: auto;
max-height: 36px;
color: rgba(200, 169, 110, 0.55);
/* strong blur — names are unreadable but shapes/sizes visible */
filter: blur(5.5px) saturate(0.5) opacity(0.55);
transition: filter 0.5s cubic-bezier(.16,1,.3,1);
}
.brand-disclaimer {
color: #555;
font-size: 10px;
letter-spacing: 0.5px;
text-align: center;
font-style: italic;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(200, 169, 110, 0.05);
}
/* ===============================================================
IMPROVED HOMEPAGE ANIMATIONS
=============================================================== */
/* Reveal sections with smoother stagger */
.reveal-section {
opacity: 1;
}
.reveal-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
transition-delay: var(--delay, 0s);
}
.reveal-item.is-visible,
.reveal-section.is-visible .reveal-item {
opacity: 1;
transform: translateY(0);
}
/* Quality card improved hover */
.quality-card {
transition: transform 0.5s cubic-bezier(.16,1,.3,1),
border-color 0.4s,
background 0.4s,
box-shadow 0.5s;
}
.quality-card:hover {
transform: translateY(-8px) scale(1.02);
}
/* Hero stronger parallax-like float on title */
.hero-content h1,
.hero-content .hero-eyebrow,
.hero-content .hero-sub,
.hero-content .hero-cta {
animation: heroFloat 0.9s cubic-bezier(.16,1,.3,1) backwards;
}
.hero-content .hero-eyebrow { animation-delay: 0.1s; }
.hero-content h1 { animation-delay: 0.25s; }
.hero-content .hero-sub { animation-delay: 0.45s; }
.hero-content .hero-cta { animation-delay: 0.65s; }
@keyframes heroFloat {
from { opacity: 0; transform: translateY(40px); filter: blur(8px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Product card subtle bobbing on hover */
.product-card {
transition: transform 0.45s cubic-bezier(.16,1,.3,1),
box-shadow 0.45s,
border-color 0.45s;
}
.product-card:hover {
transform: translateY(-10px) rotate(-0.4deg);
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(200, 169, 110, 0.25);
}
/* USP strip smooth marquee */
.usp-strip {
animation: uspGlow 6s ease-in-out infinite;
}
@keyframes uspGlow {
0%, 100% { box-shadow: inset 0 -1px 0 rgba(200,169,110,0.1); }
50% { box-shadow: inset 0 -1px 0 rgba(200,169,110,0.3); }
}
/* Section header underline draw-in */
.title-underline {
position: relative;
overflow: hidden;
}
.title-underline::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
animation: lineSlide 3s ease-in-out infinite;
}
@keyframes lineSlide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.nw-pay:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(200, 169, 110, 0.25);
}
/* Force SVG rect to have proper rounded corners and remove any white bleed */
.nw-pay svg rect:first-child {
rx: 6;
ry: 6;
}
/* ===============================================================
FIX: Quality cards text contrast (visible on any background)
=============================================================== */
.quality-card {
background: linear-gradient(180deg, rgba(15,15,15,0.95) 0%, rgba(20,20,20,0.95) 100%) !important;
border: 1px solid rgba(200, 169, 110, 0.3) !important;
}
.quality-card h3 {
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 20px !important;
font-weight: 600 !important;
}
.quality-card p {
color: #ccc !important;
font-size: 14px !important;
}
.quality-card .quality-icon {
background: radial-gradient(circle at center, rgba(200, 169, 110, 0.2) 0%, transparent 70%) !important;
color: #d8b87a !important;
}
.quality-bottom-banner {
background: linear-gradient(90deg, rgba(15,15,15,0.95), rgba(20,20,20,0.95)) !important;
border: 1px solid rgba(200, 169, 110, 0.35) !important;
}
.qbb-title {
color: #fff !important;
font-size: 19px !important;
font-weight: 600 !important;
}
.qbb-sub {
color: #ccc !important;
}
/* Whole brands section background slight darken so cards pop */
.brands-section {
background: #0a0a0a !important;
padding: 80px 0 !important;
}
.brands-section .section-eyebrow {
color: #c8a96e !important;
}
.brands-section .section-title {
color: #fff !important;
}
.brands-section .section-sub {
color: #aaa !important;
}
/* ===============================================================
CRAFTSMANSHIP PROCESS SECTION
=============================================================== */
.craft-section {
position: relative;
background: linear-gradient(180deg, #0a0a0a 0%, #0e0e0e 50%, #0a0a0a 100%);
padding: 100px 0;
overflow: hidden;
}
.craft-bg-glow {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(200, 169, 110, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.craft-section .container { position: relative; z-index: 2; }
.craft-section .section-eyebrow { color: #c8a96e; }
.craft-section .section-title { color: #fff; }
.craft-section .section-title em { color: #c8a96e; font-style: italic; }
.craft-section .section-sub { color: #aaa; max-width: 640px; margin: 16px auto 0; }
.craft-timeline {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin: 60px 0 50px;
}
@media (max-width: 900px) { .craft-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .craft-timeline { grid-template-columns: 1fr; } }
.craft-step {
position: relative;
background: linear-gradient(160deg, rgba(200, 169, 110, 0.06) 0%, rgba(0,0,0,0) 60%);
border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 18px;
padding: 36px 30px 30px;
transition: all 0.45s cubic-bezier(.16,1,.3,1);
overflow: hidden;
}
.craft-step::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(200, 169, 110, 0.1) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.45s;
}
.craft-step:hover {
transform: translateY(-8px);
border-color: rgba(200, 169, 110, 0.45);
box-shadow: 0 30px 60px -25px rgba(200, 169, 110, 0.3);
}
.craft-step:hover::before { opacity: 1; }
.craft-step-num {
position: absolute;
top: 20px;
right: 26px;
font-family: 'Playfair Display', serif;
font-size: 48px;
font-weight: 700;
color: rgba(200, 169, 110, 0.12);
line-height: 1;
transition: color 0.45s;
}
.craft-step:hover .craft-step-num { color: rgba(200, 169, 110, 0.25); }
.craft-step-icon {
width: 60px;
height: 60px;
color: #c8a96e;
margin-bottom: 22px;
position: relative;
z-index: 2;
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.craft-step-icon svg { width: 100%; height: 100%; }
.craft-step:hover .craft-step-icon {
transform: rotate(360deg) scale(1.1);
}
.craft-step-body { position: relative; z-index: 2; }
.craft-step-body h3 {
font-family: 'Playfair Display', 'Cormorant Garamond', serif;
color: #fff;
font-size: 21px;
font-weight: 500;
margin: 0 0 12px;
letter-spacing: 0.2px;
}
.craft-step-body p {
color: #b0b0b0;
font-size: 14px;
line-height: 1.7;
margin: 0;
}
/* Craft stats bar */
.craft-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 40px;
background: linear-gradient(90deg, rgba(200, 169, 110, 0.08), rgba(200, 169, 110, 0.03), rgba(200, 169, 110, 0.08));
border: 1px solid rgba(200, 169, 110, 0.2);
border-radius: 18px;
}
@media (max-width: 700px) { .craft-stats { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 30px; } }
.craft-stat { text-align: center; }
.craft-stat-num {
display: inline;
font-family: 'Playfair Display', serif;
font-size: 40px;
font-weight: 700;
color: #c8a96e;
line-height: 1;
}
.craft-stat-suffix {
display: inline;
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 600;
color: #c8a96e;
}
.craft-stat-label {
color: #999;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 10px;
font-weight: 500;
}
/* ===============================================================
IMPROVE: Services section icons & animation
=============================================================== */
.services-section .service-card {
transition: all 0.45s cubic-bezier(.16,1,.3,1) !important;
}
.services-section .service-card:hover {
transform: translateY(-10px) !important;
box-shadow: 0 30px 60px -25px rgba(200, 169, 110, 0.25) !important;
}
.services-section .service-icon svg {
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.services-section .service-card:hover .service-icon svg {
transform: scale(1.15) rotate(-8deg);
}
/* ===============================================================
IMPROVE: About images parallax-ish hover
=============================================================== */
.about-img-main img,
.about-img-side img {
transition: transform 0.7s cubic-bezier(.16,1,.3,1) !important;
}
.about-img-main:hover img,
.about-img-side:hover img {
transform: scale(1.06);
}
.about-img-main, .about-img-side { overflow: hidden; }
/* ===============================================================
IMPROVE: USP strip icon animation
=============================================================== */
.usp-item svg, .usp-icon svg {
transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.usp-item:hover svg, .usp-item:hover .usp-icon svg {
transform: scale(1.2) translateY(-2px);
}
/* ===============================================================
UNIFY HOMEPAGE — LIGHT THEME for all sections
=============================================================== */
/* --- Brands / Quality section → LIGHT --- */
.brands-section {
background: #faf8f4 !important;
padding: 90px 0 !important;
}
.brands-section .section-eyebrow { color: #b08d4f !important; }
.brands-section .section-title { color: #1a1a1a !important; }
.brands-section .section-title em { color: #b08d4f !important; }
.brands-section .section-sub { color: #666 !important; }
.quality-card {
background: #ffffff !important;
border: 1px solid rgba(176, 141, 79, 0.18) !important;
box-shadow: 0 4px 20px -8px rgba(0,0,0,0.08) !important;
}
.quality-card:hover {
border-color: rgba(176, 141, 79, 0.45) !important;
box-shadow: 0 24px 50px -20px rgba(176, 141, 79, 0.25) !important;
}
.quality-card h3 {
color: #1a1a1a !important;
text-shadow: none;
}
.quality-card p { color: #777 !important; }
.quality-card .quality-icon {
background: radial-gradient(circle at center, rgba(176, 141, 79, 0.12) 0%, transparent 70%) !important;
color: #b08d4f !important;
}
.quality-bottom-banner {
background: linear-gradient(90deg, #ffffff, #faf6ee) !important;
border: 1px solid rgba(176, 141, 79, 0.25) !important;
box-shadow: 0 8px 30px -12px rgba(176, 141, 79, 0.2) !important;
}
.qbb-icon {
background: linear-gradient(135deg, #d8b87a, #b08d4f) !important;
color: #fff !important;
}
.qbb-title { color: #1a1a1a !important; }
.qbb-sub { color: #777 !important; }
/* --- Craftsmanship section → LIGHT --- */
.craft-section {
background: linear-gradient(180deg, #ffffff 0%, #faf8f4 50%, #ffffff 100%) !important;
padding: 100px 0 !important;
}
.craft-bg-glow {
background: radial-gradient(circle, rgba(176, 141, 79, 0.06) 0%, transparent 70%) !important;
}
.craft-section .section-eyebrow { color: #b08d4f !important; }
.craft-section .section-title { color: #1a1a1a !important; }
.craft-section .section-title em { color: #b08d4f !important; }
.craft-section .section-sub { color: #666 !important; }
.craft-step {
background: #ffffff !important;
border: 1px solid rgba(176, 141, 79, 0.15) !important;
box-shadow: 0 4px 20px -8px rgba(0,0,0,0.06) !important;
}
.craft-step::before {
background: linear-gradient(160deg, rgba(176, 141, 79, 0.08) 0%, transparent 50%) !important;
}
.craft-step:hover {
border-color: rgba(176, 141, 79, 0.45) !important;
box-shadow: 0 30px 60px -25px rgba(176, 141, 79, 0.3) !important;
}
.craft-step-num { color: rgba(176, 141, 79, 0.14) !important; }
.craft-step:hover .craft-step-num { color: rgba(176, 141, 79, 0.3) !important; }
.craft-step-icon { color: #b08d4f !important; }
.craft-step-body h3 { color: #1a1a1a !important; }
.craft-step-body p { color: #777 !important; }
.craft-stats {
background: linear-gradient(90deg, #ffffff, #faf6ee, #ffffff) !important;
border: 1px solid rgba(176, 141, 79, 0.25) !important;
box-shadow: 0 10px 40px -15px rgba(176, 141, 79, 0.2) !important;
}
.craft-stat-num, .craft-stat-suffix { color: #b08d4f !important; }
.craft-stat-label { color: #999 !important; }
/* --- USP strip → consistent light --- */
.usp-section {
background: #ffffff !important;
border-top: 1px solid rgba(176, 141, 79, 0.1);
border-bottom: 1px solid rgba(176, 141, 79, 0.1);
}
.usp-icon { color: #b08d4f !important; }
.usp-text h3 { color: #1a1a1a !important; }
.usp-text p { color: #888 !important; }
.usp-divider { background: rgba(176, 141, 79, 0.15) !important; }
/* --- Featured products section → light --- */
.products-section {
background: #faf8f4 !important;
}
/* --- About section → light (already lightish) --- */
.about-section { background: #ffffff !important; }
/* --- Services → light --- */
.services-section { background: #faf8f4 !important; }
/* Gold accent unified to warmer #b08d4f on light backgrounds for better contrast */
.section-eyebrow { color: #b08d4f; }
/* ===============================================================
ADMIN PANEL — Tabs, KPIs, Charts, Orders
=============================================================== */
.admin-tabs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(200, 169, 110, 0.15);
padding-bottom: 0;
flex-wrap: wrap;
}
.admin-tab {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #888;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 14px 18px;
cursor: pointer;
transition: all 0.25s;
position: relative;
top: 1px;
}
.admin-tab:hover { color: #c8a96e; }
.admin-tab.active {
color: #c8a96e;
border-bottom-color: #c8a96e;
}
.admin-tab svg { opacity: 0.8; }
.admin-tab-badge {
background: #c8a96e;
color: #0a0a0a;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
}
.admin-tab-panel { display: none; animation: nwFadeUp 0.4s cubic-bezier(.16,1,.3,1); }
.admin-tab-panel.active { display: block; }
/* KPI grid */
.admin-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 24px;
}
@media (max-width: 900px) { .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .admin-kpi-grid { grid-template-columns: 1fr; } }
.admin-kpi {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
padding: 22px;
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.1);
transition: all 0.3s;
}
.admin-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.15); }
.admin-kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.admin-kpi-icon {
width: 42px; height: 42px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.admin-kpi-icon--green { background: linear-gradient(135deg, #34d399, #10b981); }
.admin-kpi-icon--gold { background: linear-gradient(135deg, #d8b87a, #b08d4f); }
.admin-kpi-icon--blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.admin-kpi-icon--purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.admin-kpi-live {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #10b981;
font-weight: 600;
background: rgba(16,185,129,0.1);
padding: 4px 10px;
border-radius: 12px;
}
.admin-live-dot {
width: 7px; height: 7px;
background: #10b981;
border-radius: 50%;
animation: nwLivePulse 1.5s ease-in-out infinite;
}
@keyframes nwLivePulse {
0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.admin-kpi-value {
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 700;
color: #1a1a1a;
line-height: 1;
margin-bottom: 6px;
}
.admin-kpi-label {
color: #888;
font-size: 12px;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.admin-kpi-trend { font-size: 11px; color: #999; }
.trend-up { color: #10b981; font-weight: 600; }
.trend-down { color: #ef4444; font-weight: 600; }
/* Chart cards */
.admin-chart-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.08);
}
.admin-chart-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
}
.admin-chart-head h3 {
font-family: 'Playfair Display', serif;
font-size: 18px;
color: #1a1a1a;
margin: 0 0 2px;
}
.admin-chart-head p { color: #999; font-size: 12px; margin: 0; }
.admin-chart-range, .admin-chart-range { display: flex; gap: 4px; }
.admin-range-btn {
background: #f5f5f5;
border: 1px solid transparent;
color: #888;
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
border-radius: 7px;
cursor: pointer;
transition: all 0.2s;
}
.admin-range-btn:hover { background: #eee; }
.admin-range-btn.active { background: #b08d4f; color: #fff; }
.admin-chart-wrap { height: 300px; position: relative; }
.admin-chart-wrap--sm { height: 220px; }
.admin-overview-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 800px) { .admin-overview-row { grid-template-columns: 1fr; } }
.admin-chart-card--half { margin-bottom: 0; }
/* Top products */
.admin-top-products { display: flex; flex-direction: column; gap: 14px; }
.admin-tp-item {}
.admin-tp-info { display: flex; justify-content: space-between; margin-bottom: 6px; }
.admin-tp-name { color: #333; font-size: 13px; font-weight: 500; }
.admin-tp-qty { color: #b08d4f; font-size: 12px; font-weight: 600; }
.admin-tp-bar { height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.admin-tp-fill {
height: 100%;
background: linear-gradient(90deg, #d8b87a, #b08d4f);
border-radius: 4px;
transition: width 0.8s cubic-bezier(.16,1,.3,1);
}
/* Orders tab */
.admin-orders-toolbar {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.admin-date-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-datefilter-btn {
background: #f5f5f5;
border: 1px solid transparent;
color: #777;
font-size: 12px;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.admin-datefilter-btn:hover { background: #eee; }
.admin-datefilter-btn.active { background: #b08d4f; color: #fff; }
.admin-date-range {
display: flex;
align-items: center;
gap: 10px;
}
.admin-date-range label { font-size: 12px; color: #888; display: flex; flex-direction: column; gap: 3px; }
.admin-date-range input {
border: 1px solid rgba(0,0,0,0.12);
border-radius: 7px;
padding: 6px 10px;
font-size: 12px;
color: #333;
}
.admin-orders-summary {
display: flex;
align-items: center;
gap: 30px;
padding: 18px 24px;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.admin-os-item { display: flex; flex-direction: column; gap: 2px; }
.admin-os-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.admin-os-value { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #1a1a1a; }
.admin-os-value--gold { color: #b08d4f; }
.admin-export-pdf {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #d8b87a, #b08d4f);
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 6px 18px -8px rgba(176,141,79,0.5);
}
.admin-export-pdf:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(176,141,79,0.6); }
.admin-orders-table-wrap {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px;
overflow-x: auto;
}
.admin-orders-table {
width: 100%;
border-collapse: collapse;
min-width: 800px;
}
.admin-orders-table thead th {
background: #faf8f4;
color: #888;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.admin-orders-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid rgba(0,0,0,0.04);
font-size: 13px;
color: #444;
}
.admin-orders-table tbody tr:hover { background: #faf9f6; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }
.ord-id { font-weight: 700; color: #b08d4f; font-family: monospace; }
.ord-time { display: block; font-size: 11px; color: #aaa; }
.ord-products { max-width: 280px; color: #666; font-size: 12px; }
.ord-total { font-weight: 700; color: #1a1a1a; font-family: 'Playfair Display', serif; font-size: 15px; }
.ord-status {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
}
.st-paid { background: rgba(16,185,129,0.12); color: #10b981; }
.st-pending { background: rgba(245,158,11,0.12); color: #f59e0b; }
.admin-orders-empty { text-align: center; padding: 40px; color: #999; }
/* Dark-theme admin page overrides (admin page hero is dark) — keep panel light cards readable */
.admin-support-main { background: #f4f2ee; }
/* ===============================================================
PRODUCT CARDS — Clean elegant redesign (final override)
=============================================================== */
.products-grid,
.watches-grid-simple {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 28px;
}
.product-card,
.watch-card {
background: #fff !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 16px !important;
overflow: hidden !important;
transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s cubic-bezier(.16,1,.3,1), border-color 0.45s !important;
box-shadow: 0 4px 20px -10px rgba(0,0,0,0.12) !important;
display: flex !important;
flex-direction: column !important;
position: relative;
}
.product-card:hover,
.watch-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 30px 60px -25px rgba(176,141,79,0.35) !important;
border-color: rgba(176,141,79,0.3) !important;
}
/* Image area */
.product-card .product-img-wrap,
.watches-grid-simple .product-img-wrap {
position: relative !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
background: linear-gradient(135deg, #f5f3ef, #ebe7e0) !important;
border-radius: 0 !important;
display: block !important;
}
.product-card .product-img,
.watches-grid-simple .product-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.7s cubic-bezier(.16,1,.3,1) !important;
}
.product-card:hover .product-img,
.watch-card:hover .product-img {
transform: scale(1.07) !important;
}
/* Overlay "View" button */
.product-overlay {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(20,16,12,0.0) !important;
transition: background 0.4s !important;
z-index: 2 !important;
}
.product-card:hover .product-overlay,
.watch-card:hover .product-overlay {
background: rgba(20,16,12,0.25) !important;
}
.overlay-btn {
background: rgba(255,255,255,0.95) !important;
color: #1a1a1a !important;
padding: 12px 26px !important;
border-radius: 30px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
opacity: 0 !important;
transform: translateY(12px) !important;
transition: all 0.4s cubic-bezier(.16,1,.3,1) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}
.product-card:hover .overlay-btn,
.watch-card:hover .overlay-btn {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Info area */
.product-card .product-info,
.watches-grid-simple .product-info {
padding: 22px 22px 24px !important;
border-top: none !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
background: #fff !important;
}
.product-card .product-brand,
.watches-grid-simple .product-brand {
color: #b08d4f !important;
font-size: 10px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
}
.product-card .product-name,
.watches-grid-simple .product-name {
font-family: 'Playfair Display', 'Cormorant Garamond', serif !important;
color: #1a1a1a !important;
font-size: 19px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
margin: 0 0 16px !important;
min-height: 50px;
}
/* Footer: price + add button */
.product-card .product-footer,
.watches-grid-simple .product-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: auto !important;
padding-top: 16px !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
}
.product-card .product-price,
.watches-grid-simple .product-price {
font-family: 'Cormorant Garamond', serif !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
letter-spacing: -0.5px !important;
}
.product-add-btn {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
padding: 11px 18px !important;
border-radius: 24px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(.16,1,.3,1) !important;
text-decoration: none !important;
}
.product-add-btn:hover {
background: #b08d4f !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px -6px rgba(176,141,79,0.5) !important;
}
.product-add-btn svg { width: 14px; height: 14px; }
/* Badges */
.product-badge {
position: absolute !important;
top: 16px !important;
left: 16px !important;
z-index: 3 !important;
background: rgba(20,16,12,0.85) !important;
color: #fff !important;
padding: 7px 14px !important;
border-radius: 20px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
backdrop-filter: blur(4px);
}
.product-badge--gold {
background: linear-gradient(135deg, #d8b87a, #b08d4f) !important;
color: #1a1a1a !important;
}
/* ===============================================================
ADMIN PANEL — FULL DARK THEME OVERRIDE
=============================================================== */
.admin-support-main {
background: radial-gradient(ellipse at top, #15120d 0%, #0a0a0a 60%) !important;
min-height: 100vh;
}
/* --- LOGIN with animation --- */
.admin-login {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.admin-login[style*="display: none"],
.admin-login[style*="display:none"] {
display: none !important;
}
.admin-login-inner {
background: linear-gradient(180deg, rgba(30,26,20,0.9) 0%, rgba(15,13,10,0.95) 100%) !important;
border: 1px solid rgba(200, 169, 110, 0.25) !important;
border-radius: 22px;
padding: 50px 44px !important;
max-width: 420px;
width: 100%;
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 60px -20px rgba(200,169,110,0.15);
position: relative;
overflow: hidden;
animation: adminLoginIn 0.7s cubic-bezier(.16,1,.3,1);
}
@keyframes adminLoginIn {
from { opacity: 0; transform: translateY(40px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Animated shimmer line at top */
.admin-login-inner::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 2px;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
animation: adminShimmer 3s ease-in-out infinite;
}
@keyframes adminShimmer {
0% { left: -100%; }
50%, 100% { left: 100%; }
}
/* Glow orb behind icon */
.admin-login-inner::after {
content: '';
position: absolute;
top: -60px; left: 50%;
transform: translateX(-50%);
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(200,169,110,0.18) 0%, transparent 70%);
pointer-events: none;
}
.admin-login-icon {
color: #c8a96e !important;
margin-bottom: 20px !important;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
animation: adminIconFloat 3s ease-in-out infinite;
}
@keyframes adminIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.admin-login-icon svg {
filter: drop-shadow(0 0 12px rgba(200,169,110,0.5));
}
.admin-login h2 {
color: #fff !important;
font-family: 'Playfair Display', serif;
font-size: 26px !important;
position: relative; z-index: 2;
}
.admin-login p { color: #999 !important; position: relative; z-index: 2; }
.admin-login .form-field label {
color: #c8a96e !important;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
}
.admin-login .form-field input {
background: rgba(10,10,10,0.8) !important;
border: 1px solid rgba(200,169,110,0.25) !important;
color: #fff !important;
border-radius: 10px !important;
padding: 14px 16px !important;
transition: all 0.25s;
}
.admin-login .form-field input:focus {
border-color: #c8a96e !important;
box-shadow: 0 0 0 3px rgba(200,169,110,0.15) !important;
}
.admin-login .btn-gold {
background: linear-gradient(135deg, #d8b87a, #c8a96e) !important;
color: #0a0a0a !important;
border: none !important;
padding: 15px !important;
border-radius: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 12px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.admin-login .btn-gold::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s;
}
.admin-login .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(200,169,110,0.6); }
.admin-login .btn-gold:hover::before { left: 100%; }
.admin-login-error {
color: #ff6b6b !important;
background: rgba(255,107,107,0.1);
border: 1px solid rgba(255,107,107,0.25);
border-radius: 8px;
padding: 10px;
margin-top: 14px;
font-size: 13px;
position: relative; z-index: 2;
animation: nwShake 0.4s;
}
/* --- DASHBOARD reveal animation --- */
.admin-dashboard { animation: adminDashFade 0.5s ease; }
@keyframes adminDashFade { from { opacity: 0; } to { opacity: 1; } }
/* --- KPI cards → DARK --- */
.admin-kpi {
background: linear-gradient(160deg, rgba(30,26,20,0.6) 0%, rgba(15,13,10,0.9) 100%) !important;
border: 1px solid rgba(200,169,110,0.15) !important;
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.6) !important;
}
.admin-kpi:hover {
border-color: rgba(200,169,110,0.4) !important;
box-shadow: 0 20px 40px -18px rgba(200,169,110,0.2) !important;
}
.admin-kpi-value { color: #fff !important; }
.admin-kpi-label { color: #999 !important; }
.admin-kpi-trend { color: #888 !important; }
/* --- Chart cards → DARK --- */
.admin-chart-card {
background: linear-gradient(160deg, rgba(25,22,17,0.7) 0%, rgba(12,11,9,0.95) 100%) !important;
border: 1px solid rgba(200,169,110,0.15) !important;
box-shadow: 0 10px 30px -15px rgba(0,0,0,0.6) !important;
}
.admin-chart-head h3 { color: #fff !important; }
.admin-chart-head p { color: #888 !important; }
.admin-range-btn {
background: rgba(255,255,255,0.05) !important;
color: #999 !important;
}
.admin-range-btn:hover { background: rgba(255,255,255,0.1) !important; }
.admin-range-btn.active { background: #c8a96e !important; color: #0a0a0a !important; }
/* Top products → dark */
.admin-tp-name { color: #ddd !important; }
.admin-tp-bar { background: rgba(255,255,255,0.06) !important; }
/* --- Tabs → DARK --- */
.admin-tabs { border-bottom-color: rgba(200,169,110,0.15) !important; }
.admin-tab { color: #888 !important; }
.admin-tab:hover { color: #c8a96e !important; }
.admin-tab.active { color: #c8a96e !important; border-bottom-color: #c8a96e !important; }
/* --- Orders → DARK --- */
.admin-datefilter-btn, .admin-date-range input {
background: rgba(255,255,255,0.05) !important;
color: #aaa !important;
border-color: rgba(200,169,110,0.15) !important;
}
.admin-datefilter-btn:hover { background: rgba(255,255,255,0.1) !important; }
.admin-datefilter-btn.active { background: #c8a96e !important; color: #0a0a0a !important; }
.admin-date-range label { color: #888 !important; }
.admin-orders-summary {
background: linear-gradient(160deg, rgba(25,22,17,0.7), rgba(12,11,9,0.95)) !important;
border: 1px solid rgba(200,169,110,0.15) !important;
}
.admin-os-label { color: #888 !important; }
.admin-os-value { color: #fff !important; }
.admin-os-value--gold { color: #c8a96e !important; }
.admin-orders-table-wrap {
background: linear-gradient(160deg, rgba(25,22,17,0.5), rgba(12,11,9,0.9)) !important;
border: 1px solid rgba(200,169,110,0.12) !important;
}
.admin-orders-table thead th {
background: rgba(200,169,110,0.06) !important;
color: #c8a96e !important;
border-bottom-color: rgba(200,169,110,0.15) !important;
}
.admin-orders-table tbody td {
color: #ccc !important;
border-bottom-color: rgba(255,255,255,0.04) !important;
}
.admin-orders-table tbody tr:hover { background: rgba(200,169,110,0.05) !important; }
.ord-products { color: #999 !important; }
.ord-total { color: #fff !important; }
.ord-time { color: #777 !important; }
.admin-orders-empty { color: #888 !important; }
/* Shopify analytics link banner */
.admin-shopify-link {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(90deg, rgba(150,191,72,0.12), rgba(150,191,72,0.04));
border: 1px solid rgba(150,191,72,0.3);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 24px;
}
.admin-shopify-link svg { color: #96bf48; flex-shrink: 0; }
.admin-shopify-link-text { flex: 1; }
.admin-shopify-link-text strong { color: #fff; display: block; font-size: 14px; margin-bottom: 2px; }
.admin-shopify-link-text span { color: #999; font-size: 12px; }
.admin-shopify-link a {
background: #96bf48;
color: #fff;
text-decoration: none;
padding: 10px 18px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
transition: all 0.25s;
}
.admin-shopify-link a:hover { background: #88b03f; transform: translateY(-1px); }
/* ===============================================================
ADMIN LOADING SCREEN
=============================================================== */
#admin-loader {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, #15120d 0%, #060504 70%);
opacity: 0;
transition: opacity 0.5s ease;
}
#admin-loader.admin-loader-show { opacity: 1; }
#admin-loader.admin-loader-done { opacity: 0; }
.admin-loader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
transform: scale(0.9);
opacity: 0;
animation: adminLoaderPop 0.6s cubic-bezier(.16,1,.3,1) 0.1s forwards;
}
@keyframes adminLoaderPop {
to { transform: scale(1); opacity: 1; }
}
.admin-loader-watch { width: 90px; height: 90px; }
.admin-loader-svg { width: 100%; height: 100%; overflow: visible; }
.admin-loader-ring {
fill: none;
stroke: rgba(200,169,110,0.15);
stroke-width: 3;
}
.admin-loader-ring-progress {
fill: none;
stroke: #c8a96e;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 264;
stroke-dashoffset: 264;
transform-origin: center;
transform: rotate(-90deg);
animation: adminRingFill 1.4s cubic-bezier(.65,0,.35,1) infinite;
filter: drop-shadow(0 0 6px rgba(200,169,110,0.6));
}
@keyframes adminRingFill {
0% { stroke-dashoffset: 264; }
50% { stroke-dashoffset: 66; }
100% { stroke-dashoffset: 264; }
}
.admin-loader-hand-h, .admin-loader-hand-m {
stroke: #c8a96e;
stroke-width: 3;
stroke-linecap: round;
transform-origin: 50px 50px;
}
.admin-loader-hand-h { animation: adminSpinH 2s linear infinite; }
.admin-loader-hand-m { animation: adminSpinM 1s linear infinite; }
@keyframes adminSpinH { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes adminSpinM { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.admin-loader-center { fill: #c8a96e; }
.admin-loader-logo {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 22px;
letter-spacing: 6px;
font-weight: 600;
opacity: 0;
animation: adminFadeText 0.6s ease 0.3s forwards;
}
.admin-loader-text {
color: #999;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0;
animation: adminFadeText 0.6s ease 0.5s forwards;
}
@keyframes adminFadeText { to { opacity: 1; } }
.admin-loader-bar {
width: 200px;
height: 3px;
background: rgba(200,169,110,0.15);
border-radius: 2px;
overflow: hidden;
}
.admin-loader-bar-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #d8b87a, #c8a96e);
border-radius: 2px;
animation: adminBarFill 1.2s cubic-bezier(.5,0,.2,1) forwards;
box-shadow: 0 0 10px rgba(200,169,110,0.6);
}
@keyframes adminBarFill {
0% { width: 0%; }
60% { width: 75%; }
100% { width: 100%; }
}
/* Bulletproof login hide after auth */
#admin-login[style*="none"] { display: none !important; }
.admin-dashboard { /* ensure visible when shown */ }
/* Login input — force dark (override autofill white) */
.admin-login .form-field input,
#admin-password-input {
background: rgba(10,10,10,0.85) !important;
color: #fff !important;
border: 1px solid rgba(200,169,110,0.25) !important;
}
#admin-password-input:-webkit-autofill,
#admin-password-input:-webkit-autofill:focus {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 1000px rgba(15,13,10,0.98) inset !important;
caret-color: #fff;
}
/* ===============================================================
CHAT TEASER BUBBLE
=============================================================== */
.nw-chat-teaser {
position: absolute;
bottom: 80px;
right: 0;
width: 280px;
max-width: 80vw;
background: #fff;
border-radius: 16px 16px 4px 16px;
padding: 16px 18px;
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.35);
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
opacity: 0;
transform: translateY(16px) scale(0.92);
pointer-events: none;
transition: all 0.5s cubic-bezier(.16,1,.3,1);
z-index: 5;
box-sizing: border-box;
}
.nw-chat-teaser.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
animation: teaserWiggle 0.6s ease 0.5s;
}
@keyframes teaserWiggle {
0%,100% { transform: translateY(0) rotate(0); }
30% { transform: translateY(-3px) rotate(-1deg); }
60% { transform: translateY(-1px) rotate(1deg); }
}
.nw-chat-teaser::after {
content: '';
position: absolute;
bottom: -7px;
right: 22px;
width: 14px; height: 14px;
background: #fff;
transform: rotate(45deg);
border-radius: 0 0 3px 0;
}
.nw-chat-teaser-avatar {
width: 34px; height: 34px;
flex-shrink: 0;
background: linear-gradient(135deg, #d8b87a, #c8a96e);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nw-chat-teaser-avatar svg { width: 18px; height: 18px; }
.nw-chat-teaser-text {
color: #2a2a2a;
font-size: 13px;
line-height: 1.5;
font-weight: 500;
cursor: pointer;
flex: 1;
min-width: 0;
word-break: normal;
overflow-wrap: break-word;
padding-right: 14px;
}
.nw-chat-teaser-close {
position: absolute;
top: 8px; right: 8px;
background: rgba(0,0,0,0.05);
border: none;
width: 22px; height: 22px;
border-radius: 50%;
color: #888;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.nw-chat-teaser-close:hover { background: rgba(0,0,0,0.1); color: #333; }
@media (max-width: 480px) {
.nw-chat-teaser { width: 210px; bottom: 72px; }
.nw-chat-teaser-text { font-size: 12px; }
}
/* ===============================================================
NEWSLETTER POPUP
=============================================================== */
.nw-nl-overlay {
position: fixed;
inset: 0;
background: rgba(8,6,4,0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.nw-nl-overlay.nw-nl-show {
opacity: 1;
pointer-events: auto;
}
.nw-nl-modal {
display: grid;
grid-template-columns: 240px 1fr;
max-width: 720px;
width: 100%;
background: linear-gradient(180deg, #161310 0%, #0c0a08 100%);
border: 1px solid rgba(200,169,110,0.3);
border-radius: 20px;
overflow: hidden;
position: relative;
transform: translateY(40px) scale(0.94);
opacity: 0;
transition: all 0.6s cubic-bezier(.16,1,.3,1);
box-shadow: 0 50px 120px -30px rgba(0,0,0,0.8), 0 0 80px -30px rgba(200,169,110,0.3);
}
.nw-nl-show .nw-nl-modal {
transform: translateY(0) scale(1);
opacity: 1;
}
@media (max-width: 600px) {
.nw-nl-modal { grid-template-columns: 1fr; max-width: 380px; }
.nw-nl-visual { display: none; }
}
.nw-nl-close {
position: absolute;
top: 14px; right: 14px;
z-index: 5;
width: 36px; height: 36px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s;
}
.nw-nl-close:hover { background: rgba(200,169,110,0.25); border-color: #c8a96e; transform: rotate(90deg); }
/* Visual side */
.nw-nl-visual {
position: relative;
background: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80') center/cover;
display: flex;
align-items: center;
justify-content: center;
}
.nw-nl-visual-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(12,10,8,0.5), rgba(200,169,110,0.25));
}
.nw-nl-badge {
position: relative;
z-index: 2;
width: 130px; height: 130px;
border-radius: 50%;
background: linear-gradient(135deg, #d8b87a, #b08d4f);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #0a0a0a;
box-shadow: 0 20px 50px -15px rgba(0,0,0,0.6);
animation: nlBadgePulse 2.5s ease-in-out infinite;
}
@keyframes nlBadgePulse {
0%,100% { transform: scale(1) rotate(-8deg); }
50% { transform: scale(1.06) rotate(-8deg); }
}
.nw-nl-badge-num {
font-family: 'Playfair Display', serif;
font-size: 38px;
font-weight: 700;
line-height: 1;
}
.nw-nl-badge-label {
font-size: 11px;
letter-spacing: 3px;
font-weight: 700;
margin-top: 4px;
}
/* Content side */
.nw-nl-content {
padding: 44px 40px 36px;
text-align: left;
}
.nw-nl-eyebrow {
color: #c8a96e;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
}
.nw-nl-title {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 30px;
font-weight: 500;
line-height: 1.2;
margin: 0 0 14px;
}
.nw-nl-title em { color: #c8a96e; font-style: italic; }
.nw-nl-text {
color: #aaa;
font-size: 14px;
line-height: 1.65;
margin: 0 0 24px;
}
.nw-nl-form { position: relative; margin-bottom: 14px; }
.nw-nl-input {
width: 100%;
background: rgba(10,10,10,0.6);
border: 1.5px solid rgba(200,169,110,0.3);
border-radius: 10px;
padding: 18px 16px 8px;
color: #fff;
font-size: 14px;
outline: none;
transition: border-color 0.25s;
}
.nw-nl-input:focus { border-color: #c8a96e; }
.nw-nl-label {
position: absolute;
left: 16px; top: 16px;
color: #888;
font-size: 14px;
pointer-events: none;
transition: all 0.2s cubic-bezier(.16,1,.3,1);
}
.nw-nl-input:focus + .nw-nl-label,
.nw-nl-input:not(:placeholder-shown) + .nw-nl-label {
top: 6px;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #c8a96e;
font-weight: 600;
}
.nw-nl-btn {
width: 100%;
margin-top: 12px;
background: linear-gradient(135deg, #d8b87a, #c8a96e);
color: #0a0a0a;
border: none;
padding: 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.35s cubic-bezier(.16,1,.3,1);
position: relative;
overflow: hidden;
}
.nw-nl-btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
transition: left 0.6s;
}
.nw-nl-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(200,169,110,0.6); }
.nw-nl-btn:hover::before { left: 100%; }
.nw-nl-btn svg { transition: transform 0.3s; }
.nw-nl-btn:hover svg { transform: translateX(4px); }
.nw-nl-dismiss {
display: block;
margin: 4px auto 0;
background: none;
border: none;
color: #777;
font-size: 12px;
letter-spacing: 0.5px;
cursor: pointer;
transition: color 0.2s;
}
.nw-nl-dismiss:hover { color: #aaa; text-decoration: underline; }
/* Success state */
.nw-nl-success { text-align: center; animation: nwFadeUp 0.5s cubic-bezier(.16,1,.3,1); }
.nw-nl-success h3 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 22px;
margin: 16px 0 8px;
}
.nw-nl-success p { color: #aaa; font-size: 14px; margin: 0 0 8px; }
.nw-nl-code {
display: inline-block;
font-family: 'Playfair Display', serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 4px;
color: #c8a96e;
background: rgba(200,169,110,0.1);
border: 1.5px dashed rgba(200,169,110,0.5);
border-radius: 10px;
padding: 12px 28px;
margin: 8px 0;
}
.nw-nl-code-hint { font-size: 12px !important; color: #888 !important; }
/* ===============================================================
MODERN HOMEPAGE ANIMATION SYSTEM v2
=============================================================== */
/* Reveal variants — base hidden state */
.reveal-item,
.reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur {
opacity: 0;
transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.9s ease;
will-change: opacity, transform;
}
.reveal-up { transform: translateY(48px); }
.reveal-left { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }
.reveal-scale { transform: scale(0.9); }
.reveal-blur { filter: blur(12px); transform: translateY(24px); }
.reveal-item.is-visible,
.reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible,
.reveal-scale.is-visible, .reveal-blur.is-visible {
opacity: 1;
transform: none;
filter: none;
}
/* Stagger delays for grids */
.stagger > *:nth-child(1){ transition-delay:.05s; }
.stagger > *:nth-child(2){ transition-delay:.12s; }
.stagger > *:nth-child(3){ transition-delay:.19s; }
.stagger > *:nth-child(4){ transition-delay:.26s; }
.stagger > *:nth-child(5){ transition-delay:.33s; }
.stagger > *:nth-child(6){ transition-delay:.40s; }
.stagger > *:nth-child(7){ transition-delay:.47s; }
.stagger > *:nth-child(8){ transition-delay:.54s; }
/* ---- HERO upgrade ---- */
.hero-section, .hero {
position: relative;
overflow: hidden;
}
/* Slow ken-burns zoom on hero bg */
.hero-bg, .hero-bg-img, .hero-background {
animation: heroKenBurns 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
0% { transform: scale(1.0) translateY(0); }
100% { transform: scale(1.12) translateY(-2%); }
}
/* Floating gold particles in hero */
.hero-particles {
position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.hero-particle {
position: absolute;
width: 4px; height: 4px;
background: radial-gradient(circle, rgba(230,199,138,0.9), transparent 70%);
border-radius: 50%;
animation: floatParticle linear infinite;
}
@keyframes floatParticle {
0% { transform: translateY(110vh) scale(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}
/* Hero title shimmer sweep */
.hero h1, .hero-title {
position: relative;
}
.hero h1 em, .hero-title em {
position: relative;
background: linear-gradient(90deg, #c8a96e 0%, #f0dcae 50%, #c8a96e 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShimmer 4s linear infinite;
}
@keyframes titleShimmer {
to { background-position: 200% center; }
}
/* Hero scroll-down indicator */
.hero-scroll-hint {
position: absolute;
bottom: 28px; left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: rgba(255,255,255,0.7);
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
animation: scrollHintFade 2.5s ease-in-out infinite;
}
.hero-scroll-hint .mouse {
width: 24px; height: 38px;
border: 1.5px solid rgba(200,169,110,0.6);
border-radius: 14px;
position: relative;
}
.hero-scroll-hint .mouse::after {
content: '';
position: absolute;
top: 7px; left: 50%;
transform: translateX(-50%);
width: 4px; height: 7px;
background: #c8a96e;
border-radius: 2px;
animation: scrollWheel 1.6s ease-in-out infinite;
}
@keyframes scrollWheel {
0% { opacity: 0; transform: translate(-50%, 0); }
40% { opacity: 1; }
80% { opacity: 0; transform: translate(-50%, 12px); }
100% { opacity: 0; }
}
@keyframes scrollHintFade {
0%,100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ---- Section headers — animated underline draw ---- */
.section-header .title-underline,
.title-underline {
position: relative;
width: 60px; height: 2px;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
overflow: hidden;
}
.section-header.is-visible .title-underline::after {
content: '';
position: absolute; inset: 0;
background: #f0dcae;
animation: underlineSweep 1.4s ease 0.3s;
}
@keyframes underlineSweep {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ---- Magnetic / glow buttons ---- */
.btn-gold, .btn-outline-gold, .product-add-btn, .hero-cta, .cta-button {
position: relative;
overflow: hidden;
}
.btn-gold::after, .btn-outline-gold::after, .hero-cta::after, .cta-button::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 60%);
border-radius: 50%;
transform: translate(-50%,-50%);
transition: width 0.6s ease, height 0.6s ease;
pointer-events: none;
}
.btn-gold:hover::after, .btn-outline-gold:hover::after, .hero-cta:hover::after, .cta-button:hover::after {
width: 300px; height: 300px;
}
/* ---- Section dividers — subtle gold gradient line ---- */
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,169,110,0.3), transparent);
margin: 0;
border: none;
}
/* ---- Smooth section background transitions ---- */
.products-section, .about-section, .craft-section, .brands-section, .services-section, .usp-section {
position: relative;
}
/* ---- Card hover: subtle 3D lift already on product cards; add glow ring ---- */
.product-card::before, .watch-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(200,169,110,0.6), transparent 40%, transparent 60%, rgba(200,169,110,0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: 1;
}
.product-card:hover::before, .watch-card:hover::before {
opacity: 1;
}
/* ---- Marquee / announcement smoother ---- */
.announcement-track, .usp-marquee {
will-change: transform;
}
/* ---- Smooth scroll for whole page ---- */
html { scroll-behavior: smooth; }
/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* ===============================================================
HERO PREMIUM REDESIGN v3
=============================================================== */
.hero-section {
position: relative;
min-height: 100vh;
background: #07060a;
overflow: hidden;
}
/* Layered gradient overlay — richer, cinematic */
.hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 25% 40%, rgba(0,0,0,0.2), transparent 70%),
linear-gradient(105deg, rgba(7,6,10,0.92) 0%, rgba(7,6,10,0.72) 38%, rgba(7,6,10,0.35) 65%, rgba(7,6,10,0.55) 100%),
linear-gradient(180deg, rgba(7,6,10,0.5) 0%, transparent 30%, transparent 60%, rgba(7,6,10,0.85) 100%);
z-index: 2;
}
/* subtle animated noise/vignette */
.hero-section::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,0.5) 100%);
z-index: 3; pointer-events: none;
}
.hero-bg-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
z-index: 1;
animation: heroKenBurns 20s ease-in-out infinite alternate;
}
/* Content — bigger, bolder, left-aligned premium */
.hero-content {
position: relative;
z-index: 5;
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
@media (max-width: 768px){ .hero-content{ padding: 0 24px; align-items: center; text-align: center; } }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
color: #c8a96e;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 28px;
padding: 8px 18px;
border: 1px solid rgba(200,169,110,0.3);
border-radius: 30px;
background: rgba(200,169,110,0.06);
backdrop-filter: blur(10px);
}
.hero-eyebrow .eyebrow-line { display: none; }
.hero-title {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: clamp(48px, 8vw, 104px);
font-weight: 500;
line-height: 0.98;
letter-spacing: -1px;
margin: 0 0 28px;
text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.hero-title em {
font-style: italic;
display: inline-block;
background: linear-gradient(90deg, #c8a96e 0%, #f3e0b5 45%, #c8a96e 90%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShimmer 5s linear infinite;
}
.hero-sub {
color: rgba(255,255,255,0.78);
font-size: clamp(15px, 1.6vw, 19px);
line-height: 1.7;
max-width: 540px;
margin: 0 0 40px;
font-weight: 300;
}
.hero-btns {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 768px){ .hero-btns{ justify-content: center; } }
.hero-btns .btn-gold {
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
padding: 18px 40px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 12px 40px -10px rgba(200,169,110,0.5);
transition: all 0.4s cubic-bezier(.16,1,.3,1);
display: inline-flex;
align-items: center;
gap: 10px;
}
.hero-btns .btn-gold:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px -10px rgba(200,169,110,0.65);
}
/* Floating watch card — glassmorphism premium */
.hero-watch-float {
position: absolute;
right: 7%;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 340px;
}
@media (max-width: 1100px){ .hero-watch-float{ display: none; } }
.hero-watch-img {
width: 100%;
border-radius: 20px;
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(200,169,110,0.15);
animation: heroWatchFloat 6s ease-in-out infinite;
}
@keyframes heroWatchFloat {
0%,100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-18px) rotate(1deg); }
}
.hero-watch-badge {
position: absolute;
bottom: -20px; left: -20px;
background: rgba(20,17,12,0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(200,169,110,0.3);
border-radius: 16px;
padding: 18px 24px;
display: flex;
flex-direction: column;
gap: 3px;
box-shadow: 0 20px 50px -15px rgba(0,0,0,0.6);
animation: heroBadgeFloat 6s ease-in-out infinite 0.5s;
}
@keyframes heroBadgeFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.hero-watch-badge .badge-brand {
color: #c8a96e; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.hero-watch-badge .badge-name {
color: #fff; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 500;
}
.hero-watch-badge .badge-price {
color: rgba(255,255,255,0.7); font-size: 13px; margin-top: 2px;
}
/* Slider controls — refined */
.hero-controls {
position: absolute;
bottom: 50px; left: 48px;
z-index: 6;
display: flex;
gap: 10px;
}
@media (max-width: 768px){ .hero-controls{ left: 50%; transform: translateX(-50%); } }
.hero-dot {
width: 36px; height: 3px;
border: none;
border-radius: 2px;
background: rgba(255,255,255,0.25);
cursor: pointer;
transition: all 0.4s;
padding: 0;
}
.hero-dot.active { background: #c8a96e; width: 56px; }
.hero-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 6;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s;
}
.hero-arrow:hover { background: rgba(200,169,110,0.2); border-color: #c8a96e; }
.hero-prev { left: 28px; }
.hero-next { right: 28px; }
@media (max-width: 768px){ .hero-arrow{ display: none; } }
/* Animate-up entrance */
.animate-up { opacity: 0; transform: translateY(40px); animation: heroAnimUp 1s cubic-bezier(.16,1,.3,1) forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
@keyframes heroAnimUp { to { opacity: 1; transform: translateY(0); } }
/* Only animate the active slide's content */
.hero-slide:not(.active) .animate-up { opacity: 0; animation: none; }
.hero-slide.active .animate-up { animation: heroAnimUp 1s cubic-bezier(.16,1,.3,1) forwards; }
/* ===============================================================
TRUST BAR
=============================================================== */
.trust-bar {
background: linear-gradient(180deg, #0a0a0a 0%, #100d09 100%);
border-top: 1px solid rgba(200,169,110,0.1);
border-bottom: 1px solid rgba(200,169,110,0.1);
padding: 44px 24px;
}
.trust-bar-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.trust-stat { text-align: center; flex: 1; }
.trust-stat-num {
font-family: 'Playfair Display', serif;
font-size: clamp(32px, 4vw, 46px);
font-weight: 700;
color: #c8a96e;
line-height: 1;
margin-bottom: 8px;
}
.trust-stat-unit { font-size: 0.55em; }
.trust-stat-label {
color: #999;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
}
.trust-divider {
width: 1px;
height: 56px;
background: linear-gradient(180deg, transparent, rgba(200,169,110,0.3), transparent);
flex-shrink: 0;
}
@media (max-width: 700px){
.trust-bar-inner { flex-wrap: wrap; gap: 30px 0; }
.trust-stat { flex: 0 0 50%; }
.trust-divider { display: none; }
}
/* ===============================================================
SECTION HEADERS — unified premium styling
=============================================================== */
.section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.section-eyebrow {
display: inline-block;
color: #b08d4f;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 18px;
position: relative;
padding-bottom: 14px;
}
.section-eyebrow::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 40px; height: 2px;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(30px, 4.5vw, 52px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.5px;
margin: 0;
}
.section-title em {
font-style: italic;
color: #b08d4f;
}
.section-sub {
color: #888;
font-size: 16px;
line-height: 1.7;
margin-top: 18px;
}
/* Section vertical rhythm */
.products-section, .brands-section, .craft-section, .services-section, .about-section {
padding: 100px 0;
}
@media (max-width: 700px){
.products-section, .brands-section, .craft-section, .services-section, .about-section { padding: 64px 0; }
.section-header { margin-bottom: 40px; }
}
/* Featured products: section CTA button refined */
.section-cta {
text-align: center;
margin-top: 56px;
}
.btn-outline-gold {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1.5px solid rgba(176,141,79,0.5);
color: #b08d4f;
background: transparent;
padding: 16px 38px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s cubic-bezier(.16,1,.3,1);
}
.btn-outline-gold:hover {
background: linear-gradient(135deg, #e6c78a, #c8a96e);
border-color: transparent;
color: #0a0a0a;
transform: translateY(-3px);
box-shadow: 0 16px 40px -12px rgba(200,169,110,0.5);
}
/* Subtle decorative section number / accent */
.products-section { background: #faf8f4; }
.about-section { background: #fff; }
.services-section { background: #faf8f4; }
/* ===============================================================
ABOUT SECTION — editorial split layout
=============================================================== */
.about-section { background: #fff; position: relative; overflow: hidden; }
.about-section::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(200,169,110,0.08), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.about-grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 70px;
align-items: center;
}
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; gap: 40px; padding: 0 24px; } }
/* Images — overlapping editorial composition */
.about-images {
position: relative;
height: 540px;
}
@media (max-width: 900px){ .about-images{ height: 420px; } }
.about-img-main {
position: absolute;
top: 0; left: 0;
width: 76%;
height: 78%;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4);
z-index: 2;
}
.about-img-main img { width: 100%; height: 100%; object-fit: cover; }
.about-img-side {
position: absolute;
bottom: 0; right: 0;
width: 52%;
height: 50%;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.5);
border: 6px solid #fff;
z-index: 3;
}
.about-img-side img { width: 100%; height: 100%; object-fit: cover; }
.about-img-tag {
position: absolute;
top: 18px; left: 18px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(20,17,12,0.7);
backdrop-filter: blur(12px);
color: #c8a96e;
padding: 9px 16px;
border-radius: 30px;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
border: 1px solid rgba(200,169,110,0.3);
}
/* Decorative floating ring on about image */
.about-img-main::after {
content: '';
position: absolute;
bottom: -30px; left: -30px;
width: 90px; height: 90px;
border: 2px solid rgba(200,169,110,0.4);
border-radius: 50%;
z-index: 5;
animation: aboutRingFloat 5s ease-in-out infinite;
}
@keyframes aboutRingFloat {
0%,100% { transform: translate(0,0); }
50% { transform: translate(8px,-8px); }
}
/* Content */
.about-content { text-align: left; }
.about-content .section-eyebrow { text-align: left; }
.about-content .section-eyebrow::after { left: 0; transform: none; }
.about-content .section-title { text-align: left; font-size: clamp(28px, 3.6vw, 44px); }
.about-content .title-underline { margin: 18px 0 24px; }
.about-content p {
color: #666;
line-height: 1.85;
font-size: 15px;
margin-bottom: 18px;
}
/* Stats row */
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 36px 0;
padding: 28px 0;
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 520px){ .about-stats{ grid-template-columns: repeat(2,1fr); gap: 24px 10px; } }
.about-stats .stat { text-align: left; }
.about-stats .stat-number, .about-stats .stat-suffix {
display: inline;
font-family: 'Playfair Display', serif;
font-size: 36px;
font-weight: 700;
color: #b08d4f;
line-height: 1;
}
.about-stats .stat-suffix { font-size: 24px; }
.about-stats .stat-label {
color: #999;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 8px;
font-weight: 500;
}
/* ===============================================================
SERVICES SECTION — premium cards
=============================================================== */
.services-section {
background: linear-gradient(180deg, #faf8f4 0%, #fff 100%);
position: relative;
}
.services-grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1000px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; padding: 0 24px; } }
.service-card {
position: relative;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 18px;
padding: 40px 30px 34px;
overflow: hidden;
transition: all 0.5s cubic-bezier(.16,1,.3,1);
box-shadow: 0 4px 20px -10px rgba(0,0,0,0.1);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 40px 70px -30px rgba(176,141,79,0.35);
border-color: rgba(176,141,79,0.3);
}
/* gold top accent grows on hover */
.service-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, #e6c78a, #c8a96e);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.service-card:hover::before { transform: scaleX(1); }
.service-num {
font-family: 'Playfair Display', serif;
font-size: 13px;
color: #c8a96e;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 18px;
}
.service-icon {
width: 64px; height: 64px;
color: #b08d4f;
margin-bottom: 22px;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at center, rgba(200,169,110,0.12), transparent 70%);
border-radius: 50%;
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.service-card:hover .service-icon { transform: scale(1.12) rotate(-6deg); }
.service-icon svg { width: 38px; height: 38px; }
.service-card h3 {
font-family: 'Playfair Display', serif;
font-size: 21px;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.service-card p {
color: #777;
font-size: 14px;
line-height: 1.7;
margin: 0 0 20px;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #b08d4f;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
transition: gap 0.3s;
}
.service-link:hover { gap: 14px; }
.service-bg-num {
position: absolute;
bottom: -20px; right: 6px;
font-family: 'Playfair Display', serif;
font-size: 120px;
font-weight: 700;
color: rgba(176,141,79,0.05);
line-height: 1;
pointer-events: none;
}
/* dark variant for last card if used */
.service-card.is-dark {
background: linear-gradient(160deg, #1a1612, #0e0c0a);
border-color: rgba(200,169,110,0.2);
}
.service-card.is-dark h3 { color: #fff; }
.service-card.is-dark p { color: #aaa; }
.service-card.is-dark .service-icon { color: #c8a96e; }
/* ===============================================================
PARALLAX CTA — full-bleed cinematic
=============================================================== */
.parallax-cta {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
}
.parallax-bg {
position: absolute;
inset: -10% 0;
background-size: cover;
background-position: center;
z-index: 1;
will-change: transform;
}
.parallax-overlay {
position: absolute; inset: 0;
z-index: 2;
background:
radial-gradient(ellipse at center, rgba(7,6,5,0.45) 0%, rgba(7,6,5,0.85) 100%),
linear-gradient(180deg, rgba(7,6,5,0.7), rgba(7,6,5,0.6));
}
.parallax-content {
position: relative;
z-index: 3;
max-width: 760px;
padding: 80px 32px;
}
.parallax-content .section-eyebrow {
color: #c8a96e !important;
display: inline-block;
border: 1px solid rgba(200,169,110,0.3);
background: rgba(200,169,110,0.06);
backdrop-filter: blur(10px);
padding: 8px 18px;
border-radius: 30px;
margin-bottom: 24px;
}
.parallax-content .section-eyebrow::after { display: none; }
.parallax-title {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: clamp(30px, 5vw, 56px);
font-weight: 500;
line-height: 1.12;
margin: 0 0 22px;
text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.parallax-title em {
display: block;
font-style: italic;
font-size: 0.5em;
color: #c8a96e;
font-weight: 400;
margin-top: 14px;
letter-spacing: 0.5px;
}
.parallax-sub {
color: rgba(255,255,255,0.75);
font-size: 16px;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 36px;
font-weight: 300;
}
.parallax-btns { display: flex; gap: 16px; justify-content: center; }
.parallax-btns .btn-gold {
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
padding: 18px 44px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 16px 50px -12px rgba(200,169,110,0.5);
transition: all 0.4s cubic-bezier(.16,1,.3,1);
}
.parallax-btns .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -12px rgba(200,169,110,0.7); }
/* ===============================================================
CRAFTSMANSHIP — connecting line between steps
=============================================================== */
.craft-timeline { position: relative; }
.craft-step {
background: linear-gradient(165deg, #fff 0%, #faf8f4 100%) !important;
}
.craft-step-icon {
background: radial-gradient(circle at center, rgba(200,169,110,0.12), transparent 70%);
border-radius: 50%;
padding: 8px;
}
/* USP strip — give it more presence */
.usp-section { background: #fff; padding: 48px 0; }
.usp-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: start;
}
@media (max-width: 900px){ .usp-inner{ grid-template-columns: repeat(2,1fr); gap: 36px 24px; } }
@media (max-width: 520px){ .usp-inner{ grid-template-columns: 1fr; } }
.usp-divider { display: none; }
.usp-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 8px 0;
}
.usp-icon {
width: 48px; height: 48px;
flex-shrink: 0;
color: #b08d4f;
background: radial-gradient(circle at center, rgba(200,169,110,0.12), transparent 70%);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.usp-icon svg { width: 30px; height: 30px; }
.usp-text h3 {
color: #1a1a1a;
font-family: 'Playfair Display', serif;
font-size: 16px;
font-weight: 600;
margin: 0 0 6px;
}
.usp-text p { color: #888; font-size: 13px; line-height: 1.6; margin: 0; }
/* ===============================================================
FIXES v4 — hero badge, parallax eyebrow, about images, quality fonts
=============================================================== */
/* FIX 1: Hero floating badge — clean, no ugly blur overlap */
.hero-watch-badge {
position: absolute;
bottom: 24px; left: 24px;
background: rgba(15,12,9,0.82) !important;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(200,169,110,0.35);
border-radius: 14px;
padding: 16px 22px;
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
}
.hero-watch-img {
border-radius: 18px;
}
/* remove any pseudo overlays on hero watch */
.hero-watch-float::before, .hero-watch-float::after,
.hero-watch-img::before, .hero-watch-img::after { display: none !important; }
/* FIX 2: Parallax eyebrow — make text visible (was empty pill) */
.parallax-content .section-eyebrow {
color: #e6c78a !important;
-webkit-text-fill-color: #e6c78a !important;
background: rgba(200,169,110,0.1) !important;
font-size: 12px !important;
line-height: 1 !important;
white-space: nowrap;
}
.parallax-content .section-eyebrow::after,
.parallax-content .section-eyebrow::before { display: none !important; }
/* FIX 3: About images — clean two-column grid, NO overlap mess, NO dark overlay */
.about-images {
position: relative !important;
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
grid-template-rows: auto auto !important;
gap: 16px !important;
height: auto !important;
align-items: stretch !important;
}
.about-img-main {
position: relative !important;
top: auto !important; left: auto !important;
width: 100% !important;
height: auto !important;
grid-row: 1 / 3 !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.35) !important;
}
.about-img-main img {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
min-height: 420px;
}
.about-img-side {
position: relative !important;
bottom: auto !important; right: auto !important;
width: 100% !important;
height: 100% !important;
margin-top: 0 !important;
grid-row: 1 / 3 !important;
border: none !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.4) !important;
}
.about-img-side img {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
min-height: 420px;
}
/* remove the floating ring + any after overlay that created the dark box */
.about-img-main::after, .about-img-main::before,
.about-img-side::after, .about-img-side::before { display: none !important; }
.about-img-tag {
position: absolute !important;
bottom: 16px !important; left: 16px !important;
top: auto !important;
background: rgba(15,12,9,0.8) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: #e6c78a !important;
border: 1px solid rgba(200,169,110,0.3);
border-radius: 30px !important;
padding: 8px 16px !important;
z-index: 4;
}
@media (max-width: 600px){
.about-images { grid-template-columns: 1fr !important; }
.about-img-main img, .about-img-side img { min-height: 280px; }
}
/* FIX 4: Quality card fonts — switch from Playfair to clean modern sans */
.quality-card h3 {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
color: #1a1a1a !important;
text-shadow: none !important;
}
.quality-card p {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #777 !important;
}
.qbb-title {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
}
/* ===============================================================
USP SECTION — premium feature cards (v2)
=============================================================== */
.usp-section {
background: linear-gradient(180deg, #fff 0%, #faf8f4 100%) !important;
padding: 80px 24px !important;
border: none !important;
}
.usp-inner {
max-width: 1240px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
align-items: stretch !important;
}
@media (max-width: 1000px){ .usp-inner{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 560px){ .usp-inner{ grid-template-columns: 1fr !important; } }
.usp-divider { display: none !important; }
.usp-card {
position: relative;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 20px;
padding: 40px 28px 32px;
overflow: hidden;
text-align: left;
transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s cubic-bezier(.16,1,.3,1), border-color 0.5s;
box-shadow: 0 4px 24px -12px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.usp-card:hover {
transform: translateY(-12px);
box-shadow: 0 40px 70px -30px rgba(176,141,79,0.4);
border-color: rgba(176,141,79,0.35);
}
/* animated gradient glow that follows the card top */
.usp-card-glow {
position: absolute;
top: -50%; left: 50%;
transform: translateX(-50%);
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(200,169,110,0.18), transparent 70%);
opacity: 0;
transition: opacity 0.6s;
pointer-events: none;
}
.usp-card:hover .usp-card-glow { opacity: 1; }
/* top accent line grows on hover */
.usp-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, #e6c78a, #c8a96e);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.55s cubic-bezier(.16,1,.3,1);
}
.usp-card:hover::before { transform: scaleX(1); }
.usp-num {
position: absolute;
top: 24px; right: 26px;
font-family: 'Playfair Display', serif;
font-size: 40px;
font-weight: 700;
color: rgba(176,141,79,0.1);
line-height: 1;
transition: color 0.5s;
}
.usp-card:hover .usp-num { color: rgba(176,141,79,0.25); }
.usp-icon-wrap {
position: relative;
width: 72px; height: 72px;
margin-bottom: 26px;
display: flex;
align-items: center;
justify-content: center;
}
.usp-icon-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(200,169,110,0.14), transparent 72%);
transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.usp-card:hover .usp-icon-ring { transform: scale(1.15); }
.usp-icon-ring::after {
content: '';
position: absolute;
inset: 6px;
border: 1.5px dashed rgba(200,169,110,0.35);
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s;
animation: uspRingSpin 14s linear infinite;
}
.usp-card:hover .usp-icon-ring::after { opacity: 1; }
@keyframes uspRingSpin { to { transform: rotate(360deg); } }
.usp-icon {
position: relative;
z-index: 2;
width: 42px; height: 42px;
color: #b08d4f;
transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.usp-card:hover .usp-icon { transform: scale(1.08) rotate(-5deg); }
.usp-icon svg { width: 100%; height: 100%; }
.usp-card h3 {
font-family: 'Inter', system-ui, sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.2px;
color: #1a1a1a;
margin: 0 0 10px;
text-transform: none;
}
.usp-card p {
font-family: 'Inter', system-ui, sans-serif;
color: #888;
font-size: 13.5px;
line-height: 1.65;
margin: 0;
}
/* ===============================================================
HERO FIX — clean floating watch + better composition
=============================================================== */
/* The watch image has its own dark background — frame it elegantly so it
doesn't look like a random black rectangle */
.hero-watch-float {
right: 8% !important;
}
.hero-watch-img {
border-radius: 20px !important;
box-shadow:
0 50px 120px -30px rgba(0,0,0,0.85),
0 0 0 1px rgba(200,169,110,0.18),
0 0 80px -20px rgba(200,169,110,0.25) !important;
background: radial-gradient(ellipse at center, #1a1714 0%, #0a0908 100%);
}
/* soft vignette blends the image edges into hero instead of hard rectangle */
.hero-watch-float::after {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
box-shadow: inset 0 0 60px 20px rgba(7,6,5,0.4);
pointer-events: none;
display: block !important;
}
.hero-watch-badge {
bottom: 28px !important;
left: -24px !important;
background: rgba(15,12,9,0.92) !important;
border: 1px solid rgba(200,169,110,0.4) !important;
border-radius: 16px !important;
padding: 18px 26px !important;
box-shadow: 0 24px 60px -18px rgba(0,0,0,0.7) !important;
}
/* Hero controls (dots) — fix the weird floating bar at bottom */
.hero-controls {
bottom: 40px !important;
left: 50% !important;
transform: translateX(-50%) !important;
gap: 12px !important;
}
.hero-dot {
width: 32px !important;
height: 3px !important;
background: rgba(255,255,255,0.3) !important;
border-radius: 3px !important;
}
.hero-dot.active {
width: 48px !important;
background: linear-gradient(90deg, #e6c78a, #c8a96e) !important;
}
/* Make sure the hero background image isn't washed out / overly bright at top */
.hero-overlay {
background:
linear-gradient(105deg, rgba(7,6,10,0.94) 0%, rgba(7,6,10,0.78) 40%, rgba(7,6,10,0.4) 70%, rgba(7,6,10,0.6) 100%),
linear-gradient(180deg, rgba(7,6,10,0.55) 0%, transparent 28%, transparent 62%, rgba(7,6,10,0.9) 100%) !important;
}
/* Kill any stray seam/line between hero and next section */
.hero-section { border: none !important; margin-bottom: 0 !important; }
.hero-section + * { margin-top: 0 !important; }
/* ===============================================================
RICH PAGE (Terms/Privacy/etc) — premium legal page design
=============================================================== */
.rich-page-wrap { background: #faf8f4; }
.page-hero--small {
position: relative;
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.page-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
animation: heroKenBurns 20s ease-in-out infinite alternate;
}
.page-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, rgba(7,6,5,0.55), rgba(7,6,5,0.85)),
linear-gradient(180deg, rgba(7,6,5,0.6), rgba(7,6,5,0.7));
}
.page-hero-content {
position: relative; z-index: 2;
padding: 80px 24px;
max-width: 700px;
}
.page-hero-content .section-eyebrow {
display: inline-block;
color: #e6c78a !important;
border: 1px solid rgba(200,169,110,0.4);
background: rgba(200,169,110,0.08);
backdrop-filter: blur(10px);
padding: 8px 20px;
border-radius: 30px;
margin-bottom: 22px;
animation: nwFadeUp 0.8s cubic-bezier(.16,1,.3,1);
}
.page-hero-content .section-eyebrow::after { display: none; }
.page-hero-content h1 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: clamp(36px, 6vw, 64px);
font-weight: 500;
line-height: 1.05;
margin: 0 0 16px;
animation: nwFadeUp 0.8s cubic-bezier(.16,1,.3,1) 0.1s backwards;
}
.page-hero-content h1 em { font-style: italic; color: #c8a96e; }
.page-hero-content p {
color: rgba(255,255,255,0.7);
font-size: 14px;
letter-spacing: 1px;
animation: nwFadeUp 0.8s cubic-bezier(.16,1,.3,1) 0.2s backwards;
}
/* Content area — card with counter-numbered headings */
.rich-page-content {
padding: 80px 24px 110px;
position: relative;
}
.rich-page-inner {
max-width: 820px;
margin: 0 auto;
background: #fff;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 24px;
padding: 60px clamp(28px, 6vw, 72px);
box-shadow: 0 40px 100px -40px rgba(0,0,0,0.18);
counter-reset: rich-section;
position: relative;
}
/* subtle gold top border accent */
.rich-page-inner::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 120px; height: 4px;
background: linear-gradient(90deg, transparent, #c8a96e, transparent);
border-radius: 0 0 4px 4px;
}
.rich-h2 {
counter-increment: rich-section;
font-family: 'Playfair Display', serif;
font-size: clamp(22px, 3vw, 30px);
font-weight: 500;
color: #1a1a1a;
margin: 48px 0 18px;
padding-left: 56px;
position: relative;
line-height: 1.3;
}
.rich-h2:first-child { margin-top: 0; }
/* numbered gold badge before each H2 */
.rich-h2::before {
content: counter(rich-section, decimal-leading-zero);
position: absolute;
left: 0; top: 2px;
width: 40px; height: 40px;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px -8px rgba(200,169,110,0.6);
}
/* animated left accent line that draws in */
.rich-h2::after {
content: '';
position: absolute;
left: 19px; top: 46px; bottom: -18px;
width: 2px;
background: linear-gradient(180deg, rgba(200,169,110,0.4), transparent);
}
.rich-h3 {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 700;
color: #1a1a1a;
margin: 28px 0 12px;
padding-left: 56px;
}
.rich-p {
color: #5a5a5a;
font-size: 15.5px;
line-height: 1.85;
margin-bottom: 18px;
padding-left: 56px;
}
.rich-p p { margin: 0 0 14px; }
.rich-p p:last-child { margin-bottom: 0; }
@media (max-width: 600px){
.rich-h2, .rich-h3, .rich-p { padding-left: 0; }
.rich-h2 { padding-top: 52px; }
.rich-h2::before { top: 0; }
.rich-h2::after { display: none; }
}
.rich-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
margin: 40px 0;
}
.rich-callout {
background: linear-gradient(135deg, #fdf9f0, #faf3e6);
border: 1px solid rgba(200,169,110,0.3);
border-left: 4px solid #c8a96e;
border-radius: 14px;
padding: 24px 28px;
margin: 30px 0;
position: relative;
}
.rich-callout h4 {
font-family: 'Inter', sans-serif;
color: #b08d4f;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 8px;
}
.rich-callout h4::before {
content: '!';
width: 20px; height: 20px;
background: #c8a96e;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.rich-callout div, .rich-callout p {
color: #6a5f4a;
font-size: 14.5px;
line-height: 1.7;
margin: 0;
}
/* Reveal stagger for blocks */
.rich-page-inner .reveal-item { transition-delay: 0.05s; }
/* ===============================================================
MARQUEE BAR — scrolling trust strip (replaces counters)
=============================================================== */
.marquee-bar {
background: linear-gradient(90deg, #0e0c0a 0%, #1a1510 50%, #0e0c0a 100%);
border-top: 1px solid rgba(200,169,110,0.15);
border-bottom: 1px solid rgba(200,169,110,0.15);
padding: 22px 0;
overflow: hidden;
position: relative;
}
/* fade edges */
.marquee-bar::before, .marquee-bar::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.marquee-bar::before { left: 0; background: linear-gradient(90deg, #0e0c0a, transparent); }
.marquee-bar::after { right: 0; background: linear-gradient(270deg, #0e0c0a, transparent); }
.marquee-track {
display: flex;
width: max-content;
animation: marqueeScroll 32s linear infinite;
}
.marquee-bar:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-group {
display: flex;
align-items: center;
flex-shrink: 0;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 28px;
color: #e8e2d6;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.5px;
white-space: nowrap;
transition: color 0.3s;
}
.marquee-item:hover { color: #fff; }
.marquee-item svg {
width: 26px; height: 26px;
color: #c8a96e;
flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(200,169,110,0.3));
}
.marquee-dot {
color: rgba(200,169,110,0.5);
font-size: 12px;
flex-shrink: 0;
}
@media (max-width: 600px){
.marquee-bar { padding: 16px 0; }
.marquee-item { font-size: 13px; padding: 0 18px; gap: 9px; }
.marquee-item svg { width: 22px; height: 22px; }
.marquee-track { animation-duration: 24s; }
}
/* ===============================================================
FOOTER — modern redesign v2
=============================================================== */
.site-footer {
background: linear-gradient(180deg, #100d0a 0%, #0a0807 100%);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,169,110,0.3), transparent);
}
/* --- Newsletter CTA band --- */
.footer-cta {
border-bottom: 1px solid rgba(200,169,110,0.12);
padding: 48px 24px;
background: radial-gradient(ellipse at center, rgba(200,169,110,0.06), transparent 70%);
}
.footer-cta-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.footer-cta-text h3 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 28px;
font-weight: 500;
margin: 0 0 6px;
}
.footer-cta-text p { color: #999; font-size: 14px; margin: 0; }
.footer-cta-form {
display: flex;
gap: 12px;
align-items: stretch;
flex: 1;
min-width: 320px;
max-width: 480px;
}
.footer-cta-field {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.footer-cta-field svg {
position: absolute;
left: 16px;
color: #c8a96e;
pointer-events: none;
}
.footer-cta-field input {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(200,169,110,0.25);
border-radius: 12px;
padding: 16px 16px 16px 46px;
color: #fff;
font-size: 14px;
outline: none;
transition: border-color 0.25s, background 0.25s;
}
.footer-cta-field input:focus { border-color: #c8a96e; background: rgba(255,255,255,0.07); }
.footer-cta-field label {
position: absolute;
left: 46px;
color: #888;
font-size: 14px;
pointer-events: none;
transition: all 0.2s;
}
.footer-cta-field input:focus + label,
.footer-cta-field input:not(:placeholder-shown) + label {
top: -8px; left: 14px;
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: #c8a96e;
background: #0d0a08;
padding: 0 6px;
}
.footer-cta-form button {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
border: none;
padding: 0 28px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s cubic-bezier(.16,1,.3,1);
}
.footer-cta-form button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(200,169,110,0.6); }
.footer-cta-form button svg { transition: transform 0.3s; }
.footer-cta-form button:hover svg { transform: translateX(4px); }
@media (max-width: 700px){ .footer-cta-form{ min-width: 100%; max-width: 100%; } }
/* --- Main footer grid --- */
.footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 70px 24px 50px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 50px;
}
@media (max-width: 900px){ .footer-inner{ grid-template-columns: 1fr 1fr; gap: 40px 30px; } }
@media (max-width: 540px){ .footer-inner{ grid-template-columns: 1fr; } }
.footer-tagline { color: #888; font-size: 14px; margin: 18px 0 26px; line-height: 1.6; }
/* Social icons — modern */
.footer-social { display: flex; gap: 12px; }
.footer-social a {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(200,169,110,0.18);
color: #c8a96e;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.35s cubic-bezier(.16,1,.3,1);
position: relative;
overflow: hidden;
}
.footer-social a::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(.16,1,.3,1);
}
.footer-social a svg { position: relative; z-index: 2; transition: color 0.35s; }
.footer-social a:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 10px 24px -8px rgba(200,169,110,0.5); }
.footer-social a:hover::before { transform: translateY(0); }
.footer-social a:hover svg { color: #0a0a0a; }
/* Link columns */
.footer-col h4 {
color: #c8a96e;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 22px;
position: relative;
padding-bottom: 12px;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 24px; height: 2px;
background: linear-gradient(90deg, #c8a96e, transparent);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 13px; }
.footer-col a {
color: #999;
text-decoration: none;
font-size: 14px;
transition: all 0.25s;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
}
.footer-col a::before {
content: '';
width: 0; height: 1px;
background: #c8a96e;
transition: width 0.3s;
}
.footer-col a:hover { color: #e6c78a; }
.footer-col a:hover::before { width: 14px; }
/* Payment chips */
.footer-payments {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
border-top: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.footer-pay-label { color: #777; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }
.footer-pay-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-chip {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 7px 14px;
color: #bbb;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.25s;
}
.pay-chip:hover { border-color: rgba(200,169,110,0.4); color: #e6c78a; transform: translateY(-2px); }
/* Bottom bar */
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
border-top: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
color: #777;
font-size: 13px;
}
.footer-bottom-links { display: flex; align-items: center; gap: 12px; }
.footer-bottom-links a { color: #999; text-decoration: none; transition: color 0.25s; }
.footer-bottom-links a:hover { color: #e6c78a; }
.footer-sep { color: #444; }
.footer-totop {
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(200,169,110,0.1);
border: 1px solid rgba(200,169,110,0.3);
color: #c8a96e;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.footer-totop:hover { background: linear-gradient(135deg, #e6c78a, #c8a96e); color: #0a0a0a; transform: translateY(-3px); border-color: transparent; }
@media (max-width: 600px){ .footer-bottom{ justify-content: center; text-align: center; } }
/* ===============================================================
HERO FINAL — no watch card, centered elegant
=============================================================== */
.hero-watch-float { display: none !important; }
.hero-scroll-hint { display: none !important; }
.hero-content {
max-width: 900px !important;
margin: 0 auto !important;
align-items: center !important;
text-align: center !important;
}
.hero-eyebrow { margin-left: auto; margin-right: auto; }
.hero-sub { margin-left: auto !important; margin-right: auto !important; }
.hero-btns { justify-content: center !important; }
/* dots clean, centered, above any seam */
.hero-controls {
bottom: 36px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 8 !important;
}
/* ===============================================================
FEATURED PRODUCTS v2 — conversion-focused
=============================================================== */
.featured-v2 {
background: #faf8f4;
padding: 84px 0;
}
.featured-v2 .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* Header: title left, CTA right */
.featured-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 44px;
gap: 20px;
flex-wrap: wrap;
}
.featured-head-left { text-align: left; }
.featured-head-left .section-eyebrow { text-align: left; }
.featured-head-left .section-eyebrow::after { left: 0; transform: none; }
.featured-head-left .section-title { text-align: left; font-size: clamp(28px, 4vw, 44px); margin: 6px 0 0; }
.featured-head-cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: #b08d4f;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.featured-head-cta:hover { border-bottom-color: #c8a96e; gap: 14px; }
/* Grid: 4 across, tighter */
.featured-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
@media (max-width: 1000px){ .featured-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .featured-grid{ grid-template-columns: 1fr 1fr; gap: 14px; } }
.fcard {
display: block;
background: #fff;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 18px -10px rgba(0,0,0,0.12);
transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s;
}
.fcard:hover {
transform: translateY(-8px);
box-shadow: 0 30px 55px -25px rgba(176,141,79,0.4);
}
.fcard-img {
position: relative;
aspect-ratio: 1/1;
overflow: hidden;
background: linear-gradient(135deg, #f0ece4, #e6e0d5);
}
.fcard-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(.16,1,.3,1);
}
.fcard:hover .fcard-img img { transform: scale(1.08); }
/* Saving badge (red-ish gold for urgency) */
.fcard-save {
position: absolute;
top: 12px; left: 12px;
background: linear-gradient(135deg, #c0392b, #e74c3c);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 8px;
letter-spacing: 0.5px;
box-shadow: 0 6px 16px -6px rgba(192,57,43,0.5);
z-index: 2;
}
.fcard-tag {
position: absolute;
top: 12px; left: 12px;
background: rgba(20,16,12,0.85);
backdrop-filter: blur(6px);
color: #e6c78a;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 6px 12px;
border-radius: 20px;
z-index: 2;
}
/* Hover overlay */
.fcard-hover {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(15,12,9,0.7));
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 18px;
opacity: 0;
transition: opacity 0.4s;
}
.fcard:hover .fcard-hover { opacity: 1; }
.fcard-hover-btn {
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
transform: translateY(10px);
transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.fcard:hover .fcard-hover-btn { transform: translateY(0); }
.fcard-body { padding: 18px 18px 20px; }
.fcard-brand {
color: #b08d4f;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 6px;
}
.fcard-name {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 12px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 40px;
}
.fcard-price-row { display: flex; align-items: baseline; gap: 10px; }
.fcard-price {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
.fcard-compare {
font-size: 14px;
color: #b0b0b0;
text-decoration: line-through;
}
/* Footer trust + CTA */
.featured-foot {
margin-top: 50px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
padding: 28px 36px;
background: linear-gradient(135deg, #fff, #faf6ee);
border: 1px solid rgba(200,169,110,0.25);
border-radius: 20px;
box-shadow: 0 20px 50px -28px rgba(176,141,79,0.4);
}
.featured-foot-trust {
display: inline-flex;
align-items: center;
gap: 12px;
color: #333;
font-size: 15px;
font-weight: 600;
}
.featured-foot-trust svg {
color: #b08d4f;
width: 28px; height: 28px;
padding: 6px;
background: rgba(200,169,110,0.12);
border-radius: 50%;
box-sizing: content-box;
}
.featured-foot-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
color: #fff;
padding: 16px 38px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s cubic-bezier(.16,1,.3,1);
white-space: nowrap;
}
.featured-foot-btn::after {
content: '→';
transition: transform 0.3s;
}
.featured-foot-btn:hover {
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
transform: translateY(-3px);
box-shadow: 0 16px 40px -12px rgba(200,169,110,0.5);
}
.featured-foot-btn:hover::after { transform: translateX(4px); }
@media (max-width: 600px){
.featured-foot { flex-direction: column; text-align: center; padding: 24px; gap: 18px; }
.featured-foot-btn { width: 100%; justify-content: center; }
}
/* ===============================================================
FIX — eyebrow pill text visibility on dark page heroes
=============================================================== */
.page-hero .section-eyebrow,
.page-hero-content .section-eyebrow,
.page-hero--small .section-eyebrow {
color: #e6c78a !important;
-webkit-text-fill-color: #e6c78a !important;
background: rgba(200,169,110,0.1);
border: 1px solid rgba(200,169,110,0.35);
display: inline-block;
padding: 8px 20px;
border-radius: 30px;
backdrop-filter: blur(8px);
}
.page-hero .section-eyebrow span,
.page-hero-content .section-eyebrow span,
.page-hero--small .section-eyebrow span {
color: #e6c78a !important;
-webkit-text-fill-color: #e6c78a !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
}
.page-hero .section-eyebrow::after,
.page-hero-content .section-eyebrow::after,
.page-hero--small .section-eyebrow::after { display: none !important; }
/* ===============================================================
TESTIMONIALS — social proof
=============================================================== */
.testi-section {
background: linear-gradient(180deg, #0e0c0a 0%, #14110d 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.testi-bg-glow {
position: absolute;
top: -100px; left: 50%;
transform: translateX(-50%);
width: 600px; height: 400px;
background: radial-gradient(ellipse, rgba(200,169,110,0.1), transparent 70%);
pointer-events: none;
}
.testi-section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.testi-section .section-eyebrow { color: #c8a96e; }
.testi-section .section-title { color: #fff; }
.testi-section .section-title em { color: #c8a96e; font-style: italic; }
.testi-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.testi-stars { color: #e6c78a; font-size: 20px; letter-spacing: 3px; }
.testi-rating-text { color: #aaa; font-size: 14px; }
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
@media (max-width: 860px){ .testi-grid{ grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.testi-card {
background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(200,169,110,0.15);
border-radius: 18px;
padding: 32px 28px;
transition: all 0.45s cubic-bezier(.16,1,.3,1);
position: relative;
}
.testi-card::before {
content: '"';
position: absolute;
top: 14px; right: 24px;
font-family: 'Playfair Display', serif;
font-size: 70px;
color: rgba(200,169,110,0.15);
line-height: 1;
}
.testi-card:hover {
transform: translateY(-8px);
border-color: rgba(200,169,110,0.4);
box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
}
.testi-card-stars { color: #e6c78a; font-size: 15px; letter-spacing: 2px; margin-bottom: 16px; }
.testi-quote {
color: #ddd;
font-size: 15px;
line-height: 1.75;
margin: 0 0 24px;
font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.testi-name { color: #fff; font-weight: 600; font-size: 14px; }
.testi-verified { color: #6cc070; font-size: 12px; margin-top: 2px; }
/* sales pop entrance pulse on icon */
#nw-sales-pop.show .nw-sp-img { animation: spPulse 2s ease-in-out infinite; }
@keyframes spPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(200,169,110,0.4); }
50% { box-shadow: 0 0 0 8px rgba(200,169,110,0); }
}
/* testimonial stars subtle shimmer */
.testi-stars, .testi-card-stars {
background: linear-gradient(90deg, #c8a96e, #f3e0b5, #c8a96e);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShimmer 4s linear infinite;
}
/* ===============================================================
FOOTER PAYMENT ICONS (card SVGs)
=============================================================== */
.footer-pay-icons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pay-icon {
display: inline-flex;
width: 48px; height: 32px;
border-radius: 7px;
overflow: hidden;
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.08);
transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s;
}
.pay-icon svg { width: 100%; height: 100%; display: block; }
.pay-icon:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 18px -6px rgba(200,169,110,0.4);
}
/* ===============================================================
TESTIMONIALS CAROUSEL
=============================================================== */
.testi-carousel {
position: relative;
margin-top: 56px;
display: flex;
align-items: center;
gap: 16px;
}
.testi-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 4px 20px;
flex: 1;
-ms-overflow-style: none;
scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-track .testi-card {
flex: 0 0 calc(33.333% - 16px);
scroll-snap-align: start;
min-width: 0;
}
@media (max-width: 900px){ .testi-track .testi-card { flex: 0 0 calc(50% - 12px); } }
@media (max-width: 600px){ .testi-track .testi-card { flex: 0 0 88%; } }
.testi-arrow {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(200,169,110,0.3);
color: #c8a96e;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.testi-arrow:hover {
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
border-color: transparent;
transform: scale(1.08);
}
@media (max-width: 600px){ .testi-arrow { display: none; } }
.testi-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.testi-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(200,169,110,0.25);
border: none;
cursor: pointer;
transition: all 0.3s;
padding: 0;
}
.testi-dot.active { background: #c8a96e; width: 24px; border-radius: 4px; }
/* ===============================================================
HEADER TOP BAR — premium switchers with flags
=============================================================== */
.flag-icon {
display: inline-flex;
width: 20px; height: 14px;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
flex-shrink: 0;
}
.flag-icon svg { display: block; width: 100%; height: 100%; }
.lang-btn, .currency-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(200,169,110,0.25);
color: #e8e2d6;
padding: 8px 14px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s cubic-bezier(.16,1,.3,1);
}
.lang-btn:hover, .currency-btn:hover {
border-color: rgba(200,169,110,0.6);
background: rgba(200,169,110,0.1);
transform: translateY(-1px);
}
.lang-btn svg:last-child, .currency-btn svg:last-child {
transition: transform 0.3s;
opacity: 0.6;
}
.lang-dropdown.open ~ .lang-btn svg:last-child { transform: rotate(180deg); }
/* Dropdowns */
.lang-dropdown, .currency-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
background: rgba(20,17,12,0.97);
backdrop-filter: blur(16px);
border: 1px solid rgba(200,169,110,0.25);
border-radius: 12px;
padding: 6px;
box-shadow: 0 20px 50px -15px rgba(0,0,0,0.6);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.3s cubic-bezier(.16,1,.3,1);
z-index: 100;
}
.lang-dropdown.open, .currency-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-option, .currency-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background: none;
border: none;
color: #ccc;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 0.2s;
}
.lang-option:hover, .currency-option:hover {
background: rgba(200,169,110,0.12);
color: #fff;
}
.lang-option.active, .currency-option.active {
background: rgba(200,169,110,0.18);
color: #e6c78a;
}
.lang-option.active::after, .currency-option.active::after {
content: '✓';
margin-left: auto;
color: #c8a96e;
font-size: 12px;
}
/* Header icons polish */
.header-icon {
position: relative;
color: #e8e2d6;
transition: all 0.3s cubic-bezier(.16,1,.3,1);
display: inline-flex;
}
.header-icon:hover { color: #e6c78a; transform: translateY(-2px); }
/* Cart badge */
.cart-count, .cart-badge {
background: linear-gradient(135deg, #e6c78a, #c8a96e) !important;
color: #0a0a0a !important;
font-weight: 700;
}
/* ===============================================================
ANNOUNCEMENT BAR v2 — refined scrolling strip
=============================================================== */
.announce-bar {
background: linear-gradient(90deg, #0a0807 0%, #16120c 50%, #0a0807 100%);
border-bottom: 1px solid rgba(200,169,110,0.15);
overflow: hidden;
position: relative;
padding: 9px 0;
}
.announce-bar::before, .announce-bar::after {
content: '';
position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.announce-bar::before { left: 0; background: linear-gradient(90deg, #0a0807, transparent); }
.announce-bar::after { right: 0; background: linear-gradient(270deg, #0a0807, transparent); }
.announce-track {
display: flex;
width: max-content;
animation: announceScroll 38s linear infinite;
}
.announce-bar:hover .announce-track { animation-play-state: paused; }
@keyframes announceScroll { 0%{ transform: translateX(0);} 100%{ transform: translateX(-50%);} }
.announce-set { display: flex; flex-shrink: 0; }
.announce-item {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0 30px;
color: #d8cdb8;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
}
.announce-item svg { width: 16px; height: 16px; color: #c8a96e; flex-shrink: 0; }
/* ===============================================================
CURRENCY ICONS + improved switcher visuals
=============================================================== */
.curr-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.currency-option { position: relative; }
.curr-sub {
margin-left: auto;
color: #888;
font-size: 11px;
font-weight: 400;
}
.currency-option.active .curr-sub { color: #b08d4f; }
/* hide the default ✓ for currency since we have sub-labels */
.currency-option.active::after { content: ''; }
/* Bigger tap targets + nicer spacing on switchers */
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-selector, .currency-selector { position: relative; }
/* ===============================================================
WATCHES GRID — modern compact cards, 5 per row
=============================================================== */
.watches-grid-simple {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 18px !important;
}
@media (max-width: 1200px){ .watches-grid-simple{ grid-template-columns: repeat(4,1fr) !important; } }
@media (max-width: 980px){ .watches-grid-simple{ grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 680px){ .watches-grid-simple{ grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; } }
/* Compact modern card */
.watches-grid-simple .watch-card,
.watches-grid-simple .product-card {
background: #fff !important;
border: 1px solid rgba(0,0,0,0.05) !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 2px 12px -6px rgba(0,0,0,0.1) !important;
transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s !important;
}
.watches-grid-simple .watch-card:hover,
.watches-grid-simple .product-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 44px -22px rgba(176,141,79,0.4) !important;
border-color: rgba(176,141,79,0.25) !important;
}
/* Image — square, no big black bands */
.watches-grid-simple .product-img-wrap {
aspect-ratio: 1/1 !important;
background: linear-gradient(135deg, #f4f1ec, #e9e4db) !important;
}
.watches-grid-simple .product-img {
width: 100% !important; height: 100% !important;
object-fit: cover !important;
}
/* Info — tighter */
.watches-grid-simple .product-info {
padding: 14px 14px 16px !important;
}
.watches-grid-simple .product-brand {
font-size: 9px !important;
letter-spacing: 1.5px !important;
margin-bottom: 5px !important;
}
.watches-grid-simple .product-name {
font-family: 'Inter', sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
margin: 0 0 12px !important;
min-height: 36px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.watches-grid-simple .product-footer {
padding-top: 12px !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
}
.watches-grid-simple .product-price {
font-family: 'Playfair Display', serif !important;
font-size: 17px !important;
font-weight: 700 !important;
}
/* Compact add button → icon only on small */
.watches-grid-simple .product-add-btn {
padding: 9px 14px !important;
font-size: 10px !important;
}
@media (max-width: 1200px){
.watches-grid-simple .product-add-btn span { display: none; }
.watches-grid-simple .product-add-btn { padding: 9px 11px !important; }
}
/* Sold out — subtle */
.watches-grid-simple .product-footer span[data-i18n="sold_out"] {
font-size: 9px !important;
color: #b0b0b0 !important;
}
/* Badges smaller */
.watches-grid-simple .product-badge {
top: 10px !important; left: 10px !important;
padding: 5px 10px !important;
font-size: 9px !important;
letter-spacing: 1px !important;
}
/* Overlay button smaller */
.watches-grid-simple .overlay-btn {
padding: 9px 18px !important;
font-size: 10px !important;
}
/* ===============================================================
ABOUT v2 — cinematic video showcase
=============================================================== */
.about-v2 {
background: #fff;
padding: 110px 0;
position: relative;
overflow: hidden;
}
.about-v2-grid {
max-width: 1240px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
@media (max-width: 900px){ .about-v2-grid{ grid-template-columns: 1fr; gap: 48px; padding: 0 24px; } }
/* Media side */
.about-v2-media { position: relative; }
.about-v2-video-wrap {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: 0 50px 100px -40px rgba(0,0,0,0.5);
}
.about-v2-video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.about-v2-video-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,8,6,0.6));
pointer-events: none;
}
.about-v2-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 72px; height: 72px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(255,255,255,0.4);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s;
opacity: 0;
}
.about-v2-video-wrap:hover .about-v2-play { opacity: 1; }
.about-v2-play svg { width: 28px; height: 28px; margin-left: 3px; }
.about-v2-play::before {
content: '';
position: absolute; inset: -8px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.25);
animation: aboutPlayPulse 2s ease-out infinite;
}
@keyframes aboutPlayPulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
.about-v2-play:hover { background: rgba(200,169,110,0.4); border-color: #c8a96e; }
.about-v2-media-tag {
position: absolute;
top: 20px; left: 20px;
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(15,12,9,0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(200,169,110,0.3);
color: #e6c78a;
padding: 9px 16px;
border-radius: 30px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
z-index: 3;
}
.about-v2-tag-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #e74c3c;
animation: spLiveDot 1.5s ease-in-out infinite;
}
/* Floating stat card */
.about-v2-float-stat {
position: absolute;
bottom: -28px; right: -20px;
background: linear-gradient(135deg, #1a1612, #0e0c0a);
border: 1px solid rgba(200,169,110,0.3);
border-radius: 18px;
padding: 22px 28px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
z-index: 4;
}
@media (max-width: 900px){ .about-v2-float-stat{ right: 16px; bottom: -20px; } }
.about-v2-float-num {
font-family: 'Playfair Display', serif;
font-size: 34px;
font-weight: 700;
color: #c8a96e;
line-height: 1;
}
.about-v2-float-label {
color: #aaa;
font-size: 11px;
letter-spacing: 0.5px;
margin-top: 4px;
max-width: 140px;
}
/* Content side */
.about-v2-content .section-eyebrow { text-align: left; }
.about-v2-content .section-eyebrow::after { left: 0; transform: none; }
.about-v2-title {
font-family: 'Playfair Display', serif;
font-size: clamp(32px, 4.5vw, 50px);
font-weight: 500;
line-height: 1.1;
color: #1a1a1a;
margin: 10px 0 24px;
}
.about-v2-title em { font-style: italic; color: #b08d4f; }
.about-v2-lead {
font-size: 17px;
line-height: 1.7;
color: #444;
margin: 0 0 16px;
font-weight: 500;
}
.about-v2-text {
font-size: 15px;
line-height: 1.8;
color: #777;
margin: 0 0 28px;
}
.about-v2-features {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.about-v2-feature {
display: inline-flex;
align-items: center;
gap: 10px;
color: #333;
font-size: 14px;
font-weight: 600;
}
.about-v2-feature svg { width: 22px; height: 22px; color: #b08d4f; }
.about-v2-stats {
display: flex;
gap: 40px;
padding: 28px 0;
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 32px;
flex-wrap: wrap;
}
.about-v2-stat-num {
font-family: 'Playfair Display', serif;
font-size: 34px;
font-weight: 700;
color: #b08d4f;
line-height: 1;
}
.about-v2-stat-label {
color: #999;
font-size: 12px;
letter-spacing: 0.5px;
margin-top: 6px;
}
.about-v2-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
color: #fff;
padding: 16px 36px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s cubic-bezier(.16,1,.3,1);
}
.about-v2-btn:hover {
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
transform: translateY(-3px);
box-shadow: 0 16px 40px -12px rgba(200,169,110,0.5);
}
.about-v2-btn svg { transition: transform 0.3s; }
.about-v2-btn:hover svg { transform: translateX(4px); }
/* ===============================================================
TOP BAR v3 — static premium with gradient + shimmer border
=============================================================== */
.topbar {
background:
linear-gradient(90deg, #0a0807 0%, #1a140c 25%, #221a10 50%, #1a140c 75%, #0a0807 100%);
position: relative;
overflow: hidden;
}
/* animated gold shimmer line along bottom */
.topbar::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,169,110,0.6), transparent);
background-size: 50% 100%;
background-repeat: no-repeat;
animation: topbarShimmer 5s linear infinite;
}
@keyframes topbarShimmer {
0% { background-position: -50% 0; }
100% { background-position: 150% 0; }
}
.topbar-inner {
max-width: 1300px;
margin: 0 auto;
padding: 11px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
flex-wrap: wrap;
}
.topbar-item {
display: inline-flex;
align-items: center;
gap: 9px;
color: #d8cdb8;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
white-space: nowrap;
}
.topbar-item svg {
width: 17px; height: 17px;
color: #c8a96e;
flex-shrink: 0;
}
.topbar-sep {
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(200,169,110,0.4);
flex-shrink: 0;
}
@media (max-width: 900px){
.topbar-item--hide, .topbar-sep--hide { display: none; }
.topbar-inner { gap: 16px; }
.topbar-item { font-size: 11px; }
}
@media (max-width: 560px){
.topbar-inner { gap: 12px; padding: 9px 16px; }
.topbar-item span { font-size: 10px; }
.topbar-item svg { width: 15px; height: 15px; }
}
/* ===============================================================
PAGE ABOUT v2 — cinematic
=============================================================== */
.abt { background: #faf8f4; }
/* Hero with video */
.abt-hero {
position: relative;
height: 88vh;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.abt-hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.abt-hero-overlay {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, rgba(7,6,5,0.4), rgba(7,6,5,0.8)),
linear-gradient(180deg, rgba(7,6,5,0.6), transparent 40%, rgba(7,6,5,0.85));
}
.abt-hero-content {
position: relative; z-index: 2;
max-width: 800px;
padding: 0 24px;
}
.abt-hero-eyebrow {
display: inline-block;
color: #e6c78a;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 24px;
padding: 8px 20px;
border: 1px solid rgba(200,169,110,0.4);
border-radius: 30px;
background: rgba(200,169,110,0.08);
backdrop-filter: blur(10px);
}
.abt-hero-title {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: clamp(40px, 7vw, 84px);
font-weight: 500;
line-height: 1.05;
margin: 0 0 24px;
text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.abt-hero-title em { font-style: italic; color: #c8a96e; }
.abt-hero-sub {
color: rgba(255,255,255,0.8);
font-size: clamp(15px, 2vw, 19px);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
font-weight: 300;
}
.abt-hero-scroll {
position: absolute;
bottom: 30px; left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.6);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
.abt-scroll-line {
width: 1px; height: 40px;
background: linear-gradient(180deg, #c8a96e, transparent);
animation: abtScrollLine 2s ease-in-out infinite;
}
@keyframes abtScrollLine { 0%,100%{ opacity: 0.3; transform: scaleY(0.6);} 50%{ opacity: 1; transform: scaleY(1);} }
/* Intro */
.abt-intro { padding: 110px 0; background: #fff; }
.abt-intro-grid {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
@media (max-width: 880px){ .abt-intro-grid{ grid-template-columns: 1fr; gap: 40px; padding: 0 24px; } }
.abt-intro-media { position: relative; }
.abt-intro-media img {
width: 100%;
border-radius: 20px;
box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4);
}
.abt-est-badge {
position: absolute;
bottom: -24px; right: -16px;
background: linear-gradient(135deg, #1a1612, #0e0c0a);
border: 1px solid rgba(200,169,110,0.3);
border-radius: 16px;
padding: 18px 24px;
text-align: center;
box-shadow: 0 24px 50px -18px rgba(0,0,0,0.5);
}
.abt-est-badge span { display: block; color: #999; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.abt-est-badge strong { display: block; color: #c8a96e; font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; }
.abt-intro-text .section-eyebrow { text-align: left; }
.abt-intro-text .section-eyebrow::after { left: 0; transform: none; }
.abt-h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 500;
color: #1a1a1a;
margin: 10px 0 22px;
line-height: 1.15;
}
.abt-h2 em { font-style: italic; color: #b08d4f; }
.abt-intro-text p { color: #666; font-size: 15.5px; line-height: 1.85; margin: 0 0 16px; }
.abt-signature { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.abt-sig-line { width: 40px; height: 2px; background: #c8a96e; }
.abt-signature span { font-family: 'Playfair Display', serif; font-style: italic; color: #b08d4f; font-size: 17px; }
/* Values */
.abt-values { padding: 100px 0; background: #faf8f4; }
.abt-values .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.abt-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
@media (max-width: 800px){ .abt-values-grid{ grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
.abt-value {
background: #fff;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 18px;
padding: 38px 30px;
text-align: center;
transition: all 0.45s cubic-bezier(.16,1,.3,1);
}
.abt-value:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -25px rgba(176,141,79,0.35); border-color: rgba(176,141,79,0.3); }
.abt-value-icon {
width: 64px; height: 64px;
margin: 0 auto 22px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200,169,110,0.12), transparent 70%);
display: flex; align-items: center; justify-content: center;
color: #b08d4f;
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.abt-value:hover .abt-value-icon { transform: scale(1.12) rotate(-6deg); }
.abt-value-icon svg { width: 32px; height: 32px; }
.abt-value h3 { font-family: 'Playfair Display', serif; font-size: 21px; color: #1a1a1a; margin: 0 0 12px; }
.abt-value p { color: #777; font-size: 14px; line-height: 1.7; margin: 0; }
/* Stats strip */
.abt-stats-strip {
background: linear-gradient(90deg, #0e0c0a, #1a140c, #0e0c0a);
padding: 60px 24px;
}
.abt-stats-inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.abt-stat { text-align: center; flex: 1; min-width: 120px; }
.abt-stat-num { font-family: 'Playfair Display', serif; font-size: clamp(34px, 4vw, 48px); font-weight: 700; color: #c8a96e; line-height: 1; }
.abt-stat-label { color: #999; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 8px; }
/* CTA */
.abt-cta {
position: relative;
padding: 120px 24px;
text-align: center;
overflow: hidden;
}
.abt-cta-bg { position: absolute; inset: -10% 0; background-size: cover; background-position: center; }
.abt-cta-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(7,6,5,0.6), rgba(7,6,5,0.9)); }
.abt-cta-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.abt-cta-content h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: clamp(30px, 5vw, 52px); font-weight: 500; margin: 0 0 16px; }
.abt-cta-content h2 em { font-style: italic; color: #c8a96e; }
.abt-cta-content p { color: rgba(255,255,255,0.75); font-size: 16px; margin: 0 0 32px; }
.abt-cta-btn {
display: inline-flex; align-items: center; gap: 10px;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a; padding: 18px 44px; border-radius: 50px;
font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
text-decoration: none; transition: all 0.4s cubic-bezier(.16,1,.3,1);
box-shadow: 0 16px 50px -12px rgba(200,169,110,0.5);
}
.abt-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -12px rgba(200,169,110,0.7); }
.abt-cta-btn svg { transition: transform 0.3s; }
.abt-cta-btn:hover svg { transform: translateX(4px); }
/* ===============================================================
SITE HEADER v3 — premium animated nav bar
=============================================================== */
.site-header {
position: relative !important;
z-index: 2 !important;
background: linear-gradient(180deg, rgba(12,10,8,0.95), rgba(12,10,8,0.85)) !important;
backdrop-filter: blur(18px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
border-bottom: 1px solid rgba(200,169,110,0.15) !important;
transition: all 0.4s cubic-bezier(.16,1,.3,1) !important;
}
/* animated gold gradient line under header */
.site-header::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.5) 50%, transparent 100%);
background-size: 50% 100%;
background-repeat: no-repeat;
animation: headerLineFlow 6s linear infinite;
}
@keyframes headerLineFlow {
0% { background-position: -50% 0; }
100% { background-position: 150% 0; }
}
.site-header.scrolled {
background: rgba(10,9,7,0.98) !important;
box-shadow: 0 10px 40px -20px rgba(0,0,0,0.6) !important;
}
/* Nav links — animated underline + glow */
.main-nav .nav-link {
padding: 10px 20px !important;
color: #d8d2c4 !important;
font-size: 12px !important;
letter-spacing: 2px !important;
font-weight: 600 !important;
transition: color 0.35s cubic-bezier(.16,1,.3,1) !important;
}
.main-nav .nav-link span::before,
.main-nav .nav-link span::after {
bottom: -5px !important;
height: 2px !important;
background: linear-gradient(90deg, #e6c78a, #c8a96e) !important;
}
.main-nav .nav-link:hover { color: #e6c78a !important; }
/* subtle scale on hover */
.main-nav .nav-link:hover span { animation: navLetterPop 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes navLetterPop { 0%{ transform: translateY(0);} 50%{ transform: translateY(-3px);} 100%{ transform: translateY(0);} }
/* Logo subtle glow + hover */
.site-logo { transition: transform 0.4s cubic-bezier(.16,1,.3,1); }
.site-logo:hover { transform: scale(1.03); }
.site-logo svg, .site-logo img { transition: filter 0.4s; }
.site-logo:hover svg, .site-logo:hover img { filter: drop-shadow(0 0 12px rgba(200,169,110,0.4)); }
/* Header icons — premium hover */
.header-icon {
position: relative;
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: #e8e2d6 !important;
transition: all 0.35s cubic-bezier(.16,1,.3,1) !important;
}
.header-icon::before {
content: '';
position: absolute; inset: 0;
border-radius: 10px;
background: rgba(200,169,110,0.12);
opacity: 0;
transform: scale(0.6);
transition: all 0.35s cubic-bezier(.16,1,.3,1);
}
.header-icon:hover { color: #e6c78a !important; transform: translateY(-2px); }
.header-icon:hover::before { opacity: 1; transform: scale(1); }
.header-icon svg { position: relative; z-index: 2; }
/* Cart badge pulse */
.cart-count, .cart-badge {
background: linear-gradient(135deg, #e6c78a, #c8a96e) !important;
color: #0a0a0a !important;
font-weight: 800 !important;
box-shadow: 0 0 0 0 rgba(200,169,110,0.5);
animation: cartBadgePulse 2.5s ease-in-out infinite;
}
@keyframes cartBadgePulse {
0%,100% { box-shadow: 0 0 0 0 rgba(200,169,110,0.5); }
50% { box-shadow: 0 0 0 6px rgba(200,169,110,0); }
}
/* Switcher pills — refined glassy */
.lang-btn, .currency-btn {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(200,169,110,0.3) !important;
border-radius: 12px !important;
padding: 9px 14px !important;
transition: all 0.35s cubic-bezier(.16,1,.3,1) !important;
}
.lang-btn:hover, .currency-btn:hover {
background: rgba(200,169,110,0.15) !important;
border-color: rgba(200,169,110,0.6) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px -8px rgba(200,169,110,0.4);
}
/* vertical divider before icons */
.header-actions::before {
content: '';
width: 1px; height: 24px;
background: rgba(200,169,110,0.2);
margin: 0 4px;
align-self: center;
}
/* ===============================================================
LOGO v2 — refined, animated
=============================================================== */
.nw-logo {
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
text-decoration: none !important;
}
.nw-mark {
display: inline-flex !important;
position: relative;
}
.nw-mark svg {
width: 46px !important;
height: 46px !important;
display: block;
transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
/* gentle rotate of the whole mark on hover */
.nw-logo:hover .nw-mark svg {
transform: rotate(8deg) scale(1.05);
}
/* glow ring behind mark on hover */
.nw-mark::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200,169,110,0.35), transparent 70%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: -1;
}
.nw-logo:hover .nw-mark::after { opacity: 1; }
.nw-word {
display: inline-flex !important;
align-items: baseline !important;
gap: 8px !important;
line-height: 1 !important;
}
.nw-noble {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
background: linear-gradient(135deg, #f0dcab, #d4b676 55%, #b08d4f) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.nw-watch {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 400 !important;
font-style: italic !important;
color: #e8ddc8 !important;
letter-spacing: 0.3px !important;
}
.nw-sep { display: none !important; }
/* sizes */
.nw-logo--small .nw-mark svg { width: 38px !important; height: 38px !important; }
.nw-logo--small .nw-noble, .nw-logo--small .nw-watch { font-size: 21px !important; }
.nw-logo--large .nw-mark svg { width: 58px !important; height: 58px !important; }
.nw-logo--large .nw-noble, .nw-logo--large .nw-watch { font-size: 34px !important; }
/* white variant (for dark footers, keeps gold mark) */
.nw-logo--white .nw-watch { color: #fff !important; }
@media (max-width: 600px){
.nw-logo { gap: 10px !important; }
.nw-mark svg { width: 38px !important; height: 38px !important; }
.nw-noble, .nw-watch { font-size: 21px !important; }
}
/* Video → animated image fallback */
.about-v2-img, .abt-hero-img {
width: 100%; height: 100%;
background-size: cover;
background-position: center;
animation: heroKenBurns 18s ease-in-out infinite alternate;
}
.about-v2-img { position: absolute; inset: 0; }
/* ===============================================================
PROMO BAR — countdown urgency strip
=============================================================== */
.promo-bar {
position: relative;
z-index: 1;
background: linear-gradient(90deg, #b08d4f 0%, #e6c78a 25%, #d4b676 50%, #e6c78a 75%, #b08d4f 100%);
background-size: 200% 100%;
animation: promoShimmer 6s linear infinite;
overflow: hidden;
max-height: 60px;
opacity: 1;
transition: max-height 0.4s ease, opacity 0.4s ease;
}
@keyframes promoShimmer { 0%{ background-position: 0 0;} 100%{ background-position: 200% 0;} }
.promo-bar-inner {
max-width: 1300px;
margin: 0 auto;
padding: 9px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
position: relative;
}
.promo-bar-spark { color: #4a3410; font-size: 14px; animation: promoSpark 2s ease-in-out infinite; }
@keyframes promoSpark { 0%,100%{ transform: rotate(0) scale(1); opacity: 0.7;} 50%{ transform: rotate(90deg) scale(1.2); opacity: 1;} }
.promo-bar-text {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.promo-bar-badge {
background: #1a1208;
color: #e6c78a;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
padding: 4px 10px;
border-radius: 6px;
}
.promo-bar-msg { color: #2a1d08; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; }
.promo-bar-code {
background: rgba(26,18,8,0.15);
border: 1.5px dashed #4a3410;
color: #1a1208;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.5px;
padding: 3px 10px;
border-radius: 6px;
}
.promo-bar-timer {
display: flex;
align-items: center;
gap: 5px;
margin-left: 6px;
}
.promo-time {
background: #1a1208;
color: #e6c78a;
border-radius: 7px;
padding: 5px 8px;
min-width: 38px;
text-align: center;
display: flex;
flex-direction: column;
line-height: 1;
}
.promo-time span { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.promo-time small { font-size: 8px; opacity: 0.7; margin-top: 2px; letter-spacing: 0.5px; }
.promo-colon { color: #1a1208; font-weight: 800; }
.promo-bar-close {
position: absolute;
right: 16px;
background: none;
border: none;
color: #2a1d08;
font-size: 22px;
cursor: pointer;
line-height: 1;
opacity: 0.6;
transition: opacity 0.2s;
}
.promo-bar-close:hover { opacity: 1; }
@media (max-width: 760px){
.promo-bar-msg, .promo-bar-badge { display: none; }
.promo-bar-inner { gap: 10px; }
}
@media (max-width: 480px){
.promo-time { min-width: 32px; padding: 4px 6px; }
.promo-time span { font-size: 13px; }
.promo-bar-close { position: static; }
}
/* ===============================================================
PRODUCT PAGE — promo countdown + low stock
=============================================================== */
.pp-promo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: linear-gradient(135deg, #2a1d0a 0%, #3d2c10 50%, #2a1d0a 100%);
border: 2px solid #c8a96e;
border-radius: 16px;
padding: 18px 22px;
margin: 8px 0 14px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px -12px rgba(200,169,110,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
animation: ppPromoGlow 2.5s ease-in-out infinite;
}
@keyframes ppPromoGlow {
0%,100% { box-shadow: 0 10px 30px -12px rgba(200,169,110,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
50% { box-shadow: 0 10px 40px -10px rgba(200,169,110,0.7), inset 0 1px 0 rgba(255,255,255,0.08); }
}
.pp-promo::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
animation: ppPromoSweep 3s ease-in-out infinite;
}
@keyframes ppPromoSweep { 0%{ left: -100%;} 55%,100%{ left: 180%;} }
.pp-promo-left {
display: flex;
align-items: center;
gap: 13px;
position: relative;
z-index: 2;
}
.pp-promo-left svg {
width: 30px; height: 30px;
color: #f0dcab;
flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(230,199,138,0.6));
}
.pp-promo-text { display: flex; flex-direction: column; }
.pp-promo-title {
color: #fff;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.3px;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.pp-promo-sub {
color: #f0dcab;
font-size: 13px;
font-weight: 700;
margin-top: 3px;
letter-spacing: 0.3px;
}
.pp-promo-timer {
display: flex;
align-items: center;
gap: 6px;
position: relative;
z-index: 2;
}
.pp-promo-time {
background: linear-gradient(135deg, #f0dcab, #c8a96e);
color: #1a1208;
border-radius: 10px;
padding: 9px 11px;
min-width: 50px;
text-align: center;
display: flex;
flex-direction: column;
line-height: 1;
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.4);
}
.pp-promo-time span { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-promo-time small { font-size: 9px; opacity: 0.75; margin-top: 4px; letter-spacing: 0.5px; text-transform: uppercase; }
.pp-promo-colon { color: #f0dcab; font-weight: 800; font-size: 22px; }
.pp-stock-line {
display: flex;
align-items: center;
gap: 9px;
color: #c0392b;
font-size: 13px;
font-weight: 600;
margin-bottom: 18px;
}
.pp-stock-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #e74c3c;
animation: ppStockPulse 1.4s ease-in-out infinite;
}
@keyframes ppStockPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.5); opacity: 1; }
50% { box-shadow: 0 0 0 6px rgba(231,76,60,0); opacity: 0.7; }
}
@media (max-width: 480px){
.pp-promo { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ===============================================================
STICKY TOP STACK — promo + announcement + header glued to top
=============================================================== */
.nw-top-stack {
position: sticky;
top: 0;
z-index: 500;
}
/* ===============================================================
ADMIN PANEL — new tabs (users / newsletter / messages)
=============================================================== */
.admin-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0 16px;
flex-wrap: wrap;
gap: 12px;
}
.admin-section-head h3 {
color: #f0ece4;
font-size: 18px;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.admin-count-pill {
background: rgba(200,169,110,0.2);
color: #e6c78a;
font-size: 12px;
font-weight: 700;
padding: 3px 11px;
border-radius: 20px;
}
.admin-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); }
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 600px;
}
.admin-table thead th {
background: rgba(255,255,255,0.04);
color: #b08d4f;
text-align: left;
padding: 13px 16px;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-table tbody td {
padding: 13px 16px;
color: #d8d2c4;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.admin-table tbody tr:hover { background: rgba(200,169,110,0.05); }
.admin-empty {
padding: 40px 24px;
text-align: center;
color: #888;
font-size: 14px;
}
.admin-banner--info {
background: rgba(52,152,219,0.1);
border: 1px solid rgba(52,152,219,0.3);
}
/* Message cards */
.admin-msg-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 12px;
transition: border-color 0.25s;
}
.admin-msg-card:hover { border-color: rgba(200,169,110,0.3); }
.admin-msg-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.admin-msg-head strong { color: #f0ece4; font-size: 14px; }
.admin-msg-email { color: #c8a96e; font-size: 13px; }
.admin-msg-date { color: #888; font-size: 12px; margin-left: auto; }
.admin-msg-subject {
color: #e6c78a;
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
text-transform: capitalize;
}
.admin-msg-body { color: #c5c0b5; font-size: 14px; line-height: 1.6; }
/* ===============================================================
LIVE CHAT — premium polish v2
=============================================================== */
.nw-chat-panel {
width: 390px !important;
border-radius: 22px !important;
border: 1px solid rgba(200,169,110,0.3) !important;
background: linear-gradient(180deg, #15120e 0%, #0d0b08 100%) !important;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,169,110,0.08) !important;
bottom: 84px !important;
}
/* Header — richer gradient + gold accent line */
.nw-chat-header {
background: linear-gradient(135deg, #221a10 0%, #14100a 100%) !important;
padding: 18px 20px !important;
position: relative;
border-bottom: none !important;
}
.nw-chat-header::after {
content: '';
position: absolute;
bottom: 0; left: 20px; right: 20px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,169,110,0.4), transparent);
}
.nw-chat-avatar {
width: 46px !important;
height: 46px !important;
}
.nw-chat-avatar svg {
box-shadow: 0 4px 14px -4px rgba(200,169,110,0.5);
background: linear-gradient(135deg, #e6c78a, #c8a96e);
}
.nw-chat-title {
font-size: 17px !important;
letter-spacing: 0.3px;
}
.nw-chat-subtitle { display: flex; align-items: center; gap: 6px; }
.nw-chat-status-text { color: #6cc070 !important; font-weight: 600; }
.nw-chat-min {
border-radius: 10px !important;
transition: all 0.25s !important;
}
/* Body — subtle texture */
.nw-chat-body {
padding: 22px 20px !important;
background:
radial-gradient(ellipse at top, rgba(200,169,110,0.04), transparent 60%);
}
/* Welcome */
.nw-chat-welcome h3 { font-size: 21px !important; }
/* Form fields — rounder, glassy */
.nw-chat-field input,
.nw-chat-field textarea,
.nw-chat-field select {
border-radius: 11px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(200,169,110,0.18) !important;
transition: all 0.25s !important;
}
.nw-chat-field input:focus,
.nw-chat-field textarea:focus,
.nw-chat-field select:focus {
border-color: rgba(200,169,110,0.55) !important;
background: rgba(255,255,255,0.07) !important;
outline: none !important;
}
/* Submit — pill + arrow lift */
.nw-chat-submit {
border-radius: 12px !important;
padding: 14px !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #e6c78a, #c8a96e) !important;
transition: all 0.35s cubic-bezier(.16,1,.3,1) !important;
}
.nw-chat-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 28px -8px rgba(200,169,110,0.5) !important;
}
/* Quick buttons — rounder, icon hint */
.nw-chat-quick-btn {
border-radius: 11px !important;
padding: 12px 15px !important;
margin-bottom: 8px !important;
position: relative;
}
.nw-chat-quick-btn::after {
content: '→';
position: absolute;
right: 14px;
opacity: 0;
transition: all 0.25s;
}
.nw-chat-quick-btn:hover::after { opacity: 1; right: 12px; }
/* Toggle button — bigger, refined */
.nw-chat-toggle {
width: 64px !important;
height: 64px !important;
background: linear-gradient(135deg, #f0dcab 0%, #c8a96e 55%, #9a7838 100%) !important;
box-shadow: 0 12px 36px rgba(200,169,110,0.45), 0 2px 10px rgba(0,0,0,0.35) !important;
}
/* Message bubbles — rounder */
.nw-msg { border-radius: 16px !important; padding: 11px 15px !important; }
.nw-msg--me { border-bottom-right-radius: 5px !important; }
.nw-msg--bot, .nw-msg--admin { border-bottom-left-radius: 5px !important; background: rgba(255,255,255,0.05) !important; }
/* Reply bar — rounder input */
.nw-chat-reply-bar { padding: 14px 16px !important; background: rgba(0,0,0,0.25) !important; }
.nw-chat-reply-bar input {
border-radius: 22px !important;
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(200,169,110,0.2) !important;
}
.nw-chat-reply-bar input:focus { border-color: rgba(200,169,110,0.5) !important; outline: none !important; }
@media (max-width: 600px){
.nw-chat-panel { width: calc(100vw - 24px) !important; border-radius: 18px !important; }
}
/* ===============================================================
MOBILE POLISH — comprehensive fixes (<= 600px)
=============================================================== */
@media (max-width: 600px) {
/* prevent any horizontal overflow */
* { max-width: 100%; }
/* Sticky top stack — keep compact so it doesn't eat the screen */
.nw-top-stack { z-index: 500; }
.promo-bar-inner { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
.promo-bar-spark { display: none; }
.promo-bar-timer { gap: 3px; }
.promo-time { min-width: 28px; padding: 3px 5px; }
.promo-time span { font-size: 12px; }
.promo-time small { font-size: 7px; }
.promo-bar-code { font-size: 11px; padding: 2px 7px; }
/* Header — tighter */
.header-inner { padding: 10px 14px !important; gap: 8px !important; }
.nw-noble, .nw-watch { font-size: 19px !important; }
.nw-mark svg { width: 34px !important; height: 34px !important; }
.lang-btn, .currency-btn { padding: 7px 9px !important; font-size: 11px !important; }
.header-actions { gap: 6px !important; }
.header-actions::before { display: none; }
/* Hero — readable, not too tall */
.hero-section, .hero-slides, .hero-slide { min-height: 78vh !important; }
.hero-content { padding: 0 20px !important; }
.hero-title, h1.hero-title { font-size: clamp(30px, 9vw, 44px) !important; }
.hero-sub { font-size: 14px !important; }
.hero-btns { flex-direction: column; width: 100%; gap: 10px !important; }
.hero-btns a, .hero-btns .btn-gold, .hero-btns .btn-outline { width: 100%; justify-content: center; }
/* Section spacing — reduce big paddings */
.featured-v2, .testi-section, .abt-values, .about-v2, .abt-intro { padding: 56px 0 !important; }
.section-title, .section-title p { font-size: clamp(24px, 7vw, 32px) !important; }
/* Featured products — 2 per row clean */
.featured-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.featured-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.fcard-name { font-size: 13px !important; }
.fcard-price { font-size: 17px !important; }
.featured-foot { padding: 20px !important; }
/* About v2 — stack */
.about-v2-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
.about-v2-float-stat { position: static !important; margin-top: 16px; display: inline-block; }
.about-v2-stats { gap: 20px !important; }
.about-v2-stat-num { font-size: 28px !important; }
/* About page hero */
.abt-hero { height: 70vh !important; min-height: 440px !important; }
.abt-hero-title { font-size: clamp(32px, 11vw, 52px) !important; }
.abt-stats-inner { gap: 18px !important; }
.abt-stat { min-width: 40%; }
/* Testimonials — full width card */
.testi-track .testi-card { flex: 0 0 86% !important; }
.testi-rating { flex-direction: column; gap: 6px; }
/* Footer — single column, centered */
.footer-inner { grid-template-columns: 1fr !important; gap: 30px !important; text-align: center; }
.footer-col h4::after { left: 50%; transform: translateX(-50%); }
.footer-social { justify-content: center; }
.footer-cta-inner { flex-direction: column; text-align: center; }
.footer-cta-form { flex-direction: column; width: 100%; }
.footer-cta-form button { width: 100%; justify-content: center; padding: 14px; }
.footer-payments { justify-content: center; }
.footer-bottom { flex-direction: column; text-align: center; gap: 14px; }
/* Product page — single column */
.pp-grid, .product-page-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.pp-name { font-size: 24px !important; }
.pp-promo { flex-direction: row; flex-wrap: wrap; padding: 14px 16px !important; }
.pp-promo-title { font-size: 14px !important; }
.pp-promo-time { min-width: 42px; padding: 7px 8px; }
.pp-promo-time span { font-size: 18px; }
/* Watches grid already responsive — ensure 2 cols + readable */
.watches-grid-simple { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.watches-grid-simple .product-name { font-size: 12px !important; }
/* Cart */
.cart-grid, .cart-page-grid { grid-template-columns: 1fr !important; }
/* Marquee / announce — smaller */
.announce-item, .marquee-item { font-size: 10px !important; }
/* Live chat — full friendly size */
.nw-chat-panel { bottom: 80px !important; right: 0 !important; }
.nw-chat-toggle { width: 56px !important; height: 56px !important; }
/* Sales popup — don't cover whole screen */
#nw-sales-pop { bottom: 84px !important; }
/* Newsletter popup — fit screen */
.nw-nl-modal, .newsletter-modal { width: calc(100vw - 24px) !important; max-width: 380px; flex-direction: column !important; }
.nw-nl-image, .newsletter-image { display: none !important; }
/* Headings never overflow */
h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; }
/* Buttons big enough to tap */
.btn-gold, .btn-outline, button[type=submit] { min-height: 44px; }
/* Custom cursor off on touch (already coarse-pointer guarded, double-safe) */
#nw-cursor { display: none !important; }
body, a, button { cursor: auto !important; }
}
/* Extra small phones */
@media (max-width: 380px) {
.featured-grid, .watches-grid-simple { grid-template-columns: 1fr !important; }
.promo-bar-msg { display: none; }
.nw-noble, .nw-watch { font-size: 17px !important; }
}
/* ===============================================================
LIVE CHAT — quick FAQ inline answer + extra polish
=============================================================== */
.nw-quick-answer {
margin-top: 14px;
background: linear-gradient(160deg, rgba(200,169,110,0.1), rgba(200,169,110,0.03));
border: 1px solid rgba(200,169,110,0.25);
border-radius: 14px;
padding: 16px 18px;
animation: nwMsgIn 0.35s cubic-bezier(.16,1,.3,1);
}
.nw-quick-answer-q {
color: #e6c78a;
font-size: 13px;
font-weight: 700;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.nw-quick-answer-q::before {
content: 'Q';
width: 20px; height: 20px;
background: linear-gradient(135deg, #e6c78a, #c8a96e);
color: #0a0a0a;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
.nw-quick-answer-a {
color: #d8d2c4;
font-size: 13.5px;
line-height: 1.65;
padding-left: 28px;
}
.nw-quick-answer-hint {
margin-top: 12px;
padding-top: 12px;
padding-left: 28px;
border-top: 1px solid rgba(200,169,110,0.15);
color: #999;
font-size: 11.5px;
font-style: italic;
}
/* Welcome block — nicer */
.nw-chat-welcome {
text-align: center;
padding-bottom: 8px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(200,169,110,0.12);
}
.nw-chat-welcome h3 { margin-bottom: 6px !important; }
.nw-chat-welcome p { font-size: 13px !important; line-height: 1.6 !important; color: #999 !important; }
/* Field labels — refined */
.nw-chat-field { margin-bottom: 13px; }
.nw-chat-field label {
display: block;
color: #b08d4f;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 6px;
}
.nw-chat-field input,
.nw-chat-field textarea,
.nw-chat-field select {
width: 100%;
padding: 11px 14px;
color: #f0ece4;
font-family: inherit;
font-size: 13.5px;
}
.nw-chat-field input::placeholder,
.nw-chat-field textarea::placeholder { color: #666; }
.nw-chat-field .field-error {
border-color: #c0392b !important;
animation: nwShake 0.4s;
}
@keyframes nwShake {
0%,100%{ transform: translateX(0);} 25%{ transform: translateX(-4px);} 75%{ transform: translateX(4px);}
}
/* Quick FAQ buttons block */
.nw-chat-quick { margin-top: 22px !important; }
.nw-chat-quick-label {
display: flex; align-items: center; gap: 8px;
}
.nw-chat-quick-label::before {
content: '';
width: 14px; height: 14px;
background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08d4f' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
/* ===============================================================
ADMIN — message reply UI
=============================================================== */
.admin-msg-card--unread { border-left: 3px solid #c8a96e; }
.admin-msg-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 3px 9px;
border-radius: 20px;
text-transform: uppercase;
}
.admin-msg-tag--new { background: rgba(200,169,110,0.2); color: #e6c78a; }
.admin-msg-tag--done { background: rgba(108,192,112,0.15); color: #6cc070; }
.admin-msg-actions {
display: flex;
gap: 10px;
margin-top: 14px;
flex-wrap: wrap;
}
.admin-msg-reply-btn, .admin-msg-mark {
background: rgba(200,169,110,0.12);
border: 1px solid rgba(200,169,110,0.3);
color: #e6c78a;
font-size: 12px;
font-weight: 600;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s;
}
.admin-msg-reply-btn:hover { background: linear-gradient(135deg,#e6c78a,#c8a96e); color:#0a0a0a; border-color:transparent; }
.admin-msg-mark { color: #aaa; border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); }
.admin-msg-mark:hover { color: #fff; }
.admin-msg-replybox { margin-top: 14px; }
.admin-msg-reply-text {
width: 100%;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(200,169,110,0.25);
border-radius: 10px;
color: #e8e2d6;
padding: 14px;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.6;
resize: vertical;
}
.admin-msg-reply-text:focus { outline: none; border-color: rgba(200,169,110,0.5); }
.admin-msg-reply-foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
flex-wrap: wrap;
}
.admin-msg-reply-note { color: #888; font-size: 11.5px; font-style: italic; }
.nl-row-new td:first-child { position: relative; }
.nl-row-new td:first-child::before {
content: '●';
color: #c8a96e;
margin-right: 8px;
font-size: 9px;
vertical-align: middle;
}
/* ===============================================================
PRODUCT PAGE — price with "was" + saving badge
=============================================================== */
.pp-price-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 6px 0 4px;
}
.pp-price {
font-family: 'Playfair Display', serif;
font-size: 34px;
font-weight: 700;
color: #1a1a1a;
line-height: 1;
}
.pp-was {
font-size: 19px;
color: #b0b0b0;
}
.pp-was s { text-decoration: line-through; }
.pp-save-badge {
background: linear-gradient(135deg, #c0392b, #e74c3c);
color: #fff;
font-size: 13px;
font-weight: 800;
padding: 6px 12px;
border-radius: 8px;
letter-spacing: 0.5px;
box-shadow: 0 6px 16px -6px rgba(192,57,43,0.5);
}
.pp-save-line {
color: #27ae60;
font-size: 14px;
font-weight: 700;
margin-bottom: 16px;
}
/* dark theme product pages */
.product-page-dark .pp-price { color: #fff; }
/* ===============================================================
PRICES — unified readable styling across the whole site
=============================================================== */
/* Featured products (home) */
.fcard-price-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fcard-price {
font-family: 'Playfair Display', serif !important;
font-size: 22px !important;
font-weight: 800 !important;
color: #14110c !important;
letter-spacing: -0.3px;
}
.fcard-compare {
font-size: 14px !important;
color: #b8b0a4 !important;
text-decoration: line-through !important;
font-weight: 500;
}
/* Watch cards (collection / watches grid) */
.product-card .product-price,
.watches-grid-simple .product-price,
.product-info .product-price {
font-family: 'Playfair Display', serif !important;
font-size: 19px !important;
font-weight: 800 !important;
color: #14110c !important;
letter-spacing: -0.3px !important;
}
/* compare / old price on cards */
.product-card .product-compare,
.product-compare-price,
.product-old-price {
font-size: 13px !important;
color: #b8b0a4 !important;
text-decoration: line-through !important;
font-weight: 500 !important;
margin-left: 7px;
}
/* Saving badges — consistent red-gold */
.fcard-save, .product-badge--save, .product-save-badge {
background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
color: #fff !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
}
/* Product page (already styled, just reinforce readability) */
.pp-price {
font-family: 'Playfair Display', serif !important;
font-size: 36px !important;
font-weight: 800 !important;
color: #14110c !important;
letter-spacing: -0.5px !important;
}
.pp-was { font-size: 20px !important; color: #b8b0a4 !important; }
/* Cart prices — readable on dark */
.cart-item-price, .cart-item-price.price-display {
font-family: 'Playfair Display', serif !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #f0ece4 !important;
}
.cart-total-amount, .cart-subtotal-amount {
font-family: 'Playfair Display', serif !important;
font-weight: 800 !important;
color: #e6c78a !important;
}
/* Search suggestions price */
.sug-price {
font-family: 'Playfair Display', serif !important;
font-weight: 700 !important;
color: #c8a96e !important;
}
/* Generic fallback */
.product-price {
font-family: 'Playfair Display', serif !important;
font-weight: 800 !important;
color: #14110c !important;
}
/* On dark sections, prices should be light */
.testi-section .product-price,
.hero-section .product-price,
[class*="dark"] .product-price { color: #f0ece4 !important; }
@media (max-width: 600px){
.fcard-price { font-size: 19px !important; }
.product-card .product-price, .watches-grid-simple .product-price { font-size: 16px !important; }
.pp-price { font-size: 30px !important; }
}
/* ===============================================================
WATCH CARD — sale badge + was-price
=============================================================== */
.product-card-save {
position: absolute;
top: 12px; right: 12px;
background: linear-gradient(135deg, #c0392b, #e74c3c);
color: #fff;
font-size: 12px;
font-weight: 800;
padding: 5px 10px;
border-radius: 8px;
letter-spacing: 0.3px;
box-shadow: 0 6px 16px -6px rgba(192,57,43,0.5);
z-index: 3;
}
.product-price-wrap {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.1;
}
.product-compare-price {
font-size: 13px !important;
color: #b8b0a4 !important;
text-decoration: line-through !important;
font-weight: 500 !important;
}
.watches-grid-simple .product-card { position: relative; }
@media (max-width: 600px){
.product-card-save { font-size: 10px; padding: 4px 8px; top: 8px; right: 8px; }
.product-compare-price { font-size: 11px !important; }
}
/* ===============================================================
PRICES v3 — elegant, clean, readable everywhere
=============================================================== */
/* ---- WATCH CARDS (collection + grid) ---- */
.product-price-wrap {
display: flex !important;
align-items: baseline !important;
flex-direction: row !important;
gap: 8px !important;
flex-wrap: wrap;
}
.product-card .product-price,
.watches-grid-simple .product-price,
.product-info .product-price {
font-family: 'Inter', sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #14110c !important;
letter-spacing: -0.2px !important;
}
.product-compare-price {
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
color: #aaa !important;
text-decoration: line-through !important;
font-weight: 500 !important;
text-decoration-color: #d4b0b0 !important;
}
/* Sale badge — refined pill */
.product-card-save {
position: absolute;
top: 12px; right: 12px;
background: linear-gradient(135deg, #c0392b, #e74c3c);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 800;
padding: 5px 10px;
border-radius: 8px;
letter-spacing: 0.5px;
border: none;
box-shadow: 0 6px 16px -6px rgba(192,57,43,0.5);
z-index: 3;
}
/* ---- FEATURED (home) ---- */
.fcard-price-row { display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap; }
.fcard-price {
font-family: 'Inter', sans-serif !important;
font-size: 19px !important;
font-weight: 700 !important;
color: #14110c !important;
letter-spacing: -0.2px !important;
}
.fcard-compare {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: #aaa !important;
text-decoration: line-through !important;
text-decoration-color: #d4b0b0 !important;
font-weight: 500 !important;
}
.fcard-save {
position: absolute;
top: 12px; left: 12px;
background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 5px 10px !important;
border-radius: 8px !important;
letter-spacing: 0.5px !important;
border: none !important;
box-shadow: 0 6px 16px -6px rgba(192,57,43,0.5) !important;
z-index: 3;
}
/* ---- PRODUCT PAGE ---- */
.pp-price-row { display: flex !important; align-items: baseline !important; gap: 14px !important; flex-wrap: wrap; margin: 8px 0 4px !important; }
.pp-price {
font-family: 'Inter', sans-serif !important;
font-size: 32px !important;
font-weight: 800 !important;
color: #14110c !important;
letter-spacing: -0.8px !important;
}
.pp-was {
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
color: #aaa !important;
font-weight: 500 !important;
}
.pp-was s { text-decoration-color: #d4b0b0; }
.pp-save-badge {
background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
padding: 6px 12px !important;
border-radius: 8px !important;
letter-spacing: 0.5px !important;
border: none !important;
box-shadow: 0 6px 16px -6px rgba(192,57,43,0.5) !important;
}
.pp-save-line {
color: #1a8a4a !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
margin-bottom: 16px !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pp-save-line::before {
content: '↓';
font-weight: 800;
}
/* Dark contexts keep light text */
[class*="dark"] .pp-price, .product-page-dark .pp-price { color: #fff !important; }
@media (max-width: 600px){
.product-card .product-price, .watches-grid-simple .product-price { font-size: 15px !important; }
.fcard-price { font-size: 17px !important; }
.pp-price { font-size: 27px !important; }
}
/* Admin reply — multiple send options */
.admin-msg-reply-foot { flex-wrap: wrap; gap: 8px; }
.admin-msg-gmail { background: rgba(234,67,53,0.15) !important; border-color: rgba(234,67,53,0.4) !important; color: #ea4335 !important; }
.admin-msg-gmail:hover { background: #ea4335 !important; color: #fff !important; }
.admin-msg-outlook { background: rgba(0,120,212,0.15) !important; border-color: rgba(0,120,212,0.4) !important; color: #4ea1ff !important; }
.admin-msg-outlook:hover { background: #0078d4 !important; color: #fff !important; }
.admin-msg-copy { background: rgba(255,255,255,0.06) !important; }
#copynote, [id^="copynote-"] { display: block; margin-top: 8px; color: #6cc070; font-size: 12px; }
/* ===============================================================
PRODUCT & CART NAMES — clean, readable typography (override)
=============================================================== */
/* Watch grid + cards — clean Inter, readable */
.product-card .product-name,
.watches-grid-simple .product-name,
.product-info .product-name {
font-family: 'Inter', -apple-system, sans-serif !important;
color: #1a1a1a !important;
font-size: 14.5px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.1px !important;
margin: 0 0 10px !important;
min-height: 40px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-transform: none !important;
}
/* Brand label above name — small caps gold */
.product-card .product-brand,
.watches-grid-simple .product-brand,
.product-info .product-brand {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b08d4f !important;
margin-bottom: 5px !important;
}
/* Cart item names — clean & readable on dark */
.cart-item-name {
font-family: 'Inter', sans-serif !important;
color: #f3efe7 !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.1px !important;
margin: 2px 0 4px !important;
}
.cart-item-brand, .cart-item-vendor {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
color: #c8a96e !important;
}
/* Featured card names too */
.fcard-name {
font-family: 'Inter', sans-serif !important;
font-size: 14.5px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
line-height: 1.4 !important;
letter-spacing: 0.1px !important;
}
.fcard-brand {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: #b08d4f !important;
}
/* Product page title — keep elegant serif but readable */
.pp-name {
font-family: 'Playfair Display', serif !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
}
@media (max-width: 600px){
.product-card .product-name, .watches-grid-simple .product-name { font-size: 13px !important; min-height: 36px !important; }
.cart-item-name { font-size: 14px !important; }
}
/* ===============================================================
PRODUCT PAGE — prices visible on dark background (FIX)
=============================================================== */
.product-page-wrap .pp-price,
.product-page-info .pp-price,
.pp-price-row .pp-price {
color: #ffffff !important;
}
.product-page-wrap .pp-was,
.pp-price-row .pp-was {
color: #888 !important;
}
.product-page-wrap .pp-was s { text-decoration-color: #a06868 !important; }
.product-page-wrap .pp-save-line { color: #4ade80 !important; }
/* brand label on product page */
.product-page-wrap .pp-brand { color: #c8a96e !important; }
.product-page-wrap .pp-name { color: #fff !important; }
.product-page-wrap .pp-ref, .product-page-wrap .pp-desc { color: #b8b2a6 !important; }
/* ===============================================================
FONTS FIX — clean Inter for all product names + cart/checkout prices
=============================================================== */
/* Product page title — switch from Playfair to clean Inter */
.pp-name,
.product-page-wrap .pp-name {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
line-height: 1.25 !important;
}
/* Cart item names — clean Inter */
.cart-item-name {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.1px !important;
}
/* Cart / checkout prices — clean Inter (was Playfair, looked bad) */
.cart-item-price,
.cart-item-price.price-display,
.cart-total-amount,
.cart-subtotal-amount,
.cart-total,
.cart-subtotal,
.checkout-price,
.co-price,
.order-total,
.line-price,
.pp-price,
.product-page-wrap .pp-price,
.pp-was,
.product-price,
.fcard-price {
font-family: 'Inter', -apple-system, sans-serif !important;
letter-spacing: -0.3px !important;
}
/* keep prices bold + tabular for alignment */
.cart-item-price, .cart-total-amount, .cart-subtotal-amount,
.pp-price, .product-price, .fcard-price {
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
}
.pp-price, .product-page-wrap .pp-price { font-weight: 800 !important; }
/* Any leftover serif on names site-wide */
.product-name, .fcard-name, .sug-name {
font-family: 'Inter', -apple-system, sans-serif !important;
}
/* ===============================================================
CART PAGE — correct classes: clean Inter on names & prices (FIX)
=============================================================== */
/* item names */
.nw-ci-title,
.nw-co-item-name {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.1px !important;
}
.nw-ci-brand,
.nw-co-item-brand {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
}
/* prices */
.nw-ci-total,
.nw-ci-unit,
.nw-co-item-price,
.nw-co-total-amount,
.nw-co-line span,
.nw-co-sub {
font-family: 'Inter', -apple-system, sans-serif !important;
letter-spacing: -0.2px !important;
font-variant-numeric: tabular-nums !important;
}
.nw-ci-total { font-weight: 700 !important; }
.nw-co-total-amount { font-weight: 800 !important; }
/* Section headers "Your Selection" / "Order Summary" can stay serif (look fine),
but if they also show product-like text, keep them clean. Leave as-is. */
/* ===============================================================
CART SIDEBAR — Total price + label font fix (correct classes)
=============================================================== */
.nw-total-price,
.nw-summary-total .nw-total-price {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.5px !important;
font-variant-numeric: tabular-nums !important;
}
.nw-total-label {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
}
.nw-total-tax { font-family: 'Inter', sans-serif !important; }
/* summary lines (Items / Shipping / Insurance) */
.nw-summary-row, .nw-summary-row span, .nw-summary-label, .nw-summary-value {
font-family: 'Inter', sans-serif !important;
font-variant-numeric: tabular-nums !important;
}
/* ===============================================================
ADMIN PANEL — modern refresh v2
=============================================================== */
/* KPI cards — gradient accent top, glassy */
.admin-kpi {
position: relative;
background: linear-gradient(160deg, #fff, #fbfaf8) !important;
border-radius: 18px !important;
padding: 24px !important;
overflow: hidden;
}
.admin-kpi::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #c8a96e, #e6c78a);
opacity: 0;
transition: opacity 0.3s;
}
.admin-kpi:hover::before { opacity: 1; }
.admin-kpi:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px -18px rgba(176,141,79,0.3) !important; }
.admin-kpi-value {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 800 !important;
font-size: 32px !important;
letter-spacing: -1px !important;
font-variant-numeric: tabular-nums !important;
}
.admin-kpi-icon { box-shadow: 0 8px 20px -8px currentColor; }
/* Tabs — pill style */
.admin-tab {
border-radius: 12px !important;
transition: all 0.3s cubic-bezier(.16,1,.3,1) !important;
}
.admin-tab.active, .admin-tab[aria-selected="true"] {
background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
color: #e6c78a !important;
}
.admin-tab-badge {
background: linear-gradient(135deg,#e74c3c,#c0392b) !important;
color: #fff !important;
font-weight: 800 !important;
}
/* Chart cards — softer */
.admin-chart-card {
border-radius: 18px !important;
background: linear-gradient(160deg,#fff,#fbfaf8) !important;
}
/* Tables — modern */
.admin-table { border-radius: 14px; overflow: hidden; }
.admin-table thead th { background: #faf6ee !important; }
.admin-table tbody tr { transition: background 0.2s; }
/* Buttons */
.admin-action-btn {
border-radius: 10px !important;
transition: all 0.25s cubic-bezier(.16,1,.3,1) !important;
}
.admin-action-btn:hover { transform: translateY(-1px); }
/* Section headers */
.admin-section-head h3 {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.3px;
}