/* ========================================================================== Jooli Storefront — single source of truth for storefront styles. Soft cream / gold / blush palette. Universal type: SFU Futura. ========================================================================== */ /* ---------- Brand typeface: SFU Futura ---------- Drop the SoftMaker SFU Futura font files into /assets/fonts/sfu-futura/ using the file names below. Until they're added, browsers fall back to Jost (free Futura clone loaded from Google Fonts in the page ) or the system Futura. ------------------------------------------------ */ @font-face { font-family: 'SFU Futura'; font-style: normal; font-weight: 300; font-display: swap; src: local('SFU Futura Light'), url('../fonts/sfu-futura/SFUFutura-Light.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-Light.woff') format('woff'); } @font-face { font-family: 'SFU Futura'; font-style: normal; font-weight: 400; font-display: swap; src: local('SFU Futura Book'), local('SFU Futura'), url('../fonts/sfu-futura/SFUFutura-Book.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-Book.woff') format('woff'); } @font-face { font-family: 'SFU Futura'; font-style: italic; font-weight: 400; font-display: swap; src: local('SFU Futura Book Italic'), local('SFU Futura Italic'), url('../fonts/sfu-futura/SFUFutura-BookItalic.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-BookItalic.woff') format('woff'); } @font-face { font-family: 'SFU Futura'; font-style: normal; font-weight: 500; font-display: swap; src: local('SFU Futura Medium'), url('../fonts/sfu-futura/SFUFutura-Medium.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-Medium.woff') format('woff'); } @font-face { font-family: 'SFU Futura'; font-style: normal; font-weight: 600; font-display: swap; src: local('SFU Futura Demi'), local('SFU Futura Heavy'), url('../fonts/sfu-futura/SFUFutura-Demi.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-Demi.woff') format('woff'); } @font-face { font-family: 'SFU Futura'; font-style: normal; font-weight: 700; font-display: swap; src: local('SFU Futura Bold'), url('../fonts/sfu-futura/SFUFutura-Bold.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-Bold.woff') format('woff'); } @font-face { font-family: 'SFU Futura'; font-style: italic; font-weight: 700; font-display: swap; src: local('SFU Futura Bold Italic'), url('../fonts/sfu-futura/SFUFutura-BoldItalic.woff2') format('woff2'), url('../fonts/sfu-futura/SFUFutura-BoldItalic.woff') format('woff'); } /* ---------- Design tokens ---------- */ :root { /* Backgrounds */ --bg-page: #fbf7f0; --bg-card: #ffffff; --bg-soft: #f6efe2; --bg-cream: #fbf6ec; --bg-grey: #fcfcfa; /* near-white used in the Trending strip */ --bg-grey-deep: #ebe4d2; --bg-pink-soft: #f7e6e7; --bg-blush: #efd4d6; /* Text */ --text-strong: #2f2a26; --text-base: #494139; --text-muted: #8a7e6f; --text-soft: #ad9f8b; /* Brand accents */ --gold: #d6c754; --gold-deep: #b3a73c; --gold-soft: #e6db83; --olive: #d6c754; --olive-deep: #b3a73c; --blush: #d99fa6; --blush-strong: #c47b86; --rose: #d63a3f; --red-sale: #d62f24; /* Borders */ --border: #ecdfc7; --border-soft: #f1e8d7; /* Type — SFU Futura is the brand typeface. Jost is a free Futura clone served from Google Fonts and acts as the fallback while the SFU Futura font files are missing; "Futura" picks up the system copy on macOS/iOS. */ --font-brand: 'SFU Futura', 'Jost', 'Futura', 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-display: var(--font-brand); --font-serif: var(--font-brand); --font-sans: var(--font-brand); --font-script: 'Allura', var(--font-brand), cursive; /* Layout */ --container: 1280px; --header-h: 117px; --radius: 6px; --radius-lg: 14px; --shadow-card: 0 1px 2px rgba(60,40,20,0.04), 0 8px 24px rgba(60,40,20,0.05); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--text-base); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { color: var(--gold-deep); } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-serif); font-weight: 500; color: var(--text-strong); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } /* Visually hidden helper - keep elements available to screen readers */ .sr-only, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; clip-path: none; padding: 10px 16px; background: var(--text-strong); color: #fff; border-radius: 6px; z-index: 1000; } /* ---------- Top announcement bar ---------- */ .announce-bar { background: var(--bg-cream); color: var(--text-muted); font-size: 12px; letter-spacing: .04em; padding: 10px 0; text-align: center; border-bottom: 1px solid var(--border-soft); } .announce-bar .container { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } .announce-bar .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); } /* ---------- Header ---------- */ .site-header { background: #fff; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 50; } .header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; min-height: var(--header-h); padding-top: 14px; padding-bottom: 14px; } .brand { display: inline-flex; align-items: center; } .brand-logo { height: 72px; width: auto; transition: transform .25s ease; } .brand:hover .brand-logo { transform: scale(1.02); } /* Primary nav */ .primary-nav { justify-self: center; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 34px; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-strong); font-size: 17px; font-weight: 500; letter-spacing: .02em; padding: 14px 2px; transition: color .2s ease; white-space: nowrap; } .nav-item { flex-shrink: 0; } .nav-link .chev { width: 16px; height: 16px; opacity: .8; transition: transform .2s ease; } .nav-item:hover .nav-link, .nav-item:focus-within .nav-link { color: var(--gold-deep); } .nav-item:hover .nav-link .chev, .nav-item:focus-within .nav-link .chev { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); min-width: 220px; background: #fff; border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: 0 14px 32px rgba(60,40,20,.10); padding: 12px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; } .nav-dropdown ul { list-style: none; margin: 0; padding: 0; } .nav-dropdown a { display: block; padding: 9px 14px; font-size: 14px; color: var(--text-base); border-radius: 6px; transition: background .15s ease, color .15s ease; } .nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--bg-cream); color: var(--gold-deep); } .nav-item.has-children:hover .nav-dropdown, .nav-item.has-children:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Tools */ .header-tools { display: inline-flex; align-items: center; gap: 6px; } .icon-btn { appearance: none; background: transparent; border: 0; color: var(--text-base); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; position: relative; transition: background .15s ease, color .15s ease; } .icon-btn:hover, .icon-btn:focus-visible { background: var(--bg-cream); color: var(--gold-deep); outline: none; } .icon-btn svg { width: 22px; height: 22px; } .cart-btn .cart-count { position: absolute; top: 6px; right: 6px; background: var(--text-strong); color: #fff; font-size: 10px; font-weight: 600; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: none; align-items: center; justify-content: center; } .cart-btn .cart-count.is-visible { display: inline-flex; } /* Search panel (slide-down) */ .search-panel { max-height: 0; overflow: hidden; background: #fff; border-bottom: 1px solid var(--border-soft); transition: max-height .25s ease; } .search-panel.is-open { max-height: 100px; } .search-panel-inner form { display: flex; align-items: center; gap: 10px; padding: 14px 0; } .search-panel-inner i { color: var(--text-muted); } .search-panel-inner input { flex: 1; border: 0; background: transparent; font-family: var(--font-sans); font-size: 16px; color: var(--text-strong); outline: none; padding: 6px 0; border-bottom: 1px solid var(--border); } .search-panel-inner input:focus { border-color: var(--gold); } /* Mobile menu */ .mobile-menu-toggle { display: none; } .mobile-drawer { position: fixed; inset: 0 30% 0 0; background: #fff; transform: translateX(-105%); transition: transform .28s ease; z-index: 80; overflow-y: auto; box-shadow: 6px 0 28px rgba(60,40,20,.18); } .mobile-drawer.is-open { transform: translateX(0); } .mobile-drawer-inner { padding: 16px 18px 80px; } .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 12px; } .mobile-drawer .brand-logo { height: 75px; } .mobile-nav, .mobile-sub { list-style: none; margin: 0; padding: 0; } .mobile-nav > li { border-bottom: 1px solid var(--border-soft); padding: 8px 0; } .mobile-nav-top { display: block; padding: 10px 4px; font-family: var(--font-serif); font-size: 18px; color: var(--text-strong); letter-spacing: .04em; } .mobile-sub { padding-left: 12px; } .mobile-sub a { display: block; padding: 8px 4px; color: var(--text-muted); font-size: 14px; } /* ---------- Main / sections ---------- */ .site-main { min-height: 60vh; } /* Inner pages (product / category / tag) render on a clean white canvas. The footer band (.thanks-banner + .info-band + .site-footer) keeps its own colours because each of those sections sets its own background explicitly. */ body.is-inner { background: #fff; } body.is-inner .site-main { background: #fff; } .section { padding: 72px 0; } .section--trending { background: var(--bg-grey); padding: 80px 0 84px; position: relative; } .section--style { background: #fff; } .section--promo { padding: 0; } .section__head { text-align: center; margin-bottom: 48px; } .section__title { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 38px); letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); font-weight: 300; line-height: 1.2; } .section__rule { width: 36px; height: 1px; background: var(--gold); margin: 18px auto 0; } .section__cta { text-align: center; margin-top: 48px; } .section__cta .btn { position: relative; } .section__cta .btn::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 18px; height: 1px; background: var(--gold); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 36px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; text-decoration: none; white-space: nowrap; } .btn-gold { background: var(--gold); color: var(--text-strong); border-color: var(--gold); box-shadow: 0 4px 12px rgba(179,167,60,.22); } .btn-gold:hover, .btn-gold:focus-visible { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--text-strong); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(179,167,60,.32); outline: none; } .btn-gold[disabled] { background: #e0d9b8; border-color: #e0d9b8; color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; } .btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-cream); color: var(--gold-deep); } .btn-sm { padding: 10px 24px; font-size: 12px; letter-spacing: .14em; } /* ---------- Product grid ---------- */ .product-grid { display: grid; gap: 28px; } .product-grid--3 { grid-template-columns: repeat(3, 1fr); } .product-grid--4 { grid-template-columns: repeat(4, 1fr); } /* "extra-large" cards — used by the Trending strip */ .product-grid--xl { gap: 30px; } .product-grid--xl .product-card__media { aspect-ratio: 4 / 5; border-radius: 2px; } .product-grid--xl .product-card__title { font-size: 17px; margin-top: 4px; } .product-grid--xl .product-card__price { font-size: 15px; } .empty-state { text-align: center; color: var(--text-muted); padding: 48px 0; font-style: italic; } /* ---------- Product card ---------- */ .product-card { background: transparent; display: flex; flex-direction: column; gap: 14px; } .product-card__media { position: relative; aspect-ratio: 1 / 1; background: #faf6ec; overflow: hidden; border-radius: 4px; } .section--trending .product-card__media { background: #f4eee2; } .product-card__media-link { display: block; width: 100%; height: 100%; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .2s ease; } .product-card:hover .product-card__media img { transform: scale(1.05); } .product-card__noimage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-soft); } /* Flags / badges (top-left stack — flush to the image edge) */ .product-card__flags { position: absolute; top: 14px; left: 0; display: flex; flex-direction: column; gap: 8px; z-index: 2; } .flag { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; border-radius: 0 4px 4px 0; line-height: 1.4; color: #fff; font-family: var(--font-sans); } .flag--discount, .flag--tag.flag--red, .flag--tag.flag--danger { text-transform: none; } .flag--discount { background: var(--red-sale); } .flag--oos { background: #5b6770; } .flag--tag.flag--gold { background: #b8964a; } .flag--tag.flag--blush { background: var(--blush-strong); } .flag--tag.flag--success { background: #4d9d6c; } .flag--tag.flag--danger, .flag--tag.flag--red { background: var(--rose); } .flag--tag.flag--info { background: #5677c6; } .flag--tag.flag--muted { background: #847866; } .flag--tag.flag--charcoal{ background: #3e3a35; } /* Hover quick actions (right side) */ .product-card__hover { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 2; opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; } .product-card:hover .product-card__hover, .product-card:focus-within .product-card__hover { opacity: 1; transform: translateX(0); } .hover-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--border-soft); color: var(--text-strong); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(60,40,20,.08); transition: background .15s ease, color .15s ease, transform .2s ease; } .hover-icon:hover { background: var(--gold); color: var(--text-strong); border-color: var(--gold); transform: scale(1.05); } .hover-icon svg { width: 16px; height: 16px; } /* CTA pill (sits at the bottom of the media on hover) - uses .btn .btn-gold */ .product-card__cta { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 14px); opacity: 0; z-index: 3; padding: 11px 26px; font-size: 12px; letter-spacing: .14em; transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease; } .product-card:hover .product-card__cta, .product-card:focus-within .product-card__cta { opacity: 1; transform: translate(-50%, 0); } /* Card body — left aligned to match the reference */ .product-card__body { text-align: left; padding: 4px 2px 0; } .product-card__title { font-family: var(--font-serif); font-size: 16px; margin: 4px 0 6px; color: var(--text-strong); font-weight: 500; letter-spacing: .01em; } .product-card__title a:hover { color: var(--gold-deep); } .product-card__price { color: var(--gold); font-weight: 600; font-size: 14px; display: inline-flex; align-items: baseline; gap: 6px; } .price--was { color: var(--text-soft); font-weight: 400; text-decoration: line-through; } .price--now { color: var(--gold-deep); font-weight: 600; } /* ---------- Tabs (New In) ---------- */ .tabs__list { display: flex; justify-content: center; gap: 28px; margin-bottom: 44px; flex-wrap: wrap; } .tabs__btn { appearance: none; background: transparent; border: 0; padding: 4px 2px 8px; font-family: var(--font-serif); font-size: 17px; color: var(--text-strong); font-weight: 500; letter-spacing: .02em; position: relative; transition: color .15s ease; } .tabs__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .2s ease; transform-origin: center; } .tabs__btn.is-active, .tabs__btn:hover, .tabs__btn:focus-visible { color: var(--gold-deep); outline: none; } .tabs__btn.is-active::after { transform: scaleX(1); } .tabs__panel { display: none; } .tabs__panel.is-active { display: block; } /* ---------- Promo banner (Christmas) ---------- */ /* ---------- Home promo banner (single image) ---------- */ .promo-banner { display: block; position: relative; overflow: hidden; color: var(--text-strong); text-decoration: none; background: var(--bg-soft); } .promo-banner--image { width: 100%; aspect-ratio: 16 / 5; max-height: 520px; } .promo-banner--image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } a.promo-banner--image:hover img { transform: scale(1.02); } /* ---------- Home promo carousel ---------- */ .promo-carousel { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 5; max-height: 520px; background: var(--bg-soft); } .promo-track { position: relative; width: 100%; height: 100%; } .promo-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .55s ease; pointer-events: none; } .promo-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; } .promo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } a.promo-slide { color: inherit; text-decoration: none; } a.promo-slide:hover img { transform: scale(1.015); transition: transform .8s ease; } /* Prev / next arrows */ .promo-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--text-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: background .15s ease, transform .15s ease, opacity .15s ease; opacity: 0; } .promo-carousel:hover .promo-nav, .promo-nav:focus-visible { opacity: 1; } .promo-nav:hover { background: #fff; } .promo-nav:active { transform: translateY(-50%) scale(.96); } .promo-nav svg { width: 22px; height: 22px; } .promo-nav--prev { left: 18px; } .promo-nav--next { right: 18px; } /* Dots */ .promo-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; display: inline-flex; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.55); backdrop-filter: blur(4px); } .promo-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(47,42,38,.35); cursor: pointer; transition: background .15s ease, transform .15s ease; } .promo-dot:hover { background: rgba(47,42,38,.55); } .promo-dot.is-active { background: var(--gold-deep); transform: scale(1.25); } /* ---------- Shop by Style carousel ---------- */ .style-carousel { position: relative; } .style-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 4px 32px; -webkit-overflow-scrolling: touch; } .style-track::-webkit-scrollbar { display: none; } .style-tile { position: relative; text-align: center; color: var(--text-strong); transition: transform .25s ease; } .style-tile:hover { transform: translateY(-2px); } .style-tile__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--bg-soft); } .style-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .style-tile:hover .style-tile__media img { transform: scale(1.05); } .style-tile__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-soft); background: linear-gradient(135deg, var(--bg-pink-soft) 0%, var(--bg-cream) 100%); } .style-tile__label { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: #fff; padding: 12px 32px; min-width: 160px; font-family: var(--font-serif); font-size: 16px; color: var(--text-strong); border-radius: 2px; box-shadow: 0 6px 14px rgba(60,40,20,.06); letter-spacing: .04em; } .carousel-arrow { position: absolute; top: calc(50% - 30px); transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--text-strong); display: inline-flex; align-items: center; justify-content: center; z-index: 4; box-shadow: 0 4px 14px rgba(60,40,20,.08); transition: background .2s ease, color .2s ease; } .carousel-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--text-strong); } .carousel-arrow--prev { left: -8px; } .carousel-arrow--next { right: -8px; } /* ---------- "Thanks for shining" banner ---------- */ .thanks-banner { padding-top: 72px; padding-bottom: 72px; background: var(--bg-page); } .thanks-banner__title { text-align: center; font-family: var(--font-serif); font-size: clamp(24px, 2.4vw, 28px); color: var(--text-muted); letter-spacing: .04em; margin-bottom: 32px; font-weight: 500; } .thanks-banner__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 85%; margin: 0 auto; } .thanks-tile { position: relative; display: block; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: var(--bg-pink-soft); text-decoration: none; overflow: hidden; transition: filter .25s ease; } .thanks-tile:hover { filter: brightness(1.05); } /* Fallback gradients used only if a tile's inline background-image is removed. */ .thanks-tile--1 { background-image: linear-gradient(135deg, #e8c4c8 0%, #fbe7d1 100%); } .thanks-tile--2 { background-image: linear-gradient(135deg, #f4d4cf 0%, #f7ead9 100%); } .thanks-tile--3 { background-image: linear-gradient(135deg, #f0d9d8 0%, #ecdfc7 100%); } .thanks-tile--4 { background-image: linear-gradient(135deg, #ead0cf 0%, #f6ead4 100%); } /* ---------- Info band (brand accent) ---------- */ .info-band { background: var(--gold); color: #fff; padding: 30px 0; } .info-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; align-items: center; } .info-band__item a { color: inherit; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .2s ease; } .info-band__item a:hover { opacity: .85; } .info-band__item i, .info-band__item svg { width: 28px; height: 28px; color: #fff; stroke: currentColor; } .info-band__item h6 { font-family: var(--font-serif); color: #fff; margin: 6px 0 0; font-size: 22px; font-weight: 500; letter-spacing: .03em; } .info-band__item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; } /* ---------- Footer copyright row ---------- */ .site-footer { padding: 20px 0; background: #fff; border-top: 1px solid var(--border-soft); } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; } .site-footer__copy { font-family: var(--font-serif); font-size: 14px; color: var(--text-strong); } .site-footer__links { display: inline-flex; gap: 28px; } .site-footer__links a { color: var(--text-muted); } .site-footer__links a:hover { color: var(--gold-deep); } /* ---------- Floating actions ---------- */ .float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 10px; } .float-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--gold); color: var(--text-strong); box-shadow: 0 6px 18px rgba(60,40,20,.18); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .2s ease; } .float-btn:hover { transform: translateY(-2px); background: var(--gold-deep); color: var(--text-strong); } .float-btn--whatsapp { background: #25d366; } .float-btn--whatsapp:hover { background: #1ebe5b; } .float-btn--top { background: #fff; color: var(--text-strong); border: 1px solid var(--border); opacity: 0; pointer-events: none; } .float-btn--top.is-visible { opacity: 1; pointer-events: auto; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1200px) { .nav-list { gap: 26px; } .nav-link { font-size: 16px; } .header-row { gap: 28px; } } @media (max-width: 1080px) { .container { padding: 0 24px; } .brand-logo { height: 85px; } :root { --header-h: 128px; } } @media (max-width: 980px) { .primary-nav { display: none; } .mobile-menu-toggle { display: inline-flex; } .header-row { grid-template-columns: auto 1fr auto; gap: 12px; min-height: 106px; padding-top: 12px; padding-bottom: 12px; } :root { --header-h: 106px; } .brand { justify-self: center; } .brand-logo { height: 75px; } .header-tools { justify-self: end; } .section { padding: 64px 0; } .section--trending { padding: 70px 0 72px; } } @media (max-width: 900px) { /* On tablets/phones the homepage Trending / New In grids would wrap into 2 + 2 / 2 + 1, which looks broken. Turn them into a horizontal swipe carousel with scroll-snap; a peek of the next card hints that there's more to the right. Touch users swipe natively, trackpad users scroll, no JS needed. NOTE: targeted via .product-grid--xl (the home-only marker) so the listings page (.product-grid--4.product-grid--listing) keeps its normal grid behaviour. */ .product-grid--xl { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .product-grid--xl::-webkit-scrollbar { display: none; } .product-grid--xl > * { scroll-snap-align: start; } .product-grid--xl .product-card__media { aspect-ratio: 4 / 5; } /* The listings (--4) grid keeps its standard 2-up responsive layout. */ .product-grid--4 { grid-template-columns: repeat(2, 1fr); } .thanks-banner__grid { grid-template-columns: repeat(2, 1fr); } .info-band__grid { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } } @media (max-width: 720px) { .container { padding: 0 16px; } .section { padding: 48px 0; } .section--trending { padding: 56px 0 60px; } .section__head { margin-bottom: 36px; } .section__cta { margin-top: 36px; } .section__title { letter-spacing: .14em; } .promo-banner--image, .promo-carousel { aspect-ratio: 16 / 8; } .promo-nav { width: 36px; height: 36px; opacity: 1; } .promo-nav--prev { left: 10px; } .promo-nav--next { right: 10px; } .promo-nav svg { width: 18px; height: 18px; } .promo-dots { bottom: 10px; padding: 5px 10px; } .style-track { grid-auto-columns: 72%; } .site-footer__inner { justify-content: center; text-align: center; } .float-btn { width: 42px; height: 42px; } /* Show in-card CTAs without hover on touch devices */ .product-card__cta { position: static; transform: none; opacity: 1; margin-top: 12px; align-self: center; } .product-card__hover { opacity: 1; transform: none; } } @media (max-width: 520px) { .announce-bar .dot { display: none; } .announce-bar .container { gap: 6px; font-size: 11px; } .brand-logo { height: 59px; } .icon-btn { width: 40px; height: 40px; } .icon-btn svg { width: 20px; height: 20px; } .product-grid--xl { grid-auto-columns: 82%; gap: 14px; } .product-grid--4 { grid-template-columns: 1fr; gap: 24px; } .product-grid--xl .product-card__media { aspect-ratio: 1 / 1; } .thanks-banner__grid { grid-template-columns: 1fr; } .tabs__list { gap: 16px; } .tabs__btn { font-size: 16px; } .float-actions { right: 12px; bottom: 12px; } } /* ========================================================================== PRODUCT DETAIL PAGE ========================================================================== */ /* Hero — bg.jpg with a thin white veil so the breadcrumb + title stay readable on every inner page. */ .product-hero { background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), url('../images/bg.jpg') center/cover no-repeat #fff; padding: 36px 0 30px; border-bottom: 1px solid var(--border-soft); position: relative; overflow: hidden; } .product-hero__title { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px); color: #555; margin-top: 14px; font-weight: 500; letter-spacing: .01em; } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-muted); } .breadcrumb li { display: inline-flex; align-items: center; gap: 6px; } .breadcrumb li svg { width: 14px; height: 14px; opacity: .55; } .breadcrumb a { color: var(--text-muted); transition: color .15s ease; } .breadcrumb a:hover { color: var(--gold-deep); } .breadcrumb [aria-current="page"] { color: var(--text-strong); } /* Main two-column layout ---------------------------------------- */ .product-main { padding-top: 56px; padding-bottom: 64px; } .product-main__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; } /* Gallery -------------------------------------------------------- */ .product-gallery__stage { position: relative; aspect-ratio: 1 / 1; background: var(--bg-soft); border-radius: 4px; overflow: hidden; } .product-gallery__main { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; } .product-gallery__noimage { display: flex; align-items: center; justify-content: center; color: var(--text-soft); } .product-gallery__flags { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .product-gallery__sale { position: absolute; top: 14px; right: 14px; background: var(--red-sale); color: #fff; font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: 2px; z-index: 2; } .product-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; margin-top: 12px; } .gallery-thumb { appearance: none; border: 1px solid transparent; background: var(--bg-soft); border-radius: 3px; overflow: hidden; aspect-ratio: 1 / 1; padding: 0; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-thumb:hover { transform: translateY(-1px); } .gallery-thumb.is-active { border-color: var(--gold); } /* Info column ---------------------------------------------------- */ .product-info { font-size: 15px; color: var(--text-base); } .product-info__name { font-family: var(--font-serif); font-size: clamp(22px, 2.2vw, 30px); color: var(--text-strong); margin: 0 0 10px; font-weight: 500; letter-spacing: .005em; } .product-info__rating { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; margin-bottom: 18px; } .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--gold); line-height: 1; } .product-info__rating-text { color: var(--text-muted); } .product-info__rating:hover { color: var(--gold-deep); } .product-info__price { font-family: var(--font-serif); font-size: 22px; color: var(--gold); font-weight: 600; margin-bottom: 18px; display: inline-flex; align-items: baseline; gap: 10px; } .product-info .price--was { color: var(--text-soft); font-weight: 400; text-decoration: line-through; } .product-info .price--now { color: var(--gold-deep); } .product-info__excerpt { color: var(--gold-deep); line-height: 1.6; margin: 0 0 18px; } .product-info__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 22px; font-weight: 500; } .product-info__stock.is-in { color: #4d9d6c; } .product-info__stock.is-oos { color: var(--olive-deep); } .product-info__stock svg { width: 16px; height: 16px; } .product-info__variants { margin: 0 0 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .product-info__label { color: var(--text-muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .variant-pills { display: inline-flex; gap: 8px; flex-wrap: wrap; } .variant-pill { appearance: none; border: 1px solid var(--border); background: #fff; color: var(--text-strong); padding: 8px 16px; font-family: var(--font-sans); font-size: 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .variant-pill:hover { border-color: var(--gold); color: var(--gold-deep); } .variant-pill.is-active { background: var(--gold); color: var(--text-strong); border-color: var(--gold); } /* Cart row ------------------------------------------------------- */ .product-info__cart { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); background: #fff; border-radius: 4px; overflow: hidden; } .qty-stepper button { appearance: none; background: transparent; border: 0; color: var(--text-strong); width: 38px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; } .qty-stepper button:hover { background: var(--bg-cream); color: var(--gold-deep); } .qty-stepper button svg { width: 16px; height: 16px; } .qty-stepper input { width: 44px; border: 0; text-align: center; font-family: var(--font-sans); font-size: 15px; color: var(--text-strong); background: transparent; -moz-appearance: textfield; outline: none; } .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .add-to-cart-btn { padding: 13px 32px; font-size: 12px; } .product-info__wishlist { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 24px; transition: color .15s ease; } .product-info__wishlist:hover { color: var(--gold-deep); } .product-info__wishlist svg { width: 16px; height: 16px; } .product-info__meta { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: 13px; } .pim-row { display: flex; gap: 8px; margin: 4px 0; flex-wrap: wrap; } .pim-row dt { color: var(--text-muted); font-weight: 500; margin: 0; } .pim-row dd { margin: 0; color: var(--text-strong); } .pim-row dd a { color: var(--gold-deep); transition: color .15s; } .pim-row dd a:hover { color: var(--gold); } /* Description ---------------------------------------------------- */ .product-desc { padding-top: 24px; padding-bottom: 56px; } .product-desc__title { font-family: var(--font-serif); font-size: 24px; color: var(--text-strong); border-bottom: 1px solid var(--border-soft); padding-bottom: 14px; margin-bottom: 18px; font-weight: 500; } .product-desc__body { color: var(--text-base); line-height: 1.7; max-width: 880px; } /* Reviews -------------------------------------------------------- */ .product-reviews { padding-top: 32px; padding-bottom: 64px; border-top: 1px solid var(--border-soft); } .product-reviews__title { font-family: var(--font-serif); font-size: 24px; color: var(--text-strong); margin-bottom: 24px; font-weight: 500; } .reviews-empty { color: var(--text-muted); font-style: italic; margin: 0 0 28px; } .reviews-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .review { padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 6px; background: #fff; } .review__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; gap: 12px; } .review__author { font-family: var(--font-serif); color: var(--text-strong); font-size: 16px; font-weight: 500; } .review__date { color: var(--text-muted); font-size: 12px; } .review__rating { margin: 4px 0 6px; } .review__body { color: var(--text-base); margin: 0; line-height: 1.6; } .review-form { border: 1px solid var(--border-soft); border-radius: 6px; padding: 26px 28px 28px; background: #fff; } .review-form__title { font-family: var(--font-serif); font-size: 18px; color: var(--text-strong); margin: 0 0 6px; font-weight: 500; } .review-form__intro { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; } .review-form__intro .muted { color: var(--text-soft); } .field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .field-grid .field-row { margin-bottom: 0; } .field-row label, .field-label { color: var(--text-strong); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; } .req { color: var(--rose); } .field-row input, .field-row textarea { width: 100%; border: 1px solid var(--border); background: var(--bg-cream); padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--text-strong); border-radius: 4px; outline: none; transition: border-color .15s ease, background .15s ease; } .field-row input:focus, .field-row textarea:focus { border-color: var(--gold); background: #fff; } .field-row textarea { resize: vertical; min-height: 110px; } .rating-picker { display: inline-flex; align-items: center; gap: 4px; } .rating-star { appearance: none; background: transparent; border: 0; padding: 2px; color: rgba(0,0,0,.18); cursor: pointer; transition: color .12s ease, transform .12s ease; } .rating-star svg { display: block; } .rating-star:hover { transform: scale(1.05); } .rating-star.is-on { color: var(--gold); } .alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; } .alert ul { margin: 0; padding-left: 20px; } .alert-success { background: #ecf6f0; color: #2c6a47; border: 1px solid #c8e2d2; } .alert-error { background: #fdecea; color: #a4271e; border: 1px solid #efc9c5; } /* Related items strip ------------------------------------------- */ .product-related { padding-top: 24px; padding-bottom: 64px; } /* Not-found state */ .not-found-title { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 44px); color: var(--text-strong); text-align: center; margin-bottom: 16px; } /* Responsive ---------------------------------------------------- */ @media (max-width: 980px) { .product-main__grid { grid-template-columns: 1fr; gap: 28px; } .product-main { padding-top: 32px; } } @media (max-width: 640px) { .product-hero { padding: 24px 0 18px; } .product-hero__title { font-size: clamp(22px, 6vw, 28px); } .product-info__cart { flex-wrap: wrap; } .qty-stepper { flex: 0 0 auto; } .add-to-cart-btn { flex: 1 1 100%; } .field-grid { grid-template-columns: 1fr; gap: 0; } .review-form { padding: 18px; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== LISTING PAGES (category / tag) ========================================================================== */ /* Listing hero strip — bg.jpg with a thin white veil so the title + breadcrumb stay readable. Categories can still override with their own hero image (rendered above via .listing-hero__bg). */ .listing-hero { position: relative; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), url('../images/bg.jpg') center/cover no-repeat #fff; padding: 44px 0 36px; border-bottom: 1px solid var(--border-soft); overflow: hidden; isolation: isolate; } .listing-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; z-index: -1; } .listing-hero__inner { display: flex; flex-direction: column; gap: 6px; } .listing-hero__title { font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 42px); color: #555; font-weight: 500; letter-spacing: .01em; line-height: 1.15; } .listing-hero__description { margin: 6px 0 0; color: var(--text-muted); max-width: 64ch; font-size: 14.5px; } .listing-hero .breadcrumb ol { margin-top: 4px; } /* Toolbar (result count + sort) */ .listing-body { padding-top: 40px; } .listing-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--border-soft); } .listing-count { color: var(--text-muted); font-size: 14px; } .listing-sort { display: inline-flex; align-items: center; gap: 10px; } .listing-sort__label { color: var(--text-muted); font-size: 13px; } /* Pill-styled native