/* ======================================================================== MBS SHERWANI - PREMIUM LUXURY E-COMMERCE STYLESHEET ======================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap'); :root { /* Color System */ --color-deep-black: #050505; --color-luxury-black: #0B0B0B; --color-charcoal: #151515; --color-white: #FFFFFF; --color-ivory: #F8F6F0; --color-champagne-gold: #D6AF5A; --color-premium-gold: #C99A3D; --color-soft-gold: #F3D98B; /* Glassmorphism Constants */ --glass-bg: rgba(255, 255, 255, 0.60); --glass-bg-dark: rgba(11, 11, 11, 0.70); --glass-blur: blur(20px); --glass-border: 1px solid rgba(201, 154, 61, 0.25); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05); --glass-shadow-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.1); /* Typography */ --font-heading: 'Cormorant Garamond', serif; --font-body: 'Inter', sans-serif; /* Transitions */ --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ======================================================================== GLOBAL RESETS & TYPOGRAPHY ======================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background-color: var(--color-white); color: var(--color-charcoal); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.2; color: var(--color-luxury-black); } a { text-decoration: none; color: inherit; transition: var(--transition-smooth); } img { max-width: 100%; height: auto; display: block; } /* Luxury Typography Utilities */ .heading-jumbo { font-size: clamp(3rem, 5vw, 5rem); letter-spacing: -0.02em; } .heading-primary { font-size: clamp(2.5rem, 4vw, 4rem); letter-spacing: -0.01em; } .heading-secondary { font-size: clamp(2rem, 3vw, 3rem); } .text-gold-label { font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-premium-gold); font-weight: 500; } /* ======================================================================== UTILITY CLASSES & GLASSMORPHISM ======================================================================== */ .container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 2rem; } .glass-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 4px; transition: var(--transition-smooth); } .glass-panel:hover { box-shadow: var(--glass-shadow-hover); border-color: rgba(201, 154, 61, 0.5); } .glass-panel-dark { background: var(--glass-bg-dark); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); color: var(--color-white); } /* ======================================================================== BUTTONS ======================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.5rem; font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: var(--transition-smooth); border-radius: 2px; font-weight: 500; } .btn-primary { background-color: var(--color-luxury-black); color: var(--color-champagne-gold); border: 1px solid var(--color-premium-gold); } .btn-primary:hover { background-color: var(--color-premium-gold); color: var(--color-luxury-black); box-shadow: 0 0 15px rgba(201, 154, 61, 0.4); } .btn-secondary { background: transparent; color: var(--color-luxury-black); border: 1px solid var(--color-premium-gold); backdrop-filter: blur(5px); } .btn-secondary:hover { background-color: var(--color-luxury-black); color: var(--color-champagne-gold); } .btn-secondary-light { background: transparent; color: var(--color-white); border: 1px solid var(--color-premium-gold); } .btn-secondary-light:hover { background-color: var(--color-premium-gold); color: var(--color-luxury-black); } /* Links */ .link-gold { color: var(--color-premium-gold); position: relative; display: inline-block; } .link-gold::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: -4px; left: 0; background-color: var(--color-premium-gold); transform-origin: bottom right; transition: transform 0.3s ease-out; } .link-gold:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* ======================================================================== HEADER & NAVIGATION ======================================================================== */ .announcement-bar { background-color: var(--color-deep-black); color: var(--color-champagne-gold); text-align: center; padding: 0.5rem 1rem; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; } .site-header { background-color: var(--color-luxury-black); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(201, 154, 61, 0.2); transition: background-color 0.3s ease; } .site-header.scrolled { background-color: rgba(11, 11, 11, 0.9); backdrop-filter: blur(10px); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; } .logo-container img { height: 50px; width: auto; } .main-nav { display: flex; gap: 2rem; } .main-nav a { color: var(--color-white); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.3s ease; } .main-nav a:hover { color: var(--color-premium-gold); } .header-icons { display: flex; gap: 1.5rem; color: var(--color-white); } .header-icons svg { width: 20px; height: 20px; cursor: pointer; transition: color 0.3s ease; } .header-icons svg:hover { color: var(--color-premium-gold); } /* Mobile Menu Toggle */ .mobile-menu-btn { display: none; color: var(--color-white); background: none; border: none; cursor: pointer; } /* ======================================================================== PRODUCT CARD (GLASSMORPHISM) ======================================================================== */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .product-card { position: relative; padding: 1rem; display: flex; flex-direction: column; group: hover; overflow: hidden; } .product-image-container { position: relative; overflow: hidden; margin-bottom: 1rem; border-radius: 2px; } .product-image-container img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform 0.6s ease; } .product-card:hover .product-image-container img { transform: scale(1.05); } .product-badge { position: absolute; top: 1rem; left: 1rem; background: var(--color-deep-black); color: var(--color-champagne-gold); font-size: 0.65rem; padding: 0.25rem 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; z-index: 2; } .product-actions { position: absolute; bottom: -50px; left: 0; width: 100%; display: flex; justify-content: center; gap: 0.5rem; transition: bottom 0.3s ease; padding: 1rem; z-index: 2; } .product-card:hover .product-actions { bottom: 0; } .product-info { text-align: center; } .product-title { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 0.5rem; } .product-price { font-weight: 500; color: var(--color-charcoal); } .product-meta { font-size: 0.75rem; color: #666; margin-top: 0.5rem; } /* ======================================================================== SECTION PADDING ======================================================================== */ .section { padding: 6rem 0; } .section-dark { background-color: var(--color-luxury-black); color: var(--color-white); } .section-ivory { background-color: var(--color-ivory); } /* ======================================================================== FOOTER ======================================================================== */ .site-footer { background-color: var(--color-deep-black); color: var(--color-white); padding: 5rem 0 2rem; border-top: 1px solid rgba(201, 154, 61, 0.2); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; } .footer-col h4 { color: var(--color-champagne-gold); font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 0.75rem; } .footer-col ul a { color: #aaa; font-size: 0.875rem; } .footer-col ul a:hover { color: var(--color-white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: #888; } /* ======================================================================== MEDIA QUERIES (MOBILE FIRST CONSIDERATIONS) ======================================================================== */ @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .main-nav { display: none; /* Hide on mobile by default */ } .mobile-menu-btn { display: block; } .product-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .section { padding: 4rem 0; } } @media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } }