/* ── BRAND COLOURS ── */ :root { --cream: #F7F0E6; --beige: #E8D9C5; --tan: #D4B896; --blush: #C9A89A; --maroon: #8B1A1A; --deep: #5C0F0F; --text: #2C1F1F; --muted: #7a6358; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--text); font-weight: 300; } /* ── NAVIGATION ── */ .site-nav { background: var(--deep); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 64px; } .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--beige); letter-spacing: 0.2em; font-weight: 300; } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { color: var(--tan); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; font-weight: 300; } .nav-links a:hover { color: var(--cream); } .nav-cart a { color: var(--tan); font-size: 0.65rem; letter-spacing: 0.15em; text-decoration: none; } /* ── HERO ── */ .hero { display: flex; align-items: center; background: var(--deep); min-height: 560px; position: relative; overflow: hidden; } .hero-content { flex: 1; padding: 60px; z-index: 2; } .hero-image { width: 42%; position: relative; } .hero-image img { width: 100%; height: 560px; object-fit: cover; } .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--tan); margin-bottom: 16px; } .hero-title { font-family: 'Cormorant Garamond', serif; font-size: 3.6rem; font-weight: 300; color: var(--cream); line-height: 1.1; margin-bottom: 18px; } .hero-title em { color: var(--tan); font-style: italic; } .hero-sub { font-size: 0.8rem; color: rgba(232,217,197,0.7); line-height: 1.8; margin-bottom: 32px; max-width: 380px; } .btn-primary { display: inline-block; background: var(--tan); color: var(--deep); padding: 13px 36px; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; font-weight: 400; margin-right: 14px; } .btn-outline { display: inline-block; border: 1px solid var(--tan); color: var(--tan); padding: 12px 36px; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; font-weight: 300; } /* ── MARQUEE ── */ .marquee { background: var(--maroon); padding: 10px 48px; font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tan); } /* ── SECTION HEADERS ── */ .section-header { text-align: center; margin-bottom: 48px; } .eyebrow { font-size: 0.6rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--maroon); margin-bottom: 10px; font-weight: 300; } h2 { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 300; letter-spacing: 0.08em; color: var(--text); } /* ── CATEGORIES ── */ .categories { padding: 70px 60px; } .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cat-card { position: relative; overflow: hidden; display: block; aspect-ratio: 3/4; text-decoration: none; } .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .cat-card:hover img { transform: scale(1.05); } .cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(60,10,10,0.75) 0%, transparent 55%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 28px; } .cat-overlay span { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--cream); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 300; } /* ── PRODUCT GRID ── */ .products { padding: 70px 60px; } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .product-card { background: white; cursor: pointer; } .product-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform 0.4s; } .product-card:hover img { transform: scale(1.03); } .product-info { padding: 16px; } .product-name { font-family: 'Cormorant Garamond', serif; font-size: 1rem; letter-spacing: 0.06em; color: var(--text); margin-bottom: 6px; } .product-price { font-size: 0.78rem; color: var(--maroon); letter-spacing: 0.1em; } .product-info .btn-primary { margin-top: 12px; font-size: 0.6rem; padding: 10px 20px; } /* ── FOOTER ── */ .site-footer { background: var(--text); padding: 48px 60px 28px; } .footer-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--beige); letter-spacing: 0.2em; margin-bottom: 20px; font-weight: 300; } .footer-links { display: flex; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; } .footer-links a { font-size: 0.7rem; color: rgba(212,184,150,0.55); text-decoration: none; letter-spacing: 0.1em; } .footer-links a:hover { color: var(--tan); } .footer-copy { font-size: 0.62rem; color: rgba(212,184,150,0.3); letter-spacing: 0.1em; } /* ── RESPONSIVE (MOBILE) ── */ @media (max-width: 768px) { .site-nav { padding: 0 20px; } .nav-links { display: none; } .hero { flex-direction: column; } .hero-content { padding: 40px 24px; } .hero-image { width: 100%; } .hero-title { font-size: 2.6rem; } .cat-grid { grid-template-columns: 1fr; } .product-grid { grid-template-columns: repeat(2, 1fr); } .categories, .products { padding: 40px 20px; } }