/* =============================================
SWAG Surfboard Covers — Complete Stylesheet
Color scheme:Deep Indigo,Gold,Cream,Dark
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');
:root{
--color-indigo:#1a237e;
--color-indigo-light:#283593;
--color-indigo-dark:#0d1452;
--color-gold:#c9a84c;
--color-gold-light:#d4b96a;
--color-gold-dark:#a88a30;
--color-cream:#faf5e8;
--color-cream-dark:#f5edd5;
--color-dark:#1a1a2e;
--color-dark-light:#2a2a4e;
--color-white:#ffffff;
--color-text:#2d2d3a;
--color-text-light:#6b6b80;
--color-border:#e5dcc8;
--color-success:#2e7d32;
--color-error:#c62828;
--font-heading:'Playfair Display',Georgia,'Times New Roman',serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--shadow-sm:0 1px 3px rgba(0,0,0,0.08);
--shadow-md:0 4px 12px rgba(0,0,0,0.1);
--shadow-lg:0 8px 30px rgba(0,0,0,0.12);
--shadow-xl:0 16px 48px rgba(0,0,0,0.15);
--radius-sm:6px;
--radius-md:10px;
--radius-lg:16px;
--radius-xl:24px;
--max-width:1200px;
--header-height:72px;
--transition-fast:0.15s ease;
--transition-base:0.25s ease;
--transition-slow:0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
font-size:16px;
}
body{
font-family:var(--font-body);
color:var(--color-text);
background-color:var(--color-white);
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img{
max-width:100%;
height:auto;
display:block;
}
a{
color:var(--color-indigo);
text-decoration:none;
transition:color var(--transition-fast);
}
a:hover{
color:var(--color-gold);
}
a:focus-visible{
outline:2px solid var(--color-gold);
outline-offset:2px;
border-radius:2px;
}
ul{
list-style:none;
}
.container{
width:100%;
max-width:var(--max-width);
margin:0 auto;
padding:0 20px;
}
@media (min-width:768px){
.container{padding:0 32px}
}
@media (min-width:1200px){
.container{padding:0 40px}
}
h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
font-weight:700;
line-height:1.2;
color:var(--color-dark);
}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.75rem)}
h4{font-size:clamp(1.1rem,2vw,1.35rem)}
.section-title{
text-align:center;
margin-bottom:12px;
color:var(--color-dark);
}
.section-subtitle{
text-align:center;
color:var(--color-text-light);
font-size:1.05rem;
max-width:600px;
margin:0 auto 48px;
font-weight:400;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font-family:var(--font-body);
font-weight:600;
font-size:0.95rem;
padding:14px 32px;
border-radius:var(--radius-md);
border:2px solid transparent;
cursor:pointer;
transition:all var(--transition-base);
text-align:center;
white-space:nowrap;
position:relative;
overflow:hidden;
}
.btn:focus-visible{
outline:2px solid var(--color-gold);
outline-offset:3px;
}
.btn:active{
transform:scale(0.97);
}
.btn-primary{
background:linear-gradient(135deg,var(--color-indigo),var(--color-indigo-light));
color:var(--color-white);
border-color:var(--color-indigo);
}
.btn-primary:hover{
background:linear-gradient(135deg,var(--color-indigo-dark),var(--color-indigo));
border-color:var(--color-indigo-dark);
color:var(--color-white);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(26,35,126,0.35);
}
.btn-primary:active{
transform:translateY(0) scale(0.97);
box-shadow:0 2px 8px rgba(26,35,126,0.25);
}
.btn-gold{
background:linear-gradient(135deg,var(--color-gold),var(--color-gold-light));
color:var(--color-dark);
border-color:var(--color-gold);
}
.btn-gold:hover{
background:linear-gradient(135deg,var(--color-gold-dark),var(--color-gold));
border-color:var(--color-gold-dark);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(201,168,76,0.4);
}
.btn-gold:active{
transform:translateY(0) scale(0.97);
}
.btn-outline{
background:transparent;
color:var(--color-indigo);
border-color:var(--color-indigo);
}
.btn-outline:hover{
background:var(--color-indigo);
color:var(--color-white);
transform:translateY(-2px);
}
.btn-outline:active{
transform:translateY(0) scale(0.97);
}
.btn-loading{
pointer-events:none;
opacity:0.8;
}
.btn-loading .btn-text{
visibility:hidden;
}
.btn-loading .btn-spinner{
display:block;
}
.btn-spinner{
display:none;
width:20px;
height:20px;
border:2px solid rgba(255,255,255,0.3);
border-top-color:#fff;
border-radius:50%;
animation:spin 0.6s linear infinite;
position:absolute;
}
@keyframes spin{
to{transform:rotate(360deg)}
}
.btn-sm{
padding:10px 20px;
font-size:0.85rem;
}
.site-header{
position:fixed;
top:0;
left:0;
right:0;
height:var(--header-height);
background:rgba(255,255,255,0.97);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--color-border);
z-index:1000;
transition:box-shadow var(--transition-base);
}
.site-header.scrolled{
box-shadow:var(--shadow-md);
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:100%;
max-width:var(--max-width);
margin:0 auto;
padding:0 20px;
}
@media (min-width:768px){
.header-inner{padding:0 32px}
}
.logo{
display:flex;
align-items:center;
gap:10px;
font-family:var(--font-heading);
font-weight:800;
font-size:1.4rem;
color:var(--color-indigo);
text-decoration:none;
transition:opacity var(--transition-fast);
}
.logo:hover{
color:var(--color-indigo);
opacity:0.85;
}
.logo-icon{
width:36px;
height:36px;
background:linear-gradient(135deg,var(--color-indigo),var(--color-gold));
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
color:var(--color-white);
font-size:0.85rem;
font-weight:800;
}
.nav-links{
display:flex;
align-items:center;
gap:28px;
}
.nav-links a{
font-size:0.9rem;
font-weight:500;
color:var(--color-text);
position:relative;
padding:4px 0;
transition:color var(--transition-fast);
}
.nav-links a::after{
content:'';
position:absolute;
bottom:-2px;
left:0;
width:0;
height:2px;
background:var(--color-gold);
transition:width var(--transition-base);
}
.nav-links a:hover::after,
.nav-links a.active::after{
width:100%;
}
.nav-links a:hover{
color:var(--color-indigo);
}
.nav-links a.active{
color:var(--color-indigo);
font-weight:600;
}
.cart-link{
position:relative;
}
.cart-badge{
position:absolute;
top:-8px;
right:-10px;
background:var(--color-gold);
color:var(--color-dark);
font-size:0.65rem;
font-weight:700;
width:18px;
height:18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:transform var(--transition-fast);
}
.cart-badge.has-items{
animation:badgePop 0.3s ease;
}
@keyframes badgePop{
0%{transform:scale(0)}
60%{transform:scale(1.2)}
100%{transform:scale(1)}
}
.menu-toggle{
display:none;
background:none;
border:none;
cursor:pointer;
padding:8px;
z-index:1001;
}
.menu-toggle span{
display:block;
width:24px;
height:2px;
background:var(--color-dark);
margin:5px 0;
transition:all var(--transition-base);
border-radius:2px;
}
.menu-toggle.open span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}
.menu-toggle.open span:nth-child(2){
opacity:0;
}
.menu-toggle.open span:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}
@media (max-width:767px){
.menu-toggle{display:block}
.nav-links{
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
flex-direction:column;
background:var(--color-white);
padding:100px 32px 40px;
gap:20px;
box-shadow:var(--shadow-xl);
transition:right var(--transition-slow);
align-items:flex-start;
}
.nav-links.open{
right:0;
}
.nav-links a{
font-size:1.1rem;
}
.nav-overlay{
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.4);
z-index:999;
}
.nav-overlay.open{
display:block;
}
}
.hero{
padding:calc(var(--header-height) + 60px) 0 80px;
background:linear-gradient(135deg,var(--color-indigo-dark) 0%,var(--color-indigo) 50%,var(--color-dark-light) 100%);
color:var(--color-white);
text-align:center;
position:relative;
overflow:hidden;
min-height:70vh;
display:flex;
align-items:center;
}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('/images/hero-banner.png') center center / cover no-repeat;
filter:brightness(0.4) saturate(1.2);
pointer-events:none;
}
.hero::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,rgba(29,35,53,0.75) 0%,rgba(52,56,79,0.5) 50%,rgba(48,43,51,0.7) 100%);
pointer-events:none;
}
.hero-content{
position:relative;
z-index:1;
max-width:800px;
margin:0 auto;
}
.hero-logo{
font-family:var(--font-heading);
font-size:clamp(3rem,8vw,5.5rem);
font-weight:800;
letter-spacing:4px;
background:linear-gradient(135deg,var(--color-gold-light),var(--color-gold),var(--color-gold-light));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:8px;
line-height:1.1;
}
.hero-tagline{
font-size:clamp(1rem,2.5vw,1.3rem);
font-weight:300;
color:var(--color-cream);
margin-bottom:16px;
letter-spacing:1px;
}
.hero-subtitle{
font-size:clamp(1.1rem,2.5vw,1.4rem);
font-weight:400;
color:rgba(255,255,255,0.85);
margin-bottom:40px;
line-height:1.5;
}
.hero-cta{
display:flex;
gap:16px;
justify-content:center;
flex-wrap:wrap;
}
.hero-decoration{
margin-top:48px;
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}
.hero-stat{
text-align:center;
}
.hero-stat-number{
font-family:var(--font-heading);
font-size:1.8rem;
font-weight:700;
color:var(--color-gold);
}
.hero-stat-label{
font-size:0.85rem;
color:rgba(255,255,255,0.7);
margin-top:4px;
}
.section{
padding:80px 0;
}
.section-alt{
background:var(--color-cream);
}
.section-dark{
background:var(--color-dark);
color:var(--color-white);
}
.section-dark .section-title{
color:var(--color-white);
}
.section-dark .section-subtitle{
color:rgba(255,255,255,0.7);
}
.product-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
}
@media (min-width:540px){
.product-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media (min-width:900px){
.product-grid{
grid-template-columns:repeat(3,1fr);
}
}
@media (min-width:1200px){
.product-grid{
grid-template-columns:repeat(4,1fr);
}
}
.product-card{
background:var(--color-white);
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:all var(--transition-base);
cursor:pointer;
display:flex;
flex-direction:column;
border:1px solid var(--color-border);
}
.product-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
border-color:var(--color-gold);
}
.product-card:focus-within{
outline:2px solid var(--color-gold);
outline-offset:2px;
}
.product-card-image{
width:100%;
aspect-ratio:3/2;
object-fit:cover;
background:var(--color-cream);
display:flex;
align-items:center;
justify-content:center;
font-size:0.85rem;
color:var(--color-text-light);
transition:transform var(--transition-slow);
}
.product-card:hover .product-card-image{
transform:scale(1.05);
}
.product-card-image-wrapper{
overflow:hidden;
position:relative;
}
.product-card-badge{
position:absolute;
top:12px;
left:12px;
background:var(--color-gold);
color:var(--color-dark);
font-size:0.7rem;
font-weight:700;
padding:4px 10px;
border-radius:20px;
text-transform:uppercase;
letter-spacing:0.5px;
}
.product-card-body{
padding:20px;
flex:1;
display:flex;
flex-direction:column;
}
.product-card-name{
font-family:var(--font-heading);
font-size:1.1rem;
font-weight:600;
margin-bottom:4px;
color:var(--color-dark);
}
.product-card-name-balinese{
font-size:0.8rem;
color:var(--color-text-light);
font-style:italic;
margin-bottom:8px;
}
.product-card-price{
font-size:1.15rem;
font-weight:700;
color:var(--color-indigo);
margin-bottom:12px;
}
.product-card-footer{
margin-top:auto;
display:flex;
gap:8px;
}
.product-card-footer .btn{
flex:1;
padding:10px 16px;
font-size:0.85rem;
}
.img-placeholder{
background:linear-gradient(135deg,var(--color-cream),var(--color-cream-dark));
display:flex;
align-items:center;
justify-content:center;
color:var(--color-text-light);
font-size:0.85rem;
font-weight:500;
text-align:center;
padding:20px;
width:100%;
height:100%;
}
.steps-grid{
display:grid;
grid-template-columns:1fr;
gap:32px;
max-width:900px;
margin:0 auto;
}
@media (min-width:600px){
.steps-grid{
grid-template-columns:repeat(3,1fr);
}
}
.step-card{
text-align:center;
padding:32px 20px;
}
.step-number{
width:56px;
height:56px;
border-radius:50%;
background:var(--color-indigo);
color:var(--color-white);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:700;
margin:0 auto 20px;
transition:transform var(--transition-base);
}
.step-card:hover .step-number{
transform:scale(1.1);
background:var(--color-gold);
color:var(--color-dark);
}
.step-title{
font-family:var(--font-heading);
font-size:1.2rem;
font-weight:600;
margin-bottom:8px;
}
.step-desc{
color:var(--color-text-light);
font-size:0.95rem;
line-height:1.5;
}
.material-content{
display:grid;
grid-template-columns:1fr;
gap:48px;
align-items:center;
}
@media (min-width:768px){
.material-content{
grid-template-columns:1fr 1fr;
}
}
.material-image{
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-md);
}
.material-image img{
width:100%;
height:auto;
}
.material-text h3{
margin-bottom:16px;
color:var(--color-dark);
}
.material-text p{
color:var(--color-text-light);
margin-bottom:16px;
line-height:1.7;
}
.material-features{
display:flex;
flex-direction:column;
gap:12px;
}
.material-features li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:0.95rem;
}
.material-features li::before{
content:'✦';
color:var(--color-gold);
font-size:0.85rem;
flex-shrink:0;
margin-top:3px;
}
.site-footer{
background:var(--color-dark);
color:rgba(255,255,255,0.7);
padding:60px 0 32px;
}
.footer-grid{
display:grid;
grid-template-columns:1fr;
gap:32px;
margin-bottom:40px;
}
@media (min-width:600px){
.footer-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media (min-width:900px){
.footer-grid{
grid-template-columns:2fr 1fr 1fr 1fr;
}
}
.footer-brand .logo{
color:var(--color-white);
margin-bottom:12px;
}
.footer-brand p{
font-size:0.9rem;
line-height:1.6;
max-width:300px;
}
.footer-col h4{
font-family:var(--font-heading);
font-size:1rem;
color:var(--color-white);
margin-bottom:16px;
}
.footer-col ul li{
margin-bottom:10px;
}
.footer-col ul li a{
color:rgba(255,255,255,0.6);
font-size:0.9rem;
transition:color var(--transition-fast);
}
.footer-col ul li a:hover{
color:var(--color-gold);
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:24px;
text-align:center;
font-size:0.85rem;
color:rgba(255,255,255,0.5);
}
.footer-bottom a{
color:var(--color-gold);
}
.footer-bottom a:hover{
text-decoration:underline;
}
.product-detail{
padding:calc(var(--header-height) + 40px) 0 80px;
}
.product-detail-grid{
display:grid;
grid-template-columns:1fr;
gap:48px;
}
@media (min-width:768px){
.product-detail-grid{
grid-template-columns:1fr 1fr;
}
}
.product-detail-image{
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-md);
background:var(--color-cream);
aspect-ratio:1;
}
.product-detail-image img{
width:100%;
height:100%;
object-fit:cover;
}
.product-detail-info h1{
margin-bottom:8px;
}
.product-detail-balinese{
font-style:italic;
color:var(--color-text-light);
font-size:1.05rem;
margin-bottom:16px;
}
.product-detail-price{
font-size:2rem;
font-weight:700;
color:var(--color-indigo);
margin-bottom:24px;
}
.size-selector{
margin-bottom:28px;
}
.size-selector label{
display:block;
font-weight:600;
margin-bottom:12px;
font-size:0.95rem;
}
.size-options{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.size-option{
position:relative;
}
.size-option input{
position:absolute;
opacity:0;
width:0;
height:0;
}
.size-option label{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
padding:14px 24px;
border:2px solid var(--color-border);
border-radius:var(--radius-md);
cursor:pointer;
transition:all var(--transition-base);
font-weight:500;
font-size:0.9rem;
min-width:120px;
}
.size-option input:checked + label{
border-color:var(--color-indigo);
background:var(--color-indigo);
color:var(--color-white);
}
.size-option input:focus-visible + label{
outline:2px solid var(--color-gold);
outline-offset:2px;
}
.size-option label:hover{
border-color:var(--color-indigo);
}
.size-option .size-price{
font-size:0.8rem;
font-weight:400;
opacity:0.7;
}
.size-option input:checked + label .size-price{
opacity:1;
}
.product-detail-desc{
margin-top:40px;
}
.product-detail-desc h2{
font-size:1.4rem;
margin-bottom:16px;
}
.product-detail-desc p{
color:var(--color-text-light);
line-height:1.7;
margin-bottom:16px;
}
.product-features-list{
margin:20px 0;
}
.product-features-list li{
padding:10px 0;
border-bottom:1px solid var(--color-border);
display:flex;
align-items:center;
gap:10px;
font-size:0.95rem;
}
.product-features-list li::before{
content:'✓';
color:var(--color-success);
font-weight:700;
}
.share-section{
margin-top:32px;
padding-top:24px;
border-top:1px solid var(--color-border);
}
.share-section p{
font-weight:600;
margin-bottom:12px;
font-size:0.9rem;
}
.share-buttons{
display:flex;
gap:10px;
}
.share-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:10px 18px;
border-radius:var(--radius-sm);
border:1px solid var(--color-border);
background:var(--color-white);
font-size:0.85rem;
font-weight:500;
cursor:pointer;
transition:all var(--transition-fast);
}
.share-btn:hover{
border-color:var(--color-indigo);
background:var(--color-cream);
transform:translateY(-1px);
}
.share-btn:active{
transform:translateY(0);
}
.thank-you-page{
padding:calc(var(--header-height) + 80px) 0 80px;
text-align:center;
min-height:60vh;
display:flex;
align-items:center;
}
.thank-you-content{
max-width:560px;
margin:0 auto;
}
.thank-you-icon{
width:80px;
height:80px;
border-radius:50%;
background:var(--color-success);
color:var(--color-white);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 24px;
font-size:2.2rem;
}
.thank-you-content h1{
margin-bottom:12px;
}
.thank-you-content p{
color:var(--color-text-light);
font-size:1.05rem;
margin-bottom:8px;
}
.order-id-display{
background:var(--color-cream);
padding:20px 32px;
border-radius:var(--radius-md);
margin:24px 0;
font-family:monospace;
font-size:1.1rem;
word-break:break-all;
}
.order-id-display span{
font-weight:700;
color:var(--color-indigo);
}
.thank-you-actions{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
margin-top:32px;
}
.about-page{
padding:calc(var(--header-height) + 40px) 0 80px;
}
.about-hero{
text-align:center;
padding:48px 0 60px;
}
.about-hero h1{
margin-bottom:16px;
}
.about-hero p{
color:var(--color-text-light);
max-width:650px;
margin:0 auto;
font-size:1.1rem;
line-height:1.7;
}
.about-section{
padding:60px 0;
}
.about-grid{
display:grid;
grid-template-columns:1fr;
gap:48px;
align-items:center;
}
@media (min-width:768px){
.about-grid{
grid-template-columns:1fr 1fr;
}
.about-grid.reverse{
direction:rtl;
}
.about-grid.reverse > *{
direction:ltr;
}
}
.about-image{
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:var(--shadow-md);
aspect-ratio:4/3;
background:var(--color-cream);
}
.about-image img{
width:100%;
height:100%;
object-fit:cover;
}
.about-text h2{
margin-bottom:16px;
}
.about-text p{
color:var(--color-text-light);
line-height:1.7;
margin-bottom:16px;
}
.values-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
margin-top:40px;
}
@media (min-width:600px){
.values-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media (min-width:900px){
.values-grid{
grid-template-columns:repeat(3,1fr);
}
}
.value-card{
background:var(--color-white);
padding:28px;
border-radius:var(--radius-md);
border:1px solid var(--color-border);
transition:all var(--transition-base);
}
.value-card:hover{
border-color:var(--color-gold);
box-shadow:var(--shadow-md);
transform:translateY(-3px);
}
.value-card-icon{
font-size:2rem;
margin-bottom:12px;
}
.value-card h3{
font-size:1.1rem;
margin-bottom:8px;
}
.value-card p{
color:var(--color-text-light);
font-size:0.9rem;
line-height:1.5;
}
.page-banner{
padding:calc(var(--header-height) + 40px) 0 48px;
background:linear-gradient(135deg,var(--color-indigo-dark),var(--color-indigo));
text-align:center;
color:var(--color-white);
}
.page-banner h1{
color:var(--color-white);
margin-bottom:8px;
}
.page-banner p{
color:rgba(255,255,255,0.75);
font-size:1.05rem;
}
.skeleton{
background:linear-gradient(90deg,var(--color-cream) 25%,var(--color-cream-dark) 50%,var(--color-cream) 75%);
background-size:200% 100%;
animation:shimmer 1.5s ease-in-out infinite;
border-radius:var(--radius-sm);
}
@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
.error-state{
text-align:center;
padding:60px 20px;
}
.error-state h2{
color:var(--color-error);
margin-bottom:12px;
}
.error-state p{
color:var(--color-text-light);
margin-bottom:24px;
}
.empty-state{
text-align:center;
padding:60px 20px;
color:var(--color-text-light);
}
.back-to-top{
position:fixed;
bottom:30px;
right:30px;
width:44px;
height:44px;
border-radius:50%;
background:var(--color-indigo);
color:var(--color-white);
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
box-shadow:var(--shadow-md);
opacity:0;
visibility:hidden;
transition:all var(--transition-base);
z-index:100;
}
.back-to-top.visible{
opacity:1;
visibility:visible;
}
.back-to-top:hover{
background:var(--color-gold);
color:var(--color-dark);
transform:translateY(-3px);
}
.back-to-top:active{
transform:translateY(0);
}
.toast-container{
position:fixed;
top:calc(var(--header-height) + 16px);
right:20px;
z-index:2000;
display:flex;
flex-direction:column;
gap:10px;
}
.toast{
background:var(--color-white);
border-radius:var(--radius-sm);
padding:14px 20px;
box-shadow:var(--shadow-lg);
border-left:4px solid var(--color-indigo);
display:flex;
align-items:center;
gap:10px;
font-size:0.9rem;
animation:slideInRight 0.3s ease;
max-width:360px;
}
.toast.toast-success{border-left-color:var(--color-success)}
.toast.toast-error{border-left-color:var(--color-error)}
@keyframes slideInRight{
from{
transform:translateX(100%);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}
.toast-remove{
animation:slideOutRight 0.3s ease forwards;
}
@keyframes slideOutRight{
to{
transform:translateX(100%);
opacity:0;
}
}
#checkout-button{
width:100%;
max-width:400px;
}
.legal-page{
padding:calc(var(--header-height) + 40px) 0 80px;
}
.legal-container{
max-width:860px;
margin:0 auto;
padding:0 20px;
}
.legal-page h1{
color:var(--color-dark);
margin-bottom:8px;
}
.legal-page .last-updated{
color:var(--color-text-light);
font-size:0.9rem;
margin-bottom:40px;
font-style:italic;
}
.legal-page h2{
color:var(--color-indigo);
margin-top:40px;
margin-bottom:12px;
font-size:1.4rem;
}
.legal-page h3{
color:var(--color-dark);
margin-top:28px;
margin-bottom:8px;
font-size:1.15rem;
}
.legal-page p{
color:var(--color-text);
line-height:1.7;
margin-bottom:16px;
font-size:0.95rem;
}
.legal-page ul,
.legal-page ol{
margin:0 0 16px 24px;
color:var(--color-text);
line-height:1.7;
font-size:0.95rem;
}
.legal-page ul li,
.legal-page ol li{
margin-bottom:8px;
}
.legal-page ul li::marker{
color:var(--color-gold);
}
.legal-page ol li::marker{
color:var(--color-indigo);
font-weight:600;
}
.legal-page a{
color:var(--color-indigo);
text-decoration:underline;
text-underline-offset:2px;
}
.legal-page a:hover{
color:var(--color-gold);
}
.legal-page .legal-highlight{
background:var(--color-cream);
border-left:4px solid var(--color-gold);
padding:20px 24px;
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
margin:0 0 24px;
}
.legal-page .legal-highlight p{
margin-bottom:0;
}
.legal-page hr{
border:none;
border-top:1px solid var(--color-border);
margin:32px 0;
}
.legal-table{
width:100%;
border-collapse:collapse;
margin:0 0 24px;
font-size:0.95rem;
}
.legal-table thead{
background:var(--color-indigo);
color:var(--color-white);
}
.legal-table th,
.legal-table td{
padding:12px 16px;
text-align:left;
border:1px solid var(--color-border);
}
.legal-table th{
font-weight:600;
font-size:0.9rem;
text-transform:uppercase;
letter-spacing:0.5px;
}
.legal-table tbody tr:nth-child(even){
background:var(--color-cream);
}
.legal-table tbody tr:hover{
background:var(--color-cream-dark);
}
.footer-legal-nav{
margin-top:16px;
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}
.footer-legal-nav a{
color:rgba(255,255,255,0.5);
font-size:0.8rem;
transition:color var(--transition-fast);
}
.footer-legal-nav a:hover{
color:var(--color-gold);
}
.text-center{text-align:center}
.text-gold{color:var(--color-gold)}
.text-indigo{color:var(--color-indigo)}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}
.hidden{display:none}
@media (max-width:399px){
.product-card-footer{
flex-direction:column;
}
}
@media print{
.site-header,
.back-to-top,
.toast-container{
display:none !important;
}
body{
color:#000;
}
.hero{
background:#fff !important;
color:#000;
padding:20px 0;
}
.hero-logo{
-webkit-text-fill-color:var(--color-indigo);
}
}
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
.header-actions{
display:flex;
align-items:center;
gap:12px;
margin-left:auto;
}
.header-switchers{
display:flex;
align-items:center;
gap:4px;
background:rgba(255,255,255,0.06);
border-radius:8px;
padding:2px 8px;
}
.switcher-group{
display:flex;
gap:2px;
}
.switcher-divider{
width:1px;
height:20px;
background:rgba(255,255,255,0.15);
margin:0 4px;
}
.lang-btn,.currency-btn{
background:none;
border:none;
color:rgba(255,255,255,0.6);
font-size:11px;
font-weight:600;
padding:2px 5px;
border-radius:4px;
cursor:pointer;
transition:all 0.2s;
letter-spacing:0.3px;
font-family:var(--font-body);
}
.lang-btn:hover,.currency-btn:hover{
color:var(--color-gold-light);
background:rgba(255,255,255,0.08);
}
.lang-btn.active,.currency-btn.active{
color:var(--color-gold);
background:rgba(201,168,76,0.15);
}
.cart-link{
background:rgba(255,255,255,0.18);
border:1px solid rgba(255,255,255,0.25);
position:relative;
cursor:pointer;
padding:6px;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
border-radius:10px;
width:42px;
height:42px;
}
.cart-link svg{
width:20px;
height:20px;
stroke-width:2.5;
}
.cart-link:hover{
background:rgba(201,168,76,0.35);
border-color:var(--color-gold);
color:var(--color-gold-light);
}
.cart-badge{
position:absolute;
top:-5px;
right:-5px;
background:#e74c3c;
color:#fff;
font-size:10px;
font-weight:700;
min-width:18px;
height:18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,0.3);
border:2px solid var(--color-dark);
line-height:1;
}
.cart-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
backdrop-filter:blur(4px);
z-index:999;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
}
.cart-overlay.open{
opacity:1;
pointer-events:auto;
}
.cart-drawer{
position:fixed;
top:0;
right:-400px;
width:380px;
max-width:92vw;
height:100%;
background:var(--color-white);
z-index:1000;
display:flex;
flex-direction:column;
transition:right 0.35s cubic-bezier(0.4,0,0.2,1);
box-shadow:-8px 0 30px rgba(0,0,0,0.15);
}
.cart-drawer.open{
right:0;
}
.cart-drawer-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 24px;
border-bottom:1px solid var(--color-border);
flex-shrink:0;
}
.cart-drawer-header h3{
font-family:var(--font-heading);
font-size:1.2rem;
margin:0;
color:var(--color-dark);
}
.cart-drawer-close{
background:none;
border:none;
font-size:1.5rem;
cursor:pointer;
color:var(--color-text-light);
padding:4px 8px;
border-radius:4px;
transition:all 0.2s;
}
.cart-drawer-close:hover{
background:var(--color-bg-alt);
color:var(--color-dark);
}
.cart-drawer-body{
flex:1;
overflow-y:auto;
padding:16px 24px;
}
.cart-empty{
text-align:center;
padding:48px 0;
color:var(--color-text-light);
display:none;
}
.cart-empty svg{
margin-bottom:16px;
opacity:0.4;
}
.cart-empty p{
font-size:1rem;
color:var(--color-text-light);
}
.cart-items{
display:flex;
flex-direction:column;
gap:12px;
}
.cart-item{
display:flex;
gap:12px;
padding:12px;
border-radius:8px;
background:var(--color-bg-alt);
position:relative;
align-items:center;
}
.cart-item-img{
width:60px;
height:60px;
object-fit:cover;
border-radius:6px;
flex-shrink:0;
}
.cart-item-info{
flex:1;
min-width:0;
}
.cart-item-name{
font-weight:600;
font-size:0.9rem;
color:var(--color-dark);
margin-bottom:2px;
}
.cart-item-size{
font-size:0.78rem;
color:var(--color-text-light);
margin-bottom:2px;
}
.cart-item-price{
font-size:0.85rem;
font-weight:700;
color:var(--color-indigo);
}
.cart-item-qty{
display:flex;
align-items:center;
gap:4px;
flex-shrink:0;
}
.cart-qty-btn{
width:28px;
height:28px;
border:1px solid var(--color-border);
border-radius:4px;
background:var(--color-white);
cursor:pointer;
font-size:1rem;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
color:var(--color-dark);
}
.cart-qty-btn:hover{
background:var(--color-bg-alt);
border-color:var(--color-gold);
color:var(--color-gold-dark);
}
.cart-qty-value{
font-weight:600;
font-size:0.9rem;
min-width:20px;
text-align:center;
color:var(--color-dark);
}
.cart-item-remove{
background:none;
border:none;
font-size:1.1rem;
cursor:pointer;
color:var(--color-text-light);
padding:4px;
position:absolute;
top:4px;
right:4px;
transition:color 0.2s;
}
.cart-item-remove:hover{
color:#e74c3c;
}
.cart-drawer-footer{
border-top:1px solid var(--color-border);
padding:16px 24px;
flex-shrink:0;
background:var(--color-white);
}
.cart-subtotal{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
font-size:1.05rem;
font-weight:600;
}
.cart-total{
font-family:var(--font-heading);
font-size:1.2rem;
color:var(--color-gold-dark);
}
.btn-block{
width:100%;
margin-bottom:8px;
}
@media (max-width:767px){
.header-switchers{
display:none;
}
.cart-drawer{
width:100vw;
max-width:100vw;
right:-100vw;
}
.header-actions{
gap:4px;
}
}
@media (min-width:768px){
.header-actions{
margin-left:0;
}
}