/* ------------------------------------------------------------------ * lod-store.css — The Atelier: store index, collection pages, product * pages and the gemstone-recommendation page. * * Loaded after lod.css AND after the legacy site.css, so these rules * win without !important. Everything is scoped under .st-page, which * build-store.js sets on — nothing here can reach another page * type. Tokens from lod.css only; no new colour literals. * ------------------------------------------------------------------ */ /* ---------- 0. Reclaim the base from legacy site.css ---------------- */ .st-page { background: var(--bg); color: var(--ink-2); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.65; } .st-page h1, .st-page h2, .st-page h3 { font-family: var(--font-display); color: var(--ink); font-weight: 500; line-height: 1.14; letter-spacing: -.01em; } .st-page h4 { font-family: var(--font-body); font-size: var(--t-h4); font-weight: 600; color: var(--ink); letter-spacing: 0; line-height: 1.35; } .st-page em { color: var(--gold); font-style: italic; } .st-page strong { color: var(--ink); font-weight: 600; } .st-page .eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: inline-block; line-height: 1.4; } .st-page .lede { font-size: var(--t-body-l); line-height: 1.75; color: var(--ink-3); max-width: 62ch; } .st-page .prose p { font-size: var(--t-body-l); line-height: 1.8; color: var(--ink-2); font-weight: 400; max-width: none; margin: 0; } .st-page .prose > * + * { margin-top: var(--s-4); } .st-page .prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .st-page .prose ul { margin: 0; padding-left: 1.15rem; } .st-page .prose li + li { margin-top: var(--s-2); } .st-page .grid > *, .st-page .split > * { min-width: 0; } /* Reveal — service.js adds `.in`; lod.css ships `.is-in`. Honour both, and never leave anything stranded at opacity 0 when JS does not run. */ .st-page .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .st-page .reveal.in, .st-page .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .st-page .reveal { opacity: 1; transform: none; } } /* Buttons — legacy site.css redefines .btn, so restate the system here. */ .st-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-body); font-size: var(--t-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; min-height: 48px; transition: background var(--t-std) var(--ease), color var(--t-std) var(--ease), border-color var(--t-std) var(--ease), transform var(--t-fast) var(--ease); } .st-page .btn:hover { transform: translateY(-1px); } .st-page .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--surface); } .st-page .btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); filter: none; } .st-page .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); } .st-page .btn-secondary:hover { border-color: var(--gold); color: var(--gold); background: transparent; } .st-page .btn-ghost { border-color: transparent; color: var(--gold); background: transparent; padding-inline: .4rem; } .st-page .btn-ghost:hover { color: var(--gold-bright); background: transparent; } .st-page :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* ---------- 1. Breadcrumb ------------------------------------------- */ .st-page .st-crumbwrap { padding-top: var(--s-5); } .st-page .crumb { font-family: var(--font-body); font-size: var(--t-caption); letter-spacing: .04em; color: var(--ink-muted); padding: 0; } .st-page .crumb a { color: var(--ink-muted); text-decoration: none; } .st-page .crumb a:hover { color: var(--gold); } .st-page .crumb span { color: var(--line-strong); margin: 0 .5rem; } /* ---------- 2. Atelier hero ----------------------------------------- */ .st-page .st-hero { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem) clamp(2.25rem, 1.4rem + 3vw, 4rem); border-bottom: 1px solid var(--line); } .st-page .st-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; } .st-page .st-hero h1 { font-family: var(--font-display); font-size: var(--t-display-l); font-weight: 500; line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: var(--s-3) 0 0; } .st-page .st-hero .lede { margin-top: var(--s-4); } .st-page .st-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } /* The honest principle — three short promises, set as a quiet ledger. */ .st-page .st-promise { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); } .st-page .st-promise li { border-bottom: 1px solid var(--line); padding: var(--s-4) 0; margin: 0; } .st-page .st-promise strong { display: block; font-family: var(--font-body); font-size: var(--t-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .st-page .st-promise span { display: block; margin-top: .4rem; font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); } /* ---------- 3. Section heads ---------------------------------------- */ .st-page .section-head { max-width: var(--w-text); margin-bottom: var(--s-6); } .st-page .section-head h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.14; color: var(--ink); margin: var(--s-3) 0 0; } .st-page .section-head .lede { margin-top: var(--s-4); } /* ---------- 4. Collection cards -------------------------------------- */ .st-page .st-coll-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } .st-page .st-coll { display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + .7vw, 1.75rem); transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease); } .st-page .st-coll:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .st-page .st-coll-mark { width: 100%; aspect-ratio: 5 / 3; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(160deg, var(--gold-soft), transparent 65%), var(--surface-muted); display: grid; place-items: center; margin-bottom: var(--s-2); } .st-page .st-coll-mark svg { width: 62%; height: 100%; } .st-page .st-coll-count { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .st-page .st-coll-name { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; color: var(--ink); } .st-page .st-coll-line { font-size: var(--t-small); line-height: 1.65; color: var(--ink-3); } .st-page .st-coll-go { margin-top: auto; padding-top: var(--s-3); font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .st-page .st-coll-go::after { content: " →"; } /* ---------- 5. Filter bar -------------------------------------------- */ .st-page .st-filterbar { margin-bottom: var(--s-5); } .st-page .st-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; } .st-page .st-filter { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.2; padding: .68rem 1.15rem; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .st-page .st-filter:hover { border-color: var(--gold); color: var(--gold); } .st-page .st-filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--surface); } .st-page .st-filter-n { font-size: var(--t-caption); opacity: .75; } .st-page .st-filter-links { margin: var(--s-4) 0 0; font-size: var(--t-caption); line-height: 1.9; color: var(--ink-muted); } .st-page .st-filter-links a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; } .st-page .st-filter-links a:hover { color: var(--gold); } .st-page .st-empty { margin: var(--s-6) 0 0; padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-3); font-size: var(--t-small); } /* ---------- 6. Product cards ----------------------------------------- */ .st-page .st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } .st-page .st-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* The collection filter hides cards with the `hidden` property. `display: flex` below is specificity 0-2-0 and beats the UA sheet's `[hidden] { display:none }` (0-1-0), so every chip silently left all 19 cards on screen. This restores it at 0-2-1 — declared FIRST so the flex rule can't be read as the winner. */ .st-page .st-card[hidden] { display: none; } .st-page .st-card { display: flex; flex-direction: column; min-width: 0; text-decoration: none; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease); } .st-page .st-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .st-page .st-card-art { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(165deg, var(--gold-soft), transparent 60%), var(--surface-muted); border-bottom: 1px solid var(--line); } .st-page .st-card-art svg { width: 100%; height: 100%; display: block; transition: transform var(--t-slow) var(--ease); } .st-page .st-card:hover .st-card-art svg { transform: scale(1.04); } .st-page .st-card-body { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 auto; padding: clamp(1.05rem, .85rem + .5vw, 1.4rem); } .st-page .st-card-cat { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .st-page .st-card-name { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; color: var(--ink); } .st-page .st-card-line { font-size: var(--t-small); line-height: 1.6; color: var(--ink-3); } .st-page .st-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); flex-wrap: wrap; } .st-page .st-card-price { font-family: var(--font-display); font-size: var(--t-h4); color: var(--ink); letter-spacing: 0; } .st-page .st-card-price.is-quiet { font-family: var(--font-body); font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); } .st-page .st-card-go { font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .st-page .st-card-go::after { content: " →"; } /* ---------- 7. "Not sure what you need?" band ------------------------ */ .st-page .st-help { background: var(--bg-2); border-block: 1px solid var(--line); } .st-page .st-help-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } .st-page .st-help h2 { font-size: var(--t-h2); margin: var(--s-3) 0 0; } .st-page .st-help p { margin-top: var(--s-4); font-size: var(--t-body-l); line-height: 1.75; color: var(--ink-3); } .st-page .st-help-routes { display: grid; gap: var(--s-3); } .st-page .st-route { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.2rem, 1rem + .6vw, 1.6rem); transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease); } .st-page .st-route:hover { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-2px); } .st-page .st-route strong { display: block; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; color: var(--ink); line-height: 1.25; } .st-page .st-route span { display: block; margin-top: .35rem; font-size: var(--t-small); line-height: 1.65; color: var(--ink-3); } .st-page .st-route em { display: inline-block; margin-top: var(--s-3); font-style: normal; font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .st-page .st-route em::after { content: " →"; } /* ---------- 8. Honest note ------------------------------------------- */ .st-page .st-honest { border-left: 2px solid var(--gold); background: var(--gold-soft); padding: clamp(1.3rem, 1rem + 1vw, 2rem) clamp(1.4rem, 1rem + 1.4vw, 2.4rem); border-radius: 0 var(--r-md) var(--r-md) 0; } .st-page .st-honest h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3); } .st-page .st-honest ul { list-style: none; margin: 0; padding: 0; } .st-page .st-honest li { position: relative; padding-left: 1.35rem; font-size: var(--t-small); line-height: 1.75; color: var(--ink-2); } .st-page .st-honest li + li { margin-top: var(--s-2); } .st-page .st-honest li::before { content: "—"; position: absolute; left: 0; color: var(--gold); } .st-page .st-honest p { font-size: var(--t-small); line-height: 1.75; color: var(--ink-2); margin: 0 0 var(--s-3); } .st-page .st-honest a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } /* ---------- 9. Collection page intro --------------------------------- */ .st-page .st-intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .st-page .st-facts { list-style: none; margin: 0; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--r-lg); } .st-page .st-facts li { font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); } .st-page .st-facts li + li { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); } .st-page .st-facts b { display: block; font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; } /* ---------- 10. Product hero ----------------------------------------- */ .st-page .st-phero { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(2rem, 1.4rem + 3vw, 4rem); border-bottom: 1px solid var(--line); } .st-page .st-phero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; } .st-page .st-stage { display: grid; gap: var(--s-3); } .st-page .st-stage-main { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(165deg, var(--gold-soft), transparent 60%), var(--surface-muted); } .st-page .st-stage-main svg { width: 100%; height: 100%; display: block; } .st-page .st-stage-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .st-page .st-stage-row figure { margin: 0; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: linear-gradient(165deg, var(--gold-soft), transparent 60%), var(--surface-muted); } .st-page .st-stage-row svg { width: 100%; height: 100%; display: block; } /* A piece shows photographs the moment it has any; the illustration is the fallback. Photographs fill the same frames the drawings used, so a store part-photographed and part-illustrated still reads as one shelf. */ .st-page .st-stage-main.st-photo, .st-page .st-stage-row figure.st-photo { background: var(--surface-muted); } .st-page .st-photo img { width: 100%; height: 100%; display: block; object-fit: cover; } .st-page .st-stage-row figure.st-photo { aspect-ratio: 1 / 1; } .st-page .st-artnote { font-size: var(--t-caption); line-height: 1.6; color: var(--ink-muted); margin: 0; } .st-page .st-phero h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; line-height: 1.08; color: var(--ink); margin: var(--s-3) 0 0; } .st-page .st-variant { display: block; font-size: var(--t-h3); color: var(--ink-muted); font-style: italic; margin-top: .35rem; } .st-page .st-phero .lede { margin-top: var(--s-4); } .st-page .st-priceline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); } .st-page .st-price { font-family: var(--font-display); font-size: var(--t-h2); color: var(--ink); line-height: 1; } .st-page .st-price-note { font-size: var(--t-caption); letter-spacing: .04em; color: var(--ink-muted); } .st-page .st-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .st-page .st-ctas .btn { flex: 1 1 auto; } .st-page .st-reassure { list-style: none; margin: var(--s-5) 0 0; padding: 0; } .st-page .st-reassure li { position: relative; padding-left: 1.35rem; font-size: var(--t-caption); line-height: 1.8; color: var(--ink-3); } .st-page .st-reassure li::before { content: "·"; position: absolute; left: .35rem; color: var(--gold); font-weight: 700; } /* Sibling swatches */ .st-page .st-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .st-page .st-swatch-label { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .st-page .st-swatch { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .st-page .st-swatch:hover { border-color: var(--gold); transform: translateY(-2px); } .st-page .st-swatch[aria-current="page"] { border-color: var(--gold); border-width: 2px; } .st-page .st-swatch i { display: block; width: 22px; height: 22px; border-radius: var(--r-pill); } /* Gemstone notice */ .st-page .st-notice { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-left: 2px solid var(--gold); background: var(--gold-soft); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--t-small); line-height: 1.75; color: var(--ink-2); } /* ---------- 11. Product body sections -------------------------------- */ .st-page .st-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem) clamp(2rem, 4vw, 4.5rem); } .st-page .st-sec { min-width: 0; } .st-page .st-sec + .st-sec { margin-top: 0; } .st-page .st-sec h2 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; color: var(--ink); margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong); } .st-page .st-sec p { font-size: var(--t-body); line-height: 1.8; color: var(--ink-2); margin: 0; } .st-page .st-sec > * + p, .st-page .st-sec p + * { margin-top: var(--s-4); } .st-page .st-list { list-style: none; margin: 0; padding: 0; } .st-page .st-list li { position: relative; padding: 0 0 0 1.5rem; font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); } .st-page .st-list li + li { margin-top: var(--s-3); } .st-page .st-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); } .st-page .st-limits li::before { content: "×"; color: var(--clay); font-weight: 600; } .st-page .st-spec { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); } .st-page .st-spec li { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); } /* Full-width section inside the two-column body — the heading rule spans the grid, but the reading measure stays civilised. */ .st-page .st-sec-wide { grid-column: 1 / -1; } .st-page .st-sec-wide .prose, .st-page .st-sec-wide .st-spec, .st-page .st-sec-wide > p { max-width: var(--w-text); } .st-page .st-afterreading { background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); } .st-page .st-afterreading h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s-3); } .st-page .st-afterreading .st-steps { list-style: none; counter-reset: st 0; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } .st-page .st-afterreading .st-steps li { counter-increment: st; border-top: 1px solid var(--line-strong); padding-top: var(--s-3); font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); } .st-page .st-afterreading .st-steps li::before { content: counter(st); display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); line-height: 1; margin-bottom: .4rem; } .st-page .st-afterreading .btn { margin-top: var(--s-5); } /* ---------- 12. FAQ (L.faqSection markup) ---------------------------- */ .st-page .st-faq section.block { padding: 0; border-bottom: 0; } .st-page .st-faq .block h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.14; color: var(--ink); margin: 0 0 var(--s-5); } .st-page .faq { border-top: 1px solid var(--line); } .st-page .faq-item { border-bottom: 1px solid var(--line); } .st-page .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; position: relative; padding: var(--s-4) 2.5rem var(--s-4) 0; font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; line-height: 1.4; color: var(--ink); } .st-page .faq-q:hover { color: var(--gold); } .st-page .faq-q::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-family: var(--font-body); font-size: 1.3rem; line-height: 1; } .st-page .faq-item.open .faq-q::after { content: "–"; } .st-page .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-std) var(--ease); } .st-page .faq-item.open .faq-a { max-height: 60rem; } .st-page .faq-a-inner { padding: 0 2.5rem var(--s-5) 0; font-size: var(--t-small); line-height: 1.8; color: var(--ink-3); max-width: 68ch; } .st-page .faq-a-inner p { margin: 0; } .st-page .faq-a-inner p + p { margin-top: var(--s-3); } /* ---------- 13. Related cards (L.relatedCards markup) ---------------- */ .st-page .related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; } .st-page .related a { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + .7vw, 1.7rem); transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease); } .st-page .related a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .st-page .related .r-for { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .st-page .related .r-title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; color: var(--ink); margin-top: .2rem; } .st-page .related .r-price { font-size: var(--t-caption); letter-spacing: .06em; color: var(--gold); margin-top: .3rem; } /* ---------- 14. CTA band (L.ctaBand markup) -------------------------- */ .st-page .cta-band { text-align: center; padding-block: var(--section-y); background: var(--bg-2); border-top: 1px solid var(--line); } .st-page .cta-band .wrap { max-width: var(--w-text); margin-inline: auto; padding-inline: var(--pad-x); } .st-page .cta-band h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.14; color: var(--ink); margin: 0 0 var(--s-4); } .st-page .cta-band p { font-size: var(--t-body-l); line-height: 1.75; color: var(--ink-3); margin: 0 auto var(--s-6); max-width: 56ch; } .st-page .cta-band .btn + .btn { margin-left: var(--s-3); } /* ---------- 15. Gemstone recommendation page ------------------------- */ .st-page .st-gr-hero { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem) clamp(2rem, 1.4rem + 3vw, 3.75rem); border-bottom: 1px solid var(--line); } .st-page .st-gr-hero h1 { font-family: var(--font-display); font-size: var(--t-display-l); font-weight: 500; line-height: 1.06; letter-spacing: -.015em; margin: var(--s-3) 0 0; } .st-page .st-gr-hero .lede { margin-top: var(--s-5); } .st-page .st-gr-hero .st-hero-ctas { margin-top: var(--s-6); } .st-page .st-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding: 0; list-style: none; } .st-page .st-pills li { font-size: var(--t-caption); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .35rem .9rem; } .st-page .st-steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: gr 0; list-style: none; margin: 0; padding: 0; } .st-page .st-steps-row li { counter-increment: gr; border-top: 1px solid var(--line-strong); padding-top: var(--s-4); min-width: 0; } .st-page .st-steps-row li::before { content: "0" counter(gr); display: block; font-family: var(--font-display); font-size: 2rem; color: var(--gold); line-height: 1; margin-bottom: var(--s-3); } .st-page .st-steps-row h3 { font-size: var(--t-h4); font-family: var(--font-body); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-2); } .st-page .st-steps-row p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); margin: 0; } .st-page .st-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0; max-width: 100%; } .st-page .st-tbl { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-small); } .st-page .st-tbl th, .st-page .st-tbl td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); color: var(--ink-2); } .st-page .st-tbl thead th { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); background: var(--surface-muted); border-bottom: 1px solid var(--line-strong); } .st-page .st-tbl tbody tr:last-child th, .st-page .st-tbl tbody tr:last-child td { border-bottom: 0; } .st-page .st-tbl td:first-child { color: var(--ink); font-weight: 500; } .st-page .st-caution { border-left: 2px solid var(--clay); background: var(--surface-muted); padding: clamp(1.3rem, 1rem + 1vw, 2rem); border-radius: 0 var(--r-md) var(--r-md) 0; } .st-page .st-caution h2 { font-size: var(--t-h3); margin: 0 0 var(--s-3); } .st-page .st-caution p { font-size: var(--t-small); line-height: 1.8; color: var(--ink-2); margin: 0; } .st-page .st-caution p + p { margin-top: var(--s-3); } .st-page .st-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) clamp(2rem, 4vw, 3.5rem); } .st-page .st-qa article { min-width: 0; border-top: 1px solid var(--line-strong); padding-top: var(--s-4); } .st-page .st-qa h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.25; color: var(--ink); margin: 0 0 var(--s-3); } .st-page .st-qa p { font-size: var(--t-body); line-height: 1.8; color: var(--ink-2); margin: 0; } .st-page .st-qa p + p { margin-top: var(--s-3); } .st-page .st-qa ul { margin: var(--s-3) 0 0; padding-left: 1.15rem; font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); } .st-page .st-qa li + li { margin-top: var(--s-2); } .st-page .st-qa a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .st-page .st-qa .st-tblwrap { margin-top: var(--s-4); } /* ---------- 16. Responsive ------------------------------------------- */ @media (max-width: 1180px) { .st-page .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-page .st-coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .st-page .st-hero-grid { grid-template-columns: 1fr; } .st-page .st-intro-grid { grid-template-columns: 1fr; } .st-page .st-help-grid { grid-template-columns: 1fr; } .st-page .st-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-page .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .st-page .st-phero-grid { grid-template-columns: 1fr; } .st-page .st-body { grid-template-columns: 1fr; gap: var(--s-7); } .st-page .st-qa { grid-template-columns: 1fr; } } @media (max-width: 760px) { .st-page .st-grid, .st-page .st-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-page .related { grid-template-columns: 1fr; } .st-page .st-coll-grid { grid-template-columns: 1fr; } .st-page .st-hero h1, .st-page .st-gr-hero h1 { font-size: var(--t-h1); } .st-page .st-afterreading .st-steps { grid-template-columns: 1fr; } .st-page .cta-band .btn { display: flex; width: 100%; } .st-page .cta-band .btn + .btn { margin-left: 0; margin-top: var(--s-3); } } @media (max-width: 560px) { .st-page .st-grid, .st-page .st-grid-3 { grid-template-columns: 1fr; } .st-page .st-steps-row { grid-template-columns: 1fr; } .st-page .st-hero-ctas .btn, .st-page .st-ctas .btn { width: 100%; } .st-page .st-card-name { font-size: var(--t-h4); font-family: var(--font-display); font-weight: 500; } } /* ================================================================== 17. GENERATED CELESTIAL ART (art-lib.js) Every Atelier page now carries a drawing generated from its own slug. Two presentations, and one deliberate omission: · .art-hero — behind the Atelier index, the four collection heroes and the gemstone guide hero. The drawing lives in the right-hand gutter so it never sits under a paragraph. · .art-band — a quiet strip at the very top of each of the 19 product pages. NOT .art-hero: the product hero already carries three views of the piece's own hand-drawn picture, and a second drawing behind them fought with it for the same space. The band gives each product its own art without touching the product art at all. · product art itself is untouched. It is the piece's own picture and it is better than any generic motif. Two bugs in the shared rules, fixed here in scope rather than in lod.css: (a) .art-hero > svg is inset:0 and can run past the right edge — pinned to the right gutter below, full-width below 860px; (b) .art-band resolves its aspect-ratio by shrinking width unless an explicit width:100% is given. ================================================================== */ .st-page .art-band { width: 100%; } .st-page .st-artband { border-bottom: 0; } /* Art in the right-hand half, where the eye has least to read. Dimmed below the shared .55 because these hairlines DO land under type and the contrast was measured, not guessed: · .st-gr-hero (the gemstone guide) is a single column of copy on the left, so the art clears the text almost entirely — .42 measures 5.03:1. · .st-hero (the Atelier index and the four collections) carries the three-item promise ledger in the right-hand column, directly over the art. Measured worst hairline crossing under that ledger: .42 → 4.35:1 · .26 → 4.48:1 at 1280px · .20 → clears AA at every width tested (320–1600). So the Atelier hero keeps its drawing at .20: a texture rather than a picture. The Atelier's visual weight comes from the nineteen product bands instead, which carry no type at all. The art cannot simply move to the left-hand side: the shared veil is fully opaque for the first 34% of the hero, so anything drawn there is invisible. */ .st-page .st-gr-hero.art-hero > svg.lod-art { left: auto; right: 0; width: 46%; opacity: .42; } .st-page .st-hero.art-hero > svg.lod-art { left: auto; right: 0; width: 46%; opacity: .2; } /* Below 860px the shared veil switches to a top-to-bottom wash and the art runs full width behind the copy, so it drops further again. */ @media (max-width: 860px) { .st-page .st-hero.art-hero > svg.lod-art, .st-page .st-gr-hero.art-hero > svg.lod-art { left: 0; right: 0; width: 100%; opacity: .2; } } @media (prefers-reduced-motion: reduce) { .st-page .art-hero > svg.lod-art { transition: none; } }