/* ══════════════════════════════════════════════════════════════════════ SELAKA BALI · base.css — tokens, reset, shell (nav/overlay/footer), buttons, currency control, story/legal shared sections. Loaded by EVERY public page, before the page stylesheet (home.css / pdp.css / checkout.css). Split from styles.css in solidification batch 1D (FE-L1) — block order preserved. 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: #6B6258; /* muted text / lines */ --charcoal: #1C1C1A; /* primary ink */ --ink-2: #3A3935; /* secondary ink */ --white: #FFFFFF; /* Accent: warm gold (used sparingly) */ --gold: #80652F; --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; } [hidden] { display: none !important; } 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); } } @keyframes craftTextReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(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%; } /* ── Display currency control (shared: home cards + PDP buy panel) ──── */ .display-currency { display: inline-grid; grid-auto-flow: column; justify-self: start; gap: 3px; padding: 3px; border: 1px solid rgba(178,142,91,.28); background: rgba(248,246,242,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.48); } .currency-pill { min-width: 46px; min-height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--stone); cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; transition: background .18s ease, color .18s ease; } .currency-pill[aria-pressed="true"] { background: var(--charcoal); color: var(--ivory); } .currency-pill:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════════════════ OUR STORY ══════════════════════════════════════════════════════════════════════ */ .story-section { background: var(--ivory-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(64px, 8vw, 104px) 0; } .story-inner { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); } .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: 22px; } .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: 50ch; margin-bottom: 14px; } /* Legal / policy pages: shared section heading + link style. Replaces the inline-styled

blocks that used to repeat per section. */ .legal-h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 22px; margin: 32px 0 12px; } .story-text a { color: var(--charcoal); text-decoration: underline; } .story-list { list-style: none; margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .story-list li { font-size: 12px; font-weight: 400; padding: 14px 16px; background: rgba(248,246,242,.76); 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); 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); } /* ══════════════════════════════════════════════════════════════════════ 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: 14px 18px; justify-content: flex-start; } .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; } /* ══════════════════════════════════════════════════════════════════════ SHARED BUTTON STATES ══════════════════════════════════════════════════════════════════════ */ /* Disabled state for unavailable order button */ .btn.is-disabled { opacity: .35; pointer-events: none; cursor: default; } /* ══════════════════════════════════════════════════════════════════════ TABLET ≥ 640px — shell + shared sections ══════════════════════════════════════════════════════════════════════ */ @media (min-width: 640px) { :root { --pad: 28px; } .story-inner { grid-template-columns: 1fr 1fr; align-items: center; } .story-list { grid-template-columns: repeat(2, 1fr); } /* Match the actual hero.jpg source ratio (1408×768 = 11/6) so object-fit: cover doesn't clip the logo composition on desktop. */ .story-img-wrap { aspect-ratio: 1408 / 768; } .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } } /* ══════════════════════════════════════════════════════════════════════ DESKTOP ≥ 1024px — shell + shared sections ══════════════════════════════════════════════════════════════════════ */ @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; } } /* ══════════════════════════════════════════════════════════════════════ REDUCED MOTION — shared ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .js .fade, .js .fade.is-visible { transition: none; opacity: 1; transform: none; animation: none; } } /* Secondary "support" nav block in the mobile drawer — gives visitors access to ordering/shipping/returns without having to scroll past the entire catalog to reach the footer. Styled as a subordinate block: small, grouped, separated by a hairline from the main nav. */ .nav-overlay .nvo-nav { flex: 0 1 auto; } .nav-overlay .nvo-footer { margin-top: auto; } .nvo-support { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; opacity: 0; } .nav-overlay.open .nvo-support { animation: up .5s .24s cubic-bezier(.22,1,.36,1) forwards; } .nvo-support-label { font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin-bottom: 2px; } .nvo-support a { font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--charcoal); padding: 4px 0; transition: color .2s; } .nvo-support a:hover { color: var(--gold); }