/* SW v3 · light site layer (CC 2026-10-27). Basis: handbook rows 1-07, 1-09, 2-04, 2-16, 3-01, 6-01 and the organic-traffic leaders (crystals.com, crystalvaults.com, Energy Muse): light pages, one header with a free-shipping bar, one heading face + one body face, add-to-cart visible without scrolling and a slim sticky bar. Every rule starts with :root.sw-v3.sw-v3 so it outranks the old page styles; nothing applies unless has .sw-v3. */ :root.sw-v3.sw-v3 { --v3-bg: #FAF7F0; --v3-bg2: #F2ECE1; --v3-surface: #FFFFFF; --v3-ink: #25202A; --v3-body: #4A4351; --v3-muted: #6B6372; --v3-line: rgba(37, 32, 42, .12); --v3-gold: #E3BC77; --v3-gold-ink: #17131F; --v3-gold-text: #7A5B12; --v3-brand: #A57F3A; --v3-dark: #17131F; --v3-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --v3-sans: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif; /* old page variables, mapped to light (home-style and shop/pages-style names) */ --bg: var(--v3-bg); --bg2: var(--v3-bg2); --ink: var(--v3-ink); --body: var(--v3-body); --muted: var(--v3-muted); --faint: #8E8796; --gold: var(--v3-gold-text); --line: var(--v3-line); --line2: rgba(37, 32, 42, .06); --color-base: var(--v3-bg); --color-surface: var(--v3-surface); --color-surface-elevated: var(--v3-surface); --color-border: rgba(37, 32, 42, .14); --color-border-hover: rgba(37, 32, 42, .28); --color-text-primary: var(--v3-ink); --color-text-body: var(--v3-body); --color-text-muted: var(--v3-muted); --color-text-disabled: #8E8796; --color-gold: var(--v3-gold-text); --color-gold-hover: #5E450B; --color-gold-muted: #8A6E3C; --color-gold-glow: rgba(227, 188, 119, .18); --color-amethyst: #6B4A9A; color-scheme: light; } /* ---------- base ---------- */ :root.sw-v3.sw-v3, :root.sw-v3.sw-v3 body { background: var(--v3-bg) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 body { font-family: var(--v3-sans); } :root.sw-v3.sw-v3 body::before, :root.sw-v3.sw-v3 body::after { background: none !important; } :root.sw-v3.sw-v3 #skybg, :root.sw-v3.sw-v3 canvas.stars, :root.sw-v3.sw-v3 .stars { display: none !important; } /* ---------- the one header ---------- */ :root.sw-v3.sw-v3 .v3-ann { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 16px; background: var(--v3-dark); color: var(--v3-gold); font: 600 12px/1.3 var(--v3-sans); letter-spacing: .1em; text-transform: uppercase; text-align: center; } :root.sw-v3.sw-v3 .v3-hdr { position: sticky; top: 0; z-index: 60; background: rgba(250, 247, 240, .97); border-bottom: 1px solid var(--v3-line); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); } :root.sw-v3.sw-v3 .v3-hdr-in { max-width: 1200px; margin: 0 auto; height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } :root.sw-v3.sw-v3 .v3-brand { font: 600 21px/1 var(--v3-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--v3-ink) !important; text-decoration: none !important; white-space: nowrap; } :root.sw-v3.sw-v3 .v3-brand b { font-weight: 600; color: var(--v3-brand); } :root.sw-v3.sw-v3 .v3-links { display: none; gap: 26px; } :root.sw-v3.sw-v3 .v3-links a, :root.sw-v3.sw-v3 .v3-menu a { font: 500 13px/1.2 var(--v3-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--v3-ink) !important; text-decoration: none !important; } :root.sw-v3.sw-v3 .v3-links a:hover, :root.sw-v3.sw-v3 .v3-menu a:hover { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .v3-icons { display: flex; align-items: center; gap: 6px; } :root.sw-v3.sw-v3 .v3-bag { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .v3-burger { width: 42px; height: 42px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none !important; border: 0 !important; padding: 0; cursor: pointer; } :root.sw-v3.sw-v3 .v3-burger span { display: block; width: 20px; height: 1.5px; background: var(--v3-ink); } :root.sw-v3.sw-v3 .v3-menu { display: none; padding: 8px 18px 18px; border-top: 1px solid var(--v3-line); background: var(--v3-bg); } :root.sw-v3.sw-v3 .v3-hdr.is-open .v3-menu { display: grid; } :root.sw-v3.sw-v3 .v3-menu a { padding: 14px 0; border-bottom: 1px solid var(--v3-line); font-size: 14px; } :root.sw-v3.sw-v3 .v3-bag:focus-visible, :root.sw-v3.sw-v3 .v3-burger:focus-visible, :root.sw-v3.sw-v3 .v3-links a:focus-visible { outline: 2px solid var(--v3-gold-text); outline-offset: 2px; } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v3-links { display: flex; } :root.sw-v3.sw-v3 .v3-burger, :root.sw-v3.sw-v3 .v3-hdr.is-open .v3-menu { display: none; } } /* old headers and footers that the one header / one footer replace */ :root.sw-v3.sw-v3 #sw-utility-header, :root.sw-v3.sw-v3 nav#nav, :root.sw-v3.sw-v3 #sw-v2-commerce-guard, :root.sw-v3.sw-v3 .sw-v2-commerce-nav, :root.sw-v3.sw-v3 .sw-studio-brandbar, :root.sw-v3.sw-v3 #sw-utility-footer, :root.sw-v3.sw-v3 footer.site-ft, :root.sw-v3.sw-v3 footer.ft, :root.sw-v3.sw-v3 footer.sw-product-footer { display: none !important; } /* ---------- the one footer (added by the v3 script) ---------- */ :root.sw-v3.sw-v3 .v3-ft { background: var(--v3-bg2); color: var(--v3-body); border-top: 1px solid var(--v3-line); padding: 44px 20px 28px; font: 14px/1.7 var(--v3-sans); } :root.sw-v3.sw-v3 .v3-ft-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; } :root.sw-v3.sw-v3 .v3-ft-brand { grid-column: 1 / -1; } :root.sw-v3.sw-v3 .v3-ft .v3-brand { display: inline-block; margin-bottom: 8px; } :root.sw-v3.sw-v3 .v3-ft p { margin: 0; color: var(--v3-body); } :root.sw-v3.sw-v3 .v3-ft h2 { font: 600 12px/1.4 var(--v3-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--v3-ink); margin: 0 0 10px; } :root.sw-v3.sw-v3 .v3-ft nav { display: grid; gap: 6px; } :root.sw-v3.sw-v3 .v3-ft a { color: var(--v3-body) !important; text-decoration: none; } :root.sw-v3.sw-v3 .v3-ft a:hover { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .v3-ft-fine { max-width: 1200px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid var(--v3-line); font-size: 12px; color: var(--v3-muted); } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v3-ft-in { grid-template-columns: 1.6fr 1fr 1fr; } :root.sw-v3.sw-v3 .v3-ft-brand { grid-column: auto; } } /* ---------- shared pieces ---------- */ :root.sw-v3.sw-v3 .v3-ship { margin: 10px 0 0; font: 12.5px/1.5 var(--v3-sans); color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .v3-studio-link { margin: 8px 0 0; font: 13.5px/1.5 var(--v3-sans); } :root.sw-v3.sw-v3 .v3-studio-link a { color: var(--v3-gold-text) !important; text-decoration: underline; text-underline-offset: 3px; } :root.sw-v3.sw-v3 .v3-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; font: 600 14px/1 var(--v3-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; } :root.sw-v3.sw-v3 .v3-btn--gold { background: var(--v3-gold) !important; color: var(--v3-gold-ink) !important; border: 1px solid var(--v3-gold); } :root.sw-v3.sw-v3 .v3-btn--ghost { background: transparent !important; color: var(--v3-ink) !important; border: 1px solid var(--v3-ink); } /* ---------- home (new section; the old one stays hidden) ---------- */ .v3h { display: none; } :root.sw-v3.sw-v3 .v3h { display: block; color: var(--v3-ink); font-family: var(--v3-sans); } :root.sw-v3.sw-v3 [id*="sw_v2_native_home_20260727j"], :root.sw-v3.sw-v3 [data-route="home"] { display: none !important; } :root.sw-v3.sw-v3 .v3h section { padding: 0 20px; } :root.sw-v3.sw-v3 .v3h-in { max-width: 1120px; margin: 0 auto; } :root.sw-v3.sw-v3 .v3h-hero { padding-top: 28px; padding-bottom: 8px; } :root.sw-v3.sw-v3 .v3h-hero h1 { font: 600 clamp(38px, 9vw, 64px)/1.02 var(--v3-serif); letter-spacing: -.005em; margin: 0 0 12px; color: var(--v3-ink); text-wrap: balance; } :root.sw-v3.sw-v3 .v3h-hero p { font-size: 16px; line-height: 1.55; color: var(--v3-body); margin: 0 0 18px; max-width: 46ch; } :root.sw-v3.sw-v3 .v3h-ctas { display: grid; gap: 10px; max-width: 420px; } :root.sw-v3.sw-v3 .v3h-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 30px 0 14px; } :root.sw-v3.sw-v3 .v3h-head h2, :root.sw-v3.sw-v3 .v3h h2 { font: 600 28px/1.15 var(--v3-serif); margin: 0; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v3h-head a { font-size: 13px; color: var(--v3-gold-text); white-space: nowrap; } :root.sw-v3.sw-v3 .v3h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; } :root.sw-v3.sw-v3 .v3h-card { display: grid; gap: 4px; color: var(--v3-ink); text-decoration: none; } :root.sw-v3.sw-v3 .v3h-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v3h-card .n { font: 600 17px/1.15 var(--v3-serif); margin-top: 6px; } :root.sw-v3.sw-v3 .v3h-card .p { font-size: 13.5px; font-weight: 600; color: var(--v3-body); } :root.sw-v3.sw-v3 .v3h-studio { margin-top: 40px; padding-top: 34px !important; padding-bottom: 34px !important; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v3h-studio p { color: var(--v3-body); margin: 8px 0 16px; max-width: 52ch; } :root.sw-v3.sw-v3 .v3h-doors { display: grid; gap: 10px; } :root.sw-v3.sw-v3 .v3h-doors a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 14px; color: var(--v3-ink); text-decoration: none; } :root.sw-v3.sw-v3 .v3h-doors b { display: block; font: 600 20px/1.15 var(--v3-serif); } :root.sw-v3.sw-v3 .v3h-doors span { display: block; font-size: 13px; color: var(--v3-muted); } :root.sw-v3.sw-v3 .v3h-doors i { font-style: normal; color: var(--v3-gold-text); } :root.sw-v3.sw-v3 .v3h-real { margin-top: 40px; } :root.sw-v3.sw-v3 .v3h-real > .v3h-in > p { color: var(--v3-body); margin: 8px 0 16px; } :root.sw-v3.sw-v3 .v3h-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } :root.sw-v3.sw-v3 .v3h-vids figure { margin: 0; display: grid; gap: 6px; } :root.sw-v3.sw-v3 .v3h-vids video, :root.sw-v3.sw-v3 .v3h-vids img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--v3-bg2); display: block; } :root.sw-v3.sw-v3 .v3h-vids figcaption { font-size: 12.5px; color: var(--v3-muted); } :root.sw-v3.sw-v3 .v3h-faq { margin: 40px 0 48px; } :root.sw-v3.sw-v3 .v3h-faq details { border-bottom: 1px solid var(--v3-line); padding: 14px 0; } :root.sw-v3.sw-v3 .v3h-faq summary { cursor: pointer; font: 600 16px/1.4 var(--v3-sans); color: var(--v3-ink); } :root.sw-v3.sw-v3 .v3h-faq details p { color: var(--v3-body); margin: 10px 0 0; line-height: 1.65; } :root.sw-v3.sw-v3 .v3h-faq a { color: var(--v3-gold-text); } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v3h-hero { padding-top: 56px; } :root.sw-v3.sw-v3 .v3h-ctas { grid-template-columns: 1fr 1fr; max-width: 560px; } :root.sw-v3.sw-v3 .v3h-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; } :root.sw-v3.sw-v3 .v3h-doors { grid-template-columns: repeat(3, 1fr); } } /* ---------- product pages ---------- */ :root.sw-v3.sw-v3 body.sw-v2-native-commerce, :root.sw-v3.sw-v3.sw-v2-commerce-html body { background: var(--v3-bg) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .product-detail-wrapper, :root.sw-v3.sw-v3 .product-detail { background: transparent !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .product-detail :is(.product-detail__heading, .product-detail__title, .product-detail__price, .product-detail__sale-price) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__title { font-family: var(--v3-serif) !important; font-weight: 600 !important; font-size: 28px !important; line-height: 1.1 !important; } :root.sw-v3.sw-v3 .product-detail :is(.product-price, .product-price *, .product-price__sale, .product-price__item) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__description { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .product-detail :is(.product-detail__breadcrumb, .product-detail__breadcrumb a) { color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__sell-info { border-top-color: var(--v3-line) !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__sell-info .sell-info__text { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .product-detail img { background: transparent !important; } :root.sw-v3.sw-v3 .product-detail :is(.block-text, .rte, .rte p, .rte li, summary, label, legend) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .product-detail :is(.rte strong, .rte h2, .rte h3) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .product-detail .rte a { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__variant-picker :is(label, span, input + label) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__variant-picker input:checked + label { border-color: var(--v3-ink) !important; } /* info column order: title, use words, price, code line, size, add to cart, delivery line, then the story text */ :root.sw-v3.sw-v3 .product-detail__info > h1 { order: 1; } :root.sw-v3.sw-v3 .product-detail__info > .block-text:first-of-type { order: 2; } :root.sw-v3.sw-v3 .product-detail__info > .product-detail__price { order: 3; } :root.sw-v3.sw-v3 .product-detail__info > theme-variant-radio-picker { order: 4; } :root.sw-v3.sw-v3 .product-detail__info > theme-sticky-position { order: 6; } :root.sw-v3.sw-v3 .product-detail__info > .v3-after-buy { order: 7; } :root.sw-v3.sw-v3 .product-detail__info > * { order: 8; } :root.sw-v3.sw-v3 .product-detail__info > h1, :root.sw-v3.sw-v3 .product-detail__info > .product-detail__price { margin-bottom: 4px; } /* 15% code: one quiet line under the price (text set by the v3 script) */ :root.sw-v3.sw-v3 .sw-cro-offer { display: block !important; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--v3-muted) !important; font: 13px/1.45 var(--v3-sans) !important; } :root.sw-v3.sw-v3 .sw-cro-offer > .sw-cro-offer-price, :root.sw-v3.sw-v3 .sw-cro-offer > small { display: none !important; } :root.sw-v3.sw-v3 .sw-cro-offer .sw-cro-code-row { display: inline !important; padding: 0 !important; border: 0 !important; background: none !important; } :root.sw-v3.sw-v3 .sw-cro-offer .sw-cro-code-row > span, :root.sw-v3.sw-v3 .sw-cro-offer .sw-cro-code-row strong { color: var(--v3-muted) !important; font: inherit !important; } :root.sw-v3.sw-v3 .sw-cro-offer .sw-cro-code-row strong { color: var(--v3-ink) !important; font-weight: 600 !important; } :root.sw-v3.sw-v3 .product-detail .sw-cro-copy, :root.sw-v3.sw-v3 .sw-cro-offer .sw-cro-copy { display: inline !important; min-height: 0 !important; height: auto !important; padding: 0 0 0 6px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--v3-gold-text) !important; font: 600 13px/1.45 var(--v3-sans) !important; text-decoration: underline !important; text-underline-offset: 2px; width: auto !important; } :root.sw-v3.sw-v3 .sw-cro-copy-status { color: var(--v3-gold-text) !important; font-size: 12px; } /* add to cart: solid gold, the main button on the page */ :root.sw-v3.sw-v3 .product-detail :is(button[name="add"], .button--secondary) { background: var(--v3-gold) !important; border: 1px solid var(--v3-gold) !important; color: var(--v3-gold-ink) !important; font-weight: 600 !important; letter-spacing: .04em; min-height: 52px; } :root.sw-v3.sw-v3 .product-detail :is(button[name="add"], .button--secondary) * { color: var(--v3-gold-ink) !important; } /* sticky bar when scrolled: one line, price left, add to cart right; PayPal stays in its place on the page */ :root.sw-v3.sw-v3 theme-sticky-position.is-sticky .product-detail__buy-buttons { background: rgba(255, 255, 255, .98) !important; border-top: 1px solid var(--v3-line) !important; box-shadow: 0 -6px 18px rgba(37, 32, 42, .08) !important; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; display: flex !important; align-items: center !important; gap: 12px !important; } :root.sw-v3.sw-v3 theme-sticky-position.is-sticky .product-detail__buy-buttons::before { content: attr(data-v3-price); flex: 0 0 auto; font: 600 16px/1 var(--v3-sans); color: var(--v3-ink); } :root.sw-v3.sw-v3 theme-sticky-position.is-sticky :is(.shopline-payment-button-wrapper, .pay-button-common-item, [class*="more-payment"], button[name="buy"], .product-form__buy-now) { display: none !important; } :root.sw-v3.sw-v3 theme-sticky-position.is-sticky theme-product-form { flex: 1 1 auto; min-width: 0; } :root.sw-v3.sw-v3 theme-sticky-position.is-sticky .form__buttons { margin: 0 !important; } :root.sw-v3.sw-v3 theme-sticky-position.is-sticky :is(button[name="add"], .button--secondary) { min-height: 46px !important; margin: 0 !important; width: 100% !important; } /* lines added under add to cart (delivery, birth-date Studio link) */ :root.sw-v3.sw-v3 .v3-after-buy { margin: 2px 0 6px; } /* the story section under the product */ :root.sw-v3.sw-v3 #sw-pdp-story, :root.sw-v3.sw-v3 #sw-pdp-story.sw-appeal { background: var(--v3-bg) !important; color: var(--v3-body) !important; } :root.sw-v3.sw-v3 #sw-pdp-story :is(h2, h3, strong, b) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 #sw-pdp-story h2 em { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 #sw-pdp-story :is(p, li, figcaption, small, summary, span, dd, dt) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 #sw-pdp-story a { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-kicker, :root.sw-v3.sw-v3 .sw-appeal-kicker { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-band { background: var(--v3-bg2) !important; } :root.sw-v3.sw-v3 #sw-pdp-story :is(.sw-appeal-picture, .sw-appeal-ritual video) { background: var(--v3-bg2) !important; } :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-tags span { color: var(--v3-ink) !important; border-color: var(--v3-line) !important; background: var(--v3-surface) !important; } :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-step b { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-gift li::before { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 :is(.sw-appeal-intro, .sw-appeal-perks, .sw-appeal-perks details p, .sw-cro-fit, .sw-cro-policy, .sw-cro-original p) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 :is(.sw-cro-fit summary, .sw-cro-fit strong, .sw-cro-policy strong, .sw-cro-original h2) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 :is(.sw-appeal-perks a, .sw-appeal-perks summary, .sw-cro-fit a, .sw-cro-policy a, .sw-cro-policy summary, .sw-cro-original a, .sw-cro-fit summary::after) { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 :is(.sw-cro-fit, .sw-cro-policy, .sw-appeal-perks details) { border-color: var(--v3-line) !important; background: transparent !important; } /* ---------- cart and search ---------- */ :root.sw-v3.sw-v3 body.sw-v2-native-commerce :is([id*="__main-cart"], [id*="__main-search"]), :root.sw-v3.sw-v3 body.sw-v2-native-commerce :is([id*="__main-cart"], [id*="__main-search"]) :is(h1, h2, h3, p, span, a, label, td, th) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 body.sw-v2-native-commerce :is([id*="__main-cart"], [id*="__main-search"]) :is(button, [type="submit"], .cart-empty__button) { background: var(--v3-gold) !important; border-color: var(--v3-gold) !important; color: var(--v3-gold-ink) !important; } :root.sw-v3.sw-v3 body.sw-v2-native-commerce :is([id*="__main-cart"], [id*="__main-search"]) :is(button, [type="submit"], .cart-empty__button) * { color: var(--v3-gold-ink) !important; } /* ---------- collection pages ---------- */ :root.sw-v3.sw-v3 .main-collection-container, :root.sw-v3.sw-v3 .main-collection__list theme-product-card.block-product-card { background: transparent !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .sw-bracelet-head :is(h1) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .sw-bracelet-head :is(p) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .sw-bracelet-head :is(.eyebrow, a) { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .main-collection__list :is(.product-price__sale, .product-price__item) { color: var(--v3-ink) !important; } /* ---------- content pages (about, FAQ, shipping, guides) ---------- */ :root.sw-v3.sw-v3.sw-v2-native-active body, :root.sw-v3.sw-v3 #sw-v2-native-shell { background: var(--v3-bg) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 #sw-record-public-entry h1 { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 #sw-record-public-entry p { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 #sw-record-public-entry :is(.record-brand, nav a) { color: var(--v3-gold-text) !important; } /* ---------- Shop page ---------- */ :root.sw-v3.sw-v3 :is(.nav.scrolled, .nav__mobile, .bottle-label, .card__el) { background: var(--v3-surface) !important; } /* ---------- Studio page shell ---------- */ :root.sw-v3.sw-v3 body:has(.sw-studio-brandbar) .v3-ann { display: none; } :root.sw-v3.sw-v3 .sn h1, :root.sw-v3.sw-v3 :is(.sn-body h2, .sn-body h3, .sn-body strong, .sn-body blockquote, .sn-feature h2, .sn-grid h2) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 :is(.sn-deck, .sn-meta, .sn-body, .sn figcaption, .sn-card p, .sn-source, .sn-entry) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 :is(.sn-crumb a, .sn a, .sn-kicker, .sn-recipe summary, .sn-card small) { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .sn-button { color: var(--v3-gold-ink) !important; background: var(--v3-gold) !important; border-color: var(--v3-gold) !important; } /* ---------- 404 ---------- */ :root.sw-v3.sw-v3.sw-v2-notfound-html body, :root.sw-v3.sw-v3 .sw-v2-404 { background: var(--v3-bg) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .sw-v2-404 :is(h1) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .sw-v2-404 :is(.sw-v2-404__kicker, .sw-v2-404__brand) { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .sw-v2-404__btn { color: var(--v3-gold-ink) !important; background: var(--v3-gold) !important; border-color: var(--v3-gold) !important; } @media (prefers-reduced-motion: reduce) { :root.sw-v3.sw-v3 * { scroll-behavior: auto !important; } } /* ---------- Shop page: two columns on phones, one Filter button ---------- */ :root.sw-v3.sw-v3 #grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 12px !important; } @media (min-width: 900px) { :root.sw-v3.sw-v3 #grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 34px 22px !important; } } :root.sw-v3.sw-v3 #grid > a.card { min-width: 0; background: transparent !important; border-color: var(--v3-line) !important; } :root.sw-v3.sw-v3 .v3-filter { margin: 12px 0 0; border: 1px solid var(--v3-line); border-radius: 12px; padding: 0 14px; background: var(--v3-surface); } :root.sw-v3.sw-v3 .v3-filter > summary { cursor: pointer; padding: 12px 0; font: 600 14px/1.3 var(--v3-sans); color: var(--v3-ink); } :root.sw-v3.sw-v3 #sw-shop-sortbar select { background: var(--v3-surface) !important; color: var(--v3-ink) !important; } /* ---------- Studio: the tool fills the screen under the one header ---------- */ :root.sw-v3.sw-v3 #sw-bracelet-studio-frame { height: calc(100dvh - 59px) !important; min-height: 560px !important; } :root.sw-v3.sw-v3 #sw-bracelet-studio-host { min-height: calc(100dvh - 59px) !important; } /* ===== b (10-27 second pass, from the r2 preview check) ===== */ /* home: the old home hides every body child except its own section (html.sw-v2-native-home-active body > *); let the v3 pieces through */ :root.sw-v3.sw-v3.sw-v2-native-home-active body > :is(.v3-hdr, .sw-v3-home-section, .v3-ft) { display: block !important; } :root.sw-v3.sw-v3.sw-v2-native-home-active body > .v3-ann { display: flex !important; } /* content pages: the dark sky layers */ :root.sw-v3.sw-v3 :is(.sw-skybg, canvas#space) { display: none !important; } /* product page: the section's own custom CSS is keyed to its section id; :not(#v3-x) gives these rules id weight so they win */ :root.sw-v3.sw-v3 [id*="__main-product-info"]:not(#v3-x) .product-detail { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 [id*="__main-product-info"]:not(#v3-x) :is(.product-detail__heading, .product-detail__title, .product-detail__price, .product-price, .product-price *, .product-price__sale, .product-price__item) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 [id*="__main-product-info"]:not(#v3-x) :is(.product-detail__sell-info .sell-info__text, .product-detail__description) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 [id*="__main-product-info"]:not(#v3-x) :is(.product-detail__breadcrumb, .product-detail__breadcrumb a) { color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 [id*="__main-product-info"]:not(#v3-x) .product-detail :is(button[name="add"], .button--secondary) { background: var(--v3-gold) !important; border: 1px solid var(--v3-gold) !important; color: var(--v3-gold-ink) !important; } :root.sw-v3.sw-v3 .pay-button-more-options { color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .product-detail__info > .block-text:first-of-type .sw-appeal-kicker { margin: 2px 0 10px !important; } /* product page on phones: swipe the main photo (the next one peeks in), no thumbnail row, so price and add to cart sit higher */ @media (max-width: 749px) { :root.sw-v3.sw-v3 .product-detail .media-gallery__thumbnails { display: none !important; } } /* phones: until the page's own add-to-cart button is reached, a slim bar keeps it one tap away (handbook 2-04 / 2-16) */ :root.sw-v3.sw-v3 .v3-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--v3-line); box-shadow: 0 -6px 18px rgba(37, 32, 42, .08); font-family: var(--v3-sans); } :root.sw-v3.sw-v3 .v3-buybar[hidden] { display: none; } :root.sw-v3.sw-v3 .v3-buybar-price { flex: 0 0 auto; font: 600 16px/1 var(--v3-sans); color: var(--v3-ink); } :root.sw-v3.sw-v3 .v3-buybar-btn { flex: 1 1 auto; min-height: 46px; border-radius: 999px; border: 1px solid var(--v3-gold); background: var(--v3-gold); color: var(--v3-gold-ink); font: 600 15px/1 var(--v3-sans); letter-spacing: .04em; cursor: pointer; } :root.sw-v3.sw-v3 .v3-buybar-btn:focus-visible { outline: 2px solid var(--v3-gold-text); outline-offset: 2px; } @media (min-width: 750px) { :root.sw-v3.sw-v3 .v3-buybar { display: none !important; } } /* Studio on phones: the tool is a fixed full-screen layer; start it under the one header instead of the old 48px dark bar */ @media (max-width: 560px) { :root.sw-v3.sw-v3 .sw-gads-landing { inset: 59px 0 0 0 !important; height: auto !important; } :root.sw-v3.sw-v3 .sw-gads-landing .sw-gads-studio { height: calc(100% - 48px) !important; } :root.sw-v3.sw-v3 .sw-gads-landing #sw-bracelet-studio-host { height: 100% !important; min-height: 0 !important; } :root.sw-v3.sw-v3 .sw-gads-landing #sw-bracelet-studio-frame { height: 100% !important; min-height: 0 !important; } :root.sw-v3.sw-v3 .sw-gads-landing .sw-example[open] { top: 59px !important; height: calc(100% - 59px) !important; } :root.sw-v3.sw-v3 body:has(.sw-gads-landing) .v3-ft { display: none !important; } } :root.sw-v3.sw-v3 body:has(.sw-gads-landing) .v3-hdr { z-index: 2147483001; } /* 404: its own nav and footer give way to the one header and footer */ :root.sw-v3.sw-v3 .sw-v2-404 :is(.sw-v2-404__nav, .sw-v2-404__foot) { display: none !important; } :root.sw-v3.sw-v3 .sw-v2-404 .sw-v2-404__copy { color: var(--v3-body) !important; } /* collection pages: no cover photos are set, so the cover becomes a short light title band instead of a grey block */ :root.sw-v3.sw-v3 [id*="__main-collection-cover"] .block-main-collection__banner { height: auto !important; min-height: 0 !important; background: var(--v3-bg2) !important; } :root.sw-v3.sw-v3 [id*="__main-collection-cover"] .block-main-collection__banner::before, :root.sw-v3.sw-v3 [id*="__main-collection-cover"] .block-main-collection__banner::after, :root.sw-v3.sw-v3 [id*="__main-collection-cover"] .block-main-collection__banner-mask { display: none !important; } :root.sw-v3.sw-v3 [id*="__main-collection-cover"] .block-main-collection__banner-inner { height: auto !important; min-height: 0 !important; padding: 26px 20px 22px !important; } :root.sw-v3.sw-v3 [id*="__main-collection-cover"] :is(.block-main-collection__banner-inner, .block-main-collection__banner-inner *) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 [id*="__main-collection-cover"] h1 { font-family: var(--v3-serif) !important; font-weight: 600 !important; } /* ===== c (10-27 third pass, from the r3 preview check) ===== */ /* the old home styles bare nav and footer elements (its nav rule pins every nav to the top of the screen); undo that inside the v3 pieces */ :root.sw-v3.sw-v3 :is(.v3-hdr, .v3-ft) nav { position: static !important; top: auto !important; left: auto !important; right: auto !important; z-index: auto !important; transition: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :root.sw-v3.sw-v3 .v3-links { padding: 0 !important; justify-content: flex-start !important; align-items: center !important; } :root.sw-v3.sw-v3 .v3-ft nav { display: grid !important; padding: 0 !important; justify-content: initial !important; align-items: initial !important; background: none !important; } :root.sw-v3.sw-v3 footer.v3-ft { display: block !important; position: static !important; z-index: auto !important; } /* home product cards: square photos (the image component writes width/height attributes, which beat aspect-ratio) */ :root.sw-v3.sw-v3 .v3h-card img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; } /* content pages: the old see-through nav floated over the page, so every page starts with 90-140px of blank top padding; the one header takes its own space now, so take most of that padding back (not on the Studio, whose tool is a fixed layer) */ :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app { margin-top: -64px; } :root.sw-v3.sw-v3 .v3-hdr { z-index: 999; } /* Studio notes line */ :root.sw-v3.sw-v3 .sn-entry strong { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .sn-entry a { color: var(--v3-gold-text) !important; } /* collection filter and sort panels: the theme paints them with the old dark page colour */ :root.sw-v3.sw-v3 :is(.facets-filtering__content, .facets-filtering__modal-content, .facets-sorting__content, .price-range-input .field) { background: var(--v3-surface) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .price-range-dot { background: var(--v3-ink) !important; } /* ===== d (10-27 fourth pass, from the r4 checks and the add-to-cart test) ===== */ /* B1-3 #4: the two caption-card films on Amethyst and Yellow Tiger Eye (poster reads "Sample photos · AI-assisted styling"). The store API cannot remove product videos, so they leave the gallery here; deleting them in the admin makes this rule moot. */ :root.sw-v3.sw-v3 :is(li, button, div)[data-media-id="7726728226228152141"], :root.sw-v3.sw-v3 :is(li, button, div)[data-media-id="7726728252920702800"] { display: none !important; } /* theme-native parts (cart drawer, cart, collection filters): gold buttons with dark text and quiet lines instead of the purple scheme */ :root.sw-v3.sw-v3 [class*="color-scheme-"], :root.sw-v3.sw-v3 theme-cart-drawer { --color-button-background: 227, 188, 119; --color-button-text: 23, 19, 31; --color-entry-line: 226, 218, 203; } :root.sw-v3.sw-v3 theme-cart-drawer .button--fill { background: var(--v3-gold) !important; border-color: var(--v3-gold) !important; color: var(--v3-gold-ink) !important; font-weight: 600 !important; } :root.sw-v3.sw-v3 theme-cart-drawer :is(.body1, .body2, .body3, .body4, .body5, .body6, .title1, .title2, .title3, .title4, .title5, .title6, .button) { font-family: var(--v3-sans) !important; } :root.sw-v3.sw-v3 theme-cart-drawer .cart-item__title { font-family: var(--v3-serif) !important; font-size: 19px !important; color: var(--v3-ink) !important; } /* collection filters: labels and reset links readable on the light page */ :root.sw-v3.sw-v3 :is(.facets-filtering, .facets-filtering__modal-content, .facets-filtering__details) :is(summary, summary *, .body2) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 :is(.facets-filtering__reset, .facets-filtering a.button--secondary, .facets-filtering__modal-content a.button--secondary) { color: var(--v3-gold-text) !important; } /* long-form pages (stone guides, gift guides, Studio notes, journal posts): their own styles hard-code light text for the old night background. Inside their main/article, headings go ink, reading text body grey, plain links and small labels dark gold. The v3 script then repairs anything still under 3:1 (dark panels get light text back). Not on the Studio (its tool is a main too). */ :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app :is(main, article) :is(h1, h2, h3, h4, h5, h6, th, caption, dt, summary) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app :is(main, article) :is(p, li, td, dd, figcaption, small, time, blockquote, label, span:not([class])) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app :is(main, article) :is(p, li, td, dd) :is(strong, b) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app :is(main, article) a:not([class]) { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app :is(main, article) :is([class*="eyebrow"], [class*="kicker"], [class*="crumb"], [class*="-label"], [class*="action"], .section-label) { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 body:not(:has(.sw-gads-landing)) #sw-v2-app :is(main, article) [class*="crumb"] * { color: inherit !important; } /* journal list filter chips */ :root.sw-v3.sw-v3 .jrnl-cat { color: var(--v3-body) !important; border-color: var(--v3-line) !important; background: transparent !important; } :root.sw-v3.sw-v3 .jrnl-cat.on { color: var(--v3-gold-ink) !important; background: var(--v3-gold) !important; border-color: var(--v3-gold) !important; } /* ===== e: v4 home (CC 2026-10-27, after Owner: "现在确实是简略，把它弄的像个样子") ===== Hero image from our own footage, a why-us row, shop by meaning, ready to wear, the Studio with a real result, our videos, cleansing + what's in the box, guides from the journal, questions, a closing call. v3 home stays hidden. */ :root.sw-v3.sw-v3 .v3h { display: none !important; } :root.sw-v3.sw-v3 .v4h { display: block; color: var(--v3-ink); font-family: var(--v3-sans); } :root.sw-v3.sw-v3 .v4h section { padding: 0 20px; } :root.sw-v3.sw-v3 .v4h h2 { font: 600 clamp(28px, 7.4vw, 40px)/1.1 var(--v3-serif); margin: 0; color: var(--v3-ink); text-wrap: balance; } :root.sw-v3.sw-v3 .v4h h3 { font: 600 13px/1.3 var(--v3-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--v3-gold-text); margin: 20px 0 8px; } :root.sw-v3.sw-v3 .v4h p { color: var(--v3-body); line-height: 1.6; } :root.sw-v3.sw-v3 .v4h-eyebrow { font: 600 11.5px/1.3 var(--v3-sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-gold-text) !important; margin: 0 0 10px !important; } /* hero: picture on top on phones, copy on the page colour under it; side by side from 900px */ :root.sw-v3.sw-v3 .v4h .v4h-hero { padding: 0; } :root.sw-v3.sw-v3 .v4h-hero-media img { display: block; width: 100%; height: min(340px, 46svh); object-fit: cover; object-position: 50% 45%; background: #2a211b; } :root.sw-v3.sw-v3 .v4h-hero-copy { padding: 18px 20px 6px; } :root.sw-v3.sw-v3 .v4h-hero h1 { font: 600 clamp(38px, 10.4vw, 72px)/1.02 var(--v3-serif); letter-spacing: -.005em; margin: 0 0 14px; color: var(--v3-ink); text-wrap: balance; } :root.sw-v3.sw-v3 .v4h-lede { display: none; font-size: 16.5px; margin: 0 0 22px; max-width: 44ch; } :root.sw-v3.sw-v3 .v4h-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; } :root.sw-v3.sw-v3 .v4h-ctas .v3-btn { min-height: 48px; padding-left: 10px; padding-right: 10px; font-size: 13px; letter-spacing: .08em; } :root.sw-v3.sw-v3 .v4h-why { font-size: 12.5px !important; line-height: 1.45 !important; color: var(--v3-muted) !important; margin: 12px 0 0 !important; } /* why-us row */ :root.sw-v3.sw-v3 .v4h .v4h-values { margin-top: 26px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); background: var(--v3-surface); } :root.sw-v3.sw-v3 .v4h-values ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } :root.sw-v3.sw-v3 .v4h-values li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: var(--v3-body); } :root.sw-v3.sw-v3 .v4h-values svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--v3-brand); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } :root.sw-v3.sw-v3 .v4h-values b { display: block; font-weight: 600; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v4h-values .v3-ship { margin: 16px 0 0; font-size: 12.5px; color: var(--v3-muted); } /* shop by meaning */ :root.sw-v3.sw-v3 .v4h-meanings { margin-top: 44px; } :root.sw-v3.sw-v3 .v4h-meanings .v3h-head { margin-top: 0; } :root.sw-v3.sw-v3 .v4h-sub { margin: -6px 0 16px !important; font-size: 14.5px; max-width: 52ch; } :root.sw-v3.sw-v3 .v4h-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } :root.sw-v3.sw-v3 .v4h-tile { display: grid; gap: 3px; text-decoration: none; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v4h-tile img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; border-radius: 12px; display: block; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v4h-tile .t { font: 600 18px/1.15 var(--v3-serif); margin-top: 8px; } :root.sw-v3.sw-v3 .v4h-tile .s { font-size: 12.5px; line-height: 1.35; color: var(--v3-muted); } /* ready to wear keeps the v3 grid */ :root.sw-v3.sw-v3 .v4h-edit { margin-top: 26px; } /* studio: the real result ring next to the three ways in */ :root.sw-v3.sw-v3 .v4h .v4h-studio { margin-top: 48px; padding-top: 36px; padding-bottom: 36px; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v4h-split { display: grid; gap: 22px; } :root.sw-v3.sw-v3 .v4h-ring { margin: 0; background: #FBFAF6; border: 1px solid var(--v3-line); border-radius: 18px; padding: 14px; } :root.sw-v3.sw-v3 .v4h-ring img { display: block; width: 100%; height: auto; border-radius: 10px; } :root.sw-v3.sw-v3 .v4h-ring figcaption { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--v3-muted); } :root.sw-v3.sw-v3 .v4h-studio-copy > p:not(.v4h-eyebrow) { margin: 10px 0 16px; } :root.sw-v3.sw-v3 .v4h-steps { list-style: none; counter-reset: v4s; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; } :root.sw-v3.sw-v3 .v4h-steps li { counter-increment: v4s; position: relative; padding-left: 34px; font-size: 14px; line-height: 1.55; color: var(--v3-body); } :root.sw-v3.sw-v3 .v4h-steps li::before { content: counter(v4s, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 600 12px/1.6 var(--v3-sans); color: var(--v3-gold-text); letter-spacing: .06em; } :root.sw-v3.sw-v3 .v4h-steps b { color: var(--v3-ink); } /* our videos, a little larger */ :root.sw-v3.sw-v3 .v4h .v4h-real { margin-top: 48px; } :root.sw-v3.sw-v3 .v4h-real h2 + p { margin: 10px 0 16px; } /* cleansing + what's in the box */ :root.sw-v3.sw-v3 .v4h .v4h-care { margin-top: 52px; } :root.sw-v3.sw-v3 .v4h-care-imgs { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; align-items: end; } :root.sw-v3.sw-v3 .v4h-care-imgs img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v4h-care-imgs img + img { margin-bottom: 26px; } :root.sw-v3.sw-v3 .v4h-care-copy > p:not(.v4h-eyebrow) { margin: 12px 0 0; } :root.sw-v3.sw-v3 .v4h-box { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } :root.sw-v3.sw-v3 .v4h-box li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--v3-body); } :root.sw-v3.sw-v3 .v4h-box li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--v3-gold); } :root.sw-v3.sw-v3 .v4h-link { display: inline-block; margin-top: 16px; color: var(--v3-gold-text) !important; font-size: 14px; font-weight: 600; text-decoration: none; } /* guides from the journal */ :root.sw-v3.sw-v3 .v4h .v4h-learn { margin-top: 52px; } :root.sw-v3.sw-v3 .v4h-learn .v3h-head { margin-top: 0; } :root.sw-v3.sw-v3 .v4h-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; } :root.sw-v3.sw-v3 .v4h-cards::-webkit-scrollbar { display: none; } :root.sw-v3.sw-v3 .v4h-cards a { scroll-snap-align: start; display: grid; gap: 4px; text-decoration: none; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v4h-cards img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v4h-cards .k { margin-top: 8px; font: 600 11px/1.3 var(--v3-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--v3-gold-text); } :root.sw-v3.sw-v3 .v4h-cards .t { font: 600 18px/1.2 var(--v3-serif); } :root.sw-v3.sw-v3 .v4h-more { margin: 16px 0 0 !important; font-size: 13.5px; } :root.sw-v3.sw-v3 .v4h-more a { color: var(--v3-gold-text) !important; } /* questions + closing call */ :root.sw-v3.sw-v3 .v4h .v4h-faq { margin: 52px 0 0; } :root.sw-v3.sw-v3 .v4h-faq h2 { margin-bottom: 6px; } :root.sw-v3.sw-v3 .v4h .v4h-end { margin-top: 52px; padding-top: 44px; padding-bottom: 48px; background: var(--v3-bg2); text-align: center; } :root.sw-v3.sw-v3 .v4h-end p { margin: 10px auto 20px; } :root.sw-v3.sw-v3 .v4h-end .v4h-ctas { margin: 0 auto; } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v4h .v4h-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; max-width: 1200px; margin: 0 auto; padding: 40px 40px 8px; } :root.sw-v3.sw-v3 .v4h-hero-media { order: 2; } :root.sw-v3.sw-v3 .v4h-hero-media img { height: auto; max-height: 640px; aspect-ratio: 4 / 5; border-radius: 18px; } :root.sw-v3.sw-v3 .v4h-hero-copy { padding: 0; } :root.sw-v3.sw-v3 .v4h-lede { display: block; } :root.sw-v3.sw-v3 .v4h-ctas .v3-btn { font-size: 13.5px; } :root.sw-v3.sw-v3 .v4h section:not(.v4h-hero) { padding-left: 40px; padding-right: 40px; } :root.sw-v3.sw-v3 .v4h-values ul { grid-template-columns: repeat(4, 1fr); } :root.sw-v3.sw-v3 .v4h-tiles { grid-template-columns: repeat(4, 1fr); gap: 20px; } :root.sw-v3.sw-v3 .v4h-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } :root.sw-v3.sw-v3 .v4h-split--rev .v4h-care-imgs { order: 2; } :root.sw-v3.sw-v3 .v4h-cards { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 20px; } } /* f: buttons on one line, end buttons stacked on phones, studio ways stacked beside the ring, our videos sized per screen */ :root.sw-v3.sw-v3 .v4h-ctas .v3-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; } @media (max-width: 520px) { :root.sw-v3.sw-v3 .v4h-end .v4h-ctas { grid-template-columns: 1fr; max-width: 340px; } } :root.sw-v3.sw-v3 .v4h-real .v3h-vids { display: grid; grid-auto-flow: column; grid-auto-columns: 58%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; } :root.sw-v3.sw-v3 .v4h-real .v3h-vids::-webkit-scrollbar { display: none; } :root.sw-v3.sw-v3 .v4h-real .v3h-vids figure { scroll-snap-align: start; } :root.sw-v3.sw-v3 .v4h-real .v3h-vids figcaption { font-size: 13px; } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v4h-studio .v3h-doors { grid-template-columns: 1fr; } :root.sw-v3.sw-v3 .v4h-real .v3h-vids { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 20px; max-width: 980px; } :root.sw-v3.sw-v3 .v4h-real .v3h-vids video, :root.sw-v3.sw-v3 .v4h-real .v3h-vids img { aspect-ratio: 4 / 5; } } /* g: header fully opaque, so page text no longer ghosts through it when scrolled */ :root.sw-v3.sw-v3 .v3-hdr { background: var(--v3-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } /* i: Shop page on phones gets to the bracelets sooner: smaller title, one-line offer, meanings in one swipeable row. #sw-v2-app is pulled up 64px under the header, so the title keeps an 80px top pad. */ @media (max-width: 749px) { :root.sw-v3.sw-v3 #sw-v2-app .shop-hero { padding-top: 80px !important; padding-bottom: 8px !important; } :root.sw-v3.sw-v3 #sw-v2-app .shop-hero .section-label { margin-bottom: 4px !important; } :root.sw-v3.sw-v3 #sw-v2-app .shop-hero h1 { font-size: 31px !important; line-height: 1.12 !important; margin: 0 !important; } :root.sw-v3.sw-v3 #sw-v2-app .shop-hero h1 br { display: none; } :root.sw-v3.sw-v3 #sw-v2-app .shop-hero > p:not(.section-label) { display: none; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer { margin-bottom: 8px !important; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer .ready-offer-inner { padding: 8px 12px !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 6px; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer h2 { font: 600 14px/1.45 var(--v3-sans) !important; margin: 0 !important; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer p { font-size: 13.5px !important; line-height: 1.45 !important; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer code { font-size: 13.5px !important; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer small { flex-basis: 100%; font-size: 11.5px !important; margin-top: 1px !important; } :root.sw-v3.sw-v3 #sw-v2-app #meaningRow { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; padding-bottom: 2px; } :root.sw-v3.sw-v3 #sw-v2-app #meaningRow::-webkit-scrollbar { display: none; } :root.sw-v3.sw-v3 #sw-v2-app #meaningRow .chip { flex: 0 0 auto; min-height: 40px; } :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-filters .meaning-note { margin-top: 6px !important; font-size: 12.5px !important; } :root.sw-v3.sw-v3 #sw-v2-app .filter-divider { margin-top: 10px !important; } :root.sw-v3.sw-v3 #sw-v2-app .shop-count { padding-top: 10px !important; } } /* j: count and sort share one line on phones; the meaning note shows from tablet width up */ @media (max-width: 749px) { :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-sortbar { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; } :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-sortbar .shop-count { margin: 0 !important; padding: 10px 0 !important; } :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-sortbar .sort-control { flex: 0 0 auto; } :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-filters .meaning-note { display: none; } } /* k: home "why natural stone" block; "more for " under each bracelet; Shop count fits one line */ :root.sw-v3.sw-v3 .v4h .v4h-story { display: block; margin-top: 52px; } :root.sw-v3.sw-v3 .v4h-story-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } :root.sw-v3.sw-v3 .v4h-story-imgs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v4h-story-copy > p:not(.v4h-eyebrow) { margin: 12px 0 0; } :root.sw-v3.sw-v3 .v3-more { background: var(--v3-bg); padding: 40px 20px 44px; border-top: 1px solid var(--v3-line); color: var(--v3-ink); font-family: var(--v3-sans); } :root.sw-v3.sw-v3 .v3-more-in { max-width: 1120px; margin: 0 auto; } :root.sw-v3.sw-v3 .v3-more h2 { font: 600 clamp(26px, 6.6vw, 34px)/1.15 var(--v3-serif); margin: 0 0 16px; color: var(--v3-ink); text-transform: none; letter-spacing: 0; } :root.sw-v3.sw-v3 .v3-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; } :root.sw-v3.sw-v3 .v3-more-grid a { display: grid; gap: 4px; text-decoration: none; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v3-more-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v3-more-grid .n { font: 600 16.5px/1.2 var(--v3-serif); margin-top: 6px; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v3-more-grid .p { font-size: 13.5px; font-weight: 600; color: var(--v3-body); } :root.sw-v3.sw-v3 .v3-more-all { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--v3-gold-text) !important; text-decoration: none; } @media (max-width: 749px) { :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-sortbar select { max-width: 150px; min-width: 0; } :root.sw-v3.sw-v3 #sw-v2-app #sw-shop-sortbar .shop-count { white-space: nowrap; } :root.sw-v3.sw-v3 .v3-more { padding-bottom: 96px; } /* room above the sticky add-to-cart bar */ } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v4h-story-imgs { grid-template-columns: 1fr 1fr; } :root.sw-v3.sw-v3 .v4h-story-imgs img:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; } :root.sw-v3.sw-v3 .v3-more-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } } /* l: the landscape ritual video on six product pages sat in a portrait box (608:1080) with ~200px blank above and below */ :root.sw-v3.sw-v3 .sw-appeal-ritual video[width="960"][height="540"] { aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; } /* m: Christmas cutoff line under the delivery line */ :root.sw-v3.sw-v3 .v3-xmas { margin: 6px 0 0 !important; font: 600 13px/1.45 var(--v3-sans) !important; color: var(--v3-gold-text) !important; } /* ===== n: fixes from a fresh-eyes shopper read (CC 2026-10-27) ===== */ /* one fixed size: a plain spec line under Add to cart instead of a lone pill above it, so the page's own button reaches the first phone screen and the floating bar no longer sits on top of the size (crystals.com shows its floating bar only after the buy button; handbook 2-04 keeps Add to cart on the first screen) */ :root.sw-v3.sw-v3 .product-detail__info > theme-variant-radio-picker.v3-one { order: 7; margin: 12px 0 0 !important; padding: 0 !important; } :root.sw-v3.sw-v3 theme-variant-radio-picker.v3-one :is(fieldset, .product-detail__row, .variant-picker__options, .variant-picker__option) { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; } :root.sw-v3.sw-v3 theme-variant-radio-picker.v3-one .variant-picker__group-head { display: none !important; } :root.sw-v3.sw-v3 theme-variant-radio-picker.v3-one input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } :root.sw-v3.sw-v3 theme-variant-radio-picker.v3-one .variant-picker__button { display: inline !important; padding: 0 !important; min-height: 0 !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font: 400 13px/1.5 var(--v3-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--v3-body) !important; pointer-events: none; } :root.sw-v3.sw-v3 theme-variant-radio-picker.v3-one .variant-picker__button::before { content: "Size: " !important; position: static !important; display: inline !important; border: 0 !important; background: none !important; width: auto !important; height: auto !important; color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 theme-variant-radio-picker.v3-one .variant-picker__button::after { content: none !important; display: none !important; } /* Size & fit: the same closed row as Delivery & returns, placed beside it (its + was a leftover pale gold) */ :root.sw-v3.sw-v3 .product-detail__info > :has(> .sw-cro-fit) { order: 9; margin-top: 0 !important; } :root.sw-v3.sw-v3 .sw-cro-fit { margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--v3-line) !important; border-bottom: 1px solid var(--v3-line) !important; } :root.sw-v3.sw-v3 .sw-cro-fit summary { display: flex !important; justify-content: space-between; align-items: center; width: 100% !important; padding: 12px 0 !important; font: 400 13px/1.4 var(--v3-sans) !important; color: var(--v3-body) !important; cursor: pointer; list-style: none; } :root.sw-v3.sw-v3 .sw-cro-fit summary::-webkit-details-marker { display: none; } :root.sw-v3.sw-v3 .sw-cro-fit summary::after { content: "+" !important; color: var(--v3-body) !important; font-size: 15px !important; margin-left: 12px; } :root.sw-v3.sw-v3 .sw-cro-fit[open] summary::after { content: "−" !important; } :root.sw-v3.sw-v3 .sw-cro-fit p { margin: 0 0 10px !important; font-size: 13px !important; line-height: 1.55 !important; } /* Materials & care under the story: show it is a row that opens */ :root.sw-v3.sw-v3 #sw-pdp-story details.sw-appeal-care { margin-top: 0 !important; border-top: 1px solid var(--v3-line) !important; border-bottom: 1px solid var(--v3-line) !important; } :root.sw-v3.sw-v3 #sw-pdp-story details.sw-appeal-care > summary { display: flex !important; justify-content: space-between; align-items: center; padding: 14px 0 !important; cursor: pointer; list-style: none; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 #sw-pdp-story details.sw-appeal-care > summary::-webkit-details-marker { display: none; } :root.sw-v3.sw-v3 #sw-pdp-story details.sw-appeal-care > summary::after { content: "+" !important; color: var(--v3-body) !important; font: 400 18px/1 var(--v3-sans) !important; margin-left: 12px; } :root.sw-v3.sw-v3 #sw-pdp-story details.sw-appeal-care[open] > summary::after { content: "−" !important; } /* the story's button: dark text on gold like Add to cart (gold on gold was 3.8:1) */ :root.sw-v3.sw-v3 #sw-pdp-story a.sw-appeal-cta { color: var(--v3-gold-ink) !important; background: var(--v3-gold) !important; } /* the story's three use words: small rounded tags, not white boxes */ :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-tags span { display: inline-block; padding: 5px 12px !important; border: 1px solid var(--v3-line) !important; border-radius: 999px !important; background: transparent !important; font: 500 12px/1.3 var(--v3-sans) !important; color: var(--v3-body) !important; text-transform: capitalize; } /* phone carousels on the home page: first card starts at the page margin, not the screen edge */ :root.sw-v3.sw-v3 .v4h-cards, :root.sw-v3.sw-v3 .v4h-real .v3h-vids { scroll-padding-inline: 20px; } /* ===== o (CC 2026-10-27) ===== */ /* product pages: the floating buy bar (67px) covers the end of the page, so the footer's last line gets room under it */ :root.sw-v3.sw-v3 body:has(theme-sticky-position) .v3-ft { padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important; } /* ===== p: holiday gift block on the home page (CC 2026-10-27). crystals.com runs "THE CRYSTAL GIFT GUIDE" by price, Crystal Vaults a "HOLIDAY GIFT GUIDE" button; ours links the Shop's own price filters and leaves after Nov 23 (script) ===== */ :root.sw-v3.sw-v3 .v4h .v4h-gifts { display: block; margin-top: 52px; } :root.sw-v3.sw-v3 .v4h-gifts-in { background: var(--v3-bg2); border: 1px solid var(--v3-line); border-radius: 18px; padding: 26px 18px 22px; } :root.sw-v3.sw-v3 .v4h-gifts h2 { font: 500 30px/1.15 var(--v3-serif) !important; color: var(--v3-ink) !important; margin: 0 0 12px !important; letter-spacing: 0; } :root.sw-v3.sw-v3 .v4h-gifts .v4h-sub { margin: 0 0 18px !important; color: var(--v3-body); } :root.sw-v3.sw-v3 .v4h-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; } :root.sw-v3.sw-v3 .v4h-tiers a { display: grid; align-content: start; gap: 6px; padding: 14px 12px; border: 1px solid var(--v3-line); border-radius: 14px; background: var(--v3-surface); text-decoration: none !important; } :root.sw-v3.sw-v3 .v4h-tiers a:hover { border-color: var(--v3-gold); } :root.sw-v3.sw-v3 .v4h-tiers b { font: 600 15px/1.25 var(--v3-sans); color: var(--v3-ink); white-space: nowrap; } :root.sw-v3.sw-v3 .v4h-tiers span { font: 400 12.5px/1.45 var(--v3-sans); color: var(--v3-muted); } :root.sw-v3.sw-v3 .v4h-gift-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 !important; font: 600 14px/1.45 var(--v3-sans); } :root.sw-v3.sw-v3 .v4h-gift-more a { color: var(--v3-gold-text) !important; text-decoration: none; } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v4h-gifts-in { padding: 36px 40px 32px; } :root.sw-v3.sw-v3 .v4h-gifts h2 { font-size: 38px !important; } :root.sw-v3.sw-v3 .v4h-tiers { gap: 16px; } :root.sw-v3.sw-v3 .v4h-tiers a { padding: 18px 18px; } :root.sw-v3.sw-v3 .v4h-tiers b { font-size: 17px; } } /* q (10-27 15:4xZ): prices on the home first screen. Handbook 1-11: a fresh visitor must not be unsure about price, delivery or returns. Ready-made from $54 = lowest of the 25 store prices; Studio from $52 = the live Studio's own lowest single-stone quote (studio_from_price.py, cost-policy-20260929-v2, same $52 at 13 and 15.5 cm). */ :root.sw-v3.sw-v3 .v4h-price { font-size: 13px !important; line-height: 1.45 !important; color: var(--v3-ink) !important; font-weight: 500 !important; margin: 12px 0 0 !important; } :root.sw-v3.sw-v3 .v4h-price + .v4h-why { margin-top: 3px !important; } /* r: product page, above Add to cart: the price after the code on one line, then arrival and free returns; the "not combinable" note moves under the button */ :root.sw-v3.sw-v3 .sw-cro-offer .sw-cro-code-row > span strong:first-child { font-size: 14px !important; } :root.sw-v3.sw-v3 .product-detail__price .v3-arrive { margin: 3px 0 0 !important; font: 13px/1.45 var(--v3-sans) !important; color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .v3-code-note { margin: 10px 0 0; font: 12.5px/1.5 var(--v3-sans); color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .v3-code-note + .v3-ship { margin-top: 2px; } /* s: phones, product page: r's arrival line pushed Add to cart half below the first screen on 23 of 25 bracelets (button 640–692 in a 664 view); tighter spacing above the button brings the whole button back */ @media (max-width: 749px) { :root.sw-v3.sw-v3 [id*="__main-product-info"] .product-detail { padding-top: 6px !important; } :root.sw-v3.sw-v3 .product-detail__info > h1 { margin-bottom: 0 !important; } :root.sw-v3.sw-v3 .product-detail__info > .block-text:first-of-type .sw-appeal-kicker { margin: 0 0 2px !important; } :root.sw-v3.sw-v3 .product-detail__info > .product-detail__price { margin-bottom: 0 !important; } :root.sw-v3.sw-v3 .sw-cro-offer { margin-top: 2px !important; } :root.sw-v3.sw-v3 .product-detail__price .v3-arrive { margin-top: 1px !important; } } /* t: home on phones: the three-line heading (17:55Z) pushed the price and arrival lines off the first screen, and the "to wear yourself or give as a gift" line showed on desktop only; two-line heading, that one sentence, the photo gives way */ @media (max-width: 899px) { :root.sw-v3.sw-v3 .v4h-hero h1 { font-size: clamp(30px, 8.7vw, 40px); margin-bottom: 8px; } :root.sw-v3.sw-v3 .v4h-lede { display: block; font-size: 15px; line-height: 1.4; margin: 0 0 14px; color: var(--v3-body); } :root.sw-v3.sw-v3 .v4h-lede .v4h-lede-more { display: none; } :root.sw-v3.sw-v3 .v4h-hero-media img { height: clamp(200px, calc(100svh - 392px), 340px); } } /* u: Shop arrival line (17:56Z) inherited the hero's small italic serif; same plain sans as the home and product-page lines */ :root.sw-v3.sw-v3 #sw-v2-app .shop-hero .shop-arrive { font: 400 12.5px/1.5 var(--v3-sans) !important; font-style: normal !important; letter-spacing: 0 !important; color: var(--v3-body) !important; text-wrap: balance; } /* ===== v: dress-up pass (CC 2026-10-27 night). Owner 18:5xZ: 「目前网站太普通了，一点不好看，就太素了，ai味儿太浓…包括排版，交互， 起码稍微装扮一下」. Compared with 8 jewelry and crystal stores (research/sw-site-design-refs-2026-10-27/REFS.md): - first screen is one photo edge to edge with the heading on it (8/8); ours was a small dim photo above a text block - square buttons (4 of 5 measured); ours were gold pills - a display serif with character + a plain sans (7/8); ours was Cormorant Garamond + Inter + gold, the stock "AI luxury" set - product cards carry a second photo (4/7); scroll-in reveal (3/8) So: Fraunces light (soft) + Jost (already loaded by the theme), ink square buttons, plum from the old SW night palette as the one colour, sections alternate paper / white / sand / plum / blush, small caps labels only where they name something, one motion (fade-up on scroll, off for reduced motion), the wrist photo on card hover. ===== */ :root.sw-v3.sw-v3 { --v3-bg: #FAF8F5; --v3-bg2: #F2ECE5; --v3-surface: #FFFFFF; --v3-ink: #1F1A1D; --v3-body: #4A4347; --v3-muted: #6A6267; --v3-line: rgba(31, 26, 29, .13); --v3-gold: #1F1A1D; /* was the gold button fill: now ink */ --v3-gold-ink: #FFFFFF; /* text on that fill */ --v3-gold-text: #5A3253; /* links and small accents: plum */ --v3-brand: #5A3253; --v3-dark: #3A2537; --v5-plum: #3A2537; --v5-on-plum: #F7EEF4; --v5-on-plum-2: #DCC8D6; --v5-blush: #F5ECEA; --v3-serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; --v3-sans: "Jost", "Jost Fallback", -apple-system, "Helvetica Neue", Arial, sans-serif; --color-gold-hover: #3D2038; --color-gold-muted: #7A5A74; --color-gold-glow: rgba(90, 50, 83, .12); --color-button-background: 31, 26, 29; --color-button-text: 255, 255, 255; } :root.sw-v3.sw-v3 body { font-family: var(--v3-sans); -webkit-font-smoothing: antialiased; } /* header: plum strip, ink wordmark (no gold half) */ :root.sw-v3.sw-v3 .v3-ann { background: var(--v5-plum); color: var(--v5-on-plum); font: 500 11.5px/1.3 var(--v3-sans); letter-spacing: .16em; } :root.sw-v3.sw-v3 .v3-brand { font: 400 20px/1 var(--v3-serif); letter-spacing: .2em; } :root.sw-v3.sw-v3 .v3-brand b { font-weight: 400; color: var(--v3-ink); } :root.sw-v3.sw-v3 :is(.v3-links a, .v3-menu a) { font: 500 12.5px/1.2 var(--v3-sans); letter-spacing: .14em; } :root.sw-v3.sw-v3 :is(.v3-links a, .v3-menu a, .v3-ft a):hover { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .v3-menu a { font-size: 13.5px; padding: 16px 0; } /* buttons: square, ink; the ghost one fills on hover */ :root.sw-v3.sw-v3 .v3-btn { border-radius: 0; font: 500 13px/1 var(--v3-sans); letter-spacing: .14em; min-height: 50px; transition: background-color .2s ease-out, color .2s ease-out; } :root.sw-v3.sw-v3 .v3-btn--gold:hover { background: #40363B !important; border-color: #40363B !important; } :root.sw-v3.sw-v3 .v3-btn--ghost:hover { background: var(--v3-ink) !important; color: #fff !important; } :root.sw-v3.sw-v3 :is(.product-detail button[name="add"], .product-detail .button--secondary, [id*="__main-product-info"]:not(#v3-x) .product-detail button[name="add"], .v3-buybar-btn, theme-cart-drawer .button--fill, .sn-button, .sw-v2-404__btn, #sw-pdp-story a.sw-appeal-cta) { border-radius: 0 !important; } :root.sw-v3.sw-v3 :is(.product-detail button[name="add"], [id*="__main-product-info"]:not(#v3-x) .product-detail button[name="add"], .v3-buybar-btn) { font: 500 14px/1 var(--v3-sans) !important; letter-spacing: .14em !important; text-transform: uppercase !important; } :root.sw-v3.sw-v3 body.sw-v2-native-commerce :is([id*="__main-cart"], [id*="__main-search"]) :is(button, [type="submit"], .cart-empty__button) { border-radius: 0 !important; } /* text links: ink, underlined (the gold "→" links read as template) */ :root.sw-v3.sw-v3 :is(.v3h-head a, .v4h-link, .v4h-gift-more a, .v4h-more a, .v3-more-all, .v3-studio-link a) { color: var(--v3-ink) !important; font: 500 13.5px/1.4 var(--v3-sans) !important; letter-spacing: .02em; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px !important; } :root.sw-v3.sw-v3 :is(.v3h-head a, .v4h-link, .v4h-gift-more a, .v4h-more a, .v3-more-all):hover { color: var(--v3-gold-text) !important; } /* headings: light serif, slightly tighter */ :root.sw-v3.sw-v3 .v4h h2 { font: 300 clamp(30px, 8vw, 46px)/1.06 var(--v3-serif); letter-spacing: -.012em; } :root.sw-v3.sw-v3 .v4h h2 em, :root.sw-v3.sw-v3 .v4h h1 em { font-style: italic; } :root.sw-v3.sw-v3 .v4h h3 { color: var(--v3-ink); letter-spacing: .14em; font-weight: 500; } :root.sw-v3.sw-v3 .v4h-gifts h2 { font: 300 clamp(32px, 8.4vw, 48px)/1.06 var(--v3-serif) !important; } :root.sw-v3.sw-v3 .v3-more h2 { font: 300 clamp(28px, 7vw, 38px)/1.1 var(--v3-serif); } :root.sw-v3.sw-v3 .v4h-eyebrow { display: none !important; } :root.sw-v3.sw-v3 .v4h p { font-size: 15.5px; } /* ---------- home: hero ---------- */ :root.sw-v3.sw-v3 .v4h .v4h-hero.v5-hero { display: block; padding: 0; max-width: none; margin: 0; } :root.sw-v3.sw-v3 .v5-hero .v4h-hero-media { position: relative; overflow: hidden; background: #CDBFB6; } :root.sw-v3.sw-v3 .v5-hero .v4h-hero-media img { display: block; width: 100%; height: clamp(420px, calc(100svh - 196px), 640px); max-height: none; aspect-ratio: auto; object-fit: cover; object-position: var(--v5-hero-pos, 50% 50%); border-radius: 0; background: #CDBFB6; } :root.sw-v3.sw-v3 .v5-hero-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 96px 20px 22px; background: linear-gradient(to top, rgba(28, 18, 26, .72), rgba(28, 18, 26, .38) 52%, rgba(28, 18, 26, 0)); } :root.sw-v3.sw-v3 .v5-hero h1 { color: #fff !important; font: 300 clamp(34px, 9.6vw, 66px)/1.03 var(--v3-serif) !important; letter-spacing: -.015em; margin: 0 0 10px !important; max-width: 13em; text-wrap: balance; } :root.sw-v3.sw-v3 .v5-hero .v4h-lede { display: block; color: rgba(255, 255, 255, .94) !important; font: 400 16px/1.4 var(--v3-sans) !important; margin: 0 0 18px !important; max-width: 40ch; } :root.sw-v3.sw-v3 .v5-hero .v4h-lede .v4h-lede-more { display: none; } :root.sw-v3.sw-v3 .v5-hero .v4h-ctas { grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; } :root.sw-v3.sw-v3 .v5-hero .v4h-ctas .v3-btn--gold { background: #fff !important; color: var(--v3-ink) !important; border-color: #fff !important; } :root.sw-v3.sw-v3 .v5-hero .v4h-ctas .v3-btn--gold:hover { background: var(--v5-on-plum) !important; } :root.sw-v3.sw-v3 .v5-hero .v4h-ctas .v3-btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, .9) !important; background: rgba(255, 255, 255, .04) !important; } :root.sw-v3.sw-v3 .v5-hero .v4h-ctas .v3-btn--ghost:hover { background: #fff !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .v5-hero .v4h-hero-copy { padding: 14px 20px 0; max-width: 1200px; margin: 0 auto; } :root.sw-v3.sw-v3 .v5-hero .v4h-price { margin: 0 !important; font-size: 13.5px !important; } :root.sw-v3.sw-v3 .v5-hero .v4h-why { font-size: 13px !important; color: var(--v3-body) !important; } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v5-hero .v4h-hero-media img { height: clamp(560px, 78vh, 760px); } :root.sw-v3.sw-v3 .v5-hero-over { top: 0; right: auto; width: min(760px, 62%); display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 40px max(40px, calc((100vw - 1200px) / 2 + 40px)); background: linear-gradient(to right, rgba(28, 18, 26, .62), rgba(28, 18, 26, .3) 70%, rgba(28, 18, 26, 0)); } :root.sw-v3.sw-v3 .v5-hero .v4h-lede { font-size: 18px !important; } :root.sw-v3.sw-v3 .v5-hero .v4h-lede .v4h-lede-more { display: inline; } :root.sw-v3.sw-v3 .v5-hero .v4h-hero-copy { padding: 16px 40px 0; display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; } :root.sw-v3.sw-v3 .v5-hero .v4h-price + .v4h-why { margin: 0 !important; } } /* z (10-27 20:3xZ): codex's two hero photos leave a clear wall for the words (portrait: top third, landscape: left half), so the heading sits on the wall in ink, with no dark film over the photo. Phones: heading and one line on the photo, buttons and price under it (on the photo they would sit on the bracelets). From 750px: the landscape photo, heading, line and buttons in the left half. */ :root.sw-v3.sw-v3 .v5-hero--wall :is(.v4h-hero-media, .v4h-hero-media img) { background: #E8DCD0; } :root.sw-v3.sw-v3 .v5-hero--wall picture { display: block; } :root.sw-v3.sw-v3 .v5-hero--wall .v5-hero-over { background: none; } :root.sw-v3.sw-v3 .v5-hero--wall h1 { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-lede { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-ctas .v3-btn--gold { background: var(--v3-ink) !important; color: #fff !important; border-color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-ctas .v3-btn--gold:hover { background: #40363B !important; border-color: #40363B !important; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-ctas .v3-btn--ghost { color: var(--v3-ink) !important; border-color: var(--v3-ink) !important; background: transparent !important; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-ctas .v3-btn--ghost:hover { background: var(--v3-ink) !important; color: #fff !important; } @media (max-width: 749px) { :root.sw-v3.sw-v3 .v4h .v4h-hero.v5-hero.v5-hero--wall { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; } :root.sw-v3.sw-v3 .v5-hero--wall :is(.v4h-hero-media, .v5-hero-over) { display: contents; } :root.sw-v3.sw-v3 .v5-hero--wall picture { grid-area: 1 / 1 / 4 / 2; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-hero-media img { height: clamp(360px, calc(100svh - 262px), 600px); object-position: 50% 28%; } :root.sw-v3.sw-v3 .v5-hero--wall h1 { grid-area: 1 / 1; position: relative; z-index: 1; padding: 22px 20px 0; margin: 0 0 8px !important; font-size: clamp(29px, 8vw, 40px) !important; max-width: 12em; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-lede { grid-area: 2 / 1; position: relative; z-index: 1; padding: 0 20px; margin: 0 !important; font-size: 15.5px !important; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-ctas { grid-area: 4 / 1; padding: 16px 20px 0; max-width: none; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-hero-copy { grid-area: 5 / 1; padding-top: 12px; } } @media (min-width: 750px) { :root.sw-v3.sw-v3 .v5-hero--wall .v4h-hero-media img { height: clamp(420px, min(56.25vw, calc(100vh - 190px)), 760px); object-position: 50% 42%; } :root.sw-v3.sw-v3 .v5-hero--wall .v5-hero-over { top: 0; bottom: 0; right: auto; left: max(32px, calc((100vw - 1200px) / 2 + 40px)); width: min(520px, calc(45vw - max(32px, calc((100vw - 1200px) / 2 + 40px)))); display: flex; flex-direction: column; justify-content: center; padding: 32px 0; } :root.sw-v3.sw-v3 .v5-hero--wall h1 { font-size: clamp(32px, 3.9vw, 58px) !important; max-width: 9.6em; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-lede { font-size: 16px !important; max-width: 34ch; } :root.sw-v3.sw-v3 .v5-hero--wall .v4h-lede .v4h-lede-more { display: inline; } } /* ---------- home: section rhythm (paper / white / sand / plum / blush) ---------- */ :root.sw-v3.sw-v3 .v4h section:not(.v4h-hero) { margin-top: 0 !important; } :root.sw-v3.sw-v3 .v4h .v4h-values { margin-top: 18px !important; padding-top: 16px; padding-bottom: 16px; } :root.sw-v3.sw-v3 .v4h-values svg { stroke: var(--v3-gold-text); } :root.sw-v3.sw-v3 .v4h-values .v3-ship { display: none; } :root.sw-v3.sw-v3 .v4h .v4h-meanings { padding-top: 52px; } :root.sw-v3.sw-v3 .v4h .v4h-edit { padding-top: 40px; padding-bottom: 60px; } :root.sw-v3.sw-v3 .v4h .v4h-gifts { padding-top: 56px; padding-bottom: 56px; background: var(--v5-plum); color: var(--v5-on-plum); } :root.sw-v3.sw-v3 .v4h .v4h-story { padding-top: 60px; padding-bottom: 60px; background: var(--v3-surface); } :root.sw-v3.sw-v3 .v4h .v4h-studio { padding-top: 60px; padding-bottom: 60px; background: var(--v3-bg2); } :root.sw-v3.sw-v3 .v4h .v4h-real { padding-top: 60px; padding-bottom: 28px; } :root.sw-v3.sw-v3 .v4h .v4h-care { padding-top: 60px; padding-bottom: 60px; margin-top: 28px !important; background: var(--v5-blush); } :root.sw-v3.sw-v3 .v4h .v4h-learn { padding-top: 60px; } :root.sw-v3.sw-v3 .v4h .v4h-faq { padding-top: 52px; padding-bottom: 56px; margin: 0 !important; } :root.sw-v3.sw-v3 .v4h .v4h-end { padding-top: 64px; padding-bottom: 68px; background: var(--v5-plum); color: var(--v5-on-plum); } /* section heads: heading left, its link right, a hairline under */ :root.sw-v3.sw-v3 .v4h .v3h-head { align-items: flex-end; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--v3-line); } :root.sw-v3.sw-v3 .v4h-sub { margin: 0 0 18px !important; max-width: 56ch; } /* shop by meaning: photos with the wish written on them */ :root.sw-v3.sw-v3 .v4h-tile { position: relative; display: block; overflow: hidden; color: var(--v3-ink); } :root.sw-v3.sw-v3 .v4h-tile img { border-radius: 0 !important; aspect-ratio: 4 / 5 !important; } :root.sw-v3.sw-v3 .v5-tile-img { position: relative; display: block; overflow: hidden; } :root.sw-v3.sw-v3 .v4h-tile .t { position: absolute; inset: 0; display: flex; align-items: flex-end; margin: 0; padding: 12px; color: #fff; font: 300 21px/1.1 var(--v3-serif); background: linear-gradient(to top, rgba(28, 18, 26, .58), rgba(28, 18, 26, 0) 58%); } :root.sw-v3.sw-v3 .v4h-tile .s { display: block; margin-top: 8px; font-size: 13px; color: var(--v3-muted); } @media (hover: hover) { :root.sw-v3.sw-v3 .v4h-tile img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); } :root.sw-v3.sw-v3 .v4h-tile:hover img { transform: scale(1.03); } } /* product cards (home picks, "more for", Shop): square photo, no rounding, name in the serif, price in the sans */ :root.sw-v3.sw-v3 :is(.v3h-card img, .v3-more-grid img, #grid .card__img img) { border-radius: 0 !important; } :root.sw-v3.sw-v3 :is(.v3h-card .n, .v3-more-grid .n) { font: 400 17.5px/1.2 var(--v3-serif); margin-top: 10px; } :root.sw-v3.sw-v3 :is(.v3h-card .p, .v3-more-grid .p) { font: 500 14px/1.3 var(--v3-sans); color: var(--v3-ink); } :root.sw-v3.sw-v3 :is(.v3h-card, .v3-more-grid a, #grid > a.card) { position: relative; } :root.sw-v3.sw-v3 .v5-alt { display: none; } @media (hover: hover) and (pointer: fine) { :root.sw-v3.sw-v3 .v5-alt-wrap { position: relative; display: block; overflow: hidden; } :root.sw-v3.sw-v3 .v5-alt { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease-out; pointer-events: none; } :root.sw-v3.sw-v3 :is(.v3h-card, .v3-more-grid a, #grid > a.card):hover .v5-alt { opacity: 1; } } /* holiday gifts on plum */ :root.sw-v3.sw-v3 .v4h-gifts-in { background: none; border: 0; border-radius: 0; padding: 0; } :root.sw-v3.sw-v3 .v4h-gifts h2 { color: #fff !important; } :root.sw-v3.sw-v3 .v4h-gifts .v4h-sub { color: var(--v5-on-plum-2) !important; } :root.sw-v3.sw-v3 .v4h-tiers a { background: transparent; border: 1px solid rgba(247, 238, 244, .34); border-radius: 0; transition: background-color .2s ease-out; } :root.sw-v3.sw-v3 .v4h-tiers a:hover { background: rgba(247, 238, 244, .08); border-color: rgba(247, 238, 244, .7); } :root.sw-v3.sw-v3 .v4h-tiers b { font: 300 22px/1.15 var(--v3-serif); color: #fff; } :root.sw-v3.sw-v3 .v4h-tiers span { color: var(--v5-on-plum-2); font-size: 13px; } :root.sw-v3.sw-v3 .v4h-gifts .v4h-gift-more a { color: #fff !important; } :root.sw-v3.sw-v3 .v4h-gifts .v4h-gift-more a:hover { color: var(--v5-on-plum-2) !important; } :root.sw-v3.sw-v3 .v5-gift-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 22px; } @media (min-width: 900px) { :root.sw-v3.sw-v3 .v4h-gifts-in.v5-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } :root.sw-v3.sw-v3 .v5-gift-photo { margin: 0; aspect-ratio: 4 / 3; object-position: 30% 50%; } } /* why natural stone: the three close-ups as one strip, no rounding */ :root.sw-v3.sw-v3 .v4h-story-imgs img { border-radius: 0; } /* studio */ :root.sw-v3.sw-v3 .v4h-ring { background: var(--v3-surface); border: 0; border-radius: 0; padding: 18px; } :root.sw-v3.sw-v3 .v4h-ring img { border-radius: 0; } :root.sw-v3.sw-v3 .v4h .v3h-doors a { border-radius: 0; border-color: var(--v3-line); transition: border-color .2s ease-out; } :root.sw-v3.sw-v3 .v4h .v3h-doors a:hover { border-color: var(--v3-ink); } :root.sw-v3.sw-v3 .v4h .v3h-doors b { font: 400 20px/1.15 var(--v3-serif); } :root.sw-v3.sw-v3 .v4h .v3h-doors i { color: var(--v3-ink); } :root.sw-v3.sw-v3 .v4h-steps li::before { color: var(--v3-gold-text); } /* videos, care, guides, questions */ :root.sw-v3.sw-v3 .v4h-real .v3h-vids :is(video, img), :root.sw-v3.sw-v3 .v4h-care-imgs img, :root.sw-v3.sw-v3 .v4h-cards img { border-radius: 0; } :root.sw-v3.sw-v3 .v4h-box li::before { background: var(--v3-gold-text); } :root.sw-v3.sw-v3 .v4h-cards .k { color: var(--v3-gold-text); font-weight: 500; } :root.sw-v3.sw-v3 .v4h-cards .t { font: 400 19px/1.2 var(--v3-serif); } :root.sw-v3.sw-v3 .v4h-faq summary { font: 500 16px/1.4 var(--v3-sans); } :root.sw-v3.sw-v3 .v4h-faq details { padding: 16px 0; } :root.sw-v3.sw-v3 .v4h-faq a { color: var(--v3-gold-text); } /* the closing call on plum */ :root.sw-v3.sw-v3 .v4h-end h2 { color: #fff !important; font-size: clamp(34px, 9vw, 52px); } :root.sw-v3.sw-v3 .v4h-end p { color: var(--v5-on-plum-2) !important; } :root.sw-v3.sw-v3 .v4h-end .v3-btn--gold { background: #fff !important; color: var(--v3-ink) !important; border-color: #fff !important; } :root.sw-v3.sw-v3 .v4h-end .v3-btn--gold:hover { background: var(--v5-on-plum) !important; } :root.sw-v3.sw-v3 .v4h-end .v3-btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, .85) !important; } :root.sw-v3.sw-v3 .v4h-end .v3-btn--ghost:hover { background: #fff !important; color: var(--v3-ink) !important; } /* ---------- product pages ---------- */ :root.sw-v3.sw-v3 .product-detail .product-detail__title { font-weight: 300 !important; font-size: 30px !important; letter-spacing: -.01em; } :root.sw-v3.sw-v3 #sw-pdp-story h2 { font-family: var(--v3-serif) !important; font-weight: 300 !important; } :root.sw-v3.sw-v3 #sw-pdp-story .sw-appeal-tags span { border-radius: 0 !important; } :root.sw-v3.sw-v3 .product-detail .product-detail__variant-picker input:checked + label, :root.sw-v3.sw-v3 theme-variant-radio-picker:not(.v3-one) .variant-picker__button { border-radius: 0 !important; } /* ---------- Shop page ---------- */ :root.sw-v3.sw-v3 #sw-v2-app .shop-hero h1 { font-family: var(--v3-serif) !important; font-weight: 300 !important; letter-spacing: -.012em; } :root.sw-v3.sw-v3 #sw-v2-app .shop-hero .section-label { display: none !important; } :root.sw-v3.sw-v3 #grid > a.card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } :root.sw-v3.sw-v3 #grid .card__img { border-radius: 0 !important; overflow: hidden; } :root.sw-v3.sw-v3 #grid .card__name { font: 400 17.5px/1.2 var(--v3-serif) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 #grid .card__price { font: 500 14.5px/1.2 var(--v3-sans) !important; color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 #grid .card__cta { display: none !important; } :root.sw-v3.sw-v3 #grid .card__body { padding: 10px 0 0 !important; background: transparent !important; } @media (max-width: 749px) { :root.sw-v3.sw-v3 #grid .card__hook { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px !important; } } :root.sw-v3.sw-v3 #sw-v2-app :is(.chip, .filter-chip, #meaningRow .chip) { border-radius: 0 !important; } :root.sw-v3.sw-v3 .v3-filter { border-radius: 0; } /* footer */ :root.sw-v3.sw-v3 .v3-ft h2 { font: 500 12px/1.4 var(--v3-sans); letter-spacing: .16em; } /* ---------- one motion: sections rise in once as they reach the screen (script adds v5-js) ---------- */ @media (prefers-reduced-motion: no-preference) { :root.sw-v3.v5-js .v5-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); } :root.sw-v3.v5-js .v5-rv.v5-on { opacity: 1; transform: none; } } /* square corners on the product photos and the Shop offer box; the Shop colour-family stickers on each photo go (the colour filter already says it) */ :root.sw-v3.sw-v3 .media-gallery__image, :root.sw-v3.sw-v3 .media-gallery__media img { border-radius: 0 !important; } :root.sw-v3.sw-v3 #sw-v2-app #sw-ready-offer .ready-offer-inner { border-radius: 0 !important; } :root.sw-v3.sw-v3 #grid .card__el { display: none !important; } :root.sw-v3.sw-v3 :is(.media-gallery__thumbnail, .media-gallery__thumbnail-image) { border-radius: 0 !important; } @media (min-width: 750px) { :root.sw-v3.sw-v3 #sw-v2-app .shop-hero .shop-arrive { text-align: center; } } /* w: phones, product page: Fraunces is wider than Cormorant, so long names ("Grade A Madagascar Rose Quartz Bracelet · 8mm beads") took a third line and pushed Add to cart partly off the first screen on 3 more pages; a smaller title keeps them at two lines */ @media (max-width: 749px) { :root.sw-v3.sw-v3 .product-detail .product-detail__title { font-size: 24px !important; line-height: 1.14 !important; letter-spacing: -.012em; } } /* y: the menu marks the section you are in (script u sets aria-current) */ :root.sw-v3.sw-v3 .v3-links a[aria-current="page"] { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 7px !important; } :root.sw-v3.sw-v3 .v3-menu a[aria-current="page"] { color: var(--v3-gold-text) !important; } :root.sw-v3.sw-v3 .v3-menu a[aria-current="page"]::after { content: " ·"; } /* ---------- za (10-27 21:0xZ): one type system on every page + the text the crawl could not read ---------- research/sw-site-crawl-2026-10-27/REPORT.md: the new type was only on the home page; 85 of 87 pages still showed Cormorant / Inter / Poppins / Georgia. They come from three places, all pointed at the same two families here: 1. the theme's body font setting (Poppins) through --sort-body*-font; 2. the old product stylesheet and page styles, which set --font-heading / --font-body / --font-ui on :root; 3. font names written straight into product-template and page styles (listed below). */ :root.sw-v3.sw-v3 { --font-heading: var(--v3-serif); --font-body: var(--v3-sans); --font-ui: var(--v3-sans); --sort-body-font: var(--v3-sans); --sort-body1-font: var(--v3-sans); --sort-body2-font: var(--v3-sans); --sort-body3-font: var(--v3-sans); --sort-body4-font: var(--v3-sans); --sort-body5-font: var(--v3-sans); --sort-body6-font: var(--v3-sans); font-synthesis-weight: none; /* Fraunces ships 300–500: a 600/700 request renders 500, never a smeared fake bold */ } :root.sw-v3.sw-v3 :is(.sw-appeal h2, .sw-appeal-step h3, .sw-cro-original h2, .sw-reading-next h2, .sw-ritual-panel h2, #sw-v2-commerce-guard .sw-v2-commerce-brand, .sw-product-footer .wordmark, #sw-utility-header .wordmark, #sw-utility-footer .wordmark, .sw-studio-brandbar .sw-studio-wordmark, .sw-moonstone-note :is(h1, h2, blockquote), .sw-moonstone-note .material-card strong) { font-family: var(--v3-serif) !important; } :root.sw-v3.sw-v3 [id*="__main-product-info"]:not(#v3-x) .product-detail__title, :root.sw-v3.sw-v3 body.sw-v2-native-commerce :is([id*="__main-cart"], [id*="__main-search"]):not(#v3-x) :is(h1, h2, h3) { font-family: var(--v3-serif) !important; } :root.sw-v3.sw-v3 :is(body.sw-v2-native-commerce, #sw-pdp-story.sw-appeal, .sw-appeal p, .sw-appeal-intro, .sw-appeal-kicker, .sw-appeal-perks, .sw-appeal-gift li, .sw-appeal-cta, .sw-appeal-care summary, .sw-appeal-ritual figcaption, .sw-appeal-versions figcaption, .sw-cro-offer, .product-detail .sw-cro-copy, .sw-cro-fit, .sw-cro-policy, .sw-cro-original p, .sw-product-footer, .sw-ritual-film figcaption, .sw-ritual-panel p, .sw-moonstone-note, .sw-studio-brandbar > span, .sw-gads-landing .sw-example-guidance, #sw-utility-header a, #sw-utility-footer, #sw-utility-footer h2, .shopline-payment-button-wrapper .pay-button-more-options) { font-family: var(--v3-sans) !important; } :root.sw-v3.sw-v3 body:has(#sw-utility-header):not(.sw-v2-native-commerce) { font-family: var(--v3-sans); } /* the old headings were Cormorant 500 / Georgia 500: in Fraunces that reads heavy next to the light 300 used everywhere else */ :root.sw-v3.sw-v3 :is(.sw-appeal h2, .sw-cro-original h2, .sw-ritual-panel h2, .sw-reading-next h2) { font-weight: 300 !important; letter-spacing: -.01em; } :root.sw-v3.sw-v3 :is(.sw-appeal-step h3, .sw-moonstone-note :is(h1, h2)) { font-weight: 400 !important; } /* text the crawl measured below WCAG (ratio before -> fix) */ /* "Explore the stones" / "Compare tiger eye bracelets" block, 15 pages: old night colours (heading 1.11:1, gold links) */ :root.sw-v3.sw-v3 .sw-reading-next { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .sw-reading-next h2 { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 .sw-reading-next a { color: var(--v3-ink) !important; } /* the Method page: two bands keep the old night film as an inline style (labels and lines 1.1:1) -> sand band, ink text */ :root.sw-v3.sw-v3 section.system[style*="16,13,26"] { background: var(--v3-bg2) !important; } :root.sw-v3.sw-v3 section.system :is(h2, h3) { color: var(--v3-ink) !important; } :root.sw-v3.sw-v3 section.system :is(p, .wx-legend .li, .wx-caption) { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 section.system .section-label { color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .wx-node .wx-stone { max-width: 84%; line-height: 1.25; } :root.sw-v3.sw-v3 .wx-wood .wx-stone { color: #3F6F45 !important; } :root.sw-v3.sw-v3 .wx-fire .wx-stone { color: #9A4A30 !important; } :root.sw-v3.sw-v3 .wx-earth .wx-stone { color: #6E5A1E !important; } :root.sw-v3.sw-v3 .wx-metal .wx-stone { color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .wx-water .wx-stone { color: #2F5C88 !important; } /* closing notes on about / care / stones / the-method (3.27:1), order tracking labels (3.03:1), policies "Back to top" (3.25:1) */ :root.sw-v3.sw-v3 :is(.ab-final__note, .care-final-note, .final__note, .rv > p.note) { color: var(--v3-muted) !important; } :root.sw-v3.sw-v3 .field__label { color: var(--v3-body) !important; } :root.sw-v3.sw-v3 .pol-doc .backtop { background: transparent !important; color: var(--v3-ink) !important; border: 1px solid var(--v3-line) !important; border-radius: 0 !important; padding: 6px 12px; } /* headings read light everywhere, as on the home page: the old pages asked Cormorant for 500, which in Fraunces is heavy */ :root.sw-v3.sw-v3 :is(h1, h2):not(#v3-x) { font-weight: 300 !important; } :root.sw-v3.sw-v3 h3:not(.v4h h3):not(#v3-x) { font-weight: 400 !important; } /* buttons the old theme still drew: order tracking "View Order" (gold, rounded), journal CTA (pill); Shop filter chips: the chosen chip only differed by a faint gold tint (crawl: "差别本来就小") -> plum tint + plum border */ :root.sw-v3.sw-v3 .main-order-tracking__submit { background: var(--v3-ink) !important; color: #fff !important; border: 1px solid var(--v3-ink) !important; border-radius: 0 !important; font: 500 13px/1 var(--v3-sans) !important; letter-spacing: .14em; text-transform: uppercase; min-height: 50px; } :root.sw-v3.sw-v3 .main-order-tracking__submit:hover { background: #40363B !important; } :root.sw-v3.sw-v3 a.cta-btn { border-radius: 0 !important; } :root.sw-v3.sw-v3 #sw-shop-filters .chip.on { background: #F3E9F0 !important; border-color: var(--v3-brand) !important; color: var(--v3-brand) !important; } /* zb (10-27 21:4xZ, round 8) */ /* product pages: the three meaning words under the first story paragraph repeated the line right above its heading (26 of 26 story blocks) */ :root.sw-v3.sw-v3 .sw-appeal .sw-appeal-tags { display: none !important; } /* contact: "Open email draft" was a gold gradient with a glow; the same ink square button as the rest of the site */ :root.sw-v3.sw-v3 .ct-submit { background: var(--v3-ink) !important; color: #fff !important; border: 1px solid var(--v3-ink) !important; border-radius: 0 !important; box-shadow: none !important; font: 500 13px/1 var(--v3-sans) !important; letter-spacing: .14em !important; text-transform: uppercase; min-height: 52px; } :root.sw-v3.sw-v3 .ct-submit:hover { background: #40363B !important; } /* zc (10-27 21:5xZ): "how to measure" next to the size (handbook 2-13). Order 4 = right under a size choice; 7 = under the button */ :root.sw-v3.sw-v3 .product-detail__info > .v3-measure { order: 4; margin: 10px 0 0; font: 400 13px/1.5 var(--v3-sans); color: var(--v3-body); } :root.sw-v3.sw-v3 .product-detail__info > .v3-measure.v3-measure--after { order: 7; margin: 8px 0 0; } :root.sw-v3.sw-v3 .product-detail__info > .v3-measure a { color: var(--v3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* zd (10-27 22:0xZ, handbook 3-04): the phone menu's help links (shipping, returns, order tracking): smaller, no capitals, after the five main links */ :root.sw-v3.sw-v3 .v3-menu .v3-menu-help { display: flex; flex-wrap: wrap; gap: 2px 22px; padding: 12px 0 0; } :root.sw-v3.sw-v3 .v3-menu .v3-menu-help a { padding: 8px 0; border: 0; font: 400 14px/1.3 var(--v3-sans); letter-spacing: 0; text-transform: none; color: var(--v3-body) !important; } /* ze (10-27 22:0xZ, handbook 2-05): the cleansing band keeps its heading and the real video; two plain lines and a care-guide link replace the long paragraph and three steps */ :root.sw-v3.sw-v3 .sw-appeal .sw-appeal-cleanse { font: 400 15px/1.7 var(--v3-sans) !important; color: var(--v3-body) !important; margin: 14px 0 0 !important; max-width: 34em; } :root.sw-v3.sw-v3 .sw-appeal .sw-appeal-cleanse a { color: var(--v3-ink) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; } /* zf: with a real size choice the "how to measure" link sits at the right end of the choice's label line (handbook 2-13) */ :root.sw-v3.sw-v3 .product-detail__info theme-variant-radio-picker:not(.v3-one) .variant-picker__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } :root.sw-v3.sw-v3 .variant-picker__group-head .v3-measure--in { margin: 0; font: 400 13px/1.4 var(--v3-sans); } :root.sw-v3.sw-v3 .variant-picker__group-head .v3-measure--in a { color: var(--v3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }