/* Retail / boutique template. Accent color is set per client via an inline CSS variable on (see index.ejs). */ .site-header { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); } .wordmark { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: 0.01em; white-space: nowrap; } .site-nav { display: flex; gap: var(--space-3); font-size: 0.85rem; } .site-nav a { transition: opacity 0.2s ease; } .site-nav a:hover { opacity: 0.6; } /* Hero */ .hero { position: relative; height: 88vh; min-height: 480px; overflow: hidden; } .hero__image { width: 100%; height: 100%; object-fit: cover; } .hero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 var(--space-3); } .hero__title { font-size: clamp(2.75rem, 7vw, 5.25rem); color: #fff; } .hero__tagline { margin-top: var(--space-2); font-size: 1.05rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); } /* Story */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; padding-top: var(--space-6); padding-bottom: var(--space-6); } .story__image img { width: 100%; height: 460px; object-fit: cover; } .story__text h2 { font-size: clamp(1.6rem, 2.8vw, 2.35rem); margin-top: var(--space-1); } .story__body { margin-top: var(--space-3); color: var(--color-warm-grey); max-width: 42ch; } /* Products */ .products { padding-bottom: var(--space-6); text-align: center; } .products__heading { font-size: clamp(1.6rem, 2.8vw, 2.35rem); margin-top: var(--space-1); margin-bottom: var(--space-4); } .products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); text-align: left; } .product__image { aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-cream); } .product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product:hover .product__image img { transform: scale(1.035); } .product__meta { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: 0.92rem; } .product__price { color: var(--color-warm-grey); } .whatsapp-cta { display: inline-block; margin-top: var(--space-4); padding: 0.9rem 2rem; border: 1px solid var(--accent); color: var(--accent); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Feed */ .feed { padding-bottom: var(--space-6); text-align: center; } .feed__heading { font-size: clamp(1.6rem, 2.8vw, 2.35rem); margin-top: var(--space-1); margin-bottom: var(--space-4); } .feed__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); } .feed__item { display: block; aspect-ratio: 1 / 1; overflow: hidden; } .feed__item img { width: 100%; height: 100%; object-fit: cover; } .feed__handle { display: inline-block; margin-top: var(--space-3); font-size: 0.9rem; color: var(--accent); border-bottom: 1px solid currentColor; } /* Testimonials */ .testimonials { padding-bottom: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); border-top: 1px solid var(--color-line); padding-top: var(--space-6); } .testimonial__quote { font-family: var(--font-display); font-size: 1.3rem; font-style: italic; font-weight: 400; line-height: 1.45; } .testimonial__name { display: block; margin-top: var(--space-2); font-style: normal; font-size: 0.85rem; color: var(--color-warm-grey); } /* Contact */ .contact { text-align: center; padding-bottom: var(--space-6); } .contact__heading { font-size: clamp(1.6rem, 2.8vw, 2.35rem); margin-top: var(--space-1); } .contact__details { margin-top: var(--space-3); color: var(--color-warm-grey); } .contact__details p + p { margin-top: 0.35rem; } /* Footer */ .site-footer { display: flex; justify-content: space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); border-top: 1px solid var(--color-line); font-size: 0.8rem; color: var(--color-warm-grey); } @media (max-width: 860px) { .site-nav { gap: var(--space-2); } .story { grid-template-columns: 1fr; gap: var(--space-3); } .story__image img { height: 320px; } .products__grid { grid-template-columns: repeat(2, 1fr); } .feed__grid { grid-template-columns: repeat(3, 1fr); } .testimonials { grid-template-columns: 1fr; gap: var(--space-4); } }