Ann Smith

/* ======================================================================== 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; } }

Sign in

By imransherwani24@gmail.com on

June 17, 2020

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non mattis dui, sit amet hendrerit nibh. Duis congue volutpat urna ut accumsan. Vivam mauris augue, ultrices at faucibus vitae, mattis eu lacus. Etiam egestas wo heluctus lectus praesent rhoncus pretium dui, id molestie quam tincidunt vestibulum

What are you looking for?

Click outside to hide the comparison bar

Compare

Ann Smith

Shop

Customer Services

Help

What are you looking for?

Sign in

Register

Ann Smith

What are you looking for?