/* ══════════════════════════════════════════════════════════════════════ SELAKA BALI · Global Stylesheet Drop 01 Showcase · Luxury Editorial · Mobile-first Fonts: Cormorant Garamond (display) + Montserrat (body) Palette: Neutral — Ivory, Charcoal, Stone, Warm White ══════════════════════════════════════════════════════════════════════ */ /* ── Design Tokens ───────────────────────────────────────────────────── */ :root { /* Neutral Palette — jewellery is the star */ --ivory: #F8F6F2; /* page background */ --ivory-2: #F0EDE8; /* card background */ --ivory-3: #E8E4DE; /* subtle surface */ --stone: #B5B0A8; /* muted text / lines */ --charcoal: #1C1C1A; /* primary ink */ --ink-2: #3A3935; /* secondary ink */ --white: #FFFFFF; /* Accent: warm gold (used sparingly) */ --gold: #A8884A; --gold-lt: #C9A96E; /* Lines */ --line: rgba(28,28,26,.07); --line-2: rgba(28,28,26,.13); --line-3: rgba(28,28,26,.22); /* Shadows */ --sh: 0 1px 3px rgba(28,28,26,.05), 0 8px 32px rgba(28,28,26,.06); --sh-2: 0 4px 20px rgba(28,28,26,.08), 0 24px 64px rgba(28,28,26,.10); /* Radii */ --r: 5px; --r-lg: 12px; --pill: 999px; /* Layout */ --nav-h: 68px; --pad: 20px; --max-w: 1200px; } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { background: var(--ivory); color: var(--charcoal); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; background: none; border: none; cursor: pointer; } /* Grain texture overlay */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px; } /* ── Container ───────────────────────────────────────────────────────── */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); } /* ── Shared Label ────────────────────────────────────────────────────── */ .section-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px; } /* ── Animations ──────────────────────────────────────────────────────── */ @keyframes up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideRight { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } } /* Scroll-triggered via IntersectionObserver — JS adds .is-visible. .js class on ensures no flash if JS is enabled. */ .js .fade { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); } .js .fade.is-visible { opacity: 1; transform: translateY(0); } .js .fade.is-visible.fade-1 { transition-delay: .04s; } .js .fade.is-visible.fade-2 { transition-delay: .14s; } .js .fade.is-visible.fade-3 { transition-delay: .26s; } .js .fade.is-visible.fade-4 { transition-delay: .38s; } .js .fade.is-visible.fade-5 { transition-delay: .50s; } /* ══════════════════════════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 500; background: rgba(248,246,242,.95); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease; } .nav.scrolled { box-shadow: 0 4px 32px rgba(28,28,26,.06); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } /* Brand — always centered via grid */ .nav-brand { grid-column: 2; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 15px; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; transition: opacity .2s; } .nav-brand span { font-weight: 400; letter-spacing: .28em; } .nav-brand:hover { opacity: .55; } /* Desktop nav (right side) */ .nav-desktop { grid-column: 3; display: none; align-items: center; justify-content: flex-end; gap: 36px; } .nd-link { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); position: relative; transition: color .2s; } .nd-link::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--charcoal); transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.22,1,.36,1); } .nd-link:hover { color: var(--charcoal); } .nd-link:hover::after { transform: scaleX(1); } /* Mobile hamburger */ .nav-trigger { grid-column: 1; display: flex; align-items: center; justify-content: flex-start; width: 44px; height: 44px; padding: 0; -webkit-tap-highlight-color: transparent; } .bars { width: 22px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; } .bars span { display: block; height: 1px; background: var(--charcoal); transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .2s, width .3s; transform-origin: left center; } .bars span:nth-child(2) { width: 16px; } .bars span:nth-child(3) { width: 11px; } body.menu-open .bars span:nth-child(1) { transform: rotate(42deg) translateY(-1px); width: 22px; } body.menu-open .bars span:nth-child(2) { opacity: 0; } body.menu-open .bars span:nth-child(3) { transform: rotate(-42deg) translateY(1px); width: 22px; } /* Nav spacer balances the 3-col grid on mobile */ .nav-spacer { grid-column: 3; } /* ══════════════════════════════════════════════════════════════════════ FULL-SCREEN OVERLAY MENU ══════════════════════════════════════════════════════════════════════ */ .nav-overlay { position: fixed; inset: 0; z-index: 480; background: var(--ivory); display: flex; flex-direction: column; padding: var(--nav-h) var(--pad) 40px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .36s cubic-bezier(.22,1,.36,1), transform .36s cubic-bezier(.22,1,.36,1); overflow-y: auto; } .nav-overlay.open { opacity: 1; pointer-events: all; transform: translateY(0); } .nvo-brand { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--stone); padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; } .nvo-nav { display: flex; flex-direction: column; flex: 1; } .nvo-link { display: flex; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .2s; } .nvo-link:last-child { border-bottom: none; } .nav-overlay.open .nvo-link { animation: slideRight .5s cubic-bezier(.22,1,.36,1) forwards; } .nav-overlay.open .nvo-link:nth-child(1) { animation-delay: .05s; } .nav-overlay.open .nvo-link:nth-child(2) { animation-delay: .12s; } .nav-overlay.open .nvo-link:nth-child(3) { animation-delay: .19s; } .nvo-num { font-size: 10px; letter-spacing: .1em; color: var(--stone); text-transform: uppercase; min-width: 24px; flex-shrink: 0; } .nvo-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 9vw, 54px); font-weight: 300; line-height: 1; transition: color .2s; } .nvo-link:hover .nvo-title { color: var(--gold); } .nvo-footer { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--stone); letter-spacing: .07em; opacity: 0; } .nav-overlay.open .nvo-footer { animation: up .5s .28s cubic-bezier(.22,1,.36,1) forwards; } /* ══════════════════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-3); border-radius: var(--r); background: var(--ivory-2); color: var(--charcoal); transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; } .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .btn:active { transform: translateY(0); box-shadow: none; opacity: .8; } .btn-dark { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); } .btn-dark:hover { background: var(--ink-2); } .btn-outline { background: transparent; color: var(--charcoal); border-color: var(--line-3); } .btn-outline:hover { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); } .btn-wa { background: #16A34A; color: var(--white); border-color: #16A34A; padding: 18px 28px; font-size: 11px; } .btn-wa:hover { background: #15803D; border-color: #15803D; } .btn-full { width: 100%; } /* ══════════════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════════════ */ .hero { display: grid; grid-template-columns: 1fr; min-height: calc(100svh - var(--nav-h)); border-bottom: 1px solid var(--line); } .hero-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ivory-2); order: 2; } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; } .hero-img-wrap:hover img { transform: scale(1.03); } .hero-badge { position: absolute; top: 18px; left: 18px; background: rgba(248,246,242,.90); backdrop-filter: blur(12px); border: 1px solid var(--line-2); padding: 8px 16px; border-radius: var(--pill); font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); } .hero-body { order: 1; padding: 44px var(--pad) 56px; background: var(--white); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; } .hero-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 20px; } .eyebrow-line { display: block; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0; } .hero-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(52px, 14vw, 88px); line-height: .92; letter-spacing: -.015em; margin-bottom: 22px; } .hero-title em { font-style: italic; color: var(--gold); } .hero-sub { font-size: 14px; font-weight: 300; color: var(--stone); line-height: 1.8; max-width: 38ch; margin-bottom: 34px; } .hero-cta-btn { align-self: flex-start; } /* ══════════════════════════════════════════════════════════════════════ DROP 01 — COLLECTION SECTION ══════════════════════════════════════════════════════════════════════ */ .drop-section { padding-top: 72px; padding-bottom: 80px; } .drop-header { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 2px; } .drop-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; } .drop-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(42px, 9vw, 68px); line-height: .93; letter-spacing: -.01em; } .drop-title em { font-style: italic; color: var(--gold); } .drop-desc { font-size: 13px; font-weight: 300; color: var(--stone); line-height: 1.8; max-width: 46ch; } /* Product Grid */ .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } /* Product Card */ .p-card { background: var(--white); display: flex; flex-direction: column; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .22s; } .p-card:hover { background: var(--ivory-2); } .p-card:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .p-img { aspect-ratio: 3/4; overflow: hidden; background: var(--ivory-2); position: relative; } .p-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); } .p-card:hover .p-img img { transform: scale(1.06); } .p-body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; } .p-type { font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; } .p-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 18px; line-height: 1.1; margin-bottom: auto; padding-bottom: 12px; } .p-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); } .p-price { font-size: 11px; font-weight: 500; color: var(--ink-2); } .p-cta-hint { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); transition: letter-spacing .2s; } .p-card:hover .p-cta-hint { letter-spacing: .18em; } /* ══════════════════════════════════════════════════════════════════════ OUR STORY ══════════════════════════════════════════════════════════════════════ */ .story-section { background: var(--ivory-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 72px 0; } .story-inner { display: grid; grid-template-columns: 1fr; gap: 48px; } .story-text { display: flex; flex-direction: column; justify-content: center; } .story-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(36px, 8vw, 58px); line-height: .94; margin-bottom: 24px; } .story-title em { font-style: italic; color: var(--gold); } .story-text p { font-size: 14px; font-weight: 300; color: var(--ink-2); line-height: 1.85; max-width: 46ch; margin-bottom: 16px; } .story-list { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; } .story-list li { font-size: 12px; font-weight: 400; padding: 12px 16px; border-radius: var(--r); background: var(--ivory); display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; } .story-list li::before { content: '—'; color: var(--gold); font-size: 10px; flex-shrink: 0; padding-top: 2px; } .story-img-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ivory-3); aspect-ratio: 4/3; } .story-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .story-img-caption { position: absolute; left: 14px; bottom: 14px; background: rgba(248,246,242,.90); backdrop-filter: blur(12px); border: 1px solid var(--line-2); padding: 7px 14px; border-radius: var(--pill); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); } /* ══════════════════════════════════════════════════════════════════════ CONSIGNMENT & PARTNERS ══════════════════════════════════════════════════════════════════════ */ .consignment-section { background: var(--charcoal); color: var(--white); padding: 80px 0 88px; } .consignment-inner { display: flex; flex-direction: column; gap: 52px; } .consignment-header { max-width: 640px; } .consignment-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(38px, 8vw, 62px); line-height: .94; margin-bottom: 22px; color: var(--white); } .consignment-title em { font-style: italic; color: var(--gold-lt); } .consignment-sub { font-size: 14px; font-weight: 300; line-height: 1.85; color: rgba(255,255,255,.52); max-width: 50ch; } /* Override label for dark bg */ .consignment-section .section-label { color: rgba(255,255,255,.35); } .consignment-pillars { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); overflow: hidden; } .consignment-pillar { background: rgba(255,255,255,.03); padding: 32px 28px 36px; transition: background .22s; } .consignment-pillar:hover { background: rgba(255,255,255,.06); } .pillar-num { display: block; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 12px; } .consignment-pillar h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; color: var(--white); margin-bottom: 10px; } .consignment-pillar p { font-size: 13px; font-weight: 300; color: rgba(255,255,255,.50); line-height: 1.75; } .consignment-cta-block { border-top: 1px solid rgba(255,255,255,.1); padding-top: 44px; } .consignment-cta-text { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(22px, 4vw, 30px); line-height: 1.35; color: rgba(255,255,255,.8); margin-bottom: 28px; } .consignment-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; } /* Override buttons on dark bg */ .consignment-section .btn-dark { background: var(--white); color: var(--charcoal); border-color: var(--white); } .consignment-section .btn-dark:hover { background: var(--ivory-2); } .consignment-section .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.3); } .consignment-section .btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); } .consignment-section .btn-wa { background: #16A34A; border-color: #16A34A; color: var(--white); } /* ══════════════════════════════════════════════════════════════════════ SILVER CARE SECTION ══════════════════════════════════════════════════════════════════════ */ .care-section { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 72px 0 80px; } .care-header { display: flex; flex-direction: column; padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 2px; } .care-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(42px, 9vw, 68px); line-height: .93; margin-bottom: 16px; } .care-title em { font-style: italic; color: var(--gold); } .care-sub { font-size: 13px; font-weight: 300; color: var(--stone); line-height: 1.8; max-width: 46ch; } .care-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 2px; } .care-card { background: var(--white); padding: 30px 24px 36px; } .care-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; margin-bottom: 10px; } .care-card > p { font-size: 13px; color: var(--stone); line-height: 1.75; } .care-steps { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 2px; } .care-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--ivory); border-radius: var(--r); } .care-num { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--gold); line-height: 1; flex-shrink: 0; min-width: 18px; padding-top: 1px; } .care-step-body strong { display: block; font-size: 12px; font-weight: 500; margin-bottom: 3px; } .care-step-body span { font-size: 12px; color: var(--stone); line-height: 1.6; } .care-banner { background: var(--charcoal); color: var(--white); padding: 36px 28px; border-radius: var(--r-lg); margin-top: 2px; } .care-banner h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--white); margin-bottom: 10px; } .care-banner p { font-size: 13px; color: rgba(255,255,255,.52); line-height: 1.8; margin-bottom: 24px; max-width: 48ch; } /* ══════════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════════ */ .site-footer { background: var(--ivory-2); border-top: 1px solid var(--line); padding: 36px 0 40px; } .footer-inner { display: flex; flex-direction: column; gap: 24px; } .footer-brand { display: flex; flex-direction: column; gap: 6px; } .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; } .footer-tagline { font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); } .footer-nav { display: flex; flex-wrap: wrap; gap: 20px; } .footer-nav a { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); transition: color .2s; } .footer-nav a:hover { color: var(--charcoal); } .footer-copy { font-size: 10px; color: var(--stone); letter-spacing: .06em; } /* ══════════════════════════════════════════════════════════════════════ PRODUCT MODAL ══════════════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 800; background: rgba(28,28,26,.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .32s ease; display: flex; align-items: flex-end; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-sheet { width: 100%; background: var(--white); border-radius: 20px 20px 0 0; max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); transition: transform .42s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; position: relative; } .modal-overlay.open .modal-sheet { transform: translateY(0); } .modal-drag { width: 36px; height: 3px; background: var(--line-2); border-radius: 2px; margin: 14px auto 0; flex-shrink: 0; } .modal-body { padding: 20px 20px 0; display: flex; flex-direction: column; } .modal-img { aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; background: var(--ivory-2); margin-bottom: 24px; } .modal-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; } .modal-content { padding-bottom: 16px; } .modal-tag { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; display: block; } .modal-name { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 400; line-height: 1; margin-bottom: 8px; } .modal-price { font-size: 15px; font-weight: 400; color: var(--ink-2); margin-bottom: 18px; } .modal-desc { font-size: 13px; font-weight: 300; color: var(--stone); line-height: 1.85; margin-bottom: 22px; } .modal-features { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; } .modal-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; font-weight: 400; padding: 11px 14px; background: var(--ivory); border-radius: var(--r); line-height: 1.5; } .modal-features li::before { content: '—'; color: var(--gold); flex-shrink: 0; font-size: 10px; padding-top: 2px; } /* Close button */ .modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; background: var(--ivory-2); border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--stone); cursor: pointer; transition: background .2s; z-index: 2; } .modal-close:hover { background: var(--ivory-3); } /* Sticky WhatsApp CTA — always visible at bottom */ .modal-sticky-cta { position: sticky; bottom: 0; padding: 14px 20px 20px; background: var(--white); border-top: 1px solid var(--line); } /* ══════════════════════════════════════════════════════════════════════ TABLET ≥ 640px ══════════════════════════════════════════════════════════════════════ */ @media (min-width: 640px) { :root { --pad: 28px; } .hero { grid-template-columns: 1fr 1fr; min-height: auto; } .hero-img-wrap { aspect-ratio: unset; min-height: 560px; order: 2; } .hero-body { order: 1; justify-content: flex-end; border-bottom: none; border-right: 1px solid var(--line); padding: 56px 44px; } .drop-header { flex-direction: row; align-items: flex-end; } .drop-desc { text-align: right; max-width: 34ch; } .products-grid { grid-template-columns: repeat(4, 1fr); } .story-inner { grid-template-columns: 1fr 1fr; align-items: center; } .story-img-wrap { aspect-ratio: 3/4; } .care-grid { grid-template-columns: repeat(2, 1fr); } .care-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } .consignment-pillars { grid-template-columns: repeat(3, 1fr); } .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } /* Modal: centered dialog on tablet+ */ .modal-overlay { align-items: center; justify-content: center; padding: 24px; } .modal-sheet { max-width: 520px; border-radius: 16px; max-height: 86svh; transform: scale(.94) translateY(12px); } .modal-overlay.open .modal-sheet { transform: scale(1) translateY(0); } .modal-drag { display: none; } } /* ══════════════════════════════════════════════════════════════════════ DESKTOP ≥ 1024px ══════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { :root { --pad: 40px; } /* Show desktop nav, hide hamburger */ .nav-desktop { display: flex; } .nav-trigger { display: none; } .nav-overlay { display: none; } .nav-spacer { display: none; } /* Re-balance header on desktop: logo left, nav right */ .nav-inner { grid-template-columns: auto 1fr auto; } .nav-brand { grid-column: 1; } .nav-desktop { grid-column: 3; } .hero-img-wrap { min-height: 620px; } .hero-body { padding: 72px 60px; } } /* ══════════════════════════════════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .js .fade, .js .fade.is-visible { transition: none; opacity: 1; transform: none; animation: none; } .p-img img, .hero-img-wrap img { transition: none; } } /* ══════════════════════════════════════════════════════════════════════ SECOND IMAGE HOVER CROSSFADE ══════════════════════════════════════════════════════════════════════ */ .p-img { position: relative; overflow: hidden; } .p-img-primary, .p-img-secondary { width: 100%; height: 100%; object-fit: cover; transition: opacity .55s cubic-bezier(.22,1,.36,1); } .p-img-secondary { position: absolute; inset: 0; opacity: 0; } .p-card:hover .p-img-secondary { opacity: 1; } .p-card:hover .p-img-primary { opacity: 0; } /* ══════════════════════════════════════════════════════════════════════ MODAL — IMAGE GALLERY THUMBNAILS ══════════════════════════════════════════════════════════════════════ */ .modal-img-thumbs { display: flex; gap: 6px; margin-top: 8px; } .modal-thumb { width: 44px; height: 44px; border-radius: var(--r); border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; flex-shrink: 0; opacity: .48; transition: border-color .2s, opacity .2s; } .modal-thumb.active { border-color: var(--gold); opacity: 1; } .modal-thumb:hover { opacity: .85; } /* ══════════════════════════════════════════════════════════════════════ DROP 02 — EMAIL WAITLIST FORM ══════════════════════════════════════════════════════════════════════ */ .drop2-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .drop2-input { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 300; padding: 14px 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r); color: var(--white); flex: 1; min-width: 180px; outline: none; transition: border-color .2s, background .2s; -webkit-appearance: none; } .drop2-input::placeholder { color: rgba(255,255,255,.38); } .drop2-input:focus { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); } .drop2-success { font-size: 12px; font-weight: 400; color: #4ade80; letter-spacing: .04em; padding: 4px 0; } /* ══════════════════════════════════════════════════════════════════════ MODAL — DIMENSIONS BLOCK ══════════════════════════════════════════════════════════════════════ */ .modal-dimensions-wrap { margin: 14px 0 6px; padding: 12px 16px; background: var(--ivory-2); border-radius: var(--r); border: 1px solid var(--line); } .modal-dimensions-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 5px; } .modal-dimensions { font-size: 12px; font-weight: 400; color: var(--charcoal); line-height: 1.7; margin: 0; } /* ══════════════════════════════════════════════════════════════════════ DROP 02 COMING SOON TEASER ══════════════════════════════════════════════════════════════════════ */ .drop2-teaser { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 2px; padding: 32px 28px; background: var(--charcoal); border-radius: var(--r-lg); } .drop2-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .drop2-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(28px, 6vw, 40px); color: var(--white); line-height: 1; margin-bottom: 8px; } .drop2-sub { font-size: 12px; font-weight: 300; color: rgba(255,255,255,.45); line-height: 1.7; max-width: 34ch; } .drop2-btn { background: var(--white) !important; color: var(--charcoal) !important; border-color: var(--white) !important; flex-shrink: 0; } .drop2-btn:hover { background: var(--ivory-2) !important; } /* ══════════════════════════════════════════════════════════════════════ CRAFT SECTION — Video reel + storytelling + Instagram follow ══════════════════════════════════════════════════════════════════════ */ .craft-section { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ── Cinematic video banner ─────────────────────────────────────────── */ .craft-reel { position: relative; width: 100%; aspect-ratio: 9/16; /* portrait — matches Instagram vertical video */ max-height: 92svh; overflow: hidden; background: var(--charcoal); } .craft-reel-video { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: .75; display: block; } .craft-reel-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(28,28,26,.80) 0%, rgba(28,28,26,.25) 45%, transparent 70% ); padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; } .craft-reel .section-label { color: rgba(255,255,255,.45); margin-bottom: 10px; } .craft-reel-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(46px, 13vw, 88px); line-height: .91; color: var(--white); margin-bottom: 16px; } .craft-reel-title em { font-style: italic; color: var(--gold-lt); } .craft-reel-sub { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.65); max-width: 36ch; line-height: 1.75; margin-bottom: 20px; } .craft-reel-badge { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.40); } /* Portrait video on desktop: cap width and center — preserves composition */ @media (min-width: 640px) { .craft-reel { aspect-ratio: 9/16; /* keep portrait format */ max-height: 88svh; max-width: 560px; /* constrain width on desktop */ margin: 0 auto; /* center horizontally */ } .craft-reel-overlay { padding: 40px 44px; } } @media (min-width: 1024px) { .craft-reel { max-width: 600px; max-height: 86svh; } } /* ── 3-step process ─────────────────────────────────────────────────── */ .craft-steps { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: 52px 0 2px; } .craft-step { background: var(--white); padding: 28px 24px 32px; } .craft-num { display: block; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .craft-step-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; margin-bottom: 10px; } .craft-step-body { font-size: 13px; font-weight: 300; color: var(--stone); line-height: 1.8; } @media (min-width: 640px) { .craft-steps { grid-template-columns: repeat(3, 1fr); } } /* ══════════════════════════════════════════════════════════════════════ MODAL — FULL IMAGE GALLERY (arrows + dots) ══════════════════════════════════════════════════════════════════════ */ .modal-gallery { position: relative; height: 100%; } .modal-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: rgba(248,246,242,.92); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 300; color: var(--charcoal); cursor: pointer; z-index: 2; opacity: .8; transition: opacity .2s, transform .18s; -webkit-tap-highlight-color: transparent; } .modal-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.06); } .modal-arrow-prev { left: 10px; } .modal-arrow-next { right: 10px; } .modal-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; padding: 0 4px; } .modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stone); opacity: .35; cursor: pointer; transition: opacity .22s, background .22s; border: none; padding: 0; flex-shrink: 0; } .modal-dot.active { background: var(--gold); opacity: 1; } .modal-dot:hover { opacity: .7; } /* ══════════════════════════════════════════════════════════════════════ FLOATING WHATSAPP BUTTON ══════════════════════════════════════════════════════════════════════ */ .wa-bubble { position: fixed; bottom: 24px; right: 20px; z-index: 600; width: 52px; height: 52px; background: #16A34A; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(22,163,74,.38), 0 2px 6px rgba(0,0,0,.15); transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; } .wa-bubble.visible { opacity: 1; pointer-events: all; animation: wa-pop .5s cubic-bezier(.22,1,.36,1) forwards; } .wa-bubble:hover { transform: scale(1.10); box-shadow: 0 6px 24px rgba(22,163,74,.48), 0 3px 10px rgba(0,0,0,.18); } .wa-bubble:active { transform: scale(.95); } .wa-bubble svg { flex-shrink: 0; } @keyframes wa-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } } /* Hide bubble when modal or menu is open */ body.menu-open .wa-bubble, body.modal-open .wa-bubble { opacity: 0 !important; pointer-events: none !important; }