/* ============================================================= LOMATAN — main stylesheet Ported from lomatan-website.html, extended for the WP theme. Tokens, type, components, sections, and responsive rules. ============================================================= */ /* ---------- self-hosted fonts (place WOFF2 files under /fonts/) ---------- */ /* If /fonts/ is empty we fall back to a system serif/sans-serif stack — the site stays usable while assets are added. */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 600; font-display: swap; src: local('Bodoni Moda'), url('../../fonts/BodoniModa-VariableFont_opsz,wght.woff2') format('woff2-variations'); } @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 600; font-display: swap; src: local('Bodoni Moda Italic'), url('../../fonts/BodoniModa-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 200 600; font-display: swap; src: local('Jost'), url('../../fonts/Jost-VariableFont_wght.woff2') format('woff2-variations'); } /* ---------- tokens ---------- */ :root, [data-theme="dark"] { --bg: #0b0908; --bg-2: #100c09; --bg-3: #15100b; --ink: #f3ebda; --ink-soft: #b6a98f; --ink-dim: #7d7361; --gold: #c9a253; --gold-bright: #e7cd92; --gold-deep: #9c7530; --wine: #7c2b38; --line: rgba(201, 162, 83, 0.20); --line-soft: rgba(243, 235, 218, 0.10); /* Theme-specific compositions used in overlays + gradients */ --bg-rgb: 11, 9, 8; --nav-bg: rgba(9, 7, 6, 0.93); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35); --photo-overlay: linear-gradient(180deg, rgba(11, 9, 8, 0.65) 0%, rgba(11, 9, 8, 0.3) 40%, rgba(11, 9, 8, 0.9) 100%); } /* ---------- light theme ---------- * Cream / espresso / deeper gold. Triggered by setting * via the toggle button + inline head script. */ [data-theme="light"] { --bg: #fbf6ea; --bg-2: #f4ecd9; --bg-3: #ece2c9; --ink: #2b1a0f; --ink-soft: #5a4226; --ink-dim: #8a7460; --gold: #9c7530; /* darker for AA contrast on cream */ --gold-bright: #c9a253; --gold-deep: #6b4f1f; --wine: #7c2b38; --line: rgba(156, 117, 48, 0.30); --line-soft: rgba(43, 26, 15, 0.10); --bg-rgb: 251, 246, 234; --nav-bg: rgba(251, 246, 234, 0.94); --card-shadow: 0 22px 56px rgba(43, 26, 15, 0.16), 0 4px 12px rgba(43, 26, 15, 0.10); --photo-overlay: linear-gradient(180deg, rgba(251, 246, 234, 0.45) 0%, rgba(251, 246, 234, 0.2) 40%, rgba(251, 246, 234, 0.85) 100%); } /* Smooth swap when toggling */ html, body { transition: background-color 0.4s ease, color 0.4s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; /* Prevent any layout breaking horizontal overflow on phones. */ overflow-x: hidden; } body { overflow-x: hidden; } body { background: var(--bg); color: var(--ink); font-family: 'Jost', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.78; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.locked { overflow: hidden; height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* skip link */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text.skip-link:focus { clip: auto !important; height: auto; width: auto; background: var(--bg-2); color: var(--gold); padding: 0.8rem 1.2rem; left: 1rem; top: 1rem; z-index: 9999; outline: 1px solid var(--gold); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; } /* grain texture */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- shared ---------- */ .wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); } .eyebrow { font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); font-weight: 400; display: inline-block; } .eyebrow.dim { color: var(--ink-dim); } h1, h2, h3, h4 { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-weight: 400; line-height: 1.08; } h2 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); letter-spacing: 0.005em; } h3 { font-size: clamp(1.9rem, 4vw, 2.9rem); } p { font-size: clamp(1rem, 1.05vw, 1.08rem); color: var(--ink-soft); } .lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink); } section { position: relative; } /* Default section padding — generous but not excessive. */ .pad { padding: clamp(3.5rem, 8vw, 6.5rem) 0; } /* On the homepage, where sections sit back-to-back, halve the inner edges * so they read as one continuous narrative instead of a stack of islands. */ .home .intro.pad { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.2rem); } .home .collection.pad { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); } .home .story.pad { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); } .home .trade.pad { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); } /* Section headers — slightly tighter top margin on home so the "THE COLLECTION * / Five Expressions" heading lifts closer to the previous section. */ .home .sec-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .rule { width: 54px; height: 1px; background: var(--gold); margin: 1.6rem 0; } .rule.center { margin-left: auto; margin-right: auto; } .diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); margin: 1.5rem auto; } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2.2rem; border: 1px solid var(--gold); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 400; cursor: pointer; background: none; transition: background 0.45s ease, color 0.45s ease; font-family: 'Jost', sans-serif; } .btn:hover, .btn:focus-visible { background: var(--gold); color: var(--bg); outline: none; } .btn:focus-visible { box-shadow: 0 0 0 3px rgba(201, 162, 83, 0.35); } .btn-solid { background: var(--gold); color: var(--bg); } .btn-solid:hover, .btn-solid:focus-visible { background: transparent; color: var(--gold); } /* reveal */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in { opacity: 1; transform: none; } /* ---------- nav ---------- */ nav#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem clamp(1.25rem, 5vw, 4rem); /* Sticky from first paint — subtle dark wash with blur, even at the top * of the page. Becomes more opaque when the user scrolls past 60px. */ background: rgba(11, 9, 8, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease; } nav#nav.scrolled { background: rgba(9, 7, 6, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 0.85rem clamp(1.25rem, 5vw, 4rem); border-bottom: 1px solid var(--line); } .brand-link { display: inline-flex; align-items: center; } .brand { font-family: 'Bodoni Moda', serif; font-size: 1.18rem; letter-spacing: 0.42em; padding-left: 0.42em; color: var(--ink); } /* Custom logo (Site Identity → upload). Renders inside .brand-link.site-logo */ .site-logo .custom-logo-link { display: inline-flex; align-items: center; } .site-logo img, .site-logo .custom-logo { max-height: 48px; width: auto; height: auto; display: block; filter: drop-shadow(0 1px 12px rgba(201, 162, 83, 0.18)); transition: max-height 0.5s ease, filter 0.5s ease; } nav#nav.scrolled .site-logo img, nav#nav.scrolled .site-logo .custom-logo { max-height: 40px; } @media (max-width: 480px) { .site-logo img, .site-logo .custom-logo { max-height: 40px; } } /* Footer + age-gate logos */ .f-logo img { max-height: 96px; width: auto; margin: 0 auto 0.6rem; display: block; filter: drop-shadow(0 2px 22px rgba(201, 162, 83, 0.22)); } .gate-logo img { max-height: 130px; width: auto; margin: 0 auto 1rem; display: block; filter: drop-shadow(0 2px 22px rgba(201, 162, 83, 0.22)); } .nav-links { display: flex; gap: 2.6rem; align-items: center; } .nav-links a { font-size: 0.69rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 0.3rem 0; transition: color 0.3s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.4s ease; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--gold); outline: none; } .nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; } .nav-cta { border: 1px solid var(--line); padding: 0.6rem 1.3rem !important; } .nav-cta:hover, .nav-cta:focus-visible { border-color: var(--gold); } .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; z-index: 210; } .burger span { width: 26px; height: 1.5px; background: var(--ink); transition: 0.35s; } .burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* overlay menu */ .overlay { position: fixed; inset: 0; z-index: 205; background: rgba(8, 6, 5, 0.99); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .overlay.open { opacity: 1; pointer-events: auto; } .overlay a { font-family: 'Bodoni Moda', serif; font-size: clamp(2rem, 8vw, 3.2rem); color: var(--ink-soft); transition: color 0.3s; letter-spacing: 0.02em; } .overlay a:hover, .overlay a:focus-visible { color: var(--gold); outline: none; } .overlay .eyebrow { margin-bottom: 1.2rem; } /* ---------- hero ---------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8rem 1.5rem 5rem; position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform-origin: center center; animation: kenBurns 28s ease-in-out infinite alternate; } @keyframes kenBurns { 0% { transform: scale(1.06) translate3d(0, 0, 0); } 50% { transform: scale(1.14) translate3d(-1.2%, 1.4%, 0); } 100% { transform: scale(1.18) translate3d(1.6%, -1.0%, 0); } } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(11, 9, 8, 0.55) 62%, rgba(11, 9, 8, 0.95) 100%), linear-gradient(180deg, rgba(9, 7, 6, 0.92) 0%, rgba(11, 9, 8, 0.3) 26%, rgba(11, 9, 8, 0.35) 60%, rgba(11, 9, 8, 0.98) 100%); } .hero-inner { max-width: 880px; } .hero .eyebrow { opacity: 0; animation: rise 1.1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero h1 { font-size: clamp(3.4rem, 14vw, 9.4rem); font-weight: 500; letter-spacing: 0.14em; margin: 0.5rem 0 0.2rem; padding-left: 0.14em; background: linear-gradient(176deg, #f6e6b6 4%, #e0c179 38%, #c9a253 62%, #8a6627 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 24px rgba(201, 162, 83, 0.18)); opacity: 0; animation: rise 1.2s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero .sub { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(1.05rem, 2.3vw, 1.55rem); color: var(--ink); letter-spacing: 0.02em; opacity: 0; animation: rise 1.1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero .hairline { width: 78px; height: 1px; background: var(--gold); margin: 1.6rem auto; opacity: 0; animation: grow 1s 0.55s ease forwards; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; opacity: 0; animation: rise 1.1s 0.68s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .scroll-cue { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; opacity: 0; animation: rise 1s 1s ease forwards; z-index: 2; transition: color 0.3s ease; } .scroll-cue:hover, .scroll-cue:focus-visible { color: var(--gold); outline: none; } .scroll-cue .sc-label { padding-bottom: 0.2rem; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .scroll-cue:hover .sc-label, .scroll-cue:focus-visible .sc-label { border-color: var(--gold); } .scroll-cue::after { content: ""; width: 1px; height: 52px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s ease-in-out infinite; } @keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes grow { from { width: 0; opacity: 0; } to { width: 78px; opacity: 1; } } @keyframes cue { 0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } /* ============================================================= Hero — cinematic full-bleed layers ============================================================= */ /* Hero inner content sits above all the decorative layers. */ .hero .hero-inner { position: relative; z-index: 2; } /* ============================================================= CATALOGUE COVER HERO — page 1 style Golden molten swirl background, LOMATAN wordmark, Riviera badge. ============================================================= */ .hero--cover { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; position: relative; overflow: hidden; background: var(--bg); } .hero--cover .hero-bg-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; filter: saturate(1.15) contrast(1.05); animation: kenBurns 28s ease-in-out infinite alternate; } /* The golden swirl — three blurred radial layers in motion */ .hero--cover .hero-swirl { position: absolute; inset: -10%; z-index: 1; pointer-events: none; overflow: hidden; } .hero--cover .hero-swirl > div { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; opacity: 0.32; } .hero--cover .swirl-a { width: 70%; height: 70%; top: -10%; left: -10%; background: radial-gradient(circle, #e7cd92 0%, #c9a253 30%, #7a5618 60%, transparent 75%); animation: swirlA 22s ease-in-out infinite alternate; } .hero--cover .swirl-b { width: 65%; height: 65%; bottom: -15%; right: -10%; background: radial-gradient(circle, #e7cd92 0%, #9c7530 40%, #4a3008 70%, transparent 80%); animation: swirlB 26s ease-in-out infinite alternate; } .hero--cover .swirl-c { width: 55%; height: 55%; top: 30%; left: 30%; background: radial-gradient(circle, rgba(231,205,146,0.6) 0%, rgba(201,162,83,0.3) 40%, transparent 70%); animation: swirlC 18s ease-in-out infinite alternate; } @keyframes swirlA { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(12%, 8%) rotate(40deg); } } @keyframes swirlB { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-10%, -8%) rotate(-30deg); } } @keyframes swirlC { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } 50% { transform: translate(-45%, -55%) scale(1.15); opacity: 0.9; } } .hero--cover .swirl-grain { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.08; background: repeating-linear-gradient(135deg, transparent 0, transparent 2px, rgba(0,0,0,0.4) 2px, rgba(0,0,0,0.4) 4px), radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%); } /* Soft vignette — keeps the centre bright enough for the wordmark to read, * darkens only the edges so the photo still reads clearly. */ .hero--cover::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 0%, rgba(11,9,8,0.18) 65%, rgba(11,9,8,0.55) 100%); pointer-events: none; } /* Subtle behind-wordmark glow — keeps the LOMATAN type legible against any * photo by tinting just the centre area, without darkening everything. */ .hero--cover .hero-cover::before { content: ""; position: absolute; inset: -10% -20%; z-index: -1; background: radial-gradient(ellipse at center, rgba(11,9,8,0.55) 0%, rgba(11,9,8,0) 60%); filter: blur(20px); pointer-events: none; } .hero--cover .hero-cover { position: relative; isolation: isolate; } /* Riviera Limited circular badge — top-right */ .hero-corner { position: absolute; top: clamp(5.5rem, 8vh, 7rem); right: clamp(1.2rem, 4vw, 3rem); z-index: 4; } .riviera-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(72px, 8vw, 92px); height: clamp(72px, 8vw, 92px); border-radius: 50%; background: linear-gradient(180deg, #fefefe 0%, #f5f0e6 100%); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); gap: 0.15rem; padding: 0.4rem; } .riviera-badge .rb-mark { font-family: 'Bodoni Moda', serif; font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2rem); color: #c5232f; line-height: 1; margin-bottom: 0.05rem; } .riviera-badge .rb-name { font-family: 'Jost', sans-serif; font-size: clamp(0.46rem, 0.7vw, 0.55rem); letter-spacing: 0.16em; text-transform: uppercase; color: #2b1a0f; line-height: 1.1; text-align: center; } /* The big wordmark + base label */ .hero-cover { position: relative; z-index: 3; padding: 0 1.5rem; max-width: 1200px; margin: 0 auto; } .hero-wordmark { font-family: 'Bodoni Moda', serif; font-weight: 500; font-size: clamp(3rem, 18vw, 12rem); letter-spacing: clamp(0.04em, 1vw, 0.12em); line-height: 1; color: transparent; background: linear-gradient(176deg, #fff4d3 0%, #f0d693 22%, #e1bb6b 42%, #c9a253 60%, #8a6627 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 4px 60px rgba(231, 205, 146, 0.18); filter: drop-shadow(0 2px 30px rgba(201, 162, 83, 0.25)); margin: 0; opacity: 0; animation: rise 1.4s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-base { margin-top: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; opacity: 0; animation: rise 1.2s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-base .hb-name { font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(0.85rem, 1.2vw, 1.05rem); letter-spacing: clamp(0.25em, 0.6vw, 0.4em); text-transform: uppercase; color: #f3ebda; } .hero-base .hb-kind { font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(0.62rem, 0.85vw, 0.78rem); letter-spacing: clamp(0.32em, 0.8vw, 0.5em); text-transform: uppercase; color: var(--gold-bright); } /* Hide everything that was specific to other hero variants */ .hero--cover .hero-rail, .hero--cover .hero-slides, .hero--cover .hero-watermark, .hero--cover .hero-inner { display: none !important; } /* ============================================================= Cover hero — mobile-first tightening Shorter on phones (no full-screen takeover), wordmark sized for thumbs. ============================================================= */ /* Tablet portrait + small landscape phones */ @media (max-width: 900px) { .hero--cover { min-height: 78svh; } .hero-wordmark { font-size: clamp(2.6rem, 16vw, 6.5rem); letter-spacing: 0.05em; } } /* Standard phones — the main mobile experience */ @media (max-width: 720px) { .hero--cover { min-height: 68svh; padding: 0 1rem; } .hero-corner { top: clamp(4.5rem, 9vh, 5.5rem); right: 0.9rem; } .riviera-badge { width: 58px; height: 58px; padding: 0.3rem; gap: 0.05rem; } .riviera-badge .rb-mark { font-size: 1.35rem; } .riviera-badge .rb-name { font-size: 0.42rem; letter-spacing: 0.14em; } .hero-wordmark { font-size: clamp(2.4rem, 16vw, 4.4rem); letter-spacing: 0.04em; line-height: 0.95; } .hero-base { margin-top: 1.1rem; gap: 0.2rem; } .hero-base .hb-name { font-size: 0.75rem; letter-spacing: 0.28em; } .hero-base .hb-kind { font-size: 0.58rem; letter-spacing: 0.32em; } .hero--cover .scroll-cue { bottom: 1.2rem; font-size: 0.55rem; } .hero--cover .scroll-cue::after { height: 32px; } .hero--cover::before { background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(11,9,8,0.6) 70%, rgba(11,9,8,0.9) 100%); } } /* Compact phones (≤400px) — extra trim */ @media (max-width: 400px) { .hero--cover { min-height: 62svh; } .hero-wordmark { font-size: clamp(2rem, 15vw, 3.4rem); } .riviera-badge { width: 50px; height: 50px; } .riviera-badge .rb-mark { font-size: 1.15rem; } .riviera-badge .rb-name { font-size: 0.38rem; } } /* Landscape phones — keep proportions but never let the hero exceed viewport */ @media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) { .hero--cover { min-height: 100svh; } .hero-wordmark { font-size: clamp(2rem, 8vw, 3rem); } .hero-corner { top: 4.5rem; } .hero--cover .scroll-cue { display: none; } } /* ============================================================= WELCOME INTERLUDE — page 2 style Dark photo + eagle crest watermark + centered WELCOME serif ============================================================= */ .welcome-interlude { position: relative; min-height: clamp(56vh, 75vh, 90vh); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--bg); padding: 4rem 1.5rem 5rem; } .welcome-interlude .welcome-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.55); } .welcome-interlude .welcome-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,9,8,0.65) 0%, rgba(11,9,8,0.3) 40%, rgba(11,9,8,0.9) 100%), radial-gradient(ellipse at center, transparent 0%, rgba(11,9,8,0.55) 80%); pointer-events: none; } .welcome-interlude .welcome-crest { position: absolute; top: clamp(2rem, 5vw, 3.5rem); right: clamp(1.2rem, 4vw, 3rem); z-index: 3; width: clamp(68px, 8vw, 96px); opacity: 0.85; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55)); } .welcome-interlude .welcome-crest img { width: 100%; height: auto; display: block; } .welcome-interlude .welcome-inner { position: relative; z-index: 2; text-align: center; max-width: 720px; } .welcome-interlude .welcome-heading { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: clamp(2.6rem, 8vw, 5.4rem); letter-spacing: clamp(0.1em, 0.6vw, 0.22em); text-transform: uppercase; color: var(--gold-bright); margin: 0; background: linear-gradient(176deg, #fff4d3 0%, #e1bb6b 40%, #c9a253 70%, #8a6627 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 22px rgba(201,162,83,0.25)); } .welcome-interlude .welcome-rule { display: block; width: 60px; height: 1px; background: var(--gold); margin: 1.4rem auto 1.2rem; } .welcome-interlude .welcome-sub { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(0.95rem, 1.4vw, 1.2rem); color: var(--ink-soft); max-width: 520px; margin: 0 auto; } @media (max-width: 900px) { .welcome-interlude { min-height: 55vh; } } @media (max-width: 720px) { .welcome-interlude { min-height: 48svh; padding: 2.5rem 1rem 3.2rem; } .welcome-interlude .welcome-crest { width: 52px; top: 1.4rem; right: 0.9rem; } .welcome-interlude .welcome-heading { font-size: clamp(2rem, 9vw, 3.4rem); letter-spacing: 0.1em; } .welcome-interlude .welcome-rule { margin: 1rem auto 0.9rem; width: 44px; } .welcome-interlude .welcome-sub { font-size: 0.95rem; max-width: 28ch; } } @media (max-width: 400px) { .welcome-interlude { min-height: 44svh; padding: 2.2rem 0.9rem 2.8rem; } .welcome-interlude .welcome-heading { font-size: clamp(1.8rem, 10vw, 2.6rem); } } /* ============================================================= PROLOGUE — page 3 style (cream/light editorial spread) ============================================================= */ .prologue { position: relative; background: linear-gradient(180deg, #f8f1e1 0%, #efe6d0 100%); color: #2b1a0f; padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 7rem); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .prologue::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(201, 162, 83, 0.10), transparent 40%), radial-gradient(circle at 100% 100%, rgba(201, 162, 83, 0.08), transparent 40%); pointer-events: none; } .prologue .prologue-crest { position: absolute; top: 18%; right: -2%; z-index: 0; width: clamp(180px, 28vw, 360px); opacity: 0.08; pointer-events: none; filter: sepia(0.4) saturate(0.6); } .prologue .prologue-crest img { width: 100%; height: auto; } .prologue .wrap { position: relative; z-index: 1; } .prologue-header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .prologue-flourish { display: block; font-family: 'Bodoni Moda', serif; font-size: 1.6rem; color: #9c7530; letter-spacing: 0.5em; margin-bottom: 0.6rem; } .prologue-flourish::before { content: "—— "; letter-spacing: 0.05em; color: #9c7530; } .prologue-flourish::after { content: " ——"; letter-spacing: 0.05em; color: #9c7530; } .prologue-title { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.3em; text-transform: uppercase; color: #2b1a0f; margin: 0; line-height: 1.1; } .prologue-sub { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(1rem, 1.4vw, 1.2rem); color: #5a4226; margin-top: 0.6rem; } .prologue-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; max-width: 1100px; margin: 0 auto; } .prologue-body { font-family: 'Jost', sans-serif; font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.85; color: #3a2614; column-count: 1; } .prologue-body p { margin-bottom: 1.2rem; color: #3a2614; } .prologue-body p:last-of-type { margin-bottom: 0; } .prologue-body .dropcap { font-family: 'Bodoni Moda', serif; font-size: 3.4rem; float: left; line-height: 0.9; margin: 0.2rem 0.7rem -0.2rem 0; color: #9c7530; font-weight: 500; } .prologue-signature { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: #5a4226; margin-top: 1.6rem !important; letter-spacing: 0.02em; } .prologue-portrait { margin: 0; position: sticky; top: 6rem; } .prologue-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; box-shadow: 0 24px 48px rgba(43, 26, 15, 0.18), 0 4px 12px rgba(43, 26, 15, 0.12); border: 1px solid rgba(201, 162, 83, 0.4); } .prologue-portrait figcaption { display: block; margin-top: 0.8rem; font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 0.95rem; color: #5a4226; text-align: center; letter-spacing: 0.04em; } /* Two-column body text on wider screens for that catalogue feel */ @media (min-width: 980px) { .prologue-body { column-count: 1; } } /* Mobile — portrait stacks above text */ @media (max-width: 860px) { .prologue-grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } .prologue-portrait { position: static; max-width: 320px; margin: 0 auto; order: -1; /* portrait first on mobile */ } } @media (max-width: 720px) { .prologue-title { letter-spacing: 0.18em; font-size: clamp(1.8rem, 8vw, 2.4rem); } .prologue-body { font-size: 0.98rem; line-height: 1.75; } .prologue-body .dropcap { font-size: 2.6rem; } } /* ============================================================= EDITORIAL HERO — 2-column with featured product card Class .hero--editorial overrides the centered hero defaults. ============================================================= */ .hero--editorial { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: left; padding: 7rem 1.5rem 5rem; position: relative; overflow: hidden; } .hero--editorial .hero-grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero--editorial .hero-text { max-width: 640px; } /* Eyebrow — small uppercase line above the headline */ .hero--editorial .eyebrow { display: inline-block; font-size: 0.7rem; letter-spacing: 0.34em; margin-bottom: 1.4rem; color: var(--gold); opacity: 0; animation: rise 1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Big editorial serif headline — uppercase, soft cream */ .hero--editorial .hero-headline { font-family: 'Bodoni Moda', serif; font-weight: 500; font-size: clamp(2.4rem, 6.5vw, 5.2rem); line-height: 1.04; letter-spacing: 0.005em; color: var(--ink); text-transform: uppercase; margin: 0; max-width: 14ch; opacity: 0; animation: rise 1.1s 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Override the original .hero h1 gold-gradient styles cleanly */ background: none; -webkit-background-clip: initial; background-clip: initial; filter: none; } .hero--editorial .hero-sub { font-family: 'Jost', sans-serif; font-size: clamp(0.96rem, 1.15vw, 1.1rem); line-height: 1.55; color: var(--ink-soft); letter-spacing: 0.04em; margin-top: 1.6rem; max-width: 460px; opacity: 0; animation: rise 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero--editorial .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; opacity: 0; animation: rise 1s 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* ---------- Featured spirit card (right column) ---------- */ .hero-feature { max-width: 460px; width: 100%; margin-left: auto; background: var(--bg-3); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35); overflow: hidden; transform: translateY(20px); opacity: 0; animation: rise 1.2s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-feature .hf-image { display: flex; align-items: center; justify-content: center; padding: 2rem 1.6rem 1.4rem; background: linear-gradient(180deg, #f7efe0 0%, #e6dbc4 100%); aspect-ratio: 1 / 1.05; overflow: hidden; position: relative; } .hero-feature .hf-image::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 95%, rgba(0,0,0,0.18), transparent 60%); pointer-events: none; } .hero-feature .hf-image img, .hero-feature .hf-image .p-media-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 1; } .hero-feature:hover .hf-image img { transform: scale(1.04); } .hero-feature .hf-meta { padding: 1.3rem 1.6rem 1.6rem; } .hero-feature .hf-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); } .hero-feature .hf-label strong { color: var(--gold); font-weight: 400; } .hero-feature .hf-origin { color: var(--ink-dim); } .hero-feature .hf-title { font-family: 'Bodoni Moda', serif; font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: var(--ink); margin: 0.5rem 0 0.6rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; } .hero-feature .hf-desc { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 1rem; } .hero-feature .hf-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); transition: color 0.3s, border-color 0.3s, gap 0.3s; } .hero-feature .hf-cta:hover, .hero-feature .hf-cta:focus-visible { color: var(--gold-bright); border-color: var(--gold); outline: none; gap: 0.8rem; } /* Watermark — push lower opacity so it doesn't compete with the headline, * and shift slightly to the left so it sits behind the text column. */ .hero--editorial .hero-watermark { z-index: 0; } .hero--editorial .hero-watermark img { width: clamp(280px, 50vh, 560px); opacity: 0.07; } /* Hide decorative carry-overs that don't suit the editorial layout. */ .hero--editorial .hero-rail, .hero--editorial .hero-slides { display: none; } /* Responsive */ @media (max-width: 980px) { .hero--editorial .hero-grid { grid-template-columns: 1fr; gap: clamp(2.4rem, 6vw, 4rem); max-width: 540px; margin: 0 auto; } .hero--editorial .hero-text { max-width: 100%; text-align: center; margin: 0 auto; } .hero--editorial .hero-headline { max-width: none; } .hero--editorial .hero-sub { margin-left: auto; margin-right: auto; } .hero--editorial .hero-actions { justify-content: center; } .hero-feature { margin: 0 auto; max-width: 420px; } } @media (max-width: 900px) { .hero--editorial { min-height: 78svh; } } @media (max-width: 720px) { .hero--editorial { padding: 6rem 1rem 3.5rem; min-height: 70svh; } .hero--editorial .hero-headline { font-size: clamp(2rem, 11vw, 3.2rem); letter-spacing: 0.005em; } .hero--editorial .hero-sub { font-size: 0.95rem; max-width: 28ch; } .hero--editorial .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; margin: 1.8rem auto 0; } .hero--editorial .hero-actions .btn { width: 100%; justify-content: center; } .hero-feature { max-width: 360px; } .hero-feature .hf-image { aspect-ratio: 1 / 1; padding: 1.4rem 1.2rem 1rem; } .hero-feature .hf-meta { padding: 1.1rem 1.3rem 1.4rem; } .hero-feature .hf-title { font-size: 1.15rem; } .hero-feature .hf-desc { font-size: 0.85rem; } .hero--editorial .hero-watermark img { width: clamp(220px, 60vw, 340px); opacity: 0.06; } } /* ---------- watermark crest (large faded LOMATAN logo) ---------- */ .hero-watermark { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hero-watermark img { width: clamp(280px, 56vh, 620px); height: auto; opacity: 0.10; filter: drop-shadow(0 6px 60px rgba(201, 162, 83, 0.25)) saturate(1.15); animation: watermarkBreathe 14s ease-in-out infinite; will-change: transform, opacity; } @keyframes watermarkBreathe { 0%, 100% { transform: scale(1); opacity: 0.10; } 50% { transform: scale(1.04); opacity: 0.14; } } /* ---------- side rail (vertical gold, rotates spirit names) ---------- */ .hero-rail { position: absolute; top: 50%; left: clamp(1.2rem, 3.4vw, 2.6rem); transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; pointer-events: none; opacity: 0; animation: rise 1.2s 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-rail .hr-label { font-size: 0.58rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-dim); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .hero-rail .hr-track { position: relative; min-height: 220px; width: 1.4rem; display: flex; align-items: flex-start; justify-content: center; } .hero-rail .hr-spirit { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; writing-mode: vertical-rl; transform: rotate(180deg) translateY(8px); font-family: 'Bodoni Moda', serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); white-space: nowrap; opacity: 0; animation: railCycle calc(var(--n, 5) * 5s) infinite; animation-delay: calc(var(--i, 0) * -5s); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .hero-rail .hr-num { font-size: 0.62rem; letter-spacing: 0.28em; color: var(--ink-dim); font-family: 'Jost', sans-serif; } .hero-rail .hr-name { font-size: 0.86rem; } .hero-rail .hr-bar { display: block; width: 1px; height: 70px; background: linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity: 0.6; } .hero-rail::before { content: ""; display: block; width: 1px; height: 70px; background: linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity: 0.6; } @keyframes railCycle { 0% { opacity: 0; transform: rotate(180deg) translateY(8px); } 6% { opacity: 1; transform: rotate(180deg) translateY(0); } 22% { opacity: 1; transform: rotate(180deg) translateY(0); } 28% { opacity: 0; transform: rotate(180deg) translateY(-8px); } 100% { opacity: 0; transform: rotate(180deg) translateY(-8px); } } /* ---------- bottom tagline ticker ---------- * The four brand taglines fade in turn in a slim band near the bottom of * the hero, just above the scroll cue. Doesn't compete with the headline. */ .hero-slides { position: absolute; left: 0; right: 0; bottom: clamp(5rem, 8vh, 7rem); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 0 6rem; height: 1.8rem; } .hero-slide { position: absolute; font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(0.85rem, 1.4vw, 1.05rem); letter-spacing: 0.16em; line-height: 1.2; color: var(--gold-bright); opacity: 0; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; text-align: center; animation: heroSlideCycle calc(var(--n, 4) * 6s) infinite; animation-delay: calc(var(--i, 0) * -6s); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @keyframes heroSlideCycle { 0% { opacity: 0; transform: translateY(8px); } 5% { opacity: 0.72; transform: translateY(0); } 22% { opacity: 0.72; transform: translateY(0); } 27% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-8px); } } /* Mobile — hide side rail (no horizontal room), make taglines wrap. */ @media (max-width: 900px) { .hero-rail { display: none; } .hero-watermark img { width: clamp(220px, 48vh, 360px); } } @media (max-width: 700px) { .hero-slides { padding: 0 1.5rem; bottom: clamp(4.5rem, 7vh, 6rem); } .hero-slide { font-size: 0.85rem; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; transform: scale(1.05); } .hero-watermark img { animation: none; opacity: 0.10; } .hero-slide { animation: none; opacity: 0; } .hero-slide[style*="--i:0"] { opacity: 0.72; } .hero-rail { animation: none; opacity: 1; } .hero-rail .hr-spirit { animation: none; opacity: 0; } .hero-rail .hr-spirit[style*="--i:0"] { opacity: 1; transform: rotate(180deg); } } /* ---------- section header ---------- */ .sec-head { text-align: center; max-width: 680px; margin: 0 auto clamp(3rem, 6vw, 5rem); } .sec-head h2 { margin-top: 0.7rem; } .sec-head p { margin-top: 1.4rem; } /* ---------- intro ---------- */ .intro { text-align: center; background: var(--bg); } .intro .statement { font-size: clamp(1.7rem, 3.6vw, 2.9rem); font-family: 'Bodoni Moda', serif; color: var(--ink); line-height: 1.32; max-width: 920px; margin: 1.4rem auto 0; font-weight: 400; } .intro .statement em { font-style: italic; color: var(--gold-bright); } .intro .meta { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 3.4rem; border-top: 1px solid var(--line); max-width: 880px; margin-left: auto; margin-right: auto; } .intro .meta div { flex: 1; min-width: 200px; padding: 1.7rem 1.4rem; border-right: 1px solid var(--line); } .intro .meta div:last-child { border-right: none; } .intro .meta .k { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); } .intro .meta .v { font-family: 'Bodoni Moda', serif; font-size: 1.15rem; color: var(--gold); margin-top: 0.4rem; } /* ---------- collection ---------- */ .collection { background: var(--bg-2); } .product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(3rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--line-soft); } .product:last-of-type { border-bottom: none; } .product:nth-child(even) .p-media { order: 2; } .p-media { position: relative; overflow: hidden; } .p-media::before { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; } .p-media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .product:hover .p-media img { transform: scale(1.06); } .p-media-fallback { width: 100%; aspect-ratio: 4 / 4.4; background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); display: flex; align-items: center; justify-content: center; color: var(--ink-dim); font-family: 'Bodoni Moda', serif; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; } .p-index { position: absolute; top: 0.7rem; left: 1rem; z-index: 3; font-family: 'Bodoni Moda', serif; font-size: 3.4rem; color: rgba(243, 235, 218, 0.16); } .p-cat { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .p-body h3 { margin: 0.7rem 0 1.1rem; } .p-body a { color: inherit; } .p-body a:hover h3, .p-body a:focus-visible h3 { color: var(--gold-bright); transition: color 0.3s; } .p-notes { font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-bright); margin: 1.4rem 0; } .p-specs { font-size: 0.82rem; color: var(--ink-dim); letter-spacing: 0.04em; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); } .p-serve { font-style: italic; font-family: 'Bodoni Moda', serif; color: var(--ink-soft); margin-top: 0.7rem; font-size: 0.98rem; } .p-limited { display: inline-block; margin-bottom: 0.4rem; padding: 0.25rem 0.7rem; border: 1px solid var(--gold); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); } /* ============================================================= Collection grid — used on /, /collection/, and /spirit-type/{x}/ Designed mobile-first. Defensive overrides reset every legacy .product rule that leaked in from the older alternating layout. ============================================================= */ .collection-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: stretch; } /* Home preview — strict 4-up at desktop, predictable step-downs. */ .collection-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1200px) { .collection-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .collection-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .collection-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 440px) { .collection-grid--home { grid-template-columns: 1fr; } } /* CARD — reset every legacy .product rule inside the grid context */ .collection-grid .product { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft) !important; background: var(--bg-3); transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); align-items: stretch !important; overflow: hidden; } .collection-grid .product:hover { border-color: var(--line); transform: translateY(-3px); } /* CRITICAL: undo .product:nth-child(even) .p-media { order: 2 } so cards * 2 and 4 don't flip the image below the body in the grid. */ .collection-grid .product:nth-child(even) .p-media, .collection-grid .p-media { order: 0 !important; } .collection-grid .p-body { order: 1 !important; } /* Image area — fixed aspect on the WRAPPER so every card has identical * media height. Bottle is contained + centered with soft gold backdrop. */ .collection-grid .p-media { position: relative; width: 100%; aspect-ratio: 4 / 5; background: radial-gradient(ellipse at 50% 38%, rgba(201, 162, 83, 0.08), var(--bg-2) 70%); display: flex; align-items: center; justify-content: center; padding: 0.7rem 0.6rem; overflow: hidden; } /* Disable the legacy inset hairline that was made for cropped covers. */ .collection-grid .p-media::before { content: none !important; } .collection-grid .p-media a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* IMG floats centered — kill aspect-ratio on the img itself (the wrapper * has it now) so contain works without pushing the bottle to one corner. */ .collection-grid .p-media img, .collection-grid .p-media .p-media-img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain; padding: 0; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .collection-grid .product:hover .p-media img { transform: scale(1.04); } /* Body — compact, single column, button glued to bottom */ .collection-grid .p-body { display: flex; flex-direction: column; padding: 0.9rem 1rem 1rem; gap: 0.35rem; flex: 1; } .collection-grid .p-body h3 { font-size: clamp(0.95rem, 1.15vw, 1.18rem); line-height: 1.22; margin: 0.1rem 0 0.2rem; } .collection-grid .p-cat { font-size: 0.58rem; letter-spacing: 0.22em; } .collection-grid .p-notes { display: none; } .collection-grid .p-specs { font-size: 0.68rem; letter-spacing: 0.04em; padding-top: 0.2rem; border-top: none; color: var(--ink-dim); } .collection-grid .p-limited { font-size: 0.55rem; padding: 0.15rem 0.55rem; letter-spacing: 0.22em; align-self: flex-start; } .collection-grid .p-actions { margin-top: auto; padding-top: 0.7rem; } .collection-grid .btn-card { padding: 0.6rem 0.8rem; font-size: 0.55rem; letter-spacing: 0.22em; } /* Mobile niceties — tighter padding, slightly smaller media area */ @media (max-width: 480px) { .collection-grid { gap: 1rem; } .collection-grid .p-media { aspect-ratio: 4 / 5; padding: 0.6rem; } .collection-grid .p-body { padding: 0.8rem 0.9rem 0.9rem; } .collection-grid .p-body h3 { font-size: 1.05rem; } } /* "Add to Selection" button on card */ .btn-card { width: 100%; padding: 0.8rem 1.2rem; font-size: 0.62rem; letter-spacing: 0.24em; border: 1px solid var(--line); color: var(--gold); background: transparent; cursor: pointer; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; font-family: 'Jost', sans-serif; text-transform: uppercase; position: relative; overflow: hidden; } .btn-card:hover, .btn-card:focus-visible { background: var(--gold); color: var(--bg); border-color: var(--gold); outline: none; } .btn-card .cart-add-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--bg); opacity: 0; transform: translateY(100%); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .btn-card.is-added .cart-add-done { opacity: 1; transform: translateY(0); } .btn-card.is-added .cart-add-label { opacity: 0; } .single-spirit-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* ============================================================= Nav cart-toggle + count badge ============================================================= */ .nav-utils { display: flex; align-items: center; gap: 0.6rem; } .cart-toggle { background: none; border: none; padding: 0.4rem; color: var(--ink); cursor: pointer; position: relative; display: inline-flex; align-items: center; transition: color 0.3s ease; } .cart-toggle:hover, .cart-toggle:focus-visible { color: var(--gold); outline: none; } .cart-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--gold); color: var(--bg); font-size: 0.55rem; font-weight: 500; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .cart-count.is-visible { opacity: 1; transform: scale(1); } .cart-count.is-bump { animation: cartBump 0.5s ease; } @keyframes cartBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } /* ============================================================= Cart drawer ============================================================= */ .cart-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .cart-backdrop.is-visible { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 410; width: min(440px, 100vw); background: var(--bg-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .cart-drawer.is-open { transform: translateX(0); } .cart-header { padding: 2rem 1.6rem 1.4rem; border-bottom: 1px solid var(--line); position: relative; } .cart-header h3 { font-family: 'Bodoni Moda', serif; font-size: 1.5rem; margin: 0.4rem 0 0; color: var(--ink); } .cart-close { position: absolute; top: 1.4rem; right: 1.2rem; width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.3s, border-color 0.3s; } .cart-close:hover, .cart-close:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; } .cart-body { flex: 1; overflow-y: auto; padding: 0.8rem 0; } .cart-items { list-style: none; margin: 0; padding: 0; } .cart-item { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--line-soft); align-items: center; } .cart-item .ci-info { display: flex; flex-direction: column; gap: 0.3rem; } .cart-item .ci-title { font-family: 'Bodoni Moda', serif; color: var(--ink); font-size: 1.02rem; line-height: 1.25; } .cart-item .ci-title:hover { color: var(--gold); } .cart-item .ci-meta { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .cart-item .ci-controls { display: inline-flex; align-items: center; gap: 0.3rem; } .cart-item .ci-qty-btn { width: 28px; height: 28px; border: 1px solid var(--line); background: transparent; color: var(--gold); cursor: pointer; font-size: 1rem; line-height: 1; transition: background 0.3s, color 0.3s; } .cart-item .ci-qty-btn:hover { background: var(--gold); color: var(--bg); } .cart-item .ci-qty { min-width: 24px; text-align: center; font-family: 'Bodoni Moda', serif; color: var(--ink); font-size: 0.95rem; } .cart-item .ci-remove { margin-left: 0.4rem; background: none; border: none; color: var(--ink-dim); font-size: 1.2rem; cursor: pointer; padding: 0 4px; transition: color 0.3s; } .cart-item .ci-remove:hover { color: var(--wine); } .cart-empty { padding: 2rem 1.6rem; text-align: center; color: var(--ink-dim); font-size: 0.88rem; line-height: 1.7; } .cart-footer { padding: 1.2rem 1.6rem 1.6rem; border-top: 1px solid var(--line); background: var(--bg-3); } .cart-note { font-size: 0.72rem; line-height: 1.65; color: var(--ink-dim); margin-bottom: 1rem; } .btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; background: #25D366; color: #062b14; border: 1px solid #25D366; font-size: 0.7rem; letter-spacing: 0.22em; transition: background 0.3s, color 0.3s, opacity 0.3s; } .btn-wa:hover, .btn-wa:focus-visible { background: #1ebe5a; color: #062b14; outline: none; } .btn-wa.is-disabled { opacity: 0.4; pointer-events: none; } /* ============================================================= Floating WhatsApp widget ============================================================= */ .wa-widget { position: fixed; right: clamp(1rem, 2.6vw, 1.8rem); bottom: clamp(1rem, 2.6vw, 1.8rem); z-index: 350; display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; font-family: 'Jost', sans-serif; } .wa-fab { width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s; position: relative; } .wa-fab:hover, .wa-fab:focus-visible { background: #1ebe5a; transform: scale(1.05); outline: none; } .wa-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; opacity: 0; animation: waPulse 2.5s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } .wa-card { width: min(340px, calc(100vw - 2rem)); background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transform: translateY(20px) scale(0.96); opacity: 0; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .wa-widget.is-open .wa-card { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .wa-widget.is-open .wa-pulse { display: none; } .wa-card-header { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; background: linear-gradient(180deg, rgba(37, 211, 102, 0.12), transparent); border-bottom: 1px solid var(--line-soft); } .wa-card-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-3); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); } .wa-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .wa-card-mark { font-family: 'Bodoni Moda', serif; font-size: 1.4rem; color: var(--gold); } .wa-card-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .wa-card-name { font-family: 'Bodoni Moda', serif; font-size: 1rem; letter-spacing: 0.04em; color: var(--ink); } .wa-card-status { font-size: 0.65rem; letter-spacing: 0.06em; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 0.4rem; } .wa-dot { width: 7px; height: 7px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); animation: waDot 2s ease-out infinite; } @keyframes waDot { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); } } .wa-close { background: none; border: none; cursor: pointer; color: var(--ink-dim); padding: 4px; transition: color 0.3s; } .wa-close:hover, .wa-close:focus-visible { color: var(--gold); outline: none; } .wa-card-body { padding: 1.1rem 1.1rem 0.4rem; } .wa-greeting { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 0.6rem; } .wa-number { font-family: 'Bodoni Moda', serif; font-size: 0.95rem; color: var(--gold); letter-spacing: 0.06em; margin: 0; } .wa-card-cta { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1rem 1.1rem 1.1rem; padding: 0.9rem 1.2rem; background: #25D366; color: #062b14; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.3s; } .wa-card-cta:hover, .wa-card-cta:focus-visible { background: #1ebe5a; outline: none; } /* Lift the WhatsApp widget slightly above the (potentially open) cart drawer * trigger on small screens so they don't overlap when both are visible. */ @media (max-width: 480px) { .wa-widget { right: 0.8rem; bottom: 0.8rem; } .wa-fab { width: 52px; height: 52px; } } /* ============================================================= Category banner (spirit_type taxonomy archives) ============================================================= */ .archive-spirit.is-taxonomy { padding-top: clamp(5rem, 9vw, 7rem); } .category-banner { padding-top: clamp(3rem, 6vw, 4rem); padding-bottom: clamp(1rem, 3vw, 2rem); } .category-banner .cat-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .category-banner .cat-grid.has-image { grid-template-columns: 1.1fr 0.9fr; } .category-banner .cat-body { max-width: 640px; } .category-banner .cat-body .eyebrow { display: inline-block; } .category-banner h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 0.6rem 0 0; letter-spacing: 0.01em; } .category-banner .cat-tagline { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--gold-bright); margin-top: 0.8rem; } .category-banner .rule { margin: 1.4rem 0; } .category-banner .cat-desc { font-size: clamp(1rem, 1.1vw, 1.08rem); color: var(--ink-soft); line-height: 1.78; } .category-banner .cat-desc p { margin-bottom: 1rem; } .category-banner .cat-desc p:last-child { margin-bottom: 0; } .category-banner .cat-media { position: relative; margin: 0; } .category-banner .cat-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 1px var(--line); } .category-banner .cat-media::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); z-index: -1; pointer-events: none; } @media (max-width: 860px) { .category-banner .cat-grid, .category-banner .cat-grid.has-image { grid-template-columns: 1fr; } .category-banner .cat-media { max-width: 420px; } } /* collection filters */ .collection-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .collection-filters a { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); padding: 0.55rem 1.1rem; border: 1px solid var(--line-soft); transition: color 0.3s, border-color 0.3s; } .collection-filters a:hover, .collection-filters a:focus-visible, .collection-filters a.is-active { color: var(--gold); border-color: var(--gold); outline: none; } /* ---------- single spirit ---------- */ .single-spirit .product { padding: 0; border-bottom: none; } .single-spirit .product .p-media img { aspect-ratio: 4 / 5; } .spirit-meta { margin-top: 2rem; } .spirit-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--line-soft); } .spirit-nav a { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s; } .spirit-nav a:hover, .spirit-nav a:focus-visible { color: var(--gold); } .spirit-long { margin-top: 2.2rem; color: var(--ink-soft); } /* ---------- story ---------- */ .story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .story-grid p { margin-top: 1.2rem; } .story-media { position: relative; } .story-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line); } .story-media .tag { position: absolute; bottom: -1px; left: -1px; background: var(--bg); padding: 1rem 1.6rem; border: 1px solid var(--line); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .quote { text-align: center; max-width: 900px; margin: clamp(4rem, 8vw, 6rem) auto 0; padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line); } .quote blockquote { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.4; color: var(--ink); } .quote .mark { font-size: 3.4rem; color: var(--gold); line-height: 0; display: block; margin-bottom: 1rem; } .quote cite { display: block; margin-top: 1.8rem; font-style: normal; font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } /* ---------- trade ---------- */ .trade { background: var(--bg); } .why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1rem; } .why div { background: var(--bg-2); padding: clamp(1.8rem, 3vw, 2.6rem); } .why .n { font-family: 'Bodoni Moda', serif; font-size: 1.4rem; color: var(--gold); } .why h4 { font-size: 1.3rem; margin: 0.7rem 0 0.6rem; color: var(--ink); } .why p { font-size: 0.95rem; } .ship { display: flex; gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; justify-content: center; margin: 3.4rem 0; text-align: center; } .ship div { flex: 1; min-width: 240px; padding: 2rem 1.5rem; border: 1px solid var(--line); } .ship .big { font-family: 'Bodoni Moda', serif; font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--gold); } .ship .lbl { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-top: 0.5rem; } .table-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--line); } table { width: 100%; border-collapse: collapse; min-width: 640px; } th, td { text-align: left; padding: 1.05rem 1.2rem; font-size: 0.86rem; border-bottom: 1px solid var(--line-soft); } th { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 400; background: var(--bg-3); } td { color: var(--ink-soft); } tr:last-child td { border-bottom: none; } td:first-child { color: var(--ink); font-family: 'Bodoni Moda', serif; font-size: 1rem; } .trade-cta { text-align: center; margin-top: 3.5rem; } /* ---------- contact ---------- */ .contact { background: var(--bg-2); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; border: 1px solid var(--line); } .contact-info { padding: clamp(2.4rem, 5vw, 4rem); position: relative; color: var(--ink); background: var(--bg); } .contact-info h3 { margin: 0.6rem 0 1.6rem; } .ci-row { margin: 1.5rem 0; } .ci-row .k { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .ci-row .v { font-size: 1.02rem; color: var(--ink); margin-top: 0.3rem; } .ci-row .v a { color: inherit; } .ci-row .v a:hover { color: var(--gold); } .ci-note { font-style: italic; font-family: 'Bodoni Moda', serif; color: var(--ink-soft); margin-top: 2rem; font-size: 0.96rem; } .contact-form { padding: clamp(2.4rem, 5vw, 4rem); background: var(--bg-3); } /* generic form / CF7 styling */ .field, .wpcf7-form p { margin-bottom: 1.4rem; } .field label, .wpcf7-form label { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); display: block; margin-bottom: 0.5rem; } .field input, .field select, .field textarea, .wpcf7-form-control:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) { width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--ink); padding: 0.85rem 1rem; font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 300; transition: border-color 0.3s; } .field input:focus, .field select:focus, .field textarea:focus, .wpcf7-form-control:focus { outline: none; border-color: var(--gold); } .field textarea, .wpcf7-form textarea { resize: vertical; min-height: 96px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.82rem; color: var(--ink-dim); margin: 1.2rem 0 1.6rem; } .check input { width: 16px; height: 16px; accent-color: var(--gold); margin-top: 0.2rem; flex-shrink: 0; } .form-msg { color: var(--gold); font-size: 0.9rem; margin-top: 1rem; font-style: italic; font-family: 'Bodoni Moda', serif; } .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .wpcf7-acceptance label { display: inline-flex; align-items: flex-start; gap: 0.6rem; text-transform: none; letter-spacing: 0.02em; color: var(--ink-soft); font-size: 0.85rem; } .wpcf7-response-output { border: 1px solid var(--line) !important; color: var(--ink) !important; padding: 1rem !important; margin-top: 1.4rem !important; font-size: 0.9rem; } .wpcf7 .wpcf7-submit { display: inline-flex; align-items: center; padding: 1rem 2.2rem; border: 1px solid var(--gold); background: var(--gold); color: var(--bg); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.45s ease, color 0.45s ease; } .wpcf7 .wpcf7-submit:hover { background: transparent; color: var(--gold); } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--line); background: var(--bg); text-align: center; padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem; } footer .f-brand { font-family: 'Bodoni Moda', serif; font-size: 1.7rem; letter-spacing: 0.4em; padding-left: 0.4em; color: var(--ink); } .f-tag { font-style: italic; font-family: 'Bodoni Moda', serif; color: var(--gold); margin-top: 0.7rem; font-size: 1rem; } .f-links { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; } .f-links a { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s; } .f-links a:hover, .f-links a:focus-visible { color: var(--gold); outline: none; } .f-meta { font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.04em; line-height: 2; } .f-meta a { color: inherit; } .f-meta a:hover { color: var(--gold); } .f-resp { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); max-width: 560px; margin-left: auto; margin-right: auto; } /* Distributor line — sits as a small caveat after the copyright, low priority. */ .f-distributor { color: var(--ink-dim); font-size: 0.74rem; letter-spacing: 0.04em; } /* ---------- age gate ---------- */ .gate { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(ellipse at center, #15100b 0%, #070504 90%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; transition: opacity 0.7s ease; } .gate[hidden] { display: none; } .gate.hide { opacity: 0; pointer-events: none; } .gate-card { max-width: 480px; text-align: center; border: 1px solid var(--line); padding: clamp(2.4rem, 6vw, 3.6rem); background: rgba(11, 9, 8, 0.6); } .gate-card .brand { font-size: 1.5rem; display: block; margin-bottom: 1.6rem; } .gate-card h4 { font-family: 'Bodoni Moda', serif; font-size: 1.7rem; color: var(--ink); margin: 0.6rem 0; } .gate-card p { font-size: 0.95rem; margin: 1rem 0 1.8rem; } .gate-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .gate-foot { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-top: 1.8rem; } .gate-deny p { color: var(--ink-soft); } /* ============================================================= Our Story page — bespoke layout ============================================================= */ .page-our-story { padding-top: clamp(6rem, 11vw, 9rem); } .pad-sm { padding: clamp(3rem, 6vw, 5rem) 0; } /* 1. Hero */ .story-hero { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 3rem); } .story-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; } .story-hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); margin: 0.6rem 0 0; letter-spacing: 0.01em; } .story-hero .rule { margin: 1.4rem auto; } .story-hero .lead { margin-top: 0.6rem; } /* 2. Founder spotlight */ .founder-spotlight { position: relative; } .founder-grid { display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .founder-portrait { position: relative; margin: 0; max-width: 480px; width: 100%; justify-self: start; } .founder-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--line); } /* Subtle gold frame offset behind the portrait */ .founder-portrait::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); z-index: -1; pointer-events: none; transition: inset 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .founder-portrait:hover::before { inset: 14px -22px -22px 14px; } .founder-portrait figcaption { position: absolute; bottom: -1px; left: -1px; background: var(--bg); border: 1px solid var(--line); padding: 0.9rem 1.3rem; display: flex; flex-direction: column; } .founder-portrait .fp-name { font-family: 'Bodoni Moda', serif; font-size: 0.95rem; color: var(--ink); letter-spacing: 0.04em; } .founder-portrait .fp-role { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-top: 0.2rem; } .founder-body { padding: 0; } .founder-body .eyebrow { display: inline-block; } .founder-body h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 0.6rem; line-height: 1.12; } .founder-body .rule { margin: 1.4rem 0 1.6rem; } .founder-body p { margin-top: 1.1rem; font-size: clamp(1rem, 1.1vw, 1.08rem); color: var(--ink-soft); } .founder-body p:first-of-type { margin-top: 0; } /* Signature block */ .signature { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 1.2rem; } .signature .sig-mark { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--gold); letter-spacing: 0.04em; line-height: 1; flex-shrink: 0; padding-right: 1.2rem; border-right: 1px solid var(--line); } .signature .sig-meta { display: flex; flex-direction: column; gap: 0.2rem; } .signature .sig-name { font-family: 'Bodoni Moda', serif; font-size: 1.05rem; color: var(--ink); } .signature .sig-role { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); } /* 3. Pull quote band */ .quote-band { background: var(--bg-2); padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .quote-band .quote { margin: 0 auto; padding-top: 0; border-top: none; } .quote-band .quote blockquote { font-size: clamp(1.4rem, 3vw, 2.2rem); } .quote-band .quote .mark { font-size: 3rem; } /* 4. Pillars */ .pillars .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .pillars .pillars-grid > div { background: var(--bg); padding: clamp(1.8rem, 3.2vw, 2.6rem); } .pillars .p-num { font-family: 'Bodoni Moda', serif; font-size: 1.5rem; color: var(--gold); display: block; } .pillars h4 { font-size: 1.2rem; margin: 0.6rem 0 0.5rem; color: var(--ink); letter-spacing: 0.01em; } .pillars p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; } /* 5. Craft block — reuse .story-grid but tighter */ .craft .story-grid { gap: clamp(2rem, 5vw, 4rem); } .craft h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 0.6rem; } /* 6. Closing CTA */ .closing { padding-bottom: clamp(5rem, 9vw, 7rem); } .closing-inner { text-align: center; max-width: 640px; margin: 0 auto; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-soft); } .closing .closing-line { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ink); margin-bottom: 2rem; } /* Responsive — single column on smaller screens */ @media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); } .founder-portrait { margin: 0 auto; max-width: 440px; } .founder-portrait::before { inset: 14px -14px -14px 14px; } .pillars .pillars-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .signature { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .signature .sig-mark { border-right: none; padding-right: 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); } } /* ---------- responsive ---------- */ @media (max-width: 960px) { .story-grid { grid-template-columns: 1fr; } .story-media { order: -1; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .nav-links { display: none; } .burger { display: flex; } .product { grid-template-columns: 1fr; gap: 1.8rem; } .product:nth-child(even) .p-media { order: 0; } .p-media img { aspect-ratio: 4 / 3.4; } .why { grid-template-columns: 1fr; } .intro .meta div { border-right: none; border-bottom: 1px solid var(--line); } .intro .meta div:last-child { border-bottom: none; } } @media (max-width: 480px) { .two { grid-template-columns: 1fr; } .hero h1 { letter-spacing: 0.1em; } .brand { letter-spacing: 0.3em; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .hero-bg { transform: none; } html { scroll-behavior: auto; } } /* ============================================================= Final mobile pass — small-screen polish across the site ============================================================= */ @media (max-width: 720px) { /* Compact section padding — keep brand whitespace but trim aggression. */ .pad { padding: clamp(3rem, 9vw, 5rem) 0; } .pad-sm { padding: clamp(2rem, 6vw, 3.4rem) 0; } /* Section headers — keep readable without overflowing. */ .sec-head { margin: 0 auto clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); } h3 { font-size: clamp(1.4rem, 5.5vw, 2rem); } /* Hero typography — tighter clamps so the headline never overflows. */ .hero { padding: 7rem 1.2rem 4rem; min-height: 92svh; } .hero h1 { font-size: clamp(2.6rem, 13vw, 4.6rem); letter-spacing: 0.08em; } .hero .sub { font-size: clamp(0.95rem, 3.6vw, 1.15rem); padding: 0 0.5rem; } .hero-actions { gap: 0.7rem; width: 100%; padding: 0 0.6rem; } .hero-actions .btn { padding: 0.85rem 1.4rem; font-size: 0.62rem; } .hero-watermark img { width: clamp(180px, 60vw, 320px) !important; opacity: 0.07; } .scroll-cue { bottom: 1.2rem; font-size: 0.55rem; } .scroll-cue::after { height: 36px; } /* Nav — keep utils visible, slim padding. */ nav#nav { padding: 1rem clamp(0.9rem, 4vw, 1.4rem); } nav#nav.scrolled { padding: 0.7rem clamp(0.9rem, 4vw, 1.4rem); } .brand { font-size: 1rem; letter-spacing: 0.28em; } .site-logo img, .site-logo .custom-logo { max-height: 36px; } .nav-utils { gap: 0.4rem; } /* Cart drawer — already 100vw at this size. Slightly tighter inner. */ .cart-header { padding: 1.4rem 1.1rem 1rem; } .cart-header h3 { font-size: 1.3rem; } .cart-close { top: 1rem; right: 1rem; width: 32px; height: 32px; } .cart-item { padding: 0.9rem 1.1rem; } .cart-footer { padding: 1rem 1.1rem 1.2rem; } /* WhatsApp widget — ensure it never collides with the cart icon. */ .wa-widget { right: 0.8rem; bottom: 0.8rem; } .wa-fab { width: 50px; height: 50px; } .wa-card { width: min(310px, calc(100vw - 1.6rem)); } /* Story page — keep portrait readable, shrink heading. */ .story-hero h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); } .founder-body h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); } .founder-portrait { max-width: 100%; } .founder-portrait::before { inset: 10px -10px -10px 10px; } /* Trade page table — kept scrollable, no overflow. */ .table-scroll { margin-left: -1rem; margin-right: -1rem; border-left: none; border-right: none; } /* Contact page — single column already, just trim hero. */ .page-contact .pad[style*="padding-top"] { padding-top: clamp(6rem, 14vw, 9rem) !important; } /* Quote band — smaller on small screens. */ .quote blockquote { font-size: clamp(1.15rem, 5vw, 1.8rem); } } @media (max-width: 420px) { .hero h1 { font-size: clamp(2.2rem, 12vw, 3rem); } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; justify-content: center; } .intro .meta { flex-direction: column; } .intro .meta div { border-right: none; border-bottom: 1px solid var(--line); } .intro .meta div:last-child { border-bottom: none; } } /* Tablet portrait — make sure the home 4-up doesn't get cramped. */ @media (min-width: 761px) and (max-width: 1024px) { .collection-grid--home .p-body h3 { font-size: 1.05rem; } .collection-grid--home .btn-card { padding: 0.55rem 0.7rem; font-size: 0.52rem; } } /* ============================================================= MOBILE-FIRST REFINEMENTS — applied at ≤720px Touch targets, iOS niceties, content-first hero, safe-area support, larger tappable controls. This block is intentionally at the bottom so it wins on cascade. ============================================================= */ @media (max-width: 720px) { /* ----- iOS safe-area (notch + home indicator) ----- */ body { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } nav#nav { padding-top: max(0.85rem, env(safe-area-inset-top, 0)); } footer { padding-bottom: max(2rem, env(safe-area-inset-bottom, 0)); } .wa-widget { bottom: max(0.8rem, env(safe-area-inset-bottom, 0)); right: max(0.8rem, env(safe-area-inset-right, 0)); } .cart-drawer { padding-bottom: env(safe-area-inset-bottom, 0); } /* ----- Prevent iOS auto-zoom on input focus ----- */ input, select, textarea, .field input, .field select, .field textarea, .wpcf7-form-control { font-size: 16px !important; min-height: 48px; } textarea, .wpcf7-form textarea { min-height: 120px; } /* ----- All buttons & links — minimum 44×44 tap targets ----- */ .btn { min-height: 48px; padding: 0.9rem 1.6rem; } .btn-card { min-height: 44px; } .cart-toggle, .burger { min-width: 44px; min-height: 44px; padding: 10px; } .cart-close, .wa-close { min-width: 44px; min-height: 44px; } /* ----- Hero — content-first; less hero, more above the fold ----- */ .hero { min-height: 80svh; padding: 6.5rem 1rem 4rem; } .hero h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); letter-spacing: 0.06em; line-height: 1.05; } .hero .sub { font-size: 1rem; line-height: 1.5; padding: 0 0.6rem; max-width: 32ch; margin: 0 auto; } .hero .eyebrow { font-size: 0.62rem; letter-spacing: 0.3em; } .hero .hairline { margin: 1.2rem auto; } .hero-actions { flex-direction: column; gap: 0.8rem; width: 100%; max-width: 320px; margin: 1.6rem auto 0; } .hero-actions .btn { width: 100%; justify-content: center; } .scroll-cue { display: none; } /* on a short mobile hero the CTAs are already visible */ .hero-watermark img { opacity: 0.07; width: clamp(180px, 50vw, 280px) !important; } .hero-slides { bottom: 1.2rem; padding: 0 1.2rem; height: auto; } .hero-slide { font-size: 0.78rem; letter-spacing: 0.12em; white-space: normal; text-align: center; max-width: 90vw; } /* ----- Nav — chunkier, sticky-aware ----- */ nav#nav { padding: 0.85rem clamp(0.8rem, 4vw, 1.2rem); } nav#nav.scrolled { padding: 0.6rem clamp(0.8rem, 4vw, 1.2rem); } .brand { font-size: 0.95rem; letter-spacing: 0.26em; padding-left: 0.26em; } .site-logo img, .site-logo .custom-logo { max-height: 34px; } .nav-utils { gap: 0.2rem; } .cart-count { min-width: 18px; height: 18px; font-size: 0.62rem; top: 2px; right: 2px; } /* ----- Overlay menu — fingertip-friendly ----- */ .overlay { gap: 0.5rem; padding: 5rem 1.5rem 4rem; } .overlay a { font-size: clamp(1.8rem, 8vw, 2.6rem); padding: 0.5rem 1rem; min-height: 48px; display: flex; align-items: center; } /* ----- Cards — full-bleed bottle, bigger title ----- */ .collection-grid { gap: 0.9rem; padding: 0 0.2rem; } .collection-grid .product { border-radius: 0; } .collection-grid .p-media { aspect-ratio: 4 / 5; padding: 0.5rem 0.4rem; } .collection-grid .p-body { padding: 0.85rem 0.9rem 1rem; gap: 0.4rem; } .collection-grid .p-body h3 { font-size: 1.05rem; line-height: 1.22; } .collection-grid .btn-card { min-height: 44px; padding: 0.7rem 0.9rem; font-size: 0.6rem; } /* ----- Cart drawer — touch-friendly controls ----- */ .cart-drawer { width: 100vw; max-height: 100svh; } .cart-body { padding: 0.4rem 0 0.4rem; } .cart-item { grid-template-columns: 1fr; gap: 0.7rem; padding: 1rem 1.1rem; } .cart-item .ci-controls { justify-self: start; gap: 0.45rem; } .cart-item .ci-qty-btn { min-width: 40px; min-height: 40px; font-size: 1.2rem; width: 40px; height: 40px; } .cart-item .ci-qty { min-width: 40px; font-size: 1.05rem; } .cart-item .ci-remove { min-width: 40px; min-height: 40px; font-size: 1.4rem; margin-left: auto; } .cart-footer { padding: 1rem 1.1rem 1.4rem; } .btn-wa { min-height: 52px; padding: 1rem 1.2rem; font-size: 0.72rem; } /* ----- WhatsApp widget — bigger fab, larger card ----- */ .wa-fab { width: 60px; height: 60px; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0,0,0,0.4); } .wa-card { width: min(360px, calc(100vw - 1.4rem)); } .wa-card-cta { min-height: 50px; font-size: 0.72rem; } /* ----- Forms (Contact Form 7 + native) ----- */ .contact-grid { border: none; } .contact-info, .contact-form { padding: 1.5rem 1.2rem; } .contact-info { border: 1px solid var(--line); border-bottom: none; } .contact-form { border: 1px solid var(--line); } .wpcf7 .wpcf7-submit { width: 100%; min-height: 52px; padding: 1rem 1.4rem; } /* ----- Footer — touch-friendly link spacing ----- */ .f-links { gap: 0.4rem 1.4rem; } .f-links a { padding: 0.6rem 0.4rem; min-height: 44px; display: inline-flex; align-items: center; } /* ----- Section heading hierarchy on mobile ----- */ .sec-head .eyebrow { font-size: 0.62rem; letter-spacing: 0.28em; } .sec-head h2 { line-height: 1.1; } .sec-head .lead, .sec-head p { font-size: 1rem; line-height: 1.6; } /* ----- Story page founder portrait ----- */ .founder-portrait::before { inset: 8px -8px -8px 8px; } .founder-portrait figcaption { padding: 0.7rem 1rem; bottom: 0; left: 0; } /* ----- Trade page — readable table, comfortable buttons ----- */ .why .n { font-size: 1.2rem; } .why h4 { font-size: 1.1rem; } .ship div { padding: 1.6rem 1rem; } .ship .big { font-size: clamp(1.8rem, 7vw, 2.4rem); } /* ----- Pull-quote band on phones ----- */ .quote-band { padding: clamp(2.5rem, 8vw, 4rem) 0; } .quote .mark { font-size: 2.2rem; } .quote blockquote { font-size: clamp(1.15rem, 5vw, 1.6rem); line-height: 1.4; } .quote cite { font-size: 0.62rem; letter-spacing: 0.2em; } /* ----- Age gate — touch-friendly buttons ----- */ .gate-card { padding: 2rem 1.4rem; } .gate-card h4 { font-size: 1.4rem; } .gate-actions { width: 100%; } .gate-actions .btn { flex: 1; min-width: 130px; } } /* ============================================================= Larger phones / tablet portrait (721–900px) ============================================================= */ @media (min-width: 721px) and (max-width: 900px) { .hero h1 { font-size: clamp(3rem, 9vw, 4.4rem); } .hero-actions { gap: 1rem; } .btn { min-height: 46px; } } /* ============================================================= Accessibility — focus states clearly visible on touch ============================================================= */ @media (hover: none) { *:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 2px; } } /* ============================================================= Disable hover-zoom on touch devices (it sticks on tap) ============================================================= */ @media (hover: none) and (pointer: coarse) { .collection-grid .product:hover { transform: none; } .collection-grid .product:hover .p-media img { transform: none; } .founder-portrait:hover::before { inset: 14px -14px -14px 14px; } } /* ============================================================= LIGHT THEME — section-specific overrides Tokens swap automatically via :root[data-theme="light"]. This section handles the spots that need bespoke gradients, shadows, or contrast reversals. ============================================================= */ /* Nav — keep the brand bar DARK in light mode so the LOMATAN gold-on-black * crest logo sits naturally on it (the logo file has a dark backdrop baked * in). Text + icons stay cream for contrast. */ [data-theme="light"] nav#nav { background: rgba(11, 9, 8, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(201, 162, 83, 0.15); } [data-theme="light"] nav#nav.scrolled { background: rgba(8, 6, 5, 0.96); border-bottom-color: rgba(201, 162, 83, 0.22); } [data-theme="light"] nav#nav .brand { color: #f3ebda; } [data-theme="light"] nav#nav .nav-links a { color: #b6a98f; } [data-theme="light"] nav#nav .nav-links a:hover, [data-theme="light"] nav#nav .nav-links a:focus-visible { color: #e7cd92; } [data-theme="light"] nav#nav .nav-links a::after { background: #e7cd92; } [data-theme="light"] nav#nav .nav-cta { border-color: rgba(201, 162, 83, 0.2); } [data-theme="light"] nav#nav .nav-cta:hover, [data-theme="light"] nav#nav .nav-cta:focus-visible { border-color: #e7cd92; } [data-theme="light"] nav#nav .cart-toggle, [data-theme="light"] nav#nav .theme-toggle { color: #f3ebda; } [data-theme="light"] nav#nav .cart-toggle:hover, [data-theme="light"] nav#nav .theme-toggle:hover { color: #e7cd92; } [data-theme="light"] nav#nav .burger span { background: #f3ebda; } [data-theme="light"] nav#nav .cart-count { background: #e7cd92; color: #0b0908; } /* Logo on dark nav — drop-shadow gives the crest a subtle gold halo */ [data-theme="light"] nav#nav .site-logo img, [data-theme="light"] nav#nav .site-logo .custom-logo { filter: drop-shadow(0 1px 14px rgba(231, 205, 146, 0.18)); } /* Overlay menu — cream backdrop */ [data-theme="light"] .overlay { background: rgba(251, 246, 234, 0.97); } /* Cover hero — let the photo shine on cream */ [data-theme="light"] .hero--cover { background: var(--bg); } [data-theme="light"] .hero--cover::before { background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 0%, rgba(251, 246, 234, 0.15) 65%, rgba(251, 246, 234, 0.45) 100%); } [data-theme="light"] .hero--cover .hero-bg-photo { opacity: 0.85; filter: saturate(1.05) contrast(0.98); } [data-theme="light"] .hero--cover .hero-swirl > div { opacity: 0.2; mix-blend-mode: multiply; } [data-theme="light"] .hero--cover .swirl-grain { display: none; } [data-theme="light"] .hero--cover .hero-cover::before { background: radial-gradient(ellipse at center, rgba(251, 246, 234, 0.55) 0%, rgba(251, 246, 234, 0) 60%); } [data-theme="light"] .hero-wordmark { filter: drop-shadow(0 2px 22px rgba(156, 117, 48, 0.35)); } [data-theme="light"] .scroll-cue { color: var(--ink-soft); } [data-theme="light"] .scroll-cue:hover { color: var(--gold-deep); } /* Grain — invert blend for cream */ [data-theme="light"] body::after { mix-blend-mode: multiply; opacity: 0.04; } /* Welcome interlude */ [data-theme="light"] .welcome-interlude { background: var(--bg-2); } [data-theme="light"] .welcome-interlude .welcome-bg { filter: saturate(0.95) brightness(0.92); opacity: 0.65; } [data-theme="light"] .welcome-interlude .welcome-overlay { background: linear-gradient(180deg, rgba(251, 246, 234, 0.3) 0%, rgba(251, 246, 234, 0.1) 40%, rgba(251, 246, 234, 0.85) 100%); } [data-theme="light"] .welcome-interlude .welcome-sub { color: var(--ink-soft); } /* Intro */ [data-theme="light"] .intro { background: var(--bg); } [data-theme="light"] .intro .statement { color: var(--ink); } [data-theme="light"] .intro .statement em { color: var(--gold-deep); } /* Collection band + cards */ [data-theme="light"] .collection { background: var(--bg-2); } [data-theme="light"] .collection-grid .product { background: #fff; border-color: var(--line); } [data-theme="light"] .collection-grid .product:hover { border-color: var(--gold-bright); box-shadow: 0 12px 28px rgba(43, 26, 15, 0.10); } [data-theme="light"] .collection-grid .p-media { background: radial-gradient(ellipse at 50% 38%, rgba(201, 162, 83, 0.08), #faf4e6 70%); } [data-theme="light"] .collection-grid .p-cat { color: var(--gold-deep); } [data-theme="light"] .collection-grid .p-body h3 a { color: var(--ink); } [data-theme="light"] .collection-grid .p-body h3 a:hover { color: var(--gold-deep); } [data-theme="light"] .collection-grid .p-specs { color: var(--ink-dim); } [data-theme="light"] .btn-card { border-color: var(--gold); color: var(--gold-deep); } [data-theme="light"] .btn-card:hover, [data-theme="light"] .btn-card:focus-visible { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); } /* Editorial hero variant */ [data-theme="light"] .hero--editorial .hero-headline { color: var(--ink); } [data-theme="light"] .hero--editorial .hero-sub { color: var(--ink-soft); } [data-theme="light"] .hero-feature { background: #fff; border-color: var(--line); box-shadow: var(--card-shadow); } [data-theme="light"] .hero-feature .hf-image { background: linear-gradient(180deg, #fff 0%, #faf4e6 100%); } [data-theme="light"] .hero-feature .hf-title { color: var(--ink); } [data-theme="light"] .hero-feature .hf-desc { color: var(--ink-soft); } /* Story + Black Forest */ [data-theme="light"] .story-media .tag { background: var(--bg-2); } [data-theme="light"] .craft { background: var(--bg); } [data-theme="light"] .founder-portrait img, [data-theme="light"] .story-media img, [data-theme="light"] .craft .story-media img { box-shadow: 0 0 0 1px var(--line), 0 12px 28px rgba(43, 26, 15, 0.10); } /* Trade */ [data-theme="light"] .trade { background: var(--bg); } [data-theme="light"] .why div { background: var(--bg-2); } [data-theme="light"] .ship div { background: rgba(251, 246, 234, 0.6); } [data-theme="light"] table { background: #fff; } [data-theme="light"] th { background: var(--bg-3); color: var(--gold-deep); } [data-theme="light"] td:first-child { color: var(--ink); } /* Contact + forms */ [data-theme="light"] .contact { background: var(--bg-2); } [data-theme="light"] .contact-info { background: #fff; } [data-theme="light"] .contact-form { background: var(--bg-3); } [data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea, [data-theme="light"] .wpcf7-form-control:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) { background: #fff; color: var(--ink); border-color: var(--line); } /* Footer */ [data-theme="light"] footer { background: var(--bg-2); } [data-theme="light"] .f-brand { color: var(--ink); } [data-theme="light"] .f-tag { color: var(--gold-deep); } /* Buttons — keep gold CTA bold, swap outline contrast */ [data-theme="light"] .btn { color: var(--gold-deep); border-color: var(--gold); } [data-theme="light"] .btn:hover, [data-theme="light"] .btn:focus-visible { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); } [data-theme="light"] .btn-solid { background: var(--gold-deep); color: #fff; border-color: var(--gold-deep); } [data-theme="light"] .btn-solid:hover, [data-theme="light"] .btn-solid:focus-visible { background: transparent; color: var(--gold-deep); } /* Cart drawer */ [data-theme="light"] .cart-drawer { background: var(--bg-2); border-left-color: var(--line); } [data-theme="light"] .cart-header { border-bottom-color: var(--line); } [data-theme="light"] .cart-header h3 { color: var(--ink); } [data-theme="light"] .cart-close { border-color: var(--line); color: var(--ink-soft); } [data-theme="light"] .cart-item { border-bottom-color: var(--line-soft); } [data-theme="light"] .cart-item .ci-title { color: var(--ink); } [data-theme="light"] .cart-item .ci-meta { color: var(--ink-dim); } [data-theme="light"] .cart-item .ci-qty-btn { border-color: var(--line); color: var(--gold-deep); } [data-theme="light"] .cart-item .ci-qty-btn:hover { background: var(--gold-deep); color: #fff; } [data-theme="light"] .cart-item .ci-qty { color: var(--ink); } [data-theme="light"] .cart-footer { background: var(--bg-3); border-top-color: var(--line); } [data-theme="light"] .cart-note { color: var(--ink-soft); } /* WhatsApp widget card */ [data-theme="light"] .wa-card { background: #fff; border-color: var(--line); } [data-theme="light"] .wa-card-header { background: linear-gradient(180deg, rgba(37, 211, 102, 0.10), transparent); border-bottom-color: var(--line-soft); } [data-theme="light"] .wa-card-name { color: var(--ink); } [data-theme="light"] .wa-card-status { color: var(--ink-dim); } [data-theme="light"] .wa-greeting { color: var(--ink-soft); } [data-theme="light"] .wa-number { color: var(--gold-deep); } [data-theme="light"] .wa-card-avatar { background: #faf4e6; } /* ============================================================= Theme toggle — sun/moon button in the nav ============================================================= */ .theme-toggle { background: none; border: none; padding: 0.4rem; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: color 0.3s ease; min-width: 44px; min-height: 44px; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--gold); outline: none; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { width: 20px; height: 20px; transition: opacity 0.4s ease, transform 0.4s ease; } .theme-toggle .icon-sun { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); } .theme-toggle .icon-moon { opacity: 1; } [data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }