/* ============================================================ LUXELLE — Global Stylesheet Luxury Lingerie & Intimate Wear Mobile-First Responsive Design ============================================================ */ /* ── CSS Custom Properties ─────────────────────────────────── */ :root { --color-blush: #F5E6E8; --color-rose: #C9A0A8; --color-mauve: #9B6B7A; --color-burgundy: #6B2D3E; --color-champagne: #F5E6C8; --color-gold: #C9A84C; --color-ivory: #FDFAF5; --color-charcoal: #2C2C2C; --color-slate: #6E6E6E; --color-silver: #D4D4D4; --color-white: #FFFFFF; --color-black: #0A0A0A; --color-success: #4A7C59; --color-warning: #B8860B; --color-error: #9B2335; --font-heading: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Jost', 'Helvetica Neue', sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base:1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem; --fs-6xl: 3.75rem; --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-12: 3rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.15); --transition: 0.3s ease; --transition-fast: 0.15s ease; --transition-slow: 0.5s ease; --max-width: 1280px; --nav-height: 72px; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-charcoal); background: var(--color-ivory); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; border: none; background: none; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: var(--fw-light); line-height: 1.2; } /* ── Google Fonts Import ───────────────────────────────────── Add to : ──────────────────────────────────────────────────────────── */ /* ── Layout ─────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-4); } @media (min-width: 768px) { .container { padding: 0 var(--spacing-6); } } @media (min-width: 1024px) { .container { padding: 0 var(--spacing-8); } } .section { padding: var(--spacing-16) 0; } .section--lg { padding: var(--spacing-24) 0; } /* ── Typography ─────────────────────────────────────────────── */ .heading-xl { font-size: var(--fs-4xl); } .heading-lg { font-size: var(--fs-3xl); } .heading-md { font-size: var(--fs-2xl); } .heading-sm { font-size: var(--fs-xl); } @media (min-width: 768px) { .heading-xl { font-size: var(--fs-5xl); } .heading-lg { font-size: var(--fs-4xl); } } @media (min-width: 1024px) { .heading-xl { font-size: var(--fs-6xl); } } .text-center { text-align: center; } .text-mauve { color: var(--color-mauve); } .text-gold { color: var(--color-gold); } .text-slate { color: var(--color-slate); } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .font-light { font-weight: var(--fw-light); } .font-medium { font-weight: var(--fw-medium); } .letter-wide { letter-spacing: 0.15em; } .uppercase { text-transform: uppercase; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: 0.75rem 2rem; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; cursor: pointer; } .btn-primary { background: var(--color-burgundy); color: var(--color-white); border: 1px solid var(--color-burgundy); } .btn-primary:hover { background: var(--color-mauve); border-color: var(--color-mauve); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--color-charcoal); border: 1px solid var(--color-charcoal); } .btn-outline:hover { background: var(--color-charcoal); color: var(--color-white); } .btn-ghost { background: transparent; color: var(--color-charcoal); border: none; padding: 0.5rem 1rem; } .btn-ghost:hover { color: var(--color-burgundy); } .btn-gold { background: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); } .btn-gold:hover { background: #b8960a; } .btn-sm { padding: 0.5rem 1.25rem; font-size: var(--fs-xs); } .btn-lg { padding: 1rem 2.5rem; font-size: var(--fs-base); } .btn-full { width: 100%; } .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* ── Navbar ─────────────────────────────────────────────────── */ .navbar { position: sticky; top: 0; z-index: 1000; background: rgba(253, 250, 245, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-silver); height: var(--nav-height); } .navbar__inner { display: flex; align-items: center; height: 100%; gap: var(--spacing-8); } .navbar__logo { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-light); letter-spacing: 0.2em; color: var(--color-burgundy); flex-shrink: 0; } .navbar__logo span { color: var(--color-gold); } .navbar__nav { display: none; flex: 1; } @media (min-width: 1024px) { .navbar__nav { display: flex; align-items: center; gap: var(--spacing-8); } } .navbar__link { font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--fw-medium); color: var(--color-charcoal); position: relative; padding-bottom: 2px; transition: color var(--transition-fast); } .navbar__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--color-burgundy); transition: width var(--transition); } .navbar__link:hover { color: var(--color-burgundy); } .navbar__link:hover::after { width: 100%; } .navbar__actions { display: flex; align-items: center; gap: var(--spacing-4); margin-left: auto; } .navbar__icon-btn { position: relative; padding: var(--spacing-2); color: var(--color-charcoal); transition: color var(--transition-fast); display: flex; align-items: center; justify-content: center; } .navbar__icon-btn:hover { color: var(--color-burgundy); } .navbar__icon-btn svg { width: 22px; height: 22px; } .cart-badge { position: absolute; top: -4px; right: -4px; background: var(--color-burgundy); color: var(--color-white); font-size: 10px; font-weight: var(--fw-bold); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .navbar__hamburger { display: flex; flex-direction: column; gap: 5px; padding: var(--spacing-2); } @media (min-width: 1024px) { .navbar__hamburger { display: none; } } .navbar__hamburger span { display: block; width: 22px; height: 1.5px; background: var(--color-charcoal); transition: all var(--transition); } /* Mobile Menu */ .mobile-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: var(--color-ivory); z-index: 999; padding: var(--spacing-8); overflow-y: auto; transform: translateX(-100%); transition: transform var(--transition); } .mobile-menu.open { transform: translateX(0); } .mobile-menu__link { display: block; font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-light); padding: var(--spacing-4) 0; border-bottom: 1px solid var(--color-silver); color: var(--color-charcoal); transition: color var(--transition-fast); } .mobile-menu__link:hover { color: var(--color-burgundy); } /* ── Announcement Bar ────────────────────────────────────────── */ .announcement-bar { background: var(--color-burgundy); color: var(--color-white); text-align: center; padding: var(--spacing-2) var(--spacing-4); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--fw-medium); } /* ── Hero Section ────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; background: linear-gradient(135deg, var(--color-blush) 0%, var(--color-champagne) 50%, var(--color-ivory) 100%); } .hero__bg { position: absolute; inset: 0; z-index: 0; background: url('../images/hero-bg.jpg') center/cover no-repeat; opacity: 0.25; } .hero__content { position: relative; z-index: 1; max-width: 640px; } .hero__eyebrow { font-size: var(--fs-xs); letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-mauve); font-weight: var(--fw-medium); margin-bottom: var(--spacing-4); } .hero__title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: var(--fw-light); color: var(--color-charcoal); line-height: 1.1; margin-bottom: var(--spacing-6); } .hero__title em { font-style: italic; color: var(--color-burgundy); } .hero__subtitle { font-size: var(--fs-lg); color: var(--color-slate); margin-bottom: var(--spacing-8); font-weight: var(--fw-light); max-width: 480px; } .hero__actions { display: flex; gap: var(--spacing-4); flex-wrap: wrap; } .hero__badge { position: absolute; bottom: var(--spacing-8); right: var(--spacing-8); background: var(--color-white); border-radius: 50%; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-burgundy); box-shadow: var(--shadow-lg); animation: rotate 20s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Categories Grid ─────────────────────────────────────────── */ .categories-grid { display: grid; gap: var(--spacing-4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .categories-grid { grid-template-columns: repeat(5, 1fr); } } .category-card { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 3/4; cursor: pointer; } .category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .category-card:hover img { transform: scale(1.08); } .category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); display: flex; align-items: flex-end; padding: var(--spacing-4); } .category-card__name { color: var(--color-white); font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-light); letter-spacing: 0.05em; } /* ── Products Grid ───────────────────────────────────────────── */ .products-grid { display: grid; gap: var(--spacing-4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); } } @media (min-width: 768px) { .products-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .products-grid { grid-template-columns: repeat(4, 1fr); } } /* ── Product Card ────────────────────────────────────────────── */ .product-card { background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; position: relative; transition: box-shadow var(--transition), transform var(--transition); border: 1px solid var(--color-silver); } .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .product-card__image-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--color-blush); } .product-card__img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transition); } .product-card__img--hover { position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition); } .product-card:hover .product-card__img--hover { opacity: 1; } .product-card:hover .product-card__img--primary { opacity: 0; } .product-card__badges { position: absolute; top: var(--spacing-3); left: var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-1); } .badge { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); } .badge--new { background: var(--color-charcoal); color: var(--color-white); } .badge--sale { background: var(--color-burgundy); color: var(--color-white); } .badge--low { background: var(--color-warning); color: var(--color-white); } .product-card__actions { position: absolute; bottom: var(--spacing-3); right: var(--spacing-3); display: flex; flex-direction: column; gap: var(--spacing-2); opacity: 0; transform: translateX(10px); transition: all var(--transition); } .product-card:hover .product-card__actions { opacity: 1; transform: translateX(0); } .product-card__action-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-silver); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); box-shadow: var(--shadow-sm); } .product-card__action-btn:hover { background: var(--color-burgundy); border-color: var(--color-burgundy); color: var(--color-white); } .product-card__action-btn svg { width: 16px; height: 16px; } .product-card__body { padding: var(--spacing-4); } .product-card__category { font-size: var(--fs-xs); color: var(--color-slate); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-1); } .product-card__name { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-light); margin-bottom: var(--spacing-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__stars { display: flex; align-items: center; gap: var(--spacing-1); margin-bottom: var(--spacing-2); } .star { color: var(--color-gold); font-size: var(--fs-sm); } .product-card__price { display: flex; align-items: center; gap: var(--spacing-3); } .price-current { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--color-charcoal); } .price-original { font-size: var(--fs-sm); color: var(--color-slate); text-decoration: line-through; } .price-discount { font-size: var(--fs-xs); color: var(--color-burgundy); font-weight: var(--fw-bold); } /* ── Product Detail ──────────────────────────────────────────── */ .product-detail { padding: var(--spacing-12) 0; } .product-detail__grid { display: grid; gap: var(--spacing-8); grid-template-columns: 1fr; } @media (min-width: 768px) { .product-detail__grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-12); align-items: start; } } @media (min-width: 1024px) { .product-detail__grid { grid-template-columns: 55% 1fr; } } /* Gallery */ .product-gallery { position: sticky; top: calc(var(--nav-height) + var(--spacing-4)); } .product-gallery__main { aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden; background: var(--color-blush); margin-bottom: var(--spacing-3); cursor: zoom-in; } .product-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .product-gallery__main:hover img { transform: scale(1.05); } .product-gallery__thumbs { display: flex; gap: var(--spacing-2); overflow-x: auto; } .product-gallery__thumb { flex-shrink: 0; width: 72px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition-fast); } .product-gallery__thumb.active { border-color: var(--color-burgundy); } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } /* Product Info */ .product-info { } .product-info__breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--fs-sm); color: var(--color-slate); margin-bottom: var(--spacing-4); } .product-info__breadcrumb a:hover { color: var(--color-burgundy); } .product-info__title { font-size: var(--fs-3xl); margin-bottom: var(--spacing-4); font-weight: var(--fw-light); } .product-info__rating { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-4); } .product-info__price { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-6); } .product-info__price-current { font-size: var(--fs-3xl); font-weight: var(--fw-semi); } .product-info__price-original { font-size: var(--fs-xl); color: var(--color-slate); text-decoration: line-through; } .product-info__price-badge { background: var(--color-burgundy); color: var(--color-white); font-size: var(--fs-sm); padding: 2px 8px; border-radius: var(--radius-full); font-weight: var(--fw-bold); } .product-info__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-2); } /* Size Selector */ .size-selector { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-6); } .size-btn { min-width: 48px; height: 48px; padding: 0 var(--spacing-3); border: 1px solid var(--color-silver); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: all var(--transition-fast); cursor: pointer; background: var(--color-white); } .size-btn:hover { border-color: var(--color-charcoal); } .size-btn.active { background: var(--color-charcoal); color: var(--color-white); border-color: var(--color-charcoal); } .size-btn.out-of-stock { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } /* Color Selector */ .color-selector { display: flex; gap: var(--spacing-3); margin-bottom: var(--spacing-6); } .color-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-sm); } .color-btn.active { border-color: var(--color-charcoal); transform: scale(1.15); } /* Quantity */ .qty-selector { display: flex; align-items: center; gap: 0; margin-bottom: var(--spacing-6); border: 1px solid var(--color-silver); border-radius: var(--radius-sm); width: fit-content; } .qty-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); transition: background var(--transition-fast); } .qty-btn:hover { background: var(--color-blush); } .qty-input { width: 56px; height: 44px; text-align: center; border: none; border-left: 1px solid var(--color-silver); border-right: 1px solid var(--color-silver); font-size: var(--fs-base); font-weight: var(--fw-medium); } .product-info__cta { display: flex; gap: var(--spacing-3); margin-bottom: var(--spacing-6); } .product-info__wishlist { width: 52px; height: 52px; border: 1px solid var(--color-silver); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); flex-shrink: 0; } .product-info__wishlist:hover { background: var(--color-blush); border-color: var(--color-rose); } .product-info__wishlist svg { width: 20px; height: 20px; } .product-info__trust { display: flex; gap: var(--spacing-6); padding: var(--spacing-4) 0; border-top: 1px solid var(--color-silver); border-bottom: 1px solid var(--color-silver); margin-bottom: var(--spacing-6); } .trust-item { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--fs-sm); } .trust-item svg { width: 18px; height: 18px; color: var(--color-mauve); flex-shrink: 0; } /* Accordion */ .accordion { border-top: 1px solid var(--color-silver); } .accordion__item { border-bottom: 1px solid var(--color-silver); } .accordion__header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-4) 0; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.08em; } .accordion__icon { width: 18px; height: 18px; transition: transform var(--transition-fast); flex-shrink: 0; } .accordion__item.open .accordion__icon { transform: rotate(45deg); } .accordion__body { display: none; padding-bottom: var(--spacing-4); font-size: var(--fs-sm); color: var(--color-slate); line-height: 1.7; } .accordion__item.open .accordion__body { display: block; } /* ── Cart Drawer ─────────────────────────────────────────────── */ .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100; opacity: 0; visibility: hidden; transition: all var(--transition); } .cart-overlay.open { opacity: 1; visibility: visible; } .cart-drawer { position: fixed; top: 0; right: -420px; bottom: 0; width: min(420px, 100vw); background: var(--color-ivory); z-index: 1101; overflow-y: auto; transition: right var(--transition); display: flex; flex-direction: column; } .cart-drawer.open { right: 0; } .cart-drawer__header { padding: var(--spacing-6); border-bottom: 1px solid var(--color-silver); display: flex; justify-content: space-between; align-items: center; } .cart-drawer__title { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-light); } .cart-drawer__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--transition-fast); } .cart-drawer__close:hover { background: var(--color-blush); } .cart-drawer__items { flex: 1; overflow-y: auto; padding: var(--spacing-6); } .cart-drawer__empty { text-align: center; padding: var(--spacing-12) 0; } .cart-drawer__empty svg { width: 64px; height: 64px; color: var(--color-silver); margin: 0 auto var(--spacing-4); } .cart-drawer__footer { padding: var(--spacing-6); border-top: 1px solid var(--color-silver); } .cart-item { display: flex; gap: var(--spacing-4); padding: var(--spacing-4) 0; border-bottom: 1px solid var(--color-silver); } .cart-item:last-child { border-bottom: none; } .cart-item__img { width: 80px; height: 107px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-blush); } .cart-item__img img { width: 100%; height: 100%; object-fit: cover; } .cart-item__body { flex: 1; min-width: 0; } .cart-item__name { font-family: var(--font-heading); font-size: var(--fs-lg); margin-bottom: var(--spacing-1); } .cart-item__meta { font-size: var(--fs-xs); color: var(--color-slate); margin-bottom: var(--spacing-2); } .cart-item__controls { display: flex; justify-content: space-between; align-items: center; } .cart-item__price { font-weight: var(--fw-semi); } .cart-item__remove { font-size: var(--fs-xs); color: var(--color-slate); text-decoration: underline; transition: color var(--transition-fast); } .cart-item__remove:hover { color: var(--color-error); } .cart-summary__row { display: flex; justify-content: space-between; margin-bottom: var(--spacing-3); font-size: var(--fs-sm); } .cart-summary__total { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-semi); padding-top: var(--spacing-3); border-top: 1px solid var(--color-silver); } .free-shipping-bar { background: var(--color-blush); border-radius: var(--radius-sm); padding: var(--spacing-3); margin-bottom: var(--spacing-4); font-size: var(--fs-sm); } .free-shipping-bar__progress { height: 4px; background: var(--color-silver); border-radius: var(--radius-full); margin-top: var(--spacing-2); } .free-shipping-bar__fill { height: 100%; background: var(--color-mauve); border-radius: var(--radius-full); transition: width var(--transition); } /* ── Forms ───────────────────────────────────────────────────── */ .form-group { margin-bottom: var(--spacing-4); } .form-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--spacing-2); color: var(--color-charcoal); } .form-label .required { color: var(--color-burgundy); } .form-input, .form-select, .form-textarea { display: block; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-silver); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-charcoal); font-size: var(--fs-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-mauve); box-shadow: 0 0 0 3px rgba(155, 107, 122, 0.15); } .form-input::placeholder { color: var(--color-slate); } .form-input.error { border-color: var(--color-error); } .form-error { font-size: var(--fs-xs); color: var(--color-error); margin-top: var(--spacing-1); } .form-grid { display: grid; gap: var(--spacing-4); } @media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } } /* ── Auth Pages ──────────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: grid; place-items: center; padding: var(--spacing-8) var(--spacing-4); background: linear-gradient(135deg, var(--color-blush) 0%, var(--color-champagne) 100%); } .auth-card { width: 100%; max-width: 460px; background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-8); box-shadow: var(--shadow-xl); } .auth-card__logo { text-align: center; margin-bottom: var(--spacing-6); } .auth-card__title { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: var(--fw-light); text-align: center; margin-bottom: var(--spacing-2); } .auth-card__subtitle { text-align: center; color: var(--color-slate); font-size: var(--fs-sm); margin-bottom: var(--spacing-8); } .auth-divider { display: flex; align-items: center; gap: var(--spacing-4); margin: var(--spacing-6) 0; } .auth-divider__line { flex: 1; height: 1px; background: var(--color-silver); } .auth-divider__text { font-size: var(--fs-xs); color: var(--color-slate); text-transform: uppercase; letter-spacing: 0.1em; } /* ── Checkout ────────────────────────────────────────────────── */ .checkout-grid { display: grid; gap: var(--spacing-8); } @media (min-width: 1024px) { .checkout-grid { grid-template-columns: 1fr 420px; } } .checkout-section { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-6); border: 1px solid var(--color-silver); margin-bottom: var(--spacing-4); } .checkout-section__title { font-family: var(--font-heading); font-size: var(--fs-xl); margin-bottom: var(--spacing-6); font-weight: var(--fw-light); } .order-summary { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-6); border: 1px solid var(--color-silver); position: sticky; top: calc(var(--nav-height) + var(--spacing-4)); } /* Payment Method */ .payment-options { display: flex; flex-direction: column; gap: var(--spacing-3); } .payment-option { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-4); border: 1px solid var(--color-silver); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .payment-option:has(input:checked), .payment-option.selected { border-color: var(--color-burgundy); background: var(--color-blush); } .payment-option input[type="radio"] { accent-color: var(--color-burgundy); width: 16px; height: 16px; } .payment-option__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); } /* ── Shop Filters ────────────────────────────────────────────── */ .shop-layout { display: grid; gap: var(--spacing-8); } @media (min-width: 1024px) { .shop-layout { grid-template-columns: 260px 1fr; } } .filters-panel { } .filter-group { margin-bottom: var(--spacing-6); } .filter-group__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-3); } .filter-checkbox { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); cursor: pointer; font-size: var(--fs-sm); } .filter-checkbox input { accent-color: var(--color-burgundy); } .price-range { display: flex; align-items: center; gap: var(--spacing-3); } .price-input { flex: 1; } .shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-6); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--color-silver); flex-wrap: wrap; gap: var(--spacing-3); } .shop-toolbar__count { font-size: var(--fs-sm); color: var(--color-slate); } .sort-select { padding: var(--spacing-2) var(--spacing-4); border: 1px solid var(--color-silver); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--color-white); } /* ── Pagination ──────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-12); } .page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--color-silver); font-size: var(--fs-sm); transition: all var(--transition-fast); } .page-btn.active { background: var(--color-burgundy); color: var(--color-white); border-color: var(--color-burgundy); } .page-btn:hover:not(.active) { border-color: var(--color-charcoal); } /* ── Reviews ─────────────────────────────────────────────────── */ .review-card { padding: var(--spacing-6) 0; border-bottom: 1px solid var(--color-silver); } .review-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-3); } .review-card__author { font-weight: var(--fw-medium); } .review-card__date { font-size: var(--fs-xs); color: var(--color-slate); } .review-card__body { font-size: var(--fs-sm); color: var(--color-slate); line-height: 1.7; } /* ── FAQ Section ─────────────────────────────────────────────── */ .faq-section { background: var(--color-blush); } .faq-grid { display: grid; gap: var(--spacing-4); } @media (min-width: 768px) { .faq-grid { grid-template-columns: 1fr 1fr; } } /* ── Footer ──────────────────────────────────────────────────── */ .footer { background: var(--color-charcoal); color: var(--color-silver); padding: var(--spacing-16) 0 var(--spacing-8); } .footer__grid { display: grid; gap: var(--spacing-8); margin-bottom: var(--spacing-12); } @media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer__logo { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--color-white); font-weight: var(--fw-light); letter-spacing: 0.2em; margin-bottom: var(--spacing-4); } .footer__tagline { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--spacing-6); } .footer__social { display: flex; gap: var(--spacing-4); } .footer__social-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .footer__social-link:hover { background: var(--color-burgundy); border-color: var(--color-burgundy); } .footer__social-link svg { width: 16px; height: 16px; } .footer__heading { color: var(--color-white); font-size: var(--fs-sm); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--spacing-4); } .footer__links { display: flex; flex-direction: column; gap: var(--spacing-2); } .footer__link { font-size: var(--fs-sm); transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-white); } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--spacing-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-4); font-size: var(--fs-xs); } /* ── Toast Notifications ─────────────────────────────────────── */ .toast-container { position: fixed; bottom: var(--spacing-6); right: var(--spacing-6); z-index: 9999; display: flex; flex-direction: column; gap: var(--spacing-3); max-width: 360px; } .toast { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-4) var(--spacing-6); box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--fs-sm); border-left: 4px solid var(--color-success); animation: slideIn var(--transition) ease; } .toast.error { border-left-color: var(--color-error); } .toast.warning { border-left-color: var(--color-warning); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── Section Header ──────────────────────────────────────────── */ .section-header { text-align: center; max-width: 600px; margin: 0 auto var(--spacing-12); } .section-header__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.25em; color: var(--color-mauve); font-weight: var(--fw-medium); margin-bottom: var(--spacing-3); } .section-header__title { font-size: var(--fs-4xl); font-weight: var(--fw-light); color: var(--color-charcoal); margin-bottom: var(--spacing-4); } .section-header__subtitle { font-size: var(--fs-base); color: var(--color-slate); font-weight: var(--fw-light); } /* ── Breadcrumb ──────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--fs-sm); color: var(--color-slate); padding: var(--spacing-4) 0; flex-wrap: wrap; } .breadcrumb a:hover { color: var(--color-burgundy); } .breadcrumb__sep { color: var(--color-silver); } .breadcrumb__current { color: var(--color-charcoal); } /* ── Utility ─────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--spacing-2); } .gap-4 { gap: var(--spacing-4); } .mt-4 { margin-top: var(--spacing-4); } .mb-4 { margin-bottom: var(--spacing-4); } .mb-8 { margin-bottom: var(--spacing-8); } .p-4 { padding: var(--spacing-4); } .rounded { border-radius: var(--radius-md); } .bg-blush { background: var(--color-blush); } .w-full { width: 100%; } /* ── Loading Skeleton ────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--color-silver) 25%, #e8e8e8 50%, var(--color-silver) 75%); background-size: 400% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 400% 0; } 100% { background-position: -400% 0; } } .skeleton-card { background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-silver); } .skeleton-img { height: 280px; } .skeleton-text { height: 14px; margin: var(--spacing-2) var(--spacing-4); } .skeleton-text--short { width: 60%; } .skeleton-text--price { height: 18px; width: 40%; } /* ── Admin Panel ─────────────────────────────────────────────── */ .admin-layout { display: flex; min-height: 100vh; } .admin-sidebar { width: 260px; background: var(--color-charcoal); color: var(--color-silver); flex-shrink: 0; display: flex; flex-direction: column; } .admin-main { flex: 1; background: #F5F5F5; overflow: auto; } .admin-header { background: var(--color-white); padding: var(--spacing-4) var(--spacing-6); border-bottom: 1px solid var(--color-silver); display: flex; align-items: center; justify-content: space-between; } .admin-content { padding: var(--spacing-6); } .admin-sidebar__logo { padding: var(--spacing-6); border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-white); letter-spacing: 0.2em; } .admin-nav { flex: 1; padding: var(--spacing-4) 0; } .admin-nav__link { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-6); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: all var(--transition-fast); color: var(--color-silver); } .admin-nav__link:hover, .admin-nav__link.active { background: rgba(255,255,255,0.08); color: var(--color-white); } .admin-nav__link svg { width: 18px; height: 18px; flex-shrink: 0; } .stat-card { background: var(--color-white); border-radius: var(--radius-md); padding: var(--spacing-6); box-shadow: var(--shadow-sm); } .stat-card__label { font-size: var(--fs-sm); color: var(--color-slate); margin-bottom: var(--spacing-2); text-transform: uppercase; letter-spacing: 0.08em; } .stat-card__value { font-family: var(--font-heading); font-size: var(--fs-4xl); font-weight: var(--fw-light); color: var(--color-charcoal); } .stat-card__trend { font-size: var(--fs-sm); color: var(--color-success); margin-top: var(--spacing-2); } .admin-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .admin-table th { background: var(--color-charcoal); color: var(--color-white); padding: var(--spacing-3) var(--spacing-4); text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0.05em; } .admin-table td { padding: var(--spacing-3) var(--spacing-4); font-size: var(--fs-sm); border-bottom: 1px solid var(--color-silver); } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: var(--color-blush); } /* Status Badges */ .status { font-size: 11px; padding: 2px 10px; border-radius: var(--radius-full); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; } .status--pending { background: #FFF3CD; color: #856404; } .status--processing { background: #CCE5FF; color: #004085; } .status--shipped { background: #D4EDDA; color: #155724; } .status--delivered { background: #D4EDDA; color: #155724; } .status--cancelled { background: #F8D7DA; color: #721C24; } /* ── Responsive Overrides ────────────────────────────────────── */ @media (max-width: 640px) { .hero { min-height: 70vh; } .hero__title { font-size: 2.25rem; } .product-info__cta { flex-direction: column; } .checkout-grid { grid-template-columns: 1fr; } .admin-sidebar { display: none; } } /* ── Print Styles ────────────────────────────────────────────── */ @media print { .navbar, .footer, .cart-drawer, .toast-container { display: none !important; } body { background: white; color: black; } }