/* ═══════════════════════════════════════════════════════════════════════ RICHIE GOLD & DIAMONDS — "Midnight Atelier" design system v2 Futuristic dark luxury · champagne gold · AI-powered feel Class contract with index.html / app.js / cart.js is preserved. ═══════════════════════════════════════════════════════════════════════ */ :root { --bg: #05060a; --bg-2: #0a0d14; --bg-3: #10141f; --panel: rgba(255, 255, 255, 0.035); --panel-2: rgba(255, 255, 255, 0.06); --line: rgba(212, 175, 55, 0.16); --line-soft: rgba(255, 255, 255, 0.08); --gold: #d4af37; --gold-2: #f2d27c; --gold-3: #9a7b1e; --ink: #f4f1e8; --ink-dim: rgba(244, 241, 232, 0.66); --ink-mute: rgba(244, 241, 232, 0.42); --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", -apple-system, "Segoe UI", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --radius: 18px; --shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* overflow-x ONLY on html; clip does not turn into the scroll container (overflow on both html+body breaks momentum scroll / scroll chaining on iOS & Android) */ html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Ambient page atmosphere: fine grid + vignette */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(212,175,55,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0,0,0,0.7), transparent 60%); } ::selection { background: rgba(212, 175, 55, 0.35); color: #fff; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ── Scroll progress hairline ─────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold)); z-index: 999; box-shadow: 0 0 12px rgba(212,175,55,0.6); } /* ── Topbar: ticker + nav ─────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease); } .topbar.scrolled { background: rgba(5, 6, 10, 0.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line-soft); } .ticker { overflow: hidden; border-bottom: 1px solid var(--line-soft); background: linear-gradient(90deg, rgba(212,175,55,0.07), rgba(212,175,55,0.02), rgba(212,175,55,0.07)); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } .ticker-track { display: flex; gap: 34px; align-items: center; padding: 7px 24px; width: max-content; animation: ticker-slide 28s linear infinite; } @keyframes ticker-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item em { font-style: normal; color: var(--gold-2); font-weight: 600; } .ticker-item em.up { color: #7bd88f; } .ticker-item em.down { color: #e07a7a; } .ticker-sep { color: var(--gold); } .ticker-meta { color: var(--ink-mute); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(18px, 4vw, 48px); } .brand { display: flex; align-items: center; gap: 12px; } .logo-img { width: 116px; height: 42px; object-fit: contain; object-position: 50% 50%; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(201,168,76,0.34)); } .logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-size: 24px; font-weight: 600; color: #131313; background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3)); box-shadow: 0 6px 22px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,255,255,0.5); position: relative; overflow: hidden; } .logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 5.5s var(--ease) infinite; } @keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .brand-name { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: 0.02em; } .brand-sub { display: block; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-top: 1px; } .nav-links { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); } .nav-links > a:not(.wa):not(.cart-pill) { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); position: relative; padding: 4px 0; transition: color 0.3s; } .nav-links > a:not(.wa):not(.cart-pill)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0%; background: var(--gold); transition: width 0.35s var(--ease); } .nav-links > a:not(.wa):not(.cart-pill):hover { color: var(--gold-2); } .nav-links > a:not(.wa):not(.cart-pill):hover::after { width: 100%; } .wa { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #0c130d; background: linear-gradient(135deg, #8ee6a4, #43c86e); padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 24px rgba(67, 200, 110, 0.3); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .wa:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(67, 200, 110, 0.45); } .cart-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--gold-2); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; background: rgba(212,175,55,0.08); transition: background 0.3s; } .cart-pill:hover { background: rgba(212,175,55,0.16); } .cart-count { background: var(--gold); color: #111; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 4px; } .cur-toggle { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 999px; overflow: hidden; } .cur-toggle button { background: transparent; border: 0; color: var(--ink-mute); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; padding: 8px 13px; cursor: pointer; transition: all 0.3s; } .cur-toggle button.active { background: rgba(212,175,55,0.14); color: var(--gold-2); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; /* stable vh base — svh relayouts every scroll frame as chrome hides/shows */ display: flex; align-items: flex-end; padding: 150px clamp(18px, 5vw, 64px) clamp(48px, 7vh, 90px); isolation: isolate; overflow: hidden; } @supports (height: 100svh) { .hero { min-height: 100svh; } } /* Rotating model imagery (V13 cinematic reel — crossfade + desktop Ken Burns) Stacking contract: frames z-index 0 (never negative) inside .hero-slides' own stacking context; legibility gradient z-index 1; sparkles z-index 2; hero content z-index 3. */ .hero-slides { position: absolute; inset: 0; z-index: 0; isolation: isolate; pointer-events: none; } .hero-frame { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-frame.active { opacity: 1; } .hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1); } /* Portrait look frames: bias subject right on wide screens so the headline zone stays clean, plus a gentle left darkening inside the frame itself */ .hero-frame.look::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,6,10,0.55) 0%, rgba(5,6,10,0.15) 45%, transparent 65%); } /* ── Active Catalogue Feature (owner-approved release gate) ───────────── */ .active-catalogue-feature { position: relative; z-index: 1; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); align-items: center; gap: clamp(32px, 7vw, 100px); margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(20px, 6vw, 88px); background: radial-gradient(circle at 85% 25%, rgba(212,175,55,0.16), transparent 30%), linear-gradient(135deg, #090a0e, #10131d 54%, #08090c); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .active-catalogue-feature::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(242,210,124,0.14); pointer-events: none; } .active-catalogue-copy, .active-catalogue-stage { position: relative; z-index: 1; } .active-catalogue-copy { max-width: 640px; } .active-catalogue-copy h2 { margin-top: 12px; font-size: clamp(44px, 6vw, 86px); } .active-catalogue-copy p { max-width: 540px; margin-top: 20px; color: var(--ink-dim); font-size: clamp(15px, 1.5vw, 18px); } .active-catalogue-notes { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; } .active-catalogue-notes span { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--gold-2); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .active-catalogue-stage { min-height: 350px; display: grid; place-items: center; } .active-catalogue-orbit { position: absolute; border: 1px solid rgba(242,210,124,.25); border-radius: 50%; transform: rotate(-24deg); } .orbit-a { width: min(38vw, 500px); height: min(20vw, 260px); } .orbit-b { width: min(30vw, 390px); height: min(15vw, 195px); transform: rotate(38deg); } .active-catalogue-card { position: relative; width: min(100%, 360px); padding: 34px; border: 1px solid rgba(242,210,124,.35); background: rgba(5,6,10,.76); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .active-catalogue-card-kicker { display: block; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .active-catalogue-card-image { width: 100%; aspect-ratio: 4 / 5; margin-top: 18px; object-fit: cover; background: var(--bg-3); } .active-catalogue-card-name { display: block; margin-top: 24px; font-family: var(--serif); font-size: 29px; line-height: 1.05; } .active-catalogue-card-spec { display: block; margin-top: 10px; color: var(--ink-mute); font-size: 12px; } .active-catalogue-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 20px; font-size: 13px; } .active-catalogue-card-price s { color: var(--ink-mute); } .active-catalogue-card-price strong { color: var(--gold-2); font-family: var(--serif); font-size: 28px; font-weight: 500; } .active-catalogue-card-price em { color: #8ee6a4; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .active-catalogue-card-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--gold-2); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .active-catalogue-card-cta span { font-size: 18px; transition: transform .2s var(--ease); } .active-catalogue-card-cta:hover span { transform: translateX(4px); } @media (max-width: 760px) { .active-catalogue-feature { grid-template-columns: 1fr; padding: 64px 22px; } .active-catalogue-stage { min-height: 280px; } .orbit-a { width: 420px; height: 220px; } .orbit-b { width: 310px; height: 160px; } } @media (min-width: 769px) { .hero-frame.look img { object-position: 74% 18%; } } /* Ken Burns drift 1.00 → 1.05, desktop only, alternating direction per frame */ @keyframes hero-kb-a { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.05) translate(-0.6%, -0.5%); } } @keyframes hero-kb-b { from { transform: scale(1.05) translate(0.6%, 0.4%); } to { transform: scale(1) translate(0, 0); } } @media (hover: hover) and (min-width: 769px) { .hero-frame.active img { animation: hero-kb-a 6.2s var(--ease) forwards; } .hero-frame:nth-child(even).active img { animation-name: hero-kb-b; } } .hero-slides::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,6,10,0.62) 0%, rgba(5,6,10,0.18) 38%, rgba(5,6,10,0.86) 78%, var(--bg) 100%), linear-gradient(100deg, rgba(5,6,10,0.82) 0%, rgba(5,6,10,0.35) 48%, transparent 75%); } .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; } .hero-glow-1 { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: radial-gradient(circle, rgba(212,175,55,0.20), transparent 65%); animation: drift 14s ease-in-out infinite alternate; } .hero-glow-2 { width: 34vw; height: 34vw; right: -8vw; bottom: -6vw; background: radial-gradient(circle, rgba(90,120,220,0.14), transparent 65%); animation: drift 18s ease-in-out infinite alternate-reverse; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, 3vh) scale(1.12); } } .hero-inner { max-width: 780px; position: relative; z-index: 3; } .hero-ai-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; margin-bottom: 26px; background: rgba(10, 13, 20, 0.55); backdrop-filter: blur(8px); } .hero-ai-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 0 rgba(242, 210, 124, 0.6); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 210, 124, 0.55); } 70% { box-shadow: 0 0 0 11px rgba(242, 210, 124, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 210, 124, 0); } } .hero-eyebrow { font-size: 11.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px; } .hero-title { font-size: clamp(44px, 7.4vw, 96px); letter-spacing: -0.01em; } .hero-title .line { display: block; overflow: hidden; } .hero-title .line > span, .hero-title .line { animation: rise-in 1.1s var(--ease) both; } .hero-title .line:nth-child(2) { animation-delay: 0.14s; } @keyframes rise-in { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } } .line-gold { background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 35%, #fff5d6 50%, var(--gold-2) 65%, var(--gold-3) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rise-in 1.1s var(--ease) 0.14s both, gold-flow 6s linear 1.4s infinite; font-style: italic; } @keyframes gold-flow { from { background-position: 0% 0; } to { background-position: -220% 0; } } .hero-sub { margin: 26px 0 34px; max-width: 560px; font-size: clamp(15px, 1.6vw, 17.5px); color: var(--ink-dim); font-weight: 300; } .hero-sub strong { color: var(--ink); font-weight: 500; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 54px); margin-top: clamp(38px, 6vh, 64px); padding-top: 28px; border-top: 1px solid var(--line-soft); } .stat-num { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); color: var(--gold-2); letter-spacing: 0.02em; } .stat-label { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; } /* Reel progress dots: in hero content flow, below the CTAs */ .hero-dots { display: flex; flex-wrap: wrap; gap: 9px; margin: 30px 0 0; z-index: 3; pointer-events: none; } .hero-dots:empty { display: none; } .hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; pointer-events: auto; background: rgba(242,210,124,0.28); border-radius: 99px; transition: width 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease); } .hero-dots button:hover { background: rgba(242,210,124,0.55); } .hero-dots button.active { background: var(--gold-2); width: 24px; box-shadow: 0 0 8px rgba(242,210,124,0.45); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 30px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s, color 0.35s, border-color 0.35s; } .btn-primary { color: #14100a; background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-3)); box-shadow: 0 12px 34px rgba(212, 175, 55, 0.32); } .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); transform: translateX(-130%); transition: transform 0.7s var(--ease); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(212, 175, 55, 0.45); } .btn-primary:hover::after { transform: translateX(130%); } .btn-ghost { color: var(--ink); border-color: rgba(244, 241, 232, 0.25); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); transform: translateY(-3px); } /* ── Trust strip ──────────────────────────────────────────────────────── */ .trust { position: relative; z-index: 1; padding: clamp(48px, 8vh, 90px) clamp(18px, 5vw, 64px); } .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 1280px; margin: 0 auto; } .trust-item { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px 22px; background: var(--panel); backdrop-filter: blur(10px); transition: transform 0.45s var(--ease), border-color 0.45s, background 0.45s; } .trust-item:hover { transform: translateY(-5px); border-color: var(--line); background: var(--panel-2); } .trust-icon { font-size: 26px; margin-bottom: 14px; filter: saturate(0.85); } .trust-title { font-family: var(--serif); font-size: 19px; margin-bottom: 4px; } .trust-sub { font-size: 12.5px; color: var(--ink-mute); } /* ── Sections shared ──────────────────────────────────────────────────── */ .eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .eyebrow::before { content: "◆ "; font-size: 8px; vertical-align: 2px; } section h2 { font-size: clamp(30px, 4.4vw, 54px); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; max-width: 1280px; margin: 0 auto 40px; } /* ── Reveal on scroll ─────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ── Below-fold render deferral: skip layout/paint until near viewport ── */ .products, .look-section, .gold, .trust, .atelier, .watch-atelier, .pack, .story, .faq, .contact, .foot, .diamond-features { content-visibility: auto; contain-intrinsic-size: auto 800px; } /* ── Products ─────────────────────────────────────────────────────────── */ .products { position: relative; z-index: 1; padding: clamp(48px, 9vh, 110px) clamp(18px, 5vw, 64px); } .filters { display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-soft); border-radius: 999px; background: var(--panel); padding: 10px 18px; cursor: pointer; transition: all 0.35s var(--ease); } .chip:hover { border-color: var(--gold); color: var(--gold-2); transform: translateY(-2px); } .chip.active { color: #14100a; border-color: transparent; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 22px rgba(212, 175, 55, 0.3); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; max-width: 1280px; margin: 0 auto; } .card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s; } @media (hover: hover) { .card:hover { transform: translateY(-7px); border-color: var(--line); box-shadow: var(--shadow), 0 0 0 1px rgba(212,175,55,0.12); } .card:hover .card-img img { transform: scale(1.07); filter: brightness(1.06); } .card:hover .card-img::after { transform: translateX(130%); } } .card-img { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: #0d0f16; } .card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--ease), filter 1s var(--ease); } .card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(242, 210, 124, 0.14) 50%, transparent 65%); transform: translateX(-130%); transition: transform 0.9s var(--ease); pointer-events: none; } .card-img .placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-mute); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; background: radial-gradient(circle at 30% 25%, rgba(212,175,55,0.08), transparent 55%), var(--bg-2); } .card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #14100a; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 18px rgba(0,0,0,0.4); } .card-body { padding: 20px 20px 22px; } .card-cat { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; } .card-name { font-family: var(--serif); font-size: 21px; line-height: 1.2; margin-bottom: 9px; } .card-meta { margin-bottom: 14px; font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-cert { border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--gold-2); letter-spacing: 0.08em; } .card-price { display: flex; align-items: baseline; gap: 10px; } .card-price-now { font-family: var(--serif); font-size: 24px; color: var(--gold-2); letter-spacing: 0.01em; white-space: nowrap; } .card-price-was { font-size: 13px; color: var(--ink-mute); text-decoration: line-through; } /* ── Editorial card footer: price stack left, VIEW → right ── */ .card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 14px; } .card-price-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .origin-price-pair { display: grid; gap: 4px; min-width: 168px; } .origin-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; } .origin-price-label { color: var(--ink-mute); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .origin-price-row .card-price-now { color: var(--gold-2); font-family: var(--serif); font-size: 20px; white-space: nowrap; } .origin-price-row-natural { padding-top: 4px; border-top: 1px solid rgba(212,175,55,0.14); } .origin-price-row-natural small { grid-column: 2; color: #c4e5ce; font-size: 10px; margin-top: -5px; text-align: right; } .origin-price-note { margin: 2px 0 0; color: var(--ink-mute); font-size: 10px; line-height: 1.35; } .card-discount { display: flex; align-items: center; gap: 8px; } .card-was { font-size: 12.5px; color: var(--ink-mute); text-decoration: line-through; text-decoration-color: rgba(255, 122, 122, 0.55); white-space: nowrap; } .card-save { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fe0b0; border: 1px solid rgba(120, 200, 140, 0.4); background: rgba(90, 180, 110, 0.1); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .card-view { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .card-view:hover { color: var(--gold-2); border-bottom-color: var(--gold); } .card-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .card-actions .btn { padding: 7px 12px; font-size: 11px; } .card-quick { background: transparent; border: 0; cursor: pointer; font-family: var(--sans); padding: 3px 0; } /* ── Card action safety ───────────────────────────────────────────────── */ .card-add { appearance: none; -webkit-appearance: none; border: 1px solid rgba(212, 175, 55, 0.42); background: rgba(11, 13, 20, 0.96); color: var(--ink); cursor: pointer; font-family: var(--sans); } /* ── Mobile product-card price safeguard ── */ @media (max-width: 768px) { #grid .card-body { padding: 18px; } #grid .card-foot { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 14px; } #grid .card-price-stack { width: 100%; min-width: 0; } #grid .origin-price-pair { min-width: 0; padding: 12px 14px; border: 1px solid rgba(212, 175, 55, 0.26); border-radius: 10px; background: linear-gradient(135deg, rgba(16, 20, 30, 0.98), rgba(5, 7, 12, 0.98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 22px rgba(0, 0, 0, 0.22); isolation: isolate; } #grid .origin-price-row { grid-template-columns: 1fr; align-items: start; gap: 4px; } #grid .origin-price-label { line-height: 1.25; } #grid .origin-price-row .card-price-now { position: relative; z-index: 2; display: inline-flex; align-items: center; width: fit-content; min-height: 32px; padding: 2px 0; background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0)); color: #f2d27c; font-size: clamp(22px, 7vw, 27px); line-height: 1; text-shadow: 0 1px 14px rgba(212, 175, 55, 0.22); } #grid .origin-price-note { margin-top: 5px; max-width: 32ch; } #grid .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 0; } #grid .card-actions .card-view, #grid .card-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 9px 8px; text-align: center; } #grid .card-actions .card-view { border: 1px solid rgba(212, 175, 55, 0.25); border-bottom-width: 1px; } #grid .card-actions .card-add { appearance: none; -webkit-appearance: none; border: 1px solid rgba(212, 175, 55, 0.46); border-radius: 0; background: rgba(11, 13, 20, 0.96); color: var(--ink); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } #grid .card-actions .btn-primary::after { display: none; } } /* ── Catalogue quick view ─────────────────────────────────────────────── */ body.quick-view-open { overflow: hidden; } .quick-view { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 24px; pointer-events: none; opacity: 0; transition: opacity 180ms var(--ease); } .quick-view.is-open { pointer-events: auto; opacity: 1; } .quick-view-backdrop { position: absolute; inset: 0; background: rgba(2, 3, 6, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .quick-view-dialog { position: relative; width: min(920px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; background: linear-gradient(145deg, #12151e, #080a10); border: 1px solid rgba(212, 175, 55, 0.34); border-radius: 20px; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65); transform: translateY(18px) scale(0.98); transition: transform 220ms var(--ease); outline: none; } .quick-view.is-open .quick-view-dialog { transform: translateY(0) scale(1); } .quick-view-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 10, 16, 0.82); color: var(--ink); font-size: 25px; line-height: 1; cursor: pointer; } .quick-view-content { display: grid; grid-template-columns: minmax(290px, 0.9fr) minmax(0, 1.1fr); } .quick-view-media { min-height: 100%; background: radial-gradient(circle at 50% 35%, rgba(84, 118, 175, 0.18), transparent 50%), #0b0d14; } .quick-view-media img { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: contain; } .quick-view-details { padding: clamp(30px, 5vw, 52px); } .quick-view-eyebrow { margin: 0 0 10px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .quick-view-details h2 { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(30px, 3.8vw, 46px); line-height: 1.02; } .quick-view-metal { margin: 12px 0 22px; color: var(--ink-mute); font-size: 13px; } .quick-view-specs { padding: 18px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .quick-view-specs h3 { margin: 0 0 12px; color: var(--gold-2); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .quick-view-specs dl { display: grid; gap: 12px; margin: 0; } .quick-view-specs dl div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; } .quick-view-specs dt { color: var(--ink-mute); font-size: 11px; } .quick-view-specs dd { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.45; } .quick-view-pricing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; } .quick-view-price { color: var(--gold-2); font-family: var(--serif); font-size: 30px; } .quick-view-was { color: var(--ink-mute); font-size: 13px; text-decoration: line-through; } .quick-view-note { margin: 12px 0 0; color: var(--ink-mute); font-size: 11px; line-height: 1.5; } .quick-view-actions { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; margin-top: 24px; } .quick-view-actions .btn { justify-content: center; text-align: center; } /* PDP savings line under the live price */ .pdp-save { margin: -6px 0 14px; font-size: 13px; color: #9fe0b0; letter-spacing: 0.04em; } .pdp-save .card-was { color: var(--ink-mute); } .card-cta { display: flex; gap: 9px; } .card-cta .btn { flex: 1; padding: 12px 10px; font-size: 11px; } .btn-buy { } .empty { text-align: center; color: var(--ink-mute); padding: 60px 0; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; } /* ── The AI Atelier ───────────────────────────────────────────────────── */ .atelier { position: relative; z-index: 1; padding: clamp(48px, 9vh, 110px) clamp(18px, 5vw, 64px); } .atelier .section-head { align-items: flex-end; } .atelier-note { max-width: 340px; font-size: 13px; color: var(--ink-mute); line-height: 1.7; border-left: 2px solid var(--gold); padding-left: 16px; } .atelier-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 16px; max-width: 1280px; margin: 0 auto; } .atelier-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); aspect-ratio: 2 / 3; background: var(--bg-2); } .atelier-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .atelier-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter 1.1s var(--ease); } .atelier-item:hover img { transform: scale(1.06); filter: brightness(1.07); } .atelier-link { position: absolute; inset: 0; z-index: 2; outline-offset: -5px; } .atelier-link:focus-visible { outline: 2px solid var(--gold-2); } .atelier-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 18px 16px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, transparent, rgba(5, 6, 10, 0.85)); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .atelier-item:hover figcaption { opacity: 1; transform: translateY(0); } .atelier-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 26px 20px; border-radius: var(--radius); aspect-ratio: 2 / 3; border: 1px solid var(--line); background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(212, 175, 55, 0.12), transparent 65%), var(--bg-2); transition: transform 0.45s var(--ease), border-color 0.45s, background 0.45s; } .atelier-card:hover { transform: translateY(-5px); border-color: var(--gold); } .atelier-card-logo { width: 54px; height: 82px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 6px 18px rgba(212, 175, 55, 0.4)); } .atelier-card-title { font-family: var(--serif); font-size: 21px; } .atelier-card-sub { font-size: 12px; color: var(--ink-mute); line-height: 1.6; } .atelier-card-cta { margin-top: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2); } /* ── Owner portrait gallery ───────────────────────────────────────────── */ .owner-model-gallery { scroll-margin-top: 164px; } .owner-model-gallery .section-head { align-items: end; } .owner-model-gallery .atelier-note { border-left: 0; padding-left: 0; } .owner-gallery-shell { position: relative; max-width: 1280px; margin: 0 auto; } .owner-gallery-controls { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px; } .owner-gallery-control { min-width: 44px; height: 40px; padding: 0 14px; appearance: none; border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 11, 16, 0.9); color: var(--ink); cursor: pointer; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: transform 160ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease); } .owner-gallery-prev, .owner-gallery-next { font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: 0; } .owner-gallery-control:hover { border-color: var(--gold); color: var(--gold-2); background: rgba(212, 175, 55, 0.08); } .owner-gallery-control:active { transform: scale(.97); } .owner-gallery-control:focus-visible, .owner-gallery-track:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; } .owner-gallery-track { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; } .owner-gallery-track::-webkit-scrollbar { height: 4px; } .owner-gallery-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; } .owner-gallery-card { flex: 0 0 clamp(218px, 24vw, 316px); aspect-ratio: 4 / 5; scroll-snap-align: start; margin: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-2); } .owner-gallery-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 260ms var(--ease), filter 260ms var(--ease); } @media (hover: hover) and (pointer: fine) { .owner-gallery-card:hover img { transform: scale(1.025); filter: brightness(1.04); } } @media (max-width: 700px) { .owner-model-gallery { padding-inline: 18px; } .owner-model-gallery .section-head { align-items: start; gap: 14px; } .owner-gallery-controls { justify-content: flex-start; margin-bottom: 12px; } .owner-gallery-card { flex-basis: min(78vw, 300px); } } @media (prefers-reduced-motion: reduce) { .owner-gallery-track { scroll-behavior: auto; animation: none; } .owner-gallery-card img, .owner-gallery-control { transition: none; } } @media (max-width: 900px) { .atelier-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .atelier-feature { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; } .atelier-card { aspect-ratio: auto; } .atelier-note { max-width: none; } } /* ── Story ────────────────────────────────────────────────────────────── */ .story { position: relative; z-index: 1; padding: clamp(64px, 11vh, 140px) clamp(18px, 5vw, 64px); background: radial-gradient(ellipse 60% 55% at 82% 30%, rgba(212, 175, 55, 0.07), transparent 65%), linear-gradient(180deg, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent); } .story-inner { max-width: 800px; margin: 0 auto; text-align: left; } .story p { color: var(--ink-dim); margin: 22px 0; font-size: 16.5px; } .story-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* ── FAQ ──────────────────────────────────────────────────────────────── */ .faq { position: relative; z-index: 1; padding: clamp(48px, 9vh, 110px) clamp(18px, 5vw, 64px); } .faq-inner { max-width: 860px; margin: 0 auto; } .faq h2 { margin-bottom: 36px; } .faq details { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); margin-bottom: 12px; overflow: hidden; transition: border-color 0.4s, background 0.4s; } .faq details[open] { border-color: var(--line); background: var(--panel-2); } .faq summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: 19px; padding: 20px 24px; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 20px; color: var(--gold); transition: transform 0.4s var(--ease); } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq details p { padding: 0 24px 22px; color: var(--ink-dim); font-size: 14.5px; } .faq details p a, .faq details p b { color: var(--gold-2); } /* ── Contact ──────────────────────────────────────────────────────────── */ .contact { position: relative; z-index: 1; padding: clamp(48px, 9vh, 110px) clamp(18px, 5vw, 64px); background: radial-gradient(ellipse 55% 60% at 12% 20%, rgba(212, 175, 55, 0.06), transparent 60%); } .contact-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); } .muted { color: var(--ink-mute); margin: 16px 0 24px; } .contact-list { list-style: none; } .contact-list li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-dim); } .contact-list b { color: var(--ink); font-weight: 500; } .contact-list a { color: var(--gold-2); border-bottom: 1px solid transparent; transition: border-color 0.3s; } .contact-list a:hover { border-color: var(--gold-2); } .lead-form { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(12px); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; } .lead-form label { display: flex; flex-direction: column; gap: 7px; } .lead-form label > span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); } .lead-form label em { color: var(--ink-mute); font-style: normal; letter-spacing: 0.05em; text-transform: none; } .lead-form input, .lead-form select, .lead-form textarea { font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: rgba(5, 6, 10, 0.55); border: 1px solid var(--line-soft); border-radius: 10px; padding: 13px 15px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; } .lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14); } .lead-form select option { background: var(--bg-2); } .form-status { font-size: 13px; color: var(--gold-2); min-height: 18px; } .form-status.error { color: #e07a7a; } /* ── Footer ───────────────────────────────────────────────────────────── */ .foot { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); padding: clamp(36px, 6vh, 64px) clamp(18px, 5vw, 64px); background: var(--bg-2); } .foot-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; } .foot-brand { font-family: var(--serif); font-size: 21px; } .foot-sub { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; } .foot-social { display: flex; flex-wrap: wrap; gap: 18px; } .foot-social a { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-dim); transition: color 0.3s; } .foot-social a:hover { color: var(--gold-2); } .foot-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .foot-legal { font-size: 11.5px; color: var(--ink-mute); } .csuite-live { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 13px; color: var(--ink-mute); background: var(--panel); } .cs-dot { width: 7px; height: 7px; border-radius: 50%; background: #888; } .csuite-live[data-state="ok"] .cs-dot { background: #7bd88f; box-shadow: 0 0 8px rgba(123,216,143,0.7); animation: pulse 2.4s infinite; } .csuite-live[data-state="down"] .cs-dot { background: #e07a7a; } .csuite-live[data-state="ok"] .cs-state { color: #7bd88f; } /* ── Hermes chat ──────────────────────────────────────────────────────── */ .chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #14100a; border: 0; cursor: pointer; padding: 15px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 14px 40px rgba(212, 175, 55, 0.4); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .chat-fab:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 52px rgba(212, 175, 55, 0.55); } .fab-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #43c86e; border: 2px solid var(--bg); animation: pulse 2.4s infinite; } .chat-panel { position: fixed; right: 22px; bottom: 92px; z-index: 200; width: min(380px, calc(100vw - 44px)); height: min(540px, calc(100vh - 130px)); height: min(540px, calc(100svh - 130px)); /* svh override with vh fallback */ display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: rgba(10, 13, 20, 0.9); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow); animation: chat-in 0.45s var(--ease); } @keyframes chat-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat-panel header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(90deg, rgba(212,175,55,0.1), transparent); } .chat-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; color: #14100a; background: linear-gradient(135deg, var(--gold-2), var(--gold)); } .chat-name { font-weight: 600; font-size: 14px; } .chat-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-mute); } .chat-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #43c86e; } .chat-close { margin-left: auto; background: none; border: 0; color: var(--ink-mute); font-size: 24px; cursor: pointer; line-height: 1; transition: color 0.3s; } .chat-close:hover { color: var(--ink); } .chat-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .msg { display: flex; } .msg-u { justify-content: flex-end; } .msg-bubble { max-width: 82%; padding: 12px 15px; border-radius: 15px; font-size: 13.5px; line-height: 1.55; } .msg-h .msg-bubble { background: var(--panel-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; color: var(--ink); } .msg-u .msg-bubble { background: linear-gradient(135deg, rgba(212,175,55,0.24), rgba(212,175,55,0.14)); border: 1px solid var(--line); border-bottom-right-radius: 4px; } .msg-typing { display: inline-flex; gap: 4px; padding: 12px 15px; } .msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); animation: typing 1.1s infinite; } .msg-typing i:nth-child(2) { animation-delay: 0.18s; } .msg-typing i:nth-child(3) { animation-delay: 0.36s; } @keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } .chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line-soft); } .chat-form input { flex: 1; font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: rgba(5, 6, 10, 0.55); border: 1px solid var(--line-soft); border-radius: 999px; padding: 12px 17px; outline: none; transition: border-color 0.3s; } .chat-form input:focus { border-color: var(--gold); } .chat-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 17px; color: #14100a; background: linear-gradient(135deg, var(--gold-2), var(--gold)); transition: transform 0.3s var(--ease); } .chat-form button:hover { transform: scale(1.08); } /* Voice controls: mic + speaker toggle (≥44px touch targets) */ .chat-icon-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--gold-2); background: rgba(5, 6, 10, 0.55); border: 1px solid var(--line-soft); transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .chat-icon-btn:hover { border-color: var(--gold); transform: scale(1.06); } .chat-icon-btn.active { color: #14100a; border-color: var(--gold); background: linear-gradient(135deg, var(--gold-2), var(--gold)); } .chat-icon-btn.recording { color: #fff; border-color: #e05a5a; background: rgba(160, 40, 40, 0.55); animation: mic-pulse 1.2s ease-out infinite; } .chat-icon-btn.processing { color: var(--gold-2); border-color: var(--gold); animation: mic-pulse 1.2s ease-out infinite; } @keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 90, 90, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(224, 90, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 90, 90, 0); } } .chat-icon-btn.speaking { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45); } /* "Go there →" navigation action inside a Hermes bubble */ .msg-nav-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 10px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; color: #14100a; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 22px rgba(212, 175, 55, 0.35); transition: transform 0.3s var(--ease), box-shadow 0.3s; } .msg-nav-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212, 175, 55, 0.5); } /* POA (price on application) label */ .card-poa { font-family: var(--serif); font-style: italic; font-size: 1.05em; color: var(--gold-2); letter-spacing: 0.02em; } /* ── The Watch Atelier (landing section) ────────────────────────────── */ .watch-atelier { padding: clamp(70px, 9vw, 130px) clamp(18px, 5vw, 64px); } .wa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1280px; margin: 0 auto; } .wa-media { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .wa-item { position: relative; border-radius: 20px; overflow: hidden; margin: 0; border: 1px solid rgba(212, 175, 55, 0.25); aspect-ratio: 1/1.15; } .wa-item.wa-feature { grid-row: span 1; } .wa-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); } .wa-item:hover img { transform: scale(1.05); } .wa-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(5, 6, 8, 0.9)); font-family: var(--serif); font-size: 18px; color: var(--gold-2); } .wa-copy h2 { font-size: clamp(26px, 3.4vw, 42px); margin: 8px 0 14px; } .wa-copy p { color: var(--ink-mute); line-height: 1.75; } .wa-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; } .wa-list li { padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel-2, rgba(255,255,255,0.02)); font-size: 14.5px; line-height: 1.55; } .wa-note { font-size: 13.5px; color: var(--ink-mute); } .wa-copy .story-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } @media (max-width: 900px) { .wa-grid { grid-template-columns: 1fr; } .wa-media { order: 2; } } /* ── The Boutique (Deira Gold Souk) ─────────────────────────────────── */ .boutique { padding: clamp(70px, 9vw, 130px) clamp(18px, 5vw, 64px); } .btq-media { display: grid; gap: 18px; } .btq-media .wa-item { aspect-ratio: 16/10; } .btq-media .btq-second { aspect-ratio: 16/8; } .btq-map { margin-top: 34px; border: 1px solid rgba(212,175,55,0.28); border-radius: 18px; overflow: hidden; background: var(--card, #0d0f14); } .btq-map iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(0.35) contrast(1.02); } .btq-map-bar { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 0.92rem; } .btq-map-bar a { color: var(--gold, #d4af37); text-decoration: none; font-weight: 600; } .btq-map-bar a:hover { text-decoration: underline; } @media (max-width: 768px) { .btq-map iframe { height: 300px; } } /* ── Toast (cart.js) ──────────────────────────────────────────────────── */ .richie-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 300; padding: 14px 24px; border-radius: 999px; background: rgba(10, 13, 20, 0.92); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; backdrop-filter: blur(12px); box-shadow: var(--shadow); animation: chat-in 0.4s var(--ease); } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .nav { padding: 10px 16px; } .brand-sub { display: none; } .brand-name { font-size: 14px; white-space: nowrap; } .logo-img { width: 138px; height: 50px; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 0 8px rgba(201,168,76,0.28)); } .nav-links > a:not(.wa):not(.cart-pill) { display: none; } .contact-inner { grid-template-columns: 1fr; } .hero { align-items: flex-end; padding-top: 150px; } .hero-frame img { object-position: center 15%; } .hero-dots { margin-top: 22px; gap: 8px; } .foot-inner { flex-direction: column; align-items: flex-start; } .foot-meta { align-items: flex-start; } .fab-label { display: none; } .chat-fab { padding: 16px; } } /* ══ Storefront extensions: gold, product page, checkout ══════════════ */ /* Live-price tag */ .live-tag { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; vertical-align: middle; margin-left: 8px; border: 1px solid rgba(212,175,55,0.5); color: var(--gold-2); } .live-tag[data-live="1"] { background: rgba(123,216,143,0.12); border-color: rgba(123,216,143,0.45); color: #7bd88f; } /* Gold section */ .gold { position: relative; padding: clamp(70px, 9vw, 130px) clamp(18px, 5vw, 64px); background: radial-gradient(900px 480px at 85% -10%, rgba(212,175,55,0.12), transparent 60%), linear-gradient(180deg, rgba(212,175,55,0.05), transparent 30%); border-top: 1px solid rgba(212,175,55,0.18); border-bottom: 1px solid rgba(212,175,55,0.18); } .gold-hero { max-width: 820px; margin-bottom: 34px; } .gold-hero h2 { font-size: clamp(30px, 4.6vw, 56px); margin: 8px 0 14px; } .gold-hero h2 em { color: var(--gold-2); font-style: normal; } .gold-sub { color: var(--ink-mute); font-size: 16px; line-height: 1.7; max-width: 640px; } .gold-tickerbar { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 20px; border-radius: 14px; border: 1px solid rgba(212,175,55,0.35); background: rgba(212,175,55,0.07); } .gold-tickerbar .gt-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .gold-tickerbar .gt-price { font-family: var(--serif); font-size: 24px; color: var(--gold-2); } .gold-tickerbar .gt-dot { width: 8px; height: 8px; border-radius: 50%; background: #7bd88f; animation: pulse 1.6s infinite; } /* Packaging section */ .pack { padding: clamp(70px, 9vw, 130px) clamp(18px, 5vw, 64px); } .pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; align-items: stretch; } .pack-item { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(212,175,55,0.25); aspect-ratio: 4/3; } .pack-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); display: block; } .pack-item:hover img { transform: scale(1.05); } .pack-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; background: linear-gradient(transparent, rgba(5,6,8,0.9)); font-family: var(--serif); font-size: 20px; color: var(--gold-2); } .pack-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(10px, 2vw, 30px); } .pack-copy h2 { font-size: clamp(26px, 3.4vw, 42px); margin: 8px 0 14px; } .pack-copy p { color: var(--ink-mute); line-height: 1.75; } /* Product detail page */ .pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(90px, 12vw, 150px) clamp(18px, 5vw, 64px) clamp(40px, 5vw, 70px); max-width: 1280px; margin: 0 auto; } .pdp-media { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(212,175,55,0.3); background: #101318; box-shadow: 0 40px 90px rgba(0,0,0,0.55); } .pdp-media img { width: 100%; display: block; aspect-ratio: 1; object-fit: contain; background: #101318; } .pdp-media .card-badge { top: 18px; left: 18px; } .pdp-info h1 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; margin: 10px 0 12px; } .pdp-spec { color: var(--gold-2); font-size: 14px; letter-spacing: 0.04em; margin-bottom: 18px; } .pdp-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; } .pdp-price-now { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); color: var(--gold-2); } .gold-note { font-size: 13px; color: var(--ink-mute); border: 1px dashed rgba(212,175,55,0.4); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; line-height: 1.6; } .pdp-desc { color: var(--ink-mute); line-height: 1.8; font-size: 16px; margin-bottom: 24px; } .pdp-origin { margin: 0 0 24px; padding: 18px; border: 1px solid rgba(212,175,55,0.28); border-radius: 16px; background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(255,255,255,0.018)); } .pdp-origin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pdp-origin h2 { margin: 2px 0 0; font-size: 22px; } .origin-required { color: var(--gold-2); border: 1px solid rgba(212,175,55,0.38); border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .pdp-origin-copy, .pdp-origin-disclosure { color: var(--ink-mute); font-size: 13px; line-height: 1.6; margin: 10px 0 0; } .pdp-origin-disclosure { font-size: 11px; color: #c5d0d0; } .origin-choice-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .origin-choice { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 13px; background: rgba(0,0,0,0.16); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .origin-choice:hover, .origin-choice.active { border-color: var(--gold-2); background: rgba(212,175,55,0.12); transform: translateY(-1px); } .origin-choice span { display: grid; gap: 3px; } .origin-choice strong { font-size: 13px; } .origin-choice small { color: var(--ink-mute); font-size: 11px; } .origin-choice b { color: var(--gold-2); font-family: var(--serif); font-size: 19px; white-space: nowrap; } .pdp-qty { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .pdp-qty label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .pdp-qty input { width: 76px; padding: 10px 12px; border-radius: 12px; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.35); color: var(--ink); font-size: 16px; } .pdp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } .pdp-cta .btn { flex: 1 1 150px; text-align: center; } .pdp-trust { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--ink-mute); border-top: 1px solid rgba(212,175,55,0.2); padding-top: 18px; } .crumbs { max-width: 1280px; margin: 0 auto; padding: clamp(90px, 12vw, 150px) clamp(18px, 5vw, 64px) 0; font-size: 13px; color: var(--ink-mute); } .crumbs + .pdp { padding-top: 18px; } .crumbs a { color: var(--gold-2); text-decoration: none; } .crumbs span { margin: 0 8px; opacity: 0.5; } .crumbs em { font-style: normal; } .pdp-related { padding: 0 clamp(18px, 5vw, 64px) clamp(70px, 9vw, 120px); max-width: 1280px; margin: 0 auto; } .p404 { text-align: center; padding: clamp(140px, 20vw, 220px) 24px; } .p404-title { font-size: clamp(30px, 5vw, 54px); margin-bottom: 14px; } .p404 .muted { color: var(--ink-mute); margin-bottom: 28px; } /* Checkout */ .co-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(22px, 3.5vw, 48px); align-items: start; max-width: 1180px; margin: 0 auto; padding: clamp(110px, 14vw, 160px) clamp(18px, 5vw, 64px) clamp(70px, 9vw, 120px); } .co-cart h1 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 22px; } .co-line { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(212,175,55,0.15); } .co-thumb { border-radius: 14px; overflow: hidden; border: 1px solid rgba(212,175,55,0.25); display: block; } .co-thumb img { width: 92px; height: 92px; object-fit: cover; display: block; } .co-line-name { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; } .co-line-meta { font-size: 12px; color: var(--ink-mute); margin-bottom: 10px; } .co-qty { display: flex; align-items: center; gap: 10px; font-size: 14px; } .co-qty button { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.35); color: var(--gold-2); font-size: 15px; } .co-remove { width: auto !important; padding: 0 12px; font-size: 12px !important; color: var(--ink-mute) !important; } .co-line-price { font-family: var(--serif); font-size: 19px; color: var(--gold-2); white-space: nowrap; } .co-total { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 14px; font-size: 18px; } .co-total strong { font-family: var(--serif); font-size: 32px; color: var(--gold-2); } .co-price-disclosure { display: grid; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid rgba(212,175,55,0.2); background: rgba(212,175,55,0.05); color: var(--ink-mute); font-size: 12px; line-height: 1.55; } .co-price-disclosure strong { color: var(--ink); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .co-payment-pending { margin: 0; padding: 12px; color: #d8c78f; border: 1px solid rgba(212,175,55,0.25); border-radius: 12px; background: rgba(212,175,55,0.06); font-size: 12px; line-height: 1.5; } .co-cart .pdp-trust { margin-top: 10px; } .co-form { display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(212,175,55,0.3); border-radius: 22px; padding: clamp(20px, 3vw, 34px); background: linear-gradient(160deg, rgba(212,175,55,0.06), rgba(255,255,255,0.015)); } .co-form h2 { font-size: 24px; margin-bottom: 6px; } .co-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .co-form input, .co-form textarea { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-family: var(--sans); color: var(--ink); background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.3); outline: none; } .co-form input:focus, .co-form textarea:focus { border-color: var(--gold-2); } /* Responsive */ @media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .co-grid { grid-template-columns: 1fr; } .co-line { grid-template-columns: 76px 1fr; } .co-thumb img { width: 76px; height: 76px; } .co-line-price { grid-column: 2; } } .lead-form select { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-family: var(--sans); color: var(--ink); background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.3); outline: none; } .lead-form select:focus { border-color: var(--gold-2); } .lead-form select option { background: #0b0d10; color: #f4f1e8; } .co-form .btn { width: 100%; } /* ═══════════════════════════════════════════════════════════════════════ v3 — Transparent gold visuals · native-app mobile shell ═══════════════════════════════════════════════════════════════════════ */ /* ── Transparent-PNG gold containers: dark radial glass, no white boxes ── */ .card-img-transparent { background: radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.16), transparent 62%), radial-gradient(circle at 50% 115%, rgba(212, 175, 55, 0.08), transparent 55%), linear-gradient(180deg, #12151f, #0a0d14); display: grid; place-items: center; } .card-img-transparent img { object-fit: contain; padding: 12%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(212, 175, 55, 0.14)); } .pdp-media-transparent { background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0.18), transparent 62%), radial-gradient(circle at 50% 118%, rgba(212, 175, 55, 0.09), transparent 55%), linear-gradient(180deg, #131724, #0a0d14); display: grid; place-items: center; } .pdp-media-transparent img { object-fit: contain; padding: 9%; filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 34px rgba(212, 175, 55, 0.16)); } .co-thumb-transparent { background: radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.16), transparent 65%), linear-gradient(180deg, #12151f, #0a0d14); display: grid; place-items: center; } .co-thumb-transparent img { object-fit: contain; padding: 10%; } /* Coin front/back side switcher */ .pdp-sides { display: flex; gap: 12px; margin-top: 14px; } .pdp-side { width: 84px; height: 84px; border-radius: 16px; cursor: pointer; overflow: hidden; border: 1px solid var(--line-soft); background: radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.14), transparent 65%), linear-gradient(180deg, #12151f, #0a0d14); transition: border-color 0.3s, transform 0.3s var(--ease); } .pdp-side img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .pdp-side.active { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212, 175, 55, 0.22); } /* ── Weight selector ──────────────────────────────────────────────────── */ .pdp-weight { margin: 0 0 20px; } .pdp-weight-label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; } .weight-pills { display: flex; flex-wrap: wrap; gap: 10px; } .weight-pill { min-width: 62px; min-height: 48px; padding: 12px 18px; border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line-soft); cursor: pointer; transition: all 0.25s var(--ease); -webkit-tap-highlight-color: transparent; } .weight-pill.active { color: #14100a; border-color: transparent; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 8px 22px rgba(212, 175, 55, 0.3); } .weight-pill:active { transform: scale(0.95); } .weight-select { display: none; /* desktop uses pills; select is the accessible/mobile fallback */ width: 100%; padding: 14px 16px; border-radius: 14px; font-family: var(--sans); font-size: 16px; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(212, 175, 55, 0.35); outline: none; } .weight-select option { background: #0b0d10; color: #f4f1e8; } /* Card price "from" prefix */ .card-price-from { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); align-self: center; } /* Compact gold strip */ .gold { padding: clamp(48px, 7vw, 84px) clamp(18px, 5vw, 64px); } .gold-hero { margin-bottom: 26px; } .gold-strip-line { color: var(--ink-dim); font-size: 16px; line-height: 1.7; max-width: 620px; border-left: 2px solid var(--gold); padding-left: 16px; } /* ── Bottom tab bar (native app shell, ≤1024px) ───────────────────────── */ .tabbar { display: none; } @media (max-width: 1024px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 10, 16, 0.92); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-top: 1px solid var(--line-soft); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; position: relative; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); border-radius: 14px; -webkit-tap-highlight-color: transparent; transition: color 0.25s; } .tabbar a svg { width: 22px; height: 22px; } .tabbar a:active { background: rgba(212, 175, 55, 0.08); } .tabbar a.active { color: var(--gold-2); } .tabbar a.active::before { content: ""; position: absolute; top: -7px; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 10px rgba(242, 210, 124, 0.6); } .tabbar-cart-badge { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #14100a; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 4px 12px rgba(212, 175, 55, 0.45); } /* Chat fab floats above the tab bar */ .chat-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .chat-panel { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } } /* ── Native-app mobile (≤768px) ───────────────────────────────────────── */ @media (max-width: 768px) { /* Overscroll containment, no iOS zoom on inputs */ html, body { overscroll-behavior-y: none; } input, select, textarea { font-size: 16px !important; } /* Sticky compact header: always blurred, slim marquee ticker */ .topbar { background: rgba(5, 6, 10, 0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line-soft); } .ticker { font-size: 10px; } .ticker-track { padding: 5px 16px; gap: 22px; } .nav { padding: 8px 14px; } .brand { gap: 8px; } .logo-img { width: 76px; height: 34px; } .nav-links { gap: 10px; } .nav-links .wa { display: none; } /* WhatsApp lives in the tab bar */ .cur-toggle button { padding: 8px 10px; } /* Hero: app-like full-bleed */ .hero { min-height: 92vh; min-height: 92svh; padding: 118px 20px 64px; } .hero-cta .btn { flex: 1 1 100%; } /* Grids → horizontal snap carousels */ .grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 18px 18px; margin: 0 -18px; max-width: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .grid::-webkit-scrollbar { display: none; } .grid .card { flex: 0 0 72vw; max-width: 340px; scroll-snap-align: center; } .quick-view { align-items: end; padding: 0; } .quick-view-dialog { width: 100%; max-height: min(88svh, 780px); border-radius: 20px 20px 0 0; } .quick-view-content { grid-template-columns: 1fr; } .quick-view-media img { min-height: 270px; max-height: 360px; } .quick-view-details { padding: 26px 20px calc(30px + env(safe-area-inset-bottom, 0px)); } .quick-view-specs dl div { grid-template-columns: 102px 1fr; } .quick-view-actions { grid-template-columns: 1fr; } .card-cta .btn { min-height: 48px; } .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .filters::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; min-height: 44px; } /* Tap states instead of hover */ .card:active { transform: scale(0.98); } .btn:active { transform: scale(0.97); } .card, .btn, .chip, .tabbar a, .weight-pill { -webkit-tap-highlight-color: transparent; } /* Product page: full-width media, select fallback hidden (pills are primary) */ .crumbs { padding-top: 108px; } .pdp { padding-top: 16px; gap: 22px; } .pdp-media { margin: 0 -18px; border-radius: 0; border-left: 0; border-right: 0; } .pdp-media img { aspect-ratio: 1 / 1.02; } .pdp-media-transparent img { padding: 7%; } /* Owner-batch PDPs use dark product photography; strengthen the reading layer below the full-width media for reliable handset legibility. */ body[data-page="product"] .pdp-info { padding: 4px 2px calc(138px + env(safe-area-inset-bottom, 0px)); } body[data-page="product"] .pdp-info.reveal { opacity: 1; transform: none; } body[data-page="product"] .pdp-info h1 { color: #f5f0e8; font-size: clamp(30px, 8.2vw, 38px); line-height: 1.1; margin: 14px 0 14px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } body[data-page="product"] .pdp-spec { color: #e4ca79; line-height: 1.6; margin-bottom: 16px; } body[data-page="product"] .pdp-price-now { color: #f2d779; } body[data-page="product"] .pdp-desc, body[data-page="product"] .pdp-origin-copy, body[data-page="product"] .pdp-origin-disclosure { color: #d6d2c8; line-height: 1.72; } .pdp-cta { display: none; } /* replaced by the sticky action bar */ .pdp-qty { display: none; } .weight-pill { flex: 1 1 auto; min-height: 56px; font-size: 16px; } .pdp-related .grid .card { flex-basis: 64vw; } /* Sticky bottom Add-to-cart / Buy-now action bar (above tab bar) */ .pdp-actionbar { position: fixed; left: 0; right: 0; z-index: 180; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(8, 10, 16, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--line); } .pdp-actionbar-price { display: flex; flex-direction: column; min-width: 0; } .pdp-actionbar-name { font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; } .pdp-actionbar-price strong { font-family: var(--serif); font-size: 19px; color: var(--gold-2); white-space: nowrap; } .pdp-actionbar .btn { min-height: 50px; padding: 12px 16px; font-size: 12px; } .pdp-actionbar .btn-primary { flex: 1.2; } .pdp-actionbar .btn-ghost { flex: 1; } body[data-page="product"] { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } body[data-page="product"] .chat-fab { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); } body[data-page="product"] .chat-panel { bottom: calc(216px + env(safe-area-inset-bottom, 0px)); } /* Checkout comfort */ .co-grid { padding-top: 108px; } .co-form .btn { min-height: 52px; } .co-qty button { width: 40px; height: 40px; font-size: 18px; } .co-remove { width: auto !important; } /* ── Mobile scroll performance (90% of traffic is phones) ─────────── */ /* Fixed full-viewport decorative layers repaint every frame on real GPUs — make them absolute (paint once, scroll with the page) on phones */ body::before, body::after { position: absolute; } body::after { height: 100vh; } /* vignette: cover first viewport only, no bottom pinning */ /* No blanket compositor hints on scroll children */ .look-tag { will-change: auto; } /* Static hero — no Ken Burns zoom repaint loop while scrolling */ .hero-frame.active img { animation: none; transform: none; } /* Ambient drifting glows: blur(90px) + infinite transform is the costliest layer */ .hero-glow { animation: none; filter: blur(40px); opacity: 0.35; } /* Card shine sweep off on touch devices */ .card-img::after { display: none; } /* V11 diamond motion: all sparkles/shimmers off on mobile (desktop-only below) */ .card-diamond .card-img::before { display: none; } .hero-sparkles { display: none; } .hero-diamond .hero-slides::before { display: none; } .diamond-features .section-head h2::after { display: none; } /* Hotspot dots & floating chips: static on mobile, solid (no backdrop blur) */ .look-dot::before, .look-dot::after { animation: none; opacity: 0.4; transform: scale(1.2); } .look-tag { animation: none; background: rgba(10, 12, 18, 0.94); border-color: rgba(212, 175, 55, 0.55); } .hero-ai-badge .pulse, .gold-tickerbar .gt-dot { animation: none; } /* No backdrop blur over scrollable content — biggest iOS scroll-jank source */ .topbar, .topbar.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 6, 10, 0.94); transition: background 0.5s var(--ease); } .hero-ai-badge, .look-tag { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Cheaper scroll-progress hairline (no glowing repaint per scroll frame) */ .scroll-progress { box-shadow: none; } /* Lighter card shadows on the scroll carousel */ .grid .card, .look-figure { box-shadow: 0 6px 18px rgba(0,0,0,0.35); } } /* ── Small-phone hardening (≤480px) — real low-end devices ────────────── */ @media (max-width: 480px) { /* content-visibility estimates (auto 800px) mis-size short mobile sections and cause scrollbar jumping / blank flashes on slow devices — drop it; mobile sections are short enough to render eagerly */ .products, .look-section, .gold, .trust, .atelier, .watch-atelier, .pack, .story, .faq, .contact, .foot, .diamond-features { content-visibility: visible; contain-intrinsic-size: none; } /* Chat FAB must never overlap the bottom tab bar (tab bar = 68px + safe-area); hoisted above it and shrunk so it can't swallow tab-bar touches */ .chat-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 14px; padding: 12px 16px; font-size: 12px; box-shadow: 0 8px 22px rgba(212, 175, 55, 0.32); } .fab-dot { animation: none; } body[data-page="product"] .chat-fab { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); } /* Scroll-progress hairline: 2px repaint per scroll frame — gone on small phones */ .scroll-progress { display: none; } /* No box-shadows on scrolling carousel cards — repaint-heavy on weak GPUs; the card border alone carries the visual separation */ .grid .card, .look-figure, .card { box-shadow: none; } /* No opacity/filter/transform transitions on content inside scrolled strips */ .card { transition: border-color 0.3s; } .card-img img { transition: none; } .card:active { transform: none; } /* no scale — avoids a compositor pass per tap */ /* Reveal-on-scroll: fade only, no transform slide (cheaper during fling) */ .reveal { transform: none; transition: opacity 0.6s var(--ease); } } /* Action bar hidden on desktop */ @media (min-width: 769px) { .pdp-actionbar { display: none; } } /* ── Shop the Look ─────────────────────────────────────────────────── */ .look-section { padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 72px); max-width: 1440px; margin: 0 auto; } .look-lede { color: var(--ink-dim); font-size: 14px; max-width: 34ch; text-align: right; } /* Mobile-native snap carousel; elegant grid on desktop */ .look-grid { display: flex; gap: 16px; margin-top: 36px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-inline: 4px; padding: 4px 4px 18px; scrollbar-width: none; } .look-grid::-webkit-scrollbar { display: none; } .look-grid .look-figure { flex: 0 0 78vw; scroll-snap-align: center; scroll-snap-stop: always; } /* Touch-scroll: never trap vertical page scroll on carousels; long-press must not hijack */ .look-grid, .grid, .filters { touch-action: pan-x pan-y; } .look-grid img, .grid img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } @media (min-width: 900px) { .look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; overflow: visible; padding: 0; } .look-grid .look-figure { flex: none; } } @media (min-width: 1280px) { .look-grid { grid-template-columns: repeat(3, 1fr); } } .look-figure { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow); } .look-figure img { display: block; width: 100%; height: auto; } .look-caption { position: absolute; left: 16px; bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-2); letter-spacing: 0.04em; text-shadow: 0 2px 10px rgba(0,0,0,0.8); } .look-hotspot { position: absolute; left: var(--lx); top: var(--ly); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; text-decoration: none; z-index: 2; } /* Gold-core dot with concentric pulsing rings (transform/opacity only) */ .look-dot { position: relative; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c9 0%, var(--gold) 45%, #8a6a1c 100%); box-shadow: 0 0 0 3px rgba(5,6,10,0.65), 0 0 16px rgba(212,175,55,0.95), 0 2px 6px rgba(0,0,0,0.6); } .look-dot::before, .look-dot::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(212,175,55,0.8); animation: look-pulse 2.2s var(--ease) infinite; } .look-dot::before { inset: -5px; } .look-dot::after { inset: -5px; animation-delay: 1.1s; } @keyframes look-pulse { 0% { transform: scale(0.6); opacity: 1; } 70%, 100% { transform: scale(2.1); opacity: 0; } } /* Floating glassmorphism chip — a design object, not a label */ .look-tag { position: relative; display: flex; flex-direction: column; line-height: 1.25; padding: 8px 13px; background: rgba(10, 12, 18, 0.72); border: 1px solid transparent; border-radius: 12px; background-image: linear-gradient(rgba(10,12,18,0.72), rgba(10,12,18,0.72)), linear-gradient(135deg, rgba(212,175,55,0.95), rgba(120,90,25,0.35) 45%, rgba(244,226,168,0.9)); background-origin: border-box; background-clip: padding-box, border-box; backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.18), inset 0 0 18px rgba(212, 175, 55, 0.08), 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(212, 175, 55, 0.22); animation: look-float 4.5s ease-in-out infinite; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); will-change: transform; } @keyframes look-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } } .look-tag-name { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; font-variant: small-caps; } .look-tag-price { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--gold-2); white-space: nowrap; text-shadow: 0 0 12px rgba(212,175,55,0.35); } @media (hover: hover) and (min-width: 769px) { .look-hotspot { perspective: 500px; } .look-hotspot:hover .look-tag, .look-hotspot:focus-visible .look-tag { animation-play-state: paused; transform: translateY(-4px) rotateX(9deg) rotateY(-7deg); box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.25), inset 0 0 22px rgba(212, 175, 55, 0.14), 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.4); } } @media (max-width: 560px) { .look-tag-name { display: none; } .look-lede { text-align: left; } } /* ── Final mobile overrides — must come AFTER the .look-tag/.look-dot keyframe definitions above (same specificity, source order was re-enabling the float/pulse animations on phones) ─────────────────────────────────── */ @media (max-width: 768px) { .look-tag { animation: none; will-change: auto; } .look-dot::before, .look-dot::after { animation: none; opacity: 0.4; transform: scale(1.2); } } /* ── i18n: language switcher, translating shimmer, RTL ───────────────── */ .lang-switch { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(212,175,55,0.35); border-radius: 999px; padding: 2px 6px 2px 8px; background: rgba(212,175,55,0.06); } .lang-switch .lang-globe { font-size: 12px; line-height: 1; } .lang-switch select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; max-width: 76px; padding: 4px 2px; cursor: pointer; outline: none; } .lang-switch select option { color: #111; } @media (max-width: 768px) { .lang-switch { padding: 1px 4px 1px 6px; } .lang-switch select { max-width: 52px; font-size: 11px; padding: 6px 1px; } } #i18n-shimmer { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 9999; display: inline-flex; align-items: center; gap: 8px; background: rgba(11,13,16,0.92); color: #e9d9a6; border: 1px solid rgba(212,175,55,0.4); border-radius: 999px; padding: 7px 14px; font-size: 12px; letter-spacing: 0.04em; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } #i18n-shimmer.on { opacity: 1; transform: translateX(-50%) translateY(0); } #i18n-shimmer .i18n-shimmer-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4af37; animation: i18n-shimmer-pulse 1s ease-in-out infinite; } @keyframes i18n-shimmer-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } } /* ── RTL (ar / ur / fa / he): mirror layout; carousels keep LTR physics ── */ html[dir="rtl"] body { text-align: right; } /* Off-canvas skip-link must be mirrored in RTL — left:-9999px creates 11k px of scrollable overflow in RTL and blanks the layout viewport (headless + real) */ html[dir="rtl"] .skip-link { left: auto !important; right: -9999px; } /* In RTL the dots row is right-aligned — keep clear of the fixed chat FAB */ html[dir="rtl"] .hero-dots { padding-right: 116px; } html[dir="rtl"] .nav, html[dir="rtl"] .nav-links, html[dir="rtl"] .topbar { direction: rtl; } html[dir="rtl"] .section-head, html[dir="rtl"] .hero-inner, html[dir="rtl"] .story-inner, html[dir="rtl"] .wa-copy, html[dir="rtl"] .pack-copy, html[dir="rtl"] .faq-inner, html[dir="rtl"] .contact-inner, html[dir="rtl"] .foot-inner { text-align: right; } html[dir="rtl"] .wa-list, html[dir="rtl"] .contact-list { padding-right: 0; padding-left: 0; } /* Horizontal snap strips (product grids, shop-the-look) keep LTR scroll physics so the autoplay/swipe math in store.js is unchanged — but the content inside each card mirrors. */ html[dir="rtl"] .grid, html[dir="rtl"] .look-grid { direction: ltr; text-align: initial; } html[dir="rtl"] .card, html[dir="rtl"] .look-tag, html[dir="rtl"] .co-line { direction: rtl; text-align: right; } html[dir="rtl"] .card-foot, html[dir="rtl"] .pdp-cta, html[dir="rtl"] .story-cta, html[dir="rtl"] .hero-cta { direction: rtl; } html[dir="rtl"] .chat-panel { direction: rtl; text-align: right; } html[dir="rtl"] .chat-form { direction: rtl; } html[dir="rtl"] .chat-form input { text-align: right; } html[dir="rtl"] .tabbar { direction: rtl; } html[dir="rtl"] #i18n-shimmer { direction: rtl; } html[dir="rtl"] .pdp-info, html[dir="rtl"] .co-cart, html[dir="rtl"] .co-form { text-align: right; } /* ══ V11 — Diamond-first storefront ════════════════════════════════════ All new motion lives in the desktop-only scope at the bottom of this block and is hard-killed for mobile again at the very end of the file (base rules later in the file win — learned the hard way). */ /* Hero: stronger legibility overlay for the macro-diamond plate */ .hero-diamond .hero-slides::after { background: linear-gradient(180deg, rgba(4,5,9,0.68) 0%, rgba(4,5,9,0.24) 36%, rgba(4,5,9,0.90) 78%, var(--bg) 100%), linear-gradient(100deg, rgba(4,5,9,0.86) 0%, rgba(4,5,9,0.44) 46%, transparent 72%); } /* ── "Why Diamond" feature strip (static — safe on all devices) ─────── */ .diamond-features { position: relative; z-index: 1; padding: clamp(48px, 8vh, 96px) clamp(18px, 5vw, 64px); } .df-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 1280px; margin: 0 auto; } .df-card { border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); padding: 26px 24px 28px; } .df-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--gold-2); margin-bottom: 16px; border: 1px solid rgba(212,175,55,0.35); background: radial-gradient(circle at 30% 25%, rgba(212,175,55,0.16), rgba(10,13,20,0.45) 70%); } .df-icon svg { width: 24px; height: 24px; display: block; } .df-title { font-family: var(--serif); font-size: 20px; margin-bottom: 8px; } .df-sub { font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; } /* ── Diamond card treatment ─────────────────────────────────────────── */ /* "◆ Diamond" badge: top-right so it never collides with a promo badge */ .card-badge-diamond { left: auto; right: 14px; color: #0a0f1a; background: linear-gradient(135deg, #f4f9ff, #bcd8f5 55%, #e8f2ff); box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 14px rgba(190,220,255,0.35); } /* Thin prismatic gradient border hint (static — no repaint cost) */ .card-diamond { border: 1px solid transparent; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)) padding-box, linear-gradient(140deg, rgba(200,225,255,0.55), rgba(212,175,55,0.16) 45%, rgba(200,225,255,0.32)) border-box; } /* ── Diamond motion — transform/opacity only ────────────────────────── */ @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.35) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1) rotate(20deg); } } @keyframes hero-shimmer { 0%, 100% { opacity: 0; transform: translateX(-5%); } 50% { opacity: 1; transform: translateX(5%); } } /* Sparkle layer: inert by default, only switched on for desktop below */ .hero-sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; } .hero-sparkles span { position: absolute; width: 16px; height: 16px; opacity: 0; background: radial-gradient(circle, #ffffff 0%, rgba(200,225,255,0.55) 45%, transparent 75%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); } .hero-sparkles span:nth-child(1) { top: 20%; right: 32%; } .hero-sparkles span:nth-child(2) { top: 34%; right: 14%; width: 11px; height: 11px; } .hero-sparkles span:nth-child(3) { top: 12%; right: 52%; width: 12px; height: 12px; } .hero-sparkles span:nth-child(4) { top: 46%; right: 40%; width: 9px; height: 9px; } .hero-sparkles span:nth-child(5) { top: 28%; right: 6%; width: 13px; height: 13px; } /* Desktop-only motion: prismatic sweeps, twinkles, hero shimmer */ @media (hover: hover) and (min-width: 769px) { /* Prismatic light-sweep across diamond card images on hover */ .card-diamond .card-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 28%, rgba(210,230,255,0.24) 45%, rgba(255,240,200,0.16) 56%, transparent 72%); transform: translateX(-130%); transition: transform 1.1s var(--ease); pointer-events: none; } .card-diamond:hover .card-img::before { transform: translateX(130%); } /* Hero sparkles + slow shimmer over the diamond plate */ .hero-sparkles { display: block; } .hero-sparkles span { animation: twinkle 3.8s ease-in-out infinite; } .hero-sparkles span:nth-child(2) { animation-delay: 0.8s; } .hero-sparkles span:nth-child(3) { animation-delay: 1.6s; } .hero-sparkles span:nth-child(4) { animation-delay: 2.4s; } .hero-sparkles span:nth-child(5) { animation-delay: 3.1s; } .hero-diamond .hero-slides::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(200,225,255,0.10) 50%, transparent 62%); animation: hero-shimmer 9s ease-in-out infinite; pointer-events: none; } /* Twinkle accent on the Why-Diamond section header */ .diamond-features .section-head h2 { position: relative; display: inline-block; } .diamond-features .section-head h2::after { content: ""; position: absolute; top: -14px; right: -28px; width: 18px; height: 18px; opacity: 0; background: radial-gradient(circle, #ffffff 0%, rgba(200,225,255,0.5) 50%, transparent 75%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 4.4s ease-in-out 1.1s infinite; } } /* RTL: keep the diamond badge mirrored correctly */ html[dir="rtl"] .card-badge-diamond { right: auto; left: 14px; } /* ── FINAL mobile kill-overrides (must stay last — later rules win) ─── */ @media (max-width: 768px) { .hero-sparkles { display: none !important; } .hero-sparkles span { animation: none !important; } .hero-diamond .hero-slides::before { display: none !important; animation: none !important; } /* V13 reel: crossfade only on mobile — hard-kill Ken Burns drift */ .hero-frame img, .hero-frame.active img { animation: none !important; transform: none !important; } .card-diamond .card-img::before { display: none !important; animation: none !important; transition: none !important; } .diamond-features .section-head h2::after { display: none !important; animation: none !important; } } /* ── Motion Atelier: original, silent model loops ─────────────────────── */ .motion-atelier { position: relative; overflow: hidden; padding: clamp(72px, 10vw, 136px) clamp(18px, 5vw, 64px); background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(29, 44, 68, 0.24), transparent 72%), var(--bg); } .motion-atelier-head { max-width: 1280px; margin: 0 auto 30px; } .motion-atelier-note { max-width: 340px; color: var(--ink-mute); font-size: 13px; line-height: 1.6; } .motion-atelier-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .motion-model { position: relative; min-height: clamp(310px, 34vw, 480px); overflow: hidden; background: #05070b; border: 1px solid rgba(220, 191, 94, 0.18); border-radius: 2px; isolation: isolate; text-decoration: none; color: var(--ink); } .motion-model-feature { grid-column: span 2; grid-row: span 2; min-height: clamp(630px, 69vw, 970px); } .motion-model video { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; mix-blend-mode: screen; transition: transform 900ms var(--ease), filter 900ms var(--ease); filter: saturate(0.9) contrast(1.08) brightness(0.86); z-index: 1; } .motion-model-fallback { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: screen; filter: saturate(0.88) contrast(1.08) brightness(0.8); } .motion-model.motion-fallback-active video { display: none; } .motion-model::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(3,5,9,0.06) 35%, rgba(3,5,9,0.88) 100%); } .motion-model-overlay { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 5px; text-transform: uppercase; letter-spacing: 0.15em; } .motion-model-overlay strong { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: clamp(18px, 1.75vw, 27px); font-weight: 400; } .motion-model-overlay small { color: var(--gold-2); font-size: 9px; letter-spacing: 0.18em; } @media (hover: hover) and (min-width: 769px) { .motion-model:hover video { transform: scale(1.045); filter: saturate(1.08) contrast(1.1) brightness(1); } .motion-model:hover { border-color: rgba(220, 191, 94, 0.65); } } @media (max-width: 900px) { .motion-atelier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .motion-model-feature { grid-column: span 2; grid-row: auto; min-height: 580px; } } @media (max-width: 560px) { .motion-atelier { padding-inline: 14px; } .motion-atelier-grid { gap: 7px; } .motion-model { min-height: 255px; } .motion-model-feature { min-height: 450px; } .motion-model-overlay { left: 12px; right: 12px; bottom: 13px; } } @media (prefers-reduced-motion: reduce) { .motion-model video { display: none; } .motion-model { background-position: center; background-size: cover; } } /* ── Top-of-page Motion Atelier: five floating editorial figures ─────── */ .motion-atelier.motion-atelier-hero { max-width: 1440px; margin: -46px auto 0; padding: clamp(24px, 3.2vw, 44px) clamp(18px, 3.5vw, 52px) clamp(46px, 5vw, 76px); z-index: 5; border: 1px solid rgba(220, 191, 94, 0.2); border-top-color: rgba(236, 215, 137, 0.38); background: linear-gradient(135deg, rgba(7, 10, 16, 0.96), rgba(12, 16, 25, 0.86)), radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201, 168, 76, 0.18), transparent 72%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42); } .motion-atelier-hero .motion-atelier-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 20px; } .motion-atelier-hero .motion-atelier-head h2 { font-size: clamp(30px, 4vw, 54px); } .motion-atelier-hero .motion-atelier-note { margin: 0; text-align: right; } .motion-atelier-hero .motion-atelier-grid { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 16px); } .motion-atelier-hero .motion-model, .motion-atelier-hero .motion-model-feature { grid-column: auto; grid-row: auto; min-height: clamp(240px, 26vw, 370px); border-radius: 0; background: #020306; } .motion-atelier-hero .motion-model video, .motion-atelier-hero .motion-model-fallback { mix-blend-mode: normal; filter: saturate(0.98) contrast(1.05) brightness(1.03); } .motion-atelier-hero .motion-model::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 20%, transparent 18%, rgba(2, 3, 6, 0.2) 62%, rgba(2, 3, 6, 0.78) 100%); } .motion-atelier-hero .motion-model::after { z-index: 2; } .motion-atelier-hero .motion-model-overlay { z-index: 3; left: 13px; right: 13px; bottom: 14px; } .motion-atelier-hero .motion-model-overlay strong { font-size: clamp(16px, 1.35vw, 22px); } .motion-atelier-hero .motion-model-overlay small { font-size: 8px; } .motion-atelier-hero .motion-model-campaign .motion-model-overlay { bottom: 69px; } .motion-shop-look { position: absolute; z-index: 3; left: 13px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(243, 222, 144, 0.72); background: rgba(4, 6, 10, 0.82); color: #fff6d9; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 9px 24px rgba(0, 0, 0, 0.32); pointer-events: none; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); } .motion-shop-look span { color: var(--gold-2); font-size: 13px; line-height: 1; } .motion-model-campaign:focus-visible { outline: 3px solid #f3de90; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(2, 3, 6, 0.92), inset 0 0 0 1px rgba(243, 222, 144, 0.6); } @media (hover: hover) and (min-width: 769px) { .motion-model-campaign:hover .motion-shop-look { background: #f3de90; border-color: #f3de90; color: #151108; } .motion-model-campaign:hover .motion-shop-look span { color: #151108; } } @media (max-width: 900px) { .motion-atelier.motion-atelier-hero { margin-top: 0; border-inline: 0; } .motion-atelier-hero .motion-atelier-head { display: block; } .motion-atelier-hero .motion-atelier-note { text-align: left; margin-top: 10px; } .motion-atelier-hero .motion-atelier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .motion-atelier-hero .motion-model, .motion-atelier-hero .motion-model-feature { min-height: 300px; } .motion-atelier-hero .motion-model-feature { grid-column: span 2; min-height: 440px; } } @media (max-width: 560px) { .motion-atelier.motion-atelier-hero { padding-inline: 14px; } .motion-atelier-hero .motion-model, .motion-atelier-hero .motion-model-feature { min-height: 250px; } .motion-atelier-hero .motion-model-feature { min-height: 380px; } .motion-atelier-hero .motion-model-campaign .motion-model-overlay { bottom: 66px; } .motion-shop-look { left: 12px; bottom: 12px; min-height: 44px; padding-inline: 12px; font-size: 8px; } } /* Supplied-campaign editorial: bright imagery against a restrained black atelier */ .high-jewellery-edit { display:grid; grid-template-columns:1.1fr 1fr .8fr; align-items:center; gap:32px; padding:110px clamp(24px,6vw,96px); background:linear-gradient(110deg,#08090d,#14100b 52%,#08090d); } .high-jewellery-copy h2 { font-size:clamp(42px,5vw,76px); margin:12px 0 20px; color:var(--ink); } .high-jewellery-copy p { max-width:38rem; color:var(--ink-dim); font-size:17px; } .gold-btn { display:inline-flex; gap:12px; margin-top:24px; padding:14px 20px; background:var(--gold-2); color:#151108; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .high-jewellery-image { position:relative; overflow:hidden; min-height:510px; background:#21190f; } .high-jewellery-image img { width:100%; height:100%; object-fit:cover; filter:brightness(1.22) contrast(1.04); transition:transform .7s var(--ease); } .high-jewellery-image:hover img { transform:scale(1.045); } .high-jewellery-image span { position:absolute; left:16px; bottom:16px; color:#fff; font-family:var(--serif); font-size:23px; text-shadow:0 3px 18px #000; } .high-jewellery-image-detail { min-height:380px; margin-top:88px; } @media(max-width:800px){.high-jewellery-edit{grid-template-columns:1fr 1fr;gap:12px;padding:64px 20px}.high-jewellery-copy{grid-column:1/-1}.high-jewellery-image{min-height:320px}.high-jewellery-image-detail{min-height:270px;margin-top:44px}.high-jewellery-copy h2{font-size:44px}} /* ── Final Add to Cart Rendering Guard ── */ #grid .card-actions button.card-add { appearance: none !important; -webkit-appearance: none !important; border: 1px solid rgba(212, 175, 55, 0.46) !important; border-radius: 0 !important; background: rgba(11, 13, 20, 0.96) !important; color: var(--ink) !important; font-family: var(--sans) !important; } /* ── NJ release card layout safety ─────────────────────────────────────── */ /* Price detail and actions must remain separate at all viewport widths. */ #grid .card-foot { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 14px; } #grid .card-price-stack { width: 100%; min-width: 0; } #grid .origin-price-pair { min-width: 0; } #grid .card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 0; gap: 8px; } #grid .card-actions .card-view, #grid .card-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0; padding: 9px 8px; text-align: center; } /* ── Continuous campaign ribbons: editorial assets, not product endorsements ── */ .campaign-ribbon-section { position: relative; overflow: clip; padding: 4.25rem 0 1.25rem; scroll-margin-top: 116px; background: linear-gradient(180deg, rgba(11, 13, 20, 0.96) 0%, #08090d 100%); } .men-ribbon { padding-top: 2.5rem; padding-bottom: 4.25rem; background: linear-gradient(180deg, #08090d 0%, rgba(26, 18, 12, 0.98) 100%); } .campaign-ribbon-head { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto 1.4rem; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; } .campaign-ribbon-head .eyebrow { margin: 0 0 0.45rem; color: var(--gold); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.23em; text-transform: uppercase; } .campaign-ribbon-head h2 { max-width: 16ch; margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(2.15rem, 4vw, 3.75rem); font-weight: 400; line-height: 0.94; } .campaign-ribbon-head p { max-width: 28ch; margin: 0; color: var(--ink-dim); font-size: 0.78rem; line-height: 1.55; text-align: right; } .campaign-ribbon-viewport { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%); } .campaign-ribbon-track { display: flex; width: max-content; will-change: transform; animation: campaign-ribbon-scroll 84s linear infinite; } .men-ribbon .campaign-ribbon-track { animation-duration: 98s; animation-direction: reverse; } .campaign-ribbon-set { display: flex; flex: none; gap: clamp(0.75rem, 1.3vw, 1.25rem); padding-right: clamp(0.75rem, 1.3vw, 1.25rem); } .campaign-ribbon-card { display: block; flex: none; width: clamp(148px, 14vw, 220px); aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 1px; background: #0b0d14; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25); } .campaign-ribbon-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } @keyframes campaign-ribbon-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 640px) { .campaign-ribbon-section { padding-top: 3.25rem; scroll-margin-top: 96px; } .men-ribbon { padding-top: 2rem; padding-bottom: 3.25rem; } .campaign-ribbon-head { width: min(100% - 2rem, 520px); display: block; margin-bottom: 1rem; } .campaign-ribbon-head p { margin-top: 0.75rem; text-align: left; } .campaign-ribbon-track { animation-duration: 72s; } .men-ribbon .campaign-ribbon-track { animation-duration: 84s; } .campaign-ribbon-card { width: 142px; } } @media (prefers-reduced-motion: reduce) { .campaign-ribbon-track { animation: none; transform: none; } .campaign-ribbon-set[aria-hidden="true"] { display: none; } } /* ── Richie mobile install invitation ─────────────────────────────────── */ .richie-install-app { position: fixed; z-index: 650; right: max(1rem, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 5.25rem); left: max(1rem, env(safe-area-inset-left)); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 34px; align-items: center; gap: .7rem; max-width: 580px; margin: 0 auto; padding: .72rem; border: 1px solid rgba(217, 184, 93, .56); background: rgba(7, 7, 7, .96); box-shadow: 0 18px 46px rgba(0, 0, 0, .52); color: #f4ede3; backdrop-filter: blur(16px); } .richie-install-app__brand { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; background: #050505; border: 1px solid rgba(217, 184, 93, .32); } .richie-install-app__brand img { width: 38px; height: 38px; object-fit: contain; } .richie-install-app__copy { min-width: 0; display: grid; gap: .16rem; } .richie-install-app__copy strong { color: #f4ede3; font: 600 12px/1.25 Inter, sans-serif; letter-spacing: .02em; } .richie-install-app__copy span { color: #bdb5aa; font: 400 10px/1.35 Inter, sans-serif; } .richie-install-app__action, .richie-install-app__dismiss { appearance: none; border-radius: 0; font-family: Inter, sans-serif; cursor: pointer; } .richie-install-app__action { min-height: 44px; border: 1px solid #d9b85d; background: #d9b85d; color: #080808; padding: 0 .72rem; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .richie-install-app__dismiss { width: 34px; min-height: 44px; border: 0; background: transparent; color: #d1c8ba; font-size: 24px; line-height: 1; } .richie-install-app__action:focus-visible, .richie-install-app__dismiss:focus-visible { outline: 3px solid #f3de90; outline-offset: 3px; } .richie-install-app__ios-guide { grid-column: 2 / -1; padding: .42rem .1rem .05rem; color: #d8d1c4; font: 400 11px/1.45 Inter, sans-serif; } .richie-install-app__ios-guide b { display: block; color: #f3de90; font-weight: 600; } @media (min-width: 641px) { .richie-install-app { left: auto; right: 1.25rem; bottom: 1.25rem; width: min(430px, calc(100vw - 2.5rem)); } } @media (max-width: 640px) { .richie-install-app { bottom: calc(env(safe-area-inset-bottom) + 5.1rem); } } @media (prefers-reduced-motion: reduce) { .richie-install-app { backdrop-filter: none; } } /* ── V15 Hero Motion: responsive editorial trio ───────────────────────── */ /* The video is decorative; the live headline and real customer controls remain above it. A centred portrait source protects handset composition, while the 16:9 source gives tablets and desktop the full three-model treatment. */ .hero.has-hero-video { --hero-scroll-progress: 0; background: #020203; } .hero-motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #020203; pointer-events: none; } .hero-motion::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(2,2,3,.76) 0%, rgba(2,2,3,.12) 35%, rgba(2,2,3,.22) 58%, rgba(2,2,3,.92) 100%), linear-gradient(90deg, rgba(2,2,3,.80) 0%, rgba(2,2,3,.32) 50%, rgba(2,2,3,.12) 78%, rgba(2,2,3,.46) 100%); } .hero-motion video, .hero-motion-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hero-motion video { z-index: 0; } .hero-motion-fallback { display: none; z-index: 0; } .hero-motion.is-fallback video { display: none; } .hero-motion.is-fallback .hero-motion-fallback-desktop { display: block; } .hero-motion-fallback-mobile { display: none !important; } .hero.has-hero-video .hero-bg { z-index: 1; opacity: .55; } .hero.has-hero-video .hero-sparkles { z-index: 2; } .hero.has-hero-video .hero-inner { position: relative; z-index: 3; opacity: calc(1 - (var(--hero-scroll-progress) * .96)); transform: translate3d(0, calc(var(--hero-scroll-progress) * -7vh), 0); transition: opacity 180ms linear, transform 180ms linear; will-change: opacity, transform; } .hero.has-hero-video .hero-inner:focus-within { opacity: 1; transform: none; } .hero-motion-toggle { position: absolute; z-index: 4; right: clamp(18px, 3vw, 44px); top: clamp(110px, 14vh, 148px); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(242, 210, 124, .48); border-radius: 999px; background: rgba(4, 4, 5, .76); color: var(--ink); font: 700 9px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.34); transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease); } .hero-motion-toggle:hover { background: rgba(20, 17, 10, .92); border-color: var(--gold-2); } .hero-motion-toggle:active { transform: scale(.97); } .hero-motion-toggle:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; } .hero-motion-toggle-icon { width: 8px; height: 10px; display: inline-block; border-inline: 2px solid currentColor; } .hero-motion-toggle[aria-pressed="true"] .hero-motion-toggle-icon { width: 0; height: 0; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; } @media (max-width: 768px) { .hero.has-hero-video { min-height: 92vh; min-height: 92svh; } .hero-motion::after { background: linear-gradient(180deg, rgba(2,2,3,.70) 0%, rgba(2,2,3,.16) 27%, rgba(2,2,3,.30) 56%, rgba(2,2,3,.96) 100%), linear-gradient(90deg, rgba(2,2,3,.42), transparent 45%, rgba(2,2,3,.28)); } .hero-motion.is-fallback .hero-motion-fallback-desktop { display: none; } .hero-motion.is-fallback .hero-motion-fallback-mobile { display: block !important; } .hero.has-hero-video .hero-inner { max-width: min(100%, 460px); transform: translate3d(0, calc(var(--hero-scroll-progress) * -5vh), 0); } .hero-motion-toggle { right: 14px; top: 102px; width: 44px; padding: 0; background: rgba(4,4,5,.92); box-shadow: none; } .hero-motion-toggle-label { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-motion video { display: none; } .hero-motion-fallback-desktop { display: block; } .hero-motion-fallback-mobile { display: none !important; } .hero.has-hero-video .hero-inner { opacity: 1; transform: none; transition: none; will-change: auto; } .hero-motion-toggle { display: none; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .hero-motion-fallback-desktop { display: none; } .hero-motion-fallback-mobile { display: block !important; } }