/* ═══════════════════════════════════════════════════════════════════════════
DESIGN DNA — Swarnika Jewels · Vadodara · est. 1994
---------------------------------------------------------------------------
Direction : THE EMERALD VITRINE — a jewel box, not a brochure. Deep
emerald and gold set against a cream canvas, photography-led
and product-forward. Warmly classical in its ornament,
executed as a current-year retail store: real codes, real
weights, real prices, one action per card.
Palette : cream #FAF7F2 canvas · white surfaces · sand #F2EDE3 tint ·
emerald #0E3B2C and emerald-deep #08281D as the dark grounds
(utility bar, hero, wedding banner, CTA bands, footer) ·
gold #C9A227 as a GRAPHIC value only on cream · gold-lite
#E3C878 for hairlines and type on emerald · gold-text #8A6B12
as the only gold permitted to carry type on cream.
Type : Marcellus (display — ONE weight, so hierarchy is made with
SIZE, never with boldness) + Mulish 300/400/500 for body, UI
and prices. Nothing on this site is 700 or heavier.
Hero : THE VITRINE CAROUSEL — four slides stacked in one grid cell on
a full-bleed emerald ground, copy anchored LEFT over a
right-weighted photograph, one word of the headline in gold.
Slide one carries .is-active in the HTML and reads perfectly
with no JavaScript at all; the arrows and dots are .js-only.
Signature : THE JHAROKHA ARCH — the temple-window arched top edge
(--arch) on EVERY media frame on the site: product cards,
collection cards, the wedding banner, the lookbook, the
showroom and workshop figures, the map, even the drawer
thumbnails. One device, used everywhere, and no second one.
Corners elsewhere: full circles on the category portals,
2px on cards and buttons, pill on chips and badges only.
Ornament : a small gold trefoil crowning the wordmark, the hero eyebrow
and every section heading, with a thin gold flourish rule
under section titles. Part of the type system — kept quiet.
Elevation : INVERTED ONLY (--lift, an upward shadow), used on the three
things that genuinely float upward: the mobile action bar,
the drawer panel and the rate card. No downward drop shadows
exist anywhere in this stylesheet.
First-timers: (1) the arched media frame — the first curved image language
in this portfolio (2) a live wishlist + cart persisted in
localStorage.
---------------------------------------------------------------------------
FILE OWNERSHIP — this file is the base layer only.
style.css (this file) tokens, reset, layout, components, MOBILE-FIRST
360px base. No media queries. No @keyframes.
effects.css animation, reveals, motion.
responsive.css the 480 / 768 / 1024 / 1440 breakpoints.
Interactive elements below carry `transition: var(--transition)` as a state
change only; every keyframe and reveal belongs to effects.css.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 1. TOKENS — shared contract, do not edit without the sibling file ═══ */
:root {
/* Palette — The Emerald Vitrine */
--color-bg: #FAF7F2; /* cream page canvas */
--color-surface: #FFFFFF;
--color-sand: #F2EDE3; /* tinted band */
--color-emerald: #0E3B2C; /* dark ground: hero, banner, footer */
--color-emerald-dp: #08281D;
--color-gold: #C9A227; /* GRAPHIC ONLY on cream — 2.3:1, never body text */
--color-gold-lite: #E3C878; /* hairlines/highlights on emerald */
--color-gold-text: #8A6B12; /* the ONLY gold allowed to carry type on cream */
--color-text: #1F1A16;
--color-text-muted: #7A6E62;
--color-on-dark: #F6F1E7;
--color-border: rgba(31,26,22,0.12);
--color-border-gold: rgba(201,162,39,0.35);
/* Typography */
--font-display: 'Marcellus', Georgia, serif;
--font-body: 'Mulish', system-ui, sans-serif;
--text-xs: clamp(0.75rem, 1vw, 0.8125rem);
--text-sm: clamp(0.8125rem,1.1vw, 0.9375rem);
--text-base: clamp(1rem, 1.4vw, 1.0625rem);
--text-lg: clamp(1.125rem, 2vw, 1.375rem);
--text-xl: clamp(1.5rem, 3vw, 2rem);
--text-2xl: clamp(2rem, 4.5vw, 3rem);
--text-3xl: clamp(2.5rem, 6vw, 4rem);
--text-hero: clamp(2.5rem, 6.5vw, 4.75rem);
/* Spacing */
--space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem; --space-xl:7rem;
--space-section: clamp(3rem, 7vw, 6rem);
/* Shape — the Jharokha Arch is the signature */
--arch: 50% 50% 0 0 / 22% 22% 0 0;
--radius-sm: 2px;
--radius-card: 2px;
--radius-pill: 9999px;
--radius-circle: 50%;
--hair: 1px;
/* Elevation — INVERTED only. No downward drop shadows anywhere. */
--lift: 0 -4px 16px rgba(0,0,0,0.05);
--transition: .35s cubic-bezier(.4,0,.2,1);
--container: 1440px;
--gutter: 1.5rem;
/* ── Added for effects.css / responsive.css. --transition above is
unchanged: both sibling files already consume it. ───────────────── */
/* Motion — curves separated from durations so effects can vary one
without the other */
--ease: cubic-bezier(.4,0,.2,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--transition-slow: .8s var(--ease-out); /* entrances, hero cross-fade */
--space-2xs: .25rem; /* utility-bar separators, tool row, chip row */
/* Stacking — assign these rather than letting z-index collide by accident */
--z-base: 1; /* active carousel slide */
--z-mast: 50; /* sticky masthead */
--z-scrim: 80; /* drawer backdrop */
--z-drawer: 90; /* mobile nav panel */
--z-bar: 70; /* sticky mobile action bar */
}
/* ═══ 2. RESET & DOCUMENT BASE ═══════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 400;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* clearance for the sticky mobile action bar. responsive.css retires the
bar and zeroes this at 768px. */
padding-bottom: 3.5rem;
}
/* main.js locks the page behind the drawer and the mobile nav panel. */
html.drawer-open,
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400; /* Marcellus has one weight — size makes rank */
line-height: 1.12;
letter-spacing: 0.005em;
}
/* Hierarchy is SIZE, never weight. 700+ is banned sitewide. */
b, strong { font-weight: 500; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg, iframe, video {
display: block;
max-width: 100%;
}
img { height: auto; }
button, input, select, textarea {
font: inherit;
color: inherit;
background: none;
border: 0;
border-radius: 0;
}
button { cursor: pointer; }
table {
border-collapse: collapse;
width: 100%;
}
address { font-style: normal; }
blockquote, figure { margin: 0; }
fieldset { border: 0; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection {
background: var(--color-emerald);
color: var(--color-on-dark);
}
:focus-visible {
outline: 2px solid var(--color-gold-text);
outline-offset: 2px;
}
/* On the emerald grounds the focus ring switches to the light gold. */
.utility :focus-visible,
.hero :focus-visible,
.edit-card :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.mobile-bar :focus-visible { outline-color: var(--color-gold-lite); }
[hidden] { display: none !important; }
/* ═══ 3. UTILITIES ═══════════════════════════════════════════════════════ */
/* Screen-reader-only text. A sibling site shipped this visible because the
rule was missing — it is defined first here on purpose. */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: 0;
left: var(--gutter);
z-index: 100;
transform: translateY(-120%);
padding: var(--space-xs) var(--space-sm);
background: var(--color-emerald);
color: var(--color-on-dark);
font-size: var(--text-sm);
letter-spacing: 0.06em;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { transform: translateY(0); }
/* Anything that only makes sense once JS has run. With scripting off these
are removed entirely, so the page never shows a control that does nothing. */
.no-js .js-only { display: none !important; }
/* Honeypot — must never be seen and never be focused visually. */
.hp-field {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--space-section); }
/* Stagger hooks — the resting state is fully visible so the page reads with
no JS and no motion. effects.css owns the reveal itself. */
.stagger-parent { }
.stagger-child { min-width: 0; }
/* ── 360px OVERFLOW GUARDS ───────────────────────────────────────────────
Grid and flex children default to min-width:auto, which refuses to shrink
below their content — the single commonest cause of sideways scroll on a
phone. Every child of a grid or flex container in this file that holds
text or media is pinned to 0 here, once, rather than in twenty places.
(The four things that genuinely cannot fit — the portal row, the chip row,
the lookbook strip and the making-charge table — scroll inside their own
boxes instead; see §12, §5, §20 and §18.) */
.hero-copy,
.trust-item,
.trust-text,
.portal,
.col-card,
.edit-say,
.edit-media,
.pc,
.pc-body,
.review,
.showroom-say,
.showroom-media,
.store,
.store-body,
.page-head-say,
.pricing-say,
.charge-card,
.step-v,
.col-row-say,
.col-row-media,
.also-item,
.look-item,
.note-say,
.note-media,
.workshop-say,
.workshop-media,
.rail-item,
.rail-body,
.ledger-row,
.reach-item,
.reach-card,
.track-say,
.enquiry-say,
.enquiry-form-wrap,
.field,
.lost-say,
.lost-media,
.signup-say,
.signup-form,
.footer-identity,
.footer-col,
.drawer-item-body,
.mobile-bar-item { min-width: 0; }
/* A long unbroken token — an email address, a URL, a piece code — must wrap
rather than widen the page. Inherited, so it is set once. */
body { overflow-wrap: break-word; }
/* ═══ 4. THE ORNAMENT, THE FLOURISH, THE ARCH, THE ICONS ═════════════════ */
/* --- the trefoil ornament ------------------------------------------------ */
.ornament {
display: block;
width: 2rem;
margin-inline: auto;
margin-bottom: var(--space-xs);
color: var(--color-gold);
}
.ornament svg {
width: 100%;
height: auto;
overflow: visible;
}
.orn-petal,
.orn-leaf,
.orn-dot { fill: currentColor; }
.orn-stem {
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
opacity: .75;
}
/* On the dark grounds the ornament lifts to the light gold. */
.hero-orn,
.edit-orn,
.cta-orn,
.footer-orn { color: var(--color-gold-lite); }
.mark-orn {
width: 1.5rem;
margin-bottom: 0.25rem;
}
.signup-orn { margin-bottom: var(--space-xs); }
.hero-orn,
.edit-orn { margin-inline: 0; } /* left-anchored copy blocks */
.footer-orn { margin-inline: 0; }
/* --- the flourish rule under a section title ----------------------------- */
.flourish {
display: block;
width: 7.5rem;
margin-inline: auto;
margin-block: var(--space-xs) var(--space-sm);
color: var(--color-gold);
}
.flourish svg {
width: 100%;
height: auto;
overflow: visible;
}
.fl-line {
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
}
.fl-eye { fill: currentColor; }
/* --- THE JHAROKHA ARCH — the one media device --------------------------- */
.arch {
position: relative;
display: block;
overflow: hidden;
background: var(--color-sand);
border-radius: var(--arch);
}
.arch > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* The gold key-line that follows the arch. A full outline, never a
one-sided bar. */
.arch-key {
position: absolute;
inset: 0;
z-index: 2;
border: var(--hair) solid var(--color-border-gold);
border-radius: inherit;
pointer-events: none;
}
/* The ratio system — three ratios plus the circle, and nothing else. */
.pc-media,
.col-row-arch,
.look-arch { aspect-ratio: 4 / 5; }
.col-media,
.edit-arch,
.workshop-arch { aspect-ratio: 3 / 4; }
.showroom-arch,
.note-arch,
.store-arch,
.lost-arch { aspect-ratio: 4 / 3; }
/* --- icons — one stroke weight, one 24-box ------------------------------ */
.ico {
width: 1.25rem;
height: 1.25rem;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.utility-ico { width: 1rem; height: 1rem; }
.nav-caret,
.link-arrow {
width: 0.875rem;
height: 0.875rem;
stroke-width: 1.6;
}
.trust-ico,
.reach-ico,
.enquiry-ico {
width: 1.5rem;
height: 1.5rem;
color: var(--color-gold-text);
}
.faq-caret {
width: 1rem;
height: 1rem;
color: var(--color-gold-text);
transition: transform var(--transition);
}
/* Every glyph in icon() is drawn at the same stroke weight in the same
24-box, so the whole set inherits .ico and needs no per-icon rule. Listed
in full so the coverage is deliberate, not an oversight. The four closed
shapes are called out because they must NOT pick up a fill by default —
only .pc-heart.is-on / .pc-bagbtn.is-on fill, as a saved-state signal. */
.ico-search, .ico-phone, .ico-pin, .ico-truck, .ico-shield, .ico-lock,
.ico-refresh, .ico-chevron, .ico-arrow, .ico-close, .ico-menu,
.ico-heart, .ico-bag, .ico-whatsapp, .ico-play, .ico-star { fill: none; }
/* --- one caption treatment for every figure ------------------------------ */
.edit-cap,
.showroom-cap,
.note-cap,
.workshop-cap,
.look-cap,
.store-cap,
.lost-cap {
display: block;
margin-top: var(--space-xs);
font-size: var(--text-xs);
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.edit-cap { color: var(--color-gold-lite); }
/* ═══ 5. BUTTONS, LINKS, CHIPS ═══════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.875rem;
/* the extra right padding absorbs the trailing letter-space so the label
sits optically centred (standing repo rule) */
padding: 0.8rem 1.4rem 0.8rem calc(1.4rem + 0.09em);
border: var(--hair) solid transparent;
border-radius: var(--radius-card);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
text-align: center;
line-height: 1.2;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
/* gold — the one loud action per screen */
.btn-gold {
background: var(--color-gold);
color: var(--color-emerald-dp);
border-color: var(--color-gold);
}
.btn-gold:hover,
.btn-gold:focus-visible {
background: var(--color-gold-lite);
border-color: var(--color-gold-lite);
}
/* solid emerald — the quiet primary on cream */
.btn-solid {
background: var(--color-emerald);
color: var(--color-on-dark);
border-color: var(--color-emerald);
}
.btn-solid:hover,
.btn-solid:focus-visible {
background: var(--color-emerald-dp);
border-color: var(--color-emerald-dp);
}
/* framed — outline only. Cream-safe by default … */
.btn-frame {
background: transparent;
color: var(--color-emerald);
border-color: var(--color-emerald);
}
.btn-frame:hover,
.btn-frame:focus-visible {
background: var(--color-emerald);
color: var(--color-on-dark);
}
/* … and re-cast for the emerald grounds it also lives on. */
.hero .btn-frame,
.edit-card .btn-frame,
.cta-band .btn-frame {
color: var(--color-on-dark);
border-color: var(--color-gold-lite);
}
.hero .btn-frame:hover,
.hero .btn-frame:focus-visible,
.edit-card .btn-frame:hover,
.edit-card .btn-frame:focus-visible,
.cta-band .btn-frame:hover,
.cta-band .btn-frame:focus-visible {
background: var(--color-gold-lite);
color: var(--color-emerald-dp);
border-color: var(--color-gold-lite);
}
/* At 360px a pair of buttons stacks full-width. responsive.css sets these
four groups back to `width: auto` side-by-side rows at 480px. */
.cta-actions .btn,
.edit-actions .btn,
.col-row-links .btn,
.empty .btn { width: 100%; }
/* the quiet inline link with its arrow */
.text-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--color-gold-text);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.03em;
border-bottom: var(--hair) solid var(--color-border-gold);
padding-bottom: 2px;
transition: color var(--transition), border-color var(--transition);
}
.text-link:hover,
.text-link:focus-visible {
color: var(--color-emerald);
border-bottom-color: var(--color-emerald);
}
/* chips — the only pills on the site, alongside badges */
.chip {
display: inline-block;
scroll-snap-align: start;
padding: 0.5rem 1rem;
background: var(--color-sand);
color: var(--color-text);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
line-height: 1.3;
white-space: nowrap;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover,
.chip:focus-visible {
border-color: var(--color-emerald);
}
.chip.is-on {
background: var(--color-emerald);
color: var(--color-on-dark);
border-color: var(--color-emerald);
}
/* At 360px the chip row out-runs the viewport, so it scrolls inside its own
box rather than pushing the page sideways. responsive.css unwinds it to a
wrapping row at 768px (overflow, margins, snap all reset there). */
.chip-row {
display: flex;
flex-wrap: nowrap;
gap: var(--space-2xs);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--color-border-gold) transparent;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: var(--space-2xs);
}
/* ═══ 6. SECTION & PAGE HEADINGS ═════════════════════════════════════════ */
.section-head {
text-align: center;
max-width: 46rem;
margin-inline: auto;
margin-bottom: var(--space-md);
}
.section-title {
font-size: var(--text-2xl);
color: var(--color-emerald);
}
.section-sub {
font-size: var(--text-sm);
color: var(--color-text-muted);
max-width: 42rem;
margin-inline: auto;
}
/* the head that carries a "view all" link beside it */
.section-head-row {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
}
.section-head-row > div { text-align: center; }
/* --- page heads --------------------------------------------------------- */
.page-head {
padding-block: var(--space-lg) var(--space-md);
border-bottom: var(--hair) solid var(--color-border);
}
.page-head-inner { display: grid; gap: var(--space-md); }
.page-head-say { text-align: center; }
.page-head-plain .page-head-say {
max-width: 46rem;
margin-inline: auto;
}
.page-eyebrow {
/* centred + tracked: inline-block and a negative right margin equal to the
tracking, never text-indent (standing repo rule) */
display: inline-block;
margin-right: -0.2em;
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.page-title {
font-size: var(--text-3xl);
color: var(--color-emerald);
text-wrap: balance;
}
.page-lead {
font-size: var(--text-lg);
font-weight: 300;
line-height: 1.55;
color: var(--color-text);
max-width: 44rem;
margin-inline: auto;
}
/* ═══ 7. UTILITY BAR ═════════════════════════════════════════════════════ */
.utility {
background: var(--color-emerald-dp);
color: var(--color-on-dark);
font-size: var(--text-xs);
}
.utility-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding-block: 0.5rem;
text-align: center;
}
.utility-promise {
display: inline-flex;
align-items: center;
gap: 0.45rem;
letter-spacing: 0.03em;
}
.utility-promise .utility-ico { color: var(--color-gold-lite); }
.utility-links {
display: flex;
align-items: center;
gap: 0.5rem;
letter-spacing: 0.06em;
}
.utility-links a {
padding-block: 0.15rem;
border-bottom: var(--hair) solid transparent;
transition: border-color var(--transition), color var(--transition);
}
.utility-links a:hover,
.utility-links a:focus-visible {
color: var(--color-gold-lite);
border-bottom-color: var(--color-gold-lite);
}
.utility-sep { color: var(--color-gold-lite); }
/* ═══ 8. MASTHEAD ════════════════════════════════════════════════════════ */
.masthead {
position: relative;
z-index: var(--z-mast);
background: var(--color-bg);
border-bottom: var(--hair) solid var(--color-border);
}
/* main.js adds .is-stuck past 8px of scroll. The masthead is deliberately NOT
position:sticky — the nav panel and the search bar live inside it, and a
14-link panel inside a pinned header has nowhere to go on a phone. The
sticky .mobile-bar carries the persistent actions instead. */
.masthead.is-stuck { border-bottom-color: var(--color-border-gold); }
/* 360px base: FLEX. The wordmark is LEFT-aligned and leftmost at every width;
the hamburger and the tools group hard right.
Only .mast-mark carries an explicit grid placement (column 1) — everything
else is left to auto-placement so responsive.css can lay the row out as
`auto 1fr auto` at 768 (mark | menu | tools) and slide the nav into
column 2 beside the wordmark at 1024. grid-* is inert while this is flex.
flex-wrap is the safety valve: if a fallback face makes the wordmark wider
than 360px allows, the tools drop to a second line rather than overflow. */
.masthead-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs) var(--space-xs);
padding-block: var(--space-sm) var(--space-xs);
}
.mast-mark {
flex: 0 1 auto;
order: 0;
grid-column: 1;
grid-row: 1;
justify-self: start;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
text-align: left;
}
/* the ornament, the hairline and the EST. line all hang off the same left
edge as the name */
.mark-orn { margin-inline: 0; }
.mark-name {
font-family: var(--font-display);
font-size: var(--text-base);
line-height: 1.1;
letter-spacing: 0.08em;
color: var(--color-emerald);
/* centred + tracked — absorb the trailing letter-space */
display: inline-block;
margin-right: -0.08em;
}
.mark-rule {
display: block;
width: 3.25rem;
height: var(--hair);
margin-block: 0.4rem 0.35rem;
margin-inline: 0;
background: var(--color-gold);
}
.mark-est {
display: inline-block;
margin-right: -0.18em;
font-size: 0.5625rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* --- the hamburger (js-only) -------------------------------------------- */
/* order 1 + margin-left:auto pushes the whole right-hand group away from the
wordmark. justify-self:end keeps it hugging right in whichever grid track
responsive.css auto-places it into. */
.mast-menu {
order: 1;
margin-left: auto;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: var(--color-emerald);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
transition: background-color var(--transition), border-color var(--transition);
}
.mast-menu:hover,
.mast-menu:focus-visible {
background: var(--color-sand);
border-color: var(--color-border-gold);
}
/* --- the inline nav ----------------------------------------------------- */
/* Hidden at 360px: the hamburger opens the full index in .nav-panel, and with
scripting off .nav-panel renders statically instead (see §9). Plain
`.mast-nav` specificity so responsive.css can simply switch it back on at
1024px, where it takes column 1 from the then-hidden hamburger. */
.mast-nav {
display: none;
order: 1;
justify-self: start;
min-width: 0;
}
.nav-list {
display: flex;
align-items: center;
gap: var(--space-md);
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding-block: 0.4rem;
font-size: var(--text-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text);
border-bottom: var(--hair) solid transparent;
transition: color var(--transition), border-color var(--transition);
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--color-emerald);
border-bottom-color: var(--color-gold);
}
.nav-link.is-current {
color: var(--color-emerald);
border-bottom-color: var(--color-gold);
}
.nav-has-menu { position: relative; }
.nav-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 40;
display: none;
min-width: 15rem;
padding: var(--space-xs) 0;
background: var(--color-surface);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-card);
}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu { display: block; }
.nav-menu a {
display: block;
padding: 0.5rem var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text);
transition: background-color var(--transition), color var(--transition);
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
background: var(--color-sand);
color: var(--color-emerald);
}
/* --- the tools ---------------------------------------------------------- */
.mast-tools {
order: 2;
justify-self: end;
display: flex;
align-items: center;
gap: 0;
}
/* .mast-menu carries the margin-left:auto that pushes the right-hand group
away from the wordmark — but it is .js-only, so with scripting off the
tools have to push themselves. */
.no-js .mast-tools { margin-left: auto; }
.tool {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.5rem;
color: var(--color-emerald);
border-radius: var(--radius-circle);
transition: background-color var(--transition), color var(--transition);
}
.tool:hover,
.tool:focus-visible { background: var(--color-sand); }
.tool.is-on { color: var(--color-gold-text); }
.tool-badge {
position: absolute;
top: 0.15rem;
right: 0.05rem;
min-width: 1.1rem;
height: 1.1rem;
padding-inline: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-gold);
color: var(--color-emerald-dp);
border-radius: var(--radius-pill);
font-size: 0.625rem;
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.tool-badge[data-empty="1"] { display: none; }
/* --- the search bar ----------------------------------------------------- */
/* The closed state is ARMED ON html.has-js, which header.php sets pre-paint.
With scripting off the search form is simply a visible GET form — no dead
magnifier, nothing half-armed. main.js toggles .is-open on #searchBar. */
.search-bar {
background: var(--color-sand);
border-top: var(--hair) solid var(--color-border);
}
.has-js .search-bar { display: none; }
.has-js .search-bar.is-open { display: block; }
.search-form {
display: flex;
gap: var(--space-xs);
padding-block: var(--space-xs);
}
.search-input {
flex: 1 1 auto;
min-width: 0;
padding: 0.7rem 0.9rem;
background: var(--color-surface);
color: var(--color-text);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
font-size: var(--text-sm);
transition: border-color var(--transition);
}
.search-input::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.search-input:focus { border-color: var(--color-emerald); }
.search-go {
flex: none;
padding: 0.7rem 1.1rem;
background: var(--color-emerald);
color: var(--color-on-dark);
border-radius: var(--radius-card);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background-color var(--transition);
}
.search-go:hover,
.search-go:focus-visible { background: var(--color-emerald-dp); }
/* ═══ 9. THE NAV PANEL (mobile index / no-JS index) ══════════════════════ */
/* ARMED ON html.has-js. With scripting off the hamburger does not exist, so
the panel renders statically as the page's index — the only way a no-JS
phone reaches the categories. With scripting on it is closed until main.js
adds .is-open to #navPanel (and .nav-open to ).
responsive.css hides it outright at 1024px, where .mast-nav takes over. */
.nav-panel {
display: block;
max-height: calc(100vh - 7rem);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-surface);
border-top: var(--hair) solid var(--color-border);
}
.has-js .nav-panel { display: none; }
.has-js .nav-panel.is-open,
.has-js .nav-open .nav-panel { display: block; }
.nav-panel-inner { padding-block: var(--space-sm) var(--space-md); }
.panel-list { margin-bottom: var(--space-sm); }
.panel-list li { border-bottom: var(--hair) solid var(--color-border); }
.panel-list a {
display: block;
padding-block: 0.7rem;
font-size: var(--text-base);
color: var(--color-text);
transition: color var(--transition);
}
.panel-list a:hover,
.panel-list a:focus-visible { color: var(--color-emerald); }
.panel-sub a {
padding-left: var(--space-sm);
padding-block: 0.5rem;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.panel-status {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: var(--space-sm);
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.status-dot {
width: 0.5rem;
height: 0.5rem;
flex: none;
border-radius: var(--radius-circle);
border: var(--hair) solid var(--color-emerald);
}
.status-dot.is-open { background: var(--color-emerald); }
.status-dot.is-shut { background: transparent; }
.panel-cta {
display: block;
padding: 0.85rem var(--space-sm);
background: var(--color-gold);
color: var(--color-emerald-dp);
border-radius: var(--radius-card);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
transition: background-color var(--transition);
}
.panel-cta:hover,
.panel-cta:focus-visible { background: var(--color-gold-lite); }
/* ═══ 10. THE VITRINE CAROUSEL ═══════════════════════════════════════════ */
/* The hero is the positioning context AND the height source: from 768px up
responsive.css pulls the photograph into its own right-hand column with
`.hero-photo { position:absolute; inset:0 0 0 auto; width:58% }`, which
needs both of those to already exist here. */
.hero {
position: relative;
min-height: clamp(34rem, 88vh, 52rem);
background: var(--color-emerald);
color: var(--color-on-dark);
overflow: hidden;
}
/* All slides share one grid cell, so the stage is as tall as the tallest
slide and nothing jumps when JS swaps them. */
.hero-stage { display: grid; height: 100%; }
/* .hero-slide owns the stacking, and is the containing block the photograph
is absolutely positioned against at every width. */
.hero-slide {
grid-area: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: clamp(34rem, 88vh, 52rem);
padding-block: var(--space-xl);
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Slide 1 carries .is-active in the PHP, so this reads correctly with no JS. */
.hero-slide.is-active {
z-index: var(--z-base);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.hero-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
/* 45% left-weighted deep emerald gradient veil for pristine text legibility over full-width jewellery imagery */
.hero-veil {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
var(--color-emerald-dp) 0%,
rgba(7, 30, 25, 0.95) 28%,
rgba(7, 30, 25, 0.82) 42%,
rgba(7, 30, 25, 0.40) 58%,
rgba(7, 30, 25, 0.10) 75%,
transparent 100%),
linear-gradient(to top, var(--color-emerald-dp) 0%, transparent 35%);
opacity: 0.96;
}
.hero-inner {
position: relative;
z-index: 1;
}
.hero-copy {
max-width: 34rem;
text-align: left;
}
.hero-eyebrow {
display: inline-block;
margin-bottom: var(--space-sm);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-gold-lite);
}
.hero-head {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.005em;
color: var(--color-on-dark);
margin-bottom: var(--space-sm);
}
.hero-head-line { display: block; }
.hero-gold { color: var(--color-gold); }
.hero-sub {
max-width: 32rem;
margin-bottom: var(--space-md);
font-size: var(--text-base);
font-weight: 300;
line-height: 1.6;
color: var(--color-on-dark);
}
/* --- arrows and dots (js-only, so no dead controls) --------------------- */
.hero-controls {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding-block: var(--space-sm) var(--space-md);
background: var(--color-emerald);
}
.hero-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
color: var(--color-on-dark);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-circle);
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.hero-arrow:hover,
.hero-arrow:focus-visible {
background: var(--color-gold-lite);
color: var(--color-emerald-dp);
border-color: var(--color-gold-lite);
}
/* both arrows share .hero-arrow; only the direction differs */
.hero-prev .ico { transform: rotate(180deg); }
.hero-next .ico { transform: none; }
.hero-dots {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hero-dot {
display: block;
width: 0.5rem;
height: 0.5rem;
border: var(--hair) solid var(--color-gold-lite);
border-radius: var(--radius-circle);
background: transparent;
transition: background-color var(--transition), width var(--transition);
}
.hero-dot.is-on {
width: 1.5rem;
border-radius: var(--radius-pill);
background: var(--color-gold);
border-color: var(--color-gold);
}
/* ═══ 11. TRUST STRIP ════════════════════════════════════════════════════ */
.trust {
background: var(--color-surface);
border-bottom: var(--hair) solid var(--color-border);
}
.trust-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-block: var(--space-md);
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: var(--space-sm) 0.6rem;
text-align: center;
}
/* The vertical hairlines that divide the four promises. At the 2-up base the
second column carries them; responsive.css re-hangs them for 4-up. */
.trust-item:nth-child(even) {
border-inline-start: var(--hair) solid var(--color-border);
}
.trust-text { display: block; }
.trust-title {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
color: var(--color-emerald);
}
.trust-sub {
display: block;
font-size: var(--text-xs);
line-height: 1.45;
color: var(--color-text-muted);
}
/* ═══ 12. CATEGORY PORTALS — the only circles on the site ════════════════ */
/* The two home-page sections that sit on the plain cream canvas. Named so the
band rhythm is explicit rather than accidental:
hero(emerald) → trust(white) → shop-by(cream) → wedding edit(emerald card)
→ arrivals(cream) → collections(white) → reviews(cream) → showrooms(cream). */
.shop-by,
.arrivals { background: var(--color-bg); }
/* Five circles do not fit across 360px, so the row scrolls in its own box.
responsive.css turns it into a five-column grid at 768px and resets the
overflow, the negative margin and the snap. */
.portal-row {
display: flex;
flex-wrap: nowrap;
gap: var(--space-sm);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--color-border-gold) transparent;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: var(--space-xs);
}
.portal {
flex: none;
width: 42%;
min-width: 0;
scroll-snap-align: start;
}
.portal-link {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.15rem;
}
.portal-media {
display: block;
width: 100%;
aspect-ratio: 1;
margin-bottom: var(--space-xs);
padding: 0.35rem;
background: var(--color-surface);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-circle);
overflow: hidden;
transition: border-color var(--transition), background-color var(--transition);
}
.portal-media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-circle);
}
.portal-link:hover .portal-media,
.portal-link:focus-visible .portal-media {
background: var(--color-sand);
border-color: var(--color-gold);
}
.portal-name {
font-family: var(--font-display);
font-size: var(--text-base);
color: var(--color-emerald);
}
.portal-count {
display: inline-block;
margin-right: -0.12em;
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* ═══ 13. THE WEDDING EDIT BAND ══════════════════════════════════════════ */
.edit-band {
width: 100%;
padding-block: var(--space-section);
background: var(--color-emerald);
color: var(--color-on-dark);
position: relative;
overflow: hidden;
}
.edit-card {
display: grid;
gap: var(--space-lg);
padding: 0;
background: transparent;
color: var(--color-on-dark);
}
.edit-say { text-align: left; }
.edit-eyebrow {
display: inline-block;
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-gold-lite);
}
.edit-title {
font-size: var(--text-xl);
color: var(--color-on-dark);
margin-bottom: var(--space-sm);
}
.edit-text {
font-size: var(--text-sm);
font-weight: 300;
line-height: 1.65;
color: var(--color-on-dark);
margin-bottom: var(--space-sm);
}
.edit-points {
display: grid;
gap: 0.6rem;
margin-bottom: var(--space-md);
padding-top: var(--space-sm);
border-top: var(--hair) solid var(--color-border-gold);
}
.edit-points li {
position: relative;
padding-left: 1.15rem;
font-size: var(--text-sm);
color: var(--color-on-dark);
}
/* the flourish's lozenge, reused as the list marker */
.edit-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 0.4rem;
height: 0.4rem;
background: var(--color-gold-lite);
transform: rotate(45deg);
}
.edit-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.edit-media { margin: 0; }
/* ═══ 14. PRODUCT CARDS & GRID ═══════════════════════════════════════════ */
.product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-sm) 0.75rem;
}
.product-grid > .stagger-child { display: flex; }
.pc {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
padding: 0.4rem 0.4rem var(--space-sm);
background: var(--color-surface);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
transition: border-color var(--transition);
}
.pc:hover { border-color: var(--color-border-gold); }
.pc-frame {
position: relative;
margin-bottom: 0.75rem;
}
.pc-media-link { display: block; }
.pc-badge {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 3;
padding: 0.2rem 0.6rem;
background: var(--color-gold);
color: var(--color-emerald-dp);
border-radius: var(--radius-pill);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.6;
}
/* main.js injects `.pc-act.pc-heart` and `.pc-act.pc-bagbtn` here (first-timer
#2 — the localStorage wishlist and enquiry bag). The div is empty in the
HTML, so it must collapse to nothing until it is filled. */
.pc-actions {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 3;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.pc-actions:empty { display: none; }
.pc-act,
.pc-actions button,
.pc-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.125rem;
background: var(--color-surface);
color: var(--color-emerald);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-circle);
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.pc-act .ico { width: 1.0625rem; height: 1.0625rem; }
.pc-act:hover,
.pc-act:focus-visible,
.pc-actions button:hover,
.pc-actions button:focus-visible,
.pc-actions a:hover,
.pc-actions a:focus-visible {
background: var(--color-sand);
border-color: var(--color-border-gold);
}
/* saved / in the bag — main.js also sets aria-pressed, so the state is not
carried by colour alone */
.pc-act.is-on,
.pc-actions .is-on,
.pc-actions button.is-on {
color: var(--color-gold-text);
background: var(--color-sand);
border-color: var(--color-border-gold);
}
.pc-heart.is-on .ico-heart { fill: var(--color-gold); }
.pc-bagbtn.is-on .ico-bag { fill: var(--color-gold); }
.pc-body {
display: flex;
flex-direction: column;
flex: 1;
gap: 0.2rem;
padding-inline: 0.35rem;
}
.pc-code {
font-size: var(--text-xs);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.pc-name {
font-size: var(--text-base);
line-height: 1.25;
color: var(--color-emerald);
}
.pc-metal {
font-size: var(--text-xs);
line-height: 1.45;
color: var(--color-text-muted);
}
.pc-price-tag {
margin-top: auto;
padding-top: 0.5rem;
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.4;
color: var(--color-emerald-dp);
letter-spacing: 0.04em;
}
.pc-tag-spec {
color: var(--color-gold-dk);
font-weight: 600;
}
.pc-tag-req {
color: var(--color-text-muted);
font-weight: 400;
}
.pc-ask {
align-self: flex-start;
margin-top: 0.6rem;
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-gold-text);
border-bottom: var(--hair) solid var(--color-border-gold);
padding-bottom: 2px;
transition: color var(--transition), border-color var(--transition);
}
.pc-ask:hover,
.pc-ask:focus-visible {
color: var(--color-emerald);
border-bottom-color: var(--color-emerald);
}
/* ═══ 15. COLLECTIONS STRIP (home) ═══════════════════════════════════════ */
.col-strip { background: var(--color-surface); }
.col-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md) 0.75rem;
}
.col-card { min-width: 0; }
.col-link {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.col-media { margin-bottom: 0.6rem; }
.col-name {
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.2;
color: var(--color-emerald);
}
.col-count {
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.col-link:hover .col-name,
.col-link:focus-visible .col-name { color: var(--color-gold-text); }
/* ═══ 16. REVIEWS ════════════════════════════════════════════════════════ */
.reviews { background: var(--color-bg); }
.review-row {
display: grid;
gap: var(--space-sm);
}
.review {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-sm);
background: var(--color-surface);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
}
/* the arch again, at avatar scale */
.review-photo {
display: block;
width: 4rem;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--arch);
border: var(--hair) solid var(--color-border-gold);
}
.review-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.review-initial {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
aspect-ratio: 3 / 4;
background: var(--color-sand);
border-radius: var(--arch);
border: var(--hair) solid var(--color-border-gold);
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-emerald);
}
.review-quote p {
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.45;
color: var(--color-text);
}
.review-who {
margin-top: auto;
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
}
.review-name {
display: block;
font-weight: 500;
font-size: var(--text-sm);
color: var(--color-emerald);
}
.review-meta {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ═══ 17. SHOWROOMS & STORE BLOCKS ═══════════════════════════════════════ */
.showrooms {
width: 100%;
background: var(--color-surface);
border-top: var(--hair) solid var(--color-border);
border-bottom: var(--hair) solid var(--color-border);
}
.showroom-grid {
display: grid;
gap: var(--space-md);
}
.showroom-say .section-head,
.showroom-say .section-title,
.showroom-say .ornament,
.showroom-say .flourish,
.showroom-say .section-sub { text-align: left; }
.showroom-say .ornament,
.showroom-say .flourish { margin-inline: 0; }
.showroom-say .section-sub { margin-inline: 0; }
.store-list {
display: grid;
gap: var(--space-sm);
margin-block: var(--space-md);
}
.store {
padding-top: var(--space-sm);
border-top: var(--hair) solid var(--color-border);
}
.store-name {
font-size: var(--text-lg);
color: var(--color-emerald);
}
.store-role {
display: inline-block;
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.store-addr {
font-size: var(--text-sm);
color: var(--color-text);
}
.store-hours,
.store-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.store-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-xs);
}
.store-links a {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-gold-text);
border-bottom: var(--hair) solid var(--color-border-gold);
padding-bottom: 2px;
transition: color var(--transition), border-color var(--transition);
}
.store-links a:hover,
.store-links a:focus-visible {
color: var(--color-emerald);
border-bottom-color: var(--color-emerald);
}
.showroom-remote {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.showroom-media { margin: 0; }
/* --- the wide store cards on /contact ----------------------------------- */
.store-list-wide { gap: var(--space-md); }
.store-card {
padding: var(--space-sm);
background: var(--color-surface);
border: var(--hair) solid var(--color-border);
border-top-color: var(--color-border);
border-radius: var(--radius-card);
}
.store-media { margin-bottom: var(--space-sm); }
.store-body { display: block; }
.store-status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
}
.store-status-text {
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-emerald);
}
.store-status-hours { color: var(--color-text-muted); }
.store-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-sm);
}
/* ═══ 18. THE CATALOGUE PAGE ═════════════════════════════════════════════ */
/* --- rate card ---------------------------------------------------------- */
.rate-card {
padding: var(--space-sm);
background: var(--color-surface);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-card);
box-shadow: var(--lift);
}
.rate-head {
display: inline-block;
margin-right: -0.18em;
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold-text);
}
/* one column at 360px; responsive.css takes it to 2 × 2 at 480px */
.rate-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xs);
margin-bottom: var(--space-xs);
}
.rate-item {
padding: 0.6rem;
background: var(--color-sand);
border-radius: var(--radius-sm);
}
.rate-item dt {
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text);
}
.rate-item dd {
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.2;
color: var(--color-emerald);
font-variant-numeric: tabular-nums;
}
.rate-item dd span {
display: block;
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--color-text);
}
.rate-stamp {
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-text-muted);
}
/* --- filters ------------------------------------------------------------ */
.filters {
position: relative;
z-index: 10;
background: var(--color-surface);
border-bottom: var(--hair) solid var(--color-border);
}
.filter-inner {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding-block: var(--space-sm);
}
.filter-count {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.filter-count strong {
font-weight: 500;
color: var(--color-emerald);
font-variant-numeric: tabular-nums;
}
.filter-clear {
margin-left: 0.35rem;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-gold-text);
border-bottom: var(--hair) solid var(--color-border-gold);
transition: color var(--transition), border-color var(--transition);
}
.filter-clear:hover,
.filter-clear:focus-visible {
color: var(--color-emerald);
border-bottom-color: var(--color-emerald);
}
/* --- the grid & the empty state ---------------------------------------- */
.catalogue { background: var(--color-bg); }
.product-grid-wide { gap: var(--space-md) 0.75rem; }
.empty {
max-width: 34rem;
margin-inline: auto;
padding: var(--space-lg) var(--space-sm);
text-align: center;
background: var(--color-surface);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-card);
}
.empty-head {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.2;
color: var(--color-emerald);
margin-bottom: var(--space-xs);
}
.empty-text {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-md);
}
.empty .btn { margin-bottom: var(--space-sm); }
.empty .text-link { justify-content: center; }
/* --- how a price is built ---------------------------------------------- */
.pricing { background: var(--color-surface); }
.pricing-grid {
display: grid;
gap: var(--space-lg);
}
.pricing-say .ornament,
.pricing-say .flourish { margin-inline: 0; }
.pricing-say .section-title { text-align: left; }
.pricing-text {
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
.pricing-steps {
display: grid;
gap: var(--space-sm);
margin-bottom: var(--space-md);
counter-reset: step;
}
.pricing-steps li {
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
}
.step-k {
display: inline-block;
margin-right: -0.16em;
margin-bottom: 0.15rem;
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.step-v {
display: block;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text);
}
/* --- the making-charge card -------------------------------------------- */
/* .charge-card is the table's scroll box: from 768px responsive.css restores
`display: table`, and a real three-column table can out-run a narrow
column. It scrolls inside this box rather than widening the page. */
.charge-card {
padding: var(--space-sm);
background: var(--color-bg);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-card);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--color-border-gold) transparent;
}
.charge-head {
display: block;
margin-bottom: var(--space-sm);
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-emerald);
}
/* 360px base: the table is stacked, each row a small record.
responsive.css restores `display: table-*` from 768px up — the only rules
it needs to undo are the six display switches below and `thead`. */
.charge-table thead { display: none; }
.charge-table tbody,
.charge-table tr,
.charge-table th,
.charge-table td { display: block; }
.charge-table tr {
padding-block: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
}
.charge-table th[scope="row"] {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-base);
text-align: left;
color: var(--color-emerald);
}
.charge-note {
display: block;
font-family: var(--font-body);
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-text-muted);
}
.charge-table td {
display: flex;
justify-content: space-between;
gap: var(--space-sm);
padding-top: 0.2rem;
font-size: var(--text-sm);
color: var(--color-text);
}
.charge-table td::before {
content: attr(data-label);
font-size: var(--text-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.cell-num {
font-variant-numeric: tabular-nums;
color: var(--color-emerald);
}
.charge-foot {
margin-top: var(--space-sm);
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
font-size: var(--text-xs);
line-height: 1.55;
color: var(--color-text-muted);
}
/* ═══ 19. CTA BAND — the closing emerald band on four pages ══════════════ */
.cta-band {
padding-block: var(--space-lg);
background: var(--color-emerald);
color: var(--color-on-dark);
}
.cta-inner {
max-width: 46rem;
text-align: center;
}
.cta-title {
font-size: var(--text-2xl);
color: var(--color-on-dark);
margin-bottom: var(--space-xs);
text-wrap: balance;
}
.cta-sub {
font-size: var(--text-sm);
font-weight: 300;
line-height: 1.6;
color: var(--color-on-dark);
margin-bottom: var(--space-md);
}
.cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
}
/* ═══ 20. THE COLLECTIONS PAGE ═══════════════════════════════════════════ */
.col-row-full {
padding-block: var(--space-section);
background: var(--color-bg);
}
/* the alternation reads at every width; responsive.css swaps the sides */
.col-row-full.is-flipped { background: var(--color-surface); }
.col-row-inner {
display: grid;
gap: var(--space-md);
grid-template-areas:
"media"
"say";
}
.col-row-media {
grid-area: media;
margin: 0;
}
.col-row-say { grid-area: say; }
.col-row-say .flourish {
margin-inline: 0;
margin-block: var(--space-xs) var(--space-sm);
}
.col-row-count {
display: inline-block;
margin-right: -0.18em;
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.col-row-title {
font-size: var(--text-2xl);
color: var(--color-emerald);
}
.col-row-lead {
font-size: var(--text-lg);
font-weight: 300;
line-height: 1.5;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.col-row-body {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
}
.col-row-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
}
/* --- also on the counter ------------------------------------------------ */
.also { background: var(--color-bg); }
.also-row {
display: grid;
gap: var(--space-md);
}
.also-item {
padding-top: var(--space-sm);
border-top: var(--hair) solid var(--color-border);
}
.also-name {
font-size: var(--text-lg);
color: var(--color-emerald);
margin-bottom: 0.25rem;
}
.also-text {
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text-muted);
}
/* --- the lookbook — a snapping strip ------------------------------------ */
.lookbook { background: var(--color-surface); }
/* Flex, not grid — responsive.css replaces this with a real grid at 480px and
resets width / overflow / margins / snap; a leftover grid-auto-flow would
have fought that. */
.look-strip {
display: flex;
flex-wrap: nowrap;
gap: var(--space-sm);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--color-border-gold) transparent;
padding-bottom: var(--space-xs);
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
}
.look-item {
flex: none;
width: 72%;
min-width: 0;
scroll-snap-align: start;
}
.look-foot {
margin-top: var(--space-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
/* ═══ 21. THE ABOUT PAGE ═════════════════════════════════════════════════ */
.note { background: var(--color-bg); }
.note-grid {
display: grid;
gap: var(--space-md);
}
.note-media { margin: 0; }
.note-say .ornament,
.note-say .flourish { margin-inline: 0; }
.note-say .section-title,
.workshop-say .section-title { text-align: left; }
.note-text {
font-size: var(--text-base);
line-height: 1.75;
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.note-sign {
margin-top: var(--space-sm);
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-emerald);
}
/* --- the dated rail ----------------------------------------------------- */
.rail { background: var(--color-surface); }
.rail-list { display: grid; }
.rail-item {
display: grid;
gap: 0.35rem;
padding-block: var(--space-sm);
border-top: var(--hair) solid var(--color-border);
}
.rail-year {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1;
letter-spacing: 0.04em;
color: var(--color-gold-text);
font-variant-numeric: tabular-nums;
}
.rail-body { display: block; }
.rail-title {
font-size: var(--text-lg);
color: var(--color-emerald);
margin-bottom: 0.15rem;
}
.rail-text {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-muted);
}
/* --- the workshop ------------------------------------------------------- */
.workshop { background: var(--color-bg); }
.workshop-grid {
display: grid;
gap: var(--space-md);
}
.workshop-say .ornament,
.workshop-say .flourish { margin-inline: 0; }
.workshop-media { margin: 0; }
/* one column at 360px; responsive.css takes .fact-list to 2 × 2 at 480px */
.fact-list,
.track-facts {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-sm);
margin-top: var(--space-md);
}
.fact-list li,
.track-facts li {
min-width: 0;
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border-gold);
}
.fact-k {
display: block;
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.1;
color: var(--color-gold-text);
font-variant-numeric: tabular-nums;
}
.fact-v {
display: block;
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-text-muted);
}
/* --- the promises ledger ------------------------------------------------ */
.promises { background: var(--color-surface); }
.ledger { display: grid; }
.ledger-row {
display: grid;
gap: 0.2rem;
padding-block: var(--space-sm);
border-top: var(--hair) solid var(--color-border);
}
.ledger-k {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-emerald);
}
.ledger-v {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-muted);
}
/* ═══ 22. THE CONTACT PAGE ═══════════════════════════════════════════════ */
/* --- four ways to reach the counter ------------------------------------- */
.reach { background: var(--color-bg); }
.reach-row {
display: grid;
gap: var(--space-sm);
}
.reach-item { min-width: 0; }
.reach-card {
display: flex;
flex-direction: column;
gap: 0.3rem;
height: 100%;
padding: var(--space-sm);
background: var(--color-surface);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
transition: border-color var(--transition), background-color var(--transition);
}
.reach-card:hover,
.reach-card:focus-visible {
border-color: var(--color-border-gold);
background: var(--color-bg);
}
.reach-card .reach-ico { margin-bottom: var(--space-xs); }
.reach-name {
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.2;
color: var(--color-emerald);
}
.reach-value {
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--color-gold-text);
}
.reach-sub {
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-text-muted);
}
.reach-foot {
margin-top: var(--space-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
/* --- the map ------------------------------------------------------------ */
.map { background: var(--color-surface); }
/* the arch, applied to the map as well — one device, everywhere */
.map-frame {
overflow: hidden;
border-radius: var(--arch);
border: var(--hair) solid var(--color-border-gold);
background: var(--color-sand);
}
.map-embed {
width: 100%;
height: 20rem;
border: 0;
}
.map-foot {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-sm);
text-align: center;
}
.map-addr {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* --- track an order ----------------------------------------------------- */
.track { background: var(--color-bg); }
.track-inner {
display: grid;
gap: var(--space-md);
}
.track-say .ornament,
.track-say .flourish { margin-inline: 0; }
.track-say .section-title { text-align: left; }
.track-text {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
.track-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-md);
}
.track-facts { margin-top: 0; }
/* --- the enquiry form --------------------------------------------------- */
.enquiry { background: var(--color-surface); }
.enquiry-grid {
display: grid;
gap: var(--space-lg);
}
.enquiry-say .ornament,
.enquiry-say .flourish { margin-inline: 0; }
.enquiry-say .section-title { text-align: left; }
.enquiry-text {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
.enquiry-promises {
display: grid;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.enquiry-promises li {
display: grid;
grid-template-columns: 1.5rem 1fr;
gap: var(--space-xs);
align-items: start;
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-text-muted);
}
.enquiry-form-wrap {
padding: var(--space-sm);
background: var(--color-bg);
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-card);
}
.form-flash {
padding: var(--space-sm);
margin-bottom: var(--space-sm);
border-radius: var(--radius-card);
font-size: var(--text-sm);
line-height: 1.6;
}
.form-flash.is-good {
background: var(--color-emerald);
color: var(--color-on-dark);
}
.form-flash.is-good a {
color: var(--color-gold-lite);
border-bottom: var(--hair) solid var(--color-gold-lite);
}
.form-flash.is-bad {
background: var(--color-gold);
color: var(--color-emerald-dp);
}
.form-flash.is-bad a {
color: var(--color-emerald-dp);
border-bottom: var(--hair) solid var(--color-emerald-dp);
}
.enquiry-form {
display: grid;
gap: var(--space-sm);
}
.field { display: grid; gap: 0.3rem; }
.field-wide { grid-column: 1 / -1; }
.field-label {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text);
}
.field-req {
margin-left: 0.3rem;
letter-spacing: 0.1em;
color: var(--color-gold-text);
}
.field-opt {
margin-left: 0.3rem;
letter-spacing: 0.1em;
color: var(--color-text-muted);
}
.field-input,
.field-select,
.field-area,
.lost-input {
width: 100%;
padding: 0.7rem 0.85rem;
background: var(--color-surface);
color: var(--color-text);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
font-size: var(--text-sm);
transition: border-color var(--transition);
}
.field-input::placeholder,
.field-area::placeholder,
.lost-input::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.field-input:focus,
.field-select:focus,
.field-area:focus,
.lost-input:focus { border-color: var(--color-emerald); }
.field-select {
appearance: none;
-webkit-appearance: none;
padding-right: 2.25rem;
}
.field-area {
min-height: 8rem;
resize: vertical;
line-height: 1.6;
}
.field-hint {
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-text-muted);
}
/* main.js validates inline: it adds .has-error to the control and inserts a
after it. The palette has no red, so
the error is carried by the words, by aria-invalid and by an emerald
key-line on all four sides — never a one-sided coloured bar. */
/* the plate stays white: --color-text-muted placeholders fall to 4.25:1 on
sand, so the flag is the emerald key-line and the note, not a tint */
.field-input.has-error,
.field-select.has-error,
.field-area.has-error {
border-color: var(--color-emerald);
box-shadow: inset 0 0 0 var(--hair) var(--color-emerald);
}
.field-error {
font-size: var(--text-xs);
line-height: 1.5;
color: var(--color-emerald);
}
.field-error::before {
content: "\2014\00a0"; /* an em dash, so the note reads as a note */
color: var(--color-gold-text);
}
.form-submit {
display: grid;
gap: var(--space-xs);
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
}
.form-go { justify-self: start; }
.form-note {
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-text-muted);
}
.form-note a {
color: var(--color-gold-text);
border-bottom: var(--hair) solid var(--color-border-gold);
}
/* --- the retail questions ----------------------------------------------- */
.help { background: var(--color-bg); }
.faq-list { display: grid; }
.faq-item { border-top: var(--hair) solid var(--color-border); }
.faq-details { padding-block: var(--space-xs); }
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding-block: var(--space-xs);
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1.3;
color: var(--color-emerald);
list-style: none;
transition: color var(--transition);
}
.faq-q:hover { color: var(--color-gold-text); }
.faq-details[open] .faq-caret { transform: rotate(90deg); }
.faq-a {
padding-bottom: var(--space-xs);
max-width: 52rem;
}
.faq-a p {
font-size: var(--text-sm);
line-height: 1.75;
color: var(--color-text-muted);
}
.faq-foot {
margin-top: var(--space-md);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
/* ═══ 23. THE ERROR PAGES ════════════════════════════════════════════════ */
.lost { background: var(--color-bg); }
.lost.is-fault { background: var(--color-surface); }
.lost-grid {
display: grid;
gap: var(--space-md);
}
.lost-media { margin: 0; }
.lost-say .ornament,
.lost-say .flourish { margin-inline: 0; }
.lost-say .section-title { text-align: left; }
.lost-search {
display: grid;
gap: 0.35rem;
margin-block: var(--space-md);
}
.lost-search-row {
display: flex;
gap: var(--space-xs);
}
.lost-input { flex: 1 1 auto; min-width: 0; }
.lost-go { flex: none; }
.lost-routes-head {
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.lost-routes { margin-bottom: var(--space-md); }
.lost-open {
display: grid;
gap: var(--space-sm);
margin-block: var(--space-md);
}
.lost-open li {
display: grid;
gap: 0.15rem;
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
}
/* .fact-k reads as a big number on About and Contact; here it labels a
channel, so it steps down to a tracked label. */
.lost-open .fact-k {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.lost-open .fact-v {
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text);
}
.lost-open .fact-v a {
color: var(--color-gold-text);
border-bottom: var(--hair) solid var(--color-border-gold);
transition: color var(--transition), border-color var(--transition);
}
.lost-open .fact-v a:hover,
.lost-open .fact-v a:focus-visible {
color: var(--color-emerald);
border-bottom-color: var(--color-emerald);
}
.lost-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-md);
}
/* ═══ 24. NEWSLETTER SIGN-UP ═════════════════════════════════════════════ */
.signup {
padding-block: var(--space-lg);
background: var(--color-sand);
border-top: var(--hair) solid var(--color-border);
}
.signup-inner {
display: grid;
gap: var(--space-md);
}
.signup-say { text-align: center; }
.signup-title {
font-size: var(--text-xl);
color: var(--color-emerald);
margin-bottom: var(--space-xs);
}
/* On the sand band only --color-text carries type — the muted grey would
fall to 4.25:1 here. Secondary rank is made with size instead. */
.signup-text {
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text);
max-width: 34rem;
margin-inline: auto;
}
.signup-form {
display: grid;
gap: var(--space-xs);
max-width: 34rem;
margin-inline: auto;
width: 100%;
}
.signup-input {
width: 100%;
padding: 0.8rem 0.9rem;
background: var(--color-surface);
color: var(--color-text);
border: var(--hair) solid var(--color-border);
border-radius: var(--radius-card);
font-size: var(--text-sm);
transition: border-color var(--transition);
}
.signup-input::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.signup-input:focus { border-color: var(--color-emerald); }
.signup-go { width: 100%; }
.signup-done {
margin-top: var(--space-xs);
padding-top: var(--space-xs);
border-top: var(--hair) solid var(--color-border-gold);
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-emerald);
}
/* Two failure notes reach this form: .signup-done.signup-fail rendered by
footer.php after contact-handler.php bounces ?error=list, and
injected by main.js before the POST.
Both read the same. On the sand band only --color-text and --color-emerald
may carry type, so the state is carried by the words and a full key-line on
all four sides — never a colour alone and never a one-sided bar. */
.signup-fail,
.signup-error {
flex: 1 0 100%;
margin-top: var(--space-xs);
padding: var(--space-xs) 0.75rem;
background: var(--color-surface);
border: var(--hair) solid var(--color-emerald);
border-top-color: var(--color-emerald);
border-radius: var(--radius-card);
font-size: var(--text-xs);
line-height: 1.55;
color: var(--color-emerald);
}
/* .signup-fail also carries .signup-done, whose top hairline would double up */
.signup-fail { padding-top: var(--space-xs); }
/* ═══ 25. FOOTER ═════════════════════════════════════════════════════════ */
.site-footer {
background: var(--color-emerald-dp);
color: var(--color-on-dark);
/* the mobile action bar's clearance lives on
(§2), which
responsive.css zeroes at 768px along with the bar itself */
padding-bottom: var(--space-md);
}
/* On the emerald grounds --color-text-muted would drop to 3.2:1, so every
secondary line down here stays --color-on-dark and steps down in SIZE. */
.footer-grid {
display: grid;
gap: var(--space-md);
padding-top: var(--space-lg);
}
.footer-identity { }
.footer-name {
font-family: var(--font-display);
font-size: var(--text-xl);
line-height: 1.15;
letter-spacing: 0.06em;
color: var(--color-on-dark);
}
.footer-name-gu {
font-size: var(--text-lg);
line-height: 1.4;
color: var(--color-gold-lite);
}
.footer-legal-name {
margin-top: var(--space-xs);
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-on-dark);
}
.footer-line {
margin-top: var(--space-xs);
font-size: var(--text-sm);
font-weight: 300;
line-height: 1.6;
color: var(--color-on-dark);
max-width: 26rem;
}
.footer-est {
margin-top: var(--space-xs);
font-size: var(--text-xs);
letter-spacing: 0.06em;
color: var(--color-on-dark);
}
.footer-col { min-width: 0; }
/* the "Talk to us" column is not a link list — it holds a phone number, an
address and the hours, so it gets its own breathing room */
.footer-reach { display: block; }
.footer-head {
margin-bottom: var(--space-xs);
padding-bottom: var(--space-xs);
border-bottom: var(--hair) solid var(--color-border-gold);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-gold-lite);
}
.footer-links {
display: grid;
gap: 0.35rem;
}
.footer-links a {
font-size: var(--text-sm);
color: var(--color-on-dark);
transition: color var(--transition);
}
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--color-gold-lite); }
.footer-phone {
display: inline-block;
margin-bottom: var(--space-xs);
font-family: var(--font-display);
font-size: var(--text-lg);
letter-spacing: 0.04em;
color: var(--color-gold-lite);
font-variant-numeric: tabular-nums;
}
.footer-address {
margin-top: var(--space-sm);
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-on-dark);
}
.footer-hours {
margin-top: var(--space-xs);
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-on-dark);
}
/* --- payment & trust marks ---------------------------------------------- */
.footer-marks {
padding-block: var(--space-md);
}
.mark-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
padding-top: var(--space-md);
border-top: var(--hair) solid var(--color-border-gold);
}
.mark {
padding: 0.3rem 0.75rem;
border: var(--hair) solid var(--color-border-gold);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
letter-spacing: 0.08em;
color: var(--color-on-dark);
}
/* --- the base line ------------------------------------------------------ */
.footer-base { border-top: var(--hair) solid var(--color-border-gold); }
.footer-base-inner {
display: grid;
gap: var(--space-xs);
padding-block: var(--space-sm);
}
.footer-legal,
.footer-credit {
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-on-dark);
}
.footer-credit a {
color: var(--color-gold-lite);
border-bottom: var(--hair) solid var(--color-border-gold);
transition: border-color var(--transition);
}
.footer-credit a:hover,
.footer-credit a:focus-visible { border-bottom-color: var(--color-gold-lite); }
/* ═══ 26. THE WISHLIST / ENQUIRY DRAWER (first-timer #2) ═════════════════ */
/* The whole drawer is .js-only AND carries [hidden] in the HTML, so it can
never render as a dead control. Once JS un-hides it, the panel is on
screen immediately — effects.css owns any entrance motion. */
.drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
}
.drawer-scrim {
position: absolute;
inset: 0;
z-index: var(--z-scrim);
background: var(--color-emerald-dp);
opacity: .55;
}
.drawer-panel {
position: absolute;
z-index: var(--z-drawer);
inset-block: 0;
right: 0;
display: flex;
flex-direction: column;
width: min(24rem, 92vw);
max-width: 100%;
background: var(--color-surface);
box-shadow: var(--lift);
}
.drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm);
border-bottom: var(--hair) solid var(--color-border);
}
.drawer-title {
font-size: var(--text-lg);
color: var(--color-emerald);
}
.drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: var(--color-emerald);
border-radius: var(--radius-circle);
transition: background-color var(--transition);
}
.drawer-close:hover,
.drawer-close:focus-visible { background: var(--color-sand); }
.drawer-body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--space-sm);
}
.drawer-sec + .drawer-sec { margin-top: var(--space-md); }
/* main.js writes data-open-tab="wish" or "bag" onto #shopDrawer depending on
which tool opened it — the matching section head takes the emphasis so you
land looking at the right list. */
.drawer[data-open-tab="wish"] .drawer-sec:first-of-type .drawer-sec-head,
.drawer[data-open-tab="bag"] .drawer-sec:last-of-type .drawer-sec-head {
color: var(--color-emerald);
}
.drawer[data-open-tab="wish"] .drawer-sec:first-of-type .drawer-n,
.drawer[data-open-tab="bag"] .drawer-sec:last-of-type .drawer-n {
background: var(--color-gold);
color: var(--color-emerald-dp);
}
.drawer-sec-head {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-xs);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-text);
}
.drawer-n {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding-inline: 0.3rem;
background: var(--color-sand);
color: var(--color-text);
border-radius: var(--radius-pill);
font-size: 0.625rem;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
/* main.js writes these rows as
li.drawer-item > img.drawer-item-img
+ div.drawer-item-body > p.drawer-item-name
+ p.drawer-item-spec
+ p.drawer-item-price
+ button.drawer-item-remove
The shape is fixed here so the injected markup carries no styling of its
own. The element selectors alongside each class are a safety net in case
the row markup is ever rebuilt. */
.drawer-list { display: grid; }
.drawer-item,
.drawer-list li {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) auto;
gap: var(--space-xs);
align-items: center;
padding-block: var(--space-xs);
border-top: var(--hair) solid var(--color-border);
}
/* the arch, once more, at thumbnail scale */
.drawer-item-img,
.drawer-list img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--arch);
border: var(--hair) solid var(--color-border-gold);
}
.drawer-item-body { min-width: 0; }
.drawer-item-name,
.drawer-list strong,
.drawer-list a {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-sm);
line-height: 1.3;
color: var(--color-emerald);
}
.drawer-item-spec,
.drawer-list small {
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.drawer-item-price {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.drawer-item-remove,
.drawer-list button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: var(--color-text-muted);
border-radius: var(--radius-circle);
transition: background-color var(--transition), color var(--transition);
}
.drawer-item-remove .ico { width: 1rem; height: 1rem; }
.drawer-item-remove:hover,
.drawer-item-remove:focus-visible,
.drawer-list button:hover,
.drawer-list button:focus-visible {
background: var(--color-sand);
color: var(--color-emerald);
}
.drawer-empty {
font-size: var(--text-xs);
line-height: 1.6;
color: var(--color-text-muted);
}
/* the empty note retires by itself the moment a row exists — no JS needed */
.drawer-list:not(:empty) + .drawer-empty { display: none; }
.drawer-foot {
padding: var(--space-sm);
border-top: var(--hair) solid var(--color-border);
background: var(--color-bg);
}
.drawer-send {
width: 100%;
margin-bottom: var(--space-xs);
}
.drawer-note {
font-size: var(--text-xs);
line-height: 1.55;
color: var(--color-text-muted);
}
/* ═══ 27. STICKY MOBILE ACTION BAR ═══════════════════════════════════════ */
.mobile-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-bar);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
background: var(--color-emerald);
color: var(--color-on-dark);
box-shadow: var(--lift);
}
.mobile-bar-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3.5rem;
padding: 0.5rem;
color: var(--color-on-dark);
transition: background-color var(--transition);
}
.mobile-bar-item + .mobile-bar-item {
border-inline-start: var(--hair) solid var(--color-border-gold);
}
.mobile-bar-item:hover,
.mobile-bar-item:focus-visible { background: var(--color-emerald-dp); }
.mobile-bar-wa .ico { color: var(--color-gold-lite); }
.mobile-bar-label {
display: block;
font-size: 0.625rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-lite);
line-height: 1.3;
}
.mobile-bar-value {
display: block;
font-size: var(--text-xs);
line-height: 1.3;
}
/* ═══ 28. PAGE-LEVEL TUNING (body classes from header.php) ═══════════════ */
/* Home opens on the emerald hero, so the masthead hairline would double up
against it — the hero supplies its own edge. */
.page-home .masthead { border-bottom-color: transparent; }
/* The catalogue's own head sits on the tinted canvas and needs no extra rule
above the filter bar. */
.page-jewellery .page-head { border-bottom: 0; }
/* The two error pages are short; give them room so the footer is not pinned
under the fold. */
.page-404 .lost,
.page-500 .lost { padding-bottom: var(--space-xl); }