/* Luxury Design Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Luxury Color Palette */
--primary-gold: #d4af37;
--secondary-gold: #f4e4bc;
--accent-gold: #b8860b;
--deep-black: #1a1a1a;
--charcoal: #2c2c2c;
--rich-white: #fefefe;
--pearl-white: #f8f8f8;
--sophisticated-gray: #6c6c6c;
--light-gray: #e8e8e8;
--shadow-color: rgba(26, 26, 26, 0.15);
--gold-shadow: rgba(212, 175, 55, 0.25);
/* Typography */
--font-primary: 'Playfair Display', serif;
--font-secondary: 'Inter', sans-serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 4rem;
/* Transitions */
--transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-elegant: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
body {
font-family: var(--font-secondary);
line-height: 1.7;
color: var(--deep-black);
background: var(--rich-white);
font-weight: 400;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-smooth);
}
ul {
list-style: none;
}
/* Luxury Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
color: var(--deep-black);
padding: var(--spacing-md) var(--spacing-xl);
border: none;
border-radius: 8px;
cursor: pointer;
font-family: var(--font-secondary);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: var(--transition-elegant);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px var(--gold-shadow);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: var(--transition-smooth);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px var(--gold-shadow);
background: linear-gradient(135deg, var(--accent-gold), var(--primary-gold));
}
.btn:hover::before {
left: 100%;
}
.btn:active {
transform: translateY(-1px);
}
/* Secondary Button */
.btn-secondary {
background: transparent;
color: var(--primary-gold);
border: 2px solid var(--primary-gold);
box-shadow: none;
}
.btn-secondary:hover {
background: var(--primary-gold);
color: var(--deep-black);
border-color: var(--primary-gold);
}
/* Luxury Header Styles */
header {
background: linear-gradient(135deg, var(--rich-white) 0%, var(--pearl-white) 100%);
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px var(--shadow-color);
padding: var(--spacing-lg) 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--light-gray);
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-md);
}
.logo h1 {
font-family: var(--font-primary);
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
position: relative;
cursor: pointer;
transition: var(--transition-elegant);
}
.logo h1::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
transition: var(--transition-smooth);
}
.logo h1:hover::after {
width: 100%;
}
/* Luxury Search Styles */
.search-container {
flex: 1;
max-width: 600px;
margin: 0 var(--spacing-xl);
position: relative;
}
#search-form {
display: flex;
position: relative;
background: var(--rich-white);
border-radius: 50px;
box-shadow: 0 4px 20px var(--shadow-color);
overflow: hidden;
border: 2px solid transparent;
transition: var(--transition-smooth);
}
#search-form:focus-within {
border-color: var(--primary-gold);
box-shadow: 0 8px 30px var(--gold-shadow);
transform: translateY(-2px);
}
#search-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-xl);
border: none;
background: transparent;
font-size: 1rem;
font-family: var(--font-secondary);
color: var(--deep-black);
transition: var(--transition-smooth);
}
#search-input::placeholder {
color: var(--sophisticated-gray);
font-style: italic;
}
#search-input:focus {
outline: none;
}
#search-button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
border: none;
color: var(--deep-black);
cursor: pointer;
padding: 12px;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
box-shadow: 0 2px 10px var(--gold-shadow);
}
#search-button:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 4px 15px var(--gold-shadow);
}
#search-button i {
font-size: 1rem;
}
/* Luxury Header Icons */
.header-icons {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.user-account a,
.cart-icon a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pearl-white), var(--rich-white));
color: var(--deep-black);
transition: var(--transition-smooth);
box-shadow: 0 2px 10px var(--shadow-color);
position: relative;
}
.user-account a:hover,
.cart-icon a:hover {
background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--gold-shadow);
}
.user-account i,
.cart-icon i {
font-size: 1.1rem;
}
/* PWA Install Button */
.pwa-install-btn {
display: none;
align-items: center;
gap: var(--spacing-xs);
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
padding: var(--spacing-xs) var(--spacing-md);
border: none;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: 0 2px 10px var(--gold-shadow);
}
.pwa-install-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--gold-shadow);
}
/* Luxury Navigation */
nav ul {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
}
nav ul li a {
font-family: var(--font-secondary);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--deep-black);
transition: var(--transition-smooth);
position: relative;
padding: var(--spacing-xs) 0;
}
nav ul li a::before {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
transition: var(--transition-smooth);
border-radius: 2px;
}
nav ul li a:hover {
color: var(--primary-gold);
}
nav ul li a:hover::before,
nav ul li a.active::before {
width: 100%;
}
nav ul li a.active {
color: var(--primary-gold);
}
/* Luxury Hero Section */
.hero {
background: linear-gradient(135deg, rgba(26, 26, 26, 0.7), rgba(212, 175, 55, 0.1)), url('../images/hero-bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--rich-white);
text-align: center;
padding: var(--spacing-xxl) 0;
min-height: 80vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, transparent 0%, rgba(26, 26, 26, 0.3) 100%);
pointer-events: none;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h2 {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
margin-bottom: var(--spacing-lg);
background: linear-gradient(135deg, var(--rich-white), var(--secondary-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
line-height: 1.2;
animation: fadeInUp 1s ease-out;
}
.hero p {
font-family: var(--font-secondary);
font-size: 1.3rem;
font-weight: 300;
margin-bottom: var(--spacing-xl);
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
opacity: 0.95;
animation: fadeInUp 1s ease-out 0.3s both;
}
.hero .btn {
font-size: 1.1rem;
padding: var(--spacing-md) var(--spacing-xxl);
animation: fadeInUp 1s ease-out 0.6s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* PWA Specific Styles */
.pwa-update-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
z-index: 10000;
animation: slideDown 0.5s ease-out;
}
.update-content {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
font-weight: 600;
}
.update-btn {
background: var(--deep-black);
color: var(--rich-white);
border: none;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: 20px;
cursor: pointer;
font-weight: 600;
transition: var(--transition-smooth);
}
.update-btn:hover {
background: var(--charcoal);
}
.dismiss-btn {
background: none;
border: none;
color: var(--deep-black);
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition-smooth);
}
.dismiss-btn:hover {
background: rgba(26, 26, 26, 0.1);
}
.pwa-notification {
position: fixed;
bottom: var(--spacing-lg);
right: var(--spacing-lg);
background: var(--rich-white);
border-radius: 12px;
box-shadow: 0 8px 32px var(--shadow-color);
z-index: 10000;
animation: slideInRight 0.5s ease-out;
max-width: 400px;
}
.notification-content {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
}
.pwa-notification.success {
border-left: 4px solid #27ae60;
}
.pwa-notification.error {
border-left: 4px solid #e74c3c;
}
.pwa-notification.warning {
border-left: 4px solid #f39c12;
}
.pwa-notification.info {
border-left: 4px solid var(--primary-gold);
}
.notification-close {
background: none;
border: none;
color: var(--sophisticated-gray);
font-size: 1.2rem;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition-smooth);
}
.notification-close:hover {
background: var(--light-gray);
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Offline Styles */
body.offline {
filter: grayscale(20%);
}
body.offline::before {
content: 'Offline Mode';
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--sophisticated-gray);
color: var(--rich-white);
text-align: center;
padding: var(--spacing-xs);
font-size: 0.9rem;
font-weight: 600;
z-index: 9999;
}
/* Luxury Page Header Styles */
.page-header {
background: linear-gradient(135deg, var(--deep-black) 0%, var(--charcoal) 100%);
color: var(--rich-white);
text-align: center;
padding: var(--spacing-xxl) 0;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, transparent 0%, rgba(212, 175, 55, 0.1) 100%);
pointer-events: none;
}
.page-header .container {
position: relative;
z-index: 2;
}
.page-header h2 {
font-family: var(--font-primary);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
margin-bottom: var(--spacing-md);
background: linear-gradient(135deg, var(--rich-white), var(--secondary-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
}
.page-header p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* Luxury About Page Styles */
.about-intro {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxl);
align-items: center;
}
.about-text h2 {
font-family: var(--font-primary);
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-lg);
position: relative;
}
.about-text h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.about-text p {
font-size: 1.1rem;
line-height: 1.8;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
}
.about-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px var(--shadow-color);
}
.about-image img {
width: 100%;
height: auto;
transition: var(--transition-elegant);
}
.about-image:hover img {
transform: scale(1.05);
}
/* Mission & Values Section */
.mission-values {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--pearl-white) 0%, var(--rich-white) 100%);
}
.mission-values h2 {
font-family: var(--font-primary);
text-align: center;
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xxl);
position: relative;
}
.mission-values h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
}
.value-card {
background: var(--rich-white);
padding: var(--spacing-xl);
border-radius: 20px;
text-align: center;
box-shadow: 0 8px 32px var(--shadow-color);
transition: var(--transition-elegant);
border: 1px solid var(--light-gray);
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, var(--primary-gold) 100%);
opacity: 0;
transition: var(--transition-elegant);
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px var(--shadow-color);
}
.value-card:hover::before {
opacity: 0.05;
}
.value-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
position: relative;
z-index: 2;
}
.value-icon i {
font-size: 2rem;
color: var(--deep-black);
}
.value-card h3 {
font-family: var(--font-primary);
font-size: 1.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
position: relative;
z-index: 2;
}
.value-card p {
color: var(--sophisticated-gray);
line-height: 1.6;
position: relative;
z-index: 2;
}
/* Team Section */
.team-section {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.team-section h2 {
font-family: var(--font-primary);
text-align: center;
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xxl);
position: relative;
}
.team-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
}
.team-member {
background: var(--rich-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px var(--shadow-color);
transition: var(--transition-elegant);
border: 1px solid var(--light-gray);
}
.team-member:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px var(--shadow-color);
}
.team-member img {
width: 100%;
height: 300px;
object-fit: cover;
transition: var(--transition-elegant);
}
.team-member:hover img {
transform: scale(1.05);
}
.team-member h3 {
font-family: var(--font-primary);
font-size: 1.4rem;
color: var(--deep-black);
margin: var(--spacing-lg) var(--spacing-lg) var(--spacing-xs);
}
.team-member .role {
color: var(--primary-gold);
font-weight: 600;
margin: 0 var(--spacing-lg) var(--spacing-md);
font-size: 0.95rem;
}
.team-member p {
color: var(--sophisticated-gray);
line-height: 1.6;
margin: 0 var(--spacing-lg) var(--spacing-lg);
}
/* Achievements Section */
.achievements {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--deep-black) 0%, var(--charcoal) 100%);
color: var(--rich-white);
}
.achievements h2 {
font-family: var(--font-primary);
text-align: center;
font-size: 2.5rem;
margin-bottom: var(--spacing-xxl);
background: linear-gradient(135deg, var(--rich-white), var(--secondary-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-xl);
}
.achievement {
text-align: center;
padding: var(--spacing-xl);
border-radius: 15px;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.2);
transition: var(--transition-elegant);
}
.achievement:hover {
background: rgba(212, 175, 55, 0.15);
transform: translateY(-5px);
}
.achievement-number {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
color: var(--primary-gold);
margin-bottom: var(--spacing-sm);
}
.achievement-text {
font-size: 1.1rem;
color: var(--rich-white);
opacity: 0.9;
}
/* Certifications Section */
.certifications {
padding: var(--spacing-xxl) 0;
background: var(--pearl-white);
}
.certifications h2 {
font-family: var(--font-primary);
text-align: center;
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xxl);
position: relative;
}
.certifications h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.cert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.cert-item {
background: var(--rich-white);
padding: var(--spacing-xl);
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 32px var(--shadow-color);
transition: var(--transition-elegant);
border: 1px solid var(--light-gray);
}
.cert-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px var(--shadow-color);
}
.cert-item i {
font-size: 3rem;
color: var(--primary-gold);
margin-bottom: var(--spacing-md);
}
.cert-item h3 {
font-family: var(--font-primary);
font-size: 1.3rem;
color: var(--deep-black);
margin-bottom: var(--spacing-sm);
}
.cert-item p {
color: var(--sophisticated-gray);
font-size: 0.95rem;
}
/* CTA Section */
.cta-section {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-gold) 100%);
text-align: center;
color: var(--deep-black);
}
.cta-section h2 {
font-family: var(--font-primary);
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
font-weight: 400;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: var(--spacing-xl);
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-section .btn {
background: var(--deep-black);
color: var(--rich-white);
font-size: 1.1rem;
padding: var(--spacing-md) var(--spacing-xxl);
}
.cta-section .btn:hover {
background: var(--charcoal);
transform: translateY(-3px);
}
/* Luxury Contact Page Styles */
.contact-content {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxl);
align-items: start;
}
.contact-form {
background: var(--pearl-white);
padding: var(--spacing-xxl);
border-radius: 20px;
box-shadow: 0 8px 32px var(--shadow-color);
border: 1px solid var(--light-gray);
}
.contact-form h3 {
font-family: var(--font-primary);
font-size: 2rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xl);
position: relative;
}
.contact-form h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-group label {
display: block;
font-family: var(--font-secondary);
font-weight: 600;
color: var(--deep-black);
margin-bottom: var(--spacing-xs);
font-size: 0.95rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: var(--spacing-md);
border: 2px solid var(--light-gray);
border-radius: 10px;
font-family: var(--font-secondary);
font-size: 1rem;
background: var(--rich-white);
transition: var(--transition-smooth);
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-gold);
box-shadow: 0 0 15px var(--gold-shadow);
transform: translateY(-2px);
}
.form-group textarea {
min-height: 120px;
font-family: var(--font-secondary);
}
.contact-info {
padding: var(--spacing-xl);
}
.contact-info h3 {
font-family: var(--font-primary);
font-size: 2rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xl);
position: relative;
}
.contact-info h3::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.info-item {
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background: var(--pearl-white);
border-radius: 15px;
border-left: 4px solid var(--primary-gold);
transition: var(--transition-smooth);
}
.info-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px var(--shadow-color);
}
.info-item h4 {
font-family: var(--font-primary);
font-size: 1.2rem;
color: var(--primary-gold);
margin-bottom: var(--spacing-xs);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.info-item h4::before {
content: '';
width: 8px;
height: 8px;
background: var(--primary-gold);
border-radius: 50%;
}
.info-item p {
color: var(--sophisticated-gray);
line-height: 1.6;
margin: 0;
}
/* Enhanced Footer Styles */
footer {
background: linear-gradient(135deg, var(--deep-black) 0%, var(--charcoal) 100%);
color: var(--rich-white);
padding: var(--spacing-xxl) 0 var(--spacing-lg);
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.footer-section h3 {
font-family: var(--font-primary);
color: var(--primary-gold);
margin-bottom: var(--spacing-md);
font-size: 1.3rem;
}
.footer-section p {
color: var(--rich-white);
opacity: 0.8;
line-height: 1.6;
margin-bottom: var(--spacing-sm);
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: var(--spacing-xs);
}
.footer-section ul li a {
color: var(--rich-white);
opacity: 0.8;
transition: var(--transition-smooth);
text-decoration: none;
}
.footer-section ul li a:hover {
opacity: 1;
color: var(--primary-gold);
transform: translateX(5px);
}
.social-links {
display: flex;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(212, 175, 55, 0.1);
border-radius: 50%;
color: var(--primary-gold);
transition: var(--transition-smooth);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.social-links a:hover {
background: var(--primary-gold);
color: var(--deep-black);
transform: translateY(-3px);
box-shadow: 0 5px 15px var(--gold-shadow);
}
.copyright {
text-align: center;
padding-top: var(--spacing-lg);
border-top: 1px solid rgba(212, 175, 55, 0.2);
color: var(--rich-white);
opacity: 0.7;
}
/* Luxury Product Detail Page Styles */
.breadcrumb-section {
background: var(--pearl-white);
padding: var(--spacing-md) 0;
border-bottom: 1px solid var(--light-gray);
}
.breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.9rem;
}
.breadcrumb a {
color: var(--sophisticated-gray);
text-decoration: none;
transition: var(--transition-smooth);
}
.breadcrumb a:hover {
color: var(--primary-gold);
}
.breadcrumb .separator {
color: var(--sophisticated-gray);
opacity: 0.5;
}
.breadcrumb span:last-child {
color: var(--deep-black);
font-weight: 600;
}
/* Product Detail Section */
.product-detail-section {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.product-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxl);
align-items: start;
}
/* Product Images */
.product-images {
position: sticky;
top: var(--spacing-lg);
}
.main-image-container {
position: relative;
margin-bottom: var(--spacing-lg);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px var(--shadow-color);
background: var(--pearl-white);
}
.main-image-container img {
width: 100%;
height: 500px;
object-fit: cover;
transition: var(--transition-elegant);
}
.zoom-btn {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: rgba(26, 26, 26, 0.8);
color: var(--rich-white);
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
opacity: 0;
}
.main-image-container:hover .zoom-btn {
opacity: 1;
}
.zoom-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
transform: scale(1.1);
}
.image-thumbnails {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-sm);
}
.thumbnail {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: var(--transition-smooth);
border: 2px solid transparent;
opacity: 0.7;
}
.thumbnail:hover,
.thumbnail.active {
opacity: 1;
border-color: var(--primary-gold);
transform: translateY(-2px);
}
/* Product Information */
.product-info {
padding: var(--spacing-lg) 0;
}
.product-info h1 {
font-family: var(--font-primary);
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
font-weight: 400;
line-height: 1.2;
}
.product-rating-section {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.rating-stars {
display: flex;
gap: 2px;
}
.rating-stars i {
color: var(--primary-gold);
font-size: 1.1rem;
}
.rating-stars .far {
color: var(--light-gray);
}
.review-count {
color: var(--sophisticated-gray);
font-size: 0.95rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.review-count:hover {
color: var(--primary-gold);
}
.product-pricing {
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background: var(--pearl-white);
border-radius: 15px;
border-left: 4px solid var(--primary-gold);
}
.price-display {
margin-bottom: var(--spacing-md);
}
.current-price {
font-family: var(--font-primary);
font-size: 2rem;
font-weight: 600;
color: var(--primary-gold);
}
.original-price {
font-size: 1.2rem;
color: var(--sophisticated-gray);
text-decoration: line-through;
margin-right: var(--spacing-sm);
}
.sale-price {
font-family: var(--font-primary);
font-size: 2rem;
font-weight: 600;
color: var(--primary-gold);
margin-right: var(--spacing-sm);
}
.savings {
background: #e74c3c;
color: var(--rich-white);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.stock-status {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 600;
}
.stock-status.in-stock {
color: #27ae60;
}
.stock-status.out-of-stock {
color: #e74c3c;
}
.product-description {
margin-bottom: var(--spacing-xl);
font-size: 1.1rem;
line-height: 1.7;
color: var(--sophisticated-gray);
}
.key-ingredients,
.product-benefits {
margin-bottom: var(--spacing-xl);
}
.key-ingredients h3,
.product-benefits h3 {
font-family: var(--font-primary);
font-size: 1.3rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
position: relative;
}
.key-ingredients h3::after,
.product-benefits h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 30px;
height: 2px;
background: var(--primary-gold);
}
.ingredients-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.ingredient-tag {
background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold));
color: var(--deep-black);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
}
.benefits-list {
list-style: none;
padding: 0;
}
.benefits-list li {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
color: var(--sophisticated-gray);
}
.benefits-list i {
color: var(--primary-gold);
font-size: 0.9rem;
}
/* Product Options */
.product-options {
background: var(--pearl-white);
padding: var(--spacing-xl);
border-radius: 15px;
margin-bottom: var(--spacing-xl);
}
.quantity-selector {
margin-bottom: var(--spacing-lg);
}
.quantity-selector label {
display: block;
font-weight: 600;
color: var(--deep-black);
margin-bottom: var(--spacing-sm);
}
.quantity-controls {
display: flex;
align-items: center;
gap: var(--spacing-sm);
max-width: 150px;
}
.quantity-btn {
width: 40px;
height: 40px;
border: 2px solid var(--primary-gold);
background: transparent;
color: var(--primary-gold);
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 1.2rem;
transition: var(--transition-smooth);
}
.quantity-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
}
#quantity-input {
width: 60px;
height: 40px;
text-align: center;
border: 2px solid var(--light-gray);
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
}
#quantity-input:focus {
border-color: var(--primary-gold);
outline: none;
}
.action-buttons {
display: flex;
gap: var(--spacing-md);
}
.add-to-cart-btn {
flex: 2;
font-size: 1.1rem;
padding: var(--spacing-md) var(--spacing-xl);
}
.add-to-cart-btn.success {
background: #27ae60;
transform: scale(1.05);
}
.wishlist-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
}
.wishlist-btn:hover i {
color: #e74c3c;
}
/* Social Sharing */
.social-sharing {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--light-gray);
}
.social-sharing h4 {
font-family: var(--font-secondary);
font-size: 1rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
}
.social-buttons {
display: flex;
gap: var(--spacing-sm);
}
.social-btn {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--transition-smooth);
border: 2px solid var(--light-gray);
color: var(--sophisticated-gray);
}
.social-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px var(--shadow-color);
}
.social-btn.facebook:hover {
background: #1877f2;
color: white;
border-color: #1877f2;
}
.social-btn.twitter:hover {
background: #1da1f2;
color: white;
border-color: #1da1f2;
}
.social-btn.pinterest:hover {
background: #bd081c;
color: white;
border-color: #bd081c;
}
.social-btn.email:hover {
background: var(--primary-gold);
color: var(--deep-black);
border-color: var(--primary-gold);
}
/* Product Tabs */
.product-tabs-section {
padding: var(--spacing-xxl) 0;
background: var(--pearl-white);
}
.product-tabs {
background: var(--rich-white);
border-radius: 20px;
box-shadow: 0 8px 32px var(--shadow-color);
overflow: hidden;
}
.tab-headers {
display: flex;
background: var(--deep-black);
}
.tab-header {
flex: 1;
padding: var(--spacing-lg);
background: transparent;
border: none;
color: var(--rich-white);
font-family: var(--font-secondary);
font-weight: 600;
cursor: pointer;
transition: var(--transition-smooth);
position: relative;
}
.tab-header:hover,
.tab-header.active {
background: var(--primary-gold);
color: var(--deep-black);
}
.tab-content {
padding: var(--spacing-xxl);
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.tab-pane h3 {
font-family: var(--font-primary);
font-size: 1.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-lg);
position: relative;
}
.tab-pane h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: var(--primary-gold);
}
/* Related Products */
.related-products-section {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.related-products-section h2 {
font-family: var(--font-primary);
text-align: center;
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xxl);
position: relative;
}
.related-products-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
/* Image Zoom Modal */
.zoom-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
}
.zoom-modal-content {
position: relative;
margin: auto;
padding: var(--spacing-lg);
width: 90%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
}
.zoom-close {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-xl);
color: var(--rich-white);
font-size: 2rem;
font-weight: bold;
cursor: pointer;
z-index: 10001;
transition: var(--transition-smooth);
}
.zoom-close:hover {
color: var(--primary-gold);
transform: scale(1.2);
}
#zoom-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
}
.zoom-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 var(--spacing-lg);
pointer-events: none;
}
.zoom-nav-btn {
background: rgba(26, 26, 26, 0.8);
color: var(--rich-white);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
pointer-events: all;
}
.zoom-nav-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
transform: scale(1.1);
}
/* Brand Management System Styles */
.brand-hero {
padding: var(--spacing-xxl) 0;
background: var(--pearl-white);
border-bottom: 1px solid var(--light-gray);
}
.brand-hero-content {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--spacing-xxl);
align-items: center;
}
.brand-logo-section {
text-align: center;
}
.brand-logo {
width: 120px;
height: 120px;
object-fit: contain;
margin-bottom: var(--spacing-md);
border-radius: 15px;
box-shadow: 0 8px 32px var(--shadow-color);
}
.brand-badges {
display: flex;
gap: var(--spacing-xs);
justify-content: center;
flex-wrap: wrap;
}
.badge {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge.exclusive {
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
}
.badge.featured {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: var(--rich-white);
}
.brand-info-section h1 {
font-family: var(--font-primary);
font-size: 3rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
font-weight: 400;
}
.brand-tagline {
font-size: 1.2rem;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
.brand-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.brand-detail {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.brand-detail .label {
font-size: 0.9rem;
color: var(--sophisticated-gray);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.brand-detail .value {
font-size: 1.1rem;
color: var(--deep-black);
font-weight: 500;
}
.brand-specialties h3 {
font-family: var(--font-primary);
font-size: 1.3rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
}
.specialty-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.specialty-tag {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
border: 2px solid transparent;
transition: var(--transition-smooth);
}
.specialty-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* Brand Story Section */
.brand-story-content {
padding: var(--spacing-xxl) 0;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.brand-story-content h2 {
font-family: var(--font-primary);
font-size: 2.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xl);
position: relative;
}
.brand-story-content h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.brand-story-text {
font-size: 1.2rem;
line-height: 1.8;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-xxl);
}
.brand-ingredients h3 {
font-family: var(--font-primary);
font-size: 1.8rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xl);
}
.ingredient-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
}
.ingredient-card {
background: var(--rich-white);
padding: var(--spacing-xl);
border-radius: 15px;
box-shadow: 0 8px 32px var(--shadow-color);
text-align: center;
transition: var(--transition-elegant);
}
.ingredient-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px var(--shadow-color);
}
.ingredient-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
color: var(--deep-black);
font-size: 1.5rem;
}
.ingredient-name {
font-weight: 600;
color: var(--deep-black);
font-size: 1.1rem;
}
/* Brand Statistics */
.brand-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
padding: var(--spacing-xxl) 0;
}
.stat-card {
background: var(--rich-white);
padding: var(--spacing-xl);
border-radius: 15px;
box-shadow: 0 8px 32px var(--shadow-color);
text-align: center;
border-left: 4px solid var(--primary-gold);
transition: var(--transition-elegant);
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px var(--shadow-color);
}
.stat-number {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
color: var(--primary-gold);
margin-bottom: var(--spacing-xs);
}
.stat-label {
font-size: 1.1rem;
color: var(--sophisticated-gray);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Brand Directory */
.directory-intro {
font-size: 1.2rem;
color: var(--sophisticated-gray);
text-align: center;
margin-bottom: var(--spacing-xxl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.featured-brands-section,
.all-brands-section {
margin-bottom: var(--spacing-xxl);
}
.featured-brands-section h2,
.all-brands-section h2 {
font-family: var(--font-primary);
font-size: 2.2rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xl);
text-align: center;
position: relative;
}
.featured-brands-section h2::after,
.all-brands-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
}
.brand-grid.featured {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.brand-card {
background: var(--rich-white);
border-radius: 20px;
box-shadow: 0 8px 32px var(--shadow-color);
overflow: hidden;
transition: var(--transition-elegant);
border: 2px solid transparent;
}
.brand-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px var(--shadow-color);
}
.brand-card.featured {
border-width: 3px;
}
.brand-card-header {
padding: var(--spacing-xl);
text-align: center;
position: relative;
}
.brand-card-logo {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: var(--spacing-md);
border-radius: 10px;
}
.brand-card-content {
padding: var(--spacing-xl);
}
.brand-card-name {
font-family: var(--font-primary);
font-size: 1.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
font-weight: 500;
}
.brand-card-description {
color: var(--sophisticated-gray);
line-height: 1.6;
margin-bottom: var(--spacing-lg);
}
.brand-card-details {
margin-bottom: var(--spacing-lg);
}
.brand-card-details .brand-detail {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: var(--spacing-xs) 0;
border-bottom: 1px solid var(--light-gray);
}
.brand-card-details .brand-detail:last-child {
border-bottom: none;
}
.brand-card-actions {
display: flex;
gap: var(--spacing-sm);
}
.brand-btn {
flex: 1;
text-align: center;
color: var(--rich-white) !important;
font-weight: 600;
}
.brand-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* Brand Category Section */
.brand-category-section {
margin-bottom: var(--spacing-xxl);
}
.category-title {
font-family: var(--font-primary);
font-size: 1.8rem;
color: var(--deep-black);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--primary-gold);
position: relative;
}
.category-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 50px;
height: 2px;
background: var(--accent-gold);
}
/* Brand Comparison Section */
.brand-comparison-section {
background: var(--pearl-white);
padding: var(--spacing-xxl) 0;
}
.section-description {
text-align: center;
font-size: 1.1rem;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.comparison-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.filter-group label {
font-weight: 600;
color: var(--deep-black);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group select {
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--light-gray);
border-radius: 8px;
font-size: 1rem;
background: var(--rich-white);
transition: var(--transition-smooth);
}
.filter-group select:focus {
border-color: var(--primary-gold);
outline: none;
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
/* Brand Spotlight Section */
.brand-spotlight-section {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.spotlight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.spotlight-card {
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
border-radius: 20px;
padding: var(--spacing-xxl);
text-align: center;
color: var(--deep-black);
transition: var(--transition-elegant);
position: relative;
overflow: hidden;
}
.spotlight-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
transition: var(--transition-elegant);
}
.spotlight-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(212, 175, 55, 0.3);
}
.spotlight-card:hover::before {
transform: scale(1.2);
}
.spotlight-content {
position: relative;
z-index: 2;
}
.spotlight-card h3 {
font-family: var(--font-primary);
font-size: 1.8rem;
margin-bottom: var(--spacing-md);
font-weight: 500;
}
.spotlight-card p {
font-size: 1.1rem;
margin-bottom: var(--spacing-lg);
opacity: 0.9;
}
.spotlight-card .btn {
background: var(--deep-black);
color: var(--rich-white);
border: 2px solid var(--deep-black);
}
.spotlight-card .btn:hover {
background: transparent;
color: var(--deep-black);
}
/* Brand Values Section */
.brand-values-section {
padding: var(--spacing-xxl) 0;
background: var(--pearl-white);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.value-card {
background: var(--rich-white);
padding: var(--spacing-xl);
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 32px var(--shadow-color);
transition: var(--transition-elegant);
border-top: 4px solid var(--primary-gold);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px var(--shadow-color);
}
.value-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--deep-black);
font-size: 2rem;
}
.value-card h3 {
font-family: var(--font-primary);
font-size: 1.3rem;
color: var(--deep-black);
margin-bottom: var(--spacing-md);
font-weight: 500;
}
.value-card p {
color: var(--sophisticated-gray);
line-height: 1.6;
}
/* Brand Awards Section */
.brand-awards-section {
padding: var(--spacing-xxl) 0;
background: var(--rich-white);
}
.awards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
}
.award-card {
background: var(--pearl-white);
padding: var(--spacing-xl);
border-radius: 15px;
text-align: center;
border-left: 4px solid var(--primary-gold);
transition: var(--transition-elegant);
position: relative;
}
.award-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 32px var(--shadow-color);
}
.award-year {
background: var(--primary-gold);
color: var(--deep-black);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-weight: 700;
font-size: 0.9rem;
display: inline-block;
margin-bottom: var(--spacing-md);
}
.award-card h3 {
font-family: var(--font-primary);
font-size: 1.2rem;
color: var(--deep-black);
margin-bottom: var(--spacing-sm);
font-weight: 500;
}
.award-card p {
color: var(--sophisticated-gray);
font-size: 0.95rem;
}
/* Newsletter Sections */
.newsletter-section,
.brand-newsletter-section {
background: linear-gradient(135deg, var(--deep-black), #2c2c2c);
padding: var(--spacing-xxl) 0;
color: var(--rich-white);
}
.newsletter-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.newsletter-content h2 {
font-family: var(--font-primary);
font-size: 2.2rem;
margin-bottom: var(--spacing-md);
color: var(--rich-white);
}
.newsletter-content p {
font-size: 1.1rem;
margin-bottom: var(--spacing-xl);
opacity: 0.9;
}
.newsletter-form {
display: flex;
gap: var(--spacing-sm);
max-width: 400px;
margin: 0 auto;
}
.newsletter-form input {
flex: 1;
padding: var(--spacing-md);
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: var(--rich-white);
font-size: 1rem;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-form input:focus {
border-color: var(--primary-gold);
outline: none;
background: rgba(255, 255, 255, 0.15);
}
.newsletter-form .btn {
background: var(--primary-gold);
color: var(--deep-black);
border: 2px solid var(--primary-gold);
font-weight: 600;
white-space: nowrap;
}
.newsletter-form .btn:hover {
background: transparent;
color: var(--primary-gold);
}
/* Loading State */
.loading-state {
text-align: center;
padding: var(--spacing-xxl) 0;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid var(--light-gray);
border-top: 4px solid var(--primary-gold);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto var(--spacing-lg);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-state p {
color: var(--sophisticated-gray);
font-size: 1.1rem;
}
/* Responsive Design for Brand Pages */
@media (max-width: 768px) {
.brand-hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: var(--spacing-lg);
}
.brand-logo {
width: 100px;
height: 100px;
}
.brand-info-section h1 {
font-size: 2.2rem;
}
.brand-details {
grid-template-columns: 1fr;
}
.brand-grid {
grid-template-columns: 1fr;
}
.brand-grid.featured {
grid-template-columns: 1fr;
}
.comparison-filters {
grid-template-columns: 1fr;
}
.newsletter-form {
flex-direction: column;
}
.spotlight-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.awards-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* Luxury Featured Products Section */
.featured-products {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--pearl-white) 0%, var(--rich-white) 100%);
position: relative;
}
.featured-products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.featured-products .container {
position: relative;
z-index: 2;
}
.featured-products h2 {
font-family: var(--font-primary);
text-align: center;
margin-bottom: var(--spacing-xxl);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
color: var(--deep-black);
letter-spacing: 1px;
position: relative;
}
.featured-products h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
border-radius: 2px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-xl);
}
.product-card {
background: var(--rich-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px var(--shadow-color);
transition: var(--transition-elegant);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
border: 1px solid var(--light-gray);
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, var(--primary-gold) 100%);
opacity: 0;
transition: var(--transition-elegant);
pointer-events: none;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px var(--shadow-color);
}
.product-card:hover::before {
opacity: 0.05;
}
.product-image-container {
position: relative;
overflow: hidden;
height: 280px;
}
.product-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-elegant);
}
.product-card:hover img {
transform: scale(1.1);
}
.product-info {
padding: var(--spacing-lg);
flex: 1;
display: flex;
flex-direction: column;
}
.product-card h3 {
font-family: var(--font-primary);
font-size: 1.4rem;
font-weight: 500;
margin-bottom: var(--spacing-sm);
color: var(--deep-black);
}
.product-card h3 a {
color: inherit;
text-decoration: none;
transition: var(--transition-smooth);
}
.product-card h3 a:hover {
color: var(--primary-gold);
}
.product-rating {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
color: var(--primary-gold);
font-size: 0.9rem;
}
.stars .far {
color: var(--light-gray);
}
.review-count {
font-size: 0.85rem;
color: var(--sophisticated-gray);
font-weight: 500;
}
.product-card .price {
font-family: var(--font-primary);
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-gold);
margin-bottom: var(--spacing-sm);
}
.stock-status {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.stock-status.in-stock {
color: #27ae60;
}
.stock-status.out-of-stock {
color: #e74c3c;
}
.product-card .description {
font-family: var(--font-secondary);
font-size: 0.95rem;
line-height: 1.6;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
flex: 1;
}
.product-buttons {
display: flex;
gap: var(--spacing-sm);
margin-top: auto;
}
.product-buttons .btn {
flex: 1;
font-size: 0.9rem;
padding: var(--spacing-sm) var(--spacing-md);
}
.view-details-btn {
background: transparent;
color: var(--primary-gold);
border: 2px solid var(--primary-gold);
box-shadow: none;
}
.view-details-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
}
.add-to-cart-btn.disabled {
background: var(--sophisticated-gray);
cursor: not-allowed;
opacity: 0.6;
}
.add-to-cart-btn.disabled:hover {
background: var(--sophisticated-gray);
transform: none;
box-shadow: none;
}
.product-link {
display: block;
cursor: pointer;
}
/* Testimonials section */
.testimonials {
padding: 80px 0;
}
.testimonials h2 {
text-align: center;
margin-bottom: 40px;
font-size: 2rem;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
}
.testimonial {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.testimonial p {
font-style: italic;
margin-bottom: 15px;
}
.testimonial cite {
font-weight: bold;
}
/* Footer styles */
footer {
background: #333;
color: #fff;
padding: 60px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.footer-section h3 {
margin-bottom: 20px;
font-size: 1.3rem;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul li a {
color: #ccc;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #f8c291;
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid #555;
}
/* Page Header */
.page-header {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/hero-bg.jpg');
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
padding: 60px 0;
}
/* Search Results Styles */
.search-results-section {
padding: 60px 0;
}
.search-header {
margin-bottom: 30px;
}
.search-header h1 {
font-size: 2rem;
margin-bottom: 10px;
color: #333;
}
#search-query-display {
color: #f8c291;
}
#search-count {
color: #666;
font-size: 1.1rem;
}
/* Enhanced Search Filters */
.search-filters {
margin-bottom: 30px;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
border: 1px solid #eee;
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 15px;
}
.filter-row:last-child {
margin-bottom: 0;
}
.filter-group {
flex: 1;
min-width: 200px;
}
.filter-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
font-size: 0.9rem;
}
.filter-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 5px;
background: white;
font-size: 0.9rem;
transition: border-color 0.3s ease;
}
.filter-group select:focus {
border-color: #f8c291;
outline: none;
box-shadow: 0 0 5px rgba(248, 194, 145, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.btn-secondary:hover {
background: #5a6268;
}
/* Search Suggestions */
.search-container {
position: relative;
}
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
max-height: 300px;
overflow-y: auto;
display: none;
}
.search-suggestions.show {
display: block;
}
.suggestions-header {
padding: 10px 15px;
background: #f8f9fa;
font-weight: 600;
font-size: 0.8rem;
color: #666;
text-transform: uppercase;
border-bottom: 1px solid #eee;
}
.suggestion-item {
padding: 12px 15px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: background-color 0.2s ease;
border-bottom: 1px solid #f0f0f0;
}
.suggestion-item:hover {
background: #f8f9fa;
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item i {
color: #999;
width: 16px;
}
.suggestion-text {
flex: 1;
font-size: 0.9rem;
}
.suggestion-text strong {
color: #f8c291;
}
.suggestion-type {
font-size: 0.7rem;
color: #f8c291;
}
.remove-history {
color: #dc3545;
cursor: pointer;
padding: 2px;
border-radius: 3px;
transition: background-color 0.2s ease;
}
.remove-history:hover {
background: #f8d7da;
}
/* Enhanced No Results */
.no-results {
text-align: center;
padding: 60px 20px;
color: #666;
}
.no-results-icon {
font-size: 4rem;
color: #ddd;
margin-bottom: 20px;
}
.no-results h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
}
.no-results p {
font-size: 1.1rem;
margin-bottom: 20px;
}
.no-results-suggestions {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
text-align: left;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.no-results-suggestions h4 {
margin-bottom: 10px;
color: #333;
font-size: 1rem;
}
.no-results-suggestions ul {
margin-bottom: 20px;
padding-left: 20px;
}
.no-results-suggestions li {
margin-bottom: 5px;
}
.popular-searches {
margin-top: 15px;
}
.popular-search-tag {
display: inline-block;
background: #f8c291;
color: white;
padding: 5px 10px;
border-radius: 15px;
text-decoration: none;
font-size: 0.8rem;
margin: 2px;
transition: background-color 0.3s ease;
}
.popular-search-tag:hover {
background: #f39c12;
color: white;
}
.no-results a {
color: #f8c291;
text-decoration: underline;
}
.highlight {
background-color: rgba(248, 194, 145, 0.3);
padding: 1px 3px;
border-radius: 2px;
font-weight: 600;
}
.page-header h2 {
font-size: 2.5rem;
}
/* About Page Styles */
.about-content {
padding: 80px 0;
}
.about-grid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 50px;
}
.about-text h3 {
margin-bottom: 20px;
font-size: 1.8rem;
}
.about-text p {
margin-bottom: 20px;
}
.about-text ul {
margin-left: 20px;
margin-bottom: 20px;
}
.about-text ul li {
margin-bottom: 10px;
list-style-type: disc;
}
.about-image img {
width: 100%;
border-radius: 8px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}
/* Contact Page Styles */
.contact-content {
padding: 80px 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.contact-info .info-item {
margin-bottom: 30px;
}
.contact-info h4 {
margin-bottom: 10px;
color: #f8c291;
}
/* Products Page Styles */
.products-content {
padding: 80px 0;
}
.product-categories {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.category-btn {
background: none;
border: none;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
font-weight: 600;
transition: color 0.3s ease;
}
.category-btn:hover,
.category-btn.active {
color: #f8c291;
}
/* Enhanced Product Card Styles for Search Results */
.product-card {
position: relative;
overflow: hidden;
}
.product-image-container {
position: relative;
overflow: hidden;
}
.out-of-stock-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.1rem;
}
.product-info {
padding: 15px;
}
.product-rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
color: #ffc107;
font-size: 0.9rem;
}
.stars .far {
color: #ddd;
}
.review-count {
font-size: 0.8rem;
color: #666;
}
.stock-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 10px;
}
.stock-status.in-stock {
color: #28a745;
}
.stock-status.out-of-stock {
color: #dc3545;
}
.product-card .description {
font-weight: normal;
color: #666;
margin-bottom: 15px;
line-height: 1.4;
}
.product-card .price {
color: #f8c291;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
}
.product-buttons {
display: flex;
gap: 10px;
}
.product-buttons .btn {
flex: 1;
text-align: center;
padding: 10px;
font-size: 0.9rem;
}
.add-to-cart-btn.disabled {
background: #6c757d;
cursor: not-allowed;
opacity: 0.6;
}
.add-to-cart-btn.disabled:hover {
background: #6c757d;
}
/* Shopping Cart Styles */
.user-account,
.cart-icon {
position: relative;
}
.user-account a,
.cart-icon a {
display: flex;
align-items: center;
}
.user-account i,
.cart-icon i {
font-size: 1.2rem;
}
.user-account i {
color: #333;
transition: color 0.3s ease;
}
.user-account a:hover i {
color: #f8c291;
}
#cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: #f8c291;
color: #fff;
font-size: 0.7rem;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cart-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 350px;
height: 100%;
background-color: #fff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #eee;
}
.cart-header h3 {
margin: 0;
color: #333;
}
#close-cart {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #999;
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.empty-cart {
text-align: center;
color: #999;
margin-top: 50px;
}
.cart-item {
display: flex;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
position: relative;
}
.cart-item img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 5px;
margin-right: 15px;
}
.cart-item-details {
flex: 1;
}
.cart-item-details h4 {
margin: 0 0 5px;
font-size: 1rem;
}
.cart-item-price {
color: #f8c291;
font-weight: bold;
margin-bottom: 10px;
}
.quantity-control {
display: flex;
align-items: center;
}
.quantity-btn {
width: 25px;
height: 25px;
background: #f1f1f1;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.quantity {
margin: 0 10px;
}
.remove-item {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
font-size: 1.2rem;
color: #999;
cursor: pointer;
}
.cart-footer {
padding: 20px;
border-top: 1px solid #eee;
}
.cart-total {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-weight: bold;
}
#checkout-btn {
width: 100%;
text-align: center;
}
.cart-notification {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
z-index: 1001;
transform: translateY(100px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.cart-notification.show {
transform: translateY(0);
opacity: 1;
}
.cart-notification.success {
background-color: #4CAF50;
color: #fff;
}
.cart-notification.error {
background-color: #e74c3c;
color: #fff;
}
.cart-notification.info {
background-color: #3498db;
color: #fff;
}
/* Default notification style (backward compatibility) */
.cart-notification:not(.success):not(.error):not(.info) {
background-color: #f8c291;
color: #fff;
}
/* Responsive styles */
@media (max-width: 992px) {
.header-top {
flex-wrap: wrap;
}
.search-container {
order: 3;
max-width: 100%;
margin: 15px 0 0;
width: 100%;
}
}
@media (max-width: 768px) {
header .container {
flex-direction: column;
}
.header-top {
width: 100%;
}
.header-icons {
margin-left: auto;
}
nav ul {
margin-top: 10px;
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 5px 10px;
}
.hero h2 {
font-size: 2rem;
}
.product-grid, .testimonial-grid {
grid-template-columns: 1fr;
}
.about-grid, .contact-grid {
grid-template-columns: 1fr;
}
.cart-sidebar {
width: 100%;
right: -100%;
}
/* Enhanced search responsive styles */
.filter-row {
flex-direction: column;
gap: 15px;
}
.filter-group {
min-width: auto;
}
.search-suggestions {
left: -10px;
right: -10px;
}
.no-results-suggestions {
margin: 15px;
padding: 15px;
}
.product-buttons {
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 480px) {
.logo h1 {
font-size: 1.5rem;
}
#search-input {
padding: 8px 15px;
}
.header-icons {
margin-left: 10px;
}
}
/* Enhanced PWA Styles */
.notification-permission-banner {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
background: linear-gradient(135deg, var(--deep-black), #2c2c2c);
color: var(--rich-white);
padding: var(--spacing-lg);
border-radius: 15px;
box-shadow: 0 8px 32px var(--shadow-color);
z-index: 10000;
animation: slideUp 0.5s ease;
backdrop-filter: blur(10px);
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.banner-content {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.banner-content i {
font-size: 2rem;
color: var(--primary-gold);
}
.banner-text h4 {
font-family: var(--font-primary);
font-size: 1.2rem;
margin-bottom: var(--spacing-xs);
color: var(--rich-white);
}
.banner-text p {
font-size: 0.95rem;
opacity: 0.9;
margin: 0;
}
.banner-actions {
display: flex;
gap: var(--spacing-sm);
margin-left: auto;
}
.banner-actions .btn {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
white-space: nowrap;
}
.banner-actions .btn-primary {
background: var(--primary-gold);
color: var(--deep-black);
border: 2px solid var(--primary-gold);
}
.banner-actions .btn-secondary {
background: transparent;
color: var(--rich-white);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.banner-actions .btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Install Promotion Modal */
.install-promotion-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
.modal-content {
position: relative;
background: var(--rich-white);
border-radius: 20px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-close {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: none;
border: none;
font-size: 1.5rem;
color: var(--sophisticated-gray);
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition-smooth);
}
.modal-close:hover {
background: var(--light-gray);
color: var(--deep-black);
}
.modal-header {
text-align: center;
padding: var(--spacing-xxl) var(--spacing-xl) var(--spacing-lg);
border-bottom: 1px solid var(--light-gray);
}
.modal-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-md);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
.modal-header h3 {
font-family: var(--font-primary);
font-size: 1.8rem;
color: var(--deep-black);
margin: 0;
}
.modal-body {
padding: var(--spacing-xl);
}
.modal-body p {
font-size: 1.1rem;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
}
.modal-body ul {
list-style: none;
padding: 0;
margin: 0;
}
.modal-body li {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
font-size: 1rem;
color: var(--sophisticated-gray);
}
.modal-body i {
color: var(--primary-gold);
font-size: 1.1rem;
}
.modal-actions {
padding: var(--spacing-xl);
border-top: 1px solid var(--light-gray);
display: flex;
gap: var(--spacing-md);
}
.modal-actions .btn {
flex: 1;
text-align: center;
padding: var(--spacing-md);
font-size: 1rem;
}
/* PWA Update Notification */
.pwa-update-notification {
position: fixed;
top: 20px;
right: 20px;
background: var(--primary-gold);
color: var(--deep-black);
padding: var(--spacing-lg);
border-radius: 10px;
box-shadow: 0 8px 32px var(--shadow-color);
z-index: 10000;
max-width: 350px;
animation: slideInRight 0.5s ease;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.update-notification-content {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.update-notification-content i {
font-size: 1.5rem;
}
.update-text h4 {
font-size: 1rem;
margin-bottom: var(--spacing-xs);
font-weight: 600;
}
.update-text p {
font-size: 0.9rem;
margin: 0;
opacity: 0.8;
}
.update-actions {
margin-top: var(--spacing-md);
display: flex;
gap: var(--spacing-sm);
}
.update-actions button {
background: var(--deep-black);
color: var(--primary-gold);
border: none;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 5px;
font-size: 0.85rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.update-actions button:hover {
background: #2c2c2c;
}
.update-actions .dismiss-btn {
background: transparent;
color: var(--deep-black);
border: 1px solid var(--deep-black);
}
.update-actions .dismiss-btn:hover {
background: rgba(26, 26, 26, 0.1);
}
/* PWA Mobile Responsive */
@media (max-width: 768px) {
.notification-permission-banner {
left: 10px;
right: 10px;
bottom: 10px;
}
.banner-content {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
}
.banner-actions {
margin-left: 0;
width: 100%;
}
.banner-actions .btn {
flex: 1;
}
.modal-content {
width: 95%;
margin: 20px;
}
.modal-header {
padding: var(--spacing-lg);
}
.modal-body {
padding: var(--spacing-lg);
}
.modal-actions {
padding: var(--spacing-lg);
flex-direction: column;
}
.pwa-update-notification {
left: 10px;
right: 10px;
top: 10px;
max-width: none;
}
}
/* Enhanced Luxury Animations & Visual Effects */
/* Floating Particles Animation */
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, var(--primary-gold), transparent);
border-radius: 50%;
animation: float 15s infinite linear;
opacity: 0.6;
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
/* Enhanced Product Card Animations */
.product-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.product-card:hover::before {
left: 100%;
}
.product-image-container {
position: relative;
overflow: hidden;
}
.product-image-container img {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(212, 175, 55, 0.3));
opacity: 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.product-actions {
display: flex;
gap: var(--spacing-sm);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.product-card:hover .product-actions {
transform: translateY(0);
}
.action-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
color: var(--deep-black);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.action-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
transform: scale(1.1);
}
/* Product Badges */
.sale-badge, .new-badge, .bestseller-badge {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
}
.sale-badge {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}
.new-badge {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}
.bestseller-badge {
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
}
/* Featured Products Carousel */
.featured-products-section {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--pearl-white), var(--rich-white));
position: relative;
overflow: hidden;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-xxl);
}
.section-header h2 {
font-family: var(--font-primary);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--deep-black);
margin-bottom: var(--spacing-md);
position: relative;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
border-radius: 2px;
}
.product-carousel {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.carousel-container {
overflow: hidden;
border-radius: 20px;
}
.carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
gap: var(--spacing-lg);
}
.carousel-track .product-card {
flex: 0 0 calc(33.333% - var(--spacing-lg));
min-width: 300px;
}
.carousel-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 3;
}
.carousel-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 2px solid var(--primary-gold);
color: var(--primary-gold);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
pointer-events: all;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.carousel-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
transform: scale(1.1);
}
.carousel-indicators {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: var(--primary-gold);
transform: scale(1.2);
}
/* Hero Products Grid */
.hero-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xxl);
}
.hero-product-card {
background: var(--rich-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.hero-product-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.hero-product-card .product-image {
position: relative;
height: 250px;
overflow: hidden;
}
.hero-product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hero-product-card:hover .product-image img {
transform: scale(1.05);
}
.view-product-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.95);
color: var(--deep-black);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 25px;
text-decoration: none;
font-weight: 600;
opacity: 0;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.hero-product-card:hover .view-product-btn {
opacity: 1;
}
.view-product-btn:hover {
background: var(--primary-gold);
transform: translate(-50%, -50%) scale(1.05);
}
/* Chatbot Widget Styles */
.chatbot-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 10000;
font-family: var(--font-secondary);
}
.chatbot-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
transition: all 0.3s ease;
position: relative;
}
.chatbot-toggle:hover {
transform: scale(1.1);
box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4);
}
.chat-notification {
position: absolute;
top: -5px;
right: -5px;
width: 20px;
height: 20px;
background: #e74c3c;
color: white;
border-radius: 50%;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.chatbot-window {
position: absolute;
bottom: 80px;
right: 0;
width: 350px;
height: 500px;
background: var(--rich-white);
border-radius: 20px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
transform: scale(0) translateY(20px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
border: 1px solid var(--light-gray);
}
.chatbot-window.active {
transform: scale(1) translateY(0);
opacity: 1;
}
.chatbot-header {
background: linear-gradient(135deg, var(--deep-black), #2c2c2c);
color: var(--rich-white);
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.chatbot-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--primary-gold);
}
.chatbot-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.chatbot-info h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.status {
font-size: 0.8rem;
opacity: 0.8;
}
.status.online::before {
content: '●';
color: #27ae60;
margin-right: 5px;
}
.close-chat {
margin-left: auto;
background: none;
border: none;
color: var(--rich-white);
cursor: pointer;
font-size: 1.2rem;
padding: 5px;
border-radius: 50%;
transition: background 0.3s ease;
}
.close-chat:hover {
background: rgba(255, 255, 255, 0.1);
}
.chatbot-messages {
height: 300px;
overflow-y: auto;
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.message {
max-width: 80%;
animation: messageSlideIn 0.3s ease;
}
@keyframes messageSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bot-message {
align-self: flex-start;
}
.user-message {
align-self: flex-end;
}
.message-content {
background: var(--light-gray);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 18px;
font-size: 0.9rem;
line-height: 1.4;
}
.bot-message .message-content {
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
}
.user-message .message-content {
background: var(--deep-black);
color: var(--rich-white);
}
.message-time {
font-size: 0.7rem;
color: var(--sophisticated-gray);
margin-top: 5px;
text-align: right;
}
.bot-message .message-time {
text-align: left;
}
.typing-indicator .typing-dots {
display: flex;
gap: 4px;
padding: var(--spacing-sm);
}
.typing-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sophisticated-gray);
animation: typing 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-10px);
opacity: 1;
}
}
.chatbot-input {
display: flex;
padding: var(--spacing-lg);
border-top: 1px solid var(--light-gray);
gap: var(--spacing-sm);
}
.chatbot-input input {
flex: 1;
border: 1px solid var(--light-gray);
border-radius: 20px;
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
outline: none;
transition: border-color 0.3s ease;
}
.chatbot-input input:focus {
border-color: var(--primary-gold);
}
.chatbot-input button {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-gold);
border: none;
color: var(--deep-black);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.chatbot-input button:hover {
background: var(--accent-gold);
transform: scale(1.05);
}
.quick-actions {
padding: 0 var(--spacing-lg) var(--spacing-lg);
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.quick-btn {
background: transparent;
border: 1px solid var(--primary-gold);
color: var(--primary-gold);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 15px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
}
.quick-btn:hover {
background: var(--primary-gold);
color: var(--deep-black);
}
/* WhatsApp Float Button */
.whatsapp-float {
position: fixed;
bottom: 100px;
right: 20px;
z-index: 9999;
}
.whatsapp-btn {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: #25d366;
color: white;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 25px;
text-decoration: none;
font-weight: 600;
box-shadow: 0 8px 32px rgba(37, 211, 102, 0.3);
transition: all 0.3s ease;
font-size: 0.9rem;
}
.whatsapp-btn:hover {
background: #128c7e;
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(37, 211, 102, 0.4);
}
.whatsapp-btn i {
font-size: 1.2rem;
}
.whatsapp-text {
white-space: nowrap;
}
/* Quick View Modal */
.quick-view-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
backdrop-filter: blur(5px);
}
.quick-view-modal .modal-content {
background: var(--rich-white);
border-radius: 20px;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: slideIn 0.3s ease;
}
.quick-view-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxl);
padding: var(--spacing-xxl);
}
.quick-view-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 15px;
}
.quick-view-info {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.quick-view-actions {
display: flex;
gap: var(--spacing-md);
margin-top: auto;
}
.quick-view-actions .btn {
flex: 1;
}
/* Lightbox */
.lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10002;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
background: rgba(255, 255, 255, 0.9);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
color: var(--deep-black);
transition: all 0.3s ease;
}
.lightbox-close:hover {
background: var(--primary-gold);
transform: scale(1.1);
}
/* Notifications */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: var(--rich-white);
color: var(--deep-black);
padding: var(--spacing-lg);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
z-index: 10003;
display: flex;
align-items: center;
gap: var(--spacing-sm);
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
border-left: 4px solid var(--primary-gold);
max-width: 350px;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
.notification.success {
border-left-color: #27ae60;
}
.notification.error {
border-left-color: #e74c3c;
}
.notification i {
font-size: 1.2rem;
color: var(--primary-gold);
}
.notification.success i {
color: #27ae60;
}
.notification.error i {
color: #e74c3c;
}
/* Luxury Loader */
#luxury-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
z-index: 10004;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.loader-content {
text-align: center;
}
.golden-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(212, 175, 55, 0.2);
border-top: 4px solid var(--primary-gold);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto var(--spacing-lg);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader-content p {
color: var(--sophisticated-gray);
font-size: 1.1rem;
font-weight: 500;
}
/* Responsive Design for Enhanced Features */
@media (max-width: 768px) {
.chatbot-window {
width: calc(100vw - 40px);
height: 400px;
bottom: 80px;
right: 20px;
left: 20px;
}
.whatsapp-float {
bottom: 120px;
}
.carousel-track .product-card {
flex: 0 0 calc(100% - var(--spacing-lg));
min-width: 280px;
}
.quick-view-content {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
}
.quick-view-image img {
height: 250px;
}
.hero-products-grid {
grid-template-columns: 1fr;
}
.notification {
left: 20px;
right: 20px;
max-width: none;
}
}
/* Enhanced Homepage Styles */
/* Hero Section Enhancements */
.hero {
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-actions {
display: flex;
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
justify-content: center;
flex-wrap: wrap;
}
.btn-secondary {
background: transparent;
color: var(--rich-white);
border: 2px solid var(--rich-white);
}
.btn-secondary:hover {
background: var(--rich-white);
color: var(--deep-black);
}
/* Hero Statistics */
.hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xxl);
padding: var(--spacing-xl) 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-item {
text-align: center;
color: var(--rich-white);
}
.counter {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
color: var(--primary-gold);
display: block;
margin-bottom: var(--spacing-sm);
}
.stat-item span {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
/* Brand Showcase Section */
.brand-showcase {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--pearl-white), var(--rich-white));
position: relative;
}
.brand-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
.brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xxl);
}
.brand-card {
background: var(--rich-white);
border-radius: 20px;
padding: var(--spacing-xxl);
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 1px solid var(--light-gray);
}
.brand-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent, rgba(212, 175, 55, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
}
.brand-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.brand-card:hover::before {
opacity: 1;
}
.brand-logo {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-lg);
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--primary-gold);
transition: transform 0.3s ease;
}
.brand-card:hover .brand-logo {
transform: scale(1.1);
}
.brand-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brand-card h3 {
font-family: var(--font-primary);
font-size: 1.5rem;
color: var(--deep-black);
margin-bottom: var(--spacing-sm);
}
.brand-card p {
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
font-size: 1rem;
}
.brand-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--primary-gold);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
padding: var(--spacing-sm) var(--spacing-lg);
border: 2px solid var(--primary-gold);
border-radius: 25px;
background: transparent;
}
.brand-link:hover {
background: var(--primary-gold);
color: var(--deep-black);
transform: translateY(-2px);
}
.brand-link::after {
content: '→';
transition: transform 0.3s ease;
}
.brand-link:hover::after {
transform: translateX(5px);
}
.btn-outline {
background: transparent;
color: var(--primary-gold);
border: 2px solid var(--primary-gold);
}
.btn-outline:hover {
background: var(--primary-gold);
color: var(--deep-black);
}
/* Enhanced Testimonials */
.testimonials {
padding: var(--spacing-xxl) 0;
background: var(--deep-black);
color: var(--rich-white);
position: relative;
}
.testimonials::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent, rgba(212, 175, 55, 0.1));
pointer-events: none;
}
.testimonials .container {
position: relative;
z-index: 2;
}
.testimonials h2 {
color: var(--rich-white);
text-align: center;
margin-bottom: var(--spacing-xxl);
font-family: var(--font-primary);
}
.testimonials h2::after {
background: linear-gradient(90deg, var(--primary-gold), var(--accent-gold));
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--spacing-xl);
}
.testimonial {
background: rgba(255, 255, 255, 0.05);
padding: var(--spacing-xxl);
border-radius: 20px;
border: 1px solid rgba(212, 175, 55, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.testimonial:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
}
.testimonial p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: var(--spacing-lg);
font-style: italic;
position: relative;
}
.testimonial p::before {
content: '"';
font-size: 4rem;
color: var(--primary-gold);
position: absolute;
top: -20px;
left: -20px;
font-family: serif;
}
.testimonial cite {
color: var(--primary-gold);
font-weight: 600;
font-style: normal;
}
/* Responsive Enhancements */
@media (max-width: 768px) {
.hero-actions {
flex-direction: column;
align-items: center;
}
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.counter {
font-size: 2rem;
}
.brand-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.brand-card {
padding: var(--spacing-lg);
}
.testimonial-grid {
grid-template-columns: 1fr;
}
.testimonial {
padding: var(--spacing-lg);
}
}
@media (max-width: 480px) {
.hero-stats {
grid-template-columns: 1fr;
}
.stat-item {
padding: var(--spacing-md) 0;
}
}
/* Enhanced Product Page Styles */
/* Product Filters */
.product-filters {
background: var(--rich-white);
border-radius: 15px;
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border: 1px solid var(--light-gray);
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
}
.filter-header h3 {
font-family: var(--font-primary);
color: var(--deep-black);
margin: 0;
}
.filter-toggle {
display: none;
background: var(--primary-gold);
color: var(--deep-black);
border: none;
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-toggle:hover {
background: var(--accent-gold);
transform: translateY(-2px);
}
.filter-content {
transition: all 0.3s ease;
}
.filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.filter-group label {
font-weight: 600;
color: var(--deep-black);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group select {
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--light-gray);
border-radius: 8px;
background: var(--rich-white);
color: var(--deep-black);
font-size: 0.95rem;
transition: all 0.3s ease;
cursor: pointer;
}
.filter-group select:focus {
border-color: var(--primary-gold);
outline: none;
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}
.filter-actions {
display: flex;
gap: var(--spacing-md);
justify-content: flex-end;
}
/* Enhanced Product Categories */
.product-categories {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
flex-wrap: wrap;
justify-content: center;
}
.category-btn {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--rich-white);
color: var(--sophisticated-gray);
border: 2px solid var(--light-gray);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.category-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
transition: left 0.5s ease;
}
.category-btn:hover::before {
left: 100%;
}
.category-btn:hover {
border-color: var(--primary-gold);
color: var(--primary-gold);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}
.category-btn.active {
background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
color: var(--deep-black);
border-color: var(--primary-gold);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
.category-btn i {
font-size: 1.1rem;
}
.count {
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 700;
}
.category-btn.active .count {
background: rgba(26, 26, 26, 0.2);
}
/* Products Loading State */
.products-loading {
text-align: center;
padding: var(--spacing-xxl);
color: var(--sophisticated-gray);
}
.products-loading .loading-spinner {
width: 60px;
height: 60px;
border: 4px solid var(--light-gray);
border-top: 4px solid var(--primary-gold);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto var(--spacing-lg);
}
.products-loading p {
font-size: 1.1rem;
font-weight: 500;
}
/* No Products State */
.no-products {
text-align: center;
padding: var(--spacing-xxl);
background: var(--pearl-white);
border-radius: 15px;
margin: var(--spacing-xl) 0;
}
.no-products-content i {
font-size: 4rem;
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
opacity: 0.5;
}
.no-products-content h3 {
font-family: var(--font-primary);
color: var(--deep-black);
margin-bottom: var(--spacing-sm);
}
.no-products-content p {
color: var(--sophisticated-gray);
margin-bottom: var(--spacing-lg);
}
/* Load More Section */
.load-more-section {
text-align: center;
margin-top: var(--spacing-xxl);
padding: var(--spacing-xl) 0;
}
.load-more-btn {
padding: var(--spacing-md) var(--spacing-xxl);
font-size: 1.1rem;
position: relative;
overflow: hidden;
}
.load-more-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
transition: left 0.6s ease;
}
.load-more-btn:hover::before {
left: 100%;
}
/* Enhanced Product Grid Animations */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.product-card {
opacity: 0;
transform: translateY(30px);
animation: productFadeIn 0.6s ease forwards;
}
@keyframes productFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }
/* Filter Responsive Design */
@media (max-width: 768px) {
.filter-toggle {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.filter-content {
max-height: 0;
overflow: hidden;
opacity: 0;
}
.filter-content.active {
max-height: 500px;
opacity: 1;
margin-top: var(--spacing-lg);
}
.filter-row {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.filter-actions {
justify-content: center;
flex-direction: column;
}
.product-categories {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: var(--spacing-sm);
scrollbar-width: none;
-ms-overflow-style: none;
}
.product-categories::-webkit-scrollbar {
display: none;
}
.category-btn {
flex-shrink: 0;
padding: var(--spacing-sm) var(--spacing-md);
}
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-lg);
}
}
@media (max-width: 480px) {
.product-filters {
padding: var(--spacing-lg);
}
.filter-header {
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}
.product-grid {
grid-template-columns: 1fr;
}
.category-btn {
font-size: 0.9rem;
}
}