/* ===================================
MAISON NOIR - Combined Styles
All CSS in one file
=================================== */
/* CSS Variables */
:root {
--color-cream: #FFFFFF;
--color-charcoal: #000000;
--color-gold: #8B5CF6;
--color-border: #E5E7EB;
--color-overlay: rgba(0, 0, 0, 0.95);
--font-display: 'Cormorant Garamond', serif;
--font-body: 'Tenor Sans', sans-serif;
--color-purple-light: #C4B5FD;
--color-purple-dark: #6D28D9;
}
/* ===================================
BASE STYLES
=================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #ffffff;
}
body {
font-family: var(--font-body);
background: #ffffff;
color: var(--color-charcoal);
line-height: 1.6;
overflow-x: hidden;
}
/* ===================================
HEADER
=================================== */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--color-cream);
border-bottom: 1px solid var(--color-border);
z-index: 1000;
transition: all 0.3s ease;
}
.header-content {
max-width: 1600px;
margin: 0 auto;
padding: 1.5rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 300;
letter-spacing: 0.3em;
text-decoration: none;
color: var(--color-charcoal);
}
nav {
display: flex;
gap: 3rem;
align-items: center;
}
nav a {
text-decoration: none;
color: var(--color-charcoal);
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
position: relative;
transition: color 0.3s ease;
}
nav a:hover,
nav a.active {
color: var(--color-gold);
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background: var(--color-gold);
transition: width 0.3s ease;
}
nav a:hover::after,
nav a.active::after {
width: 100%;
}
.header-icons {
display: flex;
gap: 1.5rem;
}
.icon-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--color-charcoal);
transition: color 0.3s ease;
position: relative;
}
.icon-btn:hover {
color: var(--color-gold);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--color-gold);
color: white;
font-size: 0.7rem;
font-family: var(--font-body);
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
/* ===================================
HERO
=================================== */
.hero {
margin-top: 100px;
height: 70vh;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.9)),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
animation: fadeIn 1s ease;
}
.hero-content h1 {
font-family: var(--font-display);
font-size: 5rem;
font-weight: 300;
letter-spacing: 0.2em;
margin-bottom: 1rem;
animation: slideUp 0.8s ease 0.2s both;
}
.hero-content p {
font-size: 1.1rem;
letter-spacing: 0.15em;
margin-bottom: 2rem;
opacity: 0.8;
animation: slideUp 0.8s ease 0.4s both;
}
/* ===================================
BUTTONS
=================================== */
.cta-btn {
display: inline-block;
padding: 1rem 3rem;
background: var(--color-charcoal);
color: var(--color-cream);
text-decoration: none;
letter-spacing: 0.15em;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
animation: slideUp 0.8s ease 0.6s both;
}
.cta-btn:hover {
background: var(--color-gold);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(184, 149, 106, 0.3);
}
/* ===================================
MAIN CONTENT
=================================== */
.main-content {
margin-top: 100px;
min-height: calc(100vh - 200px);
}
.container {
max-width: 1600px;
margin: 0 auto;
padding: 4rem 3rem;
}
.page-title {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 300;
letter-spacing: 0.15em;
text-align: center;
margin-bottom: 3rem;
animation: fadeIn 0.8s ease;
}
.page-subtitle {
text-align: center;
font-size: 1.1rem;
letter-spacing: 0.1em;
opacity: 0.7;
margin-bottom: 4rem;
animation: fadeIn 0.8s ease 0.2s both;
}
/* ── Account sub-pages (orders, addresses, preferences, etc.) ── */
.rh-page-content {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 3rem 5rem 4rem; /* left padding clears the fixed sidebar trigger */
}
@media (max-width: 1024px) {
.rh-page-content { padding: 2rem 2rem 4rem 3.5rem; }
}
/* ===================================
SHOP PAGE - FILTERS
=================================== */
.filters-section {
max-width: 1600px;
margin: 2rem auto;
padding: 0 3rem;
animation: fadeIn 1s ease 0.8s both;
}
.filters-toggle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.filters-toggle h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1em;
}
.filters-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
padding: 2rem 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
}
.filters-content.active {
max-height: 500px;
padding: 2rem 0;
}
.filter-group h4 {
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 1rem;
color: var(--color-gold);
}
.filter-option {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
cursor: pointer;
}
.filter-option input[type="checkbox"] {
width: 16px;
height: 16px;
border: 1px solid var(--color-border);
cursor: pointer;
}
.filter-option label {
font-size: 0.95rem;
cursor: pointer;
letter-spacing: 0.05em;
}
/* ===================================
SHOP PAGE - PRODUCTS
=================================== */
.products-section {
max-width: 1600px;
margin: 4rem auto;
padding: 0 3rem;
}
.products-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
}
.products-header h2 {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
}
.sort-select {
padding: 0.75rem 1.5rem;
border: 1px solid var(--color-border);
background: white;
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.05em;
cursor: pointer;
transition: border-color 0.3s ease;
}
.sort-select:focus {
outline: none;
border-color: var(--color-gold);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 3rem;
}
.product-card {
position: relative;
cursor: pointer;
animation: fadeIn 0.5s ease both;
}
.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; }
.product-image-container {
position: relative;
width: 100%;
padding-bottom: 133%;
background: white;
overflow: hidden;
border: 1px solid var(--color-border);
margin-bottom: 1.5rem;
}
.product-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-badge {
position: absolute;
top: 20px;
left: 20px;
background: var(--color-gold);
color: white;
padding: 0.5rem 1rem;
font-size: 0.75rem;
letter-spacing: 0.1em;
z-index: 1;
}
.quick-add {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(20px);
opacity: 0;
background: var(--color-charcoal);
color: white;
border: none;
padding: 0.75rem 2rem;
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
z-index: 2;
}
.product-card:hover .quick-add {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.quick-add:hover {
background: var(--color-gold);
}
.product-info {
text-align: center;
}
.product-category {
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 0.5rem;
}
.product-name {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 400;
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
.product-price {
font-size: 1.1rem;
letter-spacing: 0.05em;
}
/* ===================================
CART SIDEBAR
=================================== */
.cart-sidebar {
position: fixed;
top: 0;
right: -500px;
width: 500px;
height: 100vh;
background: white;
box-shadow: -5px 0 30px rgba(0,0,0,0.1);
z-index: 2000;
transition: right 0.4s ease;
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
right: 0;
}
.cart-header {
padding: 2rem;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h3 {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0.1em;
}
.close-cart {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-charcoal);
transition: color 0.3s ease;
}
.close-cart:hover {
color: var(--color-gold);
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 2rem;
}
.cart-item {
display: flex;
gap: 1.5rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--color-border);
animation: slideInRight 0.3s ease;
}
.cart-item-image {
width: 100px;
height: 133px;
object-fit: cover;
border: 1px solid var(--color-border);
}
.cart-item-details {
flex: 1;
}
.cart-item-name {
font-family: var(--font-display);
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.cart-item-size {
font-size: 0.85rem;
color: #666;
margin-bottom: 1rem;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.qty-btn {
width: 30px;
height: 30px;
border: 1px solid var(--color-border);
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
.qty-btn:hover {
border-color: var(--color-gold);
color: var(--color-gold);
}
.cart-item-price {
font-weight: 600;
}
.remove-item {
background: none;
border: none;
color: #999;
font-size: 0.85rem;
cursor: pointer;
text-decoration: underline;
margin-top: 0.5rem;
}
.remove-item:hover {
color: var(--color-charcoal);
}
.cart-footer {
padding: 2rem;
border-top: 1px solid var(--color-border);
}
.cart-subtotal {
display: flex;
justify-content: space-between;
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.cart-subtotal .amount {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
}
.checkout-btn {
width: 100%;
padding: 1.2rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 1rem;
letter-spacing: 0.15em;
cursor: pointer;
transition: all 0.3s ease;
}
.checkout-btn:hover {
background: var(--color-gold);
}
.cart-empty {
text-align: center;
padding: 4rem 2rem;
}
.cart-empty p {
font-size: 1.1rem;
color: #999;
margin-bottom: 2rem;
}
/* ===================================
ABOUT PAGE
=================================== */
.about-hero {
margin-top: 100px;
height: 60vh;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.95)),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.about-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
/* ── Founder Section ── */
.founder-section {
padding: 5rem 3rem;
max-width: 1300px;
margin: 0 auto;
}
.founder-container {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 5rem;
align-items: start;
}
.founder-image img {
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 4px;
}
.founder-story h2 {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
color: var(--color-charcoal);
}
.founder-story p {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.9;
color: #555;
margin-bottom: 1.2rem;
letter-spacing: 0.02em;
}
.founder-story .closing-statement {
font-style: italic;
color: #444;
}
.signature {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.signature-name {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--color-charcoal);
margin-bottom: 0.25rem !important;
}
.signature-title {
font-family: var(--font-body);
font-size: 0.8rem;
letter-spacing: 0.12em;
color: #9CA3AF;
text-transform: uppercase;
margin-bottom: 0 !important;
}
/* ── Who We Are ── */
.who-we-are-section {
background: #FAFAFA;
padding: 5rem 3rem;
}
.who-we-are-section .section-title {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 1rem;
}
.who-we-are-section .section-intro {
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.06em;
line-height: 1.9;
text-align: center;
max-width: 800px;
margin: 0 auto 3rem;
color: #666;
}
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.value-card {
background: white;
padding: 2rem;
border-radius: 8px;
text-align: center;
border: 1px solid var(--color-border);
}
.value-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.value-card h3 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
}
.value-card p {
font-family: var(--font-body);
font-size: 0.85rem;
line-height: 1.7;
color: #666;
}
/* ── Mission Section ── */
.mission-section {
padding: 5rem 3rem;
text-align: center;
}
.mission-content {
max-width: 800px;
margin: 0 auto;
}
.mission-content h2 {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 1.5rem;
}
.mission-content p {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.9;
color: #555;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}
/* ── CTA Section ── */
.cta-section {
background: var(--color-charcoal);
padding: 5rem 3rem;
text-align: center;
}
.cta-content h2 {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
color: white;
margin-bottom: 0.75rem;
}
.cta-content p {
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.6);
margin-bottom: 2rem;
}
.about-section {
margin-bottom: 6rem;
animation: fadeIn 0.8s ease;
}
.about-section:nth-child(even) {
animation-delay: 0.2s;
}
.about-section h2 {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 2rem;
}
.about-section p {
font-size: 1.1rem;
line-height: 1.9;
letter-spacing: 0.03em;
margin-bottom: 1.5rem;
opacity: 0.85;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.value-card {
text-align: center;
padding: 3rem 2rem;
border: 1px solid var(--color-border);
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.value-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.value-card h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.value-card p {
font-size: 0.95rem;
line-height: 1.7;
}
/* ===================================
CONTACT PAGE
=================================== */
.contact-container {
max-width: 1200px;
margin: 0 auto;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.contact-form {
animation: fadeIn 0.8s ease;
}
.form-group {
margin-bottom: 2rem;
}
.form-group label {
display: block;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.75rem;
color: var(--color-gold);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--color-border);
background: white;
font-family: var(--font-body);
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-gold);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.submit-btn {
width: 100%;
padding: 1.2rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 1rem;
letter-spacing: 0.15em;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: var(--color-gold);
}
.contact-info {
animation: fadeIn 0.8s ease 0.2s both;
}
.info-item {
margin-bottom: 3rem;
}
.info-item h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.info-item p {
font-size: 1rem;
line-height: 1.8;
opacity: 0.8;
}
/* ===================================
FOOTER
=================================== */
footer {
background: #000000;
color: #FFFFFF;
padding: 4rem 3rem 2rem;
}
.footer-content {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section h4 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 1.5rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.75rem;
}
.footer-section a {
color: var(--color-cream);
text-decoration: none;
font-size: 0.95rem;
letter-spacing: 0.05em;
transition: color 0.3s ease;
}
.footer-section a:hover {
color: var(--color-gold);
}
.newsletter-form {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.newsletter-input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-cream);
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.05em;
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.newsletter-btn {
padding: 0.75rem 2rem;
background: var(--color-gold);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-btn:hover {
background: #FFFFFF;
color: #000000;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 0.85rem;
letter-spacing: 0.05em;
opacity: 0.7;
}
/* ===================================
OVERLAY & MODALS
=================================== */
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1500;
display: none;
animation: fadeIn 0.3s ease;
}
/* Don't let overlay cover the account sidebar */
#account-sidebar ~ .overlay,
.overlay.active {
z-index: 1500;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: white;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
animation: slideUp 0.4s ease;
}
.modal-header {
padding: 2rem;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.1em;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.modal-content {
padding: 2rem;
}
/* ===================================
ANIMATIONS
=================================== */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ===================================
CHECKOUT PAGE
=================================== */
.checkout-steps {
background: white;
border-bottom: 1px solid var(--color-border);
padding: 2rem 0;
margin-top: 100px;
min-height: 120px;
display: flex;
align-items: center;
}
.steps-container {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0.4;
transition: all 0.3s ease;
}
.step.active {
opacity: 1;
}
.step.completed {
opacity: 0.7;
}
.step.completed .step-number {
background: var(--color-gold);
color: white;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-border);
color: var(--color-charcoal);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.step.active .step-number {
background: var(--color-charcoal);
color: white;
transform: scale(1.1);
}
.step-label {
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--font-body);
}
.step-divider {
width: 80px;
height: 2px;
background: var(--color-border);
margin: 0 1rem;
}
.checkout-container {
max-width: 1400px;
margin: 0 auto;
padding: 3rem 2rem;
display: grid;
grid-template-columns: 1fr 400px;
gap: 4rem;
align-items: start;
}
.checkout-main {
animation: fadeIn 0.8s ease;
width: 100%;
min-width: 0;
}
.checkout-section {
animation: slideUp 0.6s ease;
}
.checkout-section.hidden {
display: none;
}
.section-title {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 300;
letter-spacing: 0.15em;
margin-bottom: 2.5rem;
margin-top: 0.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.subsection-title {
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 1.5rem;
color: var(--color-gold);
}
.checkout-form {
max-width: 700px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.checkout-form .form-group {
margin-bottom: 1.5rem;
}
.checkout-form select {
width: 100%;
padding: 1rem;
border: 1px solid var(--color-border);
background: white;
font-family: var(--font-body);
font-size: 1rem;
cursor: pointer;
transition: border-color 0.3s ease;
}
.checkout-form select:focus {
outline: none;
border-color: var(--color-gold);
}
.shipping-methods {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.shipping-option {
border: 1px solid var(--color-border);
padding: 1.25rem;
margin-bottom: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.shipping-option:hover {
border-color: var(--color-gold);
background: rgba(184, 149, 106, 0.05);
}
.shipping-option input[type="radio"] {
margin-right: 1rem;
cursor: pointer;
}
.shipping-option label {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
width: 100%;
}
.shipping-name {
font-size: 0.95rem;
letter-spacing: 0.03em;
}
.shipping-price {
font-weight: 600;
color: var(--color-gold);
}
.payment-methods {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}
.payment-method {
border: 2px solid var(--color-border);
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.payment-method:hover {
border-color: var(--color-gold);
background: rgba(184, 149, 106, 0.05);
}
.payment-method.active {
border-color: var(--color-gold);
background: rgba(184, 149, 106, 0.1);
}
.payment-icon {
font-size: 2rem;
}
.payment-method span {
font-size: 0.85rem;
letter-spacing: 0.05em;
}
.payment-form {
display: none;
}
.payment-form.active {
display: block;
}
.card-icons {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.card-icon {
font-size: 1.5rem;
}
.form-group {
position: relative;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.checkbox-group label {
cursor: pointer;
font-size: 0.95rem;
letter-spacing: 0.03em;
}
.alt-payment-info {
padding: 3rem 2rem;
border: 1px solid var(--color-border);
text-align: center;
margin-bottom: 2rem;
}
.alt-payment-info p {
margin-bottom: 2rem;
font-size: 1rem;
line-height: 1.8;
}
.paypal-btn, .apple-pay-btn, .google-pay-btn {
padding: 1rem 3rem;
font-size: 1rem;
font-family: var(--font-body);
letter-spacing: 0.1em;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.paypal-btn { background: #0070ba; color: white; }
.paypal-btn:hover { background: #005ea6; }
.apple-pay-btn { background: #000; color: white; }
.apple-pay-btn:hover { background: #333; }
.google-pay-btn { background: #4285f4; color: white; }
.google-pay-btn:hover { background: #357ae8; }
.form-actions {
display: flex;
gap: 1.5rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.back-btn {
padding: 1rem 2rem;
background: transparent;
color: var(--color-charcoal);
border: 1px solid var(--color-border);
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.back-btn:hover {
border-color: var(--color-charcoal);
background: var(--color-charcoal);
color: white;
}
.checkout-btn {
flex: 1;
padding: 1rem 2rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.checkout-btn:hover {
background: var(--color-gold);
}
.checkout-btn:disabled {
background: var(--color-border);
cursor: not-allowed;
}
.review-container {
max-width: 700px;
}
.review-block {
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
margin-bottom: 2rem;
position: relative;
}
.review-content {
margin-bottom: 1.5rem;
line-height: 1.8;
font-size: 0.95rem;
}
.review-content p {
margin-bottom: 0.5rem;
}
.edit-btn {
background: none;
border: none;
color: var(--color-gold);
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.3s ease;
}
.edit-btn:hover {
color: var(--color-charcoal);
text-decoration: underline;
}
.review-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.review-item {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 1.5rem;
align-items: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-border);
}
.review-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.review-item img {
width: 80px;
height: 106px;
object-fit: cover;
border: 1px solid var(--color-border);
}
.review-item-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.review-item-name {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.review-item-meta {
font-size: 0.85rem;
opacity: 0.7;
letter-spacing: 0.03em;
}
.review-item-price {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
}
.order-summary {
position: sticky;
top: 120px;
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
animation: slideInRight 0.8s ease;
}
.summary-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.summary-items {
margin-bottom: 2rem;
max-height: 400px;
overflow-y: auto;
}
.summary-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 1rem;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-border);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-item img {
width: 60px;
height: 80px;
object-fit: cover;
border: 1px solid var(--color-border);
}
.summary-item-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.summary-item-name {
font-size: 0.9rem;
letter-spacing: 0.03em;
font-family: var(--font-display);
}
.summary-item-meta {
font-size: 0.75rem;
opacity: 0.6;
}
.summary-item-price {
font-weight: 600;
font-size: 0.95rem;
}
.summary-totals {
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.summary-total {
font-size: 1.2rem;
font-weight: 600;
padding-top: 1rem;
margin-top: 1rem;
border-top: 2px solid var(--color-charcoal);
}
.summary-divider {
height: 1px;
background: var(--color-border);
margin: 1.5rem 0;
}
.security-badges {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
}
.security-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 0.85rem;
letter-spacing: 0.03em;
}
.security-icon {
font-size: 1.2rem;
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
@media (max-width: 1024px) {
.checkout-container {
grid-template-columns: 1fr;
gap: 3rem;
padding: 2.5rem 2rem;
}
.order-summary {
position: static;
}
.payment-methods {
grid-template-columns: repeat(2, 1fr);
}
.checkout-form {
max-width: 100%;
}
}
@media (max-width: 768px) {
/* ── Header: fixed height, hamburger left, logo centred, icons right ── */
header {
border-bottom: 1px solid #ebebeb;
}
.header-content {
position: relative;
height: 60px;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo absolutely centred so hamburger & icons don't push it */
.logo {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 0.88rem !important;
letter-spacing: 0.2em !important;
white-space: nowrap;
pointer-events: auto;
z-index: 0;
}
/* Keep hamburger and icons above the logo */
.mobile-menu-btn {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 40px;
height: 40px;
}
.header-icons {
position: relative;
z-index: 1;
display: flex;
gap: 0;
flex-shrink: 0;
margin-left: auto;
}
/* Fixed-size icon buttons — prevents emoji from bleeding into logo */
.icon-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
font-size: 0.95rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
flex-shrink: 0;
}
/* Logo: centred with a safe zone on both sides */
.logo {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
white-space: nowrap;
z-index: 0;
max-width: calc(100% - 180px);
text-align: center;
overflow: hidden;
text-overflow: clip;
}
nav {
display: none !important;
}
.hero-content h1 {
font-size: 3rem;
}
.container {
padding: 2rem 1.5rem;
}
.page-title {
font-size: 2.5rem;
}
.filters-section,
.products-section {
padding: 0 1.5rem;
}
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
}
.cart-sidebar {
width: 100%;
right: -100%;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.checkout-steps {
margin-top: 80px;
padding: 1.5rem 0;
min-height: 100px;
}
.checkout-container {
padding: 2rem 1rem;
gap: 2rem;
}
.steps-container {
padding: 0 1rem;
}
.step-label {
font-size: 0.7rem;
}
.step-number {
width: 35px;
height: 35px;
font-size: 1rem;
}
.step-divider {
width: 30px;
margin: 0 0.5rem;
}
.section-title {
font-size: 1.5rem;
letter-spacing: 0.1em;
}
.form-row {
grid-template-columns: 1fr;
}
.payment-methods {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
}
.back-btn {
order: 2;
}
.checkout-form {
max-width: 100%;
}
}
/* ===================================
WISHLIST SIDEBAR
=================================== */
.wishlist-sidebar {
position: fixed;
top: 0;
right: -450px;
width: 450px;
height: 100vh;
background: white;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
z-index: 2000;
transition: right 0.4s ease;
display: flex;
flex-direction: column;
}
.wishlist-sidebar.active {
right: 0;
}
.wishlist-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid var(--color-border);
}
.wishlist-header h3 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1em;
}
.close-wishlist {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-charcoal);
transition: color 0.3s ease;
}
.close-wishlist:hover {
color: var(--color-gold);
}
.wishlist-items {
flex: 1;
overflow-y: auto;
padding: 2rem;
}
.wishlist-empty {
text-align: center;
padding: 4rem 2rem;
}
.wishlist-empty p {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.7;
}
.wishlist-item {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 1.5rem;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--color-border);
}
.wishlist-item:last-child {
border-bottom: none;
}
.wishlist-item-image {
width: 100px;
height: 133px;
object-fit: cover;
border: 1px solid var(--color-border);
}
.wishlist-item-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.wishlist-item-name {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.wishlist-item-price {
font-weight: 600;
margin-top: auto;
}
.wishlist-item-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-end;
}
.add-to-cart-btn {
padding: 0.5rem 1rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.add-to-cart-btn:hover {
background: var(--color-gold);
}
.remove-wishlist-btn {
background: none;
border: none;
color: var(--color-charcoal);
cursor: pointer;
font-size: 1.2rem;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.remove-wishlist-btn:hover {
opacity: 1;
color: var(--color-gold);
}
.wishlist-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--color-gold);
color: white;
font-size: 0.7rem;
font-family: var(--font-body);
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
/* ===================================
PRODUCT MODAL
=================================== */
.product-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
padding: 2rem;
}
.product-modal.active {
display: flex;
}
.product-modal-content {
background: white;
max-width: 1000px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: slideUp 0.4s ease;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
position: relative;
}
.product-modal-image {
position: relative;
padding-bottom: 133%;
background: var(--color-cream);
}
.product-modal-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.product-modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: white;
border: none;
font-size: 1.5rem;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1;
transition: all 0.3s ease;
}
.product-modal-close:hover {
background: var(--color-charcoal);
color: white;
}
.product-modal-info {
padding: 3rem;
display: flex;
flex-direction: column;
}
.product-modal-category {
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: 0.5rem;
}
.product-modal-name {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.product-modal-price {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 2rem;
}
.product-modal-description {
line-height: 1.8;
opacity: 0.8;
margin-bottom: 2rem;
}
.size-selector {
margin-bottom: 2rem;
}
.size-selector-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.size-guide-link {
color: var(--color-gold);
text-decoration: underline;
cursor: pointer;
font-size: 0.85rem;
}
.size-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 0.75rem;
}
.size-option {
padding: 0.75rem;
border: 1px solid var(--color-border);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
.size-option:hover:not(.unavailable) {
border-color: var(--color-charcoal);
}
.size-option.selected {
background: var(--color-charcoal);
color: white;
border-color: var(--color-charcoal);
}
.size-option.unavailable {
opacity: 0.3;
cursor: not-allowed;
position: relative;
}
.size-option.unavailable::after {
content: '';
position: absolute;
top: 50%;
left: 10%;
right: 10%;
height: 1px;
background: var(--color-charcoal);
transform: rotate(-15deg);
}
.product-modal-actions {
display: flex;
gap: 1rem;
margin-top: auto;
}
.add-to-bag-btn {
flex: 1;
padding: 1rem 2rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.add-to-bag-btn:hover:not(:disabled) {
background: var(--color-gold);
}
.add-to-bag-btn:disabled {
background: var(--color-border);
cursor: not-allowed;
}
.wishlist-toggle-btn {
padding: 1rem;
background: white;
color: var(--color-charcoal);
border: 1px solid var(--color-border);
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
min-width: 50px;
}
.wishlist-toggle-btn:hover {
border-color: var(--color-gold);
color: var(--color-gold);
}
.wishlist-toggle-btn.active {
background: var(--color-gold);
color: white;
border-color: var(--color-gold);
}
/* ===================================
ADDITIONAL MODAL RESPONSIVE
=================================== */
@media (max-width: 768px) {
.wishlist-sidebar {
width: 100%;
right: -100%;
}
.product-modal-content {
grid-template-columns: 1fr;
max-height: 95vh;
}
.product-modal-info {
padding: 2rem;
}
.product-modal-name {
font-size: 2rem;
}
.product-modal {
padding: 0.5rem;
}
.product-modal-close {
top: 1rem;
right: 1rem;
}
}
/* Search, Reviews, and Enhanced Features CSS - Add this to your styles.css */
/* SEARCH BAR */
.search-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
z-index: 2500;
transform: translateY(-100%);
transition: transform 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.search-bar.active {
transform: translateY(0);
}
.search-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 3rem;
display: flex;
gap: 1rem;
align-items: center;
}
.search-input {
flex: 1;
padding: 1rem 1.5rem;
border: 2px solid var(--color-border);
font-family: var(--font-body);
font-size: 1.1rem;
letter-spacing: 0.05em;
transition: border-color 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: var(--color-gold);
}
.search-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
color: var(--color-charcoal);
transition: color 0.3s ease;
}
.search-close:hover {
color: var(--color-gold);
}
.search-results {
max-width: 1200px;
margin: 0 auto;
padding: 0 3rem 2rem;
max-height: 400px;
overflow-y: auto;
}
.search-result-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1.5rem;
padding: 1rem;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
transition: background 0.3s ease;
}
.search-result-item:hover {
background: var(--color-cream);
}
.search-result-item img {
width: 80px;
height: 106px;
object-fit: cover;
border: 1px solid var(--color-border);
}
.search-result-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.25rem;
}
.search-result-name {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.search-result-category {
font-size: 0.85rem;
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.search-result-price {
font-weight: 600;
margin-top: 0.25rem;
}
.no-results {
text-align: center;
padding: 2rem;
opacity: 0.6;
}
/* PRICE SLIDER */
.price-slider-container {
padding: 0.5rem 0;
}
.price-values {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-weight: 600;
}
.price-slider {
position: relative;
height: 40px;
}
.price-slider input[type="range"] {
position: absolute;
width: 100%;
height: 5px;
background: transparent;
pointer-events: none;
-webkit-appearance: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 18px;
height: 18px;
background: var(--color-gold);
border-radius: 50%;
cursor: pointer;
}
.price-slider input[type="range"]::-moz-range-thumb {
pointer-events: all;
width: 18px;
height: 18px;
background: var(--color-gold);
border-radius: 50%;
cursor: pointer;
border: none;
}
.price-slider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 5px;
background: var(--color-border);
transform: translateY(-50%);
}
/* RATINGS */
.product-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0;
}
.stars {
color: var(--color-gold);
font-size: 1rem;
letter-spacing: 0.1em;
}
.review-count {
font-size: 0.85rem;
opacity: 0.6;
}
.product-rating-section {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1rem 0;
}
.product-rating-section .stars {
font-size: 1.2rem;
}
/* REVIEWS SECTION */
.reviews-section {
margin-top: 3rem;
padding-top: 3rem;
border-top: 2px solid var(--color-border);
}
.reviews-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.reviews-header h3 {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0.1em;
}
.write-review-btn {
padding: 0.75rem 1.5rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.write-review-btn:hover {
background: var(--color-gold);
}
.no-reviews {
text-align: center;
padding: 3rem 2rem;
opacity: 0.6;
font-size: 1.1rem;
}
.review-item {
padding: 2rem 0;
border-bottom: 1px solid var(--color-border);
}
.review-item:last-child {
border-bottom: none;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.review-rating {
font-size: 1.1rem;
color: var(--color-gold);
}
.review-meta {
text-align: right;
}
.review-author {
font-weight: 600;
display: block;
margin-bottom: 0.25rem;
}
.review-date {
font-size: 0.85rem;
opacity: 0.6;
display: block;
}
.verified-badge {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--color-gold);
font-weight: 600;
}
.review-title {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.review-text {
line-height: 1.8;
margin-bottom: 1rem;
}
.review-helpful {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
opacity: 0.7;
}
.helpful-btn {
background: none;
border: 1px solid var(--color-border);
padding: 0.25rem 0.75rem;
border-radius: 20px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s ease;
}
.helpful-btn:hover {
border-color: var(--color-gold);
color: var(--color-gold);
}
.helpful-btn.active {
background: var(--color-gold);
color: white;
border-color: var(--color-gold);
}
/* REVIEW FORM */
.review-form-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
z-index: 3500;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
animation: fadeIn 0.3s ease;
}
.review-form-container {
background: white;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 3rem;
animation: slideUp 0.4s ease;
}
.review-form-container h3 {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 2rem;
}
.star-rating-input {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 0.25rem;
}
.star-rating-input input {
display: none;
}
.star-rating-input label {
font-size: 2rem;
color: var(--color-border);
cursor: pointer;
transition: color 0.2s ease;
}
.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label {
color: var(--color-gold);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-gold);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.cancel-btn {
flex: 1;
padding: 1rem;
background: white;
color: var(--color-charcoal);
border: 1px solid var(--color-border);
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.cancel-btn:hover {
border-color: var(--color-charcoal);
background: var(--color-charcoal);
color: white;
}
.submit-btn {
flex: 1;
padding: 1rem;
background: var(--color-charcoal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: var(--color-gold);
}
/* ENHANCED MODAL */
.product-modal-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-height: 95vh;
}
.product-modal-left {
background: var(--color-cream);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.product-modal-right {
overflow-y: auto;
max-height: 95vh;
}
.no-products {
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
font-size: 1.2rem;
opacity: 0.6;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.product-modal-content {
grid-template-columns: 1fr;
}
.product-modal-right {
max-height: none;
}
}
@media (max-width: 768px) {
.search-container {
padding: 1.5rem;
}
.search-results {
padding: 0 1.5rem 1.5rem;
}
.review-form-container {
padding: 2rem 1.5rem;
}
.reviews-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.review-header {
flex-direction: column;
gap: 0.5rem;
}
.review-meta {
text-align: left;
}
}
/* ===================================
PURPLE THEME ENHANCEMENTS
=================================== */
/* Purple gradient backgrounds */
.product-badge {
background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
}
/* Purple hover effects */
.cta-btn {
background: #000000;
}
.cta-btn:hover {
background: #8B5CF6;
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}
/* Checkout button purple theme */
.checkout-btn {
background: #000000;
}
.checkout-btn:hover {
background: #8B5CF6;
}
/* Newsletter button */
.newsletter-btn {
background: #8B5CF6;
border: none;
}
/* Purple accents for buttons */
.add-to-bag-btn {
background: #000000;
}
.add-to-bag-btn:hover:not(:disabled) {
background: #8B5CF6;
}
.write-review-btn {
background: #000000;
}
.write-review-btn:hover {
background: #8B5CF6;
}
.submit-btn {
background: #000000;
}
.submit-btn:hover {
background: #8B5CF6;
}
/* Quick add button */
.quick-add {
background: #000000;
}
.quick-add:hover {
background: #8B5CF6;
}
/* Add to cart button from wishlist */
.add-to-cart-btn {
background: #000000;
}
.add-to-cart-btn:hover {
background: #8B5CF6;
}
/* Shipping options hover with purple */
.shipping-option:hover {
border-color: #8B5CF6;
background: rgba(139, 92, 246, 0.05);
}
/* Payment method selection */
.payment-method:hover {
border-color: #8B5CF6;
background: rgba(139, 92, 246, 0.05);
}
.payment-method.active {
border-color: #8B5CF6;
background: rgba(139, 92, 246, 0.1);
}
/* Review helpful button */
.helpful-btn.active {
background: #8B5CF6;
border-color: #8B5CF6;
}
/* Wishlist toggle active state */
.wishlist-toggle-btn.active {
background: #8B5CF6;
border-color: #8B5CF6;
}
/* Header styling - white background with purple accents */
header {
background: #FFFFFF;
border-bottom: 1px solid #E5E7EB;
}
/* Body background pure white */
body {
background: #FFFFFF;
}
/* Product image containers with light gray background */
.product-image-container {
background: #F9FAFB;
}
/* Modal backgrounds */
.product-modal-left {
background: #F9FAFB;
}
/* Cart sidebar on white */
.cart-sidebar {
background: #FFFFFF;
}
/* Wishlist sidebar on white */
.wishlist-sidebar {
background: #FFFFFF;
}
/* Order summary on white with border */
.order-summary {
background: #FFFFFF;
}
/* Form inputs with light borders */
.form-group input,
.form-group textarea,
.checkout-form select {
background: #FFFFFF;
border-color: #E5E7EB;
}
.form-group input:focus,
.form-group textarea:focus,
.checkout-form select:focus {
border-color: #8B5CF6;
}
/* Search input focus */
.search-input:focus {
border-color: #8B5CF6;
}
/* Purple star ratings */
.stars {
color: #8B5CF6;
}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
color: #8B5CF6;
}
/* Value cards with subtle purple hover */
.value-card:hover {
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
}
/* Purple text accents */
.product-category,
.filter-group h4,
.subsection-title,
.verified-badge {
color: #8B5CF6;
}
/* Navigation active state */
nav a:hover,
nav a.active {
color: #8B5CF6;
}
nav a::after {
background: #8B5CF6;
}
/* Icon button hover */
.icon-btn:hover {
color: #8B5CF6;
}
/* Cart and wishlist count badges */
.cart-count,
.wishlist-count {
background: #8B5CF6;
}
/* Size guide link */
.size-guide-link {
color: #8B5CF6;
}
/* Footer link hover */
.footer-section a:hover {
color: #8B5CF6;
}
/* Edit button */
.edit-btn {
color: #8B5CF6;
}
.edit-btn:hover {
color: #000000;
}
/* Close buttons hover */
.close-cart:hover,
.close-wishlist:hover,
.product-modal-close:hover {
color: #8B5CF6;
}
/* Shipping price in purple */
.shipping-price {
color: #8B5CF6;
}
/* Helpful button hover */
.helpful-btn:hover {
border-color: #8B5CF6;
color: #8B5CF6;
}
/* Wishlist toggle hover */
.wishlist-toggle-btn:hover {
border-color: #8B5CF6;
color: #8B5CF6;
}
/* Remove wishlist item hover */
.remove-wishlist-btn:hover {
color: #8B5CF6;
}
/* Step completed state in purple */
.step.completed .step-number {
background: #8B5CF6;
}
/* Step active state in black */
.step.active .step-number {
background: #000000;
}
/* Search result hover */
.search-result-item:hover {
background: #F9FAFB;
}
/* Review form container */
.review-form-container {
background: #FFFFFF;
}
/* Modal */
.modal {
background: #FFFFFF;
}
/* ===================================
USER AUTHENTICATION & ACCOUNTS
=================================== */
/* Auth Modal */
.auth-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
z-index: 3500;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
animation: fadeIn 0.3s ease;
}
.auth-modal.active {
display: flex;
}
.auth-modal-content {
background: white;
max-width: 500px;
width: 100%;
padding: 3rem;
position: relative;
animation: slideUp 0.4s ease;
border-radius: 4px;
}
.auth-modal-content h2 {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 2rem;
text-align: center;
}
.auth-tabs {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
border-bottom: 2px solid #E5E7EB;
}
.auth-tab {
flex: 1;
padding: 1rem;
background: none;
border: none;
font-family: var(--font-body);
font-size: 1rem;
letter-spacing: 0.05em;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.3s ease;
text-transform: uppercase;
}
.auth-tab.active {
border-bottom-color: #8B5CF6;
color: #8B5CF6;
}
.auth-tab:hover {
color: #8B5CF6;
}
#login-form-container,
#signup-form-container {
animation: fadeIn 0.3s ease;
}
.form-group small {
display: block;
margin-top: 0.5rem;
font-size: 0.85rem;
opacity: 0.6;
}
.btn-primary {
width: 100%;
padding: 1.2rem;
background: #000000;
color: white;
border: none;
font-family: var(--font-body);
font-size: 1rem;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
}
.btn-primary:hover {
background: #8B5CF6;
}
/* Notifications */
.notification {
position: fixed;
top: 100px;
right: 2rem;
background: white;
padding: 1rem 1.5rem;
border-left: 4px solid #8B5CF6;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
z-index: 4000;
transform: translateX(400px);
transition: transform 0.3s ease;
min-width: 300px;
font-family: var(--font-body);
letter-spacing: 0.03em;
}
.notification.show {
transform: translateX(0);
}
.notification-success {
border-left-color: #10B981;
}
.notification-error {
border-left-color: #EF4444;
}
.notification-warning {
border-left-color: #F59E0B;
}
.notification-info {
border-left-color: #3B82F6;
}
/* ===================================
ACCOUNT DASHBOARD
=================================== */
.account-container {
max-width: 1400px;
margin: 0 auto;
padding: 3rem 2rem;
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: start;
}
/* Account Sidebar */
.account-sidebar {
position: sticky;
top: 120px;
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
}
.account-welcome {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-border);
}
.account-welcome h2 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.account-welcome p {
font-size: 0.9rem;
opacity: 0.6;
}
.account-nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.account-nav-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
color: var(--color-charcoal);
text-decoration: none;
font-size: 0.95rem;
letter-spacing: 0.05em;
transition: all 0.3s ease;
border-radius: 4px;
}
.account-nav-link span {
font-size: 1.2rem;
}
.account-nav-link:hover {
background: #F9FAFB;
color: #8B5CF6;
}
.account-nav-link.active {
background: #8B5CF6;
color: white;
}
.account-nav-link.logout-link {
margin-top: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
color: #EF4444;
}
.account-nav-link.logout-link:hover {
background: #FEE2E2;
}
/* Account Main Content */
.account-main {
animation: fadeIn 0.6s ease;
}
.account-section {
display: none;
}
.account-section.active {
display: block;
animation: fadeIn 0.4s ease;
}
.account-section h1 {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.1em;
margin-bottom: 2rem;
}
.account-section h2 {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 0.1em;
margin: 3rem 0 1.5rem;
}
/* Dashboard Stats */
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.stat-card {
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
display: flex;
align-items: center;
gap: 1.5rem;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
}
.stat-icon {
font-size: 3rem;
}
.stat-content {
flex: 1;
}
.stat-value {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 600;
color: #8B5CF6;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.6;
}
/* Dashboard Section */
.dashboard-section {
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
margin-bottom: 2rem;
}
.dashboard-section h2 {
margin-top: 0;
margin-bottom: 1.5rem;
}
/* Account Forms */
.account-form {
max-width: 600px;
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
}
.account-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.account-form .form-group input[disabled] {
background: #F9FAFB;
cursor: not-allowed;
}
/* Password Section */
.password-section {
margin-top: 3rem;
padding-top: 3rem;
border-top: 2px solid var(--color-border);
}
/* Section Header */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
/* Addresses List */
#addresses-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.address-card {
background: white;
border: 1px solid var(--color-border);
padding: 1.5rem;
position: relative;
transition: all 0.3s ease;
}
.address-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.address-card.default {
border-color: #8B5CF6;
border-width: 2px;
}
.default-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #8B5CF6;
color: white;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 2px;
}
.address-content {
margin-bottom: 1rem;
line-height: 1.8;
}
.address-content strong {
display: block;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.address-actions {
display: flex;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.btn-small {
padding: 0.5rem 1rem;
font-size: 0.85rem;
background: none;
border: 1px solid var(--color-border);
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.btn-small:hover {
border-color: #8B5CF6;
color: #8B5CF6;
}
.btn-danger {
background: #EF4444;
color: white;
border: none;
padding: 1rem 2rem;
font-family: var(--font-body);
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
}
.btn-danger:hover {
background: #DC2626;
}
/* Preferences */
.preference-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: white;
border: 1px solid var(--color-border);
margin-bottom: 1rem;
}
.preference-content h3 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 0.5rem;
}
.preference-content p {
font-size: 0.9rem;
opacity: 0.7;
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #E5E7EB;
transition: 0.4s;
border-radius: 30px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: #8B5CF6;
}
input:checked + .toggle-slider:before {
transform: translateX(30px);
}
input:disabled + .toggle-slider {
opacity: 0.5;
cursor: not-allowed;
}
/* Danger Zone */
.danger-zone {
margin-top: 3rem;
padding: 2rem;
background: #FEE2E2;
border: 2px solid #EF4444;
border-radius: 4px;
}
.danger-zone h2 {
color: #DC2626;
margin-top: 0;
margin-bottom: 1rem;
}
.danger-zone p {
margin-bottom: 1.5rem;
color: #991B1B;
}
/* Orders List */
#orders-list,
#recent-orders {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.order-card {
background: white;
border: 1px solid var(--color-border);
padding: 2rem;
transition: all 0.3s ease;
}
.order-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.order-id {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
}
.order-date {
font-size: 0.9rem;
opacity: 0.6;
}
.order-status {
padding: 0.5rem 1rem;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 4px;
font-weight: 600;
}
.order-status.processing {
background: #FEF3C7;
color: #92400E;
}
.order-status.shipped {
background: #DBEAFE;
color: #1E40AF;
}
.order-status.delivered {
background: #D1FAE5;
color: #065F46;
}
.order-items {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.order-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 1rem;
align-items: center;
}
.order-item img {
width: 60px;
height: 80px;
object-fit: cover;
border: 1px solid var(--color-border);
}
.order-item-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.order-item-name {
font-family: var(--font-display);
font-size: 1rem;
}
.order-item-meta {
font-size: 0.85rem;
opacity: 0.6;
}
.order-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.order-total {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
}
.order-actions {
display: flex;
gap: 1rem;
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border: 1px solid var(--color-border);
}
.empty-state-icon {
font-size: 4rem;
opacity: 0.3;
margin-bottom: 1rem;
}
.empty-state p {
font-size: 1.1rem;
opacity: 0.6;
margin-bottom: 2rem;
}
/* ===================================
INVENTORY MANAGEMENT
=================================== */
/* Stock Messages */
.stock-message {
padding: 0.75rem 1rem;
margin: 1rem 0;
border-radius: 4px;
font-size: 0.9rem;
letter-spacing: 0.03em;
}
.stock-info {
background: #DBEAFE;
color: #1E40AF;
border-left: 4px solid #3B82F6;
}
.stock-warning {
background: #FEF3C7;
color: #92400E;
border-left: 4px solid #F59E0B;
}
.stock-error {
background: #FEE2E2;
color: #991B1B;
border-left: 4px solid #EF4444;
}
/* Size option states */
.size-option.low-stock {
border-color: #F59E0B;
position: relative;
}
.size-option.low-stock::before {
content: '!';
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 16px;
background: #F59E0B;
color: white;
font-size: 0.7rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
/* ===================================
RESPONSIVE - ACCOUNT PAGES
=================================== */
@media (max-width: 1024px) {
.account-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.account-sidebar {
position: static;
}
.dashboard-stats {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (max-width: 768px) {
.account-container {
padding: 2rem 1rem;
}
.account-form .form-row {
grid-template-columns: 1fr;
}
.dashboard-stats {
grid-template-columns: 1fr;
}
#addresses-list {
grid-template-columns: 1fr;
}
.order-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.order-footer {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.order-actions {
width: 100%;
flex-direction: column;
}
.order-actions button {
width: 100%;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.section-header .btn-primary {
width: 100%;
}
.notification {
right: 1rem;
left: 1rem;
min-width: auto;
}
.auth-modal-content {
padding: 2rem;
}
.preference-item {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
/* ===================================
UTILITY CLASSES
=================================== */
.text-center {
text-align: center;
}
.mt-2 {
margin-top: 2rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.hidden {
display: none !important;
}
.fade-in {
animation: fadeIn 0.5s ease;
}
/* ===================================
AUTHENTICATION PAGES - LOGIN & SIGNUP
=================================== */
/* Auth Header - Minimal header for login/signup pages */
.auth-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-bottom: 1px solid #E5E7EB;
z-index: 1000;
padding: 1.5rem 0;
}
.auth-header-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.auth-header .logo {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 0.3em;
text-decoration: none;
color: var(--color-charcoal);
transition: color 0.3s ease;
}
.auth-header .logo:hover {
color: #8B5CF6;
}
.back-to-home {
font-family: var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.05em;
text-decoration: none;
color: #6B7280;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.back-to-home:hover {
color: #8B5CF6;
transform: translateX(-3px);
}
/* Auth Page Container */
.auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
padding: 6rem 1rem 2rem; /* Top padding to account for fixed header */
}
.auth-page-container {
max-width: 1400px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
background: white;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* Left Side - Branding */
.auth-page-left {
background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
padding: 4rem 3rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.auth-page-left::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: float 20s linear infinite;
}
@keyframes float {
from {
transform: translateY(0) rotate(0deg);
}
to {
transform: translateY(-100px) rotate(360deg);
}
}
.auth-branding {
position: relative;
z-index: 1;
text-align: center;
color: white;
}
.auth-branding h1 {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 300;
letter-spacing: 0.3em;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.auth-branding .tagline {
font-size: 1.2rem;
letter-spacing: 0.2em;
opacity: 0.9;
margin-bottom: 3rem;
text-transform: uppercase;
}
/* Auth Features List */
.auth-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 3rem;
}
.auth-feature {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
backdrop-filter: blur(10px);
}
.auth-feature .feature-icon {
width: 40px;
height: 40px;
background: white;
color: #8B5CF6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 600;
flex-shrink: 0;
}
.auth-feature span {
font-size: 1rem;
letter-spacing: 0.05em;
}
/* Auth Benefits - For Signup */
.auth-benefits h3 {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.1em;
margin-bottom: 2rem;
}
.auth-benefits .auth-feature {
align-items: flex-start;
text-align: left;
}
.auth-benefits .auth-feature .feature-icon {
font-size: 1.5rem;
margin-top: 0.25rem;
}
.auth-benefits .auth-feature div {
flex: 1;
}
.auth-benefits .auth-feature strong {
display: block;
font-size: 1.1rem;
margin-bottom: 0.25rem;
letter-spacing: 0.05em;
}
.auth-benefits .auth-feature p {
font-size: 0.9rem;
opacity: 0.9;
margin: 0;
}
/* Right Side - Form */
.auth-page-right {
padding: 4rem 3rem;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
}
.auth-form-container {
width: 100%;
max-width: 450px;
}
.auth-form-header {
text-align: center;
margin-bottom: 3rem;
}
.auth-form-header h2 {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.15em;
margin-bottom: 0.75rem;
color: #000000;
}
.auth-form-header p {
font-size: 1rem;
letter-spacing: 0.05em;
opacity: 0.6;
}
/* Auth Form Styles */
.auth-form {
animation: slideUp 0.6s ease;
}
.auth-form .form-group {
margin-bottom: 1.5rem;
}
.auth-form .form-group label {
display: block;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.75rem;
color: #000000;
}
.auth-form .form-group input {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid #E5E7EB;
background: #FFFFFF;
font-family: var(--font-body);
font-size: 1rem;
letter-spacing: 0.03em;
transition: all 0.3s ease;
border-radius: 4px;
}
.auth-form .form-group input:focus {
outline: none;
border-color: #8B5CF6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.auth-form .form-group input::placeholder {
color: #9CA3AF;
}
.auth-form .form-group small {
display: block;
margin-top: 0.5rem;
font-size: 0.8rem;
color: #6B7280;
letter-spacing: 0.03em;
}
/* Form Options - Remember me & Forgot password */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #8B5CF6;
}
.checkbox-group label {
font-size: 0.9rem;
cursor: pointer;
letter-spacing: 0.03em;
color: #374151;
}
.forgot-password {
font-size: 0.9rem;
color: #8B5CF6;
text-decoration: none;
letter-spacing: 0.03em;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #6D28D9;
text-decoration: underline;
}
/* Primary Button - Large */
.btn-primary.btn-large {
width: 100%;
padding: 1.25rem;
background: #000000;
color: white;
border: none;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
margin-bottom: 1.5rem;
}
.btn-primary.btn-large:hover {
background: #8B5CF6;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}
/* Auth Divider */
.auth-divider {
position: relative;
text-align: center;
margin: 2rem 0;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #E5E7EB;
}
.auth-divider span {
position: relative;
background: white;
padding: 0 1rem;
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6B7280;
}
/* Social Login Buttons */
.social-login {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 2rem;
}
.btn-social {
padding: 1rem;
background: white;
border: 2px solid #E5E7EB;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
border-radius: 4px;
}
.btn-social:hover {
border-color: #8B5CF6;
background: rgba(139, 92, 246, 0.05);
transform: translateY(-2px);
}
.btn-social .social-icon {
font-size: 1.2rem;
}
.btn-google .social-icon {
font-weight: bold;
background: linear-gradient(to right, #4285F4, #DB4437, #F4B400, #0F9D58);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Auth Footer */
.auth-footer {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #E5E7EB;
}
.auth-footer p {
font-size: 0.95rem;
letter-spacing: 0.03em;
color: #6B7280;
}
.auth-footer a {
color: #8B5CF6;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.auth-footer a:hover {
color: #6D28D9;
text-decoration: underline;
}
/* Form Row - for multi-column inputs */
.auth-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Checkbox Group Variations */
.auth-form .checkbox-group {
margin-bottom: 1.5rem;
}
.auth-form .checkbox-group label a {
color: #8B5CF6;
text-decoration: none;
font-weight: 600;
}
.auth-form .checkbox-group label a:hover {
text-decoration: underline;
}
/* ===================================
AUTH PAGE RESPONSIVE
=================================== */
@media (max-width: 1024px) {
.auth-page-container {
grid-template-columns: 1fr;
}
.auth-page-left {
padding: 3rem 2rem;
min-height: 400px;
}
.auth-branding h1 {
font-size: 2.5rem;
}
.auth-benefits h3 {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
.auth-header-content {
padding: 0 1.5rem;
}
.auth-header .logo {
font-size: 1.2rem;
letter-spacing: 0.2em;
}
.back-to-home {
font-size: 0.85rem;
}
.auth-page {
padding: 0;
}
.auth-page-container {
min-height: 100vh;
box-shadow: none;
}
.auth-page-left {
padding: 2rem 1.5rem;
min-height: 300px;
}
.auth-branding h1 {
font-size: 2rem;
letter-spacing: 0.2em;
}
.auth-branding .tagline {
font-size: 0.9rem;
margin-bottom: 2rem;
}
.auth-features {
margin-top: 2rem;
gap: 1rem;
}
.auth-feature {
padding: 0.75rem;
}
.auth-page-right {
padding: 2rem 1.5rem;
}
.auth-form-header h2 {
font-size: 2rem;
}
.auth-form .form-row {
grid-template-columns: 1fr;
}
.social-login {
grid-template-columns: 1fr;
}
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
@media (max-width: 480px) {
.auth-branding h1 {
font-size: 1.75rem;
}
.auth-form-header h2 {
font-size: 1.75rem;
}
.auth-page-right {
padding: 1.5rem 1rem;
}
.auth-form-header {
margin-bottom: 2rem;
}
}
/* ===================================
HOMEPAGE COMPONENTS
Clean classes replacing inline styles
=================================== */
/* Collections grid */
.collections-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.collection-card {
position: relative;
cursor: pointer;
overflow: hidden;
border: 1px solid var(--color-border);
}
.collection-image {
padding-bottom: 120%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.collection-image--light { background: linear-gradient(135deg, #E8E4DC 0%, #D4CFC5 100%); }
.collection-image--warm { background: linear-gradient(135deg, #CCC5B9 0%, #B8956A 100%); }
.collection-image--dark { background: linear-gradient(135deg, #2C2C2C 0%, #4A4A4A 100%); }
.collection-overlay {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.collection-overlay--white { color: white; }
.collection-name {
font-family: var(--font-display);
font-size: 2rem;
letter-spacing: 0.15em;
margin-bottom: 1rem;
white-space: nowrap;
}
.collection-link {
display: inline-block;
padding: 0.75rem 2rem;
border: 2px solid var(--color-charcoal);
color: var(--color-charcoal);
text-decoration: none;
letter-spacing: 0.1em;
font-size: 0.85rem;
transition: all 0.3s ease;
white-space: nowrap;
}
.collection-link--white {
border-color: white;
color: white;
}
/* About preview */
.about-preview {
padding: 6rem 3rem;
text-align: center;
}
.about-preview__inner {
max-width: 700px;
margin: 0 auto;
}
.about-preview__heading {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.15em;
margin-bottom: 2rem;
}
.about-preview__body {
font-size: 1.1rem;
line-height: 1.9;
opacity: 0.85;
margin-bottom: 3rem;
}
/* Features */
.features-section {
background: #f9f9f9;
padding: 5rem 3rem;
}
.section-heading {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
letter-spacing: 0.15em;
text-align: center;
margin-bottom: 4rem;
}
.section-heading--white { color: white; }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem;
}
.feature-card {
text-align: center;
padding: 2rem;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.feature-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.feature-body {
opacity: 0.8;
line-height: 1.8;
}
/* Stats */
.stats-section { padding: 5rem 3rem; text-align: center; }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 3rem;
}
.stat-number {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 300;
color: var(--color-gold);
margin-bottom: 0.5rem;
}
.stat-label {
opacity: 0.8;
letter-spacing: 0.1em;
font-size: 0.85rem;
}
/* Testimonials */
.testimonials-section {
background: linear-gradient(135deg, #2C2C2C 0%, #4A4A4A 100%);
color: white;
padding: 5rem 3rem;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.1);
padding: 2.5rem;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.testimonial-stars {
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.testimonial-text {
font-style: italic;
line-height: 1.8;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.testimonial-author {
font-weight: 500;
letter-spacing: 0.1em;
font-size: 0.88rem;
}
/* Instagram */
.instagram-section { padding: 5rem 3rem; text-align: center; }
.instagram-sub {
opacity: 0.8;
margin-bottom: 3rem;
font-size: 1rem;
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.instagram-cell {
aspect-ratio: 1;
position: relative;
}
.instagram-cell::after {
content: '📸';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
opacity: 0.3;
}
.instagram-cell--1 { background: linear-gradient(135deg, #E8E4DC 0%, #D4CFC5 100%); }
.instagram-cell--2 { background: linear-gradient(135deg, #CCC5B9 0%, #B8956A 100%); }
.instagram-cell--3 { background: linear-gradient(135deg, #B8956A 0%, #A67C52 100%); }
.instagram-cell--4 { background: linear-gradient(135deg, #D4CFC5 0%, #CCC5B9 100%); }
/* CTA section */
.cta-section {
background: var(--color-gold);
color: white;
padding: 5rem 3rem;
text-align: center;
}
.cta-section__heading {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
}
.cta-section__sub {
font-size: 1.2rem;
margin-bottom: 3rem;
opacity: 0.95;
}
.cta-section__buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn--white {
background: white !important;
color: var(--color-gold) !important;
}
.cta-btn--outline {
background: transparent !important;
border: 2px solid white !important;
color: white !important;
}
/* Cart helpers */
.cart-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.cart-clear-btn {
background: none;
border: 1px solid #ddd;
border-radius: 4px;
padding: 4px 10px;
font-size: 0.75rem;
color: #888;
cursor: pointer;
min-height: 0;
}
.footer-about, .footer-newsletter-text {
opacity: 0.8;
line-height: 1.8;
}
.footer-newsletter-text { margin-bottom: 1rem; }
/* ══════════════════════════════════════════════════════
ACCOUNT SLIDE-IN SIDEBAR (account-sidebar.js)
══════════════════════════════════════════════════════ */
#account-sidebar {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: #fff;
z-index: 9999;
box-shadow: 4px 0 30px rgba(0,0,0,0.15);
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
overflow-y: auto;
}
#account-sidebar.active {
transform: translateX(0);
}
.account-sidebar-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem;
background: linear-gradient(135deg, #8B5CF6, #6D28D9);
color: #fff;
}
.account-sidebar-user h3 {
font-family: var(--font-display, 'Cormorant Garamond', serif);
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 0.05em;
margin: 0 0 0.25rem;
color: #fff;
}
.account-sidebar-user p {
font-size: 0.78rem;
color: rgba(255,255,255,0.75);
margin: 0;
letter-spacing: 0.03em;
}
.close-account-sidebar {
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s;
}
.close-account-sidebar:hover {
background: rgba(255,255,255,0.3);
}
.account-sidebar-nav {
display: flex;
flex-direction: column;
padding: 1rem 0;
flex: 1;
}
.account-sidebar-link {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.875rem 1.5rem;
color: #374151;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 0.2s, color 0.2s;
border-left: 3px solid transparent;
}
.account-sidebar-link:hover {
background: #F5F3FF;
color: #8B5CF6;
border-left-color: #8B5CF6;
}
.account-sidebar-link.active {
background: #F5F3FF;
color: #8B5CF6;
border-left-color: #8B5CF6;
font-weight: 600;
}
.account-sidebar-link.logout-link {
color: #EF4444;
}
.account-sidebar-link.logout-link:hover {
background: #FEF2F2;
color: #DC2626;
border-left-color: #EF4444;
}
.sidebar-icon {
font-size: 1.1rem;
width: 22px;
text-align: center;
flex-shrink: 0;
}
.sidebar-divider {
height: 1px;
background: #E5E7EB;
margin: 0.5rem 1.5rem;
}