/* Google Fonts are loaded via tags in each HTML for parallel fetch — not @import */ :root { color-scheme: only light; /* ── Colour palette ────────────────────────────────────────────────────── */ --bg: #ffffff; --surface: #ffffff; --surface-strong: #ffffff; --trust-strip-fill: #F5F3F0; /* shared fill: hero trust strip, Journal + Customer Stories cards */ --text: #2e1f18; --muted: #7a6253; --accent: #6d2b21; --accent-dark: #4f1c19; --accent-soft: #ac7c64; --border: rgba(45, 31, 22, 0.12); --pdp-cta-accent: #6d2b21; --pdp-heading-color: #2e1f18; --shadow: 0 20px 45px rgba(19, 10, 7, 0.08); /* ── Typography ────────────────────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif; --font-card: 'Inter', system-ui, -apple-system, sans-serif; --font-card-title: 'Inter', Georgia, serif; --font-card-title-size: 1.00rem; --heading-weight: 700; --heading-line-height: 1.1; /* ── Kicker (eyebrow / subtitle above a heading) ──────────────────────── */ --kicker-font: var(--font-ui); --kicker-size: 0.65rem; --kicker-weight: 700; --kicker-spacing: 0.22em; --kicker-color: var(--accent-soft); /* ── Section rhythm ────────────────────────────────────────────────────── */ --section-padding: 1.0rem; /* standard bottom / vertical gap */ --page-gutter: clamp(1rem, 5vw, 3rem); /* horizontal page margin */ --section-heading-mb: 0.6rem; /* space below a section heading */ /* ── Layout anchors ────────────────────────────────────────────────────── */ --header-height: 4.4rem; /* desktop sticky header — drives gallery offset */ --mobile-nav-height: 62px; /* fixed bottom bar on mobile */ /* ── Footer palette ────────────────────────────────────────────────────── */ --footer-bg: #120806; --footer-fg: #f2e5dc; --footer-muted: rgba(242, 229, 220, 0.65); --footer-border: rgba(255, 255, 255, 0.10); --footer-gold: #c9a96e; font-family: var(--font-ui); } * { box-sizing: border-box; } em, i { font-style: normal; } html { scroll-behavior: smooth; overflow-x: hidden; background: #fff; } body { margin: 0; background: #fff; color-scheme: light; color: var(--text); line-height: 1.7; overflow-x: hidden; } button, a { font: inherit; } /* ── Global type scale — set once, used everywhere. Display tier (h1–h3): Cormorant Garamond. UI tier (u1–u8): DM Sans. Component rules must NOT redeclare font-family / font-size / font-weight. Only override colour or letter-spacing when a specific context requires it. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); margin: 0; } /* Mobile base sizes */ h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.0; } h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.1; } h3 { font-size: 0.95rem; font-weight: 500; letter-spacing: 0em; line-height: 1.2; } h4, h5, h6 { font-weight: 500; line-height: 1.2; } /* Desktop — fluid display type */ @media (min-width: 769px) { h1 { font-size: clamp(3rem, 5.56vw, 6.5rem); } h2 { font-size: clamp(1.8rem, 2.9vw, 3.2rem); } h3 { font-size: clamp(1rem, 1.3vw, 1.4rem); } } /* Large desktop — display type grows further */ @media (min-width: 1440px) { h1 { font-size: clamp(5rem, 5.56vw, 7.5rem); } h2 { font-size: clamp(2.6rem, 2.9vw, 3.6rem); } } blockquote, .wv-quote { font-family: var(--font-display); font-size: 1rem; font-weight: 400; font-style: normal; letter-spacing: 0em; line-height: 1.6; color: var(--text); margin: 0; } /* ── UI type scale — wv-u1 through wv-u8 ──────────────────────────────────── */ /* u1 — Navigation labels */ .wv-u1 { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em; } /* u2 — Kicker / eyebrow (sits above a section heading) */ .wv-u2 { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-soft); } /* u3 — Body text (also set on body element below) */ .wv-u3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 400; line-height: 1.7; } /* u4 — Caption / section subtitle */ .wv-u4 { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 400; line-height: 1.6; color: var(--muted); } /* Customer Comment — user-generated review/caption text */ .wv-customer-comment { font-family: var(--font-card); font-size: 0.85rem; font-weight: 400; line-height: 1.55; color: var(--text); } /* u5 — Meta / fine print (breadcrumbs, timestamps, GST notes) */ .wv-u5 { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 400; line-height: 1.5; color: var(--muted); letter-spacing: 0.02em; } /* u6 — Badge (material tags, NEW / BESTSELLER chips) */ .wv-u6 { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } /* u7 — Price */ .wv-price { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; } .wv-price--lg { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 700; } /* u8 — CTA / button text */ .wv-cta { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; } .wv-cta--lg { font-size: 0.78rem; } /* u9 — Product-card overlay title (image-overlay heading on grid cards: Collections, Heritage Designs, Gift by Occasion). Weight/case/color match the standard heading treatment; only white color is component-specific, needed for legibility over a photo. Size stays per-component since card widths differ. */ .wv-card-title { font-family: var(--font-display); font-weight: 500; text-transform: none; color: #fff; } /* u10 — Product-card "explore" link (gold CTA under an overlay title) */ .wv-card-explore { display: inline-block; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; color: var(--footer-gold); text-decoration: none; transition: color 180ms ease; } .wv-card-explore:hover { color: #fff; } /* UI chrome — keep sans-serif for legibility at small sizes */ .site-nav, .site-nav a, .mobile-topbar, .drawer-nav a, .hero-label, .icon-button, .button, .fav-material, .fav-view-all, .fav-add { font-family: var(--font-ui); } /* ───────────────────────────────────────────────────────────────────────────── DESKTOP HEADER Hidden on mobile. Shown sticky on desktop. Direct body child = naturally full viewport width, no escape-hatch math needed. ───────────────────────────────────────────────────────────────────────────── */ .site-header { display: none; } @media (min-width: 769px) { .site-header { display: block; position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } } .header-grid { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.5rem, 5vw, 5.2rem); position: relative; } .site-nav { flex: 0 0 auto; display: flex; gap: clamp(1.2rem, 2.5vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.85rem; color: var(--text); font-weight: 700; } .site-nav a { color: inherit; text-decoration: none; white-space: nowrap; transition: color 200ms ease; position: relative; } .site-nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--accent-dark); transition: width 200ms ease; } .site-nav a:hover { color: var(--accent-dark); } .site-nav a:hover::after { width: 100%; } .brand-wrap { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } /* Scoped to .header-grid (not just .brand-logo) so this reliably beats WooCommerce's ".woocommerce img{height:auto;max-width:100%}" reset, which only applies on WooCommerce-templated pages (product/shop/cart) — without it, the logo rendered at its full native pixel size there. */ .header-grid .brand-logo { height: 3.8rem; width: auto; object-fit: contain; max-width: clamp(140px, 22vw, 280px); } .nav-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; } /* ── Nav trigger (SHOP button styled as nav link) ───────────────────────── */ .nav-trigger { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; position: relative; transition: color 200ms ease; } .nav-trigger::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--accent-dark); transition: width 200ms ease; } .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--accent-dark); } .nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after { width: 100%; } /* ── Nav badge (cart / wishlist count) ─────────────────────────────────── */ .nav-btn-badge { position: relative; } .nav-badge { position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-ui); font-size: 0.52rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 0.15rem; pointer-events: none; } /* ── Mega menu ──────────────────────────────────────────────────────────── */ @media (min-width: 769px) { .site-header { z-index: 100; } } .mega-menu { position: absolute; top: 100%; left: 0; width: fit-content; background: #fff; border: 1px solid var(--border); border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 12px 40px rgba(46, 31, 24, 0.13); z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms; } .mega-menu.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease, visibility 0s 0s; } .mega-inner { width: min(1200px, calc(100vw - 4rem)); } .mega-inner--journal { display: block; width: min(1180px, calc(100vw - 4rem)); } /* ── Content grid: 4 browse cols + right panel ──────────────────────────── */ .mega-content-grid { display: grid; grid-template-columns: 1fr 260px; border-bottom: 1px solid var(--border); } /* Browse panel */ .mega-browse { padding: 1rem 0 0.75rem 0; } .mega-browse-cols { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; } /* Editorial image column (first browse column) */ .mega-col--img { position: relative; padding: 0; align-self: stretch; overflow: hidden; border-right: none; /* escape the .mega-browse top/bottom padding so the image spans full height */ margin-top: -1rem; margin-bottom: -0.75rem; } .mega-col-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .mega-col-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45) 35%, transparent 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1rem 0.75rem; text-align: center; } .mega-col-img-label { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; font-style: normal; color: #fff; margin: 0 0 0.45rem; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,0.75); } .mega-col-img-btn { display: inline-block; background: var(--accent); color: #fff; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 0.4rem 1rem; border-radius: 2px; transition: background 140ms ease; } .mega-col { padding: 0 1.5rem 0 0; border-right: 1px solid var(--border); padding-right: 1.5rem; display: flex; flex-direction: column; } .mega-col:not(:first-child) { padding-left: 1.5rem; } .mega-col:last-child { border-right: none; padding-right: 0; } /* Image column — double-class selector beats .mega-col single-class regardless of position */ .mega-col.mega-col--img { padding: 0; border-right: none; } .mega-col-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; } .mega-col-head svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--accent-soft); } .mega-col-head span { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); line-height: 1.45; } /* Decorative rule below column header */ .mega-col-rule { display: block; width: 2rem; height: 1px; background: var(--accent-soft); margin: 0 0 0.45rem; opacity: 0.6; } .mega-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .mega-col-item { font-family: var(--font-ui); font-size: 0.82rem; font-weight: 400; line-height: 1.5; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 0.55rem; padding: 0.15rem 0; letter-spacing: 0.01em; transition: color 140ms ease; } .mega-col-item:hover { color: var(--accent); } /* Occasion icons (Lucide) */ .mega-item-icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--accent-soft); } /* All browse thumbnails — pure square, no radius */ .mega-item-thumb { width: 30px; height: 30px; object-fit: cover; flex-shrink: 0; border-radius: 0; } /* "View all" link at bottom of column */ .mega-col-viewall { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: 0.02em; transition: color 140ms ease; } .mega-col-viewall:hover { color: var(--accent-dark); } .mega-badge { font-family: var(--font-ui); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 0.1rem 0.3rem; border-radius: 2px; } /* ── Right panel ─────────────────────────────────────────────────────────── */ .mega-right-panel { border-left: 1px solid var(--border); background: #faf7f4; padding: 1rem 1.25rem 0.75rem; display: flex; flex-direction: column; gap: 0; } .mega-right-section { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); } .mega-right-section--last { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .mega-right-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; } .mega-right-head svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--accent-soft); } .mega-right-head span { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } /* Collections list */ .mega-collection-list { list-style: none; margin: 0; padding: 0; } .mega-collection-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: color 140ms ease; } .mega-collection-list li:last-child .mega-collection-item { border-bottom: none; } .mega-collection-item:hover { color: var(--accent); } .mega-collection-item:hover .mega-collection-sub { color: var(--accent-soft); } .mega-collection-thumb { width: 42px; height: 42px; object-fit: cover; flex-shrink: 0; border-radius: 0; } .mega-collection-text { flex: 1; min-width: 0; } .mega-collection-title { display: block; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; line-height: 1.3; } .mega-collection-sub { display: block; font-family: var(--font-ui); font-size: 0.68rem; color: var(--muted); margin-top: 0.18rem; line-height: 1.3; transition: color 140ms ease; } .mega-chevron { width: 0.75rem; height: 0.75rem; color: var(--muted); flex-shrink: 0; margin-left: auto; } /* Budget grid */ .mega-budget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; } .mega-budget-btn { display: block; border: 1px solid var(--border); border-radius: 2px; padding: 0.45rem 0.25rem; text-align: center; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 500; color: var(--text); text-decoration: none; line-height: 1.5; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .mega-budget-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* Colour swatches */ .mega-colour-grid { display: flex; flex-wrap: wrap; gap: 0.55rem 0.6rem; margin-bottom: 0.65rem; } .mega-colour-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-decoration: none; cursor: pointer; } .mega-colour-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.1); display: block; transition: transform 120ms ease, box-shadow 120ms ease; } .mega-colour-swatch:hover .mega-colour-dot { transform: scale(1.15); box-shadow: 0 0 0 2px var(--accent-soft); } .mega-colour-label { font-family: var(--font-ui); font-size: 0.5rem; color: var(--muted); text-align: center; white-space: nowrap; } /* ── Budget + Colour split row (full-width, below dividing line) ─────────── */ .mega-split-row { display: flex; align-items: flex-start; padding: 0.65rem 2rem 0.7rem; } .mega-split-budget { flex: 0 0 340px; border-right: 1px solid var(--border); padding-right: 2rem; margin-right: 2rem; } .mega-split-budget .mega-budget-grid { width: 100%; } .mega-split-colour { flex: 1; } .mega-split-colour .mega-right-head { margin-bottom: 0.45rem; } .mega-split-colour-body { display: flex; align-items: center; gap: 1rem; } .mega-split-colour-body .mega-colour-grid { flex: 0 0 auto; margin-bottom: 0; } /* ── Editorial footer banner ─────────────────────────────────────────────── */ .mega-footer-banner { background: #753c2b; height: 130px; display: flex; align-items: center; justify-content: center; } .mega-footer-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.25rem 2rem; } .mega-footer-heading { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: #fff; margin: 0 0 0.3rem; line-height: 1.28; } .mega-footer-sub { font-family: var(--font-ui); font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); margin: 0; max-width: 52ch; line-height: 1.55; } /* ── Journal mega menu (redesign) ───────────────────────────────────────── */ /* Top two-column layout: journal intro (left) + featured editorial (right) */ .mjn-top { display: grid; grid-template-columns: 1fr 2.1fr; } /* ── Journal intro (left panel) ────────────────────────────────────────── */ .mjn-intro { padding: 1.75rem clamp(1.25rem, 2.5vw, 2rem); background: #faf7f4; display: flex; flex-direction: column; align-items: flex-start; } .mjn-kicker { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 0.3rem; } .mjn-intro-heading { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.55rem); font-weight: 500; color: var(--text); line-height: 1.25; margin: 0.2rem 0 0; } .mjn-intro-ornament { color: var(--accent-soft); font-size: 0.9rem; margin: 0.6rem 0; } .mjn-intro-desc { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); line-height: 1.65; max-width: 30ch; margin: 0; } /* ── Featured editorial (right panel) ──────────────────────────────────── */ .mjn-hero { position: relative; overflow: hidden; } .mjn-hero-overlay .mjn-kicker { color: var(--footer-gold); } .mjn-hero-heading { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: #fff; margin: 0; line-height: 1.18; max-width: 20ch; text-shadow: 0 1px 6px rgba(0,0,0,0.7); } .mjn-hero-desc { font-family: var(--font-ui); font-size: 0.78rem; color: rgba(255,255,255,0.78); margin: 0.5rem 0 0; line-height: 1.6; max-width: 34ch; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .mjn-readtime { display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-ui); font-size: 0.65rem; color: rgba(255,255,255,0.65); margin: 0.6rem 0 0.85rem; } .mjn-readtime svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; color: rgba(255,255,255,0.5); } .mjn-cta { display: inline-block; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.65); font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0.55rem 1.1rem; width: fit-content; transition: background 140ms ease, border-color 140ms ease; } .mjn-cta:hover { background: rgba(255,255,255,0.12); border-color: #fff; } .mjn-hero-img-wrap { position: absolute; inset: 0; } .mjn-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mjn-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.1) 75%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 1.75rem; } .mjn-hero-overlay .mega-col-rule { background: rgba(255,255,255,0.35); opacity: 1; margin-bottom: 0.55rem; } /* ── Category tiles (image cards row) ────────────────────────────────────── */ .mjn-cat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; padding: 1.25rem clamp(1.25rem, 2.5vw, 2rem) 0; } .mjn-cat-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; text-decoration: none; aspect-ratio: 3 / 2.3; overflow: hidden; border-radius: 4px; padding: 1rem 0.85rem; } .mjn-cat-media { position: absolute; inset: 0; z-index: 0; } .mjn-cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; } .mjn-cat-card:hover .mjn-cat-media img { transform: scale(1.06); } .mjn-cat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 5, 2, 0.82) 0%, rgba(10, 5, 2, 0.4) 55%, rgba(10, 5, 2, 0.12) 100%); z-index: 1; } .mjn-cat-title { position: relative; z-index: 2; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 0.35rem; } .mjn-cat-desc { position: relative; z-index: 2; font-family: var(--font-ui); font-size: 0.68rem; line-height: 1.5; color: rgba(255,255,255,0.8); margin: 0 0 0.55rem; max-width: 20ch; } .mjn-cat-link { position: relative; z-index: 2; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; transition: color 140ms ease; } .mjn-cat-card:hover .mjn-cat-link { color: var(--footer-gold); } /* ── Explore all stories (closing CTA) ───────────────────────────────────── */ .mjn-explore-all { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 1.1rem clamp(1.25rem, 2.5vw, 2rem) 1.4rem; padding: 0.6rem 1rem; border: 1px solid var(--border); border-radius: 2px; background: #fff; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); text-decoration: none; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .mjn-explore-all svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--accent-soft); } .mjn-explore-all:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .mjn-explore-all:hover svg { color: rgba(255,255,255,0.8); } /* ── GIFTING MEGA MENU ──────────────────────────────────────────────────────── */ .mega-inner--gifting { display: block; width: min(1100px, calc(100vw - 4rem)); } .mgft-main { display: grid; grid-template-columns: 210px 1fr 240px 240px; min-height: 300px; border-bottom: 1px solid var(--border); } /* Left brand + features */ .mgft-left { padding: 1.25rem 1.25rem 1.25rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; } .mgft-kicker { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin: 0; } .mgft-heading { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--text); line-height: 1.15; margin: 0; } .mgft-sub { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); line-height: 1.45; margin: 0; } .mgft-features { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; } .mgft-feature { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-ui); font-size: 0.76rem; color: var(--text); line-height: 1.35; } .mgft-feature-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; stroke: var(--accent); margin-top: 0.1rem; } /* Center image */ .mgft-img-wrap { overflow: hidden; } .mgft-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Occasion / Relation columns */ .mgft-col { padding: 1.5rem 1.25rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; } .mgft-col-head { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin: 0 0 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .mgft-list { list-style: none; padding: 0; margin: 0; flex: 1; } .mgft-list-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: color 150ms ease; } .mgft-list-item:hover { color: var(--accent); } .mgft-item-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: var(--accent-soft); transition: color 150ms ease; } .mgft-item-icon svg { width: 1rem; height: 1rem; } .mgft-list-item:hover .mgft-item-icon { color: var(--accent); } .mgft-item-icon--circle { width: 1.6rem; height: 1.6rem; border: 1px solid var(--border); border-radius: 50%; background: #faf7f4; } .mgft-item-text { flex: 1; } .mgft-item-title { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; display: block; line-height: 1.15; } .mgft-item-sub { font-family: var(--font-ui); font-size: 0.67rem; color: var(--muted); display: block; line-height: 1.25; } .mgft-chevron { width: 0.85rem; height: 0.85rem; flex-shrink: 0; stroke: var(--muted); opacity: 0.55; } .mgft-view-all { display: inline-block; margin-top: 0.85rem; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .mgft-view-all:hover { color: var(--text); } /* ── Bottom service bar ──────────────────────────────────────────────────── */ .mgft-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 0.85rem 1.5rem; background: #753c2b; } .mgft-footer-kicker { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(255,255,255,0.65); text-transform: uppercase; white-space: nowrap; margin: 0; } .mgft-services { display: flex; gap: 1.75rem; align-items: center; justify-content: center; } .mgft-service { display: flex; align-items: center; gap: 0.6rem; } .mgft-service-icon { width: 1.4rem; height: 1.4rem; flex-shrink: 0; stroke: rgba(255,255,255,0.75); } .mgft-service-title { font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600; color: #fff; line-height: 1.3; margin: 0; } .mgft-service-sub { font-family: var(--font-ui); font-size: 0.68rem; color: rgba(255,255,255,0.6); margin: 0; } .mgft-whatsapp { padding: 0.7rem 1rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; display: flex; flex-direction: column; gap: 0.2rem; min-width: 210px; text-decoration: none; } .mgft-wa-icons { display: flex; gap: 0.3rem; margin-bottom: 0.1rem; } .mgft-wa-icons svg { width: 1rem; height: 1rem; stroke: rgba(255,255,255,0.6); } .mgft-wa-heading { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: #fff; line-height: 1.35; margin: 0; } .mgft-wa-link { font-family: var(--font-ui); font-size: 0.72rem; color: rgba(255,255,255,0.75); text-decoration: none; font-weight: 500; } .mgft-wa-link:hover { color: #fff; } /* ── ABOUT US MEGA MENU ─────────────────────────────────────────────────────── */ .mega-inner--about { display: block; width: min(988px, calc(100vw - 4rem)); } /* Two-column layout inside the about panel */ .mau-grid { display: grid; grid-template-columns: clamp(18rem, 32.5vw, 30rem) 1fr; } /* Quote strip — block child of .mega-inner--about, full-width naturally */ .mau-quote-strip { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.65rem 2rem; background: #753c2b; } .mau-quote-mark { font-family: var(--font-display); font-size: 2rem; color: rgba(255,255,255,0.55); line-height: 1; flex-shrink: 0; } .mau-quote-mark--open { align-self: flex-start; margin-top: -0.2rem; } .mau-quote-mark--close { align-self: flex-end; margin-bottom: -0.2rem; } .mau-quote-body { text-align: center; } .mau-quote-text { font-family: var(--font-display); font-size: 1rem; font-weight: 500; font-style: normal; color: #fff; line-height: 1.45; margin: 0; } .mau-quote-ornament { display: block; font-size: 0.55rem; letter-spacing: 0.35em; color: rgba(255,255,255,0.45); margin-top: 0.3rem; } /* Left: image hero */ .mau-hero { position: relative; overflow: hidden; } .mau-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mau-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,4,2,0.9) 0%, rgba(12,4,2,0.35) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem; } .mau-hero-heading { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: #fff; line-height: 1.1; margin: 0 0 0.3rem; white-space: nowrap; } .mau-hero-tagline { font-family: var(--font-display); font-size: 1.1rem; font-style: normal; color: var(--footer-gold); line-height: 1.25; margin: 0; white-space: nowrap; } .mau-hero-rule { display: flex; align-items: center; gap: 0.5rem; margin: 0.55rem 0; } .mau-hero-rule-line { flex: 0 0 1.8rem; height: 1px; background: rgba(255,255,255,0.3); } .mau-hero-rule-gem { font-size: 0.55rem; color: rgba(255,255,255,0.45); } .mau-hero-body { font-family: var(--font-ui); font-size: 0.78rem; color: rgba(255,255,255,0.72); line-height: 1.5; margin: 0 0 0.75rem; } .mau-hero-cta { display: inline-block; padding: 0.6rem 1.25rem; background: var(--accent); color: #fff; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 2px; align-self: flex-start; transition: background 200ms ease; } .mau-hero-cta:hover { background: #4f1716; } /* Right panel */ .mau-right { display: flex; flex-direction: column; background: #faf7f4; } .mau-cols { display: grid; grid-template-columns: 1fr 1fr; } .mau-col { padding: 0.65rem 1.1rem; display: flex; flex-direction: column; } .mau-col--right { border-left: 1px solid var(--border); } .mau-col-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .mau-col-icon-wrap { flex-shrink: 0; width: 2rem; height: 2rem; color: var(--accent); } .mau-col-icon-wrap svg { width: 100%; height: 100%; } .mau-col-title { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin: 0.1rem 0 0; } .mau-col-accent-line { display: none; } .mau-col-desc { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); line-height: 1.55; margin: 0 0 0.45rem; } .mau-list { list-style: none; padding: 0; margin: 0; } .mau-list-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.28rem 0; font-family: var(--font-ui); font-size: 0.78rem; color: var(--text); line-height: 1.35; } .mau-item-icon { width: 1rem; height: 1rem; flex-shrink: 0; stroke: var(--accent-soft); } .mau-cta-link { display: inline-block; margin-top: 0.25rem; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none; } .mau-cta-link:hover { color: var(--text); } /* Talk to Us bar — 2-row vertical stack, centered */ .mau-contact { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.4rem 1.25rem; background: #fff; border-top: 1px solid var(--border); text-align: center; } .mau-contact-head { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .mau-contact-head-icon { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } .mau-contact-head-icon svg { width: 1rem; height: 1rem; } .mau-contact-title { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin: 0; } .mau-contact-sub { font-family: var(--font-ui); font-size: 0.7rem; color: var(--muted); margin: 0.05rem 0 0; } .mau-contact-actions { display: flex; align-items: stretch; width: 100%; } .mau-contact-action { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.3rem 1rem; text-decoration: none; font-family: var(--font-ui); font-size: 0.72rem; color: var(--text); white-space: nowrap; transition: background 150ms ease, color 150ms ease; } .mau-contact-action:not(:first-child) { border-left: none; } .mau-contact-action:hover { background: #faf7f4; color: var(--accent); } .mau-action-icon { width: 1.15rem; height: 1.15rem; stroke: var(--accent-soft); } .mau-contact-action:hover .mau-action-icon { stroke: var(--accent); } /* ───────────────────────────────────────────────────────────────────────────── ICON BUTTONS (shared between mobile-topbar and desktop header) ───────────────────────────────────────────────────────────────────────────── */ .icon-button { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: #000; cursor: pointer; transition: opacity 180ms ease; } .icon-button:hover { opacity: 0.6; } .icon-button svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; } .mobile-topbar .icon-button svg { width: 1.5rem; height: 1.5rem; } .mobile-topbar .mobile-menu-button { margin-left: -0.5rem; } .mobile-topbar .mobile-menu-button svg { width: 2.25rem; height: 2.25rem; } /* ───────────────────────────────────────────────────────────────────────────── MOBILE TOPBAR Shown only on mobile (hidden ≥769px). Lives inside .hero-stage so its height is naturally accounted for in the 100dvh flex calculation. Simple justify-content: space-between — no flex-basis math required. ───────────────────────────────────────────────────────────────────────────── */ .mobile-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.98rem 1.6rem; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position: sticky; top: 0; z-index: 30; } .mobile-topbar .mobile-logo-img { height: 2.53rem; width: auto; max-width: clamp(120px, 42vw, 200px); object-fit: contain; max-width: 140px; } @media (min-width: 769px) { .mobile-topbar { display: none; } } /* ───────────────────────────────────────────────────────────────────────────── MOBILE DRAWER ───────────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────────── MOBILE DRAWER (all rules scoped to mobile — drawer is display:none on desktop) ───────────────────────────────────────────────────────────────────────────── */ .mobile-drawer { position: fixed; inset: 0; z-index: 1000; display: none; } .mobile-drawer.open { display: block; } .mobile-drawer.open .drawer-panel { transform: translateX(0); } .drawer-overlay { position: absolute; inset: 0; background: rgba(18, 10, 7, 0.62); } /* ── Main panel (flex column so footer sticks to bottom) ── */ .drawer-panel { width: min(84vw, 320px); max-width: 320px; height: 100%; background: #fff; padding: 0; box-shadow: 18px 0 60px rgba(0,0,0,0.18); transform: translateX(-100%); transition: transform 220ms ease; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Header row: × left · logo centre */ .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem 0.8rem; flex-shrink: 0; } .drawer-close { background: transparent; border: none; color: var(--text); padding: 0.25rem; cursor: pointer; display: flex; align-items: center; } .drawer-close svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; } .drawer-header .drawer-logo { height: 2.2rem; width: auto; max-width: 180px; } .drawer-header-spacer { width: 1.6rem; } /* Main nav */ .drawer-nav { flex-shrink: 0; padding: 0.2rem 1.4rem 0; } .drawer-nav-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); cursor: pointer; } .drawer-nav-icon { color: var(--accent); display: flex; align-items: center; flex-shrink: 0; width: 1.1rem; } .drawer-nav-icon svg { width: 1rem; height: 1rem; stroke-width: 1.6; } .drawer-nav-label { flex: 1; font-family: var(--font-ui); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text); text-transform: uppercase; user-select: none; } .drawer-nav-arrow { color: var(--muted); font-size: 1.2rem; flex-shrink: 0; user-select: none; line-height: 1; } /* Utility links */ .drawer-utility { flex-shrink: 0; padding: 0.6rem 1.4rem 0; } .drawer-utility a { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); } .drawer-utility a:last-child { border-bottom: none; } .drawer-utility svg { width: 0.95rem; height: 0.95rem; stroke-width: 1.6; } /* Footer strip — pushed to bottom via margin-top:auto */ .drawer-footer-strip { margin-top: auto; background: #753c2b; padding: 1.6rem 1.5rem 1.8rem; text-align: center; flex-shrink: 0; } .drawer-footer-strip p { font-family: var(--font-display); font-style: normal; font-size: 0.95rem; color: #fff; line-height: 1.6; margin: 0; } .drawer-footer-ornament { display: block; font-size: 0.5rem; color: rgba(255,255,255,0.4); margin-bottom: 0.5rem; } /* ── Sub-panels base ────────────────────────────────────── */ .drawer-sub-panel { position: absolute; inset: 0; background: #fff; transform: translateX(100%); transition: transform 240ms ease; overflow: hidden; /* body scrolls, not the panel */ z-index: 2; display: flex; flex-direction: column; } .drawer-sub-panel.open { transform: translateX(0); } /* Sub-panel header — always visible at top */ .dsp-header { flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); } .dsp-back, .dsp-cart { background: transparent; border: none; color: var(--text); cursor: pointer; padding: 0.2rem; display: flex; align-items: center; } .dsp-back svg, .dsp-cart svg { width: 1.05rem; height: 1.05rem; stroke-width: 2; } .dsp-title { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; color: var(--text); text-transform: uppercase; } /* Hero image block */ .dsp-hero { position: relative; height: 210px; flex-shrink: 0; overflow: hidden; } .dsp-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .dsp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,8,6,0.80) 0%, rgba(18,8,6,0.25) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem 1.3rem; } .dsp-hero-heading { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; color: #fff; line-height: 1.15; margin: 0 0 0.3rem; } .dsp-hero-sub { font-family: var(--font-ui); font-size: 0.72rem; color: rgba(255,255,255,0.82); line-height: 1.45; margin: 0 0 0.75rem; } .dsp-hero-cta { display: inline-block; background: #fff; color: var(--text); font-family: var(--font-ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 0.5rem 1rem; align-self: flex-start; } /* Scrollable body — only this area scrolls */ .dsp-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Section label */ .dsp-section-label { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; color: var(--accent-soft); text-transform: uppercase; padding: 0.9rem 1.3rem 0.35rem; margin: 0; } /* Icon + title + sub + arrow rows */ .dsp-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.3rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); } .dsp-row-icon { width: 1.7rem; height: 1.7rem; background: rgba(109,43,33,0.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } .dsp-row-icon svg { width: 0.72rem; height: 0.72rem; stroke-width: 1.8; } .dsp-row-text { flex: 1; display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; } .dsp-row-title { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--text); } .dsp-row-sub { font-family: var(--font-ui); font-size: 0.65rem; color: var(--muted); } .dsp-row-arrow { color: var(--muted); font-size: 1rem; flex-shrink: 0; line-height: 1; display: inline-block; transition: transform 220ms ease; } /* Expandable accordion row */ .dsp-row--expandable { cursor: pointer; user-select: none; } .dsp-row--expandable[aria-expanded="true"] .dsp-row-arrow { transform: rotate(90deg); } /* Accordion body — collapsed by default */ .dsp-acc-body { display: none; background: #faf7f4; border-bottom: 1px solid var(--border); } .dsp-acc-body.open { display: block; } /* Individual accordion items */ .dsp-acc-item { display: block; padding: 0.6rem 1.3rem 0.6rem 3.8rem; font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); } .dsp-acc-item:last-of-type { border-bottom: none; } .dsp-acc-item:active { background: rgba(109, 43, 33, 0.06); } /* Collection items with title + subtitle */ .dsp-acc-item--with-sub { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } .dsp-acc-item-title { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--text); } .dsp-acc-item-sub { font-family: var(--font-ui); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; } /* "View all X →" link at bottom of accordion body */ .dsp-acc-viewall { display: block; padding: 0.55rem 1.3rem 0.6rem 3.8rem; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; } .dsp-acc-viewall:active { opacity: 0.7; } /* Flat indent — accordion bodies where there's no row icon to align under */ .dsp-acc-body--flat .dsp-acc-item, .dsp-acc-body--flat .dsp-acc-viewall { padding-left: 1.5rem; } .dsp-acc-viewall--flat { padding-left: 1.5rem; } /* Section-header accordion toggle (used in GIFTING) */ .dsp-section-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.3rem; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border); } .dsp-section-toggle-label { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft); } .dsp-section-toggle[aria-expanded="true"] .dsp-row-arrow { transform: rotate(90deg); } /* About-block accordion toggle (used in ABOUT sub-panel) */ .dsp-about-toggle { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.3rem; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border); } .dsp-about-toggle .dsp-about-icon { margin: 0; } .dsp-about-toggle .dsp-about-title { flex: 1; margin: 0; } .dsp-about-toggle[aria-expanded="true"] .dsp-row-arrow { transform: rotate(90deg); } /* About accordion body content */ .dsp-about-body-desc { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); line-height: 1.55; padding: 0.7rem 1.3rem; border-bottom: 1px solid var(--border); margin: 0; } .dsp-about-points { list-style: none; margin: 0; padding: 0; } .dsp-about-points li { font-family: var(--font-ui); font-size: 0.82rem; color: var(--text); padding: 0.5rem 1.3rem 0.5rem 2.4rem; border-bottom: 1px solid var(--border); position: relative; } .dsp-about-points li::before { content: "◆"; color: var(--accent-soft); font-size: 0.38rem; position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); } /* Budget tiles — 4 column single row */ .dsp-budget-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; padding: 0.4rem 1.3rem 0.9rem; } .dsp-budget-tag { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem 0.15rem; font-family: var(--font-ui); font-size: 0.58rem; font-weight: 500; color: var(--text); text-decoration: none; border: 1px solid var(--border); line-height: 1.35; } /* Colour swatches */ .dsp-colour-row { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.4rem 1.3rem 1rem; } .dsp-colour-swatch { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0; } /* Gifting service bar */ .dsp-service-bar { display: flex; justify-content: space-around; padding: 1rem 0.5rem; border-top: 1px solid var(--border); margin-top: 0.5rem; } .dsp-service-item { display: flex; flex-direction: column; align-items: center; gap: 0.28rem; text-align: center; } .dsp-service-item svg { width: 1.15rem; height: 1.15rem; color: var(--accent); stroke-width: 1.5; } .dsp-service-item span { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 600; color: var(--text); line-height: 1.3; max-width: 4.5rem; } /* WhatsApp CTA */ .dsp-whatsapp-bar { display: flex; align-items: center; gap: 0.8rem; background: #753c2b; padding: 1rem 1.3rem; text-decoration: none; flex-shrink: 0; } .dsp-whatsapp-bar svg { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; color: #fff; flex-shrink: 0; } .dsp-whatsapp-bar span { font-family: var(--font-ui); font-size: 0.7rem; color: rgba(255,255,255,0.88); line-height: 1.5; } .dsp-whatsapp-bar strong { font-weight: 700; color: #fff; } /* Journal featured article */ .dsp-featured { position: relative; height: 210px; flex-shrink: 0; overflow: hidden; } .dsp-featured-img { width: 100%; height: 100%; object-fit: cover; } .dsp-featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,8,6,0.88) 0%, rgba(18,8,6,0.35) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem 1.3rem; } .dsp-featured-kicker { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; color: var(--accent-soft); text-transform: uppercase; margin-bottom: 0.25rem; } .dsp-featured-heading { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: #fff; line-height: 1.2; margin: 0 0 0.35rem; } .dsp-featured-sub { font-family: var(--font-ui); font-size: 0.66rem; color: rgba(255,255,255,0.72); line-height: 1.4; margin: 0 0 0.5rem; } .dsp-featured-read { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.9); text-decoration: none; } .dsp-featured-read svg { width: 0.75rem; height: 0.75rem; stroke-width: 2; } /* Explore All Stories button */ .dsp-explore-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.9rem 1.3rem 0.4rem; padding: 0.7rem 1rem; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text); text-decoration: none; text-transform: uppercase; border: 1px solid var(--text); } .dsp-explore-btn svg { width: 0.85rem; height: 0.85rem; stroke-width: 2; } /* About info blocks */ .dsp-about-block { display: flex; gap: 0.85rem; padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--border); } .dsp-about-icon { width: 2rem; height: 2rem; background: rgba(109,43,33,0.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } .dsp-about-icon svg { width: 0.85rem; height: 0.85rem; stroke-width: 1.7; } .dsp-about-title { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.15em; color: var(--accent-soft); text-transform: uppercase; margin: 0 0 0.25rem; } .dsp-about-text { font-family: var(--font-ui); font-size: 0.72rem; color: var(--muted); line-height: 1.55; margin: 0; } /* Contact icons row */ .dsp-contact-row { display: flex; justify-content: space-around; padding: 1.1rem 0.5rem; } .dsp-contact-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--text); } .dsp-contact-item svg { width: 1.3rem; height: 1.3rem; stroke-width: 1.5; color: var(--accent); } .dsp-contact-item span { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; color: var(--muted); text-align: center; max-width: 4rem; line-height: 1.3; } /* Sub-panel footer strip — always visible at bottom */ .dsp-footer { background: #753c2b; padding: 1.5rem 1.5rem 1.8rem; text-align: center; flex-shrink: 0; } .dsp-footer p { font-family: var(--font-display); font-style: normal; font-size: 1rem; color: #fff; line-height: 1.55; margin: 0; } .dsp-footer .dsp-footer-sub { font-family: var(--font-ui); font-style: normal; font-size: 0.68rem; color: rgba(255,255,255,0.7); margin-top: 0.25rem; } .dsp-footer-ornament { display: block; font-size: 0.5rem; color: rgba(255,255,255,0.35); margin-top: 0.75rem; } /* ───────────────────────────────────────────────────────────────────────────── HERO STAGE Direct body child — no padded ancestor, naturally full viewport width. No width:100vw or margin-left calc needed anywhere inside it. Mobile: flex-column, min 100dvh tall. mobile-topbar is flex-shrink:0 (sticky at top). hero-banner is flex:1 1 auto (fills all remaining height). Desktop: block, auto height — hero-banner uses aspect-ratio instead. ───────────────────────────────────────────────────────────────────────────── */ .hero-stage { display: block; } /* ───────────────────────────────────────────────────────────────────────────── HERO BANNER ───────────────────────────────────────────────────────────────────────────── */ .hero-banner { position: relative; min-block-size: calc(100dvh - 4rem - var(--mobile-nav-height)); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; background: radial-gradient(circle at top left, rgba(50,18,15,0.88) 0%, rgba(23,9,7,0.95) 40%, rgba(17,7,6,0.98) 100%); padding-block-start: max(1.5rem, env(safe-area-inset-top)); padding-block-end: max(1.5rem, env(safe-area-inset-bottom)); padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right)); gap: 1rem; } .hero-banner-background { position: absolute; inset: 0; z-index: 0; } .hero-banner-background picture { display: block; width: 100%; height: 100%; } .hero-banner-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.42)); z-index: 1; } /* ── Hero Slider ─────────────────────────────────────────────────────────── */ .hero-slider-track { position: absolute; inset: 0; z-index: 0; background: #120806; } @keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } .hero-slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; z-index: 1; } .hero-slide picture { display: block; width: 100%; height: 100%; } .hero-slide.active { opacity: 1; z-index: 2; transition: opacity 1.52s 0.68s ease-in; } .hero-slide.active .hero-banner-photo { animation-name: hero-zoom; animation-duration: 11.7s; animation-delay: 3s; animation-timing-function: ease-out; animation-fill-mode: both; will-change: transform; } .hero-slide.leaving .hero-banner-photo { animation-name: hero-zoom; animation-duration: 11.7s; animation-delay: 0s; animation-timing-function: ease-out; animation-fill-mode: forwards; will-change: transform; } .hero-slide.leaving { opacity: 0; z-index: 3; transition: opacity 0.85s ease-out; } .hero-container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; gap: 0.5rem; } .hero-label { font-size: clamp(0.65rem, 2vw, 0.85rem); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.65); line-height: 1; margin: 0; } .hero-copy { position: relative; width: 100%; color: #fff; z-index: 1; margin: 0; padding: 0; } .hero-copy h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; color: #fff; word-break: break-word; overflow-wrap: break-word; } .hero-subtitle { margin-block-start: clamp(0.6rem, 2vh, 1rem); letter-spacing: 0.06em; color: rgba(255,255,255,0.74); font-size: clamp(0.85rem, 2.5vw, 1rem); line-height: 1.5; width: 100%; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.6rem, 2vw, 1.2rem); margin-block-start: clamp(1rem, 3vh, 1.6rem); } @media (min-width: 769px) { .hero-banner { flex: none; min-block-size: calc(100vh - var(--header-height)); aspect-ratio: auto; padding-block-start: 0; padding-block-end: clamp(2.5rem, 5vh, 4rem); padding-inline-start: clamp(1.25rem, 4vw, 4rem); padding-inline-end: clamp(2rem, 8vw, 8rem); } /* hero slider dots — move above bottom nav offset not needed on desktop */ .hero-slider-dots { bottom: 2rem; } /* hero-banner-background: responsive image handled via