:root { --black: #10100f; --gold: #c8a34b; --cream: #f8f6f0; --gray: #6e6b65; --serif: 'Cormorant Garamond', serif; --sans: Manrope, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--black); font: 14px/1.7 var(--sans); } button, input { font: inherit; } button { cursor: pointer; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .site-header { min-height: 78px; padding: 14px 7%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd7ca; } .brand { display: flex; align-items: center; gap: 10px; color: var(--black); font: 600 28px var(--serif); letter-spacing: .12em; text-decoration: none; } .brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } nav { display: flex; gap: 28px; } nav a { color: var(--black); font-size: 11px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; } .cart, .category, .add, .primary-button, .chat-button, .chat-options button { border: 1px solid var(--black); background: var(--cream); color: var(--black); font: 600 11px var(--sans); letter-spacing: .04em; } .cart:hover, .category:hover, .add:hover, .primary-button:hover, .chat-options button:hover { background: var(--black); color: var(--cream); } .cart { padding: 8px 10px; } .cart b { display: inline-grid; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; place-items: center; background: var(--gold); color: var(--black); } .cart-area { position: relative; } .cart-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; width: 300px; padding: 18px; border: 1px solid #ddd7ca; background: var(--cream); box-shadow: 0 12px 32px #0004; } .cart-title { margin: 0 0 10px; font: 600 28px var(--serif); } .cart-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #ddd7ca; font-size: 11px; } .empty-cart { color: var(--gray); font-size: 11px; } .remove-item { border: 0; background: transparent; color: var(--gray); font-size: 18px; line-height: 1; } .remove-item:hover { color: var(--black); } .cart-panel .primary-button { margin-top: 12px; } .hero { display: grid; min-height: 570px; padding: 80px 12%; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; overflow: hidden; background: var(--black); color: var(--cream); } .eyebrow { margin: 0 0 16px; color: var(--gold); font-size: 10px; letter-spacing: .16em; } .hero h1, .catalog h2, .maison h2, .checkout h2 { margin: 0; font: 500 clamp(52px, 7vw, 96px)/.88 var(--serif); letter-spacing: -.05em; } .hero em, .catalog em, .maison em { color: var(--gold); font-weight: 500; } .hero > div > p:not(.eyebrow) { max-width: 350px; margin: 28px 0; color: #d0cbc0; } .link { display: inline-block; padding-bottom: 6px; border-bottom: 1px solid var(--gold); color: inherit; font-size: 11px; letter-spacing: .06em; text-decoration: none; } .hero-shape { position: relative; width: min(230px, 60%); margin: auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #f0d987, #c8a34b 35%, #6e5422 75%); box-shadow: 0 0 60px #c8a34b55; animation: float 5s ease-in-out infinite; } .hero-shape::before, .hero-shape::after { position: absolute; top: 50%; left: 50%; width: 175%; aspect-ratio: 1; border: 1px solid #9a7b35; border-radius: 50%; content: ''; transform: translate(-50%, -50%); } .hero-shape::after { width: 260%; border-color: #c8a34b66; } @keyframes float { 50% { transform: translateY(-12px); } } .catalog { padding: 100px 8%; } .catalog h2 { font-size: 64px; } .intro { max-width: 360px; color: var(--gray); } .categories { display: flex; flex-wrap: wrap; gap: 10px; margin: 35px 0 25px; } .category { padding: 8px 12px; } .category.active { background: var(--black); color: var(--cream); } .category.active:hover { background: var(--cream); color: var(--black); } .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .product img { display: block; width: 100%; height: 330px; background: #d6cfbf; object-fit: cover; } .product-info { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; } .product h3 { margin: 0; font: 600 22px var(--serif); } .product p { margin: 2px 0 0; color: var(--gray); font-size: 10px; } .price { white-space: nowrap; font-size: 11px; } .add { width: 100%; padding: 10px; text-transform: uppercase; } .cart-message { min-height: 20px; color: #80621d; text-align: center; } .maison { display: grid; padding: 90px 12%; grid-template-columns: 1fr 1fr; align-items: center; gap: 10%; background: var(--black); color: var(--cream); } .maison-logo { display: grid; min-height: 390px; border: 1px solid #c9b68a; place-items: center; background: linear-gradient(135deg, #af986a, #4a402c); } .maison-logo img { width: min(55%, 280px); border-radius: 50%; } .maison > div > p:not(.eyebrow) { max-width: 400px; margin: 26px 0; color: #d0cbc0; } footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 35px 8%; background: #e7e0d2; } footer p { margin: 5px 0; color: var(--gray); font-size: 11px; } .contact-link { color: var(--black); font-size: 11px; } .checkout { position: absolute; top: 70px; right: 7%; z-index: 5; padding: 0; background: transparent; } .checkout-box { position: relative; width: 360px; padding: 30px; border: 1px solid #ddd7ca; background: var(--cream); box-shadow: 0 12px 32px #0004; } .checkout h2 { font-size: 48px; } .checkout label { display: block; margin-top: 14px; font-size: 11px; font-weight: 700; } .checkout input { width: 100%; margin-top: 5px; padding: 10px; border: 1px solid #aaa; background: #fff; } .primary-button { width: 100%; margin-top: 18px; padding: 12px; } .close { border: 0; background: transparent; font-size: 26px; line-height: 1; } .checkout .close { position: absolute; top: 8px; right: 12px; } .payment-message { min-height: 20px; color: #80621d; font-size: 12px; } .chat { position: fixed; right: 22px; bottom: 22px; z-index: 2; } .chat-button { padding: 13px 18px; border-color: var(--gold); border-radius: 24px; background: var(--gold); } .chat-button:hover { background: var(--black); color: var(--gold); } .chat-box { width: 290px; margin-bottom: 10px; padding: 16px; background: var(--cream); box-shadow: 0 12px 32px #0004; } .chat-title { display: flex; align-items: center; gap: 9px; } .chat-title img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .chat-title b, .chat-title small { display: block; } .chat-title small { color: var(--gray); font-size: 10px; } .chat-title .close { margin-left: auto; } .chat-box > p { font-size: 12px; } .chat-options { display: flex; flex-wrap: wrap; gap: 6px; } .chat-options button { padding: 6px; font-size: 10px; } .chat-answer { color: #80621d; } .whatsapp { display: block; margin-top: 14px; padding: 10px; background: #257a55; color: #fff; font-size: 11px; text-align: center; text-decoration: none; } .whatsapp:hover { background: var(--black); } [hidden] { display: none !important; } @media (max-width: 760px) { .site-header { padding: 12px 20px; } nav { display: none; } .brand { font-size: 24px; } .hero, .maison { padding: 70px 28px; grid-template-columns: 1fr; } .hero { min-height: 600px; } .hero-shape { display: none; } .catalog { padding: 70px 20px; } .catalog h2 { font-size: 52px; } .products { grid-template-columns: repeat(2, 1fr); gap: 24px 10px; } .product img { height: 240px; } .maison-logo { min-height: 260px; } .maison h2 { font-size: 55px; } footer { display: block; } footer > div { margin-top: 15px; } .checkout { top: 66px; right: 15px; left: 15px; } .checkout-box { width: 100%; } .chat { right: 15px; bottom: 15px; } }